/**
 * Quyết Nguyễn (Quyetdaik)
 * https://fb.com/nhquyet
 */


body {
      margin: 0;
	  padding: 0;
    }

    #container {
      width: 100%;
      -webkit-perspective: 1000;
      -webkit-perspective-origin: 50% 620px;
    }
    #stage {
      width: 100%;
      height: 100%;
      -webkit-transition: -webkit-transform 2s;
      -webkit-transform-style: preserve-3d;
    }
    
    #shape {
      position: relative;
      top: 200px;
      margin: 0 auto;
      height: 200px;
      width: 200px;
      -webkit-transform-style: preserve-3d;
    }
    
    .plane {
      position: absolute;
      height: 200px;
      width: 200px;
      border: 1px solid white;
      -webkit-border-radius: 12px;
      -webkit-box-sizing: border-box;
      text-align: center;
      font-family: Times, serif;
      font-size: 124pt;
      color: black;
      background-color: rgba(255, 255, 255, 0.6);
      -webkit-transition: -webkit-transform 2s, opacity 2s;
      -webkit-backface-visibility: hidden;
    }

    #shape.backfaces .plane {
      -webkit-backface-visibility: visible;
    }

    #shape {
      -webkit-animation: spin 8s infinite linear;
    }

    @-webkit-keyframes spin {
      from { -webkit-transform: rotateY(0); }
      to   { -webkit-transform: rotateY(360deg); }
    }
	
    .one {
		background-image: url(../img/1.jpg);
		background-size: 100% 100%;
		background-repeat: no-repeat;
    }

    .two {
		background-image: url(../img/2.jpg);
		background-size: 100% 100%;
		background-repeat: no-repeat;
    }

    .three {
		background-image: url(../img/3.jpg);
		background-size: 100% 100%;
		background-repeat: no-repeat;
    }

    .four {
		background-image: url(../img/4.jpg);
		background-size: 100% 100%;
		background-repeat: no-repeat;
    }

    .five {
		background-image: url(../img/5.jpg);
		background-size: 100% 100%;
		background-repeat: no-repeat;
    }

    .six {
		background-image: url(../img/6.jpg);
		background-size: 100% 100%;
		background-repeat: no-repeat;
    }

    .seven {
		background-image: url(../img/7.jpg);
		background-size: 100% 100%;
		background-repeat: no-repeat;
    }

    .eight {
		background-image: url(../img/8.jpg);
		background-size: 100% 100%;
		background-repeat: no-repeat;
    }

    .nine {
		background-image: url(../img/9.jpg);
		background-size: 100% 100%;
		background-repeat: no-repeat;
    }

    .ten {
		background-image: url(../img/10.jpg);
		background-size: 100% 100%;
		background-repeat: no-repeat;
    }

    .eleven {
		background-image: url(../img/11.jpg);
		background-size: 100% 100%;
		background-repeat: no-repeat;
    }

    .twelve {
		background-image: url(../img/12.jpg);
		background-size: 100% 100%;
		background-repeat: no-repeat;
    }

    #shape.cube > .one {
		opacity: 0.2;
		-webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(90deg) translateZ(100px);
    }

    #shape.cube > .two {
      opacity: 0.2;
      -webkit-transform: scale3d(1.2, 1.2, 1.2) translateZ(100px);
    }

    #shape.cube > .three {
      opacity: 0.2;
      -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(90deg) translateZ(100px);
    }

    #shape.cube > .four {
      opacity: 0.2;
      -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(180deg) translateZ(100px);
    }

    #shape.cube > .five {
      opacity: 0.2;
      -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(-90deg) translateZ(100px);
    }

    #shape.cube > .six {
      opacity: 0.2;
      -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(-90deg) translateZ(100px) rotate(180deg);
    }
	
	#shape:hover.cube > .one {
		opacity: 0.9;
		-webkit-transform: scale3d(1.5, 1.5, 1.5) rotateX(90deg) translateZ(130px);
    }

    #shape:hover.cube > .two {
      opacity: 0.9;
      -webkit-transform: scale3d(1.5, 1.5, 1.5) translateZ(150px);
    }

    #shape:hover.cube > .three {
      opacity: 0.9;
      -webkit-transform: scale3d(1.5, 1.5, 1.5) rotateY(90deg) translateZ(150px);
    }

    #shape:hover.cube > .four {
      opacity: 0.9;
      -webkit-transform: scale3d(1.5, 1.5, 1.5) rotateY(180deg) translateZ(150px);
    }

    #shape:hover.cube > .five {
      opacity: 0.9;
      -webkit-transform: scale3d(1.5, 1.5, 1.5) rotateY(-90deg) translateZ(150px);
    }

    #shape:hover.cube > .six {
      opacity: 0.9;
      -webkit-transform: scale3d(1.5, 1.5, 1.5) rotateX(-90deg) translateZ(130px) rotate(180deg);
    }


    #shape.cube > .seven {
      -webkit-transform: scale3d(0.8, 0.8, 0.8) rotateX(90deg) translateZ(100px) rotate(180deg);
    }

    #shape.cube > .eight {
      -webkit-transform: scale3d(0.8, 0.8, 0.8) translateZ(100px);
    }

    #shape.cube > .nine {
      -webkit-transform: scale3d(0.8, 0.8, 0.8) rotateY(90deg) translateZ(100px);
    }

    #shape.cube > .ten {
      -webkit-transform: scale3d(0.8, 0.8, 0.8) rotateY(180deg) translateZ(100px);
    }

    #shape.cube > .eleven {
      -webkit-transform: scale3d(0.8, 0.8, 0.8) rotateY(-90deg) translateZ(100px);
    }

    #shape.cube > .twelve {
      -webkit-transform: scale3d(0.8, 0.8, 0.8) rotateX(-90deg) translateZ(100px);
    }

    .ring > .one {
      -webkit-transform: translateZ(380px);
    }

    .ring > .two {
      -webkit-transform: rotateY(30deg) translateZ(380px);
    }

    .ring > .three {
      -webkit-transform: rotateY(60deg) translateZ(380px);
    }

    .ring > .four {
      -webkit-transform: rotateY(90deg) translateZ(380px);
    }

    .ring > .five {
      -webkit-transform: rotateY(120deg) translateZ(380px);
    }

    .ring > .six {
      -webkit-transform: rotateY(150deg) translateZ(380px);
    }

    .ring > .seven {
      -webkit-transform: rotateY(180deg) translateZ(380px);
    }

    .ring > .eight {
      -webkit-transform: rotateY(210deg) translateZ(380px);
    }

    .ring > .nine {
      -webkit-transform: rotateY(-120deg) translateZ(380px);
    }

    .ring > .ten {
      -webkit-transform: rotateY(-90deg) translateZ(380px);
    }

    .ring > .eleven {
      -webkit-transform: rotateY(300deg) translateZ(380px);
    }

    .ring > .twelve {
      -webkit-transform: rotateY(330deg) translateZ(380px);
    }

    .controls {
      padding: 5px;
    }
	
    .controls > div {
      margin: 10px;
    }
	
	.audio {
      position: absolute;
	  top: 15px;
      left: 15px;
      height: 30px;
      width: 300px;
    }

/* CSS Button Đổi Kiểu */
.classname {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
	background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
	background-color:#ededed;
	-webkit-border-top-left-radius:6px;
	-moz-border-radius-topleft:6px;
	border-top-left-radius:6px;
	-webkit-border-top-right-radius:6px;
	-moz-border-radius-topright:6px;
	border-top-right-radius:6px;
	-webkit-border-bottom-right-radius:6px;
	-moz-border-radius-bottomright:6px;
	border-bottom-right-radius:6px;
	-webkit-border-bottom-left-radius:6px;
	-moz-border-radius-bottomleft:6px;
	border-bottom-left-radius:6px;
	text-indent:0;
	border:1px solid #dcdcdc;
	display:inline-block;
	color:#777777;
	font-family:arial;
	font-size:15px;
	font-weight:bold;
	font-style:normal;
	height:50px;
	line-height:50px;
	width:100px;
	text-decoration:none;
	text-align:center;
	text-shadow:1px 1px 0px #ffffff;
}
.classname:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
	background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
	background-color:#dfdfdf;
}.classname:active {
	position:relative;
	top:1px;
}