/* UTILITIES */
@font-face {
  font-family: 'Cera';
  src: url("fonts/CeraPRO-Regular.eot");
  src: url("fonts/CeraPRO-Regular.eot?#iefix") format("embedded-opentype"), url("fonts/CeraPRO-Regular.woff") format("woff"), url("fonts/CeraPRO-Regular.ttf") format("truetype");
  font-weight: 200;
  font-style: normal; }

@font-face {
  font-family: 'Cera';
  src: url("fonts/CeraPRO-RegularItalic.eot");
  src: url("fonts/CeraPRO-RegularItalic.eot?#iefix") format("embedded-opentype"), url("fonts/CeraPRO-RegularItalic.woff") format("woff"), url("fonts/CeraPRO-RegularItalic.ttf") format("truetype");
  font-weight: 200;
  font-style: italic; }

@font-face {
  font-family: 'Cera';
  src: url("fonts/CeraPRO-Medium.eot");
  src: url("fonts/CeraPRO-Medium.eot?#iefix") format("embedded-opentype"), url("fonts/CeraPRO-Medium.woff") format("woff"), url("fonts/CeraPRO-Medium.ttf") format("truetype");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'Cera';
  src: url("fonts/CeraPRO-MediumItalic.eot");
  src: url("fonts/CeraPRO-MediumItalic.eot?#iefix") format("embedded-opentype"), url("fonts/CeraPRO-MediumItalic.woff") format("woff"), url("fonts/CeraPRO-MediumItalic.ttf") format("truetype");
  font-weight: normal;
  font-style: italic; }

@font-face {
  font-family: 'Cera';
  src: url("fonts/CeraPRO-Bold.eot");
  src: url("fonts/CeraPRO-Bold.eot?#iefix") format("embedded-opentype"), url("fonts/CeraPRO-Bold.woff") format("woff"), url("fonts/CeraPRO-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal; }

@font-face {
  font-family: 'Cera';
  src: url("fonts/CeraPRO-BoldItalic.eot");
  src: url("fonts/CeraPRO-BoldItalic.eot?#iefix") format("embedded-opentype"), url("fonts/CeraPRO-BoldItalic.woff") format("woff"), url("fonts/CeraPRO-BoldItalic.ttf") format("truetype");
  font-weight: bold;
  font-style: italic; }

/* COLORS */
/* TYPOGRAPHY */
/* TRANSITIONS */
/* MEDIA QUERIES */
/* BASE STYLES */
html {
  box-sizing: border-box;
  position: relative;
  background-color: #e1ecff; }

*,
*:before,
*:after {
  /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
  box-sizing: inherit; }

body {
  font-family: "ff-tisa-web-pro", serif;
  font-size: 16px;
  background-color: #F0F5F5;
  position: relative;
  overflow-x: hidden; }
  @media screen and (min-width: 740px) {
    body {
      font-size: 20px; } }

#body {
  width: 100%;
  height: 100%; }
  #body .loading {
    background: #197380;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 1s ease;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center; }
    #body .loading img {
      max-width: 100px; }
  #body.not-loaded {
    overflow: hidden; }
    #body.not-loaded .loading {
      opacity: 1;
      pointer-events: auto; }
      #body.not-loaded .loading .preloader {
        position: absolute;
        left: 50%;
        top: 50%; }
        #body.not-loaded .loading .preloader span {
          height: 1em;
          width: 1em;
          display: block;
          position: absolute;
          left: 0;
          top: 0;
          border-radius: 50%;
          background: #fafafa;
          animation: wave 2s ease-in-out infinite; }
          #body.not-loaded .loading .preloader span:nth-child(1) {
            left: -4.5em;
            animation-delay: 0s; }
          #body.not-loaded .loading .preloader span:nth-child(2) {
            left: -1.5em;
            animation-delay: 0.1s; }
          #body.not-loaded .loading .preloader span:nth-child(3) {
            left: 1.5em;
            animation-delay: 0.2s; }
          #body.not-loaded .loading .preloader span:nth-child(4) {
            left: 4.5em;
            animation-delay: 0.3s; }

@keyframes wave {
  0%, 75%, 100% {
    transform: translateY(0) scale(1); }
  25% {
    transform: translateY(1.5em); }
  50% {
    transform: translateY(-1.5em) scale(1.1); } }

#page:focus {
  border: none;
  outline: none; }

#page-wrap {
  position: relative;
  z-index: 5;
  box-sizing: border-box;
  padding-top: 1px;
  padding-bottom: 0;
  transform: translateZ(0vw);
  background: linear-gradient(0deg, rgba(225, 236, 255, 0) 5%, #e1ecff 40%, white 100%);
  margin-bottom: -25vw;
  pointer-events: auto; }
  #page-wrap.static-wave {
    background: linear-gradient(0deg, rgba(225, 236, 255, 0) 5%, #e1ecff 40%, white 100%); }
  body:not(.water) #page-wrap {
    padding-bottom: 20vh;
    min-height: 100vh;
    background: linear-gradient(0deg, #e1ecff 5%, white 100%); }

#body.no-scroll {
  overflow-y: hidden;
  position: fixed;
  width: 100%;
  height: 100%; }

a {
  color: #197380;
  transition: all 0.2s ease-out; }
  a:visited {
    color: #197380; }
  a:active {
    color: #B1A0A0; }
  @media screen and (min-width: 740px) {
    a:hover {
      color: #B1A0A0; } }

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 1em;
  overflow: hidden;
  text-overflow: ellipsis; }
  .home .container {
    overflow: visible; }

.single-column {
  max-width: 750px;
  margin: 0 auto; }

.two-column {
  display: flex;
  justify-content: space-between;
  flex-direction: column; }
  @media screen and (min-width: 740px) {
    .two-column {
      flex-direction: row; } }
  @media screen and (min-width: 740px) {
    .two-column .site-main {
      width: 66.67%;
      margin-top: 5px; } }
  @media screen and (min-width: 740px) {
    .two-column.two-column-wide .site-main {
      width: 58.33%; } }

.sidebar {
  font-family: "Cera", san-serif;
  border-bottom: 1px solid #6C8094;
  padding-bottom: 1em;
  margin-bottom: 1em; }
  @media screen and (min-width: 740px) {
    .sidebar {
      width: 22%;
      border-bottom: none; }
      .two-column-wide .sidebar {
        width: 33.33%; } }

.sidebar-title {
  text-transform: none;
  font-size: 2.3em;
  font-weight: normal; }
  @media screen and (min-width: 740px) {
    .sidebar-title {
      text-transform: uppercase;
      font-size: 1em;
      font-weight: bold; } }

.ui-loader {
  display: none; }

h1,
.h1 {
  font-family: "Cera", san-serif;
  color: #14383D;
  font-size: 2.3em;
  font-weight: normal;
  line-height: 1.15em; }

h2,
.h2 {
  font-family: "Cera", san-serif;
  color: #14383D;
  font-size: 1.8em;
  font-weight: normal; }

h3,
.h3 {
  font-family: "Cera", san-serif;
  color: #14383D;
  font-size: 1em;
  font-weight: bold;
  margin-top: 0; }

h4,
.h4 {
  font-family: "Cera", san-serif;
  color: #14383D;
  font-size: 1em;
  font-weight: normal; }

.site-title a {
  text-decoration: none; }

.entry-title {
  margin-top: 0;
  margin-bottom: 0.65em; }

.extra-margin-heading {
  margin-bottom: 5rem; }

/* COMPONENTS */
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 60px 0 3.65em; }
  @media screen and (min-width: 740px) {
    .site-header {
      margin: 60px 0 7.5em; } }

.site-title {
  font-size: 1.4em;
  margin: 0;
  font-family: "Cera", san-serif;
  font-weight: lighter; }

.tcon {
  appearance: none;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 2em;
  transition: 0.3s;
  user-select: none;
  width: 2em;
  background: transparent;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-tap-highlight-color: transparent; }
  .tcon > * {
    display: block; }
  .tcon:hover, .tcon:focus {
    outline: none; }
  .tcon::-moz-focus-inner {
    border: 0; }

.tcon-menu__lines {
  display: inline-block;
  height: 0.28571em;
  width: 2em;
  transition: 0.3s;
  background: #197380;
  position: relative; }
  .tcon-menu__lines::before, .tcon-menu__lines::after {
    display: inline-block;
    height: 0.28571em;
    width: 2em;
    transition: 0.3s;
    background: #197380;
    content: '';
    position: absolute;
    left: 0;
    transform-origin: 0.14286em center;
    width: 100%; }
  .tcon-menu__lines::before {
    top: 0.5em; }
  .tcon-menu__lines::after {
    top: -0.5em; }
  .tcon-transform .tcon-menu__lines {
    transform: scale3d(0.8, 0.8, 0.8); }

.tcon-menu--xcross {
  width: auto; }
  .tcon-menu--xcross.tcon-transform .tcon-menu__lines {
    background: transparent; }
    .tcon-menu--xcross.tcon-transform .tcon-menu__lines::before, .tcon-menu--xcross.tcon-transform .tcon-menu__lines::after {
      transform-origin: 50% 50%;
      top: 0;
      width: 2em; }
    .tcon-menu--xcross.tcon-transform .tcon-menu__lines::before {
      transform: rotate3d(0, 0, 1, 45deg); }
    .tcon-menu--xcross.tcon-transform .tcon-menu__lines::after {
      transform: rotate3d(0, 0, 1, -45deg); }

.tcon-visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }
  .tcon-visuallyhidden:active, .tcon-visuallyhidden:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto; }

.main-navigation {
  position: relative; }
  .main-navigation.toggled .menu-menu-1-container {
    display: block;
    z-index: 100;
    overflow-y: auto;
    max-height: calc(100vh - 100px); }

.menu-menu-1-container {
  position: fixed;
  left: 0;
  top: 100px;
  padding-top: 10px;
  bottom: 0;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  background-color: #FDFDFF;
  transition: all 0.2s ease-out;
  display: block;
  overflow: hidden;
  z-index: 0;
  max-height: 0; }
  @media screen and (min-width: 1000px) {
    .menu-menu-1-container {
      top: 0;
      position: relative;
      display: inline-block;
      padding-top: 0;
      overflow: visible;
      background-color: transparent;
      z-index: 0; } }

.nav-menu {
  list-style-type: none;
  margin: 0;
  padding: 0; }

.menu-item {
  display: block;
  text-align: center;
  font-family: "Cera", san-serif;
  text-transform: uppercase; }
  #site-navigation .menu-item {
    width: 100vw; }
    @media screen and (min-width: 1000px) {
      #site-navigation .menu-item {
        width: auto;
        display: inline-block;
        text-align: left; } }
  .menu-item a {
    padding: 1em 0;
    font-size: 0.8em;
    letter-spacing: 1.18px;
    transition: all 0.2s ease-out;
    text-decoration: none;
    display: block; }
    @media screen and (min-width: 1000px) {
      #site-navigation .menu-item a {
        padding: 10px 20px;
        display: inline; }
        #site-navigation .menu-item a:hover {
          color: #197380;
          background-color: #E8E1E1; } }

.menu-toggle {
  display: inline;
  padding: 0;
  position: absolute;
  top: -15px;
  right: 0;
  z-index: 101; }
  @media screen and (min-width: 1000px) {
    .menu-toggle {
      display: none; } }

.menu-item-has-children {
  position: relative;
  cursor: pointer; }
  .menu-item-has-children.active > a {
    background-color: #E8E1E1; }
  @media screen and (min-width: 1000px) {
    .menu-item-has-children.active div:not(.menu-uw):after {
      top: 130%;
      left: 50%;
      border: solid transparent;
      content: " ";
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
      border-top-color: #6C8094;
      border-width: 10px;
      margin-left: -10px; } }

.sub-menu {
  background-color: #fff;
  padding: 1.2em 0;
  position: relative;
  width: 100%;
  margin: 0;
  display: none;
  border-top: 1px solid #197380;
  border-bottom: 1px solid #197380; }
  @media screen and (min-width: 1000px) {
    #site-navigation .sub-menu {
      position: absolute;
      width: 342px;
      border-left: 1px solid #197380;
      border-right: 1px solid #197380;
      left: -2.15em;
      top: 2.6em; } }
  .sub-menu .menu-item, #site-navigation .sub-menu .menu-item {
    text-transform: none;
    display: block;
    text-align: center;
    line-height: 2.15em; }
    .sub-menu .menu-item a, #site-navigation .sub-menu .menu-item a {
      display: block;
      padding: 0 !important; }

.nav-links {
  margin-bottom: 2em;
  font-family: "Cera", san-serif; }
  .nav-links div {
    display: inline-block;
    margin-right: 1em; }
    .nav-links div + div {
      border-left: 1px solid #6C8094;
      padding-left: 1em; }

.uw-hud {
  text-align: right;
  width: 100%;
  list-style-type: none;
  margin: 0;
  padding: 10px 50px;
  position: fixed;
  bottom: 0;
  font-family: "Cera", san-serif;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
  opacity: 0;
  transition: opacity 2s ease; }
  @media screen and (min-width: 740px) {
    .uw-hud {
      flex-direction: row; } }
  .uw-hud.show {
    opacity: .85;
    pointer-events: auto; }
  .uw-hud .totop {
    font-size: 14px;
    text-decoration: none;
    line-height: 1;
    width: 40px;
    display: block; }
    .uw-hud .totop img {
      width: 100%;
      height: auto; }
  .uw-hud .prevnext {
    height: 40px;
    width: 80px;
    display: block;
    perspective-origin: 18vw top;
    perspective: 80vw; }
    @media screen and (min-width: 740px) {
      .uw-hud .prevnext {
        perspective-origin: -10vw top; } }
    .uw-hud .prevnext a {
      height: 40px;
      width: 40px;
      display: inline-block;
      position: relative;
      cursor: pointer; }
      .uw-hud .prevnext a span {
        display: block;
        position: relative;
        height: 40px;
        width: 1px;
        position: relative;
        background: #fff;
        transform: rotateX(65deg);
        left: 20px;
        transition: opacity 500ms ease; }
        .uw-hud .prevnext a span::after {
          content: '';
          height: 15px;
          width: 15px;
          border-top: 2px #fff solid;
          display: block;
          position: absolute;
          top: 0;
          left: -7.5px;
          transform: rotateZ(45deg);
          border-left: 2px #fff solid; }
      .uw-hud .prevnext a.prev span::after {
        top: auto;
        bottom: 0;
        border-bottom: 2px #fff solid;
        border-right: 2px #fff solid;
        border-top: none;
        border-left: none; }
  .uw-hud #uw-site-navigation {
    height: 40px;
    width: 25px; }
    .uw-hud #uw-site-navigation.toggled .menu-uw {
      overflow-y: auto;
      transform: translateX(0); }
  .uw-hud .menu-uw {
    z-index: 100;
    position: fixed;
    right: 0;
    bottom: 100px;
    padding-top: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    background-color: #FDFDFF;
    display: block;
    max-height: calc(100vh - 100px);
    max-width: 300px;
    transition: transform .5s ease;
    transform: translateX(100%); }
    @media screen and (min-width: 740px) {
      .uw-hud .menu-uw {
        bottom: 70px; } }
    .uw-hud .menu-uw #primary-menu {
      margin: 0;
      padding: 0; }
  .uw-hud .menu-toggle {
    display: inline;
    padding: 0;
    position: absolute;
    top: 0;
    right: 0; }
  .uw-hud .tcon-menu__lines, .uw-hud .tcon-menu__lines::before, .uw-hud .tcon-menu__lines::after {
    background: white;
    height: 1px; }

.hud-controls {
  width: 270px;
  display: flex;
  justify-content: space-around; }

.node-label {
  margin-top: 16px;
  height: 24px; }

.node-label-text {
  transition: all 500ms ease;
  font-size: 14px;
  font-weight: 200;
  text-transform: none; }

.wp-caption-text {
  font-family: "Cera", san-serif; }

.btn,
a.btn {
  background-color: #197380;
  color: #fff;
  cursor: pointer;
  font-family: "Cera", san-serif;
  padding: 1.25em 2.4em;
  text-transform: uppercase;
  transition: all 0.2s ease-out;
  display: inline-block;
  line-height: 1;
  text-decoration: none; }
  @media screen and (min-width: 740px) {
    .btn:hover,
    a.btn:hover {
      background-color: #B1A0A0; } }

.cta-link {
  font-family: "Cera", san-serif; }

@keyframes distance-wobble {
  0% {
    transform: rotate(0deg) translateX(5px) rotate(0deg);
    opacity: 0.4; }
  12% {
    opacity: .6; }
  13% {
    opacity: .8; }
  14% {
    opacity: .4; }
  25% {
    transform: rotate(360deg) translateX(10px) rotate(-358deg);
    opacity: .7; }
  26% {
    opacity: .9; }
  32.5% {
    opacity: .4; }
  33% {
    opacity: .8; }
  34% {
    opacity: .4; }
  56% {
    transform: rotate(720deg) translateX(3px) rotate(-722deg);
    opacity: .6; }
  57% {
    opacity: .9; }
  65% {
    opacity: .4; }
  80% {
    transform: rotate(1080deg) translateX(8px) rotate(-1078.5deg);
    opacity: .6; }
  100% {
    transform: rotate(1440deg) translateX(5px) rotate(-1440deg);
    opacity: .4; } }

@keyframes float-wobble {
  0% {
    transform: rotate(0deg) translateX(1.8%) rotate(0deg); }
  25% {
    transform: rotate(360deg) translateX(2.4%) rotate(-358deg); }
  55% {
    transform: rotate(720deg) translateX(1.2%) rotate(-722deg); }
  80% {
    transform: rotate(1080deg) translateX(2%) rotate(-1078.5deg); }
  100% {
    transform: rotate(1440deg) translateX(1.8%) rotate(-1440deg); } }

@keyframes arrow-wobble {
  0% {
    transform: rotate(45deg) translateX(4.8px) rotate(0deg); }
  25% {
    transform: rotate(405deg) translateX(8.4px) rotate(-357deg); }
  55% {
    transform: rotate(765deg) translateX(4.2px) rotate(-724deg); }
  80% {
    transform: rotate(1125deg) translateX(8px) rotate(-1074.5deg); }
  100% {
    transform: rotate(1485deg) translateX(4.8px) rotate(-1440deg); } }

#page-wrap .bottom {
  width: 100%;
  height: 1px; }

#body {
  width: 100vw;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: scroll;
  perspective: 80vw;
  perspective-origin: center -12vw;
  background: #e1ecff; }
  .below #body {
    background: black; }

.below #body {
  /*perspective-origin: center 45vh;*/
  /*background: linear-gradient(2deg, $under-mid 0%, $under-mid 40%, $under-dark 85%, $under-black 92%, $under-black 100%);*/ }

.b-bg {
  width: 100%;
  height: 100%;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /*overflow: hidden;*/ }
  .below .b-bg {
    background: linear-gradient(0deg, black 0%, #0a0f14 5%, #0a0f14 40%, #324650 85%, #3f626f 92%, #3f626f 100%);
    opacity: 0.5;}

.b-inner {
  width: 100%;
  height: auto;
  pointer-events: none;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  /*overflow: hidden;*/ }
  .b-inner.static-wave {
    background-color: #e1ecff; }

.lastwave.wave-seg {
  background: blue; }

.wave-wrap {
  width: 100vw;
  position: relative;
  top: 0;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  /*overflow: hidden;*/ }
  .below .wave-wrap {
    /*display:none;*/ }

.wave-full.static-wave {
  width: 100%;
  float: left; }

.waterline {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 100; }
  .waterline > div {
    border-bottom: 2px solid orange;
    box-sizing: border-box;
    width: 100vw;
    height: 0px;
    position: relative; }
    .waterline > div.window-w {
      border-color: yellow; }
    .waterline > div.window-h {
      border-color: magenta; }
    .waterline > div.wave-reveal {
      border-color: blue; }
    .waterline > div.persp-o {
      border-color: green; }

.wave-seg {
  width: 100%;
  transform-origin: center center;
  position: relative;
  top: 600vw;
  height: 26.44vw;
  left: 0;
  z-index: 0;
  transform-origin: top center;
  /*border-top:1px solid red;*/ }
  .below .wave-seg:not(.wave-l-8) {
    visibility: hidden; }
  .wave-seg img {
    display: block;
    width: 100%;
    height: auto; }

.waterline {
  top: 9.6px;
  top: 0; }

.wave-back {
  /*top: ($wave_offset - 400) * 1vw;*/
  height: 20vw;
  background: #e1ecff;
  /*transform:translateZ( $translate_z * 1vw ) scale( $scale );*/ }

.wave-l-1 {
  transform: translateZ(-586.66667vw) scale(8.33333); }

.wave-l-2 {
  transform: translateZ(-453.33333vw) scale(6.66667); }

.wave-l-3 {
  transform: translateZ(-364.44444vw) scale(5.55556); }

.wave-l-4 {
  transform: translateZ(-300.95238vw) scale(4.7619); }

.wave-l-5 {
  transform: translateZ(-253.33333vw) scale(4.16667); }

.wave-l-6 {
  transform: translateZ(-216.2963vw) scale(3.7037); }

.wave-l-7 {
  transform: translateZ(-186.66667vw) scale(3.33333);
  /*background: orange;*/ }

.wave-l-8 {
  transform: translateZ(-162.42424vw) scale(3.0303);
  height: auto;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d; }

#canvas-container {
  height: 30vw;
  width: 100%;
  margin: 0 auto;
  position: relative;
  overflow: hidden; }

#waveCanvas {
  height: 40vw;
  width: 110vw;
  position: absolute;
  top: -5vw;
  left: -5vw; }

.underwater {
  position: relative;
  width: 100vw;
  transform-origin: top center;
  padding-bottom: 300vh;
  /*background: linear-gradient(2deg, $under-mid 0%, $under-mid 40%, $under-dark 85%, $under-black 92%, $under-black 100%);*/
  padding-top: 1px;
  margin-top: -2px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d; }

.canvas-wrap {
  position: fixed;
  padding: 10%;
  margin: auto;
  top: 0%;
  left: 0%;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  pointer-events: none;
  opacity: 1;
  transition: opacity 3s ease; }
  .above .canvas-wrap {
    /*opacity:0;*/ }

.go-down {
  display: inline-block;
  width: 100%;
  height: 50px;
  text-align: center;
  position: absolute;
  top: 20vw;
  pointer-events: all;
  cursor: pointer; }
  .go-down span {
    height: 15px;
    width: 15px;
    display: inline-block;
    transform: rotateZ(45deg);
    border-bottom: 2px #83969a solid;
    border-right: 2px #83969a solid;
    animation: arrow-wobble 25s infinite linear;
    pointer-events: all;
    cursor: pointer; }

#detritus-canvas {
  position: fixed;
  /*  position: relative; */
  margin: auto;
  top: -5%;
  left: -5%;
  height: 110%;
  width: 110%;
  border: 1px solid yellow;
  /*background: blue;*/ }

.bg-detritus {
  top: 0;
  left: 0;
  height: 300vw;
  right: 0;
  box-sizing: border-box;
  pointer-events: none;
  transform: translateZ(0vw);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  z-index: 3; }
  .bg-detritus > div {
    content: "";
    left: -50%;
    position: absolute;
    top: -50%;
    width: 200%;
    height: 200%; }

.floor {
  width: 100%;
  height: 50vh;
  position: absolute;
  bottom: 0;
  left: 0;
  background-size: cover;
  background-image: url("//res.cloudinary.com/egan/image/upload/background/floor.png"); }

.display-none {
  display: none;
  transition: none;
  pointer-events: none; }
  .display-none .inner > * {
    opacity: 0; }

.node-wrapper {
  position: relative;
  margin-top: 280vh;
  width: 70vw;
  max-width: 60vh;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  height: 120vw;
  /*
  .above & {
    visibility: hidden;
  }*/ }
  .node-wrapper.nw-0 {
    margin-top: 80vh; }
  .node-wrapper h3 {
    text-align: left;
    color: #bdccd4; }
  .node-wrapper > a {
    position: absolute;
    top: -280vh; }
  .node-wrapper.nw-0 > a {
    top: -80vh; }
  .node-wrapper .camera {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transition: transform 2000ms ease;
    width: 100%;
    height: 100%; }
  .node-wrapper .spin.object {
    cursor: grab;
    cursor: -webkit-grab;
    width: 60%;
    height: 100%;
    transform: rotateY(30deg) rotateX(5deg);
    left: 20%;
    position: relative;
    /*animation: float-wobble 84s infinite linear;*/ }
  .node-wrapper .spin .layer-1 {
    transform: translateZ(20vw); }
  .node-wrapper .spin .layer-2 {
    transform: scale(1.06) translateZ(10vw); }
  .node-wrapper .spin .layer-3 {
    transform: scale(1.18) translateZ(-10vw); }
  .node-wrapper .spin .layer-4 {
    transform: scale(1.24) translateZ(-20vw); }
  .node-wrapper.column .object {
    margin: 5vw 0; }
  .node-wrapper.text .inner {
    padding: 0 4vw;
    opacity: .6; }

.safari.iphone .scrollbar .inner,
.safair.ipad .scrollbar .inner {
  animation: none; }

.node {
  height: 70%;
  width: 100%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transform: translateZ(-100vw) scale(2.25); }
  .node .inner {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    animation: float-wobble 55s infinite linear;
    transition: opacity 2000ms ease; }
  .node .camera .object {
    position: absolute;
    pointer-events: auto; }
  .node .object.text:not(.scrollbar) .inner {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    min-height: 60vh; }
  .node .object {
    position: relative;
    width: 100%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    cursor: pointer;
    transition: transform 1s ease;
    -webkit-backface-visibility: hidden; }
    .node .object.inactive {
      pointer-events: none; }
    .node .object.scrollbar.here:not(.closed) .inner {
      height: 80vh;
      overflow-y: scroll; }
      .node .object.scrollbar.here:not(.closed) .inner::-webkit-scrollbar {
        width: 6px;
        background-color: rgba(255, 255, 255, 0.1); }
      .node .object.scrollbar.here:not(.closed) .inner::-webkit-scrollbar-thumb {
        background-color: rgba(255, 255, 255, 0.5); }
      .node .object.scrollbar.here:not(.closed) .inner::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        background-color: rgba(255, 255, 255, 0.1); }
      .node .object.scrollbar.here:not(.closed) .inner .open-handle {
        display: none; }
    .node .object.scrollbar.closed .inner p:not(:first-of-type),
    .node .object.scrollbar:not(.here) .inner p:not(:first-of-type) {
      display: none; }
    .node .object.gear img {
      width: auto; }
    .node .object .inner {
      color: #bdccd4;
      line-height: 1.4;
      text-align: center; }
      .node .object .inner p {
        text-align: left; }
      .node .object .inner .imgbox, .node .object .inner .imgwrap {
        background-size: contain;
        width: 100%;
        height: 0;
        padding-top: 100%;
        background-repeat: no-repeat;
        background-position: center center; }
      .node .object .inner .imgbox {
        position: absolute;
        top: 0; }
      .node .object .inner img {
        max-width: 100%;
        height: auto; }
      .node .object .inner img + p {
        padding: 0 4em 0 1em; }
      .node .object .inner > * {
        transition: opacity 2000ms ease;
        opacity: 1;
        /*.above & {
          opacity:0!important;
        }*/ }
      .node .object .inner > div img, .node .object .inner > div p, .node .object .inner p, .node .object .inner h3 {
        width: 100%;
        user-drag: none;
        user-select: none;
        -moz-user-select: none;
        -webkit-user-drag: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        max-width: 36ch;
        margin-left: auto;
        margin-right: auto; }
    .node .object.floating .inner .imgbox {
      width: 70%;
      padding-top: 70%; }
    .text .node .object, .node .object.text {
      width: 100%; }

.object.spin .inner > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transition: opacity 1000ms ease;
  -webkit-backface-visibility: hidden; }

.node .object:not(.text) .inner p {
  padding: .5em 0 1em;
  font-size: 0.8em;
  letter-spacing: 1.18px;
  font-family: "Cera", san-serif;
  text-align: center;
  margin-top: 0; }

a.open-handle {
  display: block;
  text-align: right;
  max-width: 36ch;
  margin-left: auto;
  margin-right: auto;
  letter-spacing: 1.18px;
  text-decoration: none;
  font-family: "Cera", san-serif;
  text-transform: uppercase;
  color: #B1A0A0;
  font-size: 16px; }
  a.open-handle:hover, a.open-handle:active {
    color: white; }

.underwater-video-modal {
  position: fixed;
  z-index: 1000;
  max-width: 640px;
  width: 80vw;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: black;
  box-shadow: 0px 0px 0px 1000px black;
  display: none; }
  .underwater-video-modal.portrait {
    max-width: 400px;
    max-height: 80vh;
    width: 49vh; }
    .underwater-video-modal.portrait .video-holder {
      padding-bottom: 162.1%; }
  .underwater-video-modal .video-holder {
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
    height: 0; }
  .underwater-video-modal iframe {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute; }
  .underwater-video-modal button {
    position: absolute;
    top: -30px;
    right: -30px; }
    .underwater-video-modal button .tcon-menu__lines {
      transform: scale3d(0.8, 0.8, 0.8);
      background: transparent;
      height: 1px; }
      .underwater-video-modal button .tcon-menu__lines:before {
        transform: rotate3d(0, 0, 1, 45deg);
        transform-origin: 50% 50%;
        top: 0;
        width: 2em;
        height: 1px;
        background-color: white; }
      .underwater-video-modal button .tcon-menu__lines:after {
        transform: rotate3d(0, 0, 1, -45deg);
        transform-origin: 50% 50%;
        top: 0;
        width: 2em;
        height: 1px;
        background-color: white; }

.floating .imgloader {
  display: none; }

.imgloader {
  width: 20%;
  padding-top: 20%;
  position: absolute;
  top: 40%;
  left: 40%;
  z-index: 0; }

.loading img {
  animation: spin 5s infinite linear; }

@keyframes spin {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(360deg); } }

.uw-segway {
  position: relative;
  top: -1px;
  left: 0;
  width: 100%;
  height: 150vh;
  background: linear-gradient(0deg, rgba(53, 74, 85, 0.001) 0%, #354a55 30%, #354a55 100%);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  pointer-events: none;
  opacity: 1;
  transition: opacity 2s ease;
  /*  img {
    width:100%;
    height:100%;
    overflow: hidden;
  }*/ }
  .uw-segway.hide {
    opacity: 0; }

.background {
  position: absolute;
  bottom: 0;
  left: 0;
  transition: transform 1s ease;
  width: 100vw;
  height: 100%;
  pointer-events: none;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  opacity: 1; }
  .above .background {
    opacity: 0 !important; }
  .background .structure {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: .6;
    transform-origin: center bottom; }
    .above .background .structure {
      opacity: 0 !important; }
  .background .st-0 {
    transform: translateZ(-3000vw) scale(40); }
    .background .st-0 img {
      width: 100vw;
      /*border: 1px solid yellow;*/ }
  .background .st-1 {
    transition: transform 2000ms ease-in-out;
    transform-origin: center bottom; }
    .background .st-1 img {
      width: 15vw; }

/* TEMPLATE STYLES */
.home #page {
  text-align: center; }

.home .book-title {
  padding: 0;
  height: 50vh;
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  position: relative;
  z-index: -1; }
  @media screen and (min-width: 740px) {
    .home .book-title {
      height: 50vh; } }
  .home .book-title .t-svg-wrap {
    position: relative;
    width: 100%;
    overflow: visible; }
  .home .book-title .title-svg {
    width: 100%;
    height: auto; }

.home .air-lines > div {
  width: 0.55%;
  position: absolute;
  height: 300vh;
  background: black;
  top: 26.7%; }

.home #airlinesCanvas {
  height: 100vh;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 0; }

.home #al-a1 {
  left: 70.4%; }

.home .reviews {
  margin-top: 20vh; }
  @media screen and (min-width: 740px) {
    .home .reviews {
      margin-top: 30vw; } }

.home .featured-review {
  font-family: "ff-tisa-web-pro", serif;
  font-size: 1.6em;
  line-height: 1.2;
  color: #14383D;
  margin: 40vh auto;
  max-width: 32ch; }
  .home .featured-review p {
    margin-top: 0;
    margin-bottom: 24px; }
  .home .featured-review p:last-child {
    font-family: "Cera", san-serif;
    font-size: 16px; }

.home .wave-wrap .wavetext {
  position: absolute;
  bottom: 8vw;
  left: 0;
  width: 100%;
  text-align: center;
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-family: "Cera", san-serif;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 200;
  animation: float-wobble 120s infinite linear; }
  .home .wave-wrap .wavetext > * {
    max-width: 40ch; }

@keyframes float-wobble {
  0% {
    transform: rotate(0deg) translateX(1.8%) rotate(0deg); }
  25% {
    transform: rotate(360deg) translateX(2.4%) rotate(-358deg); }
  55% {
    transform: rotate(720deg) translateX(1.2%) rotate(-722deg); }
  80% {
    transform: rotate(1080deg) translateX(2%) rotate(-1078.5deg); }
  100% {
    transform: rotate(1440deg) translateX(1.8%) rotate(-1440deg); } }

.social-link {
  text-decoration: none;
  display: inline-block;
  margin-right: 20px; }
  .social-link:hover #Oval,
  .social-link:hover #Fill-1 {
    fill: #B1A0A0; }

.book-overview {
  font-size: 1.1em; }

.book-sidebar p {
  margin: 0; }

.book-sidebar a {
  font-weight: lighter;
  display: block;
  line-height: 1.75em;
  font-size: .9em; }

.book-sidebar-img {
  width: 100%;
  max-width: 250px;
  height: auto;
  margin: 0 auto 1em;
  display: block; }

ul.book-nav {
  display: inline-block;
  list-style-type: none;
  margin: 0 0 1em;
  padding: 0;
  line-height: 1.1;
  font-family: "Cera", san-serif;
  font-size: .9em;
  font-weight: lighter; }

.book-nav li {
  display: inline-block;
  text-align: left;
  border-right: 2px solid #999;
  padding: 0 .5em; }
  .book-nav li:last-child {
    border: none; }
  .book-nav li:first-child {
    padding-left: 0; }

.book-header .entry-title {
  margin-bottom: 0.125em; }

.book-reviews,
.book-interviews {
  margin: 4em 0; }

.book-review,
.book-interview {
  border-bottom: 1px solid #6C8094;
  margin-bottom: 2.15em;
  padding-bottom: 2.15em; }
  .book-review:last-of-type,
  .book-interview:last-of-type {
    border-bottom: none;
    margin-bottom: .5em; }

.book-review-content p:first-of-type,
.book-interview-content p:first-of-type {
  font-family: "Cera", san-serif; }

.book-review-content a:last-child,
.book-interview-content a:last-child {
  font-family: "Cera", san-serif; }

.back-to-book-link {
  display: block;
  margin-bottom: 4em; }

.back-to-book-btn {
  margin-top: 4em; }

.single-excerpt .entry-content h1:first-child,
.single-excerpt .entry-content h2:first-child,
.single-excerpt .entry-content h3:first-child,
.single-excerpt .entry-content h4:first-child {
  margin-top: -0.8em; }

.slidenumbers {
  font-size: .65em;
  line-height: 1; }

.slideinput {
  font-size: 1em; }

.sshow-inwrap {
  width: 100%;
  height: 73.38vw;
  max-width: 672px;
  max-height: 520px; }

.full-screen.control {
  display: none; }

.non-fiction-archive {
  max-width: 720px;
  margin: 0 auto; }

.non-fiction-item {
  padding-bottom: 2em;
  border-bottom: 1px solid #6C8094; }

.non-fiction-item-pub,
.non-fiction-item-date {
  display: block;
  font-family: "Cera", san-serif;
  font-weight: lighter; }

.news-heading {
  margin-bottom: .15em; }

.archive-description p {
  margin: 0;
  font-family: "Cera", san-serif;
  line-height: 1.5; }

.news-post {
  font-family: "Cera", san-serif;
  border-bottom: 1px solid #6C8094;
  margin-bottom: 2.4em;
  padding-bottom: 1em; }
  .news-post p {
    font-weight: lighter; }

.news-post-title {
  background-color: rgba(229, 223, 211, 0.5);
  display: inline;
  padding: 5px 0;
  margin-bottom: 1.25em;
  font-weight: normal; }

.calendar-event {
  margin-bottom: 1.5em;
  padding-bottom: 1.5em;
  font-size: 1em;
  border-bottom: 1px solid #6C8094; }
  @media screen and (min-width: 740px) {
    .calendar-event {
      font-size: .8em; } }
  .calendar-event span {
    display: block; }
  .calendar-event:last-of-type {
    border-bottom: none; }
  .calendar-event *:last-child {
    margin-bottom: 0; }

.calendar-event-title {
  font-weight: bold;
  margin-bottom: 1rem; }

.calendar-event-meta {
  margin-bottom: 1rem; }

.calendar-event-time,
.calendar-event-location,
.calendar-event-date {
  font-weight: lighter; }

.calendar-event-desc {
  font-weight: lighter;
  margin-bottom: 1rem; }

.calendar-event-link {
  display: block;
  font-weight: lighter;
  text-decoration: none; }

.review-item {
  padding-bottom: 1em;
  margin-bottom: 2em;
  border-bottom: 1px solid #6C8094; }
  .review-item p:first-of-type {
    font-family: "Cera", san-serif; }
  .review-item a:last-of-type {
    font-family: "Cera", san-serif; }