@font-face {
  font-family: ProximaNova;
  font-weight: normal;
  font-style: normal;
  src: url("../fonts/ProximaNova-Regular.eot");
  src: url("../fonts/ProximaNova-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/ProximaNova-Regular.otf") format("opentype");
}
@font-face {
  font-family: ProximaNova;
  font-weight: bold;
  font-style: normal;
  src: url("../fonts/ProximaNova-Bold.eot");
  src: url("../fonts/ProximaNova-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/ProximaNova-Bold.otf") format("opentype");
}
/* line 18, ../sass/styles.scss */
* {
  box-sizing: border-box;
}

/* line 22, ../sass/styles.scss */
html {
  font-family: ProximaNova, "Helvetica-Neue", Helvetica, Arial, sans-serif;
  font-weight: lighter;
  font-size: 14px;
  min-height: 100% !important;
  color: #1a1a1a;
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  background-color: #5efee4;
}

/* line 38, ../sass/styles.scss */
body {
  min-height: 100% !important;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
}

/* line 46, ../sass/styles.scss */
area {
  outline: 0;
}

/* line 50, ../sass/styles.scss */
ul {
  margin: 0;
  padding: 0;
}
/* line 53, ../sass/styles.scss */
ul li {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* line 60, ../sass/styles.scss */
h1, h2, h3, h4, p {
  margin: 0;
  padding: 0;
}

/* line 65, ../sass/styles.scss */
a, button {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* line 79, ../sass/styles.scss */
.page {
  *zoom: 1;
  max-width: 35.75em;
  _width: 35.75em;
  padding-left: 1em;
  padding-right: 1em;
  margin-left: auto;
  margin-right: auto;
}
/* line 38, ../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.1/stylesheets/compass/utilities/general/_clearfix.scss */
.page:after {
  content: "";
  display: table;
  clear: both;
}
@media (min-width: 56.75em) {
  /* line 79, ../sass/styles.scss */
  .page {
    *zoom: 1;
    max-width: 56.75em;
    padding-left: 1em;
    padding-right: 1em;
    margin-left: auto;
    margin-right: auto;
  }
  /* line 38, ../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.1/stylesheets/compass/utilities/general/_clearfix.scss */
  .page:after {
    content: "";
    display: table;
    clear: both;
  }
}

@media (min-width: 56.75em) {
  /* line 86, ../sass/styles.scss */
  .main {
    width: 100%;
    float: right;
    margin-right: 0;
  }
  /* line 89, ../sass/styles.scss */
  .main .content {
    width: 100%;
    float: right;
    margin-right: 0;
    margin-bottom: 450px;
  }
  /* line 93, ../sass/styles.scss */
  .main .content .thumb {
    cursor: pointer;
  }
  /* line 97, ../sass/styles.scss */
  .main .content .project-slide {
    display: inline-block;
    position: relative;
    width: 360px;
    height: 503px;
    top: 0;
    float: left;
    z-index: 100 !important;
    -webkit-box-shadow: 0px 0px 0px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 0px 0px 0px 0px rgba(50, 50, 50, 0.75);
    box-shadow: 0px 0px 0px 0px rgba(50, 50, 50, 0.75);
  }
  /* line 110, ../sass/styles.scss */
  .main .content .project-slide:nth-child(odd) {
    top: 50px;
    float: right;
  }
  /* line 115, ../sass/styles.scss */
  .main .content .project-slide.inverted-left {
    top: 50px;
  }
  /* line 119, ../sass/styles.scss */
  .main .content .project-slide.inverted-right {
    top: 0px;
  }
  /* line 123, ../sass/styles.scss */
  .main .content .project-slide.playing {
    position: relative;
    z-index: 999999 !important;
    -webkit-transition: all 500ms 500ms cubic-bezier(0.7, 0, 0.3, 1);
    -moz-transition: all 500ms 500ms cubic-bezier(0.7, 0, 0.3, 1);
    -ms-transition: all 500ms 500ms cubic-bezier(0.7, 0, 0.3, 1);
    -o-transition: all 500ms 500ms cubic-bezier(0.7, 0, 0.3, 1);
    transition: all 500ms 500ms cubic-bezier(0.7, 0, 0.3, 1);
    -webkit-transform: scale(1.05, 1.05);
    -moz-transform: scale(1.05, 1.05);
    -ms-transform: scale(1.05, 1.05);
    -o-transform: scale(1.05, 1.05);
    transform: scale(1.05, 1.05);
    -webkit-box-shadow: 0px 0px 43px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 0px 0px 43px 0px rgba(50, 50, 50, 0.75);
    box-shadow: 0px 0px 43px 0px rgba(50, 50, 50, 0.75);
  }
  /* line 133, ../sass/styles.scss */
  .main .content .project-slide.pausing {
    position: relative;
    z-index: 100 !important;
    -webkit-transition: all 500ms cubic-bezier(0.7, 0, 0.3, 1);
    -moz-transition: all 500ms cubic-bezier(0.7, 0, 0.3, 1);
    -ms-transition: all 500ms cubic-bezier(0.7, 0, 0.3, 1);
    -o-transition: all 500ms cubic-bezier(0.7, 0, 0.3, 1);
    transition: all 500ms cubic-bezier(0.7, 0, 0.3, 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);
    -webkit-box-shadow: 0px 0px 0px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 0px 0px 0px 0px rgba(50, 50, 50, 0.75);
    box-shadow: 0px 0px 0px 0px rgba(50, 50, 50, 0.75);
  }
  /* line 143, ../sass/styles.scss */
  .main .content .project-slide .description {
    display: block;
    position: relative;
    text-align: right;
    font-size: 1.65em;
    line-height: 1.3em;
    margin-top: 100px;
    color: #318174;
    cursor: auto;
  }
  /* line 153, ../sass/styles.scss */
  .main .content .project-slide .description.inverted-right {
    text-align: left;
  }
  /* line 161, ../sass/styles.scss */
  .main .content .player {
    display: block;
    top: 100px;
    position: relative;
  }
  /* line 167, ../sass/styles.scss */
  .main .content .crossing-line {
    z-index: 210;
    display: block;
    position: absolute;
    width: 300px;
    height: 300px;
    margin-top: 150px;
    margin-left: 550px;
    overflow: hidden;
  }
  /* line 178, ../sass/styles.scss */
  .main .content .crossing-line .title {
    position: relative;
    display: block;
    color: white;
    text-align: left;
    font-size: 6em;
    font-weight: bold;
    left: 20px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  /* line 191, ../sass/styles.scss */
  .main .content .crossing-line .title.inverted {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  /* line 196, ../sass/styles.scss */
  .main .content .crossing-line .title.last {
    left: 30px;
    line-height: 0.8em;
  }
  /* line 201, ../sass/styles.scss */
  .main .content .crossing-line .title.bigger {
    padding-top: 30px;
    font-size: 6em;
    line-height: 1em;
  }
  /* line 209, ../sass/styles.scss */
  .main .content .crossing-line.opened .title {
    margin-top: 0px;
  }
  /* line 214, ../sass/styles.scss */
  .main .content .crossing-line.first {
    border-top: solid 3px #FECB00;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  /* line 219, ../sass/styles.scss */
  .main .content .crossing-line.second {
    margin-left: 23px;
    border-top: solid 3px #61478b;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  /* line 226, ../sass/styles.scss */
  .main .content .crossing-line.third {
    border-top: solid 3px #d35460;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  /* line 232, ../sass/styles.scss */
  .main .content .crossing-line.forth {
    margin-left: 23px;
    border-top: solid 3px #b75e86;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  /* line 240, ../sass/styles.scss */
  .main .content .crossing-line.fifth {
    border-top: solid 3px #3299D9;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  /* line 247, ../sass/styles.scss */
  .main .content:last-child {
    margin-bottom: 250px;
  }
  /* line 251, ../sass/styles.scss */
  .main .content .separator {
    position: relative;
    bottom: 100px;
    width: 100px;
    height: 40px;
    margin: 0 auto;
    top: 150px;
    opacity: 0.2;
    background: url("../imgs/separator.svg") center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
}
/* line 270, ../sass/styles.scss */
.contentinfo {
  position: relative;
  z-index: 120 !important;
  clear: both;
  margin: 0 -1em;
  padding: 0 1em;
  text-align: center;
}
@media (min-width: 56.75em) {
  /* line 270, ../sass/styles.scss */
  .contentinfo {
    margin-top: 230px;
    font-size: 1.8em;
    line-height: 1.2em;
    margin-left: 9.2511%;
    margin-right: 9.2511%;
  }
}

/* line 106, ../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.1/stylesheets/compass/typography/_vertical_rhythm.scss */
html {
  font-size: 100%;
  line-height: 1.5em;
}

/* line 289, ../sass/styles.scss */
.bottom-layer {
  z-index: 130;
  position: fixed;
  text-align: center;
  border-style: solid;
  border-width: 15px;
  border-color: #f0f0f0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
  -webkit-transition: all 500ms cubic-bezier(0.7, 0, 0.3, 1);
  -moz-transition: all 500ms cubic-bezier(0.7, 0, 0.3, 1);
  -ms-transition: all 500ms cubic-bezier(0.7, 0, 0.3, 1);
  -o-transition: all 500ms cubic-bezier(0.7, 0, 0.3, 1);
  transition: all 500ms cubic-bezier(0.7, 0, 0.3, 1);
}
/* line 302, ../sass/styles.scss */
.bottom-layer:before {
  content: '';
  display: inline-block;
  height: 100vh;
  vertical-align: middle;
}
@media (min-width: 56.75em) {
  /* line 289, ../sass/styles.scss */
  .bottom-layer {
    display: hidden;
  }
}

/* line 314, ../sass/styles.scss */
.opacity-layer {
  z-index: 200;
  position: fixed;
  background-color: black;
  width: 100%;
  height: 100vh;
  opacity: 0;
  pointer-events: none;
}
/* line 323, ../sass/styles.scss */
.opacity-layer.playing {
  opacity: 0.4;
  -webkit-transition: all 500ms 500ms cubic-bezier(0.7, 0, 0.3, 1);
  -moz-transition: all 500ms 500ms cubic-bezier(0.7, 0, 0.3, 1);
  -ms-transition: all 500ms 500ms cubic-bezier(0.7, 0, 0.3, 1);
  -o-transition: all 500ms 500ms cubic-bezier(0.7, 0, 0.3, 1);
  transition: all 500ms 500ms cubic-bezier(0.7, 0, 0.3, 1);
}
/* line 328, ../sass/styles.scss */
.opacity-layer.pausing {
  -webkit-transition: all 500ms cubic-bezier(0.7, 0, 0.3, 1);
  -moz-transition: all 500ms cubic-bezier(0.7, 0, 0.3, 1);
  -ms-transition: all 500ms cubic-bezier(0.7, 0, 0.3, 1);
  -o-transition: all 500ms cubic-bezier(0.7, 0, 0.3, 1);
  transition: all 500ms cubic-bezier(0.7, 0, 0.3, 1);
  opacity: 0;
}

/* line 334, ../sass/styles.scss */
.top-layer {
  z-index: 150;
  position: fixed;
  text-align: center;
  width: 100%;
  height: 100vh;
  pointer-events: none;
}
/* line 342, ../sass/styles.scss */
.top-layer:before {
  content: '';
  display: inline-block;
  height: 100vh;
  vertical-align: middle;
}
/* line 349, ../sass/styles.scss */
.top-layer .logo {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: scale(0.7, 0.7);
  -moz-transform: scale(0.7, 0.7);
  -ms-transform: scale(0.7, 0.7);
  -o-transform: scale(0.7, 0.7);
  transform: scale(0.7, 0.7);
}
/* line 356, ../sass/styles.scss */
.top-layer .arrow {
  position: relative;
  cursor: pointer;
  margin: 0 auto;
  opacity: 1;
  bottom: 100px;
  width: 40px;
  height: 40px;
  pointer-events: auto;
  background: url("../imgs/arrow.svg") center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}