* {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
*:focus{ outline: none;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
img { border:none;}
strong, b { font-weight:700;}
em, i { font-weight:400; font-style:italic;}
textarea,
input[type="text"],
input[type="button"],
input[type="submit"],
button {
     -webkit-appearance: none;
     border-radius: 0;
}

h1 { padding:0; margin:0; font-weight:700; font-size:9.375rem;}
h2 { padding:0; margin:0; font-weight:700; font-size:3.75rem; text-transform:uppercase;}
h3 { padding:0; margin:0; font-weight:400; font-size:4.375rem;}
h4 { padding:0; margin:0; font-weight:400; font-size:1.625rem;}

html { font-size:100%;}
body { padding:0; margin:0;font-family: 'Ubuntu', sans-serif; font-size:1rem; font-weight:400; color:#ffffff; background: #12428d}

/* HEADER */
header {padding: 0; margin: 0; width: 100%; display: block; background:#ffffff;}
header .wrapper { width:100%; max-width:1366px; margin:0 auto; padding:.857rem 1.25rem; position:relative; display:flex; flex-wrap:wrap;}
header .wrapper:after { content:''; display:block; clear:both; margin:0}
.logo { align-self:flex-start; width:60%; padding-right:1.25rem;}
.logo img { max-width:100%;}
.partner-logo { align-self:flex-end; width:40%; text-align:right;}
.partner-logo img { max-width:100%;}


/* CONTENT */
.container {padding: 0; margin: 0; width: 100%; display: block; clear: both;}
.container .wrapper { width:100%; max-width:1426px; margin:0 auto; padding:0; position:relative;}
.container .wrapper:after { content:''; display:block; clear:both; margin:0}
.main { width:100%; position: relative;}

.image { width:60%; position:absolute; left:0; top:-90px;}

#tornado {
  position: relative;
  width: 100%;
  height:auto;
  padding-top:100%;
  background-image: url(../images/bg3.png), url(../images/bg2.png), url(../images/bg1.png);
  background-repeat: no-repeat;
  background-position: center;
  background-position: 50% 50%;
  background-size:100% auto;
}



.content { width:45%; float:right; text-align:center; padding-right:2rem; padding-top:2.5rem; padding-bottom:2.5rem; position:relative;}
.seal { position:absolute; left:-5rem; top:-2.5rem; z-index:5}
.bonuses { width:100%; display:flex; flex-wrap:wrap; justify-content:space-between; font-size:1.625rem; text-align:center; padding-top:3rem; position:relative}
.bonuses:before { content:''; display:block; position:absolute; width:35%; height:2px; background:#ffffff; left:50%; top:5.5rem; transform:translateX(-50%)}
.bonus { width:45%}
.bonus span {font-weight:700; font-size:3.75rem; background:#0078ff; display:inline-block; width:5rem; height:5rem; border-radius:50%; margin-bottom:1rem}

a.button {
  display:inline-block;
  width: auto;
  margin:55px 0 40px;
  background:#d30303;
  border-radius:3rem;
  font-weight:700;
  color:#ffffff;
  text-decoration:none;
  font-size:2.25rem;
  padding:1.5rem 5rem;
  -webkit-box-shadow: 0 5px 0 0 #960000;
  box-shadow: 0 5px 0 0 #960000;
  transition:all .4s ease-in-out
}

a.button:hover {
  background:#f71212;
  color:#ffffff;
}

a.terms {color:#ffffff; text-decoration: underline; font-size:.875rem; display:block; clear:both;}

@media only screen and (max-width: 1152px) {
.image { width:100%; position: relative; left:0; top:0;}
.content { width:100%; float:left; padding-right:0; padding-top:0}
#tornado { padding-top:70%}
.seal { position:absolute; left: auto; right:15%; top:-25%; z-index:5}
}

@media only screen and (max-width: 700px) {
#tornado { background-size:140% auto; padding-top:100%}
h1 {font-size:6.875rem;}
h2 {font-size:2.875rem;}
.bonuses { font-size:1rem;}
.bonus span {font-size:2.25rem; background:#0078ff; display:inline-block; width:3.5rem; height:3.5rem; border-radius:50%; margin-bottom:1rem; line-height:3.5rem}
.bonuses:before { top:4.5rem;}
a.button {font-size:2rem; padding:1rem 3.5rem; }
.content { position:relative; z-index:3; margin-top:-5rem;}
.seal { position:absolute; left: auto; right:.75rem; top:-25%; z-index:5}
.seal img { width:7rem;}
}

.payments {display:flex; flex-wrap:wrap; justify-content:space-between; position:relative; z-index:3; text-align:center; width:100%; clear:both; padding-top:2.5rem}
.payment { background: url(../images/logos.png); background-position: 0px 0px; background-repeat: no-repeat; position: relative; text-indent: -9999px; overflow: hidden; display: inline-block; margin:0 35px;}
.payment:hover { background-position: 0px -45px;}

.payment_1 { width:56px; height:45px; }
.payment_2 { width:65px; height:45px; background-position: -136px 0px;}
.payment_3 { width:61px; height:45px; background-position: -279px 0px;}
.payment_4 { width:97px; height:45px; background-position: -420px 0px;}
.payment_5 { width:90px; height:45px; background-position: -595px 0px;}
.payment_6 { width:80px; height:45px; background-position: -763px 0px;}
.payment_7 { width:115px; height:45px; background-position: -922px 0px;}
.payment_8 { width:85px; height:45px; background-position: -1111px 0px;}
.payment_9 { width:38px; height:45px; background-position: -1261px 0px;}

.payment_1:hover {background-position:0 -45px;}
.payment_2:hover { background-position: -136px -45px;}
.payment_3:hover { background-position: -279px -45px;}
.payment_4:hover { background-position: -420px -45px;}
.payment_5:hover { background-position: -595px -45px;}
.payment_6:hover { background-position: -763px -45px;}
.payment_7:hover { background-position: -922px -45px;}
.payment_8:hover { background-position: -1111px -45px;}
.payment_9:hover {background-position: -1261px -45px;}

@media only screen and (max-width: 1280px) {
.payments {display:flex; flex-wrap:wrap; justify-content: center; position:relative; z-index:3; padding:0 35px; text-align:center}
}

@media only screen and (max-width: 1050px) {
.payments { width:100%; max-width:610px; margin:0 auto 30px; padding:0}
.payment { margin:10px 15px;}
}