:root {
  --accent-color: #0892D0;
  --darken-accent-color: #0781b7;
  --lighten-accent-color: #a8e2fc;
  --more-lighten-accent-color: #ceeefd;
  --even-more-lighten-accent-color: #e5f7ff;
  /* --darken-lighten-accent-color: #77d2fa; */
  --darken-lighten-accent-color: #9ddffb;
  
  --contrast-color: #e94e09;
  --darken-contrast-color: #d04608; /* also fast filter color */
  
  --black-color: #222222;
  --real-black-color: #000000;
  
  --white-color: #FFFFFF;
  --darken-white-color: #F2F2F2;
  --darken-lighten-white-color: #ededed;
  --more-darken-white-color: #d9d9d9;
  /*--gray-color: #777777;
   experiment for higher contrast:*/
  --gray-color: rgb(155,154,151);
  --transparent-white-color: #ffffff88;
  
  --shadow-color: #BBBBBB;
  --paleaccent-color: #3298c8;
  
  --grad1-color: #d9d9d9;
  --grad2-color: #a0a0a0;
  --grad3-color: #6f6f6f;
  --grad4-color: #474747;
  --grad5-color: #282828;
  --grad6-color: #232323;
  
  scroll-behavior: smooth;
}

html {
	background: #333333;
}

body {
	background: var(--darken-white-color);
	width: 100%;
	color: var(--black-color);
    overflow-x: hidden;
}

app-content {
    display: none;
} /* anti-letyshops */

accent {
	color: var(--accent-color);
}

.accent {
	color: var(--accent-color);
}

font {
	font-family: 'Yanone Kaffeesatz', arial-narrower, sans-serif;
	font-size: 1.5em;
}

.dark {
	--white-color: #333333;
	--darken-white-color: #222222;
	--more-darken-white-color: #4d4d4d;
	--darken-lighten-white-color: #4d4d4d;
	--transparent-white-color: #0000008f;
	
	--black-color: #d1f1ff;
	--real-black-color: #FFFFFF;
	
	--lighten-accent-color: #294f60;
	--darken-accent-color: #6ad0fb;
	--darken-lighten-accent-color: #0070a3;
	--more-lighten-accent-color: #0c4c69;
	--even-more-lighten-accent-color: #243942;
	
	--shadow-color: #161616;	
	--paleaccent-color: #246d8f;
	
	--grad1-color: #4b4b4b;
	--grad2-color: #6f6f6f;
	--grad3-color: #8d8d8d;
	--grad4-color: #a5a5a5;
	--grad5-color: #b7b7b7;
	--grad6-color: #bababa;
}

.whatsapp {
	--accent-color: #25D366;
}

#header {
	background: var(--white-color);
}
 
#call {
	font-family: 'Manrope';
	margin-left: 0.1em;
	box-shadow: none;
}


.call_icon {
	display: inline;
}

.call_icon svg {
	margin-bottom: -7px;
}

#call.link {
	box-shadow:
		inset 0em -0.25em 0em -0.1em var(--accent-color);
	transition-duration: 0.2s;
}


/* top navigation menu bar */
#menu_bar {
	background: var(--white-color);
	box-shadow: 0px 0px 10px -4px rgba(0,0,0,0.3);
}

#menu_bar a {
    	transition-duration: 0s;
    	box-shadow: none;
   	font-family: 'Yanone Kaffeesatz', arial-narrower, sans-serif;
    	color: var(--black-color);
}


#menu_bar a:hover {
	text-decoration: none;
	box-shadow: 0px -4px 0px -2px var(--accent-color);
	transition-duration: 0s;
	z-index: 1;
}

#menu_bar a.selected {
     	color: var(--black-color);
}

#menu_bar a.current {
    	box-shadow: inset 0px -0.4em 0px -0.21em var(--accent-color);
}

#menu_bar a.current:hover {
    	box-shadow: inset 0px -8px 0px -3px var(--accent-color), 0px -4px 0px -2px var(--accent-color) !important;
}




.sidebar {
    	box-sizing: border-box;
	text-align: center;
	font-size: 1.7em;
	margin-bottom: 1em;
    	background: var(--white-color);
	margin: 0px 2px;
    	padding: 1px;
}

.sidebar.is-affixed {
	background: none;
	margin: 0;
	padding: 0;
}

#cart_sidebar {
	position: sticky;
    top: 2em;
}


#default_sidebar {
	width: 240px;
}

#filter_sidebar {
	width: 274px;
}
 	
.sidebar li {
	font-size: 100%;
}

.sidebarinlay{
	padding: 5px;
	margin-bottom: 0px;
}


/* sidebar products list */

#product_list {
    margin: 30px 0;
}

.product_block {
	margin: 20px 0;
	text-align: center;
}

.product_column {
	display: inline-block;
	width: 48%;
	vertical-align: top;
	text-align: center;
}

.check_patch {
	text-align: left;
}

.category_name {
	font-weight: 400;
	color: var(--accent-color) !important;
	font-family: 'Yanone Kaffeesatz', arial-narrower, sans-serif;
	font-size: 1.2em;
	cursor: pointer;
	box-shadow: none;
}

.category_name a {
	box-shadow: none;
}


.sidebar_header { /* inherit? */
	font-weight: 500;
	color: var(--real-black-color) !important;
	font-family: 'Yanone Kaffeesatz', arial-narrower, sans-serif;
	font-size: 1.2em;
	text-align: center;
	margin: 5px 0 10px 0;
}

.products {
	margin: 7px 10px 10px 10px !important;
	font-family: 'Yanone Kaffeesatz', arial-narrower, sans-serif;
	color: var(--black-color) !important;
	font-weight: 400;
	/*margin: 0 0 1.4em 0;*/
	line-height: 1.3em;
	cursor: pointer;
}

.products ul {
	margin: 0;
	padding-left: 0;
}

.products li {
	padding-left: 0 !important;
	background-image: none !important;
}

.products a {
	transition-duration: 0s;
	box-shadow: none;
}

.products a:hover {
	text-decoration: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: var(--accent-color);
    color: var(--black-color);
	transition-duration: 0s;
}

a.category_name:hover {
	text-decoration: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: var(--accent-color);
    color: var(--black-color) !important;
}

.fast_filter {
	color: var(--darken-contrast-color);
}

a.fast_filter:hover {
	color: var(--darken-contrast-color);
	font-weight: bold;
	text-decoration-color: var(--darken-contrast-color);
}

.sidebar_button {
	padding: 0.5em 0.7em;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 1em;
	font-family: 'Yanone Kaffeesatz', arial-narrower, sans-serif;
	font-weight: 400;
	transition-duration: 0.3s;
	cursor: pointer;
}

.basic_button {
	color: var(--real-black-color);
	background-color: var(--white-color);
	box-shadow: none !important;
}

/*
.basic_button:hover {
	background-color: var(--paleaccent-color);
	color: var(--white-color);
}*/

.color_button {
	background-color: var(--paleaccent-color);
	color: white !important;	/* unchanged */
}

/*.color_button:hover {
	color: #000 !important;
}*/

.color_button svg {
    --black-color: #FFF;
	--bg-color: var(--paleaccent-color);
}

#mainbar .two-buttons-wrapper .button {
    width: 45%;
    box-sizing: border-box;
    display: inline-block;
	margin: 0.2em 2%;
}

.two-buttons-wrapper {
    width: 94%;
    margin: 0.8em auto 0em auto;
}



/*#mainbar .basic_button:hover svg {
    --black-color: #FFF;
}*/

.spoiler {
	padding: 14px 20px 12px 20px;
    width: 100%;
	font-size: 2.3em;
	display: none;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.spoiler svg {
	width: 100%;
}

.spoiler_icon {
	width: 1em;
	margin-right: 3px;
}

.filter_icon {
	margin-bottom: -4px;
}

.list_icon {
	margin-bottom: -3px;
}

.arrow_down_icon {
	width: 1em;
	margin: 0.25em 0.25em 0 0;
	float: right;
}

.spoiler_pressed {
	color: black;
}

.spoiler_icon {
	transition-duration: 0.3s;
}

.arrow_down_icon {
	transition-duration: 0.3s;
}

.spoiler_pressed .arrow_down_icon {
	filter: invert(100%);
	-webkit-filter: invert(100%);
	margin: 0.2em 0.25em 0 0;
	transform: scale(1, -1);
	transition-duration: 0.3s;
}

.spoiler_pressed .spoiler_icon {
	filter: invert(100%);
	-webkit-filter: invert(100%);
	transition-duration: 0.3s;
}

#filter_active {
    position: absolute;
    /* top: 15%; */
    right: -66%;
    font-size: 0.7em;
    bottom: 0.21em;
    text-shadow: 
		1px 0px 1.5px hsla(199, 59%, 12%, 1),
		-1px 0px 1.5px hsla(199, 59%, 12%, 1),
		0px 1px 1.5px hsla(199, 59%, 12%, 1),
		0px -1px 1.5px hsla(199, 59%, 12%, 1);
		
    color: var(--contrast-color);
	display: none;
}

/* checkboxes */
.chklabel {
  display: inline-block;
  position: relative;
  padding-left: 0px;
  cursor: pointer;
  margin-right: 6px;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
	.chklabel {
		margin-right: 4px !important;
	}
}

/* Hide the browser's default checkbox */
.chklabel input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: relative;
  height: 16px;
  width: 16px;
  background-color: var(--white-color);
  display: inline-block;
  vertical-align: text-top;
  margin-right: 5px;
  border: var(--gray-color) solid 2px;
  border-radius: 3px;
  transition-duration: 0.2s;
}

/* On mouse-over, add a grey background color */
.chklabel:hover input ~ .checkmark {
  filter: brightness(80%);
  transition-duration: 0.3s;
}

.chklabel:hover a {
  text-decoration: underline;
  text-decoration-color: var(--accent-color);
  text-decoration-thickness: 2px;
  color: var(--black-color);
}

.chklabel a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--accent-color);
  color: var(--black-color);
}

/* When the checkbox is checked, add a blue background */
.chklabel input:checked ~ .checkmark {
  background-color: var(--accent-color);
  border-color: var(--black-color);
  transition-duration: 0.3s;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.chklabel input:checked ~ .checkmark:after {
  display: block;
  transition-duration: 0.3s;
}

/* Style the checkmark/indicator */
.chklabel .checkmark:after {
  left: 5px;
  top: 2px;
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  transition-duration: 0.3s;
}

#header .checkmark {	
	width: 2.8em;	
    height: 2.2em;	
    font-size: 1.5em;	
    line-height: 0.8em;	
    font-family: 'Yanone Kaffeesatz', arial-narrower, sans-serif;	
    padding: 0em;	
    padding-top: 0.6em;	
}	
#header .checkmark:after {	
	display: none !important;	
}


#toggle_cart {	
    display: block;	
    position: absolute;	
    top: 70px;	
    left: 180px;	
}	
.add_to_cart {	
	box-shadow: none;	
	vertical-align: middle;	
	margin-left: 15px;	
	position: relative;	
}	
.add_to_cart > img {	
	width: 1.6em;	
}	

.add_to_cart svg {
    width: 1.5em;
    height: 1.5em;
	--icon-color: var(--black-color);
}

.add_to_cart:hover svg {
    --icon-color: var(--darken-accent-color);
}

.cart-icon .a {
	fill:none;
	stroke: var(--icon-color);
	stroke-miterlimit:10;
	stroke-width:5px;
}

.cart-icon .b{ fill:var(--icon-color); }

.add_to_cart .b.plus {
    transition-duration: 0.4s;
    transition-property: transform;
    transform-origin: 58% 23%;
}

.add_to_cart:hover .b.plus {
    transform: rotate(180deg);
}
 
#cart_empty {	
	text-align: center;	
}	
#cart_container, #final_cart {	
	margin-top: 1em;	
	font-family: 'Yanone Kaffeesatz', arial-narrower, sans-serif;	
	font-weight: 350;	
	font-size: 0.75em;	
	max-height: 45vh;	
	overflow-y: scroll;	
	overflow-x: hidden;	
	padding: 10px 0 20px 0;	
}	

.narrow_screen_cart #cart_container {
    max-height: 35vh; 
}

.scroll-shadow:nth-child(1) {	
	box-shadow: 0px 0px 1em 20px var(--white-color);	
	position: absolute;	
	top: 0px;	
	width: 100%;	
	z-index: 5;	
}	
.scroll-shadow:nth-child(3) {	
	box-shadow: 0px 0px 1em 20px var(--white-color);	
	position: absolute;	
	bottom: 0px;	
	width: 100%;	
}	
.cart_entry {	
	margin: 0.2em 0;	
	padding: 0.3em 0;	
	box-shadow: none;	
    display: block;	
    cursor: auto;	
}	
.cart_entry:hover {	
	color: inherit;	
}	
.cart_entry:hover {	
    background: var(--more-lighten-accent-color);	
}	
.cart_entry > div {	
	display: inline-block;	
	vertical-align: middle;	
	box-sizing: border-box;	
}	
.entry_name {	
	width: 40%;	
	padding: 0 0.3em;	
	display: inline-block;	
	box-shadow: none;	
	vertical-align: middle;	
}	
.entry_price {	
	width: 23%;	
}	
.cart_units {	
	font-size: 0.8em;	
}	
.entry_quantity {	
	width: 20%;	
}	
/* width */	
#cart_container::-webkit-scrollbar, #final_cart::-webkit-scrollbar {	
  width: 0;	
}	
.rm_entry {	
    position: relative;	
	top: -2px;	
    width: 5%;	
    cursor: pointer;	
	height: 15px;	
    margin-left: 0.4em;	
}	
.rm_entry > div {	
    background: #cccccc;	
	-webkit-transform: rotate(45deg);	
    -ms-transform: rotate(45deg);	
    transform: rotate(45deg);	
	position: absolute;	
}	
.rm_entry div:nth-child(1) {	
	width: 3px;	
    height: 15px;	
    top: -1px;	
    left: 5px;	
}	
.rm_entry div:nth-child(2) {	
    width: 15px;	
    height: 3px;	
    top: 5px;	
	left: -1px;	
}	
.rm_entry:hover > div {	
    background: #777;	
}	
.arr_box:hover {	
    	
}	
.arr_box:nth-child(1) {	
    height: 0.65em;	
	width: 0.6em;	
	margin-top: -0.1em;	
	box-sizing: border-box;	
	padding: 5px 4px 0px 2px;	
}	
.arr_box:nth-child(2) {	
    height: 0.6em;	
	width: 0.6em;	
	padding-top: 2px;	
	box-sizing: border-box;	
	padding: 3px 0px 2px 2px;	
}	
.arr_box > div {	
	width: 0;	
	height: 0;	
	border-style: solid;	
}	
.arr_box:nth-child(1) > div {	
	border-width: 0 4px 5px 4px;	
	border-color: transparent transparent #999 transparent;	
}	
.arr_box:nth-child(2) > div {	
	margin-top: 0px;	
	border-width: 5px 4px 0 4px;	
	border-color: #999 transparent transparent transparent;	
}	
.textfield > input {	
	width: 1.9em;	
    border: none;	
    background: inherit;	
    font: inherit;	
    text-align: right;	
    font-size: 0.8em;	
    margin-left: -0.4em;	
    margin-right: -0.1em;	
    padding-left: 0.2em;	
	color: var(--black-color);
}	
.arrow_container {	
	display: inline-block;	
	vertical-align: text-top;	
	margin: 0 -0.3em 0 0.1em;	
}	
input:focus {	
    outline: none;	
}	
.cart_entry:hover .textfield_header {	
    background: var(--more-lighten-accent-color) !important;	
}	
.textfield_header {	
    display: inline-block;	
    position: absolute;	
    font-size: 0.6em;	
    background: var(--white-color);	
    /* vertical-align: text-top; */	
    margin-left: -0.1em;	
    /* margin-right: 0.1em; */	
    padding: 0 2px;	
    top: -8px;	
    line-height: 1em;	
    left: 10px;	
}	
.arr_box:nth-child(1):hover > div {	
    border-color: transparent transparent #555 transparent !important;	
}	
.arr_box:nth-child(2):hover > div {	
    border-color: #555 transparent transparent transparent !important;	
}	
input::-webkit-outer-spin-button,	
input::-webkit-inner-spin-button {	
    -webkit-appearance: none;	
    margin: 0;	
}	
.entry_sum {	
    display: inline-block;	
    float: right;	
    margin-right: 1em;	
    font-size: 1.3em;	
    text-align: right;	
}	
.entry_attr {	
    display: inline-block;	
    float: left;	
    margin-left: 0.3em;	
    font-family: 'Open Sans', sans-serif;	
    font-size: 0.7em;	
    color: var(--gray-color);	
    width: 49%;	
}	
.underline {	
    width: 100%;	
    margin-top: 0.3em;	
}	
.entry_sum:before {	
    width: 3.5em;	
    height: 0.15em;	
    background: var(--accent-color);	
    display: block;	
    content: '';	
    margin-bottom: 0.15em;	
}	
#cart_total {	
	display: none;	
}	
.total_header {	
	font-family: 'Yanone Kaffeesatz', arial-narrower, sans-serif;	
	font-size: 1.3em;	
}	
.total_num {	
    font-family: 'Yanone Kaffeesatz', arial-narrower, sans-serif;	
    font-size: 1.4em;	
    margin-bottom: 0.3em;	
}	
.total_num:before {	
	width: 2em;	
	height: 0.13em;	
	content: ' ';	
	background: var(--accent-color);	
	display: block;	
	text-align: center;	
	margin: 0em auto 0.2em auto;	
}	

#cart_sidebar.narrow_screen_cart {	
    position: absolute;
    border-radius: 15px;
    border: 5px solid var(--black-color);
    display: none;
    z-index: 1;
    right: 1.5em;
    left: auto;
    top: 0;
    transform: translateY(-103%);
    max-height: fit-content;
    width: 450px !important;
    font-size: 1em;
}	


#mobile_bottom_sticker {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    font-size: 1.8em;
	transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55);
	transform: translateY(125px);
	z-index: 10;
	z-index: 100;
}

#mobile_bottom_sticker #mobile_bottom_cart {
    right: -1.7em;
	bottom: -6.6em;
    width: 11em;
    padding-right: 1.3em;
	
}

#mobile_bottom_cart .button {
    padding: 0.4em 0.3em;
    box-sizing: border-box;
    width: 7.3em;
}

#mobile_up_button_container {
    left: -1.7em;
    width: 4em;
    padding-left: 1.5em;
}

#up_button {
	padding: 0.2em;
	width: 1.5em;
	height: 1.5em;
}

#up_button svg {
    width: 1.3em;
    height: 1.3em;
}

#mobile_bottom_sticker > * {
    transition: all 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    bottom: -5em;
    position: absolute;
    bottom: -1.6em;
    height: 5em;
    background: var(--white-color);
    border: 5px solid var(--black-color);
    border-radius: 30px;
}

#mobile_bottom_sticker > * > a {
    font-size: 1.2em;
    margin-top: 0.5em;
}













p {
     margin: 1em 0;
}

h1 {
	text-transform: uppercase;
	font-family: 'Manrope', sans-serif;
	color: white;
	letter-spacing: 0.09em;
	max-width: 86%;
	text-align: center;
}

h1 > span {
	background: var(--paleaccent-color);
    	padding: 0.5em 1.5em 0.4em 1.5em;
    	box-shadow: 0 0 9px -5px var(--accent-color);
    	transform: skew(-30deg);
    	width: fit-content;
    	margin: auto;
	display: block;
}

h1 > span > span {
	transform: skew(30deg);
	display: block;
}


@font-face {
    font-family: arial-narrower;
    src: local(Arial Narrow);
    size-adjust: 80%
    font-weight: 800;
}

h2 {
    font-family: 	'Yanone Kaffeesatz', arial-narrower, sans-serif;
    letter-spacing: 0;
    text-align:		center;
    color: 			var(--accent-color);
    padding: 		0.2em 0;
    margin: 		1em 0 0.1em 0;
}

h3 {
    font-size: 		1.1em;
    font-family: 	'Yanone Kaffeesatz', arial-narrower, sans-serif;
    letter-spacing: 0;
    color: 			var(--black-color);
    padding: 		0;
    margin: 		0 0 0.1em 0;
	font-weight: 400;
	text-align: left;
} 


a:link, a:visited, a:active { 
     color: var(--black-color);
     text-decoration: none;
}

a {
	cursor: pointer;
	transition-duration: 0.3s;
	box-shadow: inset 0 -0.15em 0px -0.5px var(--accent-color);
	/*box-shadow:
		inset 0 -0.15em var(--accent-color);*/
	display: inline;
}

a:hover { 
    color: var(--accent-color); 
    text-decoration: none;
	box-shadow: none;
	transition-duration: 0.3s;
}


li {
    background-repeat: no-repeat;
    background-position: 0 .5em;
    list-style: none;
    font-size: 100%;
}

#content {
	width: 100%;
	text-align: left;
}

/*
.side_space {
	vertical-align: top;
	box-sizing: border-box;
}
*/

#side_left {
	justify-self: right;
}

#mainbar {
    /*margin: 0 -3px;*/
    /*text-align: start;*/
    /*display: inline-block;*/
    /*vertical-align: top;*/
	font-family: 'Nunito', sans-serif;
    /*font-weight: 400;*/
	background: var(--white-color);
	padding-bottom: 3em;
	justify-self: center;
	z-index: 1;
    	-webkit-clip-path: inset(0);
   	clip-path: inset(0);
    	clip: rect(0px, auto, auto, 0px);
}







hint {
	color: var(--gray-color);
	font-size: 0.6em;
}

#mainbar a:hover {
	text-decoration: none;
	box-shadow: none;
}

a.gray, #breadcrumbs a {
    color: var(--gray-color);
    text-decoration: underline;
    box-shadow: none;
}

a.gray:hover, #breadcrumbs a:hover {
    color: var(--accent-color);
    text-decoration: none;
}

#mainbar li {
	list-style: disc;
}

.button {
    /*-webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;*/
    text-decoration: none;
	border: 3px solid var(--black-color);
    border-radius: 7px;
	overflow: clip;
    overflow-clip-margin: 0.6px;
    position: relative;
	-webkit-tap-highlight-color: transparent;
}

#mainbar .button:hover {
	color: inherit;
}

.button::before, .button::after {
    position: absolute;
    content: '';
    background: var(--accent-color);
    width: 104%;
    height: 20%;
	-webkit-transform: rotate(-1.5deg);
    transform: rotate(-1.5deg);
    transition-duration: 0.2s;
}

.button::before {
    top: -13%;
    left: -104%;
}

.button::after {
    bottom: -14%;
    right: -104%;
}

.button:hover::before {
    -webkit-transform: translateX(99%) rotate(-1.5deg);
	transform: translateX(99%) rotate(-1.5deg);
}

.button:hover::after {
    -webkit-transform: translateX(-99%) rotate(-1.5deg);
	transform: translateX(-99%) rotate(-1.5deg);
}

.color_button::before, .color_button::after {
	background: #FFF;
}

#mainbar .button svg {
    height: 1.2em;
    width: 1.2em;
    margin-right: 0.3em;
	display: inline-block;
    vertical-align: sub;
    /*margin-bottom: 5px;*/
}

#mainbar .button div {
	display: inline-block;
	vertical-align: middle;
}

#download_price_block {
	width: 100%;
	overflow: hidden;
	transition-duration: 0.5s;
	margin-top: 1.5em;
	margin-top: 1.2em;
    padding: 0 0.1em;
}

/*#download_price_block .button {
	display: inline-block;
    width: 38%;
    padding: 11px 20px 10px 20px;
    box-shadow: none;

}*/

#pricelists {
	clear: both;
	font-family: 'Open Sans', sans-serif;
}

#pricelists > div {
	max-height: 150em;
    transition-duration: 0.7s;
}

table {
	border-collapse: collapse;
	font-size: 0.7em;
	margin-bottom: 10px;
	width: 85%;
	min-width: 580px;
    margin: 0 auto;
}

table tr {
	height: 2em;
	vertical-align: middle;
}

table th {
	background: var(--paleaccent-color);
    color: white;
	padding: 0.5em 0;
	text-align: center;
}

table tr th:nth-child(n+2) {
    padding-right: 35px;
}

table tr:nth-child(odd) {
	background: var(--darken-lighten-white-color);
}

table tr td:nth-child(1) {
	width: 450px;
	padding-left: 1.5em;
	padding-right: 1em;
}

table tr td:nth-child(n+2) {
	width: 130px;
    text-align: right;
    padding-right: 45px;
	white-space: nowrap;
	position: relative;
}

table tr:hover {
	font-weight: 600;
}

table tr:nth-child(even):hover {
	background: var(--more-lighten-accent-color);
}

table tr:nth-child(odd):hover {
	background: var(--darken-lighten-accent-color);
}



.units {
	font-size: 0.7em;
	/* color: var(--gray-color); better contrast*/
	color: #6b6966;
}

.units::before {
	content: "/";
}

.attr {
	font-size: 0.7em;
	/* color: var(--gray-color); better contrast*/
	color: #6b6966;
	display: inline-block;
}

.attr::before {
	content: " ";
}

.prod_name {
    margin-right: 0.2em;
}

.add_quantity_popup {	
	position: absolute;	
    top: -8em;	
    right: 1em;	
    text-align: center;	
    z-index: 10;	
    background: var(--more-lighten-accent-color);	
    padding: 0.7em;	
    box-shadow: 0 0 2px 1px var(--shadow-color), 0 0 5px 1px var(--shadow-color);	
    border-radius: 10px;	
	transition-duration: 0.5s;	
}	
.col_popup {	
	top: -12.2em;	
}	
.add_quantity_popup > h3 {	
	text-align: center;	
    padding-left: 0.3em;	
}	
.add_quantity_popup > div {	
	margin-bottom: 0.3em;	
}	
.add_quantity_popup > div > * {	
	display: inline-block;	
    vertical-align: middle;	
}	
.textfield {	
	position: relative;	
    margin: 8px 0;	
}	
.add_quantity_textfield, .textfield{	
    text-align: center;	
    font-size: 1.5em;	
	/*font-size: 1.3em;*/	
    font-family: 'Yanone Kaffeesatz', arial-narrower, sans-serif;	
    line-height: 1.2em;	
    border-radius: 7px;	
    border: 2px solid #bbb;	
    border: none;	
    box-shadow: inset 0 0 2px 1px #888;	
}	
.add_quantity_textfield {	
	width: 2em;	
}	
.submit_add {	
	margin: 0 auto;	
    font-size: 1.3em;	
    line-height: 0.9em;	
    font-weight: 350;	
	border: 3px solid var(--black-color);
}	
.add_quantity_textfield:focus {	
	box-shadow: inset 0 0 2px 1px var(--accent-color);	
	outline: none;	
}	
.micro_button {	
    font-size: 1.6em !important;	
    padding: 0em 0.17em;	
    border: 0.08em solid;	
    line-height: 0.8em;	
    margin: 0.2em !important;	
}	
.popup_tail {	
	position: absolute;	
    width: 10px;	
    height: 10px;	
    transform: rotate(45deg);	
    bottom: -10px;	
    right: 2em;	
    background: var(--more-lighten-accent-color);	
	box-shadow: 2px 2px 2px 0px var(--shadow-color);	
}	
.invis_anchor {	
	position: absolute;	
	top: -300px;	
}	
.color_container {	
    width: 6em;	
    /* height: 50px; */	
    margin: 0 auto;	
    margin-bottom: 5px;	
    white-space: normal;	
}	
.color_container > h3 {	
    display: block;	
    text-align: center;	
}	
.color_select {	
	display: inline-block;	
	width: 1em;
	height: 1em;	
	margin: 3px;	
	border: 1px solid #555555;	
	transition-duration: 0.2s;	
}	
.color_select:hover {	
	border: 1px solid transparent;	
	transition-duration: 0.2s;	
}	







/* CONTENTS */

.card_deck {
	margin: 10px auto;
	width: 100%;
	max-width: 32em;
	text-align: center;
	font-size: 1.11em;
}

.card {
	display: inline-block;
	/*border: 2px solid var(--gray-color);*/
	box-shadow: 0px 0px 8px -1px var(--shadow-color);
	border-radius: 10px;
	padding: 15px;
	vertical-align: top;
	width: 7.4em;
	text-align: center;
	margin: calc((80% - 21em)/6);
}

.card_header {
	font-size: 0.8em;
	text-align: center;
	font-family: 'Yanone Kaffeesatz', arial-narrower, sans-serif;
	font-weight: 500;
	
}

.card_text {
	font-size: 0.6em;
}

.card svg {
	width: 100%;
	height: 5em;
	margin: 15px 0;
}

.card svg:hover {
	--black-color: #0892D0;
	--accent-color: #222222;
}

.dark .card svg:hover {
	--black-color: #0892D0;
	--accent-color: #fdfdfd;
}

.card ul {
	margin: 0 auto;
	padding-left: 0;
	width: 85%;
}

.card li {
	width: 100%;
	padding: 0.6em 0;
	border-bottom: 1px solid #cccccc;
	list-style: none !important;
}

.card li:last-child {
	border-bottom: none;
}

.list_card {
	margin: 1em 2em;
	width: 20em;
	box-shadow: 0px 0px 8px -1px var(--shadow-color);
	padding: 0.5em;
	border-radius: 14px;
}

.list_card > div {
	width: 100%;
	margin: 0 0em 0 -0.5em;
	padding: 0.5em 0.5em;
}

.list_card > div:hover {
	background-color: var(--darken-white-color);
}

.list_card > div > div:nth-child(1){
	display: inline-block;
    width: 60%;
    padding-left: 1em;
}

.list_card > div > div:nth-child(2){
	display: inline-block;
    font-weight: 600;
    width: 30%;
    text-align: center;
}

.list_card > hr {
	width: 16em;
    border-top: 1px solid #e2e2e2;
    border-left: none;
    border-bottom: none;
	margin-block-start: 0em;
    margin-block-end: 0em;
}

.article-width, .article {
	margin: 0 auto;
	width: 24em;
}

.article {
	margin: 0 auto;
	width: 30em;
	line-height: 1.618em;
	font-size: 0.8em;
	letter-spacing: -0.2px;
}




.article p {
	text-align: inherit;
}

.column {
	display: inline-block;
	box-sizing: border-box;
	width: 43%;
	margin: 1.5em 1em 0.5em;
	padding: 0 0.7em;
	padding-top: 0;
	vertical-align: top;
	text-align: center;
}

.column h2 {
	margin-top: 0 !important;
}


.contact {
	font-size: 2em;
	font-family: 'Yanone Kaffeesatz', arial-narrower, sans-serif;
	margin-bottom: 0.1em;
	color: var(--black-color);
}







#footer {
    margin: 0;
    padding: 1em 0;
	background-color: #333333;
	font-size: 1.6em;
    text-align: left;
	margin-top: 2em;
	box-shadow: inset 0px 18px 25px -18px rgba(0,0,0,0.8);
}

#footer > div {
	margin: 0 auto; 
	width: 880px;
}

.footer_column {
	display: inline-block;
	vertical-align: middle;
}

.footer_column:nth-child(1) {
	width: 200px;
	font-size: 1.8em;
	font-family: 'Yanone Kaffeesatz', arial-narrower, sans-serif;
}

.footer_column:nth-child(1) a {
	line-height: 1.1em;
}

.footer_column:nth-child(2) {
	margin-left: 0px;
	width: 300px;
}

.footer_column:nth-child(3) {
	margin-left: 27px;
	width: 266px;
}

#footer_logo svg {
	width: 340px;
	height: 140px;
	margin-top: 1em;
}

.spacer { clear:both }

#send_window {	
	position: fixed;
	box-sizing: border-box;	
	width: 950px;	
	height: 600px;	
	top: 50%;	
	left: 50%;	
	background: var(--white-color);	
	padding: 2em;	
	padding-top: 1em;
	font-size: 1.5em;	
	box-shadow: 0 0 7px 2px var(--shadow-color);	
	border-radius: 30px;
	z-index: 100;
	display: none;
	margin-left: -480px;
	margin-top: -298px;
}	
.long_textfield {	
	width: 25em;	
	height: 2em;	
	font-size: 0.9em;	
	line-height: 1.3em;	
}	
#send_form {	
    margin-top: 1em;	
    display: inline-block;	
    width: 50%;	
    vertical-align: top;	
}	
#send_form > h3 {	
    margin: 0.5em 0 0 0;
}	
#send_form > textarea {	
    resize: none;	
	margin: 0px;	
	height: 104px;	
	width: 15em;	
}	
#final_cart {	
	display: inline-block;	
	font-size: 1.1em;	
	width: 400px;	
	text-align: center;	
	margin: 1em 0em 0 1em;	
}	
#thanks {	
    margin-top: 2em;	
	display: none;	
}

.nobr {
	white-space: nowrap;
}

.sidebar__inner {
    background: var(--white-color);
    margin: 0px 2px;
    padding: 1px;
}

.sidebar{
    will-change: min-height;
}

.sidebar__inner {
    transform: translate(0, 0); /* For browsers don't support translate3d. */
    transform: translate3d(0, 0, 0);
    will-change: position, transform;
}




.two-panel-banner {
    display: grid;
    grid-template-columns: 40% 60%;
    margin-left: -20px;
    width: calc(100% + 40px);
    margin-top: 1em;
    --start-offset: 0.6em;
    overflow: hidden;
}

.banner-panel {
    /* background: linear-gradient(var(--bg-color), var(--bg-color)), var(--img);
    background-blend-mode: hard-light; 
    background-size: cover; */
    padding: 0 1em;
	position: relative;
}

.banner-panel:first-child {
    width: 140%;
    clip-path: polygon(0 0, 80% 0, 100% 100%, 0 100%);
    box-sizing: border-box;
    height: 13em;
    --filter-color: var(--lighten-accent-color);
	z-index: 1;
}

.banner-panel:last-child {
    text-align: right;
    --filter-color: #DDDC;
	z-index: 0;
}

.banner-panel::before {
    content: ' ';
    height: 100%;
    display: block;
    box-sizing: border-box;
}

.banner-panel:first-child::before {
	float: right;
	shape-outside: content-box polygon(0 0, 100% 0, 100% 100%);
	width: 23%;
	margin-right: 0em;
}

.banner-panel:last-child::before {
    float: left;
    shape-outside: content-box polygon(0 0, 100% 100%, 0 100%);
    width: 20%;
	margin-left: 1.7em;
}

.banner-panel h2 {
    background: var(--white-color);
    padding: 0.2em;
    display: inline-block;
    font-size: 1.8em;
    position: relative;
    z-index: 3;
}

.banner-desc {
    line-height: 1.4em;
    font-size: 0.7em;
    padding: 0 var(--start-offset);
    margin: 1em 0;
}

.banner-desc > span {
    background: var(--white-color);
    box-shadow: var(--start-offset) 0 0 var(--white-color), 
				calc(var(--start-offset) * -1) 0 0 var(--white-color);
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

.banner-prods {
    font-size: .7em;
    padding: 0 var(--start-offset);
	--bg-color: #ffffffc4;
}
.dark .banner-prods { --bg-color: #333333c4; }


.banner-prods > a {
    display: inline-block;
    background: var(--bg-color);
    margin: 0.2em;
    box-shadow: 	 var(--start-offset) 		0 0 var(--bg-color), 
				calc(var(--start-offset) * -1) 	0 0 var(--bg-color);
	letter-spacing: -0.02em;
    font-weight: 700;
	position: relative;
	z-index: 3;
}

.banner-prods > a:hover {
    --bg-color: var(--white-color);
    box-shadow: calc(var(--start-offset) * 1.5) 0 0 var(--bg-color), 
				calc(var(--start-offset) * -1.5) 0 0 var(--bg-color) !important;
}

.banner-panel .banner-panel-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    transition: 0.8s;
}

.banner-panel-bg::before, .banner-panel-bg::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transition: 0.8s;
}
.banner-panel-bg::after {
	background: hsl(41deg 10% 47%);
	z-index: 1;
}

.banner-panel-bg::before {
	background: var(--filter-color);
    opacity: 0.85;
    mix-blend-mode: hue;
    z-index: 3;
}

.banner-panel-bg img {
    object-fit: cover;
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 2;
    mix-blend-mode: hard-light;
}

.dark .banner-panel-bg img {
    mix-blend-mode: multiply;
}

.banner-panel:hover .banner-panel-bg {
    transform: scale(1.4);
}

.banner-panel:hover .banner-panel-bg::before, 
.banner-panel:hover .banner-panel-bg::after {
    opacity: 0.1;
}

.overlay-link {	
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 2;
	box-shadow: none;
}


.filler-banner {
    font-family: 'Yanone Kaffeesatz', arial-narrower, sans-serif;
    font-size: 1.2em;
    margin: 0em auto 2em;
	padding: 1em 3em;
	text-align: center;
}
.filler-banner > div {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
}

.filler-banner ul {
    margin: 0.6em auto;
    padding: 0 0.6em;
    border-left: solid 4px var(--accent-color);
    border-right: solid 4px var(--lighten-accent-color);
    width: fit-content;
}

.filler-banner li {
    margin-bottom: 0.2em;
	list-style: none !important;
}

.filler-banner > div > *:first-child, 
.filler-banner > div > *:last-child {
    flex: 1;
}





@media screen and (min-width: 1480px) {
    #content {
        grid-template-columns: 1fr 880px 1fr;
    }
	
	#content.price_grid {
		grid-template-columns: 1fr 830px 1fr;
	}
}

@media screen and (min-width: 1370px) and (max-width: 1479px) {
    #content {
        grid-template-columns: 300px 1fr 300px;
    }
	
	#content.price_grid {
		grid-template-columns: 320px 1fr 320px;
	}
}

@media screen and (min-width: 1290px) and (max-width: 1369px) {
    #content {
        grid-template-columns: 1fr 752px 1fr;
    }
}

@media screen and (min-width: 1017px) and (max-width: 1289px) {
    #content {
        grid-template-columns: 250px 752px 1fr;
    }
	
	#content.price_grid {
		grid-template-columns: 300px 700px 1fr;
	}
	
	#content.price_grid #mainbar {
		width: 707px;
	}
}

@media screen and (max-width: 1016px){			/* mobile version */

	a { 
		box-shadow: inset 0 -0.25em 0 -0.1em var(--accent-color);
		-webkit-tap-highlight-color: transparent;
	} 

	
	.sidebar {
		transition: all .5s ease-out;
		-webkit-transition: all .5s ease-out;
		-moz-transition: all .5s ease-out;
	}
	
	#send_window {
		width: 92% !important;
		left: 1% !important;
		z-index: 2;
		font-size: 1em !important;
		overflow: auto;
		margin-left: 0 !important;
	}
	
	.pr_side {	
		position: static;	
		display: block;	
		max-height: fit-content;
	}
	
	#filter_header {
		display: none;
	}
	
	.product_block {
		width: 11.6em;
		display: inline-block;
		vertical-align: top;
	}
	
	#mainbar .article, #mainbar .article-width {
		margin: 0 1em;
		width: auto;
	}
	
	#mainbar .article {
		font-size: 0.7em;
	}
	
	img {
		width: 100%;
	}
	
	#toggle_cart {	
		top: 15px;	
		right: 5px;	
		left: auto;	
		width: fit-content;	
	}	
		
	.narrow_screen_cart {	
		right: 1.5em;	
		left: auto;	
		top: 0;	
		transform: translateY(-103%);
		max-height: fit-content;	
		width: 450px !important;	
		font-size: 1em;	
	}
	
	.two-buttons-wrapper.mobile-long-buttons {
		width: 80%;
	}

	#mainbar .two-buttons-wrapper.mobile-long-buttons .button {
		width: 100%;
	}
		
	
	
	
	table.pricelist {
		min-width: auto;
		width: 100%;
	}

	.prod_name, .prod_price, .prod_price1, .prod_price2 {
		font-size: 0.9em;
	}
	
	table tr {
		height: 2.5em;
	}
	
	.add_to_cart {
		margin-left: 0px;
	}
	
	table.pricelist tr td:nth-child(1) {
        width: 260px;
        box-sizing: border-box;
		padding-left: 1em;
	}
	
	table.pricelist tr td:nth-child(n+2) {
		padding-right: 16px;
		width: 171px;
		box-sizing: border-box;
		
	}
	
	.card {
		display: block !important;
		width: 80% !important;
		margin: 1em auto !important;
	}

	.card svg {
		height: 6em !important;
	}
	
	.list_card {
		margin-left: 0 !important;
		width: 100% !important;
		font-size: 0.7em !important;
	}
	
	#footer div {
		width: auto !important;
	}
	
	#footer .footer_column {
		width: 100% !important;
		text-align: center !important;
		padding: 0.5em 0% !important;
	}
	
	#footer h3 {
		text-align: center !important;
	}
	
	.footer_column:nth-child(3) {
		margin: 0 !important;
	}
	
	.two-panel-banner { display: block; }
	
	.banner-panel {
		padding: 0em 1em 1em;
		width: 100% !important;
		box-sizing: border-box;
		height: fit-content !important;
		overflow: hidden;
	}
	
	.banner-panel:first-child { 
		clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 0% 100%);
		padding-bottom: 2.5em;
	}
	
	.banner-panel:last-child {
		margin-top: -2.8em;
		padding-top: 1em;
	}
	
	.banner-panel::before { display: none; }
	.banner-panel h2 { margin-top: 0.7em; }
	
	.filler-banner {
		padding: 1em 0;
		font-size: 1.1em;
	}
	
	.filler-banner ul { border-left: none; }
	.filler-banner > div > div:last-child ul { border: none;}
	
}

@media screen and (max-width: 700px){
	.column {
		width: 100% !important;
		margin: 1.5em 0 !important;
	}
}
/* pricelist section */

@media screen and (min-width: 1660px) {
	
	#side_left.pr_side {
		padding-right: 2% !important;
	}
	
	#side_right.pr_side {
		padding-left: 2% !important;
	}
}

@media screen and (min-width: 1460px) and (max-width: 1659px){
	
	#side_left.pr_side {
		padding-right: 2% !important;
	}
	
	#side_right.pr_side {
		padding-left: 2% !important;
	}
}

@media screen and (min-width: 1080px) and (max-width: 1459px){
	#side_left.pr_side {
		padding-right: 0% !important;
	}
	
	
	#side_right.pr_side { /* fix this when add 2nd sidebar */
		padding-left: 0 !important;
	}
}

@media screen and (min-width: 1015px) and (max-width: 1079px){	
	#side_right.pr_side {
		width: 100% !important;
		padding-left:10px !important;
	}
}