.flip-box{perspective:1000px;height:500px;cursor:pointer}.flip-box,.flip-box-inner{width:100%;position:relative}.flip-box-inner{height:100%;text-align:center}.flip-box .flip-box-front{z-index:1}.flip-box .flip-box-front.front-light{background-color:var(--primary-color);color:#fff}.flip-box .flip-box-front.front-light:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.5);z-index:-1}.flip-box .flip-box-back{background-color:var(--primary-color);color:var(--primary-text-color);z-index:100}.flip-box .flip-box-back .btn{background-color:var(--button-color-on-primary);color:var(--button-text-color-on-primary);border-color:var(--button-color-on-primary)}.flip-box .flip-box-back .btn:hover{background-color:var(--button-color-on-primary-hover);border-color:var(--button-color-on-primary-hover)}.flip-box .flip-box-back,.flip-box .flip-box-front{background-repeat:no-repeat;background-size:cover;padding:3rem 1rem;position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}.flip-box.flip-effect .flip-box-inner{transition:transform .8s;transform-style:preserve-3d}.flip-box.flip-effect.flipped .flip-box-inner{transform:rotateY(180deg)}.flip-box.flip-effect .flip-box-back,.flip-box.flip-effect .flip-box-front{-webkit-backface-visibility:hidden;backface-visibility:hidden}.flip-box.flip-effect .flip-box-back{transform:rotateY(180deg)}.flip-box.fade-effect .flip-box-front{opacity:1;transition:opacity .6s ease-in-out}.flip-box.fade-effect .flip-box-back{opacity:0;transition:opacity .6s ease-in-out}.flip-box.fade-effect.flipped .flip-box-front{opacity:0}.flip-box.fade-effect.flipped .flip-box-back{opacity:1}