.hero {
    color: #fff;
    z-index: 10;
    font-size: 24px;
    line-height: 1.2;
    background: #000;
    min-height: 100vh;
    text-align: center;
    position: relative;
    padding: 244px 0 140px
}

html.ie .hero {
    height: 100vh
}

@media only screen and (max-width:1440px) {
    .hero {
        font-size: 20px;
        padding-top: 236px
    }
}

@media only screen and (max-width:1366px) {
    .hero {
        padding-top: 200px;
        padding-bottom: 140px
    }
}

@media only screen and (max-width:1024px) {
    .hero {
        padding-top: 120px;
        padding-bottom: 64px
    }
}

@media only screen and (max-width:768px) {
    .hero {
        font-size: 20px;
        padding-bottom: 28px
    }
}

@media only screen and (max-width:480px) {
    .hero {
        line-height: 32px;
        padding: 100px 0 44px
    }
}

@media only screen and (max-width:360px) {
    .hero {
        padding-top: 70px
    }
}

.hero .slick-list,
.hero .slick-slide,
.hero .slick-track {
    height: 100%
}

.hero .bg-slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -10;
    pointer-events: none
}

.hero .bg-slider img {
    width: 100%;
    height: 100%;
    display: block;
    -o-object-fit: cover;
    object-fit: cover
}

.hero .slick-slide.slick-current {
    -webkit-animation: bgScale 8s ease forwards;
    animation: bgScale 8s ease forwards
}

@-webkit-keyframes bgScale {
    0% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes bgScale {
    0% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

.hero .section-content {
    width: 100%
}

@media only screen and (max-width:480px) {
    .hero .section-content {
        padding-left: 30px;
        padding-right: 30px
    }
}

@media only screen and (max-width:360px) {
    .hero .section-content {
        padding-left: 0;
        padding-right: 0
    }
}

.hero .h1,
.hero h1 {
    line-height: 1;
    font-size: 80px;
    margin: 0 0 12px;
    font-weight: 900;
    text-transform: uppercase
}

@media only screen and (max-width:1440px) {
    .hero .h1,
    .hero h1 {
        font-size: 70px;
        margin-bottom: 22px;
        letter-spacing: 5px;
    }
}

@media only screen and (max-width:1024px) {
    .hero .h1,
    .hero h1 {
        font-size: 60px;
        letter-spacing: 5px;
    }
}

@media only screen and (max-width:768px) {
    .hero .h1,
    .hero h1 {
        font-size: 40px;
        line-height: 50px;
        margin-bottom: 23px
    }
}

@media only screen and (max-width:480px) {
    .hero .h1,
    .hero h1 {
        margin-bottom: 20px
    }
}

.hero p {
    margin: 0 0 24px
}

.hero .btn-holder {
    padding: 40px 0 0
}

@media only screen and (max-width:1440px) {
    .hero .btn-holder {
        padding-top: 74px
    }
}

@media only screen and (max-width:1024px) {
    .hero .btn-holder {
        padding-top: 44px
    }
}

@media only screen and (max-width:768px) {
    .hero .btn-holder {
        padding-top: 34px
    }
}

@media only screen and (max-width:480px) {
    .hero .btn-holder {
        padding-top: 27px
    }
}

.hero .btn {
    color: #fff;
    font-size: 18px;
    line-height: 20px;
    position: relative;
    background: #eb008b;
    padding: 25px 58px 25px 39px
}

.hero .btn:hover {
    background: #cb0c7d
}

.hero .btn:after {
    top: 50%;
    right: 30px;
    width: 14px;
    height: 24px;
    content: '';
    margin: -11px 0 0;
    position: absolute;
    background: url(arrow-ri.svg) 50% 50% no-repeat;
    background-size: 100% 100%
}

.hero .scroll-down {
    left: 50%;
    bottom: 52px;
    font-size: 14px;
    line-height: 1.2;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 63px 0 0;
    font-weight: bold;
    position: absolute;
    font-family: "Roboto", sans-serif;
    text-decoration: none;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-transition: color .35s ease;
    -o-transition: color .35s ease;
    transition: color .35s ease
}

@media only screen and (max-width:1440px) {
    .hero .scroll-down {
        bottom: 44px
    }
}

@media only screen and (max-width:1024px) {
    .hero .scroll-down {
        display: none
    }
}

.hero .scroll-down:after {
    top: 0;
    left: 50%;
    width: 19px;
    content: '';
    height: 36px;
    border: 1px solid;
    position: absolute;
    margin: 0 0 0 -10px;
    border-radius: 10px;
    -webkit-animation: mouse 1.5s ease infinite;
    animation: mouse 1.5s ease infinite
}

.hero .scroll-down:before {
    top: 6px;
    left: 50%;
    width: 1px;
    height: 7px;
    content: '';
    position: absolute;
    margin: 0 0 0 -1px;
    border-left: 1px solid;
    -webkit-animation: mouseWheel 1.5s ease infinite;
    animation: mouseWheel 1.5s ease infinite
}

.hero .scroll-down:hover {
    text-decoration: underline
}

@-webkit-keyframes mouseWheel {
    0% {
        height: 7px;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    50% {
        height: 2px;
        -webkit-transform: translateY(14px);
        transform: translateY(14px)
    }
    to {
        height: 7px;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes mouseWheel {
    0% {
        height: 7px;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    50% {
        height: 2px;
        -webkit-transform: translateY(14px);
        transform: translateY(14px)
    }
    to {
        height: 7px;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@-webkit-keyframes mouse {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    50% {
        -webkit-transform: translateY(7px);
        transform: translateY(7px)
    }
    to {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes mouse {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    50% {
        -webkit-transform: translateY(7px);
        transform: translateY(7px)
    }
    to {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}