/*
 * Custom styles by WebinWeb Design
*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&family=Oswald:wght@200..700&display=swap');

/*--------------------------------------------------------------
 >>> Globals:
 ----------------------------------------------------------------*/
 body {/*font-family: 'Montserrat', sans-serif !important;*/  color:var(--zwart-color) !important; line-height:1.8 !important; font-size:16px !important; -webkit-font-smoothing: antialiased; font-weight:400; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";}
 .container {padding-right: 1.25rem !important; padding-left: 1.25rem !important;}
 .container-fluid {padding-left:100px !important; padding-right:100px !important;}
 .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;}
 h1, .h1 {font-size:2.5rem !important; color:var(--zwart-color); font-family: "Oswald", sans-serif;}
 h2, .h2 {font-size:2rem !important; margin-bottom:2rem !important; color:var(--zwart-color); font-family: "Oswald", sans-serif;}
 h3, .h3 {font-size:1.2rem !important; margin-bottom:1rem !important; color:var(--zwart-color); font-family: "Oswald", sans-serif;}
 h4, .h4 {font-size:1.2rem !important; color:var(--zwart-color); font-family: "Oswald", sans-serif;}
 ul, ol {-webkit-padding-start:0 !important; padding-left:0 !important;}
 img, svg {width:100%; height:100%;}
 :root {
   --zwart-color:#000000;
   --geel-color: #FBB900;
   --creme-color:#F0EFE9;
   --wit-color:#FFFFFF;
 }
 

 /*--------------------------------------------------------------
 >>> Buttons:
 ----------------------------------------------------------------*/
 button.btn.btn-geel {border:1px solid var(--geel-color); background-color:var(--geel-color); border-radius:0px; padding:10px 30px; font-weight:600; background: linear-gradient(to right, var(--geel-color) 50%, var(--geel-color) 50%); background-size:200% 100%!important; background-position:right bottom; transition:all .2s ease-out!important; color:var(--zwart-color); margin-top:1rem;}
  button.btn.btn-geel a {color:var(--zwart-color); text-decoration:none;}
  button.btn.btn-geel:hover { border-color: var(--geel-color); background-position:left bottom!important; box-shadow:0px 2px 10px 0px rgba(33, 33, 33, 0.4);}
  button.btn.btn-geel:after {content:"\f061"; font-family:'Font Awesome\ 5 Free'; font-weight:900; color:var(--zwart-color); padding-left:7.5px; position:relative; top:2px;}
  
  button.btn.btn-trans {border:1px solid var(--green-dark-color); background-color:transparent; border-radius:30px; padding:10px 40px; font-weight:600; background: linear-gradient(to right, var(--green-btn-color) 50%, var(--wit-color) 50%); background-size:200% 100%!important; background-position:right bottom; transition:all .2s ease-out!important; color:var(--green-dark-color);}
  button.btn.btn-trans a {color:var(--green-dark-color) !important; text-decoration:none;}
  button.btn.btn-trans:hover {border-color:var(--green-btn-color); background-position:left bottom!important; box-shadow:0px 2px 10px 0px rgba(33, 33, 33, 0.4); color:var(--wit-color);}
  button.btn.btn-trans:hover a {color:var(--wit-color) !important;}
 
 
 
 /*--------------------------------------------------------------
  >>> Header:
  ----------------------------------------------------------------*/
 header {position:fixed; width: 100%; background-color:var(--wit-color); z-index: 99; height:150px;}
 header.site-header.active {-webkit-transition: all ease-out .25s; -moz-transition: all ease-out .25s; -o-transition: all ease-out .25s; transition: all ease-out .25s; height:120px; border-bottom:1px solid #e4e4e4;}
 header.site-header.active .logo {padding-top:0; transition: all ease-out .25s;}
 header.site-header.active .logo img {width:175px; padding:10px 0 15px; transition: all ease-out .25s;}
 header.site-header.active .nav {margin-top: -25px; transition: all ease-out .25s;}
  
 header .review {padding-top:30px; transition: all ease-out .25s;}
 header .review .stars {float:left; margin-right:10px;}
 header .review .stars i {color:var(--geel-color); margin:0 -1.5px; font-size:12px;}
 header .review .cijfer {font-size:14px; font-weight:700; position:relative; top:3px;}
 header .logo {text-align:center; padding-top:10px; margin-left:-37.5%;}
 header .logo img {width:244px; height:auto; transition: all ease-out .25s;}
 
 header .nav {padding:1rem 0 0; display:flex; justify-content:center;}
 header .nav ul li {list-style-type:none; display:inline-block; padding:0 20px; font-size:14px;}
 header .nav ul li a {padding-bottom:45px; transition:all .2s ease-out !important; font-weight:600; text-transform:uppercase;}
 header .nav ul li a:hover {color:var(--blauw-color); transition:all .2s ease-out !important;}
 header .nav ul li.current-menu-item a {color:var(--blauw-color);}
 header .nav ul li.menu-item-has-children:after {content:"\f078"; font-family:'Font Awesome\ 5 Free'; font-weight:900; color:var(--zwart-color); font-size:10px;}
 /* header .nav ul li.btn-geel {background-color:var(--geel-color); padding:5px 20px; margin:0 .25rem;} */
 header .nav ul li.btn-geel:before {content:"\f071"; font-family:'Font Awesome\ 5 Free'; font-weight:900; color:var(--zwart-color); padding-right:5px;}

  
  /* -- Submenu --*/
 header .nav .main-navigation ul li:hover > ul.sub-menu {display: block;}
 header .nav .main-navigation ul.sub-menu {display:none; position:absolute; z-index:9999; margin-top:14px; margin-left:-15px; width:350px; background-color:var(--wit-color); padding:15px 15px; border-bottom-left-radius:4px; border-bottom-right-radius:4px; box-shadow: 0 12px 20px rgba(0, 0, 0, 0.2);}
 header .nav .main-navigation ul.sub-menu li {display:block !important; text-align:left; padding: 0.2rem 15px 0.2rem 1rem;}
 header .nav .main-navigation ul.sub-menu li:last-child {padding:0 1rem 0; margin-top:0;}
 header .nav .main-navigation ul.sub-menu li a {color:var(--zwart-color) !important; font-size:14px !important; font-weight:500;}
 header .nav .main-navigation ul.sub-menu li.current-menu-item a {font-weight:700;}
 header .nav .main-navigation ul.sub-menu li a:hover, header #menubar .nav .main-navigation ul.sub-menu li.current-menu-item a {color:var(--blauw-color) !important;}
 header .nav .main-navigation ul.sub-menu li a:after {display:none;}
 
 header .telefoonnummer {display:flex; justify-content:end; margin-top:-48px; font-weight:700; font-size:15px;}
 header .telefoonnummer:before {content:"\f095"; font-family:'Font Awesome\ 5 Free'; font-weight:900; color:var(--zwart-color); padding-right:10px;}
 
 
 /*--------------------------------------------------------------
 >>> Projecten:
 ----------------------------------------------------------------*/
 .page-template-page-projecten #projecten {margin:150px 0 3rem;}
/* #projecten .projecten-items {padding-top:130px;}*/
 #projecten .banner::before, #projecten .banner::after {height:50%; bottom:-10%; padding-bottom:10%;}

 

 .projecten .titel {text-align:center;}
 .projecten p.with-lines {position:relative; text-align: center; font-style: italic;}
 .projecten p.with-lines::before, .projecten p.with-lines::after {content: ""; display: inline-block; width: 300px; height: 1px; background-color:var(--geel-color); vertical-align: middle; margin: 0 15px;}
 .projecten p.with-lines::before {margin-right: 20px;}
 .projecten p.with-lines::after {margin-left: 20px;}
 .projecten-items .wrapper {position:relative; margin:12.5px 0;}
 .projecten-items .wrapper .afbeelding img {aspect-ratio:16/12; object-fit:cover;}
 .projecten-items .wrapper .wrapper-content {background-color:var(--creme-color); width:100%; height:100%; position:absolute; top:0; opacity:0; transition:all .5s ease;}
 .projecten-items .wrapper .wrapper-content .content {position:absolute; z-index:999; top:50%; left:50%; transform:translate(-50%, -50%);}
 .projecten-items .wrapper .wrapper-content .content h5 {border-bottom:2px solid var(--geel-color); text-align: center;}
 .projecten-items .wrapper .wrapper-content:hover {opacity:1; transition:all .5s ease;}
   
 .filter-buttons {margin-bottom:2rem;}
 .filter-buttons button {font-weight:400 !important; font-size:20px;}
 .btn-primary {background-color:transparent; border:1px solid transparent; color:var(--zwart-color); font-weight:700 !important;}
 .btn-primary:hover {color:var(--zwart-color);}
 .btn-outline-primary {color:var(--zwart-color) !important;}
 .projecten-items button.btn {border-right:1px solid #888; text-transform:uppercase; line-height:0.75;}
 .projecten-items button.btn:hover, #projecten button.btn:focus {color:var(--geel-color); background-color:transparent; border:none; border-right:1px solid #999;}
 .projecten-items button.btn:hover.btn-active {color:var(--geel-color);}
 .projecten-items button.btn.btn-active {color:var(--geel-color); font-weight:700;}
 
 
 /*--------------------------------------------------------------
  >>> Components:
  ----------------------------------------------------------------*/
 .content .titel {text-align:center;}
 .content .titel p.with-lines {position:relative; text-align: center; font-style: italic;}
 .content .titel p.with-lines::before, .content .titel p.with-lines::after {content: ""; display: inline-block; width: 150px; height: 1px; background-color:var(--geel-color); vertical-align: middle; margin: 0 15px;}
 .content .titel p.with-lines::before {margin-right: 20px;}
 .content .titel p.with-lines::after {margin-left: 20px;}
 .content h2 i {color:var(--geel-color);}
 .content h2 {position:relative;}
 .content h2:after {content: ""; position:absolute; left:0; bottom:-10px; height:1px; width:400px; background-color:var(--geel-color);}
 .content a {font-weight:500; text-decoration:underline;}
 .content .content ol {padding-left:30px !important; line-height:1.2;}
 .content .content ol li {padding-bottom:10px;}
 .content .content ol li a:hover {text-decoration:underline;}
 .content .content ul {list-style-type:none;}
 .content .content ul li {padding-left:30px; padding-bottom:10px;}
 .content .content ul li:before {content:"\f0e7"; font-family:'Font Awesome\ 5 Free'; font-weight:900; color:var(--geel-color); margin-right:15px; margin-left:-30px;}
 .content .content ul li a:hover {text-decoration:underline;}
 
 .content_content h1 {position:relative; margin-bottom:3rem !important;}
 .content_content h1:after {content: ""; position:absolute; left:50%; transform:translate(-50%, 0%);bottom:-10px; height:1px; width:400px; background-color:var(--geel-color);}
 .content_content h2 {position:relative;}
 .content_content h2:after {content: ""; position:absolute; left:0; bottom:-10px; height:1px; width:400px; background-color:var(--geel-color);}
 .content_content a {font-weight:500;}
 .content_content a:hover {text-decoration:underline;}
 .content_content i {padding-right:5px; font-size:14px;}
 .content_content ul {list-style-type:none;}
 .content_content ul li {padding-left:30px; padding-bottom:10px;}
 .content_content ul li:before {content:"\f0e7"; font-family:'Font Awesome\ 5 Free'; font-weight:900; color:var(--geel-color); margin-right:15px; margin-left:-30px;}
 .content_content ul li a:hover {text-decoration:underline;}
 .content_content .titel {text-align:center;}
 .content_content .content_1 {padding-right:30px;}
 .content_content .content_2 {padding-left:30px;}

 
 #spoedservice {padding-top:4.5rem !important;}
  
  
 .image_content .visibleXS {display:none;}
 .image_content .content {padding-left:30px;}
 .image_content .content h2 {position:relative; margin-bottom:2rem !important;}
 .image_content .content h2:after {content: ""; position: absolute; left:0; bottom:-10px; height:1px; width:400px; background-color:var(--geel-color);}
 .image_content .content ol {padding-left:20px !important;}
 .image_content .content ol li {padding-bottom:10px;}
 .image_content .content ol li a:hover {text-decoration:underline;}
 .image_content .content ul {list-style-type:none;}
 .image_content .content ul li {padding-left:30px; padding-bottom:10px;}
 .image_content .content ul li:before {content:"\f0e7"; font-family:'Font Awesome\ 5 Free'; font-weight:900; color:var(--geel-color); margin-right:15px; margin-left:-30px;}
 .image_content .content ul li a:hover {text-decoration:underline;}
 .image_content .image {margin-right:60px;}
 .image_content .image img {aspect-ratio:20 / 20; object-fit:cover; position:relative; clip-path: polygon(-200px 0, 140% 0, 80% 100%, 0 100%);}
 
 .content_image .content {padding-right:30px;}
 .content_image .content h2 {position:relative; margin-bottom:2rem !important;}
 .content_image .content h2:after {content: ""; position: absolute; left:0; bottom:-10px; height:1px; width:400px; background-color:var(--geel-color);}
 .content_image .content ol {padding-left:20px !important;}
 .content_image .content ol li {padding-bottom:10px;}
 .content_image .content ol li a:hover {text-decoration:underline;}
 .content_image .content ul {list-style-type:none;}
 .content_image .content ul li {padding-left:30px; padding-bottom:10px;}
 .content_image .content ul li:before {content:"\f0e7"; font-family:'Font Awesome\ 5 Free'; font-weight:900; color:var(--geel-color); margin-right:15px; margin-left:-30px;}
 .content_image .content ul li a:hover {text-decoration:underline;}
 .content_image .image {margin-left:60px;}
 .content_image .image img {aspect-ratio:20 / 19; object-fit:cover; position:relative; clip-path:polygon(-200px 0, 100% 0, 100% 100%, 20% 100%);}
 
 .image .imageBG {height:800px; position:relative; background-size:cover; background-repeat:no-repeat; background-position:center center; background-attachment:fixed;}
 .image .imageBG .overlay {position:absolute; top:0; left:0; width:100%; height:100%; background-color: rgba(0, 0, 0, 0.4); pointer-events: none;}
 .image .imageBG .content {color:var(--wit-color); position:relative; padding-top:200px;}
 .image .imageBG .content h2 {color:var(--wit-color); position:relative; margin-bottom:2rem !important;}
 .image .imageBG .content h2:after {content: ""; position: absolute; left:0; bottom:-10px; height:1px; width:400px; background-color:var(--geel-color);}
 
 .diensten .titel {text-align:center;}
 .diensten .titel p.with-lines {position:relative; text-align: center; font-style: italic;}
 .diensten .titel p.with-lines::before, .diensten .titel p.with-lines::after {content: ""; display: inline-block; width: 150px; height: 1px; background-color:var(--geel-color); vertical-align: middle; margin: 0 15px;}
 .diensten .titel p.with-lines::before {margin-right: 20px;}
 .diensten .titel p.with-lines::after {margin-left: 20px;}
 .diensten .intro {text-align:center;}
 .diensten .dienstenCarousel {margin-top:3rem;}
 .diensten .dienstenCarousel .dienst img {aspect-ratio:9 / 11; object-fit:cover;}
 .diensten .dienstenCarousel .dienst .naam p {font-weight:700; padding-top:0.5rem;}
 .diensten .dienstenCarousel .owl-nav {position:absolute; top:-60px; right:0; display:flex; gap:10px;}
 .diensten .dienstenCarousel .owl-nav button.owl-prev {background-color:var(--geel-color); width:40px; height:40px;}
 .diensten .dienstenCarousel .owl-nav button.owl-next {background-color:var(--geel-color); width:40px; height:40px;}
 .diensten .dienstenCarousel .owl-nav button.owl-prev span {font-size: 30px; position: relative; top: -12px;}
 .diensten .dienstenCarousel .owl-nav button.owl-next span {font-size: 30px; position: relative; top: -12px;}

 
 .reviews {/*background-color:var(--geel-color);*/ background-color:var(--creme-color); position:relative; clip-path: polygon(100px 0, 100% 0, 100% 100%, 0% 100%); margin:0 0 3rem;}
 .reviews .titel {padding:3rem 0;}
 .reviews .wrapper {position:relative; margin-left:auto; margin-right:0; width:100vw; max-width:none; transform:translateX(calc((100vw - 1280px) / 2));}
 .reviews .wrapper .owl-item.active .review {background-color: rgba(255, 255, 255, 0.4); opacity:0.5; transition:all 0.5s ease-in-out;}
 .reviews .wrapper .owl-item.active:not(.owl-item.active + .owl-item.active) .review {background-color:var(--wit-color); opacity:1; transition:all 0.5s ease-in-out;}
 .reviews .wrapper .review {padding:30px;}
 /* .reviews .wrapper .review .naam:before {content:'//'; position:absolute; color:var(--geel-color); font-weight:700;}
 .reviews .wrapper .review .naam p {padding-left:20px;} */

 .klanten_logos {padding:4.5rem 0;}
 .klanten_logos .logoCarousel {display:flex; justify-content:center; align-items:center; flex-wrap:wrap;}
 .klanten_logos .logo {display:flex; align-items:center; justify-content:center; height:100px;}
 .klanten_logos .logo img {max-height:80px; object-fit:contain;}

 
 .slider {position:relative; padding-top:150px;}
 .slider::before, .slider::after {content: ""; position:absolute; bottom:0; width: 900px; height: 50%; background-color:var(--creme-color); z-index:0;}
 .slider::before {left: 0;}
 .slider::after {right: 0;}
 .slider img {aspect-ratio:1560 / 800; object-fit:cover;}
 .slider .overlay {position:absolute; top:0; left:0; width:100%; height:100%;  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%); pointer-events: none;}
 .slider .owl-dots {bottom:30px; position: absolute; right: 30px; z-index: 999; display:flex; gap:10px;}
 .slider button.owl-dot {width:15px; height:15px; background-color:transparent !important; border:1px solid var(--wit-color) !important; border-radius:555px;}
 .slider button.owl-dot.active {width:15px; height:15px; background-color:var(--wit-color) !important; border:1px solid var(--wit-color); border-radius:555px;}
 .slider .content {position:absolute; bottom:100px; color:var(--wit-color);}
 .slider .content h1 {color:var(--wit-color); font-size:3rem !important; font-weight:900;}
 .slider .content p {font-size:20px; font-weight:500; margin-top:-1rem;}
 
 .banner {position:relative; padding-top:150px;}
 .banner::before, .banner::after {content: ""; position:absolute; bottom:0; width: 900px; height: 30%; background-color:var(--creme-color); z-index:-1;}
 .banner::before {left: 0;}
 .banner::after {right: 0;}
 .banner img {aspect-ratio:1560 / 600; object-fit:cover;}
 .banner .bannerBG {position:relative;}
 .banner .bannerBG img {width: 100%; height: 100%; object-fit: cover; object-position:bottom center;}
 .banner .bannerBG .overlay {position:absolute; top:0; left:0; width:100%; height:100%;  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%); pointer-events: none;}
 .banner .content {position:absolute; bottom:50px; color:var(--wit-color);}
 .banner .content h1, .banner .content h2 {color:var(--wit-color); font-size:3rem !important; font-weight:900; margin-bottom:0.5rem !important;}
 .banner .content h2:after {background-color:unset; bottom:0; height:0px; position:relative;}
 .banner .content p {font-size:20px; font-weight:500; margin-top:-1rem;}
 
 .faq .main-titel {position:relative;}
 .faq .main-titel h2:after {content: ""; position:absolute; left:0; bottom:-10px; height:1px; width:400px; background-color:var(--geel-color);}
 .faq .image img {position:relative; clip-path:polygon(-200px 0, 100% 0, 100% 100%, 20% 100%);}
 .faq .wrapper {padding-top:1.5rem; padding-right:60px;}
 .faq .wrapper .titel {margin-top:4rem; color:var(--zwart-color); padding-bottom:1rem;}
 .faq .accordion {border-radius:0; --bs-accordion-border-color:none !important;}
 .faq .accordion .accordion-header {margin-bottom:15px; border-radius:0px; border-bottom:1.5px solid var(--geel-color);}
 .faq .accordion .accordion-item .accordion-button {background-color:transparent; padding: .5rem 1rem 1.25rem 0; font-weight:400;}
 .faq .accordion .accordion-item .accordion-button:focus {border-color:unset; box-shadow:unset; font-weight:500;}
 .faq .accordion .accordion-item .accordion-button:not(.collapsed) {color:var(--zwart-color); font-weight:600; box-shadow:none; border-bottom:1px solid var(--geel-color);}
 .faq .accordion .accordion-item .accordion-button::after {background-image: url('images/plus.svg'); background-size:.75rem; background-position:center center; background-color:var(--wit-color); border-radius:50%; width:1.5rem; height:1.5rem;*/}
 .faq .accordion .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;}
 .faq .accordion .accordion-item .accordion-body {margin-top:-2rem; padding:1rem 3rem 2rem 0rem;}
 .faq .accordion .accordion-item .accordion-body ul {-webkit-padding-start:15px !important; padding-left:15px !important;}
 .faq .accordion .accordion-item .accordion-body a {font-weight:500; text-decoration:underline;}
 .faq .accordion .accordion-item .accordion-body button a {text-decoration:none;}
 

 
 input[type="text"], input[type="tel"], input[type="email"], select {width:100%; bordeR:1px solid #d8d8d8; height:40px; padding-left:10px;}
 textarea {width:100%; border:1px solid #d8d8d8; padding:5px 10px;}
 input[type="submit"] {background-color:var(--zwart-color); border:1px solid var(--zwart-color); color:var(--wit-color); padding:5px 30px; transition:all .2s ease-in-out;}
 input[type="submit"]:hover {background-color:var(--geel-color); border:1px solid var(--geel-color); color:var(--zwart-color); transition:all .2s ease-in-out;}
 
 #offerte form {margin-top: 40px;}
 #offerte.content_content .content_2 {background-color:var(--zwart-color); color:var(--wit-color); padding:30px 30px 60px; margin-top:80px;}
 #offerte.content_content .content_2 h2 {color:var(--wit-color);}
 #offerte.content_content .content_2 i {color:var(--geel-color);}
 
 /*--------------------------------------------------------------
  >>> Footer:
  ----------------------------------------------------------------*/
 footer {background-color:var(--zwart-color); color:var(--wit-color); padding:90px 0 0; font-size:14.5px;} 
 footer h3 {color:var(--geel-color);}
 footer i {padding-right:5px;}
 footer a:hover {text-decoration:underline;}
 footer .logo {margin-top:-0.5rem; margin-bottom:1.5rem;}
 /* footer .logo img {width:200px; height:auto; filter: brightness(0) invert(1);} */
 footer .logo img {width:250px; height:auto;}
 footer .kevin {margin-bottom:1rem;}
 footer .kevin img {aspect-ratio:100/100; width:120px; height:120px;}
 footer .naam {font-size:18px; font-weight:700;}
 footer ul {list-style-type:none;}
 footer .info {font-size:12.5px;}
 footer .info .line {border-top:1px solid var(--geel-color); margin-top:90px;}
 footer .info .line .copy {padding-top:5px;}
 footer .info .line .author {float:right; padding-top:5px}
 
 footer .snelmenu {margin-top:3rem;}
 footer .snelmenu select {background-color:transparent; color:var(--wit-color) !important; border:1px solid rgba(255,255,255,0); border-bottom:1px dotted #979797; margin-top:0; padding:5px 0; width:200px;}
 
 .zwevende-hoek-knop {position: fixed !important; bottom:20px !important; left: 20px !important; z-index:99999 !important; background-color:var(--geel-color); padding:10px 30px; border-radius:10px;}
 .zwevende-hoek-knop p {margin-bottom:0; font-weight:500;}
 
 /*--------------------------------------------------------------
 >>> Media queries:
 ----------------------------------------------------------------*/
 @media only screen and (max-width : 1499px) {
 .reviews .titel {padding:3rem 0 3rem 3rem;}
 .reviews .wrapper {transform: translateX(calc((100vw - 1180px) / 2));}
 }
 
 @media only screen and (max-width : 1399px) {
 .reviews .titel {padding:3rem 0 3rem 1rem;}
 .reviews .wrapper {transform: translateX(calc((100vw - 1080px) / 2));}
}
 
 
 @media only screen and (max-width : 1299px) {
 .container-fluid {padding-left:60px !important; padding-right:60px !important;}
 header .nav {margin-left:-1rem;}
 header .nav ul li {padding:0 10px;}
 header .nav ul li.btn-geel:before {padding-right:5px;}
 header .telefoonnummer:before {padding-right:5px;}
 
 .reviews .titel {padding:3rem 0 3rem 3.5rem;}
 .reviews .wrapper {transform: translateX(calc((100vw - 980px) / 2));}
 }
 
 
 
 @media only screen and (max-width : 1199px) {
 header .nav {justify-content:left;}
 .slider .content {bottom:30px; left:30px;}
 .reviews .titel {padding:3rem 0 1.5rem 4rem;}
 .reviews .wrapper {transform: translateX(calc((100vw - 780px) / 2));}
 
 .image_content .content {padding-left:45px;}
 .image_content .image {margin-right: 45px;}
 
 .content_image .content {padding-right:45px;}
 .content_image .image {margin-left: 45px;}
 
 .projecten p.with-lines::before, .projecten p.with-lines::after {width: 250px;}
 
 }
 
 
 
 
 @media only screen and (max-width : 991px) {
 body {line-height:1.8 !important;}
 .container {padding-right:1.5rem !important; padding-left:1.5rem !important; max-width:100%;}
 .container-fluid {padding-left:1.5rem !important; padding-right:1.5rem !important;}
 h1, .h1 {font-size:2.25rem !important;}
 header {height:100px;}
 header.site-header.active {height:70px;}
 header.site-header.active .review {padding-top:15px; transition: all ease-out .25s;}
 header .telefoonnummer {display:none;}
 button#responsive-menu-pro-button.scrolled {top:5px !important; transition: all ease-out .25s;}
 
 .slider {padding-top:100px;}
 .slider .content h1 {font-size:2.5rem !important;}
 .slider .content p {font-size:18px;}
 .slider button.owl-dot, .slider button.owl-dot.active {width:12.5px; height:12.5px;}
 
 .banner {padding-top:100px;}
 .banner .content {bottom:15px; left:30px;}
 .banner .content h1, .banner .content h2 {font-size:2.5rem !important;}
 .banner .content p {font-size:18px;}
 
 .content .titel p.with-lines, .diensten .titel p.with-lines {margin-top:-5px;}
 
 .diensten .intro {margin-bottom:1.5rem;}
 .diensten .dienstenCarousel .owl-nav {top:-50px;}
 
 .image_content .visibleXL {display:none;}
 .image_content .visibleXS {display:block;}
 .image_content .image {margin-right:0;}
 .image_content .image img {aspect-ratio: 30 / 20;}
 .image_content .content {padding-left: 0;}
 
 .image_content#poster .col-lg-6 {width:50% !important;}
 .image_content#poster .visibleXL {display:block;}
 .image_content#poster .visibleXS {display:none;}
 .image_content#poster .image img {aspect-ratio:unset;}

 .image .imageBG {height:700px;}
 
 .content_image .content {padding-right:0;}
 .content_image .image {margin-left:0; padding-top:1rem;}
 .content_image .image img {aspect-ratio: 30 / 20;}
 
 .reviews .titel {padding:3rem 0 1.5rem 5rem;}
 .reviews .wrapper {transform: translateX(calc((100vw - 550px) / 2));}
 
 .klanten_logos {padding:3rem 0;}
 
 footer .info .line .copy {text-align:center;}
 footer .info .line .author {float:none; text-align:center; padding:0; margin-top:-1rem;}
 footer .kolom3, footer .kolom4 {margin-top:2rem;}
 
 }
 
 
 
 @media only screen and (max-width : 767px) {  
 .slider .content {left:15px;}
 .slider .content h1 {font-size:2.25rem !important}
 .slider .content p {font-size:16px;}   
 .titel p.with-lines, .diensten .titel p.with-lines, .projecten .titel p.with-lines {font-size:14px;}
 .content .titel p.with-lines::before, .content .titel p.with-lines::after {width:110px;}
 .diensten .titel p.with-lines::before, .diensten .titel p.with-lines::after {width:110px;}
 .projecten .titel p.with-lines::before, .projecten .titel p.with-lines::after {width:110px;}
 .diensten .dienstenCarousel .owl-nav button.owl-prev span, .diensten .dienstenCarousel .owl-nav button.owl-next span {top:-10px;}
 
 .projecten .projecten-items .row {argin-right:calc(-0.15 * var(--bs-gutter-x)); margin-left: calc(-0.15 * var(--bs-gutter-x));}
 .projecten .projecten-items .row>* {padding-right: calc(var(--bs-gutter-x) * 0.15); padding-left: calc(var(--bs-gutter-x) * 0.15);}
 .projecten .projecten-items .wrapper {margin:5px 0;}
 .projecten .projecten-items button.btn {font-size:14px;}
 
 .banner .content {left:15px;}
 .banner .content h1, .banner .content h2 {font-size:2.25rem !important;}
 .banner .content p {font-size:16px;}
 
 .image .imageBG {height:650px;}
 .image .imageBG .content {padding-top:100px;}
 .image .imageBG .content button.btn.btn-geel {padding:10px 20px;}
 
 .reviews {clip-path:unset;}
 .reviews .titel {padding:3rem 0 0.5rem 0rem;}
 .reviews .wrapper {transform:unset; padding-left:1.5rem;}
 .reviews .wrapper .review {padding:15px;}
 
 .klanten_logos {padding:2rem 0;}
 
 .faq .wrapper {padding-right:0;}
 .faq .accordion .accordion-item .accordion-body {padding:1rem 0rem 1rem 0rem;}
 .faq .image { padding-top:3rem;}
 
 .content_content .content_1 {padding-right:0;}
 .content_content .content_2 {padding-top:3rem;}
 #offerte.content_content .content_2 {display:none;}
 
 #projecten .projecten-items {padding-top:75px;}
 
 #spoedservice { padding-top:3rem !important;}
 
 footer {padding:60px 0 0;}
 footer .kolom1, footer .kolom2 {padding-bottom:2rem;}
 footer .kolom3 {margin-top:0;}
 

 }
 
 
 
 @media only screen and (max-width : 576px) {
 body {font-size:15px !important; line-height:1.6 !important;}
 .container {padding-right:1rem !important; padding-left:1rem !important; max-width:100%;}
 .container-fluid {padding-left:1rem !important; padding-right:1rem !important;}
 h1, .h1 {font-size:1.75rem !important;}
 .slider .content {bottom:15px;}
 .slider .content h1 {font-size:1.75rem !important}
 .slider .content p {font-size:14px;} 
 .slider .owl-dots {bottom:15px; right:15px; gap:5px;}
 .slider button.owl-dot, .slider button.owl-dot.active {width:10px; height:10px;} 
 
 .banner .content {bottom:0; left:10px;}
 .banner .content h1, .banner .content h2 {font-size:1.5rem !important;}
 .banner .content p {font-size:14px; padding-top:0.25rem;}
 
 header.site-header .review {display:none;}
 header.site-header .logo {text-align:left; padding-top:15px; margin-left:0;}
 header.site-header .logo img {width:200px;}
 header.site-header.active .review {display:none;}
 header.site-header.active .review .stars i {font-size:10px;}
 header.site-header.active .review .cijfer {font-size:12px; top:6px;}
 header.site-header.active .logo {text-align:left; margin-left:0; margin-top:-0;}
 
 .content .titel p.with-lines::before, .content .titel p.with-lines::after {width:20px; margin:0 5px;}
 .diensten .titel p.with-lines::before, .diensten .titel p.with-lines::after {width:20px; margin:0 5px;}
 .projecten .titel p.with-lines::before, .projecten .titel p.with-lines::after {width:20px; margin:0 5px;}
 .diensten .dienstenCarousel .owl-nav button.owl-prev span, .diensten .dienstenCarousel .owl-nav button.owl-next span {top:-6px;}
 
 .content_content .content_2 {padding-top:0; padding-left:0;}
 
 .content_image .content h2:after {width:300px;}
 
 .klanten_logos {padding:0 0 1.5rem;}
 
 .image_content .image {margin-top:1rem;}
 .image_content#poster .col-lg-6 {width:100% !important;}
 .image_content#poster .visibleXL {display:none;}
 .image_content#poster .visibleXS {display:block;}
 .image_content#poster .image img {aspect-ratio:unset;}
 
 .reviews {margin:2rem 0;}
 
 #projecten .projecten-items {padding-top:60px;}
 .filter-buttons {margin-bottom:0;}
 .projecten-items .wrapper .wrapper-content {position:relative; opacity:1; background-color:unset; top:15px;}
 .projecten-items .wrapper .wrapper-content .content {/*top:0; transform:translate(-50%, 0%);*/ position:relative;}
 .projecten-items .wrapper .wrapper-content .content h5 {font-size:1rem; padding-top:0.5rem; border-bottom:none;}
 .projecten-items .wrapper .afbeelding img {padding-top:30px;}
 
 #spoedservice { padding-top:2rem !important;}
 
 footer .info .line .copy {line-height:1.4;}
 footer .info .line .author {margin-top:-0.5rem;}
 
 .zwevende-hoek-knop {max-width:280px; padding:10px; right:20px;}
 }