html {
	height: 100%;
}	

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

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

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

.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;	
	}
	
#contenedor {
	height: 100%;
	width: 100%;	
}
	
.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;
		}