.main { height:100%; }
.rm-container {
	width: 32%;
	height: 100%;
	max-width: 560px;
	margin: 0 auto;
	position: relative;
	-webkit-perspective: 1600px;
	-moz-perspective: 1600px;
	-o-perspective: 1600px;
	-ms-perspective: 1600px;
	perspective: 1600px;
}

.rm-wrapper { height:auto; }
.rm-wrapper,
.rm-wrapper,
.rm-wrapper > div {
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	position: absolute;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
}
.rm-wrapper { position:absolute; top:40px; bottom:40px; height:auto; }

.rm-wrapper .rm-cover {
	-webkit-transform-origin: 0% 50%;
	-webkit-transition-delay: 0.2s;
	-moz-transform-origin: 0% 50%;
	-moz-transition-delay: 0.2s;
	-o-transform-origin: 0% 50%;
	-o-transition-delay: 0.2s;
	-ms-transform-origin: 0% 50%;
	-ms-transition-delay: 0.2s;
	transform-origin: 0% 50%;
	transition-delay: 0.2s;
}

.rm-wrapper .rm-right {
	-webkit-transform-origin: 100% 50%;
	-webkit-transition-delay: 0s;
	-moz-transform-origin: 100% 50%;
	-moz-transition-delay: 0s;
	-o-transform-origin: 100% 50%;
	-o-transition-delay: 0s;
	-ms-transform-origin: 100% 50%;
	-ms-transition-delay: 0s;
	transform-origin: 100% 50%;
	transition-delay: 0s;
}

.rm-wrapper > div > div {
	width: 100%;
	height: 100%;
	position: absolute;
	/*padding: 30px;*/
}

.rm-container .rm-front,
.rm-container .rm-back {
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
}

html:not(.safe-mod) .rm-container .rm-back {
	-webkit-transform: rotateY(-180deg);
	-moz-transform: rotateY(-180deg);
	-o-transform: rotateY(-180deg);
	-ms-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
}

.rm-overlay {
	position: absolute;
	width: 10%;
	height: 100%;
	top: 0;
	right: 0;
	pointer-events: none;
	background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.04) 100%);
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.04)));
	background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.04) 100%);
	background: -o-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.04) 100%);
	background: -ms-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.04) 100%);
	background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0.04) 100%);
}



/* Transitions */
.rm-wrapper,
.rm-wrapper > div {
	-webkit-transition: all 0.6s ease-in-out, height 0s;
	-moz-transition: all 0.6s ease-in-out;
	-o-transition: all 0.6s ease-in-out, height 0s;
	-ms-transition: all 0.6s ease-in-out, height 0s;
	transition: all 0.6s ease-in-out, height 0s;
}
.safe-mod .rm-wrapper,
.safe-mod .rm-wrapper > div, .safe-mod .rm-wrapper > div > div {
	-webkit-transition: none;
	-moz-transition: none;
	-o-transition: none;
	-ms-transition: none;
	transition: none;
}



.rm-close {
	height:0;
}

.rm-container.rm-open .rm-cover {
	-webkit-transform: rotateY(-180deg);
	-webkit-transition-delay: 0s;
	-moz-transform: rotateY(-180deg);
	-moz-transition-delay: 0s;
	-o-transform: rotateY(-180deg);
	-o-transition-delay: 0s;
	-ms-transform: rotateY(-180deg);
	-ms-transition-delay: 0s;
	transform: rotateY(-180deg);
	transition-delay: 0s;
}

.rm-container.rm-open .rm-right {
	-webkit-transform: rotateY(180deg);
	-webkit-transition-delay: 0.2s;
	-moz-transform: rotateY(180deg);
	-moz-transition-delay: 0.2s;
	-o-transform: rotateY(180deg);
	-o-transition-delay: 0.2s;
	-ms-transform: rotateY(180deg);
	-ms-transition-delay: 0.2s;
	transform: rotateY(180deg);
	transition-delay: 0.2s;
}

.rm-container.rm-in .rm-cover {
	-webkit-transform: rotateY(-150deg);
	-moz-transform: rotateY(-150deg);
	-o-transform: rotateY(-150deg);
	-ms-transform: rotateY(-150deg);
	transform: rotateY(-150deg);
}

.rm-container.rm-in .rm-right {
	-webkit-transform: rotateY(150deg);
	-moz-transform: rotateY(150deg);
	-o-transform: rotateY(150deg);
	-ms-transform: rotateY(150deg);
	transform: rotateY(150deg);
}

.rm-container.rm-in .rm-wrapper {
	-webkit-transform: translateZ(-500px);
	-moz-transform: translateZ(-500px);
	-o-transform: translateZ(-500px);
	-ms-transform: translateZ(-500px);
	transform: translateZ(-500px);
}

.rm-container.rm-in .rm-cover, 
.rm-container.rm-in .rm-right,
.rm-container.rm-nodelay .rm-right {
	-webkit-transition-delay: 0s;
	-moz-transition-delay: 0s;
	-o-transition-delay: 0s;
	-ms-transition-delay: 0s;
	transition-delay: 0s;
}

.rm-container.rm-in .rm-modal {
	-webkit-transform: translateZ(0px);
	-moz-transform: translateZ(0px);
	-o-transform: translateZ(0px);
	-ms-transform: translateZ(0px);
	transform: translateZ(0px);
	opacity: 1;
	pointer-events: auto;
}


/* Media Queries */
@media screen and (min-height: 600px) { 
	.rm-wrapper { top:60px; bottom:60px; }
}
@media screen and (min-height: 800px) { 
	.rm-wrapper { top:80px; bottom:80px; }
}
@media screen and (min-height: 900px) { 
	.rm-wrapper { top:120px; bottom:120px; }
}
@media screen and (min-height: 1000px) { 
	.rm-wrapper { top:140px; bottom:140px; }
}
@media screen and (max-width: 1100px) and (min-height: 1000px) { 
	.rm-wrapper { top:320px; bottom:320px; }
}


/* Page Shadow Middle */
.rm-wrapper .rm-middle {
	box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
}

.rm-container.rm-open .rm-wrapper .rm-cover {
	box-shadow: 2px 4px 4px rgba(0,0,0,0.2);
}

.rm-container.rm-open .rm-wrapper .rm-right {
	box-shadow: -2px 4px 4px rgba(0,0,0,0.2);
}

.rm-container.rm-open .rm-wrapper .rm-middle {
	box-shadow: 0 6px 4px -2px rgba(0,0,0,0.2);
}


/* firefox weird z-index fix */
.rm-container.rm-closed .rm-wrapper > div.rm-right > div.rm-front { visibility:hidden; }
.rm-container .rm-wrapper > div.rm-right > div.rm-front { visibility:visible; }

.rm-wrapper .rm-cover { z-index:100; }
.rm-wrapper > div > div.rm-front { z-index:120; }
.rm-wrapper > div > div.rm-back { z-index:120; }
.rm-wrapper .rm-middle { z-index:50; }
.rm-wrapper .rm-right { z-index:60; }