*{
    /* 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: 'Poppins', 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: #7c4774;
     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: #7c4774;
     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: #000;
     background: #000;
     font-weight: 700;
}
 .hidden{
     background: linear-gradient(180deg, rgba(186,135,103,1) 0%, rgba(169,188,164,1) 35%, rgba(123,78,119,1) 100%) !important;
}
 .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: #7c4774;
     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: #fff;
}
 .psuedo-text {
     position:relative;
}
 .button-mat:hover {
     color: #fff;
}
 .btn--5:before {
     transform: translate(-120%, -50%) translateZ(0);
}
 .btn--5:hover:before {
     transform: translate(-45%, -34%) translateZ(0);
}
 .btn--primary{
     background: #1fffcd;
    /* background-image: linear-gradient(90deg,#ae05d6,#c70271);
     */
     color: #000;
    /* box-shadow: 0px 6px 16px #c70271;
     */
}
 .btn--accent{
     background: #231c22;
     width: 48%;
     border: 1px solid #231c22;
     box-sizing: border-box;
    /* box-shadow: 0px 6px 16px #171d3b;
     */
}
 .btn--accent:before{
     background:#000 !important;
     color:#211a20;
}
 .btn--accent:hover .psuedo-text{
     color:#211a20 !important;
}
 .btn--round{
     width: 14rem;
     height: 5.5rem;
    /* border-radius: 10rem;
     */
     padding: 0;
    /* background: #fff;
     */
     text-align: center;
     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{
     line-height: 5.5rem;
     color: #000;
}
 .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: #1a0f0b;
     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;
    /* 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: #ffffff;
     overflow:hidden;
     transition:all 1s ease;
     border-radius:.5rem 
}
 .crumbs li.active{
     background:#1fffcd;
}
 .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;
    }
}
 @media screen and (min-width:360px){
     html{
         font-size:12px 
    }
}