/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers (opinionated).
 */

body {
  margin: 0;
}

/**
 * Add the correct display in IE 9-.
 */

article,
aside,
footer,
header,
nav,
section {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */

figcaption,
figure,
main { /* 1 */
  display: block;
}

/**
 * Add the correct margin in IE 8.
 */

figure {
  margin: 1em 40px;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */

a {
  background-color: transparent; /* 1 */
  -webkit-text-decoration-skip: objects; /* 2 */
}

/**
 * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */

b,
strong {
  font-weight: inherit;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font style in Android 4.3-.
 */

dfn {
  font-style: italic;
}

/**
 * Add the correct background and color in IE 9-.
 */

mark {
  background-color: #ff0;
  color: #000;
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

audio,
video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Remove the border on images inside links in IE 10-.
 */

img {
  border-style: none;
}

/**
 * Hide the overflow in IE.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */

button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
  -webkit-appearance: button; /* 2 */
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Remove the default vertical scrollbar in IE.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */

details, /* 1 */
menu {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Scripting
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

canvas {
  display: inline-block;
}

/**
 * Add the correct display in IE.
 */

template {
  display: none;
}

/* Hidden
   ========================================================================== */

/**
 * Add the correct display in IE 10-.
 */

[hidden] {
  display: none;
}
#gifs-container{pointer-events:none}#gifs-container .draggable-container{position:fixed !important;z-index:10000;pointer-events:all}#gifs-container .gif{width:100%;opacity:0;pointer-events:none;transform:scale(1.2)}#gifs-container .gif.active{opacity:1;transform:scale(1);transition:transform .3s}#arena-channel{padding:80px 0;text-align:center;background:red}#arena-channel h3{margin:0;margin-bottom:30px;font-size:22px;font-weight:normal}@media screen and (min-width:780px){#arena-channel h3{font-size:34px}}#arena-channel .arena-block{margin:0 auto;padding:0;margin-bottom:80px}#arena-channel .arena-block.aspect{height:0;position:relative;padding-bottom:56.25%}@media screen and (min-width:780px){#arena-channel .arena-block.wide{width:66.66666667%}#arena-channel .arena-block.narrow{width:41.66666667%}#arena-channel .arena-block.aspect.wide{padding-bottom:37.5%}#arena-channel .arena-block.aspect.narrow{padding-bottom:23.4375%}}#arena-channel .arena-block a{display:inline-block;position:relative;padding:0 6px;margin:0 4px;text-indent:0;-webkit-font-smoothing:antialiased;transform:skewX(0);transition:transform .2s}#arena-channel .arena-block a:hover{transform:skewX(-17deg)}#arena-channel .arena-block a:after{content:" ";display:block;position:absolute;border:solid 3px;border-color:black;margin:-3px;top:0;left:0;right:0;bottom:0;transition:border-color .2s}#arena-channel .arena-block a:hover:after{border-color:transparent}#arena-channel .arena-block img{width:100%}#arena-channel .arena-block.aspect iframe{width:100%;height:100%;left:0;top:0;position:absolute;border:none}#arena-channel .arena-block h4{margin-top:0;margin-bottom:30px;font-size:22px;font-weight:normal}@media screen and (min-width:780px){#arena-channel .arena-block h4{font-size:34px}}*{box-sizing:border-box}html,body{width:100%;height:100%;position:fixed;overflow:hidden}html.scroll,html.scroll body{height:auto;position:static;overflow-y:visible}body{font-size:18px;font-family:"RandomizedFont",Helvetica,Arial,sans serif;line-height:1.4;background-color:white;transition:background-color .5s}@media screen and (min-width:780px){body{font-size:20px}}a,a:hover,a:focus,a:visited{outline:none;text-decoration:none;color:inherit}img{display:block;width:100%}div.img.left img,div.img.right img,div.img.center img{display:inline-block;height:auto;width:100%}@media screen and (min-width:780px){div.img.left img,div.img.right img,div.img.center img{width:50%}}div.img.left{text-align:left}div.img.right{text-align:right}div.img.center{text-align:center}.container,header{padding:0 16px;width:100%;margin:0 auto}.container:after,header:after{display:table;clear:both;content:" "}@media screen and (min-width:780px){.container,header{padding:0 32px}}.clearfix:after{display:table;clear:both;content:" "}@media screen and (min-width:780px){.only-mobile{display:none !important}}@media screen and (max-width:780px){.only-desktop{display:none !important}}#splash{display:block;position:fixed;top:0;bottom:0;left:0;right:0;z-index:10000000;background-color:#F00;opacity:0;visibility:hidden;transition:opacity .5s 0s,visibility 0s .5s}#splash.active{visibility:visible;opacity:1;transition-delay:0s}#splash h1{display:flex;text-align:center;flex-direction:column;justify-content:center;height:100%;width:100%;margin:0;font-weight:normal;font-size:22px}@media screen and (min-width:780px){#splash h1{font-size:34px}}.langs{text-align:right}.langs a{margin-left:.5em;margin-top:0;display:inline-block;-webkit-font-smoothing:antialiased;transform:skewX(0);transition:transform .2s}.langs a:hover{transform:skewX(-17deg)}.close{width:16px;height:16px;background-image:url("../img/cross_small.svg");background-position:center center;background-size:contain;background-repeat:no-repeat;width:14px;height:14px;margin-top:3px;float:right;cursor:pointer}body.index header{background-color:black}header{position:absolute;height:64px;line-height:64px;z-index:100;background-color:white;transition:background-color .5s,opacity .5s}header h1,header h2,header a,header .menu{margin:0}header h1,header h2{float:left;font-size:18px;font-weight:normal}@media screen and (min-width:780px){header h1,header h2{font-size:20px}}header h2{float:right}header .menu{float:right}header .menu a{display:inline-block;margin-left:1em;-webkit-font-smoothing:antialiased;transform:skewX(0);transition:transform .2s}header .menu a:hover{transform:skewX(-17deg)}header #butter{width:16px;height:16px;background-image:url("../img/butter.svg");background-position:center center;background-size:contain;background-repeat:no-repeat}.cursor{position:absolute;z-index:5}.cursor.left,.cursor.right{top:0;width:50%;height:0}@media screen and (min-width:780px){.cursor.left,.cursor.right{height:67vh}}.cursor.left{left:0;cursor:url("../img/arrow-left.svg") 0 22,auto}.cursor.right{right:0;cursor:url("../img/arrow-right.svg") 56 22,auto}.cursor.down{cursor:url("../img/arrow-down.svg") 22 84,auto}.cursor.down.big{left:0;height:100vh;top:0;width:calc(100vw -  160px )}@media screen and (min-width:780px){.cursor.down.big{top:67vh;height:33vh}}.cursor.down.small{right:0;width:160px;top:0;height:calc(100vh - 130px )}@media screen and (min-width:780px){.cursor.down.small{top:67vh;height:calc( 33vh - 64px )}}#projects{width:100%;height:100vh;position:relative;overflow:hidden}#projects .project{padding-top:64px;position:absolute;width:100%;touch-action:pan-y;visibility:hidden;z-index:-10;transform:translateX(100%);opacity:0}#projects .project.right{z-index:1;opacity:1;visibility:visible;transition:transform .8s 0s cubic-bezier(.4, 0, .5, 1),opacity 0s}#projects .project.active{transform:translateX(0);visibility:visible;z-index:10;opacity:1;transition:transform .8s 0s cubic-bezier(.4, 0, .5, 1),opacity .8s}#projects .project.left{z-index:-1;opacity:1;transform:translateX(-100%);visibility:visible;transition:transform .8s 0s cubic-bezier(.4, 0, .5, 1),opacity 0s}#projects .project.hidden{display:none}#projects .project .container{position:relative;margin-bottom:50vh;background-color:white;transition:background-color .5s}#projects .project .header-img{width:100%;position:relative;overflow:hidden;height:calc(100vh -  194px )}@media screen and (min-width:780px){#projects .project .header-img{height:calc(100vh -  128px )}}#projects .project .header-img .img{position:absolute;width:100%;height:100%;top:0;left:0;transition:.5s;background-repeat:no-repeat;background-position:center center;background-size:cover}@media screen and (min-width:780px){#projects .project .header-img .img.left,#projects .project .header-img .img.right,#projects .project .header-img .img.center{background-size:contain}#projects .project .header-img .img.left{background-position:left center}#projects .project .header-img .img.rigth{background-position:right center}#projects .project .header-img .img.center{background-position:center center}}@media screen and (min-width:780px){#projects .project .cursor.down:hover~.container .header-img .img{width:102%;height:102%;top:-2%;left:-1%}}#projects .project.open .title h2{height:auto;white-space:normal}#projects .project .title{display:flex;justify-content:space-between;width:100%;height:130px;position:relative}#projects .project .title:after{display:table;clear:both;content:" "}@media screen and (min-width:780px){#projects .project .title{height:64px}}#projects .project .title .number{margin-left:.5em}#projects .project .title h1,#projects .project .title h2,#projects .project .title .langs,#projects .project .title .number{margin-top:calc( 32px - 12.6px )}@media screen and (min-width:780px){#projects .project .title h1,#projects .project .title h2,#projects .project .title .langs,#projects .project .title .number{margin-top:calc( 32px - 14px )}}#projects .project .title h1,#projects .project .title h2{flex:1;font-size:18px;font-weight:normal;overflow:hidden;height:25.2px;white-space:nowrap;text-overflow:ellipsis}@media screen and (min-width:780px){#projects .project .title h1,#projects .project .title h2{font-size:20px;height:28px}}#projects .project .title .langs{display:none;opacity:0;transition:opacity .2s 0s}@media screen and (min-width:780px){#projects .project .title .langs{display:block}}#projects .project.active .title .langs{opacity:1;transition:opacity .6s .5s}#projects .project .loader{opacity:0;transform:scale(.8);transition:.4s}#projects .project.loading .loader{opacity:1;transform:scale(1)}#projects .project.loading .content{opacity:0;transform:translateY(50px)}#projects .project .content{opacity:1;transform:scale(1);transition:.4s}#projects .project .summary{margin-top:32px}#projects .project .summary p{line-height:1.2em;text-indent:1em;margin:0;min-height:1em;font-size:22px}#projects .project .summary p:after{display:table;clear:both;content:" "}@media screen and (min-width:780px){#projects .project .summary p{font-size:34px}}#projects .project .summary p:first-of-type{text-indent:0}#projects .project .summary p a{display:inline-block;position:relative;padding:0 6px;margin:0 4px;text-indent:0;-webkit-font-smoothing:antialiased;transform:skewX(0);transition:transform .2s}#projects .project .summary p a:hover{transform:skewX(-17deg)}#projects .project .summary p a:after{content:" ";display:block;position:absolute;border:solid 3px;border-color:black;margin:-3px;top:0;left:0;right:0;bottom:0;transition:border-color .2s}#projects .project .summary p a:hover:after{border-color:transparent}#projects .project .tags{padding-top:32px;font-size:14px;line-height:1.2em}@media screen and (min-width:780px){#projects .project .tags{font-size:16px}}#projects .project .next{margin:0;padding-top:calc(50vh -  32px );font-size:22px}@media screen and (min-width:780px){#projects .project .next{font-size:34px}}#projects .loader{position:absolute;width:300px;left:calc(50% -  150px );margin-top:80px;margin-bottom:320px}#projects #loader{top:calc(50vh -  67.5px );margin-top:0;opacity:1;transform:translateX(0);transition:.4s}.images{padding-bottom:32px}.images img,.images .video-container{margin-top:32px}@media screen and (min-width:780px){.images img,.images .video-container{margin-top:80px}}.images .video-container{display:block;width:100%}@media screen and (min-width:780px){.images .video-container.left,.images .video-container.center,.images .video-container.right{width:50%}}@media screen and (min-width:780px){.images .video-container.center{margin-left:25%}}@media screen and (min-width:780px){.images .video-container.right{margin-left:50%}}.images .video{position:relative;width:100%;overflow:hidden}.images .video iframe{position:absolute;height:100%;width:100%}.images p{font-size:14px}@media screen and (min-width:780px){.images p{font-size:16px}}#main{width:100%;transition:transform .5s}body.index #index{transform:translateY(0)}@media screen and (min-width:780px){body.index{background-color:black}body.index #projects .project .container{background-color:black}}#index{min-height:100vh;position:absolute;z-index:10000;transform:translateY(-100%);transition:transform .5s;color:black}@media screen and (min-width:780px){#index{color:white}}#index .container{padding-top:16px}@media screen and (min-width:780px){#index .container{padding-top:32px}}#index #index-title>div{display:block;width:100%}#index #index-title .langs{float:right}#index #index-title a{display:inline-block;-webkit-font-smoothing:antialiased;transform:skewX(0);transition:transform .2s}#index #index-title a:hover{transform:skewX(-17deg)}#index #index-title img{display:inline;width:auto;vertical-align:-6%}#index #index-items{display:flex;flex-flow:row wrap;justify-content:space-between;align-items:flex-start;cursor:url("../img/cross_white.svg") 17.5 17.5,auto}#index #index-items>div{width:calc(25% - 16px )}#index a.item{margin-bottom:32px;width:100%}@media screen and (min-width:500px){#index a.item{width:calc(50% - 16px )}}@media screen and (min-width:900px){#index a.item{width:calc(25% - 16px )}}#index a.item .img{width:100%;position:relative;padding-bottom:62.5%;overflow:hidden;background-position:center center;background-repeat:no-repeat;background-size:cover}#index a.item .img img{position:absolute;top:50%;transform:translateY(-50%)}#index a.item .img.left,#index a.item .img.right,#index a.item .img.center{padding-bottom:0;overflow:visible}#index a.item .img.left img,#index a.item .img.right img,#index a.item .img.center img{position:relative;width:100%;top:0;transform:none}#index a.item div.spans{margin-top:.5em}#index a.item span{display:inline-block;-webkit-font-smoothing:antialiased;transform:skewX(0);transition:transform .2s}#index a.item span:hover{transform:skewX(-17deg)}#index a.item:hover span{transform:skewX(-17deg)}#about{display:block;position:fixed;width:100%;height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;z-index:10000;top:0;cursor:url("../img/cross.svg") 17.5 17.5,auto;background-color:#F00;padding:16px 0;opacity:0;visibility:hidden;transition:opacity .5s 0s,visibility 0s .5s}@media screen and (min-width:780px){#about{padding:32px 0}}#about .container:first-child{margin-bottom:16px}#about .container:last-child{display:flex;flex-flow:column nowrap;justify-content:space-between;min-height:calc(100% -  48px )}@media screen and (min-width:780px){#about .container:last-child{min-height:100%}}#about .container:last-child::after{content:none}#about.active{visibility:visible;opacity:1;transition-delay:0s}#about .about-text p{line-height:1.2em;text-indent:1em;margin:0;min-height:1em;font-size:22px}#about .about-text p:after{display:table;clear:both;content:" "}@media screen and (min-width:780px){#about .about-text p{font-size:34px}}#about .about-text p:first-of-type{text-indent:0}#about .about-text p a{display:inline-block;position:relative;padding:0 6px;margin:0 4px;text-indent:0;-webkit-font-smoothing:antialiased;transform:skewX(0);transition:transform .2s}#about .about-text p a:hover{transform:skewX(-17deg)}#about .about-text p a:after{content:" ";display:block;position:absolute;border:solid 3px;border-color:black;margin:-3px;top:0;left:0;right:0;bottom:0;transition:border-color .2s}#about .about-text p a:hover:after{border-color:transparent}#about .addresses{margin-top:32px}#about .addresses p{margin:0 0 1em 0}#about .addresses p:last-child{margin:0}#about .addresses a{display:inline-block;-webkit-font-smoothing:antialiased;transform:skewX(0);transition:transform .2s}#about .addresses a:hover{transform:skewX(-17deg)}html.ios-not-safari #projects .project .header-img{height:calc(100vh -  128px )}html.ios-not-safari .cursor.down.small{height:calc(100% - 64px );bottom:64px}