@import "http://font-style: em;googleapis.com/css?family=Open+Sans)";

@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: 590px;
	max-height: 363px;
	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;
	position: relative;
	z-index: 10;
}
.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: pointer;
	position: absolute;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.3);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=($opacity * 100))";
	filter: alpha(opacity=0);
	-moz-opacity: 0;
	-khtml-opacity: 0;
	opacity: 0;
	z-index: 0;
	padding: 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 .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: 48%;
	left: 0
}
.pic:hover .top-to-bottom{
	left: 0px;
	bottom: 0px
}
.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)}
.pic ul {
	padding-top: 15px;
	padding-bottom: 5px;
	padding-left: 3%;
}
@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-right: auto;
	margin-left: auto;
}
}