@media screen and (max-width: 768px) {
  div.social-media {
    display: none;
  }

  header.header nav.navbar {
    width: 100%;
  }

  header.header nav.navbar div.header__logo img {
    width: 120px;
  }

  header.header nav.navbar div.header__logo p {
    font-size: 0.875rem;

    margin-top: 16px;
  }

  header.header nav.navbar label.menu__icon span.navicon {
    display: block;
  }

  header.header nav.navbar ul.header__menu {
    width: 100%;

    background: #FFBB00;

    position: absolute;
    top: 116px;
    left: 0;

    display: none;
  }

  header.header nav.navbar input.menu__btn:checked ~ .header__menu {
    display: initial;
  }

  section.home_title {
    display: none;
  }

  section.home {
    margin-bottom: 48px;
  }

  section.home h1.home__title {
    display: block;
  }

  section.home_title  h1.home__title {
    font-size: 0.875rem;
    text-align: center;

    margin: 0;
  }

  section.home div.overlay {
    height: 88%;
  }

  section.home img.home__hero__display {
    margin-top: 100px;
  }

  section.home img.home__hero__chocolate {
    height: 50%;

    bottom: 14%;
  }

  section.home img.home__hero__chocolates__pieces {
    height: 22%;

    bottom: 13%;
  }

  section.chocolate.container {
    padding: 0;
  }

  section.chocolate h2.chocolate__subtitle {
    margin-bottom: 0;
  }

  section.chocolate div.chocolate__hero {
    padding: 0 16px 700px 16px;
  }

  section.chocolate div.chocolate__hero h1.chocolate__hero__title,
  section.chocolate div.chocolate__hero h1.chocolate__hero__subtitle {
    text-align: center;

    width: 100%;

    position: relative;
    top: 0;
    left: 50%;

    transform: translate(-50%);
  }

  section.chocolate div.chocolate__hero h1.chocolate__hero__subtitle {
    margin-top: 48px;
  }

  section.chocolate div.chocolate__hero div.chocolate__hero__hero_image img.half__bubble {
    top: 28%;
    left: 48%;
  }

  section.chocolate div.chocolate__hero div.chocolate__hero__hero_image img.bubble__much__small {
    top: 60%;
    left: 6%;
  }

  section.chocolate div.chocolate__hero div.chocolate__hero__hero_image img.bubble__smaller {
    top: 20%;
    left: 58%;
  }

  section.chocolate div.chocolate__hero div.chocolate__hero__hero_image img.bubble__small {
    top: 80%;
    left: 6%;
  }

  section.chocolate div.chocolate__hero div.chocolate__hero__hero_image img.bubble__medium {
    top: 58%;
    left: 66%;
  }
/* display hero */
  section.chocolate div.chocolate__hero div.chocolate__hero__hero_image img.chocolate__hero {
    top: 26%;
    left: 5%;
    display: none;
  }
section.chocolate div.chocolate__hero div.chocolate__hero__hero_image img.chocolate__hero2 {
display: flex;
  }

  section.chocolate div.chocolate__hero div.chocolate__hero__hero_image img.bubble__bigger {
    top: 46%;
    left: 13%;
  }

  section.chocolate div.chocolate__hero div.chocolate__hero__hero_image img.bubble__big {
    top: 36%;
    left: 6%;
  }

  section.chocolate h1.chocolate__question {
    margin-right: 0;
  }

  section.about div.about__hero div.about__hero__main_bubble {
    width: 320px;
    height: 320px;

    margin: 120px auto;
  }

  section.about div.about__hero div.about__hero__main_bubble img.about__hero__first-factory {
    width: 200px;
    height: 200px;

    top: -90px;
    left: -10%;
  }

  section.about div.about__hero div.about__hero__main_bubble img.about__hero__second-factory {
    width: 160px;
    height: 160px;

    right: -10%;
    bottom: -48px;
  }

  section.about div.about__hero div.about__hero__main_bubble h1 {
    font-size: 0.75rem;
  }

  section.about div.about__info {
    display: flex;
    flex-direction: column;
  }

  footer.footer {
    height: 404px;
  }

  footer.footer div.container {
    padding: 24px;
  }
}