.slider-container {
    border-radius: 4px;
    margin: 0px auto;
    overflow: hidden;
    position: relative;
}

    .slider-container > ul {
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
        position: relative;
    }

        .slider-container > ul > li {
            background: #cccccc;
            margin: 0;
            padding: 0;
            text-align: center;
        }

            .slider-container > ul > li > a {
                display: block;
            }

                .slider-container > ul > li > a > img {
                    vertical-align: middle;
                }

    /* ---------------------------------------------------------------------------------------------------- */

    .slider-container > .control_prev,
    .slider-container > .control_next {
        width: auto;
        height: auto;
        cursor: pointer;
        margin: 0px;
        position: absolute;
        top: calc(calc(100% - 30px) / 2);
        z-index: 1;
    }

        .slider-container > .control_prev > i,
        .slider-container > .control_next > i {
            color: rgba(255, 255, 255, 0.6);
            font-size: 30px;
            text-decoration: none;
        }

        .slider-container > .control_prev:hover > i,
        .slider-container > .control_next:hover > i {
            color: rgba(0, 0, 0, 0.6);
        }

    .slider-container > .control_prev {
        left: 5%;
        border-radius: 0px 2px 2px 0px;
    }

    .slider-container > .control_next {
        right: 5%;
        border-radius: 2px 0px 0px 2px;
    }

    /* ---------------------------------------------------------------------------------------------------- */

    .slider-container > .dots_wrapper {
        height: 12px;
        display: flex;
        position: absolute;
        left: calc(50%);
        transform: translateX(-50%);
    }

        .slider-container > .dots_wrapper > .dot_navigation {
            width: 10px;
            height: 10px;
            border-radius: 100%;
            cursor: pointer;
            margin: 0 3px;
            border: 1px solid white;
            transition: .5s background-color;
        }

            .slider-container > .dots_wrapper > .dot_navigation:hover {
                background-color: white;
            }

        .slider-container > .dots_wrapper > .slider_active_dot {
            background-color: white;
        }

@media screen and (max-width: 767px) {
    .slider-container > .dots_wrapper {
        bottom: 15px;
    }

    .slider-container > ul > li > a > img {
        width: 100vw;
        height: auto;
    }
}

@media screen and (min-width: 768px) {
    .slider-container > .dots_wrapper {
        bottom: 30px;
    }
}


.mobile-slider-container {
    border-radius: 4px;
    margin: 0px auto;
    overflow: hidden;
    position: relative;
}

    .mobile-slider-container > ul {
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
        position: relative;
    }

        .mobile-slider-container > ul > li {
            background: #cccccc;
            margin: 0;
            padding: 0;
            text-align: center;
        }

            .mobile-slider-container > ul > li > a {
                display: block;
            }

                .mobile-slider-container > ul > li > a > img {
                    vertical-align: middle;
                }

    /* ---------------------------------------------------------------------------------------------------- */

    .mobile-slider-container > .control_prev,
    .mobile-slider-container > .control_next {
        width: auto;
        height: auto;
        cursor: pointer;
        margin: 0px;
        position: absolute;
        top: calc(calc(100% - 30px) / 2);
        z-index: 1;
    }

        .mobile-slider-container > .control_prev > i,
        .mobile-slider-container > .control_next > i {
            color: rgba(255, 255, 255, 0.6);
            font-size: 30px;
            text-decoration: none;
        }

        .mobile-slider-container > .control_prev:hover > i,
        .mobile-slider-container > .control_next:hover > i {
            color: rgba(0, 0, 0, 0.6);
        }

    .mobile-slider-container > .control_prev {
        left: 5%;
        border-radius: 0px 2px 2px 0px;
    }

    .mobile-slider-container > .control_next {
        right: 5%;
        border-radius: 2px 0px 0px 2px;
    }

    /* ---------------------------------------------------------------------------------------------------- */

    .mobile-slider-container > .mobile-dots_wrapper {
        height: 12px;
        display: flex;
        position: absolute;
        left: calc(50%);
        transform: translateX(-50%);
    }

        .mobile-slider-container > .mobile-dots_wrapper > .mobile-dot_navigation {
            width: 10px;
            height: 10px;
            border-radius: 100%;
            cursor: pointer;
            margin: 0 3px;
            border: 1px solid white;
            transition: .5s background-color;
        }

            .mobile-slider-container > .mobile-dots_wrapper > .mobile-dot_navigation:hover {
                background-color: white;
            }

        .mobile-slider-container > .mobile-dots_wrapper > .mobile-slider_active_dot {
            background-color: white;
        }

@media screen and (max-width: 767px) {
    .mobile-slider-container > .mobile-dots_wrapper {
        bottom: 15px;
    }

    .mobile-slider-container > ul > li > a > img {
        width: 100vw;
        height: auto;
    }
}