.big-banner {
    transition: opacity 1s linear;
}

.big-banner.appear {
    opacity: 1;
}

.big-banner.vanish {
    opacity: 0;
    pointer-events: none;
}

.big-banner .cha-cha-slide {

}

.big-banner.appear .cha-cha-slide {
    animation-name: slide-in-right;
    animation-duration: 2s;
    animation-direction: normal;
}

.big-banner.vanish .cha-cha-slide {
    animation-name: fade-out;
    animation-duration: 1.5s;
    animation-direction: normal;
}

.big-banner.appear.from-left .cha-cha-slide {
    animation-name: slide-in-left;
}

.big-banner.appear.from-right .cha-cha-slide {
    animation-name: slide-in-right;
}

.big-banner .button-position {
    position: absolute;
    top: 40%;
    opacity: 0%;
    transition: opacity 0.5s linear;
}
.big-banner:hover .button-position {
    opacity: 70%;
}

.big-banner .button-position-right {
    right: 0;
    transform: translateX(-10%);
}
.big-banner .button-position-left {
    left: 0;
    transform: translateX(10%);
}
.big-banner .dots {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.banner-spacer {
    visibility: hidden;
    margin: 20px 0;
    pointer-events: none;
}

@media only screen and (max-width: 600px) {
    .big-banner .button-position {
        display: none;
    }
    .big-banner:hover .button-position {

    }
}

/* ----------------------------------------------
 * Generated by Animista on 2020-5-1 15:53:13
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

@keyframes slide-in-right{0%{transform:translateX(100px);opacity:0}100%{transform:translateX(0);opacity:1}}
@keyframes fade-out{0%{opacity:1}100%{opacity:0}}
@keyframes slide-in-left{0%{transform:translateX(-100px);opacity:0}100%{transform:translateX(0);opacity:1}}