/* Container
---------------------*/
.container {
	margin:0 auto;
	padding:0 10%;
	max-width:1280px;
}

/* Logo
---------------------*/
#logo {
	line-height:1em;
	float: left;
  margin:0;
}
#logo h1 {
	font-size:30px;
	margin:0 0 0px;
	padding-right:20px;
}
#logo img {
	margin:0 0 30px 0;	
	max-height:240px;
	max-width:60%;
}


/* Nav
---------------------*/
#nav {
	margin:20px 0;
	padding:0;
}
#nav li {
	list-style:none;	
}
#nav li a {
	line-height:1.3em;
	display:inline-block;
	font-size:13px;
	padding:6px 6px;
	margin-left:-6px;
}
#nav li.cur a {
	background:#f8f8f8;
}

nav.mobile {
	text-align:center;
	font-size:16px;	
	height:100px;
}
nav.mobile li {
	list-style:none;
	display:inline-block;
}
nav.mobile li a {
	padding:8px 15px;
}

/*
nav.mobile li a.cur {
	background:#f8f8f8;
}
 More Projects
---------------------*/

.moreProjects li {
	list-style:none;	
}
.moreProjects li a {
	line-height:1.1em;
	display:inline-block;
	font-size:13px;
	padding:6px 6px;
	margin-left:-6px;
}
.moreProjects .frame {
	width:20%;
	height:60px;
	float:left;
}
.moreProjects {
	padding:30px 0 0;	
}
.moreProjects .info {
	display:none;
}
.moreProjects li.cur a {
	background:#f8f8f8;
}
/* Sidebar
---------------------*/
#sidebar {
	width:20%;
	font-size:11px;
	float:left;
	clear:left;
}
#sidebar p {
	color:#aaa;
  font-size:14px;
}

.projectInfo {
	margin:0 0 60px;	
}
.projectInfo h1 {
	font-size:60px;	
	margin:0 0 10px;
}
.projectInfo p {
	margin:0 0 10px;
}


/* Home Grid
---------------------*/
#home .frame {
	width:32%;
	margin:0 0 1px 1px;
	float:left;	
	height:280px;
		height:24vw;
		width:49%;
}
#home .info {
	background:rgba(0,0,0,.6);
  transition: background 1200ms linear, padding 1200ms ease-out;
	padding:8px 13px;	
}
#home .frame:hover .info {
  background:rgba(0,0,0,.85
  );
  transition: background 200ms linear, padding 200ms cubic-bezier(0.18, 1.17, 0.73, 1.2);
  color:rgba(255,255,255,1);
  /* padding-right:24px; */
}
#home .info h2 {
	font-size:18px;	
	font-size:14px;
  color:rgba(255,255,255,1)
}
#home .info p {
	display:none;	
}


/* Project Grid
---------------------*/
#project .frame {
	height:400px;
}
#project .info p {
	margin:0;	
	display:none;
}



/* Main
---------------------*/
.main {
	width:66%;
	float:right;
	padding:60px 0;
	margin:0 0 100px;
}
.main hr {
	clear:both;	
}

.left-col {
	width:60%;
	float:left;
}
.right-col {
	width:30%;
	float:right;
}


/* About
---------------------*/
.picture img {
	max-width:100%;
}
.picture {
	margin:0 0 40px;
	width:100%;
}




/* IF screen is larger than #. Do this */
@media(max-width:700px){
	#logo {
		width:100%;
		float:none;
		margin:0 0 0px;
		text-align:center;
	}
	#logo img {
		
	}
	#logo h1 {
		font-size:30px;
		text-align:center;
		display:block;
	}
	.container {
		padding:0 8%;
	}
	.projectInfo {
	}
	.projectInfo h1 {
		font-size:22px;
	}
	.main {
		width:100%;
		padding:0;
	}
	#home .frame {
		margin:0 2% 2% 0;
		height:200px;
		width:46%;
	}
	#home .frame .info {
		
	}
	#project .frame {
		height:400px;	
	}
	.picture {
		
	}
	nav {
		display:none;	
	}
	
	.left-col {
		width:100%;
	}
	.right-col {
		width: 100%;
		float: none;
		overflow: hidden;
	}
	form {
		width:100%;
	}
}