/* @group Animation scroll
------------------------------------ */

.horizontal-track {
    position: relative;
}
@media only screen
and (min-width : 961px) {
    .horizontal-track {
        height: 1000vw; /* dynamically replaced */
    }
    .horizontal__viewport {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        overflow: hidden;
        width: 100%;
        height: 100vh;
        max-height: 100vh;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-align: stretch;
        -webkit-align-items: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
    }
    .horizontal__scroll {
        z-index: 500;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        height: 100%;
        -webkit-box-pack: start;
        -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        transform-style: preserve-3d;
        will-change: transform;
        transition: transform .7s;
    }
    .horizontal__scroll .container,
    .horizontal__scroll .container [class^="col-"] {
        flex: none;
        }
    .horizontal__scroll .container {
        height: 100vh;
        margin-left: -0.1rem;
    }
    .horizontal__scroll .row {
        max-width: 100%;
        flex-wrap: nowrap;
    }
    
}
@media only screen
and (max-width : 960px) {
    .horizontal__scroll {
        overflow: hidden;
    }
}