.website section[data-arrangergallerycols="2"] article {
  width: 50%;
}

.website section[data-arrangergallerycols="3"] article {
  width: 33.33333333333%;
}

.website section[data-arrangergallerycols="4"] article {
  width: 25%;
}

@media only screen and (max-width: 680px) {
  .website section[data-layoutclass="right-center"] article .pic-side,
  .website section[data-layoutclass="right-right"] article .pic-side,
  .website section[data-layoutclass="right-left"] article .pic-side,
  .website section[data-layoutclass="left-center"] article .pic-side,
  .website section[data-layoutclass="left-right"] article .pic-side,
  .website section[data-layoutclass="left-left"] article .pic-side,
  .website section[data-layoutclass="top-center"] article .pic-side,
  .website section[data-layoutclass="top-left"] article .pic-side,
  .website section[data-layoutclass="top-right"] article .pic-side,
  .website section[data-layoutclass="bottom-left"] article .pic-side,
  .website section[data-layoutclass="bottom-right"] article .pic-side,
  .website section[data-layoutclass="bottom-center"] article .pic-side {
    min-height: var(--arranger-item-min-height, 250px) !important;
  }

  .website
    section[data-layoutclass="middle-left"]:not[data-arranger="flex"]
    article,
  .website
    section[data-layoutclass="middle-right"]:not[data-arranger="flex"]
    article,
  .website
    section[data-layoutclass="middle-center"]:not[data-arranger="flex"]
    article,
  .website
  section[data-layoutclass="middle-left"]:not[data-arranger="carousel"]
  article,
  .website
  section[data-layoutclass="middle-right"]:not[data-arranger="carousel"]
  article,
  .website
  section[data-layoutclass="middle-center"]:not[data-arranger="carousel"]
  article {
    min-height: 250px !important;
  }
}

@media only screen and (max-width: 850px) {
  .website section[data-arrangergallerycols="10"]:not([data-arranger="carousel"]) article,
  .website section[data-arrangergallerycols="9"]:not([data-arranger="carousel"]) article,
  .website section[data-arrangergallerycols="8"]:not([data-arranger="carousel"]) article,
  .website section[data-arrangergallerycols="7"]:not([data-arranger="carousel"]) article,
  .website section[data-arrangergallerycols="6"]:not([data-arranger="carousel"]) article,
  .website section[data-arrangergallerycols="5"]:not([data-arranger="carousel"]) article,
  .website section[data-arrangergallerycols="4"]:not([data-arranger="carousel"]) article {
    width: 25% !important;
    flex-grow: 1;
  }
}

@media only screen and (max-width: 680px) {
  .website section[data-arrangergallerycols="10"]:not([data-arranger="carousel"])  article,
  .website section[data-arrangergallerycols="9"]:not([data-arranger="carousel"])  article,
  .website section[data-arrangergallerycols="8"]:not([data-arranger="carousel"])  article,
  .website section[data-arrangergallerycols="7"]:not([data-arranger="carousel"])  article,
  .website section[data-arrangergallerycols="6"]:not([data-arranger="carousel"])  article,
  .website section[data-arrangergallerycols="5"]:not([data-arranger="carousel"])  article,
  .website section[data-arrangergallerycols="4"]:not([data-arranger="carousel"])  article {
    width: 40% !important;
    flex-grow: 1;
  }

  .website section[data-arrangergallerycols="3"]:not([data-arranger="carousel"]) article,
  .website section[data-arrangergallerycols="2"]:not([data-arranger="carousel"]) article {
    width: 50% !important;
    flex-grow: 1;
  }
}

@media only screen and (max-width: 480px) {
  .website section[data-layoutclass="middle-center"] article,
  .website section[data-layoutclass="middle-left"] article,
  .website section[data-layoutclass="middle-right"] article {
    min-height: 20vw;
  }

  .website section[data-arrangergallerycols="8"]:not([data-arranger="carousel"]) article,
  .website section[data-arrangergallerycols="7"]:not([data-arranger="carousel"]) article,
  .website section[data-arrangergallerycols="6"]:not([data-arranger="carousel"]) article,
  .website section[data-arrangergallerycols="5"]:not([data-arranger="carousel"]) article,
  .website section[data-arrangergallerycols="4"]:not([data-arranger="carousel"]) article,
  .website section[data-arrangergallerycols="3"]:not([data-arranger="carousel"]) article,
  .website section[data-arrangergallerycols="2"]:not([data-arranger="carousel"]) article {
    width: 100% !important;
    flex-grow: 1;
  }
}

.website section[data-arrangergallerycols="5"]:not([data-arranger="carousel"]) article {
  width: 20%;
}

.website section {
  position: relative;
  width: 100%;
  min-height: 0;
}

.website section[data-layouttype="menu"] {
  min-height: auto;
}

.website section .children {
  width: 100%;
  min-height: inherit;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  margin-left: auto;
  margin-right: auto;
  align-items: flex-start;
}

.website section .children .section-children {
  width: 100%;
  min-height: inherit;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  margin-left: auto;
  margin-right: auto;
}
.website section[data-arranger="carousel"] article.section-header ,
.website section[data-arranger="matrix"] article.section-header {
  width: 100% !important;
  min-height: 0 !important;
  height: inherit !important;
}

@media only screen and (min-width: 880px) {

  .website section[data-headerposition="right"],
  .website section[data-headerposition="left"] {
    display: flex;
    align-items: flex-start;
  }

  .website section[data-headerposition="right"] .children .section-children,
  .website section[data-headerposition="left"] .children .section-children {
    width: 70% !important;
  }

  .website section[data-headerposition="right"] article.section-header,
  .website section[data-headerposition="left"] article.section-header {
    width: calc(
            30% - var(--arranger-item-spacing) - var(--arranger-item-spacing)
    ) !important;
    margin-right: 0px !important;
    margin-bottom: 0px !important;
  }

  .website section[data-blocksverticalalign="bottom"][data-headerposition="right"] article.section-header,
  .website section[data-blocksverticalalign="bottom"][data-headerposition="left"] article.section-header {
    align-self: flex-end;
  }

  .website section[data-blocksverticalalign="center"][data-headerposition="right"] article.section-header,
  .website section[data-blocksverticalalign="center"][data-headerposition="left"] article.section-header {
    align-self: center;
  }

  .website section[data-blocksverticalalign="top"][data-headerposition="right"] article.section-header,
  .website section[data-blocksverticalalign="top"][data-headerposition="left"] article.section-header {
    align-self: flex-start;
  }

  .website section[data-headerposition="left"] .children {
    flex-direction: row;
  }

  .website section[data-headerposition="right"] .children {
    flex-direction: row-reverse;
  }

  .website section[data-arranger="carousel"][data-headerposition="right"] article.section-header,
  .website section[data-arranger="carousel"][data-headerposition="left"] article.section-header {
    width: calc(30% - var(--arranger-item-spacing, 0px) - var(--arranger-item-spacing, 0px)) !important;
  }

  .website section[data-arranger="carousel"][data-headerposition="right"] .children .glide,
  .website section[data-arranger="carousel"][data-headerposition="left"] .children  .glide{
    overflow: hidden;
    width: calc(70% - var(--carousel-arrows-padding)) !important;
    padding: 0 calc(calc(2 * var(--original-carousel-gap) + var(--carousel-arrows-padding)) * var(--carousel-arrows-outside));
    margin: 0 auto;
  }

  .website section[data-arranger="carousel"][data-headerposition="right"] .children .glide .glide__track .glide__arrows.arrows-outside .glide__arrow--left,
  .website section[data-arranger="carousel"][data-headerposition="left"] .children  .glide .glide__track .glide__arrows.arrows-outside .glide__arrow--left{
    left:0;
  }

  .website section[data-arranger="carousel"][data-headerposition="right"] .children .glide .glide__track .glide__arrows.arrows-outside .glide__arrow--right,
  .website section[data-arranger="carousel"][data-headerposition="left"] .children  .glide .glide__track .glide__arrows.arrows-outside .glide__arrow--right{
    right: 0;
  }

  .website section[data-arranger="carousel"][data-headerposition="right"] .children .section-header,
  .website section[data-arranger="carousel"][data-headerposition="left"] .children  .section-header{
    margin-bottom: 0;
  }

  .website section[data-arranger="carousel"][data-headerposition="right"] .children .glide .glide__track,
  .website section[data-arranger="carousel"][data-headerposition="left"] .children  .glide .glide__track{
    display: grid;

  }

  .website section[data-arranger="carousel"][data-headerposition="right"] .children .section-children,
  .website section[data-arranger="carousel"][data-headerposition="left"] .children .section-children{
    width: auto !important;
  }

  .website section[data-arranger="carousel"][data-headerposition="left"] .children{
    flex-direction: row;
  }

  .website section[data-arranger="carousel"][data-headerposition="right"] .children{
    flex-direction: row-reverse;
  }
}

.website section[data-arranger="matrix"] article.pic-side {
  display: none;
}

/* MAOSNITE */

.website section[data-arrangersubtype="mazonite"] article {
  min-height: min-content;
  justify-content: end;
  display: inline-block;
  position: absolute;
}

.website
  section[data-arrangersubtype="mazonite"][data-layoutclass="bottom-center"]
  article.section-item
  .pic-side {
  flex-grow: 0;
}

.website section[data-arrangersubtype="mazonite"] article .pic-side img {
  height: auto;
  position: relative;
}

.website section[data-arrangersubtype="mazonite"] .children {
  display: flex;
  flex-flow: column wrap;
  max-width: 100%;
}

.website section[data-arrangersubtype="mazonite"] article {
  flex: 1 0 auto;
  overflow: hidden;
}

/* SLIDESHOW */

section[data-arranger="flex"] article {
  flex: 0 0 100%;
  overflow: hidden;
  min-height: inherit;
}

section[data-arranger="carousel"] article{
  flex: none;
  overflow: hidden;
}

.website section[data-arranger="carousel"] .children ,
.website section[data-arranger="flex"] .children {
  overflow: hidden;
  flex-wrap: nowrap;
}

.website section[data-arranger="carousel"] .children ,
.website section[data-is-slide-section="true"] .children {
  flex-direction: column;
}

.website section[data-arranger="carousel"] .children .section-header{
  align-self: center;
}

.website section[data-arranger="flex"] .children .section-children {
  overflow: hidden;
  flex-wrap: nowrap;
}

.website section[data-arranger="carousel"] .children .section-children {
  flex-wrap: nowrap;
}

.website section[data-arranger="flex"] article.slide-animation {
  transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.website section[data-arranger="flex"] article.fade-animation {
  position: absolute;
  top: 0;
  bottom:0;
  left:0;
  right:0;
  z-index: -1;
  display: none;
}

.website section[data-is-slide-section="false"] article.slide-animation{
  transform: translateX(0) !important;
}
.website section[data-is-slide-section="true"] article.fade-animation{
  transform: translateX(0) !important;
}
@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes fadeIn {
  from { opacity: 0.1; }
  to { opacity: 1; }
}

.website section[data-arranger="flex"] article.fade-animation.prev-visible-slide {
  z-index: 2;
  display: inherit;
  animation-name: fadeOut;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}
.website section[data-arranger="flex"] article.fade-animation.visible-slide {
  z-index: 3;
  position: relative;
  display: inherit;
  animation-name: fadeIn;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}


.website section[data-arranger="flex"] .pagination {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
}

.website section[data-arranger="flex"][data-carousel-bullets-position="outside"] .pagination {
  position: relative;
  text-align: center;
  display: flex;
  flex: 1;
  justify-content: center;
  padding: 10px;
  z-index: 4;
  transform: unset;
  left: unset;
  bottom: unset;
}

.website section[data-arranger="flex"][data-carousel-bullets-position="none"] .pagination {
display: none;
}

.website section[data-arranger="carousel"] .pagination {
display: grid;
justify-content: center;
grid-auto-flow: column;
padding: 20px;
}

.website section[data-arranger="flex"] .pagination .slide-dot ,
.website section[data-arranger="carousel"] .pagination .slide-dot {
cursor: pointer;
float: left;
background-color: grey;
width: 9px;
height: 9px;
border-radius: 7px;
margin: 2px;
z-index: 4;
box-shadow: 0 0.25em 0.5em 0 rgb(0 0 0 / 10%);
}

.website section[data-arranger="flex"] .pagination .slide-dot {
transition: all 300ms ease-in-out;
}

.website section[data-arranger="flex"].section[data-arranger-pagination-style="lines"] .pagination .slide-dot {
height: 4px;
width: 19px;
border-radius: 10%;
border: none;
}

.website section[data-arranger="flex"].section[data-arranger-pagination-style="lines"] .pagination .slide-dot.active {
width: 40px;
}

.website section[data-arranger="flex"].section[data-arranger-pagination-style="hollow"] .pagination .slide-dot {
box-sizing: border-box;
background-color: transparent;
border-style: solid;
border-color: grey;
border-width: 1px;
}

.website section[data-arranger="flex"].section[data-arranger-pagination-style="hollow"] .pagination .slide-dot.active {
background-color: grey;
border-color: grey;
}

.website section[data-arranger="flex"].section[data-arranger-pagination-style="expanded-dots"] .pagination .slide-dot {
cursor: pointer;
margin: 3px;
border-radius: 4px;
border: none;
width: 11px;
}

.website section[data-arranger="flex"].section[data-arranger-pagination-style="expanded-dots"] .pagination .slide-dot.active {
width: 20px;
}

.website section[data-arranger="flex"] .pagination .slide-dot.active,
.website section[data-arranger="flex"] .pagination .slide-dot:hover,
.website section[data-arranger="carousel"] .pagination .slide-dot.active,
.website section[data-arranger="carousel"] .pagination .slide-dot:hover {
background-color: #e6e6e6;
box-shadow: 0 0.25em 0.5em 0 rgb(0 0 0 / 10%);
}

section[data-arranger="flex"] .arrow ,
section[data-arranger="carousel"] .arrow {
border: solid white;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 6px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
position: absolute;
right: 6%;
top: 50%;
content: "";
}

/* pagination */
.website section[data-arranger="carousel"] .gallery-pagination {
  display: none;
}
.website section[data-arranger="matrix"] .gallery-pagination {
  display: flex;
  width: 100%;
  align-items: center;
}

.pagination-more-button.pagination_variant_1,
.website section[data-arranger="matrix"] .gallery-pagination .pagination-more-button.pagination_variant_1 {
  margin: auto;
  cursor: pointer;
  padding: 10px;
  margin-top: 20px;
  margin-bottom: 40px;
  font-family: arial, serif;
  color: darkgray;
  font-size: 14px;
  border: 1px solid darkgray;
  position: relative;
}

.pagination-more-button.pagination_variant_2,
.website section[data-arranger="matrix"] .gallery-pagination .pagination-more-button.pagination_variant_2 {
  margin: auto;
  cursor: pointer;
  padding: 10px;
  margin-top: 20px;
  margin-bottom: 40px;
  font-family: arial, serif;
  color: white;
  font-size: 14px;
  border: 1px solid white;
  position: relative;
}

.pagination-more-button.pagination_variant_3,
.website section[data-arranger="matrix"] .gallery-pagination .pagination-more-button.pagination_variant_3 {
  margin: auto;
  cursor: pointer;
  padding: 10px;
  margin-top: 20px;
  margin-bottom: 40px;
  font-family: arial, serif;
  color: white;
  font-size: 14px;
  border: 0 solid white;
  position: relative;
  background-color: gray;
}