/*Time to apply widths for accordian to work
Width of image = 640px
total images = 5
so width of hovered image = 640px
width of un-hovered image = 40px - you can set this to anything
so total container width = 640 + 40*4 = 800px;
default width = 800/5 = 160px;
*/

.accordian {
    width: 955px; 
	height: 375px;
    overflow: hidden;
	border-radius: 3px;
    
    /*Time for some styling*/
    margin: 2px 18px;
    //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;
    display: block;
    width: 112px;
    float: left;
    
    border-left: 1px solid #888;
    
    //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: 55px;}
.accordian ul:hover li .image_title {left: -77px;}
/*Lets apply hover effects now*/
/*The LI hover style should override the UL hover style*/
.accordian ul li:hover {width: 500px;}
.accordian ul li:hover .image_title {left: -50px;}

.accordian li img {
    display: block;
}

/*Image title styles*/
.image_title {
    //background: rgba(0, 0, 0, 0.5);
    position: absolute;
    left: -50px; 
	top: 120px;
	bottom: 0; 
	width: 275px;
	height: 100px;
	//margin-bottom: 140px;
	-webkit-transform: rotate(270deg); 
	transform: rotate(270deg);	
	text-transform: uppercase;
	font-size: 20px;
	color: white;
	//padding: 30px 2px 0 10px;
	text-align: center;
}
.image_title a {
    display: block;
    color: #fff;
	font-weight: bold;
    text-decoration: none;
	text-align: center;
    padding: 10px;
    font-size: 16px;
	-webkit-transform: rotate(360deg); 
	transform: rotate(360deg);
	text-transform: uppercase;
}

.accordian ul li.accordian-active {
    width: 500px;

}