
*,:after,:before{
    box-sizing:border-box
}
button{
    -webkit-appearance:none;
    background:none;
    border:0;
    cursor:pointer;
    font-size:14px;
    outline:none;
    padding:0
}
.ptr--ptr{
    box-shadow:none!important
}
.hidden{
    display:none!important
}
@media (min-width:992px){
    .mobile-only{
        display:none!important
    }
}
.desktop-only{
    display:none!important
}
@media (min-width:992px){
    .desktop-only{
        display:block!important
    }
}
.loading{
    background:url(../../images/loader.gif) no-repeat 50%;
    background-size:75px;
    height:300px
}
.loading#trendinghash{
    height:100px
}
.loading-spinner{
    background:url(../../images/loader.gif) no-repeat 50%;
    background-size:cover;
    height:35px;
    width:35px
}
.inline-content{
    align-items:center;
    display:flex
}
.inline-content .icon{
    margin-right:8px
}

.text-center{
    text-align:center
}
.icon{
    fill:#d9d9d9;
    display:block;
    height:18px;
    transition:fill .2s ease;
    width:18px
}
a:hover .icon,button:hover .icon{
    fill:#e50038
}
.icon[class*="--primary"]{
    fill:#e50038!important
}
.icon[class*="--light"]{
    fill:#fff
}
.icon[class*="--dark"]{
    fill:#3d3d3d
}
body,html{
    height:100%
}
body{
    background:linear-gradient(135deg,#892e5e,#e50038)
}
#confirm_reset,#confirm_signup,#login,#reset_password,#signup{
    height:100%
}
.split__left{
    display:none
}
@media (min-width:768px){
    .split__left{
        align-items:center;
        background:#fff;
        flex-direction:column;
        justify-content:space-between;
        padding:75px 60px 30px
    }
    .split,.split__left{
        display:flex;
        height:100%
    }
    .split{
        justify-content:start
    }
    .split .split__left,.split .split__right{
        flex:0 0 50%;
        width:50%
    }
    .split .split__right{
        background:linear-gradient(135deg,#892e5e,#e50038);
        display:flex;
        flex-direction:column;
        justify-content:center;
        overflow:hidden;
        position:relative
    }
}
.header{
    align-items:center;
    border-bottom:2px solid hsla(180,4%,95%,.2);
    display:flex;
    justify-content:space-between;
    margin:0 auto 30px;
    padding:20px;
    position:relative;
    width:100%
}
@media (min-width:768px){
    .header{
        margin:0 auto auto
    }
}
.header a:hover .icon{
    fill:#d9d9d9
}
.header .icon{
    fill:#fff
}
.header:after{
    background:#fff;
    bottom:-2px;
    content:"";
    height:2px;
    left:0;
    position:absolute;
    transition:width .25s ease
}
.header[class*="--step1"]:after{
    width:50%
}
.header[class*="--step2"]:after{
    width:100%
}
.header[class*="--three-steps"][class*="--step1"]:after{
    width:33.333%
}
.header[class*="--three-steps"][class*="--step2"]:after{
    width:66.666%
}
.header[class*="--three-steps"][class*="--step3"]:after{
    width:100%
}
.header h1{
    color:#fff;
    font-size:18px;
    font-weight:600;
    line-height:19px;
    margin:0
}
.main__logo{
    display:block;
    margin:0 auto 30px
}
@media (min-width:768px){
    .main__logo{
        display:none
    }
}
.form{
    position:relative;
    width:100%
}
@media (min-width:768px){
    .form{
        align-items:center;
        display:flex;
        flex-wrap:wrap;
        height:calc(100% - 62px);
        margin:0 0 auto;
        position:absolute;
        top:62px;
        width:100%
    }
}
.form__contain{
    left:0;
    margin:0 auto;
    max-width:100%;
    padding:0 20px;
    position:absolute;
    top:0;
    transform-origin:left top;
    width:720px
}
.form__contain::-webkit-scrollbar{
    width:0
}
@media (min-width:768px){
    .form__contain{
        bottom:auto;
        display:flex;
        flex-direction:column;
        height:100%;
        justify-content:center;
        overflow:scroll;
        padding:20px;
        right:0;
        top:auto
    }
}
@media (min-width:992px){
    .form__contain{
        padding:20px 80px
    }
}
.form__contain[class*="--align-top"]{
    justify-content:start
}
.form__contain label,.form__contain p{
    color:#fff;
    display:block;
    font-size:10px;
    margin:10px 0 20px
}
.form__contain label a,.form__contain p a{
    color:#fff;
    font-weight:700
}
@media (min-width:768px){
    .form__contain label,.form__contain p{
        margin:0 0 20px
    }
}
@media (min-width:992px){
    .form__contain label,.form__contain p{
        font-size:12px
    }
}
.form__contain label.large,.form__contain p.large,.form input{
    font-size:14px
}
.form input{
    -webkit-appearance:none;
    background:#fff;
    border:6px solid #fff;
    border-radius:15px;
    box-shadow:none;
    font-family:Montserrat,sans-serif;
    font-weight:500;
    height:60px;
    margin:0 auto 10px;
    outline:none;
    padding:18px 20px;
    transition:border .2s ease;
    width:100%
}
.form input.error{
    background:#f7b3c3
}
.form input.error::placeholder{
    color:#3d3d3d;
    opacity:1
}
@media (min-width:768px){
    .form input{
        margin:0 auto 20px
    }
}
.form__captcha{
    border-radius:15px;
    display:block;
    height:auto;
    margin:0 0 10px;
    width:100%
}
@media (min-width:768px){
    .form__captcha{
        margin:0 0 20px
    }
}
.input-contain{
    position:relative
}
.input-contain__icon{
    position:absolute;
    right:20px;
    top:20px
}
.error+.input-contain__icon .icon{
    fill:#fff
}
.actions-row{
    align-items:center;
    display:flex;
    justify-content:space-between;
    margin:20px auto 0;
    width:100%
}
.actions-row p{
    color:#fff;
    font-size:12px;
    margin:0
}
.actions-row p a{
    color:#fff;
    font-weight:600
}
.button{
    align-items:center;
    background:#fff;
    border-radius:80px;
    color:#e50038;
    display:flex;
    font-family:Montserrat,sans-serif;
    font-size:12px;
    font-weight:600;
    height:34px;
    margin:0 0 0 auto;
    padding:0 40px;
    position:relative
}
.button[class*="--working"]{
    color:#fff
}
.button[class*="--working"]:before{
    background:url(../../images/loader.gif) no-repeat 50%;
    background-size:45px;
    content:"";
    height:100%;
    left:0;
    position:absolute;
    top:0;
    width:100%
}
.button:disabled{
    cursor:default
}
@media (min-width:768px){
    .button{
        font-size:14px;
        height:40px
    }
}
.slide-enter-active,.slide-leave-active,.slideIn2-enter-active,.slideIn2-leave-active,.slideIn-enter-active,.slideIn-leave-active{
    transform-origin:left top;
    transition:all .25s
}
.slide-enter-to{
    opacity:1;
    transform:translate(100%)
}
.slide-leave-to{
    opacity:0;
    transform:translate(-100%)
}
.slideIn-enter-from{
    opacity:0;
    transform:translate(100%)
}
.slideIn-leave-from{
    opacity:1;
    transform:translate(0)
}
.slideIn-leave-to{
    opacity:0;
    transform:translate(-100%)
}
.slideIn2-enter-from{
    opacity:0;
    transform:translate(100%)
}
.slideIn2-leave-from{
    opacity:1;
    transform:translate(0)
}
.error-container{
    align-items:center;
    background:rgba(0,0,0,.4);
    display:flex;
    height:100%;
    justify-content:center;
    left:0;
    position:fixed;
    top:0;
    width:100%;
    z-index:2
}
@media (min-width:768px){
    .error-container{
        background:none;
        height:auto;
        margin:0 auto 40px;
        position:static
    }
}
.error-container__body{
    background:#fff;
    border-radius:15px;
    margin:0 auto;
    max-width:400px;
    padding:6px;
    text-align:center;
    width:80%
}
.error-container__message{
    background:#f7b3c3;
    border-radius:10px;
    padding:30px
}
.error-container__message p{
    color:#e50038;
    font-size:14px;
    font-weight:600;
    line-height:24px;
    margin:0
}
.error-container .button{
    box-shadow:2px 2px 10px hsla(0,0%,85%,.3),-2px -2px 10px hsla(0,0%,85%,.3);
    color:#3d3d3d;
    font-size:14px;
    font-weight:700;
    height:40px;
    justify-content:center;
    margin:10px auto 6px;
    transition:all .2s ease;
    width:100%
}
.error-container .button:focus,.error-container .button:hover{
    box-shadow:2px 2px 10px hsla(0,0%,85%,.5),-2px -2px 10px hsla(0,0%,85%,.5);
    color:#e50038
}
@media (min-width:768px){
    .error-container .button{
        display:none
    }
}
.left-content-container{
    height:320px;
    position:relative;
    width:100%
}
.left-content{
    left:0;
    margin:0 auto;
    position:absolute;
    right:0;
    text-align:center;
    top:0
}
.left-content h2{
    color:#a5a5a5;
    font-size:18px;
    font-weight:500;
    line-height:28px;
    margin:30px auto 0;
    text-align:center
}
.left-content h2 strong{
    color:#e50038;
    display:block;
    font-weight:700
}
.left-content img{
    height:auto;
    max-width:100%
}
.copyright{
    color:#a5a5a5;
    font-size:12px;
    margin:0
}
.iti{
    width:100%
}
.checkbox{
    color:#fff;
    position:relative
}
.checkbox a{
    color:#fff;
    font-weight:700
}
.checkbox input{
    display:none
}
.checkbox input:checked+label:after{
    background:#fff
}
.checkbox label{
    padding:0 0 0 30px;
    position:relative
}
.checkbox label:after,.checkbox label:before{
    border-radius:50%;
    content:"";
    cursor:pointer;
    position:absolute
}
.checkbox label:before{
    border:2px solid #fff;
    height:20px;
    left:0;
    top:0;
    width:20px
}
.checkbox label:after{
    height:12px;
    left:4px;
    top:4px;
    transition:background .2s ease;
    width:12px
}
.checkbox.error label:before{
    background:#f7b3c3
}
