@charset "utf-8";
html{font-family:sans-serif;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;}
body,div,dl,dt,dd,p,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,blockquote,form{margin:0;padding:0;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;margin:0;padding:0;}
ul,ol{list-style:none;}
img,a img{border:none;}
a:link,a:visited{background:transparent;text-decoration:none;}
a:active,a:hover {outline:0;}
a[x-apple-data-detectors]{color:inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; }
table{border-collapse:collapse;border-spacing:0;}
label,button{cursor:pointer;}
input,textarea,select{font-family:inherit;font-size:inherit;padding:0;margin:0;vertical-align:middle;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
input, textarea, button, select, label, a { -webkit-tap-highlight-color: rgba(0,0,0,0); tap-highlight-color: transparent; }
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
input[type=number]{-webkit-appearance: textfield;-moz-appearance: textfield;appearance: textfield;}
button, input[type=submit], input[type=password] { -webkit-appearance: none; border-radius: 0; }
textarea, input[type=text], input[type=email], input[type=tel], input[type=url], input[type=search] { -webkit-appearance: none; border-radius: 0; }
.anchor {display:block;position:relative;visibility:hidden;padding-top: 40px; margin-top: -40px;}

::-moz-selection { background-color: #FF9100; color: #FFF; }
::selection { background-color: #FF9100; color: #FFF; }

@font-face { font-family: 'SctoGrotesk'; src: url('Scto-Grotesk-Light.eot'); src: url('Scto-Grotesk-Light.eot?#iefix') format('embedded-opentype'), url('Scto-Grotesk-Light.woff') format('woff'); font-weight: 300; font-style: normal; font-stretch: normal; }
@font-face { font-family: 'SctoGrotesk'; src: url('Scto-Grotesk-Regular.eot'); src: url('Scto-Grotesk-Regular.eot?#iefix') format('embedded-opentype'), url('Scto-Grotesk-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-stretch: normal; }
@font-face { font-family: 'SctoGrotesk'; src: url('Scto-Grotesk-Medium.eot'); src: url('Scto-Grotesk-Medium.eot?#iefix') format('embedded-opentype'), url('Scto-Grotesk-Medium.woff') format('woff'); font-weight: 500; font-style: normal; font-stretch: normal; }
@font-face { font-family: 'SpotMono'; src: url('Spot-Mono-Regular.eot'); src: url('Spot-Mono-Regular.eot?#iefix') format('embedded-opentype'), url('Spot-Mono-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-stretch: normal; }
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fadein { opacity:0;-webkit-animation:fadeIn ease-in 1;-moz-animation:fadeIn ease-in 1;animation:fadeIn ease-in 1;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-duration:0.5s;-moz-animation-duration:0.5s;animation-duration:0.5s; }
.hidden { opacity: 0; }
.inview { opacity: 1; -webkit-transition: opacity 800ms; -o-transition: opacity 800ms; transition: opacity 800ms; }

html 			{ }
body 			{ background-color: #F7F8F9; color: #111; font-family: "SctoGrotesk", sans-serif; font-size: 20px; line-height: 1; }
.page-layout	{ padding-top: 100px;  }
.outer 			{ margin: 0 auto; max-width: 1600px; padding: 0 80px; position: relative; }
.inner 			{ margin: 0 auto; max-width: 1440px; padding: 0 80px; position: relative; }
.clear:after	{ clear: both; content: ""; display: table; }

.half { width: 47.5%; }
.third { width: 30%; }
.two-thirds { width: 65%; }

/* CONTENT
-------------------------------------------------------------------------------------------------*/
h1 { color: #111; font-size: 80px; font-family: "SctoGrotesk", sans-serif; font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 20px; }
h2 { color: #111; font-size: 50px; font-family: "SctoGrotesk", sans-serif; font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 20px; }
h3 { color: #111; font-size: 45px; font-family: "SctoGrotesk", sans-serif; font-weight: 300; letter-spacing: 0; line-height: 1.2; margin: 0 0 20px; }
h4 { color: #111; font-size: 35px; font-family: "SctoGrotesk", sans-serif; font-weight: 500; letter-spacing: 0; line-height: 1.2; margin: 0 0 20px; }
h5 { color: #888; font-size: 30px; font-family: "SctoGrotesk", sans-serif; font-weight: 400; letter-spacing: 0; line-height: 1.3; margin: 0 0 20px; }
h6 { color: #111; font-size: 25px; font-family: "SctoGrotesk", sans-serif; font-weight: 500; letter-spacing: 0; line-height: 1.2; margin: 0 0 10px; }
h6.sub { color: #888; font-size: 13px; font-family: "SctoGrotesk", sans-serif; font-weight: 500; letter-spacing: 0.08em; line-height: 1.2; margin: 0 0 10px; text-transform: uppercase; }
h6.blockquote { color: #888; font-size: 16px; font-family: "SctoGrotesk", sans-serif; font-weight: 400; line-height: 1.6; margin: 0 0 10px; }

h2 + h3, h2 + h4, h2 + h5, h2 + h6 { margin-top: -10px; }
h3 + h4, h3 + h5, h3 + h6 { margin-top: -10px; }
h4 + h5, h4 + h6 { margin-top: -10px; }

.page-content a				{ color: #111; text-decoration: underline; }
.page-content a:hover		{ color: #888; text-decoration: underline; }
.page-content a:hover,
.page-content button:hover  { -moz-transition: opacity .1s ease-out; -o-transition: opacity .1s ease-out; -webkit-transition: opacity .1s ease-out; transition: opacity .1s ease-out; }

.page-content a[href^="tel:"] { color: #111; text-decoration: none; }

.page-content .button		{ background-color: transparent; border: 1px solid #888; color: #888; display: inline-block; font-family: "SctoGrotesk", sans-serif; font-size: 14px; font-weight: 500; letter-spacing: 0.1em; line-height: 40px; padding: 0 50px; min-width: 200px; text-align: center; text-decoration: none; text-transform: uppercase; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.page-content .button:hover	{ border-color: #111; color: #111; text-decoration: none; }
.page-content .button-plain { border: none; min-width: 0; padding: 0; }
.page-content .button-plain span { opacity: 0.5; }
.page-content .button-plain:hover { border: none; min-width: 0; padding: 0; }
.page-content .button-plain:hover span { opacity: 1; }

.page-content p				{ font-size: 20px; line-height: 1.5; margin: 0 0 30px; }
.page-content ul, 
.page-content ol			{ font-size: 20px; line-height: 1.5; margin: 0 0 30px 20px; }
.page-content ul ul,
.page-content ul ol,
.page-content ol ol,
.page-content ol ul 		{ font-size: 100%; margin: 5px 0 5px 30px; }
.page-content ul 			{ list-style-type: disc; }
.page-content ul ul 		{ list-style-type: circle; }
.page-content ul ul ul 		{ list-style-type: square; }
.page-content ol 			{ list-style-type: decimal; }
.page-content ol ol 		{ list-style-type: lower-alpha;	}
.page-content ol ol ol		{ list-style-type: lower-roman; }
.page-content li			{ margin-bottom: 5px; }

.page-content blockquote { margin: 0 auto 30px; text-align: center; }
.page-content blockquote p { color: #888; font-size: 35px; font-family: "SctoGrotesk", sans-serif; font-weight: 300; line-height: 1.3; margin: 0; }
.page-content blockquote p span { opacity: 0.5;}
.page-content blockquote footer { color: #888; font-size: 14px; font-family: "SctoGrotesk", sans-serif; font-weight: 500; letter-spacing: 0.05em; line-height: 1.2; margin: 20px 0 0; text-transform: uppercase; }

.page-content figcaption p { color: #888; font-family: "SpotMono", monospace; font-size: 15px; }
.page-content figcaption p a { color: #888; }
.page-content figcaption p a:hover { color: #111; }

.page-content figure:last-child,
.page-content p:last-child,
.page-content ol:last-child,
.page-content ul:last-child{ margin-bottom: 0; }
.page-content h1:only-child,
.page-content h2:only-child,
.page-content h3:only-child,
.page-content h4:only-child,
.page-content h5:only-child,
.page-content h6:only-child,
.page-content figure:only-child,
.page-content p:only-child,
.page-content ol:only-child,
.page-content ul:only-child{ margin-bottom: 0; }

form { margin: 20px 0; }
label { display: block; color: #888; font-size: 15px; font-family: "SctoGrotesk", sans-serif; font-weight: 500; letter-spacing: 0.05em; line-height: 1.2; margin: 0 0 10px; text-transform: uppercase; }
input { background: #DDD; border: none; color: #444; display: block; font-family: "SpotMono", monospace; font-size: 16px; height: 40px; margin-bottom: 20px; padding: 0 10px; width: 100%; box-sizing: border-box; }
select { background: #DDD; border: none; color: #444; display: block; font-family: "SpotMono", monospace; font-size: 16px; height: 40px; margin-bottom: 20px; padding: 0 10px; width: 100%; box-sizing: border-box; }
textarea { background: #DDD; border: none; color: #444; display: block; font-family: "SpotMono", monospace; font-size: 16px; height: 120px; margin-bottom: 20px; padding: 10px; width: 100%; box-sizing: border-box; }
input:focus,
input:hover,
select:focus,
select:hover,
textarea:focus,
textarea:hover { background: #EEE; color: #111; outline-style: none; box-shadow: none; }

form button { background-color: transparent; border: 1px solid #888; color: #888; font-family: "SctoGrotesk", sans-serif; font-size: 14px; font-weight: 500; letter-spacing: 0.1em; line-height: 40px; padding: 0; width: 100%; text-align: center; text-decoration: none; text-transform: uppercase; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
form button:hover { border: 1px solid #111; color: #111; }
form button:disabled,
form button.disabled { opacity: 0.8; cursor: default; }

.g-recaptcha { margin-bottom: 20px; }

.pagination            { margin: 30px auto; text-align: center; }
.pagination span       { background-color: rgba(0,0,0,0.05); color: rgba(0,0,0,0.5); display: inline-block; font-size: 14px; line-height: 30px; margin: 5px; width: 30px; }
.pagination a          { background-color: rgba(0,0,0,0.05); color: #111; display: inline-block; line-height: 30px; text-decoration: none; width: 30px; }
.pagination a:hover    { opacity: 0.75; text-decoration: none; }

/* HEADER
------------------------------------------------------------------------------------------------------------------------------------------------------*/
.page-header a { -moz-transition: opacity .1s ease-out; -o-transition: opacity .1s ease-out; -webkit-transition: opacity .1s ease-out; transition: opacity .1s ease-out; }
.page-header { border-bottom: 1px solid rgba(255,255,255,0.2); height: 99px; width: 100%; position: fixed; top: 0; left: 0; z-index: 1000; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.page-header .outer { padding-top: 30px; padding-bottom: 30px; }
.page-header nav { float: left; height: 40px; line-height: 40px; margin-left: 40px; }
.page-header a.logo { display: block; float: left; height: 22px; width: auto; padding: 8px 0 10px; text-decoration: none; }
.page-header a.logo svg { height: 100%; width: auto; }
.page-header a.logo:hover { opacity: 0.8; }

.page-header i { border: solid #DDD; border-width: 0 2px 2px 0; display: inline-block; padding: 6px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); margin: 0 30px; }
.page-header span { color: #BBB; display: none; float: left; font-size: 20px; line-height: 45px; }
.page-header span a { color: #111; text-decoration: none; opacity: 0.6; }
.page-header span a:hover { opacity: 1; text-decoration: none; }

.page-header .site-nav-toggle { display: block; float: left; line-height: 1; height: 20px; padding: 10px; margin-left: -10px; }
.page-header .site-nav-toggle { background-color: transparent; border: 0; cursor: pointer; transition-property: opacity, filter; transition-duration: 0.15s; transition-timing-function: linear; font: inherit; color: inherit; text-transform: none; overflow: visible; } 
.page-header .site-nav-toggle:hover { opacity: 0.5; } 

.toggle-box { display: inline-block; height: 20px; width: 30px; position: relative; }
.toggle-inner { display: block; top: 50%; }
.toggle-inner, 
.toggle-inner::before, 
.toggle-inner::after { width: 30px; height: 2px; background-color: #FFF; position: absolute; transition-property: transform; transition-duration: 0.15s; transition-timing-function: ease; }
.toggle-inner::before,
.toggle-inner::after { content: ""; display: block; }
.toggle-inner::before { top: -8px; }
.toggle-inner::after { bottom: -8px; }
.toggle-outer .toggle-inner { transition-duration: 0.075s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.toggle-outer .toggle-inner::before { transition: top 0.075s 0.12s ease, opacity 0.075s ease; }
.toggle-outer .toggle-inner::after { transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.toggle-active .toggle-inner { transform: rotate(45deg);  transition-delay: 0.12s;  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
.toggle-active .toggle-inner::before { top: 0; opacity: 0; transition: top 0.075s ease, opacity 0.075s 0.12s ease; }
.toggle-active .toggle-inner::after { bottom: 0; transform: rotate(-90deg); transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }

.page-header-on { background-color: #FFF; border-bottom: 1px solid #DDD; }
.page-header-on a.logo svg { fill: #111; }
.page-header-on .toggle-inner, 
.page-header-on .toggle-inner::before, 
.page-header-on .toggle-inner::after { background-color: #111; }
.page-header-on span { display: block; }
.page-header-active { background-color: #FFF; border-bottom: 1px solid #DDD; }
.page-header-active a.logo svg { fill: #111; }
.page-header-active .toggle-inner, 
.page-header-active .toggle-inner::before, 
.page-header-active .toggle-inner::after { background-color: #111; }
.page-header-active span { display: block; }

/* FOOTER
------------------------------------------------------------------------------------------------------------------------------------------------------*/
.page-footer * { -moz-transition: opacity .1s ease-out; -o-transition: opacity .1s ease-out; -webkit-transition: opacity .1s ease-out; transition: opacity .1s ease-out; }
.page-footer { background-color: #111; color: #DDD; font-size: 16px; line-height: 1.5; padding: 100px 0 40px; }
.page-footer .outer { display: flex; justify-content: space-between; }
.page-footer .col { width: 22%; }
.page-footer .col h4 { color: #FFF; font-size: 20px; font-family: "SctoGrotesk", sans-serif; font-weight: 500; line-height: 1; margin: 0 0 30px; }

.page-footer .subscribe { margin-right: 20%; width: 28%; }
.page-footer .subscribe p { color: #DDD; font-size: 16px; line-height: 1.5; margin-bottom: 20px; }
.page-footer .subscribe a { color: #DDD; text-decoration: none; }
.page-footer .subscribe a:hover { color: #FFF; text-decoration: none; }
.page-footer .subscribe form { max-width: 600px; }
.page-footer .subscribe	input { background: #222; color: #888; }
.page-footer .subscribe	button { border: 1px solid #888; color: #888; }
.page-footer .subscribe	form button:hover { border: 1px solid #FFF; color: #FFF; }

.page-footer .subscribe	input::-webkit-input-placeholder { color: #888; }
.page-footer .subscribe	input::-moz-placeholder { color: #888; }
.page-footer .subscribe	input:-ms-input-placeholder { color: #888; }
.page-footer .subscribe	input:-moz-placeholder { color: #888; }

.page-footer .subscribe	input:hover { background: #262626; color: #FFF; }

.page-footer .sitemap a { display: inline-block; color: #FFF; border-bottom: 1px solid transparent; line-height: 1; padding-bottom: 3px; margin-bottom: 4px; }
.page-footer .sitemap a:hover { border-bottom: 1px solid #333; color: #888; }

.page-footer .social a { color: #FFF;  display: inline-block; line-height: 35px; padding-left: 35px; text-decoration: none; background-repeat: no-repeat; background-position: center left; background-size: 22px; }
.page-footer .social a:hover { opacity: 0.6; }

.page-footer .footer-statement { display: block; padding-top: 50px; color: #888; }

.site-footer { background-color: #111; border-top: 1px solid #222; color: #999; padding: 39px 0 38px; font-family: "SpotMono", monospace; font-size: 15px; line-height: 25px; }
.site-footer .outer { display: flex; justify-content: space-between; }
.site-footer .col { width: 22%; }
.site-footer a { color: #999; text-decoration: none; }
.site-footer a:hover { color: #FFF; text-decoration: none; }
.site-footer .logo { text-align: right; }
.site-footer .logo a { display: inline-block; height: 42px; width: 168px; margin: 0; padding: 0; text-decoration: none; }
.site-footer .logo svg { height: 100%; width: 100%; }
.site-footer .logo a:hover { opacity: 0.8; }

/* NAV
------------------------------------------------------------------------------------------------------------------------------------------------------*/
.site-nav { display: none; background-color: rgba(0,0,0,0.96); overflow-y: auto; position: fixed; top: 0; left: 0; height: 100vh; width: 100%; z-index: 999; }
.site-nav>.outer { height: calc(100vh - 400px); padding: 150px 80px 250px; }
.site-nav nav { display: flex; align-items: center; height: 100%; }
.site-nav nav ul { font-size: 70px; letter-spacing: -0.02em; line-height: 1.45; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
@media (max-height:1100px) {
	.site-nav nav ul { font-size: 60px; }
}
@media (max-height:900px) {
	.site-nav nav ul { font-size: 50px; }
}
.site-nav nav li { display: block; }
.site-nav nav a { color: #FFF; display: block; text-decoration: none; }
.site-nav nav a span { opacity: 0; padding: 0 25px; }
.site-nav nav a em { opacity: 0; font-style: normal; }
.site-nav nav ul:hover a { opacity: 0.5; }
.site-nav nav ul li.on a { opacity: 0.5; }
.site-nav nav ul li a:hover { opacity: 1; }
.site-nav nav ul li a:hover span { opacity: 1; }
.site-nav nav ul li a:hover em { opacity: 0.5; }
.site-nav .site-footer { background: transparent; position: fixed; bottom: 0; left: 0; height: 50px; width: 100%; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

/* FILTER NAV
------------------------------------------------------------------------------------------------------------------------------------------------------*/
.filter-nav { padding: 160px 0 60px; }
.filter-nav .inner { display: flex; justify-content: space-between; align-items: flex-start; }
.filter-nav nav { display: flex; justify-content: space-between; flex-wrap: wrap; padding-top: 10px; }
.filter-nav nav a { color: #111; display: block; font-size: 18px; line-height: 35px; text-decoration: none; opacity: 0.5; width: 45%; padding-right: 5%; }
.filter-nav nav a span { background: #888; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; display:inline-block; height: 10px; margin-right: 15px; width: 10px; }
.filter-nav nav a sup { opacity: 0.5; font-size: 70%; font-weight: 300; line-height: 1; padding-left: 6px; }
.filter-nav nav a:hover { color: #111; opacity: 1; text-decoration: none; }
.filter-nav nav a.on { color: #111; opacity: 1; }
.filter-nav nav a.on span { background: #111; }

/* HOME
------------------------------------------------------------------------------------------------------------------------------------------------------*/
body.vegas-container{ position:static; z-index:-2; }
.vegas-overlay{ opacity: 0.2; background: #000; }
.vegas-overlay,.vegas-slide,.vegas-slide-inner,.vegas-timer,.vegas-wrapper{position:absolute;top:0;left:0;bottom:0;right:0;overflow:hidden;border:none;padding:0;margin:0}.vegas-timer{top:auto;bottom:0;height:2px}.vegas-timer-progress{width:0;height:100%;background:#fff;-webkit-transition:width ease-out;transition:width ease-out}.vegas-timer-running .vegas-timer-progress{width:100%}.vegas-slide,.vegas-slide-inner{margin:0;padding:0;background:center center no-repeat;-webkit-transform:translateZ(0);transform:translateZ(0)}body .vegas-container{overflow:hidden!important;position:relative}.vegas-video{min-width:100%;min-height:100%;width:auto;height:auto}
body.vegas-container>.vegas-overlay,body.vegas-container>.vegas-slide,body.vegas-container>.vegas-timer{position:fixed;z-index:-1}:root body.vegas-container>.vegas-overlay,:root body.vegas-container>.vegas-slide,_::full-page-media,_:future{bottom:-76px}.vegas-transition-fade,.vegas-transition-fade2{opacity:0}.vegas-transition-fade-in,.vegas-transition-fade2-in{opacity:1}.vegas-transition-fade2-out{opacity:0}.vegas-transition-blur,.vegas-transition-blur2{opacity:0;-webkit-filter:blur(32px);filter:blur(32px)}.vegas-transition-blur-in,.vegas-transition-blur2-in{opacity:1;-webkit-filter:blur(0);filter:blur(0)}.vegas-transition-blur2-out{opacity:0}.vegas-transition-flash,.vegas-transition-flash2{opacity:0;-webkit-filter:brightness(25);filter:brightness(25)}.vegas-transition-flash-in,.vegas-transition-flash2-in{opacity:1;-webkit-filter:brightness(1);filter:brightness(1)}.vegas-transition-flash2-out{opacity:0;-webkit-filter:brightness(25);filter:brightness(25)}.vegas-transition-negative,.vegas-transition-negative2{opacity:0;-webkit-filter:invert(100%);filter:invert(100%)}.vegas-transition-negative-in,.vegas-transition-negative2-in{opacity:1;-webkit-filter:invert(0);filter:invert(0)}.vegas-transition-negative2-out{opacity:0;-webkit-filter:invert(100%);filter:invert(100%)}.vegas-transition-burn,.vegas-transition-burn2{opacity:0;-webkit-filter:contrast(1000%) saturate(1000%);filter:contrast(1000%) saturate(1000%)}.vegas-transition-burn-in,.vegas-transition-burn2-in{opacity:1;-webkit-filter:contrast(100%) saturate(100%);filter:contrast(100%) saturate(100%)}.vegas-transition-burn2-out{opacity:0;-webkit-filter:contrast(1000%) saturate(1000%);filter:contrast(1000%) saturate(1000%)}.vegas-transition-slideLeft,.vegas-transition-slideLeft2{-webkit-transform:translateX(100%);transform:translateX(100%)}.vegas-transition-slideLeft-in,.vegas-transition-slideLeft2-in{-webkit-transform:translateX(0);transform:translateX(0)}.vegas-transition-slideLeft2-out,.vegas-transition-slideRight,.vegas-transition-slideRight2{-webkit-transform:translateX(-100%);transform:translateX(-100%)}.vegas-transition-slideRight-in,.vegas-transition-slideRight2-in{-webkit-transform:translateX(0);transform:translateX(0)}.vegas-transition-slideRight2-out{-webkit-transform:translateX(100%);transform:translateX(100%)}.vegas-transition-slideUp,.vegas-transition-slideUp2{-webkit-transform:translateY(100%);transform:translateY(100%)}.vegas-transition-slideUp-in,.vegas-transition-slideUp2-in{-webkit-transform:translateY(0);transform:translateY(0)}.vegas-transition-slideDown,.vegas-transition-slideDown2,.vegas-transition-slideUp2-out{-webkit-transform:translateY(-100%);transform:translateY(-100%)}.vegas-transition-slideDown-in,.vegas-transition-slideDown2-in{-webkit-transform:translateY(0);transform:translateY(0)}.vegas-transition-slideDown2-out{-webkit-transform:translateY(100%);transform:translateY(100%)}.vegas-transition-zoomIn,.vegas-transition-zoomIn2{-webkit-transform:scale(0);transform:scale(0);opacity:0}.vegas-transition-zoomIn-in,.vegas-transition-zoomIn2-in{-webkit-transform:scale(1);transform:scale(1);opacity:1}.vegas-transition-zoomIn2-out,.vegas-transition-zoomOut,.vegas-transition-zoomOut2{-webkit-transform:scale(2);transform:scale(2);opacity:0}.vegas-transition-zoomOut-in,.vegas-transition-zoomOut2-in{-webkit-transform:scale(1);transform:scale(1);opacity:1}.vegas-transition-zoomOut2-out{-webkit-transform:scale(0);transform:scale(0);opacity:0}.vegas-transition-swirlLeft,.vegas-transition-swirlLeft2{-webkit-transform:scale(2) rotate(35deg);transform:scale(2) rotate(35deg);opacity:0}.vegas-transition-swirlLeft-in,.vegas-transition-swirlLeft2-in{-webkit-transform:scale(1) rotate(0);transform:scale(1) rotate(0);opacity:1}.vegas-transition-swirlLeft2-out,.vegas-transition-swirlRight,.vegas-transition-swirlRight2{-webkit-transform:scale(2) rotate(-35deg);transform:scale(2) rotate(-35deg);opacity:0}.vegas-transition-swirlRight-in,.vegas-transition-swirlRight2-in{-webkit-transform:scale(1) rotate(0);transform:scale(1) rotate(0);opacity:1}.vegas-transition-swirlRight2-out{-webkit-transform:scale(2) rotate(35deg);transform:scale(2) rotate(35deg);opacity:0}.vegas-animation-kenburns{-webkit-animation:kenburns ease-out;animation:kenburns ease-out}@-webkit-keyframes kenburns{0%{-webkit-transform:scale(1.5);transform:scale(1.5)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes kenburns{0%{-webkit-transform:scale(1.5);transform:scale(1.5)}100%{-webkit-transform:scale(1);transform:scale(1)}}.vegas-animation-kenburnsUp{-webkit-animation:kenburnsUp ease-out;animation:kenburnsUp ease-out}@-webkit-keyframes kenburnsUp{0%{-webkit-transform:scale(1.5) translate(0,10%);transform:scale(1.5) translate(0,10%)}100%{-webkit-transform:scale(1) translate(0,0);transform:scale(1) translate(0,0)}}@keyframes kenburnsUp{0%{-webkit-transform:scale(1.5) translate(0,10%);transform:scale(1.5) translate(0,10%)}100%{-webkit-transform:scale(1) translate(0,0);transform:scale(1) translate(0,0)}}.vegas-animation-kenburnsDown{-webkit-animation:kenburnsDown ease-out;animation:kenburnsDown ease-out}@-webkit-keyframes kenburnsDown{0%{-webkit-transform:scale(1.5) translate(0,-10%);transform:scale(1.5) translate(0,-10%)}100%{-webkit-transform:scale(1) translate(0,0);transform:scale(1) translate(0,0)}}@keyframes kenburnsDown{0%{-webkit-transform:scale(1.5) translate(0,-10%);transform:scale(1.5) translate(0,-10%)}100%{-webkit-transform:scale(1) translate(0,0);transform:scale(1) translate(0,0)}}.vegas-animation-kenburnsLeft{-webkit-animation:kenburnsLeft ease-out;animation:kenburnsLeft ease-out}@-webkit-keyframes kenburnsLeft{0%{-webkit-transform:scale(1.5) translate(10%,0);transform:scale(1.5) translate(10%,0)}100%{-webkit-transform:scale(1) translate(0,0);transform:scale(1) translate(0,0)}}@keyframes kenburnsLeft{0%{-webkit-transform:scale(1.5) translate(10%,0);transform:scale(1.5) translate(10%,0)}100%{-webkit-transform:scale(1) translate(0,0);transform:scale(1) translate(0,0)}}.vegas-animation-kenburnsRight{-webkit-animation:kenburnsRight ease-out;animation:kenburnsRight ease-out}@-webkit-keyframes kenburnsRight{0%{-webkit-transform:scale(1.5) translate(-10%,0);transform:scale(1.5) translate(-10%,0)}100%{-webkit-transform:scale(1) translate(0,0);transform:scale(1) translate(0,0)}}@keyframes kenburnsRight{0%{-webkit-transform:scale(1.5) translate(-10%,0);transform:scale(1.5) translate(-10%,0)}100%{-webkit-transform:scale(1) translate(0,0);transform:scale(1) translate(0,0)}}.vegas-animation-kenburnsUpLeft{-webkit-animation:kenburnsUpLeft ease-out;animation:kenburnsUpLeft ease-out}@-webkit-keyframes kenburnsUpLeft{0%{-webkit-transform:scale(1.5) translate(10%,10%);transform:scale(1.5) translate(10%,10%)}100%{-webkit-transform:scale(1) translate(0,0);transform:scale(1) translate(0,0)}}@keyframes kenburnsUpLeft{0%{-webkit-transform:scale(1.5) translate(10%,10%);transform:scale(1.5) translate(10%,10%)}100%{-webkit-transform:scale(1) translate(0,0);transform:scale(1) translate(0,0)}}.vegas-animation-kenburnsUpRight{-webkit-animation:kenburnsUpRight ease-out;animation:kenburnsUpRight ease-out}@-webkit-keyframes kenburnsUpRight{0%{-webkit-transform:scale(1.5) translate(-10%,10%);transform:scale(1.5) translate(-10%,10%)}100%{-webkit-transform:scale(1) translate(0,0);transform:scale(1) translate(0,0)}}@keyframes kenburnsUpRight{0%{-webkit-transform:scale(1.5) translate(-10%,10%);transform:scale(1.5) translate(-10%,10%)}100%{-webkit-transform:scale(1) translate(0,0);transform:scale(1) translate(0,0)}}.vegas-animation-kenburnsDownLeft{-webkit-animation:kenburnsDownLeft ease-out;animation:kenburnsDownLeft ease-out}@-webkit-keyframes kenburnsDownLeft{0%{-webkit-transform:scale(1.5) translate(10%,-10%);transform:scale(1.5) translate(10%,-10%)}100%{-webkit-transform:scale(1) translate(0,0);transform:scale(1) translate(0,0)}}@keyframes kenburnsDownLeft{0%{-webkit-transform:scale(1.5) translate(10%,-10%);transform:scale(1.5) translate(10%,-10%)}100%{-webkit-transform:scale(1) translate(0,0);transform:scale(1) translate(0,0)}}.vegas-animation-kenburnsDownRight{-webkit-animation:kenburnsDownRight ease-out;animation:kenburnsDownRight ease-out}@-webkit-keyframes kenburnsDownRight{0%{-webkit-transform:scale(1.5) translate(-10%,-10%);transform:scale(1.5) translate(-10%,-10%)}100%{-webkit-transform:scale(1) translate(0,0);transform:scale(1) translate(0,0)}}@keyframes kenburnsDownRight{0%{-webkit-transform:scale(1.5) translate(-10%,-10%);transform:scale(1.5) translate(-10%,-10%)}100%{-webkit-transform:scale(1) translate(0,0);transform:scale(1) translate(0,0)}}

.home-content { margin-top: -100px; }
.home-intro { height: 100vh; background-color: #f1f2f3; background-repeat: no-repeat; background-position: center; background-size: cover; }
.home-intro header { position: absolute; bottom: 0; left: 0; right: 0; width: 100%; padding: 100px 0; }
.home-intro h1 { color: #FFF; margin: 0; width: 80%; }
.home-intro h4 { color: #FFF; margin: 20px 0 0; width: 80%; opacity: 0.7; }

.video-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; }
.video-wrapper iframe { width: 100vw; height: 56.25vw; min-height: 100vh; min-width: 177.77vh; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

.home-content .page { padding: 40px 0; }

/* CONTENT
------------------------------------------------------------------------------------------------------------------------------------------------------*/
.content-block { margin: 60px auto; }
.columns-block .inner { display: flex; justify-content: space-between; }
.content-block img { display: block; height: auto; width: 100%; }
.content-block img.no-transform { width: auto; max-width: 100%; margin: 0 auto; }
.content-block figure { margin: 0 auto; }
.content-block figcaption { margin: 20px 0 0; }

.text-position-full .text { width: 100%; }
.text-position-center .text { margin: 0 auto; }

.quote-position-left blockquote { margin-left: 0; margin-right: 0; text-align: left; }

.key-figures-block .inner { flex-wrap: wrap; }
.key-figures-block .half { padding: 20px 0; }
.key-figures-block .half:nth-child(1),
.key-figures-block .half:nth-child(2) { padding-top: 0; }

.video-block .inner { display: block; }
.video-block .video { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; }
.video-block .video iframe { position: absolute; top: 0; left: 0; height: 100%; width: 100%; }

.iframe-block iframe { height: auto; width: 100%; }

.line-block hr { background-color: #DDD; border: none; clear: both; color: #DDD; height: 1px; line-height: 1; margin: 0; overflow: hidden; width: 100%; }

/* PAGES
------------------------------------------------------------------------------------------------------------------------------------------------------*/
body.type-page .page { padding: 40px 0; }
body.type-pageNotFound { background-color: #F7F8F9 !important; }

/* Page Heading */
.page-heading { height: 95vh; margin-top: -100px; min-height: 650px; }
.page-heading .inner { display: flex; flex-direction: column; align-content: center; justify-content: center; height: 100%; }
.page-heading h1 { color: #FFF; margin: 0; width: 80%; }
.page-heading h5 { color: rgba(255,255,255,0.6); }

/* Page End Link */
.page-end-link { height: calc(100vh - 100px); }
.page-end-link .inner { display: flex; flex-direction: column; align-content: center; justify-content: center; height: 100%; }
.page-end-link a { color: #FFF; display: block; text-decoration: none; }
.page-end-link a h1 { color: #FFF; margin-bottom: 40px; width: 80%; }
.page-end-link a .button,
.page-end-link a .button:hover { border: 1px solid #FFF; color: #FFF; }
.page-end-link a:hover { color: #FFF; text-decoration: none; }
.page-end-link a:hover .button { background-color: #FFF; color: #111; mix-blend-mode: screen; }

/* About */
.numbers { background-color: #111; padding: 40px 0; }
.numbers .text-block { color: #AAA; text-align: center; }
.numbers .text-block h2 { color: #FFF; }
.numbers-list { display: flex; justify-content: space-between; flex-wrap: wrap; }
.numbers-list div { text-align: center; margin-bottom: 60px; width: 30%; }
.numbers-list div em { border-bottom: 1px solid #222; color: #FFF; display: block; font-size: 100px; font-style: normal; font-weight: 300; letter-spacing: -0.05em; line-height: 1; padding-bottom: 15px; }
.numbers-list div h6 { color: #FFF; margin: 20px 0 10px; }
.numbers-list div p { color: #AAA; font-family: "SpotMono", monospace; font-size: 16px; }

.values { background-color: #F1F2F3; border-top: 1px solid #EEE; padding: 40px 0 80px; }
.values .text-block { color: #444; text-align: center; }
.values-list>div { border-bottom: 1px solid #DDD; display: flex; padding: 25px 0; }
.values-list div:first-child { border-top: 1px solid #DDD; }
.values-list h4 { line-height: 40px; margin: 0; width: 50%; }
.values-list h4 span { background-color: rgba(0,0,0,0.03); color: #444; display: block; float: left; font-family: "SpotMono", monospace; font-size: 18px; height: 40px; width: 40px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; margin-right: 20px; text-align: center; }
.values-list p { width: 50%; }

.team { background-color: #111; padding: 40px 0; }
.team .text-block { color: #AAA; text-align: center; }
.team .text-block h2 { color: #FFF; }
.team-list { display: flex; justify-content: space-between; flex-wrap: wrap; }
.team-list div { background-color: #161616; color: #AAA; text-align: center; margin-bottom: 1.5%; padding: 4%; flex: 0 24.3333%; }
.team-list img { height: auto; width: 100%; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; max-width: 280px; margin: 0 auto 20px; }
.team-list div h4 { color: #FFF; font-size: 20px; margin-bottom: 5px; }
.team-list div p {  color: #AAA; margin: 0; }
.team-list div p.links { font-family: "SpotMono", monospace; font-size: 15px; margin: 10px 0 0; }
.team-list div p.links a { color: #888; text-decoration: underline; }
.team-list div p.links a:hover { color: #FFF; text-decoration: underline; }

.experience { background-color: #FFF; padding: 40px 0 80px; }
.experience .text-block { color: #444; text-align: center; }
.experience-logos figure { border: 1px solid #EEE; float: left; width: 25%; margin: 0 -1px -1px 0; padding: 2%; box-sizing: border-box; text-align: center; }
.experience-logos figure img { display: block; height: auto; width: 100%; margin: 0 auto; }

/* Team */
body.type-person .page-content { padding: 40px 0; }
.bio { background-color: #FFF; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; display: flex; padding: 80px 0; }
.bio .inner { display: flex; justify-content: space-between; }
.bio .inner aside { width: 32.5%; }
.bio .inner aside figure { margin-bottom: 20px; }
.bio .inner aside img { display: block; height: auto; width: 100%; }
.bio .inner .bio-content { width: 62.5%; }
.bio .inner a.linkedin svg { fill: #111; height: 30px; width: 30px; }
.bio .inner a.linkedin:hover { opacity: 0.8; }

/* Services */
.services { background-color: #FFF; border-top: 2px solid #111; }
.services section { border-bottom: 2px solid #111; padding: 60px 0; }
.services section>.inner { display: flex; justify-content: space-between; position: relative; }
.services .heading { position: relative; padding-bottom: 120px; }
.services .summary p { font-size: 25px; font-weight: 300; line-height: 1.4; }
.services ul { color: #888; font-size: 16px; }
.services a.link { position: absolute; bottom: 0; text-decoration: none; width: 25%; display: flex; flex-wrap: wrap; align-items: flex-start; }
.services a.link h6 { width: 100%; }
.services a.link img { display: block; height: auto; flex: 0 0 50px; }
.services a.link span { color: #111; display: block; font-size: 14px; line-height: 1.4; padding: 5px 15px; flex: 1; }
.services a.link:hover { opacity: 0.75; }

/* CASE STUDIES
------------------------------------------------------------------------------------------------------------------------------------------------------*/
.base-work .filter-nav header { min-height: 170px; }
.base-work .filter-nav header p { color: #444; display: none; margin: 0; }
.base-work .filter-nav header p.on { display: block; }

.case-studies { background-color: #FFF; }
.case-studies a { border-top: 2px solid #DDD; display: block; padding: 20px 0; text-decoration: none; }
.case-studies article { display: flex; justify-content: space-between; }
.case-studies figure { flex: 0 0 12.5%; }
.case-studies img { display: block; height: auto; width: 100%; }
.case-studies header { flex-grow: 1; padding: 0 60px 0 30px; }
.case-studies h6.sub { padding-top: 20px; }
.case-studies section { flex: 0 0 20%; padding-right: 3.75%; }
.case-studies section p { color: #111; font-family: "SpotMono", monospace; font-size: 15px; line-height: 1.45; }

.case-studies a:hover { text-decoration: none; }

.case-studies a.colour-pink:hover { border-color: #F2B1B3; }
.case-studies a.colour-pink:hover h6.sub { color: #F2B1B3; }
.case-studies a.colour-orange:hover { border-color: #FF9100; }
.case-studies a.colour-orange:hover h6.sub { color: #FF9100; }
.case-studies a.colour-yellow:hover { border-color: #FFC229; }
.case-studies a.colour-yellow:hover h6.sub { color: #FFC229; }
.case-studies a.colour-green:hover { border-color: #00A550; }
.case-studies a.colour-green:hover h6.sub { color: #00A550; }
.case-studies a.colour-cyan:hover { border-color: #22A8E0; }
.case-studies a.colour-cyan:hover h6.sub { color: #22A8E0; }
.case-studies a.colour-blue:hover { border-color: #2828F0; }
.case-studies a.colour-blue:hover h6.sub { color: #2828F0; }
.case-studies a.colour-purple:hover { border-color: #6E32AA; }
.case-studies a.colour-purple:hover h6.sub { color: #6E32AA; }

/*Case Study Blocks*/
.case-study-blocks { background-color: #F1F2F3; padding: 100px 0; }
.case-study-blocks .inner { display: flex; justify-content: space-between; flex-wrap: wrap; }
.case-study-blocks header div { text-align: right; }
.case-study-blocks header h4 { margin: 0; align-self: center; }
.case-study-blocks div.inner a { background-color: #FFF; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; display: block; margin-top: 4%; width: 48%; text-decoration: none; }
.case-study-blocks article header { padding: 30px; }
.case-study-blocks article header img { display: block; float: right; height: auto; width: 30%; margin-left: 15%; }
.case-study-blocks article footer { border-top: 1px solid #DDD; color: #666; font-family: "SpotMono", monospace; font-size: 15px; line-height: 1.45; padding: 15px 30px; }
.case-study-blocks a:hover article * { color: #FFF; }
.case-study-blocks a:hover article h6.sub { color: rgba(255,255,255,0.6); }
.case-study-blocks a:hover article footer { border-color: rgba(255,255,255,0.3); }

.case-study-blocks a.colour-pink:hover { background-color: #F2B1B3; }
.case-study-blocks a.colour-orange:hover { background-color: #FF9100; }
.case-study-blocks a.colour-yellow:hover { background-color: #FFC229; }
.case-study-blocks a.colour-green:hover { background-color: #00A550; }
.case-study-blocks a.colour-cyan:hover { background-color: #22A8E0; }
.case-study-blocks a.colour-blue:hover { background-color: #2828F0; }
.case-study-blocks a.colour-purple:hover { background-color: #6E32AA; }

/*Case Study*/
.case-study { background-color: #FFF; min-height: calc(100vh - 100px); position: relative; }
.case-study .cover { background-color: #888; color: #FFF; height: calc(100vh - 100px); position: fixed; width: 50%; }
.case-study .cover .inner { padding-left: 15%; padding-right: 15%; }
.case-study .cover header { padding-top: 80px; }
.case-study .cover * { color: #FFF; }
.case-study .cover h1 { max-width: 80%; }
@media (max-height:1100px) {
	.case-study .cover h1 { font-size: 70px; }
}
@media (max-height:900px) {
	.case-study .cover h1 { font-size: 55px; }
}
.case-study .cover h1 { max-width: 80%; }
.case-study .cover h5 { color: rgba(255,255,255,0.6); }
.case-study .cover footer { position: absolute; bottom: 0; left: 0; width: 100%; }
.case-study .cover footer .inner { border-top: 2px solid #FFF; display: flex; justify-content: space-between; padding-top: 30px; padding-bottom: 60px; }
.case-study .cover footer ul { list-style: none; font-family: "SpotMono", monospace; font-size: 15px; line-height: 1.45; margin: 20px 0 0; }
.case-study .cover footer ul li { margin: 0; }
.case-study .cover footer a { color: #FFF; text-decoration: none; }
.case-study .cover footer a:hover { color: rgba(255,255,255,0.5); text-decoration: none; }
.case-study-unfix .cover { position: absolute; height: 100%; }

.case-study-content { margin-left: 50%; padding-bottom: 20px; position: relative; width: 50%; }
.case-study-content .content-block .inner { max-width: 900px; }
.case-study-content .feature-image img { display: block; height: auto; width: 100%; }
.case-study-content .quote-block blockquote { width: 80%; }
.case-study-content .line-block hr { height: 2px; }

.case-study-colour-pink .cover { background-color: #F2B1B3; }
.case-study-colour-pink .colour * { color: #F2B1B3; }
.case-study-colour-pink h2,
.case-study-colour-pink h4,
.case-study-colour-pink h6 { color: #F2B1B3; }
.case-study-colour-pink .line-block hr { background-color: #F2B1B3; color: #F2B1B3; }

.case-study-colour-orange .cover { background-color: #FF9100; }
.case-study-colour-orange .colour * { color: #FF9100; }
.case-study-colour-orange h2,
.case-study-colour-orange h4,
.case-study-colour-orange h6 { color: #FF9100; }
.case-study-colour-orange .line-block hr { background-color: #FF9100; color: #FF9100; }

.case-study-colour-yellow .cover { background-color: #FFC229; }
.case-study-colour-yellow .colour * { color: #FFC229; }
.case-study-colour-yellow h2,
.case-study-colour-yellow h4,
.case-study-colour-yellow h6 { color: #FFC229; }
.case-study-colour-yellow .line-block hr { background-color: #FFC229; color: #FFC229; }

.case-study-colour-green .cover { background-color: #00A550; }
.case-study-colour-green .colour * { color: #00A550; }
.case-study-colour-green h2,
.case-study-colour-green h4,
.case-study-colour-green h6 { color: #00A550; }
.case-study-colour-green .line-block hr { background-color: #00A550; color: #00A550; }

.case-study-colour-cyan .cover { background-color: #22A8E0; }
.case-study-colour-cyan .colour * { color: #22A8E0; }
.case-study-colour-cyan h2,
.case-study-colour-cyan h4,
.case-study-colour-cyan h6 { color: #22A8E0; }
.case-study-colour-cyan .line-block hr { background-color: #22A8E0; color: #22A8E0; }

.case-study-colour-blue .cover { background-color: #2828F0; }
.case-study-colour-blue .colour * { color: #2828F0; }
.case-study-colour-blue h2,
.case-study-colour-blue h4,
.case-study-colour-blue h6 { color: #2828F0; }
.case-study-colour-blue .line-block hr { background-color: #2828F0; color: #2828F0; }

.case-study-colour-purple .cover { background-color: #6E32AA; }
.case-study-colour-purple .colour * { color: #6E32AA; }
.case-study-colour-purple h2,
.case-study-colour-purple h4,
.case-study-colour-purple h6 { color: #6E32AA; }
.case-study-colour-purple .line-block hr { background-color: #6E32AA; color: #6E32AA; }

/* CONTACT
------------------------------------------------------------------------------------------------------------------------------------------------------*/
.contact { min-height: 100vh; margin-top: -100px; }
.contact .inner { padding-bottom: 100px; }
.contact header { padding: 20vh 0 50px; }
.contact header h1 { color: #FFF; width: 80%; }

.contact-details { float: left; width: 45%; }
.contact-form { float: right; width: 45%; }
.contact-form form { margin: 20px 0; }

.contact * { color: #FFF; }
.contact a { color: #FFF; }
.contact a[href^="tel:"] { color: #FFF; }
.contact a:hover { color: rgba(255,255,255,0.7); }
.contact .social { margin-top: 30px; }
.contact .social a { display: inline-block; text-decoration: none; margin-right: 10px; }
.contact .social a:hover { opacity: 0.5; }

.contact-form label { color: #FFF; }
.contact-form input { background: rgba(255,255,255,0.1); border: 1px solid transparent; color: #FFF; font-size: 18px; height: 50px; }
.contact-form textarea { background: rgba(255,255,255,0.1); border: 1px solid transparent; color: #FFF; font-size: 18px; }
.contact-form input:focus,
.contact-form input:hover,
.contact-form select:focus,
.contact-form select:hover,
.contact-form textarea:focus,
.contact-form textarea:hover { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.3); color: #FFF; }

.contact-form form button { border: 1px solid #FFF; color: #FFF; width: 200px; }
.contact-form form button:hover { background-color: #FFF; border: 1px solid #FFF; color: #000; mix-blend-mode: screen; }

/* CommonFutures
------------------------------------------------------------------------------------------------------------------------------------------------------*/
body.base-commonfutures { background-color: #111; }
body.base-commonfutures .page-footer { border-top: 2px solid #222; }

body.base-commonfutures .page-header { background-color: #060606; border-bottom: 1px solid #161616; }
body.base-commonfutures .page-header a.logo svg { fill: #FFF; }
body.base-commonfutures .page-header .toggle-inner, 
body.base-commonfutures .page-header .toggle-inner::before, 
body.base-commonfutures .page-header .toggle-inner::after { background-color: #FFF; }

body.base-commonfutures .page-header i { border-color: #444; }
body.base-commonfutures .page-header span { color: #888; }
body.base-commonfutures .page-header span a { color: #EEE; }

body.base-commonfutures .page-header .commonfutures-logo img { display: block; float: right; height: 30px; width: auto; margin-top: 6px; opacity: 0.5; }
body.base-commonfutures .page-header .commonfutures-logo a { opacity: 1; }
body.base-commonfutures .page-header .commonfutures-logo a:hover img { opacity: 1; }

body.base-commonfutures .page-heading { height: auto; margin-top: 25vh; min-height: 100px; }
body.base-commonfutures .page-heading h5 { color: rgba(255,255,255,0.5); }
body.base-commonfutures .page-heading h5 img { display: block; margin-right: 10px; vertical-align: bottom; opacity: 0.5; }

body.base-commonfutures .filter-nav h2 { color: #FFF; margin-bottom: 40px; }
body.base-commonfutures .filter-nav nav a { color: #FFF; height: 40px; line-height: 40px; padding-bottom: 20px; }
body.base-commonfutures .filter-nav nav a img { display: block; height: 40px; margin-right: 15px; width: auto; float: left; }
body.base-commonfutures .filter-nav nav a:hover { color: #FFF; }
body.base-commonfutures .filter-nav nav a.on { color: #FFF; }
body.base-commonfutures .filter-nav nav a.on span { background: #FFF; }

body.base-commonfutures .pagination span { background-color: rgba(255,255,255,0.05); color: rgba(255,255,255,0.4); }
body.base-commonfutures .pagination a { background-color: rgba(255,255,255,0.03); color: #FFF; }

.articles { background-color: #161616; }
.articles>header { display: flex; justify-content: space-between; flex-wrap: wrap; padding-top: 100px; padding-bottom: 60px; }
.articles>header div { text-align: right; }
.articles>header h4 { color: #FFF; margin: 0; align-self: center; }
.articles>header a.button-plain:hover { color: #FFF; }
.articles>header a.button-plain:hover span { color: #FFF; }

.articles>a { border-top: 2px solid #222; display: block; padding: 30px 0; text-decoration: none; }
.articles>a article { display: flex; justify-content: space-between; }
.articles article section { width: 19.25%; padding-top: 10px; }
.articles article figure { width: 23.75%; order: 3; }
.articles article h6 { color: #FFF; margin-bottom: 20px; }
.articles article img { display: block; height: auto; width: 100%; opacity: 0.75; }
.articles article p { color: #CCC; font-size: 16px; line-height: 1.55; }
.articles article time { color: #888; font-size: 14px; letter-spacing: 0.05em; line-height: 1.45; text-transform: uppercase; }

.articles>a:hover { text-decoration: none; border-color: #FFF; -webkit-transition: all 300ms; -o-transition: all 300ms; transition: all 300ms; }
.articles>a:hover img { opacity: 1; }

/*Article*/
.article { background-color: #FFF; min-height: calc(100vh - 100px); position: relative; }
.article-content { margin-left: 480px; padding: 80px 0 40px; position: relative; width: auto; }
.article-content header h6.sub { color: #BBB; font-size: 15px; margin-bottom: 40px; }
.article-content header img { display: block; height: auto; width: 100%; }
.article-content .inner { max-width: 900px; }
.article-content .quote-block blockquote { width: 80%; }
.article-content .content-block figcaption { text-align: center; }

/*Articles Column*/
.articles-bar { display: none; }
.articles-column { background-color: #161616; height: calc(100vh - 100px); position: fixed; width: 480px; overflow-y: scroll; z-index: 2; }
.articles-column-inner { padding: 20px 60px; -webkit-transition: opacity 400ms; -o-transition: opacity 400ms; transition: opacity 400ms; }
.articles-column-fade { opacity: 0.25; padding-bottom: 600px; }
.articles-column-inner h5 { color: #FFF; line-height: 40px; padding: 20px; }
.articles-column-inner h5 img { display: block; height: 40px; margin-right: 20px; width: auto; float: left; }
.articles-column-inner h5 sup { opacity: 0.5; font-size: 70%; font-weight: 300; line-height: 1; padding-left: 6px; }
.articles-column a { border: 2px solid #222; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; color: #FFF; display: block; text-decoration: none; margin: 0 0 20px; -webkit-transition: all 200ms; -o-transition: all 200ms; transition: all 200ms; }
.articles-column article { display: flex; padding: 20px; }
.articles-column article header { flex-grow: 1; }
.articles-column article figure { margin-left: 20px; flex: 0 0 60px; }
.articles-column article img { display: block; height: auto; width: 100%; opacity: 0.5; }
.articles-column article p { color: #FFF; font-size: 15px; line-height: 1.35; margin: 0 0 10px; }
.articles-column article h6.sub { color: #666; font-size: 12px; margin: 0; }

.articles-column a:hover { border-color: #FFF; text-decoration: none; }
.articles-column a:hover img { opacity: 1; }

.articles-column a.on { background-color: #222; }
.articles-column a.on h6.sub { color: #FFF; }

body.type-article .page-footer,
body.type-article .site-footer { z-index: 999; position: relative; }

/* SITE NAV ACTIVE
------------------------------------------------------------------------------------------------------------------------------------------------------*/
body.site-nav-active { overflow: hidden; }
body.site-nav-active .page-header { background-color: transparent; border-bottom-color: transparent; }
body.site-nav-active .page-header nav { display: none; }
body.site-nav-active .page-header .toggle-inner, 
body.site-nav-active .page-header .toggle-inner::before, 
body.site-nav-active .page-header .toggle-inner::after { background-color: #FFF; }

/* MEDIA QUERIES
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:1800px) {
	.case-study .cover .inner { padding-left: 80px; padding-right: 80px; }
}

@media screen and (max-width: 1440px), screen and (max-height: 1000px) {
	.page-layout { padding-top: 80px; }
	.page-header { height: 80px; }
	.page-header .outer { padding-top: 20px; padding-bottom: 20px; }
	.page-header a.logo { height: 20px; padding: 6px 0 14px; }
	.page-header span { font-size: 18px; }
	.home-content { margin-top: -80px; }
	.page-heading { margin-top: -80px; }
	.case-study .cover { height: calc(100vh - 80px); }
	.articles-column { height: calc(100vh - 80px); }
}

@media (max-width:1440px) {
	.outer { padding: 0 40px; }
	.inner { padding: 0 40px; }

	h1 { font-size: 60px; }
	h2 { font-size: 40px; }
	h3 { font-size: 35px; }
	h4 { font-size: 30px; }
	h5 { font-size: 25px; }
	h6 { font-size: 20px; }
	.page-content .button { font-size: 13px; }
	.page-content p,
	.page-content ul, 
	.page-content ol { font-size: 16px; margin-bottom: 25px; }
	.page-content blockquote p { font-size: 30px; }
	.page-content blockquote footer { font-size: 14px; }
	.page-content figcaption p { font-size: 14px; }

	.bio { padding: 40px 0; }

	.services .summary p { font-size: 22px; }

	.case-study .cover .inner { padding: 40px; }
	.case-study .cover h1 { font-size: 50px; }
	.case-study .cover footer .inner { padding-bottom: 40px; }

	.articles-column { width: 420px; }
	.articles-column-inner { padding: 20px; }
	.article-content { margin-left: 420px; }
}

@media screen and (max-width:1380px) {
	.case-study .cover { position: relative; width: 100%; }
	.case-study .cover header.inner { padding-top: 10vh; }
	.case-study .cover h1 { font-size: 50px; }
	.case-study .cover footer ul { font-size: 14px; }
	.case-study-content { margin: 0; width: auto; }
	.case-study-content .feature-image { margin: 40px auto 0; max-width: 900px; }
}

@media screen and (max-width:1280px) {
	.page-footer { font-size: 15px; line-height: 1.4; }
	.page-footer .col { width: 20%; }
	.page-footer .subscribe { width: 45%; margin: 0; }
	.site-footer { font-size: 13px; }
	.site-footer .outer { flex-wrap: wrap; }
	.site-footer .col { width: 30%; }
	.site-footer .logo { display: none; }

	.site-nav>.outer { height: calc(100vh - 200px); padding: 100px 40px; }
	.site-nav nav ul { font-size: 55px; }
	.site-nav .site-footer { display: none; }

	.values-list h4 { font-size: 25px; }
	.values-list h4 span { display: none; }

	.services .summary p { font-size: 18px; }

	.articles article p { font-size: 15px; }

	body.type-article .page-layout { padding-top: 140px; }
	body.type-article .page-header span { display: none; }
	.articles-column { background-color: rgba(8,8,8,0.97); display: none; height: calc(100vh - 140px); width: 100%; z-index: 9999; }
	.articles-column-fade { opacity: 1; padding-bottom: 20px; }
	.articles-bar { background-color: #161616; display: block; height: 60px; width: 100%; position: fixed; top: 80px; z-index: 888; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
	.articles-bar .outer { height: 26px; padding-top: 17px; padding-bottom: 17px; }
	.articles-bar .articles-trigger { float: right; cursor: pointer; padding: 0 3px; }
	.articles-bar .articles-trigger i { border: solid #888; border-width: 0 2px 2px 0; display: inline-block; padding: 8px; transform: rotate(45deg); -webkit-transform: rotate(45deg); }
	.articles-bar .articles-trigger-on i { transform: rotate(-165deg); -webkit-transform: rotate(-135deg); margin-top: 8px; }
	.articles-bar .articles-trigger:hover i { border-color: #FFF; }
	body.articles-column-active { overflow: hidden; }

	.articles-bar span i { border: solid #444; border-width: 0 2px 2px 0; display: inline-block; padding: 4px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); margin: 0 15px; }
	.articles-bar span { display: block; float: left; font-size: 15px; line-height: 26px; }
	.articles-bar span a { color: #AAA; text-decoration: none; opacity: 0.6; }
	.articles-bar span a:hover { opacity: 1; text-decoration: none; }

	.articles-bar .commonfutures-logo img { display: block; float: right; height: 26px; width: auto; }
	.articles-bar .commonfutures-logo a { opacity: 0.5; }
	.articles-bar .commonfutures-logo a:hover img { opacity: 1; }

	.article-content { margin: 0; padding-top: 60px; }

	body.type-article .page-footer, 
	body.type-article .site-footer { z-index: -1; }
}

@media screen and (max-width:1040px) {
	.page-footer { padding: 50px 0; }
	.page-footer .outer { flex-wrap: wrap; }
	.page-footer .col { width: 45%; }
	.page-footer .subscribe { width: 100%; margin-bottom: 40px; }
	.site-footer { padding: 20px; }
	.site-footer .outer { display: block; padding: 0; }
	.site-footer .col { padding: 10px 20px; margin: 0; width: auto; }
	.site-footer .col:nth-child(3) a { display: block; padding: 5px 0; }
	.site-footer br { display: none; }

	.filter-nav { padding: 140px 0 20px; }
	.filter-nav .inner { flex-wrap: wrap; }
	.filter-nav .half { width: 100%; padding: 0; }
	.filter-nav nav { margin: 0; }
	.filter-nav nav a { width: 30%; padding-right: 3.33%; }
	.base-work .filter-nav nav a { width: 48%; padding-right: 2%; }
	.base-work .filter-nav header { min-height: 0; margin-bottom: 20px; }
	.base-work .filter-nav header p { display: none !important; max-width: 600px; }
	.base-work .filter-nav header p.active { display: block !important; }

	.values-list>div { display: block; }
	.values-list h4 { width: auto; }
	.values-list p { width: auto; }

	.numbers-list div em { font-size: 80px; }
	.numbers-list div p { font-size: 15px; }

	.team-list div { flex-basis: 41.25%; }
	.team-list div h4 { font-size: 16px; }
	.team-list div p.links { font-size: 14px; }

	.case-studies { background-color: #eee; padding: 15px 0; }
	.case-studies a { background-color: #FFF; border: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; margin: 15px; }
	.case-studies article:after	{ clear: both; content: ""; display: table; }
	.case-studies article { display: block; padding: 0 20px; }
	.case-studies figure { float: right; width: 25%; }
	.case-studies header { margin-right: 30%; padding: 0; }
	.case-studies section { margin-right: 30%; padding: 10px 0 0; }
	.case-studies h6.sub { padding-top: 0; }
	.case-studies section h6.sub { margin: 0 0 5px; }
	.case-studies section p { font-size: 14px; }

	.case-study .cover h1 { font-size: 40px; }
	.case-study-content .feature-image { margin: 0 auto; max-width: 100%; }

	.articles>a article { display: block; }
	.articles>a article:after { clear: both; content: ""; display: table; }
	.articles>a article header { margin-bottom: 0; margin-right: 40%; width: auto; }
	.articles>a article section { margin-right: 40%; width: auto; }
	.articles>a article figure { float: right; width: 33.33%; }
	.articles article h6.sub { color: #CCC; margin-bottom: 5px; }
	.articles article p { display: none; }

	body.base-commonfutures .page-heading h5 img { height: 35px; width: auto; }
	body.base-commonfutures .filter-nav nav a { height: 35px; line-height: 35px; }
	body.base-commonfutures .filter-nav nav a img { height: 35px; }
}

@media screen and (max-width:820px) {
	.page-layout { padding-top: 60px; }
	.page-header { height: 60px; }
	.page-header .outer { padding: 10px 20px; }
	.page-header a.logo { display: inline-block; float: none; height: 18px; padding: 12px 0 10px; }
	.home-content { margin-top: -60px; }
	.page-heading { height: 100vh; margin-top: -60px; }
	.case-study .cover { height: calc(100vh - 60px); }
	.articles-column { height: calc(100vh - 120px); }
	.articles-bar { top: 60px; }
	body.type-article .page-layout { padding-top: 120px; }

	.outer { padding: 0 20px; }
	.inner { padding: 0 20px; }

	.half { width: auto; margin-bottom: 20px; }
	.third { width: auto; margin-bottom: 20px; }
	.two-thirds { width: auto; margin-bottom: 20px; }

	h1 { font-size: 36px; }
	h2 { font-size: 33px; margin-bottom: 15px; }
	h3 { font-size: 30px; margin-bottom: 15px; }
	h4 { font-size: 25px; margin-bottom: 15px; }
	h5 { font-size: 20px; margin-bottom: 15px; }
	h6 { font-size: 18px; }
	h6.sub { font-size: 11px; letter-spacing: 0.05em; }

	.page-content .button { letter-spacing: 0.05em; min-width: 150px; padding: 0 30px; }
	.page-content .button-plain { min-width: 0; padding: 0; }
	.page-content p,
	.page-content ul, 
	.page-content ol { font-size: 15px; margin-bottom: 20px; }
	.page-content blockquote p { font-size: 22px; }
	.page-content blockquote footer { font-size: 13px; }
	.page-content figcaption p { font-size: 13px; }

	.page-header .site-nav-toggle { float: none; margin: 0; padding: 20px; position: absolute; top: 0; right: 0; }
	.toggle-box, .toggle-inner, .toggle-inner::before, .toggle-inner::after { width: 25px; }
	.page-header nav { float: none; margin: 0; }
	.page-header a.logo svg { display: block; }
	.page-header span { display: none; }

	.page-footer { padding: 0; }
	.page-footer .outer { display: block; padding: 0; }
	.page-footer .footer-statement { border-top: 1px solid #222; padding: 20px; }
	.page-footer .col { width: auto; margin: 0; border-top: 1px solid #222; padding: 20px; }
	.page-footer .subscribe { padding: 40px 20px; }
	.page-footer .col h4 { margin-bottom: 10px; }
	.site-footer { padding: 10px 0; }

	.site-nav nav a { padding: 3px 0; }
	.site-nav nav a span { padding: 0 10px; }
	.site-nav nav a em { display: none; }
	.site-nav .site-footer { display: none; }
	body.site-nav-active .page-header nav { display: block; }
	body.site-nav-active .page-header nav a.logo { opacity: 0.1; }

	.page-end-link { height: 100vh; }
	.page-end-link a h1 { font-size: 35px; width: 100%; }

	.filter-nav { padding-top: 80px; }
	.filter-nav nav a { font-size: 16px; line-height: 30px; }

	.home-intro { height: 100vh; }
	.home-content .page { padding: 20px 0; }

	.content-block { margin: 20px 0; }
	.columns-block .inner { display: block; }
	.key-figures-block .half { padding: 0; }

	body.type-page .page { padding: 20px 0; }

	.numbers-list { margin-top: 40px; }
	.numbers-list div { width: 45%; }
	.numbers-list div em { font-size: 60px; letter-spacing: 0; }
	.numbers-list div p { font-size: 14px; }
	.experience-logos figure { width: 33.33%; }

	body.type-person .page-content { padding: 20px 0; }
	.bio { padding: 20px 0; }
	.bio .inner { display: block; }
	.bio .inner aside { width: auto; margin-bottom: 20px; }
	.bio .inner aside figure { max-width: 400px; margin: 0 auto 20px; }
	.bio .inner .bio-content { width: auto; }
	.bio .inner .bio-content header { margin: 20px -20px 0; border-top: 1px solid #EEE; padding: 20px 20px 0; }

	.services section { padding: 40px 0; }
	.services section>.inner { display: block; }
	.services .heading { padding-bottom: 0; }
	.services a.link { position: relative; bottom: auto; margin-top: 30px; width: 50%; min-width: 250px; }

	.case-study-blocks { padding: 40px 0; }
	.case-study-blocks .inner { display: block; }
	.case-study-blocks header div { margin: 10px 0; text-align: left; }
	.case-study-blocks div.inner a { width: auto; margin: 20px 0; }

	.case-study .cover .inner { padding: 20px; }
	.case-study .cover header.inner { padding-top: 40px; }
	.case-study .cover footer .inner { display: block; padding: 0 20px 20px; }
	.case-study .cover footer .third { margin-bottom: 0; }
	.case-study .cover footer h6.sub { margin: 20px 0 5px; }
	.case-study .cover footer ul { margin: 0; }
	.case-study .cover footer ul li { display: inline-block; }
	.case-study .cover footer ul li:after { content: '\2022'; padding-left: 0.5em; }
	.case-study .cover footer ul li:last-child:after { content: none; padding: 0; }

	.articles article h6 { margin-bottom: 10px; }
	.articles article time { font-size: 12px; }
	.articles-column-inner h5 { padding: 20px 0; }
	.articles-column a { margin-bottom: 10px; }
	.articles-column article { padding: 15px; }
	.articles-column article h6.sub { font-size: 11px; }

	.contact-details { float: none; width: 100%; }
	.contact-form { float: none; margin-top: 40px; width: 100%; }

}

@media screen and (max-width:600px) {
	.site-nav nav ul { font-size: 30px; letter-spacing: 0; }
	.page-heading h1 { width: auto; }

	.team-list div { flex-basis: 100%; padding: 6%; }
	.team-list div img { max-width: 150px; }

	.filter-nav nav a { font-size: 15px; width: 48%; padding-right: 2%; }
	.filter-nav nav a span { margin-right: 8px; }

	.numbers-list div { margin: 0 0 40px; width: 100%; }
	.numbers-list div em { font-size: 50px; }
	.experience-logos figure { width: 50%; }

	.case-study-blocks { background-color: #eee; }
	.case-study-blocks article header { padding: 15px; }
	.case-study-blocks article header img { width: 25%; margin-left: 10%; }
	.case-study-blocks article footer { font-size: 13px; padding: 10px 15px; }
	
	.case-studies a { padding-bottom: 10px; }
	.case-studies article { padding: 0 15px; }
	.case-studies figure { margin-bottom: 15px; }
	.case-studies section { clear: both; margin: 0; padding: 0; }
	.case-studies section.sectors { margin: 0 -15px; padding: 15px 15px 10px; border-top: 1px solid #DDD; }
	.case-studies section p { font-size: 13px; }

	.case-study .cover h1 { font-size: 35px; }

	body.base-commonfutures .filter-nav { padding-bottom: 10px; }
	body.base-commonfutures .filter-nav nav a img { margin-right: 8px; }
	body.base-commonfutures .filter-nav h2 { margin-bottom: 20px; }

	.articles>a article header { margin-right: 30%; width: auto; }
	.articles>a article section { margin-right: 30%; width: auto; }
	.articles>a article figure { float: right; width: 25%; }

	.articles-bar .commonfutures-logo img { height: 22px; margin-top: 2px; }
	.articles-bar span i { margin: 0 10px; }
	.articles-bar span { font-size: 14px; }
}

@media screen and (max-width:350px) {
	.filter-nav nav a { width: 100%; padding: 0; }
	.articles-bar span.category { display: none; }
}

@media screen and (max-height:900px) {
	.home-intro header { padding: 60px 0; }
}

@media screen and (max-height:650px) {
	.site-nav>.outer { height: auto; padding: 60px 20px; }
	.site-nav nav { display: block; height: auto; }
	.site-nav nav ul { font-size: 25px; letter-spacing: 0; }
	.page-heading { min-height: 50px; }
	.case-study .cover { height: auto; }
	.case-study .cover footer { position: relative; bottom: auto; left: auto; }
}