.instant {
    -webkit-transition: 0 0 !important;
    transition: 0 0 !important;
}

.scene {
    position: relative;
    height: 100%;
    background: transparent;
    -webkit-transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
    will-change: transform;
}

.content {
    position: relative;
    height: 100%;
    -webkit-transition: -webkit-transform 0.6s, opacity 0.4s 0.1s;
    transition: transform 0.6s, opacity 0.4s 0.1s;
    will-change: transform, opacity;
}
.content.inactive {
    opacity: 0;
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
}

.back,
.front {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: -webkit-transform 0.5s 0.5s;
    transition: transform 0.5s 0.5s;
    will-change: transform;
}
.back__bg,
.front__bg {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    -webkit-transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
    will-change: transform;
}
.back__bg-1,
.front__bg-1 {
    background-image: url("../images/slides/slide-6.png");
}
.back__bg-2,
.front__bg-2 {
    background-image: url("../images/slides/slide-1.png");
}
.back__bg-3,
.front__bg-3 {
    background-image: url("../images/slides/slide-5.png");
}

.back__bg.hidden {
    display: none;
}
.back__bg:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background: rgba(0, 0, 0, 0.5);*/
}
.back__bg-1 {
    top: 0%;
}
.back__bg-2 {
    top: 100%;
}
.back__bg-3 {
    top: 200%;
}
.back__bg-4 {
    top: 300%;
}

.front__bg {
    -webkit-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
}
.front__bg.active {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}
.front__bg:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background: rgba(0, 0, 0, 0.25);*/
}
.front__bg-0 {
    top: 100%;
}
.front__bg-1 {
    top: 0%;
}
.front__bg-2 {
    top: -100%;
}
.front__bg-3 {
    top: -200%;
}




@-webkit-keyframes animateMenuBtn {
    49.9% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
    50% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes animateMenuBtn {
    49.9% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
    50% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}