html {

  font-family: 'verdana', sans-serif;
  font-size: 18px;
  color: #535353;

}


/* FULLSCREEN BACKGROUND */


html {

  /*background: url(../images/steffen_1.jpg) no-repeat fixed center top / cover  rgba(0, 0, 0, 0);*/
  
	background: no-repeat fixed center top;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover !important;
	background-attachment: fixed !important;
	height: 100%;
	opacity: 1.0;
	-webkit-transition: background 1.5s linear;
	-moz-transition: background 1.5s linear;
	-o-transition: background 1.5s linear;
	-ms-transition: background 1.5s linear;
	transition: background 1.5s linear;

  
}

body {
  
	padding: 0px;
	margin: 0px;
	height: 100%;
	width: 100%;

}

/* BACKGROUND FALLBACK */

.bg_image {

  min-height: 100%; /*  Diese zwei Zeilen setzen die Regeln um den Hintergrund zu füllen  */
  min-width: 1024px;
  width: 100%; /*  Die Regeln, welche für die Skalierung sorgen  */
  height: auto;
  position: fixed; /*  Die Positionierung  */
  top: 0;
  left: 0;
}


@media screen and (max-width: 1024px) {

  img.hintergrundbild {
    left: 50%; /*  Ohne diese Angaben funktioniert es nicht  */
    margin-left: -512px;
  }

}


div#wrapper {

  position: relative; /*  Diese Angabe ist extrem wichtig, da ansonsten der Inhalt nicht angezeigt wird!  */

}

/* DIV CONTAINER */

#wrapper {
	width: 800px;
	height:100%;
	margin: 0px 0px;
	/*background: #505050;*/
	
}

#header {
	/*background: #aa0ff0;*/
	height: 20px;
	width:100%;
}

#topMenu {
	/*background: #cc0aa0;*/
}

#center {
	/*background: #a09f60;*/
	margin-top: 300px;
	margin-bottom:500px;
	height: 100px;
	width:100%;
	transition: margin 1.5s ease-in-out:;
	-webkit-transition:margin 1.5s ease-in-out:;
	-moz-transition:margin 1.5s ease-in-out:;
	-o-transition:margin 1.5s ease-in-out:;
	/*display: none;*/
	
}

#mainNav {
	/*background: #0000aa;*/
	width: 25%;
	/*height: 300px;*/
	float: left;
	
}

#mainMenu {
	/*background: #aa00aa;*/
	text-align:right;
}

#banner {
	/*background: #f0aa00;*/
	/*height: 300px;*/
	width:65%;
	float:left;
	padding: 0px 6% 0px 3%;
}

#content-wrapper {
	/*background: #00aaaa;*/
	min-height: 700px;
	width:100%;	
}

#logo{
	/*background: #00ffaf;*/
	width: 200px;
	padding-top: 10px;
	margin-left: 135px;
	cursor: pointer;
}

#content {
	/*background: #00aa0f;*/
	background: rgba(255,255,255,0.6);
	margin-top: 80px;
	padding: 3px 13%  3px 17%;
	margin-bottom: 15px;
	width: 70%;
	/* for fixed footer */
	padding-bottom:84px;
	 
	/* This works in IE 8 & 9 too */
	/* ... but also 5, 6, 7 */
	/*filter: alpha(opacity=60);*/
	
	/* Older than Firefox 0.9 */
	/*-moz-opacity:0.6;*/
	
	/* Safari 1.x (pre WebKit!) */
	/*-khtml-opacity: 0.6;  */
	/* Modern!
	/* Firefox 0.9+, Safari 2?, Chrome any?
	/* Opera 9+, IE 9+ */
	/*opacity: 0.6;*/
}

#footer {
	width: 800px;
	position: fixed;
	bottom: 0px;
	
}

#btn_top {
	/*position: fixed;
	bottom: 0px;
	left: 400px;*/
	width: 155px;
	height: 84px;
	background: url(../images/triangle.png);
	cursor: pointer;
	margin: 0px auto;
	opacity: 0.31;
	/* This works in IE 8 & 9 too */
	/* ... but also 5, 6, 7 */
	filter: alpha(opacity=31);*/
	/*Older than Firefox 0.9 */
	-moz-opacity:0.31;
	/* Safari 1.x (pre WebKit!) */
	-khtml-opacity: 0.31;  
	-webkit-transition:opacity 500ms ease-out;
	-moz-transition:opacity 500ms ease-out;
	-o-transition:opacity 500ms ease-out;
	transition:opacity 500ms ease-out;
}

#btn_top:hover {
	opacity: 1.0;
	/* This works in IE 8 & 9 too */
	/* ... but also 5, 6, 7 */
	filter: alpha(opacity=100);*/
	/*Older than Firefox 0.9 */
	-moz-opacity:1.0;
	/* Safari 1.x (pre WebKit!) */
	-khtml-opacity: 1.0;  
}

/* MEDIA QUERYS */

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-height : 480px) {
  /* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
  /* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
  /* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
  /* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
  /* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
  /* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
  /* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
  /* Styles */
}