@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-x: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;
}

h1::before, h6::before{
content: '';
position: absolute;
width: 100%;
height: 120%;
bottom: 10%;
left: 0;
background: #FF69B4;
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;
justify-content:space-around;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
transform: skew(30deg);
}

.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;
cursor:pointer;
z-index: 1;
}

.button.btn .text,button.btn .text {
display: block;
width: 100%;
font-size: 24px;
color: #fff;
background: #000;
font-weight: 700;
transform: skew(30deg);
}

.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: #FF69B4;
color: #fff;
transform: skew(-30deg);
}

.btn--accent{
background: #76152f;
width: 48%;
border: 1px solid #fff;
box-sizing: border-box;
}

.btn--round{
width: 14rem;
height: 5.5rem;
padding: 0;
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;
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: rgba(150, 42, 252, 0.5);
position: relative;
}

.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;
}

.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;
}

.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{
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: #000;
overflow:hidden;
transition:all 1s ease;
border-radius:.5rem;
}

.crumbs li.active{
background:#30db36;
}

.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;
}
}