h1, h2, h3 {
  margin: 0;
}

a.login-btn-reset {
  margin-top: 0px;
  padding-top: 10px;
}

p.reset-explainer {
  width: 65%;
  margin: auto;
  margin-top: 1.5%;
  font-size: 18px;
}
.login {
  width: 40%;
  margin: auto;
  position: relative;
  top: 50%;
  transform: translateY(20%);
}
.login-head {
  background-color: #3D9FF8;
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
}
.login-welcome {
  background-color: #212121;
  padding-top: 6%;
  padding-bottom: 6%;
}
.login-welcome h1 {
  color: white;
  font-family: 'Source Sans Pro';
  text-align: center;
  font-size: 40px;
  font-weight: 600;
}
.login-welcome p {
  color: white;
  font-family: 'Source Sans Pro';
  text-align: center;
  font-weight: 400;
  text-style: italic;
}
.login-body {
  background-color: #DEDEDE;
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
}
.login-head #nav-sign {
  padding-top: 5%;
}

.login-errors {
background-color: #D4B1B1;
padding: 25px;
    font-family: 'Source Sans Pro';
}

.login-errors p {
  margin-bottom: 0;
}

.login-errors h2 {
  text-align: center;
}
@keyframes offset {
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes pulse {
  50% {
    transform: scale(1.03);
  }
}
body {
  background-color: #F2F2F2;
}
#nav-sign {
  width: 100%;
}
#nav-sign line, #nav-sign polyline, #nav-sign polygon, #nav-sign path {
  stroke: white;
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: offset 2s ease-in forwards, pulse 1s 1.5s forwards;
  transform-origin: 50% 50%;
}
.login-form label {
  display: inline-block;
  /*background-color: #3D9FF8;*/
  /*background-color: #540058;*/
  background-color: #0083FF;
  width: 15%;
  height: 5vh;
  border-top-left-radius: 10%;
  border-bottom-left-radius: 10%;
  padding-bottom: 2px;
}
.login-form .username, .login-form .password {
  width: 80%;
  margin: auto;
  height: 5vh;
  margin-top: 1%;
}
.login-form label svg {
  position: relative;
  top: 50%;
  width: 50%;
  transform: translateY(-50%);
  display: block;
  margin: auto;
}
.login-form label svg path, .login-form label svg line {
  stroke: white;
  stroke-width: 4;
}
.login-form input {
  display: inline-block;
  vertical-align: top;
  width: 80%;
  height: 5vh;
  font-size: 14px;
  color: #555;
  background-color: #fff;
  border: 1px solid #ccc;
  margin-left: -1%;
  padding: 0;
  font-family: 'Source Sans Pro';
}
.login-form input[type="text"], .login-form input[type="password"] {
  padding-left: 2.5%;
  font-size: 18px;
  font-family: 'Source Sans Pro';
  font-weight: 500;
}

.login-form input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}

.login-form {
  width: 80%;
  margin: auto;
  display: block;
  padding-top: 2.5%;
  padding-bottom: 10%;
}
.login-btn {
  display: block !important;
  width: 25% !important;
  margin: auto !important;
  margin-top: 5% !important;
  background-color: #0083FF !important;
  color: white !important;
  font-weight: 600 !important;
  border: none !important;
  font-size: 17px !important;
  padding: 5px !important;
  border-radius: 45px !important;
  font-family: 'Source Sans Pro', sans-serif;
  text-decoration: none;
  -webkit-margin-before: 1em;
  -webkit-margin-after: 1em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  text-align: center;
  margin: auto;
}

.mobile-warning {
  display: none;
}
@media screen and (max-width: 800px) {
.mobile-warning {
background-color: #FFBF00;
  display: block;
  height: auto;
  padding-bottom: 8%;
    padding-top: 5%;
    font-family: 'Source Sans Pro', sans-serif;
}

.mobile-warning h2 {
text-align: center;
}

.mobile-warning p {
  margin: 0;
  width: 80%;
  margin: auto;
  padding-top: 15px;
}

.login {
  transform: translateY(5%);
  width: 60%;
}

.login-form input, .login-form label, .login-form .username, .login-form .password {
  height: 6vh;
}
}

@media screen and (max-width: 500px) {
.mobile-warning {
background-color: #FFBF00;
  display: block;
  height: auto;
  padding-bottom: 8%;
    padding-top: 5%;
    font-family: 'Source Sans Pro', sans-serif;
}

.mobile-warning h2 {
text-align: center;
}

.mobile-warning p {
  margin: 0;
  width: 80%;
  margin: auto;
  padding-top: 15px;
}

.login {
  transform: translateY(0%);
  width: 90%;
}

form.login-form {
  display: none;
}

.login-body {
  height: 10vh;
}


}