/* * Custom styles by WebinWeb Design */ /*-------------------------------------------------------------- >>> Globals: ----------------------------------------------------------------*/ body {font-family: 'Ubuntu', sans-serif !important; color:var(--zwart-color) !important; line-height:1.7 !important; font-size:16.5px !important; -webkit-font-smoothing: antialiased; font-weight:400;} .container {padding-right: 1.25rem !important; padding-left: 1.25rem !important; max-width:1420px !important;} .container-fluid {padding-left:50px !important; padding-right:50px !important;} //.container-full {padding-left:50px; padding-right:50px;} .embed-container {position:relative; padding-bottom:56.25%; overflow:hidden; max-width:100%; height:auto;} .embed-container iframe, .embed-container object, .embed-container embed {position:absolute; top:0; left:0; width:100%; height:100%;} .grecaptcha-badge {visibility: hidden;} .verticalCenter {display:flex; align-items:center; justify-content:center;} .verticalCenterDiensten {display:flex; align-items:center;} .lead {font-size: 1rem;} h1, .h1 {font-size:2.5rem !important; color:var(--zwart-color);} h2, .h2 {font-size:2rem !important; margin-bottom:1rem !important; color:var(--zwart-color);} h3, .h3 {font-size:1.4rem !important; color:var(--zwart-color);} h4, .h4 {font-size:1.2rem !important; color:var(--zwart-color);} ul, ol {-webkit-padding-start:0 !important; padding-left:0 !important;} img, svg {width:100%; height:100%;} :root { --wit-color:#FFFFFF; /* --blauw-color:#0072BB; */ --blauw-color:#183e70; --blauw-licht-color:#E3EBF5; --groen-color:#A1A700; --groen-licht-color:#F3F4ED; --grijs-color:#d7d7d7; --grijs-donker-color:#979797; --grijs-extra-donker-color:#777777; --zwart-color:#212121; } /*-------------------------------------------------------------- >>> Buttons: ----------------------------------------------------------------*/ button.btn.btn-groen {border:1px solid var(--groen-color); background-color:var(--groen-color); border-radius:30px; padding:10px 30px; font-weight:500; background: linear-gradient(to right, var(--groen-color) 50%, var(--groen-color) 50%); background-size:200% 100%!important; background-position:right bottom; transition:all .2s ease-out !important; color:var(--wit-color); margin-top:1.5rem;} button.btn.btn-groen a {color:var(--wit-color); text-decoration:none;} button.btn.btn-groen:hover { border-color: var(--groen-color); background-position:left bottom!important; box-shadow:0px 2px 10px 0px rgba(33, 33, 33, 0.4);} button.btn.btn-wit {border:1px solid var(--grijs-donker-color); background-color:var(--wit-color); border-radius:30px; padding:10px 20px 10px 40px; font-weight:500; color:var(--zwart-color); margin-top:15px;} button.btn.btn-wit a {color:var(--zwart-color) !important; text-decoration:none;} button.btn.btn-wit:hover {border-color:var(--grijs-color); box-shadow:0px 2px 10px 0px rgba(33, 33, 33, 0.4);} button.btn.btn-wit:hover a {color:var(--zwart-color) !important;} button.btn.btn-wit:after {content: "\f061"; font-family:'Font Awesome\ 5 Free'; font-weight:900; color:var(--wit-color); padding-left:7.5px; font-size:14px; position:relative; background-color:var(--groen-color); border:1px solid var(--groen-color); border-radius:555px; padding:15px; left:20px; transition:all .2s ease-out !important;} button.btn.btn-wit:hover:after {background-color:var(--blauw-color); border:1px solid var(--blauw-color); transition:all .2s ease-out !important;} button.btn.btn-vacature {border:1px solid var(--blauw-color); background-color:var(--blauw-color); border-radius:30px; padding:10px 50px; font-weight:500; background: linear-gradient(to right, var(--groen-color) 50%, var(--blauw-color) 50%); background-size:200% 100%!important; background-position:right bottom; transition:all .2s ease-out !important; color:var(--wit-color);} button.btn.btn-vacature a {color:var(--wit-color); text-decoration:none;} /*-------------------------------------------------------------- >>> FLUENT Forms: ----------------------------------------------------------------*/ .fluent_form_4 {max-width:1000px !important; margin:40px 0 !important; background-color:var(--groen-licht-color) !important;} .fluentform .ff-el-group.ff_list_buttons .ff-el-form-check.ff_item_selected label>span {background-color:var(--groen-color) !important; border: 1px solid var(--groen-color) !important;} /*-------------------------------------------------------------- >>> Header: ----------------------------------------------------------------*/ header {position:relative; z-index:99;} .topbar {text-align:right; position:relative; top:0.5rem; height:50px; background-color:var(--wit-color); font-size:16px;} .topbar ul {padding-top:3px;} .topbar ul li {list-style-type:none; display:inline-block; padding:0 15px;} .topbar ul li.zoeken {margin-right:-10px;} .topbar ul li.zoeken .searchform {position:relative;} .topbar ul li.zoeken .search-field {/*background-color:var(--wit-color)*/ background-color:#f2f2f2; border:1px solid #e4e4e4; background-image: url(images/search.svg); background-position:120px 8px; background-repeat: no-repeat; background-size:20px 20px; cursor: pointer; padding: 0 0 0 15px; position: relative; -webkit-transition: width 400ms ease, background 400ms ease; transition: width 400ms ease, background 400ms ease; width:150px; color:var(--zwart-color); font-size:16px; height:36px; border-radius:20px;} .topbar ul li.zoeken .search-field:hover {background-position:270px 8px; width:300px; border:1px solid #e4e4e4;} /*.topbar ul li.zoeken .search-field:focus {background-color:#f2f2f2; border:1px solid #f2f2f2; cursor: text; outline: 0; width:200px; position:relative; right:0; z-index:999;}*/ .topbar ul li.zoeken .search-field::-webkit-input-placeholder {color:var(--zwart-color) !important;} .topbar ul li.zoeken .search-field:-ms-input-placeholder {color:var(--zwart-color) !important;} .topbar ul li.zoeken .search-field::placeholder {color:var(--zwart-color) !important;} .topbar ul li.zoeken .search-form input[type="submit"] {color:transparent; background-color:transparent; border:0; width:50px; padding:5px 0; float:left; position:absolute; margin-top:0; right:0px;} .country-selector.weglot-dropdown .wgcurrent a, .country-selector.weglot-dropdown .wgcurrent span {padding-right:20px;} .country-selector.weglot-dropdown .wgcurrent {border:none;} .country-selector.weglot-dropdown .wgcurrent:after {display:none;} .country-selector.weglot-dropdown ul {border:none;} .country-selector.weglot-dropdown li {padding:0;} .wpml .wpml-ls-legacy-dropdown {width:auto;} .wpml img {width:30px; height:24px; border-radius:555px;} .wpml .wpml-ls-legacy-dropdown a {border:none;} .wpml-ls-legacy-dropdown .wpml-ls-sub-menu {width:100%; left:-20px;} html[lang="pt-PT"] .nav {display: none;} html[lang="pt-PT"] .menubar button {display: none;} html[lang="pt-PT"] .topbar .zoeken {display: none;} html[lang="pt-PT"] footer select {display:none;} html[lang="tr-TR"] .nav {display: none;} html[lang="tr-TR"] .menubar button {display: none;} html[lang="tr-TR"] .topbar .zoeken {display: none;} html[lang="tr-TR"] footer select {display:none;} .menubar {position:relative; top:40px; font-size:16px;} .menubar .logo {position:relative; top:-80px;} .menubar .logo img {width:250px; padding:0px 35px 30px 15px; border-bottom-right-radius:40px; background-color:var(--wit-color);} .menubar .nav { border-radius:555px; width:fit-content; margin:-4px auto 0; padding:0 30px; background-color:rgba(255,255,255,.9);} .menubar .nav ul {margin-bottom:0;} .menubar .nav ul li {list-style-type:none; display:inline-block; padding:0.5rem 15px;} .menubar .nav ul li.menu-item-has-children:after{content:"\f0dd"; font-family:'Font Awesome\ 5 Free'; font-weight:900; color:var(--zwart-color); padding-left:2px; position:relative; top:-3px;} .menubar .nav ul li a {font-weight:500; font-size:18px; padding-bottom:30px;} .menubar .nav ul li.display-xs {display:none;} .menubar .nav ul li.btn.btn-groen.display-xs {display:none;} .menubar button.btn.btn-groen {float:right; position:relative; right:1.5rem; top:-1.8rem; padding:11px 30px;} .menubar button.btn.btn-groen:after {content:"\f061"; font-family:'Font Awesome\ 5 Free'; font-weight:900; color:var(--wit-color); padding-left:7.5px; font-size:14px; position:relative; top:1px;} .menubar ul ul.sub-menu {display:none; position:absolute; z-index:9999; -webkit-padding-start:0; padding-left:0; background-color:rgba(255,255,255,.9); border-top:0; width:250px; padding:1rem 0 !important; margin-left:-16px; margin-top:8px; border-bottom-left-radius:20px; border-bottom-right-radius:20px;} .menubar ul ul.sub-menu li {float:none; display:block !important; line-height:20px; padding:10px 0 10px 15px !important; text-align:left; transition: all 0.25s ease;} .menubar ul ul.sub-menu li:hover a {color:var(--zwart-color) !important;} .menubar ul ul.sub-menu li a:hover {color:var(--zwart-color) !important; text-decoration:none;} .menubar ul ul.sub-menu li a {padding:0; font-size:16px !important; font-weight:400; color:var(--zwart-color);} .menubar ul ul.sub-menu li a:after {display:none;} .menubar ul li:hover > ul {display: block;} .menubar ul li.current-menu-item ul li a {color:#000;} .menubar ul li ul li.current-menu-item a {color:#000;} /*-------------------------------------------------------------- >>> Home: ----------------------------------------------------------------*/ #home .banner .bannerBG {width:100%; height:800px; background-size:cover; background-repeat:no-repeat; background-position:center top; position:relative; top:-135px; /*z-index:-1;*/ border-radius:10px; margin-bottom:-210px;} #home .banner .bannerBG .overlay {width:100%; height:800px; position:absolute; z-index:9; border-radius:10px; top:0; background: linear-gradient( to top,rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.0));} #home .banner .bannerBG .content {position:relative; z-index:99; top:375px; left:2rem; width:50%;} #home .banner .bannerBG .content p {color:var(--wit-color); font-size:60px; font-weight:600; line-height:1.2;} #home .banner .wrapper {padding:0 3rem;} #home .banner .owl_branches {position:relative; top:-20px; color:var(--wit-color); text-align:center; border-top:1px solid rgba(255,255,255,.5); font-weight:700; padding:30px 0; z-index:99;} #home .intro {padding:0rem 0 4rem;} #home .intro .content1 {padding-right:90px;} #home .intro .content1 p {font-size:32px; font-weight:600; line-height:1.4;} #home .diensten {/*background-color:var(--groen-licht-color);*/ margin-left:50px; border-top-left-radius:10px; border-bottom-left-radius:10px; /*padding:90px 0 150px;*/ margin:1.5rem 0 3rem 50px; background: -webkit-linear-gradient(left, #0072BB, #2c4c75); background: -moz-linear-gradient(left, #0072BB, #2c4c75); background: -o-linear-gradient(left, #0072BB, #2c4c75); background: linear-gradient(to right, #0072BB, #2c4c75); padding:150px 0 120px;} #home .diensten .intro {margin-left:-20px; /*padding:5rem 90px 5rem 0;*/ padding-right:60px; color:var(--wit-color);} #home .diensten .intro h2 {color:var(--wit-color);} #home .diensten .intro hr {border-top:var(--wit-color) solid; margin:1.5rem 0;} #home .diensten .dienstenwrapper {position:absolute; right:0; padding-left:60px;} #home .diensten .dienstenwrapper .dienst {background-color:var(--wit-color); border-radius:10px;} #home .diensten .dienstenwrapper .dienst .image {border-radius:10px; border-bottom-left-radius:0; border-bottom-right-radius:0; overflow:hidden;} #home .diensten .dienstenwrapper .dienst .image img {border-radius:10px; border-bottom-left-radius:0; border-bottom-right-radius:0; transition:transform 1s ease;} #home .diensten .dienstenwrapper .dienst:hover .image img {transform: scale(1.2);} #home .diensten .dienstenwrapper .dienst .content {padding:1.5rem;} #home .diensten .dienstenwrapper .dienst .content a {font-weight:500; font-size:16px; text-decoration:none;} #home .diensten .dienstenwrapper .dienst .content a:before {content:"\f061"; font-family:'Font Awesome\ 5 Free'; font-weight:900; color:var(--wit-color); font-size:12px; border:1px solid var(--groen-color); border-radius:555px; padding:8px 10px; margin-right:10px; background-color:var(--groen-color);} #home .diensten .dienstenwrapper .owl-carousel .owl-stage-outer {margin-right:-10px !important;} #home .diensten .dienstenwrapper .dienst:hover .content a:before {background-color:var(--blauw-color); border:1px solid var(--blauw-color); color:var(--wit-color); transition:transform 1s ease;} #home .diensten .dienstenwrapper .owl-dots {text-align:center; margin-top:2.5rem;} #home .diensten .dienstenwrapper .owl-dots button.owl-dot {width:30px; height:10px; border:1px solid var(--grijs-color); background-color:var(--wit-color); border-radius:555px; margin:0 2.5px;} #home .diensten .dienstenwrapper .owl-dots button.owl-dot.active {background-color:var(--groen-color); border:1px solid var(--groen-color);} #home .video_content {padding:3rem 0;} #home .video_content .video {position:relative; padding-right:60px;} #home .video_content .video .imageBG {height:400px; width:100%; background-size:cover; background-repeat:no-repeat; border-radius:10px;} #home .video_content .video .play-btn {position: absolute; top:50%; left:45%; transform: translate(-50%, -50%);} #home .video_content .video .play-btn i.fa-solid.fa-play {color:var(--wit-color); font-size:30px; background-color:red; border-radius:555px; padding:15px 20px;} #home .video_content .embed-container {border-radius:10px; margin-right:30px;} #home .oplossingen {background-color:var(--groen-licht-color); border-radius:10px; margin:3rem 3rem; padding:4rem 0;} #home .oplossingen .content hr {border-top:var(--grijs-donker-color) solid; margin:1.5rem 0;} #home .oplossingen .accordion {border-radius:0; --bs-accordion-border-color:none !important;} #home .oplossingen .accordion-header {margin-bottom:15px; /*background-color:var(--beige-color);*/ border-radius:0px; border-bottom:1px solid var(--grijs-color);} #home .oplossingen .accordion-item .accordion-button {background-color:transparent; padding:1rem 1rem 1rem 0; font-weight:500; font-size:24px;} #home .oplossingen .accordion-item .accordion-button:hover {color:var(--blauw-color);} #home .oplossingen .accordion-item .accordion-button:focus {border-color:unset; box-shadow:unset; font-weight:500;} #home .oplossingen .accordion-item .accordion-button:not(.collapsed) {color:var(--zwart-color); font-weight:500; box-shadow:none;} #home .oplossingen .accordion-item .accordion-button::after {background-image: url('images/plus.svg'); background-size:.75rem; background-position:center center; width:1.5rem; height:1.5rem;} #home .oplossingen .accordion-item .accordion-button:not(.collapsed)::after {background-image: url('images/minus.svg'); background-size:.75rem; background-position:center center;/*background-color:var(--blauw-color);*/ border-radius:50%; width:1.5rem; height:1.5rem;} #home .oplossingen .accordion-item .accordion-body {margin-top:-2rem; padding:1rem 3rem 2rem 0rem;} #home .oplossingen .accordion-item .accordion-body ul {-webkit-padding-start:15px !important; padding-left:15px !important;} #home .oplossingen .accordion-item .accordion-body a {font-weight:500; font-sie:16px;} #home .oplossingen .accordion-item .accordion-body a:before {content:"\f061"; font-family:'Font Awesome\ 5 Free'; font-weight:900; color:var(--wit-color); font-size:12px; border:1px solid var(--groen-color); border-radius:555px; padding:8px 10px; margin-right:10px; background-color:var(--groen-color);} #home .oplossingen .accordion-item:hover .accordion-body a:before {background-color:var(--blauw-color); border:1px solid var(--blauw-color); color:var(--wit-color); transition:transform 1s ease;} #home .artikelen {padding:3rem 0;} #home .artikelen .afbeelding {overflow:hidden; border-radius:10px; margin-top:1rem;} #home .artikelen .afbeelding img {border-radius:10px; transition:transform 1s ease; aspect-ratio:800 / 600; object-fit:cover;} #home .artikelen .afbeelding:hover img {transform: scale(1.2); border-radius:10px;} #home .artikelen .content {padding:1rem 0 0 0;} #home .artikelen .content h3 {font-size:20px !important;} #home .artikelen .content p {font-size:14px;} /* #sub .content h2 {margin-top:3rem; margin-bottom:0.25rem !important; /*font-size:1.65rem !important;*/} */ #sub.sbrechts #primary .wrapper {padding-right:60px;} #sub.sbrechts .content {padding-right:45px;} #sub.sbrechts .content h2 {margin-top:3rem; margin-bottom:0.25rem !important; font-size:1.65rem !important;} #sub.sbrechts .content ul {list-style-type:none;} #sub.sbrechts .content ul li {margin-left: 15px;} #sub.sbrechts .content ul li:before {content:"\f00c"; font-family:'Font Awesome\ 5 Free'; font-weight:900; color:var(--blauw-color); margin-left:-25px; padding-right:10px;} #sub.sbrechts .content img {margin:1.5rem 0 0;} #sub.sbrechts .content form {padding-top:2.5rem;} #sub.sbrechts input[type="text"], #sub.sbrechts input[type="tel"], #sub.sbrechts input[type="email"], #sub.sbrechts select {background-color:#f9f9f9; border:1px solid #d7d7d7;} #sub.sbrechts textarea {background-color:#f9f9f9; border:1px solid #d7d7d7;} #single.vacature .post_titel {padding-bottom:2rem;} #single.vacature .content-links {padding-right:30px;} #single.vacature .content-rechts {padding-left:30px;} #sidebar {background-color:#f9f9f9; border:1px solid #dddddd; border-radius:10px; padding:30px 30px 90px; margin-top:30px; margin-bottom:3rem; font-weight:300; font-size:16px;} #sidebar .intro {padding-bottom:1.5rem;} #sidebar .intro button.btn.btn-groen {width:100%;} #sidebar .intro button.btn.btn-groen:after {content:"\f061"; font-family:'Font Awesome\ 5 Free'; font-weight:900; color:var(--wit-color); padding-left:7.5px; font-size:14px; position:relative; top:1px;} #sidebar h3 {color:var(--zwart-color); font-size:1.5rem !important; margin-bottom:1rem; font-weight:600;} #sidebar hr {border-top:#d7d7d7 solid; opacity:1; margin:1rem 0 2rem;} #sidebar strong {color:var(--zwart-color); font-weight:700;} #sidebar strong a:after {content:"\f178"; font-family:'Font Awesome\ 5 Free'; font-weight:900; color:var(--groen-color); padding-left:10px;} #sidebar .content-mobiel {display:none;} #single.nieuws {padding:3rem 0 0;} #single.nieuws .nieuws-banner {padding-bottom:3rem;} #single.nieuws .nieuws-banner img {aspect-ratio:16 / 9; width:100%; object-fit:cover; border-radius:10px;} #single.nieuws .content img {margin:1.5rem 0 1.5rem;} #single.nieuws .content a {color:var(--blauw-color); font-weight:500;} #single.nieuws .content a:hover {text-decoration:underline;} #single.nieuws .content .btn-groen a {color:var(--wit-color);} #single.nieuws .content .btn-groen:hover a {text-decoration:none;} #single.nieuws .content .fa-file {color:var(--blauw-color); padding-right:5px;} #archive-nieuws .title {padding-bottom:1.5rem;} #archive-nieuws .item {margin-bottom:1.5rem;} #archive-nieuws .item .post-thumbnail {overflow:hidden; border-radius:10px;} #archive-nieuws .item .post-thumbnail img {border-radius:10px; aspect-ratio:13 / 9; object-fit:cover; height:100%; transition:transform 1s ease;} #archive-nieuws .item .post-thumbnail:hover img {transform: scale(1.2);} #archive-nieuws .item .post-titel {padding:1rem 0 0 0;} #archive-nieuws .item .post-titel h4 {margin-bottom:0;} #archive-nieuws .item:hover .post-titel h4 {color:var(--blauw-color);} #archive-nieuws .item .bron p.text-muted {font-size:14px;} /*#archive-nieuws .link a {font-weight:500; font-size:12px;} #archive-nieuws .link p:after {content:"\f061"; font-family:'Font Awesome\ 5 Free'; font-weight:900; color:var(--zwart-color); padding-left:10px;}*/ /* Zorg dat de container van flexbox gebruik maakt zodat de kolommen gelijk hoog worden */ #archive-nieuws .row {display: flex; flex-wrap: wrap;} #archive-nieuws .nieuws-items {flex: 0 0 33.333%; display: flex;} #archive-nieuws .nieuws-items .item {flex: 1; display: flex; flex-direction: column; border: 1px solid #e4e4e4; padding: 20px; box-sizing: border-box; background-color: #fff; transition: transform 0.3s;} #archive-nieuws .nieuws-items .item:hover {box-shadow: 0 5px 15px rgba(0,0,0,0.1);} #search-results {padding-bottom:6rem;} #search-results .search-title {padding:3rem 0 1.5rem;} #search-results .results {border-bottom:1px solid #e4e4e4; position:relative; padding:15px 0 15px 30px;} #search-results .results h3 {margin-bottom:0 !important;} #search-results .results p.text-muted {font-size:13px; margin-bottom:0;} #search-results .results h3:before {content:''; width:15px; height:15px; background-color:var(--blauw-color); position:absolute; margin-left:-30px; top:22px;} #search-results .results:hover h3:before {background-color:var(--groen-color);} #search-results .results:hover h3 {color:var(--groen-color);} /*-------------------------------------------------------------- >>> Components: ----------------------------------------------------------------*/ .banner {padding-bottom:4.5rem;} .banner .bannerBG {position:relative;} .banner .bannerBG .imageBG {width:100%; height:500px; background-size:cover; background-repeat:no-repeat; background-position:center top; position:relative; top:-114px; z-index:-1; border-radius:10px; margin-bottom: -110px;} .banner .bannerBG .overlay {width:100%; height:500px; position:absolute; top:0; /*background-color:rgba(0,0,0,.3);*/ top:-114px; border-radius:10px; margin-bottom: -110px; background: linear-gradient(to top,rgba(0, 0, 0, 0.3), rgba(255, 255, 255, 0.0));} .banner .bannerBG .titel {top:40%; left:50%; transform: translate(-50%, -40%); position:absolute; z-index:99;} .banner .bannerBG .titel h1 {color:var(--wit-color);} #breadcrumbs {position:relative; z-index:1; opacity: 0.75; font-size:15px; /*padding-top:15px;*/ margin-top:-3.5rem; /*padding-bottom:1.5rem;*/} .content {position:relative;} .content a {text-decoration:underline; color:var(--blauw-color);} .content h1 {margin-bottom:2rem !important;} /* .content h1:after {content:''; position:absolute; width:300px; height:1px; background-color:var(--groen-color); left:0; top:60px;} */ .content h2:first-of-type {padding:0;} /*.content h2:nth-of-type(n+2) {padding-top:2.5rem;}*/ .content img {margin:2.5rem 0 0; border-radius:10px;} .content ul {-webkit-padding-start:15px !important; padding-left:15px !important;} .content iframe {border-radius:10px;} .content_image .content {padding:0 90px 60px 0; position:relative; /*background-color:var(--groen-licht-color);*/ border-radius:10px; margin-right:-70px; border-top-right-radius:0; border-bottom-right-radius:0;} .content_image .content h2, .content_image .content h1 {margin-bottom:2.5rem !important; position:relative;} /* .content_image .content h1:after {content:''; position:absolute; width:300px; height:1px; background-color:var(--groen-color); left:0; top:85px;} */ .content_image .content h2:after {content: ""; position:absolute; left:0; bottom: -10px; width:300px; height:2px; background-color:var(--groen-color);} .content_image .content h3 {padding-top:2rem;} .content_image .image {margin-left:45px;} .content_image .image img {aspect-ratio: 15 / 16; width:100%; object-fit:cover; border-radius:10px;} .image_content .visibleXS {display:none;} .image_content .content {padding:0 0 60px 90px; position:relative; /*background-color:var(--groen-licht-color);*/ border-radius:10px; margin-left:-70px; border-top-left-radius:0; border-bottom-left-radius:0;} .image_content .content h2, .image_content .content h1 {margin-bottom:2.5rem !important; position:relative;} .image_content .content h1:after {content:''; position:absolute; width:300px; height:1px; background-color:var(--groen-color); left:0; top:85px;} .image_content .content h2:after {content: ""; position:absolute; left:0; bottom: -10px; width:300px; height:2px; background-color:var(--groen-color);} .image_content .content h3 {padding-top:2rem;} .image_content .content .certificaat img {aspect-ratio:200 / 250; margin: 1.5rem 0 0 0;} .image_content .image {margin-right:45px;} .image_content .image img {aspect-ratio: 15 / 16; width:100%; object-fit:cover; border-radius:10px;} .image img {border-radius:10px;} .content_video .content {padding:0 90px 0 0; position:relative;} .content_video .embed-container iframe {border-radius:10px;} .vacatures {background: #1E3F53; /* Fallback for very old browsers */ background: -webkit-linear-gradient(top, #1E3F53, #5788A2); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(top, #1E3F53, #5788A2); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(top, #1E3F53, #5788A2); /* For Firefox 3.6 to 15 */ background: linear-gradient(to bottom, #1E3F53, #5788A2); /* Standard syntax */ color:var(--wit-color); margin-top:4.5rem; } .vacatures .vacatures_header {padding:3rem 0 0; margin-bottom:1.5rem; border-bottom:1px solid var(--grijs-color); font-weight:500;} .vacatures .item {border-bottom:1px solid var(--grijs-color); padding:1.5rem 0 0.5rem;} .vacatures .item .vacature-titel {position:relative;} .vacatures .item .vacature-titel h4 {font-size:100% !important; color:var(--wit-color); font-weight:600; padding-left:30px;} .vacatures .item .vacature-titel h4:before {content:''; width:15px; height:15px; background-color:var(--blauw-color); position:absolute; margin-left:-30px; top:2px;} .vacatures .item:hover .vacature-titel h4:before {background-color:var(--groen-color);} .vacatures .item:hover button.btn.btn-vacature { border-color: var(--groen-color); background-position:left bottom!important; box-shadow:0px 2px 10px 0px rgba(33, 33, 33, 0.4);} .vacatures .item .vacature-titel p {font-size:14px; margin-top:-.5rem; padding-left:30px;} input[type="text"], input[type="tel"], input[type="email"], select {background-color:#f9f9f9; border:1px solid #ddd; border-radius:4px; height:50px; width:100%; padding-left:1rem; margin:0.5rem 0;} textarea {/*background-color:#fafafa;*/ background-color:#f9f9f9; border:1px solid #ddd; border-radius:4px; width:100%; padding:1.5rem 0 0 1rem;} input[type="submit"] {background-color:var(--groen-color); bordeR:1px solid var(--groen-color); color:var(--wit-color); padding:10px 60px; border-radius:555px; font-weight:600; position:relative;} ::placeholder {color:var(--grijs-extra-donker-color);} ::-webkit-input-placeholder {color:var(--grijs-extra-donker-color);} ::-moz-placeholder {color:var(--grijs-extra-donker-color);} :-moz-placeholder {color:var(--grijs-extra-donker-color);} :-ms-input-placeholder {color:var(--grijs-extra-donker-color);} .kernwaarden {padding:3rem 0;} .kernwaarden .waarde .icon img {width:50px; height:50px;} .kernwaarden .waarde .titel p {font-weight:600; padding-top:15px; text-align:center;} .kernwaarden .owl-nav button.owl-prev {position:absolute; top:20%; left:0;} .kernwaarden .owl-nav button.owl-next {position:absolute; top:20%; right:0;} .kernwaarden .owl-nav button.owl-prev span, .kernwaarden .owl-nav button.owl-next span {font-size:26px;} .usps {background-color:var(--blauw-licht-color); padding:30px 0; font-weight:600; margin-top:3rem;} /* .usps .usp img {width:35px; padding-right:5px;} */ .usps .owl-carousel .owl-item img { width: 35px !important; float: left;} .usps .usp img {padding-right:10px;} .sponsors {background-color:var(--groen-licht-color); padding:3rem 0;} .sponsors .intro {margin-bottom:1.5rem;} /*-------------------------------------------------------------- >>> Footer: ----------------------------------------------------------------*/ footer {background: -webkit-linear-gradient(left, #183e70, #2c4c75); background: -moz-linear-gradient(left, #183e70, #2c4c75); background: -o-linear-gradient(left, #183e70, #2c4c75); background: linear-gradient(to right, #183e70, #2c4c75); padding:75px 0 0; color:var(--wit-color); /*background-color: #2c4c75;*/ position:relative;} footer h3 {color:var(--wit-color); margin-bottom:1rem; font-size:16px;} footer strong {font-weight:600;} footer p {font-weight:300;} footer .kolom1 img {width:200px;} footer .kolom1 ul li {list-style-type:none; display:inline-block; opacity:0.5; padding-right:10px;} footer .kolom1 ul li i {font-size:30px;} footer .footer-sponsors {margin-top:30px;} footer .footer-sponsors .sponsor-logos {display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } footer .footer-sponsors .sponsor-logos .logo img {max-height: 60px; width: auto; display: block; border-radius:4px;} footer .kolom2 a, footer .kolom3 a {font-weight:400;} footer .kolom2 a:hover, footer .kolom3 a:hover {font-weight:600;} footer .kolom4 a:hover {text-decoration:underline;} footer .info {border-top:1px solid rgba(255,255,255,.3); margin-top:3rem;} footer .info .copy, footer .info .author {padding-top:0.5rem; font-size:13px;} footer .info .copy a:hover, footer .info .author a:hover {text-decoration:underline;} footer .info .author {text-align:right;} footer select {background-color:transparent; border:0; color:#fff; padding-left:0; width:225px; border-bottom:1px solid rgba(255,255,255,.2); border-radius:0;} /*-------------------------------------------------------------- >>> Media queries: ----------------------------------------------------------------*/ @media only screen and (max-width : 1649px) { #home .banner .bannerBG .content {width:60%;} #home .diensten .intro {margin-left:20px;} } @media only screen and (max-width : 1399px) { .container-fluid {padding-left:20px !important; padding-right:20px !important;} .menubar .nav ul li {padding:0.5rem 7.5px;} #home .banner .bannerBG, #home .banner .bannerBG .overlay {height:700px;} #home .banner .bannerBG .content p {font-size:50px;} #home .banner .bannerBG .content button.btn.btn-groen {margin-top:0.5rem;} #home .banner .owl_branches {top:0; padding:20px 0;} #home .diensten {padding:75px 0 100px; margin:1.5rem 0 3rem 1.5rem;} #home .diensten .intro {padding: 0rem 0px 5rem 0;} #home .oplossingen {margin: 3rem 1.25rem;} //#home .oplossingen .container-fluid {padding-left: 20px !important; padding-right: 20px !important;} #home .oplossingen .accordion-wrapper {padding-left: 60px; margin-top: -1em;} } @media only screen and (max-width : 1199px) { #home .banner .bannerBG {background-position: right bottom;} #home .banner .bannerBG, #home .banner .bannerBG .overlay {height:600px;} #home .banner .bannerBG .content {width:70%; top:275px;} #home .banner .bannerBG .content p {font-size:45px;} #home .diensten {padding: 60px 0; margin: 0 0 3rem 1.5rem;} #home .diensten .intro {padding: 0rem 20px 1.5rem 0;} #home .diensten .dienstenwrapper {position:relative; padding-left:10px; right: -20px;} #home .video_content {padding: 1.5rem 0;} #sub .banner {padding-bottom:0;} #sub .banner .bannerBG, #sub .banner .bannerBG .imageBG, #sub .banner .bannerBG .overlay {height:400px; margin:0 0 -30px 0;} .image_content .content {padding:0 0 60px 60px;} #sub.sbrechts .content {padding-right: 30px;} #single.vacature .banner .bannerBG, #single.vacature .bannerBG .imageBG, #single.vacature .bannerBG .overlay {height:400px; margin:0 0 -100px 0;} #single.vacature .content-links {padding-right:0;} .content_video .content {padding:0 60px 60px 0;} footer .kolom1 {margin-bottom:45px;} } @media only screen and (max-width : 991px) { .container {padding-right:1.5rem !important; padding-left:1.5rem !important; max-width:100%;} .topbar {padding-right:60px;} .topbar ul li {padding:0 7.5px;} .image_content .visibleXL {display:none;} .image_content .visibleXS {display:block;} #home .banner .bannerBG, #home .banner .bannerBG .overlay {height:550px;} #home .banner .bannerBG {background-position: center bottom;} #home .banner .bannerBG .content p {font-size: 40px;} .menubar .logo img {width:210px; padding:0px 30px 20px 20px; border-bottom-right-radius:30px;} .menubar button.btn.btn-groen {padding:5px 20px;} #home .banner .owl_branches {top:20px; padding:10px 0;} #home .diensten {padding: 30px 0;} #home .diensten .intro {padding: 0rem 15px 1.5rem 0; margin-left:15px;} #home .diensten .dienstenwrapper {position:relative; padding-left:5px; right: -20px;} #home .video_content .embed-container {margin-right:0;} #home .video_content .content {margin-top:30px;} #home .oplossingen {padding: 3rem 0;} #home .oplossingen .accordion-wrapper {padding-left:0; margin-top: 0;} #home .artikelen {padding: 1.5rem 0 0;} .image_content .content {margin-left: 0; padding: 0 0 30px 0;} .image_content .content h2:after {left:0;} .image_content .image {margin-right: 0;} .image_content .image img {aspect-ratio:16/12;} .content_image .content {padding-bottom:30px;} .content_image .image {margin-left: 0;} .content_image .image img {aspect-ratio:16/12;} .content_video .content {padding:0 0 30px 0;} #sub.sbrechts .content {padding-right: 0;} .vacatures button.btn.btn-vacature {margin-left: -50px;} #single.vacature .content-rechts {padding-left: 0; margin-top:2rem;} #archive-nieuws .nieuws-items {flex: 0 0 50%;} #sidebar .content-desktop {display:none;} #sidebar .content-mobiel {display:block;} footer {padding: 55px 0 0;} footer .kolom4 {margin-bottom:2rem;} footer select {position:absolute; bottom:60px; border-bottom:none;} } @media only screen and (max-width : 767px) { h1 {font-size:2rem !important;} .lead {font-size: 0.85rem;} button.btn.btn-groen {margin-top:0.5rem;} .topbar {top:0;} .topbar ul {padding-top:7px;} .topbar ul li {margin-top: -3px;} .topbar ul li.nieuws {display:none;} .menubar .logo {top:-85px;} .menubar .logo img {width:175px; padding: 0px 20px 20px 20px; border-bottom-right-radius:30px;} #home .banner .bannerBG, #home .banner .bannerBG .overlay {height:500px;} #home .banner .bannerBG .content p {font-size: 30px;} #home .diensten {margin:0;} #home .diensten .intro {margin-left:0; padding: 0rem 0 1.5rem 0;} #home .diensten .intro hr, #home .oplossingen .content hr {margin:0.5rem 0 1.5rem 0;} #home .diensten .dienstenwrapper {padding-left: 0; right: -11px;} #home .video_content {padding: 3rem 0 1.5rem;} #home .video_content .video .imageBG {height:450px; margin-bottom:30px;} #sub .banner .bannerBG, #sub .banner .bannerBG .imageBG, #sub .banner .bannerBG .overlay {height:350px; margin:0 0 -30px 0;} .content h1 {margin-bottom:1rem !important;} .content h1:after {display:none;} .image_content .content h2:after {display:none;} .image_content .content h2, .image_content .content h1 {margin-bottom: 1rem !important;} .content_image .content h2:after {display:none;} .content_image .content h2, .content-image .content h1 {margin-bottom: 1rem !important;} .vacatures .vacatures_header {display:none;} .vacatures .item .plaats, .vacatures .item .uren {padding-left:30px;} .vacatures .item button.btn.btn-vacature {margin:15px 0 15px 30px;} #single.vacature .banner .bannerBG, #single.vacature .bannerBG .imageBG, #single.vacature .bannerBG .overlay {height:350px;} #single.vacature .post_titel {padding-bottom: 0; padding-top: 1rem;} #single.vacature .wpcf7-list-item {display: block; margin:0;} #archive-nieuws .nieuws-items {flex: 0 0 100%;} footer .kolom3, footer .kolom4 {margin-top:0;} footer .info .copy, footer .info .author {text-align:center;} footer .info .copy {margin-bottom:-.75rem;} footer .kolom4 {margin-bottom:2rem;} footer select {position:absolute; bottom:100px; border-bottom:none;} } @media only screen and (max-width : 576px) { h1, .h1 {font-size: 1.75rem !important; } h2, .h2 {font-size:1.65rem !important;} .container {padding-right:1rem !important; padding-left:1rem !important; max-width:100%;} #breadcrumbs {font-size: 12px; margin-bottom: 0rem;} .topbar ul li.zoeken {display:none;} .topbar ul li.vacancies {display:none;} .topbar ul li.wpml img {width:20px;} .menubar .logo img {padding: 0px 30px 20px 0.5em;} .menubar button.btn.btn-groen {display:none; /*font-size:12px; position:absolute; bottom:0; top:auto;*/} #home .banner .bannerBG, #home .banner .bannerBG .overlay {height:400px;} #home .banner .bannerBG .content {width:90%; top:225px;} #home .banner .bannerBG .content p {font-size:22px;} #home .banner .wrapper {display:none;} #home .intro {padding:1.5rem 0 1.5rem;} #home .intro .content1 p {font-size:1.75em;} #home .diensten {margin: 1.5rem 0;} #home .diensten .dienstenwrapper .dienst .content {padding: 1rem 0.75rem;} #home .video_content {padding: 1.5rem 0 1.5rem;} #home .video_content .video .imageBG {height:300px; margin-bottom:30px;} #home .oplossingen {margin: 1.5rem 0;} #home .oplossingen .accordion-item .accordion-button {font-size:18px;} #home .oplossingen .accordion-header {margin-bottom: 5px;} #home .oplossingen .accordion-item .accordion-button {padding:1rem 0rem 1rem 0;} #home .oplossingen .accordion-item .accordion-body {padding: 1rem 0rem 2rem 0rem;} #sub .banner .bannerBG, #sub .banner .bannerBG .imageBG, #sub .banner .bannerBG .overlay {height:250px; margin:0 0 -50px 0;} #sidebar {padding: 30px 15px 30px; margin-bottom: 0rem;} #single.vacature .banner .bannerBG, #single.vacature .bannerBG .imageBG, #single.vacature .bannerBG .overlay {height:250px;} #sub .content button.btn.btn-groen:last-of-type {display:none;} .kernwaarden {padding:1.5rem 0 0; margin-bottom:-3rem;} .content_image .image img {aspect-ratio: auto;} footer .container-fluid {padding-right:1rem !important; padding-left:1rem !important;} footer .kolom1 {margin-bottom:1rem;} footer .kolom2, footer .kolom3, footer .kolom4 {margin-top:2rem;} footer .kolom4 {margin-bottom:2rem;} footer select {position:absolute; bottom:100px; border-bottom:none;} }