aside{
  position: fixed;
  right: 20px;
  top: calc(50% - 146px);
}
aside ul{

}
aside ul li{
  
}
aside ul li.rogo:nth-child(1) a::before{  
  content: "HOME";  
  position: absolute;
  font-size: 14px;
  left: -46px;
  top: 4px;
  display: block;
  width: 100px;
  height: 10px;
}
aside ul li.rogo:nth-child(2) a::before{  
  content: "PROFILE";  
  position: absolute;
  font-size: 14px;
  left: -61px;
  top: 32px;
  display: block;
  width: 100px;
  height: 10px;
}
aside ul li.rogo:nth-child(3) a::before{  
  content: "SKILL";  
  position: absolute;
  font-size: 14px;
  left: -41px;
  top: 65px;
  display: block;
  width: 110px;
  height: 10px;
}
aside ul li.rogo:nth-child(4) a::before{  
  content: "PORTFOLIO";  
  position: absolute;
  font-size: 14px;
  right: -5px;
  bottom: 58px;
  display: block;
  width: 110px;
  height: 10px;
}
aside ul li.rogo:nth-child(5) a::before{  
  content: "CONTACT";  
  position: absolute;
  font-size: 14px;
  right: 1px;
  bottom: 23px;
  display: block;
  width: 90px;
}
aside ul li:not(last-child){
  margin-bottom: 18px;
}
aside ul li a{   
  font-size: 0;
  width: 13px;
  height: 13px;
  display: block;
  background-color: rgba(0,0,0,0.1);
  border-radius: 50%; 
}
aside ul li a:hover{
 transition: 0.5s ease-in-out;
 background-color: rgba(232, 35, 91, 0.4);
}
.rogo{
 /*! background-color: rgb(239, 68, 116); */
  width: 22px;
  height: 22px;
  display: block;
  font-size: 0;
  /*! border-radius: 50%; */
  background-image: url(../img/rogo3.png);
  background-size: contain;
  background-repeat: no-repeat;
}
.borderB{
 background-color: transparent;
}
.hideA{
 display: none;
}