/* --------------------------------
Filiaal kleuren
--------------------------------
uitgeverij-green: #becd00, rgb(190,205,0)
onderwijs-purple: #8b1386, rgb(139,19,134)
musea-blue:       #3cb4dc, rgb(60,180,220)
rest-orange:      #ff9a31, rgb(255,154,49) */

:root {
    --bs-primary: #becd00;
    --bs-primary-rgb: 139, 19, 134;
    --bs-secondary: #ff9a31;
    --bs-secondary-rgb: 255, 154, 49;
    --bs-purple: #8b1386;
    --bs-orange: #ff9a31;
    --bs-blue: #3cb4dc;
    --bs-green: #becd00;
    --bs-dark: #8b1386;
    --bs-white: #fff;
    --bs-white-rgb: 255, 255, 255;
}

nav .container {
    background-image: url("../assets/img/filiaal-logo-2023-inkscape.svg");
    background-repeat: no-repeat;
    background-size: 13em;
    background-position: 0em 50%;
}

.navbar-light .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%28 139, 19, 134, 0.95%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

header.masthead {
    background: #fff;
    height: auto;
}

header.masthead div.container {
    background: url("../assets/img/filiaal_homepage_final.png");
    background-size: 100%;
    background-repeat: no-repeat;
}

div.portfolio-box-inner {
    margin: 10%;
    background-color: var(--bs-primary);
    padding: 2em;
    overflow-y: auto;
    max-height: 90%;
    border: 1em solid #fff;
}

div.portfolio-box-inner h1 {
    color: #fff;
}

@media (max-width: 767px) {
    header.masthead div.container {
        padding-top: 3em !important;
        padding-bottom: 3.5em !important;
    }

    nav .container {
        background-size: 10em;
        background-position: 1.5em 1.5em;
    }

    div.portfolio-box-inner {
        padding: 1em;
        font-size: 80%;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    header.masthead div.container {
        padding-top: 7em !important;
        padding-bottom: 8em !important;
    }

    nav .container {
        background-size: 12em;
        background-position: 1.5em 1em;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    header.masthead div.container {
        padding-top: 12em !important;
        padding-bottom: 9.5em !important;
    }
}

@media (min-width: 1200px) and (max-width: 1399px) {
    header.masthead div.container {
        padding-top: 16em !important;
        padding-bottom: 12em !important;
    }
}

@media (min-width: 1400px) {
    header.masthead div.container {
        padding-top: 20em !important;
        padding-bottom: 16em !important;
    }
}

#mainNav .navbar-nav .nav-item .nav-link.active {
    color: var(--bs-secondary) !important;
}

.btn-primary {
    color: #fff;
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.btn-primary:hover {
    color: #fff;
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

hr.divider {
    background-color: var(--bs-primary);
}

.btn-light:hover {
    color: #fff;
    background-color: #becd00;
    border-color: #becd00;
}

.bg-orange {
    background-color: var(--bs-orange);
}

.bg-orange h2 {
    color: var(--bs-white);
}

#portfolio .container-fluid .portfolio-box .portfolio-box-caption,
#portfolio .container-sm .portfolio-box .portfolio-box-caption,
#portfolio .container-md .portfolio-box .portfolio-box-caption,
#portfolio .container-lg .portfolio-box .portfolio-box-caption,
#portfolio .container-xl .portfolio-box .portfolio-box-caption,
#portfolio .container-xxl .portfolio-box .portfolio-box-caption {
    background: rgba(255, 154, 49, 0.9);
}

div.portfolio-container {
    padding: .5em;
}

div.portfolio-box {
    border: .5em solid transparent;
}

div.portfolio-box-content,
div.portfolio-box-overlay {
    display: none;
}

div.portfolio-box-overlay {
    background: rgba(128, 128, 128, 0.5);
    backdrop-filter: blur(2px);
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 1100;
}

div.show {
    display: block;
}

ul {
    padding-inline-start: 1em;
}

.portfolio-box-caption ul li {
    list-style: none;
}

a {
    color: #000;
}