
.grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 340px;
    margin: 0 auto;
}
@media screen and (min-width: 768px) {
    .grid {
        max-width: 1200px;
   }
}
.card_certi {
    position: relative;
    flex: 1 1 100%;
    margin: 31px 0;
    padding: 20px;
    background: #fff;
}
@media screen and (min-width: 768px) {
    .card_certi {
        flex-basis: calc(33.33% - (62px + 40px));
        margin: 0 31px;
   }
}
.card__thumb {
    overflow: hidden;
}
.card__img {
    margin: -20px -20px 0;
}
.card__img img {
    max-width: 100%;
    height: auto;
    border: 0;
    vertical-align: middle;
    box-sizing: border-box;
}
.card__desc {
    margin-top: 20px;
}
.card__two .card__img {
    padding: 20px;
}


.card__two::before, .card__two::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transition: opacity 0.38s ease-in-out, transform 0.35s ease-in-out;
    content: "";
    opacity: 0;
    pointer-events: none;
}
.card__two::before {
    transform: scale3d(0, 1, 1);
    transform-origin: left top;
    border-top: 1px solid #acacac;
    border-bottom: 1px solid #acacac;
}
.card__two::after {
    transform: scale3d(1, 0, 1);
    transform-origin: right top;
    border-right: 1px solid #acacac;
    border-left: 1px solid #acacac;
}
.card__two:hover::before, .card__two:focus::before, .card__two:hover::after, .card__two:focus::after {
    transform: scale3d(1, 1, 1);
    opacity: 1;
}



/*Vertical Steps*/
.list-group.vertical-steps{
  padding-left:10px;
}
.list-group.vertical-steps .list-group-item{
  border:none;
  border-left:3px solid #1ebba3;
  box-sizing:border-box;
  border-radius:0;
  padding-left:20px;
  padding-right:0px;
  padding-bottom:20px;  
  padding-top:0px;
}
.list-group.vertical-steps .list-group-item.active{
  background-color:transparent;
  color:inherit;
}
.list-group.vertical-steps .list-group-item:last-child{
  border-left:3px solid transparent;
  padding-bottom:0;
}
.list-group.vertical-steps .list-group-item::before {
  border-radius: 50%;
  background-color:#1ebba3;
  color:#555;
  content: "";
  display:inline-block;
  float:left;
  height:25px;
  line-height:25px;
  margin-left:-35px;
  text-align:center;  
  width:25px;  
}
.list-group.vertical-steps .list-group-item span,
.list-group.vertical-steps .list-group-item a{
  display:block;
  overflow:hidden;
  padding-top:2px;
}
/*Active/ Completed States*/
.list-group.vertical-steps .list-group-item.active::before{
  background-color:black;
  color:black;
}
.list-group.vertical-steps .list-group-item.completed{
  
  border-left:3px solid #1ebba3;
}
.list-group.vertical-steps .list-group-item.completed::before{
  background-color:black;
  color:#1ebba3;
  content: "✔";
}
.list-group.vertical-steps .list-group-item.completed:last-child{
  border-left:3px solid transparent;
}

