#wavy-bay-map,
#wavy-bay-holder,
#oyster-close-up-holder,
.ending-box {
	user-select: none;
}

.green-box {
	left: 9%;
	top: 2%;
	width: 82%;
	height: 10%;
	line-height: 1.1em;
}

.solid-light-purple-box {
	position: fixed;
	top: 33%;
	width: 76%;
	left: 12%;
}

#page-4 .solid-light-purple-box {
	top: 13%;
	left: 10%;
	width: 80%;
}

#page-6 .solid-light-purple-box {
	width: 65%;
	left: 17.5%;
}

#page-8 .solid-light-purple-box { top: 40%; }

#wavy-bay, #city, #ground {
	position: absolute;
	top: 14%;
	left: 9%;
	width:1050px;
	height:346px;
	border: 0.5em solid white;
	border-radius: 0.5em;
}

#button-holder {
	text-align: center;
	width: 100%;	position: absolute;
	top: 62%;
	font-size: 1.5em;
}

#button-holder-2 {
	text-align: center;
	width: 100%;
	position: absolute;
	top: 72%;
	font-size: 1.5em;
}
#planton-holder,
#animal-holder,
#animal-holder-stage-3,
#sediment-holder,
#oyster-close-up-holder {
	position: absolute;
	overflow: hidden;
	width: 1020px;
	height: 415px;
	top: 0;
	left: 0;
}

#rock {
	position: absolute;
	left: 21%;
	top: 82%;
	width: 38%;
}

#oyster-close-up-holder {
	border: 0.25em solid #fff;
	border-radius: 0.5em;
	top: 16.5%;
	left: 10.3%;
}

#oyster-back, #oyster-body, #oyster-front, #oyster-cilia { position: absolute; }

#oyster-back,
#oyster-body,
#oyster-front {
	width: 44%;
	left: 27.1%;
	top: 2.6%;
	transform: rotate(50deg);
}

.organism.stage-2 {
	position: absolute;
	width: 30%;
	left: 459px;
	top: 187px;
}

.organism.stage-3 {
	position: absolute;
	width: 5%;
	left: 649px;
	top: 317px;
}

#oyster-back.stage-2,
#oyster-body.stage-2,
#oyster-front.stage-2 {
	width: 21%;
	left: 38.1%;
	top: 13.6%;
}

#oyster-reef-small {
	display: none;
	position: absolute;
	width: 155%;
	top: -201.3%;
	left: -16%;
}

#oyster-cilia {
	width: 24.6%;
	left: 48.8%;
	top: 30.2%;
	transform: rotate(50deg);
}

#oyster-cilia.stage-2 {
	width: 11.6%;
	left: 48.3%;
	top: 26.7%;
}

#clean-water-oyster ,
#dirty-water {
	top: -8%;
	width: 155%;
	left: -5%;
	position: absolute;
}

#clean-water-oyster { animation: circularWaves 4s linear infinite; }
#dirty-water { animation: circularWaves 5s linear infinite; }

#clean-water-oyster.stage-2 ,
#dirty-water.stage-2 {
	width: 125%;
}

#dirty-water { opacity: 0.9; }

.ui-button { position: unset; }

#sediment {
	position: absolute;
	width: 7%;
	left: 512px;
	top: 140px;
	transition: 0.7s ease-out;
	display: none;
}

#sediment.stage-2 {
	width: 3%;
	left: 512px;
	top: 112px;
}

.plankton, .plankton-eaten {
	position: absolute;
	width: 2%;
}

.dirt, .dirt-eaten {
	position: absolute;
	width: 1.5%;
}

.plankton { animation: planktonBounce 1s linear infinite; }

.plankton.stage-2, .plankton-eaten.stage-2 { width: 1%; }
.dirt.stage-2, .dirt-eaten.stage-2 { width: 0.9%; }

/* ---- Stage 3 ---- */
.oyster-stage-3 {
	position: absolute;
	width: 2.2%;
	left: 654px;
	top: 315px;
	transform: rotate(50deg);
}

.oyster-reef-stage-3 {
	position: absolute;
	width: 17%;
}

.reef-1 {
	top: 217px;
	left: 595px;
}
.reef-2 {
	top: 247px;
	left: 475px;
}
.reef-3 {
	top: 257px;
	left: 689px;
}

.eelgrass { position: absolute; }
#eelgrass-01 { width: 6%; left: 58%; top: 85%; }
#eelgrass-02 { width: 6%; left: 44%; top: 81%; }
#eelgrass-03 { width: 6%; left: 50%; top: 73%; }
#eelgrass-04 { width: 6%; left: 46%; top: 72%; }
#eelgrass-05 { width: 6%; left: 41%; top: 70%; }

#seagrass-01 { width: 4.6%; left: 15%;   top: 29%;   transform: rotate(17deg); }
#seagrass-02 { width: 4.4%; left: 16.1%; top: 32.2%; transform: rotate(38deg); }
#bush-01     { width: 7.3%; left: 9.4%;  top: 34.3%; transform: rotate(6deg); }

#dunegrass { width: 18.50%; left: 11%; top: 23.2%; }

#bush-02 { width: 7.7%; left: 5.4%; top: 31.3%; }
#tree-01 { width: 8.1%; left: 8.6%; top: 13.7%; }
#tree-02 { width: 7.8%; left: 2.6%; top: 19.7%; }

#seal {
	position: absolute;
	left: 1000px;
	top: 190px;
	width: 11%;
	animation: fishBounce 2s infinite;
	transition: 2s ease-in;
}

@keyframes eaten0 {
	from { left: 578px; top: 189px; opacity: 1; }
	to   { left: 441px; top: 317px; opacity: 0; }
}

@keyframes eaten1 {
	from { left: 604px; top: 185px; opacity: 1; }
	to   { left: 441px; top: 317px; opacity: 0; }
}

@keyframes eaten2 {
	from { left: 631px; top: 200px; opacity: 1; }
	to   { left: 441px; top: 317px; opacity: 0; }
}

@keyframes eaten3 {
	from { left: 655px; top: 229px; opacity: 1; }
	to   { left: 441px; top: 317px; opacity: 0; }
}

@keyframes eaten4 {
	from { left: 634px; top: 274px; opacity: 1; }
	to   { left: 441px; top: 317px; opacity: 0; }
}

@keyframes eaten5 {
	from { left: 589px; top: 302px; opacity: 1; }
	to   { left: 441px; top: 317px; opacity: 0; }
}

@keyframes eaten6 {
	from { left: 541px; top: 314px; opacity: 1; }
	to   { left: 441px; top: 317px; opacity: 0; }
}
/*
@keyframes eaten7 {
	to   { left: 441px; top: 317px; opacity: 0; }
	from { left: 546px; top: 389px; }
	to   { left: 522px; top: 389px; }
}
*/
@keyframes crab1 {
	0%     { left: 422px; top: 187px; }
	1%     { left: 422px; top: 187px; }
	100%   { left: -200px; }
}

@keyframes crab2 {
	0%, 1% { left: 459px;  top: 150px;  }
	/* 30%    { left: 550px;  top: 200px; } */
	100%   { left: 1010px; top: 300px; }
}

@keyframes fish1 {
	0%   { left: 570px; top: 188px;  transform: scaleX(-1); }
	1%   { left: 570px; top: 188px;  transform: scaleX(-1); }
	100% { left: 910px; top: -100px; transform: scaleX(-1); }
}

@keyframes fish2 {
	0%   { left: 410px;  top: 130px; }
	1%   { left: 410px;  top: 130px; }
	100% { left: -200px; top: 0; }
}

@keyframes fishBounce {
  0%, 1%, 50%, 100% { margin-top: 0; }
  25% { margin-top: -10px; }
  75% { margin-top: -7px; }
}

@keyframes planktonBounce {
  25%    { margin-left: 1px;  margin-top: 0;    }
  55%    { margin-left: 0;    margin-top: 1px;  }
  75%    { margin-left: -1px; margin-top: 0;    }
  100%   { margin-left: 0;    margin-top: -1px; }
}

/* ---- Stage 3 animals ---- */
@keyframes fish3 {
	0%   { left: 649px; top: 317px; }
	1%   { left: 649px; top: 317px; }
	100% { left: 580px; top: 287px; }
}

@keyframes fish4 {
	0%   { left: 649px; top: 317px; transform: scaleX(-1); }
	1%   { left: 649px; top: 317px; transform: scaleX(-1); }
	100% { left: 720px; top: 270px; transform: scaleX(-1); }
}

@keyframes fish5 {
	0%   { left: 649px; top: 317px; }
	1%   { left: 649px; top: 317px; }
	100% { left: 578px; top: 250px; }
}

@keyframes fish6 {
	0%   { left: 649px; top: 240px; }
	1%   { left: 649px; top: 240px; }
	100% { left: 608px; top: 210px; }
}

@keyframes crab3 {
	0%, 1% { left: 649px; top: 317px; }
	100%   { left: 760px; top: 337px; }
}

@keyframes crab4 {
	0%, 1% { left: 649px; top: 317px; }
	100%   { left: 559px; top: 317px; }
}

@keyframes crab5 {
	0%, 1% { left: 649px; top: 240px; }
	11%    { left: 649px; top: 210px; }
	100%   { left: 693px; top: 230px; }
}

@keyframes flounder1 {
	0%   { left: 572px; top: 360px; transform: scaleX(-1); }
	1%   { left: 572px; top: 360px; transform: scaleX(-1); }
	100% { left: 745px; top: 360px; transform: scaleX(-1); }
}

@keyframes octopus1 {
	0%   { left: 504px; top: 326px; transform: scaleX(-1) rotate(0deg); }
	1%   { left: 504px; top: 326px; transform: scaleX(-1) rotate(0deg); }
	11%  { left: 500px; top: 316px; transform: scaleX(-1) rotate(3deg); }
	100% { left: 494px; top: 306px; transform: scaleX(-1) rotate(15deg); }
}

@keyframes fishBounceStage3 {
  0%, 1%, 50%, 100% { margin-top: 0; }
  25% { margin-top: -3px; }
  75% { margin-top: -1px; }
}

@keyframes crabBounce {
  0%, 1%, 50%, 100% { margin-top: 0; }
  25%, 75% { margin-top: -4px; }
}

@keyframes crabBounceStage3 {
  0%, 1%, 50%, 100% { margin-top: 0; }
  25%, 75% { margin-top: -2px; }
}

@keyframes flounderBounce {
  0%, 1%, 50%, 100% { margin-top: 0; }
  25% { margin-top: -2px; }
  75% { margin-top: 2px; }
}

@keyframes circularWaves {
	from { transform: rotate(0deg) translateX(2%) rotate(0deg); }
	to   { transform: rotate(360deg) translateX(2%) rotate(-360deg); }
}

@keyframes sedimentSpit {
	0%, 1% { left: 567px; top: 140px; }
	10%     { left: 686px; top:  25px; }
	100%   { left: 686px; top: 410px; }
}


@keyframes sedimentSpitStage2 {
	0%, 1% { left: 538px; top: 112px; }
	20%    { left: 567px; top:  80px; }
	100%   { left: 567px; top: 210px; }
}

.answer-marker {
	border-radius: 50%;
	position: absolute;
	height: 37px;
	margin: 8px 20px;
}

/* ---- Overrides ---- */
.click-button {
	width: 500px;
}