Luccianos Main Css

@import "bourbon/bourbon";
$startup-bg: #181818;
$crow-bg: #84A5DD;
$crow: #181818;
$vaquita-bg: #64d6e2;
$vaquita: #739998;
$kakapo-bg: #dbbe39;
$kakapo: #85aa48;
$ostrich-bg: #de89ac;
$parrotfish-bg: #ccc5e3;
$penguin-bg: #3CCAD1;
$iguana-bg: #F6D860;
$drill-bg: #87C4A3;
$owl-bg: #a09de5;
$tapir-bg: #FEC54F;
$peccary-bg: #F4696B;
$oryx-bg: #79BBB5;
$frog-bg: #785ebb;
$seahorse-bg: #9988CD;
$camel-bg: #FD9372;
$butterfly-bg: #9B7AD5;
$sloth-bg: #FDACB4;
$armadillo-bg: #EDB948;
$damselfly-bg: #F68F6F;
$loris-bg: #9B7FE6;
$echidna-bg: #DFBC94;
$bear-bg: #9787EA;
$lynx-bg: #F4C3C5;
$okapi-bg: #E794AE;
$panda-bg: #98BFF6;
$hirola-bg: #EF9F64;
$sifaka-bg: #9784ED;
$rhino-bg: #63C5AB;
$tamarin-bg: #FDAED4;
$turtle-bg: #A0CADB;
$main-bg: #181818;
$smallscreensize: 700px;
$smallscreenheight: 350px;
$tinyscreenheight: 300px;
$tinyscreenwidth: 500px;
$hugescreenwidth: 1450px;
$largescreenwidth: 1200px;
$desktopscreenwidth: 850px;
$fluidpolygons: .7,.3,0,1;
$smootheaseout: .62,.02,.34,1;
$intenseeaseout: 1,0,0,1;
$suckitin: .38,-0.32,.89,.34;
$smoothswing: 0.4, 0.3, 0.1, .4;
$smash-bg: #1C1C1C;
$all-animals-bg: #1b1b1c;
$preloader-bg: rgb(26,26,29);
$threat-red: #f03252;
$smash-middle-bg: #323232;
@font-face {
font-family: 'BlocExtCond';
src: url('../fonts/blocextcond.eot');
src: url('../fonts/blocextcond.eot?#iefix') format('embedded-opentype'),
url('../fonts/blocextcond.woff') format('woff'),
url('../fonts/blocextcond.ttf') format('truetype'),
url('../fonts/blocextcond.svg#ywftsvg') format('svg');
font-weight: normal;
font-style: normal;
}
::-webkit-scrollbar {
height: 12px;
width: 9px;
background: rgba(0,0,0,0);
border-radius: 20px;
}
::-webkit-scrollbar-thumb {
background:$threat-red;
border: 3px solid #232323;
}
::selection {
background: $threat-red; /* WebKit/Blink Browsers */
}
::-moz-selection {
background: $threat-red; /* Gecko Browsers */
}
i {
display: inline-block;
font-style: normal;
}
body, html {
height: 100%; width: 100%;
top: 0; left: 0;
position: absolute;
color: #fff;
font-size: 10px;
line-height: 1.1em;
letter-spacing: .03em;
margin: 0;
overflow: hidden;
background-color: $preloader-bg;
@include transition(background .5s);
-webkit-font-smoothing: antialiased;
text-transform: uppercase;
}
ul {
list-style: none;
margin: 0;
padding: 0;
li {
margin: 0; padding: 0;
}
}
a, p, h1,h2,h3,h4,h5, body {
color: #fff;
text-decoration: none;
font-family: 'BlocExtCond';
font-weight: 300;
margin: 0;
font-size: 1.05em;
}
a {
display: block;
}
h1 {
color: $threat-red;
font-size: 2.3em;
margin-bottom: 15px;
}
h2 {
font-size: 4.35em;
line-height: 1em;
color: #fff;
}
.browser-statement {
display: none;
}
.hidden-startup {
opacity: 0 !important;
@media only screen and (min-width: $largescreenwidth) {
.shard {
-webkit-clip-path: polygon(50% 50%, 50% 50%, 50% 50%) !important;
}
}
}
.resize-hider {
display: none;
z-index: 10000000;
position: fixed;
top: 0; left: 0;
background: #181818 url('../img/fallbacks/smash-fake.png') no-repeat center
center / cover;
&.active {
display: block;
}
h3 {
width: 100%;
text-align: center;
position: absolute;
left: 0;
top: 47.5%;
font-size: 2.1em;
}
}
// START OF INTRODUCTION AND PRELOADER
// CORE STYLING
.intro-sequence {
position: absolute;
top: 50%;
width: 100%;
height: 100px;
margin-top: -25px;
div:nth-child(2) {
p {
position: absolute;
width: 100%;
top: 0;
left: 0;
font-size: 2.05em;
@media only screen and (min-width: $hugescreenwidth) {
font-size: 2.25em;
}
line-height: 1.2em;
text-align: center;
span {
color: rgba(255,255,255,0);
@include transition(.5s cubic-bezier($smootheaseout));
}
&.active {
span {
color: rgba(255,255,255,1);
@include transition(1.47s cubic-
bezier($smootheaseout));
@for $i from 1 through 10 {
&:nth-child(#{$i}) {
$td: ($i*.2s);
@include transition-delay($td);
}
}
}
}
&:nth-child(3) {
&.active {
span {
$td: ($i*.2s+.8s);
}
}
}
}
}
&:nth-child(2) {
&.active {
span {
&:nth-child(4), &:nth-child(5) {
color: rgba(240,50,82,1);
}
}
}
}
}
}
&.active {
div:nth-child(2) {
opacity: 1;
}
}
@include transition(0.7s linear);
.loading, .intro-content {
display: none;
position: absolute;
text-align: center;
top: 50%;
margin-top: 2%;
left: 0;
width: 100%;
font-size: 1.3em;
line-height: 1.4em;
letter-spacing: 0.1em;
opacity: 1;
@include transition(.3s);
}
.loading {
span {
color: $threat-red;
}
p {
font-size: .8em;
color: #787878;
}
}
.intro-content {
margin-top: 6.3%;
font-size: 1.9em;
line-height: 1.2em;
pointer-events: none;
h1 {
display: none;
font-size: 1.9em;
opacity: 0;
}
@media only screen and (min-width: 1400px) {
font-size: 2.1em;
a {
font-size: .8em;
}
}
> p, a {
opacity: 0;
@include transition(.65s 1.3s cubic-bezier($smootheaseout));
}
p {
display: block;
font-size: 1.15em;
&:nth-child(2) {
@media only screen and (max-width: $smallscreensize) {
span {
display: block;
}
}
}
&:nth-child(3) {
color: #787878;
font-size: .65em;
display: block;
@include transition-delay(1.5s);
span {
color: $threat-red;
}
}
}
a:nth-child(4) {
@include transition(all .6s 2s, background .18s 0s);
}
}
}
.performance-boost {
.intro-sequence {
div:nth-child(2) {
p {
&.active {
span {
@include transition-duration(.75s);
}
}
}
}
}
}
.intro-sequence, .intro-content {
top: 0; margin-top: 0;
}
#animalchanger .intro-sequence {
&::before {
content: "";
position: absolute;
top: 0; left: 0;
background: url('../img/fallbacks/smash-fake.png') no-repeat
center center / cover;
}
height: 100%;
.loading {
margin-top: -29px;
font-size: 1.6em;
}
.intro-content {
h1 {
display: block;
.thirty-pieces-titles & {
opacity: 1;
}
}
p {
font-size: 1.3em;
line-height: 1.1em;
&:nth-child(3) {
font-size: .8em;
}
}
margin-top: -110px;
width: 84%;
left: 8%;
.box-link {
i {
display: none;
}
}
:nth-child(#{$i}) {
$ts: ($i*.15s+.23s);
@include transition(.44s $ts cubic-
}
}
}
}
}
.skip-intro {
@include transition(.78s 0s);
position: fixed;
width: 100%;
left: 0;
bottom: 0;
opacity: 0;
.timeline, a {
position: absolute;
bottom: 0;
}
a {
bottom: 25px;
left: 50%;
@include transform(translateX(-50%));
}
.timeline {
width: 100%;
height: 2px;
&::before {
@include transform-origin(0% 0%);
@include transform(scaleX(0));
@include transition(15.2s linear);
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: $threat-red;
}
}
}
.shard-wrap {
&:nth-child(1) {
.shard {
background-color: red !important !important;
}
}
}
.wrap h1 {
display: none;
font-size: 11.5vw;
letter-spacing:.03em;
position: absolute;
height: 10.5vw;
line-height: 1em;
top: 16%;
left: 34.5%;
color: rgba(255,255,255,0);
@include transform(skew(-18deg) rotate(-18deg) translateY(0) scaleY(1.04));
&::after {
content: "";
position: absolute;
bottom: -16%;
left: 0;
width: 100%;
background-color: rgba(240,50,82,0);
height: 1vw;
border-radius: .3vw;
}
span {
display: none;
}
body.preloader-layer-2 {
.stage {
}
#animalchanger {
&::before {
opacity: 0;
}
}
}
body.preloader {
.loading, .intro-content {
display: block;
}
#animalchanger {
}
.shard-wrap {
&:nth-child(#{$i}) .shard {
$h: ($i*1%+16%);
background-color: darken(#111, $h);
}
}
}
.intro-sequence {
z-index: 4;
}
.level-one {
@include transform(scale(.15) translateY(-20%));
}
.shard-wrap {
&:nth-child(#{$i}) .shard::before {
$ad: ((31-$i)*.03s);
@include animation(loading 1.3s $ad infinite);
}
}
}
.level-two {
@include transform(rotate(-8deg));
}
}
// LOADING SPINNER POLYGONS
.shard-wrap {
&:nth-child(1) {
.shard {
-webkit-clip-path: polygon( 47.470% 13.626%, 50% 50%, 52.9%
13.867%);
}
}
&:nth-child(2) {
.shard {
15.313%);
}
}
&:nth-child(3) {
.shard {
-webkit-clip-path: polygon(58.347% 15.313%, 50% 50%, 63.05%
18.1%);
}
}
&:nth-child(4) {
.shard {
22.6%);
}
}
&:nth-child(5) {
.shard {
28.7%);
}
}
&:nth-child(6) {
.shard {
35.4%);
}
}
&:nth-child(7) {
.shard {
42.559%);
}
}
&:nth-child(8) {
.shard {
50.330%);
}
}
&:nth-child(9) {
.shard {
57.963%);
}
}
&:nth-child(10) {
.shard {
65.192%);
}
}
&:nth-child(11) {
.shard {
71.939%);
}
}
&:nth-child(12) {
.shard {
77.602%);
}
}
&:nth-child(13) {
.shard {
82.421%);
}
}
&:nth-child(14) {
.shard {
85.667%);
}
}
&:nth-child(15) {
.shard {
86.547%);
}
}
&:nth-child(16) {
.shard {
86.694%);
}
}
&:nth-child(17) {
.shard {
85.227%);
}
}
&:nth-child(18) {
.shard {
82.148%);
}
}
&:nth-child(19) {
.shard {
77.163%);
}
}
&:nth-child(20) {
.shard {
71.698%);
}
}
&:nth-child(21) {
.shard {
65.2%);
}
}
&:nth-child(23) {
.shard {
58.445%);
}
}
&:nth-child(22) {
.shard {
58.445%);
}
}
&:nth-child(24) {
.shard {
42.421%);
}
}
&:nth-child(25) {
.shard {
35.313%);
}
}
&:nth-child(26) {
.shard {
28.566%);
}
}
&:nth-child(27) {
.shard {
22.782%);
}
}
&:nth-child(28) {
.shard {
18.084%);
}
}
&:nth-child(29) {
.shard {
15.072%);
}
}
&:nth-child(30) {
.shard {
13.626%);
}
}
&.peripheral {
.shard {
-webkit-clip-path: polygon(50% 50%, 50% 50%, 50% 50%);
}
}
#animalchanger {
.level-one {
.level-two {
// IN PIECES TITLE POLYGONS FOR MOBILE
// .shard-wrap {
// .shard {
// -webkit-clip-path: polygon(50% 50%, 50%
50%, 50% 50%) !important;
// }
// }
.shard-wrap {
&:nth-child(1) {
.shard {
-webkit-clip-path: polygon( 1% 50%, 1%
50% , 1% 50% )!important;
}
}
&:nth-child(3) {
.shard {
-webkit-clip-path: polygon( 2% 40% , 2%
40% , 2% 40% )!important;
}
}
&:nth-child(5) {
.shard {
-webkit-clip-path: polygon(5% 30%, 5%
30%, 5% 30%)!important;
}
}
&:nth-child(7) {
.shard {
-webkit-clip-path: polygon( 10% 21%,
10% 21%, 10% 21% )!important;
}
}
&:nth-child(9) {
.shard {
14%, 17% 14%)!important;
}
}
&:nth-child(11) {
.shard {
8% ,26% 8% )!important;
}
}
&:nth-child(13) {
.shard {
4%, 35% 4%)!important;
}
}
&:nth-child(15) {
.shard {
-webkit-clip-path: polygon( 45% 2% ,45%
2% ,45% 2%)!important;
}
}
&:nth-child(2) {
.shard {
-webkit-clip-path: polygon( 56% 98% ,
56% 98%, 56% 98% )!important;
}
}
&:nth-child(4) {
.shard {
46% 99%, 46% 99%)!important;
}
}
&:nth-child(6) {
.shard {
97%, 36% 97%)!important;
}
}
&:nth-child(8) {
.shard {
27% 93%, 27% 93%)!important;
}
}
&:nth-child(10) {
.shard {
-webkit-clip-path: polygon( 18% 87%,
18% 87%, 18% 87%)!important;
}
}
&:nth-child(12) {
.shard {
80%, 11% 80%)!important;
}
}
&:nth-child(14) {
.shard {
-webkit-clip-path: polygon( 6% 72% , 6%
72%, 6% 72%)!important;
}
}
&:nth-child(16) {
.shard {
61%, 2% 61% )!important;
}
}
&:nth-child(17) {
.shard {
}
}
&:nth-child(18) {
.shard {
}
}
&:nth-child(20) {
.shard {
}
}
&:nth-child(22) {
.shard {
-webkit-clip-path: polygon( 82%
14% ,82% 14% ,82% 14% )!important;
}
}
&:nth-child(24) {
.shard {
21% ,89% 21% ,89% 21% )!important;
}
}
&:nth-child(26) {
.shard {
30% ,95% 30% ,95% 30% )!important;
}
}
&:nth-child(28) {
.shard {
40%, 98% 40%)!important;
}
}
&:nth-child(30) {
.shard {
50% ,99% 50% ,99% 50% )!important;
}
}
&:nth-child(29) {
.shard {
60%, 97% 60%)!important;
}
}
&:nth-child(27) {
.shard {
70%, 95% 70%)!important;
}
}
&:nth-child(25) {
.shard {
77% ,90% 77% ,90% 77%)!important;
}
}
&:nth-child(23) {
.shard {
84%, 84% 84%)!important;
}
}
&:nth-child(21) {
.shard {
91%, 76% 91%)!important;
}
}
&:nth-child(19) {
.shard {
96%, 66% 96%)!important;
}
}
}
}
}
}
&.start-up-seq, &.thirty-pieces-titles {
.loading {
opacity: 0;
}
}
&.start-up-seq {
#animalchanger {
.shard-wrap {
&::before {
$ad: ($i*.06s+1s);
@include animation(shard-flow-black 2s $ad
infinite);
}
}
}
}
}
.skip-intro {
opacity: 1;
pointer-events: auto;
.timeline {
&::before {
@include transform(scaleX(1));
}
}
}
.wrap h1 {
display: block;
}
.level-one {
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution:
192dpi), (min-resolution: 2dppx) {
}
@include transition(1s cubic-bezier($smootheaseout));

.level-two {
@include transform(rotate(26deg));
@include transition(16s linear 1.5s);
}
.shard-wrap {
.shard::before {
@include animation(none);
}
$h: ($i*.25%);
background-color: darken(rgb(38,38,41), $h);
}
}
$h: ($i*.25%);
background-color: darken(rgb(29,29,32), $h);
}
}
$ts: $i*.04+1.2s;
$td: ((31-$i)*.05s-1s);
@include transition(all $ts $td cubic-
bezier($smootheaseout), background-color .4s $td);
}
}
$ts: $i*.04+1.2s;
$td: ($i*.05s-1s);
bezier($smootheaseout), background-color .4s $td);
}
}
}
// @media (-webkit-min-device-pixel-ratio: 2), (min-resolution:

192dpi) {
// @include transform(scale(.5) translateY(-6%));
// @include transition-duration(.5s);
// .shard-wrap {
// @for $i from 1 through 30 {
// &:nth-child(#{$i}) .shard {
// $ts: $i*.03+0.7s;
// @include transition-duration($ts);
// }
// }
// }
// }
}
&.performance-boost {
.level-one {
@media only screen and (min-width: 1400px) {
}
.shard-wrap {
$ts: $i*.03+0.7s;
@include transition-duration(all $ts,
background-color .3s);
}
}
}
}
}
}
&.thirty-pieces-titles, &.thirty-pieces-titles.performance-boost {
.skip-intro {
opacity: 0;
}
.wrap h1 {
color: rgba(255,255,255,1);
&::after{
}
}
.intro-content {
}
.intro-content p, .intro-content .start-experience {
opacity: 1;
}
#animalchanger {
.shard-wrap {
&::before {
$ad: ($i*.03s + 1s);
@include animation(shard-flow 2s $ad
infinite);
}
}
}
}
}
.level-one {
}
@include transition(1.4s cubic-bezier($smootheaseout));
.level-two {
// IN PIECES TITLE POLYGONS

.shard-wrap {
$ts: $i*.06s+.16s;
$td: ($i*.03s+.4s);
bezier(1,0,0,1), background-color $ts $td);
}
}
&:nth-child(1) {
.shard {
-webkit-clip-path: polygon( 6.838%
29.324% ,13.337% 80.752% ,4.838% 68.324% );
background-color: #a60438;
@include transition(.8s .2s);
}
}
&:nth-child(2) {
.shard {
29.324% ,19.637% 37.181% ,8.538% 42.895% );
background-color: #970741;
}
}
&:nth-child(3) {
.shard {
-webkit-clip-path: polygon(6.838% 29.324%,
21.75% 30.5%, 19.9% 37.4%);
background-color: #F6075A;
}
}
&:nth-child(4) {
.shard {
30.609% ,18.050% 62.181% ,14.850% 54.181% );
background-color: #C80741;
}
}
&:nth-child(5) {
.shard {
-webkit-clip-path: polygon(14.9% 54.2%, 18.2%
62.181%, 10.35% 57.609%);
}
}
&:nth-child(6) {
.shard {
58.752% ,27.750% 25.609% ,23.350% 78.181% );
}
}
&:nth-child(7) {
.shard {
28.35% 73.181%, 23.35% 78.181%);
}
}
&:nth-child(8) {
.shard {
42.181% ,39.750% 72.038% ,32.850% 83.467% );
}
}
&:nth-child(9) {
.shard {
45.65% 36.181%, 45.65% 45.895%);
}
}
&:nth-child(10) {
.shard {
44.181%, 34.1% 52.181%);
}
}
&:nth-child(11) {
.shard {
45.55% 55.467%, 36.3% 60.181%);
background-color: #c80741;
}
}
&:nth-child(12) {
.shard {
83.324% ,39.650% 72.038% ,47.350% 73.181% );
background-color: #8e0732;
}
}
&:nth-child(13) {
.shard {
14.609% ,56.050% 24.181% ,49.750% 79.181% );
background-color: #c80741
}
}
&:nth-child(14) {
.shard {
14.752% ,65.650% 26.324% ,55.950% 24.181% );
}
}
&:nth-child(15) {
.shard {
63.85% 75.3%, 68.85% 84.467%);
}
}
&:nth-child(16) {
.shard {
68.895% ,57.450% 77.181% ,49.750% 79.181% );
}
}
&:nth-child(17) {
.shard {
60.55% 29.895%, 60.9% 66.752%);
background-color: #d92451;
}
}
&:nth-child(18) {
.shard {
67% 39.839%, 60.8% 67%);
}
}
&:nth-child(19) {
.shard {
29.982% ,74.550% 38.696% ,66.950% 39.982% );
}
}
&:nth-child(20) {
.shard {
73.15% 52.982%, 62.95% 56.839%);
background-color: #d92451
}
}
&:nth-child(21) {
.shard {
-webkit-clip-path: polygon(63% 56.982%,
64.75% 66%, 60.65% 66.982%);
}
}
&:nth-child(23) {
.shard {
72.45% 64.268%, 73.25% 73.696%);
}
}
&:nth-child(22) {
.shard {
66.839% ,73.250% 73.696% ,58.050% 70.268% );
background-color: #8e0732
}
}
&:nth-child(24) {
.shard {
33.268% ,91.950% 28.982% ,92.550% 37.696% );
}
}
&:nth-child(25) {
.shard {
92.55% 37.8%, 88.95% 33.839%);
background-color: #8e0732
}
}
&:nth-child(26) {
.shard {
33.268% ,83.450% 50.268% ,78.250% 58.125% );
}
}
&:nth-child(27) {
.shard {
50.268% ,92.650% 51.696% ,78.350% 57.982% );
background-color: #d92451
}
}
&:nth-child(28) {
.shard {
51.65%, 95% 71.696%);
}
}
&:nth-child(29) {
.shard {
68.125% ,91.850% 65.125% ,95.050% 71.554% );
}
}
&:nth-child(30) {
.shard {
68.125% ,94.950% 71.554% ,80.550% 74.125% );
}
}
}
}
}
&.titles-out {
.intro-sequence {
opacity: 0;
}
.wrap h1 {
opacity: 0;
}
}
}
// END OF THE INTRODUCTION SEQUENCE AND PRELOADER PART
.chromebrowser {
#animalchanger {
&::before { //THIS IS THE VIGNETTE
content: "";
opacity: .34;
-webkit-backface-visibility: hidden;
width: 600px; height: 600px; position: absolute; top: 50%; left:
50%;
margin-left: -300px; margin-top: -300px;
background: url('../img/bg/grad-bg.png') no-repeat center
center / cover;
z-index: 1;
}
&::after { // THIS IS THE TEXTURE FOR SMASH

content: "";
@include transition(opacity .2s);
opacity: 0;
height: 400%;
width: 400%;
position: absolute; top: -150%; left: -150%;
background: url('../img/textured-ui/black-texture.png') repeat 0
0;
z-index: 0;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {

&::before, &::after {
display: none;
}
}
}
.smash {
#animalchanger {
background-color: $smash-bg;
192dpi) {
}
&::after {
opacity: .8;
@include transition(opacity .5s .5s);
@include animation(bgscratchy .5s steps(8, end) infinite);
}
}
}
.smash, .preloader {
.wrap {
.shadow {
display: block;
opacity: 0;
}
}
}
}
#animalchanger {
background-color: $main-bg;
@include transition(background .5s);
overflow: hidden;
}
.chromebrowser .shard, .preloader .shard {

&::before {
content: ""; width: 100%; height: 100%;
background: rgba(255,255,255,0); top: 0; left: 0;
position: absolute;
}
}
html:not(.chromebrowser) {
.wrap {
.shadow {
&.inactive {
display: none;
}
}
.shard-wrap:nth-child(31), .shard-wrap:nth-child(32), .shard-wrap:nth-
child(33) {
.shard {
&::before {
content: ""; width: 100%; height: 100%;
background: rgba(255,255,255,0); top: 0; left: 0;
position: absolute;
}
}
}
}
}
.level-one, .level-two, .animal-mover {
width: 100%; height: 100%;

position: absolute;
}
.level-one {
@include transition(.8s cubic-bezier(.88,.005,0,1));
@include transform( scale(.5) translateY(-14%));
opacity: 1;
top:0; left:0;
z-index: 3;
}
.level-two {
@include transition( all .4s cubic-bezier(.02,.65,.49,.99));
}
// SHELL AREA
.border {
position: absolute;
> div {
position: absolute;
}
.frames {
div {
background: url('../img/svg/border.svg') repeat-x 50% 50%;
width: 100%; height: 20px;
position: absolute;
left:0;
top: 0;
// @include animation(bordermovement .14s infinite linear);
}
}
.frames div:nth-child(2), .frames div:nth-child(4) {
width: 20px; height: 100%;

background: url('../img/svg/border-vert.svg') repeat-y 50% 50%;
// @include animation(bordermovement .14s infinite linear);
}
.frames div:nth-child(3) {
bottom: 0; top: auto;
}
.frames div:nth-child(3), .frames div:nth-child(4) {
@include transform(rotate(179.99deg));
}
.frames div:nth-child(4) {
right: 0; left: auto;
}
.corners {
div::before, div::after {
content: "";
background: url('../img/svg/corner.svg') no-repeat center center;
width: 50px; height: 50px;
position: absolute;
left:10px;
top: 11px;
}
div {
&:nth-child(1) {
&::after {
left: auto;
right:10px;
top: 11px;
}
}
&:nth-child(2) {
&::before {
left: auto;
right:10px;
top: auto;
bottom: 11px;
}
&::after {
top: auto;
bottom: 11px;
}
}
}
}
}
.smash, .all-animals, .preloader-layer-2 {

.border {
@include transform(scale(1.42));
@include transition(0.43s 0.2s cubic-bezier(1,0,0,1));
}
}
// CONTENT AREA
// border: 3px solid green;

.shard-wrap {
width: 100%; height:100%;
position: absolute;
z-index: 2;
// -webkit-filter: opacity(0.9999999);
.shard {
// opacity: .9999999;
position: absolute;
background-color: #fff;
// background:url(http://i.ytimg.com/vi/RVUtJeggEiE/maxresdefault.jpg);
@include transition(1s cubic-bezier(.7,.3,0,1));
// opacity: .5;
-webkit-clip-path: polygon(50% 50%, 50% 50%, 50% 50%);
background-image: url('../img/transparent.png');
background-position: center center;
background-repeat: repeat;
}
.left-to-right & {
$s: ($i*0.04+0.3s);
$t: ($i*0.02s+0.2s);
$ct: ($i*0.02s);
@include transition(-webkit-clip-path $s $t cubic-
bezier($fluidpolygons), background-color $s $ct, -webkit-transform .3s, margin 0.3s
$t);
}
}
}
.right-to-left & {
$s: ((31-$i)*0.04+0.3s);
$t: ((31-$i)*0.025s+0.2s);
$ct: ((31-$i)*0.02s);
@include transition(-webkit-clip-path $s $t cubic-
bezier($fluidpolygons), background-color $s $ct, -webkit-transform .3s, margin 0.3s
$t);
}
}
}
&.peripheral {
z-index: 1;
.shard {
@include transition-delay( .3s );
}
&:nth-child(32) {
.shard {
}
}
&:nth-child(33) {
.shard {
}
}
}
.wrap {
width: 99%;
left: 50%;
top: 50%;
@include transition(.33s cubic-bezier(.7,.3,0,1));
position: absolute;
.shadow {
position: absolute;
bottom: 10%;
left: 30%;
@include radial-gradient(closest-side, rgba(0,0,0,0.35) 0,
rgba(0,0,0,0.14) 35%, rgba(0,0,0,0) 100%);
@include transition(.6s cubic-bezier(1,0.3,0.3,1) .6s);
&.inactive {
opacity:0;
@include transition(.05s cubic-bezier(.7,0.3,0,1) 0s !important);
}
&::before, &:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
height: 100%;
width: 50%;
rgba(0,0,0,0.185) 35%, rgba(0,0,0,0) 100%);
@include transition(.6s cubic-bezier(1,0.3,0.3,1) .6s);
}
&::before {
left: 30%
}
&::after {
left: -37%;
height: 60%;
bottom: 20%;
rgba(0,0,0,0) 100%);
}
}
}
.stats-pie {
position: relative;
span {
position: absolute;
top: 50%;
left: 50%;
height: 15px;
width: 15px;
margin: -10px 0 0 -9px;
border: 2px solid #fff;
.content-wrap & {
left: auto;
right: -19px;
top: 70%;
height: 9px; width: 9px;
border-color: $threat-red;
&::before {
}
}
.chromebrowser & {
@include animation(pie-rotations 5s infinite forwards);
}
&::before {
content: "";
height: 120%;
width: 120%;
position: absolute;
top: -20%;
left: -20%;
background-color: #FFF;
-webkit-clip-path: polygon(9% 35%, 22% 23%, 40% 13%, 60% 9%, 70%
9%, 58% 58%);
}
}
&:hover {
span {
border-color: #fff !important;
&::before {
background-color: #fff !important;
}
}
}
}
.content-wrap {
z-index: 999;
position: absolute;
top: 0; left: 0; height: 100%; width: 100%;
display: none;
opacity: 0;
.content-info, .infos > *, .ctas > * {

opacity: 0;
}
.infos > p, .ctas > * {

@include transform(translateY(2px));
}
&.show {
opacity: 1;
.content-info, .infos > *, .ctas > * {
opacity: 1;
}
.infos > p, .ctas > * {

@include transform(translateY(0));
}
&.statistics-on {
.statistics {
ul li, .chart .chart-bg, .chart-info, .chart, .chart-shard-
wrap, .chart-shard-wrap .shard {
opacity: 1;
@include transform(scale(1) rotate(0deg)
translateZ(0));
}
.chart-info p {
opacity: 1;
}
ul li:nth-child(2) {
@include transition-delay(.16s);
}
}
}
}
.chart-bg {
}
.chart-info {
}
.chart {
&.chart-info-delays {
.chart-info {
p {
$ptd: ($i*.17s+.2s);
@include transition( .3s
$ptd);
span {
@include transition( .3s
$ptd);
}
}
}
}
}
.chart-shard-wrap {
@include transition(all .15s .4s cubic-
.shard {
@include transition(.85s 0.53s
cubic-bezier(.56,0,.06,.99));
}
}
}
right: 0px;
@include transition(.3s cubic-
}
.chart-shard-wrap {
@include transition(all .35s cubic-
.shard {
@include transition(.85s .05s cubic-
bezier(.56,0,.06,.99));
}
}
}
.content-info {
opacity: 0;
.infos > *, .ctas > * {
opacity: 0;
}
}
}
}
.content {
margin: 0 auto 0;
width: 100%;
height: 100%;
@include transition(2s);
text-align: center;
&.copy-delays {
.content-info {
.infos {
> * {
@include transition(.45s .4s cubic-
}
:nth-child(2) {
}
:nth-child(3) {
}
:nth-child(4) {
}
:nth-child(5) {
}
}
.ctas {
:nth-child(1) {
}
:nth-child(2) {
}
:nth-child(3) {
@include transition-duration(1.2s);
}
}
}
}
.content-info {
margin: -5em 0 0em;
width: 80%;
max-width: 490px;
vertical-align: middle;
ul {
text-align: center;
li {
}
}
.infos {
margin: 0em 0 2.3em;
width: 100%;
position: relative;
.nav-btn {
&::after {
background-color: $smash-middle-bg;
}
}
p {
font-size: 1.3em;
line-height: 1.3em;
margin-bottom: .6em;
&:nth-child(3) {
font-size: 2em;
line-height: 1.1em;
width: 90%;
margin-left: 5%;
}
span {
color: $threat-red;
}
}
ul {
margin-bottom: 1.5em;
li {
font-size: .97em;
color: #555;
span {
color: #888;
}
&:nth-child(2) {
margin: 0 7px;
color: rgba(255,255,255,.2);
}
}
}
> * {
}
}
.ctas {
li {
&:nth-child(2) {
a {
margin: 0 40px 0 60px;
&.popout {
font-size: 1.7em;
padding: 21px 23px 21px 7px;
span {
position: absolute;
right: 4px;
top: 50%; margin-top: -7px;
background:
url('../img/textured-ui/play-icon.png') no-repeat center center;
background-size: 10px 15px;
@include transition(.23s 0s
cubic-bezier($smootheaseout));
}
&:hover {
span {
@include
transform(translateX(3px));
}
}
}
}
}
a {
}
> * {
}
}
}
// opacity: 0;
&::before {
content: '';
height: 100%;
margin-right: -0.25em; /* Adjusts for spacing */
}
ul {
&:first-child {
margin-top: -10px;
}
&.videos {
z-index: 999999;
display: none;
position: absolute;
height: 100%; width: 100%; top: 0; left: 0;
background-color:rgba(0,0,0,0.7);
opacity: 0;
@include transition(.14s linear);
.close-video {
position: absolute; top:0; left:0;
width:100%;height:100%;
cursor: pointer;
&:hover {
background-color: rgba(230, 0, 20, 0.14);
}
}
.nav-btn {
top: 7%;
&::after {
background-color: $smash-middle-bg;
}
}
li {
position: absolute;
top: 10%; left: 10%; right: 10%; bottom: 10%;
iframe {
opacity: 0;
@include transform(translateY(6px) scale(.96));
-webkit-mask: url(../img/textured-ui/video-
mask.png) no-repeat center center / 100% 100%;
}
}
&.video-show {
display: block;
iframe {
display: block;
opacity:0.01
}
// @include transform(translateY(0px));
}
&.video-show-ul {
opacity: 1;
}
.video-on & {
iframe {
opacity: 1;
@include transform(translateY(0px) scale(1));
}
}
&.video-show {
&::before {
content:"";
position: absolute;
top: 50%; left: 50%;
-webkit-clip-path: polygon(0% 20%, 50% 100%,
100% 100%);
background: url('../img/textured-ui/red-
texture.png') repeat center center / 40px 40px;
@include animation(loading-spinning .5s linear
infinite forwards);
}
}
}
li {
h2 {
// font-family: 'Nixie One', sans-serif;
font-size: 16px;
text-align: center;
line-height: 1.25em;
}
a {
&:nth-child(3) {
margin-right: 5px;
}
&.video {
margin-left: 5px;
padding-right: 33px;
&::after {
@include transition(background-
color .13s, -webkit-clip-path .13s .3s, right .13s .4s);
content: "";
position: absolute;
right: 17px;
top: 50%; margin-top: -5px;
height: 10px;
width: 8px;
background: #fff;
100%, 100% 50%);
}
}
}
}
}
}
// START OF STATISTICS PART
.statistics {
margin: -160px 0 0 -300px;
width: 600px;
position: absolute;
top: 50%; left: 50%;
ul li, .chart .chart-bg, .chart-info, .chart-info p{

opacity: 0;
}
ul {
float: left;
width: 180px;
li {
border-bottom: 1px solid rgba(255,255,255,.06);
text-align: left;
@include transform(translateX(-6px));
&:nth-child(1) {
border: none;
a {
margin:0;
}
}
&:last-child {
margin-top: 20px;
border-bottom: none;
p {
font-size: 1.2em;
color: $threat-red;
line-height: 1.2em;
}
}
.line-link {
font-size: 1.2em;
padding: 20px 0;
line-height: 1.2em;
position: relative;
&::after {
bottom: 15px;
height: 3px;
}
.arrow {
height: 0px; width: 0px; position:
absolute; right: -7px;
top: 25px;
opacity: 0;
@include transform(translate3d(-
4px,0,0));
content: "";
position: absolute;
border-radius: 2px;
@include
transform(translate3d(0px,2px,0));
}
}
&.active {
.arrow {
opacity : 1;
@include
transform(translate3d(0,0,0));
@include
transition(.23s .1s);
}
&::before {
@include
transform(rotate(45deg));
}
&::after {
@include transform(rotate(-
45deg) translate3d(-3px,3px,0));
}
}
&::after {
opacity: 1;
@include transform(none);
}
}
}
.nav-btn {
background: url('../img/textured-ui/red-
texture.png') repeat center center / 40px 40px;
display: block; margin: 0 auto;
position: relative;
.arrow {
@include transform(rotate(-90deg)
translate3d(-12px, 2px, 0));
}
&::after {
}
.popout {
right: auto;
left: 68px;
}
&:hover {
.popout {
left: 80px;
}
}
}
}
&.one {
li:nth-child(3), li:nth-child(4) {
display: none;
}
}
&.two {
li:nth-child(4){
display: none;
}
}
}
.chart {
float: right;
width: 470px;
position: relative;
margin-top: -24px;
@include transition(90s cubic-bezier($smootheaseout));
> div, .shard {
position: absolute; top:0; left: 0;
}
.chart-shard-wrap {
@include transition(all .27s .24s cubic-
@include transform( translateY(10px) rotate(-40deg));
opacity: 0;
.shard {
@include transform( scale(.7) rotate(-40deg));
70% 57%, 50% 72%, 30% 57%, 30% 57%, 30% 57%, 30% 57%);
background: url('../img/textured-ui/red-texture-
2.png') repeat center center / 80px 80px;
bezier(.56,0,.06,.99));
&:hover {
.chart-bg {
&::before {
border-color: rgba(255,255,255,.2);
}
&::after {
}
}
.chart-info {
cursor: pointer;
em {
opacity: 0;
&.number {
opacity: 1;
}
}
p:nth-child(#{$i}) {
em {
$ptd: ($i*.07s);
@include transition( .25s $ptd
linear);
}
}
}
}
.chart-info {
p {
position: absolute;
top: 50%; left: 50%;
text-align: center;
bezier($smootheaseout), opacity .4s cubic-bezier($smootheaseout), font-size .1s
0s);
span {
position: absolute;
top:0; left: 0;
margin-top: -210px;
white-space: nowrap;
font-size: 1.24em;
bezier($smootheaseout), opacity .2s cubic-bezier($smootheaseout), font-size .1s
0s );
em {
font-style: normal;
-webkit-backface-visibility:
hidden;
&.number {
opacity: 0;
color: #fff;
position: absolute;
top: 0;
left: 0;
font-size: 1.4em;
@include
transform(translateY(4px));
i {
color: $threat-red;
font-size: .7em;
@include
transform(translateY(-4px));
&.sep-line {
display: block;
font-size: .5em;
letter-
spacing: .04em;
}
}
&.top-stat {
&::before {
content: "";
height: 45px;
width: 45px;
position:
absolute; top: -18px; left: -8px;
border-radius:
30px;
background:
$threat-red;
z-index: -1;
}
i {
color: #181818;
}
}
}
}
}
}
p:nth-child(9) {
opacity: 0;
width: 100%;
left: 0;
span, span em {
opacity: 0;
}
span {
width: 100%;
@include transform(rotate(0deg)
translateY(6px));
left: 0;
margin-top: -30px;
font-size: 1em;
line-height: 3.7em;
color: $threat-red;
em {
display: block;
font-size: 5.7em;
color: #fff;
i {
font-style: normal;
color: $threat-red;
font-size: .6em;
@include
transform(translateY(-14px));
}
}
}
}
}
.chart-bg {
content: "";
border: 1px solid rgba(255,255,255,0.06);
width: 100%;height: 100%;
position: absolute; top:0; left: 0;
}
&::after {
border-width: 7px;
border-color: rgba(255,255,255,.2);
}
div {
position: absolute;
top: 50%;left: 50%;
content: "";
position: absolute;
top:0; left: 0;
width: 172px; height: 1px;
@include transform-origin(0);
background-color: rgba(255,255,255,0.07);
}
}
&:nth-child(1) {
}
}
&.one-stat {
.chart-shard-wrap {
.shard {
50%, 50% 50%, 50% 50%,50% 50%,50% 50%,50% 50%,50% 50%);
}
}
.chart-bg {
div {
&::after, &::before {
opacity: 0;
}
}
&::after {
border-width: 3px;
border-color: rgba(255,255,255,0.03);
}
}
.chart-info {
p:nth-child(9) {
opacity: 1;
em, span {
translateY(0px));
}
}
}
}
&.four-stats, &.one-stat {
.chart-bg {
> :nth-child(3), > :nth-child(4)
&::before, :nth-child(4) &::after {
opacity: 0;
}
> :nth-child(1) {
&::after {
}
}
> :nth-child(2) {
&::before {
}
&::after {
}
}
> :nth-child(3) {
&::before {
opacity: 0;
}
&::after {
opacity: 0;
}
}
> :nth-child(4) {
&::before {
opacity: 0;
}
&::after {
opacity: 0;
}
}
}
// ROTATION IS 7 DEG LESS

.chart-info {
p:nth-child(2) {
span {
}
}
p:nth-child(3) {
span {
128deg));
}
}
p:nth-child(4) {
span {
218deg));
}
}

span {
opacity: 0;
}
}
}
}
}
&.five-stats {
.chart-bg {
> :nth-child(1) {
&::before {
}
&::after {
}
}
> :nth-child(2) {
&::before {
}
&::after {
}
}
> :nth-child(3) {
&::before {
}
&::after {
opacity: 0;
}
}
> :nth-child(4) {
&::before {
opacity: 0;
}
&::after {
opacity: 0;
}
}
}
// ROTATION IS 7 DEG LESS

.chart-info {
p:nth-child(1) {
span {
}
}
p:nth-child(2) {
span {
}
}
p:nth-child(3) {
span {
102deg));
}
}
p:nth-child(4) {
span {
174deg));
}
}
p:nth-child(5) {
span {
244deg));
}
}

span {
opacity: 0;
}
}
}
}
}
&.six-stats {
.chart-bg {
> :nth-child(1) {
&::before {
120deg));
}
&::after {
}
}
> :nth-child(2) {
&::before {
}
&::after {
}
}
> :nth-child(3) {
&::before {
}
&::after {
}
}
> :nth-child(4) {
&::before {
opacity: 0;
}
&::after {
opacity: 0;
}
}
}
.chart-info {
p:nth-child(1) {
span {
}
}
p:nth-child(2) {
span {
}
}
p:nth-child(3) {
span {
}
}
p:nth-child(4) {
span {
145deg));
}
}
p:nth-child(5) {
span {
205deg));
}
}
p:nth-child(6) {
span {
265deg));
}
}

span {
opacity: 0;
}
}
}
}
&.eight-stats {
.chart-bg {
> :nth-child(1) {
&::before {
22.5deg));
}
&::after {
@include
transform(rotate(22.5deg));
}
}
> :nth-child(2) {
&::before {
@include
}
&::after {
@include
}
}
> :nth-child(3) {
&::before {
@include
}
&::after {
@include
}
}
> :nth-child(4) {
&::before {
@include
}
&::after {
@include
}
}
}
.chart-info {
p:nth-child(1) {
span {
}
}
p:nth-child(2) {
span {
}
}
p:nth-child(3) {
span {
}
}
p:nth-child(4) {
span {
110deg));
}
}
p:nth-child(5) {
span {
155deg));
}
}
p:nth-child(6) {
span {
200deg));
}
}
p:nth-child(7) {
span {
245deg));
}
}
p:nth-child(8) {
span {
290deg));
}
}
}
// @for $i from 7 through 8 {

// p:nth-child(#{$i}) {
// span {
// opacity: 0;
// }
// }
// }
&.remove-stats {
.chart-info {
p {
@include transition(.2s !important);
span {
@include transition(.2s !
important);
}
}
}
}
}
.overlay::-webkit-scrollbar {
height: 12px;
width: 20px;
}
.overlay::-webkit-scrollbar-thumb {
background: #ddd;
}
.overlay::selection {
background: $threat-red; /* WebKit/Blink Browsers */
}
.overlay::-moz-selection {
background: $threat-red; /* Gecko Browsers */
}
.overlay {
width: 100%;
height: 100%;
position: fixed;
bottom: 0;
left: 0;
z-index: 999;
overflow-y: scroll;
@include transform(translateY(100%));
@include transition(.45s cubic-bezier($intenseeaseout));
text-align: center;
> div {
width: 80%;
max-width: 580px;
padding: 1% 10% 5.5%;
margin: 0 auto;
display: none;
&.active {
display: block;
}
&.sharing-goodies {
max-width: 600px;
p {
max-width: 500px;
margin: 0 auto;
}
}
}
div > * {
opacity: 0;
@include transition(.45s cubic-bezier($smootheaseout) .3s);
}
.nav-btn.close {
margin-top: 4%;
opacity: 0;
background: url('../img/textured-ui/green-texture.png') repeat center
center / 40px 40px;
&::after {
background-color: rgb(250,250,250);
}
.icon {
background: url('../img/textured-ui/green-texture-
less.png') repeat center center / 30px 30px;
}
}
}
h2 {
font-size: 2.5em;
color: $threat-red;
margin: 1.4em 0 .4em;
}
p {
color: #444;
font-size: 1.5em;
text-transform: none;
line-height: 1.6em;
margin-bottom: 1em;
&:nth-child(2) {
font-size: 2.2em;
line-height: 1.2em;
}
span {
&.disclaimer {
@include transform(translateY(-4px));
}
}
em {
font-family: 'courier';
display: block;
font-size: .9em;
font-style: normal;
margin-top: .5em;
}
a {
}
}
ul {
li {
border-bottom: 2px solid #ccc;
padding: 1.7em 0 1.4em;
a {
font-size: 1.35em;
line-height: 1.1em;
span {
font-size: .72em;
-webkit-filter: brightness(.6);
}
}
}
}
a {
&:hover {
img {
border: 1px solid #ddd;
}
}
}
img {
width: 100%;
margin: 1.6em 0 1.8em;
border: 1px solid #ededed;
}
&.active {
.close, div > * {
opacity: 1;
}
div > * {
$td: ($i*.1+.3s);
$ts: ($i*.08+.4s);
@include transition($ts cubic-bezier($smootheaseout)
$td);
}
}
}
}
.sharing-goodies {
.sharing-btns {
text-align: center;
margin: 2.2em 0 4em;
.share-btn {
margin-right: 10px;
padding: 15px;
height: 20px;
border-radius: 4px;
&:last-child {
margin-right: 0;
}
&:nth-child(1) {
width: 76px;
}
&:nth-child(2) {
}
&:nth-child(3) {
width: 58px;
}
}
}
}
}
body.video-on {
#animalchanger {
&::before {
display: none;
}
}
li {
opacity: 1;
}
// END OF CONTENT
// INFORMATION OVERLAY
// .animal-data {
// position: absolute;
// top: 50%;
// margin-top: -40px;
// z-index: 9999999;
// width: 200%;
// left: -50%;
// text-align: center;
// li {
// opacity: 0;
// font-size: 11em;
// display: inline-block;
// padding: 40px 50px;
// border-right: 1px solid rgba(255,255,255,0.4);
// -webkit-backface-visibility: hidden;
// @include transition(.23s);
// span {
// text-transform: lowercase;
// }
// &:nth-child(1) {
// padding-left: 0;
// &::before {
// content: "";
// position: absolute;
// width: 0%;
// height: 1px;
// left: 40%;
// top: -35px;
// background-color: rgba(255,255,255,0.5);
// @include transition(.34s cubic-
bezier($intenseeaseout) .17s);
// }
// }
// &:nth-child(2) {
// @include transition-delay(.13s);
// }
// &:nth-child(3) {
// padding-right: 0;
// border-right: none;
// @include transition-delay(.26s);
// }
// }
// }
// .smash {
// .animal-data {
// pointer-events: none;
// display: none;
// }
// }
// .smash-no-blur {
// .level-two {
// -webkit-filter: blur(0px) !important;
// @include transform(scale(.95));
// @include transition(.23s, -webkit-filter .25s);
// }
// .animal-data {
// li {
// opacity: 0 !important;
// @include transform(translateY(5px) !important);
// }
// }
// }
// .level-one:hover {
// // cursor: pointer;
// .level-two {
// -webkit-filter: blur(11px);
// }
// .animal-data {
// li {
// opacity: 1;
// &:nth-child(1) {
// &::before {
// width: 81%;
// left: 0;
// }
// }
// }
// }
// }
.smash .stage, .all-animals .stage, .preloader-layer-2 { //FOR WHEN STAGE IS

INACTIVE
.animal-nav {
li {
@include transition(.23s ease-in);
opacity: 0;
@include transform(translateX(11px));
}
}
.main-nav {
li {
@include transition(.23s ease-in);
opacity: 0;
}
}
.animalinfo-wrapper {
@include transition(.2s ease-in 0s);
opacity: 0;
}
footer {
ul li, .footer-nav {
opacity: 0;
}
}
}
.nav-btn {
// background: #fff;
position: relative;
background: url('../img/textured-ui/green-texture.png') repeat center
center / 40px 40px;
&.close {
background: url('../img/textured-ui/red-texture.png') repeat center
center / 40px 40px;
display: block; margin: 0 auto;
position: relative;
.icon {
position: absolute;
top:50%; left: 50%;
margin-left: -12px;
margin-top: -4px;
z-index: 99;
content: "";
position: absolute;
top:0; left: 0;
width: 25px; height: 7px; border-radius: 2px;
background-image: url('../img/textured-ui/repeat-
white.png');
}
&::before {
}
&::after {
}
}
&:hover {
.icon {
&::before {
}
&::after {
}
}
}
}
&::after {
content: "";
position: absolute;
top:5px; left:5px;
background-color: #64d6e2;
background-size: 120%;
}
&:hover {
&::after {
@include transform(scale(.94));
}
}
&:active {
@include transform(scale(1));
&::after {
}
}
.arrow {
z-index: 99;
position: absolute;
top:50%; left: 50%;
margin-left: -7px;
margin-top: -5px;
content: "";
position: absolute;
background-image: url('../img/textured-ui/repeat-white.png');
}
&::before {
}
&::after {
}
}
&:hover {
.arrow {
}
}
.popout {
position: absolute;
right: 80px;
top: 6px;
opacity: 0;
&.text-change {
opacity: 0;
}
}
&:hover {
.popout {
@include transform(translateX(0) !important);
opacity: 1;
&.text-change {
opacity: 0;
}
}
}
}
.offsite {
padding-right: 21px;
position: relative;
color: $threat-red;
span {
position: absolute;
top: 50%;
right: 3px;
margin-top: -6px;
width: 9px;
height: 7px;
border-radius: 3px;
border: 2px solid $threat-red;
&::before {
content: "";
position: absolute;
top: 2px;
left: -5px;
height: 1px;
width: 7px;
}
}
&:hover {
span {
&::before {
left: 4px;
}
}
}
.ctas & {
padding-left: 22px;
padding-right: 0;
color: #fff;
span {
left: 0;
right: auto;
}
}
&.offsite-dark {
span {
&::before {
border-color: #fff;
}
@include transform(scale(.8) translateY(1px));
border-color: #444;
}
}
p & {
&.line-link {
&::after {
bottom: 1px;
}
}
}
}
.line-link {
position: relative;
&::after {
content: '';
background: url('../img/textured-ui/mini-texture.png') repeat left
center;
height: 2px;
width: 100%;
position: absolute;
bottom: -5px;
left: 0;
opacity: 0;
}
&:hover {
&::after {
opacity: 1;
}
}
&.dark-line {
&::after {
background: url('../img/textured-ui/green-texture-less.png')
repeat left center;
}
}
&.red {
&::after {
background: url('../img/textured-ui/red-texture.png') repeat
center center / 50px 50px;
}
}
}
.box-link {
position: relative;
font-size: .96em;
color: #fff;
background: url('../img/textured-ui/red-texture.png') repeat center center /
70px 70px;
span {
z-index: 10;
position: relative;
}
&::after {
content: "";
position: absolute;
z-index: 1;
background: #1a1a1d;
bottom: 2px; top: 2px; right: 2px; left: 2px;
}
&:hover {
&::after {
bottom: 4px; top: 4px; right: 4px; left: 4px;
}
}
}
.popout {
background: url('../img/textured-ui/popout-mid.png') repeat-x left center;
padding: 12px 2px;
line-height: 1.7em;
position: relative;
white-space: nowrap;
font-size: 1.2em;
color: $all-animals-bg;
content: '';
position: absolute;
top: 0; height: 100%; width: 30px;
z-index: -1;
}
&::before {
left: -23px;
background: url('../img/textured-ui/popout-left.png') no-repeat center
center;
}
&::after {
right: -23px;
background: url('../img/textured-ui/popout-right.png') no-repeat center
center;
}
&.big-red {
background: url('../img/textured-ui/popout-red-mid.png') repeat-x left
center;
line-height: 1.7em;
color: #fff;
font-size: 1em;
width: 42px;
background: url('../img/textured-ui/popout-red-end.png') no-
repeat center center;
}
&::before {
left: -22px;

}
&::after {
right: -22px;
@include transform(rotateY(180deg));
}
&:hover {
padding: 21px 13px
}
}
}
position: fixed;
width: 100%;
top: 50%;
margin-top: 13%;
.animalinfo {
text-align: center;
position: relative;
li {
margin-top: 0;
margin-right: 16px;
position: relative;
height: 34px;
&:nth-child(1) {
opacity: 0.77;
span {
font-size: 2.7em;
display: block;
margin-top: 7px;
}
margin-right: 32px;
&::before {
content: "";
position: absolute;
right: -16px;
top: 0;
height: 100%;
width: 3px;
}
}
&:nth-child(2) {
transition-delay: .13s;
h2 {
margin-top: -4px;
}
}
&:nth-child(3) {
margin-right: 0;
a {
display: block;
float: left;
margin-right: 5px;
margin-top: -5px;
position: relative;
&.wallpaper {
background: url('../img/textured-ui/green-
texture-circle.png') center center repeat;
background-size: cover;
margin-right: 0;
span {
z-index: 99;
position: absolute;
top:50%; left: 50%;
margin-left: -8px;
margin-top: -8px;
height: 13px;
width: 13px;
border: 2px solid #fff;
border-radius: 4px;
content: "";
position: absolute;
width: 11px; height: 2px; border-
radius: 3px;
background: white;
-webkit-backface-visibility:
hidden;
@include transform( rotate(-45deg)
translateX(-8px) translateY(0px) );
top: 0; left: 50%;
}
&::after {
opacity: 0;
// background-color:
rgba(255,255,255,0);
}
}
&:hover {
span {
border: 4px solid #FFF !important;
@include
height: 0; width: 0;
height: 3px;
background-color: #FFF !
important;
}
&::after {
opacity: 1;
45deg) translateX(-8px) translateY(4px));
}
&::before {
@include
transform(rotate(45deg) translateX(0px) translateY(12px));
}
}
}
}
&.direct-stats {
background: url('../img/textured-ui/green-
texture-circle.png') center center repeat;
}
}
}
}
&.text-change {
li, a:nth-child(2) {
opacity: 0;
&:nth-child(2), &:nth-child(3), &:nth-child(3) a:nth-
child(2) {
transition-delay: 0s;
}
}
}
}
}
.stage {
z-index: 100;
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
.main-nav {
position: absolute;
top: 50%;
left:30px;
margin-top: -95px;
.popout {
right: auto;
left: 80px;
}
> li {
&:nth-child(2) {
}
&:nth-child(3) {
}
&:nth-child(1) {
ul {
position: relative;
z-index:999999;
top: 50%;
left: 50%;
li {
position: absolute;

$r: ($i*45deg);
@include transform(rotate($r));
}
}
}
li::before, &::before {
content: "";
position: absolute;
height: 2px;
width: 2px;
display: block;
margin-top: -1px;
margin-left: -1px;
background-image:
url('../img/textured-ui/repeat-white.png');
}
li::before {
}
&::before {
height: 4px;
width: 4px;
margin-top: -2px;
margin-left: -2px;
}
&::after {
content: "";
position: absolute;
background-image:
margin-top: -15px; margin-left: -15px;
top: 0; left: 0;
50% 50%);
}
}
a {
&:hover {
ul {
&::after {
@include transition(3s 0s, -webkit-
clip-path .32s .3s);
-webkit-clip-path: polygon(20.4%
65%, 56.4% 83%, 65.8% 16%);
}
li {
&::before {
@include transition(.22s
cubic-bezier($suckitin) 0s);
@include
opacity: 0;
}
&::before {
$td: ($i*.02s);
@include transition-
delay($td);
}
}
}
}
&::before {
}
}
}
}
}
&:nth-child(2) {
a {
.arrow {
@include transform(scale(.45) rotate(-45deg));
top: 26px;
left: 31px;
-webkit-font-smoothing: antialiased;
width: 17px;
height: 6px;
top: 2px;
}
&::before {
left: 1px;
}
&::after {
left: -3px;
}
&:nth-child(1) {
&::before {
}
&::after {
}
}
&:nth-child(2) {
@include transform(scale(.45)
rotate(135deg));
top: 39px;
left: 37px;
}
div {
content: "";
position: absolute;
width: 6px;
height: 23px;
background-image:
border-radius: 2px;
top: 6px;
left: 4px;
}
&::after {
left: -1px;
top: 20px;
height: 15px;
}
}
}
&:hover {
.arrow {
@include transform(scale(0.45) rotate(-
135deg) translate3d(-12px, -18px, 0));
&:nth-child(2) {
@include transform(scale(0.45)
rotate(45deg) translate3d(-9px, -20px, 0));
}
}
}
&.stop {
.arrow {
opacity: 0;
}
@include transform(scale(0.45) rotate(-
90deg) translate3d(-12px, -18px, 0));
&:nth-child(2) {
@include transform(scale(0.45)
rotate(90deg) translate3d(-9px, -20px, 0));
}
div {
@include transition-
delay(.07s);
}
&::before {
width: 11px;
height: 35px;
top: 7px; left: 5px;
}
&::after {
width: 11px;
height: 32px;
top: 23px; left: -7px;
}
}
}
&::after {
}
}
}
}
&:nth-child(3) {
.mute {
height: 100%; width: 100%; position: relative; z-
index: 9;
content: "";
position: absolute;
background: url('../img/textured-ui/mute-
1.png') no-repeat center center;
}
&::after {
background: url('../img/textured-ui/mute-
2.png') no-repeat center center;
}
span {
position: absolute;
right: 50%;
height: 2px;
width: 0;
border-radius: 7px;
z-index: 2;
opacity: 0;
background-image:
@include transform(translate3d(11px, 14px, 0)
rotate(-45deg));
@include transition(.22s, opacity .1s .1s);
}
}
&.muted {
.mute {
opacity: 0.37;
}
span {
bezier($smootheaseout), border .14s);
width: 22px;
opacity: 1;
}
}
&:hover {
.mute {
span {
bezier($smootheaseout) .15s, opacity .13s .15s);
}
}
}
}
}
}
&.no-mute {
@media only screen and (min-width: $smallscreensize) {
margin-top: -70px;
li:nth-child(3) {
display: none;
}
}
}
.all-animals-off-btn {
opacity: 0;
position: absolute;
top: 50%;
margin-top: -27px;
}
}
.animal-nav {
position: absolute;
top: 50%;
right:30px;
margin-top: -115px;
z-index: 1;
li {
&:nth-child(2) {
}
&:nth-child(3) {
}
.nav-btn {
left: 50%;
margin-left: -27px;
}
.next a {
.arrow {
&::before {
@include transform(rotate(-45deg) translateX(8px)
translateY(8px));
}
&::after {
}
}
&:hover {
.arrow {
@include transform(translateX(-6px) translateY(2px));
}
}
}
// @include animation(throbbing 3s forwards infinite);

.two-state-two & {
.throbbing {
}
}
.why-endangered {
// bottom: 40px;
// margin-top: -50px; margin-left: -50px;
display: block;
margin: 10px 0;
@include transition( all .43s cubic-bezier(.7,.3,0,1),
transform .33s cubic-bezier(.06,.63,.15,1.4) );
background:transparent url('../img/textured-ui/threat.png')
center center no-repeat;
&::before {
content: '';
height: 100%;
margin-right: -0.25em; /* Adjusts for spacing */
}
&:hover {
}
&:active {
}
span {
// color: #181818;
text-align: center;
font-size: 1.2em;
letter-spacing: 0.1em;
line-height: 1.1em;
z-index: 2;
width: 84%;
position: relative;
padding-left: 8%;
span {
display: block;
font-size: 1.4em;
}
}
svg {
position: absolute;
top:0; left: 0;
width: 100%; height:100%;
path {
z-index: 1;
}
}
}
}
footer {
.footer-nav {
display: none;
}
position: absolute;
bottom: 30px;
z-index: 999999;
width: 100%;
ul {
text-align: center;
top: 0;
position: relative;
li {
font-size: 1.05em;
margin: 0 15px;
position: relative;

$td: ($i*.14-.14s);
}
}
&::after {
content: "I";
right: -15px;
top: 0;
position: absolute;
}
&:last-child, &:nth-last-child(2) {
&::after {
display: none;
}
}
.popout {
font-size: 1em;
top: -2px;
position: relative;
.wee {
position: absolute;
left: 0px;
top: 12px;
opacity: 0;
}
.bryan {
}
}
&:hover {
padding-left: 74px;
.wee {
opacity: 1;
}
}
}
.share {
padding-left: 34px;
background: url('../img/textured-ui/social.png') left
center no-repeat;
}
}
}
} // END OF FOOTER
} // END OF STAGE
.webkitbrowser {
.textured-type, .animal-nav-content h2 {
background: url('../img/textured-ui/repeat-white.png') center center
repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
&.smaller {
}
@include animation(scratchy .253s linear forwards infinite);
}
.animal-nav-content {
display: block;
opacity: 0;
&.inactive {
display: none;
}
&.active {
opacity: 1;
.title-content {
h1, h2, h4, p {
opacity: 1;
}
}
}
ul {
li {
h4 {
font-size: 1.7em;
}
h2 {
}
span {
color: #706e6e;
i {
color: #bbb;
}
}
&:nth-child(1) {
h4 {
color: $crow-bg;
}
}
&:nth-child(2) {
h4 {
color: $vaquita-bg;
}
}
&:nth-child(3) {
h4 {
color: $tamarin-bg;
}
}
&:nth-child(4) {
h4 {
color: $frog-bg;
}
}
&:nth-child(5) {
h4 {
color: $owl-bg;
}
}
&:nth-child(6) {
h4 {
color: $turtle-bg;
}
}
&:nth-child(7) {
h4 {
color: $oryx-bg
}
}
&:nth-child(8) {
h4 {
color: $iguana-bg
}
}
&:nth-child(9) {
h4 {
color: $seahorse-bg
}
}
&:nth-child(10) {
h4 {
color: $armadillo-bg
}
}
&:nth-child(11) {
h4 {
color: $sloth-bg
}
}
&:nth-child(12) {
h4 {
color: $kakapo-bg
}
}
&:nth-child(13) {
h4 {
color: $echidna-bg
}
}
&:nth-child(14) {
h4 {
color: $penguin-bg
}
}
&:nth-child(15) {
h4 {
color: $damselfly-bg
}
}
&:nth-child(16) {
h4 {
color: $bear-bg
}
}
&:nth-child(17) {
h4 {
color: $parrotfish-bg
}
}
&:nth-child(18) {
h4 {
color: $camel-bg
}
}
&:nth-child(19) {
h4 {
color: $butterfly-bg
}
}
&:nth-child(20) {
h4 {
color: $ostrich-bg
}
}
&:nth-child(21) {
h4 {
color: $panda-bg
}
}
&:nth-child(22) {
h4 {
color: $tapir-bg
}
}
&:nth-child(23) {
h4 {
color: $sifaka-bg
}
}
&:nth-child(24) {
h4 {
color: $lynx-bg
}
}
&:nth-child(25) {
h4 {
color: $rhino-bg
}
}
&:nth-child(26) {
h4 {
color: $peccary-bg
}
}
&:nth-child(27) {
h4 {
color: $okapi-bg
}
}
&:nth-child(28) {
h4 {
color: $loris-bg
}
}
&:nth-child(29) {
h4 {
color: $hirola-bg
}
}
&:nth-child(30) {
h4 {
color: $drill-bg
}
}
}
}
.title-content {
margin-top: -166px;
z-index: 3;
position: relative;
h1, h2, h4, p {
text-align: center;
opacity: 0;
@include transition(.45s .7s cubic-bezier($smootheaseout));
}
h1 {
}
h2 {
font-size: 6em;
line-height: .9em;
margin: 6px 0 15px;
span {
display: block;
}
}
h4 {
color: #656b72;
font-size: 1.7em;
@include transition(1.2s 1.2s);
}
p {
font-size: 1.15em;
@include transition(1.7s 1.6s);
line-height: 1.3em;
padding: 0 40px;
a {
color: $threat-red;
}
}
&.inactive {
opacity: 0;
}
}
}
// START BIGGER THAN SMALL SCREEN ONLY
.all-animals {
.main-nav {
opacity: 1;
}
}
.animal-nav {
}
}
html:not(.small-nav) {
position: absolute;
top: 50%; left: 50%;
width: 340px;
margin-left: -170px;
margin-top: 45px;
z-index: 9999999;
ul {
z-index: 1;
position: relative;
margin-top: -60px;
li {
position: absolute;
top: 0; left: 0;
width: 100%;
text-align: center;
> * {
opacity: 0;
}
&.active > * {
opacity: 1;
&:nth-child(2) {
}
&:nth-child(3) {
}
}
}
}
}
.hover-detector {
z-index: 999999;
position: absolute;
height: 0px; width: 0px; top: 50%; left: 50%;
margin-top: -20px;
display: block;
&.active {
opacity: 1;
div {
opacity: 1;
$td: ($i*.03s);
$ts: (.34s+($i*.05s));
@include transition($ts $td);
}
}
&::after {
opacity: 0;
}
}
div {
$r: ($i*12deg - 7deg);
@include transform(rotate($r) translateY(-230px));
}
}
}
}
&.inactive {
display: none;
}
div {
width: 56px;
height: 56px;
opacity: 0;
position:absolute;
border: 1px solid rgba(255,255,255,0);
top: 50%;
left: 50%;
@include transition(all .3s);

$r: ($i*11.7deg - 7deg);
@include transform(rotate($r) translateY(-200px));
}
}
&:before {
content: "";
@include transition(all .2s cubic-bezier($smootheaseout));
position: absolute; top: 0;left: 0;
}
&:after {
content: "";
position: absolute; top: 0;left: 0;
}
&:hover {
cursor: pointer;
}
&.active-animal, &:hover {
&:after {
@include transition(all .19s cubic-
opacity:1;
}
&:before {
}
}
&:nth-child(1) {
&::after {
border-color: $crow-bg;
}
}
&:nth-child(2) {
&::after {
border-color: $vaquita-bg;
}
}
&:nth-child(3) {
&::after {
border-color: $tamarin-bg;
}
}
&:nth-child(4) {
&::after {
border-color: $frog-bg;
}
}
&:nth-child(5) {
&::after {
border-color: $owl-bg;
}
}
&:nth-child(6) {
&::after {
border-color: $turtle-bg;
}
}
&:nth-child(7) {
&::after {
border-color: $oryx-bg
}
}
&:nth-child(8) {
&::after {
border-color: $iguana-bg
}
}
&:nth-child(9) {
&::after {
border-color: $seahorse-bg
}
}
&:nth-child(10) {
&::after {
border-color: $armadillo-bg
}
}
&:nth-child(11) {
&::after {
border-color: $sloth-bg
}
}
&:nth-child(12) {
&::after {
border-color: $kakapo-bg
}
}
&:nth-child(13) {
&::after {
border-color: $echidna-bg
}
}
&:nth-child(14) {
&::after {
border-color: $penguin-bg
}
}
&:nth-child(15) {
&::after {
border-color: $damselfly-bg
}
}
&:nth-child(16) {
&::after {
border-color: $bear-bg
}
}
&:nth-child(17) {
&::after {
border-color: $parrotfish-bg
}
}
&:nth-child(18) {
&::after {
border-color: $camel-bg
}
}
&:nth-child(19) {
&::after {
border-color: $butterfly-bg
}
}
&:nth-child(20) {
&::after {
border-color: $ostrich-bg
}
}
&:nth-child(21) {
&::after {
border-color: $panda-bg
}
}
&:nth-child(22) {
&::after {
border-color: $tapir-bg
}
}
&:nth-child(23) {
&::after {
border-color: $sifaka-bg
}
}
&:nth-child(24) {
&::after {
border-color: $lynx-bg
}
}
&:nth-child(25) {
&::after {
border-color: $rhino-bg
}
}
&:nth-child(26) {
&::after {
border-color: $peccary-bg
}
}
&:nth-child(27) {
&::after {
border-color: $okapi-bg
}
}
&:nth-child(28) {
&::after {
border-color: $loris-bg
}
}
&:nth-child(29) {
&::after {
border-color: $hirola-bg
}
}
&:nth-child(30) {
&::after {
border-color: $drill-bg
}
}
}
&.inactive {
pointer-events:none;
}
}
.all-animals {
#animalchanger {
&::before {
opacity:.15;
}
background-color: $all-animals-bg;
192dpi) {
}
}
.stage {
.animal-nav {
.why-endangered {
span {
color: $all-animals-bg !important;
}
}
}
.nav-btn::after {
background-color: $all-animals-bg !important;
}
.popout {
color: $all-animals-bg !important;
}
}
.hover-detector {
display: block;
@include transition(200s cubic-bezier(.11,.01,.45,.74));
&.active {
@include transform( rotate(1000deg));
}
}
&.earlyburst {
.hover-detector {
&.active {
opacity: 1;
div {
&::after {
$td: ($i*.045s);
}
}
}
}
}
}
.wrap {
.shard-wrap {
$s: ($i*0.04s+0.1s);
$td: (($i*0.01s)+.33s);
$ctd: (($i*0.01s));
@include transition(all .3s $td, background-
color .3s $ctd linear, -webkit-clip-path $s $td cubic-bezier(.7,.3,0,1));
}
}
&:nth-child(5n+2) {
$s: ($i*0.08s+0.1s);
$td: (($i*0.01s)+.1s);
$ctd: (($i*0.01s));
@include transition(all .3s $td,
background-color .3s $ctd linear, -webkit-clip-path $s $td cubic-
bezier(.7,.3,0,1));
}
}
}
}
}
}
.popout {
color: $all-animals-bg;
}
.level-one {
@include transition(1.3s cubic-bezier(.7,.3,0,1) .4s);
.level-two{
@include transform( rotate(100deg) translateX(10px));
@include transition(transform 60s cubic-
bezier(.11,.01,.45,.74));
.animal-mover {
}
}
&::before {
content: "";
position: absolute;
bottom: 30%;
left: 40%;
rgba(0,0,0,0.15) 35%, rgba(0,0,0,0) 100%);
opacity: 0;
@include transition( .24s cubic-bezier($smootheaseout));
@media (-webkit-min-device-pixel-ratio: 2), (min-
resolution: 192dpi), (min-resolution: 2dppx) {
display: none;
}
}
&.shadow-active {
&::before {
opacity: 1;
@include transition( .6s cubic-bezier($smootheaseout)
.3s);
}
}
&.shadow-inactive, &.shadow-active.shadow-inactive {
&::before {
opacity: 0;
@include transition( .13s cubic-
}
}
.wrap {
.shard-wrap {
.shard {
}
}
}
}
.level-one {
.wrap {
.shard-wrap {
.shard.active {
-webkit-clip-path: polygon( 40.600% 38% ,50%
60%,59% 40% );
bezier($intenseeaseout));
}
&:nth-child(3n+1) .shard.active {
-webkit-clip-path: polygon( 40.600% 58% ,50% 38%,59%
45% );
}
-webkit-clip-path: polygon( 41.600% 56.5% ,52%
37%,57% 56% );
}
}
.shard-wrap {
&:nth-child(1) {
.shard.active {
background-color: $crow-bg;
}
}
&:nth-child(2) {
.shard.active {
background-color: $vaquita-bg;
}
}
&:nth-child(3) {
.shard.active {
background-color: $tamarin-bg;
}
}
&:nth-child(4) {
.shard.active {
background-color: $frog-bg;
}
}
&:nth-child(5) {
.shard.active {
background-color: $owl-bg;
}
}
&:nth-child(6) {
.shard.active {
background-color: $turtle-bg;
}
}
&:nth-child(7) {
.shard.active {
background-color: $oryx-bg
}
}
&:nth-child(8) {
.shard.active {
background-color: $iguana-bg
}
}
&:nth-child(9) {
.shard.active {
background-color: $seahorse-bg
}
}
&:nth-child(10) {
.shard.active {
background-color: $armadillo-bg
}
}
&:nth-child(11) {
.shard.active {
background-color: $sloth-bg
}
}
&:nth-child(12) {
.shard.active {
background-color: $kakapo-bg
}
}
&:nth-child(13) {
.shard.active {
background-color: $echidna-bg
}
}
&:nth-child(14) {
.shard.active {
background-color: $penguin-bg
}
}
&:nth-child(15) {
.shard.active {
background-color: $damselfly-bg
}
}
&:nth-child(16) {
.shard.active {
background-color: $bear-bg
}
}
&:nth-child(17) {
.shard.active {
background-color: $parrotfish-bg
}
}
&:nth-child(18) {
.shard.active {
background-color: $camel-bg
}
}
&:nth-child(19) {
.shard.active {
background-color: $butterfly-bg
}
}
&:nth-child(20) {
.shard.active {
background-color: $ostrich-bg
}
}
&:nth-child(21) {
.shard.active {
background-color: $panda-bg
}
}
&:nth-child(22) {
.shard.active {
background-color: $tapir-bg
}
}
&:nth-child(23) {
.shard.active {
background-color: $sifaka-bg
}
}
&:nth-child(24) {
.shard.active {
background-color: $lynx-bg
}
}
&:nth-child(25) {
.shard.active {
background-color: $rhino-bg
}
}
&:nth-child(26) {
.shard.active {
background-color: $peccary-bg
}
}
&:nth-child(27) {
.shard.active {
background-color: $okapi-bg
}
}
&:nth-child(28) {
.shard.active {
background-color: $loris-bg
}
}
&:nth-child(29) {
.shard.active {
background-color: $hirola-bg
}
}
&:nth-child(30) {
.shard.active {
background-color: $drill-bg
}
}
}
}
}
.all-animals, .preloader.start-up-seq {
.level-one {
// .level-two {
.shard-wrap {
&:nth-child(5n+1) .shard {
background-color: #28282a;
}
}
}
}
}
&:nth-child(31), &:nth-child(32), &:nth-child(33) {

.shard {
-webkit-clip-path: polygon( 50% 50% ,50% 50% ,50%
50% );
}
}
&:nth-child(1) {
.shard {
61.464% ,17.986% 76.893% ,21.367% 69.321% );
}
}
&:nth-child(2) {
.shard {
35.179% ,83.275% 54.179% ,85.792% 43.179% );
}
}
&:nth-child(3) {
.shard {
85.607% ,82.494% 97.893% ,89.503% 96.607% );
}
}
&:nth-child(4) {
.shard {
68.464% ,64.753% 77.036% ,70.342% 74.179% );
}
}
&:nth-child(5) {
.shard {
44.286% ,15.200% 42.286% ,15.900% 44.857% ) ;
}
}
&:nth-child(6) {
.shard {
30.750% ,20.630% 44.750% ,30.912% 46.321% );
}
}
&:nth-child(7) {
.shard {
13.321% ,26.800% 10.321% ,31.000% 8.464% );
}
}
&:nth-child(8) {
.shard {
58.036% ,62.600% 64.179% ,62.600% 58.036% );
}
}
&:nth-child(9) {
.shard {
-webkit-clip-path: polygon( 13.400% 93.750% ,8.200%
93.464% ,12.700% 97.036% );
}
}
&:nth-child(10) {
.shard {
-webkit-clip-path: polygon(25% 92%, 25.5% 92.5%,
26% 92%);
}
}
&:nth-child(11) {
.shard {
10.893% ,2.800% 19.464% );
}
}
&:nth-child(12) {
.shard {
84.000% ,34.100% 86.429% ,35.500% 81.714% );
}
}
&:nth-child(13) {
.shard {
34.607% ,31.300% 39.607% ,33.300% 36.036% );
}
}
&:nth-child(14) {
.shard {
88.179% ,18.023% 93.464% ,16.653% 89.321% );
}
}
&:nth-child(15) {
.shard {
6.607% ,87.930% 5.750% );
}
}
&:nth-child(16) {
.shard {
94.714% ,60.400% 99.9% ,63.600% 98.714% );
}
}
&:nth-child(17) {
.shard {
59.036% ,11.425% 57.321% );
}
}
&:nth-child(18) {
.shard {
-webkit-clip-path: polygon(70% 92%, 71% 94%, 72%
93%) ;
}
}
&:nth-child(19) {
.shard {
18.857% ,76.300% 16.857% ,74.400% 14.429% ) ;
}
}
&:nth-child(20) {
.shard {
93%);
}
}
&:nth-child(21) {
.shard {
30.429% ,75.500% 28.714% ,74.800% 27.857% );
}
}
&:nth-child(22) {
.shard {
28%);
}
}
&:nth-child(23) {
.shard {
35.571% ,19.800% 34.714% ,21.800% 32.000% );
}
}
&:nth-child(24) {
.shard {
44.643% ,90.500% 44.929% ,89.800% 41.786% ) ;
}
}
&:nth-child(25) {
.shard {
99.732% ,48.769% 100% ,50.169% 98% );
}
}
&:nth-child(26) {
.shard {
33.018% ,4.069% 36.304% );
}
}
&:nth-child(27) {
.shard {
69.857% ,85.500% 70.714% ,85.300% 69.286% ) ;
}
}
&:nth-child(28) {
.shard {
-webkit-clip-path: polygon( 24% 95.732% ,27.769%
98% ,25.969% 99.161% );
}
}
&:nth-child(29) {
.shard {
86% 80%);
}
}
&:nth-child(30) {
.shard {
12.875% ,64.769% 10.018% ,65.669% 14.875% );
}
}
}
// }
}
}
.slow-polygons {
.level-one {
.shard-wrap {

$s: ($i*0.04+0.3s);
$t: ((5s/$i)-((30s-$i)/11.6s) + .1s);
transition-delay: $t;
@include transition(all .3s $t, -webkit-clip-path $s $t
cubic-bezier(.7,.3,0,1));
}
}
}
}
}
#animalchanger.crow {
.stage {
.animal-nav {
.why-endangered {
span, &::after {
color: $crow-bg;
}
}
}
.nav-btn::after {
}
.mute span {
}
.popout {
color: $crow-bg;
}
.animalinfo {
li {
&:nth-child(3) {
.direct-stats {
span {
}
}
}
}
}
}
}
.wallpaper {
span {
}
span::before, span::after {
}
}
.overlay {
h2, p span, a {
color: $crow-bg;
}
}
.chart {
&.show-chart-1 {
.shard {
-webkit-clip-path: polygon(15% 15%, 62% 39%, 53% 53%, 49%
51.5%, 50% 50%, 50% 50%, 50% 50%, 50% 50%);
}
}
&.show-chart-2 {
.shard {
-webkit-clip-path: polygon(41% 34.5%, 62% 30%, 84% 50%, 69%
83%, 29% 87%, 0% 50%, 50% 50%, 50% 50%);
}
}
}
.wrap {
.shadow {
left: 30%;
bottom: 10%;
width: 50%;
&::before {
left: 30%;
bottom: 0%;
width: 50%;
height: 100%;
}
&::after {
left: -37%;
bottom: 20%;
height: 60%;
width:50%;
}
}
.shard-wrap {
&:nth-child(1) {
.shard {
-webkit-clip-path: polygon(20% 50%, 25% 52.4%, 11.5%
54.5%);
background-color: #2C323D;
}
}
&:nth-child(2) {
.shard {
-webkit-clip-path: polygon(14.7% 47.5%, 35.2% 50.2%, 25%
52.5%);
background-color: #63676F;
}
}
&:nth-child(3) {
.shard {
48.9%);
background-color: #0F1622;
}
}
&:nth-child(4) {
.shard {
-webkit-clip-path: polygon(24.9% 52.5%, 51.2% 46.7%,
29.4% 54.5%);
}
}
&:nth-child(5) {
.shard {
50.4% 46.8%);
}
}
&:nth-child(6) {
.shard {
35.3% 50.3%);
}
}
&:nth-child(7) {
.shard {
-webkit-clip-path: polygon(29.7% 43.7%, 47.5% 34%, 49%
41%);
background-color: #252b36;
}
}
&:nth-child(8) {
.shard {
-webkit-clip-path: polygon(29.2% 54.5%, 62.9% 42%, 54.3%
65.9%);
}
}
&:nth-child(9) {
.shard {
50.36% 46.9%);
background-color: #3c424c;
}
}
&:nth-child(10) {
.shard {
-webkit-clip-path: polygon(47.7% 33.7%, 65% 36.1%, 62.9%
42.3%);
background-color: #4d525b;
}
}
&:nth-child(11) {
.shard {
36.3%);
}
}
&:nth-child(12) {
.shard {
-webkit-clip-path: polygon(62% 45%, 45% 61.5%, 54.5%
66%);
}
}
&:nth-child(13) {
.shard {
-webkit-clip-path: polygon(54% 76%, 56.5% 87%, 56% 78%);
background-color: #5e636b;
}
}
&:nth-child(14) {
.shard {
-webkit-clip-path: polygon(52% 64.7%, 54.2% 78%, 54.35%
65.86%);
}
}
&:nth-child(15) {
.shard {
-webkit-clip-path: polygon(57.9% 62%, 54.2% 78%, 54.33%
65.7%);
background-color: #0f1622;
}
}
&:nth-child(16) {
.shard {
-webkit-clip-path: polygon(58.4% 87%, 54.2% 78%, 55%
74%);
background-color: #373d47;
}
}
&:nth-child(17) {
.shard {
44.1%);
}
}
&:nth-child(18) {
.shard {
54.2% 66.1%);
}
}
&:nth-child(19) {
.shard {
-webkit-clip-path: polygon(61.5% 24%, 74% 14%, 65.1%
36.6%);
}
}
&:nth-child(20) {
.shard {
36.6%);
}
}
&:nth-child(21) {
.shard {
36.4%);
background-color: #1d242f;
}
}
&:nth-child(22) {
.shard {
23.74%);
}
}
&:nth-child(23) {
.shard {
23.8%);
}
}
&:nth-child(24) {
.shard {
-webkit-clip-path: polygon(77% 21.5%, 88.8% 22.05%, 86.3%
19.35%);
}
}
&:nth-child(25) {
.shard {
19.4%);
}
}
&:nth-child(26) {
.shard {
14%);
}
}
&:nth-child(27) {
.shard {
-webkit-clip-path: polygon(76.25% 18%, 74.5% 22.5%, 78.6%
21.5%);
}
}
&:nth-child(28) {
.shard {
-webkit-clip-path: polygon(76.25% 17.9%, 75.35% 20%,
76.8% 18.8%);
background-color: #a2a7a8;
}
}
&:nth-child(29) {
.shard {
36.2%);
}
}
&:nth-child(30) {
.shard {
74.6% 22.5%);
}
}
&.peripheral {
.shard {
background-color: #14aa78;
}
}
&:nth-child(31) {
.shard {
background-color: darken(#14aa78, 10%);
-webkit-clip-path: polygon(87% 70.5%, 85% 89%, 83% 89%);
}
}
&:nth-child(32) {
.shard {
}
}
}
}
} // END OF CROW
// START OF VAQUITA
#animalchanger.vaquita, .preloader #animalchanger.vaquita-shards {

.shard-wrap {
&:nth-child(1) {
.shard {
-webkit-clip-path: polygon(9.38% 59.35%, 13.4% 58.95%, 9.28%
61.08%);
}
}
&:nth-child(2) {
.shard {
62.35%);
}
}
&:nth-child(3) {
.shard {
17.882% 45.693%);
}
}
&:nth-child(4) {
.shard {
14.684% 54.94%);
}
}
&:nth-child(5) {
.shard {
13.25% 58.958%);
}
}
&:nth-child(6) {
.shard {
32.112% 61.716%);
}
}
&:nth-child(7) {
.shard {
17.827% 55.964%);
}
}
&:nth-child(8) {
.shard {
15.676% 59.431%);
}
}
&:nth-child(9) {
.shard {
17.827% 55.964%);
}
}
&:nth-child(10) {
.shard {
32.112% 61.716%);
}
}
&:nth-child(11) {
.shard {
17.882% 45.693%);
}
}
&:nth-child(12) {
.shard {
58.171% 35.479%);
}
}
&:nth-child(13) {
.shard {
17.827% 55.964%);
}
}
&:nth-child(14) {
.shard {
33.711% 48.13%);
}
}
&:nth-child(15) {
.shard {
32.112% 61.716%);
}
}
&:nth-child(16) {
.shard {
36.91% 70.146%);
}
}
&:nth-child(17) {
.shard {
32.195% 61.597%);
}
}
&:nth-child(18) {
.shard {
40.467% 66.772%);
}
}
&:nth-child(19) {
.shard {
45.128% 74.085%);
}
}
&:nth-child(20) {
.shard {
59.688% 51.237%);
}
}
&:nth-child(21) {
.shard {
47.044% 34.533%);
}
}
&:nth-child(22) {
.shard {
55.276% 61.952%);
}
}
&:nth-child(23) {
.shard {
55.3% 40.679%);
}
}
&:nth-child(24) {
.shard {
59.688% 51.237%);
}
}
&:nth-child(25) {
.shard {
59.688% 51.237%);
}
}
&:nth-child(26) {
.shard {
59.688% 51.237%);
}
}
&:nth-child(27) {
.shard {
75.108% 48.262%);
}
}
&:nth-child(28) {
.shard {
75.108% 48.262%);
}
}
&:nth-child(29) {
.shard {
96.64% 38.788%);
}
}
&:nth-child(30) {
.shard {
88.644% 43.784%);
}
}
}
}
// START OF VAQUITA
#animalchanger.vaquita {
.stage {
.animal-nav {
.why-endangered {
span, &::after {
color: $vaquita-bg;
}
}
}
.nav-btn::after {
}
.popout {
color: $vaquita-bg;
}
.mute span {
}
.animalinfo {
li {
&:nth-child(3) {
.direct-stats {
span {
}
}
}
}
}
}
}
.wallpaper {
span {
}
}
}
.overlay {
h2, p span, a {
color: $vaquita-bg;
}
}
.chart {
&.show-chart-1 {
.shard {
-webkit-clip-path: polygon(30% 15%, 75% 7.5%, 84% 50.5%,
59% 66%, 44% 61%, 43% 50.5%, 50% 50%, 50% 50%);
}
}
&.show-chart-2 {
.shard {
63%, 60% 74%, 43% 68%, 37% 55.5%, 42.5% 47%);
}
}
}
.wrap {
.shadow {
left: 9%;
width: 70%;
left: 20%;
bottom: 22%;
width: 30%;
height: 50%;
}
&::before {
left: 97%;
}
}
.shard-wrap {
&:nth-child(1) {
.shard {
}
}
&:nth-child(2) {
.shard {
}
}
&:nth-child(3) {
.shard {
background-color: #3c4650;
}
}
&:nth-child(4) {
.shard {
}
}
&:nth-child(5) {
.shard {
background-color: #d9eadf;
}
}
&:nth-child(6) {
.shard {
background-color: #d9ebeb;
}
}
&:nth-child(7) {
.shard {
}
}
&:nth-child(8) {
.shard {
}
}
&:nth-child(9) {
.shard {
background-color: #62827f;
}
}
&:nth-child(10) {
.shard {
background-color: #bdd0d0;
}
}
&:nth-child(11) {
.shard {
}
}
&:nth-child(12) {
.shard {
background-color: #384e4d;
}
}
&:nth-child(13) {
.shard {
}
}
&:nth-child(14) {
.shard {
}
}
&:nth-child(15) {
.shard {
background-color: #aac7c6;
}
}
&:nth-child(16) {
.shard {
}
}
&:nth-child(17) {
.shard {
background-color: #d9ebeb;
}
}
&:nth-child(18) {
.shard {
}
}
&:nth-child(19) {
.shard {
}
}
&:nth-child(20) {
.shard {
}
}
&:nth-child(21) {
.shard {
background-color: #2d3b3b;
}
}
&:nth-child(22) {
.shard {
background-color: #d8e2de;
}
}
&:nth-child(23) {
.shard {
}
}
&:nth-child(24) {
.shard {
background-color: #486461
}
}
&:nth-child(25) {
.shard {
background-color: #384e4d;
}
}
&:nth-child(26) {
.shard {
}
}
&:nth-child(27) {
.shard {
background-color: #c0dbd3;
}
}
&:nth-child(28) {
.shard {
background-color: #2d3b3b;
}
}
&:nth-child(29) {
.shard {
}
}
&:nth-child(30) {
.shard {
}
}
&.peripheral {
.shard {
&::before {
@include animation(bubbles 1s infinite
forwards);
}
}
}
&.peripheral:nth-child(31) {
.shard {
-webkit-clip-path: polygon(15% 18.5%, 15.5% 22%, 17%
20%);
}
}
&:nth-child(32) {
.shard {
9.7%);
&::before {
@include animation-delay(.3s);
}
}
}
&:nth-child(33) {
.shard {
34.5%);
&::before {
}
}
}
}
}
} // END OF VAQUITA
// START OF KAKAPO
#animalchanger.kakapo {
background-color: $kakapo-bg;
.stage {
.animal-nav {
.why-endangered {
span, &::after {
color: $kakapo-bg;
}
}
}
.nav-btn::after {
}
.popout {
color: $kakapo-bg;
}
.mute span {
border-color: $kakapo-bg;
}
.animalinfo {
li {
&:nth-child(3) {
.direct-stats {
span {
}
}
}
}
}
}
}
.wallpaper {
span {
}
}
}
.overlay {
h2, p span, a {
color: $kakapo-bg;
}
}
.chart {
&.show-chart-1 {
.shard {
-webkit-clip-path: polygon(57% 33.5%, 66% 43%, 74% 60%, 64%
83%, 36.5% 83%, 15% 64.5%, 15% 64.5%, 5% 31.5%);
}
}
}
.animal-mover {
@include transform(translateX(4%));
}
.wrap {
.shadow {
left: 12%;
width: 61%;
bottom: 11.3%;
height: 8%;
&::before {
left: 32%;
bottom: 22%;
width: 37%;
height: 55%;
}
&::after {
left: 108%;
bottom: 22%;
height: 44%;
width: 25%;
}
}
.shard-wrap {
.shard {
// opacity: 0;
}
&:nth-child(1) {
.shard {
33.194% ,21.650% 33.337% );
background-color: #e9ddb2;
}
}
&:nth-child(2) {
.shard {
33.194% ,23.450% 43.194% );
background-color: #cebf82;
}
}
&:nth-child(3) {
.shard {
43.051% ,9.350% 45.480% );
background-color: #d2c895;
}
}
&:nth-child(4) {
.shard {
41.337% ,13.750% 43.051% );
}
}
&:nth-child(5) {
.shard {
55.051% ,9.250% 51.051% );
background-color: #d3eadd;
}
}
&:nth-child(6) {
.shard {
44.908% ,10.950% 55.051% );
background-color: #dbdb60;
}
}
&:nth-child(7) {
.shard {
45.051% ,20.850% 56.337% );
background-color: #9c9c6d;
}
}
&:nth-child(8) {
.shard {
20.9% 56.194%);
background-color: #dbd095;
}
}
&:nth-child(9) {
.shard {
18.480% ,21.350% 33.337% );
}
}
&:nth-child(10) {
.shard {
20.051% ,23.450% 43.051% );
background-color: #6da13a;
}
}
&:nth-child(11) {
.shard {
43.051% ,35.150% 63.766% );
}
}
&:nth-child(12) {
.shard {
23.480% ,59.850% 31.194% );
background-color: #7cb949;
}
}
&:nth-child(13) {
.shard {
41.908% ,23.350% 43.051% );
}
}
&:nth-child(14) {
.shard {
39.85% 51.766%);
}
}
&:nth-child(15) {
.shard {
51.766% ,34.750% 63.480% );
background-color: #6c7e4b;
}
}
&:nth-child(16) {
.shard {

23.623% ,30.850% 25.194% );
background-color: #6aa84e;
}
}
&:nth-child(17) {
.shard {
43.35% 42.051%);
}
}
&:nth-child(18) {
.shard {
51.623% ,45.050% 81.766% );
}
}
&:nth-child(19) {
.shard {
83.194% ,41.950% 84.480% );
}
}
&:nth-child(20) {
.shard {
88.194% ,45.750% 79.908% );
}
}
&:nth-child(21) {
.shard {
83.051% ,43.150% 85.480% );
background-color: #4a4b46;
}
}
&:nth-child(22) {
.shard {
54.051% ,44.750% 81.766% );
background-color: #435a2c;
}
}
&:nth-child(23) {
.shard {
48.480% ,42.450% 66.908% );
background-color: #56712b;
}
}
&:nth-child(24) {
.shard {
43.908%, 63.25% 54.337%);
}
}
&:nth-child(25) {
.shard {
50.766% ,63.250% 54.337% );
background-color: #406c2b;
}
}
&:nth-child(26) {
.shard {
49.051% ,39.750% 51.908% );
}
}
&:nth-child(27) {
.shard {
30.480% ,58.650% 49.051% );
}
}
&:nth-child(28) {
.shard {
43.623%, 58.55% 49%);
background-color: #519f4b;
}
}
&:nth-child(29) {
.shard {
-webkit-clip-path: polygon(63.25% 54.337%, 69% 43.95%,
70.95% 51.623%);
background-color: #56712b;
}
}
&:nth-child(30) {
.shard {
51.623% ,88.050% 73.051% );
}
}
&.peripheral {
z-index: 1;
}
.shard {
27.924% ,57.003% 19.924% );
}
}
&:nth-child(33) {
.shard {
background-color: #fafafa;
27.924% ,63.003% 17% );
}
}
.shard {
27.924% ,69.003% 19.924% );
}
}
}
}
} // END OF KAKAPO
// START OF OSTRICH
#animalchanger.ostrich {
background-color: $ostrich-bg;
.stage {
.animal-nav {
.why-endangered {
span, &::after {
color: $ostrich-bg;
}
}
}
.nav-btn::after {
}
.popout {
color: $ostrich-bg;
}
.mute span {
border-color: $ostrich-bg;
}
.animalinfo {
li {
&:nth-child(3) {
.direct-stats {
span {
}
}
}
}
}
}
}
.wallpaper {
span {
}
}
}
.overlay {
h2, p span, a {
color: $ostrich-bg;
}
}
.wrap {
.shadow {
left: 38.5%;
width: 20%;
bottom: 10%;
height: 4%;
&::before {
left: -28%;
bottom: -33%;
width: 97%;
height: 88%;
}
&::after {
left: 37%;
bottom: 30%;
height: 60%;
width:20%;
}
}
.shard-wrap {
&:nth-child(1) {
.shard {
25.8% 38.4%);
background-color: #f8f1e8;
}
}
&:nth-child(2) {
.shard {
33.286% ,30.100% 39.429% );
background-color: #bcae92;
}
}
&:nth-child(3) {
.shard {
33.45% 44.1%);
background-color: #0c0d08;
}
}
&:nth-child(4) {
.shard {
-webkit-clip-path: polygon(32.5% 33%, 43.3% 30.857%,
33.4% 44.15%);
}
}
&:nth-child(5) {
.shard {
53.4% 41.1%);
}
}
&:nth-child(6) {
.shard {
31.000% ,45.800% 37.714% );
}
}
&:nth-child(7) {
.shard {
-webkit-clip-path: polygon(33.4% 44%, 53.4% 41%, 60.8%
58.429%);
}
}
&:nth-child(8) {
.shard {
-webkit-clip-path: polygon(42% 28.5%, 53.2% 40.857%,
45.6% 37.429%);
background-color: #b9bbb0;
}
}
&:nth-child(9) {
.shard {
53.3% 41.1%);
}
}
&:nth-child(10) {
.shard {
-webkit-clip-path: polygon(37.5% 60%, 50% 43.1%, 51.7%
51.857%);
background-color: #c1bdb4;
}
}
&:nth-child(11) {
.shard {
51.6% 52%);
}
}
&:nth-child(12) {
.shard {
-webkit-clip-path: polygon(37.5% 60%, 50% 43.3%, 46%
46%);
background-color: #b4b4aa;
}
}
&:nth-child(13) {
.shard {
58.857% ,46.400% 77.000% );
}
}
&:nth-child(14) {
.shard {
44.4% 79.286%);
}
}
&:nth-child(15) {
.shard {
77.000% ,42.700% 89.571% );
background-color: #debfab;
}
}
&:nth-child(16) {
.shard {
52.571% ,45.000% 70.429% );
}
}
&:nth-child(17) {
.shard {
64.714% ,48.700% 88.143% );
background-color: #87847d;
}
}
&:nth-child(18) {
.shard {
38.857% ,53.200% 41.000% );
}
}
&:nth-child(19) {
.shard {
66.1% 38.97%);
}
}
&:nth-child(20) {
.shard {
60.8% 58.571%);
background-color: #1e1e1e;
}
}
&:nth-child(21) {
.shard {
69.3% 47.286%);
background-color: #0c0d08;
}
}
&:nth-child(22) {
.shard {
69.2% 47.286%);
}
}
&:nth-child(23) {
.shard {
72.5% 40.8%);
}
}
&:nth-child(24) {
.shard {
71.4% 32.857%);
background-color: #c4c0b7;
}
}
&:nth-child(25) {
.shard {
20.143% ,71.300% 32.714% );
}
}
&:nth-child(26) {
.shard {
19.714% ,69.200% 15.429% );
background-color: #bebebe;
}
}
&:nth-child(27) {
.shard {
12.143% ,71.100% 12.857% );
background-color: #aaaaaa;
}
}
&:nth-child(28) {
.shard {
68.4% 12.429%);
background-color: #cbbdb0;
}
}
&:nth-child(29) {
.shard {
11.143% ,71.100% 12.714% );
background-color: #c8c8c8;
}
}
&:nth-child(30) {
.shard {
12.714% ,73.600% 14.571% );
background-color: #d84d50;
}
}
&.peripheral {
.shard {
}
}
&:nth-child(31) {
.shard {
}
}
&:nth-child(32) {
.shard {
}
}
}
}
} // END OF OSTRICH
// ----------
// START OF PARROTFISH
#animalchanger.parrotfish {
background-color: $parrotfish-bg;
.stage {
.animal-nav {
.why-endangered {
span, &::after {
color: $parrotfish-bg;
}
}
}
.nav-btn::after {
}
.popout {
}
.mute span {
border-color: $parrotfish-bg;
}
.animalinfo {
li {
&:nth-child(3) {
.direct-stats {
span {
}
}
}
}
}
}
}
.wallpaper {
span {
}
}
}
.overlay {
h2, p span, a {
}
}
.wrap {
.shadow {
left: 4%;
width: 80%;
&::before {
left: 43%;
bottom: 22%;
width: 37%;
height: 55%;
}
&::after {
left: 80%;
bottom: 20%;
height: 60%;
width:30%;
}
}
.shard-wrap {
&:nth-child(1) {
.shard {
34.286% ,26.012% 40.000% );
background-color: #ff9763;
}
}
&:nth-child(2) {
.shard {
48.857% ,14.313% 60.714% );
background-color: #02ac96;
}
}
&:nth-child(3) {
.shard {
54.714% ,16.313% 63.286% );
background-color: #d66b5b;
}
}
&:nth-child(4) {
.shard {
14.25% 60.6%);
background-color: #e58557;
}
}
&:nth-child(5) {
.shard {
39.857% ,22.813% 48.429% );
background-color: #ed8e5b;
}
}
&:nth-child(6) {
.shard {
48.429% ,28.813% 54.857% );
}
}
&:nth-child(7) {
.shard {
39.714%, 28.7% 54.77%);
}
}
&:nth-child(8) {
.shard {
44.286%, 28.75% 54.9%);
background-color: #08da9f;
}
}
&:nth-child(9) {
.shard {
30.714%, 52.25% 22.8%);
}
}
&:nth-child(10) {
.shard {
47.713% 62.3%);
}
}
&:nth-child(11) {
.shard {
26.286%, 47.713% 44.3%);
background-color: #5cefb2;
}
}
&:nth-child(12) {
.shard {
44.143% ,47.713% 62.286% );
}
}
&:nth-child(13) {
.shard {
35.286% ,47.713% 44.286% );
background-color: #30e5aa;
}
}
&:nth-child(14) {
.shard {
53.143%, 47.713% 62.35%);
}
}
&:nth-child(15) {
.shard {
35.429% ,56.112% 53.286% );
background-color: #00cc97;
}
}
&:nth-child(16) {
.shard {
66.112% 25.7%);
background-color: #ffc86d;
}
}
&:nth-child(17) {
.shard {
56.012% 35.4%);
background-color: #ffba5b;
}
}
&:nth-child(18) {
.shard {
25.714%, 68.212% 48%);
background-color: #ffaa5a;
}
}
&:nth-child(19) {
.shard {
35.286%, 68.5% 48.3%);
background-color: #583c3e;
}
}
&:nth-child(20) {
.shard {
38.286%, 68.5% 48.2%);
background-color: #3b2e37;
}
}
&:nth-child(21) {
.shard {
56.112% 53.429%);
}
}
&:nth-child(22) {
.shard {
65.813% 64.571%);
background-color: #f86826;
}
}
&:nth-child(23) {
.shard {
48.000% ,65.712% 64.571% );
background-color: #fa7637;
}
}
&:nth-child(24) {
.shard {
63.429%, 65.612% 64.5%);
background-color: #f4542e;
}
}
&:nth-child(25) {
.shard {
43.571% ,68.112% 48.143% );
background-color: #ff9658;
}
}
&:nth-child(26) {
.shard {
43.429%, 65.6% 64.62%);
background-color: #fa8637;
}
}
&:nth-child(27) {
.shard {
48.000% ,85.513% 53.286% );
background-color: #ba694b;
}
}
&:nth-child(28) {
.shard {
40.857% ,79.813% 42.571% );
background-color: #32a4f0;
}
}
&:nth-child(29) {
.shard {
88.413% 47.571%);
background-color: #32a4f0;
}
}
&:nth-child(30) {
.shard {
85.413% 53.286%);
background-color: #0078a1;
}
}
&.peripheral {
.shard {
@include animation(bubbles 1s infinite forwards);
}
}
.shard {
20%);
}
}
&:nth-child(32) {
.shard {
9.7%);
}
}
&:nth-child(33) {
.shard {
34.5%);
}
}
}
}
} // END OF PARROTFISH
// ----------
// START OF PENGUIN
#animalchanger.penguin {
background-color: $penguin-bg;
.stage {
.animal-nav {
.why-endangered {
span, &::after {
color: $penguin-bg;
}
}
}
.nav-btn::after {
}
.popout {
color: $penguin-bg;
}
.mute span {
border-color: $penguin-bg;
}
.animalinfo {
li {
&:nth-child(3) {
.direct-stats {
span {
}
}
}
}
}
}
}
.wallpaper {
span {
}
}
}
.overlay {
h2, p span, a {
color: $penguin-bg;
}
}
.chart {
&.show-chart-1 {
.shard {
-webkit-clip-path: polygon(25% 7%, 56% 40%, 60% 50.2%,
54.5% 57%, 47% 55%, 47.5% 50%, 50% 50%, 50% 50%);
}
}
&.show-chart-2 {
.shard {
-webkit-clip-path: polygon(20.6% 10%, 74% 17%, 78% 59.2%,
50% 70%, 4% 65%, 50% 50%, 50% 50%, 50% 50%);
}
}
}
.wrap {
.shadow {
left: 25%;
width: 43%;
bottom: 12%;
height: 8%;
&::before {
left: 8%;
bottom: -18%;
width: 27%;
height: 39%;
}
&::after {
left: 75%;
bottom: 42%;
height: 37%;
width:24%;
}
}
.shard-wrap {
&:nth-child(1) {
.shard {
-webkit-clip-path: polygon(38.650% 66.000% ,40.750%
84.429% ,47.850% 70.000%);
}
}
&:nth-child(2) {
.shard {
70.000% ,54.650% 46.286%);
}
}
&:nth-child(3) {
.shard {
84.571% ,52.750% 51.000%);
background-color: #2D2D31;
}
}
&:nth-child(4) {
.shard {
59.429% ,52.850% 50.857%);
background-color: #37383A;
}
}
&:nth-child(5) {
.shard {
55.2% 38.286%);
background-color: #29292E;
}
}
&:nth-child(6) {
.shard {
45.714% ,55.050% 38.429%);
}
}
&:nth-child(7) {
.shard {
85.000% ,49.050% 89.857%);
background-color: #1E1D21;
}
}
&:nth-child(8) {
.shard {
81.143% ,55.750% 85.571%);
background-color: #1E1D21;
}
}
&:nth-child(9) {
.shard {
21.714% ,55.050% 38.429%);
background-color: #D8D8DD;
}
}
&:nth-child(10) {
.shard {
13.143% ,50.550% 25.857%);
background-color: #ABABB5;
}
}
&:nth-child(11) {
.shard {
7.857% ,49.050% 17.714%);
background-color: #CCCECD;
}
}
&:nth-child(12) {
.shard {
11.286% ,50.550% 25.857%);
background-color: #1C1C1E;
}
}
&:nth-child(13) {
.shard {
7.714% ,59.650% 10.571%);
background-color: #faf9fa;
}
}
&:nth-child(14) {
.shard {
57.65% 15.7%);
background-color: #b580a7;
}
}
&:nth-child(15) {
.shard {
18.000% ,50.450% 25.857%);
background-color: #32323C;
}
}
&:nth-child(16) {
.shard {
17.857% ,61.150% 21.714%);
}
}
&:nth-child(17) {
.shard {
10.571% ,66.750% 14.571%);
background-color: #3C363E;
}
}
&:nth-child(18) {
.shard {
60.45% 18%);
}
}
&:nth-child(19) {
.shard {
47.95% 69.857%);
background-color: #a7a6a1;
}
}
&:nth-child(20) {
.shard {
12.429% ,62.650% 15.000%);
}
}
&:nth-child(21) {
.shard {
15.000% ,62.950% 16.571%);
background-color: #4E434B;
}
}
&:nth-child(22) {
.shard {
21.714% ,64.150% 32.429%);
background-color: #F2F2F2;
}
}
&:nth-child(23) {
.shard {
32.429% ,53.250% 48.143%);
}
}
&:nth-child(24) {
.shard {
-webkit-clip-path: polygon(55.35% 45%, 64% 32.429%, 64%
37.143%);
background-color: #3e3c40;
}
}
&:nth-child(25) {
.shard {
37.000% ,63.750% 51.286%);
background-color: #CCCECD;
}
}
&:nth-child(26) {
.shard {
51.143% ,57.050% 74.429%);
background-color: #bfc2c1;
}
}
&:nth-child(27) {
.shard {
53.571% ,65.450% 73.429%);
}
}
&:nth-child(28) {
.shard {
49.143% ,59.950% 50.143%);
background-color: #29292e;
}
}
&:nth-child(29) {
.shard {
69.714%, 57.2% 74.3%);
}
}
&:nth-child(30) {
.shard {
51.75% 81.857%);
}
}
}
}
} // END OF PENGUIN
// ----------
// START OF IGUANA
#animalchanger.iguana {
background-color: $iguana-bg;
.stage {
.animal-nav {
.why-endangered {
span, &::after {
color: $iguana-bg;
}
}
}
.nav-btn::after {
}
.popout {
color: $iguana-bg;
}
.mute span {
border-color: $iguana-bg;
}
.animalinfo {
li {
&:nth-child(3) {
.direct-stats {
span {
}
}
}
}
}
}
}
.wallpaper {
span {
}
}
}
.overlay {
h2, p span, a {
color: $iguana-bg;
}
}
.wrap {
.shadow {
left: 24%;
width: 80%;
bottom: 13%;
&::before {
left: 43%;
bottom: 22%;
width: 37%;
height: 55%;
}
&::after {
left: 80%;
bottom: 20%;
height: 60%;
width:30%;
}
}
.shard-wrap {
&:nth-child(1) {
.shard {
27.357% ,13.900% 32.357%);
background-color: #F4C264;
}
}
&:nth-child(2) {
.shard {
24.214% ,26.200% 32.071%);
background-color: #53A245;
}
}
&:nth-child(3) {
.shard {
22% 28.7%);
background-color: #83CA65;
}
}
&:nth-child(4) {
.shard {
28.357% ,13.900% 32.214%);
background-color: #70BA58;
}
}
&:nth-child(5) {
.shard {
21.4% 35.4%);
background-color: #3CAE58;
}
}
&:nth-child(6) {
.shard {
17.7% 37.929%);
background-color: #A5CFB4;
}
}
&:nth-child(7) {
.shard {
32.071% ,27.400% 34.071%);
background-color: #C0D5DA;
}
}
&:nth-child(8) {
.shard {
43.8%);
background-color: #439D56;
}
}
&:nth-child(9) {
.shard {
26.1% 31.929%);
background-color: #76B548;
}
}
&:nth-child(10) {
.shard {
31.071% ,39.800% 37.357%);
background-color: #1D2E1E;
}
}
&:nth-child(11) {
.shard {
37.357% ,27.400% 34.214%);
background-color: #E7EEF0;
}
}
&:nth-child(12) {
.shard {
37.7% 47.5%);
background-color: #5FBC60;
}
}
&:nth-child(13) {
.shard {
27.5% 51%);
background-color: #3CAE58;
}
}
&:nth-child(14) {
.shard {
47.500% ,35.800% 57.357%);
background-color: #42A54A;
}
}
&:nth-child(15) {
.shard {
41.500% ,24.000% 46.929%);
background-color: #378E32;
}
}
&:nth-child(16) {
.shard {
44.643% ,24.700% 48.929%);
background-color: #5EC857;
}
}
&:nth-child(17) {
.shard {
44.500% ,34.900% 52.500%);
background-color: #63DB7B;
}
}
&:nth-child(18) {
.shard {
52.643% ,23.400% 54.929%);
background-color: #5EC857;
}
}
&:nth-child(19) {
.shard {
38.5% 59.7%);
background-color: #C0D5DA;
}
}
&:nth-child(20) {
.shard {
49.929% ,55.500% 57.500%);
}
}
&:nth-child(21) {
.shard {
39.1% 47.786%);
background-color: #8AD36D;
}
}
&:nth-child(22) {
.shard {
38.4% 59.643%);
background-color: #51C356;
}
}
&:nth-child(23) {
.shard {
47.9% 63.214%);
}
}
&:nth-child(24) {
.shard {
50.357% ,50.700% 63.643%);
background-color: #C0D0D1;
}
}
&:nth-child(25) {
.shard {
71.643% ,50.700% 63.643%);
background-color: #44AF3C;
}
}
&:nth-child(26) {
.shard {
84.5% 78.1%);
}
}
&:nth-child(27) {
.shard {
63.45% 71.75%);
}
}
&:nth-child(28) {
.shard {
77.5% 76.9%);
background-color: #38973B;
}
}
&:nth-child(29) {
.shard {
82.929% ,77.500% 76.929%);
}
}
&:nth-child(30) {
.shard {
92.6% 84.357%);
}
}
&:nth-child(31) {
.shard {
46.05% 55.071%);
}
}
&:nth-child(32) {
.shard {
-webkit-clip-path: polygon(-0.050% 46.214% ,46.850%
55.071% ,52.750% 68.071%);
background-color: #342D1E;
}
}
&:nth-child(33) {
.shard {
57.071% ,92.750% 84.214%);
}
}
}
}
} // END OF IGUANA
// ----------
// START OF PECCARY
#animalchanger.peccary {
background-color: $peccary-bg;
.stage {
.animal-nav {
.why-endangered {
span, &::after {
color: $peccary-bg;
}
}
}
.nav-btn::after {
}
.popout {
color: $peccary-bg;
}
.mute span {
border-color: $peccary-bg;
}
.animalinfo {
li {
&:nth-child(3) {
.direct-stats {
span {
}
}
}
}
}
}
}
.wallpaper {
span {
}
}
}
.overlay {
h2, p span, a {
color: $peccary-bg;
}
}
.chart {
&.show-chart-1 {
.shard {
-webkit-clip-path: polygon(36.5% 37%, 85% 15%, 66% 66%, 41%
59%, 50% 50%, 50% 50%, 50% 50%, 50% 50%);
}
}
&.show-chart-2 {
.shard {
-webkit-clip-path: polygon(15.5% 16%, 75% 25%, 55% 55%,
49.5% 50.5%, 50% 50%, 50% 50%, 50% 50%, 50% 50%);
}
}
}
.wrap {
.shadow {
left: 22%;
width: 60%;
bottom: 13%;
&::before {
left: 19%;
bottom: 22%;
width: 37%;
height: 55%;
}
&::after {
left: 77%;
bottom: 20%;
height: 40%;
width:30%;
}
}
.shard-wrap {
&:nth-child(1) {
.shard {
80.929% ,23.250% 79.929%);
background-color: #DDABBC;
}
}
&:nth-child(2) {
.shard {
58.500% ,17.050% 79.214%);
}
}
&:nth-child(3) {
.shard {
58.214%, 23.5% 79.929%);
}
}
&:nth-child(4) {
.shard {
58.357% ,23.350% 79.929%);
}
}
&:nth-child(5) {
.shard {
58.357% ,22.150% 61.214%);
}
}
&:nth-child(6) {
.shard {
43.786% ,21.150% 49.786%);
}
}
&:nth-child(7) {
.shard {
41.786%, 26.85% 58.5%);
}
}
&:nth-child(8) {
.shard {
43.214%, 33.05% 55.071%);
}
}
&:nth-child(9) {
.shard {
23.75% 77.071%);
background-color: #856B5C;
}
}
&:nth-child(10) {
.shard {
55.500% ,27.250% 58.643%);
background-color: #a2877a;
}
}
&:nth-child(11) {
.shard {
71.929%, 29.55% 78.643%);
}
}
&:nth-child(12) {
.shard {
32.643%, 33.2% 55.5%);
}
}
&:nth-child(13) {
.shard {
21.929%, 42.7% 49.929%);
}
}
&:nth-child(14) {
.shard {
19.500% ,42.650% 49.929%);
background-color: #4B3E32;
}
}
&:nth-child(15) {
.shard {
20.214%, 62.05% 40.929%);
}
}
&:nth-child(16) {
.shard {
40.86%, 67.75% 55.471%);
}
}
&:nth-child(17) {
.shard {
55.171%, 49.75% 62.071%);
background-color: #3B312A;
}
}
&:nth-child(18) {
.shard {
35.357%, 44.35% 48.929%);
background-color: #725E4C;
}
}
&:nth-child(19) {
.shard {
48.929% ,35.450% 71.214%);
}
}
&:nth-child(20) {
.shard {
51.43%, 43.99% 70.071%);
}
}
&:nth-child(21) {
.shard {
61.929% ,43.850% 70.071%);
background-color: #6E5C4A;
}
}
&:nth-child(22) {
.shard {
69.929%, 37.85% 84.5%);
background-color: #3E362C;
}
}
&:nth-child(23) {
.shard {
63.500% ,44.850% 84.786%);
}
}
&:nth-child(24) {
.shard {
55.071% ,61.150% 62.643%);
}
}
&:nth-child(25) {
.shard {
20.214%, 80.15% 43.271%);
background-color: #4D3B2D;
}
}
&:nth-child(26) {
.shard {
43.071%, 67.35% 55.071%);
}
}
&:nth-child(27) {
.shard {
-webkit-clip-path: polygon(67.35% 54.9%, 80% 43%,
76.65% 76.94%);
background-color: #4D3A29;
}
}
&:nth-child(28) {
.shard {
23.929%, 80.75% 44.929%);
background-color: #3E352E;
}
}
&:nth-child(29) {
.shard {
43.786%, 78.95% 84.786%);
}
}
&:nth-child(30) {
.shard {
75.643%, 73.45% 84.786%);
background-color: #3E352E;
}
}
&.peripheral {
.shard {
}
}
&:nth-child(31) {
.shard {
}
}
&:nth-child(32) {
.shard {
}
}
}
}
} // END OF PECCARY
// ----------
// START OF DRILL
#animalchanger.drill {
background-color: $drill-bg;
.stage {
.animal-nav {
.why-endangered {
span, &::after {
color: $drill-bg;
}
}
}
.nav-btn::after {
}
.popout {
color: $drill-bg;
}
.mute span {
border-color: $drill-bg;
}
.animalinfo {
li {
&:nth-child(3) {
.direct-stats {
span {
}
}
}
}
}
}
}
.wallpaper {
span {
}
}
}
.overlay {
h2, p span, a {
color: $drill-bg;
}
}
.wrap {
.shadow {
left: 34%;
width: 42%;
bottom: 13.2%;
&::before {
left: 6%;
bottom: -13%;
width: 60%;
height: 55%;
}
&::after {
left: 65%;
bottom: 34%;
height: 30%;
width: 20%;
}
}
.shard-wrap {
&:nth-child(1) {
.shard {
44.071% ,39.600% 36.643%);
background-color: #2C2C26;
}
}
&:nth-child(2) {
.shard {
37.214% ,47.900% 46.071%);
background-color: #13170D;
}
}
&:nth-child(3) {
.shard {
16.786% ,47.900% 46.214%);
background-color: #3A3B2E;
}
}
&:nth-child(4) {
.shard {
26.357% ,41.300% 45.929%);
background-color: #D4E6D5;
}
}
&:nth-child(5) {
.shard {
6.500% ,35.700% 17.500%);
}
}
&:nth-child(6) {
.shard {
26.357%, 35.7% 17.5%);
background-color: #B7C3AD;
}
}
&:nth-child(7) {
.shard {
17.500% ,28.300% 34.214%);
background-color: #AAB4A1;
}
}
&:nth-child(8) {
.shard {
40.929% ,30.300% 45.214%);
background-color: #A0A499;
}
}
&:nth-child(9) {
.shard {
17.500% ,35.800% 48.929%);
}
}
&:nth-child(10) {
.shard {
34.357% ,35.800% 48.643%);
}
}
&:nth-child(11) {
.shard {
29.071%, 35.8% 48.786%);
background-color: #B4BCA1;
}
}
&:nth-child(12) {
.shard {
45.929%, 35.7% 48.786%);
background-color: #C1D3BB;
}
}
&:nth-child(13) {
.shard {
41.214% ,35.700% 44.071%);
background-color:#7E5C68;
}
}
&:nth-child(14) {
.shard {
28.8%, 35.95% 42.929%);
}
}
&:nth-child(15) {
.shard {
40.786% ,35.800% 42.929%);
}
}
&:nth-child(16) {
.shard {
23.929% ,40.000% 25.786%);
}
}
&:nth-child(17) {
.shard {
25.786% ,35.700% 29.071%);
}
}
&:nth-child(18) {
.shard {
47.2% 26.357%);
background-color: #6E6F51;
}
}
&:nth-child(19) {
.shard {
16.071% ,47.200% 26.357%);
background-color: #5E5C40;
}
}
&:nth-child(20) {
.shard {
16.43%, 58.9% 38.929%);
}
}
&:nth-child(21) {
.shard {
86.071%, 45% 86.071%);
}
}
&:nth-child(22) {
.shard {
38.929%, 51.5% 78.5%);
}
}
&:nth-child(23) {
.shard {
35.500% ,67.900% 41.500%);
}
}
&:nth-child(24) {
.shard {
23.643% ,58.700% 39.071%);
}
}
&:nth-child(25) {
.shard {
23.643% ,68.000% 41.643%);
}
}
&:nth-child(26) {
.shard {
55.2% 57.643%);
}
}
&:nth-child(27) {
.shard {
70.643% ,60.200% 84.071%);
}
}
&:nth-child(28) {
.shard {
41.4%, 60.96% 69.3%);
background-color: #252A1E;
}
}
&:nth-child(29) {
.shard {
35.500% ,66.800% 62.214%);
}
}
&:nth-child(30) {
.shard {
65.9% 84.357%);
}
}
}
}
} // END OF DRILL
// ----------
// START OF ORYX
#animalchanger.oryx {
background-color: $oryx-bg;
.stage {
.animal-nav {
.why-endangered {
span, &::after {
color: $oryx-bg;
}
}
}
.nav-btn::after {
}
.popout {
color: $oryx-bg;
}
.mute span {
border-color: $oryx-bg;
}
.animalinfo {
li {
&:nth-child(3) {
.direct-stats {
span {
}
}
}
}
}
}
}
.wallpaper {
span {
}
}
}
.overlay {
h2, p span, a {
color: $oryx-bg;
}
}
.chart {
&.show-chart-1 {
.shard {
-webkit-clip-path: polygon(25% 7%, 66% 23%, 68% 50.5%, 53%
56%, 48% 54%, 50% 50%, 50% 50%, 50% 50%);
}
}
&.show-chart-2 {
.shard {
85.5%, 50% 50%, 50% 50%, 50% 50%, 50% 50%);
}
}
&.show-chart-3 {
.shard {
-webkit-clip-path: polygon(33% 21%, 56% 40%, 55% 50%, 75.5%
94%, 45.5% 57%, 45% 50%, 50% 50%, 50% 50%);
}
}
}
.wrap {
.shadow {
left: 14%;
width: 53%;
bottom: 12%;
&::before {
left: 71%;
bottom: 22%;
width: 30%;
height: 55%;
}
&::after {
left: 10%;
bottom: 23%;
height: 37%;
width: 30%;
}
}
.shard-wrap {
&:nth-child(1) {
.shard {
33.571% ,46.850% 36.286%);
background-color: #EFDCCD;
}
}
&:nth-child(2) {
.shard {
-webkit-clip-path: polygon(32.5% 60%, 36.05% 55%,
41.75% 66.857%);
}
}
&:nth-child(3) {
.shard {
57.5%, 23.45% 56.143%);
background-color: #AE886D;
}
}
&:nth-child(4) {
.shard {
57.3%, 22.45% 71.714%);
background-color: #D7C5A4;
}
}
&:nth-child(5) {
.shard {
59.2%, 29.75% 85.857%);
background-color: #7F6B5F;
}
}
&:nth-child(6) {
.shard {
36.286% ,35.050% 57.714%);
background-color:#DACDBC;
}
}
&:nth-child(7) {
.shard {
64.714%, 24.65% 85.857%);
background-color: #F2E1C5;
}
}
&:nth-child(8) {
.shard {
36.286% ,50.650% 52.286%);
background-color: #E9DCC4;
}
}
&:nth-child(9) {
.shard {
-webkit-clip-path: polygon(36% 54.857%, 50.65%
52.286%, 41.85% 66.857%);
background-color: #CFBA91;
}
}
&:nth-child(10) {
.shard {
52.143% ,56.050% 64.714%);
background-color: #BAAE96;
}
}
&:nth-child(11) {
.shard {
33.000% ,61.250% 36.429%);
background-color: #F3EADF;
}
}
&:nth-child(12) {
.shard {
36.286% ,50.650% 52.143%);
background-color: #EBE1CB;
}
}
&:nth-child(13) {
.shard {
36.1%, 60.96% 56.143%);
background-color: #DDCFB7;
}
}
&:nth-child(14) {
.shard {
61.714% ,61.050% 86.000%);
background-color: #8A7B63;
}
}
&:nth-child(15) {
.shard {
56.143% ,60.550% 75.143%);
background-color: #EBE1CB;
}
}
&:nth-child(16) {
.shard {
75.000% ,58.950% 85.714%);
background-color: #A89F92;
}
}
&:nth-child(17) {
.shard {
60.5%, 60.73% 63%);
}
}
&:nth-child(18) {
.shard {
23.429% ,73.750% 35.286%);
background-color: #A2785C;
}
}
&:nth-child(19) {
.shard {
35.23%, 66.14% 60.7%);
}
}
&:nth-child(20) {
.shard {
36%, 66.2% 60.429%);
}
}
&:nth-child(21) {
.shard {
22.429% ,73.750% 35.286%);
background-color: #B98D5D;
}
}
&:nth-child(22) {
.shard {
20.000% ,79.550% 28.143%);
background-color: #ECE1D5;
}
}
&:nth-child(23) {
.shard {
34.286% ,75.950% 32.571%);
background-color: #D2C9C1;
}
}
&:nth-child(24) {
.shard {
34.143% ,84.150% 38.429%);
background-color: #B4ABA0;
}
}
&:nth-child(25) {
.shard {
38.000% ,73.750% 35.286%);
background-color: #AFA491;
}
}
&:nth-child(26) {
.shard {
17.714% ,73.050% 22.857%);
}
}
&:nth-child(27) {
.shard {
7.714% ,75.350% 21.714%);
}
}
&:nth-child(28) {
.shard {
7.857%, 68.98% 10.571%);
}
}
&:nth-child(29) {
.shard {
1.714% ,52.950% 2.857%);
}
}
&:nth-child(30) {
.shard {
16.286% ,75.350% 22.714%);
background-color: #C8C0B9;
}
}
}
}
} // END OF ORYX
// ----------
// START OF FROG
#animalchanger.frog {
.stage {
.animal-nav {
.why-endangered {
span, &::after {
color: $frog-bg;
}
}
}
.nav-btn::after {
}
.popout {
color: $frog-bg;
}
.mute span {
}
.animalinfo {
li {
&:nth-child(3) {
.direct-stats {
span {
}
}
}
}
}
}
}
.wallpaper {
span {
}
}
}
.overlay {
h2, p span, a {
color: $frog-bg;
}
}
.chart {
&.show-chart-1 {
.shard {
-webkit-clip-path: polygon(48.5% 48.5%, 66.3% 34%, 56% 56%,
15% 85%, 50% 50%, 50% 50%, 50% 50%, 50% 50%);
}
}
}
.wrap {
.shadow {
left: 19%;
width: 53%;
bottom: 10.5%;
height: 13%;
&::before {
left: 26%;
bottom: 2%;
width: 50%;
height: 85%;
}
&::after {
left: 7%;
bottom: 36%;
height: 25%;
width: 18%;
}
}
.shard-wrap {
&:nth-child(1) {
.shard {
25.92% 36.857%);
background-color: #FEDD47;
}
}
&:nth-child(2) {
.shard {
28.857%, 36.15% 47.714%);
background-color: #F1C838;
}
}
&:nth-child(3) {
.shard {
28.286%, 32.1% 32.143%);
background-color: #FDD24B;
}
}
&:nth-child(4) {
.shard {
28.857%, 31.4% 32.2%);
background-color: #F3E567;
}
}
&:nth-child(5) {
.shard {
47.714% ,27.850% 41.714%);
background-color: #CDAA25;
}
}
&:nth-child(6) {
.shard {
39.99% 29.686%);
background-color: #FFF88B;
}
}
&:nth-child(7) {
.shard {
43.5% 39.4%);
background-color: #FDD24B;
}
}
&:nth-child(8) {
.shard {
36.04% 47.99%);
background-color: #E4BA2D;
}
}
&:nth-child(9) {
.shard {
30.000% ,37.450% 38.000%);
}
}
&:nth-child(10) {
.shard {
33.714%, 37.35% 38.2%);
background-color: #3A393B
}
}
&:nth-child(11) {
.shard {
38.143% ,33.150% 39.714%);
}
}
&:nth-child(12) {
.shard {
34.857% ,33.150% 36.000%);
}
}
&:nth-child(13) {
.shard {
41.857%, 43.35% 39.243%);
background-color: #F0EA75;
}
}
&:nth-child(14) {
.shard {
51.571% ,36.150% 47.857%);
background-color: #FAC932;
}
}
&:nth-child(15) {
.shard {
56.857%, 43.45% 58%);
background-color: #FED63C;
}
}
&:nth-child(16) {
.shard {
41.857% ,52.450% 57.000%);
}
}
&:nth-child(17) {
.shard {
56.7%, 53.25% 70.286%);
background-color: #E6BF2B;
}
}
&:nth-child(18) {
.shard {
70.286% ,43.950% 65.143%);
}
}
&:nth-child(19) {
.shard {
51.429%, 38.45% 55%);
background-color: #FBD942;
}
}
&:nth-child(20) {
.shard {
63.286% ,38.350% 55.000%);
background-color: #F0EA75;
}
}
&:nth-child(21) {
.shard {
73.429% ,41.550% 75.143%);
}
}
&:nth-child(22) {
.shard {
63.143% ,37.850% 73.286%);
background-color: #D8C533;
}
}
&:nth-child(23) {
.shard {
63.143%, 41.75% 75.43%);
background-color: #BDA126;
}
}
&:nth-child(24) {
.shard {
41.857%, 67.25% 63.4%);
background-color: #FEEC63;
}
}
&:nth-child(25) {
.shard {
63.286%, 53.2% 70.3%);
background-color: #F3CD37;
}
}
&:nth-child(26) {
.shard {
68.143% ,61.650% 75.857%);
}
}
&:nth-child(27) {
.shard {
55.25% 81.714%);
background-color: #F9DB35;
}
}
&:nth-child(28) {
.shard {
72.429% ,55.150% 81.714%);
background-color: #FAC62D;
}
}
&:nth-child(29) {
.shard {
84.286% ,57.850% 83.571%);
background-color: #FDDA54;
}
}
&:nth-child(30) {
.shard {
84.429% ,52.650% 84.000%);
}
}
&:nth-child(31) {
.shard {
67.143% ,79.350% 85.714%);
background-color: #3B6F4B;
}
}
&:nth-child(32) {
.shard {
85.714% ,50.350% 87.286%);
background-color: #4E9F73;
}
}
&:nth-child(33) {
.shard {
71.714% ,27.250% 79.000%);
}
}
}
}
} // END OF FROG
// ----------
// START OF SEAHORSE
#animalchanger.seahorse {
background-color: $seahorse-bg;
.stage {
.animal-nav {
.why-endangered {
span, &::after {
color: $seahorse-bg;
}
}
}
.nav-btn::after {
}
.popout {
}
.mute span {
border-color: $seahorse-bg;
}
.animalinfo {
li {
&:nth-child(3) {
.direct-stats {
span {
}
}
}
}
}
}
}
.wallpaper {
span {
}
}
}
.overlay {
h2, p span, a {
}
}
.wrap {
.shadow {
left: 37%;
width: 50%;
bottom: 11.5%;
height: 5%;
&::before {
left: 58%;
bottom: 14%;
width: 50%;
height: 85%;
}
&::after {
left: 25%;
bottom: 36%;
height: 25%;
width: 18%;
}
}
.shard-wrap {
&:nth-child(1) {
.shard {
50.643%, 25.5% 49.357%);
}
}
&:nth-child(2) {
.shard {
36.7%, 25.7% 50.5%);
background-color: #39273D
}
}
&:nth-child(3) {
.shard {
36.929% ,23.900% 44.643%);
}
}
&:nth-child(4) {
.shard {
23.4% 40.214%);
background-color: #3A2D3E;
}
}
&:nth-child(5) {
.shard {
36.99%, 21.3% 35.5%);
}
}
&:nth-child(6) {
.shard {
17.643%, 23% 30.071%);
}
}
&:nth-child(7) {
.shard {
33.95% 27.786%);
}
}
&:nth-child(8) {
.shard {
27.643%, 28.56% 36.95%);
}
}
&:nth-child(9) {
.shard {
14.214%, 33.87% 27.8%);
}
}
&:nth-child(10) {
.shard {
19.929% ,33.900% 27.643%);
background-color: #5D4D63
}
}
&:nth-child(11) {
.shard {
18.500% ,44.700% 24.214%);
}
}
&:nth-child(12) {
.shard {
22.929% ,48.400% 33.357%);
background-color: #4C384D
}
}
&:nth-child(13) {
.shard {
32.214% ,40.100% 41.357%);
}
}
&:nth-child(14) {
.shard {
54.8%, 36.3% 41.357%);
}
}
&:nth-child(15) {
.shard {
31.357%, 51.4% 43.214%);
background-color: #3F2D42
}
}
&:nth-child(16) {
.shard {
42.357% ,44.400% 49.786%);
background-color: #39263A
}
}
&:nth-child(17) {
.shard {
41.214% ,56.200% 54.071%);
}
}
&:nth-child(18) {
.shard {
54.4%, 39.9% 55.2%);
background-color: #604D64
}
}
&:nth-child(19) {
.shard {
53.214% ,49.500% 60.929%);
}
}
&:nth-child(20) {
.shard {
51.929%, 59.7% 59.643%);
}
}
&:nth-child(21) {
.shard {
-webkit-clip-path: polygon(50.6% 59.357%, 60%
58.929%, 56% 65.9%);
background-color: #2A192C
}
}
&:nth-child(22) {
.shard {
57.929% ,63.700% 61.357%);
}
}
&:nth-child(23) {
.shard {
61.1% 72%);
background-color: #1F1619
}
}
&:nth-child(24) {
.shard {
54.357% ,61.100% 72.071%);
}
}
&:nth-child(25) {
.shard {
60.214%, 67.5% 64.643%);
background-color: #13101F
}
}
&:nth-child(26) {
.shard {
53.214% ,67.300% 71.214%);
background-color: #41313B
}
}
&:nth-child(27) {
.shard {
63.357% ,73.900% 56.929%);
}
}
&:nth-child(28) {
.shard {
63.357% ,77.600% 70.500%);
}
}
&:nth-child(29) {
.shard {
65.929% ,77.600% 70.500%);
}
}
&:nth-child(30) {
.shard {
73.5% 67.45%);
background-color: #0D0A15
}
}
z-index: 4;
}
&.peripheral {
z-index: 3;
}
&:nth-child(31) {
.shard {
15.643% ,78.400% 64.071%);
}
}
&:nth-child(32) {
.shard {
64.214% ,78.100% 71.500%);
}
}
&:nth-child(33) {
.shard {
85.643% ,76.900% 85.786%);
}
}
}
}
} // END OF SEAHORSE
// ----------
// START OF CAMEL
#animalchanger.camel {
background-color: $camel-bg;
.stage {
.animal-nav {
.why-endangered {
span, &::after {
color: $camel-bg;
}
}
}
.nav-btn::after {
}
.popout {
color: $camel-bg;
}
.mute span {
border-color: $camel-bg;
}
.animalinfo {
li {
&:nth-child(3) {
.direct-stats {
span {
}
}
}
}
}
}
}
.wallpaper {
span {
}
}
}
.overlay {
h2, p span, a {
color: $camel-bg;
}
}
.chart {
&.show-chart-1 {
.shard {
-webkit-clip-path: polygon(43.6% 41.5%, 57% 40.7%, 79%
59.8%, 50% 92%, 9.5% 63.25%, 50% 50%, 50% 50%, 50% 50%);
}
}
&.show-chart-2 {
.shard {
-webkit-clip-path: polygon(44.6% 41.5%, 56% 40.7%, 96%
50.3%, 71% 87%, 36.5% 73.25%, 19% 50%, 50% 50%, 50% 50%);
}
}
}
.wrap {
.shadow {
left: 18%;
width: 45%;
bottom: 12.5%;
height: 5%;
&::before {
left: 48%;
bottom: 7%;
width: 50%;
height: 85%;
}
&::after {
left: 13%;
bottom: 36%;
height: 25%;
width: 18%;
}
}
.shard-wrap {
&:nth-child(1) {
.shard {
58.143% ,26.750% 85.286%);
}
}
&:nth-child(2) {
.shard {
85.286% ,23.250% 72.571%);
}
}
&:nth-child(3) {
.shard {
41.857% ,28.850% 51.857%);
background-color: #93693C
}
}
&:nth-child(4) {
.shard {
28.000% ,28.850% 52.000%);
background-color: #A97D4E
}
}
&:nth-child(5) {
.shard {
35.857% ,28.850% 51.857%);
background-color: #BF8D56
}
}
&:nth-child(6) {
.shard {
16.143% ,42.850% 21.286%);
background-color: #BC864E
}
}
&:nth-child(7) {
.shard {
21.143% ,48.350% 42.143%);
background-color: #A87647
}
}
&:nth-child(8) {
.shard {
35.857% ,42.950% 51.571%);
}
}
&:nth-child(9) {
.shard {
11.000% ,42.850% 21.143%);
background-color: #BE9E74
}
}
&:nth-child(10) {
.shard {
42.000% ,42.950% 51.429%);
background-color: #6E4829
}
}
&:nth-child(11) {
.shard {
33.000% ,48.250% 42.143%);
background-color: #B27D48
}
}
&:nth-child(12) {
.shard {
16.143% ,61.950% 33.000%);
background-color: #B99566
}
}
&:nth-child(13) {
.shard {
42.000% ,47.250% 66.714%);
}
}
&:nth-child(14) {
.shard {
63.286%, 47.13% 66.857%);
background-color: #311E0F
}
}
&:nth-child(15) {
.shard {
65.000% ,49.050% 85.571%);
}
}
&:nth-child(16) {
.shard {
63.143% ,53.050% 85.429%);
}
}
&:nth-child(17) {
.shard {
55.05% 65.571%);
background-color: #522A10
}
}
&:nth-child(18) {
.shard {
33.000% ,61.350% 53.429%);
}
}
&:nth-child(19) {
.shard {
42.571%, 60.65% 55.4%);
}
}
&:nth-child(20) {
.shard {
24.286%, 71.15% 29.143%);
background-color: #7C5531
}
}
&:nth-child(21) {
.shard {
29.000% ,71.450% 43.143%);
}
}
&:nth-child(22) {
.shard {
42.714% ,63.350% 63.857%);
background-color: #513A2D
}
}
&:nth-child(23) {
.shard {
42.714% ,72.250% 58.429%);
background-color: #61452E
}
}
&:nth-child(24) {
.shard {
48.143% ,71.850% 60.143%);
}
}
&:nth-child(25) {
.shard {
32.143% ,77.250% 51.714%);
background-color: #A66E40
}
}
&:nth-child(26) {
.shard {
17.571% ,76.150% 23.857%);
}
}
&:nth-child(27) {
.shard {
16.571% ,76.150% 24.000%);
}
}
&:nth-child(28) {
.shard {
23.286% ,70.950% 29.286%);
background-color: #D6C6AF
}
}
&:nth-child(29) {
.shard {
23.286% ,81.950% 28.286%);
background-color: #C3B091
}
}
&:nth-child(30) {
.shard {
28.286% ,75.850% 32.857%);
}
}
z-index: 3;
}
&.peripheral {
.shard {
}
}
&:nth-child(31) {
z-index: 2;
.shard {
-webkit-clip-path: polygon(81% 31.5%, 80% 32.5%, 78%
21%);
}
}
&:nth-child(32) {
.shard {
-webkit-clip-path: polygon(76% 75.5%, 77% 90%, 75.5%
90%);
}
}
}
}
} // END OF CAMEL
// ----------
// START OF BUTTERFLY
#animalchanger.butterfly {
background-color: $butterfly-bg;
.stage {
.animal-nav {
.why-endangered {
span, &::after {
color: $butterfly-bg;
}
}
}
.nav-btn::after {
}
.popout {
}
.mute span {
border-color: $butterfly-bg;
}
.animalinfo {
li {
&:nth-child(3) {
.direct-stats {
span {
}
}
}
}
}
}
}
.wallpaper {
span {
}
}
}
.overlay {
h2, p span, a {
}
}
.wrap {
.shadow {
left: 22%;
width: 45%;
bottom: 12.5%;
height: 5%;
&::before {
left: 32%;
bottom: 29%;
width: 20%;
height: 45%;
}
&::after {
left: 25%;
bottom: 36%;
height: 25%;
width: 18%;
}
}
.shard-wrap {
&:nth-child(1) {
.shard {
25.643% ,46.550% 47.929%);
background-color: #3B2D28
}
}
&:nth-child(2) {
.shard {
50.929%, 29.25% 34.3%);
}
}
&:nth-child(3) {
.shard {
36.4% 27.5%);
background-color: #E46E39
}
}
&:nth-child(4) {
.shard {
46.6% 48.2%);
background-color: #FB913C
}
}
&:nth-child(5) {
.shard {
48.214%, 26.85% 50.929%);
}
}
&:nth-child(6) {
.shard {
48.071% ,46.050% 52.643%);
}
}
&:nth-child(7) {
.shard {
52.786% ,32.650% 64.786%);
background-color: #EE8548
}
}
&:nth-child(8) {
.shard {
52.929% ,38.050% 57.643%);
background-color: #EFBA6B
}
}
&:nth-child(9) {
.shard {
61.214% ,35.350% 62.071%);
}
}
&:nth-child(10) {
.shard {
52.929% ,38.450% 70.214%);
background-color: #CA6532
}
}
&:nth-child(11) {
.shard {
44.071% ,43.150% 67.071%);
}
}
&:nth-child(12) {
.shard {
48.643% ,43.250% 66.643%);
}
}
&:nth-child(13) {
.shard {
52.214% ,47.150% 51.643%);
background-color: #DCB050
}
}
&:nth-child(14) {
.shard {
44.786% ,50.150% 44.071%);
}
}
&:nth-child(15) {
.shard {
46.643% ,50.250% 47.786%);
}
}
&:nth-child(16) {
.shard {
28.643% ,49.850% 44.214%);
}
}
&:nth-child(17) {
.shard {
38.214% ,50.750% 45.357%);
}
}
&:nth-child(18) {
.shard {
75.357% ,38.950% 72.643%);
background-color: #E6A15B
}
}
&:nth-child(19) {
.shard {
75.357% ,39.750% 77.071%);
}
}
&:nth-child(20) {
.shard {
57.357% ,39.050% 72.643%);
background-color: #FCCC67
}
}
&:nth-child(21) {
.shard {
69.214% ,51.950% 76.214%);
background-color: #E98247
}
}
&:nth-child(22) {
.shard {
69.071% ,51.650% 65.786%);
background-color: #EEB96B
}
}
&:nth-child(23) {
.shard {
76.214% ,45.050% 74.214%);
background-color: #CA6532
}
}
&:nth-child(24) {
.shard {
70.357% ,51.250% 71.929%);
}
}
&:nth-child(25) {
.shard {
49.929% ,62.750% 72.786%);
}
}
&:nth-child(26) {
.shard {
42.929% ,86.550% 53.929%);
}
}
&:nth-child(27) {
.shard {
45.214% ,69.850% 57.500%);
background-color: #F78F3B
}
}
&:nth-child(28) {
.shard {
57.357% ,62.650% 72.786%);
background-color: #3A352C
}
}
&:nth-child(29) {
.shard {
53.929% ,69.850% 57.500%);
background-color: #E46E39
}
}
&:nth-child(30) {
.shard {
53.929% ,62.650% 72.786%);
}
}
}
}
} // END OF BUTTERFLY
// START OF ARMADILLO
#animalchanger.armadillo {
background-color: $armadillo-bg;
.stage {
.animal-nav {
.why-endangered {
span, &::after {
color: $armadillo-bg;
}
}
}
.nav-btn::after {
}
.popout {
}
.mute span {
border-color: $armadillo-bg;
}
.animalinfo {
li {
&:nth-child(3) {
.direct-stats {
span {
}
}
}
}
}
}
}
.wallpaper {
span {
}
}
}
.overlay {
h2, p span, a {
}
}
.wrap {
.shadow {
left: 29%;
width: 45%;
bottom: 13.5%;
height: 4%;
&::before {
left: -21%;
bottom: 10%;
width: 33%;
height: 65%;
}
&::after {
left: 86%;
bottom: 25%;
height: 55%;
width: 18%;
}
}
.shard-wrap {
&:nth-child(1) {
.shard {
22.75% 68.1%);
}
}
&:nth-child(2) {
.shard {
57.357% ,24.550% 57.786%);
}
}
&:nth-child(3) {
.shard {
57.500% ,22.750% 68.214%);
}
}
&:nth-child(4) {
.shard {
57.643% ,28.050% 72.786%);
}
}
&:nth-child(5) {
.shard {
28.2% 72.8%);
}
}
&:nth-child(6) {
.shard {
74.929%, 19.65% 79.214%);
background-color: #241B02
}
}
&:nth-child(7) {
.shard {
51.071% ,28.050% 72.786%);
}
}
&:nth-child(8) {
.shard {
49.071% ,24.750% 63.071%);
background-color: #BBA376
}
}
&:nth-child(9) {
.shard {
73.214% ,26.750% 84.786%);
background-color: #594C3F
}
}
&:nth-child(10) {
.shard {
69.929% ,46.950% 84.214%);
background-color: #6D635A
}
}
&:nth-child(11) {
.shard {
67.929% ,44.450% 73.357%);
background-color: #E2C87C
}
}
&:nth-child(12) {
.shard {
72.3%, 27.9% 72.929%);
background-color: #AA9873
}
}
&:nth-child(13) {
.shard {
41.643% ,33.450% 72.214%);
background-color: #C4B492
}
}
&:nth-child(14) {
.shard {
70.929% ,33.350% 72.357%);
}
}
&:nth-child(15) {
.shard {
71.071% ,38.550% 70.929%);
}
}
&:nth-child(16) {
.shard {
37.357%, 44.1% 71%);
background-color: #C3B08D
}
}
&:nth-child(17) {
.shard {
67.643% ,44.150% 71.071%);
}
}
&:nth-child(18) {
.shard {
33.786% ,49.250% 65.929%);
}
}
&:nth-child(19) {
.shard {
31.500% ,49.350% 66.357%);
background-color: #AB8D6E
}
}
&:nth-child(20) {
.shard {
31.214%, 49.4% 66.7%);
background-color: #C2A178
}
}
&:nth-child(21) {
.shard {
31.786% ,49.450% 66.643%);
background-color: #D0B383
}
}
&:nth-child(22) {
.shard {
33.929% ,49.450% 66.500%);
background-color: #D8C39B
}
}
&:nth-child(23) {
.shard {
41.071% ,50.950% 62.786%);
background-color: #D6B781
}
}
&:nth-child(24) {
.shard {
41.786% ,80.050% 57.071%);
background-color: #C5A47A
}
}
&:nth-child(25) {
.shard {
57.214% ,54.750% 67.786%);
background-color: #AB8D6E
}
}
&:nth-child(26) {
.shard {
57.214% ,80.250% 67.357%);
}
}
&:nth-child(27) {
.shard {
67.357% ,79.950% 74.500%);
background-color: #7E6B4C
}
}
&:nth-child(28) {
.shard {
74.071% ,72.350% 79.643%);
}
}
&:nth-child(29) {
.shard {
73.071% ,59.350% 83.643%);
}
}
&:nth-child(30) {
.shard {
79.071% ,72.250% 82.643%);
background-color: #C69D5E
}
}
}
}
} // END OF ARMADILLO
// ----------
// START OF PANDA
#animalchanger.panda {
background-color: $panda-bg;
.stage {
.animal-nav {
.why-endangered {
span, &::after {
color: $panda-bg;
}
}
}
.nav-btn::after {
}
.popout {
color: $panda-bg;
}
.mute span {
border-color: $panda-bg;
}
.animalinfo {
li {
&:nth-child(3) {
.direct-stats {
span {
}
}
}
}
}
}
}
.wallpaper {
span {
}
}
}
.overlay {
h2, p span, a {
color: $panda-bg;
}
}
.chart {
&.show-chart-1 {
.shard {
-webkit-clip-path: polygon(25% 7%, 69% 16.5%, 84% 50%, 63%
72%, 38% 71%, 40% 50%, 50% 50%, 50% 50%);
}
}
}
.wrap {
.shadow {
left: 25%;
width: 45%;
bottom: 12.5%;
height: 5%;
&::before {
left: 38%;
bottom: -32%;
width: 50%;
height: 85%;
}
&::after {
left: 16%;
bottom: 32%;
height: 25%;
width: 18%;
}
}
.shard-wrap {
&:nth-child(1) {
.shard {
31.000% ,30.600% 44.000%);
}
}
&:nth-child(2) {
.shard {
31.000% ,41.100% 50.857%);
}
}
&:nth-child(3) {
.shard {
50.714% ,27.900% 85.000%);
}
}
&:nth-child(4) {
.shard {
35.143% ,25.300% 48.429%);
background-color: #C0684A
}
}
&:nth-child(5) {
.shard {
37.429% ,23.100% 39.429%);
background-color: #DAD1BA
}
}
&:nth-child(6) {
.shard {
48.286% ,25.900% 62.143%);
background-color: #EBDECD
}
}
&:nth-child(7) {
.shard {
19.8% 55.286%);
}
}
&:nth-child(8) {
.shard {
35.000% ,36.200% 52.143%);
}
}
&:nth-child(9) {
.shard {
52.143% ,25.800% 62.000%);
background-color: #F9F0E2
}
}
&:nth-child(10) {
.shard {
31.7% 56.429%);
}
}
&:nth-child(11) {
.shard {
59.857% ,23.900% 60.000%);
}
}
&:nth-child(12) {
.shard {
37.000% ,33.600% 47.714%);
background-color:#DAC79D;
}
}
&:nth-child(13) {
.shard {
50.571% ,36.200% 85.429%);
}
}
&:nth-child(14) {
.shard {
41% 50.99%);
}
}
&:nth-child(15) {
.shard {
46.857%, 39% 65.143%);
}
}
&:nth-child(16) {
.shard {
30.143% ,50.800% 47.000%);
}
}
&:nth-child(17) {
.shard {
61.1% 66.143%);
background-color: #3D0F08
}
}
&:nth-child(18) {
.shard {
56.7%, 50.5% 65.714%);
background-color: #190F0D
}
}
&:nth-child(19) {
.shard {
57.143%, 61% 66.4%);
background-color:#190F0D;
}
}
&:nth-child(20) {
.shard {
30.143% ,63.800% 37.000%);
}
}
&:nth-child(21) {
.shard {
37.000% ,60.500% 39.571%);
background-color: #A6462B
}
}
&:nth-child(22) {
.shard {
36.857%, 68.2% 51.8%);
}
}
&:nth-child(23) {
.shard {
51.714% ,61.100% 66.286%);
}
}
&:nth-child(24) {
.shard {
66.286% ,53.100% 87.286%);
}
}
&:nth-child(25) {
.shard {
69.857% ,59.600% 83.714%);
background-color: #0A0A0D
}
}
&:nth-child(26) {
.shard {
51.714% ,71.400% 63.143%);
}
}
&:nth-child(27) {
.shard {
57.286% ,71.300% 63.286%);
}
}
&:nth-child(28) {
.shard {
57.143% ,84.700% 69.857%);
}
}
&:nth-child(29) {
.shard {
69.714% ,78.400% 75.429%);
}
}
&:nth-child(30) {
.shard {
69.857% ,79.300% 81.571%);
}
}
}
}
} // END OF PANDA
// START OF HIROLA
#animalchanger.hirola {
background-color: $hirola-bg;
.stage {
.animal-nav {
.why-endangered {
span, &::after {
color: $hirola-bg;
}
}
}
.nav-btn::after {
}
.popout {
color: $hirola-bg;
}
.mute span {
border-color: $hirola-bg;
}
.animalinfo {
li {
&:nth-child(3) {
.direct-stats {
span {
}
}
}
}
}
}
}
.wallpaper {
span {
}
}
}
.overlay {
h2, p span, a {
color: $hirola-bg;
}
}
.chart {
&.show-chart-1 {
.shard {
55%, 49% 52%, 46% 50%, 50% 50%, 50% 50%);
}
}
&.show-chart-2 {
.shard {
51%, 50% 50%, 50% 50%, 50% 50%, 50% 50%);
}
}
}
.wrap {
.shadow {
left: 32%;
width: 45%;
bottom: 12.5%;
height: 5%;
&::before {
left: 42%;
bottom: 0%;
width: 50%;
height: 62%;
}
&::after {
left: 13%;
bottom: 32%;
height: 25%;
width: 18%;
}
}
.shard-wrap {
&:nth-child(1) {
.shard {
35.571%, 28.95% 39.286%);
background-color: #8F6B4E
}
}
&:nth-child(2) {
.shard {
41%, 23.65% 47.429%);
background-color: #684B2D
}
}
&:nth-child(3) {
.shard {
27.857%, 30.05% 29%);
}
}
&:nth-child(4) {
.shard {
28.929%, 22.8% 35.643%);
background-color: #c6a188
}
}
&:nth-child(5) {
.shard {
28.857%, 27.95% 40.4%);
}
}
&:nth-child(6) {
.shard {
24.857% ,22.650% 26.286%);
background-color: #DEC9BF
}
}
&:nth-child(7) {
.shard {
25.571% ,30.050% 29.286%);
background-color: #A2725D
}
}
&:nth-child(8) {
.shard {
26.286% ,32.750% 31.143%);
background-color: #DEC9BF
}
}
&:nth-child(9) {
.shard {
16.143% ,24.950% 26.429%);
}
}
&:nth-child(10) {
.shard {
19.714% ,28.050% 27.571%);
}
}
&:nth-child(11) {
.shard {
4.429% ,22.250% 17.857%);
}
}
&:nth-child(12) {
.shard {
15.571% ,28.850% 24.429%);
}
}
&:nth-child(13) {
.shard {
4.429% ,33.950% 15.571%);
}
}
&:nth-child(14) {
.shard {
42.571%, 27.85% 40%);
background-color: #A3785C
}
}
&:nth-child(15) {
.shard {
-webkit-clip-path: polygon(27.75% 40%, 37.15%
42.429%, 33.8% 53.4%);
}
}
&:nth-child(16) {
.shard {
38.2%, 37.05% 42.714%);
}
}
&:nth-child(17) {
.shard {
58.714%, 33.75% 53.429%);
}
}
&:nth-child(18) {
.shard {
60.714% ,38.750% 58.714%);
}
}
&:nth-child(19) {
.shard {
38.143% ,47.850% 60.714%);
}
}
&:nth-child(20) {
.shard {
59.571% ,36.650% 76.286%);
background-color: #9E765B
}
}
&:nth-child(21) {
.shard {
85.429% ,36.650% 75.714%);
}
}
&:nth-child(22) {
.shard {
60.571% ,46.350% 85.714%);
background-color: #AC805E
}
}
&:nth-child(23) {
.shard {
38.143%, 61.95% 58.143%);
}
}
&:nth-child(24) {
.shard {
35.714% ,73.650% 47.571%);
}
}
&:nth-child(25) {
.shard {
47.429% ,61.850% 58.286%);
}
}
&:nth-child(26) {
.shard {
52.286% ,73.650% 74.143%);
}
}
&:nth-child(27) {
.shard {
47.429% ,68.350% 59.143%);
background-color: #AF896D
}
}
&:nth-child(28) {
.shard {
59.143% ,68.350% 72.286%);
background-color: #BF9C87
}
}
&:nth-child(30) {
.shard {
72.143% ,62.050% 86.143%);
background-color: #7E5C3F
}
}
&:nth-child(29) {
.shard {
73.857% ,71.350% 85.429%);
}
}
}
}
} // END OF HIROLA
// START OF SIFAKA
#animalchanger.sifaka {
background-color: $sifaka-bg;
.stage {
.animal-nav {
.why-endangered {
span, &::after {
color: $sifaka-bg;
}
}
}
.nav-btn::after {
}
.popout {
color: $sifaka-bg;
}
.mute span {
border-color: $sifaka-bg;
}
.animalinfo {
li {
&:nth-child(3) {
.direct-stats {
span {
}
}
}
}
}
}
}
.wallpaper {
span {
}
}
}
.overlay {
h2, p span, a {
color: $sifaka-bg;
}
}
.chart {
&.show-chart-1 {
.shard {
-webkit-clip-path: polygon(44.5% 45%, 69% 31.5%, 82% 82%,
33% 67%, 50% 50%, 50% 50%, 50% 50%, 50% 50%);
}
}
}
.wrap {
.shadow {
left: 38%;
width: 45%;
bottom: 13.4%;
height: 5%;
&::before {
left: 18%;
bottom: 26%;
width: 50%;
height: 55%;
}
&::after {
left: -52%;
bottom: 27%;
height: 45%;
width: 20%;
}
}
.shard-wrap {
&:nth-child(1) {
.shard {
26.857% ,47.200% 46.429%);
}
}
&:nth-child(2) {
.shard {
27.000% ,39.100% 38.143%);
background-color: #D4D6CE
}
}
&:nth-child(3) {
.shard {
23.000% ,39.100% 38.143%);
background-color: #4D4F5C
}
}
&:nth-child(4) {
.shard {
15.429% ,47.100% 20.857%);
background-color: #E3E1D4
}
}
&:nth-child(5) {
.shard {
19.429% ,41.800% 23.143%);
background-color: #CCD1D0
}
}
&:nth-child(6) {
.shard {
25.000% ,36.900% 32.857%);
background-color: #7E7F8A
}
}
&:nth-child(7) {
.shard {
32.714% ,39.100% 38.286%);
background-color: #3A3C48
}
}
&:nth-child(8) {
.shard {
23.000% ,43.100% 30.286%);
background-color: #2F303A
}
}
&:nth-child(9) {
.shard {
20.857% ,43.000% 30.286%);
background-color: #CCCFCC
}
}
&:nth-child(10) {
.shard {
20.714% ,48.400% 30.857%);
background-color: #B5B6B5
}
}
&:nth-child(11) {
.shard {
12.429% ,47.000% 20.714%);
}
}
&:nth-child(13) {
.shard {
13.714% ,48.400% 30.714%);
background-color: #E3E1D4
}
}
&:nth-child(12) {
.shard {
13.643% ,56.000% 32.357%);
background-color: #B39C71
}
}
&:nth-child(14) {
.shard {
38.786% ,39.700% 52.500%);
background-color: #D0C2A1
}
}
&:nth-child(15) {
.shard {
52.357% ,23.400% 71.929%);
background-color: #A78B73
}
}
&:nth-child(16) {
.shard {
52.214% ,44.900% 57.500%);
}
}
&:nth-child(17) {
.shard {
45.929% ,40.600% 55.500%);
background-color: #DDDAD0
}
}
&:nth-child(18) {
.shard {
67.357% ,18.100% 69.786%);
}
}
&:nth-child(19) {
.shard {
67.214% ,23.600% 72.071%);
background-color: #3C3C3C
}
}
&:nth-child(20) {
.shard {
45.786% ,62.600% 67.357%);
background-color: #B4B4A9
}
}
&:nth-child(21) {
.shard {
43.214% ,61.800% 67.214%);
}
}
&:nth-child(22) {
.shard {
27.071% ,58.400% 46.643%);
background-color: #A7A19C
}
}
&:nth-child(23) {
.shard {
46.357% ,61.900% 67.214%);
}
}
&:nth-child(24) {
.shard {
54.786% ,49.100% 64.500%);
background-color: #A7916F
}
}
&:nth-child(25) {
.shard {
54.643% ,51.000% 74.500%);
background-color: #9E7F51
}
}
&:nth-child(26) {
.shard {
54.500% ,59.500% 69.786%);
}
}
&:nth-child(27) {
.shard {
z-index: 3;
62.214% ,59.500% 69.786%);
background-color: #2E2B30
}
}
&:nth-child(28) {
.shard {
39.929% ,65.800% 56.214%);
background-color: #AE9B75
}
}
&:nth-child(29) {
.shard {
51.500% ,66.200% 57.357%);
}
}
&:nth-child(30) {
.shard {
z-index: 3;
11.643% ,64.500% 18.643%);
}
}
&.peripheral {
.shard {
z-index: 2;
}
}
&:nth-child(31) {
.shard {
63.143% ,65.000% 84.000%);
}
}
&:nth-child(32) {
.shard {
22.714% ,66.400% 63.286%);
}
}
&:nth-child(33) {
.shard {
4.571% ,58.800% 5.286%);
background-color: #5F4E47
}
}
}
}
} // END OF SIFAKA
// START OF RHINO
#animalchanger.rhino {
background-color: $rhino-bg;
.stage {
.animal-nav {
.why-endangered {
span, &::after {
color: $rhino-bg;
}
}
}
.nav-btn::after {
}
.popout {
color: $rhino-bg;
}
.mute span {
border-color: $rhino-bg;
}
.animalinfo {
li {
&:nth-child(3) {
.direct-stats {
span {
}
}
}
}
}
}
}
.wallpaper {
span {
}
}
}
.overlay {
h2, p span, a {
color: $rhino-bg;
}
}
.chart {
&.show-chart-1 {
.shard {
97% 69.5%, 63.5% 82.5%, 40% 73%, 32% 57.5%, 43% 47.5%);
}
}
&.show-chart-2 {
.shard {
55.5% 59.5%, 24.5% 93.5%, 11% 50%, 50% 50%, 50% 50%);
}
}
}
.wrap {
.shadow {
left: 28%;
width: 45%;
bottom: 13.5%;
height: 5%;
&::before {
left: 86%;
bottom: 10%;
width: 40%;
height: 65%;
}
&::after {
left: -9%;
bottom: 36%;
height: 25%;
width: 18%;
}
}
.shard-wrap {
&:nth-child(1) {
.shard {
56.929% ,20.000% 74.500%);
}
}
&:nth-child(2) {
.shard {
52.071% ,20.000% 74.500%);
}
}
&:nth-child(3) {
.shard {
56.786% ,16.400% 63.643%);
}
}
&:nth-child(4) {
.shard {
61.214% ,16.400% 63.500%);
}
}
&:nth-child(5) {
.shard {
36.786% ,30.700% 41.786%);
background-color: #B4A696
}
}
&:nth-child(6) {
.shard {
41.786% ,36.300% 52.071%);
}
}
&:nth-child(7) {
.shard {
53.071% ,26.700% 58.214%);
background-color: #ACA191
}
}
&:nth-child(8) {
.shard {
33.929% ,20.500% 37.357%);
}
}
&:nth-child(9) {
.shard {
51.929% ,40.600% 59.357%);
}
}
&:nth-child(10) {
.shard {
60.071% ,24.400% 79.786%);
}
}
&:nth-child(11) {
.shard {
68.071% ,29.700% 82.071%);
}
}
&:nth-child(12) {
.shard {
20.643% ,49.500% 21.786%);
}
}
&:nth-child(13) {
.shard {
21.643% ,44.400% 48.071%);
}
}
&:nth-child(14) {
.shard {
47.786% ,40.400% 59.500%);
}
}
&:nth-child(15) {
.shard {
36.786% ,29.000% 43.643%);
}
}
&:nth-child(16) {
.shard {
21.500% ,72.000% 45.357%);
}
}
&:nth-child(17) {
.shard {
44.929% ,49.800% 60.500%);
}
}
&:nth-child(18) {
.shard {
47.786% ,50.000% 60.357%);
}
}
&:nth-child(19) {
.shard {
60.214% ,49.500% 85.357%);
}
}
&:nth-child(20) {
.shard {
85.357% ,41.900% 85.214%);
}
}
&:nth-child(21) {
.shard {
17.214% ,71.800% 45.500%);
}
}
&:nth-child(22) {
.shard {
44.9%, 71.5% 65.7%);
}
}
&:nth-child(23) {
.shard {
65.4%, 59.2% 67.071%);
}
}
&:nth-child(24) {
.shard {
17.214%, 85% 31.214%);
}
}
&:nth-child(25) {
.shard {
31.071%, 77.7% 54.929%);
}
}
&:nth-child(26) {
.shard {
31.214% ,79.600% 58.071%);
}
}
&:nth-child(27) {
.shard {
45.071% ,79.600% 57.929%);
}
}
&:nth-child(28) {
.shard {
57.786% ,72.700% 79.214%);
}
}
&:nth-child(29) {
.shard {
64.929% ,79.700% 84.214%);
}
}
&:nth-child(30) {
.shard {
31.214% ,89.300% 51.786%);
}
}
&.peripheral {
.shard {
}
}
&:nth-child(31) {
.shard {
66%);
}
}
&:nth-child(32) {
.shard {
64%);
}
}
&:nth-child(33) {
.shard {
-webkit-clip-path: polygon(26% 75.5%, 27% 90%, 25.5%
90.5%);
}
}
}
}
} // END OF RHINO
// START OF TAMARIN
#animalchanger.tamarin {
.stage {
.animal-nav {
.why-endangered {
span, &::after {
color: $tamarin-bg;
}
}
}
.nav-btn::after {
}
.popout {
color: $tamarin-bg;
}
.mute span {
}
.animalinfo {
li {
&:nth-child(3) {
.direct-stats {
span {
}
}
}
}
}
}
}
.wallpaper {
span {
}
}
}
.overlay {
h2, p span, a {
color: $tamarin-bg;
}
}
.chart {
&.show-chart-1 {
.shard {
-webkit-clip-path: polygon(47.5% 43%, 51.5% 47%, 62% 45%,
72% 59.5%, 61.5% 77%, 35.5% 85%, 9% 67.5%, 4% 31%);
}
}
&.show-chart-2 {
.shard {
-webkit-clip-path: polygon(48% 46.7%, 55% 42%, 70% 50.5%,
62% 70%, 29% 87%, 0.5% 50%, 50% 50%, 50% 50%);
}
}
}
.wrap {
.shadow {
left: 20%;
width: 55%;
bottom: 12.7%;
height: 5%;
&::before {
left: 58%;
bottom: 9%;
width: 50%;
height: 85%;
}
&::after {
left: 10%;
bottom: 30%;
height: 45%;
width: 18%;
}
}
.shard-wrap {
&:nth-child(1) {
.shard {
15.214% ,28.050% 25.929%);
}
}
&:nth-child(2) {
.shard {
24.786%, 32.05% 39.67%);
background-color: #4A1F18
}
}
&:nth-child(3) {
.shard {
25.929% ,30.850% 18.214%);
}
}
&:nth-child(4) {
.shard {
12.786% ,30.750% 18.214%);
background-color: #E2872D
}
}
&:nth-child(5) {
.shard {
31.85% 39.5%);
}
}
&:nth-child(6) {
.shard {
12.8%, 33.95% 25.4%);
background-color: #9D3E16
}
}
&:nth-child(7) {
.shard {
18.1%, 27.75% 25.786%);
}
}
&:nth-child(8) {
.shard {
18.214% ,30.150% 24.214%);
background-color: #A3795E
}
}
&:nth-child(9) {
.shard {
24.1%, 30.8% 29.929%);
}
}
&:nth-child(10) {
.shard {
30.05% 24.214%);
}
}
&:nth-child(11) {
.shard {
25.357%, 30.7% 30.071%);
}
}
&:nth-child(12) {
.shard {
18.786% ,34.050% 25.357%);
}
}
&:nth-child(13) {
.shard {
12.929% ,42.250% 29.357%);
}
}
&:nth-child(14) {
.shard {
23.4%, 37.23% 45.35%);
}
}
&:nth-child(15) {
.shard {
39.357% ,32.050% 52.214%);
background-color: #3B201A
}
}
&:nth-child(16) {
.shard {
23.357%, 41.8% 29.1%);
}
}
&:nth-child(17) {
.shard {
61.1%, 31.95% 51.929%);
}
}
&:nth-child(18) {
.shard {
33.071%, 37.1% 45.4%);
}
}
&:nth-child(19) {
.shard {
52.55% 52.643%);
background-color: #9C3F10
}
}
&:nth-child(20) {
.shard {
52.357% ,51.750% 61.071%);
}
}
&:nth-child(21) {
.shard {
58.1%, 34.15% 63.071%);
}
}
&:nth-child(22) {
.shard {
60.929%, 40.35% 63.5%);
background-color: #B45D1C
}
}
&:nth-child(23) {
.shard {
26.929% ,52.550% 33.214%);
background-color: #F5BD4D
}
}
&:nth-child(24) {
.shard {
27.357% ,70.350% 37.214%);
background-color: #EBAD41
}
}
&:nth-child(25) {
.shard {
36.786% ,52.550% 52.643%);
background-color: #DC9022
}
}
&:nth-child(26) {
.shard {
36.786% ,69.550% 51.500%);
background-color: #D87B1F
}
}
&:nth-child(27) {
.shard {
51.55% 61.071%);
background-color: #C7691E
}
}
&:nth-child(28) {
.shard {
51.4%, 64.25% 62.5%);
background-color: #AC551A
}
}
&:nth-child(29) {
.shard {
62.500% ,64.550% 84.643%);
background-color: #D4932F
}
}
&:nth-child(30) {
.shard {
82.643% ,64.550% 84.643%);
background-color: #BE731B
}
}
&:nth-child(31) {
.shard {
58%, 43.1% 84.8%);
background-color: #6A463F;
}
}
&:nth-child(32) {
.shard {
61.214%, 43% 85%);
background-color: #5E382D
}
}
&:nth-child(33) {
.shard {
60.214% ,52.750% 84.786%);
}
}
}
}
} // END OF TAMARIN
// START OF TURTLE
#animalchanger.turtle {
.stage {
.animal-nav {
.why-endangered {
span, &::after {
color: $turtle-bg;
}
}
}
.nav-btn::after {
}
.popout {
color: $turtle-bg;
}
.mute span {
}
.animalinfo {
li {
&:nth-child(3) {
.direct-stats {
span {
}
}
}
}
}
}
}
.wallpaper {
span {
}
}
}
.overlay {
h2, p span, a {
color: $turtle-bg;
}
}
.chart {
&.show-chart-1 {
.shard {
-webkit-clip-path: polygon(49.5% 49%, 51.5% 47%, 58% 47%,
55% 52%, 56.5% 65%, 34% 89%, 9% 67.5%, 4.5% 31.5%);
}
}
}
.wrap {
.shadow {
left: 19%;
width: 55%;
bottom: 12.5%;
height: 5%;
&::before {
width: 0%;
}
&::after {
left: 87%;
bottom: 26%;
height: 55%;
width: 26%;
}
}
.shard-wrap {
&:nth-child(1) {
.shard {
51.286% ,32.550% 58.714%);
background-color: #BDC2A3
}
}
&:nth-child(2) {
.shard {
58.714% ,22.950% 70.571%);
}
}
&:nth-child(3) {
.shard {
56.286% ,22.950% 70.429%);
}
}
&:nth-child(4) {
.shard {
52.143% ,30.850% 51.857%);
}
}
&:nth-child(5) {
.shard {
51.857% ,25.450% 59.143%);
background-color: #B7C8C0;
}
}
&:nth-child(6) {
.shard {
45.1%, 31.05% 52%);
}
}
&:nth-child(7) {
.shard {
35.571% ,30.850% 52.000%);
background-color: #4F7F86
}
}
&:nth-child(8) {
.shard {
60.95%, 32.35% 58.571%);
background-color: #AEAF95
}
}
&:nth-child(9) {
.shard {
53.571% ,40.550% 60.714%);
background-color: #A2A390
}
}
&:nth-child(10) {
.shard {
51.286%, 58.4% 58.429%);
background-color: #AEB49D
}
}
&:nth-child(11) {
.shard {
46.571% ,57.850% 58.571%);
background-color: #9FAB9E
}
}
&:nth-child(12) {
.shard {
35.571% ,43.550% 54.429%);
}
}
&:nth-child(13) {
.shard {
35.5%, 55.3% 47.714%);
background-color: #4C838B
}
}
&:nth-child(14) {
.shard {
36.714%, 55.15% 47.857%);
}
}
&:nth-child(15) {
.shard {
36.714%, 66.05% 50.714%);
}
}
&:nth-child(16) {
.shard {
50.571% ,57.750% 58.571%);
background-color: #BEBEAA
}
}
&:nth-child(17) {
.shard {
50.571% ,66.850% 55.714%);
background-color: #A9AB96
}
}
&:nth-child(18) {
.shard {
-webkit-clip-path: polygon(66% 50.6%, 64.45% 45%,
75.75% 46.429%);
}
}
&:nth-child(19) {
.shard {
43.714%, 75.65% 46.571%);
}
}
&:nth-child(20) {
.shard {
46.429%, 75.6% 53.99%);
}
}
&:nth-child(21) {
.shard {
55.286% ,66.750% 55.714%);
background-color: #CFCAB7
}
}
&:nth-child(22) {
.shard {
41.429% ,67.050% 41.714%);
background-color: #C2D5D9
}
}
&:nth-child(23) {
.shard {
21.714% ,67.050% 41.714%);
background-color: #ADC4BA
}
}
&:nth-child(24) {
.shard {
19.429% ,65.950% 21.857%);
}
}
&:nth-child(25) {
.shard {
10.000% ,65.950% 22.000%);
}
}
&:nth-child(26) {
.shard {
49.857% ,75.650% 46.714%);
background-color: #80A59F
}
}
&:nth-child(27) {
.shard {
49.857% ,75.450% 54.000%);
background-color: #4F5B5B
}
}
&:nth-child(28) {
.shard {
49.857% ,80.750% 54.429%);
background-color: #5A696A
}
}
&:nth-child(29) {
.shard {
49.857% ,82.050% 56.000%);
}
}
&:nth-child(30) {
.shard {
48.429% ,79.550% 51.429%);
}
}
&.peripheral {
.shard {
&::before {
@include animation(bubbles 1s infinite
forwards);
}
}
}
.shard {
20%);
}
}
&:nth-child(32) {
.shard {
9.7%);
&::before {
}
}
}
&:nth-child(33) {
.shard {
34.5%);
&::before {
}
}
}
}
}
} // END OF TURTLE
// START OF OKAPI
#animalchanger.okapi {
background-color: $okapi-bg;
.stage {
.animal-nav {
.why-endangered {
span, &::after {
color: $okapi-bg;
}
}
}
.nav-btn::after {
}
.popout {
color: $okapi-bg;
}
.mute span {
border-color: $okapi-bg;
}
.animalinfo {
li {
&:nth-child(3) {
.direct-stats {
span {
}
}
}
}
}
}
}
.wallpaper {
span {
}
}
}
.overlay {
h2, p span, a {
color: $okapi-bg;
}
}
.wrap {
.shadow {
left: 21%;
width: 45%;
bottom: 13.5%;
height: 5%;
&::before {
left: 58%;
bottom: 7%;
width: 50%;
height: 85%;
}
&::after {
left: 7%;
bottom: 21%;
height: 25%;
width: 18%;
}
}
.shard-wrap {
&:nth-child(1) {
.shard {
37.714% ,33.500% 54.286%);
background-color: #C5C2BF
}
}
&:nth-child(2) {
.shard {
61.571% ,27.800% 85.000%);
background-color: #F5F7ED
}
}
&:nth-child(3) {
.shard {
30.5% 44.5%);
}
}
&:nth-child(4) {
.shard {
28.857%, 43.3% 38%);
}
}
&:nth-child(5) {
.shard {
37.714% ,33.300% 54.857%);
}
}
&:nth-child(6) {
.shard {
37.857% ,38.100% 60.143%);
}
}
&:nth-child(7) {
.shard {
59.857% ,33.400% 75.429%);
background-color: #CDCAC3
}
}
&:nth-child(8) {
.shard {
68.000% ,37.200% 84.143%);
background-color: #F8F8F8
}
}
&:nth-child(9) {
.shard {
43% 38%);
}
}
&:nth-child(10) {
.shard {
38.6% 57.286%);
}
}
&:nth-child(11) {
.shard {
24.429% ,55.500% 46.000%);
}
}
&:nth-child(12) {
.shard {
45.857% ,56.000% 56.000%);
}
}
&:nth-child(13) {
.shard {
24.429% ,63.400% 35.000%);
}
}
&:nth-child(14) {
.shard {
34.857% ,59.300% 59.714%);
background-color: #1E1E26
}
}
&:nth-child(15) {
.shard {
59.571% ,55.900% 58.000%);
}
}
&:nth-child(16) {
.shard {
56.143% ,53.200% 69.571%);
}
}
&:nth-child(17) {
.shard {
81.714% ,51.400% 81.857%);
}
}
&:nth-child(18) {
.shard {
59.286% ,58.700% 83.714%);
}
}
&:nth-child(19) {
.shard {
18.143% ,68.800% 24.714%);
}
}
&:nth-child(20) {
.shard {
24.714% ,63.400% 35.143%);
}
}
&:nth-child(21) {
.shard {
27.000% ,61.800% 44.429%);
background-color: #0A0C0C
}
}
&:nth-child(22) {
.shard {
18.143% ,74.100% 32.000%);
}
}
&:nth-child(23) {
.shard {
14.000% ,74.100% 31.857%);
background-color: #D6D2D4
}
}
&:nth-child(24) {
.shard {
11.000% ,76.600% 17.429%);
}
}
&:nth-child(25) {
.shard {
14.000% ,76.700% 20.000%);
}
}
&:nth-child(26) {
.shard {
20.000% ,77.100% 27.857%);
}
}
&:nth-child(27) {
.shard {
71.6% 23%);
}
}
&:nth-child(28) {
.shard {
28.000% ,74.100% 32.143%);
background-color: #E3E3E3
}
}
&:nth-child(29) {
.shard {
27.857% ,77.300% 32.000%);
}
}
&:nth-child(30) {
.shard {
10.429% ,71.900% 15.000%);
}
}
}
}
} // END OF OKAPI
// START OF LYNX
#animalchanger.lynx {
background-color: $lynx-bg;
.stage {
.animal-nav {
.why-endangered {
span, &::after {
color: $lynx-bg;
}
}
}
.nav-btn::after {
}
.popout {
color: $lynx-bg;
}
.mute span {
border-color: $lynx-bg;
}
.animalinfo {
li {
&:nth-child(3) {
.direct-stats {
span {
}
}
}
}
}
}
}
.wallpaper {
span {
}
}
}
.overlay {
h2, p span, a {
color: $lynx-bg;
}
}
.chart {
&.show-chart-1 {
.shard {
-webkit-clip-path: polygon(32.5% 9%, 69% 4.5%, 84% 36%, 77%
61.5%, 54.5% 61.5%, 47% 58%, 44% 52.5%, 46% 48.5%);
}
}
}
.wrap {
.shadow {
left: 32%;
width: 45%;
bottom: 14%;
height: 5%;
&::before {
left: 33%;
bottom: 6%;
width: 50%;
height: 85%;
}
&::after {
left: 15%;
bottom: -3%;
height: 31%;
width: 28%;
}
}
.shard-wrap {
&:nth-child(1) {
.shard {
57.3%, 28.6% 54.357%);
background-color: #ADA391
}
}
&:nth-child(2) {
.shard {
40.357% ,38.300% 57.214%);
}
}
&:nth-child(3) {
.shard {
40.643% ,29.400% 35.071%);
background-color: #A18F73
}
}
&:nth-child(4) {
.shard {
42.214% ,48.800% 40.786%);
background-color: #AD9E86
}
}
&:nth-child(5) {
.shard {
32.786% ,30.100% 43.071%);
}
}
&:nth-child(6) {
.shard {
25.214% ,30.000% 43.071%);
}
}
&:nth-child(7) {
.shard {
15.643% ,32.900% 34.643%);
background-color: #A3978B
}
}
&:nth-child(8) {
.shard {
25.214%, 32.7% 34.786%);
}
}
&:nth-child(9) {
.shard {
13.643% ,31.200% 17.929%);
background-color:#776356
}
}
&:nth-child(10) {
.shard {
17.929% ,25.900% 14.357%);
}
}
&:nth-child(11) {
.shard {
9.786% ,39.600% 14.500%);
}
}
&:nth-child(12) {
.shard {
14.214% ,38.600% 23.500%);
}
}
&:nth-child(13) {
.shard {
25.357% ,35.600% 43.071%);
}
}
&:nth-child(14) {
.shard {
27.071% ,35.600% 42.929%);
}
}
&:nth-child(15) {
.shard {
24.786% ,37.300% 33.500%);
background-color: #BAAFA1
}
}
&:nth-child(16) {
.shard {
33.500% ,32.700% 37.643%);
background-color: #E4DCD8
}
}
&:nth-child(17) {
.shard {
32.214% ,32.800% 35.214%);
background-color: #7C5D65
}
}
&:nth-child(18) {
.shard {
56.357% ,33.800% 84.357%);
}
}
&:nth-child(19) {
.shard {
85.357% ,29.300% 85.357%);
}
}
&:nth-child(20) {
.shard {
85.643% ,39.700% 85.643%);
background-color: #AD9E8C
}
}
&:nth-child(21) {
.shard {
40.500% ,46.600% 62.357%);
background-color: #887D6E
}
}
&:nth-child(22) {
.shard {
41.929% ,60.000% 62.357%);
}
}
&:nth-child(23) {
.shard {
61.786%, 46.6% 62.214%);
}
}
&:nth-child(24) {
.shard {
59.6% 78.643%);
}
}
&:nth-child(25) {
.shard {
70.357%, 59.9% 62.5%);
}
}
&:nth-child(26) {
.shard {
69.643% ,77.600% 84.214%);
background-color: #AD9E8C
}
}
&:nth-child(27) {
.shard {
84.414% ,60.300% 83.786%);
}
}
&:nth-child(28) {
.shard {
85.643% ,55.600% 85.643%);
}
}
&:nth-child(29) {
.shard {
76.214% ,77.600% 83.214%);
background-color: #8F7E6A
}
}
&:nth-child(30) {
.shard {
69.929% ,84.300% 76.357%);
}
}
}
}
} // END OF LYNX
// START OF BEAR
#animalchanger.bear {
background-color: $bear-bg;
.stage {
.animal-nav {
.why-endangered {
span, &::after {
color: $bear-bg;
}
}
}
.nav-btn::after {
}
.popout {
color: $bear-bg;
}
.mute span {
border-color: $bear-bg;
}
.animalinfo {
li {
&:nth-child(3) {
.direct-stats {
span {
}
}
}
}
}
}
}
.wallpaper {
span {
}
}
}
.overlay {
h2, p span, a {
color: $bear-bg;
}
}
.wrap {
.shadow {
left: 30.3%;
width: 35%;
bottom: 12.6%;
height: 5%;
&::before {
left: 57%;
bottom: -7%;
width: 50%;
height: 49%;
}
&::after {
left: 25%;
bottom: 37%;
height: 25%;
width: 31%;
}
}
.shard-wrap {
&:nth-child(1) {
.shard {
10.2%, 31.7% 19.5%);
background-color: #BAA284
}
}
&:nth-child(2) {
.shard {
17.5%, 31.45% 19.357%);
}
}
&:nth-child(3) {
.shard {
3.357% ,38.950% 12.071%);
}
}
&:nth-child(4) {
.shard {
11.929%, 34.05% 17.643%);
}
}
&:nth-child(5) {
.shard {
11.786% ,41.150% 17.643%);
}
}
&:nth-child(6) {
.shard {
2.357% ,38.850% 12.214%);
}
}
&:nth-child(7) {
.shard {
2.929%, 50.65% 13.5%);
}
}
&:nth-child(8) {
.shard {
13.357%, 41.05% 17.643%);
background-color: #342A1F
}
}
&:nth-child(9) {
.shard {
8.786% ,49.650% 13.500%);
}
}
&:nth-child(10) {
.shard {
13.357% ,53.350% 42.357%);
}
}
&:nth-child(11) {
.shard {
8.214% ,59.350% 18.214%);
}
}
&:nth-child(12) {
.shard {
42.214%, 45.05% 46.643%);
}
}
&:nth-child(13) {
.shard {
21.357% ,45.750% 28.643%);
}
}
&:nth-child(14) {
.shard {
18.500% ,45.650% 28.500%);
background-color: #CB9A57
}
}
&:nth-child(15) {
.shard {
18.03%, 61.45% 27.99%);
}
}
&:nth-child(16) {
.shard {
48.4%, 52.35% 62.9%);
}
}
&:nth-child(17) {
.shard {
27.500% ,60.550% 42.357%);
}
}
&:nth-child(18) {
.shard {
41.214%, 38.45% 45.214%);
}
}
&:nth-child(19) {
.shard {
37.357%, 37.55% 53.214%);
}
}
&:nth-child(20) {
.shard {
40.786% ,52.550% 62.786%);
}
}
&:nth-child(21) {
.shard {
41.786% ,53.150% 41.929%);
background-color: #483A2E
}
}
&:nth-child(22) {
.shard {
62.643%, 42.68% 61.2%);
}
}
&:nth-child(23) {
.shard {
41.643% ,60.350% 41.643%);
}
}
&:nth-child(24) {
.shard {
62.500% ,45.450% 74.071%);
}
}
&:nth-child(25) {
.shard {
84.786% ,42.750% 84.786%);
}
}
&:nth-child(26) {
.shard {
62.071% ,53.950% 66.500%);
}
}
&:nth-child(27) {
.shard {
48.214% ,60.650% 68.929%);
background-color: #4C3E32
}
}
&:nth-child(28) {
.shard {
68.786% ,58.550% 79.929%);
}
}
&:nth-child(29) {
.shard {
86.500% ,56.650% 86.500%);
background-color: #3A322E
}
}
&:nth-child(30) {
.shard {
14.071% ,29.550% 16.786%);
}
}
.shard {
17.071%, 30.8% 12.786%);
background-color: #F1A9E2
}
}
}
}
} // END OF BEAR
// START OF ECHIDNA
#animalchanger.echidna {
background-color: $echidna-bg;
.stage {
.animal-nav {
.why-endangered {
span, &::after {
color: $echidna-bg;
}
}
}
.nav-btn::after {
}
.popout {
color: $echidna-bg;
}
.mute span {
border-color: $echidna-bg;
}
.animalinfo {
li {
&:nth-child(3) {
.direct-stats {
span {
}
}
}
}
}
}
}
.wallpaper {
span {
}
}
}
.overlay {
h2, p span, a {
color: $echidna-bg;
}
}
.wrap {
.shadow {
left: 25%;
width: 45%;
bottom: 12.5%;
height: 6%;
&::before {
left: 66%;
bottom: 27%;
width: 45%;
height: 60%;
}
&::after {
left: 1%;
bottom: 22%;
height: 25%;
width: 18%;
}
}
.shard-wrap {
&:nth-child(1) {
.shard {
61.143% ,23.900% 63.429%);
}
}
&:nth-child(2) {
.shard {
68.143% ,15.700% 77.429%);
}
}
&:nth-child(3) {
.shard {
46.857% ,23.800% 63.571%);
}
}
&:nth-child(4) {
.shard {
33.5% 55.6%);
}
}
&:nth-child(5) {
.shard {
55.429% ,32.300% 64.286%);
}
}
&:nth-child(6) {
.shard {
63.714% ,19.900% 69.286%);
}
}
&:nth-child(7) {
.shard {
57.429% ,27.200% 58.571%);
}
}
&:nth-child(8) {
.shard {
53.857%, 33.3% 55.429%);
}
}
&:nth-child(9) {
.shard {
53.75%, 32.1% 64.143%);
background-color: #331F1F
}
}
&:nth-child(10) {
.shard {
41.857% ,40.700% 53.857%);
}
}
&:nth-child(11) {
.shard {
69.05%, 42.1% 68.286%);
}
}
&:nth-child(12) {
.shard {
69.286%, 31.8% 64.4%);
}
}
&:nth-child(13) {
.shard {
53.571% ,34.100% 57.000%);
background-color: #CBC0B6
}
}
&:nth-child(14) {
.shard {
72.000% ,29.400% 84.143%);
}
}
&:nth-child(15) {
.shard {
69.286% ,26.000% 77.429%);
}
}
&:nth-child(16) {
.shard {
55.9% 48.857%);
background-color: #543C3E
}
}
&:nth-child(17) {
.shard {
43.571%, 54.2% 34.1%);
}
}
&:nth-child(18) {
.shard {
48.571% ,54.600% 61.143%);
}
}
&:nth-child(19) {
.shard {
45.1% 69.286%);
}
}
&:nth-child(20) {
.shard {
62.2% 71.1%);
}
}
&:nth-child(21) {
.shard {
34.143% ,70.100% 42.714%);
background-color: #442E2E
}
}
&:nth-child(22) {
.shard {
57.93%, 54.5% 61.286%);
}
}
&:nth-child(23) {
.shard {
42.857%, 67.95% 57.99%);
}
}
&:nth-child(24) {
.shard {
57.857%, 65.1% 75.3%);
}
}
&:nth-child(25) {
.shard {
67.571% ,47.000% 67.571%);
background-color: #CABFB5
}
}
&:nth-child(26) {
.shard {
65.857% ,61.200% 68.143%);
background-color: #CBC0B6
}
}
&:nth-child(27) {
.shard {
62.286% ,67.900% 57.714%);
}
}
&:nth-child(28) {
.shard {
62.186%, 64.9% 75.3%);
}
}
&:nth-child(29) {
.shard {
62.286%, 66.6% 84.143%);
}
}
&:nth-child(30) {
.shard {
84.000% ,62.600% 84.000%);
background-color: #422A2D
}
}
}
}
} // END OF ECHIDNA
// --------------
// START OF LORIS
#animalchanger.loris {
background-color: $loris-bg;
.stage {
.animal-nav {
.why-endangered {
span, &::after {
color: $loris-bg;
}
}
}
.nav-btn::after {
}
.popout {
color: $loris-bg;
}
.mute span {
border-color: $loris-bg;
}
.animalinfo {
li {
&:nth-child(3) {
.direct-stats {
span {
}
}
}
}
}
}
}
.wallpaper {
span {
}
}
}
.overlay {
h2, p span, a {
color: $loris-bg;
}
}
.wrap {
.shadow {
left: 34%;
width: 60%;
bottom: 14.2%;
&::before {
left: 44%;
bottom: 26%;
width: 37%;
height: 55%;
}
&::after {
left: 40%;
bottom: 20%;
height: 60%;
width:30%;
}
}
.shard-wrap {
&:nth-child(1) {
.shard {
37.929% ,26.150% 53.500%);
background-color: #DDD9D8
}
}
&:nth-child(2) {
.shard {
24.357% ,37.550% 38.071%);
background-color: #D2CCC6
}
}
&:nth-child(3) {
.shard {
37.929% ,41.250% 62.357%);
background-color: #D3CCC6
}
}
&:nth-child(4) {
.shard {
59.214% ,34.650% 65.786%);
}
}
&:nth-child(5) {
.shard {
62.214% ,33.750% 69.643%);
background-color: #A9A19C
}
}
&:nth-child(6) {
.shard {
62.214% ,40.150% 72.214%);
background-color: #BEB6B9
}
}
&:nth-child(7) {
.shard {
24.643% ,48.350% 33.071%);
background-color: #DAD2CD
}
}
&:nth-child(8) {
.shard {
32.786% ,39.750% 54.071%);
background-color: #CEC2B8
}
}
&:nth-child(9) {
.shard {
18.214% ,48.250% 32.929%);
background-color: #DDD9D8
}
}
&:nth-child(10) {
.shard {
49.929% ,40.650% 47.929%);
background-color: #BEB6B9
}
}
&:nth-child(11) {
.shard {
49.643% ,53.850% 71.214%);
background-color: #A69C9D
}
}
&:nth-child(12) {
.shard {
18.214% ,53.150% 28.500%);
}
}
&:nth-child(13) {
.shard {
28.214% ,54.450% 32.929%);
}
}
&:nth-child(14) {
.shard {
32.500% ,51.650% 49.929%);
}
}
&:nth-child(15) {
.shard {
38.643% ,51.650% 49.929%);
}
}
&:nth-child(16) {
.shard {
13.643% ,53.250% 29.643%);
background-color: #8F6D5D
}
}
&:nth-child(17) {
.shard {
18.500% ,66.950% 29.786%);
background-color: #8F6D5D
}
}
&:nth-child(18) {
.shard {
13.643% ,60.050% 38.786%);
}
}
&:nth-child(19) {
.shard {
31.500% ,60.050% 38.929%);
background-color: #DDD2CC
}
}
&:nth-child(20) {
.shard {
30.357% ,57.650% 35.214%);
}
}
&:nth-child(21) {
.shard {
17.643% ,60.150% 32.357%);
background-color: #3D383F
}
}
&:nth-child(22) {
.shard {
30.214% ,62.650% 35.071%);
}
}
&:nth-child(23) {
.shard {
17.643% ,66.450% 30.357%);
background-color: #3D383F
}
}
&:nth-child(24) {
.shard {
32.214% ,61.450% 35.786%);
}
}
&:nth-child(25) {
.shard {
35.786% ,60.050% 37.929%);
}
}
&:nth-child(26) {
.shard {
20.071% ,51.550% 22.071%);
}
}
&:nth-child(27) {
.shard {
18.500% ,68.250% 23.071%);
}
}
&:nth-child(28) {
.shard {
32.357% ,65.550% 51.929%);
background-color: #C6B2AB
}
}
&:nth-child(29) {
.shard {
51.786% ,60.650% 56.071%);
}
}
&:nth-child(30) {
.shard {
51.643% ,66.250% 70.500%);
}
}
&:nth-child(31) {
.shard {
68.786% ,24.850% 65.929%);
}
}
&:nth-child(32) {
.shard {
68.786% ,69.850% 71.643%);
background-color: #4D2E21
}
}
&:nth-child(33) {
.shard {
83.214% ,71.950% 83.214%);
}
}
}
}
} // END OF LORIS
// ----------
// START OF DAMSELFLY
#animalchanger.damselfly {
background-color: $damselfly-bg;
.stage {
.animal-nav {
.why-endangered {
span, &::after {
color: $damselfly-bg;
}
}
}
.nav-btn::after {
}
.popout {
}
.mute span {
border-color: $damselfly-bg;
}
.animalinfo {
li {
&:nth-child(3) {
.direct-stats {
span {
}
}
}
}
}
}
}
.wallpaper {
span {
}
}
}
.overlay {
h2, p span, a {
}
}
.wrap {
.shadow {
left: 20%;
width: 55%;
bottom: 12.5%;
height: 3%;
&::before {
width: 0%;
}
&::after {
width: 0%;
}
}
.shard-wrap {
&:nth-child(1) {
.shard {
54.143% ,19.100% 60.000%);
}
}
&:nth-child(2) {
.shard {
60.143%, 19% 60%);
}
}
&:nth-child(3) {
.shard {
54.857% ,24.700% 60.286%);
}
}
&:nth-child(4) {
.shard {
54.9%, 29.4% 59.429%);
}
}
&:nth-child(5) {
.shard {
29.3% 59.4%);
}
}
&:nth-child(6) {
.shard {
54.143%, 34.2% 59.8%);
background-color: #3C3A42
}
}
&:nth-child(7) {
.shard {
54.571%, 34.02% 59.6%);
}
}
&:nth-child(8) {
.shard {
54.571% ,39.800% 58.857%);
background-color: #BA223A
}
}
&:nth-child(9) {
.shard {
56.429%, 39.7% 58.857%);
}
}
&:nth-child(10) {
.shard {
54.714% ,43.500% 56.571%);
background-color: #DE4C63
}
}
&:nth-child(11) {
.shard {
56.429% ,47.500% 59.429%);
background-color: #9A2A3C
}
}
&:nth-child(12) {
.shard {
54.714%, 50.4% 56.6%);
background-color: #BB293A
}
}
&:nth-child(13) {
.shard {
56.429% ,47.400% 59.571%);
background-color: #C52F49
}
}
&:nth-child(14) {
.shard {
53.857% ,50.300% 56.571%);
}
}
&:nth-child(15) {
.shard {
56.429% ,53.400% 58.714%);
background-color: #8D233B
}
}
&:nth-child(16) {
.shard {
53.857% ,53.400% 58.857%);
background-color: #BC2D40
}
}
&:nth-child(17) {
.shard {
-webkit-clip-path: polygon(53.3% 58.7%, 56% 54%,
60.3% 58.714%);
}
}
&:nth-child(18) {
.shard {
60.3% 58.714%);
}
}
&:nth-child(19) {
.shard {
54.571%, 75.5% 59.2%);
background-color: #181B1F
}
}
&:nth-child(20) {
.shard {
51.429%, 77.5% 54%);
}
}
&:nth-child(21) {
.shard {
75.4% 59.26%);
background-color: #2D2C35
}
}
&:nth-child(22) {
.shard {
59.143% ,66.500% 71.143%);
}
}
&:nth-child(23) {
.shard {
71.9% 68.714%);
background-color: #333E4E
}
}
&:nth-child(24) {
.shard {
78.429% ,71.900% 68.857%);
}
}
&:nth-child(25) {
.shard {
51.857% ,79.900% 54.143%);
}
}
&:nth-child(26) {
.shard {
54.143% ,78.400% 58.429%);
background-color: #3B0F13
}
}
&:nth-child(27) {
.shard {
53.714% ,41.500% 30.857%);
background-color:#6D9B9F
}
}
&:nth-child(28) {
.shard {
53.857% ,62.400% 44.286%);
background-color: #9ABFC2
}
}
&:nth-child(29) {
.shard {
10.000% ,62.500% 44.429%);
background-color: #80B1B4
}
}
&:nth-child(30) {
.shard {
9.857% ,51.600% 10.143%);
background-color: #9ABFC2
}
}
}
}
} // END OF DAMSELFLY
// START OF SLOTH
#animalchanger.sloth {
background-color: $sloth-bg;
.stage {
.animal-nav {
.why-endangered {
span, &::after {
color: $sloth-bg;
}
}
}
.nav-btn::after {
}
.popout {
color: $sloth-bg;
}
.mute span {
border-color: $sloth-bg;
}
.animalinfo {
li {
&:nth-child(3) {
.direct-stats {
span {
}
}
}
}
}
}
}
.wallpaper {
span {
}
}
}
.overlay {
h2, p span, a {
color: $sloth-bg;
}
}
.chart {
&.show-chart-1 {
.shard {
66%, 45% 59%, 50% 50%, 50% 50%, 50% 50%);
}
}
&.show-chart-2 {
.shard {
-webkit-clip-path: polygon(25% 7%, 71% 14%, 90% 50.2%,
65.5% 77%, 38.5% 70%, 41% 50%, 50% 50%, 50% 50%);
}
}
}
.wrap {
.shadow {
left: 20%;
width: 55%;
bottom: 12.5%;
height: 5%;
&::before {
left:-19%;
bottom: 16%;
width: 35%;
height: 85%;
}
&::after {
left: 93%;
bottom: 13%;
height: 55%;
width: 18%;
}
}
body:not(.smash) & {
.shard-wrap {
$s: ($i*0.17+0.4s);
transition-duration: $s;
}
}
}
}
.shard-wrap {
&:nth-child(1) {
.shard {
57.714% ,32.050% 70.429%);
background-color: #7C5F4B
}
}
&:nth-child(2) {
.shard {
68.143% ,31.750% 73.143%);
}
}
&:nth-child(3) {
.shard {
75.286% ,31.650% 73.143%);
}
}
&:nth-child(4) {
.shard {
57.8%, 50.6% 65.6%);
}
}
&:nth-child(5) {
.shard {
65.571% ,52.350% 75.429%);
}
}
&:nth-child(6) {
.shard {
44.000% ,47.350% 58.000%);
background-color: #8F6A59
}
}
&:nth-child(7) {
.shard {
30.000% ,38.950% 47.857%);
background-color: #6A5E51
}
}
&:nth-child(8) {
.shard {
52.5% 44%);
}
}
&:nth-child(9) {
.shard {
54.143%, 47.35% 57.814%);
}
}
&:nth-child(10) {
.shard {
36.857%, 57.15% 44.857%);
}
}
&:nth-child(11) {
.shard {
50.5% 65.714%);
background-color: #624C3E
}
}
&:nth-child(12) {
.shard {
54.000% ,52.150% 75.429%);
background-color: #3B372F
}
}
&:nth-child(13) {
.shard {
64.429%, 51.5% 76.571%);
}
}
&:nth-child(14) {
.shard {
37%, 68.3% 64.4%);
}
}
&:nth-child(15) {
.shard {
40.286%, 63.3% 54.3%);
}
}
&:nth-child(16) {
.shard {
14.429% ,65.150% 42.286%);
background-color: #3A2C1A
}
}
&:nth-child(17) {
.shard {
14.286% ,54.350% 25.143%);
}
}
&:nth-child(18) {
.shard {
31.286% ,68.350% 25.286%);
}
}
&:nth-child(19) {
.shard {
25.286% ,74.950% 37.143%);
}
}
&:nth-child(20) {
.shard {
29.857% ,71.850% 37.429%);
background-color: #BFB0A3
}
}
&:nth-child(21) {
.shard {
35.000% ,64.150% 49.000%);
}
}
&:nth-child(22) {
.shard {
40.286% ,64.050% 48.857%);
background-color: #806D5B
}
}
&:nth-child(23) {
.shard {
35.143% ,69.250% 39.429%);
background-color: #5A5D6E
}
}
&:nth-child(24) {
.shard {
39.429% ,65.450% 40.857%);
}
}
&:nth-child(25) {
.shard {
33.000% ,65.050% 35.429%);
background-color: #3A2E22
}
}
&:nth-child(26) {
.shard {
35.429% ,72.150% 40.143%);
}
}
&:nth-child(27) {
.shard {
31.429% ,64.350% 32.000%);
background-color: #DBAE63
}
}
&:nth-child(28) {
.shard {
34.429% ,72.250% 40.286%);
background-color: #DBAE63
}
}
&:nth-child(29) {
.shard {
68.143% ,71.550% 69.286%);
}
}
&:nth-child(30) {
.shard {
60.286% ,80.350% 68.143%);
}
}
&:nth-child(31) {
.shard {
43.714% ,19.150% 85.000%);
background-color: #4D373D
}
}
&:nth-child(32) {
.shard {
21.6% 43.771%);
}
}
&:nth-child(33) {
.shard {
12.714% ,63.450% 15.714%);
background-color: #4D373D
}
}
}
}
} // END OF SLOTH
// ----------
// START OF FOREST OWLET
#animalchanger.owl, .preloader #animalchanger.owl-shards {
.wrap {
.shard-wrap {
&:nth-child(1) {
.shard {
10.500% ,52.676% 9.643%);
}
}
&:nth-child(2) {
.shard {
15.071% ,52.676% 9.500%);
}
}
&:nth-child(3) {
.shard {
23.357% ,42.176% 15.071%);
}
}
&:nth-child(4) {
.shard {
9.500% ,54.976% 21.071%);
}
}
&:nth-child(5) {
.shard {
11.786% ,42.276% 15.071%);
}
}
&:nth-child(6) {
.shard {
11.643% ,48.776% 12.500%);
}
}
&:nth-child(7) {
.shard {
15.071% ,41.776% 23.500%);
}
}
&:nth-child(8) {
.shard {
23.500% ,54.976% 21.071%);
}
}
&:nth-child(9) {
.shard {
19.357% ,41.776% 23.500%);
}
}
&:nth-child(10) {
.shard {
23.357% ,43.876% 19.500%);
}
}
&:nth-child(11) {
.shard {
28.357% ,35.976% 52.786%);
}
}
&:nth-child(12) {
.shard {
31.357% ,35.776% 50.786%);
}
}
&:nth-child(13) {
.shard {
31.929% ,37.176% 21.929%);
}
}
&:nth-child(14) {
.shard {
21.929% ,38.176% 31.500%);
}
}
&:nth-child(15) {
.shard {
23.500% ,38.076% 31.643%);
}
}
&:nth-child(16) {
.shard {
45.2% 31.5%);
}
}
&:nth-child(17) {
.shard {
31.357% ,48.076% 20.643%);
}
}
&:nth-child(18) {
.shard {
50.786% ,54.176% 53.643%);
}
}
&:nth-child(19) {
.shard {
53.929% ,61.476% 73.500%);
}
}
&:nth-child(20) {
.shard {
48.16% 42.357%);
}
}
&:nth-child(21) {
.shard {
42.3%, 55% 35.1%);
}
}
&:nth-child(22) {
.shard {
54.95% 35.2%);
}
}
&:nth-child(23) {
.shard {
63.9% 51.3%);
}
}
&:nth-child(24) {
.shard {
35.071% ,63.100% 44.357%);
}
}
&:nth-child(25) {
.shard {
44.214% ,61.900% 31.214%);
}
}
&:nth-child(26) {
.shard {
45.929% ,60.700% 41.500%);
}
}
&:nth-child(27) {
.shard {
62.9% 50.643%);
}
}
&:nth-child(28) {
.shard {
80.071% ,64.800% 73.357%);
}
}
&:nth-child(29) {
.shard {
63.071% ,47.200% 60.786%);
}
}
&:nth-child(30) {
.shard {
68.214% ,49.400% 62.786%);
}
}
}
}
}
#animalchanger.owl {
.stage {
.animal-nav {
.why-endangered {
span, &::after {
color: $owl-bg;
}
}
}
.nav-btn::after {
}
.popout {
color: $owl-bg;
}
.mute span {
}
.animalinfo {
li {
&:nth-child(3) {
.direct-stats {
span {
}
}
}
}
}
}
}
.wallpaper {
span {
}
}
}
.overlay {
h2, p span, a {
color: $owl-bg;
}
}
.wrap {
.shadow {
left: 15%;
bottom: 12%;
width: 70%;
height: 6%;
&::before {
left: 48%;
bottom: 16%;
width: 37%;
height: 70%;
}
&::after {
width: 0;
left: 50%;
}
}
.shard-wrap {
&:nth-child(1) {
.shard {
10.500% ,52.676% 9.643%);
background-color: #8B7F7A;
}
}
&:nth-child(2) {
.shard {
15.071% ,52.676% 9.500%);
}
}
&:nth-child(3) {
.shard {
23.357% ,42.176% 15.071%);
background-color: #B1A799;
}
}
&:nth-child(4) {
.shard {
9.500% ,54.976% 21.071%);
background-color: #BCAEA5;
}
}
&:nth-child(5) {
.shard {
11.786% ,42.276% 15.071%);
background-color: #D3CBC7;
}
}
&:nth-child(6) {
.shard {
11.643% ,48.776% 12.500%);
background-color: #D3CBC7;
}
}
&:nth-child(7) {
.shard {
15.071% ,41.776% 23.500%);
background-color: #A09086;
}
}
&:nth-child(8) {
.shard {
23.500% ,54.976% 21.071%);
}
}
&:nth-child(9) {
.shard {
19.357% ,41.776% 23.500%);
background-color: #D2B253;
}
}
&:nth-child(10) {
.shard {
23.357% ,43.876% 19.500%);
}
}
&:nth-child(11) {
.shard {
28.357% ,35.976% 52.786%);
background-color: #B6ACA6;
}
}
&:nth-child(12) {
.shard {
31.357% ,35.776% 50.786%);
background-color: #C1BAB6;
}
}
&:nth-child(13) {
.shard {
31.929% ,37.176% 21.929%);
background-color: #685C5B;
}
}
&:nth-child(14) {
.shard {
21.929% ,38.176% 31.500%);
background-color: #4F4B4C;
}
}
&:nth-child(15) {
.shard {
23.500% ,38.076% 31.643%);
}
}
&:nth-child(16) {
.shard {
45.2% 31.5%);
background-color: #4F4B4C;
}
}
&:nth-child(17) {
.shard {
31.357% ,48.076% 20.643%);
}
}
&:nth-child(18) {
.shard {
50.786% ,54.176% 53.643%);
background-color: #B5A9A6;
}
}
&:nth-child(19) {
.shard {
53.929% ,61.476% 73.500%);
background-color: #9F918A;
}
}
&:nth-child(20) {
.shard {
48.16% 42.357%);
}
}
&:nth-child(21) {
.shard {
42.3%, 55% 35.1%);
}
}
&:nth-child(22) {
.shard {
54.95% 35.2%);
background-color: #4C4B48;
}
}
&:nth-child(23) {
.shard {
63.9% 51.3%);
}
}
&:nth-child(24) {
.shard {
35.071% ,63.100% 44.357%);
background-color: #393B3D;
}
}
&:nth-child(25) {
.shard {
44.214% ,61.900% 31.214%);
}
}
&:nth-child(26) {
.shard {
45.929% ,60.700% 41.500%);
background-color: #241F1B;
}
}
&:nth-child(27) {
.shard {
62.9% 50.643%);
}
}
&:nth-child(28) {
.shard {
80.071% ,64.800% 73.357%);
}
}
&:nth-child(29) {
.shard {
63.071% ,47.200% 60.786%);
background-color: #6C4D34;
}
}
&:nth-child(30) {
.shard {
68.214% ,49.400% 62.786%);
}
}
.shard {
47.500% ,55.800% 69.357%);
}
}
&:nth-child(32) {
.shard {
78.643% ,55.800% 69.357%);
}
}
&:nth-child(33) {
.shard {
84.929% ,67.100% 85.071%);
background-color: #2E1A1F;
}
}
}
}
} // END OF OWLET
// ----------
// START OF TAPIR
#animalchanger.tapir {
background-color: $tapir-bg;
.stage {
.animal-nav {
.why-endangered {
span, &::after {
color: $tapir-bg;
}
}
}
.nav-btn::after {
}
.popout {
color: $tapir-bg;
}
.mute span {
border-color: $tapir-bg;
}
.animalinfo {
li {
&:nth-child(3) {
.direct-stats {
span {
background-color:$tapir-bg;
}
}
}
}
}
}
}
.wallpaper {
span {
}
}
}
.overlay {
h2, p span, a {
color: $tapir-bg;
}
}
.wrap {
.shadow {
left: 18.8%;
bottom: 9%;
width: 27%;
height: 6%;
&::before {
left: 168%;
bottom: 43%;
width: 68%;
height: 59%;
}
&::after {
width: 140%;
left: 68%;
height: 110%;
bottom: 20%;
}
}
.shard-wrap {
&:nth-child(1) {
.shard {
80.286% ,13.900% 74.429%);
}
}
&:nth-child(2) {
.shard {
13.95% 74.571%);
}
}
&:nth-child(3) {
.shard {
65.7%);
}
}
&:nth-child(4) {
.shard {
11.7% 56.286%);
background-color: #2E2C31;
}
}
&:nth-child(5) {
.shard {
46.143%);
}
}
&:nth-child(6) {
.shard {
26.2% 61.286%);
}
}
&:nth-child(7) {
.shard {
26.4% 61.429%);
}
}
&:nth-child(8) {
.shard {
61.429% ,26.400% 36.000%);
background-color: #1B1B1E;
}
}
&:nth-child(9) {
.shard {
41.000% ,17.400% 47.429%);
}
}
&:nth-child(10) {
.shard {
34.3% 63.4%);
}
}
&:nth-child(11) {
.shard {
34% 63.429%);
background-color: #2F2B36;
}
}
&:nth-child(12) {
.shard {
27.000% ,44.800% 40.429%);
}
}
&:nth-child(13) {
.shard {
63.429% ,47.900% 61.429%);
}
}
&:nth-child(14) {
.shard {
61.2%);
}
}
&:nth-child(15) {
.shard {
32.6% 88%);
}
}
&:nth-child(16) {
.shard {
61.286% ,46.100% 77.857%);
}
}
&:nth-child(17) {
.shard {
46.1% 77.6%);
}
}
&:nth-child(18) {
.shard {
43.45% 84.714%);
}
}
&:nth-child(19) {
.shard {
61.429% ,59.200% 41.571%);
background-color: #C6CFDD;
}
}
&:nth-child(20) {
.shard {
41.571% ,71.500% 25.857%);
background-color: #DCE6F0;
}
}
&:nth-child(21) {
.shard {
58.571% ,65.000% 62.143%);
background-color: #BCC2CD;
}
}
&:nth-child(22) {
.shard {
61.429% ,64.900% 62.143%);
}
}
&:nth-child(23) {
.shard {
64.9% 62.143%);
background-color: #CED7E5;
}
}
&:nth-child(24) {
.shard {
62.143% ,89.300% 43.429%);
background-color: #DCE6F0;
}
}
&:nth-child(25) {
.shard {
86.286% ,86.500% 86.286%);
background-color: #302B2B;
}
}
&:nth-child(26) {
.shard {
77.857% ,83.100% 57.000%);
}
}
&:nth-child(27) {
.shard {
43.286% ,86.200% 56.286%);
background-color: #1B1B1E;
}
}
&:nth-child(28) {
.shard {
79.8% 57.8%);
}
}
&:nth-child(29) {
.shard {
77.6%);
}
}
&:nth-child(30) {
.shard {
92.7% 47.5%);
background-color: #2F2F32;
}
}
}
}
} // END OF TAPIR
.smash {
.stage {
.animal-nav {
.why-endangered {
span {
color: $smash-bg !important;
}
}
}
.nav-btn::after {
background-color: $smash-bg !important;
@include transition(background .13s .1s linear);
}
.popout {
color: $smash-bg !important;
@include transition(all .26s cubic-bezier($smootheaseout,
background .13s .1s linear));
}
#animalchanger {
@include transition(background .13s linear);
&::before{
opacity: 0.13;
}
.level-one {
@include transition(all 3.5s cubic-bezier(0,.77,.2,1) .13s);
@include transform( scale(1.3) );
margin-top: 0;
.level-two {
@include transition(1500s linear .4s);
@include transform (rotate(6000deg) !important) ;
}
.animal-mover {
@include transform( translateX(0) translateY(0)
rotate(0deg) );
}
}
}
.wrap {
.shard-wrap {
.shard {
@include transition(all .24s .13s, background-image 0s);
}
}
.shard-wrap:nth-child(2n) {
.shard {
background-image: url('../img/blood.png');
background-position: center center;
background-repeat: repeat;
background-size: 10%;
}
}
.shard-wrap {
&:nth-child(1) {
.shard {
17.714% ,20.200% 19.857% ) !important;
}
}
&:nth-child(2) {
.shard {
22.714% ,15.600% 24.000% ) !important;
}
}
&:nth-child(3) {
.shard {
-webkit-clip-path: polygon(10% 20%, 10.5% 20.5%, 11% 20%)
!important;
}
}
&:nth-child(4) {
.shard {
-webkit-clip-path: polygon(10% 30%, 11% 32%, 12% 31%) !
important;
}
}
&:nth-child(5) {
.shard {
40.286% ,15.900% 42.857% ) !important;
}
}
&:nth-child(6) {
.shard {
!important;
}
}
&:nth-child(7) {
.shard {
57.286% ,11.700% 55.429% ) !important;
}
}
&:nth-child(8) {
.shard {
65.714% ,18.100% 63.857% ) !important;
}
}
&:nth-child(9) {
.shard {
79.143% ,17.300% 80.714% ) !important;
}
}
&:nth-child(10) {
.shard {
!important;
}
}
&:nth-child(11) {
.shard {
13.000% ,36.900% 15.571% ) !important;
}
}
&:nth-child(12) {
.shard {
84.429% ,35.500% 79.714% ) !important;
}
}
&:nth-child(13) {
.shard {
5.571% ,50.000% 2.714% ) !important;
}
}
&:nth-child(14) {
.shard {
important;
}
}
&:nth-child(15) {
.shard {
5.571% ,60.900% 3.857% ) !important;
}
}
&:nth-child(16) {
.shard {
98.286% ,63.600% 96.714% ) !important;
}
}
&:nth-child(17) {
.shard {
8.571% ,73.100% 9.571% ) !important;
}
}
&:nth-child(18) {
.shard {
important;
}
}
&:nth-child(19) {
.shard {
14.857% ,74.400% 12.429% ) !important;
}
}
&:nth-child(20) {
.shard {
important;
}
}
&:nth-child(21) {
.shard {
26.714% ,74.800% 25.857% ) !important;
}
}
&:nth-child(22) {
.shard {
important;
}
}
&:nth-child(23) {
.shard {
32.714% ,81.800% 30.000% ) !important;
}
}
&:nth-child(24) {
.shard {
42.929% ,89.800% 39.786% ) !important;
}
}
&:nth-child(25) {
.shard {
!important;
}
}
&:nth-child(26) {
.shard {
-webkit-clip-path: polygon(84.5% 60%, 83% 62%, 81% 61%) !
important;
}
}
&:nth-child(27) {
.shard {
68.714% ,85.300% 67.286% ) !important;
}
}
&:nth-child(28) {
.shard {
important;
}
}
&:nth-child(29) {
.shard {
!important;
}
}
&:nth-child(30) {
.shard {
84.786% ,78.400% 83.500% ) !important;
}
}
&:nth-child(31).peripheral, &:nth-child(32).peripheral, &:nth-
child(33).peripheral {
.shard {
-webkit-clip-path: polygon( 50% 50% ,50% 50% ,50% 50% ) !
important;
@include transition(.05s !important) ;
background-image: none;
@include animation (none !important);
&::before {
@include animation (none !important);
}
}
}
}
}
} //END OF SMASH
// START OF ANIMAL ANIMATION STATES
// OVERALLING POSITIONAL CHANGES
.animal-mover {
}
// FISH GOING LEFT

.animal-mover {
.animal-animations-on & {
}
.animal-animations-on.state-three & {
@include transition(1.2s cubic-bezier(1,0,0,1));
}
.animal-animations-on.state-two & {
@include transition(1s linear);
}
.animal-animations-on.state-four & {
}
}
}
// FISH GOING RIGHT

#animalchanger.turtle, #animalchanger.parrotfish {
.animal-mover {
.animal-animations-on & {
}
.animal-animations-on.state-three & {
@include transition(1.2s cubic-bezier(1,0,0,1));
}
.animal-animations-on.state-two & {
}
.animal-animations-on.state-four & {
}
}
}
.chromebrowser {
#animalchanger.damselfly,#animalchanger.butterfly {
.animal-mover, .shadow {
@include transition(1.2s cubic-bezier($smootheaseout));
}
}
.animal-animations-on.state-two, .animal-animations-on.state-four {
#animalchanger.damselfly, #animalchanger.butterfly {
.animal-mover {
}
.shadow {
}
}
}
.animal-animations-on {
.level-one {
.level-two {
.wrap {
.shard-wrap {
.shard {
@include transition(.6s 0 cubic-
bezier(.7,0.3,0,1));
}
}
.shadow, .shadow::before, .shadow::after {
@include transition(.6s 0 cubic-bezier(.7,0.3,0,1));
}
}
}
}
// ANIMATION SPEEDS SET FOR PARTICULAR ANIMALS OR SHARDS FOR ALL ANIMATION
STATES
.wrap {
.shard-wrap {
$ad: ($i*0.013s);
@include transition(.5s 0 cubic-bezier(.7,0.3,0,1),
background-color .8s $ad);
}
}
}
}
}
.shard-wrap {
&:nth-child(10),&:nth-child(11), &:nth-child(12) {
.shard {
}
}
}
}
.shard-wrap {
.shard {
@include transition(0.2s);
}
}
}
.shard-wrap {
.shard {
@include transition(1.2s 0s);
}
}
}
&.state-two {
.wrap {
.shard-wrap {
&:nth-child(11) {
.shard {
26.7%, 65% 36.1%);
}
}
&:nth-child(12) {
.shard {
61.5%, 54.5% 66%);
}
}
&:nth-child(13) {
.shard {
-webkit-clip-path: polygon(54% 76%, 56.5%
87%, 56% 78%);
}
}
&:nth-child(14) {
.shard {
78%, 54.35% 65.86%);
}
}
&:nth-child(15) {
.shard {
78%, 54.33% 65.7%);
}
}
&:nth-child(16) {
.shard {
78%, 55% 74%);
}
}
&:nth-child(17) {
.shard {
42.2%, 64% 44.1%);
}
}
&:nth-child(18) {
.shard {
55.8%, 54.2% 66.1%);
}
}
&:nth-child(19) {
.shard {
-webkit-clip-path: polygon(64.5% 27%, 77%
19%, 65.05% 36.7%);
}
}
&:nth-child(20) {
.shard {
76.95% 19%, 65% 36.6%);
}
}
&:nth-child(21) {
.shard {
-webkit-clip-path:polygon(82.57% 26.5%,
63.44% 56%, 65% 36.4%);
}
}
&:nth-child(22) {
.shard {
63.42% 56%, 83.9% 28.74%);
}
}
&:nth-child(23) {
.shard {
27%, 83.9% 28.8%);
}
}
&:nth-child(24) {
.shard {
27.05%, 90.3% 24.35%);
}
}
&:nth-child(25) {
.shard {
22%, 90.5% 24.4%);
}
}
&:nth-child(26) {
.shard {
-webkit-clip-path:polygon(82.5% 26.5%, 84.3%
22%, 76.9% 19%);
}
}
&:nth-child(27) {
.shard {
27.5%, 82.6% 26.5%);
}
}
&:nth-child(28) {
.shard {
79.35% 25%, 80.8% 23.8%);
}
}
&:nth-child(29) {
.shard {
44%, 65.1% 36.2%);
}
}
&:nth-child(30) {
.shard {
28.7%, 78.6% 27.5%);
}
}
}
}
.wrap {
.shard-wrap {
&:nth-child(29) {
.shard {
43.5%, 87.413% 45.7%);
}
}
&:nth-child(30) {
.shard {
51.571%, 85.413% 53.286%);
}
}
}
}
}
.wrap {
.shard-wrap {
&:nth-child(1) {
.shard {
22.9% 50.643%, 25.5% 49%);
}
}
}
}
}
.wrap {
.shard-wrap {
&:nth-child(8) {
.shard {
58.95% 77.143%, 56.75% 82.571%);
}
}
&:nth-child(27) {
.shard {
63.05% 53.571%, 65.45% 69.429%);
}
}
}
}
}
.wrap {
.shard-wrap {
&:nth-child(1) {
.shard {
23.15% 20.214%, 28.05% 29.929%);
}
}
&:nth-child(2) {
.shard {
30.3% 24.786%, 31.05% 43.67%);
}
}
&:nth-child(3) {
.shard {
26.75% 28.929%, 30.85% 21.214%);
}
}
&:nth-child(4) {
.shard {
34.65% 14.786%, 29.75% 22.214%);
}
}
&:nth-child(5) {
.shard {
29.357%, 30.85% 40.5%);
}
}
&:nth-child(6) {
.shard {
34.7% 14.8%, 32.95% 27.4%);
}
}
&:nth-child(7) {
.shard {
28.95% 21.1%, 26.75% 30.786%);
}
}
&:nth-child(8) {
.shard {
28.75% 21.214%, 29.15% 29.214%);
}
}
&:nth-child(9) {
.shard {
27.1%, 30.8% 31.929%);
}
}
&:nth-child(10) {
.shard {
33% 26.3%, 29.05% 27.214%);
}
}
&:nth-child(11) {
.shard {
33.05% 26.357%, 30.7% 32.071%);
}
}
&:nth-child(12) {
.shard {
32.3% 20.786%, 33.05% 26.357%);
}
}
&:nth-child(13) {
.shard {
34.65% 14.929%, 42.25% 29.357%);
}
}
&:nth-child(15) {
.shard {
31.95% 39.357%, 32.05% 52.214%);
}
}
&:nth-child(16) {
.shard {
47.25% 23.357%, 41.8% 29.1%);
}
}
}
}
}
.wrap {
.shard-wrap {
&:nth-child(19) {
.shard {
72.75% 43.571%, 60.65% 56.4%);
}
}
&:nth-child(20) {
.shard {
68.95% 27%, 73.15% 30.143%);
}
}
&:nth-child(21) {
.shard {
72.95% 30%, 72.45% 44.143%);
}
}
&:nth-child(22) {
.shard {
72.55% 43.714%, 64.8% 64%);
}
}
&:nth-child(23) {
.shard {
72.5% 43.714%, 72.25% 58.429%);
}
}
&:nth-child(24) {
.shard {
49.143%, 71.85% 62.143%);
}
}
&:nth-child(25) {
.shard {
78.85% 34.8%, 79.25% 54.714%);
}
}
&:nth-child(26) {
.shard {
71.65% 19.571%, 79.15% 25.857%);
}
}
&:nth-child(27) {
.shard {
73.55% 18.571%, 79.15% 26%);
}
}
&:nth-child(28) {
.shard {
82.25% 25.286%, 73.95% 31.286%);
}
}
&:nth-child(29) {
.shard {
82.25% 25.286%, 84.95% 30.286%);
}
}
&:nth-child(30) {
.shard {
84.15% 30.286%, 78.85% 34.857%);
}
}
&:nth-child(31) {
.shard {
-webkit-clip-path: polygon(84% 32.5%, 83%
33.5%, 81% 22%);
}
}
}
}
}
.wrap {
.shard-wrap {
&:nth-child(14) {
.shard {
72%, 39.4% 81.143%);
}
}
&:nth-child(15) {
.shard {
45.2% 69.286%, 34% 79.429%);
}
}
}
.shadow {
&::after {
left: 19%;
bottom: 32%;
}
}
}
}
.wrap {
.shard-wrap {
&:nth-child(1) {
.shard {
14.214%, 31.45% 10.2%, 31.7% 18.5%);
}
}
&:nth-child(30) {
.shard {
29.05% 13.3%, 29.3% 15.786%);
}
}

}
}
&:nth-child(31) {
.shard {
21.214%, 32.05% 18.071%, 30.8% 15.786%);
background-color: #F1A9E2
}
}
&:nth-child(32) {
.shard {
21.214%, 31.7% 18.7%, 31.7% 32.786%);
background-color: #D289D3
}
}
&:nth-child(33) {
.shard {
33.7% 34.7%, 31.6% 32.786%);
background-color: #CA6CA5
}
}
}
}
}
.wrap {
.shard-wrap {
&:nth-child(24) {
.shard {
62.45% 19.429%, 67.95% 21.857%);
}
}
&:nth-child(23) {
.shard {
67.85% 21.714%, 68.05% 42.714%) ;
}
}
&:nth-child(22) {
.shard {
60.25% 41.429%, 68.05% 42.714%);
}
}
&:nth-child(25) {
.shard {
62.95% 11%, 67.95% 22%);
}
}
&:nth-child(29) {
.shard {
82.25% 49.857%, 83% 54.3%);
}
}
&:nth-child(28) {
.shard {
82.35% 49.857%, 81.75% 53.429%);
}
}
}
}
}
.wrap {
.shard-wrap {
&:nth-child(5) {
.shard {
36.25% 47.714%, 27.85% 49.714%);
}
}
}
}
}
.wrap {
.shard-wrap {
&:nth-child(10) {
.shard {
60.071%, 30.4% 82.786%);
}
}
&:nth-child(11) {
.shard {
34.7% 68.071%, 36.7% 82.8%);
}
}
}
}
}
.wrap {
.shard-wrap {
&:nth-child(1) {
.shard {
74.2%, 22.75% 68.1%);
}
}
&:nth-child(2) {
.shard {
20.95% 57.357%, 24.55% 57.786%);
}
}
&:nth-child(3) {
.shard {
24.35% 57.5%, 22.75% 68.214%);
}
}
&:nth-child(4) {
.shard {
24.25% 57.643%, 28.05% 72.786%);
}
}
&:nth-child(5) {
.shard {
22.7% 68.1%, 28.2% 72.8%);
}
}
&:nth-child(6) {
.shard {
25.95% 74%, 21.65% 78.7%);
}
}
}
}
}
.wrap {
.shard-wrap {
&:nth-child(29) {
.shard {
39.7% 61.071%, 45.2% 58.786%);
}
}
&:nth-child(30) {
.shard {
43.6% 65.214%, 47.4% 60.786%);
}
}
}
}
}
.wrap {
.shard-wrap {
&:nth-child(9) {
.shard {
33.813% 25.268%, 22.213% 33.268%);
}
}
&:nth-child(10) {
.shard {
39.813% 51.8%, 23.413% 43.125%);
background-color: #436a2c;
}
}
&:nth-child(16) {
.shard {

58.841% 3.871%, 56.741% 12.299%);
}
}
&:nth-child(12) {
.shard {
56.712% 12.2%, 66.712% 23%);
}
}
&:nth-child(17) {
.shard {
25.411% ,56.612% 12.411% ,46.513% 41.696% );
}
}
&:nth-child(13) {
.shard {
-webkit-clip-path: polygon( 33.953% 25.210%,
46.453% 41.781%, 21.353% 33.353% );
}
}
&:nth-child(14) {
.shard {
33.353% ,46.353% 41.781% ,39.753% 51.781% );
background-color: #39512c;
}
}
&:nth-child(26) {
.shard {
62.153% 48.6%, 39.753% 51.781%);
background-color: #445f2f;
}
}
&:nth-child(27) {
.shard {
66.653% 23.067%, 62.23% 49.21%);
background-color: #39512c;
}
}
&:nth-child(28) {
.shard {
12.228% ,58.741% 3.656% ,66.741% 23.085% );
background-color: #519f4b;
}
}
&:nth-child(24) {
.shard {
69.053% 44.138%, 63.2% 54.4%);
}
}
&:nth-child(25) {
.shard {
62.195% 48.766%, 63.25% 54.337%);
}
}
}
}
}
}
&.state-three {
.wrap {
.shard-wrap {
&:nth-child(11) {
.shard {
28.7%, 65% 36.1%);
}
}
&:nth-child(19) {
.shard {
29%, 64.8% 37.4%);
}
}
&:nth-child(20) {
.shard {
78.95% 29%, 65% 36.6%);
}
}
&:nth-child(21) {
.shard {
63.44% 56%, 65% 36.4%);
}
}
&:nth-child(22) {
.shard {
63.42% 56%, 83.9% 32.74%);
}
}
&:nth-child(23) {
.shard {
35%, 82.9% 41.8%);
}
}
&:nth-child(24) {
.shard {
35.05%, 92.3% 32.35%);
}
}
&:nth-child(25) {
.shard {
31%, 92.5% 32.4%);
}
}
&:nth-child(26) {
.shard {
31%, 78.9% 29%);
}
}
&:nth-child(27) {
.shard {
32.5%, 81.6% 32.5%);
}
}
&:nth-child(28) {
.shard {
79.35% 32%, 80.8% 31.8%);
}
}
&:nth-child(29) {
.shard {
44%, 65.1% 36.2%);
}
}
&:nth-child(30) {
.shard {
32.7%, 77.6% 32.5%);
}
}
}
}
.wrap {
.shard-wrap {
&:nth-child(24) {
.shard {
55.45% 23.429%, 62.95% 21.857%);
}
}
&:nth-child(23) {
.shard {
62.85% 21.714%, 65.05% 41.714%) ;
}
}
&:nth-child(22) {
.shard {
56.25% 41.429%, 65.05% 41.714%);
}
}
&:nth-child(25) {
.shard {
53.95% 15%, 62.95% 22%);
}
}
}
}
}
.wrap {
.shard-wrap {
&:nth-child(7) {
.shard {
51.35% 85%, 49.05% 82.857%);
}
}
&:nth-child(3) {
.shard {
31.65% 78.571%, 52.75% 51%);
}
}
&:nth-child(4) {
.shard {
35.85% 59.429%, 52.85% 50.857%);
}
}
}
}
}
.wrap {
.shard-wrap {
&:nth-child(30) {
.shard {
66.8%, 73.5% 67.45%);
}
}
}
}
}
.wrap {
.shard-wrap {

}
}
}
}
}
.wrap {
.shard-wrap {
&:nth-child(10) {
.shard {
60.071%, 34.4% 80.786%);
}
}
&:nth-child(11) {
.shard {
35.9% 69.071%, 39.7% 74.8%);
}
}
}
}
}
.wrap {
.shard-wrap {
&:nth-child(28) {
.shard {
38.929%, 67.55% 32.357%, 66.55% 51.929%);
}
}
&:nth-child(29) {
.shard {
38.929%, 66.65% 48.786%, 64.65% 55.071%);
}
}
&:nth-child(30) {
.shard {
54.643%, 66.65% 48.643%, 75.25% 59.5%);
}
}
}
}
}
.wrap {
.shard-wrap {
&:nth-child(1) {
.shard {
background-color: #8A8E5B;
}
}
&:nth-child(2) {
.shard {
background-color: #1D321B;
}
}
&:nth-child(3) {
.shard {
}
}
&:nth-child(4) {
.shard {
}
}
&:nth-child(5) {
.shard {
}
}
&:nth-child(6) {
.shard {
}
}
&:nth-child(8) {
.shard {
}
}
&:nth-child(9) {
.shard {
}
}
&:nth-child(10) {
.shard {
}
}
&:nth-child(12) {
.shard {
}
}
&:nth-child(13) {
.shard {
}
}
&:nth-child(14) {
.shard {
background-color: #1B361C;
}
}
&:nth-child(15) {
.shard {
}
}
&:nth-child(16) {
.shard {
}
}
&:nth-child(17) {
.shard {
}
}
&:nth-child(18) {
.shard {
}
}
&:nth-child(20) {
.shard {
background-color: #1D2E1E
}
}
&:nth-child(21) {
.shard {
}
}
&:nth-child(22) {
.shard {
}
}
&:nth-child(23) {
.shard {
}
}
&:nth-child(25) {
.shard {
background-color: #2C411C
}
}
&:nth-child(26) {
.shard {
background-color: #1D2E1E
}
}
&:nth-child(27) {
.shard {
}
}
&:nth-child(28) {
.shard {
}
}
&:nth-child(29) {
.shard {
}
}
&:nth-child(30) {
.shard {
}
}
}
}
}
&.state-four {
#animalchanger.sloth {
.wrap {
.shard-wrap {
&:nth-child(29) {
.shard {
-webkit-clip-path: polygon(63.15% 54%,
80.35% 68.143%, 71.55% 70.286%);
}
}
&:nth-child(30) {
.shard {
81.75% 77.286%, 80.35% 68.143%);
}
}
}
}
}
.wrap {
.shard-wrap {
&:nth-child(25) {
.shard {
75.85% 33.143%, 77.25% 51.714%);
}
}
&:nth-child(30) {
.shard {
80.15% 31.286%, 75.85% 33.857%);
}
}
&:nth-child(31) {
.shard {
34.5%, 76% 24%);
}
}
}
}
}
.wrap {
.shard-wrap {
&:nth-child(1) {
.shard {
}
}
&:nth-child(2) {
.shard {
}
}
&:nth-child(3) {
.shard {
}
}
&:nth-child(4) {
.shard {
background-color: #3B3A3E
}
}
&:nth-child(5) {
.shard {
}
}
&:nth-child(6) {
.shard {
}
}
&:nth-child(7) {
.shard {
}
}
&:nth-child(8) {
.shard {
}
}
&:nth-child(9) {
.shard {
background-color: #3B3A38
}
}
&:nth-child(10) {
.shard {
background-color: #1C1B1B
}
}
&:nth-child(12) {
.shard {
background-color: #4C4B4A
}
}
&:nth-child(13) {
.shard {
background-color: #3B3A3B
}
}
&:nth-child(14) {
.shard {
}
}
&:nth-child(15) {
.shard {
}
}
&:nth-child(16) {
.shard {
}
}
&:nth-child(17) {
.shard {
}
}
&:nth-child(18) {
.shard {
}
}
&:nth-child(19) {
.shard {
}
}
&:nth-child(20) {
.shard {
}
}
&:nth-child(21) {
.shard {
}
}
&:nth-child(22) {
.shard {
}
}
&:nth-child(23) {
.shard {
}
}
&:nth-child(25) {
.shard {
}
}
&:nth-child(26) {
.shard {
}
}
&:nth-child(27) {
.shard {
background-color: #2E2C2F
}
}
&:nth-child(28) {
.shard {
}
}
&:nth-child(29) {
.shard {
}
}
&:nth-child(30) {
.shard {
}
}
}
}
.wrap {
.shard-wrap {
&:nth-child(5) {
.shard {
36.25% 47.714%, 27.85% 47.714%);
}
}
}
}
}
}
&.two-state-two {
.wrap {
.shard-wrap {
&:nth-child(2) {
.shard {
36.4% 52.071%, 21% 74.5%);
}
}
&:nth-child(1) {
.shard {
56.929%, 21% 74.5%);
}
}
&:nth-child(31) {
.shard {
73.5%, 13% 65%);
}
}
&:nth-child(32) {
.shard {
64.5%, 15% 63%);
}
}
}
}
}
#animalchanger.peccary {
.wrap {
.shard-wrap {
&:nth-child(1), &:nth-child(2), &:nth-child(3),
.shard {
}
}
&:nth-child(1) {
.shard {
14.95% 79.929%, 22.25% 79.929%);
}
}
&:nth-child(2) {
.shard {
22.05% 58.5%, 16.05% 78.214%);
}
}
&:nth-child(3) {
.shard {
21.95% 58.214%, 22% 79.929%);
}
}
&:nth-child(4) {
.shard {
26.85% 58.357%, 22% 79.929%);
}
}
&:nth-child(5) {
.shard {
26.85% 58.357%, 22.15% 59%);
}
}
&:nth-child(9) {
.shard {
29.8% 79.8%, 22.55% 77.071%);
}
}
}
}
}
.wrap {
.shard-wrap {

}
}
&:nth-child(1) {
.shard {
22.2% 61.143%, 23.9% 63.429%);
}
}
&:nth-child(2) {
.shard {
21.5% 66.143%, 14.7% 76.429%);
}
}
&:nth-child(6) {
.shard {
26.9% 63.714%, 19.9% 68.286%);
}
}
&:nth-child(7) {
.shard {
59.429%, 27.2% 58.571%);
}
}
}
}
}
.shard-wrap {
&:nth-child(28) {
.shard {
@include transition(.6s 0 cubic-
bezier(.7,0.3,0,1), background-color 0.03s);
}
}
&:nth-child(1) {
.shard {
-webkit-clip-path: polygon(20% 40%, 25% 52.4%,
11.5% 34.5%);
}
}
&:nth-child(2) {
.shard {
50.2%, 25% 52.5%);
}
}
&:nth-child(3) {
.shard {
50.2%, 25% 48.9%);
}
}
}
}
.shard-wrap {
&:nth-child(30) {
.shard {
78.643%, 64.55% 84.643%);
}
}
}
}
#animalchanger.butterfly {
.wrap {
.shard-wrap {

&:nth-child(4), &:nth-child(5),
&:nth-child(29), &:nth-child(30), {
.shard {
bezier($smoothswing));
}
}
&:nth-child(1) {
.shard {
39.25% 27.643%, 46.55% 47.929%);
}
}
&:nth-child(2) {
.shard {
30.9% 53.929%, 33.25% 34.3%);
}
}
&:nth-child(3) {
.shard {
36.3%, 38.4% 27.5%);
}
}
&:nth-child(4) {
.shard {
27.4%, 46.6% 48.2%);
}
}
&:nth-child(5) {
.shard {
46.55% 48.214%, 30.85% 53.929%);
}
}
&:nth-child(6) {
.shard {
46.55% 48.071%, 46.05% 52.643%);
}
}
&:nth-child(7) {
.shard {
45.95% 52.786%, 33.65% 64.786%);
}
}
&:nth-child(8) {
.shard {
45.95% 52.929%, 37.05% 57.643%);
}
}
&:nth-child(9) {
.shard {
36.45% 61.214%, 35.35% 62.071%);
}
}
&:nth-child(10) {
.shard {
45.85% 52.929%, 38.45% 70.214%);
}
}
&:nth-child(21) {
.shard {
55.95% 68.214%, 49.95% 75.214%);
}
}
&:nth-child(22) {
.shard {
55.95% 68.071%, 51.65% 64.786%);
}
}
&:nth-child(23) {
.shard {
49.95% 75.214%, 45.05% 74.214%);
}
}
&:nth-child(24) {
.shard {
51.85% 70.357%, 51.25% 71.929%);
}
}
&:nth-child(25) {
.shard {
50.35% 49.929%, 58.75% 70.786%);
}
}
&:nth-child(26) {
.shard {
64.85% 43.929%, 76.55% 48.929%);
}
}
&:nth-child(27) {
.shard {
64.75% 45.214%, 65.85% 57.5%);
}
}
&:nth-child(28) {
.shard {
65.85% 57.357%, 58.65% 70.786%);
}
}
&:nth-child(29) {
.shard {
48.929%, 65.85% 57.5%);
}
}
&:nth-child(30) {
.shard {
76.65% 48.929%, 58.65% 70.786%);
}
}
}
}
}
.shard-wrap {
&:nth-child(5) {
.shard {
54.281% ,10.253% 51.138% );
}
}
&:nth-child(6) {
.shard {
44.996% ,12.553% 54.710% );
}
}
&:nth-child(7) {
.shard {
-webkit-clip-path: polygon( 12.753% 50.424%,
12.753% 44.996%, 20.853% 56.138% );
}
}
&:nth-child(30) {
.shard {
54.138% ,70.753% 51.424% ,89.153% 66.996% );
}
}
&:nth-child(4) {
.shard {
background-color: #d2c895;
}
}
}
}
.wrap {
.shard-wrap {
&:nth-child(19),&:nth-child(20),&:nth-child(21) {
.shard {
}
}
&:nth-child(19) {
.shard {
56.8% 33.4%, 68.5% 48.3%);
}
}
&:nth-child(20) {
.shard {
53.212% 38.286%, 68.5% 48.2%);
}
}
&:nth-child(21) {
.shard {
68.4% 48%, 55.112% 53.429%);
}
}
}
}
}
#animalchanger.damselfly {
.wrap {
.shard-wrap {
&:nth-child(27),&:nth-child(28),&:nth-
child(29),&:nth-child(30) {
.shard {
}
}
&:nth-child(27) {
.shard {
53.714%, 41.5% 30.857%);
}
}
&:nth-child(28) {
.shard {
69.5% 53.857%, 45.4% 42.286%);
}
}
&:nth-child(29) {
.shard {
30%, 55.5% 41.429%);
}
}
&:nth-child(30) {
.shard {
-webkit-clip-path: polygon(42.7% 45%, 34%
31.857%, 45.6% 30.143%);
}
}
}
}
}
.wrap {
.shard-wrap {
&:nth-child(8) {
.shard {
25.45% 49.071%, 25.75% 62.071%);
}
}
}
}
}
.wrap {
.shard-wrap {

&:nth-child(5) {
.shard {
}
}
&:nth-child(2) {
.shard {
32.45% 58.714%, 21.95% 69.571%);
}
}
&:nth-child(3) {
.shard {
56.286%, 21.95% 69.429%);
}
}
&:nth-child(4) {
.shard {
19.05% 52.143%, 30.85% 51.857%);
}
}
&:nth-child(5) {
.shard {
30.85% 51.857%, 25.45% 58.143%);
}
}
}
}
}
.shard-wrap {
.shard {
@include transition-duration(.1s)
}
&:nth-child(27) {
.shard {
67.4% 71.214%, 63.3% 47.643%);
}
}
&:nth-child(25) {
.shard {
42.214%, 61.9% 30.214%);
}
}
&:nth-child(24) {
.shard {
55.9% 35.071%, 64.2% 42.5%);
}
}
&:nth-child(23) {
.shard {
57.8% 32.071%, 64.9% 48.3%);
}
}
&:nth-child(22) {
.shard {
55.03% 20.929%, 56% 35.7%);
}
}
&:nth-child(21) {
.shard {
20.643%, 48.076% 42.3%, 56% 35.1%);
}
}
&:nth-child(26) {
.shard {
62.7% 43.929%, 61.4% 40.1%);
}
}
&:nth-child(18) {
.shard {
31.357%, 35.876% 50.786%, 56.176% 53.643%);
}
}
&:nth-child(28) {
.shard {
61.5% 75.071%, 63.8% 65.357%);
}
}
}
}
.shard-wrap {
&:nth-child(10) {
.shard {
35.9%, 37.35% 38.2%);
}
}
&:nth-child(11) {
.shard {
38.143%, 34.1% 37.714%);
}
}
&:nth-child(12) {
.shard {
36.1%, 33.15% 36%);
}
}
}
}
#animalchanger.tapir {
.shard-wrap {
.shard {
@include transition-duration(.2s)
}
&:nth-child(1) {
.shard {
79%, 13.9% 74.429%);
}
}
&:nth-child(2) {
.shard {
13.95% 74.571%);
}
}
&:nth-child(3) {
.shard {
74.571%, 18% 65.7%);
}
}
&:nth-child(4) {
.shard {
65.857%, 11.7% 56.286%);
}
}
&:nth-child(9) {
.shard {
-webkit-clip-path: polygon(15% 41.857%, 18% 40%,
17.4% 47.429%);
}
}
}
}
&.state-two {
.level-two {
.wrap {
.shard-wrap {
&:nth-child(16) {
.shard {
61.716%, 32.64% 61.368%, 32.91% 73.146%);
}
}
&:nth-child(18) {
.shard {
-webkit-clip-path:
polygon(27.107% 55.964%, 39.318% 59.352%, 38.467% 66.772%);
}
}
&:nth-child(19) {
.shard {
-webkit-clip-path:
polygon(27.107% 55.964%, 38.467% 66.772%, 42.128% 75.085%);
}
}
}
}
}
}
}
&.state-three {
.level-two {
.wrap {
.shard-wrap {
&:nth-child(16) {
.shard {
61.716%, 32.64% 61.368%, 37.91% 68.146%);
// background-color: #0d1417;
}
}
&:nth-child(18) {
.shard {
-webkit-clip-path:
polygon(27.107% 55.964%, 39.318% 59.352%, 42.467% 65.772%);
// background-color: #334543;
}
}
&:nth-child(19) {
.shard {
-webkit-clip-path:
polygon(27.107% 55.964%, 42.467% 65.772%, 47.128% 71.085%);
// background-color: #21282f;
}
}
}
}
}
}
}
&.two-state-two {
.wrap {
.shard-wrap {
&:nth-child(29) {
.shard {
41.979%, 86.099% 34.183%, 96.64% 34.788%);
}
}
&:nth-child(30) {
.shard {
41.979%, 96.64% 34.788%, 88.644% 39.784%);
}
}
}
}
}
}
.shimmer {
.level-one {
.wrap {
.shard-wrap {

&:nth-child(#{$i}) .shard::before {
$ad: ($i*0.05s+0.02s);
@include animation(shimmer .8s $ad forwards);
}
}
}
}
}
}
// START OF MOBILE AND GENERAL MEDIA QUERIES
.touch {
.animal-nav, .main-nav {
.popout {
display: none;
}
}
}
@media only screen and (max-width: 770px) {

.animalinfo {
li:nth-child(1), li:nth-child(3) {
display: none;
}
}
}
body.preloader {
&.start-up-seq {
.level-one {
@include transform( scale(1.3) translateY(-4%) );
}
}
&.thirty-pieces-titles {
.level-one {
@include transform( scale(.8) translateY(0%) );
}
}
}
.level-one {
position: fixed;
@include transform( scale(.9) translateY(-4%));
}
#animalchanger {
&::after {
display: none;
}
}
.popout {
display: none;
}
}
.stage {
.animal-nav {
top: 25px;
right: 35px;
margin-left: 0px;
width: 160px;
margin-top: 0;
li {
float: left;
&:nth-child(2) {
margin: 0 24px;
a {
text-indent: -99999px;
margin: 0;
&::after {
content:"!";
position: absolute;
top: 50%;
left: 50%;
font-size: 3.5em;
color: #181818;
text-indent:0;
margin: -8% 0 0 -8%;
}
}
}
a {
}
}
}
.main-nav {
top: 21px;
left: 23px;
margin-top: 0;
> li {
float: left;
overflow: hidden;
&:nth-child(3) {
display: none;
}
a {
&.nav-btn {
}
background:none;
&::after {
display: none;
}
}
}
}
bottom: 27px;
top: auto;
left: 31px;
margin-left: 0;
.animalinfo {
text-align: left;
li h2 {
font-size: 2.8em;
}
}
}
footer {
// NEW FOOTER FOR SMALLER DEVICES
height: 0;
right: 0px;
left: auto;
text-align: center;
bottom: 0px;
&::before {
content: '';
height: 100%;
margin-right: -0.25em;
}
@include transition(.43s cubic-bezier($intenseeaseout));
.footer-nav {
display: block;
height: 30px; width: 30px; position: absolute;
bottom: 33px; right: 28px;
div {
left: 13px;
content: "";
left: 0;
}
&::before {
top: 9px;
}
&::after {
top: 18px;
}
}
div, div::before, div::after {
position: absolute;
width: 5px;
height: 5px;
background-color: #FFF;
}
}
&.mobile-footer-active {
height: 100%;
width: 100%;
ul {
li {
opacity: 1;
}
}
.footer-nav {
right: 50%;
bottom: 90%;
margin-right: -15px;
div {
left: 4px;
bottom: 12px;
&::before {
top: 0;
}
&::after {
opacity: 0;
}
}
div, div::before, div::after {
width: 25px;
background-color: #bbb;
}
}
ul {
display: none;
width: 80%;
li {
opacity: 0;
display: block;
padding: 2em 0;
border-bottom: 1px solid #ededed;
font-size: 1.3em;
&:last-child {
border: none;
}
a {
color: #cacaca !important;
background: none;
padding: 0 !important;
}
&:last-child {
display: block;
span.wee {
display: none;
}
.popout {
background:none;
&:after, &:before {
display: none;
}
}
}
}
}
}
}
.content-wrap {
overflow-y: scroll;
overflow-x: hidden;
.content {
height: auto;
&::before {
display: none;
}
.content-info {
padding: 10% 10%;
margin: 0;
.ctas {
li {
display: block;
a {
&.line-link {
font-size: 1.4em;
span {
display: none;
}
}
display: block;
&:nth-child(2) {
margin: 10px 0 15px;
}
&:nth-child(3) a {
padding-left: 0;
}
}
}
ul.videos {
position: fixed;
}
}
.statistics {
margin: 0;
width: 80%;
top: 0;
left: 0;
padding: 10% 10%;
ul {
width: 100%;
float: none;
li {
text-align: center;
&:first-child{
margin-top: 10px;
a {
margin: 0 auto;
}
}
.line-link, .line-link.active {
.arrow {
translateY(-10px));
}
}
p {
&::after {
position: absolute;
left: 0;
width: 100%;
text-indent: 0;
content: "Tap chart to view figures.";
}
text-indent: -99999px;
}
}
}
.chart {
float: none;
left: 50%;
margin: 10px 0 0 -172px;
@include transform(scale(.87) !important);
}
}
}
.smash {
#animalchanger {
.level-one {
@include transition-delay(.16s) ;
}
}
}
@media only screen and (max-width: $tinyscreenwidth) {

.content-wrap .statistics .chart {
@include transform(scale(.75) !important);
}
.smash {
#animalchanger {
.level-one {
}
}
}
}

.main-nav > li:nth-child(2) {
display: none;
}
}
@media only screen and (max-height: $smallscreenheight) {
.level-one {
@include transform( scale(.8) );
}
.stage {
.animal-nav {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
margin-left: 0;
right: auto;
li {
position: absolute;
}
.prev, .next {
top: 50%;
margin-top: -30px;
}
.prev {
left: 34px;
}
.next, li:nth-child(2) {
right: 34px;
}
li:nth-child(2) {
left: 85px;
margin: 0;
top: 22px;
}
}
.main-nav {
z-index: 1;
> li:nth-child(2) {
display: none;
}
}
}
@media only screen and (max-height: $tinyscreenheight) {

.level-one {
@include transform( scale(.65) );
}
}
}
}
@media only screen and (max-height: 470px) {

footer, .border {
display: none;
}
}
.small-nav {
.hover-detector {
display: none;
}
.border {
display: none;
}
.stage {
position: fixed;
margin-left: -33px;
top: 60px;
left: 50%;
&::after {
background-color: $all-animals-bg;
}
}
}
.all-animals {
.level-one {
}
.shard-wrap {
.shard {
}
}
}
.stage {
height: 0;
position: relative;
z-index: 101;
> *:not(.main-nav) {
opacity: 0;
}
.main-nav, .animal-nav {
> * {
}
}
.main-nav {
> *:not(.all-animals-off-btn) {
opacity: 0;
}
// @include transition(all .3s, opacity .22s .2s);
}
}
}
}
}
.title-content {
display: none;
}
height: 100%;
width: 100%;
z-index: 100;
overflow-y: scroll;
position: absolute;
-webkit-mask: -webkit-linear-gradient(top, rgba(255,255,255,0)
0%,rgba(255,255,255,0) 7%,rgba(255,255,255,1) 20%,rgba(255,255,255,1) 100%) no-
repeat center center / cover;
ul {
width: 100%;
padding: 110px 0 30px;
}
li {
text-align: center;
border-bottom: 1px solid rgba(255,255,255,.1);
&:last-child {
border-bottom: none;
}
h4 {
font-size: 1.7em;
}
h2 {
font-size: 3.7em;
}
}
}
li {
padding: 20px 0;
h4 {
font-size: 1.4em;
}
h2 {
font-size: 3em;
}
}
}
}
}
.touch {
#animalchanger {
display: none !important;
}
}
.border {
display: none;
}
.popout {
display: none;
}
}
}
}
margin-top: 12.4%;
}
@media only screen and (min-height: 740px) {

.hover-detector {
&.active {
div {
$r: ($i*12deg - 7deg);
@include transform(rotate($r)
translateY(-280px));
}
}
width: 70px;
height: 70px;
}
}
}
.animal-nav-content ul{
margin-top: -54px;
}
}
}
}
@media only screen and (min-height: 810px) {

.hover-detector {
&.active {
div {
$r: ($i*12deg - 7deg);
@include transform(rotate($r)
translateY(-300px));
}
}
}
}
}
.animal-nav-content ul{
margin-top: -46px;
}
}
}
}
@media only screen and (min-width: $largescreenwidth) {
.all-animals {
.level-one {
.wrap {
.shard-wrap {
.shard.active {
-webkit-clip-path: polygon( 43% 43% ,50%
57%,57% 46% );
}
-webkit-clip-path: polygon( 43% 57% ,50% 43%,57%
56% );
}
-webkit-clip-path: polygon( 57% 43% ,50% 57%,43%
46% );
}
}
}
}
}
.animalinfo-wrapper .animalinfo li:nth-child(2) h2 {

font-size: 5.5em;
margin-top: -16px;
}
.nav-btn.close {
}
.stage {
.animalinfo {
li:nth-child(1) {
height: 52px;
span {
margin-top: 18px;
font-size: 4.7em;
}
}
li:nth-child(3) {
top: -11px;
a {
height: 56px;
width: 56px;
}
}
}
}
li {
&.throbbing {
.two-state-two & {
}
}
}
}
.animal-nav {
right: 54px;
margin-top: -142px;
li {
&:nth-child(2) {
}
}
}
.main-nav {
left: 54px;
li {
&:nth-child(1) {
}
&:nth-child(3) {
@include transform-origin(50% -70%);
}
}
}
.content-wrap .content .content-info {

max-width: 590px;
}
.content-wrap .content .content-info .infos {

p {
font-size: 1.4em;
&:nth-child(3) {
font-size: 2.3em;
line-height: 1.2em;
}
}
}
.content-wrap .content .content-info .ctas {
li {
a {
font-size: 1.3em;
}
&:nth-child(2) {
a {
&.popout {
font-size: 2.2em;
margin: 0 55px 0 75px;
&::after, &::before {
width: 62px;
}
&::before {
left: -33px;
}
&::after {
right: -33px;
}
}
}
}
}
}

margin-top: 11.5%;
}
}
@include keyframes(backgroundmoving) {
0% {
background-position: 0 0;
}
100% {
background-position: 391px 442px;
}
}
@include keyframes(throbbing) {
0% {
}
4% {
}
10% {
}
14% {
}
20% {
}
100% {
}
}
@include keyframes(throbbing-large) {
0% {
}
4% {
}
10% {
}
14% {
}
20% {
}
100% {
}
}
@include keyframes(shimmer) {
0% {
}
35% {
background-color: rgba(255,255,255,.1);
}
100% {
}
}
@include keyframes(bubbles) {
0% {
top: 5%;
}
49% {
}
98% {
top: -5%;
}
100% {
top: 5%;
}
}
@include keyframes(scratchy) {
0% {
}
25% {
}
26% {
background-position: 20px -20px;
}
50% {
}
51% {
}
75% {
}
76% {
}
99% {
}
100% {
}
}
@include keyframes(bgscratchy) {
to {
}
}
@include keyframes(statistics) {
0% {
height: 3px;
}
100% {
height: 9px;
}
}
@include keyframes(pie-rotations) {
0% {
}
10% {
}
30% {
}
45% {
}
70% {
}
77% {
}
}
@include keyframes(loading) {
0% {
}
50% {
}
100% {
}
}
@include keyframes(shard-flow) {
0% {
}
30% {
}
66% {
}
100% {
}
}
@include keyframes(shard-flow-black) {
0% {
}
30% {
}
100% {
}
}
@include keyframes(loading-spinning) {
0% {
}
100% {
}
}

Luccianos Main Css

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Luccianos Main Css

Uploaded by

Copyright:

Available Formats

@import "bourbon/bourbon";

@media only screen and (max-width: $smallscreensize) {

@media only screen and (max-width: $smallscreensize) {

@include transition(1s cubic-bezier($smootheaseout));

// @media (-webkit-min-device-pixel-ratio: 2), (min-resolution:

// IN PIECES TITLE POLYGONS

// END OF THE INTRODUCTION SEQUENCE AND PRELOADER PART

&::after { // THIS IS THE TEXTURE FOR SMASH

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {

.chromebrowser .shard, .preloader .shard {

width: 100%; height: 100%;

width: 20px; height: 100%;

.smash, .all-animals, .preloader-layer-2 {

// border: 3px solid green;

.content-info, .infos > *, .ctas > * {

.infos > p, .ctas > * {

.infos > p, .ctas > * {

// START OF STATISTICS PART

ul li, .chart .chart-bg, .chart-info, .chart-info p{

// ROTATION IS 7 DEG LESS

@for $i from 5 through 8 {

// ROTATION IS 7 DEG LESS

@for $i from 6 through 8 {

@for $i from 7 through 8 {

// @for $i from 7 through 8 {

.smash .stage, .all-animals .stage, .preloader-layer-2 { //FOR WHEN STAGE IS

background-size: 42px 50px;

@for $i from 1 through 8 {

// @include animation(throbbing 3s forwards infinite);

@for $i from 1 through 5 {

// START BIGGER THAN SMALL SCREEN ONLY

@for $i from 1 through 30 {

&:nth-child(31), &:nth-child(32), &:nth-child(33) {

@for $i from 1 through 30 {

#animalchanger.vaquita, .preloader #animalchanger.vaquita-shards {

-webkit-clip-path: polygon( 33.150% 19.623% ,47.950%

@for $i from 1 through 30 {

// START OF FOREST OWLET

#animalchanger.owl, .preloader #animalchanger.owl-shards {

// START OF ANIMAL ANIMATION STATES

// OVERALLING POSITIONAL CHANGES

// FISH GOING LEFT

// FISH GOING RIGHT

@for $i from 31 through 33 {

-webkit-clip-path: polygon(34.041% 25.2%,

@for $i from 31 through 33 {

@for $i from 1 through 7 {

&:nth-child(1), &:nth-child(2), &:nth-child(3),

&:nth-child(2), &:nth-child(3), &:nth-child(4),

@for $i from 1 through 30 {

// START OF MOBILE AND GENERAL MEDIA QUERIES

@media only screen and (max-width: 770px) {

@media only screen and (max-width: $smallscreensize) {

@media only screen and (max-width: $tinyscreenwidth) {

@media only screen and (max-width: 336px) {

@media only screen and (max-height: $smallscreenheight) {

@media only screen and (max-height: $tinyscreenheight) {

@media only screen and (min-width: $smallscreensize) {

@media only screen and (max-height: 470px) {

@media only screen and (max-width: $tinyscreenwidth) {

@media only screen and (min-height: 740px) {

@media only screen and (min-height: 810px) {

@media only screen and (min-width: $largescreenwidth) {

.content-info, .infos > , .ctas > {