/* ------------------------------------------------------------------------
HEADER NAVIGATION MENU'S
------------------------------------------------------------------------ */

/* HEADER MENU */
#site-main-nav a{
    text-decoration: none;
}
#shortcuts ul,
#site-main-nav ul{
    list-style: none;
    margin: 0;
    padding:0;
}

@media only screen and (min-width: 1201px) {
    
    /* Main level*/
    #site-main-nav{
        padding: 0 1.5rem;
    }
    #site-main-nav > ul{
        display: flex; gap: 1rem; align-items:flex-start;
    }
    #site-main-nav > ul > li{
        position: static;
        border:solid 1px var(--clr-1);
        border-radius: var(--border-radius-r);
        background-color: var(--clr-white);
        z-index: 100;
    }
    #site-main-nav > ul > li:hover{
        cursor: default;
        border-bottom-color:solid 1px var(--clr-white);
        /*border-radius: var(--border-radius-r);*/
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        
    }
    
    #site-main-nav > ul > li > a{
        display: block;
        padding: 1rem;
        font-weight: var(--fw-semi-bold);
        text-transform: uppercase;
        color: var(--clr-1);
        /*background-color:var(--clr-gray-1);*/      
    }
    #site-main-nav > ul > li:hover > a{
        padding-bottom:2.1rem;
    }
    #site-main-nav > ul > li > a > span{
        display: block;
        font-size: 1.2rem;
        font-weight: var(--fw-light);
    }
    #site-main-nav > ul > li > a[href]:hover{
        color: var(--clr-2);
    }
    /*#site-main-nav > ul > li > a::before{
        content: '>';
        padding-right: 0.4rem;
    }*/

    /* Second level*/
    #site-main-nav ul ul{
        position: absolute;
        display: none;
        margin-top:-1px;
        margin-left:-1px;
        min-width: 250px;
        background-color: var(--clr-white);
        /*box-shadow: 0 0 5px var(--clr-black);*/
        border:solid 1px var(--clr-1);
        border-top-right-radius: var(--border-radius-r);
        border-bottom-left-radius: var(--border-radius-r);
        border-bottom-right-radius: var(--border-radius-r);
        white-space: nowrap;
        z-index: 99;
    }
    #site-main-nav ul li:hover > ul{
        display: block;
    }
    #site-main-nav ul ul li a::before{
        content: ">";
        padding-right: 1rem;
    }
    #site-main-nav ul ul li a{
        display: block;
        padding: 1.2rem 2rem;
        font-size: 1.6rem;
        color: var(--clr-1);
        border-right: var(--clr-white) solid 5px;
    }
    #site-main-nav ul ul li:last-child a{
        border-bottom-right-radius: var(--border-radius-r);
    }
    #site-main-nav ul ul li:first-child a{
        border-top-right-radius: var(--border-radius-r);
    }
    #site-main-nav ul ul li a[href]:hover{
        color: var(--clr-2);
        border-right: var(--clr-2) solid 5px;
    }

    /* Third and following levels */
    #site-main-nav li li ul {
        display: none;
    }

    /* Give selected subpage(s) colored font */
    /*#site-main-nav .current_page_parent > a,*/
    #site-main-nav .current-menu-ancestor > a,
    #site-main-nav .current-menu-item > a{
        color: var(--clr-2);
    }

    /* Give current selected subpage a colored border */
    /*#site-main-nav ul ul .current_page_parent > a,*/
    #site-main-nav ul ul .current-menu-item > a{
        border-right: var(--clr-2) solid 5px;
    }
  
}

@media only screen and (min-width: 1201px) and (max-width: 1919px){
    #site-main-nav > ul > li > a{
        font-size: var(--fs-s);
    }
}






@media only screen and (max-width: 1200px) {
    #site-main-nav span{
        display: none;
    }
    /* Main level */
    #site-main-nav > ul{
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        overflow-y:auto;
        background-color: var(--clr-1-a-80);
        transition: background-color 0.5s ease;
        z-index: 98;
        padding: 3rem 12rem 6rem 3rem;
    }
    #site-main-nav > ul > li:not(:first-child){
        margin-top: 0.6rem;
    }
    #site-main-nav > ul ul > li a{
        border-top: solid 1px var(--clr-gray-60);
    }
    #site-main-nav a{
        display: block;
        background-color: var(--clr-white);
        border-right: var(--clr-white) solid 5px;
        color: var(--clr-1);
        font-size: 1.8rem;
        padding: 1.5rem 1rem;
    }
    #site-main-nav a{
        width:100%;
    }
    #site-main-nav a[href]:hover{
        border-right: var(--clr-2) solid 5px;
        color: var(--clr-2);
    }
    #site-main-nav > ul > li > a{
        font-weight: 600;
    }
    


    /* Second level */
    #site-main-nav ul ul li a{
        padding-left:3rem;
    }
    #site-main-nav ul ul li a::before{
        content: '>';
        padding-right:1rem;
    }

    /* Third and following levels */
    #site-main-nav li li ul {
        display: none;
    }

    /* Give selected subpage(s) colored font */
    #site-main-nav .current-menu-ancestor > a,
    #site-main-nav .current-menu-item > a{
        color: var(--clr-2);
    }

    /* Give current selected subpage a colored border */
    #site-main-nav ul ul .current-menu-item > a{
        border-right: var(--clr-2) solid 5px;
    }
}
@media only screen and (min-width: 769px) and (max-width: 1200px) {
    #site-main-nav > ul{
        padding: 3rem 16.4rem 6rem 3rem;
    }
}



/* ------------------------------------------------------------------------
HEADER QUICK LINKS
------------------------------------------------------------------------ */

@media only screen and (min-width: 1920px) {
    /* Main level*/
    /*#shortcuts{
        padding: 0 1.5rem;
    }*/
    #shortcuts > ul{
        display: flex; gap: 1rem; align-items:flex-start;
    }
    #shortcuts > ul > li{
        position: static;
        border:solid 1px var(--clr-1);
        border-radius: var(--border-radius-r);
        background-color: var(--clr-white);
        z-index: 100;
    }
    #shortcuts > ul > li:hover{
        cursor: default;
    }
    
    #shortcuts > ul > li > a{
        display: block;
        padding: 1rem;
        font-weight: var(--fw-semi-bold);
        text-transform: uppercase;
        text-decoration: none;
        color: var(--clr-1);      
    }
    #shortcuts > ul > li > a > span{
        display: block;
        font-size: 1.2rem;
        font-weight: var(--fw-light);
    }
    #shortcuts > ul > li > a[href]:hover{
        color: var(--clr-2);
    }

    /* Second level*/
    #shortcuts ul ul{
        display:none;
    }
    /* Give selected subpage(s) colored font */
    /*#shortcuts .current_page_parent > a,*/
    #shortcuts .current-menu-ancestor > a,
    #shortcuts .current-menu-item > a{
        color: var(--clr-2);
    }

    /* Give current selected subpage a colored border */
    /*#shortcuts ul ul .current_page_parent > a,*/
    #shortcuts ul ul .current-menu-item > a{
        border-right: var(--clr-2) solid 5px;
    }
}
@media only screen and (min-width: 1201px) and (max-width: 1919px) {
    
    /* Main level*/
    /*#shortcuts{
        padding: 0 1.5rem;
    }*/
    #shortcuts > ul{
        display: flex; gap: 1rem; align-items:flex-start;
    }
    #shortcuts > ul > li{
        position: static;
        border:solid 1px var(--clr-1);
        border-radius: var(--border-radius-r);
        background-color: var(--clr-white);
        z-index: 100;
    }
    #shortcuts > ul > li:hover{
        cursor: default;
    }
    
    #shortcuts > ul > li > a{
        display: block;
        padding: 1rem;
        font-weight: var(--fw-semi-bold);
        font-size: var(--fs-xs);
        text-transform: uppercase;
        text-decoration: none;
        color: var(--clr-1);      
    }
    #shortcuts > ul > li > a > span{
        display: block;
        font-size: 1.2rem;
        font-weight: var(--fw-light);
    }
    #shortcuts > ul > li > a[href]:hover{
        color: var(--clr-2);
    }

    /* Second level*/
    #shortcuts ul ul{
        display:none;
    }
    /* Give selected subpage(s) colored font */
    /*#shortcuts .current_page_parent > a,*/
    #shortcuts .current-menu-ancestor > a,
    #shortcuts .current-menu-item > a{
        color: var(--clr-2);
    }

    /* Give current selected subpage a colored border */
    /*#shortcuts ul ul .current_page_parent > a,*/
    #shortcuts ul ul .current-menu-item > a{
        border-right: var(--clr-2) solid 5px;
    }
  
}
@media only screen and (min-width: 769px) and (max-width: 1200px){
    #shortcuts{
        display:none;
    }
}
@media only screen and (max-width: 768px) {
    #shortcuts{
        display:none;
    }
}

/* NIEUWE BOVENSTAANDE VERSIE PER 21-9-2022
#shortcuts ul{
    list-style: none;
    border-left: var(--clr-1) solid 1px;
}
#shortcuts a{
	display: block;
	white-space: nowrap;
	font-size: 1.2rem;
    color: var(--clr-1);
    text-decoration: none;
    padding-left:1.5rem;
}
#shortcuts a:hover{
    color: var(--clr-2);
}
#shortcuts .current-menu-ancestor > a,
#shortcuts .current-menu-item > a{
    color: var(--clr-2);
}
@media only screen and (min-width: 769px) and (max-width: 1200px){
    #shortcuts ul{
        display: flex;
        border-left:none;
    }
    #shortcuts a{
        display:inline-block;
    }
    #shortcuts a:first-child{
        padding:0 1rem 0 0;
    }
    #shortcuts li:not(:first-child) a{
        border-left:1px solid var(--clr-1-40);
        padding:0 1rem;
    }
}
@media only screen and (max-width: 768px) {
    #shortcuts ul{
        display: flex;
        border-left:none;
    }
    #shortcuts a{
        display:inline-block;
    }
    #shortcuts a:first-child{
        padding:0 1rem 0 0;
    }
    #shortcuts li:not(:first-child) a{
        border-left:1px solid var(--clr-1-40);
        padding:0 1rem;
    }
}*/



/* ------------------------------------------------------------------------
BREADCRUMBS
------------------------------------------------------------------------ */

#breadcrumbs ul{
    display: flex;
    list-style: none;
}
#breadcrumbs li a{
    text-decoration: none;
    color: var(--clr-1);
}
#breadcrumbs li a:hover{
    text-decoration: underline;
    color: var(--clr-2);
}



/* ------------------------------------------------------------------------
BUTTONS
------------------------------------------------------------------------ */

.button{
    position: relative;
    display: inline-block;
    padding: 1rem 2rem;
    text-decoration: none;
    border-radius: 5px;
    box-shadow: none;
    /*text-transform: uppercase;*/
    font-weight:600;
    background-color: var(--clr-white);
    color: var(--clr-black);
    transition: background-color 1s ease, box-shadow 1s ease;
    
}
.button.small{
    font-size:1.4rem;
    padding: 0.5rem 1rem;
    font-weight:400;
}
.button.large{
    font-size:2.1rem;
    padding: 2rem 4rem;
}
.button:hover{
    transition: background-color 0.5s ease;
}

.button-white{
    background-color: var(--clr-white);
    color: var(--clr-1);
}
.button-white:hover{
    background-color: var(--clr-gray-1-70);
    color: var(--clr-1);
    box-shadow: none;
}
.button-blue{
    background-color: var(--clr-1);
    color: var(--clr-white-a);
}
.button-blue:hover{
    background-color: var(--clr-1-40);
    color: var(--clr-white);
    box-shadow: none;
}
.button-yellow{
    background-color: var(--clr-2);
    color: var(--clr-white);
}
.button-yellow:hover{
    background-color: var(--clr-2-40);
    color: var(--clr-white);
}
.button-gray{
    background-color: var(--clr-gray-60);
    color: var(--clr-black-a);
}
.button-gray:hover{
    color: var(--clr-black);
}
.button-black{
    background-color: var(--clr-black);
    color: var(--clr-white-a);
}
.button-black:hover{
    color: var(--clr-white);
    box-shadow: none;
}

a.default:not(.button){
    color:var(--clr-white);
    text-decoration: none;
}
a.default:not(.button):hover{
    color:var(--clr-2);
}