#filter-tools {z-index:3}
#filter-tools > div { }
#filter, #sort {
	display: inline-block;	position: relative;
	z-index:122
}

#filter:before, #filter:after {}
#filter:before {}
#filter:after {}
#filter span, #filter a,
#sort span, #sort a{
    font-family: Helvetica, Arial, sans-serif;
    font-size:14px;
	color: #333;
	/*display: inline-block;*/
	height: 30px;
	line-height: 30px;
	text-decoration: none;
}
#filter span, #sort span {color:#999; padding: 0 15px 0 0; border-radius:20px; -webkit-border-radius: 20px;}
#filter:hover span, #sort:hover span { border-radius: 16px 16px 0 0; -webkit-border-radius: 16px 16px 0 0;}
#filter ul ul li:last-child a, #sort ul ul li:last-child a { border-radius: 0 0 16px 16px; -webkit-border-radius: 0 0 16px 16px;}

#filter span, #sort span {color:#999; padding: 0 15px 0 0;}
#filter a:hover, #sort a:hover{color: #fff !important; background: #222}
#filter a.active, #sort a.active { color: #fff !important; background: #666}

#container {
	margin:0 -10px;
}

#container div.portfolio-item {
	/*float: left;
	
	margin-top: 1.5em;*/
	display:inline-block
}

div.portfolio-item {width: 24.98%}


#stage {position: relative}
#stage.gallery { margin-bottom: 3em}
#stage > div{ }
div.portfolio-inner {margin: 0 10px}
#stage > div a,
#stage > div a img {}
#stage img{width: 100%}

#stage > div .description{}
#stage > div:hover .description{ }


#stage > div .description h4 {
	font-weight:normal
}

#stage > div .description p {}

#stage > div .description .itemDetails {
    display:block; 
    padding: 0; 
    font-style:normal; 
}

#stage > div a:hover, #stage > div a:focus {text-decoration: none;}

#filter-tools {position:absolute; top: 15px; right:0;}


#filter span, #sort span {
	float:left; height: 16px; width: 107px; padding: 8px 8px 8px 40px; letter-spacing: -0.02em; 
	line-height: 17px; color: #333; font-weight:bold; font-size: 16px; text-transform:uppercase;
}

#filter span {background: url(../img/filter-desk.png) no-repeat 8px -16px #eee; }
#sort span {background: url(../img/sort-desk.png) no-repeat 8px -16px #eee; width: 90px}

#filter-tools:hover ul li > span {color:#333 !important; background-color: #eee;  }

#filter ul li:hover > span, #sort ul li:hover > span {color:#fff !important; cursor: pointer}

#filter-tools:hover ul li > span { background-position: 15px -16px }
#filter ul li:hover > span, #sort ul li:hover > span { background-position: 15px -16px}


#filter span, #sort span {color:#333; background-color: #eee; background-position: 15px -16px}
#filter ul li:hover > span, #sort ul li:hover > span,
#filter a.active, #sort a.active { /*background-color: #3396c4;*/ background-position: 15px 8px}

#filter ul li:hover > span, #sort ul li:hover > span,
#filter a.active, #sort a.active {background-position: 15px 8px}

#filter-tools .nava li {margin: 0;}
#filter-tools .nava li ul li{margin: 1px 0 0 0}

#filter-tools .nava li ul {width: 100%}

#filter-tools .nava li:hover ul {
    left: auto;
    right: 0;
    top: 32px;
}

@media only screen and (min-width:480px) and (max-width:720px) {	
	div.portfolio-item {width: 49.98%}

	#filter-tools .nava li {margin: 0; width: auto}
	#filter-tools .nava li ul {width: auto}
	#filter span, #sort span {
		float:left; height: 24px; width: 24px; padding: 8px; text-indent: -999em;
	}

	#filter-tools .nava li:hover ul {
		top: 40px;
	}

	#filter span {background: url(../img/filter.png) no-repeat 8px -22px #eee;}
	#sort span {background: url(../img/sort.png) no-repeat 8px -22px #eee; }

	#filter-tools:hover ul li > span { background-position: 8px -22px }
	#filter ul li:hover > span, #sort ul li:hover > span { background-position: 8px 8px}
	

	#filter ul li:hover > span, #sort ul li:hover > span, 
	#filter a.active, #sort a.active {background-position: 8px 8px}
	#filter:hover span, #sort:hover span {
		border-radius: 20px 20px 0 0;
	}
	#filter ul ul li:first-child a, #sort ul ul li:first-child a { border-radius: 20px 0 0 0; -webkit-border-radius: 20px 0 0 0;}
}

@media only screen and (max-width:480px) {
	div.portfolio-item {width: 100%}

	#filter-tools { }

	#filter-tools .nava li {margin: 0; width: auto}
	#filter-tools .nava li ul {width: auto}

	#filter span, #sort span {
		float:left; height: 24px; width: 24px; padding: 8px; text-indent: -999em;
	}

	#filter-tools .nava li:hover ul {
		top: 40px;
	}

	#filter span {background: url(../img/filter.png) no-repeat 8px -22px #eee;}
	#sort span {background: url(../img/sort.png) no-repeat 8px -22px #eee; }

	#filter-tools:hover ul li > span { background-position: 8px -22px }
	#filter ul li:hover > span, #sort ul li:hover > span { background-position: 8px 8px}
	

	#filter ul li:hover > span, #sort ul li:hover > span, 
	#filter a.active, #sort a.active {background-position: 8px 8px}
	#filter:hover span, #sort:hover span {
		border-radius: 20px 20px 0 0;
	}
	#filter ul ul li:first-child a, #sort ul ul li:first-child a { border-radius: 20px 0 0 0; -webkit-border-radius: 20px 0 0 0;}
}