.accordian {
	width:700px; height: 320px;
	overflow: hidden;
  	
  	
	
	/*Time for some styling*/
	margin:0px auto;
	box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
	-webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
	-moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
}

/*A small hack to prevent flickering on some browsers*/
.accordian ul {
	width: 2000px;
	/*This will give ample space to the last item to move
	instead of falling down/flickering during hovers.*/
}

.accordian li {
	position: relative;
	right: 25px; 
	display: block;
	float: left;
	width: 100px;
	
	
	box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
	
	/*Transitions to give animation effect*/
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	/*If you hover on the images now you should be able to 
	see the basic accordian*/
}

/*Reduce with of un-hovered elements*/
.accordian ul:hover li {width: 60px;}
/*Lets apply hover effects now*/
/*The LI hover style should override the UL hover style*/
.accordian ul li:hover {width: 330px;}


.accordian li img {
	display: block;
	
	
}

.accordian img {
    height: 320px;
    width: 330px;
    float: left;
	vertical-align: baseline;
	max-width: 330px;
}

/*Image title styles*/
.image_title {
	
	position: absolute;
	left: 1; bottom: 1;	
	width: 330px;
		

}
.image_title a {
	display: block;
	float:center;
	color: #0066FF;
	text-decoration: none;
	padding: 20px;
	margin: 0px 1px 0px 100px;
	font-size: 20px;
  font-family: Arial;
    font-weight: 600;
}

.image_desc  a{
float: center;
padding:4px;
margin: 0px 1px 0px 120px;
color: #fff;
text-decoration: none;
font-size: 16px;
  line-height: 10px;


}