@import url('https://fonts.googleapis.com/css?family=Droid+Serif:400,400i,700,700i');
@import url('https://fonts.googleapis.com/css?family=Lato');

button {
  border: 0;
  margin: 0;
  padding: 0;
  background-color: transparent;
}

html, body, .login {
  font-family: 'Lato', sans-serif;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: 15px;
}

.link {
  color: #1a2980;
  text-decoration: underline;
  cursor: pointer;
}

.link:hover,
.link:focus {
  color: blue;
}

.link--alt {
  color: #fff;
}

.link--alt:hover,
.link--alt:focus {
  color: #ddf;
}

.login__gradient {
  position: fixed;
  width: 100%;
  height: 100%;
  background: #bfd255;
  background: linear-gradient(135deg, #fa354c 0%, #1a2980 100%);
  z-index: -1;
}

.login__container {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.login__form {
  overflow: hidden;
  position: relative;
  background: #fff;
  padding: 55px 40px 10px;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.3),
              5px 5px 0 rgba(0, 0, 0, 0.1);
}

.login__form--alert {
  animation: shake 150ms linear 3;
}

.message {
  max-height: 0;
  line-height: 1.5;
  letter-spacing: 0.1px;
  overflow: hidden;
  transition: max-height 250ms linear;
}

.message--alert {
  max-height: 300px;
  background: #fa354c;
  color: white;
  animation: blink 250ms linear 2;
}

.message__link {
  text-decoration: underline;
  cursor: pointer;
}

.login__message {
  padding: 10px;
  margin: -55px 0 20px -40px;
  width: calc(100% + 80px);
  box-sizing: border-box;
}

.login__title {
  font-family: 'Droid Serif', serif;
  font-style: italic;
  padding: 15px;
  position: absolute;
  margin-top: 0;
  margin-bottom: 20px;
  color: white;
}

.login__fieldset {
  margin-bottom: 30px;
}

.login__fieldset--center {
  text-align: center;
}

.login__info {
  text-align: center;
  margin-bottom: 10px;
  color: grey;
}

.login__social {
  cursor: pointer;
}

.icon {
  padding: 5px;
}

.icon--medium {
  width: 45px;
}

.icon--google {
  outline: 1px solid lightgrey;
  outline-offset: -5px;
}

.login__input {
  display: block;
  font-family: 'Lato', sans-serif;
  font-size: 1rem;
  padding: 10px;
  margin-bottom: 30px;
  width: 100%;
  box-sizing: border-box;
  transition: border 250ms ease-in-out;
}

.login__input--error {
  border: 1px solid #fa354c;
}

.input__extrainfo {
  color: grey;
  font-size: 0.8rem;
}

.input__message {
  font-size: 0.8rem;
}

.input__message--error {
  color: #fa354c;
}

.login__label {
  font-family: 'Lato', sans-serif;
  font-size: 1rem;
  position: relative;
  display: block;
  margin-top: -1rem;
  transition: transform 200ms ease-in-out, opacity 200ms ease-in-out;
}

.login__button {
  font-family: 'Lato', sans-serif;
  border: transparent;
  margin-top: -5px;
  font-size: 1rem;
  background: #1a2980;
  color: white;
  padding: 15px;
  width: 100%;
  cursor: pointer;
  margin-bottom: 25px;
}

.login__footnote {
  text-align: center;
}

.statusbar {
  width: 100%;
  height: 5px;
  box-sizing: border-box;
  position: absolute;
  max-height: 0;
  overflow: hidden;
  left: 0;
  bottom: 0;
  transition: max-height 250ms linear;
}

.statusbar--loading {
  max-height: 5px;
  background: linear-gradient(to right, #4cd964, #007aff, #ff2d55, #5856d6, #4cd964);
  background-size: 300% 100%;
  animation: loading 2s linear infinite;
}

.statusbar--alert {
  max-height: 5px;
  background: #fa354c;
  animation: blink 250ms linear 2;
}

@keyframes loading {
  0%{background-position: 0% 100%}
  100%{background-position: 300% 100%}
}

@keyframes blink {
  50%{background: transparent}
}

@keyframes shake {
  25%{transform: translateX(-5%)}
  50%{transform: translateX(5%)}
}

.bounce {
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  position: absolute;
  background-color: #1a2980;
  border-radius: 50%;
  z-index: 1000;
  transform: translate(-50%, -50%) scale(1, 1);
  animation: bounce 850ms linear 1 forwards;
}

.bouce--pre {
  pointer-events: none;
  width: 100%;
  height: 100%;
  border-radius: 0;
  background-color: #fff;
  animation: fade 250ms linear 1 forwards;
}

@keyframes bounce {
  100%{
    background-color: #fff;
    transform: translate(-50%, -50%) scale(500, 500);
  }
}

@keyframes fade {
  100%{
    opacity: 0;
  }
}