/* --------------------------------- FONTS -------------------------------- */
/* --------------------------------- COLOURS ----------------------------- */
/** Boldly original blue/green palette **/
/** Boldly multi-colour palette       **/
/** Boldly grayscale palette          **/
/* Cool Steel #3B3B41 */
/*0F0A0A*/
/*333*/
/*666*/
/*CCC*/
/** Mixing and matching colours       **/
/** Colours for buttons and alerts    **/
/* --------------------------------- MIXIN -------------------------------- */
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff4949+0,2e99ff+100 */
/* ------------------- PROJECTS LIST PAGES -------------------- */
#projects {
  max-width: 100%;
  margin: 0 auto;
  padding: 0.5rem; }

.filter-tabs {
  max-width: 48rem;
  margin: 1rem auto; }
  .filter-tabs a.btn-nav {
    padding: 0;
    position: relative;
    font-weight: 100; }
    .filter-tabs a.btn-nav::after {
      content: "";
      border: none;
      background-color: #FF5252;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      height: 1.25rem;
      width: 0%;
      opacity: 0; }
  .filter-tabs a.btn-nav.active {
    color: #FF5252;
    font-weight: 600; }
  .filter-tabs a.btn-nav:hover {
    color: #000; }
    .filter-tabs a.btn-nav:hover::after {
      width: 100%;
      opacity: 1; }
  .filter-tabs .menu-item {
    position: relative; }
    .filter-tabs .menu-item:hover .subcategories {
      height: 5.5rem; }
  .filter-tabs .subcategories {
    -webkit-transition: all 0.25s cubic-bezier(0.75, 0, 0.23, 1.01);
    -moz-transition: all 0.25s cubic-bezier(0.75, 0, 0.23, 1.01);
    -ms-transition: all 0.25s cubic-bezier(0.75, 0, 0.23, 1.01);
    transition: all 0.25s cubic-bezier(0.75, 0, 0.23, 1.01);
    position: absolute;
    top: 1.5rem;
    width: 100%;
    height: 0rem;
    overflow: hidden;
    z-index: 9999;
    background-color: #111; }
    .filter-tabs .subcategories a {
      display: block; }

.project,
.stills-project {
  margin: 0.5rem;
  padding: 0;
  border-radius: 0.5rem;
  position: relative;
  overflow: hidden; }
  .project .case-study,
  .stills-project .case-study {
    margin: 0.25rem; }
  .project a.simple-link,
  .stills-project a.simple-link {
    margin: 0;
    padding: 0;
    display: inline; }
  .project .project-logo,
  .stills-project .project-logo {
    font-weight: normal;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    width: 100%; }
  .project .thumbnail-container,
  .stills-project .thumbnail-container {
    overflow: hidden;
    margin: 0;
    padding: 0; }
  .project .laurels-container,
  .stills-project .laurels-container {
    position: absolute;
    width: 100%;
    padding: 0.5rem;
    top: 0;
    left: 0; }
    .project .laurels-container .laurel,
    .stills-project .laurels-container .laurel {
      position: relative;
      height: 5rem;
      width: 5rem;
      max-height: 20%;
      -webkit-transition: all 0.25s cubic-bezier(0.75, 0, 0.23, 1.01);
      -moz-transition: all 0.25s cubic-bezier(0.75, 0, 0.23, 1.01);
      -ms-transition: all 0.25s cubic-bezier(0.75, 0, 0.23, 1.01);
      transition: all 0.25s cubic-bezier(0.75, 0, 0.23, 1.01);
      opacity: 0;
      left: -3rem; }
      .project .laurels-container .laurel.first,
      .stills-project .laurels-container .laurel.first {
        opacity: 1;
        left: 0; }
      .project .laurels-container .laurel img,
      .stills-project .laurels-container .laurel img {
        padding: 0 0.5rem;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateY(-50%) translateX(-50%); }
  .project h2,
  .stills-project h2 {
    font-size: 1.2rem;
    font-weight: bold; }
  .project h2.logo-hide,
  .stills-project h2.logo-hide {
    visibility: hidden; }
  .project .tags,
  .stills-project .tags {
    -webkit-transition: all 0.25s cubic-bezier(0.75, 0, 0.23, 1.01);
    -moz-transition: all 0.25s cubic-bezier(0.75, 0, 0.23, 1.01);
    -ms-transition: all 0.25s cubic-bezier(0.75, 0, 0.23, 1.01);
    transition: all 0.25s cubic-bezier(0.75, 0, 0.23, 1.01);
    font-size: 0.9rem;
    opacity: 0;
    margin: 0.25rem; }
  .project img,
  .stills-project img {
    -webkit-transition: all 0.25s cubic-bezier(0.75, 0, 0.23, 1.01);
    -moz-transition: all 0.25s cubic-bezier(0.75, 0, 0.23, 1.01);
    -ms-transition: all 0.25s cubic-bezier(0.75, 0, 0.23, 1.01);
    transition: all 0.25s cubic-bezier(0.75, 0, 0.23, 1.01);
    /* background image */
    margin: 0;
    width: 100%; }
  .project img.logo,
  .stills-project img.logo {
    max-width: 50%;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%); }
  .project .project-blurb,
  .stills-project .project-blurb {
    -webkit-transition: all 0.25s cubic-bezier(0.75, 0, 0.23, 1.01);
    -moz-transition: all 0.25s cubic-bezier(0.75, 0, 0.23, 1.01);
    -ms-transition: all 0.25s cubic-bezier(0.75, 0, 0.23, 1.01);
    transition: all 0.25s cubic-bezier(0.75, 0, 0.23, 1.01);
    position: absolute;
    padding: 1rem;
    margin: 0;
    opacity: 0;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden; }
    .project .project-blurb h2, .project .project-blurb p,
    .stills-project .project-blurb h2,
    .stills-project .project-blurb p {
      margin: 0;
      max-width: 100%;
      padding-left: 1rem;
      padding-right: 1rem;
      text-shadow: 0px 0px 0.2rem rgba(0, 0, 0, 0.5);
      text-transform: lowercase;
      color: #FFF; }
  .project .project-badges,
  .stills-project .project-badges {
    -webkit-transition: all 0.25s cubic-bezier(0.75, 0, 0.23, 1.01);
    -moz-transition: all 0.25s cubic-bezier(0.75, 0, 0.23, 1.01);
    -ms-transition: all 0.25s cubic-bezier(0.75, 0, 0.23, 1.01);
    transition: all 0.25s cubic-bezier(0.75, 0, 0.23, 1.01);
    position: absolute;
    bottom: 0.5rem;
    padding: 0 0.5rem;
    text-align: center;
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    opacity: 0; }
    .project .project-badges .badge,
    .stills-project .project-badges .badge {
      background-color: rgba(47, 47, 52, 0.9);
      color: #FFF;
      display: inline-block;
      opacity: 0.7; }
  .project picture img,
  .stills-project picture img {
    -webkit-filter: brightness(1) sepia(0.15) grayscale(0);
    -moz-filter: brightness(1) sepia(0.15) grayscale(0);
    -ms-filter: brightness(1) sepia(0.15) grayscale(0);
    filter: brightness(1) sepia(0.15) grayscale(0);
    /*
    -webkit-filter: brightness(0.5) grayscale(1);
       -moz-filter: brightness(0.5) grayscale(1);
        -ms-filter: brightness(0.5) grayscale(1);
            filter: brightness(0.5) grayscale(1);
    */ }
  .project .project-gif,
  .stills-project .project-gif {
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    height: 100%;
    opacity: 0;
    /*
    -webkit-filter: brightness(0.5);
       -moz-filter: brightness(0.5);
        -ms-filter: brightness(0.5);
            filter: brightness(0.5);
    */ }
  .project:hover .tags,
  .stills-project:hover .tags {
    opacity: 0; }
  .project:hover .project-blurb, .project:hover .project-badges,
  .stills-project:hover .project-blurb,
  .stills-project:hover .project-badges {
    opacity: 1; }
  .project:hover .laurels-container .laurel,
  .stills-project:hover .laurels-container .laurel {
    opacity: 1;
    left: 0; }
  .project:hover picture img,
  .stills-project:hover picture img {
    -webkit-filter: brightness(1) sepia(0) grayscale(0);
    -moz-filter: brightness(0.5) sepia(0) grayscale(0);
    -ms-filter: brightness(0.5) sepia(0) grayscale(0);
    filter: brightness(0.5) sepia(0) grayscale(0); }
  .project:hover .project-gif,
  .stills-project:hover .project-gif {
    opacity: 1; }

.col-4of12 .project .laurels-container .laurel {
  width: 4rem;
  height: 4rem; }
.col-4of12 .project__original .laurels-container .laurel {
  width: 5rem;
  height: 5rem; }

.stills-project {
  display: block;
  margin: 1rem;
  margin-bottom: 2rem; }
  .stills-project picture img {
    -webkit-filter: brightness(1) sepia(0) grayscale(0);
    -moz-filter: brightness(1) sepia(0) grayscale(0);
    -ms-filter: brightness(1) sepia(0) grayscale(0);
    filter: brightness(1) sepia(0) grayscale(0); }

#brands {
  max-width: 80rem;
  margin: 0 auto; }

.brand {
  text-align: center;
  padding: 4rem; }
  .brand img {
    margin: 0 auto; }

/* --------------------- PROJECT DETAIL ---------------------- */
.video-play-trigger {
  text-align: center;
  padding: 2rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%); }

#project {
  /*#brand { */ }
  #project .project-header {
    position: relative;
    text-align: center;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    /*
    background-color: #000;
    position: relative;
    text-align: center;
    height: 60vh;
    */ }
    #project .project-header .video-grid {
      max-width: 80rem;
      position: relative;
      padding: 1rem; }
      #project .project-header .video-grid > a {
        display: block; }
    #project .project-header.no-video {
      background-repeat: no-repeat;
      background-size: cover; }
    #project .project-header .video-thumbnail {
      opacity: 0.8;
      width: 100%;
      background-size: cover;
      display: block;
      padding: 1rem;
      margin: 0; }
      #project .project-header .video-thumbnail::after {
        content: " ";
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.4);
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 30%); }
    #project .project-header .project-scope {
      position: absolute;
      bottom: 2rem;
      left: 0;
      width: 100%;
      padding: 1rem; }
      #project .project-header .project-scope p {
        margin: 0 auto;
        font-size: 0.8rem; }
    #project .project-header .project-badges {
      margin-top: 1rem; }
  #project .project-container {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1rem; }
    #project .project-container h2 {
      margin: 1rem auto; }
    #project .project-container .project-results {
      padding: 2rem 0;
      margin: 0 auto; }
      #project .project-container .project-results ul, #project .project-container .project-results li {
        margin: 0 auto; }
    #project .project-container .result {
      -webkit-transition: all 0.25s cubic-bezier(0.75, 0, 0.23, 1.01);
      -moz-transition: all 0.25s cubic-bezier(0.75, 0, 0.23, 1.01);
      -ms-transition: all 0.25s cubic-bezier(0.75, 0, 0.23, 1.01);
      transition: all 0.25s cubic-bezier(0.75, 0, 0.23, 1.01);
      margin: 0 auto;
      padding: 1rem;
      font-size: 0.8rem;
      text-align: center !important; }
      #project .project-container .result .img-container {
        position: relative; }
      #project .project-container .result h4 {
        font-weight: bold;
        margin: 0.5em auto; }
      #project .project-container .result img {
        margin: 0 auto;
        -webkit-transition: all 0.1s cubic-bezier(0.75, 0, 0.23, 1.01);
        -moz-transition: all 0.1s cubic-bezier(0.75, 0, 0.23, 1.01);
        -ms-transition: all 0.1s cubic-bezier(0.75, 0, 0.23, 1.01);
        transition: all 0.1s cubic-bezier(0.75, 0, 0.23, 1.01);
        padding: 0 1rem;
        opacity: 0.8; }
      #project .project-container .result p {
        font-size: 0.9rem; }
      #project .project-container .result i {
        color: #87A19E;
        margin-right: 0.5rem; }
      #project .project-container .result:hover a > p, #project .project-container .result:hover a > small {
        color: #FF5252; }
      #project .project-container .result:hover img {
        opacity: 1; }
      #project .project-container .result a, #project .project-container .result p, #project .project-container .result small {
        color: rgba(255, 255, 255, 0.5); }
  #project .captions-grid {
    padding: 0; }
  #project .roles-grid {
    padding: 1rem;
    margin: 2rem auto; }
    #project .roles-grid .col-variable {
      width: 100%; }
    #project .roles-grid .role {
      margin-bottom: 1rem;
      text-align: center; }
    #project .roles-grid p {
      margin: 0;
      padding: 0;
      font-size: 0.9em; }
  #project .tag-container {
    padding: 0;
    margin: 1.5rem; }
  #project .more-projects {
    text-align: center;
    max-width: 60rem;
    margin: 0 auto;
    padding: 0; }

.project-footer-nav__container {
  max-width: 80rem;
  margin: 2rem auto;
  padding: 0 2rem; }

.project-footer-nav {
  margin: 0;
  border-radius: 0.5rem;
  overflow: hidden; }
  .project-footer-nav .project-tag {
    padding: 0.5rem 0.75em;
    display: inline-block; }
  .project-footer-nav a {
    color: #87A19E !important; }
    .project-footer-nav a:hover {
      color: #FFF !important; }

.post-nav {
  text-align: center;
  max-width: 76rem; }
  .post-nav > .grid {
    margin: 0 auto; }
  .post-nav .post-navleft {
    text-align: left; }
    .post-nav .post-navleft:hover span.fa {
      left: -1rem; }
  .post-nav .post-navright {
    text-align: right; }
    .post-nav .post-navright:hover span.fa {
      left: 1rem; }
  .post-nav .post-navleft a,
  .post-nav .post-navright a {
    -webkit-transition: all 0.25s cubic-bezier(0.75, 0, 0.23, 1.01);
    -moz-transition: all 0.25s cubic-bezier(0.75, 0, 0.23, 1.01);
    -ms-transition: all 0.25s cubic-bezier(0.75, 0, 0.23, 1.01);
    transition: all 0.25s cubic-bezier(0.75, 0, 0.23, 1.01); }
  .post-nav .post-navleft:hover a,
  .post-nav .post-navright:hover a,
  .post-nav .post-navleft.active a,
  .post-nav .post-navright.active a {
    background-color: #3B3B41;
    color: #b80000; }
  .post-nav .post-nav-link {
    -webkit-transition: all 0.25s cubic-bezier(0.75, 0, 0.23, 1.01);
    -moz-transition: all 0.25s cubic-bezier(0.75, 0, 0.23, 1.01);
    -ms-transition: all 0.25s cubic-bezier(0.75, 0, 0.23, 1.01);
    transition: all 0.25s cubic-bezier(0.75, 0, 0.23, 1.01);
    padding: 0 1.5rem;
    display: block;
    border: none;
    background-color: transparent;
    color: #FF5252; }
    .post-nav .post-nav-link span.fa {
      -webkit-transition: all 0.25s cubic-bezier(0.75, 0, 0.23, 1.01);
      -moz-transition: all 0.25s cubic-bezier(0.75, 0, 0.23, 1.01);
      -ms-transition: all 0.25s cubic-bezier(0.75, 0, 0.23, 1.01);
      transition: all 0.25s cubic-bezier(0.75, 0, 0.23, 1.01);
      font-size: 3.5em;
      position: relative;
      left: 0rem;
      top: -0.2rem; }

/* --------------------- ORIGINAL PROJECTS --------------------- */
#project .featurefilm-header .pullquote-container {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%); }
  #project .featurefilm-header .pullquote-container h2 {
    font-size: 4rem;
    font-weight: 50; }
  #project .featurefilm-header .pullquote-container .film-logo {
    max-width: 60rem;
    width: 100%;
    margin: 1rem auto; }
  #project .featurefilm-header .pullquote-container .film-logo-text {
    opacity: 0;
    position: absolute;
    left: -9999px; }
  #project .featurefilm-header .pullquote-container p.lead {
    margin: 0 auto; }
#project .featurefilm-header::before {
  content: " ";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.4); }
#project .featurefilm-container {
  padding-top: 4rem; }
  #project .featurefilm-container .video-grid-container {
    position: static;
    /*min-height: 70vh;*/ }
  #project .featurefilm-container .video-grid {
    width: 100%;
    padding: 0;
    /*max-width: $default-width * .75;
    padding: 1rem;*/ }
  #project .featurefilm-container .background-image {
    background-position: center center !important;
    background-size: cover !important;
    min-height: 100vh;
    position: relative; }
    #project .featurefilm-container .background-image .background-image-inner {
      padding: 1rem;
      position: relative;
      z-index: 10; }
    #project .featurefilm-container .background-image .background-image-narrow {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      max-width: 32rem;
      /*overflow: visible;*/ }
    #project .featurefilm-container .background-image .background-image-table {
      max-width: 80rem;
      width: 100%;
      margin: 0 auto;
      position: relative;
      transform: none;
      top: 0;
      left: 0; }
      #project .featurefilm-container .background-image .background-image-table p {
        max-width: 100%; }
    #project .featurefilm-container .background-image::before {
      content: " ";
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 1; }
#project .casestudy-block {
  padding: 8rem; }
  #project .casestudy-block .casestudy-text {
    max-width: 46rem;
    margin: 0 auto; }
  #project .casestudy-block .casestudy-center {
    max-width: 100%;
    text-align: center; }
  #project .casestudy-block h2 {
    font-weight: 100; }
  #project .casestudy-block.block-1 {
    background-color: #3B3B41; }
  #project .casestudy-block.block-2 {
    background-color: #2f2f34; }
  #project .casestudy-block iframe {
    max-width: 100%; }
#project .director-new-projects {
  max-width: 60rem;
  margin: 0 auto;
  padding: 0.5rem; }
  #project .director-new-projects p.lead {
    margin: 1rem auto; }
  #project .director-new-projects .img-container {
    position: relative;
    overflow: hidden;
    max-width: 20rem;
    border-radius: 0.5rem;
    margin: 0.5rem; }
    #project .director-new-projects .img-container img {
      padding: 0;
      margin: 0;
      display: block; }
    #project .director-new-projects .img-container .project-gif {
      max-width: 20rem;
      margin: 0 auto;
      border-radius: 0.5rem; }

.offset-captions {
  padding: 1rem; }
  .offset-captions .thumbnail {
    margin: 4rem 0;
    position: relative;
    height: 30rem; }
    .offset-captions .thumbnail img {
      max-width: 60%;
      position: absolute;
      top: 0; }
    .offset-captions .thumbnail.right img {
      right: 0; }

.casestudy-center,
.casestudy-center h2,
.casestudy-center hr,
.casestudy-center p {
  text-align: center;
  margin: 1rem auto; }

.slick-carousel .slick-prev {
  left: 25px;
  z-index: 1000; }

.slick-carousel .slick-next {
  right: 25px;
  z-index: 1000; }

.slick-carousel a {
  display: block;
  padding: 0; }

.slick-slide img {
  margin: 0 auto; }

.first-word {
  display: none; }

/* ------------------------ PHOTO GRID ------------------------- */
.photo-grid, .gifs-grid {
  text-align: center;
  margin: 0 0.5rem; }
  .photo-grid .thumbnail, .gifs-grid .thumbnail {
    margin: 0.5rem; }
  .photo-grid img, .gifs-grid img {
    display: inline-block !important;
    vertical-align: text-bottom;
    -webkit-transition: all 0.25s cubic-bezier(0.75, 0, 0.23, 1.01);
    -moz-transition: all 0.25s cubic-bezier(0.75, 0, 0.23, 1.01);
    -ms-transition: all 0.25s cubic-bezier(0.75, 0, 0.23, 1.01);
    transition: all 0.25s cubic-bezier(0.75, 0, 0.23, 1.01);
    -webkit-filter: brightness(1) grayscale(0);
    -moz-filter: brightness(1) grayscale(0);
    -ms-filter: brightness(1) grayscale(0);
    filter: brightness(1) grayscale(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden; }
    .photo-grid img:hover, .gifs-grid img:hover {
      -webkit-filter: brightness(0.8) grayscale(0);
      -moz-filter: brightness(0.8) grayscale(0);
      -ms-filter: brightness(0.8) grayscale(0);
      filter: brightness(0.8) grayscale(0); }

#screenings > div {
  width: 60%;
  text-align: left; }
  #screenings > div p {
    max-width: 100%; }
#screenings table {
  width: 100%;
  font-size: 0.9rem; }

@media (max-width: 67.5rem) {
  #screenings .virtual {
    display: none; } }
@media (max-width: 61rem) {
  #screenings .time {
    display: none; } }
@media (max-width: 43rem) {
  #screenings > div {
    width: 80%; } }
@media (max-width: 53.5rem) {
  .screenings-container table .virtual {
    display: none; } }
@media (max-width: 48.5rem) {
  .screenings-container table .location .first-word {
    display: inline; }
  .screenings-container table .location .full {
    display: none; } }
@media (max-width: 41rem) {
  .filter-tabs [class^='col-'] {
    width: 50%; }
    .filter-tabs [class^='col-'] .menu-item {
      padding: 0.5rem; } }
@media (max-width: 35rem) {
  .screenings-container table .time {
    display: none; } }
@media (max-width: 23rem) {
  .filter-tabs [class^='col-'] {
    width: 100%; } }

/*# sourceMappingURL=projects.css.map */