.login-box {
    background-color: rgba(22, 22, 22, 0.45);
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 650px;
    height: 330px;
    font-size: 100%;
    -webkit-border-radius: 48px;
    -moz-border-radius: 48px;
    border-radius: 48px;
}

.aboxes {width: 100px; height: 20px}

.boxes{
    background-color: rgba(255, 255, 255, 0.9);
    width: 90%;
    height: 71%;
    border: none;
    padding-left: 1%;
    padding-right: 1%;
    border-color: transparent;
    font-family: Georgia, serif;
    font-size: 170%;
}


.username-img {
    position: absolute;
    top: 24%;
    left: 2%;
    width: 17%;
    height: 17%;

}

.password-img {
    position: absolute;
    top: 49%;
    left: 2%;
    width: 17%;
    height: 17%;

}

.username-box {
    position: absolute;
    top: 26%;
    left: 20%;
    width: 80%;
    height: 20%;
}

.password-box {
    position: absolute;
    top: 50%;
    left: 20%;
    width: 80%;
    height: 20%;
}

.login-button {
    left: 43%;
    top: 69%;
    width:15%;
    height:26%;
    cursor: pointer;
    position: absolute;
    background:url(../images/login-ok.svg) no-repeat; 
    background-size: contain;
    border: none;
    border-color: transparent;
    background-position: center; 
}

.login-button:active {
    -webkit-transform:scale(.85); /* Safari and Chrome */
    -moz-transform:scale(.85); /* Firefox */
    -ms-transform:scale(.85); /* IE 9 */
    -o-transform:scale(.85); /* Opera */
     transform:scale(.85);
}

.login-button:hover {
  -webkit-box-shadow: inset 0 0 10px 10px #111111;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow: inset 0 0 10px 10px #111111;  /* Firefox 3.5 - 3.6 */
  box-shadow: inset 0 0 10px 10px #111111; /* mark the inset */
  border-radius: 20%;
}

.sitename {
    position: absolute;
    top: 3%;
    width:100%;
    text-align: center;
    color: #FFFFFF;
    font-size: 225%;
    text-shadow: 2px 2px #000000;
}