.game {
	margin:75px 0;
	padding-bottom:39px;
	overflow: hidden;
}
.game .game-front {
	position: relative;
	margin:0 auto;
	display: inline-block;
}
.game .game-front .reset-icon {
	position: absolute;
	left:0px;
	bottom:0px;
	padding:20px;
	font-size: 2em;
	cursor: pointer;
	border-radius:0 30px 0 0;
	background: -moz-linear-gradient(45deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0) 100%);
	background: -webkit-linear-gradient(45deg, rgba(0,0,0,0.15) 0%,rgba(0,0,0,0) 100%);
	background: linear-gradient(45deg, rgba(0,0,0,0.15) 0%,rgba(0,0,0,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#47000000', endColorstr='#00000000',GradientType=1 );
	color:#ffffff;
	text-shadow: 0 0 10px rgba(0,0,0,0.25);
	z-index: 2;
}

.joff-map-tooltip {
	border: 2px solid #eee;
	background: #555555;
	color: #ffffff;
	width: auto;
	padding: 10px;
	margin: 4px;
	font-size: 25px;
	text-align: center;
	border-radius: 3px;
}

/*simple game defaults*/

.game.simple {display: inline-block;}
.game.simple img {display: none;}
.game.simple img.active {display: block;}

/*working with the image resizing*/
.game.simple.image {display: block;}
.game .game-front-wrap {margin:0 auto;}
.game .game-front-wrap .game-front {}
.game.simple.image .game-front-wrap .game-front {
	border-radius: 3px;
	overflow: hidden;
}

/*image map full screen*/
@media only screen
	and (max-device-width: 1024px) {

	.game.simple.image .game-front-wrap {
		padding: 40px;
		background: #555555;
		position: fixed;
		left: 0px;
		top: 0px;
		height: 100%;
		width: 100%;
		z-index: 1040;
	}
	.single-game div#page.hfeed.site {min-height: 100vh;}
	.game.simple.image .game-front-wrap .game-front {
		top: 50%;
		left: 50%;
		-webkit-transform: translateY(-50%) translateX(-50%);
		-ms-transform: translateY(-50%) translateX(-50%);
		transform: translateY(-50%) translateX(-50%);
	}

	/*.game.simple.image .game-front .reset-icon {
		display: none;
	}*/

}

/*@media only screen
	and (max-device-width: 1024px)
	and (orientation: portrait) {

		.game.simple.image .game-front-wrap .game-front {
			-webkit-transform: translateY(-50%) translateX(-50%) rotate(90deg);
			-ms-transform: translateY(-50%) translateX(-50%) rotate(90deg);
			transform: translateY(-50%) translateX(-50%) rotate(90deg);
			width:80vh;
		}
}*/

/*complex game defaults*/
.game.complex .game-front {
	width:100%;
	min-height: 500px;
	padding:0 0 15px;
	border-radius: 10px;
	border:1px solid #dddddd;
	margin:0 auto 30px;
}
.game.complex .game-front .game-header {
	padding:15px;
	background:#555555;
	color:#eeeeee;
	margin:0 0 15px;
	border-radius: 10px 10px 0 0;
}
.game.complex .game-front .game-header span.score-text {
	display: inline-block;
	line-height: 1;
	padding: 3px 7px;
	white-space: nowrap;
	vertical-align: middle;
}
.game.complex .game-front .game-header span.badge.score {
	padding: 0 7px 3px;
	font-size: 25px;
}
.game.complex .game-front .game-header .progress {
	margin:0 0 0 0;
	height: 30px;
}

.game.complex .game-front .start-again {
	position: absolute;
	left: 5px;
	top: 0;
	font-size: 29px;
	cursor: pointer;
}

/*looping elements*/
.game.complex .game-front .game-input {
	position: absolute;
	bottom:15px;
	width: 100%;
	bottom: 0px;
	padding: 10px 10px;
	background: #eee;
	border-radius: 0 0 10px 10px;
	/*display: none;*/
}
.game.complex .game-front .play-again button.btn.btn-lg.btn-success.btn-block,
.game.complex .game-front .game-input button.btn.btn-lg.btn-primary.btn-block {
	box-shadow: 0 -5px 0 rgba(0,0,0,0.025);
	border: none;
}

/*top area*/
.game.complex .game-front .home-wrap,
.game.complex .game-front .bar-wrap {padding:0;}
@media only screen and (max-width: 992px) {
	.game.complex .game-front .bar-wrap {padding:0 0 0 25px;}
}

.game.complex .game-front .game-message {
	padding:50px 10px;
	background: #ffffff;
	margin:auto;
	max-width: 45%;
	border-radius: 6px;
	box-shadow: 0 5px 0 rgba(0,0,0,0.025);
	display: none;
	position: relative;
}
.game.complex .game-front .game-message .play-again {display: none;}
/*.game.complex .game-front .game-message.show {
	display: block;
	margin:50px auto;
}*/

/*media element*/
.mejs-offscreen {display: none;}
.game.complex .game-front .audio-section {display:none;}
.game.complex .game-front .audio-section .note {display: none;}

.game.complex .game-front .audio-load {
	display:none;
	position:absolute;
	left:50%;
	margin-left:-100px;
	bottom:25px;
}
.game.complex .game-front .audio-load .audio-bars {
    height: 40px;
    position: relative;
    display: block;
    width: 200px;
    margin: 50px auto;
    border-right: 2px solid #337ab7;
    border-left: 2px solid #337ab7;
}
.game.complex .game-front .audio-load .audio-bar {
	border-top: 2px solid #337ab7;
    bottom: 1px;
    height: 3px;
    position: absolute;
    width: 10%;      
    animation: sound 1.5s linear;
}

@keyframes sound {
    0% {
		opacity: 0;
        height: 0px; 
    }
    50% {
        opacity: 1;       
        height: 100%;        
    }
    100% {
		opacity: 0;
        height: 0px; 
    }
}

.game.complex .game-front .audio-load .audio-bar:nth-child(1)  { left: 0%; animation-duration: 1000ms; }
.game.complex .game-front .audio-load .audio-bar:nth-child(2)  { left: 10%; animation-duration: 1050ms; }
.game.complex .game-front .audio-load .audio-bar:nth-child(3)  { left: 20%; animation-duration: 1200ms; }
.game.complex .game-front .audio-load .audio-bar:nth-child(4)  { left: 30%; animation-duration: 1150ms; }
.game.complex .game-front .audio-load .audio-bar:nth-child(5)  { left: 40%; animation-duration: 1400ms; }
.game.complex .game-front .audio-load .audio-bar:nth-child(6)  { left: 50%; animation-duration: 1250ms; }
.game.complex .game-front .audio-load .audio-bar:nth-child(7)  { left: 60%; animation-duration: 1500ms; }
.game.complex .game-front .audio-load .audio-bar:nth-child(8)  { left: 70%; animation-duration: 1350ms; }
.game.complex .game-front .audio-load .audio-bar:nth-child(9)  { left: 80%; animation-duration: 1600ms; }
.game.complex .game-front .audio-load .audio-bar:nth-child(10) { left: 90%; animation-duration: 1450ms; }

.game.complex .score-loading {
	position: absolute;
	width: 100%;
	height: 100%;
	text-align: center;
	background: rgba(0, 0, 0, 0.25);
	color: #ffffff;
	z-index: 9999;
	border-radius: 10px;
	display: none;
}
.game.complex .score-loading .fa-spinner {
	position: absolute;
	left:50%;
	top: 50%;
	margin:-21px;
}

/*break points*/
/* Small Devices, Tablets */
@media only screen and (min-device-width: 320px) and (max-device-width: 736px) {

	.game.complex .game-front-wrap {
		position: fixed;
		top:0;
		left:0;
		padding:10px;
		background:#555555;
		width:100%;
		height:100%;
		z-index: 9999;
	}

	.game.complex .game-front-wrap .game-front {
		height:100%;
	}

	.game.complex .game-front .game-message {max-width: 75%;}
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
	/*IOS < 10 fallback*/
	.game.complex .game-front-wrap .game-front .ios-play {
		display: inline-block;
		padding:12px 10px 10px 17px;
		margin:20px auto;
		height:50px;
		width:50px;
		border-radius: 50%;
		font-size: 25px;
		border:#999 solid 1px;
		box-shadow: 0 0 5px rgba(0,0,0,0.25);
		color:#68b1d5;
	}

	.game.complex .ios-play-wrapper {
		display: none;
		margin:20% auto;
	}

	.game.complex .game-front-wrap .game-front .ios-play-wrapper.show {
		display: block;}
}

/* Extra Small Devices, Phones */ 
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 736px) 
  and (orientation: landscape) { 

	.game.complex .game-front-wrap {
		position: fixed;
		top:0;
		left:0;
		padding:10px;
		background:#555555;
		width:100%;
		height:100%;
		z-index: 9999;
	}

	.game.complex .game-front-wrap .game-front {
		max-height:98%;
		min-height: 98%;
		height:98%;
	}
  	
	/*IOS < 10 fallback*/
	.game.complex .game-front-wrap .game-front .ios-play {
		display: inline-block;
		padding:7px 10px 7px 10px;
		margin:2px auto 0;
		height:30px;
		width:30px;
		border-radius: 50%;
		font-size: 15px;
		border:#999 solid 1px;
		box-shadow: 0 0 5px rgba(0,0,0,0.25);
		color:#68b1d5;
	}
	
	.game.complex .ios-play-wrapper {
		display: none;
		margin:0 auto;
	}

	.game.complex .ios-play-wrapper h1 {
		font-size: 22px;
		margin:0 0 5px;
	}

	.game.complex .game-front-wrap .game-front .ios-play-wrapper.show {
		display: block;}

	.game.complex .game-front .game-message {
		padding: 15px 10px;
		text-align: center;
	}

	.game.complex .game-front .game-message hr {
		display:none;
	}
	
	.game.complex .game-front .game-message .play-again.show,
	.game.complex .game-front .game-message .btn.btn-block.button-again,
	.game.complex .game-front .game-message h1 {
		display:inline-block!important;
	}
	.game.complex .game-front .game-message .play-again.show {margin-top:-12px;}
	.game.complex .game-front .game-message h1 {
		margin-right:10px;
	}

}
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 736px) 
  and (orientation: portrait) { 

	.game.complex .game-front-wrap {
		position: fixed;
		top:0;
		left:0;
		padding:10px;
		background:#555555;
		width:100%;
		height:100%;
		z-index: 9999;
	}

	.game.complex .game-front-wrap .game-front {
		max-height:98%;
		min-height: 98%;
		height:98%;
	}
  	
	/*IOS < 10 fallback*/
	.game.complex .game-front-wrap .game-front .ios-play {
		display: inline-block;
		padding:12px 10px 10px 17px;
		margin:20px auto;
		height:50px;
		width:50px;
		border-radius: 50%;
		font-size: 25px;
		border:#999 solid 1px;
		box-shadow: 0 0 5px rgba(0,0,0,0.25);
		color:#68b1d5;
	}
	
	.game.complex .ios-play-wrapper {
		display: none;
		margin:20% auto;
	}

	.game.complex .game-front-wrap .game-front .ios-play-wrapper.show {
		display: block;}

}
a.reset-game {color: #68b1d5;}
a.reset-game:hover {color: #ffffff;}
a.reset-game.disabled,
a.reset-game.disabled:hover {color: #aaaaaa;}

/*complex game branding start*/
.game.complex .game-front {
	background: rgb(30,87,153);
	background: -moz-linear-gradient(left, rgba(30,87,153,1) 0%, rgba(52,58,64,1) 100%);
	background: -webkit-linear-gradient(left, rgba(30,87,153,1) 0%,rgba(52,58,64,1) 100%);
	background: linear-gradient(to right, rgba(30,87,153,1) 0%,rgba(52,58,64,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#343a40',GradientType=1 );
	box-shadow: inset 0 0 350px rgba(255, 255, 255, 0.12);
}
.game.complex .ios-play-wrapper {
	color:#ffffff;
	background-color: #626262;
	padding:20px 0;
	width:100%;
	margin: 0 0 0 0;
}
/*home link over logo START----*/
.game.complex .game-front .home-over-logo {
	display: block;
	position: absolute;
	/*border: #737373 solid 1px;*/
}
.game.complex .game-front .home-over-logo {
	bottom:        130px;
	left:          50%;
	width:         300px;
	height:        65px;
	margin-left:   -150px;
}
/*tablet----------*/
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1280px)
and (orientation: landscape) {
	.game.complex .game-front .home-over-logo {
		bottom:        130px;
	}
}
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1280px)
and (orientation: portrait) {
	.game.complex .game-front .home-over-logo {
		bottom:        130px;
	}
}
/*mobile----------*/
@media only screen
and (max-device-width: 736px)
and (orientation: portrait) {
	.game.complex .game-front .home-over-logo {
		bottom:        120px;
		width:         150px;
		height:        35px;
		margin-left:   -75px;
	}
}
@media only screen
and (max-device-width: 736px)
and (orientation: landscape) {
	.game.complex .game-front .home-over-logo {display:none!important;}
}
/*home link over logo END----*/
@media only screen and (max-device-width: 1024px) {
	.game.complex .game-front {
		background-position: center 70%;
		background-size: auto;
	}
	.game.complex .game-front .game-message {max-width: 90%;}
}
@media only screen and (max-device-width: 736px) {
	.game.complex .game-front {
		background-position: center 70%;
		background-size: 150px auto;
	}
	.game.complex .game-front .game-message {max-width: 90%;}
}
@media only screen and (max-device-width: 736px) and (orientation: landscape) {
	.game.complex .game-front {
		background-position: center;
		background-size: 90px auto;
	}
	.game.complex .game-front .game-message {max-width: 90%;}
	.game.complex .game-front .game-message .btn.btn-block.button-again {margin-top:-13px;}
}
/*complex game branding end*/