/* Style the Sequence container */
#sequence {
  position: relative;
  width: 60%;
  /* height: 485px; */
  height: 450px;
  max-width: 100%;
  overflow: hidden;
  margin: 0 auto;
  padding: 0;
  font-family: sans-serif;
}

/* Reset */
#sequence .seq-canvas,
#sequence .seq-canvas > * {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Make the canvas the same dimensions as the container and prevent lines from
   wrapping so each step can sit side-by-side */
#sequence .seq-canvas {
  position: absolute;
  height: 100%;
  width: 100%;
  white-space: nowrap;
  font-size: 0;
}

/* Make the steps the same size as the container and sit side-by-side */
#sequence .seq-canvas > * {
  display: inline-block;
  vertical-align: top;
  width: 100%;
  height: 100%;
  white-space: normal;
  text-align: center;
  color: white;
}

/* Used to vertically center align the .content element */
#sequence .seq-canvas > li:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

/* Vertically center align the .content element */
#sequence .content {
  display: inline-block;
  vertical-align: middle;
  margin: 0 4%;
  font-size: 1rem;
}

/* pagination style for current page indicator */
.seq-current {
  border: black solid 1px;
  background-color: #879fff;
}

.seq-pagination button {
  border: gray solid 1px;
  border-radius: 50%;
}

#sequence .step1 {
  background-color: hsl(234, 60%, 75%);
}

#sequence .step2 {
  background-color: #6bbfff;
}

#sequence .step3 {
  background-color: #f998ff;
}

#sequence .step4 {
  background-color: #879fff;
}

#sequence .step5 {
  background-color: #8bbf8e;
}

#sequence .step6 {
  background-color: #8888ff;
}

#sequence .step7 {
  background-color: #f97862;
}

#sequence h2,
#sequence h3 {
  margin: 0;
  display: block;
  line-height: 120%;
}

#sequence h2 {
  margin-bottom: .5em;
  font-size: 2.6em;
}

#sequence h3 {
  color: black;
  font-size: 1.4em;
}

/* Starting positions */
#sequence h2,
#sequence h3 {
  opacity: 0;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
}

#sequence h2 {
  -webkit-transform: translate(0, -40px);
  transform: translate(0, -40px);
}

#sequence h3 {
  -webkit-transform: translate(-100px, 0);
  transform: translate(-100px, 0);
}

/* Animate in positions for content */
#sequence .seq-in h2,
#sequence .seq-in h3 {
  opacity: 1;
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}

/* Animate out positions for content */
#sequence .seq-out h2,
#sequence .seq-out h3 {
  opacity: 1;
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}