/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline; }

html {
  line-height: 1; }

ol, ul {
  list-style: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle; }

q, blockquote {
  quotes: none; }
  q:before, q:after, blockquote:before, blockquote:after {
    content: "";
    content: none; }

a img {
  border: none; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block; }

* {
  padding: 0;
  margin: 0; }

html,
body {
  height: 100%;
  width: 100%; }

body {
  overflow-x: hidden; }

body {
  padding-bottom: 60px; }

.container {
  max-width: 1024px;
  width: 90%;
  margin: 0 auto; }

img.cycle-slide {
  width: 100%; }

.header {
  height: 223px;
  width: 100%;
  position: relative; }
  .header .header-slideshow {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0; }
    .header .header-slideshow img {
      width: 100%;
      height: 100%; }
  .header .logo {
    padding-top: 46px; }
    .header .logo a {
      text-decoration: none; }
    .header .logo h1 {
      font-family: "Karla";
      font-weight: 400;
      font-size: 20px;
      margin: 0;
      display: none;
      padding: 0;
      color: #FFF; }
      .header .logo h1.active {
        display: block; }
  .header .menu {
    margin-top: 45px; }
    .header .menu ul {
      list-style: none; }
      .header .menu ul li {
        float: left; }
        .header .menu ul li a {
          display: block;
          border: 1px solid #1d1d1b;
          box-shadow: 1px 0px 0px #1D1D1B,0px 1px 0px #1D1D1B,2px 1px 0px #1D1D1B,1px 2px 0px #1D1D1B,3px 2px 0px #1D1D1B,2px 3px 0px #1D1D1B,4px 3px 0px #1D1D1B,3px 4px 0px #1D1D1B,5px 4px 0px #1D1D1B,4px 5px 0px #1D1D1B,6px 5px 0px #1D1D1B,5px 6px 0px #1D1D1B;
          background: #FFF;
          width: 100px;
          height: 30px;
          font-weight: 700;
          font-size: 17px;
          font-family: "Karla";
          color: #000;
          text-transform: uppercase;
          text-decoration: none;
          line-height: 30px;
          text-align: center;
          margin-right: 10px; }
          .header .menu ul li a:hover {
            background: #000;
            color: #FFF; }

.dropdown {
  position: relative;
  display: table; }
  .dropdown.workd {
    margin-bottom: 20px;
    margin-left: 10px; }

.dropdown-field {
  height: 35px;
  width: 136px;
  background: #FFF;
  border: 3px solid #1d1d1b;
  box-shadow: -1px 0px 0px #1D1D1B,-0px 1px 0px #1D1D1B,-2px 1px 0px #1D1D1B,-1px 2px 0px #1D1D1B,-3px 2px 0px #1D1D1B,-2px 3px 0px #1D1D1B,-4px 3px 0px #1D1D1B,-3px 4px 0px #1D1D1B,-5px 4px 0px #1D1D1B,-4px 5px 0px #1D1D1B,-6px 5px 0px #1D1D1B,-5px 6px 0px #1D1D1B, -7px 6px 0px #1D1D1B,-6px 7px 0px #1D1D1B,-8px 7px 0px #1D1D1B,-7px 8px 0px #1D1D1B,-9px 8px 0px #1D1D1B,-8px 9px 0px #1D1D1B,-10px 9px 0px #1D1D1B,-9px 10px 0px #1D1D1B,-11px 10px 0px #1D1D1B,-10px 11px 0px #1D1D1B,-12px 11px 0px #1D1D1B,-11px 12px 0px #1D1D1B;
  padding: 0 10px;
  line-height: 35px;
  font-family: "Karla";
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase; }

.content {
  margin-top: 80px; }

.clear {
  clear: both; }

.dropdowns.left {
  margin-right: 50px;
  float: left; }

.dropdown-field,
.dropdown-arrow {
  float: left;
  cursor: pointer; }

.dropdown-arrow {
  position: relative;
  z-index: 2;
  margin-top: 10px; }

.dropdown-list {
  position: absolute;
  width: 158px;
  top: 39px;
  z-index: 2;
  left: 54px;
  display: none; }
  .dropdown-list.active {
    display: block; }
  .dropdown-list li {
    height: 35px;
    background: #000;
    border-bottom: 1px solid #FFF;
    width: 100%;
    line-height: 35px;
    font-family: "Karla";
    font-size: 13px;
    font-weight: 400;
    text-transform: uppercase;
    color: #FFF;
    cursor: pointer;
    text-indent: 10px; }

.dropdown.small .dropdown-field h1 {
  font-size: 14px !important; }

.grid {
  width: 1064px;
  margin-left: -20px; }

.col-1 {
  width: 223px; }

.col-2 {
  width: 490px; }

.col-3 {
  width: 754px; }

.col-4 {
  width: 1020px; }

.col {
  margin: 0 20px;
  display: inline-block;
  margin-bottom: 40px; }

strong {
  font-weight: 700 !important; }

.col.first {
  vertical-align: top; }

.item img {
  width: 100%; }
.item a {
  color: #1d1d1b;
  text-decoration: none; }
.item h1 {
  text-align: right;
  font-family: "Karla";
  font-weight: 400;
  font-size: 14px;
  text-transform: uppercase;
  margin-top: 5px;
  margin-bottom: 2px; }
.item h2 {
  font-family: "Karla";
  text-align: right;
  font-size: 13px;
  color: #C6C6C5; }
  .item h2 span {
    text-decoration: underline;
    display: inline-block;
    text-transform: lowercase;
    margin-left: 5px;
    cursor: pointer; }

.project-title h2 {
  font-family: "Karla";
  font-weight: 400;
  text-transform: uppercase;
  font-size: 38px;
  color: #1D1D1B; }
.project-title h1 {
  font-family: "Karla";
  font-weight: 700;
  font-size: 38px;
  color: #1D1D1B;
  text-transform: uppercase; }

.project .full-img-container {
  display: block;
  position: relative; }
  .project .full-img-container .full-img {
    display: block; }
  .project .full-img-container .play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
    cursor: pointer; }

.full-img {
  width: 100%; }

.contact-img {
  margin-bottom: 50px;
  position: relative; }
  .contact-img a {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: #000;
    color: #FFF !important;
    padding: 5px 10px;
    font-family: "Karla";
    font-size: 18px; }

.contact-grid .col {
  vertical-align: top; }
.contact-grid h1, .contact-grid p, .contact-grid label {
  font-size: 14px;
  font-family: "Karla";
  color: #1d1d1b;
  line-height: 19px; }
.contact-grid h1 {
  font-weight: 700; }
.contact-grid p {
  margin-bottom: 20px; }
.contact-grid a {
  text-decoration: none;
  color: #1d1d1b; }
.contact-grid form {
  margin-top: 10px; }
  .contact-grid form input {
    width: 100%;
    background: #fff;
    border: 1px solid #1d1d1b;
    padding: 5px;
    box-sizing: border-box;
    margin-bottom: 10px; }
  .contact-grid form input[type=submit] {
    background: #000;
    color: #FFF;
    float: right;
    display: table;
    width: auto;
    font-family: "Karla";
    text-transform: uppercase; }

.story .manifesto {
  background: #DCD459;
  width: 760px;
  position: absolute;
  right: -466px;
  z-index: 999;
  margin-top: 50px;
  padding-left: 80px;
  padding-bottom: 70px;
  box-sizing: border-box;
  max-height: 1035px;
  transition: 1s all;
  cursor: pointer;
  overflow: hidden; }
  .story .manifesto .close {
    position: absolute;
    top: 25px;
    right: 25px; }
  .story .manifesto.active {
    max-height: 2100px;
    right: 50%;
    margin-right: -510px;
    cursor: initial; }
  .story .manifesto h1 {
    font-family: "Karla";
    font-weight: 700;
    font-size: 62px;
    color: #301C86;
    border-bottom: 1px solid #301C86;
    padding-bottom: 20px;
    padding-top: 70px;
    margin-bottom: 35px; }
  .story .manifesto p {
    width: 85%;
    font-family: "Karla";
    color: #301C86;
    font-size: 21px;
    font-weight: 400;
    line-height: 31px;
    margin-bottom: 35px; }

.project {
  clear: both;
  margin-top: 50px;
  margin-bottom: 50px; }
  .project .full-img {
    width: 100%; }
  .project .project-info h1 {
    font-family: "Karla";
    font-weight: bold;
    font-size: 17px;
    color: #1d1db;
    margin-top: 25px;
    margin-bottom: 25px; }
  .project .project-info p {
    font-family: "karla";
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #1D1D1B;
    width: 50%; }
  .project .project-info a {
    color: #1D1D1B; }
  .project .project-subinfo {
    width: 40%;
    border-top: 1px solid #1D1D1B;
    margin-top: 40px;
    padding-bottom: 80px;
    padding-top: 40px; }
    .project .project-subinfo h1, .project .project-subinfo p {
      font-size: 14px;
      line-height: 17px;
      color: #1d1d1b;
      font-family: "Karla";
      font-weight: 400; }
    .project .project-subinfo h1 {
      font-weight: 700; }
    .project .project-subinfo a {
      color: #1D1D1B; }

.news-item {
  width: 32%;
  margin-right: 2%;
  margin-bottom: 90px;
  float: left; }
  .news-item .news-image {
    width: 100%;
    margin-bottom: 30px; }
    .news-item .news-image img {
      width: 100%;
      display: block; }
  .news-item .news-date {
    margin-bottom: 30px;
    width: 100%;
    background: #000;
    height: 30px;
    text-indent: 10px;
    font-family: "Karla";
    font-size: 14px;
    color: #FFF;
    line-height: 30px; }
  .news-item:nth-child(3n) {
    margin-right: 0; }
  .news-item:nth-child(3n + 1) {
    clear: both; }
  .news-item .news-info h1 {
    font-family: "Karla";
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 15px; }
    .news-item .news-info h1 span {
      font-weight: 400; }
  .news-item .news-info p {
    line-height: 14px;
    font-size: 12px;
    font-family: "Karla";
    font-weight: 400;
    margin-bottom: 15px; }
  .news-item .news-info a {
    color: #000; }
  .news-item .news-info .view-video {
    font-size: 8px;
    text-decoration: none;
    text-transform: uppercase;
    font-family: "Karla";
    font-weight: 400;
    color: #000; }

.story h1 {
  font-family: "Karla";
  font-size: 23px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 25px;
  color: #1d1d1b; }
.story p {
  font-family: "Karla";
  font-size: 18px;
  line-height: 21px;
  font-weight: 400;
  color: #1d1d1b; }
.story .dropdown {
  float: left; }

.olivetree-story {
  width: 760px;
  float: right; }

.olivetree-team {
  width: 100%;
  margin-top: 55px; }
  .olivetree-team h1 {
    width: 760px;
    float: right; }
  .olivetree-team .person {
    clear: both;
    margin-bottom: 5px; }
    .olivetree-team .person img {
      width: 113px;
      float: left; }
    .olivetree-team .person:nth-child(2n - 1) {
      width: 760px;
      float: right; }
    .olivetree-team .person .person-text {
      width: 350px;
      float: left;
      margin-left: 25px; }
      .olivetree-team .person .person-text h2,
      .olivetree-team .person .person-text h3,
      .olivetree-team .person .person-text p {
        font-family: "Karla";
        font-size: 18px;
        font-weight: 400;
        line-height: 20px; }
      .olivetree-team .person .person-text h3 {
        margin-bottom: 20px;
        font-style: italic; }
      .olivetree-team .person .person-text h2 {
        text-transform: uppercase; }

.olivetree-branded {
  margin-top: 110px;
  position: relative; }
  .olivetree-branded .title {
    position: absolute;
    top: 60px;
    left: 0; }
  .olivetree-branded .big-image,
  .olivetree-branded iframe.big-image {
    margin-left: 110px;
    width: 914px; }
  .olivetree-branded p {
    margin-top: 40px;
    width: 627px;
    margin-left: 110px; }

.olivetree-gif1 {
  width: 842px;
  margin-bottom: 80px;
  float: right;
  margin-top: 40px; }
  .olivetree-gif1 h3 {
    font-size: 24px;
    text-transform: uppercase;
    font-family: "Karla";
    color: #1d1d1b;
    font-weight: 400;
    font-style: italic;
    margin-left: 38px; }

.olivetree-gif2 {
  position: relative;
  margin-top: 80px;
  float: left; }
  .olivetree-gif2 img:nth-child(1) {
    position: absolute;
    top: 0;
    left: 0; }
  .olivetree-gif2 img:nth-child(2) {
    padding-left: 90px; }
  .olivetree-gif2 p {
    width: 627px;
    margin-left: 120px; }

.olivetree-enter {
  width: 760px;
  position: relative;
  padding-bottom: 40px;
  float: right;
  margin-top: 120px; }
  .olivetree-enter img:nth-child(1) {
    position: absolute;
    left: -115px;
    top: 55px; }
  .olivetree-enter iframe {
    width: 760px;
    display: block; }
  .olivetree-enter img:nth-child(2) {
    display: block;
    width: 760px; }
  .olivetree-enter p {
    margin-top: 40px; }

.social-icon {
  float: right;
  margin-top: -45px; }

.video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0; }
  .video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }

.video {
  position: fixed;
  height: 100%;
  top: 0;
  z-index: 9999;
  left: 0;
  width: 100%;
  display: none;
  background: rgba(0, 0, 0, 0.4); }
  .video iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -287px;
    margin-left: -512px; }

.manifesto.mobile,
.menu-icon {
  display: none !important; }

.manifesto-button {
  display: none; }

@media all and (max-width: 1024px) {
  .production-services {
    margin: 0 !important;
    width: 100% !important;
    height: auto !important;
    position: initial !important; }
    .production-services .slide-container {
      position: initial !important;
      width: 100% !important;
      margin: 0 0 40px 0 !important; }

  .manifesto-button {
    position: fixed;
    display: block;
    right: -4px;
    z-index: 999;
    top: 190px; }

  .project .project-info p,
  .project .project-subinfo {
    width: 100%; }

  .col {
    width: 100% !important;
    margin: 0 auto 40px auto !important; }

  .dropdowns.left {
    float: none;
    margin-bottom: 40px; }

  .olivetree-story {
    width: 100%;
    float: none; }

  .dropdown.small {
    float: none;
    margin-bottom: 40px; }

  .olivetree-team h1,
  .olivetree-team .person {
    width: 100% !important;
    float: none !important; }

  .olivetree-team .person {
    margin-bottom: 40px !important;
    clear: both; }
    .olivetree-team .person:nth-child(2) {
      margin-top: 40px !important; }
      .olivetree-team .person:nth-child(2) img,
      .olivetree-team .person:nth-child(2) .person-text {
        padding-top: 40px; }
    .olivetree-team .person img {
      width: 20% !important; }
    .olivetree-team .person .person-text {
      width: 70%;
      float: right;
      margin: 0; }

  .grid {
    width: 100%;
    margin: 0 auto; }

  .manifesto.mobile {
    display: block !important;
    padding: 20px;
    width: 100%;
    overflow: scroll;
    position: fixed;
    right: -100%;
    z-index: 99999;
    margin: 0 !important;
    height: 100%;
    max-height: 199999px !important;
    transition: 1s right;
    top: 0; }
    .manifesto.mobile .manifesto-container {
      width: 90%;
      position: absolute;
      left: 5%;
      top: 0px; }
    .manifesto.mobile .close {
      z-index: 2; }
    .manifesto.mobile.active {
      right: 0; }
    .manifesto.mobile p {
      width: 100%; }
    .manifesto.mobile h1 {
      font-size: 30px; }

  .story .dropdown.small {
    display: none; }

  .news-item {
    float: none;
    display: block;
    width: 100%;
    margin-bottom: 100px; }

  .video iframe {
    width: 100%;
    height: 70%;
    top: 15%;
    left: 0;
    margin: 0; }

  .olivetree-enter,
  .olivetree-gif2,
  .olivetree-gif1,
  .olivetree-branded {
    width: 100%; }
    .olivetree-enter img,
    .olivetree-enter iframe,
    .olivetree-gif2 img,
    .olivetree-gif2 iframe,
    .olivetree-gif1 img,
    .olivetree-gif1 iframe,
    .olivetree-branded img,
    .olivetree-branded iframe {
      max-width: 100% !important;
      padding: 0 !important; }

  .olivetree-branded p,
  .olivetree-gif2 p {
    width: 100%;
    margin-left: 0;
    margin-top: 20px; }

  .olivetree-branded .title,
  .olivetree-enter img:nth-child(1) {
    position: initial;
    margin-top: 00px;
    margin-bottom: 40px; }

  .olivetree-branded .big-image {
    width: 100%;
    margin-left: 0; }

  .olivetree-gif2 img:nth-child(1) {
    position: initial;
    margin-bottom: 20px;
    margin-top: 100px; }

  .manifesto.desktop {
    display: none; }

  .social-icon {
    clear: both;
    float: none;
    padding-top: 30px; }

  .logo {
    padding-top: 26px !important;
    float: left; }

  .header {
    height: 173px; }

  .menu-icon {
    display: block !important;
    float: right;
    margin-top: 49px; }

  .menu {
    position: absolute;
    top: 38px;
    z-index: 999999;
    display: none;
    right: 11px; }
    .menu.active {
      display: block; }

  .menu li {
    float: none !important;
    margin-bottom: 10px; } }
.production-services {
  width: 910px;
  height: 1464px;
  margin-left: 100px;
  position: relative;
  z-index: 99; }
  .production-services .slide-container-content {
    width: 100%;
    height: 100%; }
    .production-services .slide-container-content div {
      display: none;
      background-size: cover;
      width: 100%;
      height: 100%;
      background-position: center center; }
      .production-services .slide-container-content div.active {
        display: block; }
  .production-services .slide-container {
    position: absolute;
    overflow: hidden; }
    .production-services .slide-container:nth-child(1) {
      height: 384px;
      width: 688px;
      left: 126px;
      top: 30px; }
    .production-services .slide-container:nth-child(2) {
      top: 462px;
      width: 436px;
      height: 330px;
      left: 25px; }
    .production-services .slide-container:nth-child(3) {
      top: 828px;
      width: 338px;
      height: 226px;
      left: 78px; }
    .production-services .slide-container:nth-child(4) {
      top: 1124px;
      left: 25px;
      width: 436px;
      height: 330px; }
    .production-services .slide-container:nth-child(5) {
      width: 410px;
      height: 746px;
      top: 462px;
      left: 508px; }

@media all and (max-width: 1025px) {
  .big-image {
    width: 85% !important; } }