/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

/* Import Google Font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

@font-face {
	font-family: Montserrat-Regular;
	src: url('../../../2022/spinata-fiesta/fonts/Montserrat-Regular.otf');
}

@font-face {
	font-family: Montserrat-Bold;
	src: url('../../../2022/spinata-fiesta/fonts/Montserrat-Bold.otf');
}

p {
	font-size: 14px;
}

body {
	font-family: 'Montserrat-Regular';
	font-size: 14px;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
}

.navbar {
	background-color: #2f084c !important;
	padding: 0;
}

.hero {
	background-image: url(../img/header-bg.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	/* height: 110vh; */
	margin-top: 85px;
	padding-bottom: 85px;
}

.card {
    background-color: transparent;
    border: none;
}

.terms {
	font-size: 12px;
}

dl, ol, ul, p {
	color: #ffffff;
}

footer {
	background-color: #2f084c !important;
	padding: 20px 0;
}

.h1, h1 {
	font-family: 'Montserrat-Bold';
	color: #fea036;
	font-size: 42px;
}

.bold {
	font-family: 'Montserrat-Bold';
}

.h2, h2 {
	font-family: 'Montserrat-Bold';
	color: #fb009f;
	font-size: 30px;
}

.desc {
	padding: 50px 0;
	background-color: #5e1097;
}

.main {
	background-image: url(../img/bg.jpg);
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 50px 0 5px;
}

a {
	color: #fb009f;
	text-decoration: none;
	font-family: 'Montserrat-Bold';
}

	a:hover {
		color: #ffffff;
	}

#prizeHeading {
	font-size: 26px;
	font-weight: 700;
	text-transform: uppercase;
	color: #FFFFFF;
	text-shadow: 0px -3px 2px rgb(7 178 243 / 0%), 0 -1px 4px #07b2f3, 0 -2px 10px #07b2f3, 0 -10px 20px #07b2f3, 0 -18px 40px #07b2f3;
	text-align: center;
}

#prizeMessage a {
	color: #07b2f3;
}

.modal-title {
	font-size: 26px;
	font-weight: 700;
	text-transform: uppercase;
	color: #FFFFFF;
	text-shadow: 0px -3px 2px rgb(7 178 243 / 0%), 0 -1px 4px #07b2f3, 0 -2px 10px #07b2f3, 0 -10px 20px #07b2f3, 0 -18px 40px #07b2f3;
}

.modal-content {
	background-color: #2f084c;
}

.modal-header, .modal-footer {
	border-bottom: 0;
}

.modal-header {
	display: block;
	text-align: center;
}

input[type="number"], input[type="text"], input[type="email"] {
	border: 0;
	background-color: #2f084c;
	height: 68px;
	font-family: 'Montserrat-Bold';
	font-size: 20px;
	color: white;
	padding: 12px 35px;
	border-radius: 50px;
	/*box-shadow: inset 0px 0px 10px 7px #fea036;*/
	background-color: #5e1097;
	-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;
	display: inline-block;
	text-align: center;
	max-width: 450px;
}

button.btn-login, button.replay-btn {
	width: 100%;
	height: 68px;
	font-family: 'Montserrat-Bold';
	font-size: 20px;
	color: white;
	padding: 12px 35px;
	border-radius: 50px;
	/*box-shadow: inset 0px 0px 10px 7px #07b2f3;*/
	background-color: #07b2f3;
	-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;
	display: inline-block;
	max-width: 450px;
	margin: 0 auto;
}

	button.btn-login:hover, button.btn-login:focus, button.btn-login:visited, button.replay-btn:hover, button.replay-btn:focus, button.replay-btn:visited {
		color: #ffffff;
		-webkit-box-shadow: inset 0px 0px 10px 7px #75da00;
		        box-shadow: inset 0px 0px 10px 7px #75da00;
	}

button.close-btn {
	font-family: 'Montserrat-Bold';
	font-size: 20px;
	color: white;
	padding: 12px 35px;
	border-radius: 50px;
	-webkit-box-shadow: inset 0px 0px 10px 7px #fea036;
	        box-shadow: inset 0px 0px 10px 7px #fea036;
	-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;
	display: block;
	margin: 0 auto;
}

	button.close-btn:hover, button.close-btn:focus, button.close-btn:visited {
		color: #ffffff;
		-webkit-box-shadow: inset 0px 0px 10px 7px #fb009f;
		        box-shadow: inset 0px 0px 10px 7px #fb009f;
	}

.options img {
	padding: 10px;
}

.options img:hover {
	cursor: pointer;
}

	.options p {
		font-family: 'Montserrat-Bold';
		font-size: 28px;
	}

#dPromoInfo {
	/*display: none;*/
	text-align: center;
}

.lb-winner-icon {
	max-width: 19px;
}

#pLoginErrorMessage {
	color: red;
	text-align: center;
	border-radius: 10px;
	background-color: #ffffff;
	max-width: 440px;
	line-height: 30px;
	margin: 10px auto 0;
}

.tile-disabled {
	opacity: 0.5;
}

.tile-selected {
	webkit-transform: translatey(0px);
	-webkit-transform: translatey(0px);
	    -ms-transform: translatey(0px);
	        transform: translatey(0px);
	-webkit-animation: float 3s ease-in-out infinite;
	animation: float 3s ease-in-out infinite;
}

@-webkit-keyframes float {
	0% {
		-webkit-transform: translatey(0px);
		transform: translatey(0px);
	}

	50% {
		-webkit-transform: translatey(-10px);
		transform: translatey(-10px);
	}

	100% {
		-webkit-transform: translatey(0px);
		transform: translatey(0px);
	}
}

@keyframes float {
	0% {
		-webkit-transform: translatey(0px);
		transform: translatey(0px);
	}

	50% {
		-webkit-transform: translatey(-10px);
		transform: translatey(-10px);
	}

	100% {
		-webkit-transform: translatey(0px);
		transform: translatey(0px);
	}
}

.pre-code {
	font-family: 'Montserrat-Regular';
	color: #ffffff;
}

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

th {
	background: #07b2f3;
	border-bottom: 1px solid #fff;
	color: #ffffff;
	padding: 8px;
	text-align: left;
}

td {
	background: #2f084c;
	border-bottom: 1px solid #fff;
	color: #fff;
	padding: 8px;
	vertical-align: middle;
	text-align: left;
}

.daily .row {
	--bs-gutter-x: 0 !important;
}

.offer {
	background: rgba(47,8,76,0.8);
	padding: 20px;
	min-height: 325px;
	display: table-cell;
    vertical-align: middle;
}

.offer p {
	margin-bottom: 0rem;
}

.info {
	max-width: 924px;
	margin: 0 auto;
}

.lbp {
	background-color: #2f084c;
	padding: 5px 0;
	max-width: 924px;
	margin: 0 auto;
	border-radius: 15px;
}

	.lbp h4 {
		color: #ffffff;
		padding: 10px 0 0;
	}

/********** Media Queries **********/
/********** Tablet Landscape **********/
@media (max-width: 1366px) and (orientation: landscape) {
	.hero {
		background-image: url(../img/header-bg-tablet-ls.jpg);
		/* margin-top: 0; */
		background-position: center;
	}

	.promo-logo img {
		max-width: 50%;
	}

	.offer .h2, .offer h2 {
		font-size: 20px;
	}
}
/********** Large Tablet Portrait **********/
@media (max-width: 1024px) and (min-width: 767px) and (orientation: portrait) {
	.hero {
		background-image: url(../img/header-bg-tablet-p.jpg);
		/* height: 100vh; */
		/* margin-top: 0; */
		padding-bottom: 20px;
	}

	.offer .h1, .offer h1 {
		font-size: 20px;
}

	.offer .h2, .offer h2 {
		font-size: 18px;
	}
}
/********** Tablet Landscape **********/
@media (max-width: 1024px) and (min-width: 768px) and (orientation: landscape) {
	.hero {
		background-image: url(../img/header-bg-tablet-ls.jpg);
		/* height: 100vh; */
		/* margin-top: 0; */
		padding-bottom: 20px;
	}

	.offer .h1, .offer h1 {
		font-size: 20px;
}

	.offer .h2, .offer h2 {
		font-size: 18px;
	}
}
/********** Tablet Portrait **********/
@media (max-width: 820px) and (min-width: 421px) and (orientation: portrait) {
	.ms-auto {
		text-align: center;
	}

	.hero {
		background-image: url(../img/header-bg-tablet-p.jpg);
		/* height: 100vh; */
		/* margin-top: 0; */
		padding-bottom: 20px;
	}

	.offer {
		display: block;
		max-width: 648px;
		margin: 0 auto;
		min-height: auto;
	}
}
/********** Mobile Landscape **********/
@media (max-width: 1000px) and (orientation: landscape) {
	.ms-auto {
		text-align: center;
	}

	.hero {
		background-image: url(../img/header-bg-mobile-ls.jpg);
		margin-top: 73px;
	}

	.promo-logo img {
		max-width: 50%;
	}

	.offer {
		display: block;
		max-width: 648px;
		margin: 0 auto;
		min-height: auto;
	}
}
/********** Mobile Portrait **********/
@media (max-width: 450px) and (orientation: portrait) {
	.h1, h1 {
		font-size: 28px;
	}

	.h2, h2 {
		font-size: 24px;
	}

	.ms-auto {
		text-align: center;
	}

	.hero {
		background-image: url(../img/header-bg-mobile-p.jpg);
		/* height: 100vh; */
		/* margin-top: 19px; */
		padding-bottom: 20px;
	}

	.offer {
		display: block;
		max-width: 648px;
		margin: 0 auto;
		min-height: auto;
	}

	.offer .h1, .offer h1 {
		font-size: 20px;
}

	.offer .h2, .offer h2 {
		font-size: 18px;
	}

	.desc {
		padding: 20px 0;
	}

	.options p {
		font-size: 20px;
	}
}
.example {
    display: -ms-grid;
    display: grid;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    background: -webkit-gradient(linear, left top, left bottom, from(white), to(black));
    background: -o-linear-gradient(top, white, black);
    background: linear-gradient(to bottom, white, black);
}