/*structure*/
.row {
  min-width: 100%;
}

.row.row--md-pad {
  margin-left: -10px;
  margin-right: -10px;

  & > * {
    padding-left: 10px;
    padding-right: 10px;
  }
}

.row.row--sm-pad {
  margin-left: -7px;
  margin-right: -7px;

  & > * {
    padding-left: 7px;
    padding-right: 7px;
  }
}

@media (max-width: $screen-xs-max) {
  .row.row--sm-pad-xs {
    margin-left: -10px;
    margin-right: -10px;

    & > * {
      padding-left: 10px;
      padding-right: 10px;
    }
  }
}

.container:not(.container-prd-block).container--boxed {
  max-width: $container-boxed;
}

body.boxed {
  .page-wrapper {
    overflow: hidden;
    max-width: $container-boxed;
    margin-left: auto;
    margin-right: auto;
    background-color: $body_bg;
    box-shadow: 0 0 50px rgba(0, 0, 0, .1);
  }
}

@supports (-webkit-overflow-scrolling: touch) {
  .row, .custom-grid {
    &:before {
      content: none;
    }

    &:after {
      content: '';
    }
  }
}

body.mac {
  .row:before, .row:after, .custom-grid:before, .custom-grid:after {
    display: none;
  }
}

.vert-margin-double {
  margin-top: -$col-mt*2;
  @media (max-width: $screen-sm-max) {
    margin-top: -$col-mt-sm*2;
  }
  @media (max-width: $screen-xs-max) {
    margin-top: -$col-mt-xs*2;
  }

  & > * {
    margin-top: $col-mt*2;
    @media (max-width: $screen-sm-max) {
      margin-top: $col-mt-sm*2;
    }
    @media (max-width: $screen-xs-max) {
      margin-top: $col-mt-xs*2;
    }
  }
}

.vert-margin {
  margin-top: -$col-mt;
  @media (max-width: $screen-sm-max) {
    margin-top: -$col-mt-sm;
  }
  @media (max-width: $screen-xs-max) {
    margin-top: -$col-mt-xs;
  }

  & > * {
    margin-top: $col-mt;
    @media (max-width: $screen-sm-max) {
      margin-top: $col-mt-sm;
    }
    @media (max-width: $screen-xs-max) {
      margin-top: $col-mt-xs;
    }
  }
}

.vert-margin-small {
  margin-top: -30px;
  @media (max-width: $screen-xs-max) {
    margin-top: -20px;
  }

  & > * {
    margin-top: 30px;
    @media (max-width: $screen-xs-max) {
      margin-top: 20px;
    }
  }
}

.vert-margin-middle {
  margin-top: -10px;

  & > * {
    margin-top: 10px;
  }
}

.vert-margin-less {
  margin-top: -5px;

  & > * {
    margin-top: 5px;
  }
}

@media (max-width: $screen-md-max) {
  .vert-margin-md {
    margin-top: -$col-mt;
    @media (max-width: $screen-sm-max) {
      margin-top: -$col-mt-sm;
    }
    @media (max-width: $screen-xs-max) {
      margin-top: -$col-mt-xs;
    }

    & > * {
      margin-top: $col-mt;
      @media (max-width: $screen-sm-max) {
        margin-top: $col-mt-sm;
      }
      @media (max-width: $screen-xs-max) {
        margin-top: $col-mt-xs;
      }
    }
  }
}

.page-content img {
  max-width: 100%;
}

.page-content > .container:first-child, .page-content > .holder:first-child, .page-content > *:first-child > .holder,
.page-content .banners-grid-collection:first-child:empty + .holder {
  margin-top: 40px;
  @media (max-width: $screen-xs-max) {
    margin-top: 30px;
  }
}

.page-content .breadcrumbs-wrap {
  &, .holder {
    margin-top: 0;
  }

  & + *:not(.shopify-section):not(.page-content), & + * > .holder, & + .banners-grid-collection:empty + .holder {
    margin-top: 40px;
    @media (max-width: $screen-xs-max) {
      margin-top: 30px;
    }
  }
}

/*holder*/
.holder, .page-footer {
  margin-top: $holder_margin;
  @media (max-width: $screen-sm-max) {
    margin-top: $holder_margin-sm;
  }
  @media (max-width: $screen-xs-max) {
    margin-top: $holder_margin-xs;
  }
}

.holder-mt-xsmall {
  margin-top: $holder_margin_xsmall;
  @media (max-width: $screen-sm-max) {
    margin-top: $holder_margin_xsmall-sm;
  }
  @media (max-width: $screen-xs-max) {
    margin-top: $holder_margin_xsmall-xs;
  }
}

.holder-mt-small {
  margin-top: $holder_margin_small;
  @media (max-width: $screen-sm-max) {
    margin-top: $holder_margin_small-sm;
  }
  @media (max-width: $screen-xs-max) {
    margin-top: $holder_margin_small-xs;
  }
}

.holder-mt-large {
  margin-top: $holder_margin_large;
  @media (max-width: $screen-sm-max) {
    margin-top: $holder_margin_large-sm;
  }
  @media (max-width: $screen-xs-max) {
    margin-top: $holder_margin_large-xs;
  }
}

@media (max-width: $screen-xs-max) {
  .page-content > .holder:first-child {
    margin-top: 20px;
  }
}

.holder.fullwidth > .container {
  width: 100%;
  max-width: none;
}

.holder.full-nopad > .container {
  padding-left: 0;
  padding-right: 0;
}

@media (min-width: $screen-lg-min) {
  .aside--sticky .aside-content {
    position: -webkit-sticky;
    position: sticky;
    top: 30px;
    transform: translate3d(0, 0, 0);
    transition: transform .5s;
  }
}

@media (max-width: $screen-md-max) {
  .is-collision > * {
    padding-top: 0 !important;
  }
}

.holder.bgcolor {
  background: $holder_bg;
}

.holder.bgcolor-1 {
  background: $holder_bg-1;
}

@media (min-width: $screen-lg-min) {
  body:not(.has-sm-container) .aside--left {
    padding-right: 45px;
  }
  body:not(.has-sm-container) .aside--right {
    padding-left: 45px;
  }
}

@media (min-width: $screen-md-min) {
  .aside {
    order: 1;
  }
  .aside--left {
    order: 0;
  }
  .aside--right {
    order: 2
  }
  .off-sidebar {
    justify-content: center;
  }
  .off-sidebar.on-grid {
    .aside--content {
      flex: 0 0 100%;
      max-width: 100%;
      width: 100%;
    }
  }
}

@media (max-width: $screen-sm-max) {
  .aside:not(.filter-col) + .aside {
    margin-top: 35px;
  }
}

.aside-block {
  & > h2 {
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 15px;
  }

  & + .aside-block {
    margin-top: 50px;
  }
}

.custom-grid {
  > * {
    margin-left: 15px;
    margin-right: 15px;
  }

  &.data-to-show-5 > * {
    @include flexWidth(calc(20% - 30px));
    width: calc(20% - 30px);
  }

  &.data-to-show-4 > * {
    @include flexWidth(calc(25% - 30px));
    width: calc(25% - 30px);
  }

  &.data-to-show-3 > * {
    @include flexWidth(calc(33.333% - 30px));
    width: calc(33.333% - 30px);
  }

  &.data-to-show-2 > * {
    @include flexWidth(calc(50% - 30px));
    width: calc(50% - 30px);
  }

  &.data-to-show-1 > * {
    @include flexWidth(calc(100% - 30px));
    width: calc(100% - 30px);
  }
}

@media (max-width: $screen-lg-max) {
  .custom-grid {
    &.data-to-show-lg-5 > * {
      @include flexWidth(calc(20% - 30px));
      width: calc(20% - 10px);
    }

    &.data-to-show-lg-4 > * {
      @include flexWidth(calc(25% - 30px));
      width: calc(25% - 10px);
    }

    &.data-to-show-lg-3 > * {
      @include flexWidth(calc(33.333% - 30px));
      width: calc(33.333% - 10px);
    }

    &.data-to-show-lg-2 > * {
      @include flexWidth(calc(50% - 30px));
      width: calc(50% - 30px);
    }

    &.data-to-show-lg-1 > * {
      @include flexWidth(calc(100% - 30px));
      width: calc(100% - 10px);
    }
  }
}

@media (max-width: $screen-md-max) {
  .custom-grid {
    margin-left: -5px;
    margin-right: -5px;

    > * {
      margin-left: 5px;
      margin-right: 5px;
    }

    &.data-to-show-md-5 > * {
      @include flexWidth(calc(20% - 30px));
      width: calc(20% - 10px);
    }

    &.data-to-show-md-4 > * {
      @include flexWidth(calc(25% - 30px));
      width: calc(25% - 10px);
    }

    &.data-to-show-md-3 > * {
      @include flexWidth(calc(33.333% - 30px));
      width: calc(33.333% - 10px);
    }

    &.data-to-show-md-2 > * {
      @include flexWidth(calc(50% - 30px));
      width: calc(50% - 30px);
    }

    &.data-to-show-md-1 > * {
      @include flexWidth(calc(100% - 30px));
      width: calc(100% - 10px);
    }
  }
}

@media (max-width: $screen-sm-max) {
  .custom-grid {
    &.data-to-show-sm-5 > * {
      @include flexWidth(calc(20% - 10px));
      width: calc(20% - 10px);
    }

    &.data-to-show-sm-4 > * {
      @include flexWidth(calc(25% - 10px));
      width: calc(25% - 10px);
    }

    &.data-to-show-sm-3 > * {
      @include flexWidth(calc(33.333% - 10px));
      width: calc(33.333% - 10px);
    }

    &.data-to-show-sm-2 > * {
      @include flexWidth(calc(50% - 10px));
      width: calc(50% - 10px);
    }

    &.data-to-show-sm-1 > * {
      @include flexWidth(calc(100% - 10px));
      width: calc(100% - 10px);
    }
  }
}

@media (max-width: $screen-xs-max) {
  .custom-grid {
    &.data-to-show-xs-5 > * {
      @include flexWidth(calc(20% - 10px));
      width: calc(20% - 10px);
    }

    &.data-to-show-xs-4 > * {
      @include flexWidth(calc(25% - 10px));
      width: calc(25% - 10px);
    }

    &.data-to-show-xs-3 > * {
      @include flexWidth(calc(33.333% - 10px));
      width: calc(33.333% - 10px);
    }

    &.data-to-show-xs-2 > * {
      @include flexWidth(calc(50% - 10px));
      width: calc(50% - 10px);
    }

    &.data-to-show-xs-1 > * {
      @include flexWidth(calc(100% - 10px));
      width: calc(100% - 10px);
    }
  }
}

.holder.show-above-slider {
  background-color: #000;
}

@media (min-width: $screen-xl-min) {
  .holder.show-above-slider {
    position: absolute;
    left: 0;
    right: 0;
    margin-top: 0;
    transform: translate3d(0, -100%, 0);
    background-color: rgba(0, 0, 0, .5);
  }
}

@media (max-width: $screen-xs-max) and (max-width: $screen-xs-max) {
  .col-xs-quarter {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-xs-onefive {
    flex: 0 0 20%;
    max-width: 20%;
  }
}

@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
  .col-sm-quarter {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-sm-onefive {
    flex: 0 0 20%;
    max-width: 20%;
  }
}

@media (min-width: $screen-sm-min) {
  .col-sm-up-quarter {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-sm-up-onefive {
    flex: 0 0 20%;
    max-width: 20%;
  }
}

@media (min-width: $screen-md-min) {
  .col-md-up-quarter {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-md-up-onefive {
    flex: 0 0 20%;
    max-width: 20%;
  }
}

@media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
  .col-md-quarter {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-md-onefive {
    flex: 0 0 20%;
    max-width: 20%;
  }
}

@media (min-width: $screen-lg-min) {
  .col-lg-up-quarter {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-lg-up-onefive {
    flex: 0 0 20%;
    max-width: 20%;
  }
}

@media (min-width: $screen-lg-min) and (max-width: $screen-md-max) {
  .col-lg-quarter {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-lg-onefive {
    flex: 0 0 20%;
    max-width: 20%;
  }
}

@media (min-width: $screen-xl-min) {
  .col-xl-quarter {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-xl-onefive {
    flex: 0 0 20%;
    max-width: 20%;
  }
}

.col-max-400 {
  max-width: 400px;
}

.holder-with-bg {
  padding-top: 80px;
  padding-bottom: 80px;
  @media (max-width: $screen-sm-max) {
    padding-top: $holder_margin-sm;
    padding-bottom: $holder_margin-sm;
  }
  @media (max-width: $screen-xs-max) {
    padding-top: $holder_margin-xs;
    padding-bottom: $holder_margin-xs;
  }
}

.holder-pt-medium.holder-with-bg {
  padding-top: 100px;
  @media (max-width: $screen-md-max) {
    padding-top: 80px;
  }
  @media (max-width: $screen-sm-max) {
    padding-top: $holder_margin-sm;
  }
  @media (max-width: $screen-xs-max) {
    padding-top: $holder_margin-xs;
  }
}

.holder-pt-xsmall.holder-with-bg {
  padding-top: $holder_margin_xsmall;
  @media (max-width: $screen-sm-max) {
    padding-top: $holder_margin_xsmall-sm;
  }
  @media (max-width: $screen-xs-max) {
    padding-top: $holder_margin_xsmall-xs;
  }
}

.holder-pt-small.holder-with-bg {
  padding-top: $holder_margin_small;
  @media (max-width: $screen-sm-max) {
    padding-top: $holder_margin_small-sm;
  }
  @media (max-width: $screen-xs-max) {
    padding-top: $holder_margin_small-xs;
  }
}

.holder-pt-large.holder-with-bg {
  padding-top: 120px;
  @media (max-width: $screen-md-max) {
    padding-top: 80px;
  }
  @media (max-width: $screen-sm-max) {
    padding-top: 65px;
  }
  @media (max-width: $screen-xs-max) {
    padding-top: 50px;
  }
}

.holder-pb-medium.holder-with-bg {
  padding-bottom: 100px;
  @media (max-width: $screen-md-max) {
    padding-bottom: 80px;
  }
  @media (max-width: $screen-sm-max) {
    padding-bottom: $holder_margin-sm;
  }
  @media (max-width: $screen-xs-max) {
    padding-bottom: $holder_margin-xs;
  }
}

.holder-pb-xsmall.holder-with-bg {
  padding-bottom: $holder_margin_xsmall;
  @media (max-width: $screen-sm-max) {
    padding-bottom: $holder_margin_xsmall-sm;
  }
  @media (max-width: $screen-xs-max) {
    padding-bottom: $holder_margin_xsmall-xs;
  }
}

.holder-pb-small.holder-with-bg {
  padding-bottom: $holder_margin_small;
  @media (max-width: $screen-sm-max) {
    padding-bottom: $holder_margin_small-sm;
  }
  @media (max-width: $screen-xs-max) {
    padding-bottom: $holder_margin_small-xs;
  }
}

.holder-pb-large.holder-with-bg {
  padding-bottom: 120px;
  @media (max-width: $screen-md-max) {
    padding-bottom: 80px;
  }
  @media (max-width: $screen-sm-max) {
    padding-bottom: 65px;
  }
  @media (max-width: $screen-xs-max) {
    padding-bottom: 50px;
  }
}

.hdr-wrap .container, .page-footer .container, .footer-sticky .container, .holder:not(.fullwidth) .container:not(.coming-soon-block) {
  max-width: $container-max !important;
}

.image-container {
  height: 0;
  overflow: hidden;
  position: relative;

  & > img, & > .zoomWrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }

  .foxic-loader {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    opacity: 1;
    transition: opacity .3s .2s;
  }

  img.lazyloaded + .foxic-loader, img.lazyloading + .foxic-loader {
    opacity: 0;
  }

  .placeholder-svg {
    position: absolute;
    top: 0;
    left: 0;
  }
}

.image-container > img.lazyload {
  height: 100%;
}

.image-container > .zoomWrapper {
  width: 100% !important;
  height: 100% !important;
}

body:not(.equal-height) .prd .image-container > img {
  max-height: 100%;
  margin: 0 auto;
}

span.image-container {
  display: block;
  width: 100%;
  position: relative;
}

.has-prd-shadow {
  .prd-hor .prd-inside {
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.05);
  }
  .prd:not(.prd-hor) .prd-img-area {
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.05);
  }
}

.has-rounded-elements {
  .prd-horgrid .prd:not(.prd-hor--lg) .prd-img-area, .prd-hor:not(.prd-hor--lg) .prd-img-area, .prd-hor-simple .prd-img-area, .prd:not(.prd-hor) .prd-img-area {
    border-radius: 15px;
  }
  .collection-grid-2-img, .collection-grid-img {
    border-radius: 15px;
  }
  .prd .prd-inside .prd-img {
    border-radius: 15px;
  }

  .prd-grid .slick-list {
    margin-top: -10px;
    padding-top: 10px;
  }

  .prd-hor--lg .prd-inside {
    overflow: visible;
    border-radius: 15px;
  }

  .bnr {
    border-radius: 15px;
  }

  .bnr-text-has-bg .bnr-text-bg {
    border-radius: 12px;
  }

  .row.no-gutters .bnr,
  .holder.fullwidth > .container > .bnr-wrap .bnr {
    border-radius: 0;
  }

  .bnr-caption-bg {
    border-radius: 15px;
    overflow: hidden;
  }

  .prd .prd-inside {
      overflow: visible;
      border-radius: 15px;
  }

  .form-control {
    border-radius: 30px;
  }

  .form-control--sm {
    border-radius: 25px;
  }

  .post-prw-img, .post-prw-info-wrap {
    border-radius: 20px;
  }

  .prd-card_countdown .countdown > span {
    border-radius: 6px;
  }
}