* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
padding-top: 50px;
padding-bottom: 20px;
background-color: #FFF;
}
.btn-flip-extend, .btn-flip:hover, .btn-flip:focus {
background-color: transparent;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
opacity: 1;
}

.btn-flip {
opacity: 0.8;
color: #666666;
background-color: transparent;
}
.card-container {
-moz-perspective: 800px;
-webkit-perspective: 800px;
perspective: 800px;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
margin-bottom: 30px;
width: 100%;
height: 320px;
}
.card-container:not(.manual-flip):hover .front {
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.card-container:not(.manual-flip):hover .back {
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.card-container.hover.manual-flip .front {
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.card-container.hover.manual-flip .back {
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.card {
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-transition: -moz-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-o-transition: -o-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-webkit-transition: -webkit-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
background: none repeat scroll 0 0 #fff;
color: #444444;
max-width: 412px;
margin: 0 auto;
}
.card .cover {
-moz-border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px;
border-radius: 4px 4px 0 0;
height: 320px;
overflow: hidden;
z-index: -2;
}
.card .img {
-moz-border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px;
border-radius: 4px 4px 0 0;
width: 100%;
height: 320px;
overflow: hidden;
z-index: -2;
}
.card .content {
background-color: transparent;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
padding: 10px 20px 20px;
}
.card .content .main {
min-height: 140px;
}
.card .name {
font-size: 32px;
text-align: center;
}
.card h3 {
color: #800080;
margin-top: -180px;
font-weight: 300;
line-height: 20px;
}
.card .footer {
margin-top: -80px;
text-align: center;
}
.card .footer .btn-simple {
margin-top: -6px;
}

.back .btn-simple {
position: absolute;
left: 0;
bottom: 4px;
}
.card .header {
padding: 55px 20px;
background: linear-gradient(to top, #fc00ff, #00dbde);
color: black;
font-size: 11pt;
}
.card .back .content .main {
height: 165px;
}
.front {
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-transition: -moz-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-o-transition: -o-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-webkit-transition: -webkit-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
-moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.14);
-webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.14);
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.14);
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
position: absolute;
background-color: #fff;
width: 100%;
height: 320px;
top: 0;
left: 0;
z-index: 2;
}
.back {
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-transition: -moz-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-o-transition: -o-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-webkit-transition: -webkit-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-moz-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
-moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.14);
-webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.14);
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.14);
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
position: absolute;
background-color: #fff;
width: 100%;
height: 320px;
top: 0;
left: 0;
}