.menu > a:nth-of-type(2) { color: var(--webheads-color-primary); }
nav { padding-bottom: 7rem !important; }
nav.scrolled { padding-bottom: 0 !important; }
.header-single { position: relative; height: 25rem; width: 100%; align-content: center; background-repeat: no-repeat; background-size: cover; background-position: center; transition: none; }
.header-single h2 { position: relative; z-index: 999; text-align: center; font-size: 3rem; margin-top: 7rem; font-weight: bold; text-transform: uppercase; filter: var(--webheads-dropshadow);  padding-inline: var(--webheads-inline-padding); }
.sticky-sidebar { position: sticky; top: 9rem; }
.services-single { display: flex; justify-content: space-between; gap: 5rem; padding-inline: var(--webheads-inline-padding); padding-top: 3rem; padding-bottom: 6rem; }
.services-single-content { width: 70%; position: relative; overflow: hidden; }
.services-single-content > div { position: absolute; top: 0; opacity: 0; z-index: -999; transform: translateX(-100%); }
.services-single-content > div.active { opacity: 1; transform: translateX(0); position: relative; z-index: unset; transition: all .3s ease-in-out; }
.service-single h2 { font-size: 2rem; font-weight: bold; text-transform: uppercase;  }
.service-single > p { margin-block: 1rem; }
.services-single-side { min-width: 25rem; }
.services-single-side .bar { box-shadow: var(--webheads-boxshadow); background: linear-gradient(180deg, var(--webheads-color-primary), var(--webheads-color-secondary)); width: 100%; height: .3em; position: relative; border-radius: .5rem; margin-block: 2rem; }
.services-selection {  background: var(--webheads-element-background-color); box-shadow: var(--webheads-boxshadow); border-radius: .5rem; padding: 1rem; height: fit-content; }
.services-selection > a { display: flex; font-size: 1.15rem; width: 100%; padding-block: .25rem; margin-block: .25rem; transition: all .3s ease-in-out;  }
.services-selection > a:hover { color: var(--webheads-color-primary); }
.services-selection > a > svg { width: 1.15rem; height: 1.15rem; margin-block: auto; margin-right: .3rem; transform: translateX(-.4rem); opacity: 0; transition: all .3s ease-in-out; }
.services-selection > a:hover > svg { transform: translateX(0); opacity: 1; }
.services-selection > a:hover > svg path { fill: var(--webheads-color-primary) !important; }
.services-selection > a.active { font-weight: bold; color: var(--webheads-color-primary); }
.services-selection > a.active > svg { transform: translateX(0); opacity: 1; width: 1.2rem; height: 1.2rem; }
.services-selection > a.active > svg path { fill: var(--webheads-color-primary); }
.services-selection.mobile { display: none; }
.medewerker { display: none; background: var(--webheads-element-background-color); box-shadow: var(--webheads-boxshadow); border-radius: .5rem; margin-bottom: 1rem; }
.medewerker:last-child { margin-bottom: 0; }
.medewerker .foto { min-width: 7rem; max-width: 8rem; max-height: 9rem; }
.medewerker .foto img { width: 100%; height: 100%; min-width: 7rem; object-fit: cover; border-top-left-radius: .5rem; border-bottom-left-radius: .5rem; }
.medewerker .socials { padding: 1rem; }
.medewerker .socials h2 { font-weight: bold; font-size: 1.2rem; }
.medewerker .socials p { color: var(--webheads-color-primary); font-size: .9rem; font-weight: bold; }
.medewerker-contact { display: flex; gap: 1rem; margin-top: .5rem; }
.medewerker-tel svg path, .medewerker-email svg path, .medewerker-linkedin svg path { fill: white;}
.medewerker-tel:hover svg path, .medewerker-email:hover svg path, .medewerker-linkedin:hover svg path { fill: var(--webheads-color-primary); }
.medewerker-tel svg, .medewerker-email svg, .medewerker-linkedin svg { width: 1.8rem; border-radius: .3rem; } .header-microsoft img { position: absolute; top: 0; left: 0; object-fit: cover; object-position: 0 35%; width: 100%; height: 100%; }
.header-microsoft h2 { font-size: 3rem; text-align: center; font-weight: bold; text-transform: uppercase; filter: var(--webheads-dropshadow); margin-top: 7rem; padding-inline: var(--webheads-inline-padding); }
.microsoft-intro { display: flex; justify-content: space-between; gap: 3rem; overflow-x: hidden; margin-bottom: 5rem; }
.microsoft-intro h2 { font-size: 2rem; font-weight: bold; }
.microsoft-intro h4 { display: block; font-size: 1.2rem; font-weight: bold; margin-block: 1rem; font-family: 'Source Sans Pro', sans-serif; }
.microsoft-intro div { margin-block: auto; }
.microsoft-intro img { width: 48%; border-top-left-radius: 1rem; border-bottom-left-radius: 1rem; object-fit: cover; }
.content { padding-bottom: 6rem; }
.content h2 { font-weight: bold; margin-block: 30px; }
.plans { 
padding-bottom: 3rem; 
} .splide__track {
align-items: stretch !important;
}
.splide__slide.plan {
box-sizing: border-box;
background: var(--webheads-element-background-color); 
border-radius: 3rem; 
filter: var(--webheads-dropshadow); 
position: relative; display: flex !important;
flex-direction: column;
height: 100%;
} .plan .top { 
text-align: center; 
padding: 2rem; 
padding-top: 3.5rem;
height: 175px; box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
} .plan .mid { 
text-align: center; 
padding: 2rem; 
box-sizing: border-box;
border-top: 5px solid var(--webheads-background-color); 
border-bottom: 5px solid var(--webheads-background-color); 
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
} .plan .bottom { 
padding: 2rem; 
flex-grow: 1;
} .plan.highlight { 
background: white; 
filter: var(--webheads-dropshadow); 
}
.plan.highlight > span { 
color: white; 
font-weight: bold; 
white-space: nowrap; 
background: var(--webheads-color-secondary); 
padding: 3rem; 
padding-block: .5rem; 
border-radius: 3rem; 
width: fit-content; 
position: absolute; 
top: -1rem; 
left: 50%; 
transform: translateX(-50%); 
filter: var(--webheads-dropshadow); 
z-index: 2;
}
.plan * { color: white; }
.plan.highlight * { color: black; }
.plan .mid .quotation { 
display: inline-block; 
background: var(--webheads-background-color); 
color: white; 
font-weight: bold; 
padding-block: 1rem; 
padding-inline: 3rem; 
border-radius: 3rem; 
width: fit-content; 
filter: var(--webheads-dropshadow); 
cursor: pointer; 
}
.plan.highlight .mid .quotation { 
background: var(--webheads-color-secondary); 
padding-inline: 1.5rem;
color: white !important;
}
.plan.highlight .mid .quotation p { color: white !important; }
.plan .top h2 { font-size: 2rem; font-weight: bold; line-height: 1; margin-bottom: 1rem; }
.plan .top p { font-weight: bold; }
.plan .mid h2 { font-weight: bold; }
.plan .mid p { font-weight: bold; }
.plan .bottom * { line-height: 2; }
.plan .bottom p:first-child, .plan .bottom p:first-child strong { font-size: 1.15rem; line-height: unset !important; margin-bottom: 1rem; font-family: 'Tektur'; text-transform: uppercase; }
.plan .bottom ul{ display:block;list-style-type: none; padding: 0; }
.splide__track { padding-block: 1rem; }
.plans .splide__arrow--prev { left: -0.75rem !important; top: 34.5% !important; }
.plans .splide__arrow--next { right: -0.75rem !important; top: 34.5% !important; }
.splide__arrow svg { fill: var(--webheads-color-secondary) !important; }
.splide__arrow { background: var(--webheads-background-color) !important; border-radius: 35% !important; }
.splide__arrow:not(:disabled) { opacity: 1 !important; }
.splide__arrow:disabled { opacity: 0 !important; }
.microsoft-outro { padding-top: 3rem; padding-bottom: 12rem; }
.microsoft-outro h2 { font-weight: bold; text-align: center; }
.microsoft-cta { padding-block: 3rem; display: flex; justify-content: center; gap: 3rem; }
.microsoft-cta p { font-weight: bold; text-align: center; }
.microsoft-cta span {
display: inline-block;
background: var(--webheads-color-secondary);
color: white;
font-weight: bold;
padding-block: 1rem;
padding-inline: 3rem;
border-radius: 3rem;
margin-top: 1.5rem;
width: fit-content;
filter: var(--webheads-dropshadow);
cursor: pointer;
margin-block: auto;
text-align: center;
}
.microsoft-advantages .advantage-item:first-child { margin-bottom: .5rem; }
.splide__pagination { bottom: -2.5em !important; }
.splide__arrow { width: 3em !important; height: 3em !important; }
.splide__arrow svg { width: 1.8em !important; height: 1.8em !important; }
@media screen and (max-width: 1315px) {  
.microsoft-cta { flex-wrap: wrap; }
.microsoft-cta p { width: 100%; }
}
@media screen and (max-width: 1222px) { 
.content p { width: 100%; }
}  
@media screen and (max-width: 1050px) {  
.services-single  { flex-wrap: wrap; }
.services-single > div { width: 100%; }
.services-selection.mobile { display: block; margin-inline: var(--webheads-inline-padding); }
.services-selection.desktop { display: none; }
.services-selection, .medewerkers { margin-inline: auto; }
.services-single { gap: 0; }
.services-selection.mobile { position: relative; top: 1rem; }
.header-single h2 { margin-top: 5rem; }
.microsoft-intro { flex-wrap: wrap; }
.microsoft-intro div, .microsoft-intro img, .content div { width: 100%; }
.microsoft-intro img { border-radius: 1rem; }
}
@media screen and (max-width: 615px) {  
.services-single-side { min-width: unset; }
.header-single-overlay h2 { top: 45%; }
.header-single h2 { font-size: 2.3rem; margin-top: 4rem; }
}
@media screen and (max-width: 475px) { 
.header-single { height: 18rem; }
.header-single h2 { font-size: 2rem; }
nav { padding-bottom: 5rem !important; }
.medewerker .foto { width: 100%; max-width: unset; max-height: unset; height: 12rem; }
.medewerker .foto img { border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-left-radius: .5rem; border-top-right-radius: .5rem; }
.plan .mid .quotation { width: 100% !important; padding-inline: 0; }
.content p, .content h2 { text-align: start; }
.plan .top { min-height: 200px;}
}