/* 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; }