/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/
/******************************************
blauw         = 007AC2
donker blauw  = 00223E
oranje        = FF6F00
donker oranje = B24D00
******************************************/

/*****************************************/
/* algemene aanpassingen                 */
/*****************************************/

@import url('https://fonts.googleapis.com/css2?family=Asap+Condensed:wght@200;300;400;500;600;700;900&display=swap');

/* Padding voor alle HubSpot rijen met max-width-section-centering */
[class*="-max-width-section-centering"]:not(
.blog_header-row-0-max-width-section-centering,
.site_footer-row-1-max-width-section-centering,
.site_footer-row-0-hidden) { padding-left: 30px; padding-right: 30px; }



.site_footer-row-0-background-layers a { color:rgba(255,255,255,.75); font-size:14px; text-decoration: none; }
.site_footer-row-0-background-layers a:hover { color:#fff; }

.footeronderbalk a { color:rgba(255,255,255,.5); font-size:14px; text-decoration: none; }
.footeronderbalk a:hover { color:rgba(255,255,255,1.0); }

/* Algemene tekstlinks effect */
.sr-blog-post p > a:not(.hs-button), .body_dnd_area p > a:not(.hs-button) {
  padding: 0 2px; font-weight: 600; color: #007ac2; text-decoration: none;
  background: linear-gradient(to left, #333, #007ac2, #007ac2)
              no-repeat calc(200% - var(--p, 0%)) 100% / 200% var(--p, 1px);
  transition:
    color 0.3s var(--t, 0s), background-position 0.3s calc(0.3s - var(--t, 0s)), background-size 0.3s var(--t, 0s); }
.sr-blog-post p > a:not(.hs-button):hover, .body_dnd_area p > a:not(.hs-button):hover { --p: 100%; --t: 0.3s; color: #fff; text-decoration: none; }



.hs-search-highlight { animation: pulseColor 2.5s ease-in-out infinite; }
@keyframes pulseColor { 0%   { color: #007ac2; } 50%  { color: #333; } 100% { color: #007ac2; } }



.hs-search-results__pagination__link--first, .hs-search-results__pagination__link--last { display:none; }
.hs-search-results__pagination__link--active { border-radius: 25px; }
.hs-search-results__pagination__link--number { padding: 3px 13px; }



h1, h2, h3, h4, h5, h6 { letter-spacing: -0.3px; line-height: 1.2em; }
.icn-supertitel { color:#666; font-size: 22px; font-weight: 200; text-transform: uppercase; margin: 0 0 10px 0; padding: 0; }
.mini-button-RS { color:#333; background-color:#ccc; padding:0 10px; border-radius: 15px; }
.mini-button-RS:hover { color:#fff; background-color:#007ac2; }


/* ul { list-style-position: outside; padding-left: 22px !important; }
ul li { list-style-position: outside; padding:0 0 5px 0px !important; }
ul li::marker { color:#007ac2; font-weight: 700; font-size: 21px; line-height: 1; transform: translateY(2px); } */

:not(.hs-form) > ul,
:not(.hs-form) ul {
    list-style-position: outside; padding-left: 22px !important; }

/* Alle li's buiten .hs-form */
:not(.hs-form) > ul li,
:not(.hs-form) ul li {
    list-style-position: outside; padding: 0 0 5px 0 !important; }

/* Markers buiten .hs-form */
:not(.hs-form) > ul li::marker,
:not(.hs-form) ul li::marker {
    color: #007ac2; font-weight: 700; font-size: 21px; line-height: 1; transform: translateY(2px); }


ol { list-style: decimal; list-style-position: outside; margin: 0 0 0 0 !important; padding: 0 0 0 22px !important; }
ol li { margin: 0 0 5px 0 !important; padding: 0 0 0 10px !important; text-indent: 0; list-style-position: outside; }
ol li::marker { color: #007ac2; font-weight: 700; line-height: 1; }
ol li::before { content: none !important; display: none !important; }

/* tabellen */
table { width: 100%; border: 1px solid #eee; }
th, td { padding: 10px 20px 10px 20px !important; text-align: left; vertical-align: top; }
th { color:#fff !important; }
tr:nth-child(even) {background-color: rgba(0, 0, 0, 0.04);}
tr:hover {background-color: rgba(0, 0, 0, 0.02);}
table tr th, table thead tr th { color:#fff; background: #007ac2; }

.tableopmaak { width: 100%; border: 0px solid #eee; }
.tableopmaak td { padding: 0px 0px 0px 0px !important; text-align: left; vertical-align: top; }
.tableopmaak tr:nth-child(even) {background-color: #fff;}
.tableopmaak tr:hover {background-color: #fff !important;}

a[target="_blank"]
  :not(:has(img.hs-image-social-sharing-24))
  :not(:has(.hs-social-follow__icon))
  ::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 0;
  background-image: url("https://20171138.fs1.hubspotusercontent-na1.net/hubfs/20171138/ICN%20website%20RS/icon-url-blankpage.png");
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: top;
}

/* Parallax achtergrond alle */
.body_dnd_area-row-2-background-layers,.body_dnd_area-row-3-background-layers,.body_dnd_area-row-4-background-layers,.body_dnd_area-row-5-background-layers,
.body_dnd_area-row-6-background-layers,.body_dnd_area-row-7-background-layers,.body_dnd_area-row-8-background-layers,.body_dnd_area-row-9-background-layers,
.body_dnd_area-row-10-background-layers,.body_dnd_area-row-11-background-layers,.body_dnd_area-row-12-background-layers
{ background-attachment: fixed; background-size: cover; background-position: center; }

@media (min-width: 769px) {
  .hs-image-widget { margin-top: 8px; }
}
@media (max-width: 768px) {
  .hs-image-widget {
    width: 100vw; max-width: none; height: auto; display: block; margin-left: 50%; transform: translateX(-50%); margin-bottom:20px; }
}

.error-page .cta_button { 
  background-color: #007ac2;
  border: 2px solid #00223e;
  color: #fff;
  border-radius: 40px;
  font-family: Asap Condensed;
  font-size: 20px;
  font-weight: 600;
  margin: 10px 0;
  padding: 4px 24px 6px;
  text-decoration: none;
  transition: all .3s ease 0s;
}
.error-page .cta_button:hover { background-color: #00223e; border-color: #007ac2; color: #fff; }
/* 404 tekst */
.error-page:before { color: rgba(0, 0, 0, 0.04); font-size: 320px; font-family: Asap Condensed; font-weight: 700; }



/*****************************************/
/* Hubspot formulier aanpassingen        */
/*****************************************/

form { gap: 0; }
.hbspt-form form { width: 100%; font-size:14px; }
.hbspt-form label, .hbspt-form p, .hs-custom-form label { font-size: 14px; padding: 0 0px 4px 20px; }
.hs-custom-form p { font-size: 14px; padding: 0 0px 4px 0px; }
.hbspt-form a, .hs-custom-form a { color: #a4c1c5; font-weight: 600; }
.hs-form-required, .hs-custom-form .hs-form-required { color: #740a98!important; }
input[type=checkbox], input[type=radio] { margin: 7px 20px 0px 0px; min-height: 38px; }

.hs-input:not([type='checkbox']):not([type='radio']) { width:100% !important; }
input.hs-input.error, div.field.error input, div.field.error textarea, div.field.error .chzn-choices, textarea.hs-input.error, select.hs-input.error 
  { border: 1px solid #f00 !important; }
.hs-input option { color: #444; background-color: #fff; }
.hs-error-msg { color:#f00 !important; }
.hbspt-form ul, .hs-custom-form ul { list-style-type: none; margin: 5px 0 0 0; padding: 0px !important; }
.hbspt-form ul li, .hs-custom-form ul li { margin: 0px; padding: 0px !important; }
.field { margin: 0 0 10px; }
.legal-consent-container .field.hs-form-field { margin-bottom: 8px; }
.legal-consent-container .hs-form-booleancheckbox-display>span { margin-left: 0px !important; }
.legal-consent-container~.hs_recaptcha { margin-top: 0px !important; }
.hs-form-booleancheckbox-display { padding: 0px 0px 0px 0px !important; }
.hs_recaptcha { height: 0px; display: none; }
.hbspt-form textarea, .hs-custom-form textarea { height: 170px; }

.hbspt-form .hs_submit .hs-button, .hs-custom-form .hs-button { 
    font-size:20px; font-family: Asap Condensed; font-weight: 600; text-decoration: none;
    color: #fff; background-color: #007ac2 !important;
    display: inline-block; padding: 4px 24px 6px !important; margin: 20px 0 0px 0 !important; 
    border: 2px solid !important; border-color: #00223e !important; border-radius: 25px; transition: all 300ms ease 0ms;
}
.hbspt-form .hs_submit .hs-button:hover, .hs-custom-form .hs-button:hover { color: #FFFFFF; background-color: #00223e !important; border-color: #007ac2 !important; }
fieldset { max-width:100% !important; }
fieldset.form-columns-2 .hs-form-field:first-child .input { margin-right: 20px !important; }
form fieldset>div .input { margin: 0 10px 0 0 !important; }
.hs-fieldtype-select {  }
.fn-date-picker .pika-lendar { width: 420px !important; }

/* Radioknop labels uitlijning */
.hs-form-radio-display { display: flex; align-items: flex-start; gap: 0px; margin-bottom: 12px; }
.hs-form-radio-display span { display: inline-block; line-height: 1.5; }
label { display: block; margin-bottom: 0px; }

@media (max-width: 1200px) and (min-width: 992px) {
  .header__bottom .container { max-width: 1160px; padding-left: 25px; padding-right: 30px; }
  .header__menu--desktop:not(.header__menu--top) .header__menu-item--depth-1>.header__menu-link { padding: 0 3px; }
}
input:focus { outline-offset: -2px; }

.hbspt-form input, .hbspt-form select, .hbspt-form textarea, .hs-custom-form input, .hs-custom-form select, .hs-custom-form textarea 
  { padding:10px 20px !important; border: 0 !important; border-radius: 25px; border: 1px solid #007ac2 !important; background-color:rgba(0,0,0,.075) !important; min-height:auto; line-height:inherit; }
.hbspt-form input[type=checkbox], .hbspt-form input[type=radio], .hs-custom-form input[type=checkbox], .hs-custom-form input[type=radio] { width:auto; vertical-align:top; }
.form-control, input:not([type=radio]):not([type=checkbox]):not([type=file]):not([type=submit]), input[readonly]:not([type=radio]):not([type=checkbox]):not([type=file]):not([type=submit]), select, textarea {
    border: 2px solid #007ac2; border-radius: 25px; color: #333; font-family: Open Sans; font-size: 16px; min-height: 42px; }

.hs-search-field__button { border-radius: 25px; padding: 7px 17px 10px; margin-left: 10px; background-color:#fff; border: 2px solid #007ac2 !important; }
.hs-search-field__button:hover { background-color:#007ac2; border: 2px solid #00223e !important; }
.hs-search-results ul.hs-search-results__listing { padding-left: 0px !important; }
.hs-fieldtype-select.hs-form-field .input { flex-direction: column; }
fieldset { gap: 20px; }
@media only screen and (min-width: 992px) { .form-columns-2>.hs-dependent-field, .form-columns-2>.hs-form-field { max-width: calc(50% - 10px); } }




.hs-button {
    font-size:20px; font-family: Asap Condensed; font-weight: 600; text-decoration: none;
    color: #007ac2; background-color: rgba(255, 255, 255, 0.5);
    display: inline-block; padding: 4px 24px 6px; margin: 10px 0 10px 0; 
    border: 2px solid; border-color: #007ac2; border-radius: 40px; transition: all 300ms ease 0ms;
}
.hs-button:hover { color: #FFFFFF; background-color: #007ac2; border-color: #00223e; }
.hs-button-oranje { color: #fff; background-color: #FF6F00; border: 2px solid; border-color: #B24D00; }
.hs-button-oranje:hover { color: #fff; background-color: #B24D00; border-color: #FF6F00; }
.hs-button-blauw { color: #fff; background-color: #007AC2; border: 2px solid; border-color: #00223E; }
.hs-button-blauw:hover { color: #fff; background-color: #00223E; border-color: #007AC2; }



/* Navigatie balk achtergrondafbeelding */
.header_styles {
  background-color: rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(5px);
/*   background-image: url('https://20171138.fs1.hubspotusercontent-na1.net/hubfs/20171138/ICN-logobalk.png') !important; */
  background-image: url('/hubfs/ICN-logobalk.png') !important;
  background-position: 0px 28px !important;
  background-size: 100% 71px !important;
  background-repeat: no-repeat !important;
  height:71px;
  padding:0 !important;
}

.header__menu { margin-top: -33px; }
.header__menu-item--depth-1[data-mega="true"] .header__menu-submenu--level-2{ top: 69px; }
.header__container:not([data-layout=mobile]) .header__menu-item[data-mega=true] .header__menu-submenu { width: 626px; left: 40%; }
.header__menu-submenu .header__menu-item { width: 300px; background-color: transparent; }
.header__menu-link-span { background-color: transparent;  }
.header__menu-submenu { background-color: transparent; }
.header__menu-submenu .header__menu-link { padding: 0 10px !important; }
.header__container:not([data-layout=mobile]) .header__menu-item[data-mega=true] .header__menu-submenu--level-3 { background-color: transparent !important; }
.header__menu-submenu { border-radius: 0 0 20px 20px; overflow: hidden; }

.header__bottom .hs-search-field, .header__bottom .hs-search-field__button, .header__bottom .header__search-col { width:35px !important; height:35px !important; }
.header__bottom .header__search-col { margin-top:-39px; }
.header__bottom .hs-search-field__button { min-height:35px !important; border: 2px solid !important; border-color: #00223e !important; border-radius: 30px !important; }
.header__bottom .hs-search-field__button:hover { color:#fff !important; border-color: #fff !important; background-color:#007ac2 !important; }
.header__bottom .hs-search-field__desktop .hs-search-field__input  { width:350px !important; min-height: 35px !important; height:35px !important; border-radius: 30px !important;  }

/* ---------- Icons in navigatie ---------- */
.header__menu-item--depth-3 .header__menu-link { display: inline-flex; align-items: center; }
.header__menu-item--depth-3 .header__menu-link .header__menu-link-span { display: inline-flex; align-items: center; gap: 8px; }
.header__menu-item--depth-3 .header__menu-link .header__menu-link-span::before {
  content: ""; display: inline-block; width: 22px; height: 22px; flex: 0 0 22px;
  background-repeat: no-repeat; background-position: center; background-size: 22px 22px; transform: translateY(1px); background-image: var(--icon);
}
/* ---------- Icons in navigatie ICN Software ---------- */
.header__menu-item--depth-3 .header__menu-link[href*="/projectbox-voor-revit/"] .header__menu-link-span { --icon: url("/hs-fs/hubfs/20171138/RevitProjectBox.png"); }
.header__menu-item--depth-3 .header__menu-link[href*="/3b-tools-voor-revit/"] .header__menu-link-span { --icon: url("/hs-fs/hubfs/20171138/3btools.png"); }
.header__menu-item--depth-3 .header__menu-link[href*="/3b-view/"] .header__menu-link-span { --icon: url("/hs-fs/hubfs/20171138/3bview.png"); }
/* ---------- Icons in navigatie Autodesk ---------- */
.header__menu-item--depth-3 .header__menu-link[href*="/autodesk-software-offerte-aanvraag/"] .header__menu-link-span { --icon: url("/hs-fs/hubfs/20171138/autodesk.png"); }
.header__menu-item--depth-3 .header__menu-link[href*="/autodesk-aec-collection/"] .header__menu-link-span            { --icon: url("/hs-fs/hubfs/20171138/aeccollection.png"); }
.header__menu-item--depth-3 .header__menu-link[href*="/autodesk-pdm-collection/"] .header__menu-link-span            { --icon: url("/hs-fs/hubfs/20171138/pdmcollection.png"); }
.header__menu-item--depth-3 .header__menu-link[href*="/autodesk-bim-collaborate-pro/"] .header__menu-link-span { --icon: url("/hs-fs/hubfs/20171138/BIM-Collaborate-Pro.png"); }
.header__menu-item--depth-3 .header__menu-link[href*="/autodesk-construction-cloud/"] .header__menu-link-span { --icon: url("/hs-fs/hubfs/20171138/constructioncloud.png"); }
.header__menu-item--depth-3 .header__menu-link[href*="/autodesk-autocad-lt/"] .header__menu-link-span { --icon: url("/hs-fs/hubfs/20171138/autocadlt.png"); }
.header__menu-item--depth-3 .header__menu-link[href*="/autodesk-autocad/"] .header__menu-link-span { --icon: url("/hs-fs/hubfs/20171138/autocad.png"); }
.header__menu-item--depth-3 .header__menu-link[href*="/autodesk-revit-lt/"] .header__menu-link-span { --icon: url("/hs-fs/hubfs/20171138/revitlt.png"); }
.header__menu-item--depth-3 .header__menu-link[href*="/autodesk-revit/"] .header__menu-link-span { --icon: url("/hs-fs/hubfs/20171138/revit.png"); }
.header__menu-item--depth-3 .header__menu-link[href*="/navisworks/"] .header__menu-link-span { --icon: url("/hs-fs/hubfs/20171138/navisworks.png"); }
.header__menu-item--depth-3 .header__menu-link[href*="/autodesk-inventor/"] .header__menu-link-span { --icon: url("/hs-fs/hubfs/20171138/inventor.png"); }
.header__menu-item--depth-3 .header__menu-link[href*="/autodesk-fusion/"] .header__menu-link-span { --icon: url("/hs-fs/hubfs/20171138/fusion.png"); }
.header__menu-item--depth-3 .header__menu-link[href*="/autodesk-vault/"] .header__menu-link-span { --icon: url("/hs-fs/hubfs/20171138/vault.png"); }

.header__menu-container--mobile { position: relative; top: -22px; }
.header__menu-toggle svg rect { fill: white !important; }
.header__menu-toggle--open svg rect { fill: white !important; }
.header__menu--mobile { margin-top: 30px; }

.header__menu-container--mobile .header__menu-link-span { font-size: 22px !important; color: #333 !important; }
.header__menu-container--mobile .header__menu-link-span:hover { color: #007ac2 !important; }

#hs_cos_wrapper_site_header-module-2 .header__menu-container--mobile .header__menu-item--depth-1 > .header__menu-link:active,
#hs_cos_wrapper_site_header-module-2 .header__menu-container--mobile .header__menu-item--depth-1.header__menu-link--active-link > .header__menu-link { color: #007ac2 !important; }
#hs_cos_wrapper_site_header-module-2 .header__menu-container--mobile .header__menu-item--depth-1 .header__menu-child-toggle,
#hs_cos_wrapper_site_header-module-2 .header__menu-container--mobile .header__menu-item--depth-1 .header__menu-child-toggle path { color: #fff !important; fill: #007ac2 !important; }

#hs_cos_wrapper_site_header-module-2 .header__menu-container--mobile .header__menu-item--depth-1 > .header__menu-link:hover, 
#hs_cos_wrapper_site_header-module-2 .header__menu-container--mobile .header__menu-item--depth-1.header__menu-link--active-link > .header__menu-link:hover { color: #000 !important; }
#hs_cos_wrapper_site_header-module-2 .header__menu-container--mobile .header__menu-item--depth-1:hover .header__menu-child-toggle,
#hs_cos_wrapper_site_header-module-2 .header__menu-container--mobile .header__menu-item--depth-1:hover .header__menu-child-toggle path { color: #0f0 !important; fill: #000 !important; }

#hs_cos_wrapper_site_header-module-2 .header__container[data-layout="mobile"] .header__menu-item--open>.header__menu-submenu { top: 0px; }

#hs_cos_wrapper_site_header-module-2 .header__menu-container--mobile .header__menu-item--depth-2 { padding: 0 !important; }
#hs_cos_wrapper_site_header-module-2 .header__menu-container--mobile .header__menu-item--depth-3 { padding: 0 !important; }

#hs_cos_wrapper_site_header-module-2 .header__menu--mobile .hs-search-field { height: 60px !important; width: 100% !important; }
#hs_cos_wrapper_site_header-module-2 .header__menu--mobile .hs-search-field__button { height: 46px !important; width: 46px !important; padding:16px; }
.hs-search-field__mobile input:not([type=radio]):not([type=checkbox]):not([type=file]):not([type=submit]) { padding-left: 68px; }
#hs_cos_wrapper_site_header-module-2 .hs-search-field__input { background: #EEEEEE; border-radius: 24px; }
.form-control-sm, .form-wrapper-sm input:not([type=radio]):not([type=checkbox]):not([type=file]):not([type=submit]) { font-size: 16px; min-height: 46px; }

.header__menu--mobile { border-top: 0px solid #fff; height: 100vh; left: 0; right: 0; width: 100%; overflow: hidden; }

.header__menu--desktop .header__menu-submenu { border: 2px solid #007AC2; border-width: 2px 0 0 0 !important; }
.header__container .header__menu-submenu .header__menu-item:hover { background-color: transparent !important; }
#hs_cos_wrapper_site_header-module-2 .header__container .header__menu-submenu .header__menu-item:hover { background-color: transparent !important; }


.sidebar-wrapper { display: flex; flex-direction: column-reverse; }
.sidebar-menu { padding-top: 0px; padding-bottom: 25px; }
.sidebar-menu.tags ul { display: flex; flex-direction: column; }
.sidebar-menu ul { padding-left: 0 !important; }

.sidebar-menu.tags ul li a { 
  line-height: 1.2; color: #007ac2; background-color: transparent; border: 0px solid #fff; display: block; font-size: 16px; padding: 0px; text-decoration: none; transition: background 0s ease-out, color 0s ease-out, border-color 0s ease-out; }
.sidebar-menu.tags ul li a:hover { background-color: transparent !important; border-color: transparent; color: #84d0f5; text-decoration: none; }
.sidebar-menu.tags ul li a.active { font-weight: 600; background: transparent !important; border-color: transparent; color: #84d0f5; text-decoration: none; }


/* Blog pagina instellingen */
.header__logo-col { margin:0 !important; }
.blog-listing .blog-middle { margin-top: 21px; }
.sr-blog-post { margin-top: 0px; }

.site_footer-row-0-background-layers {
    background: linear-gradient(180deg,rgba(0, 34, 62, 1) 0%, rgba(0, 34, 62, 1) 60%, rgba(0, 78, 128, 1) 100%) !important;
    background-position: left top !important; background-size: auto !important; background-repeat: no-repeat !important;
}
.site_footer-row-0-background-layers p { margin-bottom:0 }


/* afstand kopjes in footer bij kleine schermen */
@media (max-width: 767px) { .site_footer-row-0-background-layers h3 { margin-top: 17px !important; }}
/* hover en focus social icons footer */
.hs_cos_wrapper_widget .hs-social-follow .hs-social-follow__link:hover { background-color: #00223e !important; }
.hs_cos_wrapper_widget .hs-social-follow .hs-social-follow__link:focus { background-color: #009fe3 !important; }
/* styling social sharing icons bij blogposts RS_social_sharing module */
.social-sharing { text-align: right; margin: -3px 0 20px 0; }
.hs-image-social-sharing-24:hover { border: 2px solid #00223e !important; }
.widget-type-social_sharing img { height: 24px !important; width: 24px !important; margin-right:5px; border-radius: 20px !important; }
.widget-type-social_sharing img:hover { border: 2px solid #00223e !important; }


.bloghero-h1 { padding-top: 100px; }
.featured-image-hero { 
  background-image: url(/hubfs/banner-bg5.png) !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

/* softe overgang schaduw header */
.header__container .header__bottom { transition: background 0.5s ease-in-out, box-shadow 0.5s ease-in-out; }

/* Globale zijmarges voor alle standaard breakpoints */
@media (min-width: 1200px) { .header__container .header_styles .container, .header__container .header__bottom .container, .sr-footer .sr-footer-nav .container, .container
  { padding-left: 0px; padding-right: 0px; }}

/* Regel Posts about... verwijderen */
.sr-blog-listing-02 .articles-list .text-center { display:none; }

/* Post narration audio in post blogs */
.hs-audio-player { margin-bottom:30px; }


/*****************************************/
/* specifieke aanpassingen                  */
/*****************************************/

/* grijze klant logo's, kleur in hover */
.hs_cos_wrapper_type_logo img { filter: grayscale(100%) contrast(50%); transition: 0.3s; }
.hs_cos_wrapper_type_logo img:hover { filter: grayscale(0%) contrast(100%); }



/* aanpassing koopknoppen van Payment module (standaard van Hubspot) */
/* geld voor ALLE betaalknoppen (zowel overlay-knoppen als nieuwe-tab knoppen) */
a.button[href*="https://payments-na1.hubspot.com/payments/"] { font-size: 20px; font-family: "Asap Condensed", sans-serif; font-weight: 600; text-decoration: none; }

button.hs-button[class*="button__open-overlay-widget_"],
a.button[href*="https://payments-na1.hubspot.com/payments/"] {
  display: inline-flex;
  align-items: center;
  text-align: left;
  line-height: 1.4;
  gap: 0px;
  padding: 8px 24px 10px;
  margin: 10px 0;
  border: 2px solid #B24D00 !important;
  border-radius: 60px;
  background-color: #FF6F00;
  color: #fff;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
button.hs-button[class*="button__open-overlay-widget_"]:hover,
a.button[href*="https://payments-na1.hubspot.com/payments/"]:hover {
  background-color: #B24D00;
  border: 2px solid #FF6F00 !important;
}
button.hs-button[class*="button__open-overlay-widget_"] .button__icon svg,
a.button[href*="https://payments-na1.hubspot.com/payments/"] .button__icon svg {
  width: 1.2em;
  height: 1.2em;
  fill: currentColor;
}

.drie-blokken-homepage-RS { padding: 25px; border: 2px solid #fff; border-radius: 20px; background-color:#fff; box-shadow: 0px 12px 18px -6px #666666; }
.drie-blokken-homepage-RS:hover { box-shadow: 0px 6px 9px -3px #666666; background-color:#eee; }
a .drie-blokken-homepage-RS { color:#333 !important; } a:hover .drie-blokken-homepage-RS { color:#000 !important; }
.drie-blokken-homepage-RS h2 { color:#007ac2; font-size: 24px;}
.drie-blokken-homepage-RS p { margin: 0;}
@media (max-width:  768px) { .drie-blokken-homepage-RS { height: auto; }}
@media (min-width: 768px) and (max-width: 991px) { .drie-blokken-homepage-RS { height: 250px; }}
@media (min-width: 992px) { .drie-blokken-homepage-RS { height: 180px; }}





/* oplossen van margin-bottom van 1 pixel groot, werkt dit wel? */
@media (min-width: 767px) and (max-width: 768px) { 
  .row-fluid .span4 { padding-bottom: 30px !important; }
  }
}





/* animatie 3 knoppen homepage */
.animatiehome1, .animatiehome2, .animatiehome3 { opacity: 0; position:relative; }
.animatiehome1 { animation: fadeInBounce 1.2s ease-out .25s forwards; }
.animatiehome2 { animation: fadeInBounce 1.2s ease-out .50s forwards; }
.animatiehome3 { animation: fadeInBounce 1.2s ease-out .75s forwards; }

@keyframes fadeInBounce {
  0% { transform: translateY(-145px); opacity: 0; animation-timing-function: ease-in; }
  20% { opacity: 0.3; }
  40% { transform: translateY(-24px); opacity: 0.6; animation-timing-function: ease-in; }
  65% { transform: translateY(-12px); opacity: 0.9; animation-timing-function: ease-in; }
  82% { transform: translateY(-6px); opacity: 1; animation-timing-function: ease-in; }
  93% { transform: translateY(-4px); opacity: 1; animation-timing-function: ease-in; }
  25%, 55%, 75%, 87% { transform: translateY(0); animation-timing-function: ease-out; }
  100% { transform: translateY(0); opacity: 1; animation-timing-function: ease-out; }
}

/* blog images ronde hoeken en 2:1 formaat */
.sr-blog-listing-02 .article-panel .article-img { aspect-ratio: 2 / 1; overflow: hidden; }
.sr-blog-listing-02 .article-panel .article-img img { border-radius: 20px 20px 0 0; overflow: hidden; }
/* heading h3 boven filtering bloglisting tags kleiner maken */
.hs_cos_wrapper_type_post_filter H3 { font-size:20px; }

.sr-blog-listing-02 .article-panel:hover {
    box-shadow: 15px 25px 60px 0 rgba(0, 0, 0, .13);
}

/* Tabbed Card van Hubspot */


@media (max-width: 767px) { .hs-tabs-wrapper { margin-bottom:20px; }}

.hs-tabs__tab { color:#333; border-radius: 20px 20px 0 0; }
.hs-tabs__tab, .hs-tabs__tab:active, .hs-tabs__tab:focus, .hs-tabs__tab:hover { padding: 10px 30px; border-radius: 20px 20px 0 0; }
.hs-tabs__tab:active, .hs-tabs__tab:focus, .hs-tabs__tab:hover { color:#007ac2; }
.hs-tabs__content__panel { padding: 20px 30px; } 
.hs-tabs__content__panel p { margin: 0 0 10px 0; }
.hs-tabs__content { border-radius: 0 20px 20px 20px; }
.hs-tabs__tab, .hs-tabs__tab:hover { font-size:20px; font-family: Asap Condensed; font-weight: 600; }
.hs-tabs__tab[aria-selected='true'] { border-bottom: 2px solid #007ac2 !important; font-size:20px; font-family: Asap Condensed; font-weight: 600; }
.hs-tabs__tab[aria-selected='true']:after { border-bottom: 2px solid #007ac2 !important; }

/* testimonial-slider-01 quote svg kleur */
.sr-cards-testimonial-slider-01 *, .sr-cards-testimonial-slider-01 svg { fill: #007ac2; }
    
/* Animatie slider, blokken sliden van rechts en faden in */
.animatieslidervanrechts > [class^="animatie"] {
  opacity: 0;
  transform: translateX(200px);
  animation: icn-slide-fade 0.7s ease-out forwards;
  will-change: transform, opacity;
}
.animatieslidervanrechts > .animatie1 { animation-delay:    0s; }
.animatieslidervanrechts > .animatie2 { animation-delay: 0.15s; }
.animatieslidervanrechts > .animatie3 { animation-delay: 0.30s; }
.animatieslidervanrechts > .animatie4 { animation-delay: 0.45s; }
.animatieslidervanrechts > .animatie5 { animation-delay: 0.60s; }
.animatieslidervanrechts > .animatie6 { animation-delay: 0.75s; }
.animatieslidervanrechts > .animatie7 { animation-delay: 0.90s; }
.animatieslidervanrechts > .animatie8 { animation-delay: 1.05s; }

@keyframes icn-slide-fade {
  0%   { opacity: 0; transform: translateX(200px); }
  75%   { opacity: 0.5; }
  100% { opacity: 1; transform: translateX(0); }
}


.trainer_extra_info { position: relative; display: inline-table; height: auto; width: 100%; margin: 30px 0; }
.traineromschrijving { margin-top: 30px; width: 100%; height: auto; font-style: italic; font-size: 14px; }
.traineromschrijving img { position: relative; width:150px; height:150px; margin-left:20px; float:right; border-radius: 75px; z-index: 1; }
.trainertekst { position: relative; top:50px; }
.trainernaamfunctie { position: absolute; width: 100%; top: 0px; padding: 0px 0px 2px 20px; background-color: #007ac2; font-family: Asap Condensed, sans-serif; letter-spacing: -0.3px; font-size: 30px; }
.trainernaam { color: #fff; font-weight: 600; }
.trainerfunctie { color: #fff; font-weight: 300; }