/* Custom styles */

.font-hobo-std-medium {
    font-family: hobo-std, sans-serif;
    font-weight: 400;
    font-style: normal;
}

h1, h2, h3, h4, h5, .navbar  {
    font-family: hobo-std, sans-serif !important;
}

body, span, p {
    font-family: lato, sans-serif;
}

header.masthead {
    background-color: #0f1a3d;
}

.navbar-light .navbar-toggler{
    border-color: transparent;
}

.navigation-social-icon {
    height: 2rem;
    width:auto;
}

#mainNav .navbar-nav > li.nav-item > a.nav-link {
    font-size: 0.9rem;
}

#mainNav {
  background-color: transparent;
  border-bottom: 0;
  transition: background-color 0.3s ease;
}

#mainNav .navbar-toggler {
    font-size: 1rem;
}

#mainNav .nav-link,
#mainNav .navbar-brand,
#mainNav .navbar-toggler {
  color: white;
}

#mainNav .navbar-collapse {
  background-color: transparent;
}

.navigation-social-icon,
.nav-link svg, .footer-social-icon {
    height: 2rem;
    width: auto;
    vertical-align: middle;
}

@media (max-width: 992px) {

    /* Default collapsed state */
    #mainNav {
        background-color: transparent;
    }

    /* While expanding or already expanded */
    #mainNav:has(.navbar-collapse.collapsing),
    #mainNav:has(.navbar-collapse.show) {
        background-color: white;
    }

    #mainNav:has(.navbar-collapse.collapsing) .nav-link,
    #mainNav:has(.navbar-collapse.collapsing) .navbar-brand,
    #mainNav:has(.navbar-collapse.collapsing) .navbar-toggler,
    #mainNav:has(.navbar-collapse.show) .nav-link,
    #mainNav:has(.navbar-collapse.show) .navbar-brand,
    #mainNav:has(.navbar-collapse.show) .navbar-toggler {
        color: #212529;
    }

    .navigation-social-icon,
    .nav-link svg, .footer-social-icon {
        height: 1.5rem;
    }

    .masthead-full-height{
        padding-top: 50% !important;
        padding-bottom: 50% !important;
    }
}
@media (min-width: 993px) {
    .masthead-full-height{
        padding-top: 50% !important;
        padding-bottom: 30% !important;
    }
}
@media (min-width: 1400px) {
    .masthead-full-height{
        padding-top: 5% !important;
        padding-bottom: 45% !important;
    }
}