.logineffect {
    height: 100%;
    width: 100%;
    z-index: 20;
    overflow: hidden;
}

    .logineffect .grid {
        margin: 0em;
        padding: 15rem 0em;
    }


.logineffect {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -ms-transition: background-color 3s ease-in-out 2s;
  -moz-transition: background-color 3s ease-in-out 2s;
  -webkit-transition: background-color 3s ease-in-out 2s;
  transition: background-color 3s ease-in-out 2s;
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  -o-perspective: 1000px;
  -ms-perspective: 1000px;
  perspective: 1000px;
}


.pushed .logineffect
{
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.logineffect:after {
  position: absolute;
  z-index: 1;
  width: 140%;
  height: 180%;
  top: -30%;
  left: 0px;
  content: '';
  background: url(../../Images/login-background.png);
  -moz-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-animation-name: splash;
  -moz-animation-name: splash;
  -o-animation-name: splash;
  animation-name: splash;
  -ms-transition: opacity 3s ease-in-out, transform 5s ease-in-out;
  -webkit-transition: opacity 3s ease-in-out, transform 5s ease-in-out;
  -moz-transition: opacity 3s ease-in-out, transform 5s ease-in-out;
  transition: opacity 3s ease-in-out, transform 5s ease-in-out;
  opacity: .04;
  -webkit-animation-duration: 15s;
  -moz-animation-duration: 15s;
  -ms-animation-duration: 15s;
  -o-animation-duration: 15s;
  animation-duration: 15s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-transform: rotateX(35deg) rotateZ(0deg) rotateY(0deg) translateY(-14%) translateX(-14%) translateZ(370px);
  -moz-transform: rotateX(35deg) rotateZ(0deg) rotateY(0deg) translateY(-14%) translateX(-14%) translateZ(370px);
  transform: rotateX(35deg) rotateZ(0deg) rotateY(0deg) translateY(-14%) translateX(-14%) translateZ(370px);
}



@keyframes splash {
  0% {background-position: 0% 0%;}
  100% { background-position: 0% -475px;}
}

@-moz-keyframes splash {
  0% {background-position: 0% 0%;}
  100% {background-position: 0% -475px;}
}

@-webkit-keyframes splash {
  0% {background-position: 0% 0%; }
  100% { background-position: 0% -475px;}
}

@-ms-keyframes splash {
  0% {background-position: 0% 0%;}
  100% {background-position: 0% -475px;}
}

@-o-keyframes splash {
  0% {background-position: 0% 0%;}
  100% { background-position: 0% -475px;}
}

@keyframes colors {
   0% {background-color: #78c7c3;}
  12% { background-color: #3a75a7;}
  25% {background-color: #cae8ef; }
  37% { background-color: #5de2d0;}
  50% {background-color: #564F8A;}
  62% { background-color: #76a5a7;}
  75% {background-color: #373330;}
  87% { background-color: #5BBD72;}
  100% {background-color: #62C61F;}
}

@-moz-keyframes colors {
   0% {background-color: #78c7c3;}
  12% { background-color: #3a75a7;}
  25% {background-color: #cae8ef; }
  37% { background-color: #5de2d0;}
  50% {background-color: #564F8A;}
  62% { background-color: #76a5a7;}
  75% {background-color: #373330;}
  87% { background-color: #5BBD72;}
  100% {background-color: #62C61F;}
}

@-webkit-keyframes colors {
    0% {background-color: #78c7c3;}
  12% { background-color: #3a75a7;}
  25% {background-color: #cae8ef; }
  37% { background-color: #5de2d0;}
  50% {background-color: #564F8A;}
  62% { background-color: #76a5a7;}
  75% {background-color: #373330;}
  87% { background-color: #5BBD72;}
  100% {background-color: #62C61F;}
}

@-ms-keyframes colors {
   0% {background-color: #78c7c3;}
  12% { background-color: #3a75a7;}
  25% {background-color: #cae8ef; }
  37% { background-color: #5de2d0;}
  50% {background-color: #564F8A;}
  62% { background-color: #76a5a7;}
  75% {background-color: #373330;}
  87% { background-color: #5BBD72;}
  100% {background-color: #62C61F;}
}

@-o-keyframes colors {
   0% {background-color: #78c7c3;}
  12% { background-color: #3a75a7;}
  25% {background-color: #cae8ef; }
  37% { background-color: #5de2d0;}
  50% {background-color: #564F8A;}
  62% { background-color: #76a5a7;}
  75% {background-color: #373330;}
  87% { background-color: #5BBD72;}
  100% {background-color: #62C61F;}
}