@font-face {
font-family: 'Inter';
src: url(//noorderimpact.nl/wp-content/themes/noorder-impact/fonts/Inter-VariableFont_slnt,wght.ttf) format('truetype');
font-weight: 1 999;
font-stretch: 1 100%;
font-style: normal;
font-display: swap;
}  
@font-face {
font-family: 'Tusker Grotesk';
src: url(//noorderimpact.nl/wp-content/themes/noorder-impact/fonts/TuskerGrotesk-9800Super.otf) format('truetype');
font-weight: 1 999;
font-stretch: 1 100%;
font-style: normal;
font-display: swap;
}  
:root {
--padding-main: 55px;
--color-main: #DADBCD;
--color-accent1: #9B9E25;
--color-accent2: #4625AF;
--color-accent3: #707070;
--color-white: white;
--color-black: black;
--font-menu: normal normal 600 30px Inter;
--font-company-title: normal normal normal 90px/120px Tusker Grotesk;
--font-text-title: Inter, 'sans serif';
--size-text-title: 6vw;
--font-text-body: Inter, 'sans serif';
--size-text-body: 2vw;
--font-text-footer: Inter, 'sans serif';
--size-text-footer: 20px;
--font-text-samenwerkingen: Tusker Grotesk, 'sans serif';
--grid-4: repeat(4, 1fr);
--grid-3: repeat(3, 1fr);
--grid-2: repeat(2, 1fr);
}
@media only screen and (max-width: 1120px) {
:root {
--size-text-title: 7vw;
--size-text-body: 3vw;
--font-company-title: normal normal normal 60px/70px Tusker Grotesk;
}
}
@media only screen and (min-width: 1921px) {
:root {
--size-text-title: 4vw;
--size-text-body: 1.5vw;
}
}
body {
margin: 0;
padding: 0;
background-color: var(--color-main);
}
h1,h2,h3,h4,h5,h6,p,span,a {
margin: 0;
padding: 0; }
.main-grid {
max-width: 1920px;
}
.grid-2 {
display: grid;
grid-template-columns: var(--grid-2);
}
.grid-3 {
display: grid;
grid-template-columns: var(--grid-3);
}
.grid-4 {
display: grid;
grid-template-columns: var(--grid-4);
}
.underscore {
text-decoration: underline;
} .site-header {
background-color: var(--color-main);
display: flex;
justify-content: space-between;
align-items: center;
height: 12vh;
position: fixed;
width: 100vw;
z-index: 9999;
}
#header-logo {
opacity: 0;
transition: opacity 0.5s ease-in-out;
cursor: pointer;
}
.show-logo {
opacity: 1 !important;
}
.header-logo {
width: 60px;
margin-right: 50px;
}
.menu {
margin: 0;
padding: 0;
list-style: none;
display: flex;
background-color: var(--color-main);
}
.menu-item {
display: flex;
align-items: center;
padding-left: 2vw;
padding-right: 2vw;
}
.menu-item a {
font: var(--font-menu);
text-decoration: none;
color: var(--color-accent2);
line-height: 0px;
padding-top: 6vh;
padding-bottom: 6vh;
font-size: 2vw;
}
ul.menu li {
transition: background-color 0.1s ease, background-position 1s;
}
.menu-menu-main-container ul.menu li.active, .menu-main-menu-english-container ul.menu li.active {
background-color: var(--color-accent2);
}
.menu-menu-main-container ul.menu li.active a, .menu-main-menu-english-container ul.menu li.active a {
color: var(--color-accent1);
} .hero {
padding-top: 12vh;
}
.hero-animatie {
background-size: cover; background-repeat: no-repeat;
background-position: center center;
}
.hero-grid {
height: 88vh;
display: grid;
grid-template-columns: 40% 60%;
}
.hero-icon {
display: flex;
justify-content: center;
align-items: center;
height: 44vh;
}
.hero-icon-img {
width: 150px;
}
.hero-titel {
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-accent2);
height: 44vh;
}
.hero-titel h1 {
font: var(--font-company-title);
text-align: end;
color: var(--color-accent1);
font-size: 7vw;
line-height: 7vw;
}
.lang-switcher {
position: absolute;
right: 30px;
display: flex;
}
.lang-switcher a, .lang-switcher p {
font-family: var(--font-text-body);
color: var(--color-accent2);
font-size: 25px;
text-transform: uppercase;
font-weight: 600;
text-decoration: none;
}
.lang-switcher a:hover {
font-weight: 900;
}
.container-impact-to-focus {
display: grid;
grid-template-columns: 60% 40%;
}
.container-inner-impact-to-focus-1 {
}
.container-inner-impact-to-focus-2 {
} .impact-titel h2 {
font-family: var(--font-text-title);
font-size: var(--size-text-title);
font-weight: normal;
letter-spacing: -3.12px;
}
.impact-titel-top {
background-color: var(--color-accent1);
color: var(--color-main);
padding: var(--padding-main);
}
.impact-titel-bottom {
padding-left: var(--padding-main);
color: var(--color-accent2);
padding-bottom: 80px;
margin-top: -70px;
}
.impact-tekst-container {
margin-top: var(--padding-main);
margin-bottom: var(--padding-main);
}
.impact-tekst-container p {
font-family: var(--font-text-body);
color: var(--color-accent2);
font-size: var(--size-text-body);
padding-left: var(--padding-main);
padding-right: var(--padding-main);
}
.impact-tekst-container p:first-child {
padding-bottom: var(--padding-main);
} .heartrain-balk {
display: flex;
justify-content: end;
margin-top: -400px;
padding-right: var(--padding-main);
display: none;
}
.heartrain-img {
width: 306px;
}
.ambitie-balk {
height: 40px;
background: var(--color-accent1);
}
.ambitie-balk-inner {
height: 40px;
width: 61%;
background: var(--color-main);
}
.heartglobe-balk {
background: transparent;
display: flex;
justify-content: end;
padding-right: var(--padding-main); }
.heartglobe-img {
width: 80px;
}
.heartglobe-balk_container {
background-color: var(--color-main);
padding-left: 100px;
padding-right: 100px;
display: flex;
flex-direction: column;
position: absolute;
gap: 80px;
margin-top: -220px;
}
.ambitie {
background-color: var(--color-accent1);
}
.ambitie-titel-container {
width: 61%;
background-color: var(--color-accent2);
padding-top: 20px;
}
.ambitie-titel {
font-family: var(--font-text-title);
font-size: var(--size-text-title);
font-weight: normal;
color: var(--color-main);
padding-left: var(--padding-main);
padding-right: var(--padding-main);
}
.ambitie-tekst-container {
background-color: var(--color-accent2);
padding-top: var(--padding-main);
padding-bottom: var(--padding-main);
}
.ambitie-tekst-container p {
font-family: var(--font-text-body);
color: var(--color-main);
font-size: var(--size-text-body);
padding-left: var(--padding-main);
padding-right: var(--padding-main);
}
.ambitie-c2 .ambitie-titel {
padding-left: 0;
padding-top: 40px;
}
.ambitie-c2 .ambitie-tekst {
padding-left: 0;
padding-bottom: 40px;
width: 50%;
}
.ambitie-c1 .ambitie-tekst {
width: 65%;
}
.ambitie-c2 {
padding-left: var(--padding-main);
padding-right: var(--padding-main);
}
.ambitie-c2, .ambitie-c3 {
background-color: var(--color-accent1);
}
.ambitie-c3 {
padding-right: var(--padding-main);
}  .focus { padding-top: var(--padding-main);
padding-bottom: 120px;
}
.focus h3 {
font-family: var(--font-text-body);
color: var(--color-accent2);
font-size: var(--size-text-body);
padding-left: var(--padding-main);
padding-right: var(--padding-main);
font-weight: 400;
margin-bottom: 50px;
}
.focus p {
font-family: var(--font-text-body);
color: var(--color-accent2);
font-size: var(--size-text-body);
padding-left: var(--padding-main);
padding-right: var(--padding-main);
margin-bottom: var(--padding-main);
}
.focus-img-div {
display: flex;
justify-content: space-evenly;
flex-direction: column;
align-items: center;
height: 100%;
}
.heart-globe-focus {
width: 180px;
}
.focus-balk {
height: 10vh;
background-color: var(--color-accent2);
margin-right: 20px;
}
.focus-balk-inner {
height: 10vh;
background-color: var(--color-main);
width: 20%;
} .geluk {
background-color: var(--color-accent1);
display: flex;
flex-direction: column;
justify-content: center;
padding-top: 140px;
padding-bottom: 140px;
}
.geluk h3 {
font-family: var(--font-text-body);
color: var(--color-main);
font-size: var(--size-text-body);
padding-left: var(--padding-main);
padding-right: var(--padding-main);
font-weight: 400;
padding-bottom: var(--padding-main);
}
.geluk p {
font-family: var(--font-text-body);
color: var(--color-main);
font-size: var(--size-text-body);
padding-left: var(--padding-main);
padding-right: var(--padding-main);
font-weight: 300;
}
.geluk-img {
max-width: 260px;
object-fit: contain;
}
.geluk-heart-container {
display: flex;
justify-content: center;
padding-right: var(--padding-main);
}
@media only screen and (min-width: 1120px) {
.geluk .grid-2 {
grid-template-columns: 2fr 1fr;
}	
} .watwedoen {
padding-top: 120px;
}
.watwedoen .grid-2 {
grid-template-columns: 1fr 3fr;
}
.watwedoen-img-1 {
position: relative;
width: 100%;
}
.watwedoen-img-2 {
width: 25%;
position: absolute;
margin-left: -25%;
}
.watwedoen h3 {
font-family: var(--font-text-body);
color: var(--color-accent2);
font-size: var(--size-text-body);
padding-left: var(--padding-main);
padding-right: var(--padding-main);
font-weight: 400;
font-size: var(--size-text-title);
margin-top: 40px;
}
.watwedoen p {
font-family: var(--font-text-body);
color: var(--color-accent2);
font-size: var(--size-text-body);
padding-left: var(--padding-main);
padding-right: var(--padding-main);
font-weight: 300;
} .voorzien {
height: 80vh;
max-height: 100vh;
background-color: var(--color-accent1);
}
.voorzien h3 {
font-family: var(--font-text-body);
color: var(--color-main);
font-size: var(--size-text-body);
padding-left: var(--padding-main);
padding-right: var(--padding-main);
font-weight: 400;
font-size: var(--size-text-title);
padding-bottom: 20px;
padding-top: 20px;
}
.voorzien p {
font-family: var(--font-text-body);
color: var(--color-main);
font-size: var(--size-text-body);
padding-left: var(--padding-main);
padding-right: var(--padding-main);
padding-bottom: 100px;
font-weight: 300;
}
.voorzien div {
display: flex;
justify-content: end;
flex-direction: column;
} .begeleiding { }
.begeleiding h3 {
font-family: var(--font-text-body);
color: var(--color-accent2);
font-size: var(--size-text-body);
padding-left: var(--padding-main);
padding-right: var(--padding-main);
font-weight: 400;
font-size: var(--size-text-title);
padding-bottom: 20px;
padding-top: 20px;
}
.begeleiding p {
font-family: var(--font-text-body);
color: var(--color-accent2);
font-size: var(--size-text-body);
padding-left: var(--padding-main);
padding-right: var(--padding-main);
padding-bottom: 100px;
font-weight: 300;
}
.begeleiding div {
display: flex;
justify-content: end;
flex-direction: column;
} .metwie {
background-color: var(--color-accent2); display: flex;
flex-direction: column;
justify-content: center;
padding-top: 120px;
padding-bottom: 120px;
padding-left: var(--padding-main);
padding-right: var(--padding-main);
}
.metwie h2 {
font-family: var(--font-text-body);
color: var(--color-main);
font-size: var(--size-text-body);
font-weight: 400;
font-size: var(--size-text-title);
padding-bottom: 20px;
}
.metwie p {
font-family: var(--font-text-body);
color: var(--color-main);
font-size: var(--size-text-body);
font-weight: 300;
}
.metwie .grid-2 {
gap: 20px;
} .samenwerkingen {
display: flex;
flex-direction: column;
justify-content: center;
padding-top: 120px;
padding-bottom: 120px;
}
.samenwerkingen p {
font-family: var(--font-text-body);
color: var(--color-accent2);
font-size: var(--size-text-body);
padding-left: var(--padding-main);
padding-right: var(--padding-main);
padding-bottom: var(--padding-main);
font-weight: 300;
}
.samenwerkingen-title-container {
padding-left: var(--padding-main);
padding-right: var(--padding-main);
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
}
.samenwerkingen-title a {
font-family: var(--font-text-samenwerkingen);
color: var(--color-accent2);
font-size: var(--size-text-body);
font-weight: 300;
text-decoration: none;
} .overons { display: flex;
flex-direction: column;
justify-content: center;
background-color: var(--color-accent2);
padding-top: 120px;
padding-bottom: 120px;
padding-left: var(--padding-main);
padding-right: var(--padding-main);
}
.overons h3 {
font-family: var(--font-text-body);
color: var(--color-main);
font-size: var(--size-text-body); font-weight: 400;
font-size: var(--size-text-title);
padding-bottom: 20px;
}
.overons p {
font-family: var(--font-text-body);
color: var(--color-main);
font-size: var(--size-text-body); font-weight: 300;
}
.overons .grid-2 {
gap: 20px;
}
.overons-mensen-mobile {
overflow: hidden;
}
.overons-mensen, .overons-mensen-mobile {
background-color: var(--color-main);
padding-left: var(--padding-main);
padding-right: var(--padding-main);
padding-top: var(--padding-main);
padding-bottom: var(--padding-main);
gap: 20px;
}
.overons-mensen p, .overons-mensen-mobile p {
padding-bottom: 20px;
}
.overons-mensen-img {
margin-bottom: 20px;
max-width: 216px;
}
.overons-mensen p, .overons-mensen a, .overons-mensen-mobile p, .overons-mensen-mobile a {
font-family: var(--font-text-body);
color: var(--color-accent2);
font-size: var(--size-text-footer);
padding-top: 0;
padding-bottom: 20px;
text-decoration: none;
}
.mensen-dividing {
display: flex;
justify-content: space-between;
flex-direction: column;
}
.posts-section-title {
font-family: var(--font-text-body);
color: var(--color-main);
font-size: var(--size-text-body);
font-weight: 400;
font-size: var(--size-text-title);
padding-bottom: 20px;
}
.posts {
padding-left: var(--padding-main);
padding-right: var(--padding-main);
background-color: var(--color-accent2);
padding-top: 80px;
padding-bottom: 40px;
gap: 20px;
}
.posts-title {
font-family: var(--font-text-body);
color: var(--color-main);
font-size: var(--size-text-body);
font-weight: 300;
}
.posts-body {
gap: 5px;
display: flex;
flex-direction: column;
margin-bottom: 20px;
}
.posts .grid-4 {
gap: 20px
}
.posts-body p {
font-family: var(--font-text-body);
color: var(--color-main);
font-size: var(--size-text-footer);
font-weight: 200;
}  .footer-inner {
padding-left: var(--padding-main);
padding-right: var(--padding-main);
padding-top: var(--padding-main);
padding-bottom: var(--padding-main);
gap: 20px;
}
.footer-inner p, .footer-inner a {
font-family: var(--font-text-footer);
font-size: var(--size-text-footer);
color: var(--color-accent2);
text-decoration: none;
}
@media only screen and (max-width: 1121px) {
.samenwerkingen-title-container {
grid-template-columns: 1fr 1fr;
}
}
@media only screen and (max-width: 821px) {
.hero-titel h1 {
font-size: 50px;
}
:root {
--grid-4: repeat(2, 1fr);
--grid-3: repeat(1, 1fr);
--grid-2: repeat(1, 1fr);
}
} .hero-mobile, .impact-mobile, .focus-mobile, .overons-mensen-mobile, #mobile-menu-section, .mobile-menu-title, #mobile-menu-hamburger, .lang-mobile {
display: none;
}
@media only screen and (max-width: 1120px) {
:root {
--grid-4: repeat(1, 1fr);
--grid-3: repeat(1, 1fr);
--grid-2: repeat(1, 1fr);
--size-text-body: 6vw; --size-text-title: 40px;
--size-text-body: 20px;
--size-text-footer: 20px;		
--size-text-mobile: 15px;
--padding-main: 30px;
}
.hero-mobile, .impact-mobile, .focus-mobile, .overons-mensen-mobile, #mobile-menu-section, .mobile-menu-title, #mobile-menu-hamburger, .lang-mobile {
display: block;
}
.hero-titel {
height: 16vh;
justify-content: center;
display: flex;
flex-direction: column;
position: fixed;
width: 100%;
z-index: 10;
margin-top: -16vh;
}
.impact-mobile {
font-family: var(--font-text-body);
font-size: var(--size-text-title);
color: var(--color-main); padding-bottom: var(--padding-main);
font-weight: 300;
}
.impact-titel-mobile {
background-color: var(--color-accent1);
font-family: var(--font-text-body); font-size: var(--size-text-title);
padding-top: var(--padding-main);
padding-left: var(--padding-main);
padding-right: var(--padding-main);
margin-bottom: var(--padding-main);
}
.impact-titel-mobile h2 {
font-family: var(--font-text-body);
font-size: var(--size-text-title);
padding-bottom: var(--padding-main);
font-weight: 300;
}
.impact-tekst-container {
width: unset;
margin-top: unset;
}
.focus {
padding-bottom: 0;
}
.focus-img-div img {
width: 70px;
filter: invert(1) grayscale(7) brightness(1);
}
.focus-img-div {
margin-top: unset;
padding-top: calc(2 * var(--padding-main));
padding-bottom: calc(2 * var(--padding-main));
background-color: var(--color-accent2);
height: unset;
}
.focus-mobile {
padding-top: var(--padding-main);
padding-bottom: var(--padding-main);
padding-left: var(--padding-main);
padding-right: var(--padding-main);
background-color: var(--color-accent1);
}
.focus-mobile h3 {
font-family: var(--font-text-body);
font-size: var(--size-text-title);
color: var(--color-main);
padding-bottom: var(--padding-main);
font-weight: 300;
}
.focus-mobile p {
font-family: var(--font-text-body);
font-size: var(--size-text-body);
color: var(--color-main);
font-weight: 300;
}
.geluk-heart-container {
padding-right: unset;
}
.samenwerkingen-title-container {
grid-template-columns: 1fr;
}
.site-header, .hero, .impact, .heartrain-balk, .ambitie-balk, .heartglobe-balk, .focus-balk, .overons-mensen, .heart-rain-focus {
display: none;
}
.hero-icon-img {
width: 9vw;
}
.hero-mobile h1 {
font-family: var(--font-text-samenwerkingen);
color: var(--color-accent1);
background-color: var(--color-accent2);
text-align: end;
justify-content: center;
display: flex;
font-size: 9vw;
line-height: 9vw;
}
.hero-animatie {
height: 84vh;
margin-top: 16vh;
}
.metwie {
padding-top: calc(2 * var(--padding-main));
padding-bottom: calc(2 * var(--padding-main));
}
.watwedoen { padding-top: 0;
padding-bottom: calc(2 * var(--padding-main));
}
.samenwerkingen {
padding-top: calc(2 * var(--padding-main));
padding-bottom: calc(2 * var(--padding-main));
}
.watwedoen-img-2 {
width: 100%;
margin-left: -100%;
}
.geluk {
padding-top: calc(2 * var(--padding-main));
padding-bottom: calc(2 * var(--padding-main));
}
.overons {
padding-top: calc(2 * var(--padding-main));
padding-bottom: calc(2 * var(--padding-main));
}
.geluk-img { width: 70px;
padding-top: 60px;
}
.samenwerkingen-title-container, .footer-inner {
gap: 20px;
} .menu {
display: block;
}
.mobile-menu-title {
height: 14vh;
position: absolute;
width: 100%;
font-family: var(--font-text-body);
font-size: var(--size-text-title);
font-weight: 300;
display: flex;
justify-content: center;
align-items: center;
}
#mobile-menu-container-focus {
display: none;
}
#mobile-menu-section {
height: 84vh;
position: fixed;
width: 100%;
top: 16vh;
z-index: 999999;
}
.menu-item {
height: 14vh;
padding-left: var(--padding-main);
padding-right: var(--padding-main);
}
.menu-item a {
font-size: 8vw;
}
#mobile-menu-hamburger {
position: fixed;
top: 0;
right: 0;
z-index: 9999999;
}
#mobile-menu-hamburger img {
width: 20px;
display: flex;
margin-top: 10px;
margin-right: 10px;
}
#mobile-menu-section .active {
background-color: unset;
}
#mobile-menu-section .active a {
color: var(--color-accent2);
}
#primary-menu-mobile li:nth-child(even) {
background-color: var(--color-accent2);
}	
#primary-menu-mobile li:nth-child(even) a {
color: var(--color-accent1);
}
.posts-title {
font-size: var(--size-text-title);
padding-bottom: var(--padding-main);
}
.overons-mensen-mobile p, .overons-mensen-mobile a, .posts-body p {
font-size: var(--size-text-mobile);
}
.posts {
padding-top: calc(2 * var(--padding-main));
padding-bottom: calc(2 * var(--padding-main));
gap: 0;
}
.overons-mensen-mobile {
padding-top: calc(2 * var(--padding-main));
padding-bottom: calc(2 * var(--padding-main));
}
.swiper-container {
width: 80%;
margin: 0 auto;
}
.swiper-slide {
width: 220px;
}
.overons-mensen-mobile p, .overons-mensen-mobile a {
padding-bottom: 0;
}
.watwedoen h3 {
padding-top: calc(2 * var(--padding-main));
} .container-impact-to-focus {
grid-template-columns: 1fr;
}
.container-inner-impact-to-focus-1 {
}
.container-inner-impact-to-focus-2 {
}
.impact-tekst-container {
margin-bottom: unset;
}
.lang-mobile {
color: var(--color-main);
right: 10px;
top: calc(16vh + 10px );
display: flex;
}
.ambitie-titel {
margin-bottom: var(--padding-main);
} .swiper-slide {
gap: 20px;
display: flex;
flex-direction: column;
margin-right: 50px;
}
.overons-mensen-img {
margin-bottom: 0;
} .watwedoen .grid-2 { display: flex;
flex-direction: column-reverse;
}
} @media only screen and (max-width: 1550px) {
.impact-titel h2 {
font-size: 5vw;
}
}
.nl-active .nl-lang {
font-weight: 900;
}
.en-active .en-lang {
font-weight: 900;
} @media only screen and (max-width: 1120px) {
.hero-mobile h1 {
font-size: 5vw;
line-height: 5vw;
}
.hero-icon-img {
width: 28vw;
}
}
@media only screen and (max-width: 720px) {
.hero-mobile h1 {
font-size: 7vw;
line-height: 7vw;
}
.hero-icon-img {
width: 50vw;
}
} @media only screen and (max-device-width: 1120px) and (orientation: landscape) {
.hero-mobile h1 {
font-size: 2vw;
line-height: 2vw;
}
.hero-icon-img {
width: 20vw;
}
.hero-animatie {
height: 940px;
}
.menu-item a {
font-size: 4vw;
}
} @media only screen and (min-width: 1120px) {
#nieuws .grid-4 {
display: grid;
grid-auto-flow: column;
grid-auto-columns: auto;
overflow-x: auto;
gap: 1rem;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
#nieuws .grid-4::-webkit-scrollbar {
display: none;
}
#nieuws .grid-4 .posts-body {
width: 500px;
}
}