/* impact facts animation */
@media screen and (max-width: 360px) {
  :root {
    --impact-image-fact-1-width: 325px;
    --impact-text-fact-1-width: 325px;
    --impact-image-fact-2-width: 325px;
    --impact-text-fact-2-width: 325px;
    --impact-image-fact-3-width: 325px;
    --impact-text-fact-3-width: 325px;
  }
}

@media screen and (min-width: 361px) {
  :root {
    --impact-image-fact-1-width: 350px;
    --impact-text-fact-1-width: 350px;
    --impact-image-fact-2-width: 350px;
    --impact-text-fact-2-width: 350px;
    --impact-image-fact-3-width: 350px;
    --impact-text-fact-3-width: 350px;
  }
}

@media screen and (min-width: 641px) {
  :root {
    --impact-image-fact-1-width: 550px;
    --impact-text-fact-1-width: 550px;
    --impact-image-fact-2-width: 550px;
    --impact-text-fact-2-width: 550px;
    --impact-image-fact-3-width: 550px;
    --impact-text-fact-3-width: 550px;
  }
}

@media screen and (min-width: 1024px) {
  :root {
    --impact-image-fact-1-width: 270px;
    --impact-text-fact-1-width: 200px;
    --impact-image-fact-2-width: 270px;
    --impact-text-fact-2-width: 400px;
    --impact-image-fact-3-width: 270px;
    --impact-text-fact-3-width: 250px;
  }
}

/* desktop version */
.impact-image-fact-1-desktop {
  width: 0px;
  animation: showing-image-fact-1-desktop 15s linear infinite;  
}

@keyframes showing-image-fact-1-desktop 
 {
  0% { width: 0px; }
  9.99999% { width: 0px; }
  10% { width: var(--impact-image-fact-1-width); }
  99.9999% { width: var(--impact-image-fact-1-width); }
  100% { width: 0px; }
}

.impact-text-fact-1-desktop {
  width: 0px;
  overflow: hidden;
  animation: showing-text-fact-1-desktop 15s linear infinite;
}

@keyframes showing-text-fact-1-desktop {
  0% { width: 0px; }
  9.99999% { width: 0px; }
  10% { width: var(--impact-text-fact-1-width); }
  99.99999% { width: var(--impact-text-fact-1-width); }
  100% { width: 0px; }
}

.impact-image-fact-2-desktop {
  width: 0px;
  animation: showing-image-fact-2-desktop 15s linear infinite;  
}

@keyframes showing-image-fact-2-desktop 
 {
  0% { width: 0px; }
  39.99999% { width: 0px; }
  40% { width: var(--impact-image-fact-2-width); }
  99.99999% { width: var(--impact-image-fact-2-width); }
  100% { width: 0px; }
}

.impact-text-fact-2-desktop {
  width: 0px;
  overflow: hidden;
  animation: showing-text-fact-2-desktop 15s linear infinite;
}

@keyframes showing-text-fact-2-desktop {
  0% { width: 0px; }
  39.99999% { width: 0px; }
  40% { width: var(--impact-text-fact-2-width); }
  99.99999% { width: var(--impact-text-fact-2-width); }
  100% { width: 0px; }
}

.impact-image-fact-3-desktop {
  width: 0px;
  animation: showing-image-fact-3-desktop 15s linear infinite;  
}

@keyframes showing-image-fact-3-desktop 
 {
  0% { width: 0px; }
  69.99999% { width: 0px; }
  70% { width: var(--impact-image-fact-3-width); }
  99.99999% { width: var(--impact-image-fact-3-width); }
  100% { width: 0px; }
}

.impact-text-fact-3-desktop {
  width: 0px;
  overflow: hidden;
  animation: showing-text-fact-3-desktop 15s linear infinite;
}

@keyframes showing-text-fact-3-desktop {
  0% { width: 0px; }
  69.99999% { width: 0px; }
  70% { width: var(--impact-text-fact-3-width); }
  99.99999% { width: var(--impact-text-fact-3-width); }
  100% { width: 0px; }
}

/* mobile version */
.impact-image-fact-1 {
  width: 0px;
  animation: showing-image-fact-1 15s linear infinite;  
}

@keyframes showing-image-fact-1 
 {
  0% { width: 0px; }
  9.99999% { width: 0px; }
  10% { width: var(--impact-image-fact-1-width); }
  39.99999% { width: var(--impact-image-fact-1-width); }
  40% { width: 0px; }
}

.impact-text-fact-1 {
  width: 0px;
  padding: 0rem;
  overflow: hidden;
  animation: showing-text-fact-1 15s linear infinite;
  background-color: #FFE284;
  border-radius: 1em;
  color: black;
}

@keyframes showing-text-fact-1 {
  0% { width: 0px; padding: 0px; }
  9.99999% { width: 0px; padding: 0px; }
  10% { width: var(--impact-text-fact-1-width); padding: 1rem; }
  39.99999% { width: var(--impact-text-fact-1-width); padding: 1rem; }
  40% { width: 0px; padding: 0px; }
}

.impact-image-fact-2 {
  width: 0px;
  animation: showing-image-fact-2 15s linear infinite;  
}

@keyframes showing-image-fact-2 
 {
  0% { width: 0px; }
  39.99999% { width: 0px; }
  40% { width: var(--impact-image-fact-2-width); }
  69.99999% { width: var(--impact-image-fact-2-width); }
  70% { width: 0px; }
}

.impact-text-fact-2 {
  width: 0px;
  padding: 0px;
  overflow: hidden;
  animation: showing-text-fact-2 15s linear infinite;
  background-color: #FFE284;
  border-radius: 1em;
  color: black;
}

@keyframes showing-text-fact-2 {
  0% { width: 0px; padding: 0px; }
  39.99999% { width: 0px; padding: 0px; }
  40% { width: var(--impact-text-fact-2-width); padding: 1rem; }
  69.99999% { width: var(--impact-text-fact-2-width); padding: 1rem; }
  70% { width: 0px; padding: 0px; }
}

.impact-image-fact-3 {
  width: 0px;
  animation: showing-image-fact-3 15s linear infinite;  
}

@keyframes showing-image-fact-3 
 {
  0% { width: 0px; }
  69.99999% { width: 0px; }
  70% { width: var(--impact-image-fact-3-width); }
  99.99999% { width: var(--impact-image-fact-3-width); }
  100% { width: 0px; }
}

.impact-text-fact-3 {
  width: 0px;
  padding: 0px;
  overflow: hidden;
  animation: showing-text-fact-3 15s linear infinite;
  background-color: #FFE284;
  border-radius: 1em;
  color: black;
}

@keyframes showing-text-fact-3 {
  0% { width: 0px; padding: 0px; }
  69.99999% { width: 0px; padding: 0px; }
  70% { width: var(--impact-text-fact-3-width); padding: 1rem; }
  99.99999% { width: var(--impact-text-fact-3-width); padding: 1rem; }
  100% { width: 0px; padding: 0px; }
}