/* ----------------------------------------------------------
		EXTENDED FROM PURE.CSS AND MODERN-NORMALIZE.CSS V2.0.0
   ----------------------------------------------------------*/


/* ----------------------------------------------------------
		BASE NORMALIZATIONS
   ----------------------------------------------------------*/


/**
Use a better box model (opinionated).
*/
*,
::before,
::after {
	box-sizing: border-box;
}

html {
	/* Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) */
	font-family:
		system-ui,
		'Segoe UI',
		Roboto,
		Helvetica,
		Arial,
		sans-serif,
		'Apple Color Emoji',
		'Segoe UI Emoji';
	line-height: 1.15; /* 1. Correct the line height in all browsers. */
	-webkit-text-size-adjust: 100%; /* 2. Prevent adjustments of font size after orientation changes in iOS. */
	-moz-tab-size: 4; /* 3. Use a more readable tab size (opinionated). */
	tab-size: 4; /* 3 */
}

/*
Sections
========
*/

body {
	margin: 0; /* Remove the margin in all browsers. */
	display:flex; flex-direction:column; min-height:100vh; /* To keep footer to the bottom of the page and avoid the IE 10-11 `min-height` bug. */
}
	.mc-contentwrap{flex-grow:1; /* Footer at bottom page */}
/*
Grouping content
================
*/

/**
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
*/

hr {
	height: 0; /* 1 */
	color: inherit; /* 2 */
}

/*
Text-level semantics
====================
*/

/** Add the correct text decoration in Chrome, Edge, and Safari. */
abbr[title] {text-decoration: underline dotted;}

/**
Add the correct font weight in Edge and Safari.
*/

b,
strong {
	font-weight: bolder;
}

/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
	font-family:
		ui-monospace,
		SFMono-Regular,
		Consolas,
		'Liberation Mono',
		Menlo,
		monospace; /* 1 */
	font-size: 1em; /* 2 */
}

/** Add the correct font size in all browsers. */
small {font-size: 80%;}

/** Prevent 'sub' and 'sup' elements from affecting the line height in all browsers. */

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}



/*
Interactive
===========
*/

/* Add the correct display in Chrome and Safari. */
summary {display: list-item;}

/* ----------------------------------------------------------
		BASE COLORS
   ----------------------------------------------------------*/
:root {
  --clr_main1: #b2eaea;
  --clr_main2: #84b4c8;
  --clr_accent1: #fbb63e;
  --clr_accent2: #619095;
  --pad-hor-val:10px;
  --pad-hor: 0 10px;
  --pad-all: 10px;
  --pad-vert: 10px 0;
  --pad-vert-val:10px;
}
	.bg_main1{background-color:var(--clr_main1);}
	.bg_main2{background-color:var(--clr_main2);}
	.bg_accent1{background-color:var(--clr_accent1);}
	.bg_accent2{background-color:var(--clr_accent2);}	

/* ----------------------------------------------------------
		BASE IMAGES
   ----------------------------------------------------------*/
img{ width: 100%; height: auto; } /*https://stackoverflow.com/questions/41774646/image-is-not-resizing-in-a-flexbox-layout*/


/* ----------------------------------------------------------
		BASE TABLES
   ----------------------------------------------------------*/
/**
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/

table {
	text-indent: 0; /* 1 */
	border-color: inherit; /* 2 */
}
	/* TO BE ADDED Extend base table styling */



/* ----------------------------------------------------------
		BASE FORMS
   ----------------------------------------------------------*/
/**
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/

button,
input,
optgroup,
select,
textarea {
	font-family: inherit; /* 1 */
	font-size: 100%; /* 1 */
	line-height: 1.15; /* 1 */
	margin: 0; /* 2 */
}

/**
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
	text-transform: none;
}

/**
Correct the inability to style clickable types in iOS and Safari.
*/

button,
[type='button'],
[type='reset'],
[type='submit'],
.mc-linkbutton {
	/* Normalize */
	-webkit-appearance: button;
	/* Style */
    display: inline-block;
    font-family: inherit;
    font-size: 100%;
	font-weight: 600;
    vertical-align: middle;
	text-align: center;	
    line-height: normal;
    white-space: nowrap;	
	text-transform: uppercase;
	text-decoration: none;    
    cursor: pointer;
    -webkit-user-drag: none;
    user-select: none;
	
    padding: 5px 20px;
	
    color: #555;
	background-color: transparent;
	border-radius: 4px;
	border: 1px solid #bbb;

}
	button:hover,button:focus,
	[type='button']:hover,[type='button']:focus,
	[type='reset']:hover,[type='reset']:focus,
	[type='submit']:hover,[type='submit']:focus,
	.mc-linkbutton:hover {
		color: #333;
		border-color: #888;
		background-color: #F9F9F9;
	}
	button:focus,[type='button']:focus,[type='reset']:focus,[type='submit']:focus{
		outline:0;
	}
	button:active,[type='button']:active,[type='reset']:active,[type='submit']:active {
		
		border-color: #000;
	}
	button[disabled],[type='button'][disabled],[type='reset'][disabled],[type='submit'][disabled],
	button[disabled]:hover,[type='button'][disabled]:hover,[type='reset'][disabled]:hover,[type='submit'][disabled]:hover,
	button[disabled]:focus,[type='button'][disabled]:focus,[type='reset'][disabled]:focus,[type='submit'][disabled]:focus,
	button[disabled]:active,[type='button'][disabled]:active,[type='reset'][disabled]:active,[type='submit'][disabled]:active{
		border: none;
		background-image: none;
		opacity: 0.40;
		cursor: not-allowed;
		box-shadow: none;
		pointer-events: none;
	}
	
	input[type="text"],
	input[type="password"],
	input[type="email"],
	input[type="url"],
	input[type="date"],
	input[type="month"],
	input[type="time"],
	input[type="datetime"],
	input[type="datetime-local"],
	input[type="week"],
	input[type="number"],
	input[type="search"],
	input[type="tel"],
	input[type="color"],
	select,
	textarea,
	input:not([type]){
		padding: 6px 10px;
		display: inline-block;
		border: 1px solid #D1D1D1;
		border-radius: 4px;
		vertical-align: middle;
		background-color: #fff;
		box-shadow: none;
		box-sizing: border-box;
	}
	
	/* Chrome (as of v.32/34 on OS X) needs additional room for color to display. */
	/* May be able to remove this tweak as color inputs become more standardized across browsers. */
	input[type="color"] {
		padding: 2px 5px;
	}

		input[type="text"]:focus,
		input[type="password"]:focus,
		input[type="email"]:focus,
		input[type="url"]:focus,
		input[type="date"]:focus,
		input[type="month"]:focus,
		input[type="time"]:focus,
		input[type="datetime"]:focus,
		input[type="datetime-local"]:focus,
		input[type="week"]:focus,
		input[type="number"]:focus,
		input[type="search"]:focus,
		input[type="tel"]:focus,
		input[type="color"]:focus,
		select:focus,
		textarea:focus,
		input:not([type]):focus{
			outline: 0;
			border-color: #33C3F0;
		}

	input[type="file"]:focus,
	input[type="radio"]:focus,
	input[type="checkbox"]:focus {
		outline: thin solid #129FEA;
		outline: 1px auto #129FEA;
	}
	
	input[type="radio"]
	input[type="checkbox"]{
		margin: 0.5em 0;
		display: block;
	}
	input[disabled]{
		cursor: not-allowed;	
		background-color: #eaeded;
		color: #cad2d3;	
	}
	
	/* SKIPPED VARIOUS SELECTORS, SEE SOURCES */

	select {
		/* Normalizes the height; padding is not sufficient. */
		height: 2.25em;
		border: 1px solid #ccc;
		background-color: white;
	}
	
	select[multiple] {
		height: auto;
	}
	label {
		margin: 0.5em 0 0.2em;
	}
	fieldset {
		margin: 0;
		padding: 0.35em 0 0.75em;
		border: 0;
	}
	legend {
		display: block;
		width: 100%;
		padding: 0.3em 0;
		margin-bottom: 0.3em;
		color: #333;
		border-bottom: 1px solid #e5e5e5;
	}


/** Remove the inner border and padding in Firefox. */
::-moz-focus-inner {border:0; border-style: none;padding: 0;}

/** Restore the focus styles unset by the previous rule. */
:-moz-focusring {outline: 1px dotted ButtonText;}

/**Remove the additional ':invalid' styles in Firefox.
See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737 */
:-moz-ui-invalid {box-shadow: none;}

/** Add the correct vertical alignment in Chrome and Firefox.*/
progress {vertical-align: baseline;}

/** Correct the cursor style of increment and decrement buttons in Safari.*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {height: auto;}

/**
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
	-webkit-appearance: textfield; /* 1 */
	outline-offset: -2px; /* 2 */
}

/** Remove the inner padding in Chrome and Safari on macOS.*/
::-webkit-search-decoration {-webkit-appearance: none;}

/**
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to 'inherit' in Safari.
*/
::-webkit-file-upload-button {-webkit-appearance: button; /* 1 */font: inherit; /* 2 */}


/* ----------------------------------------------------------
		CODE
   ----------------------------------------------------------*/
code {
  padding: .2rem .5rem;
  margin: 0 .2rem;
  font-size: 90%;
  white-space: nowrap;
  background: #F1F1F1;
  border: 1px solid #E1E1E1;
  border-radius: 4px; }
pre > code {
  display: block;
  padding: 1rem 1.5rem;
  white-space: pre; }



/* ----------------------------------------------------------
		BASE CLASSES
   ----------------------------------------------------------*/
/*
GENERAL USE
========
*/

	/**
	 * Always hide an element when it has the `hidden` HTML attribute.
	 */

	.mc-hidden,.mc-checkshow,
	[hidden] {
		display: none !important;
	}

	.mc-pad_top{padding-top:var(--pad-vert-val);}
	.mc-marg_top{margin-top:var(--pad-vert-val);}

	
/*
IMAGERY
========
*/

	/**
	 * Add this class to an image to make it fit within it's fluid parent wrapper while maintaining
	 * aspect ratio.
	 */
	.mc-full-img {
		max-width: 100%;
		height: auto;
		display: block;
}

/*
FORMS
========
*/
	.mc-btn-group {
		letter-spacing: -0.31em; /* Webkit: collapse white-space between units */
		text-rendering: optimizespeed; /* Webkit: fixes text-rendering: optimizeLegibility */
	}
	.opera-only :-o-prefocus,
	.mc-btn-group {
		word-spacing: -0.43em;
	}

	.mc-btn-group button,
	.mc-btn-group [type='button'],
	.mc-btn-group [type='reset'],
	.mc-btn-group [type='submit']  {
		letter-spacing: normal;
		word-spacing: normal;
		vertical-align: top;
		text-rendering: auto;
	}
	
	/* Stacked form is a form with input elements below the labels */
	.mc-form-stacked input,
	.mc-form-stacked select,
	.mc-form-stacked label,
	.mc-form-stacked textarea{
	    display: block;
		margin: 0.25em 0;
	}
	
	/* For an aligned form, the labels are right-aligned against the form input controls, but on smaller screens revert to a stacked form. 
	The vertical layout is created by wrapping the form items in a form-group
	*/
	.mc-form-aligned input,
	.mc-form-aligned textarea,
	.mc-form-aligned select,
	.mc-form-message-inline {
		display: inline-block;
		vertical-align: middle;
	}
	.mc-form-aligned textarea {
		vertical-align: top;
	}
		.mc-form-aligned .mc-form-group {
			margin-bottom: 0.5em;
		}
		.mc-form-aligned .mc-form-group label {
			text-align: right;
			display: inline-block;
			vertical-align: middle;
			width: 10em;
			margin: 0 1em 0 0;
		}
	

	/* TO BE ADDED: DIFFERENT BUTTON STYLES, SIMILAR TO PURE.CSS BUTTONS.CSS PRIMARY */
	/* PURE.CSS ALSO CONTAINS HELPER CLASSES FOR HELP TEXT INSIDE A FORM. TO BE SEEN IF THIS IS NEEDED */
	/* ALSO STILL HAVE TO ADD RESPONSIVE ASPECTS (E.G. PURE.CSS FORMS-R.CSS) */



/*
MENU
========
*/

	/* General 100's 
	100: Navbar on top on large screen, on bottom on small screen. Search box and site icon
	101: 100. Used for specific coloring
	110: 100, but with position absolute on >550px screens (requires space in the page's content), without search box and icon
	

	*/

	.mc-navbar_cntr{text-transform:capitalize;}
	.mc-navType_100 nav{
		display:flex;
		position:fixed;bottom:0;
		width:100%; /*100vw would also have the width of the scrollbar*/
		gap:0px;
		z-index:100;
		background-color:RGBA(240,240,240,1);
	}
	.mc-navType_100 #smallHeader-headerIcon{
		padding:10px;
		text-align:center;
		display: flex; 
		align-items: center;
		justify-content: center;
	}
		.mc-navType_100.mc-navType_110 #smallHeader-headerIcon{display:none;} /* navType 110 does not have image */
		.mc-navType_100 #smallHeaderIconSmall{padding:0;margin:auto;display:block; width:auto;height:auto;max-height:40px;max-width:100%;}

	.mc-navType_100 nav > ul{
		list-style-type:none;
		padding:0;margin:0;
		position:absolute;bottom:40px;
		width:100vw;height:calc(100vh - 40px);
		transition: height 1.2s ease-in-out;
		overflow-y:auto;
		z-index:100;
	}
		.mc-navType_100 nav > ul{
			display:flex;
			flex-direction:column;
			pointer-events:none;
		}
		.mc-navType_100 nav > li{
			flex-basis: auto;
			flex-grow: 0;
			flex-shrink: 1;	
		}
		.mc-navType_100 nav li{		pointer-events: auto; }
		.mc-navType_100 #menu-spacer{
			flex-basis: 100%;
			flex-grow: 1;
			flex-shrink: 0; 
			background-color:transparent;
			pointer-events:none;
		}
	.mc-navType_100 nav > ul > li{
		margin:0;padding:0;
		transition: flex-grow 1s ease-in-out;
		transition: flex-shrink 1s ease-in-out;
	}
	.mc-navType_100 #nav-toggle-inp + ul #menu-itemswrapper{
		max-height:calc(100vh - 40px);
		overflow-y:hidden;
	}
		.mc-navType_100 #menu-itemswrapper ul{
			padding:0;margin:0;
			list-style-type:none;
			background-color:RGBA(240,240,240,1);
		}
		.mc-navType_100 #menu-itemswrapper li{

		}
			.mc-navType_100 #menu-itemswrapper li:hover{
				background-color:var(--clr_accent1);
			}
		.mc-navType_100 #menu-itemswrapper a{
			display:block;
			text-align:center;
			padding:14px 10px;
			color:black;
			text-decoration:none;
		}
		.mc-navType_100 #menu-itemswrapper a:hover{

		}
		
		
	.mc-navType_100 #nav-toggle-inp:checked + ul > li{
		flex-grow: 1;
		flex-shrink: 0; 
		/*animation: hide-scroll 1s backwards;*/
	}

	.mc-navType_100 #nav-toggle-inp:checked + ul #menu-spacer{
		flex-grow: 0;
		flex-shrink: 1;
	}
	.mc-navType_100 #nav-toggle-inp:not(:checked) + ul{
		/*overflow-y:hidden;*/
	}

	@keyframes hide-scroll {
	  from, to { overflow-y: hidden; } 
	}
	.mc-navType_100 #nav-search{
		display:flex;order:1;flex:1;
		padding:3px;padding-right:20px;
		height:40px;
		overflow:hidden;
	}
	.mc-navType_100 #nav-search:focus-within{}
		#nav-search > div{
			border:1px solid RGBA(200,200,200,1);
			border-radius:5px;
			display:flex;
			align-items: center;
			width:100%;
		}
		.mc-navType_100 #nav-search input{			
			border:none;
			background-color:transparent;
			min-width:0;
			padding:5px 5px 5px 10px;
			font-size:1rem;
			flex-grow:1;
			box-sizing:border-box;
			outline:0;
		}
			.mc-navType_100 #nav-search input:focus{outline:none;}
		.mc-navType_100 #nav-search button{
			cursor:pointer;
			width:40px;height:100%;
			border:none;
			background-color:transparent;
			text-align:center;margin:0;padding:0;
			font-size:1.2rem;
			font-weight:normal;
		}
			.mc-navType_100 #nav-search button::after{
				font-family:'Arial';
				content:'🔎︎';
				filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0%) contrast(50%);
				
			}
			.mc-navType_100 #nav-search button:hover::after{font-family:'Arial';content:'➤';}
			.mc-navType_100 #nav-search button:hover,
			.mc-navType_100 .cart:hover,.mc-navType_100 .cart:focus,
			.mc-navType_100 #nav-toggle-lbl:hover, .mc-navType_100 #nav-toggle-lbl:hover{filter: none;background-color:#fbb63e;}
	.mc-navType_100 .cart{
		display:flex;align-items:center;justify-content:center;
		width:60px;
		order:2;
		cursor:pointer;
		color:black;stroke-width:0.5;filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0%) contrast(50%);
		text-decoration:none;
	}
	.mc-navType_100 .cart svg{}
	.mc-navType_100 #nav-toggle-inp{display:none;}
	.mc-navType_100 #nav-toggle-lbl{
		width:60px;margin:0;padding:0;display:grid;align-items:center;justify-content:center;
		order:3;
		cursor:pointer;
		stroke-width:0.5;filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0%) contrast(50%);
	}
	@media screen and (max-width: 550px){
		.mc-navType_100 ~ footer{margin-bottom:40px;} /* Push space at bottom of the footer to show all content */
	}
	@media screen and (min-width: 550px){
		.mc-navType_100.mc-navbar_wrapper{
			background-color:#fbb63e;
		}
			.mc-navType_100.mc-navType_110.mc-navbar_wrapper{
				background-color:transparent;
			}	
		.mc-navType_100 .mc-navbar_cntr{
			width:100%;max-width:980px;margin:0 auto;
		}
			.mc-navType_100 .mc-navbar_cntr{display:flex;justify-content:space-between;}
			.mc-navType_100.mc-navType_110 .mc-navbar_cntr{
				display:block;
				position:absolute;
				z-index:100;
				right:0;left:0;
				top:0;
			}
		.mc-navType_100 nav{ /* Combi class selector to allow overwriting t-flex properties */
			display:flex;
			color:#fbb63e;
			position:relative;
			width:auto;
			font-size:1em;
			justify-content:flex-end;
			align-items:center;
			overflow:hidden;
			flex-grow:1;
		}
			.mc-navType_100 nav{background-color:transparent;}
			.mc-navType_100.mc-navType_110 nav{
				pointer-events:none;
			} /* NavType does not have a background. Also disable pointer events and enable them on children */
				.mc-navType_110 nav ul, .mc-navType_110 nav .cart{pointer-events:auto;}

			#nav-search{flex-shrink:1;min-width:80px;max-width: 200px;}
			#nav-search > div{
				border:none;border-radius:0;
				border-bottom:1px solid black;				
			}
			.mc-navType_100 #nav-search button{border-radius:0;
			}
				.mc-navType_100 #nav-search button::after{
					filter: none;color:black;
					
					
				}
				.mc-navType_100 #nav-search button:hover,
				.mc-navType_100 .cart:hover,.mc-navType_100 .cart:focus,
				.mc-navType_100 #nav-toggle-lbl:hover, .mc-navType_100 #nav-toggle-lbl:hover{
					filter: none;background-color:var(--clr_accent2);;
				}
				.mc-navType_100 #nav-search input{text-align:right;}
				.mc-navType_100.mc-navType_110 #nav-search{display:none;} /* Positioned nav 110 does not have search box when larger than 550px */

		.mc-navType_100 #nav-toggle-lbl{
			display:none;
		}
		
		.mc-navType_100 nav > ul{
			position:relative;bottom:auto;
			width:auto;height:100%;
			order:2;
			display: flex;
			align-items: center;
			pointer-events:auto; /*reset*/
			
		}
			/*#nav-toggle-inp:checked + ul{
				height:auto;
			}
			#nav-toggle-inp:not(:checked) + ul {
				overflow-y:auto;
			}*/
		
			.mc-navType_100 nav > ul > li{display:inline-block;height:100%;}
			.mc-navType_100 #menu-itemswrapper{margin-right:auto;/* Fixes overflow centering when too many nav items*/}
			.mc-navType_100 #menu-itemswrapper ul{background:transparent;}
				.mc-navType_100 nav > ul > li > ul{
					height:100%;		
					display: flex;
					align-items: center;
					
					padding:0;margin:0;
				}
					.mc-navType_100 #menu-itemswrapper li{
						display:flex;align-items: center;justify-content: center;
						height:100%;
					}
						.mc-navType_100 #menu-itemswrapper li:hover{
							background-color:var(--clr_accent2);
						}
					.mc-navType_100 #menu-itemswrapper a{
						height:100%;
						display:flex; flex-direction:column; justify-content:center; /* Vertically center */
					}
						.mc-navType_100 #menu-itemswrapper a:hover{
						}
					
			.mc-navType_100 #menu-spacer{display:none;margin-left:auto /* Fixes overflow centering when too many nav items*/}
		.mc-navType_100 nav .cart{
			order:3;
			height:100%;
			background-color:transparent;
			padding-bottom:0;
			box-shadow:none;
			padding:14px 5px;
			color:black;filter:none;
		}
	
	
	
		
	}


	/*  TO BE ADDED  */
	

/*
FOOTER
========
*/

/*
// Currenty footers are entered fully customized and thus in theme.css
footer{
	padding:var(--pad-vert);
	margin-top:40px;
	background-color:#fbb63e;
	overflow:hidden;
	flex-shrink: 0; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */

/*}
footer .mc-grid{align-items:center}
.footer-name{
	padding:var(--pad-all)
}
	footer h1{
		color:white;
		font-weight:500;
		font-size:2.2em;
		padding:0;margin:0;
	}
	footer h2{
		color:white;
		font-weight:400;
		font-size:1.6em;
	}
.share-buttons{list-style:none;padding:0;margin-top:10px;}
	.share-buttons li{display:inline;}
	.share-buttons li:before{content:none;}
	.share-buttons img{width:24px;}
	
footer .footer-links a{
	display:block;
	font-size:0.8em;
	color:white;
	text-decoration:none;
}
	.main-footer .footer-links a:hover{text-decoration:underline;} */

/*
NOTA
========
*/
.mc-nota{
	letter-spacing:0.1px;
	padding:8px 10px 8px 50px;
	margin:var(--pad-hor);
	color:white;
	border: 1px solid;	
	background-repeat: no-repeat;
	background-position: 10px center;	
}
.mc-nota ul{list-style:none;margin:0;padding:0;}
.mc-nota li{margin:0;padding:0;}
.mc-nota_error{background-color:#af2b2b;background-image: url('../images/error.png')}
.mc-nota_succes{background-color:#7eb62e;background-image: url('../images/succes.png')}
.mc-nota_validate{background-color:#f64b2f; background-image:url('../images/validate.png')}


/*
COOKIE POPUP
========
*/
#mc-cookiespopup-closeinput{display:none;}
#mc-cookiespopup-closeinput:checked + #mc-cookiespopup{display:none;}

#mc-cookiespopup{
position:fixed;
bottom:0px;left:0px;
max-width:400px;
max-width:min(100vw,400px);
padding:30px;
z-index:2;
pointer-events:none;
}
	#mc-cookiespopup-ctnr{
		position:relative;
		background-color:#fafafa;
		padding:20px;
		pointer-events:auto;
	}
	#mc-cookiespopup-ctnr h1{
		font-size:1.2em;
	}
		#mc-cookiespopup-ctnr h1:before{
			content:"";
			padding:0;
		}
	#mc-cookiespopup-ctnr p{
		font-size:0.7em;
	}
	#mc-cookiespopup-ctnr #mc-cookiespopup-close{
		position:absolute;
		top:20px;right:20px;
		cursor:pointer;
		font-size:1.3em;
	}
	#mc-cookiespopup-links{
		position:relative;
	}
		#mc-cookiespopup-link{
			display:inline-block;

			
		}
		#mc-cookiespopup-ctnr #mc-cookiespopup-ok{
			position: absolute;
			right: 0;
			margin: 0;
		}

	


/*
GRID & LAYOUTING
========
*/
.mc-padded{
	padding:var(--pad-vert-val) var(--pad-hor-val);
}
.mc-padded_hor{
	padding-left:var(--pad-hor-val);
	padding-right:var(--pad-hor-val);
}
.mc-padded_vert{
	padding-top:var(--pad-vert-val);
	padding-bottom:var(--pad-vert-val);
}
.mc-contentwrap > h1, .mc-contentwrap > h2, .mc-contentwrap > h3, .mc-contentwrap > h4, 
.mc-contentwrap > form, .mc-contentwrap > p, .mc-contentwrap > ul, .mc-contentwrap > code,
.mc-contentwrap > .mc-grid,.mc-contentwrap > .mc-grid-ss,.mc-contentwrap > .mc-grid-s,.mc-contentwrap > .mc-grid-m,
.mc-contentwrap > .mc-grid-l,.mc-contentwrap > .mc-grid-xl,.mc-contentwrap > .mc-ctnr{
	margin-left:var(--pad-hor-val);
	margin-right:var(--pad-hor-val);
}

.mc-grid{
	position:relative;
    display: grid;
    grid-gap: 0;
    grid-template-columns: repeat(12, 1fr);
    margin:0 auto;
    width: calc(100%-2*var(--pad-hor-val)); /* Test instead of 100%, as this causes scrollbar issues due to margins */
	max-width: 1000px;
}
	.mc-grid,.mc-fullwidth,.mc-grid > *, .mc-fullwidth > *{overflow:hidden;}
	/* due to content overflowing making a horizontal scroll bar; might cause other problems */

	.mc-grid_verticalcenter{
		align-items: center;
	}

	.mc-grid.mc-fullwidth, .mc-fullwidth{
		max-width:100%;
		margin:0;
	}
	.mc-ctnr{
		max-width:1000px;
		margin:0 auto;
		overflow:auto; /*Prevents margin collapse */
	}

	.mc-gs-1{grid-column: span 1;}
	.mc-gs-2{grid-column: span 2;}
	.mc-gs-3{grid-column: span 3;}
	.mc-gs-4{grid-column: span 4;}
	.mc-gs-5{grid-column: span 5;}
	.mc-gs-6{grid-column: span 6;}
	.mc-gs-7{grid-column: span 7;}
	.mc-gs-8{grid-column: span 8;}
	.mc-gs-9{grid-column: span 9;}
	.mc-gs-10{grid-column: span 10;}
	.mc-gs-11{grid-column: span 11;}
	.mc-gs-12{grid-column: span 12;}




	/* Larger than mobile ss*/
	@media (min-width: 400px) {
		.mc-grid-ss{	position:relative;
			display: grid;
			grid-gap: 0;
			grid-template-columns: repeat(12, 1fr);
			margin: 0 auto;
			width: 100%;
			max-width: 1000px;
			margin:0 auto;}
		.mc-gs-ss-1{grid-column: span 1;}
		.mc-gs-ss-2{grid-column: span 2;}
		.mc-gs-ss-3{grid-column: span 3;}
		.mc-gs-ss-4{grid-column: span 4;}
		.mc-gs-ss-5{grid-column: span 5;}
		.mc-gs-ss-6{grid-column: span 6;}
		.mc-gs-ss-7{grid-column: span 7;}
		.mc-gs-ss-8{grid-column: span 8;}
		.mc-gs-ss-9{grid-column: span 9;}
		.mc-gs-ss-10{grid-column: span 10;}
		.mc-gs-ss-11{grid-column: span 11;}
		.mc-gs-ss-12{grid-column: span 12;}
	}

	/* Larger than phablet (also point when grid becomes active) s*/
	@media (min-width: 550px) {
		.mc-grid-s{	position:relative;
			display: grid;
			grid-gap: 0;
			grid-template-columns: repeat(12, 1fr);
			margin: 0 auto;
			/*width: 100%; causes sidebar due to added margins in mc-contentwrap >*/
			max-width: 1000px;
			margin:0 auto;}
		.mc-gs-s-1{grid-column: span 1;}
		.mc-gs-s-2{grid-column: span 2;}
		.mc-gs-s-3{grid-column: span 3;}
		.mc-gs-s-4{grid-column: span 4;}
		.mc-gs-s-5{grid-column: span 5;}
		.mc-gs-s-6{grid-column: span 6;}
		.mc-gs-s-7{grid-column: span 7;}
		.mc-gs-s-8{grid-column: span 8;}
		.mc-gs-s-9{grid-column: span 9;}
		.mc-gs-s-10{grid-column: span 10;}
		.mc-gs-s-11{grid-column: span 11;}
		.mc-gs-s-12{grid-column: span 12;}
	}

	/* Larger than tablet m*/
	@media (min-width: 750px) {
		.mc-grid-m{	position:relative;
			display: grid;
			grid-gap: 0;
			grid-template-columns: repeat(12, 1fr);
			margin: 0 auto;
			/*width: 100%; causes sidebar due to added margins in mc-contentwrap >*/
			max-width: 1000px;
			margin:0 auto;}
		.mc-gs-m-1{grid-column: span 1;}
		.mc-gs-m-2{grid-column: span 2;}
		.mc-gs-m-3{grid-column: span 3;}
		.mc-gs-m-4{grid-column: span 4;}
		.mc-gs-m-5{grid-column: span 5;}
		.mc-gs-m-6{grid-column: span 6;}
		.mc-gs-m-7{grid-column: span 7;}
		.mc-gs-m-8{grid-column: span 8;}
		.mc-gs-m-9{grid-column: span 9;}
		.mc-gs-m-10{grid-column: span 10;}
		.mc-gs-m-11{grid-column: span 11;}
		.mc-gs-m-12{grid-column: span 12;}
	}

	/* Larger than desktop l*/
	@media (min-width: 1000px) {
		.mc-grid-l{	position:relative;
			display: grid;
			grid-gap: 0;
			grid-template-columns: repeat(12, 1fr);
			margin: 0 auto;
			/*width: 100%; causes sidebar due to added margins in mc-contentwrap >*/
			max-width: 1000px;
			margin:0 auto;}
		.mc-gs-l-1{grid-column: span 1;}
		.mc-gs-l-2{grid-column: span 2;}
		.mc-gs-l-3{grid-column: span 3;}
		.mc-gs-l-4{grid-column: span 4;}
		.mc-gs-l-5{grid-column: span 5;}
		.mc-gs-l-6{grid-column: span 6;}
		.mc-gs-l-7{grid-column: span 7;}
		.mc-gs-l-8{grid-column: span 8;}
		.mc-gs-l-9{grid-column: span 9;}
		.mc-gs-l-10{grid-column: span 10;}
		.mc-gs-l-11{grid-column: span 11;}
		.mc-gs-l-12{grid-column: span 12;}


		.mc-contentwrap > .mc-grid,.mc-contentwrap > .mc-grid-ss,.mc-contentwrap > .mc-grid-s,.mc-contentwrap > .mc-grid-m,
		.mc-contentwrap > .mc-grid-l,.mc-contentwrap > .mc-grid-xl,.mc-contentwrap > .mc-ctnr{
			width:100%;
			margin: 0 auto; /* Center the grid, overwrites minimal margins on smaller screens */
		}

	}

	/* Larger than Desktop HD x
	Currently has no function as contentwrap width is set on 1000 px
	l*/
	@media (min-width: 1200px) {
		.mc-grid-xl{	position:relative;
			display: grid;
			grid-gap: 0;
			grid-template-columns: repeat(12, 1fr);
			margin: 0 auto;
			/*width: 100%; causes sidebar due to added margins in mc-contentwrap >*/
			max-width: 1600px;
			margin:0 auto;}
		.mc-gs-xl-1{grid-column: span 1;}
		.mc-gs-xl-2{grid-column: span 2;}
		.mc-gs-xl-3{grid-column: span 3;}
		.mc-gs-xl-4{grid-column: span 4;}
		.mc-gs-xl-5{grid-column: span 5;}
		.mc-gs-xl-6{grid-column: span 6;}
		.mc-gs-xl-7{grid-column: span 7;}
		.mc-gs-xl-8{grid-column: span 8;}
		.mc-gs-xl-9{grid-column: span 9;}
		.mc-gs-xl-10{grid-column: span 10;}
		.mc-gs-xl-11{grid-column: span 11;}
		.mc-gs-xl-12{grid-column: span 12;}
	}

	.mc-grid-g10{ /* After media query, as to overwrite the default grid gap */
		grid-gap: 10px;
	}

/*
Widgets
========
*/

	/*
	Cookie consent
	========
	*/
	.w-cc-line{align-items:center;}
	.w-cc-cntr input[type=radio] {
		display:none;		
	}
	.w-cc-toggle{
		position:relative;
		height:25px;
	}
	.w-cc-toggle_background{
		position:absolute;top:0;right:10px;
		width:60px; height:25px;
		border-radius:20px;		
		background-color:#fafafa;
		z-index:1;
		border:1px solid grey;
		line-height:20px;
		transition:background-color 0.6s ease 0s;
	}
		.w-cc-toggle_ball{
			width:23px;height:23px;border-radius:15px;
			background-color:white;
			background: -webkit-linear-gradient(top, #fafafa 0%, lightGrey 100%);
			background:    -moz-linear-gradient(top, #fafafa 0%, lightGrey 100%);
			background:         linear-gradient(top, #fafafa 0%, lightGrey 100%);
			border:1px solid grey;
			position:absolute;
			top:1px;right:47px;
			transition:right 0.6s ease 0s;
			z-index:2;
		}
		.w-cc-toggle_background span{
			font-size:0.6em;
		}
		.w-cc-toggle_on{
			color:#fafafa;
			padding-left:8px;
		}
		.w-cc-toggle_off{
			color:lightgrey;
			padding-left:8px;
		}
		.w-cc-toggle_disabled,.w-cc-toggle_disabled+.w-cc-toggle_ball{cursor:not-allowed;}
	.w-cc-line label{
		cursor:pointer;
		width:60px;height:25px;
		position:absolute;top:0;right:20px;
		z-index:3;
	}
		.w-cc-line .w-cc-btn_enable:checked  ~ .w-cc-toggle_ball{right:10px;}
		.w-cc-line .w-cc-btn_enable:checked  ~ .w-cc-toggle_background{background-color:lightgrey;}
		
		.w-cc-line input[type=radio]+label{display:block;} /* Other way around, to show label which allows to enable the opposite */
		.w-cc-line input:checked+label{display:none;}
		
	#w-cc-save{
		text-align:right;
		margin:20px 80px 0 0;
	}

	/*
	Basic form
	========
	*/
	.w-bf-ctnr{padding:var(--pad-vert);}
	.w-bf-form input,.w-bf-comment label{
		display:block;
		width:100%;
	}
	.w-bf-comment button{
		display:block;

	}
	.w-bf-comment textarea{width:100%;height: 150px;}



	/*
	LargeHeader
	========
	*/
	.w_lh_wrap{
		
	}

		.w_lh_imgbox{
			padding:10px 15%;height:100%;
			text-align:center;
			display: flex; 
			align-items: center;
			flex-direction:column;

		}
			#w_lh_iconBig{margin-top:auto;display:none;width:100%;height:auto;max-width:300px;}
			#w_lh_iconSmall{width:100%;height:auto;}

			#w_lh_quick-search{position:relative;display:flex;margin-top:10px; height:40px;}
			#w_lh_quick-search input,#w_lh_quick-search button{
				border:none;
				background-color:transparent;
				border-bottom:1px solid var(--clr_accent2);
				font-size:1em;
				line-height:2em;
				text-align:right;
				
		
			}
			#w_lh_quick-search input{width:100%;order:1;border-radius:0;}
				#w_lh_quick-search input:focus{outline:none;}
				#w_lh_quick-search input:focus::placeholder{color:transparent;}
				#w_lh_quick-search input::placeholder{
					color:black;
				}
				#w_lh_quick-search input:focus + button{background-color:var(--clr_accent2);color:var(--clr_accent1)}
			#w_lh_quick-search button{
				cursor:pointer;order:2;
				width:40px;height:40px;
				border-radius:0;
				padding:0;
				color:black;
			}
				#w_lh_quick-search button::after{
					font-family:'Arial';
					content:'🔎︎';
					display:flex;justify-content:center;
				}
				#w_lh_quick-search button:hover::after{font-family:'Arial';content:'➤';font-size:1em;}
		
		.w_lh_textbox{
		}
			.w_lh_textbox > *{
				margin:0;
			}
	


	/*
	searchBox
	========
	*/
	.w_sb_form--simple{/* See LH */}

	.w_sb_form--advanced{
		text-align:right;
	}
		.w_sb_form--advanced label{
			display:block;
		}

	@media (min-width: 550px) {

		.w_lh_cntr{
			min-height:100vh; */ /*TBD*/
		}
		.w_lh_imgbox{padding:40px 15%;position:relative;}
			#w_lh_iconBig{display:block;}
			#w_lh_iconSmall{display:none;}

		.w_lh_textbox{
			padding:80px 0px 50px;
			display:flex;flex-direction:column;
			justify-content:center;
		}
	}
	@media (min-width: 750px) {
		.w_lh_imgbox{padding:40px 20%;}
	}

	/*
	Categories-list
	========
	*/
	.w-clst-wrap a{
		text-decoration:none;
		color:inherit;
	}
	.w-clst-wrap li a{
		display:block;
		padding:4px;		
	}
		.w-clst-wrap li a:hover{
			background-color:darkgrey;
			color:white;
		}


	/*
	Productslist
	========
	*/
	.w-plst-lst{margin:0;padding:0; list-style-type:none;}

	.w-plst-g{position:relative;margin-top:20px;min-height:250px;}
	.w-plst-ge_first{display:none;}
		.w-plst-ge_first form{display:none;}
	.w-plst-ge_second{

	}
		.w-plst-ge_second h2{
			margin:0;
			margin-left:140px;padding-left:10px;
		}
		.w-plst-ge_second a{color:black;}
			
	.w-plst-ge_data{
		margin-left:140px;padding-left:10px;	
	}
		.w-plst-info-price{display:none}

	.w-plst-content{
	}
		.w-plst-spacer{
			width:140px;height:140px;
			float:left;
			margin-right:10px;
		}
	
		.w-plst-img-ctnr{
			position:absolute;top:0;left:10px;overflow:hidden;
		}

		
			.w-plst-img-ctnr object, .w-plst-img-ctnr img{padding:0;max-width:130px;min-height:60px;min-width:80px; }
			.w-plst-img-ctnr a{	display:block;}
			.w-plst-content-price{
				text-align:center;
				padding:10px;
			}


	.w_plst_pagi{padding:6px var(--pad-hor-val);border-top:1px solid black;border-bottom:1px solid black;}
	.w_plst_pagi_pages{}
	.w_plst_pagi_limit{text-align:center;}
	.w_plst_pagi_sort{text-align:right;}	
	.w_plst_pagi_pages a{padding:2px 4px;margin:0 1px;}
	.w_plst_pagi_limit a, .w_plst_pagi_sort a{padding:2px 4px;margin:0 2px;}
	.w_plst_pagi a:hover,.w_plst_pagi_current{text-decoration:none;}

	@media screen and (min-width: 550px){
		.w-plst-spacer{	height:160px;}		
	}
	
	@media screen and (max-width : 750px){
		.w-plst-lst .w-plst-g:nth-child(even){
			background-color:#efefef;
			padding-top:10px; padding-bottom:10px;
		}
		.w-plst-lst .w-plst-g:nth-child(even) .w-plst-img-ctnr{
			top:10px;
		}
	}
	@media screen and (min-width : 750px){
		.w-plst-g{
			position:relative;
			display:grid;
			grid-template-columns: 140px auto 200px;
			grid-template-rows: auto 1fr;
		}
		.w-plst-ge_first{
			display:block;
		}
		.w-plst-ge_second{
			align-self:start;
		}
			.w-plst-ge_second h2{margin-left:0;}

			
			.w-plst-info-price{display:block;}
			.w-plst-content-price{display:none;}
			
		.w-plst-content{
			grid-row: 2/ 3;
			grid-column: 1 / span 2;
		}
			.w-plst-spacer{
				height:180px;
			}
			
	}


	/*
	Productslist & Product
	========
	*/
	.w-plst-unavail,.w-p-unavail{
		letter-spacing: 0.1px;
		border: 1px solid;
		padding: 8px var(--pad-hor-val);
		margin-bottom: 10px;
		overflow: hidden;
		background-color: LightGray;
		margin:10px;
	}

	.w-plst-btns_add,.w-p-btns_add{
		display:block;
		position:relative;
		width:130px;
		padding: 7px 2px 7px 10px;
		font-size:0.8rem;
		background:linear-gradient(rgb(252, 164, 0) 0%, rgb(226, 136, 0) 100%);
		color:white;
		font-weight:normal;
		border:none;
		margin-top:5px;
		text-transform:none;
		text-align:left;
	}
		.w-plst-btns_add span,.w-p-btns_add span{
			font-size:1.8em;
			display:block;
			position:absolute;right:5px;top:-4px;
		}
	.w-plst-btns_question,.w-plst-btns_unavailable,
	.w-p-btns_question,.w-p-btns_unavailable{
		border-radius:4px;
		display: block;
		border:none; 
		color:white;
		box-sizing:border-box;
		font-size:0.8rem;
		padding: 7px 2px 7px 10px;
		text-align:left;
		text-decoration:none;
		margin-top:5px;
		max-width:130px;
	}
		.w-plst-btns_question,.w-p-btns_question{
			background:linear-gradient(to bottom, #8eb92a 1%, #72aa00 100%);
		}
			.w-plst-btns_question span, .w-plst-btns_unavailable span,
			.w-p-btns_question span, .w-p-btns_unavailable span{
				margin: -2px 3px 0;
				display: block;
				float: right;
				height: 20px;
				width: 20px;
				background: url(../images/ask_question.png) no-repeat;
			}
		.w-plst-btns_unavailable,.w-p-btns_unavailable{
			background:linear-gradient(to bottom, #b2b2b2 0%, #9b9b9b 100%);
		}

	.w-plst-ge_data > div,.w-p-ge_data > div{display:inline;}

	@media screen and (min-width : 750px){
		.w-plst-ge_data,.w-p-ge_data{
			padding:8px;
			margin-left:0;
			grid-row: 1 / 3;
			grid-column: 3 / 4;
			display:grid;
			grid-template-columns:1fr 1fr;
			grid-gap: 5px;
			align-self: start;
		}
			.w-plst-ge_data> div,.w-p-ge_data> div{
				display:block;
			}
			.w-plst-ge_2span,.w-p-ge_2span{			
				grid-column: 1 / 3;
			}
			.w-plst-ge_data span,.w-p-ge_data span{
				display:block;
				font-weight:bold;
			}

	}


	/*
	Product
	========
	*/
	.w-p-hide{display:none;}
	.w-p-ge_data{padding-left: 10px;}
	.w-p-btns > button, .w-p-btns > a{display:inline-block;}
	.w-p-ge_title h2{margin-bottom:5px;}
	.w-p-img{margin:10px;}


	@media screen and (min-width : 750px){
		.w-p-grid{
			display:grid;
			grid-template-columns:1fr 200px;
			grid-template-rows: auto 1fr;
			grid-template-areas: 
			"p_title p_empty"
			"p_content p_data"; 
		}
			.w-p-ge_title{
				grid-area: p_title;
			}
			.w-p-ge_data{
				grid-area: p_data;
			}
			.w-p-ge_content{
				grid-area: p_content;
			}

	}


	/*
	Shopping cart
	========
	*/
	.w-sc-btn_back{min-height:40px;}
		.w-sc-btn_back a{
			padding: 2px 5px;
			float: right;
			margin-bottom: 15px;
		}

	.w-sc-overview{
		grid-template-columns: 1fr 190px; /* Overwrites default 12 columns */
		grid-gap:20px;
	}
	.w-sc-product {
		border-bottom: 1px solid black;
		padding: 10px 0;
	}
		.w-sc-product img{
			float: left;
			max-width: 80px;
			margin-right: 20px;
			border: 2px solid black;
		}
		.w-sc-product-title{
			font-weight: bold;
			text-decoration: none;
			display: block;
			margin-top: 5px;
		}
		.w-sc-product-remove{
			padding: 2px 5px;
			margin: 0 0 10px 20px;
			text-decoration: none;
			float: right;
		}
		.w-sc-product-price{
			font-weight: bold;
			position: absolute;
			right: 5px;
			bottom: 10px;
		}

	.w-sc-tocheckout{
		padding: 20px;
		height: fit-content;
	}
		.w-sc-tocheckout h1, .w-sc-tocheckout p{padding-left:0;padding-right:0;margin-left:0;}
		.w-sc-tocheckout p{font-size:0.9rem;}
		.w-sc-tocheckout-text{
			text-align: center;
			margin-right: 15px;
			border-bottom: 1px dashed black;
			border-top: 1px dashed black;
		}
		.w-sc-tocheckout-price{ font-weight: bold;margin-top: 10px;}
		.w-sc-tocheckout-btn{
			position: relative;
			padding: 8px 15px;
			display: inline-block;;
			font-size: 1.2rem;
			text-decoration: none;
			margin: 10px 15px;
		}
			.w-sc-tocheckout-btn:hover{}
			.w-sc-tocheckout-btninfo{display:none;}			
				.w-sc-tocheckout-btn:hover .w-sc-tocheckout-btninfo{
					text-align:left;
					width:300px;
					height:70px;
					display:block;
					position:absolute;
					top:-20px;left:-340px;
					padding:5px 10px;
					font-size:0.8em;
				}
				.w-sc-tocheckout-btninfo:after {
					border-left:15px solid black;
					border-top:20px solid transparent;
					border-bottom:20px solid transparent;
					width:0;
					height:0;
					content:"";
					display:block;
					position:absolute;
					top:20px;
					right:-14px;
				}

	.w-sc_order-wrap{}
		.w-sc_order-wrap{max-width:550px;margin:0 auto;}
			.w-sc_order-wrap label{
				display:flex;width:100%;min-height:30px;line-height:25px;
				flex-wrap: wrap;
			}
				.w-sc_order-wrap label span{width:140px;}
				.w-sc_order-wrap input[type="text"],
				.w-sc_order-wrap input[type="email"],
				.w-sc_order-wrap textarea,
				.w-sc_order-wrap select{
					flex:1 1 200px;height:30px;padding:0 5px;
				}
					.w-sc_order-wrap  input:focus{border:1px solid black;}
				.w-sc_order-wrap textarea{height:60px;font-size:0.95em;}
				
				.w-sc_order-wrap .reqtest{display:none;}
			.w-sc_order-infotext{ font-size:0.8rem; margin-left:10px;}