@font-face {
    font-family: 'dinregularbold';
    src: url('../fonts/dinbold-webfont.woff2') format('woff2'),
         url('../fonts/dinbold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'dinmedium';
    src: url('../fonts/dinmedium_0-webfont.woff2') format('woff2'),
         url('../fonts/dinmedium_0-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'dinregular';
    src: url('../fonts/ufonts.com_din-regular-webfont.woff2') format('woff2'),
         url('../fonts/ufonts.com_din-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
* {
	margin:0;
	padding:0;
    border-spacing: 0; 

}

body{
   
    font-family: 'dinregular';
    
}
/*inicio menu*/

.hamburguesa{
    margin-right: 0;
    position: absolute;
    right: 10px;
    top:10px;
    width: 13%;
    cursor:pointer;
}
.logo_iso{
    width: 30%;
    padding: -5px;
    margin: -15px;
}
 

 
header nav {
	background:#009cb0;
}
 
.menu_bar {
	display:none;
    
}
 
header nav ul {
	overflow:hidden;
	list-style:none;
}
 
header nav ul li {
	float:left;
}
 
header nav ul li a {
	color:#fff;
	padding:20px;
	display:block;
	text-decoration:none;
}
 
header nav ul li span {
	margin-right:10px;
}
 
header nav ul li a:hover {
	background:#009cb0;
}
 

@media screen and (max-width:1000px ) {
header nav {
		width:80%;
		height:100%;
		left:-100%;
		margin-top:0px;
		position: fixed;
    z-index: 998;
	}
    .logo_iso2{
        width: 40%;
    }
    .logo_juegos{
        width: 30%;
    }
	header nav ul li {
		display:fixed;
		float:none;
		border-bottom:1px solid rgba(255,255,255, .3);
        font-size: 1.3em;
	}
 
	.menu_bar {
		display:block;
        position: fixed;
        z-index: 995;
		width:100%;
		
      
	}
 
	.menu_bar .bt-menu {
		display:block;
		
		background:#009cb0;
		color:#fff;
		text-decoration:none;
		font-weight: bold;
		font-size:1em;
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		box-sizing:border-box;
	}
 
	.menu_bar span {
		float:right;
		font-size:1em;
	}
    .icon{
             margin-bottom: -8px;
         }
}
/*final menu*/
/*carga loading*/
      #loadpage{
            display: block;
             width: 100%;
             height: 100%;
             position: fixed;
             top:0;
             left:0;
             z-index:999;
             background:#009cb0; 
        }
  #loadpage2{
            display: block;
             width: 100%;
             height: 100%;
             position: fixed;
             top:0;
             left:0;
             z-index:999;
             background:#009cb0; 
        }
        #loadpage .logo_intro{
            width: 60%;
            height: auto;
            display: block;
            position: absolute;
            top:0;
            left:0;
            right:0;
            bottom: 0;
            margin: auto;
        
           
        }
        #loadpage .img_loading, #loadpage2 .img_loading{
            width: 20%;
            display: block;
            margin: auto;
             margin-top: 120%;          
        }
        #loadpage .tx1, #loadpage2 .tx1{
            color: #fff;
            text-align: center;
        } 
/*fin carga loading*/
.contenedor{
      width: 360px;
    margin: 0 auto;
    text-align: center; 
    padding-top: 50px;
    
}
/*comienzo de login-sesion*/
.log_alto{
    height: 300px;
}
.tx2{
    font-size: 0.75em;
    margin: 0px 40px;
    color:#009cb0;
}
.contenedor a, .contenedor .texto1{
    text-decoration: none;
    color:#009cb0;
}
.logo{
    max-width: 200px;
    margin: 0 auto;
}
.sesion-face{
    width: 280px;
    background:#009cb0;
    color:#fff;
    height: 30px;
    padding-top:10px;
    margin:auto;
    
}
/*fin de login-sesion*/

/*comienzo login - formulario */
.img_user{
    width: 50%;
}
.login input{
    width: 260px;
    padding: 10px 0px;
    background: #ededed;
    padding-left: 10px;
}
.login2 input{
    width: 260px;
    padding: 10px 0px;
    background: #e1f0fa;
    padding-left: 10px;
}
.boton-iniciar input{
    background: #e8404d;
    color:#fff;
    font-size: 1em;
    margin-top: 9px;
    
}
.boton-iniciar2 input{
    background: #4c8bf0;
    color:#fff;
    font-size: 1em;
    margin-top: 9px;
    
}
.contenedor .registrate a{
    color: #e8404d;
    font-size: 1em;
}
.new-registro{
    margin-top: 50px;
}
.new-registro h3{
    margin-top: -10px;
    
}
/*fin login */
/*items*/
.line_item{
    clear: left;
    flex-direction: row;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 60px;
     background:#009cb0;
    
    
}
.item1{
    background-image: url(../img/estrella.png);
    background-repeat: no-repeat;
    background-position: center;
    width: 33%;
    height: 60px;
   border: solid white;
    border-width: 0 3px 0 0;
    float:left;  
}

 a:active .item1{
    background: rgba(0, 0, 0, 0.53);
     background-image: url(../img/estrella.png);
    background-repeat: no-repeat;
    background-position: center;
   
}
.item2{
    background-image: url(../img/medalla.png);
    background-repeat: no-repeat;
    background-position: center;
    width: 32%;
    height: 60px;
    border: solid white;
    border-width: 0 3px 0 0;
   float:left;
   
}
a:active .item2{
    background: rgba(0, 0, 0, 0.53);
     background-image: url(../img/medalla.png);
    background-repeat: no-repeat;
    background-position: center;
   
}
.item3{
    background-image: url(../img/copa.png);
    background-repeat: no-repeat;
    background-position: center;
     width: 32%;
    height: 60px;
    float:left; 
}
a:active .item3{
    background: rgba(0, 0, 0, 0.53);
     background-image: url(../img/copa.png);
    background-repeat: no-repeat;
    background-position: center;
   
}
/*fin items*/
/*bienvenida*/
.foto1{
    margin-top: 10%;
    width: 300px;
    height: 300px;
    background: #000;
    
}
.alentar{
    margin-top: 10%;
    width: 300px;
    height: 300px;
   
    
}
/*fin de bienvenida*/
/*perfil*/
.foto_perfil{
    width: 200px;
    height: 200px;
    
}
.editar{
  background:#009cb0;
   
    margin: auto;
    width: 150px;
    height: 15px;
    padding: 10px;
}
.editar a{
     color:#fff;
    font-size: 1.2em;
    font-family: 'dinregularbold';
}
.registro{
    flex-direction: row;
    margin-top: 60px;
}
.registro_content{
    float:left;
    width: 33%;
    color:#009cb0;
   
}
.num{
    font-size: 2em;
    font-family: 'dinregularbold';
    color:#009cb0;
}
/*fin de perfil*/
/*favoritos*/
.text_five{
    font-family: 'dinregularbold';
    color:#e8404d;
}
.fondo_fivetop{
    margin-top: 50px;
    padding: 20px;
   background: #f1cc44; 
}
.topfive{
    width: 100%;
    margin: auto;
   
  
}
.topfive ul{
    list-style: none;
        height: 60px;
}
.topfive h1{
   float:left;
}
.topfive ul li{
    float:right;
   
}
.favoritos{
    background: #d6eefd;
    height: 50px;
    padding: 15px
   
}
.favoritos ul{
    clear: left;
    list-style: none;
}
.contenedor_favoritos{
   
    height: 900px;
    margin-top: 10px;
    padding: 10px;
}
.contenedor_favoritos2{
   
   
    margin-top: 10px;
    padding: 10px;
}
.num2{
    font-size: 3em;
    font-family: 'dinregularbold';
    margin-right: 5px;
    color:#009cb0;
}
.fav_line{
    float:left;
    
 
    
}
.fav_line2{
    float:right;

    
}
.fav_line a{
    color:black;
    
}
.tx3{
    margin-left:10px;
    margin-top: 10px;
    font-family: 'dinregularbold';
}
.tx4{
     font-family: 'dinregular';
    font-size: 0.8em;
}
/*fin favoritos*/
/*alentar*/
.menu_alentar{
    margin-top: 50px;
    height: 150px;
}
.lista_principal{
    float:left;
    width: 33%;
    height: 150px;
}
.tx6{
    font-family: 'dinregularbold';
    color:#009cb0;
}
/*fina alentar*/

/*elegir*/
.elegir{
    margin-top: 18px;
}
.busqueda{
    padding: 15px;
    height: 20px;
}
.buscador{
    width:  250px;
    border-radius: 10px;
    padding: 5px;
    background: #ededed;
    height: 25px;
    
}
.buscador img{
    float: right;
}
.buscador p{
    float: left;
}
.valores{
    position: absolute;
    right: 10px;
    top:188px;
}
.scaner2{
    width:  360px;
}

/*fin elegir*/
/*buscar*/
.area{
    height: 700px;
}
.batalla input{
    width: 100%;
    height: 50px;
    margin-top:-90px;
}
.finchat_bat{
    margin-top:90px;
}
/*fin buscar*/
/*contenido*/
.valores_content{
    margin-top: 30px;
    text-align: center;
}

/*fin contenido*/
/*Scanner*/
.zona{
    height: 200px;
}
/*fin scanner*/
/*chat*/
.body_chat{
        background:#d6eefd;
    
}
.chat_content{
    padding: 10px;
    height: 750px;
}
.tx7{
    font-size: 0.8em;
}
.bandera{
    font-size: 2em;
    font-family: 'dinregularbold';
    padding-left: 30px;
    background-image: url(../img/bandera_mexico.png);
    background-repeat: no-repeat;
}
.chat_natacion{
    position: absolute;
    right: 10px;
    top:90px;
}
.titulo_batalla{
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px; 
    text-align: center;
    width: 200px;
    border-radius: 10px;
    background: #c5b9ac;
    color:#fff;
    font-size: 0.8em
}
.fondo_chat{
    background: #f6f6f6;
    height: 500px;
    border-radius: 15px;
    padding-top: 10px;
}
.mensaje_chat{
 
    margin-top: 10px;
  border-radius: 10px;
background: #f6f6f6;
    height: 51px;
    
}
.mensaje_chat img{
    float:left;
    margin-top: 10px;
}
.mensaje_chat p{
    float: left;
     margin-top: 16px;
    
    margin-left: 5px;
}
.mensaje_chat .micro{
    float: right;
}
.chat{
    position: absolute;
    width: 70%;
    right: 20px;
    
}
/*fin chat*/
/*perfilchat*/
.deportistas{
    width: 150px;
    height: 150px;
    background: #000;
    float:left;
}
.tx8{
    float:right;
}
.perfilchat_content{
    padding: 10px;
   
}
.tx8 .tx9{
 font-size: 1.5em;   
}
.tx10{
    font-size: 2em;
    font-family: 'dinregularbold';
    text-align: right;
}
.mx{
    text-align: right;
    padding-right: 0;
}
.tx11{
    margin-top: 20px;
    float: right;
    font-size: 4em;
     font-family: 'dinregularbold';
}

/*fin perfilchat*/
/*valores*/
.seleccion{
    width: 300px;
    height: 30px;
}
.fondo_valores{
    background: #f1cc44;
    height:500px;
}
/*fin valores*/
/*jorge*/
.jorge{
    width: 360px;
   
    text-align: center;
    margin-top:50px;
}
.tx12{
    text-align: center;
    position: absolute;
    right: 50px;
    top:330px;
    width: 70px;
    height: 30px;
    background:#e8404d;
    
    
}
.tx12 p{
    padding: 10px;
}
.tx12 p a{
    text-decoration: none;
    color:#fff;
}

/*fin jorge*/
/*biografia*/
.foto_jorge{
 text-align: center;   
}
.parrafo_jorge{
    padding: 40px;
    
}
.biografia{
    text-align: center;
    background: #f1cc44;
    padding-top: 10px;
    height: 30px;
}
.acercar{
    margin-top: -70px;
}
/*fin biografia*/
/*finchat*/
.finchat{
  
    height: 500px;
    background: rgba(0, 0, 0, 0.64);
}
/*fin finchat*/