@keyframes zoomIn {
    0% {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        right:0;
    }
}
@keyframes fadeInUp {
    0% {
        opacity: 0;
        top: -50px;
    }
    100% {
        right:0;
        top: 0;
    }
}
@keyframes fadeInDown {
    0% {
        opacity: 0;
        bottom: -50px;
    }
    100% {
        right:0;
        bottom: 0;
    }
}
@keyframes zoomInIcon {
    0% {
        transform: scale(0.9);
    }

    100% {
        transform: scale(1.05);
    }
}
@keyframes Expand {
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}
@keyframes quoteExpand {
    0% {
        opacity: 0;
        transform: rotate(45deg) scale3d(0.3, 0.3, 0.3);
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
        transform:rotate(0deg) scale3d(1, 1, 1);
    }
}
@keyframes quoteExpand2 {
    0% {
        opacity: 0;
        transform: rotate(-45deg) scale3d(0.3, 0.3, 0.3);
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
        transform:rotate(0deg) scale3d(1, 1, 1);
    }
}
@keyframes rightSide {
    0% {
        right:-40%;
    }
    100% {
        right:0;
    }
}
@keyframes leftSide {
    0% {
        left:-60%;
    }
    100% {
        left:0;
    }
}
.login-wrapper{overflow: hidden;}
.login-content-inner h1,
.login-content-inner h1 span {position: relative; animation-name: fadeInDown; animation-duration: 1s; animation-timing-function: ease-in-out;animation-fill-mode: both; animation-delay: 0.3s;}
.login-content-inner h1 span{animation-delay: 0.6s;}
.login-content-inner h1 span:after{animation-name: Expand; animation-duration: 1s; animation-timing-function: ease-in-out;animation-fill-mode: both; animation-delay: 3.5s;}
.login-content-inner .subtitle{animation-name: fadeIn; animation-duration: 1s; animation-timing-function: ease-in-out;animation-fill-mode: both; animation-delay: 1.2s;}

.login-content-inner .service-box{animation-name: zoomIn;animation-duration: 0.6s; animation-timing-function: ease-out;animation-fill-mode: both;}
.login-content-inner .service-box:nth-child(1){ animation-delay: 1.5s; }
.login-content-inner .service-box:nth-child(2){ animation-delay: 1.8s; }
.login-content-inner .service-box:nth-child(3){ animation-delay: 2.1s; }
.login-content-inner .service-box figure img { animation-direction: alternate; animation-iteration-count: infinite; animation-name: zoomInIcon; animation-duration: 1s; animation-timing-function: ease-in-out;animation-fill-mode: both; transform: scale(1); transition: all ease-in-out 0.5s;}
.login-content-inner .service-box:nth-child(1) figure img{ animation-delay: 0.1s; }
.login-content-inner .service-box:nth-child(2) figure img{ animation-delay: 0.5s; }
.login-content-inner .service-box:nth-child(3) figure img{ animation-delay: 1s; }

.login-quote{animation-name: fadeInDown; animation-duration: 1s; animation-timing-function: ease-in-out;animation-fill-mode: both; animation-delay: 2.6s;}

/*.login-form {position: relative;animation-name: rightSide;animation-duration: 0.6s; animation-timing-function: ease-out;animation-fill-mode: both;animation-delay: 0.1s;}
.login-content {position: relative;animation-name: leftSide;animation-duration: 0.6s; animation-timing-function: ease-out;animation-fill-mode: both;animation-delay: 0.1s;}*/

.login-form-inner{animation-name: fadeIn; animation-duration: 1s; animation-timing-function: ease-in-out;animation-fill-mode: both; animation-delay: 0.5s;}




/*.login-quote:before{animation-name: quoteExpand2; animation-duration: 1s; animation-timing-function: ease-in-out;animation-fill-mode: both; animation-delay: 1.5s;}
.login-quote:after{animation-name: quoteExpand; animation-duration: 1s; animation-timing-function: ease-in-out;animation-fill-mode: both; animation-delay: 2s;}*/