/*

--vacancy-base-color
--vacancy-text-color
--vacancy-link-color
--vacancy-accent-color
--vacancy-border-radius
--vacancy-btn-color

*/

:root {
    --vacancy-border-radius: 0;
}

html { font-size: 10px; background-color: rgb(var(--vacancy-base-color)); scroll-behavior: smooth; scroll-padding-top: 100px }
 
body { font-size: 1.6rem; font-weight: 400; }

/*** Buttons ***/
.btn { border: none!important; display: inline-flex; align-items: center; border-radius: 0; padding: 0 1.4rem; height: 4.8rem; font-size: 1.6rem; box-shadow: none!important; }
.btn:hover { opacity: 1!important; transform: scale(1.05); }

.btn.btn-info { color: #fff; background-color: rgb(var(--vacancy-btn-color))!important; border-color: rgb(var(--vacancy-btn-color))!important; }

@media (min-width: 768px) {
    .btn { min-height: 5.6rem; padding: 0 2.4rem; }
}

/*** Typograpy ***/
h1, h2, h3, h4 { line-height: 1.2; margin: 0; }
h1 { font-size: clamp(3.2rem, 5vw, 6rem); }
h2 { font-size: clamp(2.8rem, 4vw, 4.4rem); }
h3 { font-size: clamp(2rem, 3vw, 2.4rem); }
h4 { font-size: clamp(1.8rem, 3vw, 2rem) }

p, td, li, label { font-size: 1.6rem; line-height: 1.7; font-weight: 500; }

.fa, .fas, .far, .fal, .fad, .fab, .icon { color: rgb(var(--vacancy-btn-color))!important; }

.display h1 { font-size: clamp(3.2rem, 5vw, 6.4rem); line-height: 1.2; }
.display p { font-size: clamp(1.8rem, 3vw, 2rem); }

@media (min-width: 768px) {
    
}

/*** Navigation ***/
#nav-main { padding: 0; position: fixed; top: 0; right: 0; left: 0; z-index: 9999; background-color: #fff!important; border-top: .4rem solid rgb(var(--vacancy-btn-color)); box-shadow: 0 0 15px 0 rgba(0,0,0,.15); }
#nav-main + .is-wrapper { padding-top: 6.8rem; }
#nav-main .is-container { padding: 0; }
#nav-main .navbar-brand { padding: 0 1.6rem; margin: 0; z-index: 9999; }
#nav-main .navbar-brand .navbar-logo { max-height: 4.5rem; }

#navbar-main .nav-item .nav-link { position: relative;}
#navbar-main .nav-item.active .nav-link { color: rgb(var(--vacancy-btn-color)); }

.navbar-toggler { padding: 0; width: 6.8rem; height: 6.8rem; z-index: 9999; }
.navbar-toggler span { margin-left: auto; margin-right: auto; transition: none!important; }
.navbar-toggler:not(.collapsed) span:nth-child(1) { left: 24px; top: 29px; }
.navbar-toggler:not(.collapsed) span:nth-child(3) { left: 24px; top: 29px; }

@media (max-width: 991.98px) {
    #navbar-main{ padding: 6.8rem 0 1.6rem 0; margin: 0; position: fixed; top: 0; right: 0; bottom: 0; height: 100%; left: 0; z-index: 8888; background-color: #fff; opacity: 0; transition: opacity 100ms ease!important; border-top: .4rem solid rgb(var(--vacancy-btn-color)); }
    #navbar-main.show { opacity: 1; }
    #navbar-main.collapsing { height: 100%!important; }
    
    #navbar-main .nav-item { border: none;}
    #navbar-main .nav-item .nav-link { padding: 1.6rem 2.8rem; font-size: 2.8rem; line-height: 1.2; font-weight: 600; }
    #navbar-main .nav-item.active .nav-link { box-shadow: inset 5px 0px 0px 0px rgb(var(--vacancy-btn-color)); }
    #navbar-main .nav-item.dropdown .dropdown-toggle { display: inline-block; width: 80%; }
    #navbar-main .nav-item.dropdown .dropdown-toggle::after { display: none; }
    #navbar-main .nav-item.dropdown .btn.btn-sidebar-dropdown { border-left: 1px solid rgba(0, 0, 0, 0.1); background-color: transparent; min-height: 6.5rem; width: 20%; justify-content: center; }
    #navbar-main .nav-item.dropdown .btn.btn-sidebar-dropdown:hover { transform: none!important; }
    #navbar-main .nav-item.dropdown .dropdown-menu { background-color: rgba(0,0,0,.1); padding: 0; box-shadow: none; }
    #navbar-main .nav-item.dropdown .dropdown-menu .dropdown-item { padding: 1.6rem 2.8rem; }
    #navbar-main .nav-item.dropdown .dropdown-menu .dropdown-item:hover { background-color: transparent; } 
}


@media (min-width: 992px) {
    #navbar-main { padding-right: 1.6rem; }
    #navbar-main .nav-item .nav-link { padding: 3rem 1.8rem; position: relative;}
    #navbar-main .nav-item .nav-link::after { content: ''; width: 0%; height: .2rem; position: absolute; bottom: 0; left: 50%; border: none; transform: translateX(-50%); background-color: rgb(var(--vacancy-btn-color)); transition: width 250ms ease; }
    #navbar-main .nav-item .nav-link:hover::after { width: 100%; }
    #navbar-main .nav-item.active .nav-link::after { width: 100%; }
    
    #nav-main + .is-wrapper { padding-top: 8.7rem; }
    
    #navbar-main .nav-item.dropdown { position: relative; }
    #navbar-main .nav-item.dropdown .btn.btn-sidebar-dropdown { padding: 0; height: 100%; background: transparent; position: absolute; top: 0; right: 0; bottom: 0; font-size: 1.25rem; }
    #navbar-main .nav-item.dropdown .dropdown-menu { background-color: #fff; border: 1px solid rgba(0,0,0,.1); border-top: 0; box-shadow: none; }
}

@media (min-width: 1200px) {
    #nav-main .navbar-brand .navbar-logo { max-height: 5.5rem; }
    
    #navbar-main .nav-item .nav-link { font-size: 1.8rem; }
}

/*** Vacature overzicht ***/
#lijst .vacancy-index-list-title {}
#lijst .vacancy-index-list-counter { display: inline-block; border-radius: 0; padding: 0 1rem; background-color: rgb(var(--vacancy-btn-color)); padding: 0; height: 3rem; min-width: 3rem; line-height: 3rem; text-align: center; }

/*** Forms ***/
.form-control { min-height: 4.8rem; font-size: 1.6rem; border-radius: 0; padding: 1rem 1.6rem; }
.form-control:focus { box-shadow: none!important; border-color: #000; }

/*** Footer ***/
.is-section__footer { border-top: 1px solid rgba(0, 0, 0, 0.1); }
.is-section__footer .is-boxes { min-height: 0px!important; }
.is-section__footer .is-boxes.is-boxes__main { padding-top: 2.8rem; padding-bottom: 2.8rem; }
.is-section__footer .is-boxes.is-boxes__main h3 { font-weight: 600; }
.is-section__footer .is-boxes.is-boxes__main * {  }
.is-section__footer .is-boxes.is-boxes__bottom { background-color: #eeeff0; color: rgba(0,0,0,.5); }
.is-section__footer .is-boxes.is-boxes__bottom a { color: rgba(0,0,0,.5); }
.is-section__footer .is-container { margin-top: 0!important; margin-bottom: 0!important; }

@media (min-width: 992px) {
    .is-section__footer .is-boxes.is-boxes__main { padding-top: 4.8rem; padding-bottom: 4.8rem; }
}

@media (min-width: 1200px) {
    .is-section__footer .is-boxes.is-boxes__main { padding-top: 6.4rem; padding-bottom: 6.4rem; }
}