@charset "utf-8";

/* ============================================
   MHP777.com banner.css:
     - Banner and fading-banner-images slideshow settings.
         - Ideas based on:
             1) http://css3.bradshawenterprises.com/cfimg/
             2) http://stackoverflow.com/questions/600743/how-to-get-div-height-to-auto-adjust-to-background-size/31932133#31932133
	         3) Personal experimentation
   ============================================ */

#bannerWrapper {
	/* Set up the ability to absolutely position all banner-item (img + caption) elements.
	     - Also, add space between banner and all elements below it. */
	position: relative;
	margin-bottom: 10px;
	}

#bannerPlaceholder {
	/* Make sure the placeholder img stays behind all other imgs */
	z-index: -1;
	}
	
.banner-item {
	/* Set up the ability to overlap all multiple banner containers using CSS ONLY,
	     WITHOUT using JS to switch display:none/block (as in bootstrap carousel).
	     - Every banner-item (img + caption) is forced to the top of the banner-wrapper
	         and spread as wide as that container will allow.
	     - Without this, banner-item elements do not overlap and instead run down the page. */
	position: absolute;
	top: 0;
	width: 100%;
	text-align: center;
	}

.banner-img {
	/* Make each img responsive, both in width and in proportionate height */
	width: 100%;
	height: auto;
	}
	
.banner-caption {
	/* Style and absolutely position each caption:
	     - text-shadow: makes text visible despite any background color .
	     - opacity: allows some of the img to show through the text. */
	position: absolute;
	bottom: 1%;
	right: 2%;
	color: #FFFFFF;
	font-style: italic;
	text-shadow: 2px 2px 10px #000000;
	opacity: 0.9;
	letter-spacing: 0.08em;
	text-align: center;
	}
	
/* --------------------------------------------
   Media query viewports:
     - padding-top (DO NOT use if using placeholder img solution):
       - Controls space between bottom of banner img and following visual content.
       - Said space decreases as viewport narrows, so narrower widths must have higher values.
     - font-size:
       - Controls caption text size.
       - Said text fills up more img space as viewport narrows, so narrower widths must have lower values.
   -------------------------------------------- */

@media (min-width: 1px) {
	.banner-caption {
		font-size: 14px;
		right: 0; /* Override default value (2%), to center text in smaller viewports */
		width: 100%; /* Center text in smaller viewports, when menu is collapsed into pancake block */
		}
	}

@media (min-width: 480px) {
	.banner-caption {
		font-size: 14px;
		right: 0; /* Override default value (2%), to center text in smaller viewports */
		width: 100%; /* Center text in smaller viewports, when menu is collapsed into pancake block */
		}
	}

@media (min-width: 640px) {
	.banner-caption {
		font-size: 16px;
		right: 0; /* Override default value (2%), to center text in smaller viewports */
		width: 100%; /* Center text in smaller viewports, when menu is collapsed into pancake block */
		}
	}

@media (min-width: 768px) {
	.banner-caption {
		font-size: 16px;
		right: 2%;
		width: auto;
		}
	}

@media (min-width: 992px) {
	.banner-caption {
		font-size: 18px;
		right: 2%;
		width: auto;
		}
	}

@media (min-width: 1200px) {
	.banner-caption {
		font-size: 20px;
		right: 2%;
		width: auto;
		}
	}

/* --------------------------------------------
   Slideshow settings, based on source 1:
     - Tested in latest versions of FF, IE, Edge, Chrome, Opera, Safari.
     - All work with references only to -webkit- and none (moz, o, ms not needed).
	 ! This works by fading overlapping imgs in and out at identical and precise intervals.
	 ! YOU MUST choose a number of imgs that is inversely divisible into 1 WITHOUT REMAINDER.
	     * Ex. OK: 2 imgs fade over each other every 0.5 seconds.
	     * Ex. OK: 4 imgs fade over each other every 0.25 seconds.
	     * Ex. OK: 8 imgs fade over each other every 0.125 seconds.
	     * Ex. NOT OK: 3 imgs fade over each other every 0.333... seconds.
	     * Ex. NOT OK: 6 imgs fade over each other every 0.1666...7 seconds.
		 ! If the interval is not precise, the imgs will eventually trip over each other
		     and destroy the animation!

   Variables used in timing calculations:
     - n = # images [Ex: (4)/(8)]
     - a = 1-image presentation time [Ex: (4.76s)/(7.6s)]
     - b = cross-fade duration [Ex: (2.24s)/(2.4s)]
     - t = total animation duration = (a+b)*n = t*n [Ex: ((4.76s+2.24s)*4 = 7s*4 = 28s) / ((7.6s+2.4s)*8 = 80s)]
   -------------------------------------------- */

/* --------------------------------------------
   8-img slideshow settings
   -------------------------------------------- */

.banner8-item {
	/* Set up initial animation parameters:
	     ! Remember to change BOTH animation-duration values to match (t) ! */
    -webkit-animation-name: banner8FadeInOut;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 80s;

    animation-name: banner8FadeInOut;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 80s;
    }
                      
@-webkit-keyframes banner8FadeInOut {
    0%      {opacity:1; } /* 0% */
    9.5%    {opacity:1; } /* a/t*100% [Ex: (4.76s/28s*100% = 17%) / (7.6s/80s*100% = 9.5%)] */
    12.5%   {opacity:0; } /* (a+b)/t*100% = 1/n*100% [Ex: ((4.76s+2.24s)/28s*100% = 7s/28s*100% = 25%) / (10s/80s*100% = 12.5%)] */
    97%     {opacity:0; } /* 100%-(b/t*100%) [Ex. (100%-(2.24s/28s*100%) = 92%) / (100%-(2.4s/80s*100%) = 97%)] */
    100%    {opacity:1; } /* 100% */
    }

@keyframes banner8FadeInOut {
    0%      {opacity:1; } /* 0% */
    9.5%    {opacity:1; } /* a/t*100% [Ex: (4.76s/28s*100% = 17%) / (7.6s/80s*100% = 9.5%)] */
    12.5%   {opacity:0; } /* (a+b)/t*100% = 1/n*100% [Ex: ((4.76s+2.24s)/28s*100% = 7s/28s*100% = 25%) / (10s/80s*100% = 12.5%)] */
    97%     {opacity:0; } /* 100%-(b/t*100%) [Ex. (100%-(2.24s/28s*100%) = 92%) / (100%-(2.4s/80s*100%) = 97%)] */
    100%    {opacity:1; } /* 100% */
    }

/* Assign each nth-of-type banner-item the next multiple of a+b:
     - IN REVERSE ORDER, e.g., highest nth-of-type (bottom of list below) starts off
	     slideshow with delay 0s, lowest nth-of-type (top of list) delays by t-n. */
.banner8-item:nth-of-type(1) {
    -webkit-animation-delay: 70s;
    animation-delay: 70s;
    }

.banner8-item:nth-of-type(2) {
    -webkit-animation-delay: 60s;
    animation-delay: 60s;
    }
            
.banner8-item:nth-of-type(3) {
    -webkit-animation-delay: 50s;
    animation-delay: 50s;
    }
            
.banner8-item:nth-of-type(4) {
    -webkit-animation-delay: 40s;
    animation-delay: 40s;
    }

.banner8-item:nth-of-type(5) {
    -webkit-animation-delay: 30s;
    animation-delay: 30s;
    }

.banner8-item:nth-of-type(6) {
    -webkit-animation-delay: 20s;
    animation-delay: 20s;
    }

.banner8-item:nth-of-type(7) {
    -webkit-animation-delay: 10s;
    animation-delay: 10s;
    }

.banner8-item:nth-of-type(8) {
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    }

/* --------------------------------------------
   4-img slideshow settings
   -------------------------------------------- */

.banner4-item {
	/* Set up initial animation parameters:
	     ! Remember to change BOTH animation-duration values to match (t) ! */
    -webkit-animation-name: banner4FadeInOut;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 40s;

    animation-name: banner4FadeInOut;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 40s;
    }
                      
@-webkit-keyframes banner4FadeInOut {
    0%      {opacity:1; } /* 0% */
    19%    {opacity:1; } /* a/t*100% [Ex: (4.76s/28s*100% = 17%) / (7.6s/80s*100% = 9.5%)] */
    25%   {opacity:0; } /* (a+b)/t*100% = 1/n*100% [Ex: ((4.76s+2.24s)/28s*100% = 7s/28s*100% = 25%) / (10s/80s*100% = 12.5%)] */
    94%     {opacity:0; } /* 100%-(b/t*100%) [Ex. (100%-(2.24s/28s*100%) = 92%) / (100%-(2.4s/80s*100%) = 97%)] */
    100%    {opacity:1; } /* 100% */
    }

@keyframes banner4FadeInOut {
    0%      {opacity:1; } /* 0% */
    19%    {opacity:1; } /* a/t*100% [Ex: (4.76s/28s*100% = 17%) / (7.6s/80s*100% = 9.5%)] */
    25%   {opacity:0; } /* (a+b)/t*100% = 1/n*100% [Ex: ((4.76s+2.24s)/28s*100% = 7s/28s*100% = 25%) / (10s/80s*100% = 12.5%)] */
    94%     {opacity:0; } /* 100%-(b/t*100%) [Ex. (100%-(2.24s/28s*100%) = 92%) / (100%-(2.4s/80s*100%) = 97%)] */
    100%    {opacity:1; } /* 100% */
    }

/* Assign each nth-of-type banner-item the next multiple of a+b:
     - IN REVERSE ORDER, e.g., highest nth-of-type (bottom of list below) starts off
	     slideshow with delay 0s, lowest nth-of-type (top of list) delays by t-n. */
.banner4-item:nth-of-type(1) {
    -webkit-animation-delay: 30s;
    animation-delay: 30s;
    }

.banner4-item:nth-of-type(2) {
    -webkit-animation-delay: 20s;
    animation-delay: 20s;
    }
            
.banner4-item:nth-of-type(3) {
    -webkit-animation-delay: 10s;
    animation-delay: 10s;
    }
            
.banner4-item:nth-of-type(4) {
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    }