body {
  background: #053e61;
  text-align: center;
  font-family: "Helvetica Neue", "Helvetica", "Arial", Sans-Serif;
  padding-top: 40px;
}

h1, h2 {
  color: white;
  text-shadow: 0px 1px 4px rgba(0,0,0,0.6);
  -webkit-animation: slide 1000ms ease-in-out; /* Safari 4+ */
  -moz-animation:    slide 1000ms ease-in-out; /* Fx 5+ */
  -o-animation:      slide 1000ms ease-in-out; /* Opera 12+ */
  animation:         slide 1000ms ease-in-out; /* IE 10+ */

}

h1 {
  font-size: 56px;
  margin-bottom: 20px;
}

h2 {
  font-size: 24px;
}

h2, h3 {
  font-weight: 300;
}

h3 {
  font-size: 18px;
  color: #666;
}

.wrapper {
  display: block;
  margin-top: 14px;
  font-size: 28px;
}

.passcode-value {
  color: #333;
}

.container {
  box-sizing: border-box;
  background: white;
  display: block;
  width: 250px;
  height: 180px;
  border-radius: 4px;
  box-shadow: 0px 1px 6px rgba(0,0,0,0.6);
  position: absolute;
  margin: auto;
  padding: 20px;
  top: 0; right: 0; bottom: 0; left: 0;
  -webkit-animation: slide 1500ms 1000ms both ease-in-out; /* Safari 4+ */
  -moz-animation:    slide 1500ms 1000ms both ease-in-out; /* Fx 5+ */
  -o-animation:      slide 1500ms 1000ms both ease-in-out; /* Opera 12+ */
  animation:         slide 1500ms 1000ms both ease-in-out; /* IE 10+ */

}

footer {
  position: absolute;
  bottom: 10px;
  text-align: center;
  width: 100%;
  color: #ddd;
  text-shadow: 0px 1px 2px rgba(0,0,0,0.3);
}

a {
  color: #78ab52;
}

@-webkit-keyframes slide {
  0%    { -webkit-transform: translate3d(0,-100%,0); opacity: 0;}
  100%  { -webkit-transform: translate3d(0,0,0);  opacity: 1;}
}
@-moz-keyframes slide {
  0%    { -moz-transform: translate3d(0,-100%,0); opacity: 0;}
  100%  { -moz-transform: translate3d(0,0,0);  opacity: 1;}
}
@-o-keyframes slide {
  0%    { -o-transform: translate3d(0,-100%,0); opacity: 0;}
  100%  { -o-transform: translate3d(0,0,0);  opacity: 1;}
}
@keyframes slide {
  0%    { transform: translate3d(0,-100%,0); opacity: 0;}
  100%  { transform: translate3d(0,0,0);  opacity: 1;}
}