.wtbx_vc_video_button .wtbx_vc_el_container {
display: inline-block;
}
.wtbx_vc_video_button.wtbx_align_center {
text-align: center;
}
.wtbx_vc_video_button.wtbx_align_center .wtbx_video_button_wrapper {
margin: 0 auto;
}
.wtbx_vc_video_button.wtbx_align_left {
text-align: left;
}
.wtbx_vc_video_button.wtbx_align_right {
text-align: right;
}
.wtbx_vc_video_button .wtbx_video_button_wrapper {
position: relative;
display: inline-block;
}
.wtbx_vc_video_button .wtbx_video_button_wrapper .wtbx_video_button_cell {
display: table-cell;
vertical-align: middle;
text-align: start;
}
.wtbx_vc_video_button .wtbx_video_button_wrapper .wtbx_video_button_h,
.wtbx_vc_video_button .wtbx_video_button_wrapper .wtbx_video_button_sh {
white-space: nowrap;
display: block;
}
.wtbx_vc_video_button.wtbx_style_1 .wtbx_video_button_wrapper {
padding-top: 10px;
text-align: center;
}
.wtbx_vc_video_button.wtbx_style_1 .wtbx_video_icon {
display: inline-block;
margin: 0 auto;
width: 70px;
height: 70px;
border-radius: 50%;
position: relative;
cursor: pointer;
z-index: 1;
-moz-transform: scale3d(1, 1, 1);
-o-transform: scale3d(1, 1, 1);
-ms-transform: scale3d(1, 1, 1);
-webkit-transform: scale3d(1, 1, 1);
-webkit-transform: -webkit-scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
-webkit-transition: all 0.6s cubic-bezier(0.2, 0, 0.3, 1);
-moz-transition: all 0.6s cubic-bezier(0.2, 0, 0.3, 1);
-ms-transition: all 0.6s cubic-bezier(0.2, 0, 0.3, 1);
-o-transition: all 0.6s cubic-bezier(0.2, 0, 0.3, 1);
transition: all 0.6s cubic-bezier(0.2, 0, 0.3, 1);
}
.wtbx_vc_video_button.wtbx_style_1 .wtbx_video_icon i {
font-size: 24px;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
margin-left: .1em;
-moz-transform: translate3d(-50%, -50%, 0);
-o-transform: translate3d(-50%, -50%, 0);
-ms-transform: translate3d(-50%, -50%, 0);
-webkit-transform: translate3d(-50%, -50%, 0);
-webkit-transform: -webkit-translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
}
.wtbx_vc_video_button.wtbx_style_1 .wtbx_video_icon:before {
content: '';
position: absolute;
top: -8px;
bottom: -8px;
left: -8px;
right: -8px;
border-radius: 50%;
border-style: dashed;
border-width: 1px;
border-color: #fff;
opacity: 0;
z-index: -1;
-moz-transform: scale3d(0.7, 0.7, 1);
-o-transform: scale3d(0.7, 0.7, 1);
-ms-transform: scale3d(0.7, 0.7, 1);
-webkit-transform: scale3d(0.7, 0.7, 1);
-webkit-transform: -webkit-scale3d(0.7, 0.7, 1);
transform: scale3d(0.7, 0.7, 1);
-webkit-transition: transform 0.4s cubic-bezier(0.2, 0, 0.3, 1), opacity 0.3s cubic-bezier(0.2, 0, 0.3, 1) 0s;
-moz-transition: transform 0.4s cubic-bezier(0.2, 0, 0.3, 1), opacity 0.3s cubic-bezier(0.2, 0, 0.3, 1) 0s;
-ms-transition: transform 0.4s cubic-bezier(0.2, 0, 0.3, 1), opacity 0.3s cubic-bezier(0.2, 0, 0.3, 1) 0s;
-o-transition: transform 0.4s cubic-bezier(0.2, 0, 0.3, 1), opacity 0.3s cubic-bezier(0.2, 0, 0.3, 1) 0s;
transition: transform 0.4s cubic-bezier(0.2, 0, 0.3, 1), opacity 0.3s cubic-bezier(0.2, 0, 0.3, 1) 0s;
}
.wtbx_vc_video_button.wtbx_style_1 .wtbx_video_icon:hover {
-moz-transform: scale3d(1.12, 1.12, 1);
-o-transform: scale3d(1.12, 1.12, 1);
-ms-transform: scale3d(1.12, 1.12, 1);
-webkit-transform: scale3d(1.12, 1.12, 1);
-webkit-transform: -webkit-scale3d(1.12, 1.12, 1);
transform: scale3d(1.12, 1.12, 1);
-webkit-transition: all 0.4s cubic-bezier(0.68, -0.55, 0.465, 3);
-moz-transition: all 0.4s cubic-bezier(0.68, -0.55, 0.465, 3);
-ms-transition: all 0.4s cubic-bezier(0.68, -0.55, 0.465, 3);
-o-transition: all 0.4s cubic-bezier(0.68, -0.55, 0.465, 3);
transition: all 0.4s cubic-bezier(0.68, -0.55, 0.465, 3);
}
.wtbx_vc_video_button.wtbx_style_1 .wtbx_video_icon:hover:before {
opacity: 1;
-webkit-transition: transform 0.4s cubic-bezier(0.2, 0, 0.3, 1), opacity 0.3s cubic-bezier(0.2, 0, 0.3, 1) 0.1s;
-moz-transition: transform 0.4s cubic-bezier(0.2, 0, 0.3, 1), opacity 0.3s cubic-bezier(0.2, 0, 0.3, 1) 0.1s;
-ms-transition: transform 0.4s cubic-bezier(0.2, 0, 0.3, 1), opacity 0.3s cubic-bezier(0.2, 0, 0.3, 1) 0.1s;
-o-transition: transform 0.4s cubic-bezier(0.2, 0, 0.3, 1), opacity 0.3s cubic-bezier(0.2, 0, 0.3, 1) 0.1s;
transition: transform 0.4s cubic-bezier(0.2, 0, 0.3, 1), opacity 0.3s cubic-bezier(0.2, 0, 0.3, 1) 0.1s;
-moz-transform: scale3d(1, 1, 1);
-o-transform: scale3d(1, 1, 1);
-ms-transform: scale3d(1, 1, 1);
-webkit-transform: scale3d(1, 1, 1);
-webkit-transform: -webkit-scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
.wtbx_vc_video_button.wtbx_style_1 .wtbx_video_icon:hover ~ .wtbx_video_button_h {
-moz-transform: translate3d(0, 5px, 0);
-o-transform: translate3d(0, 5px, 0);
-ms-transform: translate3d(0, 5px, 0);
-webkit-transform: translate3d(0, 5px, 0);
-webkit-transform: -webkit-translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0);
}
.wtbx_vc_video_button.wtbx_style_1 .wtbx_video_button_h {
margin-top: 1em;
font-size: .785714em;
font-weight: 700;
text-transform: uppercase;
-webkit-transition: transform 0.6s cubic-bezier(0.2, 0, 0.3, 1);
-moz-transition: transform 0.6s cubic-bezier(0.2, 0, 0.3, 1);
-ms-transition: transform 0.6s cubic-bezier(0.2, 0, 0.3, 1);
-o-transition: transform 0.6s cubic-bezier(0.2, 0, 0.3, 1);
transition: transform 0.6s cubic-bezier(0.2, 0, 0.3, 1);
}
.wtbx_vc_video_button.wtbx_style_1.wtbx_skin_dark .wtbx_video_icon {
background-color: #fff;
}
.wtbx_vc_video_button.wtbx_style_1.wtbx_skin_dark .wtbx_video_button_h {
color: #fff;
}
.wtbx_vc_video_button.wtbx_style_1.wtbx_skin_light i {
color: #fff;
}
.wtbx_vc_video_button.wtbx_style_2 .wtbx_video_button_wrapper {
cursor: pointer;
min-height: 46px;
border-radius: 25px;
}
.wtbx_vc_video_button.wtbx_style_2 .wtbx_video_button_wrapper .wtbx_video_button_cell {
border-radius: 25px;
}
.wtbx_vc_video_button.wtbx_style_2 .wtbx_video_button_wrapper .wtbx_video_button_cell:last-child {
padding-left: 15px;
}
.wtbx_vc_video_button.wtbx_style_2 .wtbx_video_button_wrapper .wtbx_video_button_cell:first-child {
padding-left: 0;
}
.wtbx_vc_video_button.wtbx_style_2 .wtbx_video_button_wrapper:hover .wtbx_video_icon {
-moz-transform: scale3d(1.1, 1.1, 1);
-o-transform: scale3d(1.1, 1.1, 1);
-ms-transform: scale3d(1.1, 1.1, 1);
-webkit-transform: scale3d(1.1, 1.1, 1);
-webkit-transform: -webkit-scale3d(1.1, 1.1, 1);
transform: scale3d(1.1, 1.1, 1);
}
.wtbx_vc_video_button.wtbx_style_2 .wtbx_video_button_wrapper:hover .wtbx_video_icon:after {
-moz-transform: rotate(30deg);
-o-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-webkit-transform: -webkit-rotate(30deg);
transform: rotate(30deg);
}
.wtbx_vc_video_button.wtbx_style_2 .wtbx_video_button_wrapper:hover .wtbx_video_button_h {
-moz-transform: scale3d(1.1, 1.1, 1);
-o-transform: scale3d(1.1, 1.1, 1);
-ms-transform: scale3d(1.1, 1.1, 1);
-webkit-transform: scale3d(1.1, 1.1, 1);
-webkit-transform: -webkit-scale3d(1.1, 1.1, 1);
transform: scale3d(1.1, 1.1, 1);
}
.wtbx_vc_video_button.wtbx_style_2 .wtbx_video_button_wrapper:hover .wtbx_video_button_sh {
-moz-transform: scale3d(0.7, 0.7, 1);
-o-transform: scale3d(0.7, 0.7, 1);
-ms-transform: scale3d(0.7, 0.7, 1);
-webkit-transform: scale3d(0.7, 0.7, 1);
-webkit-transform: -webkit-scale3d(0.7, 0.7, 1);
transform: scale3d(0.7, 0.7, 1);
}
.wtbx_vc_video_button.wtbx_style_2 .wtbx_video_icon {
display: block;
position: relative;
width: 46px;
height: 46px;
border-radius: 50%;
z-index: 1;
border-width: 1px;
border-style: solid;
-webkit-transition: all 0.6s cubic-bezier(0.2, 0, 0.3, 1);
-moz-transition: all 0.6s cubic-bezier(0.2, 0, 0.3, 1);
-ms-transition: all 0.6s cubic-bezier(0.2, 0, 0.3, 1);
-o-transition: all 0.6s cubic-bezier(0.2, 0, 0.3, 1);
transition: all 0.6s cubic-bezier(0.2, 0, 0.3, 1);
}
.wtbx_vc_video_button.wtbx_style_2 .wtbx_video_icon i {
font-size: 14px;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
margin-left: .1em;
-moz-transform: translate3d(-50%, -50%, 0);
-o-transform: translate3d(-50%, -50%, 0);
-ms-transform: translate3d(-50%, -50%, 0);
-webkit-transform: translate3d(-50%, -50%, 0);
-webkit-transform: -webkit-translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
}
.wtbx_vc_video_button.wtbx_style_2 .wtbx_video_icon:before, .wtbx_vc_video_button.wtbx_style_2 .wtbx_video_icon:after {
content: '';
position: absolute;
top: -1px;
bottom: -1px;
left: -1px;
right: -1px;
border-radius: 50%;
border-style: solid;
border-width: 4px;
border-top-color: transparent !important;
border-bottom-color: transparent !important;
border-left-color: transparent !important;
z-index: -1;
-webkit-transition: all 0.8s cubic-bezier(0.2, 0, 0.3, 1);
-moz-transition: all 0.8s cubic-bezier(0.2, 0, 0.3, 1);
-ms-transition: all 0.8s cubic-bezier(0.2, 0, 0.3, 1);
-o-transition: all 0.8s cubic-bezier(0.2, 0, 0.3, 1);
transition: all 0.8s cubic-bezier(0.2, 0, 0.3, 1);
}
.wtbx_vc_video_button.wtbx_style_2 .wtbx_video_icon:before {
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-webkit-transform: -webkit-rotate(-45deg);
transform: rotate(-45deg);
}
.wtbx_vc_video_button.wtbx_style_2 .wtbx_video_icon:after {
-moz-transform: rotate(-20deg);
-o-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
-webkit-transform: -webkit-rotate(-20deg);
transform: rotate(-20deg);
}
.wtbx_vc_video_button.wtbx_style_2 .wtbx_video_button_h {
font-size: .928571em;
font-weight: 700;
text-transform: uppercase;
line-height: 18px;
-webkit-transition: all 0.6s cubic-bezier(0.2, 0, 0.3, 1);
-moz-transition: all 0.6s cubic-bezier(0.2, 0, 0.3, 1);
-ms-transition: all 0.6s cubic-bezier(0.2, 0, 0.3, 1);
-o-transition: all 0.6s cubic-bezier(0.2, 0, 0.3, 1);
transition: all 0.6s cubic-bezier(0.2, 0, 0.3, 1);
moz-transform-origin: bottom left;
-o-transform-origin: bottom left;
-ms-transform-origin: bottom left;
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
}
.wtbx_vc_video_button.wtbx_style_2 .wtbx_video_button_h:only-child {
display: inline-block;
}
.wtbx_vc_video_button.wtbx_style_2 .wtbx_video_button_sh {
font-size: .785714em;
font-weight: 700;
text-transform: uppercase;
line-height: 18px;
-webkit-transition: all 0.4s cubic-bezier(0.2, 0, 0.3, 1);
-moz-transition: all 0.4s cubic-bezier(0.2, 0, 0.3, 1);
-ms-transition: all 0.4s cubic-bezier(0.2, 0, 0.3, 1);
-o-transition: all 0.4s cubic-bezier(0.2, 0, 0.3, 1);
transition: all 0.4s cubic-bezier(0.2, 0, 0.3, 1);
moz-transform-origin: bottom left;
-o-transform-origin: bottom left;
-ms-transform-origin: bottom left;
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
}
.wtbx_vc_video_button.wtbx_style_2 .wtbx_video_button_sh:only-child {
display: inline-block;
}
.wtbx_vc_video_button.wtbx_style_2.wtbx_skin_dark .wtbx_video_icon {
border-color: #fff;
}
.wtbx_vc_video_button.wtbx_style_2.wtbx_skin_dark .wtbx_video_icon:before, .wtbx_vc_video_button.wtbx_style_2.wtbx_skin_dark .wtbx_video_icon:after {
border-color: #fff;
}
.wtbx_vc_video_button.wtbx_style_2.wtbx_skin_dark i {
color: #fff;
}
.wtbx_vc_video_button.wtbx_style_2.wtbx_skin_dark .wtbx_video_button_h {
color: #fff;
}
.wtbx_vc_video_button.wtbx_style_2.wtbx_skin_dark .wtbx_video_button_sh {
color: #fff;
opacity: .6;
}
.wtbx_vc_video_button.wtbx_style_3 .wtbx_video_button_wrapper {
cursor: pointer;
min-height: 50px;
padding: 1em 1.4em;
border-radius: 15px;
-webkit-transition: all 0.4s cubic-bezier(0.2, 0, 0.3, 1);
-moz-transition: all 0.4s cubic-bezier(0.2, 0, 0.3, 1);
-ms-transition: all 0.4s cubic-bezier(0.2, 0, 0.3, 1);
-o-transition: all 0.4s cubic-bezier(0.2, 0, 0.3, 1);
transition: all 0.4s cubic-bezier(0.2, 0, 0.3, 1);
}
.wtbx_vc_video_button.wtbx_style_3 .wtbx_video_button_wrapper .wtbx_video_button_cell:last-child {
padding-left: 15px;
}
.wtbx_vc_video_button.wtbx_style_3 .wtbx_video_button_wrapper .wtbx_video_button_cell:first-child {
padding-left: 0;
}
.wtbx_vc_video_button.wtbx_style_3 .wtbx_video_button_wrapper:hover .wtbx_video_icon {
-moz-transform: scale3d(1.1, 1.1, 1);
-o-transform: scale3d(1.1, 1.1, 1);
-ms-transform: scale3d(1.1, 1.1, 1);
-webkit-transform: scale3d(1.1, 1.1, 1);
-webkit-transform: -webkit-scale3d(1.1, 1.1, 1);
transform: scale3d(1.1, 1.1, 1);
}
.wtbx_vc_video_button.wtbx_style_3 .wtbx_video_button_wrapper:hover .wtbx_video_icon:after {
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-webkit-transform: -webkit-rotate(0deg);
transform: rotate(0deg);
}
.wtbx_vc_video_button.wtbx_style_3 .wtbx_video_icon {
display: block;
position: relative;
width: 35px;
height: 35px;
border-radius: 50%;
z-index: 1;
border-width: 1px;
border-style: solid;
-webkit-transition: all 0.6s cubic-bezier(0.2, 0, 0.3, 1);
-moz-transition: all 0.6s cubic-bezier(0.2, 0, 0.3, 1);
-ms-transition: all 0.6s cubic-bezier(0.2, 0, 0.3, 1);
-o-transition: all 0.6s cubic-bezier(0.2, 0, 0.3, 1);
transition: all 0.6s cubic-bezier(0.2, 0, 0.3, 1);
}
.wtbx_vc_video_button.wtbx_style_3 .wtbx_video_icon i {
font-size: 12px;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
margin-left: .1em;
-moz-transform: translate3d(-50%, -50%, 0);
-o-transform: translate3d(-50%, -50%, 0);
-ms-transform: translate3d(-50%, -50%, 0);
-webkit-transform: translate3d(-50%, -50%, 0);
-webkit-transform: -webkit-translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
}
.wtbx_vc_video_button.wtbx_style_3 .wtbx_video_icon:before, .wtbx_vc_video_button.wtbx_style_3 .wtbx_video_icon:after {
content: '';
position: absolute;
top: -1px;
bottom: -1px;
left: -1px;
right: -1px;
border-radius: 50%;
border-style: solid;
border-width: 2px;
border-top-color: transparent !important;
z-index: -1;
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-webkit-transform: -webkit-rotate(-45deg);
transform: rotate(-45deg);
-webkit-transition: all 0.8s cubic-bezier(0.2, 0, 0.3, 1);
-moz-transition: all 0.8s cubic-bezier(0.2, 0, 0.3, 1);
-ms-transition: all 0.8s cubic-bezier(0.2, 0, 0.3, 1);
-o-transition: all 0.8s cubic-bezier(0.2, 0, 0.3, 1);
transition: all 0.8s cubic-bezier(0.2, 0, 0.3, 1);
}
.wtbx_vc_video_button.wtbx_style_3 .wtbx_video_button_h {
font-size: .857143em;
font-weight: 700;
text-transform: uppercase;
line-height: 15px;
}
.wtbx_vc_video_button.wtbx_style_3 .wtbx_video_button_h:only-child {
display: inline-block;
}
.wtbx_vc_video_button.wtbx_style_3 .wtbx_video_button_sh {
font-size: .714286em;
font-weight: 700;
text-transform: uppercase;
line-height: 15px;
}
.wtbx_vc_video_button.wtbx_style_3 .wtbx_video_button_sh:only-child {
display: inline-block;
}
.wtbx_vc_video_button.wtbx_style_3.wtbx_skin_dark .wtbx_video_icon {
border-color: #fff;
}
.wtbx_vc_video_button.wtbx_style_3.wtbx_skin_dark .wtbx_video_icon:before, .wtbx_vc_video_button.wtbx_style_3.wtbx_skin_dark .wtbx_video_icon:after {
border-color: #fff;
}
.wtbx_vc_video_button.wtbx_style_3.wtbx_skin_dark i {
color: #fff;
}
.wtbx_vc_video_button.wtbx_style_3.wtbx_skin_dark .wtbx_video_button_h {
color: #fff;
}
.wtbx_vc_video_button.wtbx_style_3.wtbx_skin_dark .wtbx_video_button_sh {
color: #fff;
opacity: .6;
}
.wtbx_vc_video_button.wtbx_style_3.wtbx_skin_light .wtbx_video_button_wrapper {
border-width: 1px;
border-style: solid;
background-color: #fff;
}
.wtbx_vc_video_button.wtbx_style_3.wtbx_skin_light .wtbx_video_button_wrapper:hover {
border-color: transparent;
box-shadow: 0 15px 60px -10px rgba(9, 31, 67, 0.15);
}
.wtbx_vc_video_button.wtbx_style_4 .wtbx_video_button_wrapper {
min-height: 50px;
padding: 0;
border-radius: 3px;
cursor: pointer;
-webkit-transition: all 0.4s cubic-bezier(0.2, 0, 0.3, 1);
-moz-transition: all 0.4s cubic-bezier(0.2, 0, 0.3, 1);
-ms-transition: all 0.4s cubic-bezier(0.2, 0, 0.3, 1);
-o-transition: all 0.4s cubic-bezier(0.2, 0, 0.3, 1);
transition: all 0.4s cubic-bezier(0.2, 0, 0.3, 1);
-webkit-perspective: 400px;
perspective: 400px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.wtbx_vc_video_button.wtbx_style_4 .wtbx_video_button_wrapper .wtbx_video_button_cell:last-child {
padding-left: 15px;
}
.wtbx_vc_video_button.wtbx_style_4 .wtbx_video_button_wrapper .wtbx_video_button_cell:first-child {
padding-left: 0;
}
.wtbx_vc_video_button.wtbx_style_4 .wtbx_video_button_wrapper:hover .wtbx_video_icon {
-moz-transform: translate3d(5px, 0, 0) scale3d(1.1, 1.1, 1) rotate3d(0, 1, 0, 30deg);
-o-transform: translate3d(5px, 0, 0) scale3d(1.1, 1.1, 1) rotate3d(0, 1, 0, 30deg);
-ms-transform: translate3d(5px, 0, 0) scale3d(1.1, 1.1, 1) rotate3d(0, 1, 0, 30deg);
-webkit-transform: translate3d(5px, 0, 0) scale3d(1.1, 1.1, 1) rotate3d(0, 1, 0, 30deg);
-webkit-transform: -webkit-translate3d(5px, 0, 0) scale3d(1.1, 1.1, 1) rotate3d(0, 1, 0, 30deg);
transform: translate3d(5px, 0, 0) scale3d(1.1, 1.1, 1) rotate3d(0, 1, 0, 30deg);
}
.wtbx_vc_video_button.wtbx_style_4 .wtbx_video_button_wrapper:hover .wtbx_video_icon:before {
opacity: .9;
}
.wtbx_vc_video_button.wtbx_style_4 .wtbx_video_button_wrapper:hover .wtbx_video_icon i {
-moz-transform: translate3d(-50%, -50%, 0) scale3d(1.2, 1.2, 1);
-o-transform: translate3d(-50%, -50%, 0) scale3d(1.2, 1.2, 1);
-ms-transform: translate3d(-50%, -50%, 0) scale3d(1.2, 1.2, 1);
-webkit-transform: translate3d(-50%, -50%, 0) scale3d(1.2, 1.2, 1);
-webkit-transform: -webkit-translate3d(-50%, -50%, 0) scale3d(1.2, 1.2, 1);
transform: translate3d(-50%, -50%, 0) scale3d(1.2, 1.2, 1);
}
.wtbx_vc_video_button.wtbx_style_4 .wtbx_video_button_wrapper:hover .wtbx_video_button_h {
-moz-transform: translate3d(15px, 0, 0) scale3d(1.1, 1.1, 1);
-o-transform: translate3d(15px, 0, 0) scale3d(1.1, 1.1, 1);
-ms-transform: translate3d(15px, 0, 0) scale3d(1.1, 1.1, 1);
-webkit-transform: translate3d(15px, 0, 0) scale3d(1.1, 1.1, 1);
-webkit-transform: -webkit-translate3d(15px, 0, 0) scale3d(1.1, 1.1, 1);
transform: translate3d(15px, 0, 0) scale3d(1.1, 1.1, 1);
}
.wtbx_vc_video_button.wtbx_style_4 .wtbx_video_button_wrapper:hover .wtbx_video_button_sh {
-moz-transform: translate3d(5px, 0, 0);
-o-transform: translate3d(5px, 0, 0);
-ms-transform: translate3d(5px, 0, 0);
-webkit-transform: translate3d(5px, 0, 0);
-webkit-transform: -webkit-translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0);
}
.wtbx_vc_video_button.wtbx_style_4 .wtbx_video_icon {
display: block;
position: relative;
width: 80px;
height: 60px;
border-radius: 10px;
overflow: hidden;
z-index: 1;
-webkit-transition: all 0.6s cubic-bezier(0.2, 0, 0.3, 1);
-moz-transition: all 0.6s cubic-bezier(0.2, 0, 0.3, 1);
-ms-transition: all 0.6s cubic-bezier(0.2, 0, 0.3, 1);
-o-transition: all 0.6s cubic-bezier(0.2, 0, 0.3, 1);
transition: all 0.6s cubic-bezier(0.2, 0, 0.3, 1);
}
.wtbx_vc_video_button.wtbx_style_4 .wtbx_video_icon .wtbx-bg-image {
z-index: 1;
}
.wtbx_vc_video_button.wtbx_style_4 .wtbx_video_icon:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-radius: inherit;
opacity: .5;
z-index: 2;
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
-webkit-transform: -webkit-translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: all 0.4s cubic-bezier(0.2, 0, 0.3, 1);
-moz-transition: all 0.4s cubic-bezier(0.2, 0, 0.3, 1);
-ms-transition: all 0.4s cubic-bezier(0.2, 0, 0.3, 1);
-o-transition: all 0.4s cubic-bezier(0.2, 0, 0.3, 1);
transition: all 0.4s cubic-bezier(0.2, 0, 0.3, 1);
}
.wtbx_vc_video_button.wtbx_style_4 .wtbx_video_icon i {
font-size: 16px;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
margin-left: .1em;
z-index: 3;
color: #fff;
-moz-transform: translate3d(-50%, -50%, 0);
-o-transform: translate3d(-50%, -50%, 0);
-ms-transform: translate3d(-50%, -50%, 0);
-webkit-transform: translate3d(-50%, -50%, 0);
-webkit-transform: -webkit-translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
-webkit-transition: all 0.6s cubic-bezier(0.2, 0, 0.3, 1);
-moz-transition: all 0.6s cubic-bezier(0.2, 0, 0.3, 1);
-ms-transition: all 0.6s cubic-bezier(0.2, 0, 0.3, 1);
-o-transition: all 0.6s cubic-bezier(0.2, 0, 0.3, 1);
transition: all 0.6s cubic-bezier(0.2, 0, 0.3, 1);
}
.wtbx_vc_video_button.wtbx_style_4 .wtbx_video_button_h {
font-size: .857143em;
font-weight: 700;
text-transform: uppercase;
line-height: 1.5;
-webkit-transition: all 0.7s cubic-bezier(0.2, 0, 0.3, 1);
-moz-transition: all 0.7s cubic-bezier(0.2, 0, 0.3, 1);
-ms-transition: all 0.7s cubic-bezier(0.2, 0, 0.3, 1);
-o-transition: all 0.7s cubic-bezier(0.2, 0, 0.3, 1);
transition: all 0.7s cubic-bezier(0.2, 0, 0.3, 1);
}
.wtbx_vc_video_button.wtbx_style_4 .wtbx_video_button_h:only-child {
display: inline-block;
}
.wtbx_vc_video_button.wtbx_style_4 .wtbx_video_button_sh {
font-size: 0.714286em;
font-weight: 700;
text-transform: uppercase;
line-height: 1.5;
-webkit-transition: all 0.5s cubic-bezier(0.2, 0, 0.3, 1);
-moz-transition: all 0.5s cubic-bezier(0.2, 0, 0.3, 1);
-ms-transition: all 0.5s cubic-bezier(0.2, 0, 0.3, 1);
-o-transition: all 0.5s cubic-bezier(0.2, 0, 0.3, 1);
transition: all 0.5s cubic-bezier(0.2, 0, 0.3, 1);
}
.wtbx_vc_video_button.wtbx_style_4 .wtbx_video_button_sh:only-child {
display: inline-block;
}
.wtbx_vc_video_button.wtbx_style_4.wtbx_skin_dark .wtbx_video_button_h {
color: #fff;
}
.wtbx_vc_video_button.wtbx_style_4.wtbx_skin_dark .wtbx_video_button_sh {
color: #fff;
opacity: .6;
}
.wtbx_vc_video_button.wtbx_style_5 .wtbx_video_button_wrapper {
padding-top: 10px;
text-align: center;
}
.wtbx_vc_video_button.wtbx_style_5 .wtbx_video_icon {
display: inline-block;
margin: 0 auto;
width: 46px;
height: 46px;
border-radius: 50%;
position: relative;
cursor: pointer;
z-index: 1;
-moz-transform: scale3d(1, 1, 1);
-o-transform: scale3d(1, 1, 1);
-ms-transform: scale3d(1, 1, 1);
-webkit-transform: scale3d(1, 1, 1);
-webkit-transform: -webkit-scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
-webkit-transition: all 0.4s cubic-bezier(0.2, 0, 0.3, 1);
-moz-transition: all 0.4s cubic-bezier(0.2, 0, 0.3, 1);
-ms-transition: all 0.4s cubic-bezier(0.2, 0, 0.3, 1);
-o-transition: all 0.4s cubic-bezier(0.2, 0, 0.3, 1);
transition: all 0.4s cubic-bezier(0.2, 0, 0.3, 1);
}
.wtbx_vc_video_button.wtbx_style_5 .wtbx_video_icon i {
font-size: 16px;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
margin-left: .1em;
-moz-transform: translate3d(-50%, -50%, 0);
-o-transform: translate3d(-50%, -50%, 0);
-ms-transform: translate3d(-50%, -50%, 0);
-webkit-transform: translate3d(-50%, -50%, 0);
-webkit-transform: -webkit-translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
}
.wtbx_vc_video_button.wtbx_style_5 .wtbx_video_icon:before {
content: '';
position: absolute;
top: -10px;
bottom: -10px;
left: -10px;
right: -10px;
border-radius: 50%;
background-color: #fff;
opacity: .15;
z-index: -1;
-moz-transform: scale3d(1, 1, 1);
-o-transform: scale3d(1, 1, 1);
-ms-transform: scale3d(1, 1, 1);
-webkit-transform: scale3d(1, 1, 1);
-webkit-transform: -webkit-scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
-webkit-transition: transform 0.3s cubic-bezier(0.2, 0, 0.3, 1), opacity 0.3s cubic-bezier(0.2, 0, 0.3, 1) 0s;
-moz-transition: transform 0.3s cubic-bezier(0.2, 0, 0.3, 1), opacity 0.3s cubic-bezier(0.2, 0, 0.3, 1) 0s;
-ms-transition: transform 0.3s cubic-bezier(0.2, 0, 0.3, 1), opacity 0.3s cubic-bezier(0.2, 0, 0.3, 1) 0s;
-o-transition: transform 0.3s cubic-bezier(0.2, 0, 0.3, 1), opacity 0.3s cubic-bezier(0.2, 0, 0.3, 1) 0s;
transition: transform 0.3s cubic-bezier(0.2, 0, 0.3, 1), opacity 0.3s cubic-bezier(0.2, 0, 0.3, 1) 0s;
-o-animation: playButton 1s cubic-bezier(0.2, 0, 0.3, 1) infinite alternate;
-moz-animation: playButton 1s cubic-bezier(0.2, 0, 0.3, 1) infinite alternate;
-webkit-animation: playButton 1s cubic-bezier(0.2, 0, 0.3, 1) infinite alternate;
animation: playButton 1s cubic-bezier(0.2, 0, 0.3, 1) infinite alternate;
}
.wtbx_vc_video_button.wtbx_style_5 .wtbx_video_icon:after {
content: '';
position: absolute;
top: -24px;
bottom: -24px;
left: -24px;
right: -24px;
border-radius: 50%;
background-color: #fff;
opacity: .1;
z-index: -1;
-moz-transform: scale3d(1, 1, 1);
-o-transform: scale3d(1, 1, 1);
-ms-transform: scale3d(1, 1, 1);
-webkit-transform: scale3d(1, 1, 1);
-webkit-transform: -webkit-scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
-webkit-transition: transform 0.3s cubic-bezier(0.2, 0, 0.3, 1), opacity 0.3s cubic-bezier(0.2, 0, 0.3, 1) 0s;
-moz-transition: transform 0.3s cubic-bezier(0.2, 0, 0.3, 1), opacity 0.3s cubic-bezier(0.2, 0, 0.3, 1) 0s;
-ms-transition: transform 0.3s cubic-bezier(0.2, 0, 0.3, 1), opacity 0.3s cubic-bezier(0.2, 0, 0.3, 1) 0s;
-o-transition: transform 0.3s cubic-bezier(0.2, 0, 0.3, 1), opacity 0.3s cubic-bezier(0.2, 0, 0.3, 1) 0s;
transition: transform 0.3s cubic-bezier(0.2, 0, 0.3, 1), opacity 0.3s cubic-bezier(0.2, 0, 0.3, 1) 0s;
-o-animation: playButton 1s cubic-bezier(0.2, 0, 0.3, 1) infinite 0.3s alternate;
-moz-animation: playButton 1s cubic-bezier(0.2, 0, 0.3, 1) infinite 0.3s alternate;
-webkit-animation: playButton 1s cubic-bezier(0.2, 0, 0.3, 1) infinite 0.3s alternate;
animation: playButton 1s cubic-bezier(0.2, 0, 0.3, 1) infinite 0.3s alternate;
}
.wtbx_vc_video_button.wtbx_style_5 .wtbx_video_icon:hover {
-moz-transform: scale3d(1.1, 1.1, 1);
-o-transform: scale3d(1.1, 1.1, 1);
-ms-transform: scale3d(1.1, 1.1, 1);
-webkit-transform: scale3d(1.1, 1.1, 1);
-webkit-transform: -webkit-scale3d(1.1, 1.1, 1);
transform: scale3d(1.1, 1.1, 1);
}
.wtbx_vc_video_button.wtbx_style_5 .wtbx_video_button_h {
margin-top: 30px;
font-size: .785714em;
font-weight: 700;
text-transform: uppercase;
-webkit-transition: transform 0.4s cubic-bezier(0.2, 0, 0.3, 1);
-moz-transition: transform 0.4s cubic-bezier(0.2, 0, 0.3, 1);
-ms-transition: transform 0.4s cubic-bezier(0.2, 0, 0.3, 1);
-o-transition: transform 0.4s cubic-bezier(0.2, 0, 0.3, 1);
transition: transform 0.4s cubic-bezier(0.2, 0, 0.3, 1);
}
.wtbx_vc_video_button.wtbx_style_5.wtbx_skin_dark .wtbx_video_icon {
background-color: #fff;
}
.wtbx_vc_video_button.wtbx_style_5.wtbx_skin_dark .wtbx_video_button_h {
color: #fff;
}
.wtbx_vc_video_button.wtbx_style_5.wtbx_skin_light i {
color: #fff;
}
.wtbx_vc_video_button.wtbx_style_6 .wtbx_video_button_wrapper {
text-align: center;
cursor: pointer;
}
.wtbx_vc_video_button.wtbx_style_6 .wtbx_video_button_wrapper:hover .wtbx_video_icon {
-moz-transform: scale3d(1.1, 1.1, 1);
-o-transform: scale3d(1.1, 1.1, 1);
-ms-transform: scale3d(1.1, 1.1, 1);
-webkit-transform: scale3d(1.1, 1.1, 1);
-webkit-transform: -webkit-scale3d(1.1, 1.1, 1);
transform: scale3d(1.1, 1.1, 1);
-webkit-transition: all 0.5s cubic-bezier(0.68, -0.55, 0.465, 3);
-moz-transition: all 0.5s cubic-bezier(0.68, -0.55, 0.465, 3);
-ms-transition: all 0.5s cubic-bezier(0.68, -0.55, 0.465, 3);
-o-transition: all 0.5s cubic-bezier(0.68, -0.55, 0.465, 3);
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.465, 3);
}
.wtbx_vc_video_button.wtbx_style_6 .wtbx_video_icon {
display: block;
margin: 0 auto;
width: 40px;
height: 40px;
border-radius: 50%;
position: relative;
cursor: pointer;
z-index: 1;
-moz-transform: scale3d(1, 1, 1);
-o-transform: scale3d(1, 1, 1);
-ms-transform: scale3d(1, 1, 1);
-webkit-transform: scale3d(1, 1, 1);
-webkit-transform: -webkit-scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
-webkit-transition: all 0.4s cubic-bezier(0.2, 0, 0.3, 1);
-moz-transition: all 0.4s cubic-bezier(0.2, 0, 0.3, 1);
-ms-transition: all 0.4s cubic-bezier(0.2, 0, 0.3, 1);
-o-transition: all 0.4s cubic-bezier(0.2, 0, 0.3, 1);
transition: all 0.4s cubic-bezier(0.2, 0, 0.3, 1);
}
.wtbx_vc_video_button.wtbx_style_6 .wtbx_video_icon i {
font-size: 13px;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
margin-left: .1em;
-moz-transform: translate3d(-50%, -50%, 0);
-o-transform: translate3d(-50%, -50%, 0);
-ms-transform: translate3d(-50%, -50%, 0);
-webkit-transform: translate3d(-50%, -50%, 0);
-webkit-transform: -webkit-translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
}
.wtbx_vc_video_button.wtbx_style_6 .wtbx_video_button_h {
margin: 0;
padding-left: 15px;
font-weight: 600;
-webkit-transition: transform 0.6s cubic-bezier(0.2, 0, 0.3, 1);
-moz-transition: transform 0.6s cubic-bezier(0.2, 0, 0.3, 1);
-ms-transition: transform 0.6s cubic-bezier(0.2, 0, 0.3, 1);
-o-transition: transform 0.6s cubic-bezier(0.2, 0, 0.3, 1);
transition: transform 0.6s cubic-bezier(0.2, 0, 0.3, 1);
}
.wtbx_vc_video_button.wtbx_style_6.wtbx_skin_dark .wtbx_video_icon {
background-color: #fff;
}
.wtbx_vc_video_button.wtbx_style_6.wtbx_skin_dark .wtbx_video_button_h {
color: #fff;
}
.wtbx_vc_video_button.wtbx_style_6.wtbx_skin_light i {
color: #fff;
}
@-webkit-keyframes playButton {
0% {
opacity: .4;
-moz-transform: scale3d(0.6, 0.6, 1);
-o-transform: scale3d(0.6, 0.6, 1);
-ms-transform: scale3d(0.6, 0.6, 1);
-webkit-transform: scale3d(0.6, 0.6, 1);
-webkit-transform: -webkit-scale3d(0.6, 0.6, 1);
transform: scale3d(0.6, 0.6, 1);
}
100% {
opacity: .1;
-moz-transform: scale3d(1, 1, 1);
-o-transform: scale3d(1, 1, 1);
-ms-transform: scale3d(1, 1, 1);
-webkit-transform: scale3d(1, 1, 1);
-webkit-transform: -webkit-scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@-moz-keyframes playButton {
0% {
opacity: .4;
-moz-transform: scale3d(0.6, 0.6, 1);
-o-transform: scale3d(0.6, 0.6, 1);
-ms-transform: scale3d(0.6, 0.6, 1);
-webkit-transform: scale3d(0.6, 0.6, 1);
-webkit-transform: -webkit-scale3d(0.6, 0.6, 1);
transform: scale3d(0.6, 0.6, 1);
}
100% {
opacity: .1;
-moz-transform: scale3d(1, 1, 1);
-o-transform: scale3d(1, 1, 1);
-ms-transform: scale3d(1, 1, 1);
-webkit-transform: scale3d(1, 1, 1);
-webkit-transform: -webkit-scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@-o-keyframes playButton {
0% {
opacity: .4;
-moz-transform: scale3d(0.6, 0.6, 1);
-o-transform: scale3d(0.6, 0.6, 1);
-ms-transform: scale3d(0.6, 0.6, 1);
-webkit-transform: scale3d(0.6, 0.6, 1);
-webkit-transform: -webkit-scale3d(0.6, 0.6, 1);
transform: scale3d(0.6, 0.6, 1);
}
100% {
opacity: .1;
-moz-transform: scale3d(1, 1, 1);
-o-transform: scale3d(1, 1, 1);
-ms-transform: scale3d(1, 1, 1);
-webkit-transform: scale3d(1, 1, 1);
-webkit-transform: -webkit-scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes playButton {
0% {
opacity: .4;
-moz-transform: scale3d(0.6, 0.6, 1);
-o-transform: scale3d(0.6, 0.6, 1);
-ms-transform: scale3d(0.6, 0.6, 1);
-webkit-transform: scale3d(0.6, 0.6, 1);
-webkit-transform: -webkit-scale3d(0.6, 0.6, 1);
transform: scale3d(0.6, 0.6, 1);
}
100% {
opacity: .1;
-moz-transform: scale3d(1, 1, 1);
-o-transform: scale3d(1, 1, 1);
-ms-transform: scale3d(1, 1, 1);
-webkit-transform: scale3d(1, 1, 1);
-webkit-transform: -webkit-scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}