*, ::after, ::before {padding: 0; margin: 0; box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;}

html {height: 100%; font-size: 1.5vw;}
body {background: #305464; height: 100%; line-height: 1.55; color: #305464;}
.page {margin: 0 auto; width: 66.66rem; min-height: 100%; background: #d4dbde; display: flex; flex-direction: column;}
a {color: #7f2346; text-decoration: none;}
p {margin-bottom: 1.5rem;}
p a {display: inline; margin-right: 0.95em; position: relative;}
p a.externallink {margin-right: 1rem;}
p a::after, .content ul:not(.menu, .blocks) a::after {content: ""; position: relative; margin-bottom: -0.3rem; margin-right: -1.15em; display: inline-block; width: 1em; height: 1.25em; background: url(/img/arrowright.svg) center center / contain no-repeat; margin-left: 0.15em;}
a.backlink, a.scrollup {margin-left: 1.2em; position: relative; white-space: nowrap;}
a.backlink::before, a.scrollup::before {content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%) rotate(180deg); margin-left: -1.4em; display: block; width: 1em; height: 1.25em; background: url(/img/arrowright.svg) center center / contain no-repeat;}
a.scrollup::before {transform: translateY(-50%) rotate(-90deg); }
.details.project .backlink {display: none;}
.details.project a.scrollup {border-color: #7f2346;}
p a.externallink::after {background-image: url(/img/arrowrightup.svg); margin-right: -1.025em; margin-left: 0.025em;}
h1, h2, h3 {font-size: 1.1em; margin-bottom: 1.3em; line-height: 1.2;}
* + h2, * + h3 {margin-top: 1.3em;}
img {max-width: 100%;}

.menu {display: flex;}
.menu li {list-style: none; margin-right: 1.2rem; padding-right: 1.2rem; border-right: 1px solid #7f2346; line-height: 1; margin-top: 0.25rem;}
.menu li:last-child {margin-right: 0; padding-right: 0; border-right: 0;}
.menu li:last-child::after {content: none;}
.menu li a {color: #305464; text-transform: lowercase; border: 0;}
.menu li.active a {color: #7f2346;}

.header {background: #305464; overflow: hidden; height: 21.5rem; position: relative;}
.header a {color: #305464;}
.header a.logo {display: block; height: 100%;}
.header a.logo img {height: 21.5rem; display: block; filter: none; opacity: 1; min-width: 13.4rem;}
.header .container {display: flex; height: 21.5rem; max-width: 66.66rem; margin: 0 auto; overflow: hidden; width: 66.66rem;}
.header .container a {display: block; height: 100%; width: 100%;}
.header .container img {height: 21.5rem; width: auto; filter: brightness(0.8) contrast(1) sepia(100%) hue-rotate(-205deg) saturate(1); opacity: 0.9; transition: transform 0.25s ease-in-out;}
.header .container div {overflow: hidden; flex-grow: 1; flex-shrink: 0;}
.header .container div a:not(.logo) img:hover {filter: none; transform: scale(1.05);}
.header .container div a.current, .header .container div a[href=""] {cursor: default;}

body.home .header {height: 37rem;}
body.home .header .container {display: grid; grid-template-columns: 20rem 20rem 13.37rem 20rem 20rem; grid-template-rows: 15.5rem 21.5rem; grid-gap: 0; height: auto; width: 73.37rem; max-width: 73.37rem; position: absolute; left: 50%; transform: translateX(-50%);}
body.home .header .container > div {overflow: hidden; position: relative; right: 23.33rem;}
body.home .header .container > div img {display: block; height: 100%; width: 100%; object-fit: cover;}
body.home .header .container > div:nth-child(1) {grid-column-start: 1; grid-column-end: 3;}
body.home .header .container > div:nth-child(4) {grid-row-start: 1; grid-row-end: 3; grid-column-start: 5;}
body.home .header .container > div .overlay {position: absolute; background: rgba(48, 84, 100, 0.6); width: 100%; top: 0; height: 15.5rem; z-index: 2; mix-blend-mode: multiply; pointer-events: none;}
body.home .header .container > div:nth-child(1) .overlay {width: 50%; height: 100%;}
body.home .header .container > div:last-child {display: none;}
@media (min-width: 120rem) {
    body.home .header .container {width: 93.37rem; max-width: 93.37rem;}
    body.home .header .container > div {right: 0rem;}
}

.content {flex-grow: 1; padding: 3.75rem 2rem 7rem; position: relative;}
.content .menu {margin-bottom: 3.25rem;}
.content .container {width: 100%; max-width: 40rem; margin: 0 auto;}
.content a {border-bottom: 1px solid #7f2346;}
body.home .content {padding-bottom: 5rem;}

.content .social {position: absolute; display: flex; gap: 0.6rem; margin-top: -0.15rem; left: 50%; margin-left: 24.9rem;}
.content .social img {display: block; width: 1.75rem; height: auto;}

.content ul:not(.menu,.publications) {margin-left: 1rem;}
.content ul.breadcrumbs {display: flex; margin: 0 0 0.5rem; font-size: 0.75rem; top: 0.5rem; color: #7f2346;}
.content ul.breadcrumbs li:first-child::before {content: "Je bent hier:"; text-transform: none; display: inline-block; margin-right: 0.5rem; color: #305464;}
.content ul.breadcrumbs li {text-transform: lowercase; list-style: none; position: relative; white-space: nowrap;}
.content ul.breadcrumbs li:last-child {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.content ul.breadcrumbs li a::after {content: none;}
.content ul.breadcrumbs li:not(:last-child)::after {content: "/"; display: inline-block; padding: 0 0.5rem;}
@media (max-width: 600px) {
    .content ul.breadcrumbs {margin-top: 6rem; margin-bottom: -4.5rem;}
}

.content .featured_items {display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); grid-gap: 1.45rem; position: relative; top: 2.25rem;}
.content .featured_items li {list-style: none; background: #c4cdd2; padding: 1.75rem 1.25rem 2rem; font-size: 0.97rem;}
.content .featured_items li h2 {margin-bottom: 1rem;}
.content .featured_items li p {margin-bottom: 0;}
.content .featured_items li p a {white-space: nowrap;}

.content ul.publications li {list-style: none;}
.content ul.publications li a {cursor: pointer;}
.content ul.publications li > div:first-child {display: flex; gap: 1rem; align-items: center; margin-bottom: 1rem;}
.content ul.publications li > div:last-child {display: none;}
.content ul.publications li > div:last-child p:last-child {position: relative; bottom: 0.75rem;}
.content ul.publications li > div > div p {margin: 0;}
.content ul.publications li > div > img {width: 5rem; height: 5rem; filter: sepia(100%) hue-rotate(-205deg) brightness(0.9) contrast(0.9) saturate(0.9); object-fit: cover;}
@media (max-width: 600px) {
    .content ul.publications li {padding-bottom: 0.5rem;}
    .content ul.publications li > div:first-child a {display: none;}
    .content ul.publications li > div:last-child {display: block;}
}

.content ul.blocks {margin-bottom: 2rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); grid-gap: 1rem;}
.content ul.blocks li {list-style: none; position: relative;}
.content ul.blocks li a {
    padding: 1.5rem 1.5rem; 
    color: white; 
    width: 100%; 
    height: 100%; 
    display: block; 
    font-weight: bold;
    font-size: 1.1rem;
    min-height: 6rem;
    position: relative;
    z-index: 2;
    line-height: 1.5rem;
    border: 0;
}
.content ul.blocks li > span {
    position: absolute;
    left: 0; 
    top: 0;
    width: 100%; 
    height: 100%;
    background: #305464 url(/uploads/publications/geschiedenis.png) center center / cover no-repeat;
    filter: contrast(0.4) brightness(0.65) sepia(100%) hue-rotate(-205deg) saturate(1.4);
    z-index: 0;
}
.content ul.blocks li a:hover + span, 
.content ul.blocks li.active > span {filter: contrast(0.4) brightness(0.45) sepia(100%) hue-rotate(-65deg) saturate(2.8);}

.details {background: #305464; color: white; padding: 3rem 8rem 3.5rem 2rem; margin-bottom: 1.25rem;}
.details ul {margin-left: 0!important;}
.details ul li {list-style: none;}
.details a {color: white; border-color: white;}
.details.project {background: #c4cdd2; color: #305464; }
.details.project a {color: #7f2346; border-color: #7f2346;}
.details ul li a::after {content: none!important;}

.content ul.featured_items, .details, .content ul.blocks, .content ul.breadcrumbs {margin-left: -9rem; margin-right: -9rem;}
@media (max-width: 825px) {
    .content ul.featured_items {margin-left: 0!important; margin-right: 0!important;}
}

.footer {background: #305464; padding: 2rem;}
.footer .menu {margin: 0 auto; justify-content: center;}
.footer .menu li {margin: 0 1.2rem 0 0; border-color: white;}
.footer .menu li:last-child {margin: 0;}
.footer .menu li, .footer .menu li a {color: white;}

.mobileselect {position: relative; bottom: 1rem; display: none!important; margin-bottom: 0!important;}
.mobileselect li {background-color: #4e7082;}
.mobileselect li a {min-height: 0rem!important;}

@media (min-width: 1470px) {
    html {font-size: 22px;}
    .page {width: 100%;}
}

@media (max-width: 900px) {
    html {font-size: 13.5px;}
    .page {width: 100%;}
    .content .social {left: auto; right: 2rem;}
    .content .featured_items, .details, .content ul.blocks, .content ul.breadcrumbs {margin-left: 0; margin-right: 0;}
}

@media (max-width: 600px) {
    html {font-size: 3.3vw;}
    .page {font-size: 1.3rem;}
    body.home .header {height: 21.5rem;}
    body.home .header .container {position: relative; left: 0; grid-template-columns: 13.33rem 17rem; grid-template-rows: 21.5rem; width: 100%; transform: none;}
    body.home .header .container > div {display: none; right: 0;}
    body.home .header .container > div:nth-child(7) {display: block;}
    body.home .header .container > div:last-child {display: block;}
    .content .container {max-width: 100%;}
    .content .menu {flex-direction: column; position: relative; bottom: 0.1rem; line-height: 2; margin-bottom: 4rem;}
    .content .menu li {border: 0; line-height: 1.55;}
    .content .menu li a {display: inline-block;}
    .content .menu li::before {content: "•"; display: inline-block; margin-right: 0.25rem;} 
    .content .menu li.active::before {color: #7f2346;}
    .content .social {gap: 0.75rem;}
    .content .social img {min-width: 2.5rem;}
    .content .featured_items {gap: 2rem; margin: 3rem 0;}
    .content .featured_items li {font-size: 1.3rem; margin: 0 -1rem; padding: 2.5rem 2rem;}
    .content ul.blocks li {margin: 0 -1rem;}
    p {margin-bottom: 1.8rem;}
    .footer .menu {flex-direction: column; align-items: flex-start; font-size: 95%;}
    .footer .menu li {margin: 0!important; line-height: 2; border: 0;}
    ul.blocks.categories:not(.mobileselect) {margin-top: 6rem;}
    ul.blocks.projects {display: none;}
    .details {padding: 0; background: none!important; color: #305464;}
    .details a {color: #7f2346; border-color: #7f2346;}
    body.projects .mobileselect,
    body.categories .mobileselect {display: grid!important;}
    body.projects .blocks.categories:not(.mobileselect) li,
    body.categories .blocks.categories:not(.mobileselect) li {display: none;}
    body.projects .blocks.categories li.active,
    body.categories .blocks.categories li.active {display: block;}
    body.projects .details.category, .details.project .scrollup {display: none;}
    .details.project .backlink {display: inline;}
}