.cloud-left {
  position: absolute;
  left: -4%;
  bottom: 9%;
  width: 70%;
  transform: translateX(-90%);
  transition: 0.9s 0s linear all;
}

#panel-2 {
  background: linear-gradient(rgba(255, 255, 255, 0) 60%, white 60%);
}

.call-left {
  transform: rotate(9deg) translateX(-80%);
  transition: 0.6s 0.8s linear all;
}

.call-right {
  position: absolute;
  transform: rotate(0deg) translateX(80%);
  transition: 0.6s 0.5s linear all;
}

#button1 {
  top: 30%;
  right: 5%;
  padding: 13% 23%;
  background: url(../assets/giraffe/giraffe-12a-no-glo.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

#button2 {
  top: 60%;
  right: 6%;
  padding: 14% 22.5%;
  background: url(../assets/giraffe/giraffe-12b-no-glo.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

#button1[data-clicked='true'] {
  background: url(../assets/giraffe/giraffe-12a-glo.png);
  background-size: contain;
  filter: grayscale(1);
}
#button2[data-clicked='true'] {
  background: url(../assets/giraffe/giraffe-12b-glo.png);
  background-size: contain;
  filter: grayscale(1);
}

#button1[data-clicked='false']::before,
#button2[data-clicked='false']::before {
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  background-size: cover;
}

#button1[data-clicked='false']::before {
  background-image: url(../assets/giraffe/giraffe-12a-glo.png);
}
#button2[data-clicked='false']::before {
  background-image: url(../assets/giraffe/giraffe-12b-glo.png);
}