/* Algemeen */
:root {
    --donkerblauw: #0D3F94;
    --middenblauw: #61B9E8;
    --lichtblauw: #DFF1FA;
    --zwart: #222;
    --wit: #fff;
}

.row.display-flex {
    display: flex;
    flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
    display: flex;
    flex-direction: column;
}



.btn {width: 100%;}
.hide {display: none;}
.mandatory:BEFORE {content: '* ';}
select.form-control {-webkit-appearance: menulist;}
.mapson {display: none;}

.cus-content a:LINK, .cus-content a:VISITED {color: var(--zwart);}
.cus-content a:HOVER, .cus-content a:ACTIVE, .cus-content a:FOCUS {color: var(--zwart)}

body {font-family: "Barlow", Arial, sans-serif; color: var(--zwart); font-size: 17px;}
h1 {text-transform: uppercase; font-size: 25px; font-weight: 750; margin: 0 0 30px 0; font-family: "Exo 2", Arial, sans-serif; color: var(--donkerblauw);}
h2 {font-size: 24px; font-weight: 600; margin: 0 0 15px 0; color: var(--donkerblauw);}
h3 {font-size: 20px; font-weight: 600; margin: 0 0 10px 0; color: var(--zwart);}

.cus-btn-primary {background-color: var(--donkerblauw); color: var(--wit); border-radius: 25px; padding: 15px 30px; text-decoration: none; font-weight: 600; font-size: 17px; width: 100%; display: block;}
.cus-btn-primary:hover {background-color: var(--donkerblauw); color: var(--wit);}
.cus-btn-primary:active {background-color: var(--donkerblauw); color: var(--wit);}

.cus-btn-secondary {background-color: var(--middenblauw); color: var(--wit); border-radius: 25px; padding: 15px 30px; text-decoration: none; font-weight: 600; font-size: 17px; width: 100%; display: inline-block;}
.cus-btn-secondary:hover {background-color: var(--middenblauw); color: var(--wit);}
.cus-btn-secondary:active {background-color: var(--middenblauw); color: var(--wit);}

.cus-bg-white {background-color: var(--wit);}
.cus-bg-light {background-color: var(--lichtblauw);}

a.cus-underline {text-decoration: underline !important;}

.dropdown:hover .dropdown-menu {display: block;}
.cus-dropdown-lang {min-width: 60px; width: 60px;}

/*   Navbar    */
a.nav-link:link, a.nav-link:visited {color: var(--wit) !important; margin-right: 55px;}
a.nav-link:hover, a.nav-link:active, a.nav-link:focus {color: var(--wit) !important;}
a.nav-link:hover, a.nav-link:active, a.nav-link:focus {color: var(--wit) !important;}

.nav-item ul {background-color: var(--donkerblauw); border: none;}
.nav-item ul li a:link, .nav-item ul li a:visited {background-color: var(--donkerblauw); color: var(--wit);}
.nav-item ul li a:hover, .nav-item ul li a:active, .nav-item ul li a:focus {background-color: var(--middenblauw);}

.cus-navbar {background-color: var(--donkerblauw) !important; font-weight: 600; z-index: 200;}

.navbar-toggler-icon {background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");}
button.navbar-toggler {border: 1.5px solid var(--wit);}



/*  Top-Navbar  */
.list-navbar {list-style-type: none; display: flex; justify-content: flex-end;}
.list-navbar li a:link, .list-navbar li a:visited {text-decoration: none; color: var(--zwart); font-size: 15px; padding-right: 40px; font-weight: 600;}
.list-navbar li a:hover, .list-navbar li a:active, .list-navbar li a:focus {text-decoration: underline; color: var(--zwart); font-size: 15px; padding-right: 40px; font-weight: 700;}
.list-navbar li:last-child a {padding-right: 0;}

.cus-topnav-dropdown-taal button {color: var(--wit); background-color: var(--middenblauw); font-size: 12px; padding: 7px 10px; font-weight: 600; border: none;}
.cus-topnav-dropdown-taal button:hover, .cus-topnav-dropdown-taal button.dropdown-item:active, .cus-topnav-dropdown-taal button:focus {color: var(--wit); background-color: var(--middenblauw);}

.cus-topnav-dropdown-taal ul {background-color: var(--middenblauw); border: none; z-index: 2000;}
.cus-topnav-dropdown-taal ul li a:link, .cus-topnav-dropdown-taal ul li a:visited {color: var(--wit) !important;}
.cus-topnav-dropdown-taal ul li a:hover, .cus-topnav-dropdown-taal ul li a:active, .cus-topnav-dropdown-taal ul li a:focus {background-color: var(--donkerblauw); text-decoration: none;}

.cus-topnav-telefoonnr a {color: var(--donkerblauw); font-weight: bold; text-decoration: none; font-size: 25px;}
.cus-topnav-telefoonnr i {font-size: 25px; padding-right: 10px;}



/*  Header    */
.header {position: relative; height: 200px;}
.header img {width: 100%; height: auto; display: block;}
.header h2 {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    text-align: center;
    font-family: "Exo 2", Arial, sans-serif;
    font-size: 45px;
    font-weight: 800;
    color: var(--wit);
    text-transform: uppercase;
}



/*  Sub Footer  */
.cus-sub-footer {background-color: var(--middenblauw); color: var(--wit);}
.cus-sub-footer img { padding-bottom: 15px;}
.cus-sub-footer p {margin-bottom: 5px;}
.cus-sub-footer p a {text-decoration: none; color: var(--wit);}
.cus-sub-footer h3 {color: var(--wit); text-transform: uppercase; font-size: 21px; font-weight: bold; padding-left: 0px;}
.cus-sub-footer ul {list-style: none; padding: 0px;}
.cus-sub-footer ul li {padding-bottom: 5px;}
.cus-sub-footer ul li a:link, .cus-sub-footer ul li a:visited {text-decoration: none; color: var(--wit);}
.cus-sub-footer ul li a:hover, .cus-sub-footer ul li a:active, .cus-sub-footer ul li a:focus {color: var(--wit); text-decoration: underline;}

.cus-sub-footer ul li:before {
    font-family: "Font Awesome 6 Pro";
    content: "\f054";
    padding-right: 10px;
}



/*  footer  */
footer {background-color: var(--donkerblauw); color: var(--wit);}
footer ul {list-style: none; margin: 0; padding: 0;}
footer ul li {display: block; padding-right: 45px;}
footer ul li a:link, footer ul li a:visited {text-decoration: none; color: var(--wit);}
footer ul li a:hover, footer ul li a:active, .cus-sub-footer ul li a:focus {color: var(--wit); text-decoration: underline;}

.cus-footer-letzgo ul li{padding-right: 0px; font-size: 15px;}



/*  Homepage     */
.cus-hero {background: var(--lichtblauw) url("/img/homepagina-icons.png") no-repeat bottom right; padding: 20px 20px 100px 20px;}

.cus-product-cat {background-color: var(--middenblauw);}

.cus-product-cat-item {position: relative;}
.cus-product-cat-item img {width: 100%; height: auto;}
.cus-product-cat-item span {
    position: absolute;
    bottom: 15px;
    right: 15px;
    padding: 5px 25px;
    border-radius: 25px;
    background-color: var(--lichtblauw);
    color: var(--donkerblauw);
    cursor: pointer;
    border: none;
    text-transform: uppercase;
    font-weight: 800;
    font-size: 22px;
    border-bottom: 5px solid var(--donkerblauw);
}
.cus-product-cat-item span:hover {background-color: var(--lichtblauw);}

.cus-btn-primary:after {
    font-family: "Font Awesome 6 Pro";
    content: "\e4b2";
    padding-left: 10px;
}
.cus-btn-secondary:after {
    font-family: "Font Awesome 6 Pro";
    content: "\e4b2";
    padding-left: 10px;
}
.cus-product-cat-item span:after {
    font-family: "Font Awesome 6 Pro";
    content: "\e4b2";
    padding-left: 10px;
}

.cus-banner {background-color: #f1a417; color: #fff;}
.cus-banner h1, .cus-banner h2 {color: var(--wit)!important;}
.cus-banner-icon {font-size: 100px; line-height: 1;}


/*  Product overzicht */
.cus-subnav {border-radius: 15px; border-bottom: 8px solid var(--donkerblauw); border-top: 5px solid var(--middenblauw); padding: 15px;}
.cus-subnav h2 {color: var(--zwart); padding: 0 0 8px 0; margin: 15px 0 0 0; font-size: 24px;}
.cus-subnav ul {list-style: none; padding: 0; margin: 0px; font-size: 18px;}
.cus-subnav ul li {padding-bottom: 8px;}
.cus-subnav ul li a:LINK, .cus-subnav ul li a:VISITED {text-decoration: none; color: var(--donkerblauw); font-weight: 500;}
.cus-subnav ul li a:HOVER, .cus-subnav ul li a:ACTIVE, .cus-subnav ul li a:FOCUS, .cus-subnav ul li.active a {font-weight: 800;}

.cus-subnav-inner ul {border-bottom: 0.3px solid #eee; padding-bottom: 10px;}
.cus-subnav-inner ul:last-child {border-bottom: 0; padding-bottom: 0;}

.cus-product-overzicht {padding: 25px 15px;}
.cus-product-item {border: 0.5px solid #eee; margin-bottom: 25px;}
.cus-product-item-desc {padding: 10px; min-height: 100px;}
.cus-product-item-desc a{color: var(--donkerblauw); text-decoration: none; font-weight: 600; font-size: 20px;}



/*  Product details */
.cus-product-detail {padding: 15px 20px;}
.cus-product-detail h1 {font-size: 30px;}
.cus-product-detail h2 {font-size: 30px; font-weight: 600;}
.cus-product-detail h3 {font-size: 24px; font-weight: 500; color: var(--donkerblauw);}

.cus-product-link i {color: var(--donkerblauw);}
.cus-product-link a {color: var(--donkerblauw); text-decoration: underline;  margin-left: 5px;  font-weight: 600;}

.cus-product-link-file i {color: var(--donkerblauw);}
.cus-product-link-file a {color: var(--donkerblauw); text-decoration: underline; margin-left: 12px; font-weight: 600;}

.cus-product-detail-form label {font-weight: bold;}
.cus-product-detail-form input {height: 50px; border-radius: 20px;}
.cus-product-detail-form textarea {border-radius: 20px;}
.cus-product-detail-form button {border: none;}



/*  Over ons    */
.cus-cijfers-info p {font-size: 19px; font-weight: 500;}

.cus-cijfers-desc {
    color: var(--wit);
    font-family: "Exo 2", Arial, sans-serif;
    text-transform: uppercase;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    font-weight: 800;
}
.cus-cijfers-desc span {color: var(--wit); font-family: "Exo 2", Arial, sans-serif; font-weight: 700; display: block;}
.cus-cijfers-waarde {font-size: 42px;}
.cus-cijfers-eenheid {font-size: 25px; text-transform: uppercase;}

.cus-historiek h2 {color: var(--zwart); font-family: "Exo 2", Arial, sans-serif; font-size: 35px; margin: 0px; margin-top: 20px; margin-bottom: 20px;}



/*  Certificaten    */
.cus-certificaat {border-radius: 15px; border-bottom: 8px solid var(--donkerblauw); border-top: 5px solid var(--middenblauw); padding: 15px; margin-bottom: 80px;}
.cus-certificaat-img {margin-bottom: 25px;}
.cus-certificaat-img i {font-size: 60px; color: var(--middenblauw); border: 5px solid var(--middenblauw); border-radius: 90px; padding: 20px 15px 15px 15px; width:110px; height: 110px;}
.cus-certificaat-item h2 {margin: 0 0 10px 0; text-align: center; font-weight: 700;}
.cus-certificaat-item ul {margin: 0px; padding: 0px;}
.cus-certificaat-item ul li {list-style: none; padding-bottom: 5px; font-weight: 500;}
.cus-certificaat-item ul li:before {
    font-family: "Font Awesome 6 Pro";
    content: "\f00c";
    padding-right: 10px;
    text-decoration: none;
}



/*  Jobs overzicht   */
.cus-job-item {border: 0.5px solid #eee; text-align: center; margin-bottom: 80px;}
.cus-job-item a {text-decoration: none}
.cus-job-img {padding: 30px;}
.cus-job-img i {font-size: 150px; color: var(--middenblauw);}
.cus-job-desc {color: var(--donkerblauw); min-height: 130px; padding: 20px; font-weight: 500; font-size: 20px;}



/*  Jobs detail     */
.cus-job-detail h1 {font-size: 30px;}

.cus-cta h2 {font-size: 35px;}
.cus-cta a {color: var(--donkerblauw);}
.cus-cta {font-size: 17px; font-weight: 500;}



/*  Contact     */
.cus-contact-geg {color: var(--wit); background-color: var(--middenblauw); padding: 25px; font-size: 20px;}
.cus-contact-geg a {color: var(--wit);}
.cus-contact-geg i {font-size: 35px; padding: 0 0 15px 5px;}
.cus-contact-geg h3 {text-align: center; padding-bottom: 10px; font-size: 25px; font-weight: 600; color: var(--wit);}

.cus-contact-sites {background-color: var(--donkerblauw); color: var(--wit); padding: 20px;}
.cus-contact-sites i {color: var(--middenblauw); font-size: 70px; margin-top: 10px;}
.cus-contact-sites-overzicht h2 {font-size: 40px; font-weight: 500;}
.cus-contact-sites h3 {text-align: center; color: var(--wit);}
.cus-contact-sites span {display: block; text-align: center; border-bottom: 0.5px solid #869FCA; padding-bottom: 10px;}
.cus-contact-sites a {color: var(--wit);}

.cus-contact-form label {font-weight: bold;}
.cus-contact-form input {height: 60px; border-radius: 20px;}
.cus-contact-form select {border-radius: 20px; height: 60px;}
.cus-contact-form textarea {border-radius: 20px;}
.cus-contact-form button {border: none;}

.cus-verantw-item {background-color: var(--donkerblauw); color: var(--wit); border-radius: 15px; padding: 15px 20px;}
.cus-verantw-img {border-radius: 250px; margin-top: 8px;}
.cus-verantw-titel h3 {color: var(--middenblauw); font-size: 21px; margin: 0px;}
.cus-verantw-naam {text-transform: uppercase; font-weight: 600; font-size: 21px;}
.cus-verantw-functie {font-style: italic;}
.cus-verantw-telefoon a:link, .cus-verantw-telefoon a:visited {font-size: 20px; color: var(--wit); text-decoration: none; padding-left: 10px;}
.cus-verantw-telefoon a:hover, .cus-verantw-telefoon a:active, .cus-verantw-telefoon a:focus {font-size: 20px; color: var(--wit); text-decoration: underline;}
.cus-verantw-telefoon i {font-size: 20px;}
.cus-verantw-email a:link, .cus-verantw-email a:visited {font-size: 17px; color: var(--wit); padding-left: 10px;}
.cus-verantw-email a:link, .cus-verantw-email a:visited {font-size: 15px; color: var(--wit); text-decoration: none; padding-left: 10px;}
.cus-verantw-email i {font-size: 20px;}







/* MEDIA QUERIES */
@media (min-width: 768px) {
    h1 {font-size: 58px; font-weight: 800; padding-right: 0px;}

    .cus-topnav-telefoonnr i {font-size: 20px;}

    .cus-sub-footer ul {list-style: none;}
    .cus-sub-footer ul {list-style: none;}

    .cus-job-detail h1 {font-size: 35px;}
    .cus-cta {font-size: 25px; font-weight: 500;}

    .cus-btn-primary {background-color: var(--donkerblauw); color: var(--wit); border-radius: 25px; padding: 10px 30px; text-decoration: none; font-weight: 600; font-size: 17px; width: auto; display: inline-block;}
    .cus-btn-primary:hover {background-color: var(--donkerblauw); color: var(--wit);}
    .cus-btn-primary:active {background-color: var(--donkerblauw); color: var(--wit);}

    .cus-btn-secondary {background-color: var(--middenblauw); color: var(--wit); border-radius: 25px; padding: 10px 30px; text-decoration: none; font-weight: 600; font-size: 17px; width: auto; display: inline-block;}
    .cus-btn-secondary:hover {background-color: var(--middenblauw); color: var(--wit);}
    .cus-btn-secondary:active {background-color: var(--middenblauw); color: var(--wit);}

    .cus-hero {}
}



@media (min-width: 992px) {
    .cus-product-detail h1 {font-size: 58px;}

    footer ul li {display: inline-block; padding-right: 45px;}
}

@media (min-width: 768px) and (max-width: 991px) {

}

@media (min-width: 992px) and (max-width: 1199px) {

}



.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 43px;
    height: 0;
    margin-bottom: 15px;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.row.display-flex {
    display: flex;
    flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
    display: flex;
    flex-direction: column;
}

.owl-prev, .owl-next {background: none; border: 0; font-size: 20px;}
.owl-prev.disabled, .owl-next.disabled {opacity: 0.2;}