@import url(css2-Ralewayitalwght040005000600070008000900140015001600170018001900_swap.css);
.background-video{
	z-index: -1;
}
.background-video{
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	display: block;
	margin: 0 auto;
	object-fit: cover;
}
@media (orientation:portrait){
	#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: 'Raleway', sans-serif;
font-size:16px;
line-height:1.4;
color:#333
}
h1,h2,h3,h4,h5,h6{
text-transform:uppercase}
h1{
font-size:3.5rem;
text-shadow: -2px -2px 5px #3aefff, 2px 4px 5px #000;
line-height:1;
margin-bottom: 5px;
}
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;
}
*{
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:100%;
height:5rem;
line-height:5rem;
padding:0 2rem;
position:relative;
display:inline-block;
color:#000;
font-size:1.6rem;
text-decoration:none;
text-transform:uppercase;
text-align:center;
/* border-radius:.8rem; */      cursor:pointer;
margin-bottom:1rem;
position: relative;
display: block;
outline: 0;
transition: opacity 300ms;
}
.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{
color:#000;
background: #fff;
}
.btn--primary:hover{
color:#fff;
background: #000;
}
.btn--accent{
color:#fff;
background: #f1295a;
}
.btn--accent:hover{
color:#f1295a;
background: #fff;
}
.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;
-ms-flex-direction:column;
flex-direction:column}
.step__inner2{
width:100%;
height:100%;
display:-ms-flexbox;
display:flex;
-ms-flex-pack:center;
justify-content:center;
-ms-flex-direction:column;
flex-direction:column}
.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:1.5rem 2.5rem;
background: rgba(241,41,90,.5);
border-radius: 10px;
color: #fff;
text-align: center;
border: 1px solid #f1295a;
box-shadow: 0 0 15px #f1295a;
}
.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: #f1295a;
	font-size: 3rem;
}
@media screen and (orientation:landscape){
	.iframe-num{
		color: #f1295a;
		font-size: 2.5rem;
	}	
}

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

.logo img{

}