body {
    margin:0;
    padding:0;
}

#adArea {
background: #ffffff;
overflow: hidden;
text-overflow: clip;
cursor:pointer;
}

.pic1{
width:300px;
height:250px;
}

.pic2{
width:300px;
height:250px;
}

.pic3{
width:300px;
height:250px;
}





.wrap {
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
position: absolute;
  -webkit-perspective: 600px;
      -ms-perspective: 600px;
perspective: 600px;
perspective-origin: 50% 50%;
  -webkit-perspective-origin: 50% 50%;
      -ms-perspective-origin: 50% 50%;
}

.cube {
position: relative;
width: 300px;
height: 250px;
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
transform-origin: 50% 50%;
  -webkit-perspective-origin: 50% 50%;
      -ms-perspective-origin: 50% 50%;
transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);

-webkit-transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
  -ms-transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
}
.f00 {
transform: rotateY(-90deg);
-webkit-transform: rotateY(-90deg);
  -ms-transform: rotateY(-90deg);
/*transform-origin: center left;*/
}

.f1 {
transform: rotateY(-90deg) translateX(-150px);
  -webkit-transform: rotateY(-90deg) translateX(-150px);
      -ms-transform: rotateY(-90deg) translateX(-150px);

transform-origin: center left;
-webkit-transform-origin: center left;
    -ms-transform-origin: center left;
}
.f2 {
transform: translateZ(150px);
-webkit-transform: translateZ(150px);
  -ms-transform: translateZ(150px);
}
.f3 {
transform: rotateY(90deg) translateX(150px);
-webkit-transform: rotateY(90deg) translateX(150px);
  -ms-transform: rotateY(90deg) translateX(150px);

transform-origin: center right;
  -webkit-transform-origin: center right;
      -ms-transform-origin: center right;
}
.f4 {
transform: translateZ(-150px) rotateY(180deg);
-webkit-transform: translateZ(-150px) rotateY(180deg);
  -ms-transform: translateZ(-150px) rotateY(180deg);
}
.f5 {
transform: rotateX(90deg) translateZ(-100px);
-webkit-transform: rotateX(90deg) translateZ(-100px);
  -ms-transform: rotateX(90deg) translateZ(-100px);
}
.f6 {
transform: rotateX(90deg) translateZ(150px);
-webkit-transform: rotateX(90deg) translateZ(150px);
  -ms-transform: rotateX(90deg) translateZ(150px);
}

.f7 {
transform: rotateX(90deg) translateZ(-60px);
-webkit-transform: rotateX(90deg) translateZ(-60px);
  -ms-transform: rotateX(90deg) translateZ(-60px);
}


.ff1 {
transform: rotateY(-90deg) translateX(-150px) translateZ(-1px);
-webkit-transform: rotateY(-90deg) translateX(-150px) translateZ(-1px);
  -ms-transform: rotateY(-90deg) translateX(-150px) translateZ(-1px);

transform-origin: center left;
  -webkit-transform-origin: center left;
      -ms-transform-origin: center left;
}
.ff2 {
transform: translateZ(148px);
-webkit-transform: translateZ(148px);
  -ms-transform: translateZ(148px);
}
.ff3 {
transform: rotateY(90deg) translateX(150px) translateZ(-1px);
-webkit-transform: rotateY(90deg) translateX(150px) translateZ(-1px);
  -ms-transform: rotateY(90deg) translateX(150px) translateZ(-1px);

transform-origin: center right 1px;
  -webkit-transform-origin: center right 1px;
      -ms-transform-origin: center right 1px;
}
.ff4 {
transform: translateZ(-148px) rotateY(180deg);
-webkit-transform: translateZ(-148px) rotateY(180deg);
  -ms-transform: translateZ(-148px) rotateY(180deg);
}

.face {
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;

  -webkit-perspective: 800px;
      -ms-perspective: 800px;
perspective: 800px;

perspective-origin: 50% 100px;
  -webkit-perspective-origin: 50% 100px;
      -ms-perspective-origin: 50% 100px;
}

#dragArea {
background-color: red;
opacity: 0.0;
}


.dragEl {
position: absolute;
width: 86px;
height: 86px;
}

.rct {
width:300px;
height:250px;
position: absolute;
}

.scale0 {
-ms-transform: scale(0); /* IE 9 */
-webkit-transform: scale(0); /* Safari */
transform: scale(0);
}

.opacity0 { opacity: 0; }
.opacity1 { opacity: 1; }

.zIndex2400{ z-index: 2400 !important; }
.zIndex2600 { z-index: 2600 !important; }
.zIndex3000 { z-index: 3000 !important; }
.zIndex4000 { z-index: 4000 !important; }
.zIndex5000 { z-index: 5000 !important; }

.posAbs{
position: absolute;
}
.noVis{
visibility: hidden;
}
.noEvents{
pointer-events: none;
}
.noDisplay{
display: none;
}