@charset 'UTF-8';
@import url("//hello.myfonts.net/count/2c4c6b");
@font-face { font-family: 'HelveticaNeueLTPro'; src: url('./../webfonts/2C4C6B_0_0.eot'); src: url('./../webfonts/2C4C6B_0_0.eot?#iefix') format('embedded-opentype'),url('./../webfonts/2C4C6B_0_0.woff2') format('woff2'),url('./../webfonts/2C4C6B_0_0.woff') format('woff'),url('./../webfonts/2C4C6B_0_0.ttf') format('truetype');}
/**
 * (c) 2014 Higi Bigler (nullnulleins.ch). All rights reserved.
 */

* { margin: 0; padding: 0; }
html, body { height: 100%; }
/*          italic small-caps bold */
body { font: normal normal 300 1.2em/1.65em 'HelveticaNeueLTPro', sans-serif; margin: 0; padding: 0; -webkit-text-size-adjust: none; background-color: #FFF; overflow-y: scroll; }

/* structure */
#container { width: 900px; margin: 0 auto; padding: 59px 5%; position: relative; letter-spacing: 1px; }
nav ul { list-style: none; text-transform: uppercase; font-size: 187.5%; line-height: 126.66666666666666666666666666667%; letter-spacing: 2.5px; }
nav a.active { color: #000; }
#navigation { float: left; }
#languageselector { float: right; }
#languageselector li { display: inline-block; margin: 0 0 0 .425em; }

#content { margin: 3em 0 0; width: 428px /*47.555555555555555555555555555556%*/; max-width: 100%; position: relative; }
body.work #content { width: 100%; }

h1, body.contact p { text-transform: uppercase; font-size: 187.5%; line-height: 126.66666666666666666666666666667%; margin: 1.275em 0; font-weight: 300; letter-spacing: 2.5px; }
body.contact p:first-child { margin-top: 0; }
h1 { margin-top: 1.8em; }
h1:first-child { margin-top: 0; }
a { outline: none; text-decoration: none; color: #BFBFBF; }
p.specs { margin-top: 2em; font-size: 90%; line-height: 165%; }
p.contactemail a:before { content: ''; display: inline-block; width: 1em; height: 20px; margin: 0 0 0 -1em; opacity: 0; transition: opacity .5s linear; background-image: url(./../img/couvert.png); background-size: 21px auto; background-repeat: no-repeat; background-position: left bottom; }
p.contactemail a:hover:before { opacity: 1; }
#container a { transition: color .5s linear; }
a:hover { color: #000; }
a img { border: none; }

/* overview */
ul.works { list-style-type: none; }
ul.works > li { float: left; margin: 0.5em 3em 2.3125em 0; }
ul.works img { display: block; }
/* detail */
div.text { margin: 0 0 2.5625em 0; float: left; width: 47.555555555555555555555555555556%; }
div.text.fixed { position: fixed; }
div.images { float: right; width: 386px; padding: 0; }
div.images ul { list-style-type: none; }
div.images li { margin: 0.5em 0 2.5625em 0; }
div.images ul img { display: block; margin: 0; }
.worknavigation { position: fixed; top: 50%; margin: -24px 0 0; left: 14px; background-image: url(./../img/arrows.png); background-position: left center; background-size: 52px auto; background-repeat: no-repeat; display: block; width: 16px; height: 48px; opacity: .3; transition: opacity .5s linear !important; }
.worknavigation.next { background-position: right center; right: 14px; left: auto; }
.worknavigation:hover { opacity: 1; }
div.images .worknavigation.top { background-position: center center; left: 50%; margin-left: -10px; width: 20px; display: none; }

.clearfix:before, .clearfix:after { content: ' '; display: table; }
.clearfix:after { clear: both; }

@media only screen {
	body { min-width: 320px; }
	#container { max-width: 900px; width: auto; }
	div.images img { width: 100%; height: auto; }
}
@media only screen and (max-width: 990px) {
	#container { padding: 6% 5%; }
	p.contactemail a:before { opacity: 0 !important; }
}
@media only screen and (max-width: 935px) {
	div.images { width: 46.73123486682809%; }
}
@media only screen and (max-width: 780px) {
	div.text.fixed { position: static !important; }
	/* add portfolio nav to the bottom */
	div.text { float: none; width: 428px; max-width: 100%; }
	div.images { float: none; width: 100%; text-align: center; }
	div.images > ul > li > a { cursor: default; }
	div.images .worknavigation { position: static; }
	div.images .worknavigation.top { display: inline-block; }
	div.images .worknavigation.prev { float: left; }
	div.images .worknavigation.next { float: right; }
}
@media only screen and (max-width: 600px) {
	body { font-size: 90%; }
	p.contactemail a:before { content: ''; display: none; }	
}
@media only screen and (max-width: 450px) {
	#navigation { width: 200px; }
}