html {font-size: 1vw;}
body {background: #4C4B51; font-family: 'Outfit', sans-serif;}

.container {max-width:100%; margin: auto;}		

.logo {
	margin: 2.5em auto 2.5em auto;
   	width: 350px;
    padding-bottom: 0%;
    background-repeat: no-repeat;
    background-position: center;
    
}

.upDownMove {
    -webkit-animation: mover 0.5s infinite  alternate;
    animation: mover 0.5s infinite  alternate;
}


.info-text {
	color: #FFFFFF;
    font-style: normal;
    font-weight: 700;
}

.row1 {
	font-size: 170px;

}
.row2 {
	font-size: 70px;
	line-height: 0em;
}
.row3 {
	font-size: 70px;
}
.row1::after{
    content: "\a";
    white-space: pre;
}
.row2::after{
    content: "\a";
    white-space: pre;
}
.row3::after{
    content: "\a";
    white-space: pre;
}	
.info-text button { 
    
    
    font-size: 1.875em;
    font-weight: 700;
    color: #FFFFFF;
    width: 90%;
    padding: 0.5em;
    border-radius: 10px;
    border: 0;
    background: #0DC154;
    margin-top: 2em;
    margin-bottom: 1em;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;

}
.info-text button:hover {
	color: #FFFFFF;
	background: #6FDF9B;


}
.info-text a {
	z-index: 50;
    position: relative;
	color: #fff;
    font-size: 1em;
    display: block;
    text-decoration: underline;
    font-weight:normal;
}

.partner_logo {
	width: 100%;
    height: -2em;
    margin-top: 2em;
    background-position: top center;
    background-image: url(../img/partner_logo.png);
    background-repeat: no-repeat;
    margin-bottom: -8em;
}

.images .image {
	background-image: url('../img/img.svg');
	display: inline-block;
	background-position: left center top;
    background-repeat: no-repeat;
  	width: 100%;
  	height: 100%; 
}

 .main-image {
 	position: relative;
    width: 100%;
   /* max-height: 100vw;*/
   	padding-bottom: 100%;
    height: 100%;
    top: 1em;
}

 .main-image .green-line {
  	background-image: url(../img/green-line.svg);
    background-repeat: no-repeat;
    background-position: top right;
    background-size: contain;
    height: inherit;
    position: absolute;
    width: inherit;

    /*animation*/
    animation: slideInTop 0.5s ease 0s forwards; 
}

 .main-image .white-line {
    background-image: url(../img/white-line.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: -10% -20%;
    height: inherit;
    position: absolute;
    width: inherit;
     /*animation*/
    animation: slideInBottom 0.5s ease 0s forwards; 
}

 .main-image .img3 {
    
    background-image: url(../img/img-3.png);
    background-repeat: no-repeat;
    height: inherit;
    width: inherit;
    position: absolute;
    z-index: 3;
    /*animation*/
    background-position: center;
    background-size: 0;
    top: -3.5em;
    animation: slideFromCenter 0.5s ease 0.7s forwards, mover 3.5s infinite  alternate;
 }

 .main-image .img2 {
 
    background-image: url(../img/img-2.svg);
    background-repeat: no-repeat;
    height: inherit;
    width: inherit;
    position: absolute;
    z-index: 2;

    /*animation*/
    background-position: center;
    background-size: 0;
    top: -3.5em;
    animation: slideFromCenter 0.5s ease 1s forwards, mover 5.5s infinite  alternate;
 }

 .main-image .img1 {
    background-image: url(../img/img-1.png);
    background-repeat: no-repeat;
    height: inherit;
    width: inherit;
    position: absolute;
    z-index: 1;

    /*animation*/
    background-position: center;
    background-size: 0;
    top: -5.5em;
    animation: slideFromCenter 0.5s ease 1.3s forwards;
 }

.seal {
	position: absolute;
    z-index: 3;
    top: 50%;
    width: 257px;
    padding-bottom: 38%;
    background-position: bottom right;
   /* background-size: 0;*/
   	transform: scale(0);
    background-repeat: no-repeat;
    
    animation: animatezoom 0.5s ease 1.8s forwards;
}

.logos .box{
	display: inline-block;
    width: calc(100vw/10);
    position: relative;
    height: 4vw;
}

.logos .image {
	/*width: 8em;
    height: 4.3125em;*/
    width: inherit;
    height: inherit;
    background-position: center;
    background-repeat: no-repeat;
	display: inherit;
	margin: 1em 0 0 0;	
}
.logos div:nth-child(1) > div {
	background-image: url('../img/neteller.svg');
}

.logos div:nth-child(2) > div {
	background-image: url('../img/visa.svg');
}

.logos div:nth-child(3) > div{
	background-image: url('../img/skrill.svg');
}
.logos div:nth-child(4) > div {
	background-image: url('../img/mastercart.svg');
}

.logos div:nth-child(5) > div {
	background-image: url('../img/noda.svg');
}
.logos div:nth-child(6) > div {
	background-image: url('../img/18.svg');
}
.logos div:nth-child(7) > div {
	background-image: url('../img/netent.svg');
}
.logos div:nth-child(8) > div {
	background-image: url('../img/evolution.svg');
}
.logos div:nth-child(9) > div {
	background-image: url('../img/mifinity.svg');
}


.logos {max-width: 100%; width: max-content; margin: auto;}



@media only screen and (min-width: 1400px) {
	.container {max-width: 1440px}
	.logos .box {
		width: calc(100vw/13);
	}
}

@media only screen and (max-width: 1307px) {
	/*.logo {width: 25em; height: 5em; background-size: contain;}
	.info-text {font-size: 6em;}*/
	.images .image {
	    background-image: url(../img/img.svg);
	    display: inline-block;
	    background-position: center top;
	    background-repeat: no-repeat;
	    background-size: contain;
	    width: 100%;
	    height: 100%;
	}
	.partner_logo {height: 9em;}
	.logos {
		width: 100% !important;
		margin: 5em 0 0 0 !important;
	}
	/*.partner_logo, .promo {display: none !important;}
	.logos div { width: 10em !important; }*/
}

@media only screen and (max-width: 1024px) {
	.partner_logo {height: 11em;}
	.seal {width: 227px;}
}


@-webkit-keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-20px); }
}

@media only screen and (max-width: 992px) {

	
	.row1 {
		font-size: 15em;
	}
	.row2, .row3 {
		font-size: 6em;
	}
	.info-text button {
    font-size: 2.875em;
	}
	.info-text a {
    font-size: 1.5em;
	}
}

	@media only screen and (max-width: 768px) {

		.col-12 {
    		-ms-flex: 0 0 100%;
    		flex: 0 0 95%;
		}

		.info-text button {
    	font-size: 2em;
		}

		.info-text button {
    	margin-top: 1em;
    	}

		.partner_logo {
			margin-bottom: 1em;
			height: 24em;
    		background-size: contain;
		}

		.info-text a {
    	font-size: 1.8em;
    	}

    	.partner_logo {
    	width: 65%;
    	}

    	.logos .box {
        width: calc(102vw/7);
        height: 7vw;
    	}

	}

	@media only screen and (max-width: 580px) {
		
		.logos .box { width: calc(100vw/5);	}
		.row2, .row3 {line-height: 1.2em;}
		.info-text a {font-size: 2.5em;}
		.info-text button {font-size: 2em;}
		.logo {margin: 5.5em auto 2.5em auto;}
	}

	@media only screen and (max-width: 430px) {
		.logo {
		    width: 80%;
		    height: 17em;
		}
		.row1 {
    		font-size: 25em;
    		line-height: 1.3;
		}
		.row2, .row3  {
    		font-size: 11em;
    		line-height: 1.1;
		}
		
		.row2::after{
		    content: "\a";
		    white-space: pre;
		}
		.info-text button{
			font-size: 2em;
		    width: 100%;
		    margin-top: 1em;
		}
		.main-image .white-line {
    		background-position: -10% -5%;
 		}
		.images {
			height: 100vw;
		}
		.logos {
			width: 100% !important;
			margin: auto !important;
		}
		.logos .box { width: calc(100vw/5); height:10vw;}
		.logos .image { background-size: 50%}

		.info-text a {font-size: 3.5em;}

		.seal {width: 170px;}

		.partner_logo {
    	width: 100%;
    	height: 0;}

    	.col-12 {-ms-flex: 0 0 100%;
    	flex: 0 0 100%;
    	max-width: 100%;}
}



@keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-20px); }
}

@keyframes slideInTop {
  0% {
    top: -100em; /* Initial position */
    background-size: 0;
  }
  100% {
    top: 0; /* Final position */
    background-size: contain;
  }
}
@keyframes slideInBottom {
  0% {
    bottom: -100em; /* Initial position */
    background-size: 0;
  }
  100% {
    bottom: 0; /* Final position */
    background-size: contain;
  }
}
@keyframes slideFromCenter {
  0% {
    background-size: 0; /* Initial position */
  }
  100% {
    background-size: 100%; /* Final position */
  }
}

@keyframes slideFromCenterPromo {
  0% {
    background-size: 0; /* Initial position */
    background-position: center center;
  }
  100% {
    background-size: contain; /* Final position */
  	background-position: right bottom;
  }
}

@keyframes animatezoom {
	from{transform:scale(0)}
	 to{transform:scale(1)}
}