body {
  width       : 100vw;
  overflow-x  : hidden;
  font-family : 'Open Sans',
                sans-serif;
}

a.card-header,
h1,
h2,
h3,
h4,
h5,
nav {
  font-family : 'Oswald',
                sans-serif;
  font-weight : 600;
}

.header-light {
  font-family : 'Oswald',
                sans-serif;
  font-weight : 600;
}

:root {
  --bs-primary-translucent : rgba(var(--bs-primary-rgb),0.75);
}

.border-4 {
  border-color : var(--bs-primary) !important;
  border-width : 4px !important;
}

@media
  (height < 320px) {
  h4 {
    font-size : 1px;
  }
}

.text-underline-hover {
  text-decoration : none;
}

.text-underline-hover:hover {
  text-decoration       : underline;
  text-decoration-color : var(--bs-primary);
}

.link-dash {
  border-bottom   : 1px dotted grey;
  text-decoration : red;
}

.link-dash:hover {
  border-bottom   : 1px dotted black;
  text-decoration : red;
}

.btn-search-red {
  color            : white;
  background-color : var(--bs-primary);
}

.btn-search-red:hover {
  color            : white;
  background-color : firebrick;
}

.btn-red.active {
  color            : white;
  background-color : var(--bs-primary);
}

.btn-red:not(.active) {
  color            : grey;
  border-color     : lightgrey;
  background-color : white;
}

.btn-red:not(.active):hover {
  color            : var(--bs-primary);
  border-color     : var(--bs-primary);
  background-color : whitesmoke;
}

.video-responsive {
  position       : relative;
  height         : 0;
  padding-bottom : 100%;
  overflow       : hidden;
}

.video-responsive iframe {
  position : absolute;
  top      : 0;
  left     : 0;
  width    : 100%;
  height   : 100%;
}

.clear-button {
  border-color : lightgrey;
}

.pagination > li > a {
  color            : var(--bs-primary);
  border-color     : var(--bs-primary);
  background-color : white;
}

.pagination > li > a:focus,
.pagination > li > a:hover,
.pagination > li > span:focus,
.pagination > li > span:hover {
  color            : white;
  border-color     : var(--bs-primary);
  background-color : var(--bs-primary);
}

.pagination > .page-item:active {
  color            : white;
  background-color : var(--bs-primary);
}

.pagination > .active > a:not(.active) {
  color            : white;
  border           : solid 1px var(--bs-primary);
  background-color : var(--bs-primary);
}

.bg-primary-translucent {
  background-color : rgba(var(--bs-primary-rgb), 0.5);
}

.grow {
  transition : transform .1s ease-out;
}

.grow:hover {
  transform : scale(1.01);
}

.grow-lg {
  transition : transform .1s ease-out;
}

.grow-lg:hover {
  transform : scale(1.05);
}

.nav-item a {
  position: relative;
}

.nav-item a::before {
  content: '';
  position: absolute;
  visibility: hidden;
  width: 100%;
  height: 2px;
  left: 0px;
  bottom: -2px;
  background-color: var(--bs-primary);
  transform: scaleX(0);
  transition: all 0.2s ease-in-out 0s;
}

.nav-item a:hover::before {
  visibility: visible;
  transform: scaleX(1);
}

.nav-item a.active::before {
  visibility: visible;
  transform: scaleX(1);
}

.nav-link {
    display: inline-block;
    font-size: 18px;
}

.tooltip-primary {
  --bs-tooltip-bg: var(--bs-primary);
}

.border-grey:not(:hover) {
  border-color: darkgrey !important;
}