#divR{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background-color: #8ecae6;
}

.sinistra {
    transform: scaleX(-1);
}

.destra {
    transform: scaleX(1);
}

#ape {
    display: none;
    position: fixed;
    transition: .1s;
    width: 100px;
    height: 100px;
    z-index: 1;
}

.api{
    position:fixed;
    z-index: 1;
}

.alveare{
    width: 50%;
    height: 100%;
    position: relative;
    top: -150px;
    left: 100px;
    z-index: 0;
}

#alveare_svg{
    width: 100%;
    height: 100%;
}

/* Movimenti parti ape */

#antenna1, #antenna2{
	animation: antenne 2s linear 0s infinite normal forwards;
  animation-delay: calc(var(--ordine) * 300ms);
}

#zampa1, #zampa2, #zampa3, #zampa4{
	animation: zampe 2s linear 0s infinite normal forwards;
  animation-delay: calc(var(--ordine) * 300ms);
}

#ala1, #ala2{
	animation: ali 10ms linear 0s infinite normal forwards;
  animation-delay: calc(var(--ordine) * 50ms);
}

@keyframes antenne {
	0%, 100% {
    transform: rotate(0deg);
    transform-origin: bottom left;
  }
  10% {
      transform: rotate(1deg);
  }
  90% {
      transform: rotate(2deg);
  }
}

@keyframes zampe {
	0%, 100% {
    transform: rotate(0deg);
    transform-origin: top center;
  }
  10% {
      transform: rotate(1deg);
  }
  90% {
      transform: rotate(2deg);
  }
}

@keyframes ali {
	0%, 100% {
    transform: rotate(0deg);
    transform-origin: bottom right;
  }
  10% {
      transform: rotate(1deg);
  }
  90% {
      transform: rotate(2deg);
  }
}