.cq-bgbutton-container {
padding: 0;
margin: 0;
}
.cq-bgbutton-container.cq-bgbutton-aligncenter {
text-align: center;
}
.cq-bgbutton-container.cq-bgbutton-alignleft {
text-align: left;
}
.cq-bgbutton-container.cq-bgbutton-alignright {
text-align: right;
}
.cq-bgbutton {
display: inline-block;
border: none;
text-align: center;
overflow: hidden;
padding: 30px;
font-size: 1.2em;
position: relative;
color: white;
outline: none;
line-height: 1.2em;
cursor: pointer;  -webkit-transition: background-position .7s, box-shadow .4s;
transition: background-position .7s, box-shadow .4s; background-size: cover;
}
.cq-bgbutton.roundsmall {
border-radius: 4px;
}
.cq-bgbutton.roundlarge {
border-radius: 1em;
}
.cq-bgbutton-link{
color: #fff;
text-decoration: none;
outline: none;
}
.cq-bgbutton-link:hover{
text-decoration: none;
} .cq-bgbutton-alignfullwidth .cq-bgbutton{
display: block;
width: 100%;
}
.cq-bgbutton-center .cq-bgbutton{  margin: 0 auto;
}
.cq-bgbutton-style1:hover, .cq-bgbutton-style2:hover, .cq-bgbutton-style3:hover, .cq-bgbutton-style4:hover{
background-position: 0% 30%;
}
.cq-bgbutton-icon1 {
position: relative;
vertical-align: middle;
display: inline-block;
-webkit-transition: all 0.6s;
transition: all 0.6s;
font-size: 1.2em;
box-shadow: none; line-height: 1.2em;
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
transform: rotate(0);
}
.cq-bgbutton-icon2 {
display: inline-block;
position: absolute;
vertical-align: middle;
line-height: 100%;
font-size: 100px;
opacity: .3;
top: 50%;
-webkit-transform: translateY(-50%) rotate(0);
-moz-transform: translateY(-50%) rotate(0);
transform: translateY(-50%) rotate(0);
}
.cq-bgbutton-icon3 {
display: inline-block;
position: relative;
vertical-align: middle;  font-size: 1.2em;
box-shadow: none;
line-height: 1.2em;
opacity: 0;   }
.cq-bgbutton-icon1.cq-bgbutton-iconleft, .cq-bgbutton-icon1.cq-bgbutton-iconleft.vc-oi, .cq-bgbutton-icon1.cq-bgbutton-iconleft.entypo-icon, .cq-bgbutton-icon3.cq-bgbutton-iconleft, .cq-bgbutton-icon3.cq-bgbutton-iconleft.vc-oi, .cq-bgbutton-icon3.cq-bgbutton-iconleft.entypo-icon{
margin-right: 12px;
}
.cq-bgbutton-icon1.cq-bgbutton-iconright, .cq-bgbutton-icon1.cq-bgbutton-iconright.vc-oi, .cq-bgbutton-icon1.cq-bgbutton-iconright.entypo-icon{
margin-left: 12px;
} .cq-bgbutton-icon1.vc-mono, .cq-bgbutton-icon2.vc-mono{ vertical-align: middle;
}
.cq-bgbutton-icon2.vc-mono{ } .cq-bgbutton-style1:hover .cq-bgbutton-icon1 {
box-shadow: none;
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
transform: scale(1.2);
}
.cq-bgbutton-style2:hover .cq-bgbutton-icon1 {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
.cq-bgbutton-style3:hover .cq-bgbutton-icon1 {
-webkit-animation-name: cq-bgbutton-fadeout;
animation-name: cq-bgbutton-fadeout;
-webkit-animation-duration: 0.8s;
animation-duration: 0.8s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.cq-bgbutton-style4:hover .cq-bgbutton-icon1 {
-webkit-animation-name: cq-bgbutton-fadedown;
animation-name: cq-bgbutton-fadedown;
-webkit-animation-duration: 0.8s;
animation-duration: 0.8s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
} .cq-bgbutton-icon2.cq-bgbutton-iconright{
font-size: 100px;
right: -200px;
-webkit-transition: right .4s, -webkit-transform .2s;
transition: right .4s, -webkit-transform .2s;
transition: right .4s, transform .2s;
transition: right .4s, transform .2s, -webkit-transform .2s;
}
.cq-bgbutton:hover .cq-bgbutton-icon2.cq-bgbutton-iconright {
right: 0px;
-webkit-transition: right .4s,-webkit-transform 30s .2s linear;
transition: right .4s,-webkit-transform 30s .2s linear;
transition: right .4s,transform 30s .2s linear;
transition: right .4s,transform 30s .2s linear,-webkit-transform 30s .2s linear;
}
.cq-bgbutton-icon2.cq-bgbutton-iconleft{
font-size: 100px;
left: -200px;
-webkit-transition: left .4s, -webkit-transform .2s;
transition: left .4s, -webkit-transform .2s;
transition: left .4s, transform .2s;
transition: left .4s, transform .2s, -webkit-transform .2s;
}
.cq-bgbutton:hover .cq-bgbutton-icon2.cq-bgbutton-iconleft {
left: 0px;
-webkit-transition: left .4s,-webkit-transform 30s .2s linear;
transition: left .4s,-webkit-transform 30s .2s linear;
transition: left .4s,transform 30s .2s linear;
transition: left .4s,transform 30s .2s linear,-webkit-transform 30s .2s linear;
}
.cq-bgbutton-style2:hover .cq-bgbutton-icon2 {
-webkit-transform: translateY(-50%) rotate(3000deg);
-moz-transform: translateY(-50%) rotate(3000deg);
transform: translateY(-50%) rotate(3000deg);
}
@-webkit-keyframes cq-bgbutton-fadedown {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
from {
opacity: 1;
-webkit-transform: none;
transform: none;
}
33%{
opacity: 0;
-webkit-transform: translate3d(0, 80px, 0);
transform: translate3d(0, 80px, 0);
}
66%{
opacity: 0;
-webkit-transform: translate3d(0, -80px, 0);
transform: translate3d(0, -80px, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes cq-bgbutton-fadedown {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
from {
opacity: 1;
-webkit-transform: none;
transform: none;
}
33%{
opacity: 0;
-webkit-transform: translate3d(0, 80px, 0);
transform: translate3d(0, 80px, 0);
}
66%{
opacity: 0;
-webkit-transform: translate3d(0, -80px, 0);
transform: translate3d(0, -80px, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@-webkit-keyframes cq-bgbutton-fadeout {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
from {
opacity: 1;
-webkit-transform: none;
transform: none;
}
50%{
opacity: 0;
-webkit-transform: scale(2);
transform: scale(2);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes cq-bgbutton-fadeout {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
from {
opacity: 1;
-webkit-transform: none;
transform: none;
}
50%{
opacity: 0;
-webkit-transform: scale(2);
transform: scale(2);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}