Your IP : 216.73.216.95
.maxcoach-flip-box {
min-height: 280px;
position: relative;
-webkit-perspective: 1000px;
perspective: 1000px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
.layer {
position: absolute;
width: 100%;
height: 100%;
-webkit-transition: all .6s ease-in-out;
-o-transition: all .6s ease-in-out;
transition: all .6s ease-in-out;
text-align: center;
}
.overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.layer-inner {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
}
.layer-content {
padding: 35px;
width: 100%;
}
.image {
margin: 0 0 20px 0;
display: inline-block;
width: 100%;
img {
width: 50%;
}
}
.maxcoach-icon-wrap,
.heading-wrap {
line-height: 0;
}
.maxcoach-icon-wrap {
margin-bottom: 30px;
}
.maxcoach-icon-view {
display: inline-block;
font-size: 60px;
}
.icon {
color: #fff;
}
.maxcoach-svg-icon {
width: 60px;
}
.heading {
display: inline-block;
color: #fff;
font-size: 26px;
margin-bottom: 0;
}
.description-wrap {
margin-top: 20px;
}
.description {
color: #fff;
font-size: 16px;
line-height: 1.875;
}
.tm-button-wrapper {
margin: 40px 0 0;
}
/**
* Default back side background is dark then
* Reset all buttons style to light skin.
*/
.tm-button {
&.style-flat {
color: #111;
&:hover {
color: #fff;
}
&:before {
background: #fff;
}
}
&.style-text {
color: #fff;
padding-bottom: 0;
}
&.style-left-line,
&.style-bottom-line {
color: #fff;
.button-content-wrapper {
&:before {
background: rgba(255, 255, 255, .4);
}
&:after {
background: #fff;
}
}
}
&.style-border,
&.style-thick-border {
border-color: #fff;
color: #fff;
&:hover {
color: #111;
}
&:after {
background: #fff;
}
}
}
}
@media (max-device-width: 1024px) {
.maxcoach-flip-box {
cursor: pointer;
}
}
.front-side {
background-color: #111;
}
.back-side {
background-color: #5758e0;
box-shadow: 0 40px 40px -40px rgba(51, 51, 51, .13);
display: block;
}
.elementor-flip-box__button.elementor-button {
cursor: pointer;
-ms-flex-item-align: center;
align-self: center;
margin-left: auto;
margin-right: auto;
border: solid 2px white;
color: white;
background: transparent;
}
.elementor-flip-box__button.elementor-button:hover {
background: transparent;
text-decoration: none;
}
.maxcoach-flip-box--3d {
.layer-inner {
-webkit-transform: translateZ(90px) scale(0.91);
transform: translateZ(90px) scale(0.91);
}
.overlay {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translateZ(0.1px);
transform: translateZ(0.1px);
}
}
.maxcoach-flip-box--effect-flip {
.maxcoach-flip-box {
-webkit-perspective: 1000px;
perspective: 1000px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
&:hover {
.back-side {
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
}
}
.layer {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.front-side {
-webkit-transform: none;
-ms-transform: none;
transform: none;
z-index: 1;
}
&.maxcoach-flip-box--direction-right {
.back-side {
-webkit-transform: rotateX(0) rotateY(-180deg);
transform: rotateX(0) rotateY(-180deg);
}
.maxcoach-flip-box {
&:hover {
.front-side {
-webkit-transform: rotateX(0) rotateY(180deg);
transform: rotateX(0) rotateY(180deg);
}
}
}
}
&.maxcoach-flip-box--direction-left {
.back-side {
-webkit-transform: rotateX(0) rotateY(180deg);
transform: rotateX(0) rotateY(180deg);
}
.maxcoach-flip-box {
&:hover {
.front-side {
-webkit-transform: rotateX(0) rotateY(-180deg);
transform: rotateX(0) rotateY(-180deg);
}
}
}
}
&.maxcoach-flip-box--direction-up {
.back-side {
-webkit-transform: rotateX(-180deg) rotateY(0);
transform: rotateX(-180deg) rotateY(0);
}
.maxcoach-flip-box {
&:hover {
.front-side {
-webkit-transform: rotateX(180deg) rotateY(0);
transform: rotateX(180deg) rotateY(0);
}
}
}
}
&.maxcoach-flip-box--direction-down {
.back-side {
-webkit-transform: rotateX(180deg) rotateY(0);
transform: rotateX(180deg) rotateY(0);
}
.maxcoach-flip-box {
&:hover {
.front-side {
-webkit-transform: rotateX(-180deg) rotateY(0);
transform: rotateX(-180deg) rotateY(0);
}
}
}
}
}
.maxcoach-flip-box--effect-push {
.front-side {
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
&.maxcoach-flip-box--direction-right {
.maxcoach-flip-box {
&:hover {
.front-side {
-webkit-transform: translateX(100%) translateY(0);
-ms-transform: translateX(100%) translateY(0);
transform: translateX(100%) translateY(0);
}
}
}
}
&.maxcoach-flip-box--direction-left {
.maxcoach-flip-box {
&:hover {
.front-side {
-webkit-transform: translateX(-100%) translateY(0);
-ms-transform: translateX(-100%) translateY(0);
transform: translateX(-100%) translateY(0);
}
}
}
}
&.maxcoach-flip-box--direction-up {
.maxcoach-flip-box {
&:hover {
.front-side {
-webkit-transform: translateX(0) translateY(-100%);
-ms-transform: translateX(0) translateY(-100%);
transform: translateX(0) translateY(-100%);
}
}
}
}
&.maxcoach-flip-box--direction-down {
.maxcoach-flip-box {
&:hover {
.front-side {
-webkit-transform: translateX(0) translateY(100%);
-ms-transform: translateX(0) translateY(100%);
transform: translateX(0) translateY(100%);
}
}
}
}
}
.maxcoach-flip-box--effect-slide,
.maxcoach-flip-box--effect-push {
.maxcoach-flip-box {
overflow: hidden;
&:hover {
.back-side {
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
}
}
&.maxcoach-flip-box--direction-right {
.back-side {
-webkit-transform: translateX(-100%) translateY(0);
-ms-transform: translateX(-100%) translateY(0);
transform: translateX(-100%) translateY(0);
}
}
&.maxcoach-flip-box--direction-left {
.back-side {
-webkit-transform: translateX(100%) translateY(0);
-ms-transform: translateX(100%) translateY(0);
transform: translateX(100%) translateY(0);
}
}
&.maxcoach-flip-box--direction-up {
.back-side {
-webkit-transform: translateX(0) translateY(100%);
-ms-transform: translateX(0) translateY(100%);
transform: translateX(0) translateY(100%);
}
}
&.maxcoach-flip-box--direction-down {
.back-side {
-webkit-transform: translateX(0) translateY(-100%);
-ms-transform: translateX(0) translateY(-100%);
transform: translateX(0) translateY(-100%);
}
}
}
.maxcoach-flip-box--effect-zoom-out {
.maxcoach-flip-box {
.front-side {
-webkit-transition: opacity 0.35s, width 0.1ms, -webkit-transform 0.7s;
transition: opacity 0.35s, width 0.1ms, -webkit-transform 0.7s;
-o-transition: transform 0.7s, opacity 0.35s, width 0.1ms;
transition: transform 0.7s, opacity 0.35s, width 0.1ms;
transition: transform 0.7s, opacity 0.35s, width 0.1ms, -webkit-transform 0.7s;
opacity: 1;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
z-index: 1;
width: 100%;
}
&:hover {
.front-side {
width: 0;
opacity: 0;
-webkit-transform: scale(0.7);
-ms-transform: scale(0.7);
transform: scale(0.7);
-webkit-transition: opacity 0.7s 0.1s, width 0.1ms 0.7s, -webkit-transform 0.8s;
transition: opacity 0.7s 0.1s, width 0.1ms 0.7s, -webkit-transform 0.8s;
-o-transition: transform 0.8s, opacity 0.7s 0.1s, width 0.1ms 0.7s;
transition: transform 0.8s, opacity 0.7s 0.1s, width 0.1ms 0.7s;
transition: transform 0.8s, opacity 0.7s 0.1s, width 0.1ms 0.7s, -webkit-transform 0.8s;
}
}
}
}
.maxcoach-flip-box--effect-zoom-in {
.maxcoach-flip-box {
.back-side {
-webkit-transition: opacity 0.5s 0.2s, -webkit-transform 0.7s;
transition: opacity 0.5s 0.2s, -webkit-transform 0.7s;
-o-transition: transform 0.7s, opacity 0.5s 0.2s;
transition: transform 0.7s, opacity 0.5s 0.2s;
transition: transform 0.7s, opacity 0.5s 0.2s, -webkit-transform 0.7s;
opacity: 0;
-webkit-transform: scale(0.7);
-ms-transform: scale(0.7);
transform: scale(0.7);
}
&:hover {
.back-side {
-webkit-transition: opacity 0.5s, -webkit-transform 0.7s;
transition: opacity 0.5s, -webkit-transform 0.7s;
-o-transition: transform 0.7s, opacity 0.5s;
transition: transform 0.7s, opacity 0.5s;
transition: transform 0.7s, opacity 0.5s, -webkit-transform 0.7s;
opacity: 1;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
}
}
}
.maxcoach-flip-box--effect-fade {
.maxcoach-flip-box {
.back-side {
opacity: 0;
}
&:hover {
.back-side {
opacity: 1;
}
}
}
}