textarea {
	line-height: 1.1em;
	height: 3.7em;
}

/* ---- Adobe Animate Styles ---- */
#animation_container, #canvas {
	background-color:rgba(255, 255, 255, 0.00);
}

#canvas, #dom_overlay_container {
	position: absolute;
	display: none;
}

#dom_overlay_container {
	pointer-events:none;
	overflow:hidden;
	left: 0px;
	top: 0px;
}

#animation_container, #dom_overlay_container { width:1280px; height:1040px }

/* ---- Help ---- */
#help {
	display: none;
	position: absolute;
	background-color: var(--violet-color);
	color: #FFFFFF;
	font-size: 1.4em;
	width: 35%;
	top: 79.2%;
	left: 34%;
	border-radius: 8px;
	text-align: center;
}

#help .arrow-bottom {
	border-top: 32px solid var(--violet-color);
	margin-top: 16.2%;
}

#help p { 	margin: 0.25em 0.5em; }

/* ---- Sliders ---- */
.rain-levels-slider,
.water-use-levels-slider {
	position: absolute;
	top: 89%;
	width: 20%;
}

.rain-levels-slider { left: 51.1%; }
.water-use-levels-slider { left: 32%; }

.marker-1 { left: 30px; }
.marker-2 { left: 91px; }
.marker-3 { left: 151px; }
.marker-4 { left: 215px; }

.level-slider-container {
	position: absolute;
	left: 0;
	right: 0;
	left: 16px;
	right: 22px;

	top: 32px;
	overflow: visible;
}

/* ---- Glowing Letters ---- */
.number-marker {
	position: absolute;
	font-size: 2.2em;
	font-weight: 900;
	animation: glowGlow 2s infinite;
	color: var(--yellow-color);
	text-shadow: 0 0 6px #000000;
	pointer-events: none;
}

#marker-1 { top: 80%;   left: 10%; }
#marker-2 { top: 47.2%; left: 19.8%; }
#marker-3 { top: 34.1%; left: 40.4%; }
#marker-4 { top: 36%;   left: 54.9%; }
#marker-5 { top: 44%;   left: 55%; }
#marker-6 { top: 68.3%; left: 61.2%; }
#marker-7 { top: 62%;   left: 88%; }

/* ---- Town Elements ---- */
#sidewalk-greenspace    { position: absolute; top: 25.3%; left: 24.1%;  height: 17.9%; }
#street                 { position: absolute; top: 35.3%; left: 12.1%;  height: 4.9%; }
#street-city            { position: absolute; top: 26.3%; left: -24.1%; height: 14.9%; }
#storm-drain-pipe       { position: absolute; top: 40%;   left: 39.6%;  height: 4.9%; }
#house-sewer-pipe       { position: absolute; top: 41.4%; left: 58.2%;  height: 3.1%; }
#sewage-treatment-pipes { position: absolute; top: 72%;   left: 53.2%;  height: 4.9%; }
#water-pipes            { position: absolute; top: 61.7%; left: 15.2%;  height: 13.9%; }
#supply-pipe            { position: absolute; top: 40.4%; left: 28.6%;  height: 18%; }
#treated-sewage         { position: absolute; top: 82.8%; left: 75.3%;  height: 8.3%; }

.house, .brownstone, .building, .filtration-plant, .lake, .river, .supply-pipe, .sewage-treatment-plant, .bush, .flower, .seagrass, .tree, .building, .litter,
.sewer-pipe, #sewer-pipe-town, #sewer-pipe-town-cso, #sewer-pipe-city, #sewer-pipe-city-cso,
.sewer-pipe-background, .sewer-pipe-background-town, .sewer-pipe-background-town-cso, .sewer-pipe-background-city, .sewer-pipe-background-city-cso,
.city-sidewalk, .storm-drain, .storm-drain-city { position: absolute; }

.city-sidewalk          { top: 25.3%;  left: 25.9%;  height: 17.9%; }
.house                  { top: 23%;    left: 49.8%;  height: 20%; }
.filtration-plant       { top: 40.1%;  left: 10.5%;  height: 23.1%; }
.lake                   { top: 65.5%;  left: -45.7%; height: 40.9%; }
.river                  { top: -11.9%; left: 72.1%;  height: 120%; }
.sewage-treatment-plant { top: 60.4%;  left: 43.3%;  height: 31.1%; }
.storm-drain            { top: 34.1%;  left: 39.2%;  height: 7.7%; }
.storm-drain-city       { top: 31.3%;  left: 72%;    height: 4.7%; }

.sewer-pipe.glow        { top: 40.8%;  left: 29.5%;  height: 22.6%; }
.sewer-pipe             { top: 44.1%;  left: 30%;    height: 19.7%; transform: rotate(-1deg); }
#sewer-pipe-town        { top: 33.5%;  left: 30%;    height: 30.1%; }
#sewer-pipe-town-cso    { top: 24.9%;  left: 30%;    height: 38.8%; }
#sewer-pipe-city        { top: 24.9%;  left: 30%;    height: 38.8%; }

.sewer-pipe-background          { top: 40.6%; left: 29.3%; height: 22.7%; transform: rotate(-1deg); }
.sewer-pipe-background-town     { top: 33.4%; left: 29.9%; height: 30.3%; }
.sewer-pipe-background-town-cso { top: 24.9%; left: 30%;   height: 38.8%; }
.sewer-pipe-background-city     { top: 24.9%; left: 30%;   height: 38.8%; }

.sewer-pipe-background, .sewer-pipe-background-town, .sewer-pipe-background-town-cso, .sewer-pipe-background-city {
	opacity: 0.75;
	filter: brightness(66%);
}

.flipped { transform: scaleX(-1) !important; }

#supply-pipe-town { top: 33.3%; left: 28.4%; height: 25.4%; }
#supply-pipe-city { top: 23.1%; left: 28.4%; height: 35.4%; }

.brownstone-01 { top: 14.4%; left: 46.8%; height: 19.7%; }
.brownstone-02 { top: 18.1%; left: 33.9%; height: 15.9%; }
#brownstone-03 { top: 22.8%; left: 25.6%; height: 20.7%; }

#building-01 { top: 4.7%;  left: 30.1%; height: 20.4%; }
#building-02 { top: 9.7%;  left: 55.8%; height: 23%; }
#building-03 { top: 14.3%; left: 61.2%; height: 28.2%; }

#bush-01 { top: 62.4%; left: -0.3%; height: 7%; }
#bush-02 { top: 30.4%; left: 37.7%; height: 4.3%; }
#bush-03 { top: 31.7%; left: 43.3%; height: 4.3% }
#bush-04 { top: 36.8%; left: 46.9%; height: 4.7%; }
#bush-05 { top: 34.8%; left: 67.7%; height: 4.9%; }
#bush-06 { top: 34.8%; left: 61.7%; height: 7%; }
#bush-07 { top: 31.9%; left: 78.6%; height: 4.5%; }
#bush-08 { top: 46.1%; left: 77.3%; height: 4.7%; }
#bush-09 { top: 81.4%; left: 80.8%; height: 6%; }
/* Greenspace Level 3 */
#bush-10 { top: 31.1%; left: 80.2%; height: 5%; }
#bush-11 { top: 32.4%; left: 75.2%; height: 5%; }
#bush-12 { top: 24.2%; left: 73.1%; height: 5%; }
/* Greenspace Level 4 */
#bush-13 { top: 19.8%; left: 14.6%; height: 4.9%; }
#bush-14 { top: 18.5%; left: 24.6%; height: 4.9%; }
#bush-15 { top: 16.6%; left: 21.6%; height: 4.8%; }

#flowers-01 { top: 36.1%; left: 59.2%; height: 6%; }
#flowers-02 { top: 33.3%; left: 62.6%; height: 5.3%; }
#flowers-03 { top: 33.1%; left: 70.9%; height: 5%; }
/* Greenspace Level 1 */
#flowers-04 { top: 14.9%; left: 33.4%; height: 4.8%; transform: rotate(-12deg); }
#flowers-05 { top: 13.5%; left: 38.1%; height: 4.8%; transform: /*scaleX(-1)*/ rotate(12deg); }
#flowers-06 { top: 15%; left: 35.3%; height: 4.6%; }
#flowers-07 { top: 15%; left: 39.9%; height: 5.1%; /*transform: scaleX(-1);*/ }
#flowers-08 { top: 14.8%; left: 42.5%; height: 4.8%; transform: rotate(42deg); }
#flowers-09 { top: 16.1%; left: 39.5%; height: 3.8%; }
#flowers-10 { top: 16.4%; left: 41%; height: 3.6%; transform: rotate(25deg); }
/* Greenspace Level 3 */
#flowers-11 { top: 31.5%; left: 74.2%; height: 3.8%; transform: scaleX(-1) rotate(25deg); }
#flowers-12 { top: 26.9%; left: 73.4%; height: 4.2%; transform: scaleX(-1) rotate(2deg); }
/* Greenspace Level 4 */
#flowers-13 { top: 17.6%; left: 27.4%; height: 3.8%; transform: rotate(16deg); }
#flowers-14 { top: 18.8%; left: 18%;   height: 3.7%; transform: rotate(10.9deg); }

#seagrass-01 { top: 57.9%; left: 4.5%;  height: 10%;  transform: rotatez(-32.7deg); }
#seagrass-02 { top: 58.3%; left: 5.6%;  height: 11%;  transform: rotatez( 17.3deg); }
#seagrass-03 { top: 26.9%; left: 83.5%; height: 10%;  transform: rotatez(37.3deg); }
#seagrass-04 { top: 25.6%; left: 80.4%; height: 9.8%; transform: rotatez(34.1deg) scaleX(-1); }

#seagrass-05 { top: 77.3%; left: 87.6%; height: 9%;   transform: rotate(5deg); }
#seagrass-06 { top: 75.6%; left: 84.5%; height: 9.3%; transform: rotatez(-8deg) scaleX(-1);}
#seagrass-07 { top: 78.5%; left: 84.1%; height: 7.3%; transform: rotatez(-8deg) scaleX(-1);}

#seagrass-08 { top: 40.6%; left: 80.8%; height: 9.3%;  transform: rotatez(-1deg); }
#seagrass-09 { top: 42.2%; left: 82.1%; height: 6.9%;  transform: rotatez(4deg); }
#seagrass-10 { top: 75.2%; left: 86.2%; height: 10.1%; transform: rotatez(4deg); }
#seagrass-11 { top: 74.8%; left: 82.4%; height: 11.6%; transform: rotatez(4deg) scaleX(-1); }
/* Greenspace Level 3 */
#seagrass-12 { top: 27.5%; left: 85.1%; height: 6.5%; transform: rotatez(2.7deg); }
#seagrass-13 { top: 28.3%; left: 86%; height: 7.4%; transform: rotatez(15.7deg); }
#seagrass-14 { top: 28.7%; left: 87.3%; height: 7.1%; transform: rotatez(34.1deg); }


#tree-01 { top: 29.4%; left: 19.9%; height: 17%; }
#tree-02 { top: 31.8%; left: 15.7%; height: 18%; }
#tree-03 { top: 20.7%; left: 45.4%; height: 14%; }
#tree-04 { top: 21.2%; left: 63.3%; height: 17%; }

#tree-05 { top: 26.3%; left: 9%;    height: 19%; }
#tree-06 { top: 24%;   left: 68.1%; height: 13%; }
#tree-07 { top: 22.3%; left: 71.5%; height: 14.6%; }

#tree-08 { top: 48%;   left: -4.4%; height: 19.9%; }
#tree-09 { top: 25%;   left: 15.1%; height: 15%; }
#tree-10 { top: 32%;   left: 23%;   height: 17.4%; }
#tree-11 { top: 22.1%; left: 40.2%; height: 12.8%; }
#tree-12 { top: 22.1%; left: 44.2%; height: 12.6%; }
#tree-13 { top: 20.2%; left: 56.5%; height: 20%; }

/* Greenspace Level 2 */
#tree-14 { top: 28.3%; left: 74.9%; height: 10.2%; }
#tree-15 { top: 24.2%; left: 77.1%; height: 9.2%; }
#tree-16 { top: 20.3%; left: 79%;   height: 11.8%; }
#tree-17 { top: 21.3%; left: 74%;   height: 10.2%; }
#tree-18 { top: 13.4%; left: 74.4%; height: 10.6%; }
#tree-19 { top: 14.2%; left: 70.9%; height: 12%; }

/* Greenspace Level 4 */
#tree-20 { top: 6.6%;  left: 25.8%; height: 11.5%; }
#tree-21 { top: 7.5%;  left: 22%;   height: 12.3%; }
#tree-22 { top: 13.3%; left: 18.6%; height: 10.4%; }

/* ---- Green Spaces ---- */
.greenspaces-level-0, .greenspaces-level-1, .greenspaces-level-2, .greenspaces-level-3, .greenspaces-level-4 { display: none; }

/* ---- UI ---- */
.level-boxes {
	color: var(--yellow-color);
	margin: 0.5em 0 0.5em 0.5em;
	text-transform: uppercase;
	width: 123px;
	display: inline-block;
}

.level-boxes .name {
	text-align: center;
	font-size: 1.25em;
	font-weight: bold;
}

.level {
	display: inline-block;
	height: 30px;
	width: 26px;
	cursor: pointer;
}

.level-holder { width: 120px; }
.level1.highlight, .level2.highlight, .level3.highlight, .level4.highlight { opacity: 1; }
.level1, .level2, .level3, .level4 {
	background-color: var(--yellow-color);
	opacity: 0.25;
	position: relative;
	width: 100%;
}
.level1 { top: 80%;  height: 20%;  }
.level2 { top: 70%;  height: 30%;  }
.level3 { top: 35%;  height: 65%;  }
.level4 { top: 0%;   height: 100%; }

.level-holder.selected-1 .level-1 { opacity: 1; }
.level-holder.selected-2 .level-2 { opacity: 1; }
.level-holder.selected-3 .level-3 { opacity: 1; }
.level-holder.selected-4 .level-4 { opacity: 1; }

.small-ui-button {
	height: 2.5em;
	top: -47%;
	position: relative;
	font-size: 1.1em;
}

.model-option {
	display: none;
	pointer-events: auto;
}

.small-ui-button:focus { outline: none; }

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

.click-button { width: 750px; }

#marker {
	position: absolute;
	width:30px;
	pointer-events: none;
}

.arrow-up {
	position: relative;
	width: 0;
	height: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-bottom: 10px solid var(--yellow-color);
}

.arrow-up.selected-1 { left: 6%; }
.arrow-up.selected-2 { left: 30%; }
.arrow-up.selected-3 { left: 55%; }
.arrow-up.selected-4 { left: 79%; }

.model-tool-holder {
	position: absolute;
	text-align: center;
/* 	top: 82.8%; */
	top: 89.3%;
	left: 1.2%;
	width: 100%;
	pointer-events: none;
}

/*
.storypage {
	position: fixed;
	left: 9%;
	top: 7%;
	width: 82%;
}

.for-centering {
	position: relative;
	left: 0.5em;
}

.storypage .green-box p {
	display: table-cell;
	vertical-align: middle;
	height: 4.7em;
	position: relative;
	width: 1018px;
}

.page-image {
	width: 97%;
	padding-bottom: 0.5em;
}

.prev-story-page-arrow, .next-story-page-arrow {
	position: absolute;
	top: 53.5%;
	height: 6%;
}

.prev-story-page-arrow {
	left: 11.5%;
	transform: scaleX(-1);
}

.next-story-page-arrow { right: 11.5%; }
*/
#litter-holder {
	position: absolute;
	left: 30%;
	top: 33.3%;
	width: 68%;
	height: 30%;
}

.litter { height: 25px; }
#trash-01 { top: 3px; left: 230px; }
#trash-02 { top: 0px; left: 130px; }
#trash-03 { top: 13px; left: 95px; }
#trash-04 { top: 62px; left: 85px; z-index: 2; }
#trash-05 { top: 58px; left: 233px; transform-origin: top center; transform: rotate(45deg); animation: blowingInWind 4s infinite alternate; z-index: 2;}

.zones { position: absolute; }

.lake-zone       { top: 68%;   left: -43.3%; width: 80%;   height: 35%; }
.drain-zone      { top: 35%;   left: 39.7%;  width: 3.3%;  height: 6.5%; }
.filtration-zone { top: 41%;   left: 11%;    width: 18.8%; height: 22%; }
.home-zone       { top: 23.5%; left: 50%;    width: 11%;   height: 18.9%; }
.sewer-zone      { top: 41%;   left: 30%;    width: 32%;   height: 22%; }
.treatment-zone  { top: 61%;   left: 44%;    width: 38%;   height: 29.5%; }
.river-zone      { top: 6%;    left: 74%;    width: 100%;  height: 100%; }

.lake-zone {
	-webkit-clip-path: polygon(0 47%, 8% 30%, 19% 18%, 28% 4%, 69% 0%, 87% 12%, 89% 27%, 100% 41%, 96% 63%, 79% 73.4%, 75% 86%, 54% 100%, 23% 100%, 9% 85%, 9% 72%, 0% 60%);
	clip-path: polygon(0 47%, 8% 30%, 19% 18%, 28% 4%, 69% 0%, 87% 12%, 89% 27%, 100% 41%, 96% 63%, 79% 73.4%, 75% 86%, 54% 100%, 23% 100%, 9% 85%, 9% 72%, 0% 60%);
}
.filtration-zone {
	-webkit-clip-path: polygon(0 5%,48% 0, 72% 17%, 98% 17%, 100% 78%, 24% 100%,0 71%);
	clip-path: polygon(0 5%,48% 0, 72% 17%, 98% 17%, 100% 78%, 24% 100%,0 71%);
}

.home-zone {
	-webkit-clip-path: polygon(0% 39%, 50% 0, 100% 39%, 96% 45%, 96% 100%, 8% 100%, 8% 46%);
	clip-path: polygon(0% 39%, 50% 0, 100% 39%, 96% 45%, 96% 100%, 8% 100%, 8% 46%);
}

.sewer-zone {
	-webkit-clip-path: polygon(0 14%, 30% 14%, 30% 0, 40% 0, 40% 14%, 88% 14%, 88% 6%, 94% 6%, 94% 14%, 100% 14%, 100% 50%, 100% 37%, 88% 37%, 88% 52%, 67% 97%, 55% 99%, 79.7% 45%, 79.7% 37%, 0 40%);
	clip-path: polygon(0 14%, 30% 14%, 30% 0, 40% 0, 40% 14%, 88% 14%, 88% 6%, 94% 6%, 94% 14%, 100% 14%, 100% 50%, 100% 37%, 88% 37%, 88% 52%, 67% 97%, 55% 99%, 79.7% 45%, 79.7% 37%, 0 40%);
}

.treatment-zone {
	-webkit-clip-path: polygon(0 6%,28% 0,59% 40%,73% 36%,100% 71%,100% 77%,50% 99%,44% 100%,17% 60%,17% 48%,13% 48%,0 30%);
	clip-path: polygon(0 6%,28% 0,59% 40%,73% 36%,100% 71%,100% 77%,50% 99%,44% 100%,17% 60%,17% 48%,13% 48%,0 30%);
}

.river-zone {
	-webkit-clip-path: polygon(27% 0,29% 0,34% 8%,27% 14%,32% 18%,30% 34%,36% 37%,35% 44%,29% 49%,47% 66%,100% 100%,30% 100%,1% 63%,0 53%,8% 42%,2% 38%,2% 34%,12% 29%,9% 25%,9% 22%,22% 18%,21% 14%,29% 6%);
	clip-path: polygon(27% 0,29% 0,34% 8%,27% 14%,32% 18%,30% 34%,36% 37%,35% 44%,29% 49%,47% 66%,100% 100%,30% 100%,1% 63%,0 53%,8% 42%,2% 38%,2% 34%,12% 29%,9% 25%,9% 22%,22% 18%,21% 14%,29% 6%);
}

#river-litter {
	position: absolute;
	left: 76%;
	top: 51.7%;
	width: 26.5%;
	height: 23%;
	/*
	background-color: #00FFFF80;
	border-radius: 50%;
	*/
}

:root {
	--drain-cover: 54px;
	--sewer-bottom: 118px;
	--outfall-bottom: 114px;
	--drain-underside: 88px;
	--sewer-inlet: 134px;
	--treatment-inlet: 330px;
	--treatment-inlet-bottom: 164px;
	--treatment-end-left: 233px;
	--treatment-end-bottom: 261px;
	--outfall-inlet: 510px;
	--outfall-inlet-left: 520px;
	--outfall-inlet-right: 585px;
	--outfall-inlet-end: 595px;
	--outfall-inlet-top: 98px;
	--outfall-end: 715px;
	--river-midway: 765px;
	--river-enter-x: 795px;
	--river-enter-y: 185px;
	/* Convert position to the #river-litter */
	--river-litter-x: 205px;
	--river-litter-y: 9px;
}

.from-left { left: 80px; }
.from-right { left: 230px; }
.from-top { top: 21px; }
.from-middle { top: 38px; }
.from-bottom { top: 54px; }

.from-redirect { left: var(--outfall-inlet); top: var(--sewer-bottom); }

@keyframes toSewer {
	100% { left: var(--sewer-inlet); top: var(--drain-cover); }
}

@keyframes downSewer {
	0%   { opacity: 1; top: var(--drain-cover);}
	1%   { opacity: 1; top: var(--drain-cover); } /* Curse you Safari!! */
	15%  { opacity: 0; top: var(--drain-cover); }
	20%  { opacity: 1; top: var(--drain-underside); }
	100% { top: var(--sewer-bottom); }
}

@keyframes toTreatmentPlant {
	from { left: var(--sewer-inlet); top: var(--sewer-bottom); }
	to   { left: var(--treatment-inlet); top: var(--sewer-bottom); }
}

@keyframes toOutfall {
	from { left: var(--treatment-inlet); top: var(--sewer-bottom); }
	to   { left: var(--outfall-inlet); top: var(--sewer-bottom); }
}

@keyframes backToTreatmentPlant {
	from { left: var(--outfall-inlet); top: var(--sewer-bottom); }
	to   { left: var(--treatment-inlet); top: var(--sewer-bottom); }
}

@keyframes overCso {
	0%   { left: var(--outfall-inlet); top: var(--sewer-bottom); }
	1%   { left: var(--outfall-inlet); top: var(--sewer-bottom); }  /* Curse you Safari!! */
	25%  { left: var(--outfall-inlet-left); top: var(--outfall-inlet-top); }
	75%  { left: var(--outfall-inlet-right); top: var(--outfall-inlet-top); }
	100% { left: var(--outfall-inlet-end); top: var(--outfall-bottom); }
}

@keyframes inOutfall {
	0%   { left: var(--outfall-inlet-end); top: var(--outfall-bottom); }
	1%   { left: var(--outfall-inlet-end); top: var(--outfall-bottom); }  /* Curse you Safari!! */
	100% { left: var(--outfall-end); top: var(--outfall-bottom); }
}

@keyframes outOfOutfallX {
	0%   { left: var(--outfall-end);  }
	1%   { left: var(--outfall-end);  }  /* Curse you Safari!! */
	33%  { left: var(--river-midway); }
	100% { left: var(--river-enter-x); }
}

@keyframes outOfOutfallY {
	0% { top: var(--outfall-bottom); }
	1% { top: var(--outfall-bottom); } /* Curse you Safari!! */
	100% { top: var(--river-enter-y); }
}

@keyframes downToTreatmentPlant {
	0% { left: var(--treatment-inlet); top: var(--sewer-bottom); }
	1% { left: var(--treatment-inlet); top: var(--sewer-bottom); }  /* Curse you Safari!! */
	20% { left: var(--treatment-inlet); top: var(--treatment-inlet-bottom); }
	100% { left: var(--treatment-end-left); top: var(--treatment-end-bottom); }
}

@keyframes blowingInWind {
	0% { transform: rotate(45deg); }
	1% { transform: rotate(55deg); }
	3% { transform: rotate(40deg); }
	5% { transform: rotate(45deg); }

	15% { transform: rotate(45deg); }
	16% { transform: rotate(55deg); }
	18% { transform: rotate(40deg); }
	20% { transform: rotate(55deg); }
	25% { transform: rotate(45deg); }

	40% { transform: rotate(45deg); }
	41% { transform: rotate(55deg); }
	43% { transform: rotate(40deg); }
	45% { transform: rotate(45deg); }

	75% { transform: rotate(45deg); }
	76% { transform: rotate(55deg); }
	78% { transform: rotate(40deg); }
	80% { transform: rotate(55deg); }
	85% { transform: rotate(45deg); }
}

@keyframes toRiverLitter {
	100% { left: var(--river-litter-x); top: var(--river-litter-y); }
}

@keyframes bobbing {
	0%, 100% { 	transform: translateY(0); }
	50% { transform: translateY(5px); }
}
@keyframes littleBobbing {
	0%, 100% { 	transform: translateY(0); }
	50% { transform: translateY(5px); }
}
/* ---- Animation ---- */
.rain-01 { background: url(../images/model/rain_01.png); }
.rain-02 { background: url(../images/model/rain_02.png); }
.rain-03 { background: url(../images/model/rain_03.png); }

.rain-01, .rain-02, .rain-03 {
	display: none;
	position: absolute;
	top: 0px;
	left: -100%;
	height: 110%;
	width: 300%;
	pointer-events: none;
	animation: rain 0.3s linear infinite;
}
@keyframes rain {
	0% {background-position: 0px 0px;}
	100% {background-position: 150px 400px;}
}

.glow { animation: glowGlow 2s infinite; }
@keyframes glowGlow {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.8; }
}

.glow.clicked { animation: none; }

.flash-in {
	-webkit-animation: brightness 0.8s linear;
	animation: brightness 0.8s linear;
}

.flash-out {
	-webkit-animation: brightness 0.8s linear reverse;
	animation: brightness 0.8s linear reverse;
}

@keyframes brightness {
	0%, 100%  {
		-webkit-filter: brightness(none);
		filter: brightness(none);
	}
	5% {
		-webkit-filter: brightness(3) hue-rotate(180deg);
		filter: brightness(3) hue-rotate(180deg);
	}
	25% {
		-webkit-filter: brightness(2) hue-rotate(0deg);
		filter: brightness(2) hue-rotate(0deg);
	}
}