@font-face {
    font-family: 'Rubrik';
    src: url('../fonts/Rubrik.woff2') format('woff2'),
        url('../fonts/Rubrik.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Rubrik';
    src: url('../fonts/RubrikBoldItalic.woff2') format('woff2'),
        url('../fonts/RubrikBoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Rubrik';
    src: url('../fonts/RubrikMediumItalic.woff2') format('woff2'),
        url('../fonts/RubrikMediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Rubrik';
    src: url('../fonts/RubrikSemiBold.woff2') format('woff2'),
        url('../fonts/RubrikSemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Rubrik';
    src: url('../fonts/RubrikItalic.woff2') format('woff2'),
        url('../fonts/RubrikItalic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Rubrik';
    src: url('../fonts/RubrikExtraLight.woff2') format('woff2'),
        url('../fonts/RubrikExtraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Rubrik';
    src: url('../fonts/RubrikMedium.woff2') format('woff2'),
        url('../fonts/RubrikMedium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Rubrik';
    src: url('../fonts/RubrikBold.woff2') format('woff2'),
        url('../fonts/RubrikBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Rubrik';
    src: url('../fonts/RubrikLight.woff2') format('woff2'),
        url('../fonts/RubrikLight.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Rubrik';
    src: url('../fonts/RubrikLightItalic.woff2') format('woff2'),
        url('../fonts/RubrikLightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Rubrik';
    src: url('../fonts/RubrikExtraLightItalic.woff2') format('woff2'),
        url('../fonts/RubrikExtraLightItalic.woff') format('woff');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Rubrik';
    src: url('../fonts/RubrikSemiBoldItalic.woff2') format('woff2'),
        url('../fonts/RubrikSemiBoldItalic.woff') format('woff');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}





* {padding: 0; margin: 0;}
html {box-sizing: border-box; font-size: clamp(0vw,0.77vw,12px); scroll-behavior: smooth;}
*, *::before, *::after {box-sizing: inherit;}
a {color: #DD4D00; text-decoration: none;}
body {font-size: 1.5rem; font-family: "Rubrik", sans-serif; background: #ddd; line-height: 1.4;}
strong {font-weight: 600;}
.main {margin: 0 auto; max-width: 140rem; background: white;}
.container {max-width: 90rem; margin: 0 auto; padding: 6rem 1rem; position: relative;}
.twocols {display: grid; grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr)); text-align: left; gap: 4rem;}
.socialicons {display: flex;}
.socialicons a img {height: 2.5rem;}
.socialicons a {margin-left: 0.9rem;}
.twocols .socialicons a {margin-left: 0; margin-right: 0.9rem;}

.threecolumns {text-align: left; columns: 30rem; column-gap: 6rem; padding-inline: clamp(2rem, 5vw, 10rem);}
.threecolumns ul {margin-left: 1.5rem;}
.threecolumns > * {break-inside: avoid-column;}
.threecolumns .column img {max-width: 100%; border-radius: 1rem; margin-bottom: 2.5rem; display: block;}

.section.posts .threecolumns {columns: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 6rem;}
.section.posts .threecolumns > * {width: 36rem;}
@media screen and (max-width: 800px) {
    .section.posts .threecolumns > * {width: 100%;}
}

h2 + h3 {margin-top: 3.5rem;}

/* ORANGE */
.menu, .footer, .button {background: #DD4D00; color: white;}
.menu a, .footer a, .button {color: white; text-decoration: none;}

.logo {height: 9.5rem; display: block;}
.header {position: sticky; top: 0; background: white; z-index: 9999; box-shadow: 0px 0px 0.75rem rgba(0,0,0,0.15);}
.header .container {
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    padding: 2rem 1rem;
    height: 14rem;
}
.header .container > div > * {margin-left: 0.4rem;}
.header .container > div > a {display: inline-block; vertical-align: top; height: 2.25rem; width: 2.25rem; overflow: hidden; border-radius: 100%; position: relative;}
.header .container > div > a img {height: 2.25rem; display: block; width: 2.25rem; object-fit: cover;}
.header .container > div > a img:nth-child(2) {position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 0.15s ease-in-out;}
.header .container > div > a:hover img:last-child {opacity: 1;}
.button, button {
    height: 2.25rem; 
    font-family: "Rubrik", sans-serif; 
    font-size: 1.8rem;
    line-height: 2.25rem; 
    border-radius: 1.125rem;
    padding: 0 2rem;
    border: 0;
    text-transform: lowercase;
    cursor: pointer;
    line-height: 2.25rem; 
    display: inline-block;
    background: #0064AC;
}
.header button {
    vertical-align: top;
    background: #DD4D00 url(/img/menu.svg) calc(100% - 1rem) center / 1.35rem auto no-repeat;
    padding: 0 3rem 0 0.7rem;
    font-size: 1.7rem; 
}
.header button.close {
    background: url(/img/close.svg) center center / 1.25rem auto no-repeat; 
    width: 0; 
    height: 0; 
    padding: 2.25rem 0 0 2.25rem; 
    overflow: hidden;
    position: absolute;
    right: 1.5rem;
    margin-top: -2.25rem;
    display: none;
}
.menuopen .header button:not(.close) {color: #DD4D00; background: #DD4D00;}

.menuopen .header button.close {display: block; z-index: 4;}
.menu {
    position: absolute;
    padding: 2.8rem 1rem 2.8rem 2.8rem;
    right: 0.5rem;
    line-height: 3rem;
    border-radius: 1.3rem;
    margin-top: -3.25rem;
    display: block;
    z-index: 3;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease-in-out;
}
.menuopen .menu {pointer-events: all; opacity: 1;}
.menu li {list-style: none;}
.menu li a {color: white; font-family: "Rubrik", sans-serif; font-weight: 600;}
.menu li li a {color: black; font-family: "Rubrik", sans-serif; font-weight: normal;}




.outercarousel {height: auto; background: #222; position: relative;}
.outercarousel.retail {background-color: #0064ac;}
.outercarousel.horeca {background-color: #dd4d00;}
.outercarousel.commercial-real-estate,
.outercarousel.commercieel-vastgoed {background-color: #349127;}
.outercarousel.none {height: auto; margin-bottom: 0; background: #222 url(/img/s_black.svg) calc(50% - 60rem) 80% / 85rem auto no-repeat;}
.outercarousel.showprojects {margin-top: 8rem;}
.section.brands + .outercarousel.showprojects {margin-top: 0;}
.outercarousel .container {padding-top: 2rem; padding-bottom: 2rem;}
.outercarousel .container .h1, .outercarousel .container h1 {font-size: 7rem; color: white; font-family: "Rubrik"; font-weight: 600;}
.outercarousel.none .container {padding-block: 4rem;}
.outercarousel.none .container h1 {line-height: 1.1; padding-block: 1rem;}

.breadcrumbs {background: white; text-transform: lowercase;}
.breadcrumbs .container {padding-top: 2rem; padding-bottom: 2rem;}
.breadcrumbs .container ul {display: inline; font-size: 1.66rem;}
.breadcrumbs .container ul li {display: inline; color: rgba(0,0,0,0.5);}
.breadcrumbs .container ul li a {text-decoration: none; color: rgba(0,0,0,0.5);}
.breadcrumbs .container ul li:not(:first-child)::before {content: ">"; display: inline-block; margin: 0 0.5rem;}

.section.mission, .team, .contact, .section.page, .section.posts {
    background: #ebebeb;
}
.section.mission, .showcase, .section.brands, .contact, .section.process {text-align: center;}
.section.page {padding-bottom: 6rem;}
.section.mission, .section.posts {margin-top: 6rem;}
.section.process .container p,
.section.mission .container {max-width: 80rem; margin-left: auto; margin-right: auto;}
.breadcrumbs + .section.mission {margin-top: 0;}


.section p, .section ul {font-size: 1.6rem; line-height: 2; margin-bottom: 1.4em; text-transform: none;}
.pretitle {font-size: 2.2rem; color: #DD4D00; text-transform: lowercase;}
.section h2 {font-size: 5.3rem; font-family: "Rubrik", sans-serif; font-weight: 600; margin-bottom: 1.4rem; margin-top: 0.1rem; line-height: 1;}
.section.team {background: #ebebeb url(/img/s.svg) calc(50% - 45rem) center / 60rem auto no-repeat;}
.section.contact {background: #ebebeb url(/img/s.svg) calc(50% + 45rem) center / 60rem auto no-repeat;}
.section.page + .section.contact {margin-top: 8rem;}
.section.contact .twocols {margin-top: 2rem;}
.section.contact .twocols > div:first-child {display: flex; justify-content: flex-end;}


body.projects .breadcrumbs + .section {
    background: #ebebeb url(/img/s.svg) calc(50% - 50rem) -2rem / 60rem auto no-repeat;
  }

.section.team .container {display: flex; gap: 5rem;}
.section.team .container img {width: 28rem; height: 28rem; object-fit: cover; border-radius: 100%;}

.section.projects {background: linear-gradient(to bottom, #ebebeb calc(100% - 24rem), #fff calc(100% - 24rem));}
.section.projects > div > ul {display: grid; grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr)); gap: 2.8rem;}
.section.projects > div > ul li {list-style: none; background-color: #DD4D00; position: relative; border-radius: 2rem; overflow: hidden;}
.section.projects > div > ul li a {display: block; color: white; height: 100%; text-align: center; text-decoration: none;}
.section.projects > div > ul li a div.category {
    background: black; 
    display: inline-block; 
    width: 12rem; 
    transform: translateY(-50%); 
    font-size: 1.6rem; 
    height: 2.26rem; 
    line-height: 2.26rem;
    border-radius: 1.1rem;
    overflow: hidden;
}
.section.projects > div > ul li h3 {
    color: black;
    font-size: 2.66rem; 
    font-family: "Rubrik"; 
    font-weight: 600; 
    margin: -0.2rem auto 0.5rem;
    line-height: 1;
    max-width: 18rem;
}
.section.projects > div > ul li a p {font-size: 2rem; line-height: 1.4; padding: 0 2rem 0.5rem;}
.section.projects > div > ul > li {min-height: 35rem;}
.section.projects > div > ul > li > a > img {border: 0; max-width: 100%; display: block; height: 50%; width: 100%; object-fit: cover;}
.section.projects > div > ul li.commercial-real-estate, 
.section.projects > div > ul li.commercieel-vastgoed {background-color: #349127;}
.section.projects > div > ul li.retail {background-color:#0064ac;}
.section.projects > div > ul li.noproject.center {text-align: center; justify-content: center;}
.section.projects > div > ul li.noproject {
    display: flex; 
    flex-direction: column; 
    justify-content: space-between;
    padding: 3rem 1rem; 
    background-image: url(/img/s_black.svg);
    background-position: calc(50% - 18rem) center;
    background-size: 37rem auto;
    background-repeat: no-repeat;
}
.section.projects > div > ul li.noproject:not(.center) h3 {margin-left: 1.5rem;}
.section.projects > div > ul li.noproject h3 {font-size: 5.66rem; color: white; line-height: 1; margin: 0 auto; max-width: 100%;}
.section.projects > div > ul li.noproject.center h3 {max-width: 27rem;}
.section.projects > div > ul li.noproject:not(.center) img {height: 5.6rem; display: block; margin: -0.75rem 2rem -0.5rem auto;}
.section.projects > div > ul li.noproject ul.icons {display: flex; justify-content: center; gap: 1.6rem; margin-top: 3rem;}
.section.projects > div > ul li.noproject ul.icons li {list-style: none; background: none;}
.section.projects > div > ul li.noproject ul.icons li a img {width: 4.7rem; display: block;}

.section.projects > div.carousel.cards {margin-top: 4rem; margin-bottom: 4rem;}
.section.projects > div.carousel.cards > ul {display: flex; background: none; width: calc(100% - 10rem); margin: 0 auto;}
.section.projects > div.carousel.cards > ul li {min-height: 0;}
.section.projects > div#projectcarousel > ul li p {min-height: 5rem; margin-bottom: 2rem;}
.section.projects > div.carousel.cards.inactive > ul {flex-wrap: wrap!important; width: 100%;}

.section ul.people {display: grid; grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr)); gap: 5rem;}
.section ul.people li {list-style: none; text-align: center;}
.section ul.people li a {text-decoration: none; color: inherit;}
.section ul.people li img {width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 100%; margin-bottom: 1rem;}
.section ul.people li h3 {font-size: 2.1rem; text-transform: none; margin-bottom: 0.3rem; font-family: "Rubrik", sans-serif; font-weight: 600;}
.section ul.people li:nth-child(1) h3,
.section ul.people li:nth-child(5) h3,
.section ul.people li:nth-child(7) h3,
.section ul.people li:nth-child(11) h3,
.section ul.people li:nth-child(13) h3,
.section ul.people li:nth-child(17) h3,
.section ul.people li:nth-child(19) h3 {color: #0064ac;}
.section ul.people li:nth-child(2) h3,
.section ul.people li:nth-child(6) h3,
.section ul.people li:nth-child(8) h3,
.section ul.people li:nth-child(12) h3,
.section ul.people li:nth-child(14) h3,
.section ul.people li:nth-child(18) h3,
.section ul.people li:nth-child(20) h3 {color: #DD4D00;}
.section ul.people li:nth-child(3) h3,
.section ul.people li:nth-child(4) h3,
.section ul.people li:nth-child(9) h3,
.section ul.people li:nth-child(10) h3,
.section ul.people li:nth-child(15) h3,
.section ul.people li:nth-child(16) h3,
.section ul.people li:nth-child(21) h3 {color: #349127;}
#lightbox .popup.orange h1,
#lightbox .popup.green h2,
#lightbox .popup.blue h2,
.section ul.people li.orange h3 {color: #DD4D00;}
#lightbox .popup.blue h1,
#lightbox .popup.orange h2,
.section ul.people li.blue h3 {color: #0064ac;}
#lightbox .popup.green h1,
.section ul.people li.green h3 {color: #349127;}


.section.process {background: white;}
.section.process .container {padding-bottom: 0;}

.section ul.layers {display: block; margin: 8rem 0 3rem;}
.section ul.layers li {list-style: none; display: flex; position: relative; margin: 2rem 0;}
.section ul.layers li > div {display: flex; flex-direction: column; justify-content: center;}
.section ul.layers li > div p {margin-bottom: 0; font-size: 1.4rem; line-height: 1.5;}
.section ul.layers li > div:nth-child(1) {border-top-left-radius: 5.5rem; border-bottom-left-radius: 5.5rem; background: #ebebeb; z-index: 10;}
.section ul.layers li > div:nth-child(1) img {width: 11rem; height: 11rem; border: 0.2rem solid black; position: relative; z-index: 9; border-radius: 100%; object-fit: cover;}
.section ul.layers li > div:nth-child(2) {min-width: 15.5rem; width: 15.5rem; text-align: center; background: #ebebeb; position: relative;}
.section ul.layers li > div:nth-child(2)::after {content: ""; height: 80%; position: absolute; right: 0; width: 1px;}
.section ul.layers li > div:nth-child(2).blue::after {background: #0064ac;}
.section ul.layers li > div:nth-child(2).green::after {background: #349127;}
.section ul.layers li > div:nth-child(2).orange::after {background: #DD4D00;}
.section ul.layers li > div:nth-child(2).blue h3 {color: #0064ac;}
.section ul.layers li > div:nth-child(2).green h3 {color: #349127;}
.section ul.layers li > div:nth-child(2).orange h3{color: #DD4D00;}
.section ul.layers li > div:last-child {flex-grow: 1; flex-shrink: 1; border-top-right-radius: 5.5rem; border-bottom-right-radius: 5.5rem; background: #ebebeb; padding: 1rem 3rem 1rem 2rem; text-align: left;}


.section.projects > div#projectcarousel > ul li {min-width: calc(100%/3 - ((3 - 1)*2.8rem)/3); width: calc(100%/3 - ((3 - 1)*2.8rem)/3);}
@media only screen and (max-width: 75rem) {
    .section.projects > div#projectcarousel > ul li {min-width: calc(100%/2 - ((2 - 1)*2.8rem)/2); width: calc(100%/2 - ((2 - 1)*2.8rem)/2);}
}
@media only screen and (max-width: 50rem) {
    .section.projects > div#projectcarousel > ul li {min-width: calc(100%/1 - ((1 - 1)*2.8rem)/1); width: calc(100%/1 - ((1 - 1)*2.8rem)/1);}
}
.section.projects > div#partnercarousel > ul li,
.section.projects > div#brandcarousel > ul li {min-width: calc(100%/5 - ((5 - 1)*2.8rem)/5); width: calc(100%/5 - ((5 - 1)*2.8rem)/5); border-radius: 0!important;}
@media only screen and (max-width: 75rem) {
    .section.projects > div#partnercarousel > ul li,
    .section.projects > div#brandcarousel > ul li {min-width: calc(100%/3 - ((3 - 1)*2.8rem)/3); width: calc(100%/3 - ((3 - 1)*2.8rem)/3);}
}
@media only screen and (max-width: 50rem) {
    .section.projects > div#partnercarousel > ul li,
    .section.projects > div#brandcarousel > ul li {min-width: calc(100%/2 - ((2 - 1)*2.8rem)/2); width: calc(100%/2 - ((2 - 1)*2.8rem)/2);}
}


.section.projects > div.carousel.cards > ul > li img {height: auto; position: relative; display: block;}
.section.projects > div.carousel.cards > ol {display: none;}


.playbutton {position: absolute!important; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 10rem!important;}

div.carousel .prev,
div.carousel .next {
    background: black; 
    width: 38px; 
    height: 38px; 
    line-height: 41px; 
    border-radius: 100%; 
    padding: 0;
    text-align: center;
}
div.outercarousel .overlay {
    position: absolute; 
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;
}
div.outercarousel .overlay h1,
div.outercarousel .overlay .h1 {
    color: white;
    width: 43rem;
    font-size: 6.7rem;
    line-height: 6.9rem;
    font-family: "Rubrik", sans-serif;
    font-weight: 600;
    /* gradient for webkit browsers */
    background: -webkit-linear-gradient(#fff 7.2rem, #349127 7.2rem, #349127 14.4rem, #dd4d00 14.4rem);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 5rem calc(50% - 51rem);
    padding-bottom: 1rem;
}
div#homecarouseltop .overlay h1,
div#homecarouseltop .overlay .h1 {    
    background: -webkit-linear-gradient(#fff 7.2rem, #0064ac 7.2rem, #0064ac 14.4rem, #dd4d00 14.4rem);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: absolute;
    bottom: 0;
    margin-left: calc(50% - 60rem);
}
div#projectcarouseltop .overlay .h1 {margin: 5rem calc(50% + 1rem);}
div.carousel .overlay .h1 > div {
    display: inline-block; 
    font-size: 2rem; 
    line-height: 1.6; 
    color: white; 
    font-family: "Rubrik"; 
    width: 20rem; 
    vertical-align: top;
    background: #fff;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-top: 0.8rem;
}

div#projectcarouselbottom .button {position: absolute; background: white; color: #dd4d00; padding: 0.25rem 1.5rem; height: 2.75rem; border-radius: 1.375rem; left: 50%; bottom: calc(5rem + 20px); transform: translateX(-50%); z-index: 2; width: 21rem; text-align: center;}
div#homecarouseltop > ul > li > div > div,
div#projectcarouseltop > ul > li > div > div, 
div#projectcarouselbottom > ul > li > a > div {height: 100%; width: 100%;}
div#projectcarouseltop > ol {display: none;}
div#projectcarouseltop .prev,
div#projectcarouseltop .next {background: white; color: black;}
div#projectcarouseltop .prev {left: 1rem;}
div#projectcarouseltop .next {right: 1rem;}
div#projectcarouseltop ul {background: none;}
div#projectcarouselbottom .prev,
div#projectcarouselbottom .next,
div#homecarouseltop .prev,
div#homecarouseltop .next {display: none!important;}
.section.projects > div#partnercarousel > ul li,
.section.projects > div#brandcarousel > ul li {background: white; border-radius: 2rem; display: flex; flex-direction: column; justify-content: center;}
.section.projects > div#showcasecarousel {margin-top: 2rem;}
div#homecarouseltop img,
div#projectcarouselbottom img,
div#projectcarouseltop img {aspect-ratio: 2;}

.project {display: flex; gap: 3.1rem;}
.project:nth-child(2) {text-transform: none;}
.project .category {font-size: 2.2rem; color: #DD4D00;}
.content {max-width: 68rem;}
.content h1, .content .h1 {font-size: 5.66rem; font-family: "Rubrik", sans-serif; font-weight: 600; line-height: 1; margin-bottom: 3.25rem;}
.content h2 {font-size: 2rem; font-family: "Rubrik", sans-serif; font-weight: 600; color: #349127; margin-top: 4.5rem; text-transform: none;}
.content h2:first-child {margin-top: 0;}
.section h3, .content h3 {font-weight: 600; font-size: 1.6rem; margin-bottom: 0.25rem;}
.content ul {margin-left: 1.5rem;}
.content img {max-width: 100%; border-radius: 1rem;}
.project > div:first-child {min-width: 25rem;}
.project .details {background: #DD4D00; color: white; padding: 2.5rem 2.5rem 3rem 2.5rem; border-radius: 1.1rem; position: sticky; top: 2.5rem;}
.project .details h4, .project > div:first-child h4 {color: black; font-family: "Rubrik", sans-serif; font-weight: 600; margin-bottom: 0.5rem; text-transform: lowercase;}
.project .details p {line-height: 1.5; margin-bottom: 2rem;}
.project .details p:last-child {margin-bottom: 0;}
.project .details p a {text-decoration: none; color: white;}
.project + .project {padding-top: 4rem;}
.project + .project > div:first-child h4 {margin-bottom: 0; text-transform: none;}
.project + .project > div:first-child {line-height: 2; padding-top: 3rem;}
.project a {color: #DD4D00; text-decoration: none;}

ul.faqs {margin-left: 0;}
ul.faqs li {list-style: none;}
ul.faqs li a {display: block; padding: 1rem 2rem 1rem 2rem; background: none; color: black; border-top: 1px solid black; position: relative;}
ul.faqs li.open {background: white; color: black; padding: 1.5rem 4rem 1rem; position: relative; bottom: 1px; margin: 2rem 0;}
ul.faqs li.open::before {content: ""; position: absolute; margin-top: -10rem;}
ul.faqs li:last-child a {border-bottom: 1px solid black;}
ul.faqs li.open + li a {border-top: 0;}
ul.faqs li h1 {font-size: 3.2rem; margin-top: 2.2rem; margin-bottom: 1rem; line-height: 1.2; color: black;}
ul.faqs li h1, ul.faqs li a {text-transform: none;}
ul.faqs li a::before {content: "›"; position: absolute; left: 0;}
ul.faqs #open {position: absolute; margin-top: -17rem; pointer-events: none; border: 0;}
ul.faqs #open::before {content: none;}

.map {border: 0.15rem solid white; border-radius: 1.3rem; width: 100%; height: 28rem; object-fit: cover;}
.map .leaflet-layer, .map .leaflet-control-attribution {filter: grayscale(1) brightness(1.23) contrast(1);}

form {display: flex; flex-wrap: wrap; max-width: 35rem; margin-top: 0.7rem;}
form > div {display: flex; flex-direction: column; margin-bottom: 2rem; width: 100%;}
form > div label {position: absolute; font-size: 1.6rem; line-height: 3.6rem; padding: 0 1.6rem;}
form > div input {height: 3.6rem; border-radius: 1.8rem!important;} 
form > div.half {width: calc(50% - 0.5rem);}
form > div.half + div.half {margin-left: 1rem;}
form > div input,
form > div textarea {border: 0; border-radius: 1.8rem; font-size: 1.6rem; padding: 0 1.6rem;}
form > div input:focus,
form > div input:not(:placeholder-shown) {
    z-index: 9;
    position: relative;
}
form > div input[type="submit"] {height: 3.6rem;} 

.footer {font-size: 1.5rem; line-height: 3rem; margin-top: 6rem;}
.footer .container { 
    display: flex; 
    justify-content: space-between;
}
.footer .container > a img {height: 7.1rem;}
.footer li {list-style: none; font-size: 1.66rem; font-family: "Rubrik", sans-serif; font-weight: 600;}
.footer li li {font-size: 1.5rem; font-family: "Rubrik", sans-serif; font-weight: normal;}
.footer h3 {font-size: 1.66rem; font-family: "Rubrik", sans-serif; font-weight: 600;}

.afterfooter {font-size: 1.2rem;}
.afterfooter .container {
    display: flex;
    justify-content: space-between;
    padding: 3rem 1rem;
}
.afterfooter .container > div {display: flex; align-items: center;}
.afterfooter ul, .afterfooter ul li {display: inline;}
.afterfooter ul li::before {content: "• "; color: #DD4D00;}
.afterfooter ul li a {color: black; text-decoration: none;}

#search_overlay {
    display: flex;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #111 url(/img/s_black.svg) calc(50% - 60rem) 60% / 85rem auto no-repeat;
    z-index: 99999;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease-in-out;
}
#search_overlay.active {
    opacity: 1;
    pointer-events: all;
}
#search_overlay form {display: flex; justify-content: center; flex-direction: column; position: relative; width: 100%; max-width: 80rem; position: relative;}
#search_overlay form label {display: block; position: absolute; margin-top: -3rem; top: 0; color: white; font-size: 2rem;}
#search_overlay form input {border: 0; background: transparent; color: white; border-bottom: 1px solid white; font-size: 5rem; outline: 0; font-family: "Rubrik"; width: 100%;}
#search_overlay .close {position: absolute; top: 1rem; right: 1rem; width: 0; height: 0; overflow: hidden; padding: 4rem 0 0 4rem; cursor: pointer;}
#search_overlay .close::before,
#search_overlay .close::after {
    content: "";
    height: 0.3rem;
    width: 3rem;
    display: block;
    position: absolute;
    top: calc(50% - 0.15rem);
    left: 0.5rem;
    transform: scale(0.1) rotate(45deg);
    background: white;
    border-radius: 0.2rem;
}
#search_overlay.active .close::before,
#search_overlay.active .close::after {transition: all 0.2s ease-in-out;}
#search_overlay .close::before {transform: scale(0.1) rotate(-45deg);}
#search_overlay.active .close::after {transform: scale(1) rotate(45deg);}
#search_overlay.active .close::before {transform: scale(1) rotate(-45deg);}
#search_overlay.active .close:hover::after {transform: scale(1) rotate(225deg);}
#search_overlay.active .close:hover::before {transform: scale(1) rotate(135deg);}


.popup {
    background: white; 
    position: relative;
    top: 50%;
    left: 50%;
    -ms-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    width: 100%;
    max-width: 95rem;
    max-height: 100%;
    border-radius: 0.5rem;
    padding: 3rem 5rem 3rem 3rem; 
}
#lightbox .popup {display: flex; gap: 3rem; line-height: 1.4; cursor: initial; }
#lightbox .popup .image {width: 27rem; min-width: 27rem; position: relative; text-align: center;}
#lightbox .popup .image img {border-radius: 100%; display: block; max-width: 100%; margin-bottom: 2rem;}
#lightbox .popup .text h2,
#lightbox .popup .image h1 {
    font-size: 2.1rem;
    text-transform: none;
    font-family: "Rubrik", sans-serif;
    font-weight: 600;
    margin-bottom: 0.5rem;
}
#lightbox .popup .text {display: flex; flex-direction: column; justify-content: space-between; gap: 3rem; line-height: 1.7; text-transform: none;}
#lightbox .popup .text h2 {margin: 0.5rem 0; text-transform: capitalize;}
#lightbox .popup .text > div:last-child {display: flex; justify-content: space-between; align-items: flex-end;}
#lightbox .popup .text > div:last-child img {width: 7rem;}


@media screen and (max-width: 1400px) {
    html {font-size: 0.92vw;}
    div#homecarouseltop .overlay h1, div#homecarouseltop .overlay .h1 {
        margin-left: calc(50% - 44rem);
        bottom: 4rem
    }
}
@media screen and (max-width: 800px) {
    html {font-size: 2vw;}
    .section h2 {margin-top: 0.75rem; margin-bottom: 2.4rem;}
    .afterfooter .container,
    .afterfooter .container > div,
    .section.team .container {flex-direction: column; text-align: center; gap: 1.5rem;}
    .section.contact .twocols > div:first-child {justify-content: center;}
    .section.contact .twocols > div:last-child {text-align: center;}
    .socialicons {justify-content: center; margin-top: 1rem;}
    .breadcrumbs .container,
    .footer .container,
    .section .container {padding-left: 2rem; padding-right: 2rem;}
    .footer .container {flex-wrap: wrap; gap: 5rem 0rem; padding-top: 5rem;}
    .footer .container > * {width: 50%;}
    .footer .container > *:nth-child(1) {position: relative; top: 1.2rem;}
    .footer .container > *:nth-child(1),
    .footer .container > *:nth-child(3) {padding-left: 0.5rem;}
    .footer .container li {position: relative; line-height: 1.1; margin-top: 1.25rem;}
    .footer .container li a {max-width: 70%; display: inline-block;}
    .afterfooter ul {display: block;}
    .afterfooter ul li {display: block;}
    .afterfooter ul li::before {content: none;}
    .afterfooter .socialicons {position: relative; right: 0.9rem}
    div.outercarousel .overlay h1, div.outercarousel .overlay .h1 {margin-left: 1rem; margin-right: 1rem; font-size: 15vw; line-height: 15vw; width: auto;
        background: -webkit-linear-gradient(#fff 15vw, #349127 15vw, #349127 30vw, #dd4d00 30vw);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    div#homecarouseltop .overlay h1, div#homecarouseltop .overlay .h1 {
        background: -webkit-linear-gradient(#fff 15vw, #0064ac 15vw, #0064ac 30vw, #dd4d00 30vw);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .project {flex-direction: column-reverse;}
    .project + .project {flex-direction: column;}
    .project .details {max-width: 25rem;}
    .section.contact {background: #ebebeb;}
    .header + .outercarousel:not(.none) {height: 100vw;}
    .header + .outercarousel .carousel ul li {padding-bottom: 100vw!important;}
    .section.projects > div > ul li a {height: auto;}
    div.outercarousel .overlay {display: none;}
    .section.contact, .section.team {background-image: none;}
    .section ul.layers li {flex-direction: column; background: rgba(0,0,0,0.1); padding: 3rem 2rem 3.5rem; border-radius: 1rem;}
    .section ul.layers li > div {background: none!important;}
    .section ul.layers li > div:nth-child(2) {width: auto; padding-top: 1rem;}
    .section ul.layers li > div:nth-child(2)::after {content: none;}
    .section ul.layers li > div:nth-child(1) {align-items: center;}
    .section ul.layers li > div:last-child {padding: 1.25rem 0 0; text-align: center;}
    .footer h3 {margin-top: 0.5rem;}
    #search_overlay form {margin: 0 1em; width: calc(100% - 2rem);}
    #lightbox {position: absolute!important; height: auto!important; position: relative!important; min-height: 100vh;}
    #lightbox .popup {flex-direction: column; align-items: center; min-height: 100vh; max-height: none; top: 0; transform: translateX(-50%); padding: 3rem;}
    .people .main > div:not(#lightbox) {display: none!important;}
    #lightbox #close::after, #lightbox #close::before {background: black!important;}
    #lightbox #close {position: absolute!important;}
    #lightbox.gallery #prev, #lightbox.gallery #next {display: none!important;}
}
@media screen and (max-height: 500px) {
    .header {position: relative;}
    ul.faqs #open {margin-top: -17rem;}
}
@media screen and (max-width: 700px) {
    html {font-size: 2.25vw;}
}
@media screen and (max-width: 600px) {
    .section .pretitle {font-size: 1.8rem;}
    .section h2 {font-size: 4.3rem;}
    html {font-size: 2.5vw;}
}
@media screen and (max-width: 500px) {
    html {font-size: 2.75vw;}
}