#scrollspy {
    position: fixed;
    z-index: 99;
    left: 20px;
	bottom: 150px;
	-webkit-transition: .25s opacity ease-out;
    -moz-transition: .25s opacity ease-out;
    transition: .25s opacity ease-out;
	opacity: 0.0;
  padding: 6px 10px 16px 10px;
  background-color: rgba(0, 0, 0, 0.06);
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
}

#scrollspy.visible {
	opacity: 1.0;
}

#scrollspy li {
	position: relative;
}

#scrollspy li:before {
	position: absolute;
	width: 27px;
	height: 27px;
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	top: 5px;
	left: 0px;
	font-size: 17px;
	color: #555;
	border: 1px solid #aaa;
	line-height: 27px;
	text-align: center;
	display: inline-block;
	vertical-align: middle;
	background-color: white;
}

#scrollspy li.active:before {
	background-color: #bbb;
	color: white;
	border-color: #bbb;
}

#scrollspy li:hover:before {
	background-color: #9b0000;
	color: white;
	border-color: #9b0000;
}

#scrollspy li:hover a, #scrollspy li.active a {
	color: black;
}

#scrollspy li a {
	position: relative;
    display: block;
    text-align: center;
    text-decoration: none;
	padding-left: 50px;
	color: #666;
	font-size: 15px;
	text-align: left;
	white-space: nowrap;
	overflow-x: hidden;
}

#scrollspy li a span {
	display: inline-block;
	padding: 10px;
	 -webkit-transition: .25s all ease-out;
    -moz-transition: .25s all ease-out;
    transition: .25s all ease-out;
}

#scrollspy li:nth-child(1):before {	content: '1'; }
#scrollspy li:nth-child(2):before {	content: '2'; }
#scrollspy li:nth-child(3):before {	content: '3'; }
#scrollspy li:nth-child(4):before {	content: '4'; }
#scrollspy li:nth-child(5):before {	content: '5'; }
#scrollspy li:nth-child(6):before {	content: '6'; }
#scrollspy li:nth-child(7):before {	content: '7'; }
#scrollspy li:nth-child(8):before {	content: '8'; }
#scrollspy li:nth-child(9):before {	content: '9'; }


#scrollspy .toggle-visibility {
	position: relative;
	display: block;
	width: 27px;
	height: 27px;
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;

	background-color: transparent;
	top: 7px;
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAA2CAYAAAA25uK9AAADlklEQVRYR+1YW3baQAzl9d/sIM4KGl7fNSsIWUFgBYEVNF1BYQV1VlBYQZxv4JCuoM4O0n8evfIZ+chj2YNJwhc+xwcySLqS5o6kSbVywqd6QqzKGexDsl0qjev12tvv95eMXK1WX5vNZnSoJ04wAthsNvcw3IdRTzEcwYFZo9GYuoBzwQBysd1uf8L44FDPIRfU6/UxQN80HRVsuVxSFL/wXrASvH9GdJNOpzPjNZLD+gjr34TxN6zddrvd0AbMgC0Wiwcof7cEHwGSGyFAA8jfWToj6EzlWgpMU6KI4KXPSkwSmxxwMrQiJJUAgMOEUCIlmnf08y2nbrVaDQBO6Y0fGB+2223Sq5jU/1b2KgGMI7ONSAUAxTIUEQjz1zYGQlwxCwG4V8ASp2JDEHrBx1dNkMGQJh+RPNkyiLTHZMgD4604fWQmus/as4TJTjbCkRCp7HH6TEXxUDEiWTFy2Jg6MplzBrKMkGOqHPJJUdjeN+3IYH/HYOpEyqoVxJCBKsUXIRzCiQnIMOc1Q/d7/O0LuX+Q6x9UQUS6qDaSZ3Zl0EjLa484CqNStVFaM+drhDWql0l7ETKv+D4DyOToqq+5z+Tg32ySFIVMvzn7mctAmd/PYGWylSt7TuPp02jK2CXqHs2PUa1Wi1qt1vOhnjj3zABQ/aMKkvfMAD7V6qGzEJOAPTdSt8VyaF624eMLdXAe5crPjQSEKfgJRq4JBGVpUFT3TBkLCBTyL5DvacU4k0YJpPWkov3hXpgHmAHjRlgWiJ0QzTcz2KbAeIKyB9ND2cZyPCLIyStT9REVdecbOQsaslxjD+/AtrENDJ0J5APsEY2D8SNmzDnml4TF9sADZ9LjNimTQXwQ/VOziJg9pjBKDTZ5ODqeO1ORiRT+QAQPSgQB1mhEiAEFkHrp4AuKTGUSGY/gdp4lqACIsO7hzb3dsPPyPpCAaZ5oxAAgAdEsEiHCK02G1rRMHRsZDTkEmDtPuiKLLw5Io2vP4tSJlKqAhXtmWOdiY2qPitjINyOVjQYs95xhYB3Y9OZjcdQ5E3ew1GUijwQF5IivvIUVxHgan6dPr40EZvpYiK90E83c+IuiFEX4D1Lr221G7dQWYAjFoaufYU/pYu/jVYHISdd/eOQthvYhfjk67Im/2+361GTN2vtuMYY0VGRvClI4N3e3xBFN1jnwSCUCxkTlIRqPJit8Rq4hR+qXAit7BGz5k4L9B9L4n1VdO1dJAAAAAElFTkSuQmCC');
	background-position: center bottom;
  left: 1px;
}

#scrollspy.collapsed {
  background-color: transparent;
}

#scrollspy.collapsed ol {
	display: none;
}

#scrollspy.collapsed .toggle-visibility {
	background-position: center top;
}

/* Only desktop screens */
@media(max-width: 1780px) {

  #scrollspy ol {
    max-width: 30px;
  }

	#scrollspy li a {
		width: 0;
		padding-left: 30px;
		padding-right: 0;
	}

	#scrollspy li:hover a {
		overflow-x: visible;
		width: auto;
	}

	#scrollspy li a span {
		margin-left: 20px;
		border-radius: 6px;
		-moz-border-radius: 6px;
		-webkit-border-radius: 6px;
	}

	#scrollspy li a span:before  {
		content: '';
		position: relative;
		left: -16px;
		top: 1px;
		display: inline-block;
		border-left: none;
		border-top: 6px solid transparent;
		border-right: 6px solid rgba(255, 255, 255, 1.0);
		border-bottom: 6px solid transparent;
	}

	#scrollspy li:hover a span {
		background: rgba(255, 255, 255, 1.0);
		box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.2);
		-moz-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.2);
		-webkit-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.2);

		margin-left: 10px;
	}
}

/* Hide if not fit */
@media(max-width: 1370px) {
	#scrollspy {
		display: none;
	}
}