* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

i {
    margin: 0 20px;
}


body {
    margin: 0 auto;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif ;
    width: 100%;
    overflow-x: hidden;
}

.titulo {
    background: #147586;
    color: #FFF;
    display: flex;
    justify-content: center;
    font-size: 56px;
    font-weight: bold;
    font-style: italic ;
    padding: 10px 0px;
    width: 100%;
    text-shadow: 5px 5px 1px rgba(0,0,0,0.5);
}

.titulo a {
    color: #FFF;
    text-decoration: none;
}


#btn-menu {
    display: none;
    margin: 0 auto;
    padding:0;
}


#lista-responsive  {
    display: none;
} 

#lista-responsive i { 
    font-size:30px;
    color: #FFF;
    margin: 0;
    padding: 0;
}


.menu {
    width: 100%;
}

.menu ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    background: rgba(0,0,0,0.8);
}

.menu li:first-child {
    font-weight: bold;
}

.menu li {
    width: 100px;
    list-style: none;
    text-align: center;
    flex-grow: 1;
   
    transition: 0.3s;
}

.menu li:hover {
    font-weight: bold;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.8);
    background: rgba(0,0,0,0.5);
}

.menu li a {
    color: white;
    text-decoration: none;
    display: block;
    padding: 10px;
    
}


.primera-caja {
    display: flex;
    width: 95%;
    margin: 10px auto;
    padding: 10px;
    font-weight: bold;
}

.seccion-izq {
    background:rgba(0,0,0,0.9);
    text-align: center;
    margin-right: 10px;
    box-shadow: 5px 5px 0px rgba(94, 90, 90, 0.5);
}
.fecha {
    padding: 20px;
    color: #FFF;
}

.aviso-contenido {
    padding: 10px;
    margin: 20px;
    border: 1px solid #FFF;

    transition: 0.3s;
}

.aviso-contenido:hover {
    box-shadow: 5px 5px 0px #FFF;
}

.aviso-contenido a {
    color: #FFF;
    text-decoration: none;
}

.clima {
    padding: 20px;
}

.para-docentes {
    flex-grow: 1;
    text-align: center;
    padding: 20px;
    background: rgba(0,0,0,0.9);
    box-shadow: 5px 5px 0px rgba(94, 90, 90, 0.5);
}

.para-docentes p {
    font-weight: bold;
    color: #FFF;
    font-size: 30px;
}

.para-docentes ul li {
    text-align: center;
    list-style: none;
    margin: 12px 20px;
    border: 1px solid #FFF;
    
    transition: 0.3s;
}

.para-docentes ul li:hover {
    box-shadow: 5px 5px 0px #FFF;
}

.para-docentes ul li a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: #FFF; 
}

.casillas-educativas {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0px auto;
    background:#FFF;
    color: rgba(0,0,0,0.8);
    font-weight: bold;
}

.contacto {
    font-size: 30px;
    text-align: center;
    flex-grow: 1;
    padding: 20px;
}

.contacto img {
    width: 250px;
    height: 200px;
    box-shadow: 5px 5px 0px rgba(0,0,0,0.8);
}
.contacto p {
    margin-bottom: 10px;
}

.soporte-educativo {
    font-size: 30px;
    text-align: center;
    flex-grow: 1;
    padding: 20px;
}

.soporte-educativo img {
    width: 250px;
    height: 200px;
    box-shadow: 5px 5px 0px rgba(0,0,0,0.8);
}

.soporte-educativo p {
    margin-bottom: 10px;
}

.tecnologia {
    font-size: 30px;
    text-align: center;
    flex-grow: 1;
    padding: 20px;
}

.tecnologia img {
    width: 250px;
    height: 200px;
    box-shadow: 5px 5px 0px rgba(0,0,0,0.8);
}

.tecnologia p {
    margin-bottom: 10px;
}

.videos-clases {
    font-size: 30px;
    text-align: center;
    flex-grow: 1;
    padding: 20px;
}

.videos-clases img {
    width: 250px;
    height: 200px;
    box-shadow: 5px 5px 0px rgba(0,0,0,0.8);
}

.videos-clases p {
    margin-bottom: 10px;
}

.nticx {
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 95%;
    padding: 10px;
    margin: 10px auto;
    text-align: center;
    color: #FFF;
    background:rgba(0,0,0,0.9);
    box-shadow: 5px 5px 0px rgba(94, 90, 90, 0.5);
}

.nticx p:nth-child(1) {
    margin-bottom: 5px;
    font-size: 20px;
    font-weight: bold;
}

.nticx p:nth-child(2) {
   padding: 5px;
}

.tecnologia-de-tu-lado {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 95%;
    padding: 20px;
    margin: 10px auto;
    text-align: center;
    font-weight: bold;
    background:rgba(0,0,0,0.9);
    border: 1px solid rgba(0,0,0,0.8);
    box-shadow: 5px 5px 0px rgba(94, 90, 90, 0.5);

    transition: 0.3s;
}

.tecnologia-de-tu-lado p {
    display: block;
    font-size: 28px;
    margin-bottom: 18px;
    color: #FFF;
}


.slider1 {
    margin: auto;
    width: 300px;
    height: 271px;
    overflow: hidden;

}

.slider1 ul {
    display: flex;
    width: 900px;
    height: 271px;

    animation: cambio 20s infinite alternate;
  
}

.slider1 li {
    list-style: none;
    width: 300px;
    height: 270px;
    
}

.slider1 ul li p {
    font-size: 16px;
    height: 20px;
}

.slider1 img {
    width: 100%;
    height: calc(100% - 20px);
    
}

@keyframes cambio {
    0% {margin-left: 0; }
    30% {margin-left: 0; }

    35% {margin-left: -100%; }
    65% {margin-left: -100%; }

    70% {margin-left: -200%; }
    100% {margin-left: -200%; }
}


.nuevas-tecnologias {
    color:  #FFF;
    font-weight: bold;
    padding: 20px;
    margin: 10px auto;
    width: 95%;
    text-align: center;
    background: rgba(0,0,0,0.9);
    border: 1px solid  rgba(0,0,0,0.8);
    box-shadow: 5px 5px 0px rgba(94, 90, 90, 0.5);
}


.slider2 {
    width: 100%;
    margin: auto;

    animation: cambio1 15s infinite alternate;
}
.slider2 ul {
    display: flex;
    width: 200%;
    margin: auto;
}

.slider2 li {
    list-style: none;
    width: 100%;
    margin:20px;
}

.slider2 ul li p {
    color: #FFF;
    font-weight: 200;
}

@keyframes cambio1 {
    0% {margin-left: 0; }
    45% {margin-left: 0; }

    50% {margin-left: -100%; }
    100% {margin-left: -100%; }
}


/*----footer--------*/
footer {
    color: #FFF;
    background: #147586;
    text-align: center;
    width: 100%;
    padding: 50px 20px;
    margin-top: 100px;
    box-shadow: 0px 10px 0px inset rgba(0,0,0,0.8);
    
}

.edu-footer {
    background: #147586;
    color: #FFF;
    display: flex;
    justify-content: center;
    font-size: 40px;
    font-weight: bold;
    font-style: italic ;
    padding: 10px 0px;
    width: 100%;
    text-shadow: 5px 5px 1px rgba(0,0,0,0.5);
}

.copyright {
    width: 100%;
    margin-bottom: 10px;
    font-size: 14px;
    padding: 0px 250px;
}

.secciones-footer {
    display: flex;
}

.mapa-sitio,.contacto-footer {
    flex-grow: 1;
}

.mapa-sitio h2,.contacto-footer h2 {
    width: 250px;
    margin: auto;
    margin-bottom: 5px;
    border-bottom: 1px solid;
    text-align: left;
}
.mapa-sitio ul,.contacto-footer ul {
    width: 200px;
    margin: auto;
    text-align: left;
}

.mapa-sitio li,.contacto-footer li {
    list-style: none;
}

.mapa-sitio a,.contacto-footer a {
    color: #FFF;
    text-decoration: none;
}

.mapa-sitio a:hover,.contacto-footer a:hover {
    text-decoration: underline;
}

.contacto-footer i {
    font-size: 25px;
    margin: 0px;
    margin-right: 5px;
}

.contacto-footer a {
    font-size: 22px;
}

.hoja-nombre {
    width: 400px;
    /* Propiedades modificadas para centrar margin: 20px 30px;*/
    margin: 0 auto;
    padding: 10px;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    border-bottom-right-radius: 8px;
    box-shadow: 6px 5px 0px rgba(73, 72, 72, 0.3);
    text-align: center;
    font-size: 25px;
    font-weight: 600;
    color: #FFF;
    background: rgba(0,0,0,0.8);
}
.hoja-nombre2 {
    width: 400px;
    margin: 0 auto;
    padding: 10px;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    border-bottom-right-radius: 8px;
    box-shadow: 6px 5px 0px rgba(73, 72, 72, 0.3);
    text-align: center;
    font-size: 18px;
    font-style: inherit;
    font-weight: 300;
    color: #FFF;
    background: rgba(5, 108, 177, 0.815);
}

/*----videos-----*/

.videos {
    margin: 10px auto;
    width: 95%;
    display: flex;
    flex-wrap: wrap;
}

.videos-titulo {
    width: 95%;
    margin: 10px auto;
    padding: 20px;
    font-size: 22px;
    font-weight: 600;
    font-style: italic;
    text-shadow: 3px 3px 0px rgba(0,0,0,0.9);
    color: #FFF;
    background: rgba(0,0,0,0.8);
    box-shadow: 5px 5px 0px rgba(94, 90, 90, 0.5);
}

.videos div {
    display: flex;
    flex-direction: column;
    width: calc(50% - 20px );
    margin: 10px auto;
    padding: 20px;
    background: rgba(0, 0, 0, 0.8);
    box-shadow: 5px 5px 0px rgba(94, 90, 90, 0.5);
    text-align: center;
}

.videos div a {
    text-decoration: none;
    text-shadow: 3px 3px 0px rgba(0,0,0,0.9);
    color: #FFF;
    font-size: 20px;
    font-weight: 600;
    font-style: italic;
    margin-bottom: 10px;
}

.videos div iframe {
    height: 300px;
    box-shadow: 2px 2px 2px rgba(0,0,0,0.7);
}

.videos-varios {
    width: 95%;
    margin: 10px auto;
}

.videos-varios div {
    margin: 10px auto;
    padding: 10px;
    background: rgba(0,0,0,0.8);
    color: #FFF;
    box-shadow: 5px 5px 0px rgba(94, 90, 90, 0.5);
}

.videos-varios div a {
    display: block;
    color: #FFF;
    font-weight: 600;
    margin: 0px 10px;
}
/*-----denuncias----*/

.casilla-denuncias {
    width: 95%;
    margin: 10px auto;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    color: #FFF;
    background: rgba(0, 0, 0, 0.8);
    box-shadow: 5px 5px 0px rgba(94, 90, 90, 0.5);
}

.casilla-denuncias p {
    width: 100%;
    padding: 5px;
    text-align: center;
    font-weight: bold;
    font-size: 28px;
}

.casilla-denuncias div { 
    margin: 20px;
    padding: 20px;
    width: 200px;
    display: flex;
    flex-direction: column;
    text-align: center;
    font-weight: bold;
    border: 1px solid rgba(0,0,0,0.5);
    background: #FFF;
    box-shadow: 5px 5px 0px rgba(189, 185, 185, 0.3);

    transition: 0.2s;
}

.casilla-denuncias div:active {
    box-shadow: 0px 0px 0px ;
    background: rgba(189, 185, 185, 0.3);
}



.casilla-denuncias img {
    margin: 13px auto;
    width: 110px;
    height: 110px;
}

.casilla-denuncias i {
    font-size: 50px;
}

.casilla-denuncias a {
    text-decoration: none;
    color: rgba(0,0,0,0.9);
}

/*----eplerr-----*/

.eplerr {
    margin: 10px auto;
    padding: 30px;
    width: 95%;
    color: #FFF;
    background: rgba(0, 0, 0, 0.8);
    box-shadow: 5px 5px 0px rgba(94, 90, 90, 0.5);
}

.titulo-eplerr {
    font-size: 36px;
    font-weight: bold;
}

.eplerr p {
    margin-bottom: 10px;
}

.eplerr li {
    margin-bottom: 10px;
}

.eplerr li img {
    margin: 10px auto;

}

.eplerr a {
    color: #FFF;
    font-weight: bold;
}

.video-eplerr {
    margin: 10px auto;
    width: 100%;

}

.video-eplerr iframe {
    width: 100%;
    height: 500px;
    margin-top: 20px;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.8);
}

/*----educacion-----*/

.tablas-educativas {
    width: 95%;
    margin: 10px auto;
    padding: 20px;
    color: #FFF;
    background: rgba(0, 0, 0, 0.8);
    box-shadow: 5px 5px 0px rgba(94, 90, 90, 0.5);
}

.tablas-educativas table {
    border-collapse: collapse;
    width: 100%;
    margin-top: 20px;    
}


.tablas-educativas th {
    border: 1px solid #FFF;
    text-align: center;
}

.tablas-educativas th a {
    display: block;
    padding: 5px;
    color: #FFF;
    text-decoration: none;
}



.tablas-educativas td {
    border: 1px solid  #FFF;;
    text-align: center;
    padding: 5px;
    
}

.table-scroll {
    overflow-x: scroll;
    
}

.tablas-educativas p {
    padding: 10px;
}

.tablas-educativas p a {
    color: #FFF;
    font-weight: bold;
}

/*-----buscadores----*/

.lista-buscadores {
    width: 95%;
    height: 1300px;
    margin: 10px auto;
    padding: 0px 150px;
}

.lista-buscadores li {
    list-style: none;
    background: rgba(0, 0, 0, 0.8);
    margin-bottom: 10px;
    box-shadow: 5px 5px 0px rgba(94, 90, 90, 0.5);
    transition: 0.2s;
}

.lista-buscadores li:hover {
    margin: 15px 0px;
    background: rgba(0, 0, 0, 0.6);
    
}

.lista-buscadores li a {
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap ;
    overflow: hidden;
    font-weight: bold;
    color: #FFF;
    text-decoration: none;
    padding: 16px; 
    transition: 0.2s;
}

.lista-buscadores li a:hover {
    color:#FFF;
    padding: 18px;
}

/*-----rsociales------*/

.lista-rsociales {
    width: 95%;
    height: 1000px;
    margin: 10px auto;
    padding: 0px 150px;

}

.lista-rsociales li {
    list-style: none;
    background: rgba(0, 0, 0, 0.8);
    margin-bottom: 10px;
    box-shadow: 5px 5px 0px rgba(94, 90, 90, 0.5);
    transition: 0.2s;
}

.lista-rsociales li:hover {
    background: rgba(0, 0, 0, 0.6);
}

.lista-rsociales li a {
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap ;
    overflow: hidden;
    font-weight: bold;
    color: #FFF;
    text-decoration: none;
    padding: 16px; 
    transition: 0.2s;

}

.lista-rsociales li a:hover {
    color:#FFF;
    padding: 18px;
}
/*------comercio-----*/
.comercio {
    width: 95%;
    margin: 10px auto;
    height: 600px;
    margin: 10px auto;
    padding: 0px 150px;
}

.comercio li {
    list-style: none;
    background: rgba(0,0,0,0.8);
    margin-bottom: 10px;
    box-shadow: 5px 5px 0px rgba(94, 90, 90, 0.5);
    transition: 0.2s;
}

.comercio li:hover {
    background: rgba(0,0,0,0.6);
  
}

.comercio li a {
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap ;
    overflow: hidden;
    font-weight: bold;
    color: #FFF;
    text-decoration: none;
    padding: 16px; 
    transition: 0.2s;

}

.comercio li a:hover {
    color:#FFF;
    padding: 18px;
}

/*-----recursos-----*/

.recursos {
    width: 95%;
    margin: 10px auto;
    background: rgba(0, 0, 0, 0.8);
    box-shadow: 5px 5px 0px rgba(94, 90, 90, 0.5);
}

.recursos table {
    border-collapse: collapse;
    width: 100%;
}

.recursos tr td {
    color: #FFF;
    border: 1px solid #FFF;
    text-align: center;
    padding: 10px;
}

.recursos tr td:first-child {
    font-weight: bold;
}

.recursos td a {
    color: #FFF;
    font-weight: bold;
    margin: 2px;
}

/*-----soporte-----*/

.soporte {
    width: 95%;
    margin: 10px auto;
}

.soporte h3 {
    margin-top: 20px;
    margin-bottom: 10px;
    padding: 5px;
    color: #FFF;
    background: rgba(0,0,0,0.8);
    box-shadow: 5px 5px 0px rgba(94, 90, 90, 0.5);
}

.soporte h3:last-child {
    margin: 50px 0px;
    padding: 10px;
}

.soporte ul {
    margin: 0px 30px;
}

.soporte li {
    list-style: none;
    margin-bottom: 10px;
}

.soporte a {
    color: rgba(0,0,0,0.9);
    font-weight: bold;
    
}

.soporte h3:last-child a {
    color:#FFF;
}
/*-----contacto-----*/

.contacto-form {
    width: 95%;
    margin: 10px auto;
}

.contacto-form h3 {
    width: 50%;
    margin: 10px auto;
    text-align: left;
}
.contacto-form form {
    display: flex;
    flex-direction: column;
    box-shadow: 5px 5px 0px rgba(0,0,0,0.8);
    padding: 50px;
    background: rgba(94, 90, 90, 0.5);
}

.contacto-form input[type="text"],textarea {
    width: 50%;
    margin: 10px auto;
    padding: 10px;
    border: none;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.contacto-form input[type="submit"],input[type="reset"] {
    width: 100px;
    margin: 5px auto;
    padding: 8px;
    border: none;
    font-weight: bold;
    background: #147586;
    color: #FFF;

    transition: 0.3s;
}

.contacto-form input[type="submit"]:hover,input[type="reset"]:hover {
    background: rgba(0,0,0,0.5);
}

/*-----programas-----*/

.programas {
    width: 95%;
    margin: 10px auto;
}

.programas h3 {
    margin: 10px;
}

.programas li {
    list-style: none;
    background: rgba(0,0,0,0.8);
    color: #FFF;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid rgba(0,0,0,0.8);
    box-shadow: 5px 5px 0px rgba(94, 90, 90, 0.5);
    transition: 0.2s;
}

.programas li a {
    font-weight: bold;
    color: #FFF;
}

.programas a {
    color: rgba(0, 0, 0, 0.8);
    font-weight: bold;
}

.programas h2 {
    margin-top: 10px;
}

.aviso {
    background: rgba(177, 31, 31, 0.822);
    margin-top: 10px;
    padding: 10px;
    color: #FFF;
}

.aviso p:last-child {
    text-align: right;
    font-weight: bold;
    padding: 10px;
}

/*-----importante-----*/

.importante {
    width: 95%;
    margin: 10px auto;
}

.importante h3 {
    margin: 10px 0px;
}

.importante p {
    margin: 10px 0px;
}

.importante p strong:nth-child(2) {
    color: red;
}

.importante iframe {
    width: 100%;
    height: 500px;
    margin: 20px 0px;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.8);
}

.importante a {
    display: inline-block;
    width: 100%;
    margin: 10px 0px;
    color: rgba(0,0,0,0.9);
    font-weight: bold;
}

/*------docentes---------*/

.re-doc-encabezado {
    color: #FFF;
    text-align: center;
}

.re-doc-encabezado p {
    border: 1px solid;
    margin: 5px;
    padding: 5px;
}

.btn-rsitios {
    width: 350px;
    margin: 10px auto;
    box-shadow: 5px 5px 0px rgba(94, 90, 90, 0.5);
    background: rgba(6, 52, 202, 0.8);
    color: #FFF;
    padding: 5px;
    font-size: 14px;
    font-weight: bold;  
}

.btn-rsitios a {
    color: #FFF;
}

.recursos-docentes,.re-doc-encabezado {
    width: 95%;
    margin: 10px auto;
    padding: 10px;
    box-shadow: 5px 5px 0px rgba(94, 90, 90, 0.5);
    background: rgba(0,0,0,0.8);
}

.recursos-docentes section {
    width: 95%;
    margin: 0px auto;
    color: #FFF;
    text-align: center;
}

.recursos-docentes div {
    display: flex;
    flex-direction: column;
    margin: 20px auto;
    padding: 5px;
}

.recursos-docentes h2 {
    border-bottom: 1px solid;
    padding: 5px;
    margin: 20px 0px;
}

.recursos-docentes a {
    color: #FFF;
    width: 300px;
    margin: 5px auto;
    padding: 3px;

    transition: 0.3s;
}

.recursos-docentes a:hover {
    text-decoration: none;
    font-weight: bold;
    background: #FFF;
    color: rgba(0,0,0,0.9);
}