/* --------------------------------- FONTS -------------------------------- */
/* --------------------------------- COLOURS ----------------------------- */
/** Boldly original blue/green palette **/
/** Boldly multi-colour palette       **/
/** Boldly grayscale palette          **/
/*111*/
/*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: 1rem; }

.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;
  position: relative;
  overflow: hidden; }
  .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 .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;
      -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;
      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(15, 10, 10, 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(0.5) 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; }

.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); }

.project-tags {
  text-align: center;
  padding: 1rem; }

#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 .project-header,
#brand .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,
  #brand .project-header .video-grid {
    max-width: 80rem;
    position: relative;
    padding: 1rem; }
    #project .project-header .video-grid > a,
    #brand .project-header .video-grid > a {
      display: block; }
  #project .project-header.no-video,
  #brand .project-header.no-video {
    background-repeat: no-repeat;
    background-size: cover; }
  #project .project-header .video-thumbnail,
  #brand .project-header .video-thumbnail {
    opacity: 0.8;
    width: 100%;
    background-size: cover;
    display: block;
    padding: 0;
    margin: 0; }
    #project .project-header .video-thumbnail::after,
    #brand .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,
  #brand .project-header .project-scope {
    position: absolute;
    bottom: 1rem;
    left: 0;
    width: 100%;
    padding: 1rem; }
    #project .project-header .project-scope p,
    #brand .project-header .project-scope p {
      margin: 0;
      font-size: 0.8rem; }
  #project .project-header .project-badges,
  #brand .project-header .project-badges {
    margin-top: 1rem; }
#project #project-container,
#brand #project-container {
  margin: 0 auto;
  padding: 1rem; }
  #project #project-container h2,
  #brand #project-container h2 {
    margin: 1rem auto; }
  #project #project-container .project-results,
  #brand #project-container .project-results {
    padding: 4rem 0;
    margin: 0 auto; }
    #project #project-container .project-results ul, #project #project-container .project-results li,
    #brand #project-container .project-results ul,
    #brand #project-container .project-results li {
      margin: 0 auto; }
  #project #project-container .result,
  #brand #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,
    #brand #project-container .result .img-container {
      position: relative; }
    #project #project-container .result h4,
    #brand #project-container .result h4 {
      font-weight: bold;
      margin: 0.5em auto; }
    #project #project-container .result img,
    #brand #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,
    #brand #project-container .result p {
      font-size: 0.9rem; }
    #project #project-container .result i,
    #brand #project-container .result i {
      color: #87A19E;
      margin-right: 0.5rem; }
    #project #project-container .result:hover a > p, #project #project-container .result:hover a > small,
    #brand #project-container .result:hover a > p,
    #brand #project-container .result:hover a > small {
      color: #FF5252; }
    #project #project-container .result:hover img,
    #brand #project-container .result:hover img {
      opacity: 1; }
    #project #project-container .result a, #project #project-container .result p, #project #project-container .result small,
    #brand #project-container .result a,
    #brand #project-container .result p,
    #brand #project-container .result small {
      color: rgba(255, 255, 255, 0.5); }
#project .captions-grid,
#brand .captions-grid {
  padding: 0; }
  #project .captions-grid .project-snippet p,
  #brand .captions-grid .project-snippet p {
    font-size: 1rem;
    padding: 0 1rem; }
#project .roles-grid,
#brand .roles-grid {
  padding: 1rem;
  margin: 2rem auto; }
  #project .roles-grid .col-variable,
  #brand .roles-grid .col-variable {
    width: 100%; }
  #project .roles-grid .role,
  #brand .roles-grid .role {
    margin-bottom: 1rem;
    text-align: center; }
  #project .roles-grid p,
  #brand .roles-grid p {
    margin: 0;
    padding: 0;
    font-size: 0.9em; }
#project .more-projects,
#brand .more-projects {
  text-align: center;
  max-width: 60rem;
  margin: 0 auto;
  padding: 1rem; }
#project .project-footer-nav,
#brand .project-footer-nav {
  margin-bottom: 0;
  border-top: thin #0A0A0A solid;
  border-bottom: thin #0A0A0A solid;
  margin: 0; }
  #project .project-footer-nav .project-tag,
  #brand .project-footer-nav .project-tag {
    padding: 1.25rem 0.75em;
    display: inline-block; }
  #project .project-footer-nav a,
  #brand .project-footer-nav a {
    color: #333; }

.projects-nav {
  max-width: 80rem;
  margin: 0 auto; }
  .projects-nav .work-nav {
    text-align: left;
    padding: 1.2rem 0; }
    .projects-nav .work-nav a {
      margin-left: 0;
      margin-right: 1rem; }

.post-nav {
  margin: 1rem auto;
  width: 100%;
  text-align: center; }
  .post-nav > .grid {
    margin: 0 auto; }
  .post-nav p {
    margin: 1em 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:hover a,
  .post-nav .post-navright:hover a,
  .post-nav .post-navleft.active a,
  .post-nav .post-navright.active a {
    background-color: #FF5252;
    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: 0; }

/* --------------------- 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 .video-grid-container {
  position: static;
  min-height: 70vh; }
#project .featurefilm-container .video-grid {
  width: 100%;
  max-width: 60rem;
  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 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 32rem;
    padding: 1rem;
    overflow: visible; }
  #project .featurefilm-container .background-image .background-image-table {
    max-width: 80rem;
    width: 100%; }
    #project .featurefilm-container .background-image .background-image-table p {
      max-width: 100%; }
  #project .featurefilm-container .background-image::before {
    content: " ";
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5); }
#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: #333; }
  #project .casestudy-block.block-2 {
    background-color: #0F0A0A; }
  #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 {
  margin-top: 8rem; }
  .offset-captions .thumbnail {
    height: 40vw;
    margin: 4rem 0;
    position: relative; }
    .offset-captions .thumbnail img {
      width: 60vw;
      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; }
  .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 */