html, body                  { height: 100%; }
body                        { font: 400 18px / 24px 'Roboto', sans-serif; }
  
#page-content               { flex: 1 0 auto; }
#sticky-footer              { flex-shrink: none; }

h1                          { font-weight: 900; line-height: 40px; }
h2                          { font-weight: 900; }
h2.subtitle                 { font-size: 2.5rem; line-height: 40px; }
h3                          { font-size: 18px; font-weight: 900; }

a:hover                     { color: #000; }

p                           { margin: 0; }

button:focus                { outline: 0 }

.xs-editmode.preview .gridcontainer-3,
.xs-editmode.preview .gridcontainer-5       { position: relative; padding: 25px 8px 18px; background: #f7f7f7; }

.xs-editmode.preview .gridsection-3-small,
.xs-editmode.preview .gridsection-5-small   { border: 1px solid #fff; }

@media only screen and (max-width:1200px){

    h1          { font-size: 28px; line-height: 30px; }

}


.bgcolor-1                  { background: #777; }
.bgcolor-2                  { background: #ccc; }
.color-1                    { color: #eee; }
.color-2                    { color: #777; }
.color-3                    { color: #ccc; }

/**
 *  Bootstrap overrides & toevoegingen
 */

/* buttons */
.btn-primary                { background: #ccc; border-color: #ccc; }
.btn-primary:hover          { background: #aaa; border-color: #aaa; }
.btn-social                 { width: 24px; height: 24px; padding: 2px; line-height: 20px; font-size: 13px; text-align: center; background: #aaa; color: #fff; border-radius: 50%; }
.btn-social:hover           { color: #fff; }
.btn-social.facebook        { background: #45619e; }
.btn-social.linkedin        { background: #0077b5; }
.btn-social.twitter         { background: #1babe9; }
.btn-social.mail            { background: #ffa800; }

.btn:focus, .btn:active      { outline: none !important; box-shadow: none !important; }

/* gutters verkleinen */
div[class*="col-"]          { padding-left: 8px; padding-right: 8px;}
.card-deck .card            { margin-left: 8px; margin-right: 8px; }

.mb-c-1                     { margin-bottom: 24px !important; }


@media only screen and (max-width:576px){

    div[class*="col-"]      { padding-left: 15px; padding-right: 15px;}
    .card-deck .card        { margin-left: 0; margin-right: 0; }

}


/**
 *  Header
 */
header              { order: 1; }
.subheader          { order: 2; }

.header-search-wrapper              { font-size: 16px; }
    .header-search-wrapper .header-search-input     { background: #aaa; }
    .header-search-input,
    .header-search-input:focus,
    .header-search-input:active         { height: 34px; padding: 2px 10px; border-color: #ccc; background: transparent; color: #fff; outline: 0px !important; -webkit-appearance: none; box-shadow: none !important; }
    .header-search-input::placeholder   { color: #ccc; }
    .header-search-button               { height: 34px; padding: 2px 10px; color: #fff; }
    .header-search-button:hover         { background: #aaa; }
    

.navbar                     { color: #fff; font-size: 16px; }
    .navbar a                   { color: #fff; }
    .navbar-brand               { font-size: 17px; font-weight: 600; }

    .navbar-toggler-icon        { height: auto; font-size: 26px; color: #fff; display: none; }


.lang-dropdown                          { position: relative; width: 120px; border: 1px solid #cce1b0; font-size: 16px; border-radius: 5px; cursor: pointer; }
.lang-dropdown::after                   { margin: 0 0 0 10px; font-family:'Font Awesome 5 Pro'; content:"\f107"; }
.lang-dropdown.open                     { border-radius: 5px 5px 0 0; }
.lang-dropdown.open::after              { margin: 0 0 0 10px; font-family:'Font Awesome 5 Pro'; content:"\f106"; }

    .lang-dropdown-options-wrapper          { position: absolute; left: -1px; top: 28px; width: 120px; border: 1px solid #cce1b0; border-radius: 0 0 5px 5px; z-index: 10; display: none; }
    .open .lang-dropdown-options-wrapper    { display: block; }


    @media only screen and (max-width:1198px){
        
        header.container-fluid          { padding: 0; }
        .subheader.container-fluid      { padding: 0; }

            .navbar                     { padding: 0; }
                .navbar-brand               { width: 100%; margin: 0; font-size: 12px; text-align: center; }

        header              { order: 2; }
        .subheader          { order: 1; }

        .header-search-wrapper,
        .lang-dropdown                  { margin: 0 0 15px !important; }

        .navbar-toggler-icon            { display: block; }

        .logowrapper img    { height: 70px; }

    }

    @media only screen and (max-width:575px){

        .logowrapper img    { height: auto; max-width: 280px; max-height: 70px; }

    }


/**
 *  Grids / containers
 */
.gridcontainer-3            { font-size: 16px; line-height: 18px; }
    .gridsection-3-large          { height: 480px; }
    .gridsection-3-small          { height: 50%; min-height: 230px; }
    .gridsection-3-large a,
    .gridsection-3-small a,
    .gridsection-3-large a:hover,
    .gridsection-3-small a:hover    { color: #fff; text-decoration: none; }
    .gridcontainer-3 .gridsection-content-wrapper   { position: relative; background-size: cover !important; }

.gridcontainer-5            { font-size: 16px; line-height: 18px; }
    .gridsection-5-large          { height: 410px; }
    .gridsection-5-small          { height: 50%; min-height: 190px; }
    .gridsection-5-large a,
    .gridsection-5-small a,
    .gridsection-5-large a:hover,
    .gridsection-5-small a:hover    { color: #fff; text-decoration: none; }
    .gridcontainer-5 .gridsection-content-wrapper   { position: relative; background-size: cover !important; }

    .gridcontainer-3 .btn,
    .gridcontainer-5 .btn       { align-self: flex-start; }

    .gridsection-label      { display: inline-block; background: #ccc; font-size: 10px; line-height: 19px; font-weight: 500; }

    .bg-quote                                   { background: url('../images/textbg.gif') right bottom no-repeat; background-size: initial !important; }
    .gridsection-content-wrapper.bg-quote       { background-size: initial !important; }
    .gridquote-content                          { min-height: 125px; font-weight: 300; font-size: 22px; line-height: 28px; }

    .gridsection-3-small:first-of-type      { margin: 0 0 18px !important; }

    .gridsection-bgimage .gridsection-backdrop       { position: absolute; bottom: 0; left: 0; width: 100%; height: 40%; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0 ,0, .5) 100%); z-index: 1; }

    .gridsection-label,
    .gridsection-title,
    .gridsection-intro,
    .gridsection-button         { position: relative; z-index: 5; }
    

.main-container          { padding: 24px 30px; }
.main-container-home     { padding: 24px 30px 0; }

    @media only screen and (max-width:1198px){

        .gridsection-3-large                    { height: 500px; }

        .gridsection-3-small                    { height: 240px; margin: 0 !important; }
        .gridsection-3-small:first-of-type      { margin: 0 0 18px !important; }
        
        .gridsection-5-small                    { height: 197px; }

        .gridquote-content                      { min-height: 125px; }

    }

    @media only screen and (max-width:998px){

        .gridsection-3-small                    { margin: 10px; }
        .gridsection-3-small:first-of-type      { margin: 0 18px 0 0 !important; }

    }

    @media only screen and (max-width:767px){

        .gridsection-3-large,
        .gridsection-5-large                    { height: 240px; }

        .gridsection-3-small:first-of-type      { margin: 0 0 18px !important; }
        .gridsection-3-small:last-of-type       { margin: 0; }

        .gridsection-5-small                    { min-height: 240px; }
        
    }


/**
 *  Page content
 */
.article-image-wrapper              {  }
    .article-image                      { width: 100%; }
    .article-intro                      { font-size: 20px; line-break: 28px; } 
    .article-text h2                    { font-size: 22px; line-break: 28px; }
    .article-intro blockquote,
    .article-text blockquote            { position: relative; padding: 10px 30px 10px 40px; font-size: 38px; line-height: 44px; font-weight: 300; color: #0061af; font-style: italic; }
    .article-intro blockquote::before,
    .article-text blockquote::before    { position: absolute; top: 19px; left: 0; content: '\201c'; font-size: 60px; font-weight: 900; }

.sidebar-block                      { position: relative; min-height: 240px; overflow: hidden; }
    .sidebar-block-bg-image             { position: absolute; top: 0; left: 0; max-height: 100%; z-index: 5; }
    .sidebar-block-content              { position: relative; z-index: 10; }

.vervolg-side .gridsection-content-wrapper          { position: relative; height: 240px !important; margin: 0 0 18px; background-size: cover !important; color: #fff; }
    .vervolg-side .gridsection-content-wrapper a        { align-self: flex-start; color: #fff; }
    .vervolg-side .gridsection-content-wrapper a:hover  { text-decoration: none; }

.vervolg-side-content-wrapper       { /* position: sticky; top: 18px; left: 0; */ }
    
.vervolg-side .card-deck            { display: block; margin: 0; }
    .vervolg-side .card                 { margin: 0 0 18px; }
    .vervolg-side .card-title           { font-size: 20px;  }

    .card-body                      { position: relative; }
    .card-body a:hover              { text-decoration: none; }
    .card-text                      { font-size: 16px; line-height: 18px; }

    .card-body .card-button         { position: absolute; bottom: 20px; left: 20px; }

    @media only screen and (max-width:768px){
        
        .article-quote              { font-size: 28px; line-height: 34px; }
        .sidebar-block-bg-image     { max-height: unset; width: 100%; }

    }







/**
 *  Landingpage
 */
.landingpage                    { font-size: 1em; line-height: 1.2em; }
.landingpage h1                 { font-size: 2.2em; line-height: 1.3em; font-weight: 700; border-bottom: 6px solid #0061af; }
.landingpage h2                 { font-size: 1.5em; line-height: 1.3em; }
.landingpage h3                 { font-size: 1.4em; line-height: 1.3em; }
.landingpage h4                 { font-size: 1.3em; line-height: 1.2em; }

.landingpage .article-intro     { font-size: 1.4em; line-height: 1.2em; font-weight: 600; }

.usp-container                  { font-size: 1.1em; line-height: 1.2em; background: #0061af; color: #fff; }
.usp-container .fa-check        { color: #80b638; }


@media only screen and (max-width:768px){

    .landingpage                { font-size: 1em; line-height: 1.2em; }
    .landingpage h1             { font-size: 1.8em; line-height: 1.2em; }

}







.subject-label                  { display: inline-block; background: #ccc; font-size: 10px; line-height: 19px; font-weight: 500; }

.read-more-intros-wrapper       {  }
    .read-more-intro                { border-top: 1px solid #ccc; }
        .read-more-title                { font-weight: 900; color: #000; }

.videoplayer-container          {  }
    .videowrapper				    { position: relative; height: 0; padding: 0 0 56.25%; }
	    .videowrapper iframe		    { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
        
.accordion .card-header                     { background: #fff; border-bottom: 0; cursor: pointer; }
    .accordion .card-header.collapsed::after    { position: absolute; top: 17px; right: 20px; content: "\f078"; font-family: "Font Awesome 5 Pro"; color: #ccc; font-size: 20px; }
    .accordion .card-header::after              { position: absolute; top: 17px; right: 20px; content: "\f077"; font-family: "Font Awesome 5 Pro"; color: #ccc; font-size: 20px; }
    .card h2.accordion-title                    { font-size: 22px; line-height: 30px; color: #000; }
    .accordion .card-body                       { padding: 1.25rem 1.25rem 1.25rem 4.25rem; }

.introblock                                 { font-size: 16px; line-height: 18px; border-bottom: 1px solid rgba(0,0,0,.125); }

    .introblock-image-wrapper                   { flex: 0 0 300px; }
        .introblock-image                           { width: 100%; }

    .introblock-text-container                  { order: 1; }
    .introblock-image-wrapper.left,
    .introblock-image-wrapper.left2             { order: 1; margin: 0 20px 0 0; }
    .introblock-image-wrapper.right,
    .introblock-image-wrapper.right2            { order: 2; margin: 0 0 0 20px; }
    .introblock-text-wrapper.columns-2          { column-count: 2; }

    .introblock-text-wrapper.left2,
    .introblock-text-wrapper.right2             { display: flex; justify-content: space-between; }
    .left2 .introblock-text-first,
    .left2 .introblock-text-second,
    .right2 .introblock-text-first,
    .right2 .introblock-text-second             { flex: 0 1 47%; }


    @media only screen and (max-width:1200px){
    
        .introblock,
        .introblock-text-wrapper        { flex-flow: column nowrap; }
        .introblock-image-wrapper       { order: 1 !important; margin: 0 0 20px !important; }

        #mc_embed_signup_scroll         { flex-flow: column nowrap; }
        #mce-EMAIL                      { width: 100% !important; margin: 0 0 10px; }
        #mc-embedded-subscribe          { width: 100% !important; border-radius: 5px; }

    }
    

/**
 *  Slider
 */
.slider                     { width: 1110px; margin: 0 0 0 -15px; }
    .slide                      { margin: 0 8px; border: 1px solid #c7c7c7; }
    .slide a                    { display: flex !important; align-items: center; justify-content: center; height: 100px; }


    @media only screen and (max-width:1200px){

        .slider                 { width: auto; margin: 0 -15px; }
            .slick-slide img        { max-width: 80%; }

    }


    @media only screen and (max-width:576px){
    
        .slider                 { margin: 0 -8px; }

    }


/**
 *  Cards
 */
.card h2                    { color: #aaa; }


/**
 *  FORM
 */
.xsformbuilder_small_textbox		{ display:none; }
.xsInPageAddContent					{ width:200px; margin:0 0 15px; }
    .xsInPageAddContent a				{ display:block; padding:5px; text-decoration:none; color:#fff; text-align:center; background:#589bd2; border-radius:5px; }
    .xsInPageAddContent a:hover			{ background:#0061af; }

.form_table .col1                   { width:25%; padding:5px; vertical-align:top; }
.form_table .col2                   { width:75%; padding:5px; }

.form_table .col2 .info                { font-size:12px; color:#aaa; font-style:italic; }

.form-table-row                        { display:flex; margin:0 0 10px; }
    .form-table-row .col1                  { width:160px; }

.col2 .textfield						{ width: 340px; margin: 0 5px 0 0; padding: 3px 6px; }
.col2 .textfield.postcode-cijfers		{ display: inline-block; width: 60px; margin: 0 4px 0 0; }
.col2 .textfield.postcode-letters		{ display: inline-block; width: 40px; text-transform: uppercase; }
.col2 .textfield.datum-dag              { width: 25px; margin: 0 4px 0 0; }
.col2 .textfield.datum-maand			{ width: 25px; margin: 0 4px 0 0; }
.col2 .textfield.datum-jaar             { width: 40px; margin: 0 4px 0 0; }
.col2 .textarea                         { height: 80px; width: 340px; resize: vertical; }
.col2 select							{ width: 340px; padding: 5px; border: 1px solid #ccc; }

input[type='button'].form-button		{ margin:5px 0 0 5px; padding:5px 15px; border:0; background:#00a3aa; color:#fff; cursor:pointer; }

.req_field,
.error_text				{ font-size:12px; color:#e81010; }

.attachment_box            { width:345px; }
.attachment-title			{ width:315px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }

.form-agreement-line				{ display:flex; align-items:flex-start; }
    .form-agreement-line input			{ min-width:20px; margin:5px 10px 0 0; }


    @media only screen and (max-width:768px){

        .form-table-row     { flex-flow: column nowrap; }
        
        .col2 .textfield, 
        .col2 .textarea,
        .col2 select        { width: 100%; } 

    }

/**
 *  Footer
 */
.xsearch-result                 { margin: 0 0 20px; padding: 0 0 20px; border-bottom: 1px solid rgba(0,0,0,.125); }
    .xsearch-result-title           { margin: 0 0 3px; font-size: 20px; line-height: 22px; }
    .xsearch-date-modified          { font-size: 11px; color: #777; }

    .search-intro                   { font-size: 16px; line-height: 18px; }
    .xsearch-snippet                { margin: 0 0 5px; }
        .xsearch-snippet img            { display: none; }

    .xsearchHighlightedKeyword      { color: #aaa; }

/**
 *  Footer
 */

footer                      { font-size: 16px; }
    footer a,
    footer a:hover              { color: #fff; }

    .footer-logo-wrapper        {  }
        .footer-logo-wrapper img    { height: 50px; }


        @media only screen and (max-width:576px){
    
            .footer-logo-wrapper.roodbont       { order: 1; }
            .footer-logo-wrapper                { order: 2; width: 100%; margin: 0 0 20px; }

        }