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

:root {
    --bs-primary: #E0A724;
    --bs-primary-rgb: 224, 167, 36;
    --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-border-radius: 0rem;
    --bs-dark: #45393B;
    --bs-dark-rgb: 69, 57, 59;
    --bs-light: #E3DAD1;
    --bs-light-rgb: 227, 218, 209;
}

body{
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden!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;
}

/* COLORS */

.color-inherit{
    color: inherit;
}

/* IMAGES */

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

/* DIVIDERS */

.divider{
    height: 6px;
    width: 48px;
    border-radius: 3px;
}

.divider-small{
    height: 4px;
    width: 32px;
    border-radius: 2px;
}
/* BUTTONS */

.btn{
    border-radius: .25rem;
}

.btn:hover {
    transform: translateY(-2px)!important;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: #fff;
    --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: #fff;
    --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: #fff;
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}

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

.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --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-primary);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bs-primary);
    --bs-gradient: none;
}

.btn-outline-dark {
    --bs-btn-color: var(--bs-dark);
    --bs-btn-border-color: var(--bs-dark);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-dark);
    --bs-btn-hover-border-color: var(--bs-dark);
    --bs-btn-focus-shadow-rgb: var(--bs-dark-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-dark);
    --bs-btn-active-border-color: var(--bs-dark);
    --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: transparent;
    --bs-btn-disabled-border-color: var(--bs-dark);
    --bs-gradient: none;
}

.wp-block-button__link {
    font-weight: 700;
    color: #fff;
    background-color: var(--bs-primary);
    border-radius: .25rem;
    box-shadow: none;
    text-decoration: none;
    padding: 1rem 1.5rem;
    font-size: 1rem;
}

.wp-block-button__link:hover{
    transform: translateY(-2px)!important;    
}

/* FORMS */

.gform-theme {
    --gf-color-primary: var(--bs-success)!important;
}
.gform-theme--api, .gform-theme--foundation {
    --gf-form-gap-x: 1.5rem!important;
    --gf-form-gap-y: 1.5rem!important;
}    

/* TOPBAR */

#topbar p{
    font-size: .9rem;
}

/* NAVBAR */

.nav-link, .dropdown-item, .navbar .btn{
    font-size: .9rem;
}

.navbar-nav>.nav-item{
    border-bottom: 2px solid transparent;
}    
.navbar-nav>.nav-item.active, .navbar-nav>.nav-item:hover{
    border-bottom: 2px solid var(--bs-primary)!important;    
}

/* ATTENTION SMALL */

.attention-small{
    height: 50vh;
    max-height: 500px;
    min-height: 320px;
}

.attention-content .main{
    border-radius: 1rem;
    margin-top: -8rem;
}

/* ATTENTION HOME */

.attention-home .tile{
    height: calc(((100vh - 300px - 100px) / 2) - .75rem);  
    min-height: 320px;
}

@media (min-width: 992px) {

.attention-home .tile{
    height: calc((100vh - 300px - 100px) / 1);  
    display: block;
}
.attention-home .tile-small{
    height: calc(((100vh - 300px - 100px) / 2) - .75rem);    
}

}

.attention-home .tile:hover {
    transform: translateY(-2px)!important;
} 

.attention-home .tile, .attention-home .tile .main{
    border-radius: .25rem;    
}

.attention-home .tile:hover .main{
    background: #FFF;
}

.attention-home .tile:hover .main h2, .attention-home .tile:hover .main h3{
    color: var(--bs-dark)!important;
}

/* CARDS */

.card{
    border-radius: .25rem;
    overflow: hidden!important;
}

.card:hover {
    transform: translateY(-2px)!important;
}    

.col.col-index:hover .btn-outline-primary{
    background-color: var(--bs-primary);
    color: #FFF!important;
}

.col.col-index h3, .col.col-discounts h3, .col.col-catalog h3{
    font-size: 1.5rem;   
    min-height: 57px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden; 
}

.col.col-index p, .col.col-brands p{
    font-size: .9rem;
    line-height: 1.5rem;    
    min-height: 72px;    
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;     
}

.col.col-index .btn, .col.col-brands .btn, .col.col-discounts .btn, .col.col-catalog .btn, .col.col-products .btn{
    font-size: .9rem;
}

.col.col-projects p, .col.col-brands p{
    font-size: .9rem;
}

.col.col-brands img{
    height: 48px;
    width: auto;
    margin-bottom: 1rem;
}

.col.col-discounts a:hover, .col.col-products a:hover{
    box-shadow: var(--bs-box-shadow-lg) !important;    
}

.col.col-products h3 {
    font-size: 1.5rem;
    min-height: 28px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.col.col-logos img{
    filter: grayscale();
    height: 48px;
    width: auto!important;
}

.col.col-logos:hover{
    box-shadow: var(--bs-box-shadow-sm) !important;      
}

.col.col-logos:hover img{
    filter: grayscale(0);
}

/* CONTENT */

.single.single-default .wp-block-image.size-full, .single.single-default p, .single.single-default .wp-block-quote{
    margin-bottom: 2.5rem;
}

.single.single-default img{
    border-radius: .25rem;
}

.single.single-default h2{
        font-size: 2rem;
        font-weight: 700;
        color: var(--bs-dark);    
}

.single.single-default p{
    font-size: 1rem;
    line-height: 1.75rem;    
}

.single.single-default .wp-block-quote{
    background: var(--bs-light);
    border-radius: .25rem;
    padding: 1.5rem;   
}

.single.single-default .wp-block-quote>p{
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-style: italic;
    font-size: 1.3rem;
    line-height: 2.5rem;
    color: var(--bs-dark);
    margin-bottom: 0px;
}

.single.single-default .wp-block-image.size-full img{
    width: 100%;
    height: auto;
    border-radius: .25rem;
}

@media (min-width: 992px) {
    .single.single-default .main h1 {
        font-size: 4rem;
    }

    .single.single-default .wp-block-quote{
    padding: 2rem;    
    }

    .single.single-default .wp-block-quote>p{
    font-size: 2rem;
    line-height: 3.2rem;
    }
}

.main h3, .main .h3{
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--bs-dark);
    position: relative;
    margin-bottom: .5rem;    
}

/* CONTENT USPS */

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

ul.usps>li {
    font-size: 1rem;
    color: var(--bs-dark);
    position: relative;
    display: block;
    padding: 3px 0px;
}

ul.usps>li::before{
    font-family: "Bootstrap-icons";
    color: #3c3;
    content: "\F26B";
    left: 0;
    top: 4px;
    margin-right: 10px;
    position: relative;
}

/* PRODUCT */

.product-introduction .brand-label{
    font-size: .9rem;
    border-radius: 20px;
}

/* FOOTER */

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

.footer ul>li>a{
    font-size: .9rem;
    text-decoration: none;
    color: #FFF;
    opacity: .7;
    display: block;
    padding: .25rem 0px;
}

.footer ul>li>a:hover, .credits ul>li>a:hover{
    opacity: 1;
}

/* SIDEBAR */

.sidebar-menu{
    border-top: 6px solid rgba(var(--bs-primary-rgb), 1);
    margin-top: -4rem;
    z-index: 1019;
    position: relative;    
}
.sidebar-menu ul{
    list-style: none;
    margin: 0px;
    padding: 0px;
}

.sidebar-menu ul>li>a{
    color: var(--bs-dark);
    text-decoration: none;
    border-bottom: 1px solid #EFEFEF;
    display: block;
    padding: 16px 12px;
}

/* CREDITS */

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

.credits ul>li>a{
    font-size: .9rem;
    text-decoration: none;
    color: #FFF;
    opacity: .5;
    display: block;
    padding: .25rem 0px;
}

@media (min-width: 992px) {

    .credits ul>li{
        display: inline-block;
    }

    .credits ul>li>a{
        padding: 0rem .5rem;
    }

}   

#sidebar{
    top: 160px;
    z-index: 1000;
}

#sidebar, .single-projects img{
    border-radius: .25rem;
}