#cube{perspective:1000px}.cubeee{position:relative;-moz-perspective:1600px;-webkit-perspective:1600px;perspective:1600px;-moz-animation:introduceCube 1.5s ease-out;-webkit-animation:introduceCube 1.5s ease-out;animation:introduceCube 1.5s ease-out}@media screen and (max-width:599px){#cube{padding:35px 0 45px 0}.cube{position:relative;margin:0 auto;width:150px;height:150px;transform-style:preserve-3d;transform:rotateX(-15deg) rotateY(45deg);transition:all .75s ease}.face{width:150px;height:150px;position:absolute;box-sizing:border-box}.face.top{transform:rotateY(180deg) rotateX(90deg) translate3d(0,0,75px)}.face.bottom{transform:rotateY(180deg) rotateX(90deg) translate3d(0,0,-75px)}.face.front{transform:translate3d(0,0,75px)}.face.back{transform:translate3d(0,0,-75px)}.face.left{transform:rotateY(90deg) translate3d(0,0,-75px)}.face.right{transform:rotateY(90deg) translate3d(0,0,75px)}.cube3d .back{background-image:url(cube/150c.jpg);background-size:cover}.cube3d .front{background-image:url(cube/150a.jpg);background-size:cover}.cube3d .left{background-image:url(cube/150b.jpg);background-size:cover}.cube3d .right{background-image:url(cube/150d.jpg);background-size:cover}}@media screen and (min-width:440px){#cube{padding:40px 0 50px 0}.cube{position:relative;margin:0 auto;width:200px;height:200px;transform-style:preserve-3d;transform:rotateX(-15deg) rotateY(45deg);transition:all .75s ease}.face{width:200px;height:200px;position:absolute;box-sizing:border-box}.face.top{transform:rotateY(180deg) rotateX(90deg) translate3d(0,0,100px)}.face.bottom{transform:rotateY(180deg) rotateX(90deg) translate3d(0,0,-100px)}.face.front{transform:translate3d(0,0,100px)}.face.back{transform:translate3d(0,0,-100px)}.face.left{transform:rotateY(90deg) translate3d(0,0,-100px)}.face.right{transform:rotateY(90deg) translate3d(0,0,100px)}.cube3d .back{background-image:url(cube/200c.jpg);background-size:cover}.cube3d .front{background-image:url(cube/200a.jpg);background-size:cover}.cube3d .left{background-image:url(cube/200b.jpg);background-size:cover}.cube3d .right{background-image:url(cube/200d.jpg);background-size:cover}}@media screen and (min-width:600px){#cube{padding:50px 0 60px 0}.cube{position:relative;margin:0 auto;width:250px;height:250px;transform-style:preserve-3d;transform:rotateX(-15deg) rotateY(45deg);transition:all .75s ease}.face{width:250px;height:250px;position:absolute;box-sizing:border-box}.face.top{transform:rotateY(180deg) rotateX(90deg) translate3d(0,0,125px)}.face.bottom{transform:rotateY(180deg) rotateX(90deg) translate3d(0,0,-125px)}.face.front{transform:translate3d(0,0,125px)}.face.back{transform:translate3d(0,0,-125px)}.face.left{transform:rotateY(90deg) translate3d(0,0,-125px)}.face.right{transform:rotateY(90deg) translate3d(0,0,125px)}.cube3d .back{background-image:url(cube/250c.jpg);background-size:cover}.cube3d .front{background-image:url(cube/250a.jpg);background-size:cover}.cube3d .left{background-image:url(cube/250b.jpg);background-size:cover}.cube3d .right{background-image:url(cube/250d.jpg);background-size:cover}}@media screen and (min-width:1400px){#cube{padding:60px 0 70px 0}.cube{position:relative;margin:0 auto;width:300px;height:300px;transform-style:preserve-3d;transform:rotateX(-15deg) rotateY(45deg);transition:all .75s ease}.face{width:300px;height:300px;position:absolute;box-sizing:border-box}.face.top{transform:rotateY(180deg) rotateX(90deg) translate3d(0,0,150px)}.face.bottom{transform:rotateY(180deg) rotateX(90deg) translate3d(0,0,-150px)}.face.front{transform:translate3d(0,0,150px)}.face.back{transform:translate3d(0,0,-150px)}.face.left{transform:rotateY(90deg) translate3d(0,0,-150px)}.face.right{transform:rotateY(90deg) translate3d(0,0,150px)}.cube3d .back{background-image:url(cube/300c.jpg);background-size:cover}.cube3d .front{background-image:url(cube/300a.jpg);background-size:cover}.cube3d .left{background-image:url(cube/300b.jpg);background-size:cover}.cube3d .right{background-image:url(cube/300d.jpg);background-size:cover}}@keyframes introduceCube{0{opacity:0;top:-20px;-moz-transform:scale(0.6);-ms-transform:scale(0.6);-o-transform:scale(0.6);-webkit-transform:scale(0.6);transform:scale(0.6)}20%{opacity:1}100%{top:0;-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);-webkit-transform:scale(1);transform:scale(1)}}#origin{-webkit-animation-name:spin;-webkit-animation-duration:10s;animation-name:spin;animation-duration:10s;animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear}@keyframes spin{from{transform:rotateX(-3deg) rotateY(0)}to{transform:rotateX(-3deg) rotateY(360deg)}}