@import url(//fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,700,800);
@import url(//fonts.googleapis.com/css?family=Alfa+Slab+One);
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  position: relative;
}

body {
  margin: 0;
  animation: contentFade 0.5s cubic-bezier(.79, .65, .64, .96) both;
}

footer {
  width: 100%;
  padding-bottom: 3vw;
}

.light .rule {
  background-color: #303030;
}

.light h3, .light p {
  color: #303030;
}

.footer-content {
  padding-top: 1.5%;
}

.container {
  display: grid;
  padding: 3vw 3vw 0 3vw;
  grid-template-columns: repeat(10, 1fr);
  grid-gap: 3vw;
}

.container.top-padding {
  padding-top: 1vw;
}

.intro {
  padding-bottom: 2%;
  font-size: 5.5vw;
}

.main {
  background-color: #303030;
}

.individual {
  justify-items: left;
}

.menu {
  background-color: #ed1c24;
  height: 0%;
  z-index: 1;
}

.resources {
  background-color: #ed1c24;
}

.about {
  background-color: white;
}

.col-1 {
  grid-column: 1/3;
  position: relative;
  overflow: hidden;
}

.col-2 {
  grid-column: 3/5;
  position: relative;
  overflow: hidden;
}

.col-3 {
  height: auto;
  grid-column: 5/7;
  position: relative;
  overflow: hidden;
}

.col-4 {
  height: auto;
  grid-column: 7/9;
  position: relative;
  overflow: hidden;
}

.col-5 {
  height: auto;
  grid-column: 9/11;
  position: relative;
  overflow: hidden;
}

.col-2-3, .about {
  grid-column: 3 / 7;
}

.col-1-5 {
  grid-column: 1 / 11;
}

.col-1-3 {
  grid-column: 1 / 7;
}

.col-4-5 {
  grid-column: 7 / 11;
  position: relative;
  overflow: hidden;
}

.col-2-5, .contact {
  grid-column: 3 / 11;
}

.copyright {
  text-align: right;
  align-self: end;
}

.artist-two {
  width: 50%;
  float: left;
}

.image-chunk-title {
  position: absolute;
  width: 17vw;
  padding-top: 3vw;
}

#myNav {
  z-index: 5;
  right: -100%;
}

#myNav.active {
  right: 0;
}

.menu-link {
  padding-bottom: 0.125rem;
}

.menu-link a {
  position: relative;
  padding-bottom: 0.125rem;
}

.menu-link a::after {
  content: " ";
  width: 0;
  height: 0.3125rem;
  position: absolute;
  bottom: 0;
  right: 0;
  background: #ffffff;
  transition: 0.25s cubic-bezier(.79, .65, .64, .96);
}

.menu-link a::before {
  content: " ";
  width: 0;
  height: 0.3125rem;
  position: absolute;
  bottom: 0;
  left: 0;
  background: #ffffff;
  transition: 0.25s cubic-bezier(.79, .65, .64, .96);
}

.overlay {
  height: 100%;
  width: 50%;
  position: fixed;
  z-index: 1;
  top: 0;
  overflow-y: hidden;
  transition: 0.5s cubic-bezier(.79, .65, .64, .96);
}

.menuBar {
  background-color: #ed1c24;
  width: 100%;
  height: 100%;
  margin-left: auto;
}

.menuBar h3 {
  color: #ffffff;
}

img.placeholder {
  opacity: 0;
  transition: opacity 0.25s cubic-bezier(.79, .65, .64, .96);
}

img.placeholder.loaded {
  opacity: 1;
}

.themeContent {
  width: 100%;
  background-color: #ed1c24;
  position: absolute;
  height: 50%;
  bottom: 0;
  transform: translateY(101%);
  -webkit-transition: transform 0.5s;
  transition: transform 0.5s;
}

/* hover effect only on desktop */

@media (hover: hover) and (pointer: fine) {
  .themeMain:hover .themeContent {
    transform: translateY(0);
  }
  button:hover {
    color: #ed1c24;
  }
  button:hover::after {
    top: auto;
    bottom: 0;
    height: 100%;
  }
  .menu-link a:hover::after {
    width: 100%;
    right: unset;
    left: 0;
  }
  .menu-link a:hover::before {
    width: 100%;
    left: unset;
    right: 0;
  }
}

.rule-container {
  width: 100%;
}

.rule {
  height: 0.5rem;
  background-color: white;
  width: 100%;
}

.light .rule {
  background-color: #303030;
}

.caption-line {
  position: relative;
}

.main.home .caption-line {
  background-color: #303030;
}

.main .caption-line::after, .main .caption-line::before {
  background: #ffffff;
}

.caption-line::after {
  content: " ";
  width: 0;
  height: 0.5rem;
  position: absolute;
  bottom: 0;
  right: 0;
  animation: strokeRight 0.65s cubic-bezier(.79, .65, .64, .96) 0.75s forwards;
}

.main.home .caption-line.initialized, .main.project .caption-line {
  background-color: #ffffff;
}

.caption-line::before {
  content: " ";
  width: 0;
  height: 0.5rem;
  position: absolute;
  bottom: 0;
  left: 0;
  animation: strokeLeft 0.65s cubic-bezier(.79, .65, .64, .96) 0.75s forwards;
}

.section img {
  width: 100%;
  height: auto;
}

.swipe {
  display: none;
}

a.image {
  display: grid;
}

.link-arrow .arrow-container {
  display: inline;
  height: 1.5rem;
  width: 1.5rem;
  margin-left: 0.125rem;
}

.light .link-arrow .arrow-container .arrow-icon {
  stroke: #303030;
}

.main .link-arrow .arrow-container .arrow-icon {
  stroke: #ffffff;
}

.link-arrow .arrow-container .arrow-icon {
  transform: scale(1.35);
}

.link-arrow .arrow-icon .arrow-base {
  stroke-dasharray: 10;
  stroke-dashoffset: 0;
  transition: all 0.125s cubic-bezier(.79, .65, .64, .96);
}

a.link-arrow:hover .arrow-icon .arrow-base {
  stroke-dashoffset: -10;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

ul.logos {
  display: flex;
  justify-content: space-between;
}

ul.themes {
  padding-bottom: 1.5rem;
}

li.menu-item {
  padding-bottom: 0.6125rem;
}

.logos img {
  max-width: 18vw;
  float: left;
  margin-right: 30px;
  text-decoration: none;
}

.logos-horizontal img {
  max-height: 6vw;
  width: auto;
}

img.half {
  width: 50%;
  float: left;
}

img.third {
  width: 33%;
  float: left;
}

.right {
  float: right !important;
}

img.two-thirds {
  width: 66%;
  float: left;
}

.feature img, img.feature {
  width: 75%;
}

.themeTitle, .themeCollaborators {
  padding: 10px;
}

.menuItems {
  padding: 6rem 6vw 0 6vw;
}

.menuItems a {
  display: inline-block;
}

.themeCollaborators {
  position: absolute;
  bottom: -1rem;
}

.intro, h1, h3, #topNavH {
  font-family: "Alfa Slab One", cursive;
  font-weight: 100;
}

.intro, h1 {
  line-height: 1.2;
  margin: 0;
  padding: 0;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.header-img-container, .line-container {
  overflow: hidden;
}

.header-img-container {
  height: 30vw;
  position: relative;
}

.header-img-container img {
  width: 96vw;
}

.line-container .line {
  display: block;
  transform: translateY(100%);
}

.line-container.active .line {
  animation: rise 0.35s cubic-bezier(.79, .65, .64, .96) forwards 0.1s;
}

.line-container.inactive .line {
  animation: fall 0.25s cubic-bezier(.79, .65, .64, .96) forwards;
}

h1 {
  font-size: 3.5rem;
}

.light .red, .red {
  color: #ed1c24;
}

.main-quote {
  margin-bottom: 1.25rem;
}

.white {
  color: white;
}

.grey {
  color: #303030;
}

h3 {
  font-size: 1.1875rem;
  font-family: "Alfa Slab One", cursive;
  margin: 0;
  font-weight: 100;
  color: #ffffff;
}

#topNavH {
  font-size: 1.3125vw;
  line-height: 1.2;
}

.main #topNavH {
  color: white;
}

.light #topNavH {
  color: #303030;
}

h4 {
  font-family: "Alfa Slab One", cursive;
  font-size: 0.625rem;
  color: #303030;
  margin: 0;
  font-weight: 100;
}

a {
  text-decoration: none;
  color: white;
}

.logo {
  width: 100%;
  display: inline-block;
  justify-self: right;
}

.clear {
  clear: both;
  width: 100%;
}

button {
  position: relative;
  font-family: "Alfa Slab One", cursive;
  background-color: #ed1c24;
  padding: 5px;
  color: white;
  text-decoration: none;
  font-weight: 100;
  min-width: 150px;
  border: none;
  font-size: 0.875rem;
  z-index: 1;
}

button::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background-color: #ffffff;
  transition: 0.25s cubic-bezier(.79, .65, .64, .96);
}

p, .name {
  font-family: "Open Sans", sans-serif;
  font-size: 0.9375rem;
  font-weight: 400;
  color: #ffffff;
  margin: 0;
}

p strong, .name {
  font-size: 1rem;
}

.footer-content .red {
  font-family: "Alfa Slab One", cursive;
}

.name {
  display: block;
  margin-bottom: 0.25rem;
}

.name.top {
  margin: 0.5rem 0 0;
}

mark {
  font-family: "Alfa Slab One", cursive;
  text-decoration: none;
  background-color: transparent;
  color: white;
}

.content-text p:not(:last-child), .content-text h3:not(:last-child) {
  margin-bottom: 1rem;
}

.credits.content-text .half-left p {
  margin-bottom: 1rem;
}

.icon, img.social {
  width: 40px;
}

.hashtag {
  width: 600px;
}

.icon {
  float: right;
}

#menuIcon {
  opacity: 1;
  transition: 0.5s;
}

#menuButton {
  justify-self: end;
  z-index: 30;
  height: 2.8125rem;
}

#menu-burger {
  width: fit-content;
  padding-bottom: 1.25rem;
  overflow: hidden;
  right: 3vw;
}

#menu-burger.active {
  position: fixed;
}

.burger-line.top.active {
  animation: burgerTop 0.5s cubic-bezier(.79, .65, .64, .96) forwards;
}

.burger-line.bottom.active {
  animation: burgerBottom 0.5s cubic-bezier(.79, .65, .64, .96) forwards;
}

.burger-line.center.active {
  animation: burgerCenter 0.5s cubic-bezier(.79, .65, .64, .96) forwards;
}

.burger-line.top.inactive {
  animation: burgerTopReverse 0.5s cubic-bezier(.79, .65, .64, .96) forwards;
}

.burger-line.bottom.inactive {
  animation: burgerBottomReverse 0.5s cubic-bezier(.79, .65, .64, .96) forwards;
}

.burger-line.center.inactive {
  animation: burgerCenterReverse 0.5s cubic-bezier(.79, .65, .64, .96) forwards;
}

.burger-line {
  background-color: #ffffff;
  transform-origin: center;
}

.light .burger-line {
  background-color: #303030;
}

.burger-line.active {
  background-color: white;
}

.burger-line {
  width: 2.5rem;
  height: 0.375rem;
  margin-top: 0.3125rem;
  display: block;
}

.plogo {
  width: 100px;
  margin-right: 2em;
  margin-bottom: 1em;
}

.main .st0 {
  fill: #ffffff;
}

.light .st0 {
  fill: #303030;
}

.st1 {
  fill: #ed1c24;
}

.main .st2 {
  fill: #303030;
}

.light .st2 {
  fill: #ffffff;
}

.main .st3 {
  stroke: #ffffff;
}

.light .st3 {
  stroke: #303030;
}

.st3 {
  fill: none;
  stroke-width: 22;
  stroke-miterlimit: 10;
}

#e-vertical {
  position: relative;
  transform: translateY(-100%);
  animation: ani-e-vertical 1s cubic-bezier(.79, .65, .64, .96) 0.45s forwards;
}

#e-point {
  position: relative;
  transform: translateY(100%);
  animation: ani-e-point 1s cubic-bezier(.79, .65, .64, .96) 0.45s forwards;
}

#underline-line-1 {
  position: relative;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: uline 1s cubic-bezier(.79, .65, .64, .96) 0.5s forwards;
}

#underline-line-2 {
  position: relative;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: uline 2.4s cubic-bezier(.79, .65, .64, .96) 0.5s forwards;
}

.image-holder::-webkit-scrollbar, #indexAll::-webkit-scrollbar {
  display: none !important;
}

.theme-break {
  display: block;
}

#topNavLogo {
  align-self: center;
}

.flickr-container-parent {
  display: block;
}

.flickr-container {
  position: relative;
}

/* page transitions */

.fade-leave-to, .fade-enter {
  opacity: 0;
}

.fade-leave, .fade-enter-to {
  opacity: 1;
}

.fade-leave-active, .fade-enter-active {
  transition: opacity 0.25s cubic-bezier(.79, .65, .64, .96);
}

.about-leave-active, .about-enter-active, .about-leave-active #loadOverlay, .about-enter-active #loadOverlay {
  transition: transform 1s cubic-bezier(.79, .65, .64, .96);
}

.about-leave #loadOverlay {
  transform: translateY(100%);
  background-color: #ffffff !important;
  display: block !important;
}

.about-leave-to #loadOverlay {
  transform: translateY(0);
  background-color: #ffffff !important;
  display: block !important;
}

.about-enter #loadOverlay {
  transform: translateY(0);
  background-color: #ffffff !important;
  display: block !important;
}

.about-enter-to #loadOverlay {
  transform: translateY(-100%);
  background-color: #ffffff !important;
  display: block !important;
}

/*responsive stuff*/

@media (min-width: 2500px) {
  .about .credits {
    display: grid;
  }
  .half-left {
    grid-column: 1/6;
  }
  .half-right {
    grid-column: 6/11;
  }
}

@media (min-width: 1500px) {
  p {
    font-size: 1rem;
  }
  .logos img {
    max-width: 225px;
  }
  .logos-horizontal img {
    max-height: 100px;
  }
  .container {
    padding: 2rem 3vw 0 3vw;
    grid-gap: 2rem;
  }
  .name {
    margin-bottom: 0.375rem;
  }
}

@media (min-width: 1200px) and (max-width: 1499.98px) {
  p {
    font-size: 0.8125rem;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  p, p strong, .name {
    font-size: 0.8125rem;
  }
  h3 {
    font-size: 0.9375rem;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  p, p strong, .name {
    font-size: 0.8125rem;
  }
  h1 {
    font-size: 2.4375rem;
  }
  h3 {
    font-size: 0.9375rem;
  }
  #topNavLogo {
    grid-column: 1/4;
  }
  #topNavH {
    grid-column: 4/9;
    font-size: 1.8125vw;
  }
  .themeContent {
    height: 100%;
  }
  #footerButtons {
    grid-column: 7/11;
  }
  .themeMain {
    top: 0 !important;
    left: 0 !important;
  }
  .about .about-amplify {
    grid-column: 1/11;
    columns: 2;
  }
  .about .credits {
    grid-column: 1/11;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-gap: 3vw;
  }
  .half-left {
    grid-column: 1/6;
  }
  .half-right {
    grid-column: 6/11;
  }
  .credits.content-text .half-left p:last-child {
    margin-bottom: initial;
  }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  #topNavH {
    display: none;
  }
  .theme-break {
    display: inline;
  }
  .container {
    padding: 4vw 3vw 0 3vw;
  }
  .container.top-padding {
    padding-top: 2vw;
  }
  .intro {
    font-size: 5.5vw;
  }
  h1 {
    font-size: 2.25rem;
  }
  h3 {
    font-size: 1.125rem;
  }
  .themeContent {
    display: none;
  }
  #footerButtons {
    grid-column: 7/11;
  }
  #topNavLogo {
    grid-column: 1/4;
  }
  #topNavH {
    grid-column: 4/9;
  }
  .individual .col-1, .resources .col-1, .about .col-1, .about .contact, .col-2-5, .copyright {
    grid-column: 1/11;
  }
  .individual .col-2-3, .resources .col-2-3, .about .col-2-3 {
    grid-column: 1/6;
  }
  .about-short.col-2-3 {
    grid-column: 1/11;
  }
  .individual .col-4-5, .resources .col-4-5, .about .col-4-5 {
    grid-column: 6/11;
  }
  .individual .col-1.theme-collaborators {
    grid-column: 6/11;
    grid-row: 1;
    align-self: end;
  }
  .about .about-amplify {
    grid-column: 1/11;
    columns: 2;
  }
  .about .credits {
    grid-column: 1/11;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-gap: 3vw;
  }
  .half-left {
    grid-column: 1/6;
  }
  .half-right {
    grid-column: 6/11;
  }
  .credits.content-text .half-left p:last-child {
    margin-bottom: initial;
  }
  .image-chunk-title {
    position: initial;
    padding-top: 0;
    grid-column: 1/11;
    width: initial;
  }
  .theme-img {
    grid-row: 1;
  }
  .theme-quote {
    grid-row: 1;
    align-self: start;
  }
  .feature img, img.feature {
    width: 100%;
  }
  .logos img {
    max-width: 25vw;
    margin-right: 10px;
  }
  .logos-horizontal img {
    max-height: 9vw;
  }
  .themeMain {
    top: 0 !important;
    left: 0 !important;
  }
  .about .footer-content, .footer-content {
    grid-column: 1/11;
    text-align: center;
  }
  .about .copyright, .copyright {
    padding: 0;
    text-align: center;
  }
  .overlay {
    width: 100%;
  }
  .footer-grid {
    grid-gap: 2vw;
  }
}

/* mobile */

@media (max-width: 575.98px) {
  #indexAll, .image-holder {
    display: grid !important;
    grid-auto-flow: column !important;
    overflow: auto hidden !important;
    scroll-snap-type: x mandatory !important;
    gap: 3vw !important;
    grid-template-columns: none;
    margin: 0px -24px;
    width: 100%;
  }
  #indexAll {
    grid-auto-columns: calc(100% - 135px) !important;
  }
  .image-holder {
    grid-auto-columns: calc(100% - 75px) !important;
  }
  #indexAll:nth-child(n)>*, .image-holder:nth-child(n)>* {
    scroll-snap-align: start !important;
  }
  .intro {
    font-size: 5.75vw;
    line-height: 1.2;
  }
  .container {
    padding: 6vw 3vw 0 3vw;
    grid-gap: 6vw;
  }
  .container.top-padding {
    padding-top: 3vw;
  }
  .section, .individual .section, .about .section {
    grid-column: 1/11;
  }
  .about .credits {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-gap: 3vw;
  }
  .half-left {
    grid-column: 1/6;
  }
  .half-right {
    grid-column: 6/11;
  }
  .credits.content-text .half-left p:last-child {
    margin-bottom: initial;
  }
  .section.image-container, .main .themeMain {
    grid-column: auto !important;
  }
  .main .themeMain {
    padding: 3vw 0;
    margin-bottom: 0;
  }
  .image-chunk-title {
    position: initial;
    padding-top: 0;
    width: 100%;
  }
  .about .content-chunk, .individual .content-chunk {
    padding-bottom: 6vw;
  }
  .copyright {
    padding-top: 0;
    text-align: left;
  }
  .about .img-feature-container, .artist-two {
    padding-top: 3vw;
  }
  footer {
    padding-bottom: 6vw;
  }
  #topNavLogo {
    grid-column: 1/5;
  }
  #topNavH {
    display: none;
  }
  #menuButton {
    grid-column: 9/11;
  }
  #footerButtons {
    justify-self: left;
  }
  .feature img, img.feature {
    width: 100%;
  }
  .logos img {
    max-width: 34vw;
    margin-right: 10px;
  }
  .logos-horizontal img {
    max-height: 11vw;
  }
  .overlay {
    width: 100%;
  }
  h1 {
    font-size: 3rem;
  }
  .content-text p:not(:last-child), .content-text h3:not(:last-child) {
    margin-bottom: 3vw;
  }
  .header-img-container {
    height: initial;
  }
}

@media (max-width: 374.98px) {
  .footer-content h3 {
    font-size: 5.5vw;
  }
}

/* portrait orientation tablets */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
  #indexAll, .image-holder {
    display: grid !important;
    grid-auto-flow: column !important;
    overflow: auto hidden !important;
    scroll-snap-type: x mandatory !important;
    gap: 3vw !important;
    grid-template-columns: none;
    margin: 0px -24px;
    width: 100%;
  }
  #indexAll {
    grid-auto-columns: calc(100% - 135px) !important;
  }
  .image-holder {
    grid-auto-columns: calc(100% - 75px) !important;
  }
  #indexAll:nth-child(n)>*, .image-holder:nth-child(n)>* {
    scroll-snap-align: start !important;
  }
  .section.image-container, .main .themeMain {
    grid-column: auto !important;
  }
  .main .themeMain {
    padding: 3vw 0;
    margin-bottom: 0;
  }
  .header-img-container {
    height: initial;
  }
  .image-chunk-title {
    position: initial;
    padding-top: 0;
    grid-column: 1/11;
    width: 100%;
  }
}

/* animations */

@keyframes burgerTop {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(-45deg) translateY(0.375rem) translateX(-0.5625rem);
  }
}

@keyframes burgerCenter {
  0% {
    transform: translateX(0);
  }
  10% {
    transform: translateX(-102%);
  }
  100% {
    transform: translateX(-102%);
  }
}

@keyframes burgerBottom {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(-135deg) translateY(0.375rem) translateX(0.5625rem);
  }
}

@keyframes burgerTopReverse {
  0% {
    transform: rotateZ(-45deg) translateY(0.375rem) translateX(-0.5625rem);
  }
  100% {
    transform: rotateZ(0deg) translateY(0) translateX(0);
  }
}

@keyframes burgerCenterReverse {
  0% {
    transform: translateX(-102%);
  }
  55% {
    transform: translateX(-102%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes burgerBottomReverse {
  0% {
    transform: rotateZ(-135deg) translateY(0.375rem) translateX(0.5625rem);
  }
  100% {
    transform: rotateZ(0) translateY(0) translateX(0);
  }
}

@keyframes ani-e-vertical {
  from {
    transform: translateY(-100%);
  }
  49% {
    transform: translateY(-100%);
  }
  50% {
    transform: translateY(-100%);
  }
  75% {
    transform: translateY(-45px);
  }
  80% {
    transform: translateY(10px);
  }
  90% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes ani-e-point {
  from {
    transform: translateY(100%);
  }
  60% {
    transform: translateY(100%);
  }
  61% {
    transform: translateY(100%);
  }
  77% {
    transform: translateY(7px);
  }
  82% {
    transform: translateY(7px);
  }
  87% {
    transform: translateY(0);
  }
  92% {
    transform: translateY(7px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes uline {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  5% {
    opacity: 1;
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes fall {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  95% {
    opacity: 1;
    transform: translateY(100%);
  }
  100% {
    opacity: 0;
    transform: translateY(100%);
  }
}

@keyframes contentFade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes strokeLeft {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
    left: unset;
    right: 0;
  }
}

@keyframes strokeRight {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
    right: unset;
    left: 0;
  }
}

#loadOverlay {
  display: none;
}