* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
}
#bodyindex1 {
    font-family: 'Roboto', sans-serif;
    background-color: rgba(242, 239, 239, 0.58);
}
main {
    min-height: 100vh;
}
img {
    max-width: 100%;
    height: auto;
}







/*-----------------------------INDEX-----------------------------*/

        /*----- Header INDEX1 -----*/

#headerindex1 .barracontenedora {
    padding: .5em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-image: url(../imagenes/navegador.png);
    background-size: cover;
    color: white;
}
#headerindex1 .logowebapp {
    display: flex;
    align-items: center;
}
#headerindex1 .logowebapp a {
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1.1em;
    font-weight: 700;
}
#headerindex1 .logowebapp a:hover {
    color: rgb(22, 114, 59);
}
#headerindex1 .material-icons {
    background: none;
}
#logo {
    display: block;
    width: 3rem;
    height: auto;
    margin: 0rem .5rem;
}

            /*--- HAMBURGUESA ---*/

#llamamenu {
    background-color: rgba(255, 255, 255, 0);
    border: none;
    outline: none;
    color: white;
    cursor: pointer;
    height: 2.5rem;
    width: 3rem;
    position: relative;
    z-index: 9999;
    display: flex;
}
#llamamenu i {
    padding: 0;
    margin: auto;
    font-size: 2.5rem;
}

            /*---MENU DESPLEGABLE---*/

#headerindex1 nav {
    background-color: rgb(22, 114, 59);
    color: white;

    position: fixed;
    right: -50vw;
    top: 3.8rem;
    height: 55vh;
    min-width: 50vw;

    transition: all .6s ease;
    z-index: 9998;
}
#headerindex1 nav.menuvisible {
    right: 0;
    transition: all .6s ease;
}

            /*--- MENU USUARIO ---*/

.usuarioindex1 {
    text-align: center;
    padding: .7rem;
}
.usuarioindex1 .login a {
    display: block;
    margin: .5rem;
    font-size: .9em;
}
.usuarioindex1 i {
    font-size: 5rem;
    color: white;
}
#menu ul {
    list-style: none;
}
#menu li {
    padding: .5em;
    border-top: .05em solid white;
    width: 80%;
    margin: auto;
}
#menu a {
    text-decoration: none;
    color: white;
}
#headerindex1 #menu li a {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-size: 1.3em;
}
#headerindex1 #menu li a:hover {
    background-color: rgb(18, 60, 35);
}

            /*----- PESTAÑAS FIXTURE Y POSITIONS -----*/

#pestanas {
    display: flex;
    margin-bottom: -.0em;
    background-color: grey;
}
#pestanas div {
    width: 100%;
   
}

            /*-----VIVO INDEX 1 SUPERPOSICION-----*/

main #articuloindex1 {
    background-color: rgba(25, 25, 25, 0.21);
    border: solid rgba(128, 128, 128, 0.14) 1px;
    padding: .1rem .2rem 1rem .2rem;
}
#articuloindex1 #macroes video {
    width: 95vw;
    padding: 1em;
}

    /*-----REPETICIONES Y DESTACADOS-----*/

.sectionindex {
    margin: 0.1rem 1rem 3rem 1rem;
}
.sectionindex h2 {
    text-transform: uppercase;
    border-bottom: solid rgba(0, 0, 0, 0.58) .1rem;
    margin: 1.5rem .5rem 1rem .5rem;
    color: black;
    font-size: 1.1em;
    font-weight: 700;
}
.sectionindex a {
    color: #053809;
    margin: 0em 0em 1em 1em;
}
        /*---plugin---*/
.sectionindex div {
    margin: .07rem;
}




    /*-----GALERIA NOTICIAS INDEX-----*/
.noticiasindex div {
    margin: .3em;
}
.noticiasindex h2{
    background-image: url(../imagenes/navegador.png);
    background-size: cover;
    color: white;
    margin: .5em 0em;
    text-transform: uppercase;
    font-size: 1.1em;
    font-weight: 700;
    padding: .5em;
}

.noticiasindex figure a {
    margin: .2rem;
    display: flex;
    justify-content: center;
    cursor: pointer;
    
    /* para que cada "figure" sea origen de coordenadas de sus elementos contenidos */
    position: relative;
    /* para ocultar lo que "excede" sus límites */
    overflow: hidden;
}
.noticiasindex img {
    width: 100%;
    /* para que "desaparezca" el espacio que queda debajo de la imagen */
    display: block;
}
.noticiasindex figcaption {
    background-color: rgb(2, 38, 2);
    color: white;
    padding: .5em;
    line-height: 1em;

    /* para superponer el epígrafe sobre la foto */
    position: absolute;
    width: 100%;
    height: 100%;
    top: calc( 100% - 3em );
    
    transition: all 1s ease;
}

/* propiedades de figcaption SÓLO cuando
   el cursor se coloca encima de "figure" */
.noticiasindex figure:hover figcaption {
    background-color: rgba(25, 25, 25, 0.21);
    top: 0;
    transition: all .3s ease;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.noticiasindex figcaption span {
    display: block;
    font-size: .75em;
    color: #ddd;
    margin-top: .2em;
}
.noticiaprincipalindex > figcaption {
    background-color: rgb(2, 38, 2);
    color: white;
    padding: .5em;
    line-height: 1em;

    /* para superponer el epígrafe sobre la foto */
    position: absolute;
    width: 100%;
    height: 100%;
    top: calc( 100% - 3em );
    
    transition: all 1s ease;
}
.noticiaprincipalindex figure:hover figcaption {
    background-color: rgb(2, 38, 2);
    top: 0;
    transition: all .3s ease;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.noticiaprincipalindex figcaption span {
    display: block;
    font-size: .75em;
    color: #ddd;
    margin-top: .2em;
}
.noticiasindex div .mosaiconoticiasindex {
    margin: .2em;
    display: flex;
    
}
.mosaiconoticiasindex figcaption {
    background-color: rgb(2, 38, 2);
    color: white;
    padding: .5em;
    line-height: 1em;
    font-size: .75em;

    /* para superponer el epígrafe sobre la foto */
    position: absolute;
    width: 100%;
    height: 100%;
    top: calc( 100% - 3.8em );
    
    transition: all 1s ease;
}
.mosaiconoticiasindex figcaption span {
    display: block;
    font-size: .75em;
    color: #ddd;
    margin-top: .2em;
}

    /*-----HEADER INDEX 2-----*/
#headerindex2 .logowebapp {
    display: flex;
    align-items: center;
}
#headerindex2 .logowebapp a {
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1.1em;
    font-weight: 700;
}
#headerindex2 .logowebapp a:hover {
    color: rgb(22, 114, 59);
}
#headerindex2 .fotoperfilindex {
    width: 5rem;
    display: block;
    border-radius: 200px;
    margin: auto;
    margin: 1em auto;
}
#headerindex2 nav .login #mipsesion {
    display: block;
    text-transform: uppercase;
    font-size: 1.1em;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 1em;
}
#headerindex2 #menu .login .miperfilsesion {
    display: block;
    text-align: center;
    margin-bottom: 1em;
}
#headerindex2 nav {
    background-color: rgb(22, 114, 59);
    color: white;

    position: fixed;
    right: -50vw;
    top: 3.8rem;
    height: 55vh;
    min-width: 50vw;

    transition: all .6s ease;
    z-index: 9998;
}
#headerindex2 nav.menuvisible {
    right: 0;
    transition: all .6s ease;
}
#headerindex2 .barracontenedora {
    padding: .5em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-image: url(../imagenes/navegador.png);
    background-size: cover;
    color: white;
}
#headerindex2 .material-icons {
    background: none;
}
#headerindex2 #menu li a {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-size: 1.3em;
}
#headerindex2 #menu li a:hover {
    background-color: rgb(18, 60, 35);
}
#headerindex2 #menu .miperfil h3 {
    font-size: .7em;
    text-transform: capitalize;
    text-decoration: underline;
}
#headerindex2 #menu div a{
    text-align: center;
}

/*-----VIVO INDEX 1 SUPERPOSICION-----*/
main #articuloindex2 {
    background-color: rgba(25, 25, 25, 0.21);
    border: solid rgba(128, 128, 128, 0.14) 1px;
    padding: .1rem .2rem 1rem .2rem;
}
#articuloindex2 > figure {
    margin: .5rem;
    display: flex;
    justify-content: center;
    cursor: pointer;
    
    /* para que cada "figure" sea origen de coordenadas de sus elementos contenidos */
    position: relative;
    /* para ocultar lo que "excede" sus límites */
    overflow: hidden;
}
#articuloindex2 > img {
    width: 100%;
    /* para que "desaparezca" el espacio que queda debajo de la imagen */
    display: block;
}
#articuloindex2 figcaption {
    background-color: rgb(2, 38, 2);
    color: white;
    padding: .5em;
    line-height: 1em;

    /* para superponer el epígrafe sobre la foto */
    position: absolute;
    width: 100%;
    height: 100%;
    top: calc( 100% - 3em );
    
    transition: all 1s ease;
}
#articuloindex2 figure:hover figcaption {
    background-color: rgb(2, 38, 2);
    top: 0;
    transition: all .3s ease;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#articuloindex2 figcaption span {
    display: block;
    font-size: .75em;
    color: #ddd;
    margin-top: .2em;
}




/*-----------------------------REGISTRO-----------------------------*/
#registro {
    margin: 1em;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#registro > a {
    color: green;
    text-transform: capitalize;
}
#registro h1 {
    text-transform: uppercase;
    text-align: center;
    font-size: 2em;
    margin: .5em 0em;
    padding: .3em;
    color: #053809;
    border-bottom: solid 2px #053809;
}
#registro h2 {
    text-transform: uppercase;
    border-bottom: solid #022602 2px;
    text-align: center;
    color: #022602;
    padding: .2em;
    margin: 1em 0em;
}
#registro .logineate {
    margin: 1em 2em;
    text-align: center;
}
#registro form label, #registro form input, #registro form button {
    display: block;
}
#registro form label {
    color: rgb(22, 114, 59);
    text-transform: uppercase;
    font-size: .8em;
    margin-top: 1.3em;
    margin-bottom:.2em;
    font-weight: 700;
}
#registro form input {
    padding: .5em;
    width: 100%;
    margin-bottom: 1em;
}
#registro form button {
    border: none;
    background-color: rgb(22, 114, 59);
    width: 7em;
    margin: auto;
    margin-bottom: 2em ;
    justify-content: center;
    box-shadow: .2em .2em .3em rgba(0, 0, 0, 0.26);
    border-radius: .4em;
    color: white;
    text-transform: uppercase;
    padding: .5em;
    font-size: 1em;
}
#registro form button:hover {
    color: #053809;
    background-color: white;
    border-radius: .4em;
    box-shadow: .2em .2em .3em rgba(0, 0, 0, 0.26);
}
#registro .iniciate {
   color: #053809;
    margin: 1em .5em; 
} 
#registro h4 {
    color: rgb(22, 114, 59);
    text-align: center;
    margin-top: 2em;
}
#registro .logineate a {
    text-decoration: none;
    background-color: rgb(22, 114, 59);
    width: 7em;
    margin: 1em auto;
    display: block;
    box-shadow: .2em .2em .3em rgba(0, 0, 0, 0.26);
    border-radius: .4em;
    color: white;
    text-transform: uppercase;
    padding: .5em;
    font-size: 1em;
}
#registro div p {
    text-align: center ;
}
#registro .sino {
    display: flex ;
    padding: .5em 3em
    
}
#registro .sino .sociospregunta label {
    text-align: center ; 
    margin: 0 ;
}
#registro .sino .sociospregunta {
    display: flex ;
    flex-direction: row ;
    margin: auto ;
    width: 3em ;
    margin-top: 1em ;
    padding: 
}
#registro .terminoscondiciones {
    background-color: rgba(208, 60, 60, 0);
    color: #000000;
    padding: 1em;
    text-align: center;
    margin: auto;
    border: none;
}

/*-----------------------------INICIO SESION-----------------------------*/
 /*idem registrarse*/







/*-----------------------------SUMATE-----------------------------*/
#mainsumate h1 {
    text-transform: uppercase;
    color: #053809;
    border-bottom: solid .1rem #053809;
    margin: .5em;
    font-size: 1.5em;
}
#mainsumate .promouno > img {
    margin: .5em;
    width: 95%;
    height: auto;
}
#mainsumate .promouno {
    background-color: rgba(128, 128, 128, 0.17);
}
#mainsumate .promouno .perfilrubensumate {
    display: flex;
    margin: 0em .5em 2em;
    padding: 0em .5em 1em;
    align-items: center;
}
#mainsumate .promouno .perfilrubensumate img {
    max-width: 35%;
    border-radius: 50%;
    margin-right: .5em;
    border:solid green 2.5px;
}
#mainsumate .promouno .perfilrubensumate div {
    flex-direction: column;
}
#mainsumate .promouno .perfilrubensumate div h4 {
    text-transform: uppercase;
    font-size: .8em;
    color:#053809; 
} 
#mainsumate .promouno .perfilrubensumate .linkssumate a {
    display: block;
    padding: .5em 2em;
    margin: .2em;
    background-color: rgb(22, 114, 59);
    text-align: center;
    box-shadow: .2em .2em .3em rgba(0, 0, 0, 0.26);
    border-radius: .4em;
    font-size: .8em;
    text-decoration: none;
    color: white;
    text-transform: uppercase;
    width: 70%;
    
}
#mainsumate .promouno .perfilrubensumate .linkssumate a:hover {
    color: #053809;
    background-color: white;
    border-radius: .4em;
    box-shadow: .2em .2em .3em rgba(0, 0, 0, 0.26);
}
#mainsumate .promouno .perfilrubensumate .linkssumate {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; 
}

#mainsumate .promodos > img {
    margin: .5em;
    width: 95%;
    height: auto;
}
#mainsumate .promodos {
    background-color: rgba(128, 128, 128, 0.17);
}
#mainsumate .promodos .perfilrubensumate {
    display: flex;
    margin: 0em .5em 2em;
    padding: 0em .5em 1em;
    align-items: center;
}
#mainsumate .promodos .perfilrubensumate img {
    max-width: 35%;
    border-radius: 50%;
    margin-right: .5em;
    border:solid green 2.5px;
}
#mainsumate .promodos .perfilrubensumate div {
    flex-direction: column;
}
#mainsumate .promodos .perfilrubensumate div h4 {
    text-transform: uppercase;
    font-size: .8em;
    color:#053809; 
} 
#mainsumate .promodos .perfilrubensumate .linkssumate a {
    display: block;
    padding: .5em 2em;
    margin: .2em;
    background-color: rgb(22, 114, 59);
    text-align: center;
    box-shadow: .2em .2em .3em rgba(0, 0, 0, 0.26);
    border-radius: .4em;
    font-size: .8em;
    text-decoration: none;
    color: white;
    text-transform: uppercase;
    width: 70%;
    
}
#mainsumate .promodos .perfilrubensumate .linkssumate a:hover {
    color: #053809;
    background-color: white;
    border-radius: .4em;
    box-shadow: .2em .2em .3em rgba(0, 0, 0, 0.26);
}
#mainsumate .promodos .perfilrubensumate .linkssumate {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; 
}


#mainsumate .datossumate {
    background-color: rgba(128, 128, 128, 0.17);
}
#mainsumate .datossumate h2 {
    background-image: url(../imagenes/navegador.png);
    background-size: cover;    
    color: white;
    text-transform: uppercase;
    padding: .5em;
    font-size: 1.2em;
    margin: 2em 0em 1em;;
}
#mainsumate .datossumate .datospadilla div {
    display: flex;
    flex-wrap: wrap;
    flex-grow: 1;
    flex-basis: 100%;
    justify-content: space-around;
}
#mainsumate .datossumate .datospadilla a {
    display: block;
    background-color: rgb(22, 114, 59);
    text-align: center;
    text-decoration: none;
    color: white;
    margin: 1.5em 0em;
    text-transform: uppercase;
    padding: .5em;
    box-shadow: .2em .2em .3em rgba(0, 0, 0, 0.26);
    border-radius: .4em;
    justify-content: center;
    font-size: 1em;
}
#mainsumate .datossumate .datospadilla {
    margin: 1em;
}
#mainsumate .datossumate p{
    font-size: .9em;
}
#mainsumate .datossumate p i {
    font-size: .9em;
}

#somecomponent {
    margin: auto;
}











/*-----------------------------FORMULARIOPROMO1,2-----------------------------*/
#registro {
    margin: 1em;
}
#registro > a {
    color: green;
    text-transform: capitalize;
}
#registro h1 {
    text-transform: uppercase;
    text-align: center;
    font-size: 2em;
    margin: .5em 0em;
    padding: .3em;
    color: #053809;
    border-bottom: solid 2px #053809;
}
#registro > .advertenciav {
    background-color: #d03c3c;
    color: #222222;
    padding: 1em;
    text-align: center;
    margin: .5em 0em 2em;
    border: solid grey 1px;
}
#registro > .advertenciav i {
    font-size: 1em;
}
#registro h2 {
    text-transform: uppercase;
    border-bottom: solid #022602 2px;
    text-align: center;
    color: #022602;
    padding: .2em;
    margin: 1em 0em;
}
#registro > div {
    margin: 0em 2em;
}
#registro form label, #registro form input, #registro form button {
    display: block;
}
#registro form label {
    color: rgb(22, 114, 59);
    text-transform: uppercase;
    font-size: .8em;
    margin-top: 1.3em;
    margin-bottom:.2em;
    font-weight: 700;
}
#registro form input {
    padding: .5em;
    width: 100%;
    margin-bottom: 1em;
}
#registro form button {
    border: none;
    background-color: rgb(22, 114, 59);
    width: 7em;
    margin: auto;
    margin-bottom: 2em ;
    justify-content: center;
    box-shadow: .2em .2em .3em rgba(0, 0, 0, 0.26);
    border-radius: .4em;
    color: white;
    text-transform: uppercase;
    padding: .5em;
    font-size: 1em;
}
#registro form button:hover {
    color: #053809;
    background-color: white;
    border-radius: .4em;
    box-shadow: .2em .2em .3em rgba(0, 0, 0, 0.26);
}
#registro h4 {
    color: rgb(22, 114, 59);
    text-align: center;
    margin-top: 2em;
}

#registro div p {
    text-align: center ;
}
#registro .sino {
    display: flex ;
    padding: .5em 3em
    
}
#registro .sino .sociospregunta label {
    text-align: center ; 
    margin: 0 ;
}
#registro .sino .sociospregunta {
    display: flex ;
    flex-direction: row ;
    margin: auto ;
    width: 3em ;
    margin-top: 1em ;
    padding: 
}

#registro #estudiante2 {
    margin-top: 3em;
}
#registro #mailpromo {
    margin-top: 3em;
    font-size: .8em;
}
#registro #aclaraciondatospromo {
     font-size: .8em;
    margin-top: .5em;
}






/*-----------------------------PERFIL DEL PROFE12-----------------------------*/
.todoprofesor {
    display: flex;
    align-items: center;
}
.todoprofesor {
    border-bottom: .1em solid grey;
    max-width: 85%;
    margin: 1.5em auto;
    padding-bottom: 1em;
}
.todoprofesor > div > img {
    display: block;
    border-radius: 10em;

}
.descripcionprofesor {
    display: block;
    margin-left: 1em;

}
.descripcionprofesor > h2 {
    font-size: .8em;
    text-transform: uppercase;
    color: #024616;
    margin-bottom: .3em;
}
.descripcionprofesor > h1 {
    font-size: 2.8em;
    line-height: .9em;
}
.ruben {
    font-size: 1em;
    max-width: 85%;
    margin: -.5em auto 1.5em auto;
    line-height: 1.5em;
}
.videoprofesor > video {
    display: block;
    max-width: 85%;
    height: auto;
    margin: auto auto 1.2em auto;

}
.spanprofesor {
    color: #022602;
    font-weight: 900;
}  
.volveratrasprofesor {
    text-decoration: underline;
    color: rgb(22, 114, 59);
    display: block;
    max-width: 85%;
    margin:1em auto;
}
.volveratrasprofesor:hover {
    color: black;
}


.botonruben ul {
    list-style: none;
 margin: 0em auto 1.8em auto;
    width: 40%;
}
.botonruben li {
    background-color: rgb(22, 114, 59);
    text-align: center;
    justify-content: center;
    box-shadow: .2em .2em .3em rgba(0, 0, 0, 0.26);
    border-radius: .4em;

}
.botonruben li a {
    display: block;
    font-size: 1em;
    text-decoration: none;
    padding: .5em;
    color: white;
    text-transform: uppercase;

}
.botonruben li a:hover {
    color: #053809;
    background-color: white;
    border-radius: .4em;
    box-shadow: .2em .2em .3em rgba(0, 0, 0, 0.26);
}







/*-----------------------------HISTORIA 1 2-----------------------------*/
#historia {
    margin: auto;
}
.imagen > img {
    display: block;
    margin: auto;
    max-width: 50%;
    padding-bottom: 2em;
}
.nosotros > h2, .actividades > h2, .competencias > h2 {
    font-size: 1.2em;
    color: white;
    text-transform: uppercase;
    margin-bottom: .5em;
    padding: .3em;
    padding-left: 1.4em;
    background-image: url(../imagenes/historia.jpg);
    background-size: cover;
}
.nosotros > p, .actividades > p, .competencias > p, .actividades ul {
    font-size: .9em;
    width: 85%;
    margin: auto;
    margin-top: 1.2em;
    margin-bottom: 1.2em;
}
.actividades > ul {
    list-style: none;
    font-size: .9em;
    margin: 0em auto 1.8em auto;
    color: #053809;
    justify-content: center;
    line-height: 1.8em;
}
.actividades ul li {
    border-bottom: .09em solid grey;
}
#historia span {
    font-weight: 700;
}
.facebookpadilla {
    text-decoration: none;
    color: black;
    text-decoration: none;
}
.facebookpadilla:hover {
    color: rgb(22, 114, 59);
}
.volveratrasnosotros {
    text-decoration: underline;
    color: rgb(22, 114, 59);
    display: block;
    max-width: 85%;
    margin: 1em auto;
}
.volveratrasnosotros:hover {
    color: black;
}









/*-----------------------------GALERIA 1 2-----------------------------*/
.galeria h1 {
    width: 85%;
    margin: .7em auto .5em auto;
    padding-bottom: .2em;
    text-transform: uppercase;
    font-size: 1.8em;
    color: #022602;
    text-align: center;
    border-bottom: .07em solid grey;
}
.subifoto {
    color: #053809;
    width: 80%;
    margin: auto;
    text-align: center;
    font-size: 1.2em;
}
form .subirarchivoform {
    display: block;
    background-color: rgb(219, 221, 220);
    max-width: 90%;
    overflow: hidden;
    height: auto;
    margin: auto;
    padding: .5em;
}
.subirarchivoform #upload {
    font-family: 'Roboto', sans-serif;
}
form .botondegaleria #uploaddos {
    display: block;
    color: white;
    text-transform: uppercase;
    background-color: rgb(22, 114, 59);
    text-align: center;
    padding: .7em;
    width: 50%;
    margin: auto;
    margin-top: 1em;
    box-shadow: .2em .2em .3em rgba(0, 0, 0, 0.26);
    border-radius: .4em;
}
.botondegaleria #uploaddos:hover {
    color: #053809;
    background-color: white;
    box-shadow: .2em .2em .3em rgba(0, 0, 0, 0.26);
}
.galeriados {
    margin: 0.1rem 1rem;
}
.galeriados h3 {
    font-size: 1.1em;
    margin: 1.5em auto 0.5em auto;
}
.volveratrasgaleria {
    text-decoration: underline;
    color: rgb(22, 114, 59);
    display: block;
    max-width: 85%;
    margin: 1em auto;
}
.volveratrasgaleria:hover {
    color: black;
}



/*--------ELEGIR CATEGORIA Y ADVERTENCIA ---------------*/
.advertencia {
    text-align: center;
    margin: auto;
    margin-bottom: 1.8em;
    margin-top: 1em;

    max-width: 80%;
    border: .08em solid grey;
    padding: .7em;
    font-size: .8em;
    background-color: #d03c3c;
    color: #222222;
}
.advertenciarecibido {
    text-align: center;
    margin: auto;
    margin-bottom: 1.8em;
    margin-top: 1em;

    max-width: 85%;
    border: .08em solid grey;
    padding: .7em;
    font-size: .8em;
    color: #053809;
}
.tipocategoria {
    text-align: center;
    margin: auto;
    font-size: 1em;
    margin-top: 1.2em;
    margin-bottom: .5em;
}
.divcategorias {
    display: flex;
    margin: auto;
    flex-wrap: wrap;
    margin-bottom: 1em;
    width: 80%;
    justify-content: space-between;

}
.divcategorias label {
    padding-right: .8em;
    text-transform: uppercase;
    color: rgb(22, 114, 59);
    font-weight: 900;
    font-size: .9em;
}
form .divcategorias {
    align-items: baseline;
}







/*-----------------------------TORNEOS 1 2-----------------------------*/
#torneos {
    width: 85%;
    margin: auto;
}
.volantaamf {
    color: #022602;
    font-size: .8em;
    text-transform: uppercase;
    margin-top: 2.5em;
    margin-bottom: .5em;
}
.tituloamf {
    font-size: 2em;
    line-height: 1em;
    margin-bottom: .5em;
    padding-bottom: .3em;
    border-bottom: .05em solid grey;
}
.escudoamfreglas {
    display: block;
    margin: auto;
    margin-top: .5em;
}
.introduccionfutsal {
    color: #022602;
    font-size: .8em;
    padding: 1em;
    text-align: center;
    margin-bottom: -.8em;
}
.escudofutsal {
    background-color: rgba(139, 147, 140, 0.34);
    padding: 1em;
    margin-bottom: 1.2em;
}
.reglas {
    list-style-position: inside;
    font-size: .9em;
}
.reglas > li {
    margin-bottom: 1em;
}
.botonesreglamento {
    display: flex;
    flex-wrap: wrap;
}
.botonesreglamento ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    margin: 0em auto 1.8em auto;
    width: 100%;
}
.botonesreglamento li {
    background-color: rgb(22, 114, 59);
    text-align: center;
    justify-content: center;
    box-shadow: .2em .2em .3em rgba(0, 0, 0, 0.26);
    border-radius: .4em;
    margin: auto;
    margin-top: 1em;
    flex-grow: 1;
}
.botonesreglamento li a {
    display: block;
    font-size: 1em;
    text-decoration: none;
    padding: .5em;
    color: white;
    text-transform: uppercase;
}
.botonesreglamento li a:hover {
    color: #053809;
    background-color: white;
    border-radius: .4em;
    box-shadow: .2em .2em .3em rgba(0, 0, 0, 0.26);
}






/*-----------------------------LA NOTICIA 1 2-----------------------------*/
#noticiaprincipal {
    width: 90%;
    margin: auto;
}
.linknoticia {
    text-decoration: none;
    color: black;
    text-decoration: none;    
}
.linknoticia:hover {
    color: rgb(22, 114, 59);
}
.noticiaprincipal > p {
    font-size: .9em;
    margin-bottom: .7em;
}
.masnoticias > img {
    width: 40%;
    height: auto;
    margin-right: .8em;
}
.masnoticias {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 1em;
}
.imagendelanoticia figcaption {
    font-size: .8em;
}
.imagendelanoticia > figcaption {
    color: #053809;
    margin-top: .4em;
}
.bajada {
    font-size: 1.3em;
}
.fecha, .bajadatitulo {
    min-width: 100%;
}

/* Style the search field */
.buscadornoticias input[type=text] {
    padding: .5em;
    margin: .8em auto 1em auto;
    font-size: .8em;
    border: .08em solid rgb(22, 114, 59);
    width: 70%;
    background: white;
}

/* Style the submit button */
.botondenoticias {
    background-color: rgb(22, 114, 59);
    text-align: center;
    width: 28%;
    padding: .5em;
    color:white;
    font-size: .8em;
    border: .08em solid rgb(22, 114, 59);
    border-radius: .3em;
    text-transform: uppercase;
    margin: auto;
}
.botondenoticias:hover {
    color: #053809;
    background-color: white;
    box-shadow: .2em .2em .3em rgba(0, 0, 0, 0.26);
}
.bajadadeltexto {
    width: 80%;
    font-size: .7em;
    padding-top: .3em;
}
.volanta {
    font-size: 1em;
    text-transform: uppercase;
    margin-top: 2em;
    margin-bottom: .5em;
    color: #053809;
}
.titulodelanoticia {
    font-size: 2.2em;
    line-height: 1em;
    margin-bottom: .2em;
}
.imagendelanoticia {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}
.imagendelanoticia > img {
    width: 100%;
    height: auto;
}
.noticiaprincipal .imagendelanoticia img:hover {
    opacity: 0.5;
    filter: alpha(opacity=50);
}
.noticiaprincipal > p {
    font-size: 1em;
    margin-bottom: .7em;
}
.titulomasnoticias {
    text-transform: uppercase;
    color: #053809;
    font-size: 1.5em;
    margin-top: 1em;
    border-top: .09em solid grey;
    padding-top: .8em;
    
}
.masnoticias {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 1em;
}
.masnoticias > img {
    width: 40%;
    height: auto;
    margin-right: .8em;
}
.bajadatitulo {
    line-height: 1em;
    margin-top: .2em;
    font-size: 1.3em;
}
.fecha {
    font-size: .8em;
}
.nuevasnoticias {
    display: flex;
    flex-direction: column;
}
.textonoticia {
    font-size: .8em;
}
.imagennota1 {
    width: 70%;
    display: block;
    margin: auto;
}
/* ------- NOTICIAS PALABRAS CLAVE------*/
.palabrasclave {
    padding-right: .4em;
}
.listapalabras {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    max-width: 100%;
    margin-top: .8em;
}
.listapalabras li {
    list-style: none;
    padding-top: .3em;

    padding-right: .6em;
    font-size: .9em;
}
.listapalabras li a {
    color: black;

}
.listapalabras li a:hover {
    color: rgb(22, 114, 59);
    font-weight: 900;
}










/*-----------------------------TERMINOS-----------------------------*/
#bodyindex1 #terminos {
    margin: 1% 10%;
}
#bodyindex1 #terminos h1 {
    text-transform: uppercase;
    text-align: center;
    font-size: 2em;
    margin: 0em 0em .5em 0em;
    padding: .3em;
    color: #053809;
    border-bottom: solid 2px #053809;
}
#bodyindex1 #terminos div {
    background-color: rgba(180, 176, 176, 0.13);
    padding: 1em;
    margin-top: .5em;
    border: 1px solid rgba(0, 0, 0, 0.26);
    border-radius: 20px;
}
#bodyindex1 #terminos div p {
    font-size: .8em;
}
#bodyindex1 #terminos div h2 {
    text-transform: uppercase;
    color: rgb(22, 114, 59);
    font-size: 1em;
    margin: 1.5em 0em .3em;
}
#bodyindex1 #terminos > a {
    color: #053809;
    display: block;
    padding: .5em 0em;
}

#bodyindex1 #terminos div h3 {
    text-align: center;
    color: #053809;
    margin: 1em;    
}
#bodyindex1 #terminos div a {
    display: block;
    padding: .5em 2em;
    margin: auto;
    background-color: rgb(22, 114, 59);
    text-align: center;
    box-shadow: .2em .2em .3em rgba(0, 0, 0, 0.26);
    border-radius: .4em;
    font-size: .8em;
    text-decoration: none;
    color: white;
    text-transform: uppercase;
    width: 70%;
}
#bodyindex1 #terminos div a:hover {
    color: #053809;
    background-color: white;
    border-radius: .4em;
    box-shadow: .2em .2em .3em rgba(0, 0, 0, 0.26);
}







/*-----------------------------PROMO ACEPTADA-----------------------------*/

#promoaceptada {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 50vh;
}
#promoaceptada h1 {
    text-transform: uppercase;
    color: #053809;
    border-bottom: solid #053809 2px;
    margin: 0 10% 1em;
    
}
#promoaceptada p {
    margin: .2em;
}
#promoaceptada a {
    display: block;
    margin: 1em auto;
    padding: .5em 2em;
    background-color: rgb(22, 114, 59);
    text-align: center;
    box-shadow: .2em .2em .3em rgba(0, 0, 0, 0.26);
    border-radius: .4em;
    font-size: .8em;
    text-decoration: none;
    color: white;
    text-transform: uppercase;
    width: 50%;
}
#promoaceptada a:hover {
    color: #053809;
    background-color: white;
    border-radius: .4em;
    box-shadow: .2em .2em .3em rgba(0, 0, 0, 0.26);
}







/*-----------------------------VIVO 12-----------------------------*/
#vivo2 #vivodelvivo {
    background-color: rgba(25, 25, 25, 0.21);
    border: solid rgba(128, 128, 128, 0.14) 1px;
    padding: .1rem .1rem .1rem .1rem;
}
#vivo2 #vivodelvivo #macroes video {
    width: 95vw;
    padding: .5em;
    align-items: center;
}

#vivo2 h1 {
    text-transform: uppercase;
    font-size: 2.5em;
    padding: .3em;
    padding-bottom: 0;
    color: #053809;
    border-bottom: solid #053809 .05em;
    width: 95%;
    margin: auto;
}

#vivo2 #chat {
    margin: .5em .5em .5em .5em; 
}
#vivo2 #chat h4 {
    font-weight: 700;
    padding: .5em;
    text-transform: uppercase;
    background-color: rgba(22, 114, 59, 0.64);
    margin: .2em 0em;
    box-shadow: 1px 1px 5px gray;
    color: white;
}
#vivo2 #chat p {
    height: 10em;
    padding: .5em;
    border: solid rgba(128, 128, 128, 0.35) .2px;
    background-color: white;
    color: #5b5b5b;
    font-size: .9em;
}

#vivo2 #chat form {
    background-color: rgba(128, 128, 128, 0.13);
    display: flex;
    justify-content: space-between;
}
#vivo2 #chat form input {
    background-color: white;
    border: none;
    width: 90%;
    padding: 1em;
    font-size: 1em;
}

#vivo2 #chat button {
   display: block;
    background-color: rgb(22,114,59);
    box-shadow: .2em .2em .3em rgba (0, 0, 0, 0.26);
    border: none;
    color: white;
    text-transform: uppercase;
    font-weight: 700;
    font-size: .9em;
    padding: 0em 1em;
}
#vivo2 #chat button:hover {
    background-color: white;
    color: rgb(22,114,59);
}








/*-----------------------------MI PERFIL-----------------------------*/
#miperfil h1 {
    text-transform: uppercase;
    color: #053809;
    border-bottom: solid #053809 2px;
    margin: .5em .5em;
    text-align: center;
}
#miperfil .datosmiperfil img {
    display: block;
    width: auto;
    height: 5rem;;
    border-radius: 200px;
    border: solid green 2px;
    margin: 0em 1em;
}
#miperfil .datosmiperfil {
    display: flex;
}
#miperfil .datosmiperfil h2 {
    text-transform: uppercase;
    color:rgb(22, 114, 59);
}
#miperfil .datosmiperfil h3 {
    text-transform: uppercase;
    font-size: .8em;
    color: rgb(0, 162, 65);
    margin: 1em;
}
#miperfil .datosmiperfil div div{
    display: flex;
    border-bottom: solid rgba(0, 0, 0, 0.09) 1px;
}
#miperfil .datosmiperfil p {
    margin: 1em 0em 0em;
    font-size: .7em;
}

#miperfil > h2 {
    font-size: 1em;
    text-transform: uppercase;
    margin: 1.5em .5em .2em;
    border-bottom: solid #053809 1px;
    color: #053809;
}
#miperfil > div {
    display: flex;
    margin: .5em;
    align-content: space-around;
}
#miperfil > div h3 {
    text-transform: capitalize;
    font-size: 1em;
    color: #433f3f;
    margin: 0 1em;
}

#miperfil form label, #miperfil form input {
    display: block;
    
}
#miperfil form div{
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 1em ;
    align-items: center ;
    
}
#miperfil form button {
    border: none;
    background-color: rgb(22, 114, 59);
    width: 7em;
    margin: auto;
    margin-bottom: 2em ;
    justify-content: center;
    box-shadow: .2em .2em .3em rgba(0, 0, 0, 0.26);
    border-radius: .4em;
    color: white;
    text-transform: uppercase;
    padding: .5em;
    font-size: 1em;
}

#miperfil > a {
    display: block;
    margin: 1em;
    color: #053809;
}
#miperfil .botondatos {
    display: block;
    border: none;
    background-color: rgb(22, 114, 59);
    width: 7em;
    margin: 1em auto;
    box-shadow: .2em .2em .3em rgba(0, 0, 0, 0.26);
    border-radius: .4em;
    color: white;
    text-transform: uppercase;
    padding: .5em;
    font-size: 1em;
    text-decoration: none;
    text-align: center;   
}
#miperfil .botondatos:hover {
    color: #053809;
    background-color: white;
    border-radius: .4em;
    box-shadow: .2em .2em .3em rgba(0, 0, 0, 0.26);
}



/*-----------------------------FIXTURE-----------------------------*/
.fixture {
    margin: auto;
    width: 95%;
    height: auto; 
}
.fixture h1 {
    font-size: 2em;
    line-height: 1em;
    margin: 1rem .6rem 1rem .6rem;
    padding-bottom: .3rem;
    text-align: left;
    border-bottom: .05em solid grey;   
}
.fixture h3 {
    font-size: 1em;
    margin: 1rem .6rem 1rem .6rem;
    text-transform: uppercase
}
.partidofecha {
    background-color: rgb(22, 114, 59);
    text-transform: uppercase;
    font-size: .7em;
    padding: .5em;
    color: white;
    text-align: center; 
}
.fixture .partido {
    background-color: #d6d6d6;
    padding: .7em 1em .7em 1em;
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    align-items: center;
    text-align: center   
}
.fixture .partido > * {
    width: 30%;
}
.fixture .partido > p {
    font-size: 2em;     
}
.fixture .equipo {
    padding: 0;
    font-size: .8em;
    font-weight: 700;
    text-transform: uppercase;
}
.fixture img {
    height: 4em;
    width: auto;
}
.fixture .equipo p {
    padding-top: .5em;   
}
.partidohora {
    background-color: #ebebeb;
    box-shadow: 0 .125em .125em 0 #8d8b8b;
    font-size: 1em;
    font-weight: 700;
    text-align: center;
    padding: .5em;
    margin-bottom: 1em
}
.bloques {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.bloques section {
    flex-grow: 1;
    flex-basis: 45%;
    margin: 0 .6rem 0 .6rem;
}








/*-----------------------------POSICIONES-----------------------------*/
.posiciones {
    margin: auto;
    width: 95%;
    height: auto;
}
.posiciones h1 {
    font-size: 2em;
    line-height: 1em;
    margin: 1rem .6rem 1rem .6rem;
    padding-bottom: .3rem;
    text-align: left;
    border-bottom: .05em solid grey;   
}
.posiciones h3 {
    font-size: 1em;
    margin: 1rem .6rem 1rem .6rem;
    text-transform: uppercase
}
.tabla {
    background-color: #d6d6d6;
    font-size: .6em;
    text-align: center;
    width: 95%;
    border-collapse: collapse;
    text-transform: uppercase;
    margin: 0 .6rem 0 .6rem;
}
.tabla .barrasuperior {
    background-color: #ebebeb;
    box-shadow: 0 .25em .25em 0 #8d8b8b 
}
.equipo {
    padding-right: 6em
}
th {
    padding: .5em
}
td {
    padding: .7em .5em .7em .5em
}
.estadisticas { 
    font-size: 1.2em;
    font-weight: 700;
}
.estadisticaspadilla { 
    font-size: 1.2em;
    font-weight: 700;
    background-color: rgb(125, 198, 154)
}
.escudoynombre {
    display: flex;
    align-items: center;
}
.escudoynombre img {
    padding-right: .5em;
    height: auto;
    width: 2em
}








/*-----------------------------RESERVAS-----------------------------*/
.reserva {
    margin: auto;
    width: 90%;
    height: auto;  
}
.reserva .reservatucancha h1 {
    font-size: 2em;
    line-height: 1em;
    margin: 2rem .6rem 1rem .6rem;
    padding-bottom: .3rem;
    text-align: left;
    border-bottom: .05em solid grey;   
}
.reserva h3 {
    text-align: center;
    font-size: 1em;
    margin: 1em; 
}
.mes {
    display: flex;
    align-items: center;
    justify-content: center;   
}
.calendario {
    background-color: #d6d6d6;
    font-size: .8em;
    text-align: center;
    width: 100%;
    border-collapse: collapse;
    text-transform: uppercase; 
}
.calendario .dias {
    background-color: #ebebeb;
    box-shadow: 0 .25em .25em 0 #8d8b8b; 
}
.calendario {
    font-weight: 700;  
}
.calendario .disponible a {
    background-color: rgb(22, 114, 59);
    text-decoration: none;
    color: white;
    display: block;
    padding: .5rem 0 .5rem 0;
    width: 1.7rem;
    border-radius: .25em;  
}
.calendario .disponible a:hover {
    color: rgb(22, 114, 59);
    background-color: white;   
}
.octubre {
    background-color: rgba(170, 173, 171, 0.50);
    font-weight: 400; 
}
.nulo {
    font-weight: 400
}
.calendario .lleno a {
    background-color: #ff4242;
    text-decoration: none;
    color: white;
    display: block;
    padding: .5rem 0 .5rem 0;
    width: 1.7rem;
    border-radius: .25em;  
}
.reserva ul {
    padding: 1rem 0 0 1rem;
}
.reserva ul li {
    padding: 1rem 0 0 0;
}
.reserva h3 {
    font-size: 1em;
    margin: 1rem .6rem 1rem .6rem;
    text-transform: uppercase;
    text-align: left 
}
.horarioreservado1, .horarioreservado2, .horarioreservado3{
    display: flex;
    justify-content: space-between;
    background-color: #ff4242;
    color: white;
    padding: .5rem;
    margin: 1rem .5rem 1rem .5rem;
    font-weight: 700;
    font-size: .8em;
    border-radius: .25em;
}
.horarioreservado3 {
    background-color: #049142;
    box-shadow: 0 .25em .25em 0 #8d8b8b;
    margin-bottom: 3rem
}
.horarioreservado3 a{
    color: white;
    text-decoration: none
}
.horarioreservado3:hover {
    background-color: rgb(25, 188, 90)
}
.horarioreservado p {
    font-size: 1.2em;
}
.reserva .formulario .horario {
    display: flex;
    justify-content: space-between;
    margin-top: 2rem;
}
.reserva .formulario h4 {
    font-size: 1.5rem;
    margin: .5rem;
    border-bottom: none;
}
#hora {
    width: 6em;
    height: 3em;
    text-align: center;
    border-radius: .25em;
    margin-right: .5rem;
    margin-top: .25rem
}
.reserva .formulario .suelo {
    margin: 1em 0 1em .5em;   
}
.reserva .formulario .suelo .tipodecancha { 
    margin: 1em 0 1em 0; 
}
.reserva .formulario button {
    display: block;
    color: white;
    text-transform: uppercase;
    background-color: rgb(22, 114, 59);
    text-align: center;
    padding: .7em;
    width: 12em;
    margin: auto;
    margin-top: 2em;
    box-shadow: 0.2em 0.2em 0.3em rgba(0, 0, 0, 0.26);
    border-radius: .4em;
}
.reserva h1.felicitaciones {
    font-weight: 700;
    text-align: center;
    border-bottom: none;
}
.reserva .parrafo {
    margin: 1rem 0 2rem .5rem;   
}
.reserva section > a {
    display: block;
    background-color: rgb(22, 114, 59);
    display: block;
    font-size: 1em;
    text-decoration: none;
    padding: .5em;
    color: white;
    text-transform: uppercase;
    text-align: center;
     box-shadow: 0.2em 0.2em 0.3em rgba(0, 0, 0, 0.26);
    border-radius: .4em;
    margin: auto;
    width: 80%
}
.reserva section >a:hover {
    background-color: white;
    color: rgb(22, 114, 59);
    border-radius: .4em;
    box-shadow: 0.2em 0.2em 0.3em rgba(0, 0, 0, 0.26);
}
.volverpantallaatras {
    text-decoration: underline;
    color: rgb(22, 114, 59);
    display: block;
    max-width: 85%;
    margin: 1em auto;
}






























/*-------- FOOTER -------------*/

footer {
    background-color: rgb(18, 60, 35);
    color: white;
    font-size: .75em;
    padding: 1.2em;
    text-align: left;
    margin-top: 4em;
}









/*  ---------------------------------
              puntos de quiebre (breakpoints)
                para el diseño responsive
            ----------------------------------  */
/*-----------------------------NAVEGADOR-----------------------------*/
@media (min-width: 35em){
    
    /*INDEX1*/
    #headerindex1 nav {
        background-color: rgba(18, 60, 35, 0);
        position: relative;
        right: auto;
        top: auto;
        height: auto;
        min-width: auto;
    }
    #llamamenu {
        display: none;
    }
    #menu {
        display: flex;
    }
    #menu ul {
        display: flex;
    }
    #menu div i {
        font-size: 2rem;
    }
    #menu div i:hover {
        background-color: rgb(22, 114, 59);
        border-radius: 200rem;
        cursor: pointer;
    }
    #menu ul {
        align-items: center;
        margin: 0em;
        padding: 0em;
    }
    #headerindex1 #menu li a {
        font-size: 1.1em;
    }
    #menu ul li {
        padding: .5rem;
        border-top: 0rem solid;
        width: 150%;
        margin: 0rem .5rem;
    }
    #menu ul li:hover {
        background-color: rgb(22, 114, 59);
        border-radius: 200rem;
    }
    #headerindex1 #menu li a:hover {
        background-color: rgba(18, 60, 35, 0);
    }
    #menu .usuarioindex1 div a {
        display: none;
    }
    #logo {
    width: 3rem;
}

    
    
    
    /*INDEX2*/
    #headerindex2 nav {
        background-color: rgba(18, 60, 35, 0);
        position: relative;
        right: auto;
        top: auto;
        height: auto;
        min-width: auto;
    }
    #headerindex2 #menu li a:hover {
        background-color: rgba(18, 60, 35, 0);
    }
    #headerindex2 #menu .login .miperfilsesion {
        display: none;
    }
    #headerindex2 #menu #mipsesion {
        display: none;
    }
    #headerindex2 .fotoperfilindex {
        margin: 0em;
    }
    #headerindex1 .logowebapp a {
        font-size: 1em;
    }
}

@media (min-width: 90em) {
    
    /*INDEX1*/
    #headerindex1 #menu ul li a {
        font-size:1em;
    }
    #menu div i {
        font-size: 4rem;
    }
    
    /*INDEX2*/
    #headerindex2 #menu ul li a {
        font-size:1em;
    }
    
}


/*-----------------------------INDEX-----------------------------*/
@media (min-width: 35em) {
    
    /*VIVO*/
    main #articuloindex1 {
    background-color: rgba(25, 25, 25, 0.21);
    border: solid rgba(128, 128, 128, 0.14) 1px;
    padding: 1em;
}
    #articuloindex1 figcaption {
        width: 100%;        
}      
    #articuloindex1 figure {
        width: 80%;
        margin: auto;
    }    
}

@media (min-width: 40em) {
    
    /*VIVO*/
    main #articuloindex1 {
        background-color: rgba(25, 25, 25, 0.21);
        border: solid rgba(128, 128, 128, 0.14) 1px;
        padding: 1em;
}
    #articuloindex1 figcaption {
        width: 100%;        
}
     #articuloindex1 figure {
        width: 80%;
        margin: auto;
    }
    
    /*NOTICIAS*/ 
    .noticiasindex .bloquenoticiasindex{
        margin: 0 5%;
    }
    .noticiasindex .bloquenoticiasindex {
        display: flex;
    }
    .noticiasindex .mosaiconoticiasindex, 
    .noticiasindex .noticiaprincipalindex{
        flex-basis: 1;
        flex-wrap: wrap;
    }
    .noticiasindex .mosaiconoticiasindex {
        flex-direction: column;
        justify-content: center;
    }
}

@media (min-width: 50em) {
    /*VIVO*/
    main #articuloindex1 {
        background-color: rgba(25, 25, 25, 0.21);
        border: solid rgba(128, 128, 128, 0.14) 1px;
        padding: 1em;
}
    #articuloindex1 figcaption {
        width: 81%;        
} 
    #articuloindex1 figure {
        width: 80%;
        margin: auto;
    }
}
    
@media (min-width: 90em) {
    /*VIVO*/
    main #articuloindex1 {
        background-color: rgba(25, 25, 25, 0.21);
        border: solid rgba(128, 128, 128, 0.14) 1px;
        padding: 1em;
}
    #articuloindex1 figcaption {
        width: 57%;        
}
    #articuloindex1 figure {
        width: 80%;
        margin: auto;
    }
    
     /*NOTICIAS*/ 
    .noticiasindex .bloquenoticiasindex{
        margin: 0 10%;
    }
}

@media (min-width: 120em) {
    /*VIVO*/
    main #articuloindex1 {
        background-color: rgba(25, 25, 25, 0.21);
        border: solid rgba(128, 128, 128, 0.14) 1px;
        padding: 1em;
}
    #articuloindex1 figcaption {
        width: 50%;        
} 
    #articuloindex1 figure {
        width: 80%;
        margin: auto;
    }
}


/*-----------------------------TERMINOS-----------------------------*/
@media (min-width: 50em) {
    #terminos div p {
        font-size: 5em;
    }
}


/*-----------------------------SUMATE-----------------------------*/
@media (min-width: 40em) {
    #responsivesumate{
        display: flex;
    }
    #mainsumate {
        margin: 0 5%; 
    }
    #mainsumate h1 {
    font-size: 2em;
    text-align: center;
    }
    #mainsumate #gralsumate > .promouno .perfilrubensumate {
        width: 50%;
    }
    #responsivesumate .promodos{
        width: 128%;
    }
}

@media (min-width: 50em){
    #mainsumate h1 {
    font-size: 3em;
    text-align: center;
    }
    #mainsumate {
        margin: 0 5%; 
    }
    #responsivesumate{
        display: flex;
    }
    #responsivesumate .promodos{
        width: 103%;
    }
    #mainsumate #gralsumate > .promouno .perfilrubensumate {
        width: 50%;
    }
    #mainsumate > section .perfilrubensumate{
        width: 50%;
    }
    #responsivesumate .perfilrubensumate{
        padding: 0;
    }
    #mainsumate .contenidosumate {
        display: flex;
    }
    #mainsumate .contenidosumate .datossumate {
        margin: 0em 1em 0em 3em;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        height: 50%;
        background-color: white;
        border: solid rgba(128, 128, 128, 0.38) 1px;
    }
    #mainsumate .contenidosumate .datossumate .adentrodatossumate {
        font-size: 1.5em;
    }  
    #mainsumate .contenidosumate .datossumate .adentrodatossumate .datospadilla div a {
        width: 50%;
        font-size: .7em;
        margin: .5em 15%;
    }
    
    #responsivesumate .promodos{
        width: 132%;
    }
    #mainsumate .contenidosumate .datossumate .adentrodatossumate {
        font-size: 1em;
    }  
    #mainsumate .contenidosumate .datossumate {
        width: 30%;
        margin: .2em;
    }
}

@media (min-width: 90em) {
    #responsivesumate .promodos{
        width: 95%;
    }
    #mainsumate .contenidosumate .datossumate .adentrodatossumate {
        font-size: 1.4em;
    }  
    #mainsumate .contenidosumate .datossumate {
        width: 40%;
        margin: .2em;
    }
}


/*-----------------------------PERFIL DEL PROFE-----------------------------*/
@media (min-width: 35em) {
    
    #perfildelprofesor {
        width: 80%;
        margin: auto;
    } 
    .todoprofesor {
        display: flex;
        flex-direction: column;
        align-items: center;
    } 
    .descripcionprofesor > h2 {
        font-size: 1.3em;
        text-align: center;
        margin-top: 1.5em;
        margin-bottom: .5em;
    }
    .descripcionprofesor > h1 {
        font-size: 2.8em;
        text-align: center;
    }
    .ruben {
        font-size: 1.1em;
        max-width: 59%;
        margin: 2em auto;
        background-color: #ccc8c8;
        padding: 2em;
    }
    .videoprofesor > video {
        margin: 0em auto 1.8em auto;
    }
    .descripcionprofesor {
        margin: auto;
    }
    .volveratrasprofesor {
        font-size: 1.2em;
        max-width: 80%;
        margin:3em auto 0em auto;}
    .volveratrasprofesor:hover {
        color: black;
    }
    
}

@media (min-width: 50em) {
    .botonruben ul {
        width: 18%;
}    
}

/*-----------------------------FORMULARIO PROMO-----------------------------*/
@media (min-width: 35em){
    #registro {
        display: block;
        width: 50%;
        margin: auto;
        margin-top: 1em;
    }
}


/*-----------------------------HISTORIA-----------------------------*/
@media (min-width: 50em) {
    .volveratrasnosotros {
        max-width: 50%;
        margin: 1.5em auto 0em auto;
    }
    .imagen > img {
        max-width: 100%;
        padding-top: 1.5em;
        padding-bottom: 2em;
    }
    .nosotros > h2, .actividades > h2, .competencias > h2 {
        font-size: 1.5em;
        text-align: center;
        margin-bottom: 1em;
        padding: .2em;
    }
    .nosotros > p, .actividades > p, .competencias > p, .actividades ul {
        font-size: 1em;
        width: 50%;
        line-height: 1.3em;
        margin-top: 1.5em;
        margin-bottom: 1.5em;
    }
    .actividades > ul {
        font-size: 1em;
        margin: 0em auto 1.8em auto;
        text-align: center;
        line-height: 2em;
    }
}


/*-----------------------------GALERIA-----------------------------*/
@media (min-width: 30em) {
    form .subirarchivoform {
        max-width: 80%;
    }
    form .botondegaleria #uploaddos {
        width: 30%;
    }
    .advertencia, .advertenciarecibido {
        max-width: 80%;
    }
    .divcategorias {
        width: 70%;
    }
    .divcategorias label {
    padding-right: 1.7em;
    }
}

@media (min-width: 50em) {
    form .subirarchivoform {
        max-width: 60%;
    }
    form .botondegaleria #uploaddos {
        width: 20%;
    }
    .advertencia, .advertenciarecibido {
        max-width: 60%;
    }
    .divcategorias {
        width: 40%;
    }
    .divcategorias label {
     padding-right: 1.5em;
    }
}

@media (min-width: 60em) {
    form .subirarchivoform {
        max-width: 35%;
    }
    form .botondegaleria #uploaddos {
        width: 18%;
    }
    .advertencia, .advertenciarecibido {
        max-width: 35%;
        padding: .8em;
        font-size: .95em;
    }
    .tipocategoria {
        margin-top: 1.4em;
    }
    .divcategorias {
        width: 35%;
    }
    .divcategorias label {
        padding-right: 2em;
    }
    .volveratrasgaleria {
    max-width: 80%;
    margin-top: 2em;
    margin-bottom: -1em;
    font-size: 1.2em;
}
    .galeria h1 {
        width: 80%;
        margin: 1.5em auto .5em auto;
        font-size: 2em;
}
    .subifoto {
        width: 70%;
        margin-bottom: 1.2em;
        font-size: 1.4em;
}
    .galeriados h3 {
        font-size: 1.4em;
        padding: .2em;
}
    .galeriados {
        max-width: 80%;
        margin: auto;
}
    .galeriados div img {
        margin: auto;
        padding: .2em;
}
    .subirarchivoform {
        max-width: 35%;
        height: auto;
        margin: auto;
        text-align: center;
}
    .subirarchivoform #upload {
        font-size: .9em;
}
    .botondegaleria #uploaddos {
        width: 20%;
}
}

/*-----------------------------TORNEOS-----------------------------*/
@media (min-width: 27em) {
    .botonesreglamento ul {
        flex-wrap: wrap;
        width: 100%;
    }
    .botonesreglamento li {
        margin: .8em 0 0 1em;
    }
}

@media (min-width: 48em) {
    #torneos {
        width: 60%;
    }
    .torneo > h1 {
        font-size: 2.7em;
    }
    .escudofutsal > p {
        max-width: 70%;
        text-align: center;
        margin: auto;
        font-size: .9em;
        line-height: 1.3em;
        padding-top: 1.5em;
    }
    .reglas > li {
        font-size: 1.2em;
        line-height: 1.1em;
    }
    .reglas {
        margin-bottom: 2em;
    }
    .botonesreglamento ul {
        flex-wrap: wrap;
        width: 40%;
    }
    .botonesreglamento li {
        margin: .8em 0 0 1em;
        box-shadow: .2em .3em .4em rgba(0, 0, 0, 0.26);
    }
}


/*-----------------------------VIVO 12-----------------------------*/
@media (min-width: 35em) {
    #macroes {
        display: flex;
    }
    #vivo2 h1 {
        text-align: left;
        width: 95%;
        font-size: 3.5em;
    }
    #macroes video{
        max-width: 60%;
        margin: auto;
    }
    #vivo2 #chat {
        margin: auto;
        margin: 0em 1em
    }
    #chat {
        width: 50%;
        display: flex;
        flex-direction: column;
    }
    #chat h4 {
        font-size: 1.5em;
    }
    #chat p {
        font-size: 2em;
        height: 5em;
    }
    #chat form input {
        font-size: 2em;
    } 
}


/*-----------------------------LANOTICIA 12-----------------------------*/
@media (min-width: 30em) {
   .bajadadeltexto {
        font-size: .85em;
        padding-top: .4em;
    }
        /* Style the search field */
    .buscadornoticias input[type=text] {
        padding: .5em;
        margin: 1em auto; 
    }
}

@media (min-width: 50em) {
    #noticiaprincipal {
        width: 80%;
        margin: auto;
    }
    .volanta {
        font-size: 1.5em;
    }
    .titulodelanoticia {
        font-size: 2.7em;   
    }
    .bajada {
        font-size: 1.8em;
        width: 80%;
    }
    .imagendelanoticia > img {
        width: 80%;
        height: auto;
    }
    .imagendelanoticia > figcaption {
        font-size: 1em;
    }
    .noticiaprincipal > p {
        font-size: 1.1em;
        width: 80%;
    }
    .masnoticias > img {
        width: 20%;
        height: auto;
    }
    .fecha, .bajadatitulo {
        width: 80%;
    }
    .fecha {
        font-size: 1.5em;
    }
    .bajadatitulo {
        font-size: 1.8em;
    } 
    .bajadadeltexto {
        width: 60%;
        font-size: 1em;
        padding-top: .4em;
}
}

@media (min-width: 80em) {
    .titulodelanoticia {
        font-size: 3.2em;
        max-width: 80%;
    }
    .imagendelanoticia > figcaption {
        font-size: 1.3em;
    }
    .noticiaprincipal > p {
        font-size: 1.5em;
        width: 80%;
    }
    .fecha {
        color: #022602;
        font-size: 1.3em;
    }
    .noticiaprincipal > p {
        font-size: 1.4em;
        margin-bottom: 2em;
    }
    .noticiaprincipal {
        width: 90%;
    }
    figure .imagendelanoticia {
        max-width: 100%;
    }
    #noticiaprincipal {
        display: flex;
    }
    .titulomasnoticias {
        font-size: 2em;
        margin-bottom: .2em;
        padding-bottom: .5em;
        margin-top: 1em;
        border-top: none;
        border-bottom: .09em solid grey;
    }
    .contenedornoticias {
        display: flex;
        flex-direction: column;
    }
    .masnoticias > img {
        min-width: 35%;
        height: auto;
        margin-right: 1.3em;
    }
    .masnoticias {
        margin-bottom: 2em;
    }
    .contenedornoticias {
        background-color: #dbdbdb;
        padding: 1.5em;
        margin-top: 3em;
        margin-bottom: 3em;
    }
    .bajadadeltexto {
        width: 90%;
        font-size: .9em;
        padding-top: .4em;
    }
}

@media (min-width: 85em) {
    .titulodelanoticia {
        font-size: 2.5em;
        max-width: 80%;
    }
    .imagendelanoticia > figcaption {
        font-size: 1em;
    }
    .noticiaprincipal > p {
        font-size: .5em;
        width: 80%;
    }
    .fecha {
        color: #022602;
        font-size: 1em;
    }
    .noticiaprincipal > p {
        font-size: 1.08em;
        line-height: 1.1em;
        margin-bottom: 1em;
    }
    .noticiaprincipal {
        width: 90%;
    }
    figure .imagendelanoticia {
        max-width: 100%;
    }
    #noticiaprincipal {
        display: flex;
    }
    .titulomasnoticias {
        font-size: 1.8em;
        margin-top: 1em;
        margin-bottom: 0em;
        border-bottom: .09em solid grey;
    }
    .contenedornoticias {
        display: flex;
        flex-direction: column;
    }
    .masnoticias > img {
        min-width: 30%;
        height: auto;
        margin-right: 1.3em;
    }
    .masnoticias {
        margin-bottom: 2em;
    }
    .contenedornoticias {
        background-color: #dbdbdb;
        padding: 2em;
        margin-top: 3em;
        margin-bottom: 3em;
    }
    .bajadatitulo {
        font-size: 1.2em;
    }
    .volanta {
        font-size: 1em;
    }
    .bajadadeltexto {
        width: 80%;
    }
    /* Style the search field */
    .buscadornoticias input[type=text] {
        margin: 1em auto;
          width: 60%;
    }
    /* Style the submit button */
    .botondenoticias {
        margin-left: .4em;
}   
}

/* ------- NOTICIAS PALABRAS CLAVE------*/
@media (min-width: 30em) {
    .listapalabras {
        max-width: 90%;
    }
}

@media (min-width: 50em) {
    .listapalabras {
        max-width: 80%;
    }
}

@media (min-width: 85em) {
    .listapalabras {
        max-width: 70%;
        margin-bottom: 2em;
        margin-top: 1em;
    }
}


/*-----------------------------FIXTURE-----------------------------*/
@media (min-width: 50em) {
    .fixture h1 {
        font-size: 2.7em;
        margin: 1rem .6rem 1rem .6rem;
    }  
    .fixture h3 {
        font-size: 1.5em;
        margin: 1rem .6rem 1rem .6rem;
    }
    
}

@media (min-width: 80em) {
    .bloques section {
        flex-grow: 1;
        margin: .5rem;
        max-width: 23%;
    } 
    .fixture h1 {
        font-size: 3em;
        margin: 1.5rem .6rem 1.5rem .6rem;     
}
    .fixture h3 {
        font-size: 1.8em;
        margin: 2rem .6rem 1rem .6rem;
}
}


/*-----------------------------POSICIONES-----------------------------*/
@media (min-width: 25em) {
    .posiciones {
        max-width: 100%;
    }
    .posiciones h1 {
    font-size: 2.7em;
    margin: 1rem .6rem 1rem .6rem;
    }
    .posiciones h3 {
    font-size: 1.5em;
    margin: 1rem .6rem 1rem .6rem;
    }   
}

@media (min-width: 35em) {
    .posiciones h1 {
        margin: 1rem 1.8rem 1rem .6rem;
    }
    .tabla {
        font-size: .8em;
    }
    .posiciones {
        margin-left: 1.5rem
}
}

@media (min-width: 50em) {
   .posiciones {
        margin-left: 2.5rem
} 
   .posiciones h1 {
    margin: 1rem 2.5rem 1rem .6rem;
    } 
}

@media (min-width: 80em){
    .tabla {
    font-size: 1em;
}  
    .posiciones {
        margin: 0 1.5rem 0 3.5rem;
    }
    .posiciones h1 {
        font-size: 3em;
        margin: 1.5rem 3.5rem 1.5rem .6rem;     
}
    .posiciones h3 {
        font-size: 1.8em;
        margin: 2rem .6rem 1rem .6rem;
}
    
}

@media (min-width: 100em) {
    .posiciones {
        margin-left: 7rem
}
    .posiciones h1 {
        font-size: 3em;
        margin: 1.5rem 6.5rem 1.5rem .6rem;  
}
    .tabla {
        font-size: 1.5em;
    }   
}


/*-----------------------------RESERVAS-----------------------------*/
@media (min-width: 25em) {
    .reserva {
        max-width: 80%;   
    }
    .reserva .reservatucancha h1 {
        font-size: 2.4em;
        margin: 2rem .6rem 1rem .6rem;
    }
    .reserva .reservatucancha h3 {
        font-size: 1.5em;
        margin: 1rem .6rem 1rem .6rem;
    }
    .calendario .lleno a, .calendario .disponible a  {
        margin-left: .25rem;    
    }
    .reserva .formulario .suelo  {
        justify-content: center;
    }
    .reserva .formulario .suelo input  {
        margin-right: 1rem;     
    }
    .reserva .formulario .suelo label  {
        margin-right: 1rem;     
    }
    .reserva h2 {
    margin: 2rem 0 1rem 0;  
}
}

@media (min-width: 35em) {
    .calendario .lleno a, .calendario .disponible a  {
    margin-left: .5rem;    
}
    .reserva {
        max-width: 50%;   
    }
    .reserva .reservatucancha h1 {
    margin: 2rem 1.8rem 1rem .6rem;
    }
    .reserva section > a {
    width: 60%;
}
}

@media (min-width: 50em) {
    .calendario .lleno a, .calendario .disponible a  {
    margin-left: 1rem;    
}
    .reserva {
        max-width: 50%;   
    }
    .reserva .reservatucancha h1 {
    font-size: 2.7em;
    margin: 2rem .6rem 1rem .6rem;
}
    .reserva section > a {
    width: 50%;
}
    .volverpantallaatras {
    max-width: 80%;
    margin-top: 2em;
    margin-bottom: -1em;
    font-size: 1.2em;
    }
}

@media (min-width: 80em) {
    .reserva {
        max-width: 40%;   
    }
    .reserva .reservatucancha h1 {
        font-size: 3em;
        margin: 2.5rem .5rem 1.5rem .6rem;     
}
    .reserva .reservatucancha h3 {
        font-size: 1.8em;
        margin: 2rem .6rem 1rem .6rem;
}
    .calendario .lleno a, .calendario .disponible a  {
        margin-left: 1.25rem;    
    }
    .reserva section > a {
        width: 40%;
}
}

@media (min-width: 100em) {
    .reserva {
        max-width: 30%;   
    }
    .calendario .lleno a, .calendario .disponible a  {
        margin-left: 2.1rem;    
    }
    .reserva .reservatucancha h1 {
        font-size: 3em;
        margin: 3.5rem .5rem 1.5rem .6rem;
    }
    .reserva section > a {
        width: 50%;
}      
}


/*------------FOOTER------------*/
@media (min-width: 90em) {
   footer {
        font-size: 1em;
    } 
}