/**! Colors **/

:root {
	--main-bg-color: #131f26;
 /* Bluish black */
	--white: #FFFFFF;
}



/* Base  */

*, h1, h2, h3, h4, h5, h6, p, ul, a {
	margin: 0;
	padding: 0;
}

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

[class*='transition--'].transition--active {
	/* Should stop the flickr when the site loads */
	opacity: 1 !important;
}

.clearfix {
	overflow: hidden;
}

html {
	font-size: 100%;
	background-color: var(--main-bg-color);
}

@media all and (max-width: 1024px) {
	html {
		font-size: 100%;
	}
}

@media all and (max-width: 768px) {
	html {
		font-size: 100% !important;
	}
	h1 {
		font-size: 200% !important;
	}
	h2 {
		font-size: 175% !important;
	}
	h3 {
		font-size: 150% !important;
	}
	h3 {
		font-size: 125% !important;
	}
}
body {
	font-size: 1.1em;
	line-height: 1.375em;
	font-family: 'Arial', 'Helvetica', 'Roboto', sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: var(--white);
	font-weight: 400;
}


/* Try to hide video controls */

/* This used to work for the parent element of button divs */
/* But it does not work with newer browsers, the below doesn't hide the play button parent div */

*::-webkit-media-controls-panel {
  display: none!important;
  -webkit-appearance: none;
}

/* Old shadow dom for play button */

*::-webkit-media-controls-play-button {
  display: none!important;
  -webkit-appearance: none;
}

/* New shadow dom for play button */

/* This one works! */

*::-webkit-media-controls-start-playback-button {
  display: none!important;
  -webkit-appearance: none;
}





/** Type **/

h1, h2, h3, h4 {
	font-family: 'Song Myung', serif;
	color:  var(--white);
	font-weight: 400;
	font-variant-ligatures: common-ligatures;
	letter-spacing:-0.020em;
}
h5, h6 {
	font-family: 'Arial', 'Helvetica', 'Roboto', sans-serif;
	color:  var(--white);
	font-weight: 400;
	font-variant-ligatures: common-ligatures;
}
h1 {
	font-size: 2.8em;
	line-height: 1.15em;
	margin-bottom: 0.1em;
}
h2 {
	font-size: 2em;
	line-height: 1.1em;
	margin-bottom: 0.5em;
}
h3 {
	font-size: 1.7em;
	line-height: 1.25em;
	margin-bottom: 0.5em;
}
h4 {
	font-size: 1.5em;
	line-height: 1.25em;
	margin-bottom: 0.5em;
}
.project h4 {
	display: inline-block;
	margin: 0;
}
h4+p {
	margin: 0.25em auto auto;
}
h5 {
	font-size: 1.125em;
	line-height: 1.22222222em;
}
h6 {
	font-size: 1.125em;
	line-height: 1.22222222em;
}
.project__description p {
	font-size: 1.2em;
	line-height: 1.3em;
}

p, span,ul, ol, li {
	font-size: 1em;
	line-height: 1.25em;
}
li {
padding: 0 0 0.25em;
}
.social-networks, .navigation--horizontal li, .agency, .project-type {
	font-size:0.9em !important;
}
.project-type {
	font-style: italic;
	font-size:1em !important;
}
p+p {
	margin: 1em 0 1em !important;
}
p+h3 {
	margin: 3em 0 0.5em;
}
p+ul {
	margin-top: 0.5em;
}
.project__body p,.project__body ul {
	max-width: 700px;
}
p, ul, ol, pre, table, blockquote {
	margin-bottom: 1.625em;
}
li {
	list-style-type: circle;
	list-style-position: outside;
  margin-left: 1em;
  padding-bottom: 0.25em;
}
.comingsoon {
	color:#666 !important;
	font-size:0.8em;
	font-style:normal;
}
.caption {
	font-size:0.8em;
	margin-top: 0.5em;
}


/* Footer columns */
.column {
  float: left;
  width: 50%;
}
/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
.column-left {
  text-align: left;
}
.column-center {
  text-align: center;
}
.column-right {
  text-align: right;
}
.column-right img:last-child {
	margin: 0;
}
footer  img {
	width: 64px;
		height: 64px;
		float: right;
		margin: 0 !important;
}


@media all and (max-width: 768px) {
/* Footer columns */
.column {
  width: 100%;
}
.column-right {
  text-align: left;
  margin-top: -1em;
}
.section-services .column-right {
  text-align: left;
  margin-top: 4em;
}
.column-right .social-networks {
	margin-top:2em;
	margin-bottom: 4em;
}
footer  img {
	width: 64px;
		height: 64px;
		float: left;

}
}



.social-networks li {
	display: inline-block;
  margin-left:0em;
  padding-bottom: 0em;

}
.social-networks li:not(:last-child) {
	margin-right: 0.75em;
}
.social-networks li a {
	transition: 0.3s ease;
	-webkit-transition: 0.3s ease;
	-moz-transition: 0.3s ease;
	opacity: .5;
}
.social-networks li a:hover {
	opacity: 1;
}
ul:not(.menu):not(.slides):not(.accordion):not(.tabs):not(.tabs-content), ol:not(.menu):not(.slides):not(.accordion):not(.tabs):not(.tabs-content) {
	line-height: 1.625em;
}
ol {
	list-style-type: upper-roman;
	list-style-position: inside;
}
.em {
	font-style: italic;
}
.text-center {
	text-align: center;
}
.text-left {
	text-align: left;
}
.text-right {
	text-align: right;
}
hr.solid {
    border: none;
    border-top: 1px double #454545;
    overflow: visible;
    text-align: center;
    height: 1px;
    margin:4.5em 0 2em;
}
footer hr.solid {
    margin-bottom:1em;
}



@media all and (max-width: 767px) {
	.text-center-xs {
		text-align: center;
	}
	.text-left-xs {
		text-align: left;
	}
	.text-right-xs {
		text-align: right;
	}
}









/**! Colors **/

.bg--primary p, .bg--primary span, .bg--primary ul, .bg--primary a:not(.btn) {
	color:  var(--white);
}
.bg--primary h1, .bg--primary h2, .bg--primary h3, .bg--primary h4, .bg--primary h5, .bg--primary h6, .bg--primary i {
	color: var(--white);
}
.bg--white {
	background: var(--white);
}
.bg--white p, .bg--white span, .bg--white ul, .bg--white a:not(.btn) {
	color: #555555;
}
.bg--white h1, .bg--white h2, .bg--white h3, .bg--white h4, .bg--white h5, .bg--white h6, .bg--white i {
	color: #171717;
}
.image-bg:not(.image-light) *:not(a) {
	color: var(--white);
}












/* Header */

header {
	padding-top: 2em;
	padding-bottom: 8em;
}
header .logo {
	display: block;
	margin-bottom: 0.8125em;
}
header .logo img {
	max-height: 1.08333333em;
	margin-top: 0em;
	width: 192px;
}
header .logo.logo--lg img {
	max-height: 1.625em;
}
header a:not(:last-child) {
	display: inline-block;
	margin-right: 1.625em;
}
@media all and (max-width: 767px) {
	header {
		padding-bottom: 3em;
	}
	header a {
		display: block;
	}
	header a:not(:last-child) {
		margin-bottom: 0.40625em;
	}
	header .logo {
		display: block;
		margin-bottom: 0em;
	}
}







/**! Layout **/

.container {
	margin-right: auto;
	margin-left: auto;
}
@media (min-width: 768px) {
	.container {
		max-width: 748px;
	}
}
@media (min-width: 992px) {
	.container {
		max-width: 912px;
	}
}
@media (min-width: 1200px) {
	.container {
		max-width: 1120px;
	}
}

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
	position: relative;
	min-height: 1px;
	padding: 0 16px;
}
.col-sm-10 {
	max-width: 700px;
}
.project__description {
	margin-bottom: 8em;
}
.project__body .col-sm-12 {
	margin-bottom: 8em;
}

@media (min-width: 768px) {
	.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
		float: left;
	}
	.col-sm-12 {
		width: 100%;
	}
	.col-sm-11 {
		width: 91.66666667%;
	}
	.col-sm-10 {
		width: 83.33333333%;
	}
	.col-sm-9 {
		width: 75%;
	}
	.col-sm-8 {
		width: 66.66666667%;
	}
	.col-sm-7 {
		width: 58.33333333%;
	}
	.col-sm-6 {
		width: 50%;
	}
	.col-sm-5 {
		width: 41.66666667%;
	}
	.col-sm-4 {
		width: 33.33333333%;
	}
	.col-sm-3 {
		width: 25%;
	}
	.col-sm-2 {
		width: 16.66666667%;
	}
	.col-sm-1 {
		width: 8.33333333%;
	}
}
@media (min-width: 992px) {
	.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
		float: left;
	}
	.col-md-12 {
		width: 100%;
	}
	.col-md-11 {
		width: 91.66666667%;
	}
	.col-md-10 {
		width: 83.33333333%;
	}
	.col-md-9 {
		width: 75%;
	}
	.col-md-8 {
		width: 66.66666667%;
	}
	.col-md-7 {
		width: 58.33333333%;
	}
	.col-md-6 {
		width: 50%;
	}
	.col-md-5 {
		width: 41.66666667%;
	}
	.col-md-4 {
		width: 33.33333333%;
	}
	.col-md-3 {
		width: 25%;
	}
	.col-md-2 {
		width: 16.66666667%;
	}
	.col-md-1 {
		width: 8.33333333%;
	}
}
.clearfix:before, .clearfix:after, .container:before, .container:after, .row:before, .row:after {
	content: " ";
	display: table;
}
.clearfix:after, .container:after {
	clear: both;
}
/**! Spacing **/

section, footer {
	padding-top: 0;
	padding-bottom: 0;
}
section.space--sm, footer.space--sm {
	padding-top: 0;
	padding-bottom: 0;
}
section.space--lg, footer.space--lg {
	padding-top: 0;
	padding-bottom: 0;
}
section.space--xlg, footer.space--xlg {
	padding-top: 0;
	padding-bottom: 0;
}
section.space--0, footer.space--0 {
	padding: 0;
}
section.section--even, footer.section--even {
	padding-top: 0;
	padding-bottom: 0;
}
section.space-bottom--sm, footer.space-bottom--sm {
	padding-bottom: 0;
}
footer {
	margin-top: 0em;
	margin-bottom: 1em;
}
img, embed, object, video, iframe {
	width: 100%;
	max-width: 100%;
	border: 0;
	overflow-x: hidden;
	overflow-y: visible;
}
img, embed, object, video, iframe, p+img, img:last-child {
	margin: 0.5em auto 0.5em;
}

p+img, img:last-child {
	margin-bottom: 0;
	margin-top: 2em;
}
video+h4 {
	padding-top: 0.25em;
}
.embed-container {
	position: relative;
	padding-bottom: 66.25%;
	height: 0;
	overflow: hidden;
	max-width: 100%;
	height: auto;
}
.embed-container iframe, .embed-container object, .embed-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}



/*====== Background video style ======*/
@media screen and (min-width: 1025px){
	.project > a > .background-video {
		background: none !important;
	}
}

@media screen and (max-width: 1024px){
	.project > a .background-video {
		display: block;
		background-size: contain !important;
		background-repeat: no-repeat !important;
	}

	.project > a > .background-video > video{
		opacity: 0;
	}
}
/*====== End Background video style ======*/

a+h4 {
	padding: 0.5em 0 0 0;
}
.project-nav {
	margin-top: 11em;
	margin-bottom: 3em;
}
.home .col-md-6, .services .col-sm-10 {
	margin-bottom: 2em;
}
.services .section-cta {
	margin-top: 4em;
}
.home .col-sm-10:last-child, .services .section-cta .col-sm-10:last-child {
	margin-bottom: 0em;
	-webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.project-thumbnails .project {
	margin-bottom: 0em;
}
.project-thumbnails:last-child {
	margin-bottom: 8em;
}
@media all and (max-width: 767px) {
.project-thumbnails:last-child {
	margin-bottom: 0em;
}
.project__body .col-sm-12 {
	margin-bottom: 4em;
}
img, embed, object, video, iframe, p+img, img:last-child {
	margin: 0.5em auto 0em;
}
}
.project-thumbnails .col-md-6 {
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
}
.project-thumbnails .col-md-6:hover {
	transform: scale(0.98);
	-webkit-transform: scale(0.98);
	opacity: .6;
}
.project a:hover {
	opacity:1;
}
.project em:before {
	content: '\00a0 \2014 \00a0';
}
@media all and (max-width: 970px) {
	.project-thumbnails .project {
	margin-bottom:3em;
}



	.project__description h2 {
		margin-bottom: 1.1304347826087em;
	}
	@media all and (max-width: 767px) {
		.project__description {
			margin-bottom: 8em;
		}
	}
	@media all and (max-width: 767px) {
		section, footer, section.section--even {
			padding: 0 0;
		}
		section.space--lg, footer.space--lg, section.section--even.space--lg {
			padding: 0 0;
		}
		section.space--xlg, footer.space--xlg, section.section--even.space--xlg {
			padding: 0 0;
		}
	}
	div[class*='col-']>div[class*='col-']:first-child {
		padding-left: 0;
	}
	div[class*='col-']>div[class*='col-']:last-child {
		padding-right: 0;
	}
	@media all and (max-width: 767px) {
		.col-xs-6:nth-child(odd) {
			padding-right: 7.5px;
		}
		.col-xs-6:nth-child(even) {
			padding-left: 7.5px;
		}
	}






/* Navigation */

nav a.link-current {
	pointer-events: none;
}
nav a.link-current .underline {
	background-image: none;
	opacity: 1;
}
nav ul {
	margin-bottom: 2em;
}
nav li {
	margin-bottom: 0.27083333em;
}
}
@media all and (max-width: 767px) {
	.nav-inline {
		margin-bottom: 3.25em;
	}
}
.navigation--horizontal li {
	display: inline !important;
	margin-bottom: 0;
}
.navigation--horizontal li:not(:last-child) {
	margin-right: 3.25em !important;
}
@media all and (max-width: 767px) {
	.navigation--horizontal li {
		display: block;
	}
	.navigation--horizontal li:not(:last-child) {
		margin-bottom: 0.40625em;
		margin-right: 0;
	}
	.prev-project {
		padding-bottom: 2em;
	}
	img+img, .project__body img {
		margin-bottom: 0em !important;
	}
}









/**! Links **/

a:hover, a:focus, a:active {
	text-decoration: underline;
	outline: none;
		transition: 0.2s ease;
	-webkit-transition: 0.2s ease;
	-moz-transition: 0.2s ease;
}
a:hover {
opacity:0.5;
}
.project a {
	text-decoration: none;
}
.type--fade {
	opacity: .5;
}







	/**! Transitions **/
	[class*='transition--'] {
		transition: 1s ease;
		-webkit-transition: 1s ease;
		-moz-transition: 1s ease;
		opacity: 0;
	}
	[class*='transition--'].transition--active {
		opacity: 1;
	}
	.transition--scale {
		transform: scale(0.98);
		-webkit-transform: scale(0.98);
	}
	.transition--scale.transition--active {
		opacity: 1;
		transform: scale(1);
		-webkit-transform: scale(1);
	}
	.transition--slide {
		transform: translate3d(0, 8vh, 0);
		-webkit-transform: translate3d(0, 8vh, 0);
	}
	.transition--slide.transition--active {
		transform: translate3d(0, 0, 0);
		-webkit-transform: translate3d(0, 0, 0);
	}
	/* Loader */
	.loader {
		height: 4px;
		width: 100%;
		position: absolute;
		top: 0;
		z-index: 99;
		overflow: hidden;
		pointer-events: none;
		transition: 0.3s ease;
		-webkit-transition: 0.3s ease;
		-moz-transition: 0.3s ease;
	}
	.loader.loader--fade {
		opacity: 0;
	}
	.loader:before {
		display: block;
		position: absolute;
		content: "";
		left: -25%;
		width: 25%;
		height: 3px;
		background-color: #131f26;
		animation: loading 3s linear infinite;
	}
	.bg--primary .loader:before {
		background-color: #666;
	}
	@keyframes loading {
		from {
			left: -25%;
		}
		to {
			left: 125%;
		}
	}
	@media all and (max-width: 1200px) {
		.loader {
			display: none;
		}
	}