@import url(http://fonts.googleapis.com/css?family=Economica);

/* hoja de estilo de jt01-3 */
*{margin:0; padding:0;}
body {
    font-family: 'Economica', sans-serif;
}
div#pagina {width: 960px; height: 1100px; margin: auto; background-color: #f1eaf8;}

div#materialpagina { width: 960px; height: 1000px; margin: auto; background-color: #dadaf3;}

div#catedrapagina {width: 960px; height: 1100px; margin: auto; background-color: #659fcc;}

div#nivel2pagina {width: 960px; height: 1200px; margin: auto; background-color: #39ab94;}






div#rotulopagina {width: 960px; height: 1000px; background-color: #39ab94; width: 100%; margin: auto;}
header div#botonerarotulo nav ul {
    list-style: none;
    padding: 0%;
    margin: 0%;;
}
header div#botonerarotulo nav ul li a{
    text-decoration: none;
    color: #f1eaf8;
    font-size: 20px;
    font-weight: bold;
    display: block;
    width: 100%;
    text-align: center;
    background-color: #183c49;
}







header#encabezado {
    background-image: url(imagen/fotoportada.svg);
    background-repeat: no-repeat;
    width: 100%;
    height: 228px;
}
header div#redes {
    width: 30px; 
    float: right;
}
header div#redes nav ul {list-style: none;}
.titulo {
    width: 960px; 
    font-size: 77px; 
    color: #f1eaf8;
    display: block;
    float: left;
    margin-top: -8px;
}
.volanta {
    background-color: #f1eaf8; 
    font-size: 16px; 
    font-weight: bold; 
    color: #39ab94;
    display: block;
    float: left;
    margin-top: 145px;
}
header div#botonera nav ul {
    list-style: none;
    padding: 0%;
    margin: 0%;;
}
header div#botonera nav ul li {
    width: 100%;
}
header div#botonera nav ul li a {
    text-decoration: none;
    color: #f1eaf8;
    font-size: 20px;
    font-weight: bold;
    display: block;
    width: 100%;
    text-align: center;
    background-color: #183c49;
}
header div#botonera nav ul li a:hover{
    color: #183c49;
    background-color: #f1eaf8;
}
h2 {font-size: 40px; color: #183c49; top: -100px;}


div#inicioicono {float: left; display: block; margin-top: -30px; margin-left: 5px;}
div#encabezadomateriales {
    width: 100%; 
    height: 228px; 
    background-color: #7bd0d3;
}
.titulomateriales {
    font-size: 77px; 
    color: #f1eaf8;
    display: block;
    float: left;
    margin-top: 155px;
}



article { margin-top: 92px;}
article div {width: 594px; height: 350px; float: left; margin-top: 8px}
article div#clasesintegradorasfoto {
    background-image: url(imagen/1.1serigrafia.jpg); margin-left: 122px;
}
article div#agenda{ width: 106px; height: 350px;background-color: #7bd0d3; margin-left: 16px;}
h5 { font-size: 13px; color: #183c49}



.nota {display: block; margin-left: 122px; margin-right: 122px; text-align: justify;}
h4 {font-size: 16px; color: #183c49;}
.palabra1 {font-size: 40px; color: #f1eaf8; display: block; margin-left: 122px;}
.palabra2 {font-size: 40px; color: #f1eaf8; display: block; float: left; margin-left: 38rem; margin-top: -30px;}
div#cillargo {width: 350px; height: 40px; float: right; margin-top: -7px;}
div#titulares {width: 716px; height: 30px; background-color: #f1eaf8; margin-left: 122px; text-align: center;}
.normal {font-size: 20px; color: #183c49;}
.fuerte {font-size: 20px; font-weight: bold; color: #183c49;}



article div#txtserigrafia {width: 350px; height: 122px; margin-left: 122px; }
div#serigrafia {width: 350px; height: 220px; clear: both; margin-left: 122px; background-image: url(imagen/archivoserigrafia.svg);}

article div#txttramados {width: 350px; height: 122px; margin-top: -122px; margin-left: 16px;}
div#tramados {width: 350px; height: 220px; margin-left: 16px; background-image: url(imagen/archivotramas.svg);}

article div#txtgestion {width: 716px; height: 110px; margin-left: 122px; margin-top: 40px;}
div#gestion {width: 716px; height: 220px; clear: both; margin-left: 122px; background-image: url(imagen/archivogestion.svg);;}

.fecha {font-size: 16px; color: #183c49;}
.numero {font-size: 16px; color: #183c49; font-weight: bold;}
.examen {font-size: 40px; color: #39ab94; width: 229px;height: 50px; display: block;}
article div#bloqueserigtram {width: 350px; height: 30px;float: left; margin-left: -350px; margin-top: 0px; background-color: #dadaf3;}
article div#bloquegestion {width: 229px; height: 220px; float: left; margin-left: 122px; margin-top: -250px; background-color: #dadaf3;}
article div#descargaicono {width: 30px; height: 30px; float: left; margin-left: -30px; margin-top: 228px; background-image: url(imagen/descargar.svg);}






section div {
    width: 350px; 
    height: 228px; 
    float: left; 
    margin-left: 0px; 
    margin-top: 16px; 
}
section div#tps1 {
    margin-left: 122px;
    background-image: url(imagen/tp1.jpg);
}
section div#iconotps {
    width: 30px; 
    height: 30px; 
    float: right; 
    background-color: #39ab94; 
    margin-top: -45px;
}
section div#tps2 {
    margin-left: 16px;
    background-image: url(imagen/tp2.jpg);
}
section div#materiales1 {
    height: 45px;
    margin-left: 122px;
    background-color: #39ab94;
}
section div#materiales2 {
    height: 45px;
    margin-left: 16px;
    background-color: #39ab94;
}
.atencion {display: block; float: left; margin-top: 20px;}
h3 {font-size: 20px; color: #183c49;}




section div#lineo1 {width: 228px; height: 106px; margin-left: 122px; background-image: url(imagen/%25lineatura.svg);}
section div#lineo2 { width: 472px; height: 228px; margin-left: 16px; background-image: url(imagen/%25lineatura2.jpg);}
section div#lineo3 {width: 228px; height: 106px; margin-left: 122px; margin-top: -110px; clear: both; background-image: url(imagen/lineo.jpg);}
section div#imp1 {width: 228px; height: 106px; clear: both; margin-left: 122px;background-color: #39ab94;}
section div#imp2 {width: 228px; height: 106px; margin-left: 16px;background-color: #39ab94; text-decoration: none;}
section div#imp3 {width: 228px; height: 106px; margin-left: 16px;background-color: #39ab94;}
.atencion {display: block; clear: both; margin-left: 122px; margin-right: 122px;}



section div#cuenta1 {width: 228px; height: 228px; margin-left: 122px; background-image: url(imagen/cuentahilo1.jpg);}
section div#cuenta2 {width: 228px; height: 228px; margin-left: 16px; background-image: url(imagen/cuentahilo2.jpg);}
section div#cuenta3 {width: 228px; height: 228px; margin-left: 16px; background-image: url(imagen/cuentahilo3.jpg);}
section div#ejem {width: 472px; height: 228px; clear: both; margin-left: 122px; background-image: url(imagen/ejemplogato.jpg);}
.titulogato {font-size: 20px; color: #183c49; display: block; clear: both; margin-left: 122px; margin-right: 122px;}
.txtgato {font-size: 16px; color: #183c49; display: block; clear: both; margin-left: 122px; margin-right: 122px;}



section div#zachin1 {width: 30px; height: 30px; clear: both; margin-left: 277px; margin-top: 0px;}
section div#zachin2 {width: 30px; height: 30px; margin-left: 170px;margin-top: 0px;}
section div#zachin3 {width: 30px; height: 30px; margin-left: 120px;margin-top: 0px;}
section div#zachin4 {width: 30px; height: 30px; margin-left: 150px;margin-top: 0px;}
section div#profesores { width: 715px; height: 298px; clear: both; margin-top: 40px; margin-left: 122px; text-align: justify;}



footer div#botonera nav ul {
    list-style: none;
    padding: 0%;
    margin: 0%;;
}
footer div#botonera nav ul li a {
    text-decoration: none;
    color: #183c49;
    font-size: 13px;
    display: block;
    text-align: center;
}
footer div#piedepagina {float: left; margin-top: 65px; background-color: #39ab94;}



/* Media Queries */


@media all and (min-width: 1px) and (max-width:320px){
    div#catedrapagina {height: 1300px;}
    div#nivel2pagina {width: 320px; height: 1800px;}
    div#materialpagina { width: 320px; height: 1600px;}
    
    
    
    header#encabezado { width: 320px; height: 228px;}
    header div#redes {float: right;}
    .titulo {width: 320px; font-size: 47px; bottom: -9px; position: absolute;}
    .volanta {
    margin-top: 170px;
    margin-left: -27px;
}
    header {position: relative;}
    header div#botonera nav { position: absolute; bottom: -110px; width: 320px;}
    header div#botonera nav ul li {    }
  
    
    article { margin-top: 130px;}
    article div {width: 190px; float: left; background-repeat: no-repeat;}
    article div#clasesintegradorasfoto { background-image: url(imagen/1.1serigrafia.jpg); margin-left: 0px;}
    article div#agenda{ margin-left: 16px; margin-top: 8px;}
    
    
    
    .nota {margin-left: 0px; margin-right: 0px; margin-top: 16px;}
    
    
    
    
    article {width: 320px;}
    .nota { margin-left: 0px; margin-right: 0px;}
    .palabra1 { margin-left: 4px;}
    .palabra2 { margin-left: 12rem;}
    div#cillargo {width: 320px;}
    div#titulares {width: 320px; height: 50px; margin-left: 4px; margin-top: 40px;}
    .normal {font-size: 16px;}
    
    
    
    
    article div#txtserigrafia {width: 320px; margin-left: 0px; margin-top: 60px;}
    div#serigrafia {width: 320px; margin-left: 0px;}
    
    article div#txttramados {width: 320px; height: 122px; margin-top: 60px; margin-left: 0px;}
    div#tramados {width: 320px; height: 220px; margin-left: 0px;}
    
    article div#txtgestion {width: 100%; height: 122px; margin-left: 0px; margin-top: 60px;}
    div#gestion {width: 320px; margin-left: 0px; background-image: url(imagen/archivogestion%201-320.svg);}
    
    .fecha {font-size: 16px; color: #183c49;}
    .numero {font-size: 16px; color: #183c49; font-weight: bold;}
    .examen {font-size: 40px; color: #39ab94; width: 229px;height: 50px; display: block;}
    
    article div#bloqueserigtram {width: 320px; margin-left: 0px; margin-right: 0px; margin-top: -250px;}
    article div#bloquegestion {width: 320px; height: 80px; margin-left: 0px; margin-top: -250px;}
    article div#descargaicono {margin-left: -40px;}
    
    
    
    section div {width: 148px;}
    section div#tps1 {
    clear: both;
    margin-left: 8px;
    }
    section div#iconotps {
    float: left; 
    margin-left: 90px;
    margin-top: -40px;
    }
    section div#tps2 {
    margin-left: 8px;
    }
    section div#materiales1 {
        clear: both;
        margin-left: 8px;
    }
    section div#materiales2 {
    margin-left: 8px;
    }
    
    
    
    section div#lineo1 {width: 228px; margin-left: 46px;}
    section div#lineo2 { width: 320px; height: 155px; margin-left: 0px; background-image: url(imagen/%25lineatura2%201%20320.svg);}
    section div#lineo3 {width: 228px; margin-left: 46px; margin-top: 16px;}
    section div#imp1 {width: 320px; margin-left: 0px;}
    section div#imp2 {width: 320px; margin-left: 0px;}
    section div#imp3 {width: 320px; margin-left: 0px;}
    .atencion {margin-left: 0px; margin-right: 0px;}
    
    
    
    
    section div#cuenta1 {margin-left: 46px;}
    section div#cuenta2 { margin-left: 46px; }
    section div#cuenta3 { margin-left: 16px;}
    section div#ejem {width: 320px; height: 155px; margin-left: 0px; background-image: url(imagen/ejemplogato%201%20320.svg);}
    .txtgato {margin-left: 0px; margin-right: 0px;}

    
    
    
    section div#zachin1 {margin-left: 4px; margin-top: -80px;}
    section div#zachin2 {margin-left: 128px;}
    section div#zachin3 {margin-left: -10px;margin-top: -80px;}
    section div#zachin4 {margin-left: 136px;}
    section div#profesores { width: 320px; margin-left: 4px;}
    
    
    footer {position: relative}
    footer div#botonera nav { position: absolute; margin-top: 680px; margin-left: 0px;}
    footer div#botonera nav ul li {
        width: 64px;
        float: right;
    }
    footer div#piedepagina { width: 320px;; float: left; margin-top: 48px; background-color: #39ab94; clear: both;}
}

@media all and (min-width: 321px) and (max-width: 640px){
    div#catedrapagina {height: 1000px;}
    div#nivel2pagina {width: 640px; height: 1700px }   
    div#materialpagina { width: 640px; height: 1100px;}
    
    
    
    
    header#encabezado {width: 640px; height: 228px;}
    header div#redes {float: right;}
    .titulo {
        width: 640px;
        font-size: 60px;
        margin-top: 4px;
    }
    .volanta {margin-top: 150px; margin-left: 2px;}
    header {position: relative}
    header div#botonera nav { position: absolute; bottom: -50px;}
    header div#botonera nav ul li {
        width: 93px;
        float: right;
        margin-right: 15px;
    }
    article { margin-top: 70px;}
    article div {float: left;}
    article div#clasesintegradorasfoto { margin-left: 16px;}
    article div#agenda{ clear: both; margin-left: 8px; margin-top: 8px;}
    section div {
        width: 250px; 
        height: 228px; 
        margin-top: 8px;
    }
    
    
    
    section div#lineo1 { margin-left: 4px; margin-top: -60px}
    section div#lineo2 { width: 400px; height: 228px; margin-left: 4px; background-image: url(imagen/%25lineatura2%20320-640.svg);  margin-top: -60px}
    section div#lineo3 {margin-left: 4px; margin-top: -106px;}
section div#imp1 {width: 640px; height: 106px; margin-left: 0px; margin-top: 8px;}
    section div#imp2 {width: 640px; height: 106px; clear: both; margin-left: 0px;}
section div#imp3 {width: 640px; height: 106px; clear: both; margin-left: 0px;background-color: #39ab94;}
    .atencion {display: block; clear: both; width: 640px; margin-left: 4px; margin-right: 4px;}
    
    


    
    
    
    
    article {width: 640px; height: 200px;}
    .nota { margin-left: 4px; margin-right: 4px;}
    .palabra1 { margin-left: 4px;}
    .palabra2 { margin-left: 18rem; margin-top: -30px;}
    div#titulares {width: 640px; margin-left: 4px;}
    .normal {font-size: 16px;}
    .fuerte {font-size: 20px;}
    
    
    
    
    
    
    article div#txtserigrafia {margin-top: 60px; }
    div#serigrafia {margin-top: 30px;}
    
    article div#txttramados {margin-top: 60px; margin-left: 122px;}
    div#tramados {margin-left: 122px;margin-top: 30px;}
    
    article div#txtgestion {width: 640px; margin-top: 60px; margin-left: 0px;}
    div#gestion {width: 640px; margin-left: 0px; margin-top: 0px}
    
    article div#bloquegestion {margin-left: 4px;}
    article div#descargaicono {margin-left: -30px; margin-top: 220px;}
    
    
    
    
    
    section div#tps1 {
        margin-left: 8px;
    }
    section div#tps2 {
        margin-left: 8px;
    }
    section div#materiales1 {
        height: 110px;
        margin-left: -508px;
        margin-top: 248px;
    }
    section div#materiales2 {
        height: 110px;
        margin-left: -250px;
        margin-top: 248px;
    }
    
    
    
    
    section div#cuenta1 {width: 200px; height: 200px; margin-left: 10px; margin-top: -30px}
    section div#cuenta2 {width: 200px; height: 200px; margin-left: 10px; margin-top: -30px}
    section div#cuenta3 {width: 200px; height: 200px; margin-left: 10px; margin-top: -30px}
    section div#ejem {margin-left: 84px; margin-top: 16px;}
    .titulogato {margin-top: 16px;}
    .txtgato { margin-left: 0px; margin-right: 0px;}
    
    
    
    
    
    
    section div#zachin1 {margin-left: 140px;}
    section div#zachin2 {margin-left: 142px;}
    section div#zachin3 {margin-left: 100px;}
    section div#zachin4 {margin-left: 143px;}
    section div#profesores {width: 640px; height: 200px; margin-left: 2px; margin-right: 2px; }

    
    
    
    
    footer {position: relative}
    footer div#botonera nav { position: absolute; margin-top: 580px; margin-left: 175px;}
    footer div#botonera nav ul li {
        width: 93px;
        float: right;
    }
    footer div#piedepagina { margin-top: 50px; width: 640px;}
}




@media all and (min-width: 641px){
    header {position: relative}
    header div#botonera nav { position: absolute; right: 0rem; bottom: 0px;}
    header div#botonera nav ul li {
        width: 93px;
        float: right;
        margin-right: 15px;
    }
    footer {position: relative}
    footer div#botonera nav { position: absolute; margin-top: 700px; margin-left: 490px;}
    footer div#botonera nav ul li {
        width: 93px;
        float: right;
    }
}