﻿

.wrap {perspective: 800px;perspective-origin: 50% 100px;position: fixed;right: 15px;bottom: 220px;z-index: 999999999;}
.cube {position: relative;width: 130px;transform-style: preserve-3d;}
.cube div {position: absolute;width: 130px;height: 130px;background: #f9f9f9;box-shadow: inset 0 0 20px rgba(125,125,125,0.2);font-size: 20px;padding: 5px;text-align: center;color: rgba(0,0,0,0.5);font-family: sans-serif;}
.cube .back {transform: translateZ(-65px) rotateY(180deg);}
.cube .right {transform: rotateY(-270deg) translateX(65px);transform-origin: top right;}
.cube .left {transform: rotateY(270deg) translateX(-65px);transform-origin: center left;}
.cube .top {transform: rotateX(-90deg) translateY(-65px);transform-origin: top center;}
.cube .bottom {transform: rotateX(90deg) translateY(65px);transform-origin: bottom center;}
.cube .front {transform: translateZ(65px);}
.cube .back h2, .cube .front h2, .cube .left h2, .cube .right h2{color:#373d3f;font-size: 18px;font-weight: 600;margin: 10px 0 0 0;}
.cube .back h2 span, .cube .front h2 span, .cube .left h2 span, .cube .right h2 span{font-size: 14px;display: block;font-weight:bold;color:#002147;}
.cube .back h3, .cube .front h3, .cube .left h3, .cube .right h3{color:#373d3f;font-size: 13px;font-weight: 600;margin: 5px 0 0 0px;}
.cube .front, .cube .back, .cube .left, .cube .right{border-top: 3px solid transparent;}
.cube .front{border-color: #ed1b2f;}
.cube .back{border-color: #ff9727;}
.cube .left{border-color: #f0c463;}
.cube .right{border-color: #6e1a98;}
.cube .front h2{color: #ed1b2f;}
.cube .back h2{color: #ff9727;}
.cube .left h2{color: #f0c463;}
.cube .right h2{color: #6e1a98;}
.front-btn{background-color: #ed1b2f;border:2px solid #ab0b25;text-transform: uppercase;font-weight: 400;font-size: 13px;margin-top: 10px;padding: 6px 8px;}
.front-btn:hover, .front-btn:focus{background-color: #ab0b25;border:2px solid #ed1b2f;}
.right-btn{background-color: #6e1a98;border:2px solid #3b94d1;text-transform: uppercase;font-weight: 400;font-size: 13px;margin-top: 10px;padding: 6px 8px;}
.right-btn:hover, .right-btn:focus{background-color: #3b94d1;border:2px solid #6e1a98;}
.back-btn{background-color: #ff9727;border:2px solid #f26722;text-transform: uppercase;font-weight: 400;font-size: 13px;margin-top: 10px;padding: 6px 8px;}
.back-btn:hover, .back-btn:focus{background-color: #f26722;border:2px solid #ff9727;}
.left-btn{background-color: #f0c463;border:2px solid #f0c463;text-transform: uppercase;font-weight: 400;font-size: 13px;margin-top: 10px;padding: 6px 8px;}
.left-btn:hover, .left-btn:focus{background-color: #f0c463;border:2px solid #f0c463;}

@media(max-width: 767px){
.cube {width: 100px;}
.cube div {width: 100px;height: 100px;}
.cube .back h3, .cube .front h3, .cube .left h3, .cube .right h3{font-size: 11px}
.left-btn{font-size: 12px; padding: 2px 0px;}
.back-btn{ font-size: 11px;}
.cube .back h2 span, .cube .front h2 span, .cube .left h2 span, .cube .right h2 span{font-size: 11px;}
.cube .back {transform: translateZ(-49px) rotateY(180deg);}
.cube .front {transform: translateZ(50px);}
.cube .left {transform: rotateY(270deg) translateX(-50px);}
.cube .right {transform: rotateY(-270deg) translateX(49px);}
.cube .back h2, .cube .front h2, .cube .left h2, .cube .right h2{font-size: 11px;}
}
@keyframes spin {
  from,20% {-moz-transform: rotateY(0);-ms-transform: rotateY(0);transform: rotateY(0);}
    25%,45%  {-moz-transform: rotateY(-90deg);-ms-transform: rotateY(-90deg);transform: rotateY(-90deg);}
    50%,70%  {-moz-transform: rotateY(-180deg);-ms-transform: rotateY(-180deg);transform: rotateY(-180deg);}
    75%,95%  {-moz-transform: rotateY(-270deg);-ms-transform: rotateY(-270deg);transform: rotateY(-270deg);}
    to {-moz-transform: rotateY(-360deg);-ms-transform: rotateY(-360deg);transform: rotateY(-360deg);}
}
.cube {/*animation: spin 5s infinite linear;*/-webkit-animation-name: spin;-webkit-animation-timing-function: ease-out;-webkit-animation-iteration-count: infinite;-webkit-animation-duration: 20s;
animation-name: spin 5s;animation-timing-function: ease-out;animation-iteration-count: infinite;animation-duration: 20s;
-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;-ms-transform-style: preserve-3d;transform-style: preserve-3d;}


