@font-face {
  font-family: 'Cormorant';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/cormorant_bold_italic.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hind';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/hind_light.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hind';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/hind_medium.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
    --base-color: #fff;
    --base-color-rgb: 255,255,255;
    --wine: #721a1c;
    --wine-rgb: 114,26,28;
    --grey1: #7d7d7d;
    --grey1-rgb: 125,125,125;
    --grey2: #afafaf;
    --grey2-rgb: 175,175,175;
    --grey3: #efefef;
    --grey3-rgb: 239, 239, 239;
    --red: #e9410e;
    --red-rgb: 233, 65, 14;
    --main-text-color: #4d4d4d;
    --primary-font: 'Hind', sans-serif;
    --highlight-font: 'Cormorant', serif;
    --padding: 37px;
    --max-width: 1800px;
    --flex-base: 200px
}

body, html {
    padding: 0;
    margin: 0;
    max-width: 100%;
    overflow-x: hidden;
    max-height: 100%;
}
html {
    scrollbar-width: thin;
}
body {
    font-family: var(--primary-font);
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -webkit-appearance: none;
    min-width: 230px;
    position: relative;
    color: #898989;
    overflow: hidden;
    font-weight: 300;
    max-height: 100%;
}
body * {
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

/* FONT ADJUST */
@media (min-width: 1401px) {
html {
    font-size: 20px;
    line-height: 1.7em;
}
}
@media (max-width: 1400px) {
html {
    font-size: 16px;
    line-height: 1.7em;
}
}
p {
    margin: 0 0 1.7em;
    font-weight: 300; 
}
a, button.js__display_product_variations {
    text-decoration: none;
    color: var(--wine);
    will-change: color;
    transition: color .5s ease-in;
}
a:hover, button.js__display_product_variations:hover {
    color: var(--grey1);
}
img {
    max-width: 100%;
}
.simg > img, .simg > picture, .simg > picture img {
    display: block;
    width: 100%;
}
sup, sub {
    line-height: 0;
}
a.button, button:not(.js__display_product_variations) {
    display: inline-block;
    font-size: 1rem;
    line-height: 1.3em;
    padding: .5em 2.5em .3em;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: .14em;
    background-color: rgba(var(--grey1-rgb),.7);
    color: var(--base-color);
    cursor: pointer;
    font-family: inherit;
    will-change: color, background-color;
    transition: color .5s ease-in-out, background-color .5s ease-in-out;
}
a.button:hover, button:hover {
    background-color: rgba(var(--wine-rgb),.95);
}
section.content a.button.sactive, section.content button.sactive,section.content a.button:active, section.content button:active  {
    background-color: var(--wine);
    color: var(--base-color);
}
h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
    font-weight: 700;
    font-family: var(--highlight-font);
    font-style: italic;
    text-transform: uppercase;
    color: var(--grey1);
}
h1 > span, h2 > span, h3 > span, .h1 > span, .h2 > span, .h3 > span {
    font-size: 2.18em;
    line-height: 1em;
    display: block;
    text-indent: calc(-1 * var(--padding));
}
h1, .h1 {
    letter-spacing: .14em;
    font-size: 3.27rem;
    line-height: 1em;
    margin: .5rem 0 1rem;
    text-indent: calc(-1 * var(--padding))
}
h1 small, .h1 small {
    font-size: 1.5rem;
    display: block;
}
h2, .h2 {
    font-size: 1.64em;
    line-height: 1.3em;
    margin-bottom: .3em;
    letter-spacing: .14em;
}
h1 + h2 {
    margin: -.7rem 0 1.2rem
}
h3, .h3 {
    line-height: 1.3em;
    letter-spacing: .14em;
}
blockquote {
    text-transform: uppercase;
    letter-spacing: .14em;
    margin: 0;
}
.content ul {
    list-style: none;
    padding: 0;
    font-weight: 300;
}
.content ul:not([class]) li {
    text-indent: -1em;
    padding-left: 1em;
}
.content ul:not([class]) li:before {
    content: '·';
    color: var(--wine);
    display: inline-block;
    width: 1em;
    text-indent: 0;
}
.content ul.pagination {
    justify-content: center;
}
.content ul.pagination li {
    flex: 0 0 10px;
    padding: 10px;
}
.flex {
    display: flex;
    flex-flow: row wrap;
    margin: 0;
    width: auto;
}
.flex.wr {
    flex-flow: row wrap-reverse;
}
.flex.vcenter {
    align-items: center;
}
.flex.vstretch {
    align-items: stretch;
    align-content: stretch;
}
.flex.vstart {
    align-items: flex-start !important;
    align-content: flex-start !important;
}
.vcenter[class*="box"] {
    align-self: center;
}
.flex.nm {
    margin: calc(-1 * var(--padding));
}
.flex.wr {
    flex-flow: row wrap-reverse;
}
.box0 {flex: .2 1 calc(.2 * var(--flex-base));}
.box1 {flex: 1 1  calc(1 * var(--flex-base));}
.box2 {flex: 2 1  calc(2 * var(--flex-base));}
.box3 {flex: 3 1  calc(3 * var(--flex-base));}
.box4 {flex: 4 1  calc(4 * var(--flex-base));}
.box5 {flex: 5 1  calc(5 * var(--flex-base));}
.box5 {flex: 6 1  calc(6 * var(--flex-base));}
.boxfull {flex: 1 1 100%;}
.box1, .box2,.box3,.box4,.box5, .box-po, .boxfull {padding: var(--padding);max-width: 100%;}
.flex.box1:not(.pad), .flex.box2:not(.pad),.flex.box3:not(.pad),.flex.box4:not(.pad),.flex.box5:not(.pad) {
    margin: calc(-1 * var(--padding));
}
img[class^="box"] {
    width: 100%;
}
.doublepad[class^="box"] {
    padding: calc(2 * var(--padding))
}
.nopad {
    padding: 0;
}
.flex > div.centertext {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: flex-start;
}

div.table:not(.noborder), table.ptable {
    border: 2px solid #e3e3e3;
}
table.ptable {
    border-collapse: collapse;
    width: 100%;
}
div.table .trow {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    align-items: flex-start;
    flex-flow: row wrap;
    font-weight: 300;
}
div.table .trow.th, table.ptable .th {
    font-weight: 400;
}
div.table .trow .tcell, table.ptable td {
    text-align: center;
    padding: 5px;
}
table.ptable tr {
    width: 100%;
}
table.ptable td {
    width: 16.6666%;
}
div.table.aleft .trow .tcell {
    text-align: left;
}
div.table .trow .tcell.acts, table.ptable td.acts {
    background-color: #efefef
}
div.table .trow .tcell.tc-1 {
    flex: 1 1 50px;
}
div.table .trow .tcell.tc-2 {
    flex: 2 1 100px;
}
.contactdata table {
    border-collapse: collapse;
}
.contactdata table td {
    padding-right: .5rem
}

.slidebox {
    position: relative;
    overflow: hidden;
    padding: 0;
    margin: var(--padding)
}
ul.slide, .content ul.slide {
    list-style: none;
    margin: calc(-1 * var(--padding));
    display: flex;
    flex-flow: row;
    width: calc(100% + 2 * var(--padding));
}
ul.slide li, .content ul.slide li {
    transition: opacity 1s ease-in, margin-left .5s ease-in;
    will-change: opacity, margin-left;
    margin: 0;
    min-width: 270px;
}
ul.slide[data-count="1"] > li {
    flex: 0 0 100%;
    width: 0px;
}
ul.slide[data-count="2"] > li {
    flex: 0 0 50%;
    width: 50%;
}
ul.slide[data-count="3"] > li {
    flex: 0 0 33.3333%;
    width: 33.3333%;
}
ul.slide[data-count="4"] > li {
    flex: 0 0 25%;
    width: 25%;
}
ul.slide[data-count="5"] > li {
    flex: 0 0 20%;
    width: 20%;
}
ul.slide[data-count="6"] > li {
    flex: 0 0 16.6667%;
    width: 16.6667%;
}
ul.slide[data-count="7"] > li {
    flex: 0 0 14.2857%;
    width: 14.2857%;
}
ul.slide[data-count="8"] > li {
    flex: 0 0 12.5%;
    width: 12.5%;
}
ul.slide .button, ul.slide img {
    width: 100%;
    display: block;
}
ul.slide li p {
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: .14em;
    line-height: 1.1em;
    margin: 1em 0;
}
ul.slide li p small {
    display: block;
    font-size: 1rem;
}
p.slar {
    margin: 0;
    text-align: center;
    font-size: 1.5rem;
    position: absolute;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: auto;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    pointer-events: none;
    padding: 0;
    opacity: 0;
    z-index: 11;
    will-change: opacity;
    transition: opacity .5s ease-in;
}
.mobile p.slar {
    max-width: 1000%;
}
.slidebox.overflown:hover .slar, body.mobile .slidebox.overflown .slar {
    opacity: 1;
}
.slidebox.overflown .slar i {
    cursor: pointer;
    pointer-events: auto;
}
body:not(.mobile) .gradient.slar.slar i {
    height: 100%;
    width: 100px;
    max-width: 20%;
    display: flex;
    align-items: center;
}
body:not(.mobile) .gradient.slar i.nextn {
    justify-content: flex-end;
    background: -moz-linear-gradient(left, rgba(var(--base-color-rgb),0) 0%, rgba(var(--base-color-rgb),1) 100%);
    background: -webkit-linear-gradient(left, rgba(var(--base-color-rgb),0) 0%,rgba(var(--base-color-rgb),1) 100%);
    background: linear-gradient(to right, rgba(var(--base-color-rgb),0) 0%,rgba(var(--base-color-rgb),1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='var(--base-color)fff',GradientType=1 );
}
body:not(.mobile) .gradient.slar i.prevn {
    justify-content: flex-start;
    background: -moz-linear-gradient(right, rgba(var(--base-color-rgb),0) 0%, rgba(var(--base-color-rgb),1) 100%);
    background: -webkit-linear-gradient(right, rgba(var(--base-color-rgb),0) 0%,rgba(var(--base-color-rgb),1) 100%);
    background: linear-gradient(to left, rgba(var(--base-color-rgb),0) 0%,rgba(var(--base-color-rgb),1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='var(--base-color)fff', endColorstr='#00ffffff',GradientType=1 );
}
.slar i:before {
    transform: scale(1);
    will-change: opacity;
    transition: transform .5s ease-in;
}
.slar i:hover:before {
    transform: scale(1.1);
}


/* HEADER */
header {
    height: 40vh;
    min-height: 400px;
    position: relative;
    z-index: 1;
}
header:after {
    position: fixed;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    background: -moz-linear-gradient(2deg, rgba(255,255,255,0) 30%, rgba(255,255,255,1) 99%, rgba(255,255,255,1) 100%);
    background: -webkit-linear-gradient(2deg, rgba(255,255,255,0) 30%,rgba(255,255,255,1) 99%,rgba(255,255,255,1) 100%);
    background: linear-gradient(2deg, rgba(255,255,255,0) 30%,rgba(255,255,255,1) 99%,rgba(255,255,255,1) 100%);
}
.index header {
    height: 100vh;
}
.navbox {
    align-items: flex-start;
    z-index: 110;
    position: absolute;
    width: 100%;
}
.navbox nav {
    position: relative;
    will-change: background-color;
    z-index: 1;
    padding: var(--padding);
    background-color: rgba(var(--base-color-rgb),0);
    box-shadow: 0 0 0px rgba(0,0,0,0);
    transition: background-color .5s ease-in;
    z-index: 110;
}
.navbox nav span, .navbox nav a {
    will-change: color;
    transition: color .5s ease-in;
    white-space: nowrap;
}
.navbox nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
}
.sticked .navbox nav ul.navi {
    position: fixed;
    right: 0;
    top: -50px;
    padding: 0 var(--padding);
    animation: fft .75s ease-in-out .5s;
    animation-fill-mode: forwards;
}
.navbox nav ul li {
    margin: calc(.5 * var(--padding)) 0;
    position: relative;
    height: 2rem;
}
.sticked .navbox nav ul li {
    margin: calc(.35 * var(--padding)) 0;
}
.navbox nav ul li:not(.navback):after {
    content: '';
    will-change: left, width;
    position: absolute;
    bottom: calc(-.5 * var(--padding) + 5px);
    left:  calc(-1 * var(--padding));
    width: 0px;
    height: 2px;
    background-color: var(--grey2);
    transition: left .5s ease-in-out, width .5s ease-in-out .2s;
}
.navbox nav ul li:not(.navback):hover:after {
    left:  0;
    width: 100%;
}
.navbox .navbutton, .navbox nav ul li.navback {
    color: var(--grey1);
    cursor: pointer;
    padding: var(--padding);
    position: relative;
}
.navbox nav ul li > a, .navbox nav ul li > span {
    color: var(--grey1);
    display: block;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: 300;
    letter-spacing: .14em;
    line-height: 1em;
    padding: calc(.25 * var(--padding));
}
.navbox nav ul li > a:hover {
    color: var(--main-text-color);
}
.navbox nav ul li.active a, .navbox nav ul li.active span {
    font-family: var(--highlight-font);
    font-style: italic;
    font-size: 1.01em;
    font-weight: 700;
    margin-top: -.1em;
}
.navbox nav ul ul.sub {
    position: absolute;
    will-change: transform,opacity;
    top: calc(.5 * var(--padding) + 2rem - 5px);
    left: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-.25rem);
    transition: transform .5s ease-in-out,opacity .5s ease-in-out;
    min-width: 100%;
    width: auto;
    flex-flow: column;
    align-items: flex-start;
    padding: .5rem 0;
    background-color: rgba(var(--base-color-rgb), .8)
}
.navbox nav ul ul.sub.so {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}
.navbox nav ul ul.sub li {
    margin: 0;
}
.navbox nav ul ul.sub li:after {
    bottom: 1px;
}
.navbox .navbutton i {
    will-change: transform;
    transition: transform .5s ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem
}
.navbox .navbutton i:last-of-type {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto
}
.navbox .navbutton i:last-of-type, .mopen .navbox .navbutton i:first-of-type {
    transform: scale(0);
}
.mopen .navbox .navbutton i:last-of-type, .navbox .navbutton i:first-of-type {
    transform: scale(1);
}
.navbox .navbutton {
    display: none;
}

.navbox nav ul > li.search:after {
    display: none
}
.navbox nav ul > li.search i {
    font-size: 1.6rem;
    margin: -.4rem -.45rem -1.4rem 0;
}
@keyframes fft {
    0% {top: -100px; position: absolute;}
    100% {top: 0; position: fixed;}
}
header .headerimg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    padding: 0;
}
header .headerimg picture {
    display: block;
    width: 100%;
    position: fixed;
    top: 0;
    height: 40vh;
    min-height: 400px;
    object-fit: cover
}
header .headerimg img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}
a.logo {
    min-width: 200px;
    display: block;
    position: relative;
    z-index: 11;
    padding: 40px 20px 20px;
    transition: none;
    flex: 1 1 calc(1.5 * var(--flex-base));
}
.index a.logo {
    flex: 2 1 calc(2 * var(--flex-base));
}
a.logo img {
    width: 100%;
    max-width: 610px;
    display: block;
    height: auto
}
.index a.logo img {
    max-width: 750px;
}
.navbox .icons {
    position: absolute;
    z-index: 111;
    width: auto;
    top: calc(5 * var(--padding));
    right: var(--padding);
    pointer-events: none;
}
.navbox .icons p {
    margin: 0;
    text-align: center;
}
.navbox .icons p > *{
    display: block;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: .14em;
    margin: 5px;
    text-shadow: 0 0 15px var(--base-color);
    pointer-events: auto;
    cursor: pointer;
    position: relative;
}
.navbox .icons p > * i {
    will-change: color;
    transition: color .5s ease-in;
    color: var(--grey1);
}
.navbox .icons p > *:hover i {
    color: var(--wine);
}
.navbox:before {
    content: '';
    position: fixed;
    width: 100%;
    height: 0;
    top: 0;
    left: 0;
}
.sticked .navbox:before {
    height: calc(.7 * var(--padding) + 2rem);
    animation: fft 1s ease-in-out;
    animation-fill-mode: forwards;
    background-color: rgba(var(--base-color-rgb),.9);
    z-index: 0;
    box-shadow: 0 0 10px rgba(0,0,0,.2);
}
header .slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    color: var(--base-color);
}
header .slider:after {
    position: fixed;
    content: '';
    bottom: 0;
    left: 0;
    width: 60%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    background: -moz-linear-gradient(270deg, rgba(255,255,255,0) 30%, rgba(255,255,255,1) 99%, rgba(255,255,255,1) 100%);
    background: -webkit-linear-gradient(270deg, rgba(255,255,255,0) 30%,rgba(255,255,255,1) 99%,rgba(255,255,255,1) 100%);
    background: linear-gradient(270deg, rgba(255,255,255,0) 30%,rgba(255,255,255,1) 99%,rgba(255,255,255,1) 100%);
}
header .slider ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
header .slider ul.sslides li, header .slider ul.slslides li picture {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
header .slider ul li.slitem picture {
    display: block;
    object-fit: cover;
    will-change: transform;
    transform: translateX(120%) scale(1);
    z-index: -2;
}
header .slider ul li.slitem picture img {
    display: block;
    object-fit: cover;
    width: 100%;
    height: 100%;
    object-position: center;
}
header .slider ul li.slitem.slactive picture {
    transform: translateX(0%) scale(1);
    z-index: -1;
    transition: transform 1s ease-in-out .2s;
}
header .slider ul li.slitem.slout picture {
    transform: translateX(-100%) scale(1.5);
    transition: transform 1s ease-in-out .5s;
}
header .slider ul li.slitem .sltext {
    position: absolute;
    will-change: transform;
    z-index: 2;
    color: var(--grey1);
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: .14em;
    bottom: 20%;
    left: 40px;
    padding: var(--padding);
    font-size: 1rem;
    transform: translateX(100%);
    opacity: 0;
    width: 40%;
    text-shadow: 0 0 35px var(--base-color), 0 0 25px var(--base-color), 0 0 15px var(--base-color),0 0 5px var(--base-color) ;
}
header .slider ul li.slitem .sltext p {
    margin: .5em 0 0;
}
header .slider ul li.slitem.slactive .sltext {
    transform: translateX(0);
    transition: transform 1s ease-in-out 1s, opacity 1s ease-in-out 1s;
    opacity: 1;
}
header .slider ul li.slitem.slout .sltext {
    transform: translateX(-100vw);
    transition: transform 1s ease-in-out, opacity 1s ease-in-out;
}
header .slider ul li a.slcta {
    margin-top: 1em;
    backdrop-filter: blur(5px);
    opacity: 0;
    transition: background-color .5s ease-in-out, transform .5s ease-in-out 0s, opacity .5s ease-in-out 0s;
    transform: translateX(20vw);
    text-shadow: none;
}
header .slider ul li.slactive a.slcta {
    opacity: 1;
    transition: background-color .5s ease-in-out, transform .5s ease-in-out 1.5s, opacity .5s ease-in-out 1.5s;
    transform: translateX(0vw);
}
header .slider ul li.slout a.slcta {
    transform: translateX(20vw);
}
header .slider ul.slpag {
    z-index: 100;
    position: absolute;
    bottom: var(--padding);
    left: 0;
    right: 0;
    text-align: center;
    pointer-events: none;
}
header .slider ul.slpag li {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin: 0 5px;
    background-color:var(--grey1);
    opacity: .5;
    border-radius: 100%;
    cursor: pointer;
    transition: opacity .5s ease-in;
    pointer-events: auto;
}
header .slider ul.slpag li.slsel {
    opacity: 1;
}
header .slider .slarr {
    position: absolute;
    z-index: 100;
    color: var(--grey2);
    top: 0;
    bottom: 0;
    height: 100%;
    width: 20px;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
header .slider .slarr i {
    display: block;
    width: 1em;
    height: 1em;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: .7;
    transition: opacity .5s ease-in;
}
header .slider .slarr:hover i {
    opacity: 1;
}
header .slider .slarr#prev {
    left: 10px;
}
header .slider .slarr#next {
    right: 10px;
}
/* BREADCRUMBS */
nav#breadcrumbs {
    color: var(--grey1);
    text-transform: uppercase;
    font-size: .8rem;
    background-color: var(--grey3);
}
nav#breadcrumbs > span {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    align-content: center;
    justify-content: flex-start;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--padding);
}
nav#breadcrumbs > span > *:not(i) {
    line-height: 1;
    margin-top: .14em;
    display: block;
}
@media (max-width:1050px){
nav#breadcrumbs > span {
    display: none;
}
}
/* CONTENT */
section.content, footer {
    position: relative;
    z-index: 1;
    background-color: var(--base-color);
}
.teaserheading h2{
    text-align: center;
}
section.content article {
    max-width: var(--max-width);
    margin: 0 auto;
}
section.content article.back {
    margin: 0 auto;
    padding: 0 40px 30px;
}
.overview > div:not(.boxfull), ul.ovslide > li {
    position: relative;
    min-height: 300px;
    display: flex;
    justify-content: stretch;
    align-items: stretch;
}
.overview > div:not(.boxfull) > a, ul.ovslide > li > a {
    overflow: hidden;
    position: relative;
}
.overview > div.intro {
    padding: 40px;
    position: relative;
    display: block;
    color: var(--base-color);
}
.overview a, ul.ovslide > li a {
    display: block;
    width: 100%;
}
.overview div .ov-text, ul.ovslide > li .ov-text {
    color: var(--base-color);
    position: absolute;
    z-index: 1;
    bottom: 0;
    top: 0;
    width: 70%;
    min-width: 12rem;
    left: 0;
    padding: var(--padding);
    padding-left: calc(.5 * var(--padding));
    margin: 0;
    transition: color .5s ease-in;
}
.overview div .ov-text > *, ul.ovslide > li .ov-text > * {
    color: var(--grey1);
    position: relative;
    z-index: 1;
    margin: 0;
    transition: color .5s ease-in;
}
.overview div .ov-text h3, ul.ovslide > li .ov-text h3 {
    margin: 0 0 .5rem;
}
.overview div:hover .ov-text > *, ul.ovslide > li:hover .ov-text > *  {
    color: var(--base-color);
}
.overview div .ov-text:before, ul.ovslide > li .ov-text:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    top: 0;
    background-color: rgba(var(--base-color-rgb), .8);
    transition: width .5s ease-in, background-color .5s ease-in, backdrop-filter .5s ease-in;
    width: 100%;
}
.overview div:hover .ov-text:before, ul.ovslide > li:hover .ov-text:before {
    width: calc(300% - 2 * var(--padding));
    background-color: rgba(var(--wine-rgb), .9);
}
@supports (backdrop-filter: blur(5px)) {
.overview div .ov-text:before, ul.ovslide > li .ov-text:before {
    backdrop-filter: blur(0px);
} 
.overview div:hover .ov-text:before, ul.ovslide > li:hover .ov-text:before {
    background-color: rgba(var(--wine-rgb), .7);
    backdrop-filter: blur(5px);
}    
}
.overview div picture, ul.ovslide > li picture {
    display: block;
    width: 100%; 
    height: 100%;
}
.overview div img, ul.ovslide > li img  {
    display: block;
    opacity: 1;
    width: 100%;    
    height: 100%;
    object-fit: cover;
    transition: opacity .5s ease-in;
    min-height: 230px;
}

section.content article div.gal {
    margin: -10px;
    width: calc(100% + 20px);
    max-width: calc(100% + 20px);
    align-items: flex-start;
}
section.content article div.gal > img {
    padding: 10px;
}
section.content article div.gal > img.pu {
    background-color: transparent;
    transition: opacity 1s ease-in, background-color .5s ease-in;
}
section.content article div.gal img.pu:hover {
    background-color: var(--wine);
}
section.content article div.ntextbox {
    position: relative;
    background-color: rgba(var(--grey3-rgb), .3)
}
section.content article div.ntextbox h2 {
    margin-top: 0;
}
section.content article div.ndatebox {
    padding: var(--padding);
    font-weight: 300;
    font-size: 1rem;
    color: rgba(var(--wine-rgb), .6);
}
section.content article div.ntextbox > div:not(.ndatebox) {
    border-left: 2px solid rgba(var(--wine-rgb), .2);
}
section.content article div.ntextbox > div:not(.ndatebox).fw {
    border-left: none;
}
section.content article div.ndatebox > span {
    display: block;
    margin: 0;
}
section.content article div.ndatebox > span.ndate {
    font-family: var(--highlight-font);
    font-style: italic;
    text-indent: -.05em;
    font-weight: 700;
    margin-top: -.3em;
    font-size: 2rem;
    line-height: 1em;
}
/* SIDEBAR */
aside > div {
    background-color: var(--grey3)
}
/* FORMULAR */

form {
    text-align: left;
    display: flex;
    flex-flow: row wrap;
    width: calc(100% + var(--padding));
    margin: 0px calc(-.5 * var(--padding));
    padding: 0px;
}
form .form-field, form .form-spacer {
    display: block;
    width: 100%;
    margin: 0px 0px calc(.5 * var(--padding));
    padding: 0px calc(.5 * var(--padding));
}
form .form-field.half {
    flex: 1 1 250px;
}
form .form-field.full {
    flex: 1 1 100%;
}
form .form-field .form-label {
    margin-bottom: 5px;
}
.form-input-wrapper, .form-input-wrapper input  {
    width: 100%;
}
.form-data {
    position: relative;
}
.checkboxes {
    display: block;
}
.buttons, .button-wrapper {
    width: 100%;
    padding: 0px calc(.25 * var(--padding));
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}
.buttons > .button, .buttons > button, .button-wrapper > button {
    margin: calc(.25 * var(--padding));
}
.buttons > .button:only-of-type, .buttons > button:only-of-type, .button-wrapper > button:only-of-type {
    right: 0;
    margin: 0 0 0 auto;
}
.form-textarea-wrapper, .form-textarea-wrapper textarea {
    width: 100%;
}
.form-textarea-wrapper textarea {
    min-height: 200px;
    resize: none;
}
input, textarea, button, .button, select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    outline: none;
    transition: color .5s ease-in, background-color .5s ease-in;
} 
input, textarea, select, body .tecart-search-box  {
    border: none;
    padding: calc(.5 * var(--padding));
    width: 100%;
    font-size: 1em;
    font-family: inherit;
    font-weight: 300;
    color: var(--grey1);
    background-color: rgba(var(--grey3-rgb), .5);
    transition: color .5s ease-in, background-color .5s ease-in;
}
input:focus, textarea:focus, select:focus {
    background-color: rgba(var(--grey3-rgb), .2);
    color: var(--main-text-color);
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button
{
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
    text-align: center;
}
input[type=number]:not(.js__shoppingcart__quantity-box-cart) {
    padding-left: calc(20px + 1rem);
    padding-right: calc(20px + 1rem);
}
.quantity-nav {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.quantity-nav .quantity-button {
    pointer-events: auto;
    width: auto;
    padding: 10px;
    cursor: pointer;
    opacity: .33;
    transition: opacity .5s ease-in;
}
input:hover + .quantity-nav .quantity-button {
    opacity: .66;
}
.quantity-nav .quantity-button:hover {
    opacity: 1;
}
.radio {
	display: block;
}
input[type='checkbox'],
input[type='radio'] {
  width:auto;
  float:left;
  margin-right: .75em;
  background:transparent;
  border:none;
}
input[type='checkbox']:checked,
input[type='checkbox']:not(:checked),
input[type='radio']:checked,
input[type='radio']:not(:checked) {
  background: transparent;
  position: relative;
  visibility: hidden;
  margin:0;
  padding:0;
}

input[type='checkbox'] + label,
input[type='radio'] + label {
    cursor: pointer;
    text-indent: -21px;
    padding-left: 20px;
    display: block !important;
}

input[type='checkbox']:checked + label::before,
input[type='checkbox']:not(:checked) + label::before,
input[type='radio']:checked + label::before,
input[type='radio']:not(:checked) + label::before {
    content: '';
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 17px;
    height:17px;
    border-radius: 50%;
    position: relative;
    top:-5px;
    background-color: var(--grey1);
    background-image: url(../images/check.png);
    margin-right: 2px;
    background-size: 0%;
    background-repeat: no-repeat;
    background-position: center;
    transition: background-color .2s ease-in, background-size .2s ease-in;
    text-align: center;
    font-size: 2rem;
    line-height: .5em;
    text-indent: 0px;
}

input[type=radio]:checked + label::before,
input[type=radio]:not(:checked) + label::before {
  border-radius: 50%;
}

input[type='checkbox']:hover  + label::before,
input[type='radio']:hover  + label::before {
    background-color: var(--wine);
    background-size: 65%;
    background-repeat: no-repeat;
    background-position: center;
}

input[type='checkbox']:checked  + label::before,
input[type='radio']:checked  + label::before {
    background-color: var(--main-text-color);
    background-size: 85%;
    background-repeat: no-repeat;
    background-position: center;
}
.form-data[data-grav-field="select"] {
    position: relative;
}
.form-data[data-grav-field="select"]:after {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: "\f078";
    position: absolute;
    right: 10px;
    top: 0;
    bottom: 0;
    width: 1em;
    height: 1em;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    pointer-events: none;
    cursor: pointer;
    opacity: .33;
    transition: opacity .5s ease-in;
}
.form-data[data-grav-field="select"]:hover:after {
    opacity: 1;
}
#form-result {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    transition: all .5s ease-in;
    z-index: 2;
    backdrop-filter: blur(5px);
}
#form-result.shownotice {
    opacity: 1;
    pointer-events: all;
}
form .switchlabel {
    position: relative;
    margin-top: calc(.5 * var(--padding));
}
form .switchlabel label.form-label {
    position: absolute;
    top: 0;
    left: calc(.5 * var(--padding));
    padding: calc(.5 * var(--padding));
    transform: scale(1);
    transform-origin: bottom left;
    transition: all .5s ease-in;
    z-index: 1;
    pointer-events: none;
    line-height: 1.7em;
    margin: 0;
}
form .switchlabel.labelup label.form-label {
    top: calc(-.8rem - (.75 * var(--padding)));
    transform: scale(.8);
    opacity: .5;
}
form .dontshowlabel .form-label {
    display: none;
}
div.notices {
    padding: 60px 20px 20px;
    text-align: center;
}
div.notices p > i {
    display: block;
    font-size: 4em;
    margin: 0 0 .1em;
}
#form-result.shownotice div.notices p > i.fa-check-circle {
    animation: bubb 5s linear;
}

#form-result.shownotice div.notices p > i.fa-circle-notch {
    animation: turn 1s linear infinite;
}
#form-result.shownotice div.notices p > i.fa-times-circle {
    animation: bubb2 3s linear infinite;
}
@keyframes bubb {
    0% {transform: scale(1);}
    7% {transform: scale(1);}
    10% {transform: scale(1.1);}
    13% {transform: scale(1);}
    16% {transform: scale(1.1);}
    19% {transform: scale(1);}
    100% {transform: scale(1);}
}
@keyframes bubb2 {
    0% {transform: translate(0);}
    7% {transform: translate(0);}
    10% {transform: translate(1rem,0rem);}
    12% {transform: translate(-1rem,0rem);}
    13% {transform: translate(0);}
    16% {transform: translate(2rem, 0);}
    18% {transform: translate(-2rem, 0);}
    19% {transform: translate(0);}
    20% {transform: scale(1);}
    35% {transform: scale(1.2);}
    40% {transform: scale(1);}
    100% {transform: translate(0);}
}
@keyframes turn {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}
div.notices.yellow {
    border-left: 0px solid #ba9800 !important;
    color: #e3bc5f !important;
}
div.notices.red {
    border-left: 0px solid #f14101 !important;
    color: var(--wine) !important;
}
div.notices.blue {
    border-left: 0px solid #005498 !important;
    color: #4a6179 !important;
}
div.notices.green {
    border-left: 0px solid #1d4774 !important;
    color: #74af61 !important;
}
div.notices p {
    margin: 0 !important;
}
div.mapbox {
    position: relative;
    min-height: 400px;
}
div.mapbox iframe {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
}
div.mapbox small {
    position: absolute;
    top: 0px;
    right: 5px;
}

/* POPUPS */
.tpu-box, .sharebuttons, #form-result, .searchoverlay {
    position: fixed;
    z-index: 2000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .5s ease-in-out .3s;
}
.tpu-box.tpu-show, .sharebuttons.showbuttons, #form-result.shownotice, .searchoverlay.showsearch {
    opacity: 1;
    pointer-events: all;
    transition: opacity .5s ease-in-out;
    z-index: 110;
}
.tpu-box:before, .sharebuttons:before, #form-result:before, .searchoverlay:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(var(--base-color-rgb),.8);
}
@supports (backdrop-filter: blur(5px)) {
.tpu-box:before, .sharebuttons:before, #form-result:before, .searchoverlay:before {
    background-color: rgba(var(--base-color-rgb), .6);
    backdrop-filter: blur(5px);
}    
}
.tpu-box p, .sharebuttons .shbox, #form-result div.notices {
    position: relative;
    display: block;
    width: 90%;
    max-width: 500px;
    margin: 0;
    background-color: rgba(var(--base-color-rgb),.7);
    box-shadow: 0 0 20px rgba(0,0,0,.2);
    padding: 20px;
    transform: translateY(100vh);
    transition: transform .5s ease-in-out .1s,backdrop-filter .5s ease-in-out .1s;
}
.tpu-box.tpu-show p, .sharebuttons.showbuttons .shbox, #form-result.shownotice div.notices {
    transform: translateY(0vh);
}
@supports (backdrop-filter: blur(5px)) {
.tpu-box p, .sharebuttons .shbox, #form-result div.notices {
    background-color: rgba(var(--base-color-rgb),.2);
    backdrop-filter: blur(0);
}
.tpu-box.tpu-show p, .sharebuttons.showbuttons .shbox, #form-result.shownotice div.notices {
    backdrop-filter: blur(8px);
}    
}
.tpu-box p > span:not(.heading) {
    display: flex;
    width: 100%;
}
.tpu-box p > span > *:first-child {
    flex: 1 1 100px;
}
.tpu-box p > span > *:last-child {
    flex: 2 1 200px;
}
#tpu-close, .closeshare, #sc-close, #closeform, .closesearch {
    position: absolute;
    z-index: 3000;
    cursor: pointer;
    top: var(--padding);
    right: var(--padding);
    height: 2rem;
    width: 2rem;
    font-size: 2rem;
    text-align: center;
    transition: color .5s ease-in-out;
}
#tpu-close:hover, .closeshare:hover, #sc-close:hover, #closeform:hover, .closesearch:hover {
    color: var(--wine)
}
.sharebuttons {
    text-align: center;
}
.sharebuttons .shariff ul {
    justify-content: center;
}
.sharebuttons .shariff .orientation-horizontal li, .sharebuttons .shariff .orientation-horizontal li  a {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color .5s ease-in;
    border-radius: 100%;
}
.sharebuttons .tosoc {
    font-size: .7rem;
    line-height: 1.2em;
}


/* SHOPPING CART */
.js__shoppingcart-cart.fixed {
    pointer-events: none;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 200;
    opacity: 0;
    background-color: rgba(var(--base-color-rgb),.95);
    box-shadow: 0 0 0px rgba(0,0,0,0);
    height: 100%;
    overflow-y: scroll;
    scrollbar-width: thin;
    padding: calc(2 * var(--padding)) var(--padding);
    width: 100%;
    max-width: 900px;
    transition: all .5s ease-in;
}
html.sc-open {
    overflow: hidden;
}
.js__shoppingcart-cart.fixed > * {
    transform: translateX(100vw);
    transition: transform 1s ease-in-out;
}
.js__shoppingcart-cart.fixed > *:last-child {
    margin-bottom: 80px;
}
html.sc-open .js__shoppingcart-cart.fixed > * {
    transform: translateX(0vw);
}
html.sc-open .js__shoppingcart-cart.fixed {
    pointer-events: auto;
    z-index: 200;
    opacity: 1;
    box-shadow: 0 0 20px rgba(0,0,0,.2);
}
@supports (backdrop-filter: blur(5px)) {
.js__shoppingcart-cart.fixed {
    backdrop-filter: blur(0px);
    background-color: rgba(var(--base-color-rgb),.85);
}
html.sc-open .js__shoppingcart-cart.fixed {
    backdrop-filter: blur(5px);    
}
}
.sc-gallery {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
}
.sc-gallery img {
    flex: 0 0 80px;
}
.shoppingcart-price {
    text-align: right;
    font-size: 3rem;
    line-height: 1em;
    font-family: var(--highlight-font);
    font-style: italic;
    font-weight: 400;
}
section.content button.js__display_product_variations {
    font: inherit;
    text-align: inherit;
    background-color: inherit;
    letter-spacing: inherit;
    padding: 0;
    outline: none;
    text-transform: inherit;
    font-size: .7em;
    line-height: 1em;
    margin-top: .5rem;
}
table.js__shoppingcart-cart__table {
    width: 100%;
    margin: -10px;
}
table.js__shoppingcart-cart__table tr {
    display: flex;
    flex-flow: row wrap;
}
table.js__shoppingcart-cart__table tr[class^="item-variants"] > * {
    padding: 0 10px;
    font-size: .8em;
    line-height: 1em;
}
table.js__shoppingcart-cart__table tr td, table.js__shoppingcart-cart__table tr th {
    flex: 1 1 50px;
    display: flex;
    padding: 10px;
    justify-content: flex-end;
    align-items: center;
}
table.js__shoppingcart-cart__table tr[class^="item-variants"]:after {
    content: '';
    display: block;
    flex: 1 1 50px;
}
table.js__shoppingcart-cart__table tr td:first-child, table.js__shoppingcart-cart__table tr th:first-child {
    flex: 3 1 150px;
    justify-content: flex-start;
}
table.js__shoppingcart-cart__table tr td:first-child {
    padding: 0;
}
table.js__shoppingcart-cart__table tr td:first-child > * {
    padding: 10px;
    flex: 1 1 35px;
}
table.js__shoppingcart-cart__table tr > * > * {
    line-height: 1.3em;
}
table.js__shoppingcart-cart__table tr td.cart-product .shoppingcart-thumb {
    flex: 0 0 50px;
}
table.js__shoppingcart-cart__table tr td.cart-product img {
    border-radius: 100%;
    object-fit: cover;
}
table.js__shoppingcart-cart__table tbody tr:last-child {
    flex-flow: column;
}
table.js__shoppingcart-cart__table tbody tr:last-child > * {
    flex: 0 0 auto;
}
table.js__shoppingcart-cart__table tbody tr:last-child > td.goback {
    order: 5;
    text-align: right;
}
table.js__shoppingcart-cart__table a.js__shoppingcart__continue-shopping {
    color: inherit;
}
section.content .shoppingcart-product-container .shoppingcart-info {
    text-align: left;
}
a.sc-backlink {
    text-transform: uppercase;
    letter-spacing: .14em;
}
a.sc-prodnav {
    position: fixed;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 1;
    height: 100%;
    width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}
a.sc-prodnav div {
    position: absolute;
    transition: all .5s ease-in-out;
}
a.sc-prodnav.sc-prev {
    left: 0px;
}
a.sc-prodnav.sc-prev div {
    left: -200px;
    opacity: 0;
}
a.sc-prodnav.sc-prev:hover div {
    left: 40px;
    opacity: 1;
}
a.sc-prodnav.sc-next {
    right: 0px;
}
a.sc-prodnav.sc-next div {
    right: -200px;
    opacity: 0;
}
a.sc-prodnav.sc-next:hover div {
    right: 40px;
    opacity: 1;
}
.sc-prodnav div img {
    max-width: 1000px;
    display: block;
    box-shadow: 0 0 10px rgba(0,0,0,.5);
    border-radius: 1rem;
}
.sc-prodnav div p {
    position: absolute;
    bottom: 0px;
    margin: 0;
    padding: 10px;
    color: var(--base-color);
    line-height: 1em;
    text-shadow: 0 0 5px #000, 0 0 10px #000;
}
span.currency {
    margin-right: .2em;
}
.sc-view span, .sc-view span:after {
    display: block;
    position: absolute;
    font-size: .9rem;
    width: 1em;
    height: 1em;
    background-color: rgba(var(--grey1-rgb), 0);
    color: color: var(--grey1);
    font-weight: 700;
    padding: .1em;
    border-radius: 100%;
    right: -01em;
    top: -.8em;
    line-height: 1.2em;
    text-align: center;
    box-sizing: content-box;
    opacity: 1;
    letter-spacing: 0;
}
.sc-view span {
    transition: color .5s ease-in, background-color .5s ease-in-out;
}
.sc-view span[data-scamount="0"]{
    background-color: rgba(var(--grey1-rgb), 0);
    color: transparent !important;
}
.sc-view span:after {
    content: '';
    background-color: rgba(var(--grey1-rgb), 0);
    z-index: -1;
    top: -.4em;
    right: 0;
    margin-top: .4rem;
    transition: background-color 1s ease-in-out;
}
.sc-view span:not([data-scamount="0"]):after{
    background-color: rgba(var(--grey1-rgb), .3);
}
.sc-view span.scadded,.sc-view span.scremoved, .sc-view span.lb {
    color: var(--grey1);
}
.sc-view span.scadded {
    animation: sc-basket 1s ease-in;
    animation-fill-mode: forwards;
}
.sc-view span.scadded:after {
    animation: sc-basket-after .5s linear;
    animation-fill-mode: forwards;
}
.sc-view span.scremoved {
    animation: sc-basket 1s ease-in reverse;
    animation-fill-mode: forwards;
    transition: color .5s ease-in 1s, background-color .5s ease-in-out .5s;
}
.sc-view span.scremoved:after {
    animation: sc-basket-after .5s linear reverse 1s;
    animation-fill-mode: forwards;
}
@keyframes sc-basket {
    0% {transform: translateY(0em)}
    20% {transform: translateY(.4em)}
    40% {transform: translateY(-.3em)}
    60% {transform: translateY(.2em)}
    80% {transform: translateY(-.1em)}
    100% {transform: translateY(0)}
}
@keyframes sc-basket-after {
    0% {top: 5vh; right: -2vw;background-color: rgba(var(--grey1-rgb), 0)}
    10% {top: 4vh; right: -2vw;background-color: rgba(var(--wine-rgb), .5);}
    20% {top: 3vh; right: -2vw}
    30% {top: 2vh; right: -2vw}
    40% {top: 1vh; right: -2vw}
    50% {top: -0vh; right: -1.4vw}
    60% {top: -.2vh; right: -.9vw}
    70% {top: -.25vh; right: -.4vw}
    80% {top: -.2vh; right: -.2vw}
    90% {top: -.1vh; right: 0vw}
    99.99% {top: -.4em; right: 0;background-color: rgba(var(--wine-rgb), .5);}
    100% {top: -.4em; right: 0;background-color: rgba(var(--grey1-rgb), .3)}
}
.shoppingcart-product-container .shoppingcart-details {
    padding-left: var(--padding);
}
.shoppingcart-product-container .shoppingcart-details.doublepad {
    padding-left: calc(2 * var(--padding));
}
/* FOOTER */
footer p {
    margin: 0;
    padding: 0 40px 40px;
    text-align: center;
}
.empty {
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    opacity: 0 !important;
    margin-bottom: 0 !important;
}
div[style*="position: static"] {
    z-index: -10;
}
/* TABLET */
@media (max-width:940px){
:root {
    --flex-base: 180px;
}
a.logo, .index a.logo  {
    padding-top: 0;
    margin-top: calc(-1 * var(--padding));
    order: 2;
    flex: 1 1 100%;
}
a.logo img, .index a.logo img {
    width: 60%;
    margin: 0 auto;
}
body:not(.sticked) .navbox nav ul {
    justify-content: space-between;
}
h1, .h1 {
    font-size: 2.5rem;
    line-height: 1em;
} 
.navbox .icons {
    position: absolute;
    z-index: 111;
    width: auto;
    top: calc(4 * var(--padding));
    right: var(--padding);
    pointer-events: none;
}
.navbox nav ul ul.sub, .navbox nav ul ul.sub  {
    position: absolute;
    top: calc(2.5 * var(--padding));
    right: auto;
    padding: 0 calc(var(--padding));
    left: 0;
    opacity: 0;
    pointer-events: none;
    background-color: rgba(var(--base-color-rgb), 0);
    transition: background-color .5s ease-in-out, opacity .5s ease-in-out;
    width: 100%;
    justify-content: flex-start;
}    
.navbox nav ul ul.sub.so {
    opacity: 1;
    top: calc(2.5 * var(--padding));
    background-color: rgba(var(--base-color-rgb), .9);
    pointer-events: all;
}
.index header {min-height: 100vh;}      
header .slider ul li.slitem .sltext {
    font-size: 1rem;
    bottom: 10%
}
header .slider ul li.slitem .sltext p span {
    font-size: 2.5rem;
    line-height: 1em;
}  
header .slider ul.slpag li {
    width: 10px;
    height: 10px;
}
a.button, button {
    font-size: 1rem;
}     
header .slider .slarr#prev {
    left: 0px;
}
header .slider .slarr#next {
    right: 0px;
}     
.overview  {
    padding: 0 0px 40px;
    margin: -20px;
}
}
/* SMARTPHONE */
@media (max-width:620px), (max-height:700px){
:root {
    --padding: 18px;
    --max-width: 1800px;
    --flex-base: 200px
}
h1, .h1 {
    font-size: 2rem;
    line-height: 1em;
}  
a.logo, .index a.logo {
    width: 40%;
    min-width: 200px;
    display: block;
    position: relative;
    z-index: 11;
    padding: 40px 20px 20px;
    padding-top: 0;
    margin-top: calc(.5 * var(--padding));
}
a.logo img, .index a.logo img {
    max-width: 400px;
    display: block;
    width: 60%;
    margin: 0 auto;
}
.index header {min-height: 100vh;}      
header h1 {
    text-align: center;
    width: 100%;
}  
header .slider ul li.slitem .sltext {
    font-size: 1rem;
    line-height: 1em;
    width: 90%;
    max-width: calc(100% - 3 * var(--padding));
    bottom: 14%;
}
header .slider ul li a.slcta {
    margin-top: -0rem;
}
header .slider ul li.slitem .sltext p span {
    line-height: 1em;
    margin-top: .1em;
}  
header .slider ul.slpag li {
    width: 10px;
    height: 10px;
}
a.button, button {
    font-size: 1rem;
}    
nav ul li.navbutton span.nbt {
    display: none;
}   
.navbox nav > ul > li {
    left: -100vw; 
}
.navbox nav > ul > li, .navbox nav > ul ul.sub > li {
    transition: transform .5s ease-in-out;
    height: auto;
    margin: 0;
}
.navbox.wr {
    flex-flow: row;
}
.navbox .navbutton {
    display: block;
    transform: translateX(0vw);
    z-index: 1000;
    position: fixed
}
.navbox nav, .sticked .navbox nav {
    position: fixed;
    height: 100%;
    width: 100%;
    z-index: 1;
    padding: 0;
    background-color: rgba(var(--base-color-rgb),0);
    transition: background-color .5s ease-in;
    z-index: 110;
    animation: none;
    top: 0;
    pointer-events: none;
}
.navbox nav.navopen, .sticked .navbox nav.navopen {
    background-color: rgba(var(--base-color-rgb),.9);
    pointer-events: all;
}
.navbox nav.subopen ul ul.sub.so li, .navbox nav.navopen ul > li {
    left: 0;
}
.navbox:before {
    transition: height .5s ease-in-out
}    
.sticked .navbox:before {
    animation: none;
    height: calc(.7 * var(--padding) + 2.7rem);
}
.navbox nav ul, .navbox nav.fw ul, body:not(.sticked) .navbox nav ul {
    flex-flow: column;
    height: 100%;
    justify-content: center;
    align-items: flex-start;
    display: inline-flex;
}  
.navbox nav > ul, .navbox nav.fw > ul{
    position: relative;
}
.navbox nav ul li a, .navbox nav ul li span {
    padding: var(--padding);
}
.navbox nav ul li:not(.navback):after {
    bottom: 5px;
    left:  0;
}    
.navbox nav ul li:not(.navback):hover:after {
    left:  calc(.5 * var(--padding));
    width: calc(100% - var(--padding));
}
.navbox nav ul ul.sub, .navbox nav ul ul.sub.so {
    will-change: opacity;
    left: 40%;
    top: 0;
    width: 60%;
    background-color: rgba(var(--grey3-rgb), .6);
    justify-content: center;
    position: fixed;
    height: 100vh;
    bottom: 0;
}   
.navbox nav.navopen ul ul.sub {
    opacity: 0;
    transform: translateX(-100%);
    pointer-events: none;
    transition: opacity .5s ease-in-out, transform .5s ease-in-out
}
.navbox nav.navopen ul ul.sub.so {
    opacity: 1;
    transform: translateX(0%);
    pointer-events: all;
}
.navbox nav ul > li.search{
    position: fixed;    
    transform: none !important;
    top: 0;
    right: 0;
    margin: 0;
    pointer-events: all;
    left: auto;
}    
.navbox nav ul > li.search i {
    font-size: 1.5rem;
    margin: 0;
}
header .slider .slarr#prev {
    left: 0px;
}
header .slider .slarr#next {
    right: 0px;
}     
.ptablebox {
    overflow-x: scroll;
    max-width: 100%;
    scrollbar-width: thin;
}
table.js__shoppingcart-cart__table tr td, table.js__shoppingcart-cart__table tr th {
    flex: 1 1 50px;
    display: flex;
    padding: 10px;
    justify-content: flex-end;
    align-items: center;
}
table.js__shoppingcart-cart__table tr td:first-child, table.js__shoppingcart-cart__table tr th:first-child {
    flex: 1 1 50px;
    justify-content: flex-start;
}
table.js__shoppingcart-cart__table tr td.cart-product .shoppingcart-thumb {
    display: none;
}
}
.is_stuck + div {
    pointer-events: none;
}
/* SEARCH */
body .tecart-search-form {
    display:block;
    top: calc(3 * var(--padding));
    color: var(--grey1);
    background-color: transparent;
    border: none;
    right: var(--padding);
    left: var(--padding);
    min-width: 0;
    width: auto;
    max-width: calc(var(--max-width) - 2 * var(--padding));
    margin: 0 auto;
    flex: 1 1 100%;
    align-self: flex-start;
    margin-top: calc(3 * var(--padding));
}
body .tecart-search-form-fields {
 position:relative
}
body .tecart-search-form-fields::after {
 display:block;
 content:"";
 clear:both
}
body .tecart-search-box  {
    position: relative;
    background-color: var(--base-color);
    display:inline-block;
    box-shadow: 0 0 20px rgba(var(--grey1-rgb), .6);
    z-index: 1002;
    margin-bottom: 0
}
body .tecart-search-box::placeholder {
 color:#acb3c2;
 font-size:inherit;
 font-weight:inherit;
 opacity:1
}
body .tecart-search-box:-ms-input-placeholder {
 color:#acb3c2;
 font-size:inherit;
 font-weight:inherit;
}
body .tecart-search-box::-ms-input-placeholder {
 color:#acb3c2;
 font-size:inherit;
 font-weight:inherit;
}
body .tecart-search-placeholder-icon {
display: none
}
body .tecart-search-close {
    display: none
}
body .tecart-search-results {
 position:absolute;
 width:100%;
 padding:0;
 cursor:pointer;
 overflow-y:auto;
    scrollbar-width: thin;
 max-height:70vh;
 box-sizing:border-box;
 z-index:1001;
 display:flex;
    flex-flow: row wrap;
    list-style: none;
    margin: 0;
    background-color: rgba(var(--grey3-rgb),.6) 
}
body .tecart-search-results a {
 color:#0077ab
}
body .tecart-search-results .list-group-item {
 background-color: transparent !important;
    flex: 2 1 calc(2 * var(--flex-base));
    padding: var(--padding);
}
body .tecart-search-results .list-group-item a {
 background-color: rgba(var(--grey2-rgb),.6) !important;
}
body .tecart-search-results .list-group-item:first-of-type {
    flex: 1 1 100%;
}
body .tecart-search-results .link-class:hover {
 background-color:#f1f1f1
}
body .tecart-search-results .headline-class h2 {
 font-size:1rem;
 color:#1e2022;
 margin-bottom:0
}
@media only screen and (min-width:1200px) {
body .tecart-search-form-fields {
  margin-left: 0;
  margin-right:0
 }
}
@media only screen and (max-width:1199px) {
body .tecart-search-form-fields {
  margin-left:0;
  margin-right:0
 }
}
@media only screen and (max-width:767px) {
body .tecart-search-form-fields {
  margin-left:0;
  margin-right:0
 }
}
body .tecart-search-results .list-group-item img {
    max-height: 300px
}
body.searchopen {
    
}

.hide {
    opacity: 0 !important;
    position: absolute !important;
    left: -100% !important;
    pointer-events: none !important;
}
.empty {
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    opacity: 0 !important;
    margin-bottom: 0 !important;
}
body.loaded {opacity: 1;}