@charset "utf-8";

/* Navbar - Progress Bar */
.navbar1 {
  height: 350px;
    position: absolute;
    right: 20%;
    top: 5em;
    z-index: 2;
}
.navbar2 {
    position: fixed;
}

.progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height:95%;
    border-radius: 5px;
    background-color: #e8e8e8;
}

.progress-bar--increment {
  background-color: #2bbf46;
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 0;
  border-radius: 5px;
}

.progress-bar--circle {
  position: absolute;
  top: 0px;
  left: -25px;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background-color: #e8e8e8;
  transition: all 0.1s;
}

.progress-bar--circle.active {
  background-color: #2bbf46;
}

.navbar1 ul {
    padding: 0 1em;
    list-style: none;
}

.navbar1 ul li {
    position: relative;
    margin-bottom: 1em;
}

.navbar1 ul li a {
    font-size: 18px;
    color: #545454;
    text-decoration: none;
    transition: all 0.1s;
	font-weight:bold;
}

.active {
 color: #2bbf46 !important;
}

.navbar1 h3{
	font-size:22px;
	color:#000;
	font-weight:bold;
	    position: absolute;
    top: -45px;
    display: block;
    width: 100px;
    left: -10px;
}

.navbar1 ul li {
    position: absolute;
	width:250px;
	padding-left:15px;
}
.navbar1 ul li.first{
		top:0;
}
.navbar1 ul li.sec{
		top:13%;
}
.navbar1 ul li.thi{
		top:26%;
}
.navbar1 ul li.fourth{
		top:39%;
}
.navbar1 ul li.fifth{
		top:52%;
}
.navbar1 ul li.six{
	top:65%;
}
.navbar1 ul li.seven{
	top:78%;
}
.navbar1 ul li.eight{
	top:91%;
}

.navbar1 ul li.first1{
		top:0;
}
.navbar1 ul li.sec1{
		top:15%;
}
.navbar1 ul li.thi1{
		top:30%;
}
.navbar1 ul li.fourth1{
		top:45%;
}
.navbar1 ul li.fifth1{
		top:60%;
}
.navbar1 ul li.six1{
	top:75%;
}
.navbar1 ul li.seven1{
	top:90%;
}
.navbar2{
	top:4em !important;
}
@media (min-width:320px) and (max-width:767px){

.navbar1 ul li a p{
		display:none;
}
.navbar1{
		right:0;
		height:250px;
}
.navbar1 ul li{
	width:auto;
}
.navbar2{
	position:fixed;
	width:25px;
}
.progress-bar--circle{
	width:15px;
	height:15px;
	left:-21px;
}
.navbar1 h3{
	left: -22px;
    font-size: 15px;
    top: -40px;
    width: 50px;
    text-align: center;
}
}
@media (min-width:481px) and (max-width:767px){
.navbar2{
	top:10em;
}	
}
@media (min-width:768px) and (max-width:1199px){
.navbar1 ul li p{
	font-size:12px;
}
.navbar1 ul li{
	width:145px;
}
.navbar1{
	right:17%;
	top:10em;
	height:270px;
}
.progress-bar--circle {
    width: 15px;
    height: 15px;
    left: -21px;
}
.navbar1 ul li{
	padding-left:0;
}
.navbar1 h3{
	top:-30px;
	font-size:18px;
}
.navbar2{
	top:4em;
}
}
@media (min-width:992px) and (max-width:1199px){
.navbar2{
	top:2em;
}
.navbar1 ul li p{
	font-size:14px;
}
.navbar1 ul li{
	width:180px;
}
}
@media (min-width:1200px) and (max-width:1359px){
.navbar1{
	right:16%;
}
.navbar1 ul li{
	width:200px;
}
.navbar1 ul li p{
	font-size:14px;
}
.navbar2{
	top:3em !important;
}
.navbar1{
	height:280px;
}
.navbar1 h3{
	top:-35px;
}
.progress-bar--circle {
    width: 20px;
    height: 20px;
    left: -24px;
}
}
@media (min-width:1360px) and (max-width:1800px){
.navbar1{
	right:20%;
}
.navbar2{
	top:2em !important;
}
.navbar1{
	height:280px;
}
.navbar1 h3{
	top:-35px;
}
}
@media (min-width:1801px) and (max-width:1900px){
.navbar1{
	height:250px;
}
.navbar1 h3{
	top:-35px;
}
.navbar2{
	top:3em !important;
}
}
@media (min-width:1901px) and (max-width:2000px){
.navbar2{
	top:3em !important;
}
.navbar1{
	height:300px;
}
}