/* Necessary Styling */
 #carousel {
	 display: block;
	 position: relative;
	 max-width: 750px;
	 height: 270px;
	 perspective: 200px;
	 transform-style: preserve-3d;
   margin:0 auto;
}
 .item {
	 width: 50%;
	 text-align: center;
	 display: block;
	 position: absolute;
	 transition: all 500ms ease;
	 opacity: 1;
	 transform: perspective(-50px);
}
 .item.one { transform: translateX(0%) translateZ(-50px); }
 .item.two { transform: translateX(50%) translateZ(0px); }
 .item.three { transform: translateX(100%) translateZ(-50px); }
 .item.one, .item.three { opacity: 0.3; }

@media screen and (max-width:460px){
  .item.one { transform: translateX(0%) translateZ(-20px); }
  .item.three { transform: translateX(100%) translateZ(-20px); }
  #carousel { height: 170px; }
}