/* ==========================================================
   Portfolio Filter
   ========================================================== */

#filterContainer {
    margin-bottom: 30px;
}

#main #categoryFilter ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin: 0;
    padding: 0;
}

#main #categoryFilter li {
    position: static;
    margin: 0;
    padding: 0;
    list-style: none;
}

#main #categoryFilter li::before {
    display: none;
    content: none;
}

#categoryFilter button {
    display: block;
    padding: 4px 10px;
    border: 0;
    border-bottom: 3px solid #e9eaea;
    border-radius: 0;
    background-color: #e9eaea;
    color: inherit;
    font: inherit;
    font-size: 23px;
    font-weight: 500;
    line-height: 1.3;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

    #categoryFilter button:hover {
        border-bottom-color: #000;
    }

    #categoryFilter button:focus-visible {
        outline: 2px solid currentColor;
        outline-offset: 3px;
    }

#categoryFilter li.enabled button {
    border-bottom-color: #aa8164;
    background-color: #aa8164;
    color: #fff;
}


/* Optional page-specific colors */

.WebpageId21 #categoryFilter li.enabled button,
.ParentWebpageId21 #categoryFilter li.enabled button {
    border-bottom-color: #aa8164;
    background-color: #aa8164;
}

.WebpageId22 #categoryFilter li.enabled button,
.ParentWebpageId22 #categoryFilter li.enabled button {
    border-bottom-color: #ed028c;
    background-color: #ed028c;
}


/* ==========================================================
   Portfolio Overview
   ========================================================== */

#overviewPortfolioItemContainer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    margin-left: -7px;
}

.overviewPortfolioItem {
    position: relative;
    height: max-content;
}

    /* Large image for the first and every 6th image */
    .overviewPortfolioItem:nth-child(6n+1) {
        grid-column: span 2;
        grid-row: span 2;
    }

/* Disable special grid sizing while filtering */
.filterIsEnabled .overviewPortfolioItem:nth-child(6n+1) {
    grid-column: span 1;
    grid-row: span 1;
}

.overviewPortfolioItemContentWrapper {
    position: relative;
    z-index: 1;
    width: 100%;
    padding-bottom: 65%;
    pointer-events: none;
}

.overviewPortfolioItemImageContainer {
    position: absolute;
    top: 10px;
    right: 10px;
    bottom: 10px;
    left: 10px;
    display: block;
    overflow: hidden;
    background-color: #000;
}

    .overviewPortfolioItemImageContainer img {
        width: 100%;
        height: 100%;
        max-height: 100%;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        vertical-align: top;
        transition: transform 0.35s ease-in-out;
    }

.overviewPortfolioItemTextContainer {
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 30px;
    padding: 3px 10px 5px;
    background-color: #000;
    color: #fff;
    line-height: 22px;
    opacity: 1;
    visibility: visible;
    transition: background-color 0.6s;
}

.beItemContent .overviewPortfolioItemTextContainer h2,
.overviewPortfolioItemTextContainer h2 {
    margin: 0;
    color: #fff;
    font-size: 20px;
}

.overviewPortfolioItemLink {
    position: absolute;
    inset: 0;
}

.overviewPortfolioItem:hover img {
    transform: scale(1.05);
}

.overviewPortfolioItem:hover .overviewPortfolioItemTextContainer {
    background-color: #444;
}

.WebpageId21 .overviewPortfolioItem:hover .overviewPortfolioItemTextContainer,
.ParentWebpageId21 .overviewPortfolioItem:hover .overviewPortfolioItemTextContainer {
    background-color: #aa8164;
}

.WebpageId22 .overviewPortfolioItem:hover .overviewPortfolioItemTextContainer,
.ParentWebpageId22 .overviewPortfolioItem:hover .overviewPortfolioItemTextContainer {
    background-color: #ed028c;
}


/* ==========================================================
   Tablet
   ========================================================== */

@media screen and (max-width: 1023.9px) {

    #filterContainer {
        margin-bottom: 25px;
    }

    #categoryFilter ul {
        gap: 8px 12px;
    }

    #categoryFilter button {
        padding: 4px 9px;
        font-size: 20px;
    }

    #overviewPortfolioItemContainer {
        grid-template-columns: repeat(2, 1fr);
    }

    .overviewPortfolioItem:nth-child(6n+1) {
        grid-column: initial;
        grid-row: initial;
    }
}


/* ==========================================================
   Mobile
   ========================================================== */

@media screen and (max-width: 767.9px) {

    #filterContainer {
        margin-bottom: 20px;
    }

    #categoryFilter ul {
        gap: 8px;
    }

    #categoryFilter button {
        padding: 5px 9px;
        font-size: 18px;
        line-height: 1.25;
    }

    #overviewPortfolioItemContainer {
        display: block;
        margin: 0;
        padding: 0;
    }

    .overviewPortfolioItem {
        margin-bottom: 15px;
    }

    .overviewPortfolioItemContentWrapper {
        padding: 0;
    }

    .overviewPortfolioItemImageContainer {
        position: relative;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }

        .overviewPortfolioItemImageContainer img {
            aspect-ratio: 4 / 3;
        }
}


/* ==========================================================
   Small Mobile
   ========================================================== */

@media screen and (max-width: 479.9px) {

    #categoryFilter ul {
        gap: 7px;
    }

    #categoryFilter button {
        padding: 5px 8px;
        font-size: 16px;
    }

    .overviewPortfolioItemTextContainer {
        margin: 20px;
    }

        .overviewPortfolioItemTextContainer h2 {
            font-size: 18px;
        }
}


/*******************************************************************************/
/* ==========================================================
   Portfolio Detail
   ========================================================== */

#portfolioNavigationContainer {
    margin-bottom: 20px;
    font-size: 40px;
    line-height: 1;
}

    #portfolioNavigationContainer .fa-bars {
        margin: 0 15px;
    }

    #portfolioNavigationContainer a {
        display: inline-block;
        text-decoration: none;
    }

        #portfolioNavigationContainer a:hover .fa-classic,
        #portfolioNavigationContainer a:hover .fa-light,
        #portfolioNavigationContainer a:hover .fa-regular,
        #portfolioNavigationContainer a:hover .fa-solid,
        #portfolioNavigationContainer a:hover .fa-thin,
        #portfolioNavigationContainer a:hover .fal,
        #portfolioNavigationContainer a:hover .far,
        #portfolioNavigationContainer a:hover .fas,
        #portfolioNavigationContainer a:hover .fat {
            color: #c3193a;
        }

.ParentWebpageId21 #portfolioNavigationContainer a:hover .fa-classic,
.ParentWebpageId21 #portfolioNavigationContainer a:hover .fa-light,
.ParentWebpageId21 #portfolioNavigationContainer a:hover .fa-regular,
.ParentWebpageId21 #portfolioNavigationContainer a:hover .fa-solid,
.ParentWebpageId21 #portfolioNavigationContainer a:hover .fa-thin,
.ParentWebpageId21 #portfolioNavigationContainer a:hover .fal,
.ParentWebpageId21 #portfolioNavigationContainer a:hover .far,
.ParentWebpageId21 #portfolioNavigationContainer a:hover .fas,
.ParentWebpageId21 #portfolioNavigationContainer a:hover .fat {
    color: #aa8164;
}

.ParentWebpageId22 #portfolioNavigationContainer a:hover .fa-classic,
.ParentWebpageId22 #portfolioNavigationContainer a:hover .fa-light,
.ParentWebpageId22 #portfolioNavigationContainer a:hover .fa-regular,
.ParentWebpageId22 #portfolioNavigationContainer a:hover .fa-solid,
.ParentWebpageId22 #portfolioNavigationContainer a:hover .fa-thin,
.ParentWebpageId22 #portfolioNavigationContainer a:hover .fal,
.ParentWebpageId22 #portfolioNavigationContainer a:hover .far,
.ParentWebpageId22 #portfolioNavigationContainer a:hover .fas,
.ParentWebpageId22 #portfolioNavigationContainer a:hover .fat {
    color: #ed028c;
}

figure {
    margin: 0;
}


/* ==========================================================
   Detail Images
   ========================================================== */

#portfolioDetailImagesContainer {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 50px;
}

    #portfolioDetailImagesContainer.imagesPerRowSix {
        gap: 10px;
    }

    #portfolioDetailImagesContainer.imagesPerRowFive {
        gap: 15px;
    }

    #portfolioDetailImagesContainer.imagesPerRowFour,
    #portfolioDetailImagesContainer.imagesPerRowThree,
    #portfolioDetailImagesContainer.imagesPerRowTwo {
        gap: 30px;
    }

    #portfolioDetailImagesContainer.imagesPerRowOne {
        gap: 0;
        row-gap: 30px;
    }

.portfolioPostImageContainer {
    position: relative;
    overflow: hidden;
    width: calc(100% / 4 - (30px / 4 * 3));
    background-color: #fff;
}

.imagesPerRowSix .portfolioPostImageContainer {
    width: calc(100% / 6 - (10px / 6 * 5));
}

.imagesPerRowFive .portfolioPostImageContainer {
    width: calc(100% / 5 - (15px / 5 * 4));
}

.imagesPerRowFour .portfolioPostImageContainer {
    width: calc(100% / 4 - (30px / 4 * 3));
}

.imagesPerRowThree .portfolioPostImageContainer {
    width: calc(100% / 3 - (30px / 3 * 2));
}

.imagesPerRowTwo .portfolioPostImageContainer {
    width: calc(100% / 2 - (30px / 2));
}

.imagesPerRowOne .portfolioPostImageContainer {
    width: 100%;
}

.portfolioPostImageContainer a {
    display: block;
}

.portfolioPostImageContainer img {
    display: block;
    width: 100%;
    max-height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.aspectRatioFormat_Original .portfolioPostImageContainer img {
    width: 100%;
    aspect-ratio: unset;
    object-fit: initial;
}

.aspectRatioFormat_1To1 .portfolioPostImageContainer img {
    aspect-ratio: 1 / 1;
}

.aspectRatioFormat_5To4 .portfolioPostImageContainer img {
    aspect-ratio: 5 / 4;
}

.aspectRatioFormat_4To3 .portfolioPostImageContainer img {
    aspect-ratio: 4 / 3;
}

.aspectRatioFormat_3To2 .portfolioPostImageContainer img {
    aspect-ratio: 3 / 2;
}

.aspectRatioFormat_16To9 .portfolioPostImageContainer img {
    aspect-ratio: 16 / 9;
}

.aspectRatioFormat_3To1 .portfolioPostImageContainer img {
    aspect-ratio: 3 / 1;
}

.aspectRatioFormat_4To5 .portfolioPostImageContainer img {
    aspect-ratio: 4 / 5;
}

.aspectRatioFormat_3To4 .portfolioPostImageContainer img {
    aspect-ratio: 3 / 4;
}

.aspectRatioFormat_2To3 .portfolioPostImageContainer img {
    aspect-ratio: 2 / 3;
}

.aspectRatioFormat_9To16 .portfolioPostImageContainer img {
    aspect-ratio: 9 / 16;
}

.aspectRatioFormat_1To3 .portfolioPostImageContainer img {
    aspect-ratio: 1 / 3;
}

.portfolioPostImageDescription {
    padding: 5px 10px 0 0;
    font-size: 16px;
}

.portfolioPostImageContainer a,
.portfolioPostImageContainer a:visited,
.portfolioPostImageContainer a:hover {
    color: var(--colorMain);
    text-decoration: none;
}


/* ==========================================================
   Share Icons
   ========================================================== */

#portfolioDetailShareIconsContainer {
    margin-top: 30px;
    font-size: 40px;
}

.ParentWebpageId21 #portfolioDetailShareIconsContainer a:hover .fab {
    color: #aa8164;
}

.ParentWebpageId22 #portfolioDetailShareIconsContainer a:hover .fab {
    color: #ed028c;
}


/* ==========================================================
   Detail Responsive
   ========================================================== */

@media screen and (max-width: 1279.9px) {

    #portfolioDetailImagesContainer {
        gap: 20px;
    }

        #portfolioDetailImagesContainer.imagesPerRowSix,
        #portfolioDetailImagesContainer.imagesPerRowFive,
        #portfolioDetailImagesContainer.imagesPerRowFour,
        #portfolioDetailImagesContainer.imagesPerRowThree,
        #portfolioDetailImagesContainer.imagesPerRowTwo {
            gap: 20px;
        }

        #portfolioDetailImagesContainer.imagesPerRowOne {
            gap: 0;
            row-gap: 30px;
        }

    .imagesPerRowSix .portfolioPostImageContainer,
    .imagesPerRowFive .portfolioPostImageContainer {
        width: calc(100% / 4 - (20px / 4 * 3));
    }

    .imagesPerRowFour .portfolioPostImageContainer,
    .imagesPerRowThree .portfolioPostImageContainer {
        width: calc(100% / 3 - (20px / 3 * 2));
    }

    .imagesPerRowTwo .portfolioPostImageContainer {
        width: calc(100% / 2 - (20px / 2));
    }

    .imagesPerRowOne .portfolioPostImageContainer {
        width: 100%;
    }

    .beContainerColumn #portfolioDetailImagesContainer {
        gap: 10px;
    }

    .beContainerColumn .portfolioPostImageContainer {
        width: calc(50% - 5px);
    }
}

@media screen and (max-width: 1023.9px) {

    #portfolioNavigationContainer {
        font-size: 36px;
    }

    #portfolioDetailImagesContainer,
    #portfolioDetailImagesContainer.imagesPerRowSix,
    #portfolioDetailImagesContainer.imagesPerRowFive,
    #portfolioDetailImagesContainer.imagesPerRowFour,
    #portfolioDetailImagesContainer.imagesPerRowThree,
    #portfolioDetailImagesContainer.imagesPerRowTwo {
        gap: 10px;
    }

        #portfolioDetailImagesContainer.imagesPerRowOne {
            gap: 0;
            row-gap: 30px;
        }

    .imagesPerRowSix .portfolioPostImageContainer,
    .imagesPerRowFive .portfolioPostImageContainer {
        width: calc(100% / 3 - (10px / 3 * 2));
    }

    .imagesPerRowFour .portfolioPostImageContainer,
    .imagesPerRowThree .portfolioPostImageContainer,
    .imagesPerRowTwo .portfolioPostImageContainer {
        width: calc(50% - 5px);
    }

    .imagesPerRowOne .portfolioPostImageContainer {
        width: 100%;
    }
}

@media screen and (max-width: 580px) {

    #portfolioNavigationContainer {
        font-size: 32px;
    }

        #portfolioNavigationContainer .fa-bars {
            margin: 0 12px;
        }

    #portfolioDetailImagesContainer {
        display: block;
        margin-top: 30px;
    }

    .portfolioPostImageContainer,
    .imagesPerRowOne .portfolioPostImageContainer,
    .imagesPerRowTwo .portfolioPostImageContainer,
    .imagesPerRowThree .portfolioPostImageContainer,
    .imagesPerRowFour .portfolioPostImageContainer,
    .imagesPerRowFive .portfolioPostImageContainer,
    .imagesPerRowSix .portfolioPostImageContainer {
        width: 100%;
        margin-bottom: 30px;
    }
}