html {

}

body {
	margin: 0px;
	padding: 0px;
	background-color: #000040;
	text-align: justify;
	font-size: 15px;
	font-family: 'Open Sans', sans-serif;
	color: #bff;
}

@font-face {
  font-family: 'Ecco Ingame';
  font-style: normal;
  font-weight: 300;
  src: local('Ecco Ingame'), local('EccoIngame'), url(../images/EccoIngame.woff) format('woff');
}

h1 {
	margin: 0px;
	padding: 0px;
}

#container1 {
	position: relative;
	width: 100%;
	max-width: 1200px;
	min-height: 700px;
	margin: 0 auto;
	background-color: blue;
	overflow: hidden;
}

#logo {
	top: 50px;
	left: 50px;
	margin: 0;
	padding: 0;
	width: 457.34px;
	height: 144.73px;
	position: absolute;
	z-index: 106;
	background-image: url(../images/COHlogo.svg);
}

#skybox {
	position: relative;
	height: 500px;
	width: 100%;
	margin: 0;
	padding: 0;
	top: 0;
	z-index: 135;
}

#skyreef {
	position: absolute;
	width: 160px;
	margin: 0;
	top: 0;
	bottom: 0;
	right: 0;
	padding: 0;
	background-image: url(../images/reefwall_above_watersurface.svg);
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: bottom right;
	background-origin: padding-box;
}

#skycontents {
	position: relative;
	height: 100%;
	margin: 0 160px 0 0;
	top: 0;
	padding: 0;
}

.container {
  border: 10px solid #b6bdc3;
  width: 100%;
  background: #fff;
  margin: 0 auto;
}

.svgtitlewrap {
	top: 200px;
	left: 20px;
	width: 50%; height: 50%;
	position: relative;
}

.svgtitle {
	top: 0;
	left: 0;
	position: absolute;
	width: 100%; height: 50%;
	font-family: 'Ecco Ingame', sans-serif;
	font-size: 28pt;
}

.titletext {
	font-size="100%" 
}

#levelname {
	font-family: 'Ecco Ingame', sans-serif;
	color: #8866ee;
	font-size: 28pt;
	position: relative;
	margin: 10px 0;
	top: 350px;
	left: 20px;
	width: 100%;
	z-index: 206;
	line-height: 40pt;
	text-align: right;
	-webkit-text-fill-color: transparent;
	background-image: -webkit-linear-gradient(top, #220088 15%, #2222cc 25%, #8866ee 38%, #ccaaee 48%, #eeeeee 55%, #8866ee 58%, #3939cc 60%, #aa88ee 85%);
	background-size: 40pt 40pt;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-stroke: 2px #8866EE;
}

.ingmsgwrap {

	background-image: -webkit-linear-gradient(top, #006088 0%, #aaf8ee 100%);
	display: inline;
}

.ingmsg {
	font-family: 'Ecco Ingame', sans-serif;
	color: #8866ee;
	font-size: 14pt;
	margin: 10px 0;
	z-index: 206;
	line-height: 20pt;
	-webkit-text-fill-color: transparent;
	background-image: -webkit-linear-gradient(top, #220088 15%, #2222cc 20%, #8866ee 35%, #ccaaee 45%, #eeeeee 50%, #8866ee 53%, #3939cc 60%, #aa88ee 85%);
	background-size: 20pt 20pt;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-stroke: 0px #8866EE;
}

#contentbox {
position: absolute;
top:20vh;
left: 30vw;
}

#contentreef {
	position: absolute;
	width: 160px;
	margin: 0;
	top: 0;
	bottom: 0;
	right: 0;
	padding: 0;
	background-image: url(../images/reefwall_below_watersurface.svg);
	background-repeat: repeat-y;
	background-attachment: scroll;
	background-position: top right;
	background-origin: padding-box;
	z-index: 135;
}

#contentcontents {
	position: relative;
	height: 100%;
	margin: 0 160px 0 0;
	top: 0;
	padding: 20px 20px 20px 35px;
	z-index: 200;
}

#contentcontents p {
}

#menuinfo {
	position: absolute;
	top: -12px;
	left: 25px;
	z-index: 106;
}

@keyframes menuinfokf {
0%, 25%, 100% {opacity: 0;}
5%, 20% {opacity: 1;}
}
@-webkit-keyframes menuinfokf {
0%, 25%, 100% {opacity: 0;}
5%, 20% {opacity: 1;}
}

.menu-wrapper {
left: 0px;
top: 0px;
position: absolute;
margin: 0;
padding: 0;
animation-name: menuwrapperkf;
animation-duration: 60s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-play-state: running;
}

@keyframes menuwrapperkf {
0% {opacity: 1.0;}
2%,10% {opacity: 1;}
20%,100% {opacity: 0.4;}
}

.menu-wrapper:hover {
opacity: 1;
animation: 0;
}

.menu {
position: fixed;
margin: 0;
padding: 0;
list-style: none;
z-index: 200;
width: 600px;
height: 50px;
}

.menubtn, .menubtn:before, .menubtn:after {
width: 25px; position: absolute; }

.menubtn:before, .menubtn:after {
left: 0; height: 8px; content: ''; }

.menubtn:before {
top: 16px; background-color: #28A7D0; }

.menubtn:after{
top: 8px; background-color: #0E91BE; }

.menubtn {
height: 32px;
float: left;
top: -2px;
border: 1px solid #0E91BE; /*#0D71A3*/
border-left-style: none;
border-top-style: none;
background-color: #41BDE5;
animation-name: menuskew;
animation-duration: 8s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-play-state: running;
}

.menu > ul {
margin: 0;
padding: 0;
position: absolute;
top: -5px;
left: 25px;
transform:translateY(-100px);
}

.menu  ul li { display: none; }

.menu:hover > ul {
transform:translateY(0px);
transition: transform 0.2s;
transition-timing-function: ease-out;
}

.menu > ul > li:hover > ul {
display: block;
}

.menu > ul > li:before, .menupreview:before {
position: absolute;
width: 100px;
height: 40px;
margin: 0;
padding: 0;
background-color: #41BDE5;
content: '';
display: block;
z-index: -1;
border: 1px solid #0E91BE;
border-left-style: none;
border-right-style: none;
border-top-style: none;
animation-name: menuskew;
animation-duration: 8s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-play-state: running;
}

.menu > ul > li:first-child:before {
border: 1px solid #0E91BE;
border-right-style: none;
border-top-style: none;
}

.menu > ul > li:last-child:before {
border: 1px solid #0E91BE;
border-left-style: none;
border-top-style: none;
}

.menu > ul > li:nth-child(even):before {
animation-delay: 0s;
}

.menu > ul > li:nth-child(odd):before  {
animation-delay: -4s;
}

.menu:hover > ul > li, .menupreview  {
float: left;
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
display: block;
margin: 0;
padding: 0;
color: #000;
font-weight: bold;
text-decoration: none;
}

.menu > ul > li > ul {
transform:translateY(-300px);
}

.menu > ul > li:hover > ul {
position: relative;
left: -40px;
z-index: -2;
transform:translateY(0px);
transition: transform 0.2s;
transition-timing-function: ease-out;
}

.menu > ul > li > ul > li > ul {
display: none;
}

.menu > ul > li > ul > li:hover > ul {
display: block;
position: relative;
top: -35px;
left: 61px;
z-index: -2;
}
.menu:hover > ul > li > ul > li > ul > li:nth-child(1):before {
margin: 0;
border: 1px solid #0E91BE;
animation-play-state: paused;
animation-delay: -2s;
}

.menupreview:before {
border: 1px solid #0E91BE;
border-top-style: none; }

.menupreview {
line-height: 50px; }

.menu > ul > li:hover ul > li {
position: relative;
margin: 0;
padding: 0;
width: 100px;
height: 35px;
text-align: center;
display: block;
line-height: 35px;
color: #777;
}

.menu > ul > li:hover ul > li:before {
position: absolute;
margin: 0;
padding: 0;
height: 35.5px;
width: 100px;
content: '';
display: block;
z-index: -2;
border: 1px solid #0E91BE;
border-top-style: none;
animation-name: menuskew;
animation-duration: 8s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-play-state: running;
}

@keyframes menuskew {
0%,100% {transform: skewY(-4deg)}
50% {transform: skewY(4deg)}
}

.menu > ul > li:hover ul > li:nth-child(1):before {
margin: -20px 0;
height: 55.5px;
}

.menu > ul > li:hover ul > li:nth-child(3n):before {
background-color: #41BDE5;
}

.menu > ul > li:hover ul > li:nth-child(3n+1):before {
background-color: #0E91BE;
}

.menu > ul > li:hover ul > li:nth-child(3n+2):before {
background-color: #28A7D0;
}

@media screen and (max-width: 800px) {
    #skyside {
		background-position: bottom left;
		background-origin: content-box;
		width: 20%;
    }
	
    #waterside {
		background-position: top left;
		background-origin: content-box;
		width: 20%;
    }
	
	#skycontents, #watercontents {
	margin: 0 20% 0 0;
	}
	
	#logo {
	width: 58%;
	background-position: top left;
	background-repeat: no-repeat;
	background-size: 100% auto;
	}
}

@media screen and (max-width: 400px) {
    #skyside, #waterside {
		background-image: none;
		width: 0;
	}
	
	#skycontents, #watercontents {
		margin: 0;
		padding: 10px;
	}
}

.adl0 { animation-delay: 0s; }
.adl1 { animation-delay: -0.5s; }
.adl2 { animation-delay: -1s; }
.adl3 { animation-delay: -1.5s; }
.adl4 { animation-delay: -2s; }
.adl5 { animation-delay: -2.5s; }
.adl6 { animation-delay: -3s; }
.adl7 { animation-delay: -3.5s; }
.adl8 { animation-delay: -4s; }
.adl9 { animation-delay: -4.5s; }
.adl10 { animation-delay: -5s; }
.adl11 { animation-delay: -5.5s; }
.adl12 { animation-delay: -6s; }
.adl13 { animation-delay: -6.5s; }
.adl14 { animation-delay: -7s; }
.adl15 { animation-delay: -7.5s; }
.adl16 { animation-delay: -8s; }
.adl17 { animation-delay: -8.5s; }
.adl18 { animation-delay: -9s; }
.adl19 { animation-delay: -9.5s; }
.adl20 { animation-delay: -10s; }
.adl21 { animation-delay: -10.5s; }
.adl22 { animation-delay: -11s; }
.adl23 { animation-delay: -11.5s; }
.adl24 { animation-delay: -12s; }
.adl25 { animation-delay: -12.5s; }
.adl26 { animation-delay: -13s; }
.adl27 { animation-delay: -13.5s; }
.adl28 { animation-delay: -14s; }
.adl29 { animation-delay: -14.5s; }
.adl30 { animation-delay: -15s; }
.adl31 { animation-delay: -15.5s; }
.adl32 { animation-delay: -16s; }
.adl33 { animation-delay: -16.5s; }
.adl34 { animation-delay: -17s; }
.adl35 { animation-delay: -17.5s; }
.adl36 { animation-delay: -18s; }
.adl37 { animation-delay: -18.5s; }
.adl38 { animation-delay: -19s; }
.adl39 { animation-delay: -19.5s; }
.adl40 { animation-delay: -20s; }
.adl41 { animation-delay: -20.5s; }
.adl42 { animation-delay: -21s; }
.adl43 { animation-delay: -21.5s; }
.adl44 { animation-delay: -22s; }
.adl45 { animation-delay: -22.5s; }
.adl46 { animation-delay: -23s; }
.adl47 { animation-delay: -23.5s; }
.adl48 { animation-delay: -24s; }
.adl49 { animation-delay: -24.5s; }
.adl50 { animation-delay: -25s; }
.adl51 { animation-delay: -25.5s; }
.adl52 { animation-delay: -26s; }
.adl53 { animation-delay: -26.5s; }
.adl54 { animation-delay: -27s; }
.adl55 { animation-delay: -27.5s; }
.adl56 { animation-delay: -28s; }
.adl57 { animation-delay: -28.5s; }
.adl58 { animation-delay: -29s; }
.adl59 { animation-delay: -29.5s; }
.adl60 { animation-delay: -30s; }
.adl61 { animation-delay: -30.5s; }
.adl62 { animation-delay: -31s; }
.adl63 { animation-delay: -31.5s; }
.adl64 { animation-delay: -32s; }
.adl65 { animation-delay: -32.5s; }
.adl66 { animation-delay: -33s; }
.adl67 { animation-delay: -33.5s; }
.adl68 { animation-delay: -34s; }
.adl69 { animation-delay: -34.5s; }
.adl70 { animation-delay: -35s; }
.adl71 { animation-delay: -35.5s; }
.adl72 { animation-delay: -36s; }
.adl73 { animation-delay: -36.5s; }
.adl74 { animation-delay: -37s; }
.adl75 { animation-delay: -37.5s; }
.adl76 { animation-delay: -38s; }
.adl77 { animation-delay: -38.5s; }
.adl78 { animation-delay: -39s; }
.adl79 { animation-delay: -39.5s; }
.adl80 { animation-delay: -40s; }
.adl81 { animation-delay: -40.5s; }
.adl82 { animation-delay: -41s; }
.adl83 { animation-delay: -41.5s; }
.adl84 { animation-delay: -42s; }
.adl85 { animation-delay: -42.5s; }
.adl86 { animation-delay: -43s; }
.adl87 { animation-delay: -43.5s; }
.adl88 { animation-delay: -44s; }
.adl89 { animation-delay: -44.5s; }
.adl90 { animation-delay: -45s; }
.adl91 { animation-delay: -45.5s; }
.adl92 { animation-delay: -46s; }
.adl93 { animation-delay: -46.5s; }
.adl94 { animation-delay: -47s; }
.adl95 { animation-delay: -47.5s; }
.adl96 { animation-delay: -48s; }
.adl97 { animation-delay: -48.5s; }
.adl98 { animation-delay: -49s; }
.adl99 { animation-delay: -49.5s; }