html { touch-action: manipulation; } @font-face { font-family: 'FontHead'; src: url('../fonts/NoctisHeavy.eot'); src: url('../fonts/NoctisHeavy.eot') format('embedded-opentype'), url('../fonts/NoctisHeavy.woff2') format('woff2'), url('../fonts/NoctisHeavy.woff') format('woff'), url('../fonts/NoctisHeavy.ttf') format('truetype'), url('../fonts/NoctisHeavy.svg#NoctisHeavy') format('svg'); } @font-face { font-family: 'FontRegularItalic'; src: url('../fonts/MarkSimonsonProximaNovaRegularItalic.eot'); src: url('../fonts/MarkSimonsonProximaNovaRegularItalic.eot') format('embedded-opentype'), url('../fonts/MarkSimonsonProximaNovaRegularItalic.woff2') format('woff2'), url('../fonts/MarkSimonsonProximaNovaRegularItalic.woff') format('woff'), url('../fonts/MarkSimonsonProximaNovaRegularItalic.ttf') format('truetype'), url('../fonts/MarkSimonsonProximaNovaRegularItalic.svg#MarkSimonsonProximaNovaRegularItalic') format('svg'); } @font-face { font-family: 'FontSemibold'; src: url('../fonts/MarkSimonsonProximaNovaSemibold.eot'); src: url('../fonts/MarkSimonsonProximaNovaSemibold.eot') format('embedded-opentype'), url('../fonts/MarkSimonsonProximaNovaSemibold.woff2') format('woff2'), url('../fonts/MarkSimonsonProximaNovaSemibold.woff') format('woff'), url('../fonts/MarkSimonsonProximaNovaSemibold.ttf') format('truetype'), url('../fonts/MarkSimonsonProximaNovaSemibold.svg#MarkSimonsonProximaNovaSemibold') format('svg'); } @font-face { font-family: 'FontBold'; src: url('../fonts/MarkSimonsonProximaNovaBold.eot'); src: url('../fonts/MarkSimonsonProximaNovaBold.eot') format('embedded-opentype'), url('../fonts/MarkSimonsonProximaNovaBold.woff2') format('woff2'), url('../fonts/MarkSimonsonProximaNovaBold.woff') format('woff'), url('../fonts/MarkSimonsonProximaNovaBold.ttf') format('truetype'), url('../fonts/MarkSimonsonProximaNovaBold.svg#MarkSimonsonProximaNovaBold') format('svg'); } *:focus {outline:0;} * { -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; } a:hover{ -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; } :root { --fontFamilyBold: "FontBold", serif; --fontFamilySemiBold: "FontSemibold", serif; --fontFamilyItalic: "FontRegularItalic", serif; --fontFamilyHead: "FontHead", serif; --wrapper: 1165px; --wrapperSmall: 965px; --wrapperSmallPage: 730px; --gridHapLeft: 60px; --fontSizeHomeHeader: 80px; --fontSizePageTitleBig: 50px; --fontSizeRubriek: 30px; --fontSizeOnderwerpSlider: 32px; --fontSizeNav: 22px; --fontSizeSubkop: 22px; --fontSizeIntro: 18px; --fontSizeBody: 18px; --fontSizeButton: 18px; --fontSizeKleineLeestekst: 18px; --fontSizeSmall: 15px; --fontSizeBeoordeling: 13px; --colorValeoBlue: rgb(3,87,155); --colorValeoGreen: rgb(0,171,173); --colorValeoZalm: rgb(255,211,173); --colorValeoGreen20: rgba(203,235,236,1); --colorValeoGreen10: rgba(229,245,245,1); --colorWhite: rgb(255,255,255); --colorError: rgb(255,0,0); --colorSucceed: rgb(62, 124, 34); --borderSize: 10px; --navHeight:100px; --pageHeaderGreenHeight: 150px; --pageHeaderGreenHeightFixed: 44px; --pageinPageNav: 44px; --pageHeaderHeight: 470px; /* greenHeight (150) + 470 (this) = headerHomeHeight */ --headerHomeHeight: 620px; --circleDiameterBeoordeling: 50px; --circleDiameter: 40px; --buttonHeight: 40px; --tekstVlakImage: 370px; --symptoomHeight: 220px; --symptoomIconHeight: 170px; --onderwerpHeight: 370px; --onderwerpGradientBG: 420px; --onderwerpMarginTop: -280px; --mapsHeight: 830px; --positionMenuAndHeadlinesHomeHeader: 385px; --snelmenuWidth: 360px; --marginBetween: 40px; --padding80Top: 80px; --padding80: 80px 0; --padding40: 40px 0; } .gradientLeftToRight{ /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#00abad+0,00abad+100&0.5+0,0+100 */ background: -moz-linear-gradient(left, rgba(0,171,173,0.5) 0%, rgba(0,171,173,0) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(0,171,173,0.5) 0%,rgba(0,171,173,0) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(0,171,173,0.5) 0%,rgba(0,171,173,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8000abad', endColorstr='#0000abad',GradientType=1 ); /* IE6-9 */ } .gradientRightToLeft{ /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#00abad+0,00abad+100&0.5+0,0+100 */ background: -moz-linear-gradient(left, rgba(0,171,173,0) 0%, rgba(0,171,173,0.5) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(0,171,173,0) 0%,rgba(0,171,173,0.5) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(0,171,173,0) 0%,rgba(0,171,173,0.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0000abad', endColorstr='#8000abad',GradientType=1 ); /* IE6-9 */ } .gradientBottomTop{ /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#00abad+0,2c4e64+100&0+0,0.6+100 */ background: -moz-linear-gradient(top, rgba(0,171,173,0.2) 0%, rgba(44,78,100,0.6) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(0,171,173,0.2) 0%,rgba(44,78,100,0.6) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(0,171,173,0.2) 0%,rgba(44,78,100,0.6) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0000abad', endColorstr='#992c4e64',GradientType=0 ); /* IE6-9 */ } .hamburger{ display: none; } iframe{ max-width: 100% !important; } *:focus {outline:0;} figure, header, section, nav, p { margin: 0; } p{ margin-bottom: 1em; line-height: 1.5em; } body { color: var(--colorValeoBlue); -webkit-font-smoothing: antialiased; margin: 0; padding: 0; background-color: var(--colorWhite); font-size: var(--fontSizeBody); font-family: var(--fontFamilySemiBold); overflow-x: hidden; } body.default{ padding: var(--navHeight) 0 0 0; } body.home{ background-color: var(--colorValeoGreen10); } figure.default img{ max-width: 100%; max-height: 100%; width: auto; height: auto; } h1, .h1 { color: inherit; font-weight: 100; } h2, .h2 { color: inherit; font-weight: 100; } .clear { clear: both; } .floatRight{ float: right; } .txtAlignRight { text-align: right; } .txtAlignCenter { text-align: center; } .noMargin { margin: 0 !important; } .center{ position: relative; margin: 0 auto; width: 100%; } a { cursor: pointer; text-decoration: underline; color: var(--colorValeoBlue); } a:hover { cursor: pointer; color: var(--colorValeoGreen); text-decoration: underline; } .wrapper{ max-width: var(--wrapper); position: relative; margin: 0 auto; } .wrapper.small{ max-width: var(--wrapperSmall); } .wrapper.smallPage{ max-width: var(--wrapperSmallPage); } .flex{ display: flex; } .flex.top{ align-items: start; justify-content: space-between; } .flex.center{ align-items: center; } .succeed{ color: var(--colorValeoGreen); } .error{ color: var(--colorError); } .hideDesktop{ display: none !important; } /* START CUSTOM CSS */ .nav__top{ position: fixed; top: 0; z-index: 100; width: 100%; height: var(--navHeight); background-color: var(--colorWhite); text-align: center; border-bottom: 1px solid var(--colorValeoGreen20); } nav.nav__inPageNav{ position: relative; height: var(--pageinPageNav); width: 100%; background-color: var(--colorValeoGreen10); border-top: 1px solid var(--colorValeoGreen20); border-bottom: 1px solid var(--colorValeoGreen20); z-index: 50; box-sizing: border-box; } body.fixed nav.nav__inPageNav{ position: fixed; left: 0; top: calc(var(--navHeight) + var(--pageHeaderGreenHeightFixed)); } nav.nav__inPageNav ul, nav.nav__inPageNav ul li{ margin: 0; padding: 0; list-style: none; display: inline-block; position: relative; } nav.nav__inPageNav ul li a{ text-decoration: none; margin: 0 20px 0 0 ; line-height: var(--pageinPageNav); } .brand__logo{ width: 170px; height: 170px; position: absolute; top: 10px; left: 35px; z-index: 9; } body.fixed .brand__logo{ width: 80px; height: 80px; } .ul__mainmenu{ display: inline-block; list-style: none; padding: 0; margin: 0; } .ul__mainmenu li{ list-style: none; display: inline-block; padding: 0; margin: 0; } .ul__mainmenu li a{ font-family: var(--fontFamilySemiBold); font-size: var(--fontSizeNav); line-height: var(--navHeight); text-decoration: none; padding: 0px 20px; display: inline-block; } .nav__right{ position: absolute; right: 35px; top: 10px; height: calc(var(--navHeight) - 20px); text-align: right; } .nav__right .contact{ line-height: calc(var(--navHeight) - 20px); font-size: var(--fontSizeSmall); text-decoration: none; padding: 0px 20px; } .circle{ position: relative; display: inline-block; vertical-align: middle; height:var(--circleDiameter); width: var(--circleDiameter); border-radius: var(--circleDiameter); -webkit-border-radius: var(--circleDiameter); border: 1px solid var(--colorValeoBlue); } .circle:before{ position: absolute; content: ' '; left: 0; top: 0; height:var(--circleDiameter); width: var(--circleDiameter); background-size: calc(var(--circleDiameter) / 2); background-repeat: no-repeat; background-position: center; } .icon-call:before{ background-image: url('../images/icon-call.svg'); } .icon-epd:before{ background-image: url('../images/icon-epd.svg'); } .icon-email:before{ background-image: url('../images/icon-mail.svg'); } .icon-facebook:before{ background-size: calc(var(--circleDiameter) / 2.3); background-image: url('../images/icon-facebook.svg'); } .icon-review:before{ background-image: url('../images/icon-like.svg'); } header.header__home{ position: relative; width: 100%; height: var(--headerHomeHeight); } header.header__home img{ position: absolute; object-position: center; object-fit: cover; left: 0; width: 100%; height: var(--headerHomeHeight); top: 0; z-index: 1; } header.header__home img.mobile{ display: none; } header.header__home .headerLines{ position: absolute; z-index: 5; top: var(--positionMenuAndHeadlinesHomeHeader); left: 0; } .headerLine1{ font-size: var(--fontSizeHomeHeader); font-family: var(--fontFamilySemiBold); color: var(--colorWhite); margin: 0; line-height: var(--fontSizeHomeHeader); } .headerLine2{ font-size: var(--fontSizeRubriek); line-height: var(--fontSizeRubriek); font-family: var(--fontFamilyHead); color: var(--colorWhite); margin: 0; } .snelmenu{ position: absolute; z-index: 5; top: var(--positionMenuAndHeadlinesHomeHeader); right: 0; padding: 25px 10px 20px 10px; min-height: calc(var(--headerHomeHeight) - var(--positionMenuAndHeadlinesHomeHeader)); box-sizing: border-box; width: var(--snelmenuWidth); background-color: var(--colorWhite); border: 1px solid var(--colorValeoGreen20); } .rubriekHead{ color: var(--colorValeoBlue); font-size: var(--fontSizeRubriek); font-family: var(--fontFamilyHead); } .ul__snelmenu{ list-style: none; margin: 0 10px; padding: 0; } .ul__snelmenu li{ list-style: none; margin: 0; padding: 0; display: block; } .ul__snelmenu li a{ display: block; line-height: var(--buttonHeight); border-top: 1px solid var(--colorValeoGreen20); text-decoration: none; font-size: var(--fontSizeButton); } .ul__snelmenu li:last-child a{ border-bottom: 1px solid var(--colorValeoGreen20); } .textHead{ font-size: var(--fontSizeSubkop); font-family: var(--fontFamilyBold); } .div__beoordeling{ position: relative; width: 100%; background-color: var(--colorWhite); height: 80px; } .cijfer{ margin: 15px 0; text-align: center; font-size: var(--fontSizeSubkop); font-family: var(--fontFamilyBold); width: var(--circleDiameterBeoordeling); height: var(--circleDiameterBeoordeling); border-radius: var(--circleDiameterBeoordeling); -webkit-border-radius: var(--circleDiameterBeoordeling); display: inline-block; line-height: var(--circleDiameterBeoordeling); background-color: var(--colorValeoGreen20); vertical-align: middle; } .beoordeling{ margin: 15px 0 15px 15px; font-size: var(--fontSizeBeoordeling); font-family: var(--fontFamilyItalic); vertical-align: middle; } article.home__intro{ width: 100%; padding: var(--padding80); position: relative; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,e7f6f6+39 */ background: rgb(255,255,255); /* Old browsers */ background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(231,246,246,1) 39%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(231,246,246,1) 39%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(231,246,246,1) 39%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e7f6f6',GradientType=0 ); /* IE6-9 */ } article.home__intro h1, .page__header h1{ font-family: var(--fontFamilyHead); font-size: var(--fontSizeRubriek); color: var(--colorValeoBlue); margin: 0 0 1em 0; } section.page__header{ height: var(--pageHeaderGreenHeight); background-color: var(--colorValeoGreen10); position: relative; width: 100%; } body.fixed section.page__header{ position: fixed; width: 100%; top: var(--navHeight); height: var(--pageHeaderGreenHeightFixed); left: 0; z-index: 90; } section.page__header .pageHead{ float: left; font-size: var(--fontSizePageTitleBig); color: var(--colorValeoGreen); font-family: var(--fontFamilySemiBold); margin: 30px 0 0 0; width: 100%; } body.fixed section.page__header .pageHead{ display: none; } section.page__header .breadcrums{ float: left; margin: 0; width: 100%; line-height: var(--fontSizeSmall); font-size: var(--fontSizeSmall); color: var(--colorValeoBlue); font-family: var(--fontFamilyItalic); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.fixed section.page__header .breadcrums{ line-height: var(--pageHeaderGreenHeightFixed); margin: 0; } .breadcrums{ color: var(--colorValeoBlue); } .breadcrums a{ text-decoration: none; color: var(--colorValeoGreen) } header.page__header{ height: var(--pageHeaderHeight); background-color: var(--colorValeoGreen20); width: 100%; position: relative; margin: 0 0 var(--marginBetween) 0; } header.page__header .pageHeaderImage { position: absolute; right: 0; top: 0; width: 50%; overflow: hidden; height: var(--pageHeaderHeight); } header.page__header .pageHeaderImage .hover{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 11; } header.page__header .pageHeaderImage img{ position: relative; z-index: 10; } header.page__header .wrapHalf{ position: absolute; left: 0; top: 0; width: calc(50% - 20px); height: var(--pageHeaderHeight); } header.page__header .smallPage h1{ display: block; padding-top: 50px; } header.page__header .smallPage figure{ width: 100%; margin: 30px 0 0 0; box-sizing: border-box; border: var(--borderSize) solid var(--colorWhite); } article.article__tekstVlak{ position: relative; display: flex; align-items: center; box-sizing: border-box; margin-left: calc((50% - var(--wrapper) / 2) + var(--gridHapLeft)); width: calc(100% - (50% - var(--wrapper) / 2) - var(--gridHapLeft)); margin-bottom: var(--marginBetween); } article.article__tekstVlak .tekstVlakImage{ height: var(--tekstVlakImage); width: var(--tekstVlakImage); box-sizing: border-box; border: var(--borderSize) solid var(--colorValeoGreen10); } article.article__tekstVlak.afb__left .tekstVlakImage{ margin-right: 30px; } article.article__tekstVlak.afb__right .tekstVlakImage{ margin-left: 30px; } article.article__tekstVlak.bgLight{ background-color: var(--colorValeoGreen10); padding: 25px; } article.article__tekstVlak.bgLight .tekstVlakImage{ border-color: var(--colorWhite); margin-right: 20px; } article.article__tekstVlak.bgLight.afb__right .tekstVlakImage{ margin-right: 0; } article.article__tekstVlak .article__content{ width: calc(var(--wrapper) - var(--tekstVlakImage) - var(--gridHapLeft) - 30px); } article.article__full{ width: 100%; position: relative; background-color: var(--colorWhite); padding: var(--padding80); /*margin-top: 120px;*/ } section.section__onderwerpSlider{ position: relative; margin-left: calc((50% - var(--wrapper) / 2) + var(--gridHapLeft)); width: calc(100% - (50% - var(--wrapper) / 2) - var(--gridHapLeft)); margin-bottom: var(--marginBetween); overflow: hidden; padding: var(--padding80); } section.section__onderwerpSlider .bgOnderwerpSlider{ display: none; top: var(--onderwerpGradientBG); left: 0; position: absolute; width: 100%; height: var(--onderwerpHeight); background-color: var(--colorValeoGreen20); } section.section__onderwerpSlider.marginTopMinus{ margin-top: var(--onderwerpMarginTop); } .bgOnderwerp.gradientLeftToRight{ position: relative; width: 100%; height: var(--onderwerpGradientBG); } .bgOnderwerp.gradientLeftToRight .usp{ position: absolute; top: 60px; left: calc((50% - var(--wrapper) / 2) + var(--gridHapLeft)); } .bgOnderwerp.gradientLeftToRight .usp span{ display: inline-block; position: relative; padding-left: 30px; margin-right: 50px; } .bgOnderwerp.gradientLeftToRight .usp span:before{ content: ' '; height: 20px; width: 25px; position: absolute; left: 0; top: 0; background-image: url('../images/icon-check.svg'); background-repeat: no-repeat; background-position: center; } .slider__onderwerp{ width: 100%; position: relative; padding: 0 0 40px 0; } .slider__onderwerp .slider{ position: relative; width: 100%; height: var(--onderwerpHeight); } .slider__onderwerp .slider .slider__item, .teamSlider{ height: var(--onderwerpHeight); width: var(--onderwerpHeight); margin-right: 30px; box-sizing: border-box; border: var(--borderSize) solid var(--colorValeoGreen20); overflow: hidden; float: left; position: relative; } .slider__onderwerp .slider .slider__item.whiteBorder{ border: var(--borderSize) solid var(--colorWhite) !important; } .slider__onderwerp .slider .slider__item img, .teamSlider img{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1 } .slider__onderwerp .slider .slider__item:hover .hover, .teamSlider:hove .hover{ opacity: 0.5; cursor: pointer; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; } .slider__onderwerp .slider .slider__item .hover, .teamSlider .hover{ z-index: 2; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .slider__onderwerp .slider .slider__item .onderwerp__title, .teamSlider .onderwerp__title{ position: absolute; font-size: var(--fontSizeOnderwerpSlider); font-family: var(--fontFamilySemiBold); color: var(--colorWhite); bottom: 10px; left: 10px; width: calc(100% - 20px); z-index: 3; } .arrowLeft, .arrowRight{ height: 20px; width: 12px; position: absolute; display: block; bottom: 0; right: 30px; background-image: url('../images/arrowRight.svg'); background-repeat: no-repeat; background-position: center; z-index: 10; } .arrowLeft:hover, .arrowRight:hover{ cursor: pointer; } .arrowLeft{ right: 60px; background-image: url('../images/arrowLeft.svg'); } section.section__syptoomSlider{ position: relative; margin-left: calc((50% - var(--wrapper) / 2) + var(--gridHapLeft)); width: calc(100% - (50% - var(--wrapper) / 2) - var(--gridHapLeft)); margin-bottom: var(--marginBetween); overflow: hidden; padding: 20px 0 60px 0; background-color: var(--colorWhite); z-index: 3; } section.section__syptoomSlider.bgLight{ background-color: var(--colorValeoGreen10); } .slider__symptomen{ width: 100%; position: relative; padding: 0; } .section__syptoomSlider .rubriekHead{ margin-left: 20px; } .slider__symptomen .slider{ position: relative; width: 100%; padding: 0 0 0px 20px; height: var(--symptoomHeight); border-bottom: 1px solid var(--colorValeoGreen10); } .slider__symptomen .slider .slider__item{ height: var(--symptoomHeight); margin-right: 30px; box-sizing: border-box; overflow: hidden; text-align: center; } .slider__symptomen .slider .slider__item img{ width: auto; height: var(--symptoomIconHeight); } .slider__symptomen .slider a{ text-decoration: none; } .slider__symptomen .slider .slider__item .symptoom__title{ font-size: var(--fontSizeSmall); margin-top: 20px; font-family: var(--fontFamilySemiBold); text-decoration: none; } .slider__symptomen .arrowLeft, .slider__symptomen .arrowRight{ bottom: -40px; } .slider__symptomen .symptoomButton{ bottom: -50px; left: 20px; position: absolute; } .section__ervaringSlider{ position: relative; width: 100%; margin-bottom: var(--marginBetween); padding: var(--padding80); background-color: var(--colorValeoGreen10); } .section__ervaringSlider .slider__ervaringen{ width: 100%; padding-bottom: 40px; height: var(--onderwerpHeight); position: relative; } body.home .section__ervaringSlider .gradientRightToLeft{ position: absolute; right: 0; top: -280px; height: calc(280px + 100% + 40px); /* 40 = /80 = padding */ width: 100%; z-index: 2; } .section__ervaringSlider *{ z-index: 3; } .section__ervaringSlider .rubriekHead .cijfer{ margin-left: 20px; } body.home .section__ervaringSlider{ background-color: transparent; } .section__ervaringSlider .rubriekHead{ margin-left: calc((50% - var(--wrapper) / 2) + var(--gridHapLeft)); } .section__ervaringSlider .slider{ position: relative; padding: 0; height: var(--onderwerpHeight); margin-left: calc((50% - var(--wrapper) / 2) + var(--gridHapLeft)); width: calc(100% - (50% - var(--wrapper) / 2) - var(--gridHapLeft)); } .section__ervaringSlider .teamSliderHolder{ position: relative; padding: 0; margin-left: calc((50% - var(--wrapper) / 2) + var(--gridHapLeft)); width: calc(100% - (50% - var(--wrapper) / 2) - var(--gridHapLeft)); } .section__ervaringSlider .slider .slider__item{ height: var(--onderwerpHeight);; width: var(--onderwerpHeight);; padding: 10px 20px; margin-right: 30px; box-sizing: border-box; background-color: var(--colorWhite); overflow: hidden; } .section__ervaringSlider .slider .slider__item p{ font-size: var(--fontSizeSmall); } .section__ervaringSlider .slider .slider__item strong{ font-size: var(--fontSizeBody) !important; } section.section__maps{ position: relative; padding-top: var(--padding80Top); width: 100%; background-color: var(--colorWhite); } section.section__maps #maps{ height: var(--mapsHeight); width: 100%; } section.section__maps .maps__title{ font-family: var(--fontFamilyBold); } .article__predef{ padding: var(--padding80); width: 100%; } .article__predef .wrapper{ background-color: var(--colorWhite); box-sizing: border-box; padding: 45px 65px; } .section__behandelingen{ width: 100%; position: relative; padding: var(--padding80); background-color: var(--colorWhite); } .section__behandelingen .frame{ background-color: var(--colorValeoGreen20); margin-left: calc((50% - var(--wrapper) / 2) + var(--gridHapLeft)); width: calc(100% - (50% - var(--wrapper) / 2) - var(--gridHapLeft)); box-sizing: border-box; padding: 50px; } .section__behandelingen .frame .afbakering{ width: calc(100% - (50% - var(--wrapper) / 2) - var(--gridHapLeft) - 200px); } .section__behandelingen .behandelItem{ box-sizing: border-box; background-color: var(--colorWhite); padding: 10px; width: 100%; float: left; clear: both; margin-bottom: 10px; } .section__behandelingen .behandelItem img{ position: relative; float: left; height: var(--onderwerpHeight); width: var(--onderwerpHeight); } .section__behandelingen .behandelItem .textFrame{ position: relative; float: left; width: calc(100% - var(--onderwerpHeight) - 80px); margin: 40px; } .section__form{ width: var(--wrapperSmallPage); } .section__form label{ width: 100%; display: block; font-size: var(--fontSizeSmall); } .section__form input, .section__form textarea, .section__form select{ box-sizing: border-box; height: var(--buttonHeight); background-color: var(--colorValeoGreen20); border: 0; font-size: var(--fontSizeSmall); color: var(--colorValeoBlue); padding: 0px 20px; line-height: var(--buttonHeight); width: 100%; margin-bottom: 20px; } .section__form textarea{ height: 140px; } footer{ width: 100%; position: relative; background-color: var(--colorWhite); } footer .wrapper.cta{ padding: var(--padding80); } footer .wrapper.cta .item{ font-size: var(--fontSizeSubkop); } footer .wrapper.cta .item a{ text-decoration: none; } footer .wrapper.cta .item .circle{ margin-right: 10px; } footer .footer__adresses{ width: 100%; padding: var(--padding80); } footer .footer__adresses a{ text-decoration: none; } footer .footer__adresses .item{ display: inline-block; width: 200px; } footer .footer__adresses .item .head{ font-size: var(--fontSizeSubkop); font-family: var(--fontFamilyBold); margin: 0; } .endline{ width: 100%; padding: var(--padding40); background-color: var(--colorWhite); } .endline p{ font-size: var(--fontSizeSmall); } .endline p a{ text-decoration: none; } .button{ height: var(--buttonHeight); line-height: var(--buttonHeight); font-size: var(--fontSizeButton); background-color: var(--colorValeoZalm); border-radius: 20px; -webkit-border-radius: 20px; display: inline-block; color: var(--colorValeoBlue); text-decoration: none; padding: 0px 16px; } .button:hover{ text-decoration: none; } .scoreForm{ background-color: var(--colorValeoGreen10); padding: 20px; display: block; position: relative; } .scoreForm .scoreVraag{ border-top: 1px solid var(--colorValeoGreen); margin-top: 20px; font-family: var(--fontFamilyBold); font-size: var(--fontSizeIntro); } .scoreForm label{ font-family: var(--fontFamilySemiBold); font-size: var(--fontSizeBody); margin-right: 20px; } @media screen and (max-width: 1200px){ :root { --wrapper: 960px; --wrapperSmall: 780px; --wrapperSmallPage: 780px; --gridHapLeft: 60px; --fontSizeHomeHeader: 80px; --fontSizePageTitleBig: 50px; --fontSizeRubriek: 30px; --fontSizeOnderwerpSlider: 32px; --fontSizeNav: 22px; --fontSizeSubkop: 22px; --fontSizeIntro: 18px; --fontSizeBody: 18px; --fontSizeButton: 18px; --fontSizeKleineLeestekst: 18px; --fontSizeSmall: 15px; --fontSizeBeoordeling: 13px; --navHeight:100px; --pageHeaderGreenHeight: 150px; --pageHeaderGreenHeightFixed: 44px; --pageinPageNav: 44px; --pageHeaderHeight: 470px; /* greenHeight (150) + 470 (this) = headerHomeHeight */ --headerHomeHeight: 410px; --circleDiameterBeoordeling: 50px; --circleDiameter: 40px; --buttonHeight: 40px; --tekstVlakImage: 370px; --symptoomHeight: 220px; --symptoomIconHeight: 170px; --onderwerpHeight: 370px; --onderwerpGradientBG: 420px; --onderwerpMarginTop: -280px; --mapsHeight: 640px; --positionMenuAndHeadlinesHomeHeader: 250px; --snelmenuWidth: 360px; --marginBetween: 40px; --padding80Top: 80px; --padding80: 80px 0; --padding40: 40px 0; } .brand__logo{ width: 110px; height: 110px; } } @media screen and (max-width: 976px){ :root { --wrapper: 768px; --wrapperSmall: 768px; --wrapperSmallPage: 768px; --gridHapLeft: 0px; --fontSizeHomeHeader: 50px; --fontSizePageTitleBig: 50px; --fontSizeRubriek: 26px; --fontSizeOnderwerpSlider: 22px; --fontSizeNav: 18px; --fontSizeSubkop: 15px; --fontSizeIntro: 16px; --fontSizeBody: 15px; --fontSizeButton: 14px; --fontSizeKleineLeestekst: 18px; --fontSizeSmall: 15px; --fontSizeBeoordeling: 13px; --navHeight:75px; --pageHeaderGreenHeight: 150px; --pageHeaderGreenHeightFixed: 44px; --pageinPageNav: 44px; --pageHeaderHeight: 470px; /* greenHeight (150) + 470 (this) = headerHomeHeight */ --headerHomeHeight: 360px; --circleDiameterBeoordeling: 50px; --circleDiameter: 40px; --buttonHeight: 40px; --tekstVlakImage: 240px; --symptoomHeight: 220px; --symptoomIconHeight: 170px; --onderwerpHeight: 240px; --onderwerpGradientBG: 420px; --onderwerpMarginTop: -280px; --mapsHeight: 420px; --positionMenuAndHeadlinesHomeHeader: 230px; --snelmenuWidth: 320px; --marginBetween: 40px; --padding80Top: 80px; --padding80: 80px 0; --padding40: 40px 0; } footer .footer__adresses .item{ width: calc(var(--wrapper) / 4); } } @media screen and (max-width: 768px){ .hideDesktop{ display: inline-block !important; } .hideMobile{ display: none !important; } :root { --wrapper: calc(100% - 40px); --wrapperSmall: calc(100% - 40px); --wrapperSmallPage: calc(100% - 40px); --gridHapLeft: 0px; --fontSizeHomeHeader: 38px; --fontSizePageTitleBig: 32px; --fontSizeRubriek: 22px; --fontSizeOnderwerpSlider: 22px; --fontSizeNav: 18px; --fontSizeSubkop: 15px; --fontSizeIntro: 16px; --fontSizeBody: 15px; --fontSizeButton: 14px; --fontSizeKleineLeestekst: 18px; --fontSizeSmall: 15px; --fontSizeBeoordeling: 13px; --borderSize: 5px; --navHeight:75px; --pageHeaderGreenHeight: 80px; --pageHeaderGreenHeightFixed: 44px; --pageinPageNav: 44px; --pageHeaderHeight: 470px; /* greenHeight (150) + 470 (this) = headerHomeHeight */ --headerHomeHeight: 320px; --circleDiameterBeoordeling: 50px; --circleDiameter: 40px; --buttonHeight: 40px; --tekstVlakImage: calc(100vw - 40px); --symptoomHeight: 180px; --symptoomIconHeight: 120px; --onderwerpHeight: 240px; --onderwerpGradientBG: 220px; --onderwerpMarginTop: -130px; --mapsHeight: 420px; --positionMenuAndHeadlinesHomeHeader: 230px; --snelmenuWidth: 320px; --marginBetween: 30px; --padding80Top: 50px; --padding80: 50px 0; --padding40: 30px 0; } header.header__home img.mobile{ display: block; } header.header__home img.desktop{ display: none; } .brand__logo{ width: 75px; height: 75px; left: 20px; } body.fixed .brand__logo { width: 75px; height: 75px; } .cijfer{ margin: 2px 0; } body { } body.default{ padding: var(--navHeight) 0 0 0; } body.home{ background-color: var(--colorValeoGreen10); } .wrapper{ flex-wrap: wrap; } .wrapHalf{ width: 100%; } .nav__right { right: 20px; top: 15px; } .nav__right .contact{ display: none; } .hamburger__active .contact{ display: block; position: fixed; left: 0; width: calc(100% - 40px); bottom: 60px; z-index: 99; text-align: center; } .hamburger{ display: block; } .hamburger { position: relative; display: inline-block; vertical-align: middle; height:var(--circleDiameter); width: var(--circleDiameter); border-radius: var(--circleDiameter); -webkit-border-radius: var(--circleDiameter); border: 1px solid var(--colorValeoBlue); font: inherit; overflow: visible; margin: 0; padding: 0px; cursor: pointer; transition-timing-function: linear; transition-duration: .15s; transition-property: opacity, filter; text-transform: none; color: inherit; background-color: transparent; z-index:99; } .hamburger:hover { opacity: .7 } .hamburger-box { position: relative; display: inline-block; width: 25px; height: 40px } .hamburger-inner { top: 50%; display: block; margin-top: -2px } .hamburger-inner, .hamburger-inner:after, .hamburger-inner:before { position: absolute; width: 25px; height: 2px; border-radius: 1.5px; -webkit-border-radius: 1.5px; transition-timing-function: ease; transition-duration: .15s; transition-property: transform; border-radius: 1px; background-color: var(--colorValeoBlue); } .hamburger-inner:after, .hamburger-inner:before { display: block; content: '' } .hamburger-inner:before { top: -7px } .hamburger-inner:after { bottom: -7px } .hamburger--spin .hamburger-inner { transition-timing-function: cubic-bezier(.55, .055, .675, .19); transition-duration: .3s } .hamburger--spin .hamburger-inner:before { transition: top .1s ease-in .34s, opacity .1s ease-in } .hamburger--spin .hamburger-inner:after { transition: bottom .1s ease-in .34s, transform .3s cubic-bezier(.55, .055, .675, .19) } .hamburger--spin.is-active .hamburger-inner { transition-delay: .14s; transition-timing-function: cubic-bezier(.215, .61, .355, 1); transform: rotate(225deg) } .hamburger--spin.is-active .hamburger-inner:before { top: 0; transition: top .1s ease-out, opacity .1s ease-out .14s; opacity: 0 } .hamburger--spin.is-active .hamburger-inner:after { bottom: 0; transition: bottom .1s ease-out, transform .3s cubic-bezier(.215, .61, .355, 1) .14s; transform: rotate(-90deg) } .hamburger--spin-r .hamburger-inner { transition-timing-function: cubic-bezier(.55, .055, .675, .19); transition-duration: .3s } .hamburger--spin-r .hamburger-inner:before { transition: top .1s ease-in .34s, opacity .1s ease-in } .hamburger--spin-r .hamburger-inner:after { transition: bottom .1s ease-in .34s, transform .3s cubic-bezier(.55, .055, .675, .19) } .hamburger--spin-r.is-active .hamburger-inner { transition-delay: .14s; transition-timing-function: cubic-bezier(.215, .61, .355, 1); transform: rotate(-225deg) } .hamburger--spin-r.is-active .hamburger-inner:before { top: 0; transition: top .1s ease-out, opacity .1s ease-out .14s; opacity: 0 } .hamburger--spin-r.is-active .hamburger-inner:after { bottom: 0; transition: bottom .1s ease-out, transform .3s cubic-bezier(.215, .61, .355, 1) .14s; transform: rotate(90deg) } .ul__mainmenu{ display: none; position: absolute; left: 0; top: var(--navHeight); height: calc(100vh - var(--navHeight)); width: 100%; background-color: var(--colorWhite); } .hamburger__active .ul__mainmenu{ display: block; } .hamburger__active .ul__mainmenu li:first-child{ margin-top: calc((50vh - (225px / 2)) - (var(--navHeight))); } .hamburger__active .ul__mainmenu li{ width: 100%; } .div__beoordeling { height: 60px; padding-top: 30px; } .slider__symptomen .slider .slider__item img{ margin: 0 auto; } .snelmenu { position: absolute; display: none; z-index: 5; top: var(--positionMenuAndHeadlinesHomeHeader); right: 0; padding: 25px 10px 20px 10px; min-height: calc(var(--headerHomeHeight)) - var(--positionMenuAndHeadlinesHomeHeader))); box-sizing: border-box; width: var(--snelmenuWidth); background-color: var(--colorWhite); border: 1px solid var(--colorValeoGreen20)); } header.page__header{ height: auto; } header.page__header .wrapHalf{ width: 100%; padding: var(--padding40); position: relative; height: auto; } header.page__header .pageHeaderImage{ position: relative; height: auto; top: unset; right: unset; width: 100%; } header.page__header .pageHeaderImage img{ width: 100%; } .nav__inPageNav .wrapper ul{ display: inline-block !important; overflow: auto; white-space: nowrap; width: 100%; } section.page__header .pageHead{ margin: 0px 0 0 0; overflow: hidden; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } table tr td{ vertical-align: top; } article.article__tekstVlak{ position: relative; display: flex; flex-wrap: wrap; align-items: center; box-sizing: border-box; margin-left: 20px; width: calc(100% - 40px); margin-bottom: var(--marginBetween); } article.article__tekstVlak .tekstVlakImage{ height: var(--tekstVlakImage); width: var(--tekstVlakImage); border: var(--borderSize) solid var(--colorValeoGreen10); } article.article__tekstVlak.afb__left .tekstVlakImage{ margin-right: 0px; order: 2; } article.article__tekstVlak.afb__right .tekstVlakImage{ margin-left: 0px; } article.article__tekstVlak.bgLight{ padding: 25px; } article.article__tekstVlak.bgLight .tekstVlakImage{ margin-right: 0px; height: unset; } article.article__tekstVlak.bgLight.afb__right .tekstVlakImage{ margin-right: 0; } article.article__tekstVlak .article__content{ width: 100%; } article.article__full{ width: 100%; /* margin-top: 40px;*/ } section.section__onderwerpSlider{ margin-left: 20px; width: calc(100% - 20px); } .bgOnderwerp.gradientLeftToRight .usp{ position: absolute; top: 60px; left: 0; } .bgOnderwerp.gradientLeftToRight .usp span{ padding-left: 30px; margin-right: 50px; margin-left: 20px; } .slider__onderwerp{ padding: 0 0 40px 0; } .slider__onderwerp .slider .slider__item{ margin-right: 20px; } section.section__syptoomSlider{ position: relative; margin-left: 0; width: 100%; margin-bottom: var(--marginBetween); padding: 20px 0 60px 0; } .slider__symptomen{ width: calc(100% - 20px); } .section__syptoomSlider .rubriekHead{ margin-left: 20px; } .slider__symptomen .slider{ width: 100%; padding: 0 0 0px 20px; } .slider__symptomen .slider .slider__item{ height: var(--symptoomHeight); margin-right: 30px; } .slider__symptomen .arrowLeft, .slider__symptomen .arrowRight{ bottom: -40px; } .slider__symptomen .symptoomButton{ bottom: -50px; left: 20px; position: absolute; } .section__ervaringSlider .rubriekHead .cijfer{ margin-left: 20px; } body.home .section__ervaringSlider{ background-color: transparent; } .section__ervaringSlider .rubriekHead{ margin-left: 20px; } .section__ervaringSlider .slider{ margin-left: 20px; width: calc(100% - 20px); } .section__ervaringSlider .slider .slider__item{ padding: 10px 20px; margin-right: 30px; } .article__predef .wrapper{ padding: 45px 65px; } .section__behandelingen .frame{ margin-left:0; width: 100%; padding: 50px; } .section__behandelingen .frame .afbakering{ width: 100%; } .section__behandelingen .behandelItem{ padding: 10px; margin-bottom: 10px; } .section__behandelingen .behandelItem .textFrame{ width: calc(100% - 40px); margin: 20px; } footer .footer__adresses .item{ width: 100%; } footer .wrapper.cta .item{ width: 100%; margin-bottom: 20px; } }/* Slider */ .slick-slider { position: relative; display: block; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block; } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; float: left; position: relative; height: 100%; min-height: 1px; } [dir='rtl'] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } /* Arrows */ .slick-prev, .slick-next { font-size: 0; line-height: 0; position: absolute; top: calc(50% - 30px); display: block; width: 60px; height: 60px; margin-top: -10px; padding: 0; cursor: pointer; color: transparent; border: none; outline: none; background: url('/assets/images/arrow_left.png') 0px 0px no-repeat; } .slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { color: transparent; outline: none; } .slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before { opacity: 1; } .slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { opacity: .25; } .slick-dots { position: absolute; bottom: 10px; display: block; width: 100%; padding: 0; list-style: none; z-index: 20; text-align: center; } .slick-dots li { position: relative; display: inline-block; width: 12px; height: 12px; margin: 0 5px; padding: 0; cursor: pointer; } .slick-dots li button { font-size: 0; line-height: 0; display: block; width: 12px; height: 12px; padding: 5px; cursor: pointer; color: transparent; border: 0; outline: none; background: transparent; } .slick-dots li button:hover, .slick-dots li button:focus { outline: none; } .slick-dots li button:hover:before, .slick-dots li button:focus:before { opacity: 1; } .slick-dots li button:before { font-family: 'slick'; line-height: 20px; position: absolute; top: 0; left: 0; width: 10px; height: 10px; -webkit-border-radius: 6px; border-radius: 6px; content: ' '; text-align: center; opacity: 1; border: 1px solid rgba(0,0,0,0.4); background-color: rgba(255,255,255,0.4); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slick-dots li.slick-active button:before { opacity: 1; background-color: rgba(255,255,255,1); border: 1px solid rgba(0,0,0,0.4); }