#hatHomepage,
#hatRural,
#hatTransport,
#hatRemote
#hatOffices {
    background-color: transparent;
}
/* 361 - 576 - 768 - 992 - 1200 - 1400 */
.hatBanner {
    align-items: center;
}
.hatBannerHome {
    align-items: top;
}
.hatBanner,
.hatBannerHome {
    height: 300px;
}
@media (min-width: 992px) {
    .hatBanner,
    .hatBannerHome {
        height: 400px;
    }
}
@media (min-width: 1400px) {
    .hatBanner,
    .hatBannerHome {
        height: 500px;
    }
}

#topHeaderHomepage, #topTextHomepage,
#topHeaderSolution, #topTextSolution {
    color: rgba(255, 255, 255,1);
}

#topHeaderHomepage {
    text-shadow: 0px 0px 5px rgba(0, 50, 50, 1),
                 0px 0px 15px rgb(0, 101, 101);
}
#topTextHomepage {
    text-shadow: 1px 2px 5px rgba(0, 0, 0, 1);
}

#topHeaderSolution, #topTextSolution {
    text-shadow: 1px 2px 5px rgba(0, 0, 0, 1);
}

#topHeaderHomepage,
#topHeaderSolution {
    font-size: 1.7rem;
}
#topTextHomepage,
#topTextSolution {
    font-size: 1.5rem;
}
@media (max-width: 992px) {
    #topHeaderHomepage,
    #topHeaderSolution {
        font-size: 1.5rem;
    }
    #topTextHomepage,
    #topTextSolution {
            font-size: 1.25rem;
    }
}
@media (max-width: 576px) {
    #topHeaderHomepage,
    #topHeaderSolution {
        font-size: 1.4rem;
    }
    #topTextHomepage,
    #topTextSolution {
            font-size: 1.1rem;
    }
}

.background-img {
    margin-left: -15px;
    margin-right: -15px;
    height: 100%;
    background: linear-gradient(to bottom,
            rgba(136,188,101,0),
            rgba(136,188,101,0));
}

#hatBottomString {
    width: 100%;
    background-color: rgba(127,127,127,0.5);
    text-shadow: 1px 2px 5px rgba(0, 0, 0, 1);
    font-size: 1rem;
    z-index: 11;
}
@media (min-width: 768px) {
    #hatBottomString {
        font-size: 1rem;
    }
}