.service-page {
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 769px) {
  .service-page {
    flex-direction: row;
  }
}
.service-page__detail {
  width: 100%;
}
.service-page__detail--with-menu {
  width: 100%;
}
@media screen and (min-width: 769px) {
  .service-page__detail--with-menu {
    width: 75%;
  }
}
.service-page__menu {
  margin: 1em 0;
}
@media screen and (min-width: 769px) {
  .service-page__menu {
    margin: 0 0 0 2em;
    width: 25%;
  }
}
.service-page__teaser--container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media screen and (min-width: 769px) {
  .service-page__teaser--container {
    flex-direction: row;
  }
}
.service-page__teaser--logo {
  margin: 2rem 0;
}
@media screen and (min-width: 769px) {
  .service-page__teaser--logo {
    width: 33.3333333333%;
    margin-right: 4rem;
  }
}
@media screen and (min-width: 769px) {
  .service-page__teaser--content--with-logo {
    width: 66.6666666667%;
  }
}

.view-service-page .views-row:nth-child(even) {
  background-color: #f6f6f6;
}

.milestone {
  margin-bottom: 1.6rem;
  padding-left: 1.2rem;
}
.milestone .date-topper {
  font-size: 2rem;
  font-weight: bold;
}
.milestone_color--completed {
  border-left: solid 4px #428433;
}
.milestone_color--completed .date-topper {
  color: #428433;
}
.milestone_color--in-progress {
  border-left: solid 4px #01579b;
}
.milestone_color--in-progress .date-topper {
  color: #01579b;
}
.milestone_color--upcoming {
  border-left: solid 4px #adadad;
}
.milestone_legend {
  display: flex;
  font-size: 1.4rem;
}
@media (min-width: 768px) and (max-width: 1225px) {
  .milestone_legend {
    flex-direction: column;
  }
}
.milestone_legend > div {
  margin-right: 0.8rem;
}
.milestone_legend > div:last-child {
  margin-right: 0;
}
.milestone_legend > div::before {
  content: "";
  height: 10px;
  width: 10px;
  margin-right: 0.4rem;
  border-radius: 50%;
  display: inline-block;
}
.milestone_legend--completed::before {
  background-color: #428433;
}
.milestone_legend--in-progress::before {
  background-color: #01579b;
}
.milestone_legend--upcoming::before {
  background-color: #adadad;
}