@charset "UTF-8";

/* ==========================================================================
 normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css 
 ========================================================================== */
html{line-height: 1.15;-webkit-text-size-adjust: 100%;}body{margin: 0;}main{display: block;}h1{font-size: 2em;margin: 0.67em 0;}hr{box-sizing: content-box;height: 0;overflow: visible;}pre{font-family: monospace, monospace;font-size: 1em;}a{background-color: transparent;}abbr[title]{border-bottom: none;text-decoration: underline;text-decoration: underline dotted;}b,strong{font-weight: bolder;}code,kbd,samp{font-family: monospace, monospace;font-size: 1em;}small{font-size: 80%;}sub,sup{font-size: 75%;line-height: 0;position: relative;vertical-align: baseline;}sub{bottom: -0.25em;}sup{top: -0.5em;}img{border-style: none;}button,input,optgroup,select,textarea{font-family: inherit;font-size: 100%;line-height: 1.15;margin: 0;}button,input{overflow: visible;}button,select{text-transform: none;}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance: button;}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style: none;padding: 0;}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline: 1px dotted ButtonText;}fieldset{padding: 0.35em 0.75em 0.625em;}legend{box-sizing: border-box;color: inherit;display: table;max-width: 100%;padding: 0;white-space: normal;}progress{vertical-align: baseline;}textarea{overflow: auto;}[type="checkbox"],[type="radio"]{box-sizing: border-box;padding: 0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height: auto;}[type="search"]{-webkit-appearance: textfield;outline-offset: -2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance: none;}::-webkit-file-upload-button{-webkit-appearance: button;font: inherit;}details{display: block;}summary{display: list-item;}template{display: none;}[hidden]{display: none;}



/* ==========================================================================
Webfonts
 ========================================================================== */  

@font-face { font-family: "Open Sans W01"; src: url('fonts/open-sans-v40-latin-300.woff2') format('woff2'); font-style: normal;	font-weight: 300; }
@font-face { font-family: "Open Sans W01"; src: url('fonts/open-sans-v40-latin-300italic.woff2') format('woff2');	font-style: italic; font-weight: 300; }
@font-face { font-family: "Open Sans W01"; src: url('fonts/open-sans-v40-latin-regular.woff2') format('woff2'); font-style: normal; font-weight: 400; }
@font-face { font-family: "Open Sans W01"; src: url('fonts/open-sans-v40-latin-italic.woff2') format('woff2');	font-style: italic;	font-weight: 400; }
@font-face { font-family: "Open Sans W01"; src: url('fonts/open-sans-v40-latin-700.woff2') format('woff2'); font-style: normal;	font-weight: 700; }
@font-face { font-family: "Open Sans W01"; src: url('fonts/open-sans-v40-latin-700italic.woff2') format('woff2'); font-style: italic;	font-weight: 700; }



/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,button,input,select,textarea,a { color: #231f20; }
html, body { height: 100%; -webkit-text-size-adjust: 100%; }
html { overflow-y: scroll; overflow-x: hidden;}
body { font-size: 16px; line-height: 1.5em; font-weight:400; font-family: "Open Sans W01", 'Liberation Sans', 'Nimbus Sans L', Tahoma, Geneva, 'Helvetica Neue', Helvetica, Arial, sans-serif; background: #fff; }

::-moz-selection { background: transparent; text-shadow: none; }
::selection { background: transparent; text-shadow: none; }

img { vertical-align: middle; }

:focus { outline: 0; }
:focus { outline:none; } ::-moz-focus-inner { border:0; }
a:focus { outline: none; }
a, a:hover, a:active { outline: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}

fieldset { border: 0; margin: 0; padding: 0; }
textarea { resize: vertical; }



/* ==========================================================================
   Custom icon font
   ========================================================================== */

@charset "UTF-8";

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

[data-icon]:before {
  font-family: "focus" !important; content: attr(data-icon); font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important;
  speak: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

[class^="icon-"]:before,[class*=" icon-"]:before {
  font-family: "focus" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important;
  speak: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

.icon-down:before { content: "v"; }
.icon-left:before { content: "<"; }
.icon-up:before { content: "\1d27"; }
.icon-right:before { content: ">"; }
.icon-close:before { content: "x"; }
.icon-plus:before { content: "+"; }
.icon-min:before { content: "-"; }

/* ==========================================================================
   Custom styles
   ========================================================================== */

/* elements */

p {
	font-size: 1em;
	line-height: 1.4em;
	margin: 1em 0;
}

.section {
	position: relative;
	width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.container {
	position: relative;
	margin: 0 auto;
	max-width: 960px;
	width: 100%;
}


/* arrows */

.arrow-box {
	position: absolute;
	display: block;
}

.touch #home .arrow-box, .touch #info .arrow  { display: none; }

.touch #project-slideshow .arrow-box-up, .touch #project-slideshow .arrow-box-down { display: none; }


.arrow-box-left, .arrow-box-right {
	z-index: 20;
	width: 200px;
	height: 100%;
	top: 0;
}

.arrow-box-left { left: 0}
.arrow-box-right { right: 0}

.arrow-box-up, .arrow-box-down {
	position: absolute;
	display: block;
	z-index: 15;
	left: 0;
	width: 100%;
	height: 100px;
}

.arrow-box-down { bottom: 0 }

.arrow {
	position: absolute;
    display: block;  
    width: 40px;
    height: 40px;
    padding: 0;  
    z-index: 10;   
    background: transparent;
    font-size: 1.25em;
    line-height: 1em;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border: 2px solid #000;
    opacity: 1;
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; 
    -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;
	-webkit-transition: opacity 0.3s ease;
	-moz-transition: opacity 0.3s ease;
	-ms-transition: opacity 0.3s ease; 
	-o-transition: opacity 0.3s ease;
	transition: opacity 0.3s ease;
}

.section-home .arrow { color: #fff; border-color: #fff; display:none; }
.section-home.colour-black .arrow { color: #231f20; border-color: #231f20; display:none; } 
.section-home.loaded .arrow { display:block; }


.no-touch .section-home .arrow-box .arrow, .no-touch .section-project .arrow-box .arrow { opacity: 0; }
.section-home .arrow-box:hover .arrow, .section-home .arrow-box.active .arrow, .section-project .arrow-box:hover .arrow, .section-project .arrow-box.active .arrow  { opacity: 1; }

.section-projects .arrow, .section-search .arrow { display:none !important; }

.no-slideshow .arrow-box-left, .no-slideshow .arrow-box-right { display:none !important; }


.arrow-down, .arrow-up { left: 50%; margin: 0 0 0 -20px; }
.arrow-down { bottom: 20px; }
.arrow-up { top: 20px; }

.arrow-left, .arrow-right { top: 50%; margin: -20px 0 0 0; }
.arrow-left { left: 20px; }
.arrow-right { right: 20px; }

.arrow > span { display: inline-block; height: 24px; line-height: 26px;  overflow: hidden; margin: 8px 0 0 1px; }

.arrow-left span { margin: 7px 2px 0 0; }
.arrow-right span { margin: 7px 0 0 2px; }
.arrow-up span { margin: 6px 0 0 1px; }


/* mobile menu */

#nav {
	display: none;
	position: fixed;
 	background: #fafafa;
    border-bottom: 1px solid #ededed;
    box-sizing: border-box;
    height: auto;
    margin: 0 auto;
	height: 40px;
    position: fixed;
    width: 100%;
    z-index: 90;	
}


/* MOBILEMENU RULE */
.touch #nav { display:block; }
.touch #header h1 { display: none !important; }

@media only screen and (max-width: 768px) { 
	#nav { display:block; }
	#header h1 { display: none !important; }
}


.logo {
	display: block;
	position: absolute;
	left: 10px;
	top: 4px;
	width: 30px;
	height: 30px;	
	background-image: url('images/logo-small.png');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 30px 18px;
}

.menu {
	position: absolute;
	right: 8px;		
}

.menu ul {
	list-style: none;
	text-align: right;
	margin: 6px 4px 0 0;
	padding: 0;
}

.menu ul li {
	display: inline-block;
	margin: 0 0 0 8px;
}

.menu ul li a {
	text-decoration: none;
	font-size: 0.750em;
	line-height: 1;
	text-transform: uppercase;
}



/* page home */

.section-home {
	background: #fff;
}

#header {
	position: absolute;
	margin: 0;
	padding: 80px 20px;
    width: 100%;
    height: auto;
    color: #fff;
    background: transparent;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 9;
    top: 50%;
    left: 0;
    opacity: 0;
    -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);
	-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
	-webkit-transition: opacity 0.8s ease 1s; -moz-transition: opacity 0.8s ease 1s; -ms-transition: opacity 0.8s ease 1s; -o-transition: opacity 0.8s ease 1s; transition: opacity 0.8s ease 1s;
}

.colour-black #header {
	color: #231f20;
}

#header .container {
	max-width: 620px;
	width: 100%;
	text-align: center;
}

h1 {
	display: block;
	position: relative;
	width: 100%;
	max-width: 620px;
	height: 0;
	margin: 0;
	line-height: 2;
	margin: 0 0 58px 0;
	padding: 8.7% 0 0 0;
	text-decoration: none;
	
	/*background-image: url('images/logo.png');*/
}

h1 div {
	position: absolute;
	top: 0;
	left: 0;
	display: none;
	width: 100%;
	height: 100%;
	background-color: transparent;	
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.colour-white h1 div.logo-white {
	display: block;
}

.colour-black h1 div.logo-black {
	display: block;
}

#header .baseline {
	position: relative;
	width: auto;
	font-style: italic;
	font-size: 1em;
	font-weight: 400;
	display: inline-block;
	border-bottom: 1px solid #fff;
	margin: 0;
	padding: 0 0 16px 0;
}

#header .container:before {
	position: absolute;
	display: block;
	width: 150%;
	height: 150%;
	top: -25%;
	left: -25%;
	background-color: rgba(0,0,0,0.3);
	filter: blur(40px);
	border-radius: 50%;
	content: "";
}

.colour-black #header .container:before {
	background-color: rgba(255,255,255,0.4);
}

.colour-black #header .baseline {
	border-bottom: 1px solid #231f20;
}

#header .baseline span {
	position: relative;
	display: inline-block;
}

#header .baseline span:before, #header .baseline span:after {
	position:absolute;
	top: 50%;
	height: 1px;
	width: 100px;
	content: "";
	background: #fff;
}

.colour-black #header .baseline span::before, .colour-black #header .baseline span::after {
	background: #231f20;
}


#header .baseline span:before { right: 100%; margin: 2px 8px 0 0; }
#header .baseline span:after { left: 100%; margin: 2px 0 0 8px; }


#header .baseline strong {
	display: block;
	font-family: "pt-serif", Georgia,Times,'Times New Roman',serif;
	font-size: 2em;
	font-style: normal;
	line-height: 1em;
	font-weight: 700; 
	text-transform: uppercase;
	padding: 6px 2px;
}

.img {
	position: relative;
	width: 100%;
	height: 0;
	overflow: hidden;
}

.img img {
	position: absolute;
	top: 0;
	left: 0;
	/*-webkit-backface-visibility: hidden;*/
}


#home-slider {
	position: relative;
	width: 100%;
	height: 100%;
}

#home-slider .slide {
	position: relative;
	height: 100%;
	width: 100%;
	background-color: #fff;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	opacity: 0;
	/*-webkit-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
	-webkit-transform: translate3d(0px, 0px, 0px);*/
	-webkit-transition: opacity 0.3s ease 0.1s;
	-moz-transition: opacity 0.3s ease 0.1s;
	-ms-transition: opacity 0.3s ease 0.1s; 
	-o-transition: opacity 0.3s ease 0.1s;
	transition: opacity 0.3s ease 0.1s;
}


#home-slider .slide.lazy-home {
	display: none;
}


/* page info */

.section-info .container {
	position: relative;
	margin: 0 auto;
	padding: 60px 20px;
    width: 100%;
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
    top: 50%;
    text-align: center;
    -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%);	-o-transform: translateY(-50%);	transform: translateY(-50%);
	-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

.touch .section-info .container {
	padding: 60px 20px 40px 20px;
}

.section-info h2 {
	font-size: 1em;
	font-weight: 400;
	line-height: 1.5em;
	margin: 1em auto;
	width: 210px;
	overflow: hidden;
}

.section-info h2 span {
	position: relative;
	display: inline-block;
}

.section-info h2 span:before, .section-info h2 span:after {
	position:absolute;
	top: 50%;
	height: 1px;
	width: 100px;
	content: "";
	background: #231f20;
}

.section-info h2 span:before { right: 100%; margin: 1px 8px 0 0; }
.section-info h2 span:after { left: 100%; margin: 1px 0 0 8px; }


.section-info ul {
	position: relative;
	padding: 0;
	margin: 0 auto;
	list-style: none;
	width: 100%;
	max-width: 380px;
	
}

.section-info ul li {
	margin: 8px 0;
	font-size: 1em;
	line-height: 1.4em;
	margin: 1em 0;
}

.section-info p strong {
	font-family: "pt-serif", Georgia,Times,'Times New Roman',serif;
	font-size: 2em;
	font-style: normal;
	line-height: 1em;
	font-weight: 700; 
}

.section-info p a {
	text-decoration: none;
}

.section-info p:after {
	display: block;
	margin: 0 auto;
	content: "";
	width: 210px;
	margin: 20px auto 0 auto;
	height: 1px;
	background: #231f20;
}

.section-info p:first-of-type:after {
	display: none;
}

/* 
 *	footer 
 *
 */

#footer {
	position: relative;
	margin: 0 auto;
	padding: 0;
    height: 80px;
    width: 100%;
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box;      
}

#footer p {
	font-size: 0.750em;
	line-height: 80px;
	text-align: center;
	margin: 0;
}


/*
 * image pan
 *
 */

.pan-box {
	position:fixed;
	display: none;
	height: 100%;
	width: 100%;
	background-color: #fafafa;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	overflow:hidden;
	z-index: 40;
}

.pan-box.active {
	display: block;
}


/*
.pan-box img{
  transition: opacity .6s linear .8s;
  width: 100%;
   height: auto;
}

.pan-box img.loaded{ opacity: 1; }

.img-pan-container, .img-pan-container image{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.img-pan-container{
  position: relative;
  overflow: hidden;
  cursor: crosshair;
  height: 100%;
  width: 100%;
  margin: 0 auto;
}

.img-pan-container .image{
  -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0);
  position: absolute;
  top: 0;
  left: 0;
  width: 1000px;
  height:1250px;
}
*/

#project-slideshow .slide > span, #search-slideshow .slide > span { cursor: -moz-zoom-in; cursor: -webkit-zoom-in; cursor: zoom-in; }


/*
 * projects
 *
 */
 
 
.section-projects {
	height: auto;
	padding: 80px 15px 50px 15px;
	-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

.section-projects .container {
	max-width: 1980px;
}

#project-slideshows {
	display: none;	
}	

#project-slideshow, #search-slideshow {	
	position: fixed;
	display: none;
	width: 100%;
	height: 100%;  
	left: 0;
	top:0;
	background: #fff;
	z-index: 999;
	-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

#project-slideshow .project-slider, #search-slideshow .project-slider {
	height: 100%;
}

#project-slideshow .project-slider {
	display: none;
}

#project-slideshow .close, #search-slideshow .close, .pan-box-close {
	position: absolute;
    display: block;  
    width: 40px;
    height: 40px;
    padding: 0;     
    background: transparent;
    font-size: 1.5em;
    line-height: 1em;
    text-align: center;
    text-decoration: none;
    z-index: 30;
    color: #231f20;
    top: 20px;
    right: 20px;
}

#project-slideshow .close > span, #search-slideshow .close > span, .pan-box-close > span { display: inline-block; height: 25px; line-height: 27px;  overflow: hidden; margin: 8px 0 0 0; }


#project-slideshow .container, #search-slideshow .container {
	width: 100%;
	height: 100%;
	max-width: 5000px;
	position: absolute;
	top: 0;
	left: 0;	
}

.project-slider .description {
	position: absolute;
	right: 0;
	top: 0;
	z-index: 25;
	height: 80px;
	width: 80px;
	background: transparent;
}

.project-slider .description.active { background:#fff; width: 100%; height: 100%; }

.trigger {
	position: absolute;
    display: block;  
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    font-size: 1.5em;
    line-height: 1em;
    text-align: center;
    text-decoration: none;
    z-index: 20;
    color: #000;
    top: 60px;
    right: 20px;
}

.trigger span { display: inline-block; height: 25px; line-height: 27px;  overflow: hidden; margin: 8px 0 0 0; }

.project-slider .description.active .trigger span:before { content:'-'}


.project-slider .description .description-container {
	position: relative;
	margin: 0 auto;
	padding: 60px 0;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    top: 50%;
    text-align: center;
    -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%);	-o-transform: translateY(-50%);	transform: translateY(-50%);
	-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
	display: none;
}

.project-slider .description.active .description-container {
	display: block;
}



.project-slider .description-active .description-container {
	display: block;
}

.project-slider.active .trigger span:before { content:'-'}


.project-slider.active .description { background:#fff; width: 100%; height: 100%; }

.project-slider .description h3 {
	font-family: "pt-serif", Georgia,Times,'Times New Roman',serif;
	font-size: 2em;
    font-style: normal;
    font-weight: 700;
    line-height: 1em;
	margin: 20px 0;
}

.project-slider .description .content {
	position: relative;
}


#project-slideshow .slide, #search-slideshow .slide {
	position: relative;
	height: 100%;
	width: 100%;
	background-color: #fff;
}

#project-slideshow .slide > span, #search-slideshow .slide > span {
	display: block;
	position: relative;
	height: 100%;
	width: 100%;
	background-color: #fff;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	/*-webkit-backface-visibility: hidden; */
/*    -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(0px, 0px, 0px); -webkit-transform: translateZ(0) scale(1.0, 1.0); */
}

.thumbnail {
	position: relative;
	float: left;
	width: 25%;
	padding: 0 15px;
	height: auto;
	margin: 0 0 30px 0;
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}

.thumbnail > span {
	display: block;
	position: relative;
	width: 100%;
	height: 0;
	padding: 100% 0 0 0;
}

.thumbnail > span > a {
	position: absolute;
	display: block;
	color: #fff;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	overflow: hidden;
	text-decoration: none;
}

.thumbnail > span > a > img {
	position: relative;
	opacity: 0;
	-webkit-transition: opacity 400ms ease; -moz-transition: opacity 400ms ease; -ms-transition: opacity 400ms ease; -o-transition:opacity 400ms ease; transition: opacity 400ms ease;
	-webkit-backface-visibility: hidden;
}

.thumbnail > span > a > img.b-loaded {
	opacity: 1;
}

.thumbnail a .title-box {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	padding: 15px;
	color: #231f20; 
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
	text-align: center;
	height: auto;
	opacity: 0;
	-webkit-transform: translateY(200%); -moz-transform: translateY(200%); -ms-transform: translateY(200%);	-o-transform: translateY(200%);	transform: translateY(200%);
	-webkit-transition: -webkit-transform 400ms ease,  opacity 400ms ease; -moz-transition: -moz-transform 400ms ease,  opacity 400ms ease; -ms-transition: -ms-transform 400ms ease,  opacity 400ms ease; -o-transition: -o-transform 400ms ease,  opacity 400ms ease; transition: transform 400ms ease,  opacity 400ms ease;	
}

.thumbnail a:hover .title-box, .touch .thumbnail a .title-box {
	-webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%);	-o-transform: translateY(-50%);	transform: translateY(-50%);
	opacity: 1;
}


.thumbnail > span > a:hover > img, .touch .thumbnail > span > a > img {
	opacity: 0.2;
}

.touch .thumbnail > span > a > img {
	opacity: 0.5;
}


.thumbnail h3 {
	font-family: "pt-serif", Georgia,Times,'Times New Roman',serif;
	font-size: 1.75em;
	font-style: normal;
	line-height: 1em;
	font-weight: 700;
	margin: 0; 
}

.thumbnail p {
	margin: 0;
	padding: 10px;
}

#project-slideshow .project-slider p, #search-slideshow .project-slider p {
	font-size: 1em;
    line-height: 1.4em;
    margin: 1em 0;
}


/*  SLICK  */

/* Slider */

.slideshow {
	position: relative;
	width: 100%;
	height: 100%;
}

.slick-slider {
    position: relative;
    display: block;
    -moz-box-sizing: border-box; box-sizing: border-box;
    -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none;  -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
    z-index: 1;
}

.slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    padding: 80px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    
}

#home-slider .slick-list { padding: 0; }

.slick-list:focus { outline: none; }
.slick-list.dragging { cursor: pointer; cursor: hand; }

.slick-slider .slick-track, .slick-slider .slick-list {
   /* -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);*/
         /*   transform: translate3d(0, 0, 0); */
}

.slick-track {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}
.slick-track:before, .slick-track:after { display: table; content: ''; }
.slick-track:after { clear: both; }
.slick-loading .slick-track { visibility: hidden; }

.slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}

.slick-slide img { display: block; }
.slick-slide.slick-loading img { display: none; }

.slick-slide.dragging img { pointer-events: none; }
.slick-initialized .slick-slide { display: block; }
.slick-loading .slick-slide { visibility: hidden; }

/* Slider */
.slick-loading .slick-list
{
    background: #fff; /*url('images/ajax-loader.gif') center center no-repeat;*/
}

/
/* Arrows */
.slick-prev, .slick-next {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    display: block;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    padding: 0;
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
    color: transparent;
    outline: none;
    background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
    opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
    opacity: .25;
}

.slick-prev:before, .slick-next:before
{
    font-family: 'slick';
    font-size: 20px;
    line-height: 1;
    opacity: .75;
    color: white;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-prev {
    left: -25px;
}
.slick-prev:before
{
    content: '←';
}

.slick-next {  right: -25px; }

.slick-next:before { content: '→'; }


/* Dots */

.slick-dots {
    position: absolute;
    bottom: -45px;
    display: block;
    width: 100%;
    padding: 0;
    list-style: none;
    text-align: center;
}

.slick-dots li{
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;
    cursor: pointer;
}

.slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 20px;
    height: 20px;
    padding: 5px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}

.slick-dots li button:hover, .slick-dots li button:focus { outline: none; }
.slick-dots li button:hover:before, .slick-dots li button:focus:before { opacity: 1; }
.slick-dots li button:before {
    font-family: 'slick';
    font-size: 6px;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    content: '•';
    text-align: center;
    opacity: .25;
    color: black;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before {  opacity: .75;  color: black; }


/* pano */

.slide-pano span {
	display: none !important;
}

#panocover {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #fff;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 120px 68px;
	background-image: url('images/pano.png');
	content: ''; 
	opacity: 1;
	z-index: 2;
}

.slide-pano iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
	padding: 0;
	margin: 0;

}

/* search */
.section-search {
	margin-bottom: -80px;
	height: auto;
	padding: 80px 0;
	-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

.section-search h2 {
	font-family: "pt-serif", Georgia,Times,'Times New Roman',serif;
	font-size: 2em;
	font-style: normal;
	line-height: 1em;
	font-weight: 700; 
	text-align: center;
	margin: 0;
	padding: 0 30px;
}

#form {
	position:relative;
	width: 100%;
	margin: 30px auto;
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
    text-align: center;
	padding: 0 30px;
}

#result-box {  
	padding: 80px 15px 50px 15px;
	-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; 
}

#results {
	width: 100%;
	height: auto;
}

#results .container {
	max-width: 1980px;
}


#search-slideshow-source { display:none !important; }


/* site theme */
/* ---------- */

.twitter-typeahead {
	display: block;
	width: 100%;
}

.typeahead, .tt-query, .tt-hint {
	width: 100%;
	height: 44px;
	padding: 8px 0 12px 0;
	font-size: 1em;
	line-height: 1.4em;
	border: none;
	outline: none;
	margin: 0 auto;
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}

.typeahead {
	background-color: #fff;
	text-align: center;
	position: relative;
}

#form:before {
	position: absolute;
	bottom: 0px;
	content:"";
	max-width: 380px;
	width: 100%;
	height: 1px;
	background: #231f20; 
	left: 50%;
	z-index: 4;
	-webkit-transform: translateX(-50%); -moz-transform: translateX(-50%);	-ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%);
}

.typeahead::-moz-selection { background: #f1f1f1; text-shadow: none; }
.typeahead::selection { background: #f1f1f1; text-shadow: none; }

.tt-hint { color: transparent; }

.tt-menu {
  width: 100%;
  margin: 0 0;
  padding: 10px 0 20px 0;
  background-color: #fff;
  line-height: 1.2em;
  -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;        
}

.tt-suggestion {
  padding: 3px 20px;
  color: #ccc;
}

.tt-suggestion:hover {
  cursor: pointer;
  color: #231f20;
}

.tt-suggestion.tt-cursor {
  color: #231f20;
}

.tt-suggestion p {
  margin: 0;
}


#scrollable-dropdown-menu .tt-menu {
  max-height: 150px;
  overflow-y: auto;
}

#search-slideshow .slideshow { 
	opacity:0; 	
	-webkit-transition: opacity 0.8s ease 0.2s; -moz-transition: opacity 0.8s ease 0.2s;	-ms-transition: opacity 0.8s ease 0.2s; -o-transition: opacity 0.8s ease 0.2s;	transition: opacity 0.8s ease 0.2s;
}

#results .container > p {
	text-align: center;
}

.ptrigger {
	text-decoration: none;
	font-size: 0.875em;
}







/*
 * video
 *
 */

.vjs-default-skin {
  color: #fff;
  z-index: 2;
}
.vjs-default-skin .vjs-control-bar {
  display: none;
}

.vjs-default-skin .vjs-big-play-button {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -25px 0 0 -25px;
  width: 50px;
  height: 50px;
  font-size: 1.5em; 
  background-color: #07141e;
  background-color: rgba(7, 20, 30, 0.3);
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  opacity: 1;
  border: 3px solid #fff;
  -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;
  -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; 
  -webkit-box-shadow: 0px 0px 18px -5px rgba(0,0,0,0.7);
  -moz-box-shadow: 0px 0px 18px -5px rgba(0,0,0,0.7);
  box-shadow: 0px 0px 18px -5px rgba(0,0,0,0.7);
  z-index: 5;
}

.vjs-default-skin .vjs-big-play-button:before {
  position: absolute;
  content: ">";
  font-family: 'focus';
  text-align: center;
  color: #fff;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; 
  padding: 10px 0 0 4px;
}

.vjs-default-skin:before, .vjs-default-skin:after {
	background: #fff;
	content: '';
	width: 100%;
	height: 60%;
	position:absolute;
	z-index: 2;
	left: 0;
	display: none;
}

.vjs-default-skin:before {
	top: 0;
}

.vjs-default-skin:after {
	bottom: 0;
}

.vjs-default-skin.vjs-has-started:before, .vjs-default-skin.vjs-has-started:after {
	display: block;
}

.vjs-default-skin.vjs-ended:before, .vjs-default-skin.vjs-ended:after { display: none; }

.vjs-default-skin.vjs-has-started .vjs-big-play-button { display: none; }


.vjs-default-skin.vjs-has-started.vjs-paused .vjs-big-play-button { display: block; }
.vjs-default-skin.vjs-has-started.vjs-ended .vjs-big-play-button { display: block; }

.vjs-default-skin.vjs-has-started.vjs-ended video { display: none; }


.vjs-default-skin .vjs-big-play-button:hover, .vjs-default-skin .vjs-big-play-button:focus { }

.vjs-error .vjs-big-play-button { display: none; }


/* Loading Spinner
--------------------------------------------------------------------------------
*/
.vjs-loading-spinner {
  /* Should be hidden by default */
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 4em;
  line-height: 1;
  width: 1em;
  height: 1em;
  margin-left: -0.5em;
  margin-top: -0.5em;
  opacity: 0.75;
}
/* Show the spinner when waiting for data and seeking to a new time */
.vjs-waiting .vjs-loading-spinner,
.vjs-seeking .vjs-loading-spinner {
  display: none;
  /* only animate when showing because it can be processor heavy */
  /* animation */
  -webkit-animation: spin 1.5s infinite linear;
  -moz-animation: spin 1.5s infinite linear;
  -o-animation: spin 1.5s infinite linear;
  animation: spin 1.5s infinite linear;
}

.vjs-default-skin .vjs-loading-spinner:before {
  content: "\e01e";
  font-family: VideoJS;
  position: absolute;
  top: 0;
  left: 0;
  width: 1em;
  height: 1em;
  text-align: center;
  text-shadow: 0em 0em 0.1em #000;
}
@-moz-keyframes spin {
  0% {
    -moz-transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(359deg);
  }
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
  }
}
@-o-keyframes spin {
  0% {
    -o-transform: rotate(0deg);
  }
  100% {
    -o-transform: rotate(359deg);
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}

.video-js {
  background-color: transparent;
  position: relative;
  padding: 0;
  -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
  width: 100% !important;
  height: 100% !important; 
}
.video-js .vjs-tech { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 3}
.video-js:-moz-full-screen { position: absolute; }
.vjs-hidden { display: none !important; }
.vjs-lock-showing { display: block !important;  opacity: 1; visibility: visible; }
.vjs-control-bar { display: none !important; }

.videolayer {
	position:absolute;
	margin: 0;
	width: 100%;
	height: 100% !important;
	background: transparent;
	top: 0 !important;
	left: 0;
	z-index: 1;
	overflow: hidden;
}

.videolayer.active { background: #fff; }

.videoframe { position: relative; width: 100%; height: 100%; z-index:0; }

.video { position: relative; width: 100%; height: 100%; }

.fluid-width-video-wrapper { padding: 0; position: relative; width: 100%; }

.fluid-width-video-wrapper iframe, .fluid-width-video-wrapper object, .fluid-width-video-wrapper embed { position: absolute; left: 0; top: 0; height: 100%; width: 100%; }



/* zoom container */

#imgContainer { width: 100%;	height: 100%; }

#imageFullScreen { opacity: 0; 	-webkit-transition: opacity 0.4s ease; -moz-transition:  opacity 0.4s ease;	-ms-transition:  opacity 0.4s ease; -o-transition:  opacity 0.4s ease;	transition:  opacity 0.4s ease; }	
#imageFullScreen.loaded { opacity: 1; }

.positionMapClass area {	cursor: pointer; }

.zoomButton{ border:0; cursor: pointer; }

.zoomableContainer { background-image: #fff; }


/* admin bar */
.customize-support { margin-top: 32px; }
#wp-admin-bar-wp-logo, #wp-admin-bar-customize, #wp-admin-bar-updates, #wp-admin-bar-comments, #wp-admin-bar-new-content, #wp-admin-bar-site-name .ab-sub-wrapper, #wp-admin-bar-search { display: none !important; }


/* ==========================================================================
   Helper classes
   ========================================================================== */

/* Image addaptive */
.ia { border: 0; width: 100%; height: auto; }

/* Image replacement */
.ir { background-color: transparent; border: 0; overflow: hidden; } .ir:before { content: ""; display: block; width: 0; height: 100%; }

/*Hide from both screenreaders and browsers */
.hidden { display: none !important; visibility: hidden; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* Clearfix: contain floats */
.cf:before, .cf:after { content: " "; display: table; }
.cf:after { clear: both; }


/* ==========================================================================
   Media queries
   ========================================================================== */

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2),only screen and (min-device-pixel-ratio: 1.5) {
	
	.logo { background-image: url('images/logo-small-2x.png'); }

}

@media only screen and (min-width: 1651px) { 
	
	.thumbnail { width: 16.666%; }

}

@media only screen and (max-width: 1650px) { 
	
	.thumbnail { width: 20%; }

}

@media only screen and (max-width: 1320px) { 
	
	.thumbnail { width: 25%; }

}

@media only screen and (max-width: 1050px) { 
	
	.thumbnail { width: 33.333%; }

}

@media only screen and (max-width: 1024px) { 
	
	.slick-list { padding: 60px 30px 30px 30px }
	#project-slideshow .close, #search-slideshow .close, .pan-box-close {  top: 10px; }
	.trigger { top: 10px; right: 60px; }
		
	#search-slideshow .arrow-box-left, #search-slideshow .arrow-box-right, #project-slideshow .arrow-box-left, #project-slideshow .arrow-box-right { width: 40px; height: 40px; left: auto; top:10px; display: block; }
	
	#search-slideshow .arrow-box-left, #project-slideshow .arrow-box-left { right: 130px;}		
	#search-slideshow .arrow-box-right, #project-slideshow .arrow-box-right { right: 100px;}
	
	#search-slideshow .arrow-left, #search-slideshow .arrow-right, #project-slideshow .arrow-right, #project-slideshow .arrow-left {  border: none; opacity: 1 !important; left: auto; right: auto; top: 2px; margin: 0; font-size: 1.4em; }		
	
}


@media only screen and (max-width: 810px) { 
	
	.section-projects, #result-box { padding: 80px 10px 50px 10px; }
	
	.thumbnail { margin: 0 0 20px 0; padding: 0 10px; }
	.thumbnail h3 { font-size: 1.5em;  }
	.thumbnail p { font-size: 0.938em;  }
	
}

@media only screen and (max-width: 700px) { 
	
	.thumbnail { width: 50%; }

}

@media only screen and (max-width: 650px) { 
	
	.slick-list { padding: 40px 0px 5px 0px }
	#project-slideshow .close, #search-slideshow .close, .pan-box-close {  top: 0; right: 0; }
	.trigger { top: 0; right:30px; }
	
	#search-slideshow .arrow-box-left, #search-slideshow .arrow-box-right, #project-slideshow .arrow-box-left, #project-slideshow .arrow-box-right { width: 40px; height: 40px; left: auto; top:0; display: block; }
	
	#search-slideshow .arrow-box-left, #project-slideshow .arrow-box-left { right: 100px;}		
	#search-slideshow .arrow-box-right, #project-slideshow .arrow-box-right { right: 70px;}
	
	.arrow-left, .arrow-right {  border: none; opacity: 1 !important; left: auto; right: auto; top: 2px; margin: 0; font-size: 1.4em; }		
	
}


@media only screen and (max-width: 480px) { 
	
	.thumbnail { width: 100%; }
	.thumbnail > span { padding: 50% 0 0 0; }
	.thumbnail > span > a > img { margin: -25% 0 0 0; }
}



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

	#header .baseline strong, .section-info p strong {
		font-size: 1.5em;
		line-height: 1em;
	}
}

@media only screen and (max-width: 400px) { 
	
	.section-projects, #result-box { padding: 80px 0 50px 0; }
	
	.thumbnail { margin: 0 0 20px 0; padding: 0; }
	.thumbnail h3 { font-size: 1.5em;  }
	.thumbnail p { font-size: 0.938em;  }
}	
	

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

	.thumbnail > span { padding: 60% 0 0 0; }
}

/* make the project description scrollable */
/*
.project-slider .description .trigger {
	position: fixed;
}

.project-slider .description {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	overflow: auto;
}

.project-slider .description .description-container {
	padding-left: 40px;
	padding-right: 40px;
	max-width: 880px;
	
	top: auto;
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
	transform: translateY(0);
	
}
*/

