@-webkit-keyframes mon-anim{
    0%   {opacity: 1;}
    50%  {opacity: 0.75;}
    100% {opacity: 1;}
}

@-webkit-keyframes enemie-damage{
    0%   {opacity: 1;}
    25%  {opacity: 0.5;}
    20%  {opacity: 1;}
    30%  {opacity: 0.5;}
    40%  {opacity: 1;}
    50%  {opacity: 0.5;}
    60%  {opacity: 1;}
    70%  {opacity: 0.5;}
    80%  {opacity: 1;}
    90%  {opacity: 0.5;}
    100% {opacity: 1;}
}

#background{
	height : 100%;
	background-image : url("../img/battlebacks/001-Grassland01.jpg");
	background-repeat : no-repeat;
	background-size : cover;
	background-position : center;
}

#text-box{
	margin : 2% 5% 0 5%;
	height : 8%;
	width : auto;
	font-size : 2.2vw;
	text-align : center;
	
}

.text{
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}

.box-style{
	
	background: -moz-linear-gradient(top,  rgba(30,87,153,0.8) 0%, rgba(41,137,216,0.8) 50%, rgba(32,124,202,0.8) 51%, rgba(125,185,232,0.8) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,0.8)), color-stop(50%,rgba(41,137,216,0.8)), color-stop(51%,rgba(32,124,202,0.8)), color-stop(100%,rgba(125,185,232,0.8))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(30,87,153,0.8) 0%,rgba(41,137,216,0.8) 50%,rgba(32,124,202,0.8) 51%,rgba(125,185,232,0.8) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(30,87,153,0.8) 0%,rgba(41,137,216,0.8) 50%,rgba(32,124,202,0.8) 51%,rgba(125,185,232,0.8) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(30,87,153,0.8) 0%,rgba(41,137,216,0.8) 50%,rgba(32,124,202,0.8) 51%,rgba(125,185,232,0.8) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(30,87,153,0.8) 0%,rgba(41,137,216,0.8) 50%,rgba(32,124,202,0.8) 51%,rgba(125,185,232,0.8) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc1e5799', endColorstr='#cc7db9e8',GradientType=0 ); /* IE6-9 */
	border-radius: 5px;
	border-style : ridge;
	border-color : rgba(255,255,255,0.8);
	border-width : 5px;
	-moz-box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.5);
	-webkit-box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.5);
	-o-box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.5);
	box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.5);
	filter:progid:DXImageTransform.Microsoft.Shadow(color=rgba(0,0,0,0.5), Direction=134, Strength=10);
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

#enemy-box{
	height : 25%;
	width : 90%;
	background-color : none;
	margin-left : auto;
	margin-right : auto;
	
}
#vague{
	height : 5vh;
	width : 90%;
	background-color : none;
	margin-left : auto;
	margin-right : auto;
	text-align: center;
	font-size: 2vw;
	line-height: 5vh;
	
}
#enemy-box-hp{
	height : 5vh;
	width : 90%;
	background-color : none;
	margin-left : auto;
	margin-right : auto;
	line-height: 5vh;
	
}

.enemy{
	height : 100%;
	width : 33%;
	background-color : none;
	display : inline-block;
	margin-right :0;
	margin-left : 0;
	background-size : contain;
	background-repeat : no-repeat;
	background-position : bottom;
}
.enemy-hp{
	width : 33%;
	background-color : none;
	display : inline-block;
	text-align: center;
	font-size: 2vw;
	line-height: 5vh;
	background-size : contain;
	background-repeat : no-repeat;
	background-position : bottom;
}

#e1{
	background-image : url("../img/battlers/067-Goblin01.png");
	-webkit-animation :"mon-anim 0.5s infinite" ;
}

#e2{
	background-image : url("../img/battlers/068-Goblin02.png");
	-webkit-animation : ;
}

#e3{
	background-image : url("../img/battlers/067-Goblin01.png");
	-webkit-animation : ;
}

#player-box{
	height : 30%;
	width : 90%;
	background-color : none;
	margin-left : auto;
	margin-right : auto;
	
}

.player{
	height : 100%;
	width : 33%;
	background-color : none;
	display : inline-block;
	margin-right : 0;
	margin-left : 0;
}

.player-menu{
	display : inline-block;
	width : 50%;
	height : 100%;
}

.play{
	width : auto;
	height : 50%;
}

#p1-play{

}

#p2-play{

}

#p3-play{

}

.btn {
	height : 20%;
	color: #ffffff;
	font-size: 2vw;
	background: rgba(255,255,255,0.0);
	padding: 8%;
	text-decoration: none;
}

.btn:hover {
  background: rgba(200,200,255,0.5);
  text-decoration: none;
}

.stats{
	font-size : 1.8vw;
	text-align : center;
	width : auto;
	height : 35%;
}

#p1-stats{

}

#p2-stats{
	
}

#p3-stats{
	
}


.img{
	display : inline-block;
	height : 100%;
	width : 50%;
	margin-left : 0%;
	background-size : contain;
	background-repeat : no-repeat;
	background-position : bottom;
}

#p1-img{
	background-image : url("../img/battlers/010-Lancer02.png");	
	-webkit-animation : ;
}

#p2-img{
	background-image : url("../img/battlers/021-Hunter02.png");
	-webkit-animation : ;
}

#p3-img{
	background-image : url("../img/battlers/039-Mage07.png");
	-webkit-animation : ;
}

.block{
	width : auto;
	height : 2%;
}