:root {
	/* Adjust root font-size to 62.5% for easier calculation */
  font-size: 62.5%;
  font-size-adjust: 100%;

  /* Default font sizes */
  --fontDefaultSize: 16px;
  --fontSmall:			 14px;
  
  /* Heading Sizes */
	--h1size: 3.4rem;	/* 34px */
  --h2size:	3.2rem;	/* 32px */
  --h3size:	2.4rem;	/* 24px */
  --h4size:	1.6rem;	/* 16px */
  --h5size: 1.4rem;									/* 14px */
  --h6size:	1.2rem;									/* 12px */

  /* Font Weights */
  --fontLight:			300;
  --fontRegular:		400;
  --fontMedium:			500;	
  --fontSemiBold:		600;
  --fontBold: 		  700;
  --fontExtraBold:	800;


  /* Line Heights */
  --lineHeight: 		1em;
  --lineHeight-xs:	1em;
  --lineHeight-s:		1.2em;
  --lineHeight-m:		1.4em;
  --lineHeight-l:		1.6em;
  --lineHeight-xl: 	2em;

  /* Text breedte */
  --length-xs:	40ch;
  --length-s:  	50ch;
  --length-m:  	60ch;
  --length-l:  	65ch;
  --length-xl: 	70ch;
  
  /* Spacing */
  --space-xxs:	0.5rem;
  --space-xs:		0.8rem;
  --space-s:		1rem;
  --space-m:		2rem;
  --space-l:		3rem;
  --space-xl:		4rem;
  --space-xxl:	5rem;

  /* Letter spacing */
  
	--letter-spacing-s: 0.001em;
	--letter-spacing-m: 0.005em; 
	--letter-spacing-l: 0.01em;
  
  /* Padding volgt later */
  
	/* Border Radius */
  
  --border-radius-xs: 0.3rem;
  --border-radius-s: 0.4rem;
  --border-radius-m: 0.6rem;
  --border-radius-l: 0.8rem;
  --border-radius-xl: 1rem
    
	/* Box Shadow */
    
	--box-shadow-style : 0px 2px 10px -4px rgba(0,0,0,0.4);

  /* Text (WAARVOOR IS DEZE? -> om tekst te verkleinen of vergroten zonder headings te moeten gebruiken) */
  --text-xs:	0.6rem;
  --text-s: 	0.8rem;
  --text-m: 	1rem;
  --text-l: 	1.2rem;
  --text-xl:	1.4rem;
	--text-xxl:	1.8rem; 

/* Announcement Bar link 
.announcement a, .announcement a:hover {color: #ff0000;}
*/

/* Kleur van de linkjes op tekstpagina's 
	--linkcolor-light:	#307be6; */
}


table h1, table h2, table h3, table h4, table h5, table h6, table .h1, table .h2, table .h3, table .h4, table .h5, table .h6 { font-family: 'Cabin', Open sans, arial; line-height: 2; margin: 0; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--fontHeading); line-height: 1.3; margin: 0; }
h1, .h1 { font-size: var(--h1size); font-weight: 700; line-height: 4.2rem; color: var(--accent); }
h2, .h2 { font-size: var(--h2size); font-weight: 700; line-height: 4.2rem; margin-top: var(--space-m);}
h3, .h3 { font-size: var(--h3size); font-weight: 700; line-height: 3.2rem; margin-top: var(--space-m);}
h4, .h4 { font-size: var(--h4size); font-weight: 700; line-height: 2.6rem; margin-top: var(--space-m);}
h5 { color: var(--accent); font-weight: var(--fontNormal); }
h6 { font-weight: var(--fontNormal); }
h5, h6 { font-size: 1.6rem; line-height: 1.6rem; }

@media (max-width: 1199.98px) {	/* 75rem = 1200px (afgerond), we gebruiken nu 1199.98px = 74.99875rem */
  :root {
    --h4size:		1.5rem;
  } 
}

@media (max-width: 991.98px) { /* 62rem = 992px (afgerond), we gebruiken nu 991.98px = 61.99875rem */
  :root {
    --h1size:		2.8rem;
    --h2size:		2.2rem;
  }
}

@media (max-width: 767.98px) { /* 48rem = 768px (afgerond), we gebruiken nu 767.98px = 47.99875rem */
  :root {
    --h1size:		3.2rem;
    --h2size:		2.4rem;
    --h3size:		2rem;
  }
}

@media (max-width: 575.98px) { /* 36rem = 768px (afgerond), we gebruiken nu 575.98px = 35.99875rem */
  :root {
    --fontDefaultSize:	1.4rem;
    --h1size:						3.2rem;
    --h2size:						2.4rem;
    --h3size:						2rem;
    --h4size:						1.8rem;
  }
}
  

/* Categorie type tekst */

/* Textpage header image */
#servicepage .textpage-header {margin-top: var(--space-m); margin-bottom: var(--space-m);}
#servicepage .img-rounded-xs {border-radius: var(--border-radius-xs);}
#servicepage .img-rounded-s {border-radius: var(--border-radius-s);}
#servicepage .img-rounded-m {border-radius: var(--border-radius-m);}

#servicepage .textpage-image {display: flex;margin-top: var(--space-m);margin-bottom:var(--space-s);}
#servicepage .img-center {margin-left: auto; margin-right: auto;}

#servicepage .img-box-shadow-m {box-shadow: var(--box-shadow-m);}
#servicepage .img-box-shadow-l {box-shadow: var(--box-shadow-l);}
#servicepage .img-box-shadow-xl {box-shadow: var(--box-shadow-xl);}

/* Center image */
#servicepage .center-content {display: flex;margin-top: var(--space-m);margin-bottom:var(--space-l);justify-content: center; align-items: center;}
/* Center image border */
#servicepage .center-content-border img {display: flex;margin-top: var(--space-m);margin-bottom:var(--space-l);margin-left: auto; margin-right: auto; justify-content: center; align-items: center; border: 1px solid #000000;}
#servicepage .center-content-border a img {cursor: pointer; opacity:1;}
/* Center image with box shadow */
#servicepage .center-content-shadow img {display: flex;margin-top: var(--space-m);margin-bottom:var(--space-l);margin-left: auto; margin-right: auto;justify-content: center; align-items: center; box-shadow:  0px 10px 15px -5px rgba(0,0,0,0.4);}

/* Textpage gerelateerde content */
#servicepage-block-tags {padding-bottom: var(--space-xs);}
#servicepage-block-tags h2 { margin-bottom: 20px;}

#servicepage .textpage-service-block {display: none !important;}
#servicepage h2, #servicepage .h2 { font-size: var(--h3size); }
#servicepage h3, #servicepage .h3 {line-height: 4.2rem;}

/* servicepage paragraph 
@Daan de max width kan dat alleen op klantenservice-pagina's worden geactiveerd? daar willen we iets minder breed dan op de andere servicepagina's
*/
#servicepage p {
    line-height: var(--lineHeight-l);
    /*max-width: var(--length-xl); FYI: dit zorgt ervoor dat alle <p> tags niet in volle breedte worden getoond, vandaar uitgecomment. */
    margin-top: var(--space-s);
  	margin-bottom: var(--space-m);
    letter-spacing: var(--letter-spacing-l);
    /* font-size: var(--colorbody);  deze bestaat (nog) niet */
  }
#servicepage p a {letter-spacing: 0;}

#product p { 
  line-height: var(--lineHeight-l);
  letter-spacing: var(--letter-spacing-l);
  margin-top: var(--space-s);
}
#product .h4 {line-height: 4.2rem;}
#product .first-heading {margin-top: 0;}


/* ordered and unorderd lists */

#servicepage .list-wrapper: {padding:0;}

#servicepage ul {margin-top: var(--space-s);margin-bottom:var(--space-s); padding-left: var(--space-s);}
#servicepage ul > li {line-height:var(--lineHeight-m);margin-left: var(--space-xxs);}
#servicepage ul > li:not(:last-of-type) {line-height:var(--lineHeight-m);margin-left: var(--space-xxs); margin-bottom: var(--space-xs);}
#servicepage ol  {margin-top: var(--space-s);margin-bottom:var(--space-s); padding-left: var(--space-s);}
#servicepage ol > li {line-height:var(--lineHeight-m);margin-left: var(--space-xxs);}
#servicepage ol > li:not(:last-of-type) {line-height:var(--lineHeight-m);margin-left: var(--space-xxs); margin-bottom: var(--space-xs);}
#servicepage ol > li .kop {margin-bottom: var(--space-xs);}
#servicepage ol > li .subtekst {font-weight: 400; margin-bottom: var(--space-xs);}
#servicepage .semibold .kop {font-weight: 600;}

/* link terug naar klantenservice */
#servicepage .link-klantenservice {
  margin-top: var(--space-s);
}

/* ordered and unordered list klantenservice en adviespagina */
#servicepage-overview #links .container {padding:0;}
#servicepage-overview #links ul {list-style:none;padding:0;margin-top: var(--space-s);margin-bottom:var(--space-s);}
#servicepage-overview #links ol {padding-left: var(--space-xs); margin-top: var(--space-s);margin-bottom:var(--space-s);}
#servicepage #links ol > li {line-height:var(--lineHeight-m);margin-top: var(--space-xxs); padding-left: var(--space-xs);}

/* Heading color servicepage overview */
#servicepage-overview h2, #servicepage-overview h3, #servicepage-overview h4 {color: var(--accent);}

/* servicepage FAQ */ 
#servicepage .accordion .card {border: none;position: relative;margin-top: var(--space-xs);}
#servicepage .btn {font-size: var(--h4size);}

/* servicepage Custom Footer */

#servicepage .show-content-block h4 { 
  margin-bottom: 10px; 
  font-size: var(--h3size);
  line-height: 4.2rem;
  color: var(--accent);
}
/* meer over blok */

.meer-over__wrapper {
  margin-top: var(--space-xl);
	background-color: var(--light);
  padding: 2rem;
  border-radius: var(--border-radius-s);
}
/* Meer over titel 
#servicepage .meer-over-titel {margin-top: var(--space-m);margin-bottom: var(--space-s);}
*/
/* link naar andere hoofdondewerpen */
#servicepage .meer-over {line-height: var(--lineHeight-xl);}
#servicepage .meer-over a { line-height: var(--lineHeight-xl);}

/* button terug naar klantenservice */
#servicepage .btn-terug {margin-top: var(--space-l);margin-bottom: var(--space-l);}

/* link terug naar groep */
#servicepage .link-groep {
  margin-bottom: var(--space-s);
}
/* Offerte aanvragen - geen formulier */

#servicepage .offerte-wrapper {
  margin-top: var(--space-m); margin-bottom: var(--space-l);}

#servicepage .offerte-wrapper > ul {
  list-style: none;
  padding: 0;
  line-height: var(--lineHeight-s);
}
#servicepage .offerte-wrapper > ul > li .icon-check {
  font-size: 2rem;
}

/* Checklist wrapper */

#servicepage .checklist-wrapper {
  margin-top: var(--space-m); margin-bottom: var(--space-l);}

#servicepage .checklist-wrapper > ul {
  list-style: none;
  padding: 0;
  line-height: var(--lineHeight-s);
}
#servicepage .checklist-wrapper > ul > li .icon-check {
  font-size: 2rem;
}
#servicepage .checklist-wrapper > ul > li .icon-plus {
  font-size: 2rem;font-weight:var(--fontBold);color:green;line-height:var(--lineHeight-m);
}

/* Kleuren font-awesome icons */

#servicepage .bmx-plus {color: green;}
#servicepage .bmx-minus {color: red;}

/* Cards voor koopgidsen */

#servicepage .category-card {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-m);
  margin-bottom: var(--space-m);
  border: 1px solid var(--dark-grey);
  border-radius: var(--border-radius-s);
}

#servicepage .card-img-top {
border-radius: var(--border-radius-s);
}

/* Cards voor oa review */

#servicepage .card {position: relative;display: -ms-flexbox;display: flex;-ms-flex-direction: column;flex-direction: column;min-width: 0;word-wrap: break-word;background-color: #fff;background-clip: border: 1px solid var(--lines);
    border-radius: var(--borderRadius2);padding: var(--space-xs);}

#servicepage .card-body {line-height: var(--lineHeight-m); padding: 1.25rem 0;}

#servicepage .card-title {
    margin-bottom: 0.75rem;
    margin-top: 0;
    font-size: var(--h4size);
}

#servicepage .category-card-footer {
  display: flex;
  justify-content: center;
}
#servicepage .category-view-btn {
  display: flex;
  align-items: center;
  background: var(--dark);
  padding: 1rem 2rem;
  color: #fff;
  border-radius: var(--border-radius-s);
}

/* Service Page Modals */

/* Bootstrap popup modal */
#servicepage .modal .modal-dialog {margin: 30px auto;max-width: 1280px;}
#servicepage .modal .close { font-size: 3rem; position: relative; top: -5px; }

/* Cases */

#servicepage .case-images .content:first-child {
  padding-left: 0px !important;
}
 #servicepage .case-images .content .case-image {
    height: 100%;
    width: 100%;
    min-height: 325px;
    border-radius: 15px;
    background-size: cover !important;
    display: inherit;
}
  
#servicepage .cases-titel {margin-top: var(--space-m);margin-bottom: var(--space-s);}

/* link naar andere cases */
#servicepage .andere-case-titel {line-height: var(--lineHeight-xl);}
#servicepage .andere-case-titel a { line-height: var(--lineHeight-xl);}

/* Quote */

#servicepage.case-quote__wrapper {
  position: relative;
  left: 0;
  right: 0;
  align-items: left;
}

#servicepage .case-quote {
  font-size: var(--h3size);
margin-left:var(--space-xs);
  font-weight: 500;
  font-style: italic;
  color: var(--accent);
line-height: var(--lineHeight-s);
}
#servicepage.case-quote::before {
  content: ""; /* Zorg ervoor dat je content toevoegt, zelfs als het leeg is */
  position: absolute;
  top: 0;
  left: 0;
  width: 20px; /* Pas de breedte aan naar jouw behoefte */
  height: 20px; /* Pas de hoogte aan naar jouw behoefte */
  background-image: url('https://static.webshopapp.com/shops/081800/files/069549140/accolade.png'); /* Plaats hier het juiste pad naar je afbeelding */
  background-size: cover;
    line-height: var(--lineHeight-s);
}

/* Headings marges */
#servicepage .first-heading {margin-top: var(--space-s); }
#servicepage .vervolg-kop {margin-top: var(--space-m);}

/* link voor meer informatie over onderwerp */
#servicepage .lees-meer {margin-top: var(--space-s);margin-bottom: var(--space-m);}

/* meer info over een onderwerp op tekstpagina's */

#servicepage .meer-info {display: flex; align-items: center; margin-bottom: var(--space-m); line-height: var(--lineHeight-m);}
#servicepage .meer-info a {text-decoration: underline;}
#servicepage .meer-info .rotate {margin-left: 3px;}
/* waarom expert */
#servicepage .waarom-expert {display: flex; align-items: start; margin-top: var(--space-s);}
#servicepage .waarom-expert__icon {margin-right:0;line-height: var(--lineHeight-l);}
#servicepage .waarom-expert__text  {margin-left:0; line-height: var(--lineHeight-l);}

/* tabel */
#servicepage .table-bordered {margin-top: var(--space-s);}
#servicepage .table-bordered td,.table-bordered th {border: 1px solid #b9b8b9;}
#servicepage .table .thead-light th {color: var(--black);background-color: #e8e7e8;border: 1px solid #b9b8b9;}

/* Tabel titel */
#servicepage .tabel-titel {font-size: var(--text-xxl);font-weight: 700;}


@media (min-width: 1200px) {
  /* Tabel met 2 kolommen */
  #servicepage .table-custom-2 th,#servicepage .table-custom-2 td {width: 50%;}

  /* Tabel met 3 kolommen */
  #servicepage .table-custom-3 th,#servicepage .table-custom-3 td {width: 33%;}
}

#servicepage .scroll-link {offset: 60px;}

#servicepage .onze-reviews {
  margin-top: var(--space-l);
}

/* TAGS CUSTOM FOOTER FAQ SPACING */
#servicepage .footer-content-m-top { margin-top: var(--space-m);}
#servicepage .footer-content-top--m {margin-top: var(--space-m);}
#servicepage .footer-content-top--l {margin-top: var(--space-l);}
#servicepage .footer-content-top {margin-top: var(--space-s);}

/* Overzichtspaginas */

#servicepage .catalog-cat-title a {font-size: var(--h4size);}


/* Productpagina */

#product .spec-plus, #product .spec-min {line-height: var(--lineHeight-m);}

#product .spec-plus::before {font-family: "icomoon";content: "\002B";display: inline-block; width: var(--text-l); height: var(--text-l); background-color: green; color: #fff; text-align: center; line-height: var(--lineHeight-l);}
#product .spec-min::before {font-family: "icomoon"; content: "\2212"; display: inline-block; width: var(--text-m); height: var(--text-m); background-color: #000; color: #fff; text-align: center; line-height: var(--lineHeight-m);}
#product .description img {margin-left: var(--space-xxs);}

/* Collection pagina */
#collection h4, #collection .h4 { font-size: 2rem; color: var(--accent); margin-bottom: 20px;}
#collection p {
    line-height: var(--lineHeight-l);
    /*max-width: var(--length-xl); FYI: dit zorgt ervoor dat alle <p> tags niet in volle breedte worden getoond, vandaar uitgecomment. */
    margin-top: var(--space-s);
  	margin-bottom: var(--space-m);
    letter-spacing: var(--letter-spacing-l);
    /* font-size: var(--colorbody);  deze bestaat (nog) niet */
  }
#collection p a {letter-spacing: 0;}
#collection .sliding-link {text-decoration: underline;}
#collection .list-wrapper, #collection .beamers-wrapper: {padding:0;}
#collection .beamers-wrapper .kop a {text-decoration: underline;}
#collection ul {margin-top: var(--space-s);margin-bottom:var(--space-s); padding-left: var(--space-s);}
#collection ul > li {line-height:var(--lineHeight-m);margin-left: var(--space-xxs);}
#collection ul > li:not(:last-of-type) {line-height:var(--lineHeight-m);margin-left: var(--space-xxs); margin-bottom: var(--space-xs);}
#collection ol  {margin-top: var(--space-s);margin-bottom:var(--space-s); padding-left: var(--space-s);}
#collection ol > li {line-height:var(--lineHeight-m);margin-left: var(--space-xxs);}
#collection ol > li:not(:last-of-type) {line-height:var(--lineHeight-m);margin-left: var(--space-xxs); margin-bottom: var(--space-xs);}
#collection ol > li .kop {margin-bottom: var(--space-xs);}
#collection ol > li .subtekst {font-weight: 400; margin-bottom: var(--space-xs);}
#collection .semibold .kop {font-weight: 600;}
#collection .dmws_perfect-filter-content a {margin-left: 0.5rem;}

#collection .footer-content-top {margin-top: var(--space-m);}

#collection .btn-bmx-actie a {padding: 0.8rem 1.2rem; background: var(--accent); border-radius: var(--borderRadius); color: #fff;}

/* Blogposts */

#article .content .text h3 {font-size: var(--h2size);}
#article p {line-height: var(--lineHeight-l);max-width: var(--length-xl);margin-top: var(--space-s);margin-bottom: var(--space-m);letter-spacing: var(--letter-spacing-l);}