/* private colors */
nav {
  background-color: #ff5050;
}
#language {
  background-color: #ba3c3c;
}
.donate-new-button button {
  background-color: #ff5050;
}

/* main imgs */
.bgimg img.mobile1,
.bgimg img.mobile2 {
  display: none;
}

/* this for desktop */
@keyframes DchangeImage1 {
  0% {
    opacity: 1;
  }
  10% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  30% {
    opacity: 1;
  }
  33% {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  60% {
    opacity: 0;
  }
  70% {
    opacity: 0;
  }
  75% {
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes DchangeImage2 {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  30% {
    opacity: 0;
  }
  33% {
    opacity: 1;
  }
  40% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  66% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/* this for mobile */
@keyframes changeImage1 {
  0% {
    opacity: 1;
  }
  10% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  30% {
    opacity: 1;
  }
  33% {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  60% {
    opacity: 0;
  }
  70% {
    opacity: 0;
  }
  75% {
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes changeImage2 {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  30% {
    opacity: 0;
  }
  33% {
    opacity: 1;
  }
  40% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  66% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/* תמונה רגילה */
.bgimg img.regular1 {
  animation: DchangeImage1 20s infinite;
}

/* תמונה רגילה 2 */
.bgimg img.regular2 {
  position: absolute;
  left: 0;
  animation: DchangeImage2 20s infinite;
}

@media screen and (max-width: 768px) {
  .bgimg img.regular1,
  .bgimg img.regular2 {
    display: none;
  }
  .bgimg img.mobile1 {
    display: block;
    animation: changeImage1 20s infinite;
  }

  .bgimg img.mobile2 {
    display: block;
    position: absolute;
    left: 0;
    animation: changeImage2 20s infinite;
  }
}