@font-face {
font-family: 'AvenirNextRegular';
src: url(//justnimbus.com/wp-content/themes/paddap-custom-theme/fonts/AvenirNextLTPro-Regular.otf) format('opentype');
font-weight: 400;
}
@font-face {
font-family: 'AvenirNextMedium';
src: url(//justnimbus.com/wp-content/themes/paddap-custom-theme/fonts/AvenirNext-Medium.woff) format('woff');
font-weight: 500;
}
@font-face {
font-family: 'AvenirNextDemiBold';
src: url(//justnimbus.com/wp-content/themes/paddap-custom-theme/fonts/AvenirNext-DemiBold.woff) format('woff');
font-weight: 600;
}
@font-face {
font-family: 'AvenirNextBold';
src: url(//justnimbus.com/wp-content/themes/paddap-custom-theme/fonts/AvenirNextLTPro-Bold.otf) format('opentype');
font-weight: 700;
}
@font-face {
font-family: 'AvenirNextItalic';
src: url(//justnimbus.com/wp-content/themes/paddap-custom-theme/fonts/AvenirNextLTPro-It.otf) format('opentype');
font-weight: 400;
}
:root { --body-font: "AvenirNextRegular";
--header-font: "AvenirNextDemiBold";
--italic-font: "AvenirNextItalic"; --black: rgb(0,0,0);
--light-black: rgba(0,0,0,0.1);
--white: rgb(255, 255, 255);
--brand-color: rgb(104, 169, 166);
--light-brand-color: rgb(161, 213, 211);
--lighter-brand-color: rgb(227, 248, 247);
--sand: #C8BAAF;
--light-sand: #EBE4DE;
--dark-sand: rgb(134, 109, 91);
--water: rgb(156, 205, 224);
--light-water: rgb(205, 230, 239);
--dark-water: rgb(81, 151, 178);
--green: rgb(176, 201, 150);
--light-green: rgb(216, 228, 203);
--dark-green: rgb(102, 153, 47); --container-max-width: 1280px;
--small-container-max-width: 800px;
--medium-container-max-width: 960px;
--container-padding: calc((100vw - var(--container-max-width)) / 2);
--section-padding: 150px;
--navbar-height: 50px; --transition-easing: cubic-bezier(.62,.03,.6,.98);
--fast-transition: all .075s var(--transition-easing);
--medium-transition: all .15s var(--transition-easing);
--slow-transition: all .3s var(--transition-easing);
}
@media (max-width: 768px) {
:root {
--section-padding: 96px;
}
}
@media (min-width: 2561px) {
:root {
--container-max-width: 1440px;
--small-container-max-width: 996px;
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
position: relative;
height: 100%;
}
body,
p,
a,
a:visited,
a:hover {
font-family: var(--body-font);
color: var(--black);
text-decoration: none;
}
p strong,
p b {
font-family: var(--header-font);
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--header-font);
}
h1 {
font-size: 24px;
line-height: 150%;
margin: 0;
text-transform: uppercase;
}
h1.home-hero__subtitle {
text-transform: none;
}
.home h1 {
font-size: 48px;
line-height: 100%;
padding-bottom: 4px;
}
h2 {
font-size: 36px;
line-height: 120%;
text-transform: uppercase;
}
h3 {
font-size: 36px;
line-height: 150%;
}
h4 {
font-size: 24px;
line-height: 150%;
text-transform: uppercase;
letter-spacing: 1px;
padding-bottom: 8px;
}
h5 {
font-size: 18px;
line-height: 150%;
}
p {
font-size: 18px;
line-height: 170%;
}
a {
font-size: 18px;
line-height: 150%;
}
@media (max-width: 768px) {
h3 {
font-size: 32px;
}
}
@media (max-width: 768px) { 
.home h1 {
font-size: 40px;
line-height: 140%;
padding-bottom: 0;
}
.animation-container .home-hero__title{
text-align: center;
font-size: 40px;
color: var(--white);
margin: 0;
line-height: 140%;
}
}
section:not(.no-section-margin) {
margin-top: var(--section-padding);
}
img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
button {
border: unset;
border-radius: unset;
background-color: unset;
color: unset;
padding: unset;
line-height: unset;
cursor: pointer;
}
svg {
display: block;
} .container {
width: 90%;
max-width: var(--container-max-width);
margin: 0 auto;
}
.small-container {
width: 80%;
max-width: var(--small-container-max-width);
margin: 0 auto;
}
.medium-container {
width: 90%;
max-width: var(--medium-container-max-width);
margin: 0 auto;
}
.divider-wrapper {
display: flex;
gap: 16px;
align-items: center;
margin-bottom: 64px;
}
.divider {
height: 1px;
width: 100%;
background-color: var(--black);
}
@media (max-width: 768px) {
.divider-wrapper {
display: flex;
gap: 16px;
align-items: flex-start;
padding-top: 0px;
margin-bottom: 64px;
flex-wrap: wrap;
}
}
@media (max-width: 375px) {
.divider-wrapper {
display: flex;
gap: 16px;
align-items: flex-start;
padding-top: 16px;
margin-bottom: 32px;
flex-direction: column-reverse;
}
section.project-overview .container .projects-overview__intro .divider-wrapper {
grid-template-columns: 1fr;
}
}
.vertical-divider {
height: 16px;
width: 1px;
background-color: var(--brand-color);
}
.hero-padding {
padding-top: 111px;
}
.mt-auto {
margin-top: auto;
}
.col-span-1 {
grid-column: span 1;
}
.col-span-2 {
grid-column: span 2;
}
.col-span-3 {
grid-column: span 3;
}
.col-span-4 {
grid-column: span 4;
}
.col-span-5 {
grid-column: span 5;
}
.col-span-6 {
grid-column: span 6;
}
.col-span-7 {
grid-column: span 7;
}
.col-span-8 {
grid-column: span 8;
}
.col-span-9 {
grid-column: span 9;
}
.col-span-10 {
grid-column: span 10;
}
.col-span-11 {
grid-column: span 11;
}
.col-span-12 {
grid-column: span 12;
}
.no-hover,
.no-hover > a {
cursor: default;
}
.wysiwyg h2,
.wysiwyg h3 {
margin-bottom: 16px;
}
.wysiwyg p:last-child {
margin-bottom: 0;
}
.button-group {
display: flex;
gap: 16px;
margin-top: 24px;
} .btn {
border: 1px solid transparent;
padding: 12px 24px;
width: fit-content;
position: relative;
overflow: clip;
display: flex;
align-items: center;
justify-content: center;
transition: var(--slow-transition);
}
.btn:before {
content: "";
position: absolute;
aspect-ratio: 1;
width: 110%;
height: auto;
background-color: transparent;
border-radius: 999px;
transform: scale(0.01);
opacity: 0;
transition: transform 0.3s, opacity 0.3s;
}
.btn:hover:before {
opacity: 1;
transform: scale(1);
}
.btn__inner {
position: relative;
color: var(--black);
text-transform: uppercase;
text-wrap: nowrap;
display: flex;
align-items: center;
gap: 16px;
}
.btn__text {
font-weight: 600;
font-family: var(--header-font);
letter-spacing: 1px;
font-size: 14px;
transition: var(--slow-transition);
}
.btn__arrow {
min-width: 12px;
max-width: 12px;
transition: var(--slow-transition);
}
.btn:hover .btn__arrow {
transform: translateX(6px);
} .btn--primary {
background-color: var(--brand-color);
}
.btn--primary:before {
background-color: var(--white);
}
.btn--primary:hover {
border-color: var(--brand-color);
}
.btn--primary:hover .btn__text {
color: var(--brand-color);
}
.btn--primary:hover .btn__arrow {
filter: brightness(0) saturate(100%) invert(66%) sepia(25%) saturate(515%) hue-rotate(128deg) brightness(90%) contrast(87%);
} .btn--secondary {
border-color: var(--black);
}
.btn--secondary:hover {
border-color: var(--brand-color);	
}
.btn--secondary:hover .btn__text {
color: var(--brand-color);	
}
.btn--secondary:hover .btn__arrow {
filter: brightness(0) saturate(100%) invert(66%) sepia(25%) saturate(515%) hue-rotate(128deg) brightness(90%) contrast(87%);
} .btn--tertiary {
border-color: var(--white);
}
.btn--tertiary .btn__inner {
color: var(--white);
}
.btn--tertiary .btn__arrow {
filter: brightness(0) saturate(100%) invert(95%) sepia(0%) saturate(7500%) hue-rotate(97deg) brightness(105%) contrast(106%);
}
.btn--tertiary:before {
background-color: var(--white);
}
.btn--tertiary:hover .btn__text {
color: var(--black);
}
.btn--tertiary:hover .btn__arrow {
filter: brightness(0) saturate(100%) invert(0%) sepia(3%) saturate(0%) hue-rotate(255deg) brightness(96%) contrast(103%);
} .btn--quaternary {
border-color: var(--black);
}
.btn--quaternary:before {
background-color: var(--white);
}
.btn--quaternary:hover {
border-color: var(--brand-color);	
}
.btn--quaternary:hover .btn__text {
color: var(--brand-color);	
}
.btn--quaternary:hover .btn__arrow {
filter: brightness(0) saturate(100%) invert(66%) sepia(25%) saturate(515%) hue-rotate(128deg) brightness(90%) contrast(87%);
} .btn--quinary {
border-color: var(--brand-color);
}
.btn--quinary:before {
background-color: var(--brand-color);
}
.btn--quinary .btn__text {
color: var(--brand-color);
}
.btn--quinary .btn__arrow {
filter: brightness(0) saturate(100%) invert(66%) sepia(25%) saturate(515%) hue-rotate(128deg) brightness(90%) contrast(87%);
}
.btn--quinary:hover {
border-color: var(--black);	
}
.btn--quinary:hover .btn__text {
color: var(--black);	
}
.btn--quinary:hover .btn__arrow {
filter: brightness(0) saturate(100%) invert(0%) sepia(1%) saturate(5%) hue-rotate(304deg) brightness(97%) contrast(103%);
} .link {
text-transform: uppercase;
position: relative;
padding-bottom: 6px;
display: inline-block;
width: fit-content;
font-size: 14px;
text-transform: uppercase;
}
.link__inner {
display: flex;
align-items: center;
gap: 18px;
}
.link__text {
transform: translateY(2px);
font-family: var(--header-font);
font-weight: 600;
line-height: 140%;
letter-spacing: 1px;
}
.link__arrow {
width: 12px;
transition: var(--slow-transition);
}
.link:after {
content: '';
height: 1px;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
background-color: var(--black);
transition: var(--slow-transition);
}
.link:hover .link__arrow {
transform: translateX(4px);
} .news-filter-wrapper {
display: none;
}
.filter-button {
transition: var(--medium-transition);
}
.filter-button.active {
background-color: var(--light-brand-color);
}
.form-group {
position: relative;
}
.form-group svg {
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
}
.form-group select.form-control {
appearance: none;
border: solid 1px var(--black);
padding: 10px 38px 10px 16px;
font-family: var(--header-font);
text-transform: uppercase;
font-size: 14px;
letter-spacing: 1px;
color: var(--black);
}
.form-group select.form-control:focus-visible {
outline: none;
}
.form-group select.form-control option {
font-family: var(--header-font);
text-transform: uppercase;
font-size: 14px;
letter-spacing: 1px;
}
.form-group input[type="text"] {
font-family: var(--header-font);
text-transform: uppercase;
font-size: 14px;
letter-spacing: 1px;
padding: 10px 38px 10px 16px;
border: solid 1px var(--black);
border-radius: 0;
color: var(--black);
}
.form-group input[type="text"]::placeholder {
color: var(--black);
}
.form-group input:focus-visible {
outline: none;
}
.projects-overview__intro .form-group:last-child {
display: none;
} .news-overview__intro .form-group {
display: flex;
gap: 8px;
}
.news-overview__intro .radio {
border: 1px solid transparent;
border-color: var(--black);
width: fit-content;
cursor: pointer;
position: relative;
overflow: clip;
display: flex;
align-items: center;
justify-content: center;
transition: var(--medium-transition);
}
.news-overview__intro .radio input {
display: none;
}
.news-overview__intro .radio label {
cursor: pointer;
font-weight: 600;
font-family: var(--header-font);
letter-spacing: 1px;
font-size: 14px;
text-transform: uppercase;
padding: 12px 24px;
transition: var(--medium-transition);
}
.news-overview__intro .radio:hover {
border-color: var(--brand-color);	
}
.news-overview__intro .radio:hover label {
color: var(--brand-color);
}
.news-overview__intro .radio.active {
border-color: var(--brand-color);
}
.news-overview__intro .radio.active label {
color: var(--brand-color);
}   #masthead {
position: fixed;
z-index: 9999;
width: 100%;
display: flex;
justify-content: space-between;
padding: 32px var(--container-padding);
transition: var(--medium-transition);
}
#masthead .site-branding {
position: relative; 
z-index: 2;
}
@media (max-width: 768px) {
#masthead {
align-items: center;
}
}
#masthead.header--scrolled {
background-color: var(--white);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
padding: 12px var(--container-padding);
}
#masthead.header--scrolled #site-navigation:not(.mobile-navigation) .menu-main-menu-container,
.home #masthead.header--scrolled #site-navigation:not(.mobile-navigation) .menu-main-menu-container {
top: -50%;
transform: translateY(50%);
}
#masthead.header--scrolled .site-header-image,
.home #masthead.header--scrolled .site-header-image,
#masthead.header--scrolled.header--white .site-header-image {
filter: brightness(0) saturate(100%) invert(0%) sepia(100%) saturate(0%) hue-rotate(21deg) brightness(97%) contrast(103%);
height: 26px;
}
#masthead.header--scrolled .main-navigation .menu .menu-item a,
.home #masthead.header--scrolled .main-navigation .menu .menu-item a,
#masthead.header--scrolled.header--white .main-navigation .menu .menu-item a {
color: var(--black);
font-size: 14px;
}
#masthead.open .site-header-image,
.home #masthead.open .site-header-image,
#masthead.header--white.open .site-header-image {
filter: brightness(0) saturate(100%) invert(0%) sepia(100%) saturate(0%) hue-rotate(21deg) brightness(97%) contrast(103%);	
}
#masthead.open #hamburger-menu.hamburger-menu .bar,
.home #masthead.open #hamburger-menu.hamburger-menu .bar,
#masthead.header--white.open #hamburger-menu.hamburger-menu .bar {
background-color: var(--black);
}
#masthead.open #hamburger-menu.hamburger-menu .bar--1 {
transform: rotate(45deg) translateY(7.5px);
left: 25%;
}
#masthead.open #hamburger-menu.hamburger-menu .bar--2 {
transform: rotate(-45deg) translateY(-7.5px);
left: 25%;
}
#masthead.open #hamburger-menu.hamburger-menu .bar--3 {
height: 2px;
width: 40px;
transform: translateY(4px);
}
#masthead.header--scrolled #hamburger-menu.hamburger-menu .bar {
background-color: var(--black);
}
#masthead .site-header-image {
display: block;
height: 30px;
width: auto;
object-fit: contain;
object-position: left;
transition: var(--medium-transition);
}
.home #masthead .site-header-image,
#masthead.header--white .site-header-image {
filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(295deg) brightness(104%) contrast(101%);
}
#masthead .main-navigation {
display: flex;
align-items: flex-end;
justify-content: flex-end;
}
#masthead .mobile-navigation {
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100dvh;
width: 100%;
position: fixed;
top: 0;
left: 0;
background-color: var(--white);
overflow: hidden;
padding: 80px 20px;
transform: translateX(-100%);
transition: var(--medium-transition);
}
#masthead .menu-main-menu-container {
position: relative;
top: 0%;
transform: translateY(0%);
transition: var(--medium-transition);
}
#masthead .menu {
gap: 24px;
}
#masthead .menu .menu-item a {
color: var(--black);
transition: var(--medium-transition);
position: relative;
}
#masthead .menu .menu-item {
position: relative;
}
#masthead .menu .menu-item:not(.no-hover) a:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0%;
height: 1px;
background-color: var(--black);
transition: var(--medium-transition);
}
#masthead.header--scrolled .menu .menu-item:not(.no-hover) a:after {
background-color: var(--black);
}
#masthead .menu .menu-item a:hover:after {
width: 100%;
}
.home #masthead .menu .menu-item a:after,
#masthead.header--white .menu .menu-item a:after {
background-color: var(--white);
}
#masthead .menu .menu-item .sub-menu .menu-item a:after {
background-color: var(--black);
}
#masthead .menu .menu-item.current-menu-item > a:after {
width: 100%;
}
#masthead .menu .menu-item.current-page-ancestor > a:after {
width: 100%;
content: '';
position: absolute;
bottom: 0;
left: 0;
height: 1px;
background-color: var(--black);
transition: var(--medium-transition);
}
#masthead.header--white .menu .menu-item.current-page-ancestor > a:after {
background-color: var(--white);
}
#masthead.header--white.header--scrolled .menu .menu-item.current-page-ancestor > a:after {
background-color: var(--black);
}
#masthead ul.menu ul.sub-menu {
left: 50%;
top: 100%;
float: unset;
box-shadow: unset;
flex-direction: column;
gap: 8px;
transform: translateX(-50%);
padding: 28px 16px 16px;
opacity: 0;
pointer-events: none;
translate: 0 8px;
transition: var(--medium-transition);
}
#masthead ul.menu ul.sub-menu:before {
content: '';
position: absolute;
top: 14px;
right: 0;
left: 0;
bottom:0;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
background-color: var(--white);
}
#masthead .menu > .menu-item:hover .sub-menu {
opacity: 1;
pointer-events: all;
translate: 0 0;
}
.home #masthead .menu .menu-item a,
#masthead.header--white .menu .menu-item a {
color: var(--white);
}
.home #masthead .menu .menu-item .sub-menu .menu-item a,
#masthead.header--white .menu .menu-item .sub-menu .menu-item a {
color: var(--black);
}
#masthead .mobile-navigation .menu .menu-item.current-menu-item > span a:after {
width: 100%;
}  #masthead .mobile-navigation .menu {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 16px;
}
#masthead .mobile-navigation .menu .menu-item a {
color: var(--black);
}
#masthead .mobile-navigation .menu .menu-item a:after {
background-color: var(--black);
}
#masthead .mobile-navigation li.menu-item-has-children ul.sub-menu {
max-height: 0;
overflow: hidden;
display: flex;
flex-flow: column;
gap: 8px;
transform: unset;
padding: 0;
opacity: 1;
translate: unset;
transition: max-height 0.2s ease-out;
}
#masthead .mobile-navigation li.menu-item-has-children ul.sub-menu .menu-item {
padding: 8px 0 0;
}
#masthead .mobile-navigation ul.menu ul.sub-menu:before {
content: none;
}
#masthead .mobile-navigation .menu .menu-item.current-page-ancestor span a:after{
width: 100%;
content: '';
position: absolute;
bottom: 0;
left: 0;
height: 1px;
background-color: var(--black);
transition: var(--medium-transition);
}
#masthead .mobile-navigation li.menu-item-has-children > span div {
transition: var(--medium-transition);
}
#masthead .mobile-navigation li.menu-item-has-children > span.active div {
transform: rotate(45deg);
} .main-navigation .menu {
display: flex;
gap: 24px;
} #hamburger-menu {
display: none;
cursor: pointer;
flex-direction: column;
justify-content: space-between;
height: 24px;
position: relative;
}
#hamburger-menu .bar {
height: 3px;
width: 32px;
background-color: var(--black);
position: relative;
transition: all 0.3s ease;
}
.home #masthead #hamburger-menu .bar,
#masthead.header--white #hamburger-menu .bar {
background-color: var(--white);
} @media (max-width: 768px) {
#hamburger-menu {
display: flex;
}
#masthead .main-navigation {
display: none;
} #masthead .mobile-navigation {
display: flex;
}
#masthead.open .mobile-navigation {
transform: translateX(0%);
}
#masthead .site-header-image,
#masthead.header--scrolled .site-header-image {
height: 20px;
}
.menu-item-has-children > span {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
cursor: pointer;
}
.menu-item-has-children > span a {
margin: 0 !important;
padding: 0 !important;
}
.menu-item-has-children > span div {
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
transition: transform 0.3s ease;
position: relative;
color: var(--black); }
.menu-item-has-children > span div::before {
content: '+';
position: absolute;
font-weight: bold; }
.menu-item-has-children.active > span div::before {
content: '-';
}
.menu-item-has-children.active > .sub-menu {
max-height: 500px; padding: 16px 0;
} #site-navigation.open .sub-menu .menu-item a {
font-size: 18px;
color: var(--black) !important;
opacity: 0.8;
} #site-navigation.open #hamburger-menu .bar {
background-color: var(--black);
}
#site-navigation.open #hamburger-menu .bar:nth-child(1) {
top: 9px;
transform: rotate(45deg);
}
#site-navigation.open #hamburger-menu .bar:nth-child(2) {
opacity: 0;
}
#site-navigation.open #hamburger-menu .bar:nth-child(3) {
top: 9px;
transform: rotate(-45deg);
} #site-navigation.open .menu > .menu-item:not(:last-child) {
margin-bottom: 8px;
} .menu-item-has-children.active > .sub-menu .menu-item {
animation: fadeInSubmenu 0.3s ease forwards;
}
@keyframes fadeInSubmenu {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
}  .hero-over {
max-height: 100dvh;
overflow: hidden;
}
.hero-over__inner {
display: flex;
min-height: calc(100dvh - 111px); 
}
.hero-over__left {
width: 45%;
margin-top: 146px;
}
.hero-over__content {
padding: 64px 64px 64px var(--container-padding);
height: 100%;
}
.hero-over__intro-title {
margin-bottom: 8px;
}
.hero-over__intro-text {
margin-top: 32px;
margin-bottom: 0;
}
.hero-over__right {
width: 55%;
aspect-ratio: 407 / 301;
position: relative;
}
.hero-over__image {
position: absolute;
top: 0;
left: 0;
}
.hero-over__video {
display: block;
height: 100%;
width: 100%;
object-fit: cover;
}
@media (max-width: 768px) {
.hero-over {
max-height: unset;
}	
}
@media (min-width: 2560px) {
.hero-over {
max-height: unset;
}	
.hero-over__inner {
min-height: unset;
}
.hero-over__right {
max-height: 960px;
}
}  .grid-of-4 {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 64px 96px;
}
.grid-element {
display: block;
}
.grid-element:nth-child(odd) {
grid-column: 1;
}
.grid-element:nth-child(even) {
grid-column: 2;
}
.grid-element:nth-child(4n) {
margin-top: calc(-19% + 1px);
}
.grid-of-4 .grid-element:nth-child(4n + 1) .image-wrapper,
.grid-of-4 .grid-element:nth-child(4n) .image-wrapper {
aspect-ratio: 4/3;
}
.grid-of-4 .grid-element:nth-child(4n + 2) .image-wrapper,
.grid-of-4 .grid-element:nth-child(4n + 3) .image-wrapper {
aspect-ratio: 16/9;	
}
@media (max-width: 768px) {
.grid-of-4 .grid-element:nth-child(4n + 2) .image-wrapper,
.grid-of-4 .grid-element:nth-child(4n + 3) .image-wrapper {
aspect-ratio: 4/3;	
}
}
@media (max-width: 1240px) {
.grid-element:nth-child(4n) {
margin-top: unset;
}
} .swiper-pagination {
} .wpcf7 .wpcf7-form div p {
margin-bottom: 14px;
}
.wpcf7 br {
display: none;
}
.wpcf7-form-control-wrap {
display: block;
width: 100%;
}
.wpcf7-form-control-wrap .wpcf7-form-control {
padding: 12px 16px;
border-radius: 0;
border: none;
width: 100%;
font-family: var(--body-font);
font-size: 16px;
}
.wpcf7-form-control-wrap .wpcf7-form-control::placeholder {
font-family: var(--body-font);
color: var(--black);
font-size: 16px;
}
.wpcf7-form-control.wpcf7-submit {
margin-top: 32px;
}
.wpcf7-not-valid-tip {
font-size: 14px;
font-family: var(--body-font);
margin-top: 4px;
}
.wpcf7 form .wpcf7-response-output {
margin: 0;
}
.wpcf7-form-control.wpcf7-radio {
display: flex;
flex-direction: column;
gap: 8px;
padding: 0;
}
.wpcf7-form-control.wpcf7-radio .wpcf7-list-item {
margin: 0;
}
.wpcf7 label {
display: block;
font-family: var(--header-font);
margin-bottom: 16px;
}  .mc4wp-form input {
padding: 12px 16px;
border-radius: 0;
border: none;
width: 100%;
font-family: var(--body-font);
font-size: 16px;
}
.mc4wp-form input::placeholder {
color: var(--black);
}
.mc4wp-form input:focus-visible {
outline: none;
}
.mc4wp-form p {
margin-bottom: 14px;
}
.mc4wp-form p:last-child {
margin-bottom: 0;
}
.mc4wp-form .btn {
margin-top: 32px;
} .swiper-pagination .swiper-pagination-bullet {
width: 48px;
height: 4px;
background-color: var(--white);
opacity: 0.6;
border-radius: 0;
transition: var(--fast-transition);
}
.swiper-pagination .swiper-pagination-bullet-active {
opacity: 1;
} #colophon {
padding: 64px 0 0;
background-color: var(--black);
}
#colophon .site-info {
display: grid;
grid-template-columns: 200px 1fr 1fr 1fr;
grid-gap: 56px;
}
.footer__image {
object-fit: contain;
height: auto;
}
.footer__column-title {
color: var(--brand-color);
height: 48px;
margin-left: 32px;
}
.footer__column-title-2 {
color: var(--brand-color);
height: 90px;
}
.footer__column-title.lm-0 {
margin-left: 0;
}
.footer__column .footer__column-subtitle {
font-family: var(--header-font);
color: var(--brand-color);
margin-bottom: 8px;
margin-left: 32px;
}
.footer__column p {
color: var(--white);
}
.footer__text-wrapper {
display: flex;
gap: 8px;
}
.footer__text-wrapper p {
color: var(--white);
margin-bottom: 8px;
}
.footer__link p {
position: relative;
}
.footer__link p:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0%;
height: 1px;
background-color: var(--white);
transition: var(--slow-transition);
}
.footer__link:hover p:after {
width: 100%;
}
.footer__bar {
display: flex;
justify-content: space-between;
border-top: 1px solid var(--brand-color);
padding: 32px 0;
margin-top: 64px;
}
.footer__bar a, 
.footer__bar p {
color: var(--brand-color);
margin: 0;
}
.footer__links {
display: flex;
align-items: center;
gap: 8px;
}
.footer__links a {
position: relative;
}
.footer__links a:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0%;
height: 1px;
background-color: var(--brand-color);
transition: var(--slow-transition);
}
.footer__links a:hover:after {
width: 100%;
}
.footer__social-media {
display: flex;
gap: 16px;
}
.footer__social-media-link {
transition: var(--medium-transition);
}
.footer__social-media-link:hover {
scale: 1.1;
}
.footer__social-media-link svg {
width: 20px;
height: 20px;
}
.footer__social-media-link svg path {
fill: var(--brand-color);
}
.footer__column a.btn.btn--footer {
margin-top: 30px;
}
.btn--mobile {
display:none;
}
@media (max-width: 768px) { 
.btn--mobile {
display:block;
margin-bottom: 30px;
}
.btn--desktop {
display:none;
}
}   .animation-container {
overflow: hidden;
}
.home .site-branding,
.home .main-navigation {
transform: translateY(-200%);
}
.home-hero__title,
.home-hero__subtitle {
transform: translateY(100%);
}
.home-hero__scroll-down {
opacity: 0;
}
.hero-2 {
opacity: 0;
transform: translateY(24px);
}
.project-card-animation {
opacity: 0;	
}
.project-card-animation.show {
opacity: 1;
transition: var(--medium-transition);
}
.news-card {
opacity: 0;	
}
.news-card.show {
opacity: 1;
transition: var(--medium-transition);
}
.contact-form,
.contact-form__title,
.contact-form__top .divider, 
.contact-form__top .divider-wrapper > p,
.wpcf7-form-control-wrap {
opacity: 0;
transform: translateY(24px);
}
.contact-form__top .divider,
.contact-form__top .divider-wrapper > p {
width: 50%;
}
.services-overview {
opacity: 0;
transform: translateY(24px);
}
.hero-over__content h1, 
.hero-over__content .hero-over__intro-text,
.hero-over__content .divider,
.news-hero__date {
transform: translateY(24px);
opacity: 0;
}
.hero-over__video,
.hero-over__image {
transform: translateY(24px);
opacity: 0;
}
.news-overview__intro, 
.news-overview__grid {
transform: translateY(24px);
opacity: 0;
}
.news-overview__intro.show, 
.news-overview__grid.show {
opacity: 1;
}
.hero-3__title,
.hero-3 .animation-wrapper {
transform: translateY(100%);
} @media (max-width: 1440px) {
:root {
--container-padding: calc((100vw - 90vw) / 2);
}
h3 {
font-size: 28px;
line-height: 140%;
}
}
@media (max-width: 1160px) {
#colophon .site-info {
grid-template-columns: repeat(2, 1fr);
}
.footer__image-wrapper {
order: 4;
}
.footer__image {
width: 200px;
}
}
@media (max-width: 1024px) {
.footer__bar {
flex-direction: column;
gap: 32px;
}
}
@media (max-width: 768px) {
.small-container {
width: 90%;
}
#colophon .site-info {
grid-template-columns: 1fr;
}
.footer__image-wrapper {
order: -1;
}
.footer__column-title {
height: unset;
margin-bottom: 24px;
}
.footer__links {
flex-direction: column;
align-items: flex-start;
}
.footer__links .vertical-divider {
display: none;
}
.menu-item a {
font-size: 20px;
}
.hero-over__content {
padding: 64px var(--container-padding);
}
} @keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(4px);
}
}
@keyframes opacity-animation {
0%, 100% {
opacity: .4;
}
50% {
opacity: 1;
}
} html {
scroll-behavior: smooth;
} .cky-btn-revisit-wrapper.cky-revisit-bottom-left {
display: none;
}
.grecaptcha-badge {
display: none !important;
} .onderdeel {
min-height: calc(100dvh - var(--navbar-height));
position: sticky;
top: var(--navbar-height);
}
.onderdeel:last-child {
position: relative;
top: unset;
}
.onderdeel--white {
background-color: var(--white);
}
.onderdeel--infra {
background-color: var(--light-sand);
}
.onderdeel--water {
background-color: var(--light-water);
}
.onderdeel--green {
background-color: var(--light-brand-color);
}
.onderdeel__wrapper {
padding: 64px 0;
}
.onderdeel__link {
position: relative;
}
.onderdeel__link:after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
height: 1px;
width: 0;
background-color: var(--black);
transition: var(--slow-transition);
}
.onderdeel__link-inner {
display: flex;
align-items: center;
gap: 8px;
}
.onderdeel__link-text {
text-wrap: nowrap;
}
.onderdeel__link-arrow {
min-width: 12px;
max-width: 12px;
transition: var(--slow-transition);
}
.onderdeel__link:hover .onderdeel__link-arrow {
transform: translateX(6px);
}
.onderdeel__link:hover:after {
width: 100%;
}
.onderdeel__top-title-index {
margin-right: 32px;
}
.onderdeel__inner-wrapper {
overflow: hidden;
}
.onderdeel__inner {
display: flex;
gap: 64px;
}
.onderdeel__left,
.onderdeel__right {
width: 50%;
display: flex;
flex-direction: column;
}
.onderdeel__left {
align-items: flex-start;
}
.onderdeel__image-wrapper {
aspect-ratio: 586 / 450;
width: 100%;
}
.onderdeel__logo-wrapper {
width: 208px;
height: auto;
margin-top: 24px;
}
.onderdeel__logo {
object-fit: contain;
}
.onderdeel__content {
aspect-ratio: 586 / 450;
}
.onderdeel__content-title {
margin-bottom: 16px;
}
.onderdeel__categories {
display: flex;
flex-wrap: wrap;
gap: 32px;
}
@media (max-width: 768px) {
.onderdeel__wrapper {
padding: 32px 0 64px;
}
.onderdeel .divider-wrapper {
margin-bottom: 0;
padding-bottom: 16px;
}
.onderdeel__inner {
display: flex;
gap: 24px;
flex-direction: column;
}
.onderdeel__left, .onderdeel__right {
width: 100%;
display: flex;
flex-direction: column;
}
.onderdeel__left {
align-items: flex-start;
}
.onderdeel__content {
aspect-ratio: unset;
}
}
.page-work-area .contact-block {
margin-top: 0;
}
.page-work-area .contact-block__content {
position: relative;
}
.page-work-area:not(.systeem) .contact-block__content:after {
content: '';
width: 100%;
height: 96px;
position: absolute;
top: -96px;
left: 0;
background-color: var(--light-sand);
}
.page-work-area .wa-other__inner {
grid-template-columns: repeat(3, 1fr);
}
.page-work-area .wa-other-card__title {
font-size: 24px;
}
.page-work-area .wa-other-card__content {
height: 100%;
}
.page-work-area .wa-other-card__content .btn {
margin-top: auto;
}
.page-work-area .wa-intro__items {
justify-content: flex-start;
align-items: flex-end;
gap: 24px;
margin-bottom: 24px;
}
.page-work-area .wa-text__content {
justify-content: flex-start;
}
.page-work-area .wa-intro__image-text-content h2 {
hyphens: auto;
}
.two-text__top {
display: none;
} .contact-form {
background-color: var(--light-brand-color);
padding: 64px 0;
}
.contact-form .divider-wrapper {
align-items: flex-start;
margin-bottom: 32px;
gap: 32px;
}
.contact-form__form-top,
.contact-form__form-bottom {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-gap: 16px 32px;
}
.contact-form__form-top {
margin-bottom: 64px;
}
.contact-form .wpcf7 .wpcf7-form div p {
margin: 0;
}
.contact-form .wpcf7-form-control.wpcf7-submit {
margin: 0;
}
.contact-form .wpcf7-form-control-wrap .wpcf7-form-control {
background-color: transparent;
border-bottom: 1px solid var(--black);
padding-left: 0;
}
.contact-form .wpcf7-form-control.wpcf7-radio {
border-bottom: none;
}
.contact-form .contact-form__form-bottom p {
display: flex;
}
@media (max-width: 768px) {
.contact-form__form-top {
margin-bottom: 32px;
}
.contact-form {
background-color: var(--light-brand-color);
padding: 64px 0;
}
.contact-form__inner .col-span-12 {
padding-bottom: 28px;
} 
section.contact-form .container .contact-form__top .divider-wrapper p {
padding-top: 64px;
}
}  .headquarters__inner {
display: flex;
flex-direction: column;
gap: 64px;
}
.headquarters__location {
display: flex;
gap: 28px;
justify-content: space-evenly;
}
.headquarters__location:nth-child(even) {
flex-direction: row-reverse;
}
.headquarters__location-title {
margin-bottom: 24px;
}
.headquarters__location-info {
display: flex;
flex-direction: column;
gap: 8px;
}
.headquarters__location-info-wrapper {
display: flex;
align-items: center;
gap: 8px;
}
.headquarters__location-info-wrapper--first {
align-items: flex-start;
}
.headquarters__location-info-text {
margin: 0;
}
.headquarters__hours {
margin: 0;
font-size: 18px;
line-height: 170%;
}
.headquarters__hours-title {
margin: 0;
font-family: var(--header-font);
font-size: 20px;
line-height: 120%;
margin-bottom: 4px;
}
.headquarters__location-content .link {
margin: 40px 0;
}
@media (max-width: 768px) {
.headquarters__location {
display: flex;
gap: 24px;
justify-content: space-between;
flex-direction: column;
}
.headquarters__location:nth-child(even) {
flex-direction: column;
}
section:not(.no-section-margin).headquarters {
margin-top: 64px;
}
}