@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%;
}