/* CSS Document */
/* ============================
   ADAPTIVE PHOTO SLIDER
============================ */

.vdg-slider{
    width:100%;
    max-width:900px;
    margin:40px auto;
    position:relative;
    overflow:hidden;
}


/* ???? ??????? */

.vdg-slider-window{
    width:100%;
    overflow:hidden;
}


/* ????? */

.vdg-slider-track{
    display:flex;
    transition:transform .5s ease;
}


/* ????????? ???? */

.vdg-slide{
    min-width:100%;
    text-align:center;
}


/* ?????????? */

.vdg-slide img{

    /* ????? ??? Dreamweaver */
    width:auto;
    height:auto;

    /* ????????? */
    max-width:100%;
    max-height:700px;

    object-fit:contain;

    display:block;
    margin:auto;
}


/* ??????? */

.vdg-caption{

    margin-top:12px;

    font-size:16px;
    color:#555;

}


/* ?????? ?????? ???? */

/* ============================
   ?????? ?????? ???????????
============================ */

.vdg-slider{
    position:relative;
}


/* ?????? ????????? ?????? ??????????? */

.vdg-btn{

    position:absolute;

    top:50%;
    transform:translateY(-50%);

    width:42px;
    height:42px;

    display:flex;
    align-items:center;
    justify-content:center;


    border:none;

    background:rgba(184,134,11,0.85);

    color:#fff;

    font-size:30px;
    line-height:1;

    cursor:pointer;

    border-radius:50%;

    z-index:10;

}


/* ????? ?????? */

.vdg-prev{

    left:10px;

}


/* ?????? ?????? */

.vdg-next{

    right:10px;

}



.vdg-btn:hover{

    background:#8b6508;

}

/* ????????? */

@media(max-width:600px){

    .vdg-slider{
        margin:20px auto;
    }


    .vdg-slide img{

        max-height:450px;

    }


    .vdg-btn{

        width:38px;
        height:38px;

        font-size:22px;

    }

}

/* =================================
   SMALL ADAPTIVE PHOTO CAROUSEL
================================= */

.vdg-carousel{

    width:100%;
    max-width:900px;

    margin:35px auto;

    position:relative;

    overflow:hidden;

}



/* ???? */

.vdg-carousel-window{

    overflow:hidden;

    width:100%;

}



/* ????? */

.vdg-carousel-track{

    display:flex;

    transition:transform .4s ease;

}



/* ???????? ???? */

.vdg-carousel-item{

    flex:0 0 25%;

    padding:8px;

    box-sizing:border-box;

    text-align:center;

}



/* ???? */

.vdg-carousel-item img{

    width:auto;
    height:auto;

    max-width:100%;

    max-height:160px;

    object-fit:contain;

    display:block;

    margin:auto;

}



/* ??????? */

.vdg-carousel-title{

    font-size:14px;

    margin-top:8px;

    color:#555;

}



/* ?????? ?????? */

.vdg-carousel-btn{

    position:absolute;

    top:45%;

    transform:translateY(-50%);


    width:36px;
    height:36px;


    border:0;

    border-radius:50%;


    background:rgba(184,134,11,.85);

    color:white;

    font-size:24px;

    cursor:pointer;

    z-index:5;

}

.vdg-carousel-btn,
.vdg-btn{

    display:flex;
    align-items:center;
    justify-content:center;

    padding:0;

    line-height:1;

    font-family:Arial, Helvetica, sans-serif;

}

.vdg-carousel-prev{

    left:5px;

}


.vdg-carousel-next{

    right:5px;

}



.vdg-carousel-btn:hover{

    background:#b8860b;

}



/* ??????? */

@media(max-width:900px){

    .vdg-carousel-item{

        flex:0 0 50%;

    }

}



/* ??????? */

@media(max-width:600px){

    .vdg-carousel-item{

        flex:0 0 100%;

    }


    .vdg-carousel-item img{

        max-height:220px;

    }

}
.vdg-carousel-track{

    display:flex !important;

    flex-wrap:nowrap !important;

}


.vdg-carousel-item{

    flex:0 0 25% !important;

}


@media(max-width:900px){

.vdg-carousel-item{

    flex:0 0 50% !important;

}

}


@media(max-width:600px){

.vdg-carousel-item{

    flex:0 0 100% !important;

}

}