#top-menu {
  position:fixed;
  top:45%;
  left:20px;
  width:30%;
  z-index:1;

  border-radius: 10%;
  list-style: none;
  padding: 0;

  position: -webkit-sticky;
}

ul {
  flex-wrap: wrap;

  
}
/* The circle when its not active*/
.circle {
height: 70px;
width: 70px;
background-color: transparent;
border-color: gray;

border-style: solid;
border-width: 4px;
border-radius: 50%;
position: relative;

transition: all 0.5s ease-in-out;
}

.circle-active:before{
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  top: 108%;
  left: 50%;
  border: 1px solid;
  border-width: 0 0 0 5px;
  width: 5px;
  height: 25px;
}

/* The stick when it is not activated*/
.circle:before{
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 50%;
  border: 5px solid gray;
  border-width: 0 0 0 5px;
  width: 20px;
  height: 35px;

  margin-left: -1px;

}
/* The "stick" when activated*/
.circle-active:before{
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 50%;
  border: 10px solid #EE6C4D;
  border-width: 0 0 0 5px;
  width: 20px;
  height: 35px;
 
  margin-left: -1px;
}

/*The circle when its active*/
.circle-active {
  height: 70px;
  width: 70px;
  background-color: rgba(238, 108, 77, 0.6);
  border-color: #EE6C4D;
  
  border-style: solid;
  border-width: 4px;
  border-radius: 50%;
  position: relative;

}

#last_section:before{
  content: none;
}

.listWid{
height: 100px;
width:fit-content;

display: flex;
justify-content: center;
align-items: center;
}
#top-menu li {
  margin-left: 15px;
}

.side-navbar {
  color: gray;
}

.side-navbar a{
  color: grey;
  text-decoration:none;
}

.side-navbar a:hover {
  color:#EE6C4D
}

.side-navbar-active {

 color: black;
}