* {
  margin: 0;
  padding: 0;
}

body {
  overflow-x: hidden;
  overflow-y: hidden;
  font-family: Arial, Helvetica, sans-serif;
}

.hide-image {
  display: none;
  opacity: 0;
}

#truck-animation {
  width: 100%;
  position: fixed;
  background-color: white;
  height: 100svh;
  z-index: 1000;
}

#truck-container {
  margin-left: auto;
  margin-right: auto;
  overflow: none;
}

#truck-move {
  top: 10%;
  left: 5%;
  width: 100%;
  height: 100%;
  position: relative;
  transform: translateX(-200%) skewX(-10deg);
}

.truck-anime {
  animation: moveTruck 3s forwards;
  animation-timing-function: linear;
}

@keyframes moveTruck {
  0% {
    transform: translateX(-200%) skewX(-10deg);
  }

  35% {
    transform: translateX(-10%) skewX(0deg);
  }

  85% {
    transform: translateX(10%) skewX(0);
  }

  100% {
    transform: translateX(200%) skewX(-10deg);
  }
}

.truck-stop {
  animation: stopTruck 1s forwards;
}

@keyframes stopTruck {
  0% {
    opacity: 1;
  }
  99% {
    opacity: 0;
    transform: translateX(0%);
  }

  100% {
    transform: translateX(200%);
  }
}

#truck-back {
  position: absolute;
  width: 50%;
  height: 40%;
  left: 1%;
  border-radius: 10% 10% 0 0;
  top: 18%;
  background-color: lightgrey;
}

#truck-front {
  position: absolute;
  width: 25%;
  height: 33%;
  border-radius: 0 10% 0 0;
  top: 25%;
  left: 51%;
  background-color: grey;
}

#truck-font {
  font-family: Arial, Helvetica, sans-serif;
  position: absolute;
  top: 14%;
  left: 11%;
  color: #371765;
}

#truck-font-two {
  font-family: Arial, Helvetica, sans-serif;
  position: absolute;
  top: 36%;
  left: 11.5%;
  color: #371765;
}

#truck-windshield {
  position: absolute;
  width: 5%;
  height: 10%;
  top: 28%;
  left: 71%;
  background-color: lightblue;
  z-index: 101;
}

#truck-window {
  position: absolute;
  width: 10%;
  height: 10%;
  top: 28%;
  left: 59%;
  background-color: lightblue;
  z-index: 101;
}

#truck-front-engine {
  position: absolute;
  width: 30%;
  height: 20%;
  border-radius: 0 10% 0 0;
  top: 38%;
  left: 60%;
  background-color: grey;
}

#truck-front-bumper {
  position: absolute;
  width: 5%;
  height: 5%;
  border-radius: 10% 10% 0 0;
  top: 54%;
  left: 86%;
  background-color: lightgrey;
}

#truck-light {
  position: absolute;
  width: 3%;
  height: 5%;
  border-radius: 20%;
  top: 40%;
  left: 86%;
  background-color: lightyellow;
}

#truck-back-bumper {
  position: absolute;
  width: 90%;
  height: 5%;
  top: 54%;
  left: 0%;
  background-color: grey;
}

#truck-back-wheel {
  left: 5%;
  top: 50%;
  border-radius: 100%;
  position: absolute;
  height: 20%;
  width: 20%;
  background-color: darkslategrey;
  z-index: 100;
}

#truck-front-wheel {
  top: 50%;
  left: 60%;
  border-radius: 100%;
  position: absolute;
  height: 20%;
  width: 20%;
  background-color: darkslategrey;
  z-index: 100;
}

#truck-back-wheel-hub {
  left: 7.5%;
  top: 52.5%;
  border-radius: 100%;
  position: absolute;
  height: 15%;
  width: 15%;
  background-color: grey;
  z-index: 100;
}

#truck-front-wheel-hub {
  top: 52.5%;
  left: 62.5%;
  border-radius: 100%;
  position: absolute;
  height: 15%;
  width: 15%;
  background-color: grey;
  z-index: 100;
}

#truck-back-wheel-hub-cover {
  left: 9%;
  top: 54%;
  border-radius: 100%;
  position: absolute;
  height: 12%;
  width: 12%;
  background-color: lightgrey;
  z-index: 100;
}

#truck-front-wheel-hub-cover {
  top: 54%;
  left: 64%;
  border-radius: 100%;
  position: absolute;
  height: 12%;
  width: 12%;
  background-color: lightgrey;
  z-index: 100;
}

#homepage {
  width: 100%;
  background-color: white;
}

#homepage-para {
  padding: 10px;
  font-family: Arial, Helvetica, sans-serif;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

#homepage-para p {
  padding-left: 40px;
  padding-right: 40px;
  text-align: center;
}

.homepage-para-header {
  padding: 10px;
  text-decoration: underline;
  color: #371765;
}

.homepage-para-sign {
  padding: 10px;
  margin-bottom: 30px;
  color: #371765;
  text-align: right;
}

header {
  transform: translateY(-100%);
  position: fixed;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  width: 100%;
  background-color: white;
  box-shadow: 0px -2px 12px #371765;
  color: #371765;
  z-index: 1000;
}

header h2 h5 {
  z-index: 1001;
}

.show-header {
  animation: showHeader 1s forwards;
}

@keyframes showHeader {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(0%);
  }
}

header h2 {
  padding-top: 10px;
  text-decoration: underline;
}

#header-sun-container {
  margin-left: 10px;
  margin-top: -35px;
  width: 90px;
  height: 45px;
  position: relative;
  overflow: hidden;
}

#header-sun-base {
  top: 20px;
  left: 20px;
  width: 50px;
  height: 25px;
  border-radius: 25px 25px 0 0;
  background-color: #ffbe39;
  position: absolute;
}

#header-sun-tri {
  border-color: transparent transparent #ffbe39 transparent;
  border-style: solid;
  border-width: 0px 10px 10px 10px;
  height: 0px;
  width: 0px;
  position: absolute;
  top: 40px;
  transform: rotate(-90deg);
}

#header-sun-tri-two {
  border-color: transparent transparent #ffbe39 transparent;
  border-style: solid;
  border-width: 0px 10px 10px 10px;
  height: 0px;
  width: 0px;
  position: absolute;
  top: 40px;
  left: 70px;
  transform: rotate(90deg);
}

#header-sun-tri-three {
  border-color: transparent transparent #ffbe39 transparent;
  border-style: solid;
  border-width: 0px 10px 10px 10px;
  height: 0px;
  width: 0px;
  position: absolute;
  top: 5px;
  left: 35px;
}

#header-sun-tri-four {
  border-color: transparent transparent #ffbe39 transparent;
  border-style: solid;
  border-width: 0px 10px 10px 10px;
  height: 0px;
  width: 0px;
  position: absolute;
  top: 15px;
  left: 10px;
  transform: rotate(-45deg);
}

#header-sun-tri-five {
  border-color: transparent transparent #ffbe39 transparent;
  border-style: solid;
  border-width: 0px 10px 10px 10px;
  height: 0px;
  width: 0px;
  position: absolute;
  top: 15px;
  left: 60px;
  transform: rotate(45deg);
}

#homepage-motion-graphics {
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

#homepage-motion-graphics-container {
  width: 100%;
  position: relative;
  display: none;
  overflow: hidden;
  background-image: url("");

  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  display: none;
}

.homepage-motion-graphics-container-anime {
  animation: homepageMGCAnime 20s infinite;
  display: none;
}

@keyframes homepageMGCAnime {
  0% {
    background-image: url("images/header/redcon1/ice.jpg");
  }

  25% {
    background-image: url("images/header/redcon1/ice.jpg");
  }

  26% {
    background-image: none;
    background-color: lightseagreen;
  }

  50% {
    background-image: none;
    background-color: lightseagreen;
  }

  51% {
    background-image: url("pacman.webp");
  }

  75% {
    background-image: url("pacman.webp");
  }

  76% {
    background-image: url("whbackground.jpg");
  }

  100% {
    background-image: url("whbackground.jpg");
  }
}

/*redcon1******************/
.redcon-anime img {
  position: absolute;
  width: auto;
  height: 75%;
}

.freedom {
  opacity: 0;
  transform: translate(-45%, 40%);
  animation: freedom 20s infinite;
}

@keyframes freedom {
  0% {
    opacity: 0;
  }
  6.9% {
    opacity: 0;
  }
  7% {
    opacity: 1;
    transform: scale(1) translate(-45%, 40%);
  }
  22% {
    opacity: 1;
    transform: scale(1.1) translate(-45%, 40%);
  }
  25% {
    opacity: 0;
  }
}
.freedom-a {
  opacity: 0;
  transform: translate(-55%, 40%);
  animation: freedomAnime 20s infinite linear;
}

@keyframes freedomAnime {
  0% {
    transform: translate(-200%, 40%);
    opacity: 1;
  }

  6.9% {
    opacity: 1;
  }
  7% {
    opacity: 0;
    transform: translate(-55%, 40%);
  }
}

.vice {
  opacity: 0;
  transform: translate(0%, 43%);
  animation: vice 20s infinite;
}

@keyframes vice {
  0% {
    opacity: 0;
  }
  5.9% {
    opacity: 0;
  }
  6% {
    opacity: 1;
    transform: scale(1) translate(0%, 43%);
  }
  22% {
    opacity: 1;
    transform: scale(1.1) translate(0%, 43%);
  }
  25% {
    opacity: 0;
  }
}
.vice-a {
  opacity: 0;
  transform: translate(-30%, 43%);
  animation: viceAnime 20s infinite linear;
}

@keyframes viceAnime {
  0% {
    transform: translate(-200%, 43%);
    opacity: 1;
  }

  5.9% {
    opacity: 1;
  }

  6% {
    opacity: 0;
    transform: translate(-30%, 43%);
  }
}

.sourblast {
  opacity: 0;
  transform: translate(45%, 46%);
  animation: sourblast 20s infinite;
}

@keyframes sourblast {
  0% {
    opacity: 0;
  }
  4.9% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform: scale(1) translate(45%, 46%);
  }
  22% {
    opacity: 1;
    transform: scale(1.1) translate(45%, 46%);
  }
  25% {
    opacity: 0;
  }
}

.sourblast-a {
  opacity: 0;
  transform: translate(15%, 46%);
  animation: sourblastAnime 20s infinite linear;
}
@keyframes sourblastAnime {
  0% {
    transform: translate(-200%, 46%);
    opacity: 1;
  }

  4.9% {
    opacity: 1;
  }

  5% {
    opacity: 0;
    transform: translate(15%, 46%);
  }
}

.sour {
  opacity: 0;
  transform: translate(90%, 49%);
  animation: sour 20s infinite;
}

@keyframes sour {
  0% {
    opacity: 0;
  }
  3.9% {
    opacity: 0;
  }
  4% {
    opacity: 1;
    transform: scale(1) translate(90%, 49%);
  }
  22% {
    opacity: 1;
    transform: scale(1.1) translate(90%, 49%);
  }
  25% {
    opacity: 0;
  }
}

.sour-a {
  opacity: 0;
  transform: scale(1) translate(60%, 49%);
  animation: sourAnime 20s infinite linear;
}
@keyframes sourAnime {
  0% {
    transform: translate(-200%, 49%);
    opacity: 1;
  }

  3.9% {
    opacity: 1;
  }

  4% {
    opacity: 0;
    transform: translate(60%, 49%);
  }
}

.cali {
  transform: translate(135%, 51%);
  opacity: 0;
  animation: cali 20s infinite;
}

@keyframes cali {
  0% {
    opacity: 0;
  }
  2.9% {
    opacity: 0;
  }
  3% {
    opacity: 1;
    transform: scale(1) translate(135%, 51%);
  }
  22% {
    opacity: 1;
    transform: scale(1.1) translate(135%, 51%);
  }
  25% {
    opacity: 0;
  }
}

.cali-a {
  opacity: 0;
  transform: translate(105%, 51%);
  animation: caliAnime 20s infinite linear;
}

@keyframes caliAnime {
  0% {
    transform: translate(-175%, 51%);
    opacity: 1;
  }

  2.9% {
    opacity: 1;
  }

  3% {
    opacity: 0;
    transform: translate(105%, 51%);
  }
}

.red-redcon-logo {
  opacity: 0;
  position: absolute;
  width: 75%;
  animation: redRedcon 20s infinite;
}

@keyframes redRedcon {
  0% {
    opacity: 1;
    transform: scale(1) translate(12%, -100%);
  }

  3% {
    transform: scale(1) translate(12%, 24%);
  }

  22% {
    opacity: 1;
    transform: scale(1.2) translate(12%, 24%);
  }

  25% {
    opacity: 0;
    transform: translate(-1012%, 24%);
  }
}

.red-black-redcon-logo {
  position: absolute;
  opacity: 0;
  width: 75%;
  transform: translate(13%, 30%);
  animation: redBlackRedcon 20s infinite;
}

@keyframes redBlackRedcon {
  0% {
    opacity: 1;
    transform: scale(1) translate(13%, -100%);
  }

  3% {
    transform: scale(1) translate(13%, 30%);
  }

  22% {
    opacity: 1;
    transform: scale(1.18) translate(13%, 30%);
  }

  25% {
    opacity: 0;
    transform: translate(1013%, 30%);
  }
}
/*redcon1******************/

#ouc {
  position: absolute;
  height: 100%;
  transform: translateX(1000%) rotate(22deg);
  top: 20%;
}

.ouc-anime {
  animation: oucAnime 20s infinite;
}

@keyframes oucAnime {
  25% {
    transform: translateX(1000%) rotate(22deg);
  }

  31% {
    transform: translateX(110%) rotate(22deg);
  }

  47% {
    transform: translateX(100%) rotate(12deg);
  }

  50% {
    transform: translateX(1000%) rotate(22deg);
  }
}

#ouc-two {
  position: absolute;
  height: 100%;
  /*transform: translateX(130%) rotate(33deg);*/
  transform: translateX(1000%) rotate(33deg);
  top: 24%;
}

.ouc-two-anime {
  animation: oucTwoAnime 20s infinite;
}

@keyframes oucTwoAnime {
  25% {
    transform: translateX(1000%) rotate(33deg);
  }

  31% {
    transform: translateX(140%) rotate(33deg);
  }

  47% {
    transform: translateX(130%) rotate(27deg);
  }

  50% {
    transform: translateX(1000%) rotate(33deg);
  }
}

#ouc-three {
  position: absolute;
  height: 100%;
  transform: translateX(1000%) rotate(44deg);
  top: 32%;
}

.ouc-three-anime {
  animation: oucThreeAnime 20s infinite;
}

@keyframes oucThreeAnime {
  25% {
    transform: translateX(1000%) rotate(44deg);
  }

  31% {
    transform: translateX(170%) rotate(44deg);
  }

  47% {
    transform: translateX(160%) rotate(41deg);
  }

  50% {
    transform: translateX(1000%) rotate(44deg);
  }
}

#ouc-water {
  position: absolute;
  height: 100%;
  width: 100%;
  transform: scale(0) translateX(1000%);
  opacity: 0;
}

.ouc-water-anime {
  animation: oucWaterAnime 20s infinite;
}

@keyframes oucWaterAnime {
  25% {
    transform: scale(0) translateX(1000%);
    opacity: 0;
  }

  31% {
    transform: scale(0.9) translateX(4%);
    opacity: 1;
  }

  47% {
    transform: scale(1) translateX(-4%);
    opacity: 1;
  }

  50% {
    transform: scale(0) translateX(1000%);
    opacity: 0;
  }
}

#ouc-text {
  position: absolute;
  top: 70%;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  text-shadow: -4px 4px 4px #565757;
  transform: translateX(-1000%);
}

.ouc-text-anime {
  animation: oucTextAnime 20s infinite;
}

@keyframes oucTextAnime {
  25% {
    transform: translateX(-1000%);
  }

  31% {
    transform: translateX(-2%);
  }

  47% {
    transform: translateX(6%);
  }

  50% {
    transform: translateX(-1000%);
  }
}

#coconut-container {
  position: absolute;
  top: 20%;
  width: 100%;
  height: 100%;
  transform: translateX(-1000%);
}

.coconut-con-move {
  animation: coconutConMove 20s infinite;
}

@keyframes coconutConMove {
  25% {
    transform: translateX(-1000%);
  }

  31% {
    transform: translateX(-2%);
  }

  47% {
    transform: translateX(2%);
  }

  50% {
    transform: translateX(-1000%);
  }
}

#coconut {
  position: absolute;
  background-color: #309285;
  transform: rotate(10deg);
}

.coconut-rotate {
  animation: coconutRotate 20s infinite;
}

@keyframes coconutRotate {
  25% {
    transform: rotate(10deg);
  }

  31% {
    transform: rotate(-4deg);
  }

  47% {
    transform: rotate(-10deg);
  }

  50% {
    transform: rotate(10deg);
  }
}

#coconut-tri {
  position: absolute;
  border-color: transparent transparent lightseagreen transparent;
  border-style: solid;
  height: 0px;
  width: 0px;
  z-index: 200;
  left: 10%;
  top: -4%;
  transform: rotate(180deg) scaleX(50%) scale(75%);
}

#coconut-two {
  position: absolute;
  top: 18%;
  background-color: #565757;
  transform: rotate(-10deg) scaleX(-1);
}

.coconut-two-rotate {
  animation: coconutTwoRotate 20s infinite;
}

@keyframes coconutTwoRotate {
  25% {
    transform: rotate(-10deg) scaleX(-1);
  }

  31% {
    transform: rotate(4deg) scaleX(-1);
  }

  47% {
    transform: rotate(10deg) scaleX(-1);
  }

  50% {
    transform: rotate(-10deg) scaleX(-1);
  }
}

#coconut-tri-two {
  position: absolute;
  border-color: transparent transparent lightseagreen transparent;
  border-style: solid;
  height: 0px;
  width: 0px;
  z-index: 200;
  left: 10%;
  top: -4%;
  transform: rotate(180deg) scaleX(50%) scale(75%);
}

#coconut-three {
  position: absolute;
  top: 36%;
  background-color: #309285;
}

#coconut-tri-three {
  position: absolute;
  border-color: transparent transparent lightseagreen transparent;
  border-style: solid;
  height: 0px;
  width: 0px;
  z-index: 200;
  left: 10%;
  top: -4%;
  transform: rotate(180deg) scaleX(50%) scale(75%);
}

.crash-anime {
  position: absolute;
  top: 40%;
  width: 70%;
  height: auto;
  animation: crashAnime 20s infinite;
  opacity: 0;
  transform: translateX(-30%) rotate(-22deg) scale(0);
}

@keyframes crashAnime {
  50% {
    opacity: 0;
    transform: translateX(-30%) rotate(-27deg) scale(0);
  }
  54% {
    opacity: 1;
    transform: translateX(-30%) rotate(-27deg) scale(1);
  }

  72% {
    opacity: 1;
    transform: translateX(-30%) rotate(-22deg) scale(1);
  }
  75% {
    opacity: 0;
    transform: translateX(-30%) rotate(-27deg) scale(0);
  }
}

.naruto-anime {
  top: 23%;
  position: absolute;
  width: 90%;
  height: auto;
  animation: narutoAnime 20s infinite;
  opacity: 0;
  transform: translateX(-15%) rotate(-17deg) scale(0);
}

@keyframes narutoAnime {
  50% {
    opacity: 0;
    transform: translateX(-15%) rotate(-17deg) scale(0);
  }
  54% {
    opacity: 1;
    transform: translateX(-15%) rotate(-17deg) scale(1);
  }

  72% {
    opacity: 1;
    transform: translateX(-15%) rotate(-11deg) scale(1);
  }
  75% {
    opacity: 0;
    transform: translateX(-15%) rotate(-17deg) scale(0);
  }
}

.sonic-anime {
  position: absolute;
  top: 38%;
  width: 80%;
  height: auto;
  animation: sonicAnime 20s infinite;
  opacity: 0;
  transform: translateX(60%) rotate(17deg) scale(0);
}

@keyframes sonicAnime {
  50% {
    opacity: 0;
    transform: translateX(60%) rotate(17deg) scale(0);
  }
  54% {
    opacity: 1;
    transform: translateX(60%) rotate(17deg) scale(1);
  }

  72% {
    opacity: 1;
    transform: translateX(60%) rotate(11deg) scale(1);
  }
  75% {
    opacity: 0;
    transform: translateX(60%) rotate(17deg) scale(0);
  }
}

.tetris-anime {
  position: absolute;
  width: 100%;
  top: 15%;
  left: 12%;
  height: auto;
  animation: tetrisAnime 20s infinite;
  opacity: 0;
  transform: scale(0);
}

@keyframes tetrisAnime {
  50% {
    opacity: 0;
    transform: scale(0);
  }
  54% {
    opacity: 1;
    transform: scale(1);
  }

  72% {
    opacity: 1;
    transform: scale(1.1);
  }
  75% {
    transform: scale(0);
  }
}

.gfuel-anime {
  position: absolute;
  top: -20%;
  width: 80%;
  height: auto;
  animation: gfuelAnime 20s infinite;
  opacity: 0;
  transform: scale(1.3);
}

@keyframes gfuelAnime {
  50% {
    opacity: 0;
    transform: scale(1.1);
  }
  54% {
    opacity: 1;
  }

  72% {
    opacity: 1;
    transform: scale(1);
  }
  75% {
    opacity: 0;
  }
}

.warheads-anime {
  position: absolute;
  top: 15%;
  left: 25%;
  width: 50%;
  height: auto;
  animation: blkAnime 20s infinite;
  opacity: 0;
}

@keyframes blkAnime {
  75% {
    opacity: 0;
    transform: scale(0);
  }
  80% {
    opacity: 1;
  }

  84% {
    transform: scale(1.1);
  }

  88% {
    transform: scale(1);
  }

  92% {
    transform: scale(1.1);
  }

  96% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.1);
  }
}

.warheads-lemon-anime {
  position: absolute;
  top: -5%;
  left: 60%;
  width: 50%;
  height: auto;
  animation: whLemonAnime 20s infinite linear;
  opacity: 0;
  transform: rotate(0);
}

@keyframes whLemonAnime {
  75% {
    transform: rotate(360deg) scale(0);
    opacity: 0;
  }
  79% {
    transform: rotate(0) scale(1);
    opacity: 1;
  }

  97% {
    transform: rotate(-360deg) scale(1);
    opacity: 1;
  }
  100% {
    transform: rotate(-720deg) scale(0);
    opacity: 0;
  }
}

.warheads-water-anime {
  position: absolute;
  top: -10%;
  width: 55%;
  left: -10%;
  height: auto;
  animation: whWaterAnime 20s infinite linear;
  opacity: 0;
  transform: rotate(0);
}

@keyframes whWaterAnime {
  75% {
    opacity: 0;
    transform: rotate(-360deg) scale(0);
  }
  79% {
    opacity: 1;
    transform: rotate(0) scale(1);
  }

  97% {
    opacity: 1;
    transform: rotate(360deg) scale(1);
  }
  100% {
    transform: rotate(720deg) scale(0);
    opacity: 0;
  }
}

.warheads-three-anime {
  position: absolute;
  width: 100%;
  top: 40%;
  height: auto;
  animation: whThreeAnime 20s infinite linear;
  opacity: 0;
  transform: translateY(100%);
}

@keyframes whThreeAnime {
  75% {
    opacity: 0;
    transform: translateY(100%) scale(1);
  }
  80% {
    opacity: 1;
    transform: translateY(0%);
  }

  84% {
    transform: scale(1.1);
  }

  88% {
    transform: scale(1);
  }

  92% {
    transform: scale(1.1);
  }

  96% {
    opacity: 1;
    transform: translateY(0%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(100%) scale(1.1);
  }
}

.comic-anime {
  position: absolute;
  width: 120%;
  animation: comicAnime 20s infinite;
  top: 10%;
  opacity: 0;
}

@keyframes comicAnime {
  75% {
    opacity: 0;
    transform: translateY(100%) scale(1);
  }
  80% {
    opacity: 1;
    transform: translateY(0%);
  }

  84% {
    transform: scale(1.1);
  }

  88% {
    transform: scale(1);
  }

  92% {
    transform: scale(1.1);
  }

  96% {
    opacity: 1;
    transform: translateY(0%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(100%) scale(1.1);
  }
}

footer {
  background-color: white;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  color: #371765;
  font-weight: bold;
  font-size: 1.2em;
}

footer h2 {
  text-decoration: underline;
}

footer .bottom {
  padding: 10px;
  background-color: #371765;
  color: white;
}

nav {
  text-align: right;
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 2000;
}

#nav-toggle {
  cursor: pointer;
}

#nav-menu {
  margin-top: -1000px;
  opacity: 0;
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  -webkit-user-select: none;
  user-select: none;
  box-shadow: 0px 2px 12px #371765;
}

#nav-menu h3 {
  padding: 10px;
}

#beverages {
  position: relative;
  width: calc(100% - 40px);
  padding: 10px;
  min-height: 100px;
  background-color: #371765;
  color: white;
  margin-left: auto;
  margin-right: auto;
  max-width: 1000px;
  box-shadow: 0px 0px 8px #371765;
}

.beverages-header {
  color: white;
  padding-bottom: 10px;
}

#snacks {
  width: calc(100% - 40px);
  margin-top: 48px;
  margin-bottom: 48px;
  padding: 10px;
  min-height: 100px;
  margin-left: auto;
  margin-right: auto;
  color: #371765;
  max-width: 1000px;
  box-shadow: 0px 0px 8px #371765;
}

.snacks-header {
  background-color: white;
}
.snacks-header h2 {
  text-align: center;
}

#private-label {
  width: calc(100% - 40px);
  padding: 10px;
  min-height: 100px;
  background-color: #371765;
  color: white;
  margin-left: auto;
  margin-right: auto;
  max-width: 1000px;
  box-shadow: 0px 0px 8px #371765;
  margin-bottom: 48px;
}

.private-label-header {
  color: white;
}

.private-label-image {
  width: 100%;
}

.private-label-con {
  background-color: white;
  color: #371765;
  padding-bottom: 10px;
  text-align: center;
}
.private-label-con p {
  padding: 10px;
  font-weight: bold;
}

#product-con {
  background-color: white;
  overflow-y: scroll;
}
#product-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  background-color: white;
  cursor: pointer;
}

#product-info {
  position: absolute;
  top: 10px;
  width: calc(100% - 20px);
  height: 0%;
  background-color: white;
  color: #371765;
  left: 10px;
  overflow-y: scroll;
}

.product-details {
  padding: 10px;
}

.product-details h3 {
  padding-left: 10px;
}

.product-list-con {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
}

.product-list-item {
  width: calc(50% - 40px);
  padding: 10px;
  border: 1px solid #ccc;
  margin: 5px;
  text-align: center;
}

#close-product-details {
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
}

.product-details-img {
  width: 25%;
}

.beverage_logo {
  width: calc(50% - 40px);
  margin: 10px;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0px 2px 8px #371765;
}

@media (min-width: 768px) {
  .beverage_logo {
    width: calc(33.33% - 40px);
  }
}

#snacks-con {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  overflow-y: scroll;
  text-align: center;
}

.hostess-item {
  width: calc(50% - 20px);
  margin: 10px;
}

@media (min-width: 768px) {
  .hostess-item {
    width: calc(25% - 20px);
  }
}

.snack-img {
  width: 100%;
}

#contact {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  width: calc(100% - 40px);
  box-shadow: 0px 0px 8px #371765;
  margin-bottom: 48px;
  color: #371765;
  text-align: center;
}

#contact h2 {
  text-decoration: underline;
}

#contact p {
  font-weight: bold;
}

.hostess-logo-img {
  margin-left: 20%;
  width: 60%;
}

@media (min-width: 768px) {
  .hostess-logo-img {
    width: 40%;
    margin-left: 30%;
  }
}

.iframe {
  margin-top: 20px;
  margin-bottom: 20px;
  width: calc(100% - 40px);
  height: auto;
}

a {
  color: #000099;
}

.header-img img {
  width: 100%;
  height: auto;
}