@import 'base';
/***** Header Banner Button CTA Mixins *****/ @mixin flexbox($direction: row, $justify-content: center){
display: -webkit-box; display: -ms-flexbox; display: flex; @if $direction == "row" { -webkit-box-orient: horizontal; } else{ -webkit-box-orient: vertical; } -webkit-box-direction: normal; -ms-flex-direction: $direction; flex-direction: $direction; -webkit-box-pack: $justify-content; -ms-flex-pack: $justify-content; justify-content: $justify-content;
}
/***** Header Banner Button CTA Variables *****/ $max-width: 600px; $container-height: 330px;
/***** Header Banner Button CTA General Styles *****/ .header-banner-wrapper{
background-size: cover; background-position: center top; .header-one-cta-wrapper{ @include flexbox(column); text-align: center; height: $container-height; margin-top: 10px; .header, .subtitle, .button-wrapper { @include flexbox; max-width: $max-width; width: 100%; } .subtitle { padding: 12px 0 28px 0; p { margin: 0; } } .button-wrapper { .cta-btn { @include flexbox($direction: column); height: 40px; background: #fff; padding: 0 30px; font-size: 16px; font-weight: 400; color: #555; border-bottom: 2px solid #a4a4a4; &:active, &:hover{ text-decoration: none; color: #555; } } } }
}
/* Media Queries */ @media screen and (min-width: $max-width) {
.header-banner-wrapper{ .header-one-cta-wrapper { .header, .subtitle, .button-wrapper { margin: 0 auto; } } }
}
@include mobile-only {
.header-banner-wrapper{ .header-one-cta-wrapper{ .button-wrapper { .cta-btn { width: 100%; max-width: 320px; } } } }
}