@import url(fonts/opensans_regular_german/stylesheet.css);
@import url(fonts/pacifico/style.css);

:root {
  --weiss: #e6ffff;
  --schwarz: #02273a;
  --farbe1: #0a728f; /*blau*/
  --farbe2: #986f5b; /*braun*/
  --farbe3: #2e4653; /*petrol*/
}


body {    
 	background-color: var(--farbe1); 
	background-image: url("background.jpg");
 	text-align: center; 
 	margin-top: 2%;
 	font-family: 'open_sansregular';
 	font-size: 120%;
}

a {
	color: var(--farbe2);
	font-weight: 600;
}
   	
#pane {
 	margin: 7% auto 0 auto;
 	float: none;
 	width: 60%;
}


#content { 
 	padding: 1% 0;
 	width: 100%;
 	text-align: center;
	margin: 0 auto;
 	font-size: 120%;
 	font-weight: bold;
 	z-index: 666;
	position: relative;
	background-color: var(--farbe1)!important;
	background-image: url("background.jpg")!important;
 	
 	-webkit-border-radius: 10px 10px 0px 0px;
 		 -moz-border-radius: 10px 10px 0px 0px;
 					border-radius: 10px 10px 0px 0px;

 	-webkit-box-shadow: var(--farbe3) -5px -5px 10px;
 		 -moz-box-shadow: var(--farbe3) -5px -5px 10px;
 					box-shadow: var(--farbe3) -5px -5px 10px;

	-webkit-transform: rotate(-2.5deg);  /* Saf3.1+, Chrome */
	   -moz-transform: rotate(-2.5deg);  /* FF3.5+ */
		-ms-transform: rotate(-2.5deg);  /* IE9 */
		 -o-transform: rotate(-2.5deg);  /* Opera 10.5 */
			transform: rotate(-2.5deg);
			   filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6�IE9 */
					   M11=0.9996573249755573, M12=0.02617694830787315, M21=-0.02617694830787315, M22=0.9996573249755573, sizingMethod='auto expand');
				 zoom: 1;

	/*text-shadow: 1px 1px 3px #888;  FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */

 
 	border: 1px solid var(--schwarz);
	color: var(--weiss);
}

#content h1 {
	font-size: 220%;
	font-family: 'Pacifico Regular';
	margin: 0;
}

#content img {
	margin-top: -5%;
}


#content h2 {
	font-size: 180%;
	padding:0;
	margin: 0;
}



#footer { 
 	
 	width: 100%;
 	font-size: 1.2em;
	position: relative;
 	top: 10px;
 	
 	-webkit-border-radius: 0px 0px 10px 10px;
 		 -moz-border-radius: 0px 0px 10px 10px;
 					border-radius: 0px 0px 10px 10px;

 	-webkit-box-shadow: var(--farbe3) -5px -5px 10px;
 		 -moz-box-shadow: var(--farbe3) -5px -5px 10px;
 					box-shadow: var(--farbe3) -5px -5px 10px;


 	background: rgba(255, 255, 255, 1);
	background: var(--weiss);

 	border: 1px solid var(--schwarz);
}





/************************************************************************************************************/

@media all and (min-width: 1600px) and (max-width: 1680px) {
	#pane {
    width: 70%;
}
}



/************************************************************************************************************/

@media all and (min-width: 1280px) and (max-width: 1599px) {
	#pane {
    width: 85%;
}	
	
}


/************************************************************************************************************/

@media all and (min-width: 1024px) and (max-width: 1279px) {
	
	#pane {
    width: 95%;
	}
	
	#footer { 
 	width: 95%;
	}


}


/************************************************************************************************************/

@media all and (min-width: 768px) and (max-width: 1023px) {
	
	#pane {
    width: 95%;
	}
	
	#footer { 
 	width: 95%;
	}
	



}





/************************************************************************************************************/

@media all and (min-width: 160px) and (max-width: 767px) {
	
	#pane {
    width: 100%;
	}
	
	#footer { 
 	width: 100%;
	}