.page-home .wrapper {
	max-width: 1280px;
}
.home-intro-wrapper {
  display: flex;
  flex-direction: row-reverse;
  align-content: center;
  align-items: center;
  margin: 0px auto;
  max-width: 1280px;
  justify-content: space-evenly;
  width: 97vw;
}
.home-hero, .home-intro {
	width: 50%;
}
.home-intro h2 {
	font-size: 3em;
	display: inline-block;
	border-bottom: 5px solid var(--accent-color);
	margin: 0;
	padding-bottom: 10px;
}


:root {
    --marquee-height: 1.5em;
}
.marquee-wrapper {
    line-height: var(--marquee-height);
	font-size: 1.5em;
    text-transform: uppercase;

    margin: 20px 0px;
}
.marquee-holder {
    
	position: relative;
    overflow: hidden;
}
.marquee-inner {

	font-weight: 900;

	margin: 0;
	padding: 0;
    overflow: hidden;
	
    text-decoration: none;
    white-space: nowrap;
    position: absolute;
    animation: uppies 20s ease-in-out infinite;

}
.marquee-inner li {
    animation: openclose 20s ease-in-out infinite;
    border-right: 10px solid var(--accent-color);

    overflow: hidden;
}

.marquee-holder, .marquee-inner li {
	height: var(--marquee-height);
}

@keyframes uppies {
  /* Height animation */

  /* item: Character Designer */
  0%, 10% {top: 0;}
  /* item: World builders */
  11%, 20% {top: calc(var(--marquee-height) * -1);}
  /* item: Story tellers */
  21%, 30% {top: calc(var(--marquee-height) * -2);}
  /* item: Animal Lovers */
  31%, 40% {top: calc(var(--marquee-height) * -3);}
  /* item: Animators */
  41%, 50% {top: calc(var(--marquee-height) * -4);}
  /* item: Nerds */
  51%, 60% {top: calc(var(--marquee-height) * -5);}
  /* item: Web Developers */
  61%, 70% {top: calc(var(--marquee-height) * -6);}
  /* item: Graphic Designers */
  71%, 80% {top: calc(var(--marquee-height) * -7);}
  /* item: Makers */
  81%, 90% {top: calc(var(--marquee-height) * -8);}
  /* item: Goofballs */
  91%, 100% {top: calc(var(--marquee-height) * -9);}

}


@keyframes openclose {
  /* Width animation */

  0%,  2%,
  10%, 12%,
  20%, 22%,
  30%, 32%,
  40%, 42%,
  50%, 52%,
  60%, 62%,
  70%, 72%,
  80%, 82%,
  90%, 92%,
  100% {width: 0;}
  3%, 7%,
  13%, 17%,
  23%, 27%,
  33%, 37%,
  43%, 47%,
  53%, 57%,
  63%, 67%,
  73%, 77%,
  83%, 87%,
  93%, 97% {
    width: var(--marquee-width);
  }
}

@media only screen and (max-width: 1024px) {
  .home-intro h2 {
    font-size: 2em;
  }
}

@media only screen and (max-width: 786px) {

  .home-intro {
    width: auto;
    max-width: 75%;
  }
  .home-hero {
    width: 75%;
  }
  .home-intro-wrapper {
    flex-direction: column;
  }
  .home-intro h2 {
    font-size: 2.5em;
    text-align: center;
  }
  .marquee-wrapper {
    font-size: 1.5em;
  }

}

@media only screen and (max-width: 480px) {
  .marquee-wrapper {
    font-size: 1em;
  }
  .home-intro h2 {
    font-size: 2em;
   }
}