* {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

@font-face {
  font-family: 'Marr Sans';
  src: url("../fonts/MarrSans-Semibold-Web.eot");
  src: url("../fonts/MarrSans-Semibold-Web.eot?#iefix") format("embedded-opentype"), url("../fonts/MarrSans-Semibold-Web.woff2") format("woff2"), url("../fonts/MarrSans-Semibold-Web.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-stretch: normal; }

body {
  overflow-y: scroll;
  overflow-x: hidden; }

h1, h2, h3, h4, h5, h6 {
  font-weight: normal; }

li {
  list-style-type: none; }

a {
  text-decoration: none;
  color: black; }

::-moz-selection {
  background: #ff604f;
  color: #000;
  outline: none; }

::selection {
  background: #ff604f;
  color: #000;
  outline: none; }

::-webkit-selection {
  background: #ff604f;
  color: #000;
  outline: none; }

::-webkit-input-placeholder {
  color: #000; }

:-moz-placeholder {
  color: #000; }

::-moz-placeholder {
  color: #000; }

:-ms-input-placeholder {
  color: #000; }

address {
  font-style: normal; }

.remove {
  display: none; }

.hide {
  opacity: 0;
  pointer-events: none; }

.contents {
  overflow: hidden; }

body {
  -webkit-transition: background cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.5s;
  transition: background cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.5s; }
  @media only screen and (min-width: 1600px) {
    body {
      font: 24px/31.2px "Marr Sans", Arial, Helvetica, sans-serif; } }
  @media only screen and (min-width: 1025px) and (max-width: 1599px) {
    body {
      font: 18px/23.4px "Marr Sans", Arial, Helvetica, sans-serif; } }
  @media only screen and (min-width: 481px) and (max-width: 1024px) {
    body {
      font: 18px/23.4px "Marr Sans", Arial, Helvetica, sans-serif; } }
  @media (max-width: 480px) {
    body {
      font: 18px/23.4px "Marr Sans", Arial, Helvetica, sans-serif; } }

@media (max-width: 480px) {
  .full {
    margin: 30px; } }

@media only screen and (min-width: 481px) and (max-width: 1024px) {
  .full {
    margin: 0 60px; } }

@media only screen and (min-width: 1025px) and (max-width: 1599px) {
  .full {
    margin: 0 90px; } }

@media only screen and (min-width: 1600px) {
  .full {
    margin: 30px 120px; } }

section img, div img {
  width: 100%;
  height: auto; }

::-webkit-scrollbar {
  width: 14px;
  height: 1px; }

::-webkit-scrollbar-track {
  border-radius: 0px;
  background: #000; }

::-webkit-scrollbar-thumb {
  border-radius: 0px;
  background: #ff604f; }

.noscroll {
  overflow: hidden;
  padding-right: 5px; }

body {
  background: #000; }

.ghost {
  position: fixed;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  background: #ff604f;
  opacity: .5;
  cursor: pointer;
  z-index: 7777;
  -webkit-transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.6s;
  transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.6s; }
  .ghost.closed {
    pointer-events: none;
    opacity: 0; }

main {
  min-height: 100vh;
  opacity: 0;
  -webkit-transition: opacity cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.3s;
  transition: opacity cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.3s; }
  @media (max-width: 480px) {
    main {
      min-height: inherit; } }
  @media only screen and (min-width: 481px) and (max-width: 1024px) {
    main {
      padding-top: 100px; } }
  main.loaded {
    opacity: 1; }

.loading {
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 8889;
  opacity: 1;
  text-align: center;
  overflow: hidden;
  -webkit-transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.5s;
  transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.5s; }
  .loading.out {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    pointer-events: none; }
  .loading svg {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); }

header {
  display: block;
  top: 0px;
  left: 0px;
  z-index: 9999;
  -webkit-transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.4s;
  transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.4s;
  background: transparent; }
  @media (max-width: 480px) {
    header {
      position: fixed; } }
  @media only screen and (min-width: 481px) and (max-width: 1024px) {
    header {
      position: absolute; } }
  @media only screen and (min-width: 1025px) and (max-width: 1599px) {
    header {
      position: fixed; } }
  @media only screen and (min-width: 1600px) {
    header {
      position: fixed; } }
  @media (max-width: 480px) {
    header {
      width: 100%; } }
  @media only screen and (min-width: 481px) and (max-width: 1024px) {
    header {
      width: 100%; } }
  @media only screen and (min-width: 1025px) and (max-width: 1599px) {
    header {
      width: inherit; } }
  @media only screen and (min-width: 1600px) {
    header {
      width: inherit; } }
  @media (max-width: 480px) {
    header {
      background: #000; } }
  @media only screen and (min-width: 481px) and (max-width: 1024px) {
    header {
      background: transparent; } }
  @media only screen and (min-width: 1025px) and (max-width: 1599px) {
    header {
      background: transparent; } }
  @media only screen and (min-width: 1600px) {
    header {
      background: transparent; } }
  header.work {
    width: -webkit-calc(80% - 5px);
    width: calc(80% - 5px);
    background: black; }
    header.work li a.active:not(.work) {
      border-color: black; }
    @media (max-width: 480px) {
      header.work {
        width: 100%; } }
  header div.logo {
    display: inline-block;
    position: relative;
    z-index: 8888; }
    @media (max-width: 480px) {
      header div.logo {
        width: 13%; } }
    @media only screen and (min-width: 481px) and (max-width: 1024px) {
      header div.logo {
        width: inherit; } }
    @media only screen and (min-width: 1025px) and (max-width: 1599px) {
      header div.logo {
        width: inherit; } }
    @media only screen and (min-width: 1600px) {
      header div.logo {
        width: inherit; } }
    header div.logo a {
      position: relative;
      z-index: 8888;
      display: inline-block;
      background: #000; }
      @media (max-width: 480px) {
        header div.logo a {
          padding: 5% 30%; } }
      @media only screen and (min-width: 481px) and (max-width: 1024px) {
        header div.logo a {
          padding: 25px 50px; } }
      @media only screen and (min-width: 1025px) and (max-width: 1599px) {
        header div.logo a {
          padding: 25px 50px; } }
      @media only screen and (min-width: 1600px) {
        header div.logo a {
          padding: 25px 50px; } }
    header div.logo svg {
      display: block;
      height: 50px; }
      @media (max-width: 480px) {
        header div.logo svg {
          width: 30px; } }
  header ul.menu {
    position: relative;
    z-index: 7777;
    top: 0px;
    display: inline-block;
    margin-left: -4px;
    padding-left: 60px;
    background: #000;
    padding: 25px 40px;
    -webkit-transition: all ease .3s;
    transition: all ease .3s;
    vertical-align: top; }
    @media (max-width: 480px) {
      header ul.menu {
        -webkit-transform: translateX(0%);
        transform: translateX(0%); } }
    @media only screen and (min-width: 481px) and (max-width: 1024px) {
      header ul.menu {
        -webkit-transform: translateX(-102%);
        transform: translateX(-102%); } }
    @media only screen and (min-width: 1025px) and (max-width: 1599px) {
      header ul.menu {
        -webkit-transform: translateX(-102%);
        transform: translateX(-102%); } }
    @media only screen and (min-width: 1600px) {
      header ul.menu {
        -webkit-transform: translateX(-102%);
        transform: translateX(-102%); } }
    @media (max-width: 480px) {
      header ul.menu {
        width: 83%; } }
    @media only screen and (min-width: 481px) and (max-width: 1024px) {
      header ul.menu {
        width: inherit; } }
    @media only screen and (min-width: 1025px) and (max-width: 1599px) {
      header ul.menu {
        width: inherit; } }
    @media only screen and (min-width: 1600px) {
      header ul.menu {
        width: inherit; } }
    @media (max-width: 480px) {
      header ul.menu {
        padding: 15px 10px 0px 0; } }
    @media only screen and (min-width: 481px) and (max-width: 1024px) {
      header ul.menu {
        padding: 25px 0px; } }
    @media only screen and (min-width: 1025px) and (max-width: 1599px) {
      header ul.menu {
        padding: 25px 40px; } }
    @media only screen and (min-width: 1600px) {
      header ul.menu {
        padding: 25px 40px; } }
    @media (max-width: 480px) {
      header ul.menu {
        float: right; } }
    @media only screen and (min-width: 481px) and (max-width: 1024px) {
      header ul.menu {
        float: none; } }
    @media only screen and (min-width: 1025px) and (max-width: 1599px) {
      header ul.menu {
        float: none; } }
    @media only screen and (min-width: 1600px) {
      header ul.menu {
        float: none; } }
    @media (max-width: 480px) {
      header ul.menu {
        text-align: right; } }
    @media only screen and (min-width: 481px) and (max-width: 1024px) {
      header ul.menu {
        text-align: left; } }
    @media only screen and (min-width: 1025px) and (max-width: 1599px) {
      header ul.menu {
        text-align: left; } }
    @media only screen and (min-width: 1600px) {
      header ul.menu {
        text-align: left; } }
    header ul.menu.in {
      -webkit-transform: translateX(0%);
      transform: translateX(0%); }
    @media (max-width: 480px) {
      header ul.menu {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex; }
        header ul.menu li {
          -webkit-box-flex: 0;
          -webkit-flex: none;
          -ms-flex: none;
          flex: none; } }
  header li {
    display: inline-block;
    height: 50px;
    padding-top: 10px;
    vertical-align: middle;
    padding: 10px 5px 0 5px; }
    @media (max-width: 480px) {
      header li {
        height: inherit; } }
    @media only screen and (min-width: 481px) and (max-width: 1024px) {
      header li {
        height: 50px; } }
    @media only screen and (min-width: 1025px) and (max-width: 1599px) {
      header li {
        height: 50px; } }
    @media only screen and (min-width: 1600px) {
      header li {
        height: 50px; } }
    @media (max-width: 480px) {
      header li {
        padding: 2px; } }
    @media only screen and (min-width: 481px) and (max-width: 1024px) {
      header li {
        padding: 10px 5px 0 5px; } }
    @media only screen and (min-width: 1025px) and (max-width: 1599px) {
      header li {
        padding: 10px 5px 0 5px; } }
    @media only screen and (min-width: 1600px) {
      header li {
        padding: 10px 5px 0 5px; } }
  header a {
    color: #ff604f;
    padding: 5px 2px; }
    @media only screen and (min-width: 1600px) {
      header a {
        font: 17px/34px "Marr Sans", Arial, Helvetica, sans-serif; } }
    @media only screen and (min-width: 1025px) and (max-width: 1599px) {
      header a {
        font: 17px/34px "Marr Sans", Arial, Helvetica, sans-serif; } }
    @media only screen and (min-width: 481px) and (max-width: 1024px) {
      header a {
        font: 17px/34px "Marr Sans", Arial, Helvetica, sans-serif; } }
    @media (max-width: 480px) {
      header a {
        font: 13px/26px "Marr Sans", Arial, Helvetica, sans-serif; } }
    header a.active {
      border-bottom: 1px solid #ff604f; }

section.projects {
  position: fixed;
  z-index: 8888;
  top: 0;
  overflow-y: scroll;
  height: 100%;
  background: black;
  color: white;
  -webkit-transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.5s;
  transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.5s;
  -webkit-backface-visibility: hidden; }
  @media (max-width: 480px) {
    section.projects {
      width: 100%; } }
  @media only screen and (min-width: 481px) and (max-width: 1024px) {
    section.projects {
      width: 80%; } }
  @media only screen and (min-width: 1025px) and (max-width: 1599px) {
    section.projects {
      width: 80%; } }
  @media only screen and (min-width: 1600px) {
    section.projects {
      width: 80%; } }
  @media (max-width: 480px) {
    section.projects {
      padding-top: 60px; } }
  @media only screen and (min-width: 481px) and (max-width: 1024px) {
    section.projects {
      padding-top: 106px; } }
  @media only screen and (min-width: 1025px) and (max-width: 1599px) {
    section.projects {
      padding-top: 106px; } }
  @media only screen and (min-width: 1600px) {
    section.projects {
      padding-top: 106px; } }
  section.projects.lock {
    overflow-y: hidden;
    padding-right: 5px; }
  section.projects.closed {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%); }
  section.projects ul.projects {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap; }
    section.projects ul.projects li {
      -webkit-box-flex: 1,;
      -webkit-flex: 1, auto;
      -ms-flex: 1, auto;
      flex: 1, auto;
      opacity: 0;
      position: relative;
      -webkit-transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.3s;
      transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.3s; }
      @media (max-width: 480px) {
        section.projects ul.projects li {
          -webkit-flex-basis: 50%;
          -ms-flex-preferred-size: 50%;
          flex-basis: 50%; } }
      @media only screen and (min-width: 481px) and (max-width: 1024px) {
        section.projects ul.projects li {
          -webkit-flex-basis: 50%;
          -ms-flex-preferred-size: 50%;
          flex-basis: 50%; } }
      @media only screen and (min-width: 1025px) and (max-width: 1599px) {
        section.projects ul.projects li {
          -webkit-flex-basis: -webkit-calc(100% / 3);
          -ms-flex-preferred-size: calc(100% / 3);
          flex-basis: calc(100% / 3); } }
      @media only screen and (min-width: 1600px) {
        section.projects ul.projects li {
          -webkit-flex-basis: -webkit-calc(100% / 3);
          -ms-flex-preferred-size: calc(100% / 3);
          flex-basis: calc(100% / 3); } }
      section.projects ul.projects li.show {
        opacity: 1; }
      section.projects ul.projects li a {
        display: block; }
        section.projects ul.projects li a:hover div.overlay {
          opacity: 1; }
          section.projects ul.projects li a:hover div.overlay h4 {
            -webkit-transform: translateY(0px);
            transform: translateY(0px); }
      section.projects ul.projects li img {
        display: block; }
    section.projects ul.projects div.overlay {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-flex-flow: row wrap;
      -ms-flex-flow: row wrap;
      flex-flow: row wrap;
      position: absolute;
      left: 0px;
      right: 0px;
      top: 0px;
      bottom: 0px;
      background: rgba(0, 0, 0, 0.7);
      text-align: center;
      opacity: 0;
      -webkit-transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.3s;
      transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.3s; }
      section.projects ul.projects div.overlay > div {
        -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        height: inherit; }
      section.projects ul.projects div.overlay h4 {
        color: #ff604f;
        line-height: 1.2em;
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
        -webkit-transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.3s;
        transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.3s; }
        @media (max-width: 480px) {
          section.projects ul.projects div.overlay h4 {
            padding: 0px; } }
        @media only screen and (min-width: 481px) and (max-width: 1024px) {
          section.projects ul.projects div.overlay h4 {
            padding: 0 60px; } }
        @media only screen and (min-width: 1025px) and (max-width: 1599px) {
          section.projects ul.projects div.overlay h4 {
            padding: 0 60px; } }
        @media only screen and (min-width: 1600px) {
          section.projects ul.projects div.overlay h4 {
            padding: 0 60px; } }
        section.projects ul.projects div.overlay h4:nth-child(2) {
          -webkit-transform: translateY(35px);
          transform: translateY(35px); }
  section.projects .single {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 80%;
    background: #000;
    overflow-y: scroll;
    height: 100%;
    background: black;
    color: white;
    opacity: 1;
    -webkit-transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.4s;
    transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.4s;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%); }
    @media (max-width: 480px) {
      section.projects .single {
        width: 100%; } }
    @media only screen and (min-width: 481px) and (max-width: 1024px) {
      section.projects .single {
        width: 80%; } }
    @media only screen and (min-width: 1025px) and (max-width: 1599px) {
      section.projects .single {
        width: 80%; } }
    @media only screen and (min-width: 1600px) {
      section.projects .single {
        width: 80%; } }
    @media (max-width: 480px) {
      section.projects .single {
        padding-top: 60px; } }
    @media only screen and (min-width: 481px) and (max-width: 1024px) {
      section.projects .single {
        padding-top: 106px; } }
    @media only screen and (min-width: 1025px) and (max-width: 1599px) {
      section.projects .single {
        padding-top: 106px; } }
    @media only screen and (min-width: 1600px) {
      section.projects .single {
        padding-top: 106px; } }
    section.projects .single.active {
      -webkit-transform: translateY(0%);
      transform: translateY(0%); }
    section.projects .single.trans {
      opacity: 0; }
    section.projects .single main {
      color: #ff604f; }
      @media (max-width: 480px) {
        section.projects .single main {
          padding: 50px 0px 20px 0px; } }
      @media only screen and (min-width: 481px) and (max-width: 1024px) {
        section.projects .single main {
          padding: 70px 15%; } }
      @media only screen and (min-width: 1025px) and (max-width: 1599px) {
        section.projects .single main {
          padding: 70px 15%; } }
      @media only screen and (min-width: 1600px) {
        section.projects .single main {
          padding: 120px 15%; } }
      section.projects .single main h1 {
        text-align: center; }
        @media (max-width: 480px) {
          section.projects .single main h1 {
            padding: 0 20px 20px 20px; } }
        @media only screen and (min-width: 481px) and (max-width: 1024px) {
          section.projects .single main h1 {
            padding: 0 80px 80px 80px; } }
        @media only screen and (min-width: 1025px) and (max-width: 1599px) {
          section.projects .single main h1 {
            padding: 0 80px 80px 80px; } }
        @media only screen and (min-width: 1600px) {
          section.projects .single main h1 {
            padding: 0 80px 80px 80px; } }
        @media only screen and (min-width: 1600px) {
          section.projects .single main h1 {
            font: 38px/47.5px "Marr Sans", Arial, Helvetica, sans-serif; } }
        @media only screen and (min-width: 1025px) and (max-width: 1599px) {
          section.projects .single main h1 {
            font: 38px/47.5px "Marr Sans", Arial, Helvetica, sans-serif; } }
        @media only screen and (min-width: 481px) and (max-width: 1024px) {
          section.projects .single main h1 {
            font: 38px/47.5px "Marr Sans", Arial, Helvetica, sans-serif; } }
        @media (max-width: 480px) {
          section.projects .single main h1 {
            font: 26px/32.5px "Marr Sans", Arial, Helvetica, sans-serif; } }
      section.projects .single main figure img {
        max-width: 100%; }
      @media (max-width: 480px) {
        section.projects .single main .text, section.projects .single main .meta {
          padding: 20px 30px; } }
      @media only screen and (min-width: 481px) and (max-width: 1024px) {
        section.projects .single main .text, section.projects .single main .meta {
          padding: 30px 15% 0; } }
      @media only screen and (min-width: 1025px) and (max-width: 1599px) {
        section.projects .single main .text, section.projects .single main .meta {
          padding: 30px 15% 0; } }
      @media only screen and (min-width: 1600px) {
        section.projects .single main .text, section.projects .single main .meta {
          padding: 30px 15% 0; } }
    section.projects .single .close {
      position: absolute;
      top: 130px;
      right: 60px;
      display: block;
      width: 30px;
      height: 30px;
      background: transparent;
      padding: 20px;
      cursor: pointer; }
      @media only screen and (min-width: 481px) and (max-width: 1024px) {
        section.projects .single .close {
          right: 30px; } }
      @media (max-width: 480px) {
        section.projects .single .close {
          top: 65px;
          right: 10px;
          padding: 15px; } }
      section.projects .single .close:before, section.projects .single .close:after {
        content: ' ';
        position: absolute;
        width: 1px;
        height: 100%;
        background: #ff604f;
        top: 0px;
        left: 50%;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        -webkit-transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.3s;
        transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.3s; }
      section.projects .single .close:after {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        top: 0px;
        left: 50%; }
      section.projects .single .close:hover:before {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg); }
      section.projects .single .close:hover:after {
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg); }

div.about, div.timeline, div.clients, div.contact {
  color: white;
  position: relative; }
  @media (max-width: 480px) {
    div.about, div.timeline, div.clients, div.contact {
      padding-top: 60px; } }
  @media only screen and (min-width: 481px) and (max-width: 1024px) {
    div.about, div.timeline, div.clients, div.contact {
      padding-top: 0px; } }
  @media only screen and (min-width: 1025px) and (max-width: 1599px) {
    div.about, div.timeline, div.clients, div.contact {
      padding-top: 120px; } }
  @media only screen and (min-width: 1600px) {
    div.about, div.timeline, div.clients, div.contact {
      padding-top: 120px; } }
  @media (max-width: 480px) {
    div.about section.intro, div.timeline section.intro, div.clients section.intro, div.contact section.intro {
      padding: 10vw 5vw; } }
  @media only screen and (min-width: 481px) and (max-width: 1024px) {
    div.about section.intro, div.timeline section.intro, div.clients section.intro, div.contact section.intro {
      padding: 7vw 10vw; } }
  @media only screen and (min-width: 1025px) and (max-width: 1599px) {
    div.about section.intro, div.timeline section.intro, div.clients section.intro, div.contact section.intro {
      padding: 10vw 15vw; } }
  @media only screen and (min-width: 1600px) {
    div.about section.intro, div.timeline section.intro, div.clients section.intro, div.contact section.intro {
      padding: 10vw 20vw; } }
  div.about section.intro h2, div.timeline section.intro h2, div.clients section.intro h2, div.contact section.intro h2 {
    text-align: center; }
    @media only screen and (min-width: 1600px) {
      div.about section.intro h2, div.timeline section.intro h2, div.clients section.intro h2, div.contact section.intro h2 {
        font: 38px/47.5px "Marr Sans", Arial, Helvetica, sans-serif; } }
    @media only screen and (min-width: 1025px) and (max-width: 1599px) {
      div.about section.intro h2, div.timeline section.intro h2, div.clients section.intro h2, div.contact section.intro h2 {
        font: 38px/47.5px "Marr Sans", Arial, Helvetica, sans-serif; } }
    @media only screen and (min-width: 481px) and (max-width: 1024px) {
      div.about section.intro h2, div.timeline section.intro h2, div.clients section.intro h2, div.contact section.intro h2 {
        font: 26px/32.5px "Marr Sans", Arial, Helvetica, sans-serif; } }
    @media (max-width: 480px) {
      div.about section.intro h2, div.timeline section.intro h2, div.clients section.intro h2, div.contact section.intro h2 {
        font: 26px/32.5px "Marr Sans", Arial, Helvetica, sans-serif; } }
  div.about section.intro p, div.timeline section.intro p, div.clients section.intro p, div.contact section.intro p {
    margin-bottom: 20px; }
  div.about section.title, div.timeline section.title, div.clients section.title, div.contact section.title {
    text-align: center; }
    @media (max-width: 480px) {
      div.about section.title, div.timeline section.title, div.clients section.title, div.contact section.title {
        padding: 60px 0; } }
    @media only screen and (min-width: 481px) and (max-width: 1024px) {
      div.about section.title, div.timeline section.title, div.clients section.title, div.contact section.title {
        padding: 30px 0; } }
    @media only screen and (min-width: 1025px) and (max-width: 1599px) {
      div.about section.title, div.timeline section.title, div.clients section.title, div.contact section.title {
        padding: 60px 0; } }
    @media only screen and (min-width: 1600px) {
      div.about section.title, div.timeline section.title, div.clients section.title, div.contact section.title {
        padding: 60px 0; } }
  div.about section.services, div.about section.details, div.timeline section.services, div.timeline section.details, div.clients section.services, div.clients section.details, div.contact section.services, div.contact section.details {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap; }
    @media (max-width: 480px) {
      div.about section.services, div.about section.details, div.timeline section.services, div.timeline section.details, div.clients section.services, div.clients section.details, div.contact section.services, div.contact section.details {
        padding-top: 0vw; } }
    @media only screen and (min-width: 481px) and (max-width: 1024px) {
      div.about section.services, div.about section.details, div.timeline section.services, div.timeline section.details, div.clients section.services, div.clients section.details, div.contact section.services, div.contact section.details {
        padding-top: 0vw; } }
    @media only screen and (min-width: 1025px) and (max-width: 1599px) {
      div.about section.services, div.about section.details, div.timeline section.services, div.timeline section.details, div.clients section.services, div.clients section.details, div.contact section.services, div.contact section.details {
        padding-top: 10vw; } }
    @media only screen and (min-width: 1600px) {
      div.about section.services, div.about section.details, div.timeline section.services, div.timeline section.details, div.clients section.services, div.clients section.details, div.contact section.services, div.contact section.details {
        padding-top: 10vw; } }
    @media (max-width: 480px) {
      div.about section.services, div.about section.details, div.timeline section.services, div.timeline section.details, div.clients section.services, div.clients section.details, div.contact section.services, div.contact section.details {
        padding-bottom: 10vw; } }
    @media only screen and (min-width: 481px) and (max-width: 1024px) {
      div.about section.services, div.about section.details, div.timeline section.services, div.timeline section.details, div.clients section.services, div.clients section.details, div.contact section.services, div.contact section.details {
        padding-bottom: 10vw; } }
    @media only screen and (min-width: 1025px) and (max-width: 1599px) {
      div.about section.services, div.about section.details, div.timeline section.services, div.timeline section.details, div.clients section.services, div.clients section.details, div.contact section.services, div.contact section.details {
        padding-bottom: 10vw; } }
    @media only screen and (min-width: 1600px) {
      div.about section.services, div.about section.details, div.timeline section.services, div.timeline section.details, div.clients section.services, div.clients section.details, div.contact section.services, div.contact section.details {
        padding-bottom: 10vw; } }
    @media (max-width: 480px) {
      div.about section.services, div.about section.details, div.timeline section.services, div.timeline section.details, div.clients section.services, div.clients section.details, div.contact section.services, div.contact section.details {
        padding-right: 20px; } }
    @media only screen and (min-width: 481px) and (max-width: 1024px) {
      div.about section.services, div.about section.details, div.timeline section.services, div.timeline section.details, div.clients section.services, div.clients section.details, div.contact section.services, div.contact section.details {
        padding-right: 10vw; } }
    @media only screen and (min-width: 1025px) and (max-width: 1599px) {
      div.about section.services, div.about section.details, div.timeline section.services, div.timeline section.details, div.clients section.services, div.clients section.details, div.contact section.services, div.contact section.details {
        padding-right: 20vw; } }
    @media only screen and (min-width: 1600px) {
      div.about section.services, div.about section.details, div.timeline section.services, div.timeline section.details, div.clients section.services, div.clients section.details, div.contact section.services, div.contact section.details {
        padding-right: 20vw; } }
    @media (max-width: 480px) {
      div.about section.services, div.about section.details, div.timeline section.services, div.timeline section.details, div.clients section.services, div.clients section.details, div.contact section.services, div.contact section.details {
        padding-left: 20px; } }
    @media only screen and (min-width: 481px) and (max-width: 1024px) {
      div.about section.services, div.about section.details, div.timeline section.services, div.timeline section.details, div.clients section.services, div.clients section.details, div.contact section.services, div.contact section.details {
        padding-left: 10vw; } }
    @media only screen and (min-width: 1025px) and (max-width: 1599px) {
      div.about section.services, div.about section.details, div.timeline section.services, div.timeline section.details, div.clients section.services, div.clients section.details, div.contact section.services, div.contact section.details {
        padding-left: 20vw; } }
    @media only screen and (min-width: 1600px) {
      div.about section.services, div.about section.details, div.timeline section.services, div.timeline section.details, div.clients section.services, div.clients section.details, div.contact section.services, div.contact section.details {
        padding-left: 20vw; } }
    div.about section.services div, div.about section.details div, div.timeline section.services div, div.timeline section.details div, div.clients section.services div, div.clients section.details div, div.contact section.services div, div.contact section.details div {
      -webkit-flex-basis: -webkit-calc(100% / 3);
      -ms-flex-preferred-size: calc(100% / 3);
      flex-basis: calc(100% / 3); }
      @media (max-width: 480px) {
        div.about section.services div, div.about section.details div, div.timeline section.services div, div.timeline section.details div, div.clients section.services div, div.clients section.details div, div.contact section.services div, div.contact section.details div {
          padding-bottom: 30px; } }
      div.about section.services div:nth-child(2), div.about section.details div:nth-child(2), div.timeline section.services div:nth-child(2), div.timeline section.details div:nth-child(2), div.clients section.services div:nth-child(2), div.clients section.details div:nth-child(2), div.contact section.services div:nth-child(2), div.contact section.details div:nth-child(2) {
        -webkit-flex-basis: -webkit-calc((100% / 3) * 2);
        -ms-flex-preferred-size: calc((100% / 3) * 2);
        flex-basis: calc((100% / 3) * 2);
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2; }
        @media (max-width: 480px) {
          div.about section.services div:nth-child(2), div.about section.details div:nth-child(2), div.timeline section.services div:nth-child(2), div.timeline section.details div:nth-child(2), div.clients section.services div:nth-child(2), div.clients section.details div:nth-child(2), div.contact section.services div:nth-child(2), div.contact section.details div:nth-child(2) {
            -webkit-flex-basis: 100%;
            -ms-flex-preferred-size: 100%;
            flex-basis: 100%; } }
      @media only screen and (min-width: 1600px) {
        div.about section.services div li, div.about section.services div address, div.about section.services div a, div.about section.details div li, div.about section.details div address, div.about section.details div a, div.timeline section.services div li, div.timeline section.services div address, div.timeline section.services div a, div.timeline section.details div li, div.timeline section.details div address, div.timeline section.details div a, div.clients section.services div li, div.clients section.services div address, div.clients section.services div a, div.clients section.details div li, div.clients section.details div address, div.clients section.details div a, div.contact section.services div li, div.contact section.services div address, div.contact section.services div a, div.contact section.details div li, div.contact section.details div address, div.contact section.details div a {
          font: 16px/24px "Marr Sans", Arial, Helvetica, sans-serif; } }
      @media only screen and (min-width: 1025px) and (max-width: 1599px) {
        div.about section.services div li, div.about section.services div address, div.about section.services div a, div.about section.details div li, div.about section.details div address, div.about section.details div a, div.timeline section.services div li, div.timeline section.services div address, div.timeline section.services div a, div.timeline section.details div li, div.timeline section.details div address, div.timeline section.details div a, div.clients section.services div li, div.clients section.services div address, div.clients section.services div a, div.clients section.details div li, div.clients section.details div address, div.clients section.details div a, div.contact section.services div li, div.contact section.services div address, div.contact section.services div a, div.contact section.details div li, div.contact section.details div address, div.contact section.details div a {
          font: 16px/24px "Marr Sans", Arial, Helvetica, sans-serif; } }
      @media only screen and (min-width: 481px) and (max-width: 1024px) {
        div.about section.services div li, div.about section.services div address, div.about section.services div a, div.about section.details div li, div.about section.details div address, div.about section.details div a, div.timeline section.services div li, div.timeline section.services div address, div.timeline section.services div a, div.timeline section.details div li, div.timeline section.details div address, div.timeline section.details div a, div.clients section.services div li, div.clients section.services div address, div.clients section.services div a, div.clients section.details div li, div.clients section.details div address, div.clients section.details div a, div.contact section.services div li, div.contact section.services div address, div.contact section.services div a, div.contact section.details div li, div.contact section.details div address, div.contact section.details div a {
          font: 16px/24px "Marr Sans", Arial, Helvetica, sans-serif; } }
      @media (max-width: 480px) {
        div.about section.services div li, div.about section.services div address, div.about section.services div a, div.about section.details div li, div.about section.details div address, div.about section.details div a, div.timeline section.services div li, div.timeline section.services div address, div.timeline section.services div a, div.timeline section.details div li, div.timeline section.details div address, div.timeline section.details div a, div.clients section.services div li, div.clients section.services div address, div.clients section.services div a, div.clients section.details div li, div.clients section.details div address, div.clients section.details div a, div.contact section.services div li, div.contact section.services div address, div.contact section.services div a, div.contact section.details div li, div.contact section.details div address, div.contact section.details div a {
          font: 16px/24px "Marr Sans", Arial, Helvetica, sans-serif; } }
      div.about section.services div a, div.about section.details div a, div.timeline section.services div a, div.timeline section.details div a, div.clients section.services div a, div.clients section.details div a, div.contact section.services div a, div.contact section.details div a {
        color: white; }
      div.about section.services div .gmap, div.about section.details div .gmap, div.timeline section.services div .gmap, div.timeline section.details div .gmap, div.clients section.services div .gmap, div.clients section.details div .gmap, div.contact section.services div .gmap, div.contact section.details div .gmap {
        opacity: .4; }

div.work ul.projects {
  padding-top: 100px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap; }
  @media (max-width: 480px) {
    div.work ul.projects {
      padding-top: 70px; } }
  @media only screen and (min-width: 481px) and (max-width: 1024px) {
    div.work ul.projects {
      padding-top: 0px; } }
  div.work ul.projects li {
    -webkit-box-flex: 0;
    -webkit-flex: 0 33.3%;
    -ms-flex: 0 33.3%;
    flex: 0 33.3%;
    position: relative;
    line-height: 0; }
    @media (max-width: 480px) {
      div.work ul.projects li {
        -webkit-box-flex: 0;
        -webkit-flex: 0 100%;
        -ms-flex: 0 100%;
        flex: 0 100%; } }
    @media only screen and (min-width: 481px) and (max-width: 1024px) {
      div.work ul.projects li {
        -webkit-box-flex: 0;
        -webkit-flex: 0 50%;
        -ms-flex: 0 50%;
        flex: 0 50%; } }
    div.work ul.projects li a {
      display: block; }
      div.work ul.projects li a:hover div.overlay {
        opacity: 1; }
        div.work ul.projects li a:hover div.overlay h4 {
          -webkit-transform: translateY(0px);
          transform: translateY(0px); }
    div.work ul.projects li div.overlay {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-flex-flow: row wrap;
      -ms-flex-flow: row wrap;
      flex-flow: row wrap;
      position: absolute;
      left: 0px;
      right: 0px;
      top: 0px;
      bottom: 0px;
      background: rgba(0, 0, 0, 0.7);
      text-align: center;
      opacity: 0;
      -webkit-transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.3s;
      transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.3s; }
      div.work ul.projects li div.overlay > div {
        -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        height: inherit; }
      div.work ul.projects li div.overlay h4 {
        color: #ff604f;
        line-height: 1.2em;
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
        -webkit-transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.3s;
        transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.3s; }
        @media (max-width: 480px) {
          div.work ul.projects li div.overlay h4 {
            padding: 0px; } }
        @media only screen and (min-width: 481px) and (max-width: 1024px) {
          div.work ul.projects li div.overlay h4 {
            padding: 0 60px; } }
        @media only screen and (min-width: 1025px) and (max-width: 1599px) {
          div.work ul.projects li div.overlay h4 {
            padding: 0 60px; } }
        @media only screen and (min-width: 1600px) {
          div.work ul.projects li div.overlay h4 {
            padding: 0 60px; } }
        div.work ul.projects li div.overlay h4:nth-child(2) {
          -webkit-transform: translateY(35px);
          transform: translateY(35px); }
      @media (max-width: 480px) {
        div.work ul.projects li div.overlay {
          background: black;
          opacity: 1;
          display: block;
          bottom: 0px;
          top: initial;
          width: 65%;
          padding: 10px 30px 50px;
          text-align: left; }
          div.work ul.projects li div.overlay h4 {
            top: 0px;
            position: relative;
            z-index: 1; } }
      @media only screen and (min-width: 481px) and (max-width: 1024px) {
        div.work ul.projects li div.overlay {
          background: black;
          opacity: 1;
          display: block;
          bottom: 0px;
          top: initial;
          width: 65%;
          padding: 10px 30px 50px;
          text-align: left; }
          div.work ul.projects li div.overlay h4 {
            top: 0px;
            padding: 0px;
            position: relative;
            z-index: 1; } }

div.single {
  color: #ff604f; }
  @media (max-width: 480px) {
    div.single {
      padding: 100px 0px 20px 0px; } }
  @media only screen and (min-width: 481px) and (max-width: 1024px) {
    div.single {
      padding: 0px 10% 30px; } }
  @media only screen and (min-width: 1025px) and (max-width: 1599px) {
    div.single {
      padding: 150px 15%; } }
  @media only screen and (min-width: 1600px) {
    div.single {
      padding: 150px 15%; } }
  div.single h1 {
    text-align: center; }
    @media (max-width: 480px) {
      div.single h1 {
        padding: 0 20px 20px 20px; } }
    @media only screen and (min-width: 481px) and (max-width: 1024px) {
      div.single h1 {
        padding: 0 80px 80px 80px; } }
    @media only screen and (min-width: 1025px) and (max-width: 1599px) {
      div.single h1 {
        padding: 0 80px 80px 80px; } }
    @media only screen and (min-width: 1600px) {
      div.single h1 {
        padding: 0 80px 80px 80px; } }
    @media only screen and (min-width: 1600px) {
      div.single h1 {
        font: 38px/47.5px "Marr Sans", Arial, Helvetica, sans-serif; } }
    @media only screen and (min-width: 1025px) and (max-width: 1599px) {
      div.single h1 {
        font: 38px/47.5px "Marr Sans", Arial, Helvetica, sans-serif; } }
    @media only screen and (min-width: 481px) and (max-width: 1024px) {
      div.single h1 {
        font: 38px/47.5px "Marr Sans", Arial, Helvetica, sans-serif; } }
    @media (max-width: 480px) {
      div.single h1 {
        font: 26px/32.5px "Marr Sans", Arial, Helvetica, sans-serif; } }
  div.single figure img {
    max-width: 100%; }
  div.single .text, div.single .meta {
    text-align: center; }
    @media (max-width: 480px) {
      div.single .text, div.single .meta {
        padding: 20px 30px; } }
    @media only screen and (min-width: 481px) and (max-width: 1024px) {
      div.single .text, div.single .meta {
        padding: 30px 15% 0; } }
    @media only screen and (min-width: 1025px) and (max-width: 1599px) {
      div.single .text, div.single .meta {
        padding: 30px 15% 0; } }
    @media only screen and (min-width: 1600px) {
      div.single .text, div.single .meta {
        padding: 30px 15% 0; } }
  div.single div.staff {
    position: relative;
    display: inline-block; }
    div.single div.staff span.profile {
      display: inline-block;
      position: relative;
      overflow: hidden;
      width: 100px;
      height: 100px;
      background: #ff604f;
      margin-bottom: 20px;
      border-radius: 50px;
      -webkit-transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.3s;
      transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.3s; }
      div.single div.staff span.profile img {
        position: absolute;
        bottom: 0px;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        width: 130%; }
    div.single div.staff span.name {
      position: absolute;
      display: block;
      color: #ff604f;
      top: 43px;
      opacity: 0;
      left: 50%;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
      -webkit-transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.3s;
      transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.3s; }
    div.single div.staff:hover span.profile {
      opacity: .4; }
    div.single div.staff:hover span.name {
      opacity: 1; }

div.clients {
  margin-bottom: 60px; }
  div.clients section.logos .giantLogos {
    max-width: 1280px;
    margin: 0 auto; }
    div.clients section.logos .giantLogos img {
      width: 100%; }
  div.clients section.logos ul {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap; }
    div.clients section.logos ul li {
      -webkit-flex-basis: -webkit-calc(100% / 4);
      -ms-flex-preferred-size: calc(100% / 4);
      flex-basis: calc(100% / 4);
      display: block;
      position: relative;
      overflow: hidden;
      background: white; }
      @media (max-width: 480px) {
        div.clients section.logos ul li {
          height: 100px; } }
      @media only screen and (min-width: 481px) and (max-width: 1024px) {
        div.clients section.logos ul li {
          height: 100px; } }
      @media only screen and (min-width: 1025px) and (max-width: 1599px) {
        div.clients section.logos ul li {
          height: 200px; } }
      @media only screen and (min-width: 1600px) {
        div.clients section.logos ul li {
          height: 250px; } }
      div.clients section.logos ul li span img {
        object-fit: scale-down;
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        -webkit-transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 1s;
        transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 1s;
        width: 70%; }
      div.clients section.logos ul li:hover img {
        opacity: .9; }
    div.clients section.logos ul img {
      display: block; }
    div.clients section.logos ul .comment {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      opacity: 0;
      text-align: center;
      -webkit-transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.3s;
      transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.3s; }

div.about {
  position: relative; }
  div.about canvas#c {
    position: absolute;
    width: 100%;
    height: 80vh;
    top: 0px;
    left: 0px;
    z-index: -1; }
  div.about section.aboutvid {
    position: relative;
    display: block; }
    div.about section.aboutvid video, div.about section.aboutvid iframe {
      width: 100%;
      display: block; }
    div.about section.aboutvid h1 {
      color: #ff604f;
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -70%);
      transform: translate(-50%, -70%); }
      @media only screen and (min-width: 1600px) {
        div.about section.aboutvid h1 {
          font: 43px/51.6px "Marr Sans", Arial, Helvetica, sans-serif; } }
      @media only screen and (min-width: 1025px) and (max-width: 1599px) {
        div.about section.aboutvid h1 {
          font: 43px/51.6px "Marr Sans", Arial, Helvetica, sans-serif; } }
      @media only screen and (min-width: 481px) and (max-width: 1024px) {
        div.about section.aboutvid h1 {
          font: 43px/51.6px "Marr Sans", Arial, Helvetica, sans-serif; } }
      @media (max-width: 480px) {
        div.about section.aboutvid h1 {
          font: 43px/51.6px "Marr Sans", Arial, Helvetica, sans-serif; } }
  div.about .aboutSlider {
    position: relative;
    width: 100%;
    overflow: hidden; }
    div.about .aboutSlider #slider {
      background: red;
      overflow: hidden;
      width: 100%;
      height: 600px;
      pointer-events: none;
      white-space: nowrap;
      -webkit-transition: margin ease 2s;
      transition: margin ease 2s;
      font-size: 0; }
      @media (max-width: 480px) {
        div.about .aboutSlider #slider {
          height: 320px;
          -webkit-transition: margin ease 1s;
          transition: margin ease 1s; } }
      div.about .aboutSlider #slider > div {
        line-height: 0;
        letter-spacing: 0;
        display: inline-block;
        width: auto;
        height: 600px; }
        @media (max-width: 480px) {
          div.about .aboutSlider #slider > div {
            height: 320px; } }
        div.about .aboutSlider #slider > div img {
          height: 100%;
          width: auto; }
    div.about .aboutSlider #mousevalues {
      position: absolute;
      width: 100%;
      height: 100%;
      display: block;
      margin-top: 0px;
      top: 0px;
      opacity: 0.2; }
  div.about section.team {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex; }
    div.about section.team ul {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      width: 100%;
      height: 600px;
      overflow-x: hidden;
      overflow-y: hidden;
      white-space: nowrap; }
    div.about section.team li.title {
      width: 200px;
      height: 600px;
      float: left;
      position: relative;
      background: black; }
      @media only screen and (min-width: 481px) and (max-width: 1024px) {
        div.about section.team li.title {
          width: -webkit-calc(100vw / 9);
          width: calc(100vw / 9); } }
      @media (max-width: 480px) {
        div.about section.team li.title {
          width: -webkit-calc(100vw / 6);
          width: calc(100vw / 6); } }
      div.about section.team li.title h2 {
        position: absolute;
        top: 45%;
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
        width: 200px;
        text-align: center; }
        @media only screen and (min-width: 1600px) {
          div.about section.team li.title h2 {
            font: 38px/57px "Marr Sans", Arial, Helvetica, sans-serif; } }
        @media only screen and (min-width: 1025px) and (max-width: 1599px) {
          div.about section.team li.title h2 {
            font: 38px/57px "Marr Sans", Arial, Helvetica, sans-serif; } }
        @media only screen and (min-width: 481px) and (max-width: 1024px) {
          div.about section.team li.title h2 {
            font: 38px/57px "Marr Sans", Arial, Helvetica, sans-serif; } }
        @media (max-width: 480px) {
          div.about section.team li.title h2 {
            font: 26px/39px "Marr Sans", Arial, Helvetica, sans-serif; } }
        @media only screen and (min-width: 481px) and (max-width: 1024px) {
          div.about section.team li.title h2 {
            left: -60px; } }
        @media (max-width: 480px) {
          div.about section.team li.title h2 {
            left: -60px; } }
    div.about section.team li.person, div.about section.team li.pic {
      background: #1a1a1a;
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      -ms-flex: 1;
      flex: 1;
      height: 600px;
      opacity: 1;
      -webkit-transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.4s;
      transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.4s;
      overflow: hidden;
      position: relative;
      padding: 25px 30px;
      margin-left: -4px; }
      @media (max-width: 480px) {
        div.about section.team li.person, div.about section.team li.pic {
          height: auto; } }
      @media only screen and (min-width: 1600px) {
        div.about section.team li.person h3, div.about section.team li.person p, div.about section.team li.pic h3, div.about section.team li.pic p {
          font: 16px/24px "Marr Sans", Arial, Helvetica, sans-serif; } }
      @media only screen and (min-width: 1025px) and (max-width: 1599px) {
        div.about section.team li.person h3, div.about section.team li.person p, div.about section.team li.pic h3, div.about section.team li.pic p {
          font: 16px/24px "Marr Sans", Arial, Helvetica, sans-serif; } }
      @media only screen and (min-width: 481px) and (max-width: 1024px) {
        div.about section.team li.person h3, div.about section.team li.person p, div.about section.team li.pic h3, div.about section.team li.pic p {
          font: 16px/24px "Marr Sans", Arial, Helvetica, sans-serif; } }
      @media (max-width: 480px) {
        div.about section.team li.person h3, div.about section.team li.person p, div.about section.team li.pic h3, div.about section.team li.pic p {
          font: 16px/24px "Marr Sans", Arial, Helvetica, sans-serif; } }
      div.about section.team li.person h3 span, div.about section.team li.pic h3 span {
        -webkit-transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.3s;
        transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.3s;
        display: block;
        opacity: 0; }
      div.about section.team li.person ul.toptrumps, div.about section.team li.pic ul.toptrumps {
        margin-top: 10px; }
        div.about section.team li.person ul.toptrumps li, div.about section.team li.pic ul.toptrumps li {
          font-size: 14px;
          line-height: 18px; }
      div.about section.team li.person:hover, div.about section.team li.pic:hover {
        cursor: pointer; }
        div.about section.team li.person:hover.open, div.about section.team li.pic:hover.open {
          cursor: url("../images/close.png") 0 0, auto; }
      div.about section.team li.person img.profile, div.about section.team li.pic img.profile {
        position: absolute;
        left: 0px;
        bottom: 0px;
        margin-left: -170px;
        width: auto !important;
        height: 65% !important;
        -webkit-transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.3s;
        transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.3s; }
      div.about section.team li.person.open, div.about section.team li.pic.open {
        background: #ff604f;
        -webkit-flex-basis: 670px;
        -ms-flex-preferred-size: 670px;
        flex-basis: 670px; }
        div.about section.team li.person.open img.profile, div.about section.team li.pic.open img.profile {
          opacity: 1;
          margin-left: -30px; }
        div.about section.team li.person.open h3 span, div.about section.team li.pic.open h3 span {
          opacity: 1; }
        div.about section.team li.person.open div.info, div.about section.team li.pic.open div.info {
          width: 270px;
          left: 45%;
          opacity: 1; }
        @media only screen and (min-width: 481px) and (max-width: 1024px) {
          div.about section.team li.person.open, div.about section.team li.pic.open {
            width: 687px; } }
        @media (max-width: 480px) {
          div.about section.team li.person.open, div.about section.team li.pic.open {
            -webkit-flex-basis: 100%;
            -ms-flex-preferred-size: 100%;
            flex-basis: 100%; } }
      div.about section.team li.person div.info, div.about section.team li.pic div.info {
        display: block;
        width: 100%;
        position: absolute;
        left: 100%;
        width: 270px;
        top: 30px;
        white-space: normal;
        opacity: 0;
        -webkit-transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.3s;
        transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.3s; }
        @media only screen and (min-width: 481px) and (max-width: 1024px) {
          div.about section.team li.person div.info, div.about section.team li.pic div.info {
            left: 270px; } }
        div.about section.team li.person div.info p, div.about section.team li.pic div.info p {
          margin-bottom: 15px; }
    div.about section.team li.pic {
      padding: 0;
      background: black; }
      div.about section.team li.pic.open {
        -webkit-flex-basis: 75vw;
        -ms-flex-preferred-size: 75vw;
        flex-basis: 75vw; }
      div.about section.team li.pic img.profile {
        height: 100% !important; }
      div.about section.team li.pic:hover {
        cursor: pointer; }
  div.about section.team-mobile {
    background: #ff604f; }
    div.about section.team-mobile li.person {
      position: relative;
      padding: 30px;
      font-size: 15px;
      max-height: 100px;
      overflow: hidden;
      -webkit-transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.4s;
      transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.4s; }
      div.about section.team-mobile li.person a {
        color: white; }
      div.about section.team-mobile li.person img {
        position: absolute;
        bottom: -100px;
        right: -20px;
        z-index: 0;
        width: 80%;
        z-index: 7777;
        -webkit-transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.4s;
        transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.4s; }
        @media only screen and (min-width: 481px) and (max-width: 1024px) {
          div.about section.team-mobile li.person img {
            bottom: -180px; } }
  @media only screen and (min-width: 481px) and (max-width: 1024px) and (orientation: landscape) {
    div.about section.team-mobile li.person img {
      width: 70%;
      bottom: -250px; } }
        @media only screen and (min-device-width: 300px) and (max-device-width: 560px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
          div.about section.team-mobile li.person img {
            bottom: -100px; } }
      div.about section.team-mobile li.person h3 {
        position: relative;
        float: left;
        width: 100%;
        z-index: 8888;
        margin-bottom: 20px; }
        div.about section.team-mobile li.person h3 span {
          opacity: 0;
          display: block;
          -webkit-transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.4s;
          transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.4s; }
      div.about section.team-mobile li.person .info {
        position: relative;
        float: left;
        width: 60%;
        font-size: 11px;
        line-height: 18px;
        z-index: 8888;
        opacity: 0;
        -webkit-transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.4s;
        transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.4s; }
        @media only screen and (orientation: landscape) {
          div.about section.team-mobile li.person .info {
            font-size: 16px;
            line-height: 22px;
            width: 40%; } }
        @media only screen and (min-device-width: 300px) and (max-device-width: 560px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
          div.about section.team-mobile li.person .info {
            width: 55%; } }
      div.about section.team-mobile li.person.open {
        max-height: 400px; }
        @media only screen and (min-width: 481px) and (max-width: 1024px) {
          div.about section.team-mobile li.person.open {
            max-height: 700px; } }
        @media only screen and (min-device-width: 300px) and (max-device-width: 560px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
          div.about section.team-mobile li.person.open {
            max-height: 400px; } }
        div.about section.team-mobile li.person.open .info {
          opacity: 1; }
          @media only screen and (min-width: 481px) and (max-width: 1024px) {
            div.about section.team-mobile li.person.open .info {
              margin-bottom: 70px; } }
  @media only screen and (min-width: 481px) and (max-width: 1024px) and (orientation: landscape) {
    div.about section.team-mobile li.person.open .info {
      margin-bottom: 200px; } }
        div.about section.team-mobile li.person.open h3 span {
          opacity: 1; }
        div.about section.team-mobile li.person.open img {
          bottom: 0px;
          right: -70px; }
          @media only screen and (min-width: 481px) and (max-width: 1024px) {
            div.about section.team-mobile li.person.open img {
              width: 70%; } }
  div.about section.office {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex; }
    div.about section.office ul {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      width: 100%;
      height: 600px;
      overflow-x: hidden;
      overflow-y: hidden;
      white-space: nowrap; }
      @media (max-width: 480px) {
        div.about section.office ul {
          height: inherit; } }
    div.about section.office li.pic {
      background: #1a1a1a;
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      -ms-flex: 1;
      flex: 1;
      height: 600px;
      opacity: 1;
      -webkit-transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.4s;
      transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.4s;
      overflow: hidden;
      position: relative;
      margin: 0px;
      padding: 0px;
      -webkit-transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.3s;
      transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.3s; }
      @media (max-width: 480px) {
        div.about section.office li.pic {
          background: transparent;
          height: auto;
          -webkit-box-flex: 1;
          -webkit-flex: 1 0 100%;
          -ms-flex: 1 0 100%;
          flex: 1 0 100%; } }
      div.about section.office li.pic img.profile {
        position: absolute;
        left: 0px;
        bottom: 0px;
        margin-left: 0px;
        width: inherit !important;
        height: 100%;
        max-height: 100%;
        -webkit-transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.3s;
        transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.3s; }
        @media (max-width: 480px) {
          div.about section.office li.pic img.profile {
            position: relative;
            height: auto !important;
            width: 100% !important; } }
  div.about section.office-mobile img {
    display: block;
    max-width: 100%;
    height: auto; }

div.timeline .today, div.timeline .beginning {
  text-align: center;
  padding: 20px 20px 0px 20px;
  margin-top: 60px; }
  @media (max-width: 480px) {
    div.timeline .today, div.timeline .beginning {
      padding: 20px;
      margin-top: 0px; } }
  div.timeline .today h2, div.timeline .beginning h2 {
    display: inline-block;
    background: #000;
    padding: 14px 30px 10px;
    text-transform: uppercase;
    border: 1px solid #ff604f;
    color: #ff604f;
    font-size: 17px; }

div.timeline .beginning {
  padding: 0 20px 20px 20px;
  margin-top: 0;
  margin-bottom: 60px; }

div.timeline .entry {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  height: 480px;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: relative;
  -webkit-transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 1s;
  transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 1s; }
  div.timeline .entry:hover .date h3 {
    width: 150px;
    height: 58px;
    border-radius: 0px;
    padding: 20px;
    color: #000; }
  div.timeline .entry:hover .pics {
    cursor: pointer; }
    div.timeline .entry:hover .pics img:nth-child(2) {
      -webkit-transform: translate(-50%, -40%);
      transform: translate(-50%, -40%); }
    div.timeline .entry:hover .pics.active img:first-child {
      -webkit-transform: translate(-50%, -102%);
      transform: translate(-50%, -102%); }
    div.timeline .entry:hover .pics.active img:nth-child(2) {
      -webkit-transform: translate(-50%, 2%);
      transform: translate(-50%, 2%); }
  div.timeline .entry .title {
    -webkit-flex-basis: 45%;
    -ms-flex-preferred-size: 45%;
    flex-basis: 45%;
    text-align: center;
    padding: 100px; }
    div.timeline .entry .title h2 {
      color: #ff604f; }
      @media only screen and (min-width: 1600px) {
        div.timeline .entry .title h2 {
          font: 34px/47.6px "Marr Sans", Arial, Helvetica, sans-serif; } }
      @media only screen and (min-width: 1025px) and (max-width: 1599px) {
        div.timeline .entry .title h2 {
          font: 34px/47.6px "Marr Sans", Arial, Helvetica, sans-serif; } }
      @media only screen and (min-width: 481px) and (max-width: 1024px) {
        div.timeline .entry .title h2 {
          font: 34px/47.6px "Marr Sans", Arial, Helvetica, sans-serif; } }
      @media (max-width: 480px) {
        div.timeline .entry .title h2 {
          font: 34px/47.6px "Marr Sans", Arial, Helvetica, sans-serif; } }
  div.timeline .entry .date {
    position: absolute;
    left: 45%;
    top: 0%;
    width: 10%;
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center; }
    div.timeline .entry .date h3 {
      width: 10px;
      border-radius: 5px;
      height: 10px;
      padding: 0px;
      color: transparent;
      display: inline-block;
      background: #ff604f;
      z-index: 1;
      text-align: center;
      font-size: 16px;
      -webkit-transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.4s;
      transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.4s;
      overflow: hidden;
      white-space: nowrap; }
    div.timeline .entry .date span.line {
      position: absolute;
      left: 50%;
      top: 0px;
      width: 1px;
      height: 100%;
      background: #ff604f; }
  div.timeline .entry .pics {
    -webkit-flex-basis: 45%;
    -ms-flex-preferred-size: 45%;
    flex-basis: 45%;
    background: lightgreen;
    position: relative;
    z-index: 1; }
    div.timeline .entry .pics img {
      position: absolute;
      width: 60%;
      max-width: 400px;
      left: 50%;
      top: 50%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      -webkit-transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.3s;
      transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.3s; }
  div.timeline .entry:nth-child(odd) > div.title {
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
    -ms-flex-order: 2;
    order: 2; }
  div.timeline .entry:nth-child(odd) > div.pics {
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1; }
  div.timeline .entry .title, div.timeline .entry .date, div.timeline .entry .pics {
    -webkit-transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 1s;
    transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 1s; }
  div.timeline .entry.anim .title, div.timeline .entry.anim .pics {
    opacity: 0;
    margin-top: 30px; }

div.timeline .mobile {
  padding-bottom: 0; }
  @media only screen and (min-width: 481px) and (max-width: 1024px) {
    div.timeline .mobile {
      margin-top: 0px; } }

div.timeline .entry-mobile {
  padding: 50px 20px 40px 20px;
  text-align: center;
  overflow: hidden;
  position: relative; }
  div.timeline .entry-mobile::before {
    content: '';
    position: absolute;
    width: 1px;
    height: 100%;
    background: #ff604f;
    top: 0px;
    left: 50%;
    bottom: 0px;
    z-index: -1; }
  div.timeline .entry-mobile h4 {
    display: inline-block;
    padding: 5px 10px 4px;
    background: #ff604f;
    font-size: 13px;
    color: #000;
    margin-bottom: 20px; }
  div.timeline .entry-mobile h3 {
    color: #ff604f;
    padding: 3px 40px 3px;
    margin-bottom: 20px;
    background: #000; }
  div.timeline .entry-mobile img {
    float: right;
    width: 100%;
    padding: 0px;
    padding-right: 0; }
    @media only screen and (min-width: 481px) and (max-width: 1024px) {
      div.timeline .entry-mobile img {
        float: none;
        width: 70%; } }

div.contact {
  padding-top: 0; }
  @media (max-width: 480px) {
    div.contact {
      padding-top: 60px; } }
  div.contact section.intro {
    padding-bottom: 8vw; }
  div.contact section.details {
    padding-top: 0; }
    @media only screen and (min-device-width: 300px) and (max-device-width: 560px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
      div.contact section.details {
        padding: 0 20px 20px; } }
  div.contact section.details-mobile {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    padding: 0 30px; }
    div.contact section.details-mobile > div {
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      -ms-flex: 1;
      flex: 1;
      margin-bottom: 20px;
      -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
      flex-basis: 100%; }
      @media only screen and (orientation: landscape) {
        div.contact section.details-mobile > div {
          -webkit-flex-basis: 50%;
          -ms-flex-preferred-size: 50%;
          flex-basis: 50%; } }
      div.contact section.details-mobile > div:last-child {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
        margin-bottom: 60px; }
    div.contact section.details-mobile a, div.contact section.details-mobile address {
      color: white;
      font-size: 15px;
      line-height: 20px; }
  div.contact section.key {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    top: 80vh;
    left: 50%;
    overflow: hidden;
    background: black;
    text-align: center;
    padding: 30px 20px;
    height: 200px;
    -webkit-transform: translateX(-50%) translateY(-100%);
    transform: translateX(-50%) translateY(-100%);
    -webkit-transition: all ease .3s;
    transition: all ease .3s; }
    @media (max-width: 480px) {
      div.contact section.key {
        width: 100%; } }
    @media only screen and (min-width: 481px) and (max-width: 1024px) {
      div.contact section.key {
        width: 60%; } }
    @media only screen and (min-width: 1025px) and (max-width: 1599px) {
      div.contact section.key {
        width: 40%; } }
    @media only screen and (min-width: 1600px) {
      div.contact section.key {
        width: 30%; } }
    div.contact section.key .close {
      position: absolute;
      right: 10px;
      top: 10px;
      width: 20px;
      height: 20px;
      display: block;
      cursor: pointer;
      font-size: 20px;
      -webkit-transition: all ease .5s;
      transition: all ease .5s; }
      div.contact section.key .close:before {
        content: '\00D7'; }
      div.contact section.key .close.active {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg); }
    div.contact section.key.out {
      height: 75px; }
    div.contact section.key h1 {
      display: inline-block; }
      @media only screen and (min-width: 1600px) {
        div.contact section.key h1 {
          font: 28px/33.6px "Marr Sans", Arial, Helvetica, sans-serif; } }
      @media only screen and (min-width: 1025px) and (max-width: 1599px) {
        div.contact section.key h1 {
          font: 28px/33.6px "Marr Sans", Arial, Helvetica, sans-serif; } }
      @media only screen and (min-width: 481px) and (max-width: 1024px) {
        div.contact section.key h1 {
          font: 28px/33.6px "Marr Sans", Arial, Helvetica, sans-serif; } }
      @media (max-width: 480px) {
        div.contact section.key h1 {
          font: 28px/33.6px "Marr Sans", Arial, Helvetica, sans-serif; } }
    div.contact section.key ul {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-flow: row wrap;
      -ms-flex-flow: row wrap;
      flex-flow: row wrap; }
      div.contact section.key ul li {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        padding: 10px 20px 20px 20px;
        text-align: center; }
        div.contact section.key ul li img {
          display: inline-block;
          width: initial;
          max-width: 100%; }
        div.contact section.key ul li span {
          display: block; }
  div.contact section#map {
    width: 100%;
    height: 80vh;
    background: black; }
    div.contact section#map img {
      width: inherit;
      height: inherit; }
    div.contact section#map .ejmarker {
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      background: white;
      height: 15px;
      width: 15px;
      border-radius: 10px; }
    div.contact section#map .ejmarker2 {
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 20px;
      height: 30px;
      width: 30px;
      -webkit-animation: pulse cubic-bezier(0.71, 0.04, 0.32, 0.95) 2s infinite;
      animation: pulse cubic-bezier(0.71, 0.04, 0.32, 0.95) 2s infinite; }
    div.contact section#map .ejmarker3 {
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 25px;
      height: 50px;
      width: 50px;
      -webkit-animation: pulse 2s cubic-bezier(0.71, 0.04, 0.32, 0.95) 2.2s infinite;
      animation: pulse 2s cubic-bezier(0.71, 0.04, 0.32, 0.95) 2.2s infinite; }
    div.contact section#map .ejmarker4 {
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      background: url("../images/ej.png") 0 0 no-repeat;
      border-radius: 0px;
      height: 70px;
      width: 50px;
      -webkit-transform: translate(-1px, -50px);
      transform: translate(-1px, -50px); }
    div.contact section#map .othermapmarker {
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      background: white;
      height: 6px;
      width: 6px;
      border-radius: 4px; }
    div.contact section#map .phoney {
      color: black;
      position: relative; }
      div.contact section#map .phoney img.marker-pic {
        width: 120px;
        height: 90px; }
      div.contact section#map .phoney p {
        padding: 0 10px 10px 10px;
        line-height: 1.2em;
        height: 65px;
        overflow: hidden; }
        div.contact section#map .phoney p span {
          left: 10px;
          position: absolute;
          bottom: 0px;
          opacity: .5;
          width: 110px; }
  div.contact .map-mobile {
    height: 350px !important; }
  div.contact section.office {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex; }
    div.contact section.office ul {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      width: 100%;
      height: 600px;
      overflow-x: hidden;
      overflow-y: hidden;
      white-space: nowrap; }
      @media (max-width: 480px) {
        div.contact section.office ul {
          height: inherit; } }
    div.contact section.office li.pic {
      background: #1a1a1a;
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      -ms-flex: 1;
      flex: 1;
      height: 600px;
      opacity: 1;
      -webkit-transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.4s;
      transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.4s;
      overflow: hidden;
      position: relative;
      margin: 0px;
      padding: 0px;
      -webkit-transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.3s;
      transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.3s; }
      @media (max-width: 480px) {
        div.contact section.office li.pic {
          background: transparent;
          height: auto;
          -webkit-box-flex: 1;
          -webkit-flex: 1 0 100%;
          -ms-flex: 1 0 100%;
          flex: 1 0 100%; } }
      div.contact section.office li.pic img.profile {
        position: absolute;
        left: 0px;
        bottom: 0px;
        margin-left: 0px;
        width: inherit !important;
        height: 100%;
        max-height: 100%;
        -webkit-transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.3s;
        transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.3s; }
        @media (max-width: 480px) {
          div.contact section.office li.pic img.profile {
            position: relative;
            height: auto !important;
            width: 100% !important; } }
  div.contact section.office-mobile img {
    display: block;
    max-width: 100%;
    height: auto; }

.lock {
  overflow: hidden; }

.home section.intro, .more section.intro, .social section.intro {
  display: block;
  cursor: pointer;
  overflow: hidden;
  position: relative; }
  .home section.intro .mute, .more section.intro .mute, .social section.intro .mute {
    display: block;
    background: url("../images/mute.png") 0 0;
    position: absolute;
    right: 40px;
    top: 40px;
    width: 30px;
    height: 20px;
    overflow: hidden;
    z-index: 8888;
    cursor: pointer; }
    .home section.intro .mute.active, .more section.intro .mute.active, .social section.intro .mute.active {
      background-position: 0px 20px; }
  .home section.intro video#bgvid, .more section.intro video#bgvid, .social section.intro video#bgvid {
    display: block;
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100vh;
    z-index: 200;
    object-fit: cover; }
  .home section.intro .bump, .more section.intro .bump, .social section.intro .bump {
    display: block;
    position: absolute;
    left: 50%;
    height: 80px;
    width: 80px;
    background: #ff604f;
    z-index: 9999;
    bottom: 0px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-transition: all ease .3s;
    transition: all ease .3s;
    cursor: url("../images/bump.png") 0 0, auto;
    overflow: hidden; }
    .home section.intro .bump.hide, .more section.intro .bump.hide, .social section.intro .bump.hide {
      pointer-events: none;
      height: 0px; }
    .home section.intro .bump:before, .more section.intro .bump:before, .social section.intro .bump:before {
      content: "more";
      text-transform: uppercase;
      font-size: 14px;
      left: 50%;
      position: absolute;
      top: 50%;
      line-height: 14px;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      -webkit-transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.3s;
      transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.3s; }
    .home section.intro .bump:after, .more section.intro .bump:after, .social section.intro .bump:after {
      content: "";
      display: block;
      position: absolute;
      width: 100%;
      height: 80px;
      background: #000;
      -webkit-transform: translate(0%, 100%);
      transform: translate(0%, 100%);
      -webkit-transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.3s;
      transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.3s; }
    .home section.intro .bump:hover, .more section.intro .bump:hover, .social section.intro .bump:hover {
      height: 80px; }
      .home section.intro .bump:hover:before, .more section.intro .bump:hover:before, .social section.intro .bump:hover:before {
        -webkit-transform: translate(-50%, -80px);
        transform: translate(-50%, -80px); }
      .home section.intro .bump:hover:after, .more section.intro .bump:hover:after, .social section.intro .bump:hover:after {
        -webkit-transform: translate(0%, 0%);
        transform: translate(0%, 0%); }

.hometiles {
  position: relative;
  z-index: 300;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.5s;
  transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.5s;
  min-height: 100vh; }
  @media (max-width: 480px) {
    .hometiles {
      padding-top: 63px; } }
  @media only screen and (min-width: 481px) and (max-width: 1024px) {
    .hometiles {
      padding-top: 0; } }
  @media only screen and (min-width: 1025px) and (max-width: 1599px) {
    .hometiles {
      padding-top: 0; } }
  @media only screen and (min-width: 1600px) {
    .hometiles {
      padding-top: 0; } }
  @media only screen and (min-width: 481px) and (max-width: 1024px) {
    .hometiles div.two.reel {
      -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
      flex-basis: 100%; }
    .hometiles div.two.viral {
      -webkit-box-ordinal-group: 2;
      -webkit-order: 1;
      -ms-flex-order: 1;
      order: 1; }
    .hometiles div.two.staffpick {
      -webkit-flex-basis: 50%;
      -ms-flex-preferred-size: 50%;
      flex-basis: 50%; }
    .hometiles div.two.guide {
      -webkit-flex-basis: 50%;
      -ms-flex-preferred-size: 50%;
      flex-basis: 50%; } }
  .hometiles.hide {
    opacity: 0; }
  @media (max-width: 480px) {
    .hometiles .one {
      height: 384px; } }
  @media only screen and (min-width: 481px) and (max-width: 1024px) {
    .hometiles .one {
      height: 344px; } }
  @media only screen and (min-width: 1025px) and (max-width: 1599px) {
    .hometiles .one {
      height: 385px; } }
  @media only screen and (min-width: 1600px) {
    .hometiles .one {
      height: 33vw; } }
  @media (max-width: 480px) {
    .hometiles .one {
      -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
      flex-basis: 100%; } }
  @media only screen and (min-width: 481px) and (max-width: 1024px) {
    .hometiles .one {
      -webkit-flex-basis: -webkit-calc(100% / 2);
      -ms-flex-preferred-size: calc(100% / 2);
      flex-basis: calc(100% / 2); } }
  @media only screen and (min-width: 1025px) and (max-width: 1599px) {
    .hometiles .one {
      -webkit-flex-basis: -webkit-calc(100% / 3);
      -ms-flex-preferred-size: calc(100% / 3);
      flex-basis: calc(100% / 3); } }
  @media only screen and (min-width: 1600px) {
    .hometiles .one {
      -webkit-flex-basis: -webkit-calc(100% / 3);
      -ms-flex-preferred-size: calc(100% / 3);
      flex-basis: calc(100% / 3); } }
  @media (max-width: 480px) {
    .hometiles .two {
      -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
      flex-basis: 100%; } }
  @media only screen and (min-width: 481px) and (max-width: 1024px) {
    .hometiles .two {
      -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
      flex-basis: 100%; } }
  @media only screen and (min-width: 1025px) and (max-width: 1599px) {
    .hometiles .two {
      -webkit-flex-basis: -webkit-calc((100% / 3)*2);
      -ms-flex-preferred-size: calc((100% / 3)*2);
      flex-basis: calc((100% / 3)*2); } }
  @media only screen and (min-width: 1600px) {
    .hometiles .two {
      -webkit-flex-basis: -webkit-calc((100% / 3)*2);
      -ms-flex-preferred-size: calc((100% / 3)*2);
      flex-basis: calc((100% / 3)*2); } }
  @media (max-width: 480px) {
    .hometiles .two {
      height: 384px; } }
  @media only screen and (min-width: 481px) and (max-width: 1024px) {
    .hometiles .two {
      height: 344px; } }
  @media only screen and (min-width: 1025px) and (max-width: 1599px) {
    .hometiles .two {
      height: 385px; } }
  @media only screen and (min-width: 1600px) {
    .hometiles .two {
      height: 33vw; } }
  .hometiles .project {
    background: bisque;
    position: relative;
    overflow: hidden; }
    .hometiles .project img {
      display: block;
      object-fit: cover;
      height: 100%; }
    .hometiles .project .info {
      position: absolute;
      left: 0px;
      bottom: 0px;
      background: black;
      color: #ff604f;
      padding: 30px;
      -webkit-transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.3s;
      transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.3s; }
      @media (max-width: 480px) {
        .hometiles .project .info {
          width: 60%; } }
      @media only screen and (min-width: 481px) and (max-width: 1024px) {
        .hometiles .project .info {
          width: 70%; } }
      @media only screen and (min-width: 1025px) and (max-width: 1599px) {
        .hometiles .project .info {
          width: 50%; } }
      @media only screen and (min-width: 1600px) {
        .hometiles .project .info {
          width: 50%; } }
      @media (max-width: 480px) {
        .hometiles .project .info {
          -webkit-transform: translateY(0%);
          transform: translateY(0%); } }
      @media only screen and (min-width: 481px) and (max-width: 1024px) {
        .hometiles .project .info {
          -webkit-transform: translateY(0%);
          transform: translateY(0%); } }
      @media only screen and (min-width: 1025px) and (max-width: 1599px) {
        .hometiles .project .info {
          -webkit-transform: translateY(100%);
          transform: translateY(100%); } }
      @media only screen and (min-width: 1600px) {
        .hometiles .project .info {
          -webkit-transform: translateY(100%);
          transform: translateY(100%); } }
      @media only screen and (min-width: 1600px) {
        .hometiles .project .info h3 {
          font: 17px/23.8px "Marr Sans", Arial, Helvetica, sans-serif; } }
      @media only screen and (min-width: 1025px) and (max-width: 1599px) {
        .hometiles .project .info h3 {
          font: 17px/23.8px "Marr Sans", Arial, Helvetica, sans-serif; } }
      @media only screen and (min-width: 481px) and (max-width: 1024px) {
        .hometiles .project .info h3 {
          font: 17px/23.8px "Marr Sans", Arial, Helvetica, sans-serif; } }
      @media (max-width: 480px) {
        .hometiles .project .info h3 {
          font: 17px/23.8px "Marr Sans", Arial, Helvetica, sans-serif; } }
    .hometiles .project:hover {
      cursor: pointer; }
      .hometiles .project:hover .info {
        -webkit-transform: translateY(0%);
        transform: translateY(0%); }
  .hometiles .ej, .hometiles .guide, .hometiles .reel, .hometiles .staffpick, .hometiles .viral {
    background: #000;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    overflow: hidden; }
    .hometiles .ej a, .hometiles .guide a, .hometiles .reel a, .hometiles .staffpick a, .hometiles .viral a {
      display: block;
      width: 100%;
      padding: 100% 200px;
      text-align: center;
      color: #ff604f; }
      @media only screen and (min-width: 481px) and (max-width: 1024px) {
        .hometiles .ej a, .hometiles .guide a, .hometiles .reel a, .hometiles .staffpick a, .hometiles .viral a {
          padding: 100% 10%; } }
      @media (max-width: 480px) {
        .hometiles .ej a, .hometiles .guide a, .hometiles .reel a, .hometiles .staffpick a, .hometiles .viral a {
          padding: 5% 0%; } }
      .hometiles .ej a:hover h2, .hometiles .guide a:hover h2, .hometiles .reel a:hover h2, .hometiles .staffpick a:hover h2, .hometiles .viral a:hover h2 {
        margin-top: -30px; }
      .hometiles .ej a:hover span.more, .hometiles .guide a:hover span.more, .hometiles .reel a:hover span.more, .hometiles .staffpick a:hover span.more, .hometiles .viral a:hover span.more {
        -webkit-transform: translate(-50%, 20%);
        transform: translate(-50%, 20%);
        opacity: 1; }
        .hometiles .ej a:hover span.more:hover, .hometiles .guide a:hover span.more:hover, .hometiles .reel a:hover span.more:hover, .hometiles .staffpick a:hover span.more:hover, .hometiles .viral a:hover span.more:hover {
          background: #ff604f;
          color: #000; }
    .hometiles .ej span.more, .hometiles .guide span.more, .hometiles .reel span.more, .hometiles .staffpick span.more, .hometiles .viral span.more {
      position: absolute;
      -webkit-transform: translate(-50%, -100%);
      transform: translate(-50%, -100%);
      padding: 8px 16px 6px;
      border: 1px solid #ff604f;
      border-radius: 4px;
      letter-spacing: 1px;
      opacity: 0;
      -webkit-transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.3s;
      transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.3s;
      background: #000; }
      @media only screen and (min-width: 1600px) {
        .hometiles .ej span.more, .hometiles .guide span.more, .hometiles .reel span.more, .hometiles .staffpick span.more, .hometiles .viral span.more {
          font: 14px/21px "Marr Sans", Arial, Helvetica, sans-serif; } }
      @media only screen and (min-width: 1025px) and (max-width: 1599px) {
        .hometiles .ej span.more, .hometiles .guide span.more, .hometiles .reel span.more, .hometiles .staffpick span.more, .hometiles .viral span.more {
          font: 14px/21px "Marr Sans", Arial, Helvetica, sans-serif; } }
      @media only screen and (min-width: 481px) and (max-width: 1024px) {
        .hometiles .ej span.more, .hometiles .guide span.more, .hometiles .reel span.more, .hometiles .staffpick span.more, .hometiles .viral span.more {
          font: 14px/21px "Marr Sans", Arial, Helvetica, sans-serif; } }
      @media (max-width: 480px) {
        .hometiles .ej span.more, .hometiles .guide span.more, .hometiles .reel span.more, .hometiles .staffpick span.more, .hometiles .viral span.more {
          font: 14px/21px "Marr Sans", Arial, Helvetica, sans-serif; } }
      .hometiles .ej span.more:after, .hometiles .guide span.more:after, .hometiles .reel span.more:after, .hometiles .staffpick span.more:after, .hometiles .viral span.more:after {
        content: 'More';
        text-transform: uppercase; }
    .hometiles .ej h2, .hometiles .guide h2, .hometiles .reel h2, .hometiles .staffpick h2, .hometiles .viral h2 {
      position: relative;
      z-index: 1;
      -webkit-transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.3s;
      transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.3s; }
      @media only screen and (min-width: 1600px) {
        .hometiles .ej h2, .hometiles .guide h2, .hometiles .reel h2, .hometiles .staffpick h2, .hometiles .viral h2 {
          font: 38px/47.5px "Marr Sans", Arial, Helvetica, sans-serif; } }
      @media only screen and (min-width: 1025px) and (max-width: 1599px) {
        .hometiles .ej h2, .hometiles .guide h2, .hometiles .reel h2, .hometiles .staffpick h2, .hometiles .viral h2 {
          font: 38px/47.5px "Marr Sans", Arial, Helvetica, sans-serif; } }
      @media only screen and (min-width: 481px) and (max-width: 1024px) {
        .hometiles .ej h2, .hometiles .guide h2, .hometiles .reel h2, .hometiles .staffpick h2, .hometiles .viral h2 {
          font: 38px/47.5px "Marr Sans", Arial, Helvetica, sans-serif; } }
      @media (max-width: 480px) {
        .hometiles .ej h2, .hometiles .guide h2, .hometiles .reel h2, .hometiles .staffpick h2, .hometiles .viral h2 {
          font: 32px/40px "Marr Sans", Arial, Helvetica, sans-serif; } }
  .hometiles .ej {
    position: relative;
    background: #000; }
    .hometiles .ej canvas#c {
      position: absolute;
      display: block;
      width: 100%;
      height: 100%;
      left: 0px;
      top: 0px; }
  .hometiles .staffpick {
    position: relative; }
    @media (max-width: 480px) {
      .hometiles .staffpick {
        background: url("../images/pick.png") !important; } }
    @media only screen and (min-width: 481px) and (max-width: 1024px) {
      .hometiles .staffpick {
        background: url("../images/pick.png") !important; } }
    .hometiles .staffpick canvas#ugh {
      left: 0px;
      top: 0px;
      cursor: none;
      background: #000; }
      @media only screen and (min-width: 481px) and (max-width: 1024px) {
        .hometiles .staffpick canvas#ugh {
          display: none; } }
    .hometiles .staffpick a {
      position: absolute;
      left: 50%;
      top: 50%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      z-index: 1;
      cursor: none;
      padding: 100px 70px; }
      .hometiles .staffpick a h2 {
        color: #ff604f; }
  .hometiles .viral {
    position: relative; }
    .hometiles .viral a {
      position: absolute;
      left: 50%;
      top: 50%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      z-index: 1;
      padding: 100px 70px; }
      .hometiles .viral a h2 {
        color: white; }
  .hometiles .guide {
    position: relative;
    overflow: hidden; }
    .hometiles .guide #map {
      position: absolute;
      width: 100%;
      left: 0px;
      top: 0px;
      height: 120%;
      background: #ff604f; }
      .hometiles .guide #map img {
        width: inherit;
        height: inherit; }
    .hometiles .guide h2 {
      text-shadow: 0px 1px 4px rgba(0, 0, 0, 0.5); }
  .hometiles .tweet, .hometiles .fb {
    background: #ff604f;
    position: relative;
    padding: 40px 80px 40px 40px;
    -webkit-transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.4s;
    transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.4s; }
    @media only screen and (min-width: 481px) and (max-width: 1024px) {
      .hometiles .tweet, .hometiles .fb {
        padding: 30px 60px 30px 30px; } }
    .hometiles .tweet h3, .hometiles .tweet a, .hometiles .fb h3, .hometiles .fb a {
      -webkit-transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.4s;
      transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.4s; }
      @media only screen and (min-width: 1600px) {
        .hometiles .tweet h3, .hometiles .tweet a, .hometiles .fb h3, .hometiles .fb a {
          font: 23px/29.9px "Marr Sans", Arial, Helvetica, sans-serif; } }
      @media only screen and (min-width: 1025px) and (max-width: 1599px) {
        .hometiles .tweet h3, .hometiles .tweet a, .hometiles .fb h3, .hometiles .fb a {
          font: 21px/27.3px "Marr Sans", Arial, Helvetica, sans-serif; } }
      @media only screen and (min-width: 481px) and (max-width: 1024px) {
        .hometiles .tweet h3, .hometiles .tweet a, .hometiles .fb h3, .hometiles .fb a {
          font: 18px/23.4px "Marr Sans", Arial, Helvetica, sans-serif; } }
      @media (max-width: 480px) {
        .hometiles .tweet h3, .hometiles .tweet a, .hometiles .fb h3, .hometiles .fb a {
          font: 16px/20.8px "Marr Sans", Arial, Helvetica, sans-serif; } }
    .hometiles .tweet span.twitter, .hometiles .fb span.twitter {
      position: absolute;
      left: 40px;
      bottom: 40px; }
      .hometiles .tweet span.twitter svg, .hometiles .fb span.twitter svg {
        -webkit-transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.4s;
        transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.4s;
        fill: #000; }
      @media only screen and (min-width: 481px) and (max-width: 1024px) {
        .hometiles .tweet span.twitter, .hometiles .fb span.twitter {
          left: 30px;
          bottom: 30px; } }
    .hometiles .tweet span.facebook, .hometiles .fb span.facebook {
      position: absolute;
      left: 40px;
      bottom: 40px; }
      .hometiles .tweet span.facebook svg, .hometiles .fb span.facebook svg {
        -webkit-transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.4s;
        transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.4s;
        fill: #ff604f; }
      @media only screen and (min-width: 481px) and (max-width: 1024px) {
        .hometiles .tweet span.facebook, .hometiles .fb span.facebook {
          left: 30px;
          bottom: 30px; } }
    .hometiles .tweet:hover, .hometiles .fb:hover {
      background: #000; }
      .hometiles .tweet:hover h3, .hometiles .fb:hover h3 {
        color: #ff604f; }
      .hometiles .tweet:hover span.twitter svg, .hometiles .fb:hover span.twitter svg {
        fill: #ff604f; }
  .hometiles .tweet a {
    color: #000; }
  .hometiles .tweet:hover a {
    color: #ff604f; }
  .hometiles .fb {
    background: #000; }
    .hometiles .fb h3, .hometiles .fb a {
      color: #ff604f;
      font: 16px/20px "Marr Sans",Arial,Helvetica,sans-serif; }
    .hometiles .fb img.attachment {
      width: inherit;
      margin-top: 15px;
      max-width: 50%; }
    .hometiles .fb:hover {
      background: #ff604f; }
      .hometiles .fb:hover h3, .hometiles .fb:hover a {
        color: #ff604f; }
      .hometiles .fb:hover span.facebook svg {
        fill: #ff604f; }
    .hometiles .fb h3 {
      position: relative;
      z-index: 1; }
    .hometiles .fb img.attachment {
      opacity: .4;
      position: absolute;
      left: 0px;
      top: 0px;
      right: 0px;
      bottom: 0px;
      object-fit: cover;
      -webkit-filter: grayscale(100%);
      filter: grayscale(100%);
      margin: 0;
      max-width: 100%; }
  .hometiles .insta {
    position: relative;
    overflow: hidden; }
    .hometiles .insta img {
      opacity: 1;
      min-width: 100%;
      min-height: 100%;
      object-fit: fit; }
    .hometiles .insta span.insta {
      display: block;
      position: absolute;
      background: transparent;
      z-index: 1;
      bottom: 0;
      left: 0;
      -webkit-transform: translate(0%, -webkit-calc(100% - 90px));
      transform: translate(0%, calc(100% - 90px));
      -webkit-transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.3s;
      transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.3s; }
      @media (max-width: 480px) {
        .hometiles .insta span.insta {
          background: #ff604f; } }
      @media only screen and (min-width: 481px) and (max-width: 1024px) {
        .hometiles .insta span.insta {
          background: #ff604f; } }
      @media only screen and (min-width: 1025px) and (max-width: 1599px) {
        .hometiles .insta span.insta {
          background: transparent; } }
      @media only screen and (min-width: 1600px) {
        .hometiles .insta span.insta {
          background: transparent; } }
      @media (max-width: 480px) {
        .hometiles .insta span.insta {
          width: 95px; } }
      @media only screen and (min-width: 481px) and (max-width: 1024px) {
        .hometiles .insta span.insta {
          width: 95px; } }
      @media only screen and (min-width: 1025px) and (max-width: 1599px) {
        .hometiles .insta span.insta {
          width: 100%; } }
      @media only screen and (min-width: 1600px) {
        .hometiles .insta span.insta {
          width: 100%; } }
      @media (max-width: 480px) {
        .hometiles .insta span.insta {
          padding: 30px 35px; } }
      @media only screen and (min-width: 481px) and (max-width: 1024px) {
        .hometiles .insta span.insta {
          padding: 30px 35px; } }
      @media only screen and (min-width: 1025px) and (max-width: 1599px) {
        .hometiles .insta span.insta {
          padding: 30px 40px; } }
      @media only screen and (min-width: 1600px) {
        .hometiles .insta span.insta {
          padding: 30px 40px; } }
    .hometiles .insta h4 {
      color: #ff604f;
      -webkit-transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.3s;
      transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.3s;
      margin-top: 30px; }
      @media only screen and (min-width: 1600px) {
        .hometiles .insta h4 {
          font: 18px/25.2px "Marr Sans", Arial, Helvetica, sans-serif; } }
      @media only screen and (min-width: 1025px) and (max-width: 1599px) {
        .hometiles .insta h4 {
          font: 18px/25.2px "Marr Sans", Arial, Helvetica, sans-serif; } }
      @media only screen and (min-width: 481px) and (max-width: 1024px) {
        .hometiles .insta h4 {
          font: 18px/25.2px "Marr Sans", Arial, Helvetica, sans-serif; } }
      @media (max-width: 480px) {
        .hometiles .insta h4 {
          font: 16px/22.4px "Marr Sans", Arial, Helvetica, sans-serif; } }
    .hometiles .insta svg {
      fill: #ff604f;
      -webkit-transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.3s;
      transition: all cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.3s; }
      @media (max-width: 480px) {
        .hometiles .insta svg {
          fill: #000; } }
      @media only screen and (min-width: 481px) and (max-width: 1024px) {
        .hometiles .insta svg {
          fill: #000; } }
      @media only screen and (min-width: 1025px) and (max-width: 1599px) {
        .hometiles .insta svg {
          fill: #ff604f; } }
      @media only screen and (min-width: 1600px) {
        .hometiles .insta svg {
          fill: #ff604f; } }
    .hometiles .insta:hover span.insta {
      color: #000;
      -webkit-transform: translate(0%, 0%);
      transform: translate(0%, 0%);
      background: #ff604f; }
      @media only screen and (min-width: 481px) and (max-width: 1024px) {
        .hometiles .insta:hover span.insta {
          -webkit-transform: translate(0%, -webkit-calc(100% - 90px));
          transform: translate(0%, calc(100% - 90px)); } }
      @media (max-width: 480px) {
        .hometiles .insta:hover span.insta {
          -webkit-transform: translate(0%, -webkit-calc(100% - 90px));
          transform: translate(0%, calc(100% - 90px)); } }
      .hometiles .insta:hover span.insta h4 {
        color: #000; }
      .hometiles .insta:hover span.insta svg {
        fill: #000; }
  .hometiles .tweet.hidden, .hometiles .fb.hidden, .hometiles .insta.hidden {
    display: none; }
  .hometiles .reel {
    background: #000; }
  .hometiles .staffpick {
    background: #ff604f; }
    .hometiles .staffpick h2 {
      color: #000; }
  .hometiles .viral {
    background: #ff604f; }

.oembed iframe,
.oembed object,
.oembed embed,
.oembed img {
  max-width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
  border-width: 0; }

.oembed-video {
  width: 102%;
  position: relative;
  padding: 0;
  padding-top: 56% !important; }
  .oembed-video iframe,
  .oembed-video object,
  .oembed-video img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }

.oembed-lazyvideo {
  background-color: #000;
  overflow: hidden; }
  .oembed-lazyvideo .play {
    z-index: 10;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 1;
    cursor: pointer;
    -webkit-transition: opacity cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.3s;
    transition: opacity cubic-bezier(0.71, 0.04, 0.32, 0.95) 0.3s; }
    .oembed-lazyvideo .play img {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      width: auto;
      height: auto; }
  .oembed-lazyvideo:hover .play {
    opacity: 0; }
  .oembed-lazyvideo .thumb {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-size: cover;
    background-position: 50% 50%;
    cursor: pointer; }
  .oembed-lazyvideo iframe,
  .oembed-lazyvideo object {
    display: none; }

footer {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  padding: 20px 50px;
  text-align: center;
  color: white; }
  @media (max-width: 480px) {
    footer {
      padding: 20px 20px;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -webkit-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column;
      text-align: left; } }
  @media only screen and (min-width: 1600px) {
    footer {
      font: 16px/24px "Marr Sans", Arial, Helvetica, sans-serif; } }
  @media only screen and (min-width: 1025px) and (max-width: 1599px) {
    footer {
      font: 16px/24px "Marr Sans", Arial, Helvetica, sans-serif; } }
  @media only screen and (min-width: 481px) and (max-width: 1024px) {
    footer {
      font: 16px/24px "Marr Sans", Arial, Helvetica, sans-serif; } }
  @media (max-width: 480px) {
    footer {
      font: 16px/24px "Marr Sans", Arial, Helvetica, sans-serif; } }
  footer a {
    color: white; }
  footer .copy {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1; }
  footer .tel {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1; }
  footer .mail {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1; }
  footer .credit {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    opacity: .3; }
    @media (max-width: 480px) {
      footer .credit {
        margin-top: 30px;
        text-align: left;
        display: none; } }
    @media only screen and (min-width: 481px) and (max-width: 1024px) {
      footer .credit {
        display: none; } }

/* ANIMATIONS */
@-webkit-keyframes pulse {
  40% {
    -webkit-transform: scale(2);
    transform: scale(2); }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1); } }

@keyframes pulse {
  40% {
    -webkit-transform: scale(2);
    transform: scale(2); }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1); } }

@-webkit-keyframes dissolve {
  0% {
    opacity: 1;
    -webkit-transform: scale(1) translateY(-50%);
    transform: scale(1) translateY(-50%); }
  90% {
    opacity: 1;
    -webkit-transform: scale(1) translateY(-50%);
    transform: scale(1) translateY(-50%); }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.7) translateY(-80%);
    transform: scale(0.7) translateY(-80%); } }

@keyframes dissolve {
  0% {
    opacity: 1;
    -webkit-transform: scale(1) translateY(-50%);
    transform: scale(1) translateY(-50%); }
  90% {
    opacity: 1;
    -webkit-transform: scale(1) translateY(-50%);
    transform: scale(1) translateY(-50%); }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.7) translateY(-80%);
    transform: scale(0.7) translateY(-80%); } }