.banner_background{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;


	background-color: #211f36;
	background-color: #0000008c;

	background-color: #333145;

	background: #897ef9;



	background: #8c7eff75;

	background: #5E55D0;


	opacity: .1;


	/*mix-blend-mode: multiply;
	*/

}


.banner{
	z-index: 30;
	position: relative;
	float: left;
	width: 100%;
	height: 100%;



	overflow: hidden;
	
	/*
	box-sizing: border-box;
	border-bottom: 30px solid #fff;
	*/
}

.banner_rotate{
	position: absolute;
	width: 120%;
	height: 120%;
	left: -10%;
	top: -10%;
	transform: rotate(3deg);
	opacity: .1;
}


.banner_container_left{
	position: relative;
	float: left;
	width: 55%;
	height: 100%;
	overflow: hidden;
}
.banner_container_right{
	position: relative;
	float: left;
	width: 45%;
	height: 100%;
	overflow: hidden;
}


.banner_container_50{
	position: relative;
	float: left;
	width: 50%;
	height: 50%;
	border-right: 15px solid #211f36;
	box-sizing: border-box;

	overflow: hidden;

}
.banner_container_100{
	position: relative;
	float: left;
	width: 100%;
	height: 50%;

	border-right: 15px solid #211f36;
	border-bottom: 15px solid #211f36;
	box-sizing: border-box;


	
}


.banner_image_0 {
	background-color: #4B4B87;
}

.banner_image_0 img{
	position: absolute;
	width: 20%;
	left: 50%;
	top: 50%;
	margin-left: -8%;
	margin-top: -10%;  
}


.banner_image_2{
background-color: #6380b5;
}

.banner_image_2 img{
	position: absolute;
	width: 80%;
	left: 50%;
	top: 50%;
	margin-left: -40%;
	margin-top: -40%;  
}


.banner_image_1{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/banner/office.png) no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;	
}

.banner_image_3{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/banner/zelda.gif) no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;	


}





.banner_text_container{
	position: absolute;
	width: 800px;
	height: auto;
	left: 50%;
	top: 50%;
	margin-left: -400px;
	margin-top: -150px;
}

.banner_text_container .buttonText{
	color: black;
}

.banner_text_container .myButton:hover{
	background: #4ec3ff
}
.banner_text_container .myButton:hover .buttonText{
	color: #fff;
}
.banner_text_container .myButton:hover .filter{
	filter: invert(96%) sepia(0%) saturate(0%) hue-rotate(150deg) brightness(105%) contrast(102%);
}


.banner_text_wrapper_left{
	position: relative;
	float: left;
	width: 30%;
	height: 100%;
}
.banner_text_wrapper_right{
	position: relative;
	float: left;
	width: 70%;
	height: 100%;
}


.profile_image_cointainer{
	position: relative;
	margin: 0 auto;

	width: 200px;
	height: 200px;
	border-radius: 100%;
	overflow: hidden;
	border: 7px solid #fff;
	box-sizing: border-box;
}
.profile_image{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/banner/profile-2.jpg) no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;	
}





/**********************/


.epmty{
	position: relative;
	float: left;
}


.wrapper{
	position: relative;
	float: left;
	width: 100%;
	height: 100%;
	background: #345;
	
	padding-top: 20px;
	padding-bottom: 20px;

	overflow: hidden;
}

.wrapper_responsive{

}

.container_info{
	position: absolute;
	left: 40px;
	top: 80px;
	width: 30%;
	height: auto;
	z-index: 10;
}


.container_info .title{
	position: relative;
	float: left;
	width: 100%;
	height: auto;
}

.container_info .genre{
	position: relative;
	float: left;
	width: 100%;
	height: auto;
}

.container_info .text{
	position: relative;
	float: left;
	width: 100%;
	height: auto;
}

.container_achievement{
	position: absolute;
	left: 40px;
	bottom: 0%;
	width: 380px;
	height: auto;
	z-index: 10;
}

.container_achievement .box{
	position: relative;
	float: left;
	width: 48%;
}

.container_achievement .box_0{
	width: 100%;
	position: relative;
	float: left;
	margin-bottom: 20px;
}


.container_achievement .box:last-child{
	position: relative;
	float: right;
	width: 47%;
}

.container_achievement .box:first-child{
	position: relative;
	float: left;
	width: 47%;
}


.container_achievement .box img{
	width: 100%;
}

.container_achievement:hover .box{
	opacity: .1;
} 

.container_achievement .box:hover{
	opacity: 1;
	transform: scale(1.1);
	cursor: pointer;
} 


/**** Button ****/

.myButtonContainer{
	position: relative;
	float: left;
	margin-top: 20px;
}


.myButton {
	background-color: #7f828e26;
	background-color: #f3f3f3;
	border-radius: 18px;
	display:inline-block;
	cursor:pointer;
	color:#7f828e9e;
	color: #acafbd;
	padding:6px 14px;
	text-decoration:none;

	margin-right: 10px;
}
.myButton:hover {
	background-color:#7F828E;
	color: #fff;
}
.myButton:active {
	position:relative;
	top:1px;
}

.buttonIcon{
	width: 20px;
	margin-right: 5px;
	position: relative;
	float: left;
}

.buttonText{
	position: relative;
	float: left;	
}






/********************** Game Specials ************************/ 




/***************************
All You Can Take 
****************************/

.all_you_can_take{
	background-color: #29263F;
}

.all_you_can_take .container_background_image{
	opacity: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/images/allyoucantake/allyoucantake_back.png) no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;	
}

.all_you_can_take .container_game{
	position: absolute;
	width: 45%;
	height: auto;
	right: 5%;
	bottom: 10%;
	transform: rotate(-2deg);
	border: 8px solid #fff;
	overflow: hidden;
}

.all_you_can_take .container_game video{
	width: 100%;
}

.all_you_can_take .myButton{
	background-color: #3C3957;
	color: #29263F;

	background-color: #565c8b;
	color: #29243f;
}

.all_you_can_take .filter{
	filter: invert(12%) sepia(16%) saturate(1728%) hue-rotate(207deg) brightness(94%) contrast(89%);
	filter: invert(16%) sepia(10%) saturate(3018%) hue-rotate(210deg) brightness(97%) contrast(86%);

	filter: invert(12%) sepia(22%) saturate(1336%) hue-rotate(211deg) brightness(92%) contrast(91%);
}

.all_you_can_take .myButton:hover{
	background-color: #fff;
}
.all_you_can_take .myButton:hover .buttonText{
	color: #3C3957;
}






/***************************
Spindle 
****************************/

.spindle{
	background-color: #000;
}



.spindle .container_forground_image{
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
}
.spindle .container_forground_image img{
	position: relative;
	float: left;
	height: 100%;
}

.spindle .container_game{
	position: absolute;
	height: 100%;
	left: 40%;
	top: 0%;
	overflow: hidden;	
}

.spindle .container_background_image{
}

.spindle .container_game video{
	margin-left: -200px;
	height: 100%;
}

.spindle .myButton{
	background-color: #1a1a1e;
	color: #3c3c46;
}

.spindle .filter{
	filter: invert(20%) sepia(8%) saturate(818%) hue-rotate(201deg) brightness(101%) contrast(90%);
}

.spindle .myButton:hover{
	background-color: #fff;
}
.spindle .myButton:hover .buttonText{
	color: #3C3957;
}


/***************************
masterwork 
****************************/


.masterwork{
	background-color: #F3B258;
	background-color: #2a2d40;
	background-color: #e4a64d;
}

.masterwork .container_info{
	width: 35%;
	z-index: 1;
}

.masterwork .container_background_image{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/images/master/masterwork_back.png) no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;	
}

.masterwork .container_game{
	position: absolute;
	width: 60%;
	height: auto;
	left: 0%;
	bottom: -10%;
	overflow: hidden;
	z-index: 0;
}

.masterwork .container_game img{
	width: 100%;
}





/***************************
Ninstar 
****************************/

.ninstar{
	background-color: #5E7D77;
	background-color: #365551;
}

.ninstar .container_background_image{
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 110%;
  opacity: .3;
}


.ninstar .bambus_1 img{
	position: absolute;
	bottom: 0;
	left: 40%;
	height: 100%;
	z-index: 1;
	transform-origin: bottom left;
}
.ninstar .bambus_2 img{
	position: absolute;
	bottom: 0;
	left: 50%;
	height: 100%;
	z-index: 0;
	transform-origin: bottom left;
}
.ninstar .bambus_3 img{
	position: absolute;
	bottom: 0;
	left: 60%;
	height: 100%;
	z-index: 1;
	transform-origin: bottom left;
}
.ninstar .bambus_4 img{
	position: absolute;
	bottom: 0;
	left: 70%;
	height: 100%;
	z-index: 0;
	transform-origin: bottom left;
}
.ninstar .bambus_5 img{
	position: absolute;
	bottom: 0;
	left: 80%;
	height: 100%;
	z-index: 0;
	transform-origin: bottom left;
}
.ninstar .bambus_6 img{
	position: absolute;
	bottom: 0;
	left: 95%;
	height: 100%;
	z-index: 0;
	transform-origin: bottom left;
}

.ninstar .container_game{
	position: absolute;
	width: 56%;
	height: auto;
	right: 0%;
	bottom: 5%;
	z-index: 3;
	overflow: hidden;
	border: 8px solid #fff;
	transform: rotate(2deg);
}

.ninstar .container_game video{
	width: 100%;
}

.ninstar .myButton{
	background-color: #4b6863;
	color: #62817c;
}

.ninstar .filter{
	filter: invert(72%) sepia(2%) saturate(4773%) hue-rotate(130deg) brightness(64%) contrast(68%);
}

.ninstar .myButton:hover{
	background-color: #fff;
}
.ninstar .myButton:hover .buttonText{
	color: #000;
}
.ninstar .myButton:hover .filter{
	filter: invert(0%) sepia(4%) saturate(7500%) hue-rotate(207deg) brightness(104%) contrast(104%);
}







/***************************
Alien Escape 
****************************/

.alienescape{
	background-color: #333145;
}

.alienescape .container_background_image{
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  /*
  background: url(../img/images/alienescape/alienescape_back.svg) no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  */
}

.alienescape .leftTop{
	position: absolute;
	left: 2%;
	top: 5%;
}
.alienescape .leftBottom{
	position: absolute;
	left: 2%;
	bottom: 5%;
}
.alienescape .rightTop{
	position: absolute;
	right: 2%;
	top: 5%;
}
.alienescape .rightBottom{
	position: absolute;
	right: 2%;
	bottom: 5%;
}



.alienescape .container_game-first{
	position: absolute;
	width: 27%;
	height: auto;
	top: 15%;
	right: 32%;
	overflow: hidden;
	transform: rotate(-4deg);
}

.alienescape .container_game-second{
	position: absolute;
	width: 27%;
	height: auto;
	right: 0%;
	bottom: 15%;
	overflow: hidden;
	transform: rotate(4deg);
}

.alienescape .container_game-first img{
	width: 100%;
}
.alienescape .container_game-second img{
	width: 100%;
}

.alienescape .myButton{
	background-color: #3D3B52;
	background-color: #2d2b3d;
	color: #272631;
	color: #494563;
}

.alienescape .filter{
	filter: invert(20%) sepia(14%) saturate(903%) hue-rotate(206deg) brightness(93%) contrast(96%);
	filter: invert(10%) sepia(10%) saturate(1574%) hue-rotate(206deg) brightness(95%) contrast(86%);
	filter: invert(26%) sepia(11%) saturate(1602%) hue-rotate(208deg) brightness(90%) contrast(83%);
}

.alienescape .myButton:hover{
	background-color: #fff;
}
.alienescape .myButton:hover .buttonText{
	color: #3C3957;
}





/***************************
Lost in Deep 
****************************/

.lostindeep{
	background-color: #000;
}

.lostindeep .container_background_image{
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background: url(../img/images/lostindeep/lostindeep_back.png) no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.lostindeep .container_game{
	position: absolute;
	width: 40%;
	height: auto;
	bottom: 20%;
	right: 15%;
	overflow: hidden;
	transform: rotate(-2deg);
}

.lostindeep .container_game img{
	width: 100%;
}

.lostindeep .myButton{
	background-color: #242536;
	color: #46475b;
}

.lostindeep .filter{
	filter: invert(25%) sepia(22%) saturate(507%) hue-rotate(199deg) brightness(96%) contrast(88%);
}

.lostindeep .myButton:hover{
	background-color: #fff;
}
.lostindeep .myButton:hover .buttonText{
	color: #3C3957;
}




/***************************
Climb Jump 
****************************/

.climbjump{
	background-color: #6b5979;
}

.climbjump .container_background_image{
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
}

.climbjump .container_game{
	position: absolute;
	width: 100%;
	height: auto;
	bottom: 0%;
	right: 0%;
	overflow: hidden;
}

.climbjump .container_game video{
	width: 100%;
}

.climbjump .myButton{
	background-color: #5f4e6c;
	color: #7b678b;
}

.climbjump .filter{
	filter: invert(44%) sepia(27%) saturate(440%) hue-rotate(230deg) brightness(91%) contrast(85%);
}

.climbjump .myButton:hover{
	background-color: #fff;
}
.climbjump .myButton:hover .buttonText{
	color: #3C3957;
}
.climbjump .myButton:hover .filter{
	filter: invert(18%) sepia(6%) saturate(4287%) hue-rotate(206deg) brightness(92%) contrast(81%);
}




/***************************
Thunder Runner 
****************************/

.thunderrunner{
	background-color: #221F36;
}

.thunderrunner .container_foreground_image{
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background: url(../img/images/thunderrunner/thunderrunner_front.svg) no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.thunderrunner .container_game{
	position: absolute;
	width: 60%;
	height: auto;
	right: 2%;
	bottom: 10%;
	overflow: hidden;
}

.thunderrunner .container_game video{
	width: 100%;
	top: -2000px;
}

.thunderrunner .myButton{
	background-color: #1c1b2d;
	color: #373551;
}

.thunderrunner .filter{
	filter: invert(21%) sepia(4%) saturate(3828%) hue-rotate(205deg) brightness(95%) contrast(96%);
}

.thunderrunner .myButton:hover{
	background-color: #fff;
}
.thunderrunner .myButton:hover .buttonText{
	color: #3C3957;
}