html {
	height: 100%;
}	

body {
	background: black;
	color: #378484;
	margin: 0;
	padding: 0;
	height: 100%;
}

body.cartas {
	background: #15161B url(../img/bg_cartas.png) center center;
	background-size: 1280px 100%;
    background-repeat: no-repeat;
}

body.home-personal {
	background: #1D1C29;	
}

ul, ul li {
	list-style: none;
	margin: 0;
	padding: 0;	
}

/* BG */ 

#bg {
	display: none;	
}

#bg, #bg img {
	height: 100%;
	position: absolute;
	width: 100%;
}

#bg img {
	display: none;
}

#glow-bg {
	height: 100%;
	opacity: 0;
	position: absolute;
	-webkit-transition: opacity 1.5s ease-out;
	transition: opacity 1.5s ease-out;
	width: 100%;		
}

#glow-bg.animar {
	-webkit-animation: animarGlowBg 3s infinite ease-in-out;
	animation: animarGlowBg 3s infinite ease-in-out;
	opacity: 0.5;
}

@-webkit-keyframes animarGlowBg  {
    0% { opacity: 1 }
	50% { opacity: 0.5 }
    100% { opacity: 1 }
}

@keyframes animarGlowBg  {
    0% { opacity: 1 }
	50% { opacity: 0.5 }
    100% { opacity: 1 }
}

#glow-bg img {
	display: none;	
	height: 100%;
	position: absolute;
	width: 100%;
}

@media all and (min-width: 1367px)  {

#bg img:nth-child(1),
#glow-bg img:nth-child(1) {
	display: block;	
}

}

@media all and (min-width: 1025px) and (max-width: 1366px) {

#bg img:nth-child(2),
#glow-bg img:nth-child(2) {
	display: block;	
}

}

@media all and (min-width: 801px) and (max-width: 1024px) {

#bg img:nth-child(3),
#glow-bg img:nth-child(3) {
	display: block;	
}

}

@media all and (max-width: 800px) {

#bg img:nth-child(4),
#glow-bg img:nth-child(4) {
	display: block;	
}

}

#contenedor {
	overflow: hidden;	
}

/* RELATOS */

#relatos {
	display: none;	
	left: 50%;
	position: absolute;
	top: 50%;
}
	
	.relato {
		text-align: center;
	}
		
	.relato:not(.actual) {
		display: none;
	}
	
		.relato h1 {
			font: normal 22px Varela, Arial, sans-serif;	
			margin: 0 0 19.2px 0;
		}
	
		.relato p {
			font: normal 16px Varela, Arial, sans-serif;
			line-height: 19.2px;
			margin: 0 0 19.2px 0;	
			position: relative;
			z-index: 2000;
		}

			.relato p b {
				color: #00FFFF;
				cursor: pointer;
				font-weight: normal;
			}
			
			.relato p b:hover {
				text-decoration: underline;
			}
			
/* MASCARA */	

#mascara {
	-webkit-animation: animarMascara 3s infinite ease-in-out;
	-webkit-animation-play-state: paused;
	animation: animarMascara 3s infinite ease-in-out;
	animation-play-state: paused;
	cursor: pointer;
	height: 465px;
	margin: 0 auto;
	position: relative;
	width: 364px;
}

#mascara.animar {
	-webkit-animation-play-state: running;
	animation-play-state: running;
}

@-webkit-keyframes animarMascara {
	0% { top: 0 }
	50% { top: -50px }
	100% { top: 0 }
}

@keyframes animarMascara {
	0% { top: 0 }
	50% { top: -50px }
	100% { top: 0 }
}

/* LOGO */

#logo {
	display: none;
	left: 50%;
	margin-left: -175px;
	position: absolute;
}

@media all and (min-width: 1367px) {
	#logo { bottom: 22% }
}

@media all and (min-width: 801px) and (max-width: 1366px) {
	#logo { bottom: 10% }		
}

@media all and (max-width: 800px) {
	#logo { bottom: 3% }
}
	
/* CONTROLES */
	
#btn-volver {
	bottom: 30px;
	cursor: pointer;
	height: 33px;
	left: 30px;
	opacity: 0.3;
	position: absolute;
	-webkit-transition: opacity 0.2s ease;
	transition: opacity 0.2s ease;
	width: 33px;
	z-index: 2000;
}

#btn-volver:hover {
	opacity: 1;	
}

#btn-volver.inactivo {
	opacity: 0;	
}

#btn-audio {
	bottom: 30px;
	cursor: pointer;
	display: none;
	height: 33px;
	right: 30px;
	opacity: 0.3;
	position: absolute;
	-webkit-transition: opacity 0.2s ease;
	transition: opacity 0.2s ease;
	width: 33px;
	z-index: 2000;
}

#btn-audio:hover {
	opacity: 1;	
}

#btn-relato {
	bottom: 30px;
	cursor: pointer;
	display: none;
	height: 33px;
	right: 30px;
	opacity: 0.3;
	position: absolute;	
	-webkit-transition: opacity 0.2s ease;
	transition: opacity 0.2s ease;
	width: 33px;
	z-index: 2000;
}

#btn-relato:hover {
	opacity: 1;	
}

/* CARTAS DE ROL */

.alert-success
 {
	/*font: normal 16px Varela, Arial, sans-serif;*/
	left: 50%;
	margin: -50px 0 0 -150px;
	position: absolute;
	top: 50%;
	z-index: 50;
}
	
	.alert-success button
	 {
		margin-left: 15px;	
	}
	
.panel-jugador {
	width: 15%;	
}

.panel-jugador.izq {
	float: left;
	text-align: center;
}

.panel-jugador.der {
	float: right;
	text-align: center;
}
	
	.mazo-jugador
	 {
		clear: both;	
		margin: 50px;
		text-align: center;	
	}
	
	#terminar-turno
	 {
		border: none;
		clear: both;	
		margin: 50px;
		opacity: 0.7;
		padding: 0;
		text-align: center;	
		-webkit-transition: opacity 0.2s ease;
		transition: opacity 0.2s ease;
	}
	
	#terminar-turno:hover
	 {
		opacity: 1;	
	}
	
	.info-jugador {
		clear: both;	
		margin: 50px;
	}
	
		.mana {	
			overflow: hidden;
		}
		
			.mana li {
				float: left;	
			}

	.avatar-jugador {
		clear: both;
		margin: 50px;
		text-align: center;
		z-index: 50;	
	}
	
		.avatar-jugador h1 {
			font: normal 22px Helvetica, Arial, Helvetica, sans-serif;
			text-transform: uppercase;	
		}

#mesa-juego {
	float: left;
	width: 50%;	
}

#mesa-jugador-uno {
	left: 50%;
	margin: 10px 0 0 -200px;
	top: 50%;
	position: absolute;	
}

	#mesa-jugador-uno article {
		background: white;
		cursor: pointer;
		display: inline-block;
		font: normal 15px Helvetica, Arial, sans-serif;
		height: 143px;
		margin: 0 10px;
		position: relative;
		width: 102px;	
	}
		
		#mesa-jugador-uno article img {
			width: 100%;	
		}
		
		#mesa-jugador-uno article .coste {
			position: absolute;
			right: 15px;	
			top: 15px;
		}
		
		#mesa-jugador-uno article .ataque {
			bottom: 15px;
			position: absolute;
			right: 15px;	
		}
		
		#mesa-jugador-uno article .defensa {
			bottom: 15px;
			left: 15px;	
			position: absolute;
		}
		
#mesa-jugador-dos {
	left: 50%;
	margin: -170px 0 0 -200px; 
	top: 50%;
	position: absolute;	
}

	#mesa-jugador-dos article {
		background: white;
		cursor: pointer;
		display: inline-block;
		font: normal 15px Helvetica, Arial, sans-serif;
		height: 143px;
		margin: 0 10px;
		position: relative;
		transform: rotate(-180deg);
		-ms-transform: rotate(-180deg);
		-webkit-transform: rotate(-180deg);
		width: 102px;	
	}
	
		#mesa-jugador-dos article img {
			width: 100%;	
		}
	
		#mesa-jugador-dos article .coste {
			position: absolute;
			right: 15px;	
			top: 15px;
		}
		
		#mesa-jugador-dos article .ataque {
			bottom: 15px;
			position: absolute;
			right: 15px;	
		}
		
		#mesa-jugador-dos article .defensa {
			bottom: 15px;
			left: 15px;	
			position: absolute;
		}

#mano-jugador-uno {
	bottom: 40px;
	margin-left: -200px;
	left: 50%;
	position: absolute;	
}

	#mano-jugador-uno article {
		background: white;
		cursor: pointer;
		display: inline-block;
		font: normal 15px Helvetica, Arial, sans-serif;
		height: 143px;
		position: relative;
		-webkit-transition: opacity 0.2s ease;
		transition: opacity 0.2s ease;
		width: 102px;	
	}
	
	#mano-jugador-uno article:nth-child(1) {
		bottom: -20px;
		right: -40px;
		transform: rotate(-14deg);
		-ms-transform: rotate(-14deg);
		-webkit-transform: rotate(-14deg);
	}
	
	#mano-jugador-uno article:nth-child(2) {
		right: -20px;
		transform: rotate(-7deg);
		-ms-transform: rotate(-7deg);
		-webkit-transform: rotate(-7deg);
	}
	
	#mano-jugador-uno article:nth-child(3) {
		top: -10px;
		z-index: 50;
	}
	
	#mano-jugador-uno article:nth-child(4) {
		left: -20px;
		transform: rotate(7deg);
		-ms-transform: rotate(7deg);
		-webkit-transform: rotate(7deg);
	}
	
	#mano-jugador-uno article:nth-child(5) {
		bottom: -20px;
		left: -40px;
		transform: rotate(14deg);
		-ms-transform: rotate(14deg);
		-webkit-transform: rotate(14deg);
	}
	
		#mano-jugador-uno article img {
			width: 100%;	
		}
		
		#mano-jugador-uno article .coste {
			position: absolute;
			right: 15px;	
			top: 15px;
		}
		
		#mano-jugador-uno article .ataque {
			bottom: 15px;
			position: absolute;
			right: 15px;	
		}
		
		#mano-jugador-uno article .defensa {
			bottom: 15px;
			left: 15px;	
			position: absolute;
		}
	
#mano-jugador-dos {
	left: 50%;
	margin-left: -200px;
	position: absolute;	
	top: 0;
}

	#mano-jugador-dos article {
		background: white;
		cursor: pointer;
		display: inline-block;
		font: normal 15px Helvetica, Arial, sans-serif;
		height: 143px;
		position: relative;
		-webkit-transition: opacity 0.2s ease;
		transition: opacity 0.2s ease;
		width: 102px;	
	}
	
	#mano-jugador-dos article:nth-child(1) {
		right: -40px;
		transform: rotate(-166deg);
		-ms-transform: rotate(-166deg);
		-webkit-transform: rotate(-166deg);
		top: -20px;
	}
	
	#mano-jugador-dos article:nth-child(2) {
		right: -20px;
		transform: rotate(-173deg);
		-ms-transform: rotate(-173deg);
		-webkit-transform: rotate(-173deg);
	}
	
	#mano-jugador-dos article:nth-child(3) {
		transform: rotate(-180deg);
		-ms-transform: rotate(-180deg);
		-webkit-transform: rotate(-180deg);
		z-index: 50;
	}
	
	#mano-jugador-dos article:nth-child(4) {
		left: -20px;
		transform: rotate(-187deg);
		-ms-transform: rotate(-187deg);
		-webkit-transform: rotate(-187deg);
	}
	
		#mano-jugador-dos article img {
			width: 100%;	
		}
			
		#mano-jugador-dos article .coste {
			position: absolute;
			right: 15px;	
			top: 15px;
		}
		
		#mano-jugador-dos article .ataque {
			bottom: 15px;
			position: absolute;
			right: 15px;	
		}
		
		#mano-jugador-dos article .defensa {
			bottom: 15px;
			left: 15px;	
			position: absolute;
		}