.example {
	position: relative;
	width: 100%;
	height: 450px;
	padding: 25px 0 25px 0;
	max-height: 450px;
	-webkit-perspective-origin: 0 0 0;
	-moz-perspective-origin: -100% -100%;
	perspective-origin: 0 0 0;
}

.example .qube {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	margin: auto;
	margin-top: 50px;
	cursor: pointer;
}

/*
.hover-spin .qube {
	-webkit-transition: -webkit-transform 1500ms ease;
	-moz-transition: -moz-transform 1500ms ease;
	transition: transform 1500ms ease;
}

.hover-spin:hover .qube {
	-webkit-transform: rotateY(359deg);
	-moz-transform: rotateY(359deg);
	transform: rotateY(359deg);
}
*/

.spin .qube {
    /*-webkit-animation: rotateYReverse linear infinite 50s;
	-moz-animation: rotateYReverse linear infinite 50s;
	animation: rotateYReverse linear infinite 50s;*/

	-webkit-transition: -webkit-transform 1s linear;
	-moz-transition: -moz-transform 1s linear;
	transition: transform 1s linear;
}

/*.spin .qube:hover{
	-webkit-animation: horizontal 3s ease;
    animation: horizontal 3s ease;
}*/

.spin .qube:active {
	-webkit-transition: -webkit-transform 1s linear;
	-moz-transition: -moz-transform 1s linear;
	transition: transform 1s linear;	
}

@-webkit-keyframes horizontal {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
    6% {
        -webkit-transform: translate(5px, 0);
        transform: translate(5px, 0)
    }
    12% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
    18% {
        -webkit-transform: translate(5px, 0);
        transform: translate(5px, 0)
    }
    24% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
    30% {
        -webkit-transform: translate(5px, 0);
        transform: translate(5px, 0)
    }
    100%,
    36% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}

@keyframes horizontal {
    0% {
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0)
    }
    6% {
        -webkit-transform: translate(5px, 0);
        -ms-transform: translate(5px, 0);
        transform: translate(5px, 0)
    }
    12% {
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0)
    }
    18% {
        -webkit-transform: translate(5px, 0);
        -ms-transform: translate(5px, 0);
        transform: translate(5px, 0)
    }
    24% {
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0)
    }
    30% {
        -webkit-transform: translate(5px, 0);
        -ms-transform: translate(5px, 0);
        transform: translate(5px, 0)
    }
    100%,
    36% {
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}

@media screen and (min-width: 680px) {

	.example {
		float: left;
	}

	.example:nth-child(2n+1) {
		clear: left;
	}
}

/**
 * Examples
8888888888                                     888                 
888                                            888                 
888                                            888                 
8888888   888  888 8888b. 88888b.d88b. 88888b. 888 .d88b. .d8888b  
888       `Y8bd8P'    "88b888 "888 "88b888 "88b888d8P  Y8b88K      
888         X88K  .d888888888  888  888888  88888888888888"Y8888b. 
888       .d8""8b.888  888888  888  888888 d88P888Y8b.         X88 
8888888888888  888"Y888888888  888  88888888P" 888 "Y8888  88888P' 
                                       888                         
                                       888                         
                                       888                         
**/

.sq-25 {
	position: absolute;
	left: 0; right: 0; top: 0;
	margin: auto;
	width: 60%;
	max-width: 300px;
}

.cube01 { width: 100%; padding-top: 100%; }
.cube01 > * { background: rgba(106, 98, 154, 0.8); }

.cube02 { width: 100%; padding-top: 100%; }
.cube02 > * { background: rgba(254, 157, 84, 0.8); }

.cube03 { width: 100%; padding-top: 100%; }
.cube03 > * { background: rgba(0, 165, 165, 0.8); }

.cube04 { width: 100%; padding-top: 100%; }
.cube04 > * { background: rgba(0, 165, 165, 1); }

.cube05 { width: 100%; padding-top: 100%; }
.cube05 > * { background: rgba(93, 175, 117, 1); }

.cube06 { width: 100%; padding-top: 100%; }
.cube06 > * { background: rgba(254, 157, 84, 1); }

/*
.cube04 { width: 120px; height: 120px; }
.cube04 > * { background-image: url(../images/brick.png); }

.cube05 { width: 120px; height: 120px; }
.cube05 > * { background: #f0f; }

.cube05 > .front { background: #ff0; }
.cube05 > .right { background-image: url(../images/brick.png); }

.cube06 { width: 120px; height: 120px; }
.cube06 > * { background-image: url(../images/brick.png); }
.cube06 > .front:after { background: rgba(0, 0, 255, 0.1); }
.cube06 > .back:after { background: rgba(0, 0, 255, 0.6); }
.cube06 > .left:after { background: rgba(0, 0, 255, 0.5); }
.cube06 > .right:after { background: rgba(0, 0, 255, 0.3); }
.cube06 > .top:after { background: rgba(0, 0, 255, 0.2); }
.cube06 > .bottom:after { background: rgba(0, 0, 255, 0.7); }

.cube07 { width: 150px; height: 150px; }
.cube07 > * { background-image: url(../images/texture.png); }

.cube08 { width: 150px; height: 150px; }
.cube08 > * {
	text-align: center;
	font-size: 100px;
	line-height: 150px;
	font-weight: bold;
	color: #000;
	background: transparent;
}

.cube09 { width: 150px; height: 150px; }
.cube09 > * { background-image: url(../images/texture.png); }

.cube10 { width: 150px; height: 150px; }
.cube10 > * {
	text-align: center;
	font-size: 100px;
	line-height: 150px;
	font-weight: bold;
	color: #000;
	background: transparent;
}

.cube11 { width: 150px; height: 150px; }
.cube11 > * { background-image: url(../images/texture.png); }

.cube12 { width: 150px; height: 150px; }
.cube12 > * {
	text-align: center;
	font-size: 100px;
	line-height: 150px;
	font-weight: bold;
	color: #000;
	background: transparent;
}

.cube13 {
	width: 150px; height: 150px;
	-webkit-transition: -webkit-transform 1500ms ease;
	-moz-transition: -moz-transform 1500ms ease;
	transition: transform 1500ms ease;
}

	.cube13:hover {
		-webkit-transform: rotateY(359deg);
		-moz-transform: rotateY(359deg);
		transform: rotateY(359deg);
	}

	.cube13 > * {
		text-align: center;
		font-size: 100px;
		line-height: 150px;
		font-weight: bold;
		color: #000;
		background: #ddc;
	}

.cube14 {
	width: 150px; height: 150px;
	-webkit-transition: -webkit-transform 1500ms ease;
	-moz-transition: -moz-transform 1500ms ease;
	transition: transform 1500ms ease;
}

	.cube14:hover {
		-webkit-transform: rotateX(359deg);
		-moz-transform: rotateX(359deg);
		transform: rotateX(359deg);
	}

	.cube14 > * {
		text-align: center;
		font-size: 100px;
		line-height: 150px;
		font-weight: bold;
		color: #000;
		background: #ddc;
	}
*/