.hero-sec {
  position: relative;
  padding: 50px 0px 80px;
}

body.single-asiakastarina .hero-sec {
  padding: 50px 0px 180px;
}

.block-preview .hero-sec {
  padding: 0px !important;
}

.hero-sec .row,
.hero-sec .carousel,
.hero-swiper .swiper-slide .row {
  min-height: 700px;
  /* max-height: 100vh;*/
  position: relative;
  z-index: 2;
}
.hero-sec .row.padrow,
.hero-sec .carousel.padrow,
.hero-swiper .swiper-slide .row.padrow {
  padding: 5% 0px;
}
.hero-sec .row.extrasmall,
.hero-sec .carousel.extrasmall,
.hero-swiper .swiper-slide .row.extrasmall {
  min-height: 300px;
  min-height: 33vh;
  min-height: 33vh;
}
.hero-sec .row.smaller,
.hero-sec .carousel.smaller,
.hero-swiper .swiper-slide .row.smaller {
  min-height: 500px;
  min-height: 50vh;
  min-height: calc(50vh - 50px);
}
.hero-sec .row.full,
.hero-sec .carousel.full,
.hero-swiper .swiper-slide .row.full {
  min-height: 900px;
  /*max-height: 95vh;*/
  min-height: calc(100vh - 50px);
}
.hero-sec .row .hero-content.animoi,
.hero-sec .carousel .hero-content.animoi,
.hero-swiper .swiper-slide .row .hero-content.animoi {
  opacity: 0;
}

.hero-sec:before {
  content: "";
  background-color: var(--overi-color);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.hero-sec img.herocover,
.hero-sec video.hero-bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  z-index: 0;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center center;
     object-position: center center;
}
.hero-sec img.herocover.left-top,
.hero-sec video.hero-bg-video.left-top {
  -o-object-position: left top;
     object-position: left top;
}
.hero-sec img.herocover.right-top,
.hero-sec video.hero-bg-video.right-top {
  -o-object-position: right top;
     object-position: right top;
}
.hero-sec img.herocover.left-center,
.hero-sec video.hero-bg-video.left-center {
  -o-object-position: left center;
     object-position: left center;
}
.hero-sec img.herocover.right-center,
.hero-sec video.hero-bg-video.right-center {
  -o-object-position: right center;
     object-position: right center;
}
.hero-sec img.herocover.left-bottom,
.hero-sec video.hero-bg-video.left-bottom {
  -o-object-position: left bottom;
     object-position: left bottom;
}
.hero-sec img.herocover.right-bottom,
.hero-sec video.hero-bg-video.right-bottom {
  -o-object-position: right bottom;
     object-position: right bottom;
}
.hero-sec img.herocover.center-top,
.hero-sec video.hero-bg-video.center-top {
  -o-object-position: center top;
     object-position: center top;
}
.hero-sec img.herocover.center-bottom,
.hero-sec video.hero-bg-video.center-bottom {
  -o-object-position: center bottom;
     object-position: center bottom;
}
.hero-sec img.herocover.center-center,
.hero-sec video.hero-bg-video.center-center {
  -o-object-position: center center;
     object-position: center center;
}

.hero-sec.swipe .swiper-item {
  width: 100%;
  height: 100%;
  position: RELATIVE;
}
.hero-sec.swipe .swiper-item:before {
  content: "";
  background-color: var(--overi-color);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}
.hero-sec.swipe .swiper-item img.herocover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  z-index: 0;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center center;
     object-position: center center;
}
.hero-sec.swipe.previkka .swiper-slide {
  display: none;
}
.hero-sec.swipe.previkka .swiper-slide:nth-child(1) {
  display: block;
}

span.swiper-pagination-bullet {
  margin: 5px;
  border: none;
  height: 7px;
  width: 25px;
  border-radius: 0;
  background: #fff !important;
}

.swiper-button-next,
.swiper-button-prev {
  color: #fff !important;
}

body.single-post .hero-sec:before,
body.single-asiakastarina .hero-sec:before {
  background-color: rgba(35, 31, 32, 0.45);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

.hero-sec .hero-content h1 {
  color: #fff !important;
}

.hero-sec p {
  color: #fff !important;
  line-height: 1.4;
}

.hero-sec .logotitle img,
.hero-sec .logotitle h1 {
  margin: 0;
  line-height: 1;
  text-transform: uppercase;
}
.hero-sec .logotitle img {
  margin-left: -40px;
  max-width: 220px;
}
.hero-sec .logotitle p span {
  background: #93c94a;
  padding: 5px 20px;
  font-size: 15px;
}

.hero-sec p.avainsanat,
.hero-sec p.kategoriat {
  font-size: 16px;
  max-width: 500px;
}
.hero-sec p.avainsanat a,
.hero-sec p.kategoriat a {
  display: inline-block !important;
  padding: 2px 5px !important;
  background: #93c94a !important;
  color: #fff !important;
  margin: 5px !important;
  font-size: 13px !important;
}

.hero-sec a:not(.primary-solid-btn.hero) {
  color: #93c94a;
}
.hero-sec a:not(.primary-solid-btn.hero):hover {
  color: #93c94a;
  text-decoration: underline;
}

.hero-sec .hero-content.text-right {
  text-align: right;
}

.hero-sec .hero-copy {
  max-width: 1024px;
}

.hero-sec .hero-content.text-center .hero-copy {
  margin: 0 auto;
}

.hero-sec .hero-content.text-right .hero-copy {
  margin: 0 0 0 auto;
}

@media (max-width: 1200px) {
  .hero-sec .row,
  .hero-sec .carousel {
    min-height: calc(75vh - 50px);
    position: relative;
    z-index: 2;
  }
  .hero-sec .row.padrow,
  .hero-sec .carousel.padrow {
    padding: 5% 0px;
  }
  .hero-sec .row.extrasmall,
  .hero-sec .carousel.extrasmall {
    min-height: calc(35vh - 50px);
  }
  .hero-sec .row.smaller,
  .hero-sec .carousel.smaller {
    min-height: 65vh;
    /* max-height: 65vh;*/
    min-height: calc(55vh - 50px);
  }
  .hero-sec .row.full,
  .hero-sec .carousel.full {
    min-height: calc(100vh - 50px);
  }
}
@media (max-width: 500px) {
  #heroCaro .carousel-item .hero-content {
    padding: 0px 60px;
  }
  .carousel-control-next-icon,
  .carousel-control-prev-icon {
    display: inline-block;
    width: 2rem;
    height: 2rem;
  }
  .hero-sec .row,
  .hero-sec .carousel {
    position: relative;
    z-index: 2;
  }
  .hero-sec .row.padrow,
  .hero-sec .carousel.padrow {
    padding: 5% 0px;
  }
  .hero-sec .row.extrasmall,
  .hero-sec .carousel.extrasmall {
    min-height: calc(35vh - 50px);
  }
  .hero-sec .row.smaller,
  .hero-sec .carousel.smaller {
    min-height: calc(55vh - 50px);
  }
  .hero-sec .row.full,
  .hero-sec .carousel.full {
    min-height: calc(100vh - 50px);
  }
}