section.chocolate {
    width: 100vw;
    background: #FEC81D;
    padding: 24px;
    padding-top: 0px;
    margin-top: -1.3rem;
}

section.chocolate h1.chocolate__title {
  color: #743618;
  font-size: 1rem;
  font-family: Roboto, sans-serif;
  font-weight: 500;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;

  margin-bottom: 48px;
}

section.chocolate h2.chocolate__subtitle {
  color: #743618;
  font-size: 1rem;
  font-family: Roboto, sans-serif;
  font-weight: 500;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;

  margin-bottom: 24px;
}

section.chocolate div.chocolate__hero {
  width: 100%;

  margin: 48px 0 24px 0;
  padding: 0 16px 650px 16px;

  position: relative;
}

section.chocolate div.chocolate__hero h1.chocolate__hero__title {
  color: #743618;
  font-size: 1rem;
  font-family: Roboto, sans-serif;
  font-weight: 500;
  text-align: start;
  text-transform: uppercase;
  letter-spacing: 2px;

  position: absolute;
  top: 0;
  left: 58px;
}

section.chocolate div.chocolate__hero div.chocolate__hero__hero_image {
  width: 100%;
  height: 100%;
  
  position: absolute;
  left: 0;
}

section.chocolate div.chocolate__hero div.chocolate__hero__hero_image div.overlay {
  width: 100%;
  height: 100%;

  background: #FEC81D;

  opacity: 0.2;

  position: absolute;

  z-index: 7;
}

section.chocolate div.chocolate__hero div.chocolate__hero__hero_image img.half__bubble {
  width: 172px;
  
  position: absolute;
  top: 16%;
  left: 35%;

  z-index: 3;

  transform: rotate(50deg);

  animation: balloons 12s ease-out infinite;
}

section.chocolate div.chocolate__hero div.chocolate__hero__hero_image img.bubble__much__small {
  width: 44px;
  height: 44px;

  position: absolute;
  top: 42%;
  left: 11%;

  z-index: 5;

  transform: rotate(0deg);

  animation: balloons 12s ease-out infinite;
}

section.chocolate div.chocolate__hero div.chocolate__hero__hero_image img.bubble__smaller {
  width: 61px;
  height: 61px;

  position: absolute;
  top: 6%;
  left: 39%;

  z-index: 4;

  transform: rotate(-10deg);

  animation: balloons 12s ease-out infinite;
}

section.chocolate div.chocolate__hero div.chocolate__hero__hero_image img.bubble__small {
  width: 69px;
  height: 69px;

  position: absolute;
  top: 54%;
  left: 17%;

  z-index: 1;

  transform: rotate(-15deg);

  animation: balloons_inverted 12s ease-out infinite;
}

section.chocolate div.chocolate__hero div.chocolate__hero__hero_image img.bubble__medium {
  width: 111px;
  height: 111px;

  position: absolute;
  top: 31%;
  left: 44%;

  z-index: 3;

  transform: rotate(-20deg);

  animation: balloons_inverted 12s ease-out infinite;
}

section.chocolate div.chocolate__hero div.chocolate__hero__hero_image img.bubble__big {
  width: 143px;
  height: 143px;

  position: absolute;
  top: 26%;
  left: 17%;

  z-index: 2;

  transform: rotate(15deg);

  animation: balloons_inverted 12s ease-out infinite;
}

section.chocolate div.chocolate__hero div.chocolate__hero__hero_image img.bubble__bigger {
  width: 281px;
  height: 281px;

  position: absolute;
  top: 36%;
  left: 20%;

  z-index: 1;

  transform: rotate(20deg);

  animation: balloons 12s ease-out infinite;
}

section.chocolate div.chocolate__hero div.chocolate__hero__hero_image img.chocolate__hero {
  /* height: 480px; */
  width: 90%;
  height: auto;

  position: absolute;
  top: 10%;
  left: 20%;

  z-index: 10;

  animation: float 12s ease-out infinite;
}
section.chocolate div.chocolate__hero div.chocolate__hero__hero_image img.chocolate__hero2 {
  height: 480px;
  width: 90%;
  position: absolute;
  top: 15%;
  left: 5%;

  z-index: 10;

  animation: float 12s ease-out infinite;
  display: none;
}

section.chocolate div.chocolate__hero h1.chocolate__hero__subtitle {
  color: #743618;
  font-size: 1rem;
  font-family: Roboto, sans-serif;
  font-weight: 500;
  text-align: start;
  text-transform: uppercase;
  letter-spacing: 2px;

  position: absolute;
  top: 63px;
  right: 174px;
}

section.chocolate h1.chocolate__question {
  color: #743618;
  font-size: 1rem;
  font-family: Roboto, sans-serif;
  font-weight: 500;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;

  margin-right: 26%;
  margin-top: 10%;
}

/* ========== ANIMATIONS ========== */
@keyframes float {
  50% { transform: translate(0, 20px); }
}

@keyframes balloons {
  0%,100%{ transform:translateY(0) rotate(-4deg); }
  50%{ transform:translateY(-25px) rotate(4deg); }
}

@keyframes balloons_inverted {
  0%,100% { transform:translateY(-25px) rotate(4deg); }
  50%{ transform:translateY(0) rotate(-4deg); }
}