votianng/html/service/css/style_003.css

.cq-flipbox-container {
  display: block;
  position: relative;
  margin: 0 auto;
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  perspective: 1000;
  width: 100%;
  height: 200px;
}

.cq-flipbox-back {
  -webkit-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
}
.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{
  /*display: none;*/
}

.cq-flipbox-container.cq-bottomtop:hover .cq-flipbox-left{
  /*display: none;*/
}


.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;
  /*-webkit-backface-visibility: hidden;*/
  -moz-backface-visibility: hidden;
  /*-ms-backface-visibility: hidden;*/
  /*backface-visibility: hidden;*/
  position: relative;
  width: 100%;
  height: 100%;
}

.cq-flipbox-front, .cq-flipbox-back, .cq-flipbox-left, .cq-flipbox-right {
  /*border: 1px dashed #666;*/
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  /*-ms-backface-visibility: hidden;*/
  backface-visibility: hidden;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 8px;
}
/*.cq-flipbox-item.cq-square {
  border-radius: 0px;
  top: 0;
  left: 0;
}
*/
.cq-flipbox-item{
  width: 100%;
  height: 100%;
}
h4.cq-flipbox-title{
  color: #fff;
  font-size: 1.4em;
  width: 100%;
  line-height: 130%;
  margin: 0 0 8px 0;
  text-align: center;
}

.cq-flipbox-content{
  color: #fff;
  font-size: 1.1em;
  line-height: 150%;
  display: block;
  width: 90%;
  margin: 0 auto;
  text-align: center;
  text-align: center;
  position: relative;
  top: 50%;
  -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%);
  /*top: -40px;*/
  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;
}