/* @group Gallery
------------------------------------ */

[data-page="gallery"] { background: none var(--dark-blue-secondary); }
@media only screen
and (min-width : 961px) {
    [data-page="gallery"] { background: no-repeat url('../../img/layout/globals/background-blue-desktop.png') var(--dark-blue-secondary) center top; background-size: 100% auto; }
}

/* @group Gallery Header
------------------------------------ */
@media only screen
and (min-width : 961px) {
    [data-page="gallery"] { background: no-repeat url('../../img/layout/globals/background-blue-desktop.png') var(--dark-blue-secondary) center top; background-size: 100% auto; }
    .gallery-header .text-box { margin-bottom: 8rem; }
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
    .gallery-header h2 { margin: 0 0 2rem; }
    .gallery-header .text-box { margin-bottom: 4rem; }
}
/* @end Gallery Header
------------------------------------ */


/* @group Filters
------------------------------------ */
.gallery-filters { margin-bottom: 4rem; }
.gallery-filters .filters ul li,
.gallery-filters .filters .menu-dropdown__head h3 { font: 400 1.6em / 1em var(--rubric-font); letter-spacing: .1875em; text-transform: uppercase; text-align: center; }
.gallery-filters .filters ul li { padding: 1rem 1.5rem; }
@media only screen
and (min-width : 961px) {
    .gallery-filters { margin-bottom: 4.5rem; }
    .gallery-filters .filters ul { display: flex; flex-wrap: wrap; }
    .gallery-filters .filters ul li { flex: 0 1 calc(20% - 1.3rem); min-width: 16rem; display: inline-block; cursor: pointer; border: .1rem solid var(--beige); color: var(--beige); padding: 1.7rem 1.5rem 1.2rem; margin-bottom: 1rem; transition: all .3s ease; }
    .gallery-filters .filters ul li:not(:nth-child(5n+5)) { margin-right: 1.6rem; }
    .gallery-filters .filters ul li.active { background-color: var(--rust); border-color: var(--rust); }
    .gallery-filters .filters ul li:hover { background-color: var(--rust); color: var(--off-white); border-color: var(--rust); }
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
    .gallery-filters .filters .menu-dropdown { background: none, var(--rust); color: var(--beige); position: relative; }
    .gallery-filters .filters .menu-dropdown__head { display: flex; justify-content: center; align-items: center; height: 4.6rem; }
    .gallery-filters .filters .menu-dropdown__head i { display: inline-block; margin-left: 1.25rem; font-size: .7rem; }
    .gallery-filters .filters .menu-dropdown__head h3,
    .gallery-filters .filters .menu-dropdown__head i { pointer-events: none; }
    .gallery-filters .filters ul { background: none, var(--rust); padding-bottom: 1rem; position: absolute; z-index: 1; left: 0; top: 100%; width: 100%; transition: var(--general-transition); opacity: 0; pointer-events: none; }
    .gallery-filters .filters ul li.active { opacity: .8; }

    .gallery-filters .filters .menu-dropdown.showlist .menu-dropdown__head i { scale: -1; }
    .gallery-filters .filters .menu-dropdown.showlist ul { opacity: 1; pointer-events: all; }
}
/* @end Filters
------------------------------------ */


/* @group Boxes
------------------------------------ */
.gallery-images { padding-bottom: 8rem; }
.gallery-images .items { display: flex; flex-wrap: wrap; }
.gallery-images .items .box { width: 100%; display: none; margin-bottom: 2rem; }
.gallery-images .items .box .img-box { height: 37rem; }
.gallery-images .items .box .img-box img { transition: var(--general-transition); }
.gallery-images .items .box .img-box:hover img { scale: 1.05; }

.gallery-images .items .box.show { display: block; }
@media only screen
and (min-width : 961px) {
    .gallery-images { padding-bottom: 16.2rem; }
    .gallery-images .items { column-gap: 3.4rem; }
    .gallery-images .items .box { flex: 0 1 calc(50% - 1.7rem); margin-bottom: 3.5rem; }
    .gallery-images .items .box .img-box { height: 46.5rem; }
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
}
/* @end Boxes
------------------------------------ */

/* @end */

/* Animations
------------------------------------ */

@media only screen
and (min-width : 961px) {
    .gallery-filters .filters li { opacity: 0; }
    .gallery-filters.animateActive .filters li { animation: fade var(--transition-delay) forwards; }
    .gallery-filters.animateActive .filters li:nth-child(1) { animation-delay: calc(var(--transition-delay-short) * 3); }
    .gallery-filters.animateActive .filters li:nth-child(2) { animation-delay: calc(var(--transition-delay-short) * 3.5); }
    .gallery-filters.animateActive .filters li:nth-child(3) { animation-delay: calc(var(--transition-delay-short) * 4); }
    .gallery-filters.animateActive .filters li:nth-child(4) { animation-delay: calc(var(--transition-delay-short) * 4.5); }
    .gallery-filters.animateActive .filters li:nth-child(5) { animation-delay: calc(var(--transition-delay-short) * 5.5); }
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
    .gallery-filters .filters { opacity: 0; z-index: 2; }
    .gallery-filters.animateActive .filters { animation: fade var(--transition-delay) forwards; animation-delay: calc(var(--transition-delay-short) * 3); }
}
@media only screen
and (min-width : 0)
and (max-width : 960px)
and (max-height : 700px) {
    .lightbox [data-comp="close-gallery-lightbox"] { top: -55%; }
}
.splide__arrows {
    display: block!important
}