/****************************************************
*	FILE: banner.css								*
*													*
*	This css-file contains all definitions for:		*
*		- banner settings							*
*		- banner animation (for main page only)		*
*		- banner images (for each designated page)	*
*****************************************************/

/*---------------------
--  SECTION: BANNER  --
-----------------------*/

/* --- Banner: Header --- */
.banner {
    #position: relative;
    #padding: 0;
    #margin: 20px 0px 0px 0px;
    width: 920px;
    height: 315px;
    #top: 0px;
    #left: 0px;
	#background-color: purple;	
}

.banner img {
	width: 920px;
	height: 315px;
}

/* --- Banner: Fading Animation --- */
/* 
There are 3 sets of numbers that you need to determine:

- Fade-In seconds --> 2 seconds
- Image visible in seconds --> 5 seconds
- Number of images --> 5


- The total animation-duration --> 25 seconds
- The animation-delay for each image --> 5 seconds
- The keyframe timings.

Keyframes: 100 ÷ animation duration = percentage for 1 second 
*/
@keyframes fade {
  0%   { opacity: 0; }
  11.11%   { opacity: 1; }
  33.33%  { opacity: 1; }
  44.44%  { opacity: 0; }
  100% { opacity: 0; }
}

/* .fadein { position:relative; height:332px; width:500px; outline: 1px solid blue; } */
.fadein { 
	position:relative;
}
.fadein img { 
	position:absolute; 
	left:0; 
	right:0; 
	opacity:0; 
	animation-name: fade; 
	animation-duration: 48s; /* (fade-in + visible) × images */
	animation-iteration-count: infinite; 
}

/* Animation Delay = (fade-in + visible) × (ordinal position − 1) */
.fadein img:nth-child(1) { animation-delay: 0s;  }
.fadein img:nth-child(2) { animation-delay: 8s;  }
.fadein img:nth-child(3) { animation-delay: 16s;  }
.fadein img:nth-child(4) { animation-delay: 24s;  }
.fadein img:nth-child(5) { animation-delay: 32s;  }