/*
 * Injura Assist – huisstijl en layout.
 * Nagebouwd op basis van gemeten waarden van de WordPress/BeTheme-site (oktober 2026);
 * er is geen thema- of plugin-CSS hergebruikt.
 *
 * Breakpoints (gelijk aan het origineel): 1240 / 960 / 768 / 480 px.
 */

/* ---------- Lettertype (Overpass, SIL Open Font License) ---------- */
@font-face {
    font-family: 'Overpass';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url(/assets/fonts/overpass-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Overpass';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url(/assets/fonts/overpass-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Basis ---------- */
:root {
    --green: #62b22f;
    --green-hover: #528433;
    --green-slide: #55a522;
    --text: #808080;
    --heading: #000;
    --font: 'Overpass', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 15px;
    line-height: 27px;
    font-weight: 400;
    color: var(--text);
    background: #fff;
    overflow-wrap: break-word;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 { margin: 0 0 15px; color: var(--heading); font-weight: 600; letter-spacing: 0; }
h1 { font-size: 60px; line-height: 60px; }
h2 { font-size: 50px; line-height: 50px; }
h3 { font-size: 35px; line-height: 45px; }
h4 { font-size: 24px; line-height: 34px; }
h5 { font-size: 17px; line-height: 27px; font-weight: 300; }
h6 { font-size: 12px; line-height: 24px; letter-spacing: 3px; color: #7f7f7f; }
h1 a, h2 a, h3 a, h4 a, h5 a, h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover { color: var(--heading); }

p { margin: 0 0 15px; }

a { color: var(--green); text-decoration: none; }
a:hover { color: var(--green-hover); }

img { max-width: 100%; height: auto; border: 0; }
picture { display: contents; }

hr.no-line { height: 1px; margin: 0 auto 10px; border: 0; background: none; }
hr.no-line--5 { margin-bottom: 5px; }

.icon { display: inline-block; width: 1em; height: 1em; vertical-align: middle; flex: none; }

.text-muted { color: #808080; }
.text-light { color: #b3b3b3; }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100001; padding: 10px 15px; background: #fff; color: #000; }
.skip-link:focus { left: 10px; top: 10px; }

:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

@media (min-width: 768px) and (max-width: 959px) {
    body { font-size: 13px; line-height: 23px; }
    h1 { font-size: 51px; line-height: 51px; }
    h2 { font-size: 43px; line-height: 43px; }
    h3 { font-size: 30px; line-height: 38px; }
    h4 { font-size: 20px; line-height: 29px; }
    h5 { font-size: 14px; line-height: 23px; }
    h6 { font-size: 13px; line-height: 20px; }
}
@media (min-width: 480px) and (max-width: 767px) {
    body { font-size: 13px; line-height: 20px; }
    h1 { font-size: 45px; line-height: 45px; }
    h2 { font-size: 38px; line-height: 38px; }
    h3 { font-size: 26px; line-height: 34px; }
    h4 { font-size: 18px; line-height: 26px; }
    h5 { font-size: 13px; line-height: 20px; }
    h6 { font-size: 13px; line-height: 19px; letter-spacing: 2px; }
}
@media (max-width: 479px) {
    body { font-size: 13px; line-height: 19px; }
    h1 { font-size: 36px; line-height: 36px; }
    h2 { font-size: 30px; line-height: 30px; }
    h3 { font-size: 21px; line-height: 27px; }
    h4 { font-size: 14px; line-height: 20px; }
    h5 { font-size: 13px; line-height: 19px; }
    h6 { font-size: 13px; line-height: 19px; letter-spacing: 2px; }
}

/* ---------- Raster ---------- */
.container { max-width: 1080px; margin: 0 auto; }
@media (min-width: 960px) and (max-width: 1239px) { .container { max-width: 940px; } }
@media (min-width: 768px) and (max-width: 959px) { .container { max-width: 708px; } }
@media (max-width: 767px) { .container { max-width: 700px; padding: 0 33px; } }

.section { position: relative; }
.section__inner { display: flex; flex-wrap: wrap; align-items: flex-start; }

/* flow-root: marges van de laatste alinea vallen niet samen met de kolommarge (zoals de clearfix van het origineel). */
.col { display: flow-root; width: calc(100% - 24px); margin: 0 12px 40px; }
.col--quarter { width: calc(25% - 24px); }
.col--half { width: calc(50% - 24px); }
.col--mb50 { margin-bottom: 50px; }

.deco-mark { display: block; }

@media (max-width: 767px) {
    .col, .col--quarter, .col--half { width: 100%; margin: 0 0 20px; }
    .col--mb50 { margin-bottom: 50px; }
}

/* ---------- Knoppen ---------- */
.btn {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    min-height: 51px;
    padding: 16px 20px;
    border-radius: 5px;
    font-size: 15px;
    line-height: 18px;
    white-space: nowrap;
    color: #fff;
    background: var(--green);
    transition: color .2s ease-in-out, background-color .2s ease-in-out;
}
.btn::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    z-index: -1;
    background: var(--green-slide);
    transition: all .2s ease-in-out;
}
.btn:hover { color: #fff; }
.btn:hover::before { width: 100%; }
.btn__icon { width: 11px; height: 11px; margin-left: 14px; position: relative; top: -1px; }

/* ---------- Header / topbalk ---------- */
.header { position: relative; background: #fff; }

.topbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 30;
    display: flex;
    height: 111px;
    border-bottom: 1px solid transparent;
}
.topbar__left { position: relative; display: flex; flex: 1; min-width: 0; }
.topbar__logo { display: block; flex: none; height: 110px; margin: 0 30px 0 20px; padding: 25px 0; line-height: 60px; }
.topbar__logo img { display: inline-block; width: 220px; height: 60px; vertical-align: middle; }
.topbar__right { display: flex; align-items: center; flex: none; padding: 0 20px; }
.topbar__right .btn { margin-left: 5px; }

.main-nav { margin-left: auto; }
.menu { margin: 0; padding: 0; list-style: none; }

.menu--desktop { display: flex; }
.menu--desktop > li { position: relative; }
.menu--desktop > li > a { position: relative; display: block; padding: 25px 0; line-height: 60px; color: #000; }
.menu--desktop > li > a > span { padding: 0 20px; white-space: nowrap; }
.menu--desktop > li > a::after {
    content: "";
    position: absolute;
    left: 10%;
    top: 50%;
    width: 80%;
    height: 1px;
    margin-top: 20px;
    background: var(--green);
    opacity: 0;
}
.menu--desktop > li.is-current > a,
.menu--desktop > li:hover > a,
.menu--desktop > li:focus-within > a { color: var(--green); }
.menu--desktop > li.is-current > a::after,
.menu--desktop > li:hover > a::after,
.menu--desktop > li:focus-within > a::after { opacity: 1; }

.menu--desktop .submenu {
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 205;
    display: none;
    margin: 0;
    padding: 0;
    list-style: none;
    background: #f2f2f2 linear-gradient(rgba(0, 0, 0, .04), rgba(0, 0, 0, 0) 4px);
}
.menu--desktop > li:hover > .submenu,
.menu--desktop > li:focus-within > .submenu { display: block; animation: fade-in .1s linear; }
.menu--desktop .submenu li { width: 200px; }
.menu--desktop .submenu a {
    display: block;
    padding: 10px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, .05);
    color: #5f5f5f;
    transition: all .2s ease-in-out;
}
.menu--desktop .submenu a:hover,
.menu--desktop .submenu a:focus-visible { color: #2e2e2e; background: rgba(0, 0, 0, .06); }

.menu-toggle {
    display: none;
    position: absolute;
    right: 15px;
    top: 55px;
    width: 34px;
    height: 34px;
    margin-top: -17px;
    padding: 0;
    border: 0;
    border-radius: 3px;
    background: none;
    color: var(--green);
    cursor: pointer;
}
.menu-toggle__icon { width: 22px; height: 22px; }

.topbar-placeholder { display: none; }

/* Vaste topbalk na scrollen */
.topbar.is-sticky {
    position: fixed;
    height: 60px;
    border-bottom: 0;
    z-index: 701;
    background: #fff;
    opacity: .97;
    animation: sticky-in .3s ease-in-out;
}
.topbar.is-sticky .topbar__logo { height: 60px; padding: 5px 0; line-height: 50px; }
.topbar.is-sticky .topbar__logo img { width: auto; height: auto; max-height: 35px; }
.topbar.is-sticky .menu--desktop > li > a { padding: 15px 0; line-height: 30px; }
.topbar.is-sticky .menu--desktop > li > a::after { top: auto; bottom: -4px; left: 0; width: 100%; height: 4px; margin-top: 0; }
.topbar.is-sticky .menu-toggle { top: 30px; }

@keyframes sticky-in { from { transform: translateY(-60px); } to { transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 1239px) {
    .main-nav { display: none; }
    .menu-toggle { display: block; }
}

@media (max-width: 767px) {
    .topbar { position: relative; height: 61px; }
    .topbar__logo { height: 50px; margin: 5px 0 5px 15px; padding: 0; line-height: 50px; }
    .topbar__logo img { width: auto; height: 50px; }
    .topbar__right { display: none; }
    .menu-toggle { right: 10px; top: 30px; }
    .topbar-placeholder { display: block; }
    .topbar.is-sticky .topbar__logo { height: 50px; margin: 5px 0 5px 15px; padding: 0; }
    .topbar.is-sticky .topbar__logo img { max-height: 50px; }
}

/* ---------- Mobiel zijmenu ---------- */
.site { position: relative; left: 0; transition: left .3s ease-in-out; }
.side-open .site { left: -125px; }

.side-overlay {
    position: fixed;
    inset: 0;
    z-index: 9002;
    background: rgba(0, 0, 0, .6);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, visibility .3s;
}
.side-open .side-overlay { opacity: 1; visibility: visible; }

.side-slide {
    position: fixed;
    top: 0;
    bottom: 0;
    right: -250px;
    z-index: 100000;
    width: 250px;
    max-width: 100%;
    overflow: auto;
    color: #000;
    background: #f7f7f7;
    visibility: hidden;
    transition: right .3s ease-in-out, visibility .3s;
}
.side-open .side-slide { right: 0; visibility: visible; }

.side-slide__close-wrap { height: 60px; }
.side-slide__close {
    float: right;
    width: 34px;
    height: 34px;
    margin: 13px 13px 0 0;
    padding: 0;
    border: 0;
    background: none;
    color: #000;
    cursor: pointer;
}
.side-slide__close .icon { width: 22px; height: 22px; }
.side-slide__close:hover { color: var(--green); }
.side-slide__extras { padding: 0 20px 20px; }
.side-slide__extras .btn { display: flex; justify-content: center; margin-bottom: 20px; }

.side-nav { margin-bottom: 20px; }
.menu--side li { position: relative; border-top: 1px solid rgba(0, 0, 0, .03); }
.menu--side > li:last-child { border-bottom: 1px solid rgba(0, 0, 0, .03); }
.menu--side a { display: block; margin-right: 50px; padding: 11px 5px 10px 20px; line-height: 19px; color: #000; }
.menu--side a:hover, .menu--side .is-current > a { color: var(--green); }
.menu--side .submenu { display: none; margin: 0; padding: 0; list-style: none; background: rgba(255, 255, 255, .025); }
.menu--side .submenu a { padding-left: 35px; }
.menu--side .is-open > .submenu { display: block; animation: fade-in .1s linear; }
.submenu-toggle {
    position: absolute;
    right: 5px;
    top: 0;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    background: none;
    color: #000;
    font: 100 22px/40px var(--font);
    opacity: .5;
    cursor: pointer;
}
.submenu-toggle::after { content: "+"; }
.is-open > .submenu-toggle { opacity: 1; color: var(--green); }
.is-open > .submenu-toggle::after { content: "-"; }

.side-slide__social { margin: 0 20px 13px; padding: 0; list-style: none; text-align: center; }
.side-slide__social li { display: inline-block; margin: 1px; }
.side-slide__social a { display: inline-block; padding: 4px; color: #000; line-height: 19px; }
.side-slide__social a:hover { color: var(--green); }

/* ---------- Sociale iconen ---------- */
.social .icon { width: 15px; height: 15px; vertical-align: -2px; }
.social .icon--x-twitter { width: 15px; height: 15px; }
.social .icon--play { width: 14px; height: 14px; }

/* ---------- Hero (voorheen Slider Revolution) ----------
 * Raster van 1920×900 (desktop) en 778×1100 (onder 778px), geschaald met de containerbreedte.
 * --u is één rasterpixel; laagposities zijn gemeten vanaf het midden van het raster. */
.hero { position: relative; overflow: hidden; container-type: inline-size; }
.hero__stage { --u: min(1px, 100cqw / 1920); --fy: 50; position: relative; height: calc(var(--u) * 900); }

.hero__l {
    position: absolute;
    margin: 0;
    animation: hero-up 1000ms cubic-bezier(.77, 0, .175, 1) both;
    animation-delay: var(--st, 0ms);
}
.hero__l > img, .hero__l > picture > img { display: block; width: 100%; height: 100%; }

.hero__title {
    --st: 100ms;
    z-index: 8;
    left: calc(50% + var(--u) * -750);
    top: calc(var(--u) * 219);
    width: calc(var(--u) * 600);
    color: #000;
    font-weight: 600;
    font-size: calc(var(--u) * 60);
    line-height: calc(var(--u) * 66);
    font-size: round(calc(var(--u) * 60), 1px);
    line-height: round(calc(var(--u) * 66), 1px);
}
.hero__text {
    --st: 150ms;
    z-index: 9;
    left: calc(50% + var(--u) * -749);
    top: calc(var(--u) * 404);
    width: calc(var(--u) * 600);
    color: #4d4d4d;
    font-size: round(calc(var(--u) * 20), 1px);
    line-height: round(calc(var(--u) * 28), 1px);
}
.hero__btn {
    --st: 200ms;
    display: flex;
    align-items: center;
    top: calc(var(--u) * 545);
    padding: 0 calc(var(--u) * 30);
    translate: -50% 0;
    font-weight: 600;
    font-size: round(calc(var(--u) * 17), 1px);
    line-height: round(calc(var(--u) * 55), 1px);
    white-space: nowrap;
    transition: background-color .2s cubic-bezier(.455, .03, .515, .955), color .2s cubic-bezier(.455, .03, .515, .955);
}
.hero__btn--primary { z-index: 10; left: calc(50% + var(--u) * -655); color: #fff; background: #125600; }
.hero__btn--primary:hover { color: #fff; background: #03b3dd; }
.hero__btn--secondary { z-index: 11; left: calc(50% + var(--u) * -480); color: #000; background: #efefef; }
.hero__btn--secondary:hover { color: #000; background: #e2e2e2; }
.hero__btn-icon { width: calc(var(--u) * 24); height: calc(var(--u) * 24); margin: 0 calc(var(--u) * -3) 0 calc(var(--u) * 1); }
.hero__line {
    --st: 250ms;
    z-index: 12;
    left: calc(50% + var(--u) * -750);
    top: calc(var(--u) * 660);
    width: calc(var(--u) * 550);
    height: calc(var(--u) * 1);
    background: #e2e2e2;
}
.hero__ask {
    --st: 300ms;
    z-index: 13;
    left: calc(50% + var(--u) * -751);
    top: calc(var(--u) * 712);
    width: calc(var(--u) * 400);
    color: #4d4d4d;
    font-size: round(calc(var(--u) * 18), 1px);
    line-height: round(calc(var(--u) * 24), 1px);
}
.hero__phone {
    --st: 350ms;
    z-index: 14;
    left: calc(50% + var(--u) * -614);
    top: calc(var(--u) * 784);
    translate: -50% 0;
    color: #045aa5;
    font-weight: 600;
    font-size: round(calc(var(--u) * 30), 1px);
    line-height: round(calc(var(--u) * 40), 1px);
    white-space: nowrap;
}
.hero__phone:hover { color: #045aa5; }
.hero__image {
    --st: 150ms;
    z-index: 15;
    left: 50%;
    top: calc(var(--u) * 133);
    width: calc(var(--u) * 810);
    height: calc(var(--u) * 766);
    animation-name: hero-zoom;
    animation-duration: 1200ms;
}
.hero__phone-icon {
    --st: 600ms;
    z-index: 16;
    left: calc(50% + var(--u) * -292);
    top: calc(var(--u) * 774);
    width: calc(var(--u) * 48);
    height: calc(var(--u) * 48);
    animation-name: hero-flip;
    animation-duration: 700ms;
    animation-timing-function: cubic-bezier(.175, .885, .32, 1.275);
}
.hero__phone-pulse {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    color: #fff;
    background: #020000;
    animation: hero-pulse 1000ms ease-in-out 1300ms infinite alternate;
}
.hero__phone-pulse .icon { width: calc(var(--u) * 17); height: calc(var(--u) * 17); }
.hero__avatar {
    --st: 650ms;
    z-index: 17;
    left: calc(50% + var(--u) * -249);
    top: calc(var(--u) * 773);
    width: calc(var(--u) * 48);
    height: calc(var(--u) * 48);
    animation-name: hero-flip;
    animation-duration: 700ms;
    animation-timing-function: cubic-bezier(.175, .885, .32, 1.275);
}
.hero__deco {
    --st: 400ms;
    z-index: 18;
    left: calc(50% + var(--u) * -867.5);
    top: calc(var(--u) * 200);
    width: calc(var(--u) * 61);
    height: calc(var(--u) * 107);
    animation-name: hero-flip;
    animation-duration: 950ms;
    animation-timing-function: cubic-bezier(.175, .885, .32, 1.275);
}
.hero__down {
    --st: 400ms;
    z-index: 19;
    left: calc(50% + var(--u) * -867.5);
    top: calc(var(--u) * 674);
    width: calc(var(--u) * 61);
    height: calc(var(--u) * 92);
    animation-name: hero-fade;
    animation-duration: 950ms;
}

@keyframes hero-up { from { opacity: 0; transform: translateY(calc(var(--u) * var(--fy))); } }
@keyframes hero-zoom { from { opacity: 0; transform: scale(.9); } }
@keyframes hero-flip { from { opacity: 0; transform: perspective(600px) rotateY(360deg); } }
@keyframes hero-fade { from { opacity: 0; } }
@keyframes hero-pulse { to { transform: scale(1.1); } }

/* Onder 778px: mobiel raster; alleen titel, knoppen en afbeelding (zoals het origineel). */
@media (max-width: 777px) {
    .hero__stage { --u: min(1px, 100cqw / 778); --fy: 19; height: calc(var(--u) * 1100); }
    .hero__title { left: calc(50% + var(--u) * -325); top: calc(var(--u) * 88); width: calc(var(--u) * 650); }
    .hero__btn { top: calc(var(--u) * 330); }
    .hero__btn--primary { left: calc(50% + var(--u) * -221); }
    .hero__btn--secondary { left: calc(50% + var(--u) * -50); }
    .hero__image { left: calc(50% + var(--u) * -325); top: calc(var(--u) * 485); width: calc(var(--u) * 650); height: calc(var(--u) * 615); }
    .hero__text, .hero__line, .hero__ask, .hero__phone, .hero__phone-icon, .hero__avatar, .hero__deco, .hero__down { display: none; }
}

/* ---------- Afbeelding met hover (dienstkaarten) ---------- */
.image-frame { position: relative; display: inline-block; max-width: 100%; overflow: hidden; line-height: 0; vertical-align: top; }
.image-frame__link { position: relative; display: block; }
.image-frame__mask { position: absolute; inset: 0; z-index: 2; }
.image-frame__mask::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    background: rgba(0, 0, 0, .15);
    opacity: 0;
    transition: opacity .3s ease-in-out;
}
.image-frame:hover .image-frame__mask::after { opacity: 1; }
.image-frame__links {
    position: absolute;
    left: 0;
    bottom: -60px;
    z-index: 4;
    display: flex;
    width: 100%;
    height: 60px;
    overflow: hidden;
    transition: all .3s ease-in-out;
}
.image-frame:hover .image-frame__links { bottom: 0; }
.image-frame__links a {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    color: #161922;
    background: #fff;
    transition: all .1s ease-in-out;
}
.image-frame__links a:hover { color: #0089f7; }
.image-frame__links .icon { width: 32px; height: 32px; }

/* ---------- Homepage: Onze Diensten ---------- */
.section--services { padding: 40px 0 90px; background: url(/media/2020/05/finance2-sectionbg3.png) no-repeat 0 0; }

.cards { display: flex; flex-wrap: wrap; align-items: flex-start; width: 100%; }
.card { width: 25%; padding: 0 2%; }

@media (max-width: 767px) {
    .card { width: 100%; }
}

/* ---------- Homepage: teller ---------- */
.section--counter { padding: 0 0 60px; background: url(/media/2020/05/finance2-wrapbg1.png) no-repeat 0 0; }
.wrap-three-fourth { display: flex; flex-wrap: wrap; width: 75%; padding: 40px 0 4px; }
.wrap-three-fourth .col { margin-bottom: 30px; }
.counter-title { padding: 10px 9% 21px 0; }
.counter { margin-bottom: 15px; color: #ff7e00; font: 600 110px/110px var(--font); }

@media (max-width: 767px) {
    .wrap-three-fourth { width: 100%; }
}

/* ---------- Contactblok ---------- */
.section--contact { padding: 110px 0 70px; }
.opening-hours ul { margin: 0; padding: 0; list-style: none; }
.opening-hours li { text-align: left; }
.opening-hours__days { display: inline-block; margin-bottom: 8px; padding: 10px 0; border-bottom: 1px solid var(--green); font-size: 15px; line-height: 18px; }
.opening-hours__time { display: block; padding: 10px 0; color: var(--green); font-size: 32px; line-height: 32px; }
.icon--circled { width: 14px; height: 14px; vertical-align: -2px; color: #0095eb; }
.col--map { line-height: 0; text-align: center; }
.col--map iframe { width: 100%; height: 330px; border: 0; }

/* ---------- Hulpklassen ---------- */
.text-right { text-align: right; }
.col--mb40 { margin-bottom: 40px; }
.col--two-third { width: calc(66.666% - 24px); }
.col--one-third { width: calc(33.333% - 24px); }
hr.no-line--15 { margin-bottom: 15px; }
hr.no-line--20 { margin-bottom: 20px; }
hr.no-line--30 { margin-bottom: 30px; }
hr.no-line--40 { margin-bottom: 40px; }
hr.no-line--55 { margin-bottom: 55px; }

@media (max-width: 767px) {
    .col--two-third, .col--one-third { width: 100%; margin: 0 0 20px; }
    .col--mb40 { margin-bottom: 40px; }
    .text-left-mobile { text-align: left; }
}

/* ---------- Sectie afbeelding + tekst (dienstpagina's, no cure no pay) ---------- */
.section--text-image {
    padding: 30px 0 60px;
    background: url(/media/2020/05/finance2-sectionbg2.jpg) no-repeat 50% 0;
    background-image: image-set(url(/media/2020/05/finance2-sectionbg2.webp) type('image/webp'), url(/media/2020/05/finance2-sectionbg2.jpg) type('image/jpeg'));
}
.section__inner--stretch { align-items: stretch; }
.wrap-half { display: flex; flex-direction: column; width: 50%; padding: 0 2%; }
.wrap-half--middle { justify-content: center; }
.col--image { line-height: 0; }
.col--deco { display: flow-root; margin-bottom: 0; }
.deco-right { float: right; margin: 15px 0 30px; }

@media (max-width: 767px) {
    .wrap-half { width: 100%; }
    .deco-right { margin-top: 0; }
}

/* ---------- Extra sectie (financiële administratie) ---------- */
.section--extra { padding: 40px 0 60px; }
.extra-text { padding: 30px 10% 15px 0; border-right: 1px solid rgba(0, 0, 0, .1); }
.extra-text ul { margin: 0 0 15px; padding-left: 30px; color: #737e86; list-style: disc; }
.extra-text li { margin-bottom: 10px; }

/* ---------- Kleine dienstkaarten ---------- */
.section--cards-small { padding: 110px 0 70px; }
.cards-small { display: flex; flex-wrap: wrap; align-items: flex-start; width: 100%; }
.card-small__body { padding-right: 10%; }
.card-small__current { color: #2c7000; }
.image-frame--static { cursor: default; }

@media (min-width: 768px) and (max-width: 959px) {
    .cards-small { width: 75%; }
}

/* ---------- Contact: intro ---------- */
.section--contact-intro { padding: 175px 10% 0; }
.wrap-intro { display: flex; flex-wrap: wrap; align-content: flex-start; width: 50%; padding: 0 4%; }
.col--divider { margin-bottom: 0; }
hr.divider { height: 1px; margin: 0 auto 30px; border: 0; background: rgba(0, 0, 0, .08); }
.intro-phone, .intro-phone:hover { color: #045ba8; }
.intro-badge { vertical-align: top; }
.intro-image { line-height: 0; text-align: center; }

@media (max-width: 767px) {
    .wrap-intro { width: 100%; }
}

/* ---------- Contact: manieren om contact op te nemen ---------- */
.section--ways {
    padding: 40px 0 60px;
    background: url(/media/2020/05/finance2-sectionbg1.png) repeat 50% 0;
}
.wrap-two-third { display: flex; width: 66.666%; }
.ways-title { padding-bottom: 20px; }
.ways-title__mark { margin-bottom: 50px; }
.ways { display: flex; flex-wrap: wrap; align-items: flex-start; width: 100%; }
.way { width: 25%; }
.way__inner { width: calc(83.333% - 24px); }
.way__icon { display: block; }

@media (max-width: 767px) {
    .wrap-two-third, .way { width: 100%; }
    .way__inner { width: 100%; text-align: center; }
    .way__icon { margin: 0 auto; }
}

/* ---------- Contact: formulierblok ---------- */
.section--form {
    padding: 10px 0 55px;
    background: url(/media/2020/05/finance2-wrapbg1.png) no-repeat 50% 0;
}
.wrap-half--form-left { padding: 35px 0 0; }
.wrap-half--form-right { padding: 54px 0 0; }
.form-label { padding-left: 55px; background: url(/media/2020/05/finance2-contact-icon5.png) no-repeat 0 50%; }
.form-label h5 { margin: 5px 0 0; }

.site-form { position: relative; }
.field { display: flow-root; margin: 0 0 15px; }
.field label { font-weight: 500; }
.field__control { display: block; margin-bottom: 3px; }
.field__control:has(textarea) { margin-bottom: 10px; }
.field__input {
    display: block;
    width: 100%;
    height: 40px;
    margin: 0;
    padding: 10px;
    border: 0;
    border-bottom: 1px solid #456a2e;
    border-radius: 0;
    color: #000;
    background: #fff;
    font: 400 15px/20px var(--font);
    box-shadow: none;
    appearance: none;
}
.field__input--textarea { height: 221px; resize: none; }
.field__input:focus { border-bottom-color: var(--green); outline: none; }
.not-valid-tip { display: block; color: #dc3232; font-size: 15px; font-weight: 400; }

.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.uploads { margin: 0 0 15px; padding-top: 27px; }
.uploads__list:empty { display: none; }
.upload-row { margin: 0; padding: 6px 0; color: var(--text); }
.upload-row__remove { margin-left: 4px; padding: 0 2px; border: 0; background: none; color: #dd2e44; cursor: pointer; vertical-align: -1px; }
.upload-row__remove .icon { width: 13px; height: 13px; }
.js .uploads__fallback { display: none; }
.btn.uploads__add, .btn--submit { min-height: 50px; border: 0; font-family: var(--font); cursor: pointer; }
.btn--submit { margin: 0; }
.form-submit { display: flex; align-items: center; margin: 0 0 15px; }
.form-spinner { display: none; position: relative; width: 24px; height: 24px; margin: 0 24px; border-radius: 100%; background: #23282d; opacity: .75; }
.form-spinner::before { content: ""; position: absolute; left: 4px; top: 4px; width: 6px; height: 6px; border-radius: 100%; background: #fbfbfc; transform-origin: 8px 8px; animation: spin 1s linear infinite; }
.site-form.is-submitting .form-spinner { display: inline-block; }
.site-form.is-submitting { opacity: .5; }
.response-output { margin: 0 7.5px 15px; padding: 3px 15px; }
.response-output[hidden] { display: none; }

@keyframes spin { to { transform: rotate(360deg); } }

@media (min-width: 768px) and (max-width: 959px) {
    .field__control:has(textarea) { margin-bottom: 9px; }
    .uploads { padding-top: 23px; }
}
@media (max-width: 767px) {
    .field__control:has(textarea) { margin-bottom: 7px; }
    .uploads { padding-top: 20px; }
    .wrap-half--form-left, .wrap-half--form-right { width: 100%; }
}
@media (max-width: 479px) {
    .uploads { padding-top: 19px; }
}

/* ---------- 404 (zonder header en footer, zoals live) ---------- */
.page-404 { height: 100%; }
.error-404 { position: absolute; top: 50%; left: 30px; width: 913px; margin-top: -150px; overflow: hidden; }
.error-404__inner { display: flow-root; margin: 0 12px 40px; }
.error-404__pic { float: left; width: 30%; text-align: center; color: var(--green); }
.error-404__cone { display: block; width: 244px; height: 223px; margin: 16px auto 0; }
.error-404__desk { float: left; width: 70%; padding-top: 40px; }
.error-404__desk h2 { font-size: 45px; line-height: 45px; }
.error-404__desk h4 { font-size: 26px; line-height: 30px; }
.error-404__check { font-size: 16px; line-height: 45px; }
.error-404__button {
    margin-left: 20px;
    padding: 16px 20px;
    border-radius: 5px;
    color: #fff;
    background: var(--green);
    font-size: 15px;
    line-height: 60px;
    -webkit-box-decoration-break: slice;
    box-decoration-break: slice;
    transition: background-color .2s ease-in-out;
}
.error-404__button:hover { color: #fff; background: var(--green-slide); }

@media (min-width: 960px) and (max-width: 1239px) {
    .error-404 { width: 883px; }
    .error-404__cone { width: 215px; height: 196px; margin-top: 34px; }
}
@media (max-width: 959px) {
    .error-404 { position: static; width: auto; margin-top: 0; padding-top: 50px; }
    .error-404__inner { max-width: 708px; margin: 0 auto 40px; padding: 0 12px; }
    .error-404__pic, .error-404__desk { float: none; width: 100%; }
    .error-404__cone { width: 254px; height: 232px; margin: 17px auto 37px; }
    .error-404__desk { padding-top: 20px; text-align: center; }
}
@media (max-width: 767px) {
    .error-404 { padding: 20px 33px 0; }
    .error-404__inner { margin-bottom: 40px; }
    .error-404__cone { width: 156px; height: 143px; margin: 10px auto 23px; }
    .error-404__desk h2 { font-size: 30px; line-height: 30px; }
    .error-404__desk h4 { font-size: 19px; line-height: 25px; }
    .error-404__check { display: block; margin-bottom: 15px; line-height: 22px; }
    .error-404__button { display: inline-block; line-height: 19px; }
}

/* ---------- Footer ---------- */
.footer { border-top: 1px solid transparent; background: #fff; }
.footer__inner { padding: 30px 12px 60px; }
.footer__copy { float: left; }
.footer__social { float: right; margin: 0 20px 0 0; padding: 0; list-style: none; }
.footer__social li { display: inline-block; margin-right: 6px; }
.footer__social li:last-child { margin-right: 0; }
.footer__social a { color: #808080; line-height: 15px; transition: all .3s ease-in-out; }
.footer__social a:hover { color: #515151; }
.footer__totop {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    float: right;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-top: -9px;
    border-radius: 5px;
    color: #65666c;
    background: var(--green);
}
.footer__totop::before { content: ""; position: absolute; left: 0; top: 0; width: 0; height: 100%; z-index: -1; background: var(--green-slide); transition: all .2s ease-in-out; }
.footer__totop:hover { color: #65666c; }
.footer__totop:hover::before { width: 100%; }
.footer__totop .icon { width: 20px; height: 20px; }

@media (max-width: 767px) {
    .footer__inner { padding: 30px 45px 60px; text-align: center; }
    .footer__copy { float: none; margin: 0 0 10px; }
    .footer__social { float: none; margin: 0; }
    .footer__totop { float: none; display: inline-flex; margin: -10px 0 10px; }
}

/* ---------- Foutpagina ---------- */
.section--error { padding: 175px 0 70px; }

/* ---------- Minder beweging ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}