.icon-1,
.icon-2,
.icon-3 {
  position: absolute;
  width: 32px;
  height: 3px;
  background-color: #262626;
  transition: all 400ms cubic-bezier(0.84, 0.06, 0.52, 1.8);
}

.icon-1 {
  transform: translateY(-8px);
  animation-delay: 100ms;
}

.icon-3 {
  transform: translateY(8px);
  animation-delay: 250ms;
}

.hamburger-icon {
  z-index: 1000;
  cursor: pointer;
  border-radius: 50%;
  transition: all 0.2s ease-in-out;
}

.icon-1.a {
  transform: rotate(40deg);
}
.icon-3.b {
  transform: rotate(-40deg);
}
.icon-2.c {
  opacity: 0;
}

.clear {
  clear: both;
}

@keyframes slideIn {
  0% {
    width: 0%;
    // transform: scale(.3);
    opacity: 0;
  }

  100% {
    width: 50%;
    // transform:scale(1);
    opacity: 1;
  }
}

.pattern {
  background: repeating-radial-gradient(
      circle,
      transparent,
      transparent 9.1px,
      #cce6cc 9.1px,
      #cce6cc 11.7px
    ),
    repeating-radial-gradient(
      circle,
      transparent,
      transparent 9.1px,
      #cce6cc 9.1px,
      #cce6cc 11.7px
    ),
    #ffffff;
  background-size: 52px 52px;
  background-position: 0 0, 26px 26px, 52px 26px;
  background-color: #ffffff;
}

.reference-display-disc-inactive {
  color: grey;
  width: 10px;
  height: 10px;
  background-color: grey;
  border-radius: 100%;
  padding: 2px;
  margin: 10px;
}

.reference-display-disc-active {
  color: #18705c;
  width: 10px;
  height: 10px;
  background-color: #18705c;;
  border-radius: 100%;
  padding: 2px;
  margin: 10px;
}