/* media queries/flexibilidad */

@media screen and (max-width: 768px) {
    header {
        margin-top: 30px;
    }
    .capa {
        display: flex;
    }

    .intro {
        min-width: 80%;
        font-family: sans-serif;
        font-size: 16px; 
    }

    h1 {
        text-align: center;
        font-size: 23px;
    }

    .sections {
        max-width: 100% !important;
        display: flex;
        flex-flow: row nowrap;
        padding: 0 !important;
        gap: 0 !important;
        justify-content: center;
    }

    aside {
        display: none;
    }

    .marca {
        max-width: 20%;
        height: 50px;
        padding: 10px;
        margin-left: 0;
    }

    .logo {
        max-width: 50px;
        height: 20px;

    }

    .institu {
        display: none;
    }

    .pags {
        flex: 1 1 auto;
        gap: 0;
        padding: 0 !important;
    }

    .pags2 {
        display: flex;
        flex-flow: column;
        overflow: hidden;
        height: 35px;
        transition-property: margin-top, height;
        transition-duration: 1s;
        padding: 0 !important;
        border: 3px solid transparent;
        margin-top: 20px;
    }

    .pags2:hover {
        height: auto;
        margin-top: 60%;
        margin-right: 30px;
        background-color: #828282;
        border-radius: 10px;
        border: 3px solid #fff8;
        padding: 20px 10px !important;
    }

    .pag {
        padding: 5px;
    }

    .pag1 {
        margin-right: 50px;
    } 

    .inicio {
        width: 100vw;
        display: flex;
        flex-direction: column !important;
        gap: 0;
        margin: 20px 0;
        padding: 0 !important;
    }

    .introduccion, .esc {
        min-width: 80vw;
        margin: 10px;
    }

    .resumen {
        max-width: 80vw;
        display: flex;
        flex-direction: column !important;
        gap: 0;
        padding: 0 !important;
        align-items: center;
    }

    .academic, .personal, .instal {
        min-width: 70%;
        padding: 0;
        margin: 0;
    }
    
    .cuerpo {
        margin: 10px 0 !important;
    }

    .contenedor-historia, .contenedor-misiones, .contenedor-desa, .contenedor-instalaciones {
        display: flex;
        flex-direction: column;
        max-width: 100%;
    }

    .contenedor-desa {
        padding: 0;
        max-width: 90% !important;
    }

    .historia, .valores, .logros, .instalaciones {
        min-width: 95%;
    }

    .his-foto, .miss, .int {
        order: 2;
        margin: auto;
    }

    .parti {
        max-width: 100% !important;
        display: flex;
        flex-flow: row wrap;
        margin: auto;
    }

    footer {
        padding: 0 !important;
        max-width: 100vw;
    }

    .infor:first-child {
        display: none;
    }

    .infor:nth-child(3n) {
        display: none;
    }

    .infor {
        width: 200px;
    }

    .fin {
        gap: 0;
    }
}

/* Control principal */

body {
    margin: 0;
    display: flex;
    flex-flow: column wrap;
    background-color: black;
}

a:link {
    color: white;
    text-decoration: none;
    transition-property: color;
    transition-duration: 1s;
}


a:visited {
    color: white;
}

a:hover {
    color: #bbb;
}

h2 {
    width: 80%;
    text-align: center;
    color: white;
    background-color: #c965;
    border-radius: 10px;
    margin: 0;
}

h1 {
    margin: 0;
}

hr {
    width: 75vw;
}

/* imagenes */

.logo {
    width: 50px;
    height: 50px;
}


.esc {
    width: 300px;
    height: 180px;
    border-radius: 12px;
    border: 3px solid white;
}

.miss {
    width: 200px;
    border-radius: 12px;
    box-shadow: 10px 10px 20px black;
}

.int {
    width: 200px;
    border-radius: 12px;
    box-shadow: 10px 10px 20px black;
    margin-top: 20px;
}

.logo-esc, .logo-per, .logo-acad {
    width: 50px;
    border-radius: 10px;
    background-color: white;
    padding: 10px;
}

.his-foto {
    width: 250px;
    height: auto;
    border-radius: 12px;
    border-top: 5px solid blue;
    box-shadow: 10px 10px 20px black;
}

.img-insta {
    width: 30%;
    height: 400px;
    background-color: red;
    display: flex;
    flex-flow: column;
    justify-content: space-around;
    align-items: center;
}

.red {
    max-width: 80px;
    height: 50px;
    border-radius: 50%;
    border: 3px solid white;
}

.red1 {
    max-width: 48px;
    height: 50px;
    border-radius: 50%;
    padding: 0 5px 0 0;
    border: 3px solid white;
    background-color: black
}

/* hover */

.instal:hover {
    background-color: #f2e8e1;
    outline: 3px solid #7a695d;
    color: #874421;
    border: 3px solid #874421;
}

.personal:hover {
    background-color: #f2e8e1;
    outline: 3px solid #7a695d;
    color: #874421;
    border: 3px solid #874421;
}

.academic:hover {
    background-color: #f2e8e1;
    outline: 3px solid #7a695d;
    color: #874421;
    border: 3px solid #874421;
}
.pagsec:hover {
    background-color: #eee;
    color: black;
    outline: 2px solid white;
    outline-offset: 0;
    border-color: white;
}

.pagAct:hover {
    background-color: #eee;
    color: black;
    outline: 2px solid white;
    outline-offset: 0;
    border-color: white;
}

.pagPer:hover {
    background-color: #eee;
    color: black;
    outline: 2px solid white;
    outline-offset: 0;
    border-color: white;
}

.pagTec:hover {
    background-color: #eee;
    color: black;
    outline: 2px solid white;
    outline-offset: 0;
    border-color: white;
}

.pagHor:hover {
    background-color: #eee;
    color: black;
    outline: 2px solid white;
    outline-offset: 0;
    border-color: white;
}

.pag1:hover {
    background-color: black;
    color: white;
    outline: 3px solid white;
    outline-offset: 0; 
    border: 3px solid white;
} 

aside:hover {
    max-width: 100px;
    overflow: hidden;
    height: auto;
    padding: 20px;
    display: flex;
    justify-content: space-around;
    gap: 10px;
    align-items: center;
    flex-flow: column;
    border-radius: 12px;
    z-index: 30;
    margin: 22% 0 0 0;
}

.link:hover {
    background-color: white;
    color: black;
    border: 3px solid #dfe5f5;
}

/* control border */

aside, main, .introduccion {
    border: 4px solid transparent;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-image: 
    linear-gradient(to bottom, white, white),
    linear-gradient(to right, brown, #e5d9b6, black);
}

/* control fondo/segundos estilos */

aside:first-child {
    position: sticky;
    top: 100px;
}

.contenedor-historia {
    background-image: url(http://imgfz.com/i/WmyUpOn.jpeg);
    background-size: 100% 100%;
}

.contenedor-misiones {
    background-image: url(http://imgfz.com/i/jfNMGTH.jpeg);
    background-size: 100% 100%;
    margin:  0 0 20px 0;
}

.contenedor-desa {
    background-image: url(http://imgfz.com/i/w1daheB.jpeg);
    background-size: 100% 100%;
}

.contenedor-instalaciones {
    background-image: url(http://imgfz.com/i/UGo35MK.jpg);
    background-size: 100% 100%;
    gap: 10px;
}

.presentacion {
    max-width: 100vw;
    height: 100vh;
    background-image: url(http://imgfz.com/i/pNdeITR.jpg);
    background-size: 100% 100%;
    margin-top: -17vh;
    background-repeat: no-repeat;
}

/* header */

header {
    display: flex;
    flex-flow: column wrap;
}

.capa {
    background-color: black;
    opacity: 0.6;
    max-width: 100vw;
    height: 100vh;
    padding: 50px 0 0 0;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    box-shadow: 0 20px 20px black;
}

.intro {
    max-width: 61vw;
    text-align: center;
}

.frase {
    text-align: center;
    font-size: 23px;
    color: silver;
    text-shadow: 0 5px 10px white;
}

/* body */

/* barra inferior */

.sections {
    order: -2;
    z-index: 8;
    max-width: 100vw;
    border-bottom: 1px solid white;
    background-color: #111a;
    display: flex;
    padding: 5px;
    justify-content: space-around;
    align-items: center;
    flex-flow: row nowrap;
    position: sticky;
    top: 0;
    height: 80px;
}

.marca {
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    color: white;
    font-size: 16px;
    border: 3px solid #fff5;
    border-radius: 12px;
    gap: 10px;
}

.pags {
    display: inline-flex;
    background-color: transparent;
    justify-content: space-around;
    align-items: center;
    max-width: 70vw;
    gap: 10px;
    padding: 0 10px;
    border-radius: 12px;
}

.pags2 {
    display: inline-flex;
    background-color: transparent;
    justify-content: space-around;
    align-items: center;
    max-width: 70vw;
    gap: 10px;
    padding: 0 10px;
    border-radius: 12px;
}

.pagsec, .pagAct, .pagPer, .pagTec, .pagHor {
    background-color: #fff2;
    color: white;
    text-align: center;
    padding: 5px 15px;
    width: auto;
    border-radius: 8px;
    border: 3px solid #fff1;
    outline: 4px solid transparent;
    outline-offset: 18px;
    transition-property: background-color, color, outline, outline-offset, border-color;
    transition-duration: 1.5s;
}

.pag1 {
    width: auto;
    background-color: white;
    text-align: center;
    padding: 8px 15px;
    margin-left: 50px;
    border-radius: 12px;
    color: black;
    font-size: 15px;
    outline: 3px solid transparent;
    outline-offset: 18px;
    transition-property: background-color, color, outline, outline-offset, border;
    transition-duration: 1.5s;
    border: 3px solid gray;
}

aside {
    padding: 5px;
    max-width: 30px;
    overflow:hidden;
    height: 30px;
    align-items: center;
    border-radius: 12px;
    transition-property: max-width, height, padding, display, justify-content, gap, align-items, flex-flow, border-radius, overflow, z-index, margin;
    transition-duration: 2s;
    order: -1;
    z-index: 20;
    margin: 0 -3% 0 0;
    justify-content: center;
    flex-flow: row;
}

.desplegar {
    width: 30px;
    height: 30px;
    border-radius:  50%;
    font-size: 18px;
    padding: 0;
    align-items: center;
    border: none;
    margin-bottom: 10px;
   background-color: transparent;
}

.indice {
    color: black;
    background-color: transparent
}

.link {
    background-color:  #ccff;
    padding: 10px;
    border: 3px solid  white;
    border-radius: 12px;
    transition-property: background-color, color, border;
    transition-duration: 1s;
}

/* body */

.inicio {
    background-color: #111f;
    z-index: 5;
    max-width: 100vw;
    align-items: center;
    display: flex;
    flex-flow: row nowrap;
    padding: 10px;
    justify-content: space-around;
}

.introduccion {
    background-color: white;
    z-index: 5;
    padding: 10px;
    max-width: 60%;
    text-align: center;
    border-radius: 12px;
    font-family: sans-serif;
    font-size: 17px;
}

.resumen {
    max-width: 90vw;
    background-color: transparent;
    margin: auto;
    display: flex;
    flex-flow: row nowrap;
    padding: 20px;
    gap: 10px;
    justify-content: space-around;
}

.instal, .personal, .academic {
    text-align: center;
    max-width: 30%;
    background-color: #cd966c;
    color: white;
    align-items: center;
    padding: 40px;
    display: flex;
    flex-flow: column;
    gap: 10px;
    outline: 3px solid #874421;
    outline-offset: -20px;
    border-radius: 10px;
    transition-property: background-color, color, outline, border;
    transition-duration: 2s;
    border: 3px solid #874421;
}

.cuerpo {
    max-width: 100vw;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    align-items:  center;
    margin: 0 2vw;
}

main {
    max-width: 75vw;
    background-color: white;
    padding: 20px;
    display: flex;
    flex-flow: column;
    align-items: center;
    border-radius: 12px;
    justify-content: space-around;
}

.contenedor-historia, .contenedor-misiones, .contenedor-desa, .contenedor-instalaciones {
    max-width: 100vw;
    display: flex;
    justify-content: space-around;
    flex-flow: row wrap;
    padding: 20px;
    border-radius: 12px;
    align-items: center;
}

.historia, .valores, .logros, .instalaciones {
    max-width: 60%;
    background-color: white;
    text-align: justify;
    padding: 10px;
    border-radius: 12px;
    font-family: sans-serif;
}

.logros {
    max-width: 70%;
}

li {
    background-color: white;
    font-family: sans-serif;
    display: inline;
    padding: 10px;
    border-radius: 10px;
}

.instalaciones {
    display: flex;
    flex-flow: column;
    align-items: center;
    gap: 20px;
}

iframe {
    border-radius: 12px;
    width: 200px;
    border: 3px solid #cd966c;
    outline: 3px solid #cd966c;
    outline-offset: 10px;
}

.parti {
    width: auto;
    margin: auto;
    display: flex;
    gap: 20px;
}

/* footer */

footer {
    flex: 1 1 auto;
    background-color: #2227;
    justify-content: center;
    color: white;
    padding: 20px;
    margin-top: 30px;
}

.fin {
    max-width: 90%;
    display: flex;
    flex-flow: row nowrap;
    gap: 20px;
    background-color: transparent;
    padding: 10px;
    align-items: center;
    justify-content: center;
    margin: auto;
}

.infor {
    display: flex;
    flex-flow: column nowrap;
    color: white;
    max-width: 250px;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    padding: 20px;
    gap: 10px;
}

hr {
    width: 80%;
    margin: auto;
}

.redes {
    width: 40vw;
    background-color: transparent;
    gap: 40px;
    margin: auto;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* flex-tablet */

@media screen and (min-width: 768px) and (max-width: 990px) {
    header {
        max-width: 100%;
        margin-top: -10px;
    }
    .capa {
        display: flex;
    }

    .intro {
        min-width: 80%;
        font-family: sans-serif;
        font-size: 16px; 
    }

    h1 {
        text-align: center;
        font-size: 30px;
    }

    .sections {
        width: 100vw !important;
        display: flex;
        flex-flow: row nowrap;
        padding: 0 !important;
        justify-content: center;
        gap: 20px;
        height: 60px;
    }

    .marca {
        height: 30px;
        padding: 10px;
        margin-left: 10px;
    }

    .pags {
        display: flex;
        max-width: 50%;
        flex: 1 1 auto;
        gap: 0 !important;
        margin: 0;
        align-items: center;
    }

    .pags2 {
        max-width: 100px;
        display: flex;
        flex-flow: column;
        overflow: hidden;
        height: 35px;
        transition-property: margin-top, height;
        transition-duration: 1s;
        padding: 0 !important;
        border: 3px solid transparent;
        margin-top: 20px;
    }

    .pags2:hover {
        height: auto;
        margin-top: 75%;
        margin-right: 30px;
        background-color: #828282;
        border-radius: 10px;
        border: 3px solid #fff8;
        padding: 20px 10px !important;
    }

    .pag {
        padding: 5px;
    }

    .pag1 {
        margin-right: 50px;
    }
    
    aside {
        transition: margin-top 2s;
    }

    aside:hover {
        margin-top: 50%;
    }

    .inicio {
        width: 100vw;
        display: flex;
        flex-direction: column !important;
        gap: 0;
        margin: 30px 0;
        padding: 0 !important;
    }

    .introduccion, .esc {
        min-width: 80vw;
        margin: 10px;
    }

    .resumen {
        max-width: 80%;
        display: flex;
        flex-direction: column !important;
        gap: 20px;
        padding: 0 !important;
        align-items: center;
    }

    .academic, .personal, .instal {
        min-width: 70%;
        padding: 30px;
        margin: 0;
    }
    
    .cuerpo {
        max-width: 100vw;
        margin: 10px 0 !important;
    }

    .contenedor-historia, .contenedor-misiones, .contenedor-instalaciones {
        display: flex;
        flex-direction: column;
        max-width: 100%;
    }

    .contenedor-desa {
        display: flex;
        flex-direction: column;
        max-width: 100%;
        padding: 20px 10px 10px 10px !important;
    }

    .contenedor-desa {
        padding: 0;
        max-width: 90% !important;
    }

    .historia, .valores, .instalaciones {
        min-width: 95%;
    }

    .logros {
        margin-top: -10px !important;
        max-width: 85%;
    }

    .his-foto, .miss, .int {
        order: 2;
        margin: auto;
    }

    .parto {
        font-size: 13px;
        text-align: center; 
        padding: 10px; 
    }

    .int {
        margin: 20px;
        width: 200px
    }

    .parti {
        max-width: 100% !important;
        display: flex;
        flex-flow: row nowrap;
        margin: auto;
        padding: 0;
    }

    footer {
        padding: 0 !important;
        max-width: 100% !important;
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        align-items: center;
    }

    .infor:first-child {
        display: none;
    }

    .infor:nth-child(3n) {
        display: none;
    }

    .infor {
        width: 200px;
        padding: 20px 10px;
        text-align: center;
    }

    .fin {
        gap: 0;
        padding: 0 !important;
    }

    hr {
        margin: 0;
    }

    .redes {
        margin: 0;
    }
}