.hide {
  display: none !important; }

@media only screen and (max-width: 768px) {
  .hide-mobile {
    display: none !important; } }

@media only screen and (min-width: 768px) {
  .hide-desktop {
    display: none !important; } }

.topbar {
  background-color: #ba0c2f;
  position: absolute;
  top: 0;
  left: 0;
  height: 65px;
  width: 100%;
  z-index: 100; }

.logo {
  position: absolute;
  top: 0;
  left: 0;
  height: 65px;
  width: 115px;
  background: #ba0c2f url(assets/images/logo.png) no-repeat scroll top left; }

.align-vertical-center {
  display: table-cell;
  vertical-align: middle; }

.align-h-right {
  text-align: right; }

a,
a:link,
a:visited
a:active {
  color: #fff; }
  a:hover,
  a:link:hover,
  a:visited
a:active:hover {
    text-decoration: none; }

.btn {
  background: #ba0c2f;
  border: 0;
  display: inline-block;
  margin: 0 0 22px 0;
  padding: 13px 30px;
  min-width: 175px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -moz-transition: background 0.15s linear;
  -o-transition: background 0.15s linear;
  -webkit-transition: background 0.15s linear;
  transition: background 0.15s linear;
  -webkit-appearance: none;
  box-shadow: inset 0 -4px #930015;
  border-radius: 5px; }
  .btn:hover {
    background: #d40d34; }
  .btn:hover, .btn:focus, .btn:active {
    outline: none; }

.key-item {
  opacity: 0.5;
  border: 1px solid #fff;
  border-radius: 10px;
  padding: 2px 10px;
  display: block;
  text-decoration: none; }
  .key-item.active, .key-item:hover {
    opacity: 1.0; }

.key-icon {
  height: 10px;
  width: 10px;
  display: inline-block;
  border: 1px solid #fff; }

.key-nodules {
  background-color: #22ff00; }

.key-crusts {
  background-color: #ff0000; }

.key-vents {
  background-color: #009900;
  border-radius: 50%;
  border-color: #88ff88; }

.key-trenches {
  background-color: #330099; }

.key-sea-ice {
  background-color: #ffffff; }

.key-cold-seeps {
  background-color: #fc00f4;
  border-radius: 50%;
  border-color: #fc00f4; }

.key-seamounts {
  background-color: #ffff00; }

.key-coral {
  background-color: #ff8000; }

.key-canyons {
  background-color: #4b79c7; }

.key-shelf {
  background-color: #3daefa; }

.key-eez {
  background-color: #000; }

.key-ccz {
  background-color: #D31245; }

.key-protected {
  background-color: #374C70; }

.key-diversity {
  background: transparent url("assets/images/key-diversity-bg.png") scroll no-repeat -18px -21px; }

.key-knolls {
  background-color: #660000; }

#orientation-warning {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 65px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.69);
  color: #fff;
  font-weight: bold;
  z-index: 400;
  line-height: 45px;
  padding: 10px; }

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #F5F5F5; }

::-webkit-scrollbar {
  width: 10px;
  background-color: #F5F5F5; }

::-webkit-scrollbar-thumb {
  background-color: #000000;
  border: 2px solid #555555; }

@media screen and (orientation: landscape) and (max-width: 768px) {
  #orientation-warning {
    display: block; } }

@media only screen and (max-width: 768px) {
  /* !important is needed sometimes */
  ::-webkit-scrollbar {
    width: 12px !important; }
  ::-webkit-scrollbar-thumb:window-inactive {
    background: #41617D !important; } }

@font-face {
  font-family: 'Proxima Nova';
  src: url("assets/fonts/7e90123f-e4a7-4689-b41f-6bcfe331c00a.eot?#iefix");
  src: url("assets/fonts/7e90123f-e4a7-4689-b41f-6bcfe331c00a.eot?#iefix") format("eot"), url("assets/fonts/e56ecb6d-da41-4bd9-982d-2d295bec9ab0.woff") format("woff"), url("assets/fonts/2aff4f81-3e97-4a83-9e6c-45e33c024796.ttf") format("truetype"), url("assets/fonts/ab9cd062-380f-4b53-b1a7-c0bec7402235.svg#ab9cd062-380f-4b53-b1a7-c0bec7402235") format("svg"); }

@font-face {
  font-family: 'Proxima Nova Light';
  src: url("assets/fonts/93cc6d34-798e-42c8-87d2-fd6391801b63.eot?#iefix");
  src: url("assets/fonts/93cc6d34-798e-42c8-87d2-fd6391801b63.eot?#iefix") format("eot"), url("assets/fonts/2fa30669-9bbd-4ced-912f-db94a367ed6c.woff") format("woff"), url("assets/fonts/c12b3ebb-3771-483f-a84a-ac63d615c28e.ttf") format("truetype"), url("assets/fonts/2a961063-ea56-4a4b-8cea-bdae32edb0e2.svg#2a961063-ea56-4a4b-8cea-bdae32edb0e2") format("svg"); }

@font-face {
  font-family: 'Proxima Nova Semi';
  src: url("assets/fonts/87e4b4fc-cdf1-450a-8bed-dd818cba908d.eot?#iefix");
  src: url("assets/fonts/87e4b4fc-cdf1-450a-8bed-dd818cba908d.eot?#iefix") format("eot"), url("assets/fonts/70ae52ec-d89b-4c6a-9402-854ebe423c54.woff") format("woff"), url("assets/fonts/6a35571c-ea14-4dac-9ae1-0e7af0abeec8.ttf") format("truetype"), url("assets/fonts/ac2bdafc-d4a8-49d0-8a10-4e2f16bf7e3c.svg#ac2bdafc-d4a8-49d0-8a10-4e2f16bf7e3c") format("svg"); }

@font-face {
  font-family: 'Proxima Nova Bold';
  src: url("assets/fonts/fbc6b03a-b3a1-427c-a884-053deca3a53c.eot?#iefix");
  src: url("assets/fonts/fbc6b03a-b3a1-427c-a884-053deca3a53c.eot?#iefix") format("eot"), url("assets/fonts/d999c07b-a049-4eb5-b8a6-4f36ae25e67e.woff") format("woff"), url("assets/fonts/4d4a75f5-d32a-4a09-8665-133afd39cc37.ttf") format("truetype"), url("assets/fonts/8152bc4e-d700-4c78-b6be-326893e6f53f.svg#8152bc4e-d700-4c78-b6be-326893e6f53f") format("svg"); }

html {
  color: #333132;
  font: 62.5%/1.375 'Proxima Nova Light', Arial, Helvetica, sans-serif;
  -webkit-text-size-adjust: 100%; }

p, ul {
  margin: 0 0 22px 0;
  font-size: 1.6em; }

h1 {
  margin: 0 0 0.6em 0;
  font-size: 2.8em;
  line-height: 1.16; }
  @media only screen and (min-width: 768px) {
    h1 {
      font-size: 3.8em; } }

h2 {
  margin: 0 0 0.4em 0;
  font-size: 3.2em;
  line-height: 1; }

h3 {
  margin: 0 0 0.6em 0;
  font-size: 2.8em;
  line-height: 1; }

h4 {
  margin: 0 0 1em 0;
  font-size: 2.2em;
  line-height: 1; }

.btn, button {
  font-size: 1.8em;
  line-height: 1; }

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

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.icon-stack:before {
  content: "\e92e"; }

.icon-shrink2:before {
  content: "\e98c"; }

.icon-menu:before {
  content: "\e9bd"; }

.icon-info:before {
  content: "\ea0c"; }

.icon-exit:before {
  content: "\ea14"; }

.icon-play3:before {
  content: "\ea1c"; }

.icon-forward3:before {
  content: "\ea20"; }

.icon-backward2:before {
  content: "\ea1f"; }

.icon-volume-high:before {
  content: "\ea26"; }

.icon-arrow-left2:before {
  content: "\ea40"; }

.icon-share2:before {
  content: "\ea82"; }

.icon-google-plus:before {
  content: "\ea8b"; }

.icon-facebook:before {
  content: "\ea90"; }

.icon-twitter:before {
  content: "\ea96"; }

.icon-linkedin2:before {
  content: "\eaca"; }

.icon-pinterest2:before {
  content: "\ead2"; }

#menu {
  background-color: #ba0c2f;
  height: 65px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 200; }

#menu-narrative-container {
  background-color: #ba0c2f;
  float: left; }

#menu-narrative {
  float: left;
  padding: 0;
  margin-left: 103px; }

.narrative_button {
  float: left;
  height: 100%;
  line-height: 61px;
  padding: 0 15px; }
  .narrative_button p {
    margin: 0; }
  .narrative_button a {
    height: 100%;
    display: block;
    width: 100%;
    padding: 0 15px;
    color: #fff;
    text-decoration: none;
    border-bottom: 4px solid #ba0c2f; }
    .narrative_button a.active, .narrative_button a:hover {
      border-color: #d6d2c4; }
    .narrative_button a.active {
      font-weight: bold; }

.dropbtn {
  display: none; }

.menu-mobile-icons {
  float: right; }

.menu-item {
  display: block;
  height: 100%;
  float: right; }
  .menu-item:not(:last-child) {
    border-left: 1px solid rgba(224, 220, 219, 0.69); }
  .menu-item a {
    text-decoration: none;
    color: #fff;
    padding: 17px 9px;
    height: 100%;
    display: block; }
  .menu-item i {
    font-size: 30px; }

@media only screen and (min-width: 768px) {
  #topbar {
    background-color: rgba(0, 0, 0, 0.69); }
  .menu-item a {
    color: #fff;
    padding: 17px; } }

@media only screen and (max-width: 768px) {
  /* Dropdown Button */
  .dropbtn {
    background-color: #ba0c2f;
    color: #fff;
    padding: 16px;
    border: none;
    cursor: pointer;
    display: block;
    height: 65px;
    min-width: 110px;
    border-left: 1px solid rgba(255, 255, 255, 0.5);
    font-size: 1.6em; }
    .dropbtn:hover, .dropbtn:focus, .dropbtn:active {
      outline: none; }
  /* The container <div> - needed to position the dropdown content */
  .dropdown {
    position: relative;
    display: inline-block; }
  /* Dropdown Content (Hidden by Default) */
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #ba0c2f;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 400; }
  /* Links inside the dropdown */
  .dropdown-content a {
    color: #fff;
    padding: 0;
    text-decoration: none;
    display: block;
    border-bottom: 0 none; }
  .dropdown-content a.active {
    border-bottom: 0 none; }
  /* Show the dropdown menu on hover */
  .dropdown-content.open {
    display: block; }
  .narrative_button {
    float: left;
    height: auto;
    line-height: 30px;
    padding: 0;
    text-align: center;
    width: 100%; } }

.exit-fullscreen {
  font-size: 30px;
  line-height: 30px;
  color: #fff;
  text-decoration: none; }
  .exit-fullscreen:hover, .exit-fullscreen:focus, .exit-fullscreen:active {
    outline: none; }

#splashScreen .exit-fullscreen {
  position: absolute;
  top: 15px;
  right: 15px; }

#mapScreen {
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
  position: relative;
  right: 0;
  transition: all 1s ease 0s; }
  #mapScreen.hamburger-open {
    right: calc(100% - 48px); }

.leaflet-container {
  background-color: #4792B2; }

#map {
  height: 100%;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  z-index: 100; }
  #map .leaflet-control-container a {
    color: #000; }
  #map .leaflet-control-zoom {
    margin-top: 111px;
    display: none; }
    @media only screen and (min-width: 768px) {
      #map .leaflet-control-zoom {
        display: block; } }

#map-image-container {
  z-index: 200;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.69);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover; }
  @media only screen and (min-width: 768px) {
    #map-image-container.partial-cover {
      background-size: 55%;
      background-position: 25% 50%; } }

#fullscreen-caption {
  position: absolute;
  top: 75px;
  left: 10px;
  background-color: rgba(232, 230, 223, 0.5);
  color: #333132;
  padding: 5px;
  max-width: 300px; }
  #fullscreen-caption p {
    margin: 0;
    font-size: 1.25em; }

#map-legend {
  position: absolute;
  background: #fff;
  top: 110px;
  left: 12px;
  z-index: 401;
  padding: 5px;
  border-radius: 10px;
  box-shadow: 1px 1px 7px 0px black; }
  @media only screen and (min-width: 768px) {
    #map-legend {
      top: 35%;
      left: 15px;
      z-index: 101; } }

#map-legend-button {
  color: #fff;
  background-color: #ba0c2f;
  z-index: 101;
  position: absolute;
  top: 78px;
  left: 10px;
  padding: 7px;
  border-radius: 10px;
  box-shadow: none;
  border: 0;
  font-size: 1em; }
  #map-legend-button #closelegentext {
    display: none; }
  #map-legend-button.open #closelegentext {
    display: block; }

.leaflet-popup-content-wrapper {
  border-radius: 0; }

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  background-color: #e8e6df; }

.leaflet-bottom.leaflet-right .leaflet-control-attribution {
  display: none; }

.leaflet-popup-content p {
  font-size: 0.825em;
  margin: 0; }

#slide {
  border-top: 10px solid #e8e6df;
  display: block;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  z-index: 200;
  position: absolute;
  height: 50%;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  padding: 15px;
  top: auto;
  box-sizing: border-box; }
  #slide button {
    position: absolute;
    width: 90%;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 0;
    bottom: 0;
    right: 0; }
    #slide button.last {
      background-color: #6f263d; }
      #slide button.last:hover {
        background-color: #953352; }
    #slide button#slide_button_back {
      left: 0;
      width: 10%;
      right: auto;
      min-width: 18px;
      padding: 13px 0px; }

#slide_number {
  font-family: 'Proxima Nova Bold';
  float: left;
  margin-right: 10px; }

#slide_title {
  font-size: 0.5em;
  display: block;
  text-transform: uppercase;
  padding-top: 6px; }

#slide_text {
  overflow-y: scroll;
  overflow-x: hidden;
  max-height: 60%;
  white-space: pre-line; }

@media only screen and (min-width: 768px) {
  #slide {
    top: 140px;
    right: 30px;
    left: auto;
    width: 400px;
    padding: 20px;
    padding-right: 20px;
    padding-bottom: 66px; }
  #slide_text {
    overflow-y: auto;
    overflow-x: auto;
    max-height: 85%;
    white-space: pre-line; } }

#introScreen {
  height: 100%;
  width: 100%; }
  @media only screen and (max-width: 768px) {
    #introScreen {
      background: transparent url("assets/images/intro-450.jpg") no-repeat scroll center center; } }
  @media only screen and (min-width: 768px) {
    #introScreen {
      background: transparent url("assets/images/intro-1080.jpg") no-repeat scroll center center; } }

#introscreen-inner {
  background-color: rgba(0, 0, 0, 0.69);
  padding: 20px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  position: relative;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  color: #fff; }

#splashScreen {
  color: #fff;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.69);
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 200; }
  #splashScreen a, #splashScreen a:visited, #splashScreen a:link, #splashScreen a:hover, #splashScreen a:active {
    color: #fff;
    text-transform: uppercase; }
  #splashScreen a:hover {
    text-decoration: none; }

#splash-content-container {
  margin: 0 auto;
  position: relative;
  overflow: auto;
  padding: 68px 1em 1em 1em;
  height: 100%; }

#splash-content-tour p {
  text-align: center;
  margin-top: 1em; }

#splash-content-tour-preview {
  background: transparent url("assets/images/cover.jpg") no-repeat scroll top left;
  height: 220px;
  position: relative;
  cursor: pointer; }
  #splash-content-tour-preview div {
    background-color: rgba(0, 0, 0, 0.69);
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px; }
    #splash-content-tour-preview div p {
      padding: 17px 0 9px 0; }

.splash-carousel-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 100px;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.69);
  color: #fff; }
  .splash-carousel-panel p {
    display: inline-block;
    margin: 0;
    position: absolute;
    top: 40%;
    margin-left: 15px; }

#play-button {
  background: #ba0c2f;
  border: 0;
  padding: 17px 25px 14px 30px;
  float: left;
  color: #fff;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -moz-transition: background 0.15s linear;
  -o-transition: background 0.15s linear;
  -webkit-transition: background 0.15s linear;
  transition: background 0.15s linear;
  -webkit-appearance: none;
  height: 100%;
  font-size: 50px; }
  #play-button:hover {
    background: #d40d34; }
  #play-button:hover, #play-button:active, #play-button:focus {
    outline: none; }

@media only screen and (min-width: 768px) {
  #splash-content-container {
    width: 980px;
    padding: 0;
    height: auto; }
  #splash-content-tour {
    width: 465px;
    float: right; }
  #splash-content-tour {
    margin-right: 2em;
    float: left; }
  #splash-content-text {
    float: right;
    width: 490px; }
  #splash-content-tour-preview {
    height: 308px; } }

#desktop-share {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 65px;
  width: 100%;
  height: 60px;
  background: inherit;
  background-color: #e8e6df;
  border: none;
  border-radius: 0px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  z-index: 400;
  padding: 0 15px;
  text-align: center; }
  #desktop-share p {
    margin: 0;
    margin-top: 1em;
    font-weight: bold; }

.share-link {
  display: inline-block;
  position: relative;
  top: 2px;
  margin: 0 0 0 30px;
  width: 30px;
  font-size: 24px;
  text-align: center;
  text-decoration: none;
  -moz-transition: color 0.15s linear;
  -o-transition: color 0.15s linear;
  -webkit-transition: color 0.15s linear;
  transition: color 0.15s linear;
  outline: none; }
  .share-link:link, .share-link:visited {
    color: #333132; }
  .share-link:hover {
    color: #6f263d; }

#map-layers {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  color: #fff;
  z-index: 300;
  transition: all 1s ease 0s; }
  #map-layers.closed {
    bottom: -550px; }
    @media only screen and (min-width: 768px) {
      #map-layers.closed {
        bottom: -275px; } }

#map-layers-tab {
  background-color: #6f263d;
  padding: 15px 40px;
  position: absolute;
  top: -57px;
  height: 57px;
  right: 30px;
  cursor: pointer;
  -webkit-box-shadow: 0px -13px 20px 2px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0px -13px 20px 2px rgba(0, 0, 0, 0.15);
  box-shadow: 0px -13px 20px 2px rgba(0, 0, 0, 0.15); }
  #map-layers-tab p {
    font-size: 2em;
    margin: 0; }

.explore {
  float: left; }
  .explore ul {
    margin: 0;
    padding: 0; }
    .explore ul.half {
      width: 50%;
      float: left; }
  .explore li {
    padding: 5px;
    margin: 0;
    list-style: none; }

.explore-1,
.explore-3 {
  width: 25%; }

.explore-2 {
  width: 50%; }

#map-layers-panel {
  background-color: #6f263d;
  padding: 15px;
  height: 550px;
  -webkit-transition: top 1s, -webkit-transform 1s;
  transition: top 1s, transform 1s; }
  @media only screen and (min-width: 768px) {
    #map-layers-panel {
      height: 275px; } }

#information-panel {
  background: rgba(0, 0, 0, 0.85);
  z-index: 400;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 30px;
  padding-top: 115px;
  color: #fff;
  overflow-x: hidden;
  overflow-y: scroll; }
  #information-panel textarea {
    width: 100%;
    min-height: 200px; }

.info-sub-section {
  margin-top: 2em;
  width: 50%;
  float: left; }

@media only screen and (min-width: 768px) {
  #information-panel {
    overflow-x: auto;
    overflow-y: auto; }
  .scroller {
    height: 51%;
    overflow-y: scroll;
    width: 48%;
    margin-right: 1em;
    padding-right: 1em; } }

#hamburger-panel {
  position: absolute;
  top: 0;
  left: 100%;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  padding: 15px 48px 15px 15px;
  z-index: 400;
  color: #fff;
  transition: all 1s ease 0s; }
  #hamburger-panel.open {
    left: 48px; }
  #hamburger-panel ul, #hamburger-panel li {
    margin: 1em 0;
    padding: 0;
    list-style: none; }
  #hamburger-panel a {
    color: #fff;
    margin-left: 5px;
    margin-top: 5px; }

#exit_to_splash {
  z-index: 300;
  position: absolute;
  bottom: 1em;
  left: 1em; }

*, *:before, *:after {
  box-sizing: inherit;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                  supported by Chrome and Opera */ }

html, body {
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden; }

#app {
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0; }