@charset "utf-8";
body
{
	font-family: "Montserrat", Helvetica, sans-serif;
	margin: 0 auto;
	padding: 0;
	background: url(../images/main-bg.jpg) no-repeat top center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	width: 100%;
	height: auto;
	top: 0;
	center: 0;
	overflow: hidden;
}
/* width */
::-webkit-scrollbar {
  width: 5px;
}
/* Track */
::-webkit-scrollbar-track {
  background: #5d0202; 
}
/* Handle */
::-webkit-scrollbar-thumb {
  background: #aa0000; 
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #aa0000; 
}
#wrap
{  
	height: 100vh;
	position: relative;
	/*border: 1px solid red; */
}
#wrap_content
{
	margin: 0;
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 50%;
	width: 65%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
#content-bg
{
	position: relative;
	width: 100%;
	height: auto;
	margin-top: 22.5%;
	text-align: center;
}
#content-bg img
{
	width: 38.5%;
}
#main-logo
{
	margin: 0;
	position: absolute;
	top: -18%;
	left: 50%;
	width: 100%;
	text-align: center;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
#main-logo img
{
	width: 20%;
	height: auto;
}
#main-title
{
	margin: 0;
	position: absolute;
	top: 1%;
	left: 50%;
	width: 100%;
	text-align: center;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
#main-title img
{
	width: 60%;
	height: auto;
}
#main-box
{
	position: absolute;
	width: 100%;
	height: auto;
	top: 18%;
	text-align: center;
}
#main-box img
{
	width: 48%;
	height: auto;
}
#hand01
{
	position: absolute;
	width: 8%;
	height: auto;
	left: 46.5%;
	top: 18%;
}
#hand02
{
	position: absolute;
	width: 8%;
	height: auto;
	left: 37.5%;
	top: 46%;
}
#hand03
{
	position: absolute;
	width: 8%;
	height: auto;
	left: 43%;
	top: 46%;
}
#hand04
{
	position: absolute;
	width: 8%;
	height: auto;
	left: 48.5%;
	top: 25%;
}
#hand05
{
	position: absolute;
	width: 8%;
	height: auto;
	left: 54%;
	top: 46%;
}
#hand06
{
	position: absolute;
	width: 8%;
	height: auto;
	left: 59.5%;
	top: 46%;
}
#hand01 img, #hand02 img, #hand03 img, #hand04 img, #hand05 img, #hand06 img
{
	width: 100%;
	height: auto;
}
#cake11
{
	position: absolute;
	width: 8%;
	height: auto;
	left: 32%;
	top: 74%;
	text-align: center;
}
#cake12
{
	position: absolute;
	width: 8%;
	height: auto;
	left: 37%;
	top: 75%;
	text-align: center;
}
#cake07
{
	position: absolute;
	width: 8%;
	height: auto;
	left: 42%;
	top: 74%;
	text-align: center;
}
#cake08
{
	position: absolute;
	width: 12%;
	height: auto;
	left: 54%;
	top: 75%;
	text-align: center;
}
#cake09
{
	position: absolute;
	width: 12%;
	height: auto;
	left: 56%;
	top: 82%;
	text-align: center;
}
#cake05
{
	position: absolute;
	width: 8%;
	height: auto;
	left: 48%;
	top: 75%;
	text-align: center;
}
#cake10
{
	position: absolute;
	width: 8%;
	height: auto;
	left: 32%;
	top: 83%;
	text-align: center;
}
#cake06
{
	position: absolute;
	width: 9%;
	height: auto;
	left: 41%;
	top: 82%;
	text-align: center;
}
#cake01
{
	position: absolute;
	width: 8%;
	height: auto;
	left: 37%;
	top: 84%;
	text-align: center;
}
#cake02
{
	position: absolute;
	width: 8%;
	height: auto;
	left: 46%;
	top: 86%;
	text-align: center;
}
#cake04
{
	position: absolute;
	width: 8%;
	height: auto;
	left: 51%;
	top: 83%;
	text-align: center;
}
#cake03
{
	position: absolute;
	width: 8%;
	height: auto;
	left: 56%;
	top: 85%;
	text-align: center;
}
#cake11 img, #cake12 img, #cake07 img, #cake08 img, #cake09 img, #cake05 img, #cake10 img, #cake06 img, #cake01 img, #cake02 img, #cake04 img, #cake03 img
{
	width: 100%;
	height: auto;
}
#coins
{
	position: absolute;
	width: 100%;
	height: auto;
	top: 22%;
	text-align: center;
}
#coins img
{
	width: 76%;
	height: auto;
}
#rabbit-left
{
	position: absolute;
	width: 25%;
	height: auto;
	left: 8%;
	top: 65%;
	text-align: center;
}
#rabbit-left img
{
	width: 100%;
	height: auto;
}
#rabbit-right
{
	position: absolute;
	width: 25%;
	height: auto;
	right: 8%;
	top: 65%;
	text-align: center;
}
#rabbit-right img
{
	width: 100%;
	height: auto;
}
#left-arrow
{
	position: absolute;
	width: 5%;
	height: auto;
	left: 40%;
	bottom: -19%;
	text-align: center;
}
#right-arrow
{
	position: absolute;
	width: 5%;
	height: auto;
	left: 46%;
	bottom: -19%;
	text-align: center;
}
#left-arrow img, #right-arrow img
{
	width: 100%;
	height: auto;
}
#ok-btn
{
	position: absolute;
	width: 7%;
	height: auto;
	left: 52%;
	bottom: -21%;
	text-align: center;
}
#ok-btn img
{
	width: 100%;
	height: auto;
}
#game-mechanics-text
{
	position: absolute;
	width: 14%;
	height: auto;
	left: 13%;
	top: 28.5%;
	text-align: center;
	font-size: 1.5vh;
	line-height:1.5vh;
}
#login-text
{
	position: absolute;
	width: 14%;
	height: auto;
	right: 13%;
	top: 30%;
	text-align: center;
	font-size: 1.5vh;
}
#logout-text
{
	position: absolute;
	width: 14%;
	height: auto;
	right: 13%;
	top: 28%;
	text-align: center;
	font-size: 1.5vh;
}
.red
{
	color:#ff0a00;
}
#chances-text {
    position: absolute;
    width: 40%;
    height: auto;
    left: 27%;
    top: 27%;
    text-align: center;
    color: #fff;
    font-size: 3vh;
    text-transform: uppercase;
    -ms-transform: rotate(-7deg);
    -webkit-transform: rotate(-7deg);
    -moz-transform: rotate(-7deg);
    transform: rotate(-7deg);
    -webkit-text-stroke: 1px #000;
    font-weight: 900;
}
#chances-number {
    position: absolute;
    width: 25%;
    height: auto;
    left: 35.8%;
    top: 33%;
    text-align: center;
    color: #f83118;
    font-size: 4.1vh;
    -ms-transform: rotate(-7deg);
    -webkit-transform: rotate(-7deg);
    -moz-transform: rotate(-7deg);
    transform: rotate(-7deg);
    -webkit-text-stroke: 1px #FFF;
    font-weight: 900;
}
#game-mechanics-text a, #login-text a, #logout-text a
{
	text-decoration: none;
	color: #000;
}
#game-mechanics-text img, #login-text img, #logout-text img
{
	width: 20%;
	height: auto;
}
#game-mechanics
{
	position: absolute;
	width: 14%;
	height: auto;
	left: 13%;
	top: 15%;
	text-align: center;
}
#game-mechanics img
{
	width: 100%;
	height: auto;
}
#login-logout
{
	position: absolute;
	width: 14%;
	height: auto;
	right: 13%;
	top: 15%;
	text-align: center;
}
#login-logout img
{
	width: 100%;
	height: auto;
}
/*--------------------------------------------------------------
# Modal
--------------------------------------------------------------*/
.v_align_modal {
	display: table;
	height: 100%;
	width: 100%;
	pointer-events: none;
}
.v_align_center {
	display: table-cell;
	vertical-align: middle;
	pointer-events: none;
}
.modal-content {
	width: inherit;
	max-width: inherit;
	height: inherit;
	margin: 0 auto;
	pointer-events: all;
}
.modal-body {
	height: 100%;
}
.modal-open {
padding: 0 !important;
}
.modal-header, .modal-footer {
	border: 0;
	height: 65px;
}
.close {
	font-size: 35px;
	color: #fff978;
	text-shadow: none;
	opacity: 1;
}
.login_close, .how_close
{
	right: 1px;
	position: absolute;
}
/* Login */
.sbmt a, .sbmt a:hover
{
	color: #000 !important;
	padding: 8px;
	text-align: center;
	margin: 0 auto;
	border: 1px #faae00 solid;
	border-radius: 10px;
	width: 100%;
	font-size: 20px;
	background: linear-gradient(to top, #ffc03a,#fdd36d);
	font-weight: bold;
	letter-spacing: normal;
	margin-bottom: 20px;
	display: block;
	text-decoration: none !important;
	margin-top: 10px;
}
.sbmt:hover, .sbmt:focus {
	text-decoration: none !important;
}
.uname, .password {
	margin: 0 auto;
	color: #fff;
	width: 100%;
	letter-spacing: normal;
	border-radius: 10px;
	padding: 8px;
	display: -ms-flex;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	font-size: 20px;
	border-bottom: 2 solid #ffffff;
	background-color: #3b0000;
	font-weight: bold;
	border: 1px #3b0000 solid;
	margin-top: 10px;
	text-align: center;
}
.uname.form-control::placeholder, .password.form-control::placeholder{
	color:#fff;
	letter-spacing: normal;
}
.login_wrap {
	max-width: 400px;
	margin: 0 auto;
	padding: 28% 5% 0% 5%;
	text-align: center;
	color: #fff;
	font-size: 3vw;
	font-weight: bold;
}
.loginModal .modal-content {
	color: #000;
	background: url("../images/login-bg.png") center center no-repeat;
	background-size: contain;
	width: 540px;
	height: 355px;
	-webkit-box-shadow: none;
	box-shadow: none;
	border: 0;
	position: relative;
}
/* How to play */
.howTo .modal-content {
	color: #fff;
	background: url(../images/mechanics-bg.png) center center no-repeat;
	background-size: contain;
	width: 650px;
	height: 420px;
	-webkit-box-shadow: none;
	box-shadow: none;
	border: 0;
	position: relative;
}
.instructions {
	width: 80%;
	height: 250px;
	position: absolute;
	left: 50%;
	top: 62%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	overflow-y: auto;
	overflow-x: hidden;
}
/* Prizes */
.prizeModal .modal-content {
	color: #fff;
	background: url("../images/prize-bg.png") center center no-repeat;
	background-size: contain;
	width: 534px;
	height: 308px;
	-webkit-box-shadow: none;
	box-shadow: none;
	border: 0;
	position: relative;
}
.prize-wrap
{
	font-size: 32px;
	width: 100%;
	text-align: center;
	margin-top: 28%;
	margin-left:8%;
	color: #f80000;
	font-weight: bold;
	line-height: normal;
	text-shadow: 2px 2px #ffffff;
}
@media only screen and (max-width: 1024px) {
#wrap_content
{
	width: 100%;
}
#chances-text {
    position: absolute;
    width: 40%;
    height: auto;
    left: 27%;
    top: 26%;
    text-align: center;
    color: #FFF;
    font-size: 2vh;
    text-transform: uppercase;
    -ms-transform: rotate(-7deg);
    -webkit-transform: rotate(-7deg);
    -moz-transform: rotate(-7deg);
    transform: rotate(-7deg);
    -webkit-text-stroke: 1px #000;
    font-weight: 900;
}
#chances-number {
    position: absolute;
    width: 25%;
    height: auto;
    left: 35.8%;
    top: 33%;
    text-align: center;
    color: #f83118;
    font-size: 2.3vh;
    font-weight: bold;
    -ms-transform: rotate(-7deg);
    -webkit-transform: rotate(-7deg);
    -moz-transform: rotate(-7deg);
    transform: rotate(-7deg);
    -webkit-text-stroke: 1px #FFF;
    font-weight: 900;
}
#game-mechanics-text
{
	position: absolute;
	width: 14%;
	height: auto;
	left: 13%;
	top: 28.5%;
	text-align: center;
	font-size: 1vh;
	font-weight:bold;
	line-height:1vh;
}
#login-text
{
	position: absolute;
	width: 14%;
	height: auto;
	right: 13%;
	top: 30%;
	text-align: center;
	font-size: 1vh;
	font-weight:bold;
}
#logout-text
{
	position: absolute;
	width: 14%;
	height: auto;
	right: 13%;
	top: 28%;
	text-align: center;
	font-size: 1vh;
	font-weight:bold;
}
@media only screen and (max-width: 450px) {
#wrap_content
{
	width: 100%;
}
#content-bg
{
	position: relative;
	width: 100%;
	height: auto;
	margin-top: 23%;
	text-align: center;
}
#content-bg img
{
	width: 48%;
}
#main-logo
{
	margin: 0;
	position: absolute;
	top: -35%;
	left: 50%;
	width: 100%;
	text-align: center;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
#main-logo img
{
	width: 40%;
	height: auto;
}
#main-title
{
	margin: 0;
	position: absolute;
	top: -10%;
	left: 50%;
	width: 100%;
	text-align: center;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
#main-title img
{
	width: 80%;
	height: auto;
}
#main-box
{
	position: absolute;
	width: 100%;
	height: auto;
	top: 10%;
	text-align: center;
}
#main-box img
{
	width: 60%;
	height: auto;
}
#hand01
{
	position: absolute;
	width: 10%;
	height: auto;
	left: 27%;
	top: 27%;
}
#hand02
{
	position: absolute;
	width: 10%;
	height: auto;
	left: 34%;
	top: 36%;
}
#hand03
{
	position: absolute;
	width: 10%;
	height: auto;
	left: 41%;
	top: 36%;
}
#hand04
{
	position: absolute;
	width: 10%;
	height: auto;
	left: 48%;
	top: 25%;
}
#hand05
{
	position: absolute;
	width: 10%;
	height: auto;
	left: 56%;
	top: 36%;
}
#hand06
{
	position: absolute;
	width: 10%;
	height: auto;
	left: 63%;
	top: 36%;
}
#hand01 img, #hand02 img, #hand03 img, #hand04 img, #hand05 img, #hand06 img
{
	width: 100%;
	height: auto;
}
#cake11
{
	position: absolute;
	width: 10%;
	height: auto;
	left: 32%;
	top: 74%;
	text-align: center;
}
#cake12
{
	position: absolute;
	width: 10%;
	height: auto;
	left: 37%;
	top: 75%;
	text-align: center;
}
#cake07
{
	position: absolute;
	width: 10%;
	height: auto;
	left: 42%;
	top: 74%;
	text-align: center;
}
#cake08
{
	position: absolute;
	width: 14%;
	height: auto;
	left: 54%;
	top: 75%;
	text-align: center;
}
#cake09
{
	position: absolute;
	width: 14%;
	height: auto;
	left: 56%;
	top: 82%;
	text-align: center;
}
#cake05
{
	position: absolute;
	width: 10%;
	height: auto;
	left: 48%;
	top: 75%;
	text-align: center;
}
#cake10
{
	position: absolute;
	width: 10%;
	height: auto;
	left: 32%;
	top: 83%;
	text-align: center;
}
#cake06
{
	position: absolute;
	width: 11%;
	height: auto;
	left: 41%;
	top: 82%;
	text-align: center;
}
#cake01
{
	position: absolute;
	width: 10%;
	height: auto;
	left: 37%;
	top: 84%;
	text-align: center;
}
#cake02
{
	position: absolute;
	width: 10%;
	height: auto;
	left: 46%;
	top: 86%;
	text-align: center;
}
#cake04
{
	position: absolute;
	width: 10%;
	height: auto;
	left: 51%;
	top: 83%;
	text-align: center;
}
#cake03
{
	position: absolute;
	width: 10%;
	height: auto;
	left: 56%;
	top: 85%;
	text-align: center;
}
#cake11 img, #cake12 img, #cake07 img, #cake08 img, #cake09 img, #cake05 img, #cake10 img, #cake06 img, #cake01 img, #cake02 img, #cake04 img, #cake03 img
{
	width: 100%;
	height: auto;
}
#coins
{
	position: absolute;
	width: 100%;
	height: auto;
	top: 15%;
	text-align: center;
}
#coins img
{
	width: 90%;
	height: auto;
}
#rabbit-left
{
	position: absolute;
	width: 30%;
	height: auto;
	left: 1%;
	top: 65%;
	text-align: center;
}
#rabbit-left img
{
	width: 100%;
	height: auto;
}
#rabbit-right
{
	position: absolute;
	width: 30%;
	height: auto;
	right: 1%;
	top: 65%;
	text-align: center;
}
#rabbit-right img
{
	width: 100%;
	height: auto;
}
#left-arrow
{
	position: absolute;
	width: 7%;
	height: auto;
	left: 38%;
	bottom: -21%;
	text-align: center;
}
#right-arrow
{
	position: absolute;
	width: 7%;
	height: auto;
	left: 46%;
	bottom: -21%;
	text-align: center;
}
#left-arrow img, #right-arrow img
{
	width: 100%;
	height: auto;
}
#ok-btn
{
	position: absolute;
	width: 9%;
	height: auto;
	left: 54%;
	bottom: -23%;
	text-align: center;
}
#ok-btn img
{
	width: 100%;
	height: auto;
}
#game-mechanics-text
{
	position: absolute;
	width: 14%;
	height: auto;
	left: 6%;
	top: 19%;
	text-align: center;
	font-size: 1vh;
	font-weight:bold;
	line-height: 1vh;
}
#login-text
{
	position: absolute;
	width: 14%;
	height: auto;
	right: 6%;
	top: 19%;
	text-align: center;
	font-size: 1.1vh;
	font-weight:bold;
}
#logout-text
{
	position: absolute;
	width: 14%;
	height: auto;
	right: 6%;
	top: 17%;
	text-align: center;
	font-size: 1.1vh;
	font-weight:bold;
}
.red
{
	color:#ff0a00;
}
#chances-text {
    position: absolute;
    width: 50%;
    height: auto;
    left: 23%;
    top: 14.5%;
    text-align: center;
    color: #FFF;
    font-size: 2.5vh;
    font-weight: bold;
    text-transform: uppercase;
    -ms-transform: rotate(-7deg);
    -webkit-transform: rotate(-7deg);
    -moz-transform: rotate(-7deg);
    transform: rotate(-7deg);
    -webkit-text-stroke: 1px #000;
    font-weight: 900;
}
#chances-number {
    position: absolute;
    width: 25%;
    height: auto;
    left: 35%;
    top: 22.5%;
    text-align: center;
    color: #f83118;
    font-size: 3.5vh;
    font-weight: bold;
    -ms-transform: rotate(-7deg);
    -webkit-transform: rotate(-7deg);
    -moz-transform: rotate(-7deg);
    transform: rotate(-7deg);
    -webkit-text-stroke: 1px #FFF;
    font-weight: 900;
}
#game-mechanics-text a, #login-text a, #logout-text a
{
	text-decoration: none;
	color: #000;
}
#game-mechanics-text img, #login-text img, #logout-text img
{
	width: 20%;
	height: auto;
}
#game-mechanics
{
	position: absolute;
	width: 22%;
	height: auto;
	left: 2%;
	top: -1%;
	text-align: center;
}
#game-mechanics img
{
	width: 100%;
	height: auto;
}
#login-logout
{
	position: absolute;
	width: 22%;
	height: auto;
	right: 2%;
	top: -1%;
	text-align: center;
}
#login-logout img
{
	width: 100%;
	height: auto;
}

/* Login */
.sbmt a, .sbmt a:hover
{
	color: #000 !important;
	padding: 8px;
	text-align: center;
	margin: 0 auto;
	border: 1px #faae00 solid;
	border-radius: 10px;
	width: 100%;
	font-size: 10px;
	background: linear-gradient(to top, #ffc03a,#fdd36d);
	font-weight: bold;
	letter-spacing: normal;
	margin-bottom: 20px;
	display: block;
	text-decoration: none !important;
	margin-top: 5px;
}
.sbmt:hover, .sbmt:focus {
	text-decoration: none !important;
}
.uname, .password {
	margin: 0 auto;
	color: #fff;
	width: 100%;
	letter-spacing: normal;
	border-radius: 10px;
	padding: 8px;
	display: -ms-flex;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	font-size: 10px;
	border-bottom: 2 solid #ffffff;
	background-color: #3b0000;
	font-weight: bold;
	border: 1px #3b0000 solid;
	margin-top: 5px;
	text-align: center;
}
.uname.form-control::placeholder, .password.form-control::placeholder{
	color:#fff;
	letter-spacing: normal;
}
.login_wrap {
	max-width: 200px;
	margin: 0 auto;
	padding: 28% 5% 0% 5%;
	text-align: center;
	color: #fff;
	font-size: 3vw;
	font-weight: bold;
}
.loginModal .modal-content {
	color: #000;
	background: url("../images/login-bg.png") center center no-repeat;
	background-size: contain;
	width: 300px;
	height: 215px;
	-webkit-box-shadow: none;
	box-shadow: none;
	border: 0;
	position: relative;
}
/* How to play */
.howTo .modal-content {
	color: #fff;
	background: url(../images/mechanics-mobile-bg.png) center center no-repeat;
	background-size: contain;
	width: 300px;
	height: 300px;
	-webkit-box-shadow: none;
	box-shadow: none;
	border: 0;
	position: relative;
}
.instructions {
	width: 90%;
	height: 190px;
	position: absolute;
	left: 50%;
	top: 60%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	overflow-y: auto;
	overflow-x: hidden;
	font-size: 11px;
}
/* Prizes */
.prizeModal .modal-content {
	color: #fff;
	background: url("../images/prize-bg.png") center center no-repeat;
	background-size: contain;
	width: 300px;
	height: 173px;
	-webkit-box-shadow: none;
	box-shadow: none;
	border: 0;
	position: relative;
}
.prize-wrap
{
	font-size: 18px;
	width: 100%;
	text-align: center;
	margin-top: 28%;
	margin-left:8%;
	color: #f80000;
	font-weight: bold;
	line-height: normal;
	text-shadow: 2px 2px #ffffff;
}