#panels {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	display: none;
}
#panels.placed {
	display: block;
}
#panels #panel-center {
	position: absolute;
	width: 439px; /*439*/
	height: 500px;
	top: 50%;
	left: 50%;
	-webkit-perspective: 1200px;
	perspective: 1200px;
	-webkit-transform: translate3d(-50%,-50%,0);
	transform: translate3d(-50%,-50%,0);
	background: transparent url(https://b.micr.io/jaRas/statics/images/inside.jpg) center center no-repeat;
	background-size: cover;
}

#panels #panel-center > * {
	position: absolute;
	width: 50%;
	height: 100%;
	-webkit-transition: -webkit-transform 3s ease-in-out;
	transition: transform 3s ease-in-out;
	perspective: 800px;
	-webkit-perspective: 800px;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform: rotateY(0deg);
	transform: rotateY(0deg);
}
#panels #panel-left {
	right: 100%;
	-webkit-transform-origin: right center;
	transform-origin: right center;
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}
#panels #panel-right {
	left: 100%;
	-webkit-transform-origin: left center;
	transform-origin: left center;
	-webkit-transition-delay: .5s;
	transition-delay: .5s;
}
#panels.closed #panel-left {
	-webkit-transform: rotateY(180deg);
	transform: rotateY(180deg);
	-webkit-transition-delay: .5s;
	transition-delay: .5s;
}

#panels.closed #panel-right {
	-webkit-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}

	#panels #panel-center .panel {
		position: absolute;
		width: 100%;
		height: 100%;
	}
html:not(.ie) #panels #panel-center .panel {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
html.ie #panels #panel-center .panel {
	-webkit-transition: opacity 0 1.5s ease;
	transition: opacity 0s 1.5s ease;
	opacity: 1;
}
#panels #panel-center .panel.back {
	-webkit-transform: translate3d(-3.3%,0,0) rotateY(180deg);
	transform: translate3d(-3.3%,0,0) rotateY(180deg);
}
html.ie #panels #panel-center .panel.back {
	opacity: 0;
}
#panels #panel-center #panel-left .panel.back {
	-webkit-transform: translate3d(3.3%,0,0) rotateY(180deg);
	transform: translate3d(3.3%,0,0) rotateY(180deg);
}

	html.ie #panels.closed #panel-center .panel.back {
		opacity: 1;
	}
	html.ie #panels.closed #panel-center .panel.front {
		opacity: 0;
	}


#panels .panel.front {
	background: transparent url(https://b.micr.io/jaRas/statics/images/inside.jpg) left center no-repeat;
	background-size: cover;
}

#panels #panel-center .panel.back {
	background: transparent url(https://b.micr.io/jaRas/statics/images/outside-c.jpg) left center no-repeat;
	background-size: cover;
	width: 107.5%;
}

#panels #panel-center #panel-right .panel {
	background-position: right center;
}
