@charset "UTF-8";
/* CSS Document */

body, html, img, a, h1, h2, h3, h4, p, ul, li { 
	outline:none;
	border:0;
	margin:0;
	padding:0;
	position:relative;
	box-sizing:border-box;
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
html {
	height:100%;
	overflow-x:hidden;
}
body {
	font-family:"proxima-nova", helvetica, sans-serif;
	height:100%;
	background:#000;
}
#preloader {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 999;
	width: 100%;
	height: 100%;
	overflow: visible;
	background:#fff;
}
#preloader span {
	display:block;
	position:absolute;
	top:50%;
	left:50%;
	width:70px;
	height:70px;
	margin:-35px 0 0 -35px;
	background:url(../img/a-loading.gif);
	-webkit-background-size:cover;
	background-size:cover;
}
#preloader span img {
	width:100%;
}
.clear {
	clear:both;
}
img {
	width:100%;
	display:block;
	height: auto;
}
.img-wrap img {
	max-width:1200px;
	margin:0 auto;
}
a {
	text-decoration:none;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
	color:#000;
}
/* Mobile Portrait */
@media (min-width:300px) {
	.header {
		position:fixed;
		z-index:2;
		top:0;
		width:100%;
		padding:3.5% 0 0 0;
		height:5%;
		display:none;
		
		-webkit-backface-visibility:hidden;
		backface-visibility:hidden;
		
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
	}
	.logo {
		margin:-2% 0 0 3%;
		width:90px;
		height:46px;
		padding:2%;
		position:relative;
		cursor:pointer;
	}
	.logo a {
		width:90px;
		height:46px;
		display:block;
		position:aboslute;
		top:0;
		left:0;
		
		perspective: 1000;
		
		-webkit-transition: 0.6s;
		transition: 0.6s;
		
		-webkit-transform-style: preserve-3d;
		transform-style: preserve-3d;
	}
	.front, .back {
		width:90px;
		height:46px;
		display:block;
		
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		position: absolute;
		
		top: 0;
		left: 0;
	}
	.front {
		z-index: 2;
		-webkit-transform: rotateY(0deg);
		transform: rotateY(0deg);
		background:url(../img/a-logo.svg) no-repeat 0 0;
	}
	.back {
		-webkit-transform: rotateY(180deg);
		transform: rotateY(180deg);
		background:url(../img/a-nav.svg) no-repeat 0 0;
	}
	.logo:hover a {
		-webkit-transform: rotateY(180deg);
		transform: rotateY(180deg);
	}
	.logo.home {
		margin:-2% 0 0 -2%;
	}
	.logo.home .front {
		background:url(../img/a-work.svg) no-repeat 0 0;
	}
	.logo.home:hover a {
		-webkit-transform: none;
		transform: none;
	}
	nav {
		background:rgba(0,0,0,0.9);
		height:100%;
		width:100%;
		position:fixed;
		top:0;
		left:0;
		z-index:2;
		display:block;
		padding:3.5% 5% 0 5%;
		display:none;
		overflow:auto;
	}
	nav span {
		color:#fff;
		font-family:"adobe-garamond-pro", serif;
		font-size:16px;
		display:inline-block;
		margin:30px 0 10px;
	}
	nav ul {
		list-style-type:none;
		margin:0;
	}
	nav ul li a {
		color:#fff;
		font-weight:bold;
		font-size:20px;
		padding:5px 0;
		display:inline-block;
		
		-webkit-transition: all 0.5s ease;
		transition: all 0.5s ease;
	}
	nav ul li a em {
		font-family: "adobe-garamond-pro", serif;
		font-size:16px;
		font-style:normal;
		font-weight:normal;
		opacity:.5;
	}
	nav .about p {
		display:none;
	}
	.contact {
		margin-bottom:50px;
	}
	.contact .left {
		float:left;
		margin:0 25px 0 0;
	}
	h1, h2, h3, p {
		margin-bottom:5.5%;
	}
	h1 {
		font-size:40px;
		font-weight:600;
	}
	.content.home-hero h1 {
		font-size:44px;
		line-height:50px;
	}
	h2 {
		font-size:26px;
		line-height:38px;
		font-weight:100;
		color:#959595;
		font-family: "adobe-garamond-pro", serif;
	}
	h3 {
		font-size:40px;
		font-weight:600;
		margin-bottom:2%;
	}
	p {
		font-size:18px;
		color:#959595;
		line-height:32px;
		font-weight:300;
	}
	p.left.first,
	p.left.second {
		border-top: 1px solid #eee;
		padding:3.5% 0 0 0;
	}
	strong {
		color:#000;
		font-weight:normal;
	}
	.content {
		padding:5%;
		background:#fff;
		position:relative;
		margin:0 auto;
	}
	.content.home-hero p.date {
    color: #fff;
    width: 50px;
    position: absolute;
    top: 2%;
    right: 2%;
	}
	.content.home-hero {
		padding-top:20%;
		background:#0E0E0E;
		color:#B6B6B6;
	}
	.content.home-hero h1 {
		color:#fff;
	}
	.content.home-hero h2 {
		color:#B6B6B6;
	}
	.content.home-hero a {
		color:#fff;
		background:#222 !important;
	}
	.content.home-hero a:hover {
		background:#000 !important;
	}
	.content.home-hero a.dell:hover {
		background:#0672cb !important;
	}
	.content.home-hero a.vz:hover {
		background:#EE0000 !important;
	}
	.content.home-hero a.hum:hover {
		background:#08BFC1 !important;
	}
	.content.home-hero a.cafe:hover {
		background:#fff !important;
		color:#255f82 !important;
	}
	.content.home-hero a.lowes:hover {
		background:#012169 !important;
	}
	.content.credits {
		display:none;
	}
	.credits p {
		text-align:center;
	}
	.hero {
		position:relative;
		z-index:1;
	}
	.bg-me {
		position:absolute;
		top:0;
		left:0;
		z-index:-1;
		width:auto;
		width:100%;
	}
	.grid .content a {
		display:inline;
		padding:inherit;
		background:none;
		float:none;
		width:auto;
	}
	/* Grid */
	.grid {
		height:100%;
		min-height:100%;
		background:#fff;
		z-index:1;
		position:relative;
	}
	.grid a {
		width:100%;
		padding-bottom:60%;
		display:block;
		text-align:left;
		overflow:hidden;
		background:#000;
	}
	.grid a img {
		top:0;
		left:0;
		position:absolute;
	}
	.grid a span {
		display:none;
	}
	.btm-nav {
		background:#000;
		color:#fff;
		text-align:center;
		font-size:40px;
		padding:60px 0;
		z-index:0;
		bottom:0;
		width:100%;
		font-weight:100;
		display:block;
		
		-webkit-backface-visibility:hidden;
		backface-visibility:hidden;
		
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
	}
	footer {
		bottom:0;
		padding:0 0 3.5% 0;
		width:100%;
		z-index:0;
		min-height:20px;
		
		-webkit-backface-visibility:hidden;
		backface-visibility:hidden;
		
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
	}
	.social {
		width:100%;
		margin:0 0 5% 0;
		
		-webkit-backface-visibility:hidden;
		backface-visibility:hidden;
		
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
	}
	.social ul {
		list-style-type:none;
		text-align:center;
	}
	.social ul li {
		display:inline;
		padding-right:30px;
		font-size:14px;
	}
	.social ul li:last-child {
		padding:0;
	}
	.social ul li a {
		color:#fff;
	}
	.title {
		color:#fff;
		font-weight:400;
		text-transform:uppercase;
		letter-spacing:2px;
		font-size:10px;
		text-align:center;
		width:100%;
		display:inline-block;
		
		-webkit-backface-visibility:hidden;
		backface-visibility:hidden;
		
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
	}
	.proto-two-up {
		width:100%;
		text-align:center;
	}
	.proto-two-up video {
		max-width:65%;
		margin:15% 0 15% 0;
	}
	.proto-full {
		width:100%;
		text-align:center;
	}
	.proto-full video {
		max-width:65%;
		margin:5% 0 15% 0;
	}
}
@media (max-width:760px) {
	/* turn off animate.css on mobile */
	.animated {
		/*CSS transitions*/
		-o-transition-property: none !important;
		-moz-transition-property: none !important;
		-ms-transition-property: none !important;
		-webkit-transition-property: none !important;
		transition-property: none !important;
		/*CSS transforms*/
		-o-transform: none !important;
		-moz-transform: none !important;
		-ms-transform: none !important;
		-webkit-transform: none !important;
		transform: none !important;
		/*CSS animations*/
		-webkit-animation: none !important;
		-moz-animation: none !important;
		-o-animation: none !important;
		-ms-animation: none !important;
		animation: none !important;
	}
}
/* Mobile Landscape */
@media (min-width:600px) {}
/* Tablet Portrait */
@media (min-width:760px) {
	.social {
		float:left;
		width:auto;
		margin:0 0 0 5%;
	}
	.title {
		float:right;
		width:auto;
		margin:0 5% 0 0;
	}
	p.two-col {
		-webkit-column-count: 2; /* Chrome, Safari, Opera */
		-moz-column-count: 2; /* Firefox */
		column-count: 2;
	}
	p.left.first,
	p.left.second {
		float:left;
		width:50%;
	}
	p.left.second {
		padding:3.5% 0 0 1%;
	}
	nav .work,
	nav .about,
	nav .contact {
		float:left;
	}
	nav .work {
		width:35%;
	}
	nav .about,
	nav .contact {
		width:40%;
	}
	nav .about p {
		display:block;
		color:#fff;
		font-size:18px;
		line-height:30px;
		margin:0 0 20px;
		font-weight:400;
	}
	nav .about p a {
		color:#fff;
		border-bottom:1px solid #666;
	}
	nav .about p em {
		font-family: "adobe-garamond-pro", serif;
	}
	.proto-two-up {
		width:50%;
		float:left;
		text-align:center;
	}
	.proto-two-up video {
		max-width:65%;
		margin:30% 0 15% 0;
	}
}
/* Desktop */
@media (min-width:1050px) {
	nav ul li a:hover {
		opacity:.6;
	}
	nav span {
		font-size:20px;
		margin:40px 0 20px;
	}
	nav ul li a {
		font-size:26px;
	}
	nav .about p a:hover {
		border-bottom:1px solid #fff;
	}
	nav .about ul li a,
	nav .contact ul li a {
		font-size:20px;
	}
	.grid {
		margin-top:220px;
		bottom:220px;
	}
	.grid a {
		width:50%;
		float:left;
		padding-bottom:30%;
		
		-webkit-transition: all 0.2s ease;
		transition: all 0.2s ease;
	}
	.grid a img {
		opacity:1;
		
		-webkit-will-change: opacity, transform;
		-webkit-transition: opacity .5s cubic-bezier(.19,1,.22,1), -webkit-transform 12s cubic-bezier(.215,.61,.355,1);
		-webkit-transform-origin: 50% 50%;
		
		will-change: opacity, transform;
		transition: opacity .5s cubic-bezier(.19,1,.22,1), transform 12s cubic-bezier(.215,.61,.355,1);
		transform-origin: 50% 50%;
	}
	.grid a span {
		display:inline-block;
		position:absolute;
		top:0;
		z-index:-1;
		font-size:40px;
		font-weight:600;
		color:#fff;
		margin:30% 0 0 10%;
		letter-spacing:0;
		opacity:0;
		
		-webkit-transition: all 0.5s ease;
		transition: all 0.5s ease;
	}
	.grid a:hover {
			z-index:0;
	}
	.grid a:hover img {
		opacity:.7;
		-webkit-transform: scale(1.15);
		transform: scale(1.15);
	}
	.grid a:hover span {
		z-index:0;
		margin:25% 0 0 10%;
		opacity:1;
	}
	.grid a span:hover {
		opacity:.5;
	}
	.grid a span.sub-title {
		font-size:20px;
		font-weight:100;
		font-family: "adobe-garamond-pro", serif;
		letter-spacing:0;
		margin:35% 0 0 10%;
	}
	.grid a:hover span.sub-title {
		z-index:0;
		margin:31% 0 0 10%;
	}
	h1, h2, h3, p {
		margin-bottom:4%;
	}
	h1 {
		font-size:50px;	
	}
	.content.home-hero h1 {
		font-size:80px;
		line-height:80px;
	}
	h2 {
		font-size:32px;
	}
	p {
		font-size:20px;
		line-height:38px;
	}
	.btm-nav {
		position:fixed;
		padding:86px 0;
		height:30%;
		font-size:50px;
	}
	.btm-nav:hover {
		margin-left:1%;
	}
	footer {
		/*z-index:1;*/
		position:fixed;
	}
	.social ul li a:hover {
		opacity:.6;
	}

	/* Animations */
	.scale-out {
		-webkit-animation: scale-out .5s normal forwards ease-in-out;
		animation: scale-out .5s normal forwards ease-in-out;
	}
	.proto-two-up {
		width:50%;
		float:left;
		text-align:center;
	}
	.proto-two-up video {
		max-width:65%;
		margin:30% 0 15% 0;
	}
}
/* Medium Desktop */
@media (min-width:1300px) {
	.content.home-hero {
		padding-top:10%;
	}
	.content.home-hero h2 {
		font-size:46px;
		line-height:70px;
	}
		.content.home-hero p.date {
    top: 5%;
    right: 5%;
	}
}
/* Large Desktop */
@media (min-width:1650px) {
	.btm-nav {
		padding:140px 0;
		height:20%;
		line-height:20%;
	}
	nav ul li a {
		font-size:28px;
	}
	.content.home-hero h1 {
		font-size:120px;
		line-height:120px;
	}
	.content.home-hero h2 {
		font-size:50px;
		line-height:72px;
	}
}
.fadeInDown,
.fadeInUp,
.fadeIn,
.zoomIn,
.scale-in,
.scale-out {
	display:block;
}
.lazy {
	display:none;
	opacity:0;
}
@-webkit-keyframes scale-out {
  from {
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@-webkit-keyframes scale-in {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  to {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
}
@keyframes scale-out {
  from {
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes scale-in {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  to {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
}