/*** Main ***/

html {
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in iOS landscape while allowing user zoom */
}

.hidden {
	display: none;
}

body {
	margin: 0;
	padding: 0;
	font-family: "Source Sans Pro", sans-serif;
	font-weight: 300;
	letter-spacing: 0.5px;
	font-size: 18px;
	line-height: 26px;
	color: #000;
	background: #fff;
}

#top {
	width: 100%;
	margin: 0;
	padding: 3.5em 0 3em 0;
	text-align: left;
}

#top-content {
	margin: 0 8% 0 8%;
}

.light #top {
	color: #fff;
}

.generic #top, .dark #top {
	color: #000;
}

h2 {
	font-family: Muli, sans-serif;
	font-weight: 400;
	text-align: center;
	letter-spacing: 1px;
	font-size: 2em;
	line-height: 1.4em;
	margin: 1em auto 1.5em auto;
}

p, form {
	max-width: 570px;
}

p.large {
	font-size: 1.3em;
	line-height: 1.4em;
	font-weight: 400;
}

.center-text {
	text-align: center;
}

p.small, .project-details {
	font-size: 0.8em;
	line-height: 1.5em;
	letter-spacing: 0.5px;
}

#top p, #top form {
	margin-left: auto;
	margin-right: auto;
}

#top .project-details {
	margin: 2.5em auto 1.25em auto;
}

#top form {
	background-color: rgba( 255, 255, 255, 0.1 );
	margin-top: 2.5em;
	padding: 0.7em 1em 0.7em 1em;
}

#top form label {
	font-size: 18px;
	display: inline-block;
	margin: 0.5em 0 0.5em 0;
}

#top form input, #top form p {
	font-size: 18px;
	margin: 9px 9px 9px 0;
}

form input {
	background-color: #fff;
	border: none;
	border-radius: 0;
}

form .text-field {
	height: 28px;
	width: 140px;
	padding: 0 0.4em 0 0.4em;
}

form .btn {
	background-color: rgba( 255, 255, 255, 0.2 );
	margin-left: 0 !important;
    color: #fff;
    padding: 0 0.9em 0 0.9em;
    height: 28px;
    text-align: center;
    text-decoration: none;
    -webkit-appearance: none;
    display: inline-block;
    font-size: 16px !important;
    font-family: "Source Sans Pro", sans-serif;
	font-weight: 400;
	letter-spacing: 0.5px;
}

.link-out {
	text-align: center;
	font-size: 1em;
	font-style: normal;
	margin-top: 2.5em;
	font-weight: 400;
}

img, video {
	border: none;
}

img, video, iframe {
	background: #f0f0f0;
}


a, a:visited {
	text-decoration: none;
	color: #000;
	border-bottom: 1px solid #000;
	-webkit-transition: opacity 0.2s, border-color 0.2s;
    transition: opacity 0.2s, border-color 0.2s;
}

a:hover {
	opacity: 0.8;
	-webkit-transition: opacity 0s, border-color 0s;
    transition: opacity 0s, border-color 0s;
}

a:active {
	opacity: 0.65;
}

.light #top a, .light #top a:visited {
	color: #fff;
	border-bottom: 1px solid #fff;
}

footer {
	margin: 2em 2% 0 2%;
	text-align: center;
	font-size: 0.65em;
	font-weight: 400;
	letter-spacing: 0.1px;
}

footer p {
	max-width: none;
}

/* Small screens */
@media only screen and ( max-width: 680px ) {

	body {
		font-weight: 400;
		font-size: 15px;
		line-height: 21px;
	}

	#top {
		text-align: center;
		padding: 3.5em 0 2.5em 0;
	}

	#top-content {
		margin: 0 6% 0 6%;
	}

	h2 {
		margin: 0.5em auto 1em auto;
	}

	p.large {
		font-size: 1.2em;
		line-height: 1.4em;
		letter-spacing: 0px;
	}
}


/*** Section styles ***/

.generic #top {
	color: #f24d16 !important;
	background: #fff !important;
}

.index #top .links {
	margin-top: 2.5em;
	font-weight: 400;
	font-size: 0.9em;
}

.index #top .links a {
	margin: 0 0.8em 0 0;
}

.index #top .links a:last-child {
	margin: 0;
}

.generic #nav-icon, .generic #nav-icon:before, .generic #nav-icon:after {
	background: #f24d16;
}

.generic #top a, .generic #top a:visited {
	color: #f24d16;
	border-bottom: 1px solid #f24d16;
}

.generic nav li a:hover {
	border-bottom: 1px solid #f24d16 !important;
}

.all-for-this #top {
	background: #31337a;
}

.all-for-this nav li a:hover {
	border-bottom: 1px solid #31337a !important;
}

.android-wear-hugh-turvey #top {
	background: #ff8b61;
}

.android-wear-hugh-turvey nav li a:hover {
	border-bottom: 1px solid #ff8b61 !important;
}

.brightdancing #top {
	background: #f28c2c;
}

.brightdancing nav li a:hover {
	border-bottom: 1px solid #f28c2c !important;
}

.cannes-casting-call #top {
	background: #ce3f31;
}

.cannes-casting-call nav li a:hover {
	border-bottom: 1px solid #ce3f31 !important;
}

.geovegas #top {
	background: #ed493e;
}

.geovegas nav li a:hover {
	border-bottom: 1px solid #ed493e !important;
}

.grow-your-social-network #top {
	background: #f6644e;
}

.grow-your-social-network nav li a:hover {
	border-bottom: 1px solid #f6644e !important;
}

.in-the-kitchen #top {
	background: #faaf23;
}

.in-the-kitchen nav li a:hover {
	border-bottom: 1px solid #faaf23 !important;
}

.leave-an-impression #top {
	background: #2952a3;
}

.leave-an-impression nav li a:hover {
	border-bottom: 1px solid #2952a3 !important;
}

.little-free-libraries #top {
	background: #455291;
}

.little-free-libraries nav li a:hover {
	border-bottom: 1px solid #455291 !important;
}

.mark-eats-sequencer #top {
	background: #1e1e1e;
}

.mark-eats-sequencer nav li a:hover {
	border-bottom: 1px solid #1e1e1e !important;
}

.norns #top {
	background: #1e1e1e;
}

.norns nav li a:hover {
	border-bottom: 1px solid #1e1e1e !important;
}

.ping-pong-fm #top {
	background: #2c56f4;
}

.ping-pong-fm nav li a:hover {
	border-bottom: 1px solid #2c56f4 !important;
}

.places #top {
	background: #221f29;
}

.places nav li a:hover {
	border-bottom: 1px solid #221f29 !important;
}

.primary-forms #top {
	background: #0e2442;
}

.primary-forms nav li a:hover {
	border-bottom: 1px solid #0e2442 !important;
}

.remote-assist #top {
	background: #1676BF;
}

.remote-assist nav li a:hover {
	border-bottom: 1px solid #1676BF !important;
}

.stupid-big-hands #top {
	background: #029cd2;
}

.stupid-big-hands nav li a:hover {
	border-bottom: 1px solid #029cd2 !important;
}

.tango-prototype #top {
	background: #4fbdaa;
}

.tango-prototype nav li a:hover {
	border-bottom: 1px solid #4fbdaa !important;
}

.t-minus #top {
	background: #31cc8e;
}

.t-minus nav li a:hover {
	border-bottom: 1px solid #31cc8e !important;
}

.the-counselor #top {
	background: #584063;
}

.the-counselor nav li a:hover {
	border-bottom: 1px solid #584063 !important;
}

.the-sonnet-project #top {
	background: #149fba;
}

.the-sonnet-project nav li a:hover {
	border-bottom: 1px solid #149fba !important;
}

.tidal-store #top {
	background: #1d1d1d;
}

.tidal-store nav li a:hover {
	border-bottom: 1px solid #1d1d1d !important;
}

.visual-sound #top {
	background: #0dd49f;
}

.visual-sound nav li a:hover {
	border-bottom: 1px solid #0dd49f !important;
}

.viv-visualization #top {
	background: #1f1730;
}

.viv-visualization nav li a:hover {
	border-bottom: 1px solid #1f1730 !important;
}

.web-lab #top {
	background: #2a8bd0;
}

.web-lab nav li a:hover {
	border-bottom: 1px solid #2a8bd0 !important;
}

.world-tour #top {
	background: #533973;
}

.world-tour nav li a:hover {
	border-bottom: 1px solid #533973 !important;
}

.xbox-avatars #top {
	background: #7063c0;
}

.xbox-avatars nav li a:hover {
	border-bottom: 1px solid #7063c0 !important;
}

.xbox-ui #top {
	background: #f6f6f6;
}

.xbox-ui nav li a:hover {
	border-bottom: 1px solid #107C10 !important;
}



/*** Index ***/

#content-container {
	max-width: 2600px;
	margin: 0 auto;
}

.grid-gutter {
	width: 1%;
}

#index-content {
	width: 96%;
	margin: 0 2% 0 2%;
}

.item {
	width: 32.666%;
	margin: 0 0 1% 0;
}

.item.w2 {
	width: 66.333%;
}

.item.w3 {
	width: 100%;
}

#index-content a:hover {
	opacity: 1;
}

#loader {
	position: fixed;
	z-index: 0;
	right: 0;
	margin: 14px 2% 0 0;
	background: none;
}

/* Small screens */
@media only screen and ( max-width: 680px ) {

	.item {
		width: 100% !important;
		margin-bottom: 4%;
	}

	#loader {
		margin-right: 4% !important;
	}	
}

/* Large screens */
@media only screen and ( min-width: 1920px ) {

	#loader {
		margin-right: 24px !important;
	}
}



/*** Portfolio pages ***/

#portfolio-content {
	text-align: center;
	width: 86%;
	margin: 4em 7% 0 7%;
}

#portfolio-content img {
	margin: 0 auto 2% auto;
	width: 100%;
	display: block;
}

#portfolio-content .multi-line {
	margin: 0 1% 2% 1%;
	display: inline;
}

#portfolio-content .three-vids {
	margin: 0 !important;
}

#portfolio-content .three-vids video {
	margin: 0 3% 2% 0;
	display: inline;
	width: 28%;
	height: 28%;
}

#portfolio-content .three-vids video:last-child {
	margin-right: 0 !important;
}

.portfolio-portrait {
	max-width: 50% !important;
	padding: 0 25% 0 25%;
}

#portfolio-content div {
	margin-bottom: 2.5% !important;
}

/* Small screens */
@media only screen and ( max-width: 680px ) {

	#portfolio-content {
		width: 96%;
		margin: 2em 2% 0 2%;
	}

	#portfolio-content img, #portfolio-content video {
		margin-bottom: 4% !important;
	}
}

/* Smallish screens */
@media only screen and ( max-width: 800px ) {

	.portfolio-portrait {
		max-width: 100% !important;
		padding: 0;
	}
}



/*** Fluid videos ***/

.ratio-16-9 {
	padding-bottom: 56.25%;
}

.ratio-4-3 {
	padding-bottom: 75%;
}

.ratio-64-40 {
	padding-bottom: 62.5%;
}

.ratio-640-362 {
	padding-bottom: 56.56%;
}

.ratio-1119-722 {
	padding-bottom: 64.52%;
}

.proportional {
	position: relative;
	width: 100%;
	height: 0;
}

.proportional iframe, .proportional video {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}


/*** Warnings ***/

#warnings {
	background-color: #f24d16;
	color: #fff;
	text-align: center;
}

#warnings p {
	margin: 0 auto;
	padding: 1em;
}

#warnings a {
	color: #fff;
	border-bottom-color: #fff;
}


/*** Nav ***/

#nav-drawer {
	position: absolute;
	padding-left: 2%;
	display: none;
}

#nav-items {
	list-style: none;
	margin: 72px 0 2em 0;
	padding: 0;
	position: absolute;
	z-index: 1002;
	font-size: 0.9em;
	font-weight: 400;
	letter-spacing: 0px;
	width: 210px;
}

#nav-items-back {
	height: 100%;
	position: fixed;
	width: 280px;
	z-index: 1001;
	background: #f0f0f0;
}

nav li {
	margin-bottom: 0.8em;
}

nav li.category {
	margin-top: 2em;
	color: #999;
}

nav li a {
	border-bottom: 1px solid #f0f0f0 !important;
}

nav li a:hover, nav li a:active {
	opacity: 1.0;
}

nav li.active a, nav li.active a:hover {
	cursor: default;
	border-bottom: 1px solid #000 !important;
}

#nav-btn {
	height: 48px;
	padding: 0 24px 0 2%;
	position: absolute;
	z-index: 1003;
	cursor: pointer;
}

#darken {
    opacity: 0;
    background-color: #000;
    width: 100%;
    height: 100%;
    top: 0;
    position: fixed;
    z-index: 500;
}

/* Small screens */
@media only screen and ( max-width: 680px ) {

	#nav-items {
		font-size: 1.1em;
	}

	#nav-items-back {
		width: 260px !important;
	}

	nav li {
		margin-bottom: 1.1em;
	}

	#nav-drawer {
		padding-left: 4% !important;
	}

	#nav-btn {
		padding-left: 4% !important;
	}

}

/* Large screens */
@media only screen and ( min-width: 1920px ) {

	#nav-items-back {
		width: 260px !important;
	}

	#nav-drawer {
		padding-left: 24px !important;
	}

	#nav-btn {
		padding-left: 24px !important;
	}
}


/*** Nav icon ***/

#nav-icon, #nav-icon:before, #nav-icon:after {
    width: 30px;
    height: 3px;
    display: block;
    border-radius: 0px;
    opacity: 1;
    -webkit-transition: opacity 0.2s;
    transition: opacity 0.2s;
}

.light #nav-icon, .light #nav-icon:before, .light #nav-icon:after {
	background: #fff;
}

.dark #nav-icon, .dark #nav-icon:before, .dark #nav-icon:after {
	background: #000;
}

.nav-hover {
	opacity: 0.8 !important;
}

.nav-open.nav-hover, .dark .nav-hover {
	opacity: 0.65 !important;
}

.nav-hover {
	-webkit-transition: opacity 0s !important;
    transition: opacity 0s !important;
}

.nav-open, .nav-open:before, .nav-open:after {
	background: #000 !important;
}

#nav-icon {
    position: relative;
    top: 14px;
}

#nav-icon:before, #nav-icon:after {
    content: "";
    position: absolute;
}

#nav-icon:before {
    top: 16px;
}

#nav-icon:after {
    top: 8px;
}