@charset "UTF-8";

	#crystalBall {
		background-image:url(/images/site/games/crystalBall/bg-CB_ballV2.jpg);
		background-size:cover;
		background-repeat:no-repeat;
		background-position:center;
		border-radius:1rem;
	}

	#crystalBall .button {
		background-image:linear-gradient(to bottom right, #24aacc, #0f7792);
		margin:0;
		text-shadow:1px 1px 2px #000;
		margin-top: 1rem;
		border-radius: 50px!important;		
	}

	#crystalBall #startScreen {
		width:300px;
		padding:1rem 0 2rem 0;
		margin:0 auto;
	}

	#crystalBall #startScreen p {
		color:#fff;
		background:rgba(0,0,0,.75);
		padding:1rem;
		margin-bottom:0
	}

	#crystalBall #startScreen button {
		border-radius:0;
		font-size:1rem;
		padding:.75rem;
		width:100%;
		margin-top:1rem;
		border-radius:50px;
	}

	#crystalBall #startScreen .play {
		font-size:1.5rem;
	}

	#crystalBall #startScreen .winners {
		background-image: linear-gradient(to bottom right, #a617d5, #721491);
	}

	#crystalBall #startScreen .rules {
		background-image: linear-gradient(to bottom right, #74b50c, #497305);
	}

	#crystalBall #startScreen .rules:hover {
		background-color:#0f7792
	}

	#crystalBall .question {
		width:75%;
		display:block;
    margin: 2rem auto 1rem auto;
		background-color:rgba(0,0,0,0.5);
		color:#fff;
		font-family: 'Roboto Condensed', sans-serif;
		font-size:1.5rem;
		font-weight:700;
		padding:0rem;
		border-radius:.5rem;
		box-shadow:0px 0px 15px #fff;
		padding-top:1rem;
		line-height:1;
		overflow:hidden;
	}
	
			#crystalBall .question h1 {
				color: #fff;
				font-weight: 700;
				font-size: 1.5rem;				
				margin:0 1rem;
				line-height:1;				
			}
	
			#crystalBall .question a { 
				font-size: .9rem;
				cursor: pointer;
				color: #66CCFF;
				font-weight: 400;
				margin: .5rem 0;
				display: block;
			}
			
			#crystalBall .question input {
				width:100%;
				margin-bottom:0;	
			}			

	#crystalBall .points {
		position:absolute;
		background:rgba(0,0,0,0.75);
		top:0px;
		z-index:101;
		width:300px;
		left:50%;
		margin:-150px;
		padding:0 0 .5rem 0;
		color:#fff;
		font-size:.8rem;
		border-radius:0 0 .25rem .25rem;
	}

	#crystalBall #controls {
		width:300px;
		margin:0rem auto;
		padding:0 0 1rem 0;
		color:#fff;
		font-size:.8rem;

	}

	#crystalBall #controls .secondary {
		border-radius:.25rem;
		box-shadow:0 0 10px #cc66ff;
		background:rgba(0,0,0,0.75);
		margin-top:2rem;
	}

	#crystalBall #controls .secondary div {
		margin-bottom:1rem;
	}

	#crystalBall #controls .secondary .sec_sub a {
		text-decoration: none;
	}

	#crystalBall #controls .secondary .sec_sub {
		display:block;
		font-weight:900;
	}

	#crystalBall #controls .secondary .progress {
		width: 90%;
    margin: 0 auto;
	}

	#crystalBall #controls a {
		color:#fff;
		text-decoration:underline;
	}

	#crystalBall #controls label {
		font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    color: #fff;
    text-shadow: 1px 1px 2px #000;
    font-size: 1.25rem;
    background: rgba(0,0,0,.75);
    border-radius: .25rem .25rem 0 0;
    padding: .25rem 0;
	}

	#crystalBall #controls input {
		margin:0;
		border-radius:0;
	}

	#crystalBall #controls .finish {
		color:gold!important;
		font-size:1.25rem;
		background-image:linear-gradient(to bottom right, #97cc24, #638e07)!important;
    border-top: 1px solid gold;
	}

	#crystalBall #controls .avg { color:gold }
	#crystalBall #controls .predictions { color:#ff6600 }
	#crystalBall #controls .cup { color:#ff3399 }
	#crystalBall #controls .crystals { color:#66ccff }
	#crystalBall #controls .freegame { color:yellowgreen }

	#crystalBall #controls .finish {
		background-color:darkviolet;
		border-radius:0 0 .2rem .25rem;
	}


/* BONUS PRIZE */
	#crystalBall #cbChanceGame {
		color:#fff;
		background-image:linear-gradient(to bottom right,rgba(100,0,100,1),rgba(0,100,150,1));
		height:100%;
		width:100%;
		position:relative;
		z-index:1000;
		padding:2rem 0;
		display:none;
	}

	#crystalBall #cbChanceGame .chanceFork {
		position: absolute;
		top: 50%;
		left: 50%;
		-ms-transform: translate(-50%,-50%);
		transform: translate(-50%,-50%);
		width:300px;
	}

	#crystalBall #cbChanceGame .button {
		color:#fff;
		font-size:1.25rem;
		margin:0 .25rem;
	}

	#crystalBall #cbChanceGame h2 {
		line-height:1.1;
		color:#fff;
	}

	#crystalBall #cbChanceGame .chanceThanks {
		display:none;
		position: absolute;
		top: 50%;
		left: 50%;
		-ms-transform: translate(-50%,-50%);
		transform: translate(-50%,-50%);
		width:300px;
	}

	#crystalBall #cbChanceGame .chance {
		/*display:none;*/
		margin:0 auto;
		width:300px;
	}

	#crystalBall #cbChanceGame .chance h2 {
		margin:0;
		line-height:1.1;
		color:#fff;
	}

	#crystalBall #cbChanceGame .chance .row {
		margin:1rem 0!important;
		padding:0;
	}

	#crystalBall #cbChanceGame .chance img {
		margin:.25rem 0;
	}

	#crystalBall #cbChanceGame .chancePrize	{
    visibility: hidden;
    background-image:linear-gradient(to bottom right,gold,orange);
    border-radius: 4px;
    padding: .25rem 0;
    color: firebrick;
    font-weight: 900;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 1.1rem;
		display:block;
	}
/* /BONUS PRIZE */

/* MODAL */
	.crystal-ball-modal {
		background-image: linear-gradient(to bottom right, #007972, #7f00ba);
		color: #fff;
		text-align: center;
		border: 2px solid #000;
	}

	.crystal-ball-modal h2 {
		color:#fff;
	}

	.crystal-ball-modal .button {
		margin:0
	}
/* /MODAL */


	@media (min-width:300px) and (max-width:480px) {
		#EZ_game .columns {
			padding:0;
		}

		#crystalBall {
			height:100vh;
			background-size:cover;
			background-repeat:no-repeat;
			background-position:center;
			border-radius:0rem;
			position:relative;
			overflow-y: auto;
		}

		#crystalBall #cbChanceGame {
			color:#fff;
			background-image:linear-gradient(to bottom right,rgba(100,0,100,1),rgba(0,100,150,1));
			height:100vh;
			width:100vw;
			position:absolute;
			z-index:1000;
		}	
		
		#crystalBall #cbChanceGame .chance {
			/*display:none;*/
			position: absolute;
			top: 50%;
			left:50%;
			-ms-transform: translate(-50%,-50%);
			transform: translate(-50%,-50%);
			width:300px;
		}		

		#crystalBall .ball {
			display:none;
		}

		#crystalBall .question {
			width:300px;
			font-size:1.25rem;
			font-weight:700;
			padding:1rem;
			border-radius:.5rem;
			box-shadow:0px 0px 15px #fff;
		}

		#crystalBall #cbChanceGame .chanceIcon {
			width:80%;
		}
	}