.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;
}