@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');

body, html { width:100%; box-sizing: border-box;
  font-family: 'Roboto', sans-serif; font-weight:400;
  font-size:15px; color:#fff; margin:0px; padding:0px; border:0 !important;
  background: url('../images/background.png') no-repeat center top ;
  background-color:#031028; }
  img { height:auto; display:block; margin:0px; padding:0px; border:0 !important; }
  a, a:hover { text-decoration:none; border:none; cursor:pointer; color:#c80443; }
  *, *:before, *:after { box-sizing:border-box; -ms-box-sizing: border-box; }
  strong { color:#60a0e0; }

.content { padding-left: calc(100vw - 100%); display:block; width:100%; max-width:1540px; margin:0 auto; padding:20px; position:relative; left:0; right:0; height:100%; }

.top { position:relative; max-width:1500px; width:100%; display:block; margin:0 auto; left:0; right:0; z-index:999; overflow:hidden; }
.logo { max-width:137px; display:inline-block; position:relative; }
nav { position:relative; top:0; right:0; float:right; }
nav .online { display:inline-block; padding-top:23px; margin:0 20px; }
nav .online::before { font-size:18px; content:"● "; animation: color-change 1s infinite; display: inline-block; padding-right:6px;  }
@keyframes color-change {
  0% { color:gray; }
  50% { color:#11ca82; }
  100% { color:gray;  }
}

/* DIV table */
.table { display:table; width:100%; font-size:13px; max-width:480px; float:right; padding-top:17px; }
.row { display:table-row; }
.cel { width:33%; display:table-cell; vertical-align:top; }
.cel img { display:inline-block; max-width:34px; }
.cel span { display:inline-block; color:#009df8; vertical-align:top; }

/* CTA */
.login { width:125px; height:40px; padding:11px 10px 10px; font-weight:700; color:#fff; text-align:center; display:inline-block;
background-color:#60a0e0; border-radius:30px; transition:0.4s; }
.login:hover { color:#60a0e0; background-color:#fff;  }

/* Section */

section p { font-size:18px; text-align:center; }

.promo { position:relative; padding:150px 0 70px 0; text-align:center;
  background: url('../images/chips.png') no-repeat center center/contain; }
.promo img { max-width:850px; width:100%; left:0; top:0; margin:0 auto; }
.bonus-mbl { display:none; }

/* CTA */

.cta { display:block; margin:0 auto; width:303px; height:83px; background: url('../images/cta.png') no-repeat center top;
animation: pulse 1.5s infinite; }
@keyframes pulse {
  0% { transform: scale(0.95); }
  70% { transform: scale(1.10); }
  100% { transform: scale(0.95); }
}
.cta:hover { background-position: center bottom; }

/* Footer */

.toggle { display:block; padding:10px; width:170px; margin:0 auto 20px; color:#009df8; background-color:#0b213d; text-align:center;
  border-radius:20px; font-size:16px; position:relative; transition:0.5s; }
.toggle:hover { color:#fff; }

.footer { display:none; padding:0 20px 20px; max-width:990px; font-size:12px; font-weight:400; line-height:19px; margin:0 auto; }
.footer p { font-weight:300; }

.payments-box{ padding: 0 10px; }

.payments { width: 100%; display: block; height: 35px; }

.spacer { height:20px }

/* Responsive */
@media screen and (max-width:700px){
  .table { max-width:440px; font-size:12px;  }
}
@media screen and (max-width:650px){
  .top { text-align: center;}
  .table { max-width:650px; }
  .logo { margin:0 auto; }
  .promo { background:none; padding:50px 0 60px 0; }
  .bonus-mbl { display:block; }
  .bonus { display:none !important }
  .content { padding:5px 10px 10px; }
}
@media screen and (max-width:560px){
  .content { padding:5px; }
  body, html { background-size: cover; }
  .login { width:100px; }
  .cta { transform:scale(0.7); transform-origin:center top; }
  .online { font-size:11px; }
  .table { font-size:11px; }
  .cel img { max-width:30px; }
  .toggle { padding:7px; width:150px; font-size:14px; background-color:#031028; }
    .promo { top:0px; }
  .promo .spacer { display:none; }
}
@media screen and (max-width:460px){
  .online { display:none !important; }
  nav { padding-top:10px; }
  section p { font-size:14px; }
  .cel img { display:block; margin:0 auto; }
}
@media screen and (max-width:375px){
  .logo { max-width:110px; }
  .login { width:80px; height:35px; padding:9px 7px 7px; }
}