/* ############################## */
/*        Custom CSS Rules        */
/* ############################## */

section {
    display:flex;
    flex-flow:column;
    align-items:center;
    div.container {
        transition:all .3s ease;
    }
    @media (max-width:992px) { padding:0 0px 0 0px; }
}
section.slide-option {
    margin:0 0 50px 0;
    .no-marg { margin:0 0 0 0; }
}

div.highway-slider {
    display:flex;
    justify-content:center;
    div.highway-barrier {
        overflow:hidden;
        position:relative;
    }
    ul.highway-lane {
        display:flex;
        height:100%;
        li.highway-car {
            flex:1;
            display:flex;
            justify-content:center;
            align-items:center;
            background:#fff;
            color:#343434;
        }
    }
}

@keyframes translatestf {
    0% { transform:translateX(100%);  }
    100% { transform:translateX(-500%);  }
}
#stffull div.highway-barrier {
    ul.highway-lane {
        width:500%;
        li.highway-car {
            animation:translatestf 30s linear infinite;
            h4 { font-size:28px; }
        }
    }
}

@keyframes translateinfinite {
    0% { transform: translateX(0); }
    100% { transform:translateX(calc(-180px * 6));  }
}
#infinite div.highway-barrier {
    background:#fff;
    &::before,
    &::after {
        content: " ";
        position:absolute;
        z-index:9;
        width:180px;
        height:100%;    
    }
    &::before {
        top:0;left:0;
        background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
    }
    &::after {
        top:0;right:0;
        background: linear-gradient(to left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
    }
    ul.highway-lane {
        width:calc(180px * 30);
        display: flex;
        gap: 18px;  /* Remove any gaps between images */
        li.highway-car {
            width:180px;
            max-width: 7%;
            animation: translateinfinite 20s linear infinite;
            span.fab {
                font-size:65px;
            }
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block; /* Remove any image spacing */
            }
        }
    }
}