/*
Theme Name: B2Theme
Theme URI:  https://www.behnkenbecker.hamburg
Author: Andreas Gregor
Author URI: https://www.andreasgregor.com
Description: B2 Custom Theme
Version: 2.0
License: none
License URI: 
Tags: custom
Text Domain: behnkenbecker
*/

/*
@font-face {
	font-family: 'TTNorms-Medium';
	src:	url('fonts/34CB95_D_0.eot');
	src:	url('fonts/34CB95_D_0.eot?#iefix') format('embedded-opentype'),
			url('fonts/34CB95_D_0.woff2') format('woff2'),
			url('fonts/34CB95_D_0.woff') format('woff'),
			url('fonts/34CB95_D_0.ttf') format('truetype');
}

@font-face {
	font-family: 'TT Norms W01 Bold';
	src:	url('fonts/34CB95_4_0.eot');
	src:	url('fonts/34CB95_4_0.eot?#iefix') format('embedded-opentype'),
			url('fonts/34CB95_4_0.woff2') format('woff2'),
			url('fonts/34CB95_4_0.woff') format('woff'),
			url('fonts/34CB95_4_0.ttf') format('truetype');
}

@font-face {
	font-family: 'TTNorms-ExtraBold';
	src:	url('fonts/34CB95_0_0.eot');
	src:	url('fonts/34CB95_0_0.eot?#iefix') format('embedded-opentype'),
			url('fonts/34CB95_0_0.woff2') format('woff2'),
			url('fonts/34CB95_0_0.woff') format('woff'),
			url('fonts/34CB95_0_0.ttf') format('truetype');
}
*/

@font-face {
  font-family: 'Austin Text Web';
  src: url('fonts/AustinText-Roman-Web.eot');
  src: url('fonts/AustinText-Roman-Web.eot?#iefix') format('embedded-opentype'),
       url('fonts/AustinText-Roman-Web.woff2') format('woff2'),
       url('fonts/AustinText-Roman-Web.woff') format('woff');
  font-weight:  400;
  font-style:   normal;
  font-stretch: normal;
}



body, html {
	position: relative;
	height: 100%;	
	font-family: 'Austin Text Web';
	margin: 0;
	padding: 0;
	font-weight: 400;
	font-size: 16px;
}

body.popup {
	overflow: hidden;
}

a {
	text-decoration: none;
	transition: all 0.3s;
	color: rgba(0,0,0,0.5);
}

h1, h2, h3, h4 {
	font-weight: normal;
}

a:hover {
	color: rgba(0,0,0,1);
}

.gallery img {
	border: 0px !important;
}

#project_popup .gallery img {
	border: 0px !important;
	max-width: 700px;
	height: auto;
}

.swiper-container {
  width: 100%;
  height: 100%;
  position: fixed !important;
}

.swiper-slide {
  background-repeat: no-repeat;
  background-size: cover;
}


header {
	position: absolute;
	width: 100%;
	top: 0px;
	left: 0px;
	z-index: 1000;
}

	nav {
		background: rgba(255,255,255,0);
		position: fixed;
		width: 100%;
		height: 80px;
		transition: all 0.3s;
	}

	body.scrolled nav {
		background: rgba(255,255,255,1);
		box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.1);
	}	

		nav ul {
			list-style-type: none;
			margin: 40px 0 0 0;
			padding: 0 50px 0 50px;
		}

			nav ul li {
				display: inline-block;
			}

				nav ul li a {
					display: block;
					padding: 0 0.5em 0 0.5em;
					font-family: 'TT Norms W01 Bold';
					line-height: 2em;
					color: rgba(0,0,0,1);
					cursor: pointer;
					border-bottom: 1px solid rgba(0,0,0,0)
				}

				nav ul li a:hover,
				nav ul li.current-menu-item a {
					border-bottom: 1px solid rgba(0,0,0,1);
				}


	#logo {
		position: fixed;
		top: 100px;
		right: 50px;
		width: 160px;
		height: 600px;
		margin: 0 0 2em 0;
		z-index: 10;
		transition: all 0.3s;
	}

	body.scrolled #logo {
		top: 10px;
		right: 50px;
		width: 80px;
		height: auto;
		margin: 0;
	}

	#logo img {
		margin-bottom: 30px;
	}

	#claim {
		color: rgba(0,0,0,1);
		border-top: 1px solid rgba(0,0,0,0.4);
		border-bottom: 1px solid rgba(0,0,0,0.4);
		text-transform: uppercase;
		font-size: 1.5em;
		margin: 0 0 0.2em 0;
		padding: 0.5em 0;
		line-height: 0.9em;
		transition: opacity 0.2s;
	}

	#logo span {
		margin: 0 0 5em 0;
		font-size: 0.85em;
	}

	body.scrolled #claim,
	body.scrolled #logo span {
		opacity: 0;
	}



#teaser {
	font-family: 'TT Norms W01 Bold';
	font-size: 1.5em;
	width: 300px;
	position: fixed;
	left: 50px;
	top: 150px;
	z-index: 10;
}

#main {
	position: relative;
	padding-top: 80px;
}

body.home #main {
	position: relative;
	z-index: 100;
	padding-top: 90vh;
}

#main2 {
	background: #fff;
}

body.page-id-5 #main2 {
	background: #000;
}

	#projects {
		text-align: center;
		max-width: 800px;
		margin: 0 auto;
		overflow: hidden;
		padding-bottom: 50px;
	}

	#projects_teaser:before {
		content: '';
		display: block;		
		width: 20px;
		height: 20px;
		border-bottom: 14px solid #000;
		border-right: 14px solid #000;
		transform: rotate(45deg);
		margin: 0 0 30px 5px;
	}


	#projects_teaser {
		font-family: 'TT Norms W01 Bold';
		font-size: 1.5em;
		width: 600px;
		margin: 0px auto;
		padding: 50px;
		text-align: left;
	}

	#projects_teaser:after {
		content: "";
		display: block;
		width: 200px;
		height: 30px;
		border-bottom: 1px solid #000;
	}

	#projects_teaser2 {
		font-family: 'TT Norms W01 Bold';
		font-size: 1.5em;
		width: 600px;
		margin: 0px auto;
		padding: 150px 50px 100px 50px;
		text-align: left;
		clear: both;
	}

	#projects article {
		display: inline-block;
		position: relative;
		background: rgba(0,0,0,1);
		cursor: pointer;
		padding: 0;
		margin: 0 0 -30px 0;
		font-size: 0;
		clear: both;
		float: left;
	}

	#projects article:nth-child(odd) {
		float: right;
	}


		#projects article h2 {
			width: 90%;
			height: 90%;
			position: absolute;
			display: block;
			margin: 0;
			padding: 5%;
			color: rgba(255,255,255,0);
			text-align: left;
			font-size: 32px;
			font-weight: normal;
			transition: all 0.3s;
			z-index: 10;
		}

		#projects article:hover h2 {
			color: rgba(255,255,255,1);
		}

		#projects article img {
			max-width: 800px;
			height: auto;
			margin: 0;
			transition: all 0.3s;
		}

		#projects article:hover img {
			opacity: 0.2;
		} 

			#project_popup_bg {
				background: rgba(255,255,255,0.8);
				width: 100%;
				height: 100vh;
				position: absolute;
				z-index: 10000;
				top: 0;
				left: 0;
				overflow-y: scroll;
				display: none;
			}

			#project_popup {
				background: rgba(0,0,0,0.9);
				width: 800px;
				position: relative;
				margin: 120px auto;
				color: #fff;
				padding: 50px 30px 0 30px;
				font-size: 1.5em;
				text-align: left;
				opacity: 0;
			}

			#project_popup h2,
			#project_popup p {
				padding: 0 150px 0 0;
			}

			#project_popup #close {
				position: absolute;
				top: 0px;
				right: 40px;
				display: block;
				width: 20px;
				height: 20px;
				color: #fff;
				cursor: pointer;
				font-family: 'TTNorms-ExtraBold';
				font-size: 70px;
				transition: color 0.4s;
			}

			#project_popup #close:hover {
				color: lime;
			}	

			



	#clients_teaser:before {
		content: "";
		display: block;
		width: 200px;
		height: 50px;
		border-top: 1px solid #000;
	}

	#clients_teaser {
		font-size: 3em;
		width: 600px;
		margin: 50px auto 100px auto;
		padding: 50px;
		line-height: 0.8em;
	}

		#clients_teaser h2 {
			font-size: 16px;
			font-family: 'TT Norms W01 Bold';
			line-height: 0.8em;
		}



	#team {
		background: #000;
		color: #fff;
	}

		#team img {
			width: 100%;
		}

		#team_teaser {
			font-family: 'TT Norms W01 Bold';
			font-size: 1.5em;
			width: 600px;
			margin: 0px auto;
			padding: 50px;
		}
		
		.page-id-5 article a {
			color: rgba(255,255,255,0.5);
		}
		
		.page-id-5 article a:hover {
			color: rgba(255,255,255,1);
		}

		.page-id-5 article img + br {
			display: none;
		}


	footer {
		width: 100%;
		background: #000;
		font-size: 0.8em;
	}

	footer a {
		color: rgba(255,255,255,0.5);
	}

	footer a:hover {
		color: rgba(255,255,255,1);
	}

		footer div {
			font-family: 'TT Norms W01 Bold';
			display: block;
			width: 600px;
			margin: 0px auto;
			padding: 50px;
			background: #000;
			color: #fff;
			vertical-align: top;
		}

			footer div span {
				display: inline-block;
				width: 45%;
				padding: 0 1% 0 0;
				vertical-align: top;
			}		



/* PAGE ===================================================================== */

body.page article {
	max-width: 700px;
	margin: 0px auto;
	overflow: hidden;
	padding: 8em 0 15em 0;
	font-family: 'TT Norms W01 Bold';
	font-size: 1.2em;
	line-height: 1.4em;
}


body.page h2, 
body.page h3 {
	margin: 1em 0 0em 0;
	padding: 0;
	font-size: 30px;
	line-height: 1.3em;
}

body.page h2 {
	opacity: 0.6;
}


/* CATEGORY ===================================================================== */


body.category article {
	max-width: 700px;
	margin: 0px auto;
	overflow: hidden;
	padding: 0em 0 2em 0;
	font-family: 'TT Norms W01 Bold';
	font-size: 1.2em;
	line-height: 1.4em;
}

body.category article:first-child {
	padding: 8em 0 2em 0;
}

body.category h2, 
body.category h3 {
	margin: 1em 0 0em 0;
	padding: 0;
	font-size: 30px;
	line-height: 1.3em;
}

body.category h2 {
	margin: 0em 0 0em 0;
	opacity: 0.6;
}

/* PROFIL ===================================================================== */


body.page-id-11 article p:after {
	content: "";
	display: block;
	width: 200px;
	height: 60px;
	margin: 0 0 30px 0;
	border-bottom: 1px solid #000;
}

body.page-id-11 article p:last-child:after {
	content: "";
	border-bottom: none;
}

/* TEAM ===================================================================== */

p.bu {
	max-width: 900px;
	margin: 0px auto;
	font-family: 'TT Norms W01 Bold';
	padding-top: 10px;
}

body.page-id-5 article {
	max-width: 900px;
	margin: 0px auto;
	color: #fff;
	overflow: hidden;
	padding: 8em 0 15em 0;
	font-family: 'TT Norms W01 Bold';
	font-size: 1.2em;
	line-height: 1.4em;
}

body.page-id-5 article ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

body.page-id-5 article ul li {
	display: block;
	margin: 0 0 5em 285px;
	padding: 0;
	overflow: hidden;
	clear: both;
}

	body.page-id-5 article ul li:after {
		content: "";
		display: block;
		width: 200px;
		height: 150px;
		border-bottom: 1px solid #fff;
		overflow: hidden;
		clear: both;
	}

body.page-id-5 article ul li img {
	width: 255px;
	height: auto;
	float: left;
	margin: 0 30px 0 -285px;
	position: absolute;
}

body.page-id-5 article ul li h2, 
body.page-id-5 article ul li h3 {
	margin: 0;
	padding: 0;
	font-size: 30px;
	line-height: 1.3em;
}

body.page-id-5 article ul li h2 {
	opacity: 0.6;
}


/* KONTAKT ===================================================================== */


body.page-id-7 article {
	padding-bottom: 5em;
}


body.page-id-7 iframe {
	width: 100%;
	height: 100vh
}


/* GALERIE ===================================================================== */


body.page-id-9 article h1 {
	font-family: 'Austin Text Web';
	font-size: 3em;
	line-height: 1em;	
}

body.page-id-9 article h3 {
	font-size: 1em;
	line-height: 1em;	
	padding: 0;
	margin: 90px 0px 0 0;
	color: lime;
	float: left;
	width: 400px;
}


body.page-id-9 article p {
	margin-top: 0;
}

body.page-id-9 article a {
	color: lime;
	margin: 0 0 0 0px;
}

body.page-id-9 article img {
	width: 255px;
	height: auto;
	margin: 90px 20px 160px 0;
	float: left;
}

div.gallery {
}

body.page-id-9 article dl img {
	width: auto;
	margin: 90px 0 0 0;
	float: none;
}

body.page-id-9 dd.wp-caption-text {
	font-size: 0.8em !important;
	line-height: 1em;
}



/* DATENSCHUTZ ===================================================================== */



#iubenda_policy h1, #iubenda_policy h2, #iubenda_policy h3, #iubenda_policy h4, #iubenda_policy h5, 
#iubenda_policy h6, #iubenda_policy p, #iubenda_policy blockquote, #iubenda_policy pre, #iubenda_policy a, 
#iubenda_policy abbr, #iubenda_policy acronym, #iubenda_policy address, #iubenda_policy cite, #iubenda_policy code, 
#iubenda_policy del, #iubenda_policy dfn, #iubenda_policy em, #iubenda_policy img, #iubenda_policy q, 
#iubenda_policy s, #iubenda_policy samp, #iubenda_policy small, #iubenda_policy strike, #iubenda_policy strong, 
#iubenda_policy sub, #iubenda_policy sup, #iubenda_policy tt, #iubenda_policy var, #iubenda_policy dd, 
#iubenda_policy dl, #iubenda_policy dt, #iubenda_policy li, #iubenda_policy ol, #iubenda_policy ul, 
#iubenda_policy fieldset, #iubenda_policy form, #iubenda_policy label, #iubenda_policy legend, 
#iubenda_policy button, #iubenda_policy table, #iubenda_policy caption, #iubenda_policy tbody, #iubenda_policy tfoot, 
#iubenda_policy thead, #iubenda_policy tr, #iubenda_policy th, #iubenda_policy td  {
 font-family: 'TT Norms W01 Bold', Sans-Serif !important;
}

#iubenda_policy h1 {
    display: none!important;
}

#iubenda_policy h2 { 
	font-style: normal!important;
}
	
#iubenda_policy .iub_content {
    padding: 10px 0px!important;
}




/* MOBILE ===================================================================== */




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

		.swiper-container {
		  width: 100%;
		  height: 230px;
		  position: relative !important;
		}


		header {
			position: relative;
			background: rgba(255,255,255,1);
			box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.1);
			padding-top: 20px;
		}

			nav {
				background: rgba(255,255,255,1);
				box-shadow: none !important;
				position: relative;
				width: 100%;
				height: auto;
			}

				nav ul {
					margin: 0px 0 0 0;
					padding: 10px 20px 0 20px;
				}

						nav ul li a {
							padding: 0 0.5em 0 0em;
							font-size: 0.9em;
						}


			#logo {
				position: static;
				width: auto;
				height: auto;
				margin: 0px 0 0 20px;
				overflow: hidden;
			}

			body.scrolled #logo {
				width: auto;
				height: auto;
				margin: 0px 0 0 20px;
			}

			#logo img {
				width: 60px;
				height: auto;
				margin-bottom: 10px;
				float: left;
				display: inline-block;
			}

			#claim {
				color: rgba(0,0,0,1);
				border-top: 1px solid rgba(0,0,0,0.4);
				border-bottom: 1px solid rgba(0,0,0,0.4);
				text-transform: uppercase;
				font-size: 0.7em;
				margin: 0 15px 0 10px;
				padding: 0.5em 0;
				line-height: 0.9em;
				transition: none;
				float: left;
				display: inline-block;
			}

			#logo span {
				font-size: 0.7em;
				line-height: 0.9em;
				width: 50px;
				padding: 0.5em 0;
				margin: 0;
				display: inline-block;
			}

			body.scrolled #claim,
			body.scrolled #logo span {
				opacity: 1;
			}



		#teaser {
			font-family: 'TT Norms W01 Bold';
			font-size: 1em;
			width: auto;
			padding: 20px 20px;
			position: static;
			background: #000;
			color: #fff;
		}

		#main {
			padding-top: 0px;
		}

		body.home #main {
			padding-top: 0px;
		}


		body.page-id-5 #main2 {
			background: #000;
		}

			#projects {
				position: static;
				overflow: visible;
			}

			#projects_teaser:before {
				content: '';
				display: block;		
				width: 10px;
				height: 10px;
				border-bottom: 7px solid #000;
				border-right: 7px solid #000;
				transform: rotate(45deg);
				margin: 0 0 20px 5px;
			}


			#projects_teaser {
				font-size: 1em;
				width: auto;
				padding: 20px;
			}

			#projects_teaser2 {
				font-size: 1em;
				width: auto;
				padding: 50px 20px 50px 20px;
			}

			#projects article {
				display: inline-block;
				position: relative;
				background: rgba(0,0,0,1);
				cursor: pointer;
				padding: 0;
				margin: 0 0 20px 0;
				font-size: 0;
				clear: both;
				float: none;
			}

			#projects article:nth-child(odd) {
				float: none;
			}


				#projects article h2 {
					width: 90%;
					height: 90%;
					position: absolute;
				}

				#projects article img {
					max-width: 100%;
					height: auto;
					margin: 0;
				}

				#projects article:hover img {
					opacity: 0.2;
				} 

					#project_popup_bg {
						background: rgba(255,255,255,0.8);
						width: 100%;
						height: 100vh;
						position: absolute;
						z-index: 10000;
						top: 0;
						left: 0;
						overflow-y: scroll;
						display: none;
					}

					#project_popup {
						width: auto;
						position: relative;
						margin: 0px;
						padding: 50px 20px 0 20px;
						font-size: 1em;
					}

					#project_popup h2,
					#project_popup p {
						padding: 0 0px 0 0;
					}

					#project_popup img {
						width: 100%;
						height: auto;
					}

					#project_popup #close {
						right: 20px;
						font-size: 60px;
					}







			#clients_teaser {
				font-size: 2em;
				width: auto;
				margin: 50px auto 100px auto;
				padding: 20px;
			}

				#clients_teaser h2 {
					font-size: 16px;
					font-family: 'TT Norms W01 Bold';
					line-height: 0.8em;
				}




			footer {
				width: 100%;
				background: #000;
				font-size: 0.8em;
			}

			footer a {
				color: rgba(255,255,255,0.5);
			}

			footer a:hover {
				color: rgba(255,255,255,1);
			}

				footer div {
					width: auto;
					margin: 0px auto;
					padding: 20px;
				}

					footer div span {
						width: 100%;
						padding: 0 0 20px 0;
					}		


		/* PAGE ===================================================================== */

		body.page article {
			padding: 20px 20px 0 20px;
			font-size: 1em;
		}
		
		
		/* CATEGORY ===================================================================== */


		body.category article {
			padding: 20px 20px 0 20px;
			font-size: 1em;
		}
		
		body.category article:first-child {
			padding: 20px 20px 0 20px;
		}
	

		/* TEAM ===================================================================== */

		p.bu {
			padding: 10px 20px 40px 20px;
		}

		body.page-id-5 article {
			padding: 1em 20px 0em 20px;
			font-size: 1em;
		}

		body.page-id-5 article ul li {
			margin: 0 0 5em 0px;
		}

			body.page-id-5 article ul li:after {
				content: "";
				display: block;
				width: 200px;
				height: 50px;
				border-bottom: 1px solid #fff;
				overflow: hidden;
				clear: both;
			}

		body.page-id-5 article ul li img {
			width: 150px;
			height: auto;
			float: none;
			margin: 0 20px 0 0px;
			position: static;
		}



		/* GALERIE ===================================================================== */


		body.page-id-9 article h3 {
			margin: 0px 0px 0 0;
			float: none;
			width: auto;
		}

		body.page-id-9 article img {
			width: 150px;
			height: auto;
			margin: 0px 0px 20px 0;
			float: none;
		}

		body.page-id-9 article dl img {
			width: 100%;
			margin: 20px 0 0 0;
		}

		body.page-id-9 dd.wp-caption-text {
			font-size: 0.8em !important;
			line-height: 1.2em;
		}

}