body {
  font-family: "Rethink Sans", sans-serif;
}

.hero-control {
  border-radius: 100%;
  border: 1px solid rgb(226 232 240);
  color: #F7F7F7;
  padding: 0.75rem;
  background-color: rgba(0, 0, 0, 0.2);
  transition: background-color 150ms ease, color 150ms ease;
}

.hero-control.prev {
  margin-left: 20px;
}
.hero-control.next {
  margin-right: 20px;
}

.hero-control:hover {
  background-color: rgba(0, 0, 0, 0.15);
}

/**
Headings
*/
.page-title {
  font-weight: 300;
  font-size: 22px;
}

.heading-1 {
  font-size: 50px;
  font-weight: 400;
  line-height: 110%;

  @media screen and (max-width: 1024px) {
    margin-bottom: 1rem;
    font-size: 36px;
  }
}

.heading-2 {
  font-size: 30px;
  line-height: 120%;

  @media screen and (max-width: 1024px) {
    font-size: 24px;
  }
}

.heading-3 {
  font-size: 24px;

  @media screen and (max-width: 1024px) {
    font-size: 20px;
  }
}

.heading-4 {
  font-size: 22px;
}

.heading-5 {
  font-size: 15px;
}

p {
  font-size: 15px;
  line-height: 120%;
}

section p {
  color: #575757;
}

.text-accent {
  color: #F45F00;
}

/**
Links
 */

p a {
  color: #F45F00;
  font-weight: 500;
}

/**
Navigation Styles
 */

header nav a {
  font-size: 15px;
  line-height: 120%;
}

/**
Shapes
 */

.sq-20 {
  corner-shape: round;
  border-radius: 20px;
}