@charset "UTF-8";

.scene {
  width: 250px;
  height: 250px;
  border: 0px solid #CCC;
  margin-top: 80px;
  perspective: 400px;
  display:inline-block;
  position:relative;
}

.radio-group{display:none;}

.cube__face--front,
.cube__face--back,
.cube__face--top,
.cube__face--right,
.cube__face--left,
.cube__face--bottom{-webkit-transition-duration: 0.7s; /* Safari */ transition-duration: 0.7s; opacity:0;}



/* cube 1 */
.cube { width: 250px; height: 250px; position: absolute; transform-style: preserve-3d; transform: translateZ(-250px); transition: transform 0.8s;}

.cube.show-front  { transform: translateZ(-135px) rotateY(   0deg);} .cube.show-right  { transform: translateZ(-135px) rotateY( -90deg); }
.cube.show-back   { transform: translateZ(-135px) rotateY(-180deg); } .cube.show-left   { transform: translateZ(-135px) rotateY(  90deg); }
.cube.show-top    { transform: translateZ(-135px) rotateX( -90deg); } .cube.show-bottom { transform: translateZ(-135px) rotateX(  90deg); }

.cube__face { position: absolute; width: 250px; height: 250px; border: 0px solid black; line-height: 250px; font-size: 40px; font-weight: bold; color: white; text-align: center; }

.cube__face--front  { background:url(images/f_0.png) top left no-repeat; background-size:100% 100%; } .cube__face--right  { background:url(images/o_0.png) top left no-repeat; background-size:100% 100%; }
.cube__face--back   { background:url(images/r_0.png) top left no-repeat; background-size:100% 100%; } .cube__face--left   { background:url(images/m_0.png) top left no-repeat; background-size:100% 100%; }
.cube__face--top    { background:url(images/u_0.png) top left no-repeat; background-size:100% 100%; } .cube__face--bottom { background:url(images/l_0.png) top left no-repeat; background-size:100% 100%; }

.cube__face--front  { transform: rotateY(  0deg) translateZ(125px); } .cube__face--right  { transform: rotateY( 90deg) translateZ(125px); }
.cube__face--back   { transform: rotateY(180deg) translateZ(125px); } .cube__face--left   { transform: rotateY(-90deg) translateZ(125px); }
.cube__face--top    { transform: rotateX( 90deg) translateZ(125px); } .cube__face--bottom { transform: rotateX(-90deg) translateZ(125px); }

.hidex{opacity:0;}
.showx{opacity:1!important;}

/* cube 2 */

.cube2 { width: 250px; height: 250px; position: absolute; transform-style: preserve-3d; transform: translateZ(-250px); transition: transform 0.8s; }

.cube2.show-front  { transform: translateZ(-185px) rotateY(   0deg); } .cube2.show-right  { transform: translateZ(-175px) rotateY( -90deg); }
.cube2.show-back   { transform: translateZ(-180px) rotateY(-180deg); } .cube2.show-left   { transform: translateZ(-175px) rotateY(  90deg); }
.cube2.show-top    { transform: translateZ(-175px) rotateX( -90deg); } .cube2.show-bottom { transform: translateZ(-175px) rotateX(  90deg); }

.cube2 .cube__face { position: absolute; width: 250px; height: 250px; border: 0px solid black; line-height: 250px; font-size: 40px; font-weight: bold; color: white; text-align: center; }

.cube2 .cube__face--front  { background:url(images/f_1.png) top left no-repeat; background-size:100% 100%; } .cube2 .cube__face--right  { background:url(images/o_1.png) top left no-repeat; background-size:100% 100%; }
.cube2 .cube__face--back   { background:url(images/r_1.png) top left no-repeat; background-size:100% 100%; } .cube2 .cube__face--left   { background:url(images/m_1.png) top left no-repeat; background-size:100% 100%; }
.cube2 .cube__face--top    { background:url(images/u_1.png) top left no-repeat; background-size:100% 100%; } .cube2 .cube__face--bottom { background:url(images/l_1.png) top left no-repeat; background-size:100% 100%; }

.cube2 .cube__face--front  { transform: rotateY(  0deg) translateZ(175px); } .cube2 .cube__face--right  { transform: rotateY( 90deg) translateZ(175px); }
.cube2 .cube__face--back   { transform: rotateY(180deg) translateZ(175px); } .cube2 .cube__face--left   { transform: rotateY(-90deg) translateZ(175px); }
.cube2 .cube__face--top    { transform: rotateX( 90deg) translateZ(175px); } .cube2 .cube__face--bottom { transform: rotateX(-90deg) translateZ(175px); }


/* cube 3 */

.cube3 { width: 250px; height: 250px; position: absolute; transform-style: preserve-3d; transform: translateZ(-250px); transition: transform 0.8s; z-index:4;}

.cube3.show-front  { transform: translateZ(-225px) rotateY(   0deg); } .cube3.show-right  { transform: translateZ(-225px) rotateY( -90deg); }
.cube3.show-back   { transform: translateZ(-225px) rotateY(-180deg); } .cube3.show-left   { transform: translateZ(-220px) rotateY(  90deg); }
.cube3.show-top    { transform: translateZ(-220px) rotateX( -90deg); } .cube3.show-bottom { transform: translateZ(-225px) rotateX(  90deg); }

.cube3 .cube__face { position: absolute; width: 250px; height: 250px; border: 0px solid black; line-height: 250px; font-size: 40px; font-weight: bold; color: white; text-align: center; }

.cube3 .cube__face--front  { background:url(images/f_2.png) top left no-repeat; background-size:100% 100%; } .cube3 .cube__face--right  { background:url(images/o_2.png) top left no-repeat; background-size:100% 100%; }
.cube3 .cube__face--back   { background:url(images/r_2.png) top left no-repeat; background-size:100% 100%; } .cube3 .cube__face--left   { background:url(images/m_2.png) top left no-repeat; background-size:100% 100%; }
.cube3 .cube__face--top    { background:url(images/u_2.png) top left no-repeat; background-size:100% 100%; } .cube3 .cube__face--bottom { background:url(images/l_2.png) top left no-repeat; background-size:100% 100%; }

.cube3 .cube__face--front  { transform: rotateY(  0deg) translateZ(225px); } .cube3 .cube__face--right  { transform: rotateY( 90deg) translateZ(225px); }
.cube3 .cube__face--back   { transform: rotateY(180deg) translateZ(225px); } .cube3 .cube__face--left   { transform: rotateY(-90deg) translateZ(225px); }
.cube3 .cube__face--top    { transform: rotateX( 90deg) translateZ(225px); } .cube3 .cube__face--bottom { transform: rotateX(-90deg) translateZ(225px); }


/* LOGO ANIMATION */

.mclayer{position:absolute; top:0px; left:0px; width:100%; height:100%; overflow:hidden;}

.layer_logo{z-index:1;}
.layer_logo .lv1{position:absolute; top:25%; left:0px; width:100%; text-align: center;}
.layer_logo .logobox{width:400px; height:400px; display:inline-block; text-align:center; position:relative; overflow:hidden; left: -15px;}

.layer_logo .logobox .no8{position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:10; display:none; padding:5% 0%; background-color:#fff;}
.layer_logo .logobox .no8 img{width:350px; margin:0 auto; -ms-transform: scale(2, 2); -webkit-transform: scale(2, 2); transform: scale(2, 2); opacity:0; -webkit-transition-duration: 0.7s; transition-duration: 0.7s;}
.layer_logo .logobox .no8 img.isin{-ms-transform: scale(1,1); -webkit-transform: scale(1,1); transform: scale(1,1); opacity:1;}

.layer_logo .logobox .logointro{position:absolute; background-color:#fff; top:0px; left:0px; width:100%; height:100%; z-index:15; padding:15% 0%; padding-bottom:10%}
.layer_logo .logobox .logointro img{width:250px; margin:0 auto; }

.layer_logo .logobtn{display:block; width:100%; height:100%; position:absolute; top:0px; left:0px; z-index:25;}