html{
	
	width: 100%;
	margin: 0px;
	padding: 0px;
}

#scene {
  position: relative;
  width: 100%;
  height: 540px;
  overflow: hidden;
  background: #fff;
}

#scene > div {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hide;
}

#scene img {

  position: absolute;
}

.mensagem {
  position: absolute;
  top: 7rem;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  width: 100%;
  text-align: center;
}

.mensagem img {
  max-width: 100%;
  height: auto;
  display: block;
}



@keyframes balanco {
  0%, 100% { transform: rotate(0deg) translateY(10px); }
  25%      { transform: rotate(2deg) translateY(-2px); }
  50%      { transform: rotate(0deg) translateY(2px); }
  75%      { transform: rotate(-2deg) translateY(-2px); }
}

@keyframes cabeca {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(4deg); }
  50%      { transform: rotate(0deg); }
  75%      { transform: rotate(-4deg); }
}

@keyframes boiar {
  0%, 100% {
    transform: translateY(0px) translateX(0px) rotate(0deg);
  }
  25% {
    transform: translateY(-4px) translateX(2px) rotate(1deg);
  }
  50% {
    transform: translateY(2px) translateX(-2px) rotate(-1deg);
  }
  75% {
    transform: translateY(-3px) translateX(1px) rotate(0.5deg);
  }
}

.balanco img {
  animation: balanco 4s ease-in-out infinite;
}

@keyframes cabeca1 {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(3deg); }
  50%      { transform: rotate(0deg); }
  75%      { transform: rotate(-3deg); }
}

@keyframes cabeca2 {
  0%, 100% { transform: rotate(0deg); }
  20%      { transform: rotate(5deg); }
  60%      { transform: rotate(-5deg); }
  80%      { transform: rotate(2deg); }
}