@import url('https://fonts.googleapis.com/css2?family=Oswald&family=Raleway&display=swap');

.page {background: #fff;}
.strip > div {}
.strip > div > div {max-width: 1200px; min-width: 300px; margin: 0 auto;}
.strip > div > div > div {padding: 30px 15px;}
.strip > div > div > div > div > :first-child {margin-top: 0;}
.strip > div > div > div > div > :last-child {margin-bottom: 0;}
.strip.strip-header {background: #111; height: 50vh; min-height: 400px; z-index: -100; background: url(../../../_images/_pages/helene/footstep.jpg) center center; background-size: cover;}
.strip.strip-header > div {height: 100%; background: linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.8)); position: relative;}
.strip.strip-header > div:after {content: "Illustration by Jim Fleri"; color: #eee; position: absolute; bottom: 4px; right: 10px; font-size: 12px;}
.strip.strip-header > div > div {height: 100%; padding: 0;}
.strip.strip-header > div > div > div {position: relative; height: 100%; padding: 0;}
.strip.strip-header > div > div > div > div {position: absolute; top: 50%; left: 20%; width: 80%; transform: translate(-12.5%, -50%); -ms-transform: translate(-12.5%, -50%); -webkit-transform: translate(-12.5%, -50%); text-align: center;}
.strip.strip-header > div > div > div > div h1 {color: #fff; font-family: "Oswald"; font-size: 2.4em; line-height: 1.1em; text-shadow: 2px 4px 4px #222, -2px -2px 4px #222;}
.strip.strip-header > div > div > div > div > .image-single {margin-top: 80px;}
.strip.strip-header > div > div > div > div > .image-single img {margin-inline: auto; max-width: 120px;}

.strip.strip-intro {background: #f7ebd3;}
.strip.strip-intro > div {}
.strip.strip-intro > div > div {}
.strip.strip-intro > div > div > div {font-family: "Raleway";}
.strip.strip-intro > div > div > div .jump-links {list-style: none; padding: 0; text-align: center; margin-top: 2em;}
.strip.strip-intro > div > div > div .jump-links > li > a {display: inline-block; background: #fc0; color: #222; text-decoration: none; padding: 5px 15px; border: 1px solid #fc0; border-radius: 5px;}
.strip.strip-intro > div > div > div .jump-links > li > a:link {background: #fc0; border-color: #fc0; color: #222;}
.strip.strip-intro > div > div > div .jump-links > li > a:visited {background: #fc0; border-color: #fc0; color: #222;}
.strip.strip-intro > div > div > div .jump-links > li > a:active {background: #fc0; border-color: #fc0; color: #222;}
.strip.strip-intro > div > div > div .jump-links > li > a:hover {background: #fff; border-color: #222; color: #222;}
.strip.strip-intro > div > div > div .evideos {border-bottom:0; margin-bottom: -160px; padding-bottom: 0;}
.strip.strip-intro > div > div > div .evideos .evideos-embed:first-child {border-top: 0;}
.strip.strip-intro > div > div > div .evideos .evideos-embed > div {border-bottom: 6px solid #fc0;}
.strip.strip-intro > div > div > div .evideos .evideos-description {color: #fff;}

.strip.strip-stats {background: #222;}
.strip.strip-stats > div {}
.strip.strip-stats > div > div {}
.strip.strip-stats > div > div > div {font-family: "Raleway"; color: #fff; padding-top: 180px;}
.strip.strip-stats > div > div > div h2 {font-family: "Oswald"; border-bottom-color: #888; color: #fff;}
.strip.strip-stats > div > div > div a {color: #fc0;}
.strip.strip-stats > div > div > div a:link {color: #fc0;}
.strip.strip-stats > div > div > div a:visited {color: #fc0;}
.strip.strip-stats > div > div > div a:active {color: #fc0;}
.strip.strip-stats > div > div > div a:hover {color: #fc0;}
.strip.strip-stats > div > div > div .stats {display: grid; grid-template-columns: repeat(1, 1fr); grid-gap: 15px; margin-top: 30px;}
.strip.strip-stats > div > div > div .stats .stat-block {background: #111; border: 1px solid #444; color: #fff; border-radius: 15px; text-align: center; padding: 30px;}
.strip.strip-stats > div > div > div .stats .stat-block span {font-family: "Oswald"; font-size: 3em; color: #fc0; line-height: normal; margin-bottom: 10px; display: block;}
.strip.strip-stats > div > div > div .stats .stat-block a {color: #fc0;}
.strip.strip-stats > div > div > div .stats .stat-block a:link {color: #fc0;}
.strip.strip-stats > div > div > div .stats .stat-block a:visited {color: #fc0;}
.strip.strip-stats > div > div > div .stats .stat-block a:active {color: #fc0;}
.strip.strip-stats > div > div > div .stats .stat-block a:hover {color: #fc0;}

.strip.strip-research {}
.strip.strip-research > div {}
.strip.strip-research > div > div {}
.strip.strip-research > div > div > div {font-family: "Raleway";}
.strip.strip-research > div > div > div h2 {font-family: "Oswald"; border-bottom-color: #444;}
.strip.strip-research > div > div > div h3 {font-family: "Oswald"; border-bottom-color: #444;}
.strip.strip-research > div > div > div .research-btns {display: flex; gap: 10px; flex-wrap: wrap;}
.strip.strip-research > div > div > div .research-btns > a {display: inline-block; padding: 5px 15px; border: 1px solid #fc0; border-radius: 5px; color: #222; background: #fc0; text-decoration: none;}
.strip.strip-research > div > div > div .research-btns > a:link {border-color: #fc0; color: #222; background: #fc0; text-decoration: none;}
.strip.strip-research > div > div > div .research-btns > a:visited {border-color: #fc0; color: #222; background: #fc0; text-decoration: none;}
.strip.strip-research > div > div > div .research-btns > a:active {border-color: #fc0; color: #222; background: #fc0; text-decoration: none;}
.strip.strip-research > div > div > div .research-btns > a:hover {border-color: #222; color: #222; background: #fff; text-decoration: none;}
.strip.strip-research > div > div > div .boxes > div > div {background: #f7ebd3;}
.strip.strip-research > div > div > div .boxes > div > div > div > div .boxes-text > div .boxes-title {font-family: "Oswald"; font-size: 1.4em;}
.strip.strip-research > div > div > div .boxes > div > div > div > div .boxes-text > div .boxes-teaser {font-family: "Raleway"; margin-top: 10px;}
.strip.strip-research > div > div > div .boxes > div > div > div > div .boxes-text > div .boxes-more a {background: #fc0; border-color: #fc0; color: #222;}
.strip.strip-research > div > div > div .boxes > div > div > div > div .boxes-text > div .boxes-more a:link {background: #fc0; border-color: #fc0; color: #222;}
.strip.strip-research > div > div > div .boxes > div > div > div > div .boxes-text > div .boxes-more a:visited {background: #fc0; border-color: #fc0; color: #222;}
.strip.strip-research > div > div > div .boxes > div > div > div > div .boxes-text > div .boxes-more a:active {background: #fc0; border-color: #fc0; color: #222;}
.strip.strip-research > div > div > div .boxes > div > div > div > div .boxes-text > div .boxes-more a:hover {background: #fff; border-color: #222; color: #222;}

.strip.strip-outreach {}
.strip.strip-outreach > div {}
.strip.strip-outreach > div > div {}
.strip.strip-outreach > div > div > div {font-family: "Raleway";}
.strip.strip-outreach > div > div > div h2 {font-family: "Oswald"; border-bottom-color: #444;}
.strip.strip-outreach > div > div > div h3 {font-family: "Oswald"; border-bottom-color: #444;}
.strip.strip-outreach > div > div > div .outreach-list {display: grid; grid-gap: 15px; grid-template-columns: repeat(1, 1fr);}
.strip.strip-outreach > div > div > div .egalleries {max-width: 999px; margin: 30px auto;}
.strip.strip-outreach > div > div > div .egalleries .egalleries-caption {font-size: 1em; line-height: 1.7em;}
.strip.strip-outreach > div > div > div .boxes {margin: 0;}
.strip.strip-outreach > div > div > div .boxes > div > div {}
.strip.strip-outreach > div > div > div .boxes > div > div > div > div .boxes-text > div .boxes-title {font-family: "Oswald"; font-size: 1.4em;}
.strip.strip-outreach > div > div > div .boxes > div > div > div > div .boxes-text > div .boxes-subtitle {font-family: "Oswald"; font-size: 1em; margin-top: 10px;}
.strip.strip-outreach > div > div > div .boxes > div > div > div > div .boxes-text > div .boxes-subtitle .highlight {color: #09f;}
.strip.strip-outreach > div > div > div .boxes > div > div > div > div .boxes-text > div .boxes-teaser {font-family: "Raleway"; font-size: .7em; margin-top: 10px;}
.strip.strip-outreach > div > div > div .boxes > div > div > div > div .boxes-text > div .boxes-more a {background: #fc0; border-color: #fc0; color: #222;}
.strip.strip-outreach > div > div > div .boxes > div > div > div > div .boxes-text > div .boxes-more a:link {background: #fc0; border-color: #fc0; color: #222;}
.strip.strip-outreach > div > div > div .boxes > div > div > div > div .boxes-text > div .boxes-more a:visited {background: #fc0; border-color: #fc0; color: #222;}
.strip.strip-outreach > div > div > div .boxes > div > div > div > div .boxes-text > div .boxes-more a:active {background: #fc0; border-color: #fc0; color: #222;}
.strip.strip-outreach > div > div > div .boxes > div > div > div > div .boxes-text > div .boxes-more a:hover {background: #fff; border-color: #222; color: #222;}
.strip.strip-outreach > div > div > div .boxes > div > div > div > div .boxes-text > div .boxes-more-2 {font-size: 0.9em;}
.strip.strip-outreach > div > div > div .boxes > div > div > div > div .boxes-text > div .boxes-more-2 a {display: inline-block; background: #fc0; color: #222; text-decoration: none; padding: 5px 15px; border: 1px solid #fc0; border-radius: 5px;}
.strip.strip-outreach > div > div > div .boxes > div > div > div > div .boxes-text > div .boxes-more-2 a:link {background: #fc0; border-color: #fc0; color: #222;}
.strip.strip-outreach > div > div > div .boxes > div > div > div > div .boxes-text > div .boxes-more-2 a:visited {background: #fc0; border-color: #fc0; color: #222;}
.strip.strip-outreach > div > div > div .boxes > div > div > div > div .boxes-text > div .boxes-more-2 a:active {background: #fc0; border-color: #fc0; color: #222;}
.strip.strip-outreach > div > div > div .boxes > div > div > div > div .boxes-text > div .boxes-more-2 a:hover {background: #fff; border-color: #222; color: #222;}

.strip.strip-events {background: #f7ebd3;}
.strip.strip-events > div {}
.strip.strip-events > div > div {}
.strip.strip-events > div > div > div {}
.strip.strip-events > div > div > div h2 {font-family: "Oswald"; border-bottom-color: #444;}
.strip.strip-events > div > div > div h3 {font-family: "Oswald"; border-bottom-color: #444;}
.strip.strip-events > div > div > div .event-list {display: grid; grid-gap: 15px; grid-template-columns: repeat(1, 1fr);}
.strip.strip-events > div > div > div .boxes {margin: 0;}
.strip.strip-events > div > div > div .boxes:first-child {margin-top: 0;}
.strip.strip-events > div > div > div .boxes:last-child {margin-bottom: 0;}
.strip.strip-events > div > div > div .boxes > div {}
.strip.strip-events > div > div > div .boxes > div > div {}
/* .strip.strip-events > div > div > div .boxes > div > div > div {display: table; width: 100%; table-layout: fixed;}
.strip.strip-events > div > div > div .boxes > div > div > div > div {display: table-row; width: 100%;}
.strip.strip-events > div > div > div .boxes > div > div > div > div .boxes-images {display: table-cell; width: 40%; vertical-align: top;}
.strip.strip-events > div > div > div .boxes > div > div > div > div .boxes-images > div {padding: 0;}
.strip.strip-events > div > div > div .boxes > div > div > div > div .boxes-text {display: table-cell; width: 60%; vertical-align: middle;} */
.strip.strip-events > div > div > div .boxes > div > div > div > div .boxes-text > div {}
.strip.strip-events > div > div > div .boxes > div > div > div > div .boxes-text > div .boxes-text-left > div .boxes-date-01 {background: #fc0; color: #222;}
.strip.strip-events > div > div > div .boxes > div > div > div > div .boxes-text > div .boxes-title {font-family: "Oswald"; font-size: 1.4em;}
.strip.strip-events > div > div > div .boxes > div > div > div > div .boxes-text > div .boxes-subtitle {font-family: "Oswald"; font-size: 1em; margin-top: 10px;}
.strip.strip-events > div > div > div .boxes > div > div > div > div .boxes-text > div .boxes-subtitle .highlight {color: #09f;}
.strip.strip-events > div > div > div .boxes > div > div > div > div .boxes-text > div .boxes-teaser {font-family: "Raleway"; font-size: .7em; margin-top: 10px;}
.strip.strip-events > div > div > div .boxes > div > div > div > div .boxes-text > div .boxes-teaser .button {font-size: 1.1em; text-align: center;}
.strip.strip-events > div > div > div .boxes > div > div > div > div .boxes-text > div .boxes-teaser .button a {display: inline-block; padding: 5px 15px; border: 1px solid #07d; border-radius: 5px; background: #07d; color: #fff; font-family: "Open Sans", sans-serif;}
.strip.strip-events > div > div > div .boxes > div > div > div > div .boxes-text > div .boxes-teaser .button a:link {color: #fff; text-decoration: none;}
.strip.strip-events > div > div > div .boxes > div > div > div > div .boxes-text > div .boxes-teaser .button a:visited {color: #fff;}
.strip.strip-events > div > div > div .boxes > div > div > div > div .boxes-text > div .boxes-teaser .button a:active {color: #fff;}
.strip.strip-events > div > div > div .boxes > div > div > div > div .boxes-text > div .boxes-teaser .button a:hover {color: #07d; background: #fff; text-decoration: none;}
.strip.strip-events > div > div > div .boxes > div > div > div > div .boxes-text > div .boxes-more a {background: #fc0; border-color: #fc0; color: #222;}
.strip.strip-events > div > div > div .boxes > div > div > div > div .boxes-text > div .boxes-more a:link {background: #fc0; border-color: #fc0; color: #222;}
.strip.strip-events > div > div > div .boxes > div > div > div > div .boxes-text > div .boxes-more a:visited {background: #fc0; border-color: #fc0; color: #222;}
.strip.strip-events > div > div > div .boxes > div > div > div > div .boxes-text > div .boxes-more a:active {background: #fc0; border-color: #fc0; color: #222;}
.strip.strip-events > div > div > div .boxes > div > div > div > div .boxes-text > div .boxes-more a:hover {background: #fff; border-color: #222; color: #222;}
.strip.strip-events > div > div > div .boxes > div > div > div > div .boxes-text > div .image-single {display: none;}

@media all and (min-width: 480px) {
  .strip.strip-header > div > div > div > div h1 {font-size: 2.7em;}
  .strip.strip-intro > div > div > div .jump-links {display: flex; flex-wrap: wrap; justify-content: center; gap: 15px;}
}

@media all and (min-width: 600px) {
  .strip.strip-events > div > div > div .boxes > div > div > div > div .boxes-text > div .boxes-title {font-size: 1.6em;}
  .strip.strip-events > div > div > div .boxes > div > div > div > div .boxes-text > div .boxes-subtitle {font-size: 1.1em;}
  .strip.strip-events > div > div > div .boxes > div > div > div > div .boxes-text > div .boxes-teaser {font-size: .8em;}
  .strip.strip-stats > div > div > div .stats {grid-template-columns: repeat(2, 1fr);}
  .strip.strip-outreach > div > div > div .outreach-list {grid-template-columns: repeat(2, 1fr);}
  .strip.strip-events > div > div > div .event-list {grid-template-columns: repeat(2, 1fr);}
}

@media all and (min-width: 700px) {
  .strip.strip-header > div > div > div > div h1 {font-size: 3em;}
}

@media all and (min-width: 800px) {
  .strip.strip-header {height: 55vh;}
  .strip.strip-header > div > div > div > div h1 {font-size: 3.4em;}
  .strip.strip-outreach > div > div > div .outreach-list {display: grid; grid-gap: 15px; grid-template-columns: repeat(4, 1fr);}
  .strip.strip-events {}
  .strip.strip-events > div > div {}
  .strip.strip-events > div > div > div {}
  .strip.strip-events > div > div > div .event-list {display: grid; grid-gap: 15px; grid-template-columns: repeat(4, 1fr);}
  .strip.strip-events > div > div > div .boxes {margin: 0;}
  .strip.strip-events > div > div > div .boxes > div {}
  .strip.strip-events > div > div > div .boxes > div > div {}
  .strip.strip-events > div > div > div .boxes > div > div > div {display: block;}
  .strip.strip-events > div > div > div .boxes > div > div > div > div {display: block; width: 100%;}
  .strip.strip-events > div > div > div .boxes > div > div > div > div .boxes-images {display: block; width: 100%;}
  .strip.strip-events > div > div > div .boxes > div > div > div > div .boxes-images > div {padding: 0;}
  .strip.strip-events > div > div > div .boxes > div > div > div > div .boxes-text {display: block; width: 100%;}
  .strip.strip-events > div > div > div .boxes > div > div > div > div .boxes-text > div {}
  .strip.strip-events > div > div > div .boxes > div > div > div > div .boxes-text > div .boxes-title {font-size: 1.4em;}
  .strip.strip-events > div > div > div .boxes > div > div > div > div .boxes-text > div .boxes-subtitle {font-size: 1em;}
  .strip.strip-events > div > div > div .boxes > div > div > div > div .boxes-text > div .boxes-teaser {font-size: .8em;}
  .strip.strip-events > div > div > div .boxes > div > div > div > div .boxes-text > div .image-single {display: block;}
}

@media all and (min-width: 950px) {
  .strip > div > div > div {padding: 60px 30px;}
  .strip.strip-header {height: 60vh;}
  .strip.strip-header > div > div > div > div h1 {font-size: 5em;}
  .strip.strip-header > div > div > div > div > .image-single img {max-width: 150px;}
  .strip.strip-stats > div > div > div .stats {grid-template-columns: repeat(4, 1fr);}
  .strip.strip-events > div > div > div .boxes > div > div > div > div .boxes-text > div .boxes-title {font-size: 1.6em;}
}
