:root{
    --white : #fff;
    --blue : #163962;
    --yellow : #fdb046; 
    --lightgrey : #f5f6f7;
}

body{height: 100%; position: relative;font-family: Nunito;font-weight: 300;color: var(--blue);line-height: 1.5;font-size:16px;}
/* #page.site{min-height: 100vh; display: flex; flex-direction: column; padding-bottom: 532px; padding-top: 135px;} */
#content.site-content{min-height: 100vh; display: flex; flex-direction: column; padding-top: 135px; padding-bottom: 342px;}

section.error-page{padding: 100px 0;}

img{max-width: 100%; border-radius: 10px;}
.cover-photo{border-radius: 10px;}
a{color:#398cab;transition: 300ms color ease;}
a:hover{text-decoration: underline;color: #398cab;}
p{margin-bottom:0;}

h1,h2,h3,h4,h5,h6{font-family: 'Montserrat';font-style: normal; text-transform: uppercase; margin-bottom: 10px;color:var(--blue); font-weight: 700;}
h1{font-size: 50px; margin-bottom: 25px;}
h2{font-size: 40px; margin-bottom: 20px;}
h3{font-size: 40px; margin-bottom: 15px;}
h4{font-size: 25px;}
h5{font-size: 18px;}
h6{font-size: 15px;}

h1.line:after,h2.line:after,h3.line:after,h4.line:after,h5.line:after,h6.line:after{content: ''; height: 2px; width: 120px; background-color: var(--yellow); display: block; margin: 0 auto;}
h1 span,h2 span,h3 span,h4 span,h5 span,h6 span{position: relative;}
h1 span:after,h2 span:after,h3 span:after,h4 span:after,h5 span:after,h6 span:after{content: ''; height: 2px; width: 100%; background-color: var(--yellow); display: inline-block; position: absolute; bottom: 0; right: 0; left: 0;}

/* .line{border-bottom: 2px solid var(--yellow);} */
.subtitle{margin: 0 0 20px 0;}
strong{font-weight: bold;}

hr.yellow{border-color: var(--yellow); border-width: 3px;}
.text-yellow{color: var(--yellow);}
.text-blue{color: var(--blue);}

.sectionpadding-none{padding: 0;}
.sectionpadding-small{padding: 35px 0;}
.sectionpadding-medium{padding: 70px 0;}
.sectionpadding-large{padding: 100px 0;}

.bg-white{background-color: #fff;}
.bg-lightgrey{background-color: #f5f6f7;}
.bg-blue{background-color: var(--blue); color: var(--white);}
.bg-blue h1,.bg-blue h2,.bg-blue h3,.bg-blue h4,.bg-blue h5,.bg-blue h6{color: var(--white);}

.btn{border-radius: 10px;font-weight: 600;font-size: 16px;padding: 9px 30px 7px 30px; transition: all 150ms linear;margin-top: 25px; text-transform: uppercase;}
.btn:focus{outline-width: 0;}
.btn-rounded{border-radius: 50px;}

.btn-yellow{background-color: var(--yellow); color: #fff;}
.btn-yellow:hover{background-color: #b68035; color: #fff;}
.btn-blue{background-color: var(--blue); color: var(--white);}
.btn-blue:hover{background-color: #102844; color: var(--white);}

.rand-top, .rand-bottom{border-width: 6px;}
.rand-top{border-top-style: solid;}
.rand-bottom{border-bottom-style: solid;}
.rand-col-blue{border-color: var(--blue);}
.rand-col-yellow{border-color: var(--yellow);}
/* .border-pos-top{border-top: 10px solid;} */






header{background-color: var(--blue); padding: 20px 0; border-top: 15px solid var(--yellow);}
header .logo img{display: block;width: auto; height: 80px;}
header .navbar{height: 100%; justify-content: flex-end;}
header .navbar .navbar-nav li{margin: 0 25px;}
header .navbar .navbar-nav li a{color: var(--white); font-size: 18px; font-weight: 400; text-decoration: none; text-transform: uppercase; position: relative; display: block;}
header .navbar .navbar-nav li a:after{content: ''; height: 2px; width: 100%; display: block; position: absolute; bottom: -3px; background-color: var(--yellow); transition: .15s ease; opacity: 0;}
header .navbar .navbar-nav li a:hover::after{opacity: 1;}
header .navbar .navbar-nav li.active a:after{opacity: 1;}

header .btn-container{display: flex; justify-content: flex-end; align-items: center; height: 100%;}
header .btn-container .btn{margin: 0; font-size: 16px;}



header .navbar .navbar-nav li a:hover{color: #fff; transition: all 150ms ease-in-out;}
/* header .navbar .navbar-nav li a:after{display: none;} */
header .navbar .navbar-nav li .dropdown-toggle:hover .dropdown-menu{display: block;}
header .navbar .navbar-nav ul.dropdown-menu{padding: 12px; width: 180px; margin-left: -12px; background-color: rgb(56, 56, 56); color: #fff;border: 0; margin-top: 15px;}
header .navbar .navbar-nav ul.dropdown-menu li.menu-item{margin: 12px 0;}


/* header a.bedrijfsnaam{margin-left: 35px;}
header a.bedrijfsnaam img{height: 50px; margin-top: -10px;} */

header .socials{float: right;margin: 2px 0 0 20px;}
header .socials a{width: 30px; height: 35px; line-height: 30px; text-align: center; margin: 0 5px; transition: all .1s ease-in-out;}
header .socials a i{color: #aeaeae; font-size: 18px; transition: all .15s ease-in-out;}
header .socials a:hover i{color: #fff;}

.btn-social{display:block;font-size: 26px;float: left;color:#fff;width:35px;height: 35px;line-height: 36px;border-radius: 3px; margin:0 15px 0 0;text-align: center;transition:all 130ms ease-in;}
.btn-social:hover{background-color:#826A4F;color:#fff;}
.btn-social.mail{font-size: 21px;line-height: 36px;}





/* MOBIEL MENU */
/* .nav-button-holder{display: block;position: absolute;z-index:101;left:calc(30% - 108px);padding: 0;height: 65px; right: 20px;} */
.nav-button-holder{display: flex; justify-content: flex-end; align-items: center; height: 100%;}
.nav-holder{display: none;}
.nav-button{background:none;border:none;cursor:pointer; padding: 5px 5px 29px 5px; outline-width: 0;}
.nav-button:focus{outline-width: 0;}
.icon-bar, .icon-bar1, .icon-bar2{display: block;height: 3px;width: 34px;background:rgb(224, 223, 223);margin-left:auto;margin-right:auto;position:relative;} 
.icon-bar1, .icon-bar2{width:30px;}
.icon-bar:before, .icon-bar:after  {background:rgb(224, 223, 223);content: "";height: 100%;left: 0;position: absolute;bottom: -11px;right:0;}
.icon-bar:after { bottom: -22px;left:0;top: auto; }

.nav-button:hover .icon-bar:before, .nav-button:hover .icon-bar:after{ left:0;}
.icon-bar, .icon-bar1, .icon-bar2, .nav-button .icon-bar:before, .nav-button .icon-bar:after { -webkit-transition:all 0.3s ease 0s;-ms-transition:all 0.3s ease 0s;transition: all 0.3s ease 0s;}

body.has-active-menu { overflow: hidden; }

.menu-mask{position: fixed;z-index: 99;top: 0;left: 0;width: 0;height: 0;opacity: 0;}
.menu-mask.is-active{width:100%;height:100%;opacity:0.9;}

.mobile-menu-holder{position: fixed;z-index: 9999;top: 0;left: 0;overflow-x: hidden;width: 30%; border-top: 5px solid var(--yellow); height: 100%;background: var(--blue);opacity: 0;padding:0 25px 0 30px;box-shadow: 6px 0px 50px 3px rgba(0,0,0,0.25); -webkit-transform: translateX(-400px);-ms-transform: translateX(-400px);transform: translateX(-400px);-webkit-backface-visibility: hidden;-webkit-transition: all 0.7s cubic-bezier(0.25, 1, 0.35, 1) 0s;-moz-transition: all 0.7s cubic-bezier(0.25, 1, 0.35, 1) 0s;-o-transition: all 0.7s cubic-bezier(0.25, 1, 0.35, 1) 0s;-ms-transition: all 0.7s cubic-bezier(0.25, 1, 0.35, 1) 0s;transition: all 0.7s cubic-bezier(0.25, 1, 0.35, 1) 0s;}
.mobile-menu-holder.is-active{ opacity: 1;-webkit-transform: translateX(0px);-ms-transform: translateX(0px);transform: translateX(0px);}

.modal-menu-container{position:relative;}

.exit-mobile{float:right;cursor: pointer;padding: 28px 8px;display: inline-block; margin-top: 8px;}
.icon-bar1{top:3px;-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);}
.icon-bar2{-webkit-transform: rotate(-45deg);-ms-transform: rotate(-45deg);transform: rotate(-45deg);}

.mobile .logo img{height: 45px;}
.menu-mobile{font-size:0;margin:0 auto;margin-left:0;padding:90px 0 0 20px;}
.menu-mobile li{font-size:24px;padding-top:16px;list-style:none;}
.menu-mobile li a{color:var(--white);display: inline-block;line-height:1.1;text-transform: uppercase; position: relative;}
.menu-mobile li a:hover, .menu-mobile li a:focus{background:none;text-decoration: none;}
.menu-mobile li:hover > a, .menu-mobile li.current-menu-item > a{color:#fff;}
.menu-mobile li a:after{content: ''; height: 2px; width: 100%; display: block; position: absolute; bottom: -3px; background-color: var(--yellow); transition: .15s ease; opacity: 0;}
.menu-mobile li a:hover::after{opacity: 1;}
.menu-mobile li.active a:after{opacity: 1;}


.menu-mobile .dropdown-toggle::after{display: none;}
.menu-mobile .dropdown-menu{display: block;position: static;background-color: transparent;width:100%;border: 0;margin-bottom: 15px;}
.menu-mobile .dropdown-menu li{padding: 6px 0 6px 25px;}
.menu-mobile ul{margin-left:0px;padding-left:10px;}
.menu-mobile ul li{font-size:15px;font-weight:500;padding-top:16px;text-transform:none;padding-left:8px;display:block;}

.mobile-socials{margin: 50px 0 0 20px; font-size: 20px;}
.mobile-socials a{display: inline-block; margin: 0 5px 0 0;}
.mobile-socials a i{margin: 0 5px; font-size: 25px;color: var(--white); transition: all .15s ease-in-out;}
.mobile-socials a:hover i{color: #fff;}
/* MENU */





/* FOOTER */
footer{margin-top: -342px; background-color: var(--blue); color: var(--white); font-size: 17px; padding: 50px 0;}
footer h5{color: var(--white); text-align: center; margin-bottom: 20px;}
footer .logo{display: block; max-width: 150px; max-height: 92px;}
footer .footer-text{display: flex; justify-content: space-between; align-items: center;}
footer .footer-text .text{width: 355px;}
footer .footer-text .text #bedrijfsnaam{display: block;}
footer .footer-text .image img{width: 150px;}

footer .gegevens .item{display: flex; justify-content: flex-start; align-items: center; margin-bottom: 13px;}
footer .gegevens .item i{font-size: 24px; width: 25px; margin-right: 15px;}
footer .gegevens .item a{color: var(--white);}
footer .gegevens .item.mobiel{padding-left: 43px; margin-bottom: 0;}

footer .social-footer{display: flex; justify-content: center; align-items: center;}
footer .social-footer a{display: inline-block; margin: 0 10px;}
footer .social-footer a i{font-size: 32px; color: var(--white);}



/* BANNER */
section.banner .slider-banner-container .slide{height: 700px; margin-bottom: -10px;}
section.banner .slider-banner-container .slide .slide-container{width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,0.1);}
section.banner .slider-banner-container .slide .slide-container hr{position: absolute; top: 220px; left: 0; width: 38%;}
section.banner .slider-banner-container .slide .slide-container .container{height: 100%; display: flex; justify-content: flex-start; align-items: flex-start;}
section.banner .slider-banner-container .slide .slide-container .content-container{max-width: 400px; background-color: var(--blue); padding: 120px 50px 30px 50px; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px;}
section.banner .slider-banner-container .slide .slide-container .content-container .slide-icon{margin-bottom: 60px;}
section.banner .slider-banner-container .slide .slide-container .content-container .slide-text{color: var(--white); font-size: 18px;}
section.banner .slider-banner-container .slide .slide-container .content-container .slide-text .btn{font-size: 16px; display: block; margin: 20px auto 0 auto;}

button.slick-arrow:hover{cursor: pointer;}
button.slick-arrow:focus{outline-width: 0;}

section.banner .slider-banner-container button.slick-arrow{border: 0; background: transparent; position: absolute; top: 50%; z-index: 9;}
section.banner .slider-banner-container button.slick-arrow i{font-size: 50px; color: var(--white);}
section.banner .slider-banner-container button.prev{left: 15px;}
section.banner .slider-banner-container button.next{right: 15px;}


/* Banner 2 */
/* section.banner-2{padding: 0 0 50px 0;} */
section.banner-2 .banner-top{height: 600px; padding: 120px 0 350px 0; position: relative;}
section.banner-2 .banner-top h1{text-transform: none; margin-bottom: 20px;}
section.banner-2 .banner-top .text{font-size: 20px; font-weight: 800; max-width: 480px; position: relative;}
section.banner-2 .banner-top hr{position: absolute; left: -50vw; top: -10px; width: 73vw;}
section.banner-2 .banner-content{margin-top: -300px; position: relative;}
section.banner-2 .banner-content.text{margin-top: -250px;}
section.banner-2 .banner-content .banner-tekstblok{background-color: var(--white); padding: 70px 30px 100px 30px; margin: 0 50px; box-shadow: 1px 3px 8px -1px rgba(0,0,0,0.3);}
section.banner-2 .banner-content .banner-tekstblok h2, section.banner-2 .banner-content .banner-tekstblok h3{text-transform: none;}
section.banner-2 .banner-content .afbeelding{height: 330px; max-height: 380px; width: 35%; position: absolute; bottom: calc(100% - 35px); left: 55%; min-width: 500px; max-width: 550px; box-shadow: 1px 3px 8px -1px rgba(0,0,0,0.3);}


/* banner contact */
section.banner-2 .banner-content .contact-container{background-color: var(--lightgrey); box-shadow: 1px 3px 8px -1px rgba(0,0,0,0.3);}
section.banner-2 .banner-content .contact-container .left{padding: 20px 100px 10px 50px;}
section.banner-2 .banner-content .contact-container .left h2{color: var(--yellow); text-transform: none;}
section.banner-2 .banner-content .contact-container .right{background-color: var(--yellow); height: 100%; color: #000; padding: 30px; position: relative;}
section.banner-2 .banner-content .contact-container .right h4{text-transform: none; color: #000; margin-bottom: 30px;}
section.banner-2 .banner-content .contact-container .right .gegevens{display: flex; flex-direction: column;}
section.banner-2 .banner-content .contact-container .right .gegevens .item{display: flex; align-items: center; margin: 0 0 20px 0;}
section.banner-2 .banner-content .contact-container .right .gegevens .item i{font-size: 35px; display: inline-block; margin: 0 15px 0 0;}
section.banner-2 .banner-content .contact-container .right .gegevens .item .text{font-size: 20px; color: #000;}
section.banner-2 .banner-content .contact-container .right .gegevens .item .text a{color: #000;}
section.banner-2 .banner-content .contact-container .right .socials{position: absolute; bottom: 20px; left: 20px;}
section.banner-2 .banner-content .contact-container .right .socials a{font-size: 30px; color: var(--blue); margin-right: 5px;}

form label{width: 100%;}
form input.wpcf7-form-control, form textarea.wpcf7-form-control{width: 100%; border: 0; padding: 7px 10px;}
form textarea.wpcf7-form-control{height: 150px;}
form input[type='submit']{position: absolute; right: 20px; bottom: 20px; display: inline-block; color: #000; height: 60px; width: 60px; border-radius: 50%; background-color: var(--white); background-image: url(../images/send.svg); background-size: 60%; background-position: center center; background-repeat: no-repeat; box-shadow: 1px 3px 8px -1px rgba(0,0,0,0.2);}
/* form input[type='submit']:after{content: ''; background-image: url(../images/send.svg); height: 100%; width: 100%;} */
form input[type='submit']:hover{cursor: pointer;}

section.tekst-onder-banner{padding: 50px 0; font-weight: 600;}


/* USPS */
section.usps .usp{padding-top: 50px;}
section.usps .usp .usp-container{background-color: var(--white); border-radius: 10px; position: relative; padding: 70px 20px 20px 20px; box-shadow: 1px 3px 8px -1px rgba(0,0,0,0.3);}
section.usps .usp .icon-container{position: absolute; display: flex; justify-content: center; top: -50px; left: 0; right: 0;}
section.usps .usp .icon-container .icon-round{height: 100px; width: 100px; border-radius: 50px; display: block; background-color: var(--blue); display: flex; justify-content: center; align-items: center; box-shadow: 1px 3px 8px -1px rgba(0,0,0,0.3);}
section.usps .usp .icon-container .icon-round img{height: 50px; width: 50px;}
section.usps .usp h4, section.usps .usp .text{text-align: center;}
section.usps .usp .text{padding: 0 50px;}

section.usps .col-md-4:nth-child(3n+1) .usp{margin-right: 30px;}
section.usps .col-md-4:nth-child(3n+2) .usp{margin-right: 15px; margin-left: 15px;}
section.usps .col-md-4:nth-child(3n+3) .usp{margin-left: 30px;}



/* TEKSTBLOK */
section.tekstblok .content{height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;}
section.tekstblok .photo{border-radius: 10px; box-shadow: 1px 3px 8px -1px rgb(0, 0, 0,.3);}
section.tekstblok .order-1 .photo{margin-right: 50px;}
section.tekstblok .order-12 .photo{margin-left: 50px;}

/* RECENT PROJECTEN */
section.recent-projects h1, section.recent-projects h2, section.recent-projects h3{text-align: center; margin-bottom: 50px;}
section.recent-projects .project{text-align: center;}
section.recent-projects .project .thumbnail{padding-bottom: 80%; border-radius: 10px; margin-bottom: 15px; box-shadow: 1px 3px 8px -1px rgb(0, 0, 0,.3);}
section.recent-projects .project h4, section.recent-projects .project h5{text-align: center;}
section.recent-projects .project a.link{display: inline-block; margin-top: 15px;}
section.recent-projects .button-container{text-align: center; margin-top: 10px;}


/* DIENSTEN BLOCK */
section.diensten-block h3{text-align: center; margin-bottom: 50px;}
section.diensten-block .dienst{display: block; margin: 0 10px 40px 10px;}
section.diensten-block .dienst:hover{text-decoration: none;}
section.diensten-block .dienst .thumbnail{height: 280px; border-radius: 10px; overflow: hidden; box-shadow: 1px 3px 8px -1px rgb(0, 0, 0,.3);}
section.diensten-block .dienst .thumbnail .over h4{text-align: center; color: var(--white);}
section.diensten-block .dienst .thumbnail .over{background-color: rgba(22, 57, 98, 0.3); display: flex; justify-content: center; align-items: center; height: 100%; width: 100%; padding: 20px; transition: .15s ease;}
section.diensten-block .dienst:hover .thumbnail .over{background-color: rgba(22, 57, 98, 0.6);}
section.diensten-block .button-container{text-align: center; margin-top: 30px;}

/* RECENT NEWS BLOCK */
section.recent-news{position: relative;}
section.recent-news h3{margin-bottom: 50px;}
section.recent-news .back-stripe{background-color: var(--yellow); position: absolute; top: 35%; left: 0; right: 0; width: 100%; height: 60px; box-shadow: 1px 3px 8px -1px rgb(0, 0, 0,.3);}
.news-post .thumbnail{padding-bottom: 58%; margin-bottom: 20px; border-radius: 15px; box-shadow: 1px 3px 8px -1px rgb(0, 0, 0,.3);}
.news-post .text{font-weight: 600;}
.news-post .text a{font-weight: 500;}

/* SINGLE NEWS */
body.single-post section.banner-2{padding-bottom: 40px;} 

section.reviews h1, section.reviews h2, section.reviews h3{margin-bottom: 120px; text-align: center;}
section.reviews .review .review-container{background-color: var(--white); border-radius: 10px; position: relative; padding: 70px 20px 20px 20px; box-shadow: 1px 3px 8px -1px rgba(0,0,0,0.3);}
section.reviews .review .icon-container{position: absolute; display: flex; justify-content: center; top: -50px; left: 0; right: 0;}
section.reviews .review .icon-container .icon-round{height: 100px; width: 100px; border-radius: 50px; display: block; background-color: var(--blue); display: flex; justify-content: center; align-items: center; box-shadow: 1px 3px 8px -1px rgba(0,0,0,0.3);}
section.reviews .review .icon-container .icon-round img{height: 50px; width: 50px;}
section.reviews .review .review-container .text{display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;}
section.reviews .review .review-container .text .naam{font-size: 18px; font-weight: 700;}
section.reviews .review .review-container .text .innertext{width: 90%; margin: 15px auto; text-align: center; font-weight: 700;}
section.reviews .sub-text{margin-top: 30px; text-align: center; font-weight: 700;}
section.reviews .button-container{text-align: center;}


/* CONTACT BLOCK */
section.contact-block .photo{object-fit: cover; border-radius: 50%; box-shadow: 4px 12px 50px rgba(0,0,0,.2);}
section.contact-block .text{display: flex; flex-direction: column; height: 100%; justify-content: center; align-items: flex-start;}
section.contact-block h4{text-transform: none; margin-bottom: 30px;}
section.contact-block .btn{margin-top: 40px;}

section.contact-block .info-blok{margin-left: 40px; font-size: 18px; font-weight: 600; background-color: var(--white); padding: 20px; box-shadow: 0px 3px 10px rgba(0,0,0,.2);}
section.contact-block .info-blok .info2{display: flex; align-items: center;}
section.contact-block .info-blok .info2 img{max-width: 150px; height: auto;}


/* TEAMLEDEN */
section.teamleden h1, section.teamleden h2, section.teamleden h3{margin-bottom: 30px; text-align: center;}
section.teamleden .teamlid{margin: 15px 0;}
section.teamleden .teamlid .portret{border-radius: 50%;}
section.teamleden .teamlid .info{margin-top: 10px; text-align: center;}
section.teamleden .teamlid .info h5{text-align: center;}

/* QUOTE */
section.quote{position: relative;}
section.quote h1, section.quote h2, section.quote h3{text-transform: none;}
section.quote h1, section.quote h2, section.quote h3, section.quote .quote-text{text-align: center;}
section.quote .quote-text{font-weight: 700; font-size: 22px; max-width: 80%; margin: 0 auto;}
section.quote .button-container{display: flex; justify-content: center; margin-top: 50px;}
section.quote img.icon-background{position: absolute; bottom: 0; right: 0; max-height: 35%;}


/* GALERIJ */
section.galerij .galerij-item{padding-bottom: 70%; box-shadow: 0px 3px 8px rgba(0,0,0,.2); margin: 15px 0;}


/* PROJECTEN ARCHIEF */
.page-id-23 section.banner-2{background-color: var(--lightgrey);}
section.project-archive{padding: 50px 0; background-color: var(--lightgrey);}
section.project-archive .grid-item{width: calc(33.33% - 5px); display: inline-block;}
section.project-archive .project{text-decoration: none; padding: 0 20px; display: block; margin-bottom: 30px;}
section.project-archive .project .thumbnail{padding-bottom: 70%; margin-bottom: 20px; box-shadow: 0px 3px 8px rgba(0,0,0,.2);}
section.project-archive .project .text{margin-bottom: 10px;}
section.project-archive .project .text-link{font-size: 18px; font-weight: 600;}

/* SINGLE PROJECTS */
.single-projects{background-color: var(--lightgrey);}
.single-projects .banner-2{padding-bottom: 50px;}

/* filter */
section#filter{padding: 0 0 15px 0;}
section#filter .button-group{display: flex; justify-content: center; flex-wrap: wrap;}
section#filter .button-group button{margin: 0 10px 15px 10px; padding: 5px; border-radius: 0; text-transform: none; font-size: 17px; background-color: transparent; display: flex; justify-content: space-between; align-items: center; transition: .15s ease;}
section#filter .button-group button span{font-size: 20px; margin-right: 10px; background-color: var(--white); height: 30px; width: 30px; display: flex; justify-content: center; align-items: center; box-shadow: 1px 1px 5px rgba(0,0,0,.2);}
section#filter .button-group button span i{opacity: 0;}
section#filter .button-group button.is-checked span i{opacity: 1;}
section#filter button:focus{outline-width: 0; box-shadow: none;}

section#filter .collapsible{width: 100%; text-align: center; outline: none; font-size: 18px; background-color: var(--yellow); color: var(--white);}
section#filter .active{background-color: var(--yellow); color: var(--white);}
section#filter .collapse-content {padding: 0 18px; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; background-color: transparent;}
section#filter .collapse-content .button-group-mobile{text-align: center;}
section#filter .collapse-content .button-group-mobile button{width: 80%; margin-top: 20px;}
section#filter .collapse-content .button-group-mobile button.is-checked{background-color: var(--yellow); color: var(--white);}
/* section#filter .collapse-content .button-group-mobile button:focus{outline-width: 0; box-shadow: none;} */

/* VACATURES */
.page-id-25{background-color: var(--lightgrey);}
.vacature{background-color: var(--white); margin-bottom: 30px; box-shadow: 0px 3px 8px rgba(0,0,0,.2);}
.vacature .content{padding: 30px 40px;}
.vacature .content a{display: inline-block; margin-top: 20px;}
.vacature .specs-container{height: 100%; display: flex; align-items: center; background-color: var(--yellow); position: relative;}
.vacature .specs-container ul{padding-left: 50px; list-style-type: none;}
.vacature .specs-container ul li{font-size: 18px; font-weight: 600; display: block; margin: 5px 0;}
.vacature .specs-container img.icon{position: absolute; bottom: 0; right: 0; width: 55%; height: auto;}

/* PERSOON VERTELT */
section.persoon-vertelt h3{text-align: center; margin-bottom: 50px;}
section.persoon-vertelt .titles{padding-left: 50px; position: relative;}
section.persoon-vertelt .titles h5{max-width: 450px; text-transform: none;}
section.persoon-vertelt .text{margin: 30px 50px 0 0; padding: 30px 0 0 0; border-top: 3px solid var(--yellow);}
section.persoon-vertelt .portret{border-radius: 50%;}

/* ALLE DIENSTEN */
section.alle-diensten .dienst{padding: 50px 0;}
section.alle-diensten .dienst:nth-child(odd){background-color: var(--lightgrey); box-shadow: 0 -7px 7px -4px rgba(0,0,0,.15);}
section.alle-diensten .dienst:first-child{box-shadow: none;}
section.alle-diensten .dienst:nth-child(even){background-color: var(--white); box-shadow: inset 0 7px 7px -4px rgba(0,0,0,.15);}
section.alle-diensten .dienst:nth-child(even) .col-md-6.photo{order: 12;}
section.alle-diensten .dienst .content h3{text-transform: none; margin-bottom: 10px;}
section.alle-diensten .dienst .content hr{margin-bottom: 30px;}