body {background: url(imagenes/fondo.png);
    font-size: 12px; }

header { width: 100%;
        height: 250px;
        background: url(imagenes/header.png);
        margin: 0;}

main {  width: 100%;
        min-height: 500px;
        height: 1500px;
        background: #F5F5F7;
        margin: 0;}

nav {   width: 100%;
        height: 50px;
        background: #F5F5F7;
        margin: 0px; }

footer { width: 100%;
        height: 300px;
        background: url(imagenes/footer.png);
        margin: -5% 0;
        clear: both;}

aside { width: 14%;
        float: left;
        height: 1000px;
        margin: 3% 0%;
        display: inline-block;}

    aside li { font-size: 87%;}


section { width: 85%;
        background: #F5F5F7;
        height: auto;
        float: left;
        margin: 3% 0.5%;
        display: inline-block;}

section article {width: 25%;
        height: 200px;
        background: none;
        float: left;
        margin: 1% 10px; }

section article2 {width: 425px;
        height: 194px;
        background: #fff;
        float: left;
        margin: 1% 15px; }


#profesortp {margin-left: auto; margin-right: auto; margin-bottom: 30px;}
#profesortp img {margin-bottom: 10px; max-width: 200px; height: auto; margin-left: 16px;}

#alumnostp {margin-left: auto; margin-right: auto; margin-bottom: 30px;}
#alumnostp img {margin-bottom: 10px; max-width: 200px; height: auto; margin-left: 16px;}

#docentes {background: none; height: 910px; width: 600px; margin-left: 40px; text-align: center;} 

.rostro {width: 150px; height: 150px; float: left; }
.rostro img { opacity: 0.100; }
.rostro img:hover { opacity: 0.70; }


#taller {background: none; height: 910px; width: 600px; margin-left: 40px; text-align: center; } 



.curso1 {width: 600px; height: 165px; float: left; margin-bottom: 15px;}
.curso2 {width: 600px; height: 165px; float: left; margin-bottom: 15px;}
.curso3 {width: 600px; height: 165px; float: left; margin-bottom: 15px;}
.curso4 {width: 600px; height: 165px; float: left; margin-bottom: 15px;}


h1 {font-family: "Open Sans Condensed", sans-serif;
    font-size: 1.4EM;
    line-height: 1.2Em;
    padding: 0 2%;
    font-style: bold;
    color: #F15F62;
    margin: 0;}

h2 {font-family: "Open Sans Condensed", sans-serif;
    font-size: 1.4EM;
    line-height: 1.2Em;
    padding: 22px 4%;
    color: #000;
    margin:0;}

h3 {font-family: "Open Sans Condensed", sans-serif;
    font-size: 2EM;
    line-height: 1.4Em;
    width: 40%;
    margin: 2%;
    padding: 1%;
    color: #000;
    background: #F15F62;
    display: block;}

h4 {font-family: "Open Sans Condensed", sans-serif;
    font-size: 8EM;
    line-height: 1Em;
    width: 100%;
    margin: 0%;
    padding: 0%;
    color: #6bc7c0;}

h5 {font-family: "Open Sans Condensed", sans-serif;
    font-size: 1.4EM;
    line-height: 1.2Em;
    padding: 1.6% 1.5%;
    color: #000;
    margin:0;}

h6 {font-family: "Open Sans Condensed", sans-serif;
    font-size: 1.4EM;
    line-height: 1.2Em;
    padding: 0 2%;
    font-style: bold;
    color: #F15F62;
    margin: 0 2%;}

p1 { font-family: "Open Sans Condensed", sans-serif;
    font-size: 1.2EM;
    line-height: 1.5Em; 
    padding: 0 0;
    color: #000;
    float: left;
    margin-left: 2%;
    margin-bottom: 2%;}

footer p { padding: 9% 3%;
            width: 95%;}


.pedagogica {float: left; width: 48%; height: 52%; margin-top: 4%;
             margin-left: 2%;
             margin-bottom: 3%;}

.galeria {float: left; width: 95%; height: 165px; margin-top: 2%;
          margin-bottom: 2%;margin-left: 2%;margin-right: 2%}

.tri {position:static;}

.tri2 { padding-top: 3%;
        padding-bottom: 3%;
        margin-left: 50%;}

.tri3 { margin-top: 12%; 
        margin-left: 47.5%;}


p { font-family: "Open Sans Condensed", sans-serif;
    font-size: 1.2EM;
    line-height: 1.5Em; 
    padding: 0px 2%;
    color: #000;}

p2 { font-family: "Open Sans Condensed", sans-serif;
    font-size: 1.2EM;
    line-height: 1.5Em; 
    padding: 0px 4%;
    color: #F15F62;}

p3 { font-family: "Open Sans Condensed", sans-serif;
    font-size: 1.2EM;
    line-height: 1.5Em; 
    margin-top: 0;
    color: #F15F62;}



ul {list-style: none;}

.corrido {width: 80%; height: 900px; text-align: justify;}

.home {margin-left: 10%}

.menu {  position: relative;
    margin: 0% 4% 0% 0%;
    padding: 10% 0% 0% 0%; 
    font-family: "Open Sans Condensed", sans-serif;
    }
 
.menu li a {width: 15%;
            height: 15px;
            background: none;
            color: #605D74;
            text-decoration: none;
            padding: 0%;
            display: block;
            float:left;
            margin: 3%;
            align-items: center;
            text-align: center;
            font-size: 1.5EM}



.menu a:hover {color: #F15F62;}
.menu ul li a.botonactivo {color: #F15F62;}
aside ul li a.botonactivo {color: #e5ac12; font-weight: 500;}

.subm { margin: 0% 2% 0% 0%;
        padding:0%; 
        font-family: "Open Sans Condensed", sans-serif;
        
    }
 
.subm li a {
            width: 15%;
            height: 15px;
            background: none;
            color: #F15F62;
            text-decoration: none;
            padding: 0%;
            display: inline-block;
            float:left;
            margin: 3% 1%;
            align-items: center;
            text-align: center;
            font-size: 1.1EM}

.subm a:hover {text-decoration: underline;}


.pagina {margin: 0 auto; max-width: 960px;}  

.barra { width: 68%; margin: 3% 16%;}

.logo { height: 100px; width: 100px; float:left; margin: -30px 0px;}

.texto { background: #fff;}

.icono1 { position: absolute; height: 60px; width: 60px; float: left; margin: 70px 104px;}

.icono2 { position: absolute; height: 60px; width: 60px; float: left; margin: 70px 289px;}

.icono3 { position: absolute; height: 60px; width: 60px; float: left; margin: 70px 573px;}

.icono4 { position: absolute; height: 60px; width: 60px; float: left; margin: 70px 750px;}

.art { width: 100%; float:left; margin:0;}

.linea { width: 92%;}

.catedra {float: right; width: 50%; height: 52%; margin: 5% 3.5%;}

.teorica { height: 200px;}

.sep {margin: 1% 1.6%; width: 80%;}

.sep2 {margin: 1% 1%; width: 81%;}

.beca {position: absolute;
        float: right;
        margin: 0 30%;
        width:20%;}
.fufi {width: 101%;
        margin-top: 2%;}

.formulario {margin: 3% 3%;}

.monster {position: absolute;
            width:15%;
            margin: 5% 25%;}

.jquery {width: 79%;
        height: 350px;
        align-content: center;
        margin: 0% 2%;}


.punteo {
        margin: 0;
        width: 1%;
        float: left;
        display: block;
}



.foto2 { height: 200px; width: 50%;}


@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);

@media screen and (max-width: 768px) { 
    main {height: auto;}
    section {width: 100%;}
    aside {display:none;}
    section article {width: 70%; height: 300px; margin-left: 15%;}
    #docentes {width: auto; height: auto;}
    .tri {display: none;}
    .logo {display: none;}
    .icono1 {display: none;}
    .icono2 {display: none;}
    .icono3 {display: none;}
    .icono4 {display: none;}
    .f1 {float: inherit;}
    .f2 {float: inherit;}
    .f3 {float: inherit;}
    .f4 {float: inherit;}
    .f5 {float: inherit;}
    .f6 {float: inherit;}
    .f7 {float: inherit;}
    .f8 {float: inherit;}
    .f9 {float: inherit;}
    .f10 {float: inherit;}
    .f11 {float: inherit;}
    .f12 {float: inherit;}
    .f13 {float: inherit;}