body, input, textarea, select{font-family: 'Open Sans', sans-serif;line-height: 1.8em;color: #010101;font-weight: 300;}

h1 {font-size: 3em;color: #606060; font-variant: small-caps;}

.wrapper {box-shadow: inset 0px 1px 0px 0px rgba(0, 0, 0, 0.15), inset 0px 2px 3px 0px rgba(0, 0, 0, 0.15);}

.wrapper.style1 {background-color: #fff;padding-top: 2em;}

.wrapper.style2 {background-color: #fafafa;padding-top: 10px;padding-bottom: 1em;}

.wrapper.style3 {background-color: #f4f4f4;padding-top: 10px;padding-bottom: 1em;}



.graph__wrapper{
  width: 400px;
  margin: 30px auto;
  position: relative;
  
  
  svg{
    position: absolute;
    margin: 36px 0px 0px 15px;
  }
}



.coordinates{
  position: absolute;
  counter-reset: line 6;
  
  span{
    display: inline-block;
    border-bottom: 1px solid lighten(@darkgrey, 100%);
    height: 20px;
    width: 400px;
    
    &:before {
      counter-increment: line -1;
      content: counter(line);
      display: inline-block;
      color: lighten(@darkgrey, 100%);
      margin: 10px 0px 0px -15px;
    }
  }
}


.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 3s ease-in forwards;
  animation-iteration-count: infinite;
  animation-delay: 1s;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

.description{
  font-family: "Roboto";
  color:lighten(@darkgrey, 50%);
  text-align: center;
  margin: 40px 0px;
}




#nav {background-color: #282828;text-align: center;position: fixed;left: 0;top: 0;width: 100%;z-index: 10000;cursor: default;}

#nav ul {margin-bottom: 0;margin-top: 0;}

#nav li {display: inline-block;padding-right: 1em;}

#nav a {position: relative;display: block;color: #fff;text-decoration: none;outline: 0;}