.pic
{
    max-width: 95%;
    max-height: 95%;
    position: relative;
    overflow: hidden;
    margin: 10px;
    display: inline-block;
    animation: anima 2s;
    -webkit-animation: anima 2s;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    color: #FFFFFF;
}
.pic-3d
{
    -webkit-perspective: 500;
    -webkit-transform-style: preserve-3d;
}
.pic-caption
{
    cursor: pointer;
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.70);
    padding: 25% 10px 10px 10px;
    text-align: center;
    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
    font-size:1.3em;
}
.pic-caption1
{
    cursor: default;
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,.10);
    padding: 20% 10px 10px 10px;
    text-align: center;
    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
}
.pic-image
{
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}.pic:hover .pic-image
{
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}.pic-title
{
    font-size: 1.8em;
}.pic .pic-image, .pic-caption, .pic:hover .pic-caption, .pic:hover img, a, a:hover
{
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}.pic:hover .bottom-to-top, .pic:hover .come-left, .pic:hover .come-right, .pic:hover .left-to-right, .pic:hover .open-down, .pic:hover .open-left, .pic:hover .open-right, .pic:hover .open-up, .pic:hover .right-to-left, .pic:hover .rotate-in, .pic:hover .rotate-out, .pic:hover .top-to-bottom
{
    -webkit-opacity: 1;
    -moz-opacity: 1;
    opacity: 0.6;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    background: linear-gradient(to top, #1d1b1b, #000000);
}.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(.1);-ms-transform:rotate(90deg) scale(.1);transform:rotate(90deg) scale(.1);top:0;left:0}
.pic:hover .rotate-in{-webkit-transform:rotate(360deg) scale(1);-ms-transform:rotate(360deg) scale(1);transform:rotate(360deg) scale(1)}
.rotate-out{-webkit-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);-ms-transform:rotate(360deg) scale(1);transform:rotate(360deg) scale(1)}
.open-down{-webkit-transform:rotateX(-180deg);-ms-transform:rotateX(-180deg);transform:rotateX(-180deg);top:0;left:0}
.pic:hover .open-down{-webkit-transform:rotateX(0);-ms-transform:rotateX(0);transform:rotateX(0)}
.open-up{-webkit-transform:rotateX(180deg);-ms-transform:rotateX(180deg);transform:rotateX(180deg);top:0;left:0}
.pic:hover .open-up{-webkit-transform:rotateX(0);-ms-transform:rotateX(0);transform:rotateX(0)}
.open-left{-webkit-transform:rotateY(180deg);-ms-transform:rotateY(180deg);transform:rotateY(180deg);left:0;top:0}
.pic:hover .open-left{-webkit-transform:rotateY(0deg);-ms-transform:rotateY(0deg);transform:rotateY(0deg)}
.open-right{-webkit-transform:rotateY(-180deg);-ms-transform:rotateY(-180deg);transform:rotateY(-180deg);left:0;top:0}
.pic:hover .open-right{-webkit-transform:rotateY(0deg);-ms-transform:rotateY(0deg);transform:rotateY(0deg)}
.come-left
{
    -webkit-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);-ms-transform:rotateY(0) rotateX(0);transform:rotateY(0) rotateX(0)}
.come-right
{
    -webkit-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);
    -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;animation:none;margin:10px auto}}