article {
  border-bottom: 1px solid gray;
  padding: 1rem 0;
}

@media (min-width: 65em) {
  article {
    display: flex;
  }

  article > section {
    flex-basis: 70%;
    width: 70%;
    max-width: 70%;
    padding: 0 1.5rem 0 0;
  }

  article > aside {
    flex-basis: 30%;
    width: 30%;
    max-width: 30%;
  }
}

@supports (display: grid) {
  article {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 1rem;
  }

  article > section,
  article > aside {
    flex-basis: auto;
    max-width: 100%;
    width: auto;
  }

  @media (min-width: 65em) {
    article {
      grid-template-columns: 2.5fr 1fr;
    }
  }
}

h3 {
  margin: 0;
}

[aria-expanded='false'] + div {
  display: none;
}
[aria-expanded='true'] + div {
  display: block;
}

.js-fim {
  color: #fff;
  display: block;
  position: relative;
  padding: 0.75rem;
}

.js-fim:hover,
.js-fim:focus,
.js-fim[aria-expanded='true'] {
  color: #18ffff;
}

.js-fim:after {
  position: absolute;
  top: 45%;
  left: auto;
  width: 0;
  height: 0;
  content: '';
  margin-left: 10px;
  border-right: 7px solid transparent;
  border-top: 7px solid currentColor;
  border-left: 7px solid transparent;
}

.js-fim[aria-expanded='true']:after {
  border-top: 0;
  border-bottom: 7px solid currentColor;
}

input[type='radio'] + label:before {
  display: none;
}

input[type='radio']:checked + label {
  background-color: #e12d3e;
  color: #fff;
}

input[type='radio'] + label {
  border-top: 1px solid white;
  font-size: 0.8rem;
  font-weight: 600;
  margin: 0;
  padding: 0.5rem 1rem;
}

input[type='radio']:first-child + label {
  border-top: 0;
}

aside {
  position: relative;
}

aside > a {
  background-color: #333366;
  color: #fff;
  display: block;
  margin: 0 0 0.5rem;
  padding: 0.5rem 0.5rem 0.5rem 2.5rem;
  background-image: url(/pubs/assets/images/other-languages.svg);
  background-position: 0.5rem 50%;
  background-size: 1.25rem;
  background-repeat: no-repeat;
}

aside > a:hover,
aside > a:focus {
  background-color: #15c;
  color: #fff;
}

aside div {
  background-color: #d7e1e6;
  columns: 6rem 2;
  column-fill: balance;
  display: none;
  padding: 0.5rem;
}

aside div:before {
  position: absolute;
  top: -7px;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -10px;
  content: '';
  border-right: 10px solid transparent;
  border-bottom: 10px solid #d7e1e6;
  border-left: 10px solid transparent;
}

aside div {
  position: relative;
  right: 0;
  width: 100%;
  z-index: 99;
}

aside div a {
  background-image: none !important;
  display: block;
  padding: 0.5rem 0.5rem 0;
}

@media (min-width: 65em) {
  aside div {
    position: absolute;
    font-size: 0.8rem;
    width: 110%;
  }

  aside div a {
    padding-top: 0.25rem;
  }
}

[href*='.pdf'],
[data-icon='pdf'] {
  background-image: url(/pubs/assets/images/pdf.svg);
  background-position: 0.5rem 50%;
  background-size: 1.25rem;
}

[href*='.mp3'] {
  background-image: url(/pubs/assets/images/audio.svg);
}

[data-icon='web-only'] {
  background-image: url(/pubs/assets/images/web-only.svg);
}

@media (min-width: 45em) {
  [id='js-fi-topics'],
  [id='js-fi-order'] {
    position: relative;
  }

  [id='js-fi-topics'] > div,
  [id='js-fi-order'] > div {
    position: absolute;
    width: 295px;
    z-index: 999;
  }

  [id='js-fi-order'] > div {
    right: 0;
    width: 420px;
  }
}

.is-ie [id='js-fi-container'],
.is-ie [aria-expanded],
.is-ie aside div:before,
.no-js [id='js-fi-container'],
.no-js [aria-expanded],
.no-js aside div:before {
  display: none;
}

.is-ie [aria-expanded='false'] + div,
.no-js [aria-expanded='false'] + div {
  display: block;
  position: static;
  width: 100%;
}