@charset "UTF-8";
/* CSS Document */
body {
	font-family: 'Roboto Condensed', Helvetica, sans-serif;
}

#mainContainer {
	width:1366px;
	height:768px;
	margin-left:auto;
	margin-right:auto;
	background-color:#FFF;
	}

#Head {
	width:1366px;
	height:105px;
	}
	#Logo {
		width:105px;
		height:105px;
		float:left;}
			#Logo a:link{
				width:105px;
				height:105px;
				background-image:url(IMAGES/JC_logo.png);
				background-repeat:no-repeat;
				display:block;}
			#Logo a:hover{
				background-image:url(IMAGES/JC_logohover.png);
				background-repeat:no-repeat;}
	#Name {
		width:340px;
		height:105px;
		background-image:url(IMAGES/JC_name.png);
		float:left;
		}
	#Space1 {
		width:481px;
		height:105px;
		float:left;
		}
	#Search {
		width:440px;
		height:105px;
		float:left;
		}	
			#Nav {
				width:440px;
				height:26px;
				font-size:17px;
				word-spacing:30px;
				text-align:right;
				line-height:26px;
				float:left;
				}
				#Nav a{
					text-decoration:none;
					color:#58585a;
					}
				#Nav a:hover{
					color:#f6892a;
					text-decoration:overline;
					transition:0.3s;
					}	
				#SocialMedia {
				width:440px;
				height:40px;
				float:left
				}
				 #smSpace {
					 width:290px;
					 height:40px;
					 float:left;
					 }
					#tumb {
						width:30px;
						height:40px;
						float:left;
						}
					#insta {
						width:30px;
						height:40px;
						float:left;
						}
					#fb {
						width:30px;
						height:40px;
						float:left;
						}
					#be {
						width:30px;
						height:40px;
						float:left;
						}
					#in {
						width:30px;
						height:40px;
						float:left;
						}
				#Space {
					width:440px;
					height:35px;
					float:left;
					text-align:right;
					 font-size:10px;
					 font-weight:300;
					}									
#Content {
	width:1366px;
	height:595px;
	margin-top:20px;
	margin-bottom:20px;
	}
.about {
	background-image:url(IMAGES/JC_bg.jpg)}

#Info {
	width:321px;
	height:359px;
	float:left;
	text-align:left;
	color:#FFFFFF;
	line-height:19px;
	padding-top:74px;
	padding-right:15px;
	padding-bottom:162px;
	padding-left:65px; 
	}
.aboutshapes {font-size:13px;}
	
#aboutSpace {
	width:965px;
	height:595px;
	float:left;}
#SWrap1 {
	width:800px;
	height:595px;
	float:left;
	}
	#H1 {
		width:800px;
		height:55px;
		font-size:40px;
		color:#f6892a;
		float:left;
		font-weight:300;
		}
	#Design {
	width:380px;
	height:540px;
	float:left;
	margin-right:20px;
	}
	#Dhead {
		width:380px;
		height:140px;
		float:left;
		background-image:url(IMAGES/JC_DESIGN.jpg);}
	#DText {
		width:175px;
		height:292px;
		float:left;
		background-color:#f6892a;
		color:#FFFFFF;
		padding-top:3px;
		padding-left:15px;
		}	
	#DRes {
		width:380px;
		height:90px;
		float:left;
		margin-top:15px;}	
		
		#DRes a:link{
				width:380px;
				height:90px;
				background-image:url(IMAGES/JC_RESUME.jpg);
				background-repeat:no-repeat;
				display:block;}
			#DRes a:hover{
				background-image:url(IMAGES/JC_RESUMEhover.jpg);
				background-repeat:no-repeat;}	
	#Software {
	width:380px;
	height:540px;
	float:left;
	margin-right:20px;
	}
	#Shead {
		width:380px;
		height:140px;
		float:left;
		background-image:url(IMAGES/JC_SOFTWARE.jpg);}
	#SText {
		width:365px;
		height:222px;
		float:left;
		background-image:url(IMAGES/JC_sbg.jpg);
		background-repeat:no-repeat;
		color:#FFF;
		padding-top:3px;
		padding-left:15px;
		}	
	#SText2 {
		width:380px;
		height:55px;
		float:left;
		margin-top:15px;
		background-image:url(IMAGES/JC_icons.jpg)}
	#SPort {
		width:380px;
		height:90px;
		float:left;
		margin-top:15px;
		}	
			#SPort a:link{
				width:380px;
				height:90px;
				background-image:url(IMAGES/JC_PORT.jpg);
				background-repeat:no-repeat;
				display:block;}
			#SPort a:hover{
				background-image:url(IMAGES/JC_PORThover.jpg);
				background-repeat:no-repeat;}				
#Line2{
	width:4px;
	height:595px;
	background-color:#f6892a;
	float:left;
	}	
#SWrap2 {
	width:562px;
	height:595px;
	float:left;
	}
	#H2 {
		width:542px;
		height:55px;
		font-weight:300;
		font-size:40px;
		color:#f6892a;
		margin-left:20px;
		}
	#Buttons{
		width:542px;
		height:540px;
		margin-left:20px;
		background-repeat:no-repeat;
		}
	#clients{
		width:542px;
		height:260;}
	#box1{
		width:261px;
		height:260px;
		margin-right:10px;
		margin-bottom:15px;
		float:left;}
	#box2 {
		width:261px;
		height:260px;
		margin-left:10px;
		margin-bottom:15px;
		float:right;}	
	#box3 {
		width:261px;
		height:50px;
		background-color:#f6892a;
		float:left;
		margin-bottom:15px;
		color:#FFF;
		text-align:center;
		line-height:50px}	
	#Sspace {
		width:542px;
		height:265px;
		float:left;}
	#SCom {
		width:362px;
		height:175px;
		float:left;}
	#Sspeak {
		width:362px;
		height:175px;
		float:left;
		background-image:url(IMAGES/JC_speak.jpg);
		background-repeat:no-repeat;
		}	
	#Scontact {
		width:362px;
		height:90px;
		float:left;
		}
		#Scontact a:link{
				width:362px;
				height:90px;
				background-image:url(IMAGES/JC_Scontact.jpg);
				background-repeat:no-repeat;
				display:block;}
			#Scontact a:hover{
				background-image:url(IMAGES/JC_Scontacthover.jpg);
				background-repeat:no-repeat;}
	#Sme {
		width:180px;
		height:265px;
		float:left;
		background-image:url(IMAGES/JC_me.jpg);
		float:left;}						
#Footer {
	width:1366px;
	height:108px;
	}	
	#FootBox1 {
		width:1216px;
		height:108px;
		float:left;
		}
		#Text {
			width:1216px;
			height:60px;
			color:#58585a;
			font-size:17px;
			}	
		#Space2 {
			width:1216px;
			height:44px;
			}
			#Text2{
			width:1216px;
			height:104px;
			color:#58585a;
			font-size:17px;}
		.here a{
			color:#f6892a;
			font-size:20px;
			text-decoration:none;}
		.here a:hover {
			color:#f6892a;
			text-decoration:overline;
			font-weight:bolder;
			font-size:24px;
			transition:0.2s}		
		#Line {
			width:1216px;
			height:4px;
			background-color:#f6892a;
			}	
	#FootBox2 {
		width:150px;
		height:108px;
		float:left;}	
		#Space3 {
			width:150px;
			height:56px;
			}
		#Icons {
			width:150px;
			height:52px;}
			#com {
				width:50px;
				height:48px;
				}
			#pen {
				width:50px;
				height:48px;
				}
			#cam {
				width:50px;
				height:48px;
				}										
.jump{
	float:left;
	padding-top: 4px;
	padding-bottom:0;
	display:block;
	transition:all 0.3s;
	-webkit-transition: all 0.3s;
	-moz-transition:all 0.3s;
	-ms-transition:all 0.3s;
	-o-transition:all 0.3s;
}
.jump:hover{
	padding-top: 0;
	padding-bottom:4px;}	
#contactSpace1 {
	width:283px;
	height:595px;
	float:left;}	
#contactWrap1{
	width:400px;
	height:595px;
	float:left;}
#contactWrap2{
	width:400px;
	height:595px;
	float:left;}	
#contactSpace2 {
	width:400px;
	height:97.5px;
	float:left;
	}
#contactText {
	height:400px;
	width:300px;
	float:left;
	background-image:url(IMAGES/JC_contact.jpg);
	}		
#contact{
	height:400px;
	width:300px;
	margin:auto;
	float:left;}
#TYSpace {
	height:132.5px;
	width:1366px;
	background-color:#f6892a;
	}
#TYText {
	height:30px;
	width:1366px;
	text-align:center;
	background-color:#f6892a;
	}
#Thanks {
	height:270px;
	width:1366px;
	margin-top:30px;
	color:#FFFFFF;
	background-color:#f6892a;
	background-image:url(IMAGES/JC_thanks.jpg);
	text-align:center;
	font-size:17px;}	
.thanks {
	background-color:#f6892a;}			
.formStyle{
	height:400px;
	width:300px;
	overflow:scroll;
	font-family:'Roboto Condensed', Helvetica, sans-serif;
	}
input {
	font-family:'Roboto Condensed', Helvetica, sans-serif;
	padding:5px;
	width:300px;
	font-size:16px;
	border:none;
	border-bottom:solid 2px #58585a;
	transition: border 0.4s;
	color:#f6892a;}
textarea {
	resize:none;
	font-family:'Roboto Condensed', Helvetica, sans-serif;
	font-weight:300;
	font-size:15px;
	width:300px}
		
input.orange {
	background-color:#f6892a;
	color:#fff;
	width:150px;
	cursor:pointer;}	

.heading {
	color:#f6892a;
	font-size:30px;
	font-weight:300;}
.heading2 {
	color:#ffffff;
	font-size:30px;
	font-weight:300;}