.cubecontainer {
    width: 100%;
    height: auto;
    position: relative;
        background:rgba(93, 177, 12, 0.2);
            color:#515050;

    padding-top: 100%;
    border:solid rgba(93, 177, 12, 0.2) 2px;
    border-radius:0px;
    margin-top:5%;
}

.cubecontainer:hover{
        background: rgba(93, 177, 12, 0.4);
        color:#fff;
}

.cube {
    width: 100%;
    height: 100%;
    top: 0;
    position: absolute;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

    .cube img {
        width: 100%;
        height: 100%;
        border-radius:0px;
    }


.cubecontainer:hover .cube.spinning {
    -webkit-animation: spinCubeWebkitRight 1s ease forwards;
    -moz-animation: spinCubeMozRight 1s ease forwards;
    -o-animation: spinCubeRightO 1s ease forwards;
    animation: spinCubeRight 1s ease forwards;
}

.cubecontainer .cube .back {
    -moz-transform: rotateZ(360deg);
    -webkit-transform: rotateZ(360deg);
    -o-transform: rotateZ(360deg);
    -ms-transform: rotateZ(360deg);
}


@-webkit-keyframes spinCubeWebkitRight {
    0% {
        -webkit-transform: rotateY( 0deg );
    }

    100% {
        -webkit-transform: rotateY( 180deg );
    }
}

@-moz-keyframes spinCubeMozRight {
    0% {
        -moz-transform: rotateY( 0deg );
    }

    100% {
        -moz-transform: rotateY( 180deg );
    }
}

@keyframes spinCubeRight {
    0% {
        transform: rotateY( 0deg );
    }

    100% {
        transform: rotateY( 180deg );
    }
}


.cubecontainer.up:hover .cube.spinning {
    -webkit-animation: spinCubeWebkitUp 1s ease forwards;
    -moz-animation: spinCubeMozUp 1s ease forwards;
    -o-animation: spinCubeUpO 1s ease forwards;
    animation: spinCubeUp 1s ease forwards;
}


.cubecontainer.up .cube .back img {
    -moz-transform: rotateZ(180deg);
    -webkit-transform: rotateZ(180deg);
    -o-transform: rotateZ(180deg);
    -ms-transform: rotateZ(180deg);
}

@-webkit-keyframes spinCubeWebkitUp {
    0% {
        -webkit-transform: rotateX(0);
    }

    100% {
        -webkit-transform: rotateX( 180deg );
    }
}

@-moz-keyframes spinCubeMozUp {
    0% {
        -moz-transform: rotateX( 0deg );
    }

    100% {
        -moz-transform: rotateX( 180deg );
    }
}

@keyframes spinCubeUp {
    0% {
        transform: rotateX( 0deg );
    }

    100% {
        transform: rotateX( 180deg );
    }
}


.cube figure {
    display: block;
    position: absolute;
    font-size: 0;
    font-weight: bold;
    color: white;
    text-align: center;
    margin: 0;
    transform: translateZ(0.1px);
    width: 100%;
}

.cube.panels-backface-invisible figure {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}

.cubecontainer .title{
    max-height:0;
    margin:0;
    overflow:hidden;
    text-align:center;
}

.cubecontainer .title{
    max-height:100px;
    transition: 1s ease;
    text-decoration:none;
    padding:15px;
        font-family: 'Fira Sans', sans-serif;
    font-weight: 300;
    font-size:1.2em;
}

.cubecontainer:hover{
    font-size:1.4em;
}