html {
  overflow-x: hidden;
  height: 100%;
}
body {
  height: 100%;
}
/* Background Color Classes */
.bg-brand {
  background-color: #333333;
}

.bg-brand-light {
  background-color: #555555;
}

.bg-brand-dark {
  background-color: #111111;
}

.bg-brand-50 {
  background-color: #666666;
}

.bg-brand-100 {
  background-color: #444444;
}

.bg-brand-200 {
  background-color: #222222;
}

.bg-brand-300 {
  background-color: #000000;
}

.bg-accent {
  background-color: #5CA673;
}

.bg-accent--hover:hover {
  background-color: #2f7442;
}

.text-accent {
  color: #5CA673;
}

.text-accent--hover:hover {
  color: #2f7442;
}

/* Global Text Colors */
body {
  background-color: #d0d0d0;
  color: #222222;
}

.text-gray-800 {
  color: #111111;
}

.text-gray-700 {
  color: #222222;
}

.text-gray-600 {
  color: #333333;
}

.text-gray-500 {
  color: #444444;
}

.text-gray-400 {
  color: #555555;
}

.text-gray-300 {
  color: #666666;
}

.big-image {
  height: 100vh;
  width: 100vw;
  position: relative;
  background-size: cover;
  background-position: 50% 50%;
}

.overlay {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.65);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

header {
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1000;
}

.primaryLogo {
  width: 264px;
}
.flex {
  display: flex;
}
.flex-col {
  flex-direction: column;
}
.flex-auto {
  flex: 1 1 auto;
}
.h-full {
  height: 100%;
}