.loop-wrapper {
  margin: 0 auto;
  position: relative;
  display: block;
  width: 100%;
  height: 230px;
  overflow: hidden;
  border-bottom: 3px solid #000;
  color: #000;
  /* تاخیر در لود */
  opacity: 0;
  animation: fadeIn 0.5s ease forwards;
  animation-delay: 5s;
}
@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

.adv-txt {
  font-size: 10px;
  margin-left: 5px;
  margin-top: 215px;
  font-family: 'IRANSansWeb';
}
.company {
  position: absolute;
  right: -1500px;
  height: 100px; 
  width: 1050px;
  bottom: 85;
  background: url(https://hedicart.ir/image/adv/adv_Farda_Motors3.png) no-repeat;
  transform: rotate(0deg);
  animation: company 150s linear infinite;
}
.company1 {
  position: absolute;
  right: -1900px;
  height: 100px; 
  width: 1150px;
  bottom: 70px;
  background: url(https://hedicart.ir/image/adv/adv_Farda_Motors4.png) no-repeat;
  transform: rotate(0deg);

  animation: company1 270s linear infinite;
}
.company2 {
  position: absolute;
  right: -1900px;
  height: 100px; 
  width: 1150px;
  bottom: 80px;
  background: url(https://hedicart.ir/image/adv/adv_Farda_Motors5.png) no-repeat;
  transform: rotate(0deg);

  animation: company1 270s linear infinite;
}
.company3 {
  position: absolute;
  right: -1900px;
  height: 100px; 
  width: 1150px;
  bottom: 50px;
  background: url(https://hedicart.ir/image/adv/adv_Farda_Motors4.png) no-repeat;
  transform: rotate(0deg);

  animation: company1 270s linear infinite;
}
.company4 {
  position: absolute;
  right: -1800px;
  height: 100px; 
  width: 1250px;
  bottom: 35px;
  background: url(https://hedicart.ir/image/adv/adv_Farda_Motors6.png) no-repeat;
  transform: rotate(0deg);

  animation: company1 270s linear infinite;
}
.mountain {
  position: absolute;
  right: -900px;
  bottom: -20px;
  width: 2px;
  height: 2px;
  box-shadow: 
    0 0 0 50px #000,
    60px 50px 0 70px #000,
    90px 90px 0 50px #000,
    250px 250px 0 50px #000,
    290px 320px 0 50px #000,
    320px 400px 0 50px #000
    ;
  transform: rotate(130deg);
  animation: mtn 20s linear infinite;
}
.hill {
  position: absolute;
  right: -900px;
  bottom: -50px;
  width: 400px;
  border-radius: 50%;
  height: 20px;
  box-shadow: 
    0 0 0 50px #1f1f1f,
    -20px 0 0 20px #1f1f1f,
    -90px 0 0 50px #2c2c2c,
    250px 0 0 50px #2f2f2f,
    290px 0 0 50px #2c2c2c,
    620px 0 0 50px #1f1f1f;
  animation: hill 4s 2s linear infinite;
}
.tree, .tree:nth-child(2), .tree:nth-child(3) {
  position: absolute;
  height: 100px; 
  width: 35px;
  bottom: 0;
  background: url(https://hedicart.ir/image/tree.svg) no-repeat;
}
.rock {
  margin-top: -17%;
  height: 2%; 
  width: 2%;
  bottom: -2px;
  border-radius: 20px;
  position: absolute;
  background: #000;
}
.truck, .wheels {
  transition: all ease;
  width: 85px;
  margin-right: -60px;
  bottom: 0px;
  right: 50%;
  position: absolute;
  background: #000;
}
.truck {
  background: url(https://hedicart.ir/image/truck.svg) no-repeat;
  background-size: contain;
  height: 60px;
  }
.truck:before {
  content: " ";
  position: absolute;
  width: 25px;
  box-shadow:
    -30px 28px 0 1.5px #000,
     -35px 18px 0 1.5px #000;

}
.wheels {
  background: url(https://hedicart.ir/image/wheels.svg) no-repeat; 
  height: 15px;
  margin-bottom: 0;
}

.tree  { animation: tree 3s 0.000s linear infinite; }
.tree:nth-child(2)  { animation: tree2 2s 0.150s linear infinite; }
.tree:nth-child(3)  { animation: tree3 8s 0.050s linear infinite; }
.rock  { animation: rock 4s   -0.530s linear infinite; }
.truck  { animation: truck 4s   0.080s ease infinite; }
.wheels  { animation: truck 4s   0.001s ease infinite; }
.truck:before { animation: wind 1.5s   0.000s ease infinite; }
.company  { animation: company 20s   -.330s linear infinite; }
.company1  { animation: company1 10s   -.930s linear infinite; }
.company2  { animation: company2 15s   -.130s linear infinite; }
.company3  { animation: company3 12s   -.130s linear infinite; }
.company4  { animation: company4 10s   -.030s linear infinite; }



@keyframes tree {
  0%   { transform: translate(1350px); }
  50% {}
  100% { transform: translate(-50px); }
}
@keyframes tree2 {
  0%   { transform: translate(650px); }
  50% {}
  100% { transform: translate(-50px); }
}
@keyframes tree3 {
  0%   { transform: translate(2750px); }
  50% {}
  100% { transform: translate(-50px); }
}

@keyframes rock {
  0%   { right: -200px; }
  100% { right: 2000px; }
}
@keyframes truck {
  0%   { }
  6%   { transform: translateY(0px); }
  7%   { transform: translateY(-6px); }
  9%   { transform: translateY(0px); }
  10%   { transform: translateY(-1px); }
  11%   { transform: translateY(0px); }
  100%   { }
}
@keyframes wind {
  0%   {  }
  50%   { transform: translateY(3px) }
  100%   { }
}
@keyframes mtn {
  100% {
    transform: translateX(-2000px) rotate(130deg);
  }
}
@keyframes hill {
  100% {
    transform: translateX(-10000px);
  }
}
@keyframes company {
  100% {
    transform: translateX(-1600px) rotate(0deg);
  }
}
@keyframes company1 {
  100% {
    transform: translateX(-1600px) rotate(0deg);
  }
}
@keyframes company2 {
  100% {
    transform: translateX(-1700px) rotate(0deg);
  }
}
@keyframes company3 {
  100% {
    transform: translateX(-1800px) rotate(0deg);
  }
}
@keyframes company4 {
  100% {
    transform: translateX(-1850px) rotate(0deg);
  }
}

/* Extra small Mobile */

@media (max-width: 575.98px) {
  .loop-wrapper {
     width: 95%;
  }
}
/*  Mobile */
@media (min-width: 576px) and (max-width: 767.98px) {
  .loop-wrapper {
     width: 97.1%;
  }
}
/* Tablet */
@media (min-width: 768px) and (max-width: 991.98px) {
  .loop-wrapper {
     width: 97.6%;
  }
}
/* laptop */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .loop-wrapper {
     width: 96.35%;
  }
}
/* Desktop */
@media (min-width: 1200px) {
  .loop-wrapper {
     width: 97.1%;
  }
}

/*مربوط به پنهان شدن انیمیشن تبلیغ در زمان تغییر ارتفاع صفحه */
#myElement.hidden {
    display: none !important;
}