@import url(http://fonts.googleapis.com/css?family=Roboto&subset=latin,latin-ext);

body
{
    font-family: 'Roboto', sans-serif;
    color: #012e55;
}

span
{
    color: #009de0;
}

p
{
    text-align: center;
    font-size: 1.5em;
    display: none;
    margin-top: 30px;
}

.main {
    display: none;
    position: absolute;
    top: 10%;
    right: 10%;
    bottom: 10%;
    left: 10%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

/**/

.wrap {
    perspective: 800px;
    perspective-origin: 50% 100px;
    margin-top: 50px;
}

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

.cube div {
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: white;
    text-align: center;
    line-height: 200px;
    border: 1px solid #f7f7f7;
}

.back {
    transform: translateZ(-100px) rotateY(180deg);
}
.right {
    transform: rotateY(-270deg) translateX(100px);
    transform-origin: top right;
    background-image: url(../images/icon.png);
    background-size: contain;
}
.left {
    transform: rotateY(270deg) translateX(-100px);
    transform-origin: center left;
    background-image: url(../images/icon.png);
    background-size: contain;
}

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

@keyframes spin {
    from { transform: rotateY(0); }
    to { transform: rotateY(360deg); }
}

.animate {
    animation: spin 10s infinite linear;
}