.first-container {
  background-image: url('/images/content/msk_impact_opacity_10.png');
  background-size: 60%;
  background-position: center 175px;
  background-attachment: scroll;
  background-repeat: no-repeat;
}

@keyframes slideInLeft {
  from {
    transform: translateX(-100%); /* Start off the screen to the left */
    opacity: 0;
  }
  to {
    transform: translateX(0); /* End at the normal position */
    opacity: 1;
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(100%); /* Start off the screen to the right */
    opacity: 0;
  }
  to {
    transform: translateX(0); /* End at the normal position */
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0; /* Start fully transparent */
  }
  to {
    opacity: 1; /* End fully visible */
  }
}

.slide-left {
  animation: slideInLeft 1s ease-out;
}

.slide-left-slow {
  animation: slideInLeft 1s ease-out forwards;
}

.slide-right {
  animation: slideInRight 1s ease-out;
}

.slide-right-slow {
  animation: slideInRight 1s ease-out forwards;
}

.fade-in {
  animation: fadeIn 1s ease-in forwards; /* 1-second fade in */
  opacity: 0; /* Start hidden by default */
}

/* Make sure images are initially hidden (without animation) */
.slide-right-slow-onscroll {
  opacity: 0;
}

.slide-left-slow-onscroll {
  opacity: 0;
}

/* WIP
h3, p, a, table {
        background-color: rgba(255, 255, 255, 0.8);
        padding: 10px;
}
*/