.A-Spot-Main {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.animation-dose-of-nature {
  background-image: url("background.jpg");
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

@media (min-width: 1024px) {
  .A-Spot-Main {
    height: 480px;
  }

  .animation-dose-of-nature {
    width: 1600px;
    height: 480px;
    left: calc(50% - 800px);
    --WIDTH-BACKGROUND: -2346px;
    --DURATION-ANIMATION: 20s;
  }

  .A-Spot-Main .blocktext {
    height: 300px;
    background-color: rgba(255, 255, 255, 0.8);
    top: calc(50% - 150px);
    position: absolute;
  }
}

@media (max-width: 1023px) {
  .animation-dose-of-nature {
    width: 100%;
    height: 425px;
    --WIDTH-BACKGROUND: -2077px;
    --DURATION-ANIMATION: 15s;
    background-size: auto 425px;
  }
}

.animation-dose-of-nature {
  animation: slideBackground linear var(--DURATION-ANIMATION) infinite;
}

@keyframes slideBackground {
  0% {
    background-position: left 0px top;
  }

  100% {
    background-position: left var(--WIDTH-BACKGROUND) top;
  }
}


@media only screen and (min-device-width : 834px) and (max-device-width : 1112px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 2){
  .blocktext-responsive-mobile{
    padding: 60px;
    background-color: rgba(255, 255, 255, 0.8);
  }
}