/* Custom properties --------------------------------------- */

:root {
  --font-style-1            : "Archivo Black", sans-serif;
  --font-style-9            : "TikTok Sans", sans-serif;
  --font-style-10           : "TikTok Sans Bold", sans-serif;  
  --text-color-1            : #2b2b2b;
  --background-color-8      : #F6F6F6;
  --background-color-9      : #9d9d9d;
  --background-color-10      :rgba(99,34,120,1);
  --text-color-highlight-1  : #632278;
  --text-color-highlight-1  : rgb(56,97,163);
  --text-color-highlight-1  : rgb(49,87,155);
  --link-color              : var(var(--text-color-1));
}

/* Typography ---------------------------------------------- */

@font-face {
 font-family: "TikTok Sans";
 src: url('https://staging.jazznu.com/templates/shaper_helixultimate/fonts/TikTokSans/TikTokSans-Regular.ttf') format('ttf');
}

@font-face {
 font-family: "TikTok Sans Bold";
 src: url('https://staging.jazznu.com/templates/shaper_helixultimate/fonts/TikTokSans/TikTokSans-Bold.ttf') format('ttf');
}

/* Algemeen ------------------------------------------------ */

/* Geen frontend editing voor Super Users */
.article-can-edit {display: none !important}


/* EINDE: Algemeen ----------------------------------------- */

/* Typografie ---------------------------------------------- */

.home .slogan {
  font-family: var(--font-style-1);
  font-size: 1rem;
  font-weight: 300;
  /* font-style: italic; */
  line-height: 1.2;
  text-transform: none;
  width: fit-content;
  margin: 1rem auto;
  color: #fff;
}

span.slogan {font-style: italic;}

#sp-title {
  background-color: var(--text-color-highlight-1);
  color: #fff;
}


h1, h1 a, h2, h2 a {
  font-family: var(--font-style-1);
  font-size: 2rem;
  font-weight: 400;
  font-style: normal;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--text-color-1);
  color: var(--text-color-highlight-1);
}

h1, h2 {
  margin-top: 1rem;
}

h3, h3 a {
  font-family: var(--font-style-1);
  font-size: 1.1rem;
  font-weight: 400;
  font-style: normal;
  text-transform: none;
  line-height: 1.2;
  /* letter-spacing: -0.046rem;*/
}

p, a {
  font-family: var(--font-style-9);
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "slnt" 0,
    "wdth" 100;
  line-height: 1.4 !important;
  color: var(--text-color-1);
}

p {
  margin-bottom: 1.4rem !important;}
}

a {
  text-decoration: none;
}


a:hover, a:focus, a:active {
  color: var(--text-color-highlight-1);
  text-decoration: underline;
}

hr {
  margin: 1rem 0;
  color: inherit;
  border: 0;
  border-top: 1px solid #666;
  opacity: 1;
}


h3 .readmorelink {display: none;}
.home h3 .readmorelink,
.achtergrond h3 .readmorelink {display: block;}

/* Mega Menu ----------------------------------------------- */

.sp-megamenu-wrapper ul li,
.sp-megamenu-wrapper ul li a {
  font-family: var(--font-style-10);
  font-size: 18px;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-variation-settings:
    "slnt" 0,
    "wdth" 110;
  line-height: 1.4;
  color: var(--text-color-1);
}

.sp-megamenu-parent > li.active > a {
  font-weight: 700;
}


/* Off Canvas menu ----------------------------------------- */

@media screen and (max-width: 1580px) {
    .sp-megamenu-parent {display: none !important;}
    #offcanvas-toggler {display: flex !important;}
    #sp-menu .social-wrap {padding-right: 1rem;}
}

.burger-icon > span {
  height: 0.24rem;
  margin: .3rem 0;
}


/* Template posities --------------------------------------- */

#sp-main-body {
  padding: 2rem 0 4rem;
}

#sp-advertisements-bottom {
  padding: 3rem 0;
  background-color: var(--background-color-8);
  margin-bottom: 2rem;
}

#sp-advertisements-bottom .sp-module-title {text-align: center;}

/* Modules -------------------------------------------------- */

/* D-Arkiv Assetlist ---------------------------------------- */

#darkiv-assetlist {
  clear: both;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--text-color-highlight-1);
}

#darkiv-assetlist .darkiv-assetlist-wrapper {
  padding-left: 0;
  padding-right: 0;
}

#darkiv-assetlist .darkiv-asset {padding-bottom: 1rem;}

#darkiv-assetlist .asset-info,
#darkiv-assetlist .asset-type-image,
#darkiv-assetlist .asset-introtext,
#darkiv-assetlist .asset-tags {width: 100%;}

#darkiv-assetlist .asset-info {margin-bottom: 0.3rem;}

#darkiv-assetlist .asset-type-image a {display: flex;}

#darkiv-assetlist .asset-type-image {
  border-radius: 0.5rem;
  overflow: hidden;
  margin-bottom: 1rem;
}


#darkiv-assetlist .asset-type-image picture,
#darkiv-assetlist .asset-type-image img  {
  width: 100%;
  background-color: #ddd;
}

#darkiv-assetlist .asset-title {
  height: 4rem;
  overflow: hidden;
}

#darkiv-assetlist .asset-introtext {
  -webkit-mask-image: linear-gradient(180deg,#000 72%,transparent);
}

#darkiv-assetlist .asset-date {
  font-weight: 300;
  opacity: 0.5;
  padding-left: 0.3rem;
}

#darkiv-assetlist .asset-type-image {border-radius: 0.5rem;}

#darkiv-assetlist .darkiv-asset .asset-introtext {
  min-height: 9rem;
  margin-bottom: 1rem;

}

#darkiv-assetlist .asset-tags .block-readmore,
#darkiv-assetlist .asset-tags .block-tags {display: block;}

#darkiv-assetlist .asset-tags .block-readmore {width: fit-content; float: left;}
#darkiv-assetlist .asset-tags .block-tags {width: fit-content; float: right;}

#darkiv-assetlist .asset-tags .block-readmore {margin-left: 0.3rem;}

#darkiv-assetlist .asset-tags {width: 100%;}

#darkiv-assetlist.uitgelicht .asset-1 .asset-introtext,
#darkiv-assetlist.uitgelicht .asset-1 .asset-introtext a {font-weight: 700;}

.moduletable h3 .readmorelink {
  color: var(--text-color-highlight-1);
}

#darkiv-assetlist a:hover {
  text-decoration: none;
}

#darkiv-assetlist .asset-tags .asset-tag {
  margin-right: 0.5rem;
}

#darkiv-assetlist .asset-tags .asset-tag:last-of-type {
  margin-right: 0;
}

/* D-Arkiv assetlist - intro nieuws ----------------------------- */

/*
.intro-nieuws {background-color: var(--background-color-10);}
.intro-nieuws {background-color: #f6f6f6;} 
*/

.intro-nieuws #darkiv-assetlist .darkiv-assetlist-wrapper {
  padding-left: 15px;
  padding-right: 15px;
}

.intro-nieuws #darkiv-assetlist .darkiv-asset {
  padding-top: 15px;
  padding-right: calc( 15px / 2 );
  padding-left: calc( 15px / 2 );
}

.intro-nieuws #darkiv-assetlist .asset-date {
  font-weight: 300;
  opacity: 0.5;
  padding-left: 0.3rem;
}

#darkiv-assetlist .darkiv-asset .asset-type-image img:hover,
.intro-nieuws #darkiv-assetlist .darkiv-asset .asset-type-image img:hover {
  opacity: 0.7;
  transition: opacity 250ms ease-in;
  transition: opacity 100ms ease-out;
}

.intro-nieuws #darkiv-assetlist .darkiv-asset .asset-type-image,
.intro-nieuws #darkiv-assetlist .darkiv-asset .asset-title,
.intro-nieuws #darkiv-assetlist .darkiv-asset .asset-introtext {
  margin-bottom: 1rem;
  overflow: hidden;
}

.intro-nieuws #darkiv-assetlist .asset-title {height: 4rem;}
.intro-nieuws #darkiv-assetlist .asset-introtext {height: 9rem;}

.intro-nieuws #darkiv-assetlist .asset-tags {
  margin-bottom: 1rem;
  display: block;
  float: left;
  width: 100%;
  clear: both;
}

.intro-nieuws #darkiv-assetlist .asset-tags span {
  margin-left: 0.25rem;
  margin-right: 0.5rem;
}

.intro-nieuws #darkiv-assetlist .asset-tags .asset-tag::before {
  content: " ";
}
.intro-nieuws #darkiv-assetlist .asset-tags .asset-tag:nth-child(1)::before {
  content: none;
}

.intro-nieuws #darkiv-assetlist .asset-tags {opacity: 0.66667;}


/* D-Arkiv assetlist - uitgelicht ------------------------------------ */

#darkiv-assetlist.uitgelicht .darkiv-asset {
  display: block;
  float: left;
}

#darkiv-assetlist.uitgelicht .darkiv-asset .asset-info,
#darkiv-assetlist.uitgelicht .darkiv-asset .asset-type-image,
#darkiv-assetlist.uitgelicht .darkiv-asset .asset-title,
#darkiv-assetlist.uitgelicht .darkiv-asset .asset-introtext,
#darkiv-assetlist.uitgelicht .darkiv-asset .asset-tags {
  display: block;
  float: left;
}

/* D-Arkiv asset -------------------------------------------- */

.item-page time {
  font-weight: 300;
  opacity: 0.5;
  padding-left: 0.3rem;
}

.item-page img {
  border-radius: 0.5rem;
  overflow: hidden;
  margin-bottom: 1rem;
  margin-left: auto;
  margin-right: auto;
}

.item-page .caption {
  text-align: center;
  font-weight: 300;
  opacity: 0.7;
  margin-top: -1rem;
  max-width: 85%;
  margin-left: auto;
  margin-right: auto;
}

.item-page  .credit {
  max-width: 66%;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: -2rem;
  color: #fff;
  text-shadow: 1px 2px #333;
  margin-bottom: 2rem;
}

.item-page  .credit::before {
  content: 'Foto: ';
}

.assetCredits .assetCreditType {font-weight: 400;}
.assetCredits .assetCreditName {font-weight: 700;}

.page-header img {width: 100%;}

.page-header .caption {
  font-weight: 300;
  opacity: 0.7;
  max-width: 100%;
  margin-top: -1rem;
  margin-left: 0.3rem;
  margin-right: 0.3rem;
}



/* Advertenties - bottom ------------------------------------ */
#sp-advertisements-bottom h3 {
  margin: 0 0 1rem;
  text-align: center;
  opacity: 0.75;
}

/* EINDE - Modules ------------------------------------------ */

/* Fixes voor pre-2026 WP vormgeving ------------------------ */

.vw-inline-hilight {background-color: transparent !important;}

/* EINDE: Fixes voor pre-2026 WP vormgeving ----------------- */

/* Media queries -------------------------------------------- */

/* Based on minimal width ----------------------------------- */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { 

}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { 
  
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 

  .item-page {
    max-width: 798px;
    margin: 0 auto;
  }

  .item-page figcaption {
    margin-top: 1.rem;
    font-size: 0.85rem;
    font-style: italic;
  }

  .item-page figure {max-width: 100%;}
  .item-page figure img {
    margin: 0 auto;
    max-width: 100%;
  }

.item-page figure figcaption {
  margin: 0 auto;
  max-width: 90%;
  }

}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 

}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) { 

    /* Nieuws op homepage */
  .intro-nieuws .darkiv-asset:nth-child(5),
  .intro-nieuws .darkiv-asset:nth-child(6) {display: none;}

    /* Uitgelicht op de homepage */
     
  #darkiv-assetlist.uitgelicht .asset-1 .asset-title {height: 3rem;}
  #darkiv-assetlist.uitgelicht .asset-1 .asset-title h3,
  #darkiv-assetlist.uitgelicht .asset-1 h3 a {font-size: 1.5rem;}
  #darkiv-assetlist.uitgelicht .asset-1 .asset-title {height: inherit; height: 3.7rem; margin-bottom: 1rem;}
  #darkiv-assetlist.uitgelicht .asset-1 .asset-introtext {height: 13.7rem;}

  #darkiv-assetlist.uitgelicht.darkiv-asset,
  #darkiv-assetlist.uitgelicht.darkiv-asset div {float: left;}

  #darkiv-assetlist.uitgelicht .asset-2 .asset-info {width: 100%;}
  #darkiv-assetlist.uitgelicht .asset-2 .asset-type-image {width: calc((100% - 45px)/4); margin-right: 15px;}
  #darkiv-assetlist.uitgelicht .asset-2 .asset-type-image img {width: calc(100%);}
  #darkiv-assetlist.uitgelicht .asset-2 .asset-title,
  #darkiv-assetlist.uitgelicht .asset-2 .asset-introtext,
  #darkiv-assetlist.uitgelicht .asset-2 .asset-tags {width: calc(75% - 7.5px); float: right; }
  #darkiv-assetlist.uitgelicht .asset-2 .asset-title {height: inherit;}
  #darkiv-assetlist.uitgelicht .asset-2 .asset-introtext {height: 6rem; min-height: auto;}
  #darkiv-assetlist.uitgelicht .asset-2 .asset-tags {margin-top: -2.65rem;}
}

/* Based on maximum width ----------------------------------- */

 #sp-header #sp-menu ul.social-icons li span::before {font-size: 1.5rem !important;}

/* X-Small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {

  #sp-header {height: 80px !important;}
  #sp-header .container,
  #sp-header .container .container-inner,
  #sp-header .container .container-inner .row {height: 100%;}

  #sp-header .logo-image-phone {height: 55px !important;} 

  #sp-header #sp-menu ul.social-icons > li:not(:last-child) {margin-right: 2rem;}

   p.slogan {text-align: center;}
  span.slogan {font-style: italic;}

.intro-nieuws #darkiv-assetlist .asset-title {
  height: inherit;
}

}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {

    /* Nieuws op homepage */
  .intro-nieuws .darkiv-asset:nth-child(3),
  .intro-nieuws .darkiv-asset:nth-child(4),
  .intro-nieuws .darkiv-asset:nth-child(5),
  .intro-nieuws .darkiv-asset:nth-child(6) {display: none;}

}

/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {

  /* Nieuws op homepage */
  /*
  .intro-nieuws .darkiv-asset:nth-child(4),
  .intro-nieuws .darkiv-asset:nth-child(5),
  .intro-nieuws .darkiv-asset:nth-child(6) {display: none;}
  */
}

/* X-Large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) {



}