/* Header */
header {
  padding: 50px 0;
  position: relative;
  z-index: 1; }
  @media screen and (max-width: 768px) {
    header {
      padding: 30px 0 10px; }
      header .container {
        padding: 0;
        margin: 0;
        width: 100%; } }
  header a.brand img {
    max-height: 50px; }
    header a.brand img.white {
      display: none; }

/* About */
table.table tr td {
  border: 0;
  padding: 3px 0;
  line-height: 1.7;
  font-size: 1.1em;
  font-weight: 300;
  padding-right: 20px; }
  table.table tr td a {
    display: block; }

/* Navigation */
ul.main-nav {
  list-style: none;
  margin: 25px -15px 0;
  padding: 0;
  text-align: center; }
  ul.main-nav li {
    display: inline-block;
    margin: 0 9px; }
    ul.main-nav li a {
      display: block;
      transition: all .7s;
      color: #000;
      font-size: 1.15em;
      border-bottom: 1px solid transparent; }
      ul.main-nav li a:hover, ul.main-nav li a.active, ul.main-nav li a:active, ul.main-nav li a:focus {
        border-bottom: 1px solid #000;
        text-decoration: none; }
  @media screen and (max-width: 768px) {
    ul.main-nav {
      white-space: nowrap;
      overflow-x: scroll;
      -webkit-overflow-scrolling: touch;
      padding: 30px 20px 0;
      margin-top: 0; }
      ul.main-nav:before {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        top: 60px;
        height: 60px;
        width: 20px;
        z-index: 3;
        background-image: linear-gradient(to left, rgba(255, 255, 255, 0), #fff); }
      ul.main-nav:after {
        content: '';
        display: block;
        position: absolute;
        right: 0;
        top: 65px;
        height: 70px;
        width: 50px;
        background-image: linear-gradient(to right, rgba(255, 255, 255, 0), #fff); }
      ul.main-nav li {
        margin: 0 15px; }
        ul.main-nav li:first-child {
          margin-left: 0; }
        ul.main-nav li:last-child {
          margin-right: 0; }
        ul.main-nav li a {
          font-size: 1.3em; } }

/* Work Grid */
.grid-images {
  padding: 0;
  list-style: none; }
  .grid-images .item-sizer {
    width: 33.3334%; }
    @media screen and (max-width: 992px) {
      .grid-images .item-sizer {
        width: 50%; } }
    @media screen and (max-width: 768px) {
      .grid-images .item-sizer {
        width: 100%; } }
  .grid-images a.item {
    width: 33.3334%;
    background-size: cover;
    background-position: center center;
    margin: 0;
    padding: 0;
    display: block;
    color: #000;
    position: relative; }
    .grid-images a.item .caption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

.grid-images a.item .caption h4 {
  font-size: 1.2em;
  margin: 0 20px 20px;
  padding: 10px 18px;
  display: inline-block;
  color: #000;
  line-height: 1.1;
  position: relative;
  z-index: 1;
}

/* Pink paint swatch behind title — scales with text */
.grid-images a.item .caption h4:before {
  content: "";
  position: absolute;
  z-index: -1;

  left: -20px;
  right: -20px;
  top: -6px;
  bottom: -6px;
  transform: rotate(-2deg);

  background: url("../img/ui/pink-streak-1.svg") no-repeat center;
  background-size: 100% 100%;
  opacity: 1;
}
    .grid-images a.item:before {
      content: '';
      display: block;
      padding-bottom: 100%; }
    .grid-images a.item.wide {
      width: 66.6667%; }
      .grid-images a.item.wide:before {
        content: '';
        display: block;
        padding-bottom: 50%; }
    .grid-images a.item.tall:before {
      content: '';
      display: block;
      padding-bottom: 200%; }
    @media screen and (max-width: 992px) {
      .grid-images a.item {
        width: 50% !important; } }
    @media screen and (max-width: 768px) {
      .grid-images a.item {
        width: 100% !important; } }
  .grid-images.space {
    margin: 0 5%; }
    .grid-images.space a.item {
      width: 23.3334%;
      margin: 5%; }
      .grid-images.space a.item.wide {
        width: 56.6667%; }
        .grid-images.space a.item.wide:before {
          padding-bottom: 41.1667%; }
      .grid-images.space a.item.tall:before {
        padding-bottom: 243%; }
      @media screen and (max-width: 992px) {
        .grid-images.space a.item {
          width: 40% !important; }
          .grid-images.space a.item.wide {
            width: 90% !important; } }
      @media screen and (max-width: 768px) {
        .grid-images.space a.item {
          width: 90% !important; } }

.fs-portfolio {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 200px 20px 60px; }
  @media screen and (max-width: 768px) {
    .fs-portfolio {
      margin: 160px 20px 60px; } }
  .fs-portfolio ul.fs-images {
    list-style: none; }
    .fs-portfolio ul.fs-images li {
      align-items: center;
      align-content: center;
      text-align: center;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-size: cover;
      background-position: center center;
      text-align: center;
      display: none; }
      .fs-portfolio ul.fs-images li h1 {
        font-size: 10em;
        margin-top: -30px;
        line-height: 1;
        width: 100%;
        mix-blend-mode: overlay; }
        @media screen and (max-width: 1200px) {
          .fs-portfolio ul.fs-images li h1 {
            font-size: 6em; } }
        @media screen and (max-width: 992px) {
          .fs-portfolio ul.fs-images li h1 {
            font-size: 5.5em; } }
        @media screen and (max-width: 768px) {
          .fs-portfolio ul.fs-images li h1 {
            font-size: 4.5em; } }
        @media screen and (max-width: 415px) {
          .fs-portfolio ul.fs-images li h1 {
            font-size: 3em; } }
      .fs-portfolio ul.fs-images li:first-child {
        display: flex; }
  .fs-portfolio ul.fs-navigation {
    height: 60px;
    left: 0;
    right: 0;
    top: 100%;
    margin: 0;
    padding: 0;
    position: absolute;
    text-align: center; }
    .fs-portfolio ul.fs-navigation li {
      display: inline-block;
      margin: 0 15px; }
      .fs-portfolio ul.fs-navigation li a {
        height: 60px;
        line-height: 60px;
        color: #aaa;
        font-size: 1.1em;
        font-weight: 600;
        transition: all .7s; }
        .fs-portfolio ul.fs-navigation li a:hover {
          color: #000; }
      .fs-portfolio ul.fs-navigation li.active a {
        color: #000; }
    @media screen and (max-width: 768px) {
      .fs-portfolio ul.fs-navigation {
        white-space: nowrap;
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch;
        left: -20px;
        right: -20px;
        padding: 0 15px; }
        .fs-portfolio ul.fs-navigation li {
          margin: 0 5px; }
        .fs-portfolio ul.fs-navigation:after {
          content: '';
          display: block;
          position: fixed;
          right: 0;
          bottom: 0;
          height: 50px;
          width: 30px;
          background-image: linear-gradient(to right, rgba(255, 255, 255, 0), #fff); } }

/* Footer */
footer {
  position: relative;
  z-index: 30;
  width: 100%;
  text-align: center;

  margin-top: -55px;
  padding: 0 0 18px 0;
}

footer .footer-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 26px;
  z-index: 1;
}

footer .footer-badge .footer-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #000;
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

footer .footer-badge .footer-icon:hover {
  opacity: 1;
  transform: scale(1.15);
}

footer .footer-badge .footer-icon svg {
  display: block;
}

footer .footer-badge:before {
  content: "";
  position: absolute;
  inset: -8px -18px -10px -18px;
  background: url("../img/ui/pink-streak-1.svg") no-repeat center center;
  background-size: 100% 100%;
  opacity: 0.96;
  z-index: -1;
  transform: rotate(-1.5deg);
}

footer span {
  color: #000;
  text-shadow: none;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 600;
}

footer a {
  color: #FFF;
  text-decoration: underline;
}

@media screen and (max-width: 768px) {
  footer {
    margin-top: -40px;
    padding: 0 0 14px 0;
  }

  footer .footer-badge {
    padding: 10px 16px;
    gap: 8px;
  }

  footer .footer-badge:before {
    inset: -6px -12px -8px -12px;
  }
}

/* Lightbox */
#lightbox {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #000;
  z-index: 9999;
  display: none; }
  #lightbox img:not(.icon), #lightbox iframe, #lightbox video {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: auto;
    height: auto;
    max-width: 90%;
    max-height: 90%;
    opacity: 0;
    transform: scale(0.95);
    transition: transform 1s, opacity .8s; }
  #lightbox iframe, #lightbox video {
    width: 1280px;
    height: 720px;
    max-width: 80%;
    max-height: 90%; }
  #lightbox .controls {
    background: #fff;
    width: 40px;
    height: 120px;
    position: absolute;
    z-index: 10000;
    bottom: 5%;
    left: 0; }
    #lightbox .controls .galleryNext, #lightbox .controls .galleryClose, #lightbox .controls .galleryPrev {
      width: 40px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      transition: all .3s;
      cursor: pointer; }
      #lightbox .controls .galleryNext img, #lightbox .controls .galleryClose img, #lightbox .controls .galleryPrev img {
        width: 20px; }
      #lightbox .controls .galleryNext:hover, #lightbox .controls .galleryClose:hover, #lightbox .controls .galleryPrev:hover {
        background: #ccc;
        color: #fff; }
    #lightbox .controls .galleryClose {
      background: #ccc; }
      #lightbox .controls .galleryClose:hover {
        background: #aaa; }
      #lightbox .controls .galleryClose img {
        width: 25px; }
    @media screen and (max-width: 768px) {
      #lightbox .controls {
        top: 0;
        left: 0;
        width: 100%;
        height: 60px;
        bottom: auto; }
        #lightbox .controls .galleryNext, #lightbox .controls .galleryClose, #lightbox .controls .galleryPrev {
          width: 33.3333%;
          float: left;
          height: 60px;
          line-height: 60px;
          font-size: 20px; }
        #lightbox .controls .galleryClose {
          background: black !important;
          font-size: 30px; } }
  #lightbox .caption {
    display: none;
    color: rgba(255, 255, 255, 0.92);
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    text-align: center;
    padding: 14px 20px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.55));
    font-size: 0.9rem;
    letter-spacing: 0.03em; }

/* Slider */
.slider {
  position: relative;
  overflow: hidden;
  background: #f5f5f5; }
  .slider.fs {
    position: relative;
    width: 100%;
    height: 100%;
    top: -13em;
    z-index: 0; }
    .slider.fs .slides {
      height: 100vh; }
      .slider.fs .slides .slide {
        height: 100vh;
        background-size: cover;
        background-position: center; }
  .slider .slides {
    font-size: 0;
    white-space: nowrap;
    position: relative;
    top: 0;
    left: -100%;
    margin: 0;
    padding: 0;
    perspective: 1000px; }
    .slider .slides .slide {
      background: #fff;
      display: inline-block;
      vertical-align: top;
      width: 100%;
      white-space: normal;
      transition: transform 1s;
      transform: scale(0.9);
      overflow: hidden;
      position: relative;
      z-index: 1;
      font-size: 2rem; }
      .slider .slides .slide h1, .slider .slides .slide h2, .slider .slides .slide h3, .slider .slides .slide h4, .slider .slides .slide h5, .slider .slides .slide h6, .slider .slides .slide p, .slider .slides .slide a, .slider .slides .slide span {
        transition: opacity .6s;
        opacity: 0; }
      .slider .slides .slide.active {
        z-index: 2;
        transform: scale(1);
        transition: transform 1s; }
        .slider .slides .slide.active h1, .slider .slides .slide.active h2, .slider .slides .slide.active h3, .slider .slides .slide.active h4, .slider .slides .slide.active h5, .slider .slides .slide.active h6, .slider .slides .slide.active p, .slider .slides .slide.active a, .slider .slides .slide.active span {
          transition: opacity .6s .7s;
          opacity: 1; }