/*** motocicletta */

.centro {
  transform: translateX(0px);
}

.sinistra {
  transform: translateX(calc(-50vw - 130px));
}

.destra {
  transform: translateX(calc(50vw + 130px));
}

.noTransizione {
  transition: all 0ms linear !important;
}

.sinistraInizio {
  transform: translateX(calc(-40vw));
  /* transition: transform 0ms linear !important; */
}

.destraInizio {
  transform: translateX(calc(40vw));
  /* transition: transform 0ms linear !important; */
}


.mare {
  position: relative;
  width: 104vw !important;
  margin-top: -100px;
  margin-left: -2vw;
  background-image: url("/wp-content/plugins/monitoro-animazioni-web/public/img/road.png");
  background-size: contain;
  background-position: 50% 0;
  height: 150px;
  background-repeat:repeat-x;
  overflow: hidden;
}

.mare img {
  display: none;
  width: 100%;
  height: 130px !important;
  z-index: 3;
  position: absolute;
  bottom: -45px;
}



 @media (min-width: 570px) {
  .mare {
    margin-top: -75px !important;
  }
} 

 @media (min-width: 570px) {
  .mare {
    margin-top: -75px !important;
  }
} 


#motocicletta,
#motocicletta2,
#motocicletta3 {
  position: relative;
  z-index: 12;
  display: flex;
  justify-content: center;
  animation: galleggia linear 1s infinite;
  z-index: 100; 
}


@keyframes galleggia {
  0% {
    top: 0px;
    left: 0px;
 
  }
  10% {
    top: 2px;
    left: 0px;
 

  }
  20% {
    top: 0px;
    left: 0px;
 

  }
  30% {
    top: 2px;
    left: 0px;
 

  }
  40% {
    top: 0px;
    left: 0px;
 

  }
  50% {
    top: 2px;
    left: 0px;

  }
  60% {
    top: 0px;
    left: 0px;

  }
  70% {
    top: 2px;
    left: 0px;

  }
  80% {
    top: 0px;
    left: 0px;

  }
  90% {
    top: 2px;
    left: 0px;

  }
  95% {
    top: 0px;
    left: 0px;

  }
  100% {
    top: 2px;
    left: 0px;

  }
}


.mirrored {
  transform: scaleX(-1);

}
.motocicletta{
  /* transition: transform 3000ms; */
  position: relative; 
  z-index: 100; 
}

#motocicletta-container,
#motocicletta2-container,
#motocicletta3-container {

  display: flex;
  justify-content: center;
}

@media (min-width: 600px) and (max-width: 1000px) {
  .sinistra {
    transform: translateX(-650px);
  }
  .destra {
    transform: translateX(650px);
  }
}

@media (min-width: 1001px) {
  .sinistra {
    transform: translateX(-1150px);
  }
  .destra {
    transform: translateX(1150px);
  }
}
@media (min-width: 990px) {
  #motocicletta,
  #motocicletta2,
  #motocicletta3 {
    width: 250px !important;
  }
}

@media (max-width: 989px) {
  #motocicletta,
  #motocicletta2,
  #motocicletta3 {
    width: 150px !important;
  }
}

.mare {
  width: 100vw;
  margin-top: -20px;
}
@media (max-width: 569px){
  .mare {
    margin-top: -40px !important;
    height: 60px; 
  }
}
@media (min-width: 570px) {
  .mare {
    margin-top: -95px !important;
  }
}


#motocicletta-test-destra, #motocicletta-test-sinistra{
  width: 150px; 
  position: absolute; 
  bottom: 40px; 
}

#motocicletta-test-container{
  display: flex;
  justify-content: center
}

.hidden {
  display: none;
}