/*--- standard variables ---*/
/*--- product item ratio (thumb + content) ---*/
/* set ProductImageRatio in productOverview! */
/*--- media queries. When using responsive ---*/
/* Range breakpoints */
/*--- media queries. When using responsive: only mobile & desktop ---
@responsive:	false;
@largePhone:	~"only screen and (min-width: 480px)";
@tablet:		~"only screen and (min-width: 999999999px)";
@tabletLand:	~"only screen and (min-width: 768px)";
@desktop:		~"only screen and (min-width: 768px)";

@upToTablet:	~"only screen and (max-width: 767px)";
@upToDesktop:	~"only screen and (max-width: 767px)";*/
/*--- media queries. When not using responsive ---
@responsive:	false;
@largePhone:	~"only screen and (min-width: 1px)";
@tablet:		~"only screen and (min-width: 1px)";
@tabletLand:	~"only screen and (min-width: 1px)";
@desktop:		~"only screen and (min-width: 1px)";

@upToTablet:	~"only screen and (max-width: 1px)";
@upToDesktop:	~"only screen and (max-width: 1px)";*/
/*----- Default functions -----*/
/*----- Default Crossbrowser functions -----*/
/*----- CSS3 functions -----*/
/*----- CSS3 Animation functions -----*/
/*----- Buttons -----*/
/*----- Responsive functions -----*/
.section {
  gap: 16px;
  align-items: center;
}
@media only screen and (min-width: 768px) {
  .section {
    gap: 8px;
  }
}
.section .section {
  width: 100%;
  margin: 0 auto;
  margin-bottom: 48px;
}
.section .section .section {
  margin-bottom: 0;
}
.section p {
  font-size: 16px;
  line-height: 30px;
}
.section h1,
.section h2,
.section h3,
.section h4,
.section h5,
.section h6 {
  text-transform: none;
  font-family: 'Playfair Display';
  color: black;
  white-space: initial;
  overflow: initial;
  text-overflow: initial;
}
.section h1 {
  font-size: 54px;
  line-height: 64px;
}
.section h2 {
  font-size: 50px;
  line-height: 60px;
}
.section h3 {
  font-size: 40px;
  line-height: 48px;
}
.section h4 {
  font-size: 32px;
  line-height: 42px;
}
.section h5 {
  font-size: 24px;
  line-height: 32px;
}
.section h6 {
  font-size: 18px;
  line-height: 26px;
}
.image {
  width: 100%;
  height: auto;
  margin-bottom: -7px;
}
/* Swiper */

.swiper-wrapper {
  align-items: center;
}
.swiper-pagination {
  position: absolute;
  bottom: 0 !important;
}
.swiper-pagination-bullet {
  width: 10px;
  height: 10px;
}
.swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: #dedede;
}
/* Text element */

.textElement .ql-align-center {
  text-align: center;
}
.textElement .ql-align-right {
  text-align: right;
}
.textElement .ql-align-justify {
  text-align: justify;
}
.textElement h1,
.textElement h2,
.textElement h3,
.textElement h4,
.textElement h5,
.textElement h6 {
  font-weight: 500;
}
.textElement h1 strong,
.textElement h2 strong,
.textElement h3 strong,
.textElement h4 strong,
.textElement h5 strong,
.textElement h6 strong {
  font-weight: 700;
}
.textElement ol {
  margin-left: 16px;
  counter-reset: list-counter;
}
.textElement ol li {
  position: relative;
  counter-increment: list-counter;
}
.textElement ol li[data-list=bullet] .ql-ui:before {
  content: '\2022';
}
.textElement ol li .ql-ui {
  position: absolute;
}
.textElement ol li .ql-ui:before {
  content: counter(list-counter, decimal) '. ';
  display: inline-block;
  margin-left: -1.5em;
  margin-right: .3em;
  text-align: right;
  white-space: nowrap;
  width: 1.2em;
}
.textElement blockquote {
  position: relative;
  margin: 16px 24px;
}
.textElement blockquote.ql-align-right:before {
  left: auto;
  right: -24px;
}
.textElement blockquote:before {
  content: "";
  position: absolute;
  display: block;
  width: 5px;
  height: 100%;
  left: -24px;
  background: black;
}
/* Button element */

.buttonElement {
  display: flex;
}
.buttonElement .bttn {
  width: auto;
}
/* Media element - Carousel */

.mediaCarouselElement {
  position: relative;
  overflow: hidden;
}
.mediaCarouselElement .swiper-slide {
  text-align: center;
}
.mediaCarouselElement .title {
  display: inline-block;
  color: black;
  text-align: center;
  margin: 15px 0 0;
  padding: 0 0 2px;
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  border-bottom: 1px solid black;
}
/* Products element */

@media only screen and (min-width: 1024px) {
  .productCarouselElement .element .productList,
  .productListElement .element .productList {
    overflow: hidden;
    overflow: initial;
  }
  .productCarouselElement .element .productList > .item,
  .productListElement .element .productList > .item {
    float: left;
    margin-right: 1.509054326%;
    margin-bottom: 1.509054326%;
    width: 32.327297116%;
  }
  .lt-ie9 .productCarouselElement .element .productList > .item,
  .lt-ie9 .productListElement .element .productList > .item {
    /*IE 8*/
    width: 31.824279007%;
  }
  .productCarouselElement .element .productList > .item:nth-of-type(n),
  .productListElement .element .productList > .item:nth-of-type(n) {
    /*reset if function is called more then once*/
    margin-right: 1.509054326%;
  }
  .productCarouselElement .element .productList > .item:nth-of-type(3n),
  .productListElement .element .productList > .item:nth-of-type(3n) {
    margin-right: 0;
  }
}
@media only screen and (min-width: 1280px) {
  .productCarouselElement .element .productList,
  .productListElement .element .productList {
    overflow: hidden;
    overflow: initial;
  }
  .productCarouselElement .element .productList > .item,
  .productListElement .element .productList > .item {
    float: left;
    margin-right: 1.339285714%;
    margin-bottom: 1.339285714%;
    width: 32.44047619%;
  }
  .lt-ie9 .productCarouselElement .element .productList > .item,
  .lt-ie9 .productListElement .element .productList > .item {
    /*IE 8*/
    width: 31.994047619%;
  }
  .productCarouselElement .element .productList > .item:nth-of-type(n),
  .productListElement .element .productList > .item:nth-of-type(n) {
    /*reset if function is called more then once*/
    margin-right: 1.339285714%;
  }
  .productCarouselElement .element .productList > .item:nth-of-type(3n),
  .productListElement .element .productList > .item:nth-of-type(3n) {
    margin-right: 0;
  }
}
.productCarouselElement {
  position: relative;
  overflow: hidden;
}
.productCarouselElement .productList {
  overflow: initial;
  margin-bottom: 0;
  flex-flow: initial !important;
}
.productListElement .productList {
  display: flex;
  flex-wrap: wrap;
  overflow: initial;
  margin-bottom: 0;
}
.productListElement .productList .item {
  margin: 0 !important;
  float: inherit;
}
