@import url('https://fonts.googleapis.com/css?family=Roboto');

:root{
    --slider-width: 280px; 
    --slider-height: 150px;
}


* {
    box-sizing: border-box;
}

.slider {
    max-width: calc( var(--slider-width) * 4);
    width: 80%;
    height: var(--slider-height);
}

.wrapper {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: var(--slider-height);
    z-index: 1;
}

.slides {
    display: flex;
    position: relative;
    top: 0;
    left: 0;
    width: 10000px;
}

.slides.shifting {
    transition: left .2s ease-out;
}

.slide {
    width: var(--slider-width);
    height: var(--slider-height);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: all 1s;
    position: relative;
    align-items: center;
}

.logo-1 {
    height:  135px;
}

.logo-2 {
    height:  80px;
}

.logo-3 {
    height:  60px;
}

@media screen and (max-width: 1920px) {
    .logo-1 {
        height:  115px;
    }
    
    .logo-2 {
        height:  70px;
    }
    
    .logo-3 {
        height:  40px;
    }
}

@media screen and (max-width: 1280px) {
    .slider{
        max-width: calc( var(--slider-width) * 3);
    }

    .logo-1 {
        height:  115px;
    }
    
    .logo-2 {
        height:  70px;
    }
    
    .logo-3 {
        height:  30px;
    }
}

@media screen and (max-width: 1024px) {
    .slider{
        max-width: calc( var(--slider-width) * 2);
    }

    .logo-1 {
        height:  115px;
    }
    
    .logo-2 {
        height:  65px;
    }
    
    .logo-3 {
        height:  55px;
    }
}

@media screen and (max-width: 600px) {

    .slider{
        max-width: calc( var(--slider-width) * 1);
    }

    .logo-1 {
        height:  135px;
    }
    
    .logo-2 {
        height:  80px;
    }
    
    .logo-3 {
        height:  60px;
    }
}