.pic {
position:relative;
overflow:hidden;
display:inline-block;
animation:anima 2s;
-webkit-animation:anima 2s;
-moz-animation:anima 2s;
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
margin:2px;
}

.pic-3d {
-webkit-perspective:500;
-webkit-transform-style:preserve-3d;
}

.pic-caption {
position:absolute;
width:100%;
height:100%;
background-color: rgba(17,22,29,0.8);
text-align:center;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=($opacity * 100))";
filter:alpha(opacity=0);
-moz-opacity:0;
-khtml-opacity:0;
opacity:0;
padding: 100px 20px 20px 20px;
}

.pic-image {
-webkit-transform:scale(1.1);
transform:scale(1.1);
}

.pic:hover .pic-image {
-webkit-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,.pic-text {
-webkit-transition:all .5s ease;
-moz-transition:all .5s ease;
-o-transition:all .5s ease;
transition:all .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;
}

.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 {
transform:rotate(90deg) scale(0.1);
-webkit-transform:rotate(90deg) scale(0.1);
top:0;
left:0;
}

.rotate-out {
transform:rotate(90deg) scale(3);
-webkit-transform:rotate(90deg) scale(3);
top:0;
left:0;
}

.open-down {
transform:rotateX(-180deg);
-webkit-transform:rotateX(-180deg);
top:0;
left:0;
}

.open-up {
transform:rotateX(180deg);
-webkit-transform:rotateX(180deg);
top:0;
left:0;
}

.open-left {
transform:rotateY(180deg);
-webkit-transform:rotateY(180deg);
left:0;
top:0;
}

.open-right {
transform:rotateY(-180deg);
-webkit-transform:rotateY(-180deg);
left:0;
top:0;
}

.come-left {
transform:rotateY(90deg) rotateX(90deg);
-webkit-transform:rotateY(90deg) rotateX(90deg);
left:0;
top:0;
}

.come-right {
transform:rotateY(-90deg) rotateX(-90deg);
-webkit-transform:rotateY(-90deg) rotateX(-90deg);
left:0;
top:0;
}

.pic:hover .rotate-in,.pic:hover .rotate-out {
transform:rotate(360deg) scale(1);
-webkit-transform:rotate(360deg) scale(1);
}

.pic:hover .open-down,.pic:hover .open-up {
transform:rotateX(0);
-webkit-transform:rotateX(0);
}

.pic:hover .open-left,.pic:hover .open-right {
transform:rotateY(0deg);
-webkit-transform:rotateY(0deg);
}

.pic:hover .come-left,.pic:hover .come-right {
transform:rotateY(0) rotateX(0);
-webkit-transform:rotateY(0) rotateX(0);
}

@media screen and max-width 560px{
.wrapper {
padding:20px;
}

.pic {
max-width:400px;
max-height:300px;
display:block;
animation:none;
margin:10px auto;
}
}

.pic .pic-title {
color: #FFFFFF;
font-size: 20px;
font-weight: 500;
}

.pic p {
color: #FFFFFF;
font-size: 14px;
}

.pic-text { position:absolute;
width:100%;
bottom: 0px;
font-size: 20px;
font-weight: 500;
color: #FFFFFF;
text-align: center;
background-color: rgba(17,22,29,0.8);
z-index: 100;
padding: 10px;
}

.pic:hover .pic-text {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=($opacity * 100))";
filter:alpha(opacity=0);
-moz-opacity:0;
-khtml-opacity:0;
opacity:0;
}