@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 { border: 1px solid #d0d0d0; text-align: center; max-width: 190px; height: 140px; position: relative; overflow: hidden; margin: 10px; 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 > div { min-height: 50px; width: 100%; margin: 5px auto;font-size: 0.8em; }
 .pic > span * { font-size: 0.8em; color: #fff; }
 .pic i { font-size: 3em; float: none; text-decoration: none; }

.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; left: 0; right: 0; margin-right: auto; margin-left: auto; width: auto; height: 100%; background: rgba(44,62,80,0.92); padding: 10px; 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: 0.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; }
}