.logo {
    margin: 4px;
    width: 135px;
    height: 41px;
    background-image: url(../images/logo.png);
    /* background-position: center center; */
    background-repeat: no-repeat;
    /* background-position: right center; */
    /* background-position: 45px 4px; */
    background-repeat: no-repeat;
    background-size: auto 100%;
    /* position: absolute; */
    display: inline-block;
    /* top: 5px; */
    /* left: 8px; */
}

.stemma{
    width: 47px;
    height: 47px;
    display: inline-block;
    background-image: url(../images/stemma.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100%;
    border-radius: 5px;
    display: inline-block;
    animation: rotate2 6s infinite ease-in-out;
}

@keyframes rotate2 {
  0% {
    transform: perspective(120px) rotateY(0deg) rotateX(0deg);
  }
  80% {
    transform: perspective(120px) rotateY(0deg) rotateX(0deg);
  }
  90% {
    transform: perspective(120px) rotateY(-180deg) rotateX(0deg);
  }
  100% {
    transform: perspective(120px) rotateY(-360deg) rotateX(0deg);
  }
}

@keyframes stemma {
  0% {
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  }
  25% {
    transform: perspective(120px) rotateX(0deg) rotateY(-180deg);
  }
  50% {
    transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
  }
  75% {
    transform: perspective(120px) rotateX(-180deg) rotateY(-360deg);
  }
  100% {
    transform: perspective(120px) rotateX(-360deg) rotateY(-360deg);
  }
}

.stemma_grande{
  background-size: 90%;
  width: 80px;
  height: 80px;
  display: inline-block;
  background-image: url('../images/stemma.png');
  background-color: white;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius:5px;
  animation: stemma 2.4s infinite ease-in-out;
}