/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


body, html {height: 100%;
			    -webkit-text-size-adjust: 100%;
}




/*fonts*/

@import url("hello.myfonts.net/count/27d639");
@font-face {font-family: 'SabonLTPro-Roman';src: url('../webfonts/27D639_0_0.eot');src: url('../webfonts/27D639_0_0.eot?#iefix') format('embedded-opentype'),url('../webfonts/27D639_0_0.woff') format('woff'),url('../webfonts/27D639_0_0.ttf') format('truetype');}
 

/* general */

a 						{text-decoration: none;
						color: #000;
						-webkit-transition: all 0.3s ease-in-out; 
						-moz-transition: all 0.3s ease-in-out;

						}


body					{
						font: normal normal 100%/1.2 'SabonLTPro-Roman', serif;
						}


p 						{font-size:90%;}

/*nav*/

h1 						{
						font-family:'SabonLTPro-Roman', serif;
						font-size:56px;}

header a 				{font-family:'SabonLTPro-Roman', serif;
						font-size: 56px;}

header 					{
						width: 100%;
						padding: 30px;
						box-sizing: border-box;
						}

header img 				{max-width: 350px;
						margin-top: 10px;
						}

section 				{width: 100%;
						padding: 30px;
						box-sizing: border-box;
						text-align: center;
						}

nav						{
						position: fixed;
						min-width: 736px;
						margin-top: 110px;
						left: 50%;
						margin-left: -368px;
						font: normal normal 100%/1.6 'Source Sans Pro', sans-serif;
						z-index: 300;
						padding:0;
						}

nav ul 					{list-style-type: none; 
						}

nav li 					{display:inline; 
						margin:0;
						padding:0;
						}

nav li a 				{letter-spacing: 1px;}

.nav_450				{width: 450px; 
						display: inline-block;
						text-align: left;}

.nav_180				{width: 180px; 
						display: inline-block;
						text-align: left;}

.nav_90					{width: 90px; 
						display: inline-block;
						text-align: left;}


/* logo b + ziffer*/

.logo_b_white {position:relative; top:73%;}

#ziffer_one				{position: fixed;
						top: 298px;
						right:calc(50% + 617px);
						width: 12px;
						height: 12px;
						background-image:url(../images/ziffer_one.svg);
						background-repeat: no-repeat;
						z-index: 300;
						}


#ziffer_two				{position: fixed;
						top: 399px;
						right:calc(50% + 617px);
						width: 12px;
						height: 12px;
						background-image:url(../images/ziffer_two.svg);
						background-repeat: no-repeat;
						z-index: 300;
						}

#logo_b 				{position: fixed;
						width: 22px;
						height: 26px;
						top: 667px;
						margin: 0 auto;
						right:calc(50% - 354px);
						right:-webkit-calc(50% - 354px);
						right:-moz-calc(50% - 354px);
						right:-o-calc(50% - 354px);
						background-image:url(../images/logo_studiobritz_b_black.svg);
						background-position: center center;
						background-repeat: no-repeat;
						z-index: 1;
						}



/* content */


.about 					{margin-top:8px;}

div.content_wrapper				{ 
						height: 100px; 
						width: 100%; 
						height: 100%; 
						position: absolute;
						top: 0px;
						z-index: 200;
						/*overflow: hidden;*/
						}

div.content_left		{

						background: #fff; 
						float: left;
						height: 100%; 
						width: 49.5%; 
						}

div.content_right		{
						float: left;
						width: 50.5%;
						height: 200px; 
						text-align: center;
						/*overflow-y:scroll;*/
						bottom:0;
						/*border: 1px solid green;*/
						}



div.content_right img	{
						width: 100%; 
						text-align: center;
						background-color: #000;
						padding: 0;
						display: block;
						}

div.clear 				{ 
						clear: both; 
						height: 1px; 
						overflow: hidden; 
						font-size:0pt; 
						margin-top: -1px; 
						}

.project_description	{
						position: fixed;
						top: 290px; 
						right:calc(50% + 180px);
						right:-moz-calc(50% + 180px);
						right:-webkit-calc(50% + 180px);
						right:-o-calc(50% + 180px);
						width: 360px;
						}

.project_description p 	{
						margin-bottom: 15px; 
						position: relative; 
						width: 360px;
						}

.project_headline		{
						display: block;
						font: normal normal 100%/2.0 'Source Sans Pro', sans-serif;
						letter-spacing: 1px;
						height: 108px;
						}

.about_description		{margin-top: 8px;}

/* projects */

#projects 				{
						position: relative;
						margin:0 auto;
						top:220px;
						width: 1080px;
						height: auto;
						overflow: hidden;
						padding-bottom: 100px;
}




.project 				{margin-right:88px; 
						margin-left: 88px;
						width: 360px;
						height: 500px;
						background-color: #000;
						z-index: 10;
						float: left; 
						display: inline-block; 
						position: relative;
						}

.project img 			{
						margin:0; 
						padding: 0; 
						width: 100%;
						height: auto;
						-webkit-transition: opacity 0.4s ease-in-out; 
						-moz-transition: opacity 0.4s ease-in-out;
						transition: opacity 0.4s ease-in-out;
						}


.project img:hover		{opacity: 0;}


::-webkit-scrollbar {
    display: none;
}

.offset					{margin-top: 80px;}


/* contact address */

.contact_address 		{display: block; 
						height: 100px;
						margin-top: -8px;
						}

/* other */

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

::-moz-selection { 
	background: #000; 
	color: #fff; 
}


/* media queries*/

@media screen and (min-width: 2500px) {

.project 				{width: 638px;
						height: 887px;
						margin-left: 160px;
						margin-right: 160px;

						}

.project img 			{width: 638px;}

#projects 				{width: 1916px;}

nav 					{width: 1276px;
						margin-left: -638px;
						}

.nav_450				{width: 800px;} 

.nav_180				{width: 318px;}

.nav_90					{width: 158px;} 

#logo_b 				{
						top: 1074px;
						right:calc(50% - 630px);
						}


#ziffer_one				{
						top: 298px;
						right:calc(50% + 1120px);
						right:-webkit-calc(50% + 1120px);
						right:-moz-calc(50% + 1120px);
						right:-o-calc(50% + 1120px);
						}


#ziffer_two				{
						top: 399px;
						right:calc(50% + 1120px);
						right:-webkit-calc(50% + 1120px);
						right:-moz-calc(50% + 1120px);
						right:-o-calc(50% + 1120px);
						}

.project_description 	{
						right:calc(50% + 516px);
						right:-moz-calc(50% + 516px);
						right:-webkit-calc(50% + 516px);
						right:-o-calc(50% + 516px);
						}

.project_description p 	{width: 447px;}						

}

@media screen and (min-width: 1920px) {

.project 				{width: 480px;
						height: 667px;
						margin-left: 120px;
						margin-right: 120px;

						}

.project img 			{width: 480px;}

#projects 				{width: 1440px;}

nav 					{width: 970px;
						margin-left: -480px;
						}

.nav_450				{width: 600px;} 

.nav_180				{width: 240px;}

.nav_90					{width: 100px;} 

#logo_b 				{
						top: 800px;
						right:calc(50% - 470px);
						}


#ziffer_one				{
						top: 298px;
						right:calc(50% + 840px);
						right:-webkit-calc(50% + 840px);
						right:-moz-calc(50% + 840px);
						right:-o-calc(50% + 840px);
						}


#ziffer_two				{
						top: 399px;
						right:calc(50% + 840px);
						right:-webkit-calc(50% + 840px);
						right:-moz-calc(50% + 840px);
						right:-o-calc(50% + 840px);
						}


.project_description 	{
						right:calc(50% + 360px);
						right:-moz-calc(50% + 360px);
						right:-webkit-calc(50% + 360px);
						right:-o-calc(50% + 360px);
						}

					
									}


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

.project 				{width: 320px;
						height: 444px;
						margin-left: 79px;
						margin-right: 79px;
						}

.project img 			{width: 320px;}

#projects 				{width: 956px;}

nav 					{width: 640px;
						margin-left: -320px;
						}

.nav_450				{width: 400px;} 

.nav_180				{width: 160px;}

.nav_90					{width: 80px;} 

#logo_b 				{
						top: 588px;
						right:calc(50% - 320px);
						right:-webkit-calc(50% - 320px);
						right:-moz-calc(50% - 320px);
						right:-o-calc(50% - 320px);
						}

#ziffer_one				{
						top: 298px;
						right:calc(50% + 564px);
						right:-webkit-calc(50% + 564px);
						right:-moz-calc(50% + 564px);
						right:-o-calc(50% + 564px);
						}


#ziffer_two				{
						top: 399px;
						right:calc(50% + 564px);
						right:-webkit-calc(50% + 564px);
						right:-moz-calc(50% + 564px);
						right:-o-calc(50% + 564px);
						}

.project_description 	{
						right:calc(50% + 130px);
						right:-moz-calc(50% + 130px);
						right:-webkit-calc(50% + 130px);
						right:-o-calc(50% + 130px);
						}

									}



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

.project 				{width: 256px;
						height: 356px;
						margin-left: 64px;
						margin-right: 64px;
						}

.project_description 	{
						width: 255px;
						right:calc(50% + 130px);
						right:-moz-calc(50% + 130px);
						right:-webkit-calc(50% + 130px);
						right:-o-calc(50% + 130px);
						}

.project_description p 	{
						width: 255px;
						}

.project img 			{width: 256px;}

#projects 				{width: 768px;}

nav 					{width: 510px;
						margin-left: -255px;
						}

.nav_450				{width: 320px;} 

.nav_180				{width: 126px;}

.nav_90					{width: 64px;} 

#ziffer_one				{
						top: 298px;
						right:calc(50% + 449px);
						right:-webkit-calc(50% + 449px);
						right:-o-calc(50% + 449px);
						right:-moz-calc(50% + 449px);
				
						}

#ziffer_two				{
						top: 399px;
						right:calc(50% + 449px);
						right:-webkit-calc(50% + 449px);
						right:-o-calc(50% + 449px);
						right:-moz-calc(50% + 449px);
						}


#logo_b 				{
						top: 588px;
						right:calc(50% - 250px);
						right:-webkit-calc(50% - 250px);
						right:-moz-calc(50% - 250px);
						right:-o-calc(50% - 250px);
						}

						}



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

.project 				{width: 240px;
						height: 333px;
						margin-left: 48px;
						margin-right: 48px;
						}

.project img 			{width: 240px;}

#projects 				{width: 672px;
						top:260px;
						}

nav 					{
						position: absolute;
						width: 590px;
						min-width: 578px;
						margin-left: -295px;
						}

.nav_450				{width: 236px;
						margin-left: 96px;} 

.nav_180				{width: 96px;}

.nav_90					{width: 145px;} 

#ziffer_one				{
						top: 240px;
						right:calc(50% + 337px);
						right:-webkit-calc(50% + 337px);
						right:-o-calc(50% + 337px);
						right:-moz-calc(50% + 337px);
				
						}
#ziffer_two				{
						top: 340px;
						right:calc(50% + 337px);
						right:-webkit-calc(50% + 337px);
						right:-o-calc(50% + 337px);
						right:-moz-calc(50% + 337px);
						}

.project_description	{
						width: 255px; 
						position: absolute; 
						right: 50%;
						z-index: 300;
						top: 230px;
						}



.project_description p 	{
						width: 255px;
						} 

div.content_wrapper		{ 
						height: 100%; 
						width: 100%; 
						height: auto; 
						position: relative;
						top: 0px;
						z-index: 200;
						overflow: hidden;
						}

div.content_left		{
						background: #fff; 
						position: relative;
						height: 480px;
						width: 100%;
						}

div.content_right		{
						height: 100%; 
						width: 100%;
						text-align: center;
						overflow-y:hidden;
						bottom:0;
						position: relative;
						margin-top:0px;
						}



div.content_right img	{
						width: 100%; 
						text-align: center;
						background-color: black;
						overflow:hidden;
						padding: 0;
						margin-bottom: -6px;
						}

div.clear 				{ 
						clear: both; 
						height: 1px; 
						overflow: hidden; 
						font-size:0pt; 
						margin-top: -1px; 
						}

#logo_b 				{
						top: 588px;
						right:calc(50% - 200px);
						right:-webkit-calc(50% - 200px);
						right:-moz-calc(50% - 200px);
						right:-o-calc(50% - 200px);
						}

	}



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

.project 				{width: 400px;
						height: 556px;
						margin-left: 0;
						margin-right: 0;
						}

.project img 			{width: 400px;
						}

#projects 				{width: 400px;
						top:239px;
						}

nav 					{
						width: 420px;
						margin-left: -200px;
						min-width: 400px;
						}

.nav_450				{width: 200px;
						margin-left: 0px;} 

.nav_180				{width: 130px;}

.nav_90					{width: 80px;} 

.project_description	{
						position: absolute !important;
						width: 440px; 
						padding-left:40px; 
						margin: 0 auto;
						left: 50%;
						margin-left: -240px;}

.project_description p 	{
						width: 440px;
						}


#ziffer_one				{
						top: 239px;
						right:calc(50% + 280px);
						right:-webkit-calc(50% + 280px);
						right:-o-calc(50% + 280px);
						right:-moz-calc(50% + 280px);
				
						}
#ziffer_two				{
						top: 340px;
						right:calc(50% + 280px);
						right:-webkit-calc(50% + 280px);
						right:-o-calc(50% + 280px);
						right:-moz-calc(50% + 280px);
						}

div.content_right		{
						height: 100%; 
						width: 100%;
						text-align: center;
						bottom:0;
						position: relative;
						margin-top:0px;
						overflow-y:scroll;
						}


						}



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

.project 				{width: 260px;
						height: auto;
						margin-left: 0;
						margin-right: 0;
						}


.project img 			{width: 260px; display: block;}

#projects 				{width: 260px;
						top:180px;
						}

nav 					{
						width: 260px;
						min-width: 260px;
						left: 50%;
						margin-left: -130px;
						}

.nav_450				{width: 126px;
						margin-left: 0px;} 

.nav_180				{width: 65px;}

.nav_90					{width: 40px;} 

.offset					{margin-top: 50px;}

.project_description	{width: 260px;
						left: 50%;
						margin-left: -130px;
						padding-left: 0px;
						position: absolute;
						top:180px;
						}

.project_description p 	{
						width: 260px;
						}

.ziffer_one				{display: none;}
.ziffer_two				{display: none;}
#logo_b 				{display: none;}

}