#billboard::before {
  content: " ";
  display: block;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("images/ways02.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -10; /* This is pretty important. */
}

#billboard {
  height: 100vh;
  width: 100%;
}

#billboard h1 {
  position: absolute;
  text-align: center;
  font-size: 1.5vw;
  top: 65%;
  transform: translateY(-50%);
  width: 80%;
  margin: auto 10%;
  z-index: 19;
}

.bigFont {
  font-size: 200%;
}

.littleFont {
  font-size: 75%;
}

.spacer {
  width: 60%;
  font-size: 2vw;
  text-align: center;
  padding: 10vh 20%;
}

.spacer p {
  font-size: 1.5vw;
}

#boxes01,
#boxes02 {
  font-size: 0em;
}

.boxImages {
  position: relative;
  display: inline-flex;
  height: 40vh;
  width: calc(100% / 3);
  text-align: center;
  max-width: 100%;
}

#boxes01:hover #display {
  display: inline-flex;
}

.boxImages h2 {
  text-align: center;
  width: 100%;
  height: 100%;
  position: absolute;
  font-size: 4vw;
  color: var(--jonquil);
}

.boxImages::before {
  content: " ";
  display: block;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -10; /* This is pretty important. */
}

#AR::before {
  background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)),
    url("images/Autorifleman01.jpg");
  background-position-x: 75%;
}

#rifleman::before {
  background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)),
    url("images/rifleman02.jpg");
}

#grenadier::before {
  background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)),
    url("images/grenadier02.jpg");
}

.blockHolder {
  display: inline-flex;
  width: 90%;
  height: 40vw;
  padding: 5vh 5%;
}

.blockHolder > * {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.squarePic {
  height: 40vw;
  width: 40vw;
  object-fit: cover;
}

.squareText {
  font-size: 1.5vw;
  height: fit-content;
  position: relative;
  left: 10%;
  width: 40%;
}

.flip {
  display: flex;
  flex-direction: row-reverse;
}

.flip .squareText {
  left: -10%;
}
.bannerImages {
  display: none;
  transform: translateY(0);
  height: 70vh;
  left: 0;
  width: 100%;
}

.bannerImages h2 {
  width: 25%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2vw;
  color: var(--jonquil);
}

.bannerImages::before {
  content: " ";
  display: block;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -10; /* This is pretty important. */
}

.one::before {
  background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)),
    url("images/rifleman02.jpg");
  background-position: center;
}
.two::before {
  background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)),
    url("images/grenadier02.png");
  background-position: center;
}
.three::before {
  background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)),
    url("images/Autorifleman02.png");
  background-position: center;
}
.left {
  left: 10%;
}

#leadership .squarePic {
  object-position: 75%;
}

@media screen and (max-width: 768px) {
  #billboard::before {
    background-position: 20%;
  }
  #billboard h1 {
    font-size: 3vw;
  }
  #rifleman::before,
  #grenadier::before,
  #AR::before {
    background-position: 65%;
  }
  .two::before {
    background-position: 80%;
  }
  .bannerImages h2 {
    font-size: 4vw;
    width: 50%;
  }
  .squarePic {
    height: 90vw;
    width: 90vw;
  }
  .blockHolder {
    display: inline-block;
    padding: 0 5% 20%;
    height: 100%;
  }
  .blockHolder > * {
    transform: none;
  }
  .squareText {
    left: 0;
    text-align: center;
    width: 100%;
    font-size: 3vw;
  }

  .flip .squareText {
    left: 0;
  }
  .squareText h2 {
    margin: 5vh auto;
    width: 80%;
  }
  .spacer {
    font-size: 3vw;
  }
  .spacer p {
    font-size: 3vw;
  }
}