.four_hero {

    .accordion-group a:nth-child(4) .accordion-overlay {
        background-color: #333;
        opacity: 0.8;
    }

    .accordion-group a:nth-child(4).out .accordion-overlay {
        background-color: #333;
        opacity: 0;
    }

    .accordion-group a:nth-child(3) .accordion-overlay {
        background-color: #9d9d9d;
        opacity: 0.8;
    }

    .accordion-group a:nth-child(3).out .accordion-overlay {
        background-color: #9d9d9d;
        opacity: 0;
    }

    .accordion-group a:nth-child(2) .accordion-overlay {
        background-color: #ca9964;
        opacity: 0.8;
    }

    .accordion-group a:nth-child(2).out .accordion-overlay {
        background-color: #ca9964;
        opacity: 0;
    }

    .accordion-group a:nth-child(1) .accordion-overlay {
        background-color: #a87339;
        opacity: 0.8;
    }

    .accordion-group a:nth-child(1).out .accordion-overlay {
        background-color: #a87339;
        opacity: 0;
    }

    *,
    *:before,
    *:after {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .site-outer .site-inner {
        position: relative;
        margin: 0;
        padding: 0;
        -webkit-transition: all 250ms ease-in-out;
        -moz-transition: all 250ms ease-in-out;
        transition: all 250ms ease-in-out;
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    .site-outer .site-inner.slide-right {
        -webkit-transform: translate3d(250px, 0, 0);
        -moz-transform: translate3d(250px, 0, 0);
        transform: translate3d(250px, 0, 0);
    }

    .accordion-group {
        overflow: hidden;
        margin: 0 auto;
        padding: 0;
        list-style: none;
        width: 100%;
        height: 100vh;
        display: flex;
        align-items: center;
        -webkit-transition: all 300ms ease;
        -moz-transition: all 300ms ease;
        transition: all 300ms ease;
    }

    .accordion-group a {
        cursor: pointer;
        position: relative;
        display: flex;
        overflow: hidden;
        margin: 0;
        padding: 1.6em;
        list-style: none;
        width: 16.66666667%;
        height: inherit;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        -webkit-transition: all 250ms ease-in-out;
        -moz-transition: all 250ms ease-in-out;
        transition: all 250ms ease-in-out;
        text-decoration: none;
    }

    .accordion-group a h3 {
        position: relative;
        color: #fff;
        text-transform: uppercase;
        letter-spacing: 0.15rem;
        padding: 0;
        font-weight: 300;
        margin: 6.5rem 0 0;
        font-family: haha, regular;
        text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    }

    .accordion-group a .accordion-overlay {
        position: absolute;
        height: 100%;
        width: 100%;
        left: 0;
        top: 0;
        -webkit-transition: all 250ms ease-in-out;
        -moz-transition: all 250ms ease-in-out;
        transition: all 250ms ease-in-out;
    }

    .accordion-group a section {
        display: flex;
        align-items: center;
        width: 75%;
        height: 100%;
    }

    .accordion-group a section.big-section {
        width: 100%;
    }

    .accordion-group a section article {
        display: table-cell;
        vertical-align: middle;
        padding: 4rem;
        position: relative;
        right: -200%;
        -webkit-transition: all 250ms ease-in-out;
        -moz-transition: all 250ms ease-in-out;
        transition: all 250ms ease-in-out;
    }

    .accordion-group a section article p {
        background-color: rgba(255, 255, 255, 0.8);
        padding: 1.6rem;
        color: #333;
        font-size: 1.6rem;
        letter-spacing: 0.15rem;
    }

    .accordion-group a section article p:before,
    .accordion-group a section article p:after {
        content: "";
        display: block;
        height: 1px;
    }

    .accordion-group a.out {
        width: 50%;
    }

    .accordion-group a.out section article {
        right: 0;
    }

    .hidden-xs{
        position: relative;
    }

    .scrolldown__arrows {
        position: relative;
        top: 12px;
        width: 48px;
        height: 48px;
    }

    .scrolldown__arrow {
        background: url(https://demo.l2banners.ru/res/scrolldown/scrolldown.svg) no-repeat;
        width: 48px;
        height: 16px;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        transform: scale(0.3) translateY(-30px);
    }

    .scrolldown__arrow_1 {
        animation: scrolldown__arrow 3s ease-out infinite;
    }

    .scrolldown__arrow_2 {
        animation: scrolldown__arrow 3s ease-out 1s infinite;
    }

    .scrolldown__arrow_3 {
        animation: scrolldown__arrow 3s ease-out 2s infinite;
    }

    @keyframes scrolldown__arrow {
        33.3% {
            opacity: 1;
            transform: scale(1) translateY(0);
        }

        66.6% {
            opacity: 1;
            transform: scale(1) translateY(12px);
        }

        100% {
            opacity: 0;
            transform: scale(0.5) translateY(40px);
        }
    }


    @media (max-width: 967px) {
        .accordion-group {
            height: auto;
        }

        .accordion-group a {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .accordion-group a.out h3 {
            opacity: 0;
        }

        .accordion-group a h3 {
            opacity: 1;
            -webkit-transition: all 300ms ease-in-out;
            -moz-transition: all 300ms ease-in-out;
            transition: all 300ms ease-in-out;
            -webkit-transform: rotate(90deg);
            -moz-transform: rotate(90deg);
            transform: rotate(90deg);
            width: 2.5rem;
            padding: 0;
            margin: 10rem 0;
        }
    }
}

@-webkit-keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-moz-keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@media (max-width: 967px) {
    .accordion-group {
        flex-direction: column;
    }

    .four_hero {
        & .accordion-group a.out {
            width: 100%;

        }
    }
}