.movie,.scene{height:400px;width:260px}.info header,.movie .poster{background-repeat:no-repeat}*,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}body{background:#000;font-family:Lato,Arial,sans-serif;color:#fff}.wrapper{margin:0 auto 100px;max-width:960px}.stage{list-style:none;padding:0;display:flex;flex-direction:row;flex-wrap:nowrap;align-content:center;justify-content:center;align-items:center}.scene{margin:30px;float:left;-webkit-perspective:1000px;-moz-perspective:1000px;perspective:1000px}.movie{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:translateZ(-130px);-moz-transform:translateZ(-130px);transform:translateZ(-130px);-webkit-transition:-webkit-transform 350ms;-moz-transition:-moz-transform 350ms;transition:transform 350ms}.movie:hover{-webkit-transform:rotateY(-78deg) translateZ(20px);-moz-transform:rotateY(-78deg) translateZ(20px);transform:rotateY(-78deg) translateZ(20px)}.movie .info,.movie .poster{position:absolute;width:260px;height:400px;background-color:#fff;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;backface-visibility:hidden}.movie .poster{-webkit-transform:translateZ(130px);-moz-transform:translateZ(130px);transform:translateZ(130px);background-size:cover}.movie .info{-webkit-transform:rotateY(90deg) translateZ(130px);-moz-transform:rotateY(90deg) translateZ(130px);transform:rotateY(90deg) translateZ(130px);border:1px solid #b8b5b5;font-size:.75em}.csstransforms3d .movie::after{content:'';width:260px;height:260px;position:absolute;bottom:0;box-shadow:0 30px 50px rgba(0,0,0,.3);-webkit-transform-origin:100% 100%;-moz-transform-origin:100% 100%;transform-origin:100% 100%;-webkit-transform:rotateX(90deg) translateY(130px);-moz-transform:rotateX(90deg) translateY(130px);transform:rotateX(90deg) translateY(130px);-webkit-transition:box-shadow 350ms;-moz-transition:box-shadow 350ms;transition:box-shadow 350ms}.csstransforms3d .movie:hover::after{box-shadow:20px -5px 50px rgba(0,0,0,.3)}.info header{color:#fff;padding:7px 10px;font-weight:700;height:195px;background-size:contain;text-shadow:0 1px 1px #000}.info header h1{margin:0 0 2px;font-size:1.4em}.info header .rating{border:1px solid #fff;padding:0 3px}.info p{padding:1.2em 1.4em;margin:2px 0 0;font-weight:700;color:#666;line-height:1.4em;border-top:10px solid #555}.movie .info,.movie .info header,.movie .poster{-webkit-transition:box-shadow 350ms;-moz-transition:box-shadow 350ms;transition:box-shadow 350ms}.csstransforms3d .movie .poster{box-shadow:inset 0 0 40px rgba(255,255,255,0)}.csstransforms3d .movie:hover .poster{box-shadow:inset 300px 0 40px rgba(255,255,255,.8)}.csstransforms3d .movie .info,.csstransforms3d .movie .info header{box-shadow:inset -300px 0 40px rgba(0,0,0,.5)}.csstransforms3d .movie:hover .info,.csstransforms3d .movie:hover .info header{box-shadow:inset 0 0 40px transparent}.scene:first-child .movie .poster{background-image:url(../img/poster/poster01.jpg)}.scene:nth-child(2) .poster{background-image:url(../img/poster/poster02.jpg)}.scene:nth-child(3) .poster,.scene:nth-child(4) .poster{background-image:url(../img/poster/poster03.jpg)}.scene:first-child .info header{background-image:url(../img/still01.png)}.scene:nth-child(2) .info header{background-image:url(../img/still02.png)}.scene:nth-child(3) .info header,.scene:nth-child(4) .info header{background-image:url(../img/still03.png)}.no-csstransforms3d .movie .info,.no-csstransforms3d .movie .poster{position:relative}@media screen and (max-width:60.75em){.scene{float:none;margin:30px auto 60px}}