/**
 * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 * http://cssreset.com
 */
.center-vertical-inner {
  position: absolute;
  top: 50%;
  transform: translate(0%, -50%); }

.center-vertical {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center; }

.layout__grid {
  width: 100%; }
  .layout__grid.__item {
    background-color: #000; }
  .layout__grid__item {
    box-sizing: border-box;
    border: 1px solid #000;
    margin-bottom: 10px; }

/*
.__layout__grid__stacked
{
  @include col-styles;

  @media screen and (min-width:600px) 
  {
    @include column(1/2, $gutter: 4);
  }

  @media screen and (min-width:900px) 
  {
    @include column(1/4,  $gutter: 2);
  }
}
*/
.nav__bar__links {
  text-align: left;
  padding: 20px;
  background-color: #000; }
.nav__bar__link {
  display: inline-block;
  margin-right: 20px;
  text-decoration: none;
  color: #fff;
  font-weight: 700; }
  .nav__bar__link:last-child {
    margin-left: 0px; }
  .nav__bar__link:after {
    content: " | ";
    display: inline-block;
    margin-left: 18px; }
.nav__bar .nav__hamburger {
  display: none; }
@media (max-width: 600px) {
  .nav__bar__links {
    display: none; }
  .nav__bar .nav__hamburger {
    display: inline-block; }
  .nav__bar.--open __links {
    display: display; }
  .nav__bar.--open .nav__hamburger {
    display: none; } }
@media (max-width: 800px) {
  .nav__bar__link {
    width: 100%;
    text-align: center; } }

    /*.nav__bar__dropdown
    {
      float: left;
      overflow: hidden;

      &__dbutton{
         
        //@extend .font__nav;
        border: none;
        outline: none;
        padding: 14px 16px;
        background-color: inherit;
        margin: 0; 
        margin-top:3px;
      }
    }*/
.nav__bar__link:hover
 {
  background-color: green; }

.nav__hBurger {
  display: none; }

/*.nav__bar__dropdown__content
{
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  z-index: 1;

  &__link
  {
    float: none;
    color: #000;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
  }

}*/
/*.nav__bar__dropdown__content__link:hover
{
  background-color: #ddd;
}


.nav__bar__dropdown:hover
.nav__bar__dropdown__content
{
  display: block;
}*/
.blue22 {
  font-size: 50px;
  color: blue; }

/**
 * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 * http://cssreset.com
 */
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; }

.clearfix:after, .layout__grid:after, .layout__grid.-cols3:after, .layout__grid.-cols2:after, .wrapper:after, .content-row:after, .content-row__innerwrapper:after, .copy-media:after, .grid:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0; }

.clearfix, .layout__grid, .layout__grid.-cols3, .layout__grid.-cols2, .wrapper, .content-row, .content-row__innerwrapper, .copy-media, .grid {
  display: inline-block; }

/* start commented backslash hack \*/
* html .clearfix, * html .layout__grid, * html .layout__grid.-cols3, * html .layout__grid.-cols2, * html .wrapper, * html .content-row, * html .content-row__innerwrapper, * html .copy-media, * html .grid {
  height: 1%; }

.clearfix, .layout__grid, .layout__grid.-cols3, .layout__grid.-cols2, .wrapper, .content-row, .content-row__innerwrapper, .copy-media, .grid {
  display: block; }

/* close commented backslash hack */
[type=reset], [type=submit], button, html [type=button] {
  -webkit-appearance: initial; }

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

body {
  height: 100%;
  padding: 0px;
  margin: 0px;
  background-color: #000;
  color: #fff;
  overflow-y: hidden;
  font-family: 'Nunito', sans-serif; }
  body.-scrollable {
    height: auto;
    overflow-y: auto; }

.about {
  display: none; }

body {
  position: relative;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  line-height: 1.6em;
  position: relative;
  z-index: 0;
  overflow-x: hidden;
  /*@include breakpoint($tablet) {
  	font-size: 18px;
  	line-height: 1.8em;
  }*/ }

.ui__hidden {
  width: 0px;
  height: 0px;
  opacity: 0;
  position: fixed; }

.font__smalllink {
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px; }
  @media (max-width: 700px) {
    .font__smalllink {
      font-size: 14px; } }

.wrapper {
  max-width: 1250px;
  margin: auto;
  padding-left: 30px;
  padding-right: 30px;
  box-sizing: border-box; }

.nav {
  padding-right: 60px;
  padding-top: 2px; }

.nav__link {
  color: #fff !important;
  text-decoration: none;
  margin-left: 15px;
  font-size: 14px;
  text-decoration: none;
  display: inline-block;
  transform: translateY(-50px); }
  .nav__link:hover {
    cursor: pointer;
    text-decoration: underline;
    color: #0096ff !important; }

.section {
  display: none; }

.ui {
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 10002;
  width: 100%;
  transition: transform 0.3s;
  transition-delay: 0.3s; }
  .ui.-dark .ui__hamburger__line {
    background-color: #000; }
  .ui.-dark .ui__logo__copy {
    color: #000; }
  .ui.-dark .ui__logo__copy:before {
    background-color: #000; }
  .ui.-dark .ui__logo__image.-black {
    opacity: 1; }
  .ui.-dark .ui__logo__image.-white {
    opacity: 0; }
  .ui.-hide {
    transform: translateY(-100px);
    transition-delay: 0s; }
  .ui.-navopen .ui__logo {
    visibility: visible; }

body.section-home .ui__logo,
body.section-home .ui__hamburger {
  opacity: 0; }

.ui__logo {
  position: absolute;
  top: 20px;
  left: 30px; }
  @media (max-width: 800px) {
    .ui__logo {
      top: 20px;
      left: 20px; }
      .ui__logo .ui__logo__image {
        width: 28px;
        opacity: 0.8; } }

.ui__logo__link {
  opacity: 0;
  display: inline-block; }

.ui__logo__link img {
  pointer-events: auto; }

.ui__logo__image {
  width: 20px;
  opacity: 1; }
  .ui__logo__image.-black {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    opacity: 0; }

.ui__logo__copy {
  position: relative;
  left: 35px;
  top: -15px;
  font-size: 14px;
  letter-spacing: 1px;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  display: inline-block;
  font-weight: 600;
  transition: transform 0.6s 0.4s;
  transform: translateY(-60px); }
  @media (max-width: 900px) {
    .ui__logo__copy {
      display: none !important; } }
  .ui__logo__copy.-active:hover {
    text-decoration: underline; }
  .ui__logo__copy.-subsection {
    margin-left: 35px; }
    .ui__logo__copy.-subsection:before {
      transform: scaleY(0);
      transition: transform 0.7s; }
  .ui__logo__copy.-show {
    transform: translateY(0%);
    display: inline-block; }
    .ui__logo__copy.-show:before {
      transform: scaleY(1); }

.ui__logo__copy:before {
  content: '';
  display: block;
  position: absolute;
  left: -20px;
  top: 5px;
  height: 15px;
  width: 1px;
  background-color: rgba(255, 255, 255, 0.6); }

.ui .nav {
  display: none; }

.ui__dragtoexplore {
  position: absolute;
  width: 250px;
  margin-left: -125px;
  top: 70%;
  left: 50%;
  text-align: center; }

.ui__dragtoexploretitle {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  margin-bottom: 10px; }

.ui__hamburger {
  display: inline-block;
  position: absolute;
  right: 30px;
  top: 20px;
  z-index: 10;
  will-change: transform;
  transform: translateX(100px); }
  .ui__hamburger__lines {
    box-sizing: border-box;
    display: inline-block; }
  .ui__hamburger__line {
    display: block;
    width: 25px;
    height: 1px;
    background-color: #fff;
    margin-bottom: 5px;
    -ms-transform-origin: 12.5px 0.5px;
    /* IE 9 */
    -webkit-transform-origin: 12.5px 0.5px;
    /* Chrome, Safari, Opera */
    transform-origin: 12.5px 0.5px;
    -webkit-transform: translateY(0) translateZ(0);
    transform: translateY(0) translateZ(0);
    transition: transform 0.3s; }
    .ui__hamburger__line.-bottom {
      margin-bottom: 0px; }
  .ui__hamburger.-open .ui__hamburger__line.-top {
    -webkit-transform: translateY(6px) rotate(45deg);
    -ms-transform: translateY(6px) rotate(45deg);
    transform: translateY(6px) rotate(45deg); }
  .ui__hamburger.-open .ui__hamburger__line.-middle {
    opacity: 0; }
  .ui__hamburger.-open .ui__hamburger__line.-bottom {
    -webkit-transform: translateY(-6px) rotate(-45deg);
    -ms-transform: translateY(-6px) rotate(-45deg);
    transform: translateY(-6px) rotate(-45deg); }
  @media (max-width: 800px) {
    .ui__hamburger {
      right: 20px;
      top: 20px;
      opacity: 0.8; } }

/** Disable events on the lines so target is the parent on event progation */
.ui__hamburger__lines {
  pointer-events: none; }

.ui__explore {
  padding-left: 35px;
  display: inline-block;
  position: relative; }
  .ui__explore:before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    left: 0px;
    top: 0px;
    transition: transform 0.35s, opacity 0.35s;
    border: 4px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    animation: pulse 2s infinite; }
  .ui__explore:after {
    content: '';
    display: block;
    width: 1px;
    height: 40px;
    position: absolute;
    left: 10px;
    top: 9px;
    background-color: #fff;
    animation: linedraw 4s infinite;
    transform: scaleY(0);
    opacity: 0;
    transform-origin: 50% 0%;
    transition: transform 0.4s; }
  .ui__explore.-lineclickedxx:after {
    animation: linedrawout 0.8s 1; }
  .ui__explore:hover:before {
    transform: scale(1.2); }
  .ui__explore .ui__explore__progress {
    position: absolute;
    display: block;
    bottom: 0px;
    left: 34px;
    width: 115px;
    height: 1px;
    transform: scaleX(0);
    background-color: white;
    transform-origin: 0% 50%; }
  .ui__explore > * {
    pointer-events: none; }

.ui__button {
  padding: 15px 30px;
  border: 1px solid #000;
  display: inline-block; }

@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); }
  70% {
    -moz-box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
  100% {
    -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } }
@keyframes linedraw {
  0% {
    transform: scaleY(0);
    opacity: 0;
    transform-origin: 50% 0%; }
  10% {
    transform: scaleY(1);
    opacity: 1;
    transform-origin: 50% 0%; }
  20% {
    transform: scaleY(0) translateY(40px);
    opacity: 0;
    transform-origin: 50% 100%; }
  100% {
    transform: scaleY(0) translateY(40px);
    opacity: 0;
    transform-origin: 50% 100%; } }
@keyframes linedrawout {
  0% {
    transform: scaleY(0);
    opacity: 0;
    transform-origin: 50% 0%; }
  80% {
    transform: scaleY(10);
    opacity: 0.3;
    transform-origin: 50% 0%; }
  100% {
    transform: scaleY(10);
    opacity: 0;
    transform-origin: 50% 0%; } }
.ui__hamburger,
.ui__paging__item {
  display: none !important; }

.ui__logo {
  pointer-events: none !important;
  display: none !important; }

.temp_footer {
  font-size: 10px;
  text-transform: uppercase;
  position: fixed;
  bottom: 20px;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  z-index: 2;
  width: 100%;
  opacity: 0; }
  @media (max-width: 1000px) {
    .temp_footer {
      display: none; } }

.navmenu {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  visibility: hidden; }
  .navmenu.-open .navmenu__background {
    transform: scaleY(1); }
  .navmenu.-active {
    visibility: visible; }
  @media (max-width: 700px) {
    .navmenu br.-desktoponly {
      display: none; } }

.navmenu__background {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-color: black;
  background-image: url(/img/info/common/background.jpg);
  background-size: cover;
  transform-origin: 100% 0%;
  opacity: 0; }

.navmenu__inner__background {
  z-index: 1;
  position: absolute;
  right: 0px;
  top: 0px;
  background-color: black;
  opacity: 0.15;
  width: 460px;
  height: 100%;
  z-index: 2;
  transform-origin: 100% 50%; }

.navmenu__content {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 2; }

.navmenu__contact {
  position: absolute;
  bottom: 200px;
  left: 85%; }
  @media (max-width: 700px) {
    .navmenu__contact {
      bottom: 20px;
      left: 5%; } }

.navmenu__link img {
  width: 100%; }

.navmenu__contact__title {
  color: #fff;
  text-transform: uppercase;
  font-size: 16px;
  margin-bottom: 15px;
  font-weight: 400; }
  @media (max-width: 700px) {
    .navmenu__contact__title {
      margin-bottom: 0px; } }

.navmenu__contact__email,
.navmenu__contact__copy {
  font-size: 14px;
  color: #cccccc;
  font-weight: 300; }

.navmenu__link.-departmentlink {
  width: 25%;
  box-sizing: border-box;
  position: absolute;
  left: 5%;
  top: 200px;
  height: 130px;
  padding: 20px;
  text-decoration: none; }
  .navmenu__link.-departmentlink.-spaces {
    left: 35%; }
  .navmenu__link.-departmentlink > * {
    pointer-events: none; }
  @media (max-width: 700px) {
    .navmenu__link.-departmentlink {
      width: 90%;
      top: 60px;
      padding: 10px;
      height: auto; }
      .navmenu__link.-departmentlink.-spaces {
        left: 5%;
        top: 160px; } }

.navmenu__link:after {
  content: '';
  display: block;
  position: absolute;
  background-color: rgba(255, 255, 255, 0.1);
  z-index: -1;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  transform: scaleY(0);
  transition: transform 0.25s;
  transform-origin: 0% 50%; }
.navmenu__link:hover:after, .navmenu__link.-selected:after {
  transform: scaleY(1); }

.navmenu__link__title,
.navmenu__link__subtitle {
  color: #fff;
  text-decoration: none;
  display: inline-block; }

.navmenu__link__title {
  font-size: 80px;
  line-height: 80px;
  font-weight: 300;
  text-transform: uppercase;
  margin-bottom: 10px; }
  @media (max-width: 700px) {
    .navmenu__link__title {
      font-size: 40px;
      line-height: 40px;
      margin-bottom: 5px; } }

.navmenu__infolinks {
  width: 10%;
  position: absolute;
  left: 85%;
  top: 200px;
  margin-left: -10px; }
  @media (max-width: 700px) {
    .navmenu__infolinks {
      left: 5%;
      margin-left: 0px;
      top: 260px; }
      .navmenu__infolinks .navmenu__link.-infolink {
        font-size: 16px;
        margin-bottom: 0px;
        padding: 6px; } }

.navmenu__link.-infolink {
  display: block;
  position: relative;
  box-sizing: border-box;
  padding: 10px;
  margin-bottom: 8px;
  color: #fff;
  text-decoration: none;
  font-size: 24px;
  font-weight: 600; }

.navmenu__back {
  position: fixed;
  top: 80px;
  left: 22px;
  width: 34px;
  height: 34px;
  background-image: url(/img/ui/back.png);
  background-size: 100% 100%;
  z-index: 3;
  display: block;
  opacity: 0; }

body.-dragcursor {
  cursor: none; }
  body.-dragcursor .ui__cursordrag {
    visibility: visible;
    display: block; }

body.-standardscroller {
  cursor: auto !important; }
  body.-standardscroller .ui__cursordrag {
    display: none !important; }

body.-darkcursor .ui__cursordrag {
  border-color: #666; }
  body.-darkcursor .ui__cursordrag:before {
    border-color: transparent #666 transparent transparent; }
  body.-darkcursor .ui__cursordrag:after {
    border-color: transparent transparent transparent #666; }
  body.-darkcursor .ui__cursordrag.-rotate:before {
    border-color: transparent transparent transparent #666; }
  body.-darkcursor .ui__cursordrag.-rotate:after {
    border-color: #666 transparent transparent transparent; }

.ui__cursordrag {
  pointer-events: none;
  position: fixed;
  display: none;
  width: 40px;
  height: 40px;
  z-index: 10005;
  margin-left: -20px;
  margin-top: -20px;
  -webkit-transform: translate3d(0, 0, 0);
  will-change: transform; }
  .ui__cursordrag.-pressed .ui__cursordrag__display__arrow.-left,
  .ui__cursordrag.-pressed .ui__cursordrag__display__arrow.-right {
    opacity: 1; }
  .ui__cursordrag.-pressed .ui__cursordrag__display {
    transform: scale(1.7); }
  .ui__cursordrag.-pressed.-vertical .ui__cursordrag__display__arrow.-left,
  .ui__cursordrag.-pressed.-vertical .ui__cursordrag__display__arrow.-right {
    opacity: 0; }
  .ui__cursordrag.-pressed.-vertical .ui__cursordrag__display__arrow.-up,
  .ui__cursordrag.-pressed.-vertical .ui__cursordrag__display__arrow.-down {
    opacity: 1; }
  .ui__cursordrag.-pressed.-both .ui__cursordrag__display__arrow.-left,
  .ui__cursordrag.-pressed.-both .ui__cursordrag__display__arrow.-right,
  .ui__cursordrag.-pressed.-both .ui__cursordrag__display__arrow.-up,
  .ui__cursordrag.-pressed.-both .ui__cursordrag__display__arrow.-down {
    opacity: 1; }
  .ui__cursordrag.-hidden .ui__cursordrag__display {
    transition: transform 0.6s, opacity 0.6s;
    transform: scale(0) !important;
    opacity: 0; }
  .ui__cursordrag.-intro {
    visibility: visible;
    display: block; }
    .ui__cursordrag.-intro .ui__cursordrag__display {
      transition: transform 0.6s, background-color 0.3s linear;
      transform: scale(0.14) !important;
      background-color: #fff !important; }
    .ui__cursordrag.-intro.-introhover .ui__cursordrag__display {
      transform: scale(1) !important;
      background-color: rgba(255, 255, 255, 0) !important; }

.ui__cursordrag__display {
  border-radius: 50%;
  border: 2px solid #fff;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  transform: scale(1);
  transform-origin: 50% 50%;
  transition: transform 0.3s, opacity 0.3s;
  	/*&:before,
  	&:after
  	{
  		position: absolute;
  		content:'';
  		display:block;
  		width: 0;
  		height: 0;
  		border-style: solid;
  		top: 50%;
  		margin-top: -$halfSize;
  		transition: opacity 0.2s;
  		opacity: 0;
  		//-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
  		//-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
  		//box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
  	}
  
  	&:before {
  		left: -$triSize;
  		border-width: $halfSize $halfSize $halfSize 0;
  		border-color: transparent #ffffff transparent transparent;
  	}
  
  
  
  	&:after {
  		right: -$triSize;
  		border-width: $halfSize 0 $halfSize $halfSize;
  		border-color: transparent transparent transparent #ffffff;
  	}
  	*/ }

.ui__cursordrag__display__arrow {
  position: absolute;
  width: 10px;
  height: 5px;
  background-image: url(/img/ui/mouse-arrow.png);
  background-size: 100% 100%;
  opacity: 0; }
  .ui__cursordrag__display__arrow.-up {
    left: 50%;
    top: -8px;
    margin-left: -5px; }
  .ui__cursordrag__display__arrow.-down {
    bottom: -9px;
    left: 50%;
    margin-left: -5px;
    transform: rotate(180deg); }
  .ui__cursordrag__display__arrow.-left, .ui__cursordrag__display__arrow.-right {
    top: 50%;
    margin-top: -2px; }
  .ui__cursordrag__display__arrow.-left {
    left: -12px;
    transform: rotate(-90deg); }
  .ui__cursordrag__display__arrow.-right {
    right: -12px;
    transform: rotate(90deg); }

.section-march-for-giants .ui__cursordrag__display {
  border-color: #ccc; }
.section-march-for-giants .ui__cursordrag__display__arrow {
  background-image: url(/img/ui/mouse-arrow-grey.png); }

.preload {
  z-index: 10001;
  width: 100%;
  height: 100%;
  background-color: black;
  left: 0px;
  top: 0px;
  position: fixed; }
  .preload .home__logo__image {
    opacity: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    display: none; }
  .preload .home__logo__image.-masked {
    position: absolute;
    top: 0px;
    left: 135px;
    overflow: hidden;
    width: 0px;
    display: none; }

.preload__copy {
  color: #fff;
  text-align: center;
  padding-top: 50px; }

.lazy-load-image {
  position: relative;
  height: auto; }
  .lazy-load-image:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 100%; }
  .lazy-load-image > * {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; }
  .lazy-load-image.-ratio-16-9:before {
    padding-top: 56.25%; }
  .lazy-load-image.-ratio-974-582:before {
    padding-top: 59.75359%; }
  .lazy-load-image.-ratio-539-577:before {
    padding-top: 107.05009%; }
  .lazy-load-image img {
    width: 100%;
    height: 100%; }

.content-row {
  line-height: normal;
  padding-top: 60px;
  padding-bottom: 60px; }

.content-row__innerwrapper {
  width: 1600px;
  margin: auto; }

.copy-media > * {
  display: inline-block;
  float: left;
  width: 65%; }
.copy-media.-media-align-right > * {
  float: right; }

.copy-media__copy {
  display: block;
  color: #000;
  overflow: auto;
  float: none !important;
  width: auto !important;
  padding-bottom: 50px; }

.grid.-cols-4 .grid__item {
  width: 25%; }
.grid.-cols-5 .grid__item {
  width: 20%; }
.grid.-cols-8 .grid__item {
  width: 12.1vw; }
.grid img, .grid video {
  width: 100%; }

.grid__item {
  float: left;
  box-sizing: border-box;
  padding: 1%; }

.ui__paging {
  position: fixed;
  bottom: 70px;
  left: 50%;
  transform: translateX(-50%);
  width: 500px;
  z-index: 11;
  will-change: transform; }
  @media (max-width: 800px) {
    .ui__paging {
      width: 70%;
      max-width: 300px;
      bottom: 30px; } }
  .ui__paging.-items-3 {
    width: 200px; }
  .ui__paging.-items-2 .ui__paging__item {
    width: 48.5%;
    margin-right: 3%; }
  .ui__paging.-items-3 .ui__paging__item {
    width: 30%;
    margin-right: 5%; }
  .ui__paging.-items-4 .ui__paging__item {
    width: 21.25%;
    margin-right: 5%; }
  .ui__paging.-items-5 .ui__paging__item {
    width: 17.6%;
    margin-right: 3%; }
  .ui__paging.-items-6 .ui__paging__item {
    width: 14.16667%;
    margin-right: 3%; }
  .ui__paging.-guide .ui__paging__title {
    opacity: 1; }

.ui__paging__home {
  opacity: 0;
  transition: 0.3s opacity linear; }
  .ui__paging__home.-show {
    opacity: 1; }

.ui__paging__link {
  position: absolute;
  top: -15px;
  height: 30px;
  left: 0px;
  width: 100%;
  z-index: 3;
  font-size: 0px; }
  .ui__paging__link:hover {
    cursor: pointer; }

.ui__paging__item {
  position: relative;
  float: left;
  height: 1px;
  transform-origin: 0% 50%; }
  .ui__paging__item:last-child {
    margin-right: 0% !important; }
  .ui__paging__item.-selected .ui__paging__bar {
    transform: scaleX(1); }
  .ui__paging__item.-reverse .ui__paging__bar {
    transform-origin: 100% 50%;
    transition: transform 0.3s 0.1s; }

.ui__paging__track,
.ui__paging__bar {
  position: absolute;
  left: 0px;
  top: 0px;
  height: 100%;
  width: 100%; }

.ui__paging__track {
  background-color: rgba(255, 255, 255, 0.15); }

.ui__paging__bar {
  transform: scaleX(0);
  background-color: rgba(255, 255, 255, 0.4);
  transform-origin: 0% 50%;
  transition: transform 0.3s 0.1s; }

.ui__paging__title {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 700;
  text-align: center;
  position: relative;
  top: -10px;
  opacity: 0;
  transition: opacity 0.4s;
  letter-spacing: 1px; }
  .ui__paging__title .dud {
    color: rgba(255, 255, 255, 0.3); }

.info .ui__paging__info {
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 500px; }
  .info .ui__paging__info .ui__paging__link {
    font-size: 12px;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    text-transform: uppercase;
    transition: color 0.3s;
    font-weight: 600; }
    .info .ui__paging__info .ui__paging__link:hover {
      color: white; }
  .info .ui__paging__info .ui__paging__track,
  .info .ui__paging__info .ui__paging__bar {
    top: 9px; }

.ui__paging__item.-selected .ui__paging__link {
  color: white; }

.scrollbar {
  position: fixed;
  top: 0px;
  right: 0px;
  z-index: 10005;
  height: 100%;
  width: 40px;
  opacity: 0;
  transition: opacity 0.3s; }
  .scrollbar:hover .scrollbar__bar__display, .scrollbar.-dragging .scrollbar__bar__display {
    transform: translateX(-5px);
    background-color: #999999; }
  .scrollbar.-active {
    opacity: 1; }

body.-standardscroller .scrollbar {
  display: none !important; }

.scrollbar__bar {
  position: absolute;
  top: 5px;
  right: 0px;
  width: 100%;
  z-index: 2; }

.scrollbar__track {
  top: 0px;
  right: 0px;
  height: 100%;
  width: 0px;
  position: absolute;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.3); }

.scrollbar__bar__display {
  position: absolute;
  top: 5px;
  right: 0px;
  width: 8px;
  height: 100%;
  background-color: rgba(153, 153, 153, 0.7);
  border-radius: 6px;
  transform: translateX(0px);
  transition: transform 0.3s, background-color 0.3s;
  transform-origin: 100% 50%; }

.dragable-embed-video {
  position: relative; }

.dragable-embed-video__dragarea,
.dragable-embed-video__interactivearea {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  z-index: 2; }

.dragable-embed-video__dragarea {
  height: 80%; }

.dragable-embed-video__interactivearea {
  height: 20%;
  top: 80%; }

.dragable-embed-video.-debug .dragable-embed-video__dragarea {
  background-color: rgba(0, 128, 0, 0.5); }
.dragable-embed-video.-debug .dragable-embed-video__interactivearea {
  background-color: rgba(255, 0, 0, 0.5); }

.dragpanel {
  background-color: #fff;
  overflow: hidden;
  width: 100%;
  position: relative;
  padding-bottom: 60px; }

.dragpanel__draw {
  font-size: 0;
  line-height: 0px;
  white-space: nowrap;
  transform: translateX(0px);
  padding-left: 100px; }
  @media (max-width: 800px) {
    .dragpanel__draw {
      height: 360px; }
      .dragpanel__draw > * {
        height: 100%; }
      .dragpanel__draw img {
        height: 100%;
        width: auto; } }

.dragpanel__item {
  display: inline-block; }

.dragpanel__guide {
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%); }

.about {
  width: 100%; }

.about,
.info__subsection {
  pointer-events: none;
  position: relative;
  top: 0px;
  left: 0px;
  width: 100%;
  height: auto;
  display: none;
  z-index: 10001; }
  .about.-active,
  .info__subsection.-active {
    display: block;
    transform: translateX(0%); }

@media (max-width: 800px) {
  .info__subsection {
    padding-left: 30px;
    padding-right: 30px;
    box-sizing: border-box; } }
body.-standardscroller {
  overflow-y: auto; }
  body.-standardscroller .about {
    overflow-x: hidden; }
  body.-standardscroller .about.-transitionin,
  body.-standardscroller .info__subsection.-transitionin {
    position: fixed; }
  body.-standardscroller .about.-active,
  body.-standardscroller .info__subsection.-active {
    position: absolute;
    height: auto; }

body.-standardscroller .info__subsection.-active {
  position: relative; }

.info__background {
  background-image: url(/img/info/common/background.jpg);
  background-size: cover;
  position: fixed;
  z-index: 1;
  width: 150%;
  height: 100%; }

.about {
  position: absolute;
  transform: translateX(100%); }

.info__subsection {
  z-index: 10000; }
  .info__subsection.-contact .info__subsection__content {
    max-width: 100%; }

.info__subsection__content,
.info__subsection__innercontent {
  margin: auto;
  max-width: 1300px; }

.info__subsection__content {
  padding-top: 200px; }
  .info__subsection__content img {
    width: 100%;
    height: auto; }

#info-paging {
  transform: translate(-50%, -100px);
  transition: transform 0.3s, background-color 0.3s;
  z-index: 3;
  background-color: rgba(0, 0, 0, 0.1);
  bottom: auto;
  height: 50px;
  border-radius: 40px;
  padding-left: 20px;
  padding-right: 20px; }
  #info-paging.-active.-htmlloaded.-scrollshow {
    transform: translate(-50%, -30px);
    transition-delay: 0.3s; }
  #info-paging .ui__paging__item {
    top: 24px; }
  #info-paging.-scrolled {
    background-color: rgba(0, 0, 0, 0.87); }
  @media (max-width: 900px) {
    #info-paging {
      display: none; } }

.contact__googlemap {
  width: 100%;
  height: 700px; }

.googlemap__traveltype {
  display: inline-block;
  width: 80px;
  height: 80px;
  margin-right: 20px;
  background-size: 100% 100%;
  border: 2px solid #fff;
  border-radius: 50%; }
  .googlemap__traveltype.-driving {
    background-image: url(/img/ui/travel-types/car.png); }
  .googlemap__traveltype.-bicycling {
    background-image: url(/img/ui/travel-types/cycle.png); }
  .googlemap__traveltype.-bus {
    background-image: url(/img/ui/travel-types/public.png); }
  .googlemap__traveltype.-walking {
    background-image: url(/img/ui/travel-types/walking.png);
    margin-right: 0px; }

.contact__googlemap__wrapper {
  position: relative; }

.contact__googlemap__directions {
  position: absolute;
  z-index: 2;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.9);
  border-radius: 4px;
  padding: 20px;
  text-align: center;
  width: 500px;
  height: 70px; }

.googlemap__autocomplete {
  width: 100%;
  height: 40px; }

.googlemap__autocomplete {
  display: none;
  background-color: #181818;
  color: #fff;
  border: none;
  font-weight: bold;
  font-size: 18px;
  padding: 8px;
  position: absolute;
  top: 75px;
  height: 60px;
  left: 5%;
  width: 90%; }

.googlemap__traveltypes {
  position: absolute;
  margin-top: 10px;
  width: 100%;
  top: 60px;
  left: 0px;
  opacity: 0;
  pointer-events: none; }
  .googlemap__traveltypes.-active {
    pointer-events: all;
    cursor: pointer; }

.googlemap__title {
  color: #fff;
  font-size: 18px; }

canvas {
  position: fixed;
  z-index: -1;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px; }

.home {
  position: fixed;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  overflow: hidden;
  display: none; }
  .home.-active {
    display: block; }

.home__intro {
  display: none !important;
  position: absolute;
  font-weight: 300;
  font-size: 21px;
  text-transform: uppercase;
  z-index: 10;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  max-width: 750px;
  left: 50%;
  margin-left: -375px;
  bottom: 200px;
  will-change: transform;
  letter-spacing: 8px;
  line-height: 31px;
  transition: opacity 0.3s linear, transform 0.3s linear;
  opacity: 0;
  transform: translateY(30px); }
  .home__intro.-show {
    opacity: 1;
    transform: translateY(0px);
    transform-delay: 0.2s; }
  @media (max-width: 800px) {
    .home__intro {
      font-size: 16px;
      line-height: 21px;
      width: 90%;
      max-width: 400px;
      bottom: 150px;
      letter-spacing: 4px; } }
  @media (max-width: 500px) {
    .home__intro {
      font-size: 14px;
      line-height: 20px;
      letter-spacing: 3px; } }
  @media (max-width: 400px) {
    .home__intro {
      bottom: 130px; } }

.home__screens,
.home__spaces {
  display: inline-block;
  position: absolute;
  left: 0px;
  top: 50%;
  margin-top: -100px;
  transition: opacity 0.2s;
  z-index: 10; }
  .home__screens.-show,
  .home__spaces.-show {
    opacity: 1; }
  @media (max-width: 800px) {
    .home__screens,
    .home__spaces {
      width: 80%;
      top: 60%; }
      .home__screens img,
      .home__spaces img {
        width: 100%; } }

.home__screens {
  margin-left: -15px; }

.home__spaces {
  text-align: right; }

.home__dragtoexplore {
  position: absolute;
  z-index: 5;
  bottom: 150px;
  top: auto; }

.home__explorelink {
  color: #fff !important;
  margin-top: 20px; }

body.-clearui .home__explorelink,
body.-clearui .ui__explore {
  color: #fff !important;
  margin-top: 30px;
  padding: 15px 50px;
  min-width: 190px;
  box-sizing: border-box;
  text-align: center;
  /* border-radius: 6px; */
  border: 1px solid #ffffff73;
  font-size: 14px;
  transition: 0.3s background-color, 0.3s color;
  letter-spacing: 2px; }
  body.-clearui .home__explorelink:before,
  body.-clearui .ui__explore:before {
    display: none; }
  body.-clearui .home__explorelink:hover,
  body.-clearui .ui__explore:hover {
    color: #000 !important;
    background-color: #fff; }
body.-clearui .worktitle__link {
  margin-top: 20px;
  padding: 15px 40px; }

#home-paging {
  opacity: 0; }
  #home-paging.-show .ui__paging__title {
    opacity: 1; }
  #home-paging .ui__paging__item.-index0 .ui__paging__bar {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#8f67d7+0,fb5885+100 */
    background: #8f67d7;
    /* Old browsers */
    background: -moz-linear-gradient(left, #8f67d7 0%, #fb5885 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #8f67d7 0%, #fb5885 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #8f67d7 0%, #fb5885 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8f67d7', endColorstr='#fb5885',GradientType=1 );
    /* IE6-9 */ }
  #home-paging .ui__paging__item.-index2 {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#00ccff+0,01f3f4+100 */ }
    #home-paging .ui__paging__item.-index2 .ui__paging__bar {
      background: #00ccff;
      /* Old browsers */
      background: -moz-linear-gradient(left, #00ccff 0%, #01f3f4 100%);
      /* FF3.6-15 */
      background: -webkit-linear-gradient(left, #00ccff 0%, #01f3f4 100%);
      /* Chrome10-25,Safari5.1-6 */
      background: linear-gradient(to right, #00ccff 0%, #01f3f4 100%);
      /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ccff', endColorstr='#01f3f4',GradientType=1 );
      /* IE6-9 */ }

.home__action__hitarea {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150px;
  height: 150px;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 0);
  border-radius: 50%; }

.home__action {
  position: fixed;
  top: 50%;
  left: 50%;
  display: inline-block;
  z-index: 3;
  text-align: center;
  color: #fff; }

.home__action__button__center {
  transform: translate(-50%, -50%); }

.home__action__button__wrapper {
  width: 150px;
  height: 150px;
  -webkit-animation: spin 15s linear infinite;
  -moz-animation: spin 15s linear infinite;
  animation: spin 15s linear infinite; }

.home__action__button {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 2px dashed rgba(255, 255, 255, 0.2);
  display: block;
  box-sizing: border-box;
  font-size: 12px;
  transition: color 0.3s, background-color 0.3s, transform 0.5s, border-color 0.5s; }
  .home__action__button:hover {
    border-color: rgba(255, 255, 255, 0); }

.home__action__button__wrapper.-small {
  width: 100px;
  height: 100px;
  margin-top: 30px; }
  .home__action__button__wrapper.-small .home__action__button {
    width: 100px;
    height: 100px;
    border: 2px dashed rgba(255, 255, 255, 0.5); }
    .home__action__button__wrapper.-small .home__action__button:hover {
      border-color: rgba(255, 255, 255, 0); }

.home__explore__area {
  text-align: center;
  width: 100px;
  display: inline-block; }
  .home__explore__area p {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    display: block;
    margin-top: 15px;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none; }
  .home__explore__area:hover {
    cursor: pointer !important; }
    .home__explore__area:hover p {
      color: white; }

.home__action__text {
  position: fixed;
  z-index: 10002;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 100px);
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  transition: transform 0.3s, color 0.3s;
  font-weight: bold;
  letter-spacing: 1px; }
  .home__action__text.-hover {
    color: rgba(255, 255, 255, 0.6); }
  .home__action__text .dud {
    color: rgba(255, 255, 255, 0.2); }
  .home__action__text .text__cursor {
    display: inline-block;
    margin-left: 5px;
    -webkit-animation: flickerAnimation .5s infinite;
    -moz-animation: flickerAnimation .5s infinite;
    -o-animation: flickerAnimation .5s infinite;
    animation: flickerAnimation .5s infinite; }

.home__explore__area__label {
  position: relative;
  top: -76px;
  letter-spacing: 1px;
  font-weight: bold;
  font-size: 12px;
  pointer-events: none; }

@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg); } }
@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }
@keyframes flickerAnimation {
  0% {
    opacity: 1; }
  50% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@-o-keyframes flickerAnimation {
  0% {
    opacity: 1; }
  50% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@-moz-keyframes flickerAnimation {
  0% {
    opacity: 1; }
  50% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@-webkit-keyframes flickerAnimation {
  0% {
    opacity: 1; }
  50% {
    opacity: 0; }
  100% {
    opacity: 1; } }
.work__wrapper {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0%;
  overflow: hidden;
  z-index: 11;
  pointer-events: none;
  visibility: hidden; }

.work__content {
  width: 100%;
  min-height: 100%;
  background-color: white;
  z-index: 10;
  position: relative;
  transform: translateY(290px);
  width: 100%;
  margin: auto; }
  .work__content.-show {
    transform: translateY(0%); }
  .work__content video {
    width: 100%;
    height: auto; }

.work__content__spacer {
  height: 1000px;
  width: 100%; }

.work__content__wrapper {
  max-width: 1400px;
  margin: auto; }

.work__content__close {
  position: fixed;
  z-index: 11;
  right: 20px;
  top: 10px;
  color: #fff !important;
  opacity: 0; }

.work__content__title {
  font-size: 50px;
  font-weight: 300;
  padding-top: 70px;
  color: #1a1a1a; }

.work__content__intro {
  font-size: 16px;
  line-height: 28px;
  color: #2e2e2e;
  max-width: 800px;
  margin-top: 30px;
  font-family: 'Libre Baskerville', serif; }

.work__slider {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: 4;
  background-image: url(/img/home/tmp/screens-bg.jpg);
  background-size: cover;
  visibility: hidden; }
  .work__slider.-clone {
    background-image: none;
    transform: translateY(100%); }

.work__slider__intro {
  font-weight: 400;
  font-size: 70px;
  line-height: 64px;
  z-index: 3;
  position: absolute;
  width: 100%;
  margin: auto;
  top: 0%;
  text-align: left;
  color: #fff;
  box-sizing: border-box;
  will-change: transform, opacity;
  transform: perspective(0px); }

.work__slider__intro__copy {
  max-width: 1100px;
  width: 100%;
  margin-left: 120px; }

.work__slider__intro__selectedworks {
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 10px;
  text-transform: uppercase; }
  @media (max-width: 800px) {
    .work__slider__intro__selectedworks {
      font-size: 10px; } }

.work__slider__intro__selectedworks.-date {
  color: #666;
  margin-left: 25px; }

.work__slider__intro {
  font-size: 36px;
  line-height: 70px;
  font-weight: 400;
  text-transform: uppercase; }
  .work__slider__intro .-bold {
    font-weight: 400; }
  @media (max-width: 800px) {
    .work__slider__intro {
      margin-top: 20px;
      font-size: 18px;
      line-height: 34px;
      width: 85%;
      left: 7.5%;
      top: 20% !important; } }

.work__slider__intro {
  top: 32%; }

.work__slider__dragtoexplore {
  opacity: 0; }

.section-work .work {
  display: block; }

.work {
  position: fixed;
  overflow: hidden;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  min-height: 100%;
  z-index: 10;
  visibility: hidden;
  display: none; }
  .work.-active {
    visibility: visible;
    display: block; }

.worktiles {
  max-width: 1400px;
  margin: auto; }

.worktile {
  float: left;
  width: 50%;
  position: relative;
  z-index: 1;
  display: none;
  position: relative;
  height: auto; }
  .worktile:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 100%; }
  .worktile > * {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; }
  .worktile:hover .worktile__bg {
    transform: scale(1.03); }
  .worktile.-right-tile .worktile__bg {
    left: 5%; }
  .worktile.-active {
    z-index: 2; }
    .worktile.-active .worktile__bg {
      transition: initial;
      transform-origin: 0% 0%; }
  .worktile.-total-darkness:before {
    padding-top: 47.61905%; }
  .worktile.-march-for-giants:before {
    padding-top: 66.22517%; }
  .worktile.-march-for-giants .worktile__bg {
    height: 90%;
    top: 10%; }
  .worktile.-market-masters {
    float: right; }
  .worktile.-toy-town {
    width: 100%;
    clear: both; }
    .worktile.-toy-town:before {
      padding-top: 33.33333%; }

.worktile__bg {
  width: 95%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  background-position: 50% 50%;
  background-size: cover;
  transition: transform 0.3s; }

.worktile__layer {
  width: 100%;
  height: 100%;
  position: relative;
  top: 0px;
  left: 0px; }
  .worktile__layer.-layer1 {
    position: relative;
    height: auto; }

.worktile__title,
.worktile__subtitle {
  position: absolute;
  top: 20px;
  left: 20px;
  color: #fff;
  z-index: 3;
  font-size: 18px; }

.worktile__subtitle {
  opacity: 0; }

.worktitle__copy {
  position: absolute;
  top: 45%;
  will-change: transform;
  opacity: 0;
  transition: opacity 0.35s;
  z-index: 10;
  display: none; }
  .worktitle__copy.-show {
    opacity: 1; }
    .worktitle__copy.-show .worktitle__title,
    .worktitle__copy.-show .worktitle__subtitle,
    .worktitle__copy.-show .worktitle__link {
      transform: translateY(0px); }
    .worktitle__copy.-show .worktitle__link {
      transition-delay: 0.2s;
      opacity: 1; }
  @media (max-width: 1000px) and (orientation: portrait) {
    .worktitle__copy {
      top: 70px;
      width: 90%;
      left: -20px;
      max-width: 380px; }
      .worktitle__copy .worktitle__title {
        font-size: 10px;
        margin-bottom: 0px; }
      .worktitle__copy .worktitle__subtitle {
        font-size: 20px;
        line-height: 29px;
        margin-bottom: 24px; }
      .worktitle__copy br.mobile-only {
        display: inline !important; } }

br.mobile-only {
  display: none; }

.worktitle__title,
.worktitle__subtitle,
.worktitle__link {
  position: relative;
  transform: translateY(20px);
  transition: transform 0.35s, opacity 0.35s;
  color: #fff; }

.worktitle__title {
  font-size: 18px;
  text-transform: uppercase;
  font-weight: 400;
  margin-bottom: 20px;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 2px; }

.worktitle__subtitle {
  color: #fff;
  font-size: 32px;
  line-height: 50px;
  margin-bottom: 40px;
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 2px; }
  .worktitle__subtitle .-bold {
    font-weight: 800; }

.worktitle__link {
  opacity: 0; }

.worktitle__hitarea {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 650px;
  height: 650px;
  margin-top: -325px;
  margin-left: -325px;
  background-color: rgba(255, 0, 0, 0);
  z-index: 5;
  pointer-events: none; }

.work__title__image {
  width: 60%;
  max-width: 450px; }

* {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none; }

img {
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none !important; }

.selectEnable {
  -webkit-user-select: text;
  -khtml-user-select: text;
  -moz-user-select: text;
  -o-user-select: text;
  user-select: text; }

.video_temp {
  width: 100%;
  height: auto;
  position: fixed;
  bottom: -130%;
  left: 0px; }

.tile-bg {
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: -1; }

.project {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  visibility: hidden;
  display: none;
  z-index: 80; }
  .project.-active {
    visibility: visible;
    display: block; }

body .project {
  position: absolute; }

body.-standardscroller {
  overflow-y: auto; }
  body.-standardscroller .project {
    position: absolute; }

.project__content {
  line-height: 0px;
  position: relative;
  z-index: 2; }

.project__dynamic__content {
  background-color: #fff; }

.project__close,
.project__home {
  position: fixed;
  top: 30px;
  right: 110px;
  color: #fff;
  z-index: 10;
  transition: color 0.2s; }

.project__close,
.project__home {
  top: 18px;
  right: 80px;
  padding: 10px 35px 10px 50px;
  display: block;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 10px;
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: 10px 50%;
  transform: translateY(-150%);
  transition: transform 0.3s;
  text-align: center;
  text-decoration: none; }
  @media (max-width: 800px) {
    .project__close,
    .project__home {
      width: 40px;
      height: 40px;
      margin-left: -20px;
      background-size: 35px 35px;
      border-top-right-radius: 100px;
      border-top-left-radius: 100px; } }
  .project__close.-active.-show,
  .project__home.-active.-show {
    transform: translateY(0%);
    transition-delay: 0.3s; }
    @media (max-width: 800px) {
      .project__close.-active.-show,
      .project__home.-active.-show {
        transform: translateY(15px); } }
  .project__close:hover,
  .project__home:hover {
    background-color: black; }

.project__close {
  background-image: url(/img/ui/close-icon.png); }

.project__home {
  background-image: url(/img/ui/home-icon.png); }

.project__close__button {
  pointer-events: all; }
  .project__close__button:hover {
    cursor: pointer; }

.project__img__tmp {
  width: 100%;
  height: auto; }

.project__loading {
  position: fixed;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  z-index: 2;
  background-color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+1,000000+87&0.11+0,0.9+87 */
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.11) 0%, rgba(0, 0, 0, 0.12) 1%, rgba(0, 0, 0, 0.9) 87%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.11) 0%, rgba(0, 0, 0, 0.12) 1%, rgba(0, 0, 0, 0.9) 87%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.11) 0%, rgba(0, 0, 0, 0.12) 1%, rgba(0, 0, 0, 0.9) 87%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1c000000', endColorstr='#e6000000',GradientType=0 );
  /* IE6-9 */ }

.project__loading__text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 40px;
  font-weight: bold;
  color: #fff;
  display: none; }

.project__intro__title {
  color: #fff;
  font-size: 40px;
  position: absolute;
  bottom: 220px;
  left: 100px;
  font-weight: 700; }

.project__intro__subtitle {
  color: #fff;
  font-size: 36px;
  line-height: 46px;
  position: absolute;
  bottom: 115px;
  left: 100px;
  color: #cccccc; }

.scrolldown-icon {
  position: absolute;
  bottom: 70px;
  left: 50%;
  margin-left: -20px;
  opacity: 0.7; }
  .scrolldown-icon .label {
    position: absolute;
    top: 0px;
    left: -5px;
    font-size: 12px; }
  .scrolldown-icon svg {
    display: block;
    margin: 2em auto; }
  .scrolldown-icon path.a1 {
    animation: arrow1 1.3s infinite;
    -webkit-animation: arrow1 1.3s infinite; }
  .scrolldown-icon path.a2 {
    animation: arrow2 1.3s infinite;
    -webkit-animation: arrow2 1.3s infinite; }
  .scrolldown-icon path.a3 {
    animation: arrow3 1.3s infinite;
    -webkit-animation: arrow3 1.3s infinite; }

/*animated scroll arrow animation*/
@-webkit-keyframes bounce {
  0% {
    -webkit-transform: translate(0, -5px);
    opacity: 0; }
  50% {
    opacity: 1; }
  100% {
    -webkit-transform: translate(0, 5px);
    opacity: 0; } }
@-moz-keyframes bounce {
  0% {
    -moz-transform: translate(0, -5px);
    opacity: 0; }
  50% {
    opacity: 1; }
  100% {
    -moz-transform: translate(0, 5px);
    opacity: 0; } }
@keyframes bounce {
  0% {
    transform: translate(0, -5px);
    opacity: 0; }
  50% {
    opacity: 1; }
  100% {
    transform: translate(0, 5px);
    opacity: 0; } }
.bounce {
  -moz-animation: bounce 1s ease-in-out infinite;
  -webkit-animation: bounce 1s ease-in-out infinite;
  animation: bounce 1s ease-in-out infinite; }

@keyframes arrow1 {
  0% {
    opacity: 0; }
  5% {
    opacity: 0; }
  80% {
    opacity: 1; }
  100% {
    opacity: 0; } }
@-webkit-keyframes arrow1 /*Safari and Chrome*/ {
  0% {
    opacity: 0; }
  5% {
    opacity: 0; }
  80% {
    opacity: 1; }
  100% {
    opacity: 0; } }
@keyframes arrow2 {
  0% {
    opacity: 0; }
  15% {
    opacity: 0; }
  80% {
    opacity: 1; }
  100% {
    opacity: 0; } }
@-webkit-keyframes arrow2 /*Safari and Chrome*/ {
  0% {
    opacity: 0; }
  15% {
    opacity: 0; }
  80% {
    opacity: 1; }
  100% {
    opacity: 0; } }
@keyframes arrow3 {
  0% {
    opacity: 0; }
  35% {
    opacity: 0; }
  80% {
    opacity: 1; }
  100% {
    opacity: 0; } }
@-webkit-keyframes arrow3 /*Safari and Chrome*/ {
  0% {
    opacity: 0; }
  35% {
    opacity: 0; }
  80% {
    opacity: 1; }
  100% {
    opacity: 0; } }
.project__intro__skills {
  position: absolute;
  right: 100px;
  bottom: 100px;
  font-size: 20px; }
  .project__intro__skills li {
    background-size: 30px 30px;
    background-position: 50% 0%;
    background-repeat: no-repeat;
    padding-top: 38px;
    display: inline-block;
    font-size: 14px;
    margin-right: 30px; }
    .project__intro__skills li.-unity {
      background-image: url(/img/ui/skills/unity.png); }
    .project__intro__skills li.-design {
      background-image: url(/img/ui/skills/design.png); }
    .project__intro__skills li.-ux {
      background-image: url(/img/ui/skills/ux.png); }
  .project__intro__skills:before {
    content: '';
    display: block;
    background-color: #fff;
    width: 25px;
    height: 2px;
    margin-bottom: 15px; }
  .project__intro__skills dt, .project__intro__skills dd {
    display: inline-block;
    font-size: 14px;
    line-height: 26px; }
  .project__intro__skills dt {
    font-weight: bold;
    text-transform: uppercase;
    margin-right: 5px; }
  .project__intro__skills dd {
    color: #cccccc; }
  .project__intro__skills a {
    color: #cccccc; }

.project__video__container {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  overflow: hidden; }
  @media (max-width: 900px) {
    .project__video__container {
      position: absolute; } }

.project__video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2000px;
  height: auto;
  transform: translate(-50%, -50%);
  z-index: 1;
  visibility: hidden; }

@media (max-width: 900px) {
  .project__headerspacer {
    height: 500px !important; } }

.media__video {
  width: 100%;
  height: auto; }

.project__video__row {
  padding-top: 0px;
  padding-bottom: 0px;
  background-color: #000; }
  .project__video__row.-white {
    background-color: #fff; }

.project__sidepaging {
  position: fixed;
  color: #fff;
  z-index: 10;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  transition: color 0.2s;
  will-change: transform; }
  .project__sidepaging.-dark .project__sidepaging__item {
    color: rgba(0, 0, 0, 0.6); }
    .project__sidepaging.-dark .project__sidepaging__item:before {
      background-color: rgba(0, 0, 0, 0.6); }
    .project__sidepaging.-dark .project__sidepaging__item.-selected {
      color: black; }
      .project__sidepaging.-dark .project__sidepaging__item.-selected:before {
        background-color: black; }
  @media (max-width: 1000px) {
    .project__sidepaging {
      display: none; } }

.project__sidepaging__item {
  font-size: 0px;
  font-weight: bold;
  display: block;
  box-sizing: border-box;
  line-height: 0px;
  height: 10px;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  position: relative; }
  .project__sidepaging__item:before {
    display: block;
    content: '';
    width: 25px;
    height: 1px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.6);
    transition: background-color 0.3s, transform 0.3s;
    transform-origin: 0% 50%;
    transform: scaleX(0.7);
    position: absolute;
    top: 0px;
    let: 0px; }
  .project__sidepaging__item.-selected {
    font-size: 12px;
    padding-top: 10px;
    height: 22px;
    color: white; }
    .project__sidepaging__item.-selected:before {
      transform: scaleX(1);
      background-color: white; }
  .project__sidepaging__item:hover {
    font-size: 12px;
    padding-top: 10px;
    height: 22px; }
    .project__sidepaging__item:hover:before {
      transform: scaleX(1); }

.project__block {
  padding: 80px 0px;
  background-color: #fff; }

.project__title {
  font-size: 40px;
  opacity: 0;
  margin-bottom: 30px;
  text-transform: uppercase; }

.project__copy {
  margin-bottom: 60px;
  font-size: 18px;
  line-height: 32px; }

.copy-media__copy {
  padding-left: 50px;
  padding-top: 50px;
  padding-right: 100px; }

#toys-grid .copy-media > * {
  width: 51%; }

.section-screens .dragpanel__item,
.section-march-for-giants .dragpanel__item {
  width: 25%; }

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