@charset "UTF-8";
/* CSS Document */

.progress .meter {
	width: 45.225%;
	height: 100%;
	background: #09f;
	float: left;
}

.mini-card {
	border: 1px solid #CCC;
	background: white;
	border-radius: 3px;
	width: 48px;
	text-align: center;
	padding-top: 22px;
	padding-bottom: 22px;
	display: inline-block;
}

.mini-card.red {
	color: red;
}

#poker-take-back-modal .mini-card {
	cursor: pointer;
}
#poker-take-back-modal .mini-card:hover {
	background: #eef;
}


/* MODAL STYLES */

#game_splash #top-country-flags {
	overflow: hidden;
	white-space: nowrap;
}
#game_splash #top-country-flags img {
	height: 32px;
	width: 32px;
	margin: 0 1px;
}

	.reveal-modal {
		background:url(/images/site/games/zackjack/bg-zackjack_modal.png);
    box-shadow: inset 0 25px 50px -30px #000;
	}

	.reveal-modal h3 {
		font-weight:700;
	}

	#zackjack-burn-modal {
		text-align:center;
	}

	#zackjack-burn-modal .matchbox {

	}

.card_score .hand-value:not(:first-child)::before {
	content: " / ";
}

.card_row .card {
	box-shadow: -3px 3px 6px #333, 0px 0px 0px #000;
	cursor: pointer;
}

.card.border {
	border: 1px solid #cacaca;
}

.card {
	width:80px;
	height:100px;
	box-shadow: -3px 3px 6px #333, 0px 0px 15px #000;
  border-radius: 6px;
}

	#loading {

		width:100%;
		height:550px;
		background:rgba(0,0,0,.8);
		color:#fff;
		text-align:center;
		display:table;
		position:absolute;
		top:0;
		bottom:0;
		z-index:10000;
	}

	#loading div {
		display:table-cell;
		vertical-align:middle;
	}

	#loading h2 {
		font-weight:900;
		font-size:2.5rem;
		color:#fff;
	}

	#zackwrap {
		width:1000px;
		margin:0 auto;
		position:relative;
		overflow:hidden;
	}


	/* points colors */
	.did-win {
		color:#fff!important;
		text-shadow:1px 1px 5px #fff;
	}

	.close-to-win	{
		color:#CF3!important;
		text-shadow:1px 1px 5px #CF3;
	}

	/* zj splash */
	#game_splash {
		background:url(/images/site/games/poker/mbg-desktopGMP.jpg) top center;
		background-size:cover;
		z-index:2001;
		/*position:absolute;
		top:0;
		left:0;	*/
		/*height:550px;*/
		padding-bottom: 50px;
		width:1000px;
		text-align:center;
		padding-top:175px;
		color:#fff;
	}

	.post {
		background:url(/images/site/games/poker/mbg-desktopGMP.jpg) top center!important;
		background-size:cover!important;
		background-repeat:no-repeat;
		padding-top:100px!important;
	}

	.postgame p {
		font-size:.75rem!important;
	}

	#game_splash h2 {
		font-weight:900;
		text-shadow:1px 1px 3px #000;
		margin:1rem 4rem 0 4rem;
		font-size:1.25rem;
		color:#fff;
	}

	#game_splash .matches {
		font-weight:900;
		text-shadow:1px 1px 3px #000;
		margin:2rem 4rem;
		font-size:1rem;
		background:rgba(0,0,0,0.5);
		padding:1rem;
		border-radius:5px;
		border:1px solid rgba(255,255,255,0.5);
		color:#FC0
	}

	#game_splash .buy_matches {
		border-radius:3px;
		display:block;
		color:#fff;
		margin:1rem 0 0 0;
		background-size:contain!important;
	}

	#game_splash .post_stats {
    color: #fff;
    padding: 1rem;
		text-align:left;
	}

	#game_splash .post_stats h4 {
		font-weight:900;
		color:#FC0;
		text-shadow:0px 2px 2px #000,
			0px 3px 15px #000;
	}
	/* end zj splash */

	/* main styles */
		.zj_title {
			padding:.25rem;
			background:#333;
			height:70px;
			background:url(/images/site/games/poker/hbg-gmpoker_gold.jpg) no-repeat;
			background-size:cover;
		}

		.zj_title img {
			width:200px;
			margin-left:-95px;
			top:2px;
			position:absolute;
			/*z-index:101*/
		}

		.zj_scores {
			background:url(/images/site/games/zackjack/bg-zackjack_darksilver.jpg) no-repeat;
			background-size:cover;
		}

		.total_score {
			line-height:2rem;
			margin-bottom:.5rem;
			font-size:2rem;
		}

		#zackjack {
			font-family: 'Allan', cursive;
			background:url(/images/site/games/poker/bg-gmpoker_wood.jpg);
			background-position:center bottom!important;
			background-repeat:no-repeat;
			height:550px;
			position:relative;
		}

		#play_buttons {
			box-shadow:0px 15px 30px #000;
		}

		#play_buttons .button {
			border-left:1px solid #333;
			color:rgba(255,255,255,1);
			text-shadow:1px 1px #000
		}

/* CARDS */
		.card_score {
			color:#fff;
			text-align:center;
		}

		.card_score h2 {
			font-family: 'Allan', cursive;
			font-size:1.8rem;
			color:#fff;
			font-weight:900;
			margin:0;
		}

		.card_score h2.good {
			text-shadow:0px 0px 8px #66CC00;
		}

		.card_score h2.bust {
			text-shadow:0px 0px 8px #F00;
		}

		.card_score h2.hit {
			text-shadow:0px 0px 4px #FFCC00;
			color:#FF3;
		}

		.card_row {
			background-size:cover;
			background:url(/images/site/games/poker/bg-gmpoker_felt.jpg) center;
		}

		.card_row .card {
			box-shadow: -3px 3px 6px #333, 0px 0px 0px #000
		}

		.cards {
			height:220px;
			padding:1rem 0;
		}

		.cards img {
			width:80px;
		}

		.twentyone {
			width:110px!important;
			margin-top:35px
		}

			.card1 {
				position:absolute;
				bottom:0px;
				margin-left:-40px;
				z-index:105;
			}

			.card2 {
				position:absolute;
				bottom:20px;
				margin-left:-40px;
				z-index:104;
			}

			.card3 {
				position:absolute;
				bottom:40px;
				margin-left:-40px;
				z-index:103;
			}

			.card4 {
				position:absolute;
				bottom:60px;
				margin-left:-40px;
				z-index:102;
			}

			.card5 {
				position:absolute;
				bottom:80px;
				margin-left:-40px;
				z-index:101;
			}
/* END CARDS */

/* PLAY AREA */
		.play_area {
			margin-top:15px;
			padding:1rem 0;
			color:#fff;
		}

		.play_area .button {
			margin:0
		}

		.play_area .tiny {
    	padding: 0.625rem 1rem 0.6875rem 1rem;
		}

		.play_area .no_icon {
			color:#F00!important;
			text-shadow:1px 1px 1px #000;
		}

		.play_area .desktop_score h3, .play_area .desktop_score h3 a {
			font-size:2rem;
			color:gold;
			margin-bottom:.5rem;
			line-height:2rem;
			font-family:'Allan', serif;
		}

		.play_area .desktop_score {
			margin-top: 1.75rem;
			font-size:2.5rem;
			text-shadow:0px 2px 2px #fff, 0px 3px 3px #000, 0px 2px 12px orangered;
			padding:0;
			text-align:right;
		}

		.play_area .desktop_burns {
			padding:10px 0 0 0;
		}

		.play_area .zackjack-burns-status {
			margin-bottom:5px;
		}

		.play_area .icon_white {
			color:#FFF;
			text-shadow:1px 1px 1px #000;
		}

		.play_area .icon_orange {
			color:#F90!important;
			text-shadow:1px 1px 1px #000;
		}
/* END PLAY AREA */

/* BUTTONS */
		.btn_red, .btn_yel, .btn_blu, .btn_gry, .btn_grn, .btn_prp, .btn_dark_green {
			margin-bottom:0; padding:.5rem!important; font-weight:900; background-size:cover; text-shadow: 1px 1px #000
		}

		.btn_red {
			background:url(/images/site/games/zackjack/bg-zackjack_btn-red.png);
		}

		.btn_prp {
			background:url(/images/site/games/zackjack/bg-zackjack_btn-prp.png);
		}

		.btn_dark_green {
			background:url(/images/site/games/zackjack/bg-zackjack_btn-drkgrn.png);
		}

		.btn_yel {
			background:url(/images/site/games/zackjack/bg-zackjack_btn-yel.png);
			color:#fff;
		}

		.btn_blu {
			background:url(/images/site/games/zackjack/bg-zackjack_btn-blu.png);
		}

		.btn_grn {
			background:url(/images/site/games/zackjack/bg-zackjack_btn-grn.png);
			padding:.5rem 1rem!important;
		}

		.btn_gry {
			background:url(/images/site/games/zackjack/bg-zackjack_btn-gry.png);
		}

		.burn {
			background-size:cover;
		}
/* END BUTTONS */

		.foot {
			font-family:"Lato", sans-serif;
			font-weight:700;
			color:#000;
			background:#FC3;
			position:absolute;
			/*z-index:1001;*/
			bottom:-175px;
			left:0;
			width:100%;
			height:200px;
			padding:0 .5rem;
		}

		.foot .columns {
			padding:0;
		}


/* CARD FLIP */
	.flip-container {
	  -webkit-perspective: 1000;
	  -moz-perspective: 1000;
	  -o-perspective: 1000;
	  perspective: 1000;

		/*border: 1px solid #ccc;*/
	}

	  .flip-container.flip .flipper {
			-webkit-transform: rotateY(180deg);
			-moz-transform: rotateY(180deg);
	    -o-transform: rotateY(180deg);
			transform: rotateY(180deg);
		}

	.flip-container, .front, .back {
		width: 79px;
		height: 110px;
	}

	.flipper {
		-webkit-transition: 0.6s;
		-webkit-transform-style: preserve-3d;

		-moz-transition: 0.6s;
		-moz-transform-style: preserve-3d;

	  -o-transition: 0.6s;
		-o-transform-style: preserve-3d;

		transition: 0.6s;
		transform-style: preserve-3d;

		position: relative;
	}

	.front, .back {
		-webkit-backface-visibility: hidden;
		-moz-backface-visibility: hidden;
	  -o-backface-visibility: hidden;
		backface-visibility: hidden;

		position: absolute;
		top: 0;
		left: 0;
	}

	.front {
		z-index: 2;
	}

	.back {
		-webkit-transform: rotateY(180deg);
		-moz-transform: rotateY(180deg);
	  -o-transform: rotateY(180deg);
		transform: rotateY(180deg);
	}



/* ***********************************************************************************************************ALL THE MOBILE STYLES */


/*
MEDIUM PHONES 361-411
*/

/*
LARGE PHONES 412+
*/

/*
MOBILE BASE STYLES
*/
		@media (min-width:280px) and (max-width:480px) {
		#zackwrap {
			width:100%;
		}

		#zackjack {
			background:url(/images/site/games/poker/bg-gmpoker_wood.jpg) center;
			background-position:center bottom;
			height:100vh;
		}

		/* zj splash */
		#game_splash {
			background:url(/images/site/games/poker/mbg-desktopGMP.jpg) top center;
			background-size:cover;
			height:100vh;
			width:100%;
			text-align:center;
			padding-top:75px;
			color:#fff;
			font-size:75%!important;
		}

		#game_splash .post_stats {
			padding:.5rem 1rem 0rem 1rem;
	    margin-bottom: 0rem;
		}

		#game_splash .post_stats small {
			margin-top:1rem;
			display:block;
		}

		#game_splash h2 {
			font-weight:900;
			text-shadow:1px 1px 3px #000;
			margin:1rem 1rem 0 1rem;
			font-size:1rem;
			color:#fff;
		}

		#game_splash .matches {
			margin:1.75rem;
			font-size:1rem;
			padding:1rem;
		}

		#game_splash .buy_matches {
			border-radius:3px;
			display:block;
			color:#fff;
			margin:1rem 0 0 0;
			background-size:cover!important
		}

		.btn_full {
		 width:100%;
		 display:block;
		 margin-bottom:1rem;
		 background-size:cover;
		}
		/* end zj splash */

		.zj_title {
			padding:.0rem;
			background:#333;
			height:40px;
			line-height:40px;
			background:url(/images/site/games/poker/hbg-gmpoker_gold.jpg) no-repeat;
			background-size:cover;
		}

		.zj_title img {
			position:relative;
			width:100%;
			margin-top:-6px;
			margin-left:0px;
		}

		.mobile_score, .mobile_score a {
			font-size: 1.75rem;
			color: gold;
			text-shadow:0px 2px 2px #fff, 0px 3px 3px #000, 0px 2px 12px orangered;
		}

		.play_area {
			position: absolute;
			bottom:0;
			padding-bottom:1rem;
			margin-bottom:1rem;
			color:#fff;
		}

		.play_area .button {
			margin:0
		}

		.play_area .tiny {
    	padding: 0.625rem 1rem 0.6875rem 1rem;
		}

		.foot {
			font-family:"Lato", sans-serif;
			font-weight:700;
			color:#000;
			background:#FC3;
			position:absolute;
			/*z-index:1001;*/
			bottom:-175px;
			left:0;
			width:100%;
			height:200px;
		}

		}

		@media (min-width:359px) and (max-width:380px) {
		#zackwrap {
			width:100%;
		}

		#zackjack {
			background-position:center bottom;
			height:100vh;
		}

		.twentyone {
			width:75px!important;
			margin-top:90px
		}

		.cards {
			height:280px;
			padding:1rem 0;
		}

		.cards img {
			width:80px;
		}

			.card1 {
				position:absolute;
				bottom:10px;
				margin-left:-40px;
			}

			.card2 {
				position:absolute;
				bottom:50px;
				margin-left:-40px;
			}

			.card3 {
				position:absolute;
				bottom:90px;
				margin-left:-40px;
			}

			.card4 {
				position:absolute;
				bottom:130px;
				margin-left:-40px;
			}

			.card5 {
				position:absolute;
				bottom:170px;
				margin-left:-40px;
			}
		}

		@media (min-width:381px) and (max-width:479px) {
		#zackwrap {
			width:100%;
		}

		#zackjack {
			background-position:center bottom;
			height:100vh;
		}

		.post {
			background:url(/images/site/games/poker/mbg-desktopGMP.jpg) top center!important;
			background-size:cover!important;
			background-repeat:no-repeat;
			padding-top:100px!important;
		}

		.twentyone {
			width:75px!important;
			margin-top:90px
		}

		.cards {
			height:280px;
			padding:1rem 0;
		}

		.cards img {
			width:80px;
		}

			.card1 {
				position:absolute;
				bottom:10px;
				margin-left:-40px;
			}

			.card2 {
				position:absolute;
				bottom:50px;
				margin-left:-40px;
			}

			.card3 {
				position:absolute;
				bottom:90px;
				margin-left:-40px;
			}

			.card4 {
				position:absolute;
				bottom:130px;
				margin-left:-40px;
			}

			.card5 {
				position:absolute;
				bottom:170px;
				margin-left:-40px;
			}
		}

		@media (min-width:300px) and (max-width:359px) {
		.twentyone {
			width:75px!important;
			margin-top:60px
		}
		}

		@media (min-width:300px) and (max-width:999px) {
		#zackwrap {
			width:100%;
		}
		}

		@media (min-width:481px) and (max-width:999px) {
		/* zj splash */
		#game_splash {
			background:url(/images/site/games/poker/mbg-desktopGMP.jpg) top center!important;
			background-size:cover!important;
			background-repeat:no-repeat!important;
			height:100vh;
			width:100%;
			text-align:center;
			padding-top:175px!important;
			color:#fff;
		}

		.post {
			background:url(/images/site/games/poker/mbg-desktopGMP.jpg) top center!important;
			background-size:cover!important;
			background-repeat:no-repeat;
			padding-top:125px!important;
		}

		}

	@media (min-width:280px) and (max-width:550px) {
	#loading {
		width:100%;
		height:100vh;
	}

	#loading h2 {
		font-weight:900;
		font-size:1.4rem;
		color:#fff;
	}
	}

/* iphone 4 */
	@media (height:480px) and (width:320px) {
		.cards {
			height:150px;
			padding:1rem 0;
		}

		.cards img {
			height:70px;
			width:50px;
		}

			.card0 {
				height:70px;
				width:50px;
			}

			.card1 {
				position:absolute;
				bottom:10px;
				margin-left:-25px;
			}

			.card2 {
				position:absolute;
				bottom:25px;
				margin-left:-25px;
			}

			.card3 {
				position:absolute;
				bottom:40px;
				margin-left:-25px;
			}

			.card4 {
				position:absolute;
				bottom:55px;
				margin-left:-25px;
			}

			.card5 {
				position:absolute;
				bottom:70px;
				margin-left:-25px;
			}

	}

/* iphone 5 */
	@media (height:568px) and (width:320px) {
		.cards {
			height:200px;
			padding:1rem 0;
		}

			.card1 {
				position:absolute;
				bottom:10px;
				margin-left:-40px;
			}

			.card2 {
				position:absolute;
				bottom:30px;
				margin-left:-40px;
			}

			.card3 {
				position:absolute;
				bottom:50px;
				margin-left:-40px;
			}

			.card4 {
				position:absolute;
				bottom:70px;
				margin-left:-40px;
			}

			.card5 {
				position:absolute;
				bottom:90px;
				margin-left:-40px;
			}

	}

/* iphone 5 */
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {
		.play_area {
			margin-bottom:84px;
		}

		.foot {
			bottom:-105px;
		}

		.cards {
			height:180px;
			padding:1rem 0;
		}

			.card1 {
				position:absolute;
				bottom:-10px;
				margin-left:-40px;
			}

			.card2 {
				position:absolute;
				bottom:5px;
				margin-left:-40px;
			}

			.card3 {
				position:absolute;
				bottom:20px;
				margin-left:-40px;
			}

			.card4 {
				position:absolute;
				bottom:35px;
				margin-left:-40px;
			}

			.card5 {
				position:absolute;
				bottom:50px;
				margin-left:-40px;
			}

	}
}

/* iphone 6/7 Plus */
@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 667px)
  and (-webkit-min-device-pixel-ratio: 2) {
		.play_area {
			margin-bottom:84px;
		}

		.foot {
			bottom:-105px;
		}
	}


/* iphone 6/7 Plus */
@media only screen
  and (min-device-width: 414px)
  and (max-device-width: 736px)
  and (-webkit-min-device-pixel-ratio: 3) {
		.foot {
			bottom:-105px;
		}

		.twentyone {
			width:100%;
			margin-top:40px
		}

		.play_area {
			margin-bottom:94px;
		}

		.cards {
			height:330px; /* was 396*/
			padding:1rem 0;
		}

		.cards img {
			height:120px;
			width:100px;
		}

			.card0 {
				height:120px;
				width:100px;
			}

			.card1 {
				position:absolute;
				bottom:10px;
				margin-left:-48px;
			}

			.card2 {
				position:absolute;
				bottom:50px;
				margin-left:-48px;
			}

			.card3 {
				position:absolute;
				bottom:90px;
				margin-left:-48px;
			}

			.card4 {
				position:absolute;
				bottom:130px;
				margin-left:-48px;
			}

			.card5 {
				position:absolute;
				bottom:170px;
				margin-left:-48px;
			}

			.flip-container, .front, .back {
				width: 100px;
				height: 120px;
			}

	}