/* ------------ GENERAL ------------ */

* { margin: 0 auto; padding: 0; }

body {
	font-size: .85em;
	letter-spacing:.35em;
    text-align: center;
	font-family: aktiv-grotesk, sans-serif;
	font-weight: 400;
	font-style: normal;
	text-transform:uppercase;
	color: #ebebeb;
	background:black;
}

/* ------------ Media Query ------------ */

/* ------------ Color ------------ */

body a, .txt_prj_title , .role_item_title, .role_item  {color:inherit;text-decoration: none;}
.nav_title, .role_item, .txt_years_active, .footer_left, .year, .txt_info { color:#757575; }
.cta_constrain { color:white; }

/* ------------ Nav ------------ */

.nav {
	padding:5em 0;
	z-index: 100;
	position:fixed;
	right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
}
.nav a, .nav_dead  {
	border-bottom:2px solid rgba(255, 255, 255, 0.0);
	transition:border, .15s ease-in, opacity.15s ease-in;
	padding-bottom: 1em;
}
.nav_dead, .nav a:hover { border-bottom: 2px solid #ebebeb; padding-bottom: 1em; }
.nav_left, .nav_title { float: left; margin-right:0em;}
.nav_right, .nav_dead { float: right; margin-left: 2em; }
.nav_title {display:none;}


/* ------------ CTA HEADER ------------ */

.cta {
	font-size: 1.2em;
	padding: 18em 0;
	margin-top:6.25em;
	display: inline-block;
}

#image-container {
	font-size: 1.2em;
	padding: 18em 0;
	margin-top:6.25em;
	position: relative;
	overflow: hidden;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	display: inline-block;
}

#image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 3s ease-in-out;
  z-index: -1;
}

.cta, .thumb, .thumb_u {
	background-size: cover;
	background-position: center center;
	background-color:black;
	background-repeat:no-repeat;
	background-size: cover;
	background-position: center center;
	background-color:black;
	background-repeat:no-repeat;
}
.cta_constrain {
	width: 80%;
	max-width: 1200px;
	font-size: 2em;
	line-height:2em;
	letter-spacing:.35em;
}

/* ------------ Thumbnails ------------ */

.txt_prj_allprojects { padding:4em 0; }

.txt_years_active { margin-left: 1em; }

.section_thumbnails { display:inline-block; }

.txt_n {
	padding: 2em 0 6em 0;
	pointer-events: none;
}

.year {
	margin:0 .75em;
}

.thumb_c {
	width:50%;
	float: left;
	position:relative;
}
	
.thumb, .thumb_u { padding-top: 46.25%; background-color:#151515; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */  }

.thumb_u {
	margin-top:-46.25%;
	opacity:0;
	transition:opacity, .4s ease-out;
}
.thumb_u:hover { opacity:1; }

/* ------------ Work Images ------------ */

.container_project_imgs {
	font-size: 0;
	padding-top:50px;
}

.img_work_100, .img_work_50, .img_work_50_locked, .img_work_33, .img_work_33_locked, .img_work_25, .img_work_25_locked, .img_work_20, .img_work_20_locked, .prj_video {
	float:left;
	margin:50px 10px;
	width: 100%;
	opacity: 1;
}

.img_work_100 { margin:50px 0px;}

.img_work_50, .img_work_50_locked {width:calc(50% - 20px)}
.img_work_33, .img_work_33_locked {width:calc(33.333% - 20px)}
.img_work_25, .img_work_25_locked {width:calc(25% - 20px)}
.img_work_20, .img_work_20_locked {width:calc(20% - 20px)}

@media (max-width: 1600px) {
	.img_work {width: 100%; }
}
@media (max-width: 1100px) {
	.img_work, .img_work_33, .img_work_50, .img_work_100, .prj_video { margin: 4% 0;}
	.img_work_50, .img_work_33 {width: 100%; }
	.img_work_25 {width:calc(50% - 20px);}
}

.prj_video {width: calc(100% - 4px);max-width: 1280px; margin:auto;}
.prj_video_inline {width: calc(50% - 4px);}
.prj_vimeo_wrapepr {
	max-width: 960px;
	max-height: 540px;
	margin: 0 auto;
	padding: 0;
}
.prj_vimeo {
	width:100%;
	height: 540px;
	}
	
.img_work_50_locked, .img_work_33_locked, .img_work_25_locked, .img_work_20_locked {
	margin:10px;
}	

/* ------------ Work Text ------------ */

.txt_prj_c {
    padding:15em 0 0px 0;
	display: inline-block;
	margin:auto;
	max-width:1940px;
}

.txt_prj_left {
	margin:0px;
	display: inline-block;
	vertical-align: top;
}

.txt_prj_right { display: none; }

.txt_prj_subtitle {display: block; padding:2em 0; color: #757575;}

.role_item_title, .role_item { margin:0 1em; display:none; }

.txt_prj_c a {
	margin-left:.25em;
	border-bottom: 2px solid #757575;
	padding-bottom:.35em;
	letter-spacing: .25em;
	transition:.15s ease-in, opacity.15s ease-in;
}

.txt_prj_c a:hover { color:#ebebeb; border-bottom: 2px solid #ebebeb;}

.txt_prj_breaker {
	font-size: initial;
	margin: auto;
	clear:both;
	padding:100px;
}

/* ------------ Info left-orginal-width 44%------------ */

.img_info { width:40%; float:left;}

.txt_info {

	margin-bottom:100px;
	text-transform:initial;
	letter-spacing:initial;
	text-align:left;
	font-size: 3em;
	line-height:1.5em;
	float:left;
}

.txt_info a {color:#ebebeb; letter-spacing:initial;}

.txt_info_header {
	font-size: 1.5em;
	color:#ebebeb;
}

/* ------- Footer ------- */


.return { clear:both;}

.txt_return {
	margin: 4em 0 5em 0;
	display: inline-block;
	border-bottom:2px solid rgba(255, 255, 255, 0.0);
	transition:border, .15s ease-in, opacity.15s ease-in;
	padding-bottom: 1em;
}

.txt_return:hover { border-bottom: 2px solid #ebebeb;}

.footer {
	padding: 2em 0 6em 0;
	border-top: 2px solid #757575;
	font-size:1.25em;
	clear:both;
}

.footer_left { float:left; text-transform:initial; letter-spacing:initial;}
.footer_right { float: right;}

.footer_right a { margin: 0 0 0 1em; transition:opacity, .2s ease-out; opacity: 0.5;text-transform:initial; letter-spacing:initial;}
.footer_right a:hover {	opacity: 1; }

.img_social { width: 1em;}

/* ------------ Global widths ------------ */

.nav, .cta, #image-container, .section_thumbnails, .container_project_imgs, .txt_prj_c, .footer  {
	width:calc(100% - 200px);
}
@media (max-width: 1000px) {
	.thumb_c { width:100%;}
	.nav, .cta, #image-container, .section_thumbnails, .container_project_imgs, .txt_prj_c, .footer  {
		width:calc(100% - 50px);
	}
}

@media (min-width: 2000px) {
	.thumb_c { width:33.333%; }
}

/* ------- COMPRESSED ------- */

@media (max-width: 1300px) {
	.year {display:none;}
}

@media (max-width: 1200px) {
	.cta_constrain { width:80%; font-size: 1.5em; }
	.footer_right, .footer_left { width:100%; }
	.footer_right {margin-top:1em;}
}