/*@media (max-width: 768px) {
    .slider-container .imgContainer {
        height: auto !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .slider-container {
  
        height: 900px !important;
    }

        .slider-container img {
            width: 80vw !important;  
            height: auto !important;  
            margin: 10px 0;  
        }

        .slider-container .button {
            width: 80vw !important;  
            height: auto !important;
            padding: 10px;  
        }
         
}*/



@media (max-width: 768px) {
    .slider-container .imgContainer {
        height: auto !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .slider-container {
        height: 900px !important;
    }

        .slider-container img {
            width: 80vw !important;
            height: auto !important;
            margin: 10px 0;
        }

        .slider-container .button {
            width: 80vw !important;
            height: 200px !important;
            padding: 10px;
            pointer-events: none;
        }
}


 


 






.slider-container .imgContainer {
    width: 100%;
    height: 600px;
    position: absolute;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 1s;
}

.slider-container {
    height: 600px;
}


.slider-container .slide_div {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 5px 0 5px;
}

.slider-container img {
    position: relative;
    height: 400px;
    width: 600px;
    filter: saturate(10%);
    transition: 0.7s;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 20px;
}

.slider-container .button {
    position: absolute;
    width: 600px;
    height: 400px;
    transition: 0.7s;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 20px;
}

    .slider-container .button:hover {
        background-color: rgba(0, 0, 0, 0.2);
    }

.slider-container #slider1:target ~ .imgContainer #img1,
.slider-container #slider1:target ~ .imgContainer #button1 {
    width: 650px;
    height: 490px;
    background-color: transparent;
    filter: saturate(100%);
}

.slider-container #slider2:target ~ .imgContainer #img2,
.slider-container #slider2:target ~ .imgContainer #button2 {
    width: 650px;
    height: 490px;
    background-color: transparent;
    filter: saturate(100%);
}

    .slider-container #slider3:target ~ .imgContainer #img3,
    .slider-container #slider3:target ~ .imgContainer #button3 {
        width: 650px;
        height: 490px;
        background-color: transparent;
        filter: saturate(100%);
    }

    .slider-container #slider4:target ~ .imgContainer #img4,
    .slider-container #slider4:target ~ .imgContainer #button4 {
        width: 650px;
        height: 490px;
        background-color: transparent;
        filter: saturate(100%);
    }

    .slider-container #slider5:target ~ .imgContainer #img5,
    .slider-container #slider5:target ~ .imgContainer #button5 {
        width: 650px;
        height: 490px;
        background-color: transparent;
        filter: saturate(100%);
    }

    .slider-container #slider6:target ~ .imgContainer #img6,
    .slider-container #slider6:target ~ .imgContainer #button6 {
        width: 650px;
        height: 490px;
        background-color: transparent;
        filter: saturate(100%);
    }

    .slider-container #slider7:target ~ .imgContainer #img7,
    .slider-container #slider7:target ~ .imgContainer #button7 {
        width: 650px;
        height: 490px;
        background-color: transparent;
        filter: saturate(100%);
    }


.slider-container #slider1:target ~ .imgContainer {
    left: 25%;     /* left: 60%;*/
}

.slider-container #slider2:target ~ .imgContainer {
    left: 20%;
}

.slider-container #slider3:target ~ .imgContainer {
    left: 8%;
}

.slider-container #slider4:target ~ .imgContainer {
    left: -25%;
}

.slider-container #slider5:target ~ .imgContainer {
    left: -20%;
}

.slider-container #slider6:target ~ .imgContainer {
    left: -40%;
}

.slider-container #slider7:target ~ .imgContainer {
    left: -60%;
}

.slider-container .img {
    height: 370px;
}