#mobile-nav{
	display: none;
}
nav{
	background: #000;
	position: relative;
	left: 0;
	right: 0;
	z-index: 999;
}
#nav-bar.stick{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
}
#nav{
	margin: auto;
	overflow: hidden;
}
.nav {
  	list-style: none;
  	width: 483px;
  	margin: auto;
  	height: 40px;
}
.nav li{
	float: left;
	overflow: hidden;
}
.nav li a{
	color: #FFF;
	font-size: 20px;
	letter-spacing: 2px;
	padding: 5px 10px;
	line-height: 40px;
}
.nav li a:hover{
	color: #0088CC;
}
.nav li a.active{
	color: #CC9933;
	background: #666666;
	background: -moz-linear-gradient(top,  #666666 1%, #000000 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#666666), color-stop(100%,#000000));
	background: -webkit-linear-gradient(top,  #666666 1%,#000000 100%);
	background: -o-linear-gradient(top,  #666666 1%,#000000 100%);
	background: -ms-linear-gradient(top,  #666666 1%,#000000 100%);
	background: linear-gradient(to bottom,  #666666 1%,#000000 100%);
	/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666666', endColorstr='#000000',GradientType=0 );*/
}
#nav-collapse {
	right: 40px;
	top: 3px;
	background: #000;
	width: 30px;
	height: 20px;
	border-radius: 10px; 
	-moz-border-radius: 10px; 
	-webkit-border-radius: 10px; 
	-khtml-border-radius: 10px; 
	padding: 10px;
	position: absolute;
	border: solid 1px #666;
}
#nav-collapse:hover{
	cursor: pointer;
}
.nav-bar{
	width: 100%;
	height: 4px;
	background: #FFF;
	margin-bottom: 3px;
	border-radius: 10px; 
	-moz-border-radius: 10px; 
	-webkit-border-radius: 10px; 
	-khtml-border-radius: 10px; 
}
.container:after { 
	content: "\0020"; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden; 
}
.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0; }
.row:after,
.clearfix:after {
  clear: both; }
.row,

.clearfix {
  zoom: 1; 
 }
@-ms-viewport {
  width: device-width;
}

#nav-collapse {
	display: none;
}
p {font-size: 1em;}
.container { 
	width: 960px; 
	margin: 0 auto; 
}
.col1, .col2, .col3, .col4, .col5, .col6,
.col7, .col8, .col9, .col10, .col11, .col12 {
	margin: 0 10px;
	height: 100%;
	float: left;
}
.row{
	margin-bottom: 20px;
	min-height: 20px;
}
.col1{ width: 60px;}
.col2{ width: 140px;}
.col3{ width: 220px;}
.col4{ width: 300px;}
.col5{ width: 380px;}
.col6{ width: 460px;}
.col7{ width: 540px;}
.col8{ width: 620px;}
.col9{ width: 700px;}
.col10{ width: 780px;}
.col11{ width: 860px;}
.col12{ width: 940px;}

.offset1{margin-left: 90px;}
.offset2{margin-left: 170px;}
.offset3{margin-left: 250px;}
.offset4{margin-left: 330px;}
.offset5{margin-left: 410px;}
.offset6{margin-left: 490px;}
.offset7{margin-left: 570px;}
.offset8{margin-left: 650px;}
.offset9{margin-left: 730px;}
.offset10{margin-left: 810px;}
.offset11{margin-left: 890px;}

.offset-left{margin-left: 0 !important;}
.offset-right{margin-right: 0 !important;}

#nav{ width: 940px;}
#top {padding: 30px 0;}
#top .intro .line{width: 375px;display: inline-block;}
#top .intro .text {font-size: 25px;}
#top .top h1{font-size: 70px;line-height: 45px;}
#top .top h4{letter-spacing: 7.5px;}
#top p{text-align: justify;}
#about, #resume, #portfolio, #contact {	padding: 60px 0;}	
#about img{width: 300px;}
.social-icons{width: 230px;}
.project {/* width: 50%; */ float: left; text-align: right;margin-bottom: 20px;}
.project h1{margin: 0; font-size: 2em;}
.project a {}
.project p {font-size: 1em;}
.project .employer {font-size: 1.5em;}
.project .role {font-size: 1.3em;}
.project .tools {font-size: 1.1em;}
.project img {min-height: 300px;}

form label{	text-align: right;}
label.col2{line-height: 30px;}
/* Larger displays */
@media (min-width: 1200px) {
	.container {width: 1200px;}
	#top .intro .text {font-size: 30px;}
	#top .top h1{font-size: 80px; line-height: 50px;}
	#top .intro .line{width: 480px;}
	#top .top h4{font-size: 18px; letter-spacing: 11.5px;}
	#about img{width: 400px;}
	
	.project h1{margin: 0; font-size: 2.2em;}
	.project a {}
	.project p {font-size: 1.1em;}
	.project .employer {font-size: 1.6em;}
	.project .role {font-size: 1.4em;}
	.project .tools {font-size: 1.2em;}
	
	p {font-size: 18px;}

	.col1{ width: 80px;}
	.col2{ width: 180px;}
	.col3{ width: 280px;}
	.col4{ width: 380px;}
	.col5{ width: 480px;}
	.col6{ width: 580px;}
	.col7{ width: 680px;}
	.col8{ width: 780px;}
	.col9{ width: 880px;}
	.col10{ width: 980px;}
	.col11{ width: 1080px;}
	.col12{ width: 1180px;}
	
	.offset1{margin-left: 110px;}
	.offset2{margin-left: 210px;}
	.offset3{margin-left: 310px;}
	.offset4{margin-left: 410px;}
	.offset5{margin-left: 510px;}
	.offset6{margin-left: 610px;}
	.offset7{margin-left: 710px;}
	.offset8{margin-left: 810px;}
	.offset9{margin-left: 910px;}
	.offset10{margin-left: 1010px;}
	.offset11{margin-left: 1110px;}
}
@media (min-width: 768px), (min-device-width: 768px){
	/*#nav{
		display: block !important;
	}*/
}
@media (max-width: 770px), (max-device-width: 770px){
	nav {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		padding: 10px;
		width: auto;
		min-height: 30px;
		border-radius: 0px; 
		-moz-border-radius: 0px; 
		-webkit-border-radius: 0px; 
		-khtml-border-radius: 0px; 
		z-index: 9;
		box-shadow: 5px 5px 10px 0px #333 ;  
		-moz-box-shadow: 5px 5px 10px 0px #333 ;
		-webkit-box-shadow: 5px 5px 10px 0px #333 ;
	}
	body{
		padding-top: 50px !important;
	}
    
    #top-alerts{padding-top: 40px;}
	
	#nav-collapse {display: block;}
	#nav {display: none; width: auto; overflow: visible;}
  	.nav {
  		width: auto;
  		margin-top: 40px;
  		margin-right: 20px;
  		position: relative;
  		height: 150px;
  	}
  	.nav li{
  		float: none;
  	}
  	.nav li a:hover{
  		background: none;
  		box-shadow: none;	
		-moz-box-shadow: none;
		-webkit-box-shadow: none;
		color: #ffac00;
  	}
  	.nav li a.active{
  		background: none;
  		color: #FFF;
  	}
}
@media (min-width: 768px) and (max-width: 979px), (min-device-width: 768px) and (max-device-width: 979px) {
	.container, #nav {width: 720px;}
	#top .intro .line{width: 270px;}
	#top .intro .text {font-size: 20px;}
	#top .top h1{font-size: 60px;line-height: 45px;}
	#top .top h4{letter-spacing: 3.8px;}
	
	.project h1{margin: 0; font-size: 1.5em;}
	.project a {}
	.project p {font-size: .8em;}
	.project .employer {font-size: 1.3em;}
	.project .role {font-size: 1.1em;}
	.project .tools {font-size: 1em;}

	.col1{ width: 40px;}
	.col2{ width: 100px;}
	.col3{ width: 160px;}
	.col4{ width: 220px;}
	.col5{ width: 280px;}
	.col6{ width: 340px;}
	.col7{ width: 400px;}
	.col8{ width: 460px;}
	.col9{ width: 520px;}
	.col10{ width: 580px;}
	.col11{ width: 640px;}
	.col12{ width: 700px;}
	
	.offset1{margin-left: 70px;}
	.offset2{margin-left: 130px;}
	.offset3{margin-left: 190px;}
	.offset4{margin-left: 250px;}
	.offset5{margin-left: 310px;}
	.offset6{margin-left: 370px;}
	.offset7{margin-left: 430px;}
	.offset8{margin-left: 490px;}
	.offset9{margin-left: 550px;}
	.offset10{margin-left: 610px;}
	.offset11{margin-left: 670px;}
	
	#resume .col7 {width: 100%}
	#resume .col4{width: 100%}
	#resume .offset1{margin: 0;}
	
	.page.col3 {width: 100%}
	#contact_form_wrap {margin-left: 130px}
    .social-icons {width: 115px !important;}
    
}

@media (max-width: 767px), (max-device-width: 767px) {
	#top, footer, section,#about, #resume, #portfolio, #contact {
	    padding-right: 20px;
	    padding-left: 20px;
  	}
  	nav {/*width: 100%;*/}
  	#top .intro .line{display: none;}
	#top .intro .text {font-size: 20px;}
	#top .top h1{font-size: 60px;line-height: 45px;}
	#top .top h4{letter-spacing: 0px;font-size: .8em;}
	.container {width: 100%;}
	#about img{width: 200px;}
	.project {text-align: left;}
	label.col2{line-height: .1em;}
	form label{	text-align: left;}
	#contact .button {padding: 10px 0;font-size: 1.1em;}
	/* .project {width: 100%} */
	.col1, .col2, .col3, .col4, .col5, .col6,
	.col7, .col8, .col9, .col10, .col11, .col12 {
		width: 100%;
		margin: 0 0 20px;
	}
	.row {margin-bottom: 0;}
}

@media (max-width: 480px), (max-device-width: 480px) {
     top p {text-align: center}
    #gototop .icon {left: 50%;} 
	#about img{width: 100%;}
    #about p{text-align: center;}
   #contact .page p{text-align: center;}
}