* {-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:#fff; background: #ffffff;}

.parallax_bg {width: 100%; height: 100vh;  overflow: hidden; z-index: 1; position: fixed; top: 0; left: 0}
.parallax {
    position: absolute;
    width: 100%;
    height: 150%;
    left:0;
    background-repeat: no-repeat;
    background-position: top center;
	z-index: 3;
    background-image:url(../img/bg_img.png) ;
}

.wrapper {padding: 0; margin: 0 auto; width: 100%; max-width: 1200px;  position: relative; z-index: 10;}
.wrapper:after {content:''; display: block; clear: both;}



.left_part {width: 41%; float: left; position: relative; z-index: 10;}
.right_part {width:100%; position:fixed; right:30px; text-align:right}
.right_part img {width:auto; max-height:100%; position: relative; z-index: 10;}

header {width: 100%; padding: 30px 0; display: block; position: relative}
.seal {position: absolute; left: 70rem; z-index: 5; top: 25rem;}

IMG.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto }

h1 {font-weight: bold; color: #2354d2;text-align: center;}
h1 > span {font-size: 65px; display: inline-block; text-align: center; line-height: 75px;}
h1 > span:nth-child(even) {line-height: 160px; font-size:100px ;}

.get-bonus {display: block; text-align: center; margin-top: 50px;}
.get-bonus a {background: #1eb691; color: #fff; font-size: 2.25rem; font-weight: bold; text-decoration: none; display: block; padding: 1rem 0; border-radius: 5px; transition: all .5s ease-in-out}
.get-bonus a:hover {background: #15dcab; color: #fff; text-decoration: none}

.terms {display: block; width: 100%; text-align: center; font-size: .875rem; padding: 20px 0}
.terms a {display: block; color: #5b5b5b; text-decoration: underline;}

.payments {width: 100%; display: block; clear: both}
.payment {width: 133px; height: 64px; background: url(../img/logos.png); background-position: 0px 0px; background-repeat: no-repeat; position: relative; text-indent: -9999px; overflow: hidden; float: left}
.payment:hover { background-position: 0px -64px;}

.payment_1 { background-position: 0 0px;}
.payment_2 { background-position: -133px 0px;}
.payment_3 { background-position: -266px 0px;}
.payment_4 { background-position: -399px 0px;}
.payment_5 { background-position: -532px 0px;}
.payment_6 { background-position: -665px 0px;}
.payment_7 { background-position: -798px 0px;}
.payment_8 { background-position: -931px 0px;}
.payment_9 {background-position: -1064px 0px;}

.payment_1:hover { background-position: 0 -64px;}
.payment_2:hover { background-position: -133px -64px;}
.payment_3:hover { background-position: -266px -64px;}
.payment_4:hover { background-position: -399px -64px;}
.payment_5:hover { background-position: -532px -64px;}
.payment_6:hover { background-position: -665px -64px;}
.payment_7:hover { background-position: -798px -64px;}
.payment_8:hover { background-position: -931px -64px;}
.payment_9:hover {background-position: -1064px -64px;}

/* MOBILE STYLES */

@media only screen and (max-width: 1400px) {
.seal {position: absolute; left: 60rem; z-index: 5; top: 25rem;}
	}


@media only screen and (max-width: 1200px) {
	.wrapper {width: 96%;}
	html {font-size: 87.5% }
	.terms {font-size: 1rem;}
	.seal img {width: 180px;}

	
	.right_part {width:100%; position:fixed; right:130px; text-align:right}
	.right_part img {width:auto; max-height:100%; position: relative; z-index: 10;}

	.parallax_bg {width: 100%; height: 100vh;  overflow: hidden; z-index: 1; position: fixed; top: 0; left: 100px;}
}

@media only screen and (max-width: 1095px) {
	.seal {position: absolute; left: 50rem; z-index: 5; top: 25rem;}
	.right_part {width:100%; position:fixed; right:250px; text-align:right}
}

@media only screen and (max-width: 960px) {
	.left_part {width: 65%; float: left}

	.get-bonus, .terms {width: 100%;}
	.seal img {width: 150px;}

	.right_part img {max-height:900px;}
}



@media only screen and (max-width: 795px) {
	.seal {position: absolute; left: 30rem; z-index: 5; top: 25rem;}
	.right_part img {max-height:800px; right:100px;}

}

@media only screen and (max-width: 640px) {
	.left_part {width: 100%; float: right; text-align: center;}
	.right_part {width: 100%; float: left; position: relative}
	.parallax_bg {position: absolute; left: 270px;}
	.parallax { background-image: url(../img/bg_img_mobile.png); width: 100%;}
	.seal {top:6rem; left: 27rem;}
	.seal img {width: 150px;}
	.payments {text-align: center}
	.payment {float: none; display: inline-block}
	
	.right_part img {max-height:700px; right: 220px;}

	h1 > span {font-size: 50px; line-height: 55px;}
	h1 > span:nth-child(3) {font-size:100px; line-height: 30px;}

	}

@media only screen and (max-width: 580px) {
	.seal {top:6rem; left: 27rem;}
	.seal img {width: 100px;}
	.parallax_bg {position: absolute; left: 270px; width: 600px;}
}

@media only screen and (max-width: 414px) {
	.seal {top:7rem; left: 20rem;}
	.seal img {width: 100px;}

@media only screen and (max-width: 375px) {
	.seal {top:7rem; left: 20rem;}
	.seal img {width: 100px;}

@media only screen and (max-width: 360px) {
	.seal {top:8rem; left: 20rem;}
	.seal img {width: 100px;}