html {font-size: 1vw;}

body {
  font-family: 'Roboto', sans-serif;
}

.container {max-width: 100%;}		
.logo {
	margin: 3rem auto auto;
    max-width: 100%;
    width: 26rem;
    height: 5.05rem;
    background-size: cover;
    background-position: center;
	background-image: url('../img/logo.svg');
}
.promo {
	position: absolute; 
	right: 0; 
	top: 10rem;
	width: 12.5rem;
	height: 12.5rem;
	background-position: center;
    background-size: cover;
	background-image: url('../img/seal.png');
}

.terms{
	color: #575757;
	font-family: Roboto;
	font-size: 0.9rem;
	font-weight: lighter;
}


.info-text {
		margin-top: 3rem;
		color: #575757;
		font-family: Roboto;
		font-size: 3.5rem;
		font-style: normal;
		font-weight: 700;
		line-height: normal;
}

.row1 {font-size: 8rem;}
.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: 2.3rem; 
	font-weight: 700;
	color: #575757;

	width: 25rem;
	height: 6rem;
	border-radius: 6rem;
	border: 0;
	background:#FDCE38; 
	margin-top: 3.125rem;
	margin-bottom: 2.81rem;


	-webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;

}
.info-text button:hover {
	transform: scale(0.7);
	color: #858585;
	background: #FFF490;
	outline: none;
}


.partner_logo {
	width: 30.75rem;
	height: 4rem;
	margin-bottom: 0rem;
	background-position: center;
    background-size: cover;
	background-image: url('../img/partner_logo.png');
}
.logos {
	height: 7rem;
}
.logos div {
	width: 5rem;
    height: 4.3125rem;
    background-position: center;
    /*background-size: contain;*/
    display: inline-block;
    background-repeat: no-repeat;
	
}

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

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

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

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

.logos div:nth-child(5) {
	background-image: url('../img/sofort.svg');
}

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

.logos {max-width: 100%; width: max-content; margin: auto;}
.zoomefect { width: 100%; height: 56vw;}
.zoomefect .sport {padding: 0; overflow: hidden; position: relative;}
.zoomefect .sport:hover .background  { transform: scale(1.1);}
.zoomefect .sport:hover .icon  { transform: scale(1.3);}

.images, .zoomefect {margin: 0;padding: 0;}
.images .logos {display: none;} 


.sport {background: linear-gradient(38deg, #FFB800 0%, #FDCE38 33.33%, #FEDF7C 66.67%, #FFF0BE 100%);}

.sport .background { 
	display: inline-block;
	background-position: bottom right;
    background-size: contain;
    background-repeat: no-repeat;
  	width: 100%;
  	height: 100%; 
  	-webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
 } 
 .sport .icon {
    position: absolute;
    bottom: 5.4rem;
    width: 3.7rem;
    height: 3.7rem;
    left: 1.6rem;
    background-repeat: no-repeat;
    background-size: contain;
    -webkit-transition: all .7s;
    -moz-transition: all .7s;
    -o-transition: all .7s;
    transition: all .7s;
}
.sport  span {
	color: #FFF;
	font-family: Roboto;
	font-size: 2.5rem;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	position: absolute;
	left: 1.6rem;
    bottom: 1.25rem;
}
.football .background {
	background-image: url('../img/football_r_1.png');
}
.football .icon {
	background-image: url('../img/icon_football.svg');
}

.tennis .background{
  	background-image: url('../img/tennis_r_1.png');
}
.tennis .icon {
	background-image: url('../img/icon_tennis.svg');
}
.basketball .background {
  	background-image: url('../img/basketball_r_1.png');
}
.basketball .icon {
	background-image: url('../img/icon_basketball.svg');
}

.volleyball .background{
  	background-image: url('../img/volleyball_r_1.png');
}
.volleyball .icon {
	background-image: url('../img/icon_volleyball.svg');
}

@media only screen and (min-width: 1400px) {
	.container {max-width: 1920px}
}

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

	.partner_logo, .promo {display: none !important;}
	.logos div { width: 10rem !important; }
}

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

.terms{
	font-size: 1.5rem;
	padding-bottom: 2rem;}
}


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

	.terms{
	font-size: 2rem;
	padding-bottom: 2rem;}

	.logo {
		width: 52rem;
    	height: 10.15rem;
	}
	.row1 {
		font-size: 12rem;
	}
	.info-text {font-size: 5rem;}
	.info-text button{font-size: 4rem;
    width: 50rem;
    height: 10rem;}

	.info .logos {display: none;}
	.images .logos {
			display: block;
	}
	.images .logos {
		
		margin-top: 13rem;
	}
	.logos div {
		width: 18rem !important;
		height: 10rem;
		margin: 2.5rem;
	}
	.logos-mobile {
	    position: absolute;
	    margin-top: 3rem;
	}

	.logos-mobile img {
		width: 20%;
		border: 1px solid transparent;
		padding: 0 1rem;
	}
	.carousel-indicators {
		bottom: 10rem;
	}
	.carousel-indicators .active {
		background-color: #FDCE38;
	}
	.carousel-indicators li {
	    width: 20px;
	    height: 20px;
	    border-radius: 20px;
	    border: 1px;
	    background-color: #8C8C8C;
	}
	.carousel-item {
		height: 100vw;
		padding: 0;
	}

	.sport .icon {
	    bottom: 9rem;
	    width: 5rem;
	    height: 5rem;
	

    	background-repeat: no-repeat;
	}

	.sport span {
	    color: #FFF;
	    font-family: Roboto;
	    font-size: 4rem;
	    font-style: normal;
	    font-weight: 700;
	    line-height: normal;
	    position: absolute;
	    left: 2rem;
	    bottom: 2rem;
	}
}



@media only screen and (max-width: 760px){
	.sport span {
    font-size: 6rem;
    left: 3rem;
    bottom: 3rem;}

    .sport .icon {
    bottom: 11rem;
    width: 9rem;
    height: 9rem;
    left: 3rem;}

    .logos div {
    margin: -1.5rem;}
}

@media only screen and (max-width: 660px){
	.terms {
    font-size: 2.5rem;
    padding-bottom: 3rem;}
}

@media only screen and (max-width: 580px){
.logos div {
    margin: 0.5rem;}
}

@media only screen and (max-width: 430px){
	.logo {
    width: 53rem;
    height: 10.25rem;}

    .info-text {
    font-size: 8rem;}

    .info-text button {
    font-size: 6rem;
    width: 65rem;
    height: 13rem;}

    .terms {
    font-size: 3rem;
    padding-bottom: 3rem;}

    .sport span {
    font-size: 7rem;
    left: 4rem;
    bottom: 4rem;}

    .sport .icon {
    bottom: 14rem;
    width: 12rem;
    height: 12rem;
    left: 4rem;}

    .logos div {
    margin: 1.5rem;
	width: 20rem !important;}

}

@media only screen and (max-width: 390px){
.logos div {
    width: 22rem !important;}
}

@media only screen and (max-width: 360px){
.logos div {
    width: 26rem !important;
    margin: 2.5rem;}
}