/* GENERAL */

* {padding: 0; margin: 0; box-sizing: border-box;}
html {font-size: 16px; scroll-behavior: smooth;}
body {font-size: 1rem; font-family: 'Roboto', sans-serif; color: #333685; line-height: 1.55;}
p {margin-bottom: 1.55rem;}
a {color: #333685;}
img {display: block; max-width: 100%; height: auto;}
p img {margin-bottom: 0.15rem;}
.container {width: 100%; max-width: 53rem; margin: 0 auto; padding: 0 2rem;}
.container.wide {max-width: 70rem;}
h1, h2 {font-size: 1.75rem; line-height: 1.2; padding: 0.5rem 0;}
.year, .type {font-size: 80%; font-weight: normal; display: block;}
.type {position: relative; bottom: 0.075rem; text-transform: capitalize;}
.date .year {padding-left: 0; padding-bottom: 0.2rem;}


/* BREADCRUMBS */

.breadcrumbs ul {display: flex; position: abslute; margin: -3.25rem 0 1.9rem 12rem; font-size: 0.9rem; max-width: 100%;}
.breadcrumbs ul li {list-style: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0;}
.breadcrumbs ul li::after {content: "/"; margin: 0 0.5rem;}
.breadcrumbs ul li:last-child {flex-shrink: 1;}
.breadcrumbs ul li:last-child::after {content: none;}


/* FORM */

form.questionnaire > div {padding: 0.35rem 0;}
form > div {display: flex; flex-direction: column; padding: 1rem 0 1.5rem;}
form.formbuilder > div .options {display: flex; flex-direction: column; margin-left: 2rem;}
form.formbuilder > div .options.checkbox li, form > div .options.radio li {list-style: none; margin-left: -0.85rem;}
form.formbuilder > div label {padding-bottom: 0; display: block;}
form.formbuilder > div > label {padding-bottom: 0.25rem; font-weight: bold;}
form.formbuilder > div input[type="radio"], form.formbuilder > div input[type="checkbox"] {margin-right: 0.25rem; background: rgba(51, 54, 133, 0.05);}
form.formbuilder > div .options input:not([type="radio"], [type="checkbox"]) {
    padding: 0.05rem 0.2rem; 
    border: 1px solid rgba(51, 54, 133, 0.5);;
    width: 5rem;
    background: rgba(51, 54, 133, 0.05);
}
form.formbuilder > div input, form.formbuilder > div textarea {
    border: 1px solid rgba(51, 54, 133, 0.5);;
    padding: 0.5rem 0.25rem;
    font-family: 'Roboto', sans-serif;
    color: #333685;
    font-size: 1rem;
    background: rgba(51, 54, 133, 0.05);
}
form.formbuilder > div textarea {resize: vertical;}
form.formbuilder input {
    padding: 0.5rem 0.25rem; 
    border: 0; 
    font-family: 'Roboto', sans-serif; 
    color: #333685;
    font-size: 1rem;
}
form.formbuilder input[type="submit"] {
    background: #199eda;
    color: white;
    border: 0;
    padding-inline: 1rem;
    cursor: pointer;
}
form.formbuilder > div:has(input:user-invalid, textarea:user-invalid) {background: rgba(255, 0, 0, 0.1); margin-inline: -1rem; padding-inline: 1rem;}
form.formbuilder > div:has(textarea:user-invalid) textarea,
form.formbuilder > div:has(input:user-invalid) input {background: white!important; outline-color: red;}



/* MAIN */

main {
    padding: 5.5rem 0 5rem;
    background: url(/img/bluebar.svg) calc(50% - 59.65rem - 14rem) top / 119.3rem auto no-repeat;
    margin-top: 9.1rem;
}
main .content ol, main .content ul {margin-left: 1rem; margin-bottom: 1.55rem;}
main .content ol {margin-left: 1.5rem;}
body.home main > .container > p:first-child {
    font-weight: bold; 
    font-size: 1.75rem; 
    max-width: 44rem; 
    margin: 0.5rem auto 2em;    
}
body.home main > .container > p:first-child em {font-style: normal; color: #0c9d39;}
main > .container > *:not(.grid, .diy, .featured_step, .faq, .animation, .topics, .questionnaire, .statistics, .carousel, .featured_image, .breadcrumbs, .steps) {max-width: 44rem; margin-left: auto; margin-right: auto; padding-left: 0;}
main h1 {padding-bottom: 1.75rem;}
main .date + h1 {margin-top: -0.25rem; padding-top: 0;}
main > .container > p > img {margin: 0 -2.5rem; min-width: calc(100% + 5rem); border-bottom-right-radius: 2rem;}
body main > .container > ol:not([class]) {padding-left: 2rem;}
body main > .container > ul:not([class]) {padding-left: 1rem;}
main > .container > * + h2 {margin-bottom: 0.25rem; padding-top: 1rem; font-size: 1.35rem;}


/* CARDS */

.card {margin-bottom: 1.55rem;}
.card > div {overflow: auto;}
.card:not(.white) > div {padding: 2rem 2rem 2.25rem;}
.card > div >*:last-child {margin-bottom: 0!important;}
.card.darkblue {background: #333685; color: white; font-weight: normal;}
.card.orange {background: #e86b27; color: white; font-weight: normal;}
.card.blue {background: #199eda; color: white; font-weight: normal;}
.card.green {background: #0c9d39; color: white; font-weight: normal;}
.card.yellow {background: #F8B106; color: white; font-weight: normal;}
.card.imageleft p:first-child {float: left; width: 45%; margin-right: 5%;}
.card a {color: white;}

/* STEPS */

.steps {padding-top: 1rem;}
.steps > div:not(.title_left) {
    background: #333685; 
    color: white; 
    margin-bottom: 1rem;
    border-bottom-right-radius: 2rem;
    display: flex;
}
.steps > div .number {
    background: white; 
    color: #333685;
    border-radius: 100%; 
    width: 8.5rem; 
    height: 8.5rem; 
    line-height: 8.5rem;
    text-align: center; 
    font-size: 3.5rem;
    font-weight: bold;
    margin: 1.25rem 3rem;
}
.steps > div:not(.title_left) > div {display: flex; flex-direction: column; justify-content: center; flex: 1;}
.steps > div > div p {padding-right: 2rem;}
.steps > div > div a {color: white;}
.steps > div > div :last-child {margin-bottom: 0;}
.steps > div > div img {position: absolute; width: 8rem; height: 8rem; border-radius: 100%; object-fit: cover; margin-left: 10.5rem;}
.steps > div:last-child {border-radius: 0;}
.featured_step {background: #e3e3e3; margin-bottom: 3rem; padding-top: 1.25rem; border-bottom-right-radius: 2rem; margin-top: -1rem;}
.featured_step p {padding: 1rem 2.5rem;}
.featured_step .images {
    display: flex; 
    gap: 1.75rem; 
    padding: 0 2rem 2.5rem; 
    flex-wrap: wrap; 
    max-width: 48rem;
    margin: -0.5rem auto 0;
}
.featured_step .images > * {
    width: calc(50% - 1rem); 
    display: block; 
    position: relative; 
    border-bottom-right-radius: 0rem; 
    overflow: hidden;
    text-decoration: none;
    padding: 0.5rem 0.65rem 0.65rem;
    background: white;
}
.featured_step .images > a:nth-child(1) {color: #ea6923;}
.featured_step .images > a:nth-child(2) {color: #f9b507;}
.featured_step .images > a:nth-child(3),
.featured_step .images > a:nth-child(4) {color: #1d9cd9;}
.featured_step .images > a > span:nth-child(1),
.featured_step .images > a > span:nth-child(2) {
    background: white;
    display: block;
    padding: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: bold;
    font-size: 1.1rem;
    line-height: 1.3;
}
.featured_step .images > a > span:nth-child(2) {
    padding: 0 0 0.5rem;
    font-size: 0.9rem;
    font-weight: normal;
}
.featured_step .images > a > span:nth-child(3) {
    position: absolute;
    right: 1.15rem;
    margin-top: 0.5rem;
    background: #1d9cd9;
    color: white;
    font-weight: bold;
    display: inline-block;
    padding: 0 0.5rem;
}
.featured_step .images > * span.green {
    position: relative; 
    background: #0c9d39;
    display: block;
    color: white;
    text-decoration: none;
    padding: 0.25rem 3rem;
    text-align: right;
}
.featured_step p:last-child {position: relative; bottom: 1.75rem; padding-bottom: 1rem;}


/* HEADER */

header {
    background: url(/img/greenbar.svg) calc(50% + 59.65rem - 14rem) bottom / 119.3rem auto  no-repeat, 
    linear-gradient(to bottom, #97c9db00 20%, #97c9db80 100%), white;
    padding-top: 0.8rem;
    position: absolute;
    width: 100%;
    top: 0;
    z-index: 9;
}
header .container.header {
    display: flex; 
    justify-content: space-between; 
    position: relative; 
    z-index: 2;
    max-width: 48rem; 
    padding-bottom: 0.55rem;
}
header .container.header .logo {
    display: block; 
    margin-bottom: -3rem; 
    margin-top: 0.25rem;
}
header .container.header .logo img {
    transition: transform 0.1s ease-in-out; 
    transform: scale(1);
}
header .container.header .logo img:hover {
    transform: scale(1.07);
}
header .container.header .logo .lighthouse {
    width: 2rem;
    height: 3rem;
    background: url(/img/lighthouse_red.svg) center center / contain no-repeat;
    position: absolute;
    top: 0.75rem;
    left: 21rem;
    transition: filter 0.3s ease-in-out;
}
@keyframes lighthouse {
    0% {opacity: 1; transform: scaleX(-1); clip-path: polygon(0 0, 100% 2.5rem, 0 100%);}
    20% {opacity: 1;}
    25% {opacity: 0;}
    30% {opacity: 1;}
    50% {opacity: 1; transform: scaleX(1); clip-path: polygon(0 0, 100% 2.5rem, 0 100%);}
    70% {opacity: 0.25;}
    75% {opacity: 0;}
    80% {opacity: 0.25;}
    100% {opacity: 1; transform: scaleX(-1); clip-path: polygon(0 0, 100% 2.5rem, 0 100%);}
}
@keyframes lighthouse2 {
    0% {margin-left: 24rem;}
    20% {opacity: 0;}
    25% {opacity: 1;}
    30% {opacity: 0;}
    50% {margin-left: -30rem;}
    70% {opacity: 0;}
    75% {}
    80% {opacity: 0;}
    100% {margin-left: 24rem;}
}
@keyframes lighthouse3 {
    0% {height: 5.1rem;}
    25% {height: 5.1rem;}
    26% {height: 12rem;}
    75% {height: 12rem;}
    76% {height: 5.1rem;}
    100% {height: 5.1rem;}
}
header .container.header .beam {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    margin-left: -8.05rem;
    margin-top: -1.4rem;
    overflow: hidden;
    width: 60rem;
    height: 5.1rem;
    animation-name: lighthouse3;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(0.74, 0, 0.26, 1);
    transform-origin: center top;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
    max-width: calc(100% + 12rem);
}
header .container.header .beam::after {
    content: "";
    position: absolute;
    z-index: 2;
    left: 30rem;
    display: block;
    width: 30rem;
    height: 12rem;
    margin-left: -30rem;
    background: linear-gradient(to right, transparent, rgba(0, 20, 37, 0.035));
    clip-path: polygon(0 0, 100% 2.5rem, 0 100%);
    pointer-events: none;
    animation-name: lighthouse;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(0.74, 0, 0.26, 1);
    transform-origin: right center;
}
header .container.header .beam::before {
    content: "";
    position: absolute;
    z-index: 2;
    background: white;
    display: block;
    width: 12rem;
    left: 30rem;
    height: 6rem;
    margin-left: -30rem;
    animation-name: lighthouse2;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(0.74, 0, 0.26, 1);
    transform-origin: right center;
    filter: blur(3rem);
    opacity: 0;
    pointer-events: none;
}
header .container.header .logo img {height: 4.1rem; width: auto; position: relative;}
header .container.header .search {
    display: inline-block; 
    vertical-align: middle;
    margin-bottom: -2.3rem;
    cursor: pointer;
    transition: transform 0.1s ease-in-out; 
    transform: scale(1);
}
header .container.header .search:hover {
    transform: scale(1.1);
}
header .container.header .search img {height: 1.9rem; position: relative; top: 0.1rem; width: auto;}
header .container.header .language {margin-left: 0.9rem; display: inline-block; vertical-align: middle; margin-bottom: -2.5rem; margin-top: 0.4rem;}
header .container.header .language a {display: inline-block; line-height: 0; position: relative; transition: transform 0.1s ease-in-out; transform: scale(1);}
header .container.header .language a:hover {transform: scale(1.2);}
header .container.header .language img {width: 1.3rem; height: 1.3rem; display: inline-block; object-fit: cover; overflow: hidden; border-radius: 100%; margin: 0 0.15rem;}
header .container.header .menu {
    margin-left: 1.7rem; 
    display: inline-block; 
    vertical-align: middle; 
    color: #0c9d39; 
    font-size: 0.7rem; 
    text-transform: uppercase; 
    position: relative; 
    margin-top: -1rem; 
    cursor: pointer;
    margin-bottom: -2.5rem;
    margin-right: -1.5rem;
    z-index: 15;
    text-decoration: none;
    filter: none;
}
body:not(.menuopen) header .container.header .menu:hover {
    filter: hue-rotate(95deg) brightness(0.5) contrast(1);
}
.menuopen:not(.hasscrolled) header .container.header .menu {color: white;}
header .container.header .menulist {
    color: white;
    background: #0c9d39;
    position: absolute;
    right: 0;
    margin-right: -0.5rem;
    top: 3.7rem;
    padding: 1rem 4rem 1rem 4rem;
    border-top-left-radius: 13rem;
    border-bottom-left-radius: 13rem;
    text-align: right;
    display: none;
    line-height: 2;
    z-index: 3;
    width: 100%;
    max-width: 41.6rem;
}
.menuopen:not(.hasscrolled) header .container.header .menulist {
    display: block;
}
header .container.header .menulist::before {
    content: "";
    background: #0c9d39;
    top: 0;
    height: 3.95rem;
    width: 4rem;
    position: absolute;
    right: 0;
    margin-top: -3.95rem;
    z-index: -1;
}
header .container.header .menulist li {list-style: none; position: relative;}
header .container.header .menulist li a {color: white; text-decoration: none;}
header .container.header .menulist li.active a,
header .container.header .menulist li a:hover {font-weight: bold;}
header .container.header .menulist li.active a {
    color: #333685
}

header .container.header .menu img {display: block; margin: 0.2rem 0; height: 1.5rem; width: auto;}
header .container.header .menu img:last-child {display: none;}
.menuopen:not(.hasscrolled) header .container.header .menu img {display: none;}
.menuopen:not(.hasscrolled) header .container.header .menu img:last-child {display: block;}
header .container.navigation ul {display: flex; margin-left: 12.5rem;}
header .container.navigation ul li {
    list-style: none;
}
header .container.navigation a {
    display: block; 
    width: 6.2rem; 
    height: 6.2rem; 
    text-align: center;
    padding: 0.75rem;
    clip-path: polygon(-10% -10%, 110% -10%, 110% 50%, -10% 50%);
    position: relative;
    top: 50%;
    margin-left: -0.75rem;
    border-radius: 100%;
    font-size: 0.8rem;
    transition: clip-path 0.1s ease-in-out;
    line-height: 1.3;
}
header .container.navigation li.active a,
header .container.navigation a:hover {clip-path: polygon(-10% -10%, 110% -10%, 110% 110%, -10% 110%); z-index: 1;}
header .container.navigation a span {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    border-radius: 100%;
    clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);
    padding-top: 3rem;
    clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);
    color: transparent;
    transition: color 0.3s ease-in-out;
    font-weight: 500;
}
header .container.navigation li.active a span,
header .container.navigation a:hover span {color: white;}
header .container.navigation ul li:first-child a span,
header .container.navigation ul li:nth-child(6) a span {color: #0c9d39; padding-top: calc(3.1rem + 0.35rem);}

header .container.navigation ul li a img {height: 1.9rem; position: relative; display: inline-block;}
header .container.navigation ul li:nth-child(6) a {width: 10.25rem;}
header .container.navigation ul li:nth-child(6) a::after,
header .container.navigation ul li:first-child a::after {
    content: "";
    width: 0;
    height: 0.2rem;
    background: #0c9d39;
    top: 50%;
    position: absolute;
    left: 50%;
    transition: all 0.1s ease-in-out;
    transform: translateX(-50%);
}
header .container.navigation ul li.active:first-child a::after,
header .container.navigation ul li:first-child a:hover::after {width: 1.6rem;}
header .container.navigation ul li:first-child a img {height: 1.5rem; top: 0.35rem; width: auto;}
header .container.navigation ul li:nth-child(2) a, 
header .container.navigation ul li:nth-child(2) a span {background: #333685;}
header .container.navigation ul li:nth-child(3) a, 
header .container.navigation ul li:nth-child(3) a span {background: #0c9d39;}
header .container.navigation ul li:nth-child(4) a, 
header .container.navigation ul li:nth-child(4) a span {background: #bbbb00;}
header .container.navigation ul li:nth-child(5) a, 
header .container.navigation ul li:nth-child(5) a span {background: #662483;}
header .container.navigation ul li:nth-child(6) a span br {display: none;}




/* FILTER */

ul.filter {display: flex; gap: 0.25rem; padding: 0 0 3rem 0;}
ul.filter li {list-style: none;}
ul.filter.active li {opacity: 0.25;}
ul.filter.active li:hover,
ul.filter.active li.active {opacity: 1;}
ul.filter li a {
    color: white; 
    text-decoration: none; 
    position: relative;
    display: block;
    font-size: 0.85rem;
    font-weight: bold;
    cursor: pointer;
}
ul.filter li a span {
    position: relative; 
    display: block; 
    top: 1.6rem; 
    transform: translateY(-50%);
    padding: 0.15rem 0.6rem 0.15rem 2.8rem;
    margin: 0 0.5rem;
    white-space: nowrap;
}
ul.filter li a::before {
    content: ""; 
    position: absolute; 
    width: 3.2rem; 
    height: 3.2rem; 
    z-index: -1;
    border-radius: 100%;
    left: 0;
}
ul.filter li a img {
    position: absolute;
    left: 1.6rem;
    top: 1.6rem;
    transform: translate(-50%,-50%);
    z-index: 1;
    height: 2rem;

}
ul.filter li:nth-child(1) a span,
ul.filter li:nth-child(1) a::before {background: #333685;}
ul.filter li:nth-child(2) a span,
ul.filter li:nth-child(2) a::before {background: #0c9d39;}
ul.filter li:nth-child(3) a span,
ul.filter li:nth-child(3) a::before {background: #bbbb00;}
ul.filter li:nth-child(4) a span,
ul.filter li:nth-child(4) a::before {background: #662483;}
ul.filter li:nth-child(1) a img,
ul.filter li:nth-child(2) a img {height: 1.8rem; top: 1.45rem;}
ul.filter li:nth-child(5) a {filter: invert(1); opacity: 0.5; margin-left: 0.5rem;}
ul.filter li:nth-child(5) a::before {content: none;}
ul.filter li:nth-child(5) a img,
ul.filter li:nth-child(5) a span {
    position: relative; 
    top: auto; 
    left: auto; 
    transform: none; 
    padding: 0;
    margin: 0;
}
ul.filter li:nth-child(5) a {text-align: center;}
ul.filter li:nth-child(5) a img {height: 2.2rem}
ul.filter li:nth-child(5) a span {top: 0.1rem;}


/* PROJECTS */

ul.grid {display: flex; gap: 3rem 1rem; flex-wrap: wrap; margin: 0 0 4rem!important; padding-left: 0!important;}
ul.grid li {width: calc(50% - 0.5rem); position: relative; min-width: calc(50% - 0.5rem); list-style: none;}
ul.grid.active li {display: none;}
ul.grid.active li.active {display: block;}
ul.grid li a {text-decoration: none; display: block;}
ul.grid li a .title {font-weight: 600; margin-bottom: 0.1rem; line-height: 1.2; margin-bottom: 0.25rem;}
ul.grid li a .summary span {text-decoration: underline; color: #0c9d39; white-space: nowrap;}
ul.grid li a:hover .summary span,
ul.grid li a .summary span:hover {text-decoration: none;}
ul.grid li a .img {height: 15rem; position: relative; background: #eee; overflow: hidden; border-bottom-right-radius: 3rem; margin-bottom: 0.65rem; overflow: hidden;}
ul.grid li a .img img {width: 100%; display: block; height: 100%; object-fit: cover; transform: scale(1); transition: transform 0.2s ease-in-out;}
ul.grid li a:hover .img img {transform: scale(1.07);}
.carousel ul.grid {gap: 1rem; margin-bottom: 0.5rem!important;}
.carousel ul.grid li {width: 24rem; min-width: 24rem;}
.carousel ul.grid.process {position: relative; gap: 0;}
.carousel ul.grid.process li {padding-right: 4rem;}
.carousel ul.grid.process li a {text-decoration: underline;}
.carousel ul.grid.process li::before {content: ""; background: #0c9d39; height: 0.15rem; width: 100%; position: absolute; left: 0; top: 2.2rem;}
.carousel ul.grid.process li span::before {content: ""; background: #0c9d39; height: 1.2rem; width: 0.15rem; position: absolute; margin: 1.7rem 0 0 0.9rem;}
.carousel ul.grid.process li strong {margin-top: 0.5rem; display: inline-block;}
ul.grid.publications li {width: calc(33.33% - 0.7rem); min-width: calc(33.33% - 0.7rem); padding-right: 2rem;}
ul.grid.publications li a .img {border-radius: 0; background: none; overflow: visible; margin-bottom: 1rem; height: 17rem;}
ul.grid.publications li a .img img {height: 100%; width: auto; box-shadow: 0.15rem 0.15rem 0.5rem rgba(0,0,0,0.5);}
.container > ul.grid li a .labels {display: none;}


/* DIY */

.diy {
    background: #199eda; 
    color: white; 
    padding: 2rem 2rem 3rem;
    margin-bottom: 4rem;
    border-bottom-right-radius: 2rem;
}
.diy > div {max-width: 44rem; margin: 0 auto; position: relative; display: flex; flex-wrap: wrap; gap: 1.5rem 2rem;}
.diy > div > div {width: calc(50% - 1rem);}
.diy.active > div > div {display: none;}
.diy.active > div > div.active {display: block;}
.diy > div > div > .img {
    display: block; 
    background: #f8f8f8; 
    border-bottom-right-radius: 2rem;
    margin-bottom: 0.25rem;
    position: relative;
    overflow: hidden;
}
.diy > div > div > .img::after {
    content: "";
    width: 2rem;
    height: 2rem;
    position: absolute;
    background: #0c9d39 url(/img/chevronright.svg) 60% center / 0.95rem auto no-repeat;
    border-radius: 100%;
    display: inline-block;
    bottom: 1rem;
    right: 1rem;
    transition: transform 0.1s ease-in-out;
    transform: scale(1);
}
.diy > div > div > .img:hover::after {
    transform: scale(1.1);
}
.diy > div > div > .img  img {transform: scale(1); transition: transform 0.2s ease-in-out;}
.diy > div > div > .img:hover img {transform: scale(1.06);}
.diy > div > div > h3 {font-size: 1.6rem; line-height: 1.2; margin: 0.75rem 0 0.5rem;}
.diy .title_left {padding-bottom: 1rem;}
.diy .title_left .green.circle {color: white;}
.diy .title_left .green.circle::after {background: white url(/img/chevronright-lightblue.svg) 60% center / 0.95rem auto no-repeat;}
.diy .title_left .green.circle::before {background: white;}

/* LABELS */

.labels {position: absolute; right: 1.5rem; z-index: 1;}
.labels.large {transform: scale(1.5); transform-origin: right top;}
.labels .label {width: 3rem; height: 3.5rem; border-radius: 1.5rem; border-top-right-radius: 0; border-top-left-radius: 0; position: relative;}
.labels .label + .label {border-radius: 1.5rem; height: 3rem; margin-top: -0.7rem; z-index: -1;}
.labels .label:nth-child(2) {z-index: -1;}
.labels .label:nth-child(3) {z-index: -2;}
.labels .label:nth-child(4) {z-index: -3;}
.labels .label-vervoeren-auto,
.labels .label-vervoeren-car {background: #bdbcbc url(/img/slim-vervoeren-auto.svg) center calc(100% - 0.7rem) / 1.7rem auto no-repeat;}
.labels .label-vervoeren-bus {background: #bdbcbc url(/img/slim-vervoeren-bus.svg) center calc(100% - 0.7rem) / 2rem auto no-repeat;}
.labels .label-vervoeren-boot,
.labels .label-vervoeren-boat {background: #bdbcbc url(/img/slim-vervoeren-boot.svg) center calc(100% - 0.7rem) / 2.4rem auto no-repeat;}
.labels .label-einsparen,
.labels .label-saving,
.labels .label-besparen {background: #333685 url(/img/slim-besparen.svg) center calc(100% - 1rem) / 2rem auto no-repeat;}
.labels .label-heizen,
.labels .label-heating,
.labels .label-verwarmen {background: #0c9d39 url(/img/slim-verwarmen.svg) center calc(100% - 1rem) / 2rem auto no-repeat;}
.labels .label-erzeugen,
.labels .label-generating,
.labels .label-opwekken {background: #bbbb00 url(/img/slim-opwekken.svg) center calc(100% - 0.6rem) / 2rem auto no-repeat;}
.labels .label-speichern,
.labels .label-storing,
.labels .label-opslaan {background: #662483 url(/img/slim-opslaan.svg) center calc(100% - 0.6rem) / 2rem auto no-repeat;}
.labels .label + .label {background-position: center calc(100% - 0.5rem);}
.labels .label + .label-besparen,
.labels .label + .label-verwarmen {background-size: 1.6rem auto; background-position: center calc(100% - 0.65rem);}
.labels .label + .label-opwekken,
.labels .label + .label-opslaan {background-size: 1.6rem auto; background-position: center calc(100% - 0.5rem);}


.featured_image {position: relative; padding: 1rem 0 1.5rem;}
.featured_image img {width: 100%; display: block; border-bottom-right-radius: 5rem;}


/* PEOPLE */

ul.grid.people li .img {
    position: absolute; 
    height: 8rem; 
    width: 8rem; 
    border-radius: 100%; 
    margin-bottom: 0;
    margin-top: -0.5rem;
}
ul.grid.people li:hover span {text-decoration: none;}
ul.grid.people li .title {
    background: #333685; 
    color: white; 
    margin: 1.5rem 1rem 0.5rem 3rem; 
    padding: 0.15rem 0 0.15rem 5.5rem;
    font-weight: 400;
}
ul.grid.people li .summary {margin: 0 1rem 0 8.5rem; font-size: 0.9rem;}


/* CAROUSEL */

div.carousel {
    margin-left: calc(-50vw + 25.5rem);
    margin-right: calc(-50vw + 25.5rem);
}
@media screen and (max-width: 44rem) {
    div.carousel {margin-left: 0; margin-right: 0;}
}
div.carousel > ul {flex-wrap: nowrap;}

@media screen and (min-width: 102rem) {
    div.carousel {
        margin-left: -25.5rem;
        margin-right: -25.5rem;
    }
}


/* TITLE LEFT */

.title_left {max-width: 44rem; margin: 0 auto; display: flex; margin-bottom: 1.4rem;}
.title_left > div {flex: 1;}
.title_left > div:nth-child(2) {padding-top: 0.8rem;}
.title_left > div:nth-child(2) p {padding: 0 1rem 0.5rem 0; position: relative; bottom: 0.2rem; margin: 0;}
.title_left > div:nth-child(2).text-right {text-align: right; padding-right: 2.75rem;}
.title_left h1 {padding-right: 5rem;}
.title_left .featured_image {margin-right: 2rem;}
.title_left .featured_image img {border-bottom-right-radius: 2rem;}
.title_left.blue {font-weight: bold;}
.title_left > div:nth-child(2) h1 {padding-top: 1.75rem;}

/* ANIMATION */

.animation {background: #f2f2f2; display: flex; align-items: center; border-bottom-right-radius: 2rem; margin-bottom: 3rem;}
.animation > div {padding: 1rem 0; width: 50%;}
.animation > div > img {width: 19rem; min-width: 19rem;}
.animation > div:nth-child(1) {text-align: center; padding: 0 0 1rem;}
.animation > div:nth-child(1) img {display: inline-block; height: auto;}
.animation > div:nth-child(2) {padding: 0.5rem 3.75rem 0.5rem 0;}


/* CIRCLE LINKS */

.green {color: #0c9d39; text-decoration: none; position: relative; font-weight: 500; cursor: pointer;} 
.green.circle::after {
    content: "";
    width: 2rem;
    height: 2rem;
    position: absolute;
    background: #0c9d39 url(/img/chevronright.svg) 60% center / 0.95rem auto no-repeat;
    border-radius: 100%;
    display: inline-block;
    top: 50%;
    transition: transform 0.1s ease-in-out;
    transform: translateY(-50%) scale(1);
    margin-left: 0.5rem;
}
.green.circle:hover::after {
    transform: translateY(-50%) scale(1.1);
}
.green.circle.video::after {
    background: #0c9d39 url(/img/play.svg) 60% center / 0.95rem auto no-repeat;
}
.green.circle.plus::after {
    background: #0c9d39 url(/img/plus.svg) 50% center / 1.25rem auto no-repeat;
}
a.green::before {
    content: ""; 
    height: 1px; 
    background: #0c9d39; 
    width: 0; 
    position: absolute; 
    left: 50%; 
    transition: width 0.15s ease-in-out;
    transform: translateX(-50%);
    bottom: 0;
}
a.green:hover::before {width: 100%;}


.blue {color: #199eda;}

/* PROJECT */

.project_partners {background: url(/img/partners.svg) left center / auto 1.5rem no-repeat; padding: 0.25rem 0 0.25rem 2rem!important;}
.project_location {background: url(/img/marker.svg) left center / auto 2rem no-repeat; padding: 0.25rem 0 0.25rem 2rem!important;}


/* SUGGESTION */

.suggestion {border: 0.15rem solid #333685; padding: 0.75rem 1rem 1rem!important; margin-bottom: 1.55rem;}
.suggestion > *:last-child {margin-bottom: 0;}


blockquote {font-size: 1.75rem; font-weight: bold; margin: 2rem 0 2.2rem; line-height: 1.4;}
blockquote > *:first-child::before {content: "“"; display: inline;}
blockquote > *:last-child::after {content: "”"; display: inline;}


/* QUESTIONNAIRE */

.questionnaire {
    background: #199eda; 
    color: white; 
    padding: 1.5rem 3rem 1.25rem; 
    margin-bottom: 3rem; 
    border-bottom-right-radius: 2rem;
    display: flex;
    flex-direction: column;
    min-height: 11rem;
    display: block;
}
.questionnaire h2 {margin-bottom: 2rem;}
.questionnaire > div {display: flex; flex-direction: row;}
.questionnaire > div > div {flex: 1; text-align: center;}
.questionnaire > div > div label {display: block; cursor: pointer;}
.questionnaire > div > div input {transform: scale(2); accent-color: #333685;}
.questionnaire > div > div input:checked + span {color: #333685; font-weight: bold;}
.questionnaire > div > div span {display: block; padding: 0.5rem 0 0;}
.questionnaire > div:last-child {justify-content: flex-end; padding: 2.5rem 1.25rem 0.75rem 0;}
.questionnaire > div:last-child a.green {color: white; cursor: pointer;}
.questionnaire > div:last-child a.green::after {background-color: white; background-image: url(/img/chevronright-lightblue.svg);}
.questionnaire > div:last-child a.green::before {background: white;}
.questionnaire > div#thankyou {display: none; padding-bottom: 3rem;}
.questionnaire.answered > div {display: none;}
.questionnaire.answered > div:nth-child(1),
.questionnaire.answered > div#thankyou {display: block;}



/* FAQ */

.faq {
    background: #f2f2f2; 
    padding: 2rem 2rem 4rem; 
    border-bottom-right-radius: 2rem;
    display: flex;
    flex-direction: column;
    min-height: 11rem;
}
.faq > div {max-width: 44rem; margin: 0 auto; width: 100%; position: relative;}
.faq + .faq {margin-top: 1.75rem;}
.faq h2 {margin-bottom: 1rem;}
.faq h2 + a {position: absolute; right: 0; margin-top: -3.2rem; margin-right: 2.7rem;}

@keyframes opendetails {
    from {grid-template-rows: 0fr;}
    to {grid-template-rows: 1fr;}
}
@keyframes closedetails {
    from {grid-template-rows: 1fr;}
    to {grid-template-rows: 0fr;}
}
details {
    border: 0.1rem solid #333685;
    border-left: 0;
    border-right: 0;
    display: block;
}
details summary {
    position: relative;
    display: block;
    cursor: pointer;
    padding: 0.85rem 3rem 0.85rem 0; 
    transition: all 0.15s ease-in-out;
    font-size: 1.1rem;
    line-height: 1.4;
}
details summary::after {
    content: "";
    display: block;
    position: absolute;
    width: 2rem;
    height: 2rem;
    top: 50%;
    right: 0.15rem;
    background: #0c9d39 url(/img/plus.svg) center center / 1.25rem auto no-repeat;
    border-radius: 100%;
    transition: transform 0.1s ease-in-out;
    transform: translateY(-50%) scale(1);
}
details summary:hover::after {
    transform: translateY(-50%) scale(1.1);
}
details summary::-webkit-details-marker,
details summary::marker {
    display: none; 
    content: "";
}
details + details {border-top: 0;}
details > div {
    display: grid;
    grid-template-rows: 0fr;
}
details > div > div {overflow: hidden;}
details > div > div::before {content: ""; display: block; height: 0.5rem;}
details > div > div::after {content: ""; display: block; height: 1.75rem;}
details[open] > div {animation: opendetails .15s 0s 1 normal forwards;}
details[open].closing > div {animation: closedetails .15s 0s 1 normal forwards;}
details[open]:not(.closing) summary {color: #333685; font-weight: 600;}
details summary::after {transition: all 0.15s ease-in-out;}
details[open]:not(.closing) summary::after {
    transform: translateY(-50%) rotate(-135deg);
}
details[open]:not(.closing) summary:hover::after {
    transform: translateY(-50%) rotate(-135deg) scale(1.1);
}


/* STATISTICS */

.statistics {
    background: #333685; 
    color: white; 
    padding: 1.5rem 3rem 1.25rem; 
    margin-bottom: 3rem; 
    border-bottom-right-radius: 2rem;
    display: flex;
    flex-direction: column;
    min-height: 11rem;
}
.statistics h2 {margin-bottom: 0.75rem;}
.statistics > div {display: flex; align-items: center;}
.statistics > div > div {flex: 1; font-weight: 600; opacity: 0.5;}
.statistics > div:nth-child(2) > div {opacity: 1;}
.statistics > div > div:nth-child(1) {flex: 0.65; font-weight: normal; opacity: 1;}
.statistics > div > div > span {font-size: 3rem; font-weight: bold;}
.statistics + script + p {margin-top: -1rem;}

/* TOPICS */

div.topics {margin-bottom: 3rem;}
div.topics > div, div.topics > div.slim-besparen {
    background: #333685; 
    color: white; 
    padding: 1.25rem 0; 
    margin-bottom: 1rem; 
    border-bottom-right-radius: 2rem;
    display: flex;
    min-height: 11rem;
}
div.topics > div.topic {background: #199eda;}
div.topics > div.slim-verwarmen {background: #0c9d39;}
div.topics > div.slim-opwekken {background: #bbbb00;}
div.topics > div.slim-opslaan {background: #662483;}
div.topics > div > div {width: 50%;}
div.topics > div > div:nth-child(1) {display: flex; justify-content: center; align-items: center;} 
div.topics > div > div:nth-child(1) > div {
    background-color: white; 
    height: 8.25rem; 
    width: 8.25rem; 
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    font-weight: 600;
    line-height: 1.1;
    font-size: 0.9rem;
}
div.topics > div.slim-besparen > div:nth-child(1) {color: #333685;}
div.topics > div.slim-verwarmen > div:nth-child(1) {color: #0c9d39;}
div.topics > div.slim-verwarmen {border-radius: 0;}
div.topics > div.slim-verwarmen > div:nth-child(2) a.green.circle {bottom: 0.25rem;}
div.topics > div.slim-opwekken > div:nth-child(1) {color: #bbbb00;}
div.topics > div.slim-opslaan > div:nth-child(1) {color: #662483;}
div.topics > div .img {height: 2.5rem; width: 2.5rem; margin-bottom: 0.65rem;}
div.topics > div.slim-besparen .img {background: url(/img/dark-slim-besparen.svg) center center / contain no-repeat;}
div.topics > div.slim-verwarmen .img {background: url(/img/dark-slim-verwarmen.svg) center center / contain no-repeat;}
div.topics > div.slim-opwekken .img {background: url(/img/dark-slim-opwekken.svg) center center / contain no-repeat;}
div.topics > div.slim-opslaan .img {background: url(/img/dark-slim-opslaan.svg) center center / contain no-repeat;}
div.topics > div > div:nth-child(2) {
    padding: 0.25rem 3rem 0.25rem 0; 
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
div.topics > div > div:nth-child(2) a.green.circle {right: 4rem; position: absolute; bottom: 0.5rem;}
div.topics > div > div:nth-child(2) a.green.circle {color: white;}
div.topics > div > div:nth-child(2) a.green.circle::after {background: white;}
div.topics > div.topic > div:nth-child(2) a.green.circle::after {background: white url(/img/chevronright-lightblue.svg) 60% center / 0.95rem auto no-repeat;}
div.topics > div.slim-besparen > div:nth-child(2) a.green.circle::after {background: white url(/img/chevronright-blue.svg) 60% center / 0.95rem auto no-repeat;}
div.topics > div.slim-verwarmen > div:nth-child(2) a.green.circle::after {background: white url(/img/chevronright-green.svg) 60% center / 0.95rem auto no-repeat;}
div.topics > div.slim-opwekken > div:nth-child(2) a.green.circle::after {background: white url(/img/chevronright-yellow.svg) 60% center / 0.95rem auto no-repeat;}
div.topics > div.slim-opslaan > div:nth-child(2) a.green.circle::after {background: white url(/img/chevronright-purple.svg) 60% center / 0.95rem auto no-repeat;}
div.topics > div > div:nth-child(2) a.green.circle::before {background: white;}
div.topics > div.featuredanimations {
    margin-top: -1rem; 
    background: #e3e3e3; 
    padding: 1rem 1rem;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 1rem;
    min-height: 0;
}
div.topics > div.featuredanimations a {display: block; overflow: hidden; border: 1px solid white; transition: border-color 0.1s ease-in-out;}
div.topics > div.featuredanimations a:hover {border-color: var(--green);}
div.topics > div.featuredanimations a:last-child {border-bottom-right-radius: 1.25rem;}
div.topics > div.featuredanimations a::before {content: none;}
div.topics > div.featuredanimations a::after {
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
}
div.topics > div.featuredanimations a:hover::after {
    transform: translate(-50%, -50%) scale(1.1);
}

/* SEARCH OVERLAY */

.scrolltotop {
    position: fixed; 
    bottom: 1.5rem; 
    right: 1.5rem; 
    text-align: center;
    text-decoration: none;
    padding: 3.25rem 0.5rem 1.5rem ;
    width: 4.25rem;
    line-height: 1.2;
    background: rgba(240, 240, 240, 0.9) url(/img/scrolltotop.svg) center 1rem / 1.25rem auto no-repeat;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-in-out;
    border-radius: 2.125rem;
    transition: all 0.2s ease-in-out;
}
.scrolltotop:hover {
    background: rgba(240, 240, 240, 0.9) url(/img/scrolltotop.svg) center 0.75rem / 1.25rem auto no-repeat;
}

body.hasscrolled .scrolltotop {pointer-events: all; opacity: 1;}

#hasscrolledpixel {position: absolute; margin: 0; top: 9rem; width: 1px; height: 1px; background: transparent; pointer-events: none;}

/* SEARCH OVERLAY */

#search_overlay {
    display: flex;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #0c9d39;
    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; padding: 0 2rem;
}
#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);}


/* FOOTER */

footer {background: #333685; color: white; font-size: 0.9rem;}
footer img {height: 3.1rem; display: block; margin-bottom: 1rem;}
footer form {max-width: 19rem;}
footer h3 {font-size: 1.1rem;}
footer .container {display: flex; gap: 4rem; padding: 1.75rem 2rem 2.5rem;}
footer p:last-child {margin-bottom: 0;}
footer .container > div:nth-child(1) {width: 40%;}
footer .container > div:nth-child(2) {width: 40%;}
footer .container > div:nth-child(3) {width: 25%;}
footer input[type="submit"] {
    background: #333685; 
    color: white; 
    padding: 0.5rem 1rem; 
    cursor: pointer; 
    display: inline-block; 
    border: 1px solid rgba(255,255,255,0.35);
    margin-top: 0.4rem;
    transition: border-color 0.2s ease-in-out;
}
footer input[type="submit"]:hover {
    border-color: rgba(255,255,255,0.75);
}
footer a {color: white!important; text-decoration: none;}

body.animations {overflow: hidden; width: 100vw; height: 100vh;}
iframe.fullscreen {
    border: 0; 
    position: fixed; 
    left: 0; 
    top: 0;
    max-width: 100vw!important;
    width: 100vw!important; 
    height: 100vh!important; 
    background: white; 
    z-index: 99;
}
@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes appear {
    from {
        opacity: 0;
        transform: translateY(2rem);
    }
    to {
        opacity: 1;
        transform: translateY(0rem);
    }
}

body.animate footer > *.opaque, body.animate main > .container > *.opaque {
    animation: none;
    opacity: 0;
}
body.animate footer > *, body.animate main > .container > * {
    animation-name: appear;
    animation-duration: 1.5s;
    animation-delay: 0.5s;
    animation-fill-mode: both;
}
body.animate footer > * {animation-name: fadein; animation-delay: 0.75s;}
body.animate footer > *.nodelay, body.animate main > .container > *.nodelay {animation-delay: 0s;}

@media screen and (max-width: 1300px) {
    footer {padding-bottom: 3rem;}
}

@media screen and (max-width: 850px) {
    html {font-size: 14px;}
    header {background-position: 3rem bottom;}
    header .container.navigation ul {margin-left: 4rem;}
    header .container.header .logo .lighthouse {left: 17rem;}
    header .container.header .logo .beam {left: -3.95rem;}
    main {background-position: -114.9rem top;}
    header .container.header .menulist {max-width: calc(100% - 1.6rem);}
    footer {padding: 1.5rem 0 6rem;}
    footer .container {flex-direction: column;}
    footer .container > div {width: 100%!important;}
    main > .container > p > img {min-width: 100%; margin: 0;}
    .breadcrumbs ul {margin-left: 2.5rem;}
    ul.grid.publications {gap: 3rem 2rem;}
    ul.grid.publications li {width: calc(50% - 1rem); padding-right: 0;}
    ul.grid.publications li .summary {max-width: 20rem;}
    header .container.header .beam {max-width: calc(100% + 18rem);}
}

@media screen and (max-width: 720px) {
    header .container.header .menulist {right: 1.5rem;}
    header .container.header .menu {margin-right: 0;}
    .title_left, .animation {flex-direction: column;}
    .title_left.blue {flex-direction: column-reverse;}
    .title_left.blue h1 {padding-top: 0!important;}
    .animation {padding: 1rem 2rem 2.5rem 2rem;}
    .animation > div {width: 100%;}
    .animation > div:nth-child(2) {padding: 0;}
    div.topics > div > div:nth-child(1) {width: 40%; align-items: flex-start;}
    div.topics > div > div:nth-child(2) {width: 60%; padding-bottom: 2rem;}
    .statistics, .questionnaire {padding-left: 2rem; padding-right: 2rem;}
    .questionnaire > div:last-child {padding-right: 2.5rem;}
    .statistics > div {flex-direction: column; align-items: flex-start; line-height: 1.2; padding-bottom: 1rem;}
    .statistics > div > div:first-child {padding: 0.5rem 0 0.25rem;}
    .title_left {position: relative;}
    .title_left > div:nth-child(2).text-right {position: absolute; right: 0; margin-top: -0.25rem;}
    .faq h2 + a, .title_left > div:nth-child(2).text-right .green {font-size: 0;}
    .faq h2 + a {margin-top: -2.25rem;}
    .diy > div > div {width: 100%;}
    ul.filter {flex-wrap: wrap; padding-bottom: 1rem;}
    ul.filter li {margin-bottom: 2rem;}
    .steps > div:not(.title_left) {flex-direction: column; padding: 1rem 2rem 2rem;}
    .steps > div > div p {padding-right: 0;}
    .featured_step {padding: 2rem;}
    .featured_step p {padding: 1rem 0;}
    .featured_step .images {padding: 0 0 1rem;}
    .title_left .featured_image {margin-right: 0;}
    .featured_step p:last-child {bottom: 0; padding-bottom: 0.5rem; margin: 0;}
    .labels.large {transform: scale(1);}
    header .container.header .beam {max-width: calc(100% + 12rem);}
}

@media screen and (max-width: 500px) {
    header {background-position: 0rem bottom;}
    header .container.navigation ul {margin-left: 1rem;}
    header .container.header .logo .beam {left: -7.95rem;}
    header .container.header .logo .lighthouse {left: 13rem;}
    main {background-position: -117.9rem top;}
    header .container.header .menulist {max-width: calc(100% + 1.4rem); width: calc(100% + 1.4rem);}
    .questionnaire h2 {margin-bottom: 1rem;}
    .questionnaire > div#answers {flex-direction: column;}
    .questionnaire > div > div {text-align: left; padding-left: 1rem; padding-bottom: 0.5rem;}
    .questionnaire > div > div span {display: inline-block; margin-left: 1rem;}
    .breadcrumbs ul {margin-left: 0rem;}
    ul.grid li {width: 100%; min-width: 0;}
    .featured_step .images > * {width: 100%;}
    header .container.header .beam {max-width: calc(100% + 16rem);}
}

@media screen and (max-width: 450px) {
    header {background-position: -2rem bottom;}
    header .container.navigation ul {margin-left: -1rem;}
    header .container.header .logo .beam {left: -8.95rem;}
    header .container.header .logo .lighthouse {left: 12rem;}
    main {background-position: -119.9rem top; padding-top: 4rem;}
    .breadcrumbs ul {margin-top: -2.25rem; margin-bottom: 0.9rem;}
    header .container.header .menulist {max-width: calc(100% + 3.4rem); width: calc(100% + 3.4rem);}
    div.topics > div {flex-direction: column; padding-left: 2rem!important; padding-right: 2rem!important;}
    div.topics > div > div {width: 100%!important;}
    div.topics > div > div:nth-child(1) {padding: 0.5rem 0 0.5rem;}
    div.topics > div > div:nth-child(2) {padding: 1rem 0 2rem;}
    div.topics > div > div:nth-child(2) a.green.circle {right: 2.5rem;}
    .animation > div > img {max-width: 100%; min-width: 0;}
    .steps > div .number {margin-left: 2rem;}
    .steps > div > div img {margin-left: 9.5rem;}
    ul.grid.publications li {width: 100%;}
    div.topics > div.featuredanimations {padding: 1.25rem 2rem 1.5rem; grid-template-columns: 1fr 1fr;}
    div.topics > div.featuredanimations a:last-child {border-radius: 0;}
    header .container.header .beam {max-width: calc(100% + 17rem);}
}

@media screen and (max-width: 410px) {
    header {background-position: -10rem bottom;}
    header .container.header {padding-bottom: 1.75rem;}
    header .container.navigation ul {margin-left: -0.8rem;}
    header .container.navigation ul li:first-child a {width: 5.2rem;}
    header .container.header .logo .beam {top: 1.2rem; left: -9.95rem;}
    header .container.header .logo .lighthouse {top: 1.9rem; left: 11rem;}
    main {background-position: -119.9rem top;}
    footer .container, .statistics, .featured_step,
    .questionnaire, .diy, .faq,
    .steps > div:not(.title_left),
    div.topics > div {padding-left: 1.5rem!important; padding-right: 1.5rem!important;}
    .container {padding-left: 1.5rem; padding-right: 1.5rem;}
    .animation {padding-left: 1.5rem; padding-right: 1.5rem;}
    header .container.header .menulist {
        right: 0.5rem; 
        max-width: 100%; 
        width: 100%; 
        border-radius: 0; 
        margin-top: 1.2rem; 
        text-align: left;
        padding-left: 0;
    }
    header .container.header .menulist a {padding-left: 1.5rem;}
    header .container.header .menulist::before {height: 6.15rem; margin-top: -6.15rem; width: 5rem;}
    header .container.header .beam {max-width: calc(100% + 18rem);}
}

@media screen and (max-width: 385px) {
    header .container.navigation ul {
        margin-left: auto; 
        justify-content: center;
        margin-right: -0.75rem;
    }
    header .container.navigation ul li:first-child {display: none;}
}