/* ==========================================================================
   SPECIFIC STYLING AND TYPOGRAPHY
   ========================================================================== */

/* Remarks
   ========================================================================== */

/**
 * use for specific styling not done by typographr
 * author: rudy montoya rodriguez / @_moretaste
 * url: http://www.moretaste.nl
 */

/* ==========================================================================
   BODY
   ========================================================================== */
.container
{
    padding: 0 0 48px;
}

@media only screen and (min-width: 48em)
{
    .container
    {
        padding: 0;
    }
}

/* ==========================================================================
   HEADER
   ========================================================================== */
header
{
    position: relative;
    z-index: 88;

    padding: 1em 0 3em;

    background-color: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, .1);
}

/* BRANDING
   ========================================================================== */
.slogan
{
    font-size: 14px;

    position: relative;

    display: inline-block;

    margin: 3px 0 0;

    vertical-align: top;

    color: #a70251;
}

@media only screen and (min-width: 48em)
{
    .slogan
    {
        margin: 3px 0 0 102px;
    }
}

/* NAV EXTRA
   ========================================================================== */
.nav-extra ul
{
    float: right;

    margin: 1.5em 0 0;
}
.nav-extra.inline li
{
    margin: 0 0 0 1em;
}

.nav-extra li a
{
    font-size: 1.125em;
}

.nav-extra a[href*='afspraak']
{
    color: #a70251;
}

.nav-extra a[href*='afspraak']:hover
{
    color: #333c44;
}

.nav-extra .icon
{
    display: none;
}

/* NAV SOCIAL
   ========================================================================== */

.nav-social
{
    margin: 1.5em 0 0 0;
}

.nav-social a
{
    width: 24px; height: 24px;
    margin: 0 2px 0 0;text-align: center;color: #fff;
    background-color: #edeff0;
}
.nav-social a:hover
{
    color: #fff;
    background-color: #a70251;
}

/* ==========================================================================
   HERO
   ========================================================================== */
/* TRIGGERS
   ========================================================================== */
.trigger
{
    line-height: 1.2;

    position: relative;

    white-space: normal;
}
.trigger a
{
    position: relative; z-index: 5;

    display: block;

    color: #fff;
    border-color: transparent;
}
.trigger a:hover
{
    color: #546270;
    border-width: 0 0 1px 0;
}
.trigger a:hover h3
{
    color: #a70251;
    text-shadow: none;
}
.trigger h3
{
    line-height: 1;

    margin: 0;

    color: #fff;
    text-shadow: 1px 1px 1px rgba(0,0,0,.3) ;
}
.trigger .icon
{
    position: absolute;top: 1em;
    right: 1em;

    width: 36px; height: 36px;
    margin: 0;

    fill: #fff;
}
.trigger .content
{
    position: relative; z-index: 80;

    padding: .75em 1.5em;
}
.trigger .content div
{
    padding-right: 20%;
}
.trigger .content div p
{
    font-weight: 400;

    margin-top: 8px;
}

.trigger figure,
.trigger .overlay
{
    position: absolute; z-index: -1;
    top: 0; right: 0; bottom: 0; left: 0;
}
.trigger figure
{
    overflow: hidden;
}
.trigger figure img
{
    max-width: none;
}

.trigger .overlay
{
    z-index: 10;

    opacity: .95;
    background-color: #a70251;

    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=95)';
}
.trigger + .trigger .overlay
{
    background-color: #b6206a;
}
.trigger + .trigger + .trigger .overlay
{
    background-color: #cf4092;
}
.trigger a:hover .overlay
{
    z-index: 55;

    opacity: .95;
    background-color: #efefef!important;

    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=95)';
}

@media only screen and (min-width: 48em)
{
    .trigger a
    {
        border-width: 0 0 1px 0;
        border-style: solid; border-color: #d8dcde;
    }
    .trigger .icon
    {
        width: 48px; height: 48px;
    }

    .hero .rowr
    {
        overflow: hidden;

        white-space: nowrap;

        -webkit-flex-wrap: nowrap;
            -ms-flex-wrap: nowrap;
                flex-wrap: nowrap;
    }
}

/* ==========================================================================
   MAIN
   ========================================================================== */
section[role='main'] article
{
    position: relative; margin: 0;
}
section[role='main'] article figure
{
    /*background-color: #d8dee3;*/
}
section[role='main'] article .content
{
    margin: 0; padding: 1.5em 1.5em 2.5em 1.5em;

    background-color: #fff;
}
.disclaimer
{
    font-size: 10px;

    margin: 0; padding: 1em 1.5em 1em 1.5em;color: #98a0a9;
}
@media only screen and (min-width: 80em)
{
    section[role='main'] article .content
    {
        padding: 2em 4em 2.5em 2.5em;
    }
    .disclaimer
    {
        padding: 1em 4em 1em 2.5em;
    }
}

/* INTRO
   ========================================================================== */
div.intro
{
    padding: 1.5em 1em 1.5em 0;
}
.intro h1
{
    line-height: 1; margin: 0;
}
.intro p,
p.intro
{
    font-size: 1.125em;
    font-weight: 300; line-height: 24px;margin: 16px 0 0 0;

    color: #546270;
}
/* MAIN ARTICLE
   ========================================================================== */

.main-article h2
{
    position: relative;

    margin: 0;
}
/*.main-article h2:not(:first-of-type) { margin: 0;}*/

.oldIE .main-article h2.collapse
{
    margin: 0;
}

.oldIE .main-article h2.collapse a
{
    padding-left: 0;
}

.main-article h2.collapse a
{
    display: block;

    padding: .75em 0 .75em 1.5em;

    color: #98a0a9;
    border-width: 0 0 1px;
    border-style: solid;
    border-color: #edeff0;
}

.main-article h2.collapse.open a
{
    color: #333c44;
}

.main-article h2.collapse a:before,
.main-article h2.collapse.open a:before
{
    position: absolute;top: .8em;
    left: 0;

    display: block;

    width: 16px; height: 16px;
    margin: 0 12px 0 0;

    content: url(../i/icons/expand.svg);
}
.main-article h2.collapse.open a:before
{
    content: url(../i/icons/close.svg);
}
.main-article h2.open + .wrap
{
    margin: 0; padding: 1em 1em 1em 2em;border-width: 0 0 1px 0;
    border-style: solid; border-color: #edeff0;
}
.main-article h2.open + .wrap p:first-child
{
    margin-top: 0;
}

.main-article h3.h1
{
    font-size: 1.1em; font-weight: 700; margin: 0;

    color: #65717e;
}

/* ==========================================================================
   BLOCKVIEW
   ========================================================================== */
.blockview .item
{
    position: relative;

    margin: 0 0 2em 0;
    padding: 0 1em 3em 1em;

    border-width: 0 0 0 1px;
    border-style: solid;
    border-color: rgba(0,0,0,.1);
}
.blockview .item-content
{
    font-size: .875em;

    position: static;

    margin: 1em 0 0 0;
}
.blockview .item-content h3.h1
{
    margin: 0 0 .25em 0;
}
.blockview .item-content .more
{
    position: absolute;     bottom: 0;
    left: 1em;
}

/* ==========================================================================
   RESULTS
   ========================================================================== */
.results li
{
    padding: 2em 0;

    border-width: 0 0 1px 0;
    border-style: solid;
    border-color: rgba(0,0,0,.1);
}
.tags
{
    color: #d8dee3;
}
div.tags
{
    margin-top: .5em;
}
#alpha {
    background-color: #edeff0;
    padding: 2rem;
}
#alpha .folder-search {
    text-transform: none;
}
#alpha ul {
    margin-top: 1rem;
    width: 100%;
}

#alpha li
{
    font-size: 1.2em;
    margin: 0 8px 0 0;
}
#alpha .h1 {
    margin-bottom: 1rem;
}

#alpha li.all a {
    text-transform: none;
    font-weight: normal;
    font-size: 1rem;
}
#alpha li.all a::before {
    content: '/';
    display: inline-block;
    margin: 0 .25rem;
}

.folder-list ul {
    margin-bottom: 1rem;
}
.folder-list ul a {
    border-style: solid;
    border-color: #edeff0;
    border-width: 1px 0;
    display: block;
    font-weight: normal;
    padding: .5rem 0;
}


@media only screen and (min-width: 64em) {
    #alpha {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    #alpha > div,
    #alpha > .folder-search {
        flex: 0 0 calc(50% - 1rem);
        margin: 0;
    }
    #alpha > ul {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        flex: 0 0 100%
        padding-right: 1rem;
    }
    #alpha .h1 {
        margin: 0;
    }

    .folder-list {
        columns: 2;
        gap: 2rem;
    }
    .folder-list > li {
        break-inside: avoid-column;
    }
}


/* ==========================================================================
   MAIN ASIDE
   ========================================================================== */
section[role='main'] aside
{
    position: relative; z-index: 44;border-width: 1px 0 1px 1px;
    border-style: solid; border-color: #efefef;
    background-color: #fff;
}
section[role='main'] aside h2
{
    font-weight: 300;
    line-height: 1;

    margin: 0 0 24px 0; padding: 1em 1em;border-width: 0 0 1px 0;
    border-style: solid; border-color: #edeff0;
}
/* ASIDE ITEM
   ========================================================================== */
aside .item-content
{
    position: relative;

    display: block;

    margin: 0 auto; padding: 0 24px 16px 48px;
}

aside figure.item-content
{
    margin: 1em 0;
    padding: 0;
}
aside figure.item-content:after
{
    content: none;
}
aside .item-content:after
{
    display: block;

    width: 100%; height: 1px;
    margin: 1em 10% 0 0;

    content: ' ';

    background-color: #edeff0;
}
aside .item-content h4
{
    margin: 0 0 .5em 0; color: #333c44;
}
aside .item-content h4 small
{
    margin: .5em 0 0 0;
}
aside .item-content .content h5
{
    margin: 0 0 .5em 0;
}
aside .item-content .content
{
    font-size: 1em; line-height: 1.4; margin: .25em 0 0 0;
}
aside .item-content .content p,
aside .item-content .content ul
{
    margin: 0 0 .5em 0;
}
aside .item-content a
{
    font-weight: 700;
}

/* ASIDE MENU
   ========================================================================== */
.nav-aside {
    position: sticky;
    top: 0;
}
aside .actions {
    padding: 8px 48px;
}
aside .actions .btn a {
    align-items: center;
    display: flex;
    text-align: left;
    width: 100%;
}
aside .actions .btn a svg {
    height: 1.8rem;
    fill: #fff;
    margin-left: auto;
}
aside nav .list
{
    padding: 0; list-style: none;
}
aside nav h2 + .list,
aside h2 + nav,
aside h2 + .folder-index
{
    margin-top: -25px;
}
aside nav .list a
{
    font-size: .875em;
    font-weight: 400;
    line-height: 1.1;

    display: block;

    margin: -1px 0 0 0; padding: 8px 48px;

    white-space: normal;

    border-width: 0;    border-width: 1px 0;
    border-style: solid;
    border-color: #efefef;
}
aside nav .list .active a,
aside nav .list .active-trail > a
{
    color: #a70251;
}
aside .nav-aside p
{
    font-size: .875em;

    padding: 0 24px 0 48px;
}

@media only screen and (min-width: 48em)
{
    section[role='main'] aside
    {
        margin: 0 0 2em 0;
    }
    aside .item-content p
    {
        font-size: .875em;
    }
}
@media only screen and (min-width: 64em)
{
    section[role='main'] aside
    {
        border-bottom-width: 0;
        margin: -4em 0 3em 0;
        padding-bottom: 4rem;
    }
    .front section[role='main'] aside
    {
        border-bottom-width: 0;
        margin: -10.5em 0 3em 0;
        padding-bottom: 4rem;
    }
}

/* ==========================================================================
   BLOCK SPECIFICS
   ========================================================================== */
/* SLIDER ITEM
   ========================================================================== */
.owl-slide .owl-item
{
    background-color: #d8dee3;
}
.owl-slide .owl-item article
{
    padding: 1em 2em 3em 2em;

    vertical-align: top;
}

.owl-slide .owl-item .h4
{
    font-size: 1.1em;

    color: #546270;
}

@media only screen and (min-width: 64em)
{
    .owl-slide .owl-item article
    {
        padding: 4em 5.25em 2.5em 4.75em;
    }
}
span.position
{
    font-size: 12px;
    line-height: 18px;

    position: absolute;
    right: 8px;
    bottom: 8px;

    display: inline-block;

    width: 18px;
    height: 18px;

    text-align: center;
    vertical-align: middle;

    border-radius: 100%;
    background-color: #fff;
}
/* FEATURED CTA
   ========================================================================== */
.featured .call-to-action article
{
    margin: 2em 0 0 0;
    padding: 2.5em 0 2.5em 0;

    text-align: center;

    color: #546270;border-width: 1px 0 ;
    border-style: solid; border-color: #d8dee3;
}
.featured .call-to-action article .item-body
{
    font-size: 110%;
}

/* NEWS HIGHLIGHTED
   ========================================================================== */
.news-list
{
    padding: 0;
}

.highlighted
{
    margin: 2em 0 0 0; padding: 0 0 40px 0;

    background-color: #fff;
}

.highlighted .news-list a
{
    font-size: 16px;

    position: relative;

    display: block;

    padding: 20px 0;

    color: #546270;border-width: 0 0 1px 0;
    border-style: solid; border-color: #d8dee3;
}
.highlighted .news-list a:hover
{
    color: #a70251;
}

.highlighted ul.news-list .icon
{
    width: 48px; height: 48px;

    fill: #546270;
}
.highlighted ul.news-list a:hover > .icon
{
    fill: #a70251;
}

.highlighted ul.news-list span.date
{
    display: inline-block;

    min-width: 80px;
    margin: .5em 0;
    padding: 5px 10px;

    text-align: center;color: #fff;
    border-radius: 3px;
    background: #a70251;
}

@media only screen and (min-width: 48em)
{
    .highlighted .news-list a
    {
        padding: 20px 90px 20px 100px;
    }
    .highlighted ul.news-list span.date
    {
        font-size: 18px;

        position: absolute;top: 20px;
        left: 0;

        margin: 0;
    }
    .highlighted  ul.news-list .icon
    {
        position: absolute;top: 50%;
        right: 0; margin-top: -24px;
    }
}
@media only screen and (min-width: 80em)
{
    .highlighted .news-list a
    {
        padding: 20px 300px 20px 100px;
    }
}

/* ==========================================================================
   STICKY NAVIGATION
   ========================================================================== */
/* NAVICON
   ========================================================================== */
.toggleMenu
{
    position: absolute; right: 0; bottom: 0;

    width: 48px; height: 48px; margin: 0;
}
[class='icon-menu']:before
{
    font-size: 24px;line-height: 48px;

    position: absolute;
    right: 0; bottom: 0;

    width: 48px; height: 48px;
    margin: 0;

    cursor: pointer;
    text-align: center;color: #fff;
    background-color: #a70251;
}
[class='icon-menu']:hover:before,
.nav-open [class='icon-menu']:before
{
    color: #333c44;
    background-color: #fff;
}
/* CTA LINK
   ========================================================================== */
.afspraak:not(.cat)
{
    font-size: 16px; font-weight: 700;line-height: 48px;

    position: absolute; bottom: 0;left: 0;

    width: 100%;
    margin: 0; padding: 0 0 0 1em;text-align: left;
    text-transform: uppercase;

    color: #fff;
}
.afspraak:hover
{
    color: #98a0a9;
}
.nav-open .afspraak
{
    border-top: solid 1px rgba(0,0,0,.3);
}
/* WRAPPER
   ========================================================================== */
.st-nav
{
    position: fixed;
    z-index: 999;
    bottom: 0; left: 0;

    width: 100%; height: 48px;
    margin: 0; padding: 48px 0 0 0;

    -webkit-transition: all .3s .2s ease-out ;
       -moz-transition: all .3s .2s ease-out ;
        -ms-transition: all .3s .2s ease-out ;
         -o-transition: all .3s .2s ease-out ;
            transition: all .3s .2s ease-out ;
    text-align: center;

    background-color: rgba(0,0,0,.5);
}
.st-nav:hover
{
    background-color: #333c44;
}

.nav-open .st-nav
{
    height: 100%;
    padding: 0;

    background-color: rgba(167,2,81,1);
}
/* FIRST LEVEL
   ========================================================================== */
.menu-main
{
    margin: 0;
    padding: 0;
}
.menu-main > li
{
    line-height: 48px;position: static;
    z-index: 99;

    display: inline-block;
    overflow: hidden;

    width: 100%;
    height: 48px; max-height: 48px;

    list-style: none;

    cursor: pointer;
    -webkit-transition: max-height .7s .4s ease-out ;
    -moz-transition: max-height .7s .4s ease-out ;
    -ms-transition: max-height .7s .4s ease-out ;
    -o-transition: max-height .7s .4s ease-out ;
    transition: max-height .7s .4s ease-out ;
    text-align: center; vertical-align: middle;
    word-spacing: normal;border-width: 0 0 1px 0;
    border-style: solid;
    border-color: #77023a; border-color: rgba(0,0,0,.2);
}
/* SUBMENU
   ========================================================================== */
.menu-main ul
{
    position: fixed;
    z-index: 10;top: 0;bottom: 0;
    left: -100%;

    display: block;

    width: 100%; height: auto;
    margin: 0; padding: 0;

    -webkit-transition: left .4s .4s ease-out ;
    -moz-transition: left .4s .4s ease-out ;
    -ms-transition: left .4s .4s ease-out ;
    -o-transition: left .4s .4s ease-out ;
    transition: left .4s .4s ease-out ;

    background-color: #77023a; background-color: rgba(226,140,190,.7);
}

.menu-main li.hover > ul
{
    position: fixed;top: 0;
    left: 0;

    overflow-y: auto;
}
.menu-main li.hover ul ul
{
    position: relative; left: 0;
}
.menu-main li.hover ul ul li a
{
    padding: 10px 32px;
}

.menu-main ul ul .back
{
    display: none;
}
.menu-main ul li
{
    line-height: 24px;

    position: relative;

    width: auto; /*max-width: 325px;*/
    margin: 0;

    list-style: none;

    text-align: left;

    background-color: #fff;
}
.menu-main > ul li:last-child:after
{
    display: table;

    width: 100%; height: 48px;

    content: ' ';
}
.menu-main > ul li:last-child a:last-child
{
    border-width: 1px 0;
}

/* STYLING MENU ITEMS
   ========================================================================== */
.st-nav h3
{
    margin: 0;
}
.st-nav h3
{
    font-size: 1.125em; font-weight: 700;
    line-height: 1;

    display: inline-block; /*vertical-align: middle;*/

    margin: 0; padding: 0 1em;

    color: #fff;
    text-shadow: 1px 1px 1px rgba(0,0,0,.3) ;
}
.menu-main li.home a,
.st-nav h3 a
{
    color: #fff;
}
.st-nav .back a
{
    font-weight: 400;

    color: #1f8dd6;
}
.st-nav .back a:hover
{
    color: #98a0a9; background-color: #fff;
}

.menu-main > li.hover
{
    background-color: #edeff0;
}
.menu-main li.hover
{
    background-color: #fff;
}
.menu-main li.hover h3,
.menu-main li.hover.home a
{
    color: #546270;
    text-shadow: none;
}
.menu-main ul li a
{
    font-size: 1.1em;
    font-weight: 400;
    line-height: 1.1;

    display: block;

    margin: 0; padding: 10px 16px;

    white-space: normal;

    color: #333;
    border-width: 0;    border-width: 1px 0 0 0;
    border-style: solid;
    border-color: #efefef;    border-color: rgba(0,0,0,.1);
}
.menu-main ul li.active a
{
    color: #a70251;
}
.menu-main ul li.active-trail > a
{
    font-weight: 700;

    color: #a70251;
}

.menu-main ul li a:hover
{
    color: #fff;
    border-color: transparent;
    background-color: #a70251;
}
.menu-main ul li h4
{
    line-height: 1.1;

    margin: 0; padding: 6px 16px;
}
.menu-main ul li h4
{
    border-width: 1px 0 0 0;
    border-style: solid;
    border-color: #efefef;    border-color: rgba(0,0,0,.1);
}
.menu-main ul li h4 ~ a
{
    padding-left: 28px;
}

@media only screen and (min-width: 64em)
{
    .st-nav
    {
        height: 54px;
        padding: 0;
    }
    .st-nav nav,
    .st-nav nav:hover
    {
        text-align: center;

        background-color: #a70251;
    }
    .menu-main
    {
        display: inline-table;

        margin: 0 auto; padding: 0;
    }
    .menu-main > li
    {
        line-height: inherit;

        display: table-cell;

        width: 15%;
        height: 54px; max-height: none;

        border-width: 0 0 0 1px;
    }
    .menu-main ul li:last-child:after
    {
        content: none;
    }
    .menu-main ul
    {
        position: absolute;
        z-index: -10;top: inherit;bottom: -800px;
        left: 0;

        display: block;

        width: 100%; height: auto;margin: 0;
        padding: 0;

        -webkit-transition: bottom .7s .4s ease-out ;
        -moz-transition: bottom .7s .4s ease-out ;
        -ms-transition: bottom .7s .4s ease-out ;
        -o-transition: bottom .7s .4s ease-out ;
        transition: bottom .7s .4s ease-out ;

        background-color: #e28cbe; background-color: rgba(226,140,190,.7);
        /*overflow-y: auto;*/
    }
    .menu-main ul li
    {
        width: 325px;
    }
    .menu-main ul ul
    {
        display: none;
    }
    .menu-main .hover li:hover > ul
    {
        position: absolute; z-index: 1;
        bottom: 0; left: 325px;

        display: block;
    }
    .menu-main li.hover > ul
    {
        position: absolute;
        z-index: -1;top: inherit;
        bottom: 54px;

        overflow: visible;

        padding: 0;
    }
    .menu-main ul li a
    {
        font-size: 1em;
        font-weight: 700;

        padding: 8px 16px;
    }

    .menu-main li.home
    {
        width: 4%!important;border-width: 0 0 0 1px;
        border-style: solid;
        border-color: rgba(0,0,0,.2);
    }
    .menu-main li.home span
    {
        display: none;
    }

    .menu-main li.home .icon
    {
        width: 48px;
        height: 48px;
        margin: 0; padding: 12px;text-align: center;
        vertical-align: middle;

        border: none;

        fill: #fff;
    }
    .menu-main li.home :hover .icon
    {
        fill: #a70251;
    }
}
@media only screen and (min-width: 80em)
{
    .st-nav li:last-child
    {
        border-width: 0 1px;
    }
}


#alpha ul
{
    text-transform: uppercase;
}


/* ==========================================================================
   FOOTER
   ========================================================================== */
footer
{
    background-color: #fff;
}

footer img
{
    display: inline-block;

    max-width: 200px; height: auto;margin: 0;
    padding: 1em 1em 2em 1em;
}
.footer-contact.colr
{
    display: block;

    width: 80%;
    margin: 0 auto;
    padding: 2em 0 2em 0;
}
.footer-contact > h2,
.footer-contact .more
{
    display: none;
}
.footer-contact .item-content
{
    width: 100%;
    margin: 0 0 1em 0;
    padding: 0 0 1em 0;

    border-bottom: solid 1px rgba(0,0,0,.1);
}
.footer-contact .item-content p
{
    margin: .5em 0 0 0;
}
.footer-contact article h3.h1
{
    font-size: 1.2em;
}
@media only screen and (min-width: 48em)
{
    .footer-contact.colr
    {
        position: relative;

        display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
        display:    -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox;      /* TWEENER - IE 10 */
        display: -webkit-flex;     /* NEW - Chrome */
        display:         flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */

        width: 94%;

        -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
                flex-wrap: wrap;
    }
    .footer-contact .item
    {
        font-size: .8em;

        display: -webkit-flex;
        display: -ms-flexbox;
        display:         flex;

        width: 25%;
    }
}
@media only screen and (min-width: 64em)
{
    .footer-contact .item
    {
        width: 20%;
    }
}
@media only screen and (min-width: 80em)
{
    .footer-contact.colr
    {
        width: 96%;

        -webkit-flex-wrap: nowrap;
            -ms-flex-wrap: nowrap;
                flex-wrap: nowrap;
    }
}