@charset "utf-8";
/* CSS Document */
#accordion {
  	-webkit-transform: translateZ(0); /* Stop flicker on codepen preview */
	max-width: 100%;
	margin:0 auto;
  	clear: both;
}

#accordion a {
	display: block;
	text-decoration: none;
}

.cell {
	width: 20%;
	height:800px;
	float: left;
	-webkit-transition: width .5s ease-in-out;
	-moz-transition: width .5s ease-in-out;
	-ms-transition: width .5s ease-in-out;
	transition: width .5s ease-in-out;
}

.focus {
  height:80px;
  opacity: 0;
  -webkit-transition: opacity .5s ease-in-out;
  -moz-transition: opacity .5s ease-in-out;
  -ms-transition: opacity .5s ease-in-out;
  transition: opacity .5s ease-in-out;
}

.active .focus {
  opacity: 1;
}

.cell:nth-child(1) {
	background:url(../img/s3_p1.jpg) top center no-repeat;
}

.cell:nth-child(1) .focus {
	background:url(../img/s3_p1.jpg) top center no-repeat;
}


.cell:nth-child(2) {
	background:url(../img/s3_p2.jpg) top center no-repeat;
}

.cell:nth-child(2) .focus {
	background:url(../img/s3_p2.jpg) top center no-repeat;
}

.cell:nth-child(3) {
	background:url(../img/s3_p3.jpg) top center no-repeat;
}

.cell:nth-child(3) .focus {
	background:url(../img/s3_p3.jpg) top center no-repeat;
}

.cell:nth-child(4) {
	background:url(../img/s3_p4.jpg) top center no-repeat;
}

.cell:nth-child(4) .focus {
	background:url(../img/s3_p4.jpg) top center no-repeat;
}

.cell:nth-child(5) {
	background:url(../img/s3_p5.jpg) top center no-repeat;
}

.cell:nth-child(5) .focus {
	background:url(../img/s3_p5.jpg) top center no-repeat;
}
.cell.active {
	width:50%;
}
.cell.inactive {
	width: 12.5%;
}