/* =================================================agal
   1. TEMPLATE HOMEPAGE & HEADER
   ================================================== */

/* Transparant header */
#sp-header {
  position: absolute;
  background-color: #f9f9f9 !important;
}

.sp-megamenu-parent > li a {
  color: #000000;
  font-weight: 600;
}

.sp-megamenu-parent > li a:hover,
.sp-megamenu-parent > li.active > a {
  color: #02537C;
  font-weight: 600;
}

.sp-megamenu-parent > li.active:hover > a {
  color: #000000;
  font-weight: 600;
}

/* Sticky header */
#sp-header.header-sticky {
  background-color: #ffffff !important;
}

.header-sticky .sp-megamenu-parent > li a:hover {
  color: #02537C;
  font-weight: 600;
}

.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
  padding: 0px;
  border-radius: 0px;
  box-shadow: 0 30px 50px 0 rgba(0, 0, 0, 0.51);
}


/* =================================================
   2. MENU & OFF-CANVAS
   ================================================== */

/* Show all items off-canvas menu */
.menu-parent .menu-child {
  display: block !important;
}

.menu-parent .menu-toggler {
  display: none !important;
}

.offcanvas-menu .offcanvas-inner {
  padding-top: 5px;
  padding-left: 10px;
}

.offcanvas-menu .offcanvas-inner::before {
  content: "MENU";
  display: block;
  margin-bottom: -10px;
  font-weight: 700;
}

.offcanvas-menu .offcanvas-inner ul.menu > li > a, 
.offcanvas-menu .offcanvas-inner ul.menu > li > span {
  line-height: 7px;
}

.offcanvas-menu .offcanvas-inner ul.menu > li > ul li a {
  font-size: 18px;
  padding: 4px 0px;
  line-height: 17px;
  font-weight: 500;
  color: #000000;
}


/* =================================================
   3. LAYOUT & MODULES
   ================================================== */

#sp-main-body {
  padding-top: 100px;
}

#sp-bottom {
  padding: 0px 0 0px;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: -31px;
}

#sp-left .sp-module, 
#sp-right .sp-module {
  margin-top: 50px;
  border: 1px solid #f3f3f3;
  padding: 0px 30px 30px 30px;
  border-radius: 3px;
}

#sp-left .sp-module .sp-module-title, 
#sp-right .sp-module .sp-module-title {
  margin: 0 0 30px;
  padding-bottom: 20px;
  font-size: 160%;
  font-weight: 500;
  border-bottom: 1px solid #f3f3f3;
}

.breadcrumb {
  background-color: #fefefe;
  font-size: 14px;
  margin-bottom: -100px;
}

.mod-articles-date {
  font-size: 16px;
}


/* =================================================
   4. BLOG OVERVIEW (Afbeelding rechts)
   ================================================== 

.article-list .article {
  display: grid;
  grid-template-columns: 1fr .5fr;
  gap: 0 20px;
}

.article-header {
  grid-row: 1/2;
  grid-column: 1/-1;
}

.article-list .article-body {
  display: contents;
}

.article-list .article .article-intro-image, 
.article-list .article .article-featured-video, 
.article-list .article .article-featured-audio, 
.article-list .article .article-feature-gallery {
  margin: 0;
}

.article-list .article > a, 
.article-featured-audio, 
.article-featured-video, 
.article-feature-gallery {
  grid-column: 2;
  grid-row: 2/6;
}

.readmore {
  grid-row: 5/6;
  justify-self: start;
}

*/

/* Artikellijst styling */
.article-list .article {
  border: 1px solid #d6d6d6;
  box-shadow: 2px 2px 3px lightgray;
}