@charset "utf-8";

/* CSS Document */
.data2{width:100%; display:table; position:relative; overflow:hidden;}
.data2 .pic2{
    position:absolute;
    top:0;
    left:0;
    z-index:-1;
}
.data2 .image_container a{
	width:100%;height:100%; display:block;
    float:left;
    -webkit-perspective: 600px;
    -moz-perspective: 600px;
}

.data2 .image_container a .pic1{
    -webkit-transform: rotateX(0deg) rotateY(0deg);
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-transform: rotateX(0deg) rotateY(0deg);
    -moz-transform-style: preserve-3d;
    -moz-backface-visibility: hidden;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

.data2 .image_container a:hover .pic1{
    -webkit-transform:rotateY(180deg);
    -moz-transform:rotateY(180deg);
}

.data2 .image_container a .pic2{
    -webkit-transform: rotateY(-180deg);
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-transform: rotateY(-180deg);
    -moz-transform-style: preserve-3d;
    -moz-backface-visibility: hidden;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;/*z-index:10;
    position:absolute;*/
}

.data2 .image_container a:hover .pic2{
    -webkit-transform:rotateX(0deg) rotateY(0deg);
    -moz-transform:rotateX(0deg) rotate(0deg);
    z-index: 10;
    position: absolute;
}

.data2 .row{width:160px;height:100px; float:left; margin-left:0px; margin-right:0px; margin-bottom:0px; position:relative; z-index:10;}
.data2 .row .pic1{width:100%;height:100%; overflow:hidden;}
.data2 .row .pic2{width:100%;height:100%;overflow:hidden;    margin-left: 34px;}
.data2 .row .pic2 img{position:absolute;}