/* http://www.menucool.com - Modernized for 480px Height */

#sliderFrame {
    position: relative;
    width: 100%;
    max-width: 600px; /* ????? ????????? ???? ???????? */
    margin: 0 auto; 
}

#slider {
    width: 100%;
    height: 480px; /* ??? ?????? ?? ????? ?????? */
    background: #000 url(loading.gif) no-repeat center center; /* ??????? ???? ?????? ?????? ????? */
    position: relative;
    margin: 0 auto;
    border-radius: 15px; /* Modern ????? ??? ????? ??? */
    box-shadow: 0px 10px 30px rgba(0,0,0,0.1);
    overflow: hidden;
}

/* ???????? ??? ??????? ????? */
#slider img {
    position: absolute;
    top: 0;
    left: 0;
    border: none;
    display: none;
    width: 100%;
    height: 100%;
    /* ???????? ?????? ???? ????? ????? ?????? ??????? ??? ?????? */
    object-fit: contain; 
    background-color: #000; /* ???????? ??? ??? ??? ??????? ??? ?????? ???? */
}

/* Caption styles - ????? ??? ??? */
div.mc-caption-bg {
    position: absolute;
    width: 100%;
    height: auto;
    padding: 0;
    left: 0;
    bottom: 0;
    z-index: 3;
    background-color: rgba(0,0,0,0.6); /* ??????? ????? ??? ????? */
}

div.mc-caption {
    font: 500 16px/24px 'Inter', Arial; /* Modern font ???? ?????? */
    color: #FFF;
    z-index: 4;
    padding: 15px 0;
    text-align: center;
}

/* ------ Navigation Bullets (?? ????? ??? ???) ------*/
div.navBulletsWrapper {
    position: absolute;
    bottom: 20px; /* ???????? ??? ?????? ????? */
    left: 50%;
    transform: translateX(-50%); /* ?????? ???? ???? */
    width: auto;
    display: flex;
    justify-content: center;
    z-index: 5;
}

/* ?? ????? ???? */
div.navBulletsWrapper div {
    width: 10px;
    height: 10px;
    background: rgba(255,255,255,0.5); /* ?? ???? ??? */
    border-radius: 50%;
    margin: 0 6px;
    cursor: pointer;
    transition: 0.3s;
}

/* active ??? ???? ????? ????? */
div.navBulletsWrapper div.active {
    background: #3b82f6; /* ??? theme ??? ???? ??? */
    transform: scale(1.2);
}