.seq {
  position: relative;
  /* Dimensions */
  height: 400px;
  width: 100%;
  max-width: 100%;
  /* Hide anything that goes beyond the boundaries of the Sequence container */
  overflow: hidden;
  /* Center the Sequence container on the page */
  margin: 0 auto;
  padding: 0;
  /* Some basic styles */
  -webkit-text-size-adjust: 100%;
  color: white;
  background: #e4e4e4;
}

.seq button {
  /* Reset styles on buttons */
  cursor: pointer;
  margin: 0;
  border: none;
  background-color: transparent;
}

.seq .seq-screen,
.seq .seq-canvas,
.seq .seq-canvas > * {
  /* Reset the canvas and steps for more browser consistency */
  position: absolute;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.seq .seq-screen {
  /* Override Sequence setting height: 100% on the screen so it can be moved
   * up from the bottom to make space for the navigation
   */
  height: auto !important;
  top: 0;
  /* Make room at the bottom for the navigation (navigation height + navigation bottom) */
  bottom: 3em;
}

.seq .seq-valign {
  font-size: 0;
}

.seq .seq-valign:before,
.seq .seq-valign > * {
  display: inline-block;
  vertical-align: middle;
}

.seq .seq-valign > * {
  font-size: 16px;
}

.seq .seq-valign:before {
  content: "";
  height: 100%;
}

.seq .seq-preloader {
  background: #e4e4e4;
}

.seq .seq-preload-circle {
  /* Change the color of the preload indicator */
  fill: #006E94;
}

.seq .seq-content {
  width: 100%;
  text-align: center;
}

.seq .seq-bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  /* Make the background twice as wide as necessary so it can be moved */
  width: 200%;
  height: 100%;
  /* Dark Sharp Edges background: http://subtlepatterns.com/dark-sharp-edges/ */
  background: url("../img/background_01.jpg") ;
  background-repeat: no-repeat;
  background-size: cover;
      background-position: center center;
  -webkit-transition-duration: 1s;
  transition-duration: 1s;
  -webkit-transition-property: -webkit-transform;
  transition-property: transform;
}

.seq .seq-nav {
  /* Pagination and next/prev buttons */
  position: absolute;
  z-index: 10;
  bottom: 1em;
  height: 2em;
  padding: 0;
  width: 100%;
  border: none;
  text-align: center;
  color: white;
}

.seq .seq-nav > *,
.seq .seq-nav li {
  /* Place navigation side-by-side */
  list-style: none;
  display: inline-block;
  vertical-align: middle;
}

.seq .seq-pagination {
  height: 100%;
  margin: 0;
  padding: 0;
}

.seq .seq-pagination a {
  display: block;
  height: 100%;
  padding: 0 .75em;
  line-height: 2;
  text-decoration: none;
  color: white;
  /* Animate the color of pagination links */
  -webkit-transition-duration: .3s;
  transition-duration: .3s;
  -webkit-transition-property: background-color, color;
  transition-property: background-color, color;
}

.seq .seq-pagination .seq-current a {
  background: white;
  color: black;
}

.seq .seq-pagination > *,
.seq .seq-prev,
.seq .seq-next {
  margin: 0 .375em;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 1em;
  font-family: 'Droid Sans', sans-serif;
  /* Animate the color of pagination links */
  -webkit-transition-duration: .3s;
  transition-duration: .3s;
  -webkit-transition-property: background-color, color;
  transition-property: background-color, color;
}

.seq .seq-pagination > *:hover,
.seq .seq-pagination > *:hover a,
.seq .seq-prev:hover,
.seq .seq-prev:hover a,
.seq .seq-next:hover,
.seq .seq-next:hover a {
  background-color: white;
  color: black;
}

.seq .seq-prev {
  margin-left: 0;
  text-align: left;
}

.seq .seq-next {
  margin-right: 0;
  text-align: right;
}

.seq .seq-prev-arrow,
.seq .seq-next-arrow {
  position: relative;
  padding: 0 .5em;
  top: -1px;
  font-family: 'Cabin', sans-serif;
  -moz-osx-font-smoothing: grayscale;
}

.seq .seq-button {
  display: inline-block;
  margin: 0 auto;
  margin-top: 1em;
  padding: .875em 1em;
  border-top: white solid 1px;
  color: white;
  font-family: 'Droid Sans', sans-serif;
  font-weight: bold;
  text-decoration: none;
  text-transform: uppercase;
}

.seq .seq-button .seq-next-arrow {
  display: inline-block;
  -webkit-transition-duration: .2s;
  transition-duration: .2s;
  -webkit-transition-property: -webkit-transform;
  transition-property: transform;
}

.seq .seq-button:hover .seq-next-arrow {
  -webkit-transform: translateX(6px);
  -ms-transform: translateX(6px);
  transform: translateX(6px);
}

.seq .seq-title {
  font-size: 1.6em;
  margin: .4em 0;
  padding: 0 15%;
  text-transform: uppercase;
  line-height: 1.3;
  text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25);
}

.seq p {
  margin-bottom: .75em;
  padding: 0 1em;
  font-size: 1.06666667em;
  font-family: 'Cabin', sans-serif;
  font-weight: 400;
  text-transform: none;
  text-shadow: none;
  line-height: 140%;
}

.seq .seq-description {
  font-size: .9375em;
}

.seq .seq-title,
.seq .seq-description {
  /* Starting positions */
  display: block;
  -webkit-transform: translateX(100%) translateZ(0);
  -ms-transform: translateX(100%) translateZ(0);
  transform: translateX(100%) translateZ(0);
  -webkit-transition-duration: .5s;
  transition-duration: .5s;
}

.seq .seq-in {
  /* Animate in positions */
}

.seq .seq-in .seq-title {
  -webkit-transform: translateX(0) translateZ(0);
  -ms-transform: translateX(0) translateZ(0);
  transform: translateX(0) translateZ(0);
  -webkit-transition-delay: .1s;
  transition-delay: .1s;
}

.seq .seq-in .seq-description {
  -webkit-transform: translateX(0) translateZ(0);
  -ms-transform: translateX(0) translateZ(0);
  transform: translateX(0) translateZ(0);
  -webkit-transition-delay: .2s;
  transition-delay: .2s;
}

.seq .seq-out {
  /* Animate out positions */
}

.seq .seq-out .seq-title,
.seq .seq-out .seq-description {
  -webkit-transform: translateX(-100%) translateZ(0);
  -ms-transform: translateX(-100%) translateZ(0);
  transform: translateX(-100%) translateZ(0);
}

.seq.seq-step2 {
  /* When on the 2nd step, move the background by 5% */
}

.seq.seq-step2 .seq-bg {
  -webkit-transform: translateX(-5%) translateZ(0);
  -ms-transform: translateX(-5%) translateZ(0);
  transform: translateX(-5%) translateZ(0);
}

.seq.seq-step3 {
  /* When on the 3rd step, move the background by 10% */
}

.seq.seq-step3 .seq-bg {
  -webkit-transform: translateX(-10%) translateZ(0);
  -ms-transform: translateX(-10%) translateZ(0);
  transform: translateX(-10%) translateZ(0);
}

@media only screen and (min-width: 375px) {
  .seq .seq-title {
    font-size: 2em;
  }

  .seq p {
    font-size: 1.2em;
  }
}

@media only screen and (min-width: 480px) {
  .seq .seq-title {
    font-size: 2.375em;
  }

  .seq p {
    font-size: 1.4em;
  }
}

@media only screen and (min-width: 640px) {
  .seq {
    /* Make the container 16:9 but no bigger than 90% of the screen height */
    position: relative;
    height: auto;
    height: 100%;
    max-height: 65vh;
    min-height: 400px;
  }

  .seq:before {
    /* Make an element a certain aspect ratio */
    display: block;
    content: "";
    width: 100%;
    padding-top: 56.25%;
  }

  .seq .seq-screen {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
}

@media only screen and (min-width: 768px) {
  .seq p {
    padding: 0.5em 8em;
  }
}

@media only screen and (min-width: 1024px) {
  .seq .seq-title {
    font-size: 2.5em;
  }

  .seq p {
    font-size: 1.6em;
    padding: 0.5em 10em;
  }

  .seq .seq-button {
    font-size: 1.2em;
  }
}