@charset "UTF-8";
/*------------------------------------------------------------------
[CSS3 Stylesheet]

Project: Under the Sea in CSS3
Last change: 
Designed by: Carlo Rosati
Works in browsers: FF 3.5+, Opera 10.5+, Safari 4+, Google Chrome 4.0+
-------------------------------------------------------------------*/

/* GENERAL CSS */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0px;
	padding: 0px;
	border: 0px;
}
html, body {
	min-height: 100%;
}
body {
	background-color: #FFF;
	font-size: 62.5%;
	width: 100%;
	overflow: hidden;
	font-family: Century Gothic, Tw Cen MT, Trebuchet MS, sans-serif;
	font-weight: normal;
	font-style: normal;
}

/* HEADER CSS */

h1 {
	font-family: 'MyriadProRegular', "Century Gothic", sans-serif;
	font-weight: normal;
	font-style: normal;
	color: #FF9;
	font-size: 5.3em;
	text-shadow:0px 0px 3px #b2b2b2;
	position: absolute;
	top: 18px;
	left: 27px;
}
h1 span {
	font-size: 0.4em;
	color: #CBCBCB;
	text-shadow:0px 0px 3px #C2C2C2;
}

/* WAVES */

body>div:nth-child(-n+4) {
	width: 100%;
	position: absolute;
	white-space: nowrap;
	letter-spacing: -.35em;
	font-size: 0.0em;
	text-align: left;
	top: 95px;
	left: -60px;
	-webkit-animation: 'front' 2.5s linear;	/* FRONT WAVE ANIMATION */
	-webkit-animation-iteration-count: infinite;
	z-index: 5;
}
body>div>div {
	display: inline-block;
	height: 53px;
	width: 78px;
	overflow: hidden;
	position: relative;
}

/* MIDDLE WAVE */
body>div:nth-child(3) {
	top: 83px;
	left: -82px;
	z-index: 3;
	-webkit-animation: 'middle' 2.5s linear;
	-webkit-animation-iteration-count: infinite;

}
body>div:nth-child(3) div {
	border-color: #90d8dd;
}

/* BCAK WAVE */
body>div:nth-child(2) {
	top: 76px;
	left: -44px;
	z-index: 1;
	-webkit-animation: 'back' 2s linear;
	-webkit-animation-iteration-count: infinite;

}
body>div:nth-child(2) div {
	border-color: #c0d8d8;
}
body>div:nth-child(2)>div>div {
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
}

/* WAVE ELLIPSE */
body>div>div>div {
	position: absolute;
	left: -30px;
	top: -53px;
	height: 46px;
	width: 78px;
	background-color: transparent;
	-webkit-border-radius: 138px 106px;
	-moz-border-radius: 138px/106px;
	border-radius: 138px/106px;
	border: 30px solid #58d0e0;
	-moz-box-shadow:inset 0px -2px 9px -2px rgba(0, 0, 0, 0.2);
	-webkit-box-shadow:inset 0px -2px 9px -2px rgba(0, 0, 0, 0.2);
	box-shadow:inset 0px -2px 9px -2px rgba(0, 0, 0, 0.2);
}

/* WATER */
body>div:nth-child(7) {
	width: 100%;
	min-height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#58D0E0), to(#4F4F4F));
	background-image: -moz-linear-gradient(top, #58D0E0, #4F4F4F);
	background-color: #58d0e0;
	margin-top: 125px;
	background-repeat: no-repeat;
	z-index: 6;
}

/* DOLPHINS */
body>div:nth-child(5) {
	background-image: url(../images/dolphin.png);
	background-repeat: no-repeat;
	background-position: center center;
	height: 85px;
	width: 189px;
	position: absolute;
	top: 24px;
	right: 185px;
	z-index: 2;
	-moz-transform: rotate(47deg);  /* FF3.5+ */
	-o-transform: rotate(47deg);  /* Opera 10.5 */
	-webkit-transform: rotate(47deg);  /* Saf3.1+, Chrome */
	-webkit-transform-origin: 50% 50%;
	-webkit-animation: 'dolphin' 5s linear;
	-webkit-animation-iteration-count: infinite;
}
body>div:nth-child(6) {
	background-image: url(../images/dolphin.png);
	background-repeat: no-repeat;
	background-position: center center;
	height: 85px;
	width: 189px;
	position: absolute;
	top: -10px;
	right: 76px;
	z-index: 4;
	-webkit-transform:rotate(0deg);
	-webkit-transform-origin: 50% 50%;
	-webkit-animation: 'dolphin2' 7s linear;
	-webkit-animation-iteration-count: infinite;
}

/* SHARK */
body>div:nth-child(8) {
	background-image: url(../images/shark.png);
	background-repeat: no-repeat;
	background-position: center center;
	height: 40px;
	width: 76px;
	position: absolute;
	left: 13%;
	top: 74px;
	z-index: 2;
	-webkit-animation: 'shark' 18s linear;
	-webkit-animation-iteration-count: infinite;
}

/* FISH */
body>div:nth-child(n+10) {
	position: absolute;
	background-repeat: no-repeat;
	background-position: center center;
	z-index:7 ;
}
body>div:nth-child(10) {
	height: 34px;
	width: 59px;
	background-image: url(../images/orangefish.png);
	right: 65%;
	top: 40%;
	-webkit-animation: 'left' 22s linear;
	-webkit-animation-iteration-count: infinite;
}
body>div:nth-child(11) {
	height: 41px;
	width: 72px;
	background-image: url(../images/bluefish.png);
	left: 10%;
	top: 60%;
	-webkit-animation: 'right' 24s linear;
	-webkit-animation-iteration-count: infinite;
}
body>div:nth-child(12) {
	height: 40px;
	width: 71px;
	background-image: url(../images/redfish.png);
	top: 75%;
	right: 20%;
	-webkit-animation: 'right' 18s linear;
	-webkit-animation-iteration-count: infinite;
}

/* OCEAN FLOOR */
body>div:nth-child(9) {
	background-image: url(../images/sand.png);
	background-repeat: no-repeat;
	background-position: center center;
	height: 77px;
	width: 100%;
	position: absolute;
	bottom: 0px;
	z-index: 8;
	overflow: visible;
}
body>div:nth-child(9) div {
	background-repeat: no-repeat;
	background-position: center center;
	position: absolute;
	display: block;
}
body>div:nth-child(9) div:nth-child(2) {
	background-image: url(../images/seaweed.png);
	height: 88px;
	width: 65px;
	left: 30%;
	bottom: 40px;
}
body>div:nth-child(9) div:nth-child(3) {
	background-image: url(../images/shell.png);
	height: 25px;
	width: 26px;
	left: 7%;
	bottom: 30px;
}
body>div:nth-child(9) div:nth-child(4) {
	background-image: url(../images/starfish.png);
	height: 47px;
	width: 49px;
	right: 45%;
	bottom: 15px;
}

/* LINK AND CONTACT */
ul {
	list-style-type: none;
	position: relative;
	top: 50px;
	width: 95%;
	margin-right: auto;
	margin-left: auto;
}
ul li {
	color: #D7D7D7;
	float: left;
	font-size: 1.5em;
}
ul li span {
	position: absolute;
	right: 0px;
}
a {
	color: #85c5ff;
	text-decoration:none;
}
a:visited {
	color: #C30;
}
a:hover {
	color: #FFF;
	background-color: #85c5ff;
}