/* =========================================
1. ШРИФТЫ ДЛЯ КАРУСЕЛИ
========================================= */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Exo+2:wght@600;700;900&family=Rajdhani:wght@600;700&display=swap');

/* =========================================
2. ОБЩИЙ БЛОК КАРУСЕЛИ
========================================= */
.carousel{
    position:relative;
    margin:4px 0 0;
    background:none !important;
    border:none !important;
    box-shadow:none !important;
    padding:0 !important;
}

/* =========================================
3. ВИДИМАЯ ОБЛАСТЬ КАРУСЕЛИ
========================================= */
.carousel .mask{
    position:relative;
    overflow:hidden;
    height:208px !important;
    width:590px !important;
    border:1px solid rgba(255,255,255,0.08);
}

/* =========================================
4. СПИСОК ЭЛЕМЕНТОВ КАРУСЕЛИ
========================================= */
.carousel ul{
    position:absolute;
    overflow:hidden;
    margin:10px 0 0 0;
    padding:0;
    list-style:none;
}

.carousel ul li{
    float:left;
    width:196px !important;
    height:208px !important;
    transition:all 0.3s ease;
}

.carousel ul li:hover{
    transform:scale(1.04);
    z-index:10;
}

/* =========================================
5. ЗАГОЛОВОК КАРУСЕЛИ
========================================= */
.carousel_title{
    background:none !important;
    color:#b6ac94 !important;
    font-family:'Exo 2', sans-serif;
    font-size:15px;
    font-weight:700;
    letter-spacing:1.2px;
    text-transform:uppercase;
    transition:all .25s ease;
    text-shadow:0 0 8px rgba(182, 172, 148, 0.4);
    padding:8px 0 4px 0;
}

.carousel_title a{
    color:#b6ac94 !important;
    font-family:'Anton', sans-serif;
    font-weight:400;
    text-decoration:none !important;
    letter-spacing:1.8px;
    text-transform:uppercase;
    transition:all .25s ease;
}

.carousel_title:hover,
.carousel_title:hover a,
.carousel_title a:hover{
    color:#ffffff !important;
    text-shadow:0 2px 6px rgba(0,0,0,0.8);
}

.carousel_title img{
    padding-left:6px !important;
    opacity:.75;
    filter:drop-shadow(0 0 6px rgba(255,220,100,.6));
    transition:all .3s ease;
}

.carousel_title:hover img{
    opacity:1;
    filter:drop-shadow(0 0 10px #ffcc00);
}

/* =========================================
6. ПАГИНАЦИЯ КАРУСЕЛИ
========================================= */
.carousel .pagination-links{
    position:absolute;
    right:0;
    top:0;
    z-index:20;
    list-style:none;
    margin:0;
    padding:0;
}

.carousel .pagination-links li{
    display:inline-block;
    margin:0 5px;
}

.carousel .pagination-links li a{
    display:inline-block;
    padding:6px 12px;
    color:#fff;
    background:#3a3523;
    border-radius:4px;
    font-size:12px;
    font-family:'Rajdhani', sans-serif;
    text-decoration:none;
    text-shadow:1px 1px 0 #000;
    box-shadow:0 2px 0 #111, inset 0 1px 0 #555;
    transition:all .2s ease;
}

.carousel .pagination-links li a:hover{
    background:#ffcc00;
    color:#1c1a14;
    transform:translateY(-1px);
}

.carousel .pagination-links li.current a{
    background:#F5EBCE;
    color:#2F2B1B;
    text-shadow:none;
}

/* =========================================
7. МОБИЛЬНАЯ ВЕРСИЯ КАРУСЕЛИ
========================================= */
@media(max-width:640px){
    .carousel .mask{
        width:100% !important;
    }

    .carousel ul li{
        width:196px !important;
        height:208px !important;
    }

    .carousel .pagination-links{
        right:8px;
    }
}