.ia-container {
	
width: 685px;
	
margin: 20px auto;
	
overflow: hidden;
	
box-shadow: 1px 1px 4px rgba(0,0,0,0.08);
	
border: 7px solid rgba(255,255,255,0.6);
}



.ia-container figure {
    
position: absolute;
	
top: 0;
	
left: 50px; /* width of visible piece */
	
width: 335px;
    
box-shadow: 0 0 0 1px rgba(255,255,255,0.6);
	

-webkit-transition: all 0.3s ease-in-out;
    
-moz-transition: all 0.3s ease-in-out;
    
-o-transition: all 0.3s ease-in-out;
    
-ms-transition: all 0.3s ease-in-out;
    
transition: all 0.3s ease-in-out;
}



.ia-container > figure {
    
position: relative;
	
left: 0 !important;
}



.ia-container img {
	
display: block;
	
width: 100%;
}



.ia-container input {
	
position: absolute;
	
top: 0;
	
left: 0;
	
width: 50px; /* just cover visible part */
	
height: 100%;
	
cursor: pointer;
	
border: 0;
	padding: 0;
   
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   
 filter: alpha(opacity=0);
    
opacity: 0;
	z-index: 100;
	
-webkit-appearance: none;
	
-moz-appearance: none;
	
appearance: none;
}


.ia-container input:checked{
	
width: 5px;
	left: auto;
	
right: 0px;
}


.ia-container input:checked ~ figure {
	
-webkit-transition: all 0.7s ease-in-out;
    
-moz-transition: all 0.7s ease-in-out;
    
-o-transition: all 0.7s ease-in-out;
    
-ms-transition: all 0.7s ease-in-out;
    
transition: all 0.7s ease-in-out;
	
left: 335px;
}



.ia-container figcaption {
	
width: 100%;
	
height: 100%;
	
background: rgba(192,192,192, 0.1);
	
position: absolute;
	
top: 0px;
	
-webkit-transition: all 0.2s linear;
   
 -moz-transition: all 0.2s linear;
    
-o-transition: all 0.2s linear;
    
-ms-transition: all 0.2s linear;
    
transition: all 0.2s linear;
}



.ia-container figcaption span {
	
position: absolute;
	
top: 40%;
	
margin-top: -30px;
	
right: 20px;
	left: 20px;
	
overflow: hidden;
	
text-align: center;
	
background: rgba(192,192,192, 0.3);
	
line-height: 20px;
	
font-size: 18px;
	
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   
 filter: alpha(opacity=0);
    
opacity: 0;
	
text-transform: uppercase;
	
letter-spacing: 4px;
	
font-weight: 700;
	
padding: 20px;
	
color: #fff;
	
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
} 



.ia-container input:checked + figcaption,


.ia-container input:checked:hover + figcaption{
	
background: rgba(192,192,192, 0);
}



.ia-container input:checked + figcaption span {
	
-webkit-transition: all 0.4s ease-in-out 0.5s;
    
-moz-transition: all 0.4s ease-in-out 0.5s;
    
-o-transition: all 0.4s ease-in-out 0.5s;
    
-ms-transition: all 0.4s ease-in-out 0.5s;
   
 transition: all 0.4s ease-in-out 0.5s;
	
	
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=99)";
    
filter: alpha(opacity=99);
	
opacity: 1;
	
	
op: 50%;
}



.ia-container #ia-selector-last:checked + figcaption span {
	
-webkit-transition-delay: 0.3s;
	
-moz-transition-delay: 0.3s;
	
-o-transition-delay: 0.3s;
	
-ms-transition-delay: 0.3s;
	
transition-delay: 0.3s;
}



.ia-container input:hover + figcaption {
	
background: rgba(192,192,192, 0.03);
}



.ia-container input:checked ~ figure input{
    
z-index: 1;
}


@media screen and (max-width: 720px) {
    

.ia-container { 
		
width: 540px; 
	
}
	
	

.ia-container figure { 
		
left: 40px; 
		
width: 260px; 
	
}
	
	

.ia-container input { 
		
width: 40px; 
	
}
	
	

.ia-container input:checked ~ figure { 
		
left: 260px; 
	
}
	
	

.ia-container figcaption span { 
		
font-size: 16px; 
	
}
}


@media screen and (max-width: 520px) {
    

.ia-container { 
		
width: 320px; 
	
}
	
	

.ia-container figure { 
		
left: 20px; 
		
width: 180px; 
	
}
	
	

.ia-container input { 
		
width: 20px; 
	
}
	
	

.ia-container input:checked ~ figure { 
		
left: 180px; 
	
}
	
	

.ia-container figcaption span { 
		
font-size: 12px; 
		
letter-spacing: 2px; 
		
padding: 10px; 
		
margin-top: -20px; 
	
} 

}