.interactive-card{position:relative;width:100%;height:600px;display:block;z-index:0;-webkit-display:flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;overflow:hidden;}
.add-shadow{-webkit-box-shadow:0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);box-shadow:0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);}
.interactive-card .front-content{position:relative;display:block;-webkit-border-radius:0px;border-radius:0px;z-index:1;-webkit-transform:scale(1);transform:scale(1);}
.interactive-card .front-content:before{content:"";position:absolute;width:120px;height:120px;background-color:rgba( 255,255,255,0.4 );top:50%;left:50%;transform:translate(-50%, -50%);-webkit-border-radius:50%;border-radius:50%;z-index:1;opacity:0.2;-webkit-animation:zoomOut;-o-animation:zoomOut;animation:zoomOut;animation-delay:.8s;}
.interactive-card .front-content:after{content:"";position:absolute;width:80px;height:80px;background-color:rgba( 255,255,255,0.4 );top:50%;left:50%;transform:translate(-50%, -50%);-webkit-border-radius:50%;border-radius:50%;z-index:-1;opacity:0.1;-webkit-animation:zoomOut;-o-animation:zoomOut;animation:zoomOut;}
.interactive-card .front-content .image-screen{position:relative;width:100%;height:100%;z-index:11;cursor:pointer;background-repeat:no-repeat;background-size:cover;background-position:top;transition:.5s;}
.interactive-card .front-text-content{width:100%;height:100%;-webkit-display:flex;display:flex;align-items:center;justify-content:center;}
.interactive-card .front-text-content .image-screen{background:#4d4d4d;width:100%;height:100%;padding:30px;-webkit-display:flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-justify-content:center;justify-content:center;text-align:center;-webkit-transition:.5s;transition:.5s;}
.interactive-card .front-text-content .image-screen:hover{background:rgba( 77,77,77,.6 );}
.interactive-card .front-text-content .header .card-number{font-size:2em;font-weight:700;color:#fff;margin-top:0px;}
.interactive-card .front-text-content .header .title{font-size:1.1em;line-height:1.5;margin-bottom:1em;letter-spacing:.15em;text-transform:uppercase;}
.interactive-card .front-text-content .front-text-body{font-size:.85em;color:#e9e9e9;}
.interactive-card .front-text-content .footer{margin-top:1em;}
.interactive-card .front-text-content .footer a.interactive-btn{display:inline-block;padding:8px 25px;font-size:.85em;letter-spacing:.15em;-webkit-transition:.4s;transition:.4s;text-decoration:none;text-transform:uppercase;-webkit-border-radius:4px;border-radius:4px;}
.interactive-card .front-text-content .footer a.interactive-btn:hover{background:#02CC7B;}
.interactive-card .content{position:absolute;width:100%;height:100%;top:0px;left:0px;bottom:0px;right:0px;background:#fff;z-index:-100;opacity:0;transition:1s;}
.interactive-card .content .content-inner{width:100%;height:100%;display:flex;align-items:center;justify-content:flex-end;}
.interactive-card .content-show{z-index:100;opacity:1;}
.interactive-card .content .content-inner .image{width:100%;height:100%;overflow:hidden;background-size:cover;background-repeat:no-repeat;background-position:center;opacity:0.7;-webkit-transition:.4s;transition:.4s;}
.interactive-card .content .text{display:block !important;}
.interactive-card .text-inner{display:block;max-width:100%;max-height:100%;padding:20px;}
.interactive-card .content .image img{max-height:100%;}
.interactive-card .content:hover .image{opacity:1;}
.interactive-card .content .text{width:100%;font-size:14px;line-height:27px;display:flex;-webkit-display:flex;align-items:center;-webkit-align-items:center;justify-content:center;-webkit-justify-content:center;}
.interactive-card .content .text.center-text{text-align:center;}
.interactive-card .content .text .title{font-size:28px;font-weight:600;text-transform:capitalize;line-height:1;color:#313131;margin-top:0px;}
.interactive-card .content iframe{width:100%;height:100%;border:0px;}
.interactive-card .content .content-overflow{width:100%;height:100%;padding:30px;overflow-y:scroll;}
.interactive-card .close-me{position:absolute;width:30px;height:30px;top:15px;right:15px;z-index:100;line-height:30px;text-align:center;border-radius:50%;font-size:13px;cursor:pointer;}
.interactive-card .interactive-btn{display:inline-block;padding:8px 25px;background:#e9e9e9;color:#fff;border-radius:4px;transition:.5s;background:#E91E63;}
.interactive-card .interactive-btn:hover{color:#fff;text-decoration:none;background:#C2185B;}
.interactive-card .carousel-container{overflow:hidden;}
.interactive-card .carousel{padding:0px;margin:0px;list-style:none;}
.interactive-card .carousel li{float:left;}
.interactive-card .carousel li img{max-width:100%;}
.interactive-card .navigation{position:absolute;width:100%;height:auto;padding:15px;bottom:15px;left:0px;right:0px;width:100%;height:auto;text-align:center;z-index:10;}
.interactive-card .navigation a{display:inline-block;padding:8px 15px;background:#f9f9f9;-webkit-border-radius:25px;border-radius:25px;font-size:12px;font-weight:600;color:#4d4d4d;text-transform:uppercase;text-decoration:none;-webkit-transition:.4s;transition:.4s;}
.interactive-card .navigation a:hover{background:#ededed;}
.interactive-card .interactive-button{display:inline-block;padding:15px 22px;background:#00C853;font-size:14px;font-weight:600;color:#fff;text-transform:uppercase;text-decoration:none;-webkit-transition:.3s;transition:.3s;-webkit-border-radius:4px;border-radius:4px;}
.interactive-card .interactive-button:hover{background:#03b048;}
.interactive-card .fade-out{-webkit-animation:fadeOut .5s;-o-animation:fadeOut .5s;animation:fadeOut .5s;transition:.5s;opacity:0;}
@keyframes fadeOut {
0%{opacity:1;transition:0.5s;}
100%{opacity:0;transition:0.5s;}
}
.interactive-card .fade-in{-webkit-animation:fadeIn .5s;-o-animation:fadeIn .5s;animation:fadeIn .5s;transition:.5s;opacity:1;}
@keyframes fadeIn {
0%{opacity:0;transition:0.5s;}
100%{opacity:1;transition:0.5s;}
}
.interactive-card .zoom-out{-webkit-animation:zoomOut 1.5s;-o-animation:zoomOut 1.5s;animation:zoomOut 1.5s;opacity:0;}
@keyframes zoomOut {
0%{-webkit-transform:scale(1);transform:scale(1);transition:.5s;opacity:1;}
25%{-webkit-transform:scale(.9);transform:scale(.9);transition:.5s;}
100%{-webkit-transform:scale(6);transform:scale(6);transition:1.4s;opacity:0;}
}
.interactive-card .zoom-in{-webkit-animation:zoomIn 1.5s;-o-animation:zoomIn 1.5s;animation:zoomIn 1.5s;opacity:1;}
@keyframes zoomIn {
0%{-webkit-transform:scaleX(4) scaleY(2);transform:scaleX(4) scaleY(2);transition:.5s;opacity:0;}
25%{-webkit-transform:scale(.9);transform:scale(.9);transition:.5s;}
100%{-webkit-transform:scale(1);transform:scale(1);transition:1.4s;opacity:1;}
}
.interactive-card .slide-in-left{transition:.5s;-webkit-animation:slideInLeft 1.5s;-o-animation:slideInLeft 1.5s;animation:slideInLeft 1.5s;transform:translateX(0%);opacity:1;z-index:100;}
@keyframes slideInLeft {
0%{transform:translateX(-100%);transition:.3s;}
50%{transform:translateX(10%);transition:.4s;}
100%{transform:translateX(0%);transition:.5s}
}
.interactive-card .slide-in-swing-left{transition:.5s;-webkit-animation:slideInSwingLeft 1.2s;-o-animation:slideInSwingLeft 1.2s;animation:slideInSwingLeft 1.2s;transform:translateX(0%);opacity:1;z-index:100;}
@keyframes slideInSwingLeft {
0%{transform:translateX(-100%) scale(0);transition:.3s;}
50%{transform:translateX(30%) scale(1.2);transition:.4s;}
100%{transform:translateX(0%) scale(1);transition:.5s}
}
.interactive-card .slide-in-right{transition:.5s;-webkit-animation:slideInRight 1.5s;-o-animation:slideInRight 1.5s;animation:slideInRight 1.5s;transform:translateX(0%);opacity:1;z-index:100;}
@keyframes slideInRight {
0%{transform:translateX(100%);transition:.3s;}
50%{transform:translateX(-10%);transition:.4s;}
100%{transform:translateX(0%);transition:.5s}
}
.interactive-card .slide-in-swing-right{transition:.5s;-webkit-animation:slideInSwingRight 1.2s;-o-animation:slideInSwingRight 1.2s;animation:slideInSwingRight 1.2s;transform:translateX(0%);opacity:1;z-index:100;}
@keyframes slideInSwingRight {
0%{transform:translateX(100%) scale(0);transition:.3s;}
50%{transform:translateX(-30%) scale(1.2);transition:.4s;}
100%{transform:translateX(0%) scale(1);transition:.5s}
} @media only screen and ( min-width: 768px ) and (max-width: 992px){}
@media only screen and (max-width: 480px) {
.interactive-card .front-content.front-text-content{width:100%;}
.interactive-card .front-content.front-text-content .image-screen:hover{background:none;}
.interactive-card .content .text{padding:15px;}
.interactive-card .content .text .title{font-size:18px;line-height:27px;}
.interactive-card .content .image{width:60%;}
} .eael-interactive-card-rear-img-align-left .interactive-card .content .content-inner{-webkit-flex-direction:row-reverse;flex-direction:row-reverse;}
.eael-interactive-card-rear-img-align-top .interactive-card .content .content-inner {
-webkit-flex-direction: column-reverse;
flex-direction: column-reverse;
justify-content: baseline;
}