* {
margin:0;
padding:0;
box-sizing:border-box
}
body {
font-family:Lato,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
overflow-x:hidden;
color:#d3b465;
background:url(https://image.my.silhouette-group.com/lib/fe3111737364047f771779/m/1/4cd0ee1d-9bd4-4c45-8597-9903932eb0a9.png) #ece7e3 repeat-x;
}
.bdr {
border:solid 1px red
}
.logo-container .logo {
margin:auto;
max-width:200px
}
.logo-container .logo img {
margin:20px auto;
max-width:200px;
/* filter: drop-shadow(3px 3px 3px #222); */
}
.logo-container h1 {
margin:10px;
padding:0 15px;
text-align:center;
}
.play-now {
margin:10px auto 0px auto;
max-width:75%;
text-align:center;
}
.play-now h2 {
text-align: center;
font-size: 24px;
font-weight: 500;
line-height: 35px;
max-width: 800px;
margin: auto;
}
.play-now p {
max-width:400px;
margin:4px auto;
}
.container{ 
min-height:100vh;
background:url(https://image.my.silhouette-group.com/lib/fe3111737364047f771779/m/1/832d349b-91f2-4e1e-9d47-a1dd5d9df544.png);
background-repeat: no-repeat;
background-position: center;
display: flex;
justify-content: center;
align-items: center;
background-size: auto 100%;
}
@media only screen and (min-width: 1025px){
.container{ 
background-size: cover;
background-position: center;
}
.numbers div{margin:1vh!important;}
}
@media only screen and (min-width: 768px) and (max-width: 1024px){
.container{ min-height: 60vh;}
.numbers div {width: 6vh!important; height: 6vh!important; font-size: 20px !important; margin:5px!important;}
.calendar{margin-top: -15%!important;}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
.container{min-height: 100vh;} 
.numbers div {width: 9vh !important; height: 9vh !important;}
.calendar{margin-top: -10%!important;}
.numbers div {margin:5px!important;}
}
@media only screen and (min-width:460px) and (max-width: 767px){
.numbers div { font-size: 16px!important; width: 42px!important; height: 42px!important;}
}
@media only screen and (max-width: 460px){
.container{ min-height: 55vh;background-size: auto 100%;background-position: bottom;}
.calendar {margin-top: -20%!important;}
.numbers div { font-size: 16px!important; width: 6vh!important; height: 6vh!important;}
.newsletter-container {margin: auto 6%!important;}
.close-button {
top : -5px; !important}
}
@media only screen and (width: 820px) and (height: 1180px) {
.container{min-height: 60vh;}
.numbers div {width: 5vh !important;height: 5vh !important;font-size: 18px !important;    }
}
@media only screen and (width: 1180px) and (height: 820px) {
.numbers div {font-size: 20px !important;}
}
@media only screen and (width: 1024px) and (height: 1366px) {
.container{min-height: 65vh;}
.numbers div {width: 5vh !important;height: 5vh !important;font-size: 18px !important;    }
}
@media only screen and (width: 1366px) and (height: 1024px) {
.numbers div {font-size: 28px !important;}
}
@media only screen and (width: 912px) and (height: 1368px) {
.container{min-height: 65vh;}
.numbers div {font-size: 20px !important;    }
}
@media only screen and (width: 540px) and (height: 720px) {
.container{min-height: 80vh;}
.numbers div {font-size: 20px !important;    }
}
.calendar-wrap {
width: 100%;
/*  text-align: right;
height: 300px;
position: absolute;
z-index: 99;
margin-top: -2%;
bottom: 30%; */
}
.calendar {
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
margin-top:-6%;
}
@media (max-width: 460px) {
.play-now {
padding:0 10px
}
}
.circle {
position:relative;
width:100%;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
padding:20px
}
.circle::before {
left:0
}
.circle::after {
right:0
}
.background-glow {
width:420px;
height:380px;
border-radius:50%;
border:2px solid #fff;
box-shadow:0 0 1px #ffffff,0 0 2px #ffffff,0 0 6px #ffffff,0 0 12px #ffffff,inset 0 0 1px #ffffff,inset 0 0 2px #ffffff,inset 0 0 6px #ffffff,inset 0 0 12px #fff;
z-index:0;
margin-top:10px
}
.numbers {
display:flex;
justify-content:center;
text-align:center;
justify-content:center;
width:100%
}
.numbers div {
background:#ffffff4d;
border:1.5px solid #fff;
/*
font-size:16px;
width:45px;
height:45px;
*/
font-size:1.5vw;
font-weight: 300;
width:9vh;
height:9vh;
transition:.3s ease;
margin:2px;
vertical-align:middle;
-webkit-transform:perspective(1px) translateZ(0);
transform:perspective(1px) translateZ(0);
-webkit-transition-duration:.3s;
transition-duration:.3s;
-webkit-transition-property:transform;
transition-property:transform;
display: flex;
justify-content: center;
align-items: center;
}
.numbers a {
text-decoration:none;
color:#d3b465
}
.numbers div:hover {
background:#fff8e1;
box-shadow:0 0 10px #bfa45d80;
-webkit-transform:scale(1.1);
transform:scale(1.1)
}
.side {
position:fixed;
bottom:0;
width:10%;
height:100%;
z-index:-1;
}
.left-side-img {
left:0;
background:url(https://image.my.silhouette-group.com/lib/fe3111737364047f771779/m/1/a9245dee-fc62-4ac0-b8e7-9b809de54876.jpg);
background-size:100%
}
.right-side-img {
right:0;
background:url(https://image.my.silhouette-group.com/lib/fe3111737364047f771779/m/1/c2986721-f1ac-4342-9cd9-6611b762b270.jpg);
background-size:100%
}
.bottom-img {
width:100%;
margin-top:-330px;
position:relative;
overflow:hidden
}
.bottom-img img {
width:100%;
position:inherit;
z-index:99
}
@media (min-width: 1199px) {
/*.bottom-img img { 
width: 120%; 
left: -12%; 
} 
.bottom-img {
margin-top:-320px 
} 
.background-glow {
width: 490px;
height: 460px;
}
.numbers div {
width:58px;
height:58px;
font-size: 18px;
}
*/
.bottom-img img {
width: 130%;
left: -16%;
}
.bottom-img {
margin-top:-390px
}
.background-glow {
width: 560px;
height: 530px;
}
/* .numbers div { */
/* width:62px; */
/* height:62px; */
/* font-size: 20px; */
/* } */
}
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
.bottom-img {
margin-top:-250px
}
.bottom-img img {
width:130%;
left:-15%
}
}
@media (max-width: 768px) {
.side {
width:30px
}
.background-glow {
min-width:350px;
min-height:350px
}
.right-side-img,.left-side-img {
background-size:200% 100%
}
.bottom-img img {
width:150%;
left:-25%
}
.bottom-img {
margin-top:-220px
}
}
@media (max-width: 460px) {
.bottom-img {
margin-top:-80px
}
.bottom-img img {
width: 190%;
left: -45%;
}
.side {
width:20px
}
}
.newsletter-wrap {
background:#eeeae2;
text-align:center;
max-width:100%;
margin:-10px auto;
padding-bottom:20px;
position: relative;
z-index: 9;
}
.icon {
width:60px;
margin:auto;
padding:20px 0 0
}
.newsletter-h1 {
color:#d3b465;
font-size:32px;
font-weight:400;
margin:10px;
display:inline-flex;
font-family:Lato,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif
}
.newsletter-container {
max-width:400px;
text-align:center;
margin:auto
}
.input-button-container {
position:relative;
margin-bottom:10px;
display:flex
}
input[type="text"] {
width:100%;
border:none;
border-bottom:1px solid #000;
outline:none;
padding:12px 0;
transition:border-color .3s;
color:#d3b465;
font-size:22px;
text-align:center;
font-weight:100;
background:#d8d0c526;
font-family:Lato,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif
}
#registerButton {
background:#f4f4f4;
border:1px solid #000;
color:#000;
cursor:pointer;
display:inline-block;
font-weight:700;
line-height:1.6em;
overflow:hidden;
padding:.5rem 1.6rem;
position:relative;
transition:all .18s ease-in;
z-index:1;
width:80%;
text-transform:uppercase;
letter-spacing:1px;
font-family:Lato,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif
}
#registerButton:hover {
background:#000;
border:1px solid #000;
color:#fff
}
/* Start of the model changes code */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
justify-content: center;
align-items: center;
z-index:1000;
padding:0px;
}
/* Style for the modal content */
.main-modal-content {
background-color: #fff;
padding: 20px;
width: 80%;
max-width: 800px; /* Max width for larger screens */
max-height: 80%;   /* Allow height to adjust based on content */
border-radius: 0px; /* Optional: add rounded corners */
display: flex;
flex-direction: column; /* Stack content vertically */
justify-content: center; /* Center items vertically */
align-items: center; /* Center items horizontally */
margin: 20px; /* Add equal margin around the modal content */
overflow-y: auto;   
position: relative;
overflow-x: hidden;
}
.close-button {
position: absolute;
top: -11px;
right: 0px;
cursor: pointer;
font-size: xx-large;
color: #000; /* Text color */
/*background-color: red; /* Background color */
padding: 2px 15px; /* Padding for the box */
border: none; /* No border */
/* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Optional shadow */
}
#innerModalContent{
width: 100%;
display:flex;
flex-direction:column;
align-items: center; 
overflow-y: auto;
}
.retailerSearchIframeModal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
justify-content: center;
align-items: center;
z-index:1000;
padding:0px;
}
.retailer-iframe-modal-content {
background-color: #fff;
padding: 20px;
width: 80%;
max-width: 800px;
height: 80%;
overflow: hidden; /* Add this to prevent scrollbars */
position: relative;
flex: unset !important;
}
.retailer-search-close-button {
position: absolute;
top: -5px;
right: 16px;
cursor: pointer;
font-size: xx-large;
color: #000 !important; 
}
.modal.active {
display: flex;
}
@media only screen and (max-width: 991px) {
.close-button{top: -5px!important;}
}
.door{cursor: pointer;}