<div id="container">
    <div class="top"></div>
    <div class="middle">
      <div class="left"></div>
      <div class="middle">
        <div id="form-container">
          <div id="all-done">All done</div>
          <form id="verify-new-password">
            <label for="verify-password">Verify your password</label>
            <input placeholder="Enter your password again" type="password" id="verify-password" name="password-to-verify">
            <ul>
              <li id="matches-password">Matches new password.</li>
            </ul>
            <input type="submit" id="verify-password-submit" value="Confirm password" disabled="disabled">
            <button id="go-back">Go back</button>
          </form>
          <form id="new-password" class="visible">
            <label for="password">Choose a new password</label>
            <input placeholder="Enter your password" type="password" id="password" name="password">
            <input type="submit" id="password-submit" value="Next">
            <br class="clear" />
            <ul>
              <li id="eight-plus" class="complete">At least 8 characters long.</li>
              <li id="uppercase" class="complete">Contains uppercase letters.</li>
              <li id="lowercase" class="complete">Contains lowercase letters.</li>
              <li id="numbers" class="complete">Contains numbers.</li>
              <li id="punctuation" class="complete">Contains punctuation.</li>
            </ul>
            
          </form>
        </div>
      </div>
      <div class="right"></div>
    </div>
    <div class="bottom"></div>
  </div>

$brand-bg: #00A9E0;
.clear {clear:both}
html, body {
  padding: 0;
  margin: 0;
  width: 100%;
  background:darken($brand-bg,10%);
  height: 100%;
  overflow: hidden;
  font-family: 'Roboto', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing:antialiased;
                    font-smoothing:antialiased;
                         font-smooth:always;
}
#password {font-size:1.4rem;font-weight:100}
#all-done {
  pointer-events: none;
  text-indent: -10000px;
  width: 100%;
  height: 100%;
  //background: url('tick-done.svg') center 35% no-repeat;
  
  position: absolute;
  opacity: 0;
  -webkit-backface-visibility:hidden;
  -webkit-transition:-webkit-transform 1200ms cubic-bezier(0.190, 1.000, 0.220, 1.000),opacity 400ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
     -moz-transition:   -moz-transform 1200ms cubic-bezier(0.190, 1.000, 0.220, 1.000),opacity 400ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
      -ms-transition:    -ms-transform 1200ms cubic-bezier(0.190, 1.000, 0.220, 1.000),opacity 400ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
       -o-transition:     -o-transform 1200ms cubic-bezier(0.190, 1.000, 0.220, 1.000),opacity 400ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
          transition:        transform 1200ms cubic-bezier(0.190, 1.000, 0.220, 1.000),opacity 400ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
   -webkit-transform:translateX(20px);
      -moz-transform:translateX(20px);
       -ms-transform:translateX(20px);
        -o-transform:translateX(20px);
           transform:translateX(20px);
  &:after {
    content: 'All done!';
    font-weight: 100;
    font-size: 40px;
    color: rgba(255,255,255,0.70);
    text-align: center;
    width: 100%;
    display: block;
    position: absolute;
    left: 0;
    top: 55%;
    text-indent: 0;
  }
}
#all-done:after {
  content: 'All done!';
  font-weight: 100;
  font-size: 40px;
  color: rgba(255,255,255,0.70);
  text-align: center;
  width: 100%;
  display: block;
  position: absolute;
  left: 0;
  top: 55%;
  text-indent: 0;
}
#all-done.visible {
  opacity: 1;
  -webkit-transform:translateX(0);
     -moz-transform:translateX(0);
      -ms-transform:translateX(0);
       -o-transform:translateX(0);
          transform:translateX(0);
}
#container {
  width: 100%;
  height: 100%;
  -webkit-perspective: 1000px;
     -moz-perspective: 1000px;
      -ms-perspective: 1000px;
       -o-perspective: 1000px;
          perspective: 1000px;
}
.middle {width:100%;height:100%}
#form-container {
  width: 100%;
  height: 100%;
  position: relative;
}
form {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  opacity: 0;
  -webkit-backface-visibility: hidden;
  
 //background-image:-moz-linear-gradient( -89deg, #FFFFFF 0%, #DBDBDB 100%);
 //background-image: -ms-linear-gradient( -89deg, #FFFFFF 0%, #DBDBDB 100%);
 //background-image:  -o-linear-gradient( -89deg, #FFFFFF 0%, #DBDBDB 100%);
 //background-image:     linear-gradient(-179deg, #FFFFFF 0%, #DBDBDB 100%);
 //
 // -moz-box-shadow:0px 2px 4px 0px rgba(0,0,0,0.50), inset 0px 1px 7px 0px rgba(255,255,255,0.50);
 //      box-shadow:0px 2px 4px 0px rgba(0,0,0,0.50), inset 0px 1px 7px 0px rgba(255,255,255,0.50);
 // 
  -webkit-transition: -webkit-transform 1200ms cubic-bezier(0.190, 1.000, 0.220, 1.000),opacity 400ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
     -moz-transition: -moz-transform 1200ms cubic-bezier(0.190, 1.000, 0.220, 1.000),opacity 400ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
      -ms-transition: -ms-transform 1200ms cubic-bezier(0.190, 1.000, 0.220, 1.000),opacity 400ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
       -o-transition: -o-transform 1200ms cubic-bezier(0.190, 1.000, 0.220, 1.000),opacity 400ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
          transition: transform 1200ms cubic-bezier(0.190, 1.000, 0.220, 1.000),opacity 400ms cubic-bezier(0.190, 1.000, 0.220, 1.000);

  -webkit-transform: translateX(20px);
     -moz-transform: translateX(20px);
      -ms-transform: translateX(20px);
       -o-transform: translateX(20px);
          transform: translateX(20px);
}
form.visible {
  opacity: 1;
 
  -webkit-transform: translateX(0);
     -moz-transform: translateX(0);
      -ms-transform: translateX(0);
       -o-transform: translateX(0);
          transform: translateX(0);
}
form.done {
  pointer-events: none;
  opacity: 0;
  -webkit-transform: translateX(-20px);
     -moz-transform: translateX(-20px);
      -ms-transform: translateX(-20px);
       -o-transform: translateX(-20px);
          transform: translateX(-20px);
}
label {
  //height: 56px;
  //background-image: -moz-linear-gradient( -89deg, #FAFAFA 0%, #EEE 100%);
  //background-image:  -ms-linear-gradient( -89deg, #FAFAFA 0%, #EEE 100%);
  //background-image:   -o-linear-gradient( -89deg, #FAFAFA 0%, #EEE 100%);
  //background-image:      linear-gradient(-179deg, #FAFAFA 0%, #EEE 100%);
  display: block;
  font-weight: 100;
  font-size: 3rem;
  color: #fff;
  text-shadow: 0px 1px 1px $brand-bg;
  position: relative;
}
label:after {
  content: '';
  border-bottom:0;
  width: 100%;
  height: 1px;
  position: absolute;
  bottom: -2px;
  left: 0;
}
input[type="password"] {
  height: 38px;
  line-height: 38px;
  border-radius: 0;
  border: 1px solid #CACACA;
  background: #FFFFFF;
  
  font-family: Helvetica;
  font-size: 18px;
  color: #000;
  width: 70%;
  float:left;
 
  padding: 0 3% 0 3%;
  margin: 6.5% 0 0 0;
}
input[type="submit"] {
  display:block;
  float: left;
  margin: 6.5% 0 0 3%;
  background-image:      linear-gradient(-179deg,  #98C73D 0%, #98C73D 100%);
  border: 3px solid #98C73D;
  box-shadow: 0 0 0 3px #D0DD2B;  
  
  padding: 0 15px;
  height: 38px;
  font-size: 16px;
  color: white;
  text-transform:uppercase;
  text-shadow: 0px 1px 1px rgba(0,0,0,0.50);
  font-weight: 400;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  -webkit-transition: background-image 1200ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  -moz-transition: background-image 1200ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  -ms-transition: background-image 1200ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  -o-transition: background-image 1200ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  transition: background-image 1200ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
}
input[type="submit"][disabled] {
  border: 3px solid rgba(white,0.3);
  box-shadow:none;
  text-shadow:none;
  color:rgba(white,0.3);
  text-transform:uppercase; 
  background-image:none;
  background:transparent;
  
}
input[type=password] {
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  outline: none;
}
 
input[type=password]:focus {
  box-shadow: 0 0 0 3px #D0DD2B;
  border: 1px solid transparent;
}
ul {
  padding: 0;
  margin:3em 0 0 0;
  list-style: none; 
}
li {
  color:rgba(white,0.5);
  
  font-size: 1.7rem;
  height: 20px;
  line-height: 20px;
  margin: 0 0 0.8em 0;
  padding: 0 0 0 40px;
  /*background: url(tick-grey.svg) 10px 1px no-repeat;*/
  position: relative;
  -webkit-transition: color 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  -moz-transition: color 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  -ms-transition: color 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  -o-transition: color 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  transition: color 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  -webkit-backface-visibility: visible;
}
li:before {
  opacity: 1;
  text-shadow: none;
  content: "\e013";
  position: absolute;
  left: -25px;
  width: 20px;
  height: 20px;
  /*background: url(tick-green.svg) 0 1px no-repeat;*/
position: relative;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: 400;
line-height: 1;
  color:darken($brand-bg,15%);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
  -webkit-transition: -webkit-transform 1200ms cubic-bezier(0.190, 1.000, 0.220, 1.000),
    opacity 100ms ease-out;
  -moz-transition: -moz-transform 1200ms cubic-bezier(0.190, 1.000, 0.220, 1.000),
    opacity 100ms ease-out;
  -ms-transition: -ms-transform 1200ms cubic-bezier(0.190, 1.000, 0.220, 1.000),
    opacity 100ms ease-out;
  -o-transition: -o-transform 1200ms cubic-bezier(0.190, 1.000, 0.220, 1.000),
    opacity 100ms ease-out;
  transition: transform 1200ms cubic-bezier(0.190, 1.000, 0.220, 1.000),
    opacity 100ms ease-out;
  -webkit-transform: scale(1.3);
  -moz-transform: scale(1.3);
  -ms-transform: scale(1.3);
  -o-transform: scale(1.3);
  transform: scale(1.3);
  -webkit-backface-visibility: hidden;
}
li.complete {
  color: rgba(255,255,255,1); 
}
li.complete:before {
  opacity: 1;
  color:#D0DD2B ;
  text-shadow: 0px 0px 2px rgba(0,0,0,0.4);
  -webkit-transform: scale(1.6);
  -moz-transform: scale(1.6);
  -ms-transform: scale(1.6);
  -o-transform: scale(1.6);
  transform: scale(1.6);
}
#go-back {
  border: none;
  background: none;
  font-size: 13px;
  color: #808080;
  line-height: 13px;
  text-shadow: 0px 1px 1px #FFFFFF;
  float: right;
  padding: 0 0 3px 0;
  margin: 40px 5% 0 0;
  border-bottom: 1px solid #808080;
  cursor: pointer;
}
@media (min-width: 360px) {
  form {
    border-radius: 4px;
  }
  label {
    border-radius: 4px 4px 0 0;
  }
  #container {
    width: 100%;
    height: 100%;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
  }
  .top, .left, .right, .bottom {
    flex: 1 1 auto;
  }
  .middle {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    -o-flex-direction: row;
    flex-direction: row;
    flex: 0 0 auto;
    width: auto;
    height: auto;
  }
  #form-container {
    width: 330px;
    height: 385px;
    position: relative;
  }
  form {
    position: absolute;
    left: 0;
    top: 0;
  }
  form#verify-new-password {
    height: 72%;
    top: 14%;
  }
}
@-webkit-keyframes back {
  0% {
    -webkit-transform:
    scale(1)
    rotateY(180deg);
  }
  10% {
    -webkit-transform:
    scale(1.000768)
    rotateY(180deg);
  }
  20% {
    -webkit-transform:
    scale(1.024576)
    rotateY(180deg);
  }
  30% {
    -webkit-transform:
    scale(1.125424)
    rotateY(180.17135717260666deg);
  }
  40% {
    -webkit-transform:
    scale(1.149232)
    rotateY(185.48342952341287deg);
  }
  50% {
    -webkit-transform:
    scale(1.15)
    rotateY(221.6397929434164deg);
  }
  60% {
    -webkit-transform:
    scale(1.149232)
    rotateY(318.3602070565836deg);
  }
  70% {
    -webkit-transform:
    scale(1.125424)
    rotateY(354.51657047658716deg);
  }
  80% {
    -webkit-transform:
    scale(1.024576)
    rotateY(359.8286428273933deg);
  }
  90% {
    -webkit-transform:
    scale(1.000768)
    rotateY(360deg);
  }
  100% {
    -webkit-transform:
    scale(1)
    rotateY(360deg);
  }

}
@-moz-keyframes back {
  0% {
    -moz-transform:
    scale(1)
    rotateY(180deg);
  }
  10% {
    -moz-transform:
    scale(1.000768)
    rotateY(180deg);
  }
  20% {
    -moz-transform:
    scale(1.024576)
    rotateY(180deg);
  }
  30% {
    -moz-transform:
    scale(1.125424)
    rotateY(180.17135717260666deg);
  }
  40% {
    -moz-transform:
    scale(1.149232)
    rotateY(185.48342952341287deg);
  }
  50% {
    -moz-transform:
    scale(1.15)
    rotateY(221.6397929434164deg);
  }
  60% {
    -moz-transform:
    scale(1.149232)
    rotateY(318.3602070565836deg);
  }
  70% {
    -moz-transform:
    scale(1.125424)
    rotateY(354.51657047658716deg);
  }
  80% {
    -moz-transform:
    scale(1.024576)
    rotateY(359.8286428273933deg);
  }
  90% {
    -moz-transform:
    scale(1.000768)
    rotateY(360deg);
  }
  100% {
    -moz-transform:
    scale(1)
    rotateY(360deg);
  }

}
@-ms-keyframes back {
  0% {
    -ms-transform:
    scale(1)
    rotateY(180deg);
  }
  10% {
    -ms-transform:
    scale(1.000768)
    rotateY(180deg);
  }
  20% {
    -ms-transform:
    scale(1.024576)
    rotateY(180deg);
  }
  30% {
    -ms-transform:
    scale(1.125424)
    rotateY(180.17135717260666deg);
  }
  40% {
    -ms-transform:
    scale(1.149232)
    rotateY(185.48342952341287deg);
  }
  50% {
    -ms-transform:
    scale(1.15)
    rotateY(221.6397929434164deg);
  }
  60% {
    -ms-transform:
    scale(1.149232)
    rotateY(318.3602070565836deg);
  }
  70% {
    -ms-transform:
    scale(1.125424)
    rotateY(354.51657047658716deg);
  }
  80% {
    -ms-transform:
    scale(1.024576)
    rotateY(359.8286428273933deg);
  }
  90% {
    -ms-transform:
    scale(1.000768)
    rotateY(360deg);
  }
  100% {
    -ms-transform:
    scale(1)
    rotateY(360deg);
  }

}
@-o-keyframes back {
  0% {
    -o-transform:
    scale(1)
    rotateY(180deg);
  }
  10% {
    -o-transform:
    scale(1.000768)
    rotateY(180deg);
  }
  20% {
    -o-transform:
    scale(1.024576)
    rotateY(180deg);
  }
  30% {
    -o-transform:
    scale(1.125424)
    rotateY(180.17135717260666deg);
  }
  40% {
    -o-transform:
    scale(1.149232)
    rotateY(185.48342952341287deg);
  }
  50% {
    -o-transform:
    scale(1.15)
    rotateY(221.6397929434164deg);
  }
  60% {
    -o-transform:
    scale(1.149232)
    rotateY(318.3602070565836deg);
  }
  70% {
    -o-transform:
    scale(1.125424)
    rotateY(354.51657047658716deg);
  }
  80% {
    -o-transform:
    scale(1.024576)
    rotateY(359.8286428273933deg);
  }
  90% {
    -o-transform:
    scale(1.000768)
    rotateY(360deg);
  }
  100% {
    -o-transform:
    scale(1)
    rotateY(360deg);
  }

}
@keyframes back {
  0% {
    transform:
    scale(1)
    rotateY(180deg);
  }
  10% {
    transform:
    scale(1.000768)
    rotateY(180deg);
  }
  20% {
    transform:
    scale(1.024576)
    rotateY(180deg);
  }
  30% {
    transform:
    scale(1.125424)
    rotateY(180.17135717260666deg);
  }
  40% {
    transform:
    scale(1.149232)
    rotateY(185.48342952341287deg);
  }
  50% {
    transform:
    scale(1.15)
    rotateY(221.6397929434164deg);
  }
  60% {
    transform:
    scale(1.149232)
    rotateY(318.3602070565836deg);
  }
  70% {
    transform:
    scale(1.125424)
    rotateY(354.51657047658716deg);
  }
  80% {
    transform:
    scale(1.024576)
    rotateY(359.8286428273933deg);
  }
  90% {
    transform:
    scale(1.000768)
    rotateY(360deg);
  }
  100% {
    transform:
    scale(1)
    rotateY(360deg);
  }

}
@-webkit-keyframes front {
  0% {
    -webkit-transform:
    scale(1)
    rotateY(0deg);
  }
  10% {
    -webkit-transform:
    scale(1.000768)
    rotateY(0deg);
  }
  20% {
    -webkit-transform:
    scale(1.024576)
    rotateY(0deg);
  }
  30% {
    -webkit-transform:
    scale(1.125424)
    rotateY(0.17135717260665195deg);
  }
  40% {
    -webkit-transform:
    scale(1.149232)
    rotateY(5.4834295234128625deg);
  }
  50% {
    -webkit-transform:
    scale(1.15)
    rotateY(41.639792943416424deg);
  }
  60% {
    -webkit-transform:
    scale(1.149232)
    rotateY(138.36020705658356deg);
  }
  70% {
    -webkit-transform:
    scale(1.125424)
    rotateY(174.51657047658713deg);
  }
  80% {
    -webkit-transform:
    scale(1.024576)
    rotateY(179.82864282739334deg);
  }
  90% {
    -webkit-transform:
    scale(1.000768)
    rotateY(180deg);
  }
  100% {
    -webkit-transform:
    scale(1)
    rotateY(180deg);
  }

}
@-moz-keyframes front {
  0% {
    -moz-transform:
    scale(1)
    rotateY(0deg);
  }
  10% {
    -moz-transform:
    scale(1.000768)
    rotateY(0deg);
  }
  20% {
    -moz-transform:
    scale(1.024576)
    rotateY(0deg);
  }
  30% {
    -moz-transform:
    scale(1.125424)
    rotateY(0.17135717260665195deg);
  }
  40% {
    -moz-transform:
    scale(1.149232)
    rotateY(5.4834295234128625deg);
  }
  50% {
    -moz-transform:
    scale(1.15)
    rotateY(41.639792943416424deg);
  }
  60% {
    -moz-transform:
    scale(1.149232)
    rotateY(138.36020705658356deg);
  }
  70% {
    -moz-transform:
    scale(1.125424)
    rotateY(174.51657047658713deg);
  }
  80% {
    -moz-transform:
    scale(1.024576)
    rotateY(179.82864282739334deg);
  }
  90% {
    -moz-transform:
    scale(1.000768)
    rotateY(180deg);
  }
  100% {
    -moz-transform:
    scale(1)
    rotateY(180deg);
  }

}
@-ms-keyframes front {
  0% {
    -ms-transform:
    scale(1)
    rotateY(0deg);
  }
  10% {
    -ms-transform:
    scale(1.000768)
    rotateY(0deg);
  }
  20% {
    -ms-transform:
    scale(1.024576)
    rotateY(0deg);
  }
  30% {
    -ms-transform:
    scale(1.125424)
    rotateY(0.17135717260665195deg);
  }
  40% {
    -ms-transform:
    scale(1.149232)
    rotateY(5.4834295234128625deg);
  }
  50% {
    -ms-transform:
    scale(1.15)
    rotateY(41.639792943416424deg);
  }
  60% {
    -ms-transform:
    scale(1.149232)
    rotateY(138.36020705658356deg);
  }
  70% {
    -ms-transform:
    scale(1.125424)
    rotateY(174.51657047658713deg);
  }
  80% {
    -ms-transform:
    scale(1.024576)
    rotateY(179.82864282739334deg);
  }
  90% {
    -ms-transform:
    scale(1.000768)
    rotateY(180deg);
  }
  100% {
    -ms-transform:
    scale(1)
    rotateY(180deg);
  }

}
@-o-keyframes front {
  0% {
    -o-transform:
    scale(1)
    rotateY(0deg);
  }
  10% {
    -o-transform:
    scale(1.000768)
    rotateY(0deg);
  }
  20% {
    -o-transform:
    scale(1.024576)
    rotateY(0deg);
  }
  30% {
    -o-transform:
    scale(1.125424)
    rotateY(0.17135717260665195deg);
  }
  40% {
    -o-transform:
    scale(1.149232)
    rotateY(5.4834295234128625deg);
  }
  50% {
    -o-transform:
    scale(1.15)
    rotateY(41.639792943416424deg);
  }
  60% {
    -o-transform:
    scale(1.149232)
    rotateY(138.36020705658356deg);
  }
  70% {
    -o-transform:
    scale(1.125424)
    rotateY(174.51657047658713deg);
  }
  80% {
    -o-transform:
    scale(1.024576)
    rotateY(179.82864282739334deg);
  }
  90% {
    -o-transform:
    scale(1.000768)
    rotateY(180deg);
  }
  100% {
    -o-transform:
    scale(1)
    rotateY(180deg);
  }

}
@keyframes front {
  0% {
    transform:
    scale(1)
    rotateY(0deg);
  }
  10% {
    transform:
    scale(1.000768)
    rotateY(0deg);
  }
  20% {
    transform:
    scale(1.024576)
    rotateY(0deg);
  }
  30% {
    transform:
    scale(1.125424)
    rotateY(0.17135717260665195deg);
  }
  40% {
    transform:
    scale(1.149232)
    rotateY(5.4834295234128625deg);
  }
  50% {
    transform:
    scale(1.15)
    rotateY(41.639792943416424deg);
  }
  60% {
    transform:
    scale(1.149232)
    rotateY(138.36020705658356deg);
  }
  70% {
    transform:
    scale(1.125424)
    rotateY(174.51657047658713deg);
  }
  80% {
    transform:
    scale(1.024576)
    rotateY(179.82864282739334deg);
  }
  90% {
    transform:
    scale(1.000768)
    rotateY(180deg);
  }
  100% {
    transform:
    scale(1)
    rotateY(180deg);
  }
}

// Demo from http://www.aerotwist.com/blog/better-password-form-fields/

(function() {
  var container = document.getElementById('container');
  var eightPlus = document.getElementById('eight-plus');
  var uppercase = document.getElementById('uppercase');
  var lowercase = document.getElementById('lowercase');
  var numbers = document.getElementById('numbers');
  var punctuation = document.getElementById('punctuation');
  var matchesPassword = document.getElementById('matches-password');
  var passwordSubmitBtn = document.getElementById('password-submit');
  var passwordInput = document.getElementById('password');
  var passwordForm = document.getElementById('new-password');
  var verifyPasswordSubmitBtn = document.getElementById('verify-password-submit');
  var verifyPasswordInput = document.getElementById('verify-password');
  var verifyPasswordForm = document.getElementById('verify-new-password');
  var goBack = document.getElementById('go-back');
  var allDone = document.getElementById('all-done');
  var containsUppercase = /[A-Z]/;
  var containsLowercase = /[a-z]/;
  var containsNumbers = /[0-9]/;
  var containsPunctuation = /[^\w\s]|_/;
  function setForm() {
    eightPlus.classList.remove('complete');
    uppercase.classList.remove('complete');
    lowercase.classList.remove('complete');
    numbers.classList.remove('complete');
    punctuation.classList.remove('complete');
    passwordSubmitBtn.disabled = true;
  }
  passwordInput.addEventListener('input', function() {
    var value = passwordInput.value;
    // More than 8 characters
    if (value.length >= 8)
      eightPlus.classList.add('complete');
    else
      eightPlus.classList.remove('complete');
    // Contains uppercase
    if (containsUppercase.test(value))
      uppercase.classList.add('complete');
    else
      uppercase.classList.remove('complete');
    // Contains lowercase
    if (containsLowercase.test(value))
      lowercase.classList.add('complete');
    else
      lowercase.classList.remove('complete');
    // Contains numbers
    if (containsNumbers.test(value))
      numbers.classList.add('complete');
    else
      numbers.classList.remove('complete');
    // Contains punctuation
    if (containsPunctuation.test(value))
      punctuation.classList.add('complete');
    else
      punctuation.classList.remove('complete');
    var passwordIsValid = (value.length >= 8) &&
        containsUppercase.test(value) &&
        containsLowercase.test(value) &&
        containsNumbers.test(value) &&
        containsPunctuation.test(value);
    passwordSubmitBtn.disabled = !passwordIsValid;
  });
  verifyPasswordInput.addEventListener('input', function() {
    var passwordsDoMatch = verifyPasswordInput.value === passwordInput.value;
    if (passwordsDoMatch)
      matchesPassword.classList.add('complete');
    else
      matchesPassword.classList.remove('complete');
    verifyPasswordSubmitBtn.disabled = !passwordsDoMatch;
  });
  passwordForm.addEventListener('submit', function(evt) {
    passwordForm.classList.add('done');
    setTimeout(function() {
      verifyPasswordForm.reset();
      verifyPasswordForm.classList.add('visible');
      verifyPasswordInput.focus();
      matchesPassword.classList.remove('complete');
    }, 400);
    evt.preventDefault();
  });
  verifyPasswordForm.addEventListener('submit', function(evt) {
    verifyPasswordForm.classList.add('done');
    setTimeout(function() {
      allDone.classList.add('visible');
    }, 400);
    evt.preventDefault();
  });
  goBack.addEventListener('click', function(evt) {
    verifyPasswordForm.classList.remove('visible');
    setTimeout(function() {
      passwordForm.classList.remove('done');
      passwordInput.focus();
    }, 400);
    evt.preventDefault();
  });
  window.addEventListener('load', function() {
    passwordForm.classList.add('visible');
    setForm();
  });
})();