@mixin calc($property, $expression) {
  #{$property}: -moz-calc(#{$expression});
  #{$property}: -webkit-calc(#{$expression});
  #{$property}: calc(#{$expression});
}

$marginHeight: 170px;

.login-layout {
  display: block;
  width: 100%;
  @include calc(height, '100vh - '$marginHeight);
  margin: 0 auto;
  margin-top: 55px;
  padding: 0;
  background: url(../../../../../assets/img/login/bg.png) no-repeat right 205px;
  background-size: 100% auto;
  background-attachment: fixed;

  @media (max-height: 640px) {
    background: url(../../../../../assets/img/login/bg.png) no-repeat right 195px;
    background-size: 100% auto;
    background-attachment: fixed;
  }

  @media (max-height: 640px) and (min-width: 760px) {
    background: url(../../../../../assets/img/login/bg.png) no-repeat right -45px;
    background-size: 100% auto;
    background-attachment: fixed;
  }

  @media (min-height: 641px) and (max-height: 1024px) {
    background: url(../../../../../assets/img/login/bg.png) no-repeat right 65px;
    background-size: 100% auto;
    background-attachment: fixed;
  }

  @media (min-width:480px) and (max-width: 760px) and (min-height: 641px) and (max-height: 1024px) {
    background: url(../../../../../assets/img/login/bg.png) no-repeat right 40px;
    background-size: 100% auto;
    background-attachment: fixed;
  }

  @media (min-width: 761px) and (max-width:1024px) and (min-height: 641px) and (max-height: 1024px) {
    background: url(../../../../../assets/img/login/bg.png) no-repeat right 0px;
    background-size: 500px auto;
    background-attachment: fixed;
  }

  @media (min-width: 1025px) and (min-height: 641px) and (max-height: 1024px) {
    background: url(../../../../../assets/img/login/bg.png) no-repeat right 0px;
    background-size: 500px auto;
    background-attachment: fixed;
  }

  @media (min-height: 1025px) {
    background: url(../../../../../assets/img/login/bg.png) no-repeat right 30px;
    background-size: 100% auto;
    background-attachment: fixed;
  }
}