/*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;
}



/*************************************************************
** PORTFOLIO
**************************************************************/
section#portfolio{
	position:relative;
	min-height:770px;
	padding:60px 0 0 0px;
}
#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:0px;
	left:0px;
}
#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:15px;

#font-size:1.5em;		visibility:hidden;
	color: #000000;
}
#portfolio nav ul#nav-works li#nav-first-child{
	height:auto;
	text-indent:10px;
	padding:20px 30px 20px 0px;
	margin:-13px -30px 0 0px;
	visibility:visible;
	cursor:default;
	color: #000000;
	font-weight: bold;
}
#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{
	color:#8d683b;
	border-radius:5px;
}
#portfolio ul{
	position:relative;
	width:990px;
	float: left;
}
div.mask{
	position:relative;
	float:left;
	width:980px;
	height: 656px;
	overflow:hidden;
}
#portfolio ul li{
	position:relative;
	display:block;
	float:left;
	margin:0 1px 1px 0;
	width:163px;
	height:163px;
	list-style-image: none;
	list-style-type: none;
	}
#portfolio ul li figure{position:absolute;}
#portfolio ul li a{
	display:block;
	list-style-image: none;
	list-style-type: none;
}
/*#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:143px;
	height:143px;




	#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 455px;
	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;}

/*********************************************
****** 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:#FFFFFF;
	text-indent:-9999px;
	}
#theme-drawer ul#theme-colors li#option1{
	background-color:#FFFFFF;
}
#theme-drawer ul#theme-colors li#option2{
	background-color:#FFFFFF;
}
#theme-drawer ul#theme-colors li#option3{
	background-color:#FFFFFF;
}
#theme-drawer ul#theme-colors li#option4{
	background-color:#FFFFFF;
}
#theme-drawer ul#theme-colors li#option5{
	background-color:#FFFFFF;
}
#theme-drawer ul#theme-colors li#option6{
	background-color:#FFFFFF;
}
#theme-drawer ul#theme-colors li#option7{
	background-color:#FFFFFF;
}
#theme-drawer ul#theme-colors li#option8{
	background-color:#FFFFFF;
}
#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*/
.tabbed{text-indent:0px;}

/************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{
}
div#pagination span.arrow a:hover{
}