@CHARSET "ISO-8859-1";

/* Reset CSS
 * --------------------------------------- */

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {
    padding: 0;
    margin: 0;
}
table {
    border-spacing: 0;
}
fieldset,
img {
    border: 0;
}
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
    font-weight: normal;
    font-style: normal;
}
strong {
    font-weight: bold;
}
ol,
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
caption,
th {
    text-align: left;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: normal;
    margin: 0;
    padding: 0;
}
q:before,
q:after {
    content: '';
}
abbr,
acronym {
    border: 0;
}
a {
  color:black;
  text-decoration: none;
  border-bottom: none;
  background-position: 0 calc(100% - 3.5px);
  background-size: auto 7px;
  background-repeat: repeat-x;
  padding-bottom: 3px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='Squiggle-svg' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.st0{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-50%);}}%3C/style%3E%3Cpath fill='none' stroke='%23fff' stroke-width='1' class='st0' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E");
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='Squiggle-svg' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.st0{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-50%);}}%3C/style%3E%3Cpath fill='none' stroke='%23000' stroke-width='1' class='st0' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E")

}
a:hover {
  border-bottom: none;
  background-position: 0 calc(100% - 3.5px);
  background-size: auto 7px;
  background-repeat: repeat-x;
  padding-bottom: 3px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='Squiggle-svg' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.st0{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-50%);}}%3C/style%3E%3Cpath fill='none' stroke='gold' stroke-width='1' class='st0' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E");
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='Squiggle-svg' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.st0{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-50%);}}%3C/style%3E%3Cpath fill='none' stroke='gold' stroke-width='1' class='st0' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E")
}
a:link {
    color: black;
}
a:visited {}


  /**
   * Tooltip Styles
   */

  /* Add this attribute to the element that needs a tooltip */
  [data-tooltip] {
    position: relative;
    z-index: 2;
    cursor: pointer;
  }

  /* Hide the tooltip content by default */
  [data-tooltip]:before,
  [data-tooltip]:after {
    visibility: hidden;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    pointer-events: none;
  }

  /* Position tooltip above the element */
  [data-tooltip]:before {
    position: absolute;
    bottom: 150%;
    left: 50%;
    margin-bottom: 5px;
    margin-left: -80px;
    padding: 7px;
    width: 150px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background-color: #000;
    background-color: hsla(0, 0%, 20%, 0.9);
    color: #fff;
    content: attr(data-tooltip);
    text-align: center;
    font-size: 14px;
    line-height: 1.2;
  }

  /* Triangle hack to make tooltip look like a speech bubble */
  [data-tooltip]:after {
    position: absolute;
    bottom: 150%;
    left: 50%;
    margin-left: -5px;
    width: 0;
    border-top: 5px solid #000;
    border-top: 5px solid hsla(0, 0%, 20%, 0.9);
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    content: " ";
    font-size: 0;
    line-height: 0;
  }

  /* Show tooltip content on hover */
  [data-tooltip]:hover:before,
  [data-tooltip]:hover:after {
    visibility: visible;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
  }



  @font-face {
  font-family: 'GT Haptik Regular';
  src: url('../font/GT-Haptik-Regular.eot');
  src: url('../font/GT-Haptik-Regular.eot?#iefix') format('embedded-opentype'),
  url('../font/GT-Haptik-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
  }

  @font-face {
  font-family: 'GT Haptik Bold';
  src: url('../font/GT-Haptik-Bold.eot');
  src: url('../font/GT-Haptik-Bold.eot?#iefix') format('embedded-opentype'),
  url('../font/GT-Haptik-Bold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-stretch: normal;
  }

  @font-face {
  font-family: 'Maria';
  src: url('../font/maria-webfont.eot');
  src: url('../font/maria-webfont.eot?#iefix') format('embedded-opentype'),
  url('../font/maria-webfont.woff2') format('woff2'),
  url('../font/maria-webfont.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
  }

  @font-face {
  font-family: 'Portrait Web';
  src: url('../font/Portrait-Regular-Web.eot');
  src: url('../font/Portrait-Regular-Web.eot?#iefix') format('embedded-opentype'),
  url('../font/Portrait-Regular-Web.woff2') format('woff2'),
  url('../font/Portrait-Regular-Web.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
  }

  @font-face {
  font-family: 'Eksell Large';
  src: url('../font/EksellDisplayWeb-Large.eot');
  src: url('../font/EksellDisplayWeb-Large.eot?#iefix') format('embedded-opentype'),
  url('../font/EksellDisplayWeb-Large.woff2') format('woff2'),
  url('../font/EksellDisplayWeb-Large.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
  }

  @font-face {
  font-family: 'Eksell Medium';
  src: url('../font/EksellDisplayWeb-Medium.eot');
  src: url('../font/EksellDisplayWeb-Medium.eot?#iefix') format('embedded-opentype'),
  url('../font/EksellDisplayWeb-Medium.woff2') format('woff2'),
  url('../font/EksellDisplayWeb-Medium.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
  }

  @font-face {
  font-family: 'Eksell Small';
  src: url('../font/EksellDisplayWeb-Small.eot');
  src: url('../font/EksellDisplayWeb-Small.eot?#iefix') format('embedded-opentype'),
  url('../font/EksellDisplayWeb-Small.woff2') format('woff2'),
  url('../font/EksellDisplayWeb-Small.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
  }

  @font-face {
  font-family: 'Eksell Stencil';
  src: url('../font/EksellDisplayWeb-Stencil.eot');
  src: url('../font/EksellDisplayWeb-Stencil.eot?#iefix') format('embedded-opentype'),
  url('../font/EksellDisplayWeb-Stencil.woff2') format('woff2'),
  url('../font/EksellDisplayWeb-Stencil.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
  }

  @font-face {
  font-family: 'Fakt';
  src: url('../font/FaktPro-Normal.eot');
  src: url('../font/FaktPro-Normal.eot?#iefix') format('embedded-opentype'),
  url('../font/FaktPro-Normal.woff2') format('woff2'),
  url('../font/FaktPro-Normal.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
  }

  @font-face {
  font-family: 'Gotham';
  src: url('../font/GothamRounded-Book.eot');
  src: url('../font/GothamRounded-Book.eot?#iefix') format('embedded-opentype'),
  url('../font/GothamRounded-Book.woff2') format('woff2'),
  url('../font/GothamRounded-Book.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
  }

  :root { font-size: 62.5%; }
  @media (min-width: 600px) { :root { font-size: 1.5rem; } }
  @media (min-width: 900px) { :root { font-size: 1.75rem; } }
  @media (min-width: 1200px) { :root { font-size: 2rem; } }



  .color-W {
    color: #fff;
  }

  .bgcolor-W {
    background-color: #fff;
  }

  .color-B {
    color: #000;
  }

  .bgcolor-B {
    background-color: #000;
  }

  .color-0 {
    color: rgba(245,245,245,1);
  }

  .bgcolor-0 {
    background-color: rgba(245,245,245,1);
  }

  .color-1 {
    color: #ffc428;
  }

  .bgcolor-1 {
    background-color: #ffc428;
  }

  .color-2 {
    color: #af5e81;
  }

  .bgcolor-2 {
    background-color: #af5e81;
  }

  .color-3 {
    color: #ab4e5e;
  }

  .bgcolor-3 {
    background-color: #ab4e5e;
  }

  .color-4 {
    color: #cb4227;
  }

  .bgcolor-4 {
    background-color: #cb4227;
  }

  .color-5 {
    color: #f3716e;
  }

  .bgcolor-5 {
    background-color: #f3716e;
  }

  .color-6 {
    color: #04a251;
  }

  .bgcolor-6 {
    background-color: #04a251;
  }

  .color-7 {
    color: #0d9c68;
  }

  .bgcolor-7 {
    background-color: #0d9c68;
  }

  .color-8 {
    color: #138e94;
  }

  .bgcolor-8 {
    background-color: #138e94;
  }

  .color-9 {
    color: #1081a2;
  }

  .bgcolor-9 {
    background-color: #1081a2;
  }

  .color-10 {
    color: #0271a9;
  }

  .bgcolor-10 {
    background-color: #0271a9;
  }

  .color-11 {
    color:#fb6754;
  }

  .bgcolor-11 {
    background-color:#fb6754;
  }

  .color-12 {
    color: #7d3c9e;
  }

  .bgcolor-12 {
    background-color: #7d3c9e;
  }

  .clearfix:after {
     content: " "; /* Older browser do not support empty content */
     visibility: hidden;
     display: block;
     height: 0;
     clear: both;
  }


  /* HAMBURGER */

  #hamburgerWrapper {
    position: fixed;
    top:0;
    right:0;
    margin:10px;
    width:35px;
    height:35px;
    line-height: 35px;
    background-color: transparent;
    z-index: 900;
  }

  .hamburger {
    float:left;
    padding: 0;
    display: inline-block;
    cursor: pointer;
    transition-property: opacity, filter;
    transition-duration: 0.15s;
    transition-timing-function: linear;
    font: inherit;
    color: inherit;
    text-transform: none;
    background-color: transparent;
    border-radius: 100%;
    border: 0;
    margin: 0;
    overflow: visible; }
    .hamburger:hover {
      opacity: 0.7; }

  .hamburger-box {
    width: 35px;
    height: 35px;
    display: inline-block;
    position: relative; }

  .hamburger-inner {
    display: block;
    top: 50%;
    left:5px;
    margin-top: -2px; }
    .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
      width: 24px;
      height: 3px;
      background-color: #000;
      border-radius: 3px;
      position: absolute;
      transition-property: transform;
      transition-duration: 0.15s;
      transition-timing-function: ease; }
    .hamburger-inner::before, .hamburger-inner::after {
      content: "";
      display: block; }
    .hamburger-inner::before {
      top: -7px; }
    .hamburger-inner::after {
      bottom: -7px; }


      .hamburger--spin .hamburger-inner {
        transition-duration: 0.22s;
        transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
        .hamburger--spin .hamburger-inner::before {
          transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; }
        .hamburger--spin .hamburger-inner::after {
          transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

      .hamburger--spin.is-active .hamburger-inner {
        transform: rotate(225deg);
        transition-delay: 0.12s;
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
        .hamburger--spin.is-active .hamburger-inner::before {
          top: 0;
          opacity: 0;
          transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; }
        .hamburger--spin.is-active .hamburger-inner::after {
          bottom: 0;
          transform: rotate(-90deg);
          transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }




/* Custom CSS
 * --------------------------------------- */

* {
    margin: 0;
}
*,
*:before,
*:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
body,
html {
    margin: 0;
    padding: 0;
    position: relative;
    font-family: "GT Haptik", "Helvetica", Arial, sans-serif;
    font-weight: 400;
    -webkit-transition: font-size .2s;
    -o-transition: font-size .2s;
    -moz-transition: font-size .2s;
    -ms-transition: font-size .2s;
    transition: font-size .2s;
    color: #000;
    height: 100%;
}

body {
  height:100%;
  background: repeating-linear-gradient(-45deg, white, white 25%, tomato 0, tomato 50%);
  display: block;
  color:gold;
}


@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    body {
        -webkit-font-smoothing: antialiased;
    }
}
.superContainer {
    width: 100vw;
    height: 100vh;
    margin: auto;
    z-index: 50;
    position: absolute;
}


@media (min-width: 35rem) {

.column {
    float: left;
}
    .column.full { width: 100%; }
    .column.two-thirds { width: 66.7%; }
    .column.half { width: 50%; }
    .column.third { width: 33.3%; }
    .column.fourth { width: 25%; }
    .column.fifth { width: 20%; }
    .column.sixth { width: 16.6%; }
    .column.seventh { width: 14.28%; }
    .column.eighth { width: 12.5%; }
    .column.ninth { width: 11.9%; }
    .column.tenth { width: 10%; }
    .column.flow-opposite { float: right; }
}



.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  *zoom: 1;
}



.logoContainer {
    position: fixed;
    width: 60vw;
    height: 45vw;
    display: block;
}
.logo {
    position: fixed;
    width: 50vw;
    height: 18.5vw;
    top: 0;
    bottom: 3vw;
    left: 0;
    right: 0;
    margin: auto;
    opacity: 1;
}
#twitMenu {
    position: fixed;
    float: left;
    bottom: 2.8vw;
    left: 10vw;
}

#twitMenu a{
    border-bottom: 1px solid #000;
    text-decoration: none;
}

#twitMenu a img {
    margin: 0;
    height: 2.5vh;
    width: 2.5vh;
}

/* SCROLLING */

.right {
    float: right !important;
}
.clear {
    clear: both;
    float: none;
    display: block;
    height: 0;
    font-size: 0;
    line-height: 0;
}
.text-center {
    text-align: center;
}
#content {
    height: 100%;
}
#begin {
    height: 100%;
    -webkit-background-size: 30%;
    -moz-background-size: 30%;
    -o-background-size: 30%;
    background-size: 30%;
}
#type_holder {
    position: fixed;
    bottom: 50%;
    z-index: 1;
    width: 60%;
    left: 20%;
    text-align: left;
    line-height: 1.5em;
    letter-spacing: -0.1em;
}

.section {
    height: 50%;
    width: 100%;
    min-height: 260px;
    position: relative;
    text-align: center;
}
.section h1,
.section h2,
.section h3,
.section p {
    position: relative;
    width: 300px;
}
.section.work a {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}
.section.work .position {
    position: relative;
    display: block;
    top: 30%;
}
.section.work a:hover {
    text-decoration: none;
    background: none;
    background: rgba(0, 0, 0, 0.03);
}

.section.work h1 {
    font-size: 20px;
    margin-bottom: 10px;
    top: auto;
}
.section.work h2 {
    text-transform: none;
    opacity: 0.8;
    font-style: italic;
    font-weight: 400;
    font-size: 16px;
    top: auto;
}
.cat img {
    position: relative;
    top: 30%;
    height: 80px;
    width: auto;
}
.section a:hover {
    text-decoration: none;
}
pre a:hover {
    color: #000;
}
.t_cursor {
    line-height: 1em;
    display: inline-block;
    vertical-align: middle;
    opacity: 1;
    margin-top: -0.18em;
    margin-left: 0.15em;
    width: 0.119em;
    height: 1.05em;
    background: #0099FF;
}
.t_cursor.blink {
    opacity: 0;
}
#intro {
    position: relative;
}
.button {
    color: #FFF;
    background: black;
    padding: .7em 1.2em;
    text-decoration: none;
    font-size: 1.5em;
    display: inline-block;
    text-transform: uppercase;
}
.button:hover,
a.button:hover {
    background: #555;
    background: rgba(0, 0, 0, 0.8);
    text-decoration: none;
}
.button:active,
a.button:active {
    background: #333;
    background: rgba(0, 0, 0, 0.9);
}
.cat {
    width: 100%;
    height: 100%;
    min-height: 260px;
    background-position: left 7.5% top 50%;
    background-attachment: fixed;
    background-repeat: no-repeat;
    -webkit-background-size: 50%;
    -moz-background-size: 50%;
    -o-background-size: 50%;
    background-size: 50%;
    position: relative;
}
.section#end {
    display: none;
}
.cat h2 {
    padding-left: 350px;
    padding-right: 25px;
}
.cat.f00 {
    background-image: url(../img/omo1.jpg);
    background-size: 10%;
    background-color: transparent;
}
.cat.f01 {
    background-image: url(../img/omo2.jpg);
    background-size: 10%;
    background-color: transparent;
}
.cat.f02 {
    background-image: url(../img/omo3.jpg);
    background-size: 10%;
    background-color: transparent;
}
.cat.f03 {
    background-image: url(../img/omo4.jpg);
    background-size: 10%;
    background-color: transparent;
}
.cat.f04 {
    background-image: url(../img/omo5.jpg);
    background-size: 10%;
    background-color: transparent;
}
.cat.f05 {
    background-image: url(../img/omo6.jpg);
    background-size: 10%;
    background-color: transparent;
}
.cat.f06 {
    background-image: url(../img/omo7.jpg);
    background-size: 10%;
    background-color: transparent;
}
.cat.f07 {
    background-image: url(../img/omo8.jpg);
    background-size: 10%;
    background-color: transparent;
}
.cat.f08 {
    background-image: url(../img/omo9.jpg);
    background-size: 10%;
    background-color: transparent;
}
.cat.f09 {
    background-image: url(../img/omo10.jpg);
    background-size: 10%;
    background-color: transparent;
}
.cat.f10 {
    background-image: url(../img/omo11.jpg);
    background-size: 10%;
    background-color: transparent;
}
.cat.f11 {
    background-image: url(../img/omo12.jpg);
    background-size: 10%;
    background-color: transparent;
}
.cat.f12 {
    background-image: url(../img/omo13.jpg);
    background-size: 10%;
    background-color: transparent;
}
.cat.f13 {
    background-image: url(../img/omo14.jpg);
    background-size: 10%;
    background-color: transparent;
}
.cat.f14 {
    background-image: url(../img/omo15.jpg);
    background-size: 10%;
    background-color: transparent;
}
.cat.f15 {
    background-image: url(../img/omo16.jpg);
    background-size: 10%;
    background-color: transparent;
}
.cat.f16 {
    background-image: url(../img/omo17.jpg);
    background-size: 10%;
    background-color: transparent;
}
.cat.f17 {
    background-image: url(../img/omo18.jpg);
    background-size: 10%;
    background-color: transparent;
}

.cat h1 span {
  color:black;
  mix-blend-mode: difference;
}

header {
    height: 200px;
    padding-top: 90px;
    background: #00FFBF;
    text-align: center;
    margin-bottom: 80px;
}
header img {
    width: auto;
    height: 80px;
    margin: 0 auto;
    display: block;
}
header h1 {
    font-size: 28px;
    margin: 20px 0;
}
header h2 {
    font-family: "GT Haptik", "Helvetica", Arial, sans-serif;
    opacity: 0.5;
    font-size: 20px;
    font-style: italic;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    margin: 10px 0 20px;
}
h1 {
    font-family: "GT Haptik", "Helvetica", Arial, sans-serif;
    font-size: 3.5vw;
    font-weight: bold;
}
section article {
    font-family: "GT Haptik", "Helvetica", Arial, sans-serif;
    font-weight: normal;
    margin: 0 auto;
    line-height: 1.6em;
    text-transform: none;
    margin-bottom: 120px;
}
section article p,
section article blockquote {
    font-size: 20px;
    line-height: 1.6em;
    margin: 1em auto;
    width: 620px;
}
section article blockquote {
    font-style: italic;
    color: #888;
    border-left: 1px solid black;
    padding-left: 20px;
    width: 590px;
    position: relative;
    margin-bottom: 100px;
}
section article blockquote aside {
    position: absolute;
    right: 60px;
}
section article h2,
section article h3,
section article h4 {
    margin: 1em auto;
    width: 620px;
    text-align: center;
    font-weight: 400;
}
section article h2 {
    font-size: 20px;
    margin: 40px auto 15px;
}
section article h3 {
    font-size: 16px;
    font-style: italic;
    opacity: 0.5;
    font-family: "GT Haptik", "Helvetica", Arial, sans-serif;
    text-transform: none;
    margin: 5px auto 80px;
}

section article a {
    color: black;
    text-decoration: none;
}
section article hr {
    width: 620px;
    margin: 80px auto;
    border: 0;
    border-bottom: 1px solid #ddd;
    background: none;
    font-size: 0;
    line-height: 0;
    display: block;
}
section footer p {
    margin-bottom: 30px;
}
section footer a {
    background: black;
}
footer em {
    font-style: normal;
    position: relative;
    top: -1px;
}
section article p a.button {
    background: none;
    color: black;
    border: 1px solid black;
    width: 140px;
    text-align: center;
    display: block;
    margin: 40px auto;
}
section article p a.button:hover {
    background: black;
    color: white;
}
section article p a.button:active {
    background: #555;
    border-color: #555;
    color: white;
}
/* Use the following CSS code if you want to have a class per icon */

/*
Instead of a list of all class selectors,
you can use the generic selector below, but it's slower:
[class*="icon-"] {
*/

.fonticon:before {
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    color: #fff;
    padding-right: 10px;
    position: relative;
    font-size: 0.95em;
}
#about a:hover .fonticon:before {
    color: #59F3CD;
}
.icon-cv:before {
    content: "\e000";
    top: 1px;
}
.icon-mail:before {
    content: "\e001";
}
.icon-twitter:before {
    content: "\e002";
}
.browser {
    padding: 35px 1px 10px;
    margin: 40px auto;
    width: 640px;
    height: 400px;
    overflow: hidden;
    background: #e6e6e6;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -o-border-radius: 6px;
    border-radius: 6px;
    position: relative;
    -webkit-transition: width 500ms, height 500ms, padding 100ms;
    -moz-transition: width 500ms, height 500ms, padding 100ms;
    -o-transition: width 500ms, height 500ms, padding 100ms;
    -ms-transition: width 500ms, height 500ms, padding 100ms;
    transition: width 500ms, height 500ms, padding 100ms;
}
.browser.minied {
    height: 0;
    padding-bottom: 0;
}
.browser.closed {
    display: none;
}
.browser.maxied {
    width: 950px;
    height: 594px;
}
.browser.maxied video {
    height: 594px;
    width: 950px;
}
.browser .title {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 5px;
    font-size: 14px;
    color: #666;
    -webkit-transition: opacity 200ms;
    -o-transition: opacity 200ms;
    -moz-transition: opacity 200ms;
    -ms-transition: opacity 200ms;
    transition: opacity 200ms;
    margin: 0;
}
.browser .ui {
    position: absolute;
    top: 5px;
    left: 10px;
    margin: 0;
    padding: 0;
}
.browser .ui li {
    display: inline-block;
    width: 11px;
    height: 11px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    margin-right: 10px;
    cursor: pointer;
    position: relative;
}
.browser .ui {
    opacity: 0.6
}
.browser:hover .ui {
    opacity: 1;
}
.browser .ui .close {
    background: #FF5011;
}
.browser .ui .close:active {
    background: #CC3300;
}
.browser .ui .min {
    background: #ffc000;
}
.browser .ui li:hover:after {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 4px;
    background: white;
    opacity: 0.4;
    position: absolute;
    top: 2px;
    left: 2px;
}
.browser .ui .max {
    background: #4EE949;
}
.browser .ui .max:active {
    background: #3EBA3A;
}
.browser .window {
    position: relative;
    height: 400px;
    width: auto;
    overflow-y: auto;
    -webkit-transition: height 500ms;
    -moz-transition: height 500ms;
    -o-transition: height 500ms;
    -ms-transition: height 500ms;
    transition: height 500ms;
}
.browser img {
    display: block;
}
video {
    position: relative;
    -webkit-transition: height 500ms, width 500ms;
    -moz-transition: height 500ms, width 500ms;
    -o-transition: height 500ms, width 500ms;
    -ms-transition: height 500ms, width 500ms;
    transition: height 500ms, width 500ms;
}
.play {
    width: 100%;
    height: 100%;
    position: absolute;
    background: no-repeat center center;
    z-index: 50;
    cursor: pointer;
}
.play.playing {
    background: none;
}
.browser video {
    background: #000;
    height: 400px;
    width: 640px;
    display: block;
    -webkit-transition: height 500ms, width 500ms;
    -moz-transition: height 500ms, width 500ms;
    -o-transition: height 500ms, width 500ms;
    -ms-transition: height 500ms, width 500ms;
    transition: height 500ms, width 500ms;
}
.browser.maxied .window {
    height: 594px;
}
.browser img {
    width: 100%;
    height: auto;
}
footer section {
    position: absolute;
    width: 50%;
    bottom: 0;
    text-align: left;
}
footer section.next {
    right: 0;
    text-align: right;
}
footer section a,
footer section span {
    display: block;
    padding: 30px;
    height: 80px;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}
footer section a:hover:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.03);
}
footer section span {
    background: #999;
    color: #fff;
}
footer {
    background: #f3f3f3;
    text-align: center;
    padding: 40px 0 110px;
    position: relative;
}
.video_container {
    width: 1024px;
    height: 576px;
    margin: 30px auto;
    position: relative;
    border: 1px solid black;
    -webkit-transition: height 500ms, width 500ms;
    -moz-transition: height 500ms, width 500ms;
    -o-transition: height 500ms, width 500ms;
    -ms-transition: height 500ms, width 500ms;
    transition: height 500ms, width 500ms;
}
.video_container video {
    height: 576px;
    width: 1024px;
}
@media only screen and (min-width: 480px) {
    .section h1,
    .section h2,
    .section h3,
    .section p {
        width: auto;
        top: 48%;
        -webkit-transform: translate(0, -50%);
        -moz-transform: translate(0, -50%);
        -o-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
        transform: translate(0, -50%);
    }
    .section.work .position {
        top: 50%;
        -webkit-transform: translate(0, -50%);
        -moz-transform: translate(0, -50%);
        -o-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
        transform: translate(0, -50%);
    }
    .section.work h1 {
        font-size: 26px;
    }
    .section.work h2 {
        font-size: 20px;
    }
}
@media only screen and (min-width: 321px) and (max-width: 640px) {
    .cat {
        background-image: none !important;
    }
    .section h1,
    .section h2,
    .section h3,
    .section p {
        top: 150px;
        font-size: 16px;
    }
    .cat img {
        top: 90px;
    }
    .browser {
        width: 320px;
        height: 188px;
    }
    .browser .window {
        height: 188px;
    }
    .browser.maxied {
        width: 480px;
        height: 300px;
    }
    .browser.maxied .window {
        height: 300px;
    }
    .browser video {
        height: 188px;
        width: 320px;
    }
    .browser.maxied video {
        height: 300px;
        width: 480px;
    }
    .browser .title {
        opacity: 0;
    }
    section article h2,
    section article h3,
    section article h4 {
        width: 460px;
    }
    section article p {
        font-size: 16px;
        width: 460px;
    }
    section article img {
        max-width: 460px;
        height: auto;
    }
    section article hr {
        width: 460px;
    }
    .video_container {
        width: 480px;
        height: 270px;
    }
    .video_container video {
        width: 480px;
        height: 270px;
    }
}
/* all iPhone */

@media screen and (max-device-width: 480px),
screen and (max-device-width: 320px) {
    nav {
        position: absolute !important;
        top: 0 !important;
    }
    .browser .ui,
    .browser .title {
        display: none;
    }
    .play {
        display: none !important;
    }
    footer {
        font-size: 56px;
        line-height: 20px;
        text-align: center;
    }
    footer em {
        display: none;
    }
    .section {
        height: 100%;
    }
    .section.work .position {
        top: 40%;
    }
}
/* iPhone portrait */

@media screen and (max-device-width: 320px) {
    .browser,
    .browser.maxied,
    .browser.minied {
        width: 300px;
        height: auto;
        padding: 0;
    }
    .browser .window {
        width: 300px;
        height: auto;
    }
    .browser .window video {
        width: 300px;
        height: 188px;
    }
    .video_container {
        width: 300px;
        height: 169px;
    }
    .video_container video {
        width: 300px;
        height: 169px;
    }
    section article p,
    section article h2,
    section article h3,
    section article hr {
        width: 300px;
    }
    section article p img {
        max-width: 300px;
    }
    section article p {
        font-size: 14px;
    }
    .section h1,
    .section h2,
    .section h3,
    .section p {
        top: 195px;
    }
}
/*   FINAL  TEST  */


.glassesWrapper {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 0;
  margin-left: -350px;
  margin-top: -125px;
}

.glassesWrapperUnder {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 0;
  margin-left: -350px;
  margin-top: -125px;
}

#glassesScroll {
  position: fixed;
  z-index: 100;
  height: 250px;
}

#glassesUnder {
  position: fixed;
  z-index: 5;
  height: 250px;
}