/*

Theme Name: KC Optimist
Template: kadence
Version: 1.0.1
Text Domain: KC Optimist
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
*/

.skiptranslate{
    display:none;
}
.skiptranslate.goog-te-gadget{
    display:block;
}
html.translated-ltr .skiptranslate{
    display:block;
}


:root{
    --blauw: #46bbca;
    --roze: #e7497f;
    --groen: #86c8b6;
    --blauwgroen: #bea7cc;
    --geel: #fcd190;
    --grijs: #718096;
}

/*menu */
.sub-menu li.current-menu-item a, .sub-menu li.current-menu-item{
    font-weight:700 !important;
}

.site-header-main-section-right .site-header-item{align-items: flex-start;}

.quickmenu ul.wp-block-post-template-is-layout-grid li h2{
    padding:6.4px 16px;
    border-radius: 23px;

}
.quickmenu ul.wp-block-post-template-is-layout-grid li h2 a{
        justify-content: flex-start !important;
}
.wp-block-button{
    min-width:200px;
}
.wp-block-button a{
    align-items: center;
}

.kb-button.kt-button.button, .wp-element-button{
    text-align: left;
    display: flex !important;
    justify-content: space-between;
}
.kb-button.kt-button.button:after, .wp-element-button:after, .wp-block-query h2.has-link-color:after{
    content:''; 
    background-image:url('images/Next.svg');
    background-repeat: no-repeat;
    background-size: contain;
    width:22px;
    height:22px;
    display: block;
}

.klasbord-nieuws-item{
    border:0px;
    z-index:1;
}
.klasbord-nieuws-item .nieuws-item-afbeelding{ 
    position: relative;
    z-index:2;
    cursor: zoom-in;
}
.klasbord-nieuws-item .nieuws-item-tekst{ 
    position: relative;
    z-index:1;
}
.klasbord-nieuws .klasbord-nieuws-item .nieuws-item-afbeelding img{
    -webkit-mask-image: url(images/nieuws-mask.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: bottom;
    width:100%;
    height:200px;
}
.klasbord-nieuws .carousel .glightbox{
    height:200px;   
    
}
.klasbord-nieuws .klasbord-nieuws-item .nieuws-item-list{
    height:calc( 100% - 135px ); 
}
.klasbord-nieuws .klasbord-nieuws-item .nieuws-item-tekst{
    -webkit-mask-image: url(images/nieuws-content-mask.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: cover;
    -webkit-mask-position: bottom;
    height:100%;
    min-height: 340px;
    width:100%;
    background-color:#fff;
    padding:75px 30px 30px;
    margin-top:-50px;
}
.klasbord-nieuws h3{
    color:#E7497F
}
.klasbord-nieuws .flickity-button {
    background-color:#86C8B6;
}
.klasbord-nieuws .flickity-button:after{
    content:'';
    background-image:url('images/Next.svg');
    background-repeat:no-repeat;
    background-size:contain;
    width:20px;
    height:22px;
    position: absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
}
.klasbord-nieuws .flickity-button.previous:after{
    transform: rotate(180deg);
}
.klasbord-nieuws .flickity-button svg{
    display:none;
}

footer{
    background-image:url('images/footer-background.svg');
    background-size:cover;
}
footer .kb-button.kt-button.button:after{
    background-image:url('images/next-pink.svg');
}
footer .kb-button.kt-button.button:hover:after{
    background-image:url('images/Next.svg');
}

.instagram-gallery-list .instagram-gallery-item__wrap{
    border-radius:50px;
}

.header-navigation .header-menu-container ul ul li.menu-item > a {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

.header-navigation .header-menu-container ul ul{
    border-radius:16px;
    padding: 20px 10px ;
}
.header-navigation .header-menu-container ul ul li:hover a{
    font-weight:bold !important;
}






.vakantierooster p{
    margin-bottom:0 !important;
}
.vakantierooster p + p{
    margin-bottom: 35px !important;
}
.vakantierooster .wp-block-kadence-spacer + p{
    margin-top:5px !important;
}

.languagetitle, #block-24{
    margin-bottom:0;
}
.skiptranslate.goog-te-gadget{
    widtH:200px;
}
#google_translate_element span{
    display:none;
}
#google_translate_element div{
    color:#F5E4EA;
}
.goog-te-gadget .goog-te-combo{
    color:#e7497f;
    border-radius:23px;
    padding: 0.4em 1em;
    font-size: 16px;
    font-family: Ubuntu, sans-serif;
    width:200px;
    font-weight:400;
}

#klasbord-calendar.calendar{
    background-color:#46bbca;
}
#klasbord-calendar.calendar .day-header{
    background-color:#fcd190;
    min-height:inherit
}
#klasbord-calendar.calendar .event-title{
    text-align: center;
}
#klasbord-calendar.calendar .event-title:nth-of-type(2){
    color:#E7497F;
}
#klasbord-calendar.calendar .event-title:nth-of-type(3){
    color:#BEA7CC;
}
#klasbord-calendar.calendar .event-title:nth-of-type(4){
    color:#86C8B6;
}
.calendar-header a{
    background-color:#E7497F;
    color:#fff;
    font-family: Ubuntu, sans-serif;
    position: relative;
    border-radius:23px;
    font-weight: 400;
    font-size:16px;
}
.calendar-header a:after{
    content:'';
    background-image:url('images/Next.svg');
    background-repeat:no-repeat;
    background-size:contain;
    width:20px;
    height:22px;
    position: absolute;
    top:0;
    bottom:0;
    margin: auto 0;
}
.calendar-header a.next-month{
    padding-right:50px;
}
.calendar-header a.next-month:after{
    right:5px;
}
.calendar-header a.prev-month{
    padding-left:50px;
}
.calendar-header a.prev-month:after{
    transform: rotate(180deg);
    left:5px;
}
.calendar-header a:hover{
    background-color:#86C8B6;
    color:#fff;
}


/* download button */
.BestandDownload{
    border-radius: 23px !important;
    margin-bottom:0;
 transition: 0.3s !important;
 
}
.BestandDownload a.wp-element-button, .BestandDownload a.wp-element-button:visited{
    padding-left:0 !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
    margin-left:0;
    transition: 0.3s !important;
    background-color:#E7497F;
    border-radius:23px;
    padding:7px 16px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width:180px;
    
}
.BestandDownload  a:first-of-type {
    display:none;
}

/* contact header button */
.headercontact{
    background-image:url('images/Contact.svg');
    background-repeat:no-repeat;
    background-size:contain;
    width:35px;
    height:32px;
    display: block;
    margin-top:1px;
}

/* archives */
body.archive .wp-site-blocks .post-thumbnail .post-thumbnail-inner, .loop-entry .post-thumbnail-inner {
    -webkit-mask-image: url(images/nieuws-mask.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: bottom;
    width: 100%;
    height: 200px;
    z-index:2;
}
body.archive.content-style-unboxed .entry-content-wrap, .loop-entry .entry-content-wrap{
    min-height:400px;

    width: 100%;
    padding: 75px 30px 30px !important;
    margin-top: -75px;
    z-index:1;
}

.article-post-thumbnail{
    mask-image: url(https://kcdeoptimist.nl/wp-content/uploads/2025/05/header-mask.svg);
    mask-size:contain;
    mask-repeat: no-repeat ;
    margin-top: -100px;
    width:946px;
    height:521px !important;
    margin-left:-75px;
}
.article-post-thumbnail img{
    height:521px;
    width:100%;
}

.search .loop-entry .entry-content-wrap{
     -webkit-mask-image:none;
     height:inherit;
     padding:30px !important;
     margin-top:0;
}
article.entry.loop-entry{
    box-shadow:none ;
}
 .category-vacatures.loop-entry .entry-content-wrap{
    height:370px;
 }
 .loop-entry footer{
    background-image:none;
 }

.header-no-margin-top figure.headerimg img{
        height: 521px;
    object-position: center;
    object-fit: cover;
}

.header-no-c2a figure.headerimg img{
    height: 554px;
    width: 100%;
}

.headerimg .kadence-blocks-gallery-item{
    mask-image: url(https://kcdeoptimist.nl/wp-content/uploads/2025/05/header-mask.svg);
    mask-repeat: no-repeat;
    mask-size:contain;
    height: 554px;
}


#mobile-drawer.popup-drawer .drawer-inner{
    background-color:#46BBCA !important;
}

.teamlid ul li{
    text-align: center;
    margin-bottom:20px;
}
.teamlid figure{
    margin:0 auto;
    z-index:1;
}
.team-btn{
    max-width:80%;
    margin-left:auto !important;
    margin-right:auto !important;
    transition: 0.2s;
    z-index:2;
    position: relative;
}
.team-btn a{
    width:100%;
        display: flex;
    justify-content: space-between;
}
.teamlid ul li:hover .team-btn{
    box-shadow: 0px 15px 25px -7px rgba(0,0,0,0.1);
}
.teamlid ul li:nth-child(4n+2) .team-btn{
    background-color:#fcd190;
    color:#000;
}
.teamlid ul li:nth-child(4n+2):hover .team-btn, .teamlid ul li:nth-child(4n+2):hover .team-btn a{
    color:#000 !important;
}
.teamlid ul li:nth-child(4n+3) .team-btn{
    background-color:#46BBCA;
}
.teamlid ul li:nth-child(4n+4) .team-btn{
    background-color:#86C8B6;
}
.team-btn a:after{
    content: '';
    background-image: url(images/Next.svg);
    background-repeat: no-repeat;
    background-size: contain;
    width: 22px;
    height: 22px;
    display: block;
}

@media screen and (max-width: 1367px) {
        .vakantierooster  {
        border-radius: 28px;
    }

}

.quickmenu ul.wp-block-post-template-is-layout-grid li{
    text-align: center;
    width:100%;
    display:flex;
    align-items: center;
    justify-content: center;
}
.quickmenu ul.wp-block-post-template-is-layout-grid li h2{
    text-align: center;
    width:100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
}
.quickmenu ul.wp-block-post-template-is-layout-grid li h2 a{
    width:100%;
    height:100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.quickmenu ul.wp-block-post-template-is-layout-grid li:hover h2 , .quickmenu ul.wp-block-post-template-is-layout-grid li h2:hover {
    background-color:#BEA7CC;
;
}
.quickmenu ul.wp-block-post-template-is-layout-grid li:hover h2 a, .quickmenu ul.wp-block-post-template-is-layout-grid li h2:hover a{

    color:#fff;
}


.quickmenu ul.wp-block-post-template-is-layout-grid li:nth-of-type(5n+2) h2{
    background-color: var(--blauw);
}
.quickmenu ul.wp-block-post-template-is-layout-grid li:nth-of-type(5n+3) h2{
    background-color: var(--geel);
}
.quickmenu ul.wp-block-post-template-is-layout-grid li:nth-of-type(5n+3) h2:hover{
    background-color: var(--geel);
}
.quickmenu ul.wp-block-post-template-is-layout-grid li:nth-of-type(5n+4) h2{
    background-color: var(--blauwgroen);
}
.quickmenu ul.wp-block-post-template-is-layout-grid li:nth-of-type(5n+1) h2{
    background-color: var(--roze);
}
.quickmenu ul.wp-block-post-template-is-layout-grid li:nth-of-type(5n+2):hover h2,
.quickmenu ul.wp-block-post-template-is-layout-grid li:nth-of-type(5n+3):hover h2,

.quickmenu ul.wp-block-post-template-is-layout-grid li:nth-of-type(5n+1):hover h2{
    background-color:#BEA7CC;
    color:#fff;
}
.quickmenu ul.wp-block-post-template-is-layout-grid li:nth-of-type(5n+4):hover h2{
        background-color:var(--groen);
    color:#fff;
}




@media screen and (max-width: 1025px) {
    .header-no-margin-top figure.headerimg{
        width: calc(100% + 100px);
        height: 475px !important;
        margin-left: -50px;
        margin-top: 0px;
    }
    .header-no-margin-top figure.headerimg img{

        height:100%;
    }
    .editorfloat{
        position: relative !important;
        bottom:0 !important;
    }

    .article-post-thumbnail{
        width:100%;
        height:300px !important;
        margin-left:0;
        margin-top:0;
    }
    .article-post-thumbnail img{
        height:300px;
        width:100%;
    }

}

@media screen and (max-width: 768px) {
    .header-no-margin-top figure.headerimg{
        height: 275px !important;
    }
    .site-branding a.brand.has-logo-image img.svg-logo-image{
        widtH:155px;
    }
    .article-post-thumbnail{
        width:100%;
        height:275px !important;
        margin-top: -100px;
    }
    .article-post-thumbnail img{
        height:275px;
        width:100%;
    }
    .editorfloat{
        right:auto !important;
        left:0 !important;
    }

    .headerimg .kadence-blocks-gallery-item{
        height:inherit
    }
    .headerimg.wp-block-kadence-advancedgallery{
            transform: scale(1.5);
    margin-top: -20px;
    }
}

@media screen and (max-width: 574px) {
        body.archive.content-style-unboxed .entry-content-wrap, .loop-entry .entry-content-wrap{
        margin-top: -100px;
        
    }
}