/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   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,
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, menu, nav, section {
  display: block; }

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; }

html {
  box-sizing: border-box; }

*, *:before, *:after {
  box-sizing: inherit; }

html, body {
  background: #000; }

body {
  line-height: 1.5;
  color: #333;
  font-weight: 300;
  font-family: 'Roboto Condensed', sans-serif;
  letter-spacing: .02em; }
  body.no-scroll {
    overflow: hidden; }

a {
  display: inline-block;
  color: #333;
  font-weight: 400;
  text-decoration: underline; }
  a:hover {
    cursor: pointer;
    text-decoration: none;
    opacity: .8; }

i.material-icons {
  font-size: 1.3em;
  vertical-align: -20%;
  opacity: 0.8; }

article h1 {
  font-size: 32px;
  margin-bottom: 16px; }
article h2 {
  font-size: 28px;
  margin-bottom: 14px; }
article h3 {
  font-size: 24px;
  margin-bottom: 12px; }
article h4 {
  font-size: 22px;
  margin-bottom: 10px; }
article h5 {
  font-size: 20px;
  margin-bottom: 10px; }
article h6 {
  font-size: 18px;
  margin-bottom: 10px; }
article p {
  font-size: 14px;
  margin-bottom: 10px; }
article strong {
  font-weight: 400; }
article em {
  font-style: italic; }
@media (min-width: 768px) {
  article h1 {
    font-size: 48px;
    margin-bottom: 26px; }
  article h2 {
    font-size: 36px;
    margin-bottom: 24px; }
  article h3 {
    font-size: 32px;
    margin-bottom: 22px; }
  article h4 {
    font-size: 28px;
    margin-bottom: 20px; }
  article h5 {
    font-size: 22px;
    margin-bottom: 18px; }
  article h6 {
    font-size: 18px;
    margin-bottom: 18px; }
  article p {
    font-size: 16px;
    margin-bottom: 18px; } }
@media (min-width: 1200px) {
  article h1 {
    font-size: 64px;
    margin-bottom: 32px; }
  article h2 {
    font-size: 48px;
    margin-bottom: 32px; }
  article h3 {
    font-size: 42px;
    margin-bottom: 28px; }
  article h4 {
    font-size: 36px;
    margin-bottom: 26px; }
  article h5 {
    font-size: 28px;
    margin-bottom: 24px; }
  article h6 {
    font-size: 24px;
    margin-bottom: 22px; }
  article p {
    font-size: 18px;
    margin-bottom: 22px; } }
@media (min-width: 1600px) {
  article p {
    font-size: 20px;
    margin-bottom: 24px; } }
article ul {
  list-style-type: circle; }
article ol {
  list-style-type: decimal; }
article ul, article ol {
  padding-left: 28px;
  margin-bottom: 20px; }
  @media (min-width: 768px) {
    article ul, article ol {
      padding-left: 36px;
      margin-bottom: 24px; } }
  @media (min-width: 768px) {
    article ul, article ol {
      padding-left: 48px;
      margin-bottom: 28px; } }
  article ul li, article ol li {
    margin-bottom: 6px;
    font-size: 14px; }
    @media (min-width: 768px) {
      article ul li, article ol li {
        font-size: 16px; } }
    @media (min-width: 1200px) {
      article ul li, article ol li {
        font-size: 18px; } }
    @media (min-width: 1600px) {
      article ul li, article ol li {
        font-size: 20px; } }
article blockquote, article pre {
  margin: 12px 0 20px 0;
  padding: 12px 18px;
  background: rgba(0, 0, 0, 0.05); }
  @media (min-width: 768px) {
    article blockquote, article pre {
      margin: 36px 0 48px 24px;
      padding: 24px 36px;
      max-width: 86%; } }
article blockquote {
  font-style: italic; }
  article blockquote p:last-child {
    margin: 0; }
  @media (min-width: 1200px) {
    article blockquote p {
      font-size: 20px;
      line-height: 1.7; } }
article pre {
  overflow-x: scroll; }
  article pre code {
    font-size: 14px; }
    @media (min-width: 768px) {
      article pre code {
        font-size: 16px; } }
article code {
  font-family: Consolas, monaco, monospace;
  font-weight: 100; }
article div.hr {
  margin: 36px 20% 36px 0;
  border-bottom: 1px solid #bbb; }
  @media (min-width: 768px) {
    article div.hr {
      margin: 48px 30% 48px 0; } }
  @media (min-width: 1200px) {
    article div.hr {
      margin: 64px 40% 64px 0; } }

#bg {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden; }
  #bg > div {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    -webkit-filter: blur(6px);
    filter: blur(6px);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    -webkit-transition: -webkit-transform 15s linear;
    -moz-transition: -moz-transform 15s linear;
    transition: transform 15s linear; }
    #bg > div.grow {
      -webkit-transform: scale(1.2);
      -moz-transform: scale(1.2);
      -ms-transform: scale(1.2);
      -o-transform: scale(1.2);
      transform: scale(1.2); }

#canvas {
  position: fixed;
  width: 100%;
  height: 100%;
  opacity: .9;
  overflow: hidden; }
  #canvas > canvas {
    position: absolute;
    width: 100%;
    height: 100%; }

#video {
  position: fixed;
  width: 100%;
  height: 100%;
  opacity: .1;
  object-fit: fill; }

#home {
  position: absolute;
  z-index: 5;
  width: 100%;
  height: 100%;
  opacity: .9; }
  #home a {
    text-decoration: none;
    font-weight: 300;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out; }
    #home a:hover {
      -webkit-transform: scale(1.2);
      -moz-transform: scale(1.2);
      -ms-transform: scale(1.2);
      -o-transform: scale(1.2);
      transform: scale(1.2);
      opacity: 1; }
  #home #nav {
    position: absolute;
    z-index: 5;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 16px;
    background: white;
    font-size: 16px;
    -webkit-transition: opacity 0.3s ease;
    -moz-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease; }
    @media (min-width: 768px) {
      #home #nav {
        width: auto;
        bottom: 2vw;
        left: 2vw;
        padding: 24px 96px 24px 32px;
        font-size: 18px; } }
    @media (min-width: 992px) {
      #home #nav {
        padding: 36px 120px 36px 48px;
        font-size: 24px; } }
    @media (min-width: 1200px) {
      #home #nav {
        padding: 42px 240px 42px 64px; } }
    #home #nav h1 {
      font-size: 140%;
      margin-bottom: 12px; }
      @media (min-width: 768px) {
        #home #nav h1 {
          margin-bottom: 16px; } }
      @media (min-width: 992px) {
        #home #nav h1 {
          margin-bottom: 21px; } }
  #home #controls {
    position: absolute;
    z-index: 5;
    right: 0;
    top: 0;
    width: 100%;
    text-align: center;
    background: white;
    line-height: 1.75; }
    #home #controls .panel {
      display: inline-block;
      background: white;
      -webkit-transition: opacity 0.3s ease;
      -moz-transition: opacity 0.3s ease;
      transition: opacity 0.3s ease; }
      #home #controls .panel span, #home #controls .panel a {
        display: inline-block;
        vertical-align: middle;
        margin: 0 8px;
        opacity: .5; }
        #home #controls .panel span:hover, #home #controls .panel a:hover {
          opacity: 1; }
    #home #controls #effect-name {
      position: relative;
      top: -1px;
      font-style: italic;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 10vw; }
    @media (min-width: 480px) {
      #home #controls .panel {
        margin: 0 16px; }
        #home #controls .panel span, #home #controls .panel a {
          margin: 0 12px; } }
    @media (min-width: 768px) {
      #home #controls {
        right: 12px;
        top: 12px;
        width: auto;
        background: transparent;
        line-height: 2; }
        #home #controls .panel {
          background: white;
          padding: 0 8px;
          margin: 4px; }
        #home #controls #effect-name {
          width: 160px; } }

#windows {
  position: relative;
  padding-top: 100vh; }
  @media (min-width: 1600px) {
    #windows {
      padding-bottom: 100vh; } }

.window {
  padding: 0 8px 8px 8px; }
  @media (min-width: 768px) {
    .window {
      padding: 0 2vw 2vw 2vw; } }
  .window .wrap {
    background: white;
    padding: 16px; }
    @media (min-width: 768px) {
      .window .wrap {
        padding: 24px; } }
    @media (min-width: 992px) {
      .window .wrap {
        padding: 36px; } }
    @media (min-width: 1200px) {
      .window .wrap {
        padding: 48px; } }
    .window .wrap header {
      padding-bottom: 12px;
      margin-bottom: 16px;
      border-bottom: 1px solid #333; }
      @media (min-width: 768px) {
        .window .wrap header {
          padding-bottom: 16px;
          margin-bottom: 24px; } }
      @media (min-width: 992px) {
        .window .wrap header {
          padding-bottom: 24px;
          margin-bottom: 36px; } }
      @media (min-width: 1200px) {
        .window .wrap header {
          padding-bottom: 36px;
          margin-bottom: 48px; } }
      .window .wrap header h1 {
        font-weight: 400;
        font-size: 24px; }
        @media (min-width: 768px) {
          .window .wrap header h1 {
            font-size: 28px; } }
        @media (min-width: 992px) {
          .window .wrap header h1 {
            font-size: 36px; } }

#portfolio {
  margin-top: 8px;
  max-width: 1920px; }
  @media (min-width: 768px) {
    #portfolio {
      margin-top: 2vw; } }
  @media (min-width: 1600px) {
    #portfolio {
      margin-top: 0; } }
  #portfolio #filters {
    line-height: 2; }
    @media (min-width: 768px) {
      #portfolio #filters {
        font-size: 120%; } }
    #portfolio #filters a {
      text-decoration: none; }
    #portfolio #filters #toggle-filters {
      margin-bottom: 18px; }
      @media (min-width: 768px) {
        #portfolio #filters #toggle-filters {
          margin-bottom: 24px;
          font-size: 120%; } }
      @media (min-width: 1200px) {
        #portfolio #filters #toggle-filters {
          margin-bottom: 36px; } }
    #portfolio #filters ul {
      margin: 12px 0;
      display: none; }
      @media (min-width: 768px) {
        #portfolio #filters ul {
          margin: 24px 0; } }
      @media (min-width: 1200px) {
        #portfolio #filters ul {
          margin: 36px 0;
          line-height: 2.4; } }
      #portfolio #filters ul li {
        display: inline-block;
        margin-right: 12px; }
        @media (min-width: 768px) {
          #portfolio #filters ul li {
            margin-right: 18px; } }
        @media (min-width: 1200px) {
          #portfolio #filters ul li {
            margin-right: 32px; } }
      #portfolio #filters ul a, #portfolio #filters ul i.material-icons {
        opacity: .3;
        -webkit-transition: -webkit-transform 0.3s ease;
        -moz-transition: -moz-transform 0.3s ease;
        transition: transform 0.3s ease; }
      #portfolio #filters ul a:hover, #portfolio #filters ul a.active {
        opacity: 1;
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -o-transform: scale(1.1);
        transform: scale(1.1); }
      #portfolio #filters ul a.active {
        text-decoration: underline; }
  #portfolio .notice {
    padding: 48px 0 0 0; }
    @media (min-width: 768px) {
      #portfolio .notice {
        padding: 64px 0 0 0; } }
    @media (min-width: 1600px) {
      #portfolio .notice {
        padding: 96px 0 0 0; } }
    #portfolio .notice span {
      display: inline-block;
      margin: 0 0 4vw 4vw; }
      @media (min-width: 768px) {
        #portfolio .notice span {
          margin: 0 0 48px 48px; } }

#portfolio-pop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 10;
  padding: 16px;
  overflow-y: auto;
  pointer-events: none;
  opacity: 0;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease; }
  @media (min-width: 768px) {
    #portfolio-pop {
      padding: 24px; } }
  @media (min-width: 1200px) {
    #portfolio-pop {
      padding: 48px; } }
  #portfolio-pop.active {
    pointer-events: auto;
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); }
  #portfolio-pop a.close {
    float: right;
    position: relative;
    z-index: 10; }
    #portfolio-pop a.close i.material-icons {
      font-size: 24px; }
      @media (min-width: 768px) {
        #portfolio-pop a.close i.material-icons {
          font-size: 32px; } }
      @media (min-width: 1200px) {
        #portfolio-pop a.close i.material-icons {
          font-size: 48px; } }
  #portfolio-pop .portfolio-item {
    display: none;
    padding-bottom: 48px; }
    #portfolio-pop .portfolio-item.active {
      display: block; }
    @media (min-width: 768px) {
      #portfolio-pop .portfolio-item {
        padding-bottom: 96px; } }
    @media (min-width: 1200px) {
      #portfolio-pop .portfolio-item {
        padding-bottom: 180px; } }
    #portfolio-pop .portfolio-item[data-id="emoji"] {
      font-size: 300%;
      text-align: center;
      -webkit-animation: seizure 1s infinite;
      -moz-animation: seizure 1s infinite;
      animation: seizure 1s infinite; }
@-webkit-keyframes seizure {
  0% {
    -webkit-filter: invert(0); }
  50% {
    -webkit-filter: invert(1); }
  100% {
    -webkit-filter: invert(0); } }
@-moz-keyframes seizure {}
@keyframes seizure {
  0% {
    -webkit-filter: invert(0);
    filter: invert(0); }
  50% {
    -webkit-filter: invert(1);
    filter: invert(1); }
  100% {
    -webkit-filter: invert(0);
    filter: invert(0); } }
  #portfolio-pop .grid {
    border: 0;
    margin-bottom: 18px; }
    @media (min-width: 768px) {
      #portfolio-pop .grid {
        margin-bottom: 36px; } }
    @media (min-width: 1200px) {
      #portfolio-pop .grid {
        margin-bottom: 48px; } }
    @media (min-width: 1920px) {
      #portfolio-pop .grid {
        max-width: 1200px; } }
    #portfolio-pop .grid .item {
      min-width: 25%;
      max-width: 25%;
      height: 22vw;
      border: 0; }
      @media (min-width: 768px) {
        #portfolio-pop .grid .item {
          min-width: 20%;
          max-width: 20%;
          height: 18vw; } }
      @media (min-width: 992px) {
        #portfolio-pop .grid .item {
          min-width: 12.5%;
          max-width: 12.5%;
          height: 12vw; } }
      @media (min-width: 1920px) {
        #portfolio-pop .grid .item {
          height: 150px; } }
      #portfolio-pop .grid .item .image {
        top: 10%;
        left: 10%;
        width: 80%;
        height: 80%;
        border: 1px solid #ddd;
        margin-left: -10%;
        opacity: 1;
        -webkit-transform: scale(1) rotate(0deg);
        -moz-transform: scale(1) rotate(0deg);
        -ms-transform: scale(1) rotate(0deg);
        -o-transform: scale(1) rotate(0deg);
        transform: scale(1) rotate(0deg);
        -webkit-filter: grayscale(0);
        filter: grayscale(0); }
  @media (min-width: 768px) {
    #portfolio-pop article {
      max-width: 90%; } }
  @media (min-width: 992px) {
    #portfolio-pop article {
      max-width: 80%; } }
  @media (min-width: 1200px) {
    #portfolio-pop article {
      max-width: 70%; } }
  @media (min-width: 1600px) {
    #portfolio-pop article {
      max-width: 60%; } }
  @media (min-width: 1920px) {
    #portfolio-pop article {
      max-width: 1200px; } }
  #portfolio-pop article .links, #portfolio-pop article .tags {
    font-size: 90%;
    margin-left: 24px; }
    @media (min-width: 992px) {
      #portfolio-pop article .links, #portfolio-pop article .tags {
        font-size: 120%;
        margin-left: 48px; } }
    #portfolio-pop article .links a, #portfolio-pop article .links span, #portfolio-pop article .tags a, #portfolio-pop article .tags span {
      display: inline-block;
      margin-right: 24px;
      text-decoration: none; }
      @media (min-width: 992px) {
        #portfolio-pop article .links a, #portfolio-pop article .links span, #portfolio-pop article .tags a, #portfolio-pop article .tags span {
          margin-right: 48px; } }
  #portfolio-pop article .tags span {
    margin-bottom: 12px; }
    @media (min-width: 768px) {
      #portfolio-pop article .tags span {
        margin-bottom: 18px; } }
    @media (min-width: 1200px) {
      #portfolio-pop article .tags span {
        margin-bottom: 24px; } }

@media (min-width: 768px) {
  #resume {
    max-width: 90%; } }
@media (min-width: 1600px) {
  #resume {
    padding-bottom: 0;
    max-width: 60%; } }
#resume .experience {
  padding-left: 4px; }
  @media (min-width: 768px) {
    #resume .experience {
      padding-left: 8px; } }
  @media (min-width: 1200px) {
    #resume .experience {
      padding-left: 16px; } }
#resume .smaller {
  font-size: 80%; }

#contact #pic {
  display: none;
  opacity: .7;
  background: url(/img/pic.jpg);
  background-size: cover;
  background-position: 50% 18%;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease; }
  #contact #pic:hover {
    opacity: 1;
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%); }
#contact h4 {
  margin-bottom: 12px; }
#contact p > i.material-icons {
  margin-left: 5px;
  width: 28px; }
@media (min-width: 480px) {
  #contact #pic {
    display: block;
    float: left;
    width: 20%;
    height: 260px;
    margin: 0 24px 0 0; } }
@media (min-width: 768px) {
  #contact {
    max-width: 80%; }
    #contact #pic {
      width: 30%;
      height: 350px; }
    #contact h4 {
      margin-bottom: 18px; }
    #contact p > i.material-icons {
      margin-left: 7px;
      width: 36px; } }
@media (min-width: 1200px) {
  #contact #pic {
    height: 430px;
    margin-right: 48px; }
  #contact h4 {
    margin-bottom: 36px; }
  #contact p > i.material-icons {
    margin-left: 12px;
    width: 44px; } }
@media (min-width: 1600px) {
  #contact {
    float: left;
    position: relative;
    top: 2vw;
    max-width: none;
    min-width: 60%; }
    #contact #pic {
      height: 460px; } }

.grid {
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  box-lines: multiple;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }
  .grid .item {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    position: relative;
    overflow: hidden;
    min-width: 50%;
    max-width: 50%;
    height: 45vw;
    border: 4px solid transparent;
    opacity: 1;
    -webkit-transition: opacity 0.3s ease;
    -moz-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease; }
    .grid .item.hidden {
      display: none; }
    @media (min-width: 480px) {
      .grid .item {
        height: 40vw; } }
    @media (min-width: 768px) {
      .grid .item {
        min-width: 33.33333333%;
        max-width: 33.33333333%;
        height: 30vw;
        border-width: 8px; } }
    @media (min-width: 992px) {
      .grid .item {
        min-width: 25%;
        max-width: 25%;
        height: 22vw; } }
    @media (min-width: 1200px) {
      .grid .item {
        min-width: 20%;
        max-width: 20%;
        height: 18vw; } }
    @media (min-width: 1920px) {
      .grid .item {
        height: 320px; } }
    .grid .item div.image {
      position: absolute;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background-size: cover;
      background-position: center center;
      -webkit-filter: grayscale(100%) blur(0);
      filter: grayscale(100%) blur(0);
      -webkit-transform: scale(1.2) rotate(0deg);
      -moz-transform: scale(1.2) rotate(0deg);
      -ms-transform: scale(1.2) rotate(0deg);
      -o-transform: scale(1.2) rotate(0deg);
      transform: scale(1.2) rotate(0deg);
      -webkit-transition-property: filter, -webkit-transform, opacity;
      -moz-transition-property: filter, -moz-transform, opacity;
      transition-property: filter, transform, opacity;
      -webkit-transition-duration: 0.3s, 0.3s, 0.3s;
      -moz-transition-duration: 0.3s, 0.3s, 0.3s;
      transition-duration: 0.3s, 0.3s, 0.3s; }
    .grid .item div.title {
      position: absolute;
      bottom: 0;
      background: rgba(0, 0, 0, 0.8);
      color: #ddd;
      font-size: 12px;
      padding: 4px 8px;
      box-shadow: 0 0 0 transparent;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
      -webkit-transition: box-shadow 0.3s ease;
      -moz-transition: box-shadow 0.3s ease;
      transition: box-shadow 0.3s ease; }
      @media (min-width: 480px) {
        .grid .item div.title {
          font-size: 14px;
          padding: 4px 12px; } }
      @media (min-width: 768px) {
        .grid .item div.title {
          font-size: 18px;
          padding: 4px 16px; } }
      @media (min-width: 992px) {
        .grid .item div.title {
          font-size: 20px; } }
      @media (min-width: 1200px) {
        .grid .item div.title {
          font-size: 24px; } }
      @media (min-width: 768px) {
        .grid .item div.title i.material-icons {
          -webkit-transform: scale(0.7);
          -moz-transform: scale(0.7);
          -ms-transform: scale(0.7);
          -o-transform: scale(0.7);
          transform: scale(0.7);
          margin-top: 2px; } }
    .grid .item:hover {
      cursor: pointer;
      opacity: 1 !important; }
      .grid .item:hover div.title {
        box-shadow: 2px -2px 6px rgba(0, 0, 0, 0.6);
        background: black; }
        @media (min-width: 992px) {
          .grid .item:hover div.title {
            box-shadow: 5px -5px 10px rgba(0, 0, 0, 0.6); } }
      .grid .item:hover div.image {
        opacity: 1;
        -webkit-filter: grayscale(0%) blur(0px);
        filter: grayscale(0%) blur(0px);
        -webkit-transform: scale(1.1) rotate(0deg);
        -moz-transform: scale(1.1) rotate(0deg);
        -ms-transform: scale(1.1) rotate(0deg);
        -o-transform: scale(1.1) rotate(0deg);
        transform: scale(1.1) rotate(0deg); }
  @media (max-width: 768px) {
    .grid.featured .item:first-child, .grid.featured .item:nth-child(2), .grid.featured .item:nth-child(3) {
      min-width: 100%;
      max-width: 100%;
      height: 80vw; }
      .grid.featured .item:first-child .title, .grid.featured .item:nth-child(2) .title, .grid.featured .item:nth-child(3) .title {
        font-size: 16px; }
    .grid.featured .item:nth-child(4), .grid.featured .item:nth-child(5), .grid.featured .item:nth-child(6), .grid.featured .item:nth-child(7), .grid.featured .item:nth-child(8), .grid.featured .item:nth-child(9) {
      min-width: 100%;
      max-width: 100%; }
      .grid.featured .item:nth-child(4) .title, .grid.featured .item:nth-child(5) .title, .grid.featured .item:nth-child(6) .title, .grid.featured .item:nth-child(7) .title, .grid.featured .item:nth-child(8) .title, .grid.featured .item:nth-child(9) .title {
        font-size: 14px; }
    .grid.featured .item:nth-child(n + 18) {
      height: 26vw; } }
  @media (min-width: 769px) and (max-width: 1200px) {
    .grid.featured .item:first-child {
      min-width: 100%;
      max-width: 100%;
      height: 60vw; }
      .grid.featured .item:first-child .title {
        font-size: 32px; }
    .grid.featured .item:nth-child(2) {
      min-width: 66.66666666%;
      max-width: 66.66666666%;
      height: 60vw; }
      .grid.featured .item:nth-child(2) .title {
        font-size: 28px; }
    .grid.featured .item:nth-child(3) {
      min-width: 33.33333333%;
      max-width: 33.33333333%;
      height: 60vw; }
      .grid.featured .item:nth-child(3) .title {
        font-size: 24px; }
    .grid.featured .item:nth-child(4) {
      min-width: 66.66666666%;
      max-width: 66.66666666%; }
      .grid.featured .item:nth-child(4) .title {
        font-size: 20px; }
    .grid.featured .item:nth-child(5) {
      min-width: 33.33333333%;
      max-width: 33.33333333%; }
      .grid.featured .item:nth-child(5) .title {
        font-size: 20px; }
    .grid.featured .item:nth-child(n + 18) {
      min-width: 20%;
      max-width: 20%;
      height: 18vw; }
      .grid.featured .item:nth-child(n + 18) .title {
        padding: 0 4px; } }
  @media (min-width: 1201px) {
    .grid.featured .item:first-child {
      min-width: 60%;
      max-width: 60%;
      height: 32vw; }
      .grid.featured .item:first-child .title {
        font-size: 48px; }
    .grid.featured .item:nth-child(2) {
      min-width: 40%;
      max-width: 40%;
      height: 32vw; }
      .grid.featured .item:nth-child(2) .title {
        font-size: 36px; }
    .grid.featured .item:nth-child(3) {
      min-width: 40%;
      max-width: 40%;
      height: 32vw; }
      .grid.featured .item:nth-child(3) .title {
        font-size: 28px; }
    .grid.featured .item:nth-child(4) {
      min-width: 40%;
      max-width: 40%;
      height: 32vw; }
      .grid.featured .item:nth-child(4) .title {
        font-size: 28px; }
    .grid.featured .item:nth-child(5) {
      min-width: 20%;
      max-width: 20%;
      height: 32vw; }
    .grid.featured .item:nth-child(6) {
      min-width: 60%;
      max-width: 60%; }
    .grid.featured .item:nth-child(7) {
      min-width: 40%;
      max-width: 40%; }
    .grid.featured .item:nth-child(n + 18) {
      min-width: 10%;
      max-width: 10%;
      height: 9vw; }
      .grid.featured .item:nth-child(n + 18) .title {
        font-size: 18px;
        padding: 0 4px; } }
  @media (min-width: 1601px) {
    .grid.featured .item:first-child, .grid.featured .item:nth-child(2), .grid.featured .item:nth-child(3), .grid.featured .item:nth-child(4), .grid.featured .item:nth-child(5) {
      height: 640px; }
    .grid.featured .item:nth-child(n + 18) {
      height: 180px; } }
  .grid.featured.private .item:nth-child(6) {
    opacity: .8; }
  .grid.featured.private .item:nth-child(7) {
    opacity: .8; }
  .grid.featured.private .item:nth-child(8), .grid.featured.private .item:nth-child(9), .grid.featured.private .item:nth-child(10), .grid.featured.private .item:nth-child(11), .grid.featured.private .item:nth-child(12) {
    opacity: .7; }
  .grid.featured.private .item:nth-child(13), .grid.featured.private .item:nth-child(14), .grid.featured.private .item:nth-child(15), .grid.featured.private .item:nth-child(16), .grid.featured.private .item:nth-child(17) {
    opacity: .6; }
  .grid.featured.private .item:nth-child(18), .grid.featured.private .item:nth-child(19), .grid.featured.private .item:nth-child(20), .grid.featured.private .item:nth-child(21), .grid.featured.private .item:nth-child(22), .grid.featured.private .item:nth-child(23), .grid.featured.private .item:nth-child(24), .grid.featured.private .item:nth-child(25), .grid.featured.private .item:nth-child(26), .grid.featured.private .item:nth-child(27) {
    opacity: .5; }
  .grid.featured.private .item:nth-child(n + 28) {
    opacity: .4; }
  .grid.featured.private .item:nth-last-child(1) {
    opacity: .05; }
  .grid.featured.private .item:nth-last-child(2) {
    opacity: .07; }
  .grid.featured.private .item:nth-last-child(3) {
    opacity: .1; }
  .grid.featured.private .item:nth-last-child(4) {
    opacity: .12; }
  .grid.featured.private .item:nth-last-child(5) {
    opacity: .15; }
  .grid.featured.private .item:nth-last-child(6) {
    opacity: .17; }
  .grid.featured.private .item:nth-last-child(7) {
    opacity: .2; }
  .grid.featured.private .item:nth-last-child(8) {
    opacity: .22; }
  .grid.featured.private .item:nth-last-child(9) {
    opacity: .25; }
  .grid.featured.private .item:nth-last-child(10) {
    opacity: .27; }
  .grid.featured.private .item:nth-last-child(11) {
    opacity: .3; }
  .grid.featured.private .item:nth-last-child(12) {
    opacity: .32; }
  .grid.featured.private .item:nth-last-child(13) {
    opacity: .35; }
  .grid.featured.private .item:nth-last-child(14) {
    opacity: .37; }
  .grid.featured.public .item:nth-last-child(1) {
    opacity: .1; }
  .grid.featured.public .item:nth-last-child(2) {
    opacity: .2; }
  .grid.featured.public .item:nth-last-child(3) {
    opacity: .3; }
  .grid.featured.public .item:nth-last-child(4) {
    opacity: .4; }
  .grid.featured.public .item:nth-last-child(5) {
    opacity: .5; }
  .grid.featured.public .item:nth-last-child(6) {
    opacity: .6; }
  .grid.featured.public .item:nth-last-child(7) {
    opacity: .7; }
  .grid.featured.public .item:nth-last-child(8) {
    opacity: .8; }
  .grid.featured.public .item:nth-last-child(9) {
    opacity: .9; }

body.dark {
  color: #ddd; }
  body.dark a {
    color: #ddd; }
  body.dark article blockquote, body.dark article pre {
    background: rgba(255, 255, 255, 0.1); }
  body.dark #bg > div {
    -webkit-filter: blur(6px) grayscale(100%);
    filter: blur(6px) grayscale(100%); }
  body.dark #home #nav, body.dark #home #controls {
    background: black;
    border: 1px solid #222; }
  body.dark #home #controls .panel {
    background: black; }
  @media (min-width: 768px) {
    body.dark #home #controls {
      background: transparent;
      border: 0; }
    body.dark #home #controls .panel {
      border: 1px solid #222; } }
  body.dark .window .wrap {
    background: black;
    border: 1px solid #222; }
    body.dark .window .wrap header {
      border-bottom-color: #ddd; }
  body.dark #portfolio-pop {
    background: #000; }
    body.dark #portfolio-pop .grid .image {
      border: 1px solid #444; }
  body.dark .grid .item:hover div.image {
    -webkit-filter: grayscale(0%) blur(0px);
    filter: grayscale(0%) blur(0px); }

body.ui-hidden #home #nav, body.ui-hidden #home #controls .panel {
  opacity: 0;
  pointer-events: none; }
body.ui-hidden #home #controls {
  text-align: right;
  background: transparent; }

/*# sourceMappingURL=styles.css.map */