/* CSS Style Sheet for Banner */
.flex-container .no-image {
    height: auto;
}

/* Flex body content to bottom */
.flex-bottom {
    align-self: flex-end;
}

/* Banner with Image */

/* translucent overlays */
.banner-text-wrapper:after,
.banner-image:before,
.banner-image:after {
    width: 2.5rem;
    height: 100%;
    content: ' ';
    position: absolute;
    z-index: 10;
    display: block;
    top: 0;
}

.banner-image:before {
    left: 0;
}

.banner-text-wrapper:after {
    left: 100%;
}

.banner-image:after {
    width: 100%;
    height: 2rem;
    top: auto;
    bottom: 0;
    display: none;
}

/* Black */
.banner-wrapper.black {
    background: var(--gt-black);
    background-image: url('../images/stripes-bg.svg');
    background-repeat: repeat;
    background-size: auto .9rem;
    overflow: hidden;
}

.banner-text-wrapper.black {
    background: var(--gt-black);
}

.banner-text-wrapper.black .btn.btn-secondary,
.banner-no-image.black.btn.btn-secondary {
    background: var(--gt-gold);
    color: var(--gt-black);
}

.banner-text-wrapper.black .btn.btn-secondary:hover,
.banner-no-image.black .btn.btn-secondary:hover {
    background: var(--gt-white) !important;
    color: var(--gt-black) !important;
}

.banner-text-wrapper.black p,
.banner-text-wrapper.black ul,
.banner-text-wrapper.black li {
    color: var(--gt-white) !important;
}

.banner-text-wrapper.black h2,
.banner-text-wrapper.black h3,
.banner-text-wrapper.black h4,
.banner-text-wrapper.black h5,
.banner-text-wrapper.black h6 {
    color: var(--gt-gold) !important;
}

/* White */
.banner-wrapper.white {
    background: var(--gt-white);
    background-image: url('../images/stripes-bg.svg');
    background-repeat: repeat;
    background-size: auto .9rem;
    overflow: hidden;
}

.banner-text-wrapper.white {
    background: var(--gt-white);
}

.banner-text-wrapper.white .btn.btn-secondary,
.banner-no-image.white .btn.btn-secondary {
    background: var(--gt-gold);
    color: var(--gt-black);
}

.banner-text-wrapper.white .btn.btn-secondary:hover,
.banner-no-image.white .btn.btn-secondary:hover {
    background: var(--gt-black) !important;
    color: var(--gt-white) !important;
}

.banner-text-wrapper.white p,
.banner-text-wrapper.white ul,
.banner-text-wrapper.white li {
    color: var(--gt-black) !important;
}

.banner-text-wrapper.white h2,
.banner-text-wrapper.white h3,
.banner-text-wrapper.white h4,
.banner-text-wrapper.white h5,
.banner-text-wrapper.white h6 {
    color: var(--gt-md-gold) !important;
}

/* Blue */
.banner-wrapper.blue {
    background: var(--gt-navy);
    background-image: url('../images/stripes-bg-white.svg');
    background-repeat: repeat;
    background-size: auto .9rem;
    overflow: hidden;
}

.banner-text-wrapper.blue {
    background: var(--gt-navy);
}

.banner-text-wrapper.blue .btn.btn-secondary,
.banner-no-image.blue .btn.btn-secondary {
    background: var(--gt-gold);
    color: var(--gt-black);
}

.banner-text-wrapper.blue .btn.btn-secondary:hover,
.banner-no-image.blue .btn.btn-secondary:hover {
    background: var(--gt-white) !important;
    color: var(--gt-black) !important;
}

.banner-text-wrapper.blue,
.banner-text-wrapper.blue p,
.banner-text-wrapper.blue ul,
.banner-text-wrapper.blue li,
.banner-text-wrapper.blue h2,
.banner-text-wrapper.blue h3,
.banner-text-wrapper.blue h4,
.banner-text-wrapper.blue h5,
.banner-text-wrapper.blue h6 {
    color: var(--gt-white) !important;
}

/* Gold */
.banner-wrapper.gold {
    background: var(--gt-gold);
    background-image: url('../images/stripes-bg-white.svg');
    background-repeat: repeat;
    background-size: auto .9rem;
    overflow: hidden;
}

.banner-text-wrapper.gold {
    background: var(--gt-gold);
}

.banner-text-wrapper.gold .btn.btn-secondary,
.banner-no-image.gold .btn.btn-secondary {
    background: var(--gt-black);
    color: var(--gt-gold);
}

.banner-text-wrapper.gold .btn.btn-secondary:hover,
.banner-no-image.gold .btn.btn-secondary:hover {
    background: var(--gt-white) !important;
    color: var(--gt-black) !important;
}

.banner-text-wrapper.gold p,
.banner-text-wrapper.gold ul,
.banner-text-wrapper.gold li,
.banner-text-wrapper.gold h2,
.banner-text-wrapper.gold h3,
.banner-text-wrapper.gold h4,
.banner-text-wrapper.gold h5,
.banner-text-wrapper.gold h6 {
    color: var(--gt-black) !important;
}

/* Warm-gray */
.banner-wrapper.warm-gray {
    background: var(--gt-warm-gray);
    background-image: url('../images/stripes-bg-white.svg');
    background-repeat: repeat;
    background-size: auto .9rem;
    overflow: hidden;
}

.banner-text-wrapper.warm-gray {
    background: var(--gt-warm-gray);
}

.banner-text-wrapper.warm-gray .btn.btn-secondary,
.banner-no-image.warm-grey .btn.btn-secondary {
    background: var(--gt-black);
    color: var(--gt-warm-gray);
}

.banner-text-wrapper.warm-gray .btn.btn-secondary:hover,
.banner-no-image.warm-grey .btn.btn-secondary:hover {
    background: var(--gt-white) !important;
    color: var(--gt-black) !important;
}

.banner-text-wrapper.warm-gray p,
.banner-text-wrapper.warm-gray ul,
.banner-text-wrapper.warm-gray li,
.banner-text-wrapper.warm-gray h2,
.banner-text-wrapper.warm-gray h3,
.banner-text-wrapper.warm-gray h4,
.banner-text-wrapper.warm-gray h5,
.banner-text-wrapper.warm-gray h6 {
    color: var(--gt-black) !important;
}

/* Banner No Image */
/* Banner No Image */
/* Banner No Image */

/* Black */
.banner-no-image.black {
    background: var(--gt-black) !important;
}

.banner-no-image.black,
.banner-no-image.black p,
.banner-no-image.black ul,
.banner-no-image.black li {
    color: var(--gt-white) !important;
}

.banner-no-image.black h2,
.banner-no-image.black h3,
.banner-no-image.black h4,
.banner-no-image.black h5,
.banner-no-image.black h6 {
    color: var(--gt-tech-gold) !important;
}

/* White */
.banner-no-image.white {
    background: var(--gt-white) !important;
}

.banner-no-image.white,
.banner-no-image.white p,
.banner-no-image.white ul,
.banner-no-image.white li {
    color: var(--gt-black);
}

.banner-no-image.white h2,
.banner-no-image.white h3,
.banner-no-image.white h4,
.banner-no-image.white h5,
.banner-no-image.white h6 {
    color: var(--gt-md-gold) !important;
}

/* Blue */
.banner-no-image.blue {
    background: var(--gt-navy) !important;
}

.banner-no-image.blue,
.banner-no-image.blue p,
.banner-no-image.blue ul,
.banner-no-image.blue li,
.banner-no-image.blue h2,
.banner-no-image.blue h3,
.banner-no-image.blue h4,
.banner-no-image.blue h5,
.banner-no-image.blue h6 {
    color: var(--gt-white) !important;
}

/* Gold */
.banner-no-image.gold {
    background: var(--gt-gold) !important;
}

.banner-no-image.gold p,
.banner-no-image.gold ul,
.banner-no-image.gold li,
.banner-no-image.gold h2,
.banner-no-image.gold h3,
.banner-no-image.gold h4,
.banner-no-image.gold h5,
.banner-no-image.gold h6 {
    color: var(--gt-black) !important;
}

/* Warm-gray */
.banner-no-image.warm.grey {
    background: var(--gt-warm-gray) !important;
}

.banner-no-image.warm.grey p,
.banner-no-image.warm.grey ul,
.banner-no-image.warm.grey li {
    color: var(--gt-black) !important;
}

.banner-no-image.warm.grey h2,
.banner-no-image.warm.grey h3,
.banner-no-image.warm.grey h4,
.banner-no-image.warm.grey h5,
.banner-no-image.warm.grey h6 {
    color: var(--gt-black) !important;
}

@media (max-width: 990px) {
    .banner-image:before,
    .banner-text-wrapper::after {
        display: none;
    }

    .banner-image:after {
        display: block;
    }
}