@font-face {
	
      font-family: "GraublauWeb";
      src: url('../css/GraublauWeb.otf') format('truetype');
 /*src: local("Yanone Kaffeesatz"), url('../fonts/YanoneKaffeesatz-Regular.ttf');*/
}
@font-face { 
  font-family: 'Farro';
  src: url('../css/Farro-Medium.ttf') format('truetype');
}
@font-face {
    font-family: 'clugnormal';
    src: url('../css/clgr-webfont.eot');
    src: url('../css/clgr-webfont.eot?#iefix') format('embedded-opentype'),
         url('../css/clgr-webfont.woff') format('woff'),
         url('../css/clgr-webfont.ttf') format('truetype'),
         url('../css/clgr-webfont.svg#clugnormal') format('svg');
    font-weight: normal;
    font-style: normal;

}

html { 
  height: 100%;
}

* { 
  margin: 0;
  padding: 0;
}
/* tell the browser to render HTML 5 elements as block */
article, aside, figure, footer, header, hgroup, nav, section { 
  display:block;
}

.margin10{
	margin:0 10px;}
body {
	font-family:"Graublau Web", Arial, sans-serif;
	font:0.8em;
	background: #d2d0c5;
	color: #444;
	min-width: 897px;
}
hr.linie_modal {
  margin: 0 0 20px 0;
}
p {
  font-family:"Graublau Web", Arial, sans-serif;
	font:0.8em;	 
  padding: 0 0 20px 0;
  line-height: 1.7em;
}
.subline { 
  padding: 60px 0 0 0;
  line-height: 1.7em;
}
.bezeichnung {
	font-size: 120%;
	line-height: 120%;
	color: #333;
	margin: 10px 0;
	}
hr {
	width: 100%;
	height: 1px;
	color: #fff;
	float: left;
  }
.rot {
    color:#e80202;
  }
img { 
  border:none;
}
.rechts {
	float: right;}
.img { 
 float: left;
}

h1, h2, h3, h4, h5, h6 { 
  font-family: 'Farro';
  line-height: 1em;
  padding: 0;
}
.klein {
  font-size: 0.6em;
}

h2, h2 a{
  font-family: 'clugnormal';
  font-size: 140%;
  color:#FFffff;
}

h3, h3 a {
	font-family: 'clugnormal';
	font-size: 140%;
	color:#fba103;
}
.headline_orange{
	font-family: 'clugnormal';
	font-size: 140%;
  letter-spacing: 0.05em;
	color:#fba103;
	cursor:pointer;
}
.headline_orange a{
	color:#fba103;
	cursor:pointer;
}
.headline_weiss{
	font-family: 'clugnormal';
	font-size: 160%;
	letter-spacing: 0.05em;
	color:#fff;
	cursor:pointer;
	alignment-adjust: text-before-edge;
}

.headline_weiss a{
	color:#fff;
	cursor:pointer;
}
.headline_rot{
	font-family: 'clugnormal';
	font-size: 140%;
	padding-bottom: 2%;
	letter-spacing: 0.05em;
	color:#e80202;
	cursor:pointer;
}
.headline_rot a{
	color:#e80202;
	cursor:pointer;
}
h4, h4 a { 
	font-family: 'clugnormal';
	font-size: 140%;
  	color: #e80202;
	letter-spacing: 0.02em;
}

h5 { 
  color: #555;
  font: italic 95%;
  letter-spacing: normal;
  padding: 0 0 15px 0;
}

h6 {
  font-family: 'clugnormal';
  font-size: 120%; 
  color:#e80202;
  padding: 0 0 15px 0;
}
.impressum { 
  font-family:"Graublau Web", Arial, sans-serif;
  color: #555;
  font-size: 80%;
  padding: 0 15px 15px 0;
}
a, a:link { 
  outline: none;
  text-decoration: none;
  color: #fba103;
}
a:hover { 
  outline: none;
  text-decoration: none;
  color: #e80202;
}

a:active { 
  outline: none;
  text-decoration: none;
  color: #e80202;
}

ul { 
  margin: 2px 0 22px 17px;
}

ul li { 
  list-style-type: circle;
  margin: 0 0 6px 0; 
  padding: 0 0 4px 5px;
  line-height: 1.5em;
}


.left { 
  float: left;
  width: auto;
  margin-right: 10px;
}
.arrow{
	width: 18px;
	height: 18px;
	float: right;
	vertical-align: text-bottom;
	}
.right { 
  float: right; 
  width: auto;
  margin-left: 10px;
}

.center { 
  display: block;
  text-align: center;
  margin: 20px auto;
}

#main, nav, #logo, #content, footer { 
  margin-left: auto; 
  margin-right: auto;
}

#main {
	margin: 5px auto;
	width: 80%;
	background: transparent;
	padding-bottom: 30px;
}
header { 
 height: auto;
  clear:both;
}

#logo {
	width: 100%;
	background: transparent;
	color: #888;
	padding: 20px 0 0 0;
	float: left;
}
.logo {
	width: 300px;
	padding: 0;
	float: left;
}
nav {
	float: right;
	margin: 0;
	padding-top:27px;
} 
.content {
	width: 100%;
	padding: 0;
	font-size: 120%;
	line-height: 130%;
	//float: left;
}
footer {
	position: fixed;
	bottom: 0;
	width: 80%;
	font: 100% 'GraublauWeb', arial, sans-serif;
	padding: 5px 0 20px 0;
	text-align: center;
	background: #fff; /* Show a solid color for older browsers */
	background: #f9f4ea; /* Old browsers */

/* IE9 SVG, needs conditional override of 'filter' to 'none' */

background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y5ZjRlYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjM5JSIgc3RvcC1jb2xvcj0iI2ZiYTEwMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlODAyMDIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

background: -moz-linear-gradient(left,  #f9f4ea 0%, #fba103 39%, #e80202 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f9f4ea), color-stop(39%,#fba103), color-stop(100%,#e80202)); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(left,  #f9f4ea 0%,#fba103 39%,#e80202 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(left,  #f9f4ea 0%,#fba103 39%,#e80202 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(left,  #f9f4ea 0%,#fba103 39%,#e80202 100%); /* IE10+ */

background: linear-gradient(to right,  #f9f4ea 0%,#fba103 39%,#e80202 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f4ea', endColorstr='#e80202',GradientType=1 ); /* IE6-8 */


}

footer p { 
  line-height: 1.7em;
  color: #fff;
  padding: 4px 0 10px 0;
  letter-spacing: 0.2pt;
}

footer a:link { 
  color: #fff;
  text-decoration: none;
 
}

footer a:hover { 
  color: #fff;
  text-shadow: none;
  text-decoration: underline;
}

footer a:visited { 
  color: #fff;
  text-shadow: none;
  text-decoration: none;
}
.form_settings { 
  margin: 15px 0 0 0;
}

.form_settings p { 
  padding: 0 0 4px 0;
}

.form_settings span { 
  float: left; 
  width: 200px; 
  text-align: left;
}
  
.form_settings input, .form_settings textarea { 
  padding: 5px; 
  width: 299px; 
  font: 100% arial; 
  border: 1px solid #D5D5D5; 
  background: #FFF; 
  color: #47433F;
  border-radius: 7px 7px 7px 7px;
  -moz-border-radius: 7px 7px 7px 7px;
  -webkit-border: 7px 7px 7px 7px;  
}
  
.form_settings .submit { 
  font: 140% arial, sans-serif; 
  border: 0; 
  width: 99px; 
  margin: 0 0 0 212px; 
  height: 33px;
  padding: 2px 0 3px 0;
  cursor: pointer; 
  background: #ddd; /* Show a solid color for older browsers */
  background: -moz-linear-gradient(#fff, #ddd);
  background: -o-linear-gradient(#fff, #ddd);
  background: -webkit-linear-gradient(#fff, #ddd);
  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px;
  -moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px;
  border: 1px solid #ddd;
  border-radius: 7px 7px 7px 7px;
  -moz-border-radius: 7px 7px 7px 7px;
  -webkit-border: 7px 7px 7px 7px;
  color: #222;
  text-shadow: 1px 1px #FFF;
}

.form_settings textarea, .form_settings select { 
  font: 100% arial; 
  width: 299px;
}

.form_settings select { 
  width: 310px;
}

.form_settings .checkbox { 
  margin: 4px 0; 
  padding: 0; 
  width: 14px;
  border: 0;
  background: none;
}

.separator { 
  width: 100%;
  height: 0;
  border-top: 1px solid #D9D5CF;
  border-bottom: 1px solid #FFF;
  margin: 0 0 20px 0;
}
  
table { 
  margin: 10px 0 30px 0;
}

table tr th, table tr td { 
  background: #BBB;
  color: #FFF;
  padding: 7px 4px;
  text-align: left;
}
  
table tr td { 
  background: #DDD;
  color: #444;
  border-top: 1px solid #FFF;
}

/* Image Transitions */
ul#images {
  margin: 0 15px 10px 0;
  padding: 0;
  list-style: none;
  position: relative;
}

ul#images li {
  display: block;
  overflow: hidden;
  padding: 0;
  float: left;
  width: 155px;
  height: 300px;
}



/**
Stylesheet for SooperFish by www.SooperThemes.com
Author: Jurriaan Roelofs
**/

/* Configuration of menu width */
html body ul.sf-menu ul,html body ul.sf-menu ul li { 
  width: 200px;
}

html body ul.sf-menu ul ul { 
  margin: 0 0 0 190px;
}

/* Framework for proper showing/hiding/positioning */
ul.sf-menu,ul.sf-menu * { 
  margin: 0;
  padding:0 0 0 8px;
}

ul.sf-menu { 
font-family: "Graublau Web", "Graublau Web Bold", Arial, sans-serif;
font-size: 90%;
color: #727272;
  display: block;
  position: relative;
}
  
ul.sf-menu li { 
  display: block;
  list-style: none;
  float: left;
  position: relative;
}
  
ul.sf-menu li:hover { 
  visibility: inherit; /* fixes IE7 'sticky bug' */ 
}

ul.sf-menu a { 
  display: block;
  position: relative;
}
  
ul.sf-menu ul { 
  position: absolute;
  left: 0;
  
  top: auto;
  left: -999999px;
}
  
ul.sf-menu ul a { 
  zoom: 1; /* IE6/7 fix */ 
}

ul.sf-menu ul li { 
  float: left; /* Must always be floated otherwise there will be a rogue 1px margin-bottom in IE6/7 */
 
}
  
ul.sf-menu ul ul { 
  top: 0;
  margin: 0 0 0 150px;
}

ul.sf-menu li:hover ul,ul.sf-menu li:focus ul,ul.sf-menu li.sf-hover ul, 
ul.sf-menu ul li:hover ul,ul.sf-menu ul li:focus ul,ul.sf-menu ul li.sf-hover ul,
ul.sf-menu ul ul li:hover ul,ul.sf-menu ul ul li:focus ul,ul.sf-menu ul ul li.sf-hover ul,
ul.sf-menu ul ul ul li:hover ul,ul.sf-menu ul ul ul li:focus ul,ul.sf-menu ul ul ul li.sf-hover ul { 
  left: auto;
}
  
ul.sf-menu li:hover ul ul,ul.sf-menu li:focus ul ul,ul.sf-menu li.sf-hover ul ul,
ul.sf-menu ul li:hover ul ul,ul.sf-menu ul li:focus ul ul,ul.sf-menu ul li.sf-hover ul ul,
ul.sf-menu ul ul li:hover ul ul,ul.sf-menu ul ul li:focus ul ul,ul.sf-menu ul ul li.sf-hover ul ul,
ul.sf-menu ul ul ul li:hover ul ul,ul.sf-menu ul ul ul li:focus ul ul,ul.sf-menu ul ul ul li.sf-hover ul ul { 
  left: -999999px;
}

/* autoArrows CSS */
span.sf-arrow { 
  width: 7px;
  height: 7px;
  position: absolute;
  right: -10px;
  display: block;
  background: url(../images/arrows-black.png) no-repeat 0 0;
  overflow: hidden; /* making sure IE6 doesn't overflow and expand the box */
  font-size: 1px;
}

ul ul span.sf-arrow { 
  right: 5px;
  top: 20px;
  background-position: 0 100%;
}

/* Theming the menu */
ul#nav { 
  float: right;
}

ul#nav ul { 
  background: #fff;
  margin-top: 5px;
  padding-bottom: 15px;
}

ul#nav li a { 
  padding: 5px 5px 0 5px;
  font: 150% "GraublauWeb", sans-serif;
  text-shadow: 1px 1px #fff;
  text-decoration: none;
  color: #727272;
  margin-right: 2px;
}

ul#nav li a:hover, ul#nav li a:focus, ul#nav li.selected a, ul#nav li.selected a:hover, ul#nav li.selected a:focus {
	color: #FF0033;
	text-shadow: none;
}

ul#nav ul li a { 
  color: #727272;
}

ul#nav ul li a:hover {
	color: #FF0033;
	margin-right: 2px;
}



/* Image Transitions */
ul#images {
  margin: 0 15px 10px 0;
  padding: 0;
  position: relative;
}

ul#images li {
  display: block;
  overflow: hidden;
  padding: 0;
  float: left;
  width: 155px;
  height: 300px;
  list-style: none;
}

.nichtaktiv {
    transition: opacity 3s ease-out;
    opacity: 0; 
    height: 0;
}
.activiert {
    opacity: 1;
    height: auto;
}
@media only screen and (max-width: 480px) {
#main {
	margin: 5px auto;
	width: 95%;
	}
header {
		width: 100%;}

}