/*
	Name: FOLIO SERIES - FOLIO NUMBER ONE
	Date: NOV 2010
	Description: Template for creatives, studios even product and little bussines sites
	Version: 1.3
	Author: Van Kar Wai on Envato Marketplaces
	Autor URL: http://themeforest.net/user/VanKarWai
	Notes: All the stylesheet is documented itself with a complete declaration for each object
*/

/*
***Reset for control "Cross Browsing"***
Adapted from YUI Yahoo!
*/
*, 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, font, img,
ins, kbd, q, s, samp, small, strike,
strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
center, u, b, i {margin: 0;padding: 0;border: 0;outline: 0;font-weight: normal;font-style: normal;font-size: 100%;font-family: inherit;vertical-align: baseline;}
body {line-height: 1}
:focus {outline: 0;color: #0CA8E5;text-decoration:none;}
ol, ul {list-style: none}
table {border-collapse: collapse;border-spacing: 0}
blockquote:before, blockquote:after, q:before, q:after {content: ""}
blockquote, q {quotes: "" ""}
input, textarea {margin: 0;padding: 0}
hr {margin: 0;padding: 0;border: 0;color: #000;background-color: #000;height: 1px}
strong{font-family:inherit;font-size:inherit;color:inherit;}

/* CSS DOCUMENTATION:

* GENERAL
** HEADER
*** PORTFOLIO
**** FOOTER
***** SPECIAL
****** TYPOGRAPHY
******* COLOR SCHEME

*/


/*************************************************************
* GENERAL
**************************************************************/
/*reduce the default browser font size from 16px to 10px because
we are working in em and we need a rounded measure*/
body{font-size: 62.5%;background-color:#e5e5e5;}
/* HTML5 tags */
header, section, footer,
aside, nav, article, figure {
	display: block;
}
.float-left{float:left;}
.float-right{float:right;}
.hidden{visibility:hidden;}
/* advanced clearfix for fix floating elements */
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

.clear{clear:both;}/*basic way for clearing floats*/

#wrapper-content{
	height:auto;
	width:1020px;
	margin:0 auto;
	text-align:left;
	padding:0px;
	}
/*Using font-generator from fontsquirrel you can use any font you want. Just change this font.face declaration. And use new in body element*/
@font-face {
	font-family: 'Museo300';
	src: url('font-face-museo/museo300-regular-webfont.eot');
	src: local('☺'), url('font-face-museo/museo300-regular-webfont.woff') format('woff'), url('font-face-museo/museo300-regular-webfont.ttf') format('truetype'), url('font-face-museo/museo300-regular-webfont.svg#webfonteVq9mYG3') format('svg');
	font-weight: normal;
	font-style: normal;
}
/*When you have your new generated font just need to change it here*/
body {font-family: 'Museo300', Helvetica, Arial, sans-serif;font-size: .6em;#font-size: .7em;font-style: normal;}

/*************************************************************
* HEADER
**************************************************************/
header{position:relative;min-height:300px;padding:0px;}
h1 a{display:block;font-size:4em;#font-size:3em;line-height:1em; letter-spacing:-1.5px;width:400px;text-decoration:none;float:left;}/*title in the head*/
h1 strong{display:block;}
div#head-content{width:820px;margin:0 auto 0 auto;padding-top:60px;}
header p{font-size:1.7em;#font-size:1.5em;line-height:1.3em;margin-top:35px;#margin-top:-40px;padding-bottom:25px;}/*text in head*/
header p small a{font-size:.7em;letter-spacing:0px;color:#e5e5e5;padding:0 25px 0 15px;background:url(../images/icons/vcard-small.png) top right no-repeat;text-decoration:none;font-style:italic;}
header p small a:hover{color:#FFF;}
header ul{display:block;width:78px;height:25px;float:right;margin:50px 10px 0 0;}
header ul li{display:block;float:left;margin-right:1px;}
header ul li a{display:block;width:25px;height:25px;text-indent:-9999px;background:url(../images/ico-social-small.png) top left no-repeat;}
header ul li.ico-twitter a{background:url(../images/ico-social-small.png) -25px 0px no-repeat;}
header ul li.ico-mail a{background:url(../images/ico-social-small.png) -50px 0px no-repeat;}
header ul li.ico-facebook a:hover{background:url(../images/ico-social-small.png) 0px -26px no-repeat;}
header ul li.ico-twitter a:hover{background:url(../images/ico-social-small.png) -25px -26px no-repeat;}
header ul li.ico-mail a:hover{background:url(../images/ico-social-small.png) -50px -26px no-repeat;}



/*************************************************************
** PORTFOLIO
**************************************************************/
section#portfolio{position:relative;min-height:425px;padding:110px 0 0 110px;}
#portfolio figure.featured{position:absolute;top:20px;left:20px;z-index:0;}
#portfolio figure.back-items{position:absolute;top:110px;left:110px;z-index:0;}
#portfolio nav{position:absolute;top:40px;left:120px;}
#portfolio nav ul{position:relative;width:750px;#width:810px;height:30px;}
#portfolio nav ul#nav-works li{width:auto;height:auto;margin:4px 15px 0 0;font-size:1.7em;#font-size:1.5em;visibility:hidden;}
#portfolio nav ul#nav-works li#nav-first-child{height:auto;text-indent:10px;padding:20px 30px 20px 40px;margin:-13px -30px 0 30px;background:url(../images/icons/filter-tag.png) 10px 15px no-repeat;visibility:visible;cursor:default;}
#portfolio nav ul#nav-works li.fade-option{}
#portfolio nav ul#nav-works li.fade-option a{
	display:block;
	text-decoration:none;
	color:#1d1d1d;
	padding:5px;
	-webkit-transition: all .15s ease;
	-moz-transition: all .15s ease-in-out;
	-o-transition: all .15s ease-in-out;
	-webkit-transition: all .15s ease-in-out;
	transition: all .15s ease;
	}
#portfolio nav ul#nav-works li a.current, #portfolio nav ul#nav-works li a:hover{background:#1d1d1d;color:#e5e5e5;border-radius:5px;}
#portfolio ul{position:relative;width:825px;float:left;}
div.mask{position:relative;float:left;width:825px;height: 325px;overflow:hidden;}
#portfolio ul li{
	position:relative;
	display:block;
	float:left;
	margin:0 1px 1px 0;
	width:160px;
	height:160px;
	}
#portfolio ul li figure{position:absolute;}
#portfolio ul li a{display:block;}
/*#portfolio ul li a.preload {background:url('if-you-want-a-loader-icons-here-the-path.gif') center center no-repeat;}*/
#portfolio ul li div.work-caption{
	position:relative;
	background:url(../images/backgrounds/info-box-bg.jpg) #1d1d1d;
	width:140px;
	height:140px;
	#width:180px;
	#height:120px;
	#top:0px;
	#margin-left:0px;
	color:#FFF;
	padding:10px;
	visibility:hidden;
	z-index:1000;
	overflow:hidden;
}
#portfolio ul li div.work-caption h3{}
#portfolio ul li div.work-caption span,div.work-caption a {display:block;line-height:1.3em;#text-indent:-9999px;}

/*IF YOU NEED/WANT TO USE A MAGNIFY ICON FOR YOUR HOVER ACTION JUST USE THE FOLLOWING COMMENTED LINES
#portfolio ul li div.work-caption h3 a{display:block;width:width-size-of-your-icon-in-px;height:height-size-of-your-icon-in-px;background: url(your-image-icon-path) no-repeat;}
#portfolio ul li div.work-caption span,div.work-caption h3 a{text-indent:-9999px;}*/

div.work-caption a{#text-indent:0px;}/*styles only for IE7 alternative view as result of z-index bug*/
#portfolio ul li div.work-caption h3 a.caption-title{text-transform:uppercase;text-align:center;font-size:1em;#font-size:2.5em;#line-height:40px;width:130px;text-decoration:none;padding:10px 0 10px 0;margin:5px;}
#portfolio ul li div.cap-special h3 a.caption-title{font-size:1.5em;text-align:left;padding:5px 0 3px 0;margin:0 0 10px 0;}
#portfolio ul li div.cap-special h3 small.client{/*text-transform:uppercase;*/}
#portfolio ul li div.cap-special h3 small.brief{font-size:1.1em;line-height:1.3em;}
/*#portfolio ul li div.work-caption h3 a.caption-title{#border:none;#margin-top:55px;}styles only for IE7 alternative view as result of z-index bug*/
#portfolio ul li div.work-caption h3.plus a.caption-title{border:none;font-size:4em;}/*style if you want a plus icon for magnify works*/
div#pagination{position:relative;margin:30px 0 0 365px;float:left;}
div#pagination span{font-size:2em;}
div#pagination span.arrow a{
	display:inline-block;
	text-decoration:none;
	color:#1d1d1d;
	padding:15px;
	margin:3px;
	text-decoration:none;
	background:#1d1d1d;
	color:#fdfdfd;
	border-radius:50%;
	-webkit-transition: all .15s ease;
	-moz-transition: all .15s ease-in-out;
	-o-transition: all .15s ease-in-out;
	-webkit-transition: all .15s ease-in-out;
	transition: all .15s ease;
	}
div#pagination span#arrow-right a{background:url(../images/icons/btns/down-arrows.png) 3px -55px  no-repeat #1d1d1d;}
div#pagination span#arrow-right a:hover{background:url(../images/icons/btns/down-arrows.png) 3px 12px no-repeat #000;}
div#pagination span#arrow-left a{background:url(../images/icons/btns/up-arrows.png) 3px 11px  no-repeat #1d1d1d;}
div#pagination span#arrow-left a:hover{background:url(../images/icons/btns/up-arrows.png) 3px -55px no-repeat #000;}

/*************************************************************
*** FOOTER
**************************************************************/
footer{position:relative;min-height:170px;background-color:#1d1d1d;}
footer h4{width:75px;font-size:2em;letter-spacing:-1px;padding:30px 0 20px 110px;color:#3a3a3a;}
footer ul{display:block;font-size:1.4em;#font-size:1.2em;line-height:1.5em;color:#3a3a3a;letter-spacing:0px;}
footer section#footer-contact-section{width:310px;float:left;}
footer ul#contact-info{margin:0 0 0 110px;}
footer ul#contact-info li{line-height:19px;padding-left:40px;
	}
footer ul#contact-info li#chat{background:url(../images/icons/btns/contact-icons.png) -1px 0px no-repeat;}
footer ul#contact-info li#mail{background:url(../images/icons/btns/contact-icons.png) -1px -17px no-repeat;}
footer ul#contact-info li#phone{background:url(../images/icons/btns/contact-icons.png) -1px -38px no-repeat;}
footer ul#contact-info li a{text-decoration:none;color:#3a3a3a;}
footer section#footer-location-section{width:200px;float:left;margin-left:70px;}
footer section#footer-location-section h4{width:100px;#width:120px;margin-left:-90px;}
footer section#footer-location-section ul{margin-left:20px;}
footer section#footer-map-section{width:200px;float:left;}
footer section#footer-map-section h4{width:200px;margin-left:-70px;}
footer section#footer-map-section ul{margin-left:40px;}
footer section#footer-map-section ul li small{display:block;#display:none;position:absolute;margin:-46px 0 0 130px;width:30px;height:30px;background:url(../images/icons/map-icon.png) no-repeat center center #474747;}

/*********************************************
****** SPECIAL
*********************************************/

@media only screen and (-webkit-min-device-pixel-ratio: 0) and (min-device-width: 1025px) {
	body {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 2px;
		top: 0;
		overflow-y: auto;
		overflow-x: hidden;
	}
	
	::-webkit-scrollbar {
		width: 5px;
		height: 6px;
	}
	
	::-webkit-scrollbar-button:start:decrement,
	::-webkit-scrollbar-button:end:increment {
		display: block;
		height: 10px;
	}
	
	::-webkit-scrollbar-button:vertical:increment {
		background-color: #fff;
	}
	
	::-webkit-scrollbar-track-piece {
		background-color: #eee;
		-webkit-border-radius: 3px;
	}
	
	::-webkit-scrollbar-thumb:vertical {
		height: 50px;
		background-color: #1d1d1d;
		-webkit-border-radius: 3px;
	}
	
	::-webkit-scrollbar-thumb:horizontal {
		width: 50px;
		background-color: #ccc;
		-webkit-border-radius: 3px;
	}
}

/************THEME SWITCHER*******************/
#theme-wrapper {position:fixed;bottom: 0;z-index:10000;width:100%;}
div.drawer-toggler{
	background:#000;
	color:#e5e5e5;
	font-size:1em;
	font-weight:700;
	text-align:center;
	cursor:pointer;
	padding:10px 0;
	width:140px;
	position:absolute;
	top:-30px;
	right:10px;
	} 
div#theme-drawer{
	position:relative;
	background:#e5e5e5;
	border-top:5px solid #000;
	clear:both;
	overflow:hidden;
	margin-top:-5px;
	z-index:1001;
	}
#theme-carousel{width:500px;margin:20px auto 0 auto;padding-left:500px;overflow:hidden;}
#theme-carousel figure#label-backs{position:absolute;margin:10px 0 0 -120px;#margin:10px 0 0 -550px;}
#theme-carousel figure#label-colors{position:absolute;margin:10px 0 0 -520px;#margin:10px 0 0 -900px;}
#theme-carousel ul#theme-colors {position:absolute;width:160px;height:60px;padding:0;margin:25px 0 0 -420px;#margin:25px 0 0 -800px;}
#theme-drawer ul#theme-colors li{
	display:block;
	width:30px;
	height:30px;
	margin:2px;
	background-color:#0FC;
	text-indent:-9999px;
	}
#theme-drawer ul#theme-colors li#option1{background-color:#16c6cc;}
#theme-drawer ul#theme-colors li#option2{background-color:#ECE59E;}
#theme-drawer ul#theme-colors li#option3{background-color:#409561;}
#theme-drawer ul#theme-colors li#option4{background-color:#AD3263;}
#theme-drawer ul#theme-colors li#option5{background-color:#AFC431;}
#theme-drawer ul#theme-colors li#option6{background-color:#46372E;}
#theme-drawer ul#theme-colors li#option7{background-color:#412279;}
#theme-drawer ul#theme-colors li#option8{background-color:#B82F43;}
#theme-drawer ul#theme-colors li a{display:block;width:100%;height:100%;}
#themes-frame {position:relative;overflow:hidden;float:left;width:365px;margin-left:15px;}
#btn-previous,
#btn-next {width:53px;height:83px;text-indent:-9999px;cursor:pointer;float:left;margin:20px 0;}
#btn-next {float:right;}
#btn-previous {background:url(../images/switcher/arrows.gif) no-repeat left top;}
#btn-previous:hover {background:url(../images/switcher/arrows.gif) no-repeat left bottom;}
#btn-next {background:url(../images/switcher/arrows.gif) no-repeat right top;}
#btn-next:hover {background:url(../images/switcher/arrows.gif) no-repeat right bottom;}
#theme-drawer ul {display:block;position:relative;padding:0;margin:10px 0;height:90px;}
#theme-drawer li {list-style:none;background:#474747;display:inline;float:left;margin-left:22px;width:150px;height:90px;}


/*****************CV WITH HRESUME//MICROFORMATS*******************/
/******700px grid for a easy layout*******/
.fixed{display:block;}
.all-fixed{display:none;}/*needed class for resume*/
.col-1,.col-2,.col-3,.col-4,.col-5 {float:left;}
.col-1{width:100px;}
.col-2{width:200px;}
.col-3{width:300px;}
.col-4{width:400px;}
.col-5{width:700px;}

section#cv{
	position:absolute;
	width:100%;
	min-height:700px;
	padding-bottom:15px;
	background:#000;
	color:#e5e5e5;
	z-index:2000;
	#left:0px;
	display:none;	
	}
section#cv div#wrapper-hresume{width:1020px;margin:0 auto 0 auto;padding-left:110px;}
#cv{font-size:1.5em;line-height:1.4em;#font-size:1.4em;#line-height:1.4em;color:#e5e5e5;}
#cv abbr{border:0;padding:0;}

/*personal info*/
#cv a{
	text-decoration:none;
	color:#474747;
	-moz-transition:color 0.1s ease-in-out;
    -webkit-transition:color 0.1s ease-in-out;
    -o-transition:color 0.1s ease-in-out;
	transition:color 0.1s ease-in-out;
	}
#cv a:visited{}
#cv a:hover{text-decoration:none;color:#e5e5e5;}
#cv h2{font-size:2.6em;margin:0 0 1em 0;text-transform:uppercase;margin-top:2em;letter-spacing:-1.7px;}
#cv h3.personal-tag{font-size:1em;}
#cv .contact, #cv .vcalendar, #cv .skills{padding:1em 0;overflow:hidden;}
#cv .tel, #cv span.street-address, #cv span.locality, #cv span.region, #cv span.postal-code, #cv span.country-name, #cv span.url{display:block;color:#9D9D9D;}
#cv .contact .type{display:none;}
#cv section.contact ul{list-style-type:none;padding:0;margin:0;}
#cv section.contact section section{padding:0 0 1em 0;overflow:hidden;}
#cv .contact{float:left;margin-right:100px;}

/*skills*/
#cv section.skills ul{list-style-type:none;padding:0;margin:0;color:#474747;}
#cv section.skills section{padding:.3em 0 1.5em 0;overflow:hidden;}
.tabbed{text-indent:0px;}

/*experience*/
#cv article.vcalendar{float:left;margin-right:100px;}
#cv .experience{margin:0 0 2.5em 0;overflow:hidden;}
#cv .experience .period{#font-size:.9em;color:#474747;font-style:italic;}
#cv .experience hgroup{margin:0 0 1.1em 0;}
#cv .experience hgroup h3, #cv .education hgroup h3{font-size:1.3em;line-height:1.3em;}
#cv .experience hgroup h4, #cv .education hgroup h4{font-size:0.9em;}
#cv .experience .description{padding:0 1.1em 0 0;margin-top:10px;color:#474747;}
#cv .experience .notes{color:#9D9D9D;font-style:italic;}

/*education*/
#cv .education{margin:0 0 1.1em 0;overflow:hidden;}
#cv .education .description{color:#474747;margin-top:10px;}
#cv .education .period{#font-size:.9em;color:#474747;font-style:italic;}

#cv .close-btn{position:absolute;}
#cv .close-btn a{display:block;font-size:1.2em;padding:5px;}
#cv .close-btn a:hover{color:#e5e5e5;}
#cv .c-btn-top{/*width:200px;margin:0 auto 0 auto;*/top:35px;right:17%;}
#cv .c-btn-bottom{bottom:50px;right:20%;}

/************COLOR SCHEME**************/

/*colors are agrouped for a better organization with theme schemes changes*/
h1 a{color:#16c6cc;}/*color for main title*/
h1 strong{color:#049c5f;}/*color for the name in main title*/
/*a.caption-title{color:#e9e998;border-top:1px dotted #e9e998;border-bottom:1px dotted #e9e998;}*/
header{background:#1d1d1d;}
header p{color:#e5e5e5;}
section#portfolio{background:#049c5f;}
div#pagination span.arrow a:hover{color:#049c5f;}