@charset "UTF-8";
/* CSS Document */
/* Stylesheet adjustments for responsive / for mobile there is another css */

@media only screen and (min-width: 1560px) {
  .banner-snaps .snaps-btn { position: absolute; zzzwidth: 110px; left: -114px; }
  .d-xxxl-block { display: block !important; }
}

@media only screen and (min-width: 1200px) {
  .d-xxl-block { display: block !important; }
}

@media only screen and (min-width: 991px) {
  /* Exchange design of hover state */
  a.card_entry img:not(.flag), a.card_topic img { filter: brightness(1); transition: filter ease .25s; }
  a.card_entry:hover img, a.card_topic:hover img  { filter: brightness(0.75); }
  a.card_entry.bg-light:not(.card-standout-light):not(.card-standout-dark):not(.related_cats_popular .card.bg-light) { background-color: white !important; }
  a.card_entry.bg-light:not(.card-standout-light):not(.card-standout-dark):hover, a.card_entry.bg-light:not(.card-standout-light):not(.card-standout-dark):hover .card-header, a.card_entry.bg-light:not(.card-standout-light):not(.card-standout-dark):hover .card-body, a.card_entry.bg-light:not(.card-standout-light):not(.card-standout-dark):hover .card-footer:not(.related_cats_popular .card.bg-light) { background-color: white !important; }
  a.card_entry.bg-light:hover .card-header { border-top-left-radius: var(--border-radius) !important; border-top-right-radius: var(--border-radius) !important; }
  a.card_entry.bg-light:hover .card-footer { border-bottom-left-radius: var(--border-radius) !important; border-bottom-right-radius: var(--border-radius) !important; }

  .sticky-top-header { transform-style: preserve-3d; min-height: var(--height-navbar); } /* zorgt ervoor dat de ene sticky-top boven de ander komt te staan */
  .sticky-top-header .header-top .search-form { height: 1.5rem; }
  .sticky-top-header .header-top .search-think { width: 380px !important; line-height: 26px; }
  .position-lg-absolute { position: absolute !important; }
  .h-aside-empty { height: calc(100vh - 3 * var(--height-navbar)); }
  .col_lg_wide { margin-left: -10%; width: 110% !important; max-width: 110% !important; }
  .prefix { position: absolute; margin-left: -2rem; margin-top: 1px; }
  .insert .prefix { position: relative; margin-left: 0; margin-right: .5rem; }
  .prefix svg { height: 1.7rem !important; }
  .bg-lg-light { background-color: var(--light) !important; }  
  .card .card-frame { display: flex; align-items: center; justify-content: center; overflow: hidden; position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
  .card:has(.card-frame) .row [class^="col-"] { position: relative; } /* kijkt of .card-frame voorkomt en bepaalt dan dat de col position-relative wordt */
  .card .min-h-152 { min-height: 152px; }
  .card .card-frame img { object-fit: cover; min-height: 100%; }
  .card_thumb_large.card-standout-light .card-title, .card_thumb_large.card-standout-light .card-text, .card_thumb_large.card-standout-light .last_updated, .card_thumb_large.card-standout-dark .card-title, .card_thumb_large.card-standout-dark .card-text, .card_thumb_large.card-standout-dark .last_updated, .card_thumb_large.card-standout-light .last_updated { padding: 0 1rem !important; }
  .card-standout-dark .rounded-top:has(img) { margin: 1rem 1rem 0 !important; border-radius: 0 !important; }
  .border-lg-0 { border: none !important; }
  .videoSwiper img { width: 632px !important; } /* grootte video in Topic */
  .homeSustSwiper .swiper-slide .card .text-grey { padding-left: 1rem; padding-right: 1rem; }
  .scroll-window { border-bottom: 3px solid var(--grey); }
  .featurebox .d-flex.flex-column .card:last-child { margin-bottom: 0 !important; }
  .featurebox .card_thumb_large .card-body .card-title, .featurebox .card_thumb_large .card-body .card-text { padding: 0 1rem !important; }
  
  /* deze styles zijn voor de AJAX calls voor de load more */
  #collapseContentRelatedCatsPopular.collapsing { transition: height 0.25s ease-out; }
  #collapseContentRelatedCatsPopular .collapse-container { min-height: 500px; }
  #collapseContentRelatedTagSearchtitle.collapsing { transition: height .5 ease-out; }
  /* Deze staat in _related_new_entries_grid.html zodat, als er geen related is je geen min-hoogte mee krijgt */
  /* #collapseContentRelatedTagSearchtitle .collapse-container { min-height: 400px; } */
  #collapseContentMoreFromAuthor.collapsing { transition: height 0.25s ease-out; }
  #collapseContentMoreFromAuthor .collapse-container .container { min-height: 400px; }
}

@media only screen and (max-width: 992px) {
  :root {
    --height-navbar-top-mobile: 75px;
    --height-navbar-bottom-mobile: 56px;
  }

  body { padding-bottom: var(--height-navbar-bottom-mobile) !important; }

  .main { flex-shrink: 0 !important; }

  .navbar-name { height: var(--height-navbar-top-mobile); display: flex; align-items: center; margin-right: 72px; }

  .navbar-mobile-wrapper { display: block; transition: transform .5s ease-in-out; }
  .navbar-mobile { box-sizing: border-box; margin-bottom: env(safe-area-inset-bottom); height: var(--height-navbar-bottom-mobile);  }
  .navbar-mobile .nav-link::before { bottom: .5rem; }
  .navbar-mobile .nav-link { }
  .navbar-mobile .dropdown-item { color: var(--primary) !important; }
  .navbar-mobile .dropup .dropdown-menu[data-bs-popper] { left: auto; right: 0; }
  .navbar-mobile .dropdown-toggle::after { display: none; }
  .navbar-mobile .dropdown-menu { min-width: auto; }

  .admin_panel { margin: 1.2rem 4.4rem 0 0 !important; opacity: 1; }
  .header-top { padding: 1rem 0; }
  .header-top .ing-logo, .offcanvas .ing-logo { margin: 0; }
  .offcanvas .ing-logo { margin-left: -2px; }

  .twitter-timeline html { height: 500px; }

  .searchModalMobile { margin-top: var(--height-navbar-top-mobile); }
  .searchModalMobile.modal.fade .modal-dialog, .searchModalMobile.modal.show .modal-dialog { transform: translate(0, 0); }

  .background-image { min-height: 260px; }

  .navbar-main .navbar-toggler { padding-top: 8px !important; }
  .nav-padding { height: var(--height-navbar-top-mobile); }
  .anchor { scroll-margin-top: calc(var(--height-navbar-top-mobile) + .75rem); bottom: var(--height-navbar-bottom-mobile) !important; }
  .padding-up { margin-top: .25rem !important; padding-top: 0; }
  .fs-large, .fs-large > p { font-size: 107.5% !important; }
  .fs-larger,  .fs-larger > p { font-size: 115% !important; }
  .ms-halfgutter { margin-left: .75rem; }
  .me-halfgutter { margin-right: .5rem; }
  .me-halfgutter img { border-radius: var(--card-border-radius) !important; }
  blockquote { margin: .5rem 1rem 1.5rem 1rem; width: auto; font-size: 100%; padding: 1rem 0; float: none !important; }
  blockquote.bloqs { margin-left: 0; width: 100%; }
  .insert blockquote { background-color: transparent; }
  .prefix svg { height: 1.3rem !important; }
  .in-this-entry-tooltip .tooltip-arrow::before { border-left-color: transparent !important; border-top-color: var(--link) !important; }
  .bg-lg-light { background-color: transparent !important; }  
  .admin_panel .card-header, .admin_panel .list-group-item { padding: .125rem .5rem !important; }
  .card .card-footer.border-bottom { border-bottom: none !important; }
  .card_entry:not(.card_entry.bg-hot):not(.card_entry.bg-dark):not(.card_entry.card-standout-dark):not(.card_entry.card-standout-light) { background-color: var(--light) !important; }
  .card .card-img-overlay { position: relative !important; }
  .card .icon-on-card { margin: 1rem .25rem; padding: 4px 4px 0; border-radius: var(--card-border-radius); font-size: 90% !important; }
  .card_topic { overflow: hidden; }
  .card_topic .card-frame { position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow: hidden; }
  .card_topic .card-frame img { object-fit: cover; min-height: 100%; }
  .card_bundle .card-frame img { object-fit: cover; min-height: 100%; border-radius: var(--card-border-radius) !important; }

  .homeSwiper .swiper-slide { height: auto !important; }
  .homeSwiper .swiper-slide .card .card-body { padding-bottom: .25rem !important; }
  .homeSwiper .swiper-slide .card .card-body .card-text { display: none !important; }

  .sign-up-newsletter h3 { font-size: 112%; }

  .social-media-icons svg { width: 1.75rem; height: 1.75rem; }

  .featurebox { height: auto !important; margin: 0 .75rem !important; padding: 0 !important; width: auto !important; border-radius: var(--card-border-radius); }
  .featurebox .card_thumb_large { margin-bottom: 1rem !important; border-radius: var(--card-border-radius) !important; }
  .swiper-button-next { right: 0 !important; display: none !important; }
  .swiper-button-prev { left: 0 !important; display: none !important; }
  .content_wrapper .fa-2x, .chart_wrapper .fa-2x { font-size: 120% !important; }
  .btn-orange { padding: 0.25rem 0.5rem; font-size: .875rem; border-radius: var(--card-border-radius); }
  .btn-social { padding: .2rem 0.5rem !important; max-height: 2rem; font-size: 100%; border-radius: var(--card-border-radius); }
  .rounded-top { border-radius: var(--card-border-radius) !important; }
  .table-fx .table-responsive { border-right: 1px solid var(--ing-grey-light) !important; }

  .nav-forecast .nav-link { border-bottom-color: var(--primary) !important; border-radius: var(--border-radius); font-size: 90%; padding: .25rem 1rem; margin-bottom: 0px; }
  .nav-forecast .nav-item.show .nav-link, .nav-forecast .nav-link.active { border-color: var(--primary); display: inline-flex; background-color: var(--primary); color: white; }
  .nav-forecast .nav-link.active { border-color: var(--primary); display: inline-flex; background-color: var(--primary); color: white; border-radius: var(--border-radius); }
  .nav-forecast { border-bottom-color: white; }
  .prev-next .btn-prev, .prev-next .btn-next { height: 60px; top: 350px !important; margin-top: -30px !important; opacity: .5; }
  .prev-next .btn-prev:hover, .prev-next .btn-next:hover { opacity: 1; }
}


@media only screen and (min-width: 991px) {
  /* restyle card_thumb_large so it looks like thumb_medium in the swiper */
  .homeSustSwiper .swiper-slide .card_thumb_large { height: 100% !important; }
  .homeSustSwiper .swiper-slide .card_thumb_large .card-title-top { padding-top: .75rem !important; padding-bottom: .25rem !important; }
  .homeSustSwiper .swiper-slide .card_thumb_large .card-body .card-title-top .text-grey { padding: 0; margin-left: 1rem; margin-right: 1rem; display: block; }
  .homeSustSwiper .swiper-slide .card_thumb_large .card-body .card-title { padding: 0 !important; margin-bottom: 0; }
  .homeSustSwiper .swiper-slide .card_thumb_large .card-body .card-title h4 { font-size: 115% !important; margin: auto 1rem 0 !important; line-height: 145% !important; }
  .homeSustSwiper .swiper-slide .card_thumb_large .card-body .card-text,
  .homeSustSwiper .swiper-slide .card_thumb_large .card-footer { display: none !important; }
}

@media only screen and (max-width: 992px) {
  /* downscaling card_thumb_large > card_thumb_medium */
  .card_downscale .card_thumb_large { background-color: var(--light) !important; }
  .card_downscale .card_thumb_large .card-text { display: none !important; }
  .card_downscale .card_thumb_large .card-title h4 { font-size: 107.5% !important; line-height: 145% !important; }
  .card_downscale .card_thumb_large .card-image { flex: 0 0 auto; width: 33.33333333%; padding-bottom: .5rem !important; }

  /* downscaling card_thumb_hor_large > card_thumb_medium */
  .card_downscale .card_thumb_hor_medium .col-12.col-lg-4 { flex: 0 0 auto; width: 38% !important; padding-right: .5rem !important; }
  .card_downscale .card_thumb_hor_medium .card-frame { padding-bottom: 1rem !important; padding-right: 0 !important; }
  .card_downscale .card_thumb_hor_medium .card-frame img { border-radius: var(--card-border-radius) !important; }
  .card_downscale .card_thumb_hor_medium .card-title { font-size: 107.5% !important; line-height: 145% !important; margin-left: 0 !important; }
  .card_downscale .card_thumb_hor_medium .entry_category-wrapper, .card_downscale .card_thumb_hor_medium .card-text { display: none !important; }
  
  /* restyle card_thumb_large so it looks like thumb_medium in the swiper */
  .homeSustSwiper .swiper-slide .card_thumb_large { height: 100% !important; }
  .homeSustSwiper .swiper-slide .card_thumb_large .card-body .card-title h4 { font-size: 115% !important; margin-bottom: 0 !important; line-height: 145% !important; }
  .homeSustSwiper .swiper-slide .card_thumb_large .card-body .card-text,
  .homeSustSwiper .swiper-slide .card_thumb_large .card-footer { display: none !important; }
}