*
{
-webkit-box-sizing:border-box; 
-moz-box-sizing:border-box; 
-o-box-sizing:border-box; 
-ms-box-sizing:border-box; 
box-sizing:border-box
}

h1
{

Font-size:0.8em;
line-height:30px
}


img
{
max-width:100%
}
.pull-right
{
float:right
}
.pull-left
{
float:left
}


@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:1px
}

}

.pic
{
max-width:230px;
max-height:auto;
position:relative; 
overflow:hidden; 
margin:10px; 
display:inline-block; 

-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:linear-gradient(to bottom, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.73) 17%,rgba(0,0,0,0.66) 35%,rgba(0,0,0,0.55) 62%,rgba(0,0,0,0.4) 100%);
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: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
{
-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
}