@media only screen and (max-width: 400px) {
    .hb-container {
        display: none;
    }

    .hb-container-mobile {
        display: block;
        width: 300px;
    }
}

@media (min-width: 320px) and (max-width: 479px) {
    .hb-container {
        display: none;
    }

    .hb-container-mobile {
        width: 100%;
        display: block;
    }
}

@media (min-width: 400px) and (max-width: 600px) {
    .hb-container {
        display: none;
    }

    .hb-container-mobile {
        display: block;
        width: 400px;
    }
}

@media (min-width: 480px) and (max-width: 768px) {
    .hb-container {
        display: none;
    }

    .hb-container-mobile {
        display: block;
        width: 480px;
    }
}

@media (min-width: 600px) and (max-width: 1024px) {
    .hb-container {
        display: none;
    }

    .hb-container-mobile {
        display: block;
        width: 600px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .hb-container {
        display: none;
    }

    .hb-container-mobile {
        display: block;
        width: 768px;
    }
    .hb-mobile-slider-right {
        margin-left: 700px;
    }
    #kontrol {
        top: 38%;
    }
    .hb-mobile-slider-buttons {
        text-align: center;
        justify-content: center;
    }

    .hb-mobile-slider-buttons-single {
        font-size: 0.9em;
        margin-left: 5%;
    }
    .main-slider {
        height: 381px;
        width: 654px;
    }
    .product-list-shadow {
        max-width: 25%;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .hb-container {
        display: none;
    }

    .hb-container-mobile {
        display: block;
        width: 100%;
    }
}

@media (min-width: 1024px) and (max-width: 1500px) {
    .left-arrow-area {
        left: 9%;
    }

    .right-arrow-area {
        right: 9%;
    }

    .hb-slider {
        margin-left: 9%;
        width: 83%;
    }

    .hb-container-mobile {
        display: none;
    }

    .hb-container {
        display: block;
    }
}

@media (min-width: 1500px) and (max-width: 1800px) {
    .hb-slider {
        margin-left: 12%;
        width: 75%;
    }
    .hb-slider-max-width {
        max-width: 640px;
    }

    .left-arrow-area {
        left: 8%;
    }

    .right-arrow-area {
        right: 9%;
    }

    .hb-container-mobile {
        display: none;
    }

    .hb-container {
        display: block;
    }
}

@media (min-width: 1800px) and (max-width: 2560px) {
    .hb-slider-max-width {
        max-width: 680px;
    }

    .left-arrow-area {
        left: 19%;
    }

    .right-arrow-area {
        right: 19%;
    }

    .hb-container-mobile {
        display: none;
    }

    .hb-container {
        display: block;
    }
}

@media (min-width: 2560px) {
    .hb-slider-max-width {
        max-width: 640px;
    }

    .hb-container-mobile {
        display: none;
    }

    .hb-container {
        display: block;
    }
}