/*
Theme Name: S6 2026
Theme URI: https://www.sigmasix.ch
Author: S6
Author URI: https://www.sigmasix.ch
Version: 3.2026
*/

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{font-size:100%;font:inherit;padding:0;border:0;margin:0;vertical-align:baseline}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}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}.clear{clear:both}
.sticky{}.bypostauthor{}.wp-caption{}.wp-caption-text{}.gallery-caption{}.alignright{}.alignleft{}.aligncenter{}

body { 
	background: #FFF; /* Site BG */
	color: #FFF;
	margin: 0;
}

html, body {
	-webkit-overflow-scrolling: touch;
	overflow-x: hidden;
}

/* Box-sizing */
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

strong {
	font-size: .9em;
	font-family: 'Rational-Mono', Helvetica, Arial, Sans-serif;
}

::selection {
	background: red; /* s6 Red */
	color: #FFF;   
}
::-moz-selection {
	background: red; /* s6 Red */
	color: #FFF;   
}

/* Clear Float */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

/* Wrappers */
#wrapper {
	position: relative;
	margin: 0 auto;
/* 	padding: 0 50px; */
	overflow-x: none;
}


/* Navigation */
header nav ul {
	padding: 16px;
	text-align: center;
}

header nav {
	width: 100vh;
	position: fixed;
	top: 0;
	z-index: 2;
}

#nav-sections {
	left: 0;
    -ms-transform: rotate(-90deg) translateX(-100%); /* IE 9 */
    -ms-transform-origin: left top; /* IE 9 */
    -webkit-transform: rotate(-90deg) translateX(-100%); /* Chrome, Safari, Opera */
    -webkit-transform-origin: left top; /* Chrome, Safari, Opera */
    transform: rotate(-90deg) translateX(-100%);
    transform-origin: left top;
}

#nav-pages {
	right: 0;
    -ms-transform: rotate(-90deg) translateY(-100%); /* IE 9 */
    -ms-transform-origin: right top; /* IE 9 */
    -webkit-transform: rotate(-90deg) translateY(-100%); /* Chrome, Safari, Opera */
    -webkit-transform-origin: right top; /* Chrome, Safari, Opera */
    transform: rotate(-90deg) translateY(-100%);
    transform-origin: right top;
}

header nav ul {
	display: table;
	margin: 0 auto;
}

header nav ul li {
	line-height: 1;
	float: left;
}

header nav ul li hr {
	display: inline-block;
	vertical-align: middle;
	width: 40px;
	border: 0;
    height: 1px;
    background: #000;
    margin: 0 4px;
}

header nav {
	visibility: hidden;
}

.shown {
	visibility: visible; 
}


/* Intro */
#intro {
	height: 100%;
	height: 100vh;
	position: relative;
	overflow: hidden;
	margin-bottom: 30%;
/* 	padding: 0 50px;	 */
}



#intro-2 {
	margin-bottom: 30vh; /* Temp */	
}


/*
.preview-intro header {
	padding: 20px 0 40px 0;
	text-align: center;
	background: blue;
}
*/

.preview-intro .preview-intro-s6 {
	top: 100%;	
	height: 100%;
}

.preview-intro .preview-intro-s6 .site-logo {
	text-align: center;
	width: 100%;
    display: block;
	position: absolute;
	top: 50%;
	left: 50%;

	transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%) !important;
    -ms-transform: translate(-50%, -50%) !important;
	-o-transform: translate(-50%, -50%);
}

.preview-intro .preview-intro-s6, .preview-intro .preview-intro-container  {
	width: 100%;
	position: absolute;
}

.preview-intro .preview-intro-s6, .preview-intro .preview-intro-desc {
}

.preview-intro .preview-intro-s6 {
	padding: 20px 0 40px 0;
	text-align: center;
}

.preview-intro .preview-intro-container  {
	bottom: -100%;
	width: 100%;
	height: 100%;	
}

.preview-intro .preview-intro-desc {
	text-align: center;
	width: 100%;
    display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%) !important;
    -ms-transform: translate(-50%, -50%) !important;
	-o-transform: translate(-50%, -50%);
}

.preview-intro .preview-intro-nav {
	text-align: center;
	position: absolute;
	width: 100%;
	bottom: 0;
}

.preview-intro .preview-intro-image {
	margin: 0 50px;
	display: none;
	overflow: hidden;
	position: absolute;
}

.preview-intro .preview-intro-image img {
}

.preview-intro-nav a.sub-segment-next, .preview-project-nav a.sub-segment-next {
    background: url('images/arrow-d.png') 0 0;
	width: 19px;
	height: 28px;	
}

.preview-intro-nav:hover a.sub-segment-next, .preview-project-nav:hover a.sub-segment-next {
    background: url('images/arrow-d.png') -19px 0;
	width: 19px;
	height: 28px;	
}

.preview-intro .site-logo.title {
	text-transform: uppercase;
}

#s6-s, #s6-igma, #s6-six, #s6-dash {
	display: inline-block;
	overflow: hidden;
}

#s6-s {
}

#s6-igma {
}

#s6-six {
}

#s6-dash {
	margin-left: 0;
	margin-right: 0;	
}

#s6-dash hr {
	vertical-align: -10px;
	display: inline-block;
	width: 100%;
    height: .065em;
/*     height: 4.5px; */
    background: #000;
    border: 0;
}


/* Preview */
#preview {
	position: relative;
}

#preview .preview-project header {
	padding: 20px 0 20px 0;
	text-align: center;
}

.preview-project {
	margin-bottom: 30vh; /* Temp */
	position: relative;
	overflow-y: hidden;
}

.preview-project .preview-project-container {
	overflow: hidden;
}

.preview-project .preview-project-container > header {
	position: relative;
	margin-bottom: 100vh;
}

.preview-project .title-container {
	position: relative;
	max-width: 100%;
	padding: 0 50px;
}

.preview-project .title-container > span {
	display: block;
}


.preview-project h3.title {
	text-transform: uppercase;
}

.preview-project .preview-project-nav, .preview-intro .preview-intro-nav {
	text-align: center;
	padding: 20px 0 25px 0;	
}

.preview-project-link {
	display: block;
	text-transform: uppercase;
}

.preview-project-slider {
	position: relative;
	width: 100vw;
	left: calc(-50vw + 50%);
}

/* Archive Popup Slideshow */
.archive-project-slider {
	width: 100%;
	width: 100vw;
    display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%) !important;
    -ms-transform: translate(-50%, -50%) !important;
	-o-transform: translate(-50%, -50%);
}

/* Preview Sliders */
.flexslider {
    overflow: hidden;
    width: 100%;
}

.flex-viewport {
    overflow: visible !important;
}

.flexslider .slides > li:first-child {
    float: left;
    display: block;
    -webkit-backface-visibility: visible;
}

#aps {
}

#aps-container .slide-content {
	margin: 0 50px;
	position: relative;
	display: block;
	max-width: 100%;
	overflow: hidden;
}

.slide-content {
	margin: 0 50px;
	position: relative;
	display: block;
	max-width: 100%;
	overflow: hidden;
}

.slide-content > img {
    display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	max-width: 100%;
	max-height: 100%;

	transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%) !important;
    -ms-transform: translate(-50%, -50%) !important;
	-o-transform: translate(-50%, -50%);
}

.slide-content .video-content > img {
    display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	max-width: 100%;
	max-height: 100%;

	transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%) !important;
    -ms-transform: translate(-50%, -50%) !important;
	-o-transform: translate(-50%, -50%);
}


.slide-content .video-content .vimeo-wrapper img {
    display: block;
	position: absolute;
	top: 50%;
	left: 50%;
/* 	width: 100%; */
	max-height: 100%;

	transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%) !important;
    -ms-transform: translate(-50%, -50%) !important;
	-o-transform: translate(-50%, -50%);
}


.video-content {
	z-index: 3;
	height: 100%;
	width: 100%;		
	max-width: 1280px;
	max-height: 100%;
    display: block;
	position: absolute;
	top: 50%;
	left: 50%;

	transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%) !important;
    -ms-transform: translate(-50%, -50%) !important;
	-o-transform: translate(-50%, -50%);

}

.video-content {
}

.vimeo-wrapper {
	cursor: pointer;
}

.vimeo-wrapper .play-icon {
	position: absolute;
	z-index: 8;
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background: url('images/play.png') no-repeat 50% 52%;
}


.slide-content .fluid-width-video-wrapper {
    display: block;
	position: absolute;
	top: 50%;
	
	transform: translate(0, -50%);
	-moz-transform: translate(0, -50%);
	-webkit-transform: translate(0, -50%) !important;
    -ms-transform: translate(0, -50%) !important;
	-o-transform: translate(0, -50%);
}

.slide-content iframe {
}

.sticky-container {
}

#about, #contact, #page-404 {
	min-height: 100vh;
}

#archives, #about, #contact {
	min-height: 100vh;
}

/* Archives */
#sub {
	position: relative;
	max-width: 1500px;
    margin: 0 auto;	
	padding: 0 50px;
}

.segment {
/* 	border: 1px solid red; */
}

.segment > header {
	width: 100%;
	text-align: center;
	z-index: 1;
	padding-top: 20px;
	padding-bottom: 7em;
}

.segment header h3 {
	width: 100%;
	text-align: center;
	z-index: 1;
}

.segment header h3 .s6-dash {
	width: 40px; 
	margin-left: 5px; 
	margin-right: 5px;
}

.segment header h3 .s6-dash hr {
	vertical-align: -3px;
	height: 1px;
	width: 40px;	
	display: inline-block;
    background: #000;
    border: 0;
}

.preview-project-container header {
	position: relative;
}

.preview-project-container header .sub-segment-prev {
	position: relative;
	width: 100%;
	height: 100%;
}

.preview-project-container header .title-container h3 .s6-dash {
	width: 20px;	
	margin-left: 5px; 
	margin-right: 5px;
}

.preview-project-container header .title-container h3 .s6-dash hr {
	width: 20px;	
}

#archives {
	margin-bottom: 40px;
}

#archives > ul > li:first-child {
	border-top: 1px solid #000;
}

#archives > ul > li {
	border-bottom: 1px solid #000;
	position: relative;
	overflow: hidden;
}

#archives .project {
}

.content-container {
	display: none;
}

.project-label {
	padding: 5px 0;	
	display: block;	
    cursor: pointer;
	position: relative;
	overflow: hidden;
}

a.project-label.open {
	color: red; /* s6 Red */   
}

.project-label .col, .project-content .col {
	float: left;
}

.project-label .project-title {
	width: 50%;
}

.project-label .project-client {
	width: 30%;
}

.project-label .project-year {
	width: 20%;
	text-align: right;
}

/* SEO fix: heading for the project's own <h1> (see single.php). Kept
   visually consistent with the other section titles (uppercase, same
   weight) so it blends into the existing design. */
.project-single-title {
	text-transform: uppercase;
	font-size: 1.3em;
	margin: 0 0 20px 0;
}

.project-content {
	margin: 40px 0 40px 0;
}

.project-content .col {
	width: 34%;
	padding-left: 20px;
}

.project-content .col .empty {
	min-height: 1px;
}

.project-content .project-desc {
	width: 32%;
	padding-left: 0;
	min-height: 300px;
}

.project-media {
	display: block;
} 

.project-media span {
	margin: 10px 0;
	display: block;
} 

.project-media img {
	width: 100%;
	display: block;
	height: auto;
	max-height: 256px;
} 

.hidden {
	display: none;
}




/* About */

#about {
}

#about > .col {
	width: 50%;
	float: left;	
}

#about .about-slider {
	float: right;
	padding-right: 0;
	padding-left: 30px;
	overflow: hidden;	
}

#about .about-desc {
	padding-left: 0;
	padding-right: 30px;
}

#about .about-slider img {
	max-width: 100%;
	display: block;
}

#about .about-list {
	margin-top: 40px;
	float: left;
	width: 100%;
	display: block;
}

#about .about-list .col {
	margin-bottom: 40px;
	width: 50%;
}

#about .about-list .col-left {
	float: left;
    padding-left: 0;
    padding-right: 30px;	
}

#about .about-list .col-right {
	float: right;
    padding-left: 30px;
    padding-right: 0;	
}

#about .list-content {
	margin-top: 40px;
}



/* Contact */
#contact {
}

#contact .col {
	width: 50%;
	float: left;
}

#contact .contact-address {
	padding-left: 0;
	padding-right: 30px;
}

#contact .contact-details {
	padding-right: 0;
	padding-left: 30px;
	height: 100%;
}

.social-media {
	position: absolute;
	bottom: 0;
	margin-bottom: 30px;
}

.sm-icon {
	display: block;
	float: left;
	width: 32px;
	height: 32px;
	margin-right: 4px;
}

.sm-icon:last-child {
	margin-right: 0;
}

.facebook {
    background: url('images/social-media.png') 0 0;
}

.tumblr {
    background: url('images/social-media.png') -32px 0;
}

.vimeo {
    background: url('images/social-media.png') -64px 0;
}

.twitter {
    background: url('images/social-media.png') -96px 0;
}

.instagram {
    background: url('images/social-media.png') -128px 0;
}

.facebook:hover {
    background: url('images/social-media.png') 0 32px;
}

.tumblr:hover {
    background: url('images/social-media.png') -32px 32px;
}

.vimeo:hover {
    background: url('images/social-media.png') -64px 32px;
}

.twitter:hover {
    background: url('images/social-media.png') -96px 32px;
}

.instagram:hover {
    background: url('images/social-media.png') -128px 32px;
}


/* Preloader */
.pre-loader {
    background: url('images/preloader.gif') 0 0;
	width: 34px;
	height: 34px;
	z-index: 9999;
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	z-index:99999;
}


/* Footer */
#site-footer {
	display: none;	
}

footer {
	padding: 10px 0;
}


/* Typography */
body { 
	font-family: 'Rational-Regular', Helvetica, Arial, Sans-serif;
    -webkit-font-smoothing: antialiased;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
	font-size: 100%;
	line-height: 1.2;
	letter-spacing: 1px;
	color: #000;
}

#site-content {
	font-size: 1.125em;
}

a {
	color: #000;
	text-decoration: none;
}

a:hover, #toggle-nav-menu:hover {
	color: red; /* s6 Red */   
}

a.active {
	color: red; /* s6 Red */   
}

.project-desc a, .about-desc a {
	border-bottom: 1px solid #000;
	text-decoration: none;
}

.project-desc a:hover, .about-desc a:hover {
	border-bottom: none;
	color: red; /* s6 Red */   
}


h1 {
	font-size: 1em;
/* 	font-size: 18px; */
	margin: 0;
}


h2 {
	font-size: 1em;
/* 	font-size: 18px; */
	margin: 0;
}

li.current-page a {
	color: red; /* s6 Red */   
}

/* Section Titles */
h3 {
	font-size: 1em;
	margin: 0;
}

.about-desc a {
}

.about-list {
	font-size: .9em;
}

/* Section Titles */
.about-list h4 {
	font-size: .9em;
	border-bottom: 1px solid #000;
	margin: 0 0 20px 0px;
	display: inline-block;
}

.about-list li {
    display: table-row;
}

.about-list .year {
	min-width: 50px;
    display: table-cell;
}

.about-list .content {
    display: table-cell;
}


/* Buttons */
.preview-project-nav {
	cursor: pointer;	
}

.preview-project-link  {
	cursor: pointer;
	padding: 2px 10px;
	display: inline-block;
}

#contact .col {
	font-size: 2em;
/* 	font-size: 36px; */
	line-height: 1;
}

.slide-close {
	font-size: 2em;
	line-height: 16px;	
}

#about p, .project-desc p {
	margin-bottom: 20px;
}

#contact p {
    word-break: break-all;
	margin-bottom: 40px;
}


/* Responsive fix: the theme only ever had a single ~600px "phone
   portrait" breakpoint below. Tablets (roughly 601–1024px, portrait
   or landscape) fell into a gap where the desktop 2/3-column layouts
   (project content, about, contact) were still forced side-by-side
   and felt cramped. This reuses the same "stack to one column"
   pattern the phone breakpoint already applies, at a wider width, so
   tablets get a comfortable single-column layout too. Typography
   tweaks (font-size, letter-spacing…) are left to the narrower phone
   query below since they're tuned for small screens specifically. */
@media screen and (max-width: 1024px) {

	.project-content .project-desc {
		width: 100%;
		padding-left: 0;
		margin-bottom: 30px;
		min-height: 0;
	}

	.project-content .project-video {
		margin-bottom: 20px;
	}

	.project-content .col {
		width: 100%;
		padding-left: 0;
	}

	#about .col {
		width: 100%;
	}

	#about .about-slider {
		float: none;
		padding-left: 0;
		margin-bottom: 30px;
	}

	#about .about-desc {
		padding-right: 0;
	}

	#about .about-list .col {
		width: 100%;
	}

	#about .about-list .col-left,
	#about .about-list .col-right {
		float: none;
		padding-left: 0;
		padding-right: 0;
	}

	#contact .col {
		width: 100%;
		float: none;
	}

	#contact .contact-address {
		padding-right: 0;
	}

	#contact .contact-details {
		padding-left: 0;
	}

	.social-media {
		position: relative;
		margin-top: 20px;
	}
}

@media screen and (max-width: 600px) and (orientation: portrait), screen and (max-height: 300px) {

	body { 
		font-size: 80%;
		line-height: 1.1;
		letter-spacing: 1px;
	}

	.segment > header {
		padding-bottom: 4em;
	}

	.project-content {
	    margin: 20px 0 40px 0;
	}

	.about-list, .about-list h4 {
		font-size: .9em;
	}

	#contact .col {
		font-size: 1.35em;
	}


	#s6-dash hr {
		vertical-align: -5px;
	}

	.project-label .project-title, .project-label .project-client, .project-label .project-year {
		width: 100%;
		text-align: left;
	}

	.project-content .project-desc {
		width: 100%;
		padding-left: 0;
		margin-bottom: 30px;
		min-height: 0;
	}
	
	.project-content .project-video {
		margin-bottom: 20px;
	}

	.project-content .col {
		width: 100%;
		padding-left: 0;
	}

	.project-content .col .empty {
		display: none;
	}

	#about .col {
		width: 100%;
	}
	
	#about .about-slider {
		padding-left: 0;
		margin-bottom: 30px;
	}
	
	#about .about-desc {
		padding-right: 0;
	}
	
	#about .about-slider img {
		max-width: 100%;
		display: block;
	}


	#about .about-list .col {
		width: 100%;
	}
	
	#about .about-list .col-left {
		float: none;
	    padding-left: 0;
	    padding-right: 0;	
	}
	
	#about .about-list .col-right {
		float: none;
	    padding-left: 0;
	    padding-right: 0;	
	}

	#contact .col {
		width: 100%;
		float: none;
	}
	
	#contact .contact-address {
		padding-right: 0;
	}
	
	#contact .contact-details {
		padding-left: 0;
	
	}

	.social-media {
		position: relative;
		margin-top: 20px;
	}


	.vimeo-wrapper .play-icon {
		background-size: 10% auto;
	}
}


/* Fonts */
@font-face {
	font-family: 'Rational-Regular';
	src: url('fonts/Rational-4616.eot');
	src: url('fonts/Rational-4616.eot?#iefix') format('embedded-opentype'),
	     url('fonts/Rational-4616.woff') format('woff'),
	     url('fonts/Rational-4616.ttf') format('truetype'),
		 url('fonts/Rational-4616.svg#Rational-Regular') format('svg'); 
    font-weight: normal;
	font-style: normal;
}

@font-face {
    font-family: 'Rational-Mono';
    src: url('fonts/Rational-4623.eot');
    src: url('fonts/Rational-4623.eot?#iefix') format('embedded-opentype'),
         url('fonts/Rational-4623.woff') format('woff'),
         url('fonts/Rational-4623.ttf') format('truetype'),
		 url('fonts/Rational-4623.svg#Rational-Mono') format('svg'); 
    font-weight: normal;
    font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: 'Rational-Regular';
            src: url('fonts/Rational-4616.svg#Rational-Regular') format('svg');
    }
}


.boom {
	font-size: 4em;
}

.background_color_grey {
	background: red;
}

.lazy {
    display: none;
}


button.preview-button {
	display: none;
    overflow: visible;
    cursor: pointer;
    background: transparent;
    border: 0;
    -webkit-appearance: none;
    display: block;
    outline: none;
    padding: 0;
    z-index: 1046;
    -webkit-box-shadow: none;
    box-shadow: none;
}

#aps-container {
	z-index: 10;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
}

.archive-project-slider {
}

.slide-close {
	padding: .5em;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 2;
}

.slide-count {
	padding: 1.2em;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2;
}

#aps-container .slide-nav {
}

.preview-project-container .slide-nav {
	display: none;
}

#aps-container .slide-nav .slide-prev, #aps-container .slide-nav .slide-next, .preview-project-container .slide-nav .slide-prev, .preview-project-container .slide-nav .slide-next {
	display: block;
    background-repeat: no-repeat;
    z-index: 20;
	margin: -10px 3.15em 0 3.15em;
	position: absolute;				
}

.slide-nav .slide-prev, .slide-nav .slide-next {
	width: 28px;
	height: 19px;
	top: 50%;
}

.slide-next {
    background: url('images/arrow-e.png') 0 0;
	right: 0;
}

.slide-prev {
    background: url('images/arrow-w.png') 0 0;
	left: 0;
}

.slide-next:hover {
    background: url('images/arrow-e.png') 0 -19px;
}

.slide-prev:hover {
    background: url('images/arrow-w.png') 0 -19px;
}