@media only screen and (max-device-width: 667px) and (orientation : portrait) {
	html { -webkit-text-size-adjust: 150%; }
	#main-body { -webkit-text-size-adjust: none; }
}

body {
	margin: 100px auto 0px auto;
	color: #fff;
	font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
	background-color: rgba(46,51,57,1); /*2e3339*/
}
@media only screen and (max-device-width: 667px) and (orientation : portrait) {
	body { margin-top: 160px; }
}

p {
	font-size: 16px;
	font-weight: 300;
	margin: 0px 0px 7px 0px;
}

h1 {
	font-size: 32px;
	font-weight: 500;
	margin: 0px;
}
  
h2 {
	font-size: 22px;
	font-weight: 300;
	margin: 0px 0px 5px 0px;
}
	
a, a:link, a:visited {
	color: #fff;
	text-decoration: none;
}

a:hover { text-decoration: underline; }

/* PORTFOLIO INDEX ELEMENTS */

#nav-bar {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 60px;
	width: 100%;
	background-color: rgba(46,51,57,1); /*2e3339*/
	border-bottom: 1px solid rgba(255,255,255,0.1);
	box-shadow: 0px 1px 7px rgba(0,0,0,0.4);
	border-radius: 1px; /* fixes iOS shadow glitch */
}
@media only screen and (max-device-width: 667px) and (orientation : portrait) {
	#nav-bar { height: 120px; }
}

#nav-bar img {
	height: 50px;
	width: 50px;
	padding: 5px;
}
@media only screen and (max-device-width: 667px) and (orientation : portrait) {
	#nav-bar img { height: 100px; width: 100px; padding: 10px; }
}

#nav-bar img:hover { background-color: rgba(255,255,255,0.1); }
   
.nav-left { float: left; }
.nav-right { float: right; }

.portfolio-item {
	float: left;
	height: 300px;
	width: 300px;
} 
.portfolio-item:hover { background-color: rgba(255,255,255,0.1); }  

img.portfolio-thumb {
	display: block;
	height: 200px;
	width: 200px;
	margin: 50px auto 50px auto;
}

@media only screen and (max-device-width: 667px) and (orientation : portrait) {
	.portfolio-item {
		height: 450px;
		width: 450px;
	} 
	img.portfolio-thumb {
		display: block;
		height: 300px;
		width: 300px;
		margin: 50px auto 50px auto;
	}
}
   
#portfolio-index {
	clear: both;
	overflow: auto;
	width: 900px;
	margin-top: 75px;
	margin-left: auto;
	margin-right: auto;
}
@media only screen and (min-width: 1281px) { #portfolio-index { width: 1200px; } }
@media only screen and (min-width: 1500px) { #portfolio-index { width: 1500px; } }
@media only screen and (min-width: 1800px) { #portfolio-index { width: 1800px; } }
@media only screen and (min-width: 2100px) { #portfolio-index { width: 2100px; } }

/* PORTFOLIO GALLERY ELEMENTS */
        
.gallery-item {
	display: block;
	margin-top: 50px;
	margin-right: auto;
	margin-left: auto;
}

#gallery-description {
	display: block;
	width: 900px;
	margin: 50px auto 0px auto;
	text-align: center;
}

/* FOOTER */

.footer {
	clear: both;
	height: 60px;
	width: 100%;
}