@import url("https://fonts.googleapis.com/css?family=Muli:400,700");
#WS-ScroLi {
  position: absolute;
  z-index: 1;
  margin-top: -20px; }
  #WS-ScroLi.fixed {
    position: fixed; }
  #WS-ScroLi.asbolute {
    position: absolute; }
  #WS-ScroLi [class^="item"] {
    display: inline-block;
    display: inline-grid;
    justify-content: center;
    align-content: center;
    position: relative; }
    #WS-ScroLi [class^="item"] .line, #WS-ScroLi [class^="item"] .line-animation {
      position: absolute; }
    #WS-ScroLi [class^="item"] .line-animation {
      z-index: 999; }
    #WS-ScroLi [class^="item"].reading {
      color: red;
      border-color: red; }
      #WS-ScroLi [class^="item"].reading .line, #WS-ScroLi [class^="item"].reading .line-animation {
        background: red; }
    #WS-ScroLi [class^="item"].current {
      border-width: 3px;
      color: green;
      border-color: green; }

#WS-ScroLi [class^="item"]>span { z-index: -1 !important; }
#WS-ScroLi [class^="item"]:first-child, #WS-ScroLi [class^="item"]>span { opacity: 0; }
#WS-ScroLi [class^="item"].current>span, #WS-ScroLi [class^="item"].past>span { opacity: 1; }
#WS-ScroLi [class^="item"].current>img, #WS-ScroLi [class^="item"].past>img {background: #fff;transition: .5s;}
#WS-ScroLi [class^="item"].past>.line-animation { background-image: linear-gradient(#D70CA6, #fff) !important; }
#WS-ScroLi [class^="item"]>img {background: #D70CA6;border-radius: 100px;box-shadow: 0 0 0 2px #ffffff;transition: .5s;}