body, html { width:100%; box-sizing: border-box; font-family: 'Varela Round', sans-serif; font-weight:400;
  font-size:22px; color:#fff; margin:0px; padding:0px; border:0 !important;
  background-image: url('../images/background.jpg');
  background-position:center top;
  background-repeat:repeat-x;
  background-color:#011223; }
  img { width:100%; height:auto; display:block; margin:0px; padding:0px; border:0 !important; }
  a, a:hover { text-decoration:none; border:none; cursor:pointer; }
  *, *:before, *:after { -ms-box-sizing: border-box; box-sizing: border-box; }
  p { width:100%; text-align:center; margin:0 auto !important; }
  span { display:block; }

/* Top */
.top { position:relative; max-width:1195px; width:100%; margin:0 auto; left:0; right:0; top:0; z-index:999; display: none;}
.logo { position:absolute; left:0; top:0; width:187px; max-height:80px; }

/* Animations */
.sprite { position:absolute; width:590px; height:400px; top:0px; margin:0 auto; right:0; left:0; transform: scale(1, 1);
  background-image: url('../images/animation.png');
  animation: playX 0.7s steps(10) infinite,
             playY 5.6s steps(8) infinite; }
  @keyframes playX {
    from {background-position-x: 0px;}
    to {background-position-x: -5900px;}
  }
  @keyframes playY {
    from {background-position-y: 0px;}
    to {background-position-y: -3200px;}
  }
.pulse {
    transform: scale(1);
    animation: pulse 1.5s infinite; }
    @keyframes pulse {
      0% { transform: scale(0.9); }
      50% { transform: scale(1); }
      100% { transform: scale(0.9); }
    }
    .pulse:last-child { animation: pulse 2s 1s infinite; }

/* Design */
.banner { position:relative; width:100%; max-width:1650px; padding:0 20px !important; margin:0 !important; overflow:hidden; margin:0 auto !important;
 overflow:hidden; clear:both; }
.money { position:absolute; max-width:621px; margin:0 auto; left:0; right:0; top:120px; }
.title { position:relative; max-width:323px; margin:0 auto; left:0; right:0;  }
.cartooms { position:relative; right:0; left:0; margin:0 auto; left:0; right:0; top:-20px; max-width:834px; }

/* Jackpot */
.jackpot { width:100%; height:100%; margin:0 auto; padding:6px 0 20px 0; color:#fdf33e;
  text-align:center; background-image: url('../images/jackpot-bg.png'); background-position: left top;
  background-repeat: no-repeat; background-size: contain; }
.count { width:100%; font-size:24px; letter-spacing:0px; line-height:22px; }
.count::before {content:"$"; }
.tl { position:relative; margin:0 auto; left:0; right:0; color:#fff; font-size:13px; display:block; }
.tl-game { color:#fff; font-size:22px; padding-bottom:20px; }

/* CTAs */
.cta { max-width:400px; width:100%; display:block; margin:0 auto; padding:0; min-height:72px; background: url('../images/play-now.png') no-repeat center/contain; }
.cta:hover { background-image: url('../images/play-now-over.png');}

/* Boxes */
.col-container { display:flex; width:100%; position:relative; }
.col { flex:1; margin:0 16px 0 0; text-align:center; position:relative; }
.col:last-child { margin-right:0; }


#miModal1:target, #miModal2:target { opacity:1; pointer-events:auto; z-index:999; }

.benefits { max-width:1100px; padding:20px 20px 40px; margin:0 auto; position:relative;  }
.benefits p { padding:0 0 25px 65px; text-align:left; font-size:22px; }
.benefits .col { max-width:350px; overflow:hidden; }
em { color:#ffcb04; font-style: normal; }

.sponsors { max-width:850px; margin:0 auto; padding:0 20px 40px 0; }
.spacer, .spacer2 { display:none; }

/* Slider */
.games { margin-bottom:20px; max-width:1002px; margin:0 auto; padding:0 20px; }
.games .col { overflow:hidden !important; position:relative; }

.mySlides { display:none; border-radius:10px; overflow: hidden; }
.mySlides img { vertical-align:middle; width:100%; }
.slideshow-container { max-width:400px; position:relative; margin:auto; display:none; }
.dots { text-align:center; position:relative; z-index:997; }
.dot { display:none !important; height:15px; width:15px; margin:0 2px 50px; background-color:#123057; border-radius:50%; transition: background-color 0.6s ease; }
.active { background-color:#009df9; }
.fade { -webkit-animation-name:fade; -webkit-animation-duration:1.5s; animation-name:fade; animation-duration:1.5s; }
@-webkit-keyframes fade { from {opacity: .4} to {opacity: 1} }
@keyframes fade { from {opacity: .4} to {opacity: 1} }

.steps { max-width:765px; margin:0 auto; padding-bottom:30px; }
.steps .col { position:relative !important; }

.pirate { position:absolute; bottom:-15px; right:-70px; max-width:113px; }
.agent { position:absolute; bottom:-15px; left:-50px; max-width:95px; }

.mbl { display:none !important; }

/* Footer */
.footer-box{width: 100%; height: auto; padding: 10px;}
.footer { position:absolute; top:35px; color:#999; display:none; padding:20px; width:100% !important; max-width:1220px; font-size:14px;
  margin:0 auto; clear:both; left: 50%; transform: translate(-50%, -50%); margin-top: 50px;}
.footer p { padding:5px 0; text-align: left; }
.content { max-width:1220px; margin:20px auto 40px; overflow:hidden; display: flex; justify-content: space-between; align-items: center;}

.long-wrap { position:relative; padding:0 10px; }
.toggle { display:block; padding:9px 8px 10px 8px; width:180px; color:#fff; border:1px solid #2eb2ff; text-align:center;
font-size:16px; position:relative; }
.toggle:hover { border:1px solid #2eb2ff; background-color:#0b213d; }
.payments-box{float: right;}
.pay-methods { width:100%; height:35px; }

strong { color:#2eb2ff; }

/* Responsive */
@media screen and (max-width:1250px){
  .banner { padding:0px 20px 0px }
  .logo { left:20px; }
}
@media screen and (max-width:1000px){
  .col-container:not(.thumb, .steps, .timer) { display:block; }
  .benefits { max-width:450px; padding:20px 0 40px;  }
  .benefits .col { margin:0 0 20px 0; max-width:450px; overflow:hidden; display:flex;}
  .jackpot { min-height:78px; padding:15px 0 20px 0;}
}
@media screen and (max-width:900px){
  .timer { margin:0 auto 12px; }
  .logo { position:relative; right:0; left:0; top:0; margin:0 auto; }
  .money { top:180px; }
  .steps { max-width:700px; }
}
@media screen and (max-width:750px){
  .sprite { transform-origin: left center;}
  .col-container:not(.timer)  { display:block; }
  .col { max-width:inherit; }
  .games { display:none !important; }
  .slideshow-container { display:inherit !important; padding:0 20px; }
  .dot { display:inline-block !important; }
  .steps { max-width:300px; }
  .content { padding:0 20px; }
  .pirate, .agent { display:none; }
}
@media screen and (max-width:620px){
  .payments-box{
    float: none;
    margin: 0 auto;
  }
  .content{
    display: block;
  }
  .toggle{
    margin: 0 auto;
  }
  .pay-methods{
    margin-top: 10px;
  }
  .footer{
    top: 85px;
  }
}
@media screen and (max-width:560px){
  .sprite { transform: scale(0.9, 0.9); }
  .mbl { display:block !important; }
  .dsk { display:none !important; }
  .toggle { margin:0 auto; }
  .logo { width:150px; }
  .content { padding:0; margin:0 auto 40px; }
  .footer{
    top: 100px;
  }
}
@media screen and (max-width:490px){
  .sprite { transform: scale(0.7, 0.7); }
  .benefits { max-width:350px; padding:20px 0;  }
  .jackpot { padding:8px 0 0 20px;}
  .steps { max-width:250px; }
  .tl-game { font-size:19px; }
  .timer { max-width:300px; }
  .col-container { display:block; }
  h1 { font-size:12px; display:block;  }
  #clockdiv { display: block; margin:0 auto; }
  .footer{
    top: 110px;
  }
}
@media screen and (max-width:380px){
  .benefits { max-width:300px;  }
  .sprite { transform: scale(0.6, 0.6); }
  .footer{
    top: 120px;
  }
}
@media screen and (max-width:360px){
  .tl-game { font-size:17px; }
}
@media screen and (max-width:299px){
  body { display: none; }
}



/*Logos + badge */

.logos{
  position: relative;
  width: 100%;
  max-width: 1195px;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 0;
  z-index: 999;
}


.logos-inner{
  width: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.casino-logo {
  width: 100%;
}

.badge {
  width: 50%;
  margin-left: 10px;
}


@media screen and (max-width:900px){
  .logos {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .logos-inner{
    position: relative;
    min-width: 125px;
  }
}