/* import google fonts */
@import url('http://fonts.googleapis.com/css?family=Open+Sans');

body {
	font-family: "Open Sans", Arial, sans-serif;
	font-size: 16px;
	margin: 0px;
	background-color: #000;
	background: linear-gradient(270deg, #246655, #242b66, #662455, #85341c, #8f9f0c, #894cc5, #6c9971, #d2c984);
	background-size: 1600% 1600%;
	-webkit-animation: AnimationName 30s ease infinite;
	-moz-animation: AnimationName 30s ease infinite;
	-o-animation: AnimationName 30s ease infinite;
	animation: AnimationName 30s ease infinite;
}

 .wrap {
    margin-top: 150px;
    perspective: 1000px;
    perspective-origin: 50% 50%;
} 

.cube {
    margin: auto;
    position: relative;
    height: 200px;
    width: 200px;
    transform-style: preserve-3d;
}

 .cube div {
     position: absolute;
     padding: 10px;
     box-sizing: border-box;
     height: 100%;
     width: 100%;
     opacity: 0.9;
     background-color: #000;
     border: solid 1px #eee;
     color: #fff;
     font: 10px arial;
     transition: transform 0.2s ease-in;
 }

.front {
    transform: translateZ(100px);
}

.back {
    transform: translateZ(-100px) rotateY(180deg);
}

.right {
    transform: rotateY(-270deg) translateX(100px);
    transform-origin: top right;
}

.left {
    transform: rotateY(270deg) translateX(-100px);
    transform-origin: center left;
}

.top {
    transform: rotateX(-270deg) translateY(-100px);
    transform-origin: top center;
}

.bottom {
    transform: rotateX(270deg) translateY(100px);
    transform-origin: bottom center;
}

.cube {
    animation: rotate 20s infinite linear;
}

.wrap:hover .front {
    transform: translateZ(200px);
}

.wrap:hover .back {
    transform: translateZ(-200px) rotateY(180deg);
}

.wrap:hover .right {
    transform: rotateY(-270deg) translateZ(100px) translateX(100px);
}

.wrap:hover .left {
    transform: rotateY(270deg) translateZ(100px) translateX(-100px);
}

.wrap:hover .top {
    transform: rotateX(-270deg) translateZ(100px) translateY(-100px);
}

.wrap:hover .bottom {
    transform: rotateX(270deg) translateZ(100px) translateY(100px);
}

@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

@-moz-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

@-o-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

@keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

@keyframes bganim {
    from {
        background-position: 0px;
    }

    to {
        background-position: 80px;
    }
}
        
@keyframes rotate {
    from {
        transform: rotateX(0deg) rotateY(0deg);
    }

    to {
        transform: rotateX(360deg) rotateY(360deg);
    }
}