@import url("https://fonts.googleapis.com/css?family=Montserrat&subset=latin-ext");

*{
    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
}
h1,h2{
    font-size:2.5rem
}
h3{
    font-size:2.2rem
}
h4{
    font-size:1.8rem
}
h5{
    font-size:1.6rem
}
h6{
    font-size:1.2rem
}
img{
    max-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;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center
}
.btn{
    width:100%;
    max-width:30rem;
    padding:1.6rem 2rem;
    position:relative;
    display:inline-block;
    color:#fff;
    font-size:1.4rem;
    text-decoration:none;
    text-transform:uppercase;
    text-align:center;
    border-radius:.3rem;
    box-shadow:0 2px 2px rgba(0,0,0,.2);
    cursor:pointer
}
.btn--primary{
    background:#19d199;
    background-image:linear-gradient(#16ba88,#19d199)
}
.btn--primary:hover{
    box-shadow:0 2px 6px rgba(0,0,0,.3)
}
.btn--primary:active{
    background:#19d199;
    box-shadow:none
}
.btn--accent{
    background:#e01f62;
    background-image:linear-gradient(#16ba88,#19d199)
}
.btn--accent:hover{
    box-shadow:0 2px 6px rgba(0,0,0,.3)
}
.btn--accent:active{
    background:#e01f62;
    box-shadow:none
}
.btn--round{
    width:8.5rem;
    height:8.5rem;
    border-radius:10rem;
    padding:0;
    background:#fff;
    text-align:center;
    border:1px solid rgba(0,0,0,.05);
    box-shadow:0 5px 20px rgba(0,0,0,.05),inset 0 2px 2px hsla(0,0%,100%,.5)
}
.btn--round i{
    color:transparent;
    -webkit-background-clip:text;
    background-clip:text
}
.btn--round.btn--primary{
    font-size:4.2rem;
    line-height:9rem
}
.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:3.5rem;
    line-height:8.4rem;
    color:#e01f62
}
.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:-3rem;
    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:#fff
}
.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:#fff
}
.step__header{
    position:relative;
    overflow:hidden;
    padding:0
}
.step__body{
    -webkit-box-flex:1;
    -ms-flex:1;
    flex:1;
    position:relative;
    padding:1rem 1.5rem
}
.step__body h1,.step__body h2,.step__body h6{
    margin-bottom:1rem
}
.step__body p{
    font-size:1.6rem
}
.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);
    overflow:hidden;
    transition:all 1s ease;
    border-radius:.5rem
}
.crumbs li.active{
    background:#fff
}
.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 (min-width:360px){
    html{
        font-size:12px
    }
}
@media (min-width:768px){
    html{
        font-size:14px
    }
    .main{
        width:90%;
        max-width:520px;
        max-height:90%;
        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
    }
}