.card{position:relative;float:left;padding-bottom:25%;width:100%;text-align:center;margin-bottom:20px;height:218px;overflow:hidden;}
.card-height{height:456px;}
.card__front,
.card__back{position:absolute;top:0;left:0;width:100%;height:100%;}
.card__front,
.card__back{-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:-webkit-transform 0.3s;transition:transform 0.3s;}
.card__front img{width:100%;}
.card__back{-webkit-transform:rotateY(-180deg);transform:rotateY(-180deg);}
.card__back.bg-1{background:url("../images/web-design-back.jpg") no-repeat;background-size:cover;}
.card__back.bg-2{background:url("../images/web-development-back.jpg") no-repeat;background-size:cover;}
.card__back.bg-3{background:url("../images/mobile-app-back.jpg") no-repeat;background-size:cover;}
.card__back.bg-4{background:url("../images/e-commerce-back.jpg") no-repeat;background-size:cover;}
.card__back.bg-5{background:url("../images/corporate-identity-back.jpg") no-repeat;background-size:cover;}
.card__back.bg-6{background:url("../images/seo-back.jpg") no-repeat;background-size:cover;}
.minheight{min-height:457px;}
.card__text{display:inline-block;position:relative;top:0;right:0;bottom:0;left:0;margin:auto;color:#fff;line-height:25px;margin:65px 0 15px;font-weight:300;font-size:20px;}
.card.effect__hover:hover .card__front{-webkit-transform:rotateY(-180deg);transform:rotateY(-180deg);}
.card.effect__hover:hover .card__back{-webkit-transform:rotateY(0);transform:rotateY(0);}
.card.effect__click.flipped .card__front{-webkit-transform:rotateY(-180deg);transform:rotateY(-180deg);}
.card.effect__click.flipped .card__back{-webkit-transform:rotateY(0);transform:rotateY(0);}
.card.effect__random.flipped .card__front{-webkit-transform:rotateY(-180deg);transform:rotateY(-180deg);}
.card.effect__random.flipped .card__back{-webkit-transform:rotateY(0);transform:rotateY(0);}