* {
	margin: 0;
	padding: 0;
}

body {
	background: #FFFFFF; 
	color: #000;
    font-family: 'Jost', sans-serif;
    /*background-image: url("../imgs/sitio.jpg)"*/
}

.contenedor {
    width: 100%;
    display: grid;
    margin: 0px auto;
/*    grid-gap: 2px;*/
    height: auto;         /* 1000px; */   
    grid-template-columns: 1 fr 280px 1 fr;
    grid-template-rows: repeat(18, auto);
    
    grid-template-areas: "header      header      header      "
                         "menu1       menu1       menu1       "
                         "banner1     banner1     banner1     "
                         "grupo       grupo       grupo       "
                         "cenapetxt   cenapetxt   cenapetxt   "
                         "fila6       fila6       fila6       "
                         "noticias    noticias    noticias    "
                         "niveles     niveles     niveles     "

                         "contenido7  contenido7  contenido7  "
                         "contenido8  contenido8  contenido8  "
                         "contenido9  contenido9  contenido9  "
        
                         "instit      instit      instit      "
                         "institlogo  institlogo  institlogo  "
                         "banner2     banner2     banner2     "
                         "noticias2   noticias2   noticias2   "
                         "item        item        item        "
                         "item1       item1       item1       "
                         "item2       item2       item2       "
                         "footer-ppal footer-ppal footer-ppal ";
}

.header {
    width: 100%;
    margin: auto; 
    font-size: 16px;
    color: #ff0;
    border-radius: 4px;
    height: 45px;
    cursor: default;
    background: rgba(1,146,71,1);
    overflow: hidden; 
    line-height: 35px;
    grid-area: header;
}

.header iframe {
    width: 100%;
    border: 0;
}

.menu1 {
    background: rgba(255,255,255,0.3);
    height: 95px;
    border-radius: 4px;
    z-index: 1000;
    grid-area: menu1;    
}

.menu1 iframe {
    width: 100%;
    height: 470px;     /* permite agrandar menú ppal por si se agregan opciones */
    border: 0;
}

.banner1 {
    border-radius: 4px;
    cursor: default;
    height: 98.2%;
    background-color: rgba(1,146,71,1);
    grid-area: banner1;
}

.banner-equipo {
/*    position: relative;*/
    width: 100%;
    margin: auto;
    display: flex;
}

.texto {
    align-self: center;    /* centro en el eje horizontal*/
    margin-left: 10%;
}

.texto p {
    color: white;
    font-size: 42px;
    width: 160px;
/*    text-shadow: 0px 0px 1px #000000;*/
    border-bottom: 1px solid rgba(255,255,255,1);
}

.video {
    align-self: center;
    width: 650px;
    margin: auto;
}

.video video {
    height: 345px;
}

.cenapetxt {
    border-radius: 4px;
    cursor: default;
    grid-area: cenapetxt;
    align-self: center;
}

.ctexto {
    width: 73%;
    margin: auto;
}

.ctexto p {
    font-size: 32px;
    color: rgba(86,77,77,1);
}

.fila6 {
    border-radius: 4px;
    cursor: default;
    align-self: center;
    grid-area: fila6;
}

.contenido {
    display: flex;
    width: 73%;
    margin: auto;
/*
    width: 180px;
    margin: auto;
*/
}

.cont-img {
/*    background: gray;*/
    padding-right: 10%;
}

.cont-img img {
    padding-top: 10px;
    height: 94px;
}

.separador {
    background: green;
    padding: 1px;
}

.cont-txt {
    padding-left: 4%;
    color: rgba(77,77,101,1);
    font-size: 20px;
}

/*.cont-txt h4 {
    font-size: 20px;
}

.cont-txt p {
    font-size: 20px;
}*/

.info {
    background: rgba(186,243,133,1);
    width: 250px;
    padding: 3px;
    text-align: center;
    color: rgba(77,77,77,1);
}

.info .button {
    text-decoration: none;
    display: inline-block;
    font-size: 30px;
    margin: 4px 2px;
    text-align: center;
    cursor: pointer;
}

.button:hover {
    color: darkblue;
    border: 8px;
}

.noticias {
    background: rgba(255,255,255,1);
    height: auto;              /* 100px; */
    border-radius: 4px;
    margin-top: 50px; 
    margin-bottom: 40px;
    justify-self: center;
    font-size: 39px;
    cursor: default;
    grid-area: noticias;
}

.noticias p {
    margin-top: 23px;
    border-bottom: 6px solid rgba(1,156,71,1);
}

.noticias2 {
    background: rgba(255,255,255,1);
    height: auto;              /* 100px; */
    border-radius: 4px;
    margin-top: 50px; 
    margin-bottom: 15px;
    justify-self: center;
    font-size: 39px;
    cursor: default;
    grid-area: noticias2;
}

.noticias2 p {
    margin-top: 23px;
    border-bottom: 6px solid rgba(1,156,71,1);
}

.niveles {
    background: rgba(255,255,255,1);
    height: auto;              /* 100px; */
    border-radius: 4px;
    margin-top: 10px; 
    margin-bottom: 40px;
    justify-self: center;
    cursor: default;
    grid-area: niveles;
}

.niveles img {
    width: 380px;
}



.fila1 {
    width: 70%;
    margin: auto;
    display: flex;
    padding-bottom: 20px;
}

.img-educ img {
    width: 90px;
    padding-right: 10px;
}

.img-txt {
    text-align: left;
    padding-left: 15px;
    color: rgba(77,77,77,1);
}

.img-txt h5 {
    font-size: 22px;
}

.separador {
    padding: 1px;
    background: green;
}

.contenido7 {
    border-radius: 4px;
    cursor: default;
    text-align: center;
    font-size: 20px;
    grid-area: contenido7;
}

.contenido8 {
    border-radius: 4px;
    cursor: default;
    text-align: center;
    font-size: 20px;
    grid-area: contenido8;
}

.contenido9 {
    border-radius: 4px;
    cursor: default;
    text-align: center;
    font-size: 20px;
    grid-area: contenido9;
}




.instit {
    background: rgba(227,227,227,1);
    border-radius: 4px;
    cursor: default;
    text-align: center;
    padding-top: 10px;
    margin-bottom: -5px;
    font-size: 39px;
    grid-area: instit;
}

.instit p {
    color: rgb(96,96,96);
    margin-top: 75px;
    border-bottom: 6px solid rgba(1,156,71,1);
    margin-bottom: 70px;
}

.institlogo {
    background: rgba(227,227,227,1);
    border-radius: 4px;
    margin-top: 0px;
    padding: 10px;
    text-align: center;
    grid-area: institlogo;
}

.institlogo img {
    width: 110px;
    filter: grayscale(100%);
}

.institlogo img:hover {
    filter: grayscale(0%);
/*    height: 200px;*/
}

.contenedor-inst-tit {
    background: rgba(227,227,227,1);
    width: 460px;
    margin: auto;
}

.banner2 {
    border-radius: 4px;
    cursor: default;
    overflow: hidden;
    height: 360px;
    position: relative;
    display: flex;
    background-color: rgba(1,146,71,1);
    grid-area: banner2;
}

.banner-equipo2 {
    position: relative;
    width: 243px;
/*    background-color: rgba(1,0,71,1);*/
    margin: auto;
    margin-left: 15%;
}

.banner-equipo2 label {
    color: white;
    font-size: 42px;    
}

.banner-equipo2 p {
    color: white;
    font-size: 42px;
    width: 270px;
    border-bottom: 1px solid rgba(255,255,255,1);
}

/*.banner2 .border-center {
    position: relative;
    float: left;
    display: block;
    width: 8%;
    height: 100%;
}*/

.banner2 .caja-texto-botones {
    position: relative;
    float: left;
    display: block;
    height: 220px;
    width: 500px;
    top: 30%;
    margin-left: 4%;
    width: 37%;
    z-index: 1000;
}

.banner2 .caja-texto-botones a {
    margin-top: 33px;
}

.caja-texto-botones .button {
    background-color: #fff;
    width: 190px;
    border: none;
    color: rgba(1,146,71,1);
    padding: 12px 30px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 24px;
    margin: 4px 2px;
    cursor: pointer;
}

.button:hover {
    color: darkblue;
    border: 8px;
}

.item {
    border-radius: 4px;
    cursor: default;
    align-self: center;
    grid-area: item;
}

.ppal {
    width: 73%;
    margin: auto;
}

.espacio {
    height: 60px;
}

.bandasup {
    text-align: center;
    background: rgba(1,142,71,1);
    height: auto;           /* 45px; */
}

.bandasup p {
    font-size: 20px;
    color: white;
    padding: 8px;
}

.bandainf {
    background: rgba(239,239,239,1);
    height: 436px;
/*    height: auto;*/
    display: flex;
}

.foto img {
    width: 263px;
}

.texto1 {
    width: 60%;
    margin: auto;
}

.texto1 p {
    font-size: 22px;
    padding-bottom: 8px;
}

.texto1 p1 {
    font-size: 15px;
}

.texto2 {
    width: 90%;
    padding-left: 4%;
}

.texto2 p {
    font-size: 15px;
    color: darkgreen;
/*    padding: 10px;*/
}

.item1 {
    border-radius: 4px;
    cursor: default;
    align-self: center;
    grid-area: item1;
}

.item2 {
    border-radius: 4px;
    cursor: default;
    align-self: center;
    grid-area: item2;
}

.footer-ppal {
    border-radius: 4px;
/*    height: 360px;*/  
    grid-area: footer-ppal;
}

.footer-ppal iframe {
    border: 0;                  
    width: 100%;
    height: 365px;
}

@media (max-width:1120px) {
    .texto {
        margin-left: 5%;
    }
    .foto img {
        width: 220px;
    }

    .bandainf {
        height: auto;
    }
    
}

@media (max-width:935px) {
    .texto {
        margin-left: 2%;
    }
    
}

@media (max-width:882px) {
    
    .footer-ppal iframe {
        height: 595px;
    }
    
    .ppal {
        width: 90%;
    }
    
}

@media (max-width:826px) {
    
    .texto p {
        font-size: 35px;
        width: 135px;
    }
    
    .cont-img img {
        height: 80px;
    }
    
    .ctexto p {
        font-size: 30px;
    }
    
    .texto p {
        font-size: 30px;
        width: 115px;
    }
    
    .video video {
        height: 300px;
        padding-left: 5%;
    }
    
    .cont-img {
        padding-right: 1%;
    }
    
    .contenido {
        width: 90%;
    }
    
    .ctexto {
        width: 90%;
    }
    
    .foto img {
        width: 200px;
    }
    
    .texto1 p {
        font-size: 20px;
    }
    
    .texto1 p1 {
        font-size: 14px;
    }
    
    .texto2 p {
        font-size: 14px;
    }
    
}

@media (max-width:785px) {
    
    .banner-equipo2 label {
        font-size: 37px;    
    }

    .banner-equipo2 p {
        font-size: 37px;
        width: 240px;
    }
    
    .banner2 .caja-texto-botones {
        width: 45%;
        margin-left: -8%;
    }

    .texto {
        width: 0px;
        
/*        align-self: baseline; */
        
        z-index: 500;
    }
    
    .texto p {
        font-size: 25px;
        width: 95px;
    }
    
    .contenido {
        display: block;
    }
    
    .info {
        margin: auto;
    }
    
    .cont-txt {
        padding-top: 4%;
    }
    
    .video {
        width: 100%;
    }
     
    .banner-equipo2 {
        margin-left: 8%;
    }
    
}

@media (max-width:620px) {
    
    .video video {
        height: 240px;
        padding-left: 1%;
    }
    
    .cont-img img {
        height: 70px;
    }
    
    .ctexto p {
        font-size: 23px;
    }
    
    .texto1 {
        padding-left: 2%;
    }
    
    .bandainf {
        display: block;
    }
    
    .texto1 {
        width: 90%;
    }
    
    .foto {
        text-align: center;
    }
    
    .foto img {
        margin: auto;
        padding: 20px;
    }
    
    .banner1 {
        border-radius: 4px;
        cursor: default;
        height: 97.5%;
        text-align: center;
    }
    
    .banner2 {
        display: block;
    }
    
    .banner-equipo2 {
        margin-left: auto;
        margin-top: 5%;
    }
    
    .banner2 .caja-texto-botones {
        float: none;
        position: relative;
        width: 45%;
        height: auto;
        margin: auto;
        top: 30px;
    }
    
    .caja-texto-botones .button {
        width: 175px;
    }
    
}

@media (max-width:573px) {

    .texto {
        margin-left: 0%;
        
    }
    
    .texto p {
        font-size: 25px;
        width:95px;
    }
    
    .video video {
        height: 220px;
        padding-left: 0%;
    }

    .cont-img img {
        height: 60px;
    }
    
    .info {
        width: 210px;
    }
    
    .info .button {
        font-size: 26px;
    }
    
    .bandasup p {
        font-size: 19px;
    }
    
}

@media (max-width:567px) {

    .footer-ppal iframe {
        height: 530px;
    }

    .instit p {
        font-size: 30px;
    }

    .contenedor-inst-tit {
        width: 348px;
    }
    
    .instit {
        padding-top: 0;
    }

    .fila1 {
        width: 85%;
    }
    
    .img-educ img {
        width: 80px;
        padding-right: 0px;
    }
    
    .img-txt p {
        font-size: 17px;
    }
    
}

@media (max-width:460px) {

    .banner2 .caja-texto-botones {
        margin-left: 16%;
    }
    
}

@media (max-width:410px) {
    
    .video video {
        height: 203px;
    }
    
    .niveles img {
        width: 300px;
    }
    
    .noticias p {
        font-size: 30px;
    }
    
}

@media (max-width:380px) {
    .banner1 {
        background-color: #fff;
    }
    
    .contenedor-inst-tit {
        width: 220px;
    }
    
}



