/*
Theme Name: Riethorst
Theme URI: https://riethorst.co
Version: 1.0
License: Auteursrecht ligt bij Bob Riethorst Beheer BV
Text Domain: riethorst
*/

:root {
    --bs-font-sans-serif: "Roboto", serif;
    --bs-primary: #3FB657;
    --bs-primary-rgb: 63, 182, 87;
    --bs-link-color: var(--bs-primary);
    --bs-link-color-rgb: var(--bs-primary-rgb);
    --bs-link-hover-color: var(--bs-primary);
    --bs-link-hover-color-rgb: var(--bs-primary-rgb);
    --bs-dark: #056289;
    --bs-dark-rgb: 5,98,137;  
    --bs-border-radius: 0rem;
    --fwdis-font-heading: "Montserrat", serif;;
    --bs-light: #999;
    --bs-light-rgb: 153, 153, 153;
    --bs-secondary: #F2F0EB;
    --bs-secondary-rgb: 242, 240, 235;
    --bs-tertiary: #FBF9F6;
    --bs-tertiary-rgb: 251 249 246;

}

body{
    -webkit-font-smoothing: antialiased;
}

.bg-tertiary{
    background: var(--bs-tertiary)!important;
}

.bg-white_light{
    background: linear-gradient(1turn, #e6f9ff, var(--bs-white));
}

.bg-primary_white{
    background: rgb(63,182,87);
    background: linear-gradient(180deg, rgba(63,182,87,0.7) 0%, rgba(63,182,87,0) 100%);    
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, button, .btn, .button, .badge, .alert, .nav-item, .nav-link{
    font-family: var(--fwdis-font-heading);
}

h1, .h1{
    font-size: 2rem;
    font-weight: 700;    
}

h6, .h6{
    font-size: .9rem;
}

.lead {
    font-size: 1.5rem;
    font-weight: 500;
}

@media (min-width: 992px) {

    h1, .h1{
        font-size: 4rem;
    }

}

/* Je bestaande styles */
.fw-bold {
    font-weight: 800 !important;
}

.bg-cover {
    background-size: cover !important;
    background-position: 50% 50% !important;
}

.alert {
    font-size: .95rem;
    font-weight: 800;
}

.navbar .navbar-brand > img {
    height: 40px;
    width: auto;
}

.navbar .nav-item{
    font-weight: 600;
    border-bottom: 2px solid transparent;
}

.navbar .nav-item:hover{
    border-bottom: 2px solid var(--bs-primary);
}

.navbar .nav-link.active{
    color: var(--bs-primary);
}

.navbar-toggler{
    background: var(--bs-white);    
}

.dropdown-item{
    color: var(--bs-white);    
}

.dropdown-menu .nav-item:hover{
    background: var(--bs-dark);
    border-bottom: 2px solid transparent;
}

.dropdown-item:focus, .dropdown-item:hover {
    color: var(-bs-white)!important;
    background-color: transparent;
}

/* FILTER */

.filter ul{
    list-style: none;
    margin: 0 auto;
    padding: 0px;
}

.filter ul{
    text-align: center;
}

.filter ul>li{
    display: block;
    margin: .5rem 0rem;
}

@media (min-width: 992px) {

    .filter ul>li{
    display: inline-block;
    margin: 0px .5rem;
}

}

.filter ul>li>a{
    background: var(--bs-black);
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 2rem;
    color: var(--bs-white);
    padding: 1rem 1.5rem;
    margin: 0px;
    display: block;
}

.filters ul>li:hover>a{
    background: var(--bs-light);
    color: var(--bs-dark);
}

.filter ul>li.current-menu-item>a{
    background: var(--bs-primary);    
    color: var(--bs-white);
}

/* BUTTONS */

.btn{
    border-radius: 2rem;    
}

.btn-primary {
    --bs-btn-color: var(--bs-dark);
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: var(--bs-dark);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: var(--bs-dark);
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--bs-dark);
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}

.gform-button.button{
    background: var(--bs-primary)!important;
    font-family: var(--fwdis-font-heading)!important;
    font-size: var(--bs-btn-font-size)!important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;        
}

.ginput_container>input{
    font-size: var(--bs-btn-font-size)!important;    
    height: 50px!important;
}

.btn,a,body,button,.btn,div,h1,h2,h3,h4,h5,h6,html,img,li,ol,p,ul {
    transition: all .2s ease-in-out;
}  

#preview.card:hover, .btn:hover{
    transform: translateY(-3px)!important;    
}

/* ACCORDION */

.accordion {
    --bs-accordion-color: var(--bs-body-color);
    --bs-accordion-bg: var(--bs-secondary);
    --bs-accordion-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
    --bs-accordion-border-color: var(--bs-border-color);
    --bs-accordion-border-width: var(--bs-border-width);
    --bs-accordion-border-radius: var(--bs-border-radius);
    --bs-accordion-inner-border-radius: calc(var(--bs-border-radius) -(var(--bs-border-width)));
    --bs-accordion-btn-padding-x: 1.25rem;
    --bs-accordion-btn-padding-y: 1rem;
    --bs-accordion-btn-color: var(--bs-dark);
    --bs-accordion-btn-bg: var(--bs-secondary);
    --bs-accordion-btn-icon: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e);
    --bs-accordion-btn-icon-width: 1.25rem;
    --bs-accordion-btn-icon-transform: rotate(-180deg);
    --bs-accordion-btn-icon-transition: transform 0.2s ease-in-out;
    --bs-accordion-btn-icon: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e);
    --bs-accordion-btn-focus-border-color: var(--bs-dark);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-dark-rgb), 0.25);
    --bs-accordion-body-padding-x: 1.25rem;
    --bs-accordion-body-padding-y: 1rem;
    --bs-accordion-active-color: var(--bs-dark);
    --bs-accordion-active-bg: var(--bs-secondary);
}

.accordion-button{
    font-family: var(--fwdis-font-heading);
    font-size: 1.25rem;
    font-weight: 700;   
    color: var(--bs-dark); 
}

.accordion-body{
    font-size: 1rem;
    line-height: 1.8rem;
    margin-bottom: 2.5rem;
    color: var(--bs-dark);    
}

/* ARCHIVE */

#preview.card-post{
    border-radius: 1rem;
    overflow: hidden;    
}

#preview.card-expertise{
    border-radius: 1rem;
    overflow: hidden;      
}

#preview.card-project img{
    border-radius: 1rem;
}

#preview.card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 2rem;
    min-height: 64px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#preview.card p {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5rem;
    min-height: 96px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.extra-card{
    border: 2px dashed var(--bs-light);
    min-height: 300px;
}

.navigation.pagination {
    width: 100%;
    display: block
}

.navigation.pagination a,.navigation.pagination span {
    text-decoration: none;
    border: 1px solid var(--bs-primary);
    color: var(--bs-primary);
    margin: 0 4px;
    padding: 16px 24px
}

.page-numbers.current{
    background: var(--bs-primary);
    border: 1px solid var(--bs-primary);
    color: var(--bs-dark)!important;
}

/* SINGLE */

.single.single-default h1{
    font-size: 2.25rem;
}

@media (min-width: 992px) {

.single.single-default h1{
    font-size: 4rem;
}

}

.single.single-default h2, .single.single-default .h2, .single.single-default h3, .single.single-default .h3, .single.single-default h4, .single.single-default .h4, .single.single-default h5, .single.single-default .h5{
    font-weight: 700;
    color: var(--bs-dark);
}

.single.single-default p{
    font-size: 1.2rem;
    line-height: 2rem;    
    margin-bottom: 2.5rem;
    color: var(--bs-light);
}

.single.single-default ul, .single.single-default ol{
    font-size: 1.2rem;
    color: var(--bs-light);    
}

.single.single-default ul strong, .single.single-default ol strong, .single.single-default strong{
    color: var(--bs-dark);
}

.single.single-default .wp-block-embed, .single.single-default .wp-block-image, .single.single-default .wp-block-list{
    margin-bottom: 2.5rem;
}

.single.single-default .wp-block-image img{
    min-width: 100%;
}

.single.single-dark h2, .single.single-dark .h2, .single.single-dark h3, .single.single-dark .h3, .single.single-dark h4, .single.single-dark .h4, .single.single-dark h5, .single.single-dark .h5, .single.single-dark ul strong, .single.single-dark ol strong, .single.single-dark strong{
    color: var(--bs-dark)!important;
}



.post-tags ul{
    list-style: none;
    margin: 0px;
    padding: 0px;
}

.post-tags ul>li{
    display: block;
    margin-bottom: .5rem;
}

.post-tags ul>li>a{
    background-color: var(--bs-primary);
    font-family: var(--fwdis-font-heading);
    font-size: .9rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--bs-dark);
    display: block;
    padding: .5rem .75rem;
}

.text-label{
    background: var(--bs-secondary);
    border-radius: 30px;
    border: 1px solid #CCC;
    font-size: .9rem!important;
    display: inline-block;
    padding: 10px 16px;
}

.project-label{
    background: #326062;
    border-radius: 30px;
    border: 1px solid transparent;
    font-size: .7rem!important;
    display: inline-block;
    color: #ccd7d8!important;
    padding: 6px 12px;
}

@media (min-width: 992px) {

    .post-tags ul>li{
        display: inline-block;
        margin: 0rem .5rem;
    }

    .post-tags ul>li:first-of-type{
        margin: 0rem .5rem 0rem 0rem;
    }

    .post-tags ul>li>a{
        background-color: var(--bs-primary);
        font-family: var(--fwdis-font-heading);
        font-size: .9rem;
        font-weight: 700;
        text-decoration: none;
        color: var(--bs-dark);
        display: block;
        padding: .5rem .75rem;
    }

}

.single.single-default .sidebar p, .single.single-default .sidebar ul, .single.single-default .sidebar ol, .single.single-default .sidebar .btn{
    font-size: 1rem;
    line-height: 1.8rem;
}

.single.single-default .sidebar ul>li, .single.single-default .sidebar ol>li{
    color: var(--bs-light);
}

.single.single-dark .sidebar h3{
    color: var(--bs-dark)!important;
}

/* LANDING */

.landing{
    height: calc(100vh - 246px);
    min-height: 600px;
}

/* HERO */

.hero.hero-big{
    height: 70vh;
    min-height: 400px;
    max-height: 600px;
}

.hero.hero-huge{
    height: calc(100vh - 156px);
    min-height: 500px;
}

.hero.hero-big .bg-overlay{
    background: rgb(0,0,0);
    background: linear-gradient(350deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 69%); 
}

.hero.hero-huge .bg-overlay{
    background: rgb(0,0,0);
    background: radial-gradient(circle, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.7) 69%);    
}

#attention.attention-home{
    height: calc(100vh - 146px);
}

#attention.attention-home .bg-cover{
    border-bottom-right-radius: 16px;
    overflow: hidden;
}

#attention.attention-home .bg-overlay{
    background: rgb(17,17,17);
    background: linear-gradient(90deg, rgba(17,17,17,0.8) 0%, rgba(17,17,17,0.4) 100%);    
}

@media (max-width: 992px) {

    #attention.attention-home p.lead{
        font-size: 1rem;
        line-height: 1.8rem;
    }

    #attention.attention-home .btn{
        min-width: 240px;
        max-width: 100%;
    }

}

/* PRODUCTS - TOOLS */

.tools-list>li>span{
    border-radius: 36px;
    border: 2px solid var(--bs-white);
    width: 48px;
    height: 48px;
    display: block;
}

@media (min-width: 992px) {

    .tools-list>li>span{
        width: 72px;
        height: 72px;

    }

}    

.tools-list>li:hover>span{
    background: var(--bs-primary);
}

.tools-list>li>span>img {
    width: 50%;
    margin: 0 auto;
}

/* PROJECTS */

.single-project img{
    width: 100%;
}

@media (min-width: 992px) {
.single-project .project-sidebar.sticky-lg-top{
    top: 90px;
}

}

/* GRAVITY FORMS */


.gfield_required{
    display: none!important;
}

/* FOOTER */

.footer .newsletter-block .gform-button.button{
    background-color: var(--bs-dark) !important;
}    

.footer ul{
    list-style: none;
    margin: 0px;
    padding: 0px    
}

.footer ul>li>a{
    text-decoration: none;
    display: block;
    color: var(--bs-white);
    padding: .125rem 0rem;
}

.footer ul>li:hover>a{
    color: var(--bs-primary);
}

.footer .address ul>li>a{
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--bs-white);    
}

@media (min-width: 992px) {

    .offcanvas{
        --bs-offcanvas-width: 40vw;    
    }

}



/* PLUGIN - FILTER EVERYTHING */

.widget-title.wpc-filter-title, .wpc-edit-filter-set{
    display: none;
}

.wpc-filters-widget-select{
    padding: 1rem 1.5rem;
    border-radius: 2rem;
}