body{
    width:100%;
    height:100%;
}

/*------------------------------- vertical carousel indicators ------------------------------*/

.MultiCarousel { 
    float: left; 
    overflow: hidden; 
    padding: 0px; 
    width: 100%; 
    position:relative; 
    background-color: rgba(0,0,0,0.3);
}
.MultiCarousel .MultiCarousel-inner { 
    transition: 1s ease all; 
    float: left; 
}
.MultiCarousel .MultiCarousel-inner .item { 
    float: left;
}
.MultiCarousel .MultiCarousel-inner .item > div { 
    text-align: center; 
    padding:0px; 
    margin:15px;  
    color:#666;
}
.MultiCarousel .leftLst, 
.MultiCarousel .rightLst { 
    position:absolute; 
    border-radius:50%;
    top: calc(50% - 20px); 
}
.MultiCarousel .leftLst { 
    left: 10px; 
}
.MultiCarousel .rightLst { 
    right:10px; 
}
.MultiCarousel .leftLst.over, 
.MultiCarousel .rightLst.over { 
    pointer-events: none; 
    background: rgba(0,0,0,0.5); 
}
.fill {
    height: 100px;
}
@media (min-width: 768px) {
    ol {
      max-width: 100%;
      counter-reset: my-awesome-counter;
      list-style: none;
      padding-left: 90px;
      margin-top: 10px;
    }
    ol li {
      margin: 0 0 20px 0;
      counter-increment: my-awesome-counter;
      position: relative;
      font-size: 20px;
      height: 70px;
      display: block;
    }
    ol li span {
        display: inline-block;
        vertical-align: middle;
    }
    ol li::before {
      content: counter(my-awesome-counter);
      color: #ccc;
      font-size: 40px;
      font-weight: bold;
      position: absolute;
      left: -90px;
      width: 70px;
      height: 70px;
      top: -20;
      background: rgba(0,0,0,0);
      border-radius: 50%;
      text-align: center;
      border: solid 2px #ccc;
      vertical-align: middle;
      display: inline-block;
    }
}
@media (max-width: 767px) {
    ol {
      max-width: 100%;
      counter-reset: my-awesome-counter;
      list-style: none;
      padding-left: 90px;
      margin-top: 10px;
    }
    ol li {
      margin: 0 0 20px 0;
      counter-increment: my-awesome-counter;
      position: relative;
      font-size: 14px;
      height: 75px;
      display: block;
    }
    ol li span {
        display: inline-block;
        vertical-align: middle;
    }
    ol li::before {
      content: counter(my-awesome-counter);
      color: #ccc;
      font-size: 40px;
      font-weight: bold;
      position: absolute;
      left: -90px;
      width: 70px;
      height: 70px;
      top: -20;
      background: rgba(0,0,0,0);
      border-radius: 50%;
      text-align: center;
      border: solid 2px #ccc;
      vertical-align: middle;
      display: inline-block;
    }
}
ol li.active::before{
    background:#26dbe9;  
    color: #fff;
    border: solid 2px #fff; 
}