h1, h4 {
	font-family: 'Philosopher', sans-serif; 
	font-weight: 400;
	color:#333; }
h1 a, h4 a { font-weight: inherit; }
h1 { font-size: 36px; line-height: 50px; margin-bottom: 10px;}
h4 { font-size: 20px; line-height: 28px; margin-bottom: 4px; }

/* Sets up basic grid floating and margin. */
div.span-6, div.span-24 {float:left; margin-right: 20px; margin-top:30px;}
.columns .span-6, .columns .span-24 { height:30px; background:#ededed; text-align:center; margin-top:10px !important; padding-top:10px;}
p.span-6, p.span-24 {float:left; margin-right: 20px; margin-top:30px;}
/* The last column in a row needs this class. */
div.last { margin-right: 0; }

/* Use these classes to set the width of a column. */
.span-6  { width: 220px; }
.span-24 { width: 940px;}

.last { margin-right:0px !important;}
.left {float:left}
.right {float:right}

/*-------------------------------------------------------*/
.hover_img { 
	position:relative;
}
.hover_img_content { 
	position:absolute;
	opacity:0;
	display:block;
	bottom:30px;
	right:10px;
	padding-left:10px;
	color:#fff;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out; 
}

.hover_img_content h4 { 
	color:#000;
	padding:0px 10px;
	background-color:#fff;
	font-size:16px;
	line-height:20px;
	padding-top:5px;
	padding-bottom:5px;
}

.hover_img_content_link3 {
	width:50px; 
	height:15px; 
	background-color:#FFF;
	background-image:url(../../images/zoom.png);
	background-repeat:no-repeat;
	background-position:5px 5px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out; 
}
.hover_img_content_link3:hover { 
	background-color:#000;
	color:#FFF;
	background-image:url('../../images/zoom_hover.png');
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out; 
}

.hover_img:hover img {
	opacity:0.3;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out; 
}
.hover_img:hover > .hover_img_content { 
	opacity:1;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;  
}

.hover_img img {
	opacity: 1.0;
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3s linear;
	-ms-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	transition: all 0.3s linear;
}



/* Navigation  */
ul {
	list-style-type: none;
}

ul.navigation-sidebar li {
	width:235px;
	font-size:12px !important; 
	border-bottom: 1px  dashed #dfdfdf;
	font-size:10px;
	line-height: 12px;
	line-height:30px;
	padding-left:20px;
	background:url("../../images/navigation_dark.png") no-repeat 0px 10px;
}
ul.navigation-sidebar li:hover, ul.navigation-sidebar li.current { background:url("../images/navigation_dark_hover.png") no-repeat 0px 10px;  color:#004a99}
ul.navigation-sidebar a { 
	color: #777777;
	text-decoration: none;

}
ul.navigation-sidebar li.current a, ul.navigation-sidebar a:hover { text-decoration: none; color:#004a99;  }
ul.navigation-sidebar li.current a { color: #004a99;}

ul.navigation-sidebar a:hover {
	color:#004a99;
}


/* Filter */
/*****Navigation Basic Layout*****/

.un_grid { width:960px !important;}
.un_grid16 { width:640px !important; margin-right:0px !important;}
/* Portfolio Items */
#portfolio li { float: left; margin-right:20px;  }
#portfolio div { margin-right:0px;}