/*	Initializr.com
_______________________________________________________ */

html,
button,
input,
select,
textarea {
	color: #3A3B3C;
}

body {
	font-size: 1em;
	line-height: 1.4;
	background: #FFF;
}
::selection {
	background: #FFFFCC;
	text-shadow: none;
	color: #3A3B3C;	
}
::-moz-selection {
	background: #FFFFCC;
	text-shadow: none;
	color: #3A3B3C;
}

hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #E1E1E1;
	margin: 1em 0;
	padding: 0;
}

img {
	vertical-align: middle;
}

fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

textarea {
	resize: vertical;
}

/*	$CASE-STUDIES
_______________________________________________________ */

	body.case { padding-top: 88px; } 
	.case h6 { font-size: 0.75em; }
	.case h5 { font-size: 1em; }
	.case header#top { position: fixed; top: 0; box-shadow: 0 0 2px #888; }
	.case article h1 { text-align: center; }
	.case article header { margin: 2em 0; }


/*	$ELEMENTS
_______________________________________________________ */

#grid {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 9999;
	height: 100%;
	width: 100%;
	background: url("../img/grid.png");
}

body { font: 1em/1.75em 'Libre Baskerville', 'Crimson', Garamond, Times, serif; color: #3A3B3C; }
.sans {	font-family: 'Open Sans', verdana, 'Helvetica Neue', Helvetica, Arial, sans-serif; }

article a,
nav#access > ul li a {
	-webkit-transition: all 0.5s ease;
	-moz-transition:    all 0.5s ease;
	-ms-transition:     all 0.5s ease;
	-o-transition:      all 0.5s ease;
	transition:         all 0.5s ease;
}

img { max-width: 100%; }

/*	$FHEADER
_____________________________________ */

header#top {
	position: relative;
	z-index: 99;

	width: 100%;
	height: 54px;
	padding: 1em;

	-moz-box-sizing: border-box;
	box-sizing:      border-box;	

	background: rgb(58, 59, 60);

	box-shadow: none;
	top: auto;
	}

	header#top.fixed {
		position: fixed;
		top: -1px;
	}
	header#top h1#logo {
		width: 75%;
		max-width: 142px;
		margin: 0;
	}
	header#top h1#logo a {
		float: left;
		width: 100%;
		background: url('../img/logo.svg') no-repeat 0 0 transparent;
		background-size: 100% auto;
		text-indent: -9999px;
	}
	header#top #menu { display: none; }
	nav#access {
		display: inline-block;
		position: absolute;
		right: 0;
		line-height: 1em;
		margin-top: 4px
		}
		nav#access > ul {
			margin: 0;
			padding: 0;
		}		
		nav#access > ul li {
			display: inline-block;
			width: 142px;
			margin-right: 16px;
		}
		nav#access > ul li a:link,
		nav#access > ul li a:visited {
			color: #fff;
			text-transform: uppercase;
			text-decoration: none;
			letter-spacing: 0.05em;
		}
			nav#access > ul li a:active {
				color: #fff;
			}
			nav#access > ul li a:hover{
				color: #888;
			}

/*	$MAIN-BANNER
_____________________________________ */

#preface {
	background-repeat: no-repeat;
	background-position: center 35%;
	background-attachment: fixed;
	background-size: 100% auto;

	width: 100%;
	overflow: hidden;
	padding: 0;
	margin: 0;
}

.hidden {
	display: none;
}

/*	$ARTICLES
_____________________________________ */

section {
	margin-bottom: 3em;
	padding: 4em 1em 0;
	}
	section#about { clear: both; }
	section#contact { margin-bottom: 0; }
	section header, .section-title, .sub-title {
		text-align: center;
		margin: 0 auto;
	}
		section header .section-title { font-weight: 400; }	
		.separator {
			display: block;
			max-width: 10%;
			margin: 2em auto;
			border-top: 1px solid;
		}

	article { 
		max-width: 50%; 
		margin: 0 auto;
	}
	article p {
		text-indent: 2em;
/*		text-align: justify;
*/		letter-spacing: 0.01em;
	}
		article p:first-of-type,
		article p.no-indent {
			text-indent:0;
		}

		article p a {
			color: #3A3B3C;
		}
		article p a:hover{
			color: #888;
		}

	article ul {
		margin: 1em 0;
		padding: 0;
		list-style: none;
	}
	article p a.more-link,
	article p a.case-link { 
		display: inline-block; 
		margin: 1em 0;
		font-size: 0.762em;
		text-decoration: none;
		text-transform: uppercase;
		color: #888;
		}
		article p a.case-link {
			margin-top: 3em;
			padding: 1em 2em;
			background: rgba(58,59,60,1);
			color: #fff;

			-webkit-border-radius: 3px;
			-moz-border-radius:    3px;
			border-radius:         3px;
		}
		article a.more-link:hover {
			color: #3A3B3C;
		}
		article p a.case-link:hover {
			background: rgba(58,59,60,.6);
		}

/*	$ABOUT
_____________________________________ */

section#about article ul{
	list-style-image: url('../img/bullet.svg');
}

/*	$SELECTED-WORK
_____________________________________ */

section#selected-work { padding: 4em 0 0; }		
section#selected-work li {
	overflow: hidden;
	min-height: 500px;
	padding: 4em 0;
	background: #f4f4f4; /* Old browsers */
}
	section#selected-work li.spark { background-color: #E44128; }
	section#selected-work li.cvmkr { background-color: #00B4CB; }
	section#selected-work li.mvnows { background-color: #73126F; }

	section#selected-work article.content {
		float: left;
		width: 40%;
		margin: 4em;
		padding: 0 1em;
		color: #FFF;

		-moz-box-sizing: border-box;
		box-sizing:      border-box;
		
	}
	section#selected-work article.content h1,
	section#selected-work article.content p,
	section#selected-work article.content a {
		width: 100%;
	}
		section#selected-work article.content h1 {
			text-align: left;
			font-size: 2em;
		}
		section#selected-work article.content .separator {
			margin: 2em 0;
		}
		section#selected-work li img {
			display: block;
			margin: 0 auto;
			max-width: 45%;
		}

/*	$CLIENTS
_____________________________________ */

	section#clients article > ul { 
		max-width: 652px; 
		margin: 16px auto 0;
		padding: 0;
		list-style: none;
		font-size: 0;
		}
		section#clients article > ul > li {
			display: inline-block;
			vertical-align: top;
			width: 24%;
			margin: 2em 0;
			font-size: 16px;
			text-align: center;
		}
		section#clients article > ul > li img {
			width: 60%;
		}
		section#clients article > .case-studies {
			text-align: center;
		}


/*	$FOUNDERS
_____________________________________ */

	section#founders #founders-profiles {
		position: relative;
		margin: 3em auto 0;
		text-align: center;
		}
		section#founders #founders-profiles > span {
			display: inline-block;
			padding: 0 1em 1em;
		}

		section#founders #founders-profiles > span .profile-frame {
			overflow: hidden;
			width: 100%;
			max-width: 142px;
			max-height: 142px;
			margin: 0 auto;
			}
			section#founders #founders-profiles > span .profile-frame img {
				width: 100%;

				-webkit-border-radius: 142px;
				-moz-border-radius:    142px;
				border-radius:         142px;
			}
		section#founders #founders-profiles > span h3.title {
			margin: 1em 0 0;
			font-weight: 400;
			font-size: 1.125em;
		}
		section#founders #founders-profiles > span h5 {
			font-style: italic;
			font-weight: 400;
			font-size: 0.75em;
			margin: 3px 0;
			color: #888;

		}

/*	$FOOTER
_____________________________________ */

	section#contact {
		padding: 2em 1em;
		background: #e4e4e4;
	}
	section#contact .content { 
		display: table;
		margin: 0 auto;
		font-size: 0.75em;
		}
		section#contact article.vcard { 
			display: table;
			max-width: 100%;
			margin: 4em auto 3.5em;
		}
		section#contact article .description {
			font-style: oblique;
		} 
		section#contact article .address {
			padding-left: 3em;
			text-align: left;
		}
		section#contact article .address,
		section#contact article .phone-email,
		section#contact article .follow { 
			display: table-cell; 
			padding-left: 3em;
		}
		section#contact article.vcard a {
			color: #3A3B3C;
			text-decoration: none;
			}
			section#contact article.vcard a:hover { color: #888; }

		span.follow a { 
			display: inline-block;
			opacity: .5;

			-webkit-transition: all 0.8s ease 0s;
			-moz-transition: all 0.8s ease 0s;
			-o-transition: all 0.8s ease 0s;
			transition: all 0.8s ease 0s;			
		}
		span.follow a:hover {
			opacity: 1;
		}
		span.follow a img {
			max-width: 75%;
		}
		section#contact article.vcard a.instagram {
			padding-left: 0;
		}
	section#date {
		font-size: .75em;
		padding: 1em;
		margin-bottom: 0;
		background: #3A3B3C;
		color: #B6B6B6;
		text-align: center;
	}

article.content a.btn {
	display: inline-block;
	width: auto !important;
	margin-top: 3em;
	padding: .5em 2em;

	font-size: .762em;
	letter-spacing: 0.02em;
	line-height: 2em;

	text-align: center;
	text-decoration: none;
	text-transform: uppercase;

	background: rgba(58,59,60,1);
	color: #fff;

	-webkit-border-radius: 3px;
	-moz-border-radius:    3px;
	border-radius:         3px;	
	}
	article.content a.btn:hover { background: rgba(58,59,60,.6); color: #fff; } 


/*	$IE
_______________________________________________________ */


/*	$MEDIA_QUERIES
_______________________________________________________ */

@media only screen and (max-width: 1000px) {

	nav#access > ul li { width: auto; }
	section#contact article.vcard a { width: 22%; }

}
@media only screen and (max-width: 964px) {

	h1 { font-size: 2em; line-height: 1em; }

	section#contact .content { 
		width: 100%; 
		max-width: 932px;
	}

	section#contact article span.description,
	section#contact article span.address, 
	section#contact article span.phone-email,
	section#contact article span.follow {
		display: block;
		width: 100%;
		padding: 0;
		text-align: center;
	}
	section#selected-work .rslides img {
		margin-top: 2.5%;
	}
	section#contact article span.address,
	section#contact article span.phone-email,
	section#contact article span.follow {
		margin-top: .75em;
	}
	section#contact article.vcard span.follow a {
		display: inline-block;
		width: auto;
	}
}
@media only screen and (max-width: 880px) {

	article { max-width: 80%; }
	section#selected-work article.content {
		float: none;
		width: 60%;
		margin: 2em auto;
	}

}
@media only screen and (max-width: 740px) {

	section#selected-work li.slide {
		height: auto;
		}
		section#selected-work article.content {
			width: 100%;
			margin: 2em auto;
		}
		ul.rslides_tabs li {
			bottom: 0;
			top: 1em;
		}
	section#clients article > ul > li img { width: 80%; }
}
@media only screen and (max-width: 640px) {

	nav#access { 
		display: none;
		top: 54px;
		width: 100%;
		margin: 0;
		text-align: center;
		background: #3A3B3C;
/*		box-shadow: 0 4px 2px -2px #cecece inset;
*/		}
/*		nav#access > ul { box-shadow: 0 0 2px #eee; }
*/		nav#access > ul {
			border-top: 1px solid #444;	
		}
		nav#access > ul li { 
			display: block;
			margin: 0;
			border-bottom: 1px solid #444;	
		}
		nav#access > ul li a {
			display: block;
			padding: 1em 0;
		}
		nav#access > ul li a:hover{
/*			background: #eee;
*/		}
			nav#access.reverse {
				top: -246px;
			}

	header#top #menu { 
		display: inline-block; 
		float: right;
		cursor: pointer;
		width: 12% !important;
		max-width: 22px;
		}
		header#top #menu img { display: block; }

	section#selected-work li img { max-width: 90%; }

}
@media only screen and (max-width: 480px) {

	section { padding: 2em 1em; }
	article { max-width: 100%; }

	.rslides img.big-banner { display: none; }
	.rslides img.small-banner { display: block; }

	section#clients article > ul > li {
		width: 49%;
	}
	section#capabilities {
		margin: 0 1em 8em; 
	}
	article p { text-align: left; }

	#bangalore a.email{ font-size: .750em;}
	section#clients article > ul > li img { width: 80%; }

}