.primary-color {
  color: white;
}

.secondary-color {
  color: #3F4531;
}

.primary-background-color {
  background-color: rgb(48,103,120);
}

.secondary-background-color {
  background-color: #fed547;
}

.process-step .step-base {
  height: 6em;
  -webkit-clip-path: polygon(0% 0%, 90% 0%, 100% 3em, 90% 6em, 0% 6em, 10% 3em);
  clip-path: polygon(0% 0%, 90% 0%, 100% 3em, 90% 6em, 0% 6em, 10% 3em);
  padding: 1em 15% 1em 15%;
}

.process-step:last-child .step-base {
  height: 6em;
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 6em, 10% 3em);
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 6em, 10% 3em);
  padding: 1em 15% 1em 15%;
}

.process-step:last-child .step-caption {
  width: 100%;
}

.process-step:first-child .step-base {
  height: 6em;
  -webkit-clip-path: polygon(0% 0%, 90% 0%, 100% 3em, 90% 6em, 0% 6em);
  clip-path: polygon(0% 0%, 90% 0%, 100% 3em, 90% 6em, 0% 6em);
  padding: 1em 15% 1em 15%;
}

.process-step {
  padding: 0px;
  margin-bottom: 1.5em;
  font-size: 16px;
}

.steps-container {
  padding-top: 1.5em;
}

.step-caption {
  position: absolute;
  z-index: 10;
  top: 100%;
  width: 90%;
  left: 0px;
  max-height: 0px;
  display: block;
  overflow: hidden;
  transition: all .5s ease;
}

.step-caption .caption-content {
  position: relative;
  top: 0%;
  width: 100%;
  left: 0px;
  min-height: 7.5em;
  /*padding: .5em 1rem;*/
  margin: 0px;
}

.step-caption .caption-content > * {
  max-width: 100%;
  padding: .5em 1rem;
}

.step-caption .caption-content > img {
  max-width: 100%;
  padding: 0px;
}

.process-step:hover .step-caption {
  display: block;
  max-height: 15em;
}

.process-step:hover .step-caption .caption-content {
  top: 0%;
}

.primary-color {
  color: white;
}

.secondary-color {
  color: #3F4531;
}

.primary-background-color {
  background-color: rgb(48,103,120);
}

.secondary-background-color {
  background-color: #fed547;
}