@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);@import url(https://fonts.googleapis.com/css?family=Oswald:300|Open+Sans:700,800|Raleway+Dots|Raleway:400,600,900);/* http://meyerweb.com/eric/tools/css/reset/
   v3.0 | 20180413
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
main, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section {
	display: block;
}
/* HTML5 hidden-attribute fix for newer browsers */
*[hidden] {
    display: none;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/**
 * http://applemusic.tumblr.com/
 */
/** Ultra Light */
@font-face {
  font-family: "San Francisco";
  font-weight: 100;
  src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-ultralight-webfont.woff"); }

/** Thin */
@font-face {
  font-family: "San Francisco";
  font-weight: 200;
  src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-thin-webfont.woff"); }

/** Regular */
@font-face {
  font-family: "San Francisco";
  font-weight: 400;
  src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff"); }

/** Medium */
@font-face {
  font-family: "San Francisco";
  font-weight: 500;
  src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-medium-webfont.woff"); }

/** Semi Bold */
@font-face {
  font-family: "San Francisco";
  font-weight: 600;
  src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-semibold-webfont.woff"); }

/** Bold */
@font-face {
  font-family: "San Francisco";
  font-weight: 700;
  src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-bold-webfont.woff"); }

* {
  font-family: "San Francisco"; }

@keyframes preload {
  from {
    width: 0; }
  to {
    width: 98px; } }

@keyframes underline {
  from {
    border-color: #14aeff;
    color: #14aeff; }
  to {
    border-color: white;
    color: white; } }

@keyframes surname {
  from {
    color: #14aeff; }
  to {
    color: white; } }

@keyframes slideDown {
  from {
    transform: translateY(-40px); }
  to {
    transform: translateY(0); } }

@keyframes slideOpacity {
  from {
    opacity: 0; }
  99% {
    opacity: 0; }
  to {
    opacity: 1; } }

@keyframes fadeLeft {
  from {
    opacity: 0;
    transform: translateX(20px); }
  50% {
    opacity: 0.8; }
  to {
    opacity: 1;
    transform: translateX(0px); } }

@keyframes fadeDown {
  from {
    opacity: 0;
    transform: translateY(20px); }
  to {
    opacity: 1;
    transform: translateX(0px); } }

#preloader {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 999;
  transition: opacity 1s ease-in-out; }
  #preloader > span {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 30pt;
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
    opacity: 0.85;
    color: white; }
    #preloader > span img {
      margin-left: 0px;
      vertical-align: middle;
      filter: invert(100%); }
    #preloader > span.loading {
      font-size: 10pt;
      top: calc(50% + 30pt);
      color: rgba(255, 255, 255, 0.3);
      letter-spacing: 0.5px;
      transform: translate(-50%, 30px);
      opacity: 0;
      animation: preload 1.6s ease-in-out 3s;
      animation-fill-mode: forwards; }
  body.loaded #preloader {
    opacity: 0;
    pointer-events: none;
    user-select: none; }

@keyframes preload {
  from {
    transform: translate(-50%, 0px);
    opacity: 0; }
  to {
    transform: translate(-50%, -10px);
    opacity: 1; } }

@keyframes preload {
  from {
    width: 0; }
  to {
    width: 98px; } }

@keyframes underline {
  from {
    border-color: #14aeff;
    color: #14aeff; }
  to {
    border-color: white;
    color: white; } }

@keyframes surname {
  from {
    color: #14aeff; }
  to {
    color: white; } }

@keyframes slideDown {
  from {
    transform: translateY(-40px); }
  to {
    transform: translateY(0); } }

@keyframes slideOpacity {
  from {
    opacity: 0; }
  99% {
    opacity: 0; }
  to {
    opacity: 1; } }

@keyframes fadeLeft {
  from {
    opacity: 0;
    transform: translateX(20px); }
  50% {
    opacity: 0.8; }
  to {
    opacity: 1;
    transform: translateX(0px); } }

@keyframes fadeDown {
  from {
    opacity: 0;
    transform: translateY(20px); }
  to {
    opacity: 1;
    transform: translateX(0px); } }

.product-page {
  z-index: 3;
  overflow: scroll;
  width: 100%; }
  .product-page > div:first-child {
    padding: 80px 10vw !important; }
  .product-page > div *:not(.row) {
    padding: 30px 0; }
  .product-page .thin-block {
    padding: 0px 10vw;
    width: calc(100% - 20vw) !important;
    position: relative;
    left: 50%;
    transform: translateX(-50%); }
  .product-page span.home {
    position: absolute;
    width: 100px;
    height: 15px;
    background: #f5f5f4;
    padding: 0;
    margin: 30px 0;
    padding: 15px 10px;
    text-align: center;
    color: #797878;
    font-family: "San Francisco";
    display: block;
    overflow: hidden;
    cursor: pointer;
    top: -40px;
    right: 0; }
    .product-page span.home:hover:after {
      transform: translateY(0%); }
    .product-page span.home:hover span {
      color: white; }
    .product-page span.home span {
      color: #797878;
      z-index: 999;
      position: absolute;
      left: 0;
      top: 0;
      padding: 0;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%); }
    .product-page span.home:after {
      content: "";
      display: block;
      position: absolute;
      width: inherit;
      height: inherit;
      background: #2a2a27;
      padding: inherit;
      left: 0;
      top: 0;
      transform: translateY(100%);
      transition: transform 0.1s ease-in-out; }
  .product-page h1 {
    font-size: 6vw;
    font-family: 'Raleway', sans-serif;
    font-weight: 900;
    text-align: right;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-image: url(https://www.toptal.com/designers/subtlepatterns/patterns/dark-grey-terrazzo.png); }
  .product-page h4 {
    font-size: 2vmin;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    letter-spacing: 0.5px;
    text-align: right;
    padding: 0px !important;
    padding-right: 20px !important;
    font-family: "San Francisco";
    color: #4973AC; }
    .product-page h4 a {
      text-decoration: none;
      color: #afafaf;
      transition: color 0.5s ease-in-out; }
      .product-page h4 a:hover {
        color: #4973AC; }
  .product-page span.image-text {
    font-size: 9pt;
    font-weight: 200;
    word-spacing: 4px;
    letter-spacing: 0.4px;
    color: #888888;
    line-height: 1.5;
    font-family: "San Francisco";
    padding: 0;
    text-align: center;
    width: 100%;
    display: block;
    position: relative;
    bottom: 10px; }
  .product-page p {
    font-family: 'Raleway', sans-serif;
    font-size: 16pt;
    font-weight: 200;
    word-spacing: 6px;
    letter-spacing: 0.2px;
    color: #272727;
    line-height: 1.5;
    font-family: "San Francisco"; }
    .product-page p.quote-block {
      line-height: 1.3;
      padding: 8vw 4vw;
      font-size: 20pt;
      font-weight: 100;
      color: #676767; }
  .product-page b {
    font-weight: 400; }
  .product-page img.full-width {
    width: 100%; }
  .product-page .pic-center {
    left: 50%;
    position: relative;
    transform: translateX(-50%); }
  .product-page .project-controls {
    height: 60px;
    padding: 0;
    width: 100%; }
    .product-page .project-controls > div {
      height: inherit;
      display: inline-block;
      width: 50%;
      padding: 0;
      background: #fbfbfb;
      border-style: solid;
      border-color: #f9f9f9;
      transition: background 0.5s ease-out;
      position: relative;
      cursor: pointer; }
      .product-page .project-controls > div > span {
        padding: 16px;
        display: block;
        font-size: 20pt;
        font-family: "San Francisco";
        color: #b5b5b5;
        padding-left: 40pt;
        padding-right: 40pt;
        font-weight: 200; }
        .product-page .project-controls > div > span > img {
          display: inline;
          padding: 0;
          padding-right: 20px;
          opacity: 0;
          text-align: left;
          float: left;
          display: inline-block;
          vertical-align: middle;
          padding: 5px;
          position: absolute;
          transition: all 0.5s ease-out; }
      .product-page .project-controls > div:hover {
        background: #4973AC; }
        .product-page .project-controls > div:hover > span {
          color: white; }
        .product-page .project-controls > div:hover > span > img {
          opacity: 0.5; }
        .product-page .project-controls > div:hover.project-left > span > img {
          transform: translateX(-100px); }
        .product-page .project-controls > div:hover.project-right > span > img {
          transform: translateX(100px); }
  .product-page footer {
    height: 100px;
    background: #f5f5f4; }
    .product-page footer ul {
      display: block;
      padding: 42px;
      text-align: center; }
      .product-page footer ul li {
        display: inline;
        margin: 0 30px;
        font-size: 10pt;
        font-family: "San Francisco";
        font-weight: 100; }
        .product-page footer ul li a {
          color: #a5a5a5;
          text-decoration: none; }
          .product-page footer ul li a:hover {
            color: #7f7f7f; }

#about-page {
  position: fixed;
  height: 100%;
  width: 100%;
  background: white;
  transform: translateY(100%);
  transition: transform 0.5s ease-in-out; }
  body[data-page="about"] #about-page {
    transition: transform 0.5s ease-in-out;
    transform: translateY(0); }
  body[data-page="projects"] #about-page {
    transition: transform 0.3s ease-out;
    transform: translateY(-100%); }
  body[data-page="projects-start"] #about-page {
    transition: none;
    transform: translateY(100%); }
  #about-page .fade:nth-child(1) {
    opacity: 0;
    transition: opacity 1s ease-in-out 0.75s; }
    body[data-page="about"] #about-page .fade:nth-child(1) {
      opacity: 1; }
  #about-page .fade:nth-child(2) {
    opacity: 0;
    transition: opacity 1s ease-in-out 1.5s; }
    body[data-page="about"] #about-page .fade:nth-child(2) {
      opacity: 1; }
  #about-page .fade:nth-child(3) {
    opacity: 0;
    transition: opacity 1s ease-in-out 2.25s; }
    body[data-page="about"] #about-page .fade:nth-child(3) {
      opacity: 1; }
  #about-page .fade:nth-child(4) {
    opacity: 0;
    transition: opacity 1s ease-in-out 3s; }
    body[data-page="about"] #about-page .fade:nth-child(4) {
      opacity: 1; }
  #about-page .fade:nth-child(5) {
    opacity: 0;
    transition: opacity 1s ease-in-out 3.75s; }
    body[data-page="about"] #about-page .fade:nth-child(5) {
      opacity: 1; }
  #about-page .fade:nth-child(6) {
    opacity: 0;
    transition: opacity 1s ease-in-out 4.5s; }
    body[data-page="about"] #about-page .fade:nth-child(6) {
      opacity: 1; }
  #about-page .fade:nth-child(7) {
    opacity: 0;
    transition: opacity 1s ease-in-out 5.25s; }
    body[data-page="about"] #about-page .fade:nth-child(7) {
      opacity: 1; }
  #about-page .fade:nth-child(8) {
    opacity: 0;
    transition: opacity 1s ease-in-out 6s; }
    body[data-page="about"] #about-page .fade:nth-child(8) {
      opacity: 1; }
  #about-page .fade:nth-child(9) {
    opacity: 0;
    transition: opacity 1s ease-in-out 6.75s; }
    body[data-page="about"] #about-page .fade:nth-child(9) {
      opacity: 1; }
  #about-page .fade:nth-child(10) {
    opacity: 0;
    transition: opacity 1s ease-in-out 7.5s; }
    body[data-page="about"] #about-page .fade:nth-child(10) {
      opacity: 1; }
  #about-page div.image {
    position: relative;
    height: 50vh;
    width: 50vh;
    background-image: url(assets/image2.jpg);
    top: 20vh;
    left: 20vh;
    background-size: cover;
    border-radius: 4px;
    opacity: 0;
    transition: all 2.8s cubic-bezier(0.65, 0.23, 0.25, 0.93) 0.8s;
    transform: translateX(-100px);
    display: inline-block; }
    body[data-page="about"] #about-page div.image {
      opacity: 1;
      transform: translateX(0); }
  #about-page div.content {
    position: relative;
    top: 20vh;
    left: 40vh;
    display: inline-block;
    vertical-align: top;
    font-family: 'Raleway', sans-serif; }
    #about-page div.content h1 {
      font-size: 20pt;
      font-weight: 900; }
    #about-page div.content p {
      font-size: 10pt;
      font-size: 11pt;
      font-weight: 400;
      max-width: calc(100vw - 120vh);
      line-height: 1.4;
      padding-top: 10pt;
      word-spacing: 6px;
      letter-spacing: 0.5px; }
      #about-page div.content p b {
        font-weight: 600; }
      #about-page div.content p u {
        text-decoration: none;
        border-bottom: 1.5px dashed #666;
        padding-bottom: 1.5px; }
      #about-page div.content p .year {
        font-family: 'Open Sans', sans-serif;
        font-weight: 800;
        color: #333; }
      #about-page div.content p a {
        color: #999;
        text-decoration: none;
        margin-top: 10px;
        display: inline-block;
        padding-bottom: 2px;
        padding-top: 2px;
        font-size: 12pt;
        word-spacing: 2px;
        letter-spacing: 2px; }
        #about-page div.content p a:after {
          display: inline-block;
          font: normal normal normal 14px/1 FontAwesome;
          font-size: inherit;
          text-rendering: auto;
          -webkit-font-smoothing: antialiased;
          content: "\F105";
          padding-left: 10px;
          transition: transform 0.3s ease-in-out; }
        #about-page div.content p a:hover:after {
          transform: translateX(3px); }
    #about-page div.content .animation-slide:nth-child(1) {
      overflow: hidden; }
      #about-page div.content .animation-slide:nth-child(1) span {
        transition: all 1s cubic-bezier(0.65, 0.23, 0.25, 0.93) 2.96667s;
        display: block;
        transform: translateY(-30px); }
        body[data-page="about"] #about-page div.content .animation-slide:nth-child(1) span {
          transform: translateY(0); }
      #about-page div.content .animation-slide:nth-child(1)[last] {
        transform: translateY(30px); }
        #about-page div.content .animation-slide:nth-child(1)[last] span {
          transition: all 1s cubic-bezier(0.65, 0.23, 0.25, 0.93) 3.96667s; }
    #about-page div.content .animation-slide:nth-child(2) {
      overflow: hidden; }
      #about-page div.content .animation-slide:nth-child(2) span {
        transition: all 1s cubic-bezier(0.65, 0.23, 0.25, 0.93) 3.13333s;
        display: block;
        transform: translateY(-30px); }
        body[data-page="about"] #about-page div.content .animation-slide:nth-child(2) span {
          transform: translateY(0); }
      #about-page div.content .animation-slide:nth-child(2)[last] {
        transform: translateY(30px); }
        #about-page div.content .animation-slide:nth-child(2)[last] span {
          transition: all 1s cubic-bezier(0.65, 0.23, 0.25, 0.93) 4.13333s; }
    #about-page div.content .animation-slide:nth-child(3) {
      overflow: hidden; }
      #about-page div.content .animation-slide:nth-child(3) span {
        transition: all 1s cubic-bezier(0.65, 0.23, 0.25, 0.93) 3.3s;
        display: block;
        transform: translateY(-30px); }
        body[data-page="about"] #about-page div.content .animation-slide:nth-child(3) span {
          transform: translateY(0); }
      #about-page div.content .animation-slide:nth-child(3)[last] {
        transform: translateY(30px); }
        #about-page div.content .animation-slide:nth-child(3)[last] span {
          transition: all 1s cubic-bezier(0.65, 0.23, 0.25, 0.93) 4.3s; }
    #about-page div.content .animation-slide:nth-child(4) {
      overflow: hidden; }
      #about-page div.content .animation-slide:nth-child(4) span {
        transition: all 1s cubic-bezier(0.65, 0.23, 0.25, 0.93) 4.5s;
        display: block;
        transform: translateY(-30px); }
        body[data-page="about"] #about-page div.content .animation-slide:nth-child(4) span {
          transform: translateY(0); }
      #about-page div.content .animation-slide:nth-child(4)[last] {
        transform: translateY(30px); }
        #about-page div.content .animation-slide:nth-child(4)[last] span {
          transition: all 1s cubic-bezier(0.65, 0.23, 0.25, 0.93) 5.5s; }
    #about-page div.content .animation-slide:nth-child(5) {
      overflow: hidden; }
      #about-page div.content .animation-slide:nth-child(5) span {
        transition: all 1s cubic-bezier(0.65, 0.23, 0.25, 0.93) 4.55s;
        display: block;
        transform: translateY(-30px); }
        body[data-page="about"] #about-page div.content .animation-slide:nth-child(5) span {
          transform: translateY(0); }
      #about-page div.content .animation-slide:nth-child(5)[last] {
        transform: translateY(30px); }
        #about-page div.content .animation-slide:nth-child(5)[last] span {
          transition: all 1s cubic-bezier(0.65, 0.23, 0.25, 0.93) 5.55s; }
    #about-page div.content .animation-slide:nth-child(6) {
      overflow: hidden; }
      #about-page div.content .animation-slide:nth-child(6) span {
        transition: all 1s cubic-bezier(0.65, 0.23, 0.25, 0.93) 4.6s;
        display: block;
        transform: translateY(-30px); }
        body[data-page="about"] #about-page div.content .animation-slide:nth-child(6) span {
          transform: translateY(0); }
      #about-page div.content .animation-slide:nth-child(6)[last] {
        transform: translateY(30px); }
        #about-page div.content .animation-slide:nth-child(6)[last] span {
          transition: all 1s cubic-bezier(0.65, 0.23, 0.25, 0.93) 5.6s; }
    #about-page div.content .animation-slide:nth-child(7) {
      overflow: hidden; }
      #about-page div.content .animation-slide:nth-child(7) span {
        transition: all 1s cubic-bezier(0.65, 0.23, 0.25, 0.93) 4.65s;
        display: block;
        transform: translateY(-30px); }
        body[data-page="about"] #about-page div.content .animation-slide:nth-child(7) span {
          transform: translateY(0); }
      #about-page div.content .animation-slide:nth-child(7)[last] {
        transform: translateY(30px); }
        #about-page div.content .animation-slide:nth-child(7)[last] span {
          transition: all 1s cubic-bezier(0.65, 0.23, 0.25, 0.93) 5.65s; }
    #about-page div.content .animation-slide:nth-child(8) {
      overflow: hidden; }
      #about-page div.content .animation-slide:nth-child(8) span {
        transition: all 1s cubic-bezier(0.65, 0.23, 0.25, 0.93) 4.7s;
        display: block;
        transform: translateY(-30px); }
        body[data-page="about"] #about-page div.content .animation-slide:nth-child(8) span {
          transform: translateY(0); }
      #about-page div.content .animation-slide:nth-child(8)[last] {
        transform: translateY(30px); }
        #about-page div.content .animation-slide:nth-child(8)[last] span {
          transition: all 1s cubic-bezier(0.65, 0.23, 0.25, 0.93) 5.7s; }
    #about-page div.content .animation-slide:nth-child(9) {
      overflow: hidden; }
      #about-page div.content .animation-slide:nth-child(9) span {
        transition: all 1s cubic-bezier(0.65, 0.23, 0.25, 0.93) 4.75s;
        display: block;
        transform: translateY(-30px); }
        body[data-page="about"] #about-page div.content .animation-slide:nth-child(9) span {
          transform: translateY(0); }
      #about-page div.content .animation-slide:nth-child(9)[last] {
        transform: translateY(30px); }
        #about-page div.content .animation-slide:nth-child(9)[last] span {
          transition: all 1s cubic-bezier(0.65, 0.23, 0.25, 0.93) 5.75s; }
    #about-page div.content .animation-slide:nth-child(10) {
      overflow: hidden; }
      #about-page div.content .animation-slide:nth-child(10) span {
        transition: all 1s cubic-bezier(0.65, 0.23, 0.25, 0.93) 4.8s;
        display: block;
        transform: translateY(-30px); }
        body[data-page="about"] #about-page div.content .animation-slide:nth-child(10) span {
          transform: translateY(0); }
      #about-page div.content .animation-slide:nth-child(10)[last] {
        transform: translateY(30px); }
        #about-page div.content .animation-slide:nth-child(10)[last] span {
          transition: all 1s cubic-bezier(0.65, 0.23, 0.25, 0.93) 5.8s; }
    #about-page div.content .animation-slide:nth-child(11) {
      overflow: hidden; }
      #about-page div.content .animation-slide:nth-child(11) span {
        transition: all 1s cubic-bezier(0.65, 0.23, 0.25, 0.93) 4.85s;
        display: block;
        transform: translateY(-30px); }
        body[data-page="about"] #about-page div.content .animation-slide:nth-child(11) span {
          transform: translateY(0); }
      #about-page div.content .animation-slide:nth-child(11)[last] {
        transform: translateY(30px); }
        #about-page div.content .animation-slide:nth-child(11)[last] span {
          transition: all 1s cubic-bezier(0.65, 0.23, 0.25, 0.93) 5.85s; }
    #about-page div.content .animation-slide:nth-child(12) {
      overflow: hidden; }
      #about-page div.content .animation-slide:nth-child(12) span {
        transition: all 1s cubic-bezier(0.65, 0.23, 0.25, 0.93) 4.9s;
        display: block;
        transform: translateY(-30px); }
        body[data-page="about"] #about-page div.content .animation-slide:nth-child(12) span {
          transform: translateY(0); }
      #about-page div.content .animation-slide:nth-child(12)[last] {
        transform: translateY(30px); }
        #about-page div.content .animation-slide:nth-child(12)[last] span {
          transition: all 1s cubic-bezier(0.65, 0.23, 0.25, 0.93) 5.9s; }
    #about-page div.content .animation-slide:nth-child(13) {
      overflow: hidden; }
      #about-page div.content .animation-slide:nth-child(13) span {
        transition: all 1s cubic-bezier(0.65, 0.23, 0.25, 0.93) 4.95s;
        display: block;
        transform: translateY(-30px); }
        body[data-page="about"] #about-page div.content .animation-slide:nth-child(13) span {
          transform: translateY(0); }
      #about-page div.content .animation-slide:nth-child(13)[last] {
        transform: translateY(30px); }
        #about-page div.content .animation-slide:nth-child(13)[last] span {
          transition: all 1s cubic-bezier(0.65, 0.23, 0.25, 0.93) 5.95s; }
    #about-page div.content .animation-slide:nth-child(14) {
      overflow: hidden; }
      #about-page div.content .animation-slide:nth-child(14) span {
        transition: all 1s cubic-bezier(0.65, 0.23, 0.25, 0.93) 5s;
        display: block;
        transform: translateY(-30px); }
        body[data-page="about"] #about-page div.content .animation-slide:nth-child(14) span {
          transform: translateY(0); }
      #about-page div.content .animation-slide:nth-child(14)[last] {
        transform: translateY(30px); }
        #about-page div.content .animation-slide:nth-child(14)[last] span {
          transition: all 1s cubic-bezier(0.65, 0.23, 0.25, 0.93) 6s; }
    #about-page div.content .animation-slide:nth-child(15) {
      overflow: hidden; }
      #about-page div.content .animation-slide:nth-child(15) span {
        transition: all 1s cubic-bezier(0.65, 0.23, 0.25, 0.93) 5.05s;
        display: block;
        transform: translateY(-30px); }
        body[data-page="about"] #about-page div.content .animation-slide:nth-child(15) span {
          transform: translateY(0); }
      #about-page div.content .animation-slide:nth-child(15)[last] {
        transform: translateY(30px); }
        #about-page div.content .animation-slide:nth-child(15)[last] span {
          transition: all 1s cubic-bezier(0.65, 0.23, 0.25, 0.93) 6.05s; }
    #about-page div.content .animation-slide:nth-child(16) {
      overflow: hidden; }
      #about-page div.content .animation-slide:nth-child(16) span {
        transition: all 1s cubic-bezier(0.65, 0.23, 0.25, 0.93) 5.1s;
        display: block;
        transform: translateY(-30px); }
        body[data-page="about"] #about-page div.content .animation-slide:nth-child(16) span {
          transform: translateY(0); }
      #about-page div.content .animation-slide:nth-child(16)[last] {
        transform: translateY(30px); }
        #about-page div.content .animation-slide:nth-child(16)[last] span {
          transition: all 1s cubic-bezier(0.65, 0.23, 0.25, 0.93) 6.1s; }
    #about-page div.content .animation-slide:nth-child(17) {
      overflow: hidden; }
      #about-page div.content .animation-slide:nth-child(17) span {
        transition: all 1s cubic-bezier(0.65, 0.23, 0.25, 0.93) 5.15s;
        display: block;
        transform: translateY(-30px); }
        body[data-page="about"] #about-page div.content .animation-slide:nth-child(17) span {
          transform: translateY(0); }
      #about-page div.content .animation-slide:nth-child(17)[last] {
        transform: translateY(30px); }
        #about-page div.content .animation-slide:nth-child(17)[last] span {
          transition: all 1s cubic-bezier(0.65, 0.23, 0.25, 0.93) 6.15s; }
    #about-page div.content .animation-slide:nth-child(18) {
      overflow: hidden; }
      #about-page div.content .animation-slide:nth-child(18) span {
        transition: all 1s cubic-bezier(0.65, 0.23, 0.25, 0.93) 5.2s;
        display: block;
        transform: translateY(-30px); }
        body[data-page="about"] #about-page div.content .animation-slide:nth-child(18) span {
          transform: translateY(0); }
      #about-page div.content .animation-slide:nth-child(18)[last] {
        transform: translateY(30px); }
        #about-page div.content .animation-slide:nth-child(18)[last] span {
          transition: all 1s cubic-bezier(0.65, 0.23, 0.25, 0.93) 6.2s; }
    #about-page div.content .animation-slide:nth-child(19) {
      overflow: hidden; }
      #about-page div.content .animation-slide:nth-child(19) span {
        transition: all 1s cubic-bezier(0.65, 0.23, 0.25, 0.93) 5.25s;
        display: block;
        transform: translateY(-30px); }
        body[data-page="about"] #about-page div.content .animation-slide:nth-child(19) span {
          transform: translateY(0); }
      #about-page div.content .animation-slide:nth-child(19)[last] {
        transform: translateY(30px); }
        #about-page div.content .animation-slide:nth-child(19)[last] span {
          transition: all 1s cubic-bezier(0.65, 0.23, 0.25, 0.93) 6.25s; }
    #about-page div.content .animation-slide:nth-child(20) {
      overflow: hidden; }
      #about-page div.content .animation-slide:nth-child(20) span {
        transition: all 1s cubic-bezier(0.65, 0.23, 0.25, 0.93) 5.3s;
        display: block;
        transform: translateY(-30px); }
        body[data-page="about"] #about-page div.content .animation-slide:nth-child(20) span {
          transform: translateY(0); }
      #about-page div.content .animation-slide:nth-child(20)[last] {
        transform: translateY(30px); }
        #about-page div.content .animation-slide:nth-child(20)[last] span {
          transition: all 1s cubic-bezier(0.65, 0.23, 0.25, 0.93) 6.3s; }
    #about-page div.content .animation-slide:nth-child(21) {
      overflow: hidden; }
      #about-page div.content .animation-slide:nth-child(21) span {
        transition: all 1s cubic-bezier(0.65, 0.23, 0.25, 0.93) 5.35s;
        display: block;
        transform: translateY(-30px); }
        body[data-page="about"] #about-page div.content .animation-slide:nth-child(21) span {
          transform: translateY(0); }
      #about-page div.content .animation-slide:nth-child(21)[last] {
        transform: translateY(30px); }
        #about-page div.content .animation-slide:nth-child(21)[last] span {
          transition: all 1s cubic-bezier(0.65, 0.23, 0.25, 0.93) 6.35s; }
    #about-page div.content .animation-slide:nth-child(22) {
      overflow: hidden; }
      #about-page div.content .animation-slide:nth-child(22) span {
        transition: all 1s cubic-bezier(0.65, 0.23, 0.25, 0.93) 5.4s;
        display: block;
        transform: translateY(-30px); }
        body[data-page="about"] #about-page div.content .animation-slide:nth-child(22) span {
          transform: translateY(0); }
      #about-page div.content .animation-slide:nth-child(22)[last] {
        transform: translateY(30px); }
        #about-page div.content .animation-slide:nth-child(22)[last] span {
          transition: all 1s cubic-bezier(0.65, 0.23, 0.25, 0.93) 6.4s; }

body[data-page="about"] .logo {
  animation-fill-mode: none;
  color: white;
  width: auto;
  mix-blend-mode: exclusion; }
  body[data-page="about"] .logo span:first-child, body[data-page="about"] .logo span:last-child {
    border-color: white;
    animation-fill-mode: none;
    color: white;
    mix-blend-mode: exclusion; }

body[data-page="about"] .header ul a {
  color: black;
  text-shadow: none; }
  body[data-page="about"] .header ul a li div span:last-child {
    text-shadow: none; }

@keyframes preload {
  from {
    width: 0; }
  to {
    width: 98px; } }

@keyframes underline {
  from {
    border-color: #14aeff;
    color: #14aeff; }
  to {
    border-color: white;
    color: white; } }

@keyframes surname {
  from {
    color: #14aeff; }
  to {
    color: white; } }

@keyframes slideDown {
  from {
    transform: translateY(-40px); }
  to {
    transform: translateY(0); } }

@keyframes slideOpacity {
  from {
    opacity: 0; }
  99% {
    opacity: 0; }
  to {
    opacity: 1; } }

@keyframes fadeLeft {
  from {
    opacity: 0;
    transform: translateX(20px); }
  50% {
    opacity: 0.8; }
  to {
    opacity: 1;
    transform: translateX(0px); } }

@keyframes fadeDown {
  from {
    opacity: 0;
    transform: translateY(20px); }
  to {
    opacity: 1;
    transform: translateX(0px); } }

.product-page {
  z-index: 3;
  overflow: scroll;
  width: 100%; }
  .product-page > div:first-child {
    padding: 80px 10vw !important; }
  .product-page > div *:not(.row) {
    padding: 30px 0; }
  .product-page .thin-block {
    padding: 0px 10vw;
    width: calc(100% - 20vw) !important;
    position: relative;
    left: 50%;
    transform: translateX(-50%); }
  .product-page span.home {
    position: absolute;
    width: 100px;
    height: 15px;
    background: #f5f5f4;
    padding: 0;
    margin: 30px 0;
    padding: 15px 10px;
    text-align: center;
    color: #797878;
    font-family: "San Francisco";
    display: block;
    overflow: hidden;
    cursor: pointer;
    top: -40px;
    right: 0; }
    .product-page span.home:hover:after {
      transform: translateY(0%); }
    .product-page span.home:hover span {
      color: white; }
    .product-page span.home span {
      color: #797878;
      z-index: 999;
      position: absolute;
      left: 0;
      top: 0;
      padding: 0;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%); }
    .product-page span.home:after {
      content: "";
      display: block;
      position: absolute;
      width: inherit;
      height: inherit;
      background: #2a2a27;
      padding: inherit;
      left: 0;
      top: 0;
      transform: translateY(100%);
      transition: transform 0.1s ease-in-out; }
  .product-page h1 {
    font-size: 6vw;
    font-family: 'Raleway', sans-serif;
    font-weight: 900;
    text-align: right;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-image: url(https://www.toptal.com/designers/subtlepatterns/patterns/dark-grey-terrazzo.png); }
  .product-page h4 {
    font-size: 2vmin;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    letter-spacing: 0.5px;
    text-align: right;
    padding: 0px !important;
    padding-right: 20px !important;
    font-family: "San Francisco";
    color: #4973AC; }
    .product-page h4 a {
      text-decoration: none;
      color: #afafaf;
      transition: color 0.5s ease-in-out; }
      .product-page h4 a:hover {
        color: #4973AC; }
  .product-page span.image-text {
    font-size: 9pt;
    font-weight: 200;
    word-spacing: 4px;
    letter-spacing: 0.4px;
    color: #888888;
    line-height: 1.5;
    font-family: "San Francisco";
    padding: 0;
    text-align: center;
    width: 100%;
    display: block;
    position: relative;
    bottom: 10px; }
  .product-page p {
    font-family: 'Raleway', sans-serif;
    font-size: 16pt;
    font-weight: 200;
    word-spacing: 6px;
    letter-spacing: 0.2px;
    color: #272727;
    line-height: 1.5;
    font-family: "San Francisco"; }
    .product-page p.quote-block {
      line-height: 1.3;
      padding: 8vw 4vw;
      font-size: 20pt;
      font-weight: 100;
      color: #676767; }
  .product-page b {
    font-weight: 400; }
  .product-page img.full-width {
    width: 100%; }
  .product-page .pic-center {
    left: 50%;
    position: relative;
    transform: translateX(-50%); }
  .product-page .project-controls {
    height: 60px;
    padding: 0;
    width: 100%; }
    .product-page .project-controls > div {
      height: inherit;
      display: inline-block;
      width: 50%;
      padding: 0;
      background: #fbfbfb;
      border-style: solid;
      border-color: #f9f9f9;
      transition: background 0.5s ease-out;
      position: relative;
      cursor: pointer; }
      .product-page .project-controls > div > span {
        padding: 16px;
        display: block;
        font-size: 20pt;
        font-family: "San Francisco";
        color: #b5b5b5;
        padding-left: 40pt;
        padding-right: 40pt;
        font-weight: 200; }
        .product-page .project-controls > div > span > img {
          display: inline;
          padding: 0;
          padding-right: 20px;
          opacity: 0;
          text-align: left;
          float: left;
          display: inline-block;
          vertical-align: middle;
          padding: 5px;
          position: absolute;
          transition: all 0.5s ease-out; }
      .product-page .project-controls > div:hover {
        background: #4973AC; }
        .product-page .project-controls > div:hover > span {
          color: white; }
        .product-page .project-controls > div:hover > span > img {
          opacity: 0.5; }
        .product-page .project-controls > div:hover.project-left > span > img {
          transform: translateX(-100px); }
        .product-page .project-controls > div:hover.project-right > span > img {
          transform: translateX(100px); }
  .product-page footer {
    height: 100px;
    background: #f5f5f4; }
    .product-page footer ul {
      display: block;
      padding: 42px;
      text-align: center; }
      .product-page footer ul li {
        display: inline;
        margin: 0 30px;
        font-size: 10pt;
        font-family: "San Francisco";
        font-weight: 100; }
        .product-page footer ul li a {
          color: #a5a5a5;
          text-decoration: none; }
          .product-page footer ul li a:hover {
            color: #7f7f7f; }

#omodernt-page {
  position: fixed;
  height: 100%;
  width: 100%;
  background: white;
  transform: translateY(100%);
  transition: transform 0.5s ease-in-out; }
  body[data-page="omodernt"] #omodernt-page {
    transition: transform 0.5s ease-in-out;
    transform: translateY(0); }
  body[data-page="projects"] #omodernt-page {
    transition: transform 0.3s ease-out;
    transform: translateY(-100%); }
  body[data-page="projects-start"] #omodernt-page {
    transition: none;
    transform: translateY(100%); }
  #omodernt-page .fade:nth-child(1) {
    opacity: 0;
    transition: opacity 1s ease-in-out 0.75s; }
    body[data-page="omodernt"] #omodernt-page .fade:nth-child(1) {
      opacity: 1; }
  #omodernt-page .fade:nth-child(2) {
    opacity: 0;
    transition: opacity 1s ease-in-out 1.5s; }
    body[data-page="omodernt"] #omodernt-page .fade:nth-child(2) {
      opacity: 1; }
  #omodernt-page .fade:nth-child(3) {
    opacity: 0;
    transition: opacity 1s ease-in-out 2.25s; }
    body[data-page="omodernt"] #omodernt-page .fade:nth-child(3) {
      opacity: 1; }
  #omodernt-page .fade:nth-child(4) {
    opacity: 0;
    transition: opacity 1s ease-in-out 3s; }
    body[data-page="omodernt"] #omodernt-page .fade:nth-child(4) {
      opacity: 1; }
  #omodernt-page .fade:nth-child(5) {
    opacity: 0;
    transition: opacity 1s ease-in-out 3.75s; }
    body[data-page="omodernt"] #omodernt-page .fade:nth-child(5) {
      opacity: 1; }
  #omodernt-page .fade:nth-child(6) {
    opacity: 0;
    transition: opacity 1s ease-in-out 4.5s; }
    body[data-page="omodernt"] #omodernt-page .fade:nth-child(6) {
      opacity: 1; }
  #omodernt-page .fade:nth-child(7) {
    opacity: 0;
    transition: opacity 1s ease-in-out 5.25s; }
    body[data-page="omodernt"] #omodernt-page .fade:nth-child(7) {
      opacity: 1; }
  #omodernt-page .fade:nth-child(8) {
    opacity: 0;
    transition: opacity 1s ease-in-out 6s; }
    body[data-page="omodernt"] #omodernt-page .fade:nth-child(8) {
      opacity: 1; }
  #omodernt-page .fade:nth-child(9) {
    opacity: 0;
    transition: opacity 1s ease-in-out 6.75s; }
    body[data-page="omodernt"] #omodernt-page .fade:nth-child(9) {
      opacity: 1; }
  #omodernt-page .fade:nth-child(10) {
    opacity: 0;
    transition: opacity 1s ease-in-out 7.5s; }
    body[data-page="omodernt"] #omodernt-page .fade:nth-child(10) {
      opacity: 1; }

@keyframes preload {
  from {
    width: 0; }
  to {
    width: 98px; } }

@keyframes underline {
  from {
    border-color: #14aeff;
    color: #14aeff; }
  to {
    border-color: white;
    color: white; } }

@keyframes surname {
  from {
    color: #14aeff; }
  to {
    color: white; } }

@keyframes slideDown {
  from {
    transform: translateY(-40px); }
  to {
    transform: translateY(0); } }

@keyframes slideOpacity {
  from {
    opacity: 0; }
  99% {
    opacity: 0; }
  to {
    opacity: 1; } }

@keyframes fadeLeft {
  from {
    opacity: 0;
    transform: translateX(20px); }
  50% {
    opacity: 0.8; }
  to {
    opacity: 1;
    transform: translateX(0px); } }

@keyframes fadeDown {
  from {
    opacity: 0;
    transform: translateY(20px); }
  to {
    opacity: 1;
    transform: translateX(0px); } }

.product-page {
  z-index: 3;
  overflow: scroll;
  width: 100%; }
  .product-page > div:first-child {
    padding: 80px 10vw !important; }
  .product-page > div *:not(.row) {
    padding: 30px 0; }
  .product-page .thin-block {
    padding: 0px 10vw;
    width: calc(100% - 20vw) !important;
    position: relative;
    left: 50%;
    transform: translateX(-50%); }
  .product-page span.home {
    position: absolute;
    width: 100px;
    height: 15px;
    background: #f5f5f4;
    padding: 0;
    margin: 30px 0;
    padding: 15px 10px;
    text-align: center;
    color: #797878;
    font-family: "San Francisco";
    display: block;
    overflow: hidden;
    cursor: pointer;
    top: -40px;
    right: 0; }
    .product-page span.home:hover:after {
      transform: translateY(0%); }
    .product-page span.home:hover span {
      color: white; }
    .product-page span.home span {
      color: #797878;
      z-index: 999;
      position: absolute;
      left: 0;
      top: 0;
      padding: 0;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%); }
    .product-page span.home:after {
      content: "";
      display: block;
      position: absolute;
      width: inherit;
      height: inherit;
      background: #2a2a27;
      padding: inherit;
      left: 0;
      top: 0;
      transform: translateY(100%);
      transition: transform 0.1s ease-in-out; }
  .product-page h1 {
    font-size: 6vw;
    font-family: 'Raleway', sans-serif;
    font-weight: 900;
    text-align: right;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-image: url(https://www.toptal.com/designers/subtlepatterns/patterns/dark-grey-terrazzo.png); }
  .product-page h4 {
    font-size: 2vmin;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    letter-spacing: 0.5px;
    text-align: right;
    padding: 0px !important;
    padding-right: 20px !important;
    font-family: "San Francisco";
    color: #4973AC; }
    .product-page h4 a {
      text-decoration: none;
      color: #afafaf;
      transition: color 0.5s ease-in-out; }
      .product-page h4 a:hover {
        color: #4973AC; }
  .product-page span.image-text {
    font-size: 9pt;
    font-weight: 200;
    word-spacing: 4px;
    letter-spacing: 0.4px;
    color: #888888;
    line-height: 1.5;
    font-family: "San Francisco";
    padding: 0;
    text-align: center;
    width: 100%;
    display: block;
    position: relative;
    bottom: 10px; }
  .product-page p {
    font-family: 'Raleway', sans-serif;
    font-size: 16pt;
    font-weight: 200;
    word-spacing: 6px;
    letter-spacing: 0.2px;
    color: #272727;
    line-height: 1.5;
    font-family: "San Francisco"; }
    .product-page p.quote-block {
      line-height: 1.3;
      padding: 8vw 4vw;
      font-size: 20pt;
      font-weight: 100;
      color: #676767; }
  .product-page b {
    font-weight: 400; }
  .product-page img.full-width {
    width: 100%; }
  .product-page .pic-center {
    left: 50%;
    position: relative;
    transform: translateX(-50%); }
  .product-page .project-controls {
    height: 60px;
    padding: 0;
    width: 100%; }
    .product-page .project-controls > div {
      height: inherit;
      display: inline-block;
      width: 50%;
      padding: 0;
      background: #fbfbfb;
      border-style: solid;
      border-color: #f9f9f9;
      transition: background 0.5s ease-out;
      position: relative;
      cursor: pointer; }
      .product-page .project-controls > div > span {
        padding: 16px;
        display: block;
        font-size: 20pt;
        font-family: "San Francisco";
        color: #b5b5b5;
        padding-left: 40pt;
        padding-right: 40pt;
        font-weight: 200; }
        .product-page .project-controls > div > span > img {
          display: inline;
          padding: 0;
          padding-right: 20px;
          opacity: 0;
          text-align: left;
          float: left;
          display: inline-block;
          vertical-align: middle;
          padding: 5px;
          position: absolute;
          transition: all 0.5s ease-out; }
      .product-page .project-controls > div:hover {
        background: #4973AC; }
        .product-page .project-controls > div:hover > span {
          color: white; }
        .product-page .project-controls > div:hover > span > img {
          opacity: 0.5; }
        .product-page .project-controls > div:hover.project-left > span > img {
          transform: translateX(-100px); }
        .product-page .project-controls > div:hover.project-right > span > img {
          transform: translateX(100px); }
  .product-page footer {
    height: 100px;
    background: #f5f5f4; }
    .product-page footer ul {
      display: block;
      padding: 42px;
      text-align: center; }
      .product-page footer ul li {
        display: inline;
        margin: 0 30px;
        font-size: 10pt;
        font-family: "San Francisco";
        font-weight: 100; }
        .product-page footer ul li a {
          color: #a5a5a5;
          text-decoration: none; }
          .product-page footer ul li a:hover {
            color: #7f7f7f; }

#dinosaur-page {
  position: fixed;
  height: 100%;
  width: 100%;
  background: white;
  transform: translateY(100%);
  transition: transform 0.5s ease-in-out; }
  body[data-page="dinosaur"] #dinosaur-page {
    transition: transform 0.5s ease-in-out;
    transform: translateY(0); }
  body[data-page="projects"] #dinosaur-page {
    transition: transform 0.3s ease-out;
    transform: translateY(-100%); }
  body[data-page="projects-start"] #dinosaur-page {
    transition: none;
    transform: translateY(100%); }
  #dinosaur-page .fade:nth-child(1) {
    opacity: 0;
    transition: opacity 1s ease-in-out 0.75s; }
    body[data-page="dinosaur"] #dinosaur-page .fade:nth-child(1) {
      opacity: 1; }
  #dinosaur-page .fade:nth-child(2) {
    opacity: 0;
    transition: opacity 1s ease-in-out 1.5s; }
    body[data-page="dinosaur"] #dinosaur-page .fade:nth-child(2) {
      opacity: 1; }
  #dinosaur-page .fade:nth-child(3) {
    opacity: 0;
    transition: opacity 1s ease-in-out 2.25s; }
    body[data-page="dinosaur"] #dinosaur-page .fade:nth-child(3) {
      opacity: 1; }
  #dinosaur-page .fade:nth-child(4) {
    opacity: 0;
    transition: opacity 1s ease-in-out 3s; }
    body[data-page="dinosaur"] #dinosaur-page .fade:nth-child(4) {
      opacity: 1; }
  #dinosaur-page .fade:nth-child(5) {
    opacity: 0;
    transition: opacity 1s ease-in-out 3.75s; }
    body[data-page="dinosaur"] #dinosaur-page .fade:nth-child(5) {
      opacity: 1; }
  #dinosaur-page .fade:nth-child(6) {
    opacity: 0;
    transition: opacity 1s ease-in-out 4.5s; }
    body[data-page="dinosaur"] #dinosaur-page .fade:nth-child(6) {
      opacity: 1; }
  #dinosaur-page .fade:nth-child(7) {
    opacity: 0;
    transition: opacity 1s ease-in-out 5.25s; }
    body[data-page="dinosaur"] #dinosaur-page .fade:nth-child(7) {
      opacity: 1; }
  #dinosaur-page .fade:nth-child(8) {
    opacity: 0;
    transition: opacity 1s ease-in-out 6s; }
    body[data-page="dinosaur"] #dinosaur-page .fade:nth-child(8) {
      opacity: 1; }
  #dinosaur-page .fade:nth-child(9) {
    opacity: 0;
    transition: opacity 1s ease-in-out 6.75s; }
    body[data-page="dinosaur"] #dinosaur-page .fade:nth-child(9) {
      opacity: 1; }
  #dinosaur-page .fade:nth-child(10) {
    opacity: 0;
    transition: opacity 1s ease-in-out 7.5s; }
    body[data-page="dinosaur"] #dinosaur-page .fade:nth-child(10) {
      opacity: 1; }

@keyframes preload {
  from {
    width: 0; }
  to {
    width: 98px; } }

@keyframes underline {
  from {
    border-color: #14aeff;
    color: #14aeff; }
  to {
    border-color: white;
    color: white; } }

@keyframes surname {
  from {
    color: #14aeff; }
  to {
    color: white; } }

@keyframes slideDown {
  from {
    transform: translateY(-40px); }
  to {
    transform: translateY(0); } }

@keyframes slideOpacity {
  from {
    opacity: 0; }
  99% {
    opacity: 0; }
  to {
    opacity: 1; } }

@keyframes fadeLeft {
  from {
    opacity: 0;
    transform: translateX(20px); }
  50% {
    opacity: 0.8; }
  to {
    opacity: 1;
    transform: translateX(0px); } }

@keyframes fadeDown {
  from {
    opacity: 0;
    transform: translateY(20px); }
  to {
    opacity: 1;
    transform: translateX(0px); } }

.product-page {
  z-index: 3;
  overflow: scroll;
  width: 100%; }
  .product-page > div:first-child {
    padding: 80px 10vw !important; }
  .product-page > div *:not(.row) {
    padding: 30px 0; }
  .product-page .thin-block {
    padding: 0px 10vw;
    width: calc(100% - 20vw) !important;
    position: relative;
    left: 50%;
    transform: translateX(-50%); }
  .product-page span.home {
    position: absolute;
    width: 100px;
    height: 15px;
    background: #f5f5f4;
    padding: 0;
    margin: 30px 0;
    padding: 15px 10px;
    text-align: center;
    color: #797878;
    font-family: "San Francisco";
    display: block;
    overflow: hidden;
    cursor: pointer;
    top: -40px;
    right: 0; }
    .product-page span.home:hover:after {
      transform: translateY(0%); }
    .product-page span.home:hover span {
      color: white; }
    .product-page span.home span {
      color: #797878;
      z-index: 999;
      position: absolute;
      left: 0;
      top: 0;
      padding: 0;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%); }
    .product-page span.home:after {
      content: "";
      display: block;
      position: absolute;
      width: inherit;
      height: inherit;
      background: #2a2a27;
      padding: inherit;
      left: 0;
      top: 0;
      transform: translateY(100%);
      transition: transform 0.1s ease-in-out; }
  .product-page h1 {
    font-size: 6vw;
    font-family: 'Raleway', sans-serif;
    font-weight: 900;
    text-align: right;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-image: url(https://www.toptal.com/designers/subtlepatterns/patterns/dark-grey-terrazzo.png); }
  .product-page h4 {
    font-size: 2vmin;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    letter-spacing: 0.5px;
    text-align: right;
    padding: 0px !important;
    padding-right: 20px !important;
    font-family: "San Francisco";
    color: #4973AC; }
    .product-page h4 a {
      text-decoration: none;
      color: #afafaf;
      transition: color 0.5s ease-in-out; }
      .product-page h4 a:hover {
        color: #4973AC; }
  .product-page span.image-text {
    font-size: 9pt;
    font-weight: 200;
    word-spacing: 4px;
    letter-spacing: 0.4px;
    color: #888888;
    line-height: 1.5;
    font-family: "San Francisco";
    padding: 0;
    text-align: center;
    width: 100%;
    display: block;
    position: relative;
    bottom: 10px; }
  .product-page p {
    font-family: 'Raleway', sans-serif;
    font-size: 16pt;
    font-weight: 200;
    word-spacing: 6px;
    letter-spacing: 0.2px;
    color: #272727;
    line-height: 1.5;
    font-family: "San Francisco"; }
    .product-page p.quote-block {
      line-height: 1.3;
      padding: 8vw 4vw;
      font-size: 20pt;
      font-weight: 100;
      color: #676767; }
  .product-page b {
    font-weight: 400; }
  .product-page img.full-width {
    width: 100%; }
  .product-page .pic-center {
    left: 50%;
    position: relative;
    transform: translateX(-50%); }
  .product-page .project-controls {
    height: 60px;
    padding: 0;
    width: 100%; }
    .product-page .project-controls > div {
      height: inherit;
      display: inline-block;
      width: 50%;
      padding: 0;
      background: #fbfbfb;
      border-style: solid;
      border-color: #f9f9f9;
      transition: background 0.5s ease-out;
      position: relative;
      cursor: pointer; }
      .product-page .project-controls > div > span {
        padding: 16px;
        display: block;
        font-size: 20pt;
        font-family: "San Francisco";
        color: #b5b5b5;
        padding-left: 40pt;
        padding-right: 40pt;
        font-weight: 200; }
        .product-page .project-controls > div > span > img {
          display: inline;
          padding: 0;
          padding-right: 20px;
          opacity: 0;
          text-align: left;
          float: left;
          display: inline-block;
          vertical-align: middle;
          padding: 5px;
          position: absolute;
          transition: all 0.5s ease-out; }
      .product-page .project-controls > div:hover {
        background: #4973AC; }
        .product-page .project-controls > div:hover > span {
          color: white; }
        .product-page .project-controls > div:hover > span > img {
          opacity: 0.5; }
        .product-page .project-controls > div:hover.project-left > span > img {
          transform: translateX(-100px); }
        .product-page .project-controls > div:hover.project-right > span > img {
          transform: translateX(100px); }
  .product-page footer {
    height: 100px;
    background: #f5f5f4; }
    .product-page footer ul {
      display: block;
      padding: 42px;
      text-align: center; }
      .product-page footer ul li {
        display: inline;
        margin: 0 30px;
        font-size: 10pt;
        font-family: "San Francisco";
        font-weight: 100; }
        .product-page footer ul li a {
          color: #a5a5a5;
          text-decoration: none; }
          .product-page footer ul li a:hover {
            color: #7f7f7f; }

#binarycap-page {
  position: fixed;
  height: 100%;
  width: 100%;
  background: white;
  transform: translateY(100%);
  transition: transform 0.5s ease-in-out; }
  body[data-page="binarycap"] #binarycap-page {
    transition: transform 0.5s ease-in-out;
    transform: translateY(0); }
  body[data-page="projects"] #binarycap-page {
    transition: transform 0.3s ease-out;
    transform: translateY(-100%); }
  body[data-page="projects-start"] #binarycap-page {
    transition: none;
    transform: translateY(100%); }
  #binarycap-page .fade:nth-child(1) {
    opacity: 0;
    transition: opacity 1s ease-in-out 0.75s; }
    body[data-page="binarycap"] #binarycap-page .fade:nth-child(1) {
      opacity: 1; }
  #binarycap-page .fade:nth-child(2) {
    opacity: 0;
    transition: opacity 1s ease-in-out 1.5s; }
    body[data-page="binarycap"] #binarycap-page .fade:nth-child(2) {
      opacity: 1; }
  #binarycap-page .fade:nth-child(3) {
    opacity: 0;
    transition: opacity 1s ease-in-out 2.25s; }
    body[data-page="binarycap"] #binarycap-page .fade:nth-child(3) {
      opacity: 1; }
  #binarycap-page .fade:nth-child(4) {
    opacity: 0;
    transition: opacity 1s ease-in-out 3s; }
    body[data-page="binarycap"] #binarycap-page .fade:nth-child(4) {
      opacity: 1; }
  #binarycap-page .fade:nth-child(5) {
    opacity: 0;
    transition: opacity 1s ease-in-out 3.75s; }
    body[data-page="binarycap"] #binarycap-page .fade:nth-child(5) {
      opacity: 1; }
  #binarycap-page .fade:nth-child(6) {
    opacity: 0;
    transition: opacity 1s ease-in-out 4.5s; }
    body[data-page="binarycap"] #binarycap-page .fade:nth-child(6) {
      opacity: 1; }
  #binarycap-page .fade:nth-child(7) {
    opacity: 0;
    transition: opacity 1s ease-in-out 5.25s; }
    body[data-page="binarycap"] #binarycap-page .fade:nth-child(7) {
      opacity: 1; }
  #binarycap-page .fade:nth-child(8) {
    opacity: 0;
    transition: opacity 1s ease-in-out 6s; }
    body[data-page="binarycap"] #binarycap-page .fade:nth-child(8) {
      opacity: 1; }
  #binarycap-page .fade:nth-child(9) {
    opacity: 0;
    transition: opacity 1s ease-in-out 6.75s; }
    body[data-page="binarycap"] #binarycap-page .fade:nth-child(9) {
      opacity: 1; }
  #binarycap-page .fade:nth-child(10) {
    opacity: 0;
    transition: opacity 1s ease-in-out 7.5s; }
    body[data-page="binarycap"] #binarycap-page .fade:nth-child(10) {
      opacity: 1; }

#player {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.3s linear; }
  body[data-loaded-animation="true"][data-controls-active="true"] #player {
    opacity: 1;
    transition: opacity 0.3s linear 0.1s; }
  #player.image-active svg#loader, #player.image-active img#pause, #player.image-active img#read {
    display: none; }
  #player.image-active img#link {
    left: 50%;
    transform: translateX(0); }
  #player svg#loader {
    transform: rotate(-90deg) scaleY(-1);
    position: fixed;
    left: calc(50% - 40px);
    top: calc(50% - 40px);
    opacity: 0;
    transition: opacity 0.6s ease-in-out 0.3s; }
  #player img#pause {
    position: fixed;
    left: calc(50% - 15px);
    top: calc(50% - 15px);
    opacity: 0;
    transition: opacity 0.6s ease-in-out 0.3s;
    cursor: pointer; }
  #player img#link {
    transform: translateX(-5px);
    position: fixed;
    left: calc(50% + 60px);
    top: calc(50% - 15px);
    opacity: 0;
    transition: all 0.6s ease-in-out 0.3s;
    cursor: pointer; }
  #player img#read {
    transform: translateX(5px);
    position: fixed;
    left: calc(50% - 90px);
    top: calc(50% - 15px);
    opacity: 0;
    transition: all 0.6s ease-in-out 0.3s;
    cursor: pointer; }
  #player.active svg#loader {
    opacity: 1; }
  #player.active img#pause {
    transition: opacity 0.9s ease-in-out 0.5s;
    opacity: 1; }
  #player.active img#link, #player.active img#read {
    transform: translateX(0px);
    transition: all 0.9s ease-in-out 0.8s;
    opacity: 1; }

html, body {
  margin: 0;
  height: 100%;
  transition: none; }

#app {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: -1; }

#content {
  opacity: 0;
  transition: opacity 1s ease-in-out; }
  body.loaded #content {
    opacity: 1; }

@keyframes preload {
  from {
    width: 0; }
  to {
    width: 98px; } }

.logo {
  z-index: 2;
  position: fixed;
  font-family: 'Raleway', sans-serif;
  font-weight: 900;
  color: white;
  margin: 30px;
  display: block;
  float: left;
  overflow: hidden;
  letter-spacing: 0.3px;
  width: 0px; }
  body.loaded .logo {
    animation: preload 0.8s 0.1s ease-in-out;
    animation-fill-mode: both; }
  .logo span {
    display: block;
    line-height: 1.2; }
    .logo span:first-child {
      border-bottom: 3px solid white;
      border-color: white; }
      body.loaded .logo span:first-child {
        animation: underline 1s 0.1s ease-in-out;
        animation-fill-mode: both; }
    .logo span:last-child {
      line-height: 1.4; }
      body.loaded .logo span:last-child {
        animation: surname 1s 0.1s ease-in-out;
        animation-fill-mode: both; }

.header {
  z-index: 2;
  position: fixed;
  font-family: 'Raleway', sans-serif;
  font-weight: 900;
  width: 100%; }
  .header ul {
    margin: 0;
    padding: 30px;
    float: right;
    width: 30%;
    list-style: none;
    display: flex;
    justify-content: space-around;
    flex-direction: row-reverse;
    line-height: 2.6;
    height: 40px; }
    body[data-mobile="true"] .header ul {
      width: 60%; }
    .header ul a {
      color: white;
      overflow: hidden; }
      .header ul a li {
        transition: transform 0.3s ease-in-out;
        display: block; }
        .header ul a li div {
          display: inline-block;
          transform: translateY(-40px); }
          .header ul a li div span {
            display: block; }
          .header ul a li div span:last-child {
            transition: all 0.3s linear; }
      .header ul a[data-social]:hover ~ a li {
        transform: translateY(-40px); }
        .header ul a[data-social]:hover ~ a li div span:last-child {
          display: none; }
      .header ul a:hover li {
        transform: translateY(-40px); }
      .header ul a li div span:last-child {
        color: #14aeff;
        text-shadow: 1px 1px 0px black; }
    body.loaded .header ul a:nth-child(4) li div {
      animation: slideDown 1s calc(0.5s + 0.25s) ease-in-out;
      animation-fill-mode: both; }
      body.loaded .header ul a:nth-child(4) li div span:last-child {
        animation: slideOpacity 1s calc(0.5s + 0.25s) ease-in-out;
        animation-fill-mode: both; }
    body.loaded .header ul a:nth-child(3) li div {
      animation: slideDown 1s calc(0.5s + 0.5s) ease-in-out;
      animation-fill-mode: both; }
      body.loaded .header ul a:nth-child(3) li div span:last-child {
        animation: slideOpacity 1s calc(0.5s + 0.5s) ease-in-out;
        animation-fill-mode: both; }
    body.loaded .header ul a:nth-child(2) li div {
      animation: slideDown 1s calc(0.5s + 0.75s) ease-in-out;
      animation-fill-mode: both; }
      body.loaded .header ul a:nth-child(2) li div span:last-child {
        animation: slideOpacity 1s calc(0.5s + 0.75s) ease-in-out;
        animation-fill-mode: both; }
    body.loaded .header ul a:nth-child(1) li div {
      animation: slideDown 1s calc(0.5s + 1s) ease-in-out;
      animation-fill-mode: both; }
      body.loaded .header ul a:nth-child(1) li div span:last-child {
        animation: slideOpacity 1s calc(0.5s + 1s) ease-in-out;
        animation-fill-mode: both; }

.slider {
  height: 3px;
  width: calc(80% - 400px);
  position: fixed;
  background: #1b1b1b;
  bottom: 8vh;
  left: 10%;
  border-radius: 40px;
  box-shadow: 110px 0 80px -80px #0fb3ff inset, -110px 0 80px -80px #0fb3ff inset;
  display: flex;
  padding: 0 200px;
  justify-content: flex-start;
  overflow: hidden;
  outline: 1px solid transparent; }
  .slider .slide-motion {
    background: #14aeff;
    width: 30px;
    height: 3px;
    border-radius: 3px;
    outline: 1px solid transparent;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.05);
    overflow: hidden; }
  .slider .animation-wrapper {
    width: 20px;
    height: 20px;
    opacity: 0; }
    body.loaded .slider .animation-wrapper:nth-child(1) {
      animation: fadeLeft 2s cubic-bezier(0, 0.54, 0.14, 0.76) 0.81667s;
      animation-fill-mode: forwards; }
    body.loaded .slider .animation-wrapper:nth-child(2) {
      animation: fadeLeft 2s cubic-bezier(0, 0.54, 0.14, 0.76) 0.86667s;
      animation-fill-mode: forwards; }
    body.loaded .slider .animation-wrapper:nth-child(3) {
      animation: fadeLeft 2s cubic-bezier(0, 0.54, 0.14, 0.76) 0.95s;
      animation-fill-mode: forwards; }
    body.loaded .slider .animation-wrapper:nth-child(4) {
      animation: fadeLeft 2s cubic-bezier(0, 0.54, 0.14, 0.76) 1.06667s;
      animation-fill-mode: forwards; }
    body.loaded .slider .animation-wrapper:nth-child(5) {
      animation: fadeLeft 2s cubic-bezier(0, 0.54, 0.14, 0.76) 1.21667s;
      animation-fill-mode: forwards; }
    body.loaded .slider .animation-wrapper:nth-child(6) {
      animation: fadeLeft 2s cubic-bezier(0, 0.54, 0.14, 0.76) 1.4s;
      animation-fill-mode: forwards; }
    body.loaded .slider .animation-wrapper:nth-child(7) {
      animation: fadeLeft 2s cubic-bezier(0, 0.54, 0.14, 0.76) 1.61667s;
      animation-fill-mode: forwards; }
    body.loaded .slider .animation-wrapper:nth-child(8) {
      animation: fadeLeft 2s cubic-bezier(0, 0.54, 0.14, 0.76) 1.86667s;
      animation-fill-mode: forwards; }
    .slider .animation-wrapper .slide {
      transform: scale(0.9);
      width: 20px;
      height: 20px;
      background-color: #14aeff;
      position: relative;
      border-radius: 100%;
      top: -8.5px;
      box-shadow: 1px 1px 10px #333;
      display: block;
      transition: all .3s ease-in-out; }
      .slider .animation-wrapper .slide:after {
        content: '';
        width: 14px;
        height: 14px;
        position: absolute;
        background: #333;
        border-radius: 100%;
        left: 3px;
        top: 3px;
        box-shadow: 0px 0px 1px #eee inset; }
      .slider .animation-wrapper .slide:not(.active) {
        transform: scale(0.5); }
        .slider .animation-wrapper .slide:not(.active):hover {
          cursor: pointer;
          animation-play-state: paused !important;
          transform: scale(0.9);
          background-color: #61c8ff;
          box-shadow: 0px 0px 1px #eee inset, 0px 0px 15px #14aeff; }

::selection {
  background: #6400cb;
  /* WebKit/Blink Browsers */
  opacity: 0.7; }

::-moz-selection {
  background: #6400cb;
  /* Gecko Browsers */
  opacity: 0.7; }

/* Using SCSS variables to store breakpoints */
.orientation-check {
  position: absolute;
  background: black;
  width: 100%;
  height: 100%;
  opacity: 0;
  user-select: none;
  pointer-events: none;
  z-index: 999;
  color: white;
  transition: opacity 0.4s ease-in-out; }
  .orientation-check__centered {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Raleway', sans-serif;
    text-align: center; }
    .orientation-check__centered span {
      color: #999;
      line-height: 1.3;
      letter-spacing: 0.5px;
      font-size: 2.8vmin; }
    .orientation-check__centered img {
      display: block;
      width: 40vw;
      margin: 0 auto; }
  body[data-mobile="true"] .orientation-check {
    opacity: 1;
    user-select: all;
    pointer-events: all; }
  body[data-in-landscape="true"] .orientation-check {
    opacity: 0;
    user-select: none;
    pointer-events: none; }