/*** normal CSS **/

.pocket {
    margin:0px auto;
    border: 1px solid red;
    width: 390px;
    height: 400px;
    background: #49afcd;
    padding: 10px;
}

/*** Define widget height and width CSS **/
.size {
    width:195px;
    height:133px;
    float: left;
}



#flip .item {
    position:relative;
    display:block;
    width:100%;
    height:100%;
    text-align:center;
    font-size:19.2px
}

#flip .item .nav-hover {
    content:'';
    display:block;
    position:absolute;
    width:100%;
    height:100%;
    top:-8px;
    left:-8px;
    border:8px solid rgba(255,255,255,0.5);
    opacity:0;
    z-index:1;
    -webkit-transition:.2s ease-in-out all;
    -moz-transition:.2s ease-in-out all;
    -o-transition:.2s ease-in-out all;
    transition:.2s ease-in-out all;
    -webkit-transform:scale(0.95);
    -moz-transform:scale(0.95);
    -ms-transform:scale(0.95);
    -o-transform:scale(0.95);
    transform:scale(0.95)
}
#flip .item:hover,#flip .item:active,#flip .item:focus {
    color:#fff;
    text-decoration:none
}
#flip .item:hover .nav-hover {
    opacity:1;
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -ms-transform:scale(1);
    -o-transform:scale(1);
    transform:scale(1)
}
#flip .item i {
    display:block;
    font-size:60px;
    padding-top:45px
}
#flip .item span {
    display:block;
    padding-top:10px
}
#flip .thumb {
    background:0;
    -webkit-perspective:800px;
    -moz-perspective:800px;
    -ms-perspective:800px;
    -o-perspective:800px;
    perspective:800px
}
#flip .thumb img {
    display:block;
    width:100%;
    height:100%;
    position:absolute
}
#flip .thumb .scroll {
    overflow:hidden
}
#flip .thumb .scroll .img2 {
    bottom:-195px
}
#flip .thumb .item {
    -webkit-transform-style:preserve-3d;
    -moz-transform-style:preserve-3d;
    -ms-transform-style:preserve-3d;
    transform-style:preserve-3d;
    -webkit-transition:transform 1s;
    -moz-transition:transform 1s;
    -o-transition:transform 1s;
    transition:transform 1s;
    -webkit-transition:-webkit-transform 1s
}
#flip .thumb .item img {
    -webkit-backface-visibility:hidden;
    -moz-backface-visibility:hidden;
    backface-visibility:hidden
}
#flip .thumb .item.flipX .img2 {
    -webkit-transform:rotateX(-180deg);
    -moz-transform:rotateX(-180deg);
    -ms-transform:rotateX(-180deg);
    -o-transform:rotateX(-180deg);
    transform:rotateX(-180deg)
}
#flip .thumb .item.flipY .img2 {
    -webkit-transform:rotateY(-180deg);
    -moz-transform:rotateY(-180deg);
    -ms-transform:rotateY(-180deg);
    -o-transform:rotateY(-180deg);
    transform:rotateY(-180deg)
}
#flip .thumb.active .flipX {
    -webkit-transform:rotateX(-180deg);
    -moz-transform:rotateX(-180deg);
    -ms-transform:rotateX(-180deg);
    -o-transform:rotateX(-180deg);
    transform:rotateX(-180deg)
}
#flip .thumb.active .flipY {
    -webkit-transform:rotateY(-180deg);
    -moz-transform:rotateY(-180deg);
    -ms-transform:rotateY(-180deg);
    -o-transform:rotateY(-180deg);
    transform:rotateY(-180deg)
}
#flip .thumb .nav-hover {
    display:none
}