#container {
	display: block;
	margin: 0 auto;
	width: 95%;
}

	input[type=radio] {
		position: absolute;
		z-index: 100;
		opacity: 0;
		cursor: pointer;
		height: 110px;
		width: 40px;
		margin-top: -7em;
	}

	.control {
		display: inline-block;
		color: #464646;
		font-family: 'PT Sans';
		margin-top: 30px;
		width: 70px;
		height: 35px;
		background: #F0D1E7;
		padding: 5px 3px 1px 2px;
		cursor: pointer;
		vertical-align: bottom;
		text-align: center;
		padding: 5px;
		margin-left: 10px;
		border-radius: 10px;
	}
		
		.control:hover, 
		input[type=radio]:hover + .control, 
		input[type=radio]:checked + .control {
	    color: #fff;
		}
	
	.first {
		border-top-left-radius: 3px;
		border-bottom-left-radius: 3px;
	}
	
	.last {
		border-top-right-radius: 3px;
		border-bottom-right-radius: 3px;
		border-right: 0px;
	}

	#item-list {
		padding: 10px;
		list-style-type: none;
		text-align: center;
	}
	
		#item-list li {
			display: inline-block;
			width: 270px;
			vertical-align: top;
			margin: auto;
			padding: 10px;
			background: #ffffff;
			border-radius: 5px;
			overflow: hidden;
		}
			
			#item-list li img {
				display: inline-block;
				vertical-align: top;
				width: 270px;
                                margin: auto;
			}
			
			#item-list li p {
                                text-align: center;
				display: inline-block;
				color:#BF9893;
				width: 300px;
				margin: auto;
				padding: 0;
			}
			
			#item-list .title, #item-list .developer, #item-list.price {
				display: block;
				margin-bottom: .5em;
			}
			
			#item-list .title {
			
				font-size: 20px;
			}
			
			#item-list .developer {
			color:#464646;
				font-size: 12px;
			}
			#item-list .price {
			font-weight:bold;
			color:#464646;
				font-size: 18px;
			}
	
	
	/* Animation start here */
		
	.view-control-1:checked ~ #item-list li img {
		opacity: 1;
		width: 100px;
		visibility: visible;
		-webkit-transition: .4s .4s ease-out;
		-moz-transition: .4s .4s ease-out;
		-ms-transition: .4s .4s ease-out;
		-o-transition: .4s .4s ease-out;
		transition: .4s .4s ease-out;
	}
		
	.view-control-1:checked ~ #item-list li p {
		opacity: 1;
		visibility: visible;
		-webkit-transition: .4s ease-out;
		-moz-transition: .4s ease-out;
		-ms-transition: .4s ease-out;
		-o-transition: .4s ease-out;
		transition: .4s ease-out;
	}
	
	.view-control-1:checked ~ #item-list li {
		width: 300px;
		-webkit-transition: .4s ease-out;
		-moz-transition: .4s ease-out;
		-ms-transition: .4s ease-out;
		-o-transition: .4s ease-out;
		transition: .4s ease-out;
	}
		
	.view-control-2:checked ~ #item-list li img {
		opacity: 0;
		width: 0;
		visibility: hidden;
		-webkit-transition: .4s ease-out;
		-moz-transition: .4s ease-out;
		-ms-transition: .4s ease-out;
		-o-transition: .4s ease-out;
		transition: .4s ease-out;
	}
		
	.view-control-2:checked ~ #item-list li p {
		opacity: 1;
		visibility: visible;
		-webkit-transition: .4s ease-out;
		-moz-transition: .4s ease-out;
		-ms-transition: .4s ease-out;
		-o-transition: .4s ease-out;
		transition: .4s ease-out;
	}
	
	.view-control-2:checked ~ #item-list li {
		width: 900px;
		-webkit-transition: .4s .4s ease-out;
		-moz-transition: .4s .4s ease-out;
		-ms-transition: .4s .4s ease-out;
		-o-transition: .4s .4s ease-out;
		transition: .4s .4s ease-out;
	}		
		
	.view-control-3:checked ~ #item-list li img {
		opacity: 1;
		width: 100;
		visibility: visible;
		-webkit-transition: .4s ease-out;
		-moz-transition: .4s ease-out;
		-ms-transition: .4s ease-out;
		-o-transition: .4s ease-out;
		transition: .4s ease-out;
	}
		
	.view-control-3:checked ~ #item-list li p {
		opacity: 1;
		visibility: visible;
		-webkit-transition: .4s ease-out;
		-moz-transition: .4s ease-out;
		-ms-transition: .4s ease-out;
		-o-transition: .4s ease-out;
		transition: .4s ease-out;
	}
	
	.view-control-3:checked ~ #item-list li {
		width: 900px;
		-webkit-transition: .4s ease-out;
		-moz-transition: .4s ease-out;
		-ms-transition: .4s ease-out;
		-o-transition: .4s ease-out;
		transition: .4s ease-out;
	}		
		
	.view-control-4:checked ~ #item-list li img {
		opacity: 1;
		width: 100;
		visibility: visible;
		-webkit-transition: .4s ease-out;
		-moz-transition: .4s ease-out;
		-ms-transition: .4s ease-out;
		-o-transition: .4s ease-out;
		transition: .4s ease-out;
	}	
		
	.view-control-4:checked ~ #item-list li p {
		opacity: 0;
		position: absolute;
		visibility: hidden;
		-webkit-transition: .4s ease-out;
		-moz-transition: .4s ease-out;
		-ms-transition: .4s ease-out;
		-o-transition: .4s ease-out;
		transition: .4s ease-out;
	}
	
	.view-control-4:checked ~ #item-list li {
		width: 100px;
		-webkit-transition: .4s ease-out;
		-moz-transition: .4s ease-out;
		-ms-transition: .4s ease-out;
		-o-transition: .4s ease-out;
		transition: .4s ease-out;
	}