.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; }