@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-2.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 { paxdding-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; }

.michael-o { max-width:835px; position:relative; left:-50px; }
.promo { position:absolute; right:20px; top:300px; text-align:center; }
.promo img { max-width:792px; width:100%; }
.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:1380px){
  .michael-o { left:-200px; }
}
@media screen and (max-width:1240px){
  .michael-o { max-width:680px;   }
}
@media screen and (max-width:1140px){
  .michael-o { opacity:0.8; }
}
@media screen and (max-width:1050px){
  .michael-o { opacity:1; max-width:375px; left:0; right:0; margin:0 auto; margin-left:50%; transform: translateX(-50%);  }
  .promo { position:relative; right:0; left:0; margin:0 auto; top:0; }
  .promo img { right:0; left:0; margin:0 auto; }
}
@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; }
  .bonus-mbl { display:block; }
  .michael-o, .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; }
  .michael-o { max-width:300px; }
  .online { font-size:11px; }
  .table { font-size:11px; }
  .cel img { max-width:30px; }
  .toggle { padding:7px; width:150px; font-size:14px; background-color:#031028; }
    .long-wrap { padding-top:20px; }
}
@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; }
}