/*  NLD-colors

    blue:       #03495d
    aqua:       #09a3ba
    menie:      #cc4646
    dark:       #3c4548 (gray))
    aqua-semi:  #ceedf1
    blue-semi:  #cddbdf
    gray:       #b1b1b1
    gray-light: #e1e1e1
*/


/* background colors */

/*
.bg-color-blue,
.cvr-color-blue:after,
.hvrcvr-color-blue:before,
.bg-color-after-blue:after,
.bg-color-before-blue:before        {  background-color: #03495d;}
.i-bg-color-blue,
.i-cvr-color-blue:after,
.i-hvrcvr-color-blue:before,
.i-bg-color-after-blue:after,
.i-bg-color-before-blue:before      {  background-color: #03495d !important;}


.bg-color-aqua,
.cvr-color-aqua:after,
.hvrcvr-color-aqua:before,
.bg-color-after-aqua:after,
.bg-color-before-aqua:before        {  background-color: #09a3ba;}
.i-bg-color-aqua,
.i-cvr-color-aqua:after,
.i-hvrcvr-color-aqua:before,
.i-bg-color-after-aqua:after,
.i-bg-color-before-aqua:before        {  background-color: #09a3ba !important;}


.bg-color-menie,
.cvr-color-menie:after,
.hvrcvr-color-menie:before,
.bg-color-after-menie:after,
.bg-color-before-menie:before       {  background-color: #cc4646;}
.i-bg-color-menie,
.i-cvr-color-menie:after,
.i-hvrcvr-color-menie:before,
.i-bg-color-after-menie:after,
.i-bg-color-before-menie:before     {  background-color: #cc4646 !important;}

*/
/* text colors */

/*
.color-blue,
.color-after-blue:after,
.color-before-blue:before           {  color: #03495d;}
.i-color-blue,
.i-color-after-blue:after,
.i-color-before-blue:before         {  color: #03495d !important;}


.color-aqua,
.color-after-aqua:after,
.color-before-aqua:before           {  color: #09a3ba;}
.i-color-aqua,
.i-color-after-aqua:after,
.i-color-before-aqua:before         {  color: #09a3ba !important;}


.color-menie,
.color-after-menie:after,
.color-before-menie:before          {  color: #cc4646;}
.i-color-menie,
.i-color-after-menie:after,
.i-color-before-menie:before        {  color: #cc4646 !important;}
*/

/* border colors */
/*
.bdr-color-blue,
.bdr-color-after-blue:after,
.bdr-color-before-blue:before       {  border-color: #03495d;}
.i-bdr-color-blue,
.i-bdr-color-after-blue:after,
.i-bdr-color-before-blue:before       {  border-color: #03495d !important;}


.bdr-color-aqua,
.bdr-color-after-aqua:after,
.bdr-color-before-aqua:before       {  border-color: #09a3ba;}
.i-bdr-color-aqua,
.i-bdr-color-after-aqua:after,
.i-bdr-color-before-aqua:before       {  border-color: #09a3ba !important;}


.bdr-color-menie,
.bdr-color-after-menie:after,
.bdr-color-before-menie:before      {  border-color: #cc4646;}
.i-bdr-color-menie,
.i-bdr-color-after-menie:after,
.i-bdr-color-before-menie:before      {  border-color: #cc4646 !important;}
*/



/* - - - - - - - - - - - - - - - - - - - - - - - - -  START editor_styles  - - - - - - - - - - - - - - - - - - - - - - - - -  */


body
{
    letter-spacing:     0rem;
    position:           relative;
    color:              #333;
    background-color:   #ceedf1;
}
body,
body [class*="wp-block-"] p,
body p,
body > div 
{
    font-size:          18px;
    line-height:        1.5;
}

body, h1, h2, h3, h4, h5, h6 
{
    position:           relative;
    font-family:        'Source Sans Pro', sans-serif;
    font-style:         normal;
    font-weight:        400;
    letter-spacing:     0.5px;
    margin:             0rem;
    padding:            0rem;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 
{
    line-height:        1.1;
    font-family:        'Source Serif Pro', serif;
}
@media all and (max-width: 800px) {

    h1, h2, h3, h4, h5, h6,
    .h1, .h2, .h3, .h4, .h5, .h6 
    {

      /* These are technically the same, but use both */
      overflow-wrap: break-word;
      word-wrap: break-word;

      -ms-word-break: break-all;
      /* This is the dangerous one in WebKit, as it breaks things wherever */
      word-break: break-all;
      /* Instead use this non-standard one: */
      word-break: break-word;

      /* Adds a hyphen where the word breaks, if supported (No Blink) */
      -ms-hyphens: auto;
      -moz-hyphens: auto;
      -webkit-hyphens: auto;
      hyphens: auto;
    }    
}

.font1,
.font-1{
    font-family:        'Source Sans Pro', sans-serif;
}
.font2,
.font-2{
    font-family:        'Source Serif Pro', serif;
}


/*
*   Headers
*/
h1, .h1,
h1.entry-title,
h1.title
{
    font-size:      48px;
    letter-spacing: 1px;
    font-weight:    600;
    padding-bottom: 24px;
}
h2.entry-title,
.h2.entry-title,
h2, .h2
{
    font-size:      40px;
    letter-spacing: 0.5px;
    font-weight:    600;
    padding-bottom: 16px;
}
h3, .h3
{
    font-size:      36px;
    letter-spacing: 1px;
    font-weight:    400;
    padding-bottom: 12px;
}
h4, .h4
{
    font-size:      28px;
    letter-spacing: 1px;
    font-weight:    600;
    padding-bottom: 12px;
}
h5, .h5
{ 
    font-size:      26px;
    letter-spacing: 1px;
    font-weight:    400;
    padding-bottom: 8px;
}
h6, .h6
{ 
    font-size:      24px;
    letter-spacing: 1px;
    font-weight:    600;
    padding-bottom: 8px;
}

@media all and (max-width: 800px) 
{    
    h1.entry-title, .h1.entry-title, h1, .h1 {  font-size: 40px;    }
    h2.entry-title, .h2.entry-title, h2, .h2 {  font-size: 36px;    }
    h3, .h3 {                                   font-size: 28px;    }
    h4, .h4 {                                   font-size: 26px;    }
    h5, .h5 {                                   font-size: 24px;    }
    h6, .h6 {                                   font-size: 22px;    }
}
@media all and (max-width: 500px) 
{    
    h1.entry-title, .h1.entry-title, h1, .h1 {  font-size: 36px;    }
    h2.entry-title, .h2.entry-title, h2, .h2 {  font-size: 28px;    }
    h3, .h3 {                                   font-size: 26px;    }
    h4, .h4 {                                   font-size: 24px;    }
    h5, .h5 {                                   font-size: 22px;    }
    h6, .h6 {                                   font-size: 20px;    }
}

/*
*   Tekstlinks
*/

/* a[href^="tel"] */
a{
    cursor:             pointer;
    text-decoration:    underline;
    color:              #333;
}
a:hover{
    text-decoration:    none;
    color:              #333;
}
.entry-title a:hover, 
.entry-title a:focus,
a:hover{
    color:              #333;
}
a.btn{
    font-weight:        300;
    text-decoration:    none;
}

p a,
a.excerpt-end{
    text-decoration: underline;
    color: #09a3ba;
    font-weight: 500;
    display: inline-block;
    padding: 0px 1px 0px 1px;
    margin: 0px 2px 0px 2px;
    border: 1px solid transparent;
    border-bottom: 1px solid transparent;
    /*border-bottom: 1px solid #ccc;*/
}
a.excerpt-end,
p a.excerpt-end{
    text-decoration: none;
}
p a:hover,
p a.link:active,
a.excerpt-end:hover {
    background-color: #03495d;
    text-decoration: none;
    padding: 0px 5px 0px 5px;
    margin: 0px -2px 0px -2px;
    border: 1px solid #03495d;
    border-bottom: 1px solid #03495d;
    border-radius: 5px;
    color: #fff;
    box-shadow: 0px 0px 8px -2px #000;
    
}
p a:active,
a.excerpt-end:active {
    border-color: #09a3ba;
    background-color: #09a3ba;
    color: #fff;
    -webkit-transition: none;
    -moz-transition:    none;
    -ms-transition:     none;
    -o-transition:      none;
    transition:         none;    
}
p a.mce-anchor,
p a.mce-anchor:hover,
a.mce-anchor,
a.mce-anchor:hover{
    margin: 0px;
    padding: 0px;
    border: none;
    background: transparent;
    color: transparent;
    box-shadow: none;
    font-size: 0px;
    width: 0px;
    cursor: pointer;
}

/*
*   Admin user-stijlen
*/
.subtitle{
    color:              #09a3ba;
    font-weight:        300;
    letter-spacing:     1px;
    font-style:         italic;
    font-size:          120%;
    padding:            0px;
}
.inleiding{
    color:              #09a3ba;
    font-size:          17px;
    line-height:        1.6;
    font-weight:        600;
}
.citaat{
    color:              #09a3ba;
    text-align:         center;
    font-style:         italic;
    font-size:          24px;
    line-height:        1.9;
    margin:             32px 15%; 
}
.vlak{
    margin-top:         32px;
    margin-bottom:      32px;
    padding:            16px;
}
.kader{
    border-width:       1px;
    border-style:       solid;
    margin-top:         32px;
    margin-bottom:      32px;
    padding:            16px;
}
.devider{
    font-size:          0;
    line-height:        0;
    margin-top:         32px;
    margin-bottom:      32px;
    position: relative;
}
.devider *{
    display:            none;
}
.devider .devider-icon{
    display: block;
    position: absolute;
    left: 50%;
    top: -3px;
    margin-left: -32px;
    margin-top: -32px;
    width: 64px;
    height: 64px;
    background-color: #fff;
    border-radius: 100%;
    border: 4px dotted #fff;
}


[class*='bdr-dot']{
    border-width: 0px;
    border-style: solid;
}
.bdr-dot{
    border-width: 6px;
}
[class*='bdr-dot-top']{
    border-top-width: 6px;
}
[class*='bdr-dot-bottom']{
    border-bottom-width: 6px;
}
[class*='bdr-dot-left']{
    border-left-width: 6px;
}
[class*='bdr-dot-right']{
    border-right-width: 6px;
}
.bdr-dot-large{
    border-width: 9px;
}
.bdr-dot-top-large{
    border-top-width: 9px;
}
.bdr-dot-bottom-large{
    border-bottom-width: 9px;
}
.bdr-dot-left-large{
    border-left-width: 9px;
}
.bdr-dot-right-large{
    border-right-width: 9px;
}


.list ol > li:before,
#tinymce ol > li:before {
    color: #09a3ba; 
}

.list ul > li:before,
#tinymce ul > li:before {
    color: #09a3ba; 
}




/* - - - - - - - - - - - - - - - - - - - - - - -  END editor_styles - - - - - - - - - - - - - - - - - - - - - - -  */




.nav-primary:after {
    background-image: linear-gradient( to right , #09a3ba 0% , transparent );
}
.nav-primary:before{
    background-image: linear-gradient( to right , transparent 0% , #09a3ba );
}

.shortcode-toc a{
        text-decoration: none;
}
.shortcode-toc a:hover{
        text-decoration: underline;
}
.shortcode-toc > ul > li > a {
        font-weight: 600;
}
.toc-nav-box{
    position: absolute;
    display: block;
    left: 0px;
    top: 0px;
    z-index: 5000;
    position: fixed;
    top: 64px;
    -webkit-transform: translateX(-50%); 
    -moz-transform: translateX(-50%); 
    -ms-transform: translateX(-50%); 
    -o-transform: translateX(-50%); 
    transform: translateX(-50%);
    opacity: 0.2;
    -webkit-transition: opacity 2s ease-in-out;
    -moz-transition:    opacity 2s ease-in-out;
    -ms-transition:     opacity 2s ease-in-out;
    -o-transition:      opacity 2s ease-in-out;
    transition:         opacity 2s ease-in-out;
}
.toc-nav-box:hover,
.toc-nav-box.focus{
    opacity: 1;
    -webkit-transition: opacity 0.3s ease-in-out;
    -moz-transition:    opacity 0.3s ease-in-out;
    -ms-transition:     opacity 0.3s ease-in-out;
    -o-transition:      opacity 0.3s ease-in-out;
    transition:         opacity 0.3s ease-in-out;
}

.toc-nav-box .toc-nav{
    border-radius: 8px;
    padding: 4px;
    opacity: 0;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition:    all 0.3s ease-in-out;
    -ms-transition:     all 0.3s ease-in-out;
    -o-transition:      all 0.3s ease-in-out;
    transition:         all 0.3s ease-in-out;
    box-shadow: 0px 0px 16px -3px #000;
}
.toc-nav-box.active .toc-nav{
    opacity: 1;
}
.toc-btn{
    display: block;
    margin: 4px;
    border-radius: 100%;
    background-position: center center;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-image: url(../images/icon-arrow-black.svg);
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition:    all 0.3s ease-in-out;
    -ms-transition:     all 0.3s ease-in-out;
    -o-transition:      all 0.3s ease-in-out;
    transition:         all 0.3s ease-in-out;
    width: 0px;
    height: 0px;
    cursor: pointer;
}
.toc-nav-box.active .toc-btn{
    width: 32px;
    height: 32px;
}
.toc-btn:hover{
    background-color: #000 !important;
    background-image: url(../images/icon-arrow-white.svg);
}
.toc-btn.prev{
    -webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg); 
    -ms-transform: rotate(90deg); 
    -o-transform: rotate(90deg); 
    transform: rotate(90deg);
}
.toc-btn.next{
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    -ms-transform: rotate(-90deg); 
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
}



/*
*
*/
.price .currency{
    padding-right: 4px;
}



/*
 *  mask-image
*/

.mask-image-box{
    position: relative;
}
.mask-image{
    position: relative;
    overflow: hidden;
    padding-top: 30%;
    width: 100%;
}
.mask-image-content{
    position: absolute;
    display: block;
    width:100%;
    left: 0px;
}
.mask-image-content.fit{
    min-height:100%;
    min-width:100%;
    width: auto;
    height: auto;
}
.mask-image-content.fit{
    min-width: 100%;
    width: auto;
    height: auto;
}
.mask-image-content.fit > *{
    height: 100%;
}
.mask-image-content > p {
    display: none;
}
.mask-image-content.fit img{
    width: auto;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;    
}
.mask-image-content,
.mask-image-content.middle{
    top: 50%;
    -webkit-transform: translateY(-50%); /* Chrome, Safari, Opera */
    -moz-transform: translateY(-50%); /* IE 9 */
    -ms-transform: translateY(-50%); /* IE 9 */
    -o-transform: translateY(-50%); /* IE 9 */
    transform: translateY(-50%); 
}
.mask-image-content.bottom{
    top: 100%;
    -webkit-transform: translateY(-100%); /* Chrome, Safari, Opera */
    -moz-transform: translateY(-100%); /* IE 9 */
    -ms-transform: translateY(-100%); /* IE 9 */
    -o-transform: translateY(-100%); /* IE 9 */
    transform: translateY(-100%); 
}
.mask-image-content.top{
    top: 0px;
    -webkit-transform: translateY(0%); /* Chrome, Safari, Opera */
    -moz-transform: translateY(0%); /* IE 9 */
    -ms-transform: translateY(0%); /* IE 9 */
    -o-transform: translateY(0%); /* IE 9 */
    transform: translateY(0%); 
}
.mask-image-content img{
    width: 100%;
}
.mask-image-content .p{
    display: none;
}
.mask-image-content .image-wrapper{
    padding:0px;
    margin:0px;
}
.mask-image-content.fit .image-wrapper{
    height: 100%;
}


/*
*   Header and Footer
*/

.layoutblock.image-header{
    margin-bottom: -192px;
}
.layoutblock.image-header.front{
    margin-bottom: -96px;
}
@media all and (max-width: 1400px) {
    .layoutblock.image-header{
        margin-bottom: -128px;
    }
}
@media all and (max-width: 800px) {
    .layoutblock.image-header.front,
    .layoutblock.image-header{
        margin-bottom: -48px;
    }
}
@media all and (max-width: 600px) {
    .layoutblock.image-header.front,
    .layoutblock.image-header{
        margin-bottom: -32px;
    }
}
.footer-box [class*="flex-content-sidebar"] .content-flex {
    background-color: #03495d;
}
.footer-box [class*="flex-content-sidebar"] .entry-flex {
    padding-top: 0px;
    padding-bottom: 0px;
}
.site-footer .privacy-menu .menu-item.btn:hover{
    background-color: #09a3ba;
}

.footer-txt-title,
.nawgegevens-footer .bedrijf{
    font-weight: 800;
}
.nawgegevens-footer .telefoon{
    margin-top: 16px;
}



/*
*   Sticker (hover in sidebar)
*/

.sticker-box{
    width: 100%;
}
.sticker-box,
.sticker{
   position: relative; 
   display: block;
   margin:0px;
   padding:0px;
}
.sticker{
    top:0px;
}
body:not(.collapse-layout) .sticker.stick{
   position: fixed; 
   top:0px;
}




/*
*   Duotone images
*/

.duotone.slider-item:before,
.duotone.slider-item:after,
.duotone .image-box:after,
.duotone .image-box:before {
    content: '';
    position: absolute;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    z-index: 0;
    pointer-events: none;
}

.duotone.slider-item:before,
.duotone .image-box:before {
    mix-blend-mode: darken;
    background-color: #09a3ba;
    background-color: #ceedf1;
    z-index: 3;
}

.duotone.slider-item:after,
.duotone .image-box:after {
    mix-blend-mode: color;
    background-color: #03495d;
    z-index: 4;
}
.duotone.slider-item .image,
.duotone .image-box .image {
    -webkit-filter: grayscale(1) brightness(120%) contrast(1.2);
    -moz-filter:    grayscale(1) brightness(120%) contrast(1.2);
    -ms-filter:     grayscale(1) brightness(120%) contrast(1.2);
    -o-filter:      grayscale(1) brightness(120%) contrast(1.2);
    filter:         grayscale(1) brightness(120%) contrast(1.2);  
}


/* 
*   Fade bottom to background-color 
*/

.layoutblock .image-header-front:before,
.layoutblock.image-header:before {
    content: '';
    position: absolute;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    z-index: 0;
    pointer-events: none;
}
.layoutblock.image-header-front:before,
.layoutblock.image-header:before {
    z-index: 6;
    background: linear-gradient( rgba(206,237,241,0) 70% , #ceedf1 95% ); /* aqua-semi */
}


/*
*   Layoutblocks
*/

.layoutblock.main,
.layoutblock.tekst{
    padding-top: 0px;
    padding-bottom: 32px;
}
.layoutblock.buttonlink-to-bottom .pagelink,
.layoutblock.pagelink-to-bottom .pagelink{
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    margin: 16px 36px;
    margin-bottom: 32px;
}
.layoutblock.buttonlink-to-bottom .column,
.layoutblock.pagelink-to-bottom .column{
    padding-bottom: 80px;
}
.layoutblock.main .nen-content,
.layoutblock .column{
    padding: 32px;
    background-color: #fff;
}
.layoutblock.main .nen-content,
.layoutblock.promo .column,
.layoutblock.question-box .column,
.layoutblock.tekst-1-kolom .column{
    padding: 32px 64px;
}
.layoutblock.main .nen-content{
    border-top-width: 8px;
    border-top-style: solid;
    border-top-color: #fff;
    min-height: 480px;
}
.home .layoutblock.main .nen-content{
    min-height: 0px;
}
@media all and (max-width: 800px) {
    .layoutblock .column,
    .layoutblock.promo .column,
    .layoutblock.question-box .column,
    .layoutblock.main .nen-content{
        padding-left: 32px !important;
        padding-right: 32px !important;
    }
}
@media all and (max-width: 400px) {
    .layoutblock .column,
    .layoutblock.promo .column,
    .layoutblock.question-box .column,
    .layoutblock.main .nen-content,
    .layoutblock .column{
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}
.layoutblock.main .nen-content,
.layoutblock.tekst-1-kolom .grid-outer-margin,
.layoutblock:not(.tekst-1-kolom) .column{
    box-shadow: 0px 8px 32px -12px #000;
}
.layoutblock.tekst.promo .column.title,
.layoutblock.tekst-1-kolom .column.title{
    padding-bottom: 0px;
}
.layoutblock.tekst .wrap + .wrap .column{
    padding-top: 0px;
}
.layoutblock.main + .layoutblock.image,
.layoutblock.tekst + .layoutblock.image{
    margin-top: 32px;
}
.layoutblock.image + .layoutblock.tekst{
    margin-top: -96px;
}
@media all and (max-width: 800px) {
    .layoutblock.main,
    .layoutblock.image + .layoutblock.tekst{
        margin-top: -64px;
    }
}
@media all and (max-width: 600px) {
    .layoutblock.main,
    .layoutblock.image + .layoutblock.tekst{
        margin-top: -32px;
    }
}
.layoutblock .image-cover{
    position: absolute;
    width:100%;
    height: 100%;
    top:0px;
    left:0px;
    z-index: 5;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-transition: all 0.8s ease-in-out;
    -moz-transition:    all 0.8s ease-in-out;
    -ms-transition:     all 0.8s ease-in-out;
    -o-transition:      all 0.8s ease-in-out;
    transition:         all 0.8s ease-in-out;
    opacity: 1;
}
.duotone.on .image-cover,
.layoutblock.active .image-cover{
    opacity: 0;
}
.layoutblock.image-header-front .image-box      { max-height: 100%; }
.layoutblock.image .image-box,
.layoutblock.image-header .image-box { 
    max-height: none;
    padding-top: 40%; 
    height: auto;
}
.layoutblock.image-slider .slider-box { 
    max-height: none;
    padding-top: 50%; 
    height: auto;
}
.layoutblock.image-slider .slider { 
    position: absolute;
    top:0px;
}

@media all and (max-width: 1536px) {
    .layoutblock.image .image-box{ 
        padding-top: 40%; 
    }
}

@media all and (min-width: 1440px) {
    .layoutblock.image .image-box,
    .layoutblock.image-header .image-box { 
        padding-top: 0px;
        height: 560px;
        max-height: 560px;
    }
}
@media all and (max-width: 1200px) {
    .layoutblock.image .image-box,
    .layoutblock.image-header .image-box { 
        padding-top: 50%; 
    }
}
@media all and (max-width: 800px) {
    .layoutblock.image .image-box,
    .layoutblock.image-header .image-box { 
        padding-top: 60%; 
    }
}
@media all and (max-width: 600px) {
    .layoutblock.image .image-box,
    .layoutblock.image-header .image-box { 
        padding-top: 70%; 
    }
}
@media all and (max-width: 500px) {
    .layoutblock.image .image-box,
    .layoutblock.image-header .image-box { 
        padding-top: 100%; 
    }
}
.layoutblock.image-header .image-box-fitter{
    margin: auto;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    width: auto;
    height: auto;
    position: absolute;
}
.layoutblock.image-header .image-box-fitter > .wrap{
    height: 100%;
}





/*
*   Hovercover
*/

.projects.tiles [class*=' hvrcvr-'][class*=' cvr-']:hover:after{
    opacity: 0;
}




/*
*   arrows
*/

[data-arrow]{
    position: relative;
}
[data-arrow]:before{
    content:"";
    position:absolute;
    left:0px;
    top: 50%;
    margin-top:-14px;
    width:28px;
    height:28px;
    border-width: 1px;
    border-style: solid;    
    border-radius: 4px;
    background-position: center center;
    background-size: 20px 20px;
    background-repeat: no-repeat;
}

a[data-arrow]:hover:before,
div[data-arrow]:hover:before,
[data-arrow].hover:before {
    background-color: #000;
    border: 1px solid #000;
    color: #fff;
    background-image: url(../images/icon-arrow-white.svg);
}
[data-arrow*="small"]:before {
    width:20px;
    height:20px;
    margin-top:-10px;
    border-radius: 2px;
    background-size: 16px 16px;
}
[data-arrow*="in "]:before {
}
[data-arrow*="out "]:before {
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    -moz-transform: rotate(180deg); /* IE 9 */
    -ms-transform: rotate(180deg); /* IE 9 */
    -o-transform: rotate(180deg); /* IE 9 */
    transform: rotate(180deg);
}

[data-arrow*="outline"]:before{
    background-color: transparent;
}
/* extra border */
[data-arrow]:after {
    content: '';
    position: absolute;
    width: calc(34px);
    height: calc(34px);
    border-width: 1px;
    border-style: solid;
    z-index: 0;
    left: -3px;
    top: calc(50% - 3px);
    margin-top: 0px;
    border-radius: 6px;
    margin-top: -14px;
    opacity: 1;
}
[data-arrow]:hover:after {
    border-width: 2px;
    width: calc(36px);
    height: calc(36px);
    left: -4px;
    top: calc(50% - 4px);
}

[data-arrow*="small"]:after {
    width: calc(26px);
    height: calc(26px);
    border-radius: 4px;
    margin-top: -10px;
}
[data-arrow*="small"]:hover:after {
    border-width: 2px;
    width: calc(28px);
    height: calc(28px);
}
.align-right > [data-arrow]:after{
    left: auto;
    right: -3px;
}
.align-right > [data-arrow]:hover:after {
    right: -4px;
}





/*
*   single post
*/
.next-prev{
    position: relative;
    margin: 64px 0px 32px 0px;
    border-top-width: 1px;
    border-top-style: solid;
}
.next-prev .pagelink{
    margin: 8px 0px;
}





/*
*   Social buttons
*/

.socialbutton #single *{
    opacity: 1;
}
.socialbutton #bg,
.socialbutton #element{
    opacity: 0;
}
.socialbutton #single *{
    fill: #03495d;
}
.socialbutton:hover #single *{
    opacity: 0;
}
.socialbutton:hover #bg,
.socialbutton:hover #element{
    opacity: 1;
}






/*
*   Btn's (display als knop)
*/
.site-inner button,
.site-inner .button,
.site-inner input[type="button"],
.site-inner input[type="reset"],
.site-inner input[type="submit"],
.site-inner .btn,
.btn{
    position: relative;
    display: inline-block;
    padding: 0px 12px 0px 12px; 
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
    z-index: 0;
    line-height: 32px;
    margin-left:5px;
    background-color: #09a3ba;
    border-color: #09a3ba;
    border-width: 1px;
    border-style: solid;
}
.btn.small{
    padding: 0px 4px 0px 4px;
    border-radius: 3px;
    line-height: 24px;
    margin-left:5px;
    font-size: 95%;
}
.btn:hover{
    border-color: #000 !important;
    background-color: #000 !important;
    color: #fff !important;
}
.btn[class*="arrow-"]:before{
    background-color: #fff;
    left:10px;
    top:6px;
    color: #03495d;
}
.btn:hover[class*="arrow-"]:before{
    color: #000 !important;
}
.btn:after {
    content: '';
    position: absolute;
    width: calc(100% - -8px);
    height: calc(100% - -8px);
    border-width: 1px;
    border-style: solid;
    z-index: 0;
    left: -4px;
    top: -4px;
    margin-top: 0px;
    border-radius: 6px;
    opacity: 1;
}
.btn:hover:after {
    opacity: 1;
    border-width: 2px;
    width: calc(100% - -10px);
    height: calc(100% - -10px);
    left: -5px;
    top: -5px;
    border-color: #000 !important;
}




/*
*   button-links (link naar pagina)
*/

.link-btn{
    position: relative;
    text-decoration: none;
    padding: 0px;
    padding-left: 48px;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}
.link-btn[data-arrow*='small']{
    padding-left: 36px;
}
.pagelink.align-right .link-btn[data-arrow*='small'] {
    padding-right: 36px;
}
.link-btn:hover{
    color: #000;
}



/*
 *  slider 
*/


.slider{
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}
.slide{
    position: relative;
    text-align: center;
    display: inline-block;
    width: 100%;
    height: 100%;
    margin: 0px;
    bottom: 0px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
.slick-prev{
    left:-32px;
    -webkit-transform: translateX(-50%); /* Chrome, Safari, Opera */
    -moz-transform: translateX(-50%); /* IE 9 */
    -ms-transform: translateX(-50%); /* IE 9 */
    -o-transform: translateX(-50%); /* IE 9 */
    transform: translateX(-50%); 
}
.slick-next{
    right:-32px;
    -webkit-transform: translateX(50%); /* Chrome, Safari, Opera */
    -moz-transform: translateX(50%); /* IE 9 */
    -ms-transform: translateX(50%); /* IE 9 */
    -o-transform: translateX(50%); /* IE 9 */
    transform: translateX(50%); 
}
.slick-prev:before,
.slick-next:before{
    opacity: .15;
}

/* DEZE REGEL TOEVOEGEN OM DE SLIDES DIV-VULLEND TE TONEN */
.slick-slider .slick-track, .slick-slider .slick-list { height: 100%; }
.slick-slider{ margin: 0px;}

.slick-slider .slick-dots li:only-child{
    display: none;
}
.slick-slider .btn-prev, 
.slick-slider .btn-next {
    color: #fff;
    background: #03495d;
}
.slick-slider .slick-dots li button:before {
    content: '';
    border-radius: 100%;
    background-color: #ffffff;
    opacity: 1;
    top:2px;
    left:2px;
    width: 12px;
    height: 12px;
    border: 2px solid #fff;
    box-shadow: 0px 0px 0px 2px #ffffff;
}
.slick-slider .slick-dots li.slick-active button:before {
    background-color: #000000;
    opacity: 1;
}
.slick-slider .slick-dots li button:hover:before {
    box-shadow: 0px 0px 0px 2px #000;
}
.slick-slider .slick-prev:before, 
.slick-slider .slick-next:before{
    opacity: 1;
}
.slick-slider .slick-prev:hover:before, 
.slick-slider .slick-prev:focus:before, 
.slick-slider .slick-next:hover:before, 
.slick-slider .slick-next:focus:before {
    color: #000;
}
.image-header-front .slick-slider .slick-dots,
.single-project .slick-slider .slick-dots{
    position: absolute;
    bottom: 0px;
    padding-bottom: 16px;
}
.image-header-front .slick-slider .slick-dots{
    padding-bottom: 32px;
}




/*
*   widget_nen-pages-menu
*/

.pages-menu{
    margin-top:0px;
    font-weight: 400;
}
.pages-menu .pm-path{
    margin-bottom:8px;
}
.pages-menu .menu{  /* eerste ul */
    margin-top:0px;
}
.pages-menu .sub-menu{  /* elke ul ul */
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 18px;
    margin-top: 4px;
    margin-bottom: 0px;
}

.pages-menu .menu-item-has-children li:before {
    content: none;
    background-color: transparent;
}
.pages-menu li.menu-item-has-children:not(.active):before {
    /* content: "+"; */  /* inverse \203A */
    position: absolute;
    left:-16px;
    line-height: 12px;
    top:8px;
    color: inherit;
}

.pages-menu .menu-item{
    line-height: 1.2;
    padding-top: 4px;
    padding-bottom: 4px;
}
.pages-menu .pm-path-item,
.pages-menu li,
.pages-menu li.current_page_item.active > a,
.pages-menu a{
    color: #03495d;
    padding: 0px 0px;
}
.pages-menu .pm-path-item.active > a,
.pages-menu li.active,
.pages-menu li.current_page_item.active > a{
    font-weight: 400;
    text-decoration: none;
    color: #333;
}
.pages-menu li.current_page_item.active:after {
    content: none;
    width: 5px;
    height: 5px;
    left: -16px;
}


/*
*   icons
*/

[class*='icon-'],
[class*='icon-bg']{
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}
span[class*='icon-']{
    display: inline-block;
    width: 32px;
    height: 32px;
    margin: 0px 4px -10px 0px;
}
[class*='icon-cl']{ background-position: center left; }
[class*='icon-tl']{ background-position: top left; }
[class*='icon-bl']{ background-position: bottom left; }
[class*='icon-cr']{ background-position: center right; }
[class*='icon-tr']{ background-position: top right; }
[class*='icon-br']{ background-position: bottom right; }
[class*='icon-tc']{ background-position: top center; }
[class*='icon-bc']{ background-position: bottom center; }
[class*='icon-left']{
    background-position: left center;
}
[class*='icon-right']{
    background-position: right center;
}
[class*='icon-after'],
[class*='icon-before']{
    position: relative;
}
[class*='icon-after']:after,
[class*='icon-before']:before{
    content: '';
    position: absolute;
    width: 32px;
    height: 32px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    border-radius: 0;
    background-image: inherit;
}
[class*='icon-after']:after{
    top: 0px;
}

[class*='icon-after'],
[class*='icon-before']{
    background-size: 0px 0px;
    display: inline-block;
}
.icon-fit:after,
.icon-fit:before{
    top:0px;
    left:0px;
    width: 100%;
    height: 100%;
}

h6 [class*='icon-'] {
    width: 64px;
    height: 64px;
    display: inline-block;
    margin-bottom: -24px;
    margin-right: 16px;
}



/*
*   Title-tabs
*/

.title-tab-box{
    position: relative;
    width: 100%;
}
.title-tab .title,
.title-tab h1,
.title-tab h2{
    color: inherit;
    padding-bottom: 0px;
    margin-top: 12px;
    margin-bottom: -12px;
}
.layoutblock .title-tab-box:first-of-type .title{
    font-style: italic;
    font-size: 120%;
    font-weight: 300;
    letter-spacing: 1px;
}


/*
*   Tab normal
*/
[class*='title-tab-left'] .tab{
    position: relative;
    padding-top:24px;
    margin-top:-64px;
    margin-right: 352px;
    min-height: 64px;
}
.title-tab-left-6 .tab{
    margin-right: 32px;
}
.title-tab-right .tab{
    position: relative;
    padding-top:24px;
    margin-top:-64px;
    margin-left: 32.3%;
    min-height: 64px;
}


/*
*   Tab small
*/
.title-tab-left-small,
.title-tab-right-small{ 
    font-size: 24px;
    font-size: 2.4rem;
    line-height: 32px;
    line-height: 3.2rem;
    font-weight: 600;
}
.title-tab-left-small .tab{ 
    position: absolute;
    padding: 12px 16px 0px 16px;
    margin-left: 0px;
    margin-top:-40px;
    left:0px;
    min-height: 0px;
}
.title-tab-right-small .tab{ 
    position: absolute;
    padding: 12px 16px 0px 16px;
    margin-right: 0px;
    margin-top:-40px;
    right:0px;
    min-height: 0px;
}

.filler{
    position: absolute;
    width: 30%;
    height:64px;
    margin: 0px auto;
    margin-top:-64px;
}
[class*='title-tab-left'] .filler{
    left:0px;
}
.title-tab-right .filler{
    right:0px;
}
.title-tab .subtitle{
    font-size: 16px;
    font-size: 1.5rem;
    line-height: 24px;
    line-height: 2.4rem;
    color: #776655;
    font-weight: 300;
    font-style: normal;
    letter-spacing: 0.5px;
    padding: 0px;
    padding-bottom: 8px;
}
.title-tab[class*='bg-color-groen'] .subtitle{
    color: #5f554a;
}




/*
 *  widget
*/
.sidebar-flex .textwidget
{
    padding: 8px 12px;
}
.widget.text-promo-events 
{
    margin-top: 32px;
}
.widget.table-of-contents
{
    margin-top: 32px;
}




/*
*   mce-table
*/
table.mce-table{
    position: relative;
    clear: both;
}
table.mce-table{
    border-spacing: 4px;
    border-collapse: separate !important;
    float: none;
    clear: both;
    font-size: 90%;
}
table.mce-table{
    border-top: 2px solid #bbb;
    border-bottom: 2px solid #bbb;
}
table.mce-table td{
    border-bottom: 1px solid #ddd;   
    padding: 8px 4px; 
}
table.mce-table tr[class*="bdr-color"] td,
table.mce-table tr[class*="i-bdr-color"] td{
    border-color: inherit !important;
}
table.mce-table td:first-child{
    width: 40%; 
}
table.mce-table tr:last-child th,
table.mce-table tr:last-child td{
    border-bottom: none;   
}
table.mce-table.info-types td:nth-child(1){
    font-weight: 600;
}
table.mce-table.info-types td:nth-child(2){
    font-style: italic;
}
.collapse-layout table.mce-table,
.collapse-layout table.mce-table tbody,
.collapse-layout table.mce-table th,
.collapse-layout table.mce-table tr,
.collapse-layout table.mce-table td{
    width: 100% !important;
    display: block !important;
    position: relative;
    margin: 0px;
    height: auto !important;
}
.collapse-layout table.mce-table .nbsp{
    display: none;
}
.collapse-layout table.mce-table td:not(:last-child){
    border-bottom: none;
}

.collapse-layout table.mce-table td{
    padding: 8px; 
}
.collapse-layout table.mce-table td + td{
    padding-left: 24px; 
}
.collapse-layout table.mce-table td + td:not(:last-child){
    padding-top: 0px;
    padding-bottom: 0px;
}
.collapse-layout table.mce-table td:first-child{
    padding-bottom: 0px;
}
.collapse-layout table.mce-table td:last-child{
    padding-top: 0px; 
}


.mce-table-box.mask{
    position: relative;
    display: block;
    clear: both;
    max-height: 320px;
    overflow: hidden;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition:    all 0.3s ease-in-out;
    -ms-transition:     all 0.3s ease-in-out;
    -o-transition:      all 0.3s ease-in-out;
    transition:         all 0.3s ease-in-out;
}
.mce-table-box.mask.active{
    position: relative;
    display: block;
    clear: both;
    max-height: 2000px;
}
.mce-table-box.mask:after{
    content:'';
    position: absolute;
    width: 100%;
    height: 80px;
    left:0px;
    bottom: 0px;
    z-index: 1;
    border-bottom: 2px solid transparent;
    background: linear-gradient( to top , #ceedf1 25% ,  rgba(206,237,241,0) 100% ); /* aqua-semi */
}
.mce-table-box.mask.active:after{
    content: none;
}
.mce-table-box .btn{
    position: absolute;
    left: 50%;
    bottom: 16px;
    z-index: 2;
    padding: 0px 8px;
    line-height: 24px;
    -webkit-transform: translateX(-50%); /* Chrome, Safari, Opera */
    -moz-transform: translateX(-50%); /* IE 9 */
    -ms-transform: translateX(-50%); /* IE 9 */
    -o-transform: translateX(-50%); /* IE 9 */
    transform: translateX(-50%); 
}
.mce-table-box .btn:after,
.mce-table-box .btn:before{
    content: none;
}
.mce-table-box.active .btn{
    display: none;
}


/*
*   Footer
*/
.layoutblock.question-box .column{
    padding-top:16px;
    padding-bottom:8px;
}
.footer-extender,
.footer-extender-box{
    position: relative;
    width:100%;
    padding: 0px 0px;
    margin-top: 0px;
}
.layoutblock.footer-quote{
    margin-top: -240px;
}
.layoutblock.footer-quote .entry-flex {
    padding-top: 96px;
    padding-bottom: 64px;
}
.collapse-layout .layoutblock.footer-quote{
    margin-bottom: 160px;
}
.layoutblock.quote,
.footer-extender-quote-box{
    padding-top: 64px;
    padding-bottom: 64px;
}
.layoutblock.quote .wrap{
    max-width: 800px;
}
.quote-content .quote,
.layoutblock.quote .quote,
.layoutblock.footer-quote .quote,
.footer-extender-quote .quote{
    position: relative;
    font-size: 3.2rem;
    line-height: 3.6rem;
    font-weight: 500;
    font-style: italic;
    letter-spacing: 1px;
    margin-bottom: 16px;
}
.quote-content.sc-in-content .quote{
    font-size: 2.6rem;
    line-height: 2.8rem;
    margin-top: 32px;
}
.quote-content.sc-in-content .quote-credits + .quote{
    margin-top: 16px;
}

.layoutblock.quote .quote-credits-box,
.layoutblock.footer-quote .quote-credits-box,
.footer-extender-quote .quote-credits-box{
    text-align: right;  
}
.quote-content .quote-credits,
.layoutblock.quote .quote-credits,
.layoutblock.footer-quote .quote-credits,
.footer-extender-quote .quote-credits{
    text-align: left;
    padding: 0px;
    margin: auto;
    margin-top: -8px;
    padding-bottom: 16px;
    position: relative;
    display: block;
}
.quote-content .quote-credits .function:before,
.layoutblock.quote .quote-credits .function:before,
.layoutblock.footer-quote .quote-credits .function:before,
.footer-extender-quote .quote-credits .function:before{
    content: " - ";
}
.quote-content  .quote-credits .company:before,
.layoutblock.quote .quote-credits .company:before,
.layoutblock.footer-quote .quote-credits .company:before,
.footer-extender-quote .quote-credits .company:before{
    content: " | ";
}
.quote-content .quote:first-child:before,
.layoutblock.quote .quote:first-child:before,
.layoutblock.footer-quote .quote:first-child:before,
.footer-extender-quote .quote:first-child:before{
    content: "\201C";
    position: absolute;
    /*font-family: 'Caecilia', sans-serif;*/
    font-size: 72px;
    font-weight: 400;
    font-style: italic;
    top:-32px;
    left:0px;
}
.layoutblock.quote .cell .quote,
.layoutblock.footer-quote .cell .quote,
.footer-extender-quote .cell .quote{
    margin-left: 32px;
}
.layoutblock.quote .cell:first-child,
.layoutblock.footer-quote .cell:first-child,
.footer-extender-quote .cell:first-child{
    width:25%;
    position: relative;
}
.layoutblock.quote .image,
.layoutblock.footer-quote .image,
.footer-extender-quote .image{
    display: block;
    position: relative;
    width: 100%;
    padding-top: 100%;
    top: 0px;
    left: 0px;
    bottom: 48px;
    margin-top: -48px;
    /*
    mix-blend-mode: screen;
    -webkit-filter: grayscale(100%) invert(100%) contrast(100%);
    -moz-filter: grayscale(100%) invert(100%)  contrast(100%);
    -ms-filter: grayscale(100%) invert(100%)  contrast(100%);
    -o-filter: grayscale(100%) invert(100%)  contrast(100%);
    filter: grayscale(100%) invert(100%)  contrast(100%);
    opacity: 1;
    */
}
@media all and (max-width: 700px) {
    .layoutblock.quote .cell,
    .layoutblock.footer-quote .cell,
    .footer-extender-quote .cell{
        display: block !important;
        width:100%;
    }
    .layoutblock.quote .cell:first-child,
    .layoutblock.footer-quote .cell:first-child,
    .footer-extender-quote .cell:first-child{
        width:100%;
    }
    .layoutblock.quote .image,
    .layoutblock.footer-quote .image,
    .footer-extender-quote .image{
        width: 100%;
        padding-top: 50%;
    }
    .layoutblock.quote .cell .quote,
    .layoutblock.footer-quote .cell .quote,
    .footer-extender-quote .cell .quote{
        margin: 0px;
        margin-top: 64px;
    }
}



/*
*   Paginanummering
*/
.pagination{
    margin-top:32px;
}
.page-numbers{
    background-color: #09a3ba;
    border: 1px solid #09a3ba;
    border-radius: 4px;
    background-position: center center;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    
    position:relative;
    display: inline-block;
    left:0px;
    top: -4px;
    width:32px;
    height:32px;
    font-size: 20px;
    font-size: 2.0rem;
    line-height: 30px;
    text-align: center;
    color: #fff;
    text-decoration: none;
}
a.page-numbers,
.page-numbers.dots{
    background-color: #fff;
    color: #09a3ba;
    border-color: #09a3ba;
}
a.page-numbers:hover {
    background-color: #000;
    color: #fff;
    border-color: #000;
}



/* 
*  nen-cf7
*/
.wpcf7-form .verplicht,
div.wpcf7 .form-box .one-third {
    color: #03495d;
}
.wpcf7-form-close, 
.wpcf7-form-divider, 
[class*='wpcf7-form-spacer'] {
    border-color: #09a3ba;
}
div.wpcf7 .form-box  {
    border: none;
}   
div.wpcf7 .form-box,
.wpcf7-form-close {
    border-color: #09a3ba;
}   
.wpcf7 h6{
    padding-top: 16px;
}
.wpcf7 .show-on-type{
    max-height: 0px;
    overflow: hidden;
}
.wpcf7 .active .show-on-type{
    max-height: 1000px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition:    all 0.3s ease-in-out;
    -ms-transition:     all 0.3s ease-in-out;
    -o-transition:      all 0.3s ease-in-out;
    transition:         all 0.3s ease-in-out;
}
.wpcf7 .btn{
    color: #03495d;
}
.wpcf7 .btn:hover{
    color: #fff;
    border-color: #000;
}
.wpcf7 .option{
    display: table;
    border-collapse: collapse;
    width: 100%;
}
.wpcf7 .option > div {
    display: table-cell;
}
.wpcf7 .option > div:first-child {
    width: 40px;
}
.wpcf7 .option .wpcf7-list-item-label{
    display: none;
}
.wpcf7 input[name="order-quantity"]{
    width: 40px;
    padding: 5px;
    text-align: center;
}
.wpcf7 .adjust-quantity{
    width: 30px;
    height: 30px;
    margin-bottom: -10px;
    display: inline-block;
    position: relative;
    border: 1px solid #aaa;
    box-sizing: content-box;
    cursor: pointer;
    background-position: center center;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-image: url(../images/icon-arrow-green.svg);
    opacity: .4;    
}
.wpcf7 .adjust-quantity.minus{
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    -moz-transform: rotate(180deg); /* IE 9 */
    -ms-transform: rotate(180deg); /* IE 9 */
    -o-transform: rotate(180deg); /* IE 9 */
    transform: rotate(180deg);
}
.wpcf7 .adjust-quantity.active{
    opacity: 1;    
}
.wpcf7 .adjust-quantity:before{
    display: none;    
}
.wpcf7 .adjust-quantity.active:before{
    display: block;    
}
.wpcf7 .order-note textarea {
    height: 120px;
}
.wpcf7 .order-total {
    font-weight: 600;
}
.wpcf7 .order-total .currency,
.wpcf7 .order-total .units{
    font-size: 200%;
    font-weight: 600;
}
.wpcf7 .order-total .currency {
    padding-right: 12px;
}
.wpcf7 .order-total-info{
    padding-left:16px;
}





/* 
*   query var filter 
*/
.qv-filter{
    padding-top:32px;
}
.qv-filter .items-title{
    font-size: 135%;
    font-style: italic;
    margin-bottom:8px;
}
.qv-filter .item{
    position: relative;
    margin: 4px 0px;
}
.qv-filter .items{
    padding-top: 4px;
}
.qv-filter .item a{
    text-decoration: none;
    padding-left: 32px;
    display: block;
}
.qv-filter .item a{
    left:0px;
    background-image:url('../images/icon-checkbox-off-black.svg');
}
.qv-filter.active .item.active a,
.qv-filter:not(.active) .item a
{
    background-image:url('../images/icon-checkbox-on-black.svg');
    color: #000 !important;
}
.qv-filter.active .item.active a{
    cursor: default;
}
.qv-filter .item.active a:before
{
    content: none;
}
.qv-filter .reset{
    margin-top: 16px;
}
.qv-filter:not(.active) .reset{
    display:none;
}





/*
 *  checklist
*/

.checklist{
    font-size: 115%;
    line-height: 1.2;
    margin: 16px 0px;
}
.checklist ul{
    padding: 0px;
    margin: 0px;
    margin-right: 8px;
}
.checklist ul > li{
    position: relative;
    display: block;
    list-style: none; /* Remove list bullets */
    padding: 0;
    margin: 20px 0px;
    padding-left: 0px;
    margin-left: 48px;
}
.checklist:first-child,
.checklist:first-child ul > li:first-child{
    margin-top: 0px;
}
.checklist ul > li:before{
    content: ""; 
    position: absolute;
    left: -48px;
    top:-2px;
    width: 32px;
    height: 32px;
    background-image: url(../images/icon-checkbox-on-aqua.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}
.checklist.icon-blue ul > li:before{
    background-image: url(../images/icon-checkbox-on-blue.svg);
}
.checklist.icon-menie ul > li:before{
    background-image: url(../images/icon-checkbox-on-menie.svg);
}
.checklist.icon-white ul > li:before{
    background-image: url(../images/icon-checkbox-on-white.svg);
}
.checklist.icon-black ul > li:before{
    background-image: url(../images/icon-checkbox-on-black.svg);
}




/*
 *  create-account 
*/
.create-account-title{
    margin-right: 128px;
}
.create-account-text{
    margin-right: 128px;
}
.create-account-icon{
    position: absolute;
    right: 48px;
    top: 16px;
}
@media all and (max-width: 700px) {
    .create-account-text{
        margin-right: 0px;
    }
}
@media all and (max-width: 500px) {

    .create-account-title{
        margin-top: 96px;
        margin-right: 0px;
    }
    .create-account-icon{
        position: absolute;
        right: auto;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%); 
        -ms-transform: translateX(-50%); 
        -o-transform: translateX(-50%);
        transform: translateX(-50%);
        top: 16px;
    }
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - -  other project   - - - - - - - - - - -  - - - - - - - -*/




/*
 *  Stappenplan
*/

.stappenplan{
    padding-left:48px;
    position: relative;
}
.stappenplan:before{
    content: '';
    position: absolute;
    height: 100%;
    width:17px;
    left:0px;
    top: 8px;
    display: block;
    border-right-width: 2px;
    border-right-style: dotted;
}

.stappenplan h1,
.stappenplan h2,
.stappenplan h3,
.stappenplan h4,
.stappenplan h5{
    font-style: italic;
}
.stappenplan .item{
    position: relative;
    margin-top: 32px;
}
.stappenplan .item:before{
    content: attr(data-stap);
    position: absolute;
    top:0px;
    left:-48px;
    width:36px;
    height: 36px;
    line-height: 32px;
    text-align: center;
    border-radius: 4px;
    text-align: center;
    font-size: 120%;
    border: 2px solid #fff;
}
.stappenplan .mask-image-box:before {
    content: '';
    position: absolute;
    display: block;
    border-width: 2px;
    border-style: solid;
    width: 16px;
    height: 16px;
    left: -32px;
    top: -6px;
    margin-left:-8px;
    border-radius: 100%;
    background-color: #fff;
}


/*
 *
*/
.page-child-buttons .item{
    width:50%;
    float: left;
    padding-right: 32px;
}
.page-child-buttons .item a{
    position: relative;
    width: 100%;
    padding-top: 65%;
    display: block;
    margin-right: 32px;
    margin-bottom: 32px;
    border-width: 1px;
    border-style: solid;
    border-radius: 8px;
    font-weight: 600;
    font-size: 120%;
    overflow: hidden;
}
.page-child-buttons .item .item-content{
    width: 100%;
    display: block;
    position: absolute;
    bottom: 0px;
    left:0px;
    text-align: center;
    padding: 8px;
}
.page-child-buttons .item .item-text{
    display: block;
    position: relative;
    color: #fff;
}
.page-child-buttons .item:hover .item-text{
    color: #000;
}
.page-child-buttons [class*=' hvrcvr-']:hover:before {
    opacity: 0.15;
    z-index: 10;
}
@media all and (max-width: 1000px) and (min-width: 800px) {

    .page-child-buttons .item{
        width:100%;
    }
    .page-child-buttons .item a{
        position: relative;
        width: 100%;
        padding-top: 50%;
    }
}
@media all and (max-width: 600px) {

    .page-child-buttons .item{
        width:100%;
    }
    .page-child-buttons .item a{
        position: relative;
        width: 100%;
        padding-top: 50%;
    }
}



/*
 *  related projects
*/
.related-projects {
    background-size: 80px 80px;
    padding-top:32px;
    margin-top: 16px;
}
.related-projects .items-link .pagelink{
    margin-top: 4px;
}









/*
*   anchor-list
*/

.anchor-list .function{
    font-size: 85%;
    position: relative;
}
.anchor-list .function:before{
    content: ' \00a0\2022\00a0 '; /* 2022 = &bull 2014 = &mdash 00a0=&nbsp */
}

.anchor-list-box{
    padding-top: 16px;
}

.anchor-list .pagelink [data-arrow]:hover:before{
    -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
    -moz-transform: rotate(90deg); /* IE 9 */
    -ms-transform: rotate(90deg); /* IE 9 */
    -o-transform: rotate(90deg); /* IE 9 */
    transform: rotate(90deg);
    -webkit-transition: all 0.15s ease-in-out;
    -moz-transition:    all 0.15s ease-in-out;
    -ms-transition:     all 0.15s ease-in-out;
    -o-transition:      all 0.15s ease-in-out;
    transition:         all 0.15s ease-in-out;
}


.credits .c-short{
    opacity: .5 !important;
}



/*
    promo
*/
.actie-box {
    position: relative;
    margin-top: 32px;
    margin-bottom: 32px;
    padding: 32px;
    border-width: 6px;
    border-style: solid;
    border-image: url(../images/bdr-dot-actie.svg) 32 repeat;
}
.account-item .actie-box {
    position: relative;
    margin-top: 36px;
    margin-bottom: 12px;
    margin-right: -40px;
    padding: 12px;
    border-width: 6px;
    border-style: solid;
    border-image: url(../images/bdr-dot-white.svg) 32 repeat;
}
.actie-box .titel {
    margin-top: -12px  ;
    margin-bottom: 8px ;
    color: #f60;
}
.account-item .actie-box .titel {
    margin-top: -12px  ;
    margin-bottom: 8px ;
    color: #f60;
    background-color: #fff;
    margin-left: -16px;
    margin-right: -16px;
    margin-top: -16px;
    padding: 4px 12px;
    font-size: 24px;
}

.flash-box{
    position: absolute;
    top: 0px;
    left:0px;
    z-index: 11;
    text-align: right;
    width:  100%;
    height: 0;
}
.flash{
    position: relative;
    margin: auto;
    text-align: left;
    display: inline-block;
    top: -24px;
    right: 20%;
    transform: scale(1.15);
}
.account-item .flash {
    right: 5%;
}

.flash-box .actie{
    font-weight: 600;
    letter-spacing: 1px;
    padding: 4px 12px;
    position: relative;
    display: inline-block;
    background: #f60;
    border-color: #f60;
    color: #fff;
    box-shadow: 0 6px 12px 0px rgba(0,0,0,.4);
}
.flash-box .actie:hover{
    background: #000;
    border-color: #000;
    color: #fff;
}
.flash-box .actie:before{
    box-shadow: 0 6px 12px 0px rgba(0,0,0,.4);
}
@keyframes flash-scale {
    0% {
      transform: scale(1.15);
    }
    80% {
      transform: scale(1.15);
    }
    81% {
      transform: scale(1.25);
    }
    95% {
      transform: scale(1.25);
    }
    100% {
      transform: scale(1.15);
    }
}
@keyframes flash-rotate {
    0% {
      transform: rotate(0deg);
    }
    80% {
      transform: rotate(0deg)
    }
    85% {
      transform: rotate(10deg)
    }
    90% {
      transform: rotate(-10deg);
    }
    95% {
      transform: rotate(10deg);
    }
    100% {
      transform: rotate(0deg)
    }
}
.flash-box .flash:not(:hover) .actie {
  animation: flash-rotate 2s infinite ease-in-out;
}
.flash-box .flash:not(:hover) {
  animation: flash-scale 2s infinite ease-in-out;
}