@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&family=Roboto+Slab:wght@400;700&display=swap');
:root {
  --mhc-blue-primary: #232996;
  --mhc-blue-secondary: #6080c0;
}

html {
  max-width: 100vw;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  font-family: "Open Sans", sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Roboto Slab", serif;
}

.navbar-nav .nav-item > .nav-link {
  color: var(--mhc-blue-secondary);
  font-size: 1.1rem;
  transition: all 0.2s ease-in-out;
  margin-left: 10px;
}

.navbar-nav .nav-item > .nav-link > i { 
  padding-left: 5px;
}

.navbar-nav .nav-item > .nav-link:hover {
  color: var(--mhc-blue-primary);
}

img#slogan {
  max-height: 44px;
  object-fit: scale-down;
  margin-bottom: 4px;
}

.navbar img {
  max-height: 50px;
  object-fit: scale-down;
}

#splash-container {
  background: url("../img/gallery/010.JPG") no-repeat fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: right top;
  height: 100vh;
}

#splash-row {
  background: rgba(0, 0, 0, 0.6);
  height: inherit;
}

#splash-wrapper {
  color: #FEFEFE;
}

#splash-wrapper h1 {
  padding: 15px 20px;
}

#splash-wrapper .lead {
  font-weight: normal;
  font-size: 1.5rem;
}

#splash-wrapper > hr {
  border-top-color: #FEFEFE;
}

#splash-wrapper .btn {
  font-size: 1.25rem;
}

.btn-primary {
  background-color: rgba(35,41,150, 0.9);
  border-color: var(--mhc-blue-primary);
}

.btn-primary:hover {
  border-color: var(--mhc-blue-secondary);
  background-color: var(--mhc-blue-primary);
}

.text-mhc {
  color: var(--mhc-blue-primary);
}

.w-10 {
  width: 10% !important;
}

.w-20 {
  width: 20% !important;
}

.w-30 {
  width: 30% !important;
}

.w-40 {
  width: 40% !important;
}

.w-60 {
  width: 60% !important;
}

.w-70 {
  width: 70% !important;
}

.w-80 {
  width: 80% !important;
}

.w-90 {
  width: 90% !important;
}

.bg-white-a50 {
  background-color: rgba(255, 255, 255, .5);
}

.bg-grey-a50 {
  background-color: rgba(100, 100, 100, .5);
}

.bg-black-a50 {
  background-color: rgba(0, 0, 0, .65);
}

.hide {
  display: none !important;
}

.show {
  display: initial !important;
}

.lightbox {
  z-index: 10;
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;

  background-color: rgba(0, 0, 0, 0.9);
}

.lightbox__image {
  position: fixed;
  max-width: 75vw;
  max-height: 75vh;
  top: 50%;
  left: 50%;
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

@media screen and (max-width: 576px) {
  .lightbox__image {
    max-width: 100vw;
    max-height: 100vh;
  }
}