@charset "utf-8";
:root {
  --kleurFe-1: #8b8b8b;
  --kleurFe-2: #4F4F4F;
  --kleurFe-3: #86ae34;
  --kleurFe-4: #A5A5A5;
  --kleurFe-5: #ffffff;
  --kleurFe-6: #f1f1f1;
  
  --kleur-no1:#7fb347; /* donkergroen */
  --kleur-no2:#e4307f; /* roze */
  --kleur-no3:#bbca02; /* lichtgroen */
  --kleur-no4:#c02222; /* rood */
  --kleur-no5:#f6901c; /* oranje */
  --kleur-no6:#f2c633; /* geel */

  --font-1: 'PT Sans',Arial,sans-serif;
  --font-tekst: 'PT Sans', Sans-serif;
  --font-H1: 'Sugar & Spice', Sans-serif;
  --font-H2: 'Sugar & Spice', Sans-serif;
  --font-H3: 'PT Sans', Sans-serif;
  --font-slogan: 'PhosphateInline', Sans-serif;

  --fontSmal: 14px;
  --fontSta: 16px;
  --fontMid: 20px;
  --fontGro: 24px;
  --fontGroH1: 52px;
  --fontGroH2: 24px;
  --fontGroH3: 24px;

  --font-W-Sta: 500;
  --font-W-Mid: 700;
  --font-W-Gro: 900;

  --borderRadius: 0;
  --topnavButtonHeight:24px;
  
	--color-A: #d73027;
	--color-B: #fc8d59;
	--color-C: #f7e471;		/* fee090; */
	--color-D: #e0f3f8;
	--color-E: #dfe9ef;
	--color-F: #4575b4;
/* icon  Link blok items */
	--icon-a:"\f35a"; /* f35b f359 f358*/
	--icon-brush:"\f1fc"; /* f35b f359 f358*/
}

/*------------------------------------------------------------------
[Master Stylesheet]

Project:	Medusa Basis Business Responsive 7.3
Version:    1.0
Primary use:    Basis template responsive website
Method:	Bootstrap 3 Media Queries, Mobile First Method
-------------------------------------------------------------------*/

/*------------------------------------------------------------------
[Inhoudsopgave]

0. Medusa - Image Script Classes
1. Algemene stijlen
2. Typografie
3. Buttons
4. Navigatie
5. Container/Grid/Col wrappers/blok-content
6. Talen
7. Inloggen
	7.1 inloggen Popup (Modal)
8. Zoeken
	8.1 Zoekresultaten
9. Broodkruimelpad
10. Formulieren (CMS)
	10.1 Formulieren mededeling
11. Nieuws
	11.1 Nieuwsblok
	11.2 Nieuwslijstblok
	11.3 Filterblok
	11.4 Paginering
12. Footer
13. Carousel

// Extra componenten
14. Kleurblok
00. Nieuw component

// Media Queries

-------------------------------------------------------------------*/

/* ========================================
	0.  Medusa - Image Script Classes
   ========================================= */
/* Medusa - Image script */
.object-fit_contain {
	object-fit: contain;
	-o-object-fit: contain;
	font-family: 'object-fit: contain;' /* For use with IE/EDGE Polyfill */
}
.object-fit_cover {
	object-fit: cover;
	-o-object-fit: cover;
	font-family: 'object-fit: cover;' /* For use with IE/EDGE Polyfill */
}
.element-full-width {
	width: 100%;
}

/* ========================================
  1.  Algemene stijlen
   ========================================= */
/* Flexbox stijlen */
.flexContainer {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient:horizontal;
	-webkit-box-direction:normal;
	-ms-flex-direction:row;
	flex-direction:row;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.flexBeschikbareRuimte {
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
}
.flexVolleBreedte {
	-ms-flex-preferred-size: 100%;
	flex-basis: 100%;
}
.flexCentreer {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
}


.uppercase {
	text-transform: uppercase;
	letter-spacing: 1px;
}
.clearlist,
.clearlist li {
	list-style: none;
	padding: 0;
	margin: 0;
	background: none;
}
.no-padding {
	padding: 0;
}
body {
	display:flex;
	flex-direction:column;
	
    background-image: url(../images/content-rechts-achtergrond2.gif), url(../images/content-links-achtergrond2.gif);
    background-repeat: repeat-y, repeat-y;
    background-position: left 200px, right top; /* top */
	background-color: var(--kleurFe-5);
}
body > div.grid-wrapper.midden {
	flex-grow:1;
}
img {
	max-width: 100%;
	height: auto;
}
iframe {
	border: none;
}
a:focus {
	color: transparent;
	text-decoration: none;
}

/* Remove iPhone/Safari input element rounding */
input {
	border-radius: 0;
}
.klaro .cookie-modal .cm-modal .hide {
    top: 0 !important;
    right: 0 !important;
    width: 40px !important;
    height: 40px !important;
}

/* Print styles */
@media print {
	a:link:after, a:visited:after {
		content: "";}
}

/* ========================================
   2. Typografie // External stylesheet: fonts.css
   ========================================= */
html {
	font-size: 62.5%;
}
body {
	font-family: var(--font-tekst);
	color: var(--kleurFe-2);
	font-size: var(--fontSta);
	line-height: 1.5;
	font-style: normal;
	font-smooth: initial;
	-webkit-font-smoothing: antialiased;
}
a {
	color: var(--kleurFe-3);
}
a:hover, a:focus {
	color: var(--kleurFe-3);
	text-decoration: underline;
}
h1, h2, h3, h4, h5, h6 {
	font-weight: bold;
	line-height: 1.4;
	margin-bottom: 10px;
	word-break: break-word;
}
h1 {
	font-size: var(--fontGroH1);
	color:var(--kleurFe-3);
	margin-bottom:5px;
	font-family: var(--font-H1);
	font-weight: normal;
}
h2 {
	font-size: var(--fontGroH2);
	color:var(--kleurFe-3);
	font-family: var(--font-H2);
	font-weight: bold;
}
.nieuwsArticlesBlok h2 {
	font-size: var(--fontGroH2);
	color:var(--kleurFe-3);
	font-family: var(--font-slogan);
	text-transform:uppercase;
	font-weight:normal;
}
h3 {
  font-family: var(--font-H3);
	font-size: var(--fontMid);
  font-weight: var(--font-W-Mid);
	color:var(--kleurFe-2);
	margin-bottom:5px;
	margin-top:15px;
}

h5 {
	color: var(--kleurFe-3);
	font-family: var(--font-slogan);
	font-size: var(--fontGro);
	font-weight: normal;
	text-align: left;
	text-transform: uppercase;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: antialiased;
	font-smoothing: antialiased;
}
p {
	margin: inherit;
	font-family: var(--font-tekst);
	font-size: var(--fontSta);
	color:var(--kleurFe-2);
}

p.twee-kolommen{
	column-count: 2; 
	column-gap: 40px;
}
p.drie-kolommen{
	column-count: 3; 
	column-gap: 40px;
}
p.vier-kolommen{
	column-count: 4; 
	column-gap: 40px;
}
@media (min-width: 768px) and (max-width: 991px){
	p.vier-kolommen{
		column-count: 3; 
		column-gap: 40px;
	}
	p.drie-kolommen{
		column-count: 2; 
		column-gap: 40px;
	}
}
@media (min-width: 481px) and (max-width: 767px){
	p.vier-kolommen{
		column-count: 2; 
		column-gap: 40px;
	}
	p.drie-kolommen{
		column-count: 2; 
		column-gap: 40px;
	}
}
@media (max-width: 480px){
	p.vier-kolommen{
		column-count: 1; 
		column-gap: 40px;
	}
	p.drie-kolommen{
		column-count: 1; 
		column-gap: 40px;
	}
	p.twee-kolommen{
		column-count: 1; 
		column-gap: 40px;
	}
}
ul, ol {
	margin: 0 0 1.5em 0;
}
hr {
	border-color:rgba(0,0,0, .85);
	background: rgba(0,0,0, .85);
}
/* ========================================
   3. Buttons
   ========================================= */
button:focus {outline:0;}
button {
    -webkit-transition: all 200ms;
    -moz-transition: all 200ms;
    -ms-transition: all 200ms;
    -o-transition: all 200ms;
    transition: all 200ms;
    line-height: 1em;
    background-color: var(--kleurFe-3);
    color: var(--kleurFe-5);
    border-radius: 0px 0px 0px 0px;
    padding: 14px 32px 14px 32px;
    border: none;
}
button:hover {
    background-color: var(--kleurFe-2);
    color: var(--kleurFe-5);
    border-radius: 3px 3px 3px 3px;
}
button:disabled,
button[disabled]{
	cursor: not-allowed;
}
.knopCss:focus {outline:0;}
.knopCss {
    -webkit-transition: all 200ms;
    -moz-transition: all 200ms;
    -ms-transition: all 200ms;
    -o-transition: all 200ms;
    transition: all 200ms;
    line-height: 1em;
    background-color: var(--kleurFe-3);
    color: var(--kleurFe-5);
    border-radius: 0px 0px 0px 0px;
    padding: 14px 32px 14px 32px;
    border: none;
}
.tekst-wit{
	color:var(--kleurFe-5);
}
.flex-kolom {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.knopCss:hover {
    background-color: var(--kleurFe-2);
    color: var(--kleurFe-5);
}

.verzendknop:focus {outline:0;}
.verzendknop {
    -webkit-transition: all 200ms;
    -moz-transition: all 200ms;
    -ms-transition: all 200ms;
    -o-transition: all 200ms;
    transition: all 200ms;
    line-height: 1em;
    background-color: var(--kleurFe-3);
    color: var(--kleurFe-5);
    border-radius: 0px 0px 0px 0px;
    padding: 14px 32px 14px 32px;
    border: none;
}
.verzendknop:hover {
    background-color: var(--kleurFe-2);
    color: var(--kleurFe-5);
}
input[type="file"]{
  border: 1px solid transparent;
}
input[type="file"]::file-selector-button:focus {outline:0;}
input[type="file"]::file-selector-button {
  -webkit-transition: all 200ms;
  -moz-transition: all 200ms;
  -ms-transition: all 200ms;
  -o-transition: all 200ms;
  transition: all 200ms;
  color: var(--kleurFe-2);
  border-radius: 1px 1px 1px 1px;
  padding: 6px 28px 6px 28px;
   border: 0px solid var(--kleurFe-3);
  margin-right: 15px;
}
input[type="file"]::file-selector-button:hover {
    background-color: var(--kleurFe-2);
    color: var(--kleurFe-5);
    border-radius: 3px 3px 3px 3px;
    border: none;
}
/* ========================================
	4. Navigatie  // External stylesheet: inc_menu.css
   ========================================= */
.navbar-default {
	margin-bottom: 0px;
	background-color: transparent;
	border: 0;
}
/* ========================================
	5. Container/Grid/Col wrappers/ blok-content
   ========================================= */
.grid-wrapper {
	padding: 0;
}
/* grid wrappers */

.grid-wrapper.midden {
	/*background-color: var(--kleurFe-5)*/

}
.grid-wrapper.boven .wrap.bovenstuk {
	width: 100%;
	height: auto;
}
/* col wrappers */
.col_wrapper_onder {
	margin-bottom: 30px;
}
/* blok-content */

/* ========================================
	6. Talen // External stylesheet: languages.min.css
   ========================================= */
.blok-content p{
	margin-bottom:10px;
}

.talen .btn.btn-secondary{
	border-radius: var(--borderRadius);
	background-color: transparent;
	border:0;
	padding:0;
	margin:0;
	display:flex;
	padding:0;
	height:var(--topnavButtonHeight);
    align-items: center;
	transition: all 1s;
	box-shadow:none;

}
.talen:hover .btn.btn-secondary{
	color:var(--kleurFe-2);
	transition: all 1s;
}
.talen .btn.btn-secondary:active{
	box-shadow:none;
}
.btn>.lang-sm{
	display:inline-block;
	height:var(--topnavButtonHeight);
	top:0px !important;
}
.talen .btn>.lang-sm:after {
	padding-left: 6px;
}
.talen .dropdown-menu {
    z-index: 1001;
    min-width: 137px;
    padding-top: 5px;
    padding-bottom: 6px;
    padding-left: 0px;
	top:var(--topnavButtonHeight);
}
.talen .dropdown-menu li a {
	display:flex;
	height:var(--topnavButtonHeight);
    align-items: center;
	text-decoration:none;
	background-color:var(--kleurFe-5) !important;
}
.talen .dropdown-menu li a:hover,
.talen .dropdown-menu li a:focus {
	background-color:var(--kleurFe-5) !important;
}
.dropdown-item:focus, .dropdown-item:hover, .dropdown-item:active {
    color: #1e2125;
    background-color:var(--kleurFe-5) !important;
}
.talen ul.dropdown-menu span.lang-sm:after {
	padding-left: 6px;
	top:-6px;
}

.menuLogoContainer {
    background-image: url('../images/logo-veeg-01.gif');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 20px center;
    padding: 0 0 20px 0;
	margin-left:-15px;
}

.menuLogoContainer img {
    max-width: 300px;
    height: auto;
}
.wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.grid-wrapper.midden {
    flex-grow: 1;
}
/* ========================================
	7. Inloggen
   ========================================= */

.btnFormGroup a {
  padding-top: 15px;
  color: var(--kleurFe-2);
  text-decoration: none;
  font-family: var(--font-H3);
  font-size: var(--fontSta);
}

.btnFormGroup a:hover {
  color: var(--kleurFe-3);
}
#loginbox {
	margin-top:50px;
}


.modal-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
}
.modal-header {
  background: var(--kleurFe-3);
    border-radius: 10px 10px 0px 0px;
}
.modal-header h2 {
    font-size: var(--fontGroH3);
    color: var(--kleurFe-5);
	font-family: var(--font-H2);
	font-weight: normal;
	text-transform:uppercase;
}
.form-control{
  font-size:  var(--font-W-Sta);
}

.form-non-edit {
	border:1px solid transparent;
	border-radius:.25rem;
	display:block;
	padding:.375rem .75rem;
	line-height:1.5;
	min-height:3.35rem;
	color:#212529;
}
.form-select-lg {
	font-size:var(--font-W-Sta);
	padding-top:.375rem;
	padding-bottom:.375rem;
	padding-left: 0.75rem;
}

#loginform  .input-group {
	margin-bottom: 25px;
}

#recoverpasswordbox .input-group {
	margin-bottom: 25px;
}


.modal_inloggen .panel-info > .panel-heading {
	color: var(--kleurFe-2);
	background-color: var(--kleurFe-4);
	border-color: var(--kleurFe-6);
}

a.modal-link-txt {
	font-size: 1.3rem;
}

.form-group.no-bottom-margin {
	margin-bottom: 0px;
}

/* remove red outline validation IE */
input:required:invalid {
	outline: none;
}

/* Inlog tekst */
.inlognaam {
	float: right;
	padding-top: 5px;
}
.datum{
	color:var(--kleurFe-3);
}
/* ========================================
	8. Zoeken
   ========================================= */
.btn_zoeken {
	/*float:right;*/
}
.btn_zoeken .navbar-form {
	margin:0;
	padding:0;
}
.btn_zoeken .navbar-form input.zoeken,
.btn_zoeken .navbar-form input.zoeken::placeholder{
	margin-left: 0px;
	font-size: var(--fontSmal) !important;
	border:0;
}
.btn_zoeken .navbar-form input.zoeken{
	opacity:0.5;
	transition: all 1s;
	margin:0;
	box-sizing:border-box;
	height:var(--topnavButtonHeight);
}
.btn_zoeken:hover .navbar-form input.zoeken{
	opacity:1;
	transition: all 1s;
}
.btn_zoeken .navbar-form .input-group > .form-control {
	width: 100%;
}
.btn_zoeken .btn{
	/*padding:0;*/
	border-radius:var(--borderRadius);
	display:flex;
	height:var(--topnavButtonHeight);
    align-items: center;
	color: var(--kleurFe-5);
	transition: all 1s;
}
.btn_zoeken:hover .btn{
	color: var(--kleurFe-2);
	background-color:transparent;
}
/* zoekresultaten */
ul#zoekresultaten{
	list-style:none;
}
ul#zoekresultaten li{
	position:relative;
}
ul#zoekresultaten li:before{
	font-family: 'Font Awesome 5 Free';
    content: "\f152";
	position:absolute;
	left:-20px;
	top:4px;
	z-index:1;
	color: var(--kleurFe-3);
}
#zoekresultaten a {
	color:var(--kleurFe-2) !important;
	display:block;
	text-decoration:none;
}
#zoekresultaten a:hover {
	text-decoration:none;
}
#zoekresultaten a h3 {
	color: var(--kleurFe-2);
}
#zoekresultaten a:hover h3 {
	color: var(--kleurFe-3);
}
#zoekresultaten a .tekst {
	display:block;
	color: var(--kleurFe-2) !important;
	font-size: 1.6rem;
	padding-bottom:20px;
	margin-top:-10px;
}

/* ========================================
	9. Broodkruimelpad
   ========================================= */
ol.breadcrumb {
	margin-top: 20px;
	margin-bottom: 20px;
}



/* Formulieren mededeling */
.mmodal {
	position: fixed;
	top: 30%;
	right: 0;
	left: 0;
	margin-right: auto;
	margin-left: auto;
	min-height: 200px;
	width: 80%;
	z-index:999999;
	word-break: break-word;
	background-color: var(--kleurFe-3);
	border: 0;
	border-radius: 32px;
	padding: 20px;
	max-height: 75vh;
	overflow-y : auto;
}
.mmodal p{
	color: var(--kleurFe-5);
}
@media only screen and (min-width : 768px) {
	.mmodal {
		top: 30%;
		width: 50%;
		/*z-index: 10;*/
	}
}
.mmodal h1 {
	margin:10px auto;
	text-align:center;
	z-index: 2;
	 color:  var(--kleurFe-5);
}
.mmodal div {
	width:100%;
	text-align:center;
	display:block;
	margin:10px auto;
	font-size:1.8rem;
	color: var(--kleurFe-5);
	z-index: 2
}
.mmodal button,
.mmodal a {
	min-width: 160px;
	position: initial;
	margin: 20px auto;
	display: inline-block;
		z-index: 2;
    border: 0;
    border-radius: 15px;
    padding: 16px 100px;
    transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    will-change: transform;
	-webkit-appearance: button;
	margin-left:auto;
	margin-right:auto;
	background-color: var(--color-C);
	color: var(--kleurFe-2);
	text-decoration:none;
}
.mmodal button:hover,
.mmodal a:hover{
	background-color: var(--kleurFe-5);
	color: var(--kleurFe-2);
	text-decoration:none;
  box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
  transform: translateY(-2px);
}

.mmodal_overlay {
    content: "";
    height: 100%;
    width: 100%;
    background-color:rgba(255,255,255,0.7);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
}

@media all and (min-width: 992px) { /* correct */

	.dropdown-menu li {
		position: relative;
	}

	.dropdown-menu .submenu {
		display: none;
		position: absolute;
		/* left:100%; top:-7px; */
		border: 1px solid var(--kleurFe-4);
	}

	.dropdown-menu .submenu-left {
		right: 100%;
		left: auto;
	}


	.dropdown-menu>li:hover>.submenu {
		display: block;
	}

}

/* ============ desktop view .end// ============ */

/* ============ small devices ============ */
@media (max-width: 991px) { /* correct */
	.artwork .achtervlak .fullscreen{
		display:none;
	}
	.btn_zoeken .navbar-form .input-group{
		display:block;
		
	}
	.btn_zoeken .navbar-form .input-group > .form-control{
		width:calc(100% - 30px) !important;
		float:left;
	}
	.dropdown-menu .dropdown-menu {
		margin-left: 0.7rem;
		margin-right: 0.7rem;
		margin-bottom: .5rem;
	}

	.navbar-toggler:focus {
		text-decoration: none;
		outline: 0;
		box-shadow: none;
	}

	.btnHumMob {
		font-size: 24px;
		border: none;
		padding: 7px;
		border-radius: 5px;
		color:var(--kleurFe-2);
	}

	button.navbar-toggler {
		margin-right: 15px;
		width:38px;
		height:38px;
	}
	button.navbar-toggler .navbar-toggler-icon{
		width:38px;
		height:38px;
	}
	button.navbar-toggler:hover {
		background-color:transparent;
	}
	button.navbar-toggler:hover .btnHumMob{
		color:var(--kleurFe-3);
	}

	.toolTipInlog{
		display: none !important;
	}
	.mobBtn_inloggenAls{
		transition: all 1s;
		-webkit-transition: all 200ms;
		-moz-transition: all 200ms;
		-ms-transition: all 200ms;
		-o-transition: all 200ms;
    display: flex;
    justify-content: flex-end;
		margin-right: 12px;
		color: var(--kleurFe-1);
	}
	.menuItemContainer{
		position:relative;
		display:block !important;
		background-color:var(--color-C);
		border-radius:15px;
	}
	.menuItemContainer .navbar{
		position:relative;
		padding:0;
	}
	.menuItemContainer .navbar .navbar-nav{
		display:block;
	}
	.menuItemContainer .dropdown-menu {
		border-radius:10px;
	}
	.dropdown-menu{
		border:0 !important;
		padding:0 !important;
		overflow:hidden;
		margin-bottom:15px;
	}
}
@media (min-width: 530px) and (max-width: 991px) {

	.menuLogoContainer {
		width: 50% !important;
	}
	
}
/* ========================================
	Inloggen en Registreren
   ========================================= */

.inlog-registreer{
	margin-top:30px;
	margin-bottom:30px;
	padding:0;
}
.inlog-registreer .row .kader{
	border:solid 1px var(--kleurFe-3);
	border-radius:15px;
}
.inlog-registreer .row .title{
	/*border-bottom:solid 1px var(--kleurFe-3);    */
	background-color: var(--color-C);
	padding-bottom:6px;
	border-top-left-radius:15px;
	border-top-right-radius:15px;
}
.inlog-registreer .row .title p{
	padding: 0 15px;
}
.inlog-registreer .row > div h2{
	padding:10px 15px 10px 15px;
	background-color: var(--kleurFe-3);
	color:var(--kleurFe-5);
	border-top-left-radius:15px;
	border-top-right-radius:15px;
	font-family: var(--font-slogan);
	text-transform:uppercase;
	font-weight:normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: antialiased;
	font-smoothing: antialiased;
}
.inlog-registreer #login-content{
	margin-right:15px;
	background-color:#fff;
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
}
.inlog-registreer input{
	border:solid 1px var(--kleurFe-3) !important;
	border-radius:5px;
}
.inlog-registreer  .form-group{
	margin-bottom:15px;
}

.inlog-registreer  .btn{
	float:right;
	background-color:var(--kleurFe-2);
	color:var(--kleurFe-5);
	font-size:var(--fontSta);
	text-transform:uppercase;
	padding: 7px 20px;
	border-radius:20px;
}

/* ========================================
	10. Formulieren (CMS)
   ========================================= */

table.formulier {
	margin-bottom: 40px;
  width: 100%;
}

.formulier .cell_label,
.formulier .cell_field {
	font-size: 1.8rem;
	font-weight: normal;
	line-height: 2.3rem;
	padding-bottom: 15px;
	vertical-align: top;
}

.formulier .cell_label {
	padding-right: 29px;
	/* width: 40%; */
}

.formulier td.cell_field {
	/*min-width:500px;*/
	width:60%;
}
@media only screen and (max-width:767px) {
  .formulier .cell_label {
  	padding-right: 29px;
  	width: 85%;
  }
}
.formulier input[type="text"],
.formulier input[type="email"],
.formulier input[type="numeric"],
.formulier textarea,
.formulier select {
	height: 31px;
	line-height: 18px;
	padding: 0 10px 0 10px;
	transition: all 0.7s ease-in-out 0s;
	background-color: var(--kleurFe-5);
	border: solid 1px var(--kleurFe-4);
	color: var(--kleurFe-2);
	width: 100%;
	/* max-width: 320px; */
	display: inline-block;
	font-size: var(--fontSta);
	border-radius: 2px;
}
.formulier input[type=submit]{
	float:right;
}
.formulier .cell_field img {
	margin-left: 5px;
	margin-top: -5px;
}

#captchaImage {
	border: solid 1px #cccccc;
	margin-bottom: 10px;
	margin-left: 0;
	margin-top: 0;
}

.formulier select {
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
}

.formulier textarea {
	border-bottom-right-radius: 0px;
}

.formulier input[type="checkbox"],
.formulier input[type="radio"] {
	display: inline;
	/* margin-left: 10px; */
	margin-right: 10px;
}

.formulier textarea {
	height: 200px;
	overflow: auto;
	font-size: 1.8rem;
	padding: 5px 10px 5px 10px;
}

/* *'WISSEN' KNOP VERBERGEN*/
.formulier input[type="reset"] {
	display: none;
}

/* #'WISSEN' KNOP VERBERGEN*/

.formulier .cell_multi em {
	white-space: nowrap;
	margin-left: 30px;
}

.formulier .cell_field em {
	display: block;
	white-space: nowrap;
	padding-top: 0px;
	font-size: 1.6rem;
	/*padding-left: 10px;*/
}
.formulier input,
.formulier select{
  transition: all 150ms;
	border: 1px solid transparent;
	outline: 0 none;
  /* background-color: lightgray; */
}
.formulier input:hover,
.formulier input:focus,
.formulier textarea:hover,
.formulier textarea:focus,
.formulier select:hover,
.formulier select:focus {
	border: 1px solid var(--kleurFe-3);
	outline: 0 none;
  /* background-color: lightgray; */
}

.formulier input[type="file"] {
	box-shadow: none;
	width:100%;
}

form {
	/* background: var(--kleurFe-4); */
	padding: 15px;
	/* margin-bottom: 20px; */
	border-radius: 12px;
}
.formulier input:where([type="checkbox"], [type="radio"]){
  width              : 22px;
  height             : 22px;
  border             : 2px solid #ddd;
  border-radius      : 4px;
  padding-bottom: 15px;
}
ol.breadcrumb a {
	color: var(--kleurFe-3);
	padding: 5px;
	text-decoration: unset;
	-webkit-transition: all 600ms;
	-moz-transition: all 600ms;
	-ms-transition: all 600ms;
	-o-transition: all 600ms;
	transition: all 600ms;

}

ol.breadcrumb a::before {
	margin-right: 5px;
	font-weight: 800;
	font-family: 'Font Awesome 5 Free';
	content: "\f152";
}

ol.breadcrumb a:hover,
ol.breadcrumb a:hover::before {
	color: var(--kleurFe-2);
	text-decoration: none;
}

.floatdiv label {
    display: flex;
    margin-bottom: 10px;
    /* padding-left: 40px; */
    flex-direction: row;
    align-items: flex-start;
}
.floatdiv label input {
    margin-right: 6px;
    margin-top: 6px;
}
.floatdiv label a {
	display:contents;
}
.floatdiv div[data-cart="totals"]{
	margin-top:30px;
}
.toolTipInlog {
    position: absolute;
    display: flex;
    line-height: 16px;
    flex-flow: nowrap;
    white-space: nowrap;
    top: 32px;
    left: 0;
    z-index: 9000;
    align-content: flex-end;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-end;
	display: none;
}
.toolTipInlog .toolTipInlogTexst {
	background-color:var(--kleurFe-5);
	color: var(--kleurFe-1);
	text-align: center;
	border-radius: 8px;
	margin-left: -22px;
	padding: 8px;
	border: 1px solid var(--kleurFe-3);
	-webkit-box-shadow: 4px -1px 9px 1px rgba(86,86,86,0.6); 
	box-shadow: 4px -1px 9px 1px rgba(86,86,86,0.6);
	font-size:var(--fontSmal) !important;
	
}
.toolTipInlog .toolTipInlogTexst::after {
    content: "";
    position: absolute;
    bottom: 100%;
    margin-left: -67px;
    border-width: 8px;
    border-style: solid;
    border-color: transparent transparent var(--kleurFe-1) transparent;
}


 /* paginering inc_zoeken */
 #paginering {
     display: flex;
     justify-content: center;
     margin-bottom: 15px;
     margin-top: 30px;
 }
	#foutBericht {
	    /* padding: 6px;*/
	    border-radius: 6px;
	    color: #721c24;
	    background-color: #f8d7da;
	    /* border: 1px solid #edbfc4; */
	    display: flex;
	    justify-content: space-around;
	}

.btnFormGroup{
    display: flex;
    flex-direction: column;
    margin-left: 35px;
}
a#ww_vergeten,a#signinlink {
  color: var(--kleurFe-2);
  margin: 0px 10px 5px 0px;
}
a#ww_vergeten:hover,a#signinlink:hover {
  color: var(--kleurFe-3);
}
.modal-header h3{
  color: var(--kleurFe-5);
  font-weight: var(--font-W-Sta);
  margin-top: 0px;
}
input#reset-password, input#reset-password-repeat {
  margin-bottom: 25px;
}
.btnStyle {
    width: 200px;
    margin: 11px;
    font-size: 1.5rem;
}
	.form-control::placeholder {
	 font-size: var(--fontSta);
	}
	.modal-content {
	   position: relative;
	   display: flex;
	   flex-direction: column;
	   width: 100%;
	   pointer-events: auto;
	   background-color: var(--kleurFe-5);
	   background-clip: padding-box;
	   border: 1px solid rgba(0,0,0,.2);
	   border-radius: 1.3rem;
	}
	.btn-secondary:hover {
    background-color: var(--kleurFe-2);
}
.carousel-control-prev-icon, .carousel-control-next-icon {
transition: all 100ms;
}
.carousel-control-prev-icon:hover, .carousel-control-next-icon:hover {
    transform: scale(1.2);
    background-color: #37373769;
    border-radius: 50%;
    padding: 15px;
}

/*======---___Header___---======*/
.transitionAll{
  transition:all 0.5s ease;
  -webkit-transition:all 0.5s ease;
  -moz-transition:all 0.5s ease;
  -ms-transition:all 0.5s ease;
  -o-transition:all 0.5s ease;
}
.input-group {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
}
.bgDonker{
  background-color: var(--kleurFe-1);
}
.bgLicht{
  background-color: var(--kleurFe-2);
}

.btn_inloggen{
      width: 78px;
}
#btnMob{
  display: none;
}
.topNav {
    background-color: var(--kleurFe-2);
    width: 100%;
    height: 70px;
}

.menuItemContainer{
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: center;
}
.menuItemContainer li {
    margin: 0px 10px 0px 10px;
}
.menuItemContainer a{
  color: var(--kleurFe-1);
  font-size: var(--fontSta);
  text-decoration: none;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
.menuItemContainer a:hover{
  color: var(--kleurFe-3);
}
.menuItemContainer a:active{
  color: var(--kleurFe-2);
}

/* ------------block Links---------------- */
.blockRechts{
  width: 100%;
  height: 100%;
}
.blockRechts a, i{
  text-decoration: none;
  font-size: 1.4em;
}
.incBovenTest{
  width: 100%;
  /* height: fit_contain; */
  background-color: var(--kleurFe-2);
  margin-top: 25px;
  height: 477px;
}
a.dropdown-item {
    overflow-wrap: break-word !important;
    word-wrap: unset !important;

    font-size: 14px;
}

/* ======================================
	11. Nieuws
====================================== */
/* Nieuwsblok */
article.nieuwsblok .padding-bottom {
	margin-bottom: 20px;
}
article.nieuwsblok .tekst {
	padding: 16px 0 7px 0;
	color:inherit;
}
article.nieuwsblok p.datum {
	font-size: 0.8em;
}
/* Nieuwslijstblok */
article.nieuwslijstblok .padding-bottom {
	margin-bottom: 20px;
}
article.nieuwslijstblok .tekst {
	padding: 16px 0 7px 0;
	color:inherit;
}
article.nieuwslijstblok h3.nieuwstitel {
	margin: 10px 0px;
}
article.nieuwslijstblok p.datum {
	font-size: 0.8em;
}
article.nieuwslijstblok .tekst ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
article.nieuwslijstblok .tekst ul li {
	border-bottom: 1px solid #535353;
	margin-bottom: 10px;
}

article.nieuwslijstblok a.nieuwsoverzicht {
	display: block;
	text-align: center;
}
/* Filterblok */
.filterblok ul.filter-onderwerpen {
	padding-left: 0;
	list-style-type: none;
}
.filterblok ul.filter-onderwerpen li.active a {
	color: var(--kleurFe-3);
	text-decoration: underline;
}
/* Paginering */
nav.paginering {
	text-align:center;
}
/* ======================================
	12. Footer
====================================== */
footer {
	width: 100%;
	bottom: 0;
	margin-top: 0;
}
footer .footerblok {
margin-top: 11px;
}
footer .footerblok h3 {
	padding-bottom: 20px;
	border-bottom: 1px dotted #535353;
	font-family: var(--font-H2);
	font-weight: normal;
	text-transform:uppercase;
}
footer .footerblok .tekst p {
	color: inherit;
	font-size: inherit;
	line-height: inherit;
}
footer .footerblok .tekst a {
	color: inherit;
}
footer .footerblok nav ul {
	list-style-type: none;
	padding: 0;
}
footer .footerblok nav ul li a {
	font-size: 1.5rem;
	color: inherit;
}
footer .footerblok nav ul li a:hover {
	color: inherit;
}
/* ======================================
	13. Carousel
====================================== */
#myCarousel.carousel {
	height: 244px;
	z-index: 0;
}
/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%
	EXTRA COMPONENTEN
%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
/* ======================================
	14. Kleurblok
====================================== */
/* Achtergrond kleuren */
.bg-wit { background-color: white;}
.bg-black { background-color: black}

.bg-oranje { background-color: #f15c27;}
.bg-rood { background-color: #e51f2b;}
.bg-groen { background-color: #229437;}
.bg-blauw { background-color: #1aa8e5;}
.bg-paars { background-color: #662483;}
.bg-lila { background-color: #3a5aa0;}
.bg-grijs { background-color: #e0ded9;}

/* ======================================
    15. Poll
====================================== */
.col_wrapper_onder .stellingenContainer{
	margin-top:23px;
}
form#stelling{
	padding-bottom:15px;
}
.bullets-blok-stelling {
  background-image: url("../images/poll.svg");
	background-repeat:no-repeat;
	background-position:right top;
	background-size:100% auto;
	background-color:var(--kleurFe-3);
	padding-left:15px;
	padding-right:15px;
	/*padding-top:20px;*/
	padding-top:12px;
	padding-bottom:15px;
	margin-bottom:30px;
	position:relative;
	z-index:0 !important;
  border-radius: 15px;
}

.bullets-blok-stelling h2{
	color:var(--kleurFe-5);
}
.bullets-blok-stelling h3{
  font-family: var(--font-H3);
  font-size: var(--fontGroH3);
  font-weight: var(--font-W-Sta);
  color: var(--kleurFe-5);
  margin-bottom: 5px;
  margin-top: 15px;

}
.bullets-blok-stelling .vraag{
  font-weight: var(--font-W-Sta);
  color: var(--kleurFe-5);
  font-family: var(--font-tekst);
  font-size: var(--fontMid);
}
.bullets-blok-stelling ul{
	list-style: none;
	margin: 0;
	padding: 0;
	/*overflow: auto;*/
	margin-top:10px;
	margin-bottom:10px;
}
.bullets-blok-stelling ul li{
  color: var(--kleurFe-5);
  display: block;
  position: relative;
  width: 100%;
}
.bullets-blok-stelling ul li input[type=radio]{
	position: absolute;
	visibility: hidden;
	height: 20px;
	width: 20px;
	top: 6px;
	left: 1px;
	z-index: 1;
}
.bullets-blok-stelling ul li label{
	display: block;
	position: relative;
	font-weight: bold;
	font-size: 1.6rem;
	padding: 5px 10px 5px 30px;
	margin: 0px auto;
	min-height: 30px;
	z-index: 3;
	-webkit-transition: all 0.25s linear;
	transition: all 0.25s linear;
	cursor:pointer;
}
.bullets-blok-stelling ul li:hover label{
	color: var(--kleurFe-5);
}
.polltekst,
.polltekst p{
  font-weight: var(--font-W-Sta);
  color: var(--kleurFe-5);
  font-family: var(--font-tekst);
  font-size: var(--fontMid);
}
.polltekst a{
	color: var(--kleurFe-5) !important;
	text-decoration:underline;
}
.polltekst a:hover{
	color: var(--kleurFe-5)  !important;
	text-decoration:none;
}
.bullets-blok-stelling ul li .check{
	display: block;
	position: absolute;
	border: 4px solid var(--kleurFe-5);
	border-radius: 100%;
	height: 16px;
	width: 16px;
	top: 10px;
	left: 5px;
	z-index: 1;
	transition: border .25s linear;
	-webkit-transition: border .25s linear;
}
.bullets-blok-stelling ul li:hover .check {
  border: 4px solid var(--kleurFe-5) ;
  background-color:var(--kleurFe-5) ;
}
.bullets-blok-stelling ul li .check::before {
  display: block;
  position: absolute;
	content: '';
  border-radius: 100%;
  height: 15px;
  width: 15px;
  top: 5px;
	left: 5px;
  margin: auto;
	transition: background 0.25s linear;
	-webkit-transition: background 0.25s linear;
}

.bullets-blok-stelling input[type=radio]:checked ~ .check {
  border: 3px solid var(--kleurFe-5);
}

.bullets-blok-stelling input[type=radio]:checked ~ .check::before{
  background: #4ab3c9;
}

.bullets-blok-stelling input[type=radio]:checked ~ label{
  color: var(--kleurFe-5);
}
.bullets-blok-stelling .jqplot-target{
	float:none !important;
}
.bullets-blok-stelling .jqplot-data-label{
	font-size: 1.6rem;
	line-height:1.6rem !important;
}

.bar-main-container {
  margin: 5px auto 10px auto;
  width: 100%;
  height: 50px;
  font-family: sans-serif;
  font-weight: normal;
  font-size: 1.2em;
  color: var(--kleurFe-5);
}
.bar-percentage {
  float: left;
  background: rgba(0,0,0,0.13);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  padding: 4px 5px;
  width: 24%;
  height: 34px;
}
.bar-container {
  float: right;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  height: 10px;
  background: rgba(0,0,0,0.13);
  width: 70%;
  margin: 12px 0px;
  overflow: hidden;
}
.bar {
  float: left;
  background: var(--kleurFe-5);
  height: 100%;
  -webkit-border-radius: 10px 0px 0px 10px;
  -moz-border-radius: 10px 0px 0px 10px;
  border-radius: 10px 0px 0px 10px;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  -khtml-opacity: 1;
  opacity: 1;
}
.container-fluid.wrap.carouselwrap:before{
	content:'';
	position:absolute;
	left:0px;
	top:0;
	width:calc(100%);
	height:calc(100% + 1px);
	z-index:10;
	background-image: url('../images/shadow-top.png'),url('../images/shadow-bottom.png');
	background-position: center -1px, center bottom;
	background-repeat: repeat-x;
	pointer-events: none;
}
.item.carousel-item{
	border-left:15px solid #fff;
	border-right:15px solid #fff;
}
.carouselwrap{
	position:relative;
	background-color: var(--kleurFe-5);
}
section.blokken.blokItems.oranje_grijslicht{
	position:relative;
}
/*.carousel-inner .item:nth-child(even)::before,
section.blokken.blokItems.oranje_grijslicht::before{
	content:'';
	position:absolute;
	left:0px;
	top:0;
	width:calc(100% + 2px);
	height:calc(100% + 1px);
	z-index:10;
	background-image: url('../images/punt-links.svg'),url('../images/punt-rechts-onder.svg');
	background-position: center -1px, center bottom;
	background-repeat: no-repeat;
	background-size: auto;
	pointer-events: none;

}
.carousel-inner .item:nth-child(odd)::before{
	content:'';
	position:absolute;
	left:0;
	top:0;
	width:calc(100% + 1px);
	height:calc(100% + 1px);
	z-index:10;
	background-image: url('../images/punt-rechts.svg'),url('../images/punt-links-onder.svg');
	background-position: center -1px, center bottom;
	background-repeat: no-repeat;
	background-size: auto;
	pointer-events: none;
}*/
/* Carousel */
.carousel {
	height: 346px;
	position:relative;
	z-index:0;
}
.carousel {

	background-image: url('../images/punt-links.gif');
	background-position: left top;
	background-repeat: no-repeat;
	background-size: 100% auto;
}
/* ======================================
	00. Producten
====================================== */

.productenBlok{
	margin-bottom:60px;
}
.productenBlok a{
	text-decoration:none;
	display:flex;
}
.productenBlok a > div{
	text-decoration:none;
	border: solid 2px var(--kleurFe-3) !important;
    background-color: var(--kleurFe-5);
    transition: all 0.5s;
    border-radius: 10px;
}
.productenBlok a > div h2 {
    color: var(--kleurFe-3);
    font-family: var(--font-slogan);
    font-size: var(--fontGro);
    font-weight: normal;
    text-align: center;
    text-transform: uppercase;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: antialiased;
	font-smoothing: antialiased;
}

/* ======================================
	00. Composer
====================================== */

.artwork .row{
	margin-bottom:30px;
}
.artwork .info{
	padding-left:100px;
	padding-top:40px;
	position:relative;
	padding-right:30px;
}
.artwork .info.no-number{
	padding-left:10px !important;
	padding-top:10px !important;
	padding-bottom:30px;
}
.prodImage{
	height:400px;
	width:auto;
	margin-top:-30px;
}
.artwork .info .spetter{
	position:absolute;
	left:-10px;
	top:6px;
	width:100px;
	height:200px;
	z-index:1;
	background-repeat:no-repeat;
	background-position:right top;
	background-size:90px auto;
	font-weight:bold;
	font-size:30px;
	font-style:italic;
	text-align:right;
	padding-right:38px;
	padding-top:27px;
}
.artwork .no1 .info .spetter{
	background-image:url(../images/spletter-1.svg);
	color:var(--kleurFe-5);
}
.blok-rechts .spetter1 .spetter{
	background-image:url(../images/spletter-1.svg);
	color:var(--kleurFe-5);
    width: 80px;
    height: 100px;
    background-repeat: no-repeat;
    background-position: right top;
    background-size: 90px auto;
    text-align: right;
    padding-right: 38px;
    padding-top: 27px;
	display:inline-block;
    font-weight: bold;
    font-size: 30px;
    font-style: italic;
}
.blok-rechts {
	padding:15px;
	background-color:var(--kleur-no1);
	margin-bottom:30px;
	cursor:pointer;
	border-radius: 25px;

}
.blok-rechts .spetter1,
.blok-rechts .spetter2,
.blok-rechts .spetter3,
.blok-rechts .spetter4 {
	background-color:var(--kleurFe-5);
	border-radius:10px;
	margin:15px;
	-webkit-box-shadow: 4px -1px 9px 1px rgba(86,86,86,0.6); 
	box-shadow: 4px -1px 9px 1px rgba(86,86,86,0.6);
}
.blok-rechts .spetter1 h2{
	font-family: var(--font-1);
    font-weight: bold;
    text-transform: uppercase;
    font-size: 20px;
	color:var(--kleur-no1);
}
.blok-rechts .spetter2 h2{
	font-family: var(--font-1);
    font-weight: bold;
    text-transform: uppercase;
    font-size: 20px;
	color:var(--kleur-no2);
}
.blok-rechts .spetter3 h2{
	font-family: var(--font-1);
    font-weight: bold;
    text-transform: uppercase;
    font-size: 20px;
	color:var(--kleur-no3);
}
.blok-rechts .spetter4 h2{
	font-family: var(--font-1);
    font-weight: bold;
    text-transform: uppercase;
    font-size: 20px;
	color:var(--kleur-no4);
}
.artwork .no2 .info .spetter{
	background-image:url(../images/spletter-2.svg);
	color:var(--kleurFe-5);
}
.blok-rechts .spetter2 .spetter{
	background-image:url(../images/spletter-2.svg);
	color:var(--kleurFe-5);
    width: 80px;
    height: 90px;
    background-repeat: no-repeat;
    background-position: right top;
    background-size: 90px auto;
    text-align: right;
    padding-right: 38px;
    padding-top: 27px;
	display:inline-block;
    font-weight: bold;
    font-size: 30px;
    font-style: italic;
}
.artwork .no3 .info .spetter{
	background-image:url(../images/spletter-3.svg);
	color:var(--kleurFe-5);
}
.blok-rechts .spetter3 .spetter{
	background-image:url(../images/spletter-3.svg);
	color:var(--kleurFe-5);
    width: 80px;
    height: 90px;
    background-repeat: no-repeat;
    background-position: right top;
    background-size: 90px auto;
    text-align: right;
    padding-right: 38px;
    padding-top: 27px;
	display:inline-block;
    font-weight: bold;
    font-size: 30px;
    font-style: italic;
}
.artwork .no4 .info .spetter{
	background-image:url(../images/spletter-4.svg);
	color:var(--kleurFe-5);
}
.blok-rechts .spetter4 .spetter{
	background-image:url(../images/spletter-4.svg);
	color:var(--kleurFe-5);
    width: 80px;
    height: 90px;
    background-repeat: no-repeat;
    background-position: right top;
    background-size: 90px auto;
    text-align: right;
    padding-right: 38px;
    padding-top: 27px;
	display:inline-block;
    font-weight: bold;
    font-size: 30px;
    font-style: italic;
}
.artwork .no5 .info .spetter{
	background-image:url(../images/spletter-5.svg);
	color:var(--kleurFe-5);
}
.blok-rechts .spetter5 .spetter{
	background-image:url(../images/spletter-5.svg);
	color:var(--kleurFe-5);
    width: 80px;
    height: 90px;
    background-repeat: no-repeat;
    background-position: right top;
    background-size: 90px auto;
    text-align: right;
    padding-right: 38px;
    padding-top: 27px;
	display:inline-block;
    font-weight: bold;
    font-size: 30px;
    font-style: italic;
}
.artwork .no6 .info .spetter{
	background-image:url(../images/spletter-6.svg);
	color:var(--kleurFe-5);
}
.blok-rechts .spetter6 .spetter{
	background-image:url(../images/spletter-6.svg);
	color:var(--kleurFe-5);
    width: 80px;
    height: 90px;
    background-repeat: no-repeat;
    background-position: right top;
    background-size: 90px auto;
    text-align: right;
    padding-right: 38px;
    padding-top: 27px;
	display:inline-block;
    font-weight: bold;
    font-size: 30px;
    font-style: italic;
}
.artwork .info h2{
	color:#7fb347;
    font-family: var(--font-1);
    font-weight: bold;
    text-transform: uppercase;
	font-size: 20px;
}
.artwork .no2 .info h2,
.artwork .no2 .detail h3{
	color:#e4307f;
}
.artwork .no3 .info h2,
.artwork .no3 .detail h3{
	color:#bbca02;
}
.artwork .no4 .info h2,
.artwork .no4 .detail h3{
	color:#c02222;
}
.artwork .no5 .info h2,
.artwork .no5 .detail h3{
	color:var(--kleur-no5);
}
.artwork .no6 .info h2,
.artwork .no6 .detail h3{
	color:var(--kleur-no6);
}
.artwork .no1 .achtervlak,
.artwork .achtervlak.donkergroen{
	background-color:#7fb347;
}
.artwork .no2 .achtervlak,
.artwork .achtervlak.roze{
	background-color:#e4307f;
}
.artwork .no3 .achtervlak,
.artwork .achtervlak.lichtgroen{
	background-color:#f4d14f;
}
.artwork .no4 .achtervlak,
.artwork .achtervlak.rood{
	background-color:#c02222;
}
.artwork .no5 .achtervlak,
.artwork .achtervlak.oranje{
	background-color: var(--kleur-no5);
}
.artwork .no6 .achtervlak,
.artwork .achtervlak.geel{
	background-color:var(--kleur-no6);	
	padding-bottom:1px;	
}
.achtervlak.tabs{
	margin-bottom:40px;
}
.artwork .no5 .achtervlak h2{
	color:var(--kleurFe-5);
    font-family: var(--font-1);
    font-weight: bold;
    text-transform: uppercase;
    font-size: 20px;
	margin:-20px 0 10px 0;
}
.artwork .info button,
.artwork .info select,
.standaardKnop{
	display:inline-block;
	color:var(--kleurFe-5);
	background-color:#565656;
	font-size:16px;
	padding:5px 30px;
	border-radius:18px;
	margin-top:10px;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
	position:relative;
	text-decoration:none;
}
.artwork .info button:hover,
.artwork .info select:hover,
.standaardKnop:hover{
	color:var(--kleurFe-5);
	background-color:#000;
	text-decoration:none;
}
.standaardKnop{
	width:100%;
	max-width:400px;
}
.container-fluid.artwork.detail .standaardKnop{
	max-width:100%;
}
.artwork .info select:after{
	content:"\f0d7";
	position:absolute;
	right:20px;
	top:2px;
	width:40px;
	height:30px;
	background-color:var(--kleurFe-3); /* #565656; */
	border-left:solid 1px #fff;
	font-family: 'Font Awesome 5 Free';
	color:#fff;
	font-size:15px;
	z-index:2;
	border: solid 1px var(--kleurFe-3);
}

.artwork .info button:hover{
	color:var(--kleurFe-5);
	background-color:var(--kleurFe-1);
}
.artwork .info label {
	font-weight: bold;
	margin-top: 24px;
	margin-bottom: 10px;
	/* display: flex;
	flex-direction: column; */
  }

.artwork .achtervlak{
	border-radius:10px;
	padding:40px;
	position:relative;
}
.artwork .no1 .achtervlak{
	display:flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.artwork.detail .no1 .achtervlak{
	row-gap:15px;
	column-gap:30px;
	display:grid;
}
.artwork.detail .no1 .achtervlak .image-placeholder {
	 grid-area: image-placeholder;
	 width: 100%;
	 max-width:100%;
	 margin-right:0;
	 margin-bottom: 0;
}
.artwork.detail .no1 .achtervlak .kwaliteit {
	 grid-area: kwaliteit;
	 margin: 0 auto;
}
.artwork.detail .no1 .achtervlak .kwaliteit-monitor {
	 grid-area: kwaliteit-monitor;
	 margin: 0 auto -23px auto;
	 font-weight:bold;
	 color:var(--kleurFe-5);
}
.artwork.detail .no1 .achtervlak .kwaliteit-monitor p{
	 color:var(--kleurFe-5);
}
.artwork.detail .no1 .achtervlak .image-buttons {
	 grid-area: image-buttons;
}
.artwork.detail .no1 .achtervlak .image-comment,
.achtervlak .image-comment {
	 grid-area: image-comment;
	 background-color:var(--kleurFe-5);
	 border-radius:10px;
	 padding:10px;
	 line-height:auto;
}
.artwork .image-buttons,
.artwork .image-comment{
	text-align: center;
}
.artwork.detail .no6{
	margin-top:30px;
	margin-bottom:30px;
}
.artwork.detail .no6{
	margin-top:30px;
	margin-bottom:30px;
}
.artwork .no3 .achtervlak.tabs{
	margin-top:15px;
	margin-bottom:30px;
}
.artwork .achtervlak .fullscreen{
	position:absolute;
	right:10px;
	top:10px;
	z-index:1;
	color: var(--kleurFe-5);
	transform: scale(1);
	/*-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;*/
	transition: all 0.3s;
}
.artwork .achtervlak .fullscreen:hover{
	transform: scale(1.3) rotate(180deg);
}
.artwork .achtervlak .image-placeholder,
.artwork .row.composer .image-placeholder{
	display:inline-block;
	border-radius:10px;
	-webkit-box-shadow: 4px -1px 9px 1px rgba(86,86,86,0.7); 
	box-shadow: 4px -1px 9px 1px rgba(86,86,86,0.7);
	background-color: var(--kleurFe-5);
	padding:20px;
	width:auto;
	/*margin-right:30px;*/
}
.artwork .achtervlak .my-pond{
	display:flex;
	border-radius:10px;
	-webkit-box-shadow: 4px -1px 9px 1px rgba(86,86,86,0.7); 
	box-shadow: 4px -1px 9px 1px rgba(86,86,86,0.7);
	background-color: var(--kleurFe-5);
	padding:20px;
	width:auto;
	margin-right:30px;
	width:340px;
	height:490px;
}
.artwork .achtervlak .my-pond .filepond--drop-label{
	display:flex;
	height:100%;
	vertical-align:middle;
    font-family: var(--font-tekst);
    font-size: var(--fontSta);
    color: var(--kleurFe-2);
}
.artwork .achtervlak .my-pond .filepond--drop-label .filepond--label-action{
    display: block;
    color: var(--kleurFe-5);
    background-color: #565656;
    font-size: 16px;
    padding: 5px 30px;
    border-radius: 18px;
    margin-top: 10px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    position: relative;
	text-decoration:none;
	margin-bottom:15px;
}
/*.filepond--image-preview{
    background: #fff !important;
}
.filepond--item{
	height: 470px !important;
}
.filepond--file-info-main{
	font-size: 11px !important;
}
.filepond--file-info-sub{
	font-size: 11px !important;
	opacity: 1 !important;
}
.filepond--file-action-button.filepond--file-action-button {
    font-size: 15px !important;
	left: auto !important;
    right: 10px !important;
    background-color: red !important;
}
.filepond--file-info {
    margin-left: -15px !important;
}*/
.artwork .row.composer .image-placeholder{
	margin-right:0px;
}
.artwork .achtervlak .image-placeholder img,
.artwork .row.composer .image-placeholder img{
	max-width:500px;
	max-height:500px;
}
.artwork .achtervlak .kwaliteit{
	position:relative;
	--kwaliteit-percentage: 70;
}
.artwork .achtervlak .kwaliteit .thermometer {
  display:block;
  border-radius:17px;
  border:6px solid white;
  box-sizing:border-box;
}
.artwork .achtervlak .kwaliteit .pointer{
	position:absolute;
	z-index:1;
	color:var(--kleurFe-5); 
	font-size:20px;
	transition: left 400ms, top 400ms;
	background-image:none;
	text-shadow:none !important;
}
.artwork .achtervlak .kwaliteit .pointer .fas{
	visibility:hidden;
}
.artwork .achtervlak .kwaliteit .pointer:before{
	content:'';
	position:absolute;
	left:14px !important;
	top:-3px !important;
	width:28px;
	height:28px;
	border:6px solid #565656 !important;
	/*border-top: 10px solid transparent;
	border-bottom: 10px solid transparent; 
	border-left:15px solid #7fb347;*/
	z-index:2;
	border-radius:1px;
}
.artwork .achtervlak.oranje .kwaliteit .pointer:before{
	content:'';
	position:absolute;
	left:4px;
	top:3px;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent; 
	border-left:15px solid #f6901c;
	z-index:2;
}
.artwork .achtervlak .swiper-button-prev{
	color:var(--kleurFe-5); 
	text-shadow: -2px -2px 6px #565656;
	font-size:20px;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent; 
	height:auto;
	top:calc(50% + 7px);
}
.artwork .achtervlak .swipermain,
.artwork .achtervlak .swiperthumbs{
	position:relative;
}
.artwork .achtervlak .swiper-slide{
	cursor:pointer;
}
.artwork .achtervlak .swipermain .swiper-button-prev,
.artwork .achtervlak .swiper-button-prev.prev6thumb{
    left: -20px;
}
.artwork .achtervlak .swipermain .swiper-button-next,
.artwork .achtervlak .swiper-button-next.next6thumb{
    right: -20px;
}
.artwork .achtervlak .flex-prev{
	color:var(--kleurFe-5); 
	text-shadow: 2px -2px 6px #565656;
	font-size:20px;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent; 	
	top: calc(50% + 10px);
}
.artwork .achtervlak .swiper-button-next{
	color:var(--kleurFe-5); 
	text-shadow: 2px 2px 6px #565656;
	font-size:20px;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent; 
	height:auto;
}
.artwork .achtervlak .flex-next{
	color:var(--kleurFe-5); 
	text-shadow: -2px 2px 6px #565656;
	font-size:20px;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent; 	 	
	top: calc(50% - 10px);
}
.artwork .achtervlak .swiper-button-next.swiper-button-disabled, 
.artwork .achtervlak .swiper-button-prev.swiper-button-disabled {
    opacity: .0;
    cursor: auto;
    pointer-events: none;
}
.artwork .achtervlak .swiper-horizontal>.swiper-scrollbar, 
.artwork .achtervlak .swiper-scrollbar.swiper-scrollbar-horizontal {
    bottom: 20px;
    left: 20px;
    width: calc(100% - 40px);
}
.artwork .achtervlak .scroll-overzicht a,
#artModal #modalBody a{
	padding:10px !important;	
	text-decoration:none;
	/*float:left;*/
	/*width:33%;*/
    display: flex;
    height: auto;
	justify-content: center;
}
.mijn-fotos .foto-overzicht .foto-item-placeholder{
	padding:10px !important;	
	text-decoration:none;
	/*float:left;*/
	/*width:33%;*/
    display: flex;
    height: auto;
	justify-content: space-around;
}
.artwork .achtervlak .swipermain .scroll-overzicht a{
	padding:10px !important;	
	text-decoration:none;
	/*float:left;*/
	/*width:33%;*/
    display: block;
    height: auto;
}
#artModal #modalBody a{
	/*float:left;*/
	min-width:275px;
	width:25%;
	position:relative;
    min-height: 391px;
    /*height: 391px;*/
	display:flex;
	/*height:auto;*/
	overflow:hidden;
}
.mijn-fotos .foto-overzicht .foto-item-placeholder{
	/*float:left;*/
	min-width:275px;
	width:25%;
	position:relative;
    /*min-height: 391px;*/
	display:flex;
	/*height:auto;*/
	overflow:hidden;
}
.artwork .achtervlak .scroll-overzicht a .scroll-item{
	border-radius:10px;
	-webkit-box-shadow: 4px -1px 9px 1px rgba(86,86,86,0.6); 
	box-shadow: 4px -1px 9px 1px rgba(86,86,86,0.6);
	background-color: var(--kleurFe-5);
	text-align:center;
	padding:10px;	
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.artwork .achtervlak .scroll-overzicht a .scroll-item .image,
.modal.schilderij a .scroll-item .image {
	position:relative;
}
.artwork .achtervlak .scroll-overzicht a .scroll-item .overlay-image,
.modal.schilderij a .scroll-item .overlay-image{
	position:absolute;
	width:100%;
	height:100%;
	top:0px;
	z-index:1;
	display:flex;
	align-items: center;
	background-color:rgba(255,255,255,1);
	opacity:0;
	-moz-transition: all 400ms;
	-ms-transition: all 400ms;
	-o-transition: all 400ms;
	transition: all 400ms;
	
}
.artwork .achtervlak .scroll-overzicht a:hover .scroll-item .overlay-image,
.modal.schilderij a:hover .scroll-item .overlay-image{
	display:flex;
	-moz-transition: all 400ms;
	-ms-transition: all 400ms;
	-o-transition: all 400ms;
	transition: all 400ms;
	opacity:1;
}
#artModal #modalBody a .scroll-item{
	border-radius:10px;
	-webkit-box-shadow: 4px -1px 9px 1px rgba(86,86,86,0.6); 
	box-shadow: 4px -1px 9px 1px rgba(86,86,86,0.6);
	background-color: var(--kleurFe-5);
	text-align:center;
	padding:10px;	
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.mijn-fotos .foto-overzicht .foto-item-placeholder .foto-item{
	border-radius:10px;
	-webkit-box-shadow: 4px -1px 9px 1px rgba(86,86,86,0.6); 
	box-shadow: 4px -1px 9px 1px rgba(86,86,86,0.6);
	background-color: var(--kleurFe-5);
	text-align:center;
	padding:10px;	
    height: auto;
    display: flex;
    flex-direction: column;
	justify-content: space-between;
}
.mijn-fotos .foto-overzicht .foto-item-placeholder .foto-item .buttons ul{
	list-style:none;
	margin:0;
	display:flex;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
	margin-block-start:0 !important;
	padding:0;
}
.mijn-fotos .foto-overzicht .foto-item-placeholder .foto-item .buttons ul .btn{
	background-color:transparent;
	transform: scale(1);
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
	color:var(var(--kleurFe-2));
}
.mijn-fotos .foto-overzicht .foto-item-placeholder .foto-item .buttons ul .btn:hover{
	background-color:transparent;
	transform: scale(1.2);
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
	color:var(--kleurFe-3);
}

.mijn-fotos .foto-overzicht .foto-item-placeholder .foto-item .buttons ul .fas{
	font-size:var(--fontMid) !important;
}
.mijn-fotos .foto-overzicht .foto-overzicht-placeholder{
	display: flex;
	flex-wrap: wrap;
	color:var(--kleurFe-5);
}
.artwork .achtervlak .scroll-overzicht a .detail,
#artModal #modalBody a .detail{
	padding-bottom:20px;
}
.artwork .no3 .achtervlak .scroll-overzicht a .detail,
#artModal.schilderij #modalBody .detail{
	padding-bottom:15px;
	padding-top:5px;
}
.artwork .achtervlak .scroll-overzicht a .detail h3,
#artModal #modalBody a .detail h3{
	text-align:center;
    font-family: var(--font-1);
    font-weight: bold;
    text-transform: uppercase;
	font-size:var(--fontSta);
}
.scroll-overzicht a .detail .schilder,
#artModal #modalBody a .scroll-item .detail .schilder{
	font-weight:bold;
	color:#e4307f;
	padding-top:3px;
	margin-bottom:-4px !important;
}
.artwork .achtervlak .scroll-overzicht a .detail p,
#artModal #modalBody a .detail p{
	font-size:var(--fontSta);
	margin:0;
	display:block;
	text-align:center;
}
.artwork .achtervlak .scroll-overzicht a .scroll-item,
#artModal #modalBody a .scroll-item{
	/*opacity:0.5;*/
	transition: all 0.3s;
}
.artwork .row.no6 .achtervlak .scroll-overzicht a .scroll-item{
    opacity: 1;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    background-color: transparent;
    text-align: center;
    padding: 0px;
}
.artwork .row.no6 .achtervlak .scroll-overzicht a .scroll-item img{
    display: inline-block;
    border-radius: 10px;
    -webkit-box-shadow: 4px -1px 9px 1px rgba(86,86,86,0.7);
    box-shadow: 4px -1px 9px 1px rgba(86,86,86,0.7);
    background-color: var(--kleurFe-5);
    padding: 20px;
    width: calc(100% - 20px);
}
.artwork .row.no6 .achtervlak .swiper6thumb{
    border-radius: 10px;
    -webkit-box-shadow: 4px -1px 9px 1px rgba(86,86,86,0.7);
    box-shadow: 4px -1px 9px 1px rgba(86,86,86,0.7);
    background-color: var(--kleurFe-5);
    margin: 20px 23px 30px 23px;
	border:solid 15px var(--kleurFe-5);
}
.artwork .row.no6 .achtervlak .swiper6thumb img{

}
.artwork .achtervlak .scroll-overzicht a.active .scroll-item,
#artModal #modalBody a.active .scroll-item{
	opacity:1;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.artwork .achtervlak .scroll-overzicht a:hover .scroll-item,
#artModal #modalBody a:hover .scroll-item{
	opacity:1;
}
.artwork .achtervlak .flex-direction-nav a {
	content:'';
	overflow:visible;
}
.artwork .achtervlak .flexslider:hover .flex-direction-nav .flex-prev {
	opacity: 1;
	left: -52px;
}
.artwork .achtervlak .flexslider:hover .flex-direction-nav .flex-next {
	opacity: 1;
	right: -10px;
}

.flexslider:hover .flex-direction-nav .flex-next {
  opacity: 1;
  right: 10px;
}
.artwork .achtervlak .swiper-button-next,
.artwork .achtervlak .swiper-button-prev,
.artwork .achtervlak .flex-next,
.artwork .achtervlak .flex-prev{
	color:var(--kleurFe-5); 
	/*-webkit-box-shadow: 4px -1px 9px 1px rgba(86,86,86,0.6); 
	box-shadow: 4px -1px 9px 1px rgba(86,86,86,0.6);*/
	font-size:20px;
}
.artwork .achtervlak .swiper-button-next:after, 
.artwork .achtervlak .swiper-button-prev:after,
.artwork .achtervlak .flex-next:after,
.artwork .achtervlak .flex-prev:after{
	content: "\f04b";
	position:absolute;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
	color: var(--kleurFe-5);
    font-size: 28px;
	z-index:1;
	height:20px;
}
.artwork .achtervlak .swiper-button-prev:before{
	content:'';
	position:absolute;
	left:5px;
	top:-7px;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent; 
	z-index:3;
}
.artwork .achtervlak .flex-control-nav {
    width: 100%;
    position: absolute;
    bottom: -45px;
    text-align: center;
    left: 0;
}
.artwork .achtervlak .flex-direction-nav .flex-prev {
  left: 0px;
}
.artwork .achtervlak .flex-direction-nav .flex-next {
  right: 0px;
}
.artwork .achtervlak .flex-prev:before{									
	content:'';
	position:absolute;
	left:5px;
	top:10px;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent; 
	z-index:3;
}
.artwork .achtervlak .swiper-button-next:before{
	content:'';
	position:absolute;
	left:5px;
	top:-7px;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent; 
	z-index:2;
}
.artwork .achtervlak .flex-next:before{
	content:'';
	position:absolute;
	left:44px;
	top:10px;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent; 
	z-index:2;
}
.artwork .no2 .achtervlak .swiper-button-prev:before{
	border-left:15px solid #e4307f;	
}
.artwork .no2 .achtervlak .swiper-button-next:before{
	border-left:15px solid #e4307f;	
}
.artwork .no3 .achtervlak .swiper-button-prev:before{
	border-left:15px solid #bbca02;	
}
.artwork .no3 .achtervlak .swiper-button-next:before{
	border-left:15px solid #bbca02;	
}
.artwork .no4 .achtervlak .swiper-button-prev:before{
	border-left:15px solid #c02222;	
}
.artwork .no4 .achtervlak .swiper-button-next:before{
	border-left:15px solid #c02222;	
}
.artwork .no5 .achtervlak .swiper-button-prev:before{
	border-left:15px solid #f6901c;	
}
.artwork .no5 .achtervlak .swiper-button-next:before{
	border-left:15px solid #f6901c;	
}
.artwork .no6 .achtervlak .swiper-button-prev:before,
.artwork .achtervlak .flex-prev:before{
	border-left:15px solid #f2c633;	
}
.artwork .no6 .achtervlak .swiper-button-next:before,
.artwork .achtervlak .flex-next:before{
	border-left:15px solid #f2c633;	
}
.artwork .no2 .achtervlak .swiper-button-prev,
.artwork .no3 .achtervlak .swiper-button-prev,
.artwork .no4 .achtervlak .swiper-button-prev,
.artwork .no5 .achtervlak .swiper-button-prev,
.artwork .no6 .achtervlak .swiper-button-prev,
.artwork .no6 .achtervlak .flex-prev{
	transform: rotate(180deg);
}
.artwork .achtervlak .mixedSlider .MS-controls button{
	top:calc(50% - 50px);
}
.artwork .achtervlak .MS-controls .pointer.left{
	left:15px;
	top:0;
	text-shadow: -2px -2px 6px #565656;
}
.artwork .achtervlak .MS-controls .pointer.right{
	right:15px;
	top:6px;
	text-shadow: 2px 2px 6px #565656;
}
.artwork .achtervlak .scroll-overzicht a.active .scroll-item:before, 
#artModal #modalBody a.active .scroll-item:before {
	font-family: 'Font Awesome 5 Free';
    font-weight: 900;
	content:"\f04b";
	width:20px;
	height:20px;
	position:absolute;
	z-index:1;
	color:var(--kleurFe-5);
	font-size:20px;
	text-shadow: 2px 2px 6px #565656;
	left:calc(50% - 15px);
	bottom:2px;
	font-size: 30px;
	transform: rotate(-90deg);
}
.artwork .achtervlak .scroll-overzicht a.active .scroll-item:after, 
#artModal #modalBody a.active .scroll-item:after{
	content:'';
	width:20px;
	height:20px;
	position:absolute;
	left:calc(50% - 3px);
	bottom:6px;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 10px solid transparent; 
	z-index:2;
}
.artwork .achtervlak .swipermain .scroll-overzicht a.active .scroll-item:before, 
.artwork .achtervlak .swipermain .scroll-overzicht a.active .scroll-item:after{
	display:none;
}
.artwork .row.no2 .achtervlak .scroll-overzicht a.active .scroll-item:after, 
#artModal.Kunstenaar #modalBody a.active .scroll-item:after,
#artModal.kunstenaar #modalBody a.active .scroll-item:after{
    border-bottom: 15px solid #e4307f;
}
.artwork .row.no3 .achtervlak .scroll-overzicht a.active .scroll-item:after, 
#artModal.Schilderij #modalBody a.active .scroll-item:after, 
#artModal.schilderij #modalBody a.active .scroll-item:after{
    /*border-bottom: 15px solid #bbca02;*/
    border-bottom: 15px solid #e4307f;
}
.artwork .row.no4 .achtervlak .scroll-overzicht a.active .scroll-item:after, 
#artModal.Materiaal #modalBody a.active .scroll-item:after, 
#artModal.materiaal #modalBody a.active .scroll-item:after{
    border-bottom: 15px solid #c02222;
}
.artwork .row.no5 .achtervlak .scroll-overzicht a.active .scroll-item:after, 
#artModal.Materiaal #modalBody a.active .scroll-item:after, 
#artModal.materiaal #modalBody a.active .scroll-item:after{
    border-bottom: 15px solid #f6901c;
}
.artwork .achtervlak .MS-controls .pointer.top{
	right:15px;
	top:6px;
	text-shadow: 2px 2px 6px #565656;
}
.artwork .info #make-image,
.artwork .info .groteknop{
	font-size:20px;
	background-color:var(--kleur-no1);
	border-radius:20px;
	width:100%;
}
.artwork .transp .info #make-image,
.artwork .transp .info .groteknop{
	/* margin-top:0 !important; */
}
.save-container{
	padding-bottom:40px;
}
a.groteknop{
	font-size:20px;
	background-color:var(--kleurFe-3);
	border-radius:20px;
	color:var(--kleurFe-5);
	text-decoration:none;
	padding-left: 20px;
	padding-right: 30px;
	margin-top:15px;
}
.artwork .info #bestelknop{
	background-color:var(--kleurFe-3);
}
.artwork .info #bestelknop:hover,
a.groteknop:hover{
	background-color:var(--kleurFe-2);
	color:var(--kleurFe-5);
	text-decoration:none;
}
#bestelknop2{
	margin-top:10px !important;
}
.artwork .info .usp{
	list-style:none;
	msrgin-top:5px;
}
.artwork .info .usp li{
	position:relative;
	margin-left:10px;
}
.artwork .info .usp li:before{
	content: "\f00c";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	line-height: 1;
	position:absolute;
	left:-25px;
	top:4px;
	z-index:1;
	color:var(--kleurFe-3);
}
.artwork .info .prijs{
	padding:10px 0;
	margin-top:10px;
}
.artwork .info .prijs #prijs{
	font-size:30px;
	font-weight:bold;
	color:var(--kleurFe-3);
}
.artwork .info .prijs .verzendtekst{
	font-style:italic;
}
.artwork .info #make-image.processing{
	opacity:0.3;
	cursor: wait;
}
.artwork .processing .ellipsis{
	display:inline-block;
	width:20px;
	font-size:20px;
	text-align:left;
	line-height: 20px;
}
.processing .ellipsis:after {
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
  -webkit-animation: ellipsis steps(4, end) 900ms infinite;
  animation: ellipsis steps(4, end) 900ms infinite;
  content: "\2026";
  /* ascii code for the ellipsis character */
  width: 0px;
}

@keyframes ellipsis {
  to {
    width: 19px;
  }
}

@-webkit-keyframes ellipsis {
  to {
    width: 19px;
  }
}
.artwork .info #make-image .fas,
.artwork .info .groteknop .fas{
	font-size:20px;
}
.artwork .row .transp{
	background-color:rgba(255,255,255,0.9);
}
.artwork .row .comp{
	display: flex;
    align-items: center;
    justify-content: center;
	padding:40px;
	background-color:rgba(255,255,255,0.6);
}
.option-veld{
	display:inline-block;
	border-radius:10px;
	-webkit-box-shadow: 4px -1px 9px 1px rgba(86,86,86,0.7); 
	box-shadow: 4px -1px 9px 1px rgba(86,86,86,0.7);
	background-color: var(--kleurFe-5);
	padding:0 15px;
	width:auto;
	margin-top:30px;
	margin-bottom:-15px;
}
.option-veld .omschrijving{
	padding-bottom:15px;
}
.option-veld img{
	max-width:50%;
	float:right;
	margin-left:15px;
}
/*.artwork .achtervlak .scroll-overzicht a{
	float:left;
	border-radius:10px;
	-webkit-box-shadow: 4px -1px 9px 1px rgba(86,86,86,0.6); 
	box-shadow: 4px -1px 9px 1px rgba(86,86,86,0.6);
	background-color: var(--kleurFe-5);
	padding:10px;	
	text-decoration:none;
	width:33%;
}*/

/*the container must be positioned relative:*/
.custom-select {
  position: relative;
  font-family: Arial;
}

.custom-select select {
  display: none !important; /*hide original SELECT element:*/
}

.select-selected {
  background-color: var(--kleur-no1);
}

/*style the arrow inside the select element:*/
.select-selected:after {
  position: absolute;
  content: "";
  top: 18px;
  right: 12px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: #fff transparent transparent transparent;
}

/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {
  border-color: transparent transparent #fff transparent;
  top: 11px;
}
.select-selected.select-arrow-active{
		border-top-left-radius: 21px;
		border-top-right-radius: 21px;
		border-bottom-left-radius: 0px;
		border-bottom-right-radius: 0px;
	  
}

/*style the items (options), including the selected item:*/
.select-items div,.select-selected {
  color: #ffffff;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
  user-select: none;
}
.select-items,.select-selected {
  border-top-left-radius:21px;
  border-top-right-radius:21px;
  border-bottom-left-radius:21px;
  border-bottom-right-radius:21px;
	
}
/*style items (options):*/
.select-items {
  position: absolute;
  background-color: #565656;
  background-color: var(--kleur-no1);
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
  border-top-left-radius:21px;
  border-top-right-radius:21px;
  border-bottom-left-radius:21px;
  border-bottom-right-radius:21px;

	/*max-height: 60vh;*/
	max-height: 300px;
	overflow-y: scroll;
}

/* ===== Scrollbar CSS ===== */
  /* Firefox */
.select-items {
    scrollbar-width: auto;
    scrollbar-color: #ffffff #ffffff;
  }

  /* Chrome, Edge, and Safari */
  .select-items::-webkit-scrollbar {
    width: 15px;
  }

  .select-items::-webkit-scrollbar-track {
    background: transparent;
  }

  .select-items::-webkit-scrollbar-thumb {
    background-color: #ffffff;
   border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    border: 10px solid transparent;
	left:-5px;
  }
.select-items {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
border:solid 2px var(--kleur-no1);
}

/*hide the items when the select box is closed:*/
.select-hide {
  display: none;
}

.select-items div:hover, .same-as-selected {
  background-color: rgba(0, 0, 0, 0.1);
}
.select-items > div:first-child{
  border-top-left-radius:0px;
  border-top-right-radius:0px;	
}
.select-items > div:last-child{
  /* border-bottom-left-radius:21px;
  border-bottom-right-radius:21px; */
}
.select-items > div > span{
  float:right;
}
.row.composer{
    background-position: center top;
    background-attachment: fixed;
    background-size: contain;
	display:flex;
	padding:0px;
	justify-content: center;
}
.row.no4.composer{
	border-radius:10px;
}
#artModal{
	background-color: rgba(255,255,255,0.6);
}
#artModal .modal-content{
	border:0;
    -webkit-box-shadow: 4px -1px 9px 1px rgba(86,86,86,0.6);
    box-shadow: 4px -1px 9px 1px rgba(86,86,86,0.6);
}
#artModal .btn-close:focus{
	box-shadow:none;
}
#artModal #modalLabel{
	text-align:center;
	color: #e4307f;
    display: block;
    text-align: center;
    width: 100%;
	font-family:var(--font-slogan);
	font-weight: normal;
	text-transform: uppercase;
	/*color: var(--kleurFe-2);*/
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: antialiased;
	font-smoothing: antialiased;
}
#artModal #modalBody{
    display: flex;
    flex-wrap: wrap;
}
#artModal .modal-header{
	background: var(--kleurFe-5);
	border-bottom:0;
}
#artModal .btn-close:hover {
    background-color: var(--kleurFe-5);
}
#artModal.kunstenaar #modalBody{
	background-color:#e4307f;
}
#artModal.kunstenaar #modalBody .detail h3,
#artModal.kunstenaar #modalLabel{
	color:#e4307f;
}
#artModal.schilderij #modalBody{
	/*background-color:#bbca02;*/
	background-color:#e4307f;
}
#artModal.schilderij #modalBody .detail h3,
#artModal.schilderij #modalLabel{
	/*color:#bbca02;*/
	color:#e4307f;
}
#artModal.materiaal #modalBody{
	background-color:#f6901c;
}
#artModal.materiaal #modalBody .detail h3,
#artModal.materiaal #modalLabel{
	color:#f6901c;
}
.row.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.artwork .achtervlak .flexslider {
    border-radius: 10px;
    -webkit-box-shadow: 4px -1px 9px 1px rgba(86,86,86,0.7);
    box-shadow: 4px -1px 9px 1px rgba(86,86,86,0.7);
    background-color: var(--kleurFe-5);
    padding: 15px;
}
.artwork .achtervlak .nav-tabs {
    border-bottom: 0;
}
.artwork .achtervlak .nav-tabs .nav-link {
    margin-bottom: -1px;
	padding:10px 30px;
	background-color: transparent;
    border: 0;
	color:var(--kleurFe-2);
	font-weight:bold;
	text-decoration:none;
}
.artwork .achtervlak .nav-tabs .nav-link:hover {
	color:var(--kleurFe-3);
}
.artwork .achtervlak .nav-tabs .nav-item.show .nav-link,
.artwork .achtervlak .nav-tabs .nav-link.active {
    color: var(--kleurFe-3);
    background-color: var(--kleurFe-5);
	padding:10px 30px;
	border-top-left-radius:10px;
	border-top-right-radius:10px;
	border:0;
	font-weight:bold;
	text-decoration:none;
    -webkit-box-shadow: 2px -4px 3px 1px rgb(86 86 86 / 40%);
    box-shadow: 2px -4px 3px 1px rgb(86 86 86 / 40%);
	bottom: -1px;
	position:relative;
}

.artwork .no5 .achtervlak .nav-tabs .nav-link:hover {
	color:var(--kleurFe-5);
}
.artwork .no5 .achtervlak .nav-tabs .nav-item.show .nav-link,
.artwork .no5 .achtervlak .nav-tabs .nav-link.active {
	color: var(--kleur-no5);
}

.artwork .achtervlak .tab-pane {
	background-color: var(--kleurFe-5);
	padding:30px;
	border-bottom-left-radius:15px;
	border-bottom-right-radius:15px;
	border-top-right-radius:15px;
	border-top-left-radius:15px;
	-webkit-box-shadow: 4px -1px 9px 1px rgb(86 86 86 / 70%);
    box-shadow: 4px -1px 9px 1px rgb(86 86 86 / 70%);
	margin-bottom:50px;
}
.artwork .achtervlak .tab-pane .container{
	padding:0 !important;
}
.artwork .achtervlak .tab-pane:first-child {
	border-top-left-radius:0px;
}

.artwork .achtervlak .fade:not(.show) {
	display:none !important;
   opacity: 0;
   -webkit-transition: opacity 0s linear;
      -moz-transition: opacity 0s linear;
       -ms-transition: opacity 0s linear;
        -o-transition: opacity 0s linear;
           transition: opacity 0s linear;
 }
.artwork .achtervlak .tab-pane .price-table{
	list-style:none;
	margin-left:0;
	max-width: 400px;
}
.artwork .achtervlak .tab-pane .price-table li{
	border-top:solid 1px var(--kleurFe-3);
	padding:5px 10px;
	display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.artwork .achtervlak .tab-pane .price-table li:first-child{
	border-top:0;
	padding:5px 10px;
	font-weight:bold;
}
.artwork .achtervlak .tab-pane .price-table li > div{
	
}
.artwork .achtervlak .tab-pane h5{
	font-family: var(--font-tekst);
	font-size: var(--fontSta);
	margin-bottom:5px;
	margin-top:30px;
	font-weight:bold;
	color:var(--kleurFe-2);
}
.artwork .achtervlak .tab-pane h4{
	color: var(--kleurFe-3);
	text-transform:uppercase;
	font-family: var(--font-H3);
	font-size: var(--fontSta);
	font-weight: bold;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: antialiased;
	font-smoothing: antialiased;
	
}
.artwork .no5 .achtervlak .tab-pane h4{
	color: var(--kleur-no5);
	margin-bottom:0;
}
.artwork .achtervlak .flexslider.carousel{
    padding: 10px !important;
	height:auto;
}
.artwork .info .speclink{
	padding:30px 0 0 0;
}
.artwork .achtervlak .image-type {
	margin: 15px;
	cursor: pointer;
	text-transform: uppercase;
	width:calc(25% - 30px) !important;
	box-sizing:border-box;
	text-align:center;
	float:left;
	-webkit-transition: all 200ms;
	-moz-transition: all 200ms;
	-ms-transition: all 200ms;
	-o-transition: all 200ms;
	transition: all 200ms;
}
.artwork .achtervlak .image-type .icon {
	display:block;
	text-align:center;
	margin-bottom:6px;
	font-size:30px;
}
.artwork .achtervlak .image-type:hover .icon {
	-webkit-transition: all 200ms;
	-moz-transition: all 200ms;
	-ms-transition: all 200ms;
	-o-transition: all 200ms;
	transition: all 200ms;
	font-size:30px;
	color: #bbca02;
}
.artwork .achtervlak .image-type.active {
	color: white !important;
	background-color: #565656 !important;
}
.artwork .achtervlak .image-type.active:hover .icon	{
	-webkit-transition: all 200ms;
	-moz-transition: all 200ms;
	-ms-transition: all 200ms;
	-o-transition: all 200ms;
	transition: all 200ms;
	font-size:30px;
	color: #fff;
}
@media (min-width:992px) {
	/*.artwork.detail .no1 .achtervlak {
		grid-template:
		  "image-placeholder	kwaliteit"
		  "image-buttons		."
		  "image-comment		.";
		grid-template-columns: calc(100% - 80px) min-content; /* 100% - 80px padding left right */
	/*}
	.artwork .achtervlak .kwaliteit .thermometer {
		width:32px;
		height:300px;
		background:
		  linear-gradient(90deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0) 65%, rgba(0,0,0,0.4) 100%),
		  linear-gradient(0deg, rgba(114,21,25,1) 0%, rgba(114,21,25,1) 4%, rgba(226,52,61,1) 6%, rgba(227,63,72,1) 20%, rgba(240,115,69,1) 22%, rgba(240,115,69,1) 35%, rgba(244,220,96,1) 37%, rgba(244,220,96,1) 50%, rgba(221,227,124,1) 52%, rgba(221,227,124,1) 65%, rgba(188,219,150,1) 67%, rgba(188,219,150,1) 80%, rgba(156,213,162,1) 82%, rgba(156,213,162,1) 94%, rgba(195,231,199,1) 96%, rgba(195,231,199,1) 100%);
	}
	.artwork .achtervlak .kwaliteit .pointer {
		left:calc(100% - 10px);
		transform: rotate(180deg);
		text-shadow: 2px 2px 6px #565656;
		top: calc(((100 - var(--kwaliteit-percentage)) * ((100% - 22px) / 100)) - 6px);
	}*/
	
	
	.artwork.detail .no1 .achtervlak {
		grid-template:
		  "image-placeholder"
		  "kwaliteit-monitor"
		  "kwaliteit"
		  "image-buttons"
		  "image-comment";
		grid-template-columns: minmax(auto, 100%);
	}
	.artwork.detail .no1 .achtervlak .kwaliteit {
		margin-bottom:20px;
	}
	/*.artwork .achtervlak .kwaliteit .thermometer {
		width:300px;
		height:32px;
		background:
		  linear-gradient(0deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0) 65%, rgba(0,0,0,0.4) 100%),
		  linear-gradient(90deg, rgba(114,21,25,1) 0%, rgba(114,21,25,1) 4%, rgba(226,52,61,1) 6%, rgba(227,63,72,1) 20%, rgba(240,115,69,1) 22%, rgba(240,115,69,1) 35%, rgba(244,220,96,1) 37%, rgba(244,220,96,1) 50%, rgba(221,227,124,1) 52%, rgba(221,227,124,1) 65%, rgba(188,219,150,1) 67%, rgba(188,219,150,1) 80%, rgba(156,213,162,1) 82%, rgba(156,213,162,1) 94%, rgba(195,231,199,1) 96%, rgba(195,231,199,1) 100%);
		margin-left: calc((100% - 300px) / 2);
	}
	.artwork .achtervlak .kwaliteit .pointer {
		left: calc((var(--kwaliteit-percentage) * ((100% - 18px) / 100)));
		transform: rotate(-90deg);
		text-shadow: -2px 2px 6px #565656;
		top: calc(100% - 16px);
	}*/
	.artwork .achtervlak .kwaliteit .thermometer {
		width:300px;
		height:32px;
		background:
		  /*linear-gradient(0deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0) 65%, rgba(0,0,0,0.4) 100%),
		  linear-gradient(90deg, rgba(114,21,25,1) 0%, rgba(114,21,25,1) 4%, rgba(226,52,61,1) 6%, rgba(227,63,72,1) 20%, rgba(240,115,69,1) 22%, rgba(240,115,69,1) 35%, rgba(244,220,96,1) 37%, rgba(244,220,96,1) 50%, rgba(221,227,124,1) 52%, rgba(221,227,124,1) 65%, rgba(188,219,150,1) 67%, rgba(188,219,150,1) 80%, rgba(156,213,162,1) 82%, rgba(156,213,162,1) 94%, rgba(195,231,199,1) 96%, rgba(195,231,199,1) 100%);*/
		  
		  linear-gradient(90deg, rgba(226,52,61,1) 0%, rgba(226,52,61,1) 17%, rgba(240,115,69,1) 17%, rgba(240,115,69,1) 33%, rgba(244,220,96,1) 33%, rgba(244,220,96,1) 50%, rgba(221,227,124,1) 50%, rgba(221,227,124,1) 66%, rgba(188,219,150,1) 66%, rgba(188,219,150,1) 83%, rgba(156,213,162,1) 83%, rgba(156,213,162,1) 100%);
		/*margin-left: calc((100% - 300px) / 2);*/
		margin-left:-11px;
		border-radius:3px;
	}
	.artwork .achtervlak .kwaliteit .pointer {
		left: calc((var(--kwaliteit-percentage) * ((100% - 26px) / 100)));
		transform: rotate(-90deg);
		text-shadow: -2px 2px 6px #565656;
		top: calc(100% - 16px);
	}
}

@media (max-width:1399px) {
	.totaal .artwork .no3 .achtervlak .image-type {
		width: calc(50% - 30px) !important;
		margin-left:15px !important;
		margin-right:15px !important;
	}
}
@media (max-width:991px) {
	.totaal .artwork .no3 .achtervlak.enkel {
		padding: 15px !important;
		margin-top:-30px;
	}
	.artwork.detail .no1 .achtervlak {
		grid-template:
		  "image-placeholder"
		  "kwaliteit-monitor"
		  "kwaliteit"
		  "image-buttons"
		  "image-comment";
		grid-template-columns: minmax(auto, 100%);
	}
	.artwork.detail .no1 .achtervlak .kwaliteit {
		margin-bottom:20px;
	}
	.artwork .achtervlak .kwaliteit .thermometer {
		width:300px;
		height:32px;
		background:
		  /*linear-gradient(0deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0) 65%, rgba(0,0,0,0.4) 100%),
		  linear-gradient(90deg, rgba(114,21,25,1) 0%, rgba(114,21,25,1) 4%, rgba(226,52,61,1) 6%, rgba(227,63,72,1) 20%, rgba(240,115,69,1) 22%, rgba(240,115,69,1) 35%, rgba(244,220,96,1) 37%, rgba(244,220,96,1) 50%, rgba(221,227,124,1) 52%, rgba(221,227,124,1) 65%, rgba(188,219,150,1) 67%, rgba(188,219,150,1) 80%, rgba(156,213,162,1) 82%, rgba(156,213,162,1) 94%, rgba(195,231,199,1) 96%, rgba(195,231,199,1) 100%);*/
		  
		  linear-gradient(90deg, rgba(226,52,61,1) 0%, rgba(226,52,61,1) 17%, rgba(240,115,69,1) 17%, rgba(240,115,69,1) 33%, rgba(244,220,96,1) 33%, rgba(244,220,96,1) 50%, rgba(221,227,124,1) 50%, rgba(221,227,124,1) 66%, rgba(188,219,150,1) 66%, rgba(188,219,150,1) 83%, rgba(156,213,162,1) 83%, rgba(156,213,162,1) 100%);
		/*margin-left: calc((100% - 300px) / 2);*/
		margin-left:-11px;
		border-radius:3px;
	}
	.artwork .achtervlak .kwaliteit .pointer {
		left: calc((var(--kwaliteit-percentage) * ((100% - 26px) / 100)));
		transform: rotate(-90deg);
		text-shadow: -2px 2px 6px #565656;
		top: calc(100% - 16px);
	}
	.artwork .no1 .achtervlak {
		display: flex;
		flex-direction: column;
	}
	.artwork > .row > .col:nth-child(2){
		margin-top:40px;
	}
	.artwork > .row > .col.comp{
		margin-top:0px;
	}
	.artwork > .row > .col.transp{
		padding-bottom:20px;
	}
	.row.no1,
	.totaal .row.no3,
	.row.no4{
		flex-direction: column;
	}
	.row.no1 .image-placeholder{
		max-width:calc(100% - 60px);
		margin-right: 0px;
		margin-bottom: 30px;
	}
	.row.no1 .image-placeholder img{
		max-width:100%;
		height:auto;
	}
	.artwork .row.composer .image-placeholder{
		max-width:90%;
		margin-right:0;
	}
	.artwork .row.composer .image-placeholder img{
		max-width:100%;
		height:auto;
	}
	#artModal .modal-body {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.artwork .achtervlak .nav-tabs {
		flex-direction: column;
		margin-bottom:30px;
	}
	.artwork .achtervlak .nav-tabs .nav-item {
		display:block;
	}
	.artwork .achtervlak .nav-tabs .nav-link {
		margin-bottom: 0px;
		display:block;
		padding: 5px 30px;
		background-color: transparent;
		border: 0;
		color: var(--kleurFe-2);
		font-weight: bold;
		text-decoration: none;
	}
	.artwork .achtervlak .nav-tabs .nav-link:after {
		content:"\f054";
		font-size:16px;
		line-height:22px;
		font-family:"Font Awesome 5 Free";
		font-weight:600;
		float:right;
	}
	.artwork .achtervlak .nav-tabs .nav-item.show .nav-link, 
	.artwork .achtervlak .nav-tabs .nav-link.active {
		color: var(--kleurFe-3);
		background-color: var(--kleurFe-5);
		padding: 5px 30px;
		border-radius: 10px;
		border: 0;
		font-weight: bold;
		text-decoration: none;
		-webkit-box-shadow: none;
		box-shadow: none;
		-webkit-box-shadow: 4px -1px 9px 1px rgb(86 86 86 / 70%);
		box-shadow: 4px -1px 9px 1px rgb(86 86 86 / 70%);
	}
	.artwork .achtervlak .tab-pane:first-child {
		border-top-left-radius: 15px;
	}
	ul.price-table{
		padding-left:0;
	}
	.container-fluid.artwork.detail .achtervlak.oranje{
		padding:10px;
	}
	.container-fluid.artwork.detail .achtervlak.tabs{
		padding:2px 0px;
	}
	.container-fluid.artwork.detail .achtervlak .tab-pane{
		margin-bottom:15px;
	}
}
@media (min-width:992px) and (max-width:1399px) {
	.artwork > .row > .col.col-lg-4{
		width:430px;
	}
	.artwork > .row > .col.col-lg-8{
		width:calc(100% - 430px);
	}
	#artModal .modal-body {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
}


/* ======================================
	00. FAQ
====================================== */


.faq .faqHeader{
	margin-top:45px;
	margin-bottom:30px;
}
.faq h5{
	margin-top:30px;
	margin-bottom:-10px;
}
.faq .panel-group{
	/*width:85%;*/
	margin-bottom:10%;
}
.faq .panel-default>.panel-heading{
	background-color:var(--kleurFe-5);
	border-color:var(--kleurFe-3);
	color:var(--kleurFe-2);
}
*:focus{
	outline:none!important;
}
.faq .panel-heading{
	border-top-left-radius:4px;
	border-top-right-radius:4px;
	padding:0;
}
.faq .panel-title{
	border:1px solid var(--kleurFe-3);
	margin-top:10px;
	border-top-left-radius:4px;
	border-top-right-radius:4px;
}
.faq .panel-heading .panel-title a:hover{
	text-decoration:none;
}
.faq .panel-heading a:before{
	float:right;
	color:var(--color-B);
	font-size:16px;
	line-height:22px;
	font-family:"Font Awesome 5 Free";
	font-weight:600;
	content:"\f054";
	height:26px;
	width:26px;
	border-radius:50%;
	display:flex;
	justify-content:center;
	align-items:center;
}

.faq .panel-body{
	border:1px solid var(--kleurFe-3);
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px;
	padding:15px;
	background-color:rgba(255,255,255,0.8);
}
.faq .panel-body ul{
	margin-left:20px;
	padding:0 15px;
}
.faq .panel-group a{
	color:var(--zwart);
}
.faq .panel-group p{
	font-size:15px;
	margin:10px;
}
*::-moz-focus-inner{
	border:0!important;
}
.faq .panel-heading .panel-title a{
	display:block;
	padding:13px 13px;
	text-decoration:none;
}
.faq .panel-heading [aria-expanded="true"] {
	-webkit-transition: all 600ms;
	-moz-transition: all 600ms;
	-ms-transition: all 600ms;
	-o-transition: all 600ms;
	transition: all 600ms;
	background-color: var(--kleurFe-3);
	border-color: var(--kleurFe-3);
	color: #fff;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 0px;
	border: 0px solid var(--kleurFe-2);
}
.faq .panel-heading a:before {
    float: right;
    color: var(--kleurFe-2);
    font-size: 16px;
    line-height: 22px;
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    content: "\f054";
    /* background-color: var(--oranje); */
    height: 26px;
    width: 26px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.faq .panel-heading [aria-expanded="true"]:after {
	float: right;
	color: var(--kleurFe-2);
	font-size: 16px;
	line-height: 22px;
	font-family:"Font Awesome 5 Free";
	font-weight: 600;
	content: "\f054";
	background-color: var(--color-C);
	height: 26px;
	width: 26px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: -22px;
	margin-top: -1px;
	transform: rotate(90deg);
}


/* ======================================
	00. Cart
====================================== */

.floatConstraint {
    flex-grow: 1;
    /*margin-bottom: 33px;*/
}
.WWinfoColumn .usp-titel {
    /*font-weight: bold;*/
	font-family: var(--font-H2);
	font-weight: normal;
	text-transform:uppercase;
    color: var(--kleurFe-3);
	font-size:var(--fontMid);
}
ul.usp {
    list-style: outside none none;
    margin-left: 15px;
    padding-left: 0;
    font-size: 17px;
}
ul.usp li {
    position: relative;
    padding-top: 0px;
    padding-bottom: 15px;
    /*padding-left: 25px;*/
    font-size: 14px;
    /*color: var(--kleurFe-3);
    font-weight: 700;*/
}
ul.usp li i {
    font-size: 13px;
    color: var(--kleurFe-3);
    position: absolute;
    left: 2px;
    top: 4px;
    z-index: 1;
}
.winkelwagen{
	padding-top:0;
	padding-bottom:60px;
}
.floatConstraint .floatdiv {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    width: auto;
}
.winkelwagen .floatConstraint .floatdiv .regel-totaal {
    padding-right: 0px;
}
.floatConstraint .floatdiv .content {
    background-color: var(--color-C);
	padding:20px;
	border-radius:10px;
}
.floatConstraint .betaalmethodes{
	padding:10px;
	background-color:#fff;
	text-align:center;
}
.floatConstraint .floatdiv .asterix{
	font-style:italic;
	font-size:var(--fontSmal);
}
.floatConstraint .betaalmethodes img{
	max-height:100px;
}
.floatConstraint .regels-sub-totaal{
	margin-bottom:30px;
}
.floatConstraint .regels-sub-totaal div{
	font-weight:normal !important;
}
.floatConstraint .regels-sub-totaal div.bold{
	font-weight:bold !important;
	border-top:solid 1px var(--kleurFe-3);
	border-bottom:solid 1px var(--kleurFe-3);
}
.floatConstraint .regels-sub-totaal .delivery{
	padding-top:10px;
	text-align:center;
	font-style: italic;
}
.bestelling-overzicht-totaal .delivery{
	padding-top:10px;
	text-align:center;
	font-style: italic;
	padding-bottom:50px;
}
.bestelling-overzicht-totaal .delivery .delivery-placeholder{
	padding:5px 0;
	background-color:var(--color-C);	
	/*color:var(--kleurFe-5);*/
}
.winkelwagen .btn{
    display: block;
    color: var(--kleurFe-5);
    background-color: #565656;
    font-size: 16px;
    padding: 5px 30px;
    border-radius: 18px;
    margin-top: 10px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    position: relative;
	text-decoration:none;
}

.winkelwagen .btn#checkout{
	width:100%;
}
.winkelwagen .btn:hover {
    color: var(--kleurFe-5);
    background-color: var(--kleurFe-1);
}
.winkelwagen .input-group-prepend{
	float:left;
}
.winkelwagen .input-group-prepend .btn{
	border-radius:0;
    font-size: 12px;
    padding: 0;
	height:33.5px;
	width:33.5px;
	text-align:center;
	line-height:33px;
	margin-top:0;
}
.winkelwagen .input-group-prepend .btn:hover,
.winkelwagen .input-group-prepend .btn:focus{
	border:0;
	outline:0;
	box-shadow: none;
}
.winkelwagen .input-group-prepend .btn .fa{
    font-size: 12px;
}
.winkelwagen .bestelregel .aantal{
    display: flex;
    flex-direction: row;
    align-content: flex-start;
    align-items: flex-start;
}
.winkelwagen .bestelregel input[type="number"] {
    width:calc(100% - 70px);
	padding:0;
	padding-left:0;
	line-height:31.5px;
	border-radius:0;
	text-align:center;
	max-width:60px;
	-webkit-appearance: none;
	-moz-appearance: textfield;
}
.winkelwagen .bestelregel input[type="number"]::-webkit-outer-spin-button,
.winkelwagen .bestelregel input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.winkelwagen .heading{
	background-color:var(--color-C);
	font-weight:bold;
}
.winkelwagen .bold{
	font-weight:bold;
}
.winkelwagen .heading > div,
.winkelwagen .bestelregel,
.winkelwagen .regels-sub-totaal .row > div{
	padding-top:10px;
	padding-bottom:10px;
	position:relative;
}
.winkelwagen .bestelregel.geel{
	background-color: var(--kleurFe-3);
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px;
}
.winkelwagen .heading > div:first-child,
.winkelwagen .bestelregel > div:first-child{
	padding-left:10px;
}
.winkelwagen .flexrow.productinfo{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	flex-direction: row;
}
.winkelwagen .flexrow.actiecode {
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    align-items: center;
    flex-direction: column;
}
.winkelwagen .flexrow.actiecode .tekst {
	color:var(--kleurFe-5);
	font-weight:bold;
}
.winkelwagen .bestelregel img{
	margin-right:10px;
}
.winkelwagen .bestelregel{
	border-top:1px solid var(--kleurFe-3);
}
.winkelwagen .container .bestelregel:nth-child(2){
	border-top:0;
}
.winkelwagen .regel-totaal{
	padding-right:50px;
}
.winkelwagen .button {
    position: absolute;
    right: 0px;
    top: 10px;
    z-index: 1;
    display: inline-block;
    width: 50px;
	text-align:center;
	padding:0;
	cursor:pointer;
}
.winkelwagen .button .fas {
	font-size:16px;
}
.winkelwagen .regels-sub-totaal{
	margin-top:-15px;
}

@media only screen and (max-width : 767px) {
	body {
		background-image: none !important;
	}
	.winkelwagen .row.heading,
	.winkelwagen-overzicht .panel-body .heading{
		display:none;
	}
	.winkelwagen .bestelregel > div,
	.winkelwagen-overzicht .panel-body .bestelregel > div{
		width:100%;
		padding-left: 130px;
		position:relative;
		padding-top:15px;
	}
	.winkelwagen-overzicht .panel-body .bestelregel.geel > div{
		padding-left: 0px;
		padding-right: 0px;
		padding-top:0px;
	}
	.winkelwagen .bestelregel > div:before {
		content: attr(data-title);
		position: absolute;
		top: 15px;
		left: 15px;
		width: 160px;
		padding-right: 15px;
		white-space: nowrap;
		text-align: left;
		font-weight: bold;
		text-transform: uppercase;
	}
	.winkelwagen .button {
		position: absolute !important;
		right: 10px;
		top: 15px;
		z-index: 1;
		display: inline-block;
		width: 50px !important;
		height: 50px !important;
		text-align:center;
		padding:0;
		border:1px solid #ced4da;
		padding:0 !important;
		margin:0 !important;
		line-height:48px;
		border-radius:10px;
	}
	/*.winkelwagen .bestelregel > div.text-end.regel-totaal{
		text-align:left;
	}*/
	.winkelwagen .bestelregel > div{
		padding-right:15px;
	}
	.winkelwagen .bestelregel > div:first-child{
		padding-right:70px;
	}
	.winkelwagen .bestelregel > div.bold{
		text-align:right;
	}
	.winkelwagen .bestelregel input[type="number"]{
		max-width:60px;
		padding-left:0;
		-webkit-appearance: none;
		-moz-appearance: textfield;
	}
	.winkelwagen .regel-totaal {
		padding-right: 10px;
	}
	.winkelwagen  .bestelregel > div img {
		margin-bottom:10px;
	}
	.winkelwagen .regels-sub-totaal div{
		text-transform: uppercase;
	}
	.winkelwagen .button .fas {
		font-size:22px;
	}
	.winkelwagen-overzicht .panel-footer {
		flex-direction: column !important;
	}
	.WWinfoColumn {
		padding-top: 15px !important;
	}
	.floatConstraint .floatdiv .content {
		display: flex;
		flex-direction: column;
		padding-top: 40px;
		padding-bottom: 40px;
	}
	.winkelwagen .bestelregel .aantal {
		justify-content: flex-end !important;
	}
	.winkelwagen-overzicht .panel-footer label {
		align-items: flex-start;
	}
	.winkelwagen-overzicht .panel-footer input[type="checkbox"] {
		margin-top: 5px;
	}
	/*.winkelwagen-overzicht .panel-footer label a{
		display:contents;
		text-decoration:underline;
	}*/
	.artwork .achtervlak.enkel,
	.artwork .row .comp	{
		padding: 20px 0 !important;
	}
	.artwork .achtervlak.enkel .image-placeholder {
		max-width: calc(100% - 30px);
		margin-right: 0px;
		margin-bottom: 0px;
	}
}




/* =========== nieuw ===================== */
.flexrow{
   display:flex;
   flex-wrap:wrap;
   justify-content:space-between;
}

.winkelwagen-overzicht  .panel-default>.panel-heading {
    background-color: #fff;
    border-color: var(--kleurFe-3);
    color: var(--kleurFe-3);
	text-transform:uppercase;
	font-weight:bold;
}
.winkelwagen-overzicht .panel-title {
    border: 1px solid var(--kleurFe-3);
    margin-top: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.winkelwagen-overzicht .panel-heading .panel-title a {
    display: block;
    padding: 13px 13px;
    text-decoration: none;
}
.winkelwagen-overzicht .panel-heading [aria-expanded="true"] {
    -webkit-transition: all 600ms;
    -moz-transition: all 600ms;
    -ms-transition: all 600ms;
    -o-transition: all 600ms;
    transition: all 600ms;
    background-color: var(--kleurFe-3);
    border-color: var(--kleurFe-3);
    color: #fff;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border: 0px solid var(--kleurFe-3);
}
.winkelwagen-overzicht .panel-heading a:before {
    float: right;
    color: var(--kleurFe-2);
    font-size: 16px;
    line-height: 22px;
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    content: "\f054";
    height: 26px;
    width: 26px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.winkelwagen-overzicht .panel-heading [aria-expanded="true"]:after {
    float: right;
    color: var(--kleurFe-2);
    font-size: 16px;
    line-height: 22px;
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    content: "\f054";
    background-color: var(--color-C);
    height: 26px;
    width: 26px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: -22px;
    margin-top: -1px;
    transform: rotate(90deg);
}
.winkelwagen-overzicht .panel-group {
    background-image: url("images/stippel.png"); /* ../ */
    background-position: left top;
    background-repeat: repeat-x;
	padding-top:15px;
	width:100%;
}
.winkelwagen-overzicht .panel-body {
    border: 1px solid var(--kleurFe-3);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
	/*padding-top:15px;
	padding-bottom:15px;*/
	border-top:0;
	background-color:var(--kleurFe-5);
}
.winkelwagen-overzicht .panel-body h2 {
    font-family: var(--font-slogan);
    color: var(--kleurFe-3);
    padding-bottom: 0px;
    border-bottom: 0;
    font-weight: normal;
    padding-top: 10px;
    text-transform: uppercase;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: antialiased;
	font-smoothing: antialiased;
}
.winkelwagen-overzicht .panel-group #winkelwagenTable tr:first-child:after{
    content: "";
    background-image: none;
	display:none;
}
.winkelwagen-overzicht .panel-footer{
    background-color: var(--kleurFe-3);
	border-top: 1px solid var(--kleurFe-3);
	border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
	color:var(--kleurFe-5);
	display:flex;
    flex-direction: row;
    align-items: center;
	/*justify-content: space-between;*/
	justify-content: center;
	display:none;
}
.winkelwagen-overzicht .panel-footer a{
	color:var(--kleurFe-5);
	margin-left:10px;
}
.winkelwagen-overzicht .panel-footer a:hover{
	text-decoration:none;
}
.winkelwagen-overzicht .flexrow.afleverkeuze{
	padding-top: 5px;
    padding-bottom: 5px;
	background-color: var(--color-C);
	display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
	border-top: 1px solid var(--kleurFe-3);
	border-bottom: 1px solid var(--kleurFe-3);
	margin-bottom:15px;
}
.winkelwagen-overzicht .panel-footer input[type="checkbox"] {
    margin-right:10px;
}
.winkelwagen-overzicht .panel-footer > div{
	padding:10px;
}
.winkelwagen-overzicht .panel-footer label {
    margin-bottom: 0px;
}
.winkelwagen-overzicht .panel-footer .btn {
    margin-top: 0px;
}
.winkelwagen-overzicht div[data-cart="shipping-address"]{
	margin-top:-15px;
	padding-bottom:15px;
}
.winkelwagen-overzicht div[data-cart="billing-address"]{
	padding-bottom:15px;
}
.WWinfoColumn {
	padding-top:25px;
	/*padding-bottom:35px;*/
}
.WWinfoColumn .winkelwagenTable {
    background-color: var(--licht-blauw-winkelwagen);
}
.WWinfoColumn .winkelwagenTable td {
    padding-top:5px;
    padding-bottom:5px;
}
.WWinfoColumn .winkelwagenTable .usp-footer {
    margin-top: 15px;
}
.WWinfoColumn .winkelwagenTable .usp-titel {
    font-weight:bold;
	color: var(--donker-blauw);
}
.WWinfoColumn .winkelwagenTable ul.usp {
    margin-top: 15px;
}
.WWinfoColumn .winkelwagenTable tr.white{
	background-color:var(--bs-white);
}
.WWinfoColumn .winkelwagenTable .totaal td{
	border-top:solid 1px var(--blauw);
}
.WWinfoColumn .winkelwagenTable .mRight{
	padding-right:2px;
}
.winkelwagen-overzicht .panel-body .form-select {
    font-size:var(--fontSta);
}
.winkelwagen-overzicht .panel-body hr {
    border-color: var(--kleurFe-3);
    background: var(--kleurFe-3);
	opacity:0.5;
}
.winkelwagen-overzicht .panel-body .p15 {
    padding:15px;
}
.winkelwagen-overzicht .panel-body form {
    padding: 0px;
}
tr.shopping_table_grey:after,
tr.shopping_table_white:after{
	border-top:solid 1px var(--licht-grijs);
	background-image: none;
}
tr.shopping_table_grey.noline:after,
tr.shopping_table_white.noline:after{
    content: "";
    background-image: none;
	display:none;
}
#winkelwagenTable {
    margin-bottom: 0px;
}
#winkelwagenTable td.productimg{
	text-align:center;
}
#winkelwagenTable tr.shopping_table_grey.noline td,
#winkelwagenTable tr.shopping_table_white.noline td{
	padding-top:0 !important;
}
#winkelwagenTable .shopping_table_grey td.productimg a,
#winkelwagenTable .shopping_table_white td.productimg a{
	display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}
#winkelwagenTable td.productimg.prod30 img{
	max-height:180px;
}
#winkelwagenTable td.productimg.prod15 img{
    /*-ms-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    display: block;
	
    transform-origin: center top;*/
}
#winkelwagenTable td.productimg.prod5 img{
	max-width:69.70954356846473%;
}
#winkelwagenTable td.productimg.prod27 img:nth-child(1){
	max-width:31.32780082987552%;
		border-radius:15px;
}
#winkelwagenTable td.productimg.prod27 img:nth-child(2){
	max-width:52.0746887966805%;
		border-radius:15px;
}
#winkelwagenTable .flexrow.knoppen,
.gegevensTable .flexrow.knoppen,
.betaalTable .flexrow.knoppen{
    display: flex;
    align-items: center;
}
.gegevensTable.knoppen{
	margin-top:20px;
}
#winkelwagenTable .flexrow.knoppen > div:nth-child(1),
.gegevensTable .flexrow.knoppen > div:nth-child(1),
.betaalTable .flexrow.knoppen > div:nth-child(1){
	width:calc(100% - 200px);
}
#winkelwagenTable .flexrow.knoppen > div:nth-child(2),
.gegevensTable .flexrow.knoppen > div:nth-child(2),
.betaalTable .flexrow.knoppen > div:nth-child(2){
	width:200px;
}
.flexrow.knoppen label{
	display:block;
	padding-left:25px;
	position:relative;
}
.winkelwagenVerzendkostenContainer label{
	display:block;
	padding-left:20px;
	position:relative;
}
.flexrow.knoppen label input[type="checkbox"],
.winkelwagen-overzicht .winkelwagenVerzendkostenContainer label input[type="radio"]{
	position:absolute;
	margin:0;
	left:3px;
	top:4px;
	z-index:1;
}
.gegevensTable.knoppen tr td{
    padding: 20px !important;
	border-top: solid 1px var(--licht-grijs);
}
.betaalTable.knoppen tr td{
    padding: 20px !important;
}
#winkelwagenTable .akkoordknop,
.gegevensTable .akkoordknop,
.betaalTable .akkoordknop {
    font-family: "Manrope";
    font-size: 18px;
    color: var(--wit);
    padding: 10px;
    padding-left: 30px;
    padding-right: 30px;
    text-align: center;
    background-color: var(--bs-orange);
    border-radius: 41px;
    margin-top: 0px;
    text-decoration: none;
    -webkit-transition: background-color 0.2s;
    transition: background-color 0.2s;
    white-space: normal;
    float: right;
    text-decoration: none !important;
    border: 0;
    margin-left: 0px;
    border: 1px solid var(--bs-orange);
    font-weight: 900;
}
#winkelwagenTable .akkoordknop:hover,
.betaalTable .akkoordknop:hover {
    background-color: var(--blauw-2022);
    border: 1px solid var(--blauw-2022);
}
.winkelwagen-overzicht .panel.disabled{
	opacity:0.5;
	pointer-events: none;
}
.winkelwagen-overzicht .flexrow.account{
	padding:30px;
}
.winkelwagen-overzicht .flexrow.account h2{
	margin-top:0;
}

.winkelwagen-overzicht .accountknop {
	display:block;
    font-family: "Manrope";
    font-size: 18px;
    color: var(--wit);
    padding: 10px;
    padding-left: 30px;
    padding-right: 30px;
    text-align: center;
    background-color: var(--blauw-2022);
    border-radius: 41px;
    margin-top: 0px;
    text-decoration: none;
    -webkit-transition: background-color 0.2s;
    transition: background-color 0.2s;
    white-space: normal;
    float: none;
    text-decoration: none !important;
    border: 0;
    margin-left: 0px;
    border: 1px solid var(--blauw-2022);
    font-weight: 900;
	width:100%;
	margin-top:25px;
}
.winkelwagen-overzicht .accountknop:hover {
    background-color: var(--bs-orange);
    border: 1px solid var(--bs-orange);
	
}

.winkelwagen-overzicht .gastknop {
	display:block;
    font-family: "Manrope";
    font-size: 18px;
    color: var(--blauw-2022);
    padding: 10px;
    padding-left: 30px;
    padding-right: 30px;
    text-align: center;
    background-color: var(--wit);
    border-radius: 41px;
    margin-top: 0px;
    text-decoration: none;
    -webkit-transition: background-color 0.2s;
    transition: background-color 0.2s;
    white-space: normal;
    float: none;
    text-decoration: none !important;
    border: 0;
    margin-left: 0px;
    border: 1px solid var(--blauw-2022);
    font-weight: 900;
	width:100%;
	margin-top:25px;
}
.winkelwagen-overzicht .gastknop:hover {
    color: var(--wit);
    background-color: var(--bs-orange);
    border: 1px solid var(--bs-orange);
	
}
.winkelwagen-overzicht .winkelwagenVerzendkostenContainer label{
	font-weight:normal;
}
.flexrow.account .input-group{
	margin-bottom:15px;
}
.flexrow.account .reminder,
.flexrow.knoppen .voorwaarden{
	color:var(--blauw);
}
.flexrow.account .reminder:hover,
.flexrow.knoppen .voorwaarden:hover{
	text-decoration:none;
}
.winkelwagen-overzicht .panel-body.gegevens{
	/*padding-top:20px;*/
}
.winkelwagen-overzicht .panel-body.gegevens td,
.winkelwagen-overzicht .panel-body td.noleftp{
	padding-left:20px;
}
.floatConstraint {
    flex-grow: 1;
    /*margin-bottom: 33px;*/
}
.flexrow.content-totaal .floatConstraint .floatdiv {
	position:-webkit-sticky;
	position:sticky;
	top:0;
	width:auto;
}
.winkelwagen-overzicht .gegevensTable.rightTable tr:not(.tonen, .verzendadres) {
    display: none;
}
.winkelwagen-overzicht input[type="radio"] {
    margin-right:4px;
}
.WWinfoColumn .knoppen.betaalmethoden{
	padding-left:0;
	padding-right:0;
}
.WWinfoColumn .knoppen.betaalmethoden > div{
	float:left;
	width:calc(100% - 200px);
	padding-left:0;
	padding-right:0;
	padding-top:5px;
}
.WWinfoColumn .knoppen.betaalmethoden iframe{
	margin-top:5px;
}
@media only screen and (max-width: 1200px){
	.no-more-tables-new .winkelwagenTable tbody > tr:first-child > td:first-child {
		padding-top: 5px;
	}
	#winkelwagenTable .shopping_table_grey td.productimg,
	#winkelwagenTable .shopping_table_white td.productimg {
		padding-left: 0;
		padding-right: 0;
		padding-top:15px !important;
	}
	.shopping_table_grey td.productimg img,
	.shopping_table_white td.productimg img	{
		max-width:80%;
	}
	.no-more-tables-new tr.shopping_table_grey.noline td:before,
	.no-more-tables-new tr.shopping_table_white.noline td:before{
		top: 0;
	}
	.no-more-tables-new .shopping_table_grey td:first-child, .shopping_table_white td:first-child {
		padding-left: 50%;
	}
	.no-more-tables-new .no-mobile{
		display:none;
	}
	.no-more-tables-new .winkelwagenAantalContainer{
		padding-left:0;
	}
	.flexrow.account > div{
		width:100%;
	}
	.gegevensTable #gegevenskop1{
		padding-top: 0px;
	}
	.winkelwagen-overzicht #collapse3 .panel-body.gegevens > .flexrow{
	    flex-direction: column !important;
	}
	.winkelwagen-overzicht #collapse3 .panel-body.gegevens .flexrow > div{
		width:100% !important;
	}
}
@media only screen and (min-width: 992px){
	.winkelwagen-overzicht .flexrow.account > div:first-child{
		border-right: solid 1px var(--licht-grijs);
		padding-right:30px;
	}
	.winkelwagen-overzicht .flexrow.account > div:last-child{
		padding-left:30px;
	}
}
@media only screen and (max-width: 992px){
	.winkelwagen-overzicht .flexrow.account > div:first-child{
		border-bottom: solid 1px var(--licht-grijs);
		padding-bottom:30px;
	}
	.winkelwagen-overzicht .flexrow.account > div:last-child{
		padding-top:30px;
	}
}
@media only screen and (max-width: 576px){
	#winkelwagenTable .shopping_table_grey td.productimg a, #winkelwagenTable .shopping_table_white td.productimg a {
		flex-direction: column;
	}
	#winkelwagenTable td.productimg.prod27 img:nth-child(1){
		max-width:41.77040110650069%;
		border-radius:15px;
	}
	#winkelwagenTable td.productimg.prod27 img:nth-child(2){
		max-width:69.432918395574%;
		margin-top:15px;
		border-radius:15px;
	}
	.winkelwagen-overzicht .flexrow.knoppen{
	    flex-direction: column !important;
	}
	.winkelwagen-overzicht .flexrow.knoppen > div{
	    width:100% !important;
	}
	.winkelwagen-overzicht .flexrow.knoppen > div:nth-child(2){
		margin-top:15px;
	}
	section.blokken.blokItems .row.blokItemsContent .blokitems-content-item {
		justify-content: center;
	}
	.login-kader{
		margin-bottom:15px;
	}
}

/* ======================================
	00. Nieuw component
====================================== */





/* ======================================
	Media Queries
====================================== */

/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {

}/* Einde Custom, iPhone Retina */

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {

}/* Einde Extra Small Devices, Phones */
/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
	.formulier .cell_label,
	.formulier .cell_field{
		display:block;
	}
}
@media only screen and (min-width : 768px) {
/* zoekknop */
	.btn_zoeken .navbar-form {
		/*margin-left: 8px;*/
		margin:0;
	}
	/* logo */
	.navbar-header {
		float: none;
		margin: 0 auto;
		text-align: center;
	}
	.formulier .cell_label{
		padding-bottom:0;
	}

} /* Einde Small Devices, Tablets */


/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}/* Einde Medium Devices, Desktops */
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}/* Einde Large Devices, Wide Screens */
.input-group-addon{
margin: 3px 14px 2px 0px;
}
/* ---------slider------- */
.carousel-caption {
    display: flex;
    height: 100%;
    justify-content: center;
}
.sliderTextFlix{
	display: flex;
	flex-direction: column;
	max-width:70%;
	padding-bottom:50px;
}
.sliderTextFlix h2{
	text-shadow: 2px 2px 4px rgba(0,0,0,0.6);
    font-family: var(--font-slogan);
    font-weight: normal;
    text-transform: uppercase;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: antialiased;
	font-smoothing: antialiased;
}
.item.carousel-item {
    transition: 700ms;
}
.carousel-caption h3 {
	    text-shadow: 0px 1px 50px black;
	    font-weight: 400;
	}
.carousel-indicators {
    bottom: 30px;
}
button.carousel-control-prev,
button.carousel-control-next{
	background-color:transparent;
	cursor:pointer;
}
button .carousel-control-prev-icon, button .carousel-control-next-icon {
    transform: scale(1);
	transition:all 0.2s ease;
	-webkit-transition:all 0.2s ease;
	-moz-transition:all 0.2s ease;
	-ms-transition:all 0.2s ease;
	-o-transition:all 0.2s ease;
}
button .carousel-control-prev-icon:hover, button .carousel-control-next-icon:hover {
    transform: scale(1);
    background-color:transparent;
    border-radius: 50%;
    padding: 0;
}
button.carousel-control-prev:hover .carousel-control-prev-icon, button.carousel-control-next:hover .carousel-control-next-icon {
    transform: scale(1.2) !important;
    background-color:transparent;
    border-radius: 50%;
    padding: 15px;
	transition:all 0.2s ease;
	-webkit-transition:all 0.2s ease;
	-moz-transition:all 0.2s ease;
	-ms-transition:all 0.2s ease;
	-o-transition:all 0.2s ease;
}
/* ----- cokie ------- */
.containerCModal{
	z-index: 1000000
}
.cokieIcon {
    background-image: url('../images/cokieIcon.svg');
    background-repeat: no-repeat;
    padding-left: 15px;
    padding-right: 25px;
    padding-top: 20px;
    padding-top: 15px;
    padding-bottom: 20px;
    margin-bottom: 0px;
}
.transitionAll{
  transition:all 0.5s ease;
  -webkit-transition:all 0.5s ease;
  -moz-transition:all 0.5s ease;
  -ms-transition:all 0.5s ease;
  -o-transition:all 0.5s ease;
}
.input-group {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
}
.bgDonker{
  background-color: var(--kleurFe-1);
}
.bgLicht{
  background-color: var(--kleurFe-2);
}
@media all and (min-width: 992px) {
	#main_nav li,
	.topNav li {
	 display: block;
	 transition-duration: 0.5s;
	}
	#main_nav li:hover,
	.topNav li:hover {
	  cursor: pointer;
	}
	#main_nav ul li ul,
	.topNav ul li ul {
		visibility: hidden;
		opacity: 0;
		position: absolute;
		transition: all 0.5s ease;
		display: none;
		min-width:200px;
	}
	#main_nav ul li ul li ul,
	.topNav ul li ul li ul {
	  margin-left:30px;
	}
	#main_nav  ul li:hover > ul,
	#main_nav  ul li ul:hover,
	.topNav ul li:hover > ul,
	.topNav ul li ul:hover {
	  visibility: visible;
	  opacity: 1;
	  display: block;
	}
	#main_nav ul li ul li,
	.topNav ul li ul li {
	  clear: both;
	  width: 100%;
	}
}
.btn_inloggen{
      width: 78px;
}
#btnMob{
  display: none;
}
.topNav {
    background-color: var(--kleurFe-3);
    width: 100%;
    height: 50px;
}
.topNav .container ul.nav_items {
	margin:0;
	display: flex;
  flex-direction: row;
  align-content: center;
  align-items: center;
	height:50px;
	justify-content: flex-end;
list-style:none;
}
.topNav .container ul li {
	width:auto;
	border-left:solid 1px var(--kleurFe-5);
	padding:0 10px;
	height:var(--topnavButtonHeight);
	position:relative;
}
.topNav .container ul li *{
	font-size: var(--fontSmal) !important;
}
.topNav .container ul li .fa.left,
.topNav .container ul li .fas.left{
	display:inline-block;
	margin-right:5px;
}
.topNav .container ul li .fa.right{
	display:inline-block;
	margin-left:5px;
}
.topNav .container > ul > li > a{
	margin-top:-3px;
}
.topNav .container > ul > li > a,
.topNav .container > ul > li > button {
	color: var(--kleurFe-5);
	text-decoration:none;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
.topNav .container > ul > li > a:hover,
.topNav .container > ul > li > button:hover {
	color: var(--kleurFe-2);
	text-decoration:none;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
.topNav .container ul li:first-child {
	border-left:0;
}
.midNav {
    /*background-color: var(--kleurFe-5);*/
    width: 100%;
}

.menuItemContainer{
	width: 100%;
	display: flex;
}

.menuItemContainer li li{
  margin: 0px;
}
.menuItemContainer a{
  color: var(--kleurFe-2);
  font-size: var(--fontMid);
  text-decoration: none;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
font-weight:bold;
line-height:19px;
}
.menuItemContainer li li a.nav-link{
	padding:10px 15px !important;
}
.menuItemContainer a:hover{
	color: var(--kleurFe-3);
	/*transition: all 0.3s;*/
	font-weight:bold;
}
.menuItemContainer a:active{
  color: var(--kleurFe-2);
}
.menuItemContainer a.active,
.menuItemContainer a.active:hover,
.menuItemContainer a:focus{
    color: var(--kleurFe-3);
}
.dropdown-toggle::after {
    margin-left: 10px;
  color: var(--kleurFe-3);
}


/* ------------block Links---------------- */
.blockRechts{
  width: 100%;
  height: 100%;
}
.blockRechts a, i{
  text-decoration: none;
  font-size: 1.4em;
}
/* ------Eind block Links---------------- */

.incBovenTest{
  width: 100%;
  height: fit_contain;
  background-color: var(--kleurFe-1);
  margin-top: 25px;
  height: 477px;
}
/*.container-fluid.onder{
	background-image:url(../images/boven-footer.png);
	background-position:left bottom;
	background-repeat:no-repeat;
}*/
.footerCms:before{
	content:'';
	position:absolute;
	width:460px;
	height:197px;
	background-image:url(../images/boven-footer.png);
	background-position:left bottom;
	background-repeat:no-repeat;
	left:0;
	top:-197px;
	z-index:-1;
}

/* -----------footer---------------- */
  .footerCms{
	position:relative;
	padding-top: 40px;
	/*background-image: url('../images/footer-left.png'),url('../images/footer-right.png');
	background-position: left top, right bottom;
	background-repeat: no-repeat;*/
	background-image: url('../images/footer-left-2.png');
	background-position: left top;
	background-repeat: no-repeat;
	background-color: var(--color-C);
  }
  .footerCms p{
	  margin:0;
  }
  footer .footerblok h3 {
	font-family: var(--font-slogan);
	color: var(--kleurFe-3);
    padding-bottom: 0px;
	border-bottom: 0;
	font-weight:normal;
	padding-top:10px;
	text-transform:uppercase;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: antialiased;
	font-smoothing: antialiased;
}
.footerblok hr:not([size]) {
    height: 2px;
    width: 100px;
    background-color: var(--kleurFe-3);
}
footer .footerblok .tekst a {
  text-decoration: none;
  font-size: var(--fontSta);
  margin-right: 23px;
  -webkit-transition: all 100ms; -moz-transition: all 100ms; -ms-transition: all 100ms; -o-transition: all 100ms; transition: all 100ms;
}
footer .footerblok .tekst a:hover {
color:  var(--kleurFe-3);
font-weight: 700;
}
footer .footerblok .tekst p {
  font-size: var(--fontSta);
}
.logoFooter {
    display: grid;
    align-content: space-around;
    align-items: center;
}
.logoFooter img {
  max-width: 200px;
}
.barCoprRight {
    text-align: center;
    color: var(--kleurFe-2);
    background-color: transparent;
    padding: 0 0 39px 0;
    /* background: #273037; */
}
footer .logo-1{
	 font-family: var(--font-slogan);
	 text-transform:uppercase;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: antialiased;
	font-smoothing: antialiased;
}
footer .logo-2{
	 font-family: var(--font-H2);
	 font-size:22px;
}
.barCoprRight a{
    color: var(--kleurFe-2);
	text-decoration:none;
}
.barCoprRight a:hover{
    color: var(--kleurFe-3);
	text-decoration:underline;
}
.links-midden{
	padding-bottom:60px;
}
footer .footerblok .fab {
    font-family: 'Font Awesome 5 Brands';
    font-size: 14px;
}
footer .footerblok .fas,
.barCoprRight .far{
    font-size: 14px;
}

#naarBovenCon {
  position: fixed;
  bottom: 50px;
  right: 50px;
  opacity: 0;
  cursor: grab;
  transition: opacity 0.5s;

}

.naarBoverIco {
	color: var(--kleurFe-3);
	font-size: 2em;
	background: white;
	border-radius: 50%;
	transition: 0.1s;

  }
  #naarBovenCon:hover .naarBoverIco {
	color: var(--kleurFe-2);
	background: white;
  }

@media only screen and (max-width: 992px)  {
	h1{
		font-size:40px;
	}
	.artwork .spetter {
		margin-left:-10px;
	}
	.artwork .info {
		padding-left: 15px;
		padding-top: 60px;
		padding-right: 15px;
	}
	.artwork .info h2 {
		margin-top:-15px;
		padding-left:70px;
		padding-bottom:20px;
	}
	.artwork .info.no-number h2 {
		margin-top:10px;
		padding-left:0px;
		padding-bottom:20px;
	}
	section.blokken.blokItems .row.blokItemsContent > div {
		margin-bottom:15px !important;
	}
	.menuItemContainer li {
		margin: 25px 15px 23px 15px;
	}
	.socialMediaIcons{
		display: flex;
		justify-content: space-around;
		flex-direction: column;
		align-items: center;
	}
	.socialMediaIcons h3, hr{
		display: none;
	}
	#slideCarousel12 .carousel-caption h2 {
		font-size: 20px !important;
		line-height:normal;
	}
	#slideCarousel12 .carousel-caption p,
	#slideCarousel12 .carousel-caption a	{
		font-size: var(--fontSta) !important;
		line-height:normal !important;
		padding: 14px 10px !important;
		font-weight:bold;
		 background-color: rgba(255,255,255,0.9) !important;
	}
	.menuLogoContainer{
		max-width:calc(100% - 70px);
	}
	.footerCms{
		-webkit-transition: all 500ms;
		-moz-transition: all 500ms;
		-ms-transition: all 500ms;
		-o-transition: all 500ms;
		transition: all 500ms;

	}
	.footerCms .row {
		flex-wrap: wrap;
		align-content: space-around;
		flex-direction: column;
	}
	.footerblok{
		text-align:center;
	}
	.footerblok ul{
		list-style:none;
	}
  /* --------voor div allen ------------- */
      #carouselExampleCaptions{
        display: none;
      }
}
@media (max-width:767px) {
	.totaal .artwork .no3 .achtervlak.enkel {
		padding: 15px 15px 30px 15px !important;
		margin-top:-30px;
	}
}
@media (max-width:900px) {
	body {
		background-image: url(../images/content-rechts-achtergrond.gif);
		background-repeat: repeat-y;
		background-position: right top;
		background-color: var(--kleurFe-5);
	}
}
@media only screen and (max-width: 800px)  { /* 547  */
	footer .footerblok {
	padding-left: 28px;
	}
	/*.nav_items .btn_zoeken{
		width:100% !important;
		display:block;
		margin-left:-10px;
		margin-bottom:10px;
	}*/
	.topNav .container ul.nav_items{
		padding-top:30px;
	}
	.nav_items .btn_zoeken {
		width: auto !important;
		display: block;
		margin-left: 0px;
		margin-bottom: 0px;
		position: absolute;
		left: 10px;
		right: 10px;
		z-index: 1;
		top:10px;
		border-left:0 !important;
		padding:0 !important;
	}
	.topNav{
		height:80px;
		padding:10px 0 0 0;

	}
	.topNav .container ul.nav_items{
		display:block;
		margin:0 !important;
	}
	.topNav .container ul li{
		padding:0;
		border-left:0 !important;
	}
	.nav_items .btn_inloggen,
	.nav_items .talen,
	.nav_items .winkelwagenknop	{
		width:35% !important;
		float:left;
		border-left:solid 0px transparent !important;
		white-space:nowrap;
	}
	.nav_items .btn_inloggen{
		width:30% !important;
	}
	.menuItemContainer{
		margin-top:15px;
	}
	footer .footerblok {
		text-align: center;
	}
	footer .footerblok ul{
		list-style:none;
	}
	.footerCms:before {
		max-width:100% !important;
	}
	.artwork .info .btn{
		font-size:var(--fontSta) !important;
		padding: 5px 5px;
		width:100% !important;
	}
	.artwork .info .btn .fas{
		display:none !important;
	}
}
/* ----- Sitemap ------------ */
.sitemap{
  margin-bottom: 45px;
}
.sitemap > ul> li > .siteMapTwee {
    margin-top: 20px;
}
.sitemap > ul> li > ul{
  margin-top: 2rem;
  font-size: 18px;
}
.sitemap > ul> li > a {
	font-size: 22px;
	font-weight: 800;
}
.sitemap .sitemap > ul > li > a {
  font-size: 38px;
}

.sitemap ul,
.sitemap li{
  margin: 0;
  padding: 0;
}
.sitemap ul{
    list-style: none;
    margin-top: 3rem;
}
.sitemap ul{
	list-style: none;
	margin-top: 3rem;
}

.sitemap ul li{
  line-height: 2rem;
  vertical-align: top;
  position: relative;
}

.sitemap ul li a{
  text-decoration: none;
  display: inline-block;
}
.sitemap ul li {

}

.sitemap ul ul{
  margin-left: 1.5rem;
  margin-bottom: 2.5rem;
  margin-top: 1rem;
}

.sitemap ul ul li{
  position: relative;
}

.sitemap ul ul li::before{
  content: "";
  display: inline-block;
  width: 3rem;
  height: 100%;
  border-left: 1px var(--kleurFe-2) solid;
  position: absolute;
  top: -0.75rem;
}
.sitemap1 > li > a{
    color: var(--kleurFe-3) !important;
    font-family: var(--font-slogan);
    font-size: var(--fontGro);
    font-weight: normal !important;
    text-align: left;
    text-transform: uppercase;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: antialiased;
	font-smoothing: antialiased;
}
.sitemap ul ul li::before{
  content: "";
  display: inline-block;
  width: 3rem;
  height: 3rem;
  border-bottom: 1px var(--kleurFe-2) solid;
  position: absolute;
  top: -0.75rem;
}
.sitemap ul ul li a {
  margin-left: 3.75rem;
  margin-top: 1rem;
}
.sitemap li li a{
	transition: all 0.3s;
	color: var(--kleurFe-2);
}
.sitemap li li a::after {
	-webkit-transition: all 300ms;
	-moz-transition: all 300ms;
	-ms-transition: all 300ms;
	-o-transition: all 300ms;
	content: "";
  display: inline-block;
  position: absolute;
}
.sitemap li li a:hover::after{
color: var(--kleurFe-3);
margin-right: 5px;
    font-weight: 800;
    font-family: 'Font Awesome 5 Free';
    content: "\f152";
      margin-left: 1rem;
}
 .sitemap li li a:hover{
 color: var(--kleurFe-3);
}
.page-link {
    position: relative;
    display: block;
    color: var(--kleurFe-2);
    text-decoration: none;
    background-color: #fff;
    font-family: var(--font-tekst);
    font-size: var(--fontMid);
}
.page-item.active .page-link {
    background-color: var(--kleurFe-3);
    border-color: var(--kleurFe-3);
}
.page-link:hover {
    color:var(--kleurFe-5);
    background-color:var(--kleurFe-2);
    border-color: #dee2e6;
    text-decoration: none;
}

.error-message {
	/*display:none;*/
	color:red;
	padding:5px;
	font-weight:bold;
	display:block;
}
p.leeg{
	display:block;
	padding:50px 0 100px 0;
	text-align:center;
    font-size: 30px;
    color: var(--color-A);
    font-family: var(--font-H1);
    font-weight: normal;
}
.error-message.show {
	display:block;
}

.succes-message{
	color:green;
	padding:5px;
	font-weight:bold;
}
.not-succes-message{
	color:red;
	padding:5px;
	font-weight:bold;
}
.family-art-tooltip-350{
	background-color: transparent;
	color:var(--kleurFe-5);
	font-size: var(--fontSmal);
	line-height:normal;
}
.family-art-tooltip-350 .tooltip-inner{
	padding:10px;
	background-color: var(--kleurFe-3);
	/*border:solid 1px #000;*/
	text-align:left;
	border-radius:10px;
}
.family-art-tooltip-350 .tooltip-inner ol,
.family-art-tooltip-350 .tooltip-inner ul{
	margin:0;
}
.family-art-tooltip-350 .tooltip-inner,
.family-art-tooltip-350 .tooltip-inner *,
.family-art-tooltip-350 .tooltip-inner p{
	color:var(--kleurFe-5);
	font-size: var(--fontSmal);
    font-family: var(--font-tekst);
}
.family-art-tooltip-350 .tooltip-arrow{
	/*background-color: var(--kleurFe-3);
	color: var(--kleurFe-3);*/
	display:none;
}
.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before,
.bs-tooltip-end .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before, 
.bs-tooltip-top .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before, 
.bs-tooltip-bottom .tooltip-arrow::before {
    border-right-color: var(--kleurFe-3);
	border-top-color: var(--kleurFe-3);
	border-left-color: var(--kleurFe-3);
	border-bottom-color: var(--kleurFe-3);
}
.meerinfo {
    cursor: pointer;
    margin-right: 5px;
    bottom: -2px;
    position: relative;
}



/* ------------- */

#variant_options input{
	appearance: none;
	width: 20px;
	height: 20px;
	border: 2px solid var(--kleur-no1);
	border-radius: 5px;
	background-color: transparent;
	display: inline-block;
	position: relative;
	margin-right: 10px;
	cursor: pointer;
	margin-bottom: -3px;
  }
  #variant_options input:before {
	content: "";
	background-color: var(--kleur-no1);
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0);
	width: 10px;
	height: 10px;
	border-radius: 3px;
	transition: all 0.3s ease-in-out;
  }
  #variant_options input:checked:before {
	transform: translate(-50%, -50%) scale(1);
  }
  #variant_options label {
	font-size: 18px;
	cursor: pointer;
	user-select: none;
	align-items: center;
  }