body {
    margin: 0px;
    padding: 0px;
    color: #000000;
	display: table;
	position: absolute;
	height: 100%;
	width: 100%;
	background: -webkit-gradient(linear, left top, left bottom, from(#000000), to(#404040)) fixed;
}
#middle {
	display: table-cell;
	vertical-align: middle;
}
.image{
	background: url(../image/main.jpg);
	background-size: cover;
	background-repeat:no-repeat;
}
#main{
	margin-left: auto;
	margin-right: auto;
    width: 480px;
    height: 384px;
	border: 5px solid #FFEA4F;
}
a{
	text-decoration: none;
    color: #FFEA4F;
	font-family: Algerian;
	font-size:15px;
}
@media screen and (min-width: 640px) {
#main{
    width: 640px;
    height: 512px;
}
a{
	font-size:15px;
}
}
@media screen and (min-width: 960px) {
#main{
    width: 960px;
    height: 768px;
}
a{
	font-size:22px;
}
}
@media screen and (min-width: 1280px) {
#main{
    width: 1152px;
    height: 922px;
}
}
.button-case {
	height: 62%;
    width: 33.333333%;
	float: left;
	position: relative;
}
.button-case:before{
	
}
.button-case > div{
	top: 0; 
	height: 0px; 
	background-color: black;
	visibility:hidden;
	transition-duration: 0.3s;
	overflow:hidden;
	width: 90%; 
	margin-left: auto;
	margin-right: auto;
	display: block;
	outline: 0px dashed black;
	outline-offset: -3px;
	border-right: 3px solid #FFEA4F;
	border-bottom: 3px solid #FFEA4F;
	border-left: 3px solid #FFEA4F;
	text-align:center;
	padding:5px;
}
.button-case:hover {
	
	background: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0.3), rgba(0,0,0,0));
	transition-duration: 0.3s;
}
.button-case:hover > div {
	height: 25%;
	transition-duration: 0.3s;
	visibility:visible;

}
a{
	text-decoration: none;
    color: #FFEA4F;
	font-family: Algerian;
}
p{
	text-decoration: none;
    color: #FFEA4F;
	font-family: Algerian;
}
/* ende startseite */
nav{
    top:0px;
	position:fixed;
	width:100%;
    z-index:10;
}
#nav{
	margin-left: auto;
	margin-right: auto;
    width: 480px;
	height: 80px;
	border-right: 5px solid #FFEA4F;
	border-bottom: 5px solid #FFEA4F;
	border-left: 5px solid #FFEA4F;
	background: black;
}
.navinner{
	float: left;
	width:33.3333%;
	font-size:45px;
   	text-align:center;
	padding-top:20px;
}

.login{
	float: left;
	width:33.3333%;
	font-size:12px;
}
.drei{
	margin-top:-88px;
	margin-left: auto;
	margin-right: auto;
	width: 0px;
	height: 0px;
	top: 100px;
	-webkit-transform:rotate(360deg);
	border-style: solid;
	border-width: 80px 172px 0 172px;
	border-color: black transparent transparent transparent;
    z-index:15;
}
.dreigelb{
    margin-top:-5px;
	margin-left: auto;
	margin-right: auto;
	width: 0px;
	height: 0px;
	top: 100px;
	-webkit-transform:rotate(360deg);
	border-style: solid;
	border-width: 88px 185px 0 185px;
	border-color: #FFEA4F transparent transparent transparent;
}
/* ende nav  */
#body{
  width: 100%;
  top:0;
  left:0;
  right:0;
  position:fixed;
  z-index: -1;
}
#wapper{
	top:0px;
	width:100%;
	z-index:1;
}
#raid{
	margin-left: auto;
	margin-right: auto;
	margin-top:100px;
    width: 480px;
	text-align:center;
	padding-top:70px;
}
.back,.back2{
	margin-left: auto;
	margin-right: auto;
	height:100vh;
    width: 480px;
}
.back{
	top:0px;
	border: 5px solid #FFEA4F;
	background: url(../image/Back2.jpg);
	background-size: cover;
	background-repeat:no-repeat;
	opacity: 1;
}
.back2{
	background: linear-gradient(to bottom, rgba(0,0,0,1),rgba(0,0,0,0.1),rgba(0,0,0,0.0), rgba(0,0,0,0.0), rgba(0,0,0,0.0),rgba(0,0,0,0.0));
}
h1{
	text-decoration: none;
    color: black;
	font-family: Algerian;
	font-size:15px;
}
h2{
	text-decoration: none;
    color: black;
	font-family: Algerian;
	font-size:10px;
}
@media screen and (min-width: 640px) {
#raid,.back2,.back,#nav{
    width: 640px;
}
h1{
	font-size:30px;
}
h2{
	font-size:20px;
}
}
@media screen and (min-width: 960px) {
#raid,.back2,.back,#nav{
    width: 960px;
}
h1{
	font-size:35px;
}
h2{
	font-size:25px;
}
}
@media screen and (min-width: 1280px) {
#raid,.back2,.back,#nav{
    width: 1280px;
}
h1{
	font-size:40px;
}
h2{
	font-size:30px;
}
}