.top {
    position: relative;
    height: 500px;
    width: 100%;
    background: black;
    z-index: 0;
    overflow: hidden;
}

.prev-button-container {
    position: absolute;
    top:250px;
    transform: translateY(-50%);
    color:white;
    font-size:50px;
    z-index: 1;
    left:10px;
}

.next-button-container {
    position: absolute;
    top:250px;
    transform: translate(-100%,-50%);
    padding-right:10px;
    color:white;
    font-size:50px;
    z-index: 1;
    left:100%;
}

.slider-col {
    position: absolute;
    width:100%;
    float: left;
    height:500px;
    z-index: 0;
    /* transition: 0.5s;
    transition-delay: 0.1s;

    will-change: left, top; 
    transition-timing-function: ease-out;
    transform: translateZ(0); */
}

.slide1 {
    left:0%;
    background-image: url('/assets/imgs/slider1.jpg');
    background-size: cover;
    background-position: center center;
    
}

.slide2 {
    left:100%;
    background-image: url('../imgs/slide3.jpg');
    background-size:cover;
    background-position: 85% center;
}

.slide3 {
    left:200%;
    background-image: url('https://i.pinimg.com/originals/fd/57/20/fd57202bf2d8b34f6adcf3e37e2dee9e.jpg');
    background-size: cover;
    background-position: 42% center;
}

.slide4 {
    left:300%;
    background-image: url('https://cdn.demos.pixelgrade.com/wp-content/uploads/sites/18/2015/10/Samsung.jpg');
    background-size:cover;
    background-position: 20% center;
}

.overlay-black {
    top:0px;
    position: absolute;
    left: 0px;
    background:#000000b5;
    background: radial-gradient(  rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.8)  100%); 
    width: 100%;
    opacity: 0.7;
    height: 100%;
    transition: 0.5s;
    z-index: 2;
}

.section-two > .image {
    background: url('/assets/imgs/section3.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    filter: grayscale(100%);
    transition: 0.8s;
    transition-timing-function: ease-in;
}

.section-two:hover > .image {
    filter: grayscale(0%);
}

.section-three > .image {
    background: url('/assets/imgs/videoposter.png');
    /* background: url('https://www.leadingledtech.com/wp-content/uploads/2018/06/4-4-1.jpg'); */
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    filter: grayscale(100%);
    transition: 0.8s;
    transition-timing-function: ease-in;
    transform: scaleX(-1);

}

.section-three:hover > .image {
    filter: grayscale(0%);
}

.section-one > .image {
    background: url('/assets/imgs/section2.png');
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    filter: grayscale(100%);
    transition: 0.4s;
    transition-timing-function: ease-in;
}

.section-one:hover > .image {
    filter: grayscale(0%);
}

.section-four > .image {
	background: url('/assets/imgs/cq5dam.web.1280.1280.jpeg');
    /* background: url('https://www.leadingledtech.com/wp-content/uploads/2018/06/4-4-1.jpg'); */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    filter: grayscale(100%);
    transition: 0.8s;
    transition-timing-function: ease-in;
    
}

.overlay-black:hover {
    opacity: 1 !important;
}

.overlay-black:hover ~ .overlay-slide-content {
    transform: translateY(-110%) !important;
}

.overlay-slide-content {
    z-index:3;
    color:white;
    padding:20px;
    font-size: 13px;
    font-family: 'Raleway' , sans-serif;
    font-weight: 300;
    position: absolute;
    top:100%;
    transition:1s;
    transition-property: transform;
    width: -webkit-fill-available;
    text-align: center;
}

.overlay-slide-content:hover {
    transform: translateY(-110%) !important;
}

.overlay-slide-content:hover ~ .overlay-black {
    opacity: 1 !important;
    

}

.slide-h3 {
    color:white;
    font-weight: 900;
    text-align: center;
}

@media (min-width: 576px) { 
    
}


@media (min-width: 768px) { 
    .slider-col {
        width: 50%;
    }
    
    .slide1 {
        left: 0%;
    }

    .slide2 {
        left: 50%;
    }

    .slide3 {
        left: 100%;
    }

    .slide4 {
        left: 150%;
    }
    .overlay-slide-content {
        text-align: left;
    }
    .slide-h3 {
        text-align: left;
    }
}


@media (min-width: 992px) { 
    .top {
        height: 900px;
    }

    .prev-button-container {
        top:400px;
    }

    .next-button-container {
        top:400px;
    }

    .slider-col {
        width: 33.6%;
        height:900px;
    }
    
    .slide1 {
        left: 0%;
    }

    .slide2 {
        left: 33.33%;
    }

    .slide3 {
        left: 66.66%;
    }

    .slide4 {
        left: 99.99%;
    }
}

@media (min-width: 1200px) { 

}