@blackgrey: #1b1b1b; 
@darkgrey: #959595; 
@lightgrey: #d2d2d2;
@yellow-green: #fffb31; 
@darkgrey-footer: #484748;


@fontPath: '../fonts/';
@imagePath: '../images/';

@standard-font-family: 'Fira Sans Regular';

@font-face {
  font-family: 'Fira Sans Light';
  src: url('@{fontPath}FiraSans-Light.ttf');
  font-weight: normal; 
	font-style: normal;
}

@font-face {
  font-family: 'Fira Sans Regular';
  src: url('@{fontPath}FiraSans-Regular.ttf');
  font-weight: normal; 
	font-style: normal;
}

@font-face {
  font-family: 'Fira Sans Semibold';
  src: url('@{fontPath}FiraSans-SemiBold.ttf');
  font-weight: normal; 
	font-style: normal;
}

@font-face {
  font-family: 'Fira Sans Bold';
  src: url('@{fontPath}FiraSans-Bold.ttf');
  font-weight: normal; 
	font-style: normal;
}

.regular-font {
	font-family: 'Fira Sans Regular';
}

.semi-bold-font {
	font-family: 'Fira Sans Semibold';
}

.bold-font {
	font-family: 'Fira Sans Bold';
}

.light-font {
	font-family: 'Fira Sans Light';
}


.font-size(@sizeValue) {
  @remValue: @sizeValue;
  @pxValue: (@sizeValue * 16);
  
  font-size: ~"@{remValue}rem";
}

.line-height(@sizeValue) {
  @remValue: @sizeValue;
  @pxValue: (@sizeValue * 16);
  line-height: ~"@{pxValue}px"; 
  line-height: ~"@{remValue}rem";
}


html {
	-webkit-font-smoothing: antialiased;
}

html, body {
	height: 100%;
	padding: 0;
	.standart-font;
	padding: 0;
	margin: 0;
}

body {
	 
}

h1, h2, h3, h4 {
  font-weight: bold;
  color: @blackgrey;
}

h1, h2 {
	.regular-font;
	.font-size(1.81);
	.line-height(1.81);
	font-weight: normal;
}

h1,h3 {
	
}
	
h1 {
	margin: 0;
	margin-bottom: 10px;
}

h2 {
	
	margin: 0;
	margin-bottom: 20px;
}

h3 {
	margin-bottom: 16px;
}

h3, h4 {
	.font-size(1.44);
}

p {
 margin: 0;
 margin-bottom: 20px;
 padding: 0;
}

img {
 display: block;
 border: 0;
}

img.auto-size {    
  height: auto;    
  max-width: 100%;    
}

ul {
	list-style-type:none;
	padding: 0;
	margin: 0;
}

li {
	.font-size(1);
	.line-height(1);
}

.clear {
	clear: both;	
}

.standart-font {
	.regular-font;
	.font-size(0.938);
	color: @blackgrey;
	.line-height(1.1875); 
}

a:link, a:active, a:visited, a:hover {
	.standart-font;
	color: @darkgrey;
	text-decoration: none;
}

a:hover {

}

/*-------------------------------LAYOUT-------------------------------------*/

#container {
	width: 100%;
	height: 100%;
	vertical-align: top;
	text-align: center; /* IE zentrieren Hack */
	border-top: 9px @yellow-green solid;
	margin: 0 auto;	
}

#header, #main, #footer {
	display: block;
	width: 100%;
}

#headercontent, #maincontent,
#footercontent, #submenuecontent {
	max-width: 940px;
	margin: auto;
}

#submenue #submenuecontent {
	height: 115px;
} 

#header, #headercontent {
 position: relative; 
 text-align: left;
 z-index: 9000;
}

#headercontent {
	height: 97px;
	padding-top: 27px;
}

#main {
	min-height: 100%;
	text-align: left;	
	.clear;
	margin: 0;
	/*margin-top: 14px;*/
	padding: 0;
	border: 0;	
}


#footer {
	display: block;
	min-height: 230px;
	background-color: @darkgrey-footer;
	.bold-font;
	.font-size(0.93);
	line-height: (1.25);	
	padding-top: 25px;	
}

#logo {
 display: block;
 float: left; 
   
 a:link, a:active, a:visited, a:hover {
 	display: block;
 	width: 194px;
 	height: 62px;
 	background: url('@{imagePath}/bha_logo.png') no-repeat 0; 	
 }
 
}

body.overlay-on { 
	overflow: hidden;
		
	#logo {
		a:link, a:active, a:visited, a:hover {
			background: url('@{imagePath}/bha_logo_nav_on.png') no-repeat 0; 	
		}
	}	
}

#menue-icon {
	display: none;
}

.row {
	clear: both;
}

.col-left {
	float: left;
	width: 38.54%;
}

.col-right {
	margin-left: 41.15%;
}

#system-message {

	.font-size(1);
	padding: 25px 0;
	
	a.close {
		display: none;
	}
	
	h4 {
		.font-size(1);
		margin-right: 5px;
		margin-top: 0;
		margin-bottom: 10px;
		float: left;
	}
}



/*-------------------------------NAV-------------------------------------*/

#sidenav, #mainnav, #subnav {
	display: block;
	/*width: 17.7%;*/	
	
	li {
		
		text-align: left;	
		
		a:link, a:active, a:visited, a:hover {
			display: block;		
			color:  @darkgrey;
			padding: 0;
			margin: 0;
			margin-right: 2.6%;
			margin-bottom: 4px;		
		}	
		&.active a, a:hover {
			color: @blackgrey;
		}
	}
}

#header #mainnav {
	width: 21px;
	height: 21px;
	background: url('@{imagePath}/mainnav_off.png') no-repeat 0;
	float: right;
	cursor: pointer;
	display: none;
}

body.overlay-on #header #mainnav { 
	position: fixed;
	background: url('@{imagePath}/mainnav_on.png') no-repeat 0;	
}

#submenue #subnav {
	width: 100%;
	margin-top: 67px;
	margin-bottom: 30px;
	clear: both;

	li {
		float: left;
		margin-right: 3.125%;	
		
		a:link, a:active, a:visited, a:hover {
			display: block;
			.font-size(1);	
			.regular-font;	
			color:  @darkgrey;
			margin: 0;
							
		}
		
		&.current {
			a:link, a:active, a:visited, a:hover {
			display: block;	
			.bold-font;	
			color:  @blackgrey;
		 }			
		}
	}	
}

#footer #mainnav {
		
		li {
			width: 15%;
			margin-right: 2%;
			float: left;
		
			a:link, a:active, a:visited, a:hover {
					width: 100%;
					.bold-font;
					color: @yellow-green;
			}	
		
			&.parent {
				height: 230px;
				margin-right: 2.5%;							
								
				.mod-menu__sub li {
					width: 100%;
					margin: 0;
					float: none;
					
					a:link, a:active, a:visited {
						color: @darkgrey;
					}
										
					a:hover {
						color: @lightgrey;
					}
				}
				.mod-menu__sub li.current {			
					a:link, a:active, a:visited, a:hover {
							color: @lightgrey;
					}				
				}				
			}
		}
		
		li.nomargin {
			margin-right: 0;
		}
}

#footernav {
	width: 15%;
	float: left;
	
	li {
		text-align: left;
		float: none;
		
		a:link, a:active, a:visited, a:hover {
			width: 100%;
			.bold-font;			
		}	
		
		a:hover {
			color: @lightgrey;
		}
		
		&.active {
			a:link, a:active, a:visited, a:hover {
					color: @lightgrey;
			}	
		}
		
	}
	
}

.nav-overlay {
		background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(146, 146, 146, 0.75) 0%, rgba(146, 146, 146, 0.85) 100%) repeat scroll 0 0;
    color: rgb(0, 20, 122);
    display: none;
    height: 100vh;
    position: fixed;
    top: 0;
    right: 0;   
    width: 100%;
    z-index: 8800;         
    
    .pos-center {
    	height: 100vh; 
    	margin-top: 124px;  		     
	    
			#mainnav-overlay {	
				position: relative;
				width: 100%;
				height: auto;
				margin: auto;
				float: none;
				text-align: center;						
							
				li {
					a:link, a:active, a:visited, a:hover {
						.light-font;
						.font-size(2.5);
						.line-height(3);
						color: white;
				  }	  
				  &.active a, a:hover {
						color: @yellow-green;
					}
				}
			}		
		}
}

body.responsiveView {

	.nav-overlay {
	
	
		
	#mainnav-overlay {
	
						
			li.parent {
				a:link, a:active, a:visited, a:hover {
					.font-size(2.5);
					.line-height(3);
				}
				
				li {
					a:link, a:active, a:visited, a:hover {
						.font-size(1.5);
						.line-height(2.5);
					}		
				}		
			}
		}
	}
}

#subnav, #subnav-ext {
		float: left;
}

#sidenav {
	width: 8%;
	margin-left: 92%;
}

#sidenav li {
	padding-top: 4px;	
	text-align: right;
		
	a:link, a:active, a:visited, a:hover {
		margin: 0;
		margin-left: 12px;		
	}
	
}


/*-------------------------------bharchitekten-------------------------------------*/

#bharchitekten #maincontent {
	padding-top: 0;
	
	#news-btn {
		position: absolute;
		top: 12%;
		right: 30%;
		display: block;
		width: 250px;
		height: 250px;
		margin: auto;
		color: white;
		text-align: center;
		.regular-font;
		.font-size(2.5);
		.line-height(3);
		
		&.orange {		
			background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg"><circle id="newsbtn-circle" cx="125" cy="125" r="120" fill="%23ff8800" fill-opacity="0.8"/></svg>') center center no-repeat;	
		}
		
		&.grey {		
			background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg"><circle id="newsbtn-circle" cx="125" cy="125" r="120" fill="lightgrey" fill-opacity="0.8"/></svg>') center center no-repeat;	
		}
		
		&.yellow {		
			background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg"><circle id="newsbtn-circle" cx="125" cy="125" r="120" fill="%23fffb31" fill-opacity="0.8"/></svg>') center center no-repeat;	
		}
		
		div#news-content {
			display: table-cell;
			width: 250px;
			height: 250px;
			vertical-align: middle;
			line-height: normal;
			
			a, a:link, a:visited, a:active, a:hover {
				color: white;
			}
 		}

		&.link-btn {
			cursor: pointer;
		}
		
	}
}

/*-------------------------------Team-------------------------------------*/

#team, #menschen {

	#team_galery {
	
		display: block;
		.font-size(0.75);
		color: white;
		.semi-bold-font;
		text-align: center;
		cursor: pointer;		
		
		.team_entry {
			height: 100px;
			float: left;
			z-index: 100;
			overlow: hidden;
			
			.team_img {
				width: 16.66%
			}
			
			.team_txt {
				position: relative;
				bottom: 32px;
				display: block;
				height: 28px;
				background: url('@{imagePath}/bg_team.png') 0; 	
				padding-top: 4px;							
			}
		}	
		
		
	}
}


/*-------------------------------GESCHAEFTSFUEHRUNG-------------------------------------*/

#geschaeftsfuehrung {
	
	#geschaeftsfuehrung_galery {
	
		max-width: 640px;
			
		.geschaeftsfuehrung_entry {
			display: block;
			width: 150px;
			float: left;
			.semi-bold-font;
			.font-size(0.75);
			cursor: pointer;
			margin-bottom: 40px;					
			
			.geschaeftsfuehrung_img {
				display: block;
				margin-bottom: 8px;
			}		
			
			&.on {
				color: @darkgrey;
				
				.geschaeftsfuehrung_img {
					opacity: 0.3;
				}
			}		
		}
	}
		
	.geschaeftsfuehrung_details {
			.regular-font;
			color: @darkgrey;
			.font-size(0.75);
			
			img {
				display: block;
				float: left;
				margin-right: 20px;
				margin-bottom: 40px;
			}
		
			h4 {
									
				.font-size(1.125);
				
				span {
					.regular-font;
					.font-size(0.75);
					color: @darkgrey;
				}
			}
			
			p {
				margin-bottom: 24px;
			}
	}
}

/*-------------------------------BUEROGRUENDER-------------------------------------*/

#buerogruender {
	
	 .buerogruender_entry {
			display: flex;
 
			.regular-font;
			color: @darkgrey;
			.font-size(0.75);			
			
			img {
				margin-right: 20px;				
			}
		
			h4 {
									
				.font-size(1.125);				
				margin-top: 2px;
								
				span {
					.regular-font;
					.font-size(0.75);
					color: @darkgrey;
				}
			}
			
			p {
				margin-bottom: 20px;
			}
			
			div.col-left {
				width: auto;
				float: none;
			}
			
			div.col-right {
				
				margin: 0;				
			}
	}
}

/*-------------------------------MITEINANDER/MITARBEIT/ENTWICKLUNG-------------------------------------*/

#miteinander,#mitarbeit,#entwicklung-bha {

	.regular-font;
	.font-size(0.875);
	.line-height(1.5);	
	
	
	.blog {
		margin-bottom: 30px;
	}
	
	.grid-row {
		
		display: block;
		clear: both;

		.grid-entry {
			position: relative;
			overflow: hidden;
			
			&.readmore {
				cursor: pointer;
			}
			
			.grid-img {
				
				width: 50%;
				min-height: 312px;
				float: left;
				overflow: hidden;
				
				.grid-title {
					position: absolute;
					bottom: 0;
					width: 50%;
					color: white;
					font-size: 1.25rem;
					line-height: 1.25rem;
					text-align: center;
					background: url('../images/bg_title.png');
					padding-top: 27px;
					padding-bottom: 30px;					

					a,a:link, a:active, a:hover,
					a:visited {
						color: white;
						font-size: 1.25rem;
						line-height: 1.25rem;
					}
							
				}
			}	
			
			
			.grid-intro {
				.light-font;
				.font-size(0.9375);	
				.line-height(1.5);
				
				h1,h2,h3 {
					.font-size(0.9375);	
					.line-height(1.5);
				}
				
				padding: 2%;
				margin-left: 50%;
				
				p {
					margin-bottom: 0;
				}
			}
			
			.grid-fulltxt {
				display: none;
				.light-font;
				.font-size(0.9375);	
				.line-height(1.5);
			}
			
			.grid-readmore {
				cursor: pointer;
			}	
		}
		
		&.align-right {
			.grid-img {
				float: right;
			}
			
			.grid-intro {
				margin-left: 0;
				margin-right: 50%;
			}
		}
		
		div.on {
			background-color: @yellow-green;
		}
	
	}
	
	.article-introimg {
		margin-bottom: 10px;
	}
	
	.category-desc {
		display: block;
		width: 48.4%;	
		.line-height(1.125);
		margin-left: 49.9%;
		margin-right: 1.5%;		
		margin-top: 40px;
		
		a, a:link, a:active, a:hover,
		a:visited {
			.regular-font;
			.font-size(0.875);
			.line-height(1.5);
		}
	}
	
}

/*-------------------------------STANDORTE/KONTAKT/ANFAHRT-------------------------------------*/

#standorte,#kontakt,#anfahrt {
	#maincontent {
		.com-content-article {
			margin-bottom: 30px;
		}
		
		.row {
			display: block;
			height: 311px;
			.light-font;
			.line-height(1.5);
			overflow: hidden;
			margin-bottom: 0;
			
			p.no-margin {
				margin-bottom: 0;
			}
			
			h2 {
				.regular-font;
				.font-size(1.125);
				.line-height(1.125);
				margin-top: 5px;
			}			
			
			.col-right {
				margin-left: 50%;
				padding-left: 2%;
			}
			
			&.txt-right {
				.col-left {
					width: 48%;
					padding-right: 2%;
					text-align: right;
				}
				.col-right {
					padding: 0;
				}
				
			}
			
			p {
				margin-bottom: 24px;
			}
		}
	}
}


/*-------------------------------ARCHITEKTUR/PROJEKTENTWICKLUNG/WISSENSCHAFT/AKADEMIE/GEOMANTIE/GUTACHTEN/IMPRESSUM-------------------------------------*/

#erfahrung, #architektur, #projektentwicklung, #wissenschaft,
#beratung, #geomantie, #gutachten, #qualitaet, #impressum {
	
	.regular-font;
	.font-size(0.875);
	.line-height(1.5);	
	
	
	.blog {
		margin-bottom: 30px;
	}
	
	.grid-row {
		
		display: block;
		clear: both;

		.grid-entry {
			position: relative;
			overflow: hidden;
			
			&.readmore {
				cursor: pointer;
			}
			
			.grid-img {
				
				width: 50%;
				min-height: 312px;
				float: left;
				overflow: hidden;
				
				.grid-title {
					position: absolute;
					bottom: 0;
					width: 50%;
					color: white;
					font-size: 1.25rem;
					line-height: 1.25rem;
					text-align: center;
					background: url('../images/bg_title.png');
					padding-top: 27px;
					padding-bottom: 30px;					

					a,a:link, a:active, a:hover,
					a:visited {
						color: white;
						font-size: 1.25rem;
						line-height: 1.25rem;
					}
							
				}
			}	
			
			
			.grid-intro {
				.light-font;
				.font-size(0.9375);	
				.line-height(1.5);
				
				h1,h2,h3 {
					.font-size(0.9375);	
					.line-height(1.5);
				}
				
				padding: 2%;
				margin-left: 50%;
				
				p {
					margin-bottom: 0;
				}
				
				.grid-readmore {
					cursor: pointer;
					display: block;
					float: none;
				}
			}
			
			.grid-fulltxt {
				display: none;
				.light-font;
				.font-size(0.9375);	
				.line-height(1.5);
			}
			
				
		}
		
		&.align-right {
			.grid-img {
				float: right;
			}
			
			.grid-intro {
				margin-left: 0;
				margin-right: 50%;
			}
		}
		
		div.on {
			background-color: @yellow-green;
		}
	
	}
	
	.article-introimg {
		margin-bottom: 10px;
	}
	
	.category-desc {
		display: block;
		width: 48.4%;	
		.line-height(1.125);
		margin-left: 49.9%;
		margin-right: 1.5%;		
		margin-top: 40px;
		
		a, a:link, a:active, a:hover,
		a:visited {
			.regular-font;
			.font-size(0.875);
			.line-height(1.5);
		}
	}
}

/*-------------------------------IMPRESSUM-------------------------------------*/

#impressum {
	
	.row {
	
		margin-top: 30px;
		margin-bottom: 40px;
		
		h2 {
			.font-size(1);
			margin-bottom: 30px;
		}

		.col-left,.col-right,
		a:link, a:active, a:visited, a:hover  {
			.regular-font;
			.font-size(0.875);
			.line-height(1.25)	;
		}
		
	}
}