/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

input[type='text'],input[type='number'],textarea {font-size:16px;}

/********************* end css reset ***********************/

body {
		margin: 0;
   		padding: 0;
		margin-left:auto;
		margin-right:auto;
		background:#fcf8ed url(../img/background.png);
	}
	
.header {
		top:0px;
		position:absolute;
		background: url(../img/header.png);
		background-repeat:repeat-x;
		height:65px;
		width:100%;
		color:#f79433;
		z-index:1;
	}
	
.masthead b {
		display:block;
		overflow:hidden;
		max-height:419px;
		max-width:1020px;
		margin-left:auto;
		margin-right:auto;
}
	
.masthead {
		position:absolute;
		margin-top:60px;
		background:#5cb4f4;
		min-width:300px;
		width: 100%;
		z-index:-1;
	}
	
.masthead2 {
		position:absolute;
		margin-top:60px;
		background:#5cb4f4;
		min-width:300px;
		width: 100%;
		z-index:-1;
	}
	
	
.masthead2 b {
		display:block;
		overflow:hidden;
		max-height:100px;
		max-width:1020px;
		margin-left:auto;
		margin-right:auto;
	}
	
.bodycontent {
		top:0px !important;
		position:relative;
		margin: 0;
   		padding: 0;
		max-width: 780px;
		width: 100%;
		margin-left:auto;
		margin-right:auto;
		z-index:2;
	}
	
.subsection {
		position:relative;
		margin: 0;
   		padding: 0;
		max-width: 780px;
		width: 100%;
		height: 150px;
	}
	
.subsection_about {
		position:relative;
		margin-top: 50px;
   		padding: 0;
		max-width: 780px;
		width: 100%;
		height: 450px;
	}
	
.subsection_port {
		position:relative;
		margin-top: 50px;
   		padding: 0;
		max-width: 780px;
		width: 100%;
		height: 100%;
	}
	
.catwalk {
		position:relative;
   		margin-left:7px;
		width:32%;
		min-width:218px;
		height:200px;
		display:inline-table;
	}
	
.cat {
	opacity: 0.7;
	}	
	
.cat:hover  {
	opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
	}
	
.resume{
	opacity: 0.7;
	}	
	
.resume:hover  {
	opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
	}
	

	
.logo {
		float: left;
		margin-left:10px;
		top:5px;
		position:absolute;
		z-index:3;
	}
	
.icon {
		margin-bottom:-8px;
		margin-right:10px;
	}
		
.active {
	border-bottom: 3px solid #FFF;
	}	
	
.active2 {
	color:#fff !important;
	
	}

#nav-home a:hover {
	border-bottom:3px solid #FFF;
	}	
#nav-about a:hover {
	border-bottom:3px solid #FFF;
	}
#nav-portfolio a:hover {
	border-bottom:3px solid #FFF;
	}
#nav-contact a:hover {
	border-bottom:3px solid #FFF;
	}
#nav-blog a:hover {
	border-bottom:3px solid #FFF;
	}	
	
img, embed, object, video {
	max-width: 100%;
	}
	
.nav-primary {
	float:right;
	width:500px;
	height:20px;
	z-index:4;
	}
	
.nav-primary li {
	float:left;
	display:inline;
	padding:30px 10px 0px 50px;
}

.nav-primary li a {
	color: #FFF;
	padding:0px 0px 3px 0px;
	color:#fff;
	}
		
a:link {
		font-family:"arial", sans-serif;
		text-decoration:none;
		font-size:14px;
		text-shadow: 1px 1px #C90;
	}
	
a:visited {
		font-family:"arial", sans-serif;
		color:#F93;
		text-decoration:none;
		font-size:14px;
	}
	
a:hover {
		font-family:"arial", sans-serif;
		color:#03C;
		text-decoration:none;
		font-size:14px;
	}
	
a:active {
		font-family:"arial", sans-serif;
		color:#F93;
		text-decoration:bold;
		font-size:14px;
	}

h2 {
		display:block;
		width:100%;
		padding-top:94px;
		font-family: 'Open Sans', sans-serif;
		font-weight:700;
		color:#ffffff;
		letter-spacing:5px;
		text-shadow: 1px 1px #666;
		font-size:31px;
}

h3 {
		font-family: 'Open Sans', sans-serif;
		font-weight:700;
		padding:20px;
		color:#f79433;
		letter-spacing:1px;
		font-size:24px;
		width:250px;
}

h4 {
		font-family: 'Open Sans', sans-serif;
		font-weight:700;
		padding:10px;
		color:#f79433;
		font-size:18px;
		line-height:25px;
}

h5 {
		font-family:"arial", sans-serif;
		color:#b2b2b2;
		font-size:12px;
		padding:10px 0px;
}

h6 {
		font-family:"arial", sans-serif;
		color:#b2b2b2;
		font-size:10px;
		line-height:15px;
}

h7 {
		font-family:"arial", sans-serif;
		color:#b2b2b2;
		font-style:italic;
		font-size:10px;
		padding:0px 10px;
}

.blog_link {
		font-family: 'Open Sans', sans-serif;
		font-weight:700;
		color:#f79433;
		letter-spacing:1px;
		font-size:12px !important;
		width:200px;
		padding:0px 10px;
		text-shadow: none !important;
}

.blog_link:hover {
		color:#005287;
}

p a {
		font-family:"arial", sans-serif;
		font-stretch:expanded;
		color:#f79433;
		letter-spacing:1px;
		font-size:12px !important;
		text-shadow: none !important;
}

p a:hover {
		color:#005287;
}


p {
		line-height:20px;
		width:510px;
		margin-left:20px;
		font-family:"arial", sans-serif;
		font-stretch:expanded;
		font-size:12px;
		text-align:left;
		color:#6c6b69;
		float:left;
		clear:left;
}

.port {
		width:220px;
		margin-left:5px;
		padding: 10px 0px 50px 0px;
}

.lantern {
		margin-top:-20px;
		width:214px;
		height:90px;
		float:right;
}

#post {
		position:relative;
		float:left;
   		margin-bottom: 30px;
		max-width: 500px;
		width: 100%;
		height: 100%;
		padding-bottom:35px;
		border-bottom:1px solid #f79433;
		
	}
	
#post_bottom {
		position:relative;
		float:left;
   		margin-bottom: 30px;
		max-width: 500px;
		width: 100%;
		height: 100%;
		padding-bottom:35px;
		
	}
	
#stories {
		position:relative;
		float:left;
		margin-left:10px;
   		margin-bottom: 30px;
		max-width: 500px;
		width: 100%;
		height: 100%;
		padding-bottom:35px;
		border-bottom:1px solid #f79433;
		
	}
	
#stories_bottom {
		position:relative;
		float:left;
		margin-left:10px;
   		margin-bottom: 30px;
		max-width: 500px;
		width: 100%;
		height: 100%;
		padding-bottom:35px;
		
	}

.blog {
		margin-top:10px;
		margin-left:15px;
		width:100px;
		height:100px;
		float:left;
		clear:left;
		opacity: 0.7;
}	
	
.blog:hover  {
	opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
	}

.innerpost {
		position:relative;
		float:left;
		margin-right:35px;
		max-width: 350px;
		width:100%;	
	}
	
.blogpara {
		width:100%;
		max-width:350px;
		margin-left:0px;
		padding:10px;
		float:left;

}

.para {
		width:100%;
		max-width:480px;
		margin-left:0px;
		padding:10px;
		float:left;

}

.para2 {
		width:100%;
		max-width:480px;
		margin-left:0px;
		padding:10px;
		float:left;
		color:#ffffff !important;
} 

.triangle {
	display:none;
}

.about_image {
	margin-top:-20px;
	width:219px;
	height:171px;
	float:right;
}

.contact_image {
	margin-top:-20px;
	width:219px;
	height:249px;
	float:right;
}

.blog_image {
	position:fixed;
	margin-top:20px;
	margin-left:560px;
	width:219px;
	height:249px;
	float:right;
}

.sec1 {
	padding:0.25em;
	width:30%;
	float:right;
	}
	
.sec2 {
	padding:0.25em;
	width:30%;
	float:right;
	}
	
.sec3 {
	padding:0.25em;
	width:31%;
	float:right;
	}
	
.nav1 {
	clear:left;
	float:left;
	padding:3px;
	width:38%;
	}
	
.nav2 {
	width:38%;
	margin-top:3px;
	float:left;
	}
	
.sec1 a {
	font-family:"arial", sans-serif;
	color:#b2b2b2;
	text-decoration:none;
	font-size:12px !important;
	text-shadow: none;
	}
	
.sec1 a:hover {
	font-family:"arial", sans-serif;
	color:#f79433;
	text-decoration:none;
	font-size:12px !important;
	text-shadow: none;
	}
	
.sec1 ul li {
	line-height:25px;
	}

/*
	begin Slideshow
*/

#container {
	top:34px;
	position:relative;
	margin:auto;
   	padding: 0px;
	max-width: 750px;
	width: 100%;
	z-index:4;
	}

.slides_container {
	width:100%;
	overflow:hidden;
	position:relative;
	display:none;
	}

.slides_container a {
	width:751px;
	height:320px;
	display:block;
	}

.slides_container a img {
	width:100%;
	display:block;
	}

/*
	Next/prev buttons
*/

#slides .next, #slides .prev {
	position:absolute;
	top:150px;
	left:-25px;
	width:15px;
	display:block;
	z-index:107;
	}

#slides .next {
	left:100%;
	margin-left:10px;
	}

/*
	Pagination
*/

.pagination {
	position:relative;
	margin:15px auto;
	width:100px;
	z-index:105;
	clear:left;
	}

.pagination li {
	float:left;
	margin:0 1px;
	list-style:none;
	padding-left:5px;
	}

.pagination li a {
	display:block;
	width:12px;
	height:0;
	padding-top:12px;
	background-image:url(../img/pagination.png);
	background-position:0 0;
	float:left;
	overflow:hidden;
	}

.pagination li.current a {
	background-position:0 -12px;
	}
	
.shadow {
	padding-top:5px;
	
	}
	
/*
	form field
*/

form {
float:left;
margin:auto;
position:relative;
width:550px;
height:290px;
font-family: "Arial", Helvetica, sans-serif;
font-size: 14px;
font-weight:bold;
line-height: 20px;
color: #f79433;
text-decoration: none;
padding:15px 0px 10px 20px;
}

input {
width:290px;
display:block;
border: 0px solid #fff;
height: 25px;
background-color:#ffd2a6;
color:#ffffff;
outline-color: transparent;
outline-style: none;
-webkit-appearance: none;
border-radius: 0;
}

textarea.comments {
width:290px;
height:100px;
background-color:#ffd2a6;
color:#ffffff;
outline-color: transparent;
outline-style: none;
outline: none;
-webkit-appearance: none;
border-radius: 0;
}

input.submit {
width:130px;
height:30px;
text-align:center;
background: #f79433;
color:#fff;
font-family: 'Open Sans', sans-serif;
font-weight:700;
letter-spacing:1px;
margin-top:-70px;
opacity: 0.7;
-webkit-appearance: none;
border-radius: 0;
}

input.submit:hover {
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
cursor:pointer;
}

td {
padding:5px;
}

/*
	end form field
*/

	
.footer {
	width:100%;
	float:left;
	margin-left:-10;
   	padding: 10px 0px 20px 0px;
	background: url(../img/back_ft.jpg);
	
	-moz-box-shadow:    inset 0 0 10px #333;
   -webkit-box-shadow: inset 0 0 10px #333;
   box-shadow:         inset 0 0 10px #333;
	}
	
.footercenter {
		position:relative;
		margin: 0;
   		padding: 0;
		max-width: 780px;
		width: 100%;
		margin-left:auto;
		margin-right:auto;
	}


/*
	begin slide icon
*/
	
#icon-wrapper{
	position:fixed;
	margin-left:790px;
	width:200;
	float:left;
	margin-top:65px;
	height:200px;
}

.icon-slide-container{
	height:200px;
	overflow:hidden;
	text-align: left;
	position: absolute;
	float: left;
	width: 200px;
	left: 50%;
	margin-left: -150px;
}

.slide-icon{
  width:200px;
  height:auto;
  position:absolute;
  margin-top:-200px;
  -webkit-transition:.4s ease;
  -moz-transition:.4s ease;
  -ms-transition:.4s ease;
  -o-transition:.4s ease;
  transition:.4 ease;
}
	
.slide-icon:hover{
  position:absolute;
  margin-top:0;
}

/*
	begin photo gallery
*/

.thumbs {
	width:750px;
}

.thumbs a {
	width:100%;
	height:100%;
	display:inline-block;
	position:relative;
	text-decoration:none;
	background-position:center center;
	background-repeat: no-repeat;
	background-size:cover;
	-moz-background-size:cover;
	-webkit-background-size:cover;
	text-shadow: none !important;
}	

/* Image Box Style */
.thumbs .box {
	border: 4px solid #fff;
	cursor: pointer;
	height: 182px;
	float: left;
	margin: 20px 5px;
	position: relative;
	overflow: hidden;
	width: 200px;
}

/* Caption Common Style */
.thumbs .box .caption {
	background-color: rgba(0,0,0,0.8);
	position: absolute;
	color: #fff;
	z-index: 100;
		-webkit-transition: all 300ms ease-out;
		-moz-transition: all 300ms ease-out;
		-o-transition: all 300ms ease-out;
		-ms-transition: all 300ms ease-out;	
		transition: all 300ms ease-out;
	left: 0;
}

/** Caption 2: Full Width & Height **/
.thumbs .box .full-caption {
	height: 170px;
	width: 170px;	
	top: -200px;
	text-align: left;
	padding:15px;
}


/** Full Caption :hover Behaviour **/
.thumbs .box:hover .full-caption {
	-moz-transform: translateY(100%);
	-o-transform: translateY(100%);
	-webkit-transform: translateY(100%);
	opacity: 1;
	transform: translateY(100%);
}

@media screen and (max-width: 768px){
		
	.lantern {
	display:none;
	}
	
	.about_image {
	display:none;
	}
	
	#icon-wrapper{
	display:none;
	}

	
	.contact_image {
	display:none;
	}
	
	.blog_image {
	display:none;
	}
	
	h3 {
	padding:10px 25px;
	}
	
	p {
	width:90%;
	margin-left:10px;
	padding:0px 15px;
	}
	
	.subsection {
		width: 90%;
	}
	
	.subsection_about {
		width: 90%;
	}
	
	.subsection_port {
		width: 90%;
	}
	
	.catwalk {
		width:48%;
		min-width:270px;
		height:200px;
		float:right;
	}
	
	.cat {
		width:90%;
	}
	
	.resume {
		padding-top:20px;
		width:40%;
	}
	
	.port {
		width:280px;
		margin-left:5px;
		padding: 10px 0px 50px 0px;
	}
	
	#post {
		margin-left:25px;
		max-width:750px;
		width:100%;	
	}
	
	#post_bottom {
		margin-left:25px;
		max-width:750px;
		width:100%;
	
	}
	
	#stories {
		margin-left:25px;
		max-width:750px;
		width:100%;	
	}
	
	#stories_bottom {
		margin-left:25px;
		max-width:750px;
		width:100%;
	
	}
	
	.innerpost {
		max-width: 750px;
		width:100%;
	}
	
	.blogpara {
		width:100%;
		max-width:750px;
	}
	
	.para {
		width:100%;
		max-width:750px;
	}
	
	/*
	begin Slideshow
*/

	#container {
	top:15px;
	}

	#slides .next, #slides .prev {
	left:15px;
	width:15px;
	}

	#slides .next {
	left:100%;
	margin-left:-25px;
	}
	
}

@media screen and (max-width: 650px){
	.masthead2 b {
		display:block;
		overflow:hidden;
		max-height:419px;
		max-width:1020px;
		margin-left:auto;
		margin-right:auto;
	}
	
	.masthead2 {
		position:absolute;
		margin-top:35px;
		background:#5cb4f4;
		min-width:300px;
		width: 100%;
		z-index:-1;
	}
	
	.logo {
	float:none;
	width: 30%;
	margin:0 auto 0px;
	position:relative;
	min-width:170px; 
	}
	
	.active {
	border-bottom:none;
	font-weight:bold;
	}	

	#nav-home a:hover {
	color:#f79433;
	border-bottom:none;
	}	
	#nav-about a:hover {
	color:#f79433;
	border-bottom:none;
	}
	#nav-portfolio a:hover {
	color:#f79433;
	border-bottom:none;
	}
	#nav-contact a:hover {
	color:#f79433;
	border-bottom:none;
	}
	#nav-blog a:hover {
	color:#f79433;
	border-bottom:none;
	}	
	
	.nav-primary {
	margin-top:10px;
	padding-left:15px;
	width:95%;
	display:block;
	}
	
	.nav-primary li {
	padding:10px 0px 10px 30px;
	margin:0px;
	width:85%;
	text-align:left;
	border-bottom:1px solid #FFF;
	}

	.nav-primary li a {
	color: #FFF;
	padding:0px 0px 3px 0px;
	float:none;
	color:#fff;
	}
	
	a:link {
	font-size:16px;
	text-shadow:none;
	}
	
	h2 {
	padding-top:210px;
	font-size:24px;
	}
	
	.port {
	width:90%;
	margin-left:5px;
	padding: 10px 0px 50px 0px;
	}
	
	.triangle {
	display:inline;
	margin-left:-13px;
	padding-right:5px;
	}
	
	/*
form field
*/

	form {
	float:none;
	width:70%;
	height:500px;
	padding:20px;
	}

	input {
	width:400px;
	display:inline;
	}

	textarea.comments {
	width:400px;
	height:100px;
	}

	input.submit {
	width:200px;
	margin-top:20px;
	margin-left:100px;
	}

	table {
	display:inline;
	}

	td {
	float:left;
	clear:left;
	padding:2px;
	}
	
	.thumbs{
	width:100%;
	margin:50px auto 35px;
	text-align:center;
}
	
}

@media screen and (max-width: 590px){
	
	.catwalk {
		width:90%;
	}
	
	.cat {
		width:88%;
	}
	
	#post {
		margin-left:15px;
		width:95%;	
	}
	
	#post_bottom {
		margin-left:15px;
		width:95%;
	
	}
	
	#stories {
		margin-left:15px;
		width:95%;	
	}
	
	#stories_bottom {
		margin-left:15px;
		width:95%;
	
	}
	
		/*
form field
	*/

	form {
	float:none;
	width:80%;
	height:430px;
	padding:15px;
	}

	input {
	width:300px;
	display:inline;
	}

	textarea.comments {
	width:300px;
	height:100px;
	}

	input.submit {
	width:200px;
	opacity: 1;
	margin-left: 40px;
	margin-top:10px;
	-webkit-appearance: none;
	}
	
	
}

@media screen and (max-width: 320px){
	
	/*
form field
	*/
	form {
	width:280px;
	}

	input {
	width:270px;
	}

	textarea.comments {
	width:273px;
	height:100px;
	}
	
}