@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');

@import url('https://fonts.googleapis.com/css?family=Dosis&display=swap');

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+HK&display=swap')

.body {
    font-family: 'Noto Sans HK', Dosis, sans-serif;
    box-sizing: border-box;
    list-style: none;
}

.inicio{
    width: 100%;
    z-index: 0
}

header {
    background: rgba(0,135,68,1);
    background: -webkit-linear-gradient(-45deg, rgba(0,135,68,1) 35%, rgba(17,150,134,1) 62%, rgba(41,170,226,1) 100%);
    width: 100%;
    position: fixed;
    z-index: 950;
    height: 10em;
    margin-top:0em; 
}

footer {
    width: 100%
}

.logo {
    margin-left: 11em;
    position: absolute;
    margin-top: -6.5em;

}

.menuhamburguesa {
    list-style: none;
    width: 100%;
    background-color: #29ABE2;
    position: fixed;
    z-index: 999;
    overflow: hidden;
    height: 0;
    transition: all 0.7s ease
}


.menuhamburguesa ul{
    display: flex;
    list-style: none;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 0;
    width: 100%;
    
    }

.menuhamburguesa ul li{
    width: 33%;
    flex-direction: column;
    text-align: center;
    list-style: none;
    width: 100%;
    background-color: #29ABE2;
    height: 1.5em;
    padding-top: 15%;
    padding-bottom: 15%;
    height: 50%
    
    
    }
.menuhamburguesa ul li a{
    color: white;
    font-family: 'Dosis';
    justify-content: center;
    align-items: center;
    padding-top: 15%;
    padding-bottom: 15%;
}

.menuhamburguesa ul li:hover{
    background-color: #6ccaf2;
    
    }


.menu ul{
    display: flex;
    list-style: none;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding-top: 2em;
    width: 100%;
    padding-left: 0em
    
    }

.menu ul li{
    width: 33%;
    flex-direction: row;
    text-align: center;
    list-style: none;
    width: 100%;
    background-color: #29ABE2;
    height: 1.5em;
    padding-top: 0.3em;
    
    }
.menu ul li a{
    color: white;
    height: 2em;
    font-family: 'Dosis';
    justify-content: center;
}

.menu ul li:hover{
    background-color: #6ccaf2;
    
    }

section ul li ul.desplegable {
    display: flex;
    flex-direction: column;
    display: none;
    text-transform: capitalize;
    padding-top: 0.2em;
    justify-content: center;

    
}

section ul li:hover>ul {
    display: block;
}


.hamburguesa {
	/* Ocultamos el boton en escritorio */ 

    background: none;
    border: none;
    margin-top: 5em;
    margin-left: 1em
}

.open-hide:hover {
    cursor: pointer
}

.open-hide:focus+ .menuhamburguesa {
    height: 100%;
    padding-top: 1em
}
.hamburguesa:focus + section.menuhamburguesa{
	/* Si es pulsado el boton, mostramos el nav.
	Esto lo puedo hacer porque adquiere el foco.
	Solo funcionará, si el botón y el menú esta a la misma altura. */
    display: block;
}


.principal {
    top: 4em;
    font-family: Dosis;
    font-size: 1em;
}

.mapa {
    margin-top: 0.5em;
    width: 100%;
}

p {
    display: flex;
    padding-left: 2em;
    padding-bottom: 1em;
    padding-right: 2em;
    padding-top: 1em;
    background-color: #008744;
    color: white;
    font-size: 0.6em;
    text-align: center;
    font-family: Dosis;
   
}

.escudo {
    display:flex;
    padding-top: 3em;
    position: absolute;
    z-index: 999;
    width: 100%;
    

}

.logoverde {
    margin-top: 23em;
    margin-left: 5em;
}

.entrar{
    font-family: dosis;
    font-size: 1em;
    margin-top:28em;
    margin-left: 40%;
    margin-bottom: 1em;
    background-color: white;
    border-color: mediumaquamarine;
    color: #008744;
    font-weight: 600;
    border-radius: .6em;
    padding: 0.3em;
    position: absolute;
    z-index: 999;
    text-decoration: none;
}

.noticias {
    
}

.img1{
    width: 100%;
}

.texto1{
    background-color: #29ABE2;
    font-size: 0.8em;
    font-family: roboto;
    margin-top: -0.5em;
    padding-left: 2em;
    padding-top: 2.5em;
    width: 88.5%;
    text-align: left;
}

video {
    width: 100%;
    margin-top: 13em
}

.imagen {
    width: 100%;
    margin-top: 13em;
}

.plantel2 {
    width: 100%;}

.contenido{
    background: #29ABE2;
    margin-top: -0.8em
}

.trofeos {
    font-family: roboto;
    font-size: 0.8em;
    margin-top: 0em;
    background: none;
    text-align: left;
    margin-bottom: 0em;
    
}

h1 {
    color: white;
    padding-top: 0.5em;
    padding-bottom: 0;
    margin-bottom: -0.3em;
    text-decoration-line: underline
}
/*
.fondo{
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 0
}
*/

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

.imagencancion {
    width: 100%;
    margin: 1em;
}

.imagenhistoria {
    width: 100%;
    margin-top: 13em;
}
.historia {
    font-size: 0.9em;
    margin-top: 0em;
    background: #008744;
    background: -webkit-linear-gradient(-45deg, rgba(0,135,68,1) 35%, rgba(17,150,134,1) 62%, rgba(41,170,226,1) 100%);
    text-align: left;
    padding: 1em;
    
}

.slider {
    width: 100%;
    padding-top: 13em;
}

.slider ul {
    width: 100%;
    padding: 0em;   
    display: flex;
    
    animation: cambio 20s infinite;
    animation-direction: alternate;
    animation animation-timing-function: ease-in;
}

.slider li {
    width: 100%;
    list-style: none;
}

.fecha {
     background: #008744;
    background: -webkit-linear-gradient(-45deg, rgba(0,135,68,1) 35%, rgba(17,150,134,1) 62%, rgba(41,170,226,1) 100%);
    text-align: left;
    margin-top: -2em;
    position: absolute;
    z-index: 900;
    font-size: 0.8em;
    font-weight: bolder;
    padding-top: 0.3em;
    padding-bottom: 0.3em;
}

.noticiatexto {
    font-size: 1em;
    background: none;
    padding: 0.2em;
    margin-top: -0em;
    margin-left: 1em;
    color: white;
    position: absolute;
    z-index: 900;
    width: 95%;
    padding-left: 1.em;
    font-weight: bolder
}

.noticiavideo {
    margin-top: 1em
}

@keyframes cambio {
    0% { margin-left: 0;}
    20% {margin-left: 0;}
    
    25% {margin-left: -100%;}
    45% {margin-left: -100%;}
    
    50% {margin-left: -200%;}
    70% {margin-left: -200%;}
    
    75% {margin-left: -300%;}
    100% {margin-left: -300%;}
    

    
    
    
    
button#menu {
	/* Ocultamos el boton en escritorio */
    display: none;
    text-decoration: none;
    border: none;
    background: none;
    font: dosis;
    color: white;
    width: 33%;
    text-align: center;
    margin-top: 0.35em;
    
    }
}

button#menu:focus + nav#superior {
	/* Si es pulsado el boton, mostramos el nav.
	Esto lo puedo hacer porque adquiere el foco.
	Solo funcionará, si el botón y el menú esta a la misma altura. */
    display: block;
}


button#menuclub {
	/* Ocultamos el boton en escritorio */
    display: none;
    text-decoration: none;
    border: none;
    background: none;
    font: dosis;
    color: black
}

button#menuclub:focus + nav#superiorclub {
	/* Si es pulsado el boton, mostramos el nav.
	Esto lo puedo hacer porque adquiere el foco.
	Solo funcionará, si el botón y el menú esta a la misma altura. */
    display: block;
}

nav#superiorclub ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
     font: dosis;
    color: white
}

nav#superiorclub ul a {
    display: block;
    width: 8em;
    text-decoration: none;
    border: 1px solid #29abe2;
    padding: .3em 0;
    text-align: center;
    color: white;
    background: #4cc8fc;
    transition: 1s all;
}

nav#superiorclub ul a:hover {
    background: #29abe2;
}

@media all and (max-width: 700px) {
	/* En smartphone mostramos el botón */
    button#menuclub {
        display: block;
    }
	nav#superiorclub {
        display: none;
    }
	nav#superiorclub ul {
        flex-direction: column;
    }
}

.flecha {
    position: fixed;
    z-index: 996;
    width: 100%;
    border-style: none;
    background: none;
    bottom: 1em;
    right: -10em

}

h1 {
    font-family: dosis;
    padding-left: 1em;
    color:
}


legend {
    font-weight: bold;
    font-size: 1.2em;
    color:white;
    background-color:rgba(41,170,226,1);
    padding: 0.2em;
    padding-left: 0.4em;
    padding-right: 0.4em;   
}
.formulario {
    font-family: dosis;
    font-size: 1.1em;
    background-color: rgba(41,170,226,0.5);
    color: white;
    border-style: none;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    border-top-left-radius: 2em;
    border-bottom-right-radius: 2em;
    border-style: outset;
    border-color: rgba(41,170,226,0.5);
}
.botonenviar {
    font-family: dosis;
    font-weight: bold;
    font-size: 0.9em;
    background-color:rgba(41,170,226,1);
    color: white;
    border-style: outset;
    border-color: rgba(41,170,226,0.5);
    margin-top: 0.5em;
    margin-left: 8em;
    padding: 0.4em;
    border-radius: 1em 
}
.suscribirse { 
    background-color:rgba(41,170,226,1);
    margin-left: 3.5em;
    margin-right: 3.5em;
    justify-content: center;
}
section p {
    font-size: 1em; 
    padding: 0.5em;
    background-color:rgba(41,170,226,1);
    justify-content: center;
    margin-left: 1em;
    margin-right: 1em;
    margin-bottom: 0em;
    margin-top: 0.5em
}

.contacto {
    padding-top: 14em;
    
}
contacto ul li a.link {   
    background-color: white;
    padding: 0.5em;
    border-radius: 1em;
    border-color: rgba(41,170,226,1);
    border-style: solid;
    border-width: thin;  
}

contacto ul li a {
    color: rgba(41,170,226,1);
    font-weight: bold;
}

div input {
    display: flex;
    margin-top: 0.3em;
    width: 97.5%;
    padding-left: 0.3em;    
    border-color: rgba(41,170,226,1);
    border-style: solid;
    border-width: thin
}

.mensaje {
    display: flex;
    margin-top: 0.3em;
    width: 97.5%;
    padding-top: 2em;
    padding-bottom: 2em;
    border-color: rgba(41,170,226,1);
    border-style: solid;
    border-width: thin
}

div label {
    display: flex;
    margin-top: 0.7em;
}
.botonsuscribirse { 
    font-family: dosis;
    font-weight: bold;
    font-size: 1em;
    background-color:white;
    color:rgba(41,170,226,1) ;
    border-style: outset;
    border-color: rgba(41,170,226,0.5);
    border-radius: 1em;
    padding: 0.3em;
    margin-left: 2.5em;
    margin-bottom: 0.5em;
}

.redessociales {
    display: flex;
    list-style: none;
    justify-content: space-between;
    align-items: center;
    margin-left: 3.5em;
    margin-right: 3.5em;
    margin-top: 0.5em;
    border-style: double;
    border-width: medium;
    border-width: medium;
    border-color: rgba(41,170,226,1)
}

p.celular {
    color: rgba(41,170,226,1);
    font-size: 1.1em;
    padding: 0em;
    margin: 0em;
    background: none;    
}

ul {
    display: flex;
    padding-right: 1em;
    padding-left: 1em;
    padding-top: 0.3em;
    padding-bottom: 0.3em;
    
}

article ul li{
    font-family: dosis;
    display: flex;
    flex-direction: column;
    list-style: none;
    background-color: #008744;
    justify-content: space-around;
    margin-top: 13em;
    padding: 0.5em;
    
    
}


article ul li a{
    color: white;
    justify-content: center
}

body {
    background-color: rgba(41, 170, 226, 0.3)
}

nav.direccion {
    margin-top: 1em;
    margin-bottom: 0.5em;;
    text-align: left;
    font-size: 1.2em;
    width:100%;
    padding-top: 10em;    

}



ul.categorias {
    font-family: dosis;
    display: flex;
    list-style: none;
    background: -webkit-linear-gradient(-45deg, rgba(0,135,68,1) 35%, rgba(17,150,134,1) 62%, rgba(41,170,226,1) 100%);
    justify-content: space-around;
    padding: 2em;
    margin: 0em;  
}

p#direccion {
    font: none
}

article p.titulocanciones {

    padding-top: 13em;
    font-size: 1em;
    font-weight: bolder
}

.textocanciones{
    font-size: 0.9em;
    justify-content: center
}


.slider {
    padding-top: 13em;
    overflow: hidden;
    margin: auto;
}

.slider ul {
    display: flex;
    padding: 0em; 
    width: 400%;
    
    animation: cambio 20s infinite;
    animation-direction: alternate-reverse;
    animation-timing-function: ease-in-out;
}

.slider ul li {
    list-style: none;
}

.slider ul li img {
    display: flex;
    width: 100%;
    
    
}

@keyframes cambio {
    0% {margin-left: 0;}
    20% {margin-left: 0;}
    
    25% {margin-left: -100%;}
    45% {margin-left: -100;}
    
    50% {margin-left: -200;}
    70% {margin-left: -200%;}
    
    75% {margin-left: -300%;}
    100% {margin-left: -300%;}
    }

.videogaleria {
    width: 100%;    
margin-top: 0}