@keyframes virus1 {
  0% {
    transform: scale(1) rotate(0deg);
  }
  50% {
    transform: scale(0.6) rotate(180deg);
  }
  100% {
    transform: scale(1) rotate(360deg);
  }
}
@keyframes virus2 {
  0% {
    transform: scale(0.8) rotate(90deg);
  }
  50% {
    transform: scale(1.2) rotate(270deg);
  }
  100% {
    transform: scale(0.8) rotate(450deg);
  }
}
@keyframes virus3 {
  0% {
    transform: scale(0.5) rotate(180deg);
  }
  50% {
    transform: scale(0.9) rotate(360deg);
  }
  100% {
    transform: scale(0.5) rotate(540deg);
  }
}
:root {
  --back: #2D2D2D;
  --fore: #DDD;
  --black: #000;
  --white: #FFF;
  --light-gray: #838182;
  --dark-gray: #202020;
  --red: #FD0613;
}
html,
body {
  overflow-x: hidden;
  max-width: 100vw;
  background-color: var(--back);
  color: var(--fore);
}
.grid-h {
  display: grid;
  justify-content: center;
  overflow: hidden;
  grid-template-columns: repeat(2, 550px);
  grid-auto-rows: 1fr;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  padding: 20px;
}
.flex-h {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  margin: auto;
  max-width: 1260px;
}
.grid-item {
  width: 100%;
  max-width: 550px;
  padding: 5px;
}
@media screen and (min-width: 300px) {
  .grid-item {
    padding: calc(5px  +  15  * ((100vw -  300px ) / 900 ));
  }
}
@media screen and (min-width: 1200px) {
  .grid-item {
    padding: 20px;
  }
}
#splash {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 150px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
#splash h1 {
  text-transform: uppercase;
  color: var(--light-gray);
  font-weight: 800;
  font-size: 30px;
  line-height: 0.85;
}
@media screen and (min-width: 300px) {
  #splash h1 {
    font-size: calc(30px  +  40  * ((100vw -  300px ) / 900 ));
  }
}
@media screen and (min-width: 1200px) {
  #splash h1 {
    font-size: 70px;
  }
}
#splash h1 span {
  color: var(--red);
}
#splash .img {
  position: relative;
  width: 150px;
  height: 90px;
}
#splash .img img {
  position: absolute;
  width: 100px;
  animation: virus1 150s linear infinite;
}
#splash .img img:nth-child(2) {
  top: -60px;
  left: -85px;
  transform: scale(0.8) rotate(90deg);
  animation: virus2 120s linear infinite;
}
#splash .img img:nth-child(3) {
  top: 60px;
  left: -115px;
  transform: scale(0.5) rotate(180deg);
  animation: virus3 100s linear infinite;
}
navbar {
  display: flex !important;
  position: initial !important;
  color: var(--fore);
  background-color: var(--red);
  text-transform: uppercase;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
navbar rightalign {
  display: initial !important;
  position: initial !important;
  height: auto !important;
}
navbar .scroll_links {
  display: flex;
  width: calc(100% - 150px);
  text-align: center;
}
navbar button {
  display: none;
  margin: 0 15px;
  padding: 5px 15px;
  font-size: 17px;
  border: none;
  color: var(--fore);
  background-color: transparent;
  transition: color 500ms, border-color 500ms, background-color 500ms;
  cursor: pointer;
}
navbar button:hover,
navbar button:active,
navbar button:focus {
  color: var(--back);
}
navbar ul {
  list-style: none;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: 50px;
  width: 100%;
  text-align: left;
  font-size: 17px;
  overflow: hidden;
  transition: height 500ms;
  z-index: 9999999;
}
navbar li {
  margin: 0 10px;
  cursor: pointer;
  transition: color 300ms;
}
navbar li:hover {
  color: var(--black);
}
navbar a {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fore);
  transition: color 500ms;
  width: 100%;
  height: 100%;
}
navbar a:visited {
  color: var(--fore);
}
navbar a:hover,
navbar a:active,
navbar a:focus {
  color: var(--black);
}
.social_link {
  display: flex;
  width: 65px;
}
.social_link.right {
  text-align: right;
  margin-right: 20px;
}
.social_link.right a {
  padding: 0 10px;
}
#support,
.sup {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;
  width: 100%;
  background-color: var(--black);
}
.moreButton {
  margin: 25px 0;
}
.whiteframe iframe {
  padding: 10px;
  background-color: var(--white);
  width: calc(100% - 20px);
}
.vid {
  position: relative;
  overflow: hidden;
  padding-top: 56.25%;
  width: 100%;
  max-width: 600px;
}
.vid img,
.vid iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-height: 337.5px;
  cursor: pointer;
  transition: opacity 300ms;
}
.dans-line {
  width: 100%;
  height: 30px;
  margin-bottom: 20px;
  background: repeating-linear-gradient(-45deg, var(--dark-gray), var(--dark-gray) 9px, var(--back) 9px, var(--back) 18px);
}
#promo2 {
  position: relative;
  width: 100%;
  margin: 40px 0;
  padding: 40px 0;
  background: repeating-linear-gradient(-45deg, var(--dark-gray), var(--dark-gray) 9px, var(--back) 9px, var(--back) 18px);
}
#promo2 a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#promo2 img {
  max-width: 700px;
}
.story {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  max-width: 1260px;
  margin: auto;
}
.story > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(50% - 40px);
  padding: 5px;
  padding: 20px;
  min-width: 300px;
  max-width: 1200px;
  max-height: 375px;
}
@media screen and (min-width: 300px) {
  .story > div {
    padding: calc(5px  +  15  * ((100vw -  300px ) / 900 ));
  }
}
@media screen and (min-width: 1200px) {
  .story > div {
    padding: 20px;
  }
}
.story > div h2 {
  transform: translateY(12px);
  max-width: 600px;
}
.sticky {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  transform: translateY(-100%);
  transition: transform 500ms;
  z-index: 9999999;
  overflow: hidden;
}
.sticky.open {
  transform: translateY(0%) !important;
  overflow: visible;
}
.sticky.sup {
  top: 50px;
  transform: translateY(-300%);
  z-index: 999999;
}
#photos {
  min-height: 350px;
}
#latest p,
#past p,
#kind-stories p,
#meds-stories p,
#edu-stories p {
  margin-top: 10px;
  margin-bottom: 0;
}
#latest .teaser,
#past .teaser,
#kind-stories .teaser,
#meds-stories .teaser,
#edu-stories .teaser {
  display: none;
  margin-top: 0;
  font-weight: 100;
  font-style: italic;
  margin-bottom: 10px;
}
#covid-faces {
  position: relative;
  margin-bottom: 20px;
}
#covid-faces a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}
#covid-faces img {
  width: 100%;
}
#covid-faces h2 {
  font-family: 'Martel';
  font-size: 20px;
}
@media screen and (min-width: 300px) {
  #covid-faces h2 {
    font-size: calc(20px  +  23  * ((100vw -  300px ) / 250 ));
  }
}
@media screen and (min-width: 550px) {
  #covid-faces h2 {
    font-size: 43px;
  }
}
#covid-faces p {
  font-size: 13.8px;
}
@media screen and (min-width: 300px) {
  #covid-faces p {
    font-size: calc(13.8px  +  14.2  * ((100vw -  300px ) / 250 ));
  }
}
@media screen and (min-width: 550px) {
  #covid-faces p {
    font-size: 28px;
  }
}
#covid-faces .texty-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#covid-frontline {
  position: relative;
}
#covid-frontline a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}
@media (max-width: 570px) {
  .grid-item {
    width: calc(100% - 10px);
  }
  .grid-item:not(.wide) iframe.hype-manager {
    width: 550px !important;
  }
  .grid-item {
    text-align: center;
    padding: 0;
  }
  .grid-item.whiteframe {
    margin-left: -5px;
  }
  .container {
    text-align: center;
  }
  .moreButton {
    margin: 25px auto;
  }
  .story > div {
    padding: 0;
  }
  #latest p,
  #kind-stories p,
  #meds-stories p,
  #edu-stories p {
    text-align: left;
    padding: 0 10px;
  }
}
#resource-guide {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 550px;
  padding: 20px;
  overflow: hidden;
  margin-top: -100px;
  padding-top: 120px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
#resource-list {
  max-height: 702px;
  overflow-y: auto;
  overflow-x: hidden;
  border-bottom: solid 3px var(--red);
  margin-bottom: 20px;
}
#resource-list h4 {
  margin-bottom: 0;
  font-size: 20px;
  text-transform: uppercase;
}
#resource-list ul {
  list-style: inside;
  text-align: left;
}
#resource-list ul li {
  color: var(--fore);
  transition: color 300ms;
}
#resource-list ul li:hover,
#resource-list ul li:active,
#resource-list ul li:focus {
  color: var(--red);
}
.res-link {
  margin: 10px;
  transition: color 300ms;
  cursor: pointer;
}
.res-link:hover {
  color: var(--black);
}
.res-link a {
  width: 100%;
  height: 100%;
  line-height: 1.2;
}
navbar {
  z-index: 9999999;
}
navbar button {
  display: initial;
}
navbar ul:nth-child(2) {
  flex-direction: column;
  align-items: flex-start;
  position: absolute;
  left: 0;
  width: 100%;
  max-height: 500px;
  height: 700px;
  margin-top: 50px;
  background-color: var(--red);
  z-index: 9999999;
}
navbar ul:nth-child(2).collapsed {
  height: 0;
}
navbar ul:nth-child(2) li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  margin: 0;
  text-align: center;
}
#container.whiteframe {
  overflow: hidden;
}
@media (max-width: 1220px) {
  .story > div {
    width: 100%;
  }
  #latest .teaser,
  #past .teaser,
  #kind-stories .teaser,
  #meds-stories .teaser,
  #edu-stories .teaser {
    display: inline;
  }
}
@media (max-width: 1179px) {
  .grid-item.wide {
    text-align: center;
    max-width: unset;
  }
}
.tableauPlaceholder {
  position: unset !important;
  width: unset !important;
  height: unset !important;
}