.splash {
  margin-top: calc(var(--line-height-em)*3);
  min-height: 500px;
}

.background-screen {
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, .7);
  z-index: 1;
}

.background-screen.is-expanded {
  display: block;

}

.splash__content-wrapper {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 250px;
  position: relative;
}

.splash__overlapped-video-wrapper {
  position: relative;
  width: 800px;
  height: 500px;
}

.splash__overlapped-video {
  width: 100%;
  height: 100%;
}

.splash__overlapped-filter {
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(50, 50, 50, .7);
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
}

.splash__overlapped-video-wrapper.is-expanded {
  position: fixed;
  top: 30%;
  left: 50%;
  margin-left: -400px;
  z-index: 2;
}

.splash__overlapped-video-wrapper.is-expanded .splash__overlapped-filter {
  display: none;
}

.splash__overlapping {
  background: #fff;
  padding: var(--line-height-em) 2.5em var(--line-height-em) 2.5em;
  width: 49em;
  position: absolute;
  top: 250px;               /* half of video height */
  margin-left: 400px;
}

.splash__expand-prompt {
  display: block;
  cursor: pointer;
  color: var(--burnt-orange);
  font-weight: var(--fw-medium);
}

.splash__expand-prompt:hover {
  color: var(--bright-orange);
}

.splash__expand-prompt.is-expanded {
  display: none;
}


@media all and (max-width:1064px) {
  .splash__overlapped-video-wrapper {
    width: 100%;
  }

  .splash__overlapped-video-wrapper.is-expanded {
    left: 0;
    margin-left: 0;
  }

  .splash__overlapping {
    width: 80%;
    margin-left: 10%;
  }

  .splash__content-wrapper {
    margin-bottom: 300px;
  }
}

@media all and (max-width:704px) {
  .splash__overlapped-video-wrapper {
    height: 300px;
  }

  .splash__overlapping {
    width: 100%;
    padding-left: var(--line-height-em);
    padding-right: var(--line-height-em);
    position: relative;
    width: 100%;
    margin-left: 0;
    top: calc(var(--line-height-em)*2);
  }


  .splash__content-wrapper {
    margin-bottom: calc(var(--line-height-em)*2);
  }
}

/* ------- cross-cutting --------- */
.crosscutting__width-wrapper {
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: space-between;
  padding: 0 var(--line-height-em);
}

.crosscutting__orange-bar {
  margin-top: calc(var(--line-height-em)*11);
}

.crosscutting__title-wrapper {
  position: relative;
  z-index: 1;
  display: block;
  margin-left: 0;
  margin-right: auto;
  margin-top: calc(var(--line-height-em)*5);
  width: 35%;
}

.crosscutting__canvas {
  width: 100%;
  /* height is set by js */
}

.crosscutting__canvas-wrapper {
  display: block;
  margin-right: 0;
  margin-left: auto;
  width: 60%;
  min-height: 100vh;
  height: 1000px;
  position: relative;
  z-index: 1;
}

.crosscutting__title {
  text-transform: uppercase;
  line-height: 1;
  font-family: "BentonSans Condensed";
  font-weight: 700;
  color: var(--burnt-orange);
  display: inline-block;
  background-color: var(--background-white);
  padding: 0 .3em 0 .5em;
}

.crosscutting__title__cross {
  font-size: 7em;
}

.crosscutting__title__cutting {
  font-size: 6em;
}

.crosscutting__title__research-areas {
  font-size: 3em;
}


@media all and (max-width: 920px) {
  .crosscutting__width-wrapper {
    display: block;
    padding-left: 1em;
    padding-right: 1em;
  }

  .crosscutting__title-wrapper {
    width: 100%;
  }

  .crosscutting__title {
    font-size: .75em;
  }

  .crosscutting__orange-bar {
    font-size: .4em;
  }

  .crosscutting__canvas-wrapper {
    width: 100%;
    min-height: inherit;
    height: 600px;
  }

  .hexagon__label {
    font-size: 1em;
  }
}



/* -------------- */

.overlapping-element {
  margin-top: calc(var(--line-height-em)*3);
  margin-bottom: calc(var(--line-height-em)*9);
}

.overlapping-element__video-wrapper {
  width: 600px;
  height: 350px;
  margin-right: 6em;
}

.overlapping-element__video {
  width: 100%;
  height: 100%;
  background-color: var(--almost-black);
}

.overlapping-element__text {
  position: relative;
  width: 350px;
}

.overlapping-element__text::before {
  content: '';
  width: 200px;
  height: calc(100% + 6em);
  background-color: var(--block-gray);
  position: absolute;
  z-index: -1;
  left: calc(-.75 * 200px);        /* 75% of width */
  top: -3em;
}

/* ----- */

@media all and (min-width:640px) and (max-width:1039px) {
  .overlapping-element__video-wrapper {
    width: 50%;
    height: 300px;
  }

  .overlapping-element__text {
    padding-right: 1em;
  }
}


@media all and (max-width:639px) {
  .overlapping-element {
    display: block;
    margin-bottom: 21em;
  }

  .overlapping-element__video-wrapper {
    width: 100%;
    height: 250px;
    margin-right: 0;
  }

  .overlapping-element__text {
    width: 100%;
    padding-left: var(--line-height-em);
    padding-right: calc(var(--line-height-em)/2);
  }

  .overlapping-element__text::before {
    left: 0;
    width: 100px;
    height: calc(100% +  250px + 100px + 100px);     /* 100px jutting out above video wrapper, 100px (minus margin-top of h2) jutting below */
    top: calc(-1.85714286em - 250px - 100px);   /* juts out 100px */
  }
}

@media print {
  .splash__overlapping {
    position: relative;
  }

  .splash__overlapped-video-wrapper, .splash__overlapped-video {
    display: none;
  }

  .offset-container {
    margin-left: 0;
  }
}