﻿.so-widget-flip-cards { text-align:center; }

.so-widget-flip-cards h2 { margin-bottom:90px; }

.so-widget-flip-cards .cards { font-size:0; margin:-45px;  }

.so-widget-flip-cards .card { display:inline-block; padding:45px; width:590px; vertical-align:top; }

.so-widget-flip-cards .card .flipper { position:relative; perspective:1000px; }

.so-widget-flip-cards .card .front, .so-widget-flip-cards .card .back { color:#fff; padding:30px; width:100%; height:100%; -webkit-backface-visibility:hidden; backface-visibility:hidden; transform-style:preserve-3d; }
.so-widget-flip-cards .card .flipper.loaded .front, .so-widget-flip-cards .card .flipper.loaded .back { transition:transform 0.6s; }

.so-widget-flip-cards .card .front { background-position:center center; background-repeat:no-repeat; background-size:cover; position:absolute; top:0; left:0; }
.so-widget-flip-cards .card .flipper.hover .front { transform:rotateY(-180deg); }

.so-widget-flip-cards .card .front .title { font-size:24px; font-weight:400; line-height:1; padding:15px; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); }

.so-widget-flip-cards .card .flipper .back { transform:rotateY(180deg); }
.so-widget-flip-cards .card .flipper.hover .back { transform:rotateY(0deg); }

.so-widget-flip-cards .card .back .icon { margin:0 auto; width:90px; }
.so-widget-flip-cards .card .back .title { font-size:24px; font-weight:400; line-height:1; margin:15px 0; }
.so-widget-flip-cards .card .back .description { font-size:18px; }

@media (max-width:767px) {
	.so-widget-flip-cards .cards { margin:-30px 0; }

	.so-widget-flip-cards .card { width:540px; max-width:100%; padding:30px 0; }
}
