@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,800,700,600,300);
@import url(http://fonts.googleapis.com/css?family=Bitter);


*{ margin: 0; padding: 0; transition: 0.1s;}

body{margin: 0px auto 0px auto; font-size: 16px;}
.pagina {max-width: 960px; height: auto; margin: 0px auto 0px auto;}
main{position: relative; float: left; background: #fff; color: #000; width: 100%; margin: 10% 0 10% 0;  box-sizing: border-box;}
section {width: 100%; height: auto;}

.fondoheader {width: 100%; height:252px;background-color: #F28F1A;margin: 0 auto 0 auto;}
 
header {max-width: 960px; margin: 0 auto 0 auto;font-family: "Bitter";color: #fff; font-style:italic; font-weight: bold;padding-top: 30px;}
header nav {width: 100%}
header nav ul li {display: inline;}
main section ul {list-style-type: none;}
a{color: #fff; text-decoration: none;}
nav {margin: 30px 0px 20px 0px; width: 960px; font-family: "Bitter";color: #fff; font-style:italic; font-weight: bold; }

.separador {clear: both;}
h1 {margin: 0px 0px 20px 0px; background: #5c5c5c; width: 100%;}
.cuatr {font-weight: normal;}


.alumnas {width: 100%;}
.nombres1 {position: relative;float: left;width: 12%; font-size: 1.2em; font-style: italic; background:#818181; padding:1%; color: #fff; box-sizing: border-box;}

.nombres2 {position: relative;float: left; width: 21%; ; font-size: 1.2em; font-style: italic; background:#5c5c5c; padding:1%; color: #fff; margin-left: 7%;box-sizing: border-box;}

.nombres3 {position: relative;float: left; width: 25%; ; font-size: 1.2em; font-style: italic; background:#5c5c5c; padding:1%; color: #fff; margin-left: 8%; box-sizing: border-box;}

.nombres4 {position: relative;float: right; width: 23%; font-size: 1.2em; font-style: italic; background:#5c5c5c; padding:1%; color: #fff; margin-left: 2%; box-sizing: border-box;}


.nombres1:hover {background: #F28F1A; border: 1px solid #000;}
.nombres2:hover {background: #F28F1A; border: 1px solid #000;}
.nombres3:hover {background: #F28F1A; border: 1px solid #000;}
.nombres4:hover {background: #F28F1A; border: 1px solid #000;}

.internas ul {list-style-type: none;}

.navegacion {font-family: "Bitter";font-style: italic; font-weight: bold; font-size: 0.9em; background:#818181; padding: 1%; color: #fff;margin:1% 2% 0 0; position: relative; float: left;}
.navegacion:hover {background: #F28F1A; border: 1px solid #000;}

.navegacion2 {font-family: "Bitter";font-style: italic; font-weight: bold; font-size: 0.9em; background:#393939; padding: 1%; color: #fff;position: relative; float: left;margin:1% 2% 0 0}
.navegacion2:hover {background: #F28F1A; border: 1px solid #000;}


.navegacion3 {font-family: "Bitter";font-style: italic; font-weight: bold; font-size: 0.9em; background:#393939; padding: 1%; color: #fff;position: relative; float: left;margin:1% 2% 0 0}
.navegacion3:hover {background: #F28F1A; border: 1px solid #000;}


section {width: 100%; height: auto;}
h2 {font-family: "Bitter"; color: #5c5c5c; margin-bottom: 2%;position: relative; float: left; width: 100%;}

.internas {position: relative; float: left; width: 100%;}

.miimagen {width: 30%;position: relative; float:left;}
.miimagen img {position: relative; float: left; width: 77%; margin-right: 5%;   box-shadow: -2px 4px 5px #ccc;}

.niveluno {position: relative; float: left; width: 22%;height: auto; background: dimgray; border-radius: 1em; color:#fff;padding: 3% 0 5.5% 0; margin-right: 5%; box-sizing: border-box; box-shadow: -2px 4px 5px #ccc;}
.niveluno ul li {font-family: "Open Sans"; font-style: normal; font-size: 0.9em; padding:0 0 1.5% 11%; }

.niveldos {position: relative; float: left; width: 22%;height: auto; background: dimgray; border-radius: 1em; color:#fff;padding: 3% 0 8% 0;box-sizing: border-box;box-shadow: -2px 4px 5px #ccc; }

.niveldos ul li {font-family: "Open Sans"; font-style: normal; font-size: 0.9em; padding:0 0 1.5% 11%;   }

h3 {padding:0 0 4% 12%; font-family: "Open Sans"; font-style: normal; width: 50%}

.tema {position: relative; float: left; width: 100%; background: #ccc; padding: 5%; box-sizing: border-box; border-bottom-right-radius: 1em; border-bottom-left-radius: 1em; margin: 5% 0 0 0;}

.tema p {font-family: "Open Sans"; font-style: normal; font-size: 0.9em; line-height: 2em;}

#propuesta {width: 100%; height: auto; position: relative; float: left;}



footer {width: 960px; margin: 0 auto 0 auto;}
.legalpie p {position: relative; float: left; font-family: "Open Sans"; font-style: italic; font-size: 0.9em; color: white;text-align: center; padding: 5% 0px 0px 7%; width: 90%; box-sizing: border-box;}

.grisfondo  {clear: both; width: 100%; height:160px ;background-color: #616160; margin: 0px auto 0 auto;}


.pie {clear: both; width: auto; padding: 40px;font-size: 10pt; height:10px}
.navegacionabajo {position: relative; float: left; padding: 0 0 30px 0;}
.navegacionpie {font-size: 12pt; background:#818181; padding: 13px; color: #fff;margin-right: 2%;}
.navegacionpie2 {font-size: 12pt; background:#818181; width: 400px; padding: 13px; color: #fff; margin-right: 2%;}
.navegacionpie3 {font-size: 12pt; background:#818181; width: 400px; padding: 13px; color: #fff; }

.fondofooter {width: 100%; height:150px;background: dimgray;margin: 0 auto 0 auto; clear: both;}




@media screen and (max-width:950px){
          *{transition: 0.1s;}
          .nombres1 {width: 100%; margin: 0; text-align: center}     
          .nombres2 {width: 100%;margin: 0; text-align: center}
          .nombres3 {width: 100%;margin: 0; text-align: center} 
          .nombres4 {width: 100%;margin: 0; text-align: center} 
          .fondoheader {height: 244px;}
          
          
}


@media screen and (max-width:790px){
          .niveluno {width: 30%}
          .niveldos {width: 30%}
          
          .niveluno ul li {font-size: 0.8em;}
          .niveldos ul li {font-size: 0.8em;}
          .legalpie p {font-size: 0.8em;width: 70%;}
          .fondoheader {height: 244px;}
          
}


@media screen and (max-width:753px){
          *{transition: 0.1s;}
          .navegacion {font-size: 0.95em; width: 50%; border: 1px dotted #eee; box-sizing: border-box; margin: 0;}
          .navegacion2 {font-size: 0.95em; width: 50%; border: 1px dotted #eee; box-sizing: border-box; margin: 0;}
          .navegacion3 {font-size: 0.95em; width: 50%; border: 1px dotted #eee; box-sizing: border-box; margin: 0;}
          .legalpie p {width:60%;}
           .fondoheader {height: 244px;}
          
}


@media screen and (max-width:753px){
          *{transition: 0.1s;}
          .legalpie p {width:60%;}
           .fondoheader {height: 244px;}
          
          
}


@media screen and (max-width:600px){
          *{transition: 0.1s;}
        .legalpie p {width:40%; margin-left: 5%; padding-top: 3%;}
   
}

@media screen and (max-width:550px){
          *{transition: 0.1s;}
.legalpie p {width:30%; margin: 2% 0 0 10%; padding: 0; font-size: 0.7em;}

}

@media screen and (max-width:480px){
          *{transition: 0.1s;}
          
.legalpie p {width:30%; margin: 2% 0 0 9%; padding: 0; font-size: 0.7em;}
          .niveluno {width: 100%}
          .niveldos {width: 100%}
          h2 {width:50%;}
          
}


@media screen and (max-width:380px){
          *{transition: 0.1s;}
          .navegacion {font-size: 0.8em;}
          
          .miimagen img  {width: 100%;position: relative; float: right; }
          .legalpie p {width:25%; margin: 2% 0 0 2%; padding: 0; font-size: 0.6em;}
}