body {
      background-image: url(bg/1.jpg);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center top;
      -webkit-transition: 3s;
      margin: 0;
      padding: 0;
      overflow-x: hidden;
    }
	
	audio {
		max-width: 100%;
		max-height: 30px;
		vertical-align: middle;
	}

    #container {
      width: 100%;
	  height: calc(100vh - 55px);
      -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;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .cube > .twelve, .autoLoad > .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);
    }

    .panel {
      margin: 10px 5px;
	  padding: 5px 10px;
    }
	
	.audio {
      float: left;
	  height: 30px;
	  width: 100%;
	  max-width: 300px;
    }
	
	.author {
      float: right;
	  height: 30px;
	}
	
	.author button {
      background-color: #f5f5f5;
      height: 28px;
	  padding-left: 10px;
	  padding-right: 10px;
	  vertical-align: middle;
	  -webkit-border-radius: 15px;
      -webkit-box-sizing: border-box;
	  border: 1px solid #fff;
	}
	
	.author button:hover {
		background-color: #0088ff;
		color: #fff;
		border-color: #005599;
		cursor: pointer;
	}
	
	.clear {
		clear: both;
		margin: 0;
		padding: 0;
	}

    @media (max-width: 600px) {
      #container {
        height: calc(100vh - 60px);
        -webkit-perspective: 600;
        -webkit-perspective-origin: 50% 50%;
      }

      #shape {
        top: 120px;
        width: 140px;
        height: 140px;
      }

      .plane {
        width: 140px;
        height: 140px;
        font-size: 80pt;
      }

      /* Scale cube planes on mobile */
      .cube > .one   { -webkit-transform: scale3d(1.2,1.2,1.2) rotateX(90deg)  translateZ(70px); }
      .cube > .two   { -webkit-transform: scale3d(1.2,1.2,1.2)                 translateZ(70px); }
      .cube > .three { -webkit-transform: scale3d(1.2,1.2,1.2) rotateY(90deg)  translateZ(70px); }
      .cube > .four  { -webkit-transform: scale3d(1.2,1.2,1.2) rotateY(180deg) translateZ(70px); }
      .cube > .five  { -webkit-transform: scale3d(1.2,1.2,1.2) rotateY(-90deg) translateZ(70px); }
      .cube > .six   { -webkit-transform: scale3d(1.2,1.2,1.2) rotateX(-90deg) translateZ(70px) rotate(180deg); }

      #shape:hover.cube > .one,  .autoLoad > .one   { -webkit-transform: scale3d(1.5,1.5,1.5) rotateX(90deg)  translateZ(90px); }
      #shape:hover.cube > .two,  .autoLoad > .two   { -webkit-transform: scale3d(1.5,1.5,1.5)                 translateZ(105px); }
      #shape:hover.cube > .three,.autoLoad > .three { -webkit-transform: scale3d(1.5,1.5,1.5) rotateY(90deg)  translateZ(105px); }
      #shape:hover.cube > .four, .autoLoad > .four  { -webkit-transform: scale3d(1.5,1.5,1.5) rotateY(180deg) translateZ(105px); }
      #shape:hover.cube > .five, .autoLoad > .five  { -webkit-transform: scale3d(1.5,1.5,1.5) rotateY(-90deg) translateZ(105px); }
      #shape:hover.cube > .six,  .autoLoad > .six   { -webkit-transform: scale3d(1.5,1.5,1.5) rotateX(-90deg) translateZ(90px) rotate(180deg); }

      .cube > .seven,  .autoLoad > .seven  { -webkit-transform: scale3d(0.8,0.8,0.8) rotateX(90deg)  translateZ(70px) rotate(180deg); }
      .cube > .eight,  .autoLoad > .eight  { -webkit-transform: scale3d(0.8,0.8,0.8)                 translateZ(70px); }
      .cube > .nine,   .autoLoad > .nine   { -webkit-transform: scale3d(0.8,0.8,0.8) rotateY(90deg)  translateZ(70px); }
      .cube > .ten,    .autoLoad > .ten    { -webkit-transform: scale3d(0.8,0.8,0.8) rotateY(180deg) translateZ(70px); }
      .cube > .eleven, .autoLoad > .eleven { -webkit-transform: scale3d(0.8,0.8,0.8) rotateY(-90deg) translateZ(70px); }
      .cube > .twelve, .autoLoad > .twelve { -webkit-transform: scale3d(0.8,0.8,0.8) rotateX(-90deg) translateZ(70px); }

      /* Ring scale on mobile */
      .ring > .one   { -webkit-transform: translateZ(220px); }
      .ring > .two   { -webkit-transform: rotateY(30deg)  translateZ(220px); }
      .ring > .three { -webkit-transform: rotateY(60deg)  translateZ(220px); }
      .ring > .four  { -webkit-transform: rotateY(90deg)  translateZ(220px); }
      .ring > .five  { -webkit-transform: rotateY(120deg) translateZ(220px); }
      .ring > .six   { -webkit-transform: rotateY(150deg) translateZ(220px); }
      .ring > .seven { -webkit-transform: rotateY(180deg) translateZ(220px); }
      .ring > .eight { -webkit-transform: rotateY(210deg) translateZ(220px); }
      .ring > .nine  { -webkit-transform: rotateY(-120deg) translateZ(220px); }
      .ring > .ten   { -webkit-transform: rotateY(-90deg) translateZ(220px); }
      .ring > .eleven{ -webkit-transform: rotateY(300deg) translateZ(220px); }
      .ring > .twelve{ -webkit-transform: rotateY(330deg) translateZ(220px); }

      .panel {
        margin: 6px 4px;
        padding: 4px 8px;
      }

      .audio {
        float: none;
        width: 100%;
        max-width: 100%;
      }

      .overlay-content p {
        font-size: 15px;
      }

      .music-icon {
        font-size: 48px;
      }
    }