@media (prefers-reduced-motion) {
    .js-scroll {
        opacity: 1;
    }
    .scrolled {
        animation: none !important;
    }
}

.js-scroll {
    opacity: 0;
    transition: opacity 500ms;
}

.js-scroll.scrolled {
    opacity: 1;
}

.scrolled.fade-in {
    animation: fade-in 1s ease-in-out both;
}

.scrolled.fade-in-bottom {
    animation: fade-in-bottom 1s ease-in-out both;
}

.scrolled.slide-left {
    animation: slide-in-left 1s ease-in-out both;
}

.scrolled.slide-right {
    animation: slide-in-right 1s ease-in-out both;
}

.scrolled.slide-right-translated {
    animation: slide-in-right-translated  1s ease-in-out both;
}


@keyframes slide-in-left {
    0% {
        -webkit-transform: translateX(-100vw);
        transform: translateX(-100vw);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slide-in-right {
    0% {
        -webkit-transform: translateX(100vw);
        transform: translateX(100vw);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}


@keyframes fade-in-bottom {
    0% {
        -webkit-transform: translateY(50px);
        transform: translateY(50px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes banner-fade-in {
    0% {
        transform: translateY(100vh);
    }

    100% {
        transform: translateY(0);
    }
}

.bmwp-banner {
    position: fixed!important;
    bottom: 0;
    right: 0;
    transform: translateY(100vh);
    animation: banner-fade-in .5s 1s ease-in forwards;
    width: 100%;
    max-width: 480px;
    z-index: 2;
    position: relative;
    padding: 24px;
    margin-right: 16px;
    margin-bottom: 62px;
    margin-left: auto;
    border-radius: 0px;
    border: 1px solid #d5d3bd;
    background-color: #ffffff;
}

.bmwp-banner p {
    margin-bottom: 7.5px;
    color: #231f20;
}

.bmwp-banner p.last {
    margin-bottom: 15px;
}

.bmwp-banner.hide {
    display: none!important;
}

.close-bmwp-banner {
    top: 15%!important;
}

a.btn.small.green {
    background: #d5d3bd;
    padding: 8px 16px;
    color: white;
    font-size: 14px;
    border: 1px solid #d5d3bd;
}

a.btn.small.green:hover {
    background: #ffffff;
    color: #d5d3bd;
}