:root {
    --doc-width: calc(100vw - 60px);
    --win-height: 100vh;
    --anim-elastic: cubic-bezier(0.65, 0.5, 0.65, 1.5)
}

@media only screen and (min-width: 1230px) {
    :root {
        --doc-width: 1230px;
    }
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body.has-menu {
    overflow: hidden;
}

.flood {
    font-family: 'Flood';
}

h1 .flood, h2 .flood, h3 .flood {
    color: var(--color-primary);
    display: block;
    font-size: 0.3em;
    line-height: 29px;
    margin-bottom: 10px;
    font-weight: normal;
}
h3 .flood {
    font-size: 0.5em;
}

.accent {
    color: var(--color-primary);
}

.outer {
    width: calc(100% - 60px);
    margin: 0 auto;
}

.outer > .video {
    width: 100%;
    height: calc(45vw - 60px);
    max-height: 698px;
    min-height: 320px;
    object-fit: cover;
    border-radius: 5px;
    position: relative;
    background-color: #000;
}
.outer > .video iframe {
    width: 100%;
    height: 100%;
}

.inner {
    max-width: var(--doc-width);
    width: calc(100% - 60px);
    margin: 0 auto;
}

.cols {
    position: relative;
    display: flex;
    justify-content: space-between;
}

.cols-wrap {
    flex-wrap: wrap;
}

.col {
    position: relative;
    box-sizing: border-box;
}

.col-1 { width: calc(calc(var(--doc-width) - 330px) / 12); }
.col-2 { width: calc(calc(var(--doc-width) - 330px) / 12 * 2 + 30px); }
.col-3 { width: calc(calc(var(--doc-width) - 330px) / 12 * 3 + 60px); }
.col-4 { width: calc(calc(var(--doc-width) - 330px) / 12 * 4 + 90px); }
.col-5 { width: calc(calc(var(--doc-width) - 330px) / 12 * 5 + 120px); }
.col-6 { width: calc(calc(var(--doc-width) - 330px) / 12 * 6 + 150px); }
.col-7 { width: calc(calc(var(--doc-width) - 330px) / 12 * 7 + 180px); }
.col-8 { width: calc(calc(var(--doc-width) - 330px) / 12 * 8 + 210px); }
.col-9 { width: calc(calc(var(--doc-width) - 330px) / 12 * 9 + 240px); }
.col-10 { width: calc(calc(var(--doc-width) - 330px) / 12 * 10 + 270px); }
.col-11 { width: calc(calc(var(--doc-width) - 330px) / 12 * 11 + 300px); }
.col-12 { width: calc(calc(var(--doc-width) - 330px) / 12 * 12 + 330px); }


.fhl {
    display: flex;
    justify-content: flex-start;
}
.fhc {
    display: flex;
    justify-content: center;
}
.fhr {
    display: flex;
    justify-content: flex-end;
}
.fvt {
    display: flex;
    align-items: flex-start;
}
.fvc {
    display: flex;
    align-items: center;
}
.fvb {
    display: flex;
    align-items: flex-end;
}

/* margins */
.mg1 {
    padding-bottom: 30px;
}
.mg2 {
    padding-bottom: 50px;
}
.mg3 {
    padding-bottom: 100px;
}

/* paddings */
.pd1 {
    padding-top: 30px;
}
.pd2 {
    padding-top: 50px;
}
.pd3 {
    padding-top: 100px;
}

.light {
    background-color: var(--color-light);
}

.light:after {
    content: '';
    display: block;
    height: 1px;
    width: 100%;
}

.middelburg-map {
    background-image: url('../images/wzds_middelburg-kaart.png');
    background-position: 30% 50%;
    background-size: contain;
    background-repeat: no-repeat;
}

#add_payment_method .wc-proceed-to-checkout a.checkout-button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-checkout .wc-proceed-to-checkout a.checkout-button,
.button {
    display: inline-flex!important;
    background-color: var(--color-primary)!important;
    color: #fff;
    font-family: 'Poppins';
    border-radius: 5px!important;
    padding: 15px 40px 10px 40px!important;
    text-decoration: none;
    transition: all 0.25s ease-in-out;
    font-size: 1em!important;
    margin-bottom: 0;
    line-height: inherit!important;
    font-weight: normal!important;
    justify-content: center;
}

#add_payment_method .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-checkout .wc-proceed-to-checkout a.checkout-button:hover,
.button:hover {
    background-color: var(--color-primary-hover)!important;
}

.button-light {
    display: inline-flex;
    background-color: #fff;
    color: inherit!important;
    border-radius: 5px;
    padding: 10px 20px;
    text-decoration: none!important;
    transition: all 0.25s ease-in-out;
    align-items: center;

    box-shadow: 0 1px 5px rgba(0,0,0,0.07);
    border: 1px solid var(--color-divider);
}

.button-wide {
    width: 100%;
    text-align: center;
}

#body {
    padding-top: 110px;
    min-height: calc(100vh - 560px);
    /* min-height: 100%; */
    /*
    position: relative;
    z-index: 2;
    */
}

#body iframe {
    max-width: 100%;
}

.post-meta {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--color-tertiary);
    font-size: 11px;
}

.post-meta li + li {
    margin-left: 10px;
}

.pagination {
    display: flex;
    align-items: center;
}
.pagination-info {
    flex-grow: 1;
}

.pagination .nav-links {
    display: flex;
}
.pagination .nav-links > a,
.pagination .nav-links > span {
    display: flex;
    border-radius: 5px;
    width: 50px;
    height: 50px;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    text-decoration: none!important;
}
.pagination .nav-links a.prev,
.pagination .nav-links a.next {
    display: flex;
    box-shadow: 0 1px 5px rgba(0,0,0,0.07);
    padding: 12px 40px;
    width: auto;
}

.pagination .nav-links a.prev span {
    margin-left: 5px;
}
.pagination .nav-links a.next span {
    margin-right: 5px;
}

.pagination .nav-links a.prev {
    margin-right: 30px;
}
.pagination .nav-links a.next {
    margin-left: 30px;
}
.pagination .nav-links a i {
    font-size: 12px;
}

.pagination .nav-links span.current {
    background-color: var(--color-light);
}

.tags {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tags li {
    margin: 0;
    padding: 0;
}

.tags li a {
    display: block;
    margin: 0 10px 10px 0;
    padding: 5px 15px;
    border-radius: 15px;
    color: #fff;
    font-size: 12px;
    background-color: var(--color-quote);
    text-decoration: none!important;
}

.breadcrumbs {
    margin: 30px 0 0 0;
    padding: 0;
    list-style: none;
    display: flex;

    overflow: hidden;
    text-overflow: ellipsis;
}
.breadcrumbs li {
    display: flex;
    align-items: center;
}

.breadcrumbs li + li:before {
    content: "\e918";
    font-family: 'wzdsicons';
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    font-size: 6px;
    color: var(--color-tertiary);
    margin: 0 5px;
}

.content .breadcrumbs li a,
.breadcrumbs li span {
    font-size: 12px;
    line-height: 22px;
    text-decoration: none;
    white-space: nowrap;
}

.breadcrumbs li span {
    color: var(--color-tertiary);
}

.content .breadcrumbs + h3 {
    margin-top: 10px;
}

.fancybox-button {
    background-color: var(--color-primary);
    color: #fff;
}

.fancybox-navigation .fancybox-button--arrow_left {
    margin-left: 30px;
}
.fancybox-navigation .fancybox-button--arrow_right {
    margin-right: 30px;
}

.fancybox-navigation .fancybox-button--arrow_left,
.fancybox-navigation .fancybox-button--arrow_right {
    background-color: var(--color-secondary);
    width: 70px;
    height: 70px;
    top: calc(50% - 35px);
    border-radius: 100%;
    padding: 0;
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}
.fancybox-navigation .fancybox-button--arrow_left div,
.fancybox-navigation .fancybox-button--arrow_right div {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
}
.fancybox-navigation .fancybox-button--arrow_left svg,
.fancybox-navigation .fancybox-button--arrow_right svg {
    width: 30px;
    height: 30px;
}

.fancybox-thumbs__list a:before {
    border-color: var(--color-primary);
}

.fancybox-bg {
    background-color: #fff;
    opacity: 0.95;
}

.gmaps {
    border-radius: 5px;
    border: 1px solid var(--color-divider);
}

.gmaps-route {
    font-size: 12px;
    margin: 5px 0 15px 0;
    display: inline-block;
}

.social-menu {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
}

.social-menu li:not(:last-of-type) {
    margin-right: 15px;
}

.social-menu li {
    margin: 0 0 15px 0;
    padding: 0;
}

.content .social-menu a {
    display: flex;
    align-items: center;
    text-decoration: none!important;
    color: var(--color-tertiary)!important;
    transition: all 250ms ease-in-out;
}

.content .social-menu a span {
    border-radius: 100%;
    background-color: var(--color-divider);
    color: var(--color-secondary)!important;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 250ms ease-in-out;
}
.content .social-menu a:not(.tooltip) span {
    margin-right: 15px;
}

.content .social-menu a:hover {
    color: var(--color-primary)!important;
}
.content .social-menu a:hover span {
    color: #fff!important;
    background-color: var(--color-primary);
}

.content .social-menu a.share-copy.clicked i:first-of-type,
.content .social-menu a.share-copy:not(.clicked) i:last-of-type{
    display: none;
}

.content h5.share_header,
.content .sidebar h5.share_header {
    font-size: 14px;
    line-height: 21px;
    margin: 15px 0;
}

.sidebar-info {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar img {
    max-width: 100%;
    height: auto;
}

.sidebar > div > img {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 50vh;
    min-height: 300px;
    object-fit: cover;
    object-position: 50% 50%;
}

.content p img {
    max-width: 100%;
    height: auto;
}

.sidebar-info a {
    text-decoration: none!important;
    display: flex;
    align-items: center;
    height: 32px;
}
.sidebar-info a i {
    margin-right: 15px;
    width: 15px;
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-only {
    display: none;
}

a.tooltip {
    position: relative;
}

a.tooltip:before {
    content: '';
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    transform-origin: top left;
    top: calc(100% + 8px);

    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid var(--color-secondary);
    transition: all 250ms ease-in-out 0ms;

    opacity: 0;
    visibility: hidden;
}

a.tooltip:after {
    content: attr(data-tooltip);
    display: block;
    position: absolute;
    background-color: var(--color-secondary);
    padding: 6px 15px;
    font-size: 10px;
    color: #fff;
    top: calc(100% + 8px);
    left: 50%;
    transform: scale(0.01) translateX(-50%);
    transform-origin: top left;
    white-space: nowrap;
    border-radius: 3px;
    transition: all 250ms ease-in-out 250ms;

    opacity: 0;
    visibility: hidden;
}

a.tooltip.clicked:after {
    content: attr(data-tooltip-clicked);
}

a.tooltip:hover:before {
    transform: translate(-50%, -6px);
    transition-delay: 250ms;
    opacity: 1;
    visibility: visible;
}

a.tooltip:hover:after {
    transform: scale(1) translateX(-50%);
    transition-delay: 0ms;

    opacity: 1;
    visibility: visible;
}

.error404 #body {
    display: flex;
}

.page-not-found-404 {
    background-image: url('../images/wzds_404.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom;
    width: 100%;
}

#body iframe.wp-embedded-content {
    width: calc(100% + 60px);
    max-width: none;
    margin: 0 -30px;
}

/* safari svg rendering hack */
.gm-style div > img:not([role="presentation"]) {
    width: 80px!important;
    height: 88px!important;
    transform: scale(0.5);
    transform-origin: top left;
    clip: auto!important;
}

@media only screen and (max-width: 1024px) {
    .col-m-1 { width: calc(calc(var(--doc-width) - 330px) / 12); }
    .col-m-2 { width: calc(calc(var(--doc-width) - 330px) / 12 * 2 + 30px); }
    .col-m-3 { width: calc(calc(var(--doc-width) - 330px) / 12 * 3 + 60px); }
    .col-m-4 { width: calc(calc(var(--doc-width) - 330px) / 12 * 4 + 90px); }
    .col-m-5 { width: calc(calc(var(--doc-width) - 330px) / 12 * 5 + 120px); }
    .col-m-6 { width: calc(calc(var(--doc-width) - 330px) / 12 * 6 + 150px); }
    .col-m-7 { width: calc(calc(var(--doc-width) - 330px) / 12 * 7 + 180px); }
    .col-m-8 { width: calc(calc(var(--doc-width) - 330px) / 12 * 8 + 210px); }
    .col-m-9 { width: calc(calc(var(--doc-width) - 330px) / 12 * 9 + 240px); }
    .col-m-10 { width: calc(calc(var(--doc-width) - 330px) / 12 * 10 + 270px); }
    .col-m-11 { width: calc(calc(var(--doc-width) - 330px) / 12 * 11 + 300px); }
    .col-m-12 { width: calc(calc(var(--doc-width) - 330px) / 12 * 12 + 330px); }

    .fhl-m {
        display: flex;
        justify-content: flex-start;
    }
    .fhc-m {
        display: flex;
        justify-content: center;
    }
    .fhr-m {
        display: flex;
        justify-content: flex-end;
    }
    .fvt-m {
        display: flex;
        align-items: flex-start;
    }
    .fvc-m {
        display: flex;
        align-items: center;
    }
    .fvb-m {
        display: flex;
        align-items: flex-end;
    }

    .middelburg-map {
        background-position: 50% 100%;
        padding-bottom: 200px;
    }


    .mg3 {
        padding-bottom: 80px;
    }

    .pd3 {
        padding-top: 80px;
    }

    .pagination {
        flex-direction: column;
    }
    .pagination-info {
        order: 2;
        margin-top: 20px;
    }

    .m-mg1 {
        padding-bottom: 30px;
    }
    .m-mg2 {
        padding-bottom: 50px;
    }
    .m-mg3 {
        padding-bottom: 100px;
    }

    /* paddings */
    .m1-pd1 {
        padding-top: 30px;
    }
    .m-pd2 {
        padding-top: 50px;
    }
    .m-pd3 {
        padding-top: 100px;
    }

}

@media only screen and (max-width: 768px) {

    #body iframe.wp-embedded-content {
        width: calc(100% + 30px);
        margin: 0 -15px;
    }

    .mg3 {
        padding-bottom: 50px;
    }

    .pd3 {
        padding-top: 50px;
    }

    :root {
        --doc-width: calc(100vw - 30px);
    }

    .inner {
        width: calc(100% - 30px);
    }

    .outer {
        width: calc(100% - 30px);
    }

    .col-m2-1 { width: calc(calc(var(--doc-width) - 330px) / 12); }
    .col-m2-2 { width: calc(calc(var(--doc-width) - 330px) / 12 * 2 + 30px); }
    .col-m2-3 { width: calc(calc(var(--doc-width) - 330px) / 12 * 3 + 60px); }
    .col-m2-4 { width: calc(calc(var(--doc-width) - 330px) / 12 * 4 + 90px); }
    .col-m2-5 { width: calc(calc(var(--doc-width) - 330px) / 12 * 5 + 120px); }
    .col-m2-6 { width: calc(calc(var(--doc-width) - 330px) / 12 * 6 + 150px); }
    .col-m2-7 { width: calc(calc(var(--doc-width) - 330px) / 12 * 7 + 180px); }
    .col-m2-8 { width: calc(calc(var(--doc-width) - 330px) / 12 * 8 + 210px); }
    .col-m2-9 { width: calc(calc(var(--doc-width) - 330px) / 12 * 9 + 240px); }
    .col-m2-10 { width: calc(calc(var(--doc-width) - 330px) / 12 * 10 + 270px); }
    .col-m2-11 { width: calc(calc(var(--doc-width) - 330px) / 12 * 11 + 300px); }
    .col-m2-12 { width: calc(calc(var(--doc-width) - 330px) / 12 * 12 + 330px); }

    .mobile-only {
        display: block;
    }
    .desktop-only {
        display: none;
    }

    .m2-mg1 {
        padding-bottom: 30px;
    }
    .m2-mg2 {
        padding-bottom: 50px;
    }
    .m2-mg3 {
        padding-bottom: 100px;
    }

    /* paddings */
    .m2-pd1 {
        padding-top: 30px;
    }
    .m2-pd2 {
        padding-top: 50px;
    }
    .m2-pd3 {
        padding-top: 100px;
    }

    .outer > .video {
        height: calc(45vh - 60px);
        min-height: 120px;
    }

    .pagination .nav-links a.prev, .pagination .nav-links a.next {
        margin: 0;
    }

    .pagination .nav-links .page {
        display: none;
    }
}

@media only screen and (max-width: 640px) {
    .col-m3-1 { width: calc(calc(var(--doc-width) - 330px) / 12); }
    .col-m3-2 { width: calc(calc(var(--doc-width) - 330px) / 12 * 2 + 30px); }
    .col-m3-3 { width: calc(calc(var(--doc-width) - 330px) / 12 * 3 + 60px); }
    .col-m3-4 { width: calc(calc(var(--doc-width) - 330px) / 12 * 4 + 90px); }
    .col-m3-5 { width: calc(calc(var(--doc-width) - 330px) / 12 * 5 + 120px); }
    .col-m3-6 { width: calc(calc(var(--doc-width) - 330px) / 12 * 6 + 150px); }
    .col-m3-7 { width: calc(calc(var(--doc-width) - 330px) / 12 * 7 + 180px); }
    .col-m3-8 { width: calc(calc(var(--doc-width) - 330px) / 12 * 8 + 210px); }
    .col-m3-9 { width: calc(calc(var(--doc-width) - 330px) / 12 * 9 + 240px); }
    .col-m3-10 { width: calc(calc(var(--doc-width) - 330px) / 12 * 10 + 270px); }
    .col-m3-11 { width: calc(calc(var(--doc-width) - 330px) / 12 * 11 + 300px); }
    .col-m3-12 { width: calc(calc(var(--doc-width) - 330px) / 12 * 12 + 330px); }


    .fancybox-navigation .fancybox-button--arrow_left {
        top: auto!important;
        bottom: 30px;
    }
    .fancybox-navigation .fancybox-button--arrow_right {
        top: auto!important;
        bottom: 30px;
    }


    #body {
        padding-top: 75px;
    }

    .cols {
        flex-wrap: wrap;
    }
    .col:not(.col-m2) {
        width: 100%;
        margin-left: 0;
    }

    .fhl-m2 {
        display: flex;
        justify-content: flex-start;
    }
    .fhc-m2 {
        display: flex;
        justify-content: center;
    }
    .fhr-m2 {
        display: flex;
        justify-content: flex-end;
    }
    .fvt-m2 {
        display: flex;
        align-items: flex-start;
    }
    .fvc-m2 {
        display: flex;
        align-items: center;
    }
    .fvb-m2 {
        display: flex;
        align-items: flex-end;
    }

    .repeater .col-6 {
        order: 1;
        margin-bottom: 30px;
    }
    .repeater .col-1 {
        order: 2;
    }
    .repeater .col-5 {
        order: 3;
    }

    .pagination .nav-links .dots,
    .pagination .nav-links .first,
    .pagination .nav-links .last {
        display: none;
    }

    .pagination .nav-links .current {
        margin: 0 30px;
    }

}

@media only screen and (max-width: 480px) {
    .pagination .nav-links a span {
        display: none;
    }
}

.wp-caption,
.wp-caption img {
    max-width: 100%!important;
    height: auto!important;
}