.defore-bg:before
{
    opacity: 0.8;
    content: "";
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1.0, 1.0);
    transform: translateZ(0);
    background: #1B2030 url('/media/img/error/error_500_bg.jpg') top center no-repeat;
    background-size: cover;
    background-attachment: fixed;
    animation: grow 60s linear 10ms infinite;
    transition: all 0.2s ease-in-out;
    z-index: -2;
}

@media (min-width: 576px)
{
	.login-form { width: 26rem; }
}

@keyframes grow{
  0% { transform:scale(1)}
  50% { transform:scale(1.2)}
}

.cloud
{
    opacity: 0.5;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
    background: url('/media/img/error/cloud.png') 0% 0% repeat;
    background-size: contain;

    -webkit-animation-name: MOVE-BG;
    -webkit-animation-duration: 100s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes MOVE-BG {
   from {
     -webkit-transform: translateX(0);
   }
   to { 
     -webkit-transform: translateX(-187%);
   }
}