/* ########## METRO ################# */

@font-face{
font-family:'RobotoRegular'; src:url('../fonts/Roboto-Regular-webfont.eot'); src:url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),url('../fonts/Roboto-Regular-webfont.woff') format('woff'),url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'),url('../fonts/Roboto-Regular-webfont.svg#RobotoRegular') format('svg'); font-weight:normal; font-style:normal}
@font-face{
font-family:'RobotoLight'; src:url('../fonts/Roboto-Light-webfont.eot'); src:url('../fonts/Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),url('../fonts/Roboto-Light-webfont.woff') format('woff'),url('../fonts/Roboto-Light-webfont.ttf') format('truetype'),url('../fonts/Roboto-Light-webfont.svg#RobotoLight') format('svg'); font-weight:normal; font-style:normal}
#headingstyles{
font-family:"Segoe UI Light","Helvetica Neue",'RobotoLight',"Segoe UI","Segoe WP",sans-serif;font-weight:100;margin-top:5px;margin-bottom:0px;text-transform:lowercase}

 
body{
font-family:"Segoe UI","Segoe WP","Helvetica Neue",'RobotoRegular',sans-serif;font-size:14px; background:url(../images/bg.png); margin:0; padding:0;}

h1,h2,h3,h4,h5,h6{
font-family:"Segoe UI","Helvetica Neue",'RobotorRegular',"Segoe UI","Segoe WP",sans-serif;font-weight:100;margin-top:5px;margin-bottom:0px;}

h1{
font-size:42px}

h2{
font-size:26px}

h3{
font-size:24px}

h4,h5,h6{
font-weight:normal;text-transform:uppercase}

.red{
color:#e51400}

.redbg{
background-color:#c40004}

a{
color:#000;text-decoration:underline}

a:hover{
text-decoration:none}

pre{
padding:15px;border:1px solid #aaa;background:#fafafa}

code{
background:#fafafa;border:1px solid #aaa;padding-left:5px;padding-right:5px}

.clear{
clear:both}

textarea{
overflow:auto;vertical-align:top}

.hide{
display:none}

.show{
display:block}

.invisible{
visibility:hidden}

.left {
float:left;}

.right {
float:right,}

/* ########### BASICS ############# */

#page {
width:900px;
min-height:500px;
margin:0 auto;
padding-bottom:30px;
}

#header {
position:relative;
height:100px;
margin-bottom:50px;
}

#header a{
color:#000;text-decoration:none}

#header a:hover{
text-decoration:none}

#header img {
opacity:0.75;
padding-top:10px;
}


#header h1, h4 {
margin-left:120px;
}

#header h1 {
font-size:56px;
}

#menu { 
	height:40px;
	position: relative;
} 

#content {
margin:0 10px 0 10px;
padding:10px 20px 10px 20px;
background: rgba(255, 255, 255, 1);
/* border-top:5px solid rgba(196, 0, 4, 0.75);
border-bottom:5px solid rgba(196, 0, 4, 0.75); */
	-webkit-box-shadow: rgba(0, 0, 0, 0.2) 5px 5px 10px;
    -moz-box-shadow: rgba(0, 0, 0, 0.2) 5px 5px 10px;
    box-shadow: rgba(0, 0, 0, 0.2) 5px 5px 10px; 
border:2px solid #e9e9e9;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

#footer {
width:100%;
text-align:center;
font-size:10px;
}

.counter {
padding-left:40px;
text-align:left;
float:left;
}

.copy {
padding-right:40px;
text-align:right;
float:right;
}

#nav {
display:none;
position:absolute;
right:25px;
top:0px;
z-index:50;
}
#album {
margin-left:80px;
}

.box {
   background: #fff;
   width: 730px;
   min-height:450px;
   box-shadow: 0 0 10px #222;
   padding: 10px;
}

.inhalt{
margin-left:200px;
}

/*########## MENU SMALL ########### */

#nav ul{ list-style-type:none; margin:0; padding:0; }
#nav li { float:left; padding:0; margin:0;}
#nav li a { width:275px; display:block; text-align:center; color:#FFF; margin-right:5px; height:35px; line-height:35px; text-decoration:none; font-size:80%; border:1px solid #ccc; font-family:"Segoe UI","Helvetica Neue",'RobotoRegular',"Segoe UI","Segoe WP",sans-serif;font-weight:100; }
#nav li a.button {width:250px; font-size:1.5em; opacity:0.75; background:#c40004 url(../images/arrow.png) no-repeat 230px 15px; transition: opacity .5s ease;}
#nav li a:hover.button {opacity:1;  }
#nav ul ul { display:none; position:absolute; z-index:999; left:10px; }
#nav li li { float:none; }
#nav li li a { background:#FFFFFF!important; color:#000; text-align:left; height:auto; line-height:1; width:auto; padding:8px 20px 8px 22px; border:1px solid #D0D0D0; border-top:none; margin-right:0; font-size:1em; }
#nav li li a:hover {  background:#c40004!important; color:#FFF;}

* html li li { display:inline; } /* IE6 Bugfix... */


/*################ MENU BIG #################*/

/* ########### MENU ################## */

div#page div#dropdown {
	height: 40px;
	padding: 0px;
	position: relative;
	border-left:1px solid #d5d5d5;
	float:right;
	
}

/* -[ PAGE -> DROPDOWN -> ALLGEMEIN ]- */

div#page div#dropdown ul {

	margin: 0px;
	padding: 0px;

}

div#page div#dropdown ul li {

	margin: 0px;
	padding: 0px;
	position: relative;
	list-style: none;
	list-style-type: none;

}

/* -[ PAGE -> DROPDOWN -> LEVEL 2 + 3 + 4 ]- */

div#page div#dropdown ul li ul {
	position: absolute;
	left: 0;
	display: block;
	z-index: 999;
	visibility: hidden;
	width: 220px !important;
	-webkit-box-shadow: rgba(0, 0, 0, 0.2) 5px 5px 10px;
    -moz-box-shadow: rgba(0, 0, 0, 0.2) 5px 5px 10px;
    box-shadow: rgba(0, 0, 0, 0.2) 5px 5px 10px;
	border:1px solid #D0D0D0;
}

div#page div#dropdown ul li ul li {

	position: relative;
	display: block;
	width: 220px !important;

}

div#page div#dropdown ul li ul li.first,
div#page div#dropdown ul li ul li.middle {
	border-bottom: 1px solid #d5d5d5;
}

/* -[ PAGE -> DROPDOWN -> LEVEL 1 ]- */

div#page div#dropdown ul li {
	float: left;
}

div#page div#dropdown ul li a {
	color: #FFF;
	text-decoration: none;
	line-height: 40px;
	padding: 0px 10px 0px 10px;
	display:block;
	transition: opacity .5s ease;
	opacity:0.75;
	background: #c40004;
	margin-right:5px;
}

div#page div#dropdown ul li:hover a,
div#page div#dropdown ul li a:hover {
	color: #FFF;
	text-decoration: none;
	display: block;
	line-height: 40px;
	opacity:1;

}

div#page div#dropdown ul li a.aktiv,
div#page div#dropdown ul li a.aktiv:hover {

	color: #FFF;
	text-decoration: none;
	display: block;
	line-height: 40px;

}

div#page div#dropdown ul li a.password {

	background: url('../images/dropdown.password.png') right no-repeat;
	padding: 0px 25px 0px 10px;
	display: block;
	line-height: 40px;

}

div#page div#dropdown ul li:hover a.password,
div#page div#dropdown ul li a.password:hover,
div#page div#dropdown ul li a.password.aktiv,
div#page div#dropdown ul li a.password.aktiv:hover {

	background: url('../images/dropdown.password.hover.png') right no-repeat;
	padding: 0px 25px 0px 10px;
	display: block;

}

/* -[ PAGE -> DROPDOWN -> LEVEL 2 LINKS ]- */

div#page div#dropdown ul li:hover ul li a,
div#page div#dropdown ul li ul li a {

	position: relative;
	display: block;
	width: 180px !important;
	height: 32px !important;
	line-height: 31px !important;
	overflow: hidden;
	padding: 0px 20px 0px 20px !important;
	color:#000;
	background:#FFF;
}

div#page div#dropdown ul li:hover ul li a:hover,
div#page div#dropdown ul li ul li a:hover,
div#page div#dropdown ul li ul li:hover a {

	background: #c40004;
	color:#FFF;

}

div#page div#dropdown ul li:hover ul li a.aktiv,
div#page div#dropdown ul li ul li a.aktiv {
	color: #FFF;
	background: #c40004;
}

div#page div#dropdown ul li:hover ul li a.password,
div#page div#dropdown ul li ul li a.password {

	background: url('../images/dropdown.password2.png') right no-repeat;
	padding: 0px 40px 0px 20px;
}

div#page div#dropdown ul li:hover ul li a.password:hover,
div#page div#dropdown ul li ul li a.password:hover,
div#page div#dropdown ul li ul li:hover a.password,
div#page div#dropdown ul li:hover ul li a.password.aktiv,
div#page div#dropdown ul li ul li a.password.aktiv {

	background: #c40004 url('../images/dropdown.password.hover2.png') right no-repeat;
	padding: 23px 40px 22px 20px;
	opacity:1;
}

/* -[ PAGE -> DROPDOWN -> LEVEL 3 LINKS ]- */

div#page div#dropdown ul li ul li:hover ul li a,
div#page div#dropdown ul li ul li ul li a {

	position: relative;
	display: block;
	width: 180px !important;
	height: 32px !important;
	line-height: 31px !important;
	overflow: hidden;
	padding: 0px 20px 0px 20px !important;
	background: #fdfdfd; /* Old browsers */
	background: -moz-linear-gradient(top, #fdfdfd 0%, #f0f0f0 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fdfdfd), color-stop(100%,#f0f0f0)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #fdfdfd 0%,#f0f0f0 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #fdfdfd 0%,#f0f0f0 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #fdfdfd 0%,#f0f0f0 100%); /* IE10+ */
	background: linear-gradient(to bottom, #fdfdfd 0%,#f0f0f0 100%); /* W3C */
	color:#545248;

}

div#page div#dropdown ul li ul li:hover ul li a:hover,
div#page div#dropdown ul li ul li ul li a:hover, div#page div#dropdown ul li ul li ul li:hover a {
	color:#FFF;
	background: #a30000;

}

div#page div#dropdown ul li ul li:hover ul li a.aktiv,
div#page div#dropdown ul li ul li ul li a.aktiv {

		color:#FFF;
	background: #a30000;

}

div#page div#dropdown ul li ul li:hover ul li a.password,
div#page div#dropdown ul li ul li ul li a.password {

	background: url('../images/dropdown.password.png') right no-repeat;
	padding: 0px 40px 0px 20px;

}

div#page div#dropdown ul li ul li:hover ul li a.password:hover,
div#page div#dropdown ul li ul li ul li a.password:hover,
div#page div#dropdown ul li ul li ul li:hover a.password,
div#page div#dropdown ul li ul li:hover ul li a.password.aktiv,
div#page div#dropdown ul li ul li ul li a.password.aktiv {

	background: #8fa620 url('../images/dropdown.password.hover.png') right no-repeat;
	padding: 23px 40px 22px 20px;

}

/* -[ PAGE -> DROPDOWN -> LEVEL 4 LINKS ]- */

div#page div#dropdown ul li ul li ul li:hover ul li a,
div#page div#dropdown ul li ul li ul li ul li a {

	position: relative;
	display: block;
	width: 180px !important;
	height: 32px !important;
	line-height: 31px !important;
	overflow: hidden;
	padding: 0px 20px 0px 20px !important;
	background: #26292b;

}

div#page div#dropdown ul li ul li ul li:hover ul li a:hover,
div#page div#dropdown ul li ul li ul li ul li a:hover,
div#page div#dropdown ul li ul li ul li ul li:hover a {

	background: #8fa620;

}

div#page div#dropdown ul li ul li ul li:hover ul li a.aktiv,
div#page div#dropdown ul li ul li ul li ul li a.aktiv {

	background: #8fa620;

}

div#page div#dropdown ul li ul li ul li:hover ul li a.password,
div#page div#dropdown ul li ul li ul li ul li a.password {

	background: url('../images/dropdown.password.png') right no-repeat;
	padding: 0px 40px 0px 20px;

}

div#page div#dropdown ul li ul li ul li:hover ul li a.password:hover,
div#page div#dropdown ul li ul li ul li ul li a.password:hover,
div#page div#dropdown ul li ul li ul li ul li:hover a.password,
div#page div#dropdown ul li ul li ul li:hover ul li a.password.aktiv,
div#page div#dropdown ul li ul li ul li ul li a.password.aktiv {

	background: #8fa620 url('../images/dropdown.password.hover.png') right no-repeat;
	padding: 23px 40px 22px 20px;

}

.Popup{     
    display: none;
    background: #fff;
    left: 50%;
    margin-left: -400px;
    position: fixed;
    top: 150px;
    width: 750px;
    z-index: 3;
    box-shadow: 0 0 10px #222;
    padding: 10px;
	height:450px;
} 

.Popup p{
margin-left:200px;
}
#overlay{
    display: none; 
    background: -moz-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.5) 100%); 
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0.5)));     
    background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.5) 100%);     
    background: -o-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.5) 100%);     
    background: -ms-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.5) 100%);     
    : radial-gradient(ellipse at center,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.5) 100%);     
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#80000000',GradientType=1 );   
    width: 100%;   
    height: 100%;   
    position: fixed;   
    z-index: 2;   
    top: 0px; 
}

.closebutton {
position:absolute;
z-index:4;
top:-25px;
right:-25px;
}

/* LISTEN */

ul.metro-list,ol.metro-list{
padding:0}

ul.metro-list li,ol.metro-list li{
display:block;list-style-type:none;border-left:solid 30px #e51400;height:20px;list-style-position:inside;margin:10px 0;padding:5px}

ul.metro-list{
overflow:hidden}

ol.metro-list{
text-indent:-25px;counter-reset:item}

ol.metro-list li:before{
color:white;margin-right:25px;content:counter(item) " ";counter-increment:item}

/* TILES */

.tile{
float:left;margin-right:10px;margin-bottom:10px;text-align:center;padding:5px;opacity:0.75; transition: all .3s ease;}

.tile h1,.tile h2,.tile h3,.tile h4,.tile h5,.tile h6{
color:#fff;-webkit-user-select:none}

.tile h2{
font-size:1.4em;margin-top:-10px;margin-left:0px}

.tile a:hover{
text-decoration:none}

.tile img{
border:0}

.tile:hover{
opacity:1; transform:scale(1.03);}

.tiles{
clear:both}

.tilerow{
float:left;-webkit-perspective:0;-webkit-transform-style:preserve- 3 d;-webkit-user-select:none}

/* TILE FORMAT */

.one{
width:130px;height:130px}

.two-h{
width:280px;height:130px}

.two-v{
width:130px;height:280px}

.firstcol,.secondcol,.thirdcol,.fourthcol,.fifthcol{
position:absolute}

.secondcol{
margin-left:150px}

.thirdcol{
margin-left:300px}

.fourthcol{
margin-left:450px}

.fifthcol{
margin-left:600px}


html{
font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
/*
a:focus{
outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px} */

a:hover,a:active{
outline:0}

sub,sup{
position:relative;font-size:75%;line-height:0;vertical-align:baseline}

sup{
top:-0.5em}

sub{
bottom:-0.25em}

img{
max-width:100%;height:auto;border:0;-ms-interpolation-mode:bicubic}

button,input,select,textarea{
margin:0;font-size:100%;vertical-align:middle}

button,input{
*overflow:visible;line-height:normal}

button::-moz-focus-inner,input::-moz-focus-inner{
padding:0;border:0}

button,input[type="button"],input[type="reset"],input[type="submit"]{
cursor:pointer;-webkit-appearance:button}

input[type="search"]{
-webkit-appearance:textfield;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}

input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button{
-webkit-appearance:none}

.box a {
color:#e51400;text-decoration:underline}

.box a:hover{
text-decoration:none}



