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

a{
  text-decoration: none;
  color: white;
}




body { 
  background: url(../imagenes/background_portada.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
	  

}


.titulo_header{
	font-size: 17px;
	text-align: right;
	margin-right: 20px;
}

.div_circulo, .div_circulo_grande {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
     -moz-border-radius: 50%;
     -webkit-border-radius: 50%;
     border-radius: 50%;
}

.div_circulo{
     width: 45px;
     height: 45px;
     border: 2px solid white;
     margin-right: 5px;
     cursor: pointer; 
 }

.div_circulo_grande{
	margin-top: 10px;
     width: 120px;
     height: 120px;
     border: 2px solid black;
 }

.tarjeta_jugador{
	width: 150px;
	border: 1px solid black;
	background: white;
	display:none;
	
	flex-direction: column;
	align-items: center;
	position: absolute;
	right:5px;
	top:53px;	
	box-shadow: 2px 2px 10px black;

}

.nombres{
	font-size: 14px;
	padding: 0px 3px 3px 3px ;
}

.apellido{
	font-size: 16px;
	margin-top: 3px;
	padding: 3px;
}

#salir{
	height: 60%;
	padding: 3px;
	margin-top: 3px;
}


header{
	height: 53px;
	width:100%;
	background: #1e6195;
	color: #fff;
	display: flex;
	padding: 5px;
	align-items: center;
	justify-content: space-between;
	z-index: 2000;
}

header label{
	font-size: 25px;
	cursor: pointer;
	display: none;
}



.logo_solo_texto{
	width:60%;
	max-width: 300px;
	
}


.boton_entrar{
	border: 2px solid;
	padding: 2px;
	width:70px;
	font-size: 15px;
	margin-bottom: 0px;
	margin-right: 5px;
}



#btn-menu{
	display: none;
}

.menu{
	display: flex;
	flex-direction: row;
	width:100%;
	justify-content: space-between;
	align-items: center;
	margin-left: 40px;
	z-index: 2001;
}

.menu ul{
	background: #1e6195;
	display: flex;
	list-style: none;
	
	font-size: 17px;
	
}

.menu ul ul {
	display: none;
}



ul a{
	display: block;
	padding: 10px 20px;
}



.menu a:hover{
	background: rgba(0,0,0,0.3);
}

.menu a span{
	margin-left: 10px;
}

.menu ul li:hover ul{
	display: block;
	position: absolute;
}



@media(max-width: 2000px){
	header label{
		display: block;
	}

	.menu{
		position: absolute;

		top:53px;
		left:0;
		margin-left: 0px;
		width: 100%;
		transform: translateX(-100%);
		transition: all 0.3s;
		background: #555;

	}

	.menu ul{
		display: block;
		background: #555;
		width:100%;
		justify-content: center;

	}

	.menu li{
		border: 1px solid #2d353c;
	}

	.menu ul li:hover ul{
		display: none;
		position: static;
	}

	.menu a span{
		position: absolute;
		right:5px; 
	}

	#btn-menu:checked ~ .menu{
		transform: translateX(0%);


	}
	#btn-menu:checked ~ .icon-cancel-outline{
		display:block;
	}

	#btn-menu:checked ~ .icon-menu-outline{
		display:none;
	}	


	#btn-menu:not(:checked) ~ .icon-cancel-outline{
		display:none;
	}



	.menu ul ul{
		background: rgba(0,0,0,0.4);

	}

	.menu ul ul a{
		padding: 15px 40px;
	}
	



	ul{
		text-align: center;

	}

}

@media(min-width: 650px){
	body{
		background:#39effc;
	}
}