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

}