@charset 'UTF-8';
@import url('//fonts.googleapis.com/css?family=Roboto:400,700,400i,700i');

/**
 * © 2018 Higi Bigler (nullnulleins.ch). All rights reserved.
 */

* { margin: 0; padding: 0; }
html, body { height: 100%; }
/*          italic small-caps bold */
body { font: normal normal normal 1.4375em/1.347826086956522 'Roboto', sans-serif; margin: 0; padding: 0; -webkit-text-size-adjust: none; background-color: #FFF; color: #0E3B5E; }
#background { position: fixed; left: 0; top: 0; right: 0; height: 100vh; display: none; background-size: cover; background-repeat: no-repeat; background-position: 50%; z-index: -1; }

/* structure */
#container { }
header { }

#smartbutton { position: fixed; top: .8em; right: 1.6em; z-index: 10; }
#smartbutton a { display: block; padding: .7em .8em; width: 1.3em; height: 1em; border: none; }
#smartbutton a span { display: block; height: 3px; width: 80%; background-color: #0E3B5E; position: relative; margin: calc(.5em - 1px) 0 0 20%; transition: background-color 0s linear .15s; }
#smartbutton a span:before, #smartbutton a span:after { content: ''; display: block; height: inherit; background-color: #0E3B5E; top: -8px; right: 0; position: absolute; width: 120%; transition: transform .15s ease-in, top .15s ease-out .15s; }
#smartbutton a span:after { top: 8px; }

body.smartnavigation { }
body.smartnavigation #smartbutton a span { background-color: transparent; }
body.smartnavigation #smartbutton a span:before, body.smartnavigation #smartbutton a span:after { transition: top .15s ease-in, transform .15s ease-out .15s; }
body.smartnavigation #smartbutton a span:before { top: 0; transform: rotate(45deg); }
body.smartnavigation #smartbutton a span:after { top: 0; transform: rotate(-45deg); }

#smartnavigationcover { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(255,255,255,0); z-index: 8; display: none; }
body.smartnavigation #smartnavigationcover { display: block; }

#smartmenu { position: fixed; z-index: 9; right: 0; top: 0; bottom: 0; background-color: #FFF; width: 21em; max-width: 50%; transform: translateX(21em); transition: transform .5s ease-in-out; overflow-y: auto; padding: 2.6em 0 0; }
#smartmenu > div { display: flex; flex-direction: column; min-height: 100%;  }
#smartmenu > div > div { padding: 1.4em 2em; }
#smartmenu > div > div:first-child { flex-grow: 1; padding-bottom: 0; }
body.smartnavigation #smartmenu { transform: translateX(0); }

#logo { position: fixed; top: .75em; left: 2.3em; z-index: 12; }
#logo > a { text-decoration: none; display: block; text-transform: lowercase; line-height: 1.175; }
body.home #logo > a { font-size: 124%; margin-top: -.05em; }
#title { text-transform: lowercase; padding: 3.325em 0 0 0; position: fixed; top: .75em; left: 2.3em; z-index: 9; }
#title a { display: none; text-decoration: none; }
#title a:after { content: ''; border: 2px solid #0E3B5E; border-right: none; border-bottom: none; display: block; width: 13px; height: 13px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
body.portfolio.detail #title { padding: /*1.085em*/ .95em 0 0 0; left: auto; right: 5.8em; }
body.portfolio.detail #title h1 { display: none; }
body.portfolio.detail #title a { display: block; }

#smartmenu { text-transform: lowercase; }
#smartmenu ul { list-style: none; }
#smartmenu a { text-decoration: none; }
#smartmenu a:hover, #smartmenu a.active { text-decoration: underline; }
#smartmenu a.activesparent { }

nav { line-height: 1.563636363636364; }
nav ul ul { padding-bottom: 1.5em; }
nav li > span { display: none; } 

address { font-style: normal; padding: 0 0 1.1em; position: relative; }
address a { word-break: break-all; word-wrap: break-word; }

#content { padding: 0; min-height: 100vh; }
a { outline: none; color: inherit; }
a:hover, a.email, a.phone { text-decoration: none; }
a.email:hover, a.phone:hover { text-decoration: underline; }
#container a { }
a img { border: none; }
h1, h2 { font-size: 100%; font-weight: 400; margin: 1em 0; }
h1 { margin: 0; }
p { margin: 1em 0; }
ol.clients { list-style: none; margin: 1em 0; padding: 0; }

ol.clients li { position: relative; }
ol.clients li > span { color: #858BA4; }
ol.clients a { text-decoration: none; }
ol.clients a:hover, ol.clients a.active { text-decoration: underline; }
ol.clients .imagewrapper { display: none; }

section.textpage { padding: 3.1em 2.4em 4em 11.2em; }
.twocolumns, .threecolumns { width: 100%; display: flex; padding-bottom: 1em }
.twocolumns > div, .threecolumns > div { padding: 0 .5em; width: 33.3333%; box-sizing: border-box; }
.twocolumns > div.twocolumns-left { padding-left: 0; }
.twocolumns > div.twocolumns-right { width: 66.6666%; padding-right: 0; }
.threecolumns > div.threecolumns-left { padding-left: 0; }
.threecolumns > div.threecolumns-right { padding-right: 0; }

/* masonry */
div.item.sizer { width: 16.6666%; height: 0; padding: 0; }
div.item.text { width: 30%; }
div.item.text.wide { width: 100%; max-width: 1140px; }
div.item.stamp.logo { left: 0; top: 0; width: 12em; height: 5.5em; padding: 0; }
div.item.stamp.navigation { right: 0; top: 0; width: 5em; height: 3em; padding: 0; }
/*div.item.stamp { background-color: rgba(0,0,0,.05); }*/

/* portfolio */
#portfoliooverview { margin: 0 .5em; box-sizing: border-box; z-index: 0; padding: 1em 0; }
#portfoliooverview > div.portfolio { padding: 0 .25em; max-width: 800px; z-index: 1; box-sizing: border-box; margin-bottom: 4%; }

#portfoliooverview > div.portfolio.small { width: 25%; }
#portfoliooverview > div.portfolio.medium { width: 30%; }
#portfoliooverview > div.portfolio.large { width: 48%; }

#portfoliooverview > div.portfolio:not(.stamp):nth-child(2n + 3) { margin-left: 1.5%; margin-right: .5%; }
#portfoliooverview > div.portfolio:not(.stamp):nth-child(3n + 3) { margin-left: 2%; }
#portfoliooverview > div.portfolio:not(.stamp):nth-child(3n) { margin-top: 7.5%; }
#portfoliooverview > div.portfolio:not(.stamp):nth-child(5n) { margin-top: 5%; }

#portfoliooverview div.portfolio > a { display: block; width: 100%; margin: 0 auto; }
#portfoliooverview div.portfolio.small > a { max-width: 400px; }
#portfoliooverview div.portfolio.small.portrait > a { max-width: 300px; }
#portfoliooverview div.portfolio.medium > a { max-width: 600px; }
#portfoliooverview div.portfolio.medium.portrait > a { max-width: 400px; }
#portfoliooverview div.portfolio.large > a { max-width: 800px; }
#portfoliooverview div.portfolio.large.portrait > a { max-width: 500px; }

#portfoliooverview figure { height: 0; position: relative; width: 100%; margin: 0; }
#portfoliooverview figure img { width: 100%; height: auto; }
#portfoliooverview figcaption { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(14,59,94,.44); color: #FFF; display: flex; opacity: 0; transition: opacity .3s; }
#portfoliooverview a:hover figcaption { opacity: 1; }
#portfoliooverview figcaption > span { width: 100%; text-align: center; align-self: center; box-sizing: border-box; padding: 10%; }

#portfoliooverviewsmart { display: none; }
div.portfoliosmart { height: 100vh; position: relative; overflow: hidden; padding: 6.25em 0 2em; box-sizing: border-box; }
div.portfoliosmart span.counter { position: absolute; right: 4.5%; bottom: 3.4em; }
div.portfoliosmart .sliderwrapper { overflow: hidden; height: 100%; /*scroll-snap-type: mandatory; scroll-snap-destination: 0% 100%; scroll-snap-points-x: repeat(100%); padding-bottom: 50px; margin-bottom: -50px; box-sizing: content-box;*/ }
div.portfoliosmart .slider { display: flex; height: 100%; align-items: center; justify-content: center; }
div.portfoliosmart .slider .slide { height: 100%; cursor: grab; }
div.portfoliosmart .slider .slide > div { display: flex; flex-direction: column; height: 100%; width: 100%; }
div.portfoliosmart .slider .slide > div > div { flex-grow: 0; min-height: 3.5em; }
div.portfoliosmart .slider .slide > div > div:first-child { position: relative; flex-grow: 1; }
div.portfoliosmart .slider .slide span { margin-left: 4.5%; padding: .7em 0 1.4em; display: inline-block; width: calc(100vw - 9% - 4em); }
div.portfoliosmart .slider .slide img { max-width: 100%; max-height: 100%; height: auto; width: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; }
div.portfoliosmart .slider .slide.text > div { align-items: center; align-content: center; justify-content: center; }
div.portfoliosmart .slider .slide.text > div > div:first-child { padding: 0 4.5%; box-sizing: border-box; overflow-y: auto; }

.portfoliodetail { display: flex; flex-direction: column; height: 100vh; padding: 4.35em 0 0; box-sizing: border-box; position: fixed; top: 0; left: 0; right: 0; bottom: 0; height: auto; }
.portfoliomain { flex-grow: 1; position: relative; }
.portfolioslider { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; overflow-x: auto; white-space: nowrap; vertical-align: middle; padding-bottom: 8px; }
.portfolioslider img { max-width: calc(100vw - 2em); max-height: 100%; width: auto; height: auto; padding: 0; margin: 0 0 0 1em; display: inline-block; line-height: 0; vertical-align: middle; }
.portfolioslider img.spacer { height: 100%; width: 1px; }
.portfolioslider img.height-small { max-height: 70%; }
.portfolioslider img.height-medium { max-height: 85%; }
.portfolioslider img.height-large { max-height: 100%; }
.portfolioslider img.margin-none { margin-left: 0; }
.portfolioslider img.margin-small { margin-left: 1em; }
.portfolioslider img.margin-medium { margin-left: 7.5em; }
.portfolioslider img.margin-large { margin-left: 15em; }
.portfolioslider .text { min-height: 100%; max-height: 100%; height: 100%; display: inline-flex; vertical-align: top; align-items: center; align-content: center; justify-content: center; }
.portfolioslider .textwrapper { white-space: normal; width: 20em; max-width: 100vw; box-sizing: border-box; padding: 0 1em; /*margin-left: 1em;*/ overflow: auto; max-height: 100%; }
.portfolioslider .textwrapper > div { padding: 1em 0; }
.portfoliofooter { padding: 2.4em 2.3em 1.4em; text-transform: lowercase; }
.portfolioslider img, .portfolioslider .text { opacity: 0; transition: opacity .5s; }
.portfolioslider img.ready, .portfolioslider .text.ready { opacity: 1; }

/* news */
#newswrapper { }
#newswrapper article { position: relative; margin: 0em 0 3em; max-width: 1140px; padding: 1em 0 0; }
#newswrapper article.width-small { display: flex; }
#newswrapper div.item.text { padding-left: 0; }
#newswrapper div.item.text.width-small { width: 33.3333%; }
#newswrapper div.item.text.width-medium { width: 66.6666%; }
#newswrapper div.masonrywrapper { width: 66.6666%; }
#newswrapper article.width-small div.masonrywrapper > div { margin: 0 -.5em 0 0; }
#newswrapper article.width-medium div.masonrywrapper > div { margin: 0 0 0 -.5em; }

span.date { display: block; }
#newswrapper h2 { margin-top: 0; }
#newswrapper figure { height: 0; margin: 0; }
#newswrapper div.item { width: 50%; padding: .35em .5em .65em; box-sizing: border-box; }
#newswrapper article.width-medium div.item,
#newswrapper article.width-small div.item.sizer + div.item,
#newswrapper article.width-small .itemcount-1 div.item,
#newswrapper article.width-small .itemcount-2 div.item { width: 100%; }
#newswrapper div.item.sizer { padding: 0; }
#newswrapper div.item.text { padding-top: 0; padding-bottom: 0; }

/* clients */
.clientwrapper { display: flex; }
.clientwrapper .text { width: 33.3333%; }
.imagewrapper { max-width: 600px; width: 66.6666%; padding-left: 1em; }
.imagewrapper figure { height: 0; margin: 0; }
.imagewrapper figure img { width: 100%; height: auto; margin: 1.35em 0 1.75em; }

/* gvideoembed */
span.gvideoembed { display: block; background-size: cover; background-position: center; position: relative; max-width: 100% !important; padding-bottom: 56.25%; height: 0 !important; overflow: hidden; transition: all .25s; cursor: pointer; background-color: #000; }
/*span.gvideoembed:hover { opacity: .9; }*/
span.gvideoembed a.gvideoembed { display: none; }
span.gvideoembed:before { opacity: .5; content: ''; display: block; border-radius: 3px; width: 44px; height: 44px; background-color: #FFF; position: absolute; left: 50%; top: 50%; margin: -22px 0 0 -22px; padding: 0; transition: all .25s; }
span.gvideoembed:after { opacity: .9; content: ''; position: absolute; left: 50%; top: 50%; margin: -12px 0 0 -9px; width:0; height:0; border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 22px solid #0E3B5E; transition: all .25s; }
span.gvideoembed:hover:before, span.gvideoembed:hover:after { opacity: .85; }
span.gvideoembed.loaded, span.gvideoembed.loaded:hover { opacity: 1; cursor: wait; }
span.gvideoembed.loaded:after, span.gvideoembed.loaded:before { display: none; }
.gvideoembed iframe, .gvideoembed object, .gvideoembed embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; }

/* image2 */
img { display: block; max-width: 100%; height: auto; }
figure { margin: 1.35em 0; padding: 0; }
figure.gimagecaptioned { margin-bottom: 1.5em; }
figure.gimagecaptioned figcaption { margin-top: .5em; max-width: 100%; }
.gimageleft { float: left; margin: .35em 1.5em 1.5em 0; max-width: 66.6666%; }
.gimagecenter { text-align: center; }
.gimagecenter figcaption, .gimagecenter img { margin-left: auto; margin-right: auto; text-align: left; }
.gimageright { float: right; margin: .35em 0 1.5em 1.5em; max-width: 66.6666%; }

/* scroller */
.ps { overflow: hidden !important; overflow-anchor: none; -ms-overflow-style: none; touch-action: auto; -ms-touch-action: auto; }
.ps__rail-x { height: 8px; bottom: 0px; position: absolute; cursor: pointer; }
.ps__rail-y { display: none; opacity: 0; width: 15px; right: 0; position: absolute; }
.ps__thumb-x { background-color: #0E3B5E; height: 8px; bottom: 0px; position: absolute; cursor: pointer; }
.ps__thumb-y { background-color: #aaa; border-radius: 6px; width: 6px; right: 2px; position: absolute; }
@supports (-ms-overflow-style: none) {
  .ps { overflow: auto !important; }
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .ps { overflow: auto !important; }
}

/* */
.clearfix:before, .clearfix:after { content: ' '; display: table; }
.clearfix:after { clear: both; }
span.nowrap { white-space: nowrap; }

@media only screen and (max-width: 1200px) {
	#logo, #title { left: 4.5%; }
	body.portfolio.detail #title { right: calc(4.5% + 3.5em); }
	#smartbutton { right: calc(4.5% - .8em); }
	#smartmenu > div > div, .portfoliofooter { padding-left: 4.5%; padding-right: 4.5%; }
	section.textpage { padding-left: calc(4.5% + 8.9em); padding-right: 4.5%; }
	#portfoliooverview > div.portfolio.small { width: 40%; }
	#portfoliooverview > div.portfolio.medium { width: 45%; }
}

@media only screen and (max-width: 1030px) {
	#newswrapper div.item.text.width-small { width: 50%; }
	#newswrapper div.item.text.width-medium { width: 100%; }
	#newswrapper div.item.text.width-small + div.item, #newswrapper div.item { width: 50%; }
}
/* move content left */
@media only screen and (max-width: 1023px) {
	section.textpage { padding-left: 4.5%; padding-top: 5.5em; }
}

@media only screen and (max-width: 900px) {
	.clientwrapper > .imagewrapper { display: none; }
	.clientwrapper .text { width: 100%; }
	ol.clients a.active.default { text-decoration: none; }
	ol.clients a.active:not(.default) + .imagewrapper { display: block; }
	.imagewrapper { width: 100%; padding: 0 0 1em; max-width: 880px; /*margin: 0 -5%;*/ }
	.imagewrapper figure img { margin: .75em 0 0; }
}

@media only screen and (max-width: 800px) {
	body { font-size: 1.1875em; }
	#smartbutton a span { height: 2px; }
	#title a:after { border-width: 2px; }
	/* smart portfolio */
	#portfoliooverview, .portfoliodetail { display: none; }
	#portfoliooverviewsmart, body.portfolio.detail #title { display: block; }
	body.portfolio.detail #title a { display: none; }
}
@media only screen and (max-width: 767px) {
	.textpage .twocolumns, .textpage .threecolumns { display: block; }
	.textpage .twocolumns > div, .textpage .threecolumns > div { padding: 0 !important; width: 100% !important; box-sizing: border-box; }
	.textpage .twocolumns > div.twocolumns-left { padding-left: 0; }
	.textpage .twocolumns > div.twocolumns-right { width: 66.6666%; padding-right: 0; }
	.textpage .threecolumns > div.threecolumns-left { padding-left: 0; }
	.textpage .threecolumns > div.threecolumns-right { padding-right: 0; }

	#newswrapper article.width-small { display: block; }
	#newswrapper article.width-medium div.masonrywrapper > div, #newswrapper article.width-small div.masonrywrapper > div { margin: 0 -.5em 0 -.5em; }
	#newswrapper div.item.text.width-small, #newswrapper div.item.text.width-medium, #newswrapper div.masonrywrapper { width: 100%; }
		
}

@media only screen and (max-width: 640px) {
	#newswrapper div.item.text.width-small { width: 100%; }
	#newswrapper div.item.text + div.item:not(.portrait) { width: 100%; }
	/* */
	#portfoliooverview { margin: 0; padding: 6.75em 0 0; }
	#portfoliooverview > div.portfolio { padding: 0; }
	#portfoliooverview figcaption { position: static; opacity: 1; background-color: transparent; color: inherit; text-decoration: none; text-align: left; }
	#portfoliooverview figcaption > span { text-align: left; padding: .5em 4.5% 1em; }
	#portfoliooverview a { text-decoration: none; }
	#portfoliooverview > div.portfolio.small, #portfoliooverview > div.portfolio.medium, #portfoliooverview > div.portfolio.large { width: 100%; margin: 0 !important; }
	#portfoliooverview figure { height: auto; margin-bottom: 1em; padding-bottom: 0 !important; }
	#portfoliooverview .item.stamp { display: none; }
	#portfoliooverview div.portfolio.small > a, #portfoliooverview div.portfolio.medium > a, #portfoliooverview div.portfolio.large > a,
	#portfoliooverview div.portfolio.small.portrait > a, #portfoliooverview div.portfolio.medium.portrait > a, #portfoliooverview div.portfolio.large.portrait > a { max-width: 100%; }
}

@media only screen and (max-width: 540px) {
	#smartmenu { max-width: 100%; width: 100%; transform: translateX(100%); }
	body.home #logo > a { font-size: 100%; margin-top: 0; }
}