#app-container {
    background-color:#f5f8fa;
}
.hidden{opacity:0;position: absolute;right: -100%;}
input:focus ~ label, input.used ~ label {top: -20px;-webkit-transform: scale(.75);transform: scale(.75);left: -2px;	color: #4a89dc;font-size: 13px;}
/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
/*progress {
    display: inline-block;
    vertical-align: baseline;
}*/
#input-container{
  width: 200%;
  position: relative;
}
#email-container, #password-container {
  position: relative;
  width: 50%;
  float: left;
}
#input-container.go-left {
  -webkit-animation: slideLeft 0.2s forwards;
  animation: slideLeft 0.2s forwards;
}
#input-container.go-right {
  -webkit-animation: zeroLeft 0.2s forwards;
  animation: zeroLeft 0.2s forwards;
}
.loader {
    position: relative;
    height: 4px;
    display: block;
    width: 100%;
    background-color: #f5f8fa;
    border-radius: 2px;
    overflow: hidden;
}
  
.loader .determinate {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background-color: #f1416c;
    -webkit-transition: width .3s linear;
    transition: width .3s linear;
}
  
.loader .indeterminate {
    background-color: #f1416c;
}
  
.loader .indeterminate:before {
    content: '';
    position: absolute;
    background-color: inherit;
    top: 0;
    left: 0;
    bottom: 0;
    will-change: left, right;
    -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
            animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
}
.loader .indeterminate:after {
    content: '';
    position: absolute;
    background-color: inherit;
    top: 0;
    left: 0;
    bottom: 0;
    will-change: left, right;
    -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
            animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
    -webkit-animation-delay: 1.15s;
            animation-delay: 1.15s;
}

@-webkit-keyframes indeterminate {
    0% {
      left: -35%;
      right: 100%;
    }
    60% {
      left: 100%;
      right: -90%;
    }
    100% {
      left: 100%;
      right: -90%;
    }
  }
  
  @keyframes indeterminate {
    0% {
      left: -35%;
      right: 100%;
    }
    60% {
      left: 100%;
      right: -90%;
    }
    100% {
      left: 100%;
      right: -90%;
    }
  }
  
  @-webkit-keyframes indeterminate-short {
    0% {
      left: -200%;
      right: 100%;
    }
    60% {
      left: 107%;
      right: -8%;
    }
    100% {
      left: 107%;
      right: -8%;
    }
  }
  
  @keyframes indeterminate-short {
    0% {
      left: -200%;
      right: 100%;
    }
    60% {
      left: 107%;
      right: -8%;
    }
    100% {
      left: 107%;
      right: -8%;
    }
  }

  @-webkit-keyframes slideLeft {
    from { left: 0; }
    to { left: -100%; }
  }
  @keyframes slideLeft {
    from { left: 0; }
    to { left: -100%; }
  }
  @-webkit-keyframes zeroLeft {
    from { left: -100%; }
    to { left: 0; }
  }
  @keyframes zeroLeft {
    from { left: -100%; }
    to { left: 0; }
  }