.thumb_container {
	width:583;
	margin-top: -20px;
	margin-right: auto;
	margin-left: auto;
}

.thumb_container ul {
	margin-left: 0px;
	margin-top: 0px;
}

.thumb_container ul li, .stack, .full_overlay {
	float:left;
	margin-right: 5px;
	margin-top: 0px;
}

p {
	font-size:12px;
	line-height:18px;
}
.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 40px;
}

.thumb_container_subnavig {
	width: 190px;
	margin-top: 8px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
}

.thumb_container_subnavig ul {
	margin: 0px;
}

.thumb_container_subnavig ul li, .stack, .full_overlay {
	float:left;
	
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	padding: 0px;	
}

.thumb_container_subnavig ul li a {
	padding-left: 0px;
	padding-right: 10px;
}

.thumb_container_subnavig ul li.info_subnavig_Current img {
	padding-left: 0px;
	padding-right: 10px;
}

/*  _______________________________________

	1.a, 1.b INFORMATION BOX
    _______________________________________  */



.info {
	width: auto;
	float: left; 
	display: inline;
	padding: 0;
	position: relative;
}
	.info:hover {
		z-index: 99;
	}
.info img {
	position: relative;
	
	/* Set an opacity for the default state */
	filter: alpha(opacity=100);
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.info:hover img{
	z-index: 999;
	
	/* Enabling a 100% opacity on mouse hover */
	filter: alpha(opacity=60);
	opacity: 0.6;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";	
}

.info_subnavig {
	width: auto;
	float: left; 
	display: inline;
	padding: 0;
	position: relative;
}
.info_subnavig:hover {
		z-index: 99;
	}
.info_subnavig img {
	position: relative;
	
	/* Set an opacity for the default state */
	filter: alpha(opacity=50);
	opacity: 0.5;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
.info_subnavig:hover img{
	z-index: 999;
	
	/* Enabling a 100% opacity on mouse hover */
	filter: alpha(opacity=100);
	opacity: 1;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";	
}

.info_subnavig_Current {
	width: auto;
	float: left; 
	display: inline;
	padding: 0;
	position: relative;
}
.info_subnavig_Current:hover {
		z-index: 99;
	}
.info_subnavig_Current img {
	position: relative;
	
	/* Set an opacity for the default state */
	filter: alpha(opacity=100);
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.info_subnavig_Current:hover img{
	z-index: 999;
	
	/* Enabling a 100% opacity on mouse hover */
	filter: alpha(opacity=100);
	opacity: 1;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";	
}

.details {
	position: absolute;
	top: -10px;
	/* The top padding is set to 220px because the height of the demo images
	   is 200px, so we have an additional 10px on the top and at the bottom of the image */
	padding: 191px 0px 10px 0px;
	/* Set the following width according to the size of your images */
	width: 171px;
	/* Hiding the DIV */
	display: none;
	/* Rounded corners */
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.details_subnavig {
	position: absolute;
	top: 0px;
	/* The top padding is set to 220px because the height of the demo images
	   is 200px, so we have an additional 10px on the top and at the bottom of the image */
	padding: 0px 0px 0px 0px;
	/* Set the following width according to the size of your images */
	width: 13px;
	/* Hiding the DIV */
	display: none;
	/* Rounded corners */
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}


.info:hover .details {
	/* Showing on mouse hover */
	display: block;
}
/* Styling for the black variant */
.black {
	background: #000000;
}
	.black h2, .black p {
		color: #ffffff;
	}
/* Styling for the white variant */
.white {
	background: #ffffff;
}
	.white h2, .white p {
		color: #000000;
	}

/*  _______________________________________

	2. LOMO EFFECT
    _______________________________________  */



.lomo {
	position: relative; 
	display: inline-block;
}                    
.lomo img {
	display: block;
}  
.lomo:hover:after {
	/* The box shadow is set to black and mkes the nice inner glowing
	   effect on mouse hover */
	-moz-box-shadow: inset 0 0 80px #000000;  
	-webkit-box-shadow: inset 0 0 80px #000000;   
	box-shadow: inset 0 0 80px #000000;
	/* Positionning this black glow on mouse hover */
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;  
	z-index: 2;              
	content: "";
} 



/*  _______________________________________

	3.a, 3.b OVERLAYS
    _______________________________________  */



.overlay {
	position: relative; 
	display: inline-block;
}                    
	.overlay img {
		display: block;
	}  
.overlay .description {
	position: absolute;
	left: 0px; 
	width: 100%;
	
	/* Setting a zero opacity so we have a nice fading effect on mouse hover */
	filter: alpha(opacity=0);
	opacity: 0;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	/* Semi-transparent background for modern browsers, black for older browsers */
	background:#000000;
	background: rgba(0,0,0,0.8);
	/* CSS3 transition, makes the fading effect */ 
	-webkit-transition: opacity 0.4s ease-in-out;
	-moz-transition: opacity 0.4s ease-in-out;
	-o-transition: opacity 0.4s ease-in-out;
	transition: opacity 0.4s ease-in-out;
}
	.description p {
		/* Text styling */
		padding:10px;
		color:#ffffff;
	}
.overlay:hover .description {
	/* Setting a 100% opacity on mouse hover */
	filter: alpha(opacity=100);
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
/* Aligning to the bottom of the image */
.bottom {
	bottom: 0px;
}
/* Aligning to the top of the image */
.top {
	top: 0px;
}



/*  _______________________________________

	4. IMAGES STACKS
    _______________________________________  */



.stack {
	position:relative;
	/* Set the width and the height according to the size of your pictures */
	width:171px;
	height:171px;
}
	.stack img {
		position:absolute;
		left:0;
		/* CSS3 transitions, creates the fading effect */
		-webkit-transition: opacity 0.4s ease-in-out;
		-moz-transition: opacity 0.4s ease-in-out;
		-o-transition: opacity 0.4s ease-in-out;
		transition: opacity 0.4s ease-in-out;
	}
	.stack img.top:hover {
		/* Set a 0 opacity to the top image and reveal the other image */
		filter: alpha(opacity=0);
		opacity: 0;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	}



/*  _______________________________________

	5. FULL OVERLAY
    _______________________________________  */



.full_overlay {
	position:relative;
	/* Set the width and the height according to the size of your pictures */
	width:171px;
	height:171px;
}
.full_overlay p {
	color:#FFFFFF;
	padding:10px;
}
	.full_overlay .content {
		position: absolute;
		left: 0px;
		/* Set the width and the height according to the size of your pictures */
		width: 171px;
		height:171px;
		/* Set a 0 opacity to hide the content */
		filter: alpha(opacity=0);
		opacity: 0;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
		/* Semi-transparent background for modern browsers, black for older browsers */
		background:#000000;
		background: rgba(0,0,0,0.8);
		/* CSS3 transitions, creates the fading effect */
		-webkit-transition: opacity 0.4s ease-in-out;
		-moz-transition: opacity 0.4s ease-in-out;
		-o-transition: opacity 0.4s ease-in-out;
		transition: opacity 0.4s ease-in-out;
	}
	.content h2, .content p {
		/* Text styling */
		padding:10px;
		color:#ffffff;
	}
	.full_overlay:hover .content {
		/* Setting a 100% opacity on mouse hover to show the content */
		filter: alpha(opacity=100);
		opacity: 1;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	}