/*
Theme Name: Enfold Child
Description: A <a href='http://codex.wordpress.org/Child_Themes'>Child Theme</a> for the Enfold Wordpress Theme. If you plan to do a lot of file modifications we recommend to use this Theme instead of the original Theme. Updating will be much easier then.
Version: 1.0
Author: Kriesi
Author URI: http://www.kriesi.at
Template: enfold
*/



/*Add your own styles here:*/

/***** background-slider ******/

.background-slider {
  width: 100%;
  height: 70vh; /* Adjust as needed */
  overflow: hidden; /* Hide overflow to prevent scrollbars */
  position: relative; /* Needed for positioning of slides */
	z-index: 0;
	opacity: 0.4;
}
@media only screen and (max-width:767px) {
	.background-slider {
  width: 100%;
  height: 50vh; /* Adjust as needed */
}

}

.slide {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover; /* Or contain, depending on desired effect */
  background-position: center; /* Or other desired position */
  opacity: 0; /* Start with all slides transparent */
  animation: slideAnimation 24s infinite; /* Adjust duration as needed */
	
}

/*  Keyframe animations for zoom, movement, and fade */
@keyframes slideAnimation {
  0% {
    opacity: 0;
    transform: scale(1.2) translateX(0); /* Initial zoom and position */
  }
  2% {
    opacity: 1;
    transform: scale(1.3) translateX(-2%); /* Fade in */
  }
  23% {
    opacity: 1;
    transform: scale(1) translateX(0); /* Keep zoom for a while */
  }
  25% {
    opacity: 1;
    transform: scale(1) translateX(0); /* Move slightly (adjust value) */
  }
  48% {
    opacity: 1;
    transform: scale(1.1) translateX(-2%); /* Another zoom and movement step */
  }
  50% {
      opacity: 0; /* Fade out */
    transform: scale(1.2) translateX(-2%); /* Another zoom and movement step */
  }

  /*Repeat the pattern for other slides. */
  /*Adjust percentages, zoom, and movement values to fine-tune the effect. */
}


/* Apply different animation delays for each slide */
.slide:nth-child(1) {
  animation-delay: 0s;
}
.slide:nth-child(2) {
  animation-delay: 8s;
}
.slide:nth-child(3) {
  animation-delay: 16s;
}
.slide:nth-child(4) {
  animation-delay: 12s;
}

/* Add more .slide:nth-child(n) rules for more slides */