@charset 'UTF-8';
/**
 * © 2016 Higi Bigler (nullnulleins.ch). All rights reserved.
 */

* { margin: 0; padding: 0; }
body { font: normal normal 400 .95em/1.2 'Source Sans Pro', sans-serif; margin: 0; padding: 0; -webkit-text-size-adjust: none; overflow-x: hidden; overflow-y: scroll; /*-webkit-font-smoothing: antialiased;*/ }

/* structure */
#container { }
.fixedwidth { max-width: 1180px; padding: 0 2.5%; margin: 0 auto; }

header { position: fixed; bottom: 0; left: 0; right: 0; z-index: 10; padding: 0; background-color: #FFF; }
header hr { border: none; border-top: 1px solid #000; height: 0; width: calc(100% - 10px); position: relative; margin: 0 5px; }
#logo { }
#logo a { display: block; margin: 3% 5px; height: 0; padding-bottom: /*9.629*/8.6%; background-image: url('./../img/fc.png'); background-size: contain; background-position: left top; background-repeat: no-repeat; border-bottom: 1px solid #000; }

nav { font-family: 'Oswald', sans-serif; font-size: 133.3333%; text-transform: uppercase; font-weight: 700; letter-spacing: .05em; margin: 0 0 0 -1px; }
nav ul { list-style: none; display: block; width: 80%; text-align: left; background-color: #FFF; padding: 0; -ms-transform: skewX(-30deg); -webkit-transform: skewX(-30deg); transform: skewX(-30deg); -ms-transform-origin: 0 100%; -webkit-transform-origin: 0 100%; transform-origin: 0 100%; }
#content nav { margin-bottom: -5px; }
nav li { display: inline-block; text-align: center; width: 25%; position: relative; z-index: 1; vertical-align: bottom; margin: 0 0 10px; }
nav a { text-decoration: none; color: #000; padding: .75em .25em; background-color: #222; display: block; margin: 0 10px 0 0; box-sizing: border-box; border-width: 1px; border-style: solid; position: relative; z-index: 1; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
nav a sup { position: absolute; top: 10px; }
nav a.inactive { background-color: #FFF; border: 1px solid #000; }

header nav { margin: 0 -1px 0 0; }
header nav ul { text-align: right; float: right; padding: 10px 0 0 0; -ms-transform-origin: 100% 0; -webkit-transform-origin: 100% 0; transform-origin: 100% 0; }
header nav ul li { margin: 0; }
header nav li:last-child:after { content: ''; display: block; background-color: #FFF; width: 1.75em; height: 3.25em; position: absolute; left: 99.5%; bottom: 0; z-index: 0; }
header nav a { color: #FFF; border-color: #222; margin: 0 0 0 10px; padding: .4em .25em; }
header nav a:hover, header nav a.active { color: #222; background-color: #FFF; }
#content { padding-bottom: 62px; position: relative; }

p { margin: 0 0 1em 0; }
a { outline: none; }
.innertile a, #ckeditorarea a { color: #666; }
.innertile a:visited { color: #8A8A8A; }
a img { border: none; }

sub, sup { font-size: 50%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -.9em; }
sub { bottom: 0; }

h1, h3 { font-size: 166.6666%; font-family: 'Oswald', sans-serif; }
h2, h4 { font-size: 166.6666%; font-family: 'Source Sans Pro', sans-serif; font-weight: 200; }
h1, h2 { text-transform: uppercase; text-align: center; }
h2 { font-style: italic; }
h4 { padding: .5em 0; }
h5 { font-size: 208.3333%; font-family: 'Oswald', sans-serif; }
h6 { font-size: 100%; line-height: 1.5; font-family: 'Oswald', sans-serif; text-transform: uppercase; }

#ckeditorarea h2, .pagecontent h2, .cke_panel_container h2 { text-align: left; font-weight: 700; font-style: normal; font-size: 100%; font-family: 'Source Sans Pro', sans-serif; margin: 1em 0 0 0; text-transform: none; }
#ckeditorarea h2:first-child, .pagecontent h2:first-child, .cke_panel_container h2:first-child { margin-top: 0; } 

.projects { display: none; }
body.home .projects { display: block; }
.projects > .tile { float: left; }
.projects > .tile.hidden { display: none; }
.projectcontent { width: 100% !important; }
.projectcontent .innertile { border: 1px solid #000; padding: 1em 2em; position: relative; }
.innertile { position: relative; }
.innertile a.closebutton { display: block; width: 17px; height: 17px; top: 6px; right: 6px; position: absolute; }
.innertile a.closebutton:before, .innertile a.closebutton:after { display: block; content: ''; width: 23px; height: 1px; background-color: #000; -webkit-transform: rotate(45deg); -webkit-transform-origin: 50%; transform: rotate(45deg); transform-origin: 50%; position: absolute; margin: 8px 0 0 -3px; }
.innertile a.closebutton:before { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
.innertile a.closebutton:hover:before, .innertile a.closebutton:hover:after { background-color: #8A8A8A; }
.columnwrapper { margin: 1em -1em 0; }
.columnwrapper .column { float: left; width: 50%; padding: 0 1em; box-sizing: border-box; }
.columnwrapper.single .column { float: none; width: 100%; max-width: 485px; margin: 0 auto; }

.pagecontent { border: 1px solid #000; border-bottom: none; margin: 5px 5px -10px; width: auto !important; }
.pagecontent .innertile { margin: 0; padding: 2em;
	-moz-column-count: 3;
	-webkit-column-count: 3;
	column-count: 3;
	-moz-column-gap: 2em;
	-webkit-column-gap: 2em;
	column-gap: 2em;
}
.pagecontent .innertile.full {
	-moz-column-count: 1;
	-webkit-column-count: 1;
	column-count: 1;
	-moz-column-gap: 2em;
	-webkit-column-gap: 2em;
	column-gap: 2em;
}
.pagecontent .innertile.full article { margin: 0 -1em; }
.pagecontent .innertile.full article > div { float: left; width: 33.3333%; padding: 0 1em; box-sizing: border-box; }

.tile { width: 20%; }
.innertile { margin: 5px; background-color: #FFF; }
.cover { height: 0; padding: 0 0 100%; text-transform: uppercase; overflow: hidden; position: relative; }
.cover .innercover { width: 100%; height: 100%; position: absolute; }
.cover .textwrapper { display: table; table-layout: fixed; width: 100%; height: inherit; position: absolute; left: 0; top: 0; box-sizing: border-box; }
.cover img { display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; opacity: 0; }
.header .textwrapper { border: 1px solid black; }
.cover a,.cover a:visited { color: #000; text-decoration: none; display: block; height: 100%; }
.cover a:hover img, .cover a.active img { top: 0; opacity: 1; }
.textwrapper > div { display: table-row; }
.textwrapper > div > div { display: table-cell; vertical-align: middle; text-align: center; padding: 0 5px; }
.projectcover div.type { height: 20px; }
.projectcover div.type div { border: 1px solid #000; }

.column iframe { width: 100%; }

#plaincontent { display: none; }
#plaincontent.page { display: block; }

div.gallery { margin: calc(1em - 5px) -5px; }
div.gallery div.galleryimage { width: 50%; float: left; }
div.gallery.single div.galleryimage { float: none; margin: 0 auto; }
div.gallery.single div.galleryimage.size-l { width: 100%; max-width: 549px; }

div.gallery div.galleryimage.size-xl { width: 100%; }
div.gallery div.galleryimage.size-xl > div { padding-bottom: 30%; }
div.gallery div.galleryimage.size-l {}
div.gallery div.galleryimage.size-m { width: 25%; }
div.gallery div.galleryimage.size-m > div { padding-bottom: 120%; }
div.gallery div.galleryimage.size-s { width: 25%; }
div.gallery div.gridsizer { width: 50%; }

div.gallery div.galleryimage > div { height: 0; padding-bottom: 60%; position: relative; }
div.gallery div.galleryimage > div figure { position: absolute; bottom: 1em; right: 1em; top: 1em; left: 1em; overflow: hidden; background-color: #000; }
div.gallery div.galleryimage > div figure { bottom: 5px; right: 5px; top: 5px; left: 5px; text-align: center; background-position: center; background-size: cover; }
div.gallery div.galleryimage > div figure img { display: none; }
div.gallery div.galleryimage > div .gvideoembed { height: 100% !important; padding-bottom: 0 !important; background-image: none; background-color: transparent; }
div.gallery div.galleryimage > div .gvideoembed.loaded + figcaption { display: none; }
div.gallery div.galleryimage > div figure figcaption { position: absolute; bottom: 0; background-color: #FFF; width: 100%; text-align: left; padding-top: 5px; }
div.gallery div.galleryimage > div figure figcaption p { margin: 0; }

/* 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; 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 #000; 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; }

/* googlemap */
div.googlemap { }

/* image2 */
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; padding: 0; }
figure.gimagecaptioned { margin-bottom: 2em; max-width: 100%; }
figure.gimagecaptioned a { display: inline-block; }
figure.gimagecaptioned figcaption { font-size: 90%; margin-top: .5em; max-width: 100%; }
.gimageleft { float: left; margin: 0 1em 1em 0; }
.gimagecenter { text-align: center; }
.gimagecenter figcaption, .gimagecenter img { margin-left: auto; margin-right: auto; text-align: left; }
.gimageright { float: right; margin: 0 0 20px 20px; }

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

/* loader */
@-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } }
@-moz-keyframes spin { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); } }
@-o-keyframes spin { from { -o-transform: rotate(0deg); } to { -o-transform: rotate(360deg); } }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@-webkit-keyframes spinback { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(-360deg); } }
@-moz-keyframes spinback { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(-360deg); } }
@-o-keyframes spinback { from { -o-transform: rotate(0deg); } to { -o-transform: rotate(-360deg); } }
@keyframes spinback { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }

/* Loading animation container */
div.loading div.loader { display: block; }
div.loader { position: absolute; top: 50%; left: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; display: none; }
/* Spinning circle (inner circle) */
div.loader .maskedCircle { width: 20px; height: 20px; border-radius: 13px; border: 3px solid rgba(255,255,255,.9); }
/* Spinning circle mask */
div.loader .mask { width: 12px; height: 12px; overflow: hidden; }
/* Spinner */
div.loader .spinner { position: absolute; left: 1px; top: 1px; width: 26px; height: 26px; -webkit-animation: spin 1s infinite linear; -moz-animation: spin 1s infinite linear; -o-animation: spin 1s infinite linear; animation: spin 1s infinite linear; }
div.loader .spinner:last-child { -webkit-animation: spinback 2s infinite linear; -moz-animation: spinback 2s infinite linear; -o-animation: spinback 2s infinite linear; animation: spinback 2s infinite linear; }
div.loader::after { content: ""; display: block; margin: 1px; width: 20px; height: 20px; border-radius: 13px; border: 3px solid rgba(128,128,128,.8); }

/* rwd */
@media only screen and (max-width: 1240px) {
	/* adjust fonts in tiles */
	nav { font-size: 1.634411290322581vw; } /* */
	.tile h3, .tile h4 { font-size: 2.043008064516129vw; } /* orig: 25.3333px */
	.tile h5 { font-size: 2.553758064516129vw; } /* 31.6666px */
	.tile h6 { font-size: 1.225806451612903vw; }
}
@media only screen and (max-width: 880px) {
	nav ul { width: 100%; }
	.tile { width: 25%; }
	nav { font-size: 2.1vw; }
	.tile h3, .tile h4 { font-size: 2.298384072580645vw; }
	.tile h5 { font-size: 2.872977822580645vw; }
	.tile h6 { font-size: 1.379032258064516vw; }
	.pagecontent .innertile { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; }
	nav a sup { top: 1vw; }
}
@media only screen and (max-width: 800px) {
	.pagecontent .innertile.full article > div { float: none; max-width: 320px; width: 100%; margin: 0 auto 2em; text-align: center; }
	.pagecontent .innertile.full article > div h2 { text-align: center; }
	div.gallery div.galleryimage.size-l { width: 100%; }
	div.gallery div.galleryimage.size-m { width: 50%; }
	div.gallery div.galleryimage.size-m > div { padding-bottom: 120%; }
	div.gallery div.galleryimage.size-s { width: 50%; }
	div.gallery div.gridsizer { width: 100%; }
}
@media only screen and (max-width: 550px) {
	nav ul { width: 100%; }
	.tile { width: 50%; }
	#logo a { margin: 3.5% 5px; }
	.fixedwidth { padding: 0 5px; }
	header nav { margin-left: -5px; padding-left: 5px; }
	#content nav { margin-right: -5px; padding-right: 5px; }
	nav { font-size: 4.5vw; overflow: hidden; } /* x1.3 */
	nav a { padding: .5em .25em; }
	nav a sup { top: 1.5vw; }
	#content nav ul { transform: none; -webkit-transform: none; transform: none; margin-left: 5px; }
	#content nav li { width: 50%; transform: -ms-transform: skewX(-30deg); -webkit-transform: skewX(-30deg); transform: skewX(-30deg); -ms-transform-origin: 0 100%; -webkit-transform-origin: 0 100%; transform-origin: 0 100%; }
	header li { width: 33.3333%; }
	.tile h3, .tile h4 { font-size: 3.734874117943549vw; }
	.tile h5 { font-size: 4.668588961693549vw; }
	.tile h6 { font-size: 2.240927419354839vw; }
	.pagecontent .innertile { -moz-column-count: 1; -webkit-column-count: 1; column-count: 1; }
	.columnwrapper .column { float: none; width: 100%; padding: 0 1em; }
}

@media only screen and (max-width: 440px) {
	.pagecontent .innertile { padding: 1em; }
	.columnwrapper { margin: 1em -1em 0; }
	.columnwrapper .column { padding: 0; }
	div.gallery { margin: calc(1em - 5px) calc(-1em - 5px); }
}