* {
	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: 0px;
    height: auto;         /* 1000px; */   
    grid-template-columns: repeat(4, 1 fr);
    grid-template-rows: repeat(14, auto);
    
    grid-template-areas: "header      header      header      header      "
                         "menu1       menu1       menu1       menu1       "
                         "video1      video1      video1      video1      "
                         "cursos      cursos      cursos      cursos      "
                         "imagen      imagen      imagen      imagen      "
                         "texto-educ  texto-educ  texto-educ  texto-educ  "
                         "contenido   contenido   contenido   contenido   "
                         "contenido2  contenido2  contenido2  contenido2  "
                         "contenido3  contenido3  contenido3  contenido3  "
                         "contenido4  contenido4  contenido4  contenido4  "
                         "contenido5  contenido5  contenido5  contenido5  "
        
                         "imagen2     imagen2     imagen2     imagen2     "
        
                         "mas-info    mas-info    mas-info    mas-info    "
                         "titulo      titulo      titulo      titulo      "
                         "institlogo  institlogo  institlogo  institlogo  "
                         "banner      banner      banner      banner      "
                         "imagen1     imagen1     imagen1     imagen1     "
                         "texto-emp   texto-emp   texto-emp   texto-emp   "

                         
                         "contenido6  contenido6  contenido6  contenido6  "
        
                         
        
                         "mas-info2   mas-info2   mas-info2   mas-info2   "
                         "banner2     banner2     banner2     banner2     "
                         
        
                         "texto-educ4 texto-educ4 texto-educ4 texto-educ4 "
                         "contenido7  contenido7  contenido7  contenido7  "
                         "contenido8  contenido8  contenido8  contenido8  "
                         "contenido9  contenido9  contenido9  contenido9  "
                         "mas-info3   mas-info3   mas-info3   mas-info3   "
        
                         "instit2     instit2     instit2     instit2     "
                         "inst-emp1   inst-emp1   inst-emp1   inst-emp1   "        
                         "footer-ppal 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;
}

/*.cursos {
    background: rgba(255,255,255,1);
    border-radius: 4px;
    grid-area: cursos;
    text-align: center;
    margin-top: 15px;
}*/
/*.cursos p {
    color: rgba(96,96,96,1);
    border-bottom: 6px solid rgba(1,156,71,1);
}*/

.cursos {
    /* background: rgba(255,0,255,1); */
    height: auto;
    border-radius: 4px;
    margin-top: 75px; 
    margin-bottom: 23px;
    justify-self: center;
    font-size: 39px;
    cursor: default;
    grid-area: cursos;
}

.cursos p {
    width: auto;
    margin: auto;
    font-size: 42px;
    color: rgba(96,96,96,1);
    border-bottom: 5px solid mediumblue;
    text-shadow: 0px 0px 0px #000000;
}
    
.imagen {
    background: rgba(255,255,255,1);
    border-radius: 4px;
    cursor: default;
    padding: 15px;
    text-align: center;
    grid-area: imagen;
    margin-bottom: 10px;
}

.imagen img {
    width: 75%;        /* 965px; */
    padding: 0px;
}

.imagen1 {
    background: rgba(255,255,255,1);
    border-radius: 4px;
    cursor: default;
    padding: 15px;
    text-align: center;
    grid-area: imagen1;
    margin-bottom: 10px;
}

.imagen1 img {
    width: 85%;        /* 965px; */
    padding: 0px;
}

.texto-educ {
    border-radius: 4px;
    cursor: default;
    padding: 15px;
    text-align: center;
    font-size: 31px;
    grid-area: texto-educ;
    padding-bottom: 80px;
}

.texto-educ4 {
    border-radius: 4px;
    cursor: default;
    padding: 15px;
    text-align: center;
    font-size: 31px;
    grid-area: texto-educ4;
    padding-bottom: 80px;
}

.texto-emp {
    border-radius: 4px;
    cursor: default;
    padding: 15px;
    text-align: center;
    font-size: 31px;
    grid-area: texto-emp;
    padding-bottom: 80px;
}

.texto {
    margin: auto;
    width: 70%;
    text-align: left;
}

.texto p {
    color: rgba(77,77,77,1);
}

.contenido {
    border-radius: 4px;
    cursor: default;
    text-align: center;
    font-size: 20px;
    grid-area: contenido;
}

.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: blue;
}

.contenido2 {
    border-radius: 4px;
    cursor: default;
    text-align: center;
    font-size: 20px;
    grid-area: contenido2;
}

.contenido3 {
    border-radius: 4px;
    cursor: default;
    text-align: center;
    font-size: 20px;
    grid-area: contenido3;
}

.contenido4 {
    border-radius: 4px;
    cursor: default;
    text-align: center;
    font-size: 20px;
    grid-area: contenido4;
}

.contenido5 {
    border-radius: 4px;
    cursor: default;
    text-align: center;
    font-size: 20px;
    grid-area: contenido5;
}

.contenido6 {
    border-radius: 4px;
    cursor: default;
    text-align: center;
    font-size: 20px;
    grid-area: contenido6;
}

.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;
}

.mas-info {
    border-radius: 4px;
    cursor: default;
    text-align: center;
    font-size: 20px;
    margin-bottom: 60px;
    grid-area: mas-info;
}

.mas-info2 {
    border-radius: 4px;
    cursor: default;
    padding: 15px;
    margin-bottom: 30px;
    text-align: center;
    font-size: 30px;
    grid-area: mas-info2;
}

.mas-info3 {
    border-radius: 4px;
    cursor: default;
    padding: 5px;
    text-align: center;
    font-size: 30px;
    margin-bottom: 1%;
    grid-area: mas-info3;
}

.instit2 {
    background: rgba(227,227,227,1);
    border-radius: 4px;
    cursor: default;
    text-align: center;
    margin-bottom: -5px;
    font-size: 39px;
    grid-area: instit2;
}

.inst-emp1 {
    background: rgba(227,227,227,1);
    border-radius: 0px;
    cursor: default;
    text-align: center;
    grid-area: inst-emp1;
}

.inst-emp2 {
    background: rgba(227,227,227,1);
    border-radius: 0px;
    cursor: default;
    text-align: center;
    margin-left: -5px;
    grid-area: inst-emp2;
    padding-bottom: 90px;
}

.alinear-txt {
    width: 80%;
    margin: auto;
    text-align: left;
    font-size: 18px;
}

.info {
    background: skyblue;
    width: 250px;
    margin: auto;
    padding: 3px;
    color: rgba(77,77,77,1);
}

.info .button {
    text-decoration: none;
    display: inline-block;
    margin: 4px 2px;
    cursor: pointer;
}

.titulo {
    border-radius: 4px;
    cursor: default;
    text-align: center;
    grid-area: instit2;   
}

.cont-tit {
    width: 550px;
    margin: auto;
}

.cont-tit p {
    font-size: 39px;
    width: 550px;
    margin-top: 80px;
    border-bottom: 5px solid rgba(1,156,71,1);
    margin-bottom: 70px;
    color: rgba(77,77,77,1);
}

.institlogo {
    border-radius: 4px;
    margin-top: 0px;
    padding: 10px;
    text-align: center;
    align-self: center;
    grid-area: inst-emp1;
}

.cont-instit {
    width: 85%;
    margin: auto;
    margin-bottom: 60px;
}

.institlogo img {
    width: 95px;
}

.banner {
    border-radius: 4px;
    height: 98%; /* height: 600px; */
    cursor: default;
    grid-area: banner;
}

/*.banner2 {
    border-radius: 4px;
    height: 98%;  height: 600px; 
    cursor: default;
    grid-area: banner2;
}*/
.banner2 {
    background: rgba(255,255,255,1);
    height: 98%;
    border-radius: 4px;
    justify-self: center;
    cursor: default;
    grid-area: banner2;
}

/*
.grilla-img {
    background: rgba(255,255,0,1);
    border-radius: 4px;
    cursor: default;
    padding: 15px;
    text-align: center;
    grid-area: imagen2;
    margin-bottom: 50px;
}

.grilla-img img {
    width: 75%;
    padding: 0px;
}
*/

        .hist-items {
            border-radius: 4px;
            cursor: default;
            grid-area: imagen2;
            text-align: center;
        }

        .hist-items-img {
            margin: auto;
            width: 70%;
            display: flex;
            justify-content: center;
        }

        .hist-cont-items img {
            width: 100%;
            max-width: 400px;
        }

        .espacio {
            width: 3.5%;
        }

        .hist-items-img2 {
            margin: auto;
            width: 70%;
        }

        .hist-items-img2 img {
            margin-top: 2%;
            width: 100%;
            max-width: 837px;
            margin-bottom: 2%;
        }

        .hist-cont-items2 img {
            width: 100%;
            max-width: 559px;
        }

        .hist-cont-items3 img {
            width: 100%;
            max-width: 244px;
            padding-bottom: 20%;
        }






.footer-ppal {
    border-radius: 4px;
    height: 360px;
    grid-area: footer-ppal;
}

.footer-ppal iframe {
    border: 0;                  
    width: 100%;
    height: 365px;
}

.banner1 {
    border-radius: 4px;
    cursor: default;
    grid-area: video1;
    overflow: hidden;
    height: 360px;
    position: relative;
    display: flex;
}

.banner-cursos {
    position: relative;
    width: 100%;
    background-color: mediumblue;
}

/*.banner1 .border-center {
    position: relative;
    float: left;
    display: block;
    width: 13%;
    height: 100%;
}*/

.banner1 .caja-texto-curso {
    position: relative;
    margin-left: 5%;
    float: left;
    display: block;
    height: 63px;
    top: 40%;
    width: auto;
}

.banner1 .caja-texto-curso p {
    color: white;
    font-size: 42px;
    float: right;
/*    text-shadow: 0px 0px 1px #000000;*/
    border-bottom: 1px solid rgba(255,255,255,1);
}

/*
.banner1 .caja-texto-botones {
    position: relative;
    float: left;
    display: block;
    height: 220px;
    width: 500px;
    top: 6%;
    margin-left: 3%;
    width: 37%;
    z-index: 1000;
}

.banner1 .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;
}

.caja-texto-curso .button {
    color: white;
    font-size: 44px;
    text-shadow: 0px 0px 0px #000000;
}
*/

.banner p {
    width: 175px;
    margin: auto;
    font-size: 42px;
    color: rgba(96,96,96,1);
    border-bottom: 5px solid rgba(1,146,71,1);
    text-shadow: 0px 0px 0px #000000;
}

.banner2 p {
    font-size: 42px;
    margin-bottom: 10px;
    color: rgba(96,96,96,1);
    border-bottom: 6px solid rgba(1,156,71,1);
}

.novedadtit img {
    width: 413px;
    padding: 12px;
}

.novedadtit .espacio {
    height: 100px;
}










@media (max-width:895px) {
    
    .texto-educ p {
        font-size: 27px;
    }
    
    .texto-emp p {
        font-size: 27px;
    }
    
    .banner-cursos .caja-texto-curso p {
        font-size: 35px;
    }
    
    .caja-texto-botones .button {
        font-size: 25px;
    }
    
    .banner1 {
        height: 300px;
    }
    
    .banner1 .caja-texto-curso {
        top: 45%;
    }
    
    .banner1 .caja-texto-botones {
        top: -3%;
    }
    
}

@media (max-width:730px) {

    .banner-cursos .caja-texto-curso p {
        font-size: 26px;
    }
        
    .banner1 .caja-texto-botones a {
        margin-top: 25px;
    }
    
    .caja-texto-botones .button {
        font-size: 20px;
    }
    
    .caja-texto-botones .button {
        width: 150px;
    }
    
    .banner1 {
        height: 270px;
    }
    
    .banner1 .caja-texto-curso {
        top: 45%;   /* titulo ´convenios´ */
    }
    
    .banner1 .caja-texto-botones {
        top: 1%;
    }
    
}

@media (max-width:640px) {
    
    .cursos p {
        font-size: 33px;
        
    }
}

@media (max-width:580px) {

    .banner-cursos .caja-texto-curso p {
        font-size: 22px;      /* titulo ´convenios´ */
    }
    
    .caja-texto-botones .button {
        font-size: 17px;
    }
    
    .banner p {
        font-size: 35px;
        width: 147px;
    }
    
    .cursos p {
        font-size: 27px;
/*        width: 155px;*/
        
    }
    
    .cont-tit {
        width: 450px;
    }
    
    .cont-tit p {
        font-size: 32px;
        width: 450px;
    }
    
    .instit2 {
        padding-bottom: 45px;
    }
    
}

@media (max-width:420px) {
    
    .cursos p {
        font-size: 23px;
    }
}

@media (max-width:882px) {
    
    .footer-ppal iframe {
        height: 600px;
    }
    
    .novedades {
        height: 280px;
    }
    
    .imagen {
        font-size: 34px;
    }
    
    .novedadtit p {
        font-size: 34px;
    }
    
    .contactit p {
        font-size: 34px;
    }
    
}

@media (max-width:567px) {    /* título "instit. que nos acomp." */
    
    .contenedor-inst-tit {
        width: 350px;
    }

    .instit p {
        width: 350px;
    }
    
    .video1 {
        height: 345px;
    }
    
    .cont-instit {
        width: 95%;
    }

}


@media (max-width:640px) {

    .contenedor {
    grid-template-areas: "header      header      header      header      "
                         "menu1       menu1       menu1       menu1       "
                         "video1      video1      video1      video1      "
                         "cursos      cursos      cursos      cursos      "
                         "imagen      imagen      imagen      imagen      "
                         "texto-educ  texto-educ  texto-educ  texto-educ  "
                         "contenido   contenido   contenido   contenido   "
                         "contenido2  contenido2  contenido2  contenido2  "
                         "contenido3  contenido3  contenido3  contenido3  "
                         "mas-info    mas-info    mas-info    mas-info    "
                         "titulo      titulo      titulo      titulo      "
                         "institlogo  institlogo  institlogo  institlogo  "
                         "banner      banner      banner      banner      "
                         "imagen1     imagen1     imagen1     imagen1     "
                         "texto-emp   texto-emp   texto-emp   texto-emp   "
                         "contenido4  contenido4  contenido4  contenido4  "
                         "contenido5  contenido5  contenido5  contenido5  "
                         "contenido6  contenido6  contenido6  contenido6  "
                         "mas-info2   mas-info2   mas-info2   mas-info2   "
        
                         "banner      banner      banner      banner      "
                         "imagen1     imagen1     imagen1     imagen1     "
        
                         "instit2     instit2     instit2     instit2     "
                         "inst-emp1   inst-emp1   inst-emp1   inst-emp1   "
                         "inst-emp2   inst-emp2   inst-emp2   inst-emp2   "
                         "footer-ppal footer-ppal footer-ppal footer-ppal ";
    }
    
    .inst-emp1 {
        padding-bottom: 5px;
    }
    
    .inst-emp2 {
        padding-top: 5px;
    }
    
    .alinear-txt {
        width: 95%;
    }
    
    .inst-emp2 {
        margin-left: 0px;
    }
    
}

@media (max-width:567px) {
    
/*    .cont-tit p {
        font-size: 30px;
        width: 270px;
    }*/
    
    .banner1 .caja-texto-curso {
        height: 60px;
    }
    
    /*.banner1 .border-center {
        width: 8%;
    }*/
    
    .imagen img {
        width: 90%;
    }
    
    .texto {
        width: 90%;
    }
    
    .texto-educ p {
        font-size: 23px;
    }
    
    .fila1 {
        width: 85%;
    }
    
    .img-educ img {
        width: 80px;
        padding-right: 0px;
    }
    
    .img-txt p {
        font-size: 17px;
    }
    
    .footer-ppal iframe {
        height: 530px;
    }
    
}


@media (max-width:550px) {         /* p.móviles */
    
    .header {
        font-size: 13px;
    }
    
    .item img{
        height: 34px;
    }
    
    .instit p {
        font-size: 34px;
    }
    
    .dir-icub {
        margin: auto;       
    }
    
    .mapa p {
        font-size: 20px;
        color: gray;
    }
    
    .footer-ppal iframe {
        height: 535px;
    }
    
    .contenedor-inst-tit {
        width: 244px;
    }

    .instit p {
        width: 244px;
    }
}



@media (max-width:490px) {

    /*.banner1 .border-center {
        width: 5%;
    }*/
    
    /*.banner-cursos .caja-texto-curso {
        width: 39%;
    }*/

    .caja-texto-botones .button {
        width: 120px;
        margin: auto;
    }
    
    .cont-tit {
        width: 260px;
    }
    
    .cont-tit p {
        font-size: 29px;
        width: 260px;
    }
    
    .texto-emp p {
        font-size: 24px;
    }
    
    .texto-educ4 p {
        font-size: 24px;
    }
    
    .banner1 .caja-texto-botones {
        top: 5%;
    }    
    
    .cursos {
        margin-top: 40px;
        margin-bottom: 15px;
    }
    
}