#background {
    position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  transform: translate(-50%, -50%);
  transition: 1s opacity;
  filter:opacity(50%);
 }	



#login-container {
    /*background-image: linear-gradient(0deg, rgba(255,255,255,0.93) 84%, rgba(233,233,233,0.33) 100%);
    border: 1px solid rgba(241,241,241,0.32);
    box-shadow: 2px 2px 4px 1px rgba(160,158,158,0.50), -2px -2px 2px 0 rgba(216,213,213,0.50);*/
    background-image: linear-gradient(0deg, rgba(255,255,255,0.60) 84%, rgba(233,233,233,0.26) 100%);
    border: 1px solid rgba(241,241,241,0.32);
    box-shadow: 2px 2px 4px 1px rgba(160,158,158,0.50), -2px -2px 2px 0 rgba(216,213,213,0.50);
    height: 600px;
    margin-top:20%;
}

.red.accent-1 {
    color : white;
}

.kibiz-login-logo {
    margin-top: 16%;
}

#staffLoginForm {
    padding:30px;
    margin-top:5%;
}

.login-btn {
    font-size:20px;
}

@media (min-aspect-ratio: 16/9) {
    #background {
        width:100%;
        height: 100%;
    }
}
@media (max-aspect-ratio: 16/9) {
    #background { 
        width:100%;
        height: 100%;
    }
}

@media screen and (min-width: 1920px) {
    #login-container {
        height: 800px;
        margin-top:25%;
    }

    #staffLoginForm {
        margin-top: 10%;
    }
}

@media screen and (min-device-width : 1024px) 
and (max-device-width : 1366px) and (orientation : portrait) {
    #login-container {
        margin-top:123%;
    }
}

@media screen and (min-device-width : 1366px) 
and (max-device-width : 1024px) and (orientation : landscape) {
    #login-container {
        margin-top:53%;
    }
}

@media screen and (max-width: 767px) {
    #login-container {
        height: 500px;
        margin-top:32%;
    }
}