/* FONTS */
	@font-face {
	    font-family: 'Helvetica Neue';
	    src: url("HelveticaNeueBold.woff") format("woff");
	    font-weight: 700;
	    font-style: normal;
	}		
	
	.container_game { display: flex; color: white; text-align: center; align-items: center; flex-direction: column; font-family: "Cardenio Modern"; }
	.container_game div.container_game-col { margin: 20px auto; }
	.container_game.start-game div.container_game-col-buttons { margin-top: 40px; }
	#round-selector-form { margin-top: -20px; transform: translateX(20px); }
	.container_game-col-buttons { transform: translateX(-20px); }
	.container_game div.container_game-col-timer { height: 0; margin: 20px auto 10px auto; display: flex; }
	.timer-start div.instructions, .timer-running div.instructions, .start-game #counter { display: none; }
	.timer-finished div.instructions { display: block; text-align: left; font-size: 1.05em; text-align: center; }
	.timer-finished div.instructions ul { list-style: none; padding: 0 20px; margin-top: 0; }
	.timer-finished div.instructions ul li { padding: 10px 0; position: relative; line-height: 1.2em; }
	.timer-finished div.instructions ul li:after { content: ""; position: absolute; width: 0.25em; height: 0.25em; border-radius: 50%; background: #fff; bottom: 0; left: 50%; margin-bottom: -0.2em; transform: translateX(-50%); box-shadow: 0.65em 0px 0px #fff, -0.65em 0px 0px #fff; }
	.timer-finished div.instructions ul li:last-child:after { display: none; }
	.timer-finished .back { background: #000; color: #FFF; }
	#card {
		position: relative;
		width: 260px;
		height: 364px;
		perspective: 500px;
		margin: 0 auto;
		-webkit-filter: drop-shadow(-5px 5px 5px rgba(0,0,0,0.4));
		filter: drop-shadow(-5px 5px 5px rgba(0,0,0,0.4));
	}
		
	.content {
		position: absolute;
		width: 100%;
		height: 100%;
		transition: transform 1s;
		transform-style: preserve-3d;
	}
		
	.content-flipped {
		transform: rotateY( 180deg ) ;
		transition: transform 0.5s;
	}
		
	.front, .back {
		position: absolute;
		height: 100%;
		width: 100%;
		background: transparent;
		color: #FFF;
		text-align: center;
		border-radius: 20px;
		backface-visibility: hidden;
		display: flex;
	    flex-direction: column;
		justify-content: center;
		align-items: center;
		background-position: 50% 50%; 
		background-size: cover;
	}
	
	.front {
		text-indent: -9999px;
		opacity: 0;
		transition: opacity 0.5s ease-in;
	}
	.shuffled .front {
		opacity: 1;
		transition: opacity 0.5s ease-in;
	}
		
	.back {
		background: #FFF;
		color: #03446A;
		transform: rotateY( 180deg );
	}
	
	.end-card {
		position: absolute;
		height: 100%;
		width: 100%;
		text-align: center;
		border-radius: 20px;
		backface-visibility: hidden;
		display: flex;
	    flex-direction: column;
		justify-content: center;
		align-items: center;
		background: #FFF;
		color: #03446A;
		transform: rotateY( 0deg );
		opacity: 0;
	}
	.content-end-game .end-card { opacity: 1; }
	
	h2#counter { font-family: 'Helvetica Neue', Arial, sans-serif; font-weight: 700; letter-spacing: -1px; color: #000; font-size: 2em; padding: 10px; }
	.timer-finished	h2#counter { border-bottom: 3px solid #FFF; padding-bottom: 10px; width: 90%; font-size: 1.6em; padding-top: 0; color: #FFF; margin-bottom: 15px; }


	
	button.play, input#submit {
		background-image: url('https://manicminute.com/wp-content/uploads/buy-button-download.svg');
	    background-size: cover;
	    background-position: 50% 50%;
	    background-color: transparent !important;
	    font-size: 28px;
	    color: #000;
	    width: 300px;
	    height: 100px;
	    padding: 0px 0 30px 30px;
	    outline: 0;
	    border: 0;
	    transition: all 0.3s ease-in; 
	    transform: translateX(-10px) scale(1);
	    cursor: pointer;
	    font-weight: 300;
	}
	button.play:hover, input#submit:hover { transform: translateX(-10px) scale(1.1); transition: transform 0.2s ease-in; }
	.timer-running button.play { width: 340px; padding: 0px 0 30px 30px; transition: width 0.3s ease-in; cursor: default; }
	.timer-running button.play:hover /* , .timer-end-game button.play:hover */ { transform: translateX(-10px) !important; }
/* 	.timer-end-game button.play { cursor: default; } */

	button.mute.muted {
	    background-position: 50% 100%; transition: 0s background-position;
	}
	
	#countdown { border: 3px solid black; border-radius: 10px; /* padding: 15px 20px 15px 20px; */ font-size: 32px; line-height: 28px; background: #147414; transform: translateY(150px); transition: all 0.5s ease-in; height: 64px; width: 120px; justify-content: center; align-items: center; display: inline-flex; opacity: 0; }
	#countdown em { font-style: normal; margin-left: 6px; /* display: block; font-size: 20px; */ }
	#skipper { border: 3px solid black; border-radius: 10px; font-size: 20px; line-height: 24px; background-color: rgba(0,0,0,0.4); color: #fff; height: 64px; width: 70px; margin-left: 10px; justify-content: center; align-items: center; -webkit-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; display: none; transition: background-color 0.3s ease-in; }
	#skipper:hover { background-color: rgba(0,0,0,1); transition: background-color 0.3s ease-in; }
	.timer-start #countdown, .timer-running #countdown, .timer-finished #countdown { transform: translateY(0px); transition: all 0.5s ease-in; }
	.timer-running #skipper { display: inline-flex; }
	.timer-start button.mute, .timer-running button.mute, .timer-finished button.mute { display: inline; }
	.timer-finished #countdown { background: #741414; width: 150px; }
	.shuffle-cards { display: none; }
	.start-game .shuffle-cards { display: block; position: relative; z-index: 1; }
	.start-game .shuffle-cards ul { list-style: none; padding: 0; }
	.start-game .shuffle-cards ul li { position: absolute; top: 0; left: 0; transform-origin: bottom center; }
	.timer-end-game .back .instructions, .timer-end-game .back h2#counter { text-indent: -9999px; opacity: 0; }
	
	.start-game .shuffle-cards ul.started li { transform: rotate(0deg) translateX(0px) !important; transition: transform 0.5s ease-in; }
	
	@-webkit-keyframes flasher {
	    0% { opacity:0; }
	    50% { opacity:1; }
	    100% { opacity:0; }
	}
	body.flasher:before { content: ''; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: #fff !important; z-index: 999999999 !important; pointer-events: none;
		opacity: 0;
	    -webkit-animation-name: flasher;
	    -webkit-animation-duration: 500ms;
	    -webkit-animation-iteration-count: 1;
	    -webkit-animation-timing-function: ease-in-out;
	}
	
	.round-selector {
		position: absolute;
		height: 100%;
		width: 100%;
		background: #FFF;
		color: #000;
		text-align: center;
		border-radius: 20px;
		backface-visibility: hidden;
		display: flex;
	    flex-direction: column;
		justify-content: center;
		align-items: center;
		background-position: 50% 50%; 
		background-size: cover;
		z-index: 1;
		padding: 20px;
	    font-size: 2.1em;
	    line-height: 1.2;
	}
	.round-selector label { margin-bottom: 20px; }
	.round-selector select { border: 3px solid #000; border-radius: 8px; padding: 2px 6px; font-size: 0.8em; }
	.shuffle-cards img {
		filter: drop-shadow(0px 0px 1px rgba(255,255,255,0.7));
	    -webkit-filter: drop-shadow(0px 0px 1px rgba(255,255,255,0.7));
	    -moz-filter: drop-shadow(0px 0px 1px rgba(255,255,255,0.7));
    }
    
    
	#card.original .front, .timer-end-game #card.original .back { background-image: url('mm_card_original.png'); background-size: cover; }
	#card.food .front, .timer-end-game #card.food .back { background-image: url('mm_card_food.png'); background-size: cover; }
	#card.geography .front, .timer-end-game #card.geography .back { background-image: url('mm_card_geography.png'); background-size: cover; }
	#card.history .front, .timer-end-game #card.history .back { background-image: url('mm_card_history.png'); background-size: cover; }
	#card.nsfw .front, .timer-end-game #card.nsfw .back { background-image: url('mm_card_nsfw.png'); background-size: cover; }
	#card.christmas .front, .timer-end-game #card.christmas .back { background-image: url('mm_card_christmas.png'); background-size: cover; }
	#card.spooky .front, .timer-end-game #card.spooky .back { background-image: url('mm_card_spooky.png'); background-size: cover; }
	#card.easter .front, .timer-end-game #card.easter .back { background-image: url('mm_card_easter.png'); background-size: cover; }
	button.mute {
		background-image: url('icon-mute.png');
	    background-size: cover;
	    background-position: 50% 0%;
	    background-color: transparent !important;
        width: 40px;
	    height: 40px;
	    text-indent: -9999px;
	    padding: 0;
	    outline: 0;
	    border: 0;
	    transition: 0s background-position;
	    cursor: pointer;
	    display: none;
	}
	body.easter button.mute { background-image: url('icon-mute-dark.png'); }
	button.play { display: none; }
	
	@media only screen and (max-width: 767px) {
		button.play { font-size: 20px; width: 220px; height: 80px; padding: 0px 0 20px 20px; }
		.timer-running button.play { width: 280px; height: 100px; padding: 0 0 25px 25px; }
		h2#counter { font-size: 2em; }
		.container_game div.container_game-col-buttons { margin: 0px auto 20px auto; }
	}