/* Animations */
.challenge, .completed .challenge h3, .completed .challenge p, .completed .challenge ol, .completed .challenge video, .bonus {
  opacity: 0;
  -webkit-transition: opacity 2.1s cubic-bezier(0.215, 0.61, 0.355, 1);
          transition: opacity 2.1s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.segment.in-view, .in-view .challenge, .solved .bonus {
  opacity: 1;
}

.creature, .creature_humboldt-squid .darkening, .object {
  overflow: hidden;
  position: relative;
}
.creature:before, .creature_humboldt-squid .darkening:before, .object:before {
  content: " ";
  width: 100%;
  height: 100%;
  display: block;
}

.segment:before, .panel:before, #menu_options:before, .rewards a:before,
.segment:after,
.panel:after,
#menu_options:after,
.rewards a:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}

.segment:after, .panel:after, #menu_options:after, .rewards a:after {
  clear: both;
}

.dashOpen {
  overflow: hidden;
}

.leagueSpartanRegular400 .challenge li, .challenge .leagueSpartanRegular400 li, .leagueSpartanRegular400 h1, .leagueSpartanRegular400 h2, .leagueSpartanRegular400 h3, .leagueSpartanRegular400 .featured, .leagueSpartanRegular400 strong, .leagueSpartanRegular400 .tab, .leagueSpartanRegular400 .toggle, .leagueSpartanRegular400 .rewards a, .rewards .leagueSpartanRegular400 a, .leagueSpartanRegular400 .sound-off .name, .sound-off .leagueSpartanRegular400 .name, .leagueSpartanRegular400 .crew .name, .crew .leagueSpartanRegular400 .name, .leagueSpartanRegular400 #dismiss-onboarding {
  font-family: "leagueSpartanRegular", sans-serif;
  font-weight: 400;
}

.Merriweather400 h1, .Merriweather400 .subtitle, .Merriweather400 .challenge li p, .challenge li .Merriweather400 p, .Merriweather400 p, .Merriweather400 .followup {
  font-family: "Merriweather", serif;
  font-weight: 400;
}

.Merriweather700 .rediscover, .Merriweather700 em, .Merriweather700 .red, .Merriweather700 .orange, .Merriweather700 .biolumiColor, .Merriweather700 .callout, .Merriweather700 blockquote, .Merriweather700 cite, .Merriweather700 small, .Merriweather700 .photophores label, .photophores .Merriweather700 label, .Merriweather700 .photophores figcaption, .photophores .Merriweather700 figcaption, .Merriweather700 .crew strong, .crew .Merriweather700 strong, .Merriweather700 .crew .title, .crew .Merriweather700 .title, .Merriweather700 .thanks h4, .thanks .Merriweather700 h4, .Merriweather700 .progress {
  font-family: "Merriweather", serif;
  font-weight: 700;
  font-style: italic;
}

.challenge .rediscover, small, .photophores label, .photophores figcaption, .menu .download, .crew .title, .progress {
  font-size: 0.8rem;
  line-height: 1rem;
}

h1, .subtitle, .title-card_wrapper, .segment, .followup, .standalone p, cite, .version, .photophores figcaption strong {
  font-size: 1rem;
  line-height: 2rem;
}

.subtitle em, h3, .callout, blockquote, .thanks h4, #d1200 em {
  font-size: 2rem;
  line-height: 2.66667rem;
}

h2 {
  font-size: 3rem;
  line-height: 3.33333rem;
}

html {
  font-size: 93.75%;
  line-height: 0.33333em;
}

@font-face {
  font-family: 'leagueSpartanRegular';
  src: url("../fonts/leaguespartan-bold-webfont.eot");
  src: url("../fonts/leaguespartan-bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/leaguespartan-bold-webfont.woff2") format("woff2"), url("../fonts/leaguespartan-bold-webfont.woff") format("woff"), url("../fonts/leaguespartan-bold-webfont.ttf") format("truetype"), url("../fonts/leaguespartan-bold-webfont.svg#league_spartanregular") format("svg");
  font-weight: normal;
  font-style: normal;
}
body, h1, h2, h3, h4, p, ul {
  margin: 0;
  padding: 0;
}

.wrapper {
  overflow: hidden;
}

#svg-sprite {
  display: none;
}

a:link {
  color: #56fddb;
}
a:visited {
  color: #4ed9f2;
}
a:hover, a:active, a:focus {
  color: #A9DDF2;
}

.award {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 80px;
  height: 96px;
  z-index: 20;
  -webkit-transition: -webkit-transform cubic-bezier(0.55, 0.055, 0.675, 0.19) 300ms;
          transition: transform cubic-bezier(0.55, 0.055, 0.675, 0.19) 300ms;
}
.award:hover, .award:active, .award:focus {
  -webkit-transform: translateX(5%);
      -ms-transform: translateX(5%);
          transform: translateX(5%);
}

/* Heading stuff. */
.sub {
  max-width: calc(100% + 3rem);
  margin: 2rem -3rem;
}

h1, .subtitle {
  padding-bottom: 1rem;
}

h1, .sub, .title-wrapper, #start {
  opacity: 0;
  -webkit-transition: opacity cubic-bezier(0.215, 0.61, 0.355, 1) 500ms 300ms;
          transition: opacity cubic-bezier(0.215, 0.61, 0.355, 1) 500ms 300ms;
}
.class-dismissed h1, .class-dismissed .sub, .class-dismissed .title-wrapper, .class-dismissed #start {
  opacity: 1;
}

.sub {
  -webkit-transition-delay: 500ms;
          transition-delay: 500ms;
}

.title-wrapper {
  -webkit-transition-delay: 800ms;
          transition-delay: 800ms;
}

#start {
  z-index: 1;
  -webkit-transition-delay: 2.1s;
          transition-delay: 2.1s;
  width: 3rem;
  position: absolute;
  -webkit-transform: translate(-50%, 28%);
      -ms-transform: translate(-50%, 28%);
          transform: translate(-50%, 28%);
  left: 50%;
  bottom: 190px;
  z-index: 1;
}

.loaded.animated .in-view .get-a-move-on {
  -webkit-animation: letsGo infinite alternate 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
          animation: letsGo infinite alternate 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@-webkit-keyframes letsGo {
  100% {
    -webkit-transform: translateY(25%);
            transform: translateY(25%);
  }
}

@keyframes letsGo {
  100% {
    -webkit-transform: translateY(25%);
            transform: translateY(25%);
  }
}
.subtitle em {
  color: #0b4a61;
}

.subtitle {
  margin-bottom: 5rem;
}

#title {
  box-sizing: border-box;
  padding-bottom: 190px;
  min-height: 100vh;
  opacity: 1;
}
#title a:link {
  color: #0b4a61;
}
#title a:visited {
  color: #002351;
}
#title a:hover, #title a:active, #title a:focus {
  color: #007e84;
}

@media (min-width: 54em) {
  #title {
    max-height: 110vh;
    min-height: 500px;
  }

  h1 img {
    margin: 0;
    width: auto;
    max-width: 100%;
    height: 24vh;
    left: 0;
  }

  h1 {
    padding-bottom: 3vh;
  }

  h1, .title-wrapper {
    width: calc(50% - 2rem);
    float: left;
  }

  .title-card_wrapper {
    padding-top: 4vh;
  }

  .non-ff .subtitle {
    margin-bottom: 0;
  }

  .sub {
    max-width: auto;
    margin: -1rem 0 3rem;
    max-height: 50vh;
    float: right;
    width: calc(50%);
  }
}
@media (min-width: 54em) {
  .segment {
    max-width: 102rem;
    margin: 0 auto;
  }
}

h3 + .content {
  padding-top: 0;
}

.challenge_wrapper > h3 {
  padding-top: 1rem;
}

.bonus {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1rem 0;
}
.completed .bonus {
  opacity: 1;
}

@media (min-width: 35em) {
  .content p, .challenge p, .panel p {
    padding-bottom: 0;
  }
  .content p:not(:first-of-type), .challenge p:not(:first-of-type), .panel p:not(:first-of-type) {
    text-indent: 4em;
  }
}

@media (min-width: 54em) {
  .content, .challenge:not(.left) {
    -webkit-column-count: 2;
       -moz-column-count: 2;
            column-count: 2;
    -webkit-column-gap: 2rem;
       -moz-column-gap: 2rem;
            column-gap: 2rem;
  }
  .content ul, .content ol, .challenge:not(.left) ul, .challenge:not(.left) ol {
    page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
            break-inside: avoid;
  }
}

.video {
  display: block;
  margin: 0 auto;
  padding-top: 1rem;
  padding-bottom: 1rem;
  max-width: 100%;
  height: auto;
}
@media (min-width: 54em) {
  .left .video {
    margin: 0;
  }
}

.keep-together {
  display: inline-block;
}

.challenge_wrapper {
  position: relative;
  z-index: 1;
}

.challenge {
  -webkit-transition-property: opacity, background;
          transition-property: opacity, background;
  padding: 1rem 1em;
  position: relative;
  z-index: 1;
  margin: 0 -1em;
}
.challenge .rediscover {
  position: absolute;
  top: 0.33333rem;
  right: 0.33333rem;
}
.completed .challenge {
  pointer-events: none;
  z-index: 0;
}
.challenge ol, .challenge li {
  margin: 0;
  padding: 0;
}
.challenge ol {
  padding-bottom: 1rem;
}
.challenge li {
  padding-top: 0.33333rem;
  margin-left: 1.66667rem;
  padding-left: 0.33333rem;
}
.challenge li p:first-child {
  padding: 0;
}

.rediscover {
  color: #56fddb;
  cursor: pointer;
  text-decoration: underline;
}

h2 {
  padding-bottom: 2rem;
}

.red {
  color: #c6244b;
}

.orange {
  color: #ff9100;
}

.biolumiColor {
  color: #56fddb;
}

code {
  color: #39dbb4;
  font-weight: 700;
}

p {
  padding-bottom: 1rem;
}

.callout {
  padding-top: 0.33333rem;
  padding-bottom: 0.33333rem;
  text-align: center;
  -webkit-transition-duration: 1.3s;
          transition-duration: 1.3s;
}

.followup {
  padding-top: 0.33333rem;
  padding-bottom: 0.33333rem;
  text-align: center;
  -webkit-transition-delay: 500ms;
          transition-delay: 500ms;
}

.standalone {
  max-width: 50em;
  margin: 0 auto;
}
.standalone p {
  padding-bottom: 2rem;
}

blockquote {
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
          break-inside: avoid;
  opacity: .7;
  padding-top: 0.33333rem;
  padding-bottom: 0.33333rem;
}
blockquote:first-child {
  padding: 0;
  margin: 0;
}

cite {
  font-style: normal;
  display: block;
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
          break-inside: avoid;
  text-align: right;
}
cite:before {
  content: "\2014";
}

/* Footer */
footer {
  background: -webkit-linear-gradient(top, #c6f3c7 0%, #9cea9e 100%);
  background: linear-gradient(to bottom, #c6f3c7 0%, #9cea9e 100%);
  color: #436c6f;
  padding-bottom: 5rem;
  text-align: center;
}

.version {
  display: block;
}

.wordmark {
  display: block;
  margin: 0 auto;
  height: 3rem;
  padding: 0.33333rem;
}

/* Zones */
#epipelagic {
  background: -webkit-linear-gradient(top, #39dbb4 0%, #007e84 50%, #0b4960 100%);
  background: linear-gradient(to bottom, #39dbb4 0%, #007e84 50%, #0b4960 100%);
  color: #000c1c;
  padding-top: calc(180px + 2rem);
}

#mesopelagic {
  background: -webkit-linear-gradient(top, #0b4960 0%, #0b4960 33%, #002351 67%, #000c1c 100%);
  background: linear-gradient(to bottom, #0b4960 0%, #0b4960 33%, #002351 67%, #000c1c 100%);
  color: #c6f3c7;
}

#bathypelagic {
  background: #000c1c;
  color: #c6f3c7;
}

#abyssal {
  background: #000c1c;
  color: #c6f3c7;
}

/* Challenges */
/* Props */
.creatures2x-sprite {
  background-image: url('../img/creatures2x-s3d68c31f5f.png');
  background-repeat: no-repeat;
}

.creatures-sprite {
  background-image: url('../img/creatures-s2f813f5aea.png');
  background-repeat: no-repeat;
}

.creature .lumi, .creature_humboldt-squid .darkening .lumi {
  position: absolute;
}

@media (max-device-pixel-ratio: 1), (-webkit-max-device-pixel-ratio: 2), (max-resolution: 192dpi) {
  .creature:before, .creature_humboldt-squid .darkening:before, .creature:after, .creature_humboldt-squid .darkening:after {
    background-image: url('../img/creatures-s2f813f5aea.png');
  }
}
@media (min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .creature:before, .creature_humboldt-squid .darkening:before, .creature:after, .creature_humboldt-squid .darkening:after {
    background-image: url('../img/creatures2x-s3d68c31f5f.png');
  }
}
/* Props */
.objects2x-sprite {
  background-image: url('../img/objects2x-s386e065297.png');
  background-repeat: no-repeat;
}

.objects-sprite, .luminous-spew:before {
  background-image: url('../img/objects-s960a7507d0.png');
  background-repeat: no-repeat;
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (min-device-pixel-ratio: 1.3), only screen and (min-resolution: 124.8dpi), only screen and (min-resolution: 1.3dppx) {
  .object:before {
    background-image: url('../img/objects2x-s386e065297.png');
  }
}
.creature_flashlight-fish {
  width: 186px;
  height: 96px;
}
.creature_flashlight-fish:before {
  background-position: 0 3.12673%;
  background-size: 301.07527% auto;
  height: 100%;
}
@media (min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .creature_flashlight-fish:before {
    background-size: 301.07527% auto;
    background-position: 0 3.12673%;
  }
}
.creature_flashlight-fish .lumi {
  left: 82.25806%;
  top: 63.54167%;
  width: 12.63441%;
  height: 19.27083%;
}

#creature_flashlight-fish1 {
  margin: 1rem 0;
  pointer-events: none;
}
#creature_flashlight-fish1 .lumi {
  pointer-events: none;
}

.lost-fish {
  -webkit-animation: swimmyFlashy 3.4s -3s linear infinite paused;
          animation: swimmyFlashy 3.4s -3s linear infinite paused;
}
@media (min-width: 54em) {
  .lost-fish {
    -webkit-animation-duration: 5.5s;
            animation-duration: 5.5s;
    -webkit-animation-delay: -3.5s;
            animation-delay: -3.5s;
    width: calc(200% + 2rem);
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}

@-webkit-keyframes swimmyFlashy {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(50%);
            transform: translateX(50%);
  }
}

@keyframes swimmyFlashy {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(50%);
            transform: translateX(50%);
  }
}
.school_flashlight-fish {
  opacity: 0;
  -webkit-transition: opacity cubic-bezier(0.55, 0.055, 0.675, 0.19) 500ms;
          transition: opacity cubic-bezier(0.55, 0.055, 0.675, 0.19) 500ms;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.school_flashlight-fish .creature_flashlight-fish {
  position: absolute;
}
.completed .school_flashlight-fish {
  opacity: 1;
}

.schooling_flashlight-fish {
  pointer-events: none;
  padding: 0 2em;
  margin: 0 -2em;
  width: 100%;
  height: 100%;
  position: absolute;
}
.schooling_flashlight-fish .lumi {
  -webkit-animation: winking steps(1) paused infinite 500ms;
          animation: winking steps(1) paused infinite 500ms;
}
.animated .in-view.completed .schooling_flashlight-fish .lumi {
  -webkit-animation-play-state: running;
          animation-play-state: running;
}
.schooling_flashlight-fish .creature_flashlight-fish:nth-child(odd) .lumi {
  -webkit-animation-duration: 300ms;
          animation-duration: 300ms;
}
.schooling_flashlight-fish .creature_flashlight-fish:nth-child(3) .lumi {
  -webkit-animation-delay: 200ms;
          animation-delay: 200ms;
}
.schooling_flashlight-fish .creature_flashlight-fish:nth-child(4) .lumi {
  -webkit-animation-duration: 800ms;
          animation-duration: 800ms;
}

@-webkit-keyframes winking {
  50% {
    opacity: 0;
  }
}

@keyframes winking {
  50% {
    opacity: 0;
  }
}
#school_flashlight-fish_bg .creature_flashlight-fish:nth-child(0n+1) {
  top: 40%;
  right: 46%;
}
#school_flashlight-fish_bg .creature_flashlight-fish:nth-child(0n+2) {
  top: 20%;
  left: 5%;
}
#school_flashlight-fish_bg .creature_flashlight-fish:nth-child(0n+3) {
  top: 64%;
  left: 44%;
}
#school_flashlight-fish_bg .creature_flashlight-fish:nth-child(0n+4) {
  top: 60%;
  left: 10%;
}
#school_flashlight-fish_bg .creature_flashlight-fish:nth-child(0n+5) {
  top: 30%;
  left: 25%;
}
#school_flashlight-fish_bg .creature_flashlight-fish:nth-child(0n+6) {
  top: 10%;
  right: 10%;
}
#school_flashlight-fish_bg .creature_flashlight-fish:nth-child(0n+7) {
  top: 50%;
  left: 90%;
}
#school_flashlight-fish_bg .creature_flashlight-fish:nth-child(odd) {
  -webkit-transform: scale(0.5);
      -ms-transform: scale(0.5);
          transform: scale(0.5);
}
#school_flashlight-fish_bg .creature_flashlight-fish:nth-child(odd):before {
  -webkit-filter: url("../img/blue-filter.svg#seafish") brightness(20%) saturate(20%);
          filter: url("../img/blue-filter.svg#seafish") brightness(20%) saturate(20%);
}
#school_flashlight-fish_bg .creature_flashlight-fish:nth-child(even) {
  -webkit-transform: scale(0.7);
      -ms-transform: scale(0.7);
          transform: scale(0.7);
}
#school_flashlight-fish_bg .creature_flashlight-fish:nth-child(even):before {
  -webkit-filter: url("../img/blue-filter.svg#seafish") brightness(30%) saturate(30%);
          filter: url("../img/blue-filter.svg#seafish") brightness(30%) saturate(30%);
}

#school_flashlight-fish_fg .creature_flashlight-fish:nth-child(0n+1) {
  top: 68%;
  left: 41%;
}
#school_flashlight-fish_fg .creature_flashlight-fish:nth-child(0n+2) {
  top: 55%;
  left: 0%;
}
#school_flashlight-fish_fg .creature_flashlight-fish:nth-child(0n+3) {
  top: 12%;
  left: 15%;
}
#school_flashlight-fish_fg .creature_flashlight-fish:nth-child(0n+4) {
  top: 20%;
  right: 24%;
}
#school_flashlight-fish_fg .creature_flashlight-fish:nth-child(0n+5) {
  top: 36%;
  right: 0%;
}
#school_flashlight-fish_fg .creature_flashlight-fish:nth-child(odd) {
  -webkit-transform: scale(-0.85, 0.85);
      -ms-transform: scale(-0.85, 0.85);
          transform: scale(-0.85, 0.85);
}
#school_flashlight-fish_fg .creature_flashlight-fish:nth-child(odd):before {
  -webkit-filter: url("../img/blue-filter.svg#seafish") brightness(40%) saturate(40%);
          filter: url("../img/blue-filter.svg#seafish") brightness(40%) saturate(40%);
}
#school_flashlight-fish_fg .creature_flashlight-fish:nth-child(even) {
  -webkit-transform: scale(-0.9, 0.9);
      -ms-transform: scale(-0.9, 0.9);
          transform: scale(-0.9, 0.9);
}
#school_flashlight-fish_fg .creature_flashlight-fish:nth-child(even):before {
  -webkit-filter: url("../img/blue-filter.svg#seafish") brightness(50%) saturate(50%);
          filter: url("../img/blue-filter.svg#seafish") brightness(50%) saturate(50%);
}

#school_flashlight-fish1 {
  -webkit-animation: flashlight-swim paused linear infinite 5.5s;
          animation: flashlight-swim paused linear infinite 5.5s;
}
.animated .completed.in-view #school_flashlight-fish1 {
  -webkit-animation-play-state: running;
          animation-play-state: running;
}

@-webkit-keyframes flashlight-swim {
  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}

@keyframes flashlight-swim {
  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}
#school_flashlight-fish2 {
  -webkit-animation: flashlight-swim2 paused linear infinite 5.5s;
          animation: flashlight-swim2 paused linear infinite 5.5s;
  -webkit-transform: translate(-100%);
      -ms-transform: translate(-100%);
          transform: translate(-100%);
}
.animated .completed.in-view #school_flashlight-fish2 {
  -webkit-animation-play-state: running;
          animation-play-state: running;
}

@-webkit-keyframes flashlight-swim2 {
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@keyframes flashlight-swim2 {
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
#school_flashlight-fish3 {
  -webkit-animation: flashlight-swim3 paused linear infinite 5.5s;
          animation: flashlight-swim3 paused linear infinite 5.5s;
}
.animated .completed.in-view #school_flashlight-fish3 {
  -webkit-animation-play-state: running;
          animation-play-state: running;
}

@-webkit-keyframes flashlight-swim3 {
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}

@keyframes flashlight-swim3 {
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}
#school_flashlight-fish4 {
  -webkit-animation: flashlight-swim4 paused linear infinite 5.5s;
          animation: flashlight-swim4 paused linear infinite 5.5s;
  -webkit-transform: translate(100%);
      -ms-transform: translate(100%);
          transform: translate(100%);
}
.animated .completed.in-view #school_flashlight-fish4 {
  -webkit-animation-play-state: running;
          animation-play-state: running;
}

@-webkit-keyframes flashlight-swim4 {
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@keyframes flashlight-swim4 {
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
#d400 .schools {
  position: relative;
  height: 400px;
  margin-top: 2rem;
}

@media (max-width: 54em) {
  #d600 .challenge ol {
    float: left;
    width: calc(100% - 219.5px - 2rem);
  }
  #d600 .puzzle {
    width: 219.5px;
    float: right;
  }
  #d600 .content {
    padding-right: calc(219.5px + 2rem);
  }
}
@media (min-width: 54em) {
  #d600 .content, #d600 .challenge {
    -webkit-column-gap: calc(219.5px + 4rem);
       -moz-column-gap: calc(219.5px + 4rem);
            column-gap: calc(219.5px + 4rem);
  }
  #d600 .puzzle {
    position: absolute;
    top: 0;
    right: 48%;
    -webkit-transform: translateX(40%);
        -ms-transform: translateX(40%);
            transform: translateX(40%);
    width: 219.5px;
    z-index: 1;
  }
}
#d600 .puzzle {
  height: 100vh;
}

.creature_nautilus {
  width: 224px;
  height: 210px;
}
.creature_nautilus:before {
  background-position: 63.09524% 40.20857%;
  background-size: 250% auto;
  height: 200%;
}
@media (min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .creature_nautilus:before {
    background-size: 250% auto;
    background-position: 63.09524% 40.20857%;
  }
}

.in-view #creature_nautilus1 {
  -webkit-animation: nautyBounce 3.4s infinite alternate;
          animation: nautyBounce 3.4s infinite alternate;
}
.in-view #creature_nautilus1:before {
  -webkit-animation: nautyRaspberry steps(1) 2.1s infinite;
          animation: nautyRaspberry steps(1) 2.1s infinite;
}

.in-view #creature_nautilus1 {
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

@-webkit-keyframes nautyRaspberry {
  25% {
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  35% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  45% {
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
}

@keyframes nautyRaspberry {
  25% {
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  35% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  45% {
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
}
@-webkit-keyframes nautyBounce {
  100% {
    -webkit-transform: translateY(50vh);
            transform: translateY(50vh);
  }
}
@keyframes nautyBounce {
  100% {
    -webkit-transform: translateY(50vh);
            transform: translateY(50vh);
  }
}
#d800 .content, #d800 .challenge {
  -webkit-column-count: unset;
     -moz-column-count: unset;
          column-count: unset;
}
@media (min-width: 841px) {
  #d800 .challenge_wrapper {
    float: left;
    width: calc(50% - 1rem);
  }
  #d800 .puzzle {
    float: right;
    width: calc(50% - 1rem);
  }
}

.creature_humboldt-squid {
  width: 560px;
  height: 516px;
}
.creature_humboldt-squid:before {
  background-position: 0 60.76046%;
  background-size: 100% auto;
  height: 400%;
}
@media (min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .creature_humboldt-squid:before {
    background-size: 100% auto;
    background-position: 0 60.76046%;
  }
}

.creature_humboldt-squid .darkening {
  -webkit-filter: none;
          filter: none;
  width: 560px;
  height: 516px;
  position: absolute;
  top: 0;
  left: 0;
}
.creature_humboldt-squid .darkening:before {
  background-position: 0 100%;
  background-size: 100% auto;
  height: 400%;
}
@media (min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .creature_humboldt-squid .darkening:before {
    background-size: 100% auto;
    background-position: 0 100%;
  }
}
.animated .in-view .creature_humboldt-squid .darkening {
  -webkit-animation: excited 70ms infinite alternate linear;
          animation: excited 70ms infinite alternate linear;
}
.in-view .creature_humboldt-squid .darkening {
  -webkit-animation: excited 500ms infinite alternate linear;
          animation: excited 500ms infinite alternate linear;
}

.in-view .creature_humboldt-squid:before, .in-view .creature_humboldt-squid .darkening:before {
  -webkit-animation: hunting steps(3) 1.3s infinite alternate;
          animation: hunting steps(3) 1.3s infinite alternate;
}

#creature_humboldt-squid1 {
  -webkit-transform: scale(-1) translateY(10%);
      -ms-transform: scale(-1) translateY(10%);
          transform: scale(-1) translateY(10%);
}

#creature_humboldt-squid2 {
  -webkit-transform: scale(0.9) translate(5%, -41%);
      -ms-transform: scale(0.9) translate(5%, -41%);
          transform: scale(0.9) translate(5%, -41%);
}

@-webkit-keyframes hunting {
  100% {
    -webkit-transform: translateY(-75%);
            transform: translateY(-75%);
  }
}

@keyframes hunting {
  100% {
    -webkit-transform: translateY(-75%);
            transform: translateY(-75%);
  }
}
@-webkit-keyframes excited {
  100% {
    opacity: 0;
  }
}
@keyframes excited {
  100% {
    opacity: 0;
  }
}
#d1600 .puzzle {
  -webkit-column-break-after: always;
     page-break-after: always;
          break-after: always;
  padding-bottom: 1.66667rem;
  position: relative;
  height: 275px;
}
#d1600 .keep-together {
  display: inline-block;
}

@media (min-width: 54em) {
  #d1600 .bonus .content {
    -webkit-column-count: unset;
       -moz-column-count: unset;
            column-count: unset;
    padding-left: calc(50% + 2rem);
  }
}
@media (max-width: 1116px) {
  #d1600 .content, #d1600 .challenge {
    -webkit-column-count: unset;
       -moz-column-count: unset;
            column-count: unset;
  }
  #d1600 .bonus .content {
    margin-top: 314px;
    padding-left: 0;
  }
}
.creature_orange-roughy {
  width: 500px;
  height: 275px;
}
.creature_orange-roughy:before {
  background-position: 0 32.86094%;
  background-size: 112.0% auto;
  height: 200%;
}
@media (min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .creature_orange-roughy:before {
    background-size: 112.0% auto;
    background-position: 0 32.86094%;
  }
}
.in-view .creature_orange-roughy {
  -webkit-animation: gentlyHovering cubic-bezier(0.645, 0.045, 0.355, 1) 5.5s infinite alternate;
          animation: gentlyHovering cubic-bezier(0.645, 0.045, 0.355, 1) 5.5s infinite alternate;
}
.in-view .creature_orange-roughy:before {
  -webkit-animation: roughSwimming steps(1) 5.5s alternate-reverse infinite;
          animation: roughSwimming steps(1) 5.5s alternate-reverse infinite;
}

@-webkit-keyframes gentlyHovering {
  100% {
    -webkit-transform: translateY(15%);
            transform: translateY(15%);
  }
}

@keyframes gentlyHovering {
  100% {
    -webkit-transform: translateY(15%);
            transform: translateY(15%);
  }
}
@-webkit-keyframes roughSwimming {
  50% {
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
}
@keyframes roughSwimming {
  50% {
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
}
.orange-roughy-revelation {
  opacity: 0 !important;
}

#d2600 .puzzle {
  position: relative;
  height: 800px;
  max-width: 716px;
  margin: 4rem auto 0;
  height: 800px;
}
#d2600 .puzzle .creature, #d2600 .puzzle .creature_humboldt-squid .darkening, .creature_humboldt-squid #d2600 .puzzle .darkening {
  position: absolute;
}
#d2600 .jump {
  padding-top: calc(226px + 10.33333rem );
}
#d2600 .creature .lumi, #d2600 .creature_humboldt-squid .darkening .lumi, .creature_humboldt-squid #d2600 .darkening .lumi {
  pointer-events: none;
}
#d2600 .video {
  margin-bottom: 2rem;
}
#d2600 .content, #d2600 .challenge {
  -webkit-column-count: unset;
     -moz-column-count: unset;
          column-count: unset;
}
@media (min-width: 1153px) {
  #d2600 .challenge_wrapper {
    float: right;
    width: calc(50% - 1rem);
  }
  #d2600 .puzzle {
    float: left;
    width: calc(50% - 1rem);
  }
}

.photophores {
  padding: 0;
  text-align: center;
  width: 500px;
  margin: 1rem auto 0;
  position: relative;
}
.photophores figcaption {
  clear: both;
  width: 80%;
  margin: 0 auto;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.photophores figcaption strong {
  display: block;
}
.photophores .dish {
  background: #fff;
  border-radius: 100%;
  position: relative;
}
.photophores .pointer {
  width: 172px;
  height: 162px;
  pointer-events: none;
  position: absolute;
  top: 41%;
  left: 49%;
  -webkit-transform: translate(-50%, -18%);
      -ms-transform: translate(-50%, -18%);
          transform: translate(-50%, -18%);
}

.specimen_flashlight-fish {
  float: right;
}

.specimen_dragonfish {
  float: left;
}

.dish_flashlight-fish {
  width: 226px;
  height: 226px;
}
.dish_flashlight-fish:before {
  background-position: 61.07784% 0;
  background-size: 247.78761% auto;
  height: 100%;
}
@media (min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .dish_flashlight-fish:before {
    background-size: 247.78761% auto;
    background-position: 61.07784% 0;
  }
}
.dish_flashlight-fish .lumi {
  left: 19.46903%;
  top: 38.71681%;
  width: 40.48673%;
  height: 32.07965%;
}
.dish_flashlight-fish .lumi {
  -webkit-transform: scaleX(-1);
      -ms-transform: scaleX(-1);
          transform: scaleX(-1);
}
.dish_flashlight-fish:before {
  right: -2px;
  top: -2px;
  position: relative;
}

.dish_dragonfish {
  width: 226px;
  height: 226px;
}
.dish_dragonfish:before {
  background-position: 55.68862% 3.184%;
  background-size: 247.78761% auto;
  height: 100%;
}
@media (min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .dish_dragonfish:before {
    background-size: 247.78761% auto;
    background-position: 55.68862% 3.184%;
  }
}
.dish_dragonfish .lumi {
  left: 56.63717%;
  top: 44.69027%;
  width: 19.9115%;
  height: 8.40708%;
}
.dish_dragonfish:before {
  left: -2px;
  position: relative;
}

.creature_viperfish {
  width: 432px;
  height: 214px;
  top: 450px;
  left: -20%;
}
.creature_viperfish:before {
  background-position: 0 6.35724%;
  background-size: 129.62963% auto;
  height: 100%;
}
@media (min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .creature_viperfish:before {
    background-size: 129.62963% auto;
    background-position: 0 6.35724%;
  }
}
.creature_viperfish .lumi {
  left: 16.55093%;
  top: 0.93458%;
  width: 70.83333%;
  height: 92.75701%;
}

.creature_gulper-eel {
  width: 282px;
  height: 498px;
  right: 0;
  top: 0;
}
.creature_gulper-eel:before {
  background-position: 0 19.43742%;
  background-size: 198.58156% auto;
  height: 200%;
}
@media (min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .creature_gulper-eel:before {
    background-size: 198.58156% auto;
    background-position: 0 19.43742%;
  }
}
.creature_gulper-eel .lumi {
  left: 5.31915%;
  top: 49.6988%;
  width: 20.39007%;
  height: 8.73494%;
}
.creature_gulper-eel .lumi {
  -webkit-animation-delay: 300ms !important;
          animation-delay: 300ms !important;
}
.in-view .creature_gulper-eel:before {
  -webkit-animation: wriggle steps(1) 500ms infinite;
          animation: wriggle steps(1) 500ms infinite;
}

.creature_dragonfish {
  width: 482px;
  height: 168px;
  left: 10%;
  top: -81px;
}
.creature_dragonfish:before {
  background-position: 0 12.79336%;
  background-size: 116.18257% auto;
  height: 200%;
}
@media (min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .creature_dragonfish:before {
    background-size: 116.18257% auto;
    background-position: 0 12.79336%;
  }
}
.creature_dragonfish .lumi {
  left: 8.71369%;
  top: 6.25%;
  width: 83.92116%;
  height: 75.59524%;
}
.in-view .creature_dragonfish:before {
  -webkit-animation: wriggle steps(1) 500ms infinite;
          animation: wriggle steps(1) 500ms infinite;
}

.creature_anglerfish {
  width: 212px;
  height: 196px;
  -webkit-transform: scaleX(-1);
      -ms-transform: scaleX(-1);
          transform: scaleX(-1);
  top: 138px;
  left: 16%;
  z-index: 1;
}
.creature_anglerfish:before {
  background-position: 0 40.04616%;
  background-size: 264.15094% auto;
  height: 200%;
}
@media (min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .creature_anglerfish:before {
    background-size: 264.15094% auto;
    background-position: 0 40.04616%;
  }
}
.creature_anglerfish .lumi {
  width: 100%;
  height: 200%;
  top: 0;
  left: 0;
  -webkit-animation: none !important;
          animation: none !important;
}
.in-view .creature_anglerfish .lumi {
  -webkit-animation: wriggle steps(1) 500ms infinite !important;
          animation: wriggle steps(1) 500ms infinite !important;
}
.animated .in-view.completed#d2600 .puzzle .creature_anglerfish .lumi {
  -webkit-animation: winking steps(1) infinite 500ms, wriggle steps(1) 500ms infinite !important;
          animation: winking steps(1) infinite 500ms, wriggle steps(1) 500ms infinite !important;
}
.in-view .creature_anglerfish:before {
  -webkit-animation: wriggle steps(1) 500ms infinite;
          animation: wriggle steps(1) 500ms infinite;
}

.creature_bristlemouth {
  width: 282px;
  height: 62px;
  top: 370px;
  left: 10%;
}
.creature_bristlemouth:before {
  background-position: 0 9.25%;
  background-size: 198.58156% auto;
  height: 200%;
}
@media (min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .creature_bristlemouth:before {
    background-size: 198.58156% auto;
    background-position: 0 9.25%;
  }
}
.creature_bristlemouth .lumi {
  left: 2.83688%;
  top: 43.54839%;
  width: 65.24823%;
  height: 40.32258%;
}
.creature_bristlemouth .lumi {
  -webkit-animation-delay: 200ms !important;
          animation-delay: 200ms !important;
}
.in-view .creature_bristlemouth:before {
  -webkit-animation: wriggle steps(1) 500ms infinite;
          animation: wriggle steps(1) 500ms infinite;
}

.animated .in-view.completed#d2600 .puzzle .lumi {
  -webkit-animation: winking steps(1) infinite 500ms;
          animation: winking steps(1) infinite 500ms;
}

#d2600 .puzzle .creature, #d2600 .puzzle .creature_humboldt-squid .darkening, .creature_humboldt-squid #d2600 .puzzle .darkening, #d2600 .dish_dragonfish {
  color: #436c6f;
  fill: currentColor;
}
#d2600 .dish_flashlight-fish {
  color: #56fddb;
  fill: currentColor;
}

#d5000 .puzzle {
  width: 300px;
  height: 270px;
  position: relative;
  margin: 0 auto;
}

.creature_vomiting-shrimp {
  width: 170px;
  height: 114px;
}
.creature_vomiting-shrimp:before {
  background-position: 72.30769% 9.38557%;
  background-size: 329.41176% auto;
  height: 200%;
}
@media (min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .creature_vomiting-shrimp:before {
    background-size: 329.41176% auto;
    background-position: 72.30769% 9.38557%;
  }
}

#creature_vomiting-shrimp1 {
  position: absolute;
  top: 40%;
  left: 25%;
}
.in-view #creature_vomiting-shrimp1 {
  -webkit-animation: escapingGloriously cubic-bezier(0.215, 0.61, 0.355, 1) 500ms 200ms forwards;
          animation: escapingGloriously cubic-bezier(0.215, 0.61, 0.355, 1) 500ms 200ms forwards;
}
.in-view #creature_vomiting-shrimp1:before {
  -webkit-animation: tailTuck steps(1) 300ms 1 forwards;
          animation: tailTuck steps(1) 300ms 1 forwards;
}

@-webkit-keyframes escapingGloriously {
  60% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    opacity: 0;
  }
}

@keyframes escapingGloriously {
  60% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    opacity: 0;
  }
}
@-webkit-keyframes tailTuck {
  100% {
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
}
@keyframes tailTuck {
  100% {
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
}
.luminous-spew {
  width: 300px;
  height: 270px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  pointer-events: none;
  -webkit-animation: incriminatingPuke cubic-bezier(0.645, 0.045, 0.355, 1) 2.1s 1.3s infinite alternate;
          animation: incriminatingPuke cubic-bezier(0.645, 0.045, 0.355, 1) 2.1s 1.3s infinite alternate;
}
.luminous-spew:before {
  background-position: 0 0;
  background-size: 100% auto;
  height: 400%;
}
.luminous-spew:before {
  background-size: 100% 100%;
  pointer-events: none;
}
.in-view .luminous-spew:before {
  -webkit-transition: -webkit-transform steps(4, end) 500ms;
          transition: transform steps(4, end) 500ms;
}

@-webkit-keyframes incriminatingPuke {
  100% {
    opacity: .8;
  }
}

@keyframes incriminatingPuke {
  100% {
    opacity: .8;
  }
}
#d6000 {
  padding-bottom: calc(140px + 2rem);
  margin-bottom: -140px;
  box-sizing: border-box;
}

.creature_hagfish {
  width: 204px;
  height: 89px;
  position: absolute;
  bottom: -20px;
  right: 2em;
  z-index: 1;
}
.creature_hagfish:before {
  background-position: 0 0;
  background-size: 274.5098% auto;
  height: 200%;
}
@media (min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .creature_hagfish:before {
    background-size: 274.5098% auto;
    background-position: 0 0;
  }
}
.in-view .creature_hagfish {
  -webkit-animation: wrigglingAround cubic-bezier(0.645, 0.045, 0.355, 1) 300ms infinite;
          animation: wrigglingAround cubic-bezier(0.645, 0.045, 0.355, 1) 300ms infinite;
}
.in-view .creature_hagfish:before {
  -webkit-animation: wriggle steps(1) 300ms infinite;
          animation: wriggle steps(1) 300ms infinite;
}

#creature_hagfish1 {
  position: absolute;
  bottom: 105px;
  right: 4rem;
}

#creature_hagfish1 {
  bottom: 0;
}

@-webkit-keyframes wrigglingAround {
  50% {
    -webkit-transform: translate(-1%, -1%);
            transform: translate(-1%, -1%);
  }
}

@keyframes wrigglingAround {
  50% {
    -webkit-transform: translate(-1%, -1%);
            transform: translate(-1%, -1%);
  }
}
@-webkit-keyframes wriggle {
  50% {
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
}
@keyframes wriggle {
  50% {
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
}
.ooze {
  pointer-events: none;
  background: #12454b;
  height: 140px;
  width: 100%;
  position: relative;
}

.ooze_near {
  background: url('../img/ooze_near.svg?1445360730') repeat-x 0 30px;
  z-index: 2;
}

.ooze_far {
  background: url('../img/ooze_far.svg?1445360730') repeat-x 0 10px;
}

.ooze_far, .ooze_near {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* UI */
.panel {
  box-sizing: border-box;
  width: 100%;
  max-height: calc(100vh - 11.66667rem + 8rem);
  opacity: 0;
  overflow: auto;
  padding: 4rem 4rem 4rem 2rem;
  position: relative;
  -webkit-transition: opacity 200ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
          transition: opacity 200ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
  z-index: 0;
}
.panel:not(.psa) {
  position: absolute;
  top: 0;
  left: 0;
}
.panel.in-focus {
  opacity: 1;
  z-index: 1;
}

#highlight-toggles {
  color: #56fddb;
}
#highlight-toggles:hover, #highlight-toggles:focus {
  color: #A9DDF2;
}

.toggle {
  -webkit-transition: -webkit-transform cubic-bezier(0.175, 0.885, 0.32, 1.275) 300ms, opacity cubic-bezier(0.55, 0.055, 0.675, 0.19) 300ms;
          transition: transform cubic-bezier(0.175, 0.885, 0.32, 1.275) 300ms, opacity cubic-bezier(0.55, 0.055, 0.675, 0.19) 300ms;
  -webkit-transform: scale(1.2);
      -ms-transform: scale(1.2);
          transform: scale(1.2);
  opacity: 0;
}
.loaded .toggle {
  opacity: 1;
  -webkit-transition-delay: 800ms, 500ms;
          transition-delay: 800ms, 500ms;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
}
.toggle.highlighted {
  -webkit-animation: pop 300ms cubic-bezier(0.55, 0.055, 0.675, 0.19) 2 alternate;
          animation: pop 300ms cubic-bezier(0.55, 0.055, 0.675, 0.19) 2 alternate;
}

@-webkit-keyframes pop {
  100% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
}

@keyframes pop {
  100% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
}
.psa {
  background: url('../img/svg/arrow-up.svg?1446508962') no-repeat calc(50% - 1rem) 0/auto 8rem;
  height: calc(100vh - 11.66667rem + 8rem);
  text-align: center;
}
.psa h3 {
  display: inline-block;
  position: relative;
  margin-bottom: 1rem;
  margin-left: -2rem;
}
.psa h3 span:first-child {
  margin-left: -.25rem;
  padding-right: 1rem;
}
.psa p, .psa h3 {
  text-indent: 0 !important;
  text-align: left;
}
.psa .ff-download {
  display: inline-block;
  margin: 1rem 0 3rem;
}
.psa .psa_wrapper {
  background: #000c1c;
  border: 4px solid #fff;
  opacity: 0;
  -webkit-transition: opacity 800ms 500ms cubic-bezier(0.215, 0.61, 0.355, 1);
          transition: opacity 800ms 500ms cubic-bezier(0.215, 0.61, 0.355, 1);
  margin: 0rem;
  padding: 0 1rem;
}
.bathypelagic .psa .psa_wrapper, .abyssal .psa .psa_wrapper {
  background: #007e84;
}
.loaded .psa .psa_wrapper {
  opacity: 1;
}
.psa .psa_wrapper strong {
  color: #fff;
}
.psa .features p {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1rem 0;
}
.psa .features .illo {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin-right: 1rem;
}
.psa .features .text {
  -webkit-box-flex: 4;
  -webkit-flex: 4;
      -ms-flex: 4;
          flex: 4;
}
.psa .features svg {
  width: 100%;
  fill: rgba(57, 219, 180, 0.5);
}
@media (min-width: 54em) {
  .psa .for-browsers {
    margin: 0 10%;
  }
  .psa .for-browsers p {
    padding: 0.66667rem;
  }
  .psa .features {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
  .psa .features p {
    margin: 0 auto;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
    text-align: left;
    padding: 1rem;
  }
  .psa .features p:nth-child(1) {
    padding-left: 0;
  }
  .psa .features p:nth-child(2) {
    padding-right: 0;
  }
}

#dashboard {
  position: relative;
}
@media (min-width: 54em) {
  #dashboard {
    max-width: 102rem;
    margin: 0 auto;
  }
}

.menu {
  -webkit-transition: background-color cubic-bezier(0.55, 0.055, 0.675, 0.19) 300ms;
          transition: background-color cubic-bezier(0.55, 0.055, 0.675, 0.19) 300ms;
}
.won .menu {
  background-image: url('../img/svg/bg_tentacles.svg?1446508962');
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: 135% 0;
  background-size: auto 100%;
}
.loaded .menu {
  -webkit-transform: translateY(calc(100% - 3.66667rem));
      -ms-transform: translateY(calc(100% - 3.66667rem));
          transform: translateY(calc(100% - 3.66667rem));
}
.animated .menu.hovered {
  -webkit-transform: translateY(calc(100% - 4rem));
      -ms-transform: translateY(calc(100% - 4rem));
          transform: translateY(calc(100% - 4rem));
}
.animated .menu.closeable {
  margin-top: 0.33333rem;
}
.animated .menu {
  -webkit-transition: background-color cubic-bezier(0.55, 0.055, 0.675, 0.19) 300ms, -webkit-transform cubic-bezier(0.645, 0.045, 0.355, 1) 500ms, margin-top cubic-bezier(0.645, 0.045, 0.355, 1) 500ms;
          transition: background-color cubic-bezier(0.55, 0.055, 0.675, 0.19) 300ms, transform cubic-bezier(0.645, 0.045, 0.355, 1) 500ms, margin-top cubic-bezier(0.645, 0.045, 0.355, 1) 500ms;
}
.bathypelagic .menu, .abyssal .menu {
  background: #007e84;
}
.menu .logo {
  height: 35px;
  float: left;
  margin-right: 0.66667rem;
}
.menu .actions {
  float: right;
}
.menu .download {
  display: none;
  border: 2px solid #fff;
  border-radius: .25em;
  color: #fff;
  font-family: "Fira Sans", Helvetica, Arial, sans-serif;
  font-weight: 700;
  text-decoration: none;
  padding: 0.33333rem 1rem;
  -webkit-transition: background-color 200ms cubic-bezier(0.55, 0.055, 0.675, 0.19), border-color 200ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
          transition: background-color 200ms cubic-bezier(0.55, 0.055, 0.675, 0.19), border-color 200ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.non-ff .menu .download {
  display: inline-block;
}
.menu .download:hover, .menu .download:active, .menu .download:focus {
  background-color: #39dbb4;
  border: 2px solid #39dbb4;
}

#menu_options {
  margin: 0;
  padding: 0.33333rem 4rem 0.33333rem 2rem;
  text-align: center;
}
#menu_options .ff-download {
  position: absolute;
  left: 2rem;
  top: 0.66667rem;
  opacity: 0;
  display: none;
}
.class-dismissed #menu_options .ff-download {
  -webkit-transition: opacity cubic-bezier(0.55, 0.055, 0.675, 0.19) 200ms;
          transition: opacity cubic-bezier(0.55, 0.055, 0.675, 0.19) 200ms;
  opacity: 1;
  display: block;
}

.controls {
  display: inline-block;
  margin-top: 0.66667rem;
  position: relative;
}

#tabs {
  position: absolute;
  right: 3rem;
  top: 0.33333rem;
}

.tab, .toggle {
  margin-left: 0.33333rem;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  text-transform: uppercase;
}
.tab:hover, .tab:active, .tab:focus, .toggle:hover, .toggle:active, .toggle:focus {
  color: #4ed9f2;
}

.toggle:first-child {
  margin-left: 0;
}

.tab {
  letter-spacing: .1em;
  padding: 0.33333rem 1rem;
  border-radius: .25em;
  margin-top: 0.33333rem;
  display: none;
  opacity: 0;
  -webkit-transition: background 200ms cubic-bezier(0.215, 0.61, 0.355, 1), color 200ms cubic-bezier(0.215, 0.61, 0.355, 1), opacity 200ms cubic-bezier(0.215, 0.61, 0.355, 1);
          transition: background 200ms cubic-bezier(0.215, 0.61, 0.355, 1), color 200ms cubic-bezier(0.215, 0.61, 0.355, 1), opacity 200ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.class-dismissed .tab {
  opacity: 1;
  display: inline-block;
}
.tab:hover, .tab:active, .tab:focus, .tab.active {
  background: rgba(0, 12, 28, 0.4);
  -webkit-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19), cubic-bezier(0.55, 0.055, 0.675, 0.19);
          transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19), cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.tab.active {
  color: #c6244b;
}
.tab svg {
  width: 1.33333rem;
  height: 1.33333rem;
}
@media (max-width: 67.46667em) {
  .tab span {
    display: none;
  }
}

.share_tab svg {
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

.sharing {
  text-align: right;
  padding: 1rem 4rem 1rem 2rem;
}

.crew_tab svg {
  fill: currentColor;
}

.toggle.activated {
  color: #4ed9f2;
}

.certificate_tab {
  color: #fffc99;
}
.certificate_tab svg {
  fill: currentColor;
}

.toggle_bg {
  position: relative;
  width: 53px;
  height: 24px;
  fill: rgba(0, 12, 28, 0.4);
  stroke: currentColor;
  stroke-width: 2;
}
.toggle_bg:before, .toggle_bg:after {
  font-size: 10px;
  display: block;
  letter-spacing: 0;
  position: absolute;
  top: -3px;
}
.animated .toggle_bg:before, .animated .toggle_bg:after {
  -webkit-transition: opacity 200ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
          transition: opacity 200ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.toggle_bg .toggle_backdrop {
  width: 53px;
  height: 24px;
}
.toggle_bg:before {
  content: "off";
  left: 26px;
}
.toggle_bg:after {
  content: "on";
  left: 8px;
  opacity: 0;
}
.activated .toggle_bg:before {
  opacity: 0;
}
.activated .toggle_bg:after {
  opacity: 1;
}

.toggle_button {
  width: 24px;
  height: 24px;
  position: absolute;
  top: 0;
  left: 0;
}
.toggle_button svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.activated .toggle_button {
  -webkit-transform: translateX(120%);
      -ms-transform: translateX(120%);
          transform: translateX(120%);
}
.animated .toggle_button {
  -webkit-transition: -webkit-transform 300ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
          transition: transform 300ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.toggle_button .nob {
  color: #A9DDF2;
}
.toggle_button .icon {
  fill: currentColor;
  stroke: none;
}

@media (min-width: 54em) {
  .ending .accolades, .ending .rewards {
    float: left;
    width: calc(50% - 1em);
  }
  .ending .rewards {
    float: right;
  }
}

.rewards {
  text-align: center;
}
@media (min-width: 54em) {
  .rewards {
    padding-top: 3rem;
  }
}
.rewards a {
  display: inline-block;
  padding: 1rem;
  border-radius: 0.33333rem;
  text-align: left;
  -webkit-transition: -webkit-transform 300ms cubic-bezier(0.55, 0.055, 0.675, 0.19), background 200ms cubic-bezier(0.55, 0.055, 0.675, 0.19), color 200ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
          transition: transform 300ms cubic-bezier(0.55, 0.055, 0.675, 0.19), background 200ms cubic-bezier(0.55, 0.055, 0.675, 0.19), color 200ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
  width: 13rem;
  margin: 0 1rem 1rem;
}
.rewards a svg {
  fill: currentColor;
}
.rewards a svg {
  width: 3rem;
  height: 3rem;
  float: left;
}
.rewards a span {
  width: 9rem;
  float: right;
}
.rewards a:link, .rewards a:visited {
  background: #56fddb;
  color: #007e84;
}
.rewards a:hover, .rewards a:active, .rewards a:focus {
  background: #4ed9f2;
  color: #000c1c;
  -webkit-transform: translate(1px, 1px);
      -ms-transform: translate(1px, 1px);
          transform: translate(1px, 1px);
}

.join-the-deep {
  display: none;
  text-align: center;
  margin: 1rem 0;
}
.join-the-deep a {
  display: inline-block;
}
.non-ff .join-the-deep {
  display: block;
}
.join-the-deep .ff-download {
  display: inline-block;
}
.join-the-deep .download {
  margin-top: 1rem;
  -webkit-transform: translateY(-1rem);
      -ms-transform: translateY(-1rem);
          transform: translateY(-1rem);
}

.crew li, .crew ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.crew ul {
  text-align: center;
}

.sound-off li {
  display: inline-block;
  width: 120px;
  margin: 1rem 2rem;
  vertical-align: top;
}
.sound-off .name {
  margin: 2rem 0 0.33333rem;
}

.crew h3 {
  margin-bottom: 1rem;
}
.crew a {
  text-decoration: none;
}
.crew .porthole {
  position: relative;
  display: block;
}
.crew .porthole img, .crew .porthole .captain-rachel {
  border-radius: 100%;
}
.crew .porthole:before {
  content: " ";
  display: block;
  position: absolute;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
  background: url('../img/svg/porthole.svg?1446508962') 0 0/100% 100%;
}
.crew .porthole.captains-porthole:before {
  background: url('../img/svg/porthole_captains.svg?1446535803') 0 0/100% 100%;
  height: 128%;
}
.crew .captain-rachel {
  width: 104px;
  height: 104px;
  overflow: hidden;
  position: relative;
  z-index: -1;
}
.crew .captain-rachel div {
  background-position: 94.73684% 6.35188%;
  background-size: 538.46154% auto;
  height: 200%;
}
@media (min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .crew .captain-rachel div {
    background-size: 538.46154% auto;
    background-position: 94.73684% 6.35188%;
  }
}
.crew .captain-rachel div {
  -webkit-animation: comandeering-this-vessel steps(1) 200ms forwards paused;
          animation: comandeering-this-vessel steps(1) 200ms forwards paused;
}
@media (max-device-pixel-ratio: 1), (-webkit-max-device-pixel-ratio: 2), (max-resolution: 192dpi) {
  .crew .captain-rachel div {
    background-image: url('../img/creatures-s2f813f5aea.png');
  }
}
@media (min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .crew .captain-rachel div {
    background-image: url('../img/creatures2x-s3d68c31f5f.png');
  }
}
.crew .nautical, .crew .irl {
  -webkit-transition: opacity 200ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
          transition: opacity 200ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.crew .irl {
  position: relative;
  opacity: 0;
}
.crew .nautical {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.crew li:hover .irl {
  opacity: 1;
  z-index: 1;
}
.crew li:hover .nautical {
  opacity: 0;
}
.crew .name {
  margin: 2rem 0 0.33333rem;
}
.crew .title {
  position: relative;
}

.thanks {
  padding-bottom: 2rem;
}
.thanks h4 {
  text-align: center;
}
.thanks li {
  display: inline-block;
  margin: 0 1rem;
}
.thanks .title {
  text-align: left;
}

#dismiss-onboarding {
  cursor: pointer;
  display: block;
  padding: 1rem;
  border-radius: 0.33333rem;
  opacity: 0;
  -webkit-transition: -webkit-transform 300ms cubic-bezier(0.55, 0.055, 0.675, 0.19), background 200ms cubic-bezier(0.55, 0.055, 0.675, 0.19), color 200ms cubic-bezier(0.55, 0.055, 0.675, 0.19), opacity 200ms cubic-bezier(0.215, 0.61, 0.355, 1) 1.3s;
          transition: transform 300ms cubic-bezier(0.55, 0.055, 0.675, 0.19), background 200ms cubic-bezier(0.55, 0.055, 0.675, 0.19), color 200ms cubic-bezier(0.55, 0.055, 0.675, 0.19), opacity 200ms cubic-bezier(0.215, 0.61, 0.355, 1) 1.3s;
  width: 13rem;
  margin: -3rem auto 1rem;
  background: #56fddb;
  color: #007e84;
  display: inline-block;
}
#dismiss-onboarding:hover, #dismiss-onboarding:active, #dismiss-onboarding:focus {
  background: #4ed9f2;
  color: #000c1c;
  -webkit-transform: translate(1px, 1px);
      -ms-transform: translate(1px, 1px);
          transform: translate(1px, 1px);
}
.loaded #dismiss-onboarding {
  opacity: 1;
}

.for-browsers {
  text-align: center;
  display: none;
}
.non-ff .for-browsers {
  display: block;
}

@-webkit-keyframes comandeering-this-vessel {
  100% {
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
}

@keyframes comandeering-this-vessel {
  100% {
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
}
.progress {
  width: 2rem;
  position: fixed;
  right: .5rem;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 10;
}
.progress ul, .progress li {
  list-style: none;
  margin: 0;
  padding: 0;
  text-indent: 0;
}
.progress .visited {
  display: block;
  opacity: 1;
}
.progress .completed svg {
  fill: #007e84;
  color: #002351;
}
.progress .in-view svg {
  fill: #fff;
  color: #0b4a61;
}
.progress svg {
  color: #000c1c;
  display: block;
  max-height: 5vh;
  width: 2rem;
  position: relative;
  z-index: 2;
  fill: #56fddb;
  -webkit-transition: fill cubic-bezier(0.55, 0.055, 0.675, 0.19) 300ms, color cubic-bezier(0.55, 0.055, 0.675, 0.19) 300ms;
          transition: fill cubic-bezier(0.55, 0.055, 0.675, 0.19) 300ms, color cubic-bezier(0.55, 0.055, 0.675, 0.19) 300ms;
}
.progress a {
  display: block;
  paddng: .25rem;
}
.progress li {
  display: none;
  opacity: 0;
  -webkit-transition: opacity cubic-bezier(0.215, 0.61, 0.355, 1) 3.4s;
          transition: opacity cubic-bezier(0.215, 0.61, 0.355, 1) 3.4s;
  position: relative;
}
.progress li:not(:first-child) {
  background: url("../img/icons/progress-dots.svg") no-repeat top center;
  background-size: 5vh auto;
  padding-top: 5vh;
}
.progress li:not(:first-child) span {
  top: calc(5vh - .6667em );
}
.progress li span {
  background: rgba(11, 74, 97, 0.8);
  border-radius: .5rem;
  position: absolute;
  top: 0;
  left: -1rem;
  padding-right: .5rem;
  opacity: 0;
  -webkit-transition: opacity cubic-bezier(0.68, -0.55, 0.265, 1.55) 200ms 200ms, -webkit-transform cubic-bezier(0.68, -0.55, 0.265, 1.55) 500ms 200ms;
          transition: opacity cubic-bezier(0.68, -0.55, 0.265, 1.55) 200ms 200ms, transform cubic-bezier(0.68, -0.55, 0.265, 1.55) 500ms 200ms;
  width: 15rem;
  padding: 0.66667rem;
  z-index: 1;
}
.progress li span:after {
  left: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: transparent;
  border-left-color: rgba(11, 74, 97, 0.8);
  border-width: .5rem;
  margin-top: -.5rem;
}
.progress li a:hover span {
  -webkit-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
          transform: translateX(-100%);
  opacity: 1;
}

.addthis_sharing_toolbox {
  display: inline-block;
  margin: 0 auto;
}

#challenge_orange-roughy svg {
  color: #c6244b;
}

#challenge_orange-roughy.completed svg {
  color: currentColor;
}

#d1200 em {
  display: block;
  text-align: right;
}

#d3200 .callout {
  -webkit-transition-delay: 2.1s;
          transition-delay: 2.1s;
  -webkit-transition-duration: 3.4s;
          transition-duration: 3.4s;
}

@media (min-width: 32.46667em) {
  .challenge li, .content li {
    padding-top: 0.66667rem;
  }
}
@media (min-width: 42.53333em) {
  .challenge li, .content li {
    padding-top: 1rem;
  }
}
.creature#creature_orange-roughy1, .creature_humboldt-squid #creature_orange-roughy1.darkening {
  -webkit-filter: url("../img/blue-filter.svg#seafish");
          filter: url("../img/blue-filter.svg#seafish");
}

.shh {
  display: none !important;
  opacity: 0 !important;
}