/*
Theme Name: Brro Flex Theme
Author: ronaldpostma.com @ Brro.nl
Description: Minimal flexbox-friendly starter theme with assets + templates
Version: 1.0.1
Text Domain: brro-flex-theme
*/

/* ========================================
   GLOBAL STYLES
   ======================================== */

/* CSS Custom Properties (CSS Variables) */
:root {
    --content-max-desk: 1600px;
    --content-max-tab: 1023px;
    --content-max-mob: 767px;
    --gutter-desktop: 0px;
    --gutter-tablet: 0px;
    --gutter-mobile: 0px;
    --def-mob: clamp(309px, calc(28.26vw + 218.28px), 435px) /*320px @ 360 : 435px @ 767*/;
    --small-mob: clamp(290px, calc(19.66vw + 209.24px), 360px);
    --wide-mob: clamp(300px, calc(63.88vw + 90.02px), 580px);
    --pink: #FFAEEF;
    --blue: #1936EF;
    --black: #1d1d1b;
    --trueblack: #000000;
    --white: #FFFFFF;
    --lime: #C9FF00;
    --blacktrans: rgba(0, 0, 0, 0.4);
    --cubix: cubic-bezier(.8, 0, .4, 1);
    --cubixslow: cubic-bezier(.55, 0, 0, 1);
}

/* ========================================
   ANIMATIONS
   ======================================== */
/* Logo letter shake animation */
@keyframes letter-shake-xl {
    0% { transform: rotate(-8deg); }
    50% { transform: rotate(6deg); }
    100% { transform: rotate(-8deg); }
}
@keyframes letter-shake {
    0% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg); }
    100% { transform: rotate(-5deg); }
}
/* Header bottom wrapper animation */
@keyframes brro-fade-in-once {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
/* Project highlight 1 image animation */
@keyframes scale-rotate--minor-continuously {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(.75deg);
    }
    100% {
        transform: rotate(0deg);
    }
}
/* Project highlight 1 eye animation */
@keyframes eye-pupil-move-left-right {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-8px);
    }
    100% {
        transform: translateX(0);
    }
}

/* ========================================
   FONT FACES
   ======================================== */
/**
 * @license
 * MyFonts Webfont Build ID 3867246, 2020-12-16T11:57:38-0500
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed Webfonts(s).
 * 
 * You may obtain a valid license at the URLs below.
 * 
 * Webfont: Hagrid Thin Italic by Zetafonts
 * URL: https://www.myfonts.com/collections/zetafonts-foundry
 
 * © 2025 MyFonts Inc. */
@font-face {
    font-family: "HagridThinItalic";
    src: url('assets/fonts/font.woff2') format('woff2'), url('assets/fonts/font.woff') format('woff'); 
}

/* Colors */
.lime {
    color: var(--lime);
}
.blue {
    color: var(--blue);
}
.black {
    color: var(--black);
}
.trueblack {
    color: var(--trueblack);
}
.pink {
    color: var(--pink);
}
.white {
    color: var(--white);
}
.transparent {
    color: transparent;
}
.hover-lime:hover {
    color: var(--lime) !important;
}
.hover-blue:hover {
    color: var(--blue) !important;
}
.hover-black:hover {
    color: var(--black) !important;
}
.hover-trueblack:hover {
    color: var(--trueblack) !important;
}
.hover-pink:hover {
    color: var(--pink) !important;
}
.hover-white:hover {
    color: var(--white) !important;
}
.hover-transparent:hover {
    color: transparent !important;
}

/* ========================================
   WORDPRESS ADMIN BAR
   ======================================== */

/* Hide all admin bar items by default */
body:not(.webadmin) #wpadminbar li:not(#wp-admin-bar-site-name, #wp-admin-bar-my-account, #wp-admin-bar-logout) {
    display: none !important;
}

/* ========================================
   HTML & BODY STYLES
   ======================================== */

/* Prevent horizontal scrolling */
html {
    overflow-x: hidden !important;
    margin: 0 !important;
}

/* Ensure body has relative positioning for absolute positioned children */
body {
    overflow: hidden;
    position: relative;
    transition: background 250ms var(--cubix);
    margin:0 !important;
}

/* ========================================
   PAGE TRANSITIONS
   ======================================== */
#overlay {
    position: fixed;
    top: -1vh;
    left: -103vw;
    width: 102vw;
    height: 102vh;
    z-index: 9999;
    background: var(--blue);
    }
html:not(.start-load-transition).start-exit-transition #overlay,
html:not(.start-load-transition).finish-transition #overlay {
    transition: left 600ms var(--cubix);
}
html:not(.start-load-transition) main,
html:not(.start-load-transition) header,
html:not(.start-load-transition) footer {
    transition: transform 600ms var(--cubix);
}
html.start-load-transition #overlay,
html.start-exit-transition #overlay {
    left: -1vw;
}
html.start-load-transition main,
html.start-exit-transition main,
html.start-load-transition footer,
html.start-exit-transition footer {
    transform: translateX(101vw);
}
html.start-load-transition header.main-header,
html.start-exit-transition header.main-header {
    transform: translate(101vw, -1000px);
}

/* ========================================
   FORM ELEMENTS
   ======================================== */

/* Remove default search input styling in Chrome */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    filter: grayscale(100%) invert(1) brightness(200%);
}

/* ========================================
   BACKGROUND IMAGE
   ======================================== */

html.min-mode .max-only,
html.max-mode .min-only {
    display: none !important;
}

.min-hidden, .max-hidden { transition: opacity 100ms var(--cubix); }
html.min-mode .min-hidden, html.max-mode .max-hidden { opacity: 0; }
html.min-mode .max-hidden, html.max-mode .min-hidden { opacity: 1; }

.min-hidden-width, .max-hidden-width { transition: opacity 100ms var(--cubix), width 100ms var(--cubix); }
html.min-mode .min-hidden-width, html.max-mode .max-hidden-width { opacity: 0; width: 0; overflow: hidden; }
html.min-mode .max-hidden-width, html.max-mode .min-hidden-width { opacity: 1; width: auto; overflow: visible; }

html.min-mode body {
    background: white;
}
html.max-mode body {
    background: var(--pink);
}

/* ========================================
   RESPONSIVE DISPLAY UTILITIES
   ======================================== */

/* Desktop only (1180px and up) */
@media (min-width: 1180px) {
    .only.desk {
        display: revert !important;
    }
    .only.mob:not(.desk),
    .only.tab:not(.desk) {
        display: none !important;
    }
}

/* Tablet only (768px to 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .only.tab {
        display: revert !important;
    }
    .only.mob:not(.tab),
    .only.desk:not(.tab) {
        display: none !important;
    }
}

/* Mobile only (767px and down) */
@media (max-width: 767px) {
    .only.mob {
        display: revert !important;
    }
    .only.desk:not(.mob),
    .only.tab:not(.mob) {
        display: none !important;
    }
    .def-width-mob {
        width: var(--def-mob)!important;
        margin:0!important;
        box-sizing: border-box;
    }
    .small-width-mob {
        width: var(--small-mob)!important;
        margin:0!important;
        box-sizing: border-box;
    }
    .wide-width-mob {
        width: var(--wide-mob)!important;
        margin:0!important;
        box-sizing: border-box;
    }
}

/* ========================================
   STICKY HEADER 
   ======================================== */

/* Sticky header transition effects */
/* Fixed positioning for sticky header */
header.main-header {
    --min-height: clamp(123px, 12vw, 192px) /*172.79px @ 1440*/;
    --loaded-height: clamp(455px, 44.44vw, 711px); /*640px @ 1440 */
    --scrolled-height: 0px; 
    --slogan-translate: 0px;
    --slogan-display: revert;	
    position: fixed;
    min-height: var(--min-height);
    height: calc(var(--loaded-height) - var(--scrolled-height));
    width: auto;
    transform: translateY(-1000px);
    top: 0;
    left: 0;
    z-index: 9999;
}
@media (min-width: 1601px) {
    header.main-header {
        left: calc((100vw - 1600px) / 2);
    }
}
@media (max-width: 889px) {
    html.min-mode header.main-header {
        height: auto;
    }
}
@media (max-width: 959px) {
    html.max-mode header.main-header {
        height: auto;
    }
}
@media (max-width: 767px) {
    header.main-header {
        width: 100%;
    }
    #max-min-toggle {
        margin-left: 0!important;
        margin-right: 20px;
        margin-top: clamp(24px, calc(-1.97vw + 39.08px), 33px) /*32px @ 360 : 24px @ 767*/!important;
        gap: 4px;
        width: auto!important;
    }
    header.main-header .header-bottom-wrapper {
        transform: translateY(956px)!important;
        width: auto;
    }
}
@media (max-width: 767px) {
    header.main-header #slogan {
        transform: translate(-150px, 50px);
    }
}
@media (max-width: 889px) {
    header.brro-sticky-effects #slogan {
        display: none!important;
    }
}

/* Hidden probe element used for measuring intended header height */
#brro-header-probe {
	position: absolute;
	visibility: hidden;
	pointer-events: none;
	left: -99999px;
	height: 0;
}

@media (min-width: 1601px) {
    header.brro-sticky {
        left: calc((100vw - 1600px) / 2);
    }
}
header.main-header #max-min-toggle,
header.main-header .header-bottom-wrapper {
    transform: translateY(1000px);
}


/* ========================================
   MAX/MIN TOGGLE STYLES
   ======================================== */ 
#max-min-toggle {
    width:clamp(83px, 7.64vw, 122px) /*110px @ 1440*/;
    height: clamp(17px, 1.67vw, 27px) /*24px @ 1440*/;
    margin-top: clamp(32px, 3.13vw, 50px) /*45px @ 1440*/;
    margin-left: clamp(67px, 6.53vw, 104px) /*94px @ 1440*/;
    z-index: 2;
}
@media (max-width: 1023px) {
    #max-min-toggle {
        margin-top: clamp(20px, calc(1.7vw + 6.92px), 27px) /*20px @ 768 : 27px @ 1179*/;
    }
}
#max-min-toggle .toggle-outer {
    width: clamp(32px, 3.13vw, 50px) /*45px @ 1440*/;
    height: clamp(14px, 1.39vw, 22px) /*20px @ 1440*/;
    background-color: var(--blacktrans);
    border-radius: clamp(7px, 0.69vw, 11px) /*10px @ 1440*/;
}
#max-min-toggle .toggle-inner {
    width: clamp(17px, 1.67vw, 27px) /*24px @ 1440*/;
    height: clamp(17px, 1.67vw, 27px) /*24px @ 1440*/;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
    display: inline-block;
    background-color: var(--white);
    border-radius: 50%;
    margin: -2px;
    transition: transform 250ms var(--cubix);
    position: relative;
}
#max-min-toggle .toggle-inner:after {
    content: "of";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-60%, -50%) rotate(0deg);
    color: var(--blacktrans);
}

html.max-mode #max-min-toggle .toggle-inner {
    transform: translateX(clamp(17px, 1.67vw, 27px) /*24px @ 1440*/);
}
#max-min-toggle .toggle:hover .toggle-inner:after {
    color: var(--trueblack);
    transform: translate(-60%, -50%) rotate(360deg)!important;
}
#max-min-toggle .toggle {
    cursor: pointer;
}
html.min-mode #max-min-toggle .max,
html.max-mode #max-min-toggle .min {
    color: var(--blacktrans);
}
html.min-mode #max-min-toggle .min,
html.max-mode #max-min-toggle .max {
    color: var(--trueblack);
}

#max-min-toggle .min,
#max-min-toggle .max,
#max-min-toggle .toggle-inner:after {
    transition: color 250ms var(--cubix);
    transition: transform 400ms var(--cubix);
}

/* ========================================
   HEADER BOTTOM WRAPPER STYLES
   ======================================== */
.home .header-bottom-wrapper {
    opacity: 1;
    animation: brro-fade-in-once 250ms var(--cubix) 1;
}


/* ========================================
   "Alle info" button
   ======================================== */
#info-box {
    cursor: pointer;
    margin-right: clamp(-20px, -1.25vw, -13px) /*-18px @ 1440*/;
    margin-left: clamp(-26px, -1.6vw, -16px) /*-23px @ 1440*/;
}
@media (min-width: 1601px) {
    #info-box {
        transform: translateX(calc(0px - ((100vw - 1600px) / 2)));
    }
}
#info-box .info-box-inner {
    width:clamp(98px, 9.58vw, 153px) /*138px @ 1440*/;
    height: clamp(33px, 3.19vw, 51px) /*46px @ 1440*/;
    padding-left: clamp(28px, 2.78vw, 44px) /*40px @ 1440*/;
    box-sizing: border-box;   
    color:white;
    position: relative;
    z-index: 5;
}
@media (min-width: 1601px) {
    #info-box .info-box-inner {
        padding-left: 38px;
    }
}
#info-box .info-box-inner:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    width: clamp(56px, 5.49vw, 88px) /*79px @ 1440*/;
    height: 100%;
    background: var(--black);
    border-radius: 0 clamp(16px, 1.6vw, 26px) /*23px @ 1440*/ clamp(16px, 1.6vw, 26px) /*23px @ 1440*/ 0;
    z-index: -1;
    transition: width 250ms var(--cubix);
}
#info-box .info-box-inner:hover:after {
    background: var(--blue);
    width: 100%;
}
#info-box.loaded .info-box-inner:after {
    background: var(--blue);
}

#info-box .hide-except-hover {
    opacity: 0;
    visibility: hidden;
    max-width: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 250ms var(--cubix), 
                max-width 250ms var(--cubix), 
                max-height 250ms var(--cubix), 
                visibility 0s linear 250ms;
    display: inline-block;
    vertical-align: middle;
}
#info-box:hover .hide-except-hover,
.start-exit-transition #info-box .hide-except-hover {
    opacity: 1;
    visibility: visible;
    max-width: 100px; /* adjust as needed */
    max-height: 40px; /* adjust as needed */
    transition: opacity 250ms var(--cubix), 
                max-width 250ms var(--cubix), 
                max-height 250ms var(--cubix), 
                visibility 0s;
}

/* ========================================
   LOGO STYLES
   ======================================== */
 header.main-header #logo svg {
    width:clamp(68px, 6.67vw, 107px); /*96px @ 1440*/
    height:clamp(63px, 6.11vw, 98px); /*88px @ 1440*/
    overflow: visible;
 }
 header.main-header #logo svg path {
    transition: fill 250ms var(--cubix);
 }
 header.main-header #logo svg .white {
    fill: #fff;
}
header.main-header #logo svg .trueblack {
    fill: var(--trueblack);
}
html.min-mode header.main-header #logo svg .white.swap-fill {
    fill: var(--trueblack);
}
/* transform-origins for letter groups */
html.max-mode header.main-header #logo svg .letter-shake { 
    animation-name: letter-shake;
    animation-iteration-count: infinite; 
}
html.max-mode header.main-header #logo svg .letter-shake.xl { 
    animation-name: letter-shake-xl; 
}
html.min-mode header.main-header #logo svg .letter-shake { 
    animation: none; 
}
header.main-header #logo svg .letter-shake { 
    transform-box: fill-box; transform-origin: 50% 50%; 
}
header #logo svg .letter-shake:nth-of-type(odd) {
    animation-duration: 240ms!important;
    animation-timing-function: linear!important;
}
header #logo svg .letter-shake:nth-of-type(even) {
    animation-duration: 135ms!important;
    animation-timing-function: var(--cubix)!important;
}

/* ========================================
   SLOGAN STYLES
   ======================================== */
#slogan {
    margin-left: clamp(20px, 1.94vw, 31px) /*28px @ 1440*/;
    transform: translateY(var(--slogan-translate));
    display: var(--slogan-display);
}

/* ========================================
   FOOTER STYLES
   ======================================== */

footer .inner-flex-wrapper {
    background-color: var(--trueblack);
    border-radius: clamp(17px, 1.67vw, 27px) clamp(17px, 1.67vw, 27px) 0 0; /*24px @ 1440*/
    width: clamp(919px, 89.72vw, 1436px) /*1292px @ 1440*/;
}
@media (max-width: 1023px) {
    footer .inner-flex-wrapper {
        width: clamp(728px, calc(74.9vw + 152.75px), 919px) /*728px @ 768 : 919px @ 1023*/
    }
}
@media (max-width: 767px) {
    footer .inner-flex-wrapper {
        width: calc(100% - clamp(8px, calc(5.37vw - 9.18px), 32px))!important;
    }
    footer .footer-about-wrapper {
        width: 100%!important;
    }
    footer .content-wrapper {
        gap:32px;
        padding-left: clamp(17px, calc(7.86vw - 8.3px), 52px) /*20px @ 360 : 52px @ 767*/!important;
        padding-right: clamp(17px, calc(7.86vw - 8.3px), 52px) /*20px @ 360 : 52px @ 767*/!important;
    }
}
footer .inner-flex-wrapper .content-wrapper {
    padding: clamp(37px, 3.61vw, 58px) /*52px @ 1440*/ 
             clamp(39px, 3.82vw, 61px) /*55px @ 1440*/ 
             clamp(37px, 3.61vw, 58px) /*52px @ 1440*/ 
             clamp(46px, 4.44vw, 71px) /*64px @ 1440*/;
}
footer .footer-about-wrapper {
    width: clamp(341px, 33.33vw, 533px) /*480px @ 1440*/;
}


.secondary-nav ul {
    margin:0;
    padding:0;
}
.secondary-nav li {
    list-style: none;
    display: block;
}
.secondary-nav li:not(:last-of-type) {
    margin-bottom: clamp(14px, 1.39vw, 22px) /*20px @ 1440*/;
}


/* Back to top button - hidden state */
#to-top.not-to-top {
    z-index: -1;
    pointer-events: none;
    opacity: 0;
}

/* Back to top button - base styles */
#to-top {
    transition: all 600ms ease;
    position: fixed;
    right: 12px;
    bottom: 12px;
    z-index: 9999;
}

/* Back to top button - hover effect */
#to-top:hover {
    transform: translateY(-12px);
}

/* Page top anchor for smooth scrolling */
#page-top {
    width: 100%;
    position: absolute;
    height: 1px;
    margin-bottom: -1px;
    top: -1px;
}

/* ========================================
   TEXT & LINK STYLES
   ======================================== */

p {
    margin-block-start: 0;
    margin-block-end: clamp(20px, 1.94vw, 31px) /*28px @ 1440*/;
}
p:last-of-type {
    margin-block-end: 0;
}

h1,h2,h3,h4,h5,h6 {
    margin-block-start: 0;
    margin-block-end: 0;
}

/* Active navigation link styling */
.current-section-visible {
    color: var(--lime) !important;
}
.project-text a {
    color: var(--trueblack) !important;
}
a {
    transition: color 250ms var(--cubix);
}
a:not(.underline) {
    text-decoration: none;
}
.underline,
.project-text a {
    text-decoration: underline;
    text-underline-offset: clamp(4px, 0.35vw, 6px) /*5px @ 1440*/;
    text-decoration-thickness: clamp(2px, 0.17vw, 3px) /*2.5px @ 1440*/;
}
.hover-underline:hover,
button:hover .button-text,
a.button:hover .button-text {
    text-decoration: underline;
    text-underline-offset: clamp(4px, 0.35vw, 6px) /*5px @ 1440*/;
    text-decoration-thickness: clamp(2px, 0.17vw, 3px) /*2.5px @ 1440*/;
}
.small-underline,
button .button-text,
a.button .button-text,
.project-text a {
    text-underline-offset: 2.5px!important;
    text-decoration-thickness: 1px!important;
}
#info-box:hover .info-underline {
    text-decoration-color: var(--white)!important;
}
#back:hover .info-underline {
    text-decoration-color: var(--lime)!important;
}
.project-text a:hover {
    color: var(--blue) !important;
}
.max-mode button:hover .button-text,
.max-mode a.button:hover .button-text {
    text-decoration-color: var(--trueblack)!important;
}
.min-mode button:hover .button-text,
.min-mode a.button:hover .button-text {
    text-decoration-color: var(--white)!important;
}
#info-box .info-underline,
button .button-text,
a.button .button-text {
    text-decoration-color: transparent!important;
}
#info-box .info-underline,
#back:hover .info-underline {
    text-decoration: underline;
    text-underline-offset: 2.5px!important;
    text-decoration-thickness: 1px!important;
}

/* Hagrid font */
.hagrid {
    font-family: "HagridThinItalic", sans-serif;;
    font-weight: 100;
}

/* Acumin font */
.acumin,
button,
a.button {
    font-family: "acumin-pro", sans-serif;
    font-style: normal;
}
.extra-light {
    font-weight: 200;
}
.light {
    font-weight: 300;
}
.regular {
    font-weight: 400;
}
.medium,
button,
a.button {
    font-weight: 500;
}
.semibold,
.acumin strong,
strong.acumin,
.acumin b,
b.acumin {
    font-weight: 600;
}
.bold {
    font-weight: 700;
}

/* Size pairings */
.size-80-80 {
    font-size: clamp(57px, 5.56vw, 89px) /*80px @ 1440*/;
    line-height: clamp(57px, 5.56vw, 89px) /*80px @ 1440*/;
}
@media (max-width: 767px) {
    .size-80-80 {
        font-size: clamp(34px, calc(5.16vw + 17.43px), 57px) /*36px @ 360 : 57px @ 767*/!important;
        line-height: clamp(34px, calc(5.16vw + 17.43px), 57px) /*36px @ 360 : 57px @ 767*/!important;
    }
}

.size-50-50--1 {
    font-size: clamp(36px, 3.47vw, 56px) /*50px @ 1440*/;
    line-height: clamp(36px, 3.47vw, 56px) /*50px @ 1440*/;
    letter-spacing: calc( clamp(36px, 3.47vw, 56px) / 100) /* 1% */;
}

.size-50-60--1 {
    font-size: clamp(36px, 3.47vw, 56px) /*50px @ 1440*/;
    line-height: clamp(43px, 4.17vw, 67px) /*60px @ 1440*/;
    letter-spacing: calc( clamp(36px, 3.47vw, 56px) / 100) /* 1% */;
}
@media (max-width: 767px) {
    .size-50-60--1 {
        font-size: clamp(32px, calc(0.98vw + 28.46px), 36px) /*32px @ 360 : 36px @ 767*/;
        line-height: clamp(36px, calc(1.47vw + 31.69px), 43px) /*37px @ 360 : 43px @ 767*/;
        letter-spacing: calc( clamp(32px, calc(0.98vw + 28.46px), 36px) / 100) /* 1% */;
    }
}

.size-37-49 {
    font-size: clamp(26px, 2.57vw, 41px) /*37px @ 1440*/;
    line-height: clamp(35px, 3.4vw, 54px) /*49px @ 1440*/;
}
@media (max-width: 767px) {
    .size-37-49 {
        font-size: clamp(19px, calc(1.47vw + 14.69px), 26px) /*20px @ 360 : 26px @ 767*/;
        line-height: clamp(28px, calc(1.47vw + 23.69px), 35px) /*29px @ 360 : 35px @ 767*/;
    }
}

.size-26-36 {
    font-size: clamp(18px, 1.81vw, 29px) /*26px @ 1440*/;
    line-height: clamp(26px, 2.5vw, 40px) /*36px @ 1440*/;
}

.size-22-24 {
    font-size: clamp(16px, 1.53vw, 24px) /*22px @ 1440*/;
    line-height: clamp(17px, 1.67vw, 27px) /*24px @ 1440*/;
}

.size-20-30,
button,
a.button {
    font-size: clamp(14px, 1.39vw, 22px) /*20px @ 1440*/;
    line-height: clamp(21px, 2.08vw, 33px) /*30px @ 1440*/;
}

.size-18-20 {
    font-size: clamp(13px, 1.25vw, 20px) /*18px @ 1440*/;
    line-height:clamp(14px, 1.39vw, 22px) /*20px @ 1440*/;
}

.size-18-30 {
    font-size: clamp(13px, 1.25vw, 20px) /*18px @ 1440*/;
    line-height: clamp(21px, 2.08vw, 33px) /*30px @ 1440*/;
}

.size-13 {
    font-size: clamp(11px, 0.9vw, 14px) /*13px @ 1440*/;
    line-height: 100%;
}

/* ========================================
   BORDERS, RADIUS, ETC
   ======================================== */

.radius-20 {
    border-radius: clamp(14px, 1.39vw, 22px) /*20px @ 1440*/;
}


/* ========================================
   BUTTONS
   ======================================== */

button,
a.button {
    position: relative;
    padding: clamp(9px, 0.83vw, 13px) /*12px @ 1440*/
             clamp(20px, 1.81vw, 29px) /*28px @ 1440*/
             clamp(11px, 1.04vw, 17px) /*15px @ 1440*/
             clamp(17px, 1.67vw, 27px) /*24px @ 1440*/;
    border: clamp(2px, 0.21vw, 3px) /*3px @ 1440*/ solid var(--trueblack);
    border-radius: clamp(3px, 0.28vw, 4px) /*4px @ 1440*/;
    transition: background 250ms ease-in-out;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    cursor: pointer;
}
.button-text {
    text-align: left;
}
.max-mode button:has(.button-icon),
.max-mode a.button:has(.button-icon) {
    padding-right: clamp(14px, 1.39vw, 22px) /*20px @ 1440*/;
}
.max-mode button span.button-icon,
.max-mode a.button span.button-icon {
    line-height: 0;
    margin-left: clamp(13px, 1.25vw, 20px) /*18px @ 1440*/;
}
.min-mode button,
.min-mode a.button {
    background: var(--trueblack);
    color: var(--white);
}
.max-mode button,
.max-mode a.button {
    background: var(--white);
    color: var(--trueblack);
}

/* ============================================================================================================
                                            FRONT PAGE
   ============================================================================================================ */

.home .project-highlights-wrapper {
    margin-bottom: clamp(153px, 14.93vw, 239px) /*215px @ 1440*/;
}

/* ========================================
   BACKGROUND BLURS
   ======================================== */

.background-blur-wrapper {
    position: absolute;
    pointer-events: none;
    z-index: -1;
    transition: opacity 900ms ease-in-out;
    transform: translate3d(0, 0, 0);
    filter: blur(clamp(74px, 7.22vw, 116px) /*104px @ 1440*/);
    will-change: transform;
    overflow: hidden;
}
.background-blur-wrapper img {  
    object-fit: cover;
    width: 100%;
    height: 100%;
    transform-origin: 50% 50%;
    will-change: transform;
    animation: left-to-right 5s ease-in-out infinite;
}
@keyframes left-to-right {
    0%,100% { transform: translateX(0); }
    50%     { transform: translateX(-200px); }
}
.min-mode .background-blur-wrapper {
    opacity: 0;
}
#background-blur-pink {
    top: clamp(-129px, -12.64vw, -149px) /*-182px @ 1440*/;
    left: clamp(-281px, -27.43vw, -324px) /*-395px @ 1440*/;
    width: clamp(924px, 90.28vw, 1444px) /*1300px @ 1440*/;
    height: clamp(604px, 59.03vw, 944px) /*850px @ 1440*/;
}
#background-blur-blue {
    top: clamp(599px, 58.54vw, 937px) /*843px @ 1440*/;
    right: clamp(-57px, -5.56vw, -66px) /*-80px @ 1440*/;
    width: clamp(997px, 97.43vw, 1559px) /*1403px @ 1440*/;
    height: clamp(498px, 48.68vw, 779px) /*701px @ 1440*/;
    animation-delay: 500ms;
}
#background-blur-orange {
    top: clamp(1209px, 118.06vw, 1889px) /*1700px @ 1440*/;
    left: clamp(-145px, -14.17vw, -167px) /*-204px @ 1440*/;
    width: clamp(1422px, 138.89vw, 2222px) /*2000px @ 1440*/;
    height: clamp(995px, 97.22vw, 1556px) /*1400px @ 1440*/;
    animation-delay: 1000ms;
}


/* ========================================
   HERO STYLES
   ======================================== */
#hero {
    max-height: clamp(634px, 61.88vw, 990px) /*891px @ 1440*/;
    position: relative;
    z-index: 2; /* Keep overlapping project artwork behind the hero slogan. */
}
@media (min-width: 768px) {
    #hero {
        min-height: 629px;
    }
}
@media (max-width: 767px) {
    #hero {
        min-height: 375px;
    }
    .hero-slogan {
        padding-bottom: 48px!important;
    }
}
.hero-slogan {
    text-align: right;
    color: var(--trueblack);
    letter-spacing: -2px;
    padding-bottom: clamp(71px, 6.94vw, 111px) /*100px @ 1440*/;
    margin-bottom: 0;
}
.slogan-line {
    display: block;
    margin:0!important;
}
@media (min-width: 1024px) {
    html.max-mode .slogan-line {
        max-height: clamp(119px, 11.67vw, 187px) /*168px @ 1440*/;
    }
    html.min-mode .slogan-line {
        max-height: clamp(123px, 12.01vw, 192px) /*173px @ 1440*/;
    }
}

.hero-slogan-button {
    display: inline-block;
    position: relative;
    line-height: 0;
    font-size: 0;
    vertical-align:baseline;
}
.hero-slogan img {
    border-radius: clamp(12px, 1.18vw, 19px) /*17px @ 1440*/;
    width: clamp(82px, 7.99vw, 128px) /*115px @ 1440*/;
    height: clamp(84px, 8.19vw, 131px) /*118px @ 1440*/;
    margin: 0 clamp(14px, 1.39vw, 22px) /*20px @ 1440*/;
    object-fit: cover;
    transition: transform 150ms cubic-bezier(0.18, 0.92, 0.24, 1.34);
    line-height: 0;
}
html.max-mode .hero-slogan img {
    box-shadow: 11px 11px 44px 0px #00000040;
}
html.max-mode .hero-slogan .hero-slogan-button:hover img {
    transform: rotate(-9deg);
}
.hero-slogan button {
    position: absolute;
    display: inline!important;
    inset: 0;
    width: 100%;
    height: 100%;
    min-width: clamp(110px, 10.76vw, 172px) /*155px @ 1440*/;
    border:0!important;
    background: transparent!important;
    padding:0!important;
    border-radius: 0!important;
    line-height: 0!important;
}


html.min-mode .hero-slogan {
    font-family: "acumin-pro", sans-serif;
    font-style: normal;
    font-weight: 200;
    font-size: clamp(161px, 15.69vw, 251px) /*226px @ 1440*/;
    line-height: clamp(123px, 12.01vw, 192px) /*173px @ 1440*/;
    margin-top: clamp(-40px, -2.5vw, -26px) /*-36px @ 1440*/;
    margin-right: clamp(-17px, -1.04vw, -11px) /*-15px @ 1440*/;
}
html.max-mode .hero-slogan {
    font-family: "HagridThinItalic", sans-serif;
    font-weight: 100;
    font-size: clamp(143px, 13.96vw, 223px) /*201px @ 1440*/;
    line-height: clamp(119px, 11.67vw, 187px) /*168px @ 1440*/;
    letter-spacing: clamp(-7px, -0.42vw, -4px) /*-6px @ 1440*/;
    margin-top: clamp(-39px, -2.43vw, -25px) /*-35px @ 1440*/;
    margin-right: clamp(-6px, -0.35vw, -4px) /*-5px @ 1440*/;
}
@media (max-width: 1023px) {
    html.min-mode .hero-slogan {
        font-size: clamp(128px, calc(12.94vw + 28.61px), 161px) /*128px @ 768 : 161px @ 1023*/;
        line-height: clamp(98px, calc(9.8vw + 22.71px), 123px) /*98px @ 768 : 123px @ 1023*/;
        margin-top: clamp(-26px, calc(-22.75vw + 206.68px), 32px) /*32px @ 768 : -26px @ 1023*/;
    }
    html.max-mode .hero-slogan {
        font-size: clamp(114px, calc(11.37vw + 26.66px), 143px) /*114px @ 768 : 143px @ 1023*/;
        line-height: clamp(95px, calc(9.41vw + 22.72px), 119px) /*95px @ 768 : 119px @ 1023*/;
        margin-top: clamp(-26px, calc(-18.04vw + 158.54px), 20px) /*20px @ 768 : -26px @ 1023*/;
    }
    html.max-mode .slogan-line {
        max-height: clamp(95px, calc(9.41vw + 22.72px), 119px) /*95px @ 768 : 119px @ 1023*/;
    }
    html.min-mode .slogan-line {
        max-height: clamp(98px, calc(9.8vw + 22.71px), 123px) /*98px @ 768 : 123px @ 1023*/;
    }
    .hero-slogan button {
        min-width: clamp(100px, calc(3.92vw + 69.88px), 110px) /*100px @ 768 : 110px @ 1023*/;
        transform: translate(clamp(3px, 0.28vw, 4px), clamp(37px, calc(5.49vw - 5.16px), 51px)) rotate(0deg);
    }
    html.max-mode .hero-slogan button:hover {
        transform: translate(clamp(14px, 1.39vw, 22px), clamp(37px, calc(5.49vw - 5.16px), 51px)) rotate(-9deg);
    }
    .hero-slogan img {
        width:clamp(72px, calc(3.92vw + 41.88px), 82px) /*72px @ 768 : 82px @ 1023*/;
        height:clamp(74px, calc(3.92vw + 43.88px), 84px) /*74px @ 768 : 84px @ 1023*/;
    }
    .hero-slogan {
        padding-bottom: clamp(48px, calc(9.02vw - 21.27px), 71px) /*48px @ 768 : 71px @ 1023*/!important;
    }
}
@media (max-width: 767px) {
    html.min-mode .hero-slogan {
        font-size: clamp(51px, calc(16.95vw - 3.03px), 127px) /*58px @ 360 : 127px @ 767*/;
        line-height: clamp(33px, calc(14vw - 11.42px), 96px) /*39px @ 360 : 96px @ 767*/;
        margin-top: clamp(48px, calc(-5.41vw + 89.46px), 72px) /*70px @ 360 : 48px @ 767*/;
        margin-right: 0;
    }
    html.max-mode .hero-slogan {
        font-size: clamp(46px, calc(14.99vw - 1.96px), 113px) /*52px @ 360 : 113px @ 767*/;
        line-height: clamp(38px, calc(12.66vw - 2.13px), 95px) /*43.46px @ 360 : 95px @ 767*/;
        margin-top: clamp(48px, calc(-5.41vw + 89.46px), 72px) /*70px @ 360 : 48px @ 767*/;
        margin-right: 0;
    }
    html.max-mode .slogan-line {
        max-height: clamp(38px, calc(12.66vw - 2.13px), 95px) /*43.46px @ 360 : 95px @ 767*/;
    }
    html.min-mode .slogan-line {
        max-height: clamp(33px, calc(14vw - 11.42px), 96px) /*39px @ 360 : 96px @ 767*/;
    }
    .hero-slogan button {
        min-width: clamp(66px, calc(7.62vw + 41.58px), 100px) /*69px @ 360 : 100px @ 767*/;
        transform: translate(clamp(3px, 0.28vw, 4px), clamp(11px, calc(5.9vw - 8.23px), 37px)) rotate(0deg);
    }
    html.max-mode .hero-slogan button:hover {
        transform: translate(clamp(14px, 1.39vw, 22px), clamp(11px, calc(5.9vw - 8.23px), 37px)) rotate(-9deg);
    }
    .hero-slogan img {
        width:clamp(41px, calc(6.88vw + 19.23px), 72px) /*44px @ 360 : 72px @ 767*/;
        height:clamp(33px, calc(9.09vw + 4.27px), 74px) /*37px @ 360 : 74px @ 767*/;
        margin: 0 clamp(9px, calc(2.46vw + 1.15px), 20px) /*10px @ 360 : 20px @ 767*/;
    }

}
/* ========================================
   DESK COLUMN STYLES
   ======================================== */
.desk-left-column {
    width: 49.5%;
}
.desk-right-column {
    width: 50.5%;
}

/* ========================================
   INTRO TEXTS
   ======================================== */
html.max-mode .intro-text {
    font-weight: 300; 

}
html.min-mode .intro-text {
    font-weight: 400; 

}
#text-sm-1 {
    width: clamp(396px, 39.03vw, 624px) /*562px @ 1440*/;
    margin-left: clamp(36px, 3.54vw, 57px) /*51px @ 1440*/;
    margin-top: clamp(68px, 6.67vw, 107px) /*96px @ 1440*/;
}
#text-sm-2 {
    width: clamp(341px, 33.33vw, 533px) /*480px @ 1440*/;
    margin-left: clamp(112px, 10.9vw, 174px) /*157px @ 1440*/;
    margin-top: clamp(76px, 7.43vw, 119px) /*107px @ 1440*/;
}

/* ========================================
   PROJECT HIGHLIGHT COMMON STYLES
   ======================================== */

.project-highlight {
    box-sizing: border-box;
    position: relative;
}
html.min-mode .project-highlight {
    overflow: hidden;
}
.project-highlight img {
    position: absolute;
}
.project-highlight img.min,
#cta_overons img.over-ons-effect,
#kosmos img.max-only:not(.kosm-polygon) {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover;
    top: 0;
    left: 0;
}

/* ========================================
   PROJECT HIGHLIGHT 1 // NME
   ======================================== */

#nme {
    width: clamp(400px, 33.82vw, 542px) /*487px @ 1440*/;
    height: clamp(518px, 43.82vw, 702px) /*631px @ 1440*/;
    margin-left: clamp(58px, 4.86vw, 78px) /*70px @ 1440*/;
    margin-bottom: clamp(30px, 2.5vw, 40px) /*36px @ 1440*/;
    padding: 0 0 clamp(114px, 9.65vw, 154px) /*139px @ 1440*/ clamp(25px, 2.08vw, 34px) /*30px @ 1440*/;
}
#nme .project-image {
    width: clamp(627px, 53.13vw, 850px) /*765px @ 1440*/;
    max-width: none;
    height: auto;
    top: clamp(-185px, -11.6vw, -136px) /*-167px @ 1440*/;
    left: clamp(-154px, -9.65vw, -113px) /*-139px @ 1440*/;
    z-index: 0;
    animation: nme-spin-with-pause 6600ms ease-in-out infinite;
    animation-play-state: paused;
    transform-origin: 50% 50%;
    will-change: transform;
}
#nme button {
    z-index: 1;
}
html.max-mode #nme {
    width: clamp(500px, 42.36vw, 678px) /*610px @ 1440*/;
    margin-left: clamp(82px, 6.94vw, 112px) /*100px @ 1440*/;
    margin-top: clamp(-110px, -6.88vw, -81px) /*-99px @ 1440*/;
    margin-bottom: clamp(112px, 9.51vw, 152px) /*137px @ 1440*/;
    padding: 0 0 clamp(32px, 2.64vw, 43px) /*38px @ 1440*/ 0;
}
html.max-mode #nme .project-image {
    width: clamp(500px, 42.36vw, 678px) /*610px @ 1440*/;
    top: 0;
    left: 0;
    animation-play-state: running;
}
#nme button span.button-icon svg {
    width: clamp(40px, 3.89vw, 63px) /*56px @ 1440*/;
    height: clamp(40px, 3.89vw, 63px) /*56px @ 1440*/;
}
@keyframes nme-spin-with-pause {
    0% {
        transform: rotate(0deg);
    }
    9.09% {
        transform: rotate(360deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* ========================================
   PROJECT HIGHLIGHT 2 // Plastic Soep
   ======================================== */
#plasticsoep {
    width: clamp(348px, 35.28vw, 564px) /*508px @ 1440*/;
    height: clamp(348px, 35.28vw, 564px) /*508px @ 1440*/;
    margin-left: clamp(71px, 6.94vw, 111px) /*100px @ 1440*/;
    padding: 0 0 clamp(34px, 3.33vw, 53px) /*48px @ 1440*/ clamp(101px, 9.86vw, 158px) /*142px @ 1440*/;
}
#plasticsoep .project-image {
    max-width: clamp(516px, 50.42vw, 807px) /*726px @ 1440*/;
    width: clamp(516px, 50.42vw, 807px) /*726px @ 1440*/;
    top: clamp(-83px, -8.06vw, -95px) /*-116px @ 1440*/;
    right: clamp(23px, 2.22vw, 36px) /*32px @ 1440*/;
    z-index: 0;
}
#plasticsoep .project-image {
    animation: scale-rotate--minor-continuously 4000ms ease infinite;
    will-change: transform;
}
html.min-mode #plasticsoep .project-image {
    animation-play-state: paused;
}
#plasticsoep button span.button-icon svg {
    width: clamp(28px, 2.78vw, 44px) /*40px @ 1440*/;
    height: clamp(18px, 1.81vw, 29px) /*26px @ 1440*/;
}
#plasticsoep button span.button-icon svg #eye-pupil,
#plasticsoep button span.button-icon svg #eye-sparkle {
    animation: eye-pupil-move-left-right 4s ease infinite;
}
#plasticsoep button:hover span.button-icon svg #eye-pupil,
#plasticsoep button:hover span.button-icon svg #eye-sparkle {
    animation:none!important;
}
#plasticsoep button:hover span.button-icon svg #eye-pupil {
    transform: translateX(-4px)!important;
}
#plasticsoep button:hover span.button-icon svg #eye-sparkle  {
    transform: translate(-4px, 4px);
}

#plasticsoep button span.button-icon svg #eye-lid  {
    transition: opacity 50ms ease-in-out!important;
}
#plasticsoep button:hover span.button-icon svg #eye-lid  {
    opacity: 0!important;
}


/* ========================================
   PROJECT HIGHLIGHT 3 // Uitjezorg
   ======================================== */
#uitjezorg {
    width: clamp(330px, 38.75vw, 620px) /*558px @ 1440*/;
    height: clamp(536px, 52.36vw, 838px) /*754px @ 1440*/;
    margin-left: clamp(36px, 3.47vw, 56px) /*50px @ 1440*/;
    padding: 0 clamp(33px, 3.19vw, 51px) /*46px @ 1440*/ clamp(36px, 3.47vw, 56px) /*50px @ 1440*/ 0;
    margin-top: clamp(129px, 12.57vw, 201px) /*181px @ 1440*/;
}
html.max-mode #uitjezorg {
    height: clamp(485px, 47.36vw, 758px) /*682px @ 1440*/;
    margin-top: clamp(180px, 17.57vw, 281px) /*253px @ 1440*/;
    background-color: #C88B8C;
    overflow: hidden;
}
html.max-mode #uitjezorg:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 700%;
    background: linear-gradient(180deg, transparent 19.71%, #264B5E 37.5%, transparent 51.92%, transparent 60.58%, #264B5E 69.71%, transparent 77.4%);
    animation: gradient-scroll 10s linear infinite;
}
@keyframes gradient-scroll {
    0% {
        top: 0;
    }
    100% {
        top: -700%;
    }
}
#uitjezorg img.max-only {
    width: clamp(90px, 8.82vw, 141px) /*127px @ 1440*/!important;
    max-width: none!important;
    height: auto!important;
    top: clamp(94px, 9.17vw, 147px)!important; /*132px @ 1440*/
    left: 50%;
    transform: translateX(-50%);
}

/* ========================================
   PROJECT HIGHLIGHT 4 // Archief
   ======================================== */
#nharchief {
    width: clamp(350px, 35.35vw, 566px) /*509px @ 1440*/;
    height: clamp(398px, 38.82vw, 621px) /*559px @ 1440*/;
    padding: 0 0 clamp(33px, 3.19vw, 51px) /*46px @ 1440*/ clamp(36px, 3.47vw, 56px) /*50px @ 1440*/;
    margin-top: clamp(63px, 6.11vw, 98px) /*88px @ 1440*/;
}
#nharchief img.min {
    width: clamp(606px, 59.17vw, 946px)!important; /*851px @ 1440*/
    max-width: none!important;
    height: auto!important;
    top: clamp(-336px, -20.97vw, -215px)!important; /*-302px @ 1440*/
    left: clamp(-107px, -6.67vw, -68px)!important; /*-96px @ 1440*/
}
#nharchief img.max-only {
    width: clamp(459px, 44.86vw, 718px) /*646px @ 1440*/;
    max-width: none!important;
    height: auto!important;
    top: clamp(-20px, -1.25vw, -13px)!important; /*-18px @ 1440*/
    left: clamp(95px, 9.24vw, 148px)!important; /*133px @ 1440*/
}
#nharchief button span.button-icon svg {
    width: clamp(28px, 2.78vw, 44px) /*40px @ 1440*/;
    height: clamp(19px, 1.81vw, 29px) /*26px @ 1440*/;
}
#nharchief button .button-icon #eye-pupil-group {
    transform: translateY(-7px);
    animation: eye-pupil-bounce 1200ms var(--cubix) infinite;
}
#nharchief button .button-icon {
    transform: scaleY(.9) translateY(clamp(14px, 1.39vw, 22px)); /*20px @ 1440*/
    animation: eye-bounce 1200ms infinite;
}

@keyframes eye-pupil-bounce {
    0% {
        transform: translateY(-7px);
        animation-timing-function: cubic-bezier(0.01, 1.02, 1, 1); /* ease-in - slow start, fast end */
    }
    45% {
        transform: translateY(-1px);
        animation-timing-function: cubic-bezier(0.01, 1.02, 1, 1);
    }
    50%, 55% {
        transform: translateY(-1px);
        animation-timing-function: cubic-bezier(0, -0.03, 0.98, -0.08); /* ease-out - fast start, slow end */
    }
    100% {
        transform: translateY(-7px);
    }
}
@keyframes eye-bounce {
    0% {
        transform: scaleY(.9) translateY(clamp(14px, 1.39vw, 22px)); /*20px @ 1440*/
        animation-timing-function: cubic-bezier(0.01, 1.02, 1, 1); /* ease-in - slow start, fast end */
    }
    45% {
        transform: scaleY(1) translateY(clamp(-7px, -0.69vw, -8px)); /*-10px @ 1440*/
        animation-timing-function: cubic-bezier(0.01, 1.02, 1, 1);
    }
    50%, 55% {
        transform: scaleY(1) translateY(clamp(-7px, -0.69vw, -8px)); /*-10px @ 1440 - pause at bottom */
        animation-timing-function: cubic-bezier(0, -0.03, 0.98, -0.08); /* ease-out - fast start, slow end */
    }
    100% {
        transform: scaleY(.9) translateY(clamp(14px, 1.39vw, 22px)); /*20px @ 1440*/
    }
}
/* ========================================
   PROJECT HIGHLIGHT 5 // Compostier
   ======================================== */

#compostier {
    width: clamp(472px, 46.04vw, 737px) /*663px @ 1440*/;
    height: clamp(278px, 27.15vw, 434px) /*391px @ 1440*/;
    padding: 0 0 clamp(33px, 3.19vw, 51px) /*46px @ 1440*/ clamp(38px, 3.75vw, 60px) /*54px @ 1440*/;
    margin-top: clamp(85px, 8.26vw, 132px) /*119px @ 1440*/;
}
#compostier img.max-only {
    width: clamp(384px, 37.5vw, 600px)!important; /*540px @ 1440*/
    max-width: none!important;
    height: auto!important;
    top: clamp(-20px, -1.25vw, -13px)!important; /*-18px @ 1440*/
    left: clamp(63px, 6.11vw, 98px)!important; /*88px @ 1440*/
}
.comp-rectangle {
    position: absolute;
    left: clamp(122px, 11.94vw, 191px)!important; /*172px @ 1440*/
    top: clamp(38px, 3.68vw, 59px)!important;  /*53px @ 1440*/
    box-sizing: border-box;
    display: block;
    width: clamp(272px, 26.53vw, 424px) /*382px @ 1440*/;
    height: clamp(267px, 26.11vw, 418px) /*376px @ 1440*/;
    border-radius: clamp(12px, 1.18vw, 19px) /*17px @ 1440*/;
    border: clamp(2px, 0.21vw, 3px) /*3px @ 1440*/ solid var(--trueblack);
    background: #35C0A5;
    will-change: transform, background-color;
}
.rectangle-1 {
    animation: background-color-rotation 2400ms ease-in-out infinite;
}
.rectangle-2 {
    animation: background-color-rotation 2400ms ease-in-out infinite,
               unfold-2 2400ms linear infinite;
    transform: translate(clamp(-22px, -1.39vw, -14px) /*-20px @ 1440*/, clamp(14px, 1.39vw, 22px) /*20px @ 1440*/);
}
.rectangle-3 {
    animation: background-color-rotation 2400ms ease-in-out infinite, 
               unfold-3 2400ms linear infinite;
    transform: translate(clamp(-44px, -2.78vw, -28px) /*-40px @ 1440*/, clamp(28px, 2.78vw, 44px) /*40px @ 1440*/);
}
.rectangle-4 {
    animation: background-color-rotation 2400ms ease-in-out infinite, 
               unfold-4 2400ms linear infinite;
    transform: translate(clamp(-67px, -4.17vw, -43px) /*-60px @ 1440*/, clamp(43px, 4.17vw, 67px) /*60px @ 1440*/);
}

@keyframes background-color-rotation {
    0% {
        background: #35C0A5;
    }
    16.67% {
        background: #CFE4A3;
    }
    33.33% {
        background: #FF8F9B;
    }
    50% {
        background: #341702;
    }
    100% {
        background: #35C0A5;
    }
}
@keyframes unfold-4 {
    0% {
        transform: translate(clamp(-67px, -4.17vw, -43px) /*-60px @ 1440*/, clamp(43px, 4.17vw, 67px) /*60px @ 1440*/);
    }
    16.67% {
        transform: translate(clamp(-44px, -2.78vw, -28px) /*-40px @ 1440*/, clamp(28px, 2.78vw, 44px) /*40px @ 1440*/);
    }
    33.33% {
        transform: translate(clamp(-22px, -1.39vw, -14px) /*-20px @ 1440*/, clamp(14px, 1.39vw, 22px) /*20px @ 1440*/);
    }
    50% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(clamp(-67px, -4.17vw, -43px) /*-60px @ 1440*/, clamp(43px, 4.17vw, 67px) /*60px @ 1440*/);
    }
}
@keyframes unfold-3 {
    0% {
        transform: translate(clamp(-44px, -2.78vw, -28px) /*-40px @ 1440*/, clamp(28px, 2.78vw, 44px) /*40px @ 1440*/);
    }
    16.67% {
        transform: translate(clamp(-44px, -2.78vw, -28px) /*-40px @ 1440*/, clamp(28px, 2.78vw, 44px) /*40px @ 1440*/);
    }
    33.33% {
        transform: translate(clamp(-22px, -1.39vw, -14px) /*-20px @ 1440*/, clamp(14px, 1.39vw, 22px) /*20px @ 1440*/);
    }
    50% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(clamp(-44px, -2.78vw, -28px) /*-40px @ 1440*/, clamp(28px, 2.78vw, 44px) /*40px @ 1440*/);
    }
}
@keyframes unfold-2 {
    0% {
        transform: translate(clamp(-22px, -1.39vw, -14px) /*-20px @ 1440*/, clamp(14px, 1.39vw, 22px) /*20px @ 1440*/);
    }
    16.67% {
        transform: translate(clamp(-22px, -1.39vw, -14px) /*-20px @ 1440*/, clamp(14px, 1.39vw, 22px) /*20px @ 1440*/);
    }
    33.33% {
        transform: translate(clamp(-22px, -1.39vw, -14px) /*-20px @ 1440*/, clamp(14px, 1.39vw, 22px) /*20px @ 1440*/);
    }
    50% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(clamp(-22px, -1.39vw, -14px) /*-20px @ 1440*/, clamp(14px, 1.39vw, 22px) /*20px @ 1440*/);
    }
}
/* ========================================
   CTA OVER ONS
   ======================================== */
#cta_overons {
    width: clamp(343px, 37.36vw, 598px) /*538px @ 1440*/;
    height: clamp(343px, 37.36vw, 598px) /*538px @ 1440*/;
    padding: 0 0 clamp(19px, 1.81vw, 29px) /*26px @ 1440*/ clamp(37px, 3.61vw, 58px) /*52px @ 1440*/;
    align-self: flex-end;
    margin-top: clamp(85px, 8.26vw, 132px) /*119px @ 1440*/;
}
#cta_overons img.over-ons-effect {
    top: 0;
    left: 0;
}
#cta_overons img.over-ons-effect.effect-1 {
    animation: effect-1 6600ms linear infinite;
    transform: translate(0, 0);
}
#cta_overons img.over-ons-effect.effect-2 {
    animation: effect-2 6600ms linear infinite;
    transform: translate(0, 0);
}
#cta_overons img.over-ons-effect.effect-3 {
    animation: effect-3 6600ms linear infinite;
    transform: translate(0, 0);
}

@keyframes effect-1 {
    0% {
        transform: translate(0, 0);
    }
    27.27% {
        transform: translate(clamp(27px, 2.64vw, 42px) /*38px @ 1440*/, clamp(-42px, -2.64vw, -27px) /*-38px @ 1440*/);
    }
    54.54% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(0, 0);
    }
}
@keyframes effect-2 {
    0% {
        transform: translate(0, 0);
    }
    27.27% {
        transform: translate(clamp(54px, 5.28vw, 84px) /*76px @ 1440*/, clamp(-84px, -5.28vw, -54px) /*-76px @ 1440*/);
    }
    54.54% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(0, 0);
    }
}
@keyframes effect-3 {
    0% {
        transform: translate(0, 0);
    }
    27.27% {
        transform: translate(clamp(81px, 7.92vw, 127px) /*114px @ 1440*/, clamp(-127px, -7.92vw, -81px) /*-114px @ 1440*/);
    }
    54.54% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(0, 0);
    }
}
/* ========================================
   PROJECT HIGHLIGHT 6 // Kosmos
   ======================================== */
#kosmos {
    width: clamp(456px, 44.51vw, 712px) /*641px @ 1440*/;
    height: clamp(529px, 51.6vw, 826px) /*743px @ 1440*/;
    padding: 0 0 clamp(346px, 33.82vw, 541px) /*487px @ 1440*/ clamp(242px, 23.68vw, 379px) /*341px @ 1440*/;
    margin-left: clamp(45px, 4.44vw, 71px) /*64px @ 1440*/;
    margin-top: clamp(95px, 9.24vw, 148px) /*133px @ 1440*/;
}
#kosmos img.kosm-polygon {
    width: clamp(230px, 22.43vw, 359px) /*323px @ 1440*/;
    height: clamp(201px, 19.65vw, 314px) /*283px @ 1440*/;
    top: clamp(119px, 11.6vw, 186px) /*167px @ 1440*/;
    right: clamp(67px, 6.53vw, 104px) /*94px @ 1440*/;
    animation: polygon-animation 4000ms ease-in-out infinite;
}
#kosmos img.polygon-2 {
    top: calc(clamp(119px, 11.6vw, 186px) + clamp(28px, 2.78vw, 44px) ); /*167px @ 1440 + 40px @ 1440*/
    right: calc(clamp(67px, 6.53vw, 104px) + clamp(31px, 3.06vw, 49px) ); /*94px @ 1440 + 44px @ 1440*/
    animation-delay: 100ms;
}
#kosmos img.polygon-3 {
    top: calc(clamp(119px, 11.6vw, 186px) + (2* clamp(28px, 2.78vw, 44px)) ); /*167px @ 1440 + 2*40px @ 1440*/
    right: calc(clamp(67px, 6.53vw, 104px) + (2* clamp(31px, 3.06vw, 49px)) ); /*94px @ 1440 + 2*44px @ 1440*/
    animation-delay: 200ms;
}
#kosmos img.polygon-4 {
    top: calc(clamp(119px, 11.6vw, 186px) + (3* clamp(28px, 2.78vw, 44px)) ); /*167px @ 1440 + 3*40px @ 1440*/
    right: calc(clamp(67px, 6.53vw, 104px) + (3* clamp(31px, 3.06vw, 49px)) ); /*94px @ 1440 + 3*44px @ 1440*/
    animation-delay: 300ms;
}
#kosmos img.polygon-5 {
    top: calc(clamp(119px, 11.6vw, 186px) + (4* clamp(28px, 2.78vw, 44px)) ); /*167px @ 1440 + 4*40px @ 1440*/
    right: calc(clamp(67px, 6.53vw, 104px) + (4* clamp(31px, 3.06vw, 49px)) ); /*94px @ 1440 + 4*44px @ 1440*/
    animation-delay: 400ms;
}
@keyframes polygon-animation {
    0% {
        transform: rotate(0deg);
    }
    40%,50% {
        transform: rotate(-180deg);
    }
    90%,100% {
        transform: rotate(0deg);
    }
}

/* ========================================
   PROJECT HIGHLIGHT 7 // NewFuture 
   ======================================== */

#newfuture {
    width: clamp(333px, 40.76vw, 652px) /*587px @ 1440*/;
    height: clamp(471px, 45.97vw, 736px) /*662px @ 1440*/;
    margin-left: clamp(36px, 3.47vw, 56px) /*50px @ 1440*/;
    padding: 0 0 clamp(36px, 3.54vw, 57px) /*51px @ 1440*/ clamp(27px, 2.64vw, 42px) /*38px @ 1440*/;
    margin-top: clamp(85px, 8.26vw, 132px) /*119px @ 1440*/;
}
#newfuture .project-image.max-only {
    width: clamp(420px, 47.15vw, 754px) /*679px @ 1440*/;
    max-width: none;
    top: clamp(-56px, -3.47vw, -36px) /*-50px @ 1440*/;
    left: clamp(-17px, -1.04vw, -11px) /*-15px @ 1440*/;
}
#newfuture button span.button-icon svg {
    width: clamp(40px, 3.89vw, 62px) /*56px @ 1440*/;
    height: clamp(40px, 3.89vw, 62px) /*56px @ 1440*/;
}
#nme button span.button-icon svg #folder-files path,
#newfuture button span.button-icon svg #folder-files path {
    transform: rotate(0deg);
    transform-box: fill-box;
}
#nme button span.button-icon svg #file_1,
#newfuture button span.button-icon svg #file_1 {
    transform-origin: 35% 75%;
    animation: file-1-animation 3250ms ease-in-out infinite;
}
#nme button span.button-icon svg #file_2,
#newfuture button span.button-icon svg #file_2 {
    transform-origin: 20% 50%;
    animation: file-2-animation 3250ms ease-in-out infinite;
}
#nme button span.button-icon svg #file_3,
#newfuture button span.button-icon svg #file_3 {
    transform-origin: 20% 50%;
    animation: file-3-animation 3250ms ease-in-out infinite;
}
@keyframes file-1-animation {
    0%,60%,100% {
        transform: rotate(0deg);
    }
    90% {
        transform: rotate(105deg);
    }
}
@keyframes file-2-animation {
    0%,60%,100% {
        transform: rotate(0deg);
    }
    90% {
        transform: rotate(75deg);
    }
}
@keyframes file-3-animation {
    0%,60%,100% {
        transform: rotate(0deg);
    }
    90% {
        transform: rotate(50deg);
    }
}
 

/* ========================================
   PROJECT HIGHLIGHT 8 // Juttersgeluk
   ======================================== */
#juttersgeluk {
    width: clamp(322px, 35.35vw, 566px) /*509px @ 1440*/;
    height: clamp(456px, 44.58vw, 713px) /*642px @ 1440*/;
    padding: 0 0 clamp(36px, 3.47vw, 56px) /*50px @ 1440*/ clamp(47px, 4.58vw, 73px) /*66px @ 1440*/;
    margin-left: clamp(51px, 5vw, 80px) /*72px @ 1440*/;
    margin-top: clamp(63px, 6.11vw, 98px) /*88px @ 1440*/;
}
#juttersgeluk button {
    z-index: 6;
}
#juttersgeluk img.juttersgeluk-1 {
    width: clamp(325px, 34.72vw, 556px) /*500px @ 1440*/;
    max-width: none;
    top: clamp(50px, 4.86vw, 78px) /*70px @ 1440*/;
    right: clamp(-84px, -5.28vw, -54px) /*-76px @ 1440*/;
    z-index: 5;
    animation: juttersgeluk-1-animation 6000ms var(--cubix) infinite;
}
#juttersgeluk img.juttersgeluk-2 {
    width: clamp(255px, 27.78vw, 444px) /*400px @ 1440*/;
    max-width: none;
    top: clamp(10px, 0.97vw, 16px) /*14px @ 1440*/;
    right: clamp(45px, 4.44vw, 71px) /*64px @ 1440*/;
    z-index: 4;
    animation: juttersgeluk-2-animation 6000ms ease-in-out infinite;
}
#juttersgeluk img.juttersgeluk-3 {
    width: clamp(325px, 34.72vw, 556px) /*500px @ 1440*/;
    max-width: none;
    top: clamp(109px, 10.69vw, 171px) /*154px @ 1440*/;
    right: clamp(4px, 0.42vw, 7px) /*6px @ 1440*/;
    z-index: 3;
    animation: juttersgeluk-3-animation 6000ms ease-in-out infinite;
}
@keyframes juttersgeluk-1-animation {
    0%, 33.33% {
        z-index: 5;
    }
    33.34%, 100% {
        z-index: 3;
    }
}
@keyframes juttersgeluk-2-animation {
    0%, 33.33%,66.67%, 100% {
        z-index: 4;    
    }
    33.34%, 66.66% {
        z-index: 5;    
    }
}
@keyframes juttersgeluk-3-animation {
    0%, 66.66% {
        z-index: 3;
    }
    66.67%, 100% {
        z-index: 5;
    }
}

/* ========================================
   PROJECT HIGHLIGHTS - MEDIA QUERIES
   ======================================== */

/* Last width with 2 columns, slight adjustments */
@media (min-width: 950px) and (max-width: 1023px) {
    .desk-right-column,
    .desk-left-column {
        justify-content: center!important;
        align-items: center!important;
        align-content: center!important;
    }
}

/* Below 950px 1 column, all centered */
@media (max-width: 949px) {
    .home .project-highlights-wrapper {
        margin-bottom: clamp(64px, calc(19.66vw + 1.24px), 152px) /*72px @ 360 : 152px @ 767*/;
    }
    .desk-right-column,
    .desk-left-column {
        width: 100%!important;
        display: contents!important;
    }
    .project-highlights-wrapper {
        flex-direction: column!important;
        flex-wrap: wrap!important;
        justify-content: center!important;
        align-items: center!important;
        align-content: center!important;
    }
    .project-highlight,
    #text-sm-1,
    #text-sm-2,
    #cta_overons {
        margin-left:0!important;
        margin-right:0!important;
        margin-bottom:0!important;
        margin-top:64px!important;
    }
    #nme {
        margin-top: 0!important;
    }
    #nme {
        width: clamp(309px, calc(43.73vw + 151.56px), 487px) /*309px @ 360 : 487px @ 767*/;
        height: clamp(401px, calc(56.51vw + 197.56px), 631px) /*401px @ 360 : 631px @ 767*/;
        padding: 0 0 clamp(92px, calc(13.02vw + 45.13px), 145px) /*92px @ 360 : 145px @ 767*/ clamp(19px, calc(2.7vw + 9.28px), 30px) /*19px @ 360 : 30px @ 767*/;
    }
    #nme .project-image {
        width: clamp(486px, calc(68.55vw + 239.22px), 765px) /*486px @ 360 : 765px @ 767*/;
        top: clamp(-167px, calc(-14.99vw - 52.04px), -106px) /*-106px @ 360 : -167px @ 767*/;
        left: clamp(-139px, calc(-12.53vw - 42.88px), -88px) /*-88px @ 360 : -139px @ 767*/;
    }
    html.max-mode #nme {
        margin-top: 0!important;
        width: clamp(309px, calc(43.73vw + 151.56px), 487px) /*309px @ 360 : 487px @ 767*/;
        height: clamp(314px, calc(44.47vw + 153.91px), 495px) /*314px @ 360 : 495px @ 767*/;
        padding: 0 0 clamp(19px, calc(4.67vw + 2.2px), 38px) /*19px @ 360 : 38px @ 767*/ 0;
    }
    html.max-mode #nme .project-image {
        width: 100%;
        top: 0;
        left: 0;
    }
    #plasticsoep .project-image {
        max-width: clamp(381px, calc(52.94vw - 25.59px), 516px) /*381px @ 768 : 516px @ 1023*/;
        width: clamp(381px, calc(52.94vw - 25.59px), 516px) /*381px @ 768 : 516px @ 1023*/;
        top: -64px;
    }
    #text-sm-1 {
        max-width: clamp(282px, calc(21.13vw + 213.93px), 376px) /*290px @ 360 : 376px @ 767*/!important;
    }
    #uitjezorg {
        max-height: 450px;
    }
    #uitjezorg img.max-only {
        width: 72px!important;
        top: 60px!important;
    }
    #nharchief img.min {
        width: clamp(534px, calc(16.22vw + 481.62px), 606px) /*540px @ 360 : 606px @ 767*/;
    }
    #nharchief img.max-only {
        top: -73px!important;
        left: 38px!important;
    }
    #text-sm-2 {
        max-width: clamp(254px, calc(19.41vw + 192.12px), 341px) /*262px @ 360 : 341px @ 767*/!important;
    }
    #compostier {
        width: clamp(336px, calc(30.47vw + 238.32px), 472px) /*348px @ 360 : 472px @ 767*/;
    }
    #compostier img.max-only {
        left:0!important;
    }
    .comp-rectangle {
        left:54px!important
    }
    #cta_overons {
        align-self: center!important;
    }
    html.max-mode #cta_overons {
        margin-top: 156px!important;
    }
    #newfuture img.max-only {
        left: clamp(-78px, calc(14.99vw - 125.96px), -11px) /*-72px @ 360 : -11px @ 767*/!important;
    }
}


/* ========================================
   PROJECT POPUP OVERLAY
   ======================================== */
#project-popup {
    position: fixed;
    inset: 0;
    z-index: -1;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-120vh);
    transition: transform 600ms var(--cubix);
    pointer-events: none;
}
#project-popup.is-open {
    transform: translateY(0);
    pointer-events: auto;
}
#project-popup-content .project-popup-close {
    position: absolute;
    top: clamp(28px, 2.78vw, 44px) /*40px @ 1440*/;
    right: clamp(28px, 2.78vw, 44px) /*40px @ 1440*/;
    padding:0px;
    background: transparent;
    border: 0;
    line-height: 0;
    cursor: pointer;
}
#project-popup-content .project-popup-close svg {
    width: clamp(28px, 2.78vw, 44px) /*40px @ 1440*/;
    height: clamp(28px, 2.78vw, 44px) /*40px @ 1440*/;
}
#project-popup-content .project-popup-close:hover {
    opacity: 0.8;
}
#project-popup-content {
    position: relative;
    max-width: clamp(960px, 93.75vw, 1500px) /*1350px @ 1440*/;
    width: 100%;
    box-sizing: border-box;
    max-height: clamp(664px, 64.79vw, 1037px) /*933px @ 1440*/;
    height: calc(100vh - clamp(45px, 4.44vw, 71px));/*64px @ 1440*/
    background: var(--project-background-color, transparent);
    backdrop-filter: blur(35px);
    border-radius: clamp(11px, 1vw, 16px);
    padding: clamp(28px, 2.78vw, 44px) clamp(71px, 6.94vw, 111px) ; /*40px @ 1440 and 100px @ 1440*/
    box-sizing: border-box;
    will-change: auto;
}

#project-popup.is-open #project-popup-content {
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
html.min-mode #project-popup-content {
    background: var(--white) !important;
}
#project-popup.ver .project-popup-inner {
    overflow-y:auto;
    overflow-x: hidden;
    height: 100%;
}
#project-popup.hor .project-popup-inner {
    overflow:auto;
    height: 100%;
    padding-right: clamp(15px, 1.46vw, 23px) /*21px @ 1440*/;
}

/* ========================================
   PROJECT TEXT
   ======================================== */
#project-popup.ver .project-text {
    width: clamp(290px, 28.33vw, 453px) /*408px @ 1440*/;
    padding-right: clamp(15px, 1.46vw, 23px) /*21px @ 1440*/;
}

#project-popup.hor .project-text {
    width: clamp(387px, 37.85vw, 606px) /*545px @ 1440*/;
    padding-right: clamp(15px, 1.46vw, 23px) /*21px @ 1440*/;
}
#project-popup .project-text .project-client,
#project-popup .project-text {
    margin-bottom: clamp(17px, 1.67vw, 25px) /*24px @ 1440*/;
}
#project-popup .project-text {
    overflow-y: auto;
    overflow-x: hidden;
    height: auto;
    max-height: 100%;
    box-sizing: border-box;
}
/* ========================================
   PROJECT GALLERY
   ======================================== */
/* Responsive embeds for ACF oEmbed inside project popup */
.project-gallery .project-embed {
	position: relative;
	width: 100%;
	/* Default to 16:9; adjust via a modifier class if needed */
	aspect-ratio: 16 / 9;
	overflow: hidden;
}
.project-gallery .project-embed iframe,
.project-gallery .project-embed object,
.project-gallery .project-embed embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
}

/* Optional alternative ratios
.project-gallery .project-embed.ratio-1-1 { aspect-ratio: 1 / 1; }
.project-gallery .project-embed.ratio-4-3 { aspect-ratio: 4 / 3; }
*/

#project-popup.ver .project-gallery {
    overflow-y: scroll;
    overflow-x: hidden;
    height: 100%;
    width: clamp(479px, 46.81vw, 749px) /*674px @ 1440*/;
    padding-right: clamp(15px, 1.46vw, 23px) /*21px @ 1440*/;
    box-sizing: border-box;
}
#project-popup.hor .project-gallery {
    display: flex;
    flex-direction: row;
    align-items: flex-start; /* or center if vertical align is needed */
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    padding-bottom: clamp(15px, 1.46vw, 23px) /*21px @ 1440*/;
    min-width: 0;
    box-sizing: border-box;
}

/* Target JPG images */
#project-popup img[src$=".jpg"],
#project-popup img[src$=".JPG"],
#project-popup img[src$=".jpeg"],
#project-popup img[src$=".JPEG"] {
    border-radius: clamp(14px, 1.39vw, 22px) /*20px @ 1440*/;
}

#project-popup.hor .project-gallery img {
    width: auto;
    height: clamp(299px, 29.17vw, 467px) /*420px @ 1440*/;
    object-fit: contain;
    display: inline-block;
}
#project-popup.ver .project-gallery img {
    max-width: 100%;
    height: auto;
    display: block;
}

#project-popup.ver .project-gallery img:not(:last-of-type),
#project-popup.ver .project-gallery .project-embed {
    margin-bottom: clamp(31px, 3.06vw, 49px) /*44px @ 1440*/;
}
#project-popup.hor .project-gallery img:not(:last-of-type),
#project-popup.hor .project-gallery .project-embed {
    margin-right: clamp(31px, 3.06vw, 49px) /*44px @ 1440*/;
}
/* gallery scroll bar style */
#project-popup .project-gallery::-webkit-scrollbar,
.project-popup-inner::-webkit-scrollbar,
#project-popup .project-text::-webkit-scrollbar {
    width: clamp(8px, 0.76vw, 12px) /*11px @ 1440*/;
    height: clamp(8px, 0.76vw, 12px) /*11px @ 1440*/;
}
#project-popup .project-gallery::-webkit-scrollbar-track,
.project-popup-inner::-webkit-scrollbar-track,
#project-popup .project-text::-webkit-scrollbar-track {
    background: #F6F6F6;
    border-radius: clamp(4px, 0.42vw, 7px) /*6px @ 1440*/;
}
#project-popup .project-gallery::-webkit-scrollbar-thumb,
.project-popup-inner::-webkit-scrollbar-thumb,
#project-popup .project-text::-webkit-scrollbar-thumb {
    background: #a9a9a9;
    border-radius: clamp(4px, 0.42vw, 7px) /*6px @ 1440*/;
}
/* gallery dragging styles */
#project-popup .project-gallery *,
#project-popup .project-gallery img {
    -webkit-user-drag: none;
    user-drag: none;
    -webkit-touch-callout: none;
}
#project-popup .project-gallery {
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-overflow-scrolling: touch;
}
#project-popup .project-gallery * {
    user-select: none;
    -webkit-user-select: none;
}
#project-popup .project-gallery * {
    cursor: inherit;
}
#project-popup .project-gallery.dragging {
    cursor: grabbing;
}

/* Popup below 1024px */
@media (max-width: 1023px) {
    #project-popup-content {
        max-width: min(600px, 97vw)!important;
        padding-left: clamp(24px, calc(18.43vw - 117.55px), 71px) /*24px @ 768 : 71px @ 1023*/!important;
        padding-right: 12px!important;
    } 

    #project-popup .project-popup-inner {
        padding-right: 12px!important;
    }

    #project-popup .project-gallery {
        width: 552px!important;
        padding-right: 12px!important;
        height: auto!important;
        overflow: hidden!important;
    }
    #project-popup.hor .project-gallery {
        display: revert!important;
    }
    #project-popup.hor .project-gallery img {
        height: auto!important;
        margin-right: 0!important;
    }
    #project-popup .project-gallery img:not(:last-of-type),
    #project-popup .project-gallery .project-embed {
        margin-bottom: 36px!important;
    }

    #project-popup .project-text {
        max-width: 424px!important;
        width: 424px!important;
        max-height: none!important;
        padding-right: 36px!important;
    }  
}