
@keyframes anima{from{margin-top:-50px;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=($opacity * 100))";
filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0}
to{margin:auto;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=($opacity * 100))"
;filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1}}

@-webkit-keyframes anima{from{margin-left:-20px;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=($opacity * 100))";filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0}to{margin-left:10px;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=($opacity * 100))";filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1}}@media screen and (max-width: 560px){.wrapper{padding:20px}}

.pic{max-width:190px;max-height:190px;position:relative;overflow:hidden;display:inline-block;
-webkit-animation:anima 2s;-moz-animation:anima 2s;-o-animation:anima 2s;-ms-animation:anima 2s;animation:anima 2s;
-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-o-backface-visibility:hidden;
-ms-backface-visibility:hidden;backface-visibility:hidden}
.pic-3d{-webkit-perspective:500;-moz-perspective:500;-o-perspective:500;-ms-perspective:500;perspective:500;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-o-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transform-style:preserve-3d}
.pic-caption{cursor:default;position:absolute;width:100%;height:100%;background:rgba(44,62,80,0.92);padding:0px;text-align:center;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=($opacity * 100))";filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0}.pic-image{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}.pic:hover .pic-image{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.pic-title{font-size:1.8em}a,a:hover,.pic .pic-image,.pic-caption,.pic:hover .pic-caption,.pic:hover img{-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-o-transition:all 0.5s ease;-ms-transition:all 0.5s ease;transition:all 0.5s ease}.pic:hover .bottom-to-top,.pic:hover .top-to-bottom,.pic:hover .left-to-right,.pic:hover .right-to-left,.pic:hover .rotate-in,.pic:hover .rotate-out,.pic:hover .open-up,.pic:hover .open-down,.pic:hover .open-left,.pic:hover .open-right,.pic:hover .come-left,.pic:hover .come-right{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=($opacity * 100))";filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;-webkit-user-select:none;-moz-user-select:none;-o-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-moz-touch-callout:none;-o-touch-callout:none;-ms-touch-callout:none;touch-callout:none;-webkit-tap-highlight-color:transparent;-moz-tap-highlight-color:transparent;-o-tap-highlight-color:transparent;-ms-tap-highlight-color:transparent;tap-highlight-color:transparent}.bottom-to-top{top:50%;left:0}.pic:hover .bottom-to-top{top:0;left:0}.top-to-bottom{bottom:50%;left:0}.pic:hover .top-to-bottom{left:0;bottom:0}.left-to-right{top:0;right:50%}.pic:hover .left-to-right{right:0;top:0}.right-to-left{top:0;left:50%}.pic:hover .right-to-left{left:0;top:0}.rotate-in{-webkit-transform:rotate(90deg) scale(0.1);-moz-transform:rotate(90deg) scale(0.1);-o-transform:rotate(90deg) scale(0.1);-ms-transform:rotate(90deg) scale(0.1);transform:rotate(90deg) scale(0.1);top:0;left:0}
.pic:hover .rotate-in{-webkit-transform:rotate(360deg) scale(1);-moz-transform:rotate(360deg) scale(1);-o-transform:rotate(360deg) scale(1);-ms-transform:rotate(360deg) scale(1);transform:rotate(360deg) scale(1)}.rotate-out{-webkit-transform:rotate(90deg) scale(3);-moz-transform:rotate(90deg) scale(3);-o-transform:rotate(90deg) scale(3);-ms-transform:rotate(90deg) scale(3);transform:rotate(90deg) scale(3);top:0;left:0}.pic:hover .rotate-out{-webkit-transform:rotate(360deg) scale(1);-moz-transform:rotate(360deg) scale(1);-o-transform:rotate(360deg) scale(1);-ms-transform:rotate(360deg) scale(1);transform:rotate(360deg) scale(1)}.open-down{-webkit-transform:rotateX(-180deg);-moz-transform:rotateX(-180deg);-o-transform:rotateX(-180deg);-ms-transform:rotateX(-180deg);transform:rotateX(-180deg);top:0;left:0}.pic:hover .open-down{-webkit-transform:rotateX(0);-moz-transform:rotateX(0);-o-transform:rotateX(0);-ms-transform:rotateX(0);transform:rotateX(0)}.open-up{-webkit-transform:rotateX(180deg);-moz-transform:rotateX(180deg);-o-transform:rotateX(180deg);-ms-transform:rotateX(180deg);transform:rotateX(180deg);top:0;left:0}.pic:hover .open-up{-webkit-transform:rotateX(0);-moz-transform:rotateX(0);-o-transform:rotateX(0);-ms-transform:rotateX(0);transform:rotateX(0)}.open-left{-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-o-transform:rotateY(180deg);-ms-transform:rotateY(180deg);transform:rotateY(180deg);left:0;top:0}.pic:hover .open-left{-webkit-transform:rotateY(0deg);-moz-transform:rotateY(0deg);-o-transform:rotateY(0deg);-ms-transform:rotateY(0deg);transform:rotateY(0deg)}.open-right{-webkit-transform:rotateY(-180deg);-moz-transform:rotateY(-180deg);-o-transform:rotateY(-180deg);-ms-transform:rotateY(-180deg);transform:rotateY(-180deg);left:0;top:0}.pic:hover .open-right{-webkit-transform:rotateY(0deg);-moz-transform:rotateY(0deg);-o-transform:rotateY(0deg);-ms-transform:rotateY(0deg);transform:rotateY(0deg)}.come-left{-webkit-transform:rotateY(90deg) rotateX(90deg);-moz-transform:rotateY(90deg) rotateX(90deg);-o-transform:rotateY(90deg) rotateX(90deg);-ms-transform:rotateY(90deg) rotateX(90deg);transform:rotateY(90deg) rotateX(90deg);left:0;top:0}.pic:hover .come-left{-webkit-transform:rotateY(0) rotateX(0);-moz-transform:rotateY(0) rotateX(0);-o-transform:rotateY(0) rotateX(0);-ms-transform:rotateY(0) rotateX(0);transform:rotateY(0) rotateX(0)}.come-right{-webkit-transform:rotateY(-90deg) rotateX(-90deg);-moz-transform:rotateY(-90deg) rotateX(-90deg);-o-transform:rotateY(-90deg) rotateX(-90deg);-ms-transform:rotateY(-90deg) rotateX(-90deg);transform:rotateY(-90deg) rotateX(-90deg);left:0;top:0}.pic:hover .come-right{-webkit-transform:rotateY(0) rotateX(0);-moz-transform:rotateY(0) rotateX(0);-o-transform:rotateY(0) rotateX(0);-ms-transform:rotateY(0) rotateX(0);transform:rotateY(0) rotateX(0)}@media screen and (max-width: 560px){.pic{max-width:400px;max-height:300px;display:block;-webkit-animation:none;-moz-animation:none;-o-animation:none;-ms-animation:none;animation:none;margin:10px auto}}
