#intro {
  width: 100%; position: relative }

.next__trigger {
  pointer-events: all;
  cursor: pointer;
  color: #ffffff; }

.next__trigger:hover {
  color: #ed202c; }

.videowrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden; }
  .videowrap::before {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: '';
    background: rgba(0, 0, 0, 0.55);
    z-index: 2; }
  .videowrap video {
    height: 100%;
    width: 100%;
    min-width: 100%;
    min-height: 56.25vw;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1; }

.intro__content {
  width: 100%;
  z-index: 1000;
  top: 0;
  left: 0; }
  @media (min-width: 768px) {
	  .intro__content {
		    min-height: 40vh;
	  }
    .intro__content .headline {
      font-size: 24px; } }
  @media (min-width: 1024px) {
    .intro__content .headline {
      font-size: 32px; } }
  @media (min-width: 1200px) {
    .intro__content .headline {
      font-size: 42px; } }

.intro__banner {
  position: relative; z-index: 1000;}
  .intro__banner > div {
    overflow: hidden; }
  .intro__banner .headline {
    transition: 1.25s all ease-in-out; }
  .intro__banner .line1, .intro__banner .line2 {
    transition: .5s all ease-in-out;
    transition-delay: .5s; }
  .intro__banner .line3 {
    transition: 1.25s all ease-in-out; }
  .intro__banner .headline, .intro__banner .line1, .intro__banner .line2, .intro__banner .line3 {
    opacity: 1;
    transform: translateX(0); }
  .intro__banner .experience {
    opacity: 1; }

.starter .headline {
  opacity: 0; }

.starter .line1 {
  transform: translateX(-120%); }

.starter .line2 {
  transform: translateX(120%); }

.starter .line3 {
  opacity: 0; }

.starter .experience {
  opacity: 0; }

.next__trigger {
  width: 80%;
  margin: 0 auto;
  max-width: 600px; }

.line-div {
  height: 1px; }

.intro__banner {
  width: 90%;
  margin: 0 auto;
  max-width: 1200px; }

.experience h1 {
  font-weight: 300;
  text-transform: uppercase;
  font-size: 2em;
  color: #ffffff;
  margin: 0;
  padding: 0;
  text-align: center; }
  @media (min-width: 768px) {
    .experience h1 {
      font-size: 3.5em;
      letter-spacing: 3px; } }
  @media (min-width: 1024px) {
    .experience h1 {
      font-size: 4.25em; } }
  @media (min-width: 1200px) {
    .experience h1 {
      font-size: 5.5em; } }