/* Global styles */
:root {
  --sans-serif: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --serif: Georgia, 'Times New Roman', Times, serif;
  --extralight: 200;
  --light: 300;
  --medium: 500;
  --semibold: 600;
  --extrabold: 800;
  --color-black: #0a0a0a;
  --color-darkgrey: #242021;
  --color-red: #b21f29;
  --color-white: #fefefe;
  --max-width: 1200px;
}

.hide-display { height: 0; opacity: 0; overflow: hidden; position: absolute; white-space: nowrap; width: 0; }
.rowpad { padding: 0 .625rem; }
.semibold { font-weight: var(--semibold); }
.text-black { color: #0a0a0a; }
.text-lower { text-transform: lowercase; }
.text-title { text-transform: capitalize; }
.text-upper { text-transform: uppercase; }
/* End global styles */

.contentarea h1, .contentarea h2, .contentarea h3, .contentarea h4 {
  color: inherit;
  font-family: 'Sofia Sans Condensed', var(--sans-serif);
  font-weight: normal;
  margin: 0;
}
.contentarea h2, .contentarea h2.lined { margin: 0 auto 24px; }
.contentarea p { color: inherit; font-family: inherit; line-height: inherit; margin: 0 auto 24px; }
.contentarea p:last-child { margin-bottom: 0; }

.contentarea h2.lined { font-family: 'Sofia Sans Condensed', var(--sans-serif); font-size: 24px; font-weight: bold; line-height: normal; }
.contentarea .lined::before { border-color: var(--color-black); }
.contentarea .lined > span { background: var(--color-black); color: var(--color-white); padding: 8px 18px 7px; }

/* h3::before { content: none; } */
.measures h3::before, .benefit h3::before { content: none; }

.measures { font-size: 14px; text-align: center; }
.measures .column { padding-bottom: 32px; }
.measures h3 { font-size: 24px; font-weight: bold; margin: 14px auto 3px; }

.feature-wrapper { margin: 32px auto; max-width: var(--max-width); }
.features { border: 1px solid var(--color-black); border-radius: 5px; padding: 36px 32px 16px; position: relative; }
.features h2 { left: 0; margin: 0; position: absolute; right: 0; top: -16px; }
.features h2.lined::before { content: none; }
.featurelist { column-count: 1; list-style: none; margin: 0 auto; padding: 0 0 0 28px; }
.featurelist li { line-height: normal; padding: 0 16px 16px 0; position: relative; }
.featurelist li::before {
  background: url('../images/icon_list-check.png');
  background-repeat: no-repeat;
  background-size: cover;
  content: '';
  display: block;
  height: 16px;
  left: -22px;
  position: absolute;
  top: 4px;
  width: 16px;
}
.feature__image { display: block; height: auto; margin: 0 auto; max-width: 100%; }

.benefits { margin: 32px auto; max-width: var(--max-width); }
.benefit-items, .benefit { align-items: flex-start; display: flex; flex-wrap: wrap; gap: 24px; text-align: left; }
/* .benefit-items {} */
.benefit { flex: 0 1 auto; flex-wrap: nowrap; }
.benefit > * { flex: 0 1 auto; }
.benefit > *:first-child { flex: 0 0 40px; }
.benefit h3 { color: var(--color-red); font-size: 26px; font-weight: bold; margin: 0 auto 6px; text-align: inherit; text-transform: uppercase; }

@media screen and (min-width: 40em) {
  .rowpad { padding: 0 .9375rem; }
}

@media screen and (min-width: 56.25em) {
  .featurelist { column-count: 2; }
}

@media screen and (min-width: 60em) {
  .benefit { flex: 0 1 calc((100% / 2) - 12px); }
}

@media screen and (max-width: 61.75em) {
  .feature__image { text-align: center; }
}

/**
 * 439px  => 27.438em
 * 524px  => 32.75em
 * 540px  => 33.75em
 * 560px  => 35em
 * 600px  => 37.5em
 * 639px  => 39.938em
 * 640px  => 40em
 * 699px  => 43.688em
 * 700px  => 43.75em
 * 819px  => 51.188em
 * 820px  => 51.25em
 * 863px  => 53.938em
 * 864px  => 54em
 * 900px  => 56.25em
 * 959px  => 59.938em
 * 960px  => 60em
 * 988px  => 61.75em
 * 989px  => 61.813em
 * 1023px => 63.938em
**/