.cmplz-video.cmplz-iframe-styles{background-color:transparent}.cmplz-video.cmplz-hidden{visibility:hidden !important}.cmplz-blocked-content-notice{display:none}.cmplz-placeholder-parent{height:inherit}.cmplz-optin .cmplz-blocked-content-container .cmplz-blocked-content-notice,.cmplz-optin .cmplz-wp-video .cmplz-blocked-content-notice,.cmplz-optout .cmplz-blocked-content-container .cmplz-blocked-content-notice,.cmplz-optout .cmplz-wp-video .cmplz-blocked-content-notice{display:block}.cmplz-blocked-content-container,.cmplz-wp-video{animation-name:cmplz-fadein;animation-duration:600ms;background:#FFF;border:0;border-radius:3px;box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15);display:flex;justify-content:center;align-items:center;background-repeat:no-repeat !important;background-size:cover !important;height:inherit;position:relative}.cmplz-blocked-content-container.gmw-map-cover,.cmplz-wp-video.gmw-map-cover{max-height:100%;position:absolute}.cmplz-blocked-content-container.cmplz-video-placeholder,.cmplz-wp-video.cmplz-video-placeholder{padding-bottom:initial}.cmplz-blocked-content-container iframe,.cmplz-wp-video iframe{visibility:hidden;max-height:100%;border:0 !important}.cmplz-blocked-content-container .cmplz-custom-accept-btn,.cmplz-wp-video .cmplz-custom-accept-btn{white-space:normal;text-transform:initial;cursor:pointer;position:absolute !important;width:100%;top:50%;left:50%;transform:translate(-50%,-50%);max-width:200px;font-size:14px;padding:10px;background-color:rgba(0,0,0,0.5);color:#fff;text-align:center;z-index:98;line-height:23px}.cmplz-blocked-content-container .cmplz-custom-accept-btn:focus,.cmplz-wp-video .cmplz-custom-accept-btn:focus{border:1px dotted #cecece}.cmplz-blocked-content-container .cmplz-blocked-content-notice,.cmplz-wp-video .cmplz-blocked-content-notice{white-space:normal;text-transform:initial;position:absolute !important;width:100%;top:50%;left:50%;transform:translate(-50%,-50%);max-width:300px;font-size:14px;padding:10px;background-color:rgba(0,0,0,0.5);color:#fff;text-align:center;z-index:98;line-height:23px}.cmplz-blocked-content-container .cmplz-blocked-content-notice .cmplz-links,.cmplz-wp-video .cmplz-blocked-content-notice .cmplz-links{display:block;margin-bottom:10px}.cmplz-blocked-content-container .cmplz-blocked-content-notice .cmplz-links a,.cmplz-wp-video .cmplz-blocked-content-notice .cmplz-links a{color:#fff}.cmplz-blocked-content-container .cmplz-blocked-content-notice .cmplz-blocked-content-notice-body,.cmplz-wp-video .cmplz-blocked-content-notice .cmplz-blocked-content-notice-body{display:block}.cmplz-blocked-content-container div div{display:none}.cmplz-wp-video .cmplz-placeholder-element{width:100%;height:inherit}@keyframes cmplz-fadein{from{opacity:0}to{opacity:1}}:root {
--kleur-blauw: #00a7da;
--kleur-donker-blauw: #023c61;
--kleur-zwaar-donker-blauw: #192834;
--kleur-tekst-licht: #ffffff;
--kleur-tekst-grijs: #707070;
--kleur-tekst-donker: #0f151b;
--kleur-wit: #ffffff;
--kleur-grijs: #ebeae8;
--kleur-zwart: #0f151b;
--kleur-border-input: #31414e;
--kleur-gradient-groen-blauw: linear-gradient(135deg, rgba(67, 175, 191, 1) 0%, rgba(66, 144, 223, 1) 100%);
--kleur-gradient-trans-zwart-95: linear-gradient(rgba(15, 21, 27, 0) 0%, rgba(15, 21, 27, 0.9) 95%, rgba(15, 21, 27, 1) 100%);
--kleur-gradient-radial-blue: radial-gradient(rgba(0, 62, 100, 0.8) 0%, rgba(0, 62, 100, 0) 50%, rgba(67, 175, 191, 0) 100%);
--kleur-gradient-trans-zwart: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
--kleur-gradient-grijs-trans: linear-gradient(rgba(235, 234, 232, 1) 0%, rgba(255, 255, 255, 1) 100%);
--kleur-gradient-donkerblauw: linear-gradient(rgba(28, 35, 43, 1) 0%, rgba(15, 21, 27, 1) 35%, rgba(15, 21, 27, 1) 100%);
--primary-font: "sculpin", sans-serif;
--fs-106: 106px;
--fs-80: 80px;
--fs-60: 60px;
--fs-52: 52px;
--fs-40: 40px;
--fs-32: 32px;
--fs-26: 26px;
--fs-20: 20px;
--fs-18: 18px;
--fs-14: 14px;
--lh-106: 106px;
--lh-80: 80px;
--lh-60: 60px;
--lh-52: 52px;
--lh-44: 44px;
--lh-36: 36px;
--lh-30: 30px;
--lh-24: 24px;
--lh-18: 18px;
} .menu_mobile {
display: none;
} * {
font-family: var(--primary-font);
color: var(--kleur-tekst-donker);
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h2 {
font-size: var(--fs-60);
line-height: var(--lh-80);
font-weight: 500;
margin-bottom: 40px;
}
p {
line-height: var(--lh-24);
margin-bottom: 20px;
}
p:last-child {
margin-bottom: 0;
}
img {
width: 100%;
height: auto;
}
ul {
list-style-type: none;
}
ul li {
position: relative;
padding-left: 20px;
margin-bottom: 10px;
}
ul li::before {
content: "";
position: absolute;
top: 8px;
left: 0;
width: 4px;
height: 4px;
border-radius: 2px;
background-color: var(--kleur-blauw);
}
.fullWidthContainer {
width: 100%;
padding: 100px 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: distribute;
justify-content: space-around;
}
.normalContainer {
width: 100%;
max-width: 1440px;
}
.mediumContainer {
max-width: 1000px !important;
}
.narrowContainer {
max-width: 700px !important;
}
.kolomContainer {
display: grid;
grid-gap: 50px;
}
.kolom-1-1 {
grid-template-columns: 1fr 1fr;
}
.kolom-1-2 {
grid-template-columns: 1fr 2fr;
}
.kolom-2-3 {
grid-template-columns: 2fr 3fr;
}
.kolom-1-1-1 {
grid-template-columns: 1fr 1fr 1fr;
}
.kolom-1-3-1 {
grid-template-columns: 1fr 3fr 1fr;
}
.kolom-1-1-1-2 {
grid-template-columns: 1fr 1fr 1fr 2fr;
}
.bgBlack {
background-color: var(--kleur-zwart);
}
.button {
display: inline-block;
position: relative;
font-size: var(--fs-18);
font-weight: 500;
line-height: var(--lh-24);
padding: 17px 75px 20px 20px;
border-radius: 30px;
height: 60px !important;
max-height: 60px;
overflow: hidden;
text-decoration: none;
cursor: pointer;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.button span {
position: relative;
z-index: 3;
-webkit-transition: 0.8s;
transition: 0.8s;
}
.buttonCenter {
-ms-flex-item-align: center;
align-self: center;
}
.buttonTrans {
color: var(--kleur-tekst-licht);
border: 1px solid var(--kleur-wit);
background-color: transparent;
}
.buttonTrans span {
position: relative;
color: var(--kleur-tekst-licht);
z-index: 3;
-webkit-transition: 0.8s;
transition: 0.8s;
}
.buttonTrans::before {
content: "";
position: absolute;
top: -120px;
left: -160%;
width: 150%;
height: 450%;
background-color: var(--kleur-wit);
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
pointer-events: none;
z-index: 1;
opacity: 0;
-webkit-transition: 0.8s;
transition: 0.8s;
}
.buttonTrans:hover {
color: var(--kleur-tekst-donker);
-webkit-transition: 1s;
transition: 1s;
}
.buttonTrans:hover span {
color: var(--kleur-tekst-donker);
-webkit-transition: 0.8s;
transition: 0.8s;
}
.buttonTrans:hover::before {
left: 0;
opacity: 1;
-webkit-transition: 1s;
transition: 1s;
}
.buttonBlueGradient {
color: var(--kleur-wit);
z-index: 2;
-webkit-transition: 0.5s;
transition: 0.5s;
background: var(--kleur-gradient-groen-blauw);
}
.buttonBlueGradient span {
position: relative;
color: var(--kleur-tekst-licht);
z-index: 3;
-webkit-transition: 0.8s;
transition: 0.8s;
}
.buttonBlueGradient::before {
content: "";
position: absolute;
top: -120px;
left: -220%;
width: 180%;
height: 1000%;
background-color: var(--kleur-blauw);
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
pointer-events: none;
z-index: 1;
-webkit-transition: 0.8s;
transition: 0.8s;
}
.buttonBlueGradient:hover {
-webkit-transition: 1s;
transition: 1s;
}
.buttonBlueGradient:hover span {
-webkit-transition: 0.8s;
transition: 0.8s;
}
.buttonBlueGradient:hover::before {
left: -30%;
opacity: 1;
-webkit-transition: 1s;
transition: 1s;
}
.buttonArrowRight {
position: relative;
}
.buttonArrowRight::after {
content: "";
position: absolute;
top: 10px;
right: 10px;
width: 40px;
height: 40px;
border-radius: 25px;
background-color: var(--kleur-wit);
background-image: url(//cs-av.nl/wp-content/themes/CS-theme/img/black-arrow-right.svg);
background-size: 16px;
background-position: center;
background-repeat: no-repeat;
z-index: 3;
}
.linkUnderline {
position: relative;
font-size: var(--fs-20);
font-weight: 500;
text-decoration: none;
}
.linkUnderline::after {
content: "";
position: absolute;
bottom: -3px;
left: 0;
width: 100%;
height: 2px;
background-color: var(--kleur-blauw);
}
.nf-before-form-content {
display: none;
}
.heroFullWidth .heroContainer {
position: relative;
}
.heroFullWidth .heroContainer .heroBreadcrumbContainer {
position: absolute;
left: 0;
top: 0;
width: auto;
height: 30px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 5px 15px;
border-radius: 15px;
background-color: var(--kleur-zwaar-donker-blauw);
}
.heroFullWidth .heroContainer .heroBreadcrumbContainer .breadcrumbHomeIcon {
width: 10px;
margin-right: 15px;
}
.heroFullWidth .heroContainer .heroBreadcrumbContainer .breadcrumbArrowIcon {
width: 8px;
margin-right: 15px;
}
.heroFullWidth .heroContainer .heroBreadcrumbContainer .breadcrumbLabel {
font-size: var(--fs-14);
color: var(--kleur-tekst-licht);
margin-right: 15px;
}
.heroFullWidth .heroContainer .heroBreadcrumbContainerDark {
background-color: transparent;
}
.heroFullWidth .heroContainer .heroBreadcrumbContainerDark .breadcrumbLabel {
font-size: var(--fs-14);
color: var(--kleur-tekst-donker);
}
.opsommingBlauwVinkje {
list-style-type: none;
}
.opsommingBlauwVinkje li {
position: relative;
font-weight: 500;
line-height: var(--lh-24);
padding-left: 20px;
margin-bottom: 6px;
}
.opsommingBlauwVinkje li::before {
content: "";
position: absolute;
top: 7px;
left: 0;
width: 14px;
height: 10px;
background-image: url(//cs-av.nl/wp-content/themes/CS-theme/img/icon-check-blue.svg);
background-size: cover;
background-position: left top;
background-color: transparent;
}
.googleReviewContainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.googleReviewContainer p {
font-size: var(--fs-14);
line-height: var(--lh-18);
color: var(--kleur-tekst-licht);
margin: 0 20px 0 0;
}
.googleReviewContainer .googleLogo {
width: 70px;
margin-right: 20px;
-webkit-transform: translateY(3px);
transform: translateY(3px);
}
.googleReviewContainer .googleStars {
width: 100px;
margin-right: 20px;
}
.projectSliderFullWidth {
background-image: url(//cs-av.nl/wp-content/themes/CS-theme/img/wave-grey.svg);
background-size: 100%;
background-position: top center;
background-repeat: no-repeat;
overflow: hidden;
}
.projectSliderFullWidth .projectSliderContainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.projectSliderFullWidth .projectSliderContainer .projectSliderControlsContainer {
margin-bottom: 50px;
}
.projectSliderFullWidth .projectSliderContainer .projectSliderControlsContainer .projectSliderControl {
width: 60px;
height: 60px;
border-radius: 30px;
background-color: var(--kleur-wit);
border: none;
background-image: url(//cs-av.nl/wp-content/themes/CS-theme/img/black-arrow-right.svg);
background-position: center center;
background-size: 16px;
background-repeat: no-repeat;
cursor: pointer;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.projectSliderFullWidth .projectSliderContainer .projectSliderControlsContainer .projectSliderControl:hover {
background-color: var(--kleur-blauw);
-webkit-transition: 0.3s;
transition: 0.3s;
}
.projectSliderFullWidth .projectSliderContainer .projectSliderControlsContainer .projectSliderControlPrev {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
margin-right: 20px;
}
.projectSliderFullWidth .projectSliderContainer .projectSliderItemsContainer {
height: 600px;
}
.projectSliderFullWidth .projectSliderContainer .projectSliderItemsContainer .owl-stage {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 600px;
}
.projectSliderFullWidth .projectSliderContainer .projectSliderItemsContainer .owl-stage .owl-item {
height: 450px;
}
.projectSliderFullWidth .projectSliderContainer .projectSliderItemsContainer .owl-stage .owl-item:nth-child(4n-1) {
-webkit-transform: translateY(40px);
transform: translateY(40px);
}
.projectSliderFullWidth .projectSliderContainer .projectSliderItemsContainer .owl-stage .owl-item:nth-child(5n-1) {
height: 300px;
}
.projectSliderFullWidth .projectSliderContainer .projectSliderItemsContainer .owl-stage .owl-item:nth-child(3n) {
height: 400px;
}
.projectSliderFullWidth .projectSliderContainer .projectSliderItemsContainer .owl-stage .owl-item:nth-child(4n) {
height: 550px;
}
.projectSliderFullWidth .projectSliderContainer .projectSliderItemsContainer .owl-stage a {
display: block;
text-decoration: none;
height: 100%;
}
.projectSliderFullWidth .projectSliderContainer .projectSliderItemsContainer .owl-stage .projectSliderItem {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-item-align: center;
align-self: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
padding: 20px;
height: 100%;
border-radius: 15px;
overflow: hidden;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.projectSliderFullWidth .projectSliderContainer .projectSliderItemsContainer .owl-stage .projectSliderItem .projectSliderItemOverlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: var(--kleur-gradient-trans-zwart);
opacity: 0.5;
z-index: 0;
}
.projectSliderFullWidth .projectSliderContainer .projectSliderItemsContainer .owl-stage .projectSliderItem .projectSliderCategorie {
position: absolute;
top: 20px;
left: 20px;
font-size: var(--fs-14);
background-color: var(--kleur-wit);
padding: 5px 10px;
border-radius: 17px;
}
.projectSliderFullWidth .projectSliderContainer .projectSliderItemsContainer .owl-stage .projectSliderItem h3 {
position: relative;
font-size: var(--fs-32);
font-weight: 700;
color: var(--kleur-tekst-licht);
z-index: 2;
}
.projectSliderFullWidth .projectSliderContainer .projectSliderItemsContainer .owl-stage .projectSliderItem .projectSliderLocatieLabel {
position: relative;
color: var(--kleur-tekst-licht);
font-weight: 300;
z-index: 2;
}
.projectSliderFullWidth .projectSliderContainer .projectSliderItemsContainer .owl-stage .projectSliderItem:nth-child(3) {
height: 500px;
}
.projectSliderFullWidth .projectSliderContainer .projectSliderItemsContainer .owl-nav,
.projectSliderFullWidth .projectSliderContainer .projectSliderItemsContainer .owl-dots {
display: none;
}
.testimonialFullWidth {
padding: 200px 0;
}
.testimonialContainer .kolom:nth-child(1) {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.testimonialContainer .kolom:nth-child(1) .testimonialSlider {
position: relative;
height: 80%;
}
.testimonialContainer .kolom:nth-child(1) .testimonialSlider .testimonialSlide {
position: absolute;
top: 0;
left: -20px;
width: 80%;
height: auto;
opacity: 0;
-webkit-transition: 1s;
transition: 1s;
}
.testimonialContainer .kolom:nth-child(1) .testimonialSlider .testimonialSlide .testimonialQuote {
font-size: var(--fs-32);
line-height: var(--lh-52);
margin-bottom: 40px;
}
.testimonialContainer .kolom:nth-child(1) .testimonialSlider .testimonialSlide .testimonialPersoon {
font-size: var(--fs-20);
font-weight: 700;
margin-bottom: 10px;
}
.testimonialContainer .kolom:nth-child(1) .testimonialSlider .testimonialSlide .testimonialInfo {
display: inline;
font-size: var(--fs-18);
color: var(--kleur-tekst-grijs);
}
.testimonialContainer .kolom:nth-child(1) .testimonialSlider .testimonialSlideActive {
opacity: 1;
left: 0;
-webkit-transition: 1s;
transition: 1s;
}
.testimonialContainer .kolom:nth-child(1) .testimonialSliderControlsContainer .testimonialSliderControl {
width: 60px;
height: 60px;
border-radius: 30px;
background-color: var(--kleur-wit);
border: 1px solid var(--kleur-zwart);
background-image: url(//cs-av.nl/wp-content/themes/CS-theme/img/black-arrow-right.svg);
background-position: center center;
background-size: 16px;
background-repeat: no-repeat;
cursor: pointer;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.testimonialContainer .kolom:nth-child(1) .testimonialSliderControlsContainer .testimonialSliderControl:hover {
background-color: var(--kleur-grijs);
-webkit-transition: 0.3s;
transition: 0.3s;
}
.testimonialContainer .kolom:nth-child(1) .testimonialSliderControlsContainer .testimonialSliderControlPrev {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
margin-right: 20px;
}
.testimonialContainer .kolom:nth-child(2) {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.testimonialContainer .kolom:nth-child(2) .testimonialImage {
border-radius: 30px;
}
.blueRadialGradient {
width: 600px;
height: 600px;
background: var(--kleur-gradient-radial-blue);
}
.scrollDownButton {
position: relative;
background-color: transparent !important;
border: none;
cursor: pointer;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: distribute;
justify-content: space-around;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
z-index: 3;
}
.scrollDownButton .scrollLineImg {
position: relative;
width: 43px;
margin-bottom: 15px;
z-index: 3;
}
.scrollDownButton .scrollArrowImg {
position: relative;
width: 21px;
z-index: 3;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.scrollDownButton .scrollArrowImg:hover {
-webkit-transform: translateY(5px);
transform: translateY(5px);
-webkit-transition: 0.3s;
transition: 0.3s;
}
.logged-in .headerFullWidth {
top: 32px;
}
.headerFullWidth {
position: fixed;
height: 100px;
top: 0;
left: 0;
padding: 20px 0;
z-index: 999;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.headerFullWidth .headerContainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.headerFullWidth .headerContainer .headerNavContainer {
backdrop-filter: blur(20px);
-webkit-filter: brightness(1.1);
filter: brightness(1.1);
border-radius: 10px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
overflow: hidden;
}
.headerFullWidth .headerContainer .headerNavContainer .menu {
list-style-type: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
padding: 10px;
}
.headerFullWidth .headerContainer .headerNavContainer .menu li {
padding-left: 0;
margin: 0 !important;
}
.headerFullWidth .headerContainer .headerNavContainer .menu li::before {
display: none;
}
.headerFullWidth .headerContainer .headerNavContainer .menu li a {
font-size: var(--fs-18);
color: var(--kleur-tekst-licht);
font-weight: 500;
padding: 10px 20px;
text-decoration: none;
}
.headerFullWidth .headerContainer .headerNavContainer .menu .current-menu-item a {
background-color: rgba(255, 255, 255, 0.3);
border-radius: 10px;
}
.headerFullWidth .headerContainer .headerNavContainerDark .menu li a {
color: var(--kleur-tekst-donker) !important;
}
.headerFullWidth .headerContainer .headerServiceContainer {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.headerFullWidth .headerContainer .headerServiceContainer .serviceMenuButton {
position: relative;
background: var(--kleur-gradient-groen-blauw);
border-radius: 10px;
width: 60px;
height: 60px;
border: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-right: 10px;
-ms-flex-pack: distribute;
justify-content: space-around;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
cursor: pointer;
}
.headerFullWidth .headerContainer .headerServiceContainer .serviceMenuButton .serviceButtonBarContainer {
position: relative;
width: 20px;
height: 10px;
}
.headerFullWidth .headerContainer .headerServiceContainer .serviceMenuButton .serviceButtonBarContainer .serviceButtonBar {
position: absolute;
right: 0;
width: 20px;
height: 1px;
background-color: var(--kleur-wit);
-webkit-transition: 0.3s;
transition: 0.3s;
}
.headerFullWidth .headerContainer .headerServiceContainer .serviceMenuButton .serviceButtonBarContainer .serviceButtonBar1 {
top: 0;
}
.headerFullWidth .headerContainer .headerServiceContainer .serviceMenuButton .serviceButtonBarContainer .serviceButtonBar2 {
top: 4px;
}
.headerFullWidth .headerContainer .headerServiceContainer .serviceMenuButton .serviceButtonBarContainer .serviceButtonBar3 {
top: 8px;
}
.headerFullWidth .headerContainer .headerServiceContainer .serviceMenuButton:hover > .serviceButtonBarContainer .serviceButtonBar3 {
width: 16px;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.headerFullWidth .headerContainer .headerServiceContainer .headerNavSubContainer {
position: absolute;
top: 60px;
left: 0;
width: 100%;
padding: 20px;
border-radius: 10px;
background-color: var(--kleur-wit);
pointer-events: none;
opacity: 0;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.headerFullWidth .headerContainer .headerServiceContainer .headerNavSubContainer ul li {
position: relative;
font-weight: 500;
line-height: 18px;
padding-left: 20px;
margin-bottom: 10px;
}
.headerFullWidth .headerContainer .headerServiceContainer .headerNavSubContainer ul li::before {
content: "";
position: absolute;
top: 3px;
left: 0;
width: 8px;
height: 10px;
background-image: url(//cs-av.nl/wp-content/themes/CS-theme/img/icon-arrow-breadcrumb-dark.svg);
background-size: cover;
background-position: center;
background-color: transparent;
}
.headerFullWidth .headerContainer .headerServiceContainer .headerNavSubContainer ul li:last-child {
margin-bottom: 0;
}
.headerFullWidth .headerContainer .headerServiceContainer .headerNavSubContainer ul li a {
text-decoration: none;
}
.headerFullWidth .headerContainer .headerServiceContainer .headerNavSubOpen {
top: 70px;
pointer-events: auto;
opacity: 1;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.headerFullWidth .headerContainer .headerServiceContainer .headerServiceButton {
height: 60px;
padding: 20px 40px;
backdrop-filter: blur(20px);
-webkit-filter: brightness(1.1);
filter: brightness(1.1);
border-radius: 10px;
font-size: var(--fs-18);
color: var(--kleur-tekst-licht);
font-weight: 500;
text-decoration: none;
}
.headerFullWidth .headerContainer .headerServiceContainerDark .headerServiceButton {
color: var(--kleur-tekst-donker) !important;
}
.headerFullWidthClosed {
top: -100px !important;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.homeHeroFullWidth {
position: relative;
min-height: 100vh;
min-height: 100svh;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
overflow-x: clip;
padding: 50px 0;
}
.homeHeroFullWidth .homeHeroOverlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--kleur-gradient-trans-zwart-95);
z-index: 3;
}
.homeHeroFullWidth .homeHeroVideo {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
max-height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.homeHeroFullWidth .homeHeroContentContainer {
position: relative;
z-index: 5;
}
.homeHeroFullWidth .homeHeroContentContainer .homeHeroContentContainerTop {
margin-bottom: 150px;
}
.homeHeroFullWidth .homeHeroContentContainer .homeHeroContentContainerTop h1 {
font-size: var(--fs-106);
line-height: var(--lh-106);
font-weight: 400;
color: var(--kleur-tekst-licht);
}
.homeHeroFullWidth .homeHeroContentContainer .homeHeroContentContainerBottom {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.homeHeroFullWidth .homeHeroContentContainer .homeHeroContentContainerBottom .homeHeroScrollDownContainer {
position: relative;
background-color: transparent;
border: none;
cursor: pointer;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: distribute;
justify-content: space-around;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
z-index: 3;
}
.homeHeroFullWidth .homeHeroContentContainer .homeHeroContentContainerBottom .homeHeroScrollDownContainer .scrollLineImg {
width: 43px;
margin-bottom: 15px;
}
.homeHeroFullWidth .homeHeroContentContainer .homeHeroContentContainerBottom .homeHeroScrollDownContainer .scrollArrowImg {
width: 21px;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.homeHeroFullWidth .homeHeroContentContainer .homeHeroContentContainerBottom .homeHeroScrollDownContainer .scrollArrowImg:hover {
-webkit-transform: translateY(5px);
transform: translateY(5px);
-webkit-transition: 0.3s;
transition: 0.3s;
}
.homeHeroFullWidth .homeHeroContentContainer .homeHeroContentContainerBottom .homeHeroGradient {
position: absolute;
right: -280px;
bottom: -280px;
z-index: 2;
}
.homeOplossingenFullWidth {
position: relative;
overflow: hidden;
padding-bottom: 150px;
}
.homeOplossingenFullWidth .kolom {
position: relative;
z-index: 1;
}
.homeOplossingenFullWidth .kolom1 .homeOplossingFoto1 {
position: absolute;
top: 30%;
left: 40px;
width: 200px;
height: auto;
border-radius: 30px;
}
.homeOplossingenFullWidth .kolom1 .homeOplossingFoto2 {
position: absolute;
top: 55%;
left: 140px;
width: 240px;
height: auto;
border-radius: 30px;
}
.homeOplossingenFullWidth .kolom2 {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.homeOplossingenFullWidth .kolom2 p {
color: var(--kleur-tekst-licht);
text-align: center;
margin-bottom: 40px;
}
.homeOplossingenFullWidth .kolom2 .homeOplossingenContainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin-bottom: 40px;
}
.homeOplossingenFullWidth .kolom2 .homeOplossingenContainer p {
-ms-flex-item-align: center;
align-self: center;
padding-bottom: 20px;
border-bottom: 1px solid var(--kleur-donker-blauw);
margin-bottom: 20px;
}
.homeOplossingenFullWidth .kolom2 .homeOplossingenContainer a {
font-size: var(--fs-52);
line-height: var(--lh-60);
color: var(--kleur-tekst-licht);
font-weight: 500;
text-decoration: none;
text-align: center;
}
.homeOplossingenFullWidth .kolom2 .homeOplossingenContainer a:hover {
text-decoration: underline;
}
.homeOplossingenFullWidth .kolom2 .homeOplossingGradient {
position: absolute;
width: 1200px;
height: 600px;
bottom: -300px;
left: calc(50% - 600px);
z-index: -2;
}
.homeOplossingenFullWidth .kolom3 {
z-index: 5;
}
.homeOplossingenFullWidth .kolom3 .homeOplossingFoto3 {
position: absolute;
top: 0;
right: 140px;
width: 180px;
height: auto;
border-radius: 30px;
}
.homeOplossingenFullWidth .kolom3 .homeOplossingFoto4 {
position: absolute;
top: 25%;
right: -40px;
width: 240px;
height: auto;
border-radius: 30px;
}
.homeOplossingenFullWidth .kolom3 .homeOplossingFoto5 {
position: absolute;
bottom: -150px;
right: 100px;
width: 400px;
height: auto;
z-index: 10;
}
.homeOplossingenFullWidth::after {
content: "";
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 150px;
background-color: transparent;
background-image: url(//cs-av.nl/wp-content/themes/CS-theme/img/seperator-white-circle.svg);
background-size: 250%;
background-position: top center;
background-repeat: no-repeat;
z-index: 4;
}
.klantenFullWidth {
position: relative;
overflow: hidden;
z-index: 5;
}
.klantenFullWidth .klantenContainer h3 {
font-size: var(--fs-18);
font-weight: 500;
text-align: center;
margin-bottom: 50px;
}
.klantenFullWidth .klantenContainer .klantenItemsContainer .owl-stage {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.klantenFullWidth .klantenContainer .klantenItemsContainer .owl-stage .owl-item {
opacity: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.klantenFullWidth .klantenContainer .klantenItemsContainer .owl-stage .owl-item.active {
opacity: 1;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.klantenFullWidth .klantenContainer .klantenItemsContainer .owl-stage .klantItem {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: distribute;
justify-content: space-around;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border-radius: 30px;
border: 1px solid var(--kleur-grijs);
padding: 20px;
height: 120px;
margin: 0 20px;
}
.klantenFullWidth .klantenContainer .klantenItemsContainer .owl-stage .klantItem:first-child {
margin-left: 0;
}
.klantenFullWidth .klantenContainer .klantenItemsContainer .owl-stage .klantItem:last-child {
margin-right: 0;
}
.klantenFullWidth .klantenContainer .klantenItemsContainer .owl-stage .klantItem img {
max-width: 100%;
width: auto;
max-height: 100%;
height: auto;
}
.klantenFullWidth .klantenContainer .klantenItemsContainer .owl-dots,
.klantenFullWidth .klantenContainer .klantenItemsContainer .owl-nav {
display: none;
}
.situatieOplossingFullWidth .situatieOplossingContainer h2 {
font-size: var(--fs-60);
line-height: var(--lh-80);
font-weight: 500;
margin-bottom: 40px;
}
.situatieOplossingFullWidth .situatieOplossingContainer p {
color: var(--kleur-tekst-grijs);
margin-bottom: 20px;
}
.situatieOplossingFullWidth .situatieOplossingContainer ul {
list-style-type: none;
margin-bottom: 50px;
}
.situatieOplossingFullWidth .situatieOplossingContainer ul li {
position: relative;
font-weight: 500;
line-height: var(--lh-24);
padding-left: 20px;
margin-bottom: 6px;
}
.situatieOplossingFullWidth .situatieOplossingContainer ul li::before {
content: "";
position: absolute;
top: 7px;
left: 0;
width: 14px;
height: 10px;
background-image: url(//cs-av.nl/wp-content/themes/CS-theme/img/icon-check-blue.svg);
background-size: cover;
background-position: left top;
background-color: transparent;
}
.oplossingVoorFullWidth p {
font-size: var(--fs-20);
font-weight: 300;
margin-bottom: 40px;
}
.oplossingVoorFullWidth .oplossingVoorContainerCenter {
grid-gap: 0;
margin-bottom: 40px;
}
.oplossingVoorFullWidth .oplossingVoorContainerCenter p {
font-size: var(--fs-40);
line-height: var(--lh-60);
padding-bottom: 5px;
border-bottom: 2px solid var(--kleur-grijs);
text-decoration: none;
margin-bottom: 20px;
}
.fullScreenQuoteFullWidth {
position: relative;
padding: 300px 0;
background-size: cover;
background-position: top center;
background-repeat: no-repeat;
margin-bottom: 100px;
}
.fullScreenQuoteFullWidth::before {
content: "";
position: absolute;
width: 100%;
height: 150px;
top: -1px;
left: 0;
z-index: 5;
background-image: url(//cs-av.nl/wp-content/themes/CS-theme/img/seperator-white-circle-invert.svg);
background-position: top center;
background-size: 250%;
background-repeat: no-repeat;
}
.fullScreenQuoteFullWidth .quoteOverlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.6);
z-index: 0;
}
.fullScreenQuoteFullWidth .fullScreenQuoteContainer {
position: relative;
z-index: 3;
}
.fullScreenQuoteFullWidth .fullScreenQuoteContainer h2 {
font-size: var(--fs-60);
line-height: var(--lh-80);
color: var(--kleur-tekst-licht);
font-weight: 500;
margin-bottom: 40px;
}
.fullScreenQuoteFullWidth .fullScreenQuoteContainer p {
color: var(--kleur-tekst-licht);
}
.heroOplossingenFullWidth {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-color: var(--kleur-zwart);
padding: 100px 0 200px 0;
overflow: hidden;
}
.heroOplossingenFullWidth .blueRadialGradient {
position: absolute;
}
.heroOplossingenFullWidth .heroOplossingenGradientLeft {
width: 1500px;
height: 1500px;
top: -500px;
left: -500px;
pointer-events: none;
z-index: 0;
}
.heroOplossingenFullWidth .heroOplossingenGradientRight {
width: 1000px;
height: 1000px;
top: 300px;
right: -300px;
pointer-events: none;
z-index: 0;
}
.heroOplossingenFullWidth .heroOplossingenGradientBottom {
top: 900px;
pointer-events: none;
z-index: 0;
}
.heroOplossingenFullWidth .heroContainer {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
z-index: 2;
}
.heroOplossingenFullWidth .heroContainer .heroOplossingenContent {
margin: 200px 0 100px 0;
}
.heroOplossingenFullWidth .heroContainer .heroOplossingenContent h1 {
color: var(--kleur-tekst-licht);
font-size: var(--fs-80);
line-height: var(--lh-80);
font-weight: 400;
text-align: center;
margin-bottom: 40px;
}
.heroOplossingenFullWidth .heroContainer .heroOplossingenContent p {
font-size: var(--fs-20);
line-height: var(--lh-36);
font-weight: 300;
color: var(--kleur-tekst-licht);
text-align: center;
max-width: 950px;
margin: 0 auto;
border-bottom: 0;
}
.heroOplossingenFullWidth .heroContainer .heroOplossingenButtonContainer {
position: relative;
width: 450px;
height: 80px;
padding: 10px 20px;
border-radius: 40px;
border: 1px solid var(--kleur-wit);
margin-bottom: 50px;
}
.heroOplossingenFullWidth .heroContainer .heroOplossingenButtonContainer .buttonOplossingHero {
position: absolute;
top: 10px;
height: 60px;
width: calc(50% - 10px);
border-radius: 30px;
padding-left: 20px;
border: 0;
background-color: transparent;
font-size: var(--fs-20);
color: var(--kleur-tekst-licht);
cursor: pointer;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.heroOplossingenFullWidth .heroContainer .heroOplossingenButtonContainer .buttonOplossingHero::before {
content: "";
position: absolute;
top: 15px;
left: 50px;
width: 30px;
height: 30px;
background-size: 28px;
background-repeat: no-repeat;
background-position: left center;
}
.heroOplossingenFullWidth .heroContainer .heroOplossingenButtonContainer .buttonOplossingHeroGeluid {
left: 10px;
}
.heroOplossingenFullWidth .heroContainer .heroOplossingenButtonContainer .buttonOplossingHeroGeluid::before {
background-image: url(//cs-av.nl/wp-content/themes/CS-theme/img/icon-sound-white.svg);
-webkit-transition: 0.3s;
transition: 0.3s;
}
.heroOplossingenFullWidth .heroContainer .heroOplossingenButtonContainer .buttonOplossingHeroBeeld {
right: 10px;
}
.heroOplossingenFullWidth .heroContainer .heroOplossingenButtonContainer .buttonOplossingHeroBeeld::before {
background-image: url(//cs-av.nl/wp-content/themes/CS-theme/img/icon-image-white.svg);
-webkit-transition: 0.3s;
transition: 0.3s;
}
.heroOplossingenFullWidth .heroContainer .heroOplossingenButtonContainer .buttonOplossingHeroActief {
color: var(--kleur-tekst-donker);
-webkit-transition: 0.3s;
transition: 0.3s;
}
.heroOplossingenFullWidth .heroContainer .heroOplossingenButtonContainer .buttonOplossingHeroActief.buttonOplossingHeroGeluid::before {
background-image: url(//cs-av.nl/wp-content/themes/CS-theme/img/icon-sound-black.svg);
-webkit-transition: 0.3s;
transition: 0.3s;
}
.heroOplossingenFullWidth .heroContainer .heroOplossingenButtonContainer .buttonOplossingHeroActief.buttonOplossingHeroBeeld::before {
background-image: url(//cs-av.nl/wp-content/themes/CS-theme/img/icon-image-black.svg);
-webkit-transition: 0.3s;
transition: 0.3s;
}
.heroOplossingenFullWidth .heroContainer .heroOplossingenButtonContainerGeluid::before {
content: "";
position: absolute;
left: 10px;
top: 9px;
height: 60px;
width: calc(50% - 30px);
border-radius: 30px;
padding-left: 20px;
border: 0;
background-color: var(--kleur-wit);
-webkit-transition: 0.3s;
transition: 0.3s;
}
.heroOplossingenFullWidth .heroContainer .heroOplossingenButtonContainerBeeld::before {
content: "";
position: absolute;
left: 50%;
top: 9px;
height: 60px;
width: calc(50% - 30px);
border-radius: 30px;
padding-left: 20px;
border: 0;
background-color: var(--kleur-wit);
-webkit-transition: 0.3s;
transition: 0.3s;
}
.heroOplossingenFullWidth::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 150px;
background-image: url(//cs-av.nl/wp-content/themes/CS-theme/img/seperator-white-circle.svg);
background-position: top center;
background-size: 250%;
background-repeat: no-repeat;
z-index: 1;
}
.heroOplossingenFullWidth .oplossingDetailContainer {
min-height: 600px;
position: relative;
z-index: 5;
}
.heroOplossingenFullWidth .oplossingDetailContainer .oplossingDetailGeluidContainer {
position: absolute;
top: 0;
left: 0;
opacity: 0;
pointer-events: none;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.heroOplossingenFullWidth .oplossingDetailContainer .oplossingDetailGeluidContainer .oplossingDetailTransparant {
padding-top: 20px;
-webkit-transform: translateX(-40px);
transform: translateX(-40px);
opacity: 0;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.heroOplossingenFullWidth .oplossingDetailContainer .oplossingDetailGeluidContainer .oplossingDetailGeluidTextContainer {
-webkit-transform: translateX(40px);
transform: translateX(40px);
opacity: 0;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.heroOplossingenFullWidth .oplossingDetailContainer .oplossingDetailBeeldContainer {
position: absolute;
top: 0;
left: 0;
opacity: 0;
pointer-events: none;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.heroOplossingenFullWidth .oplossingDetailContainer .oplossingDetailBeeldContainer .oplossingDetailTransparant {
padding-top: 20px;
-webkit-transform: translateX(-40px);
transform: translateX(-40px);
opacity: 0;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.heroOplossingenFullWidth .oplossingDetailContainer .oplossingDetailBeeldContainer .oplossingDetailBeeldTextContainer {
-webkit-transform: translateX(40px);
transform: translateX(40px);
opacity: 0;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.heroOplossingenFullWidth .oplossingDetailContainer .oplossingDetailContainerActief {
opacity: 1;
pointer-events: auto;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.heroOplossingenFullWidth .oplossingDetailContainer .oplossingDetailContainerActief .oplossingDetailTransparant {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.heroOplossingenFullWidth .oplossingDetailContainer .oplossingDetailContainerActief .oplossingDetailGeluidTextContainer {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.heroOplossingenFullWidth .oplossingDetailContainer .oplossingDetailContainerActief .oplossingDetailBeeldTextContainer {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.heroOplossingenFullWidth .oplossingDetailTextContainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
margin-bottom: 80px;
padding-top: 50px;
}
.heroOplossingenFullWidth p {
margin-bottom: 20px;
}
.heroOplossingenFullWidth .oplossingItemLink {
font-size: var(--fs-60);
line-height: var(--lh-80);
color: var(--kleur-tekst-licht);
font-weight: 500;
text-decoration: none;
text-align: center;
padding-bottom: 10px;
border-bottom: 1px solid var(--kleur-donker-blauw);
}
.heroOplossingenFullWidth .oplossingItemLink:hover {
text-decoration: underline;
}
.heroOplossingenFullWidth .oplossingDetailTransparant {
-webkit-transform: translateX(-100px);
transform: translateX(-100px);
}
.oplossingSituatieFullWidth h2 {
font-size: var(--fs-106);
line-height: var(--lh-106);
font-weight: 500;
text-align: center;
margin-bottom: 60px;
}
.oplossingSituatieFullWidth .situatieContainer {
margin-bottom: 100px;
}
.oplossingSituatieFullWidth .situatieContainer h3 {
font-size: var(--fs-40);
line-height: var(--lh-60);
font-weight: 500;
margin-bottom: 40px;
}
.oplossingSituatieFullWidth .situatieContainer .situatieContainerBottom {
grid-gap: 0;
}
.oplossingSituatieFullWidth .situatieContainer .situatieContainerBottom p {
font-size: var(--fs-32);
line-height: var(--lh-52);
text-decoration: none;
border-bottom: 1px solid var(--kleur-grijs);
padding-bottom: 20px;
margin-bottom: 20px;
}
.oplossingBedieningFullWidth {
background: var(--kleur-gradient-grijs-trans);
}
.oplossingBedieningFullWidth .oplossingBedieningContainer h2 {
font-size: var(--fs-60);
line-height: var(--lh-80);
font-weight: 500;
text-align: center;
margin-bottom: 40px;
}
.oplossingBedieningFullWidth .oplossingBedieningContainer .bedieningOptiesContainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.oplossingBedieningFullWidth .oplossingBedieningContainer .bedieningOptiesContainer .kolom {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 20px;
}
.oplossingBedieningFullWidth .oplossingBedieningContainer .bedieningOptiesContainer .kolom .bedieningIcon {
height: 40px;
width: auto;
margin-bottom: 30px;
}
.oplossingBedieningFullWidth .oplossingBedieningContainer .bedieningOptiesContainer .kolom .bedieningLabel {
color: var(--kleur-tekst-grijs);
}
.oplossingBedieningFullWidth .oplossingBedieningContainer .bedieningOptiesContainer .kolom:first-child {
padding-right: 40px;
}
.oplossingBedieningFullWidth .oplossingBedieningContainer .bedieningOptiesContainer .kolom:nth-child(2) {
position: relative;
}
.oplossingBedieningFullWidth .oplossingBedieningContainer .bedieningOptiesContainer .kolom:nth-child(2)::before {
content: "";
position: absolute;
height: 40px;
width: 2px;
left: 0;
top: 20px;
background-color: var(--kleur-grijs);
}
.oplossingBedieningFullWidth .oplossingBedieningContainer .bedieningOptiesContainer .kolom:nth-child(2)::after {
content: "";
position: absolute;
height: 40px;
width: 2px;
right: 0;
top: 20px;
background-color: var(--kleur-grijs);
}
.oplossingBedieningFullWidth .oplossingBedieningContainer .bedieningOptiesContainer .kolom:last-child {
padding-left: 40px;
}
.fullScreenQuoteBedieningFullWidth {
position: relative;
padding: 300px 0 100px 0;
background-size: cover;
background-position: top center;
background-repeat: no-repeat;
}
.fullScreenQuoteBedieningFullWidth::before {
content: "";
position: absolute;
width: 100%;
height: 150px;
top: -1px;
left: 0;
z-index: 5;
background-image: url(//cs-av.nl/wp-content/themes/CS-theme/img/seperator-white-circle-invert.svg);
background-position: top center;
background-size: 250%;
background-repeat: no-repeat;
}
.fullScreenQuoteBedieningFullWidth .quoteOverlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.6);
z-index: 0;
}
.fullScreenQuoteBedieningFullWidth .fullScreenQuoteBedieningContainer {
position: relative;
padding-bottom: 200px;
z-index: 3;
}
.fullScreenQuoteBedieningFullWidth .fullScreenQuoteBedieningContainer h2 {
font-size: var(--fs-60);
line-height: var(--lh-80);
color: var(--kleur-tekst-licht);
font-weight: 500;
margin-bottom: 40px;
}
.fullScreenQuoteBedieningFullWidth .fullScreenQuoteBedieningContainer p {
color: var(--kleur-tekst-licht);
}
.fullScreenQuoteBedieningFullWidth .bedieningSourcesContainer {
position: absolute;
bottom: 0;
right: 0;
}
.faqItemContainer {
position: relative;
border-bottom: 2px solid var(--kleur-grijs);
margin-bottom: 20px;
}
.faqItemContainer .faqItemContainerTop {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-bottom: 40px;
padding-right: 10px;
}
.faqItemContainer .faqItemContainerTop .faqQuestion {
font-size: var(--fs-32);
font-weight: 400;
margin-bottom: 0;
padding-right: 20px;
cursor: pointer;
}
.faqItemContainer .faqItemContainerTop .faqSwitch {
position: relative;
width: 40px;
min-width: 40px;
height: 40px;
background-color: transparent;
border: none;
cursor: pointer;
}
.faqItemContainer .faqItemContainerTop .faqSwitch .faqBar1 {
position: absolute;
width: 24px;
height: 2px;
background-color: var(--kleur-zwart);
top: 18px;
left: 12px;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.faqItemContainer .faqItemContainerTop .faqSwitch .faqBar2 {
position: absolute;
width: 24px;
height: 2px;
background-color: var(--kleur-zwart);
top: 18px;
left: 12px;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transition: 0.3s;
transition: 0.3s;
}
.faqItemContainer .faqItemContainerTop .faqSwitch:hover > .faqBar {
background-color: var(--kleur-blauw);
-webkit-transition: 0.3s;
transition: 0.3s;
}
.faqItemContainer .faqItemContainerTop .faqSwitchOpen .faqBar1 {
opacity: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.faqItemContainer .faqItemContainerTop .faqSwitchOpen .faqBar2 {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
background-color: var(--kleur-zwart);
-webkit-transition: 0.3s;
transition: 0.3s;
}
.faqItemContainer .faqItemContainerBottom {
height: 0;
overflow: hidden;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.faqItemContainer .faqItemContainerBottom .faqAntwoordContainer {
padding: 0 75px 0 0;
}
.faqItemContainer .faqItemContainerBottom p {
font-size: var(--fs-18);
line-height: var(--lh-24);
}
.faqItemContainer .faqItemContainerBottom a {
font-size: var(--fs-18);
text-decoration: underline;
}
.faqItemContainer .faqItemContainerBottom ul {
padding-left: 30px;
}
.faqItemContainer .faqItemContainerBottom ul li {
font-size: var(--fs-18);
}
.faqItemContainer .faqItemContainerBottom ul li a {
font-size: var(--fs-18);
text-decoration: underline;
}
.heroOverOnsFullWidth {
position: relative;
background-color: var(--kleur-zwart);
padding-bottom: 50px;
}
.heroOverOnsFullWidth .heroContainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-top: 200px;
}
.heroOverOnsFullWidth .heroContainer h1 {
font-size: var(--fs-106);
line-height: var(--lh-106);
color: var(--kleur-tekst-licht);
font-weight: 400;
text-align: center;
margin-bottom: 40px;
}
.heroOverOnsFullWidth .heroContainer p {
position: relative;
font-size: var(--fs-20);
line-height: var(--lh-36);
font-weight: 300;
color: var(--kleur-tekst-licht);
text-align: center;
max-width: 950px;
margin-bottom: 40px;
z-index: 4;
}
.heroOverOnsFullWidth .heroContainer .heroOverOnsScrollDownContainer {
z-index: 3;
}
.heroOverOnsFullWidth::after {
content: "";
position: absolute;
bottom: -140px;
left: 0;
width: 100%;
height: 150px;
background-image: url(//cs-av.nl/wp-content/themes/CS-theme/img/seperator-black-circle-180.svg);
background-size: 250%;
background-repeat: no-repeat;
background-position: center bottom;
}
.fullScreenVideoFullWidth {
position: relative;
height: 100vh;
height: 100svh;
padding: 0;
background-color: var(--kleur-zwart);
z-index: -1;
}
.fullScreenVideoFullWidth .fullScreenVideoOverlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.2);
z-index: 9;
}
.fullScreenVideoFullWidth .fullScreenVideo {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.beeldGeluidSliderFullWidth {
background-color: var(--kleur-zwart);
min-height: 100vh;
min-height: 100svh;
overflow: hidden;
}
.beeldGeluidSliderFullWidth .beeldGeluidSliderContainer {
position: relative;
}
.beeldGeluidSliderFullWidth .beeldGeluidSliderContainer .overOnsBeeldGeluidSliderGradient {
position: absolute;
bottom: -800px;
right: -600px;
width: 2000px;
height: 2000px;
z-index: 1;
}
.beeldGeluidSliderFullWidth .beeldGeluidSlider {
position: relative;
z-index: 3;
}
.beeldGeluidSliderFullWidth .beeldGeluidSlider .owl-stage {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.beeldGeluidSliderFullWidth .beeldGeluidSliderItem {
background: linear-gradient(135deg, rgb(28, 35, 43) 0%, rgb(15, 21, 27) 35%, rgb(15, 21, 27) 100%);
display: grid;
grid-template-columns: 3fr 1fr;
grid-gap: 50px;
border-radius: 15px;
padding: 150px 100px 100px 100px;
height: 100%;
}
.beeldGeluidSliderFullWidth .beeldGeluidSliderItem .beeldGeluidSliderIcon {
width: 100px;
height: auto;
}
.beeldGeluidSliderFullWidth .beeldGeluidSliderItem h3 {
font-size: var(--fs-106);
color: var(--kleur-tekst-licht);
font-weight: 400;
margin-bottom: 40px;
}
.beeldGeluidSliderFullWidth .beeldGeluidSliderItem p {
color: var(--kleur-tekst-grijs);
font-weight: 300;
line-height: var(--lh-24);
margin-bottom: 60px;
max-width: 600px;
}
.beeldGeluidSliderFullWidth .beeldGeluidSliderItem .kolom2 {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.beeldGeluidSliderFullWidth .beeldGeluidSliderItem .beeldGeluidSliderBrandIcon {
width: 160px;
height: auto;
margin-bottom: 20px;
}
.beeldGeluidSliderFullWidth .owl-nav {
display: none;
}
.beeldGeluidSliderFullWidth .owl-dots {
opacity: 0.4;
width: 100px;
height: 30px;
margin: 20px auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.beeldGeluidSliderFullWidth .owl-dots .owl-dot {
width: 20px;
height: 20px;
border-radius: 10px;
background-color: transparent;
border: 1px solid var(--kleur-grijs);
margin: 0 5px;
cursor: pointer;
}
.beeldGeluidSliderFullWidth .owl-dots .active {
background-color: var(--kleur-grijs);
}
.contentFullWidth {
margin-bottom: 100px;
}
.contentFullWidth h2 {
font-size: var(--fs-60);
line-height: var(--lh-80);
font-weight: 500;
margin-bottom: 40px;
}
.contentFullWidth p {
color: var(--kleur-tekst-grijs);
font-weight: 300;
}
.contentFullWidth .contentImage {
border-radius: 15px;
}
.contentImageRightFullWidth {
overflow: hidden;
position: relative;
}
.contentImageRightFullWidth .contentImageRight {
position: absolute;
top: 0;
right: -20px;
width: auto;
max-width: 50%;
height: 100%;
border-radius: 15px 0 0 15px;
}
.contentImageLeftFullWidth {
overflow: hidden;
position: relative;
}
.contentImageLeftFullWidth .contentImageLeft {
position: absolute;
top: 0;
left: -20px;
width: auto;
max-width: 50%;
height: 100%;
border-radius: 0 15px 15px 0;
}
.contentTopBottomFullWidth .contentTopBottomContainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.overOnsFotoSliderFullWidth {
background: var(--kleur-gradient-grijs-trans);
overflow: hidden;
padding-bottom: 0;
}
.overOnsFotoSliderFullWidth .overOnsFotoSlider {
position: relative;
padding-top: 70px;
cursor: -webkit-grab;
cursor: grab;
}
.overOnsFotoSliderFullWidth .overOnsFotoSlider .owl-stage {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.overOnsFotoSliderFullWidth .overOnsFotoSlider .owl-stage img {
border-radius: 15px;
}
.overOnsFotoSliderFullWidth .overOnsFotoSlider .fotoSliderNumber {
font-weight: 500;
}
.overOnsFotoSliderFullWidth .overOnsFotoSlider .owl-dots {
position: absolute;
top: 0;
left: 0;
padding: 0 30px 0 20px;
width: auto;
height: 20px;
}
.overOnsFotoSliderFullWidth .overOnsFotoSlider .owl-dots::before {
content: "1";
position: absolute;
left: 0;
top: 5px;
}
.overOnsFotoSliderFullWidth .overOnsFotoSlider .owl-dots::after {
content: "10";
position: absolute;
right: 0;
top: 5px;
}
.overOnsFotoSliderFullWidth .overOnsFotoSlider .owl-dots .owl-dot {
position: relative;
height: 30px;
width: 100px;
border: 0;
cursor: pointer;
}
.overOnsFotoSliderFullWidth .overOnsFotoSlider .owl-dots .owl-dot::after {
content: "";
position: absolute;
top: 15px;
left: 0;
width: 100%;
height: 3px;
background-color: #d1cfc9;
}
.overOnsFotoSliderFullWidth .overOnsFotoSlider .owl-dots .active::after {
content: "";
position: absolute;
top: 15px;
left: 0;
width: 100%;
height: 3px;
background-color: var(--kleur-blauw);
}
.overOnsFotoSliderFullWidth .overOnsFotoSlider .owl-nav {
display: none;
}
.projectenHeroFullWidth {
height: 600px;
}
.projectenHeroFullWidth .heroContainer .projectHeroTitleContainer {
margin: 200px 0 100px;
}
.projectenHeroFullWidth .heroContainer .projectHeroTitleContainer h1 {
font-size: var(--fs-106);
line-height: var(--lh-106);
font-weight: 400;
text-align: center;
}
.projectenHeroFullWidth .heroContainer .projectHeroFilterContainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.projectenHeroFullWidth .heroContainer .projectHeroFilterContainer .projectFilterButton {
position: relative;
margin: 0 10px 20px 0;
font-weight: 500;
padding: 11px 22px 12px 22px;
border-radius: 19px;
border: 0;
background-color: var(--kleur-grijs);
overflow: hidden;
cursor: pointer;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.projectenHeroFullWidth .heroContainer .projectHeroFilterContainer .projectFilterButton span {
position: relative;
color: var(--kleur-tekst-donker);
z-index: 3;
-webkit-transition: 0.8s;
transition: 0.8s;
}
.projectenHeroFullWidth .heroContainer .projectHeroFilterContainer .projectFilterButton::before {
content: "";
position: absolute;
top: -50px;
left: -160%;
width: 150%;
height: 450%;
background-color: var(--kleur-blauw);
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
pointer-events: none;
z-index: 1;
opacity: 0;
-webkit-transition: 0.8s;
transition: 0.8s;
}
.projectenHeroFullWidth .heroContainer .projectHeroFilterContainer .projectFilterButton:hover {
color: var(--kleur-tekst-licht);
-webkit-transition: 1s;
transition: 1s;
}
.projectenHeroFullWidth .heroContainer .projectHeroFilterContainer .projectFilterButton:hover span {
color: var(--kleur-tekst-licht);
-webkit-transition: 0.8s;
transition: 0.8s;
}
.projectenHeroFullWidth .heroContainer .projectHeroFilterContainer .projectFilterButton:hover::before {
left: 0;
opacity: 1;
-webkit-transition: 1s;
transition: 1s;
}
.projectenHeroFullWidth .heroContainer .projectHeroFilterContainer .projectFilterButtonActief {
background: var(--kleur-gradient-groen-blauw);
}
.projectenHeroFullWidth .heroContainer .projectHeroFilterContainer .projectFilterButtonActief span {
color: var(--kleur-tekst-licht);
}
.projectenGridFullWidth {
padding-top: 50px;
background-image: url(//cs-av.nl/wp-content/themes/CS-theme/img/wave-grey.svg);
background-size: 100%;
background-position: center 150px;
background-repeat: no-repeat;
}
.projectenGridFullWidth .projectenGridContainer {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-auto-rows: 500px;
grid-gap: 50px;
padding-bottom: 200px;
min-height: 500px;
}
.projectenGridFullWidth .projectenGridContainer a {
display: block;
text-decoration: none;
height: 100%;
}
.projectenGridFullWidth .projectenGridContainer .projectGridItem {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-item-align: center;
align-self: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
padding: 20px;
height: 100%;
border-radius: 15px;
overflow: hidden;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
opacity: 0;
-webkit-transform: translateY(20px);
transform: translateY(20px);
-webkit-transition: 0.5s;
transition: 0.5s;
}
.projectenGridFullWidth .projectenGridContainer .projectGridItem .projectGridItemOverlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: var(--kleur-gradient-trans-zwart);
opacity: 0.5;
z-index: 0;
}
.projectenGridFullWidth .projectenGridContainer .projectGridItem .projectGridCategorieContainer {
position: absolute;
top: 20px;
left: 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.projectenGridFullWidth .projectenGridContainer .projectGridItem .projectGridCategorieContainer .projectGridCategorie {
font-size: var(--fs-14);
background-color: var(--kleur-wit);
padding: 2px 10px;
border-radius: 17px;
margin-bottom: 6px;
display: inline-block;
-ms-flex-item-align: start;
align-self: flex-start;
}
.projectenGridFullWidth .projectenGridContainer .projectGridItem h3 {
position: relative;
font-size: var(--fs-32);
font-weight: 700;
color: var(--kleur-tekst-licht);
z-index: 2;
}
.projectenGridFullWidth .projectenGridContainer .projectGridItem .projectGridLocatieLabel {
position: relative;
color: var(--kleur-tekst-licht);
font-weight: 300;
z-index: 2;
}
.projectenGridFullWidth .projectenGridContainer .projectGridItem:nth-child(3) {
height: 500px;
}
.heroStoringFullWidth {
position: relative;
-webkit-box-orient: vertical !important;
-webkit-box-direction: normal !important;
-ms-flex-direction: column !important;
flex-direction: column !important;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-color: var(--kleur-zwart);
padding-bottom: 200px;
overflow: hidden;
}
.heroStoringFullWidth .blueRadialGradient {
position: absolute;
}
.heroStoringFullWidth .heroContainer {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical !important;
-webkit-box-direction: normal !important;
-ms-flex-direction: column !important;
flex-direction: column !important;
z-index: 2;
margin-bottom: 100px;
}
.heroStoringFullWidth .heroContainer .heroStoringTitel {
margin: 200px 0 100px 0;
}
.heroStoringFullWidth .heroContainer .heroStoringTitel h1 {
color: var(--kleur-tekst-licht);
font-size: var(--fs-80);
line-height: var(--lh-80);
font-weight: 400;
margin-bottom: 40px;
}
.heroStoringFullWidth .heroContainer .heroStoringContent {
display: grid;
grid-template-columns: 2fr 3fr;
grid-gap: 100px;
}
.heroStoringFullWidth .heroContainer .heroStoringContent .heroStoringContentKolomTop {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
margin-bottom: 40px;
width: 100%;
}
.heroStoringFullWidth .heroContainer .heroStoringContent .heroStoringContentKolomTop .heroStoringButton {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: var(--fs-18);
font-weight: 500;
line-height: var(--lh-24);
color: var(--kleur-tekst-licht);
border: 1px solid var(--kleur-wit);
padding: 0 20px 0 70px;
border-radius: 30px;
height: 60px;
overflow: hidden;
text-decoration: none;
}
.heroStoringFullWidth .heroContainer .heroStoringContent .heroStoringContentKolomTop .heroStoringButton span {
position: relative;
color: var(--kleur-tekst-licht);
z-index: 2;
}
.heroStoringFullWidth .heroContainer .heroStoringContent .heroStoringContentKolomTop .heroStoringButton::before {
content: "";
position: absolute;
top: -120px;
left: -160%;
width: 150%;
height: 450%;
background-color: var(--kleur-wit);
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
pointer-events: none;
z-index: 1;
opacity: 0;
-webkit-transition: 0.8s;
transition: 0.8s;
}
.heroStoringFullWidth .heroContainer .heroStoringContent .heroStoringContentKolomTop .heroStoringButton:hover {
color: var(--kleur-tekst-donker);
-webkit-transition: 1s;
transition: 1s;
}
.heroStoringFullWidth .heroContainer .heroStoringContent .heroStoringContentKolomTop .heroStoringButton:hover span {
color: var(--kleur-tekst-donker);
-webkit-transition: 0.8s;
transition: 0.8s;
}
.heroStoringFullWidth .heroContainer .heroStoringContent .heroStoringContentKolomTop .heroStoringButton:hover::before {
left: 0;
opacity: 1;
-webkit-transition: 1s;
transition: 1s;
}
.heroStoringFullWidth .heroContainer .heroStoringContent .heroStoringContentKolomTop .heroStoringButtonBel {
margin-right: 60px;
}
.heroStoringFullWidth .heroContainer .heroStoringContent .heroStoringContentKolomTop .heroStoringButtonBel::after {
content: "";
position: absolute;
top: 7px;
left: 7px;
width: 44px;
height: 44px;
border-radius: 22px;
background-color: var(--kleur-wit);
background-image: url(//cs-av.nl/wp-content/themes/CS-theme/img/icon-phone-black.svg);
background-size: 16px;
background-position: center;
background-repeat: no-repeat;
z-index: 2;
}
.heroStoringFullWidth .heroContainer .heroStoringContent .heroStoringContentKolomTop .heroStoringButtonMail::after {
content: "";
position: absolute;
top: 7px;
left: 7px;
width: 44px;
height: 44px;
border-radius: 22px;
background-color: var(--kleur-wit);
background-image: url(//cs-av.nl/wp-content/themes/CS-theme/img/icon-mail-black.svg);
background-size: 16px;
background-position: center;
background-repeat: no-repeat;
z-index: 2;
}
.heroStoringFullWidth .heroContainer .heroStoringContent .heroStoringContentKolomBottom p {
font-size: var(--fs-32);
line-height: var(--lh-52);
font-weight: 300;
color: var(--kleur-tekst-licht);
}
.heroStoringFullWidth .narrowContainer {
position: relative;
z-index: 5;
}
.heroStoringFullWidth .narrowContainer h2 {
color: var(--kleur-tekst-licht);
font-size: var(--fs-40);
line-height: var(--lh-60);
font-weight: 500;
margin-bottom: 40px;
text-align: center;
}
.heroStoringFullWidth .narrowContainer p {
color: var(--kleur-tekst-licht);
font-weight: 300;
}
.heroStoringFullWidth .narrowContainer .storingFormContainer .nf-form-content nf-fields-wrap {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas: "sf1 sf2" "sf3 sf4" "sf5 sf5" "sf6 sf7";
grid-gap: 20px;
}
.heroStoringFullWidth .narrowContainer .storingFormContainer .nf-form-content nf-fields-wrap nf-field .nf-field-container {
margin-bottom: 0;
}
.heroStoringFullWidth .narrowContainer .storingFormContainer .nf-form-content nf-fields-wrap nf-field:nth-child(1) {
grid-area: sf1;
}
.heroStoringFullWidth .narrowContainer .storingFormContainer .nf-form-content nf-fields-wrap nf-field:nth-child(2) {
grid-area: sf2;
}
.heroStoringFullWidth .narrowContainer .storingFormContainer .nf-form-content nf-fields-wrap nf-field:nth-child(3) {
grid-area: sf3;
}
.heroStoringFullWidth .narrowContainer .storingFormContainer .nf-form-content nf-fields-wrap nf-field:nth-child(4) {
grid-area: sf4;
}
.heroStoringFullWidth .narrowContainer .storingFormContainer .nf-form-content nf-fields-wrap nf-field:nth-child(5) {
grid-area: sf5;
}
.heroStoringFullWidth .narrowContainer .storingFormContainer .nf-form-content nf-fields-wrap nf-field:nth-child(6) {
grid-area: sf6;
}
.heroStoringFullWidth .narrowContainer .storingFormContainer .nf-form-content nf-fields-wrap nf-field:nth-child(6) .nf-field-container {
margin-bottom: 0;
}
.heroStoringFullWidth .narrowContainer .storingFormContainer .nf-form-content nf-fields-wrap nf-field:nth-child(6) .nf-field-container .nf-field {
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
.heroStoringFullWidth .narrowContainer .storingFormContainer .nf-form-content nf-fields-wrap nf-field:nth-child(7) {
grid-area: sf7;
}
.heroStoringFullWidth .narrowContainer .storingFormContainer .nf-form-content nf-fields-wrap input[type=text],
.heroStoringFullWidth .narrowContainer .storingFormContainer .nf-form-content nf-fields-wrap input[type=email],
.heroStoringFullWidth .narrowContainer .storingFormContainer .nf-form-content nf-fields-wrap input[type=tel] {
background-color: var(--kleur-zwart);
color: var(--kleur-tekst-licht);
border: 1px solid var(--kleur-border-input);
padding: 20px;
border-radius: 10px;
}
.heroStoringFullWidth .narrowContainer .storingFormContainer .nf-form-content nf-fields-wrap input[type=text]::-webkit-input-placeholder, .heroStoringFullWidth .narrowContainer .storingFormContainer .nf-form-content nf-fields-wrap input[type=email]::-webkit-input-placeholder, .heroStoringFullWidth .narrowContainer .storingFormContainer .nf-form-content nf-fields-wrap input[type=tel]::-webkit-input-placeholder {
color: var(--kleur-tekst-grijs);
}
.heroStoringFullWidth .narrowContainer .storingFormContainer .nf-form-content nf-fields-wrap input[type=text]::-moz-placeholder, .heroStoringFullWidth .narrowContainer .storingFormContainer .nf-form-content nf-fields-wrap input[type=email]::-moz-placeholder, .heroStoringFullWidth .narrowContainer .storingFormContainer .nf-form-content nf-fields-wrap input[type=tel]::-moz-placeholder {
color: var(--kleur-tekst-grijs);
}
.heroStoringFullWidth .narrowContainer .storingFormContainer .nf-form-content nf-fields-wrap input[type=text]:-ms-input-placeholder, .heroStoringFullWidth .narrowContainer .storingFormContainer .nf-form-content nf-fields-wrap input[type=email]:-ms-input-placeholder, .heroStoringFullWidth .narrowContainer .storingFormContainer .nf-form-content nf-fields-wrap input[type=tel]:-ms-input-placeholder {
color: var(--kleur-tekst-grijs);
}
.heroStoringFullWidth .narrowContainer .storingFormContainer .nf-form-content nf-fields-wrap input[type=text]::-ms-input-placeholder, .heroStoringFullWidth .narrowContainer .storingFormContainer .nf-form-content nf-fields-wrap input[type=email]::-ms-input-placeholder, .heroStoringFullWidth .narrowContainer .storingFormContainer .nf-form-content nf-fields-wrap input[type=tel]::-ms-input-placeholder {
color: var(--kleur-tekst-grijs);
}
.heroStoringFullWidth .narrowContainer .storingFormContainer .nf-form-content nf-fields-wrap input[type=text]::placeholder,
.heroStoringFullWidth .narrowContainer .storingFormContainer .nf-form-content nf-fields-wrap input[type=email]::placeholder,
.heroStoringFullWidth .narrowContainer .storingFormContainer .nf-form-content nf-fields-wrap input[type=tel]::placeholder {
color: var(--kleur-tekst-grijs);
}
.heroStoringFullWidth .narrowContainer .storingFormContainer .nf-form-content nf-fields-wrap textarea {
background-color: var(--kleur-zwart);
color: var(--kleur-tekst-licht);
border: 1px solid var(--kleur-border-input);
padding: 20px;
border-radius: 10px;
}
.heroStoringFullWidth .narrowContainer .storingFormContainer .nf-form-content nf-fields-wrap textarea::-webkit-input-placeholder {
color: var(--kleur-tekst-grijs);
}
.heroStoringFullWidth .narrowContainer .storingFormContainer .nf-form-content nf-fields-wrap textarea::-moz-placeholder {
color: var(--kleur-tekst-grijs);
}
.heroStoringFullWidth .narrowContainer .storingFormContainer .nf-form-content nf-fields-wrap textarea:-ms-input-placeholder {
color: var(--kleur-tekst-grijs);
}
.heroStoringFullWidth .narrowContainer .storingFormContainer .nf-form-content nf-fields-wrap textarea::-ms-input-placeholder {
color: var(--kleur-tekst-grijs);
}
.heroStoringFullWidth .narrowContainer .storingFormContainer .nf-form-content nf-fields-wrap textarea::placeholder {
color: var(--kleur-tekst-grijs);
}
.heroStoringFullWidth .narrowContainer .storingFormContainer .nf-form-content nf-fields-wrap label {
color: var(--kleur-tekst-licht);
font-size: var(--fs-14);
font-weight: 300;
}
.heroStoringFullWidth::after {
content: "";
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 150px;
background-color: transparent;
background-image: url(//cs-av.nl/wp-content/themes/CS-theme/img/seperator-white-circle.svg);
background-size: 250%;
background-position: top center;
background-repeat: no-repeat;
z-index: 4;
}
.heroFaqFullWidth {
position: relative;
background-color: var(--kleur-zwart);
min-height: 600px;
padding-bottom: 200px;
overflow: hidden;
}
.heroFaqFullWidth .heroContainer {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
z-index: 2;
padding-top: 200px;
}
.heroFaqFullWidth .heroContainer h1 {
color: var(--kleur-tekst-licht);
font-size: var(--fs-80);
line-height: var(--lh-80);
font-weight: 400;
text-align: center;
margin-bottom: 40px;
}
.heroFaqFullWidth .heroContainer p {
font-size: var(--fs-20);
line-height: var(--lh-36);
font-weight: 300;
color: var(--kleur-tekst-licht);
text-align: center;
max-width: 950px;
margin: 0 auto;
}
.heroFaqFullWidth::after {
content: "";
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 150px;
background-color: transparent;
background-image: url(//cs-av.nl/wp-content/themes/CS-theme/img/seperator-white-circle.svg);
background-size: 250%;
background-position: top center;
background-repeat: no-repeat;
z-index: 4;
}
.page-template-contact-page {
background-color: var(--kleur-zwart);
}
.contactHeroFullWidth {
background-color: var(--kleur-wit);
position: relative;
padding-bottom: 0;
min-height: 600px;
}
.contactHeroFullWidth .heroContainer .contactHeroTitleContainer {
margin: 200px 0 100px;
}
.contactHeroFullWidth .heroContainer .contactHeroTitleContainer h1 {
font-size: var(--fs-106);
line-height: var(--lh-106);
font-weight: 400;
}
.contactHeroFullWidth .heroContainer .contactHeroContentContainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.contactHeroFullWidth .heroContainer .contactHeroContentContainer .contactHeroContactContainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.contactHeroFullWidth .heroContainer .contactHeroContentContainer .contactHeroContactContainer .contactHeroContainer {
margin-right: 50px;
}
.contactHeroFullWidth .heroContainer .contactHeroContentContainer .contactHeroContactContainer .contactHeroAdresContainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.contactHeroFullWidth .heroContainer .contactHeroContentContainer .contactHeroContactContainer .contactHeroAdresContainer p {
color: var(--kleur-tekst-grijs);
}
.contactHeroFullWidth .heroContainer .contactHeroContentContainer .contactHeroContactContainer .adviesTitel {
font-size: var(--fs-14);
color: var(--kleur-tekst-grijs);
margin-bottom: 5px;
}
.contactHeroFullWidth .heroContainer .contactHeroContentContainer .contactHeroContactContainer .adviesWaarde {
font-size: var(--fs-32);
line-height: var(--fs-32);
font-weight: 500;
}
.contactHeroFullWidth .heroContainer .contactHeroContentContainer .contactHeroContactContainer .adviesWaarde a {
font-size: var(--fs-32);
line-height: var(--fs-32);
font-weight: 500;
text-decoration: none;
}
.contactHeroFullWidth .heroContainer .contactHeroContentContainer .contactHeroAdviesContainer {
-webkit-transform: translateY(-22px);
transform: translateY(-22px);
}
.contactHeroFullWidth::after {
content: "";
position: absolute;
bottom: -150px;
left: 0;
width: 100%;
height: 150px;
background-color: transparent;
background-image: url(//cs-av.nl/wp-content/themes/CS-theme/img/seperator-white-circle-180.svg);
background-size: 250%;
background-position: bottom center;
background-repeat: no-repeat;
z-index: 4;
}
.contactFormFullWidth {
padding-top: 200px;
background-color: var(--kleur-zwart);
}
.contactFormFullWidth .normalContainer .nf-form-content nf-fields-wrap {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas: "sf1 sf2" "sf3 sf4" "sf5 sf5" "sf6 sf7";
grid-gap: 20px;
}
.contactFormFullWidth .normalContainer .nf-form-content nf-fields-wrap nf-field .nf-field-container {
margin-bottom: 0;
}
.contactFormFullWidth .normalContainer .nf-form-content nf-fields-wrap nf-field:nth-child(1) {
grid-area: sf1;
}
.contactFormFullWidth .normalContainer .nf-form-content nf-fields-wrap nf-field:nth-child(2) {
grid-area: sf2;
}
.contactFormFullWidth .normalContainer .nf-form-content nf-fields-wrap nf-field:nth-child(3) {
grid-area: sf3;
}
.contactFormFullWidth .normalContainer .nf-form-content nf-fields-wrap nf-field:nth-child(4) {
grid-area: sf4;
}
.contactFormFullWidth .normalContainer .nf-form-content nf-fields-wrap nf-field:nth-child(5) {
grid-area: sf5;
}
.contactFormFullWidth .normalContainer .nf-form-content nf-fields-wrap nf-field:nth-child(6) {
grid-area: sf6;
}
.contactFormFullWidth .normalContainer .nf-form-content nf-fields-wrap nf-field:nth-child(6) .nf-field-container {
margin-bottom: 0;
}
.contactFormFullWidth .normalContainer .nf-form-content nf-fields-wrap nf-field:nth-child(6) .nf-field-container .nf-field {
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
.contactFormFullWidth .normalContainer .nf-form-content nf-fields-wrap nf-field:nth-child(7) {
grid-area: sf7;
}
.contactFormFullWidth .normalContainer .nf-form-content nf-fields-wrap input[type=text],
.contactFormFullWidth .normalContainer .nf-form-content nf-fields-wrap input[type=email],
.contactFormFullWidth .normalContainer .nf-form-content nf-fields-wrap input[type=tel] {
background-color: var(--kleur-zwart);
color: var(--kleur-tekst-licht);
border: 1px solid var(--kleur-border-input);
padding: 20px;
border-radius: 10px;
}
.contactFormFullWidth .normalContainer .nf-form-content nf-fields-wrap input[type=text]::-webkit-input-placeholder, .contactFormFullWidth .normalContainer .nf-form-content nf-fields-wrap input[type=email]::-webkit-input-placeholder, .contactFormFullWidth .normalContainer .nf-form-content nf-fields-wrap input[type=tel]::-webkit-input-placeholder {
color: var(--kleur-tekst-grijs);
}
.contactFormFullWidth .normalContainer .nf-form-content nf-fields-wrap input[type=text]::-moz-placeholder, .contactFormFullWidth .normalContainer .nf-form-content nf-fields-wrap input[type=email]::-moz-placeholder, .contactFormFullWidth .normalContainer .nf-form-content nf-fields-wrap input[type=tel]::-moz-placeholder {
color: var(--kleur-tekst-grijs);
}
.contactFormFullWidth .normalContainer .nf-form-content nf-fields-wrap input[type=text]:-ms-input-placeholder, .contactFormFullWidth .normalContainer .nf-form-content nf-fields-wrap input[type=email]:-ms-input-placeholder, .contactFormFullWidth .normalContainer .nf-form-content nf-fields-wrap input[type=tel]:-ms-input-placeholder {
color: var(--kleur-tekst-grijs);
}
.contactFormFullWidth .normalContainer .nf-form-content nf-fields-wrap input[type=text]::-ms-input-placeholder, .contactFormFullWidth .normalContainer .nf-form-content nf-fields-wrap input[type=email]::-ms-input-placeholder, .contactFormFullWidth .normalContainer .nf-form-content nf-fields-wrap input[type=tel]::-ms-input-placeholder {
color: var(--kleur-tekst-grijs);
}
.contactFormFullWidth .normalContainer .nf-form-content nf-fields-wrap input[type=text]::placeholder,
.contactFormFullWidth .normalContainer .nf-form-content nf-fields-wrap input[type=email]::placeholder,
.contactFormFullWidth .normalContainer .nf-form-content nf-fields-wrap input[type=tel]::placeholder {
color: var(--kleur-tekst-grijs);
}
.contactFormFullWidth .normalContainer .nf-form-content nf-fields-wrap textarea {
background-color: var(--kleur-zwart);
color: var(--kleur-tekst-licht);
border: 1px solid var(--kleur-border-input);
padding: 20px;
border-radius: 10px;
}
.contactFormFullWidth .normalContainer .nf-form-content nf-fields-wrap textarea::-webkit-input-placeholder {
color: var(--kleur-tekst-grijs);
}
.contactFormFullWidth .normalContainer .nf-form-content nf-fields-wrap textarea::-moz-placeholder {
color: var(--kleur-tekst-grijs);
}
.contactFormFullWidth .normalContainer .nf-form-content nf-fields-wrap textarea:-ms-input-placeholder {
color: var(--kleur-tekst-grijs);
}
.contactFormFullWidth .normalContainer .nf-form-content nf-fields-wrap textarea::-ms-input-placeholder {
color: var(--kleur-tekst-grijs);
}
.contactFormFullWidth .normalContainer .nf-form-content nf-fields-wrap textarea::placeholder {
color: var(--kleur-tekst-grijs);
}
.contactFormFullWidth .normalContainer .nf-form-content nf-fields-wrap label {
color: var(--kleur-tekst-licht);
font-size: var(--fs-14);
font-weight: 300;
}
.contactFormFullWidth .normalContainer .nf-response-msg p {
color: var(--kleur-tekst-licht);
}
.singleOplossingHeroFullWidth {
position: relative;
background-color: var(--kleur-zwart);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
min-height: 100vh;
min-height: 100svh;
padding-bottom: 200px;
overflow: hidden;
}
.singleOplossingHeroFullWidth .singleOplossingHeroOverlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
}
.singleOplossingHeroFullWidth .heroContainer {
position: relative;
z-index: 2;
padding-top: 200px;
}
.singleOplossingHeroFullWidth .heroContainer h1 {
color: var(--kleur-tekst-licht);
font-size: var(--fs-106);
line-height: var(--lh-106);
font-weight: 400;
margin-bottom: 40px;
}
.singleOplossingHeroFullWidth::after {
content: "";
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 150px;
background-color: transparent;
background-image: url(//cs-av.nl/wp-content/themes/CS-theme/img/seperator-white-circle.svg);
background-size: 250%;
background-position: top center;
background-repeat: no-repeat;
z-index: 4;
}
.singleOplossingOmschrijvingFullWidth .singleOplossingOmschrijvingContainer p {
font-size: var(--fs-32);
line-height: var(--lh-52);
font-weight: 300;
}
.singleOplossingOmschrijvingFullWidth .singleOplossingOmschrijvingContainer .singleOmschrijvingOplossingPersoon {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-top: 40px;
}
.singleOplossingOmschrijvingFullWidth .singleOplossingOmschrijvingContainer .singleOmschrijvingOplossingPersoon .singleOmschrijvingOplossingPersoonLinks {
margin-right: 20px;
}
.singleOplossingOmschrijvingFullWidth .singleOplossingOmschrijvingContainer .singleOmschrijvingOplossingPersoon .singleOmschrijvingOplossingPersoonLinks img {
width: 100px;
height: 100px;
border-radius: 50%;
}
.singleOplossingOmschrijvingFullWidth .singleOplossingOmschrijvingContainer .singleOmschrijvingOplossingPersoon .singleOmschrijvingOplossingPersoonRechts {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.singleOplossingOmschrijvingFullWidth .singleOplossingOmschrijvingContainer .singleOmschrijvingOplossingPersoon .singleOmschrijvingOplossingPersoonRechts .persoonNaam,
.singleOplossingOmschrijvingFullWidth .singleOplossingOmschrijvingContainer .singleOmschrijvingOplossingPersoon .singleOmschrijvingOplossingPersoonRechts .persoonFunctie {
font-size: var(--fs-18);
line-height: var(--lh-24);
font-weight: 400;
margin-bottom: 0;
}
.singleOplossingOmschrijvingFullWidth .landingKnopContainer {
margin-top: 20px;
}
.galerijFullWidth {
padding-bottom: 0;
overflow: hidden;
}
.galerijFullWidth .galerijContainer .galerijSlider {
position: relative;
}
.galerijFullWidth .galerijContainer .galerijSlider .owl-stage {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.galerijFullWidth .galerijContainer .galerijSlider .owl-stage .galerijSliderItemContainer {
width: 100%;
height: 100%;
}
.galerijFullWidth .galerijContainer .galerijSlider .owl-stage .galerijSliderItemContainer .galerijSliderItem {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
border-radius: 15px;
}
.galerijFullWidth .galerijContainer .galerijSlider .owl-nav {
position: relative;
top: 0;
left: 0;
}
.galerijFullWidth .galerijContainer .galerijSlider .owl-nav .owl-prev {
position: absolute;
top: -375px;
left: -150px;
width: 60px;
height: 60px;
border-radius: 30px;
background-color: var(--kleur-wit);
border: none;
background-image: url(//cs-av.nl/wp-content/themes/CS-theme/img/black-arrow-right.svg);
background-position: center center;
background-size: 16px;
background-repeat: no-repeat;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
cursor: pointer;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.galerijFullWidth .galerijContainer .galerijSlider .owl-nav .owl-prev:hover {
background-color: var(--kleur-blauw);
background-image: url(//cs-av.nl/wp-content/themes/CS-theme/img/white-arrow-right.svg);
-webkit-transition: 0.3s;
transition: 0.3s;
}
.galerijFullWidth .galerijContainer .galerijSlider .owl-nav .owl-next {
position: absolute;
top: -375px;
right: -150px;
width: 60px;
height: 60px;
border-radius: 30px;
background-color: var(--kleur-wit);
border: none;
background-image: url(//cs-av.nl/wp-content/themes/CS-theme/img/black-arrow-right.svg);
background-position: center center;
background-size: 16px;
background-repeat: no-repeat;
cursor: pointer;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.galerijFullWidth .galerijContainer .galerijSlider .owl-nav .owl-next:hover {
background-color: var(--kleur-blauw);
background-image: url(//cs-av.nl/wp-content/themes/CS-theme/img/white-arrow-right.svg);
-webkit-transition: 0.3s;
transition: 0.3s;
}
.opstellingIntroFullWidth .opstellingIntroContainer p {
font-weight: 300;
color: var(--kleur-tekst-grijs);
}
.opstellingAfbeeldingFullWidth .opstellingAfbeeldingItem {
margin-bottom: 100px;
}
.opstellingAfbeeldingFullWidth .opstellingAfbeeldingCategorieContainer .opstellingAfbeeldingCategorie {
display: grid;
grid-template-columns: 2fr 4fr 60px;
grid-gap: 50px;
padding-bottom: 10px;
margin-bottom: 30px;
border-bottom: 1px solid var(--kleur-grijs);
}
.opstellingAfbeeldingFullWidth .opstellingAfbeeldingCategorieContainer .opstellingAfbeeldingCategorie h3 {
font-size: var(--fs-32);
font-weight: 400;
}
.opstellingAfbeeldingFullWidth .opstellingAfbeeldingCategorieContainer .opstellingAfbeeldingCategorie p {
font-weight: 300;
}
.opstellingAfbeeldingFullWidth .opstellingAfbeeldingCategorieContainer .opstellingAfbeeldingCategorie a {
text-align: right;
}
.opstellingAfbeeldingFullWidth .opstellingAfbeeldingCategorieContainer .opstellingAfbeeldingCategorie .roundButtonArrowRight {
width: 50px;
height: 50px;
border-radius: 25px;
border: 1px solid var(--kleur-grijs);
background-image: url(//cs-av.nl/wp-content/themes/CS-theme/img/black-arrow-right.svg);
background-size: 16px;
background-position: center center;
background-repeat: no-repeat;
}
.projectHeroFullWidth {
position: relative;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
min-height: 50vh;
min-height: 50svh;
padding-bottom: 200px;
overflow: hidden;
}
.projectHeroFullWidth .projectHeroOverlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
}
.projectHeroFullWidth .heroContainer {
position: relative;
z-index: 2;
padding-top: 200px;
}
.projectHeroFullWidth .heroContainer h1 {
color: var(--kleur-tekst-licht);
font-size: var(--fs-106);
line-height: var(--lh-106);
font-weight: 400;
margin-bottom: 40px;
}
.projectHeroFullWidth .heroContainer .projectHeroLabel {
background: var(--kleur-gradient-groen-blauw);
color: var(--kleur-tekst-licht);
padding: 5px 10px;
height: 30px;
border-radius: 15px;
}
.projectHeroFullWidth::after {
content: "";
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 150px;
background-color: transparent;
background-image: url(//cs-av.nl/wp-content/themes/CS-theme/img/seperator-white-circle.svg);
background-size: 250%;
background-position: top center;
background-repeat: no-repeat;
z-index: 4;
}
.projectOmschrijvingFullWidth .projectOmschrijvingContainer h1 {
font-size: var(--fs-40);
line-height: var(--lh-52);
font-weight: 600;
margin-bottom: 40px;
}
.projectOmschrijvingFullWidth .projectOmschrijvingContainer h2 {
font-size: var(--fs-32);
line-height: var(--lh-52);
font-weight: 600;
margin: 40px 0 20px 0;
}
.projectOmschrijvingFullWidth .projectOmschrijvingContainer h3 {
font-size: var(--fs-32);
line-height: var(--lh-52);
font-weight: 600;
margin: 40px 0 20px 0;
}
.projectOmschrijvingFullWidth .projectOmschrijvingContainer p {
font-size: var(--fs-32);
line-height: var(--lh-52);
font-weight: 300;
}
.projectVoordelenFullWidth {
position: relative;
}
.projectVoordelenFullWidth::before {
content: "";
position: absolute;
top: 0;
left: 5%;
width: 90%;
height: 100%;
background: var(--kleur-gradient-grijs-trans);
border-radius: 15px;
}
.projectVoordelenFullWidth .projectVoordelenContainer {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
max-width: 80%;
z-index: 3;
}
.projectVoordelenFullWidth .projectVoordelenContainer .projectVoordelenContainerTop {
text-align: center;
}
.projectVoordelenFullWidth .projectVoordelenContainer .projectVoordelenContainerBottom .voordeelLijst {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-gap: 0 20px;
}
.projectVoordelenFullWidth .projectVoordelenContainer .projectVoordelenContainerBottom .voordeelLijst li {
position: relative;
padding-left: 30px;
margin-bottom: 20px;
}
.projectVoordelenFullWidth .projectVoordelenContainer .projectVoordelenContainerBottom .voordeelLijst li::before {
content: "";
position: absolute;
top: 5px;
left: 0;
width: 14px;
height: 10px;
background-image: url(//cs-av.nl/wp-content/themes/CS-theme/img/icon-check-black.svg);
background-size: cover;
background-position: left top;
background-color: transparent;
}
.projectGalerijFullWidth {
margin-bottom: 200px;
}
.projectProductenFullWidth .projectProductContainerTop {
text-align: center;
}
.projectProductenFullWidth .projectProductContainerBottom {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-gap: 200px;
}
.projectProductenFullWidth .projectProductContainerBottom .productItem {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.projectProductenFullWidth .projectProductContainerBottom .productItem img {
border-radius: 15px;
margin-bottom: 40px;
}
.projectProductenFullWidth .projectProductContainerBottom .productItem .productNaam {
font-size: var(--fs-32);
font-weight: 500;
}
.projectProjectSliderFullWidth {
margin-bottom: 100px;
}
.adviesGesprekFullWidth {
position: relative;
background: var(--kleur-gradient-groen-blauw);
border-radius: 120px 120px 0 0;
}
.adviesGesprekFullWidth .adviesGesprekContainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.adviesGesprekFullWidth .adviesGesprekContainer .adviesGesprekContainerTop {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 100px;
}
.adviesGesprekFullWidth .adviesGesprekContainer .adviesGesprekContainerTop h2 {
font-size: var(--fs-106);
line-height: var(--lh-106);
font-weight: 500;
color: var(--kleur-tekst-licht);
text-align: center;
margin-bottom: 40px;
}
.adviesGesprekFullWidth .adviesGesprekContainer .adviesGesprekContainerTop p {
color: var(--kleur-tekst-licht);
font-size: var(--fs-40);
line-height: var(--lh-60);
font-weight: 300;
text-align: center;
margin-bottom: 40px;
}
.adviesGesprekFullWidth .adviesGesprekContainer .adviesGesprekContainerTop a {
display: inline-block;
text-align: center;
}
.adviesGesprekFullWidth .adviesGesprekContainer .adviesGesprekContainerBottom {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border-top: 1px solid var(--kleur-wit);
padding: 40px 100px;
}
.adviesGesprekFullWidth .adviesGesprekContainer .adviesGesprekContainerBottom .adviesTitel {
font-size: var(--fs-14);
color: var(--kleur-tekst-licht);
margin-bottom: 5px;
}
.adviesGesprekFullWidth .adviesGesprekContainer .adviesGesprekContainerBottom .adviesWaarde {
font-size: var(--fs-32);
line-height: var(--fs-32);
color: var(--kleur-tekst-licht);
font-weight: 500;
}
.adviesGesprekFullWidth .adviesGesprekContainer .adviesGesprekContainerBottom .adviesWaarde a {
font-size: var(--fs-32);
line-height: var(--fs-32);
font-weight: 500;
color: var(--kleur-tekst-licht);
text-decoration: none;
}
.adviesGesprekFullWidth .adviesGesprekContainer .adviesGesprekContainerBottom .adviesEigenaarContainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.adviesGesprekFullWidth .adviesGesprekContainer .adviesGesprekContainerBottom .adviesEigenaarContainer .adviesEigenaarContainerLeft .eigenaarFoto {
width: 100px;
height: 100px;
border-radius: 50px;
margin-right: 20px;
}
.adviesGesprekFullWidth .adviesGesprekContainer .adviesGesprekContainerBottom .adviesEigenaarContainer .adviesEigenaarContainerRight .adviesWaarde {
font-size: var(--fs-32);
line-height: var(--fs-32);
color: var(--kleur-tekst-licht);
font-weight: 500;
margin-bottom: 5px;
}
.adviesGesprekFullWidth .adviesGesprekContainer .adviesGesprekContainerBottom .adviesEigenaarContainer .adviesEigenaarContainerRight .adviesTitel {
font-size: var(--fs-14);
color: var(--kleur-tekst-licht);
margin-bottom: 5px;
}
.adviesGesprekFullWidth::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 150px;
background-color: transparent;
background-image: url(//cs-av.nl/wp-content/themes/CS-theme/img/seperator-black-circle-invert-180.svg);
background-size: 250%;
background-position: bottom center;
background-repeat: no-repeat;
z-index: 4;
}
.heroBeeldGeluidFullWidth {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-color: var(--kleur-zwart);
min-height: 100vh;
min-height: 100svh;
padding: 100px 0 200px 0;
overflow: hidden;
}
.heroBeeldGeluidFullWidth .heroContainer {
position: relative;
padding-top: 100px;
z-index: 3;
}
.heroBeeldGeluidFullWidth .blueRadialGradient {
position: absolute;
}
.heroBeeldGeluidFullWidth .heroBeeldGeluidGradientLeft {
width: 1500px;
height: 1500px;
top: -500px;
left: -500px;
pointer-events: none;
z-index: 0;
}
.heroBeeldGeluidFullWidth .heroBeeldGeluidGradientRight {
width: 1000px;
height: 1000px;
top: 300px;
right: -300px;
pointer-events: none;
z-index: 0;
}
.heroBeeldGeluidFullWidth .heroBeeldGeluidGradientBottom {
top: 900px;
pointer-events: none;
z-index: 0;
}
.heroBeeldGeluidFullWidth .heroBeeldGeluidContent .heroBeeldGeluidImageKolom {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.heroBeeldGeluidFullWidth .heroBeeldGeluidContent .heroBeeldGeluidImageKolom .heroBeeldGeluidImage {
-webkit-transform: translateX(-50px) translateY(-50px);
transform: translateX(-50px) translateY(-50px);
}
.heroBeeldGeluidFullWidth .heroBeeldGeluidContent .heroBeeldGeluidContentKolom {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.heroBeeldGeluidFullWidth .heroBeeldGeluidContent .heroBeeldGeluidContentKolom .heroBeeldGeluidContentKolomLeft {
min-width: 100px;
}
.heroBeeldGeluidFullWidth .heroBeeldGeluidContent .heroBeeldGeluidContentKolom .heroBeeldGeluidContentKolomLeft .heroBeeldGeluidIcon {
width: 55px;
height: auto;
margin-top: 20px;
}
.heroBeeldGeluidFullWidth .heroBeeldGeluidContent .heroBeeldGeluidContentKolom .heroBeeldGeluidContentKolomRight h1 {
color: var(--kleur-tekst-licht);
font-size: var(--fs-80);
font-weight: 400;
margin-bottom: 40px;
}
.heroBeeldGeluidFullWidth .heroBeeldGeluidContent .heroBeeldGeluidContentKolom .heroBeeldGeluidContentKolomRight p {
color: var(--kleur-tekst-licht);
line-height: var(--lh-36);
margin-bottom: 60px;
}
.heroBeeldGeluidFullWidth .heroBeeldGeluidContent .heroBeeldGeluidContentKolom .heroBeeldGeluidContentKolomRight .heroBeeldGeluidMerkenContainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.heroBeeldGeluidFullWidth .heroBeeldGeluidContent .heroBeeldGeluidContentKolom .heroBeeldGeluidContentKolomRight .heroBeeldGeluidMerkenContainer .beeldGeluidBrandIcon {
width: 160px;
height: auto;
margin-right: 20px;
}
.heroBeeldGeluidFullWidth::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 150px;
background-image: url(//cs-av.nl/wp-content/themes/CS-theme/img/seperator-white-circle.svg);
background-position: top center;
background-size: 250%;
background-repeat: no-repeat;
z-index: 1;
}
.beeldGeluidOplossingenFullWidth .beeldGeluidOplossingenContainer .beeldGeluidOplossingenItem {
display: grid;
grid-template-columns: 1fr 3fr;
grid-gap: 0 100px;
padding-bottom: 40px;
margin-bottom: 20px;
border-bottom: 1px solid var(--kleur-grijs);
}
.beeldGeluidOplossingenFullWidth .beeldGeluidOplossingenContainer .beeldGeluidOplossingenItem h2 {
font-size: var(--fs-32);
line-height: var(--lh-44);
font-weight: 400;
margin-bottom: 0;
}
.beeldGeluidOplossingenFullWidth .beeldGeluidOplossingenContainer .beeldGeluidOplossingenItem p {
color: var(--kleur-tekst-grijs);
font-weight: 300;
}
.beeldGeluidOplossingenFullWidth .beeldGeluidOplossingenContainer .beeldGeluidOplossingenItem p:last-child {
margin-bottom: 0;
}
.heroContentFullWidth {
position: relative;
background-color: var(--kleur-zwart);
min-height: 600px;
padding-bottom: 200px;
overflow: hidden;
}
.heroContentFullWidth .heroContainer {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
z-index: 2;
padding-top: 200px;
}
.heroContentFullWidth .heroContainer h1 {
color: var(--kleur-tekst-licht);
font-size: var(--fs-80);
line-height: var(--lh-80);
font-weight: 400;
text-align: center;
margin-bottom: 40px;
}
.heroContentFullWidth .heroContainer p {
font-size: var(--fs-20);
line-height: var(--lh-36);
font-weight: 300;
color: var(--kleur-tekst-licht);
text-align: center;
max-width: 950px;
margin: 0 auto;
}
.heroContentFullWidth::after {
content: "";
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 150px;
background-color: transparent;
background-image: url(//cs-av.nl/wp-content/themes/CS-theme/img/seperator-white-circle.svg);
background-size: 250%;
background-position: top center;
background-repeat: no-repeat;
z-index: 4;
}
.contentTempFullWidth .contentTempContainer {
max-width: 1000px;
}
.contentTempFullWidth .contentTempContainer h2 {
font-size: var(--fs-32);
line-height: var(--lh-36);
margin: 40px 0 20px 0;
}
.contentTempFullWidth .contentTempContainer ul {
margin: 20px 0;
}
.contentTempFullWidth .contentTempContainer p {
font-size: var(--fs-18);
line-height: var(--lh-24);
margin-bottom: 20px;
}
.footerFullWidth {
background-color: var(--kleur-zwart);
padding: 100px 0 0 0;
}
.footerFullWidth .footerContainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.footerFullWidth .footerContainer .footerContainerTop {
padding-bottom: 100px;
border-bottom: 1px solid var(--kleur-donker-blauw);
}
.footerFullWidth .footerContainer .footerContainerTop .footerLogo {
width: 180px;
}
.footerFullWidth .footerContainer .footerContainerTop h3 {
color: var(--kleur-tekst-licht);
margin-bottom: 20px;
}
.footerFullWidth .footerContainer .footerContainerTop p {
color: var(--kleur-tekst-licht);
}
.footerFullWidth .footerContainer .footerContainerTop a {
text-decoration: none;
color: var(--kleur-tekst-licht);
margin-bottom: 20px;
}
.footerFullWidth .footerContainer .footerContainerTop ul {
list-style-type: none;
}
.footerFullWidth .footerContainer .footerContainerTop ul li {
padding-left: 0;
margin-bottom: 20px;
}
.footerFullWidth .footerContainer .footerContainerTop ul li::before {
display: none;
}
.footerFullWidth .footerContainer .footerContainerTop .footerKolom2 {
padding-top: 40px;
}
.footerFullWidth .footerContainer .footerContainerTop .footerKolom3 {
padding-top: 40px;
}
.footerFullWidth .footerContainer .footerContainerTop .footerContactContainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.footerFullWidth .footerContainer .footerContainerTop .footerContactContainer .footerContactContainerTop {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
margin-bottom: 40px;
width: 100%;
}
.footerFullWidth .footerContainer .footerContainerTop .footerContactContainer .footerContactContainerTop .footerButton {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: var(--fs-18);
font-weight: 500;
line-height: var(--lh-24);
color: var(--kleur-tekst-licht);
border: 1px solid var(--kleur-wit);
padding: 0 20px 0 70px;
border-radius: 30px;
height: 60px;
overflow: hidden;
text-decoration: none;
}
.footerFullWidth .footerContainer .footerContainerTop .footerContactContainer .footerContactContainerTop .footerButton span {
position: relative;
color: var(--kleur-tekst-licht);
z-index: 2;
}
.footerFullWidth .footerContainer .footerContainerTop .footerContactContainer .footerContactContainerTop .footerButton::before {
content: "";
position: absolute;
top: -120px;
left: -160%;
width: 150%;
height: 450%;
background-color: var(--kleur-wit);
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
pointer-events: none;
z-index: 1;
opacity: 0;
-webkit-transition: 0.8s;
transition: 0.8s;
}
.footerFullWidth .footerContainer .footerContainerTop .footerContactContainer .footerContactContainerTop .footerButton:hover {
color: var(--kleur-tekst-donker);
-webkit-transition: 1s;
transition: 1s;
}
.footerFullWidth .footerContainer .footerContainerTop .footerContactContainer .footerContactContainerTop .footerButton:hover span {
color: var(--kleur-tekst-donker);
-webkit-transition: 0.8s;
transition: 0.8s;
}
.footerFullWidth .footerContainer .footerContainerTop .footerContactContainer .footerContactContainerTop .footerButton:hover::before {
left: 0;
opacity: 1;
-webkit-transition: 1s;
transition: 1s;
}
.footerFullWidth .footerContainer .footerContainerTop .footerContactContainer .footerContactContainerTop .footerButtonBel {
margin-right: 60px;
}
.footerFullWidth .footerContainer .footerContainerTop .footerContactContainer .footerContactContainerTop .footerButtonBel::after {
content: "";
position: absolute;
top: 7px;
left: 7px;
width: 44px;
height: 44px;
border-radius: 22px;
background-color: var(--kleur-wit);
background-image: url(//cs-av.nl/wp-content/themes/CS-theme/img/icon-phone-black.svg);
background-size: 16px;
background-position: center;
background-repeat: no-repeat;
z-index: 2;
}
.footerFullWidth .footerContainer .footerContainerTop .footerContactContainer .footerContactContainerTop .footerButtonMail::after {
content: "";
position: absolute;
top: 7px;
left: 7px;
width: 44px;
height: 44px;
border-radius: 22px;
background-color: var(--kleur-wit);
background-image: url(//cs-av.nl/wp-content/themes/CS-theme/img/icon-mail-black.svg);
background-size: 16px;
background-position: center;
background-repeat: no-repeat;
z-index: 2;
}
.footerFullWidth .footerContainer .footerContainerTop .footerContactContainer .footerContactContainerCenter {
margin-bottom: 20px;
}
.footerFullWidth .footerContainer .footerContainerTop .footerContactContainer .footerContactContainerBottom .googleReviewContainer {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.footerFullWidth .footerContainer .footerContainerTop .footerContactContainer .footerContactContainerBottom .googleReviewContainer .googleLogo {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
.footerFullWidth .footerContainer .footerContainerTop .footerContactContainer .footerContactContainerBottom .googleReviewContainer p:last-child {
margin-right: 0;
}
.footerFullWidth .footerContainer .footerContainerBottom {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 40px 0;
}
.footerFullWidth .footerContainer .footerContainerBottom p {
font-size: var(--fs-14);
color: var(--kleur-tekst-licht);
}
.footerFullWidth .footerContainer .footerContainerBottom a {
text-decoration: none;
font-size: var(--fs-14);
color: var(--kleur-tekst-licht);
margin-right: 40px;
}
.footerFullWidth .footerContainer .footerContainerBottom a:last-child {
margin-right: 0;
}
@media (max-width: 1460px) {
.normalContainer {
padding: 0 20px;
}
.heroBreadcrumbContainer {
margin-left: 20px;
}
.homeOplossingenFullWidth {
grid-template-columns: 1fr 6fr 1fr;
}
.homeOplossingenFullWidth .kolom1 .homeOplossingFoto1 {
top: 0;
left: 20px;
}
.homeOplossingenFullWidth .kolom1 .homeOplossingFoto2 {
top: 45%;
left: -30px;
}
.homeOplossingenFullWidth .kolom3 .homeOplossingFoto3 {
top: 10px;
right: 40px;
}
.homeOplossingenFullWidth .kolom3 .homeOplossingFoto4 {
top: 30%;
right: -70px;
width: 210px;
}
.homeOplossingenFullWidth .kolom3 .homeOplossingFoto5 {
bottom: -150px;
right: 20px;
width: 300px;
}
.homeOplossingenFullWidth::after {
bottom: -30px;
}
.fullScreenQuoteContainer {
grid-template-columns: 1fr 1fr;
}
.adviesGesprekFullWidth .adviesGesprekContainerTop h2 {
font-size: var(--fs-80) !important;
}
.adviesGesprekFullWidth .adviesGesprekContainerTop p {
font-size: var(--fs-32) !important;
line-height: var(--lh-44) !important;
}
.adviesGesprekFullWidth .adviesGesprekContainerBottom {
padding: 40px 0 !important;
}
.testimonialContainer .kolom:nth-child(1) .testimonialSlider .testimonialSlide {
width: 100%;
}
.heroOplossingenFullWidth {
padding: 100px 0;
}
.heroOplossingenFullWidth p {
font-size: var(--fs-40);
line-height: var(--lh-44);
}
.heroOplossingenFullWidth::after {
bottom: -30px;
}
.oplossingSituatieFullWidth h2 {
font-size: var(--fs-60);
line-height: var(--lh-80);
}
.heroBeeldGeluidFullWidth::after {
bottom: -30px;
}
.beeldGeluidOplossingenFullWidth .beeldGeluidOplossingenContainer .beeldGeluidOplossingenItem .kolom:first-child {
min-width: 450px;
}
.galerijFullWidth .galerijContainer .galerijSlider .owl-nav .owl-prev {
left: 20px;
}
.galerijFullWidth .galerijContainer .galerijSlider .owl-nav .owl-next {
right: 20px;
}
.projectHeroFullWidth .heroContainer h1 {
font-size: var(--fs-80);
line-height: var(--lh-80);
}
.projectHeroFullWidth::after {
bottom: -30px;
}
.contentFullWidth h2 {
font-size: var(--fs-40);
line-height: var(--lh-44);
}
.projectProductenFullWidth .projectProductContainerTop h2 {
font-size: var(--fs-40);
line-height: var(--lh-44);
}
.projectProductenFullWidth .projectProductContainerBottom {
grid-gap: 100px;
}
.projectProductenFullWidth .projectProductContainerBottom .productItem .productNaam {
font-size: var(--fs-26);
line-height: var(--lh-30);
}
.heroOverOnsFullWidth::after {
bottom: -120px;
}
.heroOverOnsFullWidth .heroContainer h1 {
font-size: var(--fs-80);
line-height: var(--lh-80);
}
.contactHeroFullWidth .heroContainer .contactHeroTitleContainer {
margin: 150px 0 100px 0;
}
.contactHeroFullWidth .heroContainer .contactHeroContentContainer {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.contactHeroFullWidth .heroContainer .contactHeroContentContainer .contactHeroContactContainer {
width: 100%;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-bottom: 50px;
}
.contactHeroFullWidth::after {
bottom: -110px;
}
.heroFaqFullWidth::after {
bottom: -30px;
}
.heroStoringFullWidth .heroStoringContentKolomBottom p {
font-size: var(--fs-26) !important;
line-height: var(--lh-44) !important;
}
.heroStoringFullWidth::after {
bottom: -30px;
}
.footerFullWidth .footerContainerTop {
grid-template-columns: 1fr 1fr 1fr;
grid-template-areas: "fk1 fk2 fk3" "fk4 fk4 fk4";
}
.footerFullWidth .footerContainerTop .footerKolom1 {
grid-area: fk1;
}
.footerFullWidth .footerContainerTop .footerKolom2 {
grid-area: fk2;
}
.footerFullWidth .footerContainerTop .footerKolom3 {
grid-area: fk3;
}
.footerFullWidth .footerContainerTop .footerKolom4 {
grid-area: fk4;
width: 100%;
display: grid;
-ms-flex-pack: distribute;
justify-content: space-around;
}
.footerFullWidth .footerContainerTop .footerKolom4.footerContactContainer {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.footerFullWidth .footerContainerTop .footerKolom4.footerContactContainer .footerContactContainerTop {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
}
@media (max-width: 1050px) {
.headerNavContainer {
display: none !important;
}
.menu_desktop {
display: none !important;
}
.menu_mobile {
display: block;
}
.headerFullWidth .headerContainer .headerServiceContainer {
position: unset;
}
.headerFullWidth .headerContainer .headerServiceContainer .serviceMenuButton {
margin-right: 0;
}
.headerFullWidth .headerContainer .headerServiceContainer .headerServiceButton {
display: none;
}
.headerFullWidth .headerContainer .headerServiceContainer .headerNavSubContainer {
left: 20px;
width: calc(100% - 40px);
}
.headerFullWidth .headerContainer .headerServiceContainer .headerNavSubOpen {
top: 100px !important;
}
.homeHeroFullWidth .homeHeroContentContainer .homeHeroContentContainerTop h1 {
font-size: var(--fs-80);
line-height: var(--lh-80);
}
.homeOplossingenFullWidth {
grid-template-columns: 1fr 8fr 1fr;
grid-gap: 0;
}
.homeOplossingenFullWidth .kolom .homeOplossingFoto {
opacity: 0.2;
}
.homeOplossingenFullWidth .kolom2 .homeOplossingenContainer p a {
font-size: var(--fs-40);
line-height: var(--lh-44);
}
.homeOplossingenFullWidth::after {
bottom: -80px;
}
.situatieOplossingFullWidth .situatieOplossingContainerBottom {
grid-template-columns: 1fr 1fr;
}
.fullScreenQuoteContainer {
grid-template-columns: 3fr 1fr;
}
.testimonialContainer .kolom:nth-child(1) .testimonialSlider .testimonialSlide .testimonialQuote {
font-size: var(--fs-20);
line-height: var(--lh-30);
}
.adviesGesprekFullWidth .adviesGesprekContainer .adviesGesprekContainerBottom {
grid-template-columns: 1fr 1fr;
}
.heroOplossingenFullWidth .oplossingDetailContainer .oplossingDetailGeluidContainer {
padding: 20px;
}
.heroOplossingenFullWidth .oplossingDetailContainer .oplossingDetailBeeldContainer {
padding: 20px;
}
.heroOplossingenFullWidth .oplossingDetailContainer a {
font-size: var(--fs-32);
line-height: var(--lh-36);
text-align: left;
}
.heroOplossingenFullWidth .oplossingDetailContainer .button {
font-size: var(--fs-18) !important;
line-height: var(--lh-24);
}
.heroOplossingenFullWidth::after {
bottom: -80px;
}
.oplossingSituatieFullWidth .situatieContainer .situatieContainerBottom {
grid-template-columns: 1fr;
}
.fullScreenQuoteBedieningFullWidth .fullScreenQuoteBedieningContainer {
grid-template-columns: 3fr 1fr;
}
.fullScreenQuoteBedieningFullWidth .fullScreenQuoteBedieningContainer .bedieningSourcesContainer {
padding: 0 20px;
}
.faqItemContainer .faqItemContainerTop .faqQuestion {
font-size: var(--fs-26);
line-height: var(--lh-30);
}
.heroBeeldGeluidFullWidth .heroBeeldGeluidContent .heroBeeldGeluidImageKolom {
display: none;
}
.heroBeeldGeluidFullWidth::after {
bottom: -70px;
}
.beeldGeluidOplossingenFullWidth .beeldGeluidOplossingenContainer .beeldGeluidOplossingenItem .kolom:first-child {
min-width: 200px;
}
.beeldGeluidOplossingenFullWidth .beeldGeluidOplossingenContainer .beeldGeluidOplossingenItem h2 {
font-size: var(--fs-26);
line-height: var(--lh-30);
}
.galerijFullWidth {
padding-top: 0;
}
.galerijFullWidth .galerijContainer .galerijSlider .owl-nav .owl-prev {
top: -250px;
}
.galerijFullWidth .galerijContainer .galerijSlider .owl-nav .owl-next {
top: -250px;
}
.testimonialFullWidth {
padding: 50px 0;
}
.projectenHeroFullWidth .heroContainer .projectHeroTitleContainer h1 {
font-size: var(--fs-80);
line-height: var(--lh-80);
}
.projectenGridFullWidth .projectenGridContainer {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-gap: 20px;
}
.projectHeroFullWidth::after {
bottom: -70px;
}
.projectProductenFullWidth .projectProductContainerBottom {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-gap: 20px;
}
.heroOverOnsFullWidth::after {
bottom: -70px;
}
.beeldGeluidSliderFullWidth .beeldGeluidSliderItem {
padding: 50px;
}
.beeldGeluidSliderFullWidth .beeldGeluidSliderItem .beeldGeluidSliderIcon {
width: 60px;
margin-bottom: 10px;
}
.beeldGeluidSliderFullWidth .beeldGeluidSliderItem h3 {
font-size: var(--fs-40);
line-height: var(--lh-44);
}
.overOnsFotoSliderFullWidth {
margin-bottom: 100px;
}
.contactHeroFullWidth .heroContainer .contactHeroTitleContainer {
margin: 150px 0 50px 0;
}
.contactHeroFullWidth .heroContainer .contactHeroTitleContainer h1 {
font-size: var(--fs-80);
line-height: var(--lh-80);
}
.contactHeroFullWidth .heroContainer .contactHeroContentContainer .contactHeroContactContainer {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.contactHeroFullWidth .heroContainer .contactHeroContentContainer .contactHeroContactContainer .contactHeroAdresContainer {
margin-bottom: 20px;
}
.contactHeroFullWidth .heroContainer .contactHeroContentContainer .contactHeroContactContainer .contactHeroTelefoonContainer {
margin-bottom: 20px;
}
.contactHeroFullWidth::after {
bottom: -70px;
}
.heroFaqFullWidth::after {
bottom: -70px;
}
.heroStoringFullWidth::after {
bottom: -70px;
}
.heroStoringFullWidth .heroContainer .heroStoringContent {
grid-template-columns: 1fr;
}
.footerFullWidth .footerContainerTop {
grid-template-columns: 1fr 1fr;
grid-template-areas: "fk1 fk1" "fk2 fk3" "fk4 fk4";
}
.footerFullWidth .footerContainerTop .footerKolom1 {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: distribute;
justify-content: space-around;
}
.footerFullWidth .footerContainerBottom {
display: grid !important;
grid-template-columns: 1fr 1fr;
grid-template-areas: "fc2 fc2" "fc1 fc3";
grid-gap: 20px;
}
.footerFullWidth .footerContainerBottom .footerContainerBottomLeft {
grid-area: fc1;
}
.footerFullWidth .footerContainerBottom .footerContainerBottomCenter {
grid-area: fc2;
}
.footerFullWidth .footerContainerBottom .footerContainerBottomCenter p {
text-align: center;
}
.footerFullWidth .footerContainerBottom .footerContainerBottomRight {
grid-area: fc3;
}
.footerFullWidth .footerContainerBottom .footerContainerBottomRight p {
text-align: right;
}
}
@media (max-width: 700px) {
.kolom-1-1 {
grid-template-columns: 1fr;
}
.heroBreadcrumbContainer .breadcrumbLabel {
font-size: 9px !important;
}
.homeHeroFullWidth .homeHeroContentContainer .homeHeroContentContainerBottom {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
.homeHeroFullWidth .homeHeroContentContainer .homeHeroContentContainerBottom .googleReviewContainer {
margin-top: 40px;
}
.homeHeroFullWidth .homeHeroContentContainer .homeHeroContentContainerBottom .googleReviewContainer p {
margin: 0 10px 0 0;
-webkit-transform: translateY(4px);
transform: translateY(4px);
}
.googleReviewContainer {
position: relative;
z-index: 10;
}
.googleReviewContainer .googleLogo {
margin-right: 10px;
}
.googleReviewContainer .googleStars {
margin-right: 10px;
}
.googleReviewContainer p {
margin: 0 10px 0 0;
}
.homeOplossingenFullWidth .homeOplossingFoto {
display: none;
}
.homeOplossingenFullWidth .kolom2 .homeOplossingenContainer p a {
font-size: var(--fs-26);
line-height: var(--lh-30);
}
.homeOplossingenFullWidth::after {
bottom: -110px;
}
.situatieOplossingFullWidth .situatieOplossingContainer h2 {
font-size: var(--fs-32);
line-height: var(--lh-36);
}
.situatieOplossingFullWidth .situatieOplossingContainerBottom {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.oplossingVoorFullWidth .oplossingVoorContainerCenter p {
font-size: var(--fs-32);
line-height: var(--fs-36);
}
.fullScreenQuoteFullWidth .fullScreenQuoteContainer {
grid-template-columns: 1fr;
}
.fullScreenQuoteFullWidth .fullScreenQuoteContainer h2 {
font-size: var(--fs-32);
line-height: var(--lh-36);
}
.adviesGesprekFullWidth {
border-radius: 40px 40px 0 0;
}
.adviesGesprekFullWidth .adviesGesprekContainer .adviesGesprekContainerTop h2 {
font-size: var(--fs-32) !important;
line-height: var(--lh-36);
}
.adviesGesprekFullWidth .adviesGesprekContainer .adviesGesprekContainerTop p {
font-size: var(--fs-26) !important;
line-height: var(--lh-30) !important;
}
.adviesGesprekFullWidth .adviesGesprekContainer .adviesGesprekContainerBottom {
grid-template-columns: 1fr;
}
.homeHeroFullWidth .homeHeroContentContainer .homeHeroContentContainerTop h1 {
font-size: var(--fs-40);
line-height: var(--lh-44);
}
.heroOplossingenFullWidth .heroContainer .heroOplossingenContent h1 {
font-size: var(--fs-40);
line-height: var(--lh-44);
}
.heroOplossingenFullWidth .heroContainer .heroOplossingenButtonContainer {
width: 320px;
}
.heroOplossingenFullWidth .heroContainer .heroOplossingenButtonContainer .buttonOplossingHero::before {
left: 15px;
}
.heroOplossingenFullWidth .oplossingDetailContainer {
min-height: 800px;
}
.heroOplossingenFullWidth .oplossingDetailContainer .oplossingDetailTextContainer {
margin-bottom: 20px !important;
}
.heroOplossingenFullWidth .oplossingDetailContainer .oplossingDetailGeluidContainer {
grid-template-columns: 1fr;
grid-gap: 20px;
max-width: 100%;
padding: 20px;
}
.heroOplossingenFullWidth .oplossingDetailContainer .oplossingDetailBeeldContainer {
grid-template-columns: 1fr;
grid-gap: 20px;
max-width: 100%;
padding: 20px;
}
.heroOplossingenFullWidth .oplossingDetailContainer p {
font-size: var(--fs-26);
line-height: var(--lh-30);
}
.heroOplossingenFullWidth::after {
bottom: -110px;
}
.oplossingSituatieFullWidth h2 {
font-size: var(--fs-32);
line-height: var(--lh-36);
text-align: left;
}
.oplossingSituatieFullWidth .situatieContainer .situatieContainerBottom p {
font-size: var(--fs-26);
line-height: var(--lh-30);
}
.oplossingBedieningFullWidth .oplossingBedieningContainer h2 {
font-size: var(--fs-32);
line-height: var(--lh-36);
}
.oplossingBedieningFullWidth .oplossingBedieningContainer .bedieningOptiesContainer {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.oplossingBedieningFullWidth .oplossingBedieningContainer .bedieningOptiesContainer .kolom {
padding: 20px 20px 20px 20px !important;
}
.fullScreenQuoteBedieningFullWidth .fullScreenQuoteBedieningContainer {
grid-template-columns: 1fr;
}
.fullScreenQuoteBedieningFullWidth .fullScreenQuoteBedieningContainer h2 {
font-size: var(--fs-32);
line-height: var(--lh-36);
}
.faqItemContainer .faqItemContainerTop .faqQuestion {
font-size: var(--fs-26);
line-height: var(--lh-30);
}
.heroBeeldGeluidFullWidth .heroBeeldGeluidContent {
grid-template-columns: 1fr;
}
.heroBeeldGeluidFullWidth .heroBeeldGeluidContent .heroBeeldGeluidContentKolom {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.heroBeeldGeluidFullWidth .heroBeeldGeluidContent .heroBeeldGeluidContentKolom .heroBeeldGeluidContentKolomLeft {
margin-bottom: 20px;
}
.heroBeeldGeluidFullWidth .heroBeeldGeluidContent .heroBeeldGeluidContentKolom .heroBeeldGeluidContentKolomRight h1 {
font-size: var(--fs-40);
}
.heroBeeldGeluidFullWidth .heroBeeldGeluidContent .heroBeeldGeluidContentKolom .heroBeeldGeluidContentKolomRight .heroBeeldGeluidMerkenContainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.heroBeeldGeluidFullWidth .heroBeeldGeluidContent .heroBeeldGeluidContentKolom .heroBeeldGeluidContentKolomRight .heroBeeldGeluidMerkenContainer .beeldGeluidBrandIcon {
margin-bottom: 10px;
}
.heroBeeldGeluidFullWidth::after {
bottom: -110px;
}
.galerijFullWidth .galerijContainer .galerijSlider .owl-nav .owl-prev {
width: 30px;
height: 30px;
border-radius: 15px;
top: -100px;
left: -15px;
}
.galerijFullWidth .galerijContainer .galerijSlider .owl-nav .owl-next {
width: 30px;
height: 30px;
border-radius: 15px;
top: -100px;
right: -15px;
}
.beeldGeluidOplossingenFullWidth .beeldGeluidOplossingenContainer .beeldGeluidOplossingenItem {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.beeldGeluidOplossingenFullWidth .beeldGeluidOplossingenContainer .beeldGeluidOplossingenItem .kolom:first-child {
margin: 20px 0;
}
.projectenHeroFullWidth {
height: auto;
padding-bottom: 0;
}
.projectenHeroFullWidth .heroContainer .projectHeroTitleContainer h1 {
font-size: var(--fs-40);
line-height: var(--lh-44);
}
.projectenGridFullWidth .projectenGridContainer {
grid-template-columns: 1fr;
grid-gap: 20px;
grid-auto-rows: 360px;
}
.projectenGridFullWidth .projectenGridContainer .projectGridItem h3 {
font-size: var(--fs-20);
line-height: var(--lh-24);
}
.projectHeroFullWidth::after {
bottom: -110px;
}
.projectHeroFullWidth .heroContainer h1 {
font-size: var(--fs-40);
line-height: var(--lh-44);
}
.projectOmschrijvingFullWidth .projectOmschrijvingContainer p {
font-size: var(--fs-20);
line-height: var(--lh-30);
}
.projectVoordelenFullWidth .projectVoordelenContainer .projectVoordelenContainerTop h2 {
font-size: var(--fs-40);
line-height: var(--lh-52);
}
.projectVoordelenFullWidth .projectVoordelenContainer .projectVoordelenContainerBottom .voordeelLijst {
grid-template-columns: 1fr;
}
.projectGalerijFullWidth {
margin-bottom: 0;
}
.contentFullWidth {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding: 20px;
}
.contentFullWidth .normalContainer {
padding: 0;
}
.contentFullWidth .kolom-1-1 {
grid-template-columns: 1fr;
margin-bottom: 20px;
padding: 0;
}
.contentFullWidth img {
position: relative !important;
left: 0 !important;
width: 100% !important;
max-width: none !important;
height: auto;
border-radius: 15px !important;
}
.projectProductenFullWidth .projectProductContainerBottom {
grid-template-columns: 1fr;
}
.projectProductenFullWidth .projectProductContainerBottom .productItem {
margin-bottom: 40px;
}
.projectProductenFullWidth .projectProductContainerBottom .productItem img {
margin-bottom: 20px;
}
.heroOverOnsFullWidth::after {
bottom: -30px;
}
.heroOverOnsFullWidth .heroContainer h1 {
font-size: var(--fs-40);
line-height: var(--lh-44);
}
.beeldGeluidSliderFullWidth .beeldGeluidSliderItem {
grid-template-columns: 1fr;
padding: 40px 20px;
}
.beeldGeluidSliderFullWidth .beeldGeluidSliderItem .kolom2 {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.overOnsFotoSliderFullWidth {
margin-bottom: 20px;
}
.overOnsFotoSliderFullWidth .overOnsFotoSlider .owl-dots .owl-dot {
width: 25px;
}
.contactHeroFullWidth .heroContainer .contactHeroTitleContainer h1 {
font-size: var(--fs-40);
line-height: var(--lh-44);
}
.contactHeroFullWidth .heroContainer .contactHeroContentContainer .contactHeroContactContainer .adviesWaarde a {
font-size: var(--fs-26);
line-height: var(--lh-30);
}
.contactHeroFullWidth::after {
bottom: -30px;
}
.contactFormFullWidth .normalContainer .nf-form-content nf-fields-wrap {
grid-template-columns: 1fr;
grid-template-areas: "sf1" "sf2" "sf3" "sf4" "sf5" "sf6" "sf7";
grid-gap: 20px;
}
.heroFaqFullWidth::after {
bottom: -110px;
}
.heroFaqFullWidth .heroContainer h1 {
font-size: var(--fs-40);
line-height: var(--lh-44);
}
.heroStoringFullWidth::after {
bottom: -110px;
}
.heroStoringFullWidth .heroContainer .heroStoringTitel h1 {
font-size: var(--fs-40);
line-height: var(--lh-44);
}
.heroStoringFullWidth .heroContainer .heroStoringContent .heroStoringContentKolomTop {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.heroStoringFullWidth .heroContainer .heroStoringContent .heroStoringContentKolomTop .heroStoringButton {
margin: 0 0 20px 0;
}
.heroStoringFullWidth .normalContainer .nf-form-content nf-fields-wrap {
grid-template-columns: 1fr !important;
grid-template-areas: "sf1" "sf2" "sf3" "sf4" "sf5" "sf6" "sf7" !important;
grid-gap: 20px !important;
}
.footerFullWidth .footerContainerTop {
grid-template-columns: 1fr;
grid-template-areas: none;
padding-bottom: 0 !important;
}
.footerFullWidth .footerContainerTop .footerKolom1 {
grid-area: unset;
}
.footerFullWidth .footerContainerTop .footerKolom2 {
grid-area: unset;
}
.footerFullWidth .footerContainerTop .footerKolom3 {
grid-area: unset;
}
.footerFullWidth .footerContainerTop .footerKolom4 {
grid-area: unset;
margin-bottom: 20px;
}
.footerFullWidth .footerContainerTop .footerKolom4 .footerContactContainerTop {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.footerFullWidth .footerContainerTop .footerKolom4 .footerContactContainerTop .footerButtonBel {
margin-right: 0 !important;
}
.footerFullWidth .footerContainerBottom {
grid-template-columns: 1fr;
grid-template-areas: none;
}
.footerFullWidth .footerContainerBottom .footerContainerBottomLeft {
grid-area: unset;
}
.footerFullWidth .footerContainerBottom .footerContainerBottomLeft p {
text-align: center;
}
.footerFullWidth .footerContainerBottom .footerContainerBottomCenter {
grid-area: unset;
}
.footerFullWidth .footerContainerBottom .footerContainerBottomCenter p {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.footerFullWidth .footerContainerBottom .footerContainerBottomCenter p a {
margin: 0 0 10px 0;
}
.footerFullWidth .footerContainerBottom .footerContainerBottomRight {
grid-area: unset;
}
.footerFullWidth .footerContainerBottom .footerContainerBottomRight p {
text-align: center;
}
}