#circle {
  height: 45px;
  width: 45px;
  border-radius: 50%;
  background-color: black;
  cursor: pointer;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  position: absolute;
}

.fab-menu{
  z-index: 999;
  position: fixed;
  top: 0;
  left: 45%;
  margin: 20px 0;
}

#menu-icon {
  position: absolute;
  margin-top: 13px;
}

.bar {
  height: 3px;
  width: 20px;
  background-color: #CFCDBF;
  border-radius: 6px;
  margin-top: 3px;
  margin-left: 12px;
}

.click {
  -webkit-animation: activate 0.3s linear forwards;
  animation: activate 0.3s linear forwards;
}

@-webkit-keyframes activate {

}

@keyframes activate {
  0% {transform: scale(1);}
  25% {transform: scale(1.1);}
  50% {transform: scale(0.9);}
  75% {transform: scale(1);}
  100% {transform: scale(8.5);}
}

.back {
  -webkit-animation: deactivate 0.3s linear forwards;
  animation: deactivate 0.3s linear forwards;
}

@-webkit-keyframes deactivate {
  0% {transform: scale(8.5);}
  25% {transform: scale(1);}
  50% {transform: scale(0.9);}
  75% {transform: scale(1.1);}
  100% {transform: scale(1);}
}

@keyframes deactivate {
  0% {transform: scale(8.5);}
  25% {transform: scale(1);}
  50% {transform: scale(0.9);}
  75% {transform: scale(1.1);}
  100% {transform: scale(1);}
}

#menu {
  position: relative;
  margin: 0 0 0 -38px;
  display: none;
  font-size: 16px;
}

li {
  list-style: none;
  margin-top: 18px;
  color: #fff;
  font-family: 'Open Sans';
  font-size: 14px;
}

i {
  color: #CFCDBF;
  vertical-align: middle;
  margin-right: 18px;
}

a {
  text-decoration: none;
  color: #fff;
  border-bottom: none !important;
}

a:hover,
#back:hover {
  color: #CFCDBF;
  transition: color 0.15s;
}

#back {
  cursor: pointer;
}