/*!
Theme Name: The20
Description: A theme for WordPress.
Author: Sam Morgan design by The20
Author URI: http://www.svmorgan.com
Version: 1.0
*/.slick-slider {
	position: relative;
	display: block;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-ms-touch-action: pan-y;
	touch-action: pan-y;
	-webkit-tap-highlight-color: transparent
}
.slick-list {
	position: relative;
	overflow: hidden;
	display: block;
	margin: 0;
	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);
	transform: translate3d(0, 0, 0)
}
.slick-track {
	position: relative;
	left: 0;
	top: 0;
	display: block
}
.slick-track:before, .slick-track:after {
	content: "";
	display: table
}
.slick-track:after {
	clear: both
}
.slick-loading .slick-track {
	visibility: hidden
}
.slick-slide {
	float: left;
	height: 100%;
	min-height: 1px;
	display: none
}
[dir="rtl"] .slick-slide {
	float: right
}
.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
}
.slick-vertical .slick-slide {
	display: block;
	height: auto;
	border: 1px solid transparent
}
.slick-arrow.slick-hidden {
	display: none
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main {
	display: block
}
ol, ul {
	list-style: none
}
blockquote, q {
	quotes: none
}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none
}
table {
	border-collapse: collapse;
	border-spacing: 0
}
html, body {
	height: 100%;
	font-family: sans-serif
}
input:focus, select:focus, textarea:focus, button:focus, div:focus {
	outline: none
}
input {
	border-radius: 0;
	-webkit-appearance: none
}
*, *:before, *:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box
}
body {
	-webkit-font-smoothing: antialiased;
	-webkit-overflow-scrolling: touch;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	background: #000;
	color: #fff;
	font-size: 16px;
	line-height: 27px
}
input, textarea, button {
	font-family: 'Roboto', sans-serif
}
button {
	background: none;
	border: 0 none;
	padding: 0;
	margin: 0;
	cursor: pointer
}
a {
	color: inherit;
	text-decoration: none
}
h1, strong {
	font-weight: 700
}
@-webkit-keyframes dash {
to {
stroke-dashoffset:0
}
}
@keyframes dash {
to {
stroke-dashoffset:0
}
}
header {
	height: 80px;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 2;
	background: #000;
	color: #fff
}
header .logo {
	top: 24px;
	left: 50px;
	position: relative
}
header .logo svg {
	height: 36px;
	width: 72px
}
header .logo svg .path {
	fill: none;
	stroke: #fff;
	stroke-width: 9;
	stroke-miterlimit: 10;
	stroke-dasharray: 350;
	stroke-dashoffset: 350;
	-webkit-clip-path: url(#clip-path);
	clip-path: url(#clip-path)
}
header .logo svg .path.down {
	-webkit-animation: dash 2s linear forwards;
	animation: dash 2s linear forwards
}
header .logo svg .path.horiz {
	-webkit-animation: dash 2s linear forwards 0.5s;
	animation: dash 2s linear forwards 0.5s
}
header .logo svg .path.path-20 {
	-webkit-animation: dash 2s linear forwards 0.7s;
	animation: dash 2s linear forwards 0.7s
}
header nav {
	position: fixed;
	width: 100%;
	height: 100%;
	overflow: hidden;
	top: 0;
	left: 0;
	background: #000;
	font-size: 42px;
	line-height: 1em;
	visibility: hidden;
	opacity: 0;
	-webkit-transition: opacity 0.5s, visibility 0s 0.5s;
	transition: opacity 0.5s, visibility 0s 0.5s;
	font-weight: 400;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0)
}
header nav div {
	top: 220px;
	right: 100px;
	position: absolute
}
header nav div ul li {
	margin: 0 0 27px
}
header nav div ul li a {
	-webkit-transition: border-color 0.3s;
	transition: border-color 0.3s;
	line-height: 0.95em;
	display: inline-block;
	position: relative;
	text-shadow: -1px -1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000, 1px 1px 1px #000
}
header nav div ul li a:after {
	content: "";
	height: 3px;
	width: 0;
	position: absolute;
	bottom: -3px;
	left: 0;
	-webkit-transition: width 0.8s;
	transition: width 0.8s;
	background: #b73d21;
	z-index: -1
}
header nav div ul li.current-menu-item a:after {
	width: 100%
}
header nav div ul.social li {
	display: inline-block;
	margin: 0 0 0 4px
}
header nav div ul.social li a svg {
	fill: #fff
}
body.msie header .logo svg .path, body.msie .intro .path {
	stroke-miterlimit: 0;
	stroke-dasharray: 0;
	stroke-dashoffset: 0
}
.not-mobile header nav div ul li a:hover:after {
	width: 100%
}
.nav-open header nav {
	visibility: visible;
	opacity: 1;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s
}
body.home header {
	top: -80px;
	-webkit-transition: top 0.3s;
	transition: top 0.3s
}
body.home.scrolled header {
	top: 0
}
.hamburger {
	top: 28px;
	right: 50px;
	position: absolute;
	width: 28px;
	height: 28px;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	z-index: 4;
	cursor: pointer
}
.hamburger span:before, .hamburger span:after {
	content: "";
	position: absolute;
	left: 0
}
.hamburger span, .hamburger span:before, .hamburger span:after {
	width: 28px;
	height: 4px;
	background: #fff
}
.hamburger span {
	position: absolute;
	top: 12px;
	left: 0px;
	-webkit-transition-duration: 0.1s;
	transition-duration: 0.1s;
	-webkit-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
	transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19)
}
.hamburger span:before {
	top: 9px;
	-webkit-transition: top 0.1s 0.14s ease, opacity 0.1s ease;
	transition: top 0.1s 0.14s ease, opacity 0.1s ease
}
.hamburger span:after {
	bottom: 9px;
	-webkit-transition: bottom 0.1s 0.14s ease, -webkit-transform 0.1s cubic-bezier(0.55, 0.055, 0.675, 0.19);
	transition: bottom 0.1s 0.14s ease, -webkit-transform 0.1s cubic-bezier(0.55, 0.055, 0.675, 0.19);
	transition: bottom 0.1s 0.14s ease, transform 0.1s cubic-bezier(0.55, 0.055, 0.675, 0.19);
	transition: bottom 0.1s 0.14s ease, transform 0.1s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.1s cubic-bezier(0.55, 0.055, 0.675, 0.19)
}
.nav-open .hamburger span {
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	-webkit-transition-delay: 0.14s;
	transition-delay: 0.14s;
	-webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
}
.nav-open .hamburger span::before {
	top: 0;
	opacity: 0;
	-webkit-transition: top 0.1s ease, opacity 0.1s 0.14s ease;
	transition: top 0.1s ease, opacity 0.1s 0.14s ease
}
.nav-open .hamburger span::after {
	bottom: 0;
	-webkit-transform: rotate(-90deg);
	transform: rotate(-90deg);
	-webkit-transition: bottom 0.1s ease, -webkit-transform 0.1s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1);
	transition: bottom 0.1s ease, -webkit-transform 0.1s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1);
	transition: bottom 0.1s ease, transform 0.1s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1);
	transition: bottom 0.1s ease, transform 0.1s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.1s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1)
}
@-webkit-keyframes fadeintext {
0% {
max-height:0;
opacity:0
}
25% {
max-height:400px;
opacity:0
}
100% {
max-height:400px;
opacity:1
}
}
@keyframes fadeintext {
0% {
max-height:0;
opacity:0
}
25% {
max-height:400px;
opacity:0
}
100% {
max-height:400px;
opacity:1
}
}
.intro {
	height: 100vh;
	min-height: 520px
}
.intro svg.logo {
	margin: 50px 0
}
.intro .path {
	fill: none;
	stroke: #fff;
	stroke-width: 9;
	stroke-miterlimit: 10;
	stroke-dasharray: 350;
	stroke-dashoffset: 350;
	-webkit-clip-path: url(#clip-path);
	clip-path: url(#clip-path)
}
.intro .path.down {
	-webkit-animation: dash 2s linear forwards;
	animation: dash 2s linear forwards
}
.intro .path.horiz {
	-webkit-animation: dash 2s linear forwards 0.5s;
	animation: dash 2s linear forwards 0.5s
}
.intro .path.path-20 {
	-webkit-animation: dash 2s linear forwards 0.7s;
	animation: dash 2s linear forwards 0.7s
}
.intro .intro-text {
	width: 240px;
	margin: 0 auto;
	text-align: left;
	visibility: hidden;
	position: relative;
	left: 13px
}
.intro .intro-text span {
	display: block
}
@-webkit-keyframes fadeInVid {
to {
opacity:1
}
}
@keyframes fadeInVid {
to {
opacity:1
}
}
.fullscreen-video {
	opacity: 0;
	-webkit-animation: fadeInVid 2s linear forwards 2.5s;
	animation: fadeInVid 2s linear forwards 2.5s
}
@-webkit-keyframes arrows {
from {
height:0
}
to {
height:100%
}
}
@keyframes arrows {
from {
height:0
}
to {
height:100%
}
}
@-webkit-keyframes arrowsAfter {
from {
width:0
}
to {
width:100%
}
}
@keyframes arrowsAfter {
from {
width:0
}
to {
width:100%
}
}
.scroll-down {
	width: 60px;
	height: 30px;
	position: relative;
	margin: 50px auto 0;
	display: block
}
.scroll-down:before, .scroll-down:after {
	content: "";
	position: absolute;
	background: #b73d21;
	left: 29px;
	bottom: 0;
	width: 2px;
	-webkit-animation: arrows 0.5s linear forwards 3s;
	animation: arrows 0.5s linear forwards 3s
}
.scroll-down:before {
	-webkit-transform: rotate(60deg);
	transform: rotate(60deg);
	-webkit-transform-origin: left bottom;
	transform-origin: left bottom
}
.scroll-down:after {
	-webkit-transform: rotate(-60deg);
	transform: rotate(-60deg);
	-webkit-transform-origin: right bottom;
	transform-origin: right bottom
}
.fullscreen-video {
	position: absolute;
	overflow: hidden;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	overflow: hidden;
	z-index: -1
}
.fullscreen-video video {
	position: absolute
}
.fullscreen-video .IIV::-webkit-media-controls-play-button, .fullscreen-video .IIV::-webkit-media-controls-start-playback-button {
opacity:0;
pointer-events:none;
width:5px
}
.table {
	width: 100%;
	height: 100%;
	display: table;
	text-align: center
}
.table .cell {
	display: table-cell;
	vertical-align: middle
}
.showreel-wrap {
	padding: 0 0 33.3%;
	margin: 80px 0 0;
	position: relative
}
.showreel-wrap .showreel {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0
}
.projects-wrap {
	overflow: hidden
}
.bgimg {
	background-size: cover;
	background-position: center;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%
}
.project-block {
	width: 25%;
	display: block;
	float: left;
	position: relative;
	color: #fff;
	padding: 0 0 25%;
	overflow: hidden
}
.project-block .bgimg {
	-webkit-transform-origin: center;
	transform-origin: center;
	-webkit-transform: scale(1);
	transform: scale(1);
	opacity: 1;
	-webkit-transition: all 1s;
	transition: all 1s
}
.project-block .rollover {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	visibility: hidden;
	opacity: 0;
	-webkit-transition: opacity 0.5s, visibility 0.5s;
	transition: opacity 0.5s, visibility 0.5s
}
.project-block .heading {
	-webkit-transform-origin: center;
	transform-origin: center;
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
	opacity: 0;
	-webkit-transition: all 1s 0.2s;
	transition: all 1s 0.2s
}
.project-block .title {
	margin: 32px 0 0
}
.project-block .title h2, .project-block .title h3 {
	display: inline-block;
	font-size: 22px;
	line-height: 1em;
	padding: 0 0.3em;
	vertical-align: middle;
	width: 50%
}
.project-block .title.has-subheading h2 {
	text-align: right
}
.project-block .title.has-subheading h3 {
	text-align: left
}
.project-block .title h2 {
	font-weight: 700
}
.project-block .title h3 {
	border-left: 1px solid #fff
}
.project-block .project-links {
	vertical-align: middle;
	font-weight: 700;
	font-size: 12px;
	line-height: 17px;
	margin: 10px 0 0;
	font-weight: 500
}
.project-block .project-links svg {
	fill: #fff;
	vertical-align: middle
}
.project-block .project-links a {
	display: inline-block;
	margin: 0 0.5em
}
.project-block .project-links a span {
	margin: 0 0 0 0.7em;
	vertical-align: middle;
	display: inline-block;
	position: relative
}
.not-mobile .project-block:hover .rollover, .is-mobile .project-block.hover .rollover {
	visibility: visible;
	opacity: 1;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s
}
.not-mobile .project-block:hover .heading, .is-mobile .project-block.hover .heading {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1)
}
.not-mobile .project-block:hover .bgimg, .is-mobile .project-block.hover .bgimg {
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
	opacity: 0.5
}
.not-mobile .project-links a span:after {
	content: "";
	width: 100%;
	height: 2px;
	position: absolute;
	bottom: 0;
	background: #b73d21;
	left: 0;
	width: 0;
	-webkit-transition: width 0.3s;
	transition: width 0.3s
}
.not-mobile .project-links a:hover span:after {
	width: 100%
}
.project-wrap {
	padding: 80px 0 0
}
.project-header {
	height: calc(100vh - 80px);
	position: relative
}
.project-header .project-slider {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0
}
.project-header.video-inner {
	padding: 0 0 61px
}
.project-header .slide {
	position: relative
}
.project-header .slide video {
	width: 100%;
	height: 100%
}
.project-header .slick-list, .project-header .slick-track {
	height: 100%
}
ul.slick-dots {
	position: absolute;
	bottom: 16px;
	width: 100%;
	text-align: center
}
ul.slick-dots li {
	display: inline-block
}
ul.slick-dots li button {
	font-size: 0;
	text-indent: -999px;
	overflow: hidden;
	display: block;
	width: 16px;
	height: 16px;
	background: #fff;
	border-radius: 50%;
	margin: 0 6px
}
ul.slick-dots li.slick-active button {
	background: #b73d21
}
.project-image {
	position: relative;
	padding: 0 0 50%
}
.project-image .bgimg {
	display: block
}
.single-image {
	padding: 0 0 50%
}
.half-image {
	display: inline-block;
	line-height: 0;
	width: 50%
}
.project-content {
	line-height: 0
}
.project-content .video-wrap {
	padding: 0 0 50%
}
.project-content .video-wrap .video-inner {
	position: absolute;
	width: 100%;
	height: 100%;
	background: #ebebeb
}
.project-text {
	background: #fff;
	padding: 100px 50px 30px;
	color: #000
}
.project-text .text {
	max-width: 900px;
	margin: 0 auto 30px;
	font-size: 16px;
	line-height: 22px
}
.project-text .text h1, .project-text .text h2 {
	font-size: 37px;
	line-height: 1;
	margin: 0 0 0.5em
}
.projects-nav {
	overflow: hidden
}
.projects-nav a {
	font-weight: 500
}
.projects-nav a span {
	display: inline-block;
	line-height: 16px;
	vertical-align: top;
	line-height: 22px
}
.projects-nav .prev-project span {
	margin: 0 0 0 10px
}
.projects-nav .next-project span {
	margin: 0 10px 0 0
}
.projects-nav .prev-project:before, .projects-nav .next-project:after {
	content: "";
	width: 16px;
	height: 16px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	display: inline-block;
	-webkit-transform-origin: center;
	transform-origin: center;
	position: relative
}
.projects-nav .prev-project {
	float: left
}
.projects-nav .prev-project:before {
	border-bottom: 2px solid #b73d21;
	border-left: 2px solid #b73d21;
	left: 5px
}
.projects-nav .next-project {
	float: right
}
.projects-nav .next-project:after {
	border-right: 2px solid #b73d21;
	border-top: 2px solid #b73d21;
	right: 5px
}
.view-full-project-wrapper {
	text-align: center;
	padding: 20px 0;
	font-weight: 500
}
.view-full-project-wrapper svg {
	fill: #fff;
	margin: 0 6px 0 0
}
.video-wrap, .video-inner {
	height: 100%;
	overflow: hidden;
	position: relative
}
.play-pause {
	top: 50%;
	left: 50%;
	margin: -27px 0 0 -27px;
	position: absolute;
	visibility: hidden;
	opacity: 0;
	-webkit-transition: opacity 0.3s, visibility 0.3s;
	transition: opacity 0.3s, visibility 0.3s;
	z-index: 2
}
.play-pause svg {
	fill: #fff
}
.play-pause.paused {
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
	visibility: visible;
	opacity: 1
}
@-webkit-keyframes "spin" {
from {
-webkit-transform:rotate(0deg);
transform:rotate(0deg)
}
to {
-webkit-transform:rotate(359deg);
transform:rotate(359deg)
}
}
@keyframes "spin" {
from {
-webkit-transform:rotate(0deg);
transform:rotate(0deg)
}
to {
-webkit-transform:rotate(359deg);
transform:rotate(359deg)
}
}
.loading {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -27px 0 0 -27px;
	height: 54px;
	width: 54px;
	border: 2px solid #fff;
	visibility: hidden;
	opacity: 0;
	-webkit-transition: opacity 0.3s, visibility 0.3s;
	transition: opacity 0.3s, visibility 0.3s;
	border-right-color: #b73d21;
	border-top-color: #b73d21;
	border-radius: 100%;
	-webkit-animation: spin 0.75s infinite linear;
	animation: spin 0.75s infinite linear
}
.loading.preload {
	z-index: 1;
	opacity: 1;
	visibility: visible
}
.video-wrap.loaded .loading.preload {
	display: none
}
.video-wrap.buffering {
	z-index: 2
}
.video-wrap.buffering .play-pause {
	opacity: 0;
	visibility: hidden;
	-webkit-transition: opacity 0.3s, visibility 0.3s;
	transition: opacity 0.3s, visibility 0.3s
}
.video-wrap.buffering .loading {
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
	visibility: visible;
	opacity: 1
}
.seek-bar {
	visibility: hidden
}
.rangeslider, .rangeslider__fill {
	display: block
}
.rangeslider {
	background: transparent;
	position: absolute;
	bottom: 0;
	width: 100%;
	margin: 0
}
.rangeslider--horizontal {
	height: 5px
}
.rangeslider--disabled {
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
	opacity: 0.4
}
.rangeslider__fill {
	background: #b73d21;
	position: absolute
}
.rangeslider--horizontal .rangeslider__fill {
	top: 0;
	height: 100%
}
.rangeslider--vertical .rangeslider__fill {
	bottom: 0;
	width: 100%
}
.rangeslider__handle {
	display: none
}
.rangeslider__handle:active, .rangeslider--active .rangeslider__handle {
	background-size: 100%
}
.rangeslider--horizontal .rangeslider__handle {
	top: -6px;
	touch-action: pan-y;
	-ms-touch-action: pan-y
}
.rangeslider--vertical .rangeslider__handle {
	left: -6px;
	touch-action: pan-x;
	-ms-touch-action: pan-x
}
.people-wrap {
	overflow: hidden;
	padding: 80px 0 0
}
.person {
	width: 20%;
	padding: 0 0 20%;
	position: relative;
	float: left;
	display: block
}
.person .static {
	opacity: 1;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s
}
.person .rollover {
	visibility: hidden;
	opacity: 0;
	-webkit-transition: opacity 0.5s, visibility 0s 0.5s;
	transition: opacity 0.5s, visibility 0s 0.5s;
	padding: 30px
}
.person .rollover h3, .person .rollover h2 {
	line-height: 1
}
.person .rollover h3 {
	font-size: 20px;
	font-weight: 400
}
.person .rollover h4 {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4em
}
.person .rollover .text {
	opacity: 0;
	-webkit-transition: opacity 1s;
	transition: opacity 1s
}
.not-mobile .person:hover .static, .is-mobile .person.hover .static {
	opacity: 0;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s
}
.not-mobile .person:hover .rollover, .is-mobile .person.hover .rollover {
	visibility: visible;
	opacity: 1;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s
}
.not-mobile .person:hover .rollover .text, .is-mobile .person.hover .rollover .text {
	opacity: 1;
	-webkit-transition: opacity 1s;
	transition: opacity 1s
}
.purpose-wrap {
	padding: 80px 0 0;
	overflow: hidden
}
.purpose-block {
	width: 33.3%;
	height: calc(100vh - 80px);
	min-height: 800px;
	float: left;
	position: relative;
	border-left: 1px solid #000;
	border-right: 1px solid #000
}
.purpose-block h2 {
	font-size: 37px;
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 20px
}
.purpose-block .text {
	padding: 80px 40px 40px;
	position: relative;
	top: 0;
	left: 0
}
.purpose-block .foldout-text {
	width: 210px;
	visibility: hidden;
	margin: 20px 0 0
}
.purpose-block .expand {
	position: relative;
	width: 21px;
	height: 21px;
	-webkit-transition: -webkit-transform 0.3s;
	transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
	transition: transform 0.3s, -webkit-transform 0.3s;
	-webkit-transform-origin: center;
	transform-origin: center
}
.purpose-block .expand:before, .purpose-block .expand:after {
	content: "";
	background: #b73d21;
	position: absolute
}
.purpose-block .expand:before {
	width: 3px;
	height: 21px;
	top: 0;
	left: 9px
}
.purpose-block .expand:after {
	width: 21px;
	height: 3px;
	left: 0;
	top: 9px
}
.purpose-block.text-open .expand {
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg)
}
.purpose-block .gradient {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.3)), to(rgba(0,0,0,0.1)));
	background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.1) 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000', GradientType=0 )
}
.approach {
	margin: 80px 0 0;
	position: relative
}
.approach .gradient {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: -webkit-gradient(linear, left top, right top, from(#000), to(transparent));
	background: linear-gradient(to right, #000 0%, transparent 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000', GradientType=1 )
}
.approach-text {
	width: 500px;
	padding: 80px 50px 50px;
	position: relative;
	visibility: hidden
}
.approach-text h1 {
	font-size: 37px;
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 20px
}
.approach-text p {
	margin: 0 0 1em
}
main {
	min-height: 100%;
	margin: 0 0 -200px;
	position: relative
}
main:after {
	content: "";
	display: block
}
main:after, footer {
	height: 200px
}
.fourofour {
	position: absolute;
	height: 100%;
	width: 100%
}
.fourofour h2 {
	font-size: 37px;
	font-weight: 700;
	margin: 0 0 0.5em
}
.fourofour .wrap {
	display: inline-block;
	text-align: left;
	padding: 80px 20px 200px
}
.omd-logo {
	fill: #ED1A3B
}
footer {
	background: #000;
	padding: 50px;
	position: relative
}
footer .logo {
	fill: #fff
}
footer .footer-text {
	width: 450px;
	position: absolute;
	top: 66px;
	left: 150px;
	line-height: 1.4
}
footer nav {
	position: absolute;
	right: 50px;
	top: 60px;
	font-weight: 500
}
footer nav li {
	line-height: 1em;
	margin: 0 0 1em
}
footer nav li a {
	display: inline-block;
	position: relative
}
footer nav li a:after {
	content: "";
	background: #b73d21;
	height: 2px;
	width: 0;
	-webkit-transition: width 0.8s;
	transition: width 0.8s;
	bottom: -4px;
	left: 0;
	display: block;
	position: absolute
}
footer nav li.current-menu-item a:after, footer nav li a:hover:after {
	width: 100%
}
footer .back-to-top {
	position: absolute;
	bottom: 20px;
	left: 50px;
	font-size: 12px;
	line-height: 12px;
	font-weight: 500
}
footer .back-to-top svg {
	width: 23px;
	height: 13px;
	fill: #b73d21;
	margin: 0 7px 0 0;
	display: inline-block;
	vertical-align: bottom
}
footer .social {
	position: absolute;
	white-space: nowrap;
	right: 0
}
footer .social li {
	display: inline-block;
	margin: 0 0 0 10px
}
footer .social li a svg {
	fill: #fff
}
footer .copy {
	position: absolute;
	bottom: 20px;
	right: 50px;
	font-weight: 500;
	font-size: 12px;
	line-height: 1
}
@-webkit-keyframes sending {
from {
width:0
}
to {
width:75%
}
}
@keyframes sending {
from {
width:0
}
to {
width:75%
}
}
@-webkit-keyframes sent {
from {
width:75%
}
to {
width:100%
}
}
@keyframes sent {
from {
width:75%
}
to {
width:100%
}
}
.subform {
	position: absolute;
	left: 50%;
	top: 55px;
	width: 450px;
	overflow: hidden
}
.subform h6 {
	font-size: 19px;
	font-weight: 500;
	float: left
}
.subform .form-wrap {
	width: 295px;
	float: right
}
.subform .input-wrap {
	display: inline-block;
	border-bottom: 2px solid #b73d21;
	-webkit-transition: border-color 0.5s;
	transition: border-color 0.5s;
	width: 100%;
	position: relative
}
.subform .input-wrap.input-active {
	border-bottom: 2px solid #fff
}
.subform.sending .input-wrap {
	border-bottom: 2px solid #fff
}
.subform.sending .input-wrap:after {
	content: "";
	height: 2px;
	width: 100%;
	background: #b73d21;
	position: absolute;
	bottom: -2px;
	-webkit-animation: sending 1s linear forwards;
	animation: sending 1s linear forwards
}
.subform input {
	background: none;
	border: none;
	width: 100%;
	font-size: 14px;
	line-height: 27px;
	color: #fff;
	font-weight: 400
}
.subform input::-webkit-input-placeholder {
font-size:14px;
color:#4c4c4c;
font-weight:400;
opacity:1;
-webkit-transition:opacity 0.3s;
transition:opacity 0.3s
}
.subform input::-moz-placeholder {
font-size:14px;
color:#4c4c4c;
font-weight:400;
opacity:1;
-webkit-transition:opacity 0.3s;
transition:opacity 0.3s
}
.subform input:-ms-input-placeholder {
font-size:14px;
color:#4c4c4c;
font-weight:400;
opacity:1;
-webkit-transition:opacity 0.3s;
transition:opacity 0.3s
}
.subform input:-moz-placeholder {
font-size:14px;
color:#4c4c4c;
font-weight:400;
opacity:1;
-webkit-transition:opacity 0.3s;
transition:opacity 0.3s
}
.subform input:focus::-webkit-input-placeholder {
opacity:0
}
.subform input:focus::-moz-placeholder {
opacity:0
}
.subform input:focus:-ms-input-placeholder {
opacity:0
}
.subform input:focus:-moz-placeholder {
opacity:0
}
.subform button[type="submit"] {
	color: #fff;
	font-size: 12px;
	font-weight: 500
}
.subform .submit-wrap {
	text-align: right
}
.subform .thanks {
	display: none
}
body.contact, body.page {
	background: #fff
}
body.home, body.projects {
	background:#000;
}
.contact-wrap {
	padding: 120px 0;
	color: #000
}
.form, .address, .map {
	display: inline-block;
	vertical-align: top
}
.contact-inner {
	width: 1340px;
	margin: 0 auto
}
.contact-inner h2 {
	font-weight: 500;
	font-size: 37px;
	line-height: 1;
	margin: 0 0 1em
}
.form {
	width: 670px
}
.form form {
	width: 100%;
	padding: 0 180px 0 0
}
.form form input, .form form textarea {
	width: 100%;
	background: none;
	padding: 5px 0;
	border: none;
	border-bottom: 2px solid #b73d21;
	margin: 0;
	font-size: 15px;
	line-height: 27px
}
.form form br {
	display: none
}
.form form input {
	height: 32px;
	line-height: 32px
}
.form form input[type="submit"] {
	font-weight: 500;
	float: right;
	width: auto;
	background: none;
	text-transform: uppercase;
	border: none
}
.form form textarea {
	resize: none;
	line-height: 20px
}
.form form div {
	position: relative;
	padding: 27px 0 0
}
.form form label {
	position: absolute;
	z-index: -1;
	top: 30px;
	-webkit-transition: all 0.3s;
	transition: all 0.3s
}
.form form .input-active label {
	top: 0;
	font-size: 12px
}
.wpcf7-form-control-wrap {
	display: block;
	margin: 0 0 26px
}
.wpcf7-form-control-wrap.your-message {
	margin: 0
}
label {
	font-weight: 500;
	font-size: 15px;
	line-height: 27px;
	display: block
}
.address {
	width: 180px;
	padding: 27px 12px 0
}
.address p {
	margin: 0 0 1em
}
.address ul.social li {
	display: inline-block;
	margin: 0 4px 0 0
}
.address ul.social li svg {
	fill: #000
}
.map {
	margin: 27px 0 0;
	width: 490px
}
.mapwrap {
	padding: 0 0 100%;
	position: relative
}
.mapwrap .googlemap {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0
}
body.snapshot-open {
	overflow: hidden
}
.snapshot-wrap {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: #000;
	z-index: 9;
	padding: 80px 0 0;
	overflow: auto
}
.snapshot-wrap .video-wrap {
	height: calc(100% - 80px)
}
.snapshot-wrap video {
	width: 100%;
	height: 100%
}
.snapshot-wrap .rangeslider {
	position: fixed;
	bottom: 0;
	left: 0
}
.close-snapshot {
	width: 28px;
	height: 28px;
	position: absolute;
	top: 28px;
	right: 50px
}
.close-snapshot:before, .close-snapshot:after {
	content: "";
	width: 28px;
	height: 4px;
	background: #fff;
	position: absolute;
	top: 12px;
	left: 0
}
.close-snapshot:before {
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg)
}
.close-snapshot:after {
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg)
}
.sound {
	position: absolute;
	bottom: 20px;
	right: 20px;
	opacity: 0.5;
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s
}
.sound.single-project-sound svg {
	fill: #000
}
.sound:hover {
	opacity: 1
}
.sound svg {
	fill: #fff;
	width: 30px;
	height: 24px
}
.sound .unmute-icon {
	display: block
}
.sound .mute-icon {
	display: none
}
.sound.muted .unmute-icon {
	display: none
}
.sound.muted .mute-icon {
	display: block
}

@media (min-aspect-ratio: 16 / 9) {
.fullscreen-video video {
	height: 300%;
	width: 100%;
	top: -100%
}
}

@media (max-aspect-ratio: 16 / 9) {
.fullscreen-video video {
	height: 100%;
	width: 300%;
	left: -100%
}
.project-header {
	height: auto
}
.project-header {
	padding: 0 0 56.25%
}
}

@media screen and (max-width: 1440px) {
.contact-inner {
	width: 924px
}
.form form {
	padding: 0
}
.form, .map {
	width: 372px
}
.subform {
	width: 295px;
	top: 45px
}
footer nav {
	top: 50px
}
footer .footer-text {
	width: 320px
}
.subform .form-wrap {
	width: 100%
}
.project-block {
	width: 33.3%;
	padding: 0 0 33.3%
}
.person {
	width: 25%;
	padding: 0 0 25%
}
}

@media screen and (max-width: 1020px) {
footer .logo {
	position: absolute
}
footer .footer-text {
	width: 210px;
	left: 100px;
	top: -7px;
	position: relative;
	margin: 0 0 50px
}
.subform {
	width: 210px
}
.contact-inner {
	width: 100%;
	padding: 0 50px
}
.project-block {
	width: 50%;
	padding: 0 0 50%
}
}

@media screen and (max-width: 800px) {
main {
	margin: 0 0 -300px
}
main:after, footer {
	height: 300px
}
.fourofour .wrap {
	padding: 80px 20px 300px
}
footer {
	padding: 40px 20px 20px
}
footer .footer-text {
	width: 310px;
	top: -5px;
	padding: 0 0 0 100px;
	left: 0;
	margin: 0
}
footer nav {
	top: 36px;
	right: 20px
}
footer .subform {
	position: relative;
	top: auto;
	left: auto;
	width: 100%;
	padding: 50px 0 10px
}
footer .subform .form-wrap {
	width: 100%
}
footer .back-to-top {
	left: 20px
}
footer .copy {
	right: 20px
}
}

@media screen and (max-width: 600px) {
header .logo {
	left: 20px
}
header .hamburger {
	right: 20px
}
header nav {
	font-size: 32px
}
header nav div {
	top: 85px;
	right: auto;
	padding: 0 20px
}
.intro svg.logo {
	width: 170px;
	height: 87px;
	margin: 0 0 50px
}
.project-block {
	width: 100%;
	padding: 0 0 100%
}
.person {
	width: 50%;
	padding: 0 0 50%
}
.purpose-block {
	width: 100%;
	height: auto
}
.purpose-block .text {
	padding: 80px 20px 40px
}
.contact-inner, .form, .map {
	width: 100%
}
.contact-inner {
	padding: 0 20px
}
.project-text {
	padding: 50px 20px 10px
}
footer .footer-text {
	width: 280px
}
footer nav {
	display: none
}
.approach-text {
	width: 80%;
	padding: 80px 20px 80px
}
}