@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;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,Arial,Helvetica,sans-serif;
        font-size:16px;
        line-height:1.3;
        z-index:0;
        color:#666;
        background:#fff    }
      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:#000;
        font-weight: 900;
        position: relative;
        margin: 0;
        text-shadow: 1px -1px 2px #d82b59, -1px 1px 2px #78b8df;
      }
      h1,h2{
        font-size:2.5rem;
      }
      h1 {
        z-index: 1;
        /* border-bottom: 6px solid #d82b59; */    }
      h1::before,    h6::before{
        content: '';
        position: absolute;
        width: 120%;
        height: 6px;
        bottom: 17%;
        left: -10%;
        background: #d82b59;
        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: 120%;
        height: 6px;
        bottom: 17%;
        left: -10%;
        background: #d82b59;
        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: #fff;
        font-weight: 700;
      }
      .button.btn:before,.button.btn:focus:before,button.btn:before,button.btn:focus:before {
        -webkit-animation: glitch .3s cubic-bezier(.25, .46, .45, .94) both infinite;
        animation: glitch .3s cubic-bezier(.25, .46, .45, .94) both infinite}
      .button.btn:after,.button.btn:focus:after,button.btn:after,button.btn:focus:after {
        -webkit-animation: glitch .3s cubic-bezier(.25, .46, .45, .94) reverse both infinite;
        animation: glitch .3s cubic-bezier(.25, .46, .45, .94) reverse both infinite}
      .button.btn .text,.button.btn:focus .text,button.btn .text,button.btn:focus .text {
        -webkit-animation: glitch .3s cubic-bezier(.25, .46, .45, .94) both;
        animation: glitch .3s cubic-bezier(.25, .46, .45, .94) both}
      .button.btn:after,.button.btn:before,button.btn:after,button.btn:before {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        content: ""}
      .button.btn:before,button.btn:before {
        background: #fff;
        z-index: -1}
      .button.btn:after,button.btn:after {
        background: #d82b59;
        z-index: -2}
      .button.btn .text:hover {
        animation: none}
      .button.btn:hover:after {
        animation: none}
      .button.btn:hover:before {
        animation: none}
      @-webkit-keyframes glitch {
        0%,	100% {
          -webkit-transform: translate(0);
          transform: translate(0)	}
        20% {
          -webkit-transform: translate(-2px, 2px);
          transform: translate(-2px, 2px)	}
        40% {
          -webkit-transform: translate(-2px, -2px);
          transform: translate(-2px, -2px)	}
        60% {
          -webkit-transform: translate(2px, 2px);
          transform: translate(2px, 2px)	}
        80% {
          -webkit-transform: translate(2px, -2px);
          transform: translate(2px, -2px)	}
      }
      @keyframes glitch {
        0%,	100% {
          -webkit-transform: translate(0);
          transform: translate(0)	}
        20% {
          -webkit-transform: translate(-2px, 2px);
          transform: translate(-2px, 2px)	}
        40% {
          -webkit-transform: translate(-2px, -2px);
          transform: translate(-2px, -2px)	}
        60% {
          -webkit-transform: translate(2px, 2px);
          transform: translate(2px, 2px)	}
        80% {
          -webkit-transform: translate(2px, -2px);
          transform: translate(2px, -2px)	}
      }
      .glitch {
        border: 1px solid #fff;
        position: relative;
      }
      .glitch span {
        display: block;
        margin: auto;
        width: 100%;
        height: 100%;
        font-size: 14px;
      }
      .glitch span:nth-child(1),.glitch span:nth-child(2) {
        position: absolute;
        left: 0%;
        top: 0;
      }
      .glitch-sp span:nth-child(1),.glitch-sp span:nth-child(2) {
        position: absolute;
        left: 0;
        top: 0;
      }
      .glitch-sp {
        font-size: 12px;
      }
      .glitch:before {
        border: 1px solid #0ff;
        z-index: -1;
      }
      .glitch:after {
        border: 1px solid #f0f;
        z-index: -2;
      }
      .glitch span:nth-child(1) {
        color: #0ff;
        z-index: -1;
      }
      .glitch span:nth-child(2) {
        color: #f0f;
        z-index: -2;
      }
      .glitch:before, .glitch:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        visibility: hidden;
      }
      .glitch:hover:before, .glitch:hover span:nth-child(1) {
        visibility: visible;
        animation: glitchy 0.3s ease infinite reverse;
      }
      .glitch:hover:after, .glitch:hover span:nth-child(2) {
        visibility: visible;
        animation: glitchy 0.3s ease 0.3s infinite;
      }
      @keyframes glitchy {
        0% {
          transform: translate(-2px, 2px);
        }
        25% {
          transform: translate(-2px, -2px);
        }
        50% {
          transform: translate(2px, 2px);
        }
        75% {
          transform: translate(2px, -2px);
        }
        to {
          transform: translate(-2px, 2px);
        }
      }
      .btn--primary{
        background: #fff;
        /* background-image: linear-gradient(90deg,#ae05d6,#c70271); */      color: #000;
        /* box-shadow: 0px 6px 16px #c70271; */    }
      .btn--accent{
        background: #000;
        /* box-shadow: 0px 6px 16px #171d3b; */    }
      .btn--round{
        width: 14rem;
        height: 5.5rem;
        /* border-radius: 10rem; */    padding: 0;
        /* background: #fff; */    text-align: center;
      }
      .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:#0a0a0abf;
        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 1.5rem;
        /* border-top: 12px solid #fff; */    }
      .step__body h1,.step__body h2,.step__body h6{
        margin-bottom:1rem    }
      .step__body p{
        font-size:1.6rem;
        color: #fff;
      }
      .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            }
      }