body, .background {width: 300px; height: 600px; margin: 0px;}
#mainContainer {position: absolute; width: 300px; height: 600px; overflow: hidden; background-color: #fff;}
.animObj {position: absolute;}
.start-invis, #btn-main{visibility: hidden;}
.st0{clip-path:url(#mask-5_1_);fill:#FFFFFF;}
.st1{clip-path:url(#mask-4_1_);fill:#FFFFFF;}
.st2{clip-path:url(#mask-3_1_);fill:#FFFFFF;}
.st3{clip-path:url(#mask-2_1_);fill:#FFFFFF;}
.st4{clip-path:url(#mask-1_1_);fill:#FFFFFF;}
.st5{fill:#00AEEF;}
.st6{fill:#FFFFFF;}
.no-pe{pointer-events: none}
.panel {
  transform-origin: 150px 300px;
  transform-style: preserve-3d;
  transform: rotateX(0deg) rotateY(0deg);
  perspective: 0px;
}
.cs{width:1082px; height: 371px; }
#logo-panel{height: 94px; overflow: hidden}
#front-top-panel, #back-top-panel{height: 225px; overflow: hidden}
#front-middle-panel, #back-middle-panel{height: 175px; overflow: hidden}
#front-bottom-panel, #back-bottom-panel{height: 106px; overflow: hidden}


#front-left, #back-left{width: 369px; height: 600px; overflow: hidden; }
#front-right, #back-right{overflow: hidden; }
.side, .set-WH { width: 300px; height: 600px; }
.shadow {background-color: rgba(4,23,36,1);width: 300px; height: 600px;mix-blend-mode: multiply;}
/*.front  { transform:                  translateZ(150px); }
.top    { transform: rotateX( 90deg)  translateZ(150px); }
.right  { transform: rotateY( 90deg)  translateZ(150px); }
.left   { transform: rotateY(-90deg)  translateZ(150px); }
.bottom { transform: rotateX(-90deg)  translateZ(150px); }
.back   { transform: rotateY(-180deg) translateZ(150px); }*/