/*
Theme Name: Beaver Builder Child Theme
Theme URI: http://www.wpbeaverbuilder.com
Version: 1.0
Description: An example child theme that can be used as a starting point for custom development.
Author: The Beaver Builder Team
Author URI: http://www.fastlinemedia.com
template: bb-theme
*/

:root{
    --global-max-width: 1200px;
    --primary-color: #623e33;
}

body {
    background-size: 100%;
}

.fl-rich-text li,
.fl-rich-text p {
    letter-spacing: .1em;
}

div.wp-link-input input {
    color: black !important;
}

.fl-builder-content .fl-button:active {
    top: 0 !important;
}

.fl-page{
    display:flex;
    flex-direction:column;
    min-height: calc(100vh - 165px);
}

.fl-page-content{
    flex:1;
    width: 100%;
    word-wrap: break-word;
    z-index:1;
    position: relative;
    background: transparent;
}

.sz-sideways-text h2 span {
    writing-mode: vertical-lr;
    text-orientation: mixed;
    transform: rotate(180deg);
}

.sz-overlay-col {
    z-index: 9;
    position: relative;
}

@font-face {
    font-family: fonseca;
    font-weight: 700;
    src: url("fonts/Fonseca Bold.woff") format("woff"),
         url("fonts/Fonseca Bold.woff2") format("woff2");
}

@font-face {
    font-family: AstralSisters;
    font-weight: 700;
    src: url("fonts/Astral Sisters.woff") format("woff"),
    url("fonts/Astral Sisters.woff2") format("woff2");
}


/*******

Posts overview

*******/

.sz-advanced-posts .uabb-blog-posts-shadow{
    overflow: hidden;
}

.sz-posts .fl-post-image,
.sz-advanced-posts .uabb-post-wrapper .uabb-post-thumbnail a {
    aspect-ratio: 8/7;
    display: block;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% calc(100% - 50px));
}
.sz-posts .fl-post-image {
    position: relative;
}
.sz-posts .fl-post-image .label {
    display: block;
    padding: 15px 20px;
    font-size: 20px;
    background: #CF0A2C;
    text-transform: uppercase;
    position: absolute;
    top: 30px;
    font-weight: bold;
    letter-spacing: .15em;
    min-width: 225px;
    left: 0;
    z-index: 9;
    text-align: center;
    pointer-events: none;
}

.sz-posts-tips .fl-post-image .label {
    background: #623E33;
    min-width: 0;
}

.sz-posts .fl-post-image img,
.sz-advanced-posts .uabb-post-wrapper .uabb-post-thumbnail a img{
    transition: all .3s;
    object-fit: cover;
    aspect-ratio: 8/7;
    width: 100%;
}

.sz-posts .fl-post-image:hover img,
.sz-advanced-posts .uabb-post-wrapper .uabb-post-thumbnail a:hover img{
    transform: scale(1.1);
}

.sz-posts .fl-post-text,
.sz-advanced-posts .sz-post-content {
    padding: 10px 20px;
    color: #623e33;
    padding-top: 0;
    margin-top: -10px;

    & a {
        color: #623E33;
    }

    & p{
        margin: 0;
        font-size: 16px;
        font-family: "fonseca", sans-serif;
    }

    & h3 {
        color: #623e33;
    }
}

.sz-posts .fl-post-image .sz-alt-link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.sz-advanced-posts .uabb-blog-posts .uabb-post-wrapper {
    padding-top: 15px;
}

.sz-posts .fl-post-text {
    position: relative;

    & .sz-yt-icon {
        position: absolute;
        right: 20px;
        bottom: 12px;
        color: #CF0A2C;
        font-size: 40px;
        transition: opacity .2s;

        &:hover{
            opacity: .8;
        }
    }
}

@media screen and (max-width: 1200px) {
    .sz-cta-col .fl-col-content .sz-cta-col-btn {
        bottom: 10px;
    }
}

.sz-cut-image img{
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 70px));
    max-height: 700px;
    object-fit: cover;
}

.sz-cut-image.sm img {
    aspect-ratio: 1 / 1;
    object-position: center top;
}


body:not(.fl-builder-edit) .sz-col-slant {
    clip-path: polygon(0 0, 100% 150px, 100% 100%, 0% 100%);
}



body:not(.fl-builder-edit) .sz-col-slant.overlay {
    margin-bottom: -200px;
    position: relative;
    z-index: 9;
}

.sz-slant-col-img {
    position: relative;
    z-index: 10;
}

.sz-timeline .uabb-timeline-arrow {
    display: none;
}

.sz-timeline h3 {
    color: #dfb476;
    letter-spacing: .1em;
    font-size: 20px;
}

.sz-timeline .uabb-timeline-desc-content img {
    margin: 0;
    aspect-ratio: 4/3;
    object-fit: cover;
    width: 100%;
}

.sz-logo-slider .uabb-image-carousel-content .uabb-gallery-img {
    aspect-ratio: 1/1;
    object-fit: cover;
}

.sz-logo-slider .uabb-image-carousel-content {
    background: rgba(255,255,255,.5);
}

.sz-logo-slider .slick-prev i,
.sz-logo-slider .slick-next i {
    background: transparent;
    transition: all .2s;



    &:hover{
        background: rgba(255,255,255,.1);
    }
}

.sz-locaties-list a{
    color: white;
    transition: all .2s;

    &:hover {
        opacity: .7;
    }
}


.sz-hotspot-col .fl-col-content {
    display: flex;
}

.sz-hotspot {
    max-width: 50%;
}

.sz-locaties-list {
    max-width: 50%;
    margin-left: 80px;

    h2 {
        margin-bottom: 20px;
        font-size: 32px;
    }

    & ul {
        padding-left: 1.2em;

        & li {
            list-style-type: ">  ";
            margin-bottom: 5px;
        }
    }
}

.sz-posts .fl-post-grid {
    flex-flow: row wrap;
    display: flex;
}

.sz-posts .fl-post-grid-post {
    border: 0;
}

.sz-posts .sz-custom-post {
    color: #623e33;
    width: calc(33.3% - 20px);
    padding: 20px;
    border: 1px solid #623e33;
    margin:  0 10px 20px 10px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    font-weight: bold;
    letter-spacing: .15em;

    & h3 {
        color: #623e33;
        letter-spacing: .075em;
    }
}

.sz-posts-vacatures {
    & .fl-post-title {
        margin-bottom: 0;
    }

    & .fl-post-text {
        padding-bottom: 15px;
    }

    & p {
        color: #dfb476;
    }
}

.sz-posts-assortiment .fl-post-text{
    padding: 0 20px;
    position: absolute;
    z-index: 9;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    margin: 0;
    flex-flow: column;
    transition: all .3s;

    & h3 {
        margin: 0;

        & a {
            color: white !important;
            letter-spacing: 0.15em;
        }
    }

    & a.fl-button {
        background:transparent;
        color: #FFFFFF;
        border: 1px solid white;
        transition: all .2s;
        position: absolute;
        bottom: 80px;
        top: unset !important;

        &:hover {
            background: rgba(255,255,255,.2);
        }

    }
}


.sz-posts-assortiment .fl-post-image {
    aspect-ratio: 1/1;
    clip-path: none;
    background-color: #fff;
    transition: all .3s;

    & img {
        aspect-ratio: 1/1;
        mix-blend-mode: multiply;
    }

    &:hover .fl-post-text {
        opacity: 1 !important;
    }
}
.sz-posts-assortiment .fl-post-column:nth-of-type(1) .fl-post-image:hover,
.sz-posts-assortiment .fl-post-column:nth-of-type(5) .fl-post-image:hover {
    background-color: #8c7f7a;
}
.sz-posts-assortiment .fl-post-column:nth-of-type(2) .fl-post-image:hover,
.sz-posts-assortiment .fl-post-column:nth-of-type(6) .fl-post-image:hover {
    background-color:#825455;
}
.sz-posts-assortiment .fl-post-column:nth-of-type(3) .fl-post-image:hover,
.sz-posts-assortiment .fl-post-column:nth-of-type(4) .fl-post-image:hover {
    background-color:#7f7a55;
}
@media screen and (min-width: 993px){


    .sz-posts-assortiment .fl-post-text{
        opacity: 0;
    }
}

@media screen and (max-width: 992px) {
    .sz-posts-assortiment .fl-post-column:nth-of-type(1) .fl-post-image,
    .sz-posts-assortiment .fl-post-column:nth-of-type(5) .fl-post-image {
        background-color: #8c7f7a;
    }
    .sz-posts-assortiment .fl-post-column:nth-of-type(2) .fl-post-image,
    .sz-posts-assortiment .fl-post-column:nth-of-type(6) .fl-post-image {
        background-color:#825455;
    }
    .sz-posts-assortiment .fl-post-column:nth-of-type(3) .fl-post-image,
    .sz-posts-assortiment .fl-post-column:nth-of-type(4) .fl-post-image {
        background-color:#7f7a55;
    }
}

.fl-contact-form textarea,
.fl-contact-form input[type=text],
.fl-contact-form input[type=tel],
.fl-contact-form input[type=email] {
    border-radius: 0;
    border: 1px solid white;
    background: rgba(255,255,255,.2);
}

.fl-contact-form .fl-contact-error {
    display: none !important;
}

.adv-icon-link {
    transition: all .3s;

    &:hover {
        opacity: .6;
    }
}
@media screen and (min-width: 1201px ){
    .sz-image-text-col {
        padding-right: calc((100vw - var(--global-max-width)) / 2);
    }
    .sz-text-image-col {
        padding-left: calc((100vw - var(--global-max-width)) / 2);
    }
}


@media screen and (max-width: 1200px) {
    .sz-hotspot-col .fl-col-content{
        flex-flow: column;
    }
    .sz-locaties-list,
    .sz-hotspot {
        max-width: 100%;
    }
}

@media screen and (max-width: 992px) {
    .sz-posts .sz-custom-post {
        width: calc(50% - 20px);
    }

    .sz-locaties-list {
        margin: 0;
    }

    .sz-hotspot .uabb-image .uabb-photo-img {
        width: 35px !important;
    }

    body:not(.fl-builder-edit) .sz-col-slant {
        clip-path: polygon(0 0, 100% 60px, 100% 100%, 0% 100%);
    }
}

@media screen and (max-width: 768px) {
    .sz-posts .sz-custom-post {
        width: calc(100% - 20px);
    }
    .sz-posts .fl-post-text {
        & .sz-yt-icon {
            position: absolute;
            bottom: 5px;
        }
    }
}