/* =========================================================
   MOIN STUDIO — Original Metis Project Page Option
   V37
   ========================================================= */

/* Keep the original Metis project-page image behavior:
   natural aspect ratio, no forced height, no cropping. */
.moin-original-project-option .item-one-half img,
.moin-original-project-option .project-gallery-image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto !important;
    object-fit: contain;
    object-position: center center;
    transform: none;
}

/* Project information occupies one masonry tile and is shown only once. */
.moin-project-info-tile {
    background: #111;
    color: #f1f1f1;
    min-height: 100%;
    padding: 52px 50px 54px;
    box-sizing: border-box;
}

.moin-project-info-tile h5 {
    color: #fff;
    text-align: center;
    margin: 0 0 14px;
    letter-spacing: 2px;
}

.moin-project-info-tile .moin-option-meta {
    color: #b5b5b5;
    font-family: 'Open Sans', sans-serif;
    font-size: 10px;
    line-height: 18px;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    margin: 0 0 8px;
}

.moin-project-info-tile .moin-option-area {
    color: #b5b5b5;
    font-family: 'Open Sans', sans-serif;
    font-size: 10px;
    line-height: 18px;
    letter-spacing: 2px;
    text-align: center;
    margin: 0 0 34px;
}

.moin-project-info-tile .moin-option-description p {
    color: #f1f1f1;
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    line-height: 24px;
    font-weight: 400;
    text-align: justify;
    text-justify: inter-word;
    margin: 0 0 22px;
    padding: 0;
}

.moin-project-info-tile .moin-option-description p:last-child {
    margin-bottom: 0;
}

/* Hero uses the first project image once; it is not repeated in the masonry gallery. */
.moin-original-project-option .project-top {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

/* Keep original hero hover/scroll behavior and project navigation. */
.moin-original-project-option .project-next-prev {
    position: relative;
    z-index: 5;
}

.moin-original-project-option .project-next-prev .project-prev,
.moin-original-project-option .project-next-prev .project-next {
    cursor: pointer;
}

/* Keep the original parallax layer intact. */
.moin-original-project-option .parallax-project {
    background-image: url('../images/type.png');
    background-repeat: repeat;
    background-attachment: fixed;
}

/* Remove the orange line / theme border under the MOIN logo. */
.moin-original-project-option .cd-header .logo-wrap img,
.moin-original-project-option .footer-img img {
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* Use the exact supplied MOIN logo without distortion. */
.moin-original-project-option .cd-header .logo-wrap img {
    width: 115px !important;
    max-width: 115px !important;
    height: auto !important;
    display: block;
    object-fit: contain;
}

.moin-original-project-option .footer-img img {
    width: 115px !important;
    max-width: 115px !important;
    height: auto !important;
    display: block;
    object-fit: contain;
}

/* Keep V35 dark footer presentation. */
.moin-original-project-option .moin-project-footer .footer.dark-back {
    background: #111 !important;
    color: #fff;
}

.moin-original-project-option .moin-project-footer .footer-copy-text p {
    color: #fff;
}

.moin-original-project-option .moin-project-footer .footer-img {
    border: none !important;
    box-shadow: none !important;
}

/* Remove any footer decorative line inherited from V35. */
.moin-original-project-option .moin-project-footer .footer-line,
.moin-original-project-option .moin-project-footer .footer-img:before,
.moin-original-project-option .moin-project-footer .footer-img:after {
    display: none !important;
}

/* Ensure the masonry container cannot introduce horizontal overflow. */
.moin-original-project-option .gallery-image-wrap {
    width: 100%;
    max-width: 1360px;
    margin: 0 auto;
    overflow: hidden;
}

/* Mobile: one column, natural image height. */
@media only screen and (max-width: 767px) {
    .moin-original-project-option .item-one-half {
        width: 100%;
        float: none;
        border-width: 12px;
    }

    .moin-project-info-tile {
        padding: 36px 26px 40px;
    }

    .moin-original-project-option .project-prev,
    .moin-original-project-option .project-next {
        width: 100%;
        height: 230px;
        float: none;
    }

    .moin-original-project-option .project-prev-empty {
        display: none;
    }

    .moin-original-project-option .project-top .hero-text h5 {
        font-size: 24px;
        line-height: 32px;
    }

    .moin-original-project-option .project-top .hero-subtext-2 {
        font-size: 10px;
        line-height: 18px;
        padding: 0 20px;
        text-align: center;
    }
}


/* =========================================================
   V38 — Project-page header, social media and navigation fix
   ========================================================= */

/* Permanent project-page header: stays visible in both scroll directions. */
.moin-original-project-option .cd-header,
.moin-original-project-option .cd-header.is-fixed,
.moin-original-project-option .cd-header.is-visible,
.moin-original-project-option .cd-header.menu-is-open {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 70px !important;
    min-height: 70px !important;
    padding-top: 0 !important;
    background: #111 !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.18) !important;
    transform: none !important;
    -webkit-transform: none !important;
    z-index: 100000 !important;
}

/* Use the supplied white MOIN logo only on project pages. */
.moin-original-project-option .cd-header .logo-wrap {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    height: 70px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    float: none !important;
}
.moin-original-project-option .cd-header .logo-wrap img {
    content: url('../images/logo-light.png') !important;
    width: 135px !important;
    max-width: 135px !important;
    height: auto !important;
    max-height: 42px !important;
    display: block !important;
    object-fit: contain !important;
    border: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}

/* Project-page social media icons: white, small, and never allowed to grow. */
.moin-original-project-option .social-nav-onepage {
    position: absolute !important;
    right: 20px !important;
    top: 25px !important;
    margin: 0 !important;
    z-index: 100001 !important;
}
.moin-original-project-option .list-social-nav-onepage li {
    width: 30px !important;
    height: 20px !important;
    overflow: hidden !important;
}
.moin-original-project-option .list-social-nav-onepage li.icon-soc-nav-onepage a {
    width: 30px !important;
    height: 20px !important;
    line-height: 20px !important;
    color: #fff !important;
    font-size: 14px !important;
}
.moin-original-project-option .list-social-nav-onepage .social-brand-icon,
.moin-original-project-option .social-nav-onepage img {
    width: 18px !important;
    height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    display: inline-block !important;
    object-fit: contain !important;
    vertical-align: middle !important;
}

/* The supplied white ArchDaily mark is used only on project pages. */
.moin-original-project-option .list-social-nav-onepage img[alt="ArchDaily"],
.moin-original-project-option .social-footer img[alt="ArchDaily"] {
    content: url('../images/arch-logo-white.png') !important;
}

/* Keep the portfolio button below the fixed header, with no overlap. */
.moin-original-project-option a.link-from-project {
    position: fixed !important;
    top: 70px !important;
    left: 0 !important;
    z-index: 100002 !important;
}

/* The parallax layer must never intercept clicks intended for navigation. */
.moin-original-project-option .parallax-project {
    pointer-events: none !important;
    z-index: 1 !important;
}
.moin-original-project-option .project-next-prev {
    position: relative !important;
    z-index: 20 !important;
    pointer-events: auto !important;
    background: #111 !important;
}
.moin-original-project-option .project-next-prev > a {
    position: relative !important;
    z-index: 21 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}
.moin-original-project-option .project-prev,
.moin-original-project-option .project-next {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Restore the original Metis hover animation exactly; V38 only protects it from overlays. */
.moin-original-project-option .project-prev .text,
.moin-original-project-option .project-next .text {
    top: 120% !important;
    margin-top: -28px !important;
    transition: all 200ms linear !important;
    -webkit-transition: all 200ms linear !important;
}
.moin-original-project-option .project-prev:hover .text,
.moin-original-project-option .project-next:hover .text {
    top: 50% !important;
}
.moin-original-project-option .project-prev:hover {
    background-position: center -100% !important;
}
.moin-original-project-option .project-next:hover {
    background-position: center -100% !important;
}

/* Remove every possible orange logo line on project pages. */
.moin-original-project-option .logo-wrap img,
.moin-original-project-option .footer-img img,
.moin-original-project-option .footer-img,
.moin-original-project-option .logo-wrap {
    border: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}

/* Project footer: white MOIN logo + white ArchDaily mark. */
.moin-original-project-option .moin-project-footer .footer-img img {
    content: url('../images/logo-light.png') !important;
    width: 135px !important;
    max-width: 135px !important;
    height: auto !important;
    max-height: 42px !important;
    object-fit: contain !important;
    border: 0 !important;
    box-shadow: none !important;
}
.moin-original-project-option .moin-project-footer .social-brand-icon {
    width: 18px !important;
    height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    object-fit: contain !important;
    vertical-align: middle !important;
}
.moin-original-project-option .moin-project-footer .social-footer img[alt="ArchDaily"] {
    content: url('../images/arch-logo-white.png') !important;
}

@media only screen and (max-width: 767px) {
    .moin-original-project-option .cd-header,
    .moin-original-project-option .cd-header.is-fixed,
    .moin-original-project-option .cd-header.is-visible,
    .moin-original-project-option .cd-header.menu-is-open {
        height: 60px !important;
        min-height: 60px !important;
    }
    .moin-original-project-option .cd-header .logo-wrap {
        height: 60px !important;
    }
    .moin-original-project-option .cd-header .logo-wrap img {
        width: 112px !important;
        max-width: 112px !important;
        max-height: 34px !important;
    }
    .moin-original-project-option .social-nav-onepage {
        top: 20px !important;
        right: 8px !important;
    }
    .moin-original-project-option a.link-from-project {
        top: 60px !important;
    }
}


/* =========================================================
   V39 — FINAL MOIN STUDIO PROJECT-PAGE BRANDING / NAV FIX
   ========================================================= */
.moin-original-project-option .cd-header,
.moin-original-project-option .cd-header.is-fixed,
.moin-original-project-option .cd-header.is-visible,
.moin-original-project-option .cd-header.menu-is-open {
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    width: 100% !important; height: 70px !important; min-height:70px !important;
    background:#111 !important; opacity:1 !important;
    transform:none !important; -webkit-transform:none !important;
    visibility:visible !important; z-index:100000 !important;
}
.moin-original-project-option .cd-header .logo-wrap img {
    content:url('../images/moin-logo-light.png') !important;
    width:135px !important; max-width:135px !important;
    height:auto !important; max-height:42px !important;
    object-fit:contain !important;
    border:0 !important; border-bottom:0 !important; box-shadow:none !important;
}
.moin-original-project-option .moin-project-footer .footer-img img {
    content:url('../images/moin-logo-light.png') !important;
    width:135px !important; max-width:135px !important; height:auto !important; max-height:42px !important;
    object-fit:contain !important; border:0 !important; border-bottom:0 !important; box-shadow:none !important;
}
.moin-original-project-option .logo-wrap img,
.moin-original-project-option .footer-img img,
.moin-original-project-option .footer-img {
    border:0 !important; border-bottom:0 !important; box-shadow:none !important;
}
.moin-original-project-option .social-nav-onepage .social-brand-icon,
.moin-original-project-option .social-footer .social-brand-icon {
    width:18px !important; height:18px !important; max-width:18px !important; max-height:18px !important;
    object-fit:contain !important; display:block !important;
}
.moin-original-project-option .list-social-nav-onepage li a,
.moin-original-project-option .list-social .icon-soc a {
    display:flex !important; align-items:center !important; justify-content:center !important;
}
/* Navigation: anchor itself owns the hover/click area, so the parallax cannot block it. */
.moin-original-project-option .project-next-prev {
    position:relative !important; z-index:100 !important; pointer-events:auto !important; overflow:hidden !important;
}
.moin-original-project-option .project-next-prev > a {
    display:block !important; position:relative !important; float:left !important;
    width:50% !important; height:350px !important; z-index:101 !important;
    pointer-events:auto !important; cursor:pointer !important;
}
.moin-original-project-option .project-next-prev > a:only-child { width:100% !important; }
.moin-original-project-option .project-next-prev > a .project-prev,
.moin-original-project-option .project-next-prev > a .project-next {
    width:100% !important; height:350px !important; float:none !important;
    display:block !important; position:relative !important;
    pointer-events:auto !important; cursor:pointer !important;
}
.moin-original-project-option .project-next-prev > a:hover .text,
.moin-original-project-option .project-prev:hover .text,
.moin-original-project-option .project-next:hover .text {
    top:50% !important;
}
.moin-original-project-option .project-next-prev > a:hover .project-prev,
.moin-original-project-option .project-next-prev > a:hover .project-next {
    background-position:center -100% !important;
}
.moin-original-project-option .parallax-project {
    pointer-events:none !important; z-index:1 !important;
}
/* Keep portfolio control below the fixed header. */
.moin-original-project-option a.link-from-project {
    position:fixed !important; top:70px !important; left:0 !important; z-index:100002 !important;
}
@media only screen and (max-width:767px){
    .moin-original-project-option .cd-header,
    .moin-original-project-option .cd-header.is-fixed,
    .moin-original-project-option .cd-header.is-visible,
    .moin-original-project-option .cd-header.menu-is-open { height:60px !important; min-height:60px !important; }
    .moin-original-project-option .cd-header .logo-wrap { height:60px !important; }
    .moin-original-project-option .cd-header .logo-wrap img { width:112px !important; max-width:112px !important; max-height:34px !important; }
    .moin-original-project-option .project-next-prev > a,
    .moin-original-project-option .project-next-prev > a .project-prev,
    .moin-original-project-option .project-next-prev > a .project-next { width:100% !important; height:230px !important; }
    .moin-original-project-option a.link-from-project { top:60px !important; }
}

/* =========================================================
   V40 — FINAL LOGO / HEADER / SOCIAL-CIRCLE CORRECTIONS
   ========================================================= */
/* Project header follows the original Metis header geometry,
   but remains fixed and uses the supplied light MOIN logo. */
.moin-original-project-option .cd-header,
.moin-original-project-option .cd-header.is-fixed,
.moin-original-project-option .cd-header.is-visible,
.moin-original-project-option .cd-header.menu-is-open {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 70px !important;
    min-height: 70px !important;
    background: rgba(17,17,17,0.94) !important;
    opacity: 1 !important;
    transform: none !important;
    -webkit-transform: none !important;
    visibility: visible !important;
    z-index: 100000 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.20) !important;
}
.moin-original-project-option .cd-header .container,
.moin-original-project-option .cd-header .sixteen.columns {
    position: relative !important;
    height: 70px !important;
    min-height: 70px !important;
}
.moin-original-project-option .cd-header .logo-wrap {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: auto !important;
    height: 70px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}
.moin-original-project-option .cd-header .logo-wrap img {
    content: url('../images/moin-logo-light-final.png') !important;
    width: 120px !important;
    max-width: 120px !important;
    height: auto !important;
    max-height: 38px !important;
    object-fit: contain !important;
    display: block !important;
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* All project-page social marks are optically centered inside equal circles. */
.moin-original-project-option .list-social-nav-onepage,
.moin-original-project-option .social-footer .list-social {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.moin-original-project-option .list-social-nav-onepage li,
.moin-original-project-option .social-footer .list-social li {
    width: 34px !important;
    height: 34px !important;
    margin: 0 5px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}
.moin-original-project-option .list-social-nav-onepage li a,
.moin-original-project-option .social-footer .list-social li a {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid currentColor !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
    overflow: hidden !important;
}
.moin-original-project-option .list-social-nav-onepage .social-brand-icon,
.moin-original-project-option .social-footer .social-brand-icon {
    width: 18px !important;
    height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    object-fit: contain !important;
    object-position: 50% 50% !important;
    flex: 0 0 18px !important;
}
/* Use the normal supplied ArchDaily mark, not the old 28px special asset. */
.moin-original-project-option .list-social-nav-onepage img[alt="ArchDaily"],
.moin-original-project-option .social-footer img[alt="ArchDaily"] {
    content: url('../images/archdaily-white.png') !important;
}

/* No logo underline anywhere on project pages. */
.moin-original-project-option .cd-header .logo-wrap,
.moin-original-project-option .cd-header .logo-wrap img,
.moin-original-project-option .footer-img,
.moin-original-project-option .footer-img img,
.moin-original-project-option .moin-project-footer .footer-img:before,
.moin-original-project-option .moin-project-footer .footer-img:after {
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

@media only screen and (max-width: 767px) {
    .moin-original-project-option .cd-header,
    .moin-original-project-option .cd-header.is-fixed,
    .moin-original-project-option .cd-header.is-visible,
    .moin-original-project-option .cd-header.menu-is-open,
    .moin-original-project-option .cd-header .container,
    .moin-original-project-option .cd-header .sixteen.columns {
        height: 60px !important;
        min-height: 60px !important;
    }
    .moin-original-project-option .cd-header .logo-wrap {
        height: 60px !important;
    }
    .moin-original-project-option .cd-header .logo-wrap img {
        width: 112px !important;
        max-width: 112px !important;
        max-height: 34px !important;
    }
    .moin-original-project-option .list-social-nav-onepage li,
    .moin-original-project-option .social-footer .list-social li,
    .moin-original-project-option .list-social-nav-onepage li a,
    .moin-original-project-option .social-footer .list-social li a {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;
    }
    .moin-original-project-option .list-social-nav-onepage .social-brand-icon,
    .moin-original-project-option .social-footer .social-brand-icon {
        width: 16px !important;
        height: 16px !important;
        max-width: 16px !important;
        max-height: 16px !important;
        flex-basis: 16px !important;
    }
}

/* V40b — keep project header social icons in the original Metis style;
   circular outlines are reserved for footer social media buttons. */
.moin-original-project-option .list-social-nav-onepage li,
.moin-original-project-option .list-social-nav-onepage li a {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
}
.moin-original-project-option .list-social-nav-onepage li a {
    color: #fff !important;
}
.moin-original-project-option .list-social-nav-onepage .social-brand-icon {
    width: 18px !important;
    height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    flex: 0 0 18px !important;
}
/* Footer media buttons are equal circles with optically centered marks. */
.moin-original-project-option .social-footer .list-social li,
.moin-original-project-option .social-footer .list-social li a {
    border-radius: 50% !important;
}

/* =========================================================
   V41 FINAL — PROJECT HEADER LOGO / ORIGINAL HEADER GEOMETRY
   Only overrides the project-page header. All project content,
   gallery, parallax and navigation rules above remain unchanged.
   ========================================================= */

/* Match the original Metis header geometry while keeping the
   requested translucent white header and scroll hide/show behavior. */
.moin-original-project-option .cd-header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 80px !important;
    min-height: 80px !important;
    padding-top: 5px !important;
    background: rgba(247,247,247,0.88) !important;
    opacity: 1 !important;
    transform: translate3d(0,0,0) !important;
    -webkit-transform: translate3d(0,0,0) !important;
    visibility: visible !important;
    z-index: 100000 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.18) !important;
}

/* When menu.js adds is-fixed while scrolling down, the original
   Metis header moves above the viewport. */
@media only screen and (min-width:1170px) {
    .moin-original-project-option .cd-header.is-fixed {
        position: fixed !important;
        top: -80px !important;
        height: 80px !important;
        min-height: 80px !important;
        background: rgba(247,247,247,0.94) !important;
        opacity: 1 !important;
        transform: translate3d(0,0,0) !important;
        -webkit-transform: translate3d(0,0,0) !important;
        transition: transform 0.3s ease !important;
        -webkit-transition: -webkit-transform 0.3s ease !important;
    }

    /* Scrolling upward: menu.js adds is-visible and the header slides down. */
    .moin-original-project-option .cd-header.is-fixed.is-visible {
        transform: translate3d(0,100%,0) !important;
        -webkit-transform: translate3d(0,100%,0) !important;
    }
}

/* Original Metis logo-wrap positioning: float left, no absolute offset. */
.moin-original-project-option .cd-header .logo-wrap {
    position: static !important;
    display: block !important;
    float: left !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: normal !important;
}

/* Use the supplied BLACK MOIN logo in the project header.
   The footer remains controlled by the existing footer rules above. */
.moin-original-project-option .cd-header .logo-wrap img {
    content: url('../images/moin-logo-black-final.png') !important;
    width: 120px !important;
    max-width: 120px !important;
    height: auto !important;
    max-height: none !important;
    display: block !important;
    object-fit: contain !important;
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* Keep the header media marks vertically centered within the
   original 80px header without changing their existing click links. */
.moin-original-project-option .social-nav-onepage {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    height: 80px !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
}

.moin-original-project-option .list-social-nav-onepage {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
}

.moin-original-project-option .list-social-nav-onepage li {
    height: 30px !important;
    margin: 0 0 0 10px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
}

.moin-original-project-option .list-social-nav-onepage li a {
    height: 30px !important;
    line-height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #212121 !important;
}

.moin-original-project-option .list-social-nav-onepage .social-brand-icon {
    width: 18px !important;
    height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    display: block !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin: 0 !important;
}

/* Header uses the black versions on the translucent white bar. */
.moin-original-project-option .list-social-nav-onepage img[alt="LinkedIn"] {
    content: url('../images/linkedin-black.png') !important;
}
.moin-original-project-option .list-social-nav-onepage img[alt="ArchDaily"] {
    content: url('../images/archdaily-black.png') !important;
}
.moin-original-project-option .list-social-nav-onepage img[alt="Instagram"] {
    content: url('../images/instagram-black.png') !important;
}
.moin-original-project-option .list-social-nav-onepage img[alt="Designboom"] {
    content: url('../images/designboom-black.png') !important;
}

/* Keep the portfolio button below the 80px header. */
.moin-original-project-option a.link-from-project {
    top: 100px !important;
}

@media only screen and (max-width:767px) {
    .moin-original-project-option .cd-header,
    .moin-original-project-option .cd-header.is-fixed,
    .moin-original-project-option .cd-header.is-fixed.is-visible,
    .moin-original-project-option .cd-header.is-visible,
    .moin-original-project-option .cd-header.menu-is-open {
        height: 60px !important;
        min-height: 60px !important;
        padding-top: 5px !important;
        top: 0 !important;
        background: rgba(247,247,247,0.94) !important;
    }

    .moin-original-project-option .cd-header .logo-wrap img {
        width: 112px !important;
        max-width: 112px !important;
    }

    .moin-original-project-option .social-nav-onepage {
        height: 60px !important;
        right: 0 !important;
    }

    .moin-original-project-option a.link-from-project {
        top: 80px !important;
    }
}

/* FINAL OVERRIDE: vertically center the project-page header social icons.
   This changes only the media group; all existing header scroll effects remain intact. */
.moin-original-project-option .cd-header .social-nav-onepage {
    position: absolute !important;
    top: 50% !important;
    right: 0 !important;
    left: auto !important;
    width: auto !important;
    height: 30px !important;
    min-height: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    transform: translateY(-50%) !important;
    -webkit-transform: translateY(-50%) !important;
}

.moin-original-project-option .cd-header .list-social-nav-onepage {
    height: 30px !important;
    min-height: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

.moin-original-project-option .cd-header .list-social-nav-onepage li,
.moin-original-project-option .cd-header .list-social-nav-onepage li a {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

.moin-original-project-option .cd-header .list-social-nav-onepage img.social-brand-icon {
    width: 18px !important;
    height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    flex: 0 0 18px !important;
    object-fit: contain !important;
    object-position: 50% 50% !important;
}

@media only screen and (max-width: 767px) {
    .moin-original-project-option .cd-header .social-nav-onepage {
        top: 50% !important;
        right: 0 !important;
        height: 28px !important;
        min-height: 28px !important;
        transform: translateY(-50%) !important;
        -webkit-transform: translateY(-50%) !important;
    }
    .moin-original-project-option .cd-header .list-social-nav-onepage {
        height: 28px !important;
        min-height: 28px !important;
    }
}