div.angercode-gradient
{
    height     : 100%;
    position   : absolute;
    width      : 10%;
    background : white;
    position   : absolute;
    z-index    : 10;
    top        : 0;
    
    &.left
    {
        background : rgb(255, 255, 255);
        background : linear-gradient(90deg, rgba(243, 247, 241, 1) 34%, rgba(243, 247, 241, 0) 100%);
        left       : 0;
    }
    
    &.right
    {
        background : rgb(255, 255, 255);
        background : linear-gradient(270deg, rgba(243, 247, 241, 1) 34%, rgba(243, 247, 241, 0) 100%);
        right      : 0;
    }
}

div.angercode-customers
{
    
    position         : relative;
    width            : 100vw;
    background-color : var(--trust-light-color);
    height           : 300px;
    overflow         : hidden;
    box-sizing       : border-box;
    
    div.angercode-customers-rotatorbox
    {
        
        box-sizing : border-box;
        position   : absolute;
        height     : 100%;
        width      : max-content;
        /*transition : all 500ms linear;*/
        
        animation  : angercode-scroll-left 30s linear infinite;
        
        &:hover
        {
            animation-play-state : paused;
        }
        
        div.angercode-customers-box
        {
            
            will-change         : transform;
            transform           : translateZ(0) translateY(-50%);
            
            position            : relative;
            float               : left;
            height              : 90%;
            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(--trust-default-transition);
            
            cursor              : pointer;
            
            &:hover
            {
                filter    : unset;
                transform : translateZ(0) translateY(-50%) scale(1.5);
            }
            
            /*&.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%;
            }
            
            &.cdus
            {
                background-image : url('../images/logo-cdus.webp');
            }
            
            &.exist
            {
                background-image : url('../images/logo-exist.webp');
            }
            
            &.exist-neu
            {
                background-image : url('../images/logo-exist-neu.webp');
            }
            
            &.k67
            {
                background-image : url('../images/logo-k67.webp');
            }
            
            &.whu
            {
                background-image : url('../images/logo-whu.webp');
            }
            
            &.bmwi
            {
                background-image : url('../images/logo-bmwi.webp');
            }
            
            &.eu
            {
                background-image : url('../images/logo-eu.webp');
            }
            
            &.nrw
            {
                background-image : url('../images/logo-nrw.webp');
            }
        }
        
    }
    
}

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

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

@media only screen and (min-width : 865px) and (max-width : 1199px)
{
    div.angercode-customers
    {
        height : 300px;
    }
}

@media only screen and (max-width : 864px)
{
    div.angercode-customers
    {
        height : 200px;
    }
}