body {
    font-family: 'Mulish',
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    "Noto Sans",
    "Liberation Sans",
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    "Noto Color Emoji";
    font-size: 16px;
    line-height: 1.5;
    background: #fff;
}

/*****************
   HEADER
 ****************/
header {
    border-bottom: 1px solid #0064ae;
}

header .top-bar {
    background-color: rgba(0, 65, 113, 1);
    color: white;
    line-height: 30px;
}

header .main-content {
    background: white;
}

header .main-nav-menu li a {
    margin: 0 5px 7px 0;
    display: inline-block;
    color: #202020;
    font-size: 16px;
    text-align: left;
    padding: 7px 15px;
    transition: all .2s ease-out;
    border-style: solid;
    border-width: 1px;
    border-color: transparent;
    text-decoration: none;
    text-wrap: nowrap;
}

header .main-nav-menu li a:hover,
.active-page-home header .main-nav-menu li a.link-home,
.active-page-supply-store header .main-nav-menu li a.link-about,
.active-page-contact header .main-nav-menu li a.link-contact,
.active-page-services header .main-nav-menu li a.link-services {
    border-color: rgba(89, 154, 202, 1);
}

.gallery-container {
    background-color: #074d6f;
}

/*****************
   FOOTER
 ****************/
footer {
    background: rgba(0, 100, 174, 1);
    color: white;
}

footer .footer-nav-menu li a {
    margin: 0 5px 7px 0;
    display: inline-block;
    color: #fff;
    font-size: 16px;
    text-align: left;
    padding: 7px 15px;
    transition: all .2s ease-out;
    border-style: solid;
    border-width: 1px;
    border-color: transparent;
    text-decoration: none;
    text-wrap: nowrap;
}

footer .footer-nav-menu li a:hover,
.active-page-home footer .footer-nav-menu li a.link-home,
.active-page-supply-store footer .footer-nav-menu li a.link-about,
.active-page-contact footer .footer-nav-menu li a.link-contact,
.active-page-services footer .footer-nav-menu li a.link-services {
    border-color: #599aca;
}


/*****************
   TYPOGRAPHY
 ****************/
.h1-custom {
    font-size: 40px;
    line-height: 100.0%;
    font-family: 'Bitter', serif;
    color: #1c5474;
    font-weight: 500;
}

.h2-custom,
.heading-light-blue {
    font-size: 32px;
    font-family: 'Bitter', serif;
    color: #599aca;
    font-weight: 500;
}

/*****************
   UTILITIES
 ****************/
.color-white {
    color: #fff !important;
}

.color-dark-blue {
    color: #1c5474 !important;
}

.border-light-blue {
    border: 1px solid #599aca !important;
}

.border-dark-blue {
    border: 1px solid #1c5474 !important;
}

.lh-2 {
    line-height: 2rem;
}

/*****************
   HOME PAGE
 ****************/
.active-page-home .hero-banner {
    background-repeat: no-repeat;
    background-image: url(/images/home/hero-banner-bg.jpg);
    background-size: cover;
}

.active-page-home .hero-banner .content {
    background: rgba(0, 100, 174, 0.7);
    color: #fff;
    padding-top: 100px;
    padding-bottom: 100px;
}

.active-page-home .hero-banner .content .heading {
    font-size: 36px;
    font-family: 'Bitter', sans-serif;
    color: #ffffff;
    font-weight: bold;
}

.active-page-home .hero-banner .content .copy {
    text-transform: uppercase;
    font-size: 20px;
    font-weight: bold;
}

#bgSlider {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-position: 50% 50%;
}

.active-page-home marquee {
    background: #0064ae;
    color: #fff;
    font-size: 35px;
    line-height: 35px;
}

.active-page-home .pool-section {
    background-image: url(/images/home/section-bg.jpg);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

.active-page-supply-store .supplier-logo {
    max-height: 183px;
}