@font-face {
    font-family: 'Misato';
    src: url('/fonts/Misato/Misato.eot');
    src: url('/fonts/Misato/Misato.eot?#iefix') format('embedded-opentype'), 
      url('/fonts/Misato/Misato.woff2') format('woff2'), 
      url('/fonts/Misato/Misato.woff') format('woff'),  
      url('/fonts/Misato/Misato.ttf') format('truetype'), 
      url('/fonts/Misato/Misato.svg#Misato') format('svg');
  }

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

  body {
    font-size: 17px;
    font-family: 'Misato'!important;
    background-color: white; }

  header {
      z-index: 8999;
  }

  .grid {
    list-style: none;
    padding: 0;
    margin: 0;
    min-height: 100%;
    overflow: hidden; }
    .grid li {
      height: 420px;
      border: 10px solid white;
      color: black !important;
      display: block;
      cursor: pointer;
      position: relative;
      margin: 0;
      z-index: 0;
      box-shadow: none; }
      .grid li.open {
        z-index: 9000; }
      .grid li:hover {
        border: 0.5px solid #333;
        z-index: 10; }
        .grid li:hover .item-bg {
            background: rgba(255, 0, 0, .1) !important;}
        .grid li:hover .item-name h1 {
          -webkit-transform: translate(0, 0);
          -moz-transform: translate(0, 0);
          -ms-transform: translate(0, 0);
          -o-transform: translate(0, 0);
          transform: translate(0, 0);
          -webkit-transition-delay: 0s;
          -moz-transition-delay: 0s;
          transition-delay: 0s; }
        .grid li:hover .item-name p {
          opacity: 1;
          -webkit-transform: translate(0, 0);
          -moz-transform: translate(0, 0);
          -ms-transform: translate(0, 0);
          -o-transform: translate(0, 0);
          transform: translate(0, 0);
          -webkit-transition-delay: 0.1s;
          -moz-transition-delay: 0.1s;
          transition-delay: 0.1s; }
    .grid .item-bg-digitalcapture {
      width: 100%;
      height: 100%;
      background-size: cover !important;
      position: absolute;
      top: 0px;
      left: 0px;
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -ms-transform: scale(1);
      -o-transform: scale(1);
      transform: scale(1);
      -webkit-transition: all 0.2s;
      -moz-transition: all 0.2s;
      transition: all 0.2s; 
      background-image: url(http://www.michaeldjobi.com/projects/img/digital%20capture/set2.jpg); opacity:0.6;
      background-position: center;
  }
  .grid .item-bg-portraits {
      width: 100%;
      height: 100%;
      background-size: cover !important;
      position: absolute;
      top: 0px;
      left: 0px;
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -ms-transform: scale(1);
      -o-transform: scale(1);
      transform: scale(1);
      -webkit-transition: all 0.2s;
      -moz-transition: all 0.2s;
      transition: all 0.2s; 
      background-image: url(http://www.michaeldjobi.com/projects/img/portraits/riri4.png); opacity:0.6;
      background-position: center;}
  .grid .item-bg-lemongrove {
      width: 100%;
      height: 100%;
      background-size: cover !important;
      position: absolute;
      top: 0px;
      left: 0px;
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -ms-transform: scale(1);
      -o-transform: scale(1);
      transform: scale(1);
      -webkit-transition: all 0.2s;
      -moz-transition: all 0.2s;
      transition: all 0.2s; 
      background-image: url(http://www.michaeldjobi.com/projects/img/lemon_grove/carwash.png); opacity:0.6;
      background-position: center;}
  .grid .item-bg-bigsheepdesign {
      width: 100%;
      height: 100%;
      background-size: cover !important;
      position: absolute;
      top: 0px;
      left: 0px;
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -ms-transform: scale(1);
      -o-transform: scale(1);
      transform: scale(1);
      -webkit-transition: all 0.2s;
      -moz-transition: all 0.2s;
      transition: all 0.2s; 
      background-image: url(http://www.michaeldjobi.com/projects/img/bigsheep/teamwork2.png); opacity:0.6}
  .grid .item-bg-bigsheepdesigns {
      width: 100%;
      height: 100%;
      background-size: cover !important;
      position: absolute;
      top: 0px;
      left: 0px;
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -ms-transform: scale(1);
      -o-transform: scale(1);
      transform: scale(1);
      -webkit-transition: all 0.2s;
      -moz-transition: all 0.2s;
      transition: all 0.2s; 
      background-image: url(http://www.michaeldjobi.com/projects/img/bigsheep/teamwork.png); opacity:0.6}
  .grid .item-bg-byop {
      width: 100%;
      height: 100%;
      background-size: cover !important;
      position: absolute;
      top: 0px;
      left: 0px;
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -ms-transform: scale(1);
      -o-transform: scale(1);
      transform: scale(1);
      -webkit-transition: all 0.2s;
      -moz-transition: all 0.2s;
      transition: all 0.2s; 
      background-image: url(http://www.michaeldjobi.com/projects/img/build_your_plate/plate.png); opacity:0.6}
  .grid .item-bg-documentary {
      width: 100%;
      height: 100%;
      background-size: cover !important;
      position: absolute;
      top: 0px;
      left: 0px;
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -ms-transform: scale(1);
      -o-transform: scale(1);
      transform: scale(1);
      -webkit-transition: all 0.2s;
      -moz-transition: all 0.2s;
      transition: all 0.2s; 
      background-image: url(http://www.michaeldjobi.com/projects/img/documentary/studio.JPG); opacity:0.6}
  .grid .item-bg-reel {
      width: 100%;
      height: 100%;
      background-size: cover !important;
      position: absolute;
      top: 0px;
      left: 0px;
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -ms-transform: scale(1);
      -o-transform: scale(1);
      transform: scale(1);
      -webkit-transition: all 0.2s;
      -moz-transition: all 0.2s;
      transition: all 0.2s; 
      background-image: url(http://www.michaeldjobi.com/projects/img/Reel/box2.jpg); opacity:0.6}
.grid .item-bg-environmental {
      width: 100%;
      height: 100%;
      background-size: cover !important;
      position: absolute;
      top: 0px;
      left: 0px;
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -ms-transform: scale(1);
      -o-transform: scale(1);
      transform: scale(1);
      -webkit-transition: all 0.2s;
      -moz-transition: all 0.2s;
      transition: all 0.2s; 
      background-image: url(http://www.michaeldjobi.com/projects/img/digital%20capture/luiza.png); opacity:0.6}
  .grid .item-bg-mini {
      width: 100%;
      height: 100%;
      background-size: cover !important;
      position: absolute;
      top: 0px;
      left: 0px;
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -ms-transform: scale(1);
      -o-transform: scale(1);
      transform: scale(1);
      -webkit-transition: all 0.2s;
      -moz-transition: all 0.2s;
      transition: all 0.2s; 
      background-image: url(http://www.michaeldjobi.com/projects/img/minicooper/mini2.jpg); opacity:0.6}


    .grid .item-bg-subaru {
      width: 100%;
      height: 100%;
      background-size: cover !important;
      position: absolute;
      top: 0px;
      left: 0px;
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -ms-transform: scale(1);
      -o-transform: scale(1);
      transform: scale(1);
      -webkit-transition: all 0.2s;
      -moz-transition: all 0.2s;
      transition: all 0.2s; 
      background-image: url(http://www.michaeldjobi.com/projects/img/subaru/subaru_hero.jpg); opacity:0.6}


    

    .grid .item-name {
      display: table;
      width: 100%;
      height: 100%;
      text-align: center; }

    .grid .item-name-inner {
      display: table-cell;
      vertical-align: middle; }
      .grid .item-name-inner h1 {
        -webkit-transition: all 0.2s 0.05s;
        -moz-transition: all 0.2s 0.05s;
        transition: all 0.2s 0.05s;
        -webkit-transform: translate(0, 25px);
        -moz-transform: translate(0, 25px);
        -ms-transform: translate(0, 25px);
        -o-transform: translate(0, 25px);
        transform: translate(0, 25px); }
        .grid .item-name-inner h1 small {
          display: block;
          text-transform: uppercase;
          color: black;
          font-size: 14px;
          margin-bottom: 15px;
          font-weight: 400;
          letter-spacing: 0.05em; }
        .grid .item-name-inner h1 b {
          display: block;
          margin-bottom: 50px;
          font-size: 42px;
          font-weight: 200; }
      .grid .item-name-inner p {
        font-size: 18px;
        font-weight: 200;
        border-bottom: 2px solid black;
        display: inline-block;
        padding-bottom: 8px;
        letter-spacing: 0.05em;
        opacity: 0;
        -webkit-transition: all 0.2s 0s;
        -moz-transition: all 0.2s 0s;
        transition: all 0.2s 0s;
        -webkit-transform: translate(0, 25px);
        -moz-transform: translate(0, 25px);
        -ms-transform: translate(0, 25px);
        -o-transform: translate(0, 25px);
        transform: translate(0, 25px); }
    .grid .item-overlay {
      opacity: 0;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      -webkit-transition: all 0.4s ease;
      -moz-transition: all 0.4s ease;
      transition: all 0.4s ease;
      z-index: -1;
      background-size: cover !important;
      pointer-events: none;
      cursor: default;
      overflow: auto;
      -webkit-overflow-scrolling: touch; 
      background-color: white;}
    .grid .item-content {
      max-width: 800px;
      margin: 0 auto;
      padding: 80px 60px 60px; }
      .grid .item-content h2 {
        font-size: 80px;
        margin-bottom: 50px;
        margin-top: 0;
        font-weight: 200; }
      .grid .item-content p {
        font-family: "Josefin Sans", "Helvetica Neue", Helvetica, sans-serif;
        margin-bottom: 25px; }
      .grid .item-content .image {
        display: block;
        margin: 50px -80px 50px; }
        .grid .item-content .image img {
          width: 100%; }
  .hero{
      padding-bottom: 25px;
  }
    .grid .close {
      cursor: pointer;
      z-index: 1000;
      text-shadow: none;
      color: black;
      font-weight: 100;
      font-size: 90px;
      opacity: 0.7;
      position: fixed;
      top: 0px;
      right: 40px; }
      .grid .close:hover {
        opacity: 1; }

  h2{
         color: #C24366;

  }
  h2.green {
         color: #009688;

  }
  h2.red {
         color: #ff1744;

  }
  h2.lemon {
         color: #8bc34a;
  }
  h2.amber {
         color: #ffc107;
  }
  h2.purple {
         color: #9575cd;
  }
  h2.deepgreen {
         color: #388e3c;
  }
  h2.blue {
         color: #132a9b;
  }
  h2.pink {
         color: #ea2c58;
  }
  h2.yellow{
         color: #FFC414;
  }
  h3{
          font-family: "Josefin Sans", "Helvetica Neue", Helvetica, sans-serif;

  }
  h4{
          font-family: "Josefin Sans", "Helvetica Neue", Helvetica, sans-serif;
          text-decoration: underline;
  }
  h5{
          font-family: "Josefin Sans", "Helvetica Neue", Helvetica, sans-serif;
          text-decoration: underline;
  }
  p.tool{
      font-family: 'Misato' !important; 
  }

  video {
    width: 100%    !important;
  }
  .a-icn {
    fill: rgba(255, 255, 255, 1)
  }

  .a-icn:hover {
    fill: rgba(0, 0, 0, 1);
    cursor: pointer;
  }


  a {
    background: none;
    border: none;
    outline: none;
    margin: 2vmax;
    display: block;
  }

  a:hover small {
    opacity: 1;
  }

  small {
    display: block;
   
  }
  #a {
    width: 120px;
    display: block;
    margin: 0 auto;    
    padding: 10px 0;
  }

  #a img {
    width: 100%;
  }

  #a:hover {
    cursor: pointer;
  }


  header{
      font-family: 'Misato';
      text-align: center;
      background-color: white;
      font-size: 40px;
      
  }

  .grid li:nth-child(1) .item-bg, .grid li:nth-child(1) .item-overlay {
    background-color: #fff; }
  .grid li:nth-child(2) .item-bg, .grid li:nth-child(2) .item-overlay {
    background-color: #fff; }
  .grid li:nth-child(3) .item-bg, .grid li:nth-child(3) .item-overlay {
    background-color: #fff; }
  .grid li:nth-child(4) .item-bg, .grid li:nth-child(4) .item-overlay {
    background-color: #fff; }
  .grid li:nth-child(5) .item-bg, .grid li:nth-child(5) .item-overlay {
    background-color: #fff; }
  .grid li:nth-child(6) .item-bg, .grid li:nth-child(6) .item-overlay {
    background-color: #fff; }
  .grid li:nth-child(7) .item-bg, .grid li:nth-child(7) .item-overlay {
    background-color: #fff; }
  .grid li:nth-child(8) .item-bg, .grid li:nth-child(8) .item-overlay {
    background-color: #fff; }

  @media (max-width: 992px) {
    .grid .item-content {
      padding: 40px; }
      .grid .item-content .image {
        margin-left: 0;
        margin-right: 0; } }
  @media (max-width: 768px) {
    .grid .item-content {
      padding: 40px 30px; }
      .grid .item-content h2 {
        font-size: 50px;
        margin-bottom: 30px;
        margin-top: 0;
        font-weight: 200; }
      .grid .item-content .image {
        margin: 30px 0; }
    .grid .close {
      font-size: 50px;
      top: 0px;
      right: 30px;
      font-weight: 200; } }