.car-icon{width: 24px; height: 48px; margin: 0; background-image: url("../../images/car-icon.svg"); background-repeat: no-repeat; background-size: contain; display: block; z-index: 1;}

.left-btm-svg {width: 24px; left: -12px; top: 40px; position: absolute; }
.left-btm-svg.animated{animation: wheelone 2s linear forwards;}
@keyframes wheelone{
    100% {
        top: calc(100% - 68px);
    }
}

.seg-right-svg{right: -12px; top: 50px; position: absolute;}
.seg-right-svg.animated{animation: wheeltwo 2s linear forwards; animation-delay: 1s;}
@keyframes wheeltwo{
    100% {
        top: calc(100% - 68px);
    }
}

.center-seperator .center-seperator-svg{top: 15px; left: -12px; width: 24px; position: absolute; z-index: 2;}
.center-seperator .center-seperator-svg.animated{animation: wheelthree 5s linear forwards; animation-delay: 1s;}
@keyframes wheelthree{
    100% {
        top: calc(100% - 68px);
    }
}

.two-col-left-svg{top: 50px; left: -12px; width: 24px; position: absolute; }
.two-col-left-svg.animated{animation: wheelfour 5s linear forwards; animation-delay: 1s;}
@keyframes wheelfour{
    100% {
        top: calc(100% - 68px);
    }
}


.two-col-right-svg{top: 50px; right: -12px; width: 24px; position: absolute; }
.two-col-right-svg.animated{animation: wheelfive 5s linear forwards; animation-delay: 1s;}
@keyframes wheelfive{
    100% {
        top: calc(100% - 68px);
    }
}

.plug-icon{
    animation: plugicon 1s linear infinite; 
}
@keyframes plugicon{
    0% {
        opacity: 0.5;
    }
    100%{
        opacity: 1;
    }
}


.seg-mobile-svg1{
    top: 38px;
    right: -11px;
    width: 24px;
    position: absolute;
    z-index: 1;
}

.seg-mobile-svg1.animated{
    animation: wheelsix 5s linear forwards; animation-delay: 2s;
}

@keyframes wheelsix{
    100% {
        top: calc(100% - 78px);
    }

}

.seg-mobile-svg2{
    top: 38px;
    left: -11px;
    width: 24px;
    position: absolute;
    z-index: 1;
}

.seg-mobile-svg2.animated{
    animation: wheelseven 5s linear forwards; animation-delay: 2s;
}

@keyframes wheelseven{
    100% {
        top: calc(100% - 78px);
    }
}

.seg-mobile-svg2{
    top: 38px;
    left: -11px;
    width: 24px;
    position: absolute;
    z-index: 1;
}

.seg-mobile-svg2.animated{
    animation: wheelseven 5s linear forwards; animation-delay: 2s;
}

@keyframes wheelseven{
    100% {
        top: calc(100% - 78px);
    }
}



.animation--hidden-bar {
    position: relative;
    overflow: hidden;
}

.smart-animation-view .animation--reval-bar--form-left {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}

.smart-animation-view .animation--reval-bar--form-right {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
}

.animation--reval-bar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    -webkit-transition: -webkit-transform 1.35s;
    transition: -webkit-transform 1.35s;
    transition: transform 1.35s;
    transition: transform 1.35s, -webkit-transform 1.35s;
    z-index: 10;
}

.smart-animation-view .animation--fade {
    opacity: 1;
}

.animation--fade {
    opacity: 0;
    -webkit-transition: opacity 1.35s;
    transition: opacity 1.35s;
}

.smart-animation-view .animation--from-left-fade {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

.animation--from-left-fade {
    -webkit-transform: translateX(-1.42857rem);
    transform: translateX(-1.42857rem);
    position: relative;
    -webkit-transition: opacity 1.35s, -webkit-transform 1.35s;
    transition: opacity 1.35s, -webkit-transform 1.35s;
    transition: transform 1.35s, opacity 1.35s;
    transition: transform 1.35s, opacity 1.35s, -webkit-transform 1.35s;
    opacity: 0;
}

.smart-animation-view .animation--from-right-fade {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

.animation--from-right-fade {
    -webkit-transform: translateX(1.42857rem);
    transform: translateX(1.42857rem);
    position: relative;
    -webkit-transition: opacity 1.35s, -webkit-transform 1.35s;
    transition: opacity 1.35s, -webkit-transform 1.35s;
    transition: transform 1.35s, opacity 1.35s;
    transition: transform 1.35s, opacity 1.35s, -webkit-transform 1.35s;
    opacity: 0;
}

.smart-animation-view .animation--from-top-fade,
.smart-animation-view.animation--from-top-fade {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);

}

.animation--from-top-fade {
    -webkit-transform: translateY(-1.42857rem);
    transform: translateY(-1.42857rem);
    position: relative;
    -webkit-transition: opacity 1.35s, -webkit-transform 1.35s;
    transition: opacity 1.35s, -webkit-transform 1.35s;
    transition: transform 1.35s, opacity 1.35s;
    transition: transform 1.35s, opacity 1.35s, -webkit-transform 1.35s;
    opacity: 0;
}

.smart-animation-view .animation--from-bottom-fade,
.smart-animation-view.animation--from-bottom-fade {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

.animation--from-bottom-fade {
    -webkit-transform: translateY(1.42857rem);
    transform: translateY(1.42857rem);
    position: relative;
    -webkit-transition: opacity 1.35s, -webkit-transform 1.35s;
    transition: opacity 1.35s, -webkit-transform 1.35s;
    transition: transform 1.35s, opacity 1.35s;
    transition: transform 1.35s, opacity 1.35s, -webkit-transform 1.35s;
    opacity: 0;
}

.smart-animation-view .animation-smooth-out,
.smart-animation-view.animation-smooth-out {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}

.animation-smooth-out {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
    -webkit-transition: opacity 0.7s cubic-bezier(0.694, 0, 0.335, 1), transform 0.7s cubic-bezier(0.694, 0, 0.335, 1);
    -o-transition: opacity 0.7s cubic-bezier(0.694, 0, 0.335, 1), transform 0.7s cubic-bezier(0.694, 0, 0.335, 1);
    -webkit-transition: opacity 0.7s cubic-bezier(0.694, 0, 0.335, 1), -webkit-transform 0.7s cubic-bezier(0.694, 0, 0.335, 1);
    transition: opacity 0.7s cubic-bezier(0.694, 0, 0.335, 1), -webkit-transform 0.7s cubic-bezier(0.694, 0, 0.335, 1);
    transition: opacity 0.7s cubic-bezier(0.694, 0, 0.335, 1), transform 0.7s cubic-bezier(0.694, 0, 0.335, 1);
    transition: opacity 0.7s cubic-bezier(0.694, 0, 0.335, 1), transform 0.7s cubic-bezier(0.694, 0, 0.335, 1), -webkit-transform 0.7s cubic-bezier(0.694, 0, 0.335, 1);
}

figure.animation--fade img {
    width: 100%;
    height: 100%;
    font-family: "object-fit: cover;";
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: 50% 50%;
    object-position: 50% 50%;
}

.smart-animation-view .animation--from-0-to-100,
.smart-animation-view.animation--from-0-to-100 {
    width: 100%;
}

.animation--from-0-to-100 {
    width: 0;
    -webkit-transition: width 1.35s;
    transition: width 1.35s;
}

.figure-animation-image {
    opacity: 0;
    -webkit-transition: opacity 1s cubic-bezier(0.694, 0, 0.335, 1);
    -o-transition: opacity 1s cubic-bezier(0.694, 0, 0.335, 1);
    transition: opacity 1s cubic-bezier(0.694, 0, 0.335, 1);
}

.smart-animation-view .figure-animation-image {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}

.smart-animation-zoom img, .smart-animation-zoom video{transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg); transform-style: preserve-3d; transition: all 0.3s linear; }
.smart-animation-view .smart-animation-zoom img, .smart-animation-view .smart-animation-zoom video{transform: translate3d(0px, 0px, 0px) scale3d(1.1, 1.1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg); }


.zoom-out img{transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg); transform-style: preserve-3d; transition: all 0.3s linear; }
.zoom-out:hover img{transform: translate3d(0px, 0px, 0px) scale3d(1.1, 1.1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg); }


.explain-right-svg{right: -12px; top: 130px; position: absolute;}
.explain-right-svg.animated{animation: explain-right-anim 5s linear forwards; animation-delay: 1.5s;}
@keyframes explain-right-anim{
    100% {
        top: calc(100% - 110px);
    }
}

.pr-left-svg{left: 10px; top: 95px; position: absolute;}
.pr-left-svg.animated{animation: pr-left-anim 5s linear forwards; animation-delay: 2s;}
@keyframes pr-left-anim{
    100% {
        top: calc(100% - 95px);
    }
}

/*-- media css starts here --*/
@media only screen and (min-width: 1024px){
    .hide-desktop{display: none;}
    .contact .frm_forms .form-field.frm_half{width: 100%; margin-left: 12px; margin-right: 12px; clear: none; float: none;}
    .contact .frm_forms .form-field.frm_half.frm_first{margin-left: 0;}
    .contact .frm_forms .form-field.frm_half.frm_last{margin-right: 0;}
}
@media only screen and (max-width: 1023px) and (min-width: 768px){
    .hide-tablet{display: none;}
}
@media only screen and (max-width: 767px) and (min-width: 200px){
    .hide-mobile{display: none;}
}