.login-box {
    background-color: #000035;
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    font-family: 'Montserrat', sans-serif;
    z-index: 99;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left;
}
.login-content-wrapper {
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    width: 100%;
}

.login-box .login-content-wrapper .login-content {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 450px;
    margin-bottom: 100px;
}

.login-box .login-content-wrapper .form-card {
    padding: 30px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 10px;
}

.login-box .login-content-wrapper .form-card .form-head {
    margin-bottom: 15px;
    padding-bottom: 15px;
}

.login-box .login-content-wrapper .form-card .form-head .logo {
    margin-bottom: 10px;
}

.login-box .login-content-wrapper .form-card .form-head .title {
    color: #0e0e0e;
    font-weight: 700;
}

.login-box .login-content-wrapper .form-card .form-head .sub-title {
    color: #0e0e0e;
    font-weight: 700;
}



.snowing {
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 100%
  }
  
  .snowing .small {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 50%;
    animation-name: snow-fall, snow-shake;
    animation-duration: 12s, 4s;
    animation-timing-function: linear, ease-in-out;
    animation-iteration-count: infinite, infinite;
    top: -100%;
    
    &:nth-child(1) {
      left: 210px;
      top: -40px;
      animation-delay: 9s, .3s;
    }
    &:nth-child(2) {
      left: 400px;
      top: -50px;
      animation-delay: 6s, .3s;
    }
    &:nth-child(3) {
      left: 720px;
      top: -130px;
      animation-delay: 8s, .3s;
    }
    &:nth-child(4) {
      left: 140px;
      animation-delay: 10s, .3s;
    }
    &:nth-child(5) {
      left: 500px;
      animation-delay: 7s, .2s;
    }
    &:nth-child(6) {
      left: 150px;
      top: -30px;
      animation-delay: 5.2s, .3s;
    }
    &:nth-child(7) {
      left: 200px;
      top: -20px;
      animation-delay: 3.4s, .3s;
    }
    &:nth-child(8) {
      left: 70px;
      top: -330px;
      animation-delay: 6.6s, .3s;
    }
    &:nth-child(9) {
      left: 380px;
      top: -90px;
      animation-delay: 5.6s, .3s;
    }
    &:nth-child(10) {
      left: 130px;
      animation-delay: 11s, .2s;
    }
    &:nth-child(11) {
      left: 20px;
      animation-delay: 10.5s, .3s;
    }
    &:nth-child(12) {
      left: 620px;
      top: -40px;
      animation-delay: 8s, .3s;
    }
    &:nth-child(13) {
      left: 400px;
      top: -180px;
      animation-delay: 3.7s, 3s;
    }
    &:nth-child(14) {
      left: 500px;
      top: -370px;
      animation-delay: 6s, .3s;
    }
    &:nth-child(15) {
      left: 660px;
      top: -20px;
      animation-delay: 9s, .3s;
    }
    &:nth-child(16) {
      left: 610px;
      top: -80px;
      animation-delay: 7.3s, .3s;
    }
    &:nth-child(17) {
      left: 20px;
      top: -210px;
      animation-delay: 6.8s, 2s;
    }
    &:nth-child(18) {
      left: 670px;
      top: -200px;
      animation-delay: 6.5s, .6s;
    }
    &:nth-child(19) {
      left: 210px;
      top: -120px;
      animation-delay: 4s, .3s;
    }
    &:nth-child(20) {
      left: 20px;
      top: -110px;
      animation-delay: -1.1s, -.1s;
    }
  }
  
  .snowing .medium {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 50%;
    animation-name: snow-fall, snow-shake;
    animation-duration: 12s, 4s;
    animation-timing-function: linear, ease-in-out;
    animation-iteration-count: infinite, infinite;
    top: -100%;
    
    &:nth-child(1) {
        right: 300px;
      top: -420px;
      animation-delay: 3.4s, 1s;
    }
    &:nth-child(2) {
        right: 530px;
      animation-delay: .2s, .1s;
    }
    &:nth-child(3) {
        right: 340px;
      top: -110px;
      animation-delay: 6s, 2s;
    }
    &:nth-child(4) {
        right: 250px;
      top: -390px;
      animation-delay: 3.4s, 3s;
    }
    &:nth-child(5) {
        right: 400px;
      top: -150px;
      animation-delay: 8.4s, .3s;
    }
    &:nth-child(6) {
        right: 720px;
      top: -240px;
      animation-delay: 7.7s, 1s;
    }
    &:nth-child(7) {
        right: 350px;
      top: -180px;
      animation-delay: 6s, 0.5s;
    }
    &:nth-child(8) {
        right: 560px;
      animation-delay: 1s, 0.5s;
    }
    &:nth-child(9) {
        right: 10px;
      top: -310px;
      animation-delay: 8.2s, 0.5s;
    }
    &:nth-child(10) {
        right: 40px;
      top: -220px;
      animation-delay: 3s, 1s;
    }
    &:nth-child(11) {
        right: 220px;
      top: -530px;
      animation-delay: .6s, 3s;
    }
    &:nth-child(12) {
        right: 630px;
      top: -10px;
      animation-delay: 9.4s, 2s;
    }
    &:nth-child(13) {
        right: 420px;
      top: -60px;
      animation-delay: 8s, 3s;
    }
    &:nth-child(14) {
        right: 580px;
      animation-delay: 2s, .3s;
    }
    &:nth-child(15) {
        right: 420px;
      top: -180px;
      animation-delay: 7s, 1s;
    }
    &:nth-child(16) {
        right: 360px;
      animation-delay: 8s, .3s;
    }
    &:nth-child(17) {
        right: 90px;
      top: -190px;
      animation-delay: 4.5s, 1s;
    }
    &:nth-child(18) {
        right: 130px;
      top: -330px;
      animation-delay: 8.2s, 1s;
    }
    &:nth-child(19) {
        right: 150px;
      top: -490px;
      animation-delay: 6.5s, .1s;
    }
    &:nth-child(20) {
      right: 640px;
      top: -270px;
      animation-delay: 10s, 1.5s;
    }
  }
  
  @keyframes snow-fall {
    0% {
      top: -10%;
    }
    100% {
      top: 100%;
    }
  }
  @keyframes snow-shake {
    0% {
      transform: translateX(0px);
    }
    50% {
      transform: translateX(60px);
    }
    100% {
      transform: translateX(0px);
    }
  }
  
  .wall-snow {
    position: absolute;
    background-color: #f9f8ff;
    width: 100%;
    height: 40px;
    top: 20px;
    
    &:before {
      content: "";
      position: absolute;
      width: 120px;
      height: 80px;
      border-radius: 50%;
      background-color: #f9f8ff;
      top: 0px;
      left: 40px;
    }
    
    &:after {
      content: "";
      position: absolute;
      width: 200px;
      height: 70px;
      border-radius: 50%;
      background-color: #f9f8ff;
      top: 0px;
      left: 140px;
      transform: rotate(-2deg);
    }
  }