.location {
  position: fixed;
  width: 56px;
  height: 292px;
  z-index: 9999;
  top: 50%;
  transform: translate(0%, -50%);
  right: 0;
  border-radius: 3px;
}

.location div i {
  font-style:normal;
}
.location div p {
  z-index: inherit;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 56px;
  height: 56px;
  background-color: #fff;
}

.location div p img {
  width: 30px;
  height: 30px;
}

.location div p img:hover {
  cursor: pointer;
}

.location div:nth-child(1) {
  margin-bottom: 12px;
  background-color: #fff;
    box-shadow: 0 0 5px #d3d3d3;
}

.location div:nth-child(2) {
  background-color: #fff;
   box-shadow: 0 0 5px #d3d3d3;
}

.location div:nth-child(2) i {
  text-decoration: none;
    box-shadow: -1px 2px 5px #d3d3d3;
}

.location div:nth-child(2) p:nth-child(1):hover i {
  left: -130px;
  opacity: 1;
}

.location div:nth-child(2) p:nth-child(1) i {
  opacity: 0;
  border: 0px 0px 5px #c6bdbd;
  position: absolute;
  top: 68px;
  left: 0px;
  height: 130px;
  width: 130px;
  transition: 1s all;
  background-color: #fff;
  z-index: -1;
}

.location div:nth-child(2) p:nth-child(1) i a {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
  justify-content: space-around;
  align-items: center;
}

.location div:nth-child(2) p:nth-child(1) i a img {
  width: 60%;
  height: 60%;
  margin-bottom: 15px;
}

.location div:nth-child(2) p:nth-child(1) i a span {
  margin-top: 5px;
}

.location div:nth-child(2) p:nth-child(2):hover i {
  left: -130px;
  opacity: 1;
}

.location div:nth-child(2) p:nth-child(2) i {
  opacity: 0;
  border: 0px 0px 5px #c6bdbd;
  background-color: #fff;
  position: absolute;
  top: 124px;
  left: 0px;
  height: 130px;
  width: 130px;
  transition: 1s all;
  z-index: -1;
}

.location div:nth-child(2) p:nth-child(2) i a {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
  justify-content: space-around;
  align-items: center;
}

.location div:nth-child(2) p:nth-child(2) i a img {
  width: 60%;
  height: 60%;
  margin-bottom: 15px;
}

.location div:nth-child(2) p:nth-child(2) i a span {
  margin-top: 5px;
}

.location div:nth-child(2) p:nth-child(3):hover i {
  left: -130px;
  opacity: 1;
}

.location div:nth-child(2) p:nth-child(3) i {
  opacity: 0;
  position: absolute;
  top: 180px;
  left: 0px;
  height: 130px;
  width: 130px;
  transition: 1s all;
  border: 0px 0px 5px #c6bdbd;
  background-color: #fff;
  z-index: -1;
}

.location div:nth-child(2) p:nth-child(3) i a {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.location div:nth-child(2) p:nth-child(3) i a img {
  border: 1px solid red;
  width: 60%;
  height: 60%;
  margin-bottom: 15px;
}

.location div:nth-child(2) p:nth-child(3) i a span {
  margin-top: 5px;
  display: flex;
  flex-flow: column;
  justify-content: space-around;
  align-items: center;
}

.location div:nth-child(2) p:nth-child(3) i a span canvas {
  margin-top: 5px;
  margin-bottom: 15px;
}

.location div:nth-child(2) p:nth-child(4):hover i {
  left: -130px;
  opacity: 1;
}

.location div:nth-child(2) p:nth-child(4) i {
  opacity: 0;
  border: 0px 0px 5px #c6bdbd;
  background-color: #fff;
  position: absolute;
  top: 236px;
  left: 0px;
  height: 56px;
  width: 130px;
  transition: 1s all;
  z-index: -1;
}

.location div:nth-child(2) p:nth-child(4) i a {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}

.location .location-left p {
  border: 1px solid red;
}