@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;900&display=swap);
@font-face {
  font-family: Tondu;
  src: url(font/Tondu_Beta.woff);
}

.background-video{
	z-index: -1;
}
.background-video{
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	display: block;
	margin: 0 auto;
	object-fit: cover;
}
@media (orientation:portrait){
  .step__body{
    background-color: inherit!important;
    border: none!important;
    background-image: linear-gradient(rgba(5,9,32,.0), rgba(5,9,32,.9))!important;
    width: 100%!important;
  }

  iframe {
    border: none !important;
    display: inline-block;
    height: 400px;
    margin-top: 0px;
    width: 100%;
    padding: 0 20px;
}

  #mobile-logo{
    display: block!important;
    position: absolute;
    width: 100%;
    background-image: linear-gradient(rgba(5,9,32,.9), rgba(5,9,32,.0))!important;
  }
  #mobile-logo img{
    width: 60%;
    margin: 5% auto 0 auto;
  }


  #logo_wrp{
    display: none!important;
  }

  .de h1{
    font-size: 3rem!important;
  }

  h1{
    font-size: 4rem!important;
  }

  .fr .game-type .btn, .fr .play-now .btn{
    font-size: 2.2rem!important;
  }



  .de .disclaimer h1, .de .one .btn, .de .game-type .btn, .es .pussy .btn, .es .game-type .btn{
    font-size: 2.5rem!important;
  }

  .main-logo img {
    width: 100%!important;
  }
	#background-video-landscape{
		display: none;
	}
	#background-video-portrait{
		display: block;
		position: absolute;
		width: 100vw;
		height: 100vh;
		margin-top: -0vw;
	}
  .step__body{
    border-radius: 0px!important;
  }
}
@media (orientation:landscape){
	#background-video-portrait{
		display: none;
	}
	#background-video-landscape{
		display: block;
		position: absolute;
		width: 100vw;
		height: 100vh;
		margin-top: 0vw;
	}
}
body{
overflow-x:hidden;
font-family: 'Montserrat', sans-serif;
font-size:16px;
line-height:1.4;
color:#333;
text-transform: uppercase;
}

h1,h2,h3,h4,h5,h6{
text-transform:uppercase}

h1{
font-size:5rem;
line-height:1;
margin-bottom: 5px;
color: #f4951d;
font-family: 'Tondu';
font-weight: inherit;
}
h2{
font-size:2rem;
text-shadow: -2px -2px 5px #3aefff, 2px 4px 5px #000;
  margin-bottom: 5px;
}
h3{
font-size:2.2rem;
margin-bottom: 5px;
}
h4{
font-size:1.8rem;
margin-bottom: 5px;
}
h5,h6{
font-size:1.6rem;
text-shadow: -2px -2px 5px #3aefff, 2px 4px 5px #000;
margin-bottom: 5px;
}
.num {
font-size: 2.5rem;
line-height: 1;
margin-bottom: 5px;
}
p{
font-size:1.8rem;
text-align:center;
margin-bottom:5px;
font-weight: 400;
line-height: 1.2;
}
*{
margin:0;
box-sizing:border-box}
html{
font-size:62.5%}
body,html{
width:100%;
height:100%}
body{
background:#fff;
z-index:0}
ul{
list-style-type:none;
margin:0;
padding:0}
.clearfix:after{
content:"";
display:block;
clear:both}
.btn,.transition{
transition:all .25s ease}
img{
display:block;
max-width:100%;
height:auto}
.main{
	height:100%;
	z-index:1;
	display: flex;
	justify-content: center;
	align-items: center;
}
@media screen and (orientation:portrait){
	.main{
		align-items: flex-end;
	}
}
.crumbs{
display: flex;
align-items: center;
position:fixed;
z-index:3;
top:72px;
}
@media screen and (max-width:310px){
	.crumbs{
		width: 100%;
	}
}
.crumbs li{
display:inline-block;
width: 20px;
height: 10px;
margin: .2rem;
transition:all .25s ease;
border-radius: 5px;
background:#fff;
}
.crumbs li.active{
width: 20px;
height: 10px;
background:#d14262;
}
@keyframes a{
0%{
  opacity:0;
  transform:translate3d(0,10rem,0);
}
to{
  opacity:1;
  transform:translateZ(0);
 }
}
.fadeInUp{
animation:a .4s}
.btnbox{
display:-ms-flexbox;
display:flex;
-ms-flex-pack:distribute;
justify-content:space-around;
-ms-flex-align:center;
align-items:center}
.btn{
  width: 86%;
  height: 6rem;
  line-height: 6rem;
  padding: 0 2rem;
  position: relative;
  display: inline-block;
  color: #000;
  font-size: 3rem;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
  /* border-radius: 0.8rem; */
  cursor: pointer;
  margin-bottom: 1rem;
  position: relative;
  display: block;
  outline: 0;
  transition: opacity 300ms;
  margin: 1rem auto;
  font-family: 'Tondu';
  font-weight: inherit!important;
  border-radius: 10px;
}
.btn::before {
content: '';
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAGCAYAAAAL+1RLAAAAF0lEQVQIW2NkwAIYgWKS6OIgQQxAoUoAE4AAUnD/0ugAAAAASUVORK5CYII=) repeat;
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.btn::after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
box-shadow: rgba(212,207,201,0.75) 0 0 15px 2px;
background: #d4cfc9;
height: 1px;
opacity: 0;
}
.btn:hover {
background: #f47b20;
cursor: pointer;
-webkit-animation: glitch 750ms infinite;
animation: glitch 750ms infinite;
-webkit-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
.btn:hover::before {
opacity: 1;
}
.btn:hover::after {
-webkit-animation: scan 2s infinite;
animation: scan 2s infinite;
opacity: 1;
}
@-webkit-keyframes glitch {
0% {
  -webkit-transform: skewX(0deg);
  transform: skewX(0deg);
}
5% {
  -webkit-transform: skewX(2deg);
  transform: skewX(2deg);
  opacity: 0.75;
}
10% {
  -webkit-transform: skewX(0deg);
  transform: skewX(0deg);
  opacity: 1;
}
15% {
  -webkit-transform: skewX(-5deg);
  transform: skewX(-5deg);
  opacity: 0.75;
}
20% {
  -webkit-transform: skewX(0deg);
  transform: skewX(0deg);
  opacity: 1;
}
45% {
  -webkit-transform: skewX(3deg);
  transform: skewX(3deg);
  opacity: 0.75;
}
50% {
  -webkit-transform: skewX(0deg);
  transform: skewX(0deg);
  opacity: 1;
}
55% {
  -webkit-transform: skewX(0deg);
  transform: skewX(0deg);
  opacity: 0.75;
}
60% {
  -webkit-transform: skewX(0deg);
  transform: skewX(0deg);
  opacity: 1;
}
75% {
  -webkit-transform: skewX(2deg);
  transform: skewX(2deg);
}
80% {
  -webkit-transform: skewX(0deg);
  transform: skewX(0deg);
}
85% {
  -webkit-transform: skewX(-8deg);
  transform: skewX(-8deg);
  opacity: 0.75;
}
90% {
  -webkit-transform: skewX(0deg);
  transform: skewX(0deg);
  opacity: 1;
}
100% {
  -webkit-transform: skewX(0deg);
  transform: skewX(0deg);
}
}
@keyframes glitch {
0% {
  -webkit-transform: skewX(0deg);
  transform: skewX(0deg);
}
5% {
  -webkit-transform: skewX(2deg);
  transform: skewX(2deg);
  opacity: 0.75;
}
10% {
  -webkit-transform: skewX(0deg);
  transform: skewX(0deg);
  opacity: 1;
}
15% {
  -webkit-transform: skewX(-5deg);
  transform: skewX(-5deg);
  opacity: 0.75;
}
20% {
  -webkit-transform: skewX(0deg);
  transform: skewX(0deg);
  opacity: 1;
}
45% {
  -webkit-transform: skewX(3deg);
  transform: skewX(3deg);
  opacity: 0.75;
}
50% {
  -webkit-transform: skewX(0deg);
  transform: skewX(0deg);
  opacity: 1;
}
55% {
  -webkit-transform: skewX(0deg);
  transform: skewX(0deg);
  opacity: 0.75;
}
60% {
  -webkit-transform: skewX(0deg);
  transform: skewX(0deg);
  opacity: 1;
}
75% {
  -webkit-transform: skewX(2deg);
  transform: skewX(2deg);
}
80% {
  -webkit-transform: skewX(0deg);
  transform: skewX(0deg);
}
85% {
  -webkit-transform: skewX(-8deg);
  transform: skewX(-8deg);
  opacity: 0.75;
}
90% {
  -webkit-transform: skewX(0deg);
  transform: skewX(0deg);
  opacity: 1;
}
100% {
  -webkit-transform: skewX(0deg);
  transform: skewX(0deg);
}
}
@-webkit-keyframes scan {
0% {
  top: 0%;
}
50% {
  top: 95%;
}
100% {
  top: 100%;
}
}
@keyframes scan {
0% {
  top: 0%;
}
50% {
  top: 95%;
}
100% {
  top: 100%;
}
}
.btn--primary{
background-image: linear-gradient(#ffffff, #dad9d7);
color:#242424;
}
.btn--primary:hover{
  color:#FFF;
  background-color: #242424;
}
.btn--accent{
color:#242424;
background-image: linear-gradient(#ded904, #3aa343);
}
.btn--accent:hover{
  color:#FFF;
  background-color: #242424;
}
.stepbox{
position:fixed;
z-index:2}
.step,.stepbox{
	width: 100%;
	max-width: 50rem;
}

.step{
position:relative;
display:none;
color:#333;
background-size:cover;
background-repeat:no-repeat;
background-position:50%;
}
.step:first-child{
display:block}
.step__inner{
width:100%;
height:100%;
display:-ms-flexbox;
display:flex;
-ms-flex-pack:center;
justify-content:center;
}
.step__inner2{
width:100%;
height:100%;
display:-ms-flexbox;
display:flex;
-ms-flex-pack:center;
justify-content:center;
}
.step__header,.step__inner,.step__inner2{
position:relative}
.step__header svg{
fill:hsla(0,0%,100%,.75);
position:absolute;
width:100%;
left:0;
top:-5rem;
height:5rem}

.step__body{
  position: relative;
  padding: 7.5rem 4.5rem 3rem 4.5rem;
  background: rgba(0,0,0,.3);
  border-radius: 8px;
  color: #fff;
  text-align: center;
  border: 6px solid rgba(67,165,67,.7);
}
.step__body p{
margin-bottom:2rem;
margin-top: 25px;
}
.step__footer{
position:relative;
margin-bottom:5rem}
.step__footer svg{
fill:hsla(0,0%,100%,.75);
position:absolute;
width:100%;
left:0;
bottom:-5rem;
height:5rem}
.bg{
position:fixed!important}
.bg,.bg:after{
width:100%;
height:100%;
left:0;
top:0;
right:0;
bottom:0;
z-index:0}
.bg:after{
content:"";
display:block;
position:fixed;
background:linear-gradient(rgba(0,0,0,.4) 5%,transparent)}
.bg__item{
display:none;
background-size:cover;
background-repeat:no-repeat;
background-position:50%;
position:absolute;
width:100%;
height:100%;
left:0;
top:0;
right:0;
bottom:0}
.bg__item.active{
display:block}
@media (min-width:320px) and (max-width:374px){
.step__inner,.step__inner2{
  -ms-flex-pack:end;}
.step__header .avatar,.step__header svg{
  display:none}
.step__footer{
  margin-bottom:0}
.step__footer svg{
  display:none}
}
@media (min-width:375px) and (max-width:767px){
html{
  font-size:62.5%}
.step__inner,.step__inner2{
  }
}
@media (min-width:768px){
html{
  font-size:80%}
}
@media (min-width:992px){
.step__inner,.step__inner2{
  }
}
@media screen and (max-height:715px) and (max-width:992px) and (orientation:landscape){
    .stepbox{
        position: absolute;
        top: 30px!important;
    }
    .step__inner2{
        position: absolute;
        top: 0px;
    }
    .step__body{
        position: absolute;
        width:100%;
        top: 0px;
    }
    .crumbs, .logo{
        display:none;
    }
    
}
@media screen and (max-height:715px) and (orientation:landscape){
    .stepbox{
        position: absolute;
        top: 130px;
    }
    .step__inner2{
        position: absolute;
        top: 0px;
    }
    .step__body{
        position: absolute;
        width:100%;
        top: 0px;
    }
    .crumbs{
        position: absolute;
    }
}
@media screen and (max-height:530px) and (orientation:portrait){
    .stepbox{
        position: absolute;
        top: 30px;
    }
    .step__inner2{
        position: absolute;
        top: 0px;
    }
    .step__body{
        position: absolute;
        width:100%;
        top: 0px;
    }
    .crumbs{
        position: absolute;
    }
}


iframe {
	border: none !important;
	display: inline-block;
	height: 400px;
	margin-top: 0px;
	width: 100%;
}
@media screen and (orientation:landscape){
	iframe {
		max-width: 35rem;
	}	
}
.iframe-height{
height: 100%!important;
}
body{
background-color: #000000;
display: flex;
justify-content: center;
}
h6.no-shadow{
	text-shadow: none;
    margin-top: 8px;
    margin-bottom: 20px;
}
.iframe-padding{
    position: relative;
    padding: 1rem;
    background: initial;
    border-radius: initial;
    color: initial;
    text-align: center;
    border: initial;
    box-shadow: initial;
}
.iframe-num{
	color: #ded904;
	font-size: 3rem;
}
@media screen and (orientation:landscape){
	.iframe-num{
		color: #ded904;
		font-size: 2.5rem;
	}	
}

.logo{
  position: absolute;
  top: 24px;
  margin: auto;
  width: 300px;
}

.logo img{

}

.text2{
  font-weight: 600;
  font-size: 2rem;
}

.main-logo{
  position: relative;
  top: -166px;
  margin-bottom: -156px;
  text-align: center;
}

.main-logo img{
  width: 75%;
  margin: auto;
}

.iframe_wrp .step__body {
 padding: 0 0 0 0!important;
}
#mobile-logo{
  display: none;
}