/* index */

.ajustar{
  clear: both;
  margin: 0 !important;
  padding: 0 !important;
}

body{
    margin: 0;
    font-size: 16px;
    font-family: 'Oswald', sans-serif;
    color: #525252;
}

a, p, h1, h2{
    margin: 0;
    text-decoration: none;
}

header{
    width: 940px;
    height: 90px;
    padding: 20px 10px;
    margin: 0 auto;
}

header img{
    float: left;
}

header p{
    font-size: 2rem;
    font-weight: 300;
    text-transform: uppercase;
    float: left;
    margin: 13px 0px 0px 20px;
}

header .social{
    float: right;
}

header .social a{
    display: inline-block;
}

nav{
    width: 960px;
    margin: 0 auto;
    background: #00B1C2;
    text-align: center;
}

nav a{
    display: inline-block;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 300;
    text-transform: uppercase;
    padding: 8px;
    margin-right: 125px;
}

nav .alumnos{
    background: #DB5367;
    float: right;
    margin-right: 0px;
    padding: 8px 20px;
}

main{
    width: 960px;
    margin: 0 auto;
    padding: 20px 0px;
}

main section article{
    width: 300px;
    height: 210px;
    margin: 0px 10px 20px 10px;
    position: relative;
    float: left;
    color: #fff;
    overflow: hidden;
}

main section .circle{
    display: block;
    width: 210px;
    height: 140px;
    margin: 0px 55px 20px 55px;
    float: left;
    color: #fff;
    background: #E03747;
    border-radius: 105px;
    text-align: center;
    padding-top: 70px;
}

main section .circle:hover{
    background: #00B1C2;
}

main section .circle h2{
    font-size: 2.5em;
    font-weight: 300;
}

main section .principal{
    width: 940px;
    height: 400px;
}

main section article .datos{
    font-size: 1rem;
    width: 210px;
    min-height: 60px;
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    left: 0px;
    bottom: 0px;
    padding: 5px 10px;
}

main section .principal .datos{
    font-size: 1.3rem;
    width: 815px;
    min-height: 95px;
}

main section article .datos h1{ 
    font-size: 2em;
    line-height: 1.3em;
    margin-bottom: 0.3em;
}

main section article .datos h2{
    font-size: 1.2em;
    line-height: 1.3em;
    margin-bottom: 0.2em;
}

main section article .datos p{
    font-size: 0.75em;
    line-height: 1.3em;
}

main section article a{
    display: inline-block;
    color: #00B1C2;
}

main .mas{
    display: block;
    width: 70px;
    height: 70px;
    background: #FFBB12;
    position: absolute;
    right: 0px;
    bottom: 0px;
}

main .mas img{
    width: 100%;
}

main section .principal .mas{
    width: 105px;
    height: 105px;
}

footer{
    width: 960px;
    height: 150px;
    margin: 30px auto 0px;
    background: #00B1C2;
}

footer a{
    display: block;
    color: #fff;
    font-size: 0.8rem;
    margin: 0px 0px 10px 10px;
}

footer .navegacion a{
    margin: 0px 0px 10px 10px;
}

footer .navegacion-alumnos a{
    font-weight: 300;
    margin-bottom: 6px;
}

footer .navegacion-alumnos .alumnos{
    font-weight: 700;
}

footer div{
    width: 299px;
    margin: 10px;
    border-left: 1px solid #fff;
    float: left;
}

footer .footer-logo{
    width: 300px;
    border: none;
}

footer .footer-logo img{
    width: 50%;
}


/* DOCENTES */

.titulo-seccion{
    display: block;
    font-size: 2.5em;
    font-weight: 700;
    margin: 0px 0px 30px 10px;
}

.docentes section{
    width: 460px;
    float: left;
    margin: 0px 10px;
}

.docentes .titular article{
    width: 440px;
    height: 440px;
    margin: 10px;
    border-radius: 220px;
    position: relative;
}

.docentes .titular article:hover{
    margin: 0;
    border: 10px #02E8FD solid;
    border-radius: 230px;
}

.docentes .titular article .nombre{
    width: 440px;
    text-align: center;
    position: absolute;
    padding-top: 180px;
}

.docentes .titular article .nombre h1{
    font-size: 4em;
    font-weight: 700;
    color: rgba(0, 0, 0, 0);
}

.docentes .titular article:hover .nombre h1{
    color: #02E8FD;
}

.docentes .titular article img{
    height: 100%;
}

.docentes .equipos article img{
    width: 100%;
}

.docentes .equipos article{
    width: 200px;
    height: 200px;
    margin: 5px;
    border-radius: 100px;
    position: relative;
    float: left;
}

.docentes .equipos article:hover{
    margin: 0;
    border: 5px #02E8FD solid;
    border-radius: 105px;
}

.docentes .equipos article .nombre{
    width: 200px;
    text-align: center;
    position: absolute;
    padding-top: 80px;
}

.docentes .equipos article .nombre h2{
    font-size: 2em;
    font-weight: 700;
    color: rgba(0, 0, 0, 0);
    line-height: 1.3em;
}

.docentes .equipos article:hover .nombre h2{
    color: #02E8FD;
}


/* LA CÁTEDRA */

.catedra section{
    width: 540px;
    margin: 0px 10px;
    float: left;
}

.catedra h2{
    font-size: 1.3em;
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.catedra section p{
    font-size: 0.9em;
    font-weight: 300;
    margin-bottom: 20px;
}

.catedra aside{
    width: 220px;
    margin: 0px 10px;
    float: right;
    text-align: center;
}

.catedra aside a{
    display: block;
    width: 200px;
    height: 120px;
    border-radius: 100px;
    background-color: #E03747;
    margin: 20px 10px;
    padding-top: 80px;
    color: #fff;
    font-size: 2em;
    font-weight: 300;
    line-height: 1.2em;   
}

.catedra aside a:hover{
    background-color: #F87783;
}



    


@media screen and (max-width:960px)
{
    
    header{ width: 96%; padding: 2% 1%; }
    header p{ font-size: 1rem; }
    header .social{ display: none }
    nav{ width: 100%; text-align: left; }
    nav a{ margin-right: 5px; font-size: 1rem; }
    main{ width: 100%; }
    main section article{ width: 98%; margin: 1%; }
    main section .principal{ width: 98%; margin: 1%; height: 210px; }
    main section article .datos{ width: 70%; }
    main section .principal .datos{ width: 70%; font-size: 1rem; }
    main section .principal .mas{ width: 70px; height: 70px; }
    footer{ width: 100%; }
    footer div{ width: 31%; margin: 1%; }
    footer .footer-logo{ width: 31%; margin: 1%; }
    footer .footer-logo img{ width: 70%; }
    
    
    /* DOCENTES */

    .titulo-seccion{ margin: 0 0 10% 4%;}
    .docentes .titular{ width: 92%; margin: 0 4%; }
    .docentes .equipos{ width: 92%; margin: 10% 4%; }
    
    
    /* LA CÁTEDRA */
    
    .catedra section{ width: 92%; margin: 0 4%; }
    .catedra aside{ width: 92%; margin: 10% 4%; }
    .catedra aside a{ margin: 20px auto;}

}

@media screen and (max-width:500px)
{
    
    /* DOCENTES */
    
    .docentes .titular article{ width: 348px; height: 348px; border-radius: 174px; }
    .docentes .equipos article{ width: 174px; height: 174px; border-radius: 87px; }
    .docentes .titular article .nombre{ width: 348px; padding-top: 145px; }
    .docentes .equipos article .nombre{ width: 174px; padding-top: 75px; }
    .docentes .titular article .nombre h1{ font-size: 2.2em; }
    .docentes .equipos article .nombre h2{ font-size: 1.5em; }
        
    
    
}