@media print {
  .steps {
   display: none;
 }

}

@media screen and (min-width: 768px) {
 .steps {
   display: flex;
   padding: 0;
   font-weight: bold;
   color:  white;
   padding-right: 25px;
   overflow: hidden;
   text-decoration: none;
   margin-bottom: 30px;
 }
 .steps em {
   display: block;
   font-size: 0.95em;
   text-decoration: underline;
 }
 .steps li {
   flex-grow: 1;
   font-size: 1em;
   margin-left: 0;
   width: 172.5px;
   height: 64px;
   list-style-type: none;
   padding: 5px 1px 5px 38px;
   border-right: 3px solid white;
   position: relative;
 }

 .steps li>div {
   margin-right: -10px;
 }

 .steps li:first-child {
   padding-left: 15px;
 }

 .steps li:nth-child(n+2)::before {
   position: absolute;
   top:0;
   left:0;
   display: block;
   border-left: 25px solid white;
   border-top: 32px solid transparent;
   border-bottom: 32px solid transparent;
   width: 0;
   height: 0;
   content: " ";
 }

 .steps li::after {
   z-index: 1;
   position: absolute;
   top: 0;
   right: -25px;
   display: block;
   border-left: 25px solid #7c8437;
   border-top: 32px solid transparent;
   border-bottom: 32px solid transparent;
   width:0;
   height:0;
   content: " ";
 }

  .steps li { background-color: #372A33; }
  .steps li::after { border-left-color: #372A33;}

  .steps li.current { 
    background-color: var(--primary);  
    color: white;
  }
  .steps li.current::after { border-left-color: var(--primary); }
}

@media screen and (max-width: 767px) {
 .steps {
   padding: 0;
   overflow: hidden;
   font-weight: bold;
   color: white;
   text-decoration: none;
    margin-bottom: 20px;
 }

 .steps li {
   float: left;
   margin-left: 0;
   margin-bottom: 0;
   width: 100%;
   list-style-type: none;

   position: relative;
 }

 .steps li:nth-child(n+2)::before {
   font-family: 'Glyphicons Halflings';
   display: block;
   content: "\e094";
   font-size: 6pt;
   color: black;
   text-align:center;
 }


 .steps li em {
   font-size: 1.1em;
   padding-right: .5rem;
 }

 .steps li em::after {
   content: ': ';
 }
 .steps li div {
    background-color: #372A33;
    padding: 1px 1px 1px 1px;
 }

 .steps li.current div {
    background-color: var(--primary);
    color: white;
 }



 .steps li.current em {
   font-size: 1.0em;
   font-weight: bold;
 }
}