@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;700&display=swap');

*
{
 padding: 0;
 margin: 0;
 font-family: 'Montserrat', arial, sans-serif;
 font-size: 12pt;
 color: #000;
 box-sizing: border-box;
}

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

body
{
 height: 100%;
 margin: 0;
}

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

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

.float-right
{
 float: right;
}

.clr
{
 clear: both;
}

a
{
 text-decoration: none;
 font-size: inherit;
}

a.link,
p a,
li a
{
 border-bottom: 1px dashed #888;
}

p
{
 margin-bottom: 20px;
 line-height: 1.75em;
}

.mobile-only {display: none !important;}

ul,
ol
{
 margin: 0 0 1.5em 1.5em;
 line-height: 1.75em;
}

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

input, textarea
{
 padding: 3px;
 outline: 0;
}

.fullwidth
{
 width: 100%;
}

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

.cols2:nth-child(2n+1)
{
 margin-right: 5%;
}

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

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

#cookie-popup
{
 position: fixed;
 bottom: 0;
 left: 0;
 width: 100%;
 background-color: #aaa;
 border-top: 1px solid #000;
 padding: 1em;
 color: #fff;
 text-align: center;
 z-index: 1000;
}

#cookie-popup > input
{
 padding: .25em 1em;
 margin-top: 1em;
 cursor: pointer;
 background-color: #ecc9bc;
 text-transform: uppercase;
 font-size: 10pt;
 border: 0;
 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);
}

#cookie-popup > a
{
 color: inherit;
 border-bottom: 1px dashed #fff;
}

/* */

header
{
 width: 100%;
 top: 0;
}

header > div.wrapper
{
 padding: 10px 0 20px 0;
 border-bottom: 1px solid #bbb;
}

#logo
{
 text-align: center;
 height: 100px;
 margin: 20px 0;
}

#logo img
{
 height: 100%;
}

.wrapper
{
 margin: 0 auto;
 max-width: 1100px;
}

footer
{
 width: 100%;
 padding: 2em 0;
 background-color: #63666a;
 text-align: center;
}

footer p
{
 color: #fff;
 line-height: 1.75em;
}

footer a
{
 color: #fff;
 border: 0;
}

nav {}
nav#menu {background-color: #aaa; width: 100%; text-align: center;}
nav#menu > ul {list-style-type: none; clear: both; margin: 0; padding: 5px 0 7px 0; line-height: 1em;}
nav#menu > ul > li {display: inline-block; padding: 0 1em; position: relative; font-size: 14pt;}
nav#menu > ul > li > a {display: block; text-decoration: none; text-transform: uppercase; color: #fff; padding-top: 5px; border: 0;}
nav#menu > ul > li > a:hover {color: #000;}
nav#menu > ul > li > ul {display: none; z-index: 100;}
nav#menu > ul > li:hover > ul {display: block; position: absolute; left: -20px; top: 22px; background-color: #aaa; list-style: none; text-align: left; padding: 10px; width: 11em;}
nav#menu > ul > li > ul > li {padding: 5px; margin-left: .5em; font-size: 14pt;}
nav#menu > ul > li > ul > li.main {text-transform: uppercase; margin-left: 0;}
nav#menu > ul > li > ul > li a {color: #fff; border: 0;}
nav#menu > ul > li > ul > li a:hover {color: #000;}
#menu-h {display: none; cursor: pointer;}
#menu-h > svg {fill: #bbb;}
#menu-h:hover > svg {fill: #ecc9bc;}

#header-basket
{
 position: absolute;
 top: 20px;
 right: 20px;
}

#headline
{
 width: 100%;
 background-size: cover;
 background-position: center;
 height: 300px;
}

#content-wrapper
{
 max-width: 1100px;
 margin: 20px auto 60px auto;
}

#msg
{
 position: fixed;
 top: 0;
 right: 0;
 z-index: 110;
 width: 40%;
 max-width: 400px;
 margin: 10px;
 padding: 1.5em 3em;
 background-color: #cfc;
 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;
}

#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;
}

.video-container
{
 overflow: hidden;
 position: relative;
 width: 100%;
}

.video-container::after
{
 padding-top: 56.25%;
 display: block;
 content: "";
}

.video-container iframe
{
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

/* */

h1
{
 clear: both;
 text-transform: uppercase;
 font-size: 24pt;
 margin: .5em 0 1em 0;
 font-weight: 300;
}

h2
{
 clear: both;
 text-transform: uppercase;
 font-size: 18pt;
 margin: 0 0 .5em 0;
 font-weight: normal;
}

h3
{
 clear: both;
 text-transform: uppercase;
 font-size: 14pt;
 margin: .5em 0;
 font-weight: normal;
}

.photo-left
{
 display: inline-block;
 vertical-align: top;
 width: 35%;
 margin-right: 5%;
 margin-bottom: 2em;
}

.photo-right
{
 display: inline-block;
 vertical-align: top;
 width: 35%;
 margin-left: 5%;
 margin-bottom: 2em;
}

.photo-left > img,
.photo-right > img
{
 max-width: 100%;
}

.text-left,
.text-right
{
 display: inline-block;
 vertical-align: top;
 width: 60%;
 margin-bottom: 2em;
}

.text-left p,
.text-right p
{
 text-align: justify;
}

/* Catalogue */

#product-categories
{
 text-align: center;
}

#product-categories a
{
 position: relative;
 display: inline-block;
 width: calc(33.33333333% - 13.33333333px);
 max-width: 400px;
 margin: 0 20px 20px 0;
 overflow: hidden;
}

#product-categories.main
{
 text-align: center;
}

#product-categories.main a
{
 width: 40%;
 margin-right: 40px;
}

#product-categories.main a:nth-child(2)
{
 margin-right: 0;
}

#product-categories a:nth-child(3n)
{
 margin-right: 0;
}

#product-categories a:last-child
{
 margin-right: 0;
}

#product-categories > a > img
{
 width: 100%;
 height: 100%;
 display: block;
}

#product-categories > a > span
{
 position: absolute;
 bottom: 15%;
 left: 0;
 width: 100%;
 font-size: 24pt;
 text-transform: uppercase;
 text-align: center;
 color: #fff;
 transition: all .5s;
 background-color: rgba(0, 0, 0, .3);
}

#product-categories > a:hover > span
{
 transform: scale(1.1);
 background-color: rgba(0, 0, 0, .5);
}

.product-colors img
{
 width: 50px;
 height: 50px;
 margin: 0 5px 5px 0;
 border: 2px solid transparent;
 cursor: pointer;
}

.product-colors img.selected
{
 border: 2px solid #c00;
}

#product-gallery
{
 display: inline-block;
 vertical-align: top;
 width: 40%;
 margin-right: 5%;
}

#product-gallery a
{
 display: inline-block;
 width: 30%;
 margin: 0 5% 10px 0;
}

#product-gallery a:first-child
{
 width: 100%;
 margin: 0 0 10px 0;
}

#product-gallery a:nth-child(3n+1)
{
 margin: 0 0 10px 0;
}

#product-gallery img
{
 width: 100%;
}

#product-description
{
 display: inline-block;
 vertical-align: top;
 width: 55%;
}

#product-price
{
 font-size: 1.3em;
 margin: 1em 0 .5em 0;
}

select
{
 padding: .5em;
 outline: 0;
}

.button
{
 cursor: pointer;
 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);
 font-family: Roboto, sans-serif;
 -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: 36px;
 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: #aaa;
 color: #000;
 margin-bottom: .5em;
}

.button:disabled,
.button:disabled:hover,
.button-disabled,
.button-disabled:hover
{
 background-color: #eee;
 color: #ccc;
 cursor: default;
}

.button:hover
{
 background-color: #888;
 color: #fff;
}

.button-green
{
 background-color: #ecc9bc;
}

.text-button
{
 cursor: pointer;
 font-size: 0.875rem;
 letter-spacing: 0.04em;
 text-decoration: none;
 text-transform: uppercase;
 color: #888;
 padding: 5px;
 border: 0;
 background-color: transparent;
}

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

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

/* Basket */

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

table.basket > thead > tr
{
 background-color: #aaa;
}

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

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

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

table.basket td
{
 padding: 5px;
}

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

table.basket > tfoot > tr > td > *
{
 color: #fff;
}

table.basket span
{
 color: inherit;
}

.basket-list-image {width: 75px;}
.basket-list-qty {text-align: center;}
.basket-list-sum {text-align: right;}
.image-th {width: 75px;}
.vertical-middle > *
{
 display: inline-block !important;
 vertical-align: middle !important;
}

/* MEDIA QUERIES */

@media screen and (max-width: 1160px)
{
 #about-photo {max-width: 40%;}
 #content-wrapper {margin: 20px 20px 60px 20px;}
 nav#menu > ul > li > a {font-size: 18px;}
 #product-categories > a > span {font-size: 18pt;}
}

@media screen and (max-width: 760px)
{
 #product-categories > a > span {font-size: 18pt;}
}

@media screen and (max-width: 700px)
{
 .desktop-only {display: none;}
 h1 {margin: 0 0 .5em 0;}
 .cols2 {width: 100%; margin-bottom: 20px;}
 .cols2:nth-child(2n+1) {margin-right: 0;}
 .cols3 {width: 100%; margin-right: 0; margin-bottom: 20px;}
 #logo {margin: 10px 0;}
 #content-wrapper {margin: 20px 20px 40px 20px;}
 #menu-h {display: block; width: 35px; height: 35px; position: absolute; top: 10px; left: 10px;}
 #menu-h > img {width: 100%; height: auto; cursor: pointer;}
 nav#menu {height: 0;}
 nav#menu > ul {display: none;}
 nav#menu > ul {list-style-type: none; background-color: #b1b3b3; position: absolute; top: 50px; left: 0; height: auto; z-index: 9999; padding: 0; margin-right: 0;}
 nav#menu > ul > li {display: block; text-align: left; padding: .5em 1em;}
 nav#menu > ul > li:hover > ul {display: none; left: -24px; top: 32px; background-color: #aaa; list-style: none; text-align: left; padding: 10px;}
 nav#menu > ul > li > a {display: block; text-decoration: none; text-transform: uppercase; color: #fff;}
 #msg {width: calc(100% - 20px); max-width: 100%; min-height: 100px;}

 .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;}
 .image-th {max-width: 100%;}
 #basket button {width: auto;}

 #product-categories a {width: calc(50% - 10px);}
 #product-categories a:nth-child(3n) {margin-right: 20px;}
 #product-categories a:nth-child(2n) {margin-right: 0;}
 #product-description, #product-gallery {display: block; width: 100%; margin: 0;}
}

@media screen and (max-width: 520px)
{
 #headline {height: 200px;}
 .text-left, .text-right, .photo-left, .photo-right {width: 100%; margin: 0 0 1em 0;}
 .text-left p, .text-right p {text-align: left;}
 #product-categories a {width: 100%; margin-right: 0;}
 #product-categories.main a {width: 100%; margin-right: 0;}
 #product-categories a:nth-child(3n) {margin-right: 0;}
 #product-categories > a > span {font-size: 24pt;}
}