*{margin:0;}
 
body {
    width: 60%;
    font-size: 16px;
    margin: 0 auto;
}
 
.logoilus {
    width: 17%;
    margin: 0px;
    float: left;
    position: relative; left: 0px;
}

.acuarela {
    width: 100%;
    height: 40%;
    margin: 0px 0px 10px;
}

.nav
{
    width: 100%;
    min-height: 40px;
    font-size: 1em; 
    position:relative;
    display:inline-block;
}

.nav-item { 
    padding-top: 30px;
    padding-left: 20px;
    float: right;
    font-size: 1.3em;
    font-family: 'Yanone Kaffeesatz', sans-serif !important;
    font-weight: 200;
    position:relative; 
    *display:inline;
    zoom: 1 ;
}  

.nav-item a {
  display:block;
    font-family: 'Yanone Kaffeesatz', sans-serif !important;
}

ul
{
list-style-type: none;
}

/* unvisited link */
a:link {
    color: #000;
    text-decoration: none;
}



/* mouse over link */
a:hover {
    color: #258ab7;
}

main { 
    width: 100%;
    min-height: 500%;
   /* saqué el margin= 35% */
}

/* secciòn 1 */
.primero { 
    width: 100%;
    min-height: 381px;
   background-image: url(images/inscripcion.jpg)
}



.inscripcion { 
    background-color: rgba(43, 38, 180, 0.68);
    width: 34%;
    min-height: 381px;
    line-height: 1;
     }

.insc {
    margin-top: 40px;
    font-family: "Oswald", sans-serif;
    font-size: 3em;
    color: #fff;
    padding-top:130px;
    padding-left: 20px;
     }

.anotate {
    font-family: "Tangerine", sans-serif;
    font-size: 1.6em;
    color: #fff;
     padding-left: 20px;
     }


/* fin secciòn 1 */


/* secciòn 2 izquierda */
.segundo { 
    width: 66%%;
    min-height: 132%;
    float: left;
    padding-top: 1px;
    background-image: url(images/pez.jpg); position: inherit;
}


.clases { 
    width: 50%;
    min-height: 381px;
    float: left;
    background-color: rgba(208, 208, 208, 0.51);
    margin-top: 381px;
    margin-right: 200px;
}

.doc {

    font-family: "Oswald", sans-serif;
    font-size: 3em;
    color: #54c7bb;
    padding-top:130px;
    padding-left: 20px;
    line-height: 1;
     }
.iconodocente {
    width: 50px;
    height: 50px;
    align-content: center;
}
.conoce {
    font-family: "Tangerine", sans-serif;
    font-size: 1.6em;
    color: #54c7bb;
     padding-left: 20px;
     }

/* fin secciòn 2 */

/* aside derecha*/
.aside { 
    width: 34%;
    height: 132%;
    float: right;
    }

.catedra { 
    width: 34%%;
    min-height: 132%;
    float: right;
    background-image: url(images/catedra.jpg)
}

.cuadradocat { 
    width: 80%;
    min-height: 310px;
    float: right;
    background-color: #fff;
    margin: 30px;
}
.cat {
    margin-top: 40px;
    font-family: "Oswald", sans-serif;
    font-size: 3em;
    color: #7e7e7e;
    padding-top:60px;
    padding-left: 10px;
    line-height: 1;
     }

.puntos {
    font-family: "Tangerine", sans-serif;
    font-size: 1.6em;
    color: #7e7e7e;
     padding-left: 10px;
     }


.referentes { 
    width: 34%%;
    min-height: 391px;
    float: right;
    background-image: url(images/referentes.jpg)
}

.ref {
    font-family: "Oswald", sans-serif;
    font-size: 2.7em;
    color: #fff;
    padding-left: 25px;
    padding-top: 150px;
    line-height: 1;
     }

.iconoreferentes {
    width: 50px;
    height: 50px;
    text-align: center;
    padding-left: 25px;
    margin-top: 120px;
    padding-top: 50px;
}

.mirar {
    font-family: "Tangerine", sans-serif;
    font-size: 1.6em;
    color: #fff;
     padding-left: 25px;
     }

.alumnos { 
    width: 34%%;
    min-height: 382px;
    float: right;
background-color: #e9ea81;
}

.alum {
    font-family: "Oswald", sans-serif;
    font-size: 3em;
    color: #7e7e7e;
    padding-left: 25px;
    padding-top: 150px;
    line-height: 1;
     }
.iconoalumno {
    width: 50px;
    height: 50px;
    align-content: center;
    padding-left: 25px;
    margin-top: 120px;
}
.necesitas {
    font-family: "Tangerine", sans-serif;
    font-size: 1.6em;
    color: #7e7e7e;
     padding-left: 25px;
     }
/* fin aside derecha*/

/* section 3 */


.docentes { 
    min-height: 60px;
    height: 381px;
    width:66%;
    float: left;
   background-image: url(images/negro.jpg);
    position: relative;
 }

a:link { 
    text-decoration: none;
    }


.pass { 
    width: 50%;
    min-height: 380px;
    float: right;
    background-color: rgba(255, 255, 255, 0.65);
}
.iconoclases{
    width: 50px;
    height: 50px;
    align-content: center;
    margin-top: 120px;
    text-align: center;
    padding-left: 25px;
}
.c {
    height: 50px;
    font-family: "Oswald", sans-serif;
    font-size: 3em;
    color: #000;
    padding-left: 25px;
    padding-top: 150px;
    line-height: 1;
     }


.segui {
    font-family: "Tangerine", sans-serif;
    font-size: 1.6em;
    color: #000;
     padding-left: 25px;
     }

.galeria { 
    background-color: rgba(47, 42, 199, 0.54);
    width: 34%;
    min-height: 381px;
    float: inherit;
}
/* fin section 3*/

/* footer */
footer { 
    min-height: 100px;
    width: 100%;
    float: left;
    background-color: #c3c1c1;
    margin-top: 20px;
    }
.contmaru{ 
    width: 50%;
    font-family: 'Oswald', sans-serif;
    font-size: 70%;
    font-weight: 100;
    text-align: left;
    color: #fff;
    padding-top: 50px;
    padding-left: 30px;
}

    
    }

/* fin footer*/

{ background: 
    }



/* docentes */

*{margin:0;}
 
body {
    width: 60%;
    font-size: 16px;
    margin: 0 auto;
}
 
/* secciòn 1 DOCENTES*/

/* secciòn 1 DANIEL*/
.daniel { 
    width: 100%;
    min-height: 381px;
   background-image: url(images/ROLDAN.jpg)
}



.azul { 
    background-color: rgba(38, 142, 180, 0.84);
    width: 50%;
    min-height: 387px;
    line-height: 1;
     }

.dani {
    margin-top: 40px;
    font-family: "Oswald", sans-serif;
    font-size:3em;
    color: #fff;
    padding-top:140px;
    padding-left: 40px;
     }

.jefe {
    font-family: "Tangerine", sans-serif;
    font-size: 2em;
    color: #fff;
     padding-left: 40px;
     }

.paginaroldan { 
    width: 50%;
    min-height: 4330px;
    font-family: 'Oswald', sans-serif;
    text-align: center;
    color: #fff !important; 
    letter-spacing: 5px;
padding-left: 70px;
    font-size: 20px;
    line-height: 5;
    font-weight: 100;
} 
/* fin secciòn 1 DANIEL*/

/* secciòn ALINA*/
.alina { 
    width: 100%;
    height: 390px;
    background-image: url(images/alina.jpg);
}

.verde { 
    background-color: rgba(38, 180, 147, 0.84);
    width: 50%;
    min-height: 390px;
     }


.ali {
    margin-top: 30px;
    font-family: "Oswald", sans-serif;
    font-size:3em;
    color: #fff;
    padding-top: 130px;
    padding-left: 90px;
     }

.paginaalina { 
    width: 50%;
    min-height: 450px;
    font-family: 'Oswald', sans-serif;
    text-align: center;
    color: #fff;
    letter-spacing: 5px;
padding-left: 80px;
    font-size: 1em;
    line-height: 5;
    font-weight: 100;
} 

/* secciòn fin ALINA*/

/* secciòn FLORENCIA*/
.florencia2 { 
    width: 100%;;
    height: 381px;
    background-image: url(images/negro2.jpg)
}

.violeta { 
    background-color: rgba(125, 38, 180, 0.84);
    width: 50%;
    height: 100%;
    float: right;
     }

.flo {
    margin-top: 30px;
    font-family: "Oswald", sans-serif;
    font-size: 3em;
    color: #fff;
    padding-top: 60px;
    padding-left: 40px;
     }

.jtp {
    font-family: "Tangerine", sans-serif;
    font-size: 2em;
    color: #fff;
     padding-left: 40px;
     }

.paginaflor { 
    width: 50%;
    min-height: 450px;
    font-family: 'Oswald', sans-serif;
    text-align: center;
    color: #fff !important;
    letter-spacing: 5px;
padding-left: 50px;
    font-size: 20px;
    line-height: 5;
    font-weight: 100;
} 

/* secciòn fin FLORENCIA*/

/* secciòn MARCOS*/
.marcos { 
    width: 100%;;
    height: 381px;
    background-image: url(images/marcos.jpg)
}

.verdes { 
    background-color: rgba(38, 180, 147, 0.84);
    width: 50%;
    float: right;
    height: 100%;
     }

.marco {
    margin-top: 30px;
    font-family: "Oswald", sans-serif;
    font-size:3em;
    color: #fff;
    padding-top: 60px;
    padding-left: 70px;
     }

.docente {
    font-family: "Tangerine", sans-serif;
    font-size: 2em;
    color: #fff;
     padding-left: 70px;
     }

.paginamarcos { 
    width: 50%;
    min-height: 450px;
    font-family: 'Oswald', sans-serif;
    text-align: center;
    color: #fff !important;
    letter-spacing: 5px;
padding-left: 60px;
    font-size: 20px;
    line-height: 5;
    font-weight: 100;
} 

/* secciòn fin MARCOS*/

/* secciòn MARTIN*/
.martin { 
    width: 100%;
    height: 390px;
    background-image: url(images/martin.jpg);
}

.fuccia2 { 
     background-color: rgba(212, 52, 132, 0.84);
    width: 50%;
    min-height: 390px;
     }


.tin {
    margin-top: 30px;
    font-family: "Oswald", sans-serif;
    font-size:3em;
    color: #fff;
    padding-top: 130px;
    padding-left: 50px;
     }

.paginamartin { 
    width: 50%;
    min-height: 450px;
    font-family: 'Oswald', sans-serif;
    text-align: center;
    color: #fff !important;
    letter-spacing: 5px;
padding-left: 100px;
    font-size: 20px;
    line-height: 5;
    font-weight: 100;
} 

/* secciòn fin MARTIN*/

/* secciòn CLARISA*/
.clarisa { 
    width: 100%;;
    height: 381px;
    background-image: url(images/clari.jpg)
}

.fuccia { 
    background-color: rgba(212, 52, 132, 0.84);
    width: 50%;
    float: right;
    height: 100%;
     }

.clari {
    margin-top: 30px;
    font-family: "Oswald", sans-serif;
    font-size:3em;
    color: #fff;
    padding-top: 60px;
    padding-left: 70px;
     }

.paginaclari { 
    width: 50%;
    min-height: 450px;
    font-family: 'Oswald', sans-serif;
    text-align: center;
    color: #fff !important;
    letter-spacing: 5px;
padding-left: 70px;
    font-size: 20px;
    line-height: 5;
    font-weight: 100;
} 

/* secciòn fin CLARISA*/

/* secciòn GASTON*/
.gastonn { 
    width: 100%;;
    height: 382px;
    background-image: url(images/gaston.jpg)
        
}

.amarillo { 
    background-color: rgba(204, 185, 37, 0.84);
    width: 50%;
    min-height: 382px;
     }

.gasta {
    margin-top: 40px;
    font-family: "Oswald", sans-serif;
    font-size:3em;
    color: #fff;
    padding-top:140px;
    padding-left: 70px;
     }

.paginagaston { 
    width: 50%;
    min-height: 4330px;
    font-family: 'Oswald', sans-serif;
    text-align: center;
    color: #fff !important; 
    letter-spacing: 5px;
padding-left: 70px;
    font-size: 20px;
    line-height: 5;
    font-weight: 100;
} 
/* secciòn fin GASTON*/

/* secciòn DANIELA*/
.daniela { 
    width: 100%;;
    height: 381px;
    background-image: url(images/daniela.jpg)
}

.amarillos { 
  background-color: rgba(204, 185, 37, 0.84);
    width: 50%;
    float: right;
    height: 100%;
     }

.kantor {
    margin-top: 30px;
    font-family: "Oswald", sans-serif;
    font-size:3em;
    color: #fff;
    padding-top: 80px;
    padding-left: 70px;
     }

.paginakantor { 
    width: 50%;
    min-height: 450px;
    font-family: 'Oswald', sans-serif;
    text-align: center;
    color: #fff !important;
    letter-spacing: 5px;
padding-left: 80px;
    font-size: 20px;
    line-height: 5;
    font-weight: 100;
} 

/* secciòn fin DANIELA*/


/* secciòn JOSE*/
.jose { 
    width: 100%;;
    height: 382px;
    background-image: url(images/jose.jpg)
        
}

.naranja { 
    background-color: rgba(204, 114, 37, 0.84);
    width: 50%;
    min-height: 382px;
     }

.villa {
    margin-top: 40px;
    font-family: "Oswald", sans-serif;
    font-size:3em;
    color: #fff;
    padding-top:120px;
    padding-left: 60px;
     }

.paginajose { 
    width: 50%;
    min-height: 4330px;
    font-family: 'Oswald', sans-serif;
    text-align: center;
    color: #fff !important;
    letter-spacing: 5px;
padding-left: 40px;
    font-size: 0.8em;
    line-height: 5;
    font-weight: 100;
} 
/* secciòn fin JOSE*/

/* secciòn ANA*/
.ana { 
    width: 100%;;
    height: 381px;
    background-image: url(images/ana.jpg)
}

.naranjas { 
    background-color: rgba(204, 114, 37, 0.84);
    width: 50%;
    float: right;
    height: 100%;
     }

.san {
    margin-top: 30px;
    font-family: "Oswald", sans-serif;
    font-size:3em;
    color: #fff;
    padding-top: 80px;
    padding-left: 70px;
     }

.paginaana { 
    width: 50%;
    min-height: 450px;
    font-family: 'Oswald', sans-serif;
    text-align: center;
    color: #fff !important;
    letter-spacing: 5px;
padding-left: 70px;
    font-size: 20px;
    line-height: 5;
    font-weight: 100;
} 

/* secciòn fin ANA*/

/* secciòn DIANA*/
.diana { 
    width: 100%;;
    height: 382px;
    background-image: url(images/diana.jpg)
        
}

.rojo { 
    background-color: rgba(204, 37, 37, 0.84);
    width: 50%;
    min-height: 382px;
     }

.moreno {
    margin-top: 40px;
    font-family: "Oswald", sans-serif;
    font-size:3em;
    color: #fff;
    padding-top:120px;
    padding-left: 60px;
     }

/* secciòn fin DIANA*/

/* secciòn PUPE*/
.pupe { 
    width: 100%;;
    height: 381px;
    background-image: url(images/ana.jpg)
}

.rojos { 
    background-color: rgba(204, 37, 37, 0.84);
    width: 50%;
    float: right;
    height: 100%;
     }

.pup {
    margin-top: 30px;
    font-family: "Oswald", sans-serif;
    font-size:3em;
    color: #fff;
    padding-top: 80px;
    padding-left: 70px;
     }

.paginapupe { 
    width: 50%;
    min-height: 450px;
    font-family: 'Oswald', sans-serif;
    text-align: center;
    color: #fff !important;
    letter-spacing: 5px;
padding-left: 70px;
    font-size: 20px;
    line-height: 5;
    font-weight: 100;
} 

/* secciòn fin PUPE*/

/* secciòn VERONICA*/
.veronica { 
    width: 100%;;
    height: 382px;
    background-image: url(images/veronica.jpg)
        
}

.celeste { 
    background-color: rgba(37, 165, 204, 0.84);
    width: 50%;
    height: 100%;
     }

.bid {
    margin-top: 40px;
    font-family: "Oswald", sans-serif;
    font-size:3em;
    color: #fff;
    padding-top:120px;
    padding-left: 40px;
     }

.paginavero { 
    width: 50%;
    min-height: 450px;
    font-family: 'Oswald', sans-serif;
    text-align: center;
    color: #fff !important;
    letter-spacing: 5px;
padding-left: 40px;
    font-size: 20px;
    line-height: 5;
    font-weight: 100;
} 

/* secciòn fin VERONICA*/

/* secciòn PATRICIO*/
.patricio { 
    width: 100%;;
    height: 381px;
    background-image: url(images/patricio.jpg)
}

.celestes { 
    background-color: rgba(37, 165, 204, 0.84);
    width: 50%;
    float: right;
    height: 100%
     }

.oliver {
    margin-top: 40px;
    font-family: "Oswald", sans-serif;
    font-size:3em;
    color: #fff;
    padding-top:90px;
    padding-left: 50px;
     }

.paginapatricio { 
    width: 50%;
    min-height: 450px;
    font-family: 'Oswald', sans-serif;
    text-align: center;
    color: #fff !important;
    letter-spacing: 5px;
padding-left: 50px;
    font-size: 20px;
    line-height: 5;
    font-weight: 100;
} 

/* secciòn fin PATRICIO*/



/* fin secciòn 1 DOCENTES */

/* fin docentes*/
/* alumnos */

/* secciòn 2 izquierda */

.yasoyalumno { 
    min-height: 500px;
    width: 46%;
    float: left;
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 50px;
    text-align:center;
    color: #fff;
    padding-top: 26px;
    padding-left: 20px;
    padding-right: 20px;
    background-color: rgba(212, 52, 132, 0.84);
    }
.yasoyicono { 
    width:10%;
    height: 10%;
    text-align: center;
}
.yasoytitulo {
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-size: 30px;
    font-weight: 400; 
    text-align: center;
    color: #000;
    margin-top: 10px;
    padding-left: 20px;
    float: left;
}
.yasoytexto{
    float: left;
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 15px;
    text-align: left;
    color: #000;
    padding-left: 20PX;
}
p {
    float: left;
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-size: 15px;
    text-align: left;
    color: #000;
    font-weight: 500;
    padding-top: 10px;
}
h1 {
    float: left;
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-size: 15px;
    text-align: left;
    color: #000;
    font-weight: 500;
    padding-top: 10px;
}
.quieroseralumno { 
    min-height: 800px;
    width: 48%;
    float: right;
    background-color: rgba(37, 165, 204, 0.84); 
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 50px;
    text-align: center;
    color: #fff;
    padding-top: 30px;
    padding-left: 5px;
    }
.quieroicono { 
    width: 60px;
    height: 60px;
    padding-top: 30px;
}
.quierotitulo {
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-size: 30px;
    font-weight: 400; 
    text-align: left;
    color: #fff;
    padding-top: 20px;
    float: left;
    padding-left: 20px;
}
.quierotexto{
    float: left;
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 15px;
    text-align: left;
    color: #fff;
    padding-left: 20px;padding-right: 20px;
}


/* fin alumnos */

@media screen and (max-width:768px)
    { 
    .primero {20%;
              margin-top: 0px;}
    .inscripcion {width:100%;
                 height: 10%;
                  margin-top: 0px;}
    .segundo {height: 50%;
              width:100%;  }
    .clases {height: 100%;
             width:100%;
             margin-top: 0px; }
    .cuadradocat {float: inherit;
        width: 86% }
    .aside {width:100%;
            height: 10%;}
    .catedra {width:100%;
             height: 10%;
           float: left;}
    .docentes {height: 50%;
              width:100%;  }
    .pass {height: 50%;
              width:100%;  }
     .referentes    {height: 50%;
              width:100%;  } 
     .alumnos  {height: 50%;
              width:100%;  }
    .navegador {width:10%;}
    .acuarela {min-height: 50px;
                margin-bottom: 0px;}
    .menu {width:10%; position:left;}
    .logoilus  {width: 40%;
                   height: 100px;
                   margin-top: 20px;}
        .foot {width: 40%;}
    
      .azul {width: 100%;}
      .violeta {width: 100%;}
      .verde {width: 100%;}
      .verdes {width: 100%;}
        .fuccia {width: 100%;}
        .fuccia2 {width: 100%;} 
        .amarillo {width: 100%;}
        .amarillos {width: 100%;}
        .naranja {width: 100%;}
        .naranjas {width: 100%;}
        .rojo {width: 100%;}
        .rojos {width: 100%;}
        .celeste {width: 100%;}
        .celestes {width: 100%;}

       }   
        
@media screen and (max-width:401px)
    { 
    .primero {width: 100%;
              height: 50%;}
    .inscripcion {width:100%;
                 height: 50%;}
    .segundo {height: 30%; }
    .clases {height: 100%;
             width:100%;
             margin-top: 0px; }
    .cuadradocat {float: inherit;
        width: 79% }
    .aside {width:100%;
            height: 5%;}
    .catedra {width:100%;
             height: 10%;
           float: left;}
    .docentes {height: 50%;
              width:100%;  }
    .pass {height: 50%;
              width:100%;  }
     .referentes    {height: 25%;
              width:100%;  } 
     .alumnos  {height: 50%;
              width:100%;  }
     .insc {font-size: 230%;}
     .anotate {font-size: 160%;}
        .doc {font-size: 250%;}
        .conoce {font-size: 160%;}
        .cat {font-size: 260%;}
        .puntos{font-size: 160%;}
        .ref {font-size: 250%;}
        .alum {font-size: 270%;}
        .c {font-size: 270%;}
        
        .dani {font-size: 200%;
        margin-left: -15px;}
        .jefe {font-size: 200%;
        margin-left: -15px;}
        .paginaroldan {font-size: 70%;
        margin-left: -30px;}
        .flo {font-size: 200%;
        margin-left: -15px;}
        .jtp {font-size: 200%;
        margin-left: -15px;}
        .paginaflor {font-size: 60%;
        margin-left: -30px;}
        .ali {font-size: 200%;
        margin-left: -45px;}.
        .paginaalina {font-size: 50%;
        margin-left: -0px;}
        .marco {font-size: 200%;
        margin-left: -45px;}
        .docente {font-size: 200%;
        margin-left: 20px;}
        .paginamarcos {font-size: 70%;
        margin-left: -40px;}
        .tin {font-size: 200%;}
        .paginamartin {font-size: 80%;
        margin-left: -40px;}
        .clari {font-size: 190%;}
        .paginaclari {font-size: 80%;
        margin-left: -50px;}
        .gasta {font-size: 200%;}
        .paginagaston  {font-size: 90%;
        margin-left: -40px;}
        .kantor {font-size: 200%;}
        .paginakantor {font-size: 90%;
        margin-left: -50px;}
        .villa {font-size: 200%;
        margin-left: -20px;}
        .paginajose {font-size: 30%;
        margin-left: -30px;}
        .san {font-size: 200%;
           margin-left: -20px;}
        .paginaana {font-size: 70%;
        margin-left: -40px;}
        .moreno {font-size: 200%;
           margin-left: -30px;}
        .paginapupe {font-size: 80%;
        margin-left: -50px;}
        .bid {font-size: 200%;
           margin-left: 20px;}
        .paginavero {font-size: 60%;
        margin-left: -20px;}
        .oliver {font-size: 200%;
           margin-left: -30px;}
        .paginapatricio {font-size: 80%;
        margin-left: -30px;}
        
        
    }