@import 'base'; @import 'hero-carousel'; @import 'grid';

.hero-no-cta-block {

background-size: cover;
background-position: center top;
height: 290px;

@include mobile-only {
  height: 220px;
}

}

.hero-no-cta-text-area {

max-width: 600px;
margin: 0 auto;

}

.hero-no-cta-title {

text-align: center;
padding-top: 96px;

@include mobile-only {
  padding-top: 76px;
  line-height: 32px;
  font-size: 28px;
}

}

.hero-no-cta-description {

text-align: center;
padding-top: 12px;
line-height: 28px;

@include mobile-only {
  padding-top: 8px;
  line-height: 20px;
  font-size: 14px;
  font-weight: 400;
}

}

hero-no-cta .owl-dots {

@include desktop {
  @include hero-owl-dots    
}

}

// from here starts the scss for when there is an image added to the page

.hero-no-cta-item-width{

@extend .hero-carousel-item-width;

}

.hero-no-cta-description-with-image{

@extend .hero-no-cta-description;
text-align: left;

@include mobile-only {
  font: 0.0 auto;
}

}

.hero-no-cta-title-with-image {

text-align: left;

@include mobile-only {
  line-height: 32px;
  text-align: center;
  font-size: 28px;
}

}

.hero-no-cta-text-area-with-image {

text-align: center;
max-width: 600px;
margin-top: 24px;

@include mobile-only {
  margin: 24px auto 6px;
  z-index: 100;
}

 @include desktop {
  max-width: 100%;
  text-align: left;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  padding: 0;
}

}

.hero-no-cta-item–left-aligned-copy {

.hero-no-cta-productImgWrapper {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  @include mobile-only {
    margin: 0 auto;
    width: 185px;
    height: 130px;
  }

  @include desktop {
    width: 410px;
    height: 290px;
  }
}

}

.hero-no-cta-row{

@extend .row;
min-height: 100%;

}

.hero-carousel-productImg {

max-height: 100%;
max-width: 100%;

}