@charset "utf-8";

/*
==========================================================================
global
==========================================================================
*/

	html,
	body {
		background-color: rgba(18, 23, 44, 1);
		font-family: "Fira Sans Condensed", sans-serif;
		font-size: 16px;
		font-weight: normal;
		font-style: normal;
		font-kerning: normal;
		text-rendering: optimizeLegibility;
		-moz-text-size-adjust: 100%;
		-ms-text-size-adjust: 100%;
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
		height: 100%;
		line-height: 1;
		margin: 0;
		padding: 0;
		width: 100%;
	}

	* {
		margin: 0;
		padding: 0;
	}

	/*
	global: fonts
	*/

	.material-icons {
		font-family: "Material Icons";
		font-weight: normal;
		font-style: normal;
		font-size: 24px;
		display: inline-block;
		line-height: 1;
		text-transform: none;
		letter-spacing: normal;
		word-wrap: normal;
		white-space: nowrap;
		direction: ltr;
		text-rendering: optimizeLegibility;
		font-feature-settings: "liga";
	}
	b {
		font-weight: 500;
	}

	/*
	global: links
	*/

	a {
		background-color: transparent;
		display: inline-block;
	}

	a:link {
		color: rgba(27, 158, 191, 1);
		text-decoration: none;
	}

	a:visited {
		color: rgba(27, 158, 191, 1);
		text-decoration: none;
	}

	a:active,
	a:focus {
		color: rgba(129, 172, 181, 1);
		outline-width: 0;
		outline: none;
	}

	a:hover {
		color: rgba(82, 126, 137, 1);
		outline-width: 0;
	}

	/*
	global: inputs
	*/

	input {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		font-size: 1rem;
		line-height: 1;
	}

	/*
	global: classes
	*/
	.center {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
	}
	.media-lg {
		display: inline;
	}
	.media-sm {
		display: none;
	}

	/*
	global: headline;
	*/
	.headline {
		font-size: 1.875rem;
		padding: 40px 4px 4px 4px;
		text-align: center;
	}
	.subline {
		font-size: 1.0rem;
		font-weight: 300;
		border-top-style: solid;
		border-top-width: 1px;
		padding: 6px 4px 16px 4px;
		text-align: center;
	}

/*
==========================================================================
page: start
==========================================================================
*/

	#background-image {
		background-attachment: fixed;
		background-image: url("../media/images/start/neowise.jpg");
		background-repeat: no-repeat;
		background-size: cover;
		height:  100%;
		overflow: hidden;
		position: absolute;
		width: 100%;
	}
	#background-image.position-center {
		background-position: center;
	}
	#background-image.position-left {
		background-position: center left;
	}
	#login {
		position: relative;
		text-align: center;
		top: 25%;
		width: 100%;
	}
	#password {
		background-color: rgba(0, 0, 0, .3);
		border-radius: 4px;
		border: solid 1px rgba(255, 255, 255, .3);
		color: rgba(255, 255, 255, .6);
		font-size: 1rem;
		height:  45px;
		line-height: 1;
		margin: 0;
		opacity: .25;
		outline: none;
		padding-left: 15px;
		padding-right: 55px;
		transition: all 0.6s;
		width: 170px;
	}
	#password:focus {
		opacity:  0.8;
	}
	#enter-button {
		background: none;
		border: solid 1px transparent;
		color: rgba(255, 255, 255, 1);
		cursor: pointer;
		height: 45px;
		line-height: 0;
		margin-left: -46px;
		margin-top: 1px;
		opacity: .25;
		position: absolute;
		transition: all 0.6s;
		width: 45px;
	}
	#password:focus + #enter-button {
		background-color: rgba(0, 0, 0, .1);
		border-left-color: rgba(255, 255, 255, .1);
		color: rgba(255, 255, 255, .6);
		opacity: 0.8;
	}

/*
==========================================================================
navigation
==========================================================================
*/

	#navi {
		margin: 0 auto;
		max-width: 1400px;
		position: relative;
		width: 100%;
	}
	#navlinks {
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
		background-color: rgba(39, 49, 68, .8);
		border-bottom-color: rgba(255, 255, 255, .1);
		border-bottom-style: solid;
		border-bottom-width: 1px;
		box-shadow: 0px 2px 8px rgba(0, 0, 0, .3);
		height: 48px;
		list-style-type: none;
		max-width: 1400px;
		position: fixed;
		width: 100%;
		z-index: 1000;
	}
	#navmenu {
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
		background-color: rgba(39, 49, 68, .8);
		height: 0;
		list-style-type: none;
		margin: 0 auto;
		max-width: 1400px;
		position: fixed;
		text-align: center;
		top: 0;
		width: 100%;
		z-index: 1001;
	}
	#navmenu li {
		display: inline-block;
	}
	#navlinks a,
	#navmenu a {
		color: rgba(234, 242, 230, .8);
		height: 15px;
		font-size: 0.875rem;
		padding: 17px;
		position: relative;
		text-align: center;
		text-decoration: none;
	}
	#navlinks a#navlinks-menu-bt,
	#navlinks a#navlinks-close-bt {
		display: none;
		float: left;
		font-size: 24px;
		margin-left: 6px;
		padding: 12px;
		height: 25px;
		width: 25px;
	}
	#navlinks a#navlinks-logout-bt {
		float: right;
		font-size: 24px;
		margin-right: 6px;
		padding: 12px;
		height: 25px;
		width: 25px;
	}
	#navlinks a:hover,
	#navmenu a:hover {
		background-color: rgba(234, 242, 230, .8);
		color: rgba(82, 126, 137, 1);
	}
	#navlinks a#navlinks-logout-bt:hover {
		color: rgba(220, 99, 50, 1);
	}

/*
==========================================================================
page: myday - school
==========================================================================
*/

	#school {
		width:  100%;
		background: linear-gradient(rgba(18, 23, 44, 1), rgba(43, 72, 114, 1), rgba(167, 212, 231, 1), rgba(235, 237, 193, 1));
		font-size: .75rem;
		max-width: 1400px;
		margin: 0 auto;
		padding-top: 88px;
	}

	/* Tabellen */

	table {
		background-color: transparent;
		border-collapse: separate;
		border-spacing: 6px;
		border-style: solid;
		border-width: 0 10px;
		border-color: transparent;
		margin: 0;
		padding: 0 0 40px 0;
		text-align: left;
		width: 100%;
	}
	td {
		background-color: rgba(255, 255, 255 , .5);
		border-radius: 4px;
		box-shadow: 2px 2px 8px rgba(0, 0, 0, .1);
		color: rgba(0, 0, 0, 1);
		padding: 16px 8px;
	}
	td:nth-child(1) {
		width: 60px;
		text-align: center;
	}
	td.small {
		padding: 8px;
	}

	/*
	school: timetable
	*/

	#timetable {
		table-layout: fixed;
		text-align: center;
	}
	#timetable caption {
		color: rgba(255, 255, 255, .7);
	}
	#timetable caption .subline {
		border-top-color: rgba(255, 255, 255, .1);
	}
	#timetable td {
		opacity: 0.4;
	}
	#timetable .know,
	#timetable .today {
		opacity:  1.0;
	}
	#timetable .weekday,
	#timetable .time {
		color:rgba(238, 238, 238, 1);
	}
	#timetable .weekday {
		color:rgba(238, 238, 238, 1);
		font-size: 0.875rem;
	}
	#timetable .breakfast,
	#timetable .break,
	#timetable .lunch {
		background-color: rgba(112, 173, 71, 1)
	}
	#timetable .german {
		background-color: rgba(234, 175, 136, 1)
	}
	#timetable .music {
		background-color: rgba(161, 197, 198, 1)
	}
	#timetable .english {
		background-color: rgba(245, 229, 153, 1)
	}
	#timetable .mathmatics {
		background-color: rgba(229, 224, 236, 1.0)
	}
	#timetable .sports {
		background-color: rgba(222, 235, 246, 1.0)
	}
	#timetable .religion {
		background-color: rgba(214, 220, 228, 1.0)
	}
	#timetable .history,
	#timetable .geography {
		background-color: rgba(173, 185, 202, 1)
	}
	#timetable .study-time {
		background-color: rgba(199, 197, 186, 1)
	}
	#timetable .biology,
	#timetable .physics {
		background-color: rgba(193, 205, 222, 1)
	}
	#timetable .politics {
		background-color: rgba(216, 226, 217, 1.0)
	}
	#timetable .hebrew {
		background-color: rgba(219, 214, 226, 1)
	}
	#timetable .spanish {
		background-color: rgba(229, 191, 191, 1.0)
	}
	#timetable .art {
		background-color: rgba(171, 207, 202, 1)
	}
	#timetable .ag {
		background-color: rgba(209, 207, 196, 1)
	}
	#timetable .chemistry {
		background-color: rgba(208, 208, 176, 1)
	}
	#timetable .computer-science,
	#timetable .science {
		background-color: rgba(218, 218, 186, 1)
	}
	#timetable .mentor-hour {
		background-color: rgba(219, 217, 206, 1)
	}

	/*
	school: calendar
	*/

	#calendar caption {
		color: rgba(255, 255, 255, .8);
	}
	#calendar caption .subline {
		border-top-color: rgba(255, 255, 255, .1);
	}
	#calendar .urgent {
		color: rgba(220, 99, 50, 1);
	}
	#calendar .done {
		text-decoration: line-through;
	}
	#calendar .past {
		opacity: .5;
	}
	#calendar ul {
		line-height: 2;
		list-style: none;
	}

	/*
	school: links
	*/

	#links caption {
		color: rgba(0, 0, 0, .6);
	}
	#links caption .subline {
		border-top-color: rgba(0, 0, 0, .1);
	}
	#links ul {
		line-height: 2;
		list-style: none;
	}

/*
==========================================================================
page: ocean
==========================================================================
*/

	#ocean {
		background: linear-gradient(rgba(116, 196, 221, 1), rgba(110, 186, 210, 1), rgba(80, 132, 180, 1), rgba(58, 96, 143, 1), rgba(43, 72, 114, 1), rgba(24, 42, 74, 1), rgba(18, 23, 44, 1), rgba(6, 7, 9, 1) 18%, rgba(1, 1, 2, 1) 24%, rgba(0, 0, 0, 1) 30%);
		font-size: .75rem;
		margin: 0 auto;
		max-width: 1400px;
		overflow: hidden;
		position: relative;
		width:  100%;
	}

	/*
	ocean: headline
	*/

	#ocean #title {
		position: relative;
	}
	#ocean .headline {
		background-color: rgba(235, 237, 193, 1);
		color: rgba(0, 0, 0, .6);
		padding-top: 128px;
	}
	#ocean .subline {
		background-color: rgba(235, 237, 193, 1);
		border-top-color: rgba(0, 0, 0, .1);
		color: rgba(0, 0, 0, .6);
	}

	/*
	ocean:  depth scale
	*/

	#depth-scale {
		position: relative;
	}
	.depth {
		display: flex;
		 flex-wrap: wrap;
		/*height: 38px;*/
		justify-content: center;
		position: absolute;
		width: 100%;
	}
	.depth-line {
		border-bottom: 2px dotted rgba(255, 255, 255, .3);
		flex-grow: 1;
		height: 10px;
	}
	.depth-text {
		font-size: 20px;
		margin: 0 10px;
		text-align: center;
	}
	.depth-meter {
		color: rgba(255, 255, 255, .4);
	}
	.depth-zone {
		color: rgba(255, 255, 255, .2);
		font-size: 14px;
		margin-top: 4px;
		text-align: center;
		width: 100%;
	}

	/*
	ocean: porthole
	*/

	/*#porthole {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.porthole-top {
		margin: 0 auto;
		max-width: 1400px;
		width: 100%;
		height: 48px;
		position: relative;
		background-color: rgba(64, 58, 50, 1);
	}
	.porthole-image {
		position: relative;
		width: 100%;
		height: auto;
		margin: 0 auto;
		max-width: 1400px;
	}
	.porthole-bottom {
		margin: 0 auto;
		max-width: 1400px;
		width: 100%;
		height: 100%;
		position: absolute;
		margin-top: -2px;
		background-color: rgba(64, 58, 50, 1);
	}*/

	/*
	ocean: waves
	*/

	#wave {
		height: auto;
		line-height: 0;
		margin-top: -1px;
		position: relative;
		width: 120%;
	}
	#wave .wave-move {
		height: auto;
		margin-left: -10%;
		width: 200%;
		animation: wave-move 32s linear infinite;
	}
	@keyframes wave-move {
		0%   { margin-left: -10%; }
		100% { margin-left: -110%; }
	}
	#wave .wave-image {
		height:  auto;
		width:  100%;
	}

	/*
	ocean: light rays
	*/

	.light-rays {
		height: 10%;
		left: 0%;
		position: absolute;
		top: -5%;
		width: 100%;
	}
	.light-rays:before,
	.light-rays:after {
		content: "";
		height: 200%;
		position: absolute;
		top: -50%;
		width: 200%;
	}
	div:before {
		left: -50%;
		background: radial-gradient(rgba(255, 255, 255, .1), rgba(255, 255, 255, .0), rgba(255, 255, 255, .0), rgba(255, 255, 255, .0), rgba(255, 255, 255, .0));
		animation: light-rays-move-1 6s linear infinite;
	}
	@keyframes light-rays-move-1 {
		0%   { transform: rotate(15deg); }
		50%  { transform: rotate(25deg); }
		100% { transform: rotate(15deg); }
	}
	div:after {
		left: -20%;
		background: radial-gradient(rgba(0, 64, 128, .3), rgba(255, 255, 255, .0), rgba(0, 64, 128, .3), rgba(255, 255, 255, .0), rgba(255, 255, 255, .0));
		animation: light-rays-move-2 8s linear infinite;
	}
	@keyframes light-rays-move-2 {
		0%   { transform: rotate(10deg); }
		50%  { transform: rotate(20deg); }
		100% { transform: rotate(10deg); }
	}

	/*
	ocean: anthias
	*/

	#anthias {
		height: auto;
		position: absolute;
		margin-top: 2%;
		width: 100%;
	}
	#anthias .anthias-move {
		height: auto;
		left:50%;
		position: relative;
		width: 10%;
		animation: anthias-move 16s linear infinite;
	}
	@keyframes anthias-move {
		0%   { margin-top: 4%; left:50%; }
		25%  { margin-top: 6%; left:65%; }
		50%  { margin-top: 6%; left:60%; }
		75%  { margin-top: 4%; left:40%; }
		100% { margin-top: 4%; left:50%; }
	}
	#anthias .anthias-image {
		height:  auto;
		width: 100%;
	}
	#anthias .anthias-title {
		color: rgba(255, 255, 255, .9);
		display: block;
		margin-top: 5px;
		text-align: center;
		animation: anthias-title 16s linear infinite;
	}
	@keyframes anthias-title {
		0%, 40%   { opacity: 0 }
		44%, 50%  { opacity: 1 }
		54%, 100% { opacity: 0 }
	}


	/*
	ocean: anemone
	*/

	#anemone {
		height: auto;
		margin-top: 6%;
		position: absolute;
		width: 100%;
	}
	#anemone .anemone-move {
		height: auto;
		max-width: 160px;
		position: relative;
		width: 12%;
	}
	#anemone .anemone-image {
		height:  auto;
		width:  100%;
	}
	#anemone .anemone-title {
		color: rgba(255, 255, 255, .9);
		display: block;
		margin-left: 10px;
		text-align: right;
		animation: anemone-title 4s infinite;
	}
	@keyframes anemone-title {
		0%, 4%    { opacity: 0 }
		16%, 26%  { opacity: 1 }
		42%, 100% { opacity: 0 }
	}

	/*
	ocean: nemos
	*/

	#nemos {
		height: auto;
		margin-top: 8%;
		position: absolute;
		width: 100%;

	}
	#nemos .nemo_1-move {
		height: auto;
		max-width: 96px;
		position: relative;
		width: 8%;
		animation: nemo_1-move 4s ease-in infinite;
	}
	@keyframes nemo_1-move {
		0%   { left: 2%; }
		80%  { left: 18%; }
		100% { left: 2%; }
	}
	#nemos .nemo_1-image {
		height: auto;
		width: 100%;
		animation: nemo_1-image 4s infinite;
	}
	@keyframes nemo_1-image {
		0%, 79%  { transform: scaleX(1); }
		80%, 99% { transform: scaleX(-1); }
	}
	#nemos .nemo_1-title {
		color: rgba(255, 255, 255, .9);
		display: block;
		text-align: center;
		animation: nemo_1-title 4s infinite;
	}
	@keyframes nemo_1-title {
		0%, 36%   { opacity: 0 }
		52%, 62%  { opacity: 1 }
		78%, 100% { opacity: 0 }
	}
	#nemos .nemo_2-move {
		height: auto;
		max-width: 64px;
		position: relative;
		width: 6%;
		animation: nemo_2-move 4s linear infinite;
	}
	@keyframes nemo_2-move {
		0%   { left:2%; }
		90%  { left:10%; }
		100% { left:2%; }
	}
	#nemos .nemo_2-image {
		height: auto;
		width:  100%;
		animation: nemo_2-image 4s infinite;
	}
	@keyframes nemo_2-image {
		0%, 89%  { transform: scaleX(1);  }
		90%, 99% { transform: scaleX(-1); }
	}

	/*
	ocean: jakob
	*/

	#jakob {
		height: auto;
		position: absolute;
		width: 100%;
		margin-top: 1%;
	}
	#jakob .jakob-move {
		left: 29%;
		max-width: 220px;
		position: relative;
		width: 18%;
		animation: jakob-move 8s linear infinite;
	}
	@keyframes jakob-move {
		0%   { transform: rotate(0deg) translate(-2%, -2%) rotate(0deg); }
		50%  { transform: rotate(-195deg) translate(2%, 2%) rotate(185deg); }
		100% { transform: rotate(-360deg) translate(-2%, -2%) rotate(360deg); }
	}
	#jakob .jakob-image {
		height:  auto;
		width:  100%;
	}
	#jakob .jakob-title {
		color: rgba(255, 255, 255, .9);
		left: 28%;
		margin-top: 12%;
		max-width: 220px;
		padding-left: 10%;
		position: relative;
		animation: jakob-title 8s infinite;
	}
	@keyframes jakob-title {
		0%, 10%   { opacity: 0 }
		20%, 30%  { opacity: 1 }
		40%, 100% { opacity: 0 }
	}

	/*
	ocean: mini-seaturtle
	*/

	#mini-seaturtle {
		height: auto;
		margin-top: 22%;
		position: absolute;
		width: 100%;
	}
	#mini-seaturtle .mini-seaturtle-move {
		height: auto;
		left: 24%;
		max-width: 80px;
		position: relative;
		width: 6%;
		animation: mini-seaturtle-move 3s ease-in-out infinite;
	}
	@keyframes mini-seaturtle-move {
		0%   { margin-top: 0%; left: 24% }
		50%  { margin-top: 2%; left: 25% }
		100% { margin-top: 0%; left: 24% }
	}
	#mini-seaturtle .mini-seaturtle-image {
		height:  auto;
		width:  100%;
	}
	#mini-seaturtle .mini-seaturtle-title {
		color: rgba(255, 255, 255, .9);
		display: block;
		position: relative;
		text-align: center;
		animation: mini-seaturtle-title 8s infinite;
	}
	@keyframes mini-seaturtle-title {
		0%, 42%   { opacity: 0; }
		50%, 62%  { opacity: 1; }
		70%, 100% { opacity: 0; }
	}

	/*
	ocean: manatee
	*/

	#manatee {
		height: auto;
		position: absolute;
		width: 100%;
		animation: manatee 48s linear infinite;
	}
	@keyframes manatee {
		0%   { margin-top: 32%; }
		25%  { margin-top: 25%; }
		50%  { margin-top: 32%; }
		51%  { margin-top: 29%; }
		70%  { margin-top: 25%; }
		100% { margin-top: 32%; }
	}
	#manatee .manatee-move {
		height: auto;
		max-width: 500px;
		position: relative;
		width: 30%;
		animation: manatee-move 48s linear infinite;
	}
	@keyframes manatee-move {
		0%   { transform: rotate(-4deg); left: -50%; }
		25%  { transform: rotate(-4deg); left: 30%;  }
		50%  { transform: rotate(12deg); left: 110%; }
		51%  { transform: rotate(0deg);  left: 105%; }
		70%  { transform: rotate(0deg);  left: 30%;  }
		100% { transform: rotate(0deg);  left: -50%; }
	}
	#manatee .manatee-image {
		height: auto;
		width:  100%;
		animation: manatee-image 48s infinite;
	}
	@keyframes manatee-image {
		0%, 49%   { transform: scaleX(1);  }
		50%, 100% { transform: scaleX(-1); }
	}
	#manatee .manatee-title {
		color: rgba(255, 255, 255, .9);
		display: block;
		text-align: left;
		animation: manatee-title 48s infinite;
	}
	@keyframes manatee-title {
		0%, 60%   { opacity: 0 }
		62%, 66%  { opacity: 1 }
		68%, 100%  { opacity: 0 }
	}

	/*
	ocean: halleys gloche
	*/

	#halleys-gloche {
		height: auto;
		position: absolute;
		width: 100%;
	}
	#halleys-gloche .halleys-gloche-move {
		height: auto;
		left: 75%;
		margin-top:-40%;
		max-width: 300px;
		position: relative;
		width: 20%;
		animation: halleys-gloche-move 12s 5s ease-in-out infinite;
	}
	@keyframes halleys-gloche-move {
		0%   { margin-top: -40%; }
		50%  { margin-top: -5%; }
		65%  { margin-top: -5%; }
		100% { margin-top: -40%; }
	}
	#halleys-gloche .halleys-gloche-image {
		height: auto;
		width: 100%;
		animation: halleys-gloche-image 12s 5s linear infinite;
	}
	@keyframes halleys-gloche-image {
		0%   { transform: rotate(5deg); }
		20%  { transform: rotate(-5deg); }
		40%  { transform: rotate(2.5deg); }
		60%  { transform: rotate(0deg); }
		70%  { transform: rotate(0deg); }
		80%  { transform: rotate(-2.5deg); }
		100% { transform: rotate(5deg); }
	}
	#halleys-gloche .halleys-gloche-title {
		color: rgba(255, 255, 255, .9);
		display: block;
		margin-top: 5px;
		opacity: 0;
		text-align: center;
		animation: halleys-gloche-title 12s 5s infinite;
	}
	@keyframes halleys-gloche-title {
		0%, 16%   { opacity: 0 }
		22%, 28%  { opacity: 1 }
		34%, 100% { opacity: 0 }
	}

	/*
	ocean: sardine
	*/

	#sardine {
		clear: both;
		height: auto;
		margin-top: 42%;
		position: absolute;
		width: 100%;
	}
	#sardine .sardine-01-move {
		filter: brightness(80%);
		float: left;
		height: auto;
		max-width: 130px;
		position: relative;
		width: 10%;
		animation: sardine-01-move 32s linear infinite;
	}
	@keyframes sardine-01-move {
		0%   { transform: scaleX(-1); left: 65%; }
		11%  { transform: scaleX(-1); left: 18%; }
		12%  { transform: scaleX(1);  left: 18%; }
		19%  { transform: scaleX(1);  left: 80%; }
		20%  { transform: scaleX(-1); left: 80%; }
		29%  { transform: scaleX(-1); left: 15%; }
		30%  { transform: scaleX(1);  left: 15%  }
		39%  { transform: scaleX(1);  left: 70%; }
		40%  { transform: scaleX(-1); left: 70%  }
		49%  { transform: scaleX(-1); left: 30%; }
		50%  { transform: scaleX(1);  left: 30%; }
		59%  { transform: scaleX(1);  left: 80%; }
		60%  { transform: scaleX(-1); left: 80%; }
		69%  { transform: scaleX(-1); left: 10%; }
		70%  { transform: scaleX(1);  left: 10%  }
		79%  { transform: scaleX(1);  left: 60%; }
		80%  { transform: scaleX(-1); left: 60%  }
		89%  { transform: scaleX(-1); left: 30%; }
		90%  { transform: scaleX(1);  left: 30%  }
		100% { transform: scaleX(1);  left: 65%; }
	}
	#sardine .sardine-01-image {
		height:  auto;
		width:  100%;
	}
	#sardine .sardine-02-move {
		filter: brightness(90%);
		float: left;
		height: auto;
		margin-top: 1%;
		max-width: 146px;
		position: relative;
		width: 11%;
		animation: sardine-02-move 32s linear infinite;
	}
	@keyframes sardine-02-move {
		0%   { transform: scaleX(-1); left: 80%; }
		10%  { transform: scaleX(-1); left: 10%; }
		11%  { transform: scaleX(1);  left: 10%; }
		18%  { transform: scaleX(1);  left: 65%; }
		19%  { transform: scaleX(-1); left: 65%; }
		30%  { transform: scaleX(-1); left: 10%; }
		31%  { transform: scaleX(1);  left: 10%  }
		38%  { transform: scaleX(1);  left: 70%; }
		39%  { transform: scaleX(-1); left: 70%  }
		50%  { transform: scaleX(-1); left: 28%; }
		51%  { transform: scaleX(1);  left: 28%; }
		58%  { transform: scaleX(1);  left: 70%; }
		59%  { transform: scaleX(-1); left: 70%; }
		70%  { transform: scaleX(-1); left: 10%; }
		71%  { transform: scaleX(1);  left: 10%  }
		78%  { transform: scaleX(1);  left: 50%; }
		79%  { transform: scaleX(-1); left: 50%  }
		90%  { transform: scaleX(-1); left: 28%; }
		91%  { transform: scaleX(1);  left: 28%  }
		100% { transform: scaleX(1);  left: 80%; }
	}
	#sardine .sardine-02-image {
		height:  auto;
		width:  100%;
	}
	#sardine .sardine-03-move {
		height: auto;
		max-width: 169px;
		position: relative;
		width: 13%;
		animation: sardine-03-move 32s linear infinite;
	}
	@keyframes sardine-03-move {
		0%   { transform: scaleX(-1); left: 60%; }
		10%  { transform: scaleX(-1); left: 10%; }
		11%  { transform: scaleX(1);  left: 10%; }
		18%  { transform: scaleX(1);  left: 80%; }
		19%  { transform: scaleX(-1); left: 80%; }
		30%  { transform: scaleX(-1); left: 10%; }
		31%  { transform: scaleX(1);  left: 10%  }
		37%  { transform: scaleX(1);  left: 70%; }
		38%  { transform: scaleX(-1); left: 70%  }
		50%  { transform: scaleX(-1); left: 27%; }
		51%  { transform: scaleX(1);  left: 27%; }
		60%  { transform: scaleX(1);  left: 70%; }
		61%  { transform: scaleX(-1); left: 70%; }
		70%  { transform: scaleX(-1); left: 10%; }
		71%  { transform: scaleX(1);  left: 10%  }
		80%  { transform: scaleX(1);  left: 60%; }
		81%  { transform: scaleX(-1); left: 60%  }
		90%  { transform: scaleX(-1); left: 27%; }
		91%  { transform: scaleX(1);  left: 27%  }
		100% { transform: scaleX(1);  left: 60%; }
	}
	#sardine .sardine-03-image {
		height:  auto;
		width:  100%;
	}
	#sardine .sardine-04-move {
		filter: brightness(90%);
		float: left;
		height: auto;
		max-width: 143px;
		position: relative;
		width: 12%;
		animation: sardine-04-move 32s linear infinite;
	}
	@keyframes sardine-04-move {
		0%   { transform: scaleX(-1); left: 70%; }
		11%  { transform: scaleX(-1); left: 10%; }
		12%  { transform: scaleX(1);  left: 10%; }
		18%  { transform: scaleX(1);  left: 65%; }
		19%  { transform: scaleX(-1); left: 65%; }
		31%  { transform: scaleX(-1); left: 15%; }
		32%  { transform: scaleX(1);  left: 15%  }
		38%  { transform: scaleX(1);  left: 68%; }
		39%  { transform: scaleX(-1); left: 68%  }
		47%  { transform: scaleX(-1); left: 29%; }
		48%  { transform: scaleX(1);  left: 29%; }
		58%  { transform: scaleX(1);  left: 70%; }
		59%  { transform: scaleX(-1); left: 70%; }
		70%  { transform: scaleX(-1); left: 10%; }
		72%  { transform: scaleX(1);  left: 10%  }
		80%  { transform: scaleX(1);  left: 55%; }
		81%  { transform: scaleX(-1); left: 55%  }
		92%  { transform: scaleX(-1); left: 29%; }
		93%  { transform: scaleX(1);  left: 29%  }
		100% { transform: scaleX(1);  left: 70%; }
	}
	#sardine .sardine-04-image {
		height:  auto;
		width:  100%;
	}
	#sardine .sardine-05-move {
		filter: brightness(70%);
		float: left;
		height: auto;
		margin-top: 2%;
		max-width: 117px;
		position: relative;
		width: 8%;
		animation: sardine-05-move 32s linear infinite;
	}
	@keyframes sardine-05-move {
		0%   { transform: scaleX(-1); left: 75%; }
		11%  { transform: scaleX(-1); left: 8%;  }
		12%  { transform: scaleX(1);  left: 8%;  }
		18%  { transform: scaleX(1);  left: 65%; }
		19%  { transform: scaleX(-1); left: 65%; }
		30%  { transform: scaleX(-1); left: 10%; }
		31%  { transform: scaleX(1);  left: 10%  }
		37%  { transform: scaleX(1);  left: 60%; }
		38%  { transform: scaleX(-1); left: 60%  }
		49%  { transform: scaleX(-1); left: 18%; }
		50%  { transform: scaleX(1);  left: 18%; }
		60%  { transform: scaleX(1);  left: 60%; }
		61%  { transform: scaleX(-1); left: 60%; }
		70%  { transform: scaleX(-1); left: 5%;  }
		71%  { transform: scaleX(1);  left: 5%   }
		78%  { transform: scaleX(1);  left: 48%; }
		79%  { transform: scaleX(-1); left: 48%  }
		89%  { transform: scaleX(-1); left: 22%; }
		90%  { transform: scaleX(1);  left: 22%  }
		100% { transform: scaleX(1);  left: 75%; }
	}
	#sardine .sardine-05-image {
		height:  auto;
		width:  100%;
	}
	#sardine .sardine-06-move {
		filter: brightness(105%);
		height: auto;
		max-width: 182px;
		position: relative;
		width: 14%;
		animation: sardine-06-move 32s linear infinite;
	}
	@keyframes sardine-06-move {
		0%   { transform: scaleX(-1); left: 70%; }
		10%  { transform: scaleX(-1); left: 15%; }
		11%  { transform: scaleX(1);  left: 15%; }
		18%  { transform: scaleX(1);  left: 80%; }
		19%  { transform: scaleX(-1); left: 80%; }
		30%  { transform: scaleX(-1); left: 10%; }
		31%  { transform: scaleX(1);  left: 10%  }
		38%  { transform: scaleX(1);  left: 70%; }
		39%  { transform: scaleX(-1); left: 70%  }
		50%  { transform: scaleX(-1); left: 28%; }
		51%  { transform: scaleX(1);  left: 28%; }
		58%  { transform: scaleX(1);  left: 80%; }
		59%  { transform: scaleX(-1); left: 80%; }
		70%  { transform: scaleX(-1); left: 10%; }
		71%  { transform: scaleX(1);  left: 10%  }
		78%  { transform: scaleX(1);  left: 60%; }
		79%  { transform: scaleX(-1); left: 60%  }
		90%  { transform: scaleX(-1); left: 28%; }
		91%  { transform: scaleX(1);  left: 28%  }
		100% { transform: scaleX(1);  left: 70%; }
	}
	#sardine .sardine-06-image {
		height:  auto;
		width:  100%;
	}
	#sardine .sardine-07-move {
		filter: brightness(80%);
		height: auto;
		max-width: 117px;
		position: relative;
		width: 9%;
		animation: sardine-07-move 32s linear infinite;
	}
	@keyframes sardine-07-move {
		0%   { transform: scaleX(-1); left: 85%; }
		11%  { transform: scaleX(-1); left: 15%; }
		12%  { transform: scaleX(1);  left: 15%; }
		19%  { transform: scaleX(1);  left: 80%; }
		20%  { transform: scaleX(-1); left: 80%; }
		29%  { transform: scaleX(-1); left: 10%; }
		30%  { transform: scaleX(1);  left: 10%  }
		40%  { transform: scaleX(1);  left: 70%; }
		41%  { transform: scaleX(-1); left: 70%  }
		49%  { transform: scaleX(-1); left: 25%; }
		50%  { transform: scaleX(1);  left: 25%; }
		58%  { transform: scaleX(1);  left: 80%; }
		59%  { transform: scaleX(-1); left: 80%; }
		71%  { transform: scaleX(-1); left: 8%;  }
		72%  { transform: scaleX(1);  left: 8%   }
		80%  { transform: scaleX(1);  left: 55%; }
		81%  { transform: scaleX(-1); left: 55%  }
		89%  { transform: scaleX(-1); left: 25%; }
		90%  { transform: scaleX(1);  left: 25%  }
		100% { transform: scaleX(1);  left: 85%; }
	}
	#sardine .sardine-07-image {
		height:  auto;
		width:  100%;
	}

	#sardine .sardine-title {
		color: rgba(255, 255, 255, .8);
		display: block;
		left: -100%;
		max-width: 117px;
		position: absolute;
		text-align: center;
		top: 50%;
		transform: scaleX(-1);
		width: 9%;
		animation: sardine-title 32s infinite;
	}
	@keyframes sardine-title {
		0%, 21%   { opacity: 0 }
		23%, 28%  { opacity: 1 }
		30%, 100% { opacity: 0 }
	}

	/*
	ocean: 50 Meter
	*/

	/*
	ocean: dory
	*/

	#dory {
		height: auto;
		margin-top: 70%;
		position: absolute;
		width: 100%;
	}
	#dory .dory-move {
		height: auto;
		max-width: 98px;
		position: relative;
		width: 12%;
		animation: dory-move 8s infinite;
	}
	@keyframes dory-move {
		0%   { left: 70%; }
		50%  { left: 30%; }
		100% { left: 70%; }
	}
	#dory .dory-image {
		height: auto;
		width: 100%;
		animation: dory-image 8s infinite;
	}
	@keyframes dory-image {
		2%, 48%  { transform: scaleX(1);  }
		52%, 98% { transform: scaleX(-1); }
	}
	#dory .dory-title {
		color: rgba(255, 255, 255, .7);
		display: block;
		text-align: right;
		animation: dory-title 8s infinite;
	}
	@keyframes dory-title {
		0%, 5%    { opacity: 0 }
		13%, 33%  { opacity: 1 }
		41%, 100% { opacity: 0 }
	}

	/*
	ocean: seadragon
	*/

	#seadragon {
		height: auto;
		margin-top: 80%;
		position: absolute;
		width: 100%;
	}
	#seadragon .seadragon-move {
		height: auto;
		max-width: 180px;
		position: relative;
		width: 15%;
		animation: seadragon-move 16s linear infinite;
	}
	@keyframes seadragon-move {
		0%   { left: 40%; }
		50%  { left: 80%; }
		100% { left: 40%; }
	}
	#seadragon .seadragon-image {
		height: auto;
		width: 100%;
		animation: seadragon-image 16s infinite;
	}
	@keyframes seadragon-image {
		2%, 48%  { transform: scaleX(1); }
		52%, 98% { transform: scaleX(-1); }
	}
	#seadragon .seadragon-title {
		color: rgba(255, 255, 255, .7);
		display: block;
		margin-bottom: 10px;
		text-align: right;
		animation: seadragon-title 16s infinite;
	}
	@keyframes seadragon-title {
		0%, 15%   { opacity: 0 }
		23%, 38%  { opacity: 1 }
		46%, 100% { opacity: 0 }
	}

	/*
	ocean: mahimahi
	*/

	#mahimahi {
		height: auto;
		margin-top: 100%;
		position: absolute;
		width: 100%;
	}
	#mahimahi .mahimahi-move {
		height: auto;
		left: 110%;
		max-width: 320px;
		position: relative;
		width: 20%;
		animation: mahimahi-move 8s cubic-bezier(0, 0.5, 0, 0.5) 0.5s infinite;
	}
	@keyframes mahimahi-move {
		0%   { left:110%; }
		40%  { left:-30%; }
		100% { left:110%; }
	}
	#mahimahi .mahimahi-image {
		height: auto;
		width: 100%;
		animation: mahimahi-image 8s 0.5s infinite;
	}
	@keyframes mahimahi-image {
		0%, 39%  { transform: scaleX(1); }
		40%, 99% { transform: scaleX(-1); }
	}
	#mahimahi .mahimahi-title {
		color: rgba(255, 255, 255, .7);
		display: block;
		text-align: left;
		animation: mahimahi-title 8s 0.5s infinite;
	}
	@keyframes mahimahi-title {
		0%, 4%    { opacity: 0 }
		6%, 12%   { opacity: 1 }
		18%, 42%  { opacity: 0 }
		44%, 54%  { opacity: 1 }
		60%, 100% { opacity: 0 }
	}

	/*
	ocean: wrasse
	*/

	#wrasse {
		height: auto;
		margin-top: 115%;
		position: absolute;
		width: 100%;
	}
	#wrasse .wrasse-move {
		height: auto;
		left: 110%;
		max-width: 110px;
		position: relative;
		width: 15%;
		animation: wrasse-move 8s linear 0.5s infinite;
	}
	@keyframes wrasse-move {
		0%   { left:-10%; }
		40%  { left:50%;  }
		100% { left:200%; }
	}
	#wrasse .wrasse-image {
		height: auto;
		width: 100%;
	}
	#wrasse .wrasse-title {
		color: rgba(255, 255, 255, .7);
		display: block;
		text-align: left;
		animation: wrasse-title 8s 0.5s infinite;
	}
	@keyframes wrasse-title {
		0%, 35%   { opacity: 0 }
		37%, 47%  { opacity: 1 }
		49%, 100% { opacity: 0 }
	}

	/*
	ocean: 100 Meter
	*/

	/*
	ocean: orca
	*/

	#orca {
		height:  800px;
		margin-top: 135%;
		position: absolute;
		width: 100%;
	}
	#orca .orca-move {
		height: 100%;
		position: relative;
		width: 60%;
		animation: orca-move 8s infinite;
	}
	@keyframes orca-move {
		0%   { margin-top: 28%; transform: translate(175%, -10%) rotate(35deg); }
		50%  { margin-top: 0%;  transform: translate(50%, 0%) rotate(-5deg);    }
		100% { margin-top: 35%; transform: translate(-100%, 0%) rotate(-65deg); }
	}
	#orca .orca-skeleton-image {
		height: auto;
		left: 0;
		position: absolute;
		width: 100%;
	}
	#orca .orca-image {
		height: auto;
		position: absolute;
		width: 100%;
		animation: orca-image 8s infinite;
	}
	@keyframes orca-image {
		0%, 25%   { opacity: 1 }
		40%, 50%  { opacity: 0 }
		65%, 100% { opacity: 1 }
	}
	#orca .orca-title {
		color: rgba(255, 255, 255, .6);
		display: block;
		left: 50%;
		margin-top: 30%;
		position: absolute;
		animation: orca-title 8s infinite;
	}
	@keyframes orca-title {
		0%, 28%   { opacity: 0 }
		36%, 51%  { opacity: 1 }
		59%, 100% { opacity: 0 }
	}

	/*
	ocean: 150 Meter
	*/

	/*
	ocean: bullshark
	*/

	#bullshark {
		height: auto;
		margin-top: 210%;
		position: absolute;
		width: 100%;
	}
	#bullshark .bullshark-move {
		height: auto;
		position: relative;
		width: 0%;
		animation: bullshark-move 8s linear 8s infinite;
	}
	@keyframes bullshark-move {
		0%   { left: 60%;   width: 0%; }
		100% { left: -140%; width: 80%; }
	}
	#bullshark .bullshark-image {
		height: auto;
		width: 100%;
		animation: bullshark-image 8s linear 8s infinite;
	}
	@keyframes bullshark-image {
		0%   { filter: brightness(50%); }
		50%  { filter: brightness(90%); }
		100% { filter: brightness(100%); }
	}
	#bullshark .bullshark-title {
		color: rgba(255, 255, 255, .5);
		display: block;
		margin-bottom: 10px;
		opacity:  0;
		text-align: center;
		animation: bullshark-title 8s 8s infinite;
	}
	@keyframes bullshark-title {
		0%, 7%    { opacity: 0 }
		15%, 25%  { opacity: 1 }
		33%, 100% { opacity: 0 }
	}

	/*
	ocean: krill
	*/

	#krill {
		height: auto;
		margin-top: 210%;
		position: absolute;
		width: 100%;
	}
	#krill .krill-move {
		height: auto;
		left:64%;
		max-width: 383px;
		position: absolute;
		width: 30%;
	}
	#krill .krill-image {
		height: auto;
		width: 100%;
	}
	#krill .krill-title {
		color: rgba(255, 255, 255, .5);
		display: block;
		left:15%;
		position: absolute;
		animation: krill-title 8s infinite;
	}
	@keyframes krill-title {
		0%, 50%   { opacity: 0 }
		58%, 70%  { opacity: 1 }
		78%, 100% { opacity: 0 }
	}
	#krill .krill-loupe-move {
		height: auto;
		left:64%;
		max-width: 383px;
		position: relative;
		width: 30%;
		animation: krill-loupe-move 1s linear infinite;
	}
	@keyframes krill-loupe-move {
		0%   { transform: rotate(0deg) translateX(2%) rotate(0deg); }
		100% { transform: rotate(-360deg) translateX(2%) rotate(360deg); }
	}
	#krill .krill-loupe-image {
		height: auto;
		width: 100%;
	}

	/*
	ocean: 200 Meter
	*/

	/*
	ocean: seaturtle
	*/

	#seaturtle {
		height: auto;
		margin-top: 270%;
		position: absolute;
		width: 100%;
	}
	#seaturtle .seaturtle-move {
		height: auto;
		left: -12%;
		position: relative;
		width: 12%;
		animation: seaturtle-move 16s 10s linear infinite;
	}
	@keyframes seaturtle-move {
		0%   { left: -12%; width: 12%; }
		100% { left: 120%; width: 40%; }
	}
	#seaturtle .seaturtle-image {
		height: auto;
		width: 100%;
	}
	#seaturtle .seaturtle-title {
		color: rgba(255, 255, 255, .5);
		display: block;
		margin-top: 5px;
		min-width: 150px;
		opacity:  0;
		position: relative;
		text-align: left;
		animation: seaturtle-title 16s 10s infinite;
	}
	@keyframes seaturtle-title {
		0%, 40%   { opacity: 0 }
		44%, 50%  { opacity: 1 }
		54%, 100% { opacity: 0 }
	}

	/*
	ocean: freediver
	*/

	#freediver-cable {
		background-clip: padding-box;
		border-image: linear-gradient(to bottom,rgba(208, 220, 228, .5),rgba(208, 220, 228, .0)) 1 100%;
		border-style: solid;
		border-width: 1px;
		height: auto;
		left: 18%;
		margin-top: -5%;
		padding-top: 320%;
		position: absolute;
	}
	#freediver {
		height: auto;
		position: absolute;
		width: 100%;
		animation: freediver 16s ease-in-out 4s infinite;
	}
	@keyframes freediver {
		0%   { margin-top: 305% }
		5%   { margin-top: 289.75% }
		70%  { margin-top: 61% }
		100% { margin-top: 0% }
	}
	#freediver .freediver-move {
		height: auto;
		left: 17.5%;
		margin-top: -45%;
		max-width: 100px;
		opacity: 0.0;
		position: relative;
		width: 8%;
		animation: freediver-move 16s ease-in-out 4s infinite;
	}
	@keyframes freediver-move {
		0%   { opacity: 0.0; }
		5%   { opacity: 1.0; }
		70%  { opacity: 1.0; }
		100% { opacity: 1.0; }
	}
	#freediver .freediver-image {
		height: auto;
		width: 100%;
	}
	#freediver .freediver-title {
		color: rgba(255, 255, 255, .5);
		display: block;
		margin-left: 10px;
		text-align: right;
		animation: freediver-title 16s 4s infinite;
	}
	@keyframes freediver-title {
		0%, 10%   { opacity: 0 }
		14%, 24%  { opacity: 1 }
		28%, 56%  { opacity: 0 }
		74%, 100% { opacity: 0 }
	}

	/*
	ocean: murre
	*/

	#murre {
		height: auto;
		margin-top: -50%;
		padding-left: 60%;
		position: absolute;
		text-align: center;
		width: 100%;
		animation: murre 32s 5s linear infinite;
	}
	@keyframes murre {
		0%   { margin-top: -50%; }
		1%   { margin-top: 20%;  }
		2%   { margin-top: 40%;  }
		20%  { margin-top: 275%; }
		25%  { margin-top: 285%; }
		30%  { margin-top: 275%; }
		40%  { margin-top: 225%; }
		41%  { margin-top: 225%; }
		80%  { margin-top: -50%; }
		100% { margin-top: -50%; }
	}
	#murre .murre-image {
		background-repeat: no-repeat;
		background-size: contain;
		display: block;
		height: auto;
		max-width: 100px;
		position: relative;
		width: 8%;
		animation: murre-image 32s 5s linear infinite;
	}
	@keyframes murre-image {
		0%   { filter: brightness(100%); transform: translate(-90%, 0%) rotate(0deg);   background-image: url("../media/images/ocean/murre-01.png") }
		1%   { filter: brightness(100%); transform: translate(-90%, 0%) rotate(0deg);   background-image: url("../media/images/ocean/murre-01.png") }
		2%   { filter: brightness(100%); transform: translate(-90%, 0%) rotate(0deg);   background-image: url("../media/images/ocean/murre-02.gif") }
		20%  { filter: brightness(80%);  transform: translate(-90%, 0%) rotate(0deg);   background-image: url("../media/images/ocean/murre-02.gif") }
		25%  { filter: brightness(50%);  transform: translate(0%, 0%) rotate(-90deg);   background-image: url("../media/images/ocean/murre-02.gif") }
		30%  { filter: brightness(80%);  transform: translate(90%, 0%) rotate(-180deg); background-image: url("../media/images/ocean/murre-02.gif") }
		40%  { filter: brightness(100%); transform: translate(90%, 0%) rotate(-180deg); background-image: url("../media/images/ocean/murre-02.gif") }
		41%  { filter: brightness(100%); transform: translate(90%, 0%) rotate(-180deg); background-image: url("../media/images/ocean/murre-03.gif") }
		80%  { filter: brightness(100%); transform: translate(90%, 0%) rotate(-180deg); background-image: url("../media/images/ocean/murre-03.gif") }
		100% { filter: brightness(100%); transform: translate(90%, 0%) rotate(-180deg); background-image: url("../media/images/ocean/murre-03.gif") }
	}
	#murre .murre-title {
		color: rgba(255, 255, 255, .4);
		display: block;
		opacity: 0;
		position: relative;
		text-align: left;
		animation: murre-title 32s 5s linear infinite;
	}
	@keyframes murre-title {
		0%, 22%   { opacity: 0 }
		23%, 27%  { opacity: 1 }
		28%, 100% { opacity: 0 }
	}

	/*
	ocean: 300 Meter
	*/

	/*
	ocean: dolphin
	*/

	#dolphin {
		height: auto;
		margin-top: 320%;
		position: absolute;
		width: 100%;
	}
	#dolphin .dolphin-move {
		height: auto;
		left: 112%;
		position: relative;
		width: 12%;
		max-width: 400px;
		animation: dolphin-move 12s 8s linear infinite;
	}
	@keyframes dolphin-move {
		0%   { left: 124%; width: 12%; margin-top: 0%;}
		100% { left: -30%; width: 30%; margin-top: 60%;}
	}
	#dolphin .dolphin-image {
		height: auto;
		width: 100%;
	}
	#dolphin .dolphin-title {
		color: rgba(255, 255, 255, .5);
		display: block;
		min-width: 150px;
		opacity:  0;
		position: relative;
		text-align: center;
		animation: dolphin-title 12s 8s linear infinite;
	}
	@keyframes dolphin-title {
		0%, 36%   { opacity: 0 }
		44%, 46%  { opacity: 1 }
		54%, 100% { opacity: 0 }
	}

	/*
	ocean: nautilus
	*/

	#nautilus {
		height: auto;
		margin-top: 400%;
		position: absolute;
		width: 100%;
	}
	#nautilus .nautilus-move {
		height: auto;
		left: 110%;
		max-width: 150px;
		position: relative;
		width: 20%;
		animation: nautilus-move 32s linear infinite;
	}
	@keyframes nautilus-move {
		0%   { left: -20%; }
		100% { left: 100%; }
	}
	#nautilus .nautilus-image {
		height: auto;
		width: 100%;
		animation: nautilus-image 32s linear infinite;
	}
	@keyframes nautilus-image {
		0%   { filter: brightness(40%); }
		50%  { filter: brightness(80%); }
		100% { filter: brightness(40%); }
	}
	#nautilus .nautilus-title {
		text-align: center;
		color: rgba(255, 255, 255, .7);
		display: block;
		text-align: center;
		animation: nautilus-title 32s linear infinite;
	}
	@keyframes nautilus-title {
		0%, 40%   { opacity: 0; }
		42%, 52%  { opacity: 1; }
		54%, 100% { opacity: 0; }
	}

	/*
	ocean: 400 Meter
	*/

	/*
	ocean: giant crab
	*/

	#giant-crab {
		height: auto;
		margin-top: 510%;
		position: absolute;
		width: 100%;
	}
	#giant-crab .giant-crab-move {
		height: auto;
		max-width: 180px;
		position: absolute;
		right: 0;
		width: 15%;
	}
	#giant-crab .giant-crab-image {
		height: auto;
		width: 100%;
		animation: giant-crab-image 24s infinite;
	}

	@keyframes giant-crab-image {
		0%   { filter: brightness(50%);  }
		5%   { filter: brightness(80%);  }
		10%  { filter: brightness(50%);  }
		15%  { filter: brightness(100%); }
		20%  { filter: brightness(70%);  }
		25%  { filter: brightness(100%); }
		30%  { filter: brightness(50%);  }
		35%  { filter: brightness(80%);  }
		40%  { filter: brightness(60%);  }
		45%  { filter: brightness(100%); }
		50%  { filter: brightness(90%);  }
		55%  { filter: brightness(70%);  }
		60%  { filter: brightness(50%);  }
		65%  { filter: brightness(90%);  }
		70%  { filter: brightness(60%);  }
		75%  { filter: brightness(100%); }
		80%  { filter: brightness(80%);  }
		85%  { filter: brightness(60%);  }
		90%  { filter: brightness(50%);  }
		95%  { filter: brightness(100%); }
		100% { filter: brightness(50%);  }
	}
	#giant-crab .giant-crab-title {
		color: rgba(255, 255, 255, .5);
		display: block;
		margin-top: 35%;
		margin-right: 8%;
		opacity:  0;
		position: relative;
		text-align: right;
		animation: giant-crab-title 24s infinite;
	}
	@keyframes giant-crab-title {
		0%, 20%   { opacity: 0 }
		24%, 30%  { opacity: 1 }
		34%, 66%  { opacity: 0 }
		70%, 76%  { opacity: 1 }
		80%, 100% { opacity: 0 }
	}

	/*
	ocean: mola-mola
	*/

	#mola-mola {
		height: auto;
		margin-top: 590%;
		position: absolute;
		width: 100%;
	}
	#mola-mola .mola-mola-move {
		height: auto;
		margin-left: 60%;
		max-width: 400px;
		position: relative;
		width: 30%;
	}
	#mola-mola .mola-mola-image {
		height: auto;
		width: 100%;
	}
	#mola-mola .mola-mola-title {
		color: rgba(255, 255, 255, .5);
		display: block;
		margin-top: 5px;
		opacity:  0;
		position: relative;
		text-align: center;
		animation: mola-mola-title 5s infinite;
	}
	@keyframes mola-mola-title {
		0%, 65%  { opacity: 0 }
		75%, 90% { opacity: 1 }
		100%     { opacity: 0 }
	}

	/*
	ocean: 500 Meter
	*/

	/*
	ocean: bluewhale
	*/

	#bluewhale {
		height: auto;
		margin-top: 640%;
		position: absolute;
		width: 100%;
	}
	#bluewhale .bluewhale-move {
		height: auto;
		left: 150%;
		max-width: 1162px;
		position: relative;
		width: 125%;
		animation: bluewhale-move 24s linear infinite;
	}
	@keyframes bluewhale-move {
		0%   { left: 100%;  margin-top: 0%  }
		100% { left: -180%; margin-top: 20% }
	}
	#bluewhale .bluewhale-image {
		height: auto;
		width: 100%;
	}
	#bluewhale .bluewhale-title {
		color: rgba(255, 255, 255, .5);
		display: block;
		margin-top: 5px;
		min-width: 150px;
		opacity:  0;
		position: relative;
		text-align: center;
		animation: bluewhale-title 24s infinite;
	}
	@keyframes bluewhale-title {
		0%, 30%   { opacity: 0 }
		34%, 40%  { opacity: 1 }
		44%, 100% { opacity: 0 }
	}

	/*
	ocean: 600 Meter
	*/

	/*
	ocean: deepdiver
	*/

	#deepdiver {
		height: auto;
		margin-top: 775%;
		position: absolute;
		width: 100%;
	}
	#deepdiver .deepdiver-move {
		left: 65%;
		max-width: 240px;
		position: relative;
		width: 20%;
	}
	#deepdiver .deepdiver-image {
		height:  auto;
		width:  100%;
		animation: deepdiver-image-move 8s linear infinite;
	}
	@keyframes deepdiver-image-move {
		0%   { transform: rotate(5deg)  }
		50%  { transform: rotate(-5deg) }
		100% { transform: rotate(5deg)  }
	}
	#deepdiver .deepdiver-title {
		color: rgba(255, 255, 255, .9);
		margin-top: 10%;
		position: relative;
		text-align: center;
		animation: deepdiver-title 8s infinite;
	}
	@keyframes deepdiver-title {
		0%, 10%   { opacity: 0 }
		20%, 30%  { opacity: 1 }
		40%, 100% { opacity: 0 }
	}

	/*
	ocean: 700 Meter
	*/

	/*
	ocean: coelacanth
	*/

	#coelacanth {
		height: auto;
		margin-top: 905%;
		position: absolute;
		width: 100%;
	}
	#coelacanth .coelacanth-move {
		height: auto;
		left: 110%;
		max-width: 400px;
		position: relative;
		width: 35%;
		animation: coelacanth-move 128s linear infinite;
	}
	@keyframes coelacanth-move {
		0%   { left: 100%; }
		50%  { left: -45%; }
		51%  { left: -46%; }
		100% { left: 110%; }
	}
	#coelacanth .coelacanth-image {
		height: auto;
		width: 100%;
		animation: coelacanth-image 128s linear infinite;
	}
	@keyframes coelacanth-image {
		0%, 50%   { transform: scaleX(1);  }
		51%, 100% { transform: scaleX(-1); }
	}
	#coelacanth .coelacanth-title {
		text-align: center;
		color: rgba(255, 255, 255, .7);
		display: block;
		margin-top: 5%;
		text-align: right;
		animation: coelacanth-title 128s linear infinite;
	}
	@keyframes coelacanth-title {
		0%, 20%   { opacity: 0; }
		21%, 28%  { opacity: 1; }
		29%, 62%  { opacity: 0; }
		63%, 70%  { opacity: 0; }
		71%, 79%  { opacity: 1; }
		80%, 100% { opacity: 0; }
	}

	/*
	ocean: 800 Meter
	*/

	/*
	ocean: giant-oarfish
	*/

	#giant-oarfish {
		height: auto;
		margin-top: 990%;
		position: absolute;
		width: 100%;
	}
	#giant-oarfish .giant-oarfish-move {
		height: auto;
		left: 110%;
		max-width: 600px;
		position: relative;
		width: 80%;
		animation: giant-oarfish-move 16s linear infinite;
	}
	@keyframes giant-oarfish-move {
		0%   { left:-90%; }
		100% { left:100%; }
	}
	#giant-oarfish .giant-oarfish-image {
		height: auto;
		transform: rotate(1deg);
		width: 100%;
	}
	#giant-oarfish .giant-oarfish-title {
		color: rgba(255, 255, 255, .7);
		display: block;
		text-align: center;
		animation: giant-oarfish-title 16s infinite;
	}
	@keyframes giant-oarfish-title {
		0%, 35%   { opacity: 0 }
		37%, 47%  { opacity: 1 }
		49%, 100% { opacity: 0 }
	}

	/*
	ocean: marrus
	*/

	#marrus {
		height: auto;
		margin-top: 1060%;
		position: absolute;
		width: 100%;
	}
	#marrus .marrus-move {
		height: auto;
		left: 40%;
		max-width: 75px;
		position: relative;
		width: 8%;
	}
	#marrus .marrus-image {
		height: auto;
		width: 100%;
		animation: marrus-image 12s ease-in-out infinite;
	}
	@keyframes marrus-image {
		0%   { transform: rotate(25deg) translateX(0%) rotate(25deg); }
		50%  { transform: rotate(35deg) translateX(0%) rotate(35deg); }
		100% { transform: rotate(25deg) translateX(0%) rotate(25deg); }
	}
	#marrus .marrus-title {
		color: rgba(255, 255, 255, .7);
		display: block;
		margin-top: -10%;
		position: relative;
		text-align: center;
		width:  100%;
		animation: marrus-title 12s linear infinite;
	}
	@keyframes marrus-title {
		0%, 80%   { opacity: 0; }
		84%, 96%  { opacity: 1; }
		100%      { opacity: 0; }
	}

	/*
	ocean: 900 Meter
	*/

	/*
	ocean: deepsea-jellyfish
	*/

	#deepsea-jellyfish {
		height: auto;
		margin-top: 1120%;
		position: absolute;
		width: 100%;
	}
	#deepsea-jellyfish .deepsea-jellyfish-move {
		height: auto;
		left: 110%;
		max-width: 171px;
		position: absolute;
		width: 20%;
		animation: deepsea-jellyfish-move 24s  infinite;
	}
	@keyframes deepsea-jellyfish-move {
		0%   { margin-top: 120%; left: -20%; }
		40%  { margin-top: 70%;  left: 35%;  }
		60%  { margin-top: 50%;  left: 45%;  }
		100% { margin-top: 0% ;  left: 100%; }
	}
	#deepsea-jellyfish .deepsea-jellyfish-image {
		height: auto;
		width: 100%;
		animation: deepsea-jellyfish-image 24s linear infinite;
	}
	@keyframes deepsea-jellyfish-image {
		0%   { transform: rotate(80deg); }
		50%  { transform: rotate(0deg);  }
		100% { transform: rotate(80deg); }
	}
	#deepsea-jellyfish .deepsea-jellyfish-title {
		color: rgba(255, 255, 255, .7);
		display: block;
		margin-top: 5%;
		text-align: center;
		text-align: center;
		animation: deepsea-jellyfish-title 24s linear infinite;
	}
	@keyframes deepsea-jellyfish-title {
		0%, 40%   { opacity: 0; }
		42%, 52%  { opacity: 1; }
		56%, 100% { opacity: 0; }
	}

	/*
	ocean: 1000 Meter
	*/

	/*
	ocean: anglerfish
	*/

	#anglerfish {
		height: auto;
		margin-top: 1290%;
		position: absolute;
		width: 100%;
	}
	#anglerfish .anglerfish-move {
		height: auto;
		left: 110%;
		max-width: 235px;
		position: relative;
		width: 18%;
		animation: anglerfish-move 36s linear infinite;
	}
	@keyframes anglerfish-move {
		0%   { left: -20%; margin-top: 0%;  }
		10%  { left: 5%;   margin-top: 5%;  }
		20%  { left: 30%;  margin-top: 0%;  }
		30%  { left: 55%;  margin-top: 10%; }
		40%  { left: 80%;  margin-top: 0%;  }
		50%  { left: 105%; margin-top: 5%;  }
		51%  { left: 101%; margin-top: 0%;  }
		100% { left: -25%; margin-top: 0%;  }
	}
	#anglerfish .anglerfish-image {
		height: auto;
		width: 100%;
		animation: anglerfish-image 36s linear infinite;
	}
	@keyframes anglerfish-image {
		0%, 5%    { transform: scaleX(-1) rotate(-5deg);  }
		15%       { transform: scaleX(-1) rotate(5deg);   }
		25%       { transform: scaleX(-1) rotate(-10deg); }
		35%       { transform: scaleX(-1) rotate(10deg);  }
		45%, 50%  { transform: scaleX(-1) rotate(-5deg);  }
		51%, 100% { transform: scaleX(1) rotate(-0deg);   }
	}
	#anglerfish .anglerfish-title {
		color: rgba(255, 255, 255, .7);
		display: block;
		margin-top: 5%;
		text-align: center;
		animation: anglerfish-title 36s linear infinite;
	}
	@keyframes anglerfish-title {
		0%, 20%   { opacity: 0; }
		21%, 28%  { opacity: 1; }
		29%, 62%  { opacity: 0; }
		63%, 70%  { opacity: 0; }
		71%, 79%  { opacity: 1; }
		80%, 100% { opacity: 0; }
	}

	/*
	ocean: 2000 Meter
	*/

	/*
	ocean: spermwhale
	*/

	#spermwhale {
		height: auto;
		position: absolute;
		text-align: center;
		width: 100%;
		animation: spermwhale 96s linear infinite;
	}
	@keyframes spermwhale {
		0%   { margin-top: 0%; }
		100% { margin-top: 1536%; }
	}
	#spermwhale .spermwhale-move {
		max-width: 800px;
		position: relative;
		width: 50%;
		animation: spermwhale-move 96s linear infinite;
	}
	@keyframes spermwhale-move {
		0%   { opacity: 0; left: 30%; transform: rotate(-75deg); }
		18%  { opacity: .5; }
		20%  { opacity: 1;  }
		85%  { opacity: 1;  }
		100% { opacity: 0; left: 10%; transform: rotate(-75deg); }
	}
	#spermwhale .spermwhale-image {
		display: block;
		height: auto;
		transform: scaleX(-1) rotate(-63deg);
		width: 100%;
	}
	#spermwhale .spermwhale-title {
		color: rgba(255, 255, 255, .7);
		display: block;
		margin-top: 70%;
		padding-left: 20%;
		position: absolute;
		text-align: left;
		width: 100%;
		animation: spermwhale-title 96s linear infinite;
	}
	@keyframes spermwhale-title {
		0%, 13%   { opacity: 0; transform: rotate(75deg); }
		14%, 16%  { opacity: 1; transform: rotate(75deg); }
		17%, 100% { opacity: 0; transform: rotate(75deg); }
	}

	/*
	ocean: giant-squid
	*/

	#giant-squid {
		height: auto;
		margin-top: 1536%;
		position: absolute;
		width: 90%;
	}
	#giant-squid .giant-squid-move {
		height: auto;
		left: 110%;
		max-width: 800px;
		position: relative;
		width: 100%;
		animation: giant-squid-move 24s linear infinite;
	}
	@keyframes giant-squid-move {
		0%   { left: -100%; }
		50%  { left: 120%;  }
		51%  { left: 120%;  }
		100% { left: -100%; }
	}
	#giant-squid .giant-squid-image {
		height: auto;
		width: 100%;
		animation: giant-squid-image 24s linear infinite;
	}
	@keyframes giant-squid-image {
		0%, 50%   { transform: scaleX(1);  }
		51%, 100% { transform: scaleX(-1); }
	}
	#giant-squid .giant-squid-title {
		color: rgba(255, 255, 255, .7);
		display: block;
		margin-top: -20%;
		text-align: left;
		animation: giant-squid-title 24s linear infinite;
	}
	@keyframes giant-squid-title {
		0%, 25%   { opacity: 0; }
		27%, 33%  { opacity: 1; }
		35%, 100% { opacity: 0; }
	}

	/*
	ocean: 3000 Meter
	*/

	/*
	ocean: cuvier
	*/

	#cuvier {
		height: auto;
		margin-top: 1820%;
		position: absolute;
		width: 100%;
	}
	#cuvier .cuvier-move {
		height: auto;
		left: 112%;
		position: relative;
		width: 40%;
		max-width: 300px;
		max-width: 400px;
		animation: cuvier-move 16s linear infinite;
	}
	@keyframes cuvier-move {
		0%   { left: 100%; width: 40%; margin-top: 0%;}
		100% { left: -60%; width: 60%; margin-top: 10%;}
	}
	#cuvier .cuvier-image {
		height: auto;
		width: 100%;
	}
	#cuvier .cuvier-title {
		color: rgba(255, 255, 255, .5);
		display: block;
		min-width: 150px;
		opacity:  0;
		position: relative;
		text-align: center;
		animation: cuvier-title 16s linear infinite;
	}
	@keyframes cuvier-title {
		0%, 36%   { opacity: 0 }
		44%, 50%  { opacity: 1 }
		58%, 100% { opacity: 0 }
	}

	/*
	ocean: titanic
	*/

	#titanic {
		height: 500px;
		left:10%;
		margin-top: 1980%;
		max-width: 1100px;
		position: absolute;
		width: 80%;
	}
	#titanic .titanic-image {
		background-repeat: no-repeat;
		background-size: contain;
		height: auto;
		width: 100%;
		animation: titanic-image 16s linear infinite;
	}
	@keyframes titanic-image {
		0%    { filter: brightness(100%); background-image: url("../media/images/ocean/titanic-wreck.png"); }
		40%   { filter: brightness(100%); background-image: url("../media/images/ocean/titanic-wreck.png"); }
		45%   { filter: brightness(0%);   background-image: url("../media/images/ocean/titanic-wreck.png"); }
		46%   { filter: brightness(0%);   background-image: url("../media/images/ocean/titanic-lego.png");  }
		51%   { filter: brightness(100%); background-image: url("../media/images/ocean/titanic-lego.png");  }
		89%   { filter: brightness(100%); background-image: url("../media/images/ocean/titanic-lego.png");  }
		94%   { filter: brightness(0%);   background-image: url("../media/images/ocean/titanic-lego.png");  }
		95%   { filter: brightness(0%);   background-image: url("../media/images/ocean/titanic-wreck.png"); }
		100%  { filter: brightness(100%); background-image: url("../media/images/ocean/titanic-wreck.png"); }
	}
	#titanic .titanic-wreck-title {
		color: rgba(255, 255, 255, .5);
		display: block;
		animation: titanic-wreck-title 16s infinite;
	}
	@keyframes titanic-wreck-title {
		0%, 10%   { opacity: 0 }
		15%, 40%  { opacity: 1 }
		45%, 100% { opacity: 0 }
	}
	#titanic .titanic-lego-title {
		color: rgba(255, 255, 255, .5);
		display: block;
		text-align: center;
		animation: titanic-lego-title 16s infinite;
	}
	@keyframes titanic-lego-title {
		0%, 61%   { opacity: 0 }
		66%, 89%  { opacity: 1 }
		94%, 100% { opacity: 0 }
	}

	/*
	ocean: 150 Meter
	*/

	/*
	ocean: megamouth
	*/

	#megamouth {
		height: auto;
		margin-top: 2200%;
		position: absolute;
		width: 100%;
	}
	#megamouth .megamouth-move {
		height: auto;
		position: absolute;
		width: 0%;
		animation: megamouth-move 32s linear infinite;
	}
	@keyframes megamouth-move {
		0%   { left: 0%;   margin-top: 0%; width: 0px;   }
		45%  { left: 100%; margin-top: 5%; width: 400px; }
		55%  { left: 100%; margin-top: 0%; width: 400px; }
		100% { left: -50%; margin-top: 5%; width: 20px;  }
	}
	#megamouth .megamouth-image {
		background-repeat: no-repeat;
		background-size: contain;
		height: auto;
		width: 100%;
		animation: megamouth-image 32s linear infinite;
	}
	@keyframes megamouth-image {
		0%   { filter: brightness(0%);   background-image: url("../media/images/ocean/megamouth-01.png"); }
		25%  { filter: brightness(100%);  background-image: url("../media/images/ocean/megamouth-01.png"); }
		50%  { filter: brightness(100%); background-image: url("../media/images/ocean/megamouth-01.png"); }
		51%  { filter: brightness(100%); background-image: url("../media/images/ocean/megamouth-02.png"); }
		100% { filter: brightness(0%);   background-image: url("../media/images/ocean/megamouth-02.png"); }
	}
	#megamouth .megamouth-title {
		color: rgba(255, 255, 255, .5);
		display: block;
		margin-top: 10px;
		opacity:  0;
		text-align: left;
		animation: megamouth-title 32s linear infinite;
	}
	@keyframes megamouth-title {
		0%, 15%   { opacity: 0 }
		19%, 25%  { opacity: 1 }
		29%, 100% { opacity: 0 }
	}

	/*
	ocean: 5000 Meter
	*/

	/*
	ocean: fangtooth
	*/

	#fangtooth {
		height: auto;
		margin-top: 2350%;
		position: absolute;
		width: 90%;
	}
	#fangtooth .fangtooth-move {
		height: auto;
		left: 40%;
		max-width: 300px;
		position: relative;
		width: 40%;
		animation: fangtooth-move 48s linear infinite;
	}
	@keyframes fangtooth-move {
		0%   { left: -40%; }
		50%  { left: 120%; }
		51%  { left: 120%; }
		100% { left: -40%; }
	}
	#fangtooth .fangtooth-image {
		height: auto;
		width: 100%;
		animation: fangtooth-image 48s linear infinite;
	}
	@keyframes fangtooth-image {
		0%   { transform: scaleX(-1); filter: brightness(0%);   }
		10%  { transform: scaleX(-1); filter: brightness(25%);  }
		20%  { transform: scaleX(-1); filter: brightness(100%); }
		30%  { transform: scaleX(-1); filter: brightness(100%); }
		40%  { transform: scaleX(-1); filter: brightness(25%);  }
		50%  { transform: scaleX(-1); filter: brightness(0%);   }
		51%  { transform: scaleX(1);  filter: brightness(0%);   }
		60%  { transform: scaleX(1);  filter: brightness(25%);  }
		70%  { transform: scaleX(1);  filter: brightness(100%); }
		80%  { transform: scaleX(1);  filter: brightness(100%); }
		90%  { transform: scaleX(1);  filter: brightness(25%);  }
		100% { transform: scaleX(1);  filter: brightness(0%);   }
	}
	#fangtooth .fangtooth-title {
		color: rgba(255, 255, 255, .5);
		display: block;
		text-align: left;
		animation: fangtooth-title 48s linear infinite;
	}
	@keyframes fangtooth-title {
		0%, 20%   { opacity: 0; }
		21%, 24%  { opacity: 1; }
		25%, 100% { opacity: 0; }
	}

	/*
	ocean: 6000 Meter
	*/

	/*
	ocean: grenadier
	*/

	#grenadier {
		height: auto;
		margin-top: 2460%;
		position: absolute;
		width: 100%;
	}
	#grenadier .grenadier-move {
		height: auto;
		left: 110%;
		max-width: 400px;
		position: relative;
		width: 45%;
		animation: grenadier-move 24s linear infinite;
	}
	@keyframes grenadier-move {
		0%   { left: -45%; }
		50%  { left: 101%; }
		51%  { left: 101%; }
		100% { left: -45%; }
	}
	#grenadier .grenadier-image {
		height: auto;
		width: 100%;
		animation: grenadier-image 24s linear infinite;
	}
	@keyframes grenadier-image {
		0%   { transform: scaleX(1);  filter: brightness(25%);  }
		10%  { transform: scaleX(1);  filter: brightness(100%); }
		20%  { transform: scaleX(1);  filter: brightness(35%);  }
		30%  { transform: scaleX(1);  filter: brightness(25%);  }
		40%  { transform: scaleX(1);  filter: brightness(100%); }
		50%  { transform: scaleX(1);  filter: brightness(45%);  }
		51%  { transform: scaleX(-1); filter: brightness(45%);  }
		60%  { transform: scaleX(-1); filter: brightness(25%);  }
		70%  { transform: scaleX(-1); filter: brightness(30%);  }
		80%  { transform: scaleX(-1); filter: brightness(100%); }
		90%  { transform: scaleX(-1); filter: brightness(25%);  }
		100% { transform: scaleX(-1); filter: brightness(25%);  }
	}
	#grenadier .grenadier-title {
		text-align: center;
		color: rgba(255, 255, 255, .5);
		display: block;
		text-align: left;
		animation: grenadier-title 24s linear infinite;
	}
	@keyframes grenadier-title {
		0%, 20%   { opacity: 0; text-align: left;  }
		21%, 28%  { opacity: 1; text-align: left;  }
		29%, 62%  { opacity: 0; text-align: left;  }
		63%, 70%  { opacity: 0; text-align: right; }
		71%, 79%  { opacity: 1; text-align: right; }
		80%, 100% { opacity: 0; text-align: right; }
	}

	/*
	ocean: chiton
	*/

	#chiton {
		height: auto;
		margin-top: 2490%;
		position: absolute;
		width: 100%;
	}
	#chiton .chiton-move {
		height: auto;
		max-width: 65px;
		position: absolute;
		width: 10%;
	}
	#chiton .chiton-image {
		height: auto;
		width: 100%;
		animation: chiton-image 24s infinite;
	}
	@keyframes chiton-image {
		0%   { filter: brightness(50%);  }
		10%  { filter: brightness(100%); }
		20%  { filter: brightness(70%);  }
		30%  { filter: brightness(50%);  }
		40%  { filter: brightness(100%); }
		50%  { filter: brightness(90%);  }
		60%  { filter: brightness(50%);  }
		70%  { filter: brightness(60%);  }
		80%  { filter: brightness(100%); }
		90%  { filter: brightness(50%);  }
		100% { filter: brightness(50%);  }
	}
	#chiton .chiton-title {
		color: rgba(255, 255, 255, .5);
		display: block;
		margin-top: 8%;
		margin-left: 8%;
		opacity:  0;
		position: relative;
		text-align: left;
		animation: chiton-title 24s infinite;
	}
	@keyframes chiton-title {
		0%, 20%   { opacity: 0 }
		24%, 30%  { opacity: 1 }
		34%, 66%  { opacity: 0 }
		70%, 76%  { opacity: 1 }
		80%, 100% { opacity: 0 }
	}

	/*
	ocean: 7000 Meter
	*/

	/*
	ocean: comb-jellyfish
	*/

	#comb-jellyfish {
		height: auto;
		margin-top: 2620%;
		position: absolute;
		width: 100%;
	}
	#comb-jellyfish .comb-jellyfish-move {
		height: auto;
		left: 40%;
		max-width: 150px;
		position: absolute;
		width: 20%;
	}
	#comb-jellyfish .comb-jellyfish-image {
		height: auto;
		width: 100%;
		animation: comb-jellyfish-image 12s ease-in-out infinite;
	}
	@keyframes comb-jellyfish-image {
		0%   { transform: rotate(0deg) translateX(0%) rotate(0deg);       }
		50%  { transform: rotate(-90deg) translateX(150%) rotate(-90deg); }
		100% { transform: rotate(-180deg) translateX(0%) rotate(-180deg); }
	}
	#comb-jellyfish .comb-jellyfish-title {
		color: rgba(255, 255, 255, .5);
		display: block;
		margin-top: 5%;
		text-align: center;
		animation: comb-jellyfish-title 12s linear infinite;
	}
	@keyframes comb-jellyfish-title {
		0%, 80%   { opacity: 0; }
		84%, 96%  { opacity: 1; }
		100%      { opacity: 0; }
	}

	/*
	ocean: 8000 Meter
	*/

	/*
	ocean: hadal-fish
	*/

	#hadal-fish {
		height: auto;
		margin-top: 2700%;
		position: absolute;
		width: 100%;
	}
	#hadal-fish .hadal-fish-move {
		height: auto;
		left: -40%;
		position: relative;
		width: 40%;
		max-width: 353px;
		animation: hadal-fish-move 40s linear infinite;
	}
	@keyframes hadal-fish-move {
		0%   { left: -40%; margin-top: 0%; }
		100% { left: 105%; margin-top: 5%; }
	}
	#hadal-fish .hadal-fish-image {
		height: auto;
		width: 100%;
	}
	#hadal-fish .hadal-fish-title {
		color: rgba(255, 255, 255, .5);
		display: block;
		margin-top: 5px;
		min-width: 150px;
		opacity:  0;
		position: relative;
		text-align: left;
		animation: hadal-fish-title 40s linear infinite;
	}
	@keyframes hadal-fish-title {
		0%, 40%   { opacity: 0 }
		41%, 56%  { opacity: 1 }
		57%, 100% { opacity: 0 }
	}

	/*
	ocean: 10000 Meter
	*/

	/*
	ocean: hadal-shrimp
	*/

	#hadal-shrimp {
		height: auto;
		margin-top: 3000%;
		position: absolute;
		width: 100%;
	}
	#hadal-shrimp .hadal-shrimp-move {
		height: auto;
		max-width: 300px;
		position: absolute;
		width: 10%;
		animation: hadal-shrimp-move 12s linear infinite;
	}
	@keyframes hadal-shrimp-move {
		0%   { margin-left: 100%; width: 10% }
		30%	 { margin-left: 45%;  width: 10% }
		40%  { margin-left: 35%;  width: 25% }
		60%  { margin-left: 35%;  width: 25% }
		70%	 { margin-left: 45%;  width: 10% }
		100% { margin-left: -10%; width: 10% }
	}
	#hadal-shrimp .hadal-shrimp-image {
		height: auto;
		width: 100%;
		animation: hadal-shrimp-image 4s linear infinite;
	}
	@keyframes hadal-shrimp-image {
		0%   { transform: rotate(180deg);  }
		50%  { transform: rotate(0deg);    }
		100% { transform: rotate(-180deg); }
	}
	#hadal-shrimp .hadal-shrimp-title {
		color: rgba(255, 255, 255, .5);
		display: block;
		margin-top: 25%;
		text-align: center;
		animation: hadal-shrimp-title 12s linear infinite;
	}
	@keyframes hadal-shrimp-title {
		0%, 40%   { opacity: 0; }
		44%, 56%  { opacity: 1; }
		60%, 100% { opacity: 0; }
	}

	/*
	ocean: 11000 Meter
	*/

	/*
	ocean: trieste
	*/

	#trieste {
		height: auto;
		margin-top: 3170%;
		position: absolute;
		width: 100%;
	}
	#trieste .trieste-move {
		height: auto;
		max-width: 600px;
		position: relative;
		width: 45%;
		animation: trieste-move 48s linear infinite;
	}
	@keyframes trieste-move {
		0%   { left: -50%; filter: brightness(20%); }
		25%  { filter: brightness(100%); }
		50%  { left: 110%; filter: brightness(20%); }
		51%  { left: 105%; filter: brightness(20%); }
		75%  { filter: brightness(100%); }
		100% { left: -50%; filter: brightness(20%); }
	}
	#trieste .trieste-image {
		height: auto;
		width:  100%;
		animation: trieste-image 48s infinite;
	}
	@keyframes trieste-image {
		0%, 49%   { transform: scaleX(1);  }
		50%, 100% { transform: scaleX(-1); }
	}
	#trieste .trieste-title {
		color: rgba(255, 255, 255, .5);
		display: block;
		text-align: left;
		animation: trieste-title 48s infinite;
	}
	@keyframes trieste-title {
		0%, 60%   { opacity: 0; }
		62%, 66%  { opacity: 1; }
		68%, 100% { opacity: 0; }
	}

	/*
	ocean: ground
	*/

	#ground {
		background: linear-gradient(rgba(0, 0, 0, .0) 50%, rgba(59, 59, 48, 1) 50%);
		position: relative;
		line-height: 0;
		width: 100%;
		height: auto;
	}
	#ground .ground-image {
		height: auto;
		position: relative;
		margin-left: -25%;
		width: 200%;
	}

/*
==========================================================================
page:  downloads;
==========================================================================
*/

	#downloads {
		width:  100%;
		background: linear-gradient(rgba(116, 196, 221, 1), rgba(110, 186, 210, 1));
		font-size: .75rem;
		height: 100%;
		max-width: 1400px;
		margin: 0 auto;
		padding-top: 88px;
	}
	#downloads caption {
		color: rgba(255, 255, 255, .8);
	}
	#downloads caption .subline {
		border-top-color: rgba(255, 255, 255, .1);
	}
	#downloads .pc-liste {
		background-color: rgba(140, 36, 168, 1.0);
	}
	#downloads .lego {
		background-color: rgba(208, 16, 18, 1);
	}
	#downloads .bluebrixx {
		background-color: rgba(41, 87, 167, 1);
	}
	#downloads td:nth-child(1) a {
		font-size: 32px;
		color: rgba(255, 255, 255, .8);
	}
	#downloads td:nth-child(1):hover a {
		color: rgba(82, 126, 137, 1);
	}
	#downloads ul {
		line-height: 2;
		list-style: none;
	}

/*
==========================================================================
media queries
==========================================================================
*/

	/* Small screen */
	@media screen and (max-width: 540px) {
		/* Navi */
		#navmenu {
			display: inline-block;
			height: 48px;
			overflow: hidden;
			top: -48px;
			transition: all .5s linear;
			width: 100%;
			z-index: 999;
		}
		#navmenu li {
			display: block;
		}
		#navmenu li:nth-child(1) {
			padding-top: 50px;
		}
		#navmenu a {
			padding: 17px 0px;
			width: 100%;
		}
		#navlinks a#navlinks-menu-bt {
			display: block;
		}
		#navlinks a,
		#navmenu a {
		font-size: 1.0rem;
		}
		#navlinks:target ~ #navmenu  {
			height: 100%;
			top: 0;
		}
		#navlinks:target li > #navlinks-menu-bt  {
			display: none;
		}
		#navlinks:target li > #navlinks-close-bt  {
			display: block;
		}
		/* Allgemein: Display */
		.media-lg {
			display: none;
		}
		.media-sm {
			display: inline;
		}
		/* Tabellen */
		td:nth-child(1) {
			width: 40px;
		}
		/* Kalender */
		#calendar ul,
		#downloads ul {
			line-height: 1.5;
		}
	}
	/* Large screen */
	@media screen and (min-width: 541px) {
		/* Allgemein: Display */
		/*.media-lg {
			display: inline;
		}
		.media-sm {
			display: none;
		}*/
		/* Tabellen */
		/*td:nth-child(1) {
			width: 60px;
		}*/
		/* Kalender */
		/*#calendar ul,
		#downloads ul {
			line-height: 2;
		}*/
	}