@charset "utf-8";
/* CSS Document */

/*
Theme Name: Inholland Alkmaar Locatiewebsite
Author: TheLaundry // VanderVeer
Author URI: https://vdveer.nl
Description: Template door TheLaundry / VanderVeer
Version: 0.1
Tags: 
*/


body, html {
	padding:0;
	margin:0;
    background-color:#FFFFFF;
    color:#000000;
    font-family: 'AvenirNexTLTPro', 'Avenir', sans-serif;
    font-size:18px;
    font-size: clamp(16px, 2vw, 18px);
    line-height: 1.75em;
}

* {
	box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html.lenis {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-scrolling iframe {
   pointer-events: none;
} 

p {
    font-size:18px;
    line-height:36px;
    font-size: clamp(16px, 2vw, 18px);
    line-height: 1.75em;
    font-weight:normal;
}

p b, p strong {
    font-weight:600;
}

a {
    color:#E3027F;
    text-decoration: underline;
}

.magentabg {
    background-color: #E3027F;
    color:white;
    display: block;
    width:100%;
}
.magentabg p, .magentabg a {
    color:white;
}
.graybg {
    position: relative;
    display: block;
    width:100%;
    padding:112px 0;
}
.graybg::before {
    content:'';
    position: absolute;
    z-index: 0;
    top:80px;
    left:0;
    width:100%;
    height:160px;
    background-image: url('img/grid_bg.svg');
    background-size:cover;
    background-position: center right;
    background-repeat: no-repeat;
}
.graybg::after {
    content:'';
    position: absolute;
    clip-path: polygon(0 0, 100% 240px, 100% 100%, 0% 100%);
    z-index: 1;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color: #EFEFEF;
}
.graybg > * {
    position: relative;
    z-index: 2;
}

.button, .altbutton {
    position: relative;
    display: inline-block;
    width:auto;
    text-decoration: none;
    font-size:18px;
    font-size: clamp(16px, 2vw, 18px);
    line-height: 24px;
    padding:14px 64px 14px 24px;
    font-weight:600;
    color:black;
    background-color: #FFFD38;
    margin-right:24px;
}
.altbutton {
     background-color: #EFEFEF;
}
.button::after, .altbutton::after {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="26.175" height="22.172" viewBox="0 0 26.175 22.172"><g transform="translate(0 1.086)"><rect width="24" height="3" transform="translate(0 8.5)"/><path d="M-1,0,9.5,10-1,20" transform="translate(14.5)" fill="none" stroke="black" stroke-width="3"/></g></svg>');
    display: inline-block;
    position: absolute;
    top:50%;
    transform:translateY(-50%);
    right:24px;
    width:24px;
    height:20px;
    transition: .24s ease;
}
.button:hover::after, .altbutton:hover::after {
    right:16px;
}
.content .button, .content .altbutton {
    margin-bottom:8px;
}

.simplebutton {
    position: relative;
    display: inline-block;
    color:inherit;
    text-decoration: none;
    font-weight:600;
    font-size:16px;
    line-height: 26px;
    margin:1em 0;
    padding-right:34px;
}
.simplebutton::after {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="26.175" height="22.172" viewBox="0 0 26.175 22.172"><g transform="translate(0 0.724)"><rect width="12" height="2" transform="translate(0 4.25)"/><path d="M-.31,10.724-1.69,9.276,2.8,5-1.69.724-.31-.724,5.7,5Z" transform="translate(8)"/></g></svg>');
    display: inline-block;
    position: absolute;
    top:54%;
    transform:translateY(-50%);
    right:4px;
    width:14px;
    height:12px;
    transition: .24s ease;
}
.simplebutton:hover::after {
    right:0;
}
.simplebutton[target="_blank"] {
    padding-right:26px;
}
.simplebutton[target="_blank"]::after {
    content:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path d="M4,4H8V6H6v8h8V12h2v4H4Zm6,0h6v6L14,8l-4,4L8,10l4-4Z" transform="translate(-4 -4)" fill="black"/></svg>');
    top:25%;
    width:12px;
}

hr {
    margin:24px 0 40px 0;
    height:6px;
    width:40px;
    background-color: black;
    border:none;
    border-radius: 0;
}

@media screen and (max-width:768px) {
    .graybg::before {
        top:16px;
        height:32px;
        background-image: url('img/grid_bg_mobile.svg');
    }
    .graybg::after {
        clip-path: polygon(0 0, 100% 48px, 100% 100%, 0% 100%);
    }
    
    .button, .altbutton {
        padding:12px 46px 12px 16px;
        margin-top:.5em;
        margin-bottom:.5em;
    }
    .button::after, .altbutton::after {
        content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20.175" height="17.172" viewBox="0 0 20.175 17.172"><rect width="18" height="2.25" transform="translate(0 6.375)"/><path d="M-1,0,6.875,7.5-1,15" transform="translate(11.125)" fill="none" stroke="black" stroke-width="3"/></svg>');
        right:16px;
        width:18px;
        height:15px;
    }
}

.center {
	text-align: center;
}

.left {
	float:left!important;
}
.right {
	float:right!important;
}
.space-bottom {
	margin-bottom:112px;
}
.space-top {
	margin-top:112px;
}
.space {
	margin-top:112px;
	margin-bottom:112px;
}
.smallspace-top {
	margin-top:80px;
}
.smallspace-bottom {
	margin-bottom:80px;
}
.smallspace {
	margin-top:80px;
	margin-bottom:80px;
}

h1 {
    font-size:60px;
    line-height: 1.2em;
    font-size: clamp(26px, 5vw, 60px);
    font-weight:600;
    margin:0 0 15px 0;
}
.underhero h1 {
    font-size:100px;
    line-height: 1em;
    font-size: clamp(40px, 5vw, 100px);
    font-weight:700;
}
h2, .fakeh2 {
    font-size:40px;
    line-height: 1.2em;
    font-size: clamp(22px, 3vw, 40px);
    font-weight:600;
    margin:0 0 15px 0;
}
h3, .fakeh3 {
    font-size:30px;
    line-height: 1.2em;
    font-size: clamp(20px, 2vw, 30px);
    font-weight:600;
    margin:0 0 .5rem 0;
}
h4, .fakeh4 {
    font-size:18px;
    line-height: 1.3em;
    font-size: clamp(16px, 2vw, 18px);
    font-weight:500;
    margin:0 0 .5rem 0;
}

.hero h1, .hero h4, .content h2, .content h3, .content h4, .content .fakeh2, .content .fakeh4, .content .fakeh4 {
    margin:0;
    padding:0 0 .5rem 30px;
    border-left:6px solid black;
    text-transform: uppercase;
}
@media screen and (max-width:768px) {
    .hero h1, .hero h4, .content h2, .content h3, .content h4, .content .fakeh2, .content .fakeh4, .content .fakeh4 {
        border-left:4px solid black;
        padding-left:12px;
    }
    .content {
        margin-bottom:60px;
    }
}

.bigcontainer-right, .bigcontainer, .container, .midcontainer, .smallcontainer, .minicontainer, .flexrow {
    display: flex;
    flex-wrap: wrap;
	position: relative;
	max-width:100%;
	padding-left:15px;
	padding-right:15px;
	margin-left:auto;
	margin-right:auto;
	overflow:hidden;
}
.row, .flexrow {
	width:100%;
	overflow:hidden;
    padding-left:0;
    padding-right:0;
}
.bigcontainer {
	width:1440px;
}
.bigcontainer-right {
    width:calc(720px + 50%);
    margin-right:0;
    padding-right:0;
}
.container {
	width:1200px;
}
.midcontainer {
	width:900px;
}
.smallcontainer {
	width:600px;
}
.minicontainer {
	width:450px;
}
.reverse {
    flex-direction: row-reverse;
}

.div5 {
    width:calc(5% - 15px);
}
.div10 {
    width:calc(10% - 15px);
}
.div15 {
    width:calc(15% - 15px);
}
.div20 {
    width:calc(20% - 15px);
}
.div25 {
    width:calc(25% - 15px);
}
.div30 {
    width:calc(30% - 15px);
}
.div33 {
    width:calc(33% - 15px);
}
.div40 {
    width:calc(40% - 15px);
}
.div45 {
    width:calc(45% - 15px);
}
.div50 {
    width:calc(50% - 15px);
}
.div60 {
    width:calc(60% - 15px);
}
.div70 {
    width:calc(70% - 15px);
}
.div80 {
    width:calc(80% - 15px);
}

@media screen and (max-width:768px) {
    .bigcontainer, .container, .midcontainer, .smallcontainer, .minicontainer {
        padding-left:20px;
        padding-right:20px;
    }
    .bigcontainer-right {
        padding-left:20px;
    }
    .space-top {
        margin-top:60px;
    }
    .space-bottom {
        margin-bottom:60px;
    }
    .space {
        margin-top:60px;
        margin-bottom:60px;
    }
    .smallspace {
        margin-top:30px;
        margin-bottom:30px;
    }
    .smallspace-top {
        margin-top:30px;
    }
    .smallspace-bottom {
        margin-bottom:30px;
    }
    .div10, .div15, .div20, .div25 {
        width:calc(50% - 8px);
    }
    .div30, .div33, .div40, .div45, .div50, .div60, .div70, .div80 {
        width:100%;
    }
}


.scrolltext {
    width:100%;
    overflow: hidden;
    margin-top:12px;
}
.scrolltext .inside-text {
    position: relative;
    display: block;
    white-space: nowrap;
    width:auto;
    will-change: transform;
    backface-visibility: hidden;
    transition: transform 0.5s cubic-bezier(0.23, 0.36, 0.28, 0.83);
    text-transform: uppercase;
    margin: 0;
    color:#E3027F;
    text-shadow: -1px -1px 0 #CCCCCC, 1px -1px 0 #CCCCCC, -1px 1px 0 #CCCCCC, 1px 1px 0 #CCCCCC;
    font-size:160px;
    line-height: 140px;
    font-size: clamp(60px, 10vw, 160px);
    line-height: 1em;
    letter-spacing: 5px;
    letter-spacing: clamp(2px, .5vw, 5px);
    font-weight:700;                
}
.scrolltext .inside-text .word {
    display: inline;
}


.scrollbutton {
    position: fixed;
    z-index: 50;
    bottom:0;
    right:0;
    background:white;
    transform:rotate(90deg) translateY(100%);
    transform-origin: bottom right;
    font-size:18px;
    line-height: 25px;
    padding:16px 72px 18px 24px;
    box-shadow:0 0 80px 0 rgba(0,0,0,0.08);
    cursor: pointer;
    transition: .3s ease;
    width:215px;
    height:59px;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}
.scrollbutton span {
    display: block;
    position: absolute;
}
.scrollbutton::after {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="26.175" height="22.172" viewBox="0 0 26.175 22.172"><g transform="translate(0 1.086)"><rect width="24" height="3" transform="translate(0 8.5)"/><path d="M-1,0,9.5,10-1,20" transform="translate(14.5)" fill="none" stroke="black" stroke-width="3"/></g></svg>');
    position: absolute;
    bottom:51%;
    transform:translateY(50%);
    right:24px;
    width:24px;
    height:20px;
    transition: .3s ease-in-out;
}
.scrollbutton.goup {
    width:192px;
}
.scrollbutton.goup::after {
    transform:translateY(50%) rotate(180deg);
}
@media screen and (max-width:768px) {
    .scrollbutton {
        display: none;
    }
}

header {
    position: -webkit-sticky;
    position: sticky;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    top:0;
    left:0;
    width:100%;
    z-index: 999;
    pointer-events: none;
}
header .logo {
    position: relative;
    z-index: 1;
    height:auto;
    padding:32px 32px 24px 32px;
    background-color: white;
    box-shadow: 0 0 80px 0 rgba(0,0,0,0.08);
    pointer-events: all;
}
header .logo img {
    display: block;
    height:50px;
    width:auto;
}
header nav {
    padding-right:40px;
    align-self:stretch;
    flex:1 1 0px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    font-size:20px;
    transition: .3s ease;
    background-color: white;
    pointer-events: all;
}

header nav ul {
    list-style: none;
    margin:0;
    padding:0;
    align-self:center;
}
header nav li {
    position: relative;
    display: inline-block;
    margin:0 0 0 56px;
    padding:0;
}
header nav ul:not(.sub-menu) > li.menu-item-has-children {
    padding-right:28px;
}
header nav ul:not(.sub-menu) > li.menu-item-has-children::after {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="13.921" height="8.105" viewBox="0 0 13.921 8.105"><path d="M0,15.453l-6.96-5.8,1.921-2.3L0,11.547l5.04-4.2,1.921,2.3Z" transform="translate(6.96 -7.348)"/></svg>');
    position: absolute;
    right:0;
    top:50%;
    transform:translateY(-50%);
    display: block;
}
header nav a {
    color:black;
    font-weight:600;
    text-decoration: none;
    transition: .16s ease;
}
header nav > ul:not(.sub-menu) > li.menu-item-has-children:hover > a, header nav a[href]:hover {
    color:#E3027F;
}
header nav li.current-menu-item > a, header nav li.current-menu-ancestor > a, header nav li.current-menu-parent > a {
    color:#E3027F;
}

.hamburger {
    display: none;
    position: relative;
	width:64px;
	height:64px;
	cursor: pointer;
    background-color:white;
    transition: .3s ease;
    pointer-events: all;
}
.hamburger span {
	display:block;
	position: absolute;
	left:50%;
    transform:translateX(-50%);
	height:3px;
	width:32px;
	background:black;
	transition: 0.3s ease;
}
.hamburger span:nth-child(1) {
	font-size:11px;
    line-height: 11px;
    font-weight:600;
    display: block;
    position: absolute;
    width:34px;
    bottom:calc(50% + 3px);
    height:auto;
    background-color: transparent;
    text-align: center;
}
.hamburger span:nth-child(2) {
	top:50%;
}
.hamburger span:nth-child(3) {
	top:calc(50% + 7px);
}
.opennav .hamburger {
    background-color: black;
}
.opennav .hamburger span {
    background-color: white;
}
.opennav .hamburger span:nth-child(1) {
	opacity:0;
}
.opennav .hamburger span:nth-child(2) {
	top:50%;
	transform:translateX(-50%) translateY(-50%) rotate(45deg);
}
.opennav .hamburger span:nth-child(3) {
	top:50%;
	transform:translateX(-50%) translateY(-50%) rotate(-45deg);
}
.submenu-title {
    display: none;
}
header ul:not(.sub-menu) > li.menu-item-has-children > a {
    pointer-events: none!important;
}

@media screen and (max-width:1430px) {
    header nav {
        font-size:18px;
        padding-right:25px;
    }
    header nav li {
        margin:0 0 0 35px;
    }
}
@media screen and (min-width:1181px) {
    header.scroll-down nav {
        transform:translateY(-100%);
    }
    header.scroll-up nav {
        transform:none!important;
    }
    .front-page header.isattop nav {
        transform:none!important;
        background-color: #EFEFEF;
    }
    header nav.submenuisopened {
        transform:none!important;
        transition: none!important;
    }
    header nav > ul > li.menu-item-has-children > ul.sub-menu {
        display: none;
    }
    header nav > ul > li > ul.sub-menu {
        position: fixed;
        flex-wrap: wrap;
        align-content: flex-start;
        align-items:flex-start;
        z-index: 9999;
        top:0;
        left:0;
        width:100%;
        height:100vh;
        overflow:hidden auto;
        background-color: white;
        padding-top:160px;
        padding-left:max(15px, calc(50% - 720px));
        padding-right:max(15px, calc(50% - 720px));
        padding-bottom:80px;
        background-image:url('img/headernav_grid_bg.svg');
        background-size: auto 56px;
        background-position: center bottom;
        background-repeat: repeat-x;

    }
    header nav .close-submenu {
        position: fixed;
        display: none;
        top:0;
        right:0;
        width:106px;
        height:106px;
        z-index: 99999;
        background-color: black;
        cursor: pointer;
    }
    header nav .close-submenu::before {
        content:'';
        position:absolute;
        display:block;
        width:32px;
        top:50%;
        left:50%;
        height:3px;
        background-color: white;
        transform:translate(-50%) rotate(135deg);
        transition:.3s ease;
    }
    header nav .close-submenu::after {
        content:'';
        position:absolute;
        display:block;
        width:32px;
        top:50%;
        left:50%;
        height:3px;
        background-color: white;
        transform:translate(-50%) rotate(45deg);
        transition:.3s ease;
    }
    header nav .close-submenu:hover::before {
        transform:translate(-50%) rotate(225deg);
    }
    header nav .close-submenu:hover::after {
        transform:translate(-50%) rotate(135deg);
    }
    
    header nav ul.sub-menu .submenu-title {
        display: block;
        font-size:60px;
        line-height: 70px;
        font-size: clamp(40px, 3.5vw, 60px);
        line-height: 1.2em;

        font-weight:600;
        border-left:6px solid black;
        padding:0 0 0 30px;
        margin-bottom:40px;
        text-transform: uppercase;
    }

    header ul:not(.sub-menu) > li.menu-item-has-children {
        cursor: pointer;
    }
    header ul:not(.sub-menu) > li.menu-item-has-children > ul.sub-menu {
        cursor: default;
    }
    header ul.sub-menu.opensubmenu {
        display: flex!important;
    }
    header ul.sub-menu li {
        display: block;
        margin:0 0 8px 0;
    }
    header ul.sub-menu a {
        font-size:18px;
        line-height: 26px;
        font-weight: 400;
    }
    header ul.sub-menu p {
        font-size:18px;
        line-height: 26px;
        color:black!important;
    }
    header ul.sub-menu img.menuimg {
        display: block;
        width:auto;
        max-width: 100%;
        box-shadow:10px 10px 0 0 #E3027F;
    }
    header nav > ul > li > ul.sub-menu > li {
        width:330px;
        max-width: 100%;
        margin:0 30px 30px 0;
    }
    header nav > ul > li > ul.sub-menu > li > a {
        display: block;
        font-size:30px;
        line-height: 45px;
        font-size: clamp(24px, 1.5vw, 30px);
        line-height: 1.3em;
        font-weight:600;
        margin-bottom:12px;
    }
    header nav > ul > li > ul.sub-menu {
        
    }
    
}
@media screen and (max-width:1180px) {
    .hamburger {
        display: block;
    }
    header .logo {
        padding:16px 20px;
        flex:1 1 0px;
    }
    header .logo img {
        height:32px;
    }
    header nav {
        display: none;
        position: relative;
        background-color:white!important;
        transform:none!important;
        padding:0;
        font-size:24px;
        line-height: 34px;
        overflow:hidden auto;
    }
    header.opennav nav {
        display: block;
        position: fixed;
        top:64px;
        width:100%;
        height:calc(100vh - 64px);
    }
    header nav li {
        display: block;
        margin:0;
        padding:0;
    }
    header nav > ul {
        background-image:url('img/headernav_grid_bg.svg');
        background-size: auto 56px;
        min-height:100%;
        height:auto;
        background-position: center bottom;
        background-repeat: no-repeat;
        padding:40px 20px 112px 20px;
    }
    header nav > ul > li {
        border-bottom:1px solid #EFEFEF;
        padding:0;
    }
    header nav > ul > li > a {
        padding:15px 0;
        display: block;
    }
    header nav ul:not(.sub-menu) > li.menu-item-has-children::after {
        top:34px;
        transition: .3s ease-in-out;
        height:40px;
    }
    header nav ul:not(.sub-menu) > li.menu-item-has-children:has(ul.opensubmenu)::after {
        transform:TranslateY(-50%) rotate(180deg);
    }
    header nav ul.sub-menu {
        display: block;
        margin:32px 0;
        padding-left:16px;
        font-size:18px;
        line-height: 18px;
        border-left:4px solid black;
        display: none;
    }
    header nav .close-submenu {
        display: none!important;
    }
    header nav ul.sub-menu.opensubmenu {
        display: block;
    }
    header nav ul.sub-menu ul.sub-menu {
        padding-left:15px;
        border-left:2px solid black;
        display: block;
        margin-top:0!important;
        margin-bottom:0!important;
    }
    header nav li.menu-item-has-children ul.sub-menu:first-of-type {
        margin-top:0px;
    }
    header nav ul.sub-menu li {
        border-top:1px solid #EFEFEF;
    }
    header nav ul.sub-menu a {
        font-weight:400;
        display: block;
        padding:14px 0;
    }
    header nav ul.sub-menu li:first-of-type > a, header nav ul.sub-menu > li.menu-item-has-children > a, header nav > ul > li > ul.sub-menu > li:not(.menu-item-has-children) > a {
        font-weight:600;
        font-size:20px;
        line-height: 20px;
    }
    header nav ul.sub-menu ul.sub-menu li:first-of-type > a {
        font-weight:400;
        font-size:18px;
        line-height: 18px;
    }
    header nav .menuimg {
        display: block;
        width:100%;
    }
    header nav p.subtext {
        font-size:14px;
        line-height: 18px;
        opacity: .6;
        margin-top:6px;
    }
}

.hero h1 {
    text-transform: uppercase;
}
.hero.hero-hasimg {
    min-height:700px;
    min-height:clamp(500px, 100vw, 700px);
    height:auto;
    padding-top:160px;
    padding-bottom:80px;
    position: relative;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-bottom:50px;
}
.hero.hero-hasimg::after {
    content:'';
    position: absolute;
    z-index: 1;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color: black;
    opacity: 0.25;
}
.hero.hero-hasimg .hero-img img {
    position: absolute;
    z-index: 0;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit: cover;
    object-position: center;
    box-shadow: 20px 20px 0 0 #E3027F;
}
.hero.hero-hasimg .hero-content {
    position: relative;
    z-index: 5;
    color:white;
}
.hero.hero-hasimg .hero-content h1, .hero.hero-hasimg .hero-content h4 {
    border-color:currentColor;
}
@media (orientation: portrait) {
    .hero.hero-hasimg {
        min-height:280px;
        padding-top:120px;
        padding-bottom:25px;
    } 
    .hero.hero-hasimg::after {
        background:linear-gradient(to top, rgb(39, 39, 39), rgb(0 0 0 / 25%), rgb(0 0 0 / 25%));
        opacity: 1;
        mix-blend-mode: multiply;
    }
}

ul.categories {
    display: block;
    margin:18px 0 0 0;
    padding:0;
    list-style: none;
}
ul.categories li.cat-item, ul.categories li.cat-item-all {
    display: block;
    margin:0;
    padding:0;
    font-weight:600;
    float:left;
}
ul.categories li.cat-item a {
    color:#06AECF;
    text-decoration: none;
    display: block;
    padding:16px;
    background-color: black;
    color:white;
    font-size: 18px;
    line-height: 24px;
    transition: .3s ease;
}
ul.categories li.cat-item.current-cat a, ul.categories li.cat-item:hover a {
    color:black;
    background-color: #FFFD38;
}
@media screen and (max-width:530px) {
    ul.categories {
        text-align: left;
    }
    ul.categories li.cat-item {
        display: block;
    }
}