/*
 * ========================================
 * PAGE TRANSITION STATES
 * ========================================
 */
html.max-mode body,
html.min-mode body {
    background-color: var(--blue)!important;
}
html.start-load-transition main,
html.start-exit-transition main {
    transform: translateX(-101vw)!important;
}
html.start-load-transition header.secondary-header,
html.start-exit-transition header.secondary-header {
    transform: translate(-101vw, -102vh)!important;
}
html.start-load-transition #overlay,
html.start-exit-transition #overlay {
    left: -103vw!important;
}

/*
 * ========================================
 * SECONDARY HEADER - BASE STYLES
 * ========================================
 */
header.secondary-header {	
    position: fixed;
    height: 100vh;
    width: auto;
    transform: translateY(-102vh);
    top: 0;
    left: 0;
    z-index: 9999;
}
@media (min-width:1601px) {
    header.secondary-header {
        left: calc((100vw - 1600px) / 2);
    }
}
header.secondary-header #back,
header.secondary-header .header-bottom-wrapper {
    transform: translateY(102vh);
}
header.secondary-header #back {
    margin-top: clamp(81px, 7.92vw, 127px) /*114px @ 1440*/;
    margin-left: clamp(17px, 1.67vw, 27px) /*24px @ 1440*/;
}
header.secondary-header .header-bottom-wrapper {
    margin-left: clamp(93px, 9.1vw, 146px) /*131px @ 1440*/;
    margin-bottom: clamp(37px, 3.61vw, 58px) /*52px @ 1440*/;
}

/*
 * ========================================
 * SECONDARY HEADER - RESPONSIVE
 * ========================================
 */
/* Tablet: 768px - 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
    header.secondary-header #back {
        margin-top: clamp(32px, calc(19.22vw - 115.58px), 81px) /*32px @ 768 : 81px @ 1023*/!important;
    }
    header.secondary-header .header-bottom-wrapper {
        margin-left: clamp(32px, calc(23.92vw - 151.72px), 93px) /*32px @ 768 : 93px @ 1023*/!important;
    }
    .brro-flex-page .content-wrapper {
        width: calc(100vw - (clamp(244px, 31.77vw, 325px)));/*244px @ 768*/
        margin-right: clamp(32px, calc(1.23vw + 27.58px), 37px) /*32px @ 360 : 37px @ 767*/!important;
    }
}
/* Mobile: max-width 767px */
@media (max-width: 767px) {
    header {
        width: 100%!important;
    }
    header.secondary-header .secondary-nav ul {
        flex-flow: row wrap;
    }
    header.secondary-header nav li {
        font-size: 20px!important;
        line-height: 20px!important;
        letter-spacing: 0!important;    
    }
    .secondary-nav li:not(:last-of-type) {
        margin-bottom: 0!important;
        margin-right: 12px!important;
    }
    header.secondary-header .header-bottom-wrapper {
        margin-left: 0px!important;
        margin-bottom: 0px!important;
        margin-top: 18px!important;
        margin-right: 20px!important;
    }
    header.secondary-header #back {
        margin-top: 14px!important;
    }
}

/*
 * ========================================
 * PAGE LAYOUT
 * ========================================
 */
.brro-flex-page {
    padding-top: clamp(58px, 5.69vw, 91px) /*82px @ 1440*/;
    padding-bottom: clamp(40px, 3.89vw, 62px) /*56px @ 1440*/;
}
.brro-flex-page .content-wrapper {
    max-width: clamp(697px, 68.06vw, 1089px) /*980px @ 1440*/;
    margin-right: clamp(33px, 3.26vw, 52px) /*47px @ 1440*/;
    margin-left: auto;
}

/*
 * ========================================
 * OVER-ONS SECTION
 * ========================================
 */
 #over-ons-section .inner-flex-wrapper {
    padding-bottom: clamp(63px, 6.11vw, 98px) /*88px @ 1440*/;
}
#over-ons-section img {
    width: clamp(622px, 60.76vw, 972px) /*875px @ 1440*/;
    height: clamp(392px, 38.26vw, 612px) /*551px @ 1440*/;
    object-fit: cover;
    object-position: left;
    margin-top: clamp(53px, 5.14vw, 82px) /*74px @ 1440*/;
}
#over-ons-section .aboutus-wysiwyg {
    max-width: clamp(520px, 50.83vw, 813px) /*732px @ 1440*/;
    width: 100%;
    padding-top: clamp(86px, 8.4vw, 134px) /*121px @ 1440*/;
    margin-right: clamp(102px, 9.93vw, 159px) /*143px @ 1440*/;
}
@media (max-width: 767px) {
    #over-ons-section img {
        object-position: 20%!important;
    }
    #over-ons-section .aboutus-wysiwyg {
        padding-top: clamp(56px, calc(11.76vw - 34.35px), 86px) /*56px @ 768 : 86px @ 1023*/!important;
        margin-right: 0!important;
    }
}

/*
 * ========================================
 * KLANTEN SECTION
 * ========================================
 */
#klanten .inner-flex-wrapper {
    padding-top: clamp(63px, 6.11vw, 98px) /*88px @ 1440*/;
    padding-bottom: clamp(63px, 6.11vw, 98px) /*88px @ 1440*/;
}
#klanten .clients-gallery {
    margin-top: clamp(51px, 5vw, 80px) /*72px @ 1440*/;
    margin-left: clamp(41px, 4.03vw, 64px) /*58px @ 1440*/;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
@media (max-width: 767px) {
    #klanten .clients-gallery {
        grid-template-columns: repeat(2, 1fr);
        margin-top: clamp(40px, calc(4.31vw + 6.87px), 51px) /*40px @ 768 : 51px @ 1023*/!important;
        margin-left: 0px!important;
    }
}

/*
 * ========================================
 * CONTACT SECTION
 * ========================================
 */
 #contact .inner-flex-wrapper {
    padding-top: clamp(63px, 6.11vw, 98px) /*88px @ 1440*/;
}
#contact .contact-details {
    width: clamp(586px, 57.22vw, 916px) /*824px @ 1440*/;
    margin-top: clamp(53px, 5.14vw, 82px) /*74px @ 1440*/;
    margin-left: clamp(74px, 7.22vw, 116px) /*104px @ 1440*/;
}
#contact .contact_address {
    margin-top: clamp(51px, 5vw, 80px) /*72px @ 1440*/;
}
@media (max-width: 767px) {
    #contact .contact-details {
        width: 100%!important;
        margin-top: clamp(40px, calc(4.31vw + 6.87px), 51px) /*40px @ 768 : 51px @ 1023*/!important;
        margin-left: 0px!important;
    }
    #contact .contact_address {
        margin-top: clamp(40px, calc(4.31vw + 6.87px), 51px) /*40px @ 768 : 51px @ 1023*/!important;
    }
}