﻿* {-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;
}

html { font-size:100%;}
body { padding:0; margin:0;font-family: 'Roboto', sans-serif; font-size:1rem; font-weight:400; color:#ffffff; background: #48952b}

.stadium {width: 100%; height: 545px;  overflow: hidden; z-index: 1; position: absolute; background:url(../../n8gaming/image/img_1.jpg) no-repeat center top #001758; left:0; top:0;}
.team { position: absolute; width: 100%; height: 150%; left:0; background-repeat: no-repeat; background-position: top center; z-index: 3;}
.team-layer1 { background-image:url(../../n8gaming/image/img_3.png);}
.team-layer2 { background-image: url(../../n8gaming/image/img_2.png);}

/* HEADER */
header {padding: 0 0 5.875rem; margin: 0; width: 100%;  display: block; position:relative; z-index:4}
.header-wrapper {padding: 1.5rem 1.25rem; margin: 0 auto; width: 100%; max-width: 1366px;  position: relative; z-index:4;}
.header-wrapper:after {content:''; display: block; clear: both;}
a.logo { width: auto; float:left;}
a.logo img { max-width:100%;}
a.join { width:auto; float:right; font-size:1.125rem; font-weight:400; color:#ffffff; text-decoration:none; border:1px solid #ffffff; padding:.5rem 3.75rem; border-radius:5px; margin-top:1.875rem}
a.join:hover {background: #fff; color: #48952b;}

/* CONTENT */
.content {padding: 0; margin: 0; width: 100%; display: block; background:url(../../n8gaming/image/bg1.png) no-repeat center 5rem; position: relative; z-index:4;}
.content-wrapper {padding:0 1.25rem; margin: 0 auto; width: 100%; max-width: 1366px; position:relative;}
.content-wrapper:after {content:''; display: block; clear: both;}

h1 { padding:0; margin:-5rem 0 0 0; font-weight:700; font-size:11.875rem;}
h2 { padding:0; margin:-2rem 0 0; font-weight:700; font-size:4.5rem;}
.get-bonus { float: left; width: 100%; padding-top: 2.5rem;}
.get-bonus a {background: #ffffff; color: #48952b; text-decoration: none; font-weight: 700; font-size: 2.25rem; padding: 1.25rem 6.65rem; border-radius: 5px; display: inline-block;}
.get-bonus a:hover {background: #61c02d; color: #fff; text-decoration: none;}

.partner-logo { float: left; width: 100%; padding-top: 1.25rem;}
.partner-logo img {width: auto; max-width:100%;}

.seal { position:absolute; right:0; top:13rem}

.payments {text-align: center; float: left; width: 100%; padding-bottom: 1.25rem; padding-top:2.5rem;}

.payment { width:132px; height: 45px; background: url(../../n8gaming/image/logos.png); background-position: 0px 0px; background-repeat: no-repeat; position: relative; text-indent: -9999px; overflow: hidden; display: inline-block;}
.payment:hover { background-position: 0px -45px;}

.payment_1, .payment_10 { width:110px;}
.payment_2 { background-position: -132px 0px; }
.payment_3 { background-position: -264px 0px;}
.payment_4 { background-position: -396px 0px; }
.payment_5 { background-position: -528px 0px; }
.payment_6 { background-position: -660px 0px; }
.payment_7 { background-position: -792px 0px; }
.payment_8 { background-position: -924px 0px; }
.payment_9 {background-position: -1056px 0px; }
.payment_10 {background-position: -1188px 0px; }

.payment_2:hover { background-position: -132px -45px;}
.payment_3:hover { background-position: -264px -45px;}
.payment_4:hover { background-position: -396px -45px;}
.payment_5:hover { background-position: -528px -45px;}
.payment_6:hover { background-position: -660px -45px;}
.payment_7:hover { background-position: -792px -45px;}
.payment_8:hover { background-position: -924px -45px;}
.payment_9:hover {background-position: -1056px -45px;}
.payment_10:hover {background-position: -1188px -45px;}


@-webkit-keyframes hvr-pulse {
  25% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }
  75% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes hvr-pulse {
  25% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }
  75% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.hvr-pulse {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hvr-pulse:hover, .hvr-pulse:focus, .hvr-pulse:active {
  -webkit-animation-name: hvr-pulse;
  animation-name: hvr-pulse;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}


@media only screen and (max-width: 1152px) {
.team-layer1 { background-image:url(../../n8gaming/image/img_3_2.png);}
.content {background:url(../../n8gaming/image/bg1.png) no-repeat left top;}
h1 { padding:0; margin:1rem 0 0; font-weight:700; font-size:11.875rem;}
.seal { position:absolute; right:0; top:0}
}

@media only screen and (max-width: 768px) {
.stadium { background:url(../../n8gaming/image/img_1_2.jpg) no-repeat center top #00040e; background-size:100%}
.team-layer1 { background-image:url(../../n8gaming/image/img_3_3.png); background-size:100% auto;}
}

@media only screen and (max-width: 700px) {
header { padding-bottom:15rem}
h1 { padding:2rem 0 0; margin:0; font-weight:700; font-size:8.875rem;}
h2 { padding:0; margin:-2rem 0 0; font-weight:700; font-size:3.75rem;}
.get-bonus a {font-size: 2rem;}
.seal { position:absolute; right:1rem; top:0}
.seal img { width:150px;}
}


@media only screen and (max-width: 550px) {
a.logo { width: 55%; float:left;}
a.join { width:35%; margin-left:10%; font-size:1rem; text-align:center; margin-top:1.5rem; padding:.5rem 0}

header { padding-bottom:10rem}
h1 { padding:2rem 0 0; margin:0; font-weight:700; font-size:6rem;}
h2 { padding:0; margin:0; font-weight:700; font-size:2.5rem;}
.get-bonus a {font-size: 1.875rem; padding: 1.25rem 2.5rem;}
.seal img { width:100px;}
.stadium { height:400px;}
}

@media only screen and (max-width: 400px) {
a.join { margin-top:1rem;}
}

@media only screen and (max-width: 360px) {
header { padding-bottom:8rem}
}
