@charset "utf-8";

* {
    box-sizing: border-box;
    margin: 0em;
    padding: 0em;
    text-decoration: none;
    font-family: 'Ubuntu', sans-serif;
    
    
 }

body {
    background-color: rgb(255, 255, 255);   
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

img {
    max-width: 100%;
    height: auto;
}

ul { list-style: none; }



/*
----------------
header
----------------
*/

header {
    background-color: #9d97ea;
    height: 10%;
    padding: .9em 1em .7em 1em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    position: sticky;
    z-index: 99999;
    top: 0;
}

#logo {
    display: block;
    width: 12em;
}

#menu {
    padding: 0em;
    margin: 0;
}

header > ul {
    display: flex;
    margin: 0;
    padding: 0;
}

header > nav {
    background-color: #000050;
    color: white;
    padding: 1.5em;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: bold;
    
    position: fixed;
    top: 0;
    height: 100vh;
    width: 50vw;
    transition: all .6s ease;
    z-index: 999;  
    right: -50vw;
    transition: all .6s ease;
}

header nav:target {
    right: 0;
}

.usuario {
    margin: 1em;
    text-align: center;
    font-size: 75%;
    padding: 1em;
}

/* color del texto enlace cuando ya ha sido visitado */
.usuario a:visited {
color: #ffffff; 
}

.usuario img {
    border-radius: 50%;
    width: 20vmin;
    height: 20vmin;
    max-width: 20em;
    max-height: 20em;
    border: 5px solid #000950;
    box-shadow: 0 .35em .5em rgba(0, 0, 0, 0) inset, 0 .35em .5em rgba(0, 0, 0, 0.57);
}

.ingresar {
    color: #ffffff;
    padding: .5em .5em .5em 1em;
    display: flex;
    text-align: center;
    font-size: 12pt;
    text-decoration: underline;
}


header > nav > ul > li > a {
    width: 100%;
    height: 100%;
    padding: 1em;
    margin: 0 0 0 0;
    
    background-color: rgba(0, 0, 255, 0.1);
    color: #b0deff;
    text-decoration: none;
    font-weight: bold;
    display: flex;
    justify-content:center;
    align-items:center;
}

header nav ul li ul li a {
    width: 100;
    height: 100%;
    padding: .5em;
    
    background-color: rgba(0, 0, 255, 0.1);
    color: #b0deff;
    text-decoration: none;
    font-weight: bold;
    display: flex;
    justify-content:center;
    align-items:center;
    font-size: 11pt;
}

/* color del texto enlace cuando el puntero del raton esta sobre él */
header nav ul li a:hover {
background-color: rgba(144, 144, 255, 0.26);
}


header nav ul {
    width: 100%;
}

#x {
    color: white;
    position: absolute;
    top: 1.2em;
    right: 1em;
}

header .fas {
    color: rgb(57, 48, 131);
    font-size: 1.3em;
}

.fa-search{
    padding-right: 1em;
}


/* header responsive */

@media screen and (min-width:1000px){
    header > ul {
        display: none;
    }
    
    header > nav{
        width: auto;
        height: auto;
        background-color: #9d97ea;
        display: flex;
        flex-direction: row-reverse;
        align-content: center;
        align-items: center;
        justify-content: center;
        
        position: absolute;
        transition: none;
        z-index: 99999;  
        right: 0vw;
    }
    
    .usuario {
    margin: 1em;
    text-align: none;
    padding: .5em;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
        background-color: none;
    }
    
    .usuario img {
        display: none;
    }
    
    .ingresar {
    background-color: none;
    padding: .5em;
    font-size: 10pt;
    text-decoration: underline;
    }
    
    #menu {
    background-color: none;
    }
    
    header nav ul li a:hover {
    background-color: rgba(144, 144, 255, 0.26);
    }
    
    header nav ul li ul li a:hover {
    background-color: rgba(144, 144, 255, 0.26);
    }
    
    header nav{
        background-color: none;
    }
    
    header nav ul {
    width: auto;
        margin: 0;
        padding:0;
    background-color: rgb(104, 104, 183);
    }
    
    header > nav > ul > li > a {
    min-width: 6em;
    padding: .5em;
    margin: 0em;
    background-color: none;
    color: #b0deff;
    font-size: 11pt;
    }
    
    header nav ul li ul li a {
    width: auto;
    height: auto;
    padding: .5em;
    margin: 0;
    font-size: 10pt;
    background-color: none;
    }
    
    header nav ul{
        display: flex;
    }

    header nav ul li ul{
        max-width: 7.8em;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        width: 9.3em;
        background-color: rgb(104, 104, 183);
        
        display: none ;
        position: absolute;
    }
    
    header nav li:hover > ul{
        display:block;
        
    }
    
    #x {
    display: none;
    }
    
}





/*
----------------
footer
----------------
*/

footer {
    width: 100%;
    padding-top: 1em;
    background-color: #060038;
    display: flex;
    flex-direction: column; 
    align-items: center;
}

.ir-arriba {
	color: white;
}

footer > h3 {
    display: flex;
    color:#ffffff; 
    padding: .5em;
    font-size: 12pt;    
}

footer > iframe {
    display:flex;
    width:100%;
    padding: 1em;
    padding-top: .5em;
}
  


footer ul {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%; 
    padding: 1em;
    padding-top: .2em;
}


footer > ul > li > a{
    margin: .3em;
    padding: 0;
    display: flex; 
    align-items: center;
    width: 2em
}

.copyright{
    background-color: #000000;
    color: white;  
    width: 100%;
    display: flex;
    justify-content: center;
}

.copyright > p{
    font-size: 9pt;
    padding: 1em;
    text-align: center;
}

/* footer responsive */
@media screen and (min-width:1000px){
    footer iframe{
        padding: 0 12em;
    }
}

/*barra user*/
#barrauser{
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 4em;
    padding-bottom: 0px;
    background-color: rgb(175, 166, 250);
    z-index:99998;
    
    padding: 1em;
    padding-top: 2em;
    display: flex;
    align-items: center;
}

#barrauser ul li a{
    color: #04006c;
    font-size: 24pt;
    padding: 1em;
}


/*
----------------
main
----------------
*/

main {
    display: flex;
    flex-direction: column;
}

/* para titulos de nota */
h2 {
    color:#000f60; 
    padding: .5em 1em;
    padding-top: 1em;
    font-size: 14pt;
}

/* para sub-titulos de nota */
h3 {
    display: flex; 
    padding: .5em 1em;
    font-size: 12pt;    
}

h4 {
    display: flex; 
    padding: 1em 1em .5em 1em;
    font-size: 11pt;
}


p {
    font-size: 12pt;
    padding: 1em 1em .5em 1em;
}


p2 {
    font-size: 11pt;
    padding: .5em 1.5em .5em 1em;
    display: flex;
}

/* para bajada de noticia */
p3{
    font-size: 13pt;
    padding: 1em;
    display: flex;
}

p4{
    font-size: 14pt;
    text-align: center;
    padding: 1em;
    display: flex;
    color: #000000;
}

/* para fecha y seccion de noticias */
p5{ 
    color: gray;
    font-size: 11pt;
    padding: .5em 1em .5em 1.3em;
    display: flex;
}

/* para p3 de form */
{
    font-size: 13pt;
    text-align: center;
    padding: 1em;
    display: flex;
    color: #59599d;
    background-color: #f2f2ff;
}

.encabezado{
    background-color: #001069;
    color:#ffffff;
    display: flex;
}

.encabezado > h1{
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    font-size: 18pt;
    padding: 0;
    padding-top: .2em;
    width: 100%;
}

main .fas {
    color: #ffffff;
    margin: .5em;
}


.texto h3{
    padding-left: 1em;
}

.texto ul li{
    text-decoration: list-style-type: circle;
    padding: 0;
}

.botontodos{
    width: auto;
}



/*
----------------
slider
----------------
*/

.pasador{
    width: 100vh auto;
    height: auto;
}

.pasador img {
max-width: 100%;
height: auto;
}

.pasador > figcaption{
    position: relative;
    z-index: 99999;
}

figcaption > p2{
    padding-top: 1em;
    font-size: 9pt;
}

.pasador h1 {
    background-color: #001069;
    color: white; 
    font-size: 18pt;
    padding: .6em;
}

.pasador #noti1{
    background-color: #d2d8f2;
}

.pasador #noti2{
    background-color: rgba(0, 147, 255, 0.42);
}

.pasador #noti2 > figcaption > h1{
    background-color: rgb(0, 147, 255);
}

.pasador #noti2 > figcaption > .leermas{
    background-color: rgb(0, 147, 255);
}

.pasador #noti3{
    background-color: rgba(140, 247, 198, 0.8);
}

.pasador #noti3 > figcaption > h1{
    background-color: rgb(35, 175, 111);
}

.pasador #noti3 > figcaption > .leermas{
    background-color: rgb(35, 175, 111);
}

.pasador p {
    font-size: 11pt;
    padding: 1em 1em .5em 1em;
}

.leermas {
    margin: 1em;
    background-color: #272791;
    border: none;
    border-radius: 12px;
    color: white;
    padding: 1em 1.5em;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 11px;
    font-weight: bold;
}


/*
----------------
index, otras noticias
----------------
*/


/* Presentacion*/
video{
    margin: 0 auto;
    padding: 1em 0;
    position: relative;
    width: 100%;
}

.video{
    margin-bottom: 2em;
    background-color: #d5beff;
}

.video h2{
    background-color: #bb97ff;
}

.video > p{
    padding-bottom: 0;
}


/* Proximas fechas deportes */
.fechas h2{
    background-color: rgba(0, 147, 255, 0.68);
}

.fechas img{
    padding: 1em;
    padding-bottom: 2em;
}

.fechas .pasador figure{
    background-color: rgba(0, 147, 255, 0.42);
}

/* Otros contenidos */
.otrasnoticias{
    width: 100%;
    display: flex;
    padding-bottom: 1.5em;
}

.seccion{
    padding: 0;
    width: 50%;
}

.seccion img{
    padding: 0 1em;
    padding-top: 1em;
}

.seccion h3{
    padding: 1em;
    padding-bottom: .5em;
}


/* otros contenidos */
#otros{
    background-color: rgb(114, 209, 183);
}

/* Videos */
.seccion > ul > li:last-of-type{
    background-color: #d5beff;
    padding-bottom: 1em;
}

.seccion > ul > li:last-of-type > .leermas {
    margin: 0 1em;
    background-color: #a878ff; 
}

.seccion > ul > li:last-of-type > iframe {
    width: 234px;
    height: auto;
    padding: 0 1em;
    padding-bottom: .5em;
}


/* Ultimas publicaciones*/
#fb{
    background-color: rgb(193, 189, 255);
}

.publicacion{
    width: 100%;
    background-color: rgb(193, 189, 255);
    padding-bottom: 1.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    
}



/*
----------------
nuestro club
----------------
*/

.historia{
    padding-bottom: 1em;
    background-color: ;
}
.historia h2{
    padding-bottom: .5em;
}
.historia p{
    padding: .5em 1em;
}

.historia p3{
    padding: 1em;
    padding-top: 0;
}

.historia h4{
    padding-bottom: 0;
    padding-left: 1.2em;
    padding-top: 2em;
}

.historia img{
    padding: 0 1em;
}

.historia h3{
    padding-top: 1em;
}

.texto > h2{
    background-color: rgb(73, 67, 175);
    color:white;
    text-align: center;
    padding-bottom: .5em;
}

.texto > .actividades > h2{
    color:white;
    text-align: center;
    font-size: 18pt;
    padding: 0;
}

.texto > .actividades2 > h2{
    color:white;
    text-align: center;
    font-size: 18pt;
    padding: 0;
}

.texto > .actividades > button{
    width: 96%;
    margin: .5em;
    display: flex;
    justify-content: center;
    background-color: rgb(12, 109, 65) ;
}

.texto > .actividades2 > button{
    width: 96%;
    margin: .5em;
    display: flex;
    justify-content: center;
    background-color: rgb(0, 81, 141);
}

.plantel{
    padding: 1em;
    display: flex;
}

.plantel img{
    width:7em;
    height:auto;
    border-radius:150px;
}

.plantel h3{
    padding: .5em 0;
}

.plantel p{
    padding: .5em 0;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.plantel h2{
    padding: .5em 0;
    padding-top: 1em;
}

.plantel > div{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 35%;
    padding: 0 .5em;
}
 

/*
----------------
todas las noticias
----------------
*/

/* noticia club */
.noticlub{
    background-color: #d2d8f2;
    padding-bottom: 1em;
}

.noticlub > p5 {
    padding-top: 0 ;
}

.noticlub > img {
    padding-bottom: 0 ;
}

.noticlub > .leermas {
    margin: 0 1em;
}


/* noticia cultura */
.noticultura{
    background-color: rgba(140, 247, 198, 0.8);
    padding-bottom: 1em;
}

.noticultura h2 {
    padding-bottom: .5em ;
}

.noticultura > img {
    padding-bottom: 0 ;
    padding-top: .5em;
}

.noticultura > h4 {
    padding-bottom: .5em;
}

.noticultura > p5 {
    padding: 0 1em;
}

.noticultura > .leermas {
    margin: 0 1em;
    background-color: rgb(35, 175, 111); 
}


/* noticia deportes */
.notidepo{
    background-color: rgba(0, 147, 255, 0.42);
    padding-bottom: 1em;
    color: black;
}

.notidepo h2 {
    padding-bottom: .5em ;
}

.notidepo > img {
    padding-bottom: 0 ;
    padding-top: .5em;
}

.notidepo > .leermas {
    margin: 0 1em;
    background-color: rgb(0, 147, 255); 
}

.notidepo > h4 {
    padding-bottom: .5em;
}

.notidepo > p5 {
    padding: 0 1em;
}

.seccion > ul > .notidepo{
    padding-bottom: .5em;
    color: black;
}

.seccion > ul > .notidepo > .leermas {
    margin: 0 1em; 
}

.seccion > ul > .notidepo > h4 {
    padding-bottom: .5em;
}

.seccion > ul > .notidepo > p5 {
    padding: 0 1em;
}

/* comentarios */
.comments{
    margin: 1em;
    padding: .5em 0;
    background-color: #b4c2ff;
    border-radius: 12px;
}

.comments h3{
    color: #001795;
    display: flex;
    align-items: center;
    padding-bottom: 0;
}

.comments h3 .fas{
    color: #001795;
    font-size: 14pt;
    margin-right: .2em;
}

.comments span{
    padding-left: .8em;
}

.comments .fas{
    color: black;
    font-size: 11pt;
}

.comment1{
    margin: 1em;
    padding: .5em;
    background-color: #97aaff;
    border-radius: 12px;
    border-left: 1em white;
}

.comment1 > h4{
    padding-top: 0;
}

.page{
    padding-right: .5em;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.page .fas{
    background-color: #97aaff;
    padding: .5em;
    color:white;
}

.page p{
    padding: .2em;
    color:white;
}


/* noticias responsive */
@media screen and (min-width:1000px){
    .notisecund{
        width: 100%;
        display: flex;
    }
}


/*
----------------
activ cultura
----------------
*/

.cultura{
    background-color: rgb(101, 212, 161) ;
    margin-bottom: 0;
    color:#ffffff;
    display: flex;
}


.actividades{
    background-color: rgb(101, 212, 161);
    padding: .5em;
}


.actividades h3{
    color: white;
    width: 100%;
    font-size: 16pt;
    
    padding: .2em;
    padding-left: 1em;
    margin: 0;
    background-color: rgb(101, 212, 161);
    color: white;
}

.actividades p{
    color: white;
    padding: .2em;
    padding-left: 1.2em;
    margin: 0;
    background-color: rgba(101, 212, 161, 0.65);
}

.bloque1{
    width: 100%;
    height: 18em;
    padding: 13.2em 1em 1em 0em;
    margin: 0 0 .5em 0;
    background-image: url(../imagenes/teatro.jpg);
    box-shadow: 10px 15px 40px rgba(92, 56, 0, 0.78) inset;
    background-size: cover;
    background-position: center;
    display: flex;
}

.bloque2{
    width: 100%;
    height: 15em;
    display: flex;
    flex-direction: row;
    align-content: space-between;
}

.tango{
    width: 50%;
    height: 15em;
    padding: 10.2em 1em 1em 0em;
    margin: 0 .25em .25em 0;
    background-image: url(../imagenes/tango.jpeg);
    box-shadow: 10px 15px 40px rgba(92, 56, 0, 0.78) inset;
    background-size: cover;
    background-position: center;
    display: flex;
}

.biblioteca{
    width: 50%;
    height: 15em;
    padding: 8.6em 1em 1em 0em;
    margin: 0 0 .25em .25em;
    background-image: url(../imagenes/biblioteca.jpg);
    box-shadow: 10px 15px 40px rgba(92, 56, 0, 0.78) inset;
    background-size: cover;
    background-position: right;
    display: flex;
    width: 50%;
}

.bloquevertical{
    display: flex;
    flex-direction: row;
    width: 100%;
    align-content: space-between;
    
}

.bloque3{
    width: 50%;
    margin: 0 .25em 0 0;
    padding: 0 .25em 0 0;
    display: flex;
    flex-direction: column;
    align-content: space-between;
}

.italiano{
    width: 100%;
    height: 15em;
    padding: 8.8em 1em 1em 0em;
    margin: .5em 0 .5em 0;
    background-image: url(../imagenes/italiano.jpg);
    box-shadow: 10px 15px 40px rgba(92, 56, 0, 0.78) inset;
    background-size: cover;
    background-position: center;

}

.colonia{
    width: 100%;
    height: 14.5em;
    padding: 10em 7em 1em 0em;
    margin: 0 0 .5em 0;
    background-image: url(../imagenes/colonia.jpg);
    box-shadow: 10px 15px 40px rgba(92, 56, 0, 0.78) inset;
    background-size: cover;
    background-position: left;
}

.colonia h3{
    width: 7em;
}
.colonia p{
    width: 9.2em;
}

.danza{
    width: 100%;
    height: 30em;
    padding: 25.5em 1em 1em 0em;
    margin: .5em 0 .5em 0;
    background-image: url(../imagenes/danzajazz.jpg);
    box-shadow: 10px 15px 40px rgba(92, 56, 0, 0.78) inset;
    background-size: cover;
    background-position: center; 
}

.bloque4{
    display: flex;
    flex-direction: row;
    width: 100%;
    align-content: space-between
 }
 
.dibujo{
    width: 50%;
    height: 15em;
    padding: 8.8em 1em 1em 0em;
    margin: 0 .5em .5em 0;
    background-image: url(../imagenes/dibujopintura.jpg);
    box-shadow: 10px 15px 40px rgba(92, 56, 0, 0.78) inset;
    background-size: cover;
    background-position: center;
    display: flex;
}

.dibujo h3{
    width: 8.2em;
}
.dibujo p{
    width: 11em;
}

.reiki{
    width: 50%;
    height: 15em;
    padding: 11.4em 1em 1em 0em;
    background-image: url(../imagenes/reiki.jpg);
    box-shadow: 10px 15px 40px rgba(92, 56, 0, 0.78) inset;
    background-size: cover;
    background-position: right;
    display: flex;
}

.bloque5{
    width: 100%;
    height: 10em;
    padding: 5.5em 1em 1em 0em;
    background-image: url(../imagenes/literario.jpg);
    box-shadow: 10px 15px 40px rgba(92, 56, 0, 0.78) inset;
    background-size: cover;
    background-position: center;
    display: flex;  
}

/*
----------------
activ deportes
----------------
*/

.deportes {
    background-color: rgb(0, 147, 255);
    margin-bottom: 0;
    color:#ffffff;
    display: flex;
}

.actividades2{
    background-color: rgb(0, 147, 255);
    padding: .5em;
}

.actividades2 h3{
    color: white;
    width: 100%;
    font-size: 16pt;
    
    padding: .2em;
    padding-left: 1em;
    margin: 0;
    background-color: rgb(0, 147, 255);
    color: white;
}

.actividades2 p{
    color: white;
    padding: .2em;
    padding-left: 1.2em;
    margin: 0;
    background-color: rgba(0, 147, 255, 0.5);
}


.bloque1d{
    width: 100%;
    height: 18em;
    padding: 13.2em 1em 1em 0em;
    margin: 0 0 .5em 0;
    background-image: url(../imagenes/natacion.jpg);
    box-shadow: 10px 15px 40px rgba(92, 56, 0, 0.78) inset;
    background-size: cover;
    background-position: center;
    display: flex;
}

.bloque2d{
    width: 100%;
    height: 15em;
    display: flex;
    flex-direction: row;
    align-content: space-between;
}

.paddle{
    width: 50%;
    height: 15em;
    padding: 10.5em 1em 1em 0em;
    margin: 0 .25em .25em 0;
    background-image: url(../imagenes/paddle.jpg);
    box-shadow: 10px 15px 40px rgba(92, 56, 0, 0.78) inset;
    background-size: cover;
    display: flex;
}

.kungfu{
    width: 50%;
    height: 15em;
    padding: 10.5em 1em 1em 0em;
    margin: 0 0 .25em .25em;
    background-image: url(../imagenes/kungfu.jpg);
    box-shadow: 10px 15px 40px rgba(92, 56, 0, 0.78) inset;
    background-size: cover;
    background-position: center;
    display: flex;
    width: 50%;
}

.bloqueverticald{
    display: flex;
    flex-direction: row;
    width: 100%;
    align-content: space-between;
    
}

.bloque3d{
    width: 50%;
    margin: 0 .25em 0 0;
    padding: 0 .25em 0 0;
    display: flex;
    flex-direction: column;
    align-content: space-between;
}

.pelotapaleta{
    width: 100%;
    height: 15em;
    padding: 10.2em 1em 1em 0em;
    margin: .5em 0 .5em 0;
    background-image: url(../imagenes/pelotapaleta.jpg);
    box-shadow: 10px 15px 40px rgba(92, 56, 0, 0.78) inset;
    background-size: cover;
    background-position: center;

}

.karate{
    width: 100%;
    height: 14.5em;
    padding: 10em 7em 1em 0em;
    margin: 0 0 .5em 0;
    background-image: url(../imagenes/karate.jpg);
    box-shadow: 10px 15px 40px rgba(92, 56, 0, 0.78) inset;
    background-size: cover;
    background-position: center;
}

.karate h3{
    width: 7.5em;
}
.karate p{
    width: 10em;
}

.gymart{
    width: 100%;
    height: 30em;
    padding: 24em 1em 1em 0em;
    margin: .5em 0 .5em 0;
    background-image: url(../imagenes/gimnasia.jpg);
    box-shadow: 10px 15px 40px rgba(92, 56, 0, 0.78) inset;
    background-size: cover;
    background-position: center; 
}

.bloque4d{
    display: flex;
    flex-direction: row;
    width: 100%;
    align-content: space-between
 }
 
.patin{
    width: 50%;
    height: 15em;
    padding: 9em 1em 1em 0em;
    margin: 0 .5em .5em 0;
    background-image: url(../imagenes/patinaje.jpg);
    box-shadow: 10px 15px 40px rgba(92, 56, 0, 0.78) inset;
    background-size: cover;
    background-position: center;
    display: flex;
}

.futbol{
    width: 50%;
    height: 15em;
    padding: 10.5em 1em 1em 0em;
    background-image: url(../imagenes/futbol.jpg);
    box-shadow: 10px 15px 40px rgba(92, 56, 0, 0.78) inset;
    background-size: cover;
    background-position: center;
    display: flex;
}

.bloque5d{
    width: 100%;
    height: 10em;
    padding: 5.5em 1em 1em 0em;
    background-image: url(../imagenes/basquet.jpg);
    box-shadow: 10px 15px 40px rgba(92, 56, 0, 0.78) inset;
    background-size: cover;
    background-position: center;
    display: flex;  
}


/*
----------------
natación/teatro
----------------
*/

.info{
    display: flex;
}

.imgdatos{
    width: 100%;
    font-size: 12pt;
    padding-right: 1em;
}

.imgdatos > img{
    width: 100%;
    margin-left: 1em;
    margin-top: 2em;
}

.datos{
    margin-left: 1em;
    padding: 1em;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;    
}

.notidepo .datos{
    background-color: rgb(90, 192, 255);
}

.noticultura .datos{
    background-color: rgb(125, 239, 173);
}

.datos h2{
    padding: 0 0 .4em; 
    color: black;
}

.datos p4{
    padding: 0 0 .3em;
}

.info span{
    font-weight: bold;
}

.contenido{
    padding: 1em;
    width: 100%;
}

.contenido h3{
    padding: 1em;
    padding-bottom: 0;
    padding-top: .5em;
    font-size: 11pt;
}

.contenido > section:last-of-type{
    color: gray;
    padding-top: .5em;
    display: flex;
}

.profe p{
    padding-top: .5em;
}

.anotarme{
    background-color: #272791;
    border: none;
    border-radius: 12px;
    padding: 1em;
    margin: 1em;
    width: 28em;
    height: 3.5em;
    font-weight: bold;
    color: white;
    font-size: 12pt;
}

.anotarme a{
    font-size: 14pt;
}

.noticultura > .anotarme{
    background-color: rgb(35, 175, 111);
}

.profe{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 50%;
    text-align: center;
    
}

.profe img{
    width: 5em;
    height: 5em;
    border-radius: 150px;
    padding: 0;
}


/* teatro responsive */
@media screen and (min-width:1000px){
    .imgdatos{
    width: 40%;
    }
    
    .teatrotras{
        display: flex;
    }
    
    .teatrotras > .texto{
        width: 50%
    }
   
    .teatrotras > .galeria{
        width: 50%;
        display: flex;
        flex-direction: row;
    }
    
    .teatrotras > .galeria > figure{
        width: 13em;
    }
    
    .teatrotras .actividades h3{
        font-size: 12pt;
        padding-bottom: .5em;
        padding-top: .5em;
    }
    
    .profe{
    display: flex;
    flex-direction: row;
    }
    
    .profe p{
        font-size: 14pt;
        padding: .5em;
    }

    .profe img{
    width: 8em;
    height: 8em;
    }
    
    .contenido h3{
    padding-bottom: .5em;
    padding-top: 1em;
    font-size: 11pt;
    }
    
    .noticultura > .anotarme{
        margin-top: -10em;
        margin-left: 18em;
        width: 41em;
    }
    
}


/*
----------------
formularios
----------------
*/

form{
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    padding: 1em;
}

#olvidaste{
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    padding: 0 1em 0 1em;
}

#olvidaste > h3{
    text-align: center;
    padding: 1em 0 0 0;
    font-size: 11pt;
    font-weight: bold;
    color: #000088;
}

#olvidaste > p{
    text-align: center;
    padding: .5em 3em 0 3em;
    font-size: 10pt;
}

button {
    margin: .3em;
    width: 20;
    background-color: #272791;
    border: none;
    border-radius: 12px;
    padding: 1em;
    width: 15em;
    height: 3.5em;
    font-weight: bold;
    color: white;
    font-size: 12pt;
}

button > a{
    color: white;
    font-size: 12pt;
}

input{
    margin: .3em;
    background-color: #d9f3ff;
    border: none;
    border-radius: 12px;
    padding: 1em;
    font-size: 12pt;
}

textarea{
    margin: .3em;
    background-color: #d9f3ff;
    border: none;
    border-radius: 12px;
    padding: 1em;
    font-size: 12pt;
    width: 100%;
}

form span{
    font-size: 14pt;
    color: blue;
}

form > h2{
    padding: 0 0 .7em;
    width: 12em;
}


/*
----------------
ingresa
----------------
*/

#datos{
    padding: 2em 0 0 0; 
}

.boton2{
    background-color: #6060e2;  
}

#email{
    margin: .3em;
    background-color: #d9f3ff;
    border: none;
    border-radius: 12px;
    padding: .5em;
    font-size: 10pt; 
    width: 18em;
}

.boton3{
    padding: 0em;
    width: 16.5em;
    height: 2em;
    background-color: #6060e2;
    color: #000064;
    font-size: 11pt;
}

.boton3 > a{
    color: #000064;
    font-size: 11pt;
}

#opciones{
    margin: 0 0 1em;
}


/*
----------------
exitoso
----------------
*/

.check {
    width: 8em;
    font-size: 18pt;
    margin: 1em;
}

.exitoso{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.exitoso > h1{
    color: darkblue;
}



/*
----------------
galeria
----------------
*/

.galeria {
    padding-bottom: 2em;
    max-width: 75em;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.galeria h3 {
    width: 100%;
    padding: 1em;
}

.galeria figure {
    width: 45vmin;
    margin: .125em;
    
    /* para que cada figura sea
       "origen de coordenadas"
       de sus "descendientes" con 
       position: absolute */
    position: relative;
    
    /* para que se oculten
       sus "descendientes" con 
       position: absolute
       que se "salgan" de sus límites */
    overflow: hidden;
}

.galeria img {
    /* para que "desaparezca" el espacio que queda debajo de la imagen */
    display: block;
}

.galeria figcaption {
    background-color: rgba(126, 0, 144, 0.5);
    color: white;
    padding: .5em;
    line-height: 1em;
    
    /* para salir del "flujo de información" del fondo 
       y colocase en una capa superior
       "anclada" en su "ascendiente" definido
       como origen de coordenadas */
    position: absolute;
    height: 100%;
    
    /* para que la parte superior quede
       apenas 1.5em visible (1ª línea) */
    top: calc(100% - 2em);
    transition: all .5s ease;
    
}

/* propiedades de figcaption SÓLO cuando
   la mano se coloca encima de "figure" */
.galeria figure:hover figcaption {
    background-color: rgba(193, 88, 208, 0.75);
    top: 50%;
    transition: all .5s ease;
}

.galeria figcaption span {
    display: block;
    font-size: .75em;
    color: #ddd;
}

.gallery{
    background-color: #d66cd6;
}

.galeria{
    background-color: rgba(214, 108, 214, 0.51);
}

.fotos{
    background-color: rgba(214, 108, 214, 0.28);
}

section h2{
    padding-bottom: 0;
}

/*
----------------
contacto
----------------
*/

.contacto section p{
    padding: 0 1.2em;
    padding-bottom: .5em;
}


/*
----------------
usuario
----------------
*/

.usuario .boton{
    padding: .5em;
    width: auto;
    height: 2em;
    background-color: #6060e2;
    font-size: 10pt;
    border-radius: 12px;
    font-weight: bold;
}

.usuario .boton > a{
    color: #000064;
}

.principal img{
    width:10em;
    height:10em;
    border-radius:150px;
    margin-top: -4em;
}

.principal{
    margin: 1em;
    display: flex;
}

.fotonombre{
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    width: 50%;
}

.fotonombre h2{
    padding-top: .5em;
}

.config .boton2{
    height: 3em;
    border-radius: 25px;
}

.infouser{
    padding: 1em;
    padding-left: 3em;
    padding-top: 0;
}


.configuracion input{
    width: 100%;
}

.configuracion h2{
    margin: .5em;
    padding: .5em;
    padding-bottom: 0;
    width: 100%;
}

.configuracion label{
    width: 100%;
    padding: .5em;
    padding-bottom: 0;
}

.configuracion button:last-of-type{
    width: 100%;
}

.addfoto{
    display: flex;
    align-content: center;
    align-items: center;
}

.addfoto img{
    width: 7em;
    height: 7em;
    border-radius: 150px;
}

.addfoto > div > input{
    margin: .3em;
    background-color: white;
}

.addfoto > div > h4{
    padding: 1.5em;
    padding-bottom: .5em;
    font-size: 12pt;
}





/* index responsive */
@media screen and (min-width:1000px){
    main{
        padding: 0 12em;
        background-color: #eaeaea;
    }
    
    video{
    padding: 1em;
    width: 100%;
    height: auto;
    }
    
    .seccion > ul > li:last-of-type{
    background-color: #d5beff;
    padding-bottom: 1em;
    }

    .seccion > ul > li:last-of-type > .leermas {
    margin: 0 1em;
    background-color: #a878ff; 
    }

    .seccion > ul > li:last-of-type > iframe {
    width: 234px;
    height: auto;
    padding: 0 1em;
    padding-bottom: .5em;
    }
}