/* Hi. Welcome to Tinybop CSS. Feel free to suggest improvements. email: raul@tinybop.com */

/*test*/

#anim1 {
	width: 47px;
	height: 50px;
	background: url(../images/keyturnsprite.png) 0px 0px no-repeat;
	margin-top: 20px;
	z-index: 99;
	display: block;
}

/*clear way */

html, body, div, span, h1, h2,  p, b, i, dl, dt, dd, ol, ul, li, form, a, article, aside,figure, footer, header, menu, nav {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	vertical-align: baseline;
	background: transparent;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

article, aside, details, footer, header, hgroup, menu, nav, section {
	display: block;
	text-transform: uppercase;
	font: 10px "Proxima Nova", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	color: rgba(254,255,254,0.0);
}

a {
	border-style: none;
	text-decoration: none;
}

ol, ul {
	list-style: none;
}

/*browerfixes*/

.ie7 img {
	-ms-interpolation-mode: bicubic;
}

.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix {
	zoom: 1;
}

/*big picture */

body {
	background: #3d3d3d url(../images/pattern/tinybop-bg-grey.gif) repeat;
}

.container {
	overflow: hidden;
	margin: 0px auto;
	position: relative;
	background-image: none;
}

#wrapper {
	width: 1024px;
	overflow: hidden;
	margin: 0 auto;
	position: relative;
}

/*earth, wind, and fire*/

/*sky*/

#sky .container {
	height: 500px;
}

#sky {
	width: 100%;
	background-size: stretch;
	background: #aadde4 url(../images/ocean/sky/sky.png) no-repeat 0 0;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	height: 500px;
}

#sky-sun {
	position: relative;
	width: 110px;
	height: 103px;
	left: 10%;
	top: 200px;
	background: url(../images/sky/sun.png) no-repeat left top;
}

#sky-cloud1 {
	position: relative;
	width: 100%;
	height: 103px;
	top: 100px;
	background: url(../images/sky/clouds/cloud1.png) no-repeat left top;
	left: -90px;
	-webkit-animation: slowmove 170s linear infinite;
	-moz-animation: slowmove 170s linear infinite;
	-o-animation: slowmove 170s linear infinite;
}

#sky-cloud2 {
	paddingosition: relative;
	width: 100%;
	height: 103px;
	top: 150px;
	background: url(../images/sky/clouds/cloud2.png) no-repeat left top;
	left: 35%;
	z-index: 2;
	-webkit-animation: moveclouds 80s linear infinite;
	-moz-animation: moveclouds 80s linear infinite;
	-o-animation: moveclouds 80s linear infinite;
}

#sky-cloud3 {
	position: relative;
	width: 100%;
	margin-top: -10px;
	;height: 103px;
	background: url(../images/sky/clouds/cloud3.png) no-repeat left top;
	opacity: .9;
	-webkit-animation: moveclouds 40s linear infinite;
	-moz-animation: moveclouds 40s linear infinite;
	-o-animation: moveclouds 40s linear infinite;
}

#sky-cloud4 {
	position: relative;
	width: 100%;
	height: 103px;
	left: 10%;
	background: url(../images/sky/clouds/cloud4.png) no-repeat left top;
	-webkit-animation: moveclouds 90s linear infinite;
	-moz-animation: moveclouds 90s linear infinite;
	-o-animation: moveclouds 90s linear infinite;
}

#sky-bird1 {
	position: relative;
	width: 100%;
	height: 60px;
	width: 70px;
	left: 60%;
	top: -200px;
	background: transparent url(../images/sky/birds/bird-flying.gif) no-repeat left top;
	-webkit-animation: spin 90s ease infinite;
	-moz-animation: spin 90s ease infinite;
}

#sky-bird2 {
	position: absolute;
	width: 100%;
	height: 20px;
	left: 60%;
	top: 20px;
	background: url(../images/sky/birds/bird-wingup.png) no-repeat left top;
	
    -webkit-animation: birdflight 100s ease infinite;
	-moz-animation: birdflight 100s ease infinite;
}

#sky-bird3 {
	position: absolute;
	width: 100%;
	height: 103px;
	left: 67%;
	top: 200px;
	background: url(../images/sky/birds/bird-wingup.png) no-repeat left top;
	
	-webkit-animation: birdflight2 100s ease infinite;
	-moz-animation: birdflight2 100s ease infinite;
}

#sky-wind {
	position: relative;
	width: 100%;
	height: 103px;
	left: 10%;
	top: -144px;
	background: url(../images/sky/wind.png) no-repeat left top;
	-webkit-animation: moveclouds 190s linear infinite;
	-moz-animation: moveclouds 190s linear infinite;
	-o-animation: moveclouds 190s linear infinite;
}

#land {
	position: absolute;
	width: 100%;
	height: 103px;
	margin-top: -67px;
	background: url(../images/land/land.png) no-repeat left top;
}

#sky-wind2 {
	position: relative;
	width: 100%;
	height: 103px;
	left: 10%;
	top: -140px;
	background: url(../images/sky/wind.png) no-repeat left top;
	-webkit-animation: moveclouds 90s linear infinite;
	-moz-animation: moveclouds 90s linear infinite;
	-o-animation: moveclouds 90s linear infinite;
	z-index: 19;
}

#surface {
	width: 100%;
	background: url(../images/ocean/oceansurface/oceansurface.png);
	height: 260px;
	background-size: stretch;
}

#surface-ship {
	position: absolute;
	width: 200px;
	height: 138px;
	margin-top: 60px;
	background: url(../images/ocean/oceansurface/boat.png) no-repeat 10px;
	z-index: 25;
	animation: floatboat 3s infinite;
	-moz-animation: floatboat 3s infinite;
	-webkit-animation: floatboat 3s infinite;
	right: 145px;
}

#surface-flag {
	position: relative;
	width: 100%;
	height: 29px;
	width: 40px;
	left: 750px;
	top: -38px;
	background: url(../images/ocean/oceansurface/flag.png) no-repeat left top;
	z-index: 29
}

#surface-ship-wave {
	position: relative;
	width: 100%;
	height: 30px;
	width: 500px;
	left: 55%;
	margin-top: 60px;
	background: url(../images/ocean/oceansurface/boatwave.png) no-repeat left top;
	z-index: 28;
}

#surface-wave-medium {
	position: relative;
	height: 10px;
	width: 1024px;
	;background: url(../images/ocean/oceansurface/oceanwaves1.png) no-repeat left top;
	z-index: 12;
}

#surface-wave-close {
	position: absolute;
	height: 60px;
	width: 100%;
	margin-top: 310px;
	background: url(../images/ocean/oceansurface/waves.png) no-repeat 0;
	width: 1024px;
	animation: floatboat 10s infinite;
	-webkit-animation: floatboat 10s infinite;
	-moz-animation: floatboat 10s infinite;

}

#sunlit {
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	width: 100%;
	height: 103px;
	background: url(../images/ocean/ocean/oceanwater.png)  left top;
	height: 803px;
	background-size: stretch;
}

#whale {
	position: relative;
	width: 400px;
	height: 138px;
	margin-top: 65px;
	background: url(../images/ocean/oceanlife/animals/whale.png) no-repeat 30px;
	z-index: 20;
	opacity: 0.4;
	filter: alpha(opacity=40);
	-webkit-animation: moveclouds 170s linear infinite;
	-moz-animation: moveclouds 170s linear infinite;
	-o-animation: moveclouds 170s linear infinite;
	-webkit-border-radius: 150px;
	-moz-border-radius: 150px;
	border-radius: 150px;
	border-width: 50px;
	border-color: rgba(0,0,0,0);
}

#background {
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	width: 1024px;
	background: url(../images/ocean/ocean/oceanlight-point-right.png)  left top;
	height: 70px;
	background-size: stretch;
	margin-top: -150px;
}

#schoolfish {
	position: relative;
	width: 100%;
	height: 138px;
	margin-top: 65px;
	background: url(../images/ocean/oceanlife/animals/schooloffish.png) no-repeat 30px;
	z-index: 20;
	width: 200px;
	left: 300px;
	-webkit-animation: swim 70s linear infinite;
	-moz-animation: swim 170s linear infinite;
	-o-animation: swim 170s linear infinite;
}

#background2 {
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	width: 1024px;
	height: 103px;
	background: url(../images/ocean/ocean/oceanlight-point-left.png)  left top;
	height: 70px;
	background-size: stretch;
	margin-top: 100px;
}

#jellyfish {
	position: relative;
	width: 100%;
	height: 138px;
	margin-top: 65px;
	background: url(../images/ocean/oceanlife/animals/jellyfish.png) no-repeat 30px;
	z-index: 20;
	width: 200px;
	left: 200px;
	animation: jellyfishfun 40s infinite;
	-webkit-animation: jellyfishfun 40s infinite;

}

#yellowfish {
	position: relative;
	width: 100%;
	height: 20px;
	background: url(../images/ocean/oceanlife/animals/fish1.png) no-repeat 600px;
	z-index: 120;
	-webkit-animation: fishy 20s infinite linear;
	animation: fishy 200s infinite;
	-moz-animation: fishy 200s infinite;
}

#pinkfish {
	position: relative;
	width: 100%;
	height: 20px;
	background: url(../images/ocean/oceanlife/animals/fish2.png) no-repeat 800px;
	z-index: 20;
	-webkit-animation: fishy 200s infinite linear;
	animation: fishy 200s infinite;
	-moz-animation: fishy 200s infinite;
}



#background3 {
	
}

#seafloor {
	position: absolute;
	background: url(../images/ocean/ocean/oceanfloor.png) no-repeat;
	margin-top: -115px;
	width: 1024px;
	height: 300px;
	z-index: 20
}

#subseafloor {
	position: absolute;
	background: url(../images/crust/crust1.png) no-repeat;
	width: 1024px;
	top: 1600px;
	height: 200px;
}


#seafloormoss {
	position: absolute;
	width: 300px;
	height: 180px;
	background: url(../images/ocean/oceanlife/plants/seafloormoss.png) no-repeat 0;
	z-index: 220;
	right: 160px;
	margin-top: -10px;
	}


#plant1 {
	position: absolute;
	width: 300px;
	height: 180px;
	background: url(../images/ocean/oceanlife/plants/oceanplant.png) no-repeat 0;
	z-index: 120;
	right: 20px;
	margin-top: -30px;
	animation-name: plant1;
	animation-duration: 16s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	-moz-animation-name: plant1;
	-moz-animation-duration: 16s;
	-moz-animation-iteration-count: infinite;
	-moz-animation-timing-function: linear;
	-webkit-animation-name: plant1;
	-webkit-animation-duration: 116s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
}




#plant2 {
	position: absolute;
	width: 300px;
	height: 180px;
	background: url(../images/ocean/oceanlife/plants/oceanplant3.png) no-repeat 0;
	z-index: 120;
	right: 60px;
	margin-top: -10px;
	animation-name: plantwave;
	animation-duration: 5s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	-moz-animation-name: plantwave;
	-moz-animation-duration: 5s;
	-moz-animation-iteration-count: infinite;
	-moz-animation-timing-function: linear;
	-webkit-animation-name: plantwave;
	-webkit-animation-duration: 5s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
}






#plant3 {
	position: absolute;
	width: 300px;
	height: 180px;
	background: url(../images/ocean/oceanlife/plants/oceanplant3.png) no-repeat 0;
	z-index: 120;
	right: 40px;
	margin-top: -10px;
	animation-name: plantwave;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	-moz-animation-name: plantwave;
	-moz-animation-duration: 2s;
	-moz-animation-iteration-count: infinite;
	-moz-animation-timing-function: linear;
	-webkit-animation-name: plantwave;
	-webkit-animation-duration: 2s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
}



#crust-top {
	background: url(../images/crust/crust2.png) no-repeat;
	width: 100%;
	height: 230px;
	background-size: stretch;
	margin-top: 105px;
	z-index: 11;
}

#crust-middle {
	background: url(../images/crust/crust3.png) no-repeat;
	width: 100%;
	height: 220px;
	background-size: stretch;
	margin-top: -30px;
	z-index: 10;
}

#crust-middle-deeper {
	background: url(../images/crust/crust4.png) no-repeat;
	width: 100%;
	height: 200px;
	background-size: stretch;
	margin-top: -40px;
}

#crust-super-deep {
	background: url(../images/crust/crust5.png) no-repeat;
	width: 100%;
	height: 500px;
	background-size: stretch;
	margin-top: -45px;
	z-index: 10;
}

#magma {
	background: url(../images/crust/crust6.png) no-repeat;
	width: 100%;
	height: 400px;
	background-size: stretch;
	margin-top: -60px;
	z-index: 1;
}

#outer-core {
	background: url(../images/crust/crust7.png) no-repeat;
	width: 100%;
	height: 400px;
	background-size: stretch;
	z-index: 6;
	margin-top: -70px;
}

#molten {
	background: url(../images/crust/crust8.png) no-repeat;
	width: 100%;
	height: 600px;
	background-size: stretch;
	z-index:6;
    margin-top: -100px;
}

#molten #formcontainer {
	padding-top: 360px;
	width: 700px;
	margin: 0 auto;
	font-size: 1.68em;
	font-variant: normal;
	text-transform: none;
	color: #feffff;
	text-align: center;
}

#formcontainer p {
	padding-bottom: .8em;
}

#core {
	background-color: #9f0303;
	height: 800px;
}

/*the nav*/

#tinybop {
	height: 80px;
	width: 295px;
	left: 50%;
	margin-left: -147px;
	background: url(../images/tinybop-logo-no-key.png);
	text-decoration: none;
	top: 20%;
	z-index: 100;
	position: fixed;
}

#tinybop a {
	margin-top: -80px;
	height: 100px;
	width: 300px;
	position: absolute;
}

footer {
	background-color: #844b1f;
	color: white;
	padding-top: 10px;
}

footer p {
	width: 80%;
	font-size: 12px;
	line-height: 18px;
	text-transform: none;
	color: rgba(254,255,255,0.75);
	text-align: center;
	margin: 0 auto;
	display: block;
	margin-top: 12px
}

footer a {
	background-color: black;
	padding: 2px;
	color: white;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	-khtml-border-radius: 3px;
	border-radius: 3px;
}

footer a:hover {
	background-color: #de275d;
}

#legalmumbojumbo {
	postion: absolute;
	background-color: black;
	width: 100%;
	line-height: 3.5em;
	font-size: .9em;
	height: 20px;
	margin-top: 20px;
}

#legalmumbojumbo div.container p {
	font-size: 10px;
}

/* Party Down it's keyframe time */


@-webkit-keyframes birdflight {
	0% {left: 0%; top: 200px;}
	25% { left: 60%; top: 240px;}
	50% {margin-left:  -100px;}
	70% {margin-top: -70px;}
	90% {left: 100%;}
}

@-moz-keyframes birdflight {
	0% {left: 0%; top: 200px;}
	25% { left: 60%; top: 240px;}
	50% {margin-left:  -100px;}
	70% {margin-top: -70px;}
	90% {left: 100%;}
}

	



@-webkit-keyframes birdflight2{
	
	0% 	{left: 50%; top: 0px;}
	25% {left: 67%; 	top: 200px;}
	50% {left:80%; top: 210px;}
	70% {left:90%; top: 280px;}
	90% {left:100%; top: 280px;}
}

@-moz-keyframes birdflight2{
	
	0% 	{left: 50%; top: 0px;}
	25% {left: 67%; 	top: 200px;}
	50% {left:80%; top: 210px;}
	70% {left:90%; top: 280px;}
	90% {left:100%; top: 280px;}
}




@-webkit-keyframes spin {
	0% { -webkit-transform: rotateZ(0); margin-left: 20px; }
	25% {-webkit-transform: rotateZ(10deg); }
	50% {-webkit-transform: rotateZ(15deg);}
	100% {-webkit-transform: rotateZ(9deg);margin-left: -1000px;}
}

@-moz-keyframes spin {
	0% { -webkit-transform: rotateZ(0); margin-left: 20px; }
	25% {-webkit-transform: rotateZ(10deg); }
	50% {-webkit-transform: rotateZ(15deg);}
	100% {-webkit-transform: rotateZ(9deg);margin-left: -1000px;}
}

@keyframes spin {
	0% { -webkit-transform: rotateZ(0); margin-left: 20px; }
	25% {-webkit-transform: rotateZ(10deg); }
	50% {-webkit-transform: rotateZ(15deg);}
	100% {-webkit-transform: rotateZ(9deg);margin-left: -1000px;}
}

@-webkit-keyframes floatboat {
	0%   {top: 420px;}
	25%  {top: 422px;}	
	50% {top: 419px;}
	75% {top: 422px;}
	100% {top: 424px;}
}

@-moz-keyframes floatboat {
	0%   {top: 420px;}
	25%  {top: 422px;}
	50%  {top: 419px;}
	75%  {top: 422px;}
	100% {top: 424px;}
}

@-webkit-keyframes jellyfishfun {
	0%   {top: -20px;
	margin-right: 0px;}

	20% {top: -50px;
	-webkit-transform: scale(1);}
	45% {top: -19px;
	-webkit-transform: scale(1.1);
	margin-right: 10px;}
	65% {top: 0px;
	-webkit-transform: scale(1);}
	80% {top: 14px;
	-webkit-transform: scale(1.01);
	margin-right: 30px}
}

@-moz-keyframes jellyfishfun {
	0%   {top: -20px;
	margin-right: 0px;}
	20% {top: -50px;
	-webkit-transform: scale(1);}
	45% {top: -19px;
	-webkit-transform: scale(1.1);
	margin-right: 10px;}
	65% {top: 0px;
	-webkit-transform: scale(1);}
	80% {top: 14px;
	-webkit-transform: scale(1.01);
	margin-right: 30px}
}

@-webkit-keyframes fishy {
	0%   { top: 20px;
	margin-right: 0px;
	-webkit-transform: scaleX(1);}
	12% {	top: 47px;}
	20% {top: 11px;}
	35% {top: 30px;}
50% {	top: 24px;
	margin-left: -1000px;
	-webkit-transform: scaleX(1);}
51% {	-webkit-transform: scaleX(-1);
	top: 22px;
	margin-right: 0px;}

70% {	top: 22px;
	margin-right: 250px;}
99% {	top: 21px;
	margin-right: 550px;
	-webkit-transform: scaleX(-1);}
}

@-moz-keyframes fishy {
	0%   {top: 20px;
	margin-right: 0px;
	-webkit-transform: scaleX(1);}
	12% {top: 47px;}
	20% {top: 11px;}
	35% {top: 30px;}
	50% {top: 24px;
	margin-left: -1000px;
	-webkit-transform: scaleX(1);}
	51% {	-webkit-transform: scaleX(-1);
	top: 22px;
	margin-right: 0px;}
	70% {	top: 22px;
	margin-right: 250px;}
	99% {top: 21px;
	margin-right: 550px;
	-webkit-transform: scaleX(-1);}
}

@-webkit-keyframes fishywiggle {
	0%   {top: 20px;
	margin-right: 0px;
	-webkit-transform: scaleX(1);}
	10% {top: -10px;
	margin-right: 300px;}
	20% {top: 11px;}
	35% {	top: 30px;}
	50% {	top: 24px;
	margin-left: -1000px;
	-webkit-transform: scaleX(1);}
	51% {	-webkit-transform: scaleX(-1);
	top: 22px;}
	70% {
	top: 22px;
	margin-right: 250px;}
	99% {
	top: 21px;
	margin-right: 5px;
	-webkit-transform: scaleX(-1);}
}

@-moz-keyframes fishywiggle {
	0%   {top: 20px;	margin-right: 0px;
	-webkit-transform: scaleX(1);}
	10% {	top: -10px;
	margin-right: 300px;}
	20% {	top: 11px;}
	35% {top: 30px;	}
	50% { top: 24px; margin-left: -1000px; -webkit-transform: scaleX(1);}51% { -webkit-transform: scaleX(-1); top: 22px;}
	70% { top: 22px; margin-right: 250px;}
	99% { top: 21px; margin-right: 5px; -webkit-transform: scaleX(-1);
	}
}


@-webkit-keyframes slowmove { 0% {margin-left: 20px;} 100% {	margin-left: -2000px;}}
@-moz-keyframes slowmove { 0% {margin-left: 20px;} 100% {	margin-left: -2000px;} }

@-webkit-keyframes moveclouds { 0% {margin-left: 1000px;} 100% {	margin-left: -1000px;} }
@-moz-keyframes moveclouds { 0% {margin-left: 1000px;}
		100% {	margin-left: -1000px;}}



@-webkit-keyframes plant1 { from{-webkit-transform: rotate(13deg);}
	50% { -webkit-transform: rotate(-4deg);}
	to { -webkit-transform: rotate(13deg);}
}


@-moz-keyframes plant1 { from{-webkit-transform: rotate(13deg);}
	50% { -webkit-transform: rotate(-4deg);}
	to { -webkit-transform: rotate(13deg);}
	}

@-webkit-keyframes plantwave { from{-webkit-transform: rotate(2deg);}

50% { -webkit-transform: rotate(-2deg);
}

to { -webkit-transform: rotate(2deg);
}

}


@-webkit-keyframes pinkfish { 0%   {top: 20px; margin-right: -1000px;
}

25% { top: 22px;
}

50% { top: 19px;
}

75% { top: 22px;
}

100% { top: 24px; margin-left: -1000px;
}

}

@-moz-keyframes pinkfish { 0%   {top: 20px; margin-right: -1000px;
}

25% { top: 22px;
}

50% { top: 19px;
}

75% { top: 22px;
}

100% { top: 24px; margin-left: -1000px;
}

} 

@-webkit-keyframes swim { from{ left: -200px; -webkit-transform: scaleX(-1);
}

20% { left: 0px; -webkit-transform: scaleX(1); z-index: 90;
}

20.5% { z-index: 10; left: -30px;
}

21% { left: 80px;
}

42% { left: 550px;
}

50% { z-index: 28; top: 130px; left: 630px; -webkit-transform: scaleX(1);
}

50.5% { -webkit-transform: scaleX(-1); z-index: 100; left: 630px; top: 160px;
}

51% { left: 530px; z-index: 150;
}

60% { left: 300px; z-index: 150;
}

64% { left: 200px; z-index: 150;
}

66% { left: 80px; z-index: 150;
}

69% { left: -30px; z-index: 150;
}

70% { top: 105px; left: -30px; -webkit-transform: scaleX(-1); z-index: 90;
}

70.5% { -webkit-transform: scaleX(1); z-index: 10; left: -30px;
}

71% { left: 40px;
}

80% { left: 550px;
}

81% { left: 550px; top: 70px;
}

82% { left: 550px; -webkit-transform: scaleX(1);
}

82.5% { -webkit-transform: scaleX(-1); top: 70px; left: 550px;
}

84% { top: 105px; left: 500px; z-index: 28;
}

88% { top: 105px; left: 400px; z-index: 28;
}

to { left: 200px;
}

}

@-moz-keyframes swim { from{ left: -200px; -webkit-transform: scaleX(-1);
}

20% { left: 0px; -webkit-transform: scaleX(1); z-index: 90;
}

20.5% { z-index: 10; left: -30px;
}

21% { left: 80px;
}

42% { left: 550px;
}

50% { z-index: 28; top: 130px; left: 630px; -webkit-transform: scaleX(1);
}

50.5% { -webkit-transform: scaleX(-1); z-index: 100; left: 630px; top: 160px;
}

51% { left: 530px; z-index: 150;
}

60% { left: 300px; z-index: 150;
}

64% { left: 200px; z-index: 150;
}

66% { left: 80px; z-index: 150;
}

69% { left: -30px; z-index: 150;
}

70% { top: 105px; left: -30px; -webkit-transform: scaleX(-1); z-index: 90;
}

70.5% { -webkit-transform: scaleX(1); z-index: 10; left: -30px;
}

71% { left: 40px;
}

80% { left: 550px;
}

81% { left: 550px; top: 70px;
}

82% { left: 550px; -webkit-transform: scaleX(1);
}

82.5% { -webkit-transform: scaleX(-1); top: 70px; left: 550px;
}

84% { top: 105px; left: 500px; z-index: 28;
}

88% { top: 105px; left: 400px; z-index: 28;
}

to { left: 200px;
}

}




/*Form */

#formcontainer { width: 1024px;
}

form {
	width: 380px;
	margin: 0 auto;
	padding-left: 70px;
	padding-top: 20px;
}

fieldset {
	border: 0;
	padding: 0;
	margin: 0 30px 0 0;
	display: block;
}

button,
.button,
input,
select,
textarea {
	font: 14px "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
	margin: 0;
	vertical-align: baseline;
	*vertical-align: middle;
	line-height: normal;
}

button,
.button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	cursor: pointer;
	*overflow: visible;
	margin: 0;
	padding: 7px 9px;
	font-weight: normal;
	border: none;
	background: #221f20;
	color: #ffffff;
	font-size: .875em;
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	-webkit-appearance: button;
}

input[type="submit"]:hover,
input[type="submit"]:focus,
button:hover,
button:focus,
.button:hover,
.button:focus,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="reset"]:hover,
input[type="reset"]:focus {
	background: #373737;
}

button:active,
input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
	border: none;
	background: #000000;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

textarea {
	overflow: auto;
	vertical-align: top;
	resize: vertical;
	height: 150px;
}

input[type="text"],
input[type="url"],
input[type="email"],
input[type="tel"],
textarea {
	display: inline;
	width: 99%;
	padding: 10px 15px;
	border: none;
	background: #ffffff;
}

input:focus,
input[type="text"]:focus,
input[type="url"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus {
	border: none;
	background: #ffffff;
	outline: none;
}

select {
	min-width: 25%;
	margin: 0;
}

.newsletter_signup:before,
.newsletter_signup:after {
	display: table;
	content: "";
}

.newsletter_signup:after {
	clear: both;
}

.newsletter_signup fieldset {
	width: 260px;
	margin: 0;
	float: left;
}

input.email {
	margin: 0;
	width: 230px;
	float: left;
	border-radius: 0;
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
}

#mc-embedded-subscribe {
	background-color: #000;
	float: left;
	width: 65px;
	height: 36px;
	border-radius: 0;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
}

.response {
	padding-top: 20px;
	margin-left: -100px;
	margin-bottom: 15px;
	color: black;
	font-size: .8em;
}

#mce-error-response.response a {
	font-weight: bold;
	color: white;
	line-height: 1.2em;
}

/* =============================================================================

   Media Queries

   ========================================================================== */

@media screen and (min-width:481px) and (max-width:768px) {

#wrapper {
	width: 620px;
}

#land {
	position: relative;
	margin-top: -67px;
}

#surface-wave-close {
	position: relative;
	margin-top: -340px;
	width: 620px;
}

#surface {
	height: 400px;
	margin-top: -40px;
}

#surface-wave-close {
	height: 60px;
	margin-top: -210px;
	width: 640px;
}

#surface-ship-wave {
	left: 0px;
	margin-top: 65px;
}

#subseafloor {
	margin-top: 140px;
}

#seafloor {
	margin-top: -120px;
}

#outer-core {
	background: url(../images/crust/crust7.png) no-repeat -300px;
}

#molten {
	background: url(../images/crust/crust8.png) no-repeat -200px 5px;
	margin-top: -100px;
}

#molten #formcontainer {
	width: 500px;
}

#legalmumbojumbo {

}

footer aside {
	padding-top: 15px;
	padding-bottom: 5px;
}

div#formcontainer p {
	paddng-bottom: 1em;
	font-size: 1em;
	line-height: 1.4em;
}

}

@media screen and (min-width:320px) and (max-width:480px) {

#wrapper {
	width: 420px;
}

#land {
	position: relative;
	margin-top: -67px;
}

#surface-wave-close {
	position: relative;
	margin-top: -340px;
	width: 480px;
}

#surface {
	height: 400px;
	margin-top: -40px;
}

#surface-wave-close {
	height: 60px;
	margin-top: -210px;
	width: 420px;
}

#surface-ship-wave {
	left: 0px;
	margin-top: 65px;
}

#outer-core {
	background: url(../images/crust/crust7.png) no-repeat -300px;
}

#molten {
	background: url(../images/crust/crust8.png) no-repeat -300px 5px;
	margin-top: -100px;
}

#molten #formcontainer {
	width: 300px;
}

#legalmumbojumbo {

}

div#formcontainer p {
	font-size: 14px;
	padding-bottom: 10px
}

#mce-error-response.response {
	width: 300px;
	margin-left: 0;
}

form {
	width: 340px;
	margin: 0 auto;
	padding-left: 0px;
	padding-top: 20px;
}



#tinybop {
margin-top: -80px;
}

#subseafloor {
	margin-top: 140px;
}

#seafloor {
	margin-top: -120px;
}




}