/* ==========================================
   DR1055 GALLERY FILTER
========================================== */

.dr1055gallery{
    width:100%;
    margin:0 auto;
}

/* ==========================================
   FILTER
========================================== */

.dr1055gallery .gallery-filter{

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

    gap:15px;

    margin:0 0 40px;

}

.dr1055gallery .gallery-filter input[type="radio"]{

    display:none;

}

.dr1055gallery .gallery-filter label{

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

    min-width:150px;
    height:48px;

    padding:0 24px;

    border:2px solid #0c7a5c;
    border-radius:50px;

    background:#fff;
    color:#0c7a5c;

    font-size:16px;
    font-weight:600;
    line-height:1;

    cursor:pointer;
    user-select:none;

    transition:all .3s ease;

}

.dr1055gallery .gallery-filter label:hover{

    background:#0c7a5c;
    color:#fff;
    transform:translateY(-2px);

}

.dr1055gallery .gallery-filter input:checked + label{

    background:#0c7a5c;
    color:#fff;

    border-color:#0c7a5c;

    box-shadow:0 8px 20px rgba(12,122,92,.25);

}

/* ==========================================
   GALLERY ANIMATION
========================================== */

.dr1055gallery .dr1055galleryimage,
.dr1055gallery .dr1055galleryivideo{

    animation:galleryFade .35s ease;

}

@keyframes galleryFade{

    from{
        opacity:0;
        transform:translateY(15px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

/* ==========================================
   TABLET
========================================== */

@media (max-width:768px){

    .dr1055gallery .gallery-filter{

        gap:12px;

    }

    .dr1055gallery .gallery-filter label{

        min-width:130px;
        height:46px;

        font-size:15px;

    }

}

/* ==========================================
   MOBILE
========================================== */

@media (max-width:480px){

    .dr1055gallery .gallery-filter{

        justify-content:center;
        flex-wrap:wrap;

        gap:10px;

        padding:0 10px;

    }

    .dr1055gallery .gallery-filter label{

        width:140px;
        min-width:140px;
        height:46px;

        padding:0 16px;

        font-size:15px;

    }

}

/* ==========================================
   VERY SMALL DEVICES
========================================== */

@media (max-width:360px){

    .dr1055gallery .gallery-filter label{

        width:120px;
        min-width:120px;

        font-size:14px;

    }

}