/*
#BASIS------------------
##  Reset en set classes
------------------------

#INCLUDES---------------
##  NAV
------------------------

#PAGES------------------
##  404
##  Home
##  Services
##  Werkwijze
##  Project-single
##  About
##  vCard
------------------------

#@KEYFRAMES------------- 
##
------------------------

#HOVERS------------------
##  Reset en set hovers
##  Nav
##  Home
##  Services
##  Werkwijze
##  Project-single
------------------------

#@mediaQueries------------------
##  Nav 
##  Home 
##  Services
##  Werkwijze 
##  Project-single 
------------------------
*/


/* --------------------------------------------------------------------
BASIS
---------------------------------------------------------------------*/

/* Reset en set classes */
/* clampbuilder(375, 1920, , )  */
:root {
    --h3-fontSize: clamp(1.375rem, 1.2233009708737863rem + 0.6472491909385114vw, 2rem);
    --h4-fontSize: clamp(1rem, 0.9089805825242718rem + 0.3883495145631068vw, 1.375rem);
    --h5-fontSize: 0.875rem;
    --h6-fontSize: 0.625rem;
    
    --contact-fontSize: 15px;
    --intro-fontSize: clamp(1rem, 0.9696601941747572rem + 0.12944983818770225vw, 1.125rem);

    --color-light: rgba(222, 223, 227, 1);
    --color-dark: rgba(15, 10, 10, 1);
    --color-secondary: rgba(82, 0, 27, 1);
    --color-tertiary: rgba(72, 107, 150, 1);
    --color-accent: rgba(202, 239, 67, 1);
    --color-accent-activated: hsl(73, 84%, 40%);
    --colorListPrefix: var(--color-light);

    --innerGrid: 10px 194px 1fr 35px 218px 10px;
    --textureBG: var(--color-light) url('/bg-Texture.jpg');

    --articlePaddingTop: min(25vw, 120px);

    /*Irredecsence gradient opzet */
        /*----------------------------*/
    
    --transparent: rgba(255, 255, 255, 0);
    /*fix for safari gradients*/
    --color1: #92f2f2;
    /*blue*/
    --color2: #d6cff1;
    /*magenta*/
    --color3: #c4f2e5;
    /*turquoise*/
    --color4: #a8d0f0;
    /*dark-blue*/
    --color5: #c2dcf2;
    /*blue-tint*/
    --color6: #eed5f2;
    /*pink*/
    --color7: #9cb9fc;
    /*darker-blue*/

    --shine:
        radial-gradient(at 0% 50%, var(--color1), var(--color2), var(--transparent) 50%),
        radial-gradient(at 100% 50%, var(--color1), var(--color2), var(--transparent) 30%),
        linear-gradient(90deg, var(--transparent) 20%, var(--color1) 40%, var(--transparent) 70%);

    --holographic:
        radial-gradient(at 30% -5%, var(--color1), var(--color2), var(--transparent) 25%),
        radial-gradient(at 50% 70%, var(--color3), var(--transparent) 30%),
        radial-gradient(at 70% 0%, var(--color2), var(--transparent) 20%),
        linear-gradient(75deg, var(--color1) 5%, var(--transparent), var(--color4), var(--transparent), var(--color6), var(--transparent), var(--color2), var(--transparent), var(--color3) 90%),
        radial-gradient(at 30% 50%, var(--color1), var(--transparent) 30%),
        radial-gradient(at 30% 50%, var(--color7), var(--transparent) 30%),
        radial-gradient(at 100% 50%, var(--color1), var(--color5), var(--transparent) 50%),
        linear-gradient(115deg, var(--color1) 5%, var(--color4) 10%, var(--color2), var(--color6) 20%, var(--color4), var(--color4) 30%, var(--color2), var(--color5) 40%, var(--color1), var(--color4) 70%);
    /*----------------------------*/
}

::selection {
    color: black;
    background: var(--color-accent);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    position: relative;
}
*[onclick]:not([onclick=""]) {
    cursor: pointer;
}

html {
    scroll-behavior: smooth;
    font-family: 'Proxima Nova', sans-serif;
    font-size: 16px;
}

body{
    background-color: var(--color-dark);
}

img {
    font-style: italic; 

    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: var(--url);

    /* vertical-align: middle; */

    display: block;
    max-width: 100%;
    height: auto;
}

h3 {
    font-weight: 700;
    font-size: var(--h3-fontSize);
}

h4 {
    font-weight: 600;
    font-size: var(--h4-fontSize);
}

h5{
    font-weight: 600;
    font-size: var(--h5-fontSize);
    text-transform: uppercase;
}
p{
    font-size: 15px;
    text-align: justify;
}

a {
    text-decoration: none;
    color: inherit;
}

i{
    font-style: italic;
}

ul {
    list-style: none;
}

ol {
    font-size: 15px;
    list-style-position: inside;
}

iframe {
    border: none;
}

button{
    border: none;
    background: transparent;

    font-family: 'Proxima Nova Cond', sans-serif;
    font-size: 15px;
    font-weight: 900;
    font-style: italic;
    color: var(--color-dark);

    letter-spacing: 0.05em;
    text-transform: uppercase;

    cursor: pointer;
}

button.upArrow i{
    margin-left: 15px;
}

.secCol{
    color: var(--color-secondary);
}

.terCol{
    color: var(--color-tertiary);
}

.subTekst{
    font-family: 'Proxima Nova', sans-serif;
    font-weight: 400;
    font-style: italic;
    font-size: 12px;
    letter-spacing: 0.1em;
}

.AP-BulletPoint{
    width: 0.45em;

    margin-right: 0.8em;

    color: inherit;
    vertical-align: middle;

    transform: rotate(90deg);
    transition: transform 300ms ease-in-out;

}

.swiper-slide {
    flex-shrink: 1 !important;
}

.ph {
    top: 3px;
    margin-right: 10px;
    font-size: 1.2em;
}

.op0 {
    opacity: 0;
    pointer-events: none !important;
}

.patternFill{
    background-image: repeating-linear-gradient(-45deg, var(--color-light) 0, var(--color-light) 1px, transparent 0, transparent 50%);
    background-size: 10px 10px;
}

#mobileScroll{
    display: none;
}
.scrolling{
    opacity: 0 !important;
    pointer-events: none !important;
}

.antiScrollbar{
    overflow-x: hidden;
    overflow-y: scroll;
}

#logoHeader{
    position: absolute;
    top: 35px;
    left: 35px;

    font-size: var(--h4-fontSize);

    width: min(380px, 95%);

    cursor: pointer;
    z-index: 1;
}

.glassBackground{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: calc(100% + 15px);
    height: calc(100% + 1em);

    background: rgba(15, 10, 10, 0.2);
    
    -webkit-backdrop-filter: blur(3px) brightness(50%);
    backdrop-filter: blur(3px) brightness(50%);

    border: solid 1.25px rgba(222, 223, 227, 0.2);
    border-radius: 5px;

    /* box-shadow: 0 4px 30px rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.5); */
    
}
#logoText {
    fill: #DEDFE3;
}
#BGimg{
    position: absolute;
    top: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
}

.lazyImg{
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
}

.single-project article:last-of-type,
.services article:last-of-type,
.werkwijze article:last-of-type{
    margin-bottom: calc(6svh + 46px + 70px);
}

.marg-top-240{
    margin-top: 240px !important;
}
.marg-top-120 {
    margin-top: 120px !important;
}
/* --------------------------------------------------------------------
INCLUDES
---------------------------------------------------------------------*/

/* Nav.php */

.mainMenuFooterMobile{
    display: none;
    opacity: 1;
    transition: opacity 300ms ease-in-out;
}
.mainMenuFooterMobile ul{
    font-size: var(--contact-fontSize);
}
.mainMenuFooterMobile *{
    text-decoration: none;
}

.menuOnload {
    grid-area: 2 / 2 / 3 / 3;

    position: absolute;
    right: 0;

    height: 100%;
    width: 218px;

    z-index: 2;
    
    transition: width 1000ms cubic-bezier(0.39, -0.04, 0.1, 1.04); /* een functie schrijven die de duratie aanpast aan de breedte van het scherm (100% = 2560px = 1000ms) */
    animation: menuSlideIn 800ms cubic-bezier(0.39, -0.04, 0.1, 1.04);
}

.menuOnload.active {
    width: 100%;
}

.menu {
    position: absolute;
    right: 0;

    height: 100%;
    width: 218px;

    background: rgba(15, 10, 10, 0.2);
    -webkit-backdrop-filter: blur(3px) brightness(50%);
    backdrop-filter: blur(3px) brightness(50%);
    border: solid 1.25px rgba(222, 223, 227, 1);

    border-radius: 5px;

    color: var(--color-light);

    transition: width 1000ms cubic-bezier(0.39, -0.04, 0.1, 1.04); /* een functie schrijven die de duratie aanpast aan de breedte van het scherm (100% = 2560px = 1000ms) */
    animation: backdrop-filter-animation-out 300ms ease-in-out forwards;
}

.menu.active {
    width: 100%;
    animation: backdrop-filter-animation-in 300ms ease-in-out forwards;
}

.asideContainer {
    float: right;

    height: 100%;
    width: 218px;

    padding: 25px;

    z-index: 99;
}

.mainMenuFooter  img {
    margin-bottom: 30px;
}

.mainMenuFooter ul {
    font-size: var(--contact-fontSize);
    font-weight: 600;
    line-height: 1.125em;
}

.mainMenuFooter ul :nth-child(2) {
    font-size: calc(var(--contact-fontSize) - 1px);
}

.mainMenuFooter ul :nth-child(3),
.mainMenuFooter ul :nth-child(4) {
    font-family: 'Proxima Nova Cond', sans-serif;
    font-weight: 500;
}

.menuLink {
    position: absolute;
    bottom: 25px;

    width: calc(100% - 50px);

    text-align: center;
    
    cursor: pointer;
}

.menuInnerContainer {
    height: 100%;
}

.subMenu {
    padding: 125px 218px 20px 200px;
    opacity: 0;

    pointer-events: none;
    animation: op1OUT 400ms forwards;
}

.subMenu li {
    cursor: pointer;
}

.subMenu.active {
    pointer-events: all;
    animation: op1IN 400ms 400ms forwards;
}

.subMenu h3 {
    font-weight: 600;
}

.subMenu li.active svg {
    transform: rotate(180deg);
}

.menuFeaturedContainer {
    position: absolute;
    bottom: 100px;

    width: 100%;
    max-width: 100%;

    z-index: 999;

    padding: 0 218px 0 200px;
    overflow-x: hidden;

    transition: opacity 800ms;
}

.featured {
    display: flex;
    align-items: flex-end;
    gap: 15px;

    perspective: 1500px;
    perspective-origin: 50% 50%;
}

.featured section {
    max-height: min(25vh, 350px);
    aspect-ratio: 3 / 2;
    max-width: min(37.5vh, 525px);
    
    background: rgba(255, 255, 255, 0.2);
    -webkit-backdrop-filter: blur(3px) brightness(50%);
    backdrop-filter: blur(3px) brightness(110%);

    border: solid 1.25px rgba(222, 223, 227, 0.2);
    border-radius: 5px;

    transform: rotateY(35deg);
    opacity: 0;

    cursor: pointer;
}

.featured.active section:nth-child(1) {
    animation: featuredIN 300ms ease-in-out 450ms forwards;
}

.featured.active section:nth-child(2) {
    animation: featuredIN 300ms ease-in-out 550ms forwards;
}

.featured.active section:nth-child(3) {
    animation: featuredIN 300ms ease-in-out 650ms forwards;
}

.featured.active section:nth-child(4) {
    animation: featuredIN 300ms ease-in-out 750ms forwards;
}

.featured.active section:nth-child(5) {
    animation: featuredIN 300ms ease-in-out 850ms forwards;
}

.featured section {
    animation: featuredOUT 600ms 0ms forwards;
}

.featured section div {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    height: calc(100% - 8px);
    width: calc(100% - 8px);

    border-radius: 3px;
    box-shadow: 1px 2px 2px 0px rgba(0, 0, 0, 0.25), 4px 0px 10px 0px rgba(0, 0, 0, 0.3);
}

.featured section div img {
    height: 100%;
    width: 100%;

    object-fit: cover;

    border-radius: 2px;
}

.menuFeaturedContainer.mobile{
    display: none;
}

.projectLijst {
    --LijstHoogte: 265px;

    position: absolute;
    right: -17px;

    height: 100%;
    width: 100%;
    max-height: calc(100% - var(--LijstHoogte) - 35px);
    
    padding: 15px 242px 20px 183px; /* een custom variable maken die de hoogte van id="subMenuLinks" meerekent*/
    overflow-y: auto;

    pointer-events: none;
}

.menu.active .projectLijst{
    pointer-events: all;
}

.projectLijst p:first-of-type{
    margin-bottom: 0.6em;

    text-align: right;
    text-transform: uppercase;

    /* position: fixed;
    right: calc(242px + 30px - max(5vw, 10px)) ;
    transform: translateY(-3em); */
}

.projectLijst p:first-of-type svg {
    width: 0.6em;
    transform: rotate(180deg);
}

.projectLijst li {
    padding: 15px 25px;
    
    border-top: solid var(--color-light) 1px;
    opacity: 0;

    pointer-events: none;

    transition: opacity 300ms;
}

.projectLijst li.active {
    opacity: 1;
    pointer-events: initial;
}

.projectLijst li:last-of-type {
    border-bottom: solid var(--color-light) 1px;
}

.projectLijst h4 {
    display: inline-block;
}

/* .projectLijst h4:nth-child(2) {
    margin: 0 60px 0 200px;
    flex: 0 1 max(50%, 200px);
} */

.projectLink a > div:first-of-type{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    column-gap: max(5cqw, 25px);

    container: projectlijstInfo / inline-size;    
}

.projectLink a > div > div:first-of-type{
    display: flex;
    flex: 1 1 auto;
    column-gap: max(10cqw, 70px);
    flex-wrap: wrap;
}

.projectLink a > div > div:first-of-type > h4:first-of-type {
    min-width: 90px;
}

.projectLink a > div > h4:last-of-type {
    font-weight: 400;
    font-size: clamp(0.75rem, 0.16666666666666663rem + 1.3333333333333335cqw, 1.375rem);
    opacity: 0.5;
}

.projectLijstPreviews {
    position: fixed;
    left: 0px;
    top: 0px;

    height: 100%;
    height: min(25vw, 300px);
    aspect-ratio: 3 / 2;
    
    background: rgba(255, 255, 255, 0.2);
    -webkit-backdrop-filter: blur(3px) brightness(50%);
    backdrop-filter: blur(3px) brightness(110%);
    border: solid 1.25px rgba(222, 223, 227, 0.2);

    border-radius: 5px;
    opacity: 0;

    pointer-events: none;
    z-index: 10000;

    animation: op1OUT 500ms ease forwards;
}

.projectLijstPreviews div {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    height: calc(100% - 8px);
    width: calc(100% - 8px);
    
    border-radius: 3px;
    box-shadow: 1px 2px 2px 0px rgba(0, 0, 0, 0.25), 4px 0px 10px 0px rgba(0, 0, 0, 0.3);
}

.projectLijstPreviews img {
    height: 100%;
    width: 100%;

    object-fit: cover;
    border-radius: 2px;
}


/* Contact formulier */

.contactFormulierContainer{
    max-width: 100%;
    margin-top: 240px;

    /* background: linear-gradient(-90deg, rgba(72, 107, 150, 0.5) 20%, rgba(82, 0, 27, 0) 100%); */
    background: rgba(15, 10, 10, 0.5);
    /* -webkit-backdrop-filter: blur(3px) brightness(50%);
    backdrop-filter: blur(3px) brightness(50%);*/
}

.contactFormulierContainer hr{
    color: var(--color-light);

    height: 1px;

    z-index: 99;
}

.contactFormulier{
    display: grid;
    grid-template-columns: min-content 10px minmax(250px, 25%) 35px min-content 10px minmax(250px, 25%) 10px minmax(0, 1fr);
    grid-template-rows: max-content max-content max-content max-content max-content;

}

.contactFormulier hr:nth-of-type(1){
    grid-area: 2 / 1 / 3 / 8;
}
.contactFormulier hr:nth-of-type(2) {
    grid-area: 3 / 1 / 4 / 8;
}
.contactFormulier hr:nth-of-type(3) {
    grid-area: 4 / 1 / 5 / 8;
}
.contactFormulier hr:nth-of-type(4) {
    grid-area: 5 / 1 / 6 / 4;
}
.contactFormulier hr:nth-of-type(5) {
    grid-area: 5 / 5 / 6 / 8;
    left: 10px;
    width: calc(100% - 10px);
}

.contactFormulier .titel{
    grid-area: 1 / 1 / 2 / 5;

    padding-top: 10px;
    padding-left: 10px;
    padding-bottom: 70px;

    color: var(--color-light);

    font-weight: 600;
    text-transform: uppercase;
    text-shadow: 1px 2px 3px rgba(72, 107, 150, 0.25);
}

.contactFormulier label[for=naam]{
    grid-area: 2 / 1 / 3 / 2;
}
.contactFormulier label[for=onderwerp]{
    grid-area: 3 / 1 / 4 / 2;
}
.contactFormulier label[for=bericht]{
    grid-area: 4 / 1 / 5 / 2;
}
.contactFormulier label[for=email]{
    grid-area: 5 / 1 / 6 / 2;
}
.contactFormulier label[for=telefoonnummer]{
    grid-area: 5 / 5 / 6 / 6;
}

.contactFormulier label,
.contactFormulier #naam,
.contactFormulier #onderwerp,
.contactFormulier #bericht,
.contactFormulier #email,
.contactFormulier #telefoonnummer{
    padding-top: 10px;
    padding-left: 10px;
    padding-bottom: 35px;

    font-family: 'Proxima Nova Cond', sans-serif;
    font-size: 15px;
    font-weight: 600;

    color: var(--color-light);

    text-transform: uppercase;
    letter-spacing: 0.03em;

    background: transparent;
}

.contactFormulier #naam::placeholder,
.contactFormulier #onderwerp::placeholder,
.contactFormulier #bericht::placeholder,
.contactFormulier #email::placeholder,
.contactFormulier #telefoonnummer::placeholder {
    font-size: 12px;
    font-weight: 300;
    text-transform: uppercase;
    text-align: end;
}

.contactFormulier #bericht{
    padding-top: 10px;
    padding-bottom: 70px;
}
.contactFormulier #bericht{
    text-transform: none;
}

.contactFormulier #naam{
    grid-area: 2 / 3 / 3 / 8;
}
.contactFormulier #onderwerp {
    grid-area: 3 / 3 / 4 / 8;
}
.contactFormulier #bericht {
    grid-area: 4 / 3 / 5 / 8;
}
.contactFormulier #email {
    grid-area: 5 / 3 / 6 / 4;
}
.contactFormulier #telefoonnummer {
    grid-area: 5 / 7 / 6 / 8;
}

.contactFormulier label{
    color: var(--color-light);
}
.contactFormulier textarea,
.contactFormulier input{
    resize: none;
    border: none;
    padding-inline: 4px;
}
.contactFormulier textarea:focus-visible,
.contactFormulier input:focus-visible {
    /* outline: var(--color-accent) dashed 2px;
    outline-offset: -2px; */
    outline: none;
    background-color: rgba(255, 255, 255, 0.05) !important;
}
.contactFormulier button:focus-visible {
    outline: var(--color-accent) solid 2px;
}

.contactFormulier button{
    grid-area: 1 / 7 / 2 / 8;
    justify-self: end;
    
    height: max-content;
    margin-top: 10px;
    margin-right: 5px;

    color: var(--color-light);
}

.contactFormulier button i{
    display: inline-block;
    margin-left: 15px;

    width: 15px;
    height: 15px;
}
.contactFormulier button i::before{
    position: absolute;
    top: 3px;
    left: 0;
}

.contactFormulier .patternFill{
    grid-area: 1 / 9 / 6 / 10;
    min-height: 525px;
}

.succesBerichtContainer{
    height: 525px;
}
.succesBericht{
    grid-area: 1 / 1 / 6 / 8;
    align-self: center;
    justify-self: center;

    color: var(--color-light);
    text-align: center;
}

/* --------------------------------------------------------------------
PAGES
---------------------------------------------------------------------*/
/* 404.php */
article.notFound.grid {
    display: grid;
    grid-template-columns: var(--innerGrid);

    height: 100vh;

    background: var(--textureBG);
}

article.notFound.grid section {
    grid-area: 1 / 3 / 1 / 4;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

article.notFound.grid section h1{
    font-family: 'Proxima Nova Cond', sans-serif;
    font-size: clamp(1.25rem, 0.825242718446602rem + 1.8122977346278317vw, 3rem);
    font-weight: 900;
    font-style: italic;

    margin-bottom: 120px;
}

/* Home.php */

main.grid {
    display: grid;
    grid-template-columns: 10px 1fr 10px; 
    grid-template-rows: 10px 1fr 10px;

    height: 100%;
    width: 100%;
    min-height: 100dvh;
    min-width: 100vw;

    overflow: hidden;
    
}

header {
    position: absolute;
    top: 35px;
    left: 35px;

    font-size: var(--h4-fontSize);

    width: min(380px, 95%);
    
    cursor: pointer;
    z-index: 1;

    opacity: 0;
    pointer-events: none;

    transition: opacity 800ms ease 200ms;
}
header.active{
    opacity: 1;
    pointer-events: all;
}

.infoLink {
    position: absolute;
    bottom: 35px;
    left: 35px;

    font-size: var(--h5-fontSize);
    color: var(--color-light);

    z-index: 99;
}
.infoLink.menuActive {
    color: var(--color-light) !important;
}

.projectBG {
    grid-area: 1 / 1 / 4 / 4;

    max-height: 100dvh;

    opacity: 0;
    pointer-events: none;

    transition: opacity 800ms ease 200ms;
}

.projectBG section {
    height: 100%;
    width: 100%;

    cursor: pointer;
}

/* .projectBG section::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(15, 10, 10, 0) 30%, rgba(15, 10, 10, 0.3) 100%);
    mix-blend-mode: multiply;
} */

.projectBG img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.projectBG.active {
    opacity: 1;
    pointer-events: all;

}

.LandingText{
    position: absolute;
    left: 35px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10001;

    opacity: 1;
    transition: opacity 500ms ease 500ms;
}

.LandingText.active{
    opacity: 0 !important;
    transition: opacity 500ms ease;
    pointer-events: none;
}

.LandingText h1{
    color: var(--color-light);
    text-shadow: 
        .01em .02em .04em var(--color-tertiary);
    font-family: 'Proxima Nova Cond', sans-serif;
    font-size: clamp(2.55rem, 1.8599999999999999rem + 3.45vw, 6rem);
    font-weight: 900;
    line-height: 1em;
    text-transform: uppercase;
    letter-spacing: .02em;
}
.LandingText span{
    display: block;
}
.LandingText span:nth-child(1) {
    /*  animation-name
        animation-duration
        animation-delay
        animation-iteration-count
        animation-direction
        animation-timing-function
        animation-fill-mode     */

    animation: HomeTextSlideIN 500ms 500ms 1 normal ease-out both
}
.LandingText span:nth-child(2) {animation: HomeTextSlideIN 500ms 600ms 1 normal ease-out both}
.LandingText span:nth-child(3) {animation: HomeTextSlideIN 500ms 650ms 1 normal ease-out both}

#trailer,
.trailerMobile{
    height: 15px;
    width: 15px;

    background-color: var(--color-accent);
    color: var(--color-accent);

    border-radius: 20px;

    z-index: 10000;
    pointer-events: none;
}


.trailerMobileContainer{
    display: none;
}

#trailer {
    position: fixed;
    left: 0px;
    top: 0px;

    opacity: 0;
    transition: opacity 500ms ease;
}

#trailer h4,
.trailerMobile h4 {
    position: relative;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);


    width: fit-content;
        
    font-family: 'Proxima Nova Cond', sans-serif;
    font-weight: 900;
    font-size: 16px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;

    color: inherit;

    pointer-events: none;
    
}

#trailer p,
.trailerMobile p {
    position: relative;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);

    width: fit-content;

    text-align: center;
    white-space: nowrap;

    color: var(--color-light);

    pointer-events: none;
}

.iframePage {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;
    min-width: 100vw;
    min-height: 100dvh;
}

#newPage {
    width: 100%;
    height: 100%;
}


/* Services.php */
.services.grid {
    display: grid;
    grid-template-columns: var(--innerGrid);

    padding-top: var(--articlePaddingTop);

    background-color: var(--color-dark);

}

.services.grid .contactFormulierContainer{
    grid-area: 2 / 3 / 3 / 8;
}

article.services{
    grid-column-start: 3;
    grid-column-end: 4;

    width: 100%;
    max-width: 100%;
}
.servicesIntro{
    /* border-top: 1px solid var(--color-light); */
}
.servicesIntro h5{
    margin-top: 10px;

    color: var(--color-light);
}
.servicesIntro p{
    margin-top: 1.5em;
    width: clamp(500px, calc(70% - 18px), 750px);

    font-size: var(--intro-fontSize);
    font-weight: 600;
    color: var(--color-light);
}

.servicesIntro p:first-of-type{
    margin-top: 70px;
}
nav.serviceCategorieen{
    width: 100%;
    margin-top: 120px;
}
nav.serviceCategorieen ul{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    gap: 35px;
    justify-content: space-between;
}
nav.serviceCategorieen li {
    flex: 1 1 210px;
    aspect-ratio: 3 / 4;

    border-radius: 5px;
    border: 1px solid #707070;
}

nav.serviceCategorieen li div:nth-child(1){
    width: 100%;
    height: 100%;

    border-radius: 5px;
}
/* nav.serviceCategorieen li div:nth-child(2) {
    width: 100%;
    height: 100%;

    border-radius: 5px;

    background: linear-gradient(270deg, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.00) 50%);
    background-blend-mode: multiply;
} */

nav.serviceCategorieen li div:nth-child(1) img{
    background-image: linear-gradient(270deg, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.00) 50%), var(--url);
    border-radius: inherit;
}
nav.serviceCategorieen li div:nth-child(1)::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(270deg, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.00) 50%);
}
nav.serviceCategorieen li div:nth-child(1) span{
    z-index: 1;
}

.serviceCategorieTitel{
    position: absolute;
    right: 10px;
    bottom: 10px;

    max-height: min-content;

    font-size: 3vw;
    font-weight: 900;
    line-height: 0.9em;

    writing-mode: vertical-rl;
    text-orientation: sideways;
    text-transform: uppercase;
    color: var(--color-light);

    text-shadow: 0px 1px 1px rgb(202, 239, 67),
                -2px -2px 1px rgba(15, 10, 10, 0.35);

    transform: rotate(-180deg);
    transition: transform 500ms cubic-bezier(1, -0.6, 0, 1.45);
}
.serviceCategorieCTA{
    display: block;

    position: absolute;
    left: 50%;
    bottom: 10px;

    width: 100%;
    transform: translate(-50%, 0);

    font-weight: 900;
    font-size: var(--h5-fontSize);
    letter-spacing: 0.1em;
    text-align: center;

    text-transform: uppercase;
    color: var(--color-light);

    text-shadow: -2px -2px 1px rgba(15, 10, 10, 0.15);
    opacity: 0;

    transition: opacity 300ms ease;
}
.serviceKaart{
    margin-top: 180px;
    display: flex;
}

.serviceKaart:nth-child(2n+2){
    justify-content: flex-end;
}

.services:first-of-type section.serviceKaart{
    margin-top: 240px;
}

.serviceKaartInnerContainer{
    width: min(100%, 750px);
}

.serviceKaartInnerContainer div:first-of-type{
    position: absolute;
    top: 50%;
    right: 0;
    /* transform: translate(calc(100% - 70px), -50%); */
    transform: translate(50%, -50%);

    height: 120%;
    aspect-ratio: 3 / 4;

    background-image: ('');
    background-repeat: no-repeat;
    background-size: cover;
    background-color: var(--color-tertiary);
}

.serviceKaart:nth-child(2n+2) > .serviceKaartInnerContainer div:first-of-type {
    left: 0;
    transform: translate(-50%, -50%);
    /* transform: translate(calc(-100% + 70px), -50%); */
}

.serviceInfo,
.faseInfo{
    box-sizing: content-box;
    /* width: clamp(500px, calc(50% - 18px), 750px); */

    background: rgba(15, 10, 10, 0.2);
    -webkit-backdrop-filter: blur(3px) brightness(50%);
    backdrop-filter: blur(3px) brightness(50%);

    border: solid 1.25px rgba(222, 223, 227, 0.2);
    border-radius: 5px;

    color: var(--color-light);

    padding: 35.5px;

    --lijnbreedte: 15px;
}
.faseInfo {
    background: rgba(15, 10, 10, 0.2%);
    -webkit-backdrop-filter: blur(15px) brightness(85%);
    backdrop-filter: blur(15px) brightness(85%);
    text-shadow: 1px 1px 1px rgba(15, 10, 10, 0.3);
}

.serviceInfo h3,
.faseInfo h3{
    font-family: 'Proxima Nova Cond', sans-serif;
    font-weight: 700;
    font-size: calc(var(--h3-fontSize) * 1.35);
    line-height: 1.35em;
}

.serviceInfo h3:nth-child(2),
.faseInfo h3:nth-child(2) {
    font-family: 'Proxima Nova Cond', sans-serif;
    font-weight: 300;
    font-size: var(--h3-fontSize);

    line-height: 1.2em;
    margin-bottom: 35px;
}

.serviceInfo p,
.faseInfo p {
    font-weight: 500; 

    margin-bottom: 35px;
}

.serviceInfo ul,
.faseInfo ul {
    margin-left: 35px;
}

.serviceInfo ul::before,
.faseInfo ul::before {
    content: "";
    position: absolute;
    
    height: 75%;
    width: 1px;

    background-color: var(--color-light);
}

.serviceInfo li::before,
.faseInfo li::before {
    content: "";
    position: absolute;
    top: -35px;

    height: 50px;
    width: var(--lijnbreedte);

    border-bottom: var(--color-light) solid 1px;
    border-left: var(--color-light) solid 1px;
}

.serviceInfo li:first-of-type,
.faseInfo li:first-of-type{
    padding-top: 35px;
}
.serviceInfo li:first-of-type::before,
.faseInfo li:first-of-type::before {
    margin-top: 35px;
}

.serviceInfo li > span,
.faseInfo li > span{
    display: block;
    padding-left: calc(var(--lijnbreedte) + 10px);

    font-family: 'Proxima Nova Cond', sans-serif;
    font-size: 15px;
    font-weight: 300;

    line-height: 2em;
    letter-spacing: 0.035em;
}

.casusTekst img{
    max-height: 400px;
    margin-top: 60px;
}

/* Werkwijze.php */
.werkwijze.grid {
    display: grid;
    grid-template-columns: var(--innerGrid);

    padding-top: var(--articlePaddingTop);

    background-color: var(--color-dark);

}

.werkwijze.grid .contactFormulierContainer {
    grid-area: 2 / 3 / 3 / 8;
}

article.werkwijze {
    grid-column-start: 3;
    grid-column-end: 4;

    width: 100%;
    max-width: 100%;
}

article.werkwijze section:last-of-type{
    margin-bottom: -190px;
}

.werkwijzeIntro {
    /* border-top: 1px solid var(--color-light); */
}

.werkwijzeIntro h5 {
    margin-top: 10px;

    color: var(--color-light);
}

.werkwijzeIntro p {
    margin-top: 1.5em;
    width: clamp(500px, calc(70% - 18px), 750px);

    font-size: var(--intro-fontSize);
    font-weight: 600;
    color: var(--color-light);
}

.werkwijzeIntro p:first-of-type {
    margin-top: 70px;
}

.werkwijzeKaartContainer{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    /* flex-wrap: wrap; */

    gap: var(--gap-size);
    --gap-size: 15px;
}

/* .werkwijzeKaartContainer::before{
    content: "";
    position: absolute;

    height: 100%;
    width: 100%;

    background: var(--color-accent);
} */

.werkwijzeKaartInnerContainer{
    /* flex: 0 1 calc(25% - (var(--gap-size) * 0.75)); */
    
    height: 600px;
    min-width: 350px;

    /* aspect-ratio: 3 / 5; */
}

.werkwijzeKaartInnerContainer::before{
    content: "";
    position: absolute;

    width: 100%;
    height: 100%;

    border-radius: 5px;

    background-image: url('/pages/images/Fase-BG2-up.webp');
    background-size: 400% auto;
    
}

.werkwijzeKaartInnerContainer:nth-of-type(1)::before{
    background-position: 0% 65%;
}
.werkwijzeKaartInnerContainer:nth-of-type(2)::before {
    background-position: 33.33% 65%;
}
.werkwijzeKaartInnerContainer:nth-of-type(3)::before {
    background-position: 66.66% 65%;
}
.werkwijzeKaartInnerContainer:nth-of-type(4)::before {
    background-position: 99.99% 65%;
}

.faseInfo{
    box-sizing: border-box;
    height: 100%;
}


/* Project-Single.php */
.floatL{
    float: left;
    z-index: 2; 
}

.floatR{
    float: right;
    z-index: 2;
}

.fullWidth img{
    width: 100%;
    max-width: 100%;
    z-index: 1;
}
.fullWidth.duo{
    display: flex;
    flex-wrap: wrap;
    gap: 2em;
    justify-content: space-between;
}
.fullWidth.duo > div{
    flex: 1 1 350px;
}
.single-project.grid{

    display: grid;
    grid-template-columns: var(--innerGrid);

    background-color: var(--color-light);
    /* Bovenstaande geeft een kleur langs de gebleurde randen, als je dit niet wilt dan moet je een transform scale 1.1 o.d. op de afbeelding plaatsen */
}

.single-project .headerImgContainer{
    grid-area: 1 / 1 / 2 / 7;

    width: 100%;
    height: 90%;
    min-width: 100vw;
    min-height: 90vh;
    max-height: 100vh;

    overflow: hidden;
}

#sphicIMG{
    transform: scale(1.1);
    filter: blur(0px);
    /* 10px is max*/
}
.single-project .headerImgContainer img {
    position: fixed;
    
    object-fit: cover;
    height: 100%;
    width: 100%;

}

.single-project .project-info{
    grid-column-start: 3;
    grid-column-end: 4;

    justify-self: center;
    max-width: 1440px;

    padding-bottom: 2em;
    /* margin-bottom: 70px; */

    background: var(--textureBG); 
}

.single-project .project-info h1 {
    margin-top: 30px;
}

.single-project .project-info p{
    margin-top: 2em;
    line-height: 1.55em;
    /* text-align: justify; */
}

.single-project .project-info h3 + p,
.single-project .project-info hr + p {
    margin-top: 0.2em;
}

.single-project .project-info .floatL {
    margin: 2em 2em 2em 0;
    max-width: 50%;
}

.single-project .project-info .floatR {
    margin: 2em 0 2em 2em;
    max-width: 50%;
}

.single-project .project-info .fullWidth{
    margin: 2em 0;
}

.single-project .project-info h3 {
    margin-top: 1em;
    margin-bottom: 0.5em;
}

.single-project .project-info .header {
    padding: 10px 10px 0 10px;
}

.single-project .project-info h1 {
    font-family: 'Proxima Nova Cond', sans-serif;
    font-size: 40px;
    font-weight: 700;
    line-height: 40px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.single-project .project-info h3 {
    font-family: 'Proxima Nova Cond', sans-serif;
    font-weight: 600;
    line-height: 28px;
}

.single-project .project-info h6 {
    display: inline-block;

    font-size: 10px;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.single-project .project-info h6:nth-of-type(3){
    float: right;
}

.single-project .project-info section {
    padding: 0 35px;
}

.single-project .project-info section .readInfo span {
    display: block;
    margin: 0.75em 0 0.25em 0;
    
    font-size: 0.7em;
}

.single-project .project-info section .readInfo p {
    float: right;

    font-family: 'Proxima Nova Cond', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 17px;
    letter-spacing: 2px;
    text-transform: uppercase;

}

.single-project .project-info .intro{
    font-size: var(--intro-fontSize);
    font-weight: 300;
    
}

.single-project .project-info .intro::first-letter{
    font-family: 'Proxima Nova Cond', sans-serif;
    font-weight: 800;
    font-size: calc(var(--intro-fontSize) * 2.22);
    line-height: inherit;

    margin-right: 0.08em;

}

.subText{
    font-size: 12px;
    font-weight: 300;
    display: inline-block;
    text-align: center;
    width: 100%;
}

.single-project .signature{
    display: flex;
    flex-direction: column;
    align-items: center;

    margin-top: 3em;

    min-width: 100%;
}

.single-project .signature img{
    max-width: 45px;
}

.single-project .signature p{
    font-family: 'Proxima Nova Cond', sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 17px;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    margin-top: 0.5em;
}

.single-project .contactFormulierContainer {
    grid-area: 3 / 3 / 4 / 8;
}



/* About.php */
.about.grid {
    display: grid;
    grid-template-columns: var(--innerGrid);

    min-height: 100vh;

    background: var(--textureBG);

}
article.about {
    grid-column-start: 3;
    grid-column-end: 4;

    width: 100%;
    max-width: 100%;

    padding-top: var(--articlePaddingTop);
    padding-bottom: 120px;
}

.aboutIntro {
    /* border-top: 1px solid var(--color-dark); */

    width: clamp(500px, calc(50% - 18px), 750px);
    display: inline-block;
}

.aboutIntro .kvkBtwInfo{
    float: right;
    margin-top: 10px;
    margin-left: 35px;

    color: #707070;
    font-size: 10px;
}

.aboutIntro h5 {
    display: inline-block;
    margin-top: 10px;

    color: var(--color-dark);
}

.aboutIntro p {
    margin-top: 1.5em;
    
    font-weight: 500;
    color: var(--color-dark);
}
.aboutIntro p:first-of-type {
    margin-top: 70px;

    font-size: var(--intro-fontSize);
    font-weight: 600;
}

.about-Betekenis{
    width: clamp(250px, calc(60% - 18px), 550px);

    font-family: 'Proxima Nova Cond', sans-serif;
    color: #aaa;
}
.about-Betekenis h3{
    font-weight: 400;
    margin-top: 120px;
}

.about-Betekenis p{
    font-size: clamp(1.25rem, 1.1893203883495145rem + 0.2588996763754045vw, 1.5rem);
    font-weight: 300;
    font-style: italic;

    margin-top: 35px;
    padding-left: 35px;
}

.about-Betekenis p::before{
    content: "~";
    position: absolute;
    left: 0;
}

.about-Image{
    max-height: calc(100% - 10px);
    margin-top: 10px;
    margin-left: 1em;

    width: clamp(300px, calc(50% - 18px), 750px);
    float: right;

    aspect-ratio: 3 / 4;

    background-image: url('');
    background-repeat: no-repeat;
    background-size: cover;
}

/* vCard*/

.vCard.grid{
    /* display: grid;
    grid-template-columns: var(--innerGrid); */

    height: 100vh;

    background: var(--color-dark);
} 

.vCardPage{
    /* display: grid; */

    /* grid-column-start: 3;
    grid-column-end: 4; */
    height: 100%;
    max-width: min(95%, 1440px);
    left: 50%;
    transform: translateX(-50%);
}

.vCardPage .vCard {
    /* align-self: center;
    justify-self: flex-end; */
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);


}
.vCardPage .vCard .info{
    box-sizing: content-box;
    /* width: clamp(270px, calc(50% - 18px), 360px); */
    width: 360px;

    /* aspect-ratio: 3 / 4; */

    background: rgba(15, 10, 10, 0.2);
    -webkit-backdrop-filter: blur(3px) brightness(50%);
    backdrop-filter: blur(3px) brightness(50%);

    border: solid 1.25px rgba(222, 223, 227, 0.2);
    border-radius: 5px;

    color: var(--color-light);

    padding: 35px;

    z-index: 1;
}
/* .vCardPage .vCard .info[data-vCard-image]::before{
    content: "";

} */
/* .vCardPage .vCard .info[data-vCard-image="stanley"]::before {
    background-image: url('');
} */

.vCardPage .vCard .info h3 {
    font-family: 'Proxima Nova Cond', sans-serif;
    font-weight: 300;

    line-height: 1.2em;
    
}
.vCardPage .vCard .info h3:first-of-type {
    text-transform: uppercase;
    font-weight: 700;
}

.vCardPage .vCard .info p {
    margin-top: 70px;

}

.vCardPage .vCard .info p + p{
    margin-top: 1em;
    font-weight: 700;

}

.vCardPage .vCard span.subTekst {
    position: absolute;
    top: 0;
    left: -80%;

    color: var(--color-light);
    letter-spacing: 0.05em;

}

.vCardPage .vCard .downloadVCF{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    
    width: 100%;
    margin-top: 35px;

    color: var(--color-light);
    text-align: center;

    font-family: 'Proxima Nova', sans-serif;
    font-size: 12px;
    font-weight: 300;

    text-decoration: underline;
    font-style: italic;
    letter-spacing: 0.05em;

}

.vCardPage .vCard .info .contact {
    margin-top: 35px;
}

.vCardPage .vCard .info .contact span {
    display: block;
    font-size: var(--contact-fontSize);
}

.vCard-Image {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -80%;

    /* min-width: 100%; */
    height: 90%;

    aspect-ratio: 3 / 4;

    background-image: url('');
    background-repeat: no-repeat;
    background-size: cover;

    overflow: hidden;
}
.aP-Link{
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);

    display: flex;
    flex-direction: column;

    width: 60%;
}

.aP-Link button{
    margin-top: 70px;
    color: var(--color-light);
    text-shadow: 1px 1px var(--color-dark), -1px 1px var(--color-dark), -1px -1px var(--color-dark), 1px -1px var(--color-dark);
    
}

/* --------------------------------------------------------------------
HOVER
---------------------------------------------------------------------*/

/* Reset en set hovers */
a:hover {
    color: var(--color-accent) !important;
    cursor: pointer !important;
}

a:active {
    color: var(--color-accent-activated);
}

/* body:not(.touch) a:hover {
    color: inherit !important;
} */

button:hover {
    color: var(--color-accent) !important;
    cursor: pointer !important;
}

/* Nav */

.projectLink:hover {
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.35);
}

.projectLink:hover > a {
    color: var(--color-accent);
}

.projectLink:hover a > .projectLijstPreviews {
    animation: op1IN 500ms ease forwards;
}


/* Home.php */

.projectBG:hover > #trailer {
    opacity: 1;
}


/* Services.php */

nav.serviceCategorieen li:hover{
    cursor: pointer;
}

nav.serviceCategorieen li:hover .serviceCategorieTitel{
    transform: rotate(-90deg);
}

nav.serviceCategorieen li:hover .serviceCategorieCTA{
    opacity: 1;
}

@media screen and (max-width: 991px){
    nav.serviceCategorieen li:hover .serviceCategorieTitel {
        transform: rotate(-180deg);
    }
    nav.serviceCategorieen li:hover .serviceCategorieCTA {
        opacity: 0;
    }
}

/* Project-Single.php */

.single-project .headerImgContainer:hover > #trailer {
    opacity: 1;
}




/* --------------------------------------------------------------------
@KEYFRAMES
---------------------------------------------------------------------*/

@keyframes menuSlideIn {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes op1IN {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes op1OUT {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes backdrop-filter-animation-in {
    from {
        -webkit-backdrop-filter: blur(3px) brightness(40%);
        backdrop-filter: blur(3px) brightness(40%);
    }

    to {
        -webkit-backdrop-filter: blur(30px) brightness(50%);
        backdrop-filter: blur(30px) brightness(50%);
    }
}

@keyframes backdrop-filter-animation-out {
    from {
        -webkit-backdrop-filter: blur(30px) brightness(50%);
        backdrop-filter: blur(30px) brightness(50%);
    }

    to {
        -webkit-backdrop-filter: blur(3px) brightness(40%);
        backdrop-filter: blur(3px) brightness(40%);
    }
}

@keyframes featuredIN {
    from {
        transform: rotateY(35deg);
        opacity: 0;
    }

    to {
        transform: rotateY(0deg);
        opacity: 1;
    }
}

@keyframes featuredOUT {
    0% {
        transform: rotateY(0deg);
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        transform: rotateY(35deg);
        opacity: 0;
    }
}

@keyframes HomeTextSlideIN {
    0% {
        transform: translateY(50%);
        opacity: 0;
    }
    80% {
        opacity: 1;
    }
    100% {
        transform: translateY(0%);
    }
}


/* @media screen and (max-width:1205px) {
    @keyframes menuSlideIn {
            0% {
                transform: translateX(100%);
            }

            0% {
                transform: translateX(85%);
            }
    
            100% {
                transform: translateX(90%);
            }
        }
} */

/* --------------------------------------------------------------------
@MediaQueries & @containerQueries
---------------------------------------------------------------------*/
/* nog opruimen!*/ 


/* Nav */

@container projectlijstInfo (max-width: 700px) {
    .projectLink a > div > h4:last-of-type {
        font-size: 12px;
    }
}

@media screen and (min-width: 1907px) {
    .single-project .contactFormulierContainer {
        grid-area: 3 / 3 / 4 / 4;
        max-width: 1440px;
        justify-self: center;
        width: 100%;
    }
}

@media screen and (max-width: 2160px) {
    .werkwijzeKaartContainer {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
    }

    .werkwijzeKaartInnerContainer::before {
        background-size: auto 285% ;
    }
    
    .werkwijzeKaartInnerContainer {
        /* flex: 0 1 calc(50% - (var(--gap-size) * 0.5)); */
    }

    .werkwijzeKaartInnerContainer:nth-of-type(1)::before {
        background-position: 15% 45%;
    }

    .werkwijzeKaartInnerContainer:nth-of-type(2)::before {
        background-position: -85% 45%;
    }

    .werkwijzeKaartInnerContainer:nth-of-type(3)::before {
        background-position: 15% -55%;
    }

    .werkwijzeKaartInnerContainer:nth-of-type(4)::before {
        background-position: -85% -55%;
    }
}

@media screen and (max-width: 1500px) {
    .about-Image{
        float: right;
        width: 20vw;
        margin-top: 100px;
        margin-left: 2em;
    }

    nav.serviceCategorieen li {
        max-height: min(40vh, 700px);
    }

    .serviceCategorieTitel{
        font-size: 2.75vw;
    }
}

@media screen and (max-width: 1250px) {
    .aboutIntro {
        width: 100%;
    }
    .aP-Link img{
        display: none;
    }
    .aP-Link button{
        margin-top: 0;
    }
    .vCardPage .vCard{
        right: unset;
        left: 50%;
        transform: translate(-10%, -50%);
    }
}

@media screen and (max-width: 1205px) {
    .services.grid .contactFormulierContainer,
    .werkwijze.grid .contactFormulierContainer {
        grid-area: 2 / 3 / 3 / 4;
    }
    .single-project .contactFormulierContainer {
        grid-area: 3 / 3 / 4 / 7;
    }
}

@media  screen and (max-width: 991px) {

    :root{
        --innerGrid: 10px 1fr 10px;
    }

    article.notFound.grid section {
        grid-area: 1 / 2 / 1 / 3;
    }

    header,
    #logoHeader{
        width: calc(100% - 70px);
    }

    .mainMenuFooterMobile{
        display: flex;
        justify-content: space-between;

        position: absolute;
        left: 50%;
        transform: translate(-50%);

        width: calc(100% - 20px);

        top: clamp(8.75rem, 7.507142857142857rem + 6.857142857142858vw, 11.75rem);
        padding: 10px max(5vw, 10px);

        background: rgba(15, 10, 10, 0.2);
        -webkit-backdrop-filter: blur(3px) brightness(50%);
        backdrop-filter: blur(3px) brightness(50%);

        border: solid 1.25px rgba(222, 223, 227, 0.2);
        border-radius: 5px;

        color: var(--color-light);

        transition: top 300ms ease;
    }

    .mainMenuFooterMobile.Scroll{
        top: 50px !important;
    }
    
    .trailerMobileContainer{
        display: flex;
        justify-content: center;
        align-items: center;
    
        position: absolute;
        top: 50vh;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .trailerMobileContainer .circle {
        position: absolute;
        transform-origin: center;

        width: 15px;
        height: 15px;

        border-radius: 50%;
        border: var(--color-accent-activated) solid 2px;
        
        opacity: 0;
        animation: scaleIn 4s infinite cubic-bezier(.36, .11, .89, .32);
    }

    @keyframes scaleIn {
        from {
            transform: scale(.8, .8);
            opacity: .35;
            border-width: 2px;
        }

        to {
            transform: scale(4, 4);
            opacity: 0;
            border-width: 10px;
        }
    }

    #trailer{
        display: none;
    }

    .menuFeaturedContainer,
    .mainMenuFooter {
        display: none;
    }
    
    .menuOnload,
    .menu {
        width: 100%;
        transition: height 1000ms cubic-bezier(0.39, -0.04, 0.1, 1.04);
    }
    .menuOnload{
        grid-area: 2 / 2 / 4 / 3;
        height: 46px;
        /* bottom: 90px; */
        /* top: 89dvh; */
        bottom: 6svh;
    }
    .asideContainer{
        padding: 0px;
        width: 126px;
        position: absolute;
        right: 10px;
        bottom: 0;
        height: initial;
    }
    .menuLink {
        position: absolute;
        bottom: 5px;
        width: 100%;
        text-align: end;
        right: max(5vw, 10px);
    }
    .LandingText {
        top: 70%;
    }
    .infoLink {
        /* bottom: 110px; */
        /* top: 91.5dvh; */
        bottom: calc(6svh + 23px);
        left: calc(max(5vw, 20px) + 10px);
        transform: translateY(50%);
        color: var(--color-light) !important;
    }
    .infoLink a{
        color: var(--color-light) !important;
    }
    .menuOnload.active {
        height: 60%;
    }
    .subMenu {
        padding: 35px max(5vw, 10px) 20px max(5vw, 10px);
    }
    .projectLijst{
        padding: 15px max(5vw, 10px) 20px calc(max(5vw, 10px) - 17px);
        max-height: calc(100vh - var(--LijstHoogte) - 90px - 70px - 25px);
    }
    .projectLijst li{
        width: calc(100% - 17px);
        padding: 10px 0;
    }
    .projectLijst p {
        max-width: calc(100% - 15px);
    }
    .projectLijstPreviews{
        display: none;
    }
    .single-project .headerImgContainer {
        height: 70%;
        min-height: 70vh;
    }
    .single-project .project-info {
        grid-column-start: 2;
        grid-column-end: 3;
    }
    .single-project .contactFormulierContainer {
        grid-area: 3 / 2 / 4 / 3;
    }
    .single-project .project-info .floatL,
    .single-project .project-info .floatR {
        float: none;
        margin: 2em 0 0 0;
        width: 100%;
        max-width: 100%;
    }
    .menuFeaturedContainer.mobile {
        display: inline-block;
        pointer-events: none;
        max-height: 40%;
    }
    .menuFeaturedContainer.mobile.active {
        pointer-events: all;
    }
    .menuFeaturedContainer{
        padding: 0 0 0 calc(max(5vw, 10px) - 17px);
        right: -17px;
        overflow-x: initial;
        max-height: 450px;
        overflow-y: auto;
        bottom: 70px;
    }
    .featured{
        flex-direction: column;
        flex-wrap: wrap;
        align-items: flex-start;
    }
    @keyframes featuredIN {
        from {
            transform: rotateX(35deg);
            opacity: 0;
        }

        to {
            transform: rotateX(0deg);
            opacity: 1;
        }
    }

    @keyframes featuredOUT {
        0% {
            transform: rotateX(0deg);
            opacity: 1;
        }

        50% {
            opacity: 0;
        }

        100% {
            transform: rotateX(35deg);
            opacity: 0;
        }
    }

    article.about {
        grid-column-start: 2;
        grid-column-end: 3;
    }

    .about-Image {
        float: unset;

        width: 100%;
        aspect-ratio: 4/3;

        margin-top: 35px;
        margin-left: 0;
    }

    .about-Betekenis {
        width: 70%;
    }
    .about-Betekenis h3 {
        margin-top: 60px;
    }

    .vCard.grid{
        overflow: hidden;
    }

    .vCard-Image{
        top: 0%;
        left: unset;
        right: unset;
        height: unset;
        width: 100%;
        height: 100%;
        transform: unset;
        aspect-ratio: unset;
        border-radius: 5px;
        /* z-index: 999; */
    }

    .vCardPage .vCard{
        top: unset;
        left: unset;
        bottom: 140px;
        transform: unset;
        width: 100%;
        height: 60%;

    }

    .vCardPage .vCard .info{
        height: 100%;
        width: 100%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding-top: 70px;
    }

    .vCard .info p{
        display: none;
    }

    .aP-Link{
        width: 100%;
        top: 70px;
        transform: unset;
    }

    .vCardPage .vCard span.subTekst{
        top: 10px;
        left: 10px;
        width: 100%;
        z-index: 99;
        text-shadow: 1px -1px 1px var(--color-dark),
            -1px -1px 10px var(--color-dark),
            -1px -1px 5px var(--color-dark),
            1px -1px 15px var(--color-dark);
    }

    .vCardPage .vCard .downloadVCF{
        margin-top: 10px;
    }

    article.services,
    article.werkwijze {
        grid-column-start: 2;
        grid-column-end: 3;
    }

    .servicesIntro p,
    .werkwijze p{
        width: 100%;
    }

    nav.serviceCategorieen li{
        max-height: min(50vh, 700px);
    }

    /* nav.serviceCategorieen li:hover span{
        transform: rotate(-180deg);
    } */

    .serviceCategorieTitel {
        font-size: 5vw;
    }

    .services.grid .contactFormulierContainer,
    .werkwijze.grid .contactFormulierContainer {
        grid-column: 2 / 3;
    }

    .serviceKaartInnerContainer div:first-of-type{
        position: relative;
        top: 5%;
        right: unset;

        margin-top: -5%;

        height: 60svh;
        aspect-ratio: unset;
        transform: translate(0,0) !important;

    }

    article.werkwijze section:last-of-type {
        margin-bottom: -50px;
    }

    .contactFormulierContainer {
        margin-top: 120px;
    }
}

@media screen and (max-width: 771px) {
    /* .contactFormulierContainer{
        background: linear-gradient(-90deg, rgba(72, 107, 150, 0.15) 0%, rgba(72, 107, 150, 0) 50%, rgba(72, 107, 150, 0.15) 100%);
    } */
    .contactFormulier {
        grid-template-columns: min-content 10px 3fr 35px min-content 10px 3fr 00px 0px;
        grid-template-rows: max-content max-content max-content max-content max-content max-content;
    }
    .contactFormulier #email {
        grid-area: 5 / 3 / 6 / 8;
    }
    .contactFormulier #telefoonnummer {
        grid-area: 6 / 3 / 7 / 8;
    }
    .contactFormulier label[for="telefoonnummer"] {
        grid-area: 6 / 1 / 6 / 2;
    }
    .contactFormulier hr:nth-of-type(4) {
        grid-area: 5 / 1 / 6 / 8;
    }
    .contactFormulier hr:nth-of-type(5) {
        grid-area: 6 / 1 / 7 / 8;
    }
}

@media screen and (max-width: 750px) {
    .werkwijzeKaartContainer{
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr;
    }

    .werkwijzeKaartInnerContainer::before {
        background-size: auto 400%;
    }

    .werkwijzeKaartInnerContainer {
        /* flex: 0 1 calc(100% - (var(--gap-size) * 0)); */
    }
    
    .werkwijzeKaartInnerContainer:nth-of-type(1)::before {
        background-position: 70% 0%;
    }

    .werkwijzeKaartInnerContainer:nth-of-type(2)::before {
        background-position: 70% 33.33%;
    }

    .werkwijzeKaartInnerContainer:nth-of-type(3)::before {
        background-position: 70% 66.66%;
    }

    .werkwijzeKaartInnerContainer:nth-of-type(4)::before {
        background-position: 70% 99.99%;
    }
}

@media screen and (max-width: 700px) {
    .single-project .project-info section {
            padding: 0 10px;
        }

    .single-project .project-info .floatL{
        margin: 2em 0;
        max-width: 100%;
        float: unset;
    }

    nav.serviceCategorieen ul{
        gap: 15px;
    }
    
    .projectLijst h4 {
        min-width: 100%;
    }

    .serviceInfo{
        padding-left: 15px;
        padding-right: 15px;
    }

    .serviceInfo ul {
        margin-left: 15px;
    }


}

@media screen and (max-width: 475px) {
    .single-project .project-info h6:nth-of-type(3) {
        float: unset;
        display: block;
        margin-top: 10px;
        color: var(--color-dark);
    }

    .about-Betekenis {
        width: 100%;
    }

    nav.serviceCategorieen li {
        flex: 1 1 140px;
    }

    .serviceCategorieTitel {
        font-size: 7vw;
    }

    .LandingText {
        left: 15px;
    }
}

@media screen and (max-height: 685px) {
    .mainMenuFooterMobile {
        top: 90px;
    }

    .aP-Link{
        top: 35px;
    }
}

@media screen and (max-height: 630px) {

    .menuOnload{
        bottom: 50px;
    }

    .menuOnload.active {
        height: 60%;
    }

    .infoLink{
        bottom: 70px;
    }
}

/* Home */


/* Services */


/* Project-single */