@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
*{
/* margin:0; */ padding:0;
box-sizing:border-box }
html{
font-size:10px }
body,html{
width:100%;
height:100% }
body{
min-width:320px;
overflow:hidden;
font-family: 'Montserrat', sans-serif;
font-size:16px;
line-height:1.3;
z-index:0;
color:#666;
background:#fff;
margin: 0;
}
ul{
list-style-type:none;
margin:0;
padding:0 }
.clearfix:after{
content:"";
display:block;
clear:both }
.btn,.transition{
transition:all .25s ease }
h1,h2,h3,h4,h5,h6{
text-transform:uppercase;
color:#fff;
font-weight: 900;
position: relative;
margin: 0;
text-shadow: 1px -1px 0 #d82b59, -1px 1px 0 #78b8df;
}
h1,h2{
font-size:2.5rem;
}
h1 {
z-index: 1;
padding-left: 1.5rem;
/* border-bottom: 6px solid #d82b59; */ }
h1::before, h6::before{
content: '';
position: absolute;
width: 100%;
height: 120%;
bottom: 10%;
left: 0;
background: rgb(0,0,0,.8);
z-index: -1;
}
h3{
font-size:2.2rem }
h4{
font-size:1.8rem }
h5{
font-size:1.6rem }
h6{
font-size:3.2rem;
z-index: 1;
}
h2 {
z-index: 1;
}
h2::before{
content: '';
position: absolute;
width: 100%;
height: 120%;
bottom: 10%;
left: 0;
background: rgb(0,0,0,.8);
z-index: -1;
}
img{
width:100%;
height:auto;
display:block }
.c--accent{
color:#e01f62 }
.c--primary{
color:#19d199 }
.c--green{
color:#2ddd77 }
.tt--u{
text-transform:uppercase }
.btnbox{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
position: relative;
/* -webkit-box-pack:center; */ /* -ms-flex-pack:center; */ justify-content:space-around;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center }
.btn{
width:100%;
max-width:30rem;
padding:2rem 2rem;
position:relative;
display:inline-block;
color:#000;
font-size:24px;
line-height: 0;
text-decoration:none;
text-transform:uppercase;
text-align:center;
font-weight: 700;
/* border-radius:2.3rem; */ /* box-shadow:0 2px 2px rgba(0,0,0,.2); */ cursor:pointer;
z-index: 1;
}
.button.btn .text,button.btn .text {
display: block;
width: 100%;
/* padding: 15px; */ 
font-size: 24px;
color: #fff;
background: #000;
font-weight: 700;
transform: skew(30deg);
text-shadow: 3px 0px #ff4d73;
}

.button-mat {
  color: #fff;
  border: 0px transparent;
  border-radius: 0.3rem;
  transition: 0.3s ease-in-out;
  transition-delay: 0.35s;
  overflow: hidden;
}
.button-mat:before {
  content: "";
  display: block;
  background: #fff;
  position: absolute;
  width: 200%;
  height: 500%;
  border-radius: 100%;
  transition: 0.36s cubic-bezier(0.4, 0, 1, 1);
}
.button-mat:hover .psuedo-text {
  color: #000;
}
.psuedo-text {
transform: skew(30deg);
}
.button-mat:hover {
  color: transparent;
}
.btn--5:before {
  transform: translate(-120%, -50%) translateZ(0);
}
.btn--5:hover:before {
  transform: translate(-45%, -34%) translateZ(0);
}



.btn--primary{
background: #000;
/* background-image: linear-gradient(90deg,#ae05d6,#c70271); */ 
color: #fff;
/* box-shadow: 0px 6px 16px #c70271; */ 
transform: skew(-30deg);
}
.btn--accent{
background: #76152f;
width: 48%;
border: 1px solid #fff;
box-sizing: border-box;
/* box-shadow: 0px 6px 16px #171d3b; */ }
.btn--round{
width: 14rem;
height: 5.5rem;
/* border-radius: 10rem; */ padding: 0;
/* background: #fff; */ text-align: center;
transform: skew(-30deg);
width: 48%;
}
.btn--round i{
color:transparent;
-webkit-background-clip:text;
background-clip:text }
.btn--round.btn--primary{
font-size: 2.2rem;
line-height: 5.5rem;
}
.btn--round.btn--primary i{
background-image:linear-gradient(90deg,#45e2e8,#19d199) }
.btn--round.btn--primary:active{
background:#fff }
.btn--round.btn--accent{
font-size: 1.5rem;
line-height: 5.5rem;
color: #fff;
}
.btn--round.btn--accent i{
background-image:linear-gradient(90deg,#e01f62,#f90) }
.btn--round.btn--accent:active{
background:#fff }
.btn--round.btn--heart{
position:absolute;
top:-4rem;
right:1rem;
z-index:2;
width:6rem;
height:6rem;
font-size:2.6rem;
line-height:6.8rem;
/* background-image:linear-gradient(90deg,#e01f62,#f90); */ box-shadow:none;
border:none }
.btn--round.btn--heart i{
color:#fff }
.chevron,.chevron:before{
display:inline-block;
position:relative }
.chevron:before{
content:"";
height:.4rem;
width:.4rem;
left:0;
top:0;
border-color:#ddd;
border-style:solid;
border-width:.15rem .15rem 0 0 }
.chevron.up:before{
-webkit-transform:rotate(-45deg);
transform:rotate(-45deg) }
.chevron.right:before{
-webkit-transform:rotate(45deg);
transform:rotate(45deg) }
.chevron.down:before{
-webkit-transform:rotate(135deg);
transform:rotate(135deg) }
.chevron.left:before{
-webkit-transform:rotate(-135deg);
transform:rotate(-135deg) }
.main{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
-ms-flex-direction:column;
flex-direction:column;
z-index:1 }
.main,.stepbox{
position:relative;
width:100%;
height:100% }
.stepbox{
background: rgb(0 0 0 / 50%);
position: relative;
}
    .TTeffect{
    animation: animate 0.5s linear infinite;
  }
  @keyframes animate {
    0%,100%    {
      text-shadow: -1.5px -1.5px 0 #0ff,1.5px 1.5px 0 #f00;
      box-shadow: -1.5px -1.5px 0 #0ff,1.5px 1.5px 0 #f00;
    }
    25%    {
      text-shadow: 1.5px 1.5px 0 #0ff,-1.5px -1.5px 0 #f00;
      box-shadow: 1.5px 1.5px 0 #0ff,-1.5px -1.5px 0 #f00;
    }
    50%    {
      text-shadow: 1.5px 1.5px 0 #0ff,-1.5px 1.5px 0 #f00;
      box-shadow: 1.5px 1.5px 0 #0ff,-1.5px -1.5px 0 #f00;
    }
    75%    {
      text-shadow: -1.5px 1.5px 0 #0ff,1.5px -1.5px 0 #f00;
      box-shadow: -1.5px 1.5px 0 #0ff,1.5px -1.5px 0 #f00;
    }
  }
.step{
width:100%;
height:100%;
display:none }
.step:first-child{
display:block }
.step__inner{
height:100%;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
-ms-flex-direction:column;
flex-direction:column;
-webkit-box-pack:justify;
-ms-flex-pack:justify;
justify-content:space-between;
/* background: linear-gradient(#423deb,#0d010c);  */
}
.step__header{
position:relative;
overflow:hidden;
padding:0 }
.logo {
position: absolute;
height: 35px;
width: 68px;
top: 3%;
left: 3%;
z-index: 1;
}
.step__body{
-webkit-box-flex:1;
-ms-flex:1;
flex:1;
position:relative;
padding:1rem 0;
/* border-top: 12px solid #fff; */ }
.step__body h1,.step__body h2,.step__body h6{
margin-bottom:1rem;
padding-left: 1.5rem;
}
.step__body p{
font-size:1.6rem;
color: #fff;
padding-left: 1.5rem;
}
.step__footer{
position:relative;
padding:1rem 1.5rem 2rem }
.step__footer span{
/* width:3rem; */ height:.1rem;
background:rgba(0,0,0,.05) 
}
.step__footer p{
position:relative;
display:block }
.step__footer p i{
display:inline-block;
font-size:4rem;
background-image:linear-gradient(90deg,#3b5998,#45e2e8);
color:transparent;
-webkit-background-clip:text;
background-clip:text }
.step__footer p>span{
background-color:transparent;
display:inline-block;
top:0;
text-align:center;
color:#fff;
line-height:4.3rem }
.crumbs,.step__footer p>span{
width:100%;
position:absolute;
left:0 }
.crumbs{
top:.5rem }
.crumbs ul{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
width:100%;
padding:0 .5rem }
.crumbs li{
-ms-flex-preferred-size:20%;
flex-basis:20%;
position:relative;
display:inline-block;
height:.2rem;
margin:0 .25rem;
/* background:rgba(0,0,0,.1); */ background: #000;
overflow:hidden;
transition:all 1s ease;
border-radius:.5rem }
.crumbs li.active{
background:#d82b59 }
.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:rgba(0,0,0,.4)
}
.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;
-webkit-filter:blur(6px);
filter:blur(6px) }
.bg__item.active{
display:block }
@media screen and (min-width:768px){
html{
font-size:14px }
.main{
width:90%;
max-width:520px;
height:90%;
max-height:900px;
top:50%;
left:50%;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
box-shadow:0 2px 4px rgba(0,0,0,.2);
overflow:hidden;
border-radius: 10px;
}
}
@media screen and (min-width:360px){
html{
font-size:12px }
}