/*
••••••••••••••••••••••••

Powered by Type & Grids™
www.typeandgrids.com

••••••••••••••••••••••••
*/

/*===================================================================================================
Contents
=====================================================================================================
	1) @font-face definitions
	2) Styles
	3) Positioning adjustments
	4) Media query adjustments
*/

/*===================================================================================================
1) @font-face definitions
===================================================================================================*/

@import url(http://fonts.googleapis.com/css?family=Raleway:300,400,600,700);
@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:100,300);

/*===================================================================================================
2) Styles
===================================================================================================*/

h1, h2, h3, h4, h5, h6 {
	font-family:  Raleway, 'Helvetica Neue', Helvetica, 'Trebuchet MS', Arial, sans-serif;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	text-transform: uppercase;
}
h1, h2, h3 {
	text-transform: uppercase;
}
.container h2{margin:20px 0;border-bottom:1px solid;font-size: 30px; line-height: 1.2;padding-bottom:9px;}

#logo h1, #logoDetailView h1 {
	font-family: Raleway, 'Helvetica Neue', Helvetica, 'Trebuchet MS', Arial, sans-serif;
	font-weight: 600;
	font-style: normal;
	font-size: 40px;
	line-height: 1.5;
	letter-spacing: -0.03em;
	text-decoration: none;
	text-transform: none;
	text-rendering: optimizeLegibility;
	text-shadow: none;
}

#logo h2, #logoDetailView h2 {
	font-family: Raleway, 'Helvetica Neue', Helvetica, 'Trebuchet MS', Arial, sans-serif;
	font-weight: 400;
    font-style: normal;
	font-size: 21px;
	line-height: 1.2;
	letter-spacing: 0;
	text-decoration: none;
	text-transform: none;
	text-rendering: auto;
	text-shadow: none;	
}

nav ul li a, nav ul li button, nav ul li span, #detailViewBack a {
	font-family: Raleway, 'Helvetica Neue', Helvetica, 'Trebuchet MS', Arial, sans-serif;
	font-weight: 300;
    font-style: normal;
	font-size: 20px;
	line-height: 1.5;
	letter-spacing: 0;
	text-decoration: none;
	text-transform: none;
	text-rendering: auto;
}

#detailViewBack{text-align:center;}

#detailViewImages p {
	font-size: 16px;
}

#overview h3 {
	font-family: 'Roboto Slab', Georgia, 'Times New Roman', serif;
	font-weight: 100;
    font-style: normal;
	font-size:30px;
	line-height: 1.5;
	text-decoration: none;
	text-transform: none;
	text-rendering: optimizeLegibility;
	text-shadow: none;
}

.projectThumbnailHover h4 {
	font-family: Raleway, 'Helvetica Neue', Helvetica, 'Trebuchet MS', Arial, sans-serif;
	font-weight: 700;
    font-style: normal;
	font-size: 24px;
	line-height: 1.3;
	letter-spacing: 0;
	text-decoration: none;
	text-transform: uppercase;
	text-rendering: auto;
	text-shadow: none;	
	text-rendering: optimizeLegibility;
}

.projectThumbnailHover h5 {
	font-family: 'Roboto Slab', Georgia, 'Times New Roman', serif;
	font-weight: 300;
    font-style: normal;
	font-size: 15px;
	line-height: 1.9;
	letter-spacing: 0;
	text-decoration: none;
	text-transform: none;
	text-rendering: auto;
	text-shadow: none;		
}

.projectInfo h4 {
	font-family: Raleway, 'Helvetica Neue', Helvetica, 'Trebuchet MS', Arial, sans-serif;
	font-weight: 700;
    font-style: normal;
	font-size: 16px;
	line-height: 1.2;
	letter-spacing: 0;
	text-decoration: none;
	text-transform: uppercase;
	text-rendering: auto;
	text-shadow: none;
	text-rendering: optimizeLegibility;
}

.projectNavCounter {
	font-family: Raleway, 'Helvetica Neue', Helvetica, 'Trebuchet MS', Arial, sans-serif;
	font-weight: 400;
    font-style: normal;
	font-size: 14px;
	line-height: 1.2;
	letter-spacing: 0;
	text-decoration: none;
	text-transform: none;
	text-rendering: auto;
}

.projectNavButtons button {
	font-family: Raleway, 'Helvetica Neue', Helvetica, 'Trebuchet MS', Arial, sans-serif;
	font-weight: 400;
    font-style: normal;
	font-size: 14px;
	line-height: 1.2;
	letter-spacing: 0.05em;
	text-decoration: none;
	text-transform: uppercase;
	text-rendering: auto;
}

.projectNavClose button, .projectNavEnlarge button {
	font-family: Raleway, 'Helvetica Neue', Helvetica, 'Trebuchet MS', Arial, sans-serif;
	font-weight: 400;
    font-style: normal;
	font-size: 14px;
	line-height: 1.2;
	letter-spacing: 0.05em;
	text-decoration: none;
	text-transform: uppercase;
	text-rendering: auto;
}

p, li, .projectInfo p, .projectInfo li {
	font-family: Raleway, 'Helvetica Neue', Helvetica, 'Trebuchet MS', Arial, sans-serif;
	font-weight: 300;
    font-style: normal;
	font-size: 15px;
	line-height: 1.4;
	letter-spacing: 0;
	text-decoration: none;
	text-transform: none;
	text-rendering: auto;
}
.projectInfo p, .projectInfo li {
	font-size: 14px;
	line-height: 1.3;
}

footer p,footer dl, #footerLinks li {
	font-family: Raleway, 'Helvetica Neue', Helvetica, 'Trebuchet MS', Arial, sans-serif;
	font-weight: 300;
    font-style: normal;
	font-size: 13px;
	line-height: 1.3;
	letter-spacing: 0;
	text-decoration: none;
	text-transform: none;
	text-rendering: auto;
}
#footerLinks li {
	font-family: Raleway, 'Helvetica Neue', Helvetica, 'Trebuchet MS', Arial, sans-serif;
}
footer dl { padding: 0.1em; } 
footer dt { float: left; clear: left; width: 50px; text-align: left; } 
footer dd { margin: 0 0 0 52px; padding: 0 0 0 0; }

blockquote, blockquote p {
	font-family: Raleway, 'Helvetica Neue', Helvetica, 'Trebuchet MS', Arial, sans-serif;
	font-weight: 400;
    font-style: normal;
	font-size: 14px;
	line-height: 1.4;
	letter-spacing: 0;
	text-decoration: none;
	text-transform: none;
	text-rendering: auto;
}

blockquote cite {
	font-family: Raleway, 'Helvetica Neue', Helvetica, 'Trebuchet MS', Arial, sans-serif;
	font-weight: 600;
    font-style: normal;
	font-size: 14px;
	line-height: 1.3;
	letter-spacing: 0;
	text-decoration: none;
	text-transform: none;
	text-rendering: auto;
}

#heroNav {
	margin-top: 15px;
	padding-top: 15px;
	border-top: none;
}

#heroNav a {
	font-family: Raleway, 'Helvetica Neue', Helvetica, 'Trebuchet MS', Arial, sans-serif;
	font-weight: 400;
    font-style: normal;
	font-size: 18px;
	line-height: 1.2;
	letter-spacing: 0;
	text-decoration: none;
	text-transform: uppercase;
	text-rendering: auto;
}

#formField {
	font-family: Raleway, 'Helvetica Neue', Helvetica, 'Trebuchet MS', Arial, sans-serif;
	font-weight: 400;
    font-style: normal;
	font-size: 14px;
	line-height: 1.2;
	letter-spacing: 0;
	text-decoration: none;
	text-transform: none;
	text-rendering: auto;
}

#formSubmit {
	font-family: Raleway, 'Helvetica Neue', Helvetica, 'Trebuchet MS', Arial, sans-serif;
	font-weight: 600;
    font-style: normal;
	font-size: 12px;
	line-height: 1.2;
	letter-spacing: 0.09em;
	text-decoration: none;
	text-transform: uppercase;
	text-rendering: auto;
}
#content ul li {
	list-style-type: none;
	line-height:.9em;
	margin-left:1.5em;
}
i {text-shadow: 0 1px rgba(255, 255, 255, .5)} 
.small { font-size: 95%; }
.smaller { font-size: 80%; }
.nw {white-space:nowrap;overflow:hidden;}

.iconservice {font-size:5em;}
.iconservice i {text-shadow:-1px -1px 0px rgba(185, 160, 80, .9);
}
.contentModule img {

	box-shadow:1px 1px 4px rgba(0, 0, 0, .2);
}

.contentModule img.ref {
	margin:6px;
	width: 220px;
	height: 220px;
}

.radius {
	-moz-border-radius:8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
}
	/* Google Map */
	#map_canvas { height: 400px; border:1px solid;}
	#map_canvas img { max-width: none; }
	#map_canvas h1 { font-size: 15px; font-weight: 700; line-height: 1em; letter-spacing: 1px; margin: 10px 0 0; }
	#map_canvas p { margin-bottom: 0; margin-top: 0; } 
	#map_canvas .gmnoprint { line-height: 2; }

#main {
	position: relative;
	margin-top: 150px;
}

.bordertopgold { border-top:1px solid;}
div.icontop {
	font-size:1.5em;
	margin:0 auto;
	margin-top:-.5em;
	text-align:center;
	width:1.7em;height:1.7em;
}
div.icontop a:hover {
    opacity:.8;
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;	
}
div.icontop a {
	text-decoration:none;
    opacity:0.3;
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;	
}
.refmod img:hover {
    opacity:1;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;	
}
.refmod img {
    opacity:0.7;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;	
}
footer {
	margin-top: 10px;
	padding: 8px 0px;
}
footer > hr {margin: 5px 0 10px; height: 0; }
hr.small {margin: 5px 0 10px; height: 0; }

#fullimg h1{
font-size:2.5em;color:rgba(255,255,255,.9); border:none;text-shadow: 0 0 5px rgba(0, 0, 0, .9); position:absolute; right:5px;top:30px;text-align:right;
animation:fadeh1 2s;
-webkit-animation:fadeh1 2s; /* Safari and Chrome */
}

@keyframes fadeh1
{
from {color:rgba(255,255,255,0);text-shadow: 0 0 5px rgba(0, 0, 0, 0);}
to {color:rgba(255,255,255,.9);text-shadow: 0 0 5px rgba(0, 0, 0, 0.9);}
}

@-webkit-keyframes fadeh1 /* Safari and Chrome */
{
from {color:rgba(255,255,255,0);text-shadow: 0 0 5px rgba(0, 0, 0, 0);}
to {color:rgba(255,255,255,.9);text-shadow: 0 0 5px rgba(0, 0, 0, 0.9);}
}

.lazy {
  display: none;
}

ol.ebene1 {
	counter-reset:listenpunkt_ebene1;
	list-style-type:none;
}
ol.ebene1 li:before {
	content: counter(listenpunkt_ebene1) ". ";
	counter-increment:listenpunkt_ebene1;
}
ol.ebene2 {
	counter-reset:listenpunkt_ebene2;
	list-style-type:none;
}
ol.ebene2 li:before {
	content: counter(listenpunkt_ebene1)"."counter(listenpunkt_ebene2,decimal) ". ";
	counter-increment:listenpunkt_ebene2;
} 
/*===================================================================================================
4) Set Image Grayscale
===================================================================================================*/
img.grayscale {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+ */
    filter: gray; /* IE6-9 */
    -webkit-transition: all 0.6s ease; /* Fade to color for Chrome and Safari */
	-moz-transition: all 0.6s ease;
	-o-transition: all 0.6s ease;
	transition: all 0.6s ease;	
    -webkit-backface-visibility: hidden; /* Fix for transition flickering */
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-webkit-filter: grayscale(100%);
	-o-filter: grayscale(100%);
}

img.grayscale:hover {
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
	filter: none;
	-webkit-filter: grayscale(0%);
	-webkit-filter: grayscale(0%);
	-moz-filter: grayscale(0%);
	-ms-filter: grayscale(0%);
	-webkit-filter: grayscale(0%);
	-o-filter: grayscale(0%);	
}

img.half-grayscale {
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'saturate\' values=\'0.5\'/></filter></svg>#grayscale"); /* Firefox 10+ */
	filter: gray alpha(opacity=50); /* IE6-9 */
	-webkit-transition: all 0.6s ease; /* Fade to color for Chrome and Safari */
	-moz-transition: all 0.6s ease;
	-o-transition: all 0.6s ease;
	transition: all 0.6s ease;	
	-webkit-backface-visibility: hidden; /* Fix for transition flickering */
	-webkit-filter: grayscale(50%);
	-moz-filter: grayscale(50%);
	-ms-filter: grayscale(50%);
	-webkit-filter: grayscale(50%);
	-o-filter: grayscale(50%);	
}

img.half-grayscale:hover {
	filter: none;
	-webkit-filter: grayscale(0%);
	-webkit-filter: grayscale(0%);
	-moz-filter: grayscale(0%);
	-ms-filter: grayscale(0%);
	-webkit-filter: grayscale(0%);
	-o-filter: grayscale(0%);
}

/*===================================================================================================
4) Positioning adjustments
===================================================================================================*/

#logo h2, #logoDetailView h2 {
	margin-top: -2px;
	padding-left: 2px;
}

nav {
	padding-top: 89px;
	margin-bottom: -30px;
}

nav ul li {
	padding-left: 20px;
}

#overview {
	padding: 20px;		
}

#overview h3 {
	margin-top: 10px;
	margin-bottom: 20px;
}

.projectThumbnailHover h4 {
	margin-top: 40px;
}

.projectThumbnailHover h5 {
	padding-top: 68px;
}

.projectInfo h4 {
	padding-top: 10px;
	padding-bottom: 8px;
}

.projectNavCounter {
	padding-top: 13px;
}

.projectNavClose, .projectNavEnlarge {
	padding-top: 3px;
	padding-top: 5px\9; /* IE adjustment */
}

.projectNavButtons {
	padding-top: 3px;
	padding-top: 5px\9; /* IE adjustment */
}

/* Tweak positioning slightly in Firefox */
@-moz-document url-prefix() {
  .projectNavEnlarge, .projectNavClose, .projectNavButtons {
		padding-top: 6px;
	}
}

.projectInfo ul {
	margin-top: -8px;
	margin-bottom: 7px;
}

.projectInfo p + ul {
	margin-top: -20px;
}

.projectInfo li, .linedList li {
	border-top: 1px solid #ddd;
	margin-top: 6px;
	margin-bottom: -1px;
	padding-top: 6px;
	padding-bottom: 0px;
}

@-moz-document url-prefix() {
	.projectInfo li, .linedList li {
		margin-bottom: -1px;
	}
}

.projectInfo li:last-child {
	margin-bottom: -2px;
}

.linedList {
	padding-bottom: 7px;
}

/*===================================================================================================
5) Media query adjustments
===================================================================================================*/
	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {
		
		nav ul li a, nav ul li button, nav ul li span, #detailViewBack a {
			font-size: 16px;
		}
		
	}

	/* Tablet portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {
		
		.projectThumbnailHover h4 {
			font-size: 18px;
		}
		
		.projectThumbnailHover h5 {
			font-size: 13px;
			padding-top: 59px;
		}
		p, li, .projectInfo p, .projectInfo li {
			font-size: 13px;
			line-height: 1.2;
		}	
		.projectInfo p, .projectInfo li  {
			font-size: 12px;
		}		
		#heroNav a {
			font-size: 14px;
		}		
		#fullimg h1{
			font-size:2.2em;
			right:10px;
		}	
		#overview h3 {
			font-size: 26px;
		}	
		.contentModule img.ref {
			margin:4px;
			width: 175px;
			height: 175px;
		}	
	}

	/* All mobile sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
		#main {
			margin-top: 120px;
		}		
		#map_canvas { height: 200px; }
			
		#logo h1, #logoDetailView h1 {
			line-height: 1.1;
		}
		
		#logo h2, #logoDetailView h2 {
			margin-top: -12px;
		}

		header {
			padding-top: 10px;
		}
		
		nav {
			padding-top: 9px;
			margin-bottom: -11px;
		}
		
		#overview {
			padding-bottom: 0px;
		}
		
		#overview h3 {
			font-size: 20px;
		}
		.container h2{ 
			font-size: 24px;
		}		
		footer p {
			font-size: 13px;
		}
		#footerLinks li {
			line-height: 0.5;	
		}
		#fullimg h1{
			font-size:1.8em;
			width:100%;
			right:0px;
			padding:0;
			margin:0 auto;
		}
		#detailViewImages p{
			font-size: 14px;
		}			
		img.grayscale, img.grayscale:hover, img.half-grayscale, img.half-grayscale:hover {
			filter: none;
			-webkit-filter: grayscale(0%);
			-webkit-filter: grayscale(0%);
			-moz-filter: grayscale(0%);
			-ms-filter: grayscale(0%);
			-webkit-filter: grayscale(0%);
			-o-filter: grayscale(0%);
		}	
		.contentModule img.ref {
			margin:6px;
			width: 195px;
			height: 195px;
		}		
	}

	/* Mobile landscape size to tablet portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {
		.refmod img, .refmod img:hover{
			opacity:1;
		}
	}

	/* Mobile portrait size to mobile landscape size (devices and browsers) */
	@media only screen and (max-width: 479px) {
		
		#logo h1, #logoDetailView h1 {
			font-size: 32px;
		}
		
		#logo h2, #logoDetailView h2 {
			font-size: 14px;
			margin-top: -12px;
		}
		
		#overview h3 {
			font-size: 20px;	
		}
		
		.container h2{ 
			font-size: 18px;
		}		
		.projectThumbnailHover h4 {
			font-size: 20px;
		}
		.projectInfo h4 {
			font-size: 14px;
		}
		.projectThumbnailHover h5 {
			font-size: 12px;
			padding-top: 60px;
		}
		.projectNavClose button span, .projectNavEnlarge button span, .projectNavButtons button span{
			display:none;
		}	
		.projectNavClose button, .projectNavEnlarge button, .projectNavButtons button {
			font-size: 18px;
			line-height:1em;
		}	
		#fullimg h1{
			text-align:center;
		}		
		#detailViewImages p {
			font-size: 12px;
		}		
		#detailViewBack a {
			font-size: 14px;
		}
		.refmod img, .refmod img:hover{
			opacity:1;
		}		
		.contentModule img.ref {
			margin:0 0 10px 0;
			width: 300px;
			height: 300px;
		}			
	}