/*-------------------------------RESPONSIVE DESIGN-------------------------------------*/

@darkblue: #1b4d64;
@homedarkblue: #031d2a;
@doveblue: #7b8f9b;
@footercolor: #213945;

@fontPath: "fonts";
@imagePath: "images";

.font-size(@sizeValue) {
  @remValue: round((@sizeValue / 16),2);
  @pxValue: @sizeValue;  
  font-size: ~"@{remValue}rem";
}

.line-height(@sizeValue) {
  @remValue: round((@sizeValue / 16),2);
  @pxValue: @sizeValue;
  line-height: ~"@{pxValue}px"; 
  line-height: ~"@{remValue}rem";
}

@font-face {
    font-family: 'TTProstoSansCondensedThin';
    src: url('@{fontPath}/TTProstoSansCondensed-Thin.eot'); /* IE9 Compat Modes */
    src: url('@{fontPath}/TTProstoSansCondensed-Thin.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('@{fontPath}/TTProstoSansCondensed-Thin.woff') format('woff'), /* Modern Browsers */
         url('@{fontPath}/TTProstoSansCondensed-Thin.ttf') format('truetype'), /* Safari, Android, iOS */
         url('@{fontPath}/TTProstoSansCondensed-Thin.svg#TTProstoSansCondensed-Thin') format('svg'); /* Legacy iOS */
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

@font-face {
    font-family: 'TTProstoSansCondensedLight';
    src: url('@{fontPath}/TTProstoSansCondensed-Light.eot'); /* IE9 Compat Modes */
    src: url('@{fontPath}/TTProstoSansCondensed-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('@{fontPath}/TTProstoSansCondensed-Light.woff') format('woff'), /* Modern Browsers */
         url('@{fontPath}/TTProstoSansCondensed-Light.ttf') format('truetype'), /* Safari, Android, iOS */
         url('@{fontPath}/TTProstoSansCondensed-Light.svg#TTProstoSansCondensed-Light') format('svg'); /* Legacy iOS */
    font-style: normal;
    font-weight: bold;
    text-rendering: optimizeLegibility;
}

@font-face {
    font-family: 'TTProstoSansCondensedRegular';
    src: url('@{fontPath}/TTProstoSansCondensed-Regular.eot'); /* IE9 Compat Modes */
    src: url('@{fontPath}/TTProstoSansCondensed-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('@{fontPath}/TTProstoSansCondensed-Regular.woff') format('woff'), /* Modern Browsers */
         url('TTProstoSansCondensed-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('TTProstoSansCondensed-Regular.svg#TTProstoSansCondensed-Regular') format('svg'); /* Legacy iOS */
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

@thin-font-family: "TTProstoSansCondensedThin";
@light-font-family: "TTProstoSansCondensedLight";
@regular-font-family: "TTProstoSansCondensedRegular";

@media all and (max-width: 1000px) {
	#maincontent {
		width: 100%;
	}
}

@media all and (max-width: 970px) {
	#headercontent, 
	#footercontent {
		width: 90%;
	}
	
	#main {
		max-width: none;		
		#maincontent {
			width: auto;
			margin-left: 15px;
			margin-right: 15px;
		}
	}
	
	#home #main {
		max-width: none;		
		#maincontent {
			width: 100%;
			margin-left: 0;
			margin-right: 0;
		}
	}
	
	#home #container #maincontent #home-intro {
		height: auto;
		padding-bottom: 40px;
	}
	
	#home #container #maincontent #home-intro, 
	#home #container #maincontent #home-main #home-content,
	#home #container #maincontent #home-main #home-box {
		width: 90%;
	}
	
	#scroll-down {
		width: 100%;
	}
	
	#home #container #maincontent #home-main #home-box {	
		background-position: 0 0;
    background-size: 100%;
    background-repeat: no-repeat;
	}
	
	#home #container #maincontent #home-main #home-content {		
		img {
			width: 100%;
		}
	}
}

@media all and (max-width: 940px) {
	body.responsiveView.overlay-on {
		#header {
			background-color: #033a52;
		}
	}
	
	.nav-overlay .pos-center #mainnav {
		width: 100%;
		li {
			width: 100%;
			float: none;
			border-bottom: 0;
			padding-left: 5%;
			
			li {
				padding-left: 2%;
				border-top: 0;
			}
		}
	}
	
	#maincontent {
    padding-top: 25px;
	}
	
	.category-desc img,
	.item-image img {
		width: 100%;
	}
	
	#maincontent .item-page.leistungen img {
		max-width: 100%;
	}
	
	#projekte #project-detail {
		#project-detail-gallery {
			float: none;
			margin-right: 0;
		}
		#project-maintxt img {
			max-width: 100%;
		}
	}
	
	#team #maincontent {
		padding-top: 30px;
		.leading-item {
			width: 100%;
			float: none;
		}
	}
	
	#kontakt #kontakt-header-img {
		float: none;
		margin-bottom: 25px;
	}
	
	#footer #footer-contact,
	#footer #footer-tel {
			width: 50%;
	}
	
	#footer #footernav {
		li {
			width: auto;
			margin-right: 15px;
		}
		li.kontakt-menu {
			margin-right: 15px;
		}
	}
}

@media all and (max-width: 810px) {
	#home #container #maincontent #home-main #home-box {
	 background-image: none;
	}
}

@media all and (max-width: 670px) {
	#aktuelles .row .leading-aktuelles-content {
		width: 100%;
		float: none;
		
		.leading-aktuelles-head img {
			width: 100%;
		}
	}
}

@media all and (max-width: 640px) {
	
	#leistungen .leading-item 
	.leading-item-content .leading-item-maintxt {
		height: auto;		
		.leading-item-readmore {
			margin-top: 20px;
		}
	}
	
	#project-img-full img {
			width: 100%;
			height: auto;
	}
}

@media all and (max-width: 620px) {
	#kontakt #kontakt-header-img {
		margin-right: 0;
		img {
			width: 100%;
	  }		
	}
}

@media all and (max-width: 580px) {

	#home #container #maincontent ul li {
		margin-left: 0;	
	}
	
	.category-desc img,
	.item-image img {
		display: none;
	}
	
	#projekte #project-detail #project-maintxt ul li {
		width: 100%;
		float: none;
		
		&.second-col {
			display: block;
			float: none;
		}
	}
	
	#referenzen #maincontent #referenzen-navi,
	#ratgeber #leading-projects {
		margin-top: 25px;
	}	
	
	#footer {
		#footer-contact,#footer-tel {
				width: 100%;
		}
		#footer-tel {
			margin-top: 20px;
			
			#footer-www {
				margin-top: 0;
			}
		}
	}
}

@media all and (max-width: 540px) {
	#impressum {
		#maincontent {
		margin-top: 0;
		
			.col-left {
				width: 100%;
				float: none;
			}
			.col-right {
				margin-left: 0;
			}
		}
	}
}

@media all and (max-width: 520px) {
	#header-contact {
		display: none;
	}
}

@media all and (max-width: 465px) {

	#team #maincontent .leading-item {
			.leading-item-introimg {
				float: none;
				margin-bottom: 20px;
			}
			.leading-item-maintxt {
				display: block;
				height: auto;
				.font-size(14);
				.line-height(16);
			}
	}
	
	#referenzen #maincontent .leading-referenzen-content 
	.leading-referenzen-head h2,
	#ratgeber #maincontent .leading-ratgeber-content 
	.leading-ratgeber-head h2	{
		.font-size(18);
	}
}	

@media all and (max-width: 410px) {
	
	#footer #footernav {
		li {
			float: none;
			margin-bottom: 10px;
		}
	}
	
	#projekte #leading-projects .leading-project-content {
		width: 100%;
		margin-right: 0;
	}

	#projekte #project-list .project-list-entry {
		width: 100%;
		float: none;
	}
}

@media all and (max-width: 400px) {
	
	#leistungen .leading-item .leading-item-content .leading-item-introimg {	
	    margin-bottom: 20px;
	    float: none;	
	}
}