.single-work-section {
    padding: 80px 0;
  }
  .single-work-intro-section {
    padding: 85px 0;
    text-align: center;
    overflow: hidden;
    background-color: var(--navy);
  }
  .single-work-giga-text {
    font-size: 11.875em;
    position: absolute;
    bottom: -150px;
    left: 6%;
    opacity: 0.1;
    font-family: League Spartan, Helvetica, Arial, sans-serif;
    z-index: 0;
  }
  .single-work-giga-text svg {
    width: 700px;
    height: 200px;
  }
  .single-work-giga-text svg path {
    fill: white;
  }
  @media only screen and (min-width: 103.125em) {
    .single-work-giga-text {
      left: 25%;
      -webkit-transform: scale(1.5);
      transform: scale(1.5);
    }
  }
  .single-work-intro-title {
    display: inline-block;
    font-size: 3.75em;
    margin-bottom: 20px;
    color: white;
    overflow: hidden;
    position: relative;
    line-height: 1.3;
    z-index: 1;
  }
  .single-work-intro-title span {
    display: block;
    position: relative;
  }
  .single-work-intro-title span:before {
    content: attr(data-letters);
    position: absolute;
    color: white;
    left: 0;
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    transition: width 0.3s cubic-bezier(0.694, 0.048, 0.335, 1) 0.2s;
  }
  .single-work-intro-title:after {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    right: 0;
    z-index: 1;
    /* background: white; */
    -webkit-transform: translate3d(101%, 0, 0);
    transform: translate3d(101%, 0, 0);
    transition: -webkit-transform 0.3s cubic-bezier(0.694, 0.048, 0.335, 1);
    transition: transform 0.3s cubic-bezier(0.694, 0.048, 0.335, 1);
    transition: transform 0.3s cubic-bezier(0.694, 0.048, 0.335, 1),
      -webkit-transform 0.3s cubic-bezier(0.694, 0.048, 0.335, 1);
  }
  .single-work-intro-title.is-hidden:after {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  .single-work-intro-title.is-hidden span:before {
    width: 0;
  }
  @media only screen and (max-width: 64em) {
    .single-work-intro-title:after,
    .single-work-intro-title span:before {
      display: none;
    }
  }
  .single-work-anim-text {
    transition: all 0.3s;
  }
  @media only screen and (max-width: 64em) {
    .single-work-anim-text {
      -webkit-transform: none;
      transform: none;
      opacity: 1;
    }
  }
  .single-work-first-anim-blocks {
    transition: all 0.3s;
  }
  .single-work-first-anim-blocks.is-hidden {
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
    opacity: 0;
  }
  .single-work-first-anim-blocks.is-hidden:last-child {
    transition-delay: 0.15s;
  }
  @media only screen and (max-width: 64em) {
    .single-work-first-anim-blocks {
      -webkit-transform: none;
      transform: none;
      opacity: 1;
    }
  }
  .single-work-intro-text {
    width: 58%;
    margin: 0 auto;
    color: white;
    position: relative;
    z-index: 1;
  }
  .single-work-text-content {
    /* width: 80%; */
    position: relative;
    /* text-align: center; */
    
  }
  .center {
    /* width: 80%; */
    position: relative;
    width: 100%;
      /* min-height: 200px; */
      height: auto;
      display: flex;
      align-items: center;
      justify-content: center;
    
  }

  .text-center {
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 0 6%;
    
  }

  .double-work-content {
    display: flex;
    justify-content: center;
    text-align: center;
    padding: 0px 20px;
  }

  .double-work-content-separator {
    width: 100%;
    height: 4px;
    background-color: var(--blue);
    margin: 26px 0;
  }
  
  .gif {
    width: 90%;
  }
  .gif-mobile {
    height: 100vh;
    width: auto;
  }
  
  .center p {
    width: 80%;
    text-align: center;
    
  }
  .single-work-text-content:last-child {
    margin: auto;
  }
  #room-sketch {
    width: 100%;
      min-height: 200px;
      height: auto;
      display: flex;
      align-items: center;
    background-image: url("../img/room/room-panel.png");
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
    filter: drop-shadow(5px 5px 5px gray);
  border-radius: 15px;
  }
  
  .round-shadow {
    filter: drop-shadow(5px 5px 5px gray);
  border-radius: 15px;
  }
  
  @media only screen and (max-width: 715px) {
    #room-sketch {
      background-image: url("../img/room/room-speed.png");
      height: 100vh;
  border-radius: 15px;
    
    }
  }
  .single-work-text-content.is-left {
    width: 38.2%;
    padding-left: 50px;
    float: left;
    clear: none;
    margin-left: 0;
    margin-right: 3%;
  }
  .single-work-content-separator {
    width: 27%;
    height: 4px;
    background-color: var(--blue);
    margin: 26px 0;
  }
  .single-work-content-desc a,
  .single-work-content-desc span,
  .single-work-content-desc strong {
    color: var(--orange);
  }
  .single-work-content-desc a {
    text-decoration: underline;
  }
  .single-work-img-content {
    float: left;
    clear: none;
    width: 58.8%;
    margin-left: 0;
    margin-right: 3%;
  }
  .single-work-img-content:last-child {
    margin-right: 0;
  }
  .single-work-img-content img {
    display: block;
    width: 80%;
    height: auto;
    margin-left: 10%;
    transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
  }
  .single-work-img-content img:hover {
    -webkit-transform: scale(1.01);
    transform: scale(1.01);
  }
  .color-palette-section {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
  .color-palette-section .color-palette-container {
    float: left;
    clear: none;
    width: 17.6%;
    margin-left: 0;
    margin-right: 3%;
    text-align: center;
  }
  .color-palette-section .color-palette-container:last-child {
    margin-right: 0;
  }
  .color-palette-section .color-palette-container .color-palette {
    display: block;
    width: 160px;
    height: 160px;
    margin: 0 auto;
    background-color: white;
    box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.33);
    border-radius: 50%;
    transition: all 0.3s;
  }
  .color-palette-section .color-palette-container .color-palette-name {
    display: block;
    padding-top: 25px;
    font-size: 0.8125em;
    font-family: Consolas, Monaco, Bitstream Vera Sans Mono, Courier, monospace;
    font-weight: 400;
    color: #4a4a4a;
    transition: color 0.3s;
  }
  /* .color-palette-section .color-palette-container.is-hidden .color-palette {
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
    opacity: 0;
  } */
  @media only screen and (max-width: 64em) {
    .color-palette-section .color-palette-container .color-palette {
      -webkit-transform: none;
      transform: none;
      opacity: 1;
    }
  }
  .color-palette-section .color-palette-container:hover .color-palette {
    box-shadow: 0 15px 25px 0 rgba(0, 0, 0, 0.23);
  }
  .color-palette-section .color-palette-container:hover .color-palette-name {
    color: var(--orange);
  }
  .single-work-font {
    float: left;
    clear: none;
    width: 50%;
    margin-left: 0;
    margin-right: 0;
    background-position: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    background-size: contain;
    margin: 40px 0;
    height: 400px;
  }
  .single-work-ui {
    padding-top: 60px;
  }
  .single-work-ui .section-title {
    margin-bottom: 25px;
  }
  .single-work-ui-row {
    padding: 20px 0 40px;
  }
  .single-work-ui-image img {
    display: block;
    margin: 0 auto;
  }
  .next-work {
    display: block;
    width: 100%;
    padding: 45px 0;
    position: relative;
    overflow: hidden;
    background-color: white;
    border-top: 1px solid #eee;
  }
  .next-work .content {
    position: relative;
    z-index: 20;
  }
  .next-work:after,
  .next-work:before {
    content: "";
    position: absolute;
    top: 0;
    display: block;
    width: 100%;
    left: 0;
    height: 100%;
    transition: -webkit-transform 0.38s cubic-bezier(0.694, 0.048, 0.335, 1);
    transition: transform 0.38s cubic-bezier(0.694, 0.048, 0.335, 1);
    transition: transform 0.38s cubic-bezier(0.694, 0.048, 0.335, 1),
      -webkit-transform 0.38s cubic-bezier(0.694, 0.048, 0.335, 1);
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
  .next-work:before {
    background-color: var(--orange);
    transition-delay: 0.12s;
    z-index: 2;
  }
  .next-work:after {
    background-color: var(--blue);
    z-index: 1;
  }
  .next-work .next-work-lead,
  .next-work .next-work-title {
    transition: color 0.4s ease 0.25s;
  }
  .next-work .next-work-lead {
    font-family: LibreBaskerville-Regular, Palatino Linotype, Times New Roman,
      serif;
    text-transform: uppercase;
    color: #b19386;
    font-size: 0.75em;
    font-weight: 400;
    margin-bottom: 25px;
  }
  .next-work .next-work-title {
    display: inline-block;
    position: relative;
  }
  .next-work .next-work-title:after {
    content: "";
    position: absolute;
    bottom: 3px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--orange);
    z-index: -1;
  }
  .next-work .next-work-arrow {
    position: absolute;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 100px;
    top: 65%;
    width: 150px;
    height: 70px;
    opacity: 0.7;
    transition: -webkit-transform 0.25s cubic-bezier(0.694, 0.048, 0.335, 1);
    transition: transform 0.25s cubic-bezier(0.694, 0.048, 0.335, 1);
    transition: transform 0.25s cubic-bezier(0.694, 0.048, 0.335, 1),
      -webkit-transform 0.25s cubic-bezier(0.694, 0.048, 0.335, 1);
    z-index: 2;
  }
  .next-work .next-work-arrow svg {
    width: 150px;
    height: 70px;
  }
  .next-work .next-work-arrow svg path {
    fill: var(--navy);
    transition: all 0.3s ease;
  }
  .next-work:focus .next-work-lead,
  .next-work:focus .next-work-title,
  .next-work:hover .next-work-lead,
  .next-work:hover .next-work-title {
    color: white;
  }
  .next-work:focus:after,
  .next-work:focus:before,
  .next-work:hover:after,
  .next-work:hover:before {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  .next-work:focus .next-work-arrow,
  .next-work:hover .next-work-arrow {
    transition-delay: 0.3s;
    -webkit-transform: translate(20%, -50%);
    transform: translate(20%, -50%);
  }
  .next-work:focus .next-work-arrow svg path,
  .next-work:hover .next-work-arrow svg path {
    fill: white;
  }
  /* .single-work-intro-section {
    background-color: #060c10;
  } */
  /* .single-work-content-separator {
    background-color: #168dd9;
  } */
  
  .single-work-content-desc {
    display: flex;
      align-items: center;
      justify-content: center;
  }
  
  /* .single-work-content-desc a,
  .single-work-content-desc span,
  .single-work-content-desc strong {
    color: var(--blue);
  } */
  @media only screen and (min-width: 64em) {
    .single-work-intro-title {
      color: var(--orange);
    }
  }

  .landscape {
    width: 50rem;
    height: auto;
  }

  .double-work-text-content {
    /* padding-left: 50px; */
    float: left;
    clear: none;
    /* margin-left: 0;
    margin-right: 3%; */
    margin: 3%;
}
  /* .next-work:before {
    background-color: #00c8e7;
  }
  .next-work:after {
    background-color: #060c10;
  }
  .next-work-title:after {
    background-color: #00c8e7;
  } */
  /* .lato .single-work-content-separator,
  .lato .single-work-intro-section {
    background-color: #292f43;
  }
  .lato .single-work-content-desc a,
  .lato .single-work-content-desc span,
  .lato .single-work-content-desc strong,
  .lato .single-work-intro-title {
    color: #00c8e7;
  }
  @media only screen and (min-width: 64em) {
    .lato .single-work-intro-title {
      color: #00c8e7;
    }
  }
  .lato .next-work:before {
    background-color: #d16335;
  }
  .lato .next-work:after {
    background-color: #292f43;
  }
  .la-francesca .single-work-content-separator,
  .la-francesca .single-work-intro-section,
  .lato .next-work-title:after {
    background-color: #d16335;
  }
  .la-francesca .single-work-content-desc a,
  .la-francesca .single-work-content-desc span,
  .la-francesca .single-work-content-desc strong {
    color: #d16335;
  }
  .la-francesca .single-work-img-content img {
    box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.33);
  }
  @media only screen and (min-width: 64em) {
    .la-francesca .single-work-intro-title {
      color: #1d972d;
    }
  }
  .la-francesca .next-work:before {
    background-color: #54a416;
  }
  .la-francesca .next-work:after {
    background-color: #d16335;
  }
  .la-francesca .next-work-title:after {
    background-color: #54a416;
  }
  .sportland .single-work-intro-section {
    background-color: #c62b2e;
  }
  .sportland .single-work-content-separator {
    background-color: #54a416;
  }
  .sportland .single-work-content-desc a,
  .sportland .single-work-content-desc span,
  .sportland .single-work-content-desc strong {
    color: #c62b2e;
  }
  @media only screen and (min-width: 64em) {
    .sportland .single-work-intro-title {
      color: #54a416;
    }
  }
  .sportland .next-work:before {
    background-color: #060c10;
  }
  .sportland .next-work:after {
    background-color: #c62b2e;
  }
  .sportland .next-work-title:after {
    background-color: #060c10;
  } */
  @media only screen and (max-width: 59.375em) {
    .single-work-section {
      padding: 50px 0;
    }
    .single-work-intro-text {
      width: 85%;
      font-size: 0.875em;
    }
    .color-palette-section .color-palette-container .color-palette {
      width: 100px;
      height: 100px;
    }
    .color-palette-section .color-palette-container .color-palette-name {
      font-size: 0.75em;
    }
    .next-work {
      padding: 22px 0;
    }
    .next-work-lead,
    .next-work-title {
      margin-left: 22px;
    }
  }
  @media only screen and (max-width: 56.25em) {
    .landscape {
      width: 90%;
    }
    .single-work-text-content.is-left, .double-work-content {
      display: block;
      clear: both;
      float: none;
      width: 100%;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 35px;
    }
    .double-work-content-title, .double-work-content {
      text-align: left;
    }
    .single-work-text-content:first-child {
      margin-left: auto;
    }
    .single-work-text-content:last-child {
      margin-right: auto;
    }
    .single-work-text-content.is-left {
      padding-left: 0;
      padding: 0 8%;
    }
    .single-work-img-content {
      display: block;
      clear: both;
      float: none;
      width: 100%;
      margin-left: auto;
      margin-right: auto;
    }
    .single-work-img-content:first-child {
      margin-left: auto;
    }
    .single-work-img-content:last-child {
      margin-right: auto;
    }
    .single-work-img-content img {
      display: block;
      width: 90%;
      margin: 0 auto;
      transition: none;
    }
    .single-work-content-desc, .double-work-content-desc {
      font-size: 13px;
    }
    .single-work-content-separator, .double-work-content-separator {
      display: none;
    }
    .single-work-font {
      height: 250px;
    }
  }
  @media only screen and (max-width: 37.5em) {
    .single-work-intro-title {
      font-size: 1.875em;
    }
    .color-palette-section .color-palette-container {
      float: left;
      clear: none;
      width: 48.5%;
      margin-left: 0;
      margin-right: 3%;
      margin-bottom: 20px;
    }
    .color-palette-section .color-palette-container:nth-of-type(2n) {
      margin-right: 0;
      float: right;
    }
    .color-palette-section .color-palette-container:nth-of-type(2n + 1) {
      clear: both;
    }
    .color-palette-section .color-palette-container:last-child {
      width: 100%;
    }
    .color-palette-section .color-palette-container .color-palette {
      width: 160px;
      height: 160px;
    }
    .next-work .next-work-arrow {
      display: none;
    }
  }
  /* @media only screen and (max-width: 33.75em) {
    .single-work-ui {
      display: none;
    }
  } */
  @media only screen and (max-width: 29.375em) {
    .color-palette-section .color-palette-container {
      display: block;
      clear: both;
      float: none;
      width: 100%;
      margin-left: auto;
      margin-right: auto;
    }
    .color-palette-section .color-palette-container:first-child {
      margin-left: auto;
    }
    .color-palette-section .color-palette-container:last-child {
      margin-right: auto;
    }
  }