@charset "UTF-8";
/* CSS Document */

.flip {
	position: relative;
	width: 250px;
	height: 270px;
	overflow: hidden;
	float: left;
	margin-right: 0px;
	list-style: none;
}
.flip figure {
    margin:0;
    padding:0;
    position:relative;
    cursor:pointer;
    margin-left:0px
}
.flip figure img {
    display:block;
    position:relative;
    z-index:10;
    margin:0px 0
}
.flip figure figcaption {
    display:block;
    position:absolute;
    z-index:5;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box
}
.flip figure h2 {
    font-family:'Lato';
    color:#fff;
    font-size:20px;
    text-align:left
}
.flip figure p {
    display:block;
    font-family:'Lato';
    font-size:12px;
    line-height:18px;
    margin:0;
    color:#fff;
    text-align:left
}
.flip figure figcaption {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 29px 20px 10px;
	text-align: center;
	backface-visibility: hidden;
	-webkit-transform: rotateY(-180deg);
	-moz-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	transition: all .5s;
	background: rgba(160,180,223,1);
}
.flip figure img {
    backface-visibility:hidden;
    -webkit-transition:all .5s;
    -moz-transition:all .5s;
    transition:all .5s
}
.flip figure:hover img,figure.hover img {
    -webkit-transform:rotateY(180deg);
    -moz-transform:rotateY(180deg);
    transform:rotateY(180deg)
}
.flip figure:hover figcaption,figure.hover figcaption {
    -webkit-transform:rotateY(0);
    -moz-transform:rotateY(0);
    transform:rotateY(0)
}