/*-- Global --*/
strong,
b {
    font-weight: bold;
}

/*-- Header --*/

.header .header-info {
    background: rgb(20, 40, 62);
    /* Old browsers */
    background: -moz-linear-gradient(-45deg, rgba(20, 40, 62, 1) 0%, rgba(20, 40, 62, 1) 58%, rgba(42, 84, 127, 1) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, rgba(20, 40, 62, 1) 0%, rgba(20, 40, 62, 1) 58%, rgba(42, 84, 127, 1) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, rgba(20, 40, 62, 1) 0%, rgba(20, 40, 62, 1) 58%, rgba(42, 84, 127, 1) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#14283e', endColorstr='#2a547f', GradientType=1);
    /* IE6-9 fallback on horizontal gradient */
}

/* HOME PAGE =================================================  */

/* Hero ====  */

@media(max-width: 812px) {
    .hero-headline {
        font-size: 1.25rem;
    }

    h5 {
        font-size: 1rem !important;
    }
}

.hero {
    background: linear-gradient(rgba(0, 0, 0, 0.555), rgba(0, 0, 0, 0.555)),
        url("https://apihoard.webit.com/api/v1/Image/6BD0FAB86D73FE97E9AC0EB087CD09BD/6BD0FAB86D73FE97E9AC0EB087CD09BD.jpg?size=800x600") no-repeat 75% top;
    margin-top: -1px;
    display: block;
    position: relative;
    overflow: hidden;
    padding: 3.5em 0;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
@media(min-width: 768px) {
    .hero {
        padding: 8em 0;
    }
}
@media(min-width: 992px) {
    .hero {
        background: linear-gradient(rgba(0, 0, 0, 0.555), rgba(0, 0, 0, 0.555)),
            url("https://apihoard.webit.com/api/v1/Image/6BD0FAB86D73FE97E9AC0EB087CD09BD/6BD0FAB86D73FE97E9AC0EB087CD09BD.jpg?size=1920x1440") no-repeat 65% top;
        padding: 13em 0;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
}

.hero-lines {
    position: relative;
    text-align: center;
}

.hero-lines span {
    display: inline-block;
    vertical-align: middle;
    max-width: 55%;
}

.hero-lines::before,
.hero-lines::after {
    content: ' ';
    height: 3px;
    width: 10%;
    background: var(--color-theme-highlight);
    display: inline-block;
    vertical-align: middle;
}

.hero-headline {
    line-height: 1.15;
}

.hero-btm-line {
    height: 3px;
    width: 75%;
    background: var(--color-theme-highlight);
    margin: 25px auto;
}