/* variables */

:root {
	/* background color outside of all content */
	--html-background-color: #646464;
	/* background color for main block */
	--main-background-color: #f2f2f2;
	/* header background color */
	--header-background-color: #029455;
	/* content background color */
	--content-background-color: #fff;
	/* color for buttons, links, titles etc */
	--primary-element-color: #029455;
	/* background color for header buttons, color for header font sizes, etc */
	--header-element-color: #017745;
	/* background color for inputs */
	--input-background-color: #f2f2f2;
	/* background color for input decorations */
	--input-decoration-background-color: #dcdcdc;

	/* foreground color for decorations (font/view selection) */
	--decoration-color: #c2c2c2;
	/* color for breadcrumbs */
	--breadcrumb-color: #b8b8b8;
	/* color for breadcrumb arrows */
	--breadcrumb-arrow-color: #888;

	/* !! expand this when more customization is required !! */
}

/* webshop layout */

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
}
html {
	background-color: var(--html-background-color);
	font-family: arial;
	font-size: 100%;
}
html.font-large {
	font-size: 120%;
}

a {
	color: var(--primary-element-color);
}

.hide {
	display: none !important;
}

td {
	vertical-align: top;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0,0,0,0);
	border: 0;
}

/* hides the X for emptying an input on IE11 */
input::-ms-clear {
	display: none;
	height: 0;
	width: 0;
}

/* header --------------------------------------------------------- */

div.header {
	max-width: 1400px;
	margin: 0 auto 0 auto;
	background-color: var(--header-background-color);
	color: #fff;
	padding: 10px 25px;

	box-sizing: border-box;
	position: relative;
}

div.logo {
	height: 83px;
	/*width: 400px;*/

	/* Hide the text. */
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;

	cursor: pointer;
}

div.header-controls {
	position: absolute;
	top: 0;
	right: 40px;
	width: calc(100% - 350px);
	text-align: right;
	padding: 15px 20px 0 0;
}
div.header-controls > * {
	margin-left: 25px;
}

form.search {
	display: inline-block;
}

div.header-control-search {
	display: inline-flex;
}

div.header input.input-search {
	border: 0;
	border-top-left-radius: 15px;
	border-bottom-left-radius: 15px;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	padding: 10px 15px;
	width: 250px;
	margin: 0;
	font-size: 0.875rem; /* eq 14px */
	background-color: var(--content-background-color);
}
div.header button.button-search {
	border: 0;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	border-top-right-radius: 15px;
	border-bottom-right-radius: 15px;
	padding: 10px 5px;

	background-color: var(--content-background-color);
	background-image: url(../images/magnifier.png);
	background-repeat: no-repeat;
	background-size: 40%;
	background-position: center center;

	width: 45px;
	height: 100%;

	/* Hide the text. */
	text-indent: 150%;
	white-space: nowrap;
	overflow: hidden;
	box-sizing: border-box;
}
div.header input.input-search:focus, div.header button.button-search:focus {
	outline: 0;
}

button, a.button {
	padding: 5px 12px;
	border-radius: 8px;
	border: 0;

	background-color: var(--primary-element-color);

	font-size: 0.875rem; /* eq 14px */

	text-decoration: none;
	color: #fff;

	cursor: pointer;
}
button:focus {
	outline: 0;
}
div.header-controls button, div.header-controls a.button {
	display: inline-block;
	background-color: var(--header-element-color);
	border-radius: 15px;
}

div.header-controls a.button-cart {
	display: inline-block;
	font-size: 12px;

	color: #fff;
	text-decoration: none;

	background-image: url(../images/winkelwagen.png);
	background-size: 40px 40px;
	background-repeat: no-repeat;
	background-color: inherit;
	height: 45px;
	width: 45px;
	top: 18px;

	box-sizing: border-box;

	border-radius: 0;

	position: relative;
}
div.header-controls a.button-cart span.txt {
	display: none;
}
div.header-controls a.button-cart span.badge {
	display: inline-block;
	text-indent: 0;
	position: absolute;
	width: 16px;
	height: 16px;
	border-radius: 8px;
	border: 1px solid #fff;

	top: 7px;
	left: 7px;

	text-align: center;

	box-sizing: border-box;

	background-color: #f00;
	padding: 0;
}
div.header-controls a.button-cart span.badge.badge-wide {
	width: 24px; /* this is for numbers > 99 */
	left: 2px;
}

ul.account-options {
	list-style: none;
	position: absolute;
	padding: 0;
	border-radius: 15px;
	top: 55px;
	right: 55px;
	background-color: var(--header-element-color);
	z-index: 2;
	text-align: left;
	opacity: 0.9;
}
ul.account-options li {
	padding: 10px 15px;
	display: block;
	border-bottom: 1px solid #fff;
	cursor: pointer;
}
ul.account-options a {
	color: #ccc;
	text-decoration: none;
}
ul.account-options li:hover a {
	color: #fff;
}

/* main area ------------------------------------------------------ */

div.main {
	position: relative;
	max-width: 1400px;
	overflow: auto;
	margin: 0 auto 0 auto;
	clear: both;
	background-color: var(--main-background-color);
	padding: 44px 0 0 0;
	min-height: calc(100% - 103px);
	box-sizing: border-box;

}

div.clear {
	height: 0;
	width: 0;
	clear: both;
}

div.block {
	margin: 0 20px 10px 20px;
	background-color: var(--content-background-color);
	color: #000;
	min-height: 40px;
	padding: 10px 20px;
	border-radius: 10px;
}

div.block.summary-block {
	background-color: var(--input-decoration-background-color);
	position: relative;
	margin: 0 20px 40px 20px;
}

/* footer --------------------------------------------------------- */

p.footer {
	text-align: center;
	margin: 0;
	padding: 0 0 35px 0;
	background-color: var(--main-background-color);
}

p.footer > a {
	margin-right: 15px;
	color: #adadad;
}

/* cart ----------------------------------------------------------- */

h2.cart-title {
	margin: 10px 0 20px 0;
	padding: 0;
	font-style: italic;
}

div.cart-row {
	display: table;
	width: 100%;
	padding: 15px;
	margin: 0 -15px 0 -15px;
}
div.cart-row:last-child {
	margin-bottom: 20px;
}
div.cart-row:hover {
	background-color: #fafafa;
}

div.cart-row-part1,
div.cart-row-part2 {
	display: table-cell;
	vertical-align: top;
}
div.cart-row-part1 { width: 100%; }
div.cart-row-part2 { min-width: 300px; }
div.cart-row-part-inner {
	display: table;
	width: 100%;
}

div.cart-column-1 {
	display: table-cell;
	vertical-align: top;
	width: 180px;
}
div.cart-column-1.wide {
	width: 275px;
}
div.cart-column-1 > img {
	vertical-align: top;
}
div.cart-column-1 > span {
	display: inline-block;
	padding: 4px 10px 0 10px;
}

div.cart-column-2 {
	display: table-cell;
	padding: 0;
	vertical-align: top;
}
div.cart-row p.product-type {
	font-style: italic;
	color: #b5b5b5;
	margin: 4px 0 0 0;
}
div.cart-row p.product-title {
	font-weight: bold;
	font-size: 28px;
	margin: 6px 0 20px 0;
}
div.cart-row p.product-isbn {
	font-style: italic;
	color: #b5b5b5;
	margin: 0 0 8px 0;
}
div.cart-row p.product-isbn > span{
	font-style: normal;
	color: #000;
}

div.cart-control {
	display: table-cell;
	vertical-align: top;
	text-align: center;
	min-width: 25px;
	width: 125px;
}
div.cart-control p {
	margin: 0 0 2px 0;
	font-style: italic;
	color: #b5b5b5;

}
div.cart-control-amount {
	display: inline-flex;
	color: #666;
}
input.input-amount {
	background-color: var(--input-background-color);
	border: 0;
	border-top-left-radius: 15px;
	border-bottom-left-radius: 15px;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	padding: 0;
	width: 55px;
	text-align: center;
	font-size: 24px;
	height: 40px;
	color: #666;
}
div.amount-modifier {
	display: inline-block;
	background-color: var(--input-decoration-background-color);
	width: 25px;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	border-top-right-radius: 15px;
	border-bottom-right-radius: 15px;
	text-align: center;
	position: relative;
}
div.amount-modifier > button {
	display: block;
	font-size: 20px;
	width: 25px;
	vertical-align: text-bottom;
	height: 20px;
	cursor: pointer;
	padding: 0;
	background-color: var(--input-decoration-background-color);
	color: #666;
}
div.amount-modifier > button:hover {
	background-color: #c5c5c5;
}
div.amount-modifier > button:first-child {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	border-top-right-radius: 15px;
	border-bottom-right-radius: 0;
}
div.amount-modifier > button:last-child {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	border-top-right-radius: 0;
	border-bottom-right-radius: 15px;
	line-height: 5px;
}

div.cart-control-delete {
	display: inline-flex;
	color: #666;
}
div.cart-control-delete button {
	border-radius: 15px;

	background-color: var(--input-background-color);
	font-size: 20px;
	color: #666;
	height: 40px;
	cursor: pointer;
	padding: 0;
	width: 50px;
	vertical-align: middle;
	box-sizing: border-box;
	line-height: 5px;
}
div.cart-control-delete button:hover {
	background-color: #c5c5c5;
}

div.cart-column-3.cart-control {
	width: 175px;
	min-height: 15px;
	margin: 0;
	text-align: right;
}

div.cart-control p.product-price {
	color: #666;
	font-size: 24px;
	font-style: normal;
	font-weight: bold;
	padding: 0;
	margin: 16px 0 6px 0;
}
div.input-row div.cart-control p.product-price {
	margin: 26px 0 6px 0;
}
div.cart-control p.product-price span {
	font-size: 20px;
}
div.cart-control p.product-taxrule {
	font-style: normal;
}
div.cart-control p.product-free {
	font-style: normal;
	margin: 30px 0 0 0;
}

/* generic forms -------------------------------------------------- */

div.input-row {
	display: table;
	width: 100%;

	margin-bottom: 15px;
}

div.cart-column-1 h2.cart-title {
	margin: 0;
	padding: 25px 0 0 0;
}

div.input-row div.cart-column-2 {
	margin-top: -50px;
}

div.form-control-set {
	margin: 0 0 15px 0;
}
div.form-control-set:last-child {
	margin: 0;
}
div.form-control-set-address {
	margin-top: 30px;
}
div.form-control-set.address-line {
}

div.form-control {
	display: table-cell;
	position: relative;
	vertical-align: top;
	text-align: left;
	min-width: 25px;
}
div.form-control p {
	margin: 0 0 2px 5px;
	font-style: italic;
	color: #b5b5b5;
}

div.form-control-select {
	display: inline-flex;
	color: #666;
}
div.form-control select {
	background-color: var(--input-background-color);
	border: 0;
	border-top-left-radius: 15px;
	border-bottom-left-radius: 15px;
	border-top-right-radius: 15px;
	border-bottom-right-radius: 15px;
	padding: 1px 15px 0 15px;
	font-size: 1rem; /* eq 16px */
	height: 40px;
	min-width: 450px;

	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	outline: 0;
}
div.summary-block div.form-control select {
	min-width: 300px;
}
div.form-control select[name=country] {
	min-width: 425px;
}
div.form-control select.has-error {
	background-color: #fdd;
}
div.form-control button.select-button {
	display: inline-block;
	z-index: 5; /* to hide the appearance of the select in IE11 */

	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	border-top-right-radius: 15px;
	border-bottom-right-radius: 15px;

	background-color: var(--input-decoration-background-color);
	color: #666;
	width: 35px;
	height: 40px;

	margin-left: -35px;
	margin-right: 5px;

	pointer-events: none;
}
div.summary-block div.form-control button.select-button {
	background-color: #cbcbcb;
}

label.radio-label, label.checkbox-label {
	display: inline-block;
	box-sizing: border-box;
	position: relative;

	border: 1px solid var(--input-background-color);
	border-top-left-radius: 15px;
	border-bottom-left-radius: 15px;
	border-top-right-radius: 15px;
	border-bottom-right-radius: 15px;

	padding: 8px 10px 0 8px;

	background-color: var(--input-background-color);
	height: 40px;

	min-width: 210px;

	cursor: pointer;
	margin-right: 5px;
}
label.radio-label.has-error, label.checkbox-label.has-error {
	background-color: #fdd;
}
label.radio-label.focus, label.checkbox-label.focus {
	border: 1px solid #fdd;
}
label.radio-label.checked, label.checkbox-label.checked {
	border: 1px solid #999;
}
div.summary-block label.radio-label.checked, div.summary-block label.checkbox-label.checked {
	border: 1px solid var(--input-background-color);
}
label.radio-label input[type=radio], label.checkbox-label input[type=checkbox] {
	position: absolute;
	opacity: 0;
}
span.radio-button, span.checkbox-button {
	background-color: #fff;
	display: block;

	position: absolute;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 1px solid #ccc;
	font-size: 16px; /* keep the checkmark size consistent when large font is used */
}
span.checkbox-button {
	border-radius: 0;
}
label.radio-label.checked span.radio-button:after,
label.checkbox-label.checked span.checkbox-button:after {
	content: ' ';
	position: absolute;
	top: 4px;
	left: 4px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #000;
}
label.checkbox-label.checked span.checkbox-button:after {
	top: 2px;
	left: 2px;
	border-radius: 0;
	background: #fff;
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	line-height: 1;
	content: "\f00c";
}
span.radio-text, span.checkbox-text {
	display: inline-block;
	margin-left: 35px;
	margin-top: 1px;
	line-height: 20px;
}
span.radio-text-price {
	color: #666;
	font-size: 0.9em;
}

i.payment-icon {
	font-size: 16px; /* eq 16px */
}

button.form-button, a.form-button {
	display: inline-block;
	box-sizing: border-box;
	position: relative;

	border-radius: 15px;

	height: 40px;

	min-width: 210px;

	cursor: pointer;
	margin-right: 5px;
	font-size: 1rem; /* eq 16px */
	line-height: 18px;
}

a.form-button {
	text-align: center;
	line-height: 30px;
}

input.form-input, textarea.form-input {
	display: inline-block;
	box-sizing: border-box;
	position: relative;
	border-radius: 15px;
	border: 0;
	padding: 1px 15px 0 15px;
	top: 0;
	background-color: var(--input-background-color);
	height: 40px;
	width: 210px;
	cursor: text;
	margin-right: 5px;
	font-size: 1rem; /* eq 16px */
}
textarea.form-input {
	font-family: arial;
	min-height: 80px;
	height: 80px;
	resize: none;
	padding-top: 10px;
	padding-bottom: 10px;
}
input.form-input:disabled, button.form-button:disabled {
	cursor: not-allowed;
}
button.form-button:disabled {
	background-color: #d2d2d2;
	color: #fff;
}
input.form-input.has-error, .summary-block input.form-input.has-error {
	background-color: #fdd;
}
input.form-input:focus, textarea.form-input:focus {
	outline: 0;
}
span.verify-ok {
	position: absolute;
	top: 33px;
	right: 25px;
	color: #029455;
}
span.verify-fail {
	position: absolute;
	top: 33px;
	right: 25px;
	color: #940255;
}
input.form-input.verify-error:after {
}
.summary-block input.form-input {
	background-color: var(--content-background-color);
}
input.form-input.form-input-narrow {
	width: 95px;
}
input.form-input.form-input-medium {
	width: 325px;
}
input.form-input.form-input-wide,
textarea.form-input.form-input-wide {
	width: 425px;
}

table.summary-table {
	margin: 25px 0 0 auto;
	border-collapse: collapse;
}

table.summary-table tr {
}
table.summary-table td {
	vertical-align: bottom;
	padding: 0 30px 2px 0;
	text-align: right;
}

table.summary-table td.product-price {
	color: #666;
	font-size: 24px;
	font-style: normal;
	font-weight: bold;
	padding: 0;
	margin: 0;
}
table.summary-table td span {
	font-size: 0.75rem; /* eq 12px */
}
table.summary-table td.product-price span {
	font-size: 20px;
}

div.summary-block button.placeOrder {
	position: absolute;
	border-radius: 15px;
	width: 250px;
	top: calc(100% - 23px);
	left: calc(50% - 125px);
	height: 46px;
	font-size: 18px;
	cursor: pointer;
}

div.block.pre-button-block {
	padding-top: 30px;
	padding-bottom: 50px;
}

div.button-block {
	position: relative;
	width: 100%;
	height: 1px;
	margin-bottom: 40px;
	text-align: center;
}
div.button-block > button.blockButton {
	position: absolute;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	border-radius: 15px;
	height: 46px;
	font-size: 18px;
	cursor: pointer;
	top: calc(100% - 33px);
	padding: 0 30px;
	border-radius: 20px;
}
div.button-block > div.multiple-buttons {
	position: absolute;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	height: 46px;
	top: calc(100% - 33px);
}
div.button-block > div.multiple-buttons > button.blockButton {
	height: 46px;
	font-size: 18px;
	cursor: pointer;
	padding: 0 30px;
	border-radius: 20px;
	margin: 0 10px;
}
button.blockButton#updateAccountButton {
	/*
	width: auto;
	padding: 0 20px;
	*/
}

ul.breadcrumbs {
	position: absolute;
	font-size: 12px;
	list-style-type: none;
	top: 17px;
	left: 0;
	padding: 0 0 0 40px;
	margin: 0;
	color: var(--breadcrumb-arrow-color);
}
ul.breadcrumbs li {
	display: inline-block;
}
ul.breadcrumbs li.home a {
	display: inline-block;
	background-image: url('../images/home.png');
	background-size: 12px 13px;
	background-repeat: no-repeat;
	text-indent: -2000px;
	width: 12px;
}
ul.breadcrumbs li:before {
	margin: 0 5px 0 5px;
	content: ">";
}
ul.breadcrumbs li:first-child:before {
	display: none;
}
ul.breadcrumbs a {
	text-decoration: none;
	color: var(--breadcrumb-color);
}
ul.breadcrumbs span {
	color: var(--primary-element-color);
}
ul.breadcrumbs li.active a, ul.breadcrumbs li.active span {
	padding: 0 0 13px 0;
	border-bottom: 2px solid var(--primary-element-color);
}


div.viewcontrols {
	position: absolute;
	right: 30px;
	top: 0;
	border-spacing: 10px 0;
	/* display: inline; */
}
div.viewcontrols > a, div.viewcontrols > span {
	box-sizing: border-box;
	display: inline-table;
	vertical-align: middle;
	text-decoration: none;
	padding: 0 0 0 0;
	height: 46px;
	border-bottom: 2px solid #fff; /* dummy border */
	color: var(--decoration-color);
	cursor: pointer;
}
div.viewcontrols > a.active, div.viewcontrols > span.active {
	border-bottom: 2px solid var(--primary-element-color);
	color: var(--primary-element-color);
}
div.viewcontrols > a.flag {
	padding-top: 20px;
	padding-left: 0;
}
div.viewcontrols a.viewcontrol-font-normal {
	padding-top: 15px;
	font-size: 20px;
	/*color: #029455;*/
	/*border-bottom: 2px solid #029455;*/
}
div.viewcontrols a.viewcontrol-font-large {
	font-size: 36px;
	/*color: #c2c2c2;*/
}

div.viewcontrols > a.view {
	padding-top: 20px;
	padding-left: 0;
}
div.viewcontrols > span.divider {
	width: 1px;
	height: 10px;
}

div.language-select {
	margin-top: -2px;
	background-color: var(--primary-element-color);
	border-radius: 15px;
	z-index: 1;
	position: absolute;
}
div.language-select a {
	display: block;
	padding: 7px 15px;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
}
div.language-select a:first-child {
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
}
div.language-select a:last-child {
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
}
div.language-select a:hover {
	background-color: var(--header-element-color);
}
div.language-select a span {
	margin-right: 5px;
}


ul.ordergroups {
	display: table-cell;
	vertical-align: top;
	list-style-type: none;
	padding: 0;
	margin: 10px 0 0 0;
	min-width: 270px;
}
ul.ordergroups ul {
	display: block;
	list-style-type: none;
	padding: 0;
	margin: 0;
}
ul.ordergroups a {
	color: var(--primary-element-color);
	text-decoration: none;
}
ul.ordergroups li {
	display: block;
	padding: 12px 5px 12px 20px;
	cursor: pointer;
}
ul.ordergroups li li:first-child {
	padding-top: 20px;
}
ul.ordergroups li li:last-child {
	padding-top: 12px;
	padding-bottom: 0;
}
ul.ordergroups li.openable > a {
	/* fix to eliminate whitespace */
	/*margin-left: -4px;*/
}
ul.ordergroups ul.ordergroups {
	margin-left: 20px;
	border-top: none;
	border-left: 1px solid var(--primary-element-color);
}
ul.ordergroups li > ul {
	/*display: none;*/
}
ul.ordergroups li.open {
	background-color: #f2f2f2;
	border-radius: 10px;
}
ul.ordergroups li.open > ul {
	display: block;
}
ul.ordergroups li.open > li {
}
/*
ul.ordergroups li:before {
	display: inline-block;
	margin: 0 5px 0 5px;
	width: 10px;
	content: " ";
}
*/
ul.ordergroups li.openable:before {
	content: ">";
}
ul.ordergroups li:hover {
	background-color: var(--primary-element-color);
	color: #fff;
}
ul.ordergroups li:hover a {
	color: #fff;
}

/*
ul.ordergroups li:hover ul.ordergroups li {
	background-color: var(--main-background-color);
}
*/

div.products {
	display: table-cell;
	position: relative;
	vertical-align: top;
	padding: 10px 0 10px 20px;
	/*background-color: #fdd;*/
	width: 100%;
}
div.products.searchresults {
	display: block; /* override table cell */
	padding: 10px 0;
}
div.pagination {
	position: absolute;
	top: -2px;
	width: 100%;
	text-align: center;
	z-index: 10;
}
div.pagination div.pagination-inner {
	display: inline-block;
	margin: 0 auto;
	padding: 0 10px;
	z-index: 10;
	background-color: var(--content-background-color);
	opacity: 1;
}
div.pagination a {
	display: inline-block;
	box-sizing: border-box;
	width: 25px;
	height: 25px;
	color: #b8b8b8;
	text-align: center;
	padding-top: 3px;
	margin: 0 5px;
	border-radius: 50%;
	border: 1px solid #fff;
	text-decoration: none;
}
div.pagination a.active {
	background-color: #b8b8b8;
	border: 1px solid #b8b8b8;
	color: #fff;
}
div.pagination a:hover {
	border: 1px solid #b8b8b8;
}
div.pagination-bottom {
	position: relative;
	width: 100%;
	height: 5px;
	border-bottom: 1px solid #b8b8b8;
}
div.pagination-bottom div.pagination {
	top: -7px;
}

div.product {
	display: block;
	border-top: 1px solid #b8b8b8;
	padding: 20px 0;
}
div.product.dummy-product {
	display: none;
}
div.products.product-page div.product {
	/* don't bother with borders on individual product page */
	border-top: none;
	padding: 0;
}

div.product:first-child {
}

div.product .product-image {
	display: table-cell;
	vertical-align: top;
}

div.product .product-info {
	display: table-cell;
	vertical-align: top;
	padding: 0 10px;
}

div.product .product-info p.product-type {
	font-style: italic;
	color: #b5b5b5;
	margin: 0;
}
div.product .product-info p.product-title {
	font-weight: bold;
	font-size: 28px;
	margin: 6px 0 20px 0;
}
div.product .product-info p.product-title a {
	text-decoration: none;
}

div.catalog-controls {
	display: table-row;
}
div.catalog-control {
	display: table-cell;
	vertical-align: top;
	text-align: left;
	min-width: 45px;
	padding: 10px 10px 0 10px;
	text-align: center;
	box-sizing: border-box;
}
div.catalog-control:first-child {
	min-width: 100px; /* was 125px but makes everything too wide for phones */
}
div.catalog-control:nth-child(2) {
	width: 100px;
	min-width: 100px;
}
div.catalog-controls:first-child div.catalog-control {
	padding: 0 10px 0 10px;
}
div.catalog-control:first-child {
	text-align: left;
}
div.catalog-control p {
	margin: 0 0 2px 0;
	font-style: italic;
	color: #b5b5b5;
}
div.catalog-specs {
	display: block;
	vertical-align: top;
	text-align: left;
	min-width: 45px;
	max-width: 290px;
	padding: 25px 10px 0 10px;
}
div.catalog-specs p {
	margin: 5px 0 2px 0;
	font-style: italic;
	color: #b5b5b5;
}

div.product .product-actions {
	display: table-cell;
	vertical-align: top;
}

div.product .product-price {
	color: #666;
	font-size: 24px;
	font-style: normal;
	font-weight: bold;
	padding: 0;
	margin: 8px 0 0 0;
}
div.product p.product-price span {
	font-size: 20px;
}

div.product .product-original-price {
	color: #666;
	font-size: 18px;
	font-style: normal;
	font-weight: bold;
	padding: 0;
	margin: 0px 0 6px 0;
	text-decoration: line-through;
	text-align: left;
	font-style: italic;
}
div.product p.product-original-price span {
	font-size: 14px;
}

.catalog-control-amount {
	display: inline-flex;
	color: #666;
	padding-top: 0;
}

div.product button.add-to-cart {
	border-radius: 15px;

	background-color: var(--primary-element-color);
	font-size: 30px;
	color: #fff;
	height: 40px;
	cursor: pointer;
	padding: 0 60px 0 10px;
	vertical-align: middle;
	box-sizing: border-box;
	line-height: 5px;

	width: 87px;
	/* Hide the text. */
	text-indent: -2000px;
	white-space: nowrap;
	overflow: hidden;

	background-image: url(../images/winkelwagen_btn.png);
	background-repeat: no-repeat;
	background-size: 36px 31px;
	background-position: center 5px;
}
div.product button.add-download {
	border-radius: 15px;

	background-color: #676767;
	font-size: 30px;
	color: #fff;
	height: 40px;
	cursor: pointer;
	padding: 0 60px 0 10px;
	vertical-align: middle;
	box-sizing: border-box;
	line-height: 5px;

	overflow: hidden;

	width: 87px;
	/* Hide the text. */
	text-indent: -2000px;
	white-space: nowrap;
	overflow: hidden;

	background-image: url(../images/winkelwagen_btn.png);
	background-repeat: no-repeat;
	background-size: 36px 31px;
	background-position: center 5px;
}
div.product a.download-button {
	display: inline-block;
	text-decoration: none;
	border-radius: 15px;

	background-color: #676767;
	font-size: 30px;
	color: #fff;
	height: 40px;
	cursor: pointer;
	padding: 0 60px 0 10px;
	vertical-align: middle;
	box-sizing: border-box;
	line-height: 5px;
	width: 88px;

	background-image: url(../images/downloads.png);
	background-repeat: no-repeat;
	background-size: 36px 31px;
	background-position: 25px 5px;
}

div.products.view-grid {
}
div.products.view-grid div.products-container {
	display: table;
	position: relative;
	border-collapse: collapse;
	width: 100%;
}
div.products.view-grid div.product {
	display: inline-block;
	position: relative;
	border-collapse: collapse;
	min-width: 33%;
	max-width: 33%;
	width: 33%;
	vertical-align: top;
	margin: 0;
}
div.products.searchresults.view-grid div.product {
	min-width: 25%;
	max-width: 25%;
	width: 25%;
}
div.products.view-grid div.product.dummy-product {
	display: inline-block;
}
div.products.view-grid div.product > div {
	display: block;
}
div.products.view-grid div.product p.product-title {
	font-size: 20px;
}
div.products.view-grid div.product div.description {
	display: none;
}
div.products.view-grid div.product div.product-image {
	height: 195px;
	/* left-align image here
	text-align: center;
	*/
	text-align: left;
	margin-left: 10px;
	margin-bottom: 5px;
}
div.products.view-grid div.product div.product-image img {
	margin: auto;
	left: auto;
	right: auto;
	border: 1px solid #b8b8b8;
	border: 1px solid var(--primary-element-color);
}
div.products.view-grid div.product p.product-title {
	height: 60px;
	box-sizing: border-box;
	position: relative;
	overflow: hidden;
	margin: 6px 0;
}
div.products.view-grid div.product p.sub-title {
	display: none;
}
div.products.view-grid div.product p.product-title:before {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background: linear-gradient(rgba(255,255,255,0) 30px, #fff);
	pointer-events: none; /* note: this does not work in IE11 */
}
div.products.view-grid div.product div.catalog-control.catalog-control-filler {
	display: none;
}
@media (max-width: 1375px) {
	div.products.view-grid div.product div.catalog-control {
		display: inline-block;
		text-align: left;
		margin-top: 5px;
	}
	div.products.view-grid div.product div.catalog-control:first-child {
		width: 100%;
	}
}
div.products.view-grid div.catalog-specs {
	padding: 10px 10px 0 10px;
}
div.products.view-grid div.catalog-spec {
	display: inline-block;
	min-width: 125px;
}


div.products.view-list div.product {
	width: 100%;
}
div.products.view-list div.product-info {
	width: 100%;
}
div.products.view-list div.product div.product-image,
div.products.view-list div.product div.description {
	display: none;
}
div.products.view-list div.catalog-specs {
	padding: 10px 10px 0 10px;
}
div.products.view-list div.catalog-spec {
	display: inline-block;
	min-width: 125px;
}

div.welcome {
	display: table-cell;
	width: 100%;
	padding: 0 20px;
	vertical-align: top;
}

div.information {
	display: table-cell;
	width: 350px;
	min-width: 350px;
	vertical-align: top;
}

div.welcome h1, div.information h1 {
	margin-bottom: 0;
}
div.welcome p {
	margin: 10px 0;
	line-height: 1.375rem; /* eq 22px */
}

div#showAddress {
	margin-top: 30px;
}

/* customer service */

div.service-row {
	display: table;
	width: 100%;
	padding: 5px 15px;
	margin: 10px -15px 0 -15px;
}

div.service-column-1 {
	display: table-cell;
	vertical-align: top;
	width: 300px;
	min-width: 300px;
}
div.service-column-1 h3 {
	font-size: 16px;
	font-weight: bold;
	margin: 12px 0 0 0;
}
div.service-column-2 {
	display: table-cell;
	vertical-align: top;
	width: 100%;
}
div.service-column-3 {
	display: table-cell;
	width: 450px;
	min-width: 450px;
	overflow: hidden;
}
div.service-row h1 {
	padding: 0;
	margin: 0;
}
div.service-row p.address {
	margin: 4px 0 20px 0;
	line-height: 24px;
	font-style: italic;
}
div.service-row p.address span.phone {
	color: var(--primary-element-color);
}

div.contact-form h1, div.contact-form-confirm h1 {
	color: #b5b5b5;
}
div.contact-form p {
	margin: 6px 0 2px 5px;
	font-style: italic;
	color: #b5b5b5;
}
div.contact-form-confirm p {
	margin: 6px 0 2px 0;
	font-style: italic;
}
div.contact-form input.form-input,
div.contact-form textarea.form-input {
	width: 450px;
	box-sizing: border-box;
	margin: 0 0 6px 0;
}
div.contact-form textarea.form-input {
	resize: none;
	padding-top: 10px;
	padding-bottom: 10px;
}
div.contact-form button.form-button {
}
div.contact-form div.contact-form-bottom {
	margin: 16px 0 2px 0;
	padding: 0;
	font-style: italic;
	color: #b5b5b5;
}
div.contact-form div.contact-form-bottom span {
	margin-left: 20px;
}
::placeholder {
	font-family: arial;
	font-style: italic;
}

div.question-block {
	margin: -8px 0 15px 0;
	padding: 3px 15px;
	cursor: pointer;
}
div.question-block.open {
	background-color: #f2f2f2;
	border-radius: 15px;
	padding: 10px 15px;
}
div.question-block p {
	margin: 10px 0;
}
div.question-block p.question-block-question {
	font-weight: bold;
	padding-top: 8px;
}
div.question-block.open p.question-block-question {
	color: var(--primary-element-color);
	padding-top: 1px;
}
div.question-block p.question-block-question:before {
	top: 2px;
	left: 2px;
	border-radius: 0;
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	line-height: 1;
	content: "\f105";
	width: 20px;
}
div.question-block.open p.question-block-question:before {
	content: "\f107";
}

div.question-block p.question-block-answer {
	display: none;
}
div.question-block.open p.question-block-answer {
	display: block;
	font-style: italic;
	line-height: 1.8em;
	margin: 0 0 10px 20px;
}
div.question-block:last-child {
	margin-bottom: 10px;
}

/* order history */
div.order-history {
	display: table;
	padding: 0 20px;
}
div.order-history ul.order-list {
	display: table-cell;
	vertical-align: top;
	width: 225px;
	min-width: 225px;
	list-style: none;
	font-size: 14px;
	padding: 0;
}
div.order-history ul.order-list li {
	padding: 5px 20px;
	margin: 0 0 0 0;
	border-radius: 15px;
	text-align: center;
}
div.order-history ul.order-list li.selected {
	background-color: #d2d2d2;
}
div.order-history ul.order-list li a {
	text-decoration: none;
}
div.order-history div.block-container {
	display: table-cell;
	vertical-align: top;
	width: 100%;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
div.order-history div.block-container div.block {
	padding: 20px 20px;
}
div.order-history div.order-overview {
	display: table;
	width: 100%;
}
div.order-history div.order-overview > div.order-books {
	display: table-cell;
	vertical-align: top;
	width: 100%;
}
div.order-history div.order-overview > div.order-books div.order-books-list {
	max-height: 120px;
	overflow: hidden;
}
div.order-history div.order-overview > div.order-info {
	display: table-cell;
	vertical-align: top;
	width: 250px;
	min-width: 250px;
}
div.order-history h3 {
	font-style: italic;
	margin: 0 0 10px 0;
}
div.order-history h3 span {
	color: var(--primary-element-color);
}
div.order-history img.cover {
	max-height: 120px;
}

div.order-info p {
	color: #b5b5b5;
	font-style: italic;
	margin: 0 0 5px 0;
}
div.order-info p span {
	color: #000;
	font-style: normal;
}
div.order-info p span span {
	font-size: 14px;
}

table.basket {
	width: 100%;
}
table.basket th, table.basket td {
	text-align: left;
	vertical-align: top;
	padding: 5px;
}
table.basket th {
	font-weight: normal;
	font-style: italic;
	color: #b5b5b5;
}
table.basket td.basket-right, table.basket th.basket-right {
	text-align: right;
}
table.basket tr.basket-taxes {
	color: #b5b5b5;
}
table.basket td span {
	font-weight: normal;
	font-size: 14px;
}
table.basket td.basket-text {
	font-style: italic;
}
table.basket td.basket-total {
	border-top: 2px solid #c2c2c2;
}

div.order-history div.error {
	background-color: #fcc;
	padding: 10px 15px;
	border-radius: 15px;
}

div.order-history div.info {
	margin: 10px 0 0 0;
}
div.order-history div.info span.label {
	max-width: 155px;
	float: left;
	clear: left;
	color: #b5b5b5;
	font-style: italic;
}
div.order-history div.info span.info {
	margin-left: 160px;
	display: block;
	clear: right;
	margin-bottom: 10px;
}
div.order-history div.info span.info a.button {
	border-radius: 15px;
	margin-left: 10px;
}

div.order-history div.button-div {
	position: absolute;
	right: 30px;
	top: 10px;
	text-align: center;
}
div.order-history div.button-div p {
	margin: 10px 0 4px 0;
	color: #a1a1a1;
	font-style: italic;
}
div.order-history a.button.add-to-cart {
	border-radius: 15px;
	display: block;

	background-color: var(--primary-element-color);
	font-size: 30px;
	color: #fff;
	height: 40px;
	cursor: pointer;
	padding: 18px 60px 0 10px;
	vertical-align: middle;
	box-sizing: border-box;
	line-height: 5px;

	background-image: url(../images/winkelwagen_btn.png);
	background-repeat: no-repeat;
	background-size: 36px 31px;
	background-position: 40px 5px;
}

/* order confirmation (paid) */
div.input-row.order-history {
	padding: 0;
}
div.order-history div.cart-column-1 h2.cart-title {
	padding: 2px 0 0 0;
}
div.order-history div.cart-column-2 p:first-child {
	margin: 10px 0;
}

div#passwordResetCodeSent {
	padding-top: 17px;
}

.message
{
  background-color:#FCF8E3;
  border:1px solid #FAEBCC;
  text-align:left;
  color:#8A6D3B;
  z-index:999;
  padding:10px;
}

.message #warning
{
  color:#D12F2D;
  font-size:13px;
  font-weight:700;
}

.message p
{
  margin-bottom:0;
  font-size:.9em;
  font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
  padding:0;
}


.pf.payment-icon { color: #4a90e2; }
.pf.pf-ideal.payment-icon { color: #f15bb3; }

input::placeholder {
	visibility: hidden;
}

div.service-column-3.contact-form textarea::placeholder {
	visibility: hidden;
}
div.service-column-3.contact-form input::placeholder {
	/*visibility: visible;*/
}

/* home page customization */
div.block-home {
}
div.block-home div.home-left-column {
	display: table-cell;
	padding: 0 0 0 10px;
}
div.block-home div.home-left-column ul.ordergruops {
	display: block;
}
button.banner {
	margin-top: 5px;
	width: 100%;

	height: 106px;
	line-height: 25px;
	padding: 0;
}
div.popularArticles {
	display: table-cell;
	vertical-align: top;
	padding: 0 50px;
}
div.popularArticles div.box {
	display: table-cell;
	padding-right: 10px;
}
@media (min-width: 1101px) {
	div.popularArticles h2 {
	    margin-top: 10px;
		font-size: 14px;
		text-align: center;
		padding-top: 6px;
	}
	div.popularArticles p.title {
		font-size: 21px;
		text-align: center;
		font-weight: bold;
	}
}

/* responsive stuff */

.responsive { display: none; }
div.pagination a.responsive { display: none; }

@media (max-width: 1200px) {
	body { width: 100%; }
	.responsive { display: initial; }
	div.pagination a.responsive { display: initial; }
	tbody.responsive { display: table-row-group; }
	.non-responsive { display: none !important; } /* for later? */
	ul.ordergroups { display: none; }
	div.logo {
		height: 70px;
		margin-left: 70px;
	}
	div.logo {
		max-width: calc(100% - 130px);
		width: 220px;
		/*
		margin-left: 50px;
		width: 350px;
		background-size: 130% auto;
		*/
	}

	#responsiveMenuButton {
		display: block;
		position: absolute;
		top: 22px;
		left: 20px;
		font-size: 32px; /* 2rem normally */
		border: none;
		background-color: var(--header-background-color);
	}

	#responsiveMenuButton i.for-open { display: none; }
	#responsiveMenuButton i.for-closed { display: initial; }
	#responsiveMenuButton.open i.for-open { display: initial; }
	#responsiveMenuButton.open i.for-closed { display: none; }

	.responsive-menu {
		display: none;
		background-color: #fff;
	}
	.responsive-menu.open {
		display: block;
	}
	.responsive-menu-inner {
		margin: 0 auto;
		/*max-width: 500px;*/
		background-color: var(--header-background-color);
		padding: 0 10px 10px 10px;
	}

	div.header-control-search {
		display: inline-flex;
		width: 100%;
	}

	div.header-control-settings {
		width: 100%;
	}

	div.header-control-search input.input-search {
		border: 0;
		border-top-left-radius: 15px;
		border-bottom-left-radius: 15px;
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
		padding: 10px 15px;
		width: 100%;
		margin: 0;
		font-size: 0.875rem; /* eq 14px */
		background-color: var(--content-background-color);
	}
	div.header-control-search button.button-search {
		border: 0;
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
		border-top-right-radius: 15px;
		border-bottom-right-radius: 15px;
		padding: 10px 5px;

		background-color: var(--content-background-color);
		background-image: url(../images/magnifier.png);
		background-repeat: no-repeat;
		background-size: 40%;
		background-position: center center;

		width: 45px;
		height: 100%;

		/* Hide the text. */
		text-indent: 150%;
		white-space: nowrap;
		overflow: hidden;
		box-sizing: border-box;
	}
	div.header-control-search input.input-search:focus, div.header-control-search button.button-search:focus {
		outline: 0;
	}

	.responsive-menu-inner > button, .responsive-menu-inner .button {
		display: block;
		width: 100%;
		background-color: var(--header-element-color);
		border-radius: 15px;
		margin: 10px 0 0 0;
		padding: 9px 0;
		cursor: pointer;
		text-align: center;
		position: relative;
	}
	.responsive-menu-inner > button, .responsive-menu-inner .button .fas {
		display: block;
		position: absolute;
		top: 4px;
		right: 20px;
		font-size: 24px;
	}
	.responsive-menu-inner > button, .responsive-menu-inner .account-menu {
		box-sizing: border-box;
		padding: 0 20px;
	}

	.header-control-setting-fontsize {
		float: left;
		margin-left: 30px;
	}
	.header-control-setting-fontsize a {
		text-decoration: none;
		display: inline-block;

		color: var(--header-element-color);
		width: 26px;
		height: 26px;
		text-align: center;
		border-radius: 13px;
		margin-bottom: 10px;

		display: block;
		float: left;
		margin-right: 5px;
	}
	/*
	.header-control-setting-fontsize a.active {
		background-color: #fff;
	}
	*/
	.header-control-setting-fontsize a.fontsize-small {
		font-size: 19px; /* 1.2rem normally */
		line-height: 24px; /* 1.5rem normally */
		background-color: #fff;
	}
	.font-large .header-control-setting-fontsize a.fontsize-small {
		background-color: inherit;
	}
	.header-control-setting-fontsize a.fontsize-large {
		font-size: 32px; /* 2rem normally */
		line-height: 20px; /* 1.2rem normally */
	}
	.font-large .header-control-setting-fontsize a.fontsize-large {
		background-color: #fff;
	}

	.header-control-setting-language {
		float: right;
		margin-right: 30px;
		margin-bottom: 10px;
	}
	.header-control-setting-language a {
		display: inline-block;
		width: 27px;
		height: 27px;
		text-align: center;
		font-size: 16px;
		line-height: 28px;
		margin-left: 5px;
	}
	.header-control-setting-language a.active {
		background-color: var(--content-background-color);
	}

	div.header a.responsive-button-cart {
		display: block;
		font-size: 12px;

		color: #fff;
		text-decoration: none;

		background-image: url(../images/winkelwagen.png);
		background-size: 40px 40px;
		background-repeat: no-repeat;
		background-color: inherit;
		height: 45px;
		width: 45px;
		top: 18px;
		right: 20px;

		box-sizing: border-box;

		border-radius: 0;

		position: absolute;
	}
	div.header a.responsive-button-cart span.txt {
		display: none;
	}
	div.header a.responsive-button-cart span.badge {
		display: inline-block;
		text-indent: 0;
		position: absolute;
		width: 16px;
		height: 16px;
		border-radius: 8px;
		border: 1px solid #fff;

		top: 7px;
		left: 7px;

		text-align: center;

		box-sizing: border-box;

		background-color: #f00;
		padding: 0;
	}
	div.header a.responsive-button-cart span.badge.badge-wide {
		width: 24px; /* this is for numbers > 99 */
		left: 2px;
	}

	.responsive-menu ul.ordergroups {
		display: block;
		width: auto;
		margin: 0;
		border-top: 2px solid var(--header-element-color);
		background-color: var(--header-background-color);
	}
	.responsive-menu ul.ordergroups ul.ordergroups {
		border-left: 1px solid var(--header-element-color);
	}
	.responsive-menu ul.ordergroups li {
		padding: 12px 0 12px 20px;
	}
	.responsive-menu ul.ordergroups li:hover {
		background-color: var(--header-element-color);
	}
	.responsive-menu ul.ordergroups a {
		color: #fff;
	}
	.responsive-menu form.search {
		display: block;
	}

	.responsive-menu ul.ordergroups label {
	    color: #fff;
	}

	div.main {
		max-width: 100%;
		padding: 0;
	}
	ul.breadcrumbs {
		padding: 0 0 0 10px;
		/*
		position: relative;
		margin-top: -44px;
		margin-bottom: 44px;
		*/
	}
	ul.breadcrumbs li.active a, ul.breadcrumbs li.active span {
		border-bottom: none;
	}
	div.viewcontrols > a, div.viewcontrols > span,
	div.viewcontrols > a.active, div.viewcontrols > span.active {
		border-bottom: none;
	}

	div.block {
		border-radius: 0;
		margin: 0;
	}
	div.welcome, div.information {
		display: block;
		width: auto;
		padding: 0;
	}
	div.information { text-align: center; }

	div.service-row {
		display: block;
		width: auto;
	}
	div.service-column-1, div.service-column-2, div.service-column-3 {
		display: block;
		width: auto;
		min-width: auto;
	}
	div.service-column-1 {
		margin: 0 0 20px 0;
	}
	div.contact-form input.form-input, div.contact-form textarea.form-input {
		/*width: calc(100vw - 40px);*/
		width: 100%;
	}
	div.contact-form div.contact-form-bottom span {
		display: block;
		margin: 5px 0 0 5px;
	}
	div.question-block.open p.question-block-answer {
		margin: 0 0 10px 0;
	}

	p.footer {
		margin: 10px 0 0 0;
	}

	div.input-row,
	div.input-row div.cart-column-1, div.input-row div.cart-column-2 {
		display: block;
		width: auto;
		margin: 0 0 10px 0;
	}
	div.cart-column-1 h2.cart-title {
		padding: 0;
	}
	div.form-control {
		display: block;
		margin-top: 5px;
	}
	input.form-input.form-input-wide, textarea.form-input.form-input-wide,
	input.form-input.form-input-medium,
	input.form-input.form-input-narrow,
	input.form-input, textarea.form-input { width: 100%; margin-bottom: 5px; }

	div.button-block > div.multiple-buttons {
		top: calc(100% - 23px);
	}

	label.radio-label, label.checkbox-label {
		display: block;
		width: 100%;
		margin-bottom: 10px;
	}
	div.form-control-select {
		/*display: block;*/
		width: 100%;
	}
	div.form-control select,
	div.form-control select[name=country] {
		width: 100%;
		min-width: auto;
	}
	div.form-control button.select-button {
		margin-right: 0;
	}
	button.form-button, a.form-button {
		width: 100%;
		margin-bottom: 10px;
	}
	table.summary-table {
		margin: 25px 0 35px auto;
	}

	div.cart-row {
		padding: 0;
		margin-bottom: 20px;
	}
	div.cart-row-part1,
	div.cart-row-part2 {
		display: block;
	}
	div.cart-row-part2 {
		max-width: 400px;
		margin: 20px 0 0 auto;
	}
	div.cart-row p.product-title {
		font-size: 22px;
	}
	div.cart-control p.product-price {
		margin: 0 0 6px 0;
		line-height: 20px;
	}
	div.amount-modifier > button {
		line-height: 18px;
	}

	/* order history */
	div.order-history {
		display: block;
		padding: 0;
	}
	div.order-history ul.order-list {
		display: none;
	}
	div.order-history div.block-container {
		display: block;
	}
	div.order-history div.order-overview > div.order-books {
		width: auto;
	}
	div.order-history div.order-overview > div.order-info {
		width: 100%;
		padding: 0 20px;
	}
	div.order-history a.form-button {
		width: auto;
	}
	/* hide all but the first image in the overview */
	div.order-books-list > img { display: none; }
	div.order-books-list > img:first-child { display: block; }

	div.products {
		display: block;
		padding: 10px 0;
		margin: 0 -20px;
		width: calc(100% + 40px);
	}

	div.products.view-extended div.product,
	div.products.product-page div.product {
		padding: 20px 10px;
		max-width: 100%;
		box-sizing: border-box;

		display: flex;
		flex-wrap: wrap;
	}
	div.products.view-extended div.product.dummy-product {
		display: none;
	}

	div.products.view-extended div.product > .product-image,
	div.products.product-page div.product > .product-image {
		order: 1;
		margin: 0 0 0 10px;
	}
	div.products.view-extended div.product > .product-info,
	div.products.product-page div.product > .product-info {
		order: 3;
		width: 100%;
	}
	div.products.view-extended div.product > .product-actions,
	div.products.product-page div.product > .product-actions {
		order: 2;

		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		align-items: flex-start;

		max-width: calc(100% - 145px);
	}

	div.products.view-extended div.product > .product-actions > .catalog-controls,
	div.products.product-page div.product > .product-actions > .catalog-controls {
		order: 2;
		display: flex;
		flex-direction: row;
	}
	div.products.view-extended div.product > .product-actions > .catalog-specs,
	div.products.product-page div.product > .product-actions > .catalog-specs {
		order: 1;
		padding: 0 10px;
		width: 100%;
		box-sizing: border-box;
	}
	div.products.view-extended div.product > .product-actions > .catalog-controls > .catalog-control:nth-child(1),
	div.products.product-page div.product > .product-actions > .catalog-controls > .catalog-control:nth-child(1) {
		padding: 15px 0 0 10px;
	}
	div.products.view-extended div.product > .product-actions > .catalog-controls > .catalog-control:nth-child(2),
	div.products.product-page div.product > .product-actions > .catalog-controls > .catalog-control:nth-child(2) {
		padding: 15px 0 0 0;
		margin: 0 0 0 10px;
	}
	div.products.view-extended div.product > .product-actions > .catalog-controls .catalog-control-amount,
	div.products.product-page div.product > .product-actions > .catalog-controls .catalog-control-amount {
		display: none;
	}
	div.products.product-page div.product > .product-actions > .catalog-controls > div.catalog-control:nth-child(3) {
		display: none;
	}

	div.products.view-list div.product {
		padding: 20px 0 0 0;
	}
	div.products.view-list div.product > .product-actions > .catalog-controls .catalog-control-amount {
		display: none;
	}
	div.products.view-list div.product > .product-description,
	div.products.view-list div.product > .product-actions {
		width: 100%;
		margin: 0;
	}
	div.products.view-list div.product > .product-actions {
		display: flex;
		flex-direction: column;
		margin-bottom: 20px;
	}
	div.products.view-list div.product > .product-actions .catalog-controls {
		order: 2;
	}
	div.products.view-list div.product > .product-actions .catalog-specs {
		order: 1;
		margin: 0 0 10px 0;
	}
	div.products.view-list div.product .product-price {
		min-width: 98px;
	}
	div.products.view-list div.product p.product-title {
		margin-bottom: 10px;
	}

	table.basket td.subtable-container {
		padding: 0;
	}
	/* don't switch last-child and first-child because some cells are both */
	table.basket td:last-child, table.basket th:last-child { padding-left: 20px; }
	table.basket td:first-child, table.basket th:first-child { padding-left: 0; }
	.basket-right { white-space: nowrap; }
	table.basket tr.responsive-prices td {
		padding-bottom: 10px;
	}

	div.viewcontrols {
		right: 0;
	}

	div.products.view-grid div.product {
		/*min-width: calc(33% - 17px);*/
		/*max-width: calc(33% - 17px);*/
		width: calc(33% - 17px);
		min-width: calc(100% / 3);
		max-width: calc(100% / 3);
		width: calc(100% / 3);
	}


	.main-decorations {
		display: flex;
		height: 48px;
	}
	div.breadcrumbs-outer {
		/*direction: rtl;*/
		position: relative;
		overflow: hidden;
		width: 100%;
	}
	ul.breadcrumbs {
		position: relative;
		display: inline-block;
		right: 0;
		width: auto;
		white-space: nowrap;
		/*direction: ltr;*/
	}
	ul.breadcrumbs > * {
	}
	div.viewcontrols {
		position: relative;
	}

	/* block-home can be used on the home page for the "band" setup */
	div.block-home {
		display: flex;
		flex-direction: column;
	}
	/*
	div.block-home > ul.ordergroups {
		order: 2;
		width: 100%;
		margin-left: 0;
		padding: 0 20px;
		box-sizing: border-box;
	}
	div.block-home > .welcome button.banner {
		max-width: 450px;
		margin: 0 auto;
		display: block;
	}
	div.block-home > .customerservice {
		order: 1;
		width: 100%;
		box-sizing: border-box;
		margin-left: 0;
		padding: 0;
		margin-bottom: 20px;
	}
	div.block-home > .welcome .box-spacing {
		padding: 0 20px;
	}
	div.block-home > .welcome .box.box-large {
		height: auto;
	}
	div.block-home > .welcome.home.left {
		width: 100%;
	}
	div.block-home > .welcome .home.right {
		display: none;
	}
	*/

	div.block-home div.home-left-column,
	div.block-home div.popularArticles,
	div.block-home div.information {
		display: none;
	}
	div.block-home div.welcome {
		display: block;
		padding: 0 20px;
	}
}

@media (max-width: 1000px) {
	div.products.view-grid div.product {
		/*
		min-width: calc(50% - 20px);
		max-width: calc(50% - 20px);
		width: calc(50% - 20px);
		*/
		min-width: 50%;
		max-width: 50%;
		width: 50%;
	}
}
@media (max-width: 650px) {
	div.products.view-grid div.product {
		min-width: 100%;
		max-width: 100%;
		width: 100%;
	}
}

iframe {
	width: 100%;
	height: 100%;
}

div.product-image-inner {
	display: block;
	position: relative;
}
div.product-image-inner a.button {
	position: absolute;
	bottom: 10px;
	left: 5px;
	border: 1px solid #fff;
}