@import url('https://fonts.googleapis.com/css?family=Coming+Soon');
@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}
body {
	position: relative;
	background-color: #414833;
	
}
button:focus { outline:0 !important; }
h1 {
    font-family: "Arial", sans-serif;
    font-size: 50px;
    font-weight: bold;
    color: #414833;
    margin-left: 20%;
    margin-top: 2%;
}
.text {
    position:relative;
}

h1 span {
    text-shadow:
        0 -1px 0 #858585,
        0 1px 10px rgba(0,0,0,.6),
        0 6px 1px rgba(0,0,0,.1),
        0 0 5px rgba(0,0,0,.2),
        0 1px 3px rgba(0,0,0,.3),
        0 3px 5px rgba(0,0,0,.2),
        0 7px 10px rgba(0,0,0,.25),
        0 15px 10px rgba(0,0,0,.2),
        0 25px 15px rgba(0,0,0,.15);
}
.wrapper {
	margin: 0px auto;
	height: 500px;
	border: 20px solid #64400F;
	background-image: url('../img/forwrapper.jpg');
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
	border-radius: 20px;
	box-shadow: inset 6px -8px 14px -2px rgba(0,0,0,0.47),inset -4px 5px 14px -2px rgba(0,0,0,0.47), 
	-4px 5px 14px -2px rgba(0,0,0,0.48), 6px -6px 14px -2px rgba(0,0,0,0.48);
}
.board {
	position: relative;
	margin: 0px auto;
	height: 350px;
	border: 20px solid #64400F;
	/*background-image: url('../img/board.png');
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;*/
	background-color: #497846;
	border-radius: 20px;
	box-shadow: inset 6px -8px 14px -2px rgba(0,0,0,0.47),inset -4px 5px 14px -2px rgba(0,0,0,0.47), 
	-4px 5px 14px -2px rgba(0,0,0,0.48), 6px -6px 14px -2px rgba(0,0,0,0.48);
}
.title_board {
    border: 9px solid #64400F;
	position: absolute;
	top: -13%;
    left: 14%;
	width: 160px;
    height: 73px;
    background-color: firebrick;
	border-radius: 20px;
	box-shadow: inset 6px -8px 14px -2px rgba(0,0,0,0.47),inset -4px 5px 14px -2px rgba(0,0,0,0.47);
}
@media screen and (max-width: 1200px) {
    .title_board {
        top: -15%;
    	left: 4.5%;
    }
    .arrow_box {
    	width: 43% !important;
    	left: 18% !important;;
    	top: -2%;
    	padding: 15px !important;
	}
	.card_hints {
    	top: 70% !important;
    	margin-left: 13% !important;
	}
}
.title_board_head {
	margin: 15px 20px;
    color: chocolate;
    font-size: 14px;
    -moz-font-size: 13px;
    font-weight: bold;
    font-size-adjust:0.5;
	
}
.text2 {
	position:relative;
}
.round, .wins, .percent {
	opacity: 0.8;
    color: white;
    font-size: 25px;
	font-family: "Coming soon", cursive;
	font-weight: bolder;
	margin-top: 5px;
}
.round_text, .percent_text {
	font-size: 25px;
	opacity: 0.9;
}
.title_count {
	text-align: center;
	margin-top: 18%;
	font-size: 20px;
}
.title_count .wins_text {
	font-size: 40px;
  	font-weight: bolder;
  	text-shadow: 0 0 20px transparent;
  	color: transparent;
  	animation: shadows 4s infinite ease-in;

}
@keyframes shadows {
  10% {
    text-shadow: 0 0px 1px white;
  }
  60% {
    text-shadow: 0 0px 1px #FFA07A;
  }
  90% {
    text-shadow: 0 30px 40px transparent;
  }  
}
.title_board_head span {
	text-shadow:
        0 -1px 0 #858585,
        0 1px 10px rgba(0,0,0,.6),
        0 6px 1px rgba(0,0,0,.1),
        0 0 5px rgba(0,0,0,.2),
        0 1px 3px rgba(0,0,0,.3),
        0 3px 5px rgba(0,0,0,.2),
        0 7px 10px rgba(0,0,0,.25),
        0 15px 10px rgba(0,0,0,.2),
        0 25px 15px rgba(0,0,0,.15);
}
.cups {
	display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    z-index: 2;
    margin-top: 11%;
}
.flipper {
	display: flex;
	font-size: 80px;
	transition: 1.6s;
  	transform-style: preserve-3d;
  	position: relative;
	justify-content: center;
	align-items: center;
	min-width: 206px;
}
.flipper img {
	margin-left: -40%;
    margin-top: 80px;
}
.animate_card {
	transform: rotateY(1260deg);
}
.card {
	backface-visibility: hidden;
  	position: absolute;
  	top: 0;
  	left: 0;
  	width: 206px;
	height: 250px;
	display: flex;

}

.empty_card {
	background: url('../img/joker.png') 0 0 no-repeat;
	background-position: center;
	background-size: contain;
	transform: rotateY(180deg);
}
.back_card {
	background-image: url('../img/backcard.png');
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: contain;
	transform: rotateY(0deg);
	z-index: 2;
}

.front_card {
	background: url('../img/froncard.png') 0 0 no-repeat;
	background-position: center;
	background-size: contain;
	transform: rotateY(180deg);
}

.arrow_box {
	width: 25%;
	left: 27%;
	position: absolute;
	margin: 86px auto -40px auto;
	padding: 20px;
	display: block;
	/*background: #88b7d5;*/
	background-color: rgba(135, 206, 235,0.75);
	border: 4px solid #c2e1f5;
	border-radius: 30px;
	animation: 1.5s ease 0s normal forwards 1 fadein;
	font-size: 18px;
	font-weight: bold;
	box-shadow: 3px 1px 25px 6px rgba(0,0,0,0.75);
	opacity: 0.9;
	z-index: 1;
}
.arrow_box:after, .arrow_box:before {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

/*.arrow_box:after {
	border-color: rgba(136, 183, 213, 0);
	border-top-color: #88b7d5;
	border-width: 30px;
	margin-left: -30px;
}
.arrow_box:before {
	border-color: rgba(194, 225, 245, 0);
	border-top-color: #c2e1f5;
	border-width: 36px;
	margin-left: -36px;
}*/
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

@keyframes fadein{
    0% { opacity:0; }
    100% { opacity:0.8; }
}
.liftedCup {
	animation: lift 0.8s normal ease-in-out;
	perspective: 1000;
	animation-fill-mode: forwards;
	
}

@keyframes lift{
	from {margin-top: 0;}
	
	to {  transform: rotateY( 1440deg );}
}
.fadeInOpen {
	margin-top: -50px; 
	opacity: 0;
}
.btn-round {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 10px;
    border: 1px solid #006400;
}
.buttons {
	/*position: absolute;
    top: 79%;
    left: 82%;*/
    float: left;
    width: 100%;
    position: absolute;
    top: 83%;
    left: 6%;
}
.refreshButton {
	float: right;
	margin-right: 12%;
}
.refresh_icon {
	font-size: 25px;
    top: 3px;
    left: -4px;
    opacity: 0.9;
}
.hint_icon {
	font-size: 25px;
    top: 3px;
    left: -4px;
    opacity: 0.9;
}
.refresh_button_animate {
	transform: rotate(180deg);
}
.card_hints {
	position: absolute;
    top: 82%;
    margin-left: 11%;

}
.hints p {
	color: white;
	font-size: 18px;
	font-weight: bold;
}
.hints_chance {
	color: white;
	font-size: 18px;
	font-weight: bold;
	/*text-shadow: 0 0 20px transparent;*/
  	/*color: transparent;*/
	animation: shadows_hints 3s infinite ease-in;
	transform: skew(0deg, 0deg);
}
@keyframes shadows_hints {
  10% {
    /*text-shadow: 0 0px 1px white;*/
    transform: skew(-20deg, 20deg);
  }
  60% {
    transform: skew(0deg, 0deg);
  }
  90% {
    /*text-shadow: 0 0px 40px transparent;*/
    transform: skew(20deg, -20deg);
  }  
}
.background_animate {
	/*background: linear-gradient(to top, rgba(153,122,54,0.5) 0%,rgba(125,185,232,0) 23%); */
	/*background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0.54) 0%,rgba(255,255,255,0) 26%);*/
	/*animation: background_anim 3s forwards ease-in;*/
	background: rgba(153,122,54,0.7);
	width: 208px;
	height: 350px;
	margin-top: -20px;
    padding-top: 21px;
    transition: background-color 2000ms linear;
}
@keyframes background_anim {
	10% {
		/*background: linear-gradient(to top, rgba(255,255,255,1) 0%,rgba(255,255,255,0.14) 0%,rgba(255,255,255,0) 26%);*/
		background: linear-gradient(to left, rgba(113,216,247,0.4) 0%,rgba(125,185,232,0) 100%); 
	}
	50% {
		/*background: linear-gradient(to top, rgba(255,255,255,1) 0%,rgba(255,255,255,0.18) 0%,rgba(255,255,255,0) 26%);*/
		/*background-color: rgba(178, 34, 34,0.3);*/
		background: linear-gradient(to left, rgba(113,216,247,0.4) 0%,rgba(125,185,232,0) 50%); 
	}
	100% {
		/*background: linear-gradient(to top, rgba(255,255,255,1) 0%,rgba(255,255,255,0.25) 0%,rgba(255,255,255,0) 26%);*/
		background: linear-gradient(to left, rgba(113,216,247,0.4) 0%,rgba(125,185,232,0) 23%); 
	}
}
.background_color_0 {
	background-color: rgba(199, 21, 133,0.5);
	margin-top: -20px;
    padding-top: 21px;
	/*margin-left: 4px;*/
	/*border-radius: 40px;*/
	width: 208px;
	height: 350px;
}
.background_color_1 {
	background-color: rgba(255, 140, 0,0.5);
	margin-top: -20px;
    padding-top: 21px;
	/*margin-left: 4px;*/
	/*border-radius: 40px;*/
	width: 208px;
	height: 350px;
	z-index: 2;
}
.background_color_2 {
	background-color: rgba(32, 178, 170,0.5);
	margin-top: -20px;
    padding-top: 21px;
	/*margin-left: 4px;*/
	/*border-radius: 40px;*/
	width: 208px;
	height: 350px;
}

.animation {
	margin-top: -20px;
    padding-top: 21px;
	/*margin-left: 4px;*/
	/*box-shadow: inset -5px -9px 23px 1px rgba(32,189,69,0.1), inset 9px 7px 23px 1px rgba(32,189,69,0.5);*/
	border-radius: 40px;
	width: 208px;
	height: 300px;
	animation: border_colors 4s infinite ease-in;
}

@keyframes border_colors {
	10% {
		box-shadow: inset -5px -9px 23px 1px rgba(32,189,69,0.3), inset 9px 7px 23px 1px rgba(32,189,69,0.6);
	}
	40% {
		box-shadow: inset -5px -9px 23px 1px rgba(208,237,215,0.6), inset 9px 7px 23px 1px rgba(208,237,215,0.3);
	}
	50% {
		box-shadow: inset -5px -9px 23px 1px rgba(11,122,207,0.3), inset 9px 7px 23px 1px rgba(76,172,245,0.6);
	}
	80% {
		box-shadow: inset -5px -9px 23px 1px rgba(132,150,125,0.6), inset 9px 7px 23px 1px rgba(132,150,125,0.3);
	}
	100% {
		box-shadow: inset -5px -9px 23px 1px rgba(32,189,69,0.3), inset 9px 7px 23px 1px rgba(32,189,69,0.6);
	}
}
.hint { position: relative; display: inline-block; }

.hint:before, .hint:after {
			position: absolute;
			opacity: 0;
			z-index: 1000000;
			-webkit-transition: 0.3s ease;
			-moz-transition: 0.3s ease;
  pointer-events: none;
}

		
.hint:hover:before, .hint:hover:after {
	opacity: 0.8;
	border-radius: 5px;
}

.hint:before {
	content: '';
	position: absolute;
	background: transparent;
	border: 6px solid transparent;
	position: absolute;
}
		
.hint:after {
	content: attr(data-hint);
	background: rgba(17,56,2, 0.8);
			color: white;
			padding: 8px 10px;
			font-size: 12px;
	white-space: nowrap;
	box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
}

/* default: bottom */

.hint--bottom:before {
	top: 100%;
	left: 50%;
	margin: -14px 0 0 0;
	border-bottom-color: rgba(17,56,2, 0.8);
}
		
.hint--bottom:after {
	top: 100%;
	left: 50%;
	margin: -2px 0 0 -10px;
}

.hint--bottom:hover:before {
	margin-top: -6px;
}

.hint--bottom:hover:after {
	margin-top: 6px;
}

/*xs-screen*/
@media screen and (max-width: 991px) {
	.text {
		margin-left: 15%;
	}
	.wrapper {
		height: 430px;
	}
    .title_board {
    	width: 124px;
        top: -15%;
    	left: 13%;
        box-shadow: inset -4px 5px 14px -1px rgba(0,0,0,0.47), 0px 2px 11px 0px rgba(0,0,0,0.48);
    }
    .title_board_head {
	    /* margin: 15px 20px; */
	    font-size: 13px;
	    font-weight: bold;
	    text-align: center;
	    margin-top: 10px;
	}
    .arrow_box {
    	width: 45% !important;
    	left: 18% !important;;
    	top: -2%;
    	font-size: 17px;
    	padding: 9px !important;
	}
	.card_hints {
    	top: 70% !important;
    	margin-left: 13% !important;
	}
	.buttons {
		top: 81%;
	    left: 10%;
	}
	.refreshButton {
		margin-right: 20%;
	}
	.cups {
		display: flex;
	    flex-direction: row;
	    justify-content: space-around;
	    /*align-items: stretch;*/
	    z-index: 2;
	    margin-top: 12%;
	}
	.card {
		backface-visibility: hidden;
	  	position: absolute;
	  	top: 0;
	  	left: 0;
	  	width: 157px;
		height: 171px;
		display: flex;
	}
	.flipper {
		min-width: 167px;
	}
	.board {
		width: 205px;
	}
	.background_color_0, .background_color_1, .background_color_2, .background_animate{
		width: 165px;
		height: 280px;
	}
	.background_color_0 {
		background-color: rgba(199, 21, 133,0.5);
		margin-top: -20px;
	    padding-top: 21px;
		/*margin-left: 4px;*/
		/*border-radius: 40px;*/
		
	}
	.background_color_1 {
		/*background-color: rgba(255, 140, 0,0.5);*/
		margin-top: -20px;
	    padding-top: 21px;
		/*margin-left: 4px;*/
		/*border-radius: 40px;*/
		z-index: 2;
	}
	.background_color_2 {
		background-color: rgba(32, 178, 170,0.5);
		margin-top: -20px;
	    padding-top: 21px;
		/*margin-left: 4px;*/
		/*border-radius: 40px;*/
	}
	.animation {
		height: 222px;
		width: 162px;
	}
}
@media screen and (max-device-width: 500px) {
	.resize-text {
	    opacity: 0.8;
	    font-weight: bold;
	    color: white;
	    width: 380px;
	    font-size: 25px;
	    margin: 9% auto;
	    text-align: center;
	}
	.resize-text h2 {
		font-size: 39px;
	    font-weight: bold;
	    font-family: sans-serif;
	    margin-bottom: 6%;
	    color: bisque;
	}
	.resize-text p {
		font-size: 33px;
    	font-weight: 100;
    	color: burlywood;
	}
	.resize {
		background-image: url(../img/rotate2.png);
	    background-repeat: no-repeat;
	    background-position: 50% 50%;
	    background-size: cover;
	    margin: 20% auto 0 auto;
	    width: 380px;
	    height: 250px;
	    border-radius: 5px;
	    animation: rotate 3s infinite;
	}
	@keyframes rotate {
		50% {
			background-image: url('../img/rotate1.png');
		}
	}
}
@media screen and (min-device-width: 501px) {
	.rotate-device {
		display: none;
	}
}