/*

Theme Name: Kiemscholen
Template: kadence
Version: 1.0.1
Text Domain: cloudwise-basis-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
*/

:root{
    --grijs: #404141;
    --groen:#B0AB3A;
    --oranje: #EC6608;
    --lichtoranje:#FBB603;
    --blauw: #4983BB;
    --lichtblauw:#94C7E2;
    --rood: #E84B22;
    --wit: #ffffff;
	--geel: #FBDD00;

	--kiemblauw:#1C3660;

	--tekst:#404141;

    --knoporanje:#EA7C18;
}

.site-branding a.brand img{
    margin-top:-40px;
}


/* top menu */
#secondary-menu li{
    padding-right:32px;
    position: relative
}
    #secondary-menu li:last-child{
        padding-right:0;
    }
    #secondary-menu li:after{
        content:'';
        width:20px;
        height:20px;
        -webkit-mask-image: url("images/Sterretjepaars.svg"); 
        mask-image: url("images/Sterretjepaars.svg"); 
        -webkit-mask-repeat: no-repeat; 
        mask-repeat: no-repeat;
        background-size: contain;
        background-repeat: no-repeat;
        position: absolute;
        right:6px;
        top:9.6px;
        background-color:var(--geel);
    }
    #secondary-menu li:last-child:after{
        display:none;
    }



/* menu zijkant */
.wp-block-lazyblock-zijmenu .SubpagesListWrapper{
    padding-left:0;
}
.wp-block-lazyblock-zijmenu .SubpagesListWrapper li{
    list-style-type: none;
}
.wp-block-lazyblock-zijmenu .SubpagesListWrapper li a{
    text-decoration: none;
    font-size:18px;
    line-height:28px;
}




/* home header */
.header-home{
    position:relative;
}
    .header-home .header-home-banner {
        position:relative;
        z-index:20;
        -webkit-mask-image: url("images/golf-mask.svg"); 
        mask-image: url("images/golf-mask.svg"); 
        -webkit-mask-repeat: no-repeat; 
        mask-repeat: no-repeat;
    }
    .header-home .header-home-content{
        position:relative;
        z-index: auto;
        margin-top:-500px;
        padding-top:400px;
        padding-bottom:200px;  
    }
        .header-home .header-home-content .header-home-txt,
        .header-home .header-home-content .header-home-btn {
            position: relative;
            z-index: 21;
        }
        .header-home .header-home-content > .innerblocks-wrap {
            z-index: 21;
        }
        .header-home .header-home-content:after{
            content:"";
            width:100%;
            height:100%;
            position:absolute; 
            left:0;
            top:0;
            background-image:url("images/papier.jpg");
            background-size:cover;
            background-repeat: no-repeat;
            -webkit-mask-image: url("images/golf-mask2.svg"); 
            mask-image: url("images/golf-mask2.svg"); 
            -webkit-mask-repeat: no-repeat; 
            mask-repeat: no-repeat;
        }

            .header-home .header-home-content .header-home-sideimg{
                position:absolute;
                right:-200px;
                bottom:0;
            }


/* subpagina header */
.header-sub{
    position:relative;
}
    .header-sub .header-sub-content{
        position:relative;
        z-index: 20;
        padding-bottom:100px;
        padding-bottom:200px;  
    }
        .header-sub .header-sub-content .header-sub-txt,
        .header-sub .header-sub-content .header-sub-btn {
            position: relative;
            z-index: 21;
        }
        .header-sub .header-sub-content > .innerblocks-wrap {
            z-index: 21;
        }
        .header-sub .header-sub-content:after{
            content:"";
            width:100%;
            height:100%;
            position:absolute; 
            left:0;
            top:0;
            background-image:url("images/papier.jpg");
            background-size:cover;
            background-repeat: no-repeat;
            -webkit-mask-image: url("images/golf-mask.svg"); 
            mask-image: url("images/golf-mask.svg"); 
            -webkit-mask-repeat: no-repeat; 
            mask-repeat: no-repeat;
        }
    .header-sub .header-sub-illustr{
        z-index:22;
        position:absolute;
        width:100%;
    }    

    .header-sub .header-sub-banner {
        position:relative;
        z-index:19;
        -webkit-mask-image: url("images/golf-mask2.svg"); 
        mask-image: url("images/golf-mask2.svg"); 
        -webkit-mask-repeat: no-repeat; 
        mask-repeat: no-repeat;
        margin-top:-450px !important;
    }   
    
    
 /* subpagina kleur header */
 .header-sub-kleur .header-sub-content:after{
    background-color:var(--groen);
    background-image: none;
 }  
    .header-sub-kleur .header-sub-content {
        color:#fff;
    }


/* gouden rand */
.goudenrand{ 
    background-image: url(images/goud.jpg);
    background-size: cover;
    padding-bottom: 225px;
    -webkit-mask-image: url(images/MaskBlue.svg);
    -webkit-mask-repeat: no-repeat;
    width: 100%;
    -webkit-mask-size: cover;
    -webkit-mask-position-x: center;
    height: 75px;
    background-color:var(--donkerblauw)
}




/* media queries */
@media(min-width:2000px){
    .header-sub .header-sub-banner{ width:75%; }
}



@media only screen and (max-width: 1400px) {

}

@media only screen and (max-width: 1024px) {
    .header-home .header-home-banner{ mask-size: 160% 100%; mask-position: center center;}
    .header-home .header-home-content:after{mask-image: none;}

    .header-sub .header-sub-content:after{mask-image: none;}
    .header-sub .header-sub-banner {margin-top:0 !important; mask-size: 160% 100%; mask-position: center center;}
    
}


@media only screen and (max-width: 768px) {
    .header-home .header-home-banner .header-home-cta{display:none}
    .header-home .header-home-content{margin-top:-350px; padding-bottom:100px;}
    .header-home .header-home-content .header-home-sideimg{position:relative; right:auto;}

    .header-sub .header-sub-content{padding-bottom:50px;}

    
}

@media only screen and (max-width: 350px) {

}

.ctablock svg {
    transition:0.3s;
}

.ctablock:hover svg {
    transform: scale(1.1);
}