/* FRONTEND CSS
*********************************************/

html {
	/* scrollbar fix (prevent ugly left pull for lower content sites) */
	overflow-y: scroll;
	overflow-x: hidden;
}

body {
	background-color: #636363;
    background-image: url("../images/background.jpg");
    background-position: center top;
    background-repeat: no-repeat;
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
	
}

h1,h2,.page-header h2{
	font-size: 25px;
	font-weight: 300;
	color: #474b3f;
}

p {
	font-size: 13.5px;
	font-weight: 300;
	line-height: 1.4em;
	color: #474b3f;
}

strong, b {
	color: #64724e;	
	font-weight: 600;
}


a {
	color: #676767;
	text-decoration: none;
}

ul,li {
	font-size: 13.5px;
	font-weight: 300;
	line-height: 1.4em;
	color: #474b3f;
}

.fluid-wrapper {
	clear: both; 
	margin: 0px auto;
	padding: 0 0 0 0;
	width: 990px;
}

.header {
	position: relative;
	width: 705px;
}

.logo {
	position: absolute;
	top: 60px;
	left: 190px;
}

.nav-header-right {
	left: 483px;
    position: absolute;
    top: 88px;
}

.nav-header-right ul {
	list-style: none;
	width: 375px;
}
.nav-header-right ul li {
	display: block;
	float: left;
	color: #474b3f;
}

.nav-header-right ul li a {
	color: #474b3f;
	text-decoration: none;
	font-size: 14px;
}

.fluid-content {
    left: 280px;
    position: relative;
    top: 157px;
    width: 675px;
    height: 50px;
}

.content-left {
	 position: absolute;
	 background-color: #8b8b8a;
	 height: 338px;
     width: 229px;
     z-index: 10;
     left: -4px;
     webkit-box-shadow: -2px -4px 5px -4px rgba(0,0,0,0.75);
	 -moz-box-shadow: -2px -4px 5px -4px rgba(0,0,0,0.75);
	 box-shadow: -2px -4px 5px -4px rgba(0,0,0,0.75);
}

.navigation {
	position: absolute;
	top: 25px;
	left: 15px;
	text-align: right;
}

.navigation ul li {
	margin: 0 0 19px 0;
	list-style-type: none;
	text-align: right;
}

.navigation ul li a {
	color: #fff;
	text-decoration: none;
	font-weight: 100;
	font-size: 15px;
	text-align: right;
}

.navigation ul li.item-113, .navigation ul li.item-119 {
	display: none; 
}

.uk-h3 {
	display: none;
}

.language {
	position: absolute;
	top: 285px;
	left: 7px;
}

.language ul li {
	float: left;
	display: block;	
	list-style-type: none;
}

.branding {
	left: 149px;
    position: absolute;
    top: 0;
}

.impressum-site {
	background: rgba(0, 0, 0, 0) url("../images/icon-impressum.png") no-repeat scroll center center;
    height: 49px;
    left: 166px;
    position: absolute;
    top: 283px;
    width: 41px;
cursor: pointer;
}

.impressum-site:hover {
	background: rgba(0, 0, 0, 0) url("../images/icon-impressum-hover.png") no-repeat scroll center center;	
}

.impressum-site a {
	color: #d1d1d7;
    font-size: 9px;
    height: 49px;
    position: relative;
    top: 34px;
    width: 41px;
    left: -2px;
}

.impressum-site a:hover {
	width: 41px;
	height: 49px;
}

.content-right {
	background-color: #c0c0c0;
	z-index: 10;
	position: absolute; 
	width: 225px;
	padding: 20px 20px 20px 25px;
	left: 340px;
	border-radius: 0 13px 0 0;
    min-height: 640px !important;

}

.footer {
    color: #c0c0c0;
    font-size: 11px;
    left: -41px;
    position: relative;
    top: 58px;
    z-index: 50;
    font-weight: 300;
}

.footer ul li {
	float: left;
	display: block; 
	list-style-type: none;
	color: #c0c0c0;
	font-weight: 300;
}

.footer ul li a {
	text-decoration: none;
	color: #9a9999;
	font-size: 10px;
}

.uk-accordion-title {
    background: none;
    color: #64724e;
    cursor: pointer;
    font-size: 13px;
    line-height: 24px;
    margin-bottom: 0px;
    margin-top: 0;
    padding: 5px 20px 5px 0;
}

strong {
	color: #64724e;
}

.imprint {
	margin-left: 7px;
}

.uk-accordion {
	margin: 0;
	padding: 0;
}

 .content-right p {
	margin: 0;
	padding: 0;
	font-size: 12px;
}

 .content-right h1 {
	margin: 20px 0 0 0 ;
	padding: 0;
	font-size: 12px;
	font-weight: 400;
	color: #000;
}

 .content-right h2 {
	margin: 0;
padding-top: 2px;
  padding-bottom: 2px;
	font-size: 12px;
	font-weight: 300;
	color: #676767;
}

.uk-accordion-content {
	padding: 0;
}

.uk-accordion-content > *:last-child {
    margin-bottom: 20px;
}

.content-center {
	background-color: #adacac;
    height: 100%;
    left: -124px;
    position: absolute;
    top: 0;
    width: 125px;
}

.nav-projects-header {
	background-color: #adacac;
    height: 100%;
    left: -125px;
    position: absolute;
    top: 0;
    width: 125px;
}

.content-center ul {
    color: #fff;
    left: 0;
    padding: 0;
    position: absolute;
    top: 55px;
    width: 103px;
}

.content-center ul li {
	list-style-type: none;
	color: #fff;
	width: 100%;
	padding: 4px 0;
}

.content-center ul li a {
	color: #fff;
    font-size: 12px;
    font-weight: 300;
    padding: 4px 77px 4px 21px;
    width: 100%;
}

.content-center ul li:hover {
	
}

.content-center ul li:hover a {
	color: #b3cd87;
	background-color: #898989;
	font-size: 12px;
	background: url(../images/nav-arrow-right.png) no-repeat center #898989;
}

.content-center ul li.current a {
	background-color: #898989;
	color: #b3cd87;
	background: url(../images/nav-arrow-right.png) no-repeat center #898989;
}

.custom_projects-heading {
	color: #fff;
    left: 22px;
    position: relative;
    top: 39px;
}

.custom_projects-heading p {
	color: #fff;
}

.page-header h2,.page-header h1 {
	 color: #474b3f;
    font-size: 20px;
    font-weight: 300;
    margin-bottom: 0;
    margin-top: 10px;
}


.item-page {
	position: relative;
	left: 0px;
}

/* Custom CSS I
*********************************************/

.custom_klein {
	display: block;
}
.custom_mittel{
	display: none;
}

.custom_gross{
	display: none;
}

.branding {
    left: 149px;
    position: absolute;
    top: -14px;
}

.content-left {
    background-color: #8b8b8a;
    box-shadow: -2px -4px 5px -4px rgba(0, 0, 0, 0.75);
    height: 337px;
    left: -4px;
    position: absolute;
    width: 229px;
    z-index: 10;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#939393+0,848484+44,787878+100 */
background: #939393; /* Old browsers */
background: -moz-linear-gradient(top, #939393 0%, #848484 44%, #787878 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#939393), color-stop(44%,#848484), color-stop(100%,#787878)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #939393 0%,#848484 44%,#787878 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #939393 0%,#848484 44%,#787878 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #939393 0%,#848484 44%,#787878 100%); /* IE10+ */
background: linear-gradient(to bottom, #939393 0%,#848484 44%,#787878 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#939393', endColorstr='#787878',GradientType=0 ); /* IE6-9 */
}

.responsive-navigation {
	display: none; 
}

.navigation {
	display: block; 
}

.toggleMenu {
    background: #050505 url("../images/toggle-icon.png") no-repeat scroll left center;
    border-radius: 5px;
    color: #ffffff;
    display: none;
    font-family: "Roboto",sans-serif;
    font-size: 13px;
    height: 40px;
    line-height: 40px;
    padding: 0 0 0 40px;
    position: absolute;
    right: 18px;
    top: -50px;
}

.responsiveMenuTheme1 {
	 font-family: "Roboto",sans-serif;
}

.responsiveMenuTheme1 a:hover, .responsiveMenuTheme1 li.active > a, .responsiveMenuTheme1 li > span.separator:hover {
    background-color: #050505;
    color: #b3cd87;
}

.menu li.current a{
	color: #b3cd87; 
}

body.projekte ul.nav li.item-131 a,body.projects ul.nav li.item-133 a{
	color: #b3cd87;
	background: #898989 url("../images/nav-arrow-right.png") no-repeat scroll right 23% center;
	font-size: 12px;
}

.content-center ul li:hover a {
	color: #b3cd87;
	background-color: #898989;
	font-size: 12px;
	background: url(../images/nav-arrow-right.png) no-repeat center #898989;
}

.content-center ul li.current a {
	background-color: #898989;
	color: #b3cd87;
	background: url(../images/nav-arrow-right.png) no-repeat center #898989;
}

.navigation ul li a:hover {
	color: #b3cd87;
}



/* Custom CSS II
*********************************************/

.nav-header-right {
    left: 490px;
}

.language ul li {
    margin-right: 9px;
}

.language {
    left: 16px;
    top: 303px;
}

@media (max-width:1250px) {
	
	.language {
    left: 16px;
    top: 286px;
	}
	
}

@media (max-width: 540px) {
	
	body.projekte ul.nav li.item-131 a, body.projects ul.nav li.item-133 a {
    background: #898989 url("../images/nav-arrow-right.png") no-repeat scroll right 23% center;
    }

}


.responsive-navigation ul li ul li {
    line-height: 0em;
}

.content-left {
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #939393 0%, #848484 44%, #787878 100%) repeat scroll 0 0;
    box-shadow: -2px -4px 5px -4px rgba(0, 0, 0, 0.25);
    height: 337px;
    left: -4px;
    position: absolute;
    width: 155px;
    z-index: 10;
}

/* MEDIA QUERIES
*********************************************/

/* Extra small devices (phones, less than 768px) */
/* No media query -> mobile first strategy */

/* Small devices (tablets, 768px and up) */
@media (min-width: 1125px) {
	
	.impressum-site {
		display: none;
	}
	
	.content-left {
    height: 356px;
    left: -178px;
	}
	
	.content-right {
	width: 385px;
	}
	
	.custom_klein {
		display: none;
	}
	.custom_mittel {
		display: block;
	}
	
}

@media (max-width: 1125px) {
	.custom_klein {
		display: none;
	}
	.custom_mittel {
		display: block;
	}
	.content-left {
    left: -178px;
    height: 356px;
	}
}






@media (max-width: 985px) {
	
	.custom_klein {
		display: block;
	}
	.custom_mittel {
		display: none;
	}
	
	.content-left {
    left: 0px;
    height: 338px;
	}
	
	.background {
		background-image: none; 
	}
	
	.header {
		
	}
	
	.nav-header-right {
    left: 310px;
    position: absolute;
    top: 88px;
	}
	
	.logo {
    left: 10px;
   	}
   
   .fluid-content {
    height: 50px;
    left: 100px;
    position: relative;
    top: 157px;
    width: 675px;
	}
	.background {
		 background-image: url("../images/background-fixed.jpg");
		 background-color: #000;
	    background-position: center top fixed;
	    background-repeat: no-repeat;
	    position: absolute;
	    top: 0;
	    bottom: 0;
	    width: 100%;
	    height: 100%;
	}
	body {
		background-image: none;
	}
	
}

/* Medium devices (desktops, 992px and up) */
@media (max-width: 723px) {
	
	* {
		padding: 0;
		margin: 0;
	}
	
	body {
		background-image: none;
	}	
	
	.background {
		background-color: #000;
	    background-image: none;
	    background-position: center top fixed;
	    background-repeat: no-repeat;
	    position: absolute;
	    top: 0;
	    bottom: 0;
	    width: 100%;
	    height: 100%;
	}
	
	.fluid-wrapper {
		width: 100%;
	}
	
	.header {
		background-color: #343434;		
		height: 80px;
		width: 100%;
	}
	
	.logo {
		left: 20px;
		top: 0;
		position: relative;
		width: 250px;
	}
	
	.logo img {
		width: 95%;
		position: relative; 
		top: 10px;
	}
	
	.nav-header-right {
		display: none;
		 left: 0;
    	position: relative;
    	top: 0;
	}
	
	.branding {
		display: none; 
	}
	
	.fluid-content {
    height: auto;
    left: 0;
    position: relative;
    top: 0;
    width: 100%;
	}
	
	.content-right {
    background-color: #c0c0c0;
    border-radius: 0;
    left: 0;
    padding: 20px 8%;
    position: absolute;
    width: 84%;
    z-index: 10;
	}
	
	.content-left {
		left: 0;
		width: 0;
		padding: 0;
	}
	
	.footer {
		left: 0;
	}
	
	.impressum-site {
		display: none; 
	}
	
	.navigation .menu {
		display: none;
	}
	
	.responsive-navigation {
	display: block; 
	position: relative;
	}

	.navigation {
	display: none; 
	}

	.responsiveMenuTheme1 {
    background: #050505 none repeat scroll 0 0;
    font-family: "Roboto",sans-serif;
    font-size: 18px;
    list-style: outside none none;
    margin: 0;
    padding: 0;
    position: relative;
    width: 100%;
    z-index: 10000;
    top: 7px;
	}
	
	.content-center {
	background-color: #adacac;
    height: 100%;
    left: 0px;
    position: absolute;
    top: 0;
    width: 83px;
	}
	
	.item-page {
	left: 83px;
    position: relative;
    width: 80%;
	}
	
	.content-center ul li a {
	color: #fff;
    font-size: 12px;
    font-weight: 300;
    padding: 4px 35px 4px 21px;
    width: 100%;
	}
	
}


@media (max-width: 385px) {

.logo img {
    position: relative;
    top: 15px;
    width: 67%;
}

.toggleMenu {
    background: #050505 url("../images/toggle-icon.png") no-repeat scroll left center;
    border-radius: 5px;
    color: #ffffff;
    display: none;
    font-family: "Roboto",sans-serif;
    font-size: 14px;
    height: 40px;
    line-height: 40px;
    padding: 0 0 0 40px;
    position: absolute;
    right: 18px;
    top: -32px;
}

.responsiveMenuTheme1 {
    background: #050505 none repeat scroll 0 0;
    font-family: "Roboto",sans-serif;
    font-size: 18px;
    list-style: outside none none;
    margin: 0;
    padding: 0;
    position: relative;
    top: 28px;
    width: 100%;
    z-index: 10000;
}

}


/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1290px) {
	
	.impressum-site {
		display: none;
	}
	
	.content-left {
    height: 356px;
    left: -340px;
	}
	
	.content-right {
	width: 451px;
	}
	
	.custom_klein {
		display: none;
	}
	
	.custom_mittel {
		display: none;
	}
	.custom_gross {
		display: block;
	}
	
}

/* for higher resolutions (android and retina) */
@media screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (max--moz-device-pixel-ratio: 1.5) {