/* Yellow Surfer */


#arcade.yellow-surfer #progress-bar{
	background-color: #5b6ee1 !important;
	position:relative;
	height:25px !important;
}
#arcade.yellow-surfer #progress-track{
	overflow:visible;
	border:none;
	padding:0;
	height:25px;
}
#arcade.yellow-surfer #progress-bar::after{
	content:'';
	position:absolute;
	top: -51px;
	right: -51px;
	width: 102px;
	height: 90px;
	background-image: url('../images/loading_topper_surfer.gif');
    background-size: contain;
    background-repeat: no-repeat;
}
#arcade.yellow-surfer #progress-wrapper{
	height:200px;
	overflow:hidden;
}
#arcade.yellow-surfer .anim-blink-correct {
    animation: blink-surf-correct 0.6s ease-in-out forwards;
}

@keyframes blink-surf-correct {
    0%   { background-color: #1e1e1e; border-color: #444; }
    25%  { background-color: #007bff; border-color: #007bff; }
    50%  { background-color: #1e1e1e; border-color: #444; }
    75%  { background-color: #007bff; border-color: #007bff; }
    100% { background-color: #007bff; border-color: #007bff; }
}

#arcade.yellow-surfer{
	filter:drop-shadow(-15px 15px 4px rgba(0, 0, 0, 0.4));
}

#arcade.yellow-surfer + #background{
	background: url('../images/background_yellow.png') no-repeat center center;
	background-size:cover;
}

#arcade.yellow-surfer #central-hub.gameover::after{
	content: '';
	position: absolute;
	background: url('../images/background_yellow_addon_right.png') no-repeat center bottom;
	right: -88px;
	bottom: 0;
	height: 130%;
	width: 260px;
	background-size: contain;
	opacity: 0.5;
	filter: brightness(0.9);
}