* {
	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 1 fr 1 fr;
    grid-template-rows: repeat(15, auto);
    
    grid-template-areas: "header      header      header      "
                         "menu1       menu1       menu1       "
                         "banner1     banner1     banner1     "
                         "grupo       grupo       grupo       "
                         "imagen      imagen      imagen      "
                         "direccion   direccion   direccion   "
                         "director    director    director    "
                         "coord       coord       coord       "
                         "coord1      coord1      coord1      "
                         "docentestit docentestit docentestit "
                         "docentesc1  docentesc1  docentesc1  "

                         "personal    personal    personal    "
                         "foto-func   foto-func   foto-func   "
                         "func-col1   func-col2   func-col3   "
                         "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;
    overflow: hidden;
    height: 360px;
    position: relative;
    display: flex;
    background-color: rgba(1,146,71,1);
    grid-area: banner1;
}

.banner-equipo {
    position: relative;
    width: 100%;
    background-color: rgba(1,146,71,1);
    margin: auto;
    margin-left: 15%;
}

.banner-equipo p {
    color: white;
    font-size: 42px;
    width: 150px;
/*    text-shadow: 0px 0px 1px #000000;*/
    border-bottom: 1px solid rgba(255,255,255,1);
}

.banner-inst {
    position: relative;
    width: 100%;
    background-color: rgba(1,146,71,1);
    margin: auto;
    margin-left: 15%;
}

.banner-inst p {
    color: white;
    font-size: 42px;
    width: 230px;
/*    text-shadow: 0px 0px 1px #000000;*/
    border-bottom: 1px solid rgba(255,255,255,1);
}

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

.grupo p {
    color: rgba(96,96,96,1);
    border-bottom: 6px solid rgba(1,156,71,1);
}

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

.imagen img {
    width: 94%;        /* 965px; */
    margin-bottom: 45px;
}

.texto {
/*    background: rgba(255,255,255,1);*/
    cursor: default;
/*    text-align: center;*/
    grid-area: direccion;
    margin-bottom: 70px;
/*    margin-bottom: 60px;*/
}

.texto h3 {
    color: rgb(77,77,77);
}

.cont-texto {
    margin: auto;
/*    background: rgb(220,220,220);*/
    width: 80%;
    color: rgb(77,77,77);
    font-size: 20px;
}

.cont-texto li {
    margin-left: 23px;
    
}

.mas-datos {
    border-radius: 4px;
    cursor: default;
    display: flex;
    grid-area: coord;
}

.direccion {
    background: rgba(255,255,255,1);
    height: auto;              /* 100px; */
    border-radius: 4px;
    margin-top: 15px; 
    margin-bottom: 55px;
    justify-self: center;
    font-size: 39px;
    cursor: default;
    grid-area: director;
}

.direccion p {
    color: rgb(96,96,96);
    border-bottom: 6px solid rgba(1,146,71,1);
}

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

.persona {
    padding-top: 130px;
}

.coord {
    border-radius: 4px;
    cursor: default;
/*    overflow: hidden;*/
/*    height: auto;*/
    position: relative;
    display: flex;
    grid-area: coord;
}

.coord p {
/*    width: 695px;*/
    margin: auto;
    margin-top: 70px;
    margin-bottom: 40px;
    font-size: 42px;
    color: rgba(96,96,96,1);
    border-bottom: 5px solid rgba(1,146,71,1);
    text-shadow: 0px 0px 1px #000000;
}

.coord1 {
    border-radius: 4px;
    cursor: default;
    position: relative;
    text-align: center;
/*    width: 828px;*/
    margin: auto;
    display: flex;
    grid-area: coord1;
}

.docentesc1 {
    border-radius: 4px;
    cursor: default;
    position: relative;
    text-align: center;
    margin: auto;
    grid-area: docentesc1;
}

.contenedordetalles {
    display: flex;
    width: 828px;
    background: #fff;
    text-align: center;
    margin: auto;
    position: relative;
}

.detalles {
    width: 275px;
    text-align: left;
}

.persona {
/*    margin-left: 15%;*/
    margin: auto;
    width: 70%;
    display: flex;
    width: 828px;
}

.persona .detalles {
    width: 60%;
}

.persona .detalles h4 {
    font-size: 21px;
    color: rgba(1,142,80,1);
}

.persona .detalles p {
    font-size: 21px;
    color: rgba(1,142,80,1);
}

.persona .detalles p1 {
    font-size: 21px;
    color: rgba(77,77,77,1);
}

.persona .detalles p2 {
    font-size: 21px;
    color: rgba(176,176,184,1);
}

.foto img {
    width: 260px;
    padding: 6px;
}

.detalles {
    padding: 8px;
}

.detalles h4 {
    /*    margin-left: 15px*/
    font-size: 20px;
    color: rgba(1,142,80,1);
}

.detalles p {
    font-size: 17px;
    color: rgba(1,142,80,1);
}

.detalles p1 {
    font-size: 17px;
    color: rgba(77,77,77,1);
}

.detalles p2 {
    font-size: 17px;
    color: rgba(176,176,184,1);
}

.detalles img {
    width: 260px;
}

/*.docentestit {
    background: rgba(255,255,255,1);
    border-radius: 4px;
    text-align: center;
    margin-top: 65px;
    margin-bottom: 50px;
    grid-area: docentestit;
}

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


.docentestit {
    background: rgba(255,255,255,1);
    height: auto;              /* 100px; */
    border-radius: 4px;
    margin-top: 65px; 
    margin-bottom: 45px;
    justify-self: center;
    font-size: 40px;
    cursor: default;
    grid-area: docentestit;
}

.docentestit p {
    color: rgba(96,96,96,1);
    border-bottom: 6px solid rgba(1,156,71,1);
}

.personal {
    background: rgba(255,255,255,1);
    height: auto;              /* 100px; */
    border-radius: 4px;
    margin-top: 35px;
    margin-bottom: 30px;
    justify-self: center;
    font-size: 40px;
    cursor: default;
    grid-area: personal;
}

.personal p {
    color: rgba(96,96,96,1);
    border-bottom: 6px solid rgba(1,156,71,1);
}

.foto-func {
    background: rgba(255,255,255,1);
    border-radius: 4px;
    grid-area: foto-func;
    text-align: center;
    margin-top: 10px;
}

.func-col1 {
    width: 100%;
    border-radius: 4px;
    grid-area: func-col1;
}

.func-col2 {
    width: 100%;
    padding-left: 13%;
    border-radius: 4px;
    grid-area: func-col2;
}

.func-col2 .content {
    float: left;
}

.func-col3 {
    width: 100%;
    height: 210px;
    border-radius: 4px;
    grid-area: func-col3;
}

.func-col3 .content {
    float: left;
}

.content {
    display: flex;
    width: 180px;
    margin: auto;
}

.separador {
    background: green;
    padding: 1px;
}

.contenido {
    padding-left: 5px;
}

.contenido h4 {
    font-size: 20px;
    color: green;
}

.contenido p {
    font-size: 17px;
    color: green;
}

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

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

/*******************************************/
/*                BIBLIOTECA               */
/*******************************************/

.banner-biblio {
    position: relative;
    width: 100%;
    background-color: rgba(1,146,71,1);
    margin: auto;
    margin-left: 15%;
}

.banner-biblio p {
    color: white;
    font-size: 42px;
    width: 223px;
    border-bottom: 1px solid rgba(255,255,255,1);
}

.imagen-biblio {
    background: rgba(255,255,255,1);
    height: auto;              /* 100px; */
    border-radius: 4px;
    margin-top: 8%; 
    margin-bottom: 2%;
    justify-self: center;
    text-align: center;
    font-size: 39px;
    cursor: default;
    grid-area: grupo;
}

.imagen-biblio img {
    width: 90%;
}

.item-biblio {
    background: rgba(255,255,255,1);
    height: auto;              /* 100px; */
    border-radius: 4px;
    margin-top: 3%; 
    margin-bottom: 2%;
    justify-self: center;
    font-size: 39px;
    cursor: default;
    grid-area: direccion;    
}

.item-biblio p {
    color: rgb(96,96,96);
    border-bottom: 6px solid rgba(1,146,71,1);
}

.texto-biblio {
/*    background: rgba(255,255,255,1);*/
    cursor: default;
/*    text-align: center;*/
    grid-area: director;
    margin-bottom: 70px;
/*    margin-bottom: 60px;*/
}

/*******************************************/
/*              INFO GENERAL               */
/*******************************************/

.banner-info {
    position: relative;
    width: 100%;
    background-color: rgba(1,146,71,1);
    margin: auto;
    margin-left: 15%;
}

.banner-info p {
    color: white;
    font-size: 42px;
    width: 480px;
/*    text-shadow: 0px 0px 1px #000000;*/
    border-bottom: 1px solid rgba(255,255,255,1);
}

/*******************************************/
/*            ACC ESTUDIANTES              */
/*******************************************/

.contenedor-estudiante {
/*    background: rgba(255,255,0,1);*/
    border-radius: 4px;
    cursor: default;
    padding: 15px;
    height: auto;
    text-align: center;
    grid-area: imagen;
}

.acceso {
    display: flex;
    background: rgba(223,223,223,0.5);
    width: 450px;
    height: auto;
    margin: auto;
    margin-top: 4px;
    padding: 12px 20px;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-sizing: border-box; 
}

.form-control {
  width: 330px;
  background-color: rgb(255,255,200);
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.btn-group button {
    width: 100%;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.btn-success {
    background-color: #4CAF50;
}

.btn-success:hover {
    background-color: #38a040;
}

.btn-warning {
    background-color: rgb(254,163,61);
}

.btn-warning:hover {
    background-color: rgb(254,145,24);
}

.acceso form {
    padding: 20px;
    font-size: 21px;
}

.banner-est {
    position: relative;
    width: 100%;
    background-color: rgba(1,146,71,1);
    margin: auto;
    margin-left: 15%;
}

.banner-est p {
    color: white;
    font-size: 42px;
    width: 255px;
/*    text-shadow: 0px 0px 1px #000000;*/
    border-bottom: 1px solid rgba(255,255,255,1);
}

.banner-pro {
    position: relative;
    width: 100%;
    background-color: rgba(1,146,71,1);
    margin: auto;
    margin-left: 15%;
}

.banner-pro p {
    color: white;
    font-size: 42px;
    width: 150px;
/*    text-shadow: 0px 0px 1px #000000;*/
    border-bottom: 1px solid rgba(255,255,255,1);
}

/*******************************************/
/*                 NOVEDADES               */
/*******************************************/

.contenedor-novedades {
    background: rgba(255,255,255,1);
    border-radius: 4px;
    cursor: default;
    padding: 10px;
    text-align: center;
    grid-area: imagen;
/*    margin-bottom: 60px;*/
}

.novedades {
    display: flex;
/*    background: rgb(240,240,223);*/
    width: 75%;
    margin: auto;
}

.novedad-txt {
    text-align: left;
}

.novedad-txt p {
    font-size: 35px;
    padding: 10px;
    margin-left: 10px;
    color: green;
}

.subtit-txt {
    text-align: left;
}

.subtit-txt p {
    font-size: 30px;
    padding: 10px;
    margin-left: 10px;
    color: gray;
}

.subtitulo p {
    padding-left: 15px;
    color: rgb(50,50,50);
}

.contenido p {
    font-size: 18px;
    padding-left: 12px;
    color: rgb(150,150,150);
}

.novedad-img img {
    width: 325px;
/*    height: 325px;*/
}

.link p {
    font-size: 18px;
    padding-left: 20px;
    color: black;
}

.texto-curso p {
    font-size: 17px;
    padding-left: 20px;
    color: black;
}

.masinfo {
    padding-left: 30px;
}

.texto-icubpro {
    width: 75%;
    margin: auto;
    display: flex;
}

.titulo-icubpro1 p {
    font-size: 24px;
    color: blue;
}

.imagenN {
    width: 43%;
    text-align: left;
}

.textoN p {
    color: black;
    font-size: 18px;
}

.imagenN img {
    width: 325px;
}

.botones {
    margin: auto;
    display: flex;
    width: 70%;
}

/****************FIN OTR MODUL**************/


@media (max-width:1050px) {
    
    .foto img {
        width: 210px;
    }
    
    .detalles img {
        width: 200px;
    }

    .detalles h4 {
        font-size: 16px;
    }

    .detalles p {
        font-size: 16px;
    }

    .detalles p1 {
        font-size: 14px;
    }

    .detalles p2 {
        font-size: 18px;
    }
    
    .banner1 {
        height: 345px;
    }

    .detalles {
        width: 260px;
    }
    
    .botones {
        display: block;
    }
    
}

@media (max-width:846px) {

    .instagram iframe {
        width: 600px;
        height: 412px;
    }
    
}

@media (max-width:646px) {

    .instagram iframe {
        width: 400px;
        height: 250px;
    }
    
}

@media (max-width:446px) {

    .instagram iframe {
        width: 300px;
        height: 200px;
    }
    
}

@media (max-width:882px) {

    /*.footer-ppal {
        height: 592px;
    }*/
    
    .footer-ppal iframe {
        height: 605px;
    }
    
    .ppal {
        width: 90%;
    }
    
}

@media (max-width:875px) {
        
    .coord1 {
        display: block;
        width: auto;
    }
    
    .docentesc1 {
        display: block;
/*        align-content: center;*/
    }
    
    .detalles {
        margin: auto;
    }
    
    .contenedordetalles {
        display: block;
        width: 260px;
    }
    
/*    .docentesc1 .detalles {
        margin: auto;
        float: none;
    }*/
    
    .docentesc2 {
        align-content: center;
    }
    
    .docentesc2 .detalles {
        margin: auto;
        float: none;
    }

    .docentesc3 {
        align-content: center;
    }
    
    .docentesc3 .detalles {
        margin: auto;
        float: none;
    }
    
    .docentesc4 {
        align-content: center;
    }
    
    .docentesc4 .detalles {
        margin: auto;
        float: none;
    }
    
    .docentesc5 {
        align-content: center;
    }
    
    .docentesc5 .detalles {
        margin: auto;
        float: none;
    }

    .docentesc6 {
        align-content: center;
    }
    
    .docentesc6 .detalles {
        margin: auto;
        float: none;
    }
    
    .docentesc7 {
        align-content: center;
    }
    
    .docentesc7 .detalles {
        margin: auto;
        float: none;
    }
    
    .docentesc8 {
        align-content: center;
    }
    
    .docentesc8 .detalles {
        margin: auto;
        float: none;
    }

    .docentesc9 {
        align-content: center;
    }
    
    .docentesc9 .detalles {
        margin: auto;
        float: none;
    }
    
    .docentesc10 {
        align-content: center;
    }
    
    .docentesc10 .detalles {
        margin: auto;
        float: none;
    }
    
    .docentesc11 {
        align-content: center;
    }
    
    .docentesc11 .detalles {
        margin: auto;
        float: none;
    }

    .docentesc12 {
        align-content: center;
    }
    
    .docentesc12 .detalles {
        margin: auto;
        float: none;
    }
        
}

@media (max-width:800px) {

    .novedades {
        display: block;
        width: 75%;
    }
    
    .novedad-img {
        text-align: left;
        padding-left: 21px;
    }
    
}

@media (max-width:712px) {
    
    .coord p {
        font-size: 27px;
    }
    
    .persona {
        margin-left: 10%;
        width: 70%;
        width: auto;
    }
    
    .novedad-txt p {
        font-size: 25px;
    }
    
}

@media (max-width:700px) {
   
    .persona {
        display: block;
    }
    
    .persona .detalles {
        width: 90%;
    }
    
    .persona .detalles h4 {
        font-size: 19px;
    }
    
    .persona .detalles p {
        font-size: 19px;
    }
    
    .persona .detalles p1 {
        font-size: 19px;
    }
    
    .persona .detalles p2 {
        font-size: 18px;
    }
    
    .banner1 {
        height: 290px;
    }
    
    .banner-equipo p {
        font-size: 38px;
        width: 135px;
    }
    
    .grupo p {
        font-size: 36px;
    }
    
    .direccion p {
        font-size: 36px;
    }
    
    .docentestit p {
        font-size: 36px;
        width: 145px;
    }
    
    .personal p {
        width: 190px;
        font-size: 36px;
    }
    
    .contenido h4 {
        font-size: 17px;
    }
    
    .contenido p {
        font-size: 15px;
    }
    
    .novedad-txt .contenido p {
        font-size: 17px;
    }
    
    .func-col1 .content {
        float: none;
    }
    
    .func-col2 .content {
        float: none;
    }
    
    .func-col3 .content {
        float: none;
    }
    
    .content {
        width: 120px;
    }
    
    .func-col2 {
        padding-left: 0;
    }
    
    .banner-info {
        margin-left: 6%;
    }
    
}

@media (max-width:650px) {

    .banner-info p {
        font-size: 30px;
        width: 350px;
    }
    
    .item-biblio {
        font-size: 30px;
    }
    
    .subtit-txt p {
        font-size: 23px;
    }
}

@media (max-width:567px) {

    .footer-ppal iframe {
        height: 530px;
    }
    
    .banner1 {
        height: 220px;
    }
    
    .imagen {
        padding: 0;
    }
    
    .imagen img {
        width: 100%;
    }
    
    .grupo p {
        font-size: 29px;
    }
    
    .direccion p {
        font-size: 29px;
    }

    .cont-texto {
        font-size: 17px;
    }
    
    .cont-texto {
        width: 80%;
    }
    
    .novedad-img img {
        width: 250px;
/*        height: 250px;*/
    }
    
    .novedad-img {
        padding-left: 5px;
    }
    
    .novedad-txt p {
        padding: 14px;
        margin-left: 0;
    }
    
    .masinfo {
        padding-left: 5px;
    }
    
}

@media (max-width:496px) {
    
    .contenedor-estudiante {
        width: 100%;
        padding: 0;
    }

}

@media (max-width:466px) {
    
    .form-control {
        width: 200px;
    }

    .acceso {
        width: 100%;
        margin: auto;
    }
    
    
}

@media (max-width:450px) {
    
    .item-biblio {
        font-size: 24px;
        text-align: center;
    }
    
    .novedad-txt p {
        font-size: 20px;
    }
    
/*    .subtitulo p {
        font-size: 17;
    }*/
    
}

@media (max-width:420px) {

    .banner-info p {
        font-size: 20px;
        width: 235px;
    }
    
    .grupo {
        width: 90%;
    }
    
}

@media (max-width:465px) {
    
    .grupo {
        text-align: center;
    }
    
    .grupo p {
        font-size: 28px;
/*        width: 250px;*/
    }
    
    .coord {
        width: 90%;
        text-align: center;
        margin: auto;
    }
    
}

@media (max-width:380px) {
    
    .contenido h4 {
        font-size: 15px;
    }
    
    .contenido p {
        font-size: 13px;
    }

    .content {
        width: 100px;
    }
    
    .coord p {
        font-size: 24px;
    }
    
}