.work-slides {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: auto;
  transition: height 600ms ease;
  background-color: #EF5373;
  z-index: 5;
  transition-timing-function: ease-out;
  transition: height 600ms;
  overflow: hidden; }
  .work-slides.open {
    height: 100%; }
  .work-slides.as-work-header {
    position: relative;
    z-index: 1;
    height: 100vh;
    transition: height 1000ms ease; }
  .work-slides .title {
    position: absolute;
    top: 50%;
    left: 10%;
    transition: transform 400ms cubic-bezier(0.65, 0, 0.35, 1);
    transition-delay: 200ms;
    transform: translateY(0);
    text-align: left;
    max-width: 70%; }
    .work-slides .title h2 {
      font-size: 60px;
      line-height: 0.9;
      text-transform: uppercase;
      letter-spacing: 2px;
      font-weight: 900;
      color: #fff;
      margin: 0 0 0 0;
      padding: 0; }
      .work-slides .title h2.allow-to-break {
        overflow-wrap: break-word;
        word-wrap: break-word;
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
        -moz-hyphens: auto;
        hyphens: auto; }
    .work-slides .title.the-atl-special h2 {
      font-size: 36px; }
    .work-slides .title p {
      margin: 0;
      padding: 0;
      font-size: 16px;
      line-height: 1.25;
      font-weight: 400;
      text-transform: uppercase;
      letter-spacing: 4px; }
  .work-slides .content {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    color: #fff;
    cursor: pointer; }
    .work-slides .content .slide {
      width: 100%;
      height: 100%;
      background-color: #333;
      transition: clip-path 600ms cubic-bezier(0.65, 0, 0.35, 1);
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      color: inherit;
      text-decoration: none;
      z-index: 0;
      background-size: cover;
      background-position: center center; }
      .work-slides .content .slide.active {
        width: 100%;
        clip-path: inset(0% 0% 0% 0%);
        z-index: 80; }
        .work-slides .content .slide.active .title {
          transform: translateY(-50%); }
      .work-slides .content .slide.becoming-active .title {
        transform: translateY(-50%); }
      .work-slides .content .slide.clip-left {
        clip-path: inset(0% 100% 0% 0%); }
      .work-slides .content .slide.clip-right {
        clip-path: inset(0% 0% 0% 100%); }
      .work-slides .content .slide:before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.4); }
      .work-slides .content .slide.special-delivery-for-atlanta:before {
        background-color: rgba(0, 0, 0, 0); }
  .work-slides nav {
    position: absolute;
    right: 40px;
    bottom: 40px;
    display: block;
    width: 82px;
    height: 42px;
    z-index: 99;
    background-color: rgba(0, 0, 0, 0.5); }
    .work-slides nav a {
      opacity: 0.6;
      text-decoration: none;
      transition: opacity 400ms;
      position: absolute;
      top: 0;
      padding: 10px; }
      .work-slides nav a:first-child {
        left: 0; }
      .work-slides nav a:last-child {
        right: 0; }
      .work-slides nav a.active {
        opacity: 1; }
  .work-slides .auto-timer {
    display: block;
    width: 20%;
    height: 2px;
    position: absolute;
    left: 50px;
    bottom: 50px;
    background-color: rgba(255, 255, 255, 0.6);
    z-index: 99; }
    .work-slides .auto-timer span {
      display: block;
      height: 2px;
      background-color: #ef5373;
      width: 0; }

.homepage-escape {
  width: 100%;
  height: 0;
  position: relative; }
  .homepage-escape .action--back-to-homepage {
    background-image: url("data:image/svg+xml,%3Csvg width='22px' height='12px' viewbox='0 0 22 12' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 20L10 10L0 0' transform='matrix(-4.371139E-08 -1 1 -4.371139E-08 1 11)' fill='none' fill-rule='evenodd' stroke='%23FFFFFF' stroke-width='2' /%3E%3C/svg%3E");
    background-position: center center;
    background-repeat: no-repeat;
    display: block;
    width: 60px;
    height: 60px;
    border-radius: 30px;
    text-decoration: none;
    background-color: rgba(239, 83, 115, 0.8);
    position: absolute;
    right: 50px;
    bottom: -30px;
    z-index: 1; }
    .homepage-escape .action--back-to-homepage:hover, .homepage-escape .action--back-to-homepage:active {
      background-color: rgba(0, 0, 0, 0.8); }

@media only screen and (min-width: 768px) {
  .work-slides .title {
    max-width: 40%; }
    .work-slides .title h2 {
      font-size: 90px; }
    .work-slides .title.the-atl-special h2 {
      font-size: 90px; } }
@media only screen and (min-height: 300px) {
  .work-slides.as-work-header.present-page {
    height: calc(100vh - 90px); } }
@media only screen and (min-height: 400px) {
  .work-slides.as-work-header.present-page {
    height: calc(100vh - 120px); } }
@media only screen and (min-height: 500px) {
  .work-slides.as-work-header.present-page {
    height: calc(100vh - 190px); } }
@media only screen and (min-height: 750px) {
  .work-slides.as-work-header.present-page {
    height: calc(100vh - 275px); } }
@media only screen and (min-height: 1000px) {
  .work-slides.as-work-header.present-page {
    height: calc(100vh - 300px); } }
@media only screen and (min-height: 1300px) {
  .work-slides.as-work-header.present-page {
    height: calc(100vh - 400px); } }
@supports (-webkit-touch-callout: none) {
  .work-slides {
    bottom: -114px; }
    .work-slides.present-page {
      bottom: 0; } }