* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.wrapper {
  font-family: Helvetica;
  width: 980px;
  margin-left: auto;
  margin-right: auto;
}

/*----------------------------- SECTION HERO -----------------------------*/

.hero {
  padding: 25px 0 25px 0;
}

.hero_img {
  display: flex;
  justify-content: flex-start;
}

.hero_text {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.hero_text div {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin: 15px;
}

.hero_text_intro {
  font-style: italic;
  font-size: 20px;
  text-align: center;
}

.hero_text_mid {
  font-weight: bold;
  font-size: 40px;
  text-align: center;
}

.hero_text_mid span {
  color: #ec0083;
}

.hero_text_footnote {
  font-style: italic;
  font-size: 26px;
  text-align: center;
}

.hero_line {
  height: 1px;
  width: 60%;
  background-color: #000000;
  margin: 15px 0 15px 0;
}

.hero_text_desc {
  font-size: 16px;
  text-align: center;
  width: 75%;
}

/*--------------------------- SECTION TIMELINE ---------------------------*/

  .col {
    display: inline-block;
    position: relative;
  }

  .image {
    cursor: pointer;
  }

  .timeline img {
    border: 2px solid #fff;
    width: 100%;
  }

  .overlay {
    position: absolute;
    border: 2px solid #6cd9fd;
    background-color: #fff;
    z-index: 10;
    top: 2px;
    left: 2px;
    height: 98%;
    width: 199%;
    display: none;
  }

  .overlay2 {
    position: absolute;
    border: 2px solid #6cd9fd;
    background-color: #fff;
    z-index: 10;
    top: 2px;
    left: 2px;
    height: 96%;
    width: 99%;
    display: none;
  }

  .border {
    border: 2px solid #6cd9fd;
  }

  .date, .content {
    display: inline-block;
  }

  .date {
    padding: 18px;
    font-size: 2rem;
    font-style: italic;
  }

  .content {
    vertical-align: top;
    padding-top: 20px;
    width: 330px;
  }

  .content p {
    margin-top: 0px;
    font-size: .9rem;
    padding-bottom: 5px;
  }

  @media (max-width: 768px) {
    #overlay-1992,
    #overlay-2012,
    #overlay-2016 {
      height: 98%;
      width: 99%;
    }

    #overlay-1992 .content,
    #overlay-2012 .content,
    #overlay-2016 .content {
      width: 250px;
      padding: 0 10px 10px 10px;
    }
  }

  @media (max-width: 992px) {
    .date {
      padding: 15px;
      font-size: 1.4rem;
    }

    .content {
      padding-top: 15px;
      width: 240px;
    }

    .content p {
      font-size: .8rem;
    }
  }

/*---------------------------- SECTION BANNER ----------------------------*/

.banner {
  padding: 25px 0 25px 0;
}

.banner_text {
  background-color: #f3f6fb;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.banner_text_intro {
  font-size: 26px;
  padding-bottom: 10px;
}

.banner_text div {
  height: 70%;
  padding-left: 50px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: flex-start;
  margin: 15px;
}

.banner_text_midWhite {
  color: #f3f7fb;
  background-color: #000000;
  padding: 10px;
  font-size: 46px;
}

.banner_text_midBlue {
  color: #6ad7ff;
  background-color: #000000;
  padding: 10px;
  margin-left: 25px;
  font-size: 46px;
}

.banner_text_desc {
  padding-top: 10px;
  font-size: 24px;
}

.banner_text_desc span {
  font-weight: bold;
}

.banner_img {
  background-color: #f3f6fb;
  display: flex;
  justify-content: flex-end;
}

/*--------------------------- SECTION PRODUCTS ---------------------------*/

.products {
  padding-bottom: 100px;
}

.product1,
.product2,
.product3,
.product4 {
  width: 240px;
  height: auto;
  margin-bottom: 10px;
}

.product1 {
  background-color: #fcf5ee;
}

.product2 {
  background-color: #d7d7d7;
}

.product3 {
  background-color: #edf2f9;
}

.product4 {
  background-color: #ededed;
}

.product_desc {
  text-align: center;
  font-weight: bold;
  font-size: 14px;
  padding: 0 2px 2px 10px;
  text-transform: uppercase;
}

.order {
  text-align: center;
  padding-bottom: 10px;
}

.order a {
  text-decoration: none;
  color: #000000;
}

.center div {
  display: flex;
  flex-direction: column;
  align-items: center;
}