/*
	
Theme Name: E+P Architekten
Theme URI: http://webgearing.com
Description: based on the Starkers Theme.
Version: 1.0
Author: Andris Linz @ webgearing AG
Author URI: http://webgearing.com


COLORS

schwarz:	#2a3243;
grau:		#333;
hellgrau:	#f5f7f6;
weiss:		#fff;

*/


/* ------------------------- RESET ------------------------- */


body, html, h1, h2, h3, h4, h5, h6, p, ul, li, ol, img, fieldset { margin:0; padding:0; border:0;}

ul, li, ol { list-style:none; }

:focus { outline:none; }


/* ------------------------- UTILITIES ------------------------- */


.clear { clear:both; height:0;}

.floatLeft { float:left; }

.floatRight { float:right; }


/* ------------------------- MAIN-STYLES ------------------------- */


body {font-family:'Roboto Condensed', Helvetica, Arial, sans-serif; letter-spacing:.08em; color:#2a3243; background:#fafafa;}


/* BUTTON */


.button {padding:10px 20px !important; background:transparent !important; font-size:14px !important; border:#2a3243 2px solid !important; font-weight:normal !important; display:inline-block;}

.button span {color:#fff !important;}

.button:hover {cursor:pointer !important; border:#2a3243 2px solid !important; background:#2a3243 !important;}

.button:hover span {color:#fff !important;}


/* ------------------------- TYPO ------------------------- */


h1	{font-family:'Roboto Condensed', Helvetica, Arial, sans-serif; font-size:30px; font-weight:900; line-height:38px; margin:0 0 13px 0; text-transform:uppercase;}

h2 	{font-family:'Roboto Condensed', Helvetica, Arial, sans-serif; font-size:28px; font-weight:300; line-height:38px; margin:0 0 13px 0;}

h3 	{font-family:'Roboto Condensed', Helvetica, Arial, sans-serif; font-size:18px; font-weight:300; line-height:22px; margin:0 0 13px 0;}

p 	{font-size:14px; line-height:20px; font-weight:300; margin:0 0 13px 0;}

a 	{text-decoration:none; color:#222; transition: all ease 0.3s;}

a:hover {text-decoration:none; color:#7e7e7e; transition: all ease 0.3s;}

p a {font-weight:bold;}

hr {border:none; border-bottom:#dd3333 1px solid; height:1px; background:transparent; margin:0 0 13px 0; width:33%; min-width:150px;}

ul {margin:0 0 0 13px;}

ul li {list-style:square; padding:0 0 0 5px; margin:0 0 5px 0;}


/* ------------------------- HEADER ------------------------- */


header {width:300px; padding:104px 26px 52px; background:#fff; position:fixed; left:0; top:0; height:100vh; overflow:auto; overflow-x: hidden;}


/* LOGO AREA */


#logo-area {margin-bottom:78px;}

#logo-area img {height:34px; width:auto;}

#logo-area .widget-container {margin:0; padding:0;}


/* MENU AREA */

#mobile-toggle {display:none;}

#menu-area .menu {padding:0; margin:0;}

#menu-area .menu li {list-style:none; padding:0; margin:0; border-top:rgba(0, 0, 0, 0.06) 1px solid; }

#menu-area .menu li:last-child {border-bottom:rgba(0, 0, 0, 0.06) 1px solid;}

#menu-area .menu li a {font-size:20px; line-height:30px; font-weight:300; color:#999; text-transform:uppercase; display:block; padding:13px 0;}

#menu-area .menu li:hover a {color:#333;}

/* ------------------------- MAIN ------------------------- */


#main {width:calc(100% - 452px); padding:104px 52px 52px 52px; margin:0 auto; min-height:600px; height:calc(100% - 156px); position:fixed; left:352px; top:0; overflow:auto; overflow-x:hidden;}

#main ul li {font-size:14px; line-height:20px; color:#333; list-style:none;}

#main ul li:before {content: "•"; color:#333; margin:0 0 0 0; position:relative; left:-15px; padding:0 0 0 15px;}

/* ------------------------- HOME ------------------------- */


.home-zeile h1 {font-size:25px; line-height:26px; text-transform:uppercase; margin:0 0 26px 0; font-weight:300;}

.home-zeile h1 strong {font-weight:900;}

.home-zeile h2 {font-size:25px; line-height:26px; text-transform:uppercase; margin:0; font-weight:300;}

.teaser-home h3 a {font-size:26px; font-weight:400; line-height:35px; text-transform:uppercase; color:#333;}

.teaser-home h3 a:hover {color:#2a3243;}

/* Aktuelles Home */

.teaserposts {width:100%;}

.teaserposts .grid-sizer {width:calc(33.3% - 30px);}

.teaserpost {width:calc(33.3% - 30px); height:auto; margin-bottom:30px;}

.teaser-bild {z-index:1; margin:0 0 13px 0;}

.teaser-bild img {width:100%; height:auto;}

/* ------------------------- PORTFOLIO ------------------------- */

.portfolioHeaderOverview {margin:0 0 26px 0;}

.portfolioHeader {margin:0 0 52px 0;}

.portfolioHeader .button {margin:26px 0; border:none !important; padding:0 !important; font-size:18px !important; font-weight:300 !important; color:#333; text-transform:uppercase; line-height:18px;}

.portfolioHeader .button span {line-height:5px !important; font-size:18px !important; font-weight:300 !important; color:#333 !important; }

.portfolioHeader .button:hover {background:transparent !important;}

/* Portfolio Single */

.linkeSpalte {width:calc(50% - 52px); float:left; margin:0 52px 0 0;}

.rechteSpalte {width:50%; float:left;}

.rechteSpalte img {width:100%; height:auto; margin:0 0 26px 0;}

/* Portfolio Übersicht */

.portfolioContainer {width:100%;}

.portfolioContainer .grid-sizer {width:calc(33.3% - 10px);}

.portfolio {width:calc(33.3% - 10px); height:auto; margin-bottom:10px;}

/*.grid-sizer {width:341px;}

.portfolio {width:315px; margin:0 13px 26px 13px; height:auto; height:315px;}*/

.portfolio-bild {z-index:1;}

.portfolio-bild img {width:100%; height:auto;}

.portfolio-overlay {background:rgba(155, 150, 146, 0.9); display:none; z-index:99; position:absolute; top:0; left:0; width:100%; height:calc(100% - 4px);}

.portfolio-overlay a {color:#fff; font-size:52px; line-height:70px; text-align:center; display:block; height:100%; vertical-align:center;}

#portfolio-nav {margin:52px 0 0 0;}

#portfolio-nav ul {position:relative; margin:0;}

#main #portfolio-nav ul li {display:inline-block; padding:0 10px 0 0; height:52px; list-style:none;}

#main #portfolio-nav ul li:before {content: ""; margin:0 0 0 0; position:relative; left:0; padding:0;}

#portfolio-nav ul li a {padding:10px 20px; background:transparent; font-size:14px; border:#333 1px solid; font-weight:400; color:#333; text-transform:uppercase;}

#portfolio-nav ul li a:hover, #portfolio-nav ul li a.current {cursor:pointer; background:#333; color:#fff;}

/* SUCHE */

#search {border:#333 1px solid; padding:10px 20px; background:#fafafa; color:#333; min-width:250px;}


/* NINJA FORMS */

.nf-before-form-content {
	font-family:'Roboto Condensed', Helvetica, Arial, sans-serif !important;
	font-size:18px !important;
	font-weight:300 !important;
	line-height:22px !important;
	margin-bottom: 15px !important;
}

.nf-form-content label {
	font-family:'Roboto Condensed', Helvetica, Arial, sans-serif !important;
	font-size:18px !important;
	font-weight:300 !important;
	line-height:22px !important;
	margin:0 0 13px 0 !important;
}

.nf-field-element input, .nf-field-element textarea, .nf-field-element button span {
	font-family:'Roboto Condensed', Helvetica, Arial, sans-serif !important;
	font-size:14px !important;
	font-weight:300 !important;
	line-height:20px !important;
	margin:0 0 13px 0 !important;
}

/* ------------------------- FOOTER ------------------------- */

footer {width:calc(100% - 52px); padding:0 26px; background:#333; margin-top:52px;}

footer .inner {width:100%; margin:0 auto; padding:52px 0; color:#fff;}

footer .inner p {font-weight:300; font-size:13px; line-height:16px; margin-bottom:26px;}

footer .inner p a {color:#fff; font-weight:400;}

footer .inner p a:hover {color:#eee;}

.footer-logo {max-width:200px;}

.cn-button.bootstrap {background:#999 !important;}



/* ----- RESPONSIVE TABLET STYLES ----- */


@media screen and (max-width: 1023px) { 

	#main {width:calc(100% - 352px); margin:0 auto; left:252px;}
	
	header {width:200px;}
		
	/*#logo-area img {height:20px; width:auto;}*/
		
	footer .inner {width:calc(100% - 40px); padding:26px 20px;}
		
	.portfolioContainer .grid-sizer {width:calc(50% - 10px);}

	.portfolioContainer .portfolio {width:calc(50% - 10px); height:auto; margin-bottom:10px;}
	
	.teaserposts .grid-sizer {width:calc(50% - 10px);}

	.teaserposts .teaserpost {width:calc(50% - 10px); height:auto; margin-bottom:10px;}

}


/* ----- RESPONSIVE MOBILE STYLES ----- */


@media screen and (max-width: 780px) { 
	
	header {width:calc(100% - 52px); padding:26px; background:#fff; height:52px; position:relative; overflow:hidden;}
	
	header.menu-open {height:100%;}
	
	#logo-area {width:100%; height:26px; text-align:center;}
	
	#logo-area .sow-image-container {display:block;}
	
	#logo-area img {height:26px; width:auto;}
	
	#main {width:calc(100% - 52px); padding:26px; margin:0 auto; min-height:600px; left:0; position:relative;}
	
	#mobile-toggle {display:block; line-height:26px; position:absolute; top:65px; right:calc(50% - 13px);}
	
	#mobile-toggle img {height:13px; width:auto;}
	
	#menu-area {width:calc(100% - 52px); margin:0 auto; padding:0;}
		
	#mobile-close {float:right; line-height:39x;}
	
	#mobile-close img {height:26px; width:auto;}
		
	#main {margin:0 auto; min-height:600px;}
	
	.home-zeile h1 {font-size:20px; line-height:21px;}
	
	.home-zeile h2 {font-size:20px; line-height:21px;}

	

	/* BEGIN NEW TEMPLATE */
	
	#overlay-menu .inner {width:100%; margin:0 auto;}
		
	.linkeSpalte {width:100%; clear:both; margin:0 0 0 0;}

	.rechteSpalte {width:100%; clear:both;}
	
	.portfolioHeader .button {font-size:16px !important;}

	h1, h2 {font-size:20px; line-height:21px; margin:0 0 15px 0;}
	
	h3 {font-size:16px;}
	
	.portfolioContainer {margin:0 auto;}
	
	.portfolioContainer .grid-sizer {width:100%;}

	.portfolioContainer .portfolio {width:100%; height:auto; margin-bottom:10px;}

	#portfolio-nav ul li a {font-size:12px;}
			
	.teaserposts .grid-sizer {width:100%;}

	.teaserposts .teaserpost {width:100%; height:auto; margin-bottom:10px;}		
			
}

/*@media screen and (max-width: 512px) {
		
	#main.ohneSlider {width:calc(100% - 52px); padding:26px; margin:0 auto;}
	
	.portfolioContainer {width:100%;}
	
}*/