.neop-main {
  display: block; /* IE11 ¯\_(ツ)_/¯ */
}

.neop-article-header {
  background-color: #236b95;
}

.neop-article-body {
  padding: 1rem;
}

.neop-copy {
  font-size: 0.9375rem;
  line-height: 1.3125;
}

.neop-copy p {
  margin-top: 0;
  margin-bottom: 1.125rem;
}

.neop-copy a {
  margin: 0 -0.3125rem -0.125rem;
  padding: 0 0.3125rem 0.125rem;
  border: 1px solid transparent;
  border-radius: 4px;
  color: rgb(15, 160, 220);
  background-color: transparent;
  text-decoration: none;
  /* prevent links from effecting their parent container’s width */
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.neop-copy a:hover,
.neop-copy a:focus {
  border-color: rgba(15, 160, 220, 0.125);
  background-color: rgba(15, 160, 220, 0.0625);
}

.neop-copy .neop-button-link {
  padding: 0.25rem 0.5rem;
  color: white;
  background-color: rgb(15, 160, 220);
}

.neop-copy .neop-button-link:hover,
.neop-copy .neop-button-link:focus {
  background-color: rgb(0, 120, 180);
}

/* related (sub navigation) page links */
.neop-article-meta {
  color: white;
  background-color: #236b95;
}

.neop-article-meta h2 {
  margin: 0;
  padding: 1rem;
  font-size: 1rem;
  text-transform: uppercase;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.25);
}

/* match neop-article-body left and right padding */
.neop-article-menu {
  padding: 0 1rem;
}

.neop-article-menu ul {
  padding-left: 0;
  list-style-type: none;
}

.neop-article-menu a {
  font-size: 0.9375rem;
  color: inherit;
}

.neop-article-menu a:hover,
.neop-article-menu a:focus {
  border-color: rgba(255, 255, 255, 0.125);
}

.neop-copy-sidebar > * {
  margin-bottom: 1rem;
}

.neop-copy-sidebar > *:last-child {
  margin-bottom: 0;
}

.neop-copy-main p:last-child {
  margin-bottom: 0;
}

@media (min-width: 20em) {
  .neop-article-body {
    padding: 2rem;
  }

  .neop-article-menu {
    padding: 0 2rem;
  }

  .neop-copy {
    font-size: 1rem;
    line-height: 1.375;
  }

  .neop-copy p {
    margin-bottom: 1.25rem;
  }
}

@media (min-width: 40em) {
  .neop-article-body {
    padding: 3rem;
  }

  .neop-article-menu {
    padding: 0 3rem;
  }

  .neop-copy {
    font-size: 1.0625rem;
    line-height: 1.4375;
  }

  .neop-copy p {
    margin-bottom: 1.375rem;
  }
}

@media (min-width: 60em) {
  .neop-article-body {
    padding: 4rem;
  }

  .neop-article-menu {
    padding: 0 4rem;
  }

  .neop-copy {
    font-size: 1.125rem;
    line-height: 1.5;
  }

  .neop-copy p {
    margin-bottom: 1.5rem;
  }
}