@font-face {
    font-family: 'Muli';
    src: url('../fonts/Muli-Semi-BoldItalic.woff2') format('woff2'),
    url('../fonts/Muli-Semi-BoldItalic.woff') format('woff'),
    url('../fonts/Muli-Semi-BoldItalic.svg#Muli-Semi-BoldItalic') format('svg');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Muli';
    src: url('../fonts/Muli-LightItalic.woff2') format('woff2'),
    url('../fonts/Muli-LightItalic.woff') format('woff'),
    url('../fonts/Muli-LightItalic.svg#Muli-LightItalic') format('svg');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Muli';
    src: url('../fonts/Muli-Italic.woff2') format('woff2'),
    url('../fonts/Muli-Italic.woff') format('woff'),
    url('../fonts/Muli-Italic.svg#Muli-Italic') format('svg');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Muli';
    src: url('../fonts/Muli.woff2') format('woff2'),
    url('../fonts/Muli.woff') format('woff'),
    url('../fonts/Muli.svg#Muli') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Muli';
    src: url('../fonts/Muli-ExtraLightItalic.woff2') format('woff2'),
    url('../fonts/Muli-ExtraLightItalic.woff') format('woff'),
    url('../fonts/Muli-ExtraLightItalic.svg#Muli-ExtraLightItalic') format('svg');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Muli';
    src: url('../fonts/Muli-Bold.woff2') format('woff2'),
    url('../fonts/Muli-Bold.woff') format('woff'),
    url('../fonts/Muli-Bold.svg#Muli-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Muli';
    src: url('../fonts/Muli-BoldItalic.woff2') format('woff2'),
    url('../fonts/Muli-BoldItalic.woff') format('woff'),
    url('../fonts/Muli-BoldItalic.svg#Muli-BoldItalic') format('svg');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Muli';
    src: url('../fonts/Muli-SemiBold.woff2') format('woff2'),
    url('../fonts/Muli-SemiBold.woff') format('woff'),
    url('../fonts/Muli-SemiBold.svg#Muli-SemiBold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Muli';
    src: url('../fonts/Muli-ExtraLight.woff2') format('woff2'),
    url('../fonts/Muli-ExtraLight.woff') format('woff'),
    url('../fonts/Muli-ExtraLight.svg#Muli-ExtraLight') format('svg');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Muli';
    src: url('../fonts/Muli-Light.woff2') format('woff2'),
    url('../fonts/Muli-Light.woff') format('woff'),
    url('../fonts/Muli-Light.svg#Muli-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}


html, body {
    font-family: "Muli", "Arial", sans-serif;
    overflow-x: hidden;
}

p, a, ul {
    font-size: 16px;
}

#page {
    margin-top: 80px; /*Enter value equal to header if position is set to fixed. If position is set to sticky, this css can be abandoned*/
}

@media (min-width: 1700px) {
    .container {
        max-width: 1640px;
    }
}


.article {
    box-shadow: 0px 0px 10px #00000029;
    flex-grow: 1; /*Makes the content of the article fill all remaining space within the column*/
    overflow: hidden; /*Required to prevent content (Backgrounds, images, etc.) inside the div from bleeding out of the rounded edges. Can be removed if border-radius is not applied*/
    display: flex; /*Make the item flexible in size and position*/
    position: relative; /*Allows for absolutely positioned elements to be positioned inside of the article*/
    /*Flex-direction should be declared using bootstrap classes*/
}

.article-image-container {
    /*Place the article-image class inside this container*/
    min-height: 300px; /*Sets minimum height of the background image. Can be removed if a set height is given*/
    position: relative; /*Allows for absolutely positionde elements to be positioned inside of the article's image*/
    display: flex; /*Allows items inside the container to be flexible*/
    flex: 0 0 auto; /*Fallback for IE*/
    overflow: hidden; /*Makes sure the background image doesn't bleed out of the container if animations are applied to it*/
    flex-direction: column; /*Makes content inside the container flow from top to button*/
    padding: 0 !important; /*Override the standard padding given to flex containers*/
    /*The background-image-container's background color should be declared using bg-color classes. If the image inside the container has no opacity, this styling can be ignored*/
    /*The order of the container should be declared using bootstrap classes*/
    z-index: 10;
}

@media only screen and (max-width: 768px) {
    .article-image-container {
        /*give the image a set height for column displays*/
        height: 300px; /*Height of the background image, can be customized*/
    }
}

.article-image {
    width: 100%; /*Make image fill full width of the container around it*/
    height: 100%; /*Make image fill full height of the container around it*/
    position: absolute; /*Absolutely positions the image inside the container to allow items to be placed in front of it*/
    opacity: 1; /*Opacity of the image. The image will blend with whatever the background color the container is set to.*/
    background-size: cover; /*Make background image fill all space given*/
    background-repeat: no-repeat; /*Make sure image doesn't repeat itself*/
    background-position: center; /*If the background image is larger than the space given, focus on the center of the image*/
    /*The background image should be declared via inline css*/
}

.article-content-container {
    display: flex; /*Allows items inside the container to be flexible*/
    flex-direction: column; /*Makes content inside the container flow from top to button*/
    flex: 1 0 auto; /*Fallback for IE*/
    /*The order of the container should be declared using bootstrap classes*/
    margin-top: -90px;
    position: relative;
    background-color: #fff;
}

.article-content {
    flex: 1 0 auto; /*Makes content inside the article's content section (Titles, text, etc.) Fill all remaining space*/
    z-index: 10; /*Makes the content display in front of eventual images*/
    /*The article content's padding should be declared using bootstrap classes*/
    /*The article content's background should be declared using bg-color classes*/
    /*The article content's colors should be declared using color classes. If different elements should use different colors, declare them on the elements themselves*/
}

.article .article-button {
    /*Place any a or button element inside of this div*/
    display: flex; /*Allow button's location to be manipulated*/
    /*The article button's position should be declared using bootstrap classes*/
    /*The article button's padding should be declared using bootstrap classes*/
    /*The article button's background should be declared using bg-color classes*/
    /*The article button's flex-direction should be declared using bootstrap classes*/
}

/*
.articles .article-content p {
   These properties are used to limit the maximum amount of lines that can be displayed inside of the article
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}*/

.article .date {
    font-size: 0.75rem;
}

.article-title {
    display: flex; /*Makes items inside the article-title flexible*/
    flex-flow: row nowrap;
    align-items: center; /*Makes the items within the article-title align vertically*/
    flex-direction: column;
}

.article-title-image {
    flex: 0 0 auto; /*Fallback for IE*/
    display: flex; /*Make content inside the image container flexible*/
    flex-flow: row nowrap;
    justify-content: center; /*Place image in the center of the container*/
    align-items: center; /*Place image in the center of the container*/
    height: 150px;
    width: 150px;
    border-radius: 50%;
    background-color: #fff;
    margin: 0 auto;
    box-shadow: 0px 0px 10px #00000026;
    position: relative;
    padding: 26px;
    z-index: 30;
}

.uitgelicht .article-title-image {
    position: absolute;
    bottom: 40px;
    left: 40px;
}

.article-title-image img {
    max-width: 100%;
    height: auto;
}

.adres {
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: bold;
    color: #231F20;
}

.plaatsnaam {
    color: #686F6B;
}

.quote {
    top: -110px;
    right: 50px;
    position: absolute;
    font-size: 250px;
    font-family: "Times New Roman", "Arial", sans-serif;
    color: #000 !important;
    letter-spacing: -30px;
    pointer-events: none;
}

.text-link {
    text-transform: uppercase;
    font-size: 1rem;
    letter-spacing: 2px;
    text-decoration: none !important;
    font-weight: bold;
}

.articles .text-link, .detail .text-link, .pre-footer .text-link {
    color: #231F20 !important;
    border-bottom: 2px solid #231F20;
}

.uitgelicht .text-link {
    color: #fff !important;
    border-bottom: 2px solid #fff;
    display: inline-block;
}

.text-link i {
    transition: .3s ease !important;
    padding-left: 5px;
}

.text-link:hover i {
    transform: translateX(5px);
}

.hero-background {
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: #000;
    opacity: 0.3;
    top: 0;
    left: 0;
}

.hero {
    overflow: hidden;
    width: 100%;
    height: 50vh;
    border: 15px solid #fff;
}

.hero-title, .hero-subtitle {
    color: #fff;
    text-shadow: 0px 0px 5px #0000001A;
}

.hero-title {
    letter-spacing: 7px;
    text-transform: uppercase;
    font-size: 24px;
}

.hero-subtitle {
    font-size: 24px;
}

.navigatie-button {
    background-color: #686F6B;
    transition: 250ms all ease;
    color: #fff !important;
    text-decoration: none !important;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 5px 16px 5px;
    max-height: 70px;
}

.navigatie-button span {
    border-bottom: 2px solid #fff;
    font-size: 1.5rem;
}

.navigatie-button:hover {
    background-color: #585e5b;
}

.custom-dropdown {
    position: relative;
    z-index: 50;
    overflow-anchor: none;
}

.custom-dropdown-title h2 {
    margin-bottom: 0;
    font-size: 1.5rem;
}

.custom-dropdown ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.custom-dropdown .custom-dropdown-item .custom-dropdown-heading {
    background-color: #fff;
    color: #686F6B !important; /*Avoid using important here*/
    display: flex;
    text-decoration: none !important; /*Avoid using important here*/
    position: relative;
    z-index: 20;
    transition: background-color, ease 300ms;
    font-size: 24px;
    overflow: hidden;
    border: 1px solid #686F6B;
}

.custom-dropdown .custom-dropdown-item .custom-dropdown-heading .custom-dropdown-title {
    padding: 20px;
    flex: 1 0 auto;
}

.custom-dropdown .custom-dropdown-item .custom-dropdown-heading .custom-dropdown-arrow-container {
    position: relative;
    color: #DDD7CD !important;
    padding: 10px 20px;
    display: flex;
    align-items: center;
}

.custom-dropdown .custom-dropdown-item .custom-dropdown-heading .custom-dropdown-arrow-container .custom-dropdown-arrow {
    transition: transform, ease 300ms;
    font-size: 30px;
}

.custom-dropdown .custom-dropdown-item.open .custom-dropdown-heading .custom-dropdown-arrow-container .custom-dropdown-arrow {
    transform: rotate(180deg);
}

.custom-dropdown .custom-dropdown-item .custom-dropdown-content {
    background-color: #fff;
    color: #000;
    display: none;
    border-left: 1px solid #686F6B;
    border-right: 1px solid #686F6B;
    border-bottom: 1px solid #686F6B;
    padding: 20px;
    width: 100%;
    position: relative;
}

.custom-dropdown .custom-dropdownn-item .custom-dropdown-content .custom-dropdown-content-inner {
    padding: 20px;
}

.custom-dropdown-content-item a {
    color: #000 !important;
    text-decoration: none !important;
    display: block;
}

.custom-dropdown-content-item {
    padding: 5px 0;
}

.custom-dropdown-content-item:hover {
    background-color: #f8f9fa !important;
}

.uitgelicht img, .detail img, .gallery img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.uitgelicht h2 {
    letter-spacing: 5px;
}

.subtitle {
    color: #686F6B;
    letter-spacing: 3px;
}

.title {
    color: #231F20;
    text-transform: uppercase;
    letter-spacing: 4.5px;
    font-weight: bold;
    font-size: 48px;
}

.footer {
    background-color: #686F6B;
}

.footer.alt {
    border-top: 0px !important;
}

.footer-content p, h3 {
    color: #fff;
    margin-bottom: 0;
}

.footer-content h3 {
    letter-spacing: 3px;
    text-transform: uppercase;
    font-size: 20px;
}

.social-media a {
    color: #fff !important;
    font-size: 20px;
    margin: 0 10px;
}

.tofst {
    position: absolute;
    top: 50px;
    left: 50px;
}

.pre-footer {
    background-color: #F8F8F8;
}

.pre-footer p {
    color: #808080;
    text-align: center
}

.uitgelicht h2, .uitgelicht h3 {
    text-shadow: 0px 0px 5px #00000033;
    color: #fff;
}

.pre-footer img {
    width: 250px;
    height: auto;
}

.prijs {
    background-color: #686F6B;
    color: #fff;
}

.share {
    background-color: #000;
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
    padding: 20px;
}

.share a {
    text-transform: uppercase;
    text-align: center;
    color: #fff !important;
    text-decoration: none;
    font-size: 20px;
    margin-bottom: 0;
    display: block;
}

.share img {
    display: block;
}

.share a:not(:last-child) {
    border-bottom: 2px solid #808080;
}

.trigger {
    margin-top: 5px;
    border-bottom: 2px solid #fff !important;
}

.share a i {
    padding: 15px 0;
}

@media (max-width: 991px) {
    .share {
        top: auto;
        bottom: 0;
        transform: none;
    }

    .share img {
        width: 40px;
    }

    .share span {
        display: none;
    }

    .trigger {
        border-bottom: none !important;
    }
}

.image-box {
    position: relative;
    cursor: zoom-in;
    display: block;
}

.gallery .text-link {
    color: #000 !important;
    border-bottom: 2px solid #231F20;
}


.bouncy {
    animation: bounce 2s infinite ease-in-out;
    transform-origin: center bottom;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-20px);
    }
    60% {
        transform: translateY(-10px);
    }
}

.image-box:before {
    content: '';
    position: absolute;
    background-color: #000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: 250ms all ease !important;
    opacity: 0;
    pointer-events: none;
}

.background-black {
    background-color: #000;
}

.gmap-map {
    height: 500px;
}

.image-box:after {
    content: url(../img/zoom-in.svg);
    position: absolute;
    top: 0;
    left: 0;;
    width: 100%;
    height: 100%;
    opacity: 0;
    display: flex;
    transition: 250ms all ease !important;
    justify-content: center;
    align-items: center;
    pointer-events: none;

}

.image-box:hover:before {
    opacity: 0.3;
}

.image-box:hover:after {
    opacity: 1;
}

.prijs img {
    flex: 1 0 auto;
}

.prijs h2 {
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 4.5px;

}

.double-gutters > div[class*="col-"] {
    padding-right: calc(15px * 2);
    padding-left: calc(15px * 2);
    padding-top: calc(15px * 2);
    padding-bottom: calc(15px * 2);
}

.double-gutters {
    margin-right: calc(-15px * 2);
    margin-left: calc(-15px * 2);
    margin-top: calc(-15px * 2);
    margin-bottom: calc(-15px * 2);
}

@media only screen and (min-width: 768px) {
    .background-creme {
        background-color: #DDD7CD;
        position: absolute;
        width: 100%;
        top: -500px;
        bottom: -200px;
        z-index: -10;
        left: 0;
    }

    .background-lightgrey {
        background-color: #F8F8F8;
        position: absolute;
        width: 100%;
        top: -100px;
        bottom: -200px;
        z-index: -10;
        right: 0;
    }

    .background-creme.alt {
        top: 200px;
        bottom: 200px;
        left: unset;
        right: 0;
    }

    .background-lightgrey.alt {
        width: 100%;
        top: -50px;
        bottom: 250px;
        z-index: -10;
        right: unset;
        left: 0;
    }
}

.anchorscroll {
    bottom: 10%;
}

.anchorscroll a {
    font-size: 60px !important;
    color: #fff !important;
}

.detail-block {
    background-color: #DDD7CD;
}

.detail-block p {
    color: #686F6B;
}

@media only screen and (min-width: 992px) {
    .hero {
        height: 70vh;
        border: 3rem solid #fff;
    }

    .hero-title {
        font-size: 48px;
    }

    .custom-dropdown .custom-dropdown-item .custom-dropdown-content {
        position: absolute;
    }

    .hero-subtitle {
        font-size: 36px;
    }

    .navigation {
        margin-top: -80px;
    }

    .uitgelicht h2 {
        font-size: 48px;
    }

    .uitgelicht h3 {
        font-size: 36px;
    }

    .background-creme, .background-lightgrey {
        width: 50% !important;
    }

    .footer h3 {
        font-size: 1.75rem;
    }

    .social-media a {
        font-size: 28px;
    }

    .detail-block {
        margin-left: -150px;
    }

}

@media only screen and (min-width: 1200px) {
    /*.hero-subtitle {*/
    /*    font-size:48px;*/
    /*}*/
    .hero-title {
        font-size: 60px;
    }

}

.fancybox {
    max-width: 800px;
}

.fancybox h4 {
    text-transform: uppercase;
    letter-spacing: 7px;
}

.fancybox p {
    color: #686F6B;
}

.page-item.active .page-link {
    background-color: #686F6B;
    border-color: #686F6B;
}

.page-link, .page-link:hover {
    color: #686F6B;
}

ul.pagination {
    display: inline-flex;
}

.gegevens .img-container {
    height: 50px;
}

.gegevens img {
    height: 40px;
}

@media (max-width: 450px) {
    .hero-title {
        letter-spacing: 2px;
        font-size: 20px;
    }

    .hero-subtitle {
        font-size: 18px;
    }
}