$color: #79A529

body,
html
  background: #eee
  font-size: 14px
  color: #333
  font-family: 'Open Sans', 'Helvetica Neue', 'sans-serif'
  
*
  -webkit-box-sizing: border-box
  -moz-box-sizing: 	border-box
  box-sizing: 		border-box
    
h1
  font-weight: 300
  margin: 0 0 5% 0
  
.next-step
  background: #ccc
  color: #555
  padding: 15px
  font-size: 16px
  font-weight: 300
  display: block
  margin: 80px auto 0
  border-radius: 4px
  width: 150px
  cursor: pointer
  
  &:hover
    background: #bbb

.step-container
  margin: 3% auto
  text-align: center

  .step
    position: relative
    z-index: 2
    display: inline-block
    text-align: center
    background: #000
    width: 80px
    height: 80px
    font-weight: bold
    border-radius: 50%
    padding-top: 30px
    transition: background 1000ms ease, color 1000ms ease
    transition-delay: 800ms
    background: linear-gradient( to right, $color 50%, #fff 50%)
    background-size: 200% 100%
    background-position: right bottom
    
    &.active
      background-position: left bottom
      color: #fff
  
  .step-separator
    position: relative
    z-index: 1
    background: #444
    height: 30px
    width: 100px
    margin: 0 -10px -10px -10px
    display: inline-block
    background: linear-gradient( to right, $color 50%, rgba(255,255,255,.5) 50%)
    background-size: 200% 100%
    background-position: right bottom
    transition: background 1000ms ease
    
    &.active
      background-position: left bottom