.hero-area {
  overflow: hidden
}

@media all and (max-width: 767px) {

.hero-area.min-h-screen {
      /*min-height:calc(100vh - 124px);*/

      /*height:calc(100vh - 124px);*/

      min-height: 435px;

      height: 435px;

      margin-top: 0
  }
    }

@media all and (max-width: 767px) {

.hero-area .wrap.min-h-screen {
        /*min-height:calc(100vh - 124px);*/

        min-height: 435px
    }
      }

@media all and (max-width: 767px) {

.hero-area .holder.min-h-screen {
        min-height: 435px
    }
      }

.hero-area .scroll-link {
    font-size: 1.125rem;
    display: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 2rem;
    z-index: 40
  }

.hero-area .scroll-link span {
      opacity: 0;
      animation: fadeInUp 0.5s ease both;
      animation-delay: 2.5s;
    }

@media (min-width: 768px) {

.hero-area .scroll-link {
      display: block
  }
    }

.hero-area.hero-bg-area .wrap:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: linear-gradient(
          to bottom,
          rgba(64, 64, 64, 0.64) 0%,
          rgba(64, 64, 64, 0.2) 25%,
          rgba(64, 64, 64, 0.2) 70%,
          rgba(64, 64, 64, 0.64) 100%
        );
        z-index: 30;
      }

.hero-area.hero-bg-area .holder {
      position: absolute;
      width: 100%;
      left: 0;
      top: 0;
      padding: 0;
      z-index: 40;
      background: rgba(0, 0, 0, 0.15)
    }

@media (min-width: 1024px) {

.hero-area.hero-bg-area .holder {
        padding: 20px 45px
    }
      }

@media (min-width: 1024px) {

.hero-area.hero-bg-area .holder {
        padding: 40px 65px
    }
      }

.hero-area.hero-bg-area .holder .headline {
        --text-opacity: 1;
        color: #fff;
        color: rgba(255, 255, 255, var(--text-opacity));
        opacity: 0;
        animation: fadeInUp 0.5s ease both;
        animation-delay: 2.3s;
        line-height: 1.2;
        letter-spacing: 1px;
        padding: 0.75rem 0;
        font-weight: 300;
        text-transform: uppercase
      }

@media (min-width: 1024px) {

.hero-area.hero-bg-area .holder .headline {
          line-height: 1;

          font-size: 3.75rem
      }
        }

@media (min-width: 1440px) {

.hero-area.hero-bg-area .holder .headline {
          font-size: 4rem
      }
        }

.hero-area.hero-bg-area .holder .content {
        width: 100%;
        padding: 1.25rem;
        top: 80%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-shadow: 0 0 11px rgba(0, 0, 0, 0.5)
      }

.hero-area.hero-bg-area .holder .content span {
          letter-spacing: 1.6px;
          animation: fadeInUp 0.5s ease both;
          animation-delay: 1.5s;
        }

.hero-area.hero-bg-area .holder .content li {
          letter-spacing: 0.8px;
          opacity: 0;
          animation: fadeInUp 0.5s ease both;
          animation-delay: 2.5s;
        }

@media (min-width: 640px) {

.hero-area.hero-bg-area .holder .content {
          padding: 2rem
      }
        }

@media (min-width: 768px) {

.hero-area.hero-bg-area .holder .content {
          padding: 1.25rem
      }
        }

.hero-area.hero-bg-area .holder a .badge-img {
        display: none;
        z-index: 40;
        opacity: 0;
        animation: fadeInUp 0.5s ease both;
        animation-delay: 3s;
        max-width: 262px;
        height: 52px
      }

@media (min-width: 768px) {

.hero-area.hero-bg-area .holder a .badge-img {
          display: block;

          right: 45px;

          bottom: 35px
      }
        }

@media (min-width: 1440px) {

.hero-area.hero-bg-area .holder a .badge-img {
          display: block;

          right: 65px;

          bottom: 55px;

          padding-left: 1.25rem
      }
        }

@media all and (max-width: 767px) {

.hero-area.hero-bg-area .holder.min-h-screen {
          /*min-height:calc(100vh - 124px);*/

          min-height: 435px
      }
        }

@media all and (max-width: 767px) and (max-height: 440px) {

.hero-area.hero-bg-area .holder.min-h-screen {
          min-height: 100vh
      }
        }

.hero-area.hero-slider-area .swiper-slide:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: linear-gradient(
          to bottom,
          rgba(35, 35, 35, 0.35) 0%,
          rgba(35, 35, 35, 0.2) 25%,
          rgba(35, 35, 35, 0.2) 70%,
          rgba(35, 35, 35, 0.35) 100%
        );
        z-index: 10;
      }

.hero-area.hero-slider-area .swiper-slide img {
        animation: fadeInAndScale 2s ease both;
        /* animation-delay:1.5s; */
      }

.hero-area.hero-slider-area .swiper-pagination {
      display: none;
      animation: fadeInUp 0.5s ease both;
      animation-delay: 3s;
    }

.hero-area.hero-slider-area .slide-content {
      animation: fadeInUp 0.5s ease both;
      animation-delay: 2.3s;
    }

.hero-area .bg-image-wrap {
    position: relative;
    z-index: 10;
    background-color: #fff;
    animation: none
  }

@media (min-width: 768px) {

.hero-area .bg-image-wrap {
      animation: fadeInAndScale 2s ease both

      /* animation-delay:1.5s; */
  }
    }

@media all and (max-width: 767px) {

.hero-area .bg-image-wrap {
      background-size: auto 435px
  }
    }

.hero-area .bg-image-wrap.gallery {
    animation: none;
  }

.hero-area .presented-logo-block img {
      opacity: 0;
      animation: fadeInUp 0.5s ease both;
      animation-delay: 2.5s;
      max-height: 300px;
    }

.hero-area .presented-logo-block span {
      opacity: 0;
      animation: fadeInUp 0.5s ease both;
      animation-delay: 2.5s;
    }

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeInAndScale {
  0% {
    opacity: 0;
    transform: scale(1.2);
  }

  50% {
    opacity: 1;
  }

  100% {
    transform: scale(1);
  }
}

@keyframes slideInAndScale {
  0% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

.top-badges {
  top: auto;
  bottom: 25px;
  left: 1.25rem
}

.top-badges .status-badge {
    float: left;
    color: #fff;
    background-color: #9e3f4b;
    opacity: 0.9;
    margin: 0 4px 5px 4px;
    padding: 0.75rem 1.4rem;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    text-transform: uppercase
  }

.top-badges .status-badge.type-openhouse {
      background-color: rgba(22,64,105,0.90196);
    }

.top-badges .status-badge.type-3dtour {
      background: url('/images/vr-white.svg') 14px 50% no-repeat #7c775c;
      background-size: 24px 24px;
      padding-left: 47px;
    }

.top-badges .status-badge.type-video {
      background: url('/images/video_icon.svg') 14px 50% no-repeat #7c775c;
      background-size: 24px 24px;
      padding-left: 47px;
    }

.top-badges .status-badge.status-sold {
      background-color: rgba(159,130,50,0.90196);
    }

@media (min-width: 640px) {

.top-badges {
    top: auto;

    bottom: 25px
}
  }

@media (min-width: 768px) {

.top-badges {
    top: auto;

    bottom: 25px
}
  }

@media (min-width: 1024px) {

.top-badges {
    top: 150px;

    bottom: auto
}
  }

/*site specific styles*/

.site-hh .top-badges .status-badge {
      background-color: #585957;
      opacity: 0.7
    }

.site-hh .top-badges .status-badge.type-openhouse {
        background-color: #585957;
      }

.site-hh .top-badges .status-badge.type-3dtour {
        background: url('/images/vr-white.svg') 14px 50% no-repeat #585957;
        background-size: 24px 24px;
        padding-left: 47px;
      }

.site-hh .top-badges .status-badge.type-video {
        background: url('/images/video_icon.svg') 14px 50% no-repeat #585957;
        background-size: 24px 24px;
        padding-left: 47px;
      }

.site-hh .top-badges .status-badge.status-sold {
        background-color: #585957;
      }

.site-sgp .top-badges .status-badge {
      background-color: #003a69
    }

.site-sgp .top-badges .status-badge.type-openhouse {
        background-color: #3782a5;
      }

.site-sgp .top-badges .status-badge.type-3dtour {
        background: url('/images/vr-white.svg') 14px 50% no-repeat #3782a5;
        background-size: 24px 24px;
        padding-left: 47px;
      }

.site-sgp .top-badges .status-badge.type-video {
        background: url('/images/video_icon.svg') 14px 50% no-repeat #3782a5;
        background-size: 24px 24px;
        padding-left: 47px;
      }

.site-sgp .top-badges .status-badge.status-sold {
        background-color: #3782a5;
      }

.site-islandia .top-badges .status-badge {
      float: left;
      color: #fff;
      font-weight: 300;
      background-color: #003a69;
      font-size: 1.1rem;
      letter-spacing: 1px
    }

.site-islandia .top-badges .status-badge.type-openhouse {
        background-color: #003a69;
      }

.site-islandia .top-badges .status-badge.type-3dtour {
        background: url('/images/vr-white.svg') 14px 50% no-repeat #003a69;
        background-size: 24px 24px;
        padding-left: 47px;
      }

.site-islandia .top-badges .status-badge.type-video {
        background: url('/images/video_icon.svg') 14px 50% no-repeat #003a69;
        background-size: 24px 24px;
        padding-left: 47px;
      }

.site-islandia .top-badges .status-badge.status-sold {
        background-color: #003a69;
      }

@media all and (max-width: 767px) {

.hero-slider-section .swiper-container {
      /*height:calc(100vh - 124px)!important;*/

      height: 435px !important
  }
    }

@media all and (max-width: 767px) {
    .hero-slider-section .swiper-button-prev,
    .hero-slider-section .swiper-button-next {
      padding-top: 40px;
    }
  }

@media all and (max-width: 767px) {

.hero-slider-section .slide-content .content-inner {
        bottom: 1.25rem !important
    }
      }

@media (min-width: 1280px) {

.hero-slider-section .slide-content .content-inner {
        padding-right: 0;

        padding-left: 3.75rem;

        bottom: 2rem

        /*width: 50%;*/
    }
      }

.hero-slider-section .slide-content .content-inner .slide-title {
        font-family: Proxima Nova, proxima-nova, sans-serif;
        line-height: 1.2;
        font-weight: 400;
        letter-spacing: 1px
      }

@media (min-width: 1024px) {

.hero-slider-section .slide-content .content-inner .slide-title {
          font-size: 3rem
      }
        }

@media all and (max-width: 767px) {

.hero-slider-section .slide-content .content-inner .slide-title {
          font-size: 1.875rem
      }
        }

.hero-slider-section .slide-content .content-inner .slide-title span {
          display: block;
          font-size: 1.2rem
        }

@media (min-width: 1024px) {

.hero-slider-section .slide-content .content-inner .slide-title span {
            font-size: 2.25rem
        }
          }

.inner-content-deets .hero-slider-section .slide-content .content-inner {
        padding-left: 3rem;
        padding-right: 3rem
      }

@media (min-width: 1280px) {

.inner-content-deets .hero-slider-section .slide-content .content-inner {
          padding-left: 6rem;

          padding-right: 6rem
      }
        }

.inner-content-deets .hero-slider-section .slide-content .content-inner .slide-title {
          font-weight: 300;
          font-size: 1.5rem;
          line-height: 1.3
        }

@media (min-width: 768px) {

.inner-content-deets .hero-slider-section .slide-content .content-inner .slide-title {
            font-size: 1.5rem
        }
          }

@media (min-width: 1024px) {

.inner-content-deets .hero-slider-section .slide-content .content-inner .slide-title {
            font-size: 1.75rem
        }
          }

@media (min-width: 1280px) {

.inner-content-deets .hero-slider-section .slide-content .content-inner .slide-title {
            font-size: 2.75rem
        }
          }

.inner-content-deets .hero-slider-section .slide-content .price {
        font-weight: 600
      }

@media (min-width: 1024px) {

.inner-content-deets .hero-slider-section .slide-content .price {
          font-size: 2.5rem
      }
        }

@media (min-width: 1280px) {

.inner-content-deets .hero-slider-section .slide-content .price {
          font-size: 2.5rem;

          letter-spacing: 0
      }
        }

.bg-top-center {
  background-position: top center;
}

/*.hero-area.hero-bg-area {*/

/*    & .holder{*/

/*        &  .content{*/

/*            &.align-hero-text-left{*/

/*                 position: absolute;*/

/*                 bottom:10%;*/

/*                 left:0;*/

/*                 transform: none;*/

/*                 top: auto;*/

/*              }*/

/*           }*/

/*      }*/

/*}*/