h2.angercode-customers
{
    max-width  : var(--gts-max-content-width) !important;
    margin     : 60px auto -40px auto;
    text-align : center;
}

div.angercode-gradient
{
    height     : 100%;
    position   : absolute;
    width      : 10%;
    background : white;
    position   : absolute;
    z-index    : 10;
    top        : 0;
    
    &.left
    {
        background : var(--gts-default-background-color);
        background : linear-gradient(90deg, var(--gts-default-background-color) 34%, var(--gts-default-background-color-trans) 100%);
        left       : 0;
    }
    
    &.right
    {
        background : rgb(255, 255, 255);
        background : linear-gradient(90deg, var(--gts-default-background-color-trans) 34%, var(--gts-default-background-color) 100%);
        right      : 0;
    }
}

div.angercode-customers
{
    
    position         : relative;
    width            : 100vw;
    left             : -60px;
    max-width        : calc(100% + 120px) !important;
    background-color : var(--gts-default-background-color);
    height           : 300px;
    overflow         : hidden;
    box-sizing       : border-box;
    margin-top       : 60px;
    
    div.angercode-customers-rotatorbox
    {
        
        box-sizing : border-box;
        position   : absolute;
        height     : 100%;
        width      : max-content;
        /*transition : all 500ms linear;*/
        
        animation  : angercode-scroll-left 45s linear infinite;
        
        &:hover
        {
            animation-play-state : paused;
        }
        
        div.angercode-customers-box
        {
            
            will-change         : transform;
            transform           : translateZ(0) translateY(-50%);
            
            position            : relative;
            float               : left;
            height              : 99%;
            aspect-ratio        : 1;
            margin-right        : 100px;
            top                 : 50%;
            background-repeat   : no-repeat;
            background-size     : contain;
            background-position : center center;
            
            filter              : grayscale(0.5) contrast(1.2);
            transition          : var(--default-transition);
            
            cursor              : pointer;
            
            &:hover
            {
                filter    : unset;
                transform : translateZ(0) translateY(-50%) scale(1.2);
            }
            
            /*&.angercode-customers-focus
            {
                transform : scale(1.5);
                filter    : unset !important;
            }*/
            
            &.blank
            {
                background : white;
            }
            
            &.angercode
            {
                background-image  : url('../images/logo-angercode.webp');
                background-repeat : no-repeat;
                background-size   : 75%;
            }
            
            &.heidelberg
            {
                background-image  : url('../images/logo-heidelberg-cement.png');
                background-repeat : no-repeat;
                background-size   : 100%;
            }
            
            &.schwenk
            {
                background-image  : url('../images/logo-schwenk.png');
                background-repeat : no-repeat;
                background-size   : 100%;
            }
            
            &.dyckerhoff
            {
                background-image  : url('../images/logo-dyckerhoff.svg');
                background-repeat : no-repeat;
                background-size   : 100%;
            }
            
            &.godel
            {
                background-image  : url('../images/logo-godel-beton.svg');
                background-repeat : no-repeat;
                background-size   : 100%;
            }
            
            &.otterbein
            {
                background-image  : url('../images/logo-otterbein.png');
                background-repeat : no-repeat;
                background-size   : 75%;
            }
            
            &.spz
            {
                background-image  : url('../images/logo-spz.png');
                background-repeat : no-repeat;
                background-size   : 100%;
            }
            
            &.thomas
            {
                background-image  : url('../images/logo-thomas.svg');
                background-repeat : no-repeat;
                background-size   : 100%;
            }
            
            &.polysius
            {
                background-image  : url('../images/logo-thyssenkrupp-polysius.svg');
                background-repeat : no-repeat;
                background-size   : 65%;
            }
            
            &.total
            {
                background-image  : url('../images/logo-total.svg');
                background-repeat : no-repeat;
                background-size   : 65%;
            }
        }
        
    }
    
}

div.filler
{
    background : yellow;
    height     : calc(2 * 100vh);
    width      : 100vw;
}

@keyframes angercode-scroll-left
{
    from
    {
        transform : translateX(+100vw);
    }
    to
    {
        transform : translateX(-100%);
    }
}

@media screen and (max-width : 1200px)
{
    div.angercode-customers
    {
        left      : -60px;
        width     : 100vw;
        max-width : calc(100% + 220px) !important;
    }
}

@media screen and (max-width : 1000px)
{
    div.angercode-customers
    {
        left      : -40px;
        max-width : calc(100% + 120px) !important;
    }
}

@media screen and (max-width : 560px)
{
    div.angercode-customers
    {
        left      : -40px;
        max-width : calc(100% + 100px) !important;
    }
}