/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

/* global */

:root {
    --h1: 68px;
    --h2: 50px;
    --h3: 32px;
    --h4: 20px;
    --h5: 14px;
    --pbody: 18px;
    --button: 12.8px;
    --wood: #b5823f;
    --beige: #d4b896;
}

h1, h2, h3, h4, h5, .button, .nf-form-content {
   font-family: "ofelia-text", sans-serif !important;
	font-weight: 400;
	font-style: normal;
}
h1 strong, .button.strong  {
	font-family: "ofelia-text", sans-serif;
	font-weight: 600;
	font-style: normal;
}
body p{
    font-size: var(--pbody);
}
#footer p {
    font-size: 14px;
}
.h1, h1 {
    font-size: var(--h1);  
}
.h2, h2 {
    font-size: var(--h2);
}
.h3, h3 {
    font-size: var(--h3);
}
.h4, h4 {
    font-size: var(--h4);
}
.h5, h5 {
    font-size: var(--h5);
}

.wood {
    color: var(--wood) !important;
}
.bg-wood {
    background-color: var(--wood) !important;
}
.beige {
    color: var(--beige) !important;
}
.bg-beige {
    background-color: var(--beige) !important;
}
.nomargin {
    margin-bottom: 0 !important;
}
.nopadding {
    padding-bottom: 0 !important;
}

/* header */
.header-nav-main.nav-left {
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
}
.header-main .nav-top-link {
    color: white;
    text-transform: none;
    padding: 0 22px;
    border-radius: 100px;
    line-height: 30px;
    height: 30px;    
}
.header-main .nav-top-link:hover,
.header-main .nav-top-link:focus {
    color: white;
    background-color: var(--wood);
}
.header-main .nav-top-link:focus {
    border-radius: 0px !important;
}
.nav > li > a {
	font-family: "ofelia-text", sans-serif !important;
	font-weight: 400;
	font-style: normal;
	letter-spacing: 2px;
}
#menu-item-22 > a {
  display: block !important;
  background: var(--wood) !important;      
}
#menu-item-989 a {
    background-color: var(--wood);
}
.nav-top-link:visited, 
.header-main .sub-menu a:hover, 
.header-main .sub-menu .current-menu-item a  {
    color: white !important;
}
.header-main .sub-menu {
    background-color: var(--wood);
    min-width: 0;
    padding: 0;
    padding-right: 30px;
    border: none;
}
.header-main .sub-menu li {
    width: auto;       
}
.header-main .sub-menu a {
    display: block;    
    white-space: nowrap; 
    padding: 10px 15px;
    font-size: var(--h5);
    color: black;
}
.header-main li.current-menu-ancestor > a.nav-top-link,
.header-main li.current-page-ancestor > a.nav-top-link {
    color: white !important;
    background-color: var(--wood) !important;
}

/* form */
.nf-form-content textarea {
    height: 100px !important;
}
.mc4wp-form-fields input,
.nf-form-content input,
.nf-form-content textarea {
    background-color: transparent !important;
    border: none;
    border-bottom: 1px solid white !important;
    box-shadow: none;
    color: white !important;
    width: 75% !important;
}
.mc4wp-form-fields input::placeholder,
.nf-form-content input::placeholder,
.nf-form-content textarea::placeholder {
    color: white !important;
}
.mc4wp-form-fields input:hover,
.nf-form-content input:hover,
.nf-form-content textarea:hover {
    border: none;
    outline: none;
    box-shadow: none;
}
.mc4wp-form-fields input:focus,
.nf-form-content input:focus,
.nf-form-content textarea:focus {
    border: none;
    outline: none;
    box-shadow: none;
}
.mc4wp-form-fields input[type="submit"],
.nf-form-content input[type="submit"] {
    background-color: white !important;
    color: black !important;
    border-radius: 100px;
    width: 50% !important;
    text-transform: none !important;
}
#nf-field-5 {
    border: 1px solid black !important;
    width: 100% !important;
}
#nf-field-5::placeholder {
    color: black !important;
    font-size: 14px;
}
#nf-field-6 {
    border-radius: 0px !important;
    border: 1px solid black !important;
    border-left: none !important;
    margin-left: -15px !important;
}
.g-recaptcha {
    padding-left: 90px !important;
}

/* contact */ 
.contact .nf-form-content .one-half {
    margin-left: 0 !important;
     & .nf-element {
        width: 100% !important;
    }
}
.contact .nf-form-content .firstname-container {
    padding-left: 85px;
    padding-right: 25px;
    width: 52% !important;
}
.contact .nf-form-content .lastname-container {
    width: 35.5% !important;
}
.contact .follow-icons a {
    font-size: 40px;
}
.contact a {
    color: var(--wood) !important;
}
.contact h4 {
    font-size: 24px;
}


/* icons */
.follow-icons a {
    color: black !important;
    font-size: 20px;
    border-color: transparent !important;
}
.icon-shopping-bag {
    color: var(--wood);
}


/* gradient */

.half-brown {
  background: linear-gradient(to bottom, rgb(212, 184, 150) 0%, rgb(212, 184, 150) 15%, #ffffff 15%, #ffffff 100%);
}
.gradient::before {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 200px;
    z-index: 1;
}
.top::before {
    top: 0;
    background: linear-gradient(to bottom, #ffffff 0%, rgba(255,255,255,0) 100%);
}
.bottom::before {
    bottom: 0;
    background: linear-gradient(to top, #ffffff 0%, rgba(255,255,255,0) 100%);
}


/* button */
.button {
    font-size: var(--button);
}
.button.brown {
    width: 200px;
}
.flickity-button-icon {
    background-color: black;
    color: black;
}
.flickity-button {
    width: 50px;
}
.flickity-button .flickity-button-icon * {
  fill: var(--wood) !important;
}


/* portfolio */
.projecten-container p, .projecten-container a {
    color: white !important;
}
.projecten-container, .nieuws-container {
    width: 75%;
}
.bericht-box {
    max-width: 450px; 
    margin: 0 auto; 
}
.ux-box img,
.bericht-box img {
    object-position: top center;
}
.ux-box .box-image,
.bericht-box .box-image {
    background-color: #f4f4f4; 
}

/* sticky */
.sticky-container {
    width: 100%; 
    margin: 0; 
    padding: 20px;

    background-color: rgba(233, 233, 233, 0.663);
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; 
    align-items: flex-end;
    text-align: left; 
    box-sizing: border-box;
}
.sticky-container p {
    margin: 0;
    padding-right: 50px;
    text-align: left; 
    word-wrap: break-word;
}
.slider {
    margin-bottom: -30px;
    margin-top: -30px;
}


/* Single bericht */
.section.bericht .row {
    max-width: 1330px; 
    margin: 0 auto; 
    padding: 2rem 0 2rem 0;
}
.social-icons.share-icons i:before {
    font-size: 25px;
    color: var(--wood);
}
.post-navigation {
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    gap: 1rem; 
    margin-top: 2rem;
}
.post-slider {
    margin-top: 2.5rem;
}
.post-slider-title {
    font-size: 22px;
    margin-bottom: 1rem;
}
.post-slider-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}
.post-slider-buttons {
    display: flex;
    gap: 0.5rem;
}
.post-slider-btn {
    width: 40px;
    height: 40px;
    border: 1px solid #d9d9d9;
    background: #fff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.post-slider-btn:hover {
    background: #f5f5f5;
    border-color: #c9c9c9;
}
.post-slider-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    scrollbar-width: none;
}
.post-slider-viewport::-webkit-scrollbar {
    display: none;
}
.post-slider-track {
    display: flex;
    gap: 1.5rem;
    padding-bottom: 0.25rem;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
}
.post-slide {
    flex: 0 0 calc((100% - 4 * 1.5rem) / 5);
    max-width: 280px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    scroll-snap-align: start;
    text-decoration: none;
    color: inherit;
}
.post-slide-thumb {
    aspect-ratio: 4 / 3;
    background: #f4f4f4;
    overflow: hidden;
    border-radius: 8px;
}
.post-slide-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}
.post-slide-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #e9e9e9, #dcdcdc);
}
.post-slide-title {
    font-size: 16px;
    line-height: 1.3;
}
.entry-thumbnail {
    margin-bottom: 1.5rem; 
    position: sticky; 
    top: 8rem;
}
.entry-meta > * {
    color: var(--wood);
}
.entry-content {
    border-bottom: 2px solid black; 
}



@media screen and (max-width: 850px) {
    :root {
        --h1: 50px;
        --h2: 30px;
        --h3: 22px;
        --h4: 18px;
    }
    .sticky-container {
        justify-content: center; 
    }
    .page-content-footer.medium {
        height: 250px !important;
        padding: 0 !important;
        padding-left: 20px !important;
    }
    .page-content-footer.small {
        height: 100px !important;
        padding: 0 !important;
        padding-left: 20px !important;
    }
    .slider {
        margin-bottom: 0 !important;
    }
    .nf-form-content input::placeholder, .nf-form-content input[type="submit"] {
        font-size: 14px !important;
    }
    .footer .nf-form-content {
        padding: 0 !important;
    }
    .footer .nf-form-content input {
        width: 100% !important;
    }
    .footer .nf-form-content input::placeholder {
        font-size: 10px !important;
    }
    .footer .nf-form-content input[type="submit"] {
        font-size: 16px !important;
    }
    .form-col h3 {
        padding-left: 20px;
        padding-top: 10px;
    }
    .page-content-footer .img {
        height: auto;
        width: 90% !important;
        padding-top: 30px;
    }
    .section.bericht {
        padding: 0 !important;
        & .row {
            padding: 1rem !important;
        }
    }
    .post-slide {
        flex: 0 0 calc((100% - 1 * 1.5rem) / 2);
        max-width: none;
    }
    .contact .nf-form-content .nf-field-container:not(.submit-container) {
        position: relative !important;
        left: 10% !important;
    }
    .contact .submit-container {
        position: relative !important;
        left: 20% !important;
    }
    .g-recaptcha {
        margin-left: -30px !important;
        padding: 0 !important;
    }
}



@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/

:root {
        --h1: 34px;
        --h2: 26px;
        --h3: 22px;
        --h4: 16px;
        --pbody: 14px;
        --button: 12px;
    }
    .sticky-section {
        height: 400px !important;
    }
    .sticky-container .col-inner {
                margin: 0px !important;

        & .text {
        width: 80vw !important;
    }
    }

    .half-brown {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        flex-wrap: wrap;
        background: none;
    }
    .half-brown img {
        max-width: 80%;
        height: auto;
        margin-left: auto;
    }
    .half-brown .image-cover {
        padding: 130px !important;
    }
    .half-brown .qna .col-inner {
        margin-bottom: -40px !important;
    }
    .nieuws-container {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        position: relative;
        min-height: 300px;
    }
    #nf-field-5 p::placeholder {
        padding: 0 !important;
        margin: 0 !important;
        font-size: 8px !important;
    }
    .mc4wp-form-fields,
    .nf-form-content {
        padding-top: 20px;
        padding-bottom: 5px;
        padding-left: 20px;
    }
    .page-content.top.gradient .col-inner {
        width: 90%;
        padding-bottom: 100px !important;
        margin-top: -100px !important;
    }
    .page-content.bottom.gradient .col-inner {
        padding-left: 20px !important;
        padding-top: 200px !important;
        margin-bottom: -100px !important;
    }
    .contact .nf-form-content .lastname-container,
    .contact .nf-form-content .firstname-container {
        width: 75% !important;
        padding: 0;
    }
}