* {
margin: 0;
padding:0;
font-family: sans-serif;
    
}

body{
display:block;
background: #FBFBFB;    

}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

.page {
max-width: 90%;
margin-left: 5%;
margin-right: 5%;
    
 }

header {
width: 86%;
float: left;
margin: 0% 0% 2% 6%; 
background: #E4E4E4;     
border-bottom:7px solid #68FFB1;       
} 

header img {
padding: 1rem 0rem 1rem 2rem;
float: left;
display: block;
}

/**BOTONERA**/


.botonera {
float:left;
width: 60%;
display: block;
}

.botonera ul {
padding-top:1.5rem;
list-style: none;
font-size: 0.8rem;    
}

.botonera ul li {
display: block;
float: left;
margin: 1rem;       
}

/*si no tiene margen la li al achicar la pantalla las li se superponen*/

.botonera ul li a {
text-decoration: none;
padding: 0.5rem;
color: #000;    
text-transform: uppercase; 
font-weight: 700;    
   
}

.botonera ul li a:hover {
color: #68FFB1;
text-decoration: line-through;
}

 /**FOTOS**/

.fotos {
float: left;    
width:90%;
margin: 5% 0 0 7%;
}

.box{
padding: 3% 0%; 
margin: 0 0 2% 0 }

.sub-box {
  
}

h3 {
text-decoration:none;
text-align: center;
font-size: 1.2rem;    
color: #000;    
text-transform: uppercase;    
}

.fotos h3:hover {
color: #68FFB1;
text-decoration: line-through;
}

.fotos .box .sub-box img {
float: left;
width: 95%;
margin:0% 0% 5% 2.5%;
border: 1px solid #000;    
}

.fotos a {
text-decoration:none;
text-align: center;
font-size: 1.2rem;    
color: #000;    
text-transform: uppercase;    
}

.fotos a:hover {
color: #68FFB1;
text-decoration: line-through;
}

/**INFORMACIÓN CÁTEDRA**/

.informacion {
float: left;
width: 87%;
height: auto;
margin: 5% 0px 0px 7%;
}
.datos-academicos {
float: left;
width:40%;
margin: 2% 2% 2% 0%;    
}

.datos-academicos h3 {
padding: 1% 0% 5% 0%; 
}

.datos-academicos p {
font-size: 1.1rem;
color: #000;
font-weight: 200;
line-height: 250%;
padding-left: 20%;    
}

.datos-dgpc {
float: left;
width:40%;
margin: 2% 2% 2% 0%;
border-left:solid 4px #68FFB1;    
}

.datos-dgpc h3 {
padding: 1% 0% 5% 0%; 
}

.datos-dgpc p {
font-size: 1.1rem;
color: #000;
font-weight: 200;
line-height: 250%;
padding-left: 20%;  
}

/**MAPA**/

.informacion-mapa {
float: left;
display: block;
width: 90%    
}

.mapa {
float: left;
display: block;
width: 100%;    
}

.mapa img {
float: left;    
}


/**FOOTER**/

footer {
width: 86%;
float: left;
height: auto;
margin: 6% 0% 3% 6%;
padding: 2% 0% 2% 0%;
border-top: solid 0.5px black;
background: #E4E4E4;    
}

footer p {
color: black;
font-size: 0.8rem;
text-align: center;
}

/** HTML CARTA **/

.informacion-carta{
width: 86%;
float: left;
height: auto;
margin: 1% 0% 1% 6%;
padding: 2% 0% 2% 0%;
}

.carta h3 {
padding: 1% 0% 2% 0%;
font-size: 1rem;    
}

/** HTML MAPA **/

.informacion-mapa{
width: 86%;
float: left;
height: auto;
margin: 1% 0% 1% 6%;
padding: 2% 0% 2% 0%;
}

.mapa h3 {
padding: 1% 0% 02% 0%;
font-size: 1rem;    
}


/**RESPONSIVE**/

@media only screen and (min-width : 320px) {
	.box{
	  width: 100%;
	  float:left;
      padding-left: 5%;
    }
    .datos-academicos {
      float: left;
      width: 100%; 
    }
     .datos-dgpc {
      float: left;
      width: 100%; 
    }
}

@media only screen and (min-width : 360px) {
	.box{
	  width: 43%;
	  float:left;
      padding-left: 5%;
    }
    .datos-academicos {
      float: left;
      width: 100%; 
    }
    .datos-dgpc {
      float: left;
      width: 100%; 
    }
}

@media only screen and (min-width : 768px) {
	.box{
	  width: 21%;
	  float:left;
      padding-left: 2%;    
	}
    .datos-academicos {
      float: left;
      width: 47%; 
    }
    .datos-dgpc {
      float: left;
      width: 48%; 
    }
}