@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700&display=swap&subset=latin-ext');

:root
{
 --color-red: #92278f;
}

*
{
 padding: 0;
 margin: 0;
 box-sizing: border-box;
}

html
{
 min-height: 100%;
 overflow-y: scroll;
}

body
{
 height: 100%;
 margin: 0;
 font-family: 'Open Sans', arial, sans-serif;
 font-size: 11pt;
 line-height: 1.5em;
 color: #000;
}

.center
{
 text-align: center !important;
}

.right,
.r
{
 text-align: right !important;
}

.left,
.l
{
 text-align: left;
}

.float-right
{
 float: right !important;
}

.float-left
{
 float: left !important;
}

.vertical-middle > *
{
 display: inline-block !important;
 vertical-align: middle !important;
}

.clr
{
 clear: both;
}

.nowrap
{
 white-space: nowrap;
}

a
{
 color: #000;
 text-decoration: none;
 transition: color 300ms;
}

a:hover
{
 color: var(--color-red);
 transition: color 300ms;
}

a.u
{
 text-decoration: underline;
}

small,
.small
{
 font-size: .8em;
}

.big
{
 font-size: 1.5em;
}

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

h1
{
 font-size: 2em;
 line-height: 1.3em;
 font-weight: normal;
 margin-bottom: 1em;
}

h2
{
 font-size: 1.3em;
 font-weight: bold;
 margin: 1.5em 0 1em 0;
}

h3
{
 font-size: 1.2em;
 font-weight: bold;
 margin-bottom: 1em;
 text-transform: uppercase;
}

h4
{
 font-size: 1.2em;
 font-weight: normal;
 margin-bottom: .25em;
}

p
{
 margin-bottom: 1em;
}

ul
{
 list-style: none;
 margin-bottom: 1em;
}

article ul
{
 list-style: disc;
 margin-left: 1.5em;
 margin-bottom: 1em;
}

input.i
{
 height: 40px;
 padding: 10px;
 border-radius: 2px;
 border: 1px solid #888;
 font-size: 0.875rem;
}

textarea
{
 outline: 0;
 padding: 10px;
 resize: vertical;
 font: inherit;
 font-size: inherit;
 font-family: inherit;
}

#msg
{
 position: fixed;
 top: 60px;
 left: 50%;
 transform: translate(-50%);
 z-index: 110;
 width: 80%;
 max-width: 500px;
 padding: 1.5em 3em;
 background-color: #fff;
 cursor: pointer;
 border-radius: 2px;
 -webkit-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
 -moz-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
 box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
 text-align: center;
 border: 1px solid var(--color-red);
}

#msg::after
{
 content: "x";
 position: absolute;
 top: 5px;
 right: 10px;
 font-size: 12px;
}

#msg.warning
{
 color: var(--color-red);
}

#msg.error
{
 background-color: var(--color-red);
 color: #fff;
 font-weight: bold;
}


.cols2
{
 width: 50%;
 display: inline-block;
 vertical-align: top;
}

.cols3
{
 width: 30%;
 margin-right: 5%;
 display: inline-block;
 vertical-align: top;
}

.cols3:nth-child(3n)
{
 margin-right: 0;
}

.mobile-only
{
 visibility: hidden;
 width: 0;
 height: 0;
}

button.nostyle
{
 background-color: transparent;
 border: 0;
}

.button
{
 cursor: pointer;
 -webkit-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
 -moz-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
 box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
 transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
 -moz-osx-font-smoothing: grayscale;
 -webkit-font-smoothing: antialiased;
 font-size: 0.875rem;
 line-height: 2.25rem;
 font-weight: 500;
 letter-spacing: 0.04em;
 text-decoration: none;
 text-transform: uppercase;
 -webkit-tap-highlight-color: transparent;
 will-change: transform, opacity;
 display: inline-block;
 position: relative;
 box-sizing: border-box;
 min-width: 64px;
 height: 40px;
 padding: 0 16px;
 border: none;
 outline: none;
 text-align: center;
 webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
 -webkit-appearance: none;
 overflow: hidden;
 vertical-align: middle;
 border-radius: 2px;
 background-color: var(--color-red);
 color: #fff !important;
 margin-bottom: .5em;
 transition: all 300ms;
}

.button:disabled,
.button:disabled:hover,
.button-disabled,
.button-disabled:hover
{
 background-color: #888 !important;
 cursor: default !important;
}

.button:hover
{
 background-color: #fff !important;
 color: #000 !important;
 transition: all 300ms;
}

.button > svg,
.button:hover > svg
{
 transition: fill 300ms;
}

.button-small
{
 height: 20px;
 min-width: 40px;
 font-size: .7rem;
 line-height: 1.3rem;
 padding: 0 16px 21px 16px;
}

.button-gray
{
 background-color: #ddd;
 color: #000 !important;
}

.button-gray:hover
{
 background-color: var(--color-red) !important;
 color: #fff !important;
}

.text-button
{
 cursor: pointer;
 font-weight: bold;
 letter-spacing: 0.04em;
 text-decoration: none;
 text-transform: uppercase;
 color: var(--color-red);
 padding: 5px;
}

.text-button:hover
{
 background-color: #ddd;
}

.text-button-small
{
 font-size: .7rem;
}

#go-to-top
{
 position: fixed;
 bottom: 20px;
 right: 20px;
 background-color: #eee;
 text-align: center;
 padding: 10px;
 z-index: 500;
 display: none;
 -webkit-box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.3);
 -moz-box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.3);
 box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.3);
}

#go-to-top > svg
{
 display: block;
}

/* */

header
{
 position: fixed;
 width: 100%;
 top: 0;
 left: 0;
 padding: 10px 0 5px 0;
 background-color: var(--color-red);
 z-index: 10000;
 -webkit-box-shadow: 0px 5px 5px -5px rgba(0,0,0,0.5);
 -moz-box-shadow: 0px 5px 5px -5px rgba(0,0,0,0.5);
 box-shadow: 0px 5px 5px -5px rgba(0,0,0,0.5);
}

#logo
{
 display: inline-block;
 width: 223px;
 height: 50px;
 background: url(/img/kvint-r-logo-gray.png) no-repeat;
 background-size: 100%;
 transition: all 500ms;
 vertical-align: middle;
}

header.fixed #logo
{
 width: 134px;
 height: 30px;
 transition: all 500ms;
}

.header-title
{
 display: inline-block;
 vertical-align: middle;
 margin-left: 10px;
 font-size: 16;
 color: #fff;
}

.wrapper
{
 margin: 0 auto;
 padding: 0 20px;
 max-width: 1200px;
}

header > div.wrapper
{
 position: relative;
}

header a
{
 color: #fff;
}

header a:hover
{
 color: #ccc !important;
}

nav#icons
{
 float: right;
}

nav#icons img,
nav#icons svg
{
 margin: 14px 0 0 20px;
 transition: all 500ms;
}

nav#icons > a
{
 cursor: pointer;
 display: inline-block;
}

header.fixed nav#icons img,
header.fixed nav#icons svg
{
 transition: all 500ms;
 margin: 3px 0 0 20px;
}

#search-bar {position: absolute; width: 100%; height: 100%; top: 0; z-index: 110; background-color: #ccc; padding: 20px; text-align: center; display: none;}
#search-bar input {width: 90%; max-width: 1000px; height: 100%; padding: 5px;}
#search-form button {margin-left: 10px;}
#search-close {display: inline-block; margin-left: 20px; vertical-align: middle; cursor: pointer;}
#search-close > svg {fill: var(--color-red);}

nav#menu {float: right;}
nav#menu > ul {list-style-type: none; margin-top: 14px; transition: all 500ms;}
nav#menu > ul > li {display: inline-block; margin-left: 1em;}
nav#menu > ul > li:first-child {margin-left: 0;}
nav#menu > ul > li > a {display: block; text-decoration: none; text-transform: uppercase;}
nav#menu > ul > li > a:hover {color: var(--color-red);}
header.fixed nav#menu > ul {margin-top: 4px;  transition: all 500ms;}
#menu-h {display: none; float: right; cursor: pointer; margin: 8px 0 0 20px; transition: all 500ms;}
#menu-h > svg {fill: #fff; transition: fill 300ms;}
#menu-h:hover > svg {fill: #ccc; transition: fill 300ms;}
header.fixed #menu-h {margin: 2px 0 0 20px; transition: all 500ms;}

footer
{
 margin-top: 40px;
 color: #888;
 text-align: center;
}

footer a
{
 color: #888;
}

footer > .wrapper
{
 border-top: 1px solid #ddd;
 padding: 20px;
}

footer span
{
 white-space: nowrap;
}

#content
{
 padding-top: 100px;
}

.content ul
{
 list-style: disc;
 padding-left: 1.5em;
 margin-bottom: 1em;
}

#main
{
 width: 80%;
 float: right;
}

#popup-container
{
 position: fixed;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
 z-index: 10000;
 background-color: #333;
 background-color: rgba(0, 0, 0, 0.8);
}

#popup--content
{
 width: auto;
 position: relative;
 margin: 5% auto;
 box-sizing: border-box;
 padding: 20px 40px;
 text-align: center;
}

#popup--content img
{
 display: inline-block;
 max-width: 100%;
}

#popup-close
{
 color: #fff;
 margin: 1em auto 0 auto;
 cursor: pointer;
 text-align: center;
}

/* news */

ul#news
{
 margin-bottom: 2em;
 list-style: disc;
 margin-left: 1.5em;
}

ul#news > li
{
 margin-bottom: .25em;
}

/* Products */

#left
{
 width: 20%;
 float: left;
 padding-right: 20px;
}

#left > div
{
 margin-bottom: 2em;
}
/*
#left ul
{
 list-style: none;
 font-size: .8em;
 line-height: 1.8em;
 margin-bottom: .5em;
}
*/
#left h4
{
 text-transform: uppercase;
}

ul#brands > li
{
 line-height: 1.75em;
}

ul#brands input[type=checkbox]:checked + label
{
 font-weight: bold;
}

ul#brands a
{
 display: inline-block;
 padding: 2px 0;
}

ul#brands a.active
{
 font-weight: bold;
}

ul#category
{
 width: 100%;
}

ul#category > li
{
 position: relative;
 width: 100%;
 line-height: 1.75em;
}

span.category-open
{
 display: inline-block;
 position: absolute;
 top: 0;
 right: 4px;
 vertical-align: middle;
 padding: 0 5px 0 15px;
 cursor: pointer;
}

span.category-open:after
{
 content: "+";
}

li.open span.category-open:after
{
 content: "–";
}

ul#category > li > a
{
 display: inline-block;
 width: 100%;
 padding: 2px 4px 2px 0;
}

ul#category > li > ul
{
 display: none;
 margin-left: 12px;
 padding-right: 8px;
}

ul#category > li.active > a
{
 font-weight: bold;
}

ul#category > li.open > ul
{
 display: block;
}

ul#category > li.open > a
{
 background-color: #eee;
 border-radius: 2px;
 margin: 0 -4px;
 padding: 2px 8px 2px 4px;
}

ul#category > li > ul > li
{
 font-size: .9em;
}

ul#category > li > ul > li.i
{
 font-style: italic;
}

ul#category > li > ul > li.active
{
 font-weight: bold;
}

ul#category > li > ul > li > a
{
 display: inline-block;
 width: 100%;
}

.breadcrumb
{
 font-size: .8em;
 margin-bottom: 1em;
}

ul.product-list
{
 list-style: none;
 margin-bottom: 2em;
}

ul.product-list > li
{
 display: inline-block;
 position: relative;
 vertical-align: top;
 width: 33.3333333%;
 padding: 0 20px 40px 20px;
}

ul.product-list > li:hover > .image img
{
 transform: scale(1.1);
 transition: transform 300ms;
}

/*
ul.product-list > li:hover:after
{
 position: absolute;
 content: " ";
 top: -5px;
 left: -5px;
 padding: 5px;
 border: 1px solid #ccc;
 width: 100%;
 height: 100%;
 z-index: 100;
 pointer-events: none;
}
*/
ul.product-list > li > .info > a.name
{
 color: var(--color-red);
 font-weight: bold;
}

ul.product-list > li > .image
{
 position: relative;
 display: block;
 text-align: center;
 height: 150px;
 overflow: hidden;
 margin-bottom: 10px;
}

ul.product-list > li > .image img
{
 display: inline-block;
 max-width: 100%;
 max-height: 100%;
 transition: transform 300ms;
}

ul.product-list .price
{
 line-height: 1.2em;
 font-weight: bold;
}

ul.product-list li:hover a
{
 color: var(--color-red);
 transition: color 300ms;
}

.sale
{
 color: var(--color-red);
}

ul.product-list .normal-price,
.recommended .normal-price
{
 font-size: .8em;
 font-style: italic;
}

ul.product-list .price > span
{
 font-size: .8em;
 font-weight: normal;
 color: #000;
}

ul.product-list .price > .basket
{
 float: right;
}

.list-desc
{
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: calc(100% - 40px);
 display: none;
 background: rgba(255, 255, 255, .95);
 border: 1px solid #ccc;
 padding: 10px;
 cursor: pointer;
 font-size: .8em;
 line-height: 1.5em;
 overflow: hidden;
 z-index: 101;
}

.list-desc-toggle
{
 position: absolute;
 top: 0;
 right: 20px;
 width: 24px;
 height: 24px;
 font-size: 18px;
 text-align: center;
 line-height: 12px;
 cursor: pointer;
 border: 1px solid #888;
 background-color: #fff;
 color: #333;
 border-radius: 50%;
 padding: 5px;
 overflow: hidden;
 z-index: 100;
}

.list-desc-toggle:hover
{
 background-color: var(--color-red);
 border: 1px solid var(--color-red);
 color: #fff;
}

.list-badge
{
 position: absolute;
 top: 0;
 left: 0;
 z-index: 100;
}

.basket-icon
{
 background-color: #ddd;
 padding: 5px;
 color: var(--color-red);
 transition: all 300ms !important;
}

.basket-icon:hover
{
 background-color: var(--color-red);
 transition: all 300ms !important;
}

.basket-icon > svg
{
 transition: fill 300ms;
}

.basket-icon:hover > svg
{
 fill: #fff;
 transition: fill 300ms;
}

/* */

#product-name
{
 width: 60%;
 float: right;
}

#product-image
{
 width: 40%;
 max-width: 370px;
 float: left;
 padding-right: 20px;
 text-align: center;
 position: relative;
}

#product-image img
{
 max-width: 100%;
}

.product-badge
{
 position: absolute;
 top: 0;
 left: 0;
 z-index: 100;
}

li.gallery-video
{
 position: relative;
}

li.gallery-video:after
{
 position: absolute;
 content: " ";
 top: 0;
 right: 0;
 width: 20px;
 height: 20px;
 background: url(/img/icon-play-red.svg) no-repeat;
}


/* !!!!!!!!!!!!!!!!!! */
ul#slider
{
 list-style: none;
 text-align: center;
}

ul#slider > li
{
 display: inline-block;
 vertical-align: top;
 margin: 2px;
 border: 1px solid transparent;
 max-width: 29%;
}

ul#slider > li:hover
{
 border: 1px solid #ccc;
}

#product-desc
{
 width: 60%;
 float: left;
}

#product-brandlogo
{
 float: right;
 margin: 0 0 20px 20px;
}

#product-name.noimage,
#product-desc.noimage
{
 width: 100%;
}

#product-price > span
{
 color: var(--color-red);
 font-weight: bold;
 font-size: 1.5em;
}

#product-basket
{
 float: right;
 text-align: right;
 margin-top: 1em;
}

#discount-prices
{
 margin-top: .5em;
}

#discount-prices > table
{
 border-collapse: collapse
}

#discount-prices > table tr:nth-child(even)
{
 background-color: #f8f8f8;
}

#discount-prices > table tr:nth-child(odd)
{
 background-color: #eee;
}

#discount-prices > table td
{
 padding: 3px 10px;
}

.product-block-long
{
 max-height: 16em;
 overflow: hidden;
 position: relative;
}

.product-block-long.show
{
 max-height: none;
}

.product-block h3
{
 position: relative;
 width: 100%;
 background: linear-gradient(90deg, rgba(146,39,143,1) 0%, rgba(177,59,163,1) 100%);
 border-radius: 2px;
 padding: 5px 10px;
 color: #fff;
 margin-top: 2em;
}

.product-block-long h3
{
 cursor: pointer;
}

.product-block-long h3::after
{
 content: " ";
 position: absolute;
 bottom: 7px;
 right: 10px;
 width: 20px;
 height: 20px;
 background: url(/img/block-open.png) no-repeat;
 transition: all 300ms;
 transform: rotate(-90deg);
}

.product-block-long.show h3::after
{
 background: url(/img/block-close.png) no-repeat;
 transition: all 300ms;
 transform: rotate(0deg);
}

.product-block-long::after
{
 content: " ";
 position: absolute;
 left: 0;
 bottom: 0;
 width: 100%;
 padding-top: 8em;
 background: linear-gradient(to bottom, transparent, white);
 pointer-events: none;
 z-index: 100;
}

.product-block-long.show::after
{
 display: none;
}

.product-block-more
{
 position: absolute;
 bottom: 0;
 left: 0;
 width: 100%;
 text-align: center;
 z-index: 101;
 cursor: pointer;
}

.product-block-long.show .product-block-more
{
 display: none;
}

.product-block-open
{
 display: block;
 position: absolute;
 top: 8px;
 right: 10px;
 content: " ";
 width: 1em;
 height: 1em;
 color: #fff;
 background-color: #fff;
}

.product-block ul
{
 list-style: disc;
 margin-left: 2em;
}

.basket-qty
{
 display: inline-block;
 vertical-align: top;
 margin-bottom: 2px;
 text-align: center;
 line-height: 2.25rem;
}

.product-basket-button > svg
{
 fill: #fff;
 vertical-align: text-bottom;
 padding-top: 5px;
}

.product-basket-button:hover > svg
{
 fill: #000;
}

table.tech
{
 border-collapse: collapse;
 overflow: scroll;
}

table.tech > tbody > tr:hover
{
 background-color: #f8f8f8;
}

table.tech > tbody > tr > td
{
 font-size: .9em;
 padding: 3px;
 border-bottom: 1px solid #ddd;
 vertical-align: top;
}

table.tech > tbody > tr > td:first-child
{
 width: 20%;
 font-weight: bold;
}

table.prodlist
{
 border-collapse: collapse;
 width: 100%;
}

table.prodlist > tbody > tr > td
{
 font-size: .9em;
 padding: 3px;
 border-bottom: 1px solid #ddd;
}

table.prodlist > tbody > tr:hover
{
 background-color: #f8f8f8;
}

table.prodlist .price
{
 font-weight: bold;
}

table.prodlist .price > span
{
 font-weight: normal;
}

.image-th
{
 width: 50px;
}

.recommended > div
{
 display: inline-block;
 vertical-align: top;
 width: 20%;
 padding: 10px;
 text-align: center;
 font-size: .8em;
 line-height: 1.5em;
}

/* Basket */

table.basket
{
 width: 100%;
 border-collapse: collapse;
 margin-bottom: 1em;
}

table.basket > thead > tr
{
 background-color: var(--color-red);
}

table.basket > thead > tr > th
{
 text-align: left;
 color: #fff;
 padding: 5px;
}

table.basket > tbody > tr
{
 border-bottom: 1px solid #ddd;
}

table.basket > tbody > tr:last-child
{
 border-bottom: 0;
}

table.basket td
{
 padding: 5px;
}

table.basket > tfoot > tr
{
 background-color: #ddd;
 border-bottom: 1px solid #fff;
}

.basket-list-qty {text-align: center;}
.basket-list-sum {text-align: right;}

#basket-cond
{
 display: none;
 max-width: 500px;
 position: absolute;
 top: 40px;
 right: 0;
 background-color: #eee;
 padding: 20px 20px 20px 20px;
 -webkit-box-shadow: 0px 5px 5px -5px rgba(0,0,0,0.5);
 -moz-box-shadow: 0px 5px 5px -5px rgba(0,0,0,0.5);
 box-shadow: 0px 5px 5px -5px rgba(0,0,0,0.5);
 transition: all 500ms;
}

#basket-cond table
{
 width: 100%;
 font-size: .8em;
 margin-bottom: .5em;
 padding-top: .5em;
 border-top: 1px solid #aaa;
}

#basket-cond table td
{
 vertical-align: bottom;
}

#basket-cond a
{
 color: #000;
}

#icons-basket
{
 position: relative;
}

#basket-count
{
 position: absolute;
 top: 0;
 right: 0;
 width: 24px;
 text-align: center;
 color: #fff;
 font-size: .8em;
 transition: all 500ms;
}

header.fixed #basket-count
{
 top: -11px;
 transition: all 500ms;
}

header.fixed #basket-cond
{
 top: 25px;
 transition: all 500ms;
}

#icons-basket:hover + #basket-cond,
#basket-cond:hover
{
 display: block;
}

#mpl-shipping-info
{
 color: var(--color-red);
}

/* Login/registration/user */

.login
{
 width: 60%;
 max-width: 20em;
 margin: 0 auto;
 text-align: left;
}

.login input,
.reg input,
.shipping-address input
{
 width: 100%;
}

.reg p
{
 width: 90%;
}

table.user-data
{
 border-collapse: collapse;
 width: 100%;
}

table.user-data td:first-child
{
 font-weight: bold;
 vertical-align: top;
 padding-right: 1em;
}

table.user-data td
{
 font-size: .9em;
 padding: 3px 0px;
 border-bottom: 1px solid #ddd;
}

.order-details
{
 cursor: pointer;
}

#order-popup-container
{
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 1500;
 background-color: #333;
 background-color: rgba(0, 0, 0, 0.7);
 display: none;
}

#order-popup
{
 position: relative;
 margin: 5% auto;
 width: 1000px;
 max-width: 96%;
 box-sizing: border-box;
 background-color: #fff;
 padding: 20px;
}

.popup-close
{
 float: right;
 cursor: pointer;
}

/* Slider */

.index-image
{
 float: left;
 width: 67%;
}

.index-text
{
 float: left;
 width: 33%;
 padding: 20px;
 background-color: #444;
 color: #fff;
}

.index-text h1,
.index-text h1 a
{
 color: #fff;
}

/* MEDIA QUERIES */

@media screen and (max-width: 1000px)
{
 ul.product-list > li {width: 50%;}
 .index-image {width: 100%;}
 .index-image img {width: 100%;}
 .index-text {width: 100%;}
 .header-subtitle {display: none;}
}

@media screen and (max-width: 1000px) and (min-width: 801px)
{
 .cols3 {width: 47.5%; margin-right: 5%; margin-bottom: 20px;}
 .cols3:nth-child(3n) {margin-right: 5%;}
 .cols3:nth-child(2n+1) {margin-right: 0;}
}

@media screen and (max-width: 900px)
{
 #left {width: 25%;}
 #main {width: 75%;}
 table.user-data td:first-child {width: 15em;}
 .recommended {text-align: center;}
 .recommended > div {width: 33%;}
}

@media screen and (max-width: 800px)
{
 .cols2 {width: 100%; margin-bottom: 20px;}
 .cols3 {width: 100%; margin-right: 0; margin-bottom: 20px;}

 nav#menu {display: none;}
 #menu-h {display: block;}
 .wrapper {padding: 0 10px;}
 nav#menu > ul {list-style-type: none; width: 100%; background-color: #eee; position: absolute; top: 30px; right: 0; margin-bottom: 1em; height: auto; z-index: 9999; padding: 0 0 .5em 0; margin-right: 0;  -webkit-box-shadow: 0px 5px 5px -5px rgba(0,0,0,0.5); -moz-box-shadow: 0px 5px 5px -5px rgba(0,0,0,0.5); box-shadow: 0px 5px 5px -5px rgba(0,0,0,0.5);}
 nav#menu > ul > li {display: block; text-align: right; padding: .5em 1em;}
 nav#menu > ul > li > a {display: block; text-decoration: none; text-transform: uppercase; color: #000;}
 header.fixed nav#menu >ul {top: 40px;}
 .mobile-only {visibility: visible; width: auto; height: auto;}
 #left {display: none; width: 100%; float: none; padding: 10px; border-bottom: 1px solid #ccc; border-left: 1px solid #ccc; border-right: 1px solid #ccc; border-radius: 2px; margin-bottom: 1em;}
 #left > div:last-child {margin-bottom: 0;}
 #main {width: 100%; float: none; margin-top: 1em;}
 .reg p {width: 100%;}

 #category-show {position: relative; width: 100%; background-color: #eee; padding: 5px 10px; cursor: pointer; border: 1px solid #ccc; border-radius: 2px; background-color: var(--color-red); color: #fff;}
 #category-show:after {position: absolute; top: 5px; right: 10px; font-size: 20px; color: #fff; content: "▾";}
}

@media screen and (max-width: 600px)
{
 .desktop-only {display: none;}
 #icons > img, #icons > svg {margin: 10px 0 0 20px;}
 ul.product-list > li {width: 100%; padding: 0 0 40px 0;}
 ul.product-list > li > .image {width: 37%; margin-right: 3%; display: inline-block; vertical-align: top;}
 ul.product-list > li > .info {width: 60%; display: inline-block; vertical-align: top;}
 ul.product-list > li > .info.noimage {width: 100%;}
 ul.product-list > li > .info > .name {padding-right: 30px;}
 #product-name, #product-image, #product-desc {width: 100%; float: none; margin-bottom: 20px;}
 #product-brandlogo {float: none; display: block; margin: 0 0 1em 0; text-align: center;}
 .list-desc-toggle {right: 0;}
 .float-left {float: none !important; display: block; width: 100%;}
 #product-basket {float: none; display: block; width: 100%; clear: both; margin-top: 1em;}
 #icons-basket:hover + #basket-cond, #basket-cond:hover {display: none;}

 .basket-list-image {display: block; width: 20%; float: left;}
 .basket-list-name {display: block; width: 80%; float: left; font-weight: bold;}
 .basket-list-itemprice {display: block; width: 100%; clear: both; text-align: right;}
 .basket-list-qty {display: block; width: 100%; text-align: right;}
 .basket-list-price {display: block; width: 100%; text-align: right;}
 .basket-list-sum-name {display: inline-block; width: 40%; text-align: left;}
 .basket-list-sum {display: inline-block; width: 60%; text-align: right;}
 .basket-list-itemprice:before, .basket-list-qty:before, .basket-list-price:before {content: attr(data-label); float: left;}
 #basket button {width: auto;}
}

@media screen and (max-width: 480px)
{
 h1 {font-size: 1.6em;}
 #content {padding-top: 60px;}
 header #logo, header.fixed #logo {width: 120px; height: 27px; margin-top: 3px;}
 header.fixed #icons img, #icons img, header.fixed #icons svg, #icons svg {margin: 3px 0 0 10px !important;}
 #menu >ul {top: 30px;}
 #menu-h {margin: 0 0 0 10px !important;}
 #category-show {margin-top: .5em;}
 .recommended > div {width: 50%;}
}