@charset "UTF-8";

#logo {
	display: block;
	position: absolute;
	width: 100%;
	z-index: 10;
}
.logo {
	display: block;
	width: 150px;
	height: 59px;
	background: url("../images/logo800.png") no-repeat scroll 50% 0 transparent;
	margin: 0 auto;
	margin-top: 0.8em;
	z-index: 900;
}
a.logo {
	display: block;
	width: 100%;
	text-align: center;
	color: rgb(187,165,136);
	font-family: 'TradeGothic18';
	font-size: 0.9em;
	text-transform: uppercase;
	letter-spacing: .01em;
	padding-top: 4.9em;
	
}

nav .flexnav .aktiv { color: rgb(255,255,255); font-family: 'TradeGothic18'; }

nav { 
	position: relative; 
	margin-top: -20px; 
	z-index: 100; 
}
.flexnav {
	-webkit-transition: none;
	-moz-transition: none;
	-ms-transition: none;
	transition: none;
	-webkit-transform-style: preserve-3d;
	overflow: hidden;
	margin: 0 auto;
	width: 100%;
	max-height: 0;
}
.flexnav.opacity { opacity: 0; }
.flexnav.flexnav-show {
    max-height: 2000px;
    opacity: 1;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out; 
}
.flexnav li {
    font-size: 100%;
    position: relative;
    overflow: hidden; 
}
.flexnav li a {
    position: relative;
    display: block;
    padding: 1.25em;
	padding-left: 2em;
    z-index: 2;
    overflow: hidden;
    color: rgb(0,0,0);
    background: rgb(187,165,136);
    border-top: 4px solid rgb(255,255,255); 
	text-transform: uppercase;
	font-family: 'TradeGothic20';
	font-size: 1.15em;
	letter-spacing: .03em;
	font-weight: normal;
}
.flexnav > li:last-child { border-bottom: 4px solid rgb(255,255,255); }
.flexnav li ul { width: 100%; }
.flexnav li ul li {
    font-size: 100%;
    position: relative;
    overflow: hidden;
}
.flexnav li ul.flexnav-show li { overflow: visible; }
.flexnav li ul li a {
    display: block;
    background: rgb(212,189,158); 
}
.flexnav ul li ul li a { background: rgb(232,209,178); }
.flexnav ul li ul li ul li a { background: rgb(255,0,0); }
.flexnav .touch-button {
    position: absolute;
    z-index: 999;
    top: 0;
    right: 0;
    width: 50px;
    height: 50px;
    display: inline-block;
    text-align: center;
}
.flexnav ul li a.current { color: rgb(255,255,255); }
.flexnav .touch-button:hover { cursor: pointer; }
.flexnav .touch-button .navicon {
    position: relative;
    top: 1.2em;
	right: 1em;
    font-size: 1.2em;
    color: rgb(51,51,51); 
	font-family: 'ClassicalGaramondBT-Roman'; 
}
.menu-button {
  	position: relative;
  	display: block;
	height: 7em;
  	background: rgb(0,0,0);
  	color: rgb(255,255,255);
  	cursor: pointer;
}
.menu-button .touch-button {
    background: transparent;
    position: absolute;
    z-index: 999;
    top: 0;
    right: 0;
    display: inline-block;
    text-align: center;
}
.menu-button .touch-button .navicon {
    font-size: 1.5em;
    position: relative;
    top: .6em;
    color: rgb(0,0,0); 
}
.triangle {
  	width: 0px;
  	height: 0px;
  	border: 10px solid rgba(0,0,0,0);
  	border-top: 10px solid rgb(0,0,0);
  	position: relative;
  	z-index: 2;
  	top: -2px;
  	left: 50%;
}
.triangle-large { display: none; }

.menu-button .touch-button .navicon:before {
    content: '\e80b';
  	font-family: "fontello";
  	font-style: normal;
  	font-weight: normal;
  	speak: none;
	color: rgb(255,255,255);
	font-size: 1.2em; 
}
@media all and (min-width: 1024px) {
	
header { 
	width: 100%;
	height: 5.5em;
	background: rgb(0,0,0); 
}
#logo {
	display: block;
	position: absolute;
	top: 0.8em;
	width: 20%;
	z-index: 10;
	float: left;
}
a.logo { font-size: 0; }

.triangle { display: none; }

.triangle-large {
	display: block;
  	width: 0px;
  	height: 0px;
  	border: 11px solid rgba(0,0,0,0);
  	border-top: 11px solid rgb(0,0,0);
  	position: relative;
  	z-index: 2;
  	top: 0;
  	left: 50%;
}

nav { 
	margin-top: 0;
	padding-top: 1.9em;
	width: 80%;
	float: right;
}
.flexnav { overflow: visible; }

nav .flexnav .aktiv { color: rgb(187,165,136); }

.flexnav.opacity { opacity: 1; }

.flexnav li {
     position: relative;
     list-style: none;
     float: left;
     display: block;
     overflow: visible;
     width: 16%;
	 z-index: 10;
}
.flexnav li a {
	 background: rgb(0,0,0); 
	 color: rgb(255,255,255);
	 font-family: 'TradeGothic18';
	 font-size: .9em;
	 border: none;
	 -moz-box-shadow: -1px 0 rgba(187,165,136,0.6); 
	 -webkit-box-shadow: -1px 0 rgba(187,165,136,0.6);
	 box-shadow: -1px 0 rgba(187,165,136,0.6);
	 padding: .4em .9em;
	 text-align: center;
	 margin-bottom: 2em;
	 margin-top: .2em;
}
.flexnav li a:hover { color: rgb(187,165,136); }
	
.flexnav li > ul {
     position: absolute;
     top: 3.6em;
     left: 0;
	 width: 12em;	
}
.flexnav li ul li a {
    display: block;
    background: rgba(187,165,136,0.7); 
}
.flexnav ul li ul li a { background: rgba(187,165,136,0.4); }

.flexnav li > ul a {
	 -moz-box-shadow: none; 
	 -webkit-box-shadow: none;
	 box-shadow: none;
	 text-align: left;
}
.flexnav li > ul li {
     width: 100%; 
	 padding-top: .7em;
	 padding-bottom: .7em;
	 padding-left: 1em;
	 background: rgb(187,165,136);
}
.flexnav li ul li > ul {
     margin-left: 100%;
     top: 0;
	 opacity: 0.8; 
}
.flexnav li ul li a { border-bottom: none; margin-bottom: 0; }

.flexnav li:last-child { border-bottom: none; }

.flexnav li ul li a:hover { color: rgb(0,0,0); }

.flexnav li ul li { margin-bottom: 3px; }

.flexnav li ul.open {
     display: block;
     opacity: 1;
     visibility: visible;
     z-index: 1; 
}
.flexnav li ul.open li { 
	 overflow: visible;
     max-height: 100px; 
	 z-index: 10; 
}
.flexnav li ul.open ul.open {
     margin-left: 100%;
     top: 0;
}
.flexnav ul li a.current { color: rgb(0,0,0); }

.menu-button { display: none; } 
.flexnav .touch-button .navicon {
    position: relative;
	float: right;
    font-size: 1.2em;
    color: rgb(0,0,0); 
	font-family: 'ClassicalGaramondBT-Roman'; 
	top: .95em;
}
.menu-button .touch-button {
    background: transparent;
    position: absolute;
    z-index: 999;
    top: 0;
    right: 0;
    width: 5em;
    height: 3em;
    display: inline-block;
    text-align: center; 
}
.menu-button .touch-button .navicon {
    font-size: 1.5em;
    position: relative;
    top: .7em;
    color: rgb(0,0,0);
	width: 4em;
    height: 2em; 
}
  
@media all and (min-width: 1280px) { 

header { 
	width: 100%;
	height: 8em;
	background: rgb(0,0,0); 
}
#logo {
	display: block;
	position: absolute;
	width: 25%;
	z-index: 10;
	float: left;
}
.logo { margin-top: 0; }
a.logo {
	display: block;
	width: 60%;
	text-align: center;
	color: rgb(187,165,136);
	font-family: 'TradeGothic18';
	font-size: 0.9em;
	text-transform: uppercase;
	letter-spacing: .01em;
	padding-top: 4.9em;	
}
nav { 
	padding-top: 3em;
	width: 75%;
	margin: 0 auto;
	float: right;
}
.flexnav li a {
	 padding: .8em .9em;
	 text-align: center;
	 margin-bottom: 3em;
	 margin-top: 0;
}
.flexnav li > ul {
     position: absolute;
     top: 5em;
     left: 0;
	 width: 12em;	
}

}
@media all and (min-width: 1430px) { 
#logo {
	display: block;
	position: absolute;
	width: 23%;
	z-index: 10;
	float: left;
}
nav { 
	padding-top: 3em;
	width: 77%;
	margin: 0 auto;
	float: right;
}
}
@media all and (min-width: 1550px) { 
#logo {
	display: block;
	position: absolute;
	width: 21%;
	z-index: 10;
	float: left;
}
nav { 
	padding-top: 3em;
	width: 79%;
	margin: 0 auto;
	float: right;
}
.flexnav li > ul {
     position: absolute;
     left: 0;
	 width: 100%;	
}
}
@media all and (min-width: 1700px) { 
#logo {
	display: block;
	position: absolute;
	width: 19%;
	z-index: 10;
	float: left;
	margin: 0 auto;
}

}
@media all and (min-width: 1880px) { 
header { 
	width: 100%;
	height: 10em;
}
#logo {
	display: block;
	position: absolute;
	top: 1.8em;
	left: 5em;
	width: 16%;
	float: left;
}
.flexnav li a {
	font-size: 1em;
}
nav { 
	padding-top: 3.8em;
}	
.flexnav li > ul {
     position: absolute;
     top: 6.2em;
     left: 0;
	 width: 100%;	
}
.flexnav li a {
	 padding: 1em .9em;
	 text-align: center;
	 margin-bottom: 3.5em;
	 margin-top: 0;
}

}
@media all and (min-width: 2230px) { 
#logo {
	display: block;
	position: absolute;
	width: 14%;
	float: left;
}
}