* {
    box-sizing: border-box; 
    margin: 0em; 
    padding: 0em; 
    border: 0em;
    font-family: 'Roboto', sans-serif;
    
}

body {
min-height: 100vh ;
max-width: 100vw ;
}


/*HEADER*/

header {
background-color: white;
display: flex ;
justify-content: space-between ;
padding: 1.5em 2em 1em 2em;
border-bottom: solid #DADADA 1px;
height: 3.5em;
}

header figure {
display: flex ;
align-items: center;
}

header figure figcaption {
color: #282828 ;
font-weight: 700;
font-size: 15px;
padding: .3em;
}

header figure img {
display: block ;
width: 1.7em ;
height: auto ;
}

header .sumardeporte a {
margin: -.4em 0em;    
}

header .sumardeporte a img {
display: block ;
width: 2.4em ;
height: auto ;
}



/*FOOTER*/

footer {
background-color: white;
padding: .5em ;
position: fixed ;
bottom: 0 ;
border-top: solid #DADADA 1px;
height: 3.5em;
width: 100%;
}

footer nav ul {
list-style: none ;
display: flex ;
justify-content: space-between;
padding: 0em 2em 0em 2em;
}

footer nav ul li a {
text-align: center ;
text-decoration: none ;
font-size: 12px;
}

.noactivo h5{
color: #B1B1B1;
font-weight: 300;
}

.activo h5{
color: #E83638;
font-weight: 700;
}

footer nav ul li a img {
    width: 2.5em ;
    height: auto ;
}




/*MAIN KF1*/

#kungfuppl {
display: flex ;
flex-direction: column ;
text-align: center ;
justify-content: center;
max-width: 100vw;
margin-bottom: 3em;
}

#kungfuppl h1 {
text-align: center ;
font-size: 2em ;
margin: .5em .5em .05em .5em;
color: #282828;
}

#kungfuppl h2 {
text-align: center ;
margin-top: .2em ;
font-size: .9em ;
font-weight: 300;
color: #9c9b9b;
}

#kungfuppl section nav ul {
display: flex ;
flex-wrap: wrap ; 
justify-content: center ;
list-style: none ;
margin: .5em 2em 2em 2em;
}

#kungfuppl section nav ul li {
width: 50% ;
height: 50% ;
margin: .5em 0em .7em 0em ;
display: flex ;
justify-content: space-around;
align-content: center
}

#kungfuppl section nav ul li img {
width: 5.5em ;
height: auto;
border: 2px solid #D9D9D9 ;
border-radius: 3em ;
padding: .5em ;
}

#kungfuppl section nav ul li a img {
border: 2px solid rgba(232, 54, 56, 0.19) ;
border-radius: 3em ;
padding: .5em ;
}

#kungfuppl section nav ul li .bdpcontainer {
background-color: #D9D9D9 ;
width: 5em ;
height: .6em ;
color: #D9D9D9 ;
border-radius: .2em ;
margin-top: .3em ; 
}

#kungfuppl section nav ul li .bdpcontainer .bdpinterna {
background-color: #ffbe2c ;
width: 1em ;
height: .6em ;
border-radius: .2em ;
}

#kungfuppl section nav ul .primerlvl {
display: flex ;
flex-direction: column ;
align-items: center ;
    
}


/*MAIN KF2*/

#kungfuppl section nav ul .primerlvlkf2 {
display: flex ;
flex-direction: column ;
align-items: center ;
}

#kungfuppl section nav ul li .bdpcontainerkf2 {
background-color: #ffbe2c  ;
width: 5em ;
height: .6em ;
color: #D9D9D9 ;
border-radius: .2em ;
margin-top: .3em ; 
}

#kungfuppl section nav ul li .bdpcontainer .bdpinterna {
background-color: #ffbe2c ;
width: 1em ;
height: .6em ;
border-radius: .2em ;
}




/* MAIN - terminosycond */

#terminosycond {
background-color: #E83638;
display: flex ;
flex-direction: column ;
align-items: center ;
min-height: 100vh ;
}

#terminosycond div {
background-color: rgba(163, 68, 68, 0.71) ;
color: ghostwhite ;
padding: 1em ;
border-radius: 2em ;
width: 90% ;
}

#terminosycond div a {
color: #ffffff ;
}

#terminosycond div p {
margin-bottom: 1em ;
}

#terminosycond h1 {
margin-top: .5em ;
color: ghostwhite;
text-align: center;
font-size: 2em;
text-transform: uppercase;
padding: .7em;
}

/* MAIN - registro */

#registro input, #registro label {
display: block ;
}

#registro {
max-width: 100vw ;
min-height: 100vh ;
background-color: #E83638;
display: flex ;
flex-direction: column ;
align-items: center ;
background-image: url(../imagenes/fondos/mobilegb.jpg) ; 
background-size: cover ;
background-repeat: no-repeat ;
height: 100vh ; 
background-position: center; 
}

#registro > div {
display: flex ;
flex-direction: column ;
width: 70% ;
text-align: center ;
margin: auto ;
}

#registro > div figure {
margin: 0em 0em 3em ;
}

#registro div div {
display: flex ;
margin-bottom: 1em ;
background-color: rgb(255, 255, 255) ; 
border-radius: .5em ;
}

#registro div div input {
background-color: rgba(255, 0, 0, 0.26) ;
padding: .5em 1em .5em 1em;
border-radius: 0em .5em .5em 0em;
width: 100% 
}

#registro div div label img {
display: block ;
width: 1.4em ;
height: auto;
margin: .4em ;
}

#registro div form {
display: flex ;
flex-direction: column ;
}

#registro div form .botonesregistro {
margin: 1em 0em 1em;   
display: flex ;
flex-direction: row ;
background-color: rgba(196, 0, 0, 0) ;
justify-content: center;
}

#registro div form .botonesregistro a {
margin: .4em;
text-decoration: none ;
font-size: .9em;
font-weight: 300;
color: white ;
padding: .6em;
border: solid #ffffff 1px;
border-radius: .5em;
width: 8em;
height: auto;
}

#registro div form .botonesregistro button {
margin: .4em;
text-decoration: none ;
color: #E83638 ;
background-color: white;
font-size: .9em ;
font-weight: 700;
padding: .6em;
border-radius: .5em;
width: 8em;
height: auto;
}


/* MAIN - registronuevo */

#registronuevo input, #registro label , #registronuevo div form div #bio {
display: block ;
}

#registronuevo {
max-width: 100vw ;
min-height: 100vh ;
background-size: contain ;
background-color: #E83638;
display: flex ;
flex-direction: column ;
align-items: center ;
background-image: url(../imagenes/fondos/mobilegb.jpg) ; 
background-size: cover ;
background-repeat: no-repeat ;
background-position: center; 
}

#registronuevo h1 {
margin: .5em 0em 1em;
color: white;
text-align: center;
font-size: 1.2em;
padding: .7em;
font-weight: 700;
}

#registronuevo > div {
display: flex ;
flex-direction: column ;
width: 70% ;
text-align: center ;
}

#registronuevo div h4 {
color:white ;
margin-bottom: .3em;
font-weight: 400;
font-size: .9em;
}

#registronuevo div div {
display: flex ;
margin-bottom: 1em ;
background-color: rgb(255, 255, 255) ; 
border-radius: .5em ;
}

#registronuevo div div input , #registronuevo div form div #bio {
background-color: rgba(255, 0, 0, 0.26) ;
padding: .5em 1em .5em 1em;
border-radius: 0em .5em .5em 0em;
width: 100% 
}

#registronuevo div div label img {
display: block ;
width: 1.4em ;
height: auto;
margin: .4em ;
}

#registronuevo div form {
display: flex ;
flex-direction: column ;
}

#registronuevo div form .botonesregistro {
margin: 1em 0em 1em;   
display: flex ;
flex-direction: row ;
background-color: rgba(196, 0, 0, 0) ;
justify-content: center;
}

#registronuevo div form button {
align-self: center;
margin: .4em;
text-decoration: none ;
color: #E83638 ;
background-color: white;
font-size: .9em ;
font-weight: 700;
padding: .6em;
border-radius: .5em;
width: 8em;
height: 3em;
}

#registronuevo div .registrorad {
display: flex ;
justify-content: center;
background-color: rgba(240, 248, 255, 0) ;
}

#registronuevo div .registrorad div {

width: 3em ;
height: 2em ;
margin: .5em .7em 0em ;
}

#registronuevo div .registrorad div:active {
border: 2px white solid ;
background-color: #E83638 ;
color: ghostwhite ;
}

#registronuevo div .registrorad div label {
margin: auto ;
}

#registronuevo div .registrorad div input {
display: none ;
}

#registronuevo div h5 {
    color: ghostwhite ;
    margin: 1em ;
}

#registronuevo div h5 a {
color: #454545 ;
}




/* MAIN - Bienvenida */



#bienvenida {
max-width: 100vw ;
min-height: 100vh ;  
background-image: url(../imagenes/fondos/mobilegb.jpg) ; 
background-size: cover ;
background-repeat: no-repeat ; 
background-position: center; 
background-color: #E83638;
display: flex ;
flex-direction: column ;
align-items: center ;
justify-content: space-around;
}

#bienvenida figure {
margin: 5em 0em
}

#bienvenida h1 {
margin-top: 1.5em;
color: white;
text-align: center;
font-size: 2em;
font-weight: 700;
text-transform: uppercase;
}

#bienvenida h2 {
width: 70%;
color: white;
font-size: .8em;
font-weight: 300;
text-align: center;
padding: .7em;
}

#bienvenida .container {
margin-bottom: 7em ;
display: flex ;
justify-content: center;
}

#bienvenida .container a {
width: 7em;
margin: .5em;
text-decoration: none;
text-align: center;
background-color: #ffffff;
padding: .5em;
color: #E83638;
border-radius: .5em;
font-size: .9em;
font-weight: 700;
display: block ;
}

#bienvenida .container button {
width: 7em;
margin: .5em;
display: block ;
text-decoration: none;
text-align: center;
background-color: #E83638;
border: solid #ffffff 1px;
padding: .5em;
color: white;
border-radius: .5em;
font-size: .9em;
font-weight: 300;
}


/*PLUGIN*/

.modal-wrap {
max-width: 90% ;
min-height: 90% ;
align-self: center ; 
vertical-align: middle ;
border-radius: .5em

}

.modal-wrap .modal-footer button {
padding: .3em .5em ;
border: none ;
background-color: #ffffff ;
color: red ;
border-radius: 1em ;
}

.modal-wrap .modal-footer {
display: flex ;
justify-content: center ;
}

.modal-step-bd {
border-radius: 2em ;
height: 80% ;
width: 90% ;


}

.modal-step-bd p img {
width: 80% ;
border-radius: .5em ;
margin: 2em ;
}

.modal-step-hd h2 {
color: ghostwhite;
text-align: center;
text-transform: uppercase;
padding: .7em;
}

.modal-body {
background-color: #e6a6a6 ;




}

.modal-information {
padding-top: 0 ;
padding-right: 0 ;
display: flex ;
}

/*<!--        MAIN CLEAN       -->*/

#clean {
min-height: 75vh ;
background: url(../imagenes/fondomainclean.png) no-repeat center 9em;
background-size: 15em ;
}

#clean h1 {
margin-top: 1em;
color: #000000;
font-size: 1.5em;
padding: .7em;
}

#clean h3 {
 
color: #adadad;
font-size: .8em;
width: 90% ;
margin: auto ;
}

#clean a {
color: white ;
background-color: #E83638 ;
text-decoration: none ;
padding: 1em 2em;
position: relative ;
top: 18em ;
left: 31% ;
border-radius: .5em ;

}

/*<!--        MAIN SELECCION DEPORTE       -->*/

.selecciondeporte {
background-color: #ffffff ;

}

.selecciondeporte section {
display: flex ;
justify-content: space-between ;
padding: .5em ;
align-items: center ;
border-bottom: 1px solid #c4c4c4 ;
}

.selecciondeporte section h3 {
color: #adadad
}

.selecciondeporte section a img {
width: 2em ;
}

.selecciondeporte h1 {
color: #000000;
text-align: center;
font-size: 1.3em;
padding: .3em ;
margin-top: .5em ;


}

.selecciondeporte nav ul {
list-style: none ;
background-color: #E83638 ;
padding-top: .5em ;
padding-bottom: 1em ;
}

.selecciondeporte nav ul li {
display: flex ;
flex-direction: row ;
text-align: center ;
width: 90% ;
border-radius: .5em ;
margin: auto ;
margin-top: .5em ;
background-color: ghostwhite ;
height: 5em ;
    
}

.selecciondeporte nav ul li a h2 {
margin: auto ;
color: #e72f2f ;
font-size: 1em
}

.selecciondeporte nav ul li a {
display: flex ;
flex-direction: row ;
text-align: center ;
width: 90% ;
text-decoration: none ;




}

.selecciondeporte nav ul li a img  {
width: 5em ;
height: auto ;
padding: 1em ;
background-color: ghostwhite ;
border-radius: .5em ;
}

/*PERFIL2 */

#macrobeneficios .beneficiosactivos #contenidobeneficiosp2 {
padding: 1em ;
}

.logrodepor {
display: flex ;
background-color: ghostwhite ;
height: 5em ;
justify-content: space-around ;
border-radius: .5em ;
align-items: center ;
margin-bottom: 1em ;
}

#macrobeneficios .beneficiosactivos .logrodepor .logrodescrip {
margin: auto ;
padding: 0 ;
}

#macrobeneficios .beneficiosactivos .logrodepor .logrodescrip h3 {
margin-bottom: 0 ;
text-transform: uppercase ;
}

#macrobeneficios .beneficiosactivos .logrodepor .logrodescrip h4 {
font-size: .7em ;
color: #c9c9c9 ;
}

#macrobeneficios .beneficiosactivos .logrodepor .logrodescrip h5 {
color: rgb(232, 54, 56) ;
}

.logrodepor img {
width: auto ;
height: 4em ;
margin-left: 1em ;


    
}


}


/*PERFIL */

.usuario img {
  border-radius: .5em;
  max-width: 7em;
  max-height: 7.1em;
  border: 1px solid #E83638;
}

.usuario  h2{
  color: #282828;
  font-size: 1.2em;
  font-weight: 700;
}

#perfil {

}

#perfil > h2 {
margin-top: 1em ;
}

#perfil #macrobeneficios {
background-color: #e6e6e6 ;
padding-bottom: 2em ;

}



#perfil .beneficiosactivos div {
text-align: center ;
padding: 2.5em ;
}

#perfil .beneficiosactivos div h3 {
color: black ;
margin-bottom: 1em ;

}

#perfil .beneficiosactivos div a {
color: ghostwhite ;
text-decoration: none ;
background-color: #E83638 ;
padding: .5em 2em ;
border-radius: .5em ;

}

#perfil .beneficios {
border-bottom: 2px #E83638 solid ;
width: 100vw ;
text-align: center ;
font-size: .9em ;
text-transform: uppercase ;
color: #E83638 ;

}

#perfil .beneficiosactivos div {
margin-bottom: 1.5em ;
}

#perfil figure {
display: flex ;
flex-direction: column ;
align-items: center ;
}

#perfil figure img {
width: 40% ;
border-radius: 20em ;
margin: 1em;
}

#perfil .logros {
margin: 3em 0em ;
border-radius: 3em ;
padding: 2em ;
background-color: rgba(208, 2, 2, 0.42) ;
color: ghostwhite ;
}

#perfil .logros div {
margin-bottom: 2em ;
background-color: rgba(182, 48, 48, 0.73) ;
color: #880000 ;

}

#perfil .logros .futbol {

width: 75% ;
border-radius: .5em ;
padding: .7em
}

#perfil .logros .kungfuprog {

width: 10% ;
border-radius: .5em ;
padding: .7em
}

#perfil .logros .basket {

width: 75% ;
border-radius: .5em ;
padding: .7em
}

#perfil .logros .tituloprogre {
font-size: 1.8em ;
text-align: center ;
margin-bottom: .7em ;
color: #ffffff ;

    
}

#perfil .logros .subtitprogre {

margin: 1em 0em .2em .3em ;
color: #ffffff ;
}


/*HEADER PERFIL*/


.encabezadoperfil {
display: flex ;
justify-content: space-between ;
padding: 1em ;

}

.encabezadoperfil h2 {
color: #D9D9D9 ;
font-size: 1.3em ;
text-align: center ;

margin-top: -.2em;
}

.encabezadoperfil a img {
width: 1.7em ;
margin-top: -.3em;
}

/*TIENDA*/

#tienda {
min-height: 100vh ;
}

#tienda h1 {
text-align: center ;
margin: .5em 1em ;
color: #E83638 ;
font-size: 1.7em;
}

#tienda .premios{
background-color: #E2E2E2;
padding: .5em;
margin-bottom: 3em;
}

#tienda #canjes {
margin-bottom: .5em ;
background-color: white;
border-radius: .5em;
display: flex;
padding-left: 1em ;

}

#tienda #canjes > img {
width: auto;
height: 5em;
margin: auto ;

}

#tienda #canjes #descripcion h4{
font-weight: 300;
color: #B1B1B1;
text-transform: uppercase;
font-size: .7em;
padding: 2em 0em 0em 2em;
}

#tienda #canjes #descripcion h5{
padding: .5em 2em 0em 1.6em;
color: #282828;
font-size: .9em;
font-weight: 700;
}

#tienda #canjes #descripcion figure {
display: flex ;
justify-content: flex-start;
}

#tienda #canjes #descripcion figure figcaption {
color: #ffbe2c ;
padding-top: .7em;
font-size: .8em;
font-weight: 700;
}

#tienda #canjes #descripcion figure img {
width: 1.5em ;
margin: .3em .5em 1em 1.3em;
}

/*TIENDA VACIA*/

#tiendavacia {  
display: flex ;
flex-direction: column ;

align-items: center ;
max-height: 100vh;
}

#tiendavacia h1 {
text-align: center ;
font-size: 1.7em;
margin-top: 2em;
color: #E83638;
}

#tiendavacia h2 {
text-align: center ;
color: #282828;
font-size: 1em ;
font-weight: 300;
padding: 1em 1em 0em 1em;
}

#tiendavacia img {
margin-top: 2em; 
width: 10em ;
}

#tiendavacia a{
margin-top: 2em;
text-decoration: none;
text-align: center;
background-color: #E83638;
color: white;
padding: .5em;
border-radius: .5em;
width: 7em;
}


/*CONFIG*/

.encabezadoconfig {
display: flex ;
align-items: center ;
justify-content: space-between ;
}

.encabezadoconfig  a img {
width: 1.5em ;
}

.encabezadoconfig h2 {
text-align: center ;
color: #D9D9D9 ;
font-size: 1em ;

}

#config {
 margin-bottom: 2em ;
padding: 1em ;
}

#config #configayuda {
color: #0000fe;
text-decoration: underline ;
}

#config h3 {
font-size: 1.5em;
color: #8d8d8d

}

#config div {
display: flex ;
justify-content: space-between ;
margin: 1em 1em 3em ;
border-top: .1em solid grey ;
padding: 1em;
}

#config div .configtxtgris {
color: #9f9f9f ;
max-width: 30% ;

}

#config div img {
width: 3em ;
border-radius: 1em ;
border: 3px solid grey ;
}

/*CUESTIONARIO*/

#cuestionario {
background-color: #de4040 ;
min-height: 100vh ;
color: ghostwhite ;
background-image: url(../imagenes/fondos/mobilegb.jpg) ; 
background-size: cover ;
background-repeat: no-repeat ;
height: 100vh ; 
background-position: center; 
}

#cuestionario input , #cuestionario label , #cuestionario button {
display: block ;
}

#cuestionario h1 {
text-align: center ;
padding: 1em 0em ;

}

#cuestionario form {
width: 70% ;
margin: auto ;
}

#cuestionario form section {
margin-bottom: 2em ;
}

#cuestionario form section div {
display: flex ;
margin-top: .3em;
    
}

#cuestionario form section div input {
margin: .2em 1em
}

#cuestionario form button {
text-decoration: none;
background-color: #de4040 ;
border: solid #f8f8ff;
padding: .8em 1.7em .8em 1.7em;
color: ghostwhite;
border-radius: .5em;
font-size: 1.2em;
font-weight: 700;
display: block ;
}

/*VIDEO*/

#video {
background-color: #000000 ;
min-height: 100vh ;
}

#video video {
width: 100vw ;
height: auto ;
margin-top: 55% ;
}

#video a {
display: block ;
margin-top: 1em ;
color: ghostwhite ;
text-decoration: none ;
border: 2px solid ghostwhite  ;
border-radius: 2em ;
padding: 1em ;
width:  50% ;
text-align: center ;
margin: 25% ;

}



/*MEDIA QUERYS*/

/*MQuery registro 1*/

@media (min-width: 45em) {
    #registro {
        background-image: url(../imagenes/fondos/bg.jpeg) ;
        background-size: cover;
        background-position: center; 
        background-repeat: no-repeat; 
    }
        
        #registro figure img {
    width: 12em
    }
    
    #registro div form  {
    width: 50% ;
    margin: auto ;
    }
        
    }
}

@media (min-width: 50em) {
    
    #registro {
    background-image: url(../imagenes/fondos/bg.jpeg) , url(../imagenes/iconos/logonolapp.png) ;
    background-size: cover , contain ;
    background-repeat: no-repeat , repeat;
    height: 100vh , 20vh ; 
    background-position: center; 
    }
    
    #registro figure img {
    width: 12em
    }
    
    #registro div form  {
    width: 50% ;
    margin: auto ;
    }
}

/*MQuery registronuevo 2*/

@media (min-width: 45em) {
    #registronuevo {
        background-image: url(../imagenes/fondos/bg.jpeg) ;
        background-size: cover;
        background-position: center; 
        background-repeat: no-repeat;
        
    }
    #registronuevo div form {
    width: 60% ;
    margin: auto ;
    }
}

@media (min-width: 50em) {
    
    #registronuevo {
    background-image: url(../imagenes/fondos/bg.jpeg) , url(../imagenes/iconos/logonolapp.png) ;
    background-size: cover , contain ;
    background-repeat: no-repeat , repeat;
    height: 100vh , 20vh ; 
    background-position: center; 
    }
    
    #registronuevo h1 {
    font-size: 2em ;
    margin: 0em 0em .5em ;
    }
    
}

/* MQuery selecciondeporte 3*/

@media (min-width: 40em) {
    
    body .selecciondeporte nav ul {
    display: flex ;
    flex-wrap: wrap ;
    margin-top: 1em ;
    justify-content: center ;
    min-height: 85vh ;
    
    }
    
    body .selecciondeporte nav ul li {
    flex-basis: 40%;
    
    }
    
}

@media (min-width: 50em) {
    
    body .selecciondeporte h1 {
    width: 100vw ;
    }
    
    body .selecciondeporte nav ul {
    display: flex ;
    flex-wrap: wrap ;
    width: 100vw ;
    margin-top: 1em ;
    }
    
    body .selecciondeporte nav ul li {
        flex-basis: 30% ;
        margin: 1em
    }
    
}

/* MQuery video 4*/

@media (min-width: 40em) {
    
    body #video {
    min-height: 100vh ;
    min-width: 100vw ;
        
    
    }
    
    body #video #elvideo {
    width: 100% ;
    margin: 0 ;
    padding: 1em ;
        
    }
    
    body #video a {
    margin: auto ;
    margin-top: 3em ;
    width: 10em ;
        
    }
    
}

@media (min-width: 50em) {
    
     body #video {
    min-height: 100vh ;
    min-width: 100vw ;
    position: relative ;
    
    
    }
    
    body #video #elvideo {
    width: 100% ;
    margin: auto;
    margin-top: 1em ;
    padding: 0 ;
        
    }
    
    body #video a {
    margin: auto ;
    margin-top: 3em ;
    position: fixed ;
    bottom: 6em ;
    width: 20% ;
    left: 1em ;
    margin: 0em ;
        
    }
    
}

/* MQuery cuestionario 5*/


@media (min-width: 40em) {
    
    #cuestionario {
    min-width: 100vw ;
    background-image: url(../imagenes/fondos/bg.jpeg) ;
        background-size: cover;
        background-position: center; 
        background-repeat: no-repeat;
    
    }
    
    #cuestionario form {
  
    
    }
    
    #cuestionario form button {
    margin: auto ;
    }
    
    #cuestionario form section h4 {
    text-align: center ;
    margin-bottom: 1em ;
    }
    
    #cuestionario form section div {
     width: 50% ;
    margin: auto ;
        
    }
}

@media (min-width: 50em) {
    background-image: url(../imagenes/fondos/bg.jpeg) , url(../imagenes/iconos/logonolapp.png) ;
    background-size: cover , contain ;
    background-repeat: no-repeat , repeat;
    height: 100vh , 20vh ; 
    background-position: center; 
}