body {
  background-color: $body_bg;
  color: $body_text_color;
  font-size: 15px;
  font-family: $body_font_family;
  line-height: 23px;
  overflow-x: hidden;
}

body.touch .parallaxed {
  transform: none !important;
}

.theme-font {
  font-family: $body_font_family !important;
}

.heading-font {
  font-family: $heading_font_family !important;
}

b, strong {
  font-weight: 600;
}

.fw-500 {
  font-weight: 500;
}

.page-content, .modal-content {
  p {
    margin: 20px 0 0 0;
  }

  p:first-child {
    margin-top: 0;
  }

  p img {
    max-width: 100%;
  }
}

a, a:hover, a:focus {
  outline: none;
  transition: color .2s ease;
}

a {
  color: $body_link_color;
}

a:hover {
  color: $body_link_color_hover;
}

a:focus {
  text-decoration: none;
  color: $body_link_color;
}

a.dark-color, .page-content p > a.dark-color {
  color: $text_color_middle;

  &:hover, &:focus {
    color: $text_color_middle;
    text-decoration: underline;
  }
}

a[href^="tel:"] {
  white-space: nowrap;
}

.page-content p {
  & > a:not(.btn) {
    color: $custom_color;
    text-decoration: none;

    &:hover, &:focus {
      color: $text_color_middle;
      text-decoration: underline;
    }
  }

  b {
    color: $text_color_middle;
  }
}

.text-dark {
  color: $text_color_middle;
}

.p--small {
  font-size: 14px;
  line-height: 18px;
  color: $text_color_info;
}

input, textarea, button {
  &:focus {
    outline: 0;
  }
}

ul, ol {
  margin-bottom: 0;
}

.overflow-hidden {
  overflow: hidden;
}

h1, .h-lg-style {
  position: relative;
  z-index: 1;
  margin: 0 0 30px;
  padding: 0;
  color: $heading_color;
  font-weight: $heading_lg_weight;
  font-size: $heading_lg_size;
  font-family: $heading_font_family;
  line-height: 1.2em;
  @media (max-width: $screen-xs-max) {
    font-size: calc($heading_lg_size * 0.8);
  }
  & + .h-behind {
    font-weight: $heading_lg_weight;
    font-family: $heading_font_family;
    font-size: calc($heading_lg_size * 3.4);
    @media (max-width: $screen-xs-max) {
        font-size: calc($heading_lg_size * 2.992);
    }
  }
}

h1, .h1-style {
  position: relative;
  z-index: 1;
  margin: 0 0 45px;
  padding: 0;
  color: $heading_color;
  font-weight: $heading_md_weight;
  font-size: $heading_md_size;
  font-family: $heading_font_family;
  line-height: 1.2em;
  @media (max-width: $screen-xs-max) {
    margin-bottom: 30px;
    font-size: calc($heading_md_size * 0.8);
  }

  & + .h-behind {
    font-weight: $heading_md_weight;
    font-family: $heading_font_family;
    font-size: calc($heading_md_size * 3.4);
  }
}

.m-h1-style {
  margin-bottom: 45px !important;
  @media (max-width: $screen-xs-max) {
    margin-bottom: 30px !important;
  }
}

h2, .h2-style {
  position: relative;
  z-index: 1;
  margin: 0 0 20px;
  padding: 0;
  color: $heading_color;
  font-weight: $heading_sm_weight;
  font-size: $heading_sm_size;
  font-family: $heading_font_family;
  line-height: 1.4em;
  @media (max-width: $screen-xs-max) {
    margin-bottom: 20px;
    font-size: calc($heading_sm_size * 0.9);
  }

  & + .h-behind {
    font-weight: $heading_sm_weight;
    font-family: $heading_font_family;
    font-size: calc($heading_sm_size * 3.4);
  }
}

.m-h2-style {
  margin-bottom: 20px !important;
}

h3, .h3-style {
  margin: 0 0 20px;
  padding: 0;
  color: $heading_color;
  font-weight: 600;
  font-size: 17px;
  font-family: $heading_font_family;
  line-height: 1.5em;

  &.h-lined {
    padding-bottom: 15px;
    margin-bottom: 30px;
  }
}

h4, .h4-style {
  margin: 0 0 20px;
  padding: 0;
  color: $heading_color;
  font-size: 17px;
  font-weight: 600;
  font-family: $heading_font_family;
  line-height: 28px;
}

h4:not(.h-icon), .h4-style:not(.h-icon) {
  [class*="icon-"] {
    padding-right: 10px;
    color: $custom_color;
    vertical-align: sub;
    font-size: 20px;
  }
}

h5, .h5-style {
  margin: 0 0 20px;
  padding: 0;
  color: $heading_color;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
}

h6, .h6-style {
  margin: 0 0 20px;
  padding: 0;
  color: $heading_color;
  font-size: 15px;
  line-height: 23px;
}

h1, h2, h3, h4, h5, h6, .h1-style, .h2-style, .h3-style, .h4-style, .h5-style, .h6-style {
  a {
    color: $heading_color;
    text-decoration: none;

    &:hover {
      color: $custom_color;
      text-decoration: none;
    }
  }

  &.h-lined {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-color: $heading_border_color;
  }
}

.h-behind {
  position: absolute;
  top: 0;
  left: -.05em;
  transform: translate3d(0, -40%, 0);
  z-index: 0;
  line-height: 1em;
  color: $heading_bg_color;
  white-space: nowrap;
}

.h-sub--first {
  order: -1;
}

.text-center > .h-behind {
  left: 50%;
  transform: translate3d(-50%, -40%, 0);
}

.page-title {
  & > *:only-child {
    margin-bottom: 0;
  }
}

.title-wrap:not(:last-child), .page-title {
  margin: 0 0 $title_bottom;

  &.text-center .carousel-arrows {
    margin-bottom: calc($title_bottom + 10px);
  }

  @include respond-to(md-only) {
    margin: 0 0 $title_bottom;
    &.text-center .carousel-arrows {
      margin-bottom: calc($title_bottom + 10px);
    }
  }
  @include respond-to(sm-only) {
    margin: 0 0 $title_bottom_mobile;
    &.text-center .carousel-arrows {
      margin-bottom: calc($title_bottom_mobile + 10px);
    }
  }
  @include respond-to(xs-only) {
    margin: 0 0 $title_bottom_mobile;
    &.text-center .carousel-arrows {
      margin-bottom: calc($title_bottom_mobile + 10px);
    }
  }
}

.title-wrap {
  display: flex;
  flex-direction: column;
  position: relative;
  margin-bottom: 30px;
  @include respond-to(sm-only) {
    margin-bottom: 25px;
  }
  @include respond-to(xs-only) {
    margin-bottom: 20px;
  }

  &.text-center .carousel-arrows {
    margin-top: -5px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 65px !important;
    width: 50px;
  }

  h1, .h1-style, h1 + .h-sub, .h1-style + .h-sub--first {
    & + .carousel-arrows:empty {
      margin-top: calc(-30px - $heading_md_sub_top);
      @include respond-to(sm-only) {
        margin-top: calc(-30px - $heading_md_sub_top * 0.666);
      }
      @include respond-to(xs-only) {
        margin-top: calc(-30px - $heading_md_sub_top * 0.666);
      }
    }
  }

  h2, .h2-style, h2 + .h-sub--first, .h2-style + .h-sub--first {
    & + .carousel-arrows:empty {
      margin-top: calc(-30px - $heading_sm_sub_top);
      @include respond-to(sm-only) {
        margin-top: calc(-30px - $heading_sm_sub_top * 0.666);
      }
      @include respond-to(xs-only) {
        margin-top: calc(-30px - $heading_sm_sub_top * 0.666);
      }
    }
  }

  .h-lg-style, .h-lg-style + .h-sub--first {
    & + .carousel-arrows:empty {
      margin-top: calc(-30px - $heading_lg_sub_top);
      @include respond-to(sm-only) {
        margin-top: calc(-30px - $heading_lg_sub_top * 0.666);
      }
      @include respond-to(xs-only) {
        margin-top: calc(-30px - $heading_lg_sub_top * 0.666);
      }
    }
  }
}

.title-wrap, .page-title {
  .h-sub {
    min-width: 100%;
    position: relative;
    z-index: 1;
  }

  .h-sub, .h-sub p {
    font-size: $heading_sub_size;
    line-height: 1.69em;
    font-weight: $heading_sub_weight;
    color: $heading_sub_color;
  }

  h1, .h1-style, h1 + .h-sub--first, .h1-style + .h-sub--first {
    margin-bottom: $heading_md_sub_top;
    @include respond-to(sm-only) {
      margin-bottom: calc($heading_md_sub_top * 0.666);
    }
    @include respond-to(xs-only) {
      margin-bottom: calc($heading_md_sub_top * 0.666);
    }
  }

  h2, .h2-style, h2 + .h-sub--first, .h2-style + .h-sub--first {
    margin-bottom: $heading_sm_sub_top;
    @include respond-to(sm-only) {
      margin-bottom: calc($heading_sm_sub_top * 0.666);
    }
    @include respond-to(xs-only) {
      margin-bottom: calc($heading_sm_sub_top * 0.666);
    }
  }

  .h-lg-style, .h-lg-style + .h-sub--first {
    margin-bottom: $heading_lg_sub_top;
    @include respond-to(sm-only) {
      margin-bottom: calc($heading_lg_sub_top * 0.9);
    }
    @include respond-to(xs-only) {
      margin-bottom: calc($heading_lg_sub_top * 0.6);
    }
  }

  h4.h-subtitle, .h-subtitle {
    &:not(:first-child) {
      margin-top: 10px;
    }

    font-size: 18px;
    color: $heading_sub_color;
    font-weight: 500;
  }

  p {
    font-size: 17px;
    line-height: 28px;
    @media (max-width: $screen-md-max) {
      font-size: 15px;
      line-height: 27px;
    }
    @media (max-width: $screen-xs-max) {
      font-size: 14px;
      line-height: 23px;
    }

    a {
      text-decoration: underline;
      color: inherit;

      &:hover {
        text-decoration: none;
      }
    }
  }

  .maxW-1370 {
    max-width: 1370px;
    margin-left: auto;
    margin-right: auto;
  }

  .maxW-825 {
    max-width: 825px;
    margin-left: auto;
    margin-right: auto;
  }

  &.text-left {
    .maxW-1370, .maxW-825 {
      margin-left: 0;
    }
  }

  &.text-right {
    .maxW-1370, .maxW-825 {
      margin-right: 0;
    }
  }
}

.title-wrap:not(.title-tabs-wrap) > {
  h1, .h1-style {
    &:last-child {
      margin: 0;
    }
  }

  h2, .h2-style {
    &:last-child {
      margin: 0;
    }
  }

  .h-lg-style {
    &:last-child {
      margin: 0;
    }
  }
}

.title-with-right {
  .carousel-arrows {
    height: 42px;
  }

  h1, h2.h1-style {
    margin-bottom: 30px;
    @media (max-width: $screen-xs-max) {
      margin-bottom: 5px;
    }
  }
}

@media (min-width: $screen-md-min) {
  .title-with-right {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  .title-with-right > *:last-child {
    margin-left: auto;
  }
}

@media (max-width: $screen-sm-max) {
  .title-with-right {
    text-align: center;
  }
}

.title-with-arrows {
  .carousel-arrows {
    min-height: 28px;
  }
}

.carousel-arrows:empty {
  display: none !important;
}

.title-with-arrows {
  display: flex;
  justify-content: flex-start;

  & > *, h2,
  h2.h1-style {
    margin-bottom: 0 !important;
  }

  & > *:last-child {
    margin-left: auto;
  }

  h2, .h2-style {
    padding-right: 45px;
  }
}

.title-with-arrows:not(.title-with-behind) {
  margin-bottom: 20px;
}

.title-with-arrows {
  position: relative;

  &.mb-h1-style {
    margin-bottom: 45px;
    @media (max-width: $screen-xs-max) {
      margin-bottom: 30px;
    }
  }

  &.mb-h2-style {
    margin-bottom: 20px;
  }

  &.mb-h3-style {
    margin-bottom: 20px;
  }
}

.aside-block {
  position: relative;
}

.aside-block .title-with-arrows {
  margin-bottom: 20px;

  h2,
  h2.h1-style {
    line-height: 1em;
    @media (max-width: $screen-md-max) {
      font-size: 16px;
    }
  }
}

.custom-color {
  color: $custom_color;
}

.bg-custom {
  background-color: $custom_color;
}

.h-font {
  font-family: $heading_font_family;
}

.fontsize-xs {
  font-size: 11px;
}

.under-title {
  font-size: 14px;
  line-height: 24px;

  & + * {
    margin-top: 15px;
  }
}

.holder--custom-color {
  h1, h2, h3, h4, h5, h6 {
    color: inherit;

    a, a:focus {
      color: inherit;
    }
  }
}

.text-center > img {
  display: inline-block;
}

.text-marker {
  display: inline-block;
  padding: 0 7px;
  color: $marker_text_color;
  background-color: $marker_text_bg;
}

.line-divider {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-color: $line_divider_color;
}

.line-divider--90 {
  height: 45px;
  margin-bottom: 45px;
  @media (max-width: $screen-sm-max) {
    height: 25px;
    margin-bottom: 25px;
  }
}

.line-divider--40 {
  height: 20px;
  margin-bottom: 20px;
}

.social-list {
  display: flex;
  list-style: none;
  margin: 0 -5px;
  padding: 0;

  li {
    font-size: 18px;
    line-height: 24px;

    a {
      display: flex;
      padding: 0 5px;
      text-decoration: none;
      color: $social_text_color;
      text-align: center;

      &:hover {
        color: $social_text_color_hover;
      }
    }
  }
}

.social-list-circle {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0 -6px;
  padding: 0;

  li {
    margin: 0 6px 10px;
    font-size: 24px;
    line-height: 1em;

    a {
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 68px;
      height: 68px;
      padding: 0;
      line-height: 38px;
      border-radius: 50%;
      background-color: $social-circle_bg;
      text-decoration: none;

      [class*='icon'] {
        z-index: 1;
        position: relative;
        color: $social-circle_text_color !important;
      }

      &:after {
        content: '';
        position: absolute;
        left: -30%;
        top: -30%;
        z-index: 0;
        width: 110%;
        height: 110%;
        border-radius: 50%;
        background-color: $social-circle_bg_hover;
        opacity: 0;
        @include transition(.25s ease);
      }

      &:hover {
        [class*='icon'] {
          color: $social-circle_text_color_hover !important;
        }

        &:after {
          left: -5%;
          top: -5%;
          opacity: 1;
        }
      }
    }
  }
}

body.mac {
  .social-list-circle {
    li {
      a {
        &:after {
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          transition: opacity .25s ease;
        }

        &:hover {
          &:after {
            left: 0;
            top: 0;
          }
        }
      }
    }
  }
}

.social-list-circle-sm {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0 -5px;
  padding: 0;
  @media (min-width: $screen-md-min) {
    max-width: 240px;
  }

  li {
    margin: 0 5px 10px;
    font-size: 18px;
    line-height: 1em;

    a {
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      padding: 0;
      line-height: 44px;
      border-radius: 50%;
      background-color: $social-circle_bg;
      text-decoration: none;

      [class*='icon'] {
        z-index: 1;
        position: relative;
        color: $social-circle_text_color !important;
      }

      &:after {
        content: '';
        position: absolute;
        left: -30%;
        top: -30%;
        z-index: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: $social-circle_bg_hover;
        opacity: 0;
        @include transition(.25s ease);
      }

      &:hover {
        [class*='icon'] {
          color: $social-circle_text_color_hover !important;
        }

        &:after {
          left: 0;
          top: 0;
          opacity: 1;
        }
      }
    }
  }
}

.list-icon-lg {
  list-style: none;
  margin: 0;
  padding: 0;

  li {
    font-size: 21px;
    line-height: 30px;
    font-weight: 500;
    position: relative;
    padding: 0 0 0 35px;

    &:not(:last-child) {
      margin-bottom: 8px;
    }

    [class*='icon'] {
      position: absolute;
      top: .15em;
      left: 0;
      font-size: 23px;
      color: $list-icon_color;
    }
  }
}

.list-icon, .dropdn-content ul.list-icon {
  list-style: none;
  margin: 0;
  padding: 0;

  li {
    position: relative;
    padding: 0 0 0 26px;
    font-size: 14px;
    line-height: 18px;

    &:not(:last-child) {
      margin-bottom: 8px;
    }

    a {
      padding-top: 0;
      padding-bottom: 0;
    }

    [class*='icon'] {
      position: absolute;
      top: 0;
      left: 0;
      font-size: 18px;
      color: $list-icon_color;
    }
  }
}

.list {
  li {
    position: relative;
    font-size: 14px;
    line-height: 20px;

    &:not(:first-child) {
      margin-top: 10px;
    }

    vertical-align: middle;
  }
}

.list-smaller {
  li {
    position: relative;
    font-weight: 400;
    &:not(:first-child) {
      margin-top: 2px;
    }
  }
}

.list-marker {
  padding: 0;
  margin: 0;

  &:not(:first-child) {
    margin-top: 20px;
  }

  li {
    list-style: none;
    padding-left: 24px;
    position: relative;
    font-size: 14px;
    line-height: 20px;

    &:not(:first-child) {
      margin-top: 10px;
    }

    @media (max-width: $screen-sm-max) {
      font-size: 13px;
      line-height: 20px;
      &:not(:first-child) {
        margin-top: 5px;
      }
    }
  }

  li:before {
    font-family: 'icon-foxic';
    content: '\e951';
    position: absolute;
    top: 0;
    left: 0;
    font-size: 14px;
    color: $list-marker_color;
    @media (max-width: $screen-sm-max) {
      font-size: 12px;
    }
  }
}

.post-text .list-marker {
  li {
    font-size: 15px;
    line-height: 20px;
    @media (max-width: $screen-sm-max) {
      font-size: 14px;
      line-height: 20px;
    }
  }
}

.text-right .list-marker {
  li {
    padding-left: 0;
    padding-right: 24px;
  }

  li:before {
    left: auto;
    right: 0;
  }
}

@media (max-width: $screen-sm-max) {
  .col-sm:not(:first-child) .list-marker {
    margin-top: 5px;
  }
}

ul.two-column {
  column-count: 2;
  column-gap: 20px;

  li {
    display: inline-flex;
    min-width: 100%;
  }
}

ul.three-column {
  column-count: 3;
  column-gap: 20px;
}

.table {
  color: $body_text_color;
}

.table-responsive {
  border-color: $table-border_color;
}

.table > thead > tr > th {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-color: $table-border_color;
  font-size: 13px;
  line-height: 16px;
  font-weight: 600;
  color: $table-title_color;
}

.table > thead > tr > th, .table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
  border-top: 1px solid $table-border_color;
  padding: 20px 15px;
  font-size: 15px;
  line-height: 22px;
}

.table > tbody > tr:first-child > td {
  border-top: 0;
}

.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
  border-width: 1px;
  border-style: solid;
  border-color: $table-border_color;
  font-weight: 400;
}

.table-striped > tbody > tr > td,
.table > thead > tr > th,
.table > tbody > tr > th {
  b, strong {
    color: $table-title_color
  }
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: $table-striped_bg;
}

.table-borderless {
  tr td,
  th td,
  tbody tr td,
  tbody tr th,
  thead tr th,
  thead tr td,
  tfoot tr th,
  tfoot tr td {
    border: 0;
  }
}

.table:not(:first-child),
.table-responsive:not(:first-child) {
  margin-top: 20px;
}

blockquote, .blockquote {
  position: relative;
  padding: 40px 100px 40px 40px;
  font-size: 23px;
  line-height: 35px;
  font-style: italic;
  font-weight: 500;
  color: $blockquote_text_color;
  background-color: $blockquote_bg;
  @media (max-width: $screen-md-max) {
    padding: 30px 70px 30px 30px;
    font-size: 18px;
    line-height: 26px;
  }
  @media (max-width: $screen-sm-max) {
    padding: 20px 60px 20px 20px;
    font-size: 16px;
    line-height: 22px;
  }

  &:not(:first-child) {
    margin-top: 30px;
    @media (max-width: $screen-sm-max) {
      margin-top: 20px;
    }
  }

  &:not(:last-child) {
    margin-bottom: 30px;
    @media (max-width: $screen-sm-max) {
      margin-bottom: 20px;
    }
  }

  &:after {
    position: absolute;
    z-index: 1;
    top: 50%;
    right: 50px;
    font-size: 40px;
    font-family: 'icon-foxic';
    content: '\e959';
    color: $custom_color;
    @include transform(translateY(-50%));
    @media (max-width: $screen-md-max) {
      right: 20px;
      font-size: 40px;
    }
  }
}

.blockquote-author {
  font-size: 18px;
  line-height: 1em;
  font-style: normal;
  font-weight: 600;

  &, a {
    color: $blockquote-author_text-color;
  }

  &:not(:first-child) {
    margin-top: 20px;
    @media (max-width: $screen-sm-max) {
      margin-top: 15px;
    }
  }
}

.pagination {
  margin: 30px -5px 0;
  padding: 0;

  & > li > a,
  & > li > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 33px;
    height: 33px;
    margin: 0 1px;
    padding: 0 3px;
    font-size: 18px;
    line-height: 24px;
    font-weight: 600;
    color: $pagination_text_color;
    @include transition(0.2s);

    &.pagination-arrow {
      padding: 0;
      font-size: 19px;
    }

    &:hover, &:focus {
      color: $pagination_text_hover_color;
      background-color: $pagination_text_hover_bg;
      text-decoration: none;
      border-radius: 4px;
    }
  }

  & > .active {
    & > a,
    & > span,
    & > a:hover,
    & > span:hover,
    & > a:focus,
    & > span:focus {
      color: $pagination_text_active_color;
      background-color: $pagination_text_active_bg;
      border-radius: 4px;
    }
  }
}

.pagination.pagination--style2 {
  li {
    position: relative;
    z-index: 1;
  }

  & > li > a,
  & > li > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 33px;
    height: 33px;
    padding: 0 3px;
    font-size: 18px;
    line-height: 24px;
    font-weight: 600;
    color: $pagination2_text_color;
    @include transition(0.2s);

    &.pagination-arrow {
      padding: 0;
      font-size: 19px;
    }

    &:hover, &:focus {
      color: $pagination2_text_hover_color;
      text-decoration: none;
      border-radius: 4px;
    }
  }

  & > .active {
    & > a,
    & > span,
    & > a:hover,
    & > span:hover,
    & > a:focus,
    & > span:focus {
      font-weight: 600;
      color: $pagination2_text_active_color;
      z-index: 0;
    }
  }

  .pagination-hover-overlay {
    background-color: $pagination2_text_active_bg;
    width: 33px;
    height: 33px;
    position: absolute;
    z-index: 0;
    top: calc(50% - 17px);
    transition: left 0.2s;
    left: 0;
    border-radius: 4px;
    pointer-events: none;
  }
}

.headings-demo {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-bottom: 12px;
    line-height: 1em;
  }
}

h3 + .pagination {
  margin-top: 0;
}

/*alerts*/
.alert {
  padding: 13px 15px;
  margin: 0;
  border: 0;
  border-radius: 0;
  color: $alert_text_color;
}

.alert:not(:first-child) {
  margin-top: 10px;
}

.alert-success {
  background-color: $alert-success_bg;
}

.alert-info {
  background-color: $alert-info_bg;
}

.alert-warning {
  background-color: $alert-warning_bg;
}

.alert-danger {
  background-color: $alert-danger_bg;
}

.text-center > .img-fluid,
.text-center > p > .img-fluid {
  display: inline-block;
}

.aside-block ul.list {
  margin: 0;
  padding: 0;

  li {
    display: block;
    margin: 0;
    overflow: hidden;

    &:not(:last-child) {
      margin-bottom: 16px;
    }

    &,
    a {
      font-size: 14px;
      line-height: 18px;
    }

    a {
      display: inline-block;
      color: $body_text_color;

      &:hover,
      &:focus {
        text-decoration: none;
        color: $custom_color;
      }
    }
  }
}

.bg-full {
  background-size: 100% auto;
  background-repeat: no-repeat;
}

.bg-cover {
  background-size: cover;
  background-repeat: no-repeat;
  background-position-y: center;
  background-position-x: center;
}

.bg-full-height {
  background-size: auto 100%;
  background-position: center center;
  background-repeat: no-repeat;
}

.bg-bottom {
  background-position-y: calc(100% + 1px);
  background-position-x: center;
  background-repeat: no-repeat;
}

.bg-bottom:not(.bg-cover) {
  background-size: 100% auto;
}

.bg-top {
  background-position-y: top;
  background-position-x: center;
  background-repeat: no-repeat;
  background-size: auto 100%;
}

.bg-top:not(.bg-cover) {
  background-size: 100% auto;
}

.bg-center {
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.bg-center-all {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.bg-fullheight {
  position: relative;
  background-size: 100% 100%;
}

@media (max-width: $screen-sm-max) {
  .bg-hide-sm {
    background: none !important;
  }
}

.page404-empty-svg {
  display: inline-block;
  margin-bottom: 25px;
  width: 285px;
  height: 285px;
  svg {
    width: 285px;
    height: 285px;
  }
}

.page404-text {
  color: $page404_text_color;
  text-align: center;
  max-width: 900px;

  [class*='icon'] {
    font-size: .65em;
    position: relative;
    top: -.1em;
  }

  .icon-shopping-bag {
    font-size: 1.1em;
  }
}

.page404-text .txt1 {
  font-size: 260px;
  line-height: 1em;
  font-weight: bold;
  font-family: $heading_font_family;
  @media (max-width: $screen-md-max) {
    font-size: 220px;
  }
  @media (max-width: $screen-sm-max) {
    font-size: 120px;
  }
}

.page404-text .txt2 {
  font-size: 44px;
  line-height: 1.25em;
  font-weight: 600;
  font-family: $heading_font_family;
  @media (max-width: $screen-md-max) {
    font-size: 36px;
  }
  @media (max-width: $screen-sm-max) {
    font-size: 28px;
  }
}

.page404-text .txt3 {
  font-size: 230px;
  line-height: 1em;
  font-weight: bold;
  font-family: $heading_font_family;
  @media (max-width: $screen-md-max) {
    font-size: 200px;
  }
  @media (max-width: $screen-sm-max) {
    font-size: 120px;
  }
}

.page404-text .txt4 {
  font-size: 28px;
  line-height: 1.25em;
  font-weight: 600;
  font-family: $heading_font_family;
  @media (max-width: $screen-sm-max) {
    font-size: 24px;
  }
}

.prd-grid, .prd-listview, .prd-horgrid {
  .page404-bg {
    width: 100%;
    padding: 50px 0;
  }

  .page404-text {
    max-width: 700px;
    margin: 0 auto;
  }

  .page404-text .txt2 {
    font-size: 34px;
  }
}

.prd-grid, .prd-horgrid {
  .page404-bg {
    margin-top: 30px;
  }
}

.page404-bg {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  & > svg {
    position: absolute;
    z-index: -1;
    height: 500px;
    width: 500px;
    overflow: visible;
    @media (max-width: $screen-sm-max) {
      width: 400px;
      height: 400px;
    }
    @media (max-width: $screen-xs-max) {
      width: 300px;
      height: 300px;
    }
  }

  & > svg path {
    transform: scale(2.6);
    fill: $minicart-drop-empty_svg_color;
  }

  .page404-text {
    position: absolute;
  }
}

.page404-info {
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
}

.load-animate:not(.animated) {
  opacity: 0;
}

.thumbnail {
  background-color: transparent;
}

.btn-toolbar {
  margin-bottom: -5px;
}

.btn-toolbar > .btn {
  margin-bottom: 5px;
}

.text-left-not-xs, .text-left-not-sm, .text-left-not-md, .text-left-not-lg {
  text-align: left;
}

.text-center-not-xs, .text-center-not-sm, .text-center-not-md, .text-center-not-lg {
  text-align: center;
}

.text-right-not-xs, .text-right-not-sm, .text-right-not-md, .text-right-not-lg {
  text-align: right;
}

.text-justify-not-xs, .text-justify-not-sm, .text-justify-not-md, .text-justify-not-lg {
  text-align: justify;
}

@media (max-width: $screen-xs-max) {
  .text-left-not-xs, .text-center-not-xs, .text-right-not-xs, .text-justify-not-xs {
    text-align: inherit;
  }
  .text-left-xs {
    text-align: left;
  }
  .text-center-xs {
    text-align: center;
  }
  .text-right-xs {
    text-align: right;
  }
  .text-justify-xs {
    text-align: justify;
  }
}

@media (max-width: $screen-sm-max) {
  .text-left-not-sm, .text-center-not-sm, .text-right-not-sm, .text-justify-not-sm {
    text-align: inherit;
  }
  .text-left-sm {
    text-align: left;
  }
  .text-center-sm {
    text-align: center;
  }
  .text-right-sm {
    text-align: right;
  }
  .text-justify-sm {
    text-align: justify;
  }
}

@media (max-width: $screen-md-max) {
  .text-left-not-md, .text-center-not-md, .text-right-not-md, .text-justify-not-md {
    text-align: inherit;
  }
  .text-left-md {
    text-align: left;
  }
  .text-center-md {
    text-align: center;
  }
  .text-right-md {
    text-align: right;
  }
  .text-justify-md {
    text-align: justify;
  }
}

.row--relative {
  position: relative;
}

.no-uppercase {
  text-transform: none !important;
}

.col-divider {
  width: 1px;
  max-width: 1px;
  height: calc(100% - 115px);
  position: absolute;
  left: 50%;
  bottom: 0;
  background-color: $decor_border_color;
  @media (max-width: $screen-sm-max) {
    display: none;
  }
}

.card {
  background-color: $card_bg;
  border-color: $decor_border_color;
  border-radius: 0;
}

.card.card--grey {
  background-color: $card-light_bg;
}

.link-icn {
  text-decoration: none;

  [class*='icon'] {
    padding-right: 5px;
  }

  &:hover {
    text-decoration: none;
  }
}

.table-order-history {
  td {
    vertical-align: middle;

    &:last-child {
      text-align: right;
    }
  }

  & > tbody > tr > td, & > tr > td {
    padding: 8px 15px;
  }
}

.vert-wrap {
  display: table;
  height: 100%;
  width: 100%;
  position: relative;
  z-index: 1;
}

.vert {
  display: table-cell;
  vertical-align: middle;
}

img.lazyload {
  opacity: 0;
}

img[data-src] {
  @include transition(opacity .5s);
}

img.lazyloading {
  opacity: 1;
}

img.lazyloaded {
  opacity: 1;
}

.more-link-wrapper {
  margin-top: 30px;
  @media (max-width: $screen-md-max) {
    margin-top: 30px;
  }
  @media (max-width: $screen-sm-max) {
    margin-top: 20px;
  }
  @media (max-width: $screen-xs-max) {
    margin-top: 20px;
  }
}

.aside .more-link-wrapper {
  margin-top: 44px;
  @media (max-width: $screen-md-max) {
    margin-top: 20px;
  }
  @media (max-width: $screen-sm-max) {
    margin-top: 20px;
  }
}

.page-title-bg {
  max-width: 1300px;
  margin-left: auto;
  margin-right: auto;
  font-size: 15px;
  line-height: 1.8em;
  @media (max-width: $screen-sm-max) {
    font-size: 14px;
  }
  p:not(:first-child) {
    margin-top: 30px;
    @media (max-width: $screen-lg-max) {
      margin-top: 20px;
    }
    @media (max-width: $screen-sm-max) {
      margin-top: 15px;
    }
  }

  h1 {
    font-size: 60px;
    line-height: 1em;
    font-weight: 800;
    margin-bottom: 50px;
    @media (max-width: $screen-xl-max) {
      font-size: 50px;
      margin-bottom: 40px;
    }
    @media (max-width: $screen-lg-max) {
      font-size: 40px;
      margin-bottom: 30px;
    }
    @media (max-width: $screen-sm-max) {
      font-size: 30px;
      margin-bottom: 20px;
    }
  }
  blockquote, .blockquote {
    position: relative;
    font-size: 13px;
    line-height: 22px;
    font-style: italic;
    padding: 20px 25px;
    background-color: #fff;
    color: #757575;
    &:after {
      font-family: 'icon-foxic';
      font-size: 20px;
      position: absolute;
      z-index: 1;
      top: -4px;
      right: 8px;
      color: #282828;
    }
  }
  .blockquote-author {
    font-size: 14px;
    font-weight: 700;
    font-style: normal;
    line-height: 1.69em;
    color: #282828;
    text-align: right;
  }
}

a.image-hover-scale {
  display: flex;
  transition: 0s;
}

.image-hover-scale {
  display: block;
  position: relative;
  overflow: hidden;
  z-index: 1;
  -webkit-backface-visibility: hidden;

  & > * {
    -webkit-backface-visibility: hidden;
  }

  & > a {
    display: flex;
    overflow: hidden;
  }

  & > .bnr-img, & > img, & > .placeholder-svg svg,
  .collection-grid-3-item-img > img {
    transition: transform 0.75s ease 0s, opacity 0.3s !important;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    image-rendering: optimizeQuality;
    vertical-align: middle;
    max-width: 100%;
  }

  &:hover > .bnr-img, &:hover > img, &:hover > .placeholder-svg svg,
  &:hover .collection-grid-3-item-img > img {
    transform: scale3d(1.075, 1.075, 1);
    transition: transform 0.5s ease 0.05s, opacity 0.3s !important;
  }

  [class*='bnr-text'] {
    @include transition(.2s);
  }
}

.image-hover-scale--slow {
  & > .bnr-img, & > img, & > .placeholder-svg svg,
  .collection-grid-3-item-img > img {
    transition: opacity .3s, transform .5s cubic-bezier(.25, .46, .45, .94) !important;
  }

  &:hover > .bnr-img, &:hover > img, &:hover > .placeholder-svg svg,
  &:hover .collection-grid-3-item-img > img {
    transition: opacity .3s, transform 1.5s cubic-bezier(.25, .46, .45, .94) !important;
  }
}

.image-hover-dark-circle {
  display: block;
  position: relative;
  overflow: hidden;
  z-index: 1;
  backface-visibility: hidden;
  transition: background-color 0.3s ease 0s !important;

  > a {
    position: relative;
    display: flex;
    overflow: hidden;
  }

  & > .bnr-img, & > a, & > .placeholder-svg svg {
    backface-visibility: hidden;
    image-rendering: optimizeQuality;
    vertical-align: middle;
    max-width: 100%;
  }

  & > .bnr-img:after, & > a:after, & > .placeholder-svg svg:after {
    content: '';
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 0;
    width: 100%;
    height: 0;
    padding-top: 100%;
    background-color: #000;
    border-radius: 50%;
    transform: translate(-50%, -100%) scale(0);
    opacity: 0;
    pointer-events: none;
    transition: .5s linear;
  }

  &:hover > .bnr-img:after, &:hover > a:after, &:hover > .placeholder-svg svg:after {
    opacity: 0.1;
    transform: translate(-50%, -100%) scale(4.5);
    transition: .75s linear;
  }
}

.bnr-sticky .image-hover-dark-circle {
  & > .bnr-img:after, & > a:after {
    transition: .4s linear;
  }

  &:hover > .bnr-img:after, &:hover > a:after {
    transform: translate(-50%, -100%) scale(5);
    transition: .7s linear;
  }
}

.image-hover-dark {
  display: block;
  position: relative;
  overflow: hidden;
  z-index: 1;
  backface-visibility: hidden;
  transition: background-color 0.3s ease 0s !important;

  > a {
    display: flex;
    overflow: hidden;
  }

  & > .bnr-img, & > img, & > .placeholder-svg svg {
    backface-visibility: hidden;
    image-rendering: optimizeQuality;
    vertical-align: middle;
    max-width: 100%;
    transition: opacity 0.3s ease 0s !important;
  }

  &:hover {
    background-color: #000;
  }

  &:hover > .bnr-img, &:hover > img, &:hover > .placeholder-sv svg {
    opacity: 0.7;
  }
}

.image-hover-dark-scale {
  display: block;
  position: relative;
  overflow: hidden;
  z-index: 1;
  backface-visibility: hidden;
  transition: background-color 0.5s ease-in-out 0s !important;

  > a {
    display: flex;
    overflow: hidden;
  }

  & > .bnr-img, & > img, & > .placeholder-svg svg {
    backface-visibility: hidden;
    image-rendering: optimizeQuality;
    vertical-align: middle;
    max-width: 100%;
    transform: scale(1.01) rotate(0.0001deg);
    transition: transform 0.5s ease-in-out 0s, opacity 0.5s ease-in-out 0s !important;
  }

  &:hover {
    background-color: #000;
  }

  &:hover > .bnr-img, &:hover > img, &:hover > .placeholder-svg svg {
    opacity: 0.7;
    transform: scale(1.15) rotate(0.0001deg);
  }
}

.circle_decor_wrap {
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;

  & + * {
    position: relative;
    z-index: 3;
  }
}

.circle_decor {
  z-index: 1;
  width: 42%;
  position: absolute;
  top: 17%;
  left: -8%;
  opacity: 0.75;
  mix-blend-mode: darken;
  fill: $custom_color;

  path, circle {
    fill: inherit;
  }

  &.circle_decor--tr {
    top: 0;
    right: 0;
    left: auto;
    transform: translate(71%, -71%) rotate(45deg);
  }

  &.circle_decor--bl {
    bottom: 0;
    top: auto;
    left: 0;
    right: auto;
    transform: translate(-71%, 71%) rotate(45deg);
  }

  &.circle_decor--tl {
    top: 0;
    left: 0;
    right: auto;
    transform: translate(-71%, -71%) rotate(-45deg);
  }

  &.circle_decor--br {
    bottom: 0;
    top: auto;
    right: 0;
    left: auto;
    transform: translate(71%, 71%) rotate(-45deg);
  }
}

img[data-sizes="auto"] {
  display: block;
  width: 100%;
}

.underline {
  text-decoration: underline;
  cursor: pointer;

  &:hover {
    text-decoration: none;
  }
}

.mb-n-10 {
  margin-bottom: -10px;
}

.min-w-160 {
  min-width: 160px;
}

.video-wrap-content {
  position: relative;

  video {
    width: 100%;
  }

  .video-control {
    position: absolute;
    right: 15px;
    bottom: 15px;
  }
}

.off-pointer {
  cursor: default;
}

.lookbook-bnr-title1 {
  font-size: 57px;
  line-height: 1em;
  font-weight: bold;
  font-family: $heading_font_family;
  @media (max-width: $screen-md-max) {
    font-size: 48px;
  }
  @media (max-width: $screen-xs-max) {
    font-size: 36px;
  }
  @media (max-width: $screen-xs-max) {
    font-size: 32px;
  }
}

.lookbook-bnr-title2 {
  font-size: 96px;
  line-height: 1em;
  font-weight: bold;
  font-family: $heading_font_family;
  color: #00cbf2;
  @media (max-width: $screen-md-max) {
    font-size: 80px;
  }
  @media (max-width: $screen-xs-max) {
    font-size: 64px;
  }
  @media (max-width: $screen-xs-max) {
    font-size: 48px;
  }
}

.lookbook-bnr {
  position: relative;

  .bs-popup-right, .bs-popup-auto[x-placement^="right"] {
    margin-left: 10px;
  }
}

.lookbook-bnr-text {
  position: absolute;
  z-index: 1;
}

.lookbook-popup {
  display: none;
}

.lookbook-bnr-image img {
  max-width: 100%;
}

.lookbook-bnr .popup {
  z-index: 1060;
  padding: 5px;
  width: 283px;
  max-width: 50%;
  background-color: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: 0 0 10px rgba(0, 0, 0, .15);
  z-index: 1030;

  .popup-body {
    padding: 0;
    color: inherit;
  }
}

.lookbook-popup-btn {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-size: 14px;
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(0, 0, 0, .15);
  transition: .2s;
  cursor: pointer;
  background-color: #fff;
  color: #282828;

  &:hover {
    background-color: $custom_color;
    box-shadow: 0 0 0 5px rgba(0, 0, 0, .15);
    color: #fff;
  }

  [class*='icon'] {
    transform: rotate(45deg);
    transition: transform .2s;
  }

  &.active {
    background-color: $custom_color;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, .5);
    color: #fff;
  }

  &.active [class*='icon'] {
    transform: rotate(0deg);
  }
}

.lookbook-popup-btn-lg {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-size: 20px;
  border-radius: 50%;
  box-shadow: 0 0 0 8px rgba(255, 255, 255, .35);
  transition: .2s;
  cursor: pointer;
  background-color: $custom_color;
  color: #fff;

  &:after {
    position: absolute;
    top: -8px;
    left: -8px;
    width: calc(100% + 16px);
    height: calc(100% + 16px);
    content: '';
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, .05);
  }

  &:hover {
    background-color: #fff;
    color: $custom_color;

    &:after {
      box-shadow: 0 0 15px rgba(0, 0, 0, .05);
    }
  }

  [class*='icon'] {
    transform: rotate(45deg);
    transition: transform .2s;
  }

  &.active {
    background-color: $custom_color;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, .5);
    color: #fff;
  }

  &.active [class*='icon'] {
    transform: rotate(0deg);
  }
}

.lookbook-bnr-point {
  position: absolute;
}

.popover {
  max-width: 220px;
  padding: 0;
  box-shadow: 0 0 5px rgba(0, 0, 0, .15);
  border: 0;
  z-index: 150;
  background-color: $body_bg;
  color: $body_text_color;
  @media (max-width: $screen-xs-max) {
    max-width: 180px;
  }

  .btn {
    font-size: 12px;
    font-weight: 500;
    line-height: 14px;
    padding: 12px 15px;
    width: 100%;
  }
}

.popover-body {
  padding: 12px;
  @media (max-width: $screen-xs-max) {
    padding: 10px;
  }
}

.section-name-products-grid.disable-actions .title-wrap {
  pointer-events: none;
}

.prd-grid.disable-actions {
  pointer-events: none;
}

.section-name-products-grid .title-wrap {
  .title-tabs h2.h-title-tabs-icn {
    max-width: 180px;
    min-width: 120px;
    @media (max-width: $screen-lg-max) {
      max-width: 160px;
    }
    @media (max-width: $screen-sm-max) {
      max-width: 140px;
    }
  }
  .title-tabs h2 {
    display: inline-block;
  }
  .title-tabs .h3-style {
    margin: 0 20px;
    font-size: 20px;
    font-weight: 500;
    @media (max-width: $screen-sm-max) {
      margin: 0 15px;
      font-size: 17px;
    }
  }

  .title-tabs h2 a {
    display: block;
    overflow: hidden;
    .title-tabs-bg {
      position: absolute;
      z-index: -1;
      left: 0;
      right: 0;
      top: 0;
      width: 100%;
      height: 100%;
      transition: .1s;
      opacity: 0;
      -webkit-mask-size: contain;
      mask-size: contain;
      background-color: $custom_color;
    }
    .title-tabs-text,
    .title-tabs-icn {
      display: block;
      text-align: center;
    }

    .title-tabs-text {
      position: relative;
      min-height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .title-tabs-icn {
      margin-bottom: 25px;
      transition: .2s;
      color: $heading_filter_icon_color;

      [class*='icon'] {
        font-size: 80px;
        @media (max-width: $screen-lg-max) {
          font-size: 65px;
        }
        @media (max-width: $screen-sm-max) {
          font-size: 50px;
        }
      }
    }

    .title-tabs-icn svg {
      width: 80px;
      height: 80px;
      @media (max-width: $screen-lg-max) {
        width: 65px;
        height: 65px;
      }
      @media (max-width: $screen-sm-max) {
        width: 50px;
        height: 50px;
      }

      path {
        fill: currentcolor;
      }
    }

    .title-tabs-text {
      color: $heading_filter_color;
    }

    &:hover {
      color: $heading_filter_icon_color;

      .title-tabs-text {
        .title-tabs-bg {
          opacity: 1;
        }

        color: $heading_filter_active_color;
        text-decoration: none;
      }
    }
  }

  h2.active a .title-tabs-icn, h2 a:hover .title-tabs-icn {
    color: $heading_filter_bg_color;
  }

  h2.active a .title-tabs-text, h2 a:hover .title-tabs-text {
    color: $heading_filter_active_color;

    .title-tabs-bg {
      opacity: 1;
    }
  }
}

.title-tabs-wrap {
  h2 {
    display: inline-block;
    margin-left: 15px;
    margin-right: 15px;
    @media (max-width: $screen-xs-max) {
      margin-left: 10px;
      margin-right: 10px;
    }
  }
  h2.h1-style {
    margin-bottom: 0;
    @media (max-width: $screen-xs-max) {
      margin-bottom: 5px;
    }
  }
  margin: auto;
  -webkit-overflow-scrolling: touch;
  .title-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0;
    padding: 0;
    list-style-type: none;
  }

  .title-tabs > * {
    flex-grow: 0 !important;
  }
  &:not(.ps--active-x) .title-tabs {
    justify-content: center;
  }

  .title-tabs .h-title-tabs-icn {
    flex-grow: 1;
    flex-shrink: 0;
  }
  &.ps--active-x .title-tabs {
    padding-bottom: 20px;
  }
  .ps > .ps__scrollbar-x-rail:hover > .ps__scrollbar-x, .ps > .ps__scrollbar-x-rail:active > .ps__scrollbar-x {
    height: 6px;
  }
  .ps > .ps__scrollbar-x-rail {
    height: 10px;
  }
}

.title-tabs.text-center > .h-behind {
  transform: translate3d(-50%, -.28em, 0);
}

.title-wrap.title-with-behind .title-tabs-wrap {
  overflow: visible !important;
}

.title-tabs-wrap {
  .ps__scrollbar-y-rail {
    display: none !important;
  }

  .title-tabs-h {
    display: flex;
    flex-wrap: nowrap !important;

  }
  &.ps--active-x .title-tabs {
    justify-content: inherit;
  }
}

body:not(.touch) .title-tabs-wrap .ps__scrollbar-x-rail {
  display: block !important;
}

[data-grid-tab-tags] {
  display: none
}

.active[data-grid-tab-tags] {
  display: block
}

.section-name-products-grid .h-sub a {
  color: $heading_filter_color;
  margin-left: 17px;
  margin-right: 17px;
  white-space: nowrap;
}

.section-name-products-grid .h-sub a.active {
  color: $heading_filter_color;
  text-decoration: underline;
}

.grayscale {
  filter: grayscale(1);
  opacity: .5 !important;
}

.right-carousel, .left-carousel {
  position: relative;
  z-index: 1;

  .title-wrap {
    margin-top: 30px;
  }

  .slick-dots {
    margin: 15px 0 0;
    bottom: 0;
    position: relative;
  }

  @media (max-width: $screen-xs-max) {
    order: 1;
  }
}

.right-carousel-image {
  position: relative;
  z-index: 0;
  display: flex;
  justify-content: flex-end;

  img {
    max-width: 75vw;
    object-fit: contain;
  }

  @media (max-width: $screen-xs-max) {
    order: 0;
    text-align: center;
    margin-bottom: 30px;
    img {
      max-width: 100%;
    }
  }
}

.left-carousel-image {
  position: relative;
  z-index: 0;
  display: flex;
  justify-content: flex-start;

  img {
    max-width: 75vw;
    object-fit: contain;
  }

  @media (max-width: $screen-xs-max) {
    order: 0;
    text-align: center;
    margin-bottom: 30px;
    img {
      max-width: 100%;
    }
  }
}

.h-lined-active {
  position: relative;

  &:after {
    content: '';
    position: absolute;
    display: block;
    bottom: -.5em;
    left: 50%;
    width: 0;
    height: 3px;
    background-color: $heading_filter_color;
    transition: .2s;
    transform: translateX(-50%);
    @media (max-width: $screen-sm-max) {
      bottom: -.2em;
    }
  }

  &.active, &:hover {
    &:after {
      width: 75%;
      background-color: $heading_filter_active_color;
    }
  }
}

.feature-list {
  margin: 0;
  padding: 0;
  list-style: none;

  li {
    position: relative;
    margin-left: 34px;
    padding: 15px 0;
    font-size: 16px;
    line-height: 1.5em;
    border-bottom: 1px solid #e6e6e9;
    @media (max-width: $screen-xs-max) {
      padding: 10px 0;
      font-size: 14px;
    }
  }

  li:before {
    font-family: 'icon-foxic';
    content: '\e9bb';
    position: absolute;
    top: 14px;
    left: -34px;
    font-size: 20px;
    color: $custom_color;
    @media (max-width: $screen-xs-max) {
      top: 9px;
      font-size: 16px;
    }
  }
}

.card {
  background-color: $card_bg;
  border-color: $decor_border_color;
  border-radius: 0;
}

.card.card--grey {
  background-color: $card-light_bg;
}

.list-group {
  border-color: $decor_border_color;
  border-radius: 0;
  padding: 0;
}

.list-group-item {
  padding: 8px 15px;
  color: $list-group_color;
  background-color: $list-group_bg;
  border-color: $list-group_border_color;
  border-radius: 0 !important;
  &:hover {
    color: $list-group-hover_color;
    background-color: $list-group-hover_bg;
    text-decoration: none;
  }
  &.active {
    color: $list-group-active_color;
    background-color: $list-group-active_bg;
    border-color: $list-group-active_bg;
  }
}

.link-icn {
  text-decoration: none;
  [class*='icon'] {
    padding-right: 5px;
  }
  &:hover {
    text-decoration: none;
  }
}

.table-order-history {
  td {
    vertical-align: middle;
    &:last-child {
      text-align: right;
    }
  }
  & > tbody > tr > td, & > tr > td {
    padding: 8px 15px;
  }
}

.h-line-divider {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  width: 232px;
  max-width: 100%;
  &.text-center {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  &.text-left {
    margin-left: 0 !important;
    margin-right: auto !important;
  }
  &.text-right {
    margin-left: auto !important;
    margin-right: 0 !important;
  }
  span {
    width: 100%;
    height: 1px;
    background-color: $heading_decor_color;
  }
  [class*='icon'] {
    font-size: 34px;
    margin-left: 10px;
    margin-right: 10px;
  }
  svg {
    min-width: 34px;
    height: 34px;
    flex: 34px;
    margin-left: 10px;
    margin-right: 10px;
    path {
      fill: $heading_decor_icon_color;
    }
  }
}