@import "https://fonts.googleapis.com/css?family=Titillium+Web:400,700&display=swap";
.slick-slider{
    box-sizing:border-box;
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    -ms-touch-action:pan-y;
    touch-action:pan-y;
    -webkit-tap-highlight-color:transparent
}
.slick-list,.slick-slider{
    position:relative;
    display:block
}
.slick-list{
    overflow:hidden;
    margin:0;
    padding:0
}
.slick-list:focus{
    outline:none
}
.slick-list.dragging{
    cursor:pointer;
    cursor:hand
}
.slick-slider .slick-list,.slick-slider .slick-track{
    transform:translateZ(0)
}
.slick-track{
    position:relative;
    left:0;
    top:0;
    display:block;
    margin-left:auto;
    margin-right:auto
}
.slick-track:after,.slick-track:before{
    content:"";
    display:table
}
.slick-track:after{
    clear:both
}
.slick-loading .slick-track{
    visibility:hidden
}
.slick-slide{
    float:left;
    height:100%;
    min-height:1px;
    display:none
}
[dir=rtl] .slick-slide{
    float:right
}
.slick-slide img{
    display:block
}
.slick-slide.slick-loading img{
    display:none
}
.slick-slide.dragging img{
    pointer-events:none
}
.slick-initialized .slick-slide{
    display:block
}
.slick-loading .slick-slide{
    visibility:hidden
}
.slick-vertical .slick-slide{
    display:block;
    height:auto;
    border:1px solid transparent
}
.slick-arrow.slick-hidden{
    display:none
}
.fadeIn{
    animation:a .5s forwards
}
@keyframes a{
    0%{
        opacity:0
    }
    to{
        opacity:1
    }
}
.fadeInUp{
    animation:b .6s forwards
}
@keyframes b{
    0%{
        opacity:0;
        transform:translate3d(0,10rem,0)
    }
    to{
        opacity:1;
        transform:translateZ(0)
    }
}
.fadeInDown{
    animation:c .6s forwards
}
@keyframes c{
    0%{
        opacity:0;
        transform:translate3d(0,-10rem,0)
    }
    to{
        opacity:1;
        transform:translateZ(0)
    }
}
.fadeInLeft{
    animation:d .4s forwards
}
@keyframes d{
    0%{
        opacity:0;
        transform:translate3d(-10rem,0,0)
    }
    to{
        opacity:1;
        transform:translateZ(0)
    }
}
.fadeInRight{
    animation:e .5s forwards
}
@keyframes e{
    0%{
        opacity:0;
        transform:translate3d(.4rem,0,0)
    }
    to{
        opacity:1;
        transform:translateZ(0)
    }
}
.fadeOut{
    animation:f .5s forwards
}
@keyframes f{
    0%{
        opacity:1
    }
    to{
        opacity:0
    }
}
.fadeOutRight{
    animation:g .5s forwards
}
@keyframes g{
    0%{
        opacity:1;
        transform:translateZ(0)
    }
    to{
        opacity:0;
        transform:translate3d(.4rem,0,0)
    }
}
.growUp{
    animation:h .2s linear forwards
}
@keyframes h{
    0%{
        transform:scale(0)
    }
    to{
        transform:scale(1)
    }
}
.moveLeft{
    animation:i 1s forwards ease
}
@keyframes i{
    0%{
        left:0
    }
    to{
        left:-100%
    }
}
.kenburnsZoomIn,.vegas-animation-kenburnsZoomIn{
    animation:j 1s ease forwards
}
@keyframes j{
    0%{
        transform-origin:50% 50%;
        transform:scale(1)
    }
    to{
        transform:scale(1.2);
        opacity:0
    }
}
.falldownAnim{
    animation:k 1s linear infinite
}
@keyframes k{
    0%{
        border-color:#fff;
        transform:translate(0)
    }
    20%{
        border-color:#fff;
        transform:translate(.5rem,.5rem)
    }
    20.1%,to{
        border-color:#444
    }
}
body{
    font-family:Titillium Web,Arial,Helvetica,sans-serif;
    font-size:16px;
    line-height:1.4
}
h1,h2,h3,h4,h5,h6{
    text-transform:uppercase
}
h1{
    font-size:3rem;
    line-height:1.1
}
h2,h3{
    font-size:2rem
}
h2,h3,h4{
    line-height:1.1
}
h4{
    font-size:1.8rem
}
h5{
    font-size:1.6rem
}
h5,h6{
    line-height:1.1
}
h6,p{
    font-size:1.2rem
}
*{
    margin:0;
    padding:0;
    box-sizing:border-box
}
html{
    font-size:62.5%
}
body,html{
    width:100%;
    height:100%
}
body{
    overflow-x:hidden;
    min-width:320px;
    min-height:480px;
    background:#fff;
    color:#333;
    z-index:0;
    background-size:cover;
    background-position:50%;
    background-repeat:no-repeat
}
ul{
    list-style-type:none;
    margin:0;
    padding:0
}
.clearfix:after{
    content:"";
    display:block;
    clear:both
}
.btn,.transition{
    transition:all .25s ease
}
img{
    display:block;
    max-width:100%;
    height:auto
}
.adult{
    position:fixed;
    left:50%;
    transform:translateX(-50%);
    bottom:1rem;
    z-index:3;
    color:#000;
    text-transform:uppercase;
    font-size:.9rem
}
ul{
    list-style-type:disc;
    margin-left:2rem
}
ul li{
    font-size:1.6rem;
    margin-bottom:.2rem
}
.main{
    height:100%;
    z-index:1;
    -ms-flex-direction:column;
    flex-direction:column;
    -ms-flex-pack:center;
    justify-content:center;
    -ms-flex-align:center;
    align-items:center;
    overflow:hidden
}
.container,.main{
    position:relative;
    width:100%;
    display:-ms-flexbox;
    display:flex
}
.container{
    height:98%;
    -ms-flex-direction:row;
    flex-direction:row;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    padding:1rem 0 4rem
}
.girlbox{
    position:relative;
    width:46%;
    height:18%;
    background-size:cover;
    background-position:50%;
    background-repeat:no-repeat;
    margin:1% 2%;
    border-radius:.5rem;
    box-shadow:0 40px 20px -30px rgba(0,0,0,.3);
    overflow:hidden
}
.girlbox:after{
    content:"";
    display:block;
    position:absolute;
    z-index:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.2);
    left:0;
    top:0;
    right:0;
    bottom:0
}
.girlbox.full{
    width:100%;
    height:60%
}
.status{
    width:1rem;
    height:1rem;
    border:2px solid #fff;
    border-radius:50%;
    position:relative;
    left:1rem;
    top:1rem;
    z-index:1
}
.status:after{
    font-size:1rem;
    position:absolute;
    top:-50%;
    left:100%;
    padding:0 0 0 .5rem;
    color:#fff
}
.status.online{
    background:#34c72a
}
.status.online:after{
    content:"online"
}
.status.offline{
    background:#aaa
}
.status.offline:after{
    content:"offline"
}
.sweetchat{
    width:100%;
    height:18%;
    margin:0 2%;
    padding:.5rem;
    position:relative;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-align:center;
    align-items:center;
    -ms-flex-pack:center;
    justify-content:center;
    -ms-flex-direction:column;
    flex-direction:column;
    padding:0 1rem;
    background:#fff;
    box-shadow:0 1px 2px rgba(0,0,0,.1),0 20px 20px -15px rgba(0,0,0,.3);
    z-index:5
}
.sweetchat__inner{
    overflow:hidden
}
.sweetchat h6{
    width:100%;
    padding:.5rem;
    font-size:1rem;
    text-transform:none
}
.sweetchat__message{
    font-size:.9rem
}
.rotate:first-word{
    font-weight:700
}
.rotating{
    display:inline-block;
    transform-style:preserve-3d;
    transform:rotateX(0) rotateY(0) rotate(0);
    transition:.5s;
    -webkit-transform-origin-x:50%
}
.rotating.flip{
    position:relative
}
.rotating .back,.rotating .front{
    left:0;
    top:0;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden
}
.rotating .front{
    position:absolute;
    display:inline-block;
    transform:translateZ(1px)
}
.rotating.flip .front{
    z-index:1
}
.rotating .back{
    display:block;
    opacity:0
}
.rotating.spin{
    transform:rotate(1turn) scale(0)
}
.rotating.flip .back{
    z-index:2;
    display:block;
    opacity:1;
    transform:rotateY(180deg) translateZ(0)
}
.rotating.flip.up .back{
    transform:rotateX(180deg) translateZ(0)
}
.rotating.flip.cube .front{
    transform:translateZ(100px) scale(.85)
}
.rotating.flip.cube .back{
    transform:rotateY(180deg) translateZ(100px) scale(.85)
}
.rotating.flip.cube.up .back{
    transform:rotateX(180deg) translateZ(100px) scale(.85)
}
.btnbox{
    width:100%;
    -ms-flex-pack:end;
    justify-content:flex-end;
    opacity:0
}
.btn,.btnbox{
    position:relative;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-align:center;
    align-items:center
}
.btn{
    width:6.2rem;
    height:6.2rem;
    padding:0;
    margin:0 .2rem;
    -ms-flex-pack:center;
    justify-content:center;
    color:#fff;
    font-size:1.2rem;
    text-decoration:none;
    text-transform:uppercase;
    text-align:center;
    letter-spacing:.1rem;
    border-radius:5rem;
    overflow:hidden;
    cursor:pointer;
    color:#000;
    box-shadow:0 0 14px 1px rgba(0,0,0,.28)
}
.btn span{
    text-shadow:none
}
.btn--primary{
    background:#62da60
}
.btn--primary:hover{
    box-shadow:0 25px 20px -20px rgba(0,0,0,.4)
}
.btn--primary:active{
    box-shadow:none;
    top:1px
}
.btn--accent{
    color:rgba(0,0,0,.4);
    background:#ffffff80
}
.btn--accent:active{
    box-shadow:none;
    top:1px
}
.btn--block{
    width:80%;
    height:4.6rem;
    max-width:18rem
}
.c-ripple{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    overflow:hidden;
    background:0 0
}
.c-ripple.is-active .c-ripple__circle{
    animation:l .4s ease-in
}
.c-ripple__circle{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    opacity:0;
    width:0;
    height:0;
    border-radius:50%;
    background:hsla(0,0%,100%,.25)
}
@keyframes l{
    0%{
        opacity:0
    }
    25%{
        opacity:1
    }
    to{
        width:200%;
        padding-bottom:200%;
        opacity:0
    }
}
.stepbox{
    width:90%;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    z-index:4;
    overflow:hidden;
    background:#ffffffe0;
    border-radius:.5rem
}
.step{
    width:100%;
    max-width:60rem;
    height:100%;
    margin:auto;
    position:relative;
    display:none;
    color:#222;
    text-align:left
}
.step:first-child{
    display:block
}
.step:first-child h1,.step:first-child h2,.step:first-child p,.step:last-child h1,.step:last-child h2,.step:last-child p{
    text-align:center
}
.step:first-child .btnbox,.step:last-child .btnbox{
    -ms-flex-pack:center;
    justify-content:center
}
.step__inner{
    position:relative;
    z-index:1;
    width:100%;
    height:100%;
    padding:2rem;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-direction:column;
    flex-direction:column;
    -ms-flex-pack:end;
    justify-content:flex-end
}
.step__header{
    margin-bottom:1rem
}
.step__body{
    margin-bottom:2rem
}
.step__footer{
    margin-bottom:0
}
.bg{
    position:fixed!important;
    opacity:.1
}
.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
}
.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
}
.bg__item.active{
    display:block
}
.bg__item.blur{
    -webkit-filter:blur(10px);
    filter:blur(10px)
}
@media(min-width:360px){
    html{
        font-size:75%
    }
}
@media(min-width:768px){
    html{
        font-size:87.5%
    }
    .container{
        max-width:90%;
        max-height:90%;
        padding:0;
        -ms-flex-pack:center;
        justify-content:center;
        -ms-flex-align:center;
        align-items:center
    }
    .sweetchat{
        margin:0
    }
}
@media(min-width:1024px){
    .container{
        max-width:90%;
        max-height:80%
    }
    .girlbox{
        max-width:33.33%;
        height:100%;
        margin:0
    }
    .girlbox:first-of-type{
        -ms-flex-order:2;
        order:2
    }
    .girlbox:nth-of-type(2){
        -ms-flex-order:1;
        order:1
    }
    .girlbox:nth-of-type(3){
        -ms-flex-order:3;
        order:3
    }
    .girlbox.full{
        height:100%;
        max-width:33.33%;
        transform:scale(1.05);
        z-index:1
    }
    .stepbox{
        max-width:36rem
    }
    .sweetchat{
        position:fixed;
        bottom:1rem;
        right:1rem;
        width:22rem;
        height:auto;
        padding:1rem
    }
    .sweetchat h6{
        font-size:1rem;
        text-transform:none
    }
    .sweetchat__message{
        font-size:.9rem
    }
}
@media(min-width:1300px){
    html{
        font-size:100%
    }
}
@media(min-width:1920px){
    .container{
        max-width:94rem;
        max-height:58rem
    }
}