.mask_bg_color {
    background-color:chocolate;
    background-image: linear-gradient(to right, rgba(0,0,0,0.3) , rgba(0,0,0,0.7) , rgba(0,0,0,0.3)) , url(../img/office-time.webp);
}
#designBg {
    width: 100%;
    height: 700px;
    perspective: 800; /* For compatibility with iPhone 3.0, we leave off the units here */
    -webkit-perspective: 800; /* For compatibility with iPhone 3.0, we leave off the units here */
    perspective-origin: 50% 225px;
    -webkit-perspective-origin: 50% 225px;
    opacity: 0.33;
}
@media (max-width: 479px) {
	#designBg {
        zoom: 33%;
    }
}
@media (min-width: 480px) and (max-width: 767px) {
	#designBg {
        zoom: 45%;
    }
}
@media (min-width: 768px) and (max-width: 1199px) {
	#designBg {
        zoom: 60%;
    }
}
@media (min-width: 1200px) {
	#designBg {
        zoom: 75%;
    }
}
#stage {
    width: 100%;
    height: 100%;
    transition: -webkit-transform 2s;
    -webkit-transition: -webkit-transform 2s;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}
  
#shape {
    position: relative;
    top: 160px;
    margin: 0 auto;
    height: 200px;
    width: 200px;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}
  
.plane {
    position: absolute;
    height: 200px;
    width: 200px;
    border: 1px solid white;
     border-radius: 12px;
    -webkit-border-radius: 12px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    text-align: center;
    font-family: Times, serif;
    padding-top: 15px;
    font-size: 45px;
    color: black;
    background-color: rgba(255, 255, 255, 0.6);
    transition: -webkit-transform 2s, opacity 2s;
    -webkit-transition: -webkit-transform 2s, opacity 2s;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
 
#shape.backfaces .plane {
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
}
  
#shape {
    animation: spin 12s infinite linear;
    -webkit-animation: spin 12s infinite linear;
}
 
@keyframes spin {
    from { -webkit-transform: rotateY(0); }
    to   { -webkit-transform: rotateY(-360deg); }
}
 
@-webkit-keyframes spin {
    from { -webkit-transform: rotateY(0); }
    to   { -webkit-transform: rotateY(-360deg); }
}
 
/* ---------- ring styles ------------- */
.ring > .one {
    transform: translateZ(380px);
    -webkit-transform: translateZ(380px);
}

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

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

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

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

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

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

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

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

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

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

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