body {
  margin: 0px auto;
  padding: 0px;
  width: 100%;
  background: url('../img/background.png') top left no-repeat #e8e8e8;
  color: #050800;
}

#page {
  font-family: 'Aclonica', sans-serif;
  margin: 0 auto;
  width: 1000px;
}

#header {
  height: 200px;
  width: 100%;
}

#logo {
  float:left;
}

#navi {
  float:right;
  margin-top: 50px;
}

#navi ul {
  list-style: none;
  float: right;
}

#navi ul li {
   float:left;
   padding: 0px 20px;
}

#navi ul li a {
  text-decoration: none;
  color: #bababa;
}

#navi ul li a:hover, a:active, a:visited {
  text-decoration: none;
  color: #050800;
}

#content-wrapper {
  background:
  url('../img/bg-repeat-y.png') left repeat-y,
  url('../img/bg-repeat-y.png') right repeat-y,
  url('../img/bg-repeat-x.png') top repeat-x,
  url('../img/bg-repeat-x.png') bottom repeat-x;
  padding: 24px;
  position: relative;
  z-index: 0;

}

#content-wrapper::before {
  position: absolute;
  top: -30px;
  content: '';
  left: -5%;
  width: 110%;
  height: 126px;
  z-index: 5;
  background:
  url('../img/deco_left.png') top left no-repeat,
  url('../img/deco_right.png') top right no-repeat,
  url('../img/deco_mid.png') top center no-repeat;
  pointer-events: none;
}

#content-wrapper::after {
  position: absolute;
  content: '';
  left: -5%;
  width: 110%;
  height: 126px;
  bottom: -75px;
  z-index: 5;
  background:
  url('../img/deco_left.png') top left no-repeat,
  url('../img/deco_right.png') top right no-repeat,
  url('../img/deco_mid.png') top center no-repeat;
  pointer-events: none;
}

#content {
  padding: 50px;
  background-color: #d3c2ab;

}

.seperator {
  height: 150px;
  width: 100%;
  background: url("../img/seperator.png") center center no-repeat;
}

.clear {
  clear: both;
}

/*----------------- INDEX START ----------------- */

#story {
  float: left;
  margin-top:100px;
  font-family: Georgia, sans;
  text-align: center;
  width: 70%;
}

#welcome {
  font-family: 'Aclonica', sans-serif;
  font-size: 30px;
}

#download {
  float: left;
  margin-top: 50px;
  margin-left: 23%;

}

#btn {
  width: 300px;
  height: 60px;
  background: #050800;
  border: 1px dotted #bababa;
  border-radius: 15px;
}

#btn:hover {
  width: 300px;
  height: 60px;
  background: #bababa;
  border: 1px dotted #050800;
  border-radius: 15px;
}

#download-btn {
  text-align: center;
  font-size: 30px;
  padding: 15px;
  color: #bababa;
  font-family: 'Aclonica', sans-serif;
  display: block;
  text-decoration: none;
}

#download-btn:visited, #download-btn:active {
  text-decoration: none;
  color: #bababa;
}

#download-btn:hover {
  text-align: center;
  font-size: 30px;
  padding: 15px;
  color: #050800;
  font-family: 'Aclonica', sans-serif;
}

#faun {
    float: left;
    width: 30%;
    height: 400px;
    background: url("../img/faunleft.png") top left no-repeat;
}



/*----------------- INDEX ENDE ----------------- */

/*----------------- CHARAKTER START ----------------- */

.character {
  width: 100%;
  height: 100%;
}

.char {
  width: 350px;
  float: left;
}

#faunimg {
  width: 250px;
  float: left;
}


#text {
 text-align: left;
 font-size: 20px;
 font-family: georgia;
}

#name {
  font-family: 'Aclonica', sans-serif;
  font-size: 35px;
  text-align: left;
}


#character-container {
  width: 100%;
  height: 500px;
  clear: both;
}

#character-container UL {
  list-style: none;
}

#character-container UL LI A {
  width: 25%;
  float: left;
  text-decoration: none;
  color: #050800;
  height: 300px;
  display: block;
  position: relative;
  margin: 0px 0px 50px 0px;
}

#character-container UL LI A SPAN {
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -50%;
  display: block;
  width: 100%;
  text-align: center;
}

@keyframes animfaun {
  from {}
  to {
     background-image: url('../img/faunrightsmall.png');
  }
}

@-webkit-keyframes animfaun {
  from {}
  to {background: url('../img/faunrightsmall.png') top left no-repeat;}
}

#character-container UL LI A#faunhover {
  background: url('../img/faunrightsmalldark.png') top left no-repeat;
}

#character-container UL LI A#faunhover:hover {
  animation-name: animfaun;
  animation-duration: 1s;
  -webkit-animation-name: animfaun;
  -webkit-animation-duration: 1s;
}

@keyframes animgranny {
  from {}
  to {background: url('../img/grannynanny.png') top left no-repeat;
  background-size: contain;}
}

@-webkit-keyframes animgranny {
  from {}
  to {background: url('../img/grannynanny.png') top left no-repeat;
  background-size: contain;}
}

#character-container UL LI A#grannyhover {
  background: url('../img/grannynannydark.png') top left no-repeat;
  background-size: contain;
}

#character-container UL LI A#grannyhover:hover {
  animation-name: animgranny;
  animation-duration: 1s;
  -webkit-animation-name: animgranny;
  -webkit-animation-duration: 1s;
}



@-keyframes animwolper {
  from {}
  to {background: url('../img/wolpertinger.png') top left no-repeat;
  background-size: contain;}
}

@-webkit-keyframes animwolper {
  from {}
  to {background: url('../img/wolpertinger.png') top left no-repeat;
  background-size: contain;}
}

#character-container UL LI A#wolperhover {
  background: url('../img/wolpertingerdark.png') top left no-repeat;
  background-size: contain;
}

#character-container UL LI A#wolperhover:hover {
  animation-name: animwolper;
  animation-duration: 1s;
  -webkit-animation-name: animwolper;
  -webkit-animation-duration: 1s;
}

@keyframes animkelpie {
  from {}
  to {background: url('../img/kelpie.png') top left no-repeat;
  background-size: contain;}
}

@-webkit-keyframes animkelpie {
  from {}
  to {background: url('../img/kelpie.png') top left no-repeat;
  background-size: contain;}
}

#character-container UL LI A#kelpiehover {
  background: url('../img/kelpiedark.png') top left no-repeat;
  background-size: contain;
}

#character-container UL LI A#kelpiehover:hover {
  animation-name: animkelpie;
  animation-duration: 1s;
  -webkit-animation-name: animkelpie;
  -webkit-animation-duration: 1s;
}

/*----------------- CHARAKTER ENDE ----------------- */

/*----------------- GALLERY START ----------------- */



/*----------------- GALLERY ENDE ----------------- */

/*----------------- TEAM START ----------------- */

#team-container {
  margin: auto;
  width: 820px;
}


.member {
  width: 260px;
  height: 300px;
  float: left;
  margin-left: 20px;
}

.member.first-row.first-item,
.member.second-row.first-item {
  margin-left: 0px;
}

#name {
  font-size: 25px;
  display: block;
  text-align: center;
}

#description {
  font-family: georgia;
  display: block;
  text-align: center;
}

/*----------------- TEAM ENDE ----------------- */


/*----------------- FOOTER START ----------------- */

#footer {
  width: 100%;
  height: 300px;
  margin-top: -90px;
  background-image: url("../img/footer.png");
}

#project {
  font-family: 'Aclonica', sans-serif;
  font-size: 12px;
}

.social {
	width: 350px;
	margin: 10px auto;
  margin-top: 170px;
	padding: 0;
	overflow: hidden;
	float: right;
  margin-right: 40%;
}

.social a {
	position: relative;
	float: left;
	width: 100px;
	height: 100px;
	margin: 0 5px 0 0;
	list-style: none;
	text-decoration: none;
}

.social a .image {
	position: absolute;
	width: 55px;
	height: 55px;
	top: 24px;
	left: 24px;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

.social a:hover .image {
	top: 16px;
}

.social a span {
	width: 100px;
	position: absolute;
	padding: 0;
	font-size: 14px;
	text-transform: uppercase;
	text-align: center;
	font-weight: bold;
	color: #fff;
	left: 0;
	bottom: -20px;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

.social a:hover span {
	bottom: 10px;
}

.social:hover > a {
	opacity: 0.3;
}

.social:hover > a:hover {
	opacity: 1;
}

.social a.facebook {
	background: #1e5799;
}

.social a.usk12 {
	background: #33b540;
}

.social a.s4g {
	background: #3f3f41;
}

.social a.facebook .image {
	background: url(../img/facebook.png) center no-repeat;
}

.social a.usk12 .image {
	background: url(../img/12.png) center no-repeat;
}

.social a.s4g .image {
	background: url(../img/s4glogo.png) center no-repeat;
}


/*----------------- FOOTER ENDE ----------------- */