.flip-container {
    position: relative;
    transform: perspective(1000px);
    transform-style: preserve-3d;
}
.flip-container:hover .back, .flip-container.hover .back {
    opacity: 10;
    transform: rotateY(0deg);
}
.flip-container:hover .front, .flip-container.hover .front {
    opacity: 0;
    transform: rotateY(180deg);
}
.flipper {
    position: relative;
    text-align: center;
    transform: perspective(1000px);
    transform-style: preserve-3d;
    transition: all 0.6s ease 0s;
}
.services-banner .title {
     cursor: pointer;
    display: block;
    margin: 5px 0 25px;
    width: 120px;
}
.front, .back {
    backface-visibility: hidden;
    left: 0;
    position: absolute;
    top: 0;
    transform: rotateY(0deg);
    transform-style: preserve-3d;
    transition: all 0.6s ease 0s;
}
.front {
    background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;
    font-size: 20px;
    line-height: 75px;
    position: absolute;
    width: 100%;
    cursor:pointer;
    z-index: 2;
}
.back {
    background: #fff none repeat scroll 0 0;
    color: #000;
    opacity: 0;
   line-height: 75px;
    position: relative;
    width: 100%;
    transform: rotateY(-180deg);
}
.back p {
    bottom: 40px;
    font-size: 18px;
    left: 0;
    padding: 0 20px;
    position: absolute;
    right: 0;
    text-align: center;
}
.back button {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: medium none;
}
.modal-header {
    background: #d9534f none repeat scroll 0 0;
    border-bottom: 0 none;
    border-radius: 0;
}
.modal-content {
    border-radius: 0;
}
.modal-title {
    color: #fff;
    text-transform: uppercase;
}
.modal-header .close {
    color: #fff;
    opacity: 1;
}