body
{
	margin: 0;
	padding: 0;
	line-height: 28px;
	background-color: #ccc;
}

header
{
	position: fixed;
	top: 0; left: 0;
	width: 100%;
	z-index: 5000;
}
#hcon
{
	width: 1400px; margin: 0 auto;
	background-color: white;
	
	position: relative;
	display: table;
	text-transform: capitalize;

}

h1, h4	
{
	font-family: 'Roboto', sans-serif;
}
p
{
	font-family: 'Quicksand', sans-serif;
	font-weight: normal;
	font-size: 14px;
}

header #h_projects
{
	display: block;
	float:left;
	position: relative;
	width: 15%;
	background-color: #f58220;
	color: white;
	font-size:20px;
	padding: 16px 0; 
	font-family: 'Roboto', sans-serif;
	font-weight: lighter;
}

header #h_projects #nav_title
{
	margin-left: 20px;
}

header #h_projects:hover ul
{
	display: block;
}
header ul
{
	list-style: none;
	margin:15px 0 0 0;
	padding: 0;
	position: absolute;
	display: none;
	float: left; 	
	width: 100%; 
	text-align: left;
}

header ul li
{
	border-bottom: thin solid white;
	background-color: #4b4e50;
}
header ul li:first-child
{
	background-color:rgba(255,255,255,0.8); 
	text-align: center;

}
header ul li:first-child img
{
	width: 84%;
	padding: 10px 0;
}
header ul li a
{
	display: block;
	padding: 10px 20px;
	color: white;
	text-decoration: none;
	font-size: 14px;

}

header ul li:last-child, header ul li:last-child a
{
	background-color: #ffcc00;
	color: black;
	border:none;
}
header tags
{
	float: left;
	width: 55%;
	padding: 15px 0 10px 0; 
	font-size: 13px;
	font-weight: bold;
}

header tags span
{
	margin-left: 20px;
	font-family: 'Roboto', sans-serif; 
	text-transform: capitalize;
}

header phone
{ 
	font-family: 'Ubuntu', sans-serif;
	font-size: 13px;
	position: relative;
	margin-left: 50px;
	font-weight: bold;
}
header phone img
{
	width: 15px;
	position: absolute;
	top: 0px;
	left: -20px;
}
header menu
{
	float: right; 	
	padding: 16px 0;
	margin: 0;
	width:350px;
	border-right: 50px solid #6d3300;

}
header a.profile
{ 
	color: #6d3300;
	font-family: 'Roboto', sans-serif;
	font-weight: lighter; 

	float: right;
}

#container
{
	width: 1400px;
	margin: 60px auto 0 auto
	; 
}
#screen
{
	width: 1000px;
	display: block; 
	float: left; 
	height: 700px; 
	overflow: hidden;
}

#screen #showcase
{
	width: 100%;
}
#screen #showcase .slide
{
	width: 100%;
	height: 800px; 
}

#screen #showcase .slide ul
{
	width: 100%;
	margin: 0; padding: 0;
	list-style: none;
}


#screen #showcase .slide img
{
	max-width: 100%; min-height: 700px;
}

#screen #showcase #showcase_info
{
	display: block;
	padding-left:5vw;

}
#intro
{
	width:350px;
	border-right:50px solid #f58220;
	float: right;  
	background-color: #ffcc00; 

	height: 700px;
}

#intro #mvs 
{
	border-top: thin solid #f58220; 
	padding-top: 10px;
}

#intro #mvs p
{
	font-size: 13px;
}

#intro h1
{
	background-color: #4b4e50;
	color: white;
	width:80%;
	padding: 20px 10%; margin: 0 0 20px 0; 
	line-height: 40px;
	display: block;
	font-size: 20px;
	text-transform: capitalize;
}

#intro h1.cc
{
	/*font-family: 'Vast Shadow', cursive;*/
}
#intro h2
{
	margin: 10px 10%;
	font-size: 13px;
	font-family: "Arial";
	color: #6d3300; 

}


#intro p
{
	margin: 0 10%;
	font-style: 16px;
}

#intro a.more
{
	margin: 20px 10%;
	color: #f58220;  
	display: block;width:150px;
	font-size: 13px;
	display: inline-block;
	font-family: "Arial";  

}

#intro a.more:hover
{
	color: #6d3300;
}

#projects
{ 
	float: left;
	display: table;
	margin:30px 0; padding:0  0;  
	position: relative;
	width: 100%;
	min-height: 650px;
}

#projects h1
{
	font-size: 16px; 
	padding: 10px 0 10px 20px;
	width: 98%; 
	color: #6d3300;
 
}
#projects h1 span
{ 
	color: black;
}
#projects ul
{
	margin: 20px 0 0 40%; padding: 0; width: 60%;
	display: table;
	list-style: none;
	
}
#projects .list
{ 
	width: 29%;
	margin: 0 2% 10px 2%;
	float: left;

	min-height: 275px; 
	/*max-height: 275px;*/
	border-top: 4px solid #6d3300; 

	cursor: pointer; 
	
 
}
#projects .list:hover
{
	border-top: 4px solid #f58220; 
}
#projects .list:hover p
{
	text-decoration: underline;
}
#projects .list p
{
	font-size: 13px; 
}
#projects li.list:first-child
{
	width: 35%;
	position: absolute;
	left: 0;
	top: 79px;
	background:none;

	border-right: thin solid #6d3300;
	border-top: none; 


	margin: 0; padding: 0;

	padding-right: 3%;
	min-height: 700px;
}
#projects .list:first-child .imgholder
{
	width: 100%;
	height: auto;
	max-height: 500px;
	overflow: hidden;
	margin: 0; padding: 0;
	border-top: 4px solid #6d3300; 


}
#projects .list:first-child:hover .imgholder
{
	border-top: 4px solid #f58220; 
}
#projects .list .imgholder
{
	width: 100%;
	height: 150px;
	overflow: hidden;


}

#projects .list img
{
	width: 140%;
	margin-top:-50px;
  
}
#projects .list .project_info, #projects #projectfull .project_info
{
	display: block;
	color: #6d3300;

}
#projects  .list .project_info span, #projects #projectfull .project_info span
{
	font-weight: bold;
	color: black;
}
#projects #projectfull
{
	width: 92%;
	position: fixed;
	top: 0; left: 0;
	height: 100%;
	overflow: scroll;

	background-color: rgba(255,255,255, 0.97);
	padding: 30px 4%;

	display: none;
	border-top: 4px solid #6d3300; 
	z-index: 5000;
}

#projects #projectfull #images
{
	width: 65%;
	float: right;
	margin:0 10% 0 0;

}
#projects #projectfull img
{
	width: 100%;
	margin-bottom: 10px; 
	
}
#projects  #projectfull .project_info
{
	display: block;
	width: 25%;
	float: left;

}
 #projects #projectfull .project_info span
 {
 	display: block;
 }
#projects  #projectfull .close
{
	position: absolute;
	right: 4%;
	top: 50px; 
	font-family: "Arial";
	text-decoration: underline;
	cursor: pointer;

	color: #6d3300;
}

#profile
{ 
	margin:0 0 200px 0; padding:0 0 0 50px; width: 1300px; 
	background-color: #ffcc00; 
	overflow: hidden;
	position: relative;
	border-left: 50px solid #f58220;
	border-top: 3px solid #6d3300;
	border-bottom: 3px solid #6d3300;
}

#profile h1
{
	font-size: 20px;
	margin: 20px 0;
	color: #4b4e50;
}
#profile .left
{
	float:left;
	width: 60%;
	display: table; 
	margin-bottom: 100px;
	min-height: 800px;
	position: relative;
	padding-top: 50px;
}

#profile .left .halfs
{
	float: left;
	width: 45%;
}

#profile .left .halfs2
{ 
	padding: 0 0 0 4% ;
	border-left: thin solid black;
	min-height: 700px;
}
#profile .left .content .info
{
	display: none;
} 

#profile .left .content.focusjob .info
{
	display: block;
}

#profile .left h4
{
	cursor: pointer;
}

#profile .left p
{
	width: 95%;
}
#profile .right
{
	position: absolute;
	width: 30%; right: 0; height: 100%;
	background-color: white; 
}


#profile .right h4, #profile .right p
{
	margin-left: 20px;
}

#profile .right img
{
	width: 100%; 
}

#profile h4
{
	color: #6d3300;
}

footer
{ 
	clear: both;
	display: table;
	width: 96vw;
	padding: 10px 2vw; 

	position: fixed;
	bottom: 0;
	left: 0;
	background-color: rgba(255,255,255,0.7);
	border-top: 2px solid orange;
	z-index: 6000;
}

footer #bottom_logo
{
	float: left;
	width: 80px;
}

footer #copy
{
	float: right;
	font-family: 'Quicksand', sans-serif;
	font-weight: normal;
	text-align: right;

	font-size: 12px;

}

footer span a
{
	color:#ccc;
	text-decoration: none;
}

/* Portfolio */
.portfolio .sy-controls {
  display: block;
}
.portfolio .sy-pager {
  margin: 1.5em 0;
}
.portfolio .external-captions {
  background-color: #fff;
  padding: 1em;
}



@media only screen and (max-device-width : 640px) 
{

	header
	{
		width: 100vw;
		position: relative;
	}

	#hcon
	{
		width: 100vw;
	}

	header #h_projects
	{
		width: 100%;
	}
	header tags
	{
		width: 100%;
	}
	header a.profile
	{
		display: none;
	}
	header menu
	{
		display: none;
	}

	#container
	{
		width: 100vw;
		margin-top:0;
	}

	#screen
	{
		width: 100vw;
		height: auto;
	}
	#screen #showcase .slide
	{
		height: auto;
	}
	#screen #showcase .slide img 
	{
		min-height: auto;
	}
	.sy-pager li.sy-active a, ul.sy-pager
	{
		display: none;
	}
	.sy-controls li a:after
	{
		top: 40%;
	}
	#intro
	{
		width: 90vw;
		border-right: 10vw solid #f58220;


	}

	#projects
	{
		width: 96vw;
		padding: 0 2vw; 
	}
	#projects h1
	{
		width: auto;
		padding: 0;
	}
	#projects ul
	{
		margin: 20px 0;
		width: 100%;
	}
	#projects li.list:first-child
	{
		width: 100%;
		position: relative;
		padding-right: 0; 
		top: 0; left: 0;
		border-right: none;
		clear: both;
		min-height: auto;
	}
	#projects .list
	{ 
		width: 100%;
		clear: both;
		max-height: auto;
		min-height: auto;
		margin: 0;
	}
	#projects .list .imgholder
	{
		height: auto;
	}
	#projects #projectfull .project_info
	{
		width: 100%;
	}
	#projects #projectfull #images
	{
		width: 100%;
		clear: both;
		margin: 0;

	}

	#projects #projectfull .close
	{
		top: 10px;
		font-size: 12px;
	}


	#profile
	{
		width: 90vw;
		border-left: 10vw solid #f58220;
		padding: 0;
	}
	#profile .left
	{
		width: 100%;
		min-height: auto;
	}
	#profile .left .halfs
	{
		width: 96%;
		padding: 0 2%;
		float: none;

	}
	#profile .left .halfs2
	{
		padding: 0 2%;
		border-left: none;
		min-height: auto;
	}
	#profile .right
	{
		position: relative;
		width: 100%;
		height: auto;
		clear: both;
		padding-bottom: 100px;
	}

	footer
	{
		width: 80vw;
		padding: 10px 10vw;
		background-color: white;
	}

	footer #copy
	{
		display: none;
		

	}




}