@-webkit-keyframes rotateAndOpacity {
  0% {
    transform: rotate(50deg);
    opacity: 0; }
  100% {
    transform: rotate(0deg);
    opacity: 1; } }

@-moz-keyframes rotateAndOpacity {
  0% {
    transform: rotate(50deg);
    opacity: 0; }
  100% {
    transform: rotate(0deg);
    opacity: 1; } }

@-o-keyframes rotateAndOpacity {
  0% {
    transform: rotate(50deg);
    opacity: 0; }
  100% {
    transform: rotate(0deg);
    opacity: 1; } }

@keyframes rotateAndOpacity {
  0% {
    transform: rotate(50deg);
    opacity: 0; }
  100% {
    transform: rotate(0deg);
    opacity: 1; } }

.login-bg {
  position: relative; }
  .login-bg.image {
    display: flex; }
    .login-bg.image .logo-animation {
      margin: auto; }
  .login-bg.animation {
    overflow: hidden; }
    .login-bg.animation .logo-animation {
      width: 450px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -225px;
      margin-left: -225px; }
      .login-bg.animation .logo-animation .logo-1, .login-bg.animation .logo-animation .logo-2, .login-bg.animation .logo-animation .logo-3 {
        position: absolute;
        opacity: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-size: 100%;
        transform-origin: 90% 90%;
        -webkit-animation: rotateAndOpacity 1.5s 1 forwards;
        -moz-animation: rotateAndOpacity 1.5s 1 forwards;
        -o-animation: rotateAndOpacity 1.5s 1 forwards;
        animation: rotateAndOpacity 1.5s 1 forwards;
        background-repeat: no-repeat; }
      .login-bg.animation .logo-animation .logo-1 {
        animation-delay: 2.5s;
        background-image: url("/Common/Images/logo-animation/1.png");
        z-index: 1; }
      .login-bg.animation .logo-animation .logo-2 {
        animation-delay: 1.5s;
        background-image: url("/Common/Images/logo-animation/2.png");
        z-index: 2;
        margin-top: 5px; }
      .login-bg.animation .logo-animation .logo-3 {
        animation-delay: 0.5s;
        background-image: url("/Common/Images/logo-animation/3.png");
        z-index: 3;
        margin-top: 30px; }

@media (max-width: 1024px) {
  .login-logo {
    display: none; }
  .login .logo {
    margin-left: -50%; }
  .logo-animation {
    width: 200px;
    height: 200px;
    margin-top: -100px;
    margin-left: -100px; } }