/* line 5, ../scss/motion-ui/util/_series.scss */
.hero-title, .hero-subtitle, .hero-button-1, .hero-button-2, .motion-demos-lead, .motion-demos-sublead, .animation-list.one > li:nth-child(1), .animation-list.one > li:nth-child(2), .animation-list.one > li:nth-child(3), .animation-list.one > li:nth-child(4), .animation-list.two > li:nth-child(1), .animation-list.two > li:nth-child(2), .animation-list.two > li:nth-child(3), .series-demo li:nth-child(2), .series-demo li:nth-child(3), .series-demo li:nth-child(4) {
  animation-play-state: paused;
  animation-fill-mode: both;
}
/* line 9, ../scss/motion-ui/util/_series.scss */
.is-animating .hero-title, .is-animating .hero-subtitle, .is-animating .hero-button-1, .is-animating .hero-button-2, .is-animating .motion-demos-lead, .is-animating .motion-demos-sublead, .is-animating .animation-list.one > li:nth-child(1), .is-animating .animation-list.one > li:nth-child(2), .is-animating .animation-list.one > li:nth-child(3), .is-animating .animation-list.one > li:nth-child(4), .is-animating .animation-list.two > li:nth-child(1), .is-animating .animation-list.two > li:nth-child(2), .is-animating .animation-list.two > li:nth-child(3), .is-animating .series-demo li:nth-child(2), .series-demo .is-animating li:nth-child(2), .is-animating .series-demo li:nth-child(3), .series-demo .is-animating li:nth-child(3), .is-animating .series-demo li:nth-child(4), .series-demo .is-animating li:nth-child(4) {
  animation-play-state: running;
}

/* line 3, ../scss/motion-ui/_classes.scss */
.slide-in-down.mui-enter, .slide-in-left.mui-enter, .slide-in-up.mui-enter, .slide-in-right.mui-enter, .slide-out-down.mui-leave, .slide-out-right.mui-leave, .slide-out-up.mui-leave, .slide-out-left.mui-leave, .fade-in.mui-enter, .fade-out.mui-leave, .hinge-in-from-top.mui-enter, .hinge-in-from-right.mui-enter, .hinge-in-from-bottom.mui-enter, .hinge-in-from-left.mui-enter, .hinge-in-from-middle-x.mui-enter, .hinge-in-from-middle-y.mui-enter, .hinge-out-from-top.mui-leave, .hinge-out-from-right.mui-leave, .hinge-out-from-bottom.mui-leave, .hinge-out-from-left.mui-leave, .hinge-out-from-middle-x.mui-leave, .hinge-out-from-middle-y.mui-leave, .scale-in-up.mui-enter, .scale-in-down.mui-enter, .scale-out-up.mui-leave, .scale-out-down.mui-leave, .spin-in.mui-enter, .spin-out.mui-leave, .spin-in-ccw.mui-enter, .spin-out-ccw.mui-leave {
  transition-duration: 500ms;
  transition-timing-function: linear;
}

/* line 22, ../scss/motion-ui/util/_transition.scss */
.slide-in-down.mui-enter {
  transform: translateY(-100%);
  transition-property: transform, opacity;
  backface-visibility: hidden;
}
/* line 34, ../scss/motion-ui/util/_transition.scss */
.slide-in-down.mui-enter.mui-enter-active {
  transform: translateY(0);
}

/* line 22, ../scss/motion-ui/util/_transition.scss */
.slide-in-left.mui-enter {
  transform: translateX(-100%);
  transition-property: transform, opacity;
  backface-visibility: hidden;
}
/* line 34, ../scss/motion-ui/util/_transition.scss */
.slide-in-left.mui-enter.mui-enter-active {
  transform: translateX(0);
}

/* line 22, ../scss/motion-ui/util/_transition.scss */
.slide-in-up.mui-enter {
  transform: translateY(100%);
  transition-property: transform, opacity;
  backface-visibility: hidden;
}
/* line 34, ../scss/motion-ui/util/_transition.scss */
.slide-in-up.mui-enter.mui-enter-active {
  transform: translateY(0);
}

/* line 22, ../scss/motion-ui/util/_transition.scss */
.slide-in-right.mui-enter {
  transform: translateX(100%);
  transition-property: transform, opacity;
  backface-visibility: hidden;
}
/* line 34, ../scss/motion-ui/util/_transition.scss */
.slide-in-right.mui-enter.mui-enter-active {
  transform: translateX(0);
}

/* line 22, ../scss/motion-ui/util/_transition.scss */
.slide-out-down.mui-leave {
  transform: translateY(0);
  transition-property: transform, opacity;
  backface-visibility: hidden;
}
/* line 34, ../scss/motion-ui/util/_transition.scss */
.slide-out-down.mui-leave.mui-leave-active {
  transform: translateY(-100%);
}

/* line 22, ../scss/motion-ui/util/_transition.scss */
.slide-out-right.mui-leave {
  transform: translateX(0);
  transition-property: transform, opacity;
  backface-visibility: hidden;
}
/* line 34, ../scss/motion-ui/util/_transition.scss */
.slide-out-right.mui-leave.mui-leave-active {
  transform: translateX(100%);
}

/* line 22, ../scss/motion-ui/util/_transition.scss */
.slide-out-up.mui-leave {
  transform: translateY(0);
  transition-property: transform, opacity;
  backface-visibility: hidden;
}
/* line 34, ../scss/motion-ui/util/_transition.scss */
.slide-out-up.mui-leave.mui-leave-active {
  transform: translateY(-100%);
}

/* line 22, ../scss/motion-ui/util/_transition.scss */
.slide-out-left.mui-leave {
  transform: translateX(0);
  transition-property: transform, opacity;
  backface-visibility: hidden;
}
/* line 34, ../scss/motion-ui/util/_transition.scss */
.slide-out-left.mui-leave.mui-leave-active {
  transform: translateX(-100%);
}

/* line 22, ../scss/motion-ui/util/_transition.scss */
.fade-in.mui-enter {
  opacity: 0;
  transition-property: opacity;
}
/* line 34, ../scss/motion-ui/util/_transition.scss */
.fade-in.mui-enter.mui-enter-active {
  opacity: 1;
}

/* line 22, ../scss/motion-ui/util/_transition.scss */
.fade-out.mui-leave {
  opacity: 1;
  transition-property: opacity;
}
/* line 34, ../scss/motion-ui/util/_transition.scss */
.fade-out.mui-leave.mui-leave-active {
  opacity: 0;
}

/* line 22, ../scss/motion-ui/util/_transition.scss */
.hinge-in-from-top.mui-enter {
  transform: perspective(2000px) rotateX(-90deg);
  transform-origin: top;
  transition-property: transform, opacity;
  opacity: 0;
}
/* line 34, ../scss/motion-ui/util/_transition.scss */
.hinge-in-from-top.mui-enter.mui-enter-active {
  transform: perspective(2000px) rotate(0deg);
  opacity: 1;
}

/* line 22, ../scss/motion-ui/util/_transition.scss */
.hinge-in-from-right.mui-enter {
  transform: perspective(2000px) rotateY(-90deg);
  transform-origin: right;
  transition-property: transform, opacity;
  opacity: 0;
}
/* line 34, ../scss/motion-ui/util/_transition.scss */
.hinge-in-from-right.mui-enter.mui-enter-active {
  transform: perspective(2000px) rotate(0deg);
  opacity: 1;
}

/* line 22, ../scss/motion-ui/util/_transition.scss */
.hinge-in-from-bottom.mui-enter {
  transform: perspective(2000px) rotateX(90deg);
  transform-origin: bottom;
  transition-property: transform, opacity;
  opacity: 0;
}
/* line 34, ../scss/motion-ui/util/_transition.scss */
.hinge-in-from-bottom.mui-enter.mui-enter-active {
  transform: perspective(2000px) rotate(0deg);
  opacity: 1;
}

/* line 22, ../scss/motion-ui/util/_transition.scss */
.hinge-in-from-left.mui-enter {
  transform: perspective(2000px) rotateY(90deg);
  transform-origin: left;
  transition-property: transform, opacity;
  opacity: 0;
}
/* line 34, ../scss/motion-ui/util/_transition.scss */
.hinge-in-from-left.mui-enter.mui-enter-active {
  transform: perspective(2000px) rotate(0deg);
  opacity: 1;
}

/* line 22, ../scss/motion-ui/util/_transition.scss */
.hinge-in-from-middle-x.mui-enter {
  transform: perspective(2000px) rotateX(-90deg);
  transform-origin: center;
  transition-property: transform, opacity;
  opacity: 0;
}
/* line 34, ../scss/motion-ui/util/_transition.scss */
.hinge-in-from-middle-x.mui-enter.mui-enter-active {
  transform: perspective(2000px) rotate(0deg);
  opacity: 1;
}

/* line 22, ../scss/motion-ui/util/_transition.scss */
.hinge-in-from-middle-y.mui-enter {
  transform: perspective(2000px) rotateY(-90deg);
  transform-origin: center;
  transition-property: transform, opacity;
  opacity: 0;
}
/* line 34, ../scss/motion-ui/util/_transition.scss */
.hinge-in-from-middle-y.mui-enter.mui-enter-active {
  transform: perspective(2000px) rotate(0deg);
  opacity: 1;
}

/* line 22, ../scss/motion-ui/util/_transition.scss */
.hinge-out-from-top.mui-leave {
  transform: perspective(2000px) rotate(0deg);
  transform-origin: top;
  transition-property: transform, opacity;
  opacity: 1;
}
/* line 34, ../scss/motion-ui/util/_transition.scss */
.hinge-out-from-top.mui-leave.mui-leave-active {
  transform: perspective(2000px) rotateX(-90deg);
  opacity: 0;
}

/* line 22, ../scss/motion-ui/util/_transition.scss */
.hinge-out-from-right.mui-leave {
  transform: perspective(2000px) rotate(0deg);
  transform-origin: right;
  transition-property: transform, opacity;
  opacity: 1;
}
/* line 34, ../scss/motion-ui/util/_transition.scss */
.hinge-out-from-right.mui-leave.mui-leave-active {
  transform: perspective(2000px) rotateY(-90deg);
  opacity: 0;
}

/* line 22, ../scss/motion-ui/util/_transition.scss */
.hinge-out-from-bottom.mui-leave {
  transform: perspective(2000px) rotate(0deg);
  transform-origin: bottom;
  transition-property: transform, opacity;
  opacity: 1;
}
/* line 34, ../scss/motion-ui/util/_transition.scss */
.hinge-out-from-bottom.mui-leave.mui-leave-active {
  transform: perspective(2000px) rotateX(90deg);
  opacity: 0;
}

/* line 22, ../scss/motion-ui/util/_transition.scss */
.hinge-out-from-left.mui-leave {
  transform: perspective(2000px) rotate(0deg);
  transform-origin: left;
  transition-property: transform, opacity;
  opacity: 1;
}
/* line 34, ../scss/motion-ui/util/_transition.scss */
.hinge-out-from-left.mui-leave.mui-leave-active {
  transform: perspective(2000px) rotateY(90deg);
  opacity: 0;
}

/* line 22, ../scss/motion-ui/util/_transition.scss */
.hinge-out-from-middle-x.mui-leave {
  transform: perspective(2000px) rotate(0deg);
  transform-origin: center;
  transition-property: transform, opacity;
  opacity: 1;
}
/* line 34, ../scss/motion-ui/util/_transition.scss */
.hinge-out-from-middle-x.mui-leave.mui-leave-active {
  transform: perspective(2000px) rotateX(-90deg);
  opacity: 0;
}

/* line 22, ../scss/motion-ui/util/_transition.scss */
.hinge-out-from-middle-y.mui-leave {
  transform: perspective(2000px) rotate(0deg);
  transform-origin: center;
  transition-property: transform, opacity;
  opacity: 1;
}
/* line 34, ../scss/motion-ui/util/_transition.scss */
.hinge-out-from-middle-y.mui-leave.mui-leave-active {
  transform: perspective(2000px) rotateY(-90deg);
  opacity: 0;
}

/* line 22, ../scss/motion-ui/util/_transition.scss */
.scale-in-up.mui-enter {
  transform: scale(0.5);
  transition-property: transform, opacity;
  opacity: 0;
}
/* line 34, ../scss/motion-ui/util/_transition.scss */
.scale-in-up.mui-enter.mui-enter-active {
  transform: scale(1);
  opacity: 1;
}

/* line 22, ../scss/motion-ui/util/_transition.scss */
.scale-in-down.mui-enter {
  transform: scale(1.5);
  transition-property: transform, opacity;
  opacity: 0;
}
/* line 34, ../scss/motion-ui/util/_transition.scss */
.scale-in-down.mui-enter.mui-enter-active {
  transform: scale(1);
  opacity: 1;
}

/* line 22, ../scss/motion-ui/util/_transition.scss */
.scale-out-up.mui-leave {
  transform: scale(1);
  transition-property: transform, opacity;
  opacity: 1;
}
/* line 34, ../scss/motion-ui/util/_transition.scss */
.scale-out-up.mui-leave.mui-leave-active {
  transform: scale(1.5);
  opacity: 0;
}

/* line 22, ../scss/motion-ui/util/_transition.scss */
.scale-out-down.mui-leave {
  transform: scale(1);
  transition-property: transform, opacity;
  opacity: 1;
}
/* line 34, ../scss/motion-ui/util/_transition.scss */
.scale-out-down.mui-leave.mui-leave-active {
  transform: scale(0.5);
  opacity: 0;
}

/* line 22, ../scss/motion-ui/util/_transition.scss */
.spin-in.mui-enter {
  transform: rotate(-0.75turn);
  transition-property: transform, opacity;
  opacity: 0;
}
/* line 34, ../scss/motion-ui/util/_transition.scss */
.spin-in.mui-enter.mui-enter-active {
  transform: rotate(0);
  opacity: 1;
}

/* line 22, ../scss/motion-ui/util/_transition.scss */
.spin-out.mui-leave {
  transform: rotate(0);
  transition-property: transform, opacity;
  opacity: 1;
}
/* line 34, ../scss/motion-ui/util/_transition.scss */
.spin-out.mui-leave.mui-leave-active {
  transform: rotate(0.75turn);
  opacity: 0;
}

/* line 22, ../scss/motion-ui/util/_transition.scss */
.spin-in-ccw.mui-enter {
  transform: rotate(0.75turn);
  transition-property: transform, opacity;
  opacity: 0;
}
/* line 34, ../scss/motion-ui/util/_transition.scss */
.spin-in-ccw.mui-enter.mui-enter-active {
  transform: rotate(0);
  opacity: 1;
}

/* line 22, ../scss/motion-ui/util/_transition.scss */
.spin-out-ccw.mui-leave {
  transform: rotate(0);
  transition-property: transform, opacity;
  opacity: 1;
}
/* line 34, ../scss/motion-ui/util/_transition.scss */
.spin-out-ccw.mui-leave.mui-leave-active {
  transform: rotate(-0.75turn);
  opacity: 0;
}

/* line 56, ../scss/motion-ui/_classes.scss */
.slow {
  transition-duration: 750ms !important;
}

/* line 56, ../scss/motion-ui/_classes.scss */
.fast {
  transition-duration: 250ms !important;
}

/* line 62, ../scss/motion-ui/_classes.scss */
.linear {
  transition-timing-function: linear !important;
}

/* line 62, ../scss/motion-ui/_classes.scss */
.ease {
  transition-timing-function: ease !important;
}

/* line 62, ../scss/motion-ui/_classes.scss */
.ease-in {
  transition-timing-function: ease-in !important;
}

/* line 62, ../scss/motion-ui/_classes.scss */
.ease-out {
  transition-timing-function: ease-out !important;
}

/* line 62, ../scss/motion-ui/_classes.scss */
.ease-in-out {
  transition-timing-function: ease-in-out !important;
}

/* line 62, ../scss/motion-ui/_classes.scss */
.bounce-in {
  transition-timing-function: cubic-bezier(0.485, 0.155, 0.24, 1.245) !important;
}

/* line 62, ../scss/motion-ui/_classes.scss */
.bounce-out {
  transition-timing-function: cubic-bezier(0.485, 0.155, 0.515, 0.845) !important;
}

/* line 62, ../scss/motion-ui/_classes.scss */
.bounce-in-out {
  transition-timing-function: cubic-bezier(0.76, -0.245, 0.24, 1.245) !important;
}

/* line 68, ../scss/motion-ui/_classes.scss */
.short-delay {
  transition-delay: 300ms !important;
}

/* line 68, ../scss/motion-ui/_classes.scss */
.long-delay {
  transition-delay: 700ms !important;
}

/* line 8, ../scss/app.scss */
.hero-title {
  animation-name: custom-1;
  animation-duration: 500ms;
  animation-delay: 0s;
  animation-timing-function: easeIn;
}
@keyframes custom-1 {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
/* line 13, ../scss/app.scss */
.hero-subtitle {
  animation-name: scale-1-to-0;
  animation-duration: 500ms;
  animation-delay: 0.25s;
  animation-timing-function: easeIn;
}
@keyframes scale-1-to-0 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
/* line 18, ../scss/app.scss */
.hero-button-1 {
  animation-name: hinge-in-left-edge-from-back;
  animation-duration: 750ms;
  animation-delay: 0.75s;
}
@keyframes hinge-in-left-edge-from-back {
  0% {
    transform: perspective(2000px) rotateY(90deg);
    transform-origin: left;
  }
  100% {
    transform: perspective(2000px) rotate(0deg);
  }
}
/* line 23, ../scss/app.scss */
.hero-button-2 {
  animation-name: hinge-in-bottom-edge-from-back;
  animation-duration: 750ms;
  animation-delay: 0.75s;
}
@keyframes hinge-in-bottom-edge-from-back {
  0% {
    transform: perspective(2000px) rotateX(90deg);
    transform-origin: bottom;
  }
  100% {
    transform: perspective(2000px) rotate(0deg);
  }
}
/* line 30, ../scss/app.scss */
.motion-demos-lead {
  animation-name: custom-2;
  animation-duration: 400ms;
  animation-delay: 1.5s;
}
@keyframes custom-2 {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
/* line 33, ../scss/app.scss */
.motion-demos-sublead {
  animation-name: custom-3;
  animation-duration: 400ms;
  animation-delay: 1.9s;
}
@keyframes custom-3 {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
/* line 36, ../scss/app.scss */
.animation-list.one > li:nth-child(1) {
  animation-name: custom-4;
  animation-duration: 400ms;
  animation-delay: 2.3s;
}
@keyframes custom-4 {
  0% {
    transform: perspective(2000px) rotateY(90deg);
    transform-origin: center;
    opacity: 0;
  }
  100% {
    transform: perspective(2000px) rotate(0deg);
    opacity: 1;
  }
}
/* line 39, ../scss/app.scss */
.animation-list.one > li:nth-child(2) {
  animation-name: custom-5;
  animation-duration: 400ms;
  animation-delay: 2.4s;
}
@keyframes custom-5 {
  0% {
    transform: perspective(2000px) rotateY(90deg);
    transform-origin: center;
    opacity: 0;
  }
  100% {
    transform: perspective(2000px) rotate(0deg);
    opacity: 1;
  }
}
/* line 42, ../scss/app.scss */
.animation-list.one > li:nth-child(3) {
  animation-name: custom-6;
  animation-duration: 400ms;
  animation-delay: 2.5s;
}
@keyframes custom-6 {
  0% {
    transform: perspective(2000px) rotateY(90deg);
    transform-origin: center;
    opacity: 0;
  }
  100% {
    transform: perspective(2000px) rotate(0deg);
    opacity: 1;
  }
}
/* line 45, ../scss/app.scss */
.animation-list.one > li:nth-child(4) {
  animation-name: custom-7;
  animation-duration: 400ms;
  animation-delay: 2.6s;
}
@keyframes custom-7 {
  0% {
    transform: perspective(2000px) rotateY(90deg);
    transform-origin: center;
    opacity: 0;
  }
  100% {
    transform: perspective(2000px) rotate(0deg);
    opacity: 1;
  }
}
/* line 48, ../scss/app.scss */
.animation-list.two > li:nth-child(1) {
  animation-name: custom-8;
  animation-duration: 400ms;
  animation-delay: 2.7s;
}
@keyframes custom-8 {
  0% {
    transform: perspective(2000px) rotateY(90deg);
    transform-origin: center;
    opacity: 0;
  }
  100% {
    transform: perspective(2000px) rotate(0deg);
    opacity: 1;
  }
}
/* line 51, ../scss/app.scss */
.animation-list.two > li:nth-child(2) {
  animation-name: custom-9;
  animation-duration: 400ms;
  animation-delay: 2.8s;
}
@keyframes custom-9 {
  0% {
    transform: perspective(2000px) rotateY(90deg);
    transform-origin: center;
    opacity: 0;
  }
  100% {
    transform: perspective(2000px) rotate(0deg);
    opacity: 1;
  }
}
/* line 54, ../scss/app.scss */
.animation-list.two > li:nth-child(3) {
  animation-name: custom-10;
  animation-duration: 400ms;
  animation-delay: 2.9s;
}
@keyframes custom-10 {
  0% {
    transform: perspective(2000px) rotateY(90deg);
    transform-origin: center;
    opacity: 0;
  }
  100% {
    transform: perspective(2000px) rotate(0deg);
    opacity: 1;
  }
}
/* line 59, ../scss/app.scss */
input[type="radio"] + label {
  display: inline-block;
  margin-left: 0.5rem;
  margin-right: 1rem;
  margin-bottom: 0;
  vertical-align: baseline;
}

@media only screen and (min-width: 40.0625em) and (max-width: 64em) {
  /* line 67, ../scss/app.scss */
  .animation-lists {
    max-height: 400px;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
  }
}

/* line 75, ../scss/app.scss */
.animation-list {
  margin-left: 0;
  list-style-type: none;
  opacity: 0.75;
}
/* line 80, ../scss/app.scss */
.animation-list > li {
  margin-bottom: 1rem;
}
/* line 85, ../scss/app.scss */
.animation-list p {
  margin-bottom: 0.5rem;
  border-bottom: 1px solid #ccc;
  color: #fff;
}
/* line 91, ../scss/app.scss */
.animation-list label {
  color: #fff;
}
/* line 95, ../scss/app.scss */
.animation-list input[type="radio"] {
  margin-bottom: 0;
  position: relative;
  top: -1px;
}
/* line 101, ../scss/app.scss */
.animation-list hr {
  margin: 10px 0;
}
/* line 105, ../scss/app.scss */
.animation-list a {
  color: #fff;
  transition: transform 0.25s ease;
  display: block;
}
/* line 110, ../scss/app.scss */
.animation-list a:hover {
  transform: translateX(5px);
}

/* line 116, ../scss/app.scss */
hr.secondary {
  opacity: 0.5;
  width: 50%;
}

/* line 121, ../scss/app.scss */
.motion-example-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* line 127, ../scss/app.scss */
.motion-demos {
  margin-bottom: 2rem;
  background: #008CBA url("http://zurb.com/playground/uploads/upload/upload/407/stars.svg");
  padding-bottom: 2rem;
  overflow: hidden;
}
@media only screen and (min-width: 40.0625em) {
  /* line 133, ../scss/app.scss */
  .motion-demos > .row {
    display: flex;
    align-items: stretch;
  }
}

/* line 141, ../scss/app.scss */
.motion-demos-lead,
.motion-demos-sublead {
  text-align: center;
  padding-left: 1.875rem;
  padding-right: 1.875rem;
  color: white;
}

/* line 149, ../scss/app.scss */
.motion-demos-lead {
  font-size: 1.5rem;
  font-weight: bold;
  margin: 0;
}
@media only screen and (max-width: 40em) {
  /* line 149, ../scss/app.scss */
  .motion-demos-lead {
    line-height: 1.2;
    font-size: 1.25rem;
  }
}

/* line 160, ../scss/app.scss */
.motion-demos-sublead {
  margin-bottom: 3rem;
}

/* line 164, ../scss/app.scss */
.hero {
  background: linear-gradient(to bottom, #074e68, rgba(7, 78, 104, 0));
  color: white;
  text-align: center;
  padding-top: 3rem;
  padding-bottom: 3.5rem;
}
/* line 171, ../scss/app.scss */
.hero h1 {
  color: white;
  font-size: 4rem;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 4px;
}
/* line 179, ../scss/app.scss */
.hero p {
  font-size: 1.5rem;
}
/* line 183, ../scss/app.scss */
.hero .button {
  margin: 0 1rem 1rem 1rem;
}

/* line 188, ../scss/app.scss */
.inverted.button {
  background: white;
  color: #055D7D;
  font-weight: bold;
}
/* line 193, ../scss/app.scss */
.inverted.button:hover {
  background: #ddd;
  color: #055D7D;
}

/* line 199, ../scss/app.scss */
#motionExample {
  max-width: 200px;
  width: 100%;
  height: auto;
  margin: 0 auto 1rem auto;
  display: block;
}
@media only screen and (min-width: 40.0625em) {
  /* line 199, ../scss/app.scss */
  #motionExample {
    max-width: 500px;
  }
}

/* line 211, ../scss/app.scss */
#transitionDemo {
  display: block;
  margin: 1rem auto;
}

/* line 216, ../scss/app.scss */
#animationDemo {
  width: 260px;
  margin: 0 auto 1rem auto;
  background: #2daebf;
  color: white;
  text-align: center;
  padding: 1rem;
  cursor: pointer;
  box-shadow: 0 -2px 0 rgba(0, 0, 0, 0.2) inset !important;
  font-weight: bold;
  border-radius: 2px;
  transition: background-color 300ms ease-out;
}
/* line 229, ../scss/app.scss */
#animationDemo:hover {
  background: #238896;
}

/* line 234, ../scss/app.scss */
.slideAndSpinAndFade {
  animation-name: custom-11;
  animation-duration: 2s;
}
@keyframes custom-11 {
  0% {
    opacity: 0;
    transform: rotate(-4turn) translateY(200%);
  }
  100% {
    opacity: 1;
    transform: rotate(0) translateY(0);
  }
}
/* line 239, ../scss/app.scss */
.series-demo {
  list-style-type: none;
  margin-left: 0;
}
/* line 172, ../bower_components/foundation/scss/foundation/components/_global.scss */
.series-demo:before, .series-demo:after {
  content: " ";
  display: table;
}
/* line 173, ../bower_components/foundation/scss/foundation/components/_global.scss */
.series-demo:after {
  clear: both;
}
/* line 244, ../scss/app.scss */
.series-demo li {
  float: left;
  margin-right: 1rem;
}
/* line 249, ../scss/app.scss */
.series-demo li:not(:first-child) {
  width: 49px;
  height: 49px;
}
/* line 253, ../scss/app.scss */
.series-demo li:nth-child(2) {
  background: #43AC6A;
}
/* line 254, ../scss/app.scss */
.series-demo li:nth-child(3) {
  background: #f08a24;
}
/* line 255, ../scss/app.scss */
.series-demo li:nth-child(4) {
  background: #f04124;
}
/* line 258, ../scss/app.scss */
.series-demo li:nth-child(2) {
  animation-name: custom-13;
  animation-duration: 1s;
  animation-delay: 0s;
}
@keyframes custom-13 {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
/* line 262, ../scss/app.scss */
.series-demo li:nth-child(3) {
  animation-name: custom-14;
  animation-duration: 0.5s;
  animation-delay: 1.5s;
}
@keyframes custom-14 {
  0% {
    transform: rotate(-1turn);
    opacity: 0;
  }
  100% {
    transform: rotate(0);
    opacity: 1;
  }
}
/* line 266, ../scss/app.scss */
.series-demo li:nth-child(4) {
  animation-name: hinge-in-bottom-edge-from-back;
  animation-duration: 2s;
  animation-delay: 2s;
}
@keyframes hinge-in-bottom-edge-from-back {
  0% {
    transform: perspective(2000px) rotateX(90deg);
    transform-origin: bottom;
  }
  100% {
    transform: perspective(2000px) rotate(0deg);
  }
}
/* line 272, ../scss/app.scss */
.hero {
  background: linear-gradient(#008CBA, rgba(0, 140, 186, 0)) !important;
}

/* line 276, ../scss/app.scss */
.motion-demos {
  background-color: #074e68 !important;
}