@charset "utf-8";
/*  BOX */
.box {
  --btwh: var(--line-height);
  min-height: var(--btwh);
}
.box a {
  text-decoration: underline;
}

.box[margin-type="wide"] {
  margin-top: 90px;
}
*[layout-type="center"] {
  --aspect-ratio:  calc(16/9);
  --width:  min(calc(100% - 2em), calc(var(--aspect-ratio) * (80vh - 8em)));
  width: var(--width);  
  margin-left: calc((100% - var(--width))/2);
}
*[layout-type="fullwidth"] {
  width: 100%;
}
  

/* TEXTBOX */
.textbox {
  color: var(--color);
  margin-left: auto;
  margin-right: auto;
  width: calc(100% - var(--padding) * 2);
}
/* IFRAME */
.iframe iframe {
  width: 100%;
  height: calc(var(--this-rect-width) / var(--aspect-ratio));
}
.iframe {
  padding: 0;
  line-height: 0;
}
/* CMD  BOX */
.cmdbox {
  display: flex;
  flex-direction: column;
}

.cmdbox *[input-name="cmd"] {
  width: 100%;
  background: blue;
  --input-padding-offset: 0;
  --input-padding-left: 0;
  padding: var(--padding);
}

.cmdbox .cmdresult {
  display: flex;
  flex-direction: column;
}

.cmdbox iframe {
  width: 100%;
}

.cmdbox .cookiesettingbox {
  padding: 0em;
  font-size: var(--font-size);
  background: transparent;
}

.cmdbox .cookiesettingbox .buttons {
  font-size: 0.75em;
}
/* GALLERY BOX */
.gallerybox {
  padding: var(--padding);
  padding-top: 0;
}
body[is-cms] .gallerybox .gallerythumbs {
  display: flex;
  flex-wrap: wrap;
}
.gallerybox .gallerythumbs {
  width: 100%;
  --make-rows-by-height:
  calc(min(calc(120px + 14vw), calc(0.33 * var(--docel-client-height))));
  --row-padding-x:
  var(--padding);
  --row-padding-y:
  var(--padding);
}

.gallerybox .gallerydividebox {
  flex-grow: 0;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  width: auto;
  margin-right: 1em;
  margin-bottom: 1em;
  transform: scale(1);
  font-weight: 600;
  --count-as-spacebetween: yes;
  --aspect-ratio: 0.2;
}
.gallerybox .gallerydividebox .titlewrapper {
  width: 100%;
  height: 100%;
  display: flex;
  font-size: 2em;
  line-height: 1em;
  writing-mode: vertical-rl;
  text-orientation: upright;
}
body[device-mode="mobile"] .gallerybox .gallerydividebox {
  --aspect-ratio: 0.1;
}
body[device-mode="mobile"] .gallerybox .gallerydividebox .titlewrapper {
  font-size: 1.25em;
}
.gallerybox .gallerythumbbox .media, 
.gallerybox .gallerythumbbox .mediafootage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
body[is-fe] .gallerybox .gallerythumbbox .mediafootage {
  pointer-events: none;
}
.gallerybox .gallerythumbbox .mediafootage {
  opacity: 1 !important;
}
.gallerybox .gallerythumbbox .media{
  background: white;
}
.gallerybox .gallerythumbbox .mediafootage:not[iframe] {
  opacity: 1 !important;
  background: white;
  filter: contrast(0) brightness(2);
  transition: filter 0.3s;
}
.gallerybox .gallerythumbbox .mediafootage[is-loaded]:not[iframe]  {
  filter: none;
}
.gallerybox .gallerythumbbox *[media-type="iframe"] .iframethumbimg{
  display: block;
  display: none;
}

.gallerybox .gallerythumbs > *[last-in-row] {
  margin-right: -7px;
}
.page .gallerybox .gallerythumbbox[is-active] .media {
  opacity: 1;
  transition: opacity 0.1s 0.5s;
}
.gallerypopupbox[is-open] ~ .page .gallerybox[is-open]  .gallerythumbbox[is-active] .media {
  opacity: 0;
  transition: opacity 0s 0s;
}
.gallerybox .gallerythumbbox .captionwrapper {
  width: 100%;
  background: white;
}
.gallerypopupbox {
  opacity: 1;
  pointer-events: none;
  position: absolute;
  top: var(--abs-pos-y);
  width: 100%;
  height: 100%;
  z-index: 99999999;
  background: transparent;
  transition: background 0.6s, top 0.001s;
  overflow: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  --thumb-tanslate-x: 0px;
  --thumb-tanslate-y: 0px;
  --thumb-scale-x: 0.2;
  --thumb-scale-y: 0.2;
}
.gallerypopupbox:before {
  content: '';
  position: absolute;
  display: block;
  width: 1px;
  height: 1px;
  top:calc(100% + 1px);
}
.gallerypopupbox[is-open] ~ * {
  /* filter: blur(16px); */
}
.gallerypopupbox[is-open] ~ *:not(.bg) {
  /* opacity: 0; */
}
.gallerypopupbox[is-open],
.gallerypopupbox[before-open]{
  position: fixed;
  top: 0;
  left: 0;
  transition: background 0.6s;
  opacity: 1;
  pointer-events: all;
  background: var(--bg-color);
}
.gallerypopupbox .iconbt {
  opacity: 0;
  transition: opacity 0.0s 0.0s;
}
.gallerypopupbox[is-open] .iconbt {
  opacity: 1;
  transition: opacity 0.6s 0.0s;
}
.gallerypopupbox[is-open] .mediabox .mediafootage {
  transition: none;
  transform: none;
  opacity: 1 !important;
}
.gallerypopupbox .galleryel[is-active-scrollsnap] .mediabox .mediafootage {
  transition: transform 0.6s, opacity 0.2s 0.6s;
}
.gallerypopupbox[before-open] .galleryel[is-active-scrollsnap] .mediabox .mediafootage {
  transition: transform 0.0s, opacity 0.0s;
}
/*  */
.gallerypopupbox {
  opacity: 0 !important;
  transition: transform 0.6s, opacity 0.2s 0.6s;
}
.gallerypopupbox[sim-full-open], .gallerypopupbox[is-open]  {
  opacity: 1 !important;
  /* transition: none; */
}
/*  */
.gallerypopupbox .mediabox .mediafootage {
  opacity: 0 !important;
}

.gallerypopupbox .galleryel[is-active-scrollsnap] .mediabox .mediafootage {
  transform: translate(var(--thumb-tanslate-x), var(--thumb-tanslate-y)) scale(var(--thumb-scale-x), var(--thumb-scale-y));
}

.gallerypopupbox[is-open] .galleryel[is-active-scrollsnap] .mediabox .mediafootage {
  transition: transform 0.6s, opacity 0s;
  transform: translate(0, 0) scale(1);
}
.gallerypopupbox[sim-full-open] .galleryel[is-active-scrollsnap] .mediabox .mediafootage {
  transition: none;
  transform: none;
  opacity: 1;
}
.gallerypopupbox .iconbt {
  --btwh:
    calc(var(--padding) * 3);
  position: absolute;
  width: var(--btwh);
  height: var(--btwh);
  cursor: pointer;
  line-height: var(--btwh);
  font-size: 2em;
  font-weight: 600;
  text-align: center;
}
.gallerypopupbox .iconbt .svgicon {
  background: var(--color);
  transition: background 0.3s;
}
.gallerypopupbox .iconbt:hover .svgicon {
  background: var(--hover-color);
}
.gallerypopupbox .closebt {
  --svgicon-url:
    var(--utils-icon-close);
  top: 0;
  right: 0;
}
.gallerypopupbox .nextbt {
  --svgicon-url:
    var(--arrow-right);
  right: 0;
}
.galleryels[last-is-active] ~ .nextbt {
  display: none;
}
.gallerypopupbox .prevbt {
  --svgicon-url: var(--arrow-left);
  left: 0;
}
.galleryels[first-is-active] ~ .prevbt {
  display: none;
}
.gallerypopupbox .prevbt, .gallerypopupbox .nextbt {
  top: 50%;
  transform: translate(0, -50%);
}
body[device-mode="mobile"] .gallerypopupbox .prevbt, body[device-mode="mobile"] .gallerypopupbox .nextbt {
  top: initial;
  bottom: 0px;
  transform: none;
}
.gallerypopupbox .galleryels {
  width: 100%;
  height: 100%;
}
.gallerypopupbox .galleryels .galleryel {
  /* display: inline-block; */
  margin-top: auto;
  width: 100%;
  height: 100%;
  padding: calc(var(--padding) * 3);
  padding-top: calc(var(--padding) * 2.5);
  padding-bottom: calc(var(--padding) * 3);
}
body[device-mode="mobile"] .galleryels .galleryel {
  padding-left: 1em;
  padding-right: 1em;
}


.gallerypopupbox .galleryels .galleryel .caption {
  position: absolute;
  display: flex;
  overflow-y: auto;
  bottom: 0.5em;
  left: calc(3 * var(--padding));
  opacity: 0;
  font-size: 14px;
  text-align: center;
  width: calc(100% - 6 * var(--padding));
  height: calc(3 * var(--padding) - 1em);
  transition: opacity 0.3s 0s;
}
.gallerypopupbox[is-open] .galleryels[is-scrolling] .galleryel .caption {
  opacity: 0;
  transition: none;
}
.gallerypopupbox[is-open] .galleryels .galleryel .caption {
  opacity: 1;
}
.gallerypopupbox .galleryels .galleryel .caption p {
  margin-left: auto;
  margin-right: auto;
}
.gallerypopupbox .galleryels .galleryel .caption p:first-child {
  margin-top: auto;
}
.gallerypopupbox .galleryels .galleryel .caption p:last-child {
  margin-bottom: auto;
}
.gallerypopupbox .galleryels .galleryel .mediabox {
  width: 100%;
  height: 100%;
}
.gallerypopupbox .galleryels .galleryel .media {
  position: absolute;
  display: flex;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: calc(100%);
  max-height: calc(100vh - 8em);
}
.gallerypopupbox .galleryels .galleryel .mediafootage {
   --object-fit: contain;
}
.gallerypopupbox .galleryels .galleryel .mediafootage:not[pseudoimg] {
   background: white;
}
.gallerypopupbox .galleryels .galleryel .mediafootage:not([is-yt-iframe]) {

  background-size: contain;
}



/* NEWS BOX */
.newsbox {
  display: flex;
  flex-wrap: wrap;
  --max-text-w: 420px;--text-w: min(var(
  --max-text-w), calc(100vw - 2*var(  --padding)));
  --wh: min(calc(100vh - 8em), max(var(
  --text-w), calc(100vw - var(--max-text-w) - var(  --padding) * 3) - 6px));
  column-gap: var(--padding);
  row-gap: var(--padding);
  padding: 0 var(--padding);
  margin-bottom: calc(2 * var(--padding));
}
.newsbox .newsmedia{
  flex-grow: 0;
  flex-shrink:0;
  height: auto;
  width: var(--wh);
  object-fit: contain;
  object-position: top left;
}
.newsbox .newsmedia .mediafootage{
  max-height: 80vh;
  object-fit: contain;
  object-position: top left;
}
.newsbox .textsec {
  width: var(--text-w);
  flex-grow: 0.2;
  flex-shrink: 99;
}
.newsbox .newstext {
  width: 100%;
}
/* SHOP ITEMS BOX */
.shopitemboxes {
  column-gap: calc(var(--padding) * 3);
  row-gap: calc(var(--padding) * 3);
  padding: var(--padding);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(calc((100vw + 4444px)/12), 100%), 1fr));
}
.shopitembox {
  display: flex;
  flex-wrap: wrap;
--gap: 1em;
  column-gap: var(--gap);
  row-gap: var(--gap);
  height: fit-content;
  height: -moz-fit-content;
}
.shopitembox .gallerybox{
  padding:0;
}
.shopitembox .gallerybox .gallerythumbs{
  --make-rows-by-height: unset;
    --row-padding-x: unset;
    --row-padding-y: unset;
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 1em;
  row-gap: 1em;
}
.shopitembox .gallerybox .gallerythumbs .gallerythumbbox:first-child{
  grid-column: 1 / -1;
}
.shopitembox .gallerybox .gallerythumbs .gallerythumbbox .media, 
.shopitembox .gallerybox .gallerythumbbox .mediafootage{
  position: relative;
}

.shopitembox .title, .mailformcontent .title{
  font-weight: 600;
}
.shopitembox .openpopupformbutton{
  font-weight: 600;
  text-decoration: underline;
}

.shopitembox .sold{
  margin-top: 1em;
  font-weight: 600;
}


.shopitembox .leftsec{
  width: 25%;
  min-width: 150px;
  flex-grow: 3;
  height: fit-content;
  height: -moz-fit-content;
}

.shopitembox .rightsec{
  width: 20%;
  min-width: 260px;
  flex-shrink:0;
  flex-grow: 5;
  display: flex;
  flex-direction: column;
  row-gap: var(--line-height);
}