/*

Theme Name:

Author URI: https://www.qstylez.nl/

Author: QStylez - Maaike Tol

Version: 1.0

*/



html {

    font-size: 16px;

    line-height: 24px;

    overflow-y: scroll;

    -webkit-text-size-adjust: 100%;

    -ms-text-size-adjust: 100%;

    scroll-behavior: smooth;

}



body {

    margin: 0;

}



* {

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

}



article, aside, details, figcaption, figure, footer, header, nav, section, summary {

    display: block;

}



audio, canvas, video {

    display: inline-block;

    width: 100%;

}



audio:not([controls]) {

    display: none;

    height: 0;

}





/*Complianz cookiebanner*/



.cmplz-cookiebanner {

    font-family: "arboria", sans-serif !important;

}





div#cmplz-document h2 {

    font-size: 23px;

    margin: 10px 0px;

}



div#cmplz-document h3 {

    font-size: 20px;

    margin: 10px 0px;

}



/*Complianz cookiebanner END*/







/* Assistive text */



.screen-reader-text {

    clip: rect(1px, 1px, 1px, 1px);

    overflow: hidden;

    position: absolute !important;

    height: 1px;

    width: 1px;

}



.screen-reader-text:focus {

    background-color: #f1f1f1;

    border-radius: 3px;

    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);

    clip: auto !important;

    color: #21759b;

    display: block;

    font-size: 14px;

    font-weight: bold;

    height: auto;

    line-height: normal;

    padding: 15px 23px 14px;

    position: absolute;

    left: 5px;

    top: 5px;

    text-decoration: none;

    width: auto;

    z-index: 100000;

    /* Above WP toolbar */

}







ul, ol {

    padding: 0;

    margin: 0;

}



h1, h2, h3, h4, h5, h6 {

    clear: both;

    margin-top: 0;

    margin-bottom: 0;

}





b, strong {

    font-weight: 700;

}



p {

    margin: 0px 0px;

}



a {

    text-decoration: none;

    transition: .1s ease-in-out;

}



.home-link {

    position: relative;

    display: block;

    width: 100%;

    background-size: cover !important;

    background-position: center center !important;

    background-repeat: no-repeat !important;

}



button, html input[type="button"], input[type="reset"], input[type="submit"] {

    -webkit-appearance: none;

    cursor: pointer;

}



button[disabled], input[disabled] {

    cursor: default;

}



input[type="checkbox"], input[type="radio"] {

    padding: 0;

}



input[type="search"] {

    -webkit-appearance: textfield;

    padding-right: 2px;

    /* Don't cut off the webkit search cancel button */

    width: 100%;

}



input[type="search"]::-webkit-search-decoration {

    -webkit-appearance: none;

}



button::-moz-focus-inner, input::-moz-focus-inner {

    border: 0;

    padding: 0;

}



textarea {

    overflow: auto;

    resize: none;

    vertical-align: top;

}



img {

    border-style: none;

}



img, video {

    height: auto;

    max-width: 100%;

}



section:after, article:after, .clear:after, #inner-header:after, .row:after, .social:after, .site-info:after {

    visibility: hidden;

    display: block;

    font-size: 0;

    content: " ";

    clear: both;

    height: 0;

}



div#navbar {

    order: 4;

    flex-basis: 100%;

    width: 100%;

}



div#navbar ul {

    max-height: 0;

    overflow: hidden;

    transition: .3s ease-in-out;

}







/**

 * Start - Menu button - telefoon/ipad

 * ----------------------------------------------------------------------------

 */



.menu span {

    background: #132628;

    height: 2px;

}



.menu {

    width: 30px;

    height: 26px;

    order: 2;

    position: relative;

    align-self: center;

    margin-left: 10px;

}



header.site-header div.menu .close-btn span:nth-of-type(2) {

    transform: rotate(-25deg);

    top: 30%;

}



header.site-header div.menu .close-btn span:nth-of-type(1) {

    transform: rotate(25deg);

    top: 30%;

}



header.site-header div.menu {

    overflow: hidden;

}



header.site-header div.menu.open .close-btn {

    top: 0px;

}



header.site-header div.menu .close-btn {

    position: absolute;

    height: 36px;

    width: 37px;

    transition: .3s ease-in-out;

    top: 40px;

}



div#navbar.open ul {

    max-height: 1000px;

}



header.site-header div.menu.open .open-btn {

    top: -36px;

}



header.site-header div.menu .open-btn {

    position: absolute;

    top: 0;

    width: 30px;

    height: 26px;

    transition: .3s ease-in-out;

}



.menu span {

    position: absolute;

    width: 100%;

    transition: .3s ease-in-out;

}



.menu span:nth-of-type(1) {

    top: 2px;

}



.menu span:nth-of-type(2) {

    top: 12px;

}



.menu span:nth-of-type(3) {

    bottom: 2px;

}



.menu .close-btn span:nth-of-type(3) {

    color: #252422;

    bottom: 12px;

    background: none;

    font-size: 14px;

    line-height: 14px;

    font-weight: 700;

}





/**

 * Forms

 * ----------------------------------------------------------------------------

 */



.use-floating-validation-tip span.wpcf7-not-valid-tip {

    position: absolute;

    z-index: 100;

    padding: 0;

    border: 0;

    background: transparent;

    right: 10px;

    left: auto;

    top: 0px;

    font-size: 0.8rem;

}



div.wpcf7-validation-errors, div.wpcf7-acceptance-missing {

    display: none !important;

}



form {

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

}



form p {

    margin: 0;

    flex-basis: 100%;

    width: 100%;

    margin-bottom: 8px;

}



form input, form textarea {

    width: 100%;

    border: 0;

    resize: none;

    font-size: 16px;

    padding: 10px;

}



form textarea {

    height: 130px;

}



.ajax-loader {

    position: absolute;

}



form input.wpcf7-form-control.wpcf7-submit {

    display: table;

    text-decoration: none;

    font-size: 16px;

    transition: .1s ease-in-out;

    width: auto;

    line-height: 2;

    margin-top: 0;

}



/**

 * Algemeen

 * ----------------------------------------------------------------------------

 */



 html{

    scroll-padding-top: 550px;

 }



body {

    overflow-x: hidden;

    overflow-y: hidden;

}





.inner {

    width: 100%;

    max-width: 1528px;

    margin: 0 auto;

    padding: 0 28px;

    position: relative;

    font-family: "arboria", sans-serif;

    font-weight: normal;

    font-weight: 400;

    font-size: 16px;

    line-height: 24px;

    color: #0C1322;

}



.flexbox-wrapper {

    display: flex;

    flex-wrap: wrap;

}



.flexbox-wrapper.sb {

    justify-content: space-between;

}



.bg-img {

    background-size: contain;

    background-repeat: no-repeat;

    background-position: center center;

    display: block;

}



h1, h2, h3, h4, h5, h6 {

   font-weight: 400;

   hyphens: auto;

}



:focus {

    outline: 0;

    outline-color: transparent;

    outline-style: none;

  }



h2 strong, h3 strong, h4 strong, h5 strong, h6 strong { font-weight: 700;}



h1 {

    font-size: 60px;

    line-height: 60px;

}



h2 {

    font-size: 54px;

    line-height: 54px;

}



h3{

    font-size: 32px;

    line-height: 32px;

}



h4{



}



.sub h1{

    font-size: 54px;

    line-height: 54px;

}



.sub h2{

    font-size: 32px;

    line-height: 32px;

}



.sub h3{



}



.sub h4{



}







a.btn,

.gform_button.button {

    padding: 19px 24px;

    height: 62px;

    display: block;

    width: fit-content;

    transition: 0.2s;

    font-weight: 700;

    cursor: pointer;

    line-height: 100%;

    border-radius: 40px;

    color: white;

    border: 1px solid #E64683;

    background: linear-gradient(90deg, #E64683 0%, #B83869 100%);

    font-size: 18px;

    line-height: 18px!important;

    position: relative;

    font-family: "arboria", sans-serif;

}





a.btn:hover,

.gform_button.button:hover {

    background: linear-gradient(270deg, #E64683 0%, #B83869 100%);

}



a.btn::before,

.gform_button.button::before {

    content: "";

    width: 16px;

    height: 12px;

    margin-right: 10px;

    background-image: url(https://www.tolcoating.nl/wp-content/themes/2024-05-theme/images/arrow-right-white.svg);

    background-size: cover;

    background-repeat: no-repeat;

    background-position: center;

    display: inline-block; 

}



a.btn.ghost{

    border-color: white;

    background: transparent;

    color: white;

}



a.btn.ghost.black{

    border-color: #10192C;

    color: #10192C;

}



a.btn.ghost.black:hover{

    background-color: #10192C;

    color: #ffffff;

}



a.btn.ghost.black::before{

    background-image: url(https://www.tolcoating.nl/wp-content/themes/2024-05-theme/images/arrow-right-black.svg);

}



a.btn.ghost.black:hover::before{

    background-image: url(https://www.tolcoating.nl/wp-content/themes/2024-05-theme/images/arrow-right-white.svg);

}



a.btn.ghost:hover{

    background-color: white;

    color: #0C1322;

}



a.btn.ghost:hover::before{

    background-image: url(https://www.tolcoating.nl/wp-content/themes/2024-05-theme/images/arrow-right-black.svg);

}



a.a-link {



}





a.a-link:hover {



}



.breadcrumbs .inner{

    padding-top: 7px;

    margin-bottom: -40px;

    z-index: 3;

}



#breadcrumbs {

    position: relative;

    z-index: 4;

    line-height: 16px;

    padding-bottom: 9px;

    border-bottom: 1px solid #10192C26;

}



#breadcrumbs * {

    color: #10192C;

    font-size: 14px;

    font-weight: 400;

    line-height: 24px;

    text-align: left;

}



#breadcrumbs a {

    text-decoration: underline;

    font-size: 14px;

    font-weight: 400;

    line-height: 24px;

    text-align: left;

}



#breadcrumbs a:hover {

    text-decoration: none

}



#breadcrumbs .delimiter {

    margin: 0 4px;

}



.page-template-sub-ons-verhaal #breadcrumbs *, .page-template-sub-werken-bij #breadcrumbs *, .page-template-sub-contact #breadcrumbs *{

    color: white;

}



.page-template-sub-ons-verhaal #breadcrumbs, .page-template-sub-werken-bij #breadcrumbs, .page-template-sub-contact #breadcrumbs{

    border-color: #FFFFFF33;

}



.pretitel {

    color: #E64783;

    font-size: 14px;

    font-weight: 400;

    letter-spacing: 1.68px;

    text-transform: uppercase;

    margin-bottom: 8px;

}



.pretitel::before {

    content: "";

    background-image: url(https://www.tolcoating.nl/wp-content/uploads/2024/09/usp-icon.svg);

    margin-right: 8px;

    width: 14px;

    height: 14px;

    position: relative;

    display: inline-block;

    top: 2px;

}







.accordion {

    background-color: transparent;

    color: #121725;

    cursor: pointer;

    padding: 24px 0;

    width: 100%;

    border: none;

    text-align: left;

    font-size: 20px;

    transition: 0.4s;

    font-weight: 700;

    font-family: sans-serif;

    position: relative;

}



.homepage .dienstenlaag .content div .panel *:last-child {

    margin-bottom: 33px;

}



.accordion:after {

    content: url(https://www.tolcoating.nl/wp-content/themes/2024-05-theme/images/accordion-plus.svg);

    position: absolute;

    right: 0;

    top: 24px;

}



.accordion.active:after {

    content: url(https://www.tolcoating.nl/wp-content/themes/2024-05-theme/images/accordion-minus.svg);

}



.panel {

    max-height: 0;

    overflow: hidden;

    transition: max-height 0.4s ease-out;

    border-bottom: 1px solid #12172533;

    font-size: 16px;

}



.panel *:last-child {

    margin-bottom: 24px;

}



.desktop{

    display: none!important;

}









 /**

 * PAGE BUILDER CONTENT

 * ----------------------------------------------------------------------------

 */







.homepage-hero-keuzeblokken{

    display: flex;

    flex-wrap: wrap;

    max-width: 550px;

    justify-content: space-between;

    position: relative;

}



.homepage-hero-keuzeblokken>div{

    flex-basis: 32%;

    border-radius: 15px;

    background-color: gray;

    position: relative;

    padding: 16px 12px;

}



.homepage-hero-keuzeblokken::before{

    content: "";

    width: 100%;

    height: 1px;

    background-color: black;

    left: 0;

    top: 50%;

    position: absolute;

}



.homepage-hero-keuzeblokken>div:nth-of-type(-n + 3){

    margin-bottom: 30px;

}



.homepage-hero-keuzeblokken>div>span{

    background-color: white;

    height: 100px;

    width: 100%;

    margin-bottom: 10px;

}



.homepage-hero-keuzeblokken>div>a{

    position: absolute;

    width: 100%;

    height: 100%;

    top: 0;

    left: 0;

}



.content-builder ul{

    list-style-type: disc;

    margin-left: 18px;

    list-style-position: outside;

}



.content-builder ul li::marker{

    font-size: 20px;

}

.home .testimonials {

    padding-bottom: 80px;

}

.content-builder>section, .sub.single.nieuws>section, .sub.overons>section, .sub.werkenbij>section{

    padding-top: 80px;

}



.content-afbeelding .inner>.flexbox-wrapper, .gecentreerde-content .inner>.flexbox-wrapper, .twee-kolom-content .inner>.flexbox-wrapper{

    flex-direction: column;

}



.content-afbeelding .inner>.flexbox-wrapper>span{

    width: 100%;

    background-size: cover;

    height: 350px;

    margin-top: 40px;

}



.twee-kolom-content .inner>.flexbox-wrapper>div:last-of-type{

    margin-top: 40px;

}



.content-afbeelding .inner>.flexbox-wrapper>.content h2, .twee-kolom-content .inner>.flexbox-wrapper>div h2, .gecentreerde-content .inner>.flexbox-wrapper>.content h2, .blokken .inner h2, .veelgestelde-vragen .tekst h2{

    margin-bottom: 24px;

}



.content-afbeelding .inner>.flexbox-wrapper>.content .tekst, .twee-kolom-content .inner>.flexbox-wrapper>div .tekst, .gecentreerde-content .inner>.flexbox-wrapper>.content .tekst, .veelgestelde-vragen .tekst{

    margin-bottom: 24px;

}



.content-afbeelding .inner>.flexbox-wrapper>.content .tekst>*:not(:last-child),

.twee-kolom-content .inner>.flexbox-wrapper>div .tekst>*:not(:last-child),

.gecentreerde-content .inner>.flexbox-wrapper>.content .tekst>*:not(:last-child),

.standaard-content .tekst h1 {

    margin-bottom: 24px;

}



.content-afbeelding .inner>.flexbox-wrapper>.content .flexbox-wrapper, .twee-kolom-content .inner>.flexbox-wrapper>div .flexbox-wrapper, .gecentreerde-content .inner>.flexbox-wrapper>.content .flexbox-wrapper{

    margin-bottom: 16px;

    align-items: center;

}



.content-afbeelding .inner>.flexbox-wrapper>.content .flexbox-wrapper span, .twee-kolom-content .inner>.flexbox-wrapper>div .flexbox-wrapper span, .gecentreerde-content .inner>.flexbox-wrapper>.content .flexbox-wrapper span{

    width: 15px;

    height: 15px;

    margin-right: 12px;

}





.content-afbeelding .inner>.flexbox-wrapper>.content .flexbox-wrapper p, .twee-kolom-content .inner>.flexbox-wrapper>div .flexbox-wrapper p, .gecentreerde-content .inner>.flexbox-wrapper>.content .flexbox-wrapper p{

    flex-basis: 50%;

    flex-grow: 1;

    font-size: 20px;

    line-height: 100%;

}



.content-afbeelding .inner>.flexbox-wrapper>.content>.btn, .twee-kolom-content .inner>.flexbox-wrapper>div>.btn,  .gecentreerde-content .inner>.flexbox-wrapper>.content>.btn{

    margin-top: 32px;

}



.content-afbeelding .inner>.flexbox-wrapper>.content>span:last-of-type, .twee-kolom-content .inner>.flexbox-wrapper>div>span:last-of-type, .gecentreerde-content .inner>.flexbox-wrapper>.content>span:last-of-type{

    width: 287px;

    height: 147px;

    margin-top: 40px;

    background-size: cover; 

}



.afbeelding-slider .tekst{

    margin-bottom: 40px;

 }



 .afbeelding-slider .slider .bg-img{

    width: 200px;

    height: 80px;

    background-size: cover;

 }





 .veelgestelde-vragen .categorien {

    background-color: white;

    box-shadow: 0px 4px 4px 0px #00000014;

    padding: 5px 6px;

    width: 100%;

}



.veelgestelde-vragen .categorien a {

    display: inline-block;

    width: 100%;

    color: black;

    line-height: 20px;

    background-color: white;

    text-align: left;

    font-size: 16px;

    font-weight: 700;

    border: none;

    padding: 10px 20px;

    margin-bottom: 0;

}



.veelgestelde-vragen .categorien a:hover {

    background-color: #149BD7;

    color: white;

    padding: 15px 20px;

}



.sub.faq.hulp .vragenlaag .vragen {

    margin-top: 0 !important;

}



.veelgestelde-vragen .vragen {

    margin-top: 32px;

}



.veelgestelde-vragen .vragen>h2 {

    color: #149BD7;

    margin-bottom: 30px;

}



.veelgestelde-vragen .vragen div.category>div:first-of-type .accordion {

    border-top: 1px solid #D9D9D9;

}



.veelgestelde-vragen .vragen .accordion:hover {

    background-color: #149bd71c;

}



.veelgestelde-vragen .vragen div div .accordion.active {

    padding-bottom: 8px;

    background-color: transparent !important;

}



.veelgestelde-vragen .vragen div div .panel p {

    margin-bottom: 24px;

}



.veelgestelde-vragen .categorien a.active {

    background-color: #149BD7;

    color: white;

    padding: 15px 20px;

}



.veelgestelde-vragen .vragen div.category {

    opacity: 0;

    visibility: hidden;

    height: 0;

    overflow: hidden;

    transition: opacity 0.3s ease-in-out, visibility 0s linear 0.3s, height 0s linear 0.3s;

}



.veelgestelde-vragen .vragen div.category.active {

    opacity: 1;

    visibility: visible;

    height: auto;

    transition-delay: 0s;

}





/**

 * Navbar

 * ----------------------------------------------------------------------------

 */



.top-header{

    background-color: #10192C;

    height: 40px;

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    padding: 6px 0;

    z-index: 999;

}







.top-header .inner .flexbox-wrapper{

    width: 100%;

    justify-content: space-between;

}



.top-header .inner .flexbox-wrapper a{

    color: white;

    font-weight: 700;

}



.top-header .inner .flexbox-wrapper a:hover{

    text-decoration: underline;

}



.top-header .inner .flexbox-wrapper>p{

    width: 140px;

}



.top-header .inner .flexbox-wrapper>div:first-of-type>a{

    text-decoration: underline;

}



.top-header .inner .flexbox-wrapper>div:first-of-type>a:hover{

    text-decoration: none;

}



.top-header .inner .flexbox-wrapper div>*{

    display: inline-block;

}



.top-header .inner .flexbox-wrapper div p{

    color: #FFFFFFCC;

    font-size: 18px;

    margin: 0 4px;

}





.site-header {

    height: 80px;

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    padding: 10px 0;

    z-index: 999;

    background: white !important;

    box-shadow: 0px 4px 4px 0px #A0A0A026;

    transition: 0.2s ease-in-out;

}



.hfeed.site{

    margin-top: 80px;

}



.hfeed.site:has(.hastopheader){

    margin-top: 120px;

}



.hfeed.site:has(.has-topheader.top-header-desktop){

    margin-top: 80px;

}



.site-header.has-topheader{

    top: 40px;

}



.site-header.has-topheader.top-header-desktop{

    top: 0;

}



.site-header .inner {

    display: flex;

    justify-content: space-between;

    flex-wrap: wrap;

    padding: 0;

}



.site-header .inner .home-link {

    width: 104px;

    height: 59px;

    margin-left: 24px;

}



.site-header .inner .menu {

    overflow: hidden;

    width: 38px;

    height: 36px;

    margin-right: 24px;

    position: relative;

    bottom: 4px;

    cursor: pointer;

    top: 1px;

}



header.site-header div.menu .open-btn {

    position: absolute;

    top: 0px;

    width: 38px;

    height: 36px;

    transition: 0.3s ease-in-out;

}



.menu span {

    background: #252422;

}



header.site-header div.menu .open-btn span:nth-of-type(1) {

    top: 0;

}



header.site-header div.menu .open-btn span:nth-of-type(2) {

    top: 7px;

}



header.site-header div.menu .open-btn span:nth-of-type(3) {

    top: 15px;

}



header.site-header div.menu .open-btn span:nth-of-type(4) {

    color: #252422;

    bottom: 11px;

    background: none;

    font-size: 14px;

    line-height: 14px;

    font-weight: 700;

}



div#navbar {

    order: 4;

    flex-basis: 100%;

    width: 100%;

    overflow: hidden;

    transition: 0.5s;

    height: 0;

    position: relative;

    top: 11px;

    overflow: visible;

}



div#navbar.open {

    padding: 0 0 30px;

    height: calc(100vh - 80px);

    max-height: unset;

    background-color: white;

    border-top: 0;

    margin: unset;

    box-shadow: inset 0px 4px 4px 0px #A0A0A026;

}



div#navbar.open .nav-menu {

    max-height: calc(100vh - 240px) !important;

    overflow-y: scroll;

}



div#navbar .nav-menu>li {

    font-weight: bold;

    padding-bottom: 20px;

    border-bottom: 1px solid #0C132233;

    margin: 0 24px 20px;

    list-style-type: none;

}



div#navbar .nav-menu>li:first-of-type {

    padding-top: 20px;

    border-top: 1px solid #0C132233;

}





div#navbar ul li {

    padding-bottom: 16px;

    border-bottom: 1px solid #0C132233;

    margin-bottom: 16px;

}





div#navbar ul li a {

    color: #0C1322;

    display: block;

    width: 100%;

    height: 100%;

    transition: 0.3s;

    font-size: 18px;

    line-height: 18px;

    position: relative;

    font-weight: 700;

}



div#navbar ul li a:hover {

    color: #a3a3a3 !important;

}



.nav-menu li.menu-item-has-children {

    position: relative;

}



.nav-menu .sub-menu {

    display: none;

}



.nav-menu .sub-menu li {

    border-bottom: 0;

    padding-top: 15px;

    padding-bottom: 15px;

    padding-left: 20px;

    border-bottom: 1px solid #DAE1EFB2;

}



.nav-menu .sub-menu li:first-of-type {

    border-top: 1px solid #DAE1EFB2;

    margin-top: 20px;

    border-bottom: 0;

}



.nav-menu .sub-menu li:not(:first-of-type){

    border-top: 1px solid #DAE1EFB2;

    margin-top: 15px;

}



.nav-menu .sub-menu li:last-of-type {

    border-bottom: 0;

    padding-bottom: 0;

}







.site-header .btn.navbar-mobile{

    width: calc(100% - 48px);

    text-align: center;

    margin: 0 24px;

    margin-top: 16px;

    display: none;

}



.site-header .navbar.open .btn.navbar-mobile{

    display: block;

}



.site-header .navbar-desktop{

    display: none;

}



.navbar.open .navmenu-topheader{

    height: 40px;

    margin-bottom: 32px;

}



.navmenu-topheader{

    height: 0;

    background-color: #10192C;

    width: 100%;

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    align-items: center;

    overflow: hidden;

    transition: 0.3s;

}



.navmenu-topheader *{

    color: #FFFFFFCC;

}



.navmenu-topheader a:hover{

    text-decoration: underline;

}



.navmenu-topheader p{

    margin: 0 16px;

}





/* Keyframes for fade-in effect */

@keyframes fadeIn {

    from {

        opacity: 0;

    }



    to {

        opacity: 1;

    }

}



/* Keyframes for fade-out effect */

@keyframes fadeOut {

    from {

        opacity: 1;

    }



    to {

        opacity: 0;

    }

}



.navbar a {

    animation: fadeOut 0.3s ease-in-out forwards;

}



.navbar.open a {

    opacity: 0;

    animation: fadeIn 0.5s ease-in-out forwards;

}





.site-header a.btn.desktop {

    display: none;

}





div#navbar ul li ul li {

    border-bottom: 0;

    padding-bottom: 0;

    margin-bottom: 0;

}



div#navbar ul li.menu-item-has-children>a::after {

    content: url(https://www.tolcoating.nl/wp-content/themes/2024-05-theme/images/chevron-down-b.svg) !important;

    display: inline-block;

    position: absolute;

    right: 0;

    transition: 0.2s;

}



div#navbar ul li.menu-item-has-children.open>a::after {

    transform: rotateX(180deg);

}



.navbar-btns-desktop{

    display: none;

}



/**

 * Scrolled

 * ----------------------------------------------------------------------------

 */



.site-header.scrolled .inner .home-link {

    background-image: url() !important;

}



.site-header.scrolled {

    background: white;

}



.site-header.scrolled div#navbar.open {

    background-color: white;

}



.site-header.scrolled .menu span {

    background: black;

}



.site-header.scrolled div.menu .open-btn span:nth-of-type(4) {

    color: black;

}



.site-header.scrolled .menu .close-btn span:nth-of-type(3) {

    color: black;

    background: transparent;

}



.site-header.scrolled div#navbar ul li a {

    color: black;

}



.site-header.scrolled div#navbar .nav-menu>li {

    border-bottom: 1px solid #00000038;

}



.site-header.scrolled div#navbar ul li a::after {

    content: url();

}



.site-header.scrolled div#navbar ul li.menu-item-has-children>a::after {

    content: url() !important;

}



.site-header.scrolled .nav-menu .sub-menu li:first-of-type {

    border-top: 1px solid #00000038;

}





/**

 * Footer

 * ----------------------------------------------------------------------------

 */



 

.footer{

    padding-top: 60px;

}



.footer .flexbox-wrapper{

    padding-bottom: 32px;

    border-bottom: 1px solid #DFDFDF;

}



.footer .flexbox-wrapper>div:first-of-type span{

    width: 152px;

    height: 86px;

    margin-bottom: 20px;

    background-size: cover;

}



.footer .flexbox-wrapper>div:first-of-type p{

    font-size: 16px;

    margin-bottom: 16px;

}



.footer .flexbox-wrapper>div:first-of-type p a{

    text-decoration: underline;

    color: #10192C;

}



.footer .flexbox-wrapper>div:first-of-type p a:hover{

    text-decoration: none;

}



.footer .flexbox-wrapper>div:nth-child(2){

    display: none;

}



.footer .flexbox-wrapper>div:not(:first-of-type){

    margin-top: 24px;

    flex-basis: 100%;

}



.footer .flexbox-wrapper>div:not(:first-of-type) p:first-of-type{

    font-size: 22px;

    font-weight: 700;

    line-height: 24px;

    margin-bottom: 20px;

    color: #10192C;

}



.footer .flexbox-wrapper>div:not(:first-of-type) *{

    font-size: 16px;

    line-height: 16px;

    margin-bottom: 16px;

    display: block;

    color: #10192C;

}



.footer .flexbox-wrapper>div:not(:first-of-type)>*:last-child{

    margin-bottom: 0;

}





.footer .flexbox-wrapper>div:nth-child(2) a:hover{

    text-decoration: underline;

}



.footer .flexbox-wrapper>div:nth-of-type(3) a, .footer .flexbox-wrapper>div:nth-of-type(4) a[href^="mailto:"]{

    text-decoration: underline;

}



.footer .flexbox-wrapper>div:nth-of-type(3) a:hover, .footer .flexbox-wrapper>div:nth-of-type(4) a[href^="mailto:"]:hover{

    text-decoration: none;

}



.footer .flexbox-wrapper>div:last-of-type span{

    width: 150px;

    height: 60px;

    margin-right: 6px;

    display: inline-block;

    margin-bottom: 0;

    margin-top: 8px;

}



.footer .flexbox-wrapper>div:last-of-type span:first-of-type{

    background-size: 100%;

    border: 1px solid #e8e8e8;

    background-position-x: 30px;

}



.footer .flexbox-wrapper>div:last-of-type span:nth-of-type(2){

    background-size: 75%;

    border: 1px solid #e8e8e8;

}



.under-footer{

    padding: 32px 0;

}



.under-footer .flexbox-wrapper *{

    font-size: 16px;

    line-height: 16px;

    color: #10192C;

}



.under-footer .flexbox-wrapper{

    flex-direction: column;

}



.under-footer .flexbox-wrapper>div:first-of-type{

    order: 1;

    margin-top: 20px;

}



.under-footer .flexbox-wrapper>div:first-of-type p{

    display: inline-block;

}





.under-footer .flexbox-wrapper>div:nth-of-type(2) span{

    height: 54px;

    width: 54px;

    display: inline-block;

    margin-right: 8px;

    position: relative;

    transition: 0.3s;

}



.under-footer .flexbox-wrapper>div:nth-of-type(2) span:hover{

    opacity: 0.6;

}



.under-footer .flexbox-wrapper>div:nth-of-type(2) span a{

    position: absolute;

    width: 100%;

    left: 0;

    top: 0;

    height: 100%;

}



.under-footer .flexbox-wrapper>div:nth-of-type(2){

    margin-top: 6px;

    height: 60px;

}



/**

 * Home

 * ----------------------------------------------------------------------------

 */



.homepage .content-builder .hoofdlaag{

    padding-top: 0;

    position: relative;

}



.homepage .content-builder .hoofdlaag h1{

    hyphens: unset;

}



.homepage .content-builder .hoofdlaag::before{

    content: "";

    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);

    position: absolute;

    left: 0;

    top: 0;

    height: 100%;

    width: 100%;

    z-index: 2;

}



.homepage .content-builder .hoofdlaag video{

    position: absolute;

    top: 0;

    left: 0;

    height: 100%;

    width: 100%;

    object-fit: cover;

}



.homepage .content-builder .hoofdlaag .flexbox-wrapper{

    padding: 332px 0 54px;

    color: white;

    position: relative;

    z-index: 3;

}



.homepage .content-builder .hoofdlaag .flexbox-wrapper h1 br{

    display: none;

}



.homepage .content-builder .hoofdlaag .flexbox-wrapper .content-rechts .tekst{

    display: none;

}



.homepage .content-builder .hoofdlaag .flexbox-wrapper .content-rechts, .homepage .content-builder .hoofdlaag .flexbox-wrapper .content-rechts .btn{

    margin-top: 0;

}



.homepage .content-builder .hoofdlaag .flexbox-wrapper .content-links h1 strong:first-of-type{

    font-weight: 400;

}



.homepage .content-builder .hoofdlaag .flexbox-wrapper .content-links h1 strong:last-of-type{

    font-weight: 700;

}



.homepage .ons-verhaal{

    padding: 200px 0;

    background: linear-gradient(141deg, rgba(133, 51, 118, 1) 0%, rgba(19, 31, 55, 1) 100%);

    color: #fff;

    position: relative;

    overflow: hidden;

}



.homepage .ons-verhaal>span:first-of-type{

    position: absolute;

    left: 0;

    top: 0;

    height: 100%;

    width: 100%;

    mix-blend-mode: overlay;

    background-size: cover;

}



.homepage .ons-verhaal>span:nth-of-type(2){

    position: absolute;

    left: calc(50% - 500px);

    top: calc(50% - 500px);

    width: 1000px;

    height: 1000px;

    opacity: 1;

    background-size: cover;

    -webkit-animation: rotatingreverse 130s linear infinite;

}



.homepage .ons-verhaal>span:nth-of-type(3){

    position: absolute;

    left: calc(50% - 300px);

    top: calc(50% - 300px);

    width: 600px;

    height: 600px;

    opacity: 1;

    background-size: cover;

    -webkit-animation: rotating 110s linear infinite;

    opacity: .5;

}



.homepage .ons-verhaal .inner{

    color: white;

}



@-webkit-keyframes rotating {

    from{

        -webkit-transform: rotate(0deg);

    }

    to{

        -webkit-transform: rotate(360deg);

    }

}



@-webkit-keyframes rotatingreverse {

    from{

        -webkit-transform: rotate(360deg);

    }

    to{

        -webkit-transform: rotate(0deg);

    }

}



.homepage .afbeelding-blokken-animatie .info-carousel .owl-stage-outer{

    overflow: visible;

}





.homepage .afbeelding-blokken-animatie .info-carousel .owl-item:not(:last-child)>div, .homepage .afbeelding-blokken-animatie .desktop>div:not(:last-of-type){

    border-right: 1px solid #DFDFDF;

}



.homepage .afbeelding-blokken-animatie .info-carousel .owl-nav{

    display: block;

}



.homepage .afbeelding-blokken-animatie .info-carousel .owl-item>div, .homepage .afbeelding-blokken-animatie .desktop>div, .sub.single.nieuws .hoofdlaag .sidebar, .sub.single.dienst .formulierlaag .flexbox-wrapper .sidebar{

    width: 336px;

    padding: 24px;

    background-color: white;

    height: 512px;

}



.homepage .afbeelding-blokken-animatie .info-carousel .owl-item>div h3, .homepage .afbeelding-blokken-animatie .desktop>div h3{

    hyphens: unset;

    margin-bottom: 16px;

}



.homepage .afbeelding-blokken-animatie .info-carousel .owl-item:last-child>div, .homepage .afbeelding-blokken-animatie .desktop>div:last-child, .sub.single.nieuws .hoofdlaag .sidebar, .sub.single.dienst .formulierlaag .flexbox-wrapper .sidebar{

    background: linear-gradient(141deg, rgba(133, 51, 118, 1) 0%, rgba(19, 31, 55, 1) 100%);

    color: white;

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-end;

}



.homepage .afbeelding-blokken-animatie .info-carousel .owl-item:last-child>div>span:first-of-type, .homepage .afbeelding-blokken-animatie .desktop>div:last-child>span:first-of-type, .sub.single.nieuws .hoofdlaag .sidebar>span:first-of-type, .sub.single.dienst .formulierlaag .flexbox-wrapper .sidebar>span:first-of-type{

    position: absolute;

    left: calc(50% - 200px);

    top: calc(50% - 200px);

    width: 400px;

    height: 400px;

    opacity: 1;

    background-size: cover;

    -webkit-animation: rotatingreverse 70s linear infinite;

}



.homepage .afbeelding-blokken-animatie .info-carousel .owl-item:last-child>div>span:last-of-type, .homepage .afbeelding-blokken-animatie .desktop>div:last-child>span:last-of-type, .sub.single.nieuws .hoofdlaag .sidebar>span:last-of-type, .sub.single.dienst .formulierlaag .flexbox-wrapper .sidebar>span:last-of-type{

    width: 150px;

    height: 150px;

    position: relative;

    margin-bottom: 10px;

    background-size: cover;

    border-radius: 100%;

}



.homepage .afbeelding-blokken-animatie .info-carousel .owl-item:last-child>div>span:last-of-type span, .homepage .afbeelding-blokken-animatie .desktop>div:last-child>span:last-of-type span, .sub.single.nieuws .hoofdlaag .sidebar>span:last-of-type span, .sub.single.dienst .formulierlaag .flexbox-wrapper .sidebar>span:last-of-type span{

    width: 40px;

    height: 40px;

    position: absolute;

    right: 0;

    bottom: 0;

}



.homepage .afbeelding-blokken-animatie .info-carousel .owl-item:last-child>div>span:last-of-type span a, .homepage .afbeelding-blokken-animatie .desktop>div:last-child>span:last-of-type span a, .sub.single.nieuws .hoofdlaag .sidebar>span:last-of-type span a, .sub.single.dienst .formulierlaag .flexbox-wrapper .sidebar>span:last-of-type span a{

    width: 100%;

    height: 100%;

    position: absolute;

    border-radius: 100%;

}



.homepage .afbeelding-blokken-animatie .info-carousel .owl-item:last-child>div>h3, .homepage .afbeelding-blokken-animatie .desktop>div:last-child>h3, .sub.single.nieuws .hoofdlaag .sidebar>h3, .sub.single.dienst .formulierlaag .flexbox-wrapper .sidebar>h3{

    margin-bottom: 8px;

}



.homepage .afbeelding-blokken-animatie .info-carousel .owl-item:last-child>div>.btn, .homepage .afbeelding-blokken-animatie .desktop>div:last-child>.btn, .sub.single.nieuws .hoofdlaag .sidebar>.btn, .sub.single.dienst .formulierlaag .flexbox-wrapper .sidebar>.btn{

    margin-top: 24px;

}



.homepage .afbeelding-blokken-animatie .info-carousel .owl-item:last-child>div>span:last-of-type{

    margin-bottom: 50px;

}



.homepage .afbeelding-blokken-animatie .info-carousel .owl-item:last-child>div>span:first-of-type{

    top: calc(50% - 240px);

}



.sub.single.nieuws.vacature .hoofdlaag .sidebar h3:first-of-type{

    position: absolute;

    top: 30px;

    font-size: 44px;

    text-align: center;

    line-height: 44px;

    max-width: 230px;

}



.homepage .afbeelding-blokken-animatie{

    padding-bottom: 150px;

}



.tekstkrul{

    position: relative;

}



.tekstkrul .scroll-container{

    display: block;

    position: absolute;

    bottom: 0;

    width: 100vw;

    height: 120px;

    background-repeat: repeat-x;

    background-size: cover;

    animation: scrollBackground 12s linear infinite;

}



.tekstkrul .scroll-container span{

    position: absolute;

    top: 0;

    left: 0;

    width: 4500px;

    transition: transform 0.2s ease-out;

    height: 150px;

    background-size: contain;

    background-repeat: no-repeat;

}



@keyframes scrollBackground {

    0% {

        background-position: 0 0; /* Start from the left */

    }

    100% {

        background-position: -100vw 0; /* Move to the left by the full viewport width */

    }

}



.homepage .afbeelding-slider h2{

    font-size: 44px;

    line-height: 44px;

    margin-bottom: 24px;

    hyphens: unset;

}



.afbeelding-slider .afbeeldingen-carousel .owl-stage{

    display: flex;

    flex-wrap: wrap;

    align-items: center;

}



.afbeelding-slider .afbeeldingen-carousel .owl-item img{

    max-width: calc(100vw - 56px);

    max-height: 300px;

    width: auto;

}



.afbeelding-slider .afbeeldingen-carousel .owl-item .big{

    position: absolute;

    top: -110px;

    right: 20px;

    width: 150px;

    height: 150px;

    background-color: #6BC4E9;

    border-radius: 100%;

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    align-content: center;

    rotate: -12deg;

	display: none!important;

}



.afbeelding-slider .afbeeldingen-carousel .owl-item .big:hover{

    animation: bigcircle 0.3s ease-in-out 5; /* Play the animation once */

}



@keyframes bigcircle {

    0% {

        transform: rotate(350deg);

    }

    50% {

        transform: rotate(365deg); /* Rotate a bit more */

    }

    100% {

        transform: rotate(350deg); /* Back to original */

    }

}



.afbeelding-slider .afbeeldingen-carousel .owl-item .big p:first-child{

    font-size: 20px;

    line-height: 20px;

    color: white;

    font-weight: bold;

    margin-bottom: 12px;

}



.afbeelding-slider .afbeeldingen-carousel .owl-item .big p:nth-child(2) a{

    color: white;

    display: block;

    font-weight: bold;

    font-size: 13px;

}



.afbeelding-slider .afbeeldingen-carousel .owl-item .big>a:last-child{

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    border-radius: 100%;

}



.afbeelding-slider .afbeeldingen-carousel .owl-item .big p:nth-child(2) a:hover{

    text-decoration: underline;

}



.afbeelding-slider .afbeeldingen-carousel .owl-item .small p:first-child{

    position: absolute;

}



.afbeelding-slider .afbeeldingen-carousel .owl-item .small p:last-child{

    bottom: -19px;

    right: 42px;

}



.afbeelding-slider .afbeeldingen-carousel .owl-item:nth-child(2n + 1) .small p, .afbeelding-slider .afbeeldingen-carousel .owl-item:nth-child(2n + 1) .big{

    background-color: #E64683;

}



.afbeelding-slider .afbeeldingen-carousel .owl-stage-outer{

    overflow: visible;

}



.afbeelding-slider .afbeeldingen-carousel .owl-dot{

    background-color: #0C132233!important;

}



.afbeelding-slider .afbeeldingen-carousel .owl-dot.active{

    background-color: #0C1322!important;

}



.homepage .duurzaamheid .flexbox-wrapper .content{

    background: linear-gradient(229deg, rgba(133, 51, 118, 1) 0%, rgba(19, 31, 55, 1) 100%);

    color: white;

    padding: 20px;

    position: relative;

}



.homepage .duurzaamheid .flexbox-wrapper .content::before, .sub.overons::before, .sub.werkenbij::before, .single.vacature .formulierlaag::before{

    content: "";

    background-image: url(https://www.tolcoating.nl/wp-content/uploads/2024/09/grainy-overlay.png);

    position: absolute;

    left: 0;

    top: 0;

    height: 100%;

    width: 100%;

    mix-blend-mode: overlay;

    background-size: cover;

    z-index: 2;

}



.sub.werkenbij::before, .sub.overons::before{

    background-image: url(https://www.tolcoating.nl/wp-content/uploads/2024/10/werkenbij-bg.png)!important;

}



.sub.overons::before, .testimonials::before, .sub.werkenbij::before{

    background-size: auto!important;

}



.homepage .duurzaamheid .flexbox-wrapper .content>*{

    position: relative;

    z-index: 3;

}



.homepage .duurzaamheid .flexbox-wrapper>span{

    margin-top: 0;

    height: 250px;

}



.homepage .duurzaamheid .inner>.flexbox-wrapper>.content h3{

    font-size: 44px;

    line-height: 44px;

}



.homepage .duurzaamheid .inner>.flexbox-wrapper>.content .flexbox-wrapper{

    margin-bottom: 24px;

}



.homepage .blokken h2{

    font-size: 44px;

    line-height: 44px;

}



.homepage .blokken .flexbox-wrapper.info{

    flex-direction: column;

    margin-top: 40px;

}



.homepage .blokken .flexbox-wrapper.info>div{

    position: relative;

    padding: 20px;

    overflow: hidden;

}



.homepage .blokken .flexbox-wrapper.info>div:not(:last-child){

    margin-bottom: 8px;

}



.homepage .blokken .flexbox-wrapper.info>div>span, .homepage .blokken .flexbox-wrapper.info>div>a{

    position: absolute;

    left: 0;

    top: 0;

    height: 100%;

    width: 100%;

    background-size: cover;

    transition: 0.4s ease-in-out;

}



.homepage .blokken .flexbox-wrapper.info>div>a{

    z-index: 3;

}



.homepage .blokken .flexbox-wrapper.info>div .tekst, .homepage .blokken .flexbox-wrapper.info>div>p{

    position: relative;

    color: white;

    z-index: 2;

}



.homepage .blokken .flexbox-wrapper.info .tekst h3{

    font-size: 40px;

    line-height: 40px;

}



.homepage .blokken .flexbox-wrapper.info>div>p:last-child{

    padding-top: 16px;

    margin-top: 16px;

    border-top: 1px solid #FFFFFF80;

    font-size: 18px;

    white-space: pre-wrap;

}



.homepage .blokken .flexbox-wrapper.info>div:first-child{

    height: 357px;

}



.homepage .blokken .flexbox-wrapper.info>div:first-child .tekst{

    position: absolute;

    bottom: 104px;

}



.homepage .blokken .flexbox-wrapper.info>div:first-child>p:last-child{

    position: absolute;

    bottom: 24px;

    left: 24px;

    right: 24px;

}



.homepage .blokken .flexbox-wrapper.info>div .tekst:has(p) h3{

    margin-bottom: 16px;

}



.homepage .blokken .flexbox-wrapper.info>div:first-child::before, .homepage .blokken .flexbox-wrapper.info>div:nth-child(3)::before, .homepage .blokken .flexbox-wrapper.info>div:nth-child(4)::before{

    content: "";

    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%);

    position: absolute;

    left: 0;

    top: 0;

    height: 100%;

    width: 100%;

    z-index: 2;

}



.homepage .blokken .flexbox-wrapper.info>div:nth-child(3)::before{

    background: rgb(0 0 0 / 57%);



}



.homepage .blokken .flexbox-wrapper.info>div:nth-child(2){

    background: linear-gradient(135deg, #853275, #421139);

    color: white;

    padding: 20px;

    position: relative;

}



.homepage .blokken .flexbox-wrapper.info>div:nth-child(4){

    display: none;

}



.homepage .blokken .flexbox-wrapper.info>div:nth-child(2)::before, .homepage .blokken .flexbox-wrapper.info>div:nth-child(5)::before, .testimonials::before, .above-footer .inner .flexbox-wrapper::before,  .sub-contact .formulierlaag::before{

    content: "";

    background-image: url(https://www.tolcoating.nl/wp-content/uploads/2024/09/grainy-overlay.png);

    position: absolute;

    left: 0;

    top: 0;

    height: 100%;

    width: 100%;

    mix-blend-mode: overlay;

    background-size: cover;

    z-index: 2;

    visibility: visible;

}



.above-footer .inner .flexbox-wrapper{

    overflow: hidden;

}



.above-footer .inner .flexbox-wrapper::after{

    content: "";

    background-image: url(https://www.tolcoating.nl/wp-content/themes/2024-05-theme/images/footerblok-bg.svg);

    position: absolute;

    left: 0;

    right: 0;

    margin: 0 auto;

    top: calc(50% - 175px);

    height: 354px;

    width: 100%;

    max-width: 344px;

    opacity: 1;

    background-size: auto;

    z-index: 1;

    visibility: visible;

}



.homepage .blokken .flexbox-wrapper.info>div:nth-child(5){

    background: linear-gradient(135deg, #5287ff, #1f325d);

    padding: 30px 20px 42px 20px;

}







.homepage .blokken .flexbox-wrapper.info>div:nth-child(5):hover .tekst h3{

    text-decoration: none;

}



.homepage .blokken .flexbox-wrapper.info>div:nth-child(1):hover>span, .homepage .blokken .flexbox-wrapper.info>div:nth-child(3):hover>span, .homepage .blokken .flexbox-wrapper.info>div:nth-child(4):hover>span{

    transform: scale(1.2);

}



.homepage .blokken .flexbox-wrapper.info>div:nth-child(5) h3{

    text-decoration: underline;

    font-size: 28px;

    line-height: 28px;

}



.homepage .blokken{

    padding-bottom: 80px;

}



.testimonials{

    background: linear-gradient(219deg, #3A5DA8 1.15%, #0C1322 98.85%);

    position: relative;

    padding-bottom: 340px;

}



.testimonials::after{

    content: "";

    position: absolute;

    top: 0;

    visibility: visible;

    width: 514px;

    height: 1026px;

    left: -180px;

    background-size: cover;

    background-image: url(https://www.tolcoating.nl/wp-content/uploads/2024/09/testemonials-bg.svg);

    background-position: right;

}



.testimonials .inner{

    color: white;

    z-index: 2;

}



.testimonials h2{

    font-size: 44px;

    line-height: 44px;

    margin-bottom: 40px;

    hyphens: unset;

}



.testimonials .flexbox-wrapper:last-of-type video{

    order: 1;

    margin-top: 32px;

    height: 250px;

    object-fit: cover;

}



.testimonials .owl-stage-outer{

    overflow: visible;

}



.testimonials .owl-dots .owl-dot{

    background-color: #FFFFFF33!important;

}



.testimonials .owl-dots .owl-dot.active{

    background-color: white!important;

}



.testimonials .owl-stage .owl-item video{

    width: 300px;

    height: 500px;

    background-color: gray;

    object-fit: cover;

}



.testimonial{

    width: 0;

    height: 500px;

    background-color: #FFFFFF1A;

    display: flex;

    flex-wrap: wrap;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    position: relative;

    display: flex;

    transition: 0.3s;

    width: 300px;

    height: 342px;

    padding: 0 32px;

}



.testimonial .stars{

    margin-bottom: 32px;

    margin-top: -32px;

}



.testimonial .stars span{

    width: 22px;

    height: 22px;

    margin-right: 2px;

    display: none;

}



.testimonial>p:first-of-type{

    font-weight: 700;

    font-size: 26px;

    line-height: 32px;

    margin-bottom: 100px;

}



.testimonial>p:last-of-type{

    position: absolute;

    bottom: 40px;

    left: 0;

    right: 0;

    margin: 0 auto;

    font-size: 18px;

    font-weight: 700;

    background-color: #FFFFFF26;

    padding: 7px 21px;

    border-radius: 40px;

    width: fit-content;

    height: 40px;

}



.testimonials .btn.ghost.mobile{

    margin-top: 40px;

}



.above-footer{

    /* background: linear-gradient(219deg, #3A5DA8 1.15%, #0C1322 98.85%); */

    position: relative;

    bottom: 260px;

    margin-bottom: -260px;

}



.above-footer::before{

    content: "";

    background-color: white;

    height: 250px;

    width: 100%;

    position: absolute;

    left: 0;

    bottom: 0;

    z-index: 2;

}



.above-footer .inner{

    z-index: 3;

}



.above-footer .flexbox-wrapper{

    background: linear-gradient(141deg, rgba(133, 51, 118, 1) 0%, rgba(19, 31, 55, 1) 100%);

    padding: 24px;

    flex-direction: column;

    color: white;

    position: relative;

}



.above-footer .flexbox-wrapper>*{

    position: relative;

    z-index: 2;

}



.above-footer .flexbox-wrapper h2{

    font-size: 44px;

    line-height: 44px;

}



.above-footer .flexbox-wrapper>div>p{

    margin: 24px 0 36px;

}



.homepage .blokken{

    position: relative;

}



.homepage .blokken::before {

    content: "";

    background-image: url(https://www.tolcoating.nl/wp-content/themes/2024-05-theme/images/toepassing-bg.svg);

    width: 588px;

    height: 588px;

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    position: absolute;

    left: calc(50% - 290px);

    top: 50px;

    visibility: visible;

}



/**

 * Subs

 * ----------------------------------------------------------------------------

 */



.gecentreerde-content.toepassingen .flexbox-wrapper{

    max-width: 780px!important;



}



.gecentreerde-content.duurzaamheid .flexbox-wrapper{

    max-width: 1170px!important;

}



.gecentreerde-content .content .flexbox-wrapper.btns.mobile{

    border-radius: 40px;

    border: 1px solid #10192C;

    padding: 12px;

    justify-content: center;

    height: fit-content;

    max-height: 48px;

    overflow: hidden;

    transition: 0.4s ease-in-out;

    cursor: pointer;

    margin-top: 24px;

    margin-bottom: 0;

}



.gecentreerde-content .content .flexbox-wrapper.btns.mobile.clicked{

    max-height: 700px;

}



.content-afbeelding.duurzaamheid, .content-afbeelding.toepassingen{

    padding-top: 40px;

    margin-top: 0;

    -webkit-tap-highlight-color: transparent;

}



.sub .content-afbeelding.duurzaamheid .flexbox-wrapper>span, .sub .content-afbeelding.toepassingen .flexbox-wrapper>span{

    height: 210px;

    margin-top: 0;

}



.sub .content-afbeelding.duurzaamheid .flexbox-wrapper>.content, .sub .content-afbeelding.toepassingen .flexbox-wrapper>.content{

    order: 1;

    margin-top: 24px;

}



.sub .content-afbeelding.duurzaamheid .flexbox-wrapper .tekst, .sub .content-afbeelding.toepassingen .flexbox-wrapper .tekst{

    margin-bottom: 0!important;

}





.gecentreerde-content .content .flexbox-wrapper.btns.mobile p{

    font-size: 18px;

    line-height: 18px !important;

    font-weight: bold;

    text-align: center;

    padding-bottom: 18px;

    position: relative;

}



.gecentreerde-content .content .flexbox-wrapper.btns.mobile p::after{

    content: "";

    background-image: url(https://www.tolcoating.nl/wp-content/themes/2024-05-theme/images/chevron-down-b.svg);

    width: 12px;

    height: 8px;

    display: inline-block;

    margin-left: 7px;

    background-size: cover;

    background-repeat: no-repeat;

    background-position: center;

    transition: 0.4s ease-in-out;

}



.gecentreerde-content .content .flexbox-wrapper.btns.mobile.clicked p::after{

    transform: rotateX(180deg);

}



.gecentreerde-content .content .flexbox-wrapper.btns.mobile .btn{

    text-align: center;

    width: 100%;

    margin-right: 0;

}



.gecentreerde-content.toepassingen .flexbox-wrapper .tekst, .gecentreerde-content.duurzaamheid .flexbox-wrapper .tekst{

    max-width: 820px!important;

    margin-left: auto;

    margin-right: auto;

}



.gecentreerde-content .content .flexbox-wrapper.btns{

    margin-top: 32px;

}



a.btn.pill:not(:last-of-type){

    color: #10192C;

    background: transparent;

    border-color: #10192C;

}



a.btn.pill{

    padding: 14px 21px;

    height: fit-content;

    margin-right: 8px;

    margin-bottom: 8px;

}



a.btn.pill:not(:last-of-type):hover{

    background-color: #10192C;

    color: white;

}



a.btn.pill::before{

    content: none;

}





.sub .content-builder>section.duurzaamheid:nth-last-of-type(2), .sub .content-builder>section.toepassingen:nth-last-of-type(2), .sub.single.nieuws .bekijk-ook{

    padding-bottom: 260px;

}



.archive{

    padding-bottom: 50px;

}



.archive h1{

    margin-bottom: 24px;

}



.archive .flexbox-wrapper{

    margin-top: 40px;

    flex-direction: column;

}



.nieuwsitem{

    margin-bottom: 32px;

    position: relative;

}



.nieuwsitem>a{

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 2;

}



.nieuwsitem .thumb{

    margin-bottom: 20px;

    overflow: hidden;

}



.nieuwsitem .thumb>span{

    height: 240px;

    width: 100%;

    background-size: cover;

    transition: 0.3s ease-in-out;

}



.nieuwsitem:hover .thumb span{

    transform: scale(1.2);

}



.nieuwsitem .pretitel{

    font-size: 12px;

    margin-bottom: 12px;

}



.nieuwsitem h4{

    font-size: 24px;

    line-height: 24px;

    margin-bottom: 12px;

}



.nieuwsitem>p:last-child{

    height: 48px;

    overflow: hidden;

    line-height: 24px;

}



.vacatureitem .content>p:last-of-type{

    margin-top: 20px;

}



.sub.single.nieuws .bekijk-ook .btn{

    border-color: #10192C;

    color: #10192C;

}



.sub.single.nieuws .bekijk-ook .btn:hover{

    background-color: #10192C;

    color: white;

}



.sub.single.nieuws .bekijk-ook .btn:hover::before{

    background-image: url(https://www.tolcoating.nl/wp-content/themes/2024-05-theme/images/arrow-right-white.svg);

}



.sub.single.nieuws .bekijk-ook .btn::before{

    background-image: url(https://www.tolcoating.nl/wp-content/themes/2024-05-theme/images/arrow-right-black.svg);

}



.sub.single.nieuws .bekijk-ook h2{

    margin-bottom: 32px;

}



.sub.single.nieuws .hoofdlaag{

    background: #F5F5F5;

    padding-bottom: 80px;

}



.sub.single.nieuws .hoofdlaag .flexbox-wrapper .content img{

    margin: 24px 0!important;

    width: 100%;

    max-height: 600px;

    object-fit: cover;

    display: block;

}



.sub.single.nieuws .hoofdlaag .flexbox-wrapper .content>*:not(:last-child){

    margin-bottom: 20px;

}



.sub.single.nieuws .hoofdlaag .flexbox-wrapper .content a{

    text-decoration: underline;

    color: #0C1322;

}



.sub.single.nieuws .hoofdlaag .flexbox-wrapper .content a:hover{

    text-decoration: none;

}



.sub.single.nieuws .hoofdlaag .flexbox-wrapper .content ul{

    margin-left: 18px;

}





.sub.single.nieuws .hoofdlaag .flexbox-wrapper .content h2{

    font-weight: 700;

    margin-top: 54px;

    margin-bottom: 8px!important;

}



.sub.single.nieuws .hoofdlaag .sidebar, .sub.single.dienst .formulierlaag .flexbox-wrapper .sidebar{

    margin-top: 40px;

}



.sub.single.dienst .hoofdlaag .flexbox-wrapper .content .icoon{

    width: 80px;

    height: 80px;

}



.sub.overons, .sub.werkenbij{

    background: linear-gradient(141deg, rgba(133, 51, 118, 1) 0%, rgba(19, 31, 55, 1) 100%);

    position: relative;

}



.sub.overons>*, .sub.werkenbij>*{

    position: relative;

    z-index: 2;

}



.sub.overons .ons-verhaal .content .single, .sub.overons .ons-verhaal .afbeelding img, .sub.overons .ons-verhaal .afbeelding .achtergrond span{

    opacity: 0;

    animation: fadeIn 0.5s ease-in-out forwards;

} 



.sub.overons .ons-verhaal .content .single{

    overflow: hidden;

    max-width: 620px;

}



.sub.overons .ons-verhaal .afbeelding>span:first-child{

    position: absolute;

    left: -60%;

    top: -50%;

    width: 200%;

    height: 200%;

    opacity: 0.4;

    background-size: cover;

    max-width: 1293px;

}



.sub.overons .ons-verhaal .flexbox-wrapper .afbeelding{

    order: 1;

    position: relative;

}



.sub.overons .ons-verhaal .flexbox-wrapper .afbeelding .achtergrond{

    width: 110vw;

    position: relative;

    left: calc(-28px - 5vw);

    max-width: 646px;

}



.sub.overons .ons-verhaal .flexbox-wrapper .afbeelding .slider-image{

    position: absolute;

    top: 25%;

    width: 80%;

    left: 0;

    max-width: 517px;

}



.sub.overons .ons-verhaal .flexbox-wrapper .content{

    color: white;

    margin-bottom: 40px;

}



.sub.overons .ons-verhaal .flexbox-wrapper .content h1{

    margin-bottom: 24px;

}



.sub.overons .ons-verhaal .flexbox-wrapper .content .buttons{

    margin-top: 24px;

    display: none;

}



.sub.overons .ons-verhaal .flexbox-wrapper .content .buttons .btn{

    display: inline-block;

    width: 62px;

    border-radius: 100%;

    padding: 20px;

}



.sub.overons .ons-verhaal .flexbox-wrapper .content .buttons .btn:hover{

    background-color: transparent;

}



.sub.overons .ons-verhaal .flexbox-wrapper .content .buttons .btn::before{

    background-image: url(https://www.tolcoating.nl/wp-content/themes/2024-05-theme/images/arrow-right-white.svg);

}





.sub.overons .ons-verhaal .flexbox-wrapper .content .buttons p{

    display: inline-block;

    width: fit-content;

    color: #FFFFFF66;

}



.sub.overons .ons-verhaal .flexbox-wrapper .content .buttons .slider-counter{

    margin-left: 20px;

    color: white;

}



.sub.overons .ons-verhaal .flexbox-wrapper .content .buttons .btn:first-child{

    transform: rotate(180deg);

    margin-right: 8px;

}



.sub.overons .quotelaag .flexbox-wrapper>span{

    width: 200px;

    height: 200px;

    position: relative;

    order: 1;

    margin-top: 24px;

    background-size: cover;

    border-radius: 100%;

}



.sub.overons .quotelaag .flexbox-wrapper>span span{

    width: 62px;

    height: 62px;

    position: absolute;

    right: 0;

    bottom: 0;

}



.sub.overons .quotelaag .flexbox-wrapper>span span a{

    width: 100%;

    height: 100%;

    position: absolute;

    border-radius: 100%;

}



.sub.overons .quotelaag .flexbox-wrapper>div{

    color: white;

}



.sub.overons .quotelaag .flexbox-wrapper>div h2{

    margin-bottom: 24px;

}



.sub.overons .quotelaag .flexbox-wrapper>div p{

    font-size: 18px;

}



.sub.overons .quotelaag .flexbox-wrapper>div p:first-child{

    font-size: 24px;

    line-height: 36px;

    margin-bottom: 3px;

    font-weight: 700;

}



.sub.overons .quotelaag .flexbox-wrapper>div .btn{

    margin-top: 40px;

}



.sub.overons .afbeelding-slider, .sub.werkenbij .afbeelding-slider{

    padding-bottom: 80px;

    position: relative;

}



.sub.overons .afbeelding-slider::before, .sub.werkenbij .afbeelding-slider::before{

    content: "";

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 50%;

    background-color: #F5F5F5;

}



.sub.werkenbij .afbeelding-slider::before{

    background-color: white;

}



.sub.werkenbij .vacatureslaag .inner{

    color: white;

}



.sub.werkenbij .vacatureslaag h2{

    margin-bottom: 24px;

}



.sub.werkenbij .vacatureslaag .flexbox-wrapper{

    margin-top: 40px;

}



.sub.werkenbij .vacatureslaag.stage .flexbox-wrapper{

    margin-top: 0;

}



.vacatureitem{

    margin-bottom: 32px;

}



.vacatureitem .content{

    padding: 24px;

    background-color: #FFFFFF1A;

}



.vacatureitem span{

    width: 100%;

    height: 240px;

    background-size: cover;

}



.categorie{

    height: 40px;

    border-radius: 40px;

    font-weight: 700;

    padding: 10px 18px;

    line-height: 18px;

    background: linear-gradient(90deg, #E64683 0%, #B83869 100%);

    margin-bottom: 20px;

    width: fit-content;

}



.vacatureslaag.stage .categorie{

    background: #6BC4E9;

}



.single .categorie{

    background-color: #10192C0D;

}



.vacatureitem .content h4{

    font-size: 32px;

    line-height: 32px;

    margin-bottom: 20px;

}



.vacatureitem .content>p:nth-of-type(2){

    height: 144px;

    overflow: hidden;

}



.vacatureitem .content .btn{

    margin-top: 32px;

}



.sub.sub.werkenbij .hoofdlaag .inner{

    color: white;

}



.sub.werkenbij .hoofdlaag h1{

    margin-bottom: 32px;

}



.sub.werkenbij .hoofdlaag .btn{

    margin-top: 40px;

}



.sub.werkenbij .tijdlijnlaag .inner{

    color: white;

}



.sub.werkenbij .tijdlijnlaag .inner>.flexbox-wrapper:not(:last-child){

    padding-bottom: 80px;

}



.sub.werkenbij .tijdlijnlaag .inner>.flexbox-wrapper{

    padding-left: 30px;

    position: relative;

}



.sub.werkenbij .tijdlijnlaag .inner>.flexbox-wrapper::before{

    content: "";

    width: 1px;

    height: 100%;

    background-color: white;

    position: absolute;

    left: 0;

    top: 30px;

}



.sub.werkenbij .tijdlijnlaag .inner>.flexbox-wrapper:first-of-type:after{

    background-color: #3d2851;

}



.sub.werkenbij .tijdlijnlaag .inner>.flexbox-wrapper::after{

    content: "";

    width: 38px;

    height: 38px;

    background-image: url(https://www.tolcoating.nl/wp-content/themes/2024-05-theme/images/tijdlijn-dot.svg);

    position: absolute;

    left: -19px;

    top: 15px;

    background-color: #272445;

}



.gecentreerde-content .content .flexbox-wrapper.btns.mobile .btn:not(:last-of-type){

    padding: 0;

    border: none;

    padding-bottom: 14px;

    margin-bottom: 14px;

    border-bottom: 1px solid #0C132233;

    border-radius: 0;

}



.gecentreerde-content .content .flexbox-wrapper.btns.mobile .btn:not(:last-of-type):hover{

    color: #10192C;

    background-color: transparent;

    text-decoration: underline;

}



.sub.werkenbij .tijdlijnlaag .flexbox-wrapper>div{

    margin-bottom: 40px;

}





.sub.werkenbij .tijdlijnlaag .flexbox-wrapper>div h3{

    margin-bottom: 20px;

}



.sub.werkenbij .tijdlijnlaag .flexbox-wrapper>div .flexbox-wrapper{

    margin-top: 30px;

    align-items: center;

}



.sub.werkenbij .tijdlijnlaag .flexbox-wrapper>div .flexbox-wrapper span{

    width: 14px;

    height: 14px;

}



.page-template-sub-dienst-single .sub.single.dienst .hoofdlaag .flexbox-wrapper .content a.btn{

    color: white;

}



.sub.werkenbij .tijdlijnlaag .flexbox-wrapper>div .flexbox-wrapper p{

    flex-basis: 50%;

    flex-grow: 1;

    margin-left: 12px;

    font-size: 20px;

    line-height: 20px;

}



.sub.werkenbij .tijdlijnlaag .flexbox-wrapper>span{

    width: 100%;

    height: 350px;

}



.sub.single.vacature .bekijk-ook{

    background-color: #F5F5F5;

    padding-bottom: 80px;

}



.sub.single.vacature .bekijk-ook .vacatureitem .content{

    background-color: white;

}



.sub.single.vacature .flexbox-wrapper .content .flexbox-wrapper{

    margin-bottom: 24px;

}



.sub.single.vacature .hoofdlaag .flexbox-wrapper .content h2:not(:first-of-type){

    margin-bottom: 20px!important;

}



.sub.single.vacature .flexbox-wrapper .content .flexbox-wrapper span{

    width: 14px;

    height: 14px;

    margin-right: 12px;

    position: relative;

    top: 6px;

}



.content-afbeelding.werkenbij .tekst{

    color: white;

}



.content-afbeelding.werkenbij .flexbox-wrapper .content>span{

    width: 152px!important;

    height: 100px!important;

}



.sub.single.vacature .flexbox-wrapper .content .stage>p{

    font-size: 20px!important;

    line-height: 20px!important;

    margin-bottom: 24px!important;

    margin-top: 24px!important;

    font-weight: bold!important;

}



.sub.single.vacature .flexbox-wrapper .content .flexbox-wrapper p{

    flex-basis: 50%;

    flex-grow: 1;

    font-size: 20px;

    line-height: 100%;

}



.sub.werkenbij .tijdlijnlaag .flexbox-wrapper .team-galerij{

    display: flex;

    flex-wrap: wrap;

    max-width: 430px;

}



.sub.werkenbij .tijdlijnlaag .flexbox-wrapper:nth-of-type(2n + 1)>img{

    display: none;

}



.sub.werkenbij .tijdlijnlaag .flexbox-wrapper .team-galerij div{

    width: 100px;

    height: 100px;

    border: 1px solid #FFFFFF33;

    border-radius: 100%;

}



.sub.werkenbij .tijdlijnlaag .flexbox-wrapper .team-galerij div img{

    width: 100%;

    border-radius: 100%;

    height: 100%;

    object-fit: cover;

    object-position: top;   

    opacity: 0;

    transition: 0.5s ease-in-out;

}



.sub.werkenbij .tijdlijnlaag .flexbox-wrapper .team-galerij div.visible img{

    opacity: 1;

}







.single.vacature .formulierlaag{

    background: linear-gradient(141deg, rgba(133, 51, 118, 1) 0%, rgba(19, 31, 55, 1) 100%);

    padding-bottom: 80px;

    position: relative;

}



.single.vacature .formulierlaag .inner{

    z-index: 2;

}



.single.vacature .formulierlaag .flexbox-wrapper>div:nth-of-type(1), .single.vacature .formulierlaag .flexbox-wrapper>div:nth-of-type(3), .single.vacature .formulierlaag .flexbox-wrapper>div:nth-of-type(1) a{

    color: white;

}



.single.vacature .formulierlaag .flexbox-wrapper>div:nth-of-type(1) a{

    text-decoration: underline;

}



.single.vacature .formulierlaag .flexbox-wrapper>div:nth-of-type(1) a:hover{

    text-decoration: none;

}



.single.vacature .formulierlaag .flexbox-wrapper h2{

    margin-bottom: 16px;

}



.single.vacature .formulierlaag .flexbox-wrapper>div:nth-of-type(2){

    margin: 40px 0;

    padding: 24px;

    background-color: #F5F5F5;

}



.single.vacature .formulierlaag .flexbox-wrapper>div:nth-of-type(2) h3{

    font-size: 28px;

    line-height: 30px;

    hyphens: none;

}



.single.vacature .formulierlaag .flexbox-wrapper>div:nth-of-type(3){

    background-color: #FFFFFF1A;

    padding: 24px;

}



.single.vacature .formulierlaag .flexbox-wrapper>div:nth-of-type(3) h3{

    margin-bottom: 16px;

}



.sub.overons .teamlaag{

    padding-bottom: 80px;

}



.sub.overons .teamlaag h2{

    color: white;

    margin-bottom: 24px;

}



.sub.overons .teamlaag .afbeeldingen-carousel-team .owl-stage-outer{

    overflow: visible;

}



.sub.overons .teamlaag .afbeeldingen-carousel-team .owl-item{

    opacity: 0.5;

    transition: 0.3s ease-in-out;

}



.sub.overons .teamlaag .afbeeldingen-carousel-team .owl-item.active{

    opacity: 1;

}



.sub.overons .teamlaag .afbeeldingen-carousel-team .single-team{

    width: 330px;

}



.sub.overons .teamlaag .afbeeldingen-carousel-team .single-team>span{

    width: 100%;

    height: 350px;

    background-size: cover;

    background-position: top;

}



.sub.overons .teamlaag .afbeeldingen-carousel-team .single-team>span.placeholder{

    background-size: 60%;

    background-position: center;

    background-color: #ffffff47;

}



.sub.overons .teamlaag .afbeeldingen-carousel-team .single-team>div>div>p{

    display: inline-block;

    font-size: 18px;

    font-weight: bold;

    background-color: #10192C0D;

    padding: 8px 18px 8px 18px;

    border-radius: 40px;

}



.sub.overons .teamlaag .afbeeldingen-carousel-team .single-team>div>div:has(span)>p{

    position: relative;

    bottom: 24px;

    left: 10px;

}



.sub.overons .teamlaag .afbeeldingen-carousel-team .single-team>div{

    padding: 24px;

    background-color: white;

    height: 162px;

}



.sub.overons .teamlaag .afbeeldingen-carousel-team .single-team>div .naam{

    color: #10192C;

    margin-bottom: 20px;

    font-weight: bold;

    font-size: 28px;

    line-height: 32px;

}



.sub.overons .teamlaag .afbeeldingen-carousel-team .single-team>div>div span{

    width: 62px;

    height: 62px;

    display: inline-block;

    transition: 0.2s;

    position: relative;

    &:hover{

        opacity: 0.6;

    }

}



.sub.overons .teamlaag .afbeeldingen-carousel-team .single-team>div>div span a{

    position: absolute;

    width: 100%;

    height: 100%;

    left: 0;

    top: 0;

}



.sub.overons .teamlaag .afbeeldingen-carousel-team .owl-dots .owl-dot{

    background-color: #FFFFFF33!important;

}



.sub.overons .teamlaag .afbeeldingen-carousel-team .owl-dots .owl-dot.active{

    background-color: #FFFFFF!important;

}



.page-id-850 .above-footer, .page-id-917 .above-footer{

    padding-bottom: 0!important;

    padding-top: 80px!important;

    position: relative;

    bottom: 0!important;

    margin-bottom: 0!important;

}



.blokken .flexbox-wrapper.diensten{

    margin-bottom: -32px;

}



.blokken .flexbox-wrapper.diensten>div{

    background: #FFF;

    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.05);

    padding: 24px;

    margin-bottom: 32px;

}



.blokken .flexbox-wrapper.diensten>div span{

    width: 60px;

    height: 57px;

    background-size: contain;

    margin: 10px 0 32px 10px;

}



.blokken .flexbox-wrapper.diensten>div h3{

    margin-bottom: 20px;

}



.blokken .flexbox-wrapper.diensten>div p{

    height: 96px;

    overflow: hidden;

}



.blokken .flexbox-wrapper.diensten>div a.btn{

    margin-top: 32px;

}



.page-id-850 .content-afbeelding a.btn.ghost.black{

    margin-top: 8px;

}



.sub.single.dienst .afbeelding-slider{

    background-color: #F5F5F5;

    padding-top: 0!important;

    padding-bottom: 80px!important;

}



.sub.single.dienst .formulierlaag .flexbox-wrapper>div:first-child h2{

    margin-bottom: 26px;

}



.sub.single.dienst .formulierlaag .flexbox-wrapper>.form{

    margin-top: 40px;

    background-color: #F5F5F5;

    padding: 24px;

}



.blokken.diensten .flexbox-wrapper.sponsors{

    flex-direction: column;

    margin-bottom: -16px;

}



.blokken.diensten .flexbox-wrapper.sponsors span{

    height: 100px;

    background-color: white;

    background-size: 80px;

    margin-bottom: 16px;

    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.05);

}



 /**

 * Owl Carousel - Nav

 * ----------------------------------------------------------------------------

 */

.owl-nav{

    display: block;

}



.owl-nav .owl-prev{

    width: 48px;

    height: 48px;

    border-radius: 4px;

    position: absolute; 

    background: url(https://www.tolcoating.nl/wp-content/themes/2024-05-theme/images/owl-nav-dark.svg) no-repeat!important;

    background-position: center center!important;

    transform: rotateY(180deg);

    top: calc(50% - 48px);

    left: -22px;

    transition: 0.2s;

}



.owl-nav .disabled{

    opacity: 0;

}



.owl-nav .owl-next{

    width: 48px;

    height: 48px;

    border-radius: 4px;

    position: absolute;

    background: url(https://www.tolcoating.nl/wp-content/themes/2024-05-theme/images/owl-nav-dark.svg) no-repeat!important;

    background-position: center center!important;

    top: calc(50% - 48px);

    right: -22px;

    transition: 0.2s;

}



.owl-nav .owl-prev:hover, .owl-nav .owl-next:hover{

    opacity: 0.7;

}



  /**

 * Owl Carousel - Dots

 * ----------------------------------------------------------------------------

 */

.owl-dots{

    display: flex;

    flex-wrap: wrap;

    margin-top: 32px;

}



.owl-dots .owl-dot{

    height: 3px!important;

    background-color: #FFFFFF!important;

    flex-grow: 1;

}



.owl-dots .owl-dot.active{

    background-color: #0C1322!important;

}





 /**

 * Blogs - filters

 * ----------------------------------------------------------------------------

 */



 

 .searchandfilter>ul>li{

    padding: 0;

    margin-bottom: 22px;

 }



 .searchandfilter ul li ul::-webkit-scrollbar{

    display: none;

 }



 .sub.projecten .filters>form{

    justify-content: center;

 }



 .searchandfilter ul li ul li{

    height: fit-content;

    position: relative;

    cursor: pointer;

    flex-basis: fit-content;

    transition: 0.2s;

    margin-right: 8px;

    padding: 0;

    display: inline-block;

    width: fit-content;

    margin-bottom: 8px;

 }



 .searchandfilter ul li ul li:hover label{

    color: white;

    background-color: black;

    border-color: black;

 }



 .searchandfilter ul li ul li input{

    appearance: none;

    position: absolute;

    width: 100%;

    height: 100%;

    left: 0;

    top: 0;

    margin: 0;

    padding: 0;

    cursor: pointer;

 }



 .searchandfilter ul li ul li label{

    font-size: 16px;

    font-weight: 600;

    line-height: 16px;

    text-align: left;

    color: #252422;

    text-decoration: none;

    padding: 8px 12px !important;

    background-color: transparent;

    border: 1px solid #E31029;

    border-radius: 40px;

    transition: 0.2s;

 }



 .searchandfilter ul li ul li.sf-option-active label{

    color: white;

    background-color: black;

    border-color: black;

 }





 /**

 * Blogs - pagination

 * ----------------------------------------------------------------------------

 */

 .pagination{

    position: relative;

    width: 100%;

    flex-basis: 100%;

    margin-top: 30px;

}



 .pagination .wp-pagenavi {

    width: 200px;

    text-align: center;

    margin: 0 auto;

    margin-bottom: 80px;

}



.pagination .wp-pagenavi::before {

    content: "";

    background-color: #00000033;

    width: 35%;

    height: 1px;

    display: block;

    left: 0;

    position: absolute;

    top: 14px;

}



.pagination .wp-pagenavi::after {

    content: "";

    background-color: #00000033;

    width: 35%;

    height: 1px;

    display: block;

    right: 0;

    position: absolute;

    top: 14px;

}



.pagination .pages, .pagination .previouspostslink, .pagination .first, .pagination .last {

    display: none!important;

}



.pagination .current, .pagination .extend {

    border: none;

    padding: 0;

    font-weight: 500!important;

    font-size: 18px!important;

    line-height: 18px!important;

    width: fit-content;

    margin: 0!important;

    color: #313132;

    display: inline-block!important;

    padding: 0;

    margin: 0 2px!important;

}



.pagination .page {

    width: fit-content;

    border: none;

    margin: 0!important;

    color: #313132;

    display: inline-block!important;

    border-bottom: 1px solid #313132;

    padding: 0;

    margin: 0 2px!important;

    font-weight: 500!important;

    font-size: 18px!important;

    line-height: 18px!important;

}



.pagination .nextpostslink {

    color: #313132;

    font-weight: 700;

    text-decoration-line: underline;

    border: none;

    position: absolute;

    left: 0;

    right: 0;

    margin: auto!important;

    width: fit-content;

    display: block;

    max-width: 400px;

    font-size: 18px!important;

    line-height: 18px!important;

}



/**

 * Contact

 * ----------------------------------------------------------------------------

 */



 .sub-contact .formulierlaag{

    background: linear-gradient(219deg, #3A5DA8 1.15%, #0C1322 98.85%);

    position: relative;

    padding: 80px 0;

 }



.sub-contact .formulierlaag .inner{

    z-index: 3;

    color: white;

}



.sub-contact .formulierlaag .pretitel{

    color: white;

}



.sub-contact .formulierlaag h1{

    font-size: 54px;

    line-height: 54px;

    margin-bottom: 24px;

}



.sub-contact .formulierlaag .form{

    background-color: #F5F5F5;

    margin-top: 40px;

    color: #0C1322;

    padding: 24px;

}



.sub-contact .formulierlaag .form h3{

    font-size: 28px;

    line-height: 28px;

}



.sub-contact .formulierlaag .flexbox-wrapper .gegevens.mobile{

    flex-basis: 100%;

}



.sub-contact .gegevens .contactblokken{

    margin-top: 32px;

    display: flex;

    flex-wrap: wrap;

}



.sub-contact .gegevens .contactblokken>div:first-of-type{

    margin-top: 0;

}



.sub-contact .gegevens .contactblokken>div:first-of-type a{

    color: white;

    text-decoration: underline;

}



.sub-contact .gegevens .contactblokken>div:first-of-type a:hover{

    text-decoration: none;

}



.sub-contact .gegevens .contactblokken>div{

    margin-top: 16px;

    padding: 24px;

    background-color: #FFFFFF1A;

    width: 100%;

    display: inline-block;

}



.sub-contact .gegevens .contactblokken>div>p:first-child{

    font-size: 20px;

    line-height: 100%;

    font-weight: 700;

    margin-bottom: 16px!important;

}



.sub-contact .gegevens .contactblokken>div:first-of-type>p:nth-child(3){

    margin-bottom: 20px;

}



.sub-contact .gegevens .contactblokken>div>*:not(:last-child){

    margin-bottom: 12px;

}



.sub-contact .gegevens .contactblokken>div>*:not(:first-child){

    line-height: 100%;

}



/**

 * Gravity Forms

 * ----------------------------------------------------------------------------

 */

 .gform_wrapper.gravity-theme .gform_required_legend, .gform_wrapper.gravity-theme .gform_fileupload_rules{

    display: none!important;

}



.gform_wrapper.gravity-theme .gfield_required{

    color: #E64683!important;

    font-size: 16px!important;

}



.gform_wrapper.gravity-theme .gfield_label{

    font-weight: 600!important;

    font-size: 16px!important;

    line-height: 100%;

    color: black;

}



.gform_wrapper.gravity-theme .gform_body, .gform_wrapper.gravity-theme .gform_footer{

    width: 100%;

}



.gform_wrapper.gravity-theme .gform_body input, .gform_wrapper.gravity-theme .gform_body textarea{

    height: 48px;

    font-size: 16px!important;

    line-height: 100%!important;

    background-color: white;

    border: 1px solid transparent;

    font-family: "arboria", sans-serif;

    font-weight: normal;

    font-weight: 400;

    color: #0C1322;

    padding: 14px 15px 18px !important;

}



.gform_wrapper.gravity-theme .gform_body input:focus, .gform_wrapper.gravity-theme .gform_body textarea:focus{

    border-color: #024166!important;

}



.gform_wrapper.gravity-theme .gform_body textarea{

    height: 96px!important;

}



.gform_wrapper.gravity-theme .gfield_error [aria-invalid=true] {

    border: 1px solid #c02b0a!important;

}



.gform_wrapper.gravity-theme .gform_footer{

    padding-bottom: 0!important;

}



.gform_wrapper.gravity-theme .gform_footer .gform_button.button{

    margin-bottom: 0;

    height: 62px!important;

}



.gform_wrapper.gravity-theme .gform_validation_errors>h2{

    font-size: 18px!important;

    line-height: 100%!important;

    color: #c02b0a!important;

}



.gform-icon--circle-error:before{

    color: #c02b0a!important;

}



.gform_wrapper.gravity-theme .validation_message{

    display: none;

}









.gform_wrapper.gravity-theme .gfield.gfield--type-consent input{

    appearance: none;

    border: 1px solid #16133E99 !important;

    width: 14px !important;

    height: 14px !important;

    margin: 0;

    position: relative;

    background-color: white;

    padding: 0 !important;

}



.gform_wrapper.gravity-theme .gfield.gfield--type-consent label a{

    text-decoration: underline;

    color: #0C1322;

}



.gform_wrapper.gravity-theme .gfield.gfield--type-consent label a:hover{

    text-decoration: none;

}



.gform_wrapper.gravity-theme .gfield.gfield--type-consent input:checked {

    background-color: #16133E;

}



.gform_wrapper.gravity-theme .gform_drop_instructions{

    display: none!important;

}



.gform_wrapper.gravity-theme .gform_drop_area{

    background-color: transparent!important;

    border: none!important;

    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23E64683FF' stroke-width='4' stroke-dasharray='10%2c 20' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e")!important;

}



.gform_wrapper.gravity-theme .gform_button_select_files{

    background-color: transparent;

    border: none;

    text-decoration: underline;

    color: #0C1322;

    font-family: "arboria", sans-serif;

    font-weight: normal;

    font-weight: 400;

    font-size: 16px;

}





.op-zoek-box div.knoppen .btn:nth-of-type(2) {

    background: linear-gradient(99deg, #6BC4E8 1.5%, #6BC4E9 98.5%);

    border: 1px solid #6BC4E8;

}

.op-zoek-box div.knoppen .btn {

    margin: 0 !important;

}

.op-zoek-box div.knoppen {

    display: flex

;

    flex-wrap: wrap;

    gap: 16px;

    justify-content: center;

    margin-top: 16px;

}

.op-zoek-box h4 {

    color: #FFF;

    text-align: center;

    font-family: 'arboria';

    font-size: 19px;

    font-style: normal;

    font-weight: 700;

    line-height: 24px;

}

.op-zoek-box {

    background: rgba(255, 255, 255, 0.10);

    position: relative;

    margin-top: 40px;

    text-align: center;

    padding: 24px;

}

.op-zoek-box div.knoppen a.btn:before {

    display: none;

}

.home section.diensten {

    background: linear-gradient(116deg, #853376 0.29%, #131F37 99.71%);

    position: relative;

    padding: 80px 0px;

    color: white;

}

.home .diensten span.bg-img {

    position: absolute;

    left: 0;

    top: 0;

    height: 100%;

    width: 100%;

    mix-blend-mode: overlay;

    background-size: cover;

}

.home section.diensten div.tekst {

    color: white;

    text-align: center;

    margin-bottom: 40px;

}

.home section.diensten h2 {

    color: white;

    font-weight: 700;

    margin-bottom: 24px;

    text-align: center;

}

.home .diensten .dienst-item a p.intro {

    margin-bottom: 32px;

}



.home .diensten .dienst-item a h4 {

    font-size: 32px;

    line-height: 32px;

    font-weight: 700;

    margin-bottom: 20px;

}

.home .diensten .dienst-item span.icon {

    display: block;

    width: 60px;

    height: 60px;

    background-size: contain !important;

    background-position: center center !important;

    background-repeat: no-repeat !important;

    margin-bottom: 32px;

}

.home .diensten .dienst-item a {

    color: white;

}

.home .diensten .dienst-item {

    background: rgba(255, 255, 255, 0.10);

    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.05);

    position: relative;

    padding: 24px 40px;

}

.home .diensten-overzicht span.btn {

    padding: 19px 24px;

    height: 62px;

    display: block;

    width: fit-content;

    transition: 0.2s;

    font-weight: 700;

    cursor: pointer;

    line-height: 100%;

    border-radius: 40px;

    color: white;

    border: 1px solid white;

    background: transparent;

    font-size: 18px;

    line-height: 18px !important;

    position: relative;

    font-family: "arboria", sans-serif;

}

.home .diensten-overzicht span.btn:hover {

    background: #ffffff4d;

}

.home .diensten-overzicht span.btn:before {

    content: "";

    width: 16px;

    height: 12px;

    margin-right: 10px;

    background-image: url(https://www.tolcoating.nl/wp-content/themes/2024-05-theme/images/arrow-right-white.svg);

    background-size: cover;

    background-repeat: no-repeat;

    background-position: center;

    display: inline-block;

}

.home .diensten-overzicht .owl-nav span {

    color: transparent;

}



/**

 * Media Queries

 * ----------------------------------------------------------------------------

 */

@media (min-width:425px) {





}



@media (min-width:700px) {



    .op-zoek-box {

        width: fit-content;

        margin-left: auto;

        margin-right: auto;

    }

    .op-zoek-box div.knoppen .btn:nth-of-type(2) {

        transition: initial;

    }

    .op-zoek-box div.knoppen .btn:nth-of-type(2):hover {

        background: linear-gradient(270deg, #6BC4E8 1.5%, #6BC4E9 98.5%);

    }



}





@media (min-width:768px) {

    .sub .content-afbeelding.duurzaamheid .flexbox-wrapper>.content, .sub .content-afbeelding.toepassingen .flexbox-wrapper>.content{

        order: unset;

    }



    .sub .content-afbeelding.duurzaamheid:nth-of-type(2n) .flexbox-wrapper>div, .sub .content-afbeelding.toepassingen:nth-of-type(2n) .flexbox-wrapper>div{

        order: 1;

    }



    .sub .content-afbeelding.duurzaamheid .flexbox-wrapper>span, .sub .content-afbeelding.toepassingen .flexbox-wrapper>span{

        height: unset;

    }



 /**

 * PAGE BUILDER CONTENT

 * ----------------------------------------------------------------------------

 */



 .content-afbeelding .inner>.flexbox-wrapper, .twee-kolom-content .inner>.flexbox-wrapper{

    flex-direction: row;

    justify-content: space-between;

    align-items: stretch;

 }



 .content-afbeelding .inner>.flexbox-wrapper>.content, .twee-kolom-content .inner>.flexbox-wrapper>.content-links, .twee-kolom-content .inner>.flexbox-wrapper>.content-rechts{

    flex-basis: 48%;

 }



 .content-afbeelding .inner>.flexbox-wrapper>.content{

    order: unset;

 }



 .content-afbeelding .inner>.flexbox-wrapper>span{

    flex-basis: 48%;

    margin-top: 0;

    background-size: cover;

    height: unset;

 }



 .twee-kolom-content .inner>.flexbox-wrapper>div:last-of-type{

    margin-top: 0;

 }



 .gecentreerde-content .inner>.flexbox-wrapper, .blokken .inner, .veelgestelde-vragen .inner{

    align-items: center;

    text-align: center;

    max-width: 620px;

    margin-left: auto;

    margin-right: auto;

 } 



 .gecentreerde-content .inner>.flexbox-wrapper>.content .flexbox-wrapper{

    justify-content: center;

 }



 .gecentreerde-content .inner>.flexbox-wrapper>.content .flexbox-wrapper p{

    max-width: fit-content;

 }



 .gecentreerde-content .inner>.flexbox-wrapper>.content>.btn, .gecentreerde-content .inner>.flexbox-wrapper>.content>span:last-of-type{

    margin-left: auto;

    margin-right: auto;

 }



 .blokken .pretitel{

    width: fit-content;

    margin-left: auto;

    margin-right: auto;

 }



 .blokken .tekst{

    text-align: center;

 }



 .afbeelding-slider .tekst{

    text-align: center;

 }



 .afbeelding-slider .slider{

    margin-left: auto;

    margin-right: auto;

 }

 

 .veelgestelde-vragen .categorien{

    display: flex;

    flex-wrap: wrap;

 }





 .veelgestelde-vragen .categorien a{

    text-align: center;

    flex-basis: 25%;

    padding: 15px 20px;

 }



}



@media (min-width:768px) {



    .homepage .hoofdlaag h1{

        hyphens: unset;

    }



    .homepage .content-builder .hoofdlaag .flexbox-wrapper .content-rechts .tekst{

        display: block;

    }



    .homepage .afbeelding-slider .tekst{

        max-width: 510px;

        margin-left: auto;

        margin-right: auto;

    }



    .homepage .duurzaamheid .inner>.flexbox-wrapper .content{

        order: 1;

        flex-basis: 50%;

        max-width: unset;

    }



    .homepage .duurzaamheid .inner>.flexbox-wrapper>span{

        margin-top: 10%;

        margin-bottom: 10%;

        flex-basis: 50%;

    }



    .homepage .blokken .inner{

        max-width: 1528px;

    }



    .homepage .blokken .inner>.tekst{

        max-width: 620px;

        margin-left: auto;

        margin-right: auto;

    }



    .homepage .blokken .flexbox-wrapper.info{

        flex-direction: row;

        justify-content: space-between;

    }



    .page-id-850 .content-afbeelding .flexbox-wrapper .content{

        order: 1;

    }



    .homepage .blokken .flexbox-wrapper.info>div{

        flex-basis: 49%;

        margin-bottom: 8px;

        height: unset!important;

    }



    .homepage .blokken .flexbox-wrapper.info>div .tekst, .homepage .blokken .flexbox-wrapper.info>div>p{

        text-align: left;

    }



    .testimonials .owl-stage .owl-item video{

        width: 344px;

        height: 542px;

        transition: 0.4s;

    }



    .testimonials .owl-stage-outer{

        overflow: hidden;

    }



    .testimonials .owl-stage .owl-item video.video-playing{

        width: 704px;

    }



    .testimonials .flexbox-wrapper:last-of-type{

        justify-content: space-between;

    }



    .testimonials .flexbox-wrapper:last-of-type video{

        width: 53%;

        order: unset;

        margin-top: 0;

        height: 542px;

        flex-grow: 1;

        margin-right: 14px;

    }



    .testimonials .flexbox-wrapper:last-of-type .testimonial{

        flex-basis: 45%;

        max-width: 344px;

        padding: 0 20px 150px;

    }



    .testimonials .flexbox-wrapper:last-of-type .testimonial>p:first-of-type{

        font-size: 28px;

        line-height: 40px;

    }



    .testimonial{

        width: 344px;

    }



    .testimonials .owl-stage .owl-item video.video-playing + .testimonial{

        width: 704px;

    }



    .sub.single.dienst .formulierlaag .flexbox-wrapper .sidebar{

        width: 605px;

        height: fit-content;

        padding: 40px 78px;

        align-items: flex-end;

        justify-content: center;

    }



    .sub.single.dienst .formulierlaag .flexbox-wrapper .sidebar>span:last-of-type{

        position: absolute;

        left: 78px;

    }



    .sub.single.dienst .formulierlaag .flexbox-wrapper .sidebar h3{

        margin-right: 45px;

    }



    .sub.single.dienst .formulierlaag .flexbox-wrapper .sidebar>p:last-of-type{

        margin-right: 45px;

        font-size: 18px;

    }



    .sub.single.dienst .formulierlaag .flexbox-wrapper .sidebar>span:first-of-type{

        left: 0;

        width: 300px;

        height: 300px;

        top: -40px;

    }



    .archive .flexbox-wrapper{

        flex-direction: row;

    }



    .content-afbeelding.duurzaamheid:nth-of-type(2n) .flexbox-wrapper>div, .content-afbeelding.toepassingen:nth-of-type(2n + 1) .flexbox-wrapper>div{

        order: 1;

    }



    .nieuwsitem{

        flex-basis: 49%;

    }



    .nieuwsitem:nth-of-type(2n+1){

        margin-right: 2%;

    }



    .sub.werkenbij .vacatureslaag h2{

        text-align: center;

    }



    .sub.werkenbij .vacatureslaag .inner>p{

        max-width: 644px;

        margin-left: auto;

        margin-right: auto;

        text-align: center;

    }





    .vacatureitem{

        flex-basis: 49%;

    }



    .vacatureitem:nth-child(2n + 1){

        margin-right: 2%;

    }



    .single .vacatureitem:nth-child(3){

        display: none;

    }



    .single.vacature .bekijk-ook h2{

        margin-left: auto;

        margin-right: auto;

    }



    .sub.single.nieuws .bekijk-ook .flexbox-wrapper .nieuwsitem:last-of-type{

        display: none;

    }



    .blokken.diensten .inner{

        max-width: 1528px;

        text-align: left;

    }



    .blokken.diensten .flexbox-wrapper.diensten>div{

        flex-basis: 49%;

    }



    .blokken.diensten .flexbox-wrapper.diensten>div:nth-of-type(2n+1){

        margin-right: 2%;

    }



    .blokken.diensten{

        padding-top: 80px!important;

    }



    .archive h1{

        text-align: center;

    }



    .archive .inner>p{

        max-width: 640px;

        margin-left: auto;

        margin-right: auto;

        text-align: center;

    }



    .afbeelding-slider .afbeeldingen-carousel .owl-item .big{

        top: -60px;

        left: 20px;

    }



    .sub.overons .quotelaag .flexbox-wrapper>div{

        flex-basis: 50%;

        flex-grow: 1;

        margin-top: 0;

        margin-left: 54px;

        max-width: 680px;

        order: 2;

    }



    .sub.overons .quotelaag .flexbox-wrapper>span{

        margin-top: 0;

    }



    .sub.werkenbij .hoofdlaag h1{

        text-align: center;

    }



    .sub.werkenbij .hoofdlaag p{

        text-align: center;

        margin-left: auto;

        margin-right: auto;

        max-width: 760px;

    }



    .sub.werkenbij .hoofdlaag .btn{

        margin-left: auto;

        margin-right: auto;

    }



    .sub.werkenbij .tijdlijnlaag .inner>.flexbox-wrapper{

        max-width: 712px;

        margin-left: auto;

        margin-right: auto;

    }



    .formulierlaag .inner>.flexbox-wrapper{

        max-width: 720px;

    }



    .single.vacature .formulierlaag .inner>.flexbox-wrapper{

        max-width: unset;

        justify-content: space-between;

    }



    .single.vacature .formulierlaag .inner>.flexbox-wrapper>div:nth-of-type(1), .single.vacature .formulierlaag .inner>.flexbox-wrapper>div:nth-of-type(2){

        flex-basis: 48%;

        margin-top: 0;

        margin-bottom: 0;

    }



    .single.vacature .formulierlaag .inner>.flexbox-wrapper>div:nth-of-type(3){

        position: absolute;

        width: calc(48% - 28px);

        left: 28px;

        bottom: 0; 

    }



    .blokken.diensten .flexbox-wrapper.sponsors{

        flex-direction: row;

    }



    .blokken.diensten .flexbox-wrapper.sponsors span{

        flex-basis: 32%;

    }



    .blokken.diensten .flexbox-wrapper.sponsors span:nth-of-type(3n+2){

        margin-right: 2%;

        margin-left: 2%;

    }



    .above-footer .flexbox-wrapper{

        flex-direction: row;

        justify-content: space-between;

    }



    .above-footer::before{

        height: 150px;

    }





    .above-footer .flexbox-wrapper h2{

        flex-basis: 40%;

    }



    .above-footer .flexbox-wrapper>div{

        flex-basis: 55%;

        max-width: 604px;

        margin-left: auto;

    }



    .above-footer .flexbox-wrapper>div>p{

        margin-top: 0;

    }



    .footer .flexbox-wrapper{

        justify-content: space-between;

    }



    .footer .flexbox-wrapper>div{

        flex-basis: 48%!important;

    }



    .footer .flexbox-wrapper>div:last-of-type p:nth-child(2){

        max-width: 200px;

    }



    .footer .flexbox-wrapper>div:nth-child(2){

        display: block;

        margin-top: 0;

    }



    .content-afbeelding.werkenbij .flexbox-wrapper .content{

        order: 1;

    }



}





@media (min-width: 1024px) {

    .site-header {

        transition: 0.2s;

    }



    .site-header.scrolled {

        top: 0;

    }



    .site-header.has-topheader.top-header-desktop{

        top: 40px;

    }

    .home section.diensten div.tekst {

        max-width: 728px;

        margin-left: auto;

        margin-right: auto;

    }

    .home section.diensten h2 {

        font-size: 72px;

        line-height: 72px;

    }

    .home .diensten-overzicht .dienst-item {

        flex-basis: calc(50% - 16px);

        width: calc(50% - 16px);

    }

    

    .home .diensten-overzicht {

        display: flex

    ;

        flex-wrap: wrap;

        gap: 32px;

    }



    .hfeed.site:has(.has-topheader.top-header-desktop){

        margin-top: 120px;

    }





    .site-header .navbar-btn {

        display: none;

    }



    a[href^="tel:"] {

        text-decoration: none;

    }



    .site-header .inner {

        padding: 0 24px;

    }



    header.site-header div.menu {

        display: none;

    }



    div#navbar {

        transition: unset;

        text-align: center;

        flex-basis: fit-content;

        flex-grow: 1;

        order: 2;

        overflow: visible;

        border-top: 0;

        top: -13px;

        height: 56px;

    }



    .navbar a {

        animation: unset;

    }



    .navbar .menu-menu-1-container {

        position: relative;

    }



    div#navbar ul {

        max-height: unset;

        overflow: visible;

        position: absolute;

        top: 14px;

        width: fit-content;

        right: 0;

        left: 0;

        margin-left: auto;

    }



    div#navbar .nav-menu>li {

        border-bottom: none !important;

        padding-bottom: 0;

        margin: 0 16px;

        width: fit-content;

        display: inline-block;

        border-top: 0 !important;

        padding-bottom: 0;

        border-bottom: 0;

    }





    div#navbar .nav-menu>li.menu-item-has-children {

        margin-right: 20px;

        padding-bottom: 40px;

    }



    .nav-menu>li:first-of-type {

        padding: 0;

    }



    .nav-menu li a {

        display: unset;

        transition: 0.2s;

        font-size: 16px;

        line-height: 16px;

    }



    div#navbar ul li a::after {

        content: "" !important;

    }



    .nav-menu li.menu-item-has-children>a::after {

        top: -1px;

        right: -14px !important;

    }



    .nav-menu .sub-menu {

        display: block;

        opacity: 0;

        pointer-events: none;

    }



    div#navbar ul .sub-menu {

        padding: 30px 25px 0 25px;

        left: -24px;

        transition: 0.3s;

        box-shadow: rgba(17, 12, 46, .15) 0 48px 50px 0;

        width: max-content;

        top: 12px;

        background: #ffffff;

        padding-top: 0;

        margin-top: 36px;

        margin-right: auto;

    }



    div#navbar .nav-menu>li:last-of-type .sub-menu {

        right: -20px;

        left: unset;

    }



    div#navbar ul .sub-menu li {

        padding: 0 0 15px;

        display: block;

        width: fit-content;

        border: none;

    }



    .nav-menu li:hover .sub-menu,

    .nav-menu .sub-menu:hover {

        display: block;

        opacity: 1 !important;

        pointer-events: all !important;

    }



    .site-header .inner .home-link {

        margin-left: 0;

        width: 200px;

        height: 120px;

        background-color: white!important;

        position: relative;

        bottom: 50px;

        background-size: 140px !important;

    }



    .site-header .btn.navbar-mobile {

        display: none;

    }



}



@media (min-width: 1024px) {

    .mobile{

        display: none!important;

    }



    .desktop{

        display: block!important;

    }

    

    h1 {

        font-size: 80px;

        line-height: 88px;

    }

    

    h2 {

        font-size: 94px;

        line-height: 80px;

    }

    

    h3{

        font-size: 36px;

        line-height: 40px;

    }

    

    h4{

    

    }

    

    .sub h1{

        font-size: 94px;

        line-height: 80px;

    }

    

    .sub h2{

        font-size: 40px;

        line-height: 40px;

    }

    

    .sub h3{

    

    }

    

    .sub h4{

    

    }





    .content-afbeelding.werkenbij .flexbox-wrapper .content h3{

        font-size: 40px!important;

        line-height: 40px!important;

    }



    .homepage .content-builder .hoofdlaag{

        height: calc(100vh - 120px);

    }



    .homepage .content-builder .hoofdlaag .inner{

        position: absolute;

        left: 0;

        right: 0;

        bottom: 110px;

    }



    .homepage .content-builder .hoofdlaag .flexbox-wrapper{

        padding-top: 0;

        padding-bottom: 0;

    }

    .homepage .content-builder .hoofdlaag .flexbox-wrapper h1 br{

        display: block;

    }



    .homepage .content-builder .hoofdlaag .flexbox-wrapper .content-rechts{

        flex-basis: 45%;

    }



    .gecentreerde-content .content .flexbox-wrapper.btns.desktop{

        display: flex!important;

        margin-top: 48px;

    }



    .page-id-850 .content-afbeelding{

        padding-top: 160px!important;

        padding-bottom: 40px!important;

    }



    .page-id-850 .content-afbeelding .inner>.flexbox-wrapper{

        align-items: center;

    }



    .page-id-850 .content-afbeelding .inner>.flexbox-wrapper>span{

        height: 420px;

    }



    .page-id-850 .content-afbeelding a.btn{

        display: inline-block;

    }



    .page-id-850 .content-afbeelding a.btn.ghost.black{

        margin-left: 8px;

        margin-top: 0;

        display: inline-block;

    }



    .homepage .ons-verhaal>span:nth-of-type(3){

        left: calc(50% - 350px);

        top: calc(50% - 350px);

        width: 700px;

        height: 700px;

        -webkit-animation: rotating 68s linear infinite;

    }



    .homepage .ons-verhaal>span:nth-of-type(2){

        opacity: 0.5;

        left: calc(50% - 650px);

        top: calc(50% - 650px);

        width: 1300px;

        height: 1300px;

        -webkit-animation: rotatingreverse 178s linear infinite;

    }

    

    .sub.single.dienst .afbeelding-slider{

        padding-bottom: 120px!important;

    }



    .homepage .ons-verhaal{

        padding: 220px 0;

    }



    .homepage .afbeelding-blokken-animatie .mobile{

        display: block!important;

    }



    .homepage .afbeelding-blokken-animatie .desktop{

        display: none!important;

    }



    .sub.single.dienst .formulierlaag .flexbox-wrapper>div:first-child{

        flex-basis: 48%;

    }



    .sub.single.dienst .formulierlaag .flexbox-wrapper>.form{

        flex-basis: 48%;

        margin-top: 0;

    }



    .sub.single.dienst .formulierlaag .flexbox-wrapper>.sidebar{

        width: calc(48% - 28px);

        max-width: 605px;

        position: absolute;

        bottom: 0;

        padding: 40px;

    }



    .sub.single.dienst .formulierlaag .flexbox-wrapper .sidebar>span:first-of-type{

        left: -35px;

    }

    

    .sub.single.dienst .formulierlaag .flexbox-wrapper .sidebar>span:last-of-type{

        left: 40px;

    }



    .homepage .afbeelding-blokken-animatie .info-carousel .owl-item>div, .homepage .afbeelding-blokken-animatie .desktop>div, .sub.single.nieuws .hoofdlaag .sidebar{

        height: 605px;

        width: 368px;

        padding: 32px;

    }



    .homepage .afbeelding-blokken-animatie .info-carousel .owl-nav {

        display: none;

    }



    .homepage .afbeelding-blokken-animatie .info-carousel .owl-item:last-child>div>span:first-of-type, .homepage .afbeelding-blokken-animatie .desktop>div:last-child>span:first-of-type, .sub.single.nieuws .hoofdlaag .sidebar>span:first-of-type{

        top: 40px;

    }



    .homepage .afbeelding-blokken-animatie .info-carousel .owl-item:last-child>div>h3, .homepage .afbeelding-blokken-animatie .desktop>div:last-child>h3, .sub.single.nieuws .hoofdlaag .sidebar>h3{

        font-size: 32px;

        line-height: 32px;

    }



    .homepage .afbeelding-blokken-animatie .info-carousel .owl-item:last-child>div>.btn, .homepage .afbeelding-blokken-animatie .desktop>div:last-child>.btn, .sub.single.nieuws .hoofdlaag .sidebar>.btn{

        margin-top: 32px;

    }



    .homepage .afbeelding-blokken-animatie .info-carousel .owl-item:last-child>div>span:last-of-type, .homepage .afbeelding-blokken-animatie .desktop>div:last-child>span:last-of-type, .sub.single.nieuws .hoofdlaag .sidebar>span:last-of-type{

        width: 192px;

        height: 192px;

        margin-bottom: 78px;

    }



    .homepage .afbeelding-blokken-animatie .info-carousel .owl-item:last-child>div>span:last-of-type span, .homepage .afbeelding-blokken-animatie .desktop>div:last-child>span:last-of-type span, .sub.single.nieuws .hoofdlaag .sidebar>span:last-of-type span{

        width: 62px;

        height: 62px;

    }



    body.page-template-sub-dienst-single{

        overflow: visible;

    }

    



    .sub.single.dienst .formulierlaag{

        padding-bottom: 20px;

    }



    .homepage .content-builder .hoofdlaag .flexbox-wrapper .content-links h1 strong:first-of-type{

        font-weight: 700;

    }



    .homepage .afbeelding-blokken-animatie{

        padding-bottom: 270px;

    }



    .tekstkrul .scroll-container{

        height: 170px;

        bottom: 50px;

    }



    .homepage .blokken {

        padding-bottom: 550px !important;

    }



    .homepage .afbeelding-slider h2{

        font-size: 72px;

        line-height: 72px;

    }



    .homepage .blokken .flexbox-wrapper.info>div .tekst h3{

        border-bottom: 1px solid transparent;

        width: fit-content;

    }

    

    .homepage .blokken .flexbox-wrapper.info>div:hover .tekst h3{

        border-bottom: 1px solid white;

    }



    

    .homepage .blokken .flexbox-wrapper.info>div:nth-of-type(5):hover .tekst h3{

        border-bottom: 1px solid transparent;

    }



    a.btn.pill:last-of-type{

        order: -1;

    }



    a.btn.pill{

        padding: 13px 21px;

        height: 48px;

    }



    .homepage .afbeelding-slider .tekst{

        max-width: 750px;

        margin-bottom: 40px;

    }



    .afbeelding-slider .afbeeldingen-carousel .owl-item img{

        max-width: 709px;

        max-height: 620px;

    }



    .homepage .content-afbeelding.duurzaamheid{

        padding-top: 160px;

    }



    .homepage .duurzaamheid .inner>.flexbox-wrapper{

        align-items: unset;

    }



    .homepage .duurzaamheid .inner>.flexbox-wrapper>span{

        margin-top: 5%;

        margin-bottom: 5%;

        height: unset;

        max-width: unset;

    }



    .homepage .blokken{

        padding-top: 200px;

        padding-bottom: 210px;

        position: relative;

    }



    .homepage .blokken h2{

        font-size: 72px;

        line-height: 72px;

    }



    .homepage .blokken .flexbox-wrapper.info{

        margin-top: 60px;

        position: relative;

    }



    .homepage .blokken .flexbox-wrapper.info>div:nth-child(1){

        flex-basis: 38%;

        height: 617px !important;

    }



    .homepage .blokken .flexbox-wrapper.info>div:nth-child(2){

        flex-basis: 38%;

        height: 400px !important;

    }



    .sub.overons .ons-verhaal .flexbox-wrapper .afbeelding .achtergrond{

        max-width: unset;

        width: unset;

        position: unset;

    }



    .sub.overons .ons-verhaal .flexbox-wrapper .afbeelding .slider-image{

        left: 0;

        right: 0;

        margin: 0 auto;

        max-width: unset;

    }



    .sub.overons .ons-verhaal .afbeelding>span:first-child{

        max-width: unset;

        left: -50%;

    }



    .homepage .blokken .flexbox-wrapper.info>div:nth-child(3){

        order: 1;

        position: absolute;

        bottom: 0;

        right: 23%;

        height: 204px !important;

        width: 38%;

        padding: 52px 40px 32px;

    }



    .homepage .blokken .flexbox-wrapper.info>div:nth-child(4){

        flex-basis: 22%;

        height: 472px !important;

        display: block;

    }



    .sub.werkenbij .vacatureslaag h2{

        font-size: 72px;

        line-height: 72px;

        margin-bottom: 32px;

    }



    .homepage .blokken .flexbox-wrapper.info>div:nth-child(4) .tekst{

        position: absolute;

        bottom: 0;

        padding-bottom: 28px;

        border-bottom: 1px solid #FFFFFF80;

        bottom: 40px;

        left: 40px;

        right: 40px;

    }



    .homepage .blokken .flexbox-wrapper.info>div:nth-child(5){

        order: 2;

        position: absolute;

        bottom: 0;

        right: 0;

        width: 22%;

    }



    .homepage .blokken .flexbox-wrapper.info>div>p:last-child{

        padding-top: 24px;

        margin-top: 28px;

    }



    .testimonials{

        padding-top: 150px;

    }



    .testimonials h2{

        margin-bottom: 0;

    }



    .testimonials .flexbox-wrapper:first-of-type{

        justify-content: space-between;

        margin-bottom: 60px;

    }



    .testimonials .flexbox-wrapper:last-of-type .testimonial{

        padding: 0 32px 150px;

    }



    .testimonials .flexbox-wrapper:last-of-type video{

        margin-right: 32px;

    }



    .testimonials{

        padding-bottom: 160px;

        padding-top: 150px;

    }

    body.home .tekstkrul {

        padding-bottom: 160px !important;

        height: 350px;

    }

    body.home .tekstkrul div {

        bottom: 210px;

    }



    .sub.werkenbij .tijdlijnlaag{

        overflow: hidden;

        padding-bottom: 120px;

    }



    .sub.werkenbij .tijdlijnlaag .inner>.flexbox-wrapper{

        max-width: unset;

        justify-content: space-between;

        padding-left: 0;

        align-items: center;

    }



    .sub.werkenbij .tijdlijnlaag .flexbox-wrapper>div{

        flex-basis: 45%;

        margin-bottom: 0;

    }



    .sub.werkenbij .tijdlijnlaag .flexbox-wrapper>img{

        flex-basis: 45%;

        width: 45%;

        object-fit: contain;

    }



    .sub.werkenbij::after{

        content: "";

        background-image: url(https://www.tolcoating.nl/wp-content/uploads/2024/09/pixio-info-circle.svg);

        width: 940px;

        height: 940px;

        position: absolute;

        top: -100px;

        right: -470px;

        visibility: visible;

        background-size: cover;

    }



    .sub.werkenbij .tijdlijnlaag .inner>.flexbox-wrapper:not(:last-child){

        padding-bottom: 120px;

    }



    .sub.werkenbij .tijdlijnlaag .flexbox-wrapper:nth-child(2n + 1)>div:first-of-type{

        order: 1;

    }



    .sub.werkenbij .tijdlijnlaag .inner>.flexbox-wrapper:first-of-type:after{

        background-color: #382448;

    }



    .sub.werkenbij .tijdlijnlaag .inner>.flexbox-wrapper::before{

        left: 50%;

        top: 40%;

        height: 120%

    }



    .sub.werkenbij .tijdlijnlaag .inner>.flexbox-wrapper::after{

        left: calc(50% - 19px);

        top: 40%;

        background-color: #2f2344;

    }



    .above-footer{

        bottom: 240px;

        margin-bottom: -240px;

    }



    .above-footer .flexbox-wrapper h2{

        font-size: 54px;

        line-height: 54px;

    }



    .above-footer .inner.sponsor .flexbox-wrapper h2{

        flex-basis: 44%;

    }



    .vacatureitem{

        flex-basis: 32%;

    }



    .vacatureitem:nth-child(2n + 1){

        margin-right: 0%;

    }



    .vacatureitem:nth-child(3n + 2){

        margin-left: 1.5%;

        margin-right: 1.5%;

    }



    .single .bekijk-ook .vacatureitem{

        margin-bottom: 0;

    }



    .single.vacature .bekijk-ook{

        padding-bottom: 120px!important;

    }



    .single .vacatureitem:nth-child(3){

        display: block;

    }



    .testimonials .owl-stage .owl-item video.video-playing, .testimonials .owl-stage .owl-item video.video-playing + .testimonial{

        width: 970px;

    }



    .sub.werkenbij .vacatureslaag .flexbox-wrapper{

        margin-top: 54px;

    }



    .owl-dots{

        margin-top: 50px;

    }



    .sub .content-afbeelding.duurzaamheid .flexbox-wrapper, .sub .content-afbeelding.toepassingen .flexbox-wrapper{

        align-items: center;

    }



    .sub .content-afbeelding.duurzaamheid .flexbox-wrapper>span, .sub .content-afbeelding.toepassingen .flexbox-wrapper>span{

        height: 420px;

        max-width: 686px;

    }



    .sub .content-afbeelding.duurzaamheid .flexbox-wrapper>div, .sub .content-afbeelding.toepassingen .flexbox-wrapper>div{

        max-width: 686px;

    }



    .sub .content-afbeelding.duurzaamheid, .sub .content-afbeelding.toepassingen{

        padding-top: 80px;

    }



    .tekstkrul .scroll-container span{

        height: 200px;

        width: 6000px;

    }



    .gecentreerde-content.duurzaamheid::before, .gecentreerde-content.toepassingen::before, .archive::before{

        content: "";

        background-image: url(https://www.tolcoating.nl/wp-content/themes/2024-05-theme/images/toepassing-bg.svg);

        width: 1181px;

        height: 1181px;

        position: absolute;

        left: 0;

        right: 0;

        margin: 0 auto;

        top: -20px;

        visibility: visible;

    }



    .page-id-917 .gecentreerde-content.duurzaamheid::before{

        z-index: 2;

    }



    .page-id-917 .inner{

        z-index: 3;

    }



    .gecentreerde-content.duurzaamheid h1, .gecentreerde-content.toepassingen h1, .archive h1{

        margin-bottom: 32px!important;

    }



    .archive{

        padding-bottom: 74px;

    }



    .blokken.diensten .flexbox-wrapper.diensten>div{

        flex-basis: 32%;

    }



    .blokken.diensten .flexbox-wrapper.diensten>div:nth-of-type(2n+1){

        margin-right: 0;

    }



    .blokken.diensten .flexbox-wrapper.diensten>div:nth-of-type(3n+2){

        margin-left: 2%;

        margin-right: 2%;

    }



    .nieuwsitem{

        flex-basis: 32%;

        margin-bottom: 60px;

    }



    .nieuwsitem:nth-of-type(2n+1){

        margin-right: 0;

    }



    .nieuwsitem:nth-of-type(3n+2){

        margin-left: 1.5%;

        margin-right: 1.5%;

    }



    .sub.single.nieuws .bekijk-ook .inner>.flexbox-wrapper:first-of-type{

        justify-content: space-between;

        margin-bottom: 50px;

        align-items: flex-end;

    }



    .sub.single.nieuws .bekijk-ook h2{

        margin-bottom: 0;

        font-size: 72px;

        line-height: 72px;

    }



    .vacature-template-default{

        overflow: visible;

    }



    .sub.single.nieuws .bekijk-ook .flexbox-wrapper .nieuwsitem:last-of-type{

        display: block;

    }



    .sub.single.nieuws .bekijk-ook .flexbox-wrapper .nieuwsitem{

        margin-bottom: 0;

    }



    .sub.single.nieuws .hoofdlaag h1{

        font-size: 64px;

        line-height: 54px;

    }



    .sub.single.nieuws.vacature .hoofdlaag .content p:nth-of-type(2){

        font-size: 24px;

        line-height: 32px;

    }



    .sub.single.nieuws.vacature .hoofdlaag .content p:has(strong){

        font-size: 24px;

        line-height: 24px;

        margin-top: 32px;

    }



    .sub.single.nieuws .hoofdlaag .flexbox-wrapper .content img{

        margin: 54px 0!important;

    }



    .sub.single.nieuws .hoofdlaag .flexbox-wrapper .content{

        flex-grow: 1;

        flex-basis: 50%;

        margin-right: 80px;

    }



    .nieuws-template-default{

        overflow: visible;

    }



    .sub.single.nieuws .hoofdlaag{

        padding-bottom: 135px;

    }



    .sub.single.nieuws .hoofdlaag .flexbox-wrapper .sidebar{

        margin-top: 80px;

        position: sticky;

        top: 150px;

    }



    .archive .flexbox-wrapper{

        margin-top: 80px;

    }



    .sub-contact .formulierlaag{

        padding: 94px 0 150px;

    }



    .sub-contact .formulierlaag::after{

        content: '';

        width: 1031px;

        height: 1060px;

        background-image: url(https://www.tolcoating.nl/wp-content/themes/2024-05-theme/images/contact-bg.svg);

        position: absolute;

        top: 0;

        right: -400px;

        visibility: visible;

    }



    .formulierlaag .inner>.flexbox-wrapper{

        justify-content: space-between;

    }



    .formulierlaag .inner>.flexbox-wrapper .gegevens, .formulierlaag .inner>.flexbox-wrapper .form{

        flex-basis: 48%;

        height: fit-content;

        margin-top: 0;

    }



    .formulierlaag .inner>.flexbox-wrapper .form{

        margin-top: 90px;

    }



    .formulierlaag .inner>.flexbox-wrapper{

        max-width: unset;

    }



    .sub-contact .formulierlaag h1{

        margin-bottom: 32px;

        font-size: 74px;

        line-height: 74px;

    }



    .sub-contact .formulierlaag .gegevens>p:nth-of-type(2){

        max-width: 547px;

    }



    .sub.overons .ons-verhaal .flexbox-wrapper{

        justify-content: space-between;

        align-items: center;

    }



    .sub.overons .ons-verhaal .content .single{

        height: 330px;

    }



    .sub.overons .ons-verhaal .flexbox-wrapper .afbeelding{

        flex-basis: 48%;

    }



    .sub.overons .ons-verhaal .flexbox-wrapper .content{

        order: 2;

        flex-basis: 45%;

    }

    

    .sub.overons .quotelaag .flexbox-wrapper{

        justify-content: center;

    }



    .sub.overons .quotelaag .flexbox-wrapper>span{

        width: 263px;

        height: 263px;

    }



    .single.vacature .formulierlaag .flexbox-wrapper h2{

        font-size: 72px;

        line-height: 72px;

    }



    .single.vacature .formulierlaag .inner>.flexbox-wrapper>div:nth-of-type(1){

        max-width: 540px;

    }   



    .single.vacature .formulierlaag .inner>.flexbox-wrapper>div:nth-of-type(2){

        max-width: 676px;

    }



    .single.vacature .formulierlaag .inner>.flexbox-wrapper>div:nth-of-type(3){

        max-width: 676px;

    }



    .sub.single.nieuws .hoofdlaag .flexbox-wrapper .content h2{

        font-size: 32px;

        line-height: 40px;

    }



    .single.vacature .formulierlaag{

        padding-bottom: 120px;

    }



    .sub.overons .quotelaag .flexbox-wrapper>span span{

        width: 62px;

        height: 62px;

    }



    .sub.overons .afbeelding-slider, .sub.werkenbij .afbeelding-slider{

        padding-bottom: 120px;

    }



    .sub-contact .gegevens .contactblokken>div{

        max-width: 319px;

        margin-right: 16px;

    }



    .sub.overons .teamlaag h2{

        text-align: center;

        margin-bottom: 54px;

        font-size: 72px;

        line-height: 72px;

    }



    .blokken.diensten .flexbox-wrapper.sponsors span:nth-of-type(3n+2){

        margin-left: 0;

        margin-right: 0;

    }



    .blokken.diensten .flexbox-wrapper.sponsors{

        gap: 12px;

        padding-bottom: 80px;

    }



    .blokken.diensten .flexbox-wrapper.sponsors span{

        flex-basis: 19%;

    }



    .sub.overons .teamlaag .afbeeldingen-carousel-team .single-team>span{

        height: 453px;

    }



    .sub.overons .teamlaag .afbeeldingen-carousel-team .single-team{

        width: 471px;

    }



    .sub.overons .teamlaag{

        padding: 160px 0!important;

    }

    

    html{

        scroll-padding-top: 180px;

    }



    .page-id-850 .above-footer{

        padding-bottom: 0!important;

        padding-top: 120px!important;

    }



    .footer{

        padding-top: 100px;

    }



    .footer .flexbox-wrapper{

        padding-bottom: 100px;

    }



    .footer .flexbox-wrapper>div{

        flex-basis: fit-content!important;

        max-width: 24%;

        margin-top: 0!important;

    }



    .footer .flexbox-wrapper>div:first-of-type span{

        width: 195px;

        height: 111px;

    }



    .footer .flexbox-wrapper>div:last-of-type{

        flex-basis: 207px!important;

    }



    .footer .flexbox-wrapper>div:last-of-type span:not(:last-of-type){

        margin-top: 0;

        width: 207px;

        height: 76px;

        margin-right: 0;

    }



    .footer .flexbox-wrapper>div:last-of-type span:last-of-type{

        width: 207px;

        height: 76px;

        margin-right: 0;

    }



    .under-footer{

        padding: 23px 0;

    }



    .under-footer .flexbox-wrapper{

        flex-direction: row;

        justify-content: space-between;

        align-items: center;

    }



    .under-footer .flexbox-wrapper>div:first-of-type{

        margin-top: 0;

    }



    .under-footer .flexbox-wrapper>div:nth-of-type(2){

        order: 2;

    }



    .breadcrumbs{

        position: relative;

        z-index: 99999;

    }

}



@media (min-width: 1024px) {

     /**

 * PAGE BUILDER CONTENT

 * ----------------------------------------------------------------------------

 */



 .content-builder>section, .sub.single.nieuws>section, .sub.overons>section, .sub.werkenbij>section {

    padding-top: 120px;

}







}



@media (min-width: 1500px) {

    div#navbar .nav-menu>li:last-of-type .sub-menu {

        left: -24px;

        right: unset;

    }



    div#navbar ul{

        margin-right: auto;

    }



    .site-header .navbar-desktop{

        order: 2;

        display: block;

    }



    .homepage .afbeelding-blokken-animatie .mobile{

        display: none!important;

    }



    .homepage .afbeelding-blokken-animatie .desktop{

        display: flex!important;

        background-size: cover;

        position: relative;

    }



    .homepage .afbeelding-blokken-animatie .desktop>div{

        position: absolute;

        left: 0;

        top: 0;

        overflow: hidden;

    }



    .homepage .afbeelding-blokken-animatie .desktop>div:nth-of-type(1){

        z-index: 5;

    }



    .homepage .afbeelding-blokken-animatie .desktop>div:nth-of-type(2){

        z-index: 4;

    }



    .homepage .afbeelding-blokken-animatie .desktop>div:nth-of-type(3){

        z-index: 3;

    }



    .homepage .afbeelding-blokken-animatie .desktop>div:nth-of-type(4){

        z-index: 2;

    }





    .homepage .blokken .flexbox-wrapper.info>div:nth-child(1){

        padding: 32px;

    }



    .homepage .blokken .flexbox-wrapper.info>div:nth-child(2){

        padding: 40px;

    }



    .homepage .blokken .flexbox-wrapper.info>div:nth-child(2)>p:last-of-type{

        margin-top: 100px;

    }



    .homepage .blokken .flexbox-wrapper.info>div:nth-child(5){

        padding: 30px 40px 42px 40px;

    }



    .homepage .blokken .flexbox-wrapper.info>div:first-child>p:last-child{

        bottom: 32px;

        left: 32px;

        right: 32px;

    }



    .homepage .hoofdlaag .content-links{

        flex-basis: 50%!important;

    }



    .homepage .hoofdlaag h1{

        font-size: 124px;

        line-height: 120px;

        max-width: 721px;

    }



    .homepage .duurzaamheid .flexbox-wrapper .content::after{

        content: "";

        background-image: url(https://www.tolcoating.nl/wp-content/themes/2024-05-theme/images/pixio-diensten-circle.svg);

        width: 55%;

        height: 100%;

        position: absolute;

        left: 0;

        top: 0;

        visibility: visible;

    }



    .homepage .blokken::before{

        content: "";

        background-image: url(https://www.tolcoating.nl/wp-content/themes/2024-05-theme/images/toepassing-bg.svg);

        width: 1181px;

        height: 1181px;

        position: absolute;

        left: 0;

        right: 0;

        margin: 0 auto;

        top: 100px;

        visibility: visible;

    }



    .testimonials h2{

        margin-bottom: 0;

        font-size: 72px;

        line-height: 72px;

    }



    .homepage .content-builder .hoofdlaag .flexbox-wrapper .content-rechts{

        max-width: 648px;

    }



    .homepage .content-builder .hoofdlaag .flexbox-wrapper .content-rechts .tekst{

        padding-left: 28px;

        position: relative;

        font-size: 18px;

        margin-bottom: 40px;

    }



    .homepage .content-builder .hoofdlaag .flexbox-wrapper .content-rechts .tekst p::before{

        content: "";

        width: 2px;

        height: 100%;

        left: 0;

        top: 4px;

        position: absolute;

        background-color: #6BC4E9;

    }



    .homepage .duurzaamheid .inner>.flexbox-wrapper .content{

        padding: 54px;

    }



    .homepage .content-builder .hoofdlaag .flexbox-wrapper .content-rechts{

        margin-top: 40px;

    }



    .sub-contact .formulierlaag h1{

        font-size: 94px;

        line-height: 80px;

    }







    .sub-contact .gegevens .contactblokken>div{

        margin-top: 0;

    }



    .formulierlaag .inner>.flexbox-wrapper .form{

        padding: 30px 40px 40px;

    }



    .above-footer .flexbox-wrapper{

        padding: 32px 128px 32px 54px;

    }



    .sub-contact .formulierlaag::after{

        right: -240px;

        top: -50px;

    }



    .sub.overons .ons-verhaal .flexbox-wrapper .afbeelding .slider-image{

        width: 495px;

        height: 322px;

        object-fit: cover;

    }



    .sub.single.vacature .flexbox-wrapper .content>.flexbox-wrapper:nth-of-type(n + 5){

        width: 45%;

        margin-bottom: 32px;

    }



    .sub.single.nieuws .hoofdlaag .flexbox-wrapper .content{

        margin-right: 110px;

    }



    .sub.single.vacature .flexbox-wrapper .content>.flexbox-wrapper:nth-of-type(2n + 5){

        float: left;

    }



    .single.vacature .formulierlaag .flexbox-wrapper h2{

        margin-bottom: 32px;

    }



    .single.vacature .formulierlaag .inner>.flexbox-wrapper>div:nth-of-type(3){

        padding: 28px 32px 73px;

    }



    .footer .flexbox-wrapper>div:first-of-type{

        margin-right: 183px;

    }



    .sub.single.nieuws .hoofdlaag .flexbox-wrapper .sidebar{

        margin-top: 0;

    }



    .footer .flexbox-wrapper>div:last-of-type{

        margin-left: 118px;

    }



    .above-footer .inner .flexbox-wrapper::after{

        right: unset;

        left: 310px;

    }



    .homepage .afbeelding-blokken-animatie{

        height: 400vh;

    }



    body.home{

        overflow: visible;

    }



    .tekstkrul{

        height: 190px;

        margin-top: calc(-100vh + 435px);

    }



    .testimonials, .afbeelding-slider, .tekstkrul{

        overflow: hidden;

    }



    .homepage .afbeelding-blokken-animatie .inner{

        overflow: hidden;

        position: sticky;

        top: 200px;

        height: 100vh;

    }



    .homepage .afbeelding-blokken-animatie .inner>div:last-child span>div{

        will-change: transform;

        transition: 0.2s;

    }



    .sub-contact .formulierlaag .gegevens>p:nth-of-type(2){

        margin: 32px 0 44px;

    }



    .sub.single.nieuws{

        position: relative;

    }



    .sub.single.nieuws::before{

        content: "";

        background-image: url(https://www.tolcoating.nl/wp-content/themes/2024-05-theme/images/toepassing-bg.svg);

        width: 1482px;

        height: 1482px;

        position: absolute;

        right: 0;

        margin: 0 auto;

        top: -300px;

        visibility: visible;

        background-size: cover;

        background-repeat: no-repeat;

        background-position: center;

        background-position-x: 350px;

    }



    .single.vacature .formulierlaag::after{

        content: "";

        background-image: url(https://www.tolcoating.nl/wp-content/uploads/2024/09/pixio-info-circle.svg);

        width: 940px;

        height: 100%;

        position: absolute;

        top: 0;

        right: 0;

        visibility: visible;

        background-size: cover;

    }



    .afbeelding-slider .afbeeldingen-carousel .owl-item .big{

        width: 262px;

        height: 262px;

        top: -180px;

        left: 20px;

    }



    .afbeelding-slider .afbeeldingen-carousel .owl-item .big p:first-child{

        font-size: 36px;

        line-height: 36px;

    }



    .afbeelding-slider .afbeeldingen-carousel .owl-item .big p:nth-child(2) a{

        font-size: 18px;

    }



    .afbeelding-slider .afbeeldingen-carousel .owl-item .small p:first-child{

        bottom: 67px;

        right: -20px;

    }



    .afbeelding-slider .afbeeldingen-carousel .owl-item .small p:last-child{

        bottom: 30px;

        right: 25px;

    }



    .sub.single.dienst .formulierlaag .flexbox-wrapper>.sidebar{

        padding: 60px;

    }



    .sub.single.dienst .formulierlaag .flexbox-wrapper .sidebar>span:first-of-type{

        width: 430px;

        height: 430px;

        left: -40px;

        top: -80px;

    }



    .sub.single.dienst .formulierlaag .flexbox-wrapper .sidebar>span:last-of-type{

        width: 192px;

        height: 192px;

    }



    .sub.single.dienst .formulierlaag .flexbox-wrapper>div:first-child h2{

        font-size: 54px;

        line-height: 54px;

    }



    .sub.single.dienst .formulierlaag .flexbox-wrapper>div:first-child{

        max-width: 605px;

    }



    .sub.single.dienst .formulierlaag .flexbox-wrapper .sidebar>span:last-of-type span{

        width: 62px;

        height: 62px;

    }



    .blokken .flexbox-wrapper.diensten>div h3{

        font-size: 34px;

    }



    .sub.single.dienst .formulierlaag .flexbox-wrapper .sidebar>span:last-of-type{

        left: 77px;

    }

    

    .sub.overons .ons-verhaal .afbeelding>span:first-child{

        left: -38%;

        top: -41%;

        width: 170%;

        height: 179%;

    }



    .sub.overons .ons-verhaal{

        padding-top: 170px;

        padding-bottom: 40px;

    }



    .sub.werkenbij .tijdlijnlaag .flexbox-wrapper .team-galerij{

        max-width: 680px;

    }



    .sub.werkenbij .tijdlijnlaag .flexbox-wrapper .team-galerij div{

        width: 165px;

        height: 165px;

    }

}



@media (min-width: 1180px) {



    .home .diensten-overzicht .dienst-item {

        flex-basis: calc(33.33% - 22px);

        width: calc(33.33% - 22px);

        padding: 24px;

    }

    .testimonials .owl-stage .owl-item video {

        width: 471px;

    }



}





@media (min-width: 1500px) {

 /**

 * PAGE BUILDER CONTENT

 * ----------------------------------------------------------------------------

 */





}









@media (max-width: 1024px) {



    input[type="text"],

    input[type="email"],

    input[type="tel"],

    input[type="submit"],

    textarea {

        -webkit-appearance: none;

        border-radius: 0;

    }

    .homepage .blokken {

        padding-bottom: 340px;

    }



    a[href^="tel"] {

        text-decoration: none;

    }

}



@media (max-width:800px) {





    .home .tekstkrul .scroll-container {

        bottom: 80px;

    }

    .home .tekstkrul {

        padding-bottom: 80px;

    }

    .homepage .blokken {

        padding-bottom: 340px;

    }

}





/* PIXIO */



.sub.pixio{

    overflow: hidden;

}



.page-template-sub-pixio .site-main>section{

    display: none;

}



.page-template-sub-pixio .header-laag{

    display: flex;

    height: 80vh;

    max-height: 700px;

    position: relative;

    background-size: cover !important;

    background-position: center center !important;

    background-repeat: no-repeat !important;

    align-items: flex-end;

}



.page-template-sub-pixio .header-laag::after{

    content: '';

    position: absolute;

    width: 100%;

    height: 100%;

    background: url(https://www.tolcoating.nl/wp-content/uploads/2023/06/gradient-header.svg) no-repeat;

    bottom: 0;

    left: 0;

    visibility: visible;

    background-size: cover;

    background-position: center center;

}



.page-template-sub-pixio .header-laag .inner{

    z-index: 2;

    position: relative;

    color: white;

    margin-bottom: 40px;

}



.page-template-sub-pixio .header-laag h1 strong{

    display: block;

}



.page-template-sub-pixio .header-laag .right.text:before{

    background: #6BC4E9;

    content: '';

    display: block;

    width: 2px;

    height: 92px;

    position: absolute;

    left: 0;

    top: 6px;

}



.page-template-sub-pixio .header-laag .content-rechts{

    margin-top: 0!important;

}



.page-template-sub-pixio .header-laag .content-rechts .ghost{

    margin-top: 8px!important;

}



.sub.pixio .header-laag .flexbox-wrapper .right.text{

    position: relative;

    padding-left: 24px;

}



.sub.pixio .header-laag .flexbox-wrapper .right.text .c-btn{

    color: white;

    font-weight: 700;

    display: inline-block;

    

}



.sub.pixio .header-laag .flexbox-wrapper .right.text .c-btn:before{

    background: url(https://www.tolcoating.nl/wp-content/uploads/2023/06/arrow-right-white.svg) no-repeat;

}



.sub.pixio .header-laag .flexbox-wrapper .right.text .c-btn:first-of-type{

    background: linear-gradient(90deg, #E64683 0%, #B83869 100%);

    border: 1px solid #E64683;

    margin-right: 24px;

    border: 3px solid transparent;

}



.sub.pixio .header-laag .flexbox-wrapper .right.text .c-btn:first-of-type:hover{

    background: transparent;

    border-color: #E64683;

}



.sub.pixio .header-laag .flexbox-wrapper .right.text .c-btn:last-of-type{

    border: 3px solid #E64683;

}



.sub.pixio .header-laag .flexbox-wrapper .right.text .c-btn:last-of-type:hover{

    background-color: #E64683;

}



.sub.pixio .informatielaag{

    padding: 80px 0;

    background: linear-gradient(141deg, rgba(133, 51, 118, 1) 0%, rgba(19, 31, 55, 1) 100%);

    color: white;

    position: relative;

    overflow: hidden;

}



.sub.pixio .informatielaag>span:first-of-type{

    position: absolute;

    left: 0;

    top: 0;

    height: 100%;

    width: 100%;

    opacity: 0.1;

    background-size: cover;

}



@-webkit-keyframes rotating {

    from{

        -webkit-transform: rotate(0deg);

    }

    to{

        -webkit-transform: rotate(360deg);

    }

}



@-webkit-keyframes rotatingreverse {

    from{

        -webkit-transform: rotate(360deg);

    }

    to{

        -webkit-transform: rotate(0deg);

    }

}



.sub.pixio .informatielaag>span:nth-of-type(2){

    position: absolute;

    left: 0;

    top: calc(50% - 130px);

    width: 263px;

    height: 263px;

    opacity: 1;

    right: 0;

    margin: 0 auto;

    background-size: cover;

    -webkit-animation: rotating 50s linear infinite;

    opacity: 0.5;

}



.sub.pixio .informatielaag>span:nth-of-type(3){

    position: absolute;

    left: calc(50% - 300px);

    top: calc(50% - 300px);

    width: 600px;

    height: 600px;

    opacity: 1;

    background-size: cover;

    -webkit-animation: rotatingreverse 50s linear infinite;

    opacity: 0.5;



}





.sub.pixio .informatielaag h2{

    font-size: 45px;

    line-height: 40px;

    font-weight: 400;

    margin-bottom: 16px;

}



.sub.pixio .informatielaag h2 strong{

    font-weight: 700;

    display: block;

}



.sub.pixio .informatielaag .inner{

    color: white;

}



.sub.pixio .informatielaag .inner>p:nth-of-type(2){

    font-size: 24px;

    font-weight: 500;

    line-height: 24px;

    margin: 16px 0;

}



.sub.pixio .informatielaag .inner>p:nth-of-type(3){

    font-weight: 700;

    margin: 16px 0;

    color: #6BC4E9;

}



.sub.pixio .dienstenlaag .inner>.flexbox-wrapper{

    flex-direction: column;

}



.sub.pixio .dienstenlaag .inner>.flexbox-wrapper>span{

    order: 1;

    width: 100%;

    height: 300px;

    display: block;

    background-position: center;

    background-size: cover;

    background-repeat: no-repeat;

}



.sub.pixio .dienstenlaag .flexbox-wrapper>div{

    background: linear-gradient(219deg, #435CA4 1.15%, #10192C 98.85%);

    color: white;

    padding: 20px;

    position: relative;

}



.sub.pixio .dienstenlaag .flexbox-wrapper>div>span:first-of-type{

    position: absolute;

    left: 0;

    top: 0;

    height: 100%;

    width: 100%;

    opacity: 0.1;

    z-index: 1;

    background-size: cover;

}



.sub.pixio .dienstenlaag .flexbox-wrapper>div>*:not(span){

    position: relative;

    z-index: 1;

}



.sub.pixio .dienstenlaag .flexbox-wrapper>div .pretitel{

    margin-top: 0;

    font-weight: 400;

    color: #E64683;

    font-size: 14px;

    text-transform: uppercase;

    line-height: 14px;

    letter-spacing: .7px;

    display: flex;

    align-items: center;

    margin-bottom: 16px;

}



.sub.pixio .dienstenlaag .flexbox-wrapper>div .pretitel:before{

    content: '';

    display: block;

    width: 14px;

    height: 14px;

    background: url(https://www.tolcoating.nl/wp-content/uploads/2023/06/pink-favicon.svg) no-repeat;

    align-self: center;

    margin-right: 10px;

    background-size: contain;

    background-position: center center;

}



.sub.pixio .dienstenlaag .flexbox-wrapper>div h2{

    font-size: 44px;

    line-height: 44px;

    margin-bottom: 24px;

}



.sub.pixio .dienstenlaag .flexbox-wrapper>div .flexbox-wrapper{

    margin-top: 24px;

}



.sub.pixio .dienstenlaag .flexbox-wrapper>div .flexbox-wrapper{

    align-items: center;

}



.sub.pixio .dienstenlaag .flexbox-wrapper>div .flexbox-wrapper span{

    margin-right: 12px;

    width: 14px;

    height: 14px;

}



.sub.pixio .dienstenlaag .flexbox-wrapper>div .flexbox-wrapper>p{

    flex-basis: 50%;

    flex-grow: 1;

    margin: 0;

}



.sub.pixio .dienstenlaag{

    padding-bottom: 250px;

    padding-top: 80px;

    position: relative;

}



@keyframes scrollBackground {

    0% {

        background-position: 0 0; /* Start from the left */

    }

    100% {

        background-position: -100vw 0; /* Move to the left by the full viewport width */

    }

}



.sub.pixio .dienstenlaag .scroll-container{

    display: block;

    position: absolute;

    bottom: 70px;

    width: 100vw;

    height: 80px;

    background-repeat: repeat-x;

    background-size: cover;

    animation: scrollBackground 12s linear infinite;

}



.sub.pixio .dienstenlaag #scroll-image{

    position: absolute;

    top: 0;

    left: 0;

    width: 300vw; /* Ensure image width is 100% of the viewport */

    transform: translateX(-250%);

    transition: transform 0.2s ease-out;

    height: 100%;

    background-size: contain;

}



.sub.pixio .above-footer{

    margin-bottom: 0!important;

    bottom: 0!important;

}



.sub.pixio .tekstkrul{

    bottom: 90px;

    margin-top: unset!important;

}





@media (min-width:768px) {

    .sub.pixio .informatielaag .inner{

        max-width: 617px;

        text-align: center;

    }



    .sub.pixio .informatielaag h2{

        margin-bottom: 28px;

    }



    .sub.pixio .informatielaag .inner>p:nth-of-type(2){

        margin: 32px 0;

    }



    .sub.pixio .dienstenlaag .inner>.flexbox-wrapper{

        flex-direction: row;

    }



    .sub.pixio .dienstenlaag .inner>.flexbox-wrapper>span{

        flex-basis: 50%;

        height: unset;

        margin-top: 10%;

        margin-bottom: 10%;

    }



    .sub.pixio .dienstenlaag .flexbox-wrapper>div{

        flex-basis: 50%;

        order: 2;

        padding: 30px;

    }



    .sub.pixio .dienstenlaag .scroll-container{

        height: 100px;

    }

    

}



@media (min-width:1024px) {



    .sub.pixio section.header-laag{

        height: unset;

        max-height: unset;

        padding-top: 363px;

    }



    .page-template-sub-pixio .header-laag h1{

        font-size: 84px;

        line-height: 80px;

    }



    .sub.pixio section.header-laag .inner{

        margin-bottom: 56px!important;

    }



    .sub.pixio .informatielaag{

        padding: 120px 0;

    }



    .sub.pixio .informatielaag h2{

        font-size: 94px;

        line-height: 80px;

    }



    .sub.pixio .dienstenlaag{

        padding-top: 120px;

    }



    .sub.pixio .dienstenlaag .inner>.flexbox-wrapper>span{

        margin-top: 68px;

        margin-bottom: 68px;

    }



    .sub.pixio .dienstenlaag .flexbox-wrapper>div{

        padding: 50px;

    }



    .sub.pixio .dienstenlaag .flexbox-wrapper>div h2{

        font-size: 44px;

        line-height: 44px;

    }



    .sub.pixio .dienstenlaag .scroll-container{

        height: 180px;

        bottom: 107px;

    }



    .sub.pixio .informatielaag>span:nth-of-type(2){

        top: calc(50% - 335px);

        width: 670px;

        height: 670px;

        -webkit-animation: rotating 60s linear infinite;

    }



    .sub.pixio .informatielaag>span:nth-of-type(3){

        left: calc(50% - 650px);

        top: calc(50% - 650px);

        width: 1300px;

        height: 1300px;

        -webkit-animation: rotatingreverse 60s linear infinite;

    }



    .sub.pixio .dienstenlaag .scroll-container{

        animation: scrollBackground 30s linear infinite;

    }



    .sub.pixio .tekstkrul{

        bottom: 20px;

    }

    .home .testimonials {

        padding-bottom: 160px;

    }



}



@media (min-width:1440px) {



    .testimonials .owl-stage .owl-item video.video-playing{

        width: 1096px;

    }



    .page-template-sub-pixio .header-laag h1{

        font-size: 104px;

        line-height: 100px;

        flex-basis: 52%;

    }



    .sub.pixio .header-laag .flexbox-wrapper .right.text .c-btn{

        position: relative;

        left: -24px;

        margin-top: 35px;  

    }



    .sub.pixio .dienstenlaag .flexbox-wrapper>div{

        padding-bottom: 150px;

        position: relative;

    }



    .sub.pixio .dienstenlaag .flexbox-wrapper>div::before{

        content: "";

        background-image: url(https://www.tolcoating.nl/wp-content/uploads/2024/08/pixio-diensten-circle.svg);

        width: 65%;

        height: 100%;

        position: absolute;

        left: 0;

        top: 0;

    }



    .testimonials .owl-stage-outer{

        transition: 0.3s;

        height: 890px;

    }



    .testimonials .owl-stage-outer:has(.video-playing){

        height: 542px;

    }



    .vacatureitem .content{

        height: 452px;

    }



    .testimonials-carousel .owl-item>div:has(.video-playing){

        display: flex;

        flex-wrap: wrap;

        overflow: hidden;

    }



    .testimonials-carousel .owl-item>div .testimonial{

        display: flex;

        transition: 0.3s;

        width: 471px;

    }



    .testimonials-carousel .owl-item>div:has(.video-playing) .testimonial{

        width: 350px!important;

        margin-left: 26px;

        height: 542px;

        padding: 0 32px;

        transition-delay: 0.3s;

    }

}



@media (min-width:1500px) {

    .sub.pixio .tekstkrul{

        bottom: 120px;

    }

	

	.blokken.diensten .flexbox-wrapper.sponsors{

        gap: 18px;

    }

}



@media (min-width:1920px) {

    .sub.overons::before, .testimonials::before, .sub.werkenbij::before{

        background-image: none!important;

    }

}



@media (min-width:2000px) {

    .sub.pixio .dienstenlaag .scroll-container{

        height: 200px;

    }

}




/* ── CMPLZ ───────────────────────────────── */
.cmplz-document a,
.cmplz-document a:hover  {
    color: #10192C;
    text-decoration: none;
}

.cmplz-document h2  {
    font-size: 24px;
    line-height: 1.3;
    font-weight: 400;
    color: #10192C;
}

.cmplz-document h3  {
    font-size: 20px;
    line-height: 1.3;
    font-weight: 400;
    color: #10192C;
}

.cmplz-document p.cmplz-subtitle {
    font-size: 20px;
    line-height: 1.3;
    font-weight: 400;
    color: #10192C;
}

.cmplz-document ul {
    margin: 1em 0;
    padding-left: 40px;
}

#cmplz-document, .editor-styles-wrapper .cmplz-unlinked-mode {
    font-size: initial !important;
    max-width: 100% !important;
}

#cmplz-document p, #cmplz-document li, #cmplz-document td, .editor-styles-wrapper .cmplz-unlinked-mode p, .editor-styles-wrapper .cmplz-unlinked-mode li, .editor-styles-wrapper .cmplz-unlinked-mode td {
    font-size: initial !important;
    margin-top: 0;
}

div#cmplz-document * {
    margin: 5px 0px;
}

#cmplz-cookies-overview .cmplz-dropdown h5, #cmplz-document .cmplz-dropdown h5, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown h5,
#cmplz-cookies-overview .cmplz-dropdown summary div h3, #cmplz-document .cmplz-dropdown summary div h3, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown summary div h3,
#cmplz-cookies-overview .cmplz-dropdown h4, #cmplz-document .cmplz-dropdown h4, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown h4 {
    font-family: inherit;
}

div#cmplz-document span.screen-reader-text {
    display: none;
}

div#cmplz-document ul {
	margin: 1em 0;
	padding-left: 40px;
}

/* === Online Portal knop — eigen kleur + ruimte tussen header-knoppen (2026-07-20) === */
.site-header a.btn.navbar-portal {
    background: #0C1322;
    border-color: #0C1322;
}
.site-header a.btn.navbar-portal:hover {
    background: #1B2740;
    border-color: #1B2740;
}
/* Ruimte tussen "Neem contact op" en "Online Portal" op desktop (>=1500px) */
.site-header .navbar-desktop.navbar-portal {
    margin-left: 16px;
}


/* === Aankondigingsbalk Online Portaal boven de header (2026-09-16) ===
   De balk is fixed op top:0. De header onder de balk schuift omlaag met
   --portaalbalk-h; die staat hier als startwaarde en wordt door de JS in
   header.php bijgesteld op de echte hoogte (mobiel kan de tekst omvallen). */
body.heeft-portaalbalk {
    --portaalbalk-h: 46px;
}
body.heeft-portaalbalk .top-header,
body.heeft-portaalbalk .site-header {
    margin-top: var(--portaalbalk-h, 0px);
}
body.heeft-portaalbalk .hfeed.site {
    padding-top: var(--portaalbalk-h, 0px);
}
.portaalbalk {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: linear-gradient(90deg, #E64683 0%, #B83869 100%);
    color: #ffffff;
}
.portaalbalk .inner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 12px;
    padding-bottom: 12px;
    color: #ffffff;
}
.portaalbalk .melding {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    font-size: 16px;
    line-height: 22px;
    font-weight: 500;
    color: #ffffff;
}
.portaalbalk .label {
    flex: none;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 3px;
    padding: 2px 8px;
    font-size: 11px;
    line-height: 16px;
    letter-spacing: 1.32px;
    text-transform: uppercase;
    font-weight: 700;
}
.portaalbalk a.cta {
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 2px solid rgba(255, 255, 255, 0.65);
    white-space: nowrap;
}
.portaalbalk a.cta::after {
    content: " \2192";
}
.portaalbalk a.cta:hover {
    border-bottom-color: #ffffff;
}
.portaalbalk .sluit {
    margin-left: auto;
    flex: none;
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: none;
    color: #ffffff;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: 0.2s;
}
.portaalbalk .sluit:hover {
    background: rgba(255, 255, 255, 0.18);
}
@media (max-width: 767px) {
    body.heeft-portaalbalk {
        --portaalbalk-h: 96px;
    }
    /* Mobiel: label loopt in de tekst mee, link op een eigen regel, sluitknop
       rechtsboven op de hoogte van de eerste regel. */
    .portaalbalk .inner {
        position: relative;
        display: block;
        padding-top: 12px;
        padding-bottom: 12px;
    }
    .portaalbalk .melding {
        display: block;
        padding-right: 40px;
        font-size: 14px;
        line-height: 21px;
    }
    .portaalbalk .label {
        display: inline-block;
        margin-right: 6px;
        padding: 0 6px;
        font-size: 10px;
        line-height: 17px;
        letter-spacing: 1.2px;
        vertical-align: 1px;
    }
    .portaalbalk .tekst {
        display: inline;
    }
    .portaalbalk a.cta {
        display: inline-block;
        margin-top: 6px;
        line-height: 20px;
    }
    .portaalbalk .sluit {
        position: absolute;
        top: 10px;
        right: 28px;
        margin: 0;
        width: 24px;
        height: 24px;
        font-size: 14px;
    }
}

/* === Portaalblok contactpagina (2026-09-16) === */
.sub-contact .gegevens .portaalblok {
    margin-top: 16px;
    padding: 24px;
    background-color: rgba(230, 70, 131, 0.14);
    border: 1px solid rgba(230, 70, 131, 0.55);
}
.sub-contact .gegevens .portaalblok h3 {
    font-size: 24px;
    line-height: 28px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 8px;
}
.sub-contact .gegevens .portaalblok p {
    margin: 0 0 20px;
    font-size: 15px;
    line-height: 23px;
    color: #DAE1EF;
}
.sub-contact .gegevens .portaalblok a.btn {
    margin: 0;
}
@media (min-width: 1024px) {
    .sub-contact .gegevens .portaalblok {
        max-width: 654px;
    }
}