/*----- Global reset ---------------------------------------------------------------*/		
html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, 
form, fieldset, input, textarea, label, p, blockquote, th, td 						{ margin:0;padding:0; }

table 																				{ border-collapse:collapse;border-spacing:0; }
fieldset, img 																		{ border:0; }
address, caption, cite, code, dfn, em, strong, th, var 								{ font-style:normal;font-weight:normal; }
strong 																				{ font-weight:bold; }
ol, ul 																				{ list-style:none; }
caption, th 																		{ text-align:left; }
h1, h2, h3, h4, h5, h6 																{ font-size:100%;font-weight:normal; }
q:before, q:after 																	{ content:''; }
abbr, acronym 																		{ border:0; }



/*----- Clearfix ------------------------------------------------------------------*/		
.clearfix:after, .section:after, .fixed:after, .row:after							{ content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;	}
.clearfix, .section, .fixed, .row													{ display: inline-block; 	}
html[xmlns] .clearfix, html[xmlns] .section, html[xmlns] .fixed, html[xmlns] .row	{ display: block; 			}
* html .clearfix, * html .section, * html .fixed, * html .row						{ height: 1%; 				}
* 							 														{ outline: none; 			}
  

  
/*----- Typography ----------------------------------------------------------------*/		

	h1, h1 span																		{ font-size:24px;line-height:30px; }
	h2, h2 span																		{ font-size:18px;line-height:26px; }
	h3, h3 span																		{ font-size:16px;line-height:24px; }
	h4, h4 span																		{ font-size:14px;line-height:22px; }
	h5, h5 span																		{ font-size:12px;line-height:20px; }
	h6, h6 span																		{ font-size:10px;line-height:18px; }
	
	blockquote, blockquote p														{ font-size:24px;line-height:26px; } 

	h1 span, h2 span, h3 span, h4 span, h5 span, h6 span							{ color:#858585; }
	
	h1, h1 span, h2, h2 span, h3,h3 span, h4, h4 span, h5, h5 span, 
	h6, h6 span, blockquote, blockquote p, blockquote span  						{ font-family: 'Open Sans', arial, serif;text-align:center;color:#3b4347;font-weight:700; } 

	h1, h1 span, h2, h2 span, h3,h3 span, h4, h4 span, h5, h5 span, 
	h6, h6 span																		{ margin-bottom:20px; }
	
	
	body, p, span, div 																{ font-family: 'Open Sans', arial, serif;font-size:12px;line-height:18px;color:#6d6d6d; } 
	p 																				{ margin-bottom:15px;text-align:center; }
	
	a 																				{ color:#2b2b2b;text-decoration:none; }
	a:link 																			{  }
	a:visited 																		{  }
	a:hover 																		{ text-decoration:underline; }
	a:active 																		{ color:#000; } 
	
	
	
/*----- GENERAL ----------------------------------------------------------------*/		

	body 																			{ background:url("images/background.jpg") no-repeat center top; }
	
	.last 																			{ margin-right:0 !important; }
	
	.uppercase 																		{ text-transform:uppercase; }
	.justify 																		{ text-align:justify; }
	.italic 																		{ font-style:italic; }
	.fw-300 																		{ font-weight:300; }
	.fw-400 																		{ font-weight:400; }
	.fw-600 																		{ font-weight:600; }
	
	.m-bot-15 																		{ margin-bottom:15px; }
	.m-bot-20 																		{ margin-bottom:20px; }
	.m-bot-25 																		{ margin-bottom:25px; }
	.m-bot-30 																		{ margin-bottom:30px; }
	
	h1.space 																		{ margin-bottom:40px; }
	
/*----- NAVIGATION ----------------------------------------------------------------*/	
	
	#navigation 																	{ width:145px;transform: rotate(45deg);-ms-transform: rotate(45deg);-webkit-transform: rotate(45deg);-o-transform: rotate(45deg);-moz-transform: rotate(45deg);position:absolute;top:-50px;left:115px;z-index:15; }
	#navigation li 																	{ background:rgba(255,0,0,0);margin-bottom:2px; } 
	#navigation li a 																{ line-height:47px;font-size:24px;font-family:"Open Sans", Verdana, Arial;font-weight:300;color:#b6c1cc;display:block;text-align:right;transition:padding 0.5s;-moz-transition: padding 0.5s;-webkit-transition: padding 0.5s;-o-transition: padding 0.5s; }
	
	#navigation li a:link 															{  }
	#navigation li a:visited 														{  }
	#navigation li a:hover 															{ text-decoration:none;color:#fff;padding-right:0; }
	#navigation li a:active 														{  }
	
	#navigation li a.active 														{ color:#fff; }
	
	#navigation-extra 																{ width:55px;height:55px;background:url("images/back-extra-nav.png") no-repeat center center;z-index:999;position:absolute;top:309px;right:-34px; }	
	#navigation-extra > div 														{ height:18px;width:26px;margin:18px auto 0 auto; }
	#navigation-extra > div .prev 													{ display:block;background:url('images/back-nav-arrow.png') no-repeat left top;width:13px;float:right;height:18px; }
	#navigation-extra > div .next 													{ display:block;background:url('images/back-nav-arrow.png') no-repeat right top;width:13px;float:right;height:18px; }
	
	#navigation-extra > div .prev:link 												{  }
	#navigation-extra > div .prev:visited 											{  }
	#navigation-extra > div .prev:hover 											{ background:url('images/back-nav-arrow.png') no-repeat left bottom; }
	#navigation-extra > div .prev:active 											{  }
	
	#navigation-extra > div .next:link 												{  }
	#navigation-extra > div .next:visited 											{  }
	#navigation-extra > div .next:hover 											{ background:url('images/back-nav-arrow.png') no-repeat right bottom; }
	#navigation-extra > div .next:active 											{  }
	
/*----- CONTENT ----------------------------------------------------------------*/	
	
	#layout 																		{ width:775px;height:715px;background:rgba(255,0,0,0);margin:45px auto 0 auto;position:relative; }
	
	#pages 																			{ background:url("images/back-page.png") no-repeat center bottom;height:660px;width:660px;margin:0 auto 0 auto;position:absolute;top:6px;left:53px;z-index:5; }
	#pages > div 																	{ padding-top:135px;display:none; }
	#pages > div.active 															{ display:block; }
	
	.page-section 																	{ display:none; }
	.page-section.active 															{ display:block; }
	
/*----- PAGE - ME --------------------------------------------------------------*/		
	
	.user-img 																		{ display:block;top:0;position:absolute; }
	
	#page-me 																		{ potision:relative; }
	
	
/*----- PAGE - RESUME ----------------------------------------------------------*/	
	
	h2.skills 																		{ font-family: 'Signika', sans-serif;color:#3b4347;font-size:18px;font-weight:300;margin-bottom:20px; }
	
	.skills 																		{ width:281px;margin:30px auto 0 auto; }
	.skills li 																		{ width:295px;height:23px; }
	.skills div 																	{ float:left; }
	.skills h3 																		{ font-size:14px;color:#9ba8b1;margin-bottom:0;text-align:left;line-height:23px;font-weight:400; }
	.skill 																			{ width:89px; }
	 
	.rating 																		{ width:192px; }
	.rating span 																	{ background:#2d2d2d;width:11px;height:11px;float:left;margin-right:4px;display:block;float:left;margin-top:6px;border-radius:11px; }
	.rating span.grey 																{ background:#c4cbcf; }
	
	#navigation-resume 																{ width:55px;height:55px;background:url("images/back-extra-nav.png") no-repeat center center;z-index:999;position:absolute;top:309px;right:-34px; }
	
	#navigation-resume > div 														{ height:18px;width:26px;margin:18px auto 0 auto; }
	#navigation-resume > div .prev 													{ display:block;background:url('images/back-nav-arrow.png') no-repeat left top;width:13px;float:right;height:18px; }
	#navigation-resume > div .next 													{ display:block;background:url('images/back-nav-arrow.png') no-repeat right top;width:13px;float:right;height:18px; }
	
	#navigation-resume > div .prev:link 											{  }
	#navigation-resume > div .prev:visited 											{  }
	#navigation-resume > div .prev:hover 											{ background:url('images/back-nav-arrow.png') no-repeat left bottom; }
	#navigation-resume > div .prev:active 											{  }
	
	#navigation-resume > div .next:link 											{  }
	#navigation-resume > div .next:visited 											{  }
	#navigation-resume > div .next:hover 											{ background:url('images/back-nav-arrow.png') no-repeat right bottom; }
	#navigation-resume > div .next:active 											{  }
	
/*----- PAGE - CONTACT ---------------------------------------------------------*/	
	
	#contact-form 																	{ margin-top:15px; }
	#contact-form 																	{ width:280px;margin:auto;position:relative; }
	#contact-form input 															{ margin-bottom:13px;height:33px;display:block;background:#e5e5e5;border:none;width:270px;font-size:12px;line-height:33px;padding-left:10px; }
	#contact-form textarea								 							{ height:75px;display:block;background:#e5e5e5;border:none;width:270px;font-family:"Open Sans", Verdana, Arial;font-size:12px;padding:10px 0 0 10px; }
	
	.frm-state.error 																{ position:absolute;bottom:126px;color:red; }
	.frm-state 																		{ color:green;font-family:"Open Sans", Verdana, Arial;display:block;width:280px;text-align:center;font-style:italic;line-height:30px; }
	.frm-state-wrapper 																{ height:30px; }
	
	p.contact 																		{ margin-bottom:30px;font-style:italic; }
	

/*----- PAGE - WORK ------------------------------------------------------------*/
	
	.work-items 																	{ width:660px;height:660px;margin-top:-133px;overflow:hidden;position:relative; }
	.work-items > li 																{ width:660px;height:660px;position:absolute;top:0;left:0;z-index:10;display:none; }
	.work-items > li.active 														{ display:block; }

	
/*----- LOGO - SECTION ---------------------------------------------------------*/

	.logo 																			{ position:absolute;top:218px;left:-50px;z-index:999; }
	
	#logo 																			{ position:relative; }
	#logo div 																		{ position:Absolute;left:6px;top:295px;z-index:9999;text-align:center; }
	#logo h3 																		{ margin-bottom:0; }
	#logo h3 a																		{ text-transform:uppercase;margin-bottom:0;font-size:28px;line-height:28px;font-weight:300;color:#e0e4e6;transition: color 0.6s;-moz-transition: color 0.6s;-webkit-transition: color 0.6s;-o-transition: color 0.6s; }
	#logo h3 a:link 																{ }
	#logo h3 a:visited 																{ }
	#logo h3 a:hover 																{ text-decoration:none;color:#fff; }
	#logo h3 a:active 																{ }
	#logo h3 strong 																{ color:inherit;font-weight:bold;letter-spacing:-2.2px;display:block; }
	#logo span 																		{ text-transform:uppercase;margin-bottom:0;font-size:9px;line-height:11px;color:#e0e4e6;font-weight:300; }
	
/*----- BUTTONS ----------------------------------------------------------------*/																	
	
	.button 																		{ height:126px;width:126px;display:block;background:url('images/back-button.png') no-repeat left top;line-height:126px;text-align:center;text-decoration:none;color:#fff;font-weight:600;font-size:14px;margin:0 auto 0 auto; }
	
	.button:link 																	{  }
	.button:virsited 																{  }
	.button:hover 																	{ background:url('images/back-button.png') no-repeat right top;text-decoration:none; }
	.button:active 																	{ color:#fff; }
	
	.button-resume 																	{ height:33px;display:block;text-align:center;line-height:33px;text-decoration:none;background:#000;color:#fff;font-size:14px;font-weight:400;width:175px;margin:55px auto 0 auto; }
	.button-resume:link 															{  }
	.button-resume:visited 															{  }
	.button-resume:hover 															{ text-decoration:none;background:#161515; }
	.button-resume:active 															{  }
																			
/*----- SOCIAL - SECTION -------------------------------------------------------*/
																			
	#social 																		{ text-align:center;height:37px;width:220px;margin:0 auto 50px auto; } 
	#social li 																		{ display:inline-block;margin-right:7px;width:37px;height:37px; float:left; } 
	#social a 																		{ display:block;width:37px;height:37px; } 
	
	#social .dribbble 																{ background:url('images/back-social.png') no-repeat 0 0; }
	#social .facebook 																{ background:url('images/back-social.png') no-repeat -37px 0; }
	#social .twitter 																{ background:url('images/back-social.png') no-repeat -74px 0; } 
	#social .in 																	{ background:url('images/back-social.png') no-repeat -111px 0; }
	#social .vimeo 																	{ background:url('images/back-social.png') no-repeat -148px 0; } 
	
	#social .dribbble:link 															{  }
	#social .dribbble:visited 														{  }
	#social .dribbble:hover 														{ background-position: 0 -37px; }
	#social .dribbble:active 														{  }
	
	#social .facebook:link 															{  }
	#social .facebook:visited 														{  }
	#social .facebook:hover 														{ background-position: -37px -37px; }
	#social .facebook:active 														{  }
	
	#social .twitter:link 															{  }
	#social .twitter:visited 														{  }
	#social .twitter:hover 															{ background-position: -74px -37px; }
	#social .twitter:active 														{  }
	
	#social .in:link 																{  }
	#social .in:visited 															{  }
	#social .in:hover 																{ background-position: -111px -37px; }
	#social .in:active 																{  }
	
	#social .vimeo:link 															{  }
	#social .vimeo:visited 															{  }
	#social .vimeo:hover 															{ background-position: -148px -37px; }
	#social .vimeo:active 															{  }