.cq-flipbox-container { display: block; position: relative; margin: 0 auto; -webkit-perspective: 1000; -moz-perspective: 1000; -ms-perspective: 1000; perspective: 1000; width: 100%; height: 221px;cursor:pointer; }
.cq-flipbox-back { -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); transform: rotateY(-180deg);} .cq-flipbox-front,.cq-flipbox-back  {background-position:center center; }
.cq-flipbox-right { -webkit-transform: rotateX(-180deg); -moz-transform: rotateX(-180deg); -ms-transform: rotateX(-180deg); transform: rotateX(-180deg); }
.cq-flipbox-container.cq-rightleft:hover .cq-flipbox-flipper { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); transform: rotateY(180deg); }
.cq-flipbox-container.cq-bottomtop:hover .cq-flipbox-flipper { -webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); -ms-transform: rotateX(180deg); transform: rotateX(180deg); }
.cq-flipbox-container.cq-rightleft:hover .cq-flipbox-front { }
.cq-flipbox-container.cq-bottomtop:hover .cq-flipbox-left {  }
.cq-flipbox-flipper { -webkit-transition: 0.6s; -webkit-transform-style: preserve-3d; -moz-transition: 0.6s; -ms-transition: 0.6s; transition: 0.6s; -moz-transform-style: preserve-3d; transform-style: preserve-3d; style: preserve-3d;   -moz-backface-visibility: hidden;  position: relative; width: 100%; height: 100%; }
.cq-flipbox-front, .cq-flipbox-back, .cq-flipbox-left, .cq-flipbox-right { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden;  backface-visibility: hidden; display: block; position: absolute; top: 0; left: 0; border-radius: 8px; } 
.cq-flipbox-item { width: 100%; height: 100%; }
h4.cq-flipbox-title { color: #fff; font-size: 1.34em; width: 100%; line-height: 130%; margin: 0 0 6px 0; text-align: center; }
.cq-flipbox-content { color: #fff; font-size: 1em; line-height: 118%; display: block; width: 90%; margin: 0 auto; text-align: center; text-align: center; position: relative; top: 46%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); transform: translateY(-50%); }
.cq-flipbox-buttonlink, .cq-flipbox-link { text-decoration: none; }
.cq-flipbox-link:hover { color: #333; }
.cq-flipbox-buttonlink:focus, .cq-flipbox-link:focus { outline: none; }
.cq-flipbox-avatar { color: #333; background-color: #fff; width: 80px; height: 80px; font-size: 40px; line-height: 80px; text-align: center; display: inline-block; position: absolute; border-radius: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%);   z-index: 2; }
.cq-flipbox-cardavatar { display: block; margin: 0 auto; clear: right; color: #666; background-color: #fff; width: 80px; height: 80px; font-size: 40px; line-height: 80px; margin-bottom: 16px; border-radius: 50%; }
.cq-flipbox-avatar.cq-shadow, .cq-flipbox-cardavatar.cq-shadow { -webkit-box-shadow: 0 0 0 3px #fff, 0 0 0 2px #efefef, 0 2px 2px 2px rgba(0, 0, 0, .2); -moz-box-shadow: 0 0 0 3px #fff, 0 0 0 2px #efefef, 0 2px 2px 2px rgba(0, 0, 0, .2); box-shadow: 0 0 0 3px #fff, 0 0 0 2px #efefef, 0 2px 2px 2px rgba(0, 0, 0, .2); }
.cq-flipbox-front { z-index: 1; }
.cq-flipbox-left { z-index: 1; }
.cq-flipbox-button-container { width:100%; }
.cq-flipbox-button { display: inline-block; border: 0 none; border-radius: 2px 2px 2px 2px; background-color: #3BAFDA; color: #fff; cursor: pointer; font-size: 12px; font-weight: bold; line-height: 20px; margin-bottom: 0; margin-top: 10px; padding: 4px 6px; text-transform: none; transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; text-align: center; }
.cq-flipbox-button:hover { background-color: #4A89DC; }