body {
    background-image: url(../images/first-spin-fever/bg.jpg);
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
	overflow-x: hidden;
}

.screen1, .screen2 {
    margin-top: 110px;
}

.red {
  background-image: url("../images/first-spin-fever/flame.png");
  background-position: 0 -1000px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: fire 4s linear infinite;
}

@keyframes fire {
  0% {
    background-position: 0% -50%;
  }
  100% {
    background-position: 0% -25%;
  }
}

.audio_icon {
    position: fixed;
    right: 0;
    top: 15%;
    display: block;
    height: 30px;
    width: 30px;
    cursor: pointer;
    background-color: #000;
    padding: 5px;
    border-radius: 6px;
    margin-right: 10px;
	z-index: 11;
}

.card {
    color: white;
    background-color: transparent;
    position: relative;
    width: 100%;
    overflow: hidden;
    box-shadow: none;
	border: 0;
}

h1, .h1 {
	font-family: Raleway-Bold;
	color: #ffffff;
	font-size: 42px;
}

.promo-logo h1, .promo-logo .h1 {
    margin-top: -50px;
}

h2, .h2 {
	font-family: Raleway-Bold;
	color: #ffffff;
	font-size: 18px;
}

h3, .h3 {
	font-family: Raleway-Bold;
	color: #ffffff;
	font-size: 24px;
}

p {
	font-size: 14px;
	line-height: 20px;
	color: #ffffff;
	text-align: center;
}

.btn {
    font-family: Raleway-Bold;
    background-color: #d5b160;
    color: #1a2b45;
    font-size: 18px;
    /* padding: 10px 20px; */
    border-radius: 10px;
    min-width: 250px;
	max-width: 100%;
	height: auto;
	z-index: 4;
	position: relative;
}

.bold {
	font-family: Raleway-Bold;
}

.close-btn {
	min-width: 170px;
	font-size: 18px;
	margin: 0 auto;
}

.adjust-width {
	max-width: 800px;
	margin: 0 auto;
}

#prizeMessage {
	font-size: 20px;
    line-height: 25px;
    color: #1a2b45;
    text-align: center;
    /* text-shadow: 1px 1px black; */
}

.btn-close {
	opacity: 1;
}

.modal-header {
	padding: 1rem 1rem 0;
	border-bottom: none;
}

.modal-content {
	background-color: #1a2b45;
	border: 3px solid #ffffff;
	border-radius: 15px;
}

.modal-content-bg {
	background-image: url(../img/modal-bg.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	width: 100%;
	pointer-events: auto;
	background-color: #fff;
	background-clip: padding-box;
	border: 5px solid #ffffff;
	border-radius: 0.3rem;
	outline: 0;
}


.modal-content p, .modal-content ul, .modal-content ol {
	color: #ffffff;
}

.modal-content ul, .modal-content ol {
	text-align: left;
	font-size: 14px;
}

.modal-content table {
    max-width: 100%;
}

.login-box {
    padding-top: 10px;
}

    .login-box .btn {
        font-family: Raleway-Regular;
        width: 100%;
        max-width: 268px;
        height: 40px;
        border-radius: 5px;
        border-color: transparent;
        background-color: #A58E6E;
        border-color: transparent;
        font-size: 18px;
        color: #ffffff;
        margin: 0 auto;
    }

        .login-box .btn:hover, .login-box .btn.active {
            background-color: #D5B160;
            color: #1A2B45;
            border-color: transparent;
        }

		.box {
			background-color: #1c2a43;
			max-width: 700px;
			padding: 20px;
			border-radius: 10px;
			margin: 0 auto;
		}

input[type="number"],
input[type="text"], input[type="email"] {
    font-family: Raleway-Regular;
    max-width: 268px;
    height: 40px;
    border-radius: 5px;
    background-color: #ffffff;
    border-color: transparent;
    font-size: 18px;
    color: #1A2B45;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    text-align: center;
}

.content {
	background-color: #1c2a43;
    border-radius: 10px;
    padding-top: 50px;
    max-width: 700px;
}

a {
	color: #d5b160;
	text-decoration: underline;
}

	a:hover {
		color: #A58E6E;
	}

table {
	width: 100%;
	max-width: 522px;
    margin: 0 auto;
}

th {
	background: #ffffff !important;
	border-bottom: 1px solid #fff;
	color: #1a2b45;
	padding: 0;
	text-align: left;
	font-size: 14px;
}

td {
	background: #1a2b45;
	border-bottom: 1px solid #fff;
	color: #ffffff;
	padding: 0;
	vertical-align: middle;
	text-align: left;
	font-size: 14px;
}

/* Cells in even rows (2,4,6...) are one color */
tr:nth-child(even) td {
	background: #1a2b45;
	color: #FFFFFF;
}

/* Cells in odd rows (1,3,5...) are another (excludes header cells)  */
tr:nth-child(odd) td {
	background: #d5b36a;
	color: #FFFFFF;
}

	tr:nth-child(odd) td.first {
		background-color: #D5B160 !important;
	}

	figure {
		margin: 0 0 0rem;
	}

.one p, .two p {
	font-family: Raleway-Bold;
	font-size: 14px;
	background-color: #a68f71;
	padding: 10px 20px;
	border-radius: 10px;
	min-width: 250px;
}

.ag-spotlight-moving_spotlight {
  bottom: 3.4375em;
  z-index: -1;
  width: 14.375em;
  height: 128.125em;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-color: rgba(255, 255, 255, 0.08);

  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;

  -webkit-animation: an-spotlight-moving-right 20s cubic-bezier(0.6, 0, 0.55, 0.8) infinite;
  -moz-animation: an-spotlight-moving-right 20s cubic-bezier(0.6, 0, 0.55, 0.8) infinite;
  -o-animation: an-spotlight-moving-right 20s cubic-bezier(0.6, 0, 0.55, 0.8) infinite;
  animation: an-spotlight-moving-right 20s cubic-bezier(0.6, 0, 0.55, 0.8) infinite;

  -webkit-clip-path: polygon(0 0, 100% 0, 60% 100%, 40% 100%);
  clip-path: polygon(0 0, 100% 0, 60% 100%, 40% 100%);

  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;

  position: fixed;
}
.ag-spotlight-moving_spotlight-right {
  right: -3.4375em;
}
.ag-spotlight-moving_spotlight-left {
  left: -3.4375em;

  -webkit-animation-name: an-spotlight-moving-left;
  -moz-animation-name: an-spotlight-moving-left;
  -o-animation-name: an-spotlight-moving-left;
  animation-name: an-spotlight-moving-left;
}

@-webkit-keyframes an-spotlight-moving-right {
  0%, 100% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  50% {
    -webkit-transform: rotate(-75deg);
    transform: rotate(-75deg);
  }
}
@-moz-keyframes an-spotlight-moving-right {
  0%, 100% {
    -moz-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  50% {
    -moz-transform: rotate(-75deg);
    transform: rotate(-75deg);
  }
}
@-o-keyframes an-spotlight-moving-right {
  0%, 100% {
    -o-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  50% {
    -o-transform: rotate(-75deg);
    transform: rotate(-75deg);
  }
}
@keyframes an-spotlight-moving-right {
  0%, 100% {
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  50% {
    -webkit-transform: rotate(-75deg);
    -moz-transform: rotate(-75deg);
    -o-transform: rotate(-75deg);
    transform: rotate(-75deg);
  }
}

@-webkit-keyframes an-spotlight-moving-left {
  0%, 100% {
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
  }
  50% {
    -webkit-transform: rotate(75deg);
    transform: rotate(75deg);
  }
}
@-moz-keyframes an-spotlight-moving-left {
  0%, 100% {
    -moz-transform: rotate(10deg);
    transform: rotate(10deg);
  }
  50% {
    -moz-transform: rotate(75deg);
    transform: rotate(75deg);
  }
}
@-o-keyframes an-spotlight-moving-left {
  0%, 100% {
    -o-transform: rotate(10deg);
    transform: rotate(10deg);
  }
  50% {
    -o-transform: rotate(75deg);
    transform: rotate(75deg);
  }
}
@keyframes an-spotlight-moving-left {
  0%, 100% {
    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -o-transform: rotate(10deg);
    transform: rotate(10deg);
  }
  50% {
    -webkit-transform: rotate(75deg);
    -moz-transform: rotate(75deg);
    -o-transform: rotate(75deg);
    transform: rotate(75deg);
  }
}

.confetti {
background: rgb(166,124,0);
background: linear-gradient(0deg, rgba(166,124,0,1) 0%, rgba(191,155,48,1) 10%, rgba(255,191,0,1) 20%, rgba(255,207,64,1) 30%, rgba(255,220,115,1) 40%, rgba(255,216,99,1) 50%, rgba(255,220,115,1) 60%, rgba(255,207,64,1) 70%, rgba(255,191,0,1) 80%, rgba(191,155,48,1) 90%, rgba(166,124,0,1) 100%);
	border: 1px solid #A57C01;
	position: absolute;
	display: flex;
	width: 10px;
	height: 25px;
	top: -100px;
	position: fixed;
	z-index: -1;
	}

.confetti:nth-child(1) {
	animation: fall 2.5s linear infinite;
	left: 10%;
	}

.confetti:nth-child(2) {
	animation: fall 2.3s linear infinite .2s;
	left: 20%;
	}

.confetti:nth-child(3) {
	animation: fall 2.4s linear infinite .4s;
	left: 30%;
	}

.confetti:nth-child(4) {
	animation: fall 2.7s linear infinite .1s;
	left: 40%;
	}

.confetti:nth-child(5) {
	animation: fall 2.6s linear infinite .7s;
	left: 50%;
	}

.confetti:nth-child(6) {
	animation: fall 2.4s linear infinite .2s;
	left: 60%;
	}

.confetti:nth-child(7) {
	animation: fall 2.1s linear infinite .7s;
	left: 70%;
	}

.confetti:nth-child(8) {
	animation: fall 2.4s linear infinite .9s;
	left: 80%;
	}

.confetti:nth-child(9) {
	animation: fall 2.9s linear infinite .9s;
	left: 90%;
	}

.confetti:nth-child(10) {
	animation: fall 2.2s linear infinite 1.1s;
	left: 100%;
	}

.confetti:nth-child(11) {
	animation: fall2 2.5s linear infinite;
	left: 95%;
	}

.confetti:nth-child(12) {
	animation: fall2 2.3s linear infinite 1.1s;
	left: 85%;
	}

.confetti:nth-child(13) {
	animation: fall2 2.4s linear infinite 1.2s;
	left: 75%;
	}

.confetti:nth-child(14) {
	animation: fall2 2.7s linear infinite 1.3s;
	left: 65%;
	}

.confetti:nth-child(15) {
	animation: fall2 2.6s linear infinite 1.4s;
	left: 55%;
	}

.confetti:nth-child(16) {
	animation: fall2 2.4s linear infinite 1.5s;
	left: 45%;
	}

.confetti:nth-child(17) {
	animation: fall2 2.1s linear infinite 1.6s;
	left: 35%;
	}

.confetti:nth-child(18) {
	animation: fall2 2.4s linear infinite 1.7s;
	left: 25%;
	}

.confetti:nth-child(19) {
	animation: fall2 2.9s linear infinite 1.8s;
	left: 15%;
	}

.confetti:nth-child(20) {
	animation: fall2 2.2s linear infinite 1.9s;
	left: 5%;
	}

.confetti:nth-child(21) {
	animation: fall 2.5s linear infinite;
	left: 3%;
	}

.confetti:nth-child(22) {
	animation: fall 2.3s linear infinite 1.3s;
	left: 13%;
	}

.confetti:nth-child(23) {
	animation: fall 2.4s linear infinite 1.4s;
	left: 23%;
	}

.confetti:nth-child(24) {
	animation: fall 2.7s linear infinite 1.5s;
	left: 33%;
	}

.confetti:nth-child(25) {
	animation: fall 2.6s linear infinite 1.6s;
	left: 43%;
	}

.confetti:nth-child(26) {
	animation: fall 2.4s linear infinite 1.2s;
	left: 53%;
	}

.confetti:nth-child(27) {
	animation: fall 2.1s linear infinite 1.7s;
	left: 63%;
	}

.confetti:nth-child(28) {
	animation: fall 2.4s linear infinite 1.8s;
	left: 73%;
	}

.confetti:nth-child(29) {
	animation: fall 2.9s linear infinite 1.9s;
	left: 83%;
	}

.confetti:nth-child(30) {
	animation: fall 2.2s linear infinite 1.1s;
	left: 93%;
	}

.confetti:nth-child(31) {
	animation: fall2 2.2s linear infinite 1.1s;
	left: 7%;
	}

.confetti:nth-child(32) {
	animation: fall2 2.9s linear infinite .9s;
	left: 17%;
	}

.confetti:nth-child(33) {
	animation: fall2 2.4s linear infinite .1s;
	left: 27%;
	}

.confetti:nth-child(34) {
	animation: fall2 2.1s linear infinite .7s;
	left: 37%;
	}

.confetti:nth-child(35) {
	animation: fall2 2.4s linear infinite .2s;
	left: 47%;
	}

.confetti:nth-child(36) {
	animation: fall2 2.6s linear infinite .7s;
	left: 57%;
	}

.confetti:nth-child(37) {
	animation: fall2 2.7s linear infinite .9s;
	left: 67%;
	}

.confetti:nth-child(38) {
	animation: fall2 2.4s linear infinite .4s;
	left: 77%;
	}

.confetti:nth-child(39) {
	animation: fall2 2.3s linear infinite .2s;
	left: 87%;
	}

.confetti:nth-child(40) {
	animation: fall2 2.5s linear infinite .3s;
	left: 97%;
	}

@keyframes fall {
	0% {top:-110px; transform: rotate(0deg) rotateY(-90deg); opacity:1;}
	100% {top:900px; transform: rotate(360deg) rotateY(180deg); opacity:0.7;}
}

@keyframes fall2 {
	0% {top:-110px; transform: rotate(0deg) rotateY(90deg); opacity:1;}
	100% {top:900px; transform: rotate(-360deg) rotateY(-180deg); opacity:0.5;}
}

/********** Game Media Queries **********/

/********** Tablet Portrait **********/
@media (max-width: 820px) and (min-width: 421px) and (orientation: portrait) {

}

/********** Mobile Landscape **********/
@media (max-width: 940px) and (orientation: landscape) {
h1, .h1 {
		font-size: 30px;
	}

	.promo-logo h1, .promo-logo .h1 {
		margin-top: -40px;
	}
}

/********** Mobile Portrait **********/
@media (max-width: 460px) and (orientation: portrait) {
	h1, .h1 {
		font-size: 20px;
	}

	.btn {
		margin-bottom: 15px;
	}

	.promo-logo h1, .promo-logo .h1 {
		margin-top: -22px;
	}
}