/*
Theme Name: Drew Innis Studio Portfolio Theme
Author: Drew Innis
Author URI: http://drewinnis.com/
Description: A post modern, simple, mobile first & responsive portfolio theme designed for DrewInnis.Studio.
Version: Beta 1.1
Tags: black, white, light, one-column, two-columns, three-columns, flexible-width, grid, fluid-layout, mobile-first, responsive-layout, custom-menu, featured-images, portfolio

*/

/* ===========================================================================
							RESETS & GLOBALS
=============================================================================*/

	* {
		padding: 0;
		margin: 0;
		box-sizing: border-box;
	}



/* ===========================================================================
							GLOBAL TYPOGRAPHY
=============================================================================*/

	body {
		font-family: "ff-netto-web", sans-serif;
		font-size: .8rem;
		background: #F6F6F6;
		color: #000;
	}

	p {
		margin-bottom: 1rem;
		line-height: 1.2;
		text-transform: uppercase;
	}

	p:last-child {
		margin-bottom: 0;
	}

	h1 {
		font-size: 1rem;
		margin: 1rem 0;
		letter-spacing: 2px;
	}

	.site-title:before {
		content: "DI.STUDIO";
	}

	h3 {
		font-size: 1rem;
		text-transform: uppercase;
		letter-spacing: 4px;
	}

	h4 {
		border-bottom: 1px solid #000;
		text-transform: uppercase;
		display: inline-block;
		margin: 1rem 0 .8rem 0;
		padding-bottom: 2px;
	}

	h5 {
		font-size: 1.1rem;
		text-transform: uppercase;
		margin: 1.5rem 0 .5rem 0;
	}

	.projectPreview h3 {
		text-align: center;
		margin: 1rem 0;
	}


	.menu-item {
		text-transform: uppercase;
	}

	.current-menu-item {
		border-bottom: 2px solid #000;
		padding-bottom: 2px;
	}

	.menu-item a:hover {
		border-bottom: 2px solid #000;
		padding-bottom: 2px;
	}

	a {
		text-decoration: none;
		color: #000;
	}

	.projectPreview a {
		display: inline-block;
	}

	ol {
		list-style-type: lower-roman;
		text-transform: uppercase;
		margin-left: 1rem;
	}

	ul {
		list-style: none;
	}
	.contact-process li {
		line-height: 1.4;
	}



/* ===========================================================================
							GLOBAL STRUCTURE
=============================================================================*/

	.global-width {
		width: 85%;
	}

	.wrap {
		display: flex;
		justify-content: space-between;
		margin: 0 auto;
		height: 100%;
	}

	.main-header {
		position: fixed;
		width: 100%;
		height: 3.5rem;
		background-color: #F6F6F6;
		z-index: 1000;
	}

	.header h1 {
		float: left;
		margin: 1rem .8rem 1rem 0;
	}

	.footer-nav {
		position: fixed;
		right: 0;
		left: 0;
		bottom: 4%;
		text-align: center;
		margin: 0 auto;
	}

	.tertiary-nav {
		display: inline-block;
		font-size: 1rem;
		letter-spacing: 2px;
		text-transform: uppercase;
		color: #fff;
		background-color: rgba(0, 0, 0, .30);
		width: auto;
		padding: .8rem 1.5rem;
		/*border-radius: 1.4em;*/
		box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
	}

	.footer-nav-item {
		display: inline-block;
	}

	.footer-nav-item a {
		color: #fff;
		display: inline-block;
	}

	.secondary-nav {
		display: none;
		}

	.secondary-nav li, #work li {
		list-style: none;
	}

	.contact-form-wrap {
		display: none;
	}

	.fa-instagram {
		font-size: 1.2rem !important;
		position: relative;
	}

	.menu-item {
		list-style: none;
		margin: 1rem .8rem 1rem 0;
		display: inline-block;	
	}

	.menu-item:last-child {
		margin-right: 0;
	}

	.lightbox {
	padding-bottom: 4.5rem;
}

/* ===========================================================================
					WORK / FILM PROJECT GLOBAL PROPERTIES
=============================================================================*/

	#grid, #studies-grid, #work, .photo-project, .film-project, .project {
		margin: 0 auto;
		position: relative;
		padding: 3.5rem 0 5rem 0;
	}

	.projectPreview img {
		max-width: 100%;
	}

	.projectPreview {
		list-style: none;
		margin-bottom: 20px;
	}

	.work-footer {
		margin: 0 auto;
	}

	.center {
		margin: 0 auto;
		position: relative;
	}

	#study {
		margin: 0 auto;
		position: relative;
		padding: 3.5rem 0 6rem 0;
	}


	.size-1of1 { 
		width: 100%; 
	}

	.size-1of2 {
		width: 50%; 
	}
	.size-1of3 {
		width: 33.3333%; 
	}



/* ===========================================================================
					 WORK SINGLE PAGES ~ GLOBAL PROPERTIES
=============================================================================*/

	.meta-categories  {
		display: none;     /* category tags turned off for version 1.0*/
	}



/* ===========================================================================
							WORK / PHOTO PROJET GALLERY
=============================================================================*/

	.photo-project {
		display: flex;
		width: 85%;
		flex-direction: column;
		margin-bottom: 2.4rem;
	}

	.gallery-description :nth-last-child(1){ 	/* hide h4 arrow */
		display: none;
	}

	.gallery-image {
		margin-bottom: 4rem;
	}

	.photo-project :nth-last-child(2) {
		margin-bottom: 0;
	}

	.gallery-image {
		order: 1;
	}

	.gallery-description {
		order: 5;
	}

	.gallery-bumper {
		order: 6;
	}

	.social-bumper {
		display: none;
	}

	.project-nav {
		margin-top: 2.5rem;
		text-align: center;
	}



/* ===========================================================================
							WORK / FILM PROJECTS
=============================================================================*/

	.lightbox {
		display: none;
	}

	.credits span {
		font-style: normal;	
	}
	
	.festival li {
		text-transform: uppercase;
		line-height: 1.4;
	}

	.credits {		
		text-transform: uppercase;
		font-style: italic;
		line-height: 1.4;
	}

	.embed-container { 
		position: relative;
		padding-bottom: 56.25%;
		padding-top: 8.5em;
		height: 0; 
		overflow: hidden; 
		max-width: 100%; 
	} 
	
	.embed-container iframe, .embed-container object, .embed-container embed { 
		position: absolute;
		top: 0; 
		left: 0; 
		width: 100%; 
		height: 100%; 
	}

/* ===========================================================================
							WORK / PROJECTS
=============================================================================*/

	.project-docfilms {
		padding: 2.5rem 20% 0 20%;
}

	.project {
		display: flex;
		width: 85%;
		flex-direction: column;
		margin-bottom: 2.4rem;
	}


/* ===========================================================================
							STUDIES PAGE
=============================================================================*/

	.study-title h4 {
		margin: 0
	}

	#studies-grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.study-preview {
		height: 9rem;
		list-style: none;
		padding: 0 1.2rem 2.4rem 1.2rem;
	}

	.study-preview h4, .study-date {
		display: none;
	}

	.study-preview img {
		height: 100%;
	}

	.photo {
		margin: 1rem 0;
		}

	img {
		max-width: 100%;
		height: auto;
		}

	.study-image img {
		min-width: 100%;
	}

	.study-image {
		list-style: none;
	}

	.study-image {
		margin-bottom: 10rem;
	}

	.study-image:last-child {
		margin: 0;
	}

	.study-footer {
		position: fixed;
		right: 0;
		left: 0;
		bottom: 0;
		height: 6em;
		margin: 0 auto;
		background: #F6F6F6;
		padding-top: 1rem;
	}

	.study-footer h4 {
		display: inline-block;
		border-bottom: 1px solid #000; 
		padding-bottom: 3px;
		margin-bottom: 3px;
	}

	.study-title {
		display: inline-block;
		width: 50%;
	}

	.study-nav {
		width: 50%;
		float: right;
	}

	.study-nav {
		list-style: none;
		text-align: right;
	}

	.circle {
		display: inline-block;
		border: 1px solid #000;
		border-radius: 10px;
		margin-bottom: 5px;
		padding: 3px 1em 3px 1em;
	}

	#socialscroll {
		display: none;
		}

	.follow li {
		list-style: none;
		display: block;
		padding-bottom: .2rem;
	}

	.header-space {
		padding-top: 3.5rem; /* add headroom for main-header nav*/
	}



/* ===========================================================================
							INFORMATION PAGE
=============================================================================*/

	.process img:first-child, .clients img:first-child {
		display: none;
	}

	.contact-follow, .contact {
		display: none;
	}

	.info-process-image, .info-client-image {
		display: none;
}	

	.about, .process {
		margin-bottom: 1rem;
}

	.clients {
		margin-bottom: 6rem;
}

/* ===========================================================================
							CONTACT PAGE
=============================================================================*/

	.contact-container {
			position: relative;
	}

	.contact-typeform {	
		display: block;
		width: 100%;
		height: 100vh;
		padding: 3.5rem 0 0 0;
		position: absolute; left:0; right:0; bottom:0; top:0; border:0; 
	}


/* ===========================================================================
						CONTACT FORM OVERLAY
=============================================================================*/


	#sidebarform, #mobileform {
		display: none;
}

	.overlay {
  		height: 100%;
 		width: 100%;
  		display: none;
  		position: fixed;
  		z-index: 3000;
  		top: 0;
  		left: 0;
  		background-color: rgba(255,255,255, 1);
	  	overflow: scroll;
}

	.overlay-content {
  		position: relative;
  		width: 100%;
  		text-align: center;
  		margin-top: 30px;
  		overflow: scroll;
}

	.overlay a {
  		padding: 8px;
  		text-decoration: none;
  		color: #000;
  		display: block;
  		transition: 0.3s;
}

	.overlay a:hover, .overlay a:focus {
  		color: #f1f1f1;
}

	.overlay .closebtn {
 		text-align: left;
 		margin-left: 30px;
 		padding: 0;
 		font-size: 3rem;
}



/* ===========================================================================
						MEDIA QUERIES
=============================================================================*/

	@media screen and (max-width: 400px){
		#grid[data-columns]::before {
			content: '1 .column.size-1of1';
		}
	}

	@media screen and (min-width: 401px) and (max-width: 600px) {
		#grid[data-columns]::before {
			content: '2 .column.size-1of2';
		}

		#grid { 
			display: flex; 
			justify-content: space-between;
		}

		.column:first-child {
			margin-right: 4rem;
		}

		.global-width {
			width: 85%;
		}
		.projectPreview {
			list-style: none;
			margin-bottom: 45px;
		}
		
		h3 {
			font-size: 1rem;
			letter-spacing: 2px;
		} 
	}

	@media (min-width: 796px) {

		.container {
			flex-direction: row;
		}

		.photo {
			margin: 20px 0 0 20px;
			line-height: normal;
		}


		.photo-project {
			width: initial;
		}

		img {
			width: auto;
		}

		#socialscroll {
			display: initial;
			margin-left: 20px;
			position: fixed;
		}

		#studies-grid {
		flex-wrap: wrap;
		}

	}


	@media screen and (min-width: 601px) and (max-width: 1100px) {
		#grid[data-columns]::before {
			content: '2 .column.size-1of2';
		}

		#grid { 
			display: flex; 
			justify-content: space-between;
		}

		.site-title:before {
		content: "DREWINNIS.STUDIO";
		}

		.column:first-child {
			margin-right: 6rem;
		}

		.global-width {
			width: 85%;
		}
		.projectPreview {
			list-style: none;
			margin-bottom: 45px;
		}
		.study-preview {
			height: 250px;
			padding: 2.5rem;
		}

	}

	@media screen and (min-width: 1101px) {
		#grid[data-columns]::before {
			content: '3 .column.size-1of3';
		}

		body {
		font-size: .9rem;
		}

		.global-width {
			width: 70%;
		}
		#grid { 
			display: flex; 
			justify-content: space-between;
			padding: 4.5rem 0 5rem 0;
		}		
		.study-preview li a {
			display: block;
		}

		.column {
			margin-right: 6.5rem;
		}

		.column:last-child {
			margin-right: 0;
		}

		.tertiary-nav {
			display: none;
		}
		.main-header {
			height: 4.5rem;

		}
		.header h1 {
			position: absolute;
			left: 30px;
			margin: 1.5rem .8rem 1.5rem 0;
		}

		.menu-item {
			margin: 1.5rem .8rem 1.5rem 0;
		}

		.contact-menu-item {
			margin: 1.5rem 0 1.5rem 0;	
		}

		.primary-header {
			float: left;
		}

		.secondary-nav {
			display: inline-block;
			float: right;
		}

		.contact-header {
			list-style: none;
			margin: 1.5rem 0 1.5rem 0;
			float: left;
		}

		.studyPreview {
			padding: 2.5em;
		}
		
		.study-footer {
			position: static;
		}
		
		.study-title {
			text-align: center;
			width: 100%;
		}

		.study-nav {
			text-align: center;
			width: 100%;
			float: none;
			margin: 2rem 0 3rem 0;
		}

		#study {
			padding-bottom: 3rem;
		}
		
/* ===========================================================================
						CONTACT FORM SIDEBAR
=============================================================================*/
		
		
		#black-overlay {
 			position: fixed;
  			display: none;
  			width: 100%;
  			height: 100%;
  			top: 0;
  			left: 0;
  			right: 0;
  			bottom: 0;
  			background-color: rgba(0,0,0,0.6);
  			z-index: 1001;
  			cursor: pointer;
		}	
		
		#sidebarform {
			display: block;
		}
				
		.sidenav {
  			height: 100%;
  			width: 0;
  			position: fixed;
  			z-index: 2002;
  			top: 0;
  			right: 0;
  			background-color: #ffffff;
  			overflow-x: hidden;
  			transition: 0.5s;
  			padding-top: 60px;
		}
		
		.contact-form {
			width: 80%;
			margin: 0 auto;
		}

		.sidenav a {
 			padding: 8px 8px 8px 32px;
  			text-decoration: none;
  			font-size: 25px;
  			color: #000000;
  			display: block;
  			transition: 0.3s;
		}

		.sidenav a:hover {
  			color: #f1f1f1;
		}

		.sidenav .closebtn {
  			position: fixed;
  			top: 0;
  			font-size: 2.5rem;
			padding: 0px 15px 15px 15px;
		}
		
	}

	@media screen and (min-width: 1401px) {
		#grid[data-columns]::before {
			content: '3 .column.size-1of3';
		}

		.site-title:before {
			content: "DREWINNIS.STUDIO";
		}

		.site-title {
			transform: rotate(90deg);
			transform-origin: left top 0;
		}


		p {
			line-height: 1.4em;
		}

		.global-width {
			width: 80%;
		}

		.column {
			margin-right: 8rem;
		}

		.column:last-child {
			margin-right: 0;
		}

		.projectPreview {
			margin-bottom: 50px;
		}

		.photo-project {
			margin: 0 auto;
			position: relative;
			padding: 4.5em 0 5em 0;
		}
		
		.film-project {
			margin: 0 auto;
			position: relative;
			padding: 0em 0 5em 0;
		}


/* ===============================================================
	FLEXBOX GALLERY IMAGE SCROLL
=============================================================================*/
	
		.photo-project {
			height: 100vh;
			display: flex;
			flex-direction: row;
		}

		.gallery-description {
			flex-shrink: 0;
			display: flex;
			width: 35vw;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}

		.gallery-description h4 {
			border: none;
			font-size: 1.2rem;
			}

		.gallery-description p {
			width: 20em;
			text-align: center;
		}

		.gallery-image {
			height: 100%;
			flex: none;
			margin-right: 200px;
		}

		.photo-project :nth-last-child(2){
			margin-right: 0;
		}

		.gallery-image img {
			height: 100%;
		}

		.gallery-bumper {
			flex-shrink: 0;
			display: flex;
			width: 30vw;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			text-align: center;
		}

		.gallery-bumper p {
			padding: 0 5rem 0 5rem;
		}
		.social-bumper {
			display: block;
			text-align: center;
			margin: 1rem 0 3rem 0;
		}

		.project-nav {
			text-align: center;
			margin-top: 3rem;
		}

		.social-bumper li {
			line-height: 1.2rem;
			display: block;
			text-transform: uppercase;
		}

		.gallery-image {
			order: initial;
		}

		.gallery-description {
			order: initial;
		}

		.study-preview {
			height: 205px;
			padding: 2em;
			position: relative;
		}
	
		.study-preview img {
		  display: block;
		  margin: auto;
		}

/* FILM PROJECT */
		.embed-container { 
			position: relative;
			padding-bottom: 56.25%; 
			height: 100%; 
			overflow: hidden; 
			max-width: 100%;
			padding-top: 10em;
		} 

		
		
/*
		.embed-container iframe, .embed-container object, .embed-container embed { 
			position: absolute;
			top: 0; 
			left: 0; 
			width: 100%; 
			height: 100%;

		}
*/
		.film-project {
			display: flex;
			flex-direction: row;

		}

		.film-details {
			display: flex;
			flex-direction: column;
		}

		.film-details p {
			width: 45%;
		}

		.film-details {
			display: flex;
		}

		.film-details h4 {
			font-size: 1.2rem;
			display: inline-block;
			border-bottom: none;
		}

		.lightbox {
			display: flex;
		}

		.film-stills {
			display: flex;
			flex-wrap: wrap;
			flex-direction: row;
		}

		.film-stills li {
			flex: 1 0 auto;
			margin: .25em .5em .25em 0;
			width: calc(20% - 2em);
		}
		
		
		
		
/* INFORMATION */	
	
		.contact-main {
			display: flex;
			justify-content: space-between;
			margin: 20VH 0 0 0;
		}
		.process img:first-child, .clients img:first-child {	/* display process and client graphic*/
			display: initial;
		}

		.gallery-description :nth-last-child(1){ 	/* hide h4 arrow */
		display: initial;
		}

		.contact-follow, .contact {
			display: block;
		}

		.about, .process, .clients {
			width: 28%;
		}
		
		.info-process-image, .info-client-image {
			display: inline-block;
}

		.contact-follow {
			text-align: right;
		}

		.follow li {
			display: block;
			text-transform: uppercase;
		}
		.fa, .fa-instagram {
			font-size: 1.2em !important;
			position: relative;
		}

		.contact {
			text-align: right;
		}

		.contact h1 {
			display: inline-block;
			text-transform: uppercase;
			font-size: 1.8em;
			color: #fff;
			background-color: #000;
			padding: .5em 2em .5em 2em;
		}
		
		

}