/*********************/
/*grid.css stylesheet*/
/*********************/

/*all padding and borders added will cut into the width, not add to it*/
* {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    box-sizing: border-box;
}

/*General Styles*/

body{}

.scene{
	position: relative;
	width: 960px;
    height: 600px;
    margin: 35px auto 35px auto;
   	border: 35px ridge gold;
   	box-shadow: 4px .5 black;
	background: linear-gradient(90deg, white, #E3F0FF),
				linear-gradient(90deg, white, #E3F0FF);
	overflow: hidden;
}

.layerable div{
	position: absolute;
}

/*Endgame Styles*/


#endgame{
	position: relative;
	height: 100%;
	width: 100%;
}

div.reset {
	position: relative;
	margin: auto;
	text-align: center;
	height: 100px;
	width: 200px;
	background-color: silver;
	border-radius: 25px;
	border: 4px groove rgb(136, 136, 136);
	z-index: 3000;
	transition: all .5s;
}
div.reset a{
	text-decoration: none;
	font: 3.5em "myriad-pro", sans-serif;
	line-height: 1.7em; /*to center the text vertically*/
	height: 100px;
	width: 200px;
}

div.reset:hover{
	background-color: rgb(226, 226, 226);
	border-color: rgb(200, 200, 200);
}


h1, h2 {
	margin: auto;
	text-align: center;
	font: 4em sans-serif;
	padding-top: 80px;
	color: black;
}

h2{
	padding: 20px;
	font-size: 2.5em;
	font-style: italic;
}


.invisible{
	display: none;
}

/*General Target Grid Styles*/

[class*="Target"]{
	border-radius: 25%;
	z-index: 1050;
	position: absolute;
/*	background-color: green;*/
	opacity: 0;
}

.lgTarget{
	height: 300px;
	width: 300px;
}

.medTarget{
	height: 200px;
	width: 200px;
}

.smTarget{
	height: 150px;
	width: 150px;
}

.tinyTarget{
	height: 50px;
	width: 50px;
}

/*Large Targets*/

.lgTarget.one{
	top: 300px;
}

.lgTarget.two{
	top: 0px;
	left: 655px;
}

.lgTarget.three{
	top: 0px;
	left: 300px;
}

/*Medium Targets*/

.medTarget.one{
	left: 100px;
	top: 0px;
}

.medTarget.two{
	top: 400px;
	left: 750px;
}

.medTarget.three{
	top:350px;
	left: 325px;
}

.medTarget.four{
	top: 250px;
	left: 550px;
}

/*Small Targets*/

.smTarget.one{
	top: 450px;
	left: 550px;
}

.smTarget.two{
	top: 150px;
	left: 0px;
}

.smTarget.three{
	top: 200px;
	left: 200px;
}


/*Tiny Targets*/

.tinyTarget.two{
	top: 350px;
	left: 850px;
}

.tinyTarget.one{
	top: 0px;
	left: 0px;
}


/****************************/
/*wavesClouds.css stylesheet*/
/****************************/


/*wave selectors*/

[id*="wave"]{
	top: 0px;
	right: 0px;
	width: 100%;
	height: 100%;
	opacity: .8;
}

#wave1, #wave5, #wave8{
	background: url(../svg/wave_topPointShort.svg) no-repeat;
	background-size: 180%, 180%;
	animation: firstWave 2s linear infinite;
	z-index: 1000;
}

#wave2, #wave4, #wave7{
	background: url(../svg/wave_topPointTall.svg) no-repeat;
	background-size: 180%, 180%;
	animation: secondWave 3s linear infinite;
	z-index: 900;
}

#wave3, #wave6{
	background: url(../svg/wave_topPointGiant.svg) no-repeat;
	background-size: 180%, 180%;
	animation: thirdWave 4s linear infinite;
	z-index:800;
}

#wave4{
	animation: fourthWave 5s linear infinite;
	z-index: 700;
}

#wave5{
	animation: fifthWave 7s linear infinite;
	z-index: 500;
}

#wave6, #wave7, #wave8{
	background-size: 130%;
	animation: sixthWave 1s linear infinite;
	z-index: 400;
}

#wave7{
	animation: seventhWave 2s linear infinite;
	z-index: 300;
}

#wave8{
	animation: eighthWave 3s linear infinite;
	z-index: 200;
}

/*keyframes*/

@keyframes firstWave{
	0%{background-position: -8px 480px}
	100%{background-position: -650px 480px}
}

@keyframes secondWave{
	0%{background-position: -8px 400px}
	100%{background-position: -650px 400px}
}

@keyframes thirdWave{
	0%{background-position: -8px 320px}
	100%{background-position: -650px 320px}
}

@keyframes fourthWave{
	0%{background-position: -8px 290px}
	100%{background-position: -650px 290px}
}


@keyframes fifthWave{
	0%{background-position: -8px 270px}
	100%{background-position: -650px 270px}
}

/*shorter loop*/

@keyframes sixthWave{
	0%{background-position: -8px 220px}
	100%{background-position: -160px 220px}
}

@keyframes seventhWave{
	0%{background-position: -8px 200px}
	100%{background-position: -160px 200px}
}

@keyframes eighthWave{
	0%{background-position: -8px 180px}
	100%{background-position: -160px 180px}
}


/*cloud selectors*/

[id*="cloud"]{
	position: absolute;
	opacity: .9;
	z-index: 1;
}

#cloud1{
	top: 20px;
	left: 100px;
	animation: cloudFloat 50s infinite linear;
}

#cloud2{
	top: -500px;
	left: -1000px;
	animation: cloudFloat 40s infinite linear;
}

#cloud3{
	top: 10px;
	left: -300px;
	animation: cloudFloat 45s 5s infinite linear;
}

#cloud4{
	top: -550px;
	left: -1200px;
	animation: cloudFloat 35s 8s infinite linear;
}


/*cloud keyframes*/

@keyframes cloudFloat{
	50% { transform: translateX(1400px);
		 opacity: .9;}
	51% { opacity: 0;}
	60% {  transform: translateX(-1400px);
			opacity: 0;}
	61% { opacity: .9;}
}




/**************************/
/*fishBirds.css stylesheet*/
/**************************/


[class*="ffish"], [id*="Container"], [class*="pirhana"], [class*="gull"], [id*="gullContainer"], .makeFly, .flip{
	position: absolute;
}

.flip{
	/*position: absolute;*/
	transform: scaleX(-1);
	z-index: 300;
}


/*active gull positioning*/
.makeFly {
 	animation: turbulence .4s infinite;
}


/*gull containers*/

[id*="gullContainer"]{
	z-index: 300;
	perspective: 800px;
 	perspective-origin: 50%;
}

[class*="WingContainer"]{
	height: 100px;
	width: 100px;
	transform-origin: 50% 113%;
	transform-style: preserve-3d;
	backface-visibility: hidden;
	transition: all 1s ease-in;
	animation: flap 8s infinite;
}

#gullContainer2 [class*="WingContainer"]{
	animation: flap 6s infinite;
}

#gullContainer3 [class*="WingContainer"],
#gullContainer4 [class*="WingContainer"]{
	animation: fastFlap .4s infinite;
}

#gullContainer5 [class*="WingContainer"]{
	animation: fastFlap .3s infinite;
}


#gullContainer1{
	top: 100px;
	left: 930px;
	/*animation: fly 7s 5s infinite;*/
}

#gullContainer2{
	top: -500px;/*from 150*/
	left: 50px;/*from 50*/
/*	animation: fly 9s 3s infinite;*/
}

#gullContainer3, #gullContainer4, #gullContainer5{
	opacity: 1;
}

#gullContainer3{
	top: -30px;
	left: 600px;
	transform: rotate(-80deg);
}
#gullContainer4{
	top: -600px;/*from 30*/
	left: 100px;/*from 100*/
	transform: rotate(-30deg);
}
#gullContainer5{
	top: -30px;
	left: 920px;
	transform: rotate(-60deg);
}


/*gull components*/

.gull_body{
	z-index: 0;
}

.gull_frontWingContainer{
	top: -91px;
	left: 70px;
}

.gull_backWingContainer{
	top: -85px;
	left: 52px;
}

.gull_topWing{

}

.gull_bottomWing{
}

.gull_frontWingContainer .gull_bottomWing, .gull_backWingContainer .gull_topWing
/* the initially visible "front" side*/
{
	z-index: 100;

}

.gull_frontWingContainer .gull_topWing, .gull_backWingContainer .gull_bottomWing
/*the initially-hidden "back" side*/
{
	z-index: -100;
	transform: translateZ(-1px);
}



.gull_backWingContainer .gull_topWing, .gull_backWingContainer .gull_bottomWing{
	transform: rotateZ(-10deg);
	left: -10px;
	top: -5px;
}


/*gull keyframes*/

@keyframes fly {
	/*this only works when its above the other sets of keyframes...?*/
	0% {opacity: 1;}
	30% {transform: translateX(-1200px);
		 opacity: 1;}
	31% {opacity: 0;}
	100% {opacity: 0;}
}

@keyframes gullOneSave{
	0%  {opacity: 1;
		 z-index:800;}
	50% {transform:translate(-350px, 200px); }
	99% {transform: translate(-400px, -500px);
		 opacity: 1;
		 z-index:800;}
	100% {opacity: 0;}
}

@keyframes gullTwoSave{
	0%  {opacity: 1;
		 z-index:-800;}
	50% {transform:translate(-800px, 300px); }
	99% {transform: translate(-650px, -500px);
		 opacity: 1;
		 z-index:800;}
	100% {opacity: 0;}
}

@keyframes gullThreeSave{
	0%  {opacity: 1;
		 z-index:800;}
	50% {transform:translate(-50px, 400px); }
	99% {transform: translate(-100px, -200px);
		 opacity: 1;
		 z-index:800;}
	100% {opacity: 0;}
}

@keyframes gullFourSave{
	0%  {opacity: 1;
		 z-index:800;}
	50% {transform:translate(-700px, 400px); }
	99% {transform: translate(-650px, -200px);
		 opacity: 1;
		 z-index:800;}
	100% {opacity: 0;}
}

@keyframes gullFiveSave{
	0%  {opacity: 1;
		 z-index:800;}
	50% {transform:translate(-300px, 400px); }
	99% {transform: translate(-350px, -200px);
		 opacity: 1;
		 z-index:800;}
	100% {opacity: 0;}
}

@keyframes boatSave{
	0% {opacity: 1;}
	40%{transform:translate(0px, -10px) rotate(5deg);}
	45%{tranform: translate(-10px, 0px) rotate(0deg);}
	50%{transform:translate(0px, 10px) rotate(-5deg);}
	99% {transform: translate(-10px, -550px);
		opacity: 1;}
	100% {opacity: 0;}
}

@keyframes flap{
	0%, 18% {transform: rotateX(0deg);}
	9%, 27% {transform: rotateX(15deg);}
	35%, 45%, 55%, 65% {transform: rotateX(130deg);}
	40%, 50%, 60% {transform: rotateX(30deg);}
	100% {transform: rotateX(0deg);}
}

@keyframes fastFlap{
	0%, 100% {transform: rotateX(30deg);}
	50%	 {transform: rotateX(150deg);}
}

@keyframes turbulence
{/*can't use transform property in a comma-separated list of
animations, so translateX won't work here.*/
	0%, 50%, 100%   {transform: translateY(3px);}
	25%, 75%  {transform: translateY(-3px);}
}



/*flying fish positioning*/


/*	the three absolutely-positioned containers need a height/width
set to make trasform-origin & border/bg colors work.  Nested Images
seem to be set to the width of their contents by default, and don't
need this extra step.
For some reason this isn't selecting the front container, hence its inclusion*/
[class*="ffish"] [class*="Container"], .ffish_FrontContainer, [id*="flyingFish"]{
	height: 100px;
	width: 100px;
}

.ffish_FrontContainer{
	transform-origin: 0% 0%;
	transform: rotate(-20deg);
}

.ffish_MiddleContainer{
	top: 18px;
	left: 45px;
	z-index: 30;
	transform-origin: 15% 10%;
	transform: rotate(10deg);
}

.ffish_BackContainer{
	top: 40px;
	left: 80px;
	z-index: 30;
	transform-origin: 8% 10%;
	transform: rotate(10deg);
}

.ffish_head{
	z-index: 80;
}
.ffish_frontfin{
	top: 40px;
	left: 50px;
	z-index: 100;
	transform-origin: 0 0;
	transform: rotate(60deg);
}
.ffish_backfin{
	top: 20px;
	left: 65px;
	z-index: 40;
	transform-origin: 0 0;
	transform: rotate(-90deg);
}

.ffish_body{
	z-index: 30;
}

.ffish_tail{
	z-index: 70;
}
.ffish_frontdorsal{
	top:20px;
	left:0px;
	transform-origin: 0 0;
	transform: rotate(60deg);
	z-index: 90;
}
.ffish_backdorsal{
	top: 0px;
	left: 15px;
	transform-origin: 0 0;
	transform: rotate(-90deg);
	z-index: 50;
}


[id*="flyingFish"]{
	transform-origin: 500% 3500%;
}

#flyingFish1{
	top:300px;
	left:1000px;
	z-index: 860;
}

#flyingFish2{
	top:-500px;
	left:500px;
}

.ffish_MiddleContainer, .ffish_BackContainer{
	animation: fishTurbulence .5s linear infinite;
}

.ffish_backfin, .ffish_backdorsal{
	animation: backFinFlap .25s linear infinite;
}

.ffish_frontfin, .ffish_frontdorsal{
	animation: frontFinFlap .25s linear infinite;
}

/*flying fish keyframes*/

@keyframes fishFly{
	0% {transform: rotate(0deg);}
	100% {transform: rotate(-90deg);}
}

@keyframes fishTurbulence{
	0%, 100%{transform: rotate(5deg);}
	50%{transform: rotate(-5deg);}
}

@keyframes frontFinFlap{
	0%, 100%{transform: rotate(60deg);}
	50%{transform: rotate(40deg);}
}

@keyframes backFinFlap{
	0%, 100%{transform: rotate(-90deg);}
	50%{transform: rotate(-70deg);}
}



/*pirhana positioning*/

#pirhanaContainer1{
	top: 600px;
	left: 70px;
	z-index: 850;
}

#pirhanaContainer2{
	top: 600px;
	left: 250px;
	z-index: 650;
}
#pirhanaContainer3{
	top: 600px;
	left: 450px;
	z-index: 550;
}
#pirhanaContainer4{
	top: 600px;
	left: 630px;
	z-index: 750;
}

.pirhana_body{
	left: 0px;
	top:80px;
}

.pirhana_jaw{
	top: 30px;
	left:70px;
	transform-origin: bottom left;
	transform: rotate(-10deg);
	animation: jawChomp .5s cubic-bezier(.16, .93, .99, 1.01) infinite;
}
.pirhana_head{
	top: 10px;
	left:15px;
	transform-origin: bottom right;
	transform: rotate(10deg);
	animation: headChomp .5s cubic-bezier(.16, .93, .99, 1.01) infinite;
}
.pirhana_fin{
	top: 100px;
	left:100px;
}

/*pirhana keyframes*/

@keyframes headChomp{
	50% {transform: rotate(-20deg);}
}

@keyframes jawChomp{
	50% {transform: rotate(25deg);}
}

@keyframes pirhanaLowJump{
	0%, 30%, 60%, 90%
		 {top: 600px;
		 animation-timing-function: cubic-bezier(.02, 1.01, .99, 1.01);}
	10%, 70%
		{top: 150px;
		 animation-timing-function: cubic-bezier(.69, .01, .88, .29);}
	20%, 80% {top: 600px;}
}

@keyframes pirhanaHighJump{
	0%, 30%, 60%, 90% {top: 600px;
		 animation-timing-function: cubic-bezier(.02, 1.01, .99, 1.01);}
	10%, 70% {top: 50px;
		 animation-timing-function: cubic-bezier(.69, .01, .88, .29);}
	20%, 80% {top: 600px;}
}




/********************************/
/*boatSharkBubble.css stylesheet*/
/********************************/

[id*="man"], .shark{
	position: absolute;
}

/*Boat guy positioning*/

#manContainer{
	top: 120px;
	left: 445px;
	z-index: 600;
	transform-origin: 100px 350px;
	transform-origin: 100px 350px;
	animation: boatBounce 3s linear infinite;
}

#man_boat{
	height:350px;
	width: 350px;
}
#man_rightArm, #man_leftArm{
	height: 90px;
	width: 90px;
	z-index: 605;
}


#man_rightArm{
	top:130px;
	left:15px;
	transform-origin:70% 2%;
	animation: armWaveRight 5s linear infinite;
}

#man_leftArm{
	top:130px;
	left:98px;
	transform-origin:30% 2%;
	animation: armWaveLeft 5s linear infinite;
}

#man_stache{
	height: 50px;
	width: 50px;
	top: 75px;
	left: 70px;
	animation: moustache 5s linear infinite;
}

#man_mouth{
	opacity: 0;
	height: 50px;
	width: 30px;
	top: 73px;
	left: 85px;
	animation: yellMouth 5s linear infinite;
}

#man_eyeOpen{
	height: 40px;
	width: 40px;
	top: 60px;
	left: 78px;
}


/*boat guy keyframes*/

@keyframes boatBounce{
	25%{transform:translateY(-10px) rotate(5deg);}
	50%{tranform: translateY(0px) rotate(0deg);}
	75%{transform:translateY(10px) rotate(-5deg);}
}

@keyframes armWaveRight{
	0%, 80%, 100% {transform: rotate(0deg);}
	10%, 30%, 50%{transform: rotate(2deg);}
	20%, 40%{transform: rotate(0deg);}
	60%{transform: rotate(150deg);}
	70%{transform: rotate(130deg);}
	80%{transform: rotate(140deg);}
	90%{transform: rotate(130deg);}
}

@keyframes armWaveLeft{
	0%, 100% {transform: rotate(0deg);}
	10%, 30%, 50%{transform: rotate(-2deg);}
	20%, 40%{transform: rotate(0deg);}
	60%{transform: rotate(-150deg);}
	70%{transform: rotate(-130deg);}
	80%{transform: rotate(-140deg);}
	90%{transform: rotate(-130deg);}
}

@keyframes moustache{
	0%, 24%, 44%, 100% {transform: translateY(0px) rotate(0deg);}
	20%, 22%, 40%, 42% 	{transform: rotate(-8deg);}
	21%, 23%, 41%, 43% 	{transform: rotate(8deg);}
	75%  {transform: translateY(-8px);}
	80%	{transform: translateY(-8px);}
}

@keyframes yellMouth{
	60% {opacity: 0; transform: translateY(0);}
	62% {opacity: 1; transform: translateY(3px);}
	90% {opacity: 1; transform: translateY(3px);}
	92% {opacity: 0; transform: translateY(0);}
}

/*Shark Attack!!!! */

.shark {
	top: 80px;
	left: 70px;
	z-index: 600;
	transform-origin: 50% 50%;
	transform: rotate(15deg);
}

/*Shark Atack Keyframes!!!*/

@keyframes sharkAttack{
	0% {animation-timing-function: cubic-bezier(.27, .81, .53, 1);}

	50% {transform: translate(130px, -590px) rotate(-15deg);
		 animation-timing-function: cubic-bezier(.58, .07, .63, 1);}

	100% {transform: translate(330px, 0px) rotate(5deg);}

}

@keyframes boatSink
/*has to be 1/6th the time of sharkAttack, + a 5/6th delay, ish*/
{
	0%, 50%, 80% {transform:translateY(-10px) rotate(5deg);}
	20%, 40%, 60% {tranform: translateY(0px) rotate(0deg);}
	30%, 70% {transform:translateY(10px) rotate(-5deg);}
	75% {top: 120px;}
	100% {top: 550px;}
}


/*Nessie*/

#nessie{
	position: absolute;
	z-index: 200;
	top: 300px;
	left: 0px;
	transform-origin: 50%, 100%;
	transform: rotate(15deg);
	opacity: 0;
}

@keyframes nessieArise{
	0% {animation-timing-function: cubic-bezier(.27, .81, .53, 1);}
	20%{
		transform: translate(50px, -200px) rotate(0deg);
		opacity: .8;
	}
	35%, 65% {transform: translate(53px, -180px) rotate(3deg);}
	50%, 80% {transform: translate(42px, -190px) rotate(-3deg);
				opacity: .8;
			 }
	100% {transform: translate(80px, 0px) rotate(15deg);
		  opacity: 0;}

}



/*speech bubbles*/

#help, #directions {
	position: relative;
	z-index: 550;
	top: -400px;
	left: 350px;
	width: 30%;
	height: 30%;
	opacity: 0;
	animation: yellBubble 10s linear infinite;
}

#directions{
	top: -400px;
	left: 100px;
	animation: yellBubble 10s 5s linear infinite;
}

@keyframes yellBubbleShort{
	0%, 100% {opacity:0;}
	68% {opacity: 0; }
	79% {opacity: 1;}
	90% {opacity: 0; transform: translate(-180px, -120px)}
}

@keyframes yellBubble{
	0%, 100% {opacity:0;}
	79% {opacity: 0; }
	82% {opacity: 1;}
	95% {opacity: 0; transform: translate(-180px, -120px)}
}


/****************************/
/*interactive.css stylesheet*/
/****************************/

/*Targets*/

[class*=Target]:hover{
	background-color: blue;
	opacity: .2;
}

/*lg target one*/

.lgTarget.one:hover ~ #gullContainer1{
	animation: fly 7s infinite;
}

.lgTarget.one:hover ~ #pirhanaContainer3{
	animation: pirhanaLowJump 5s .5s linear infinite;
}

.lgTarget.one:hover ~ #pirhanaContainer1{
	animation: pirhanaLowJump 4s .25s linear infinite;
}

/*lg target two - SHARK ATTACK!!!*/

.lgTarget.two:hover ~ #sharkContainer .shark{
	animation: sharkAttack 3s;
}

.lgTarget.two:hover ~ #manContainer{
	animation: boatSink 3s;
}

/*lg target three*/

.lgTarget.three:hover ~ #pirhanaContainer2{
	animation: pirhanaHighJump 2s linear infinite;
}

.lgTarget.three:hover ~ #pirhanaContainer1{
	animation: pirhanaLowJump 5s linear infinite;
}

.lgTarget.three:hover ~ #pirhanaContainer4{
	animation: pirhanaLowJump 3s linear infinite;
}

/*med target one*/

.medTarget.one:hover ~ #pirhanaContainer2{
	animation: pirhanaHighJump 4s .1s linear infinite;
}

.medTarget.one:hover ~ .flip #flyingFish2{
	animation: fishFly 5s linear infinite;
}

.medTarget.one:hover ~ #pirhanaContainer4{
	animation: pirhanaLowJump 6s .25s linear infinite;
}

.medTarget.one:hover ~ #pirhanaContainer3{
	animation: pirhanaHighJump 4s .05s linear infinite;
}

/*med target two*/


.medTarget.two:hover ~ .flip #gullContainer2{
	animation: fly 5s infinite;
}

.medTarget.two:hover ~ #gullContainer1{
	animation: fly 7s infinite;
}

.medTarget.two:hover ~ #flyingFish1{
	animation: fishFly 7s .3s linear infinite;
}

/*med target three*/

.medTarget.three:hover ~ .flip #flyingFish2{
	animation: fishFly 5s .3s linear infinite;
}

.medTarget.three:hover ~ #pirhanaContainer4{
	animation: pirhanaLowJump 3s linear infinite;
}

.medTarget.three:hover ~ #pirhanaContainer3{
	animation: pirhanaHighJump 4s .25s linear infinite;
}

/*med target four*/

.medTarget.four:hover ~ #pirhanaContainer3{
	animation: pirhanaHighJump 3s linear infinite;
}

.medTarget.four:hover ~ #pirhanaContainer4{
	animation: pirhanaLowJump 3s .25s linear infinite;
}

.medTarget.four:hover ~ .flip #gullContainer2{
	animation: fly 7s .5s infinite;
}
/*sm target one*/

.smTarget.one:hover ~ #gullContainer1{
	animation: fly 7s infinite;
}

.smTarget.one:hover ~ #pirhanaContainer1{
	animation: pirhanaLowJump 6s .5s linear infinite;
}

.smTarget.one:hover ~ #pirhanaContainer3{
	animation: pirhanaHighJump 5s linear infinite;
}

/*sm target two*/

.smTarget.two:hover ~ #pirhanaContainer1{
	animation: pirhanaHighJump 4s linear infinite;
}

.smTarget.two:hover ~ #pirhanaContainer3{
	animation: pirhanaHighJump 5s linear infinite;
}

.smTarget.two:hover ~ #pirhanaContainer4{
	animation: pirhanaLowJump 3s .8s linear infinite;
}


/*sm target three*/

.smTarget.three:hover ~ #pirhanaContainer2{
	animation: pirhanaHighJump 4s linear infinite;
}

.smTarget.three:hover ~ #pirhanaContainer4{
	animation: pirhanaLowJump 6s .5s linear infinite;
}

.smTarget.three:hover ~ .flip #gullContainer2{
	animation: fly 6s infinite;
}


/*tiny target one Seagull Escape!!*/

.tinyTarget.one:hover ~ #gullContainer1 {
	animation: gullOneSave 2.5s linear;

}


.tinyTarget.one:hover ~ .flip #gullContainer2 {
	animation: gullTwoSave 2.5s linear;
}


.tinyTarget.one:hover ~ #gullContainer3 {
	animation: gullThreeSave 2.5s linear;

}

.tinyTarget.one:hover ~ .flip #gullContainer4 {
	animation: gullFourSave 2.5s linear;

}

.tinyTarget.one:hover ~ #gullContainer5 {
	animation: gullFiveSave 2.5s linear;

}

.tinyTarget.one:hover ~ #manContainer {
	animation: boatSave 2.5s linear;
}

/*converts the two birds that were flying across screen before to fast-flap birds*/
.tinyTarget.one:hover ~ .flip #gullContainer2 [class*="WingContainer"],
.tinyTarget.one:hover ~ #gullContainer1 [class*="WingContainer"]
 {	animation: fastFlap .3s linear infinite; }




/*tiny target two Nessie!!*/
.tinyTarget.two:hover ~ #nessie
 {		animation: nessieArise 10s ease-in-out;}