/* CSS Document */
/*FFI specific code*/
.bg-rot-single2,
.bg-rot-single2:after { 
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0; 
}
.bg-rot-single2:after { 
    content: '';
    background: transparent url(../images/pattern.png) repeat top left; 
}
.bg-rot-single2 li span { 
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    z-index: 0;
    -webkit-backface-visibility: hidden;
    /*  Will this work in IE??? */
}


.bg-rot-single2 li span { 
    background-image: url(../images/bg/checkered-bg.webp); 
    opacity: 0.45;
}
/* 2026 - with the black gradient no image looked better. */
/* End FFI specific code */







/* Static Single Image */
/*<!-- Single Image swap include for <ul class="bg-rot-single"><li><span>Image 01</span></li> </ul>--> */
.bg-rot-single,
.bg-rot-single:after { 
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0; 
}
.bg-rot-single:after { 
    content: '';
    background: transparent url(../../images/pattern.png) repeat top left; 
}
.bg-rot-single li span { 
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    z-index: 0;
    -webkit-backface-visibility: hidden;
    /*  Will this work in IE??? */
}
.bg-rot-single li span { 
    background-image: url(../images/bg/1.jpg) 
}




/* Rotating BG */
.bg-rot,
.bg-rot:after { 
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0; 
}

/* Micro image to give photo's coolness.  */
.bg-rot:after { 
    content: '';
    background: transparent url(../images/pattern.png) repeat top left; 
}

/*  The image contaners li */
.bg-rot li span { 
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;/* Hide for single static slide*/
    z-index: 0;
	-webkit-backface-visibility: hidden;

	/* 2018-11-14 - Fix */
	-webkit-backface-visibility: hidden;/* Hide for single static slide*/
    -webkit-animation: imageAnimation 27s linear infinite 0s;/* Hide for single static slide*/
    -moz-animation: imageAnimation 27s linear infinite 0s;/* Hide for single static slide*/
    -o-animation: imageAnimation 27s linear infinite 0s;/* Hide for single static slide*/
    -ms-animation: imageAnimation 27s linear infinite 0s;/* Hide for single static slide*/
    animation: imageAnimation 27s linear infinite 0s; /* Hide for single static slide*/
	/* End Fix */
	
	/* Run time of the entire set - All image delays added together 
    -webkit-animation: imageAnimation 27s linear infinite 0s;*/
/* 	-moz-animation: imageAnimation 30s linear infinite 0s;
    -o-animation: imageAnimation 30s linear infinite 0s;
    -ms-animation: imageAnimation 30s linear infinite 0s;
    animation: imageAnimation 30s linear infinite 0s;*/
}

.bg-rot li:nth-child(1) span { 
    background-image: url(../images/bg/1.jpg) 
}
.bg-rot li:nth-child(2) span { 
    background-image: url(../images/bg/2.jpg);
    -webkit-animation-delay: 9s;
    -moz-animation-delay: 9s;
    -o-animation-delay: 9s;
    -ms-animation-delay: 9s;
    animation-delay: 9s; 
}
.bg-rot li:nth-child(3) span { 
    background-image: url(../images/bg/3.jpg);
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s; 
}

/*https://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/*/
/*We have 6 images, so we will need 36 seconds for a whole cycle to finish. Now, we need to “time” the opacity values accordingly. Knowing that our second image will start animating at 6 seconds, we need to know at what percentile of the animation this will require the first image to fade out. Dividing 6 by 36 gives us 0.166… which would be 16% for our keyframe step. Now, because we don’t want our image to just fade all the time, we’ll define an inbetween step, which we’ll set at half of what we calculated, i.e. 8%. That’s the point that we want to show the image completely and we only want to start fading it out at 17%, making it disappear completely at 25%.*/

/* Math - Divide (number of images) / (combined Delay)
eg.  6/36=0.166 or 16%  */

/* New - 3/30 = 0.1 = 10% - - 
Take 1/2 of that for first op percentage. 
Add 1% to that for when to be @ 100%*/


/* Cross Browser Animation for the slideshow images */
@-webkit-keyframes imageAnimation { 
    0% { opacity: 0;
    -webkit-animation-timing-function: ease-in; }
    10% { opacity: 1;
         -webkit-animation-timing-function: ease-out; }
    30% { opacity: 1 }
    40% { opacity: 0 }
    100% { opacity: 0 }
}
@-moz-keyframes imageAnimation { 
    0% { opacity: 0;
    -moz-animation-timing-function: ease-in; }
    10% { opacity: 1;
         -moz-animation-timing-function: ease-out; }
    30% { opacity: 1 }
    40% { opacity: 0 }
    100% { opacity: 0 }
}
@-o-keyframes imageAnimation { 
    0% { opacity: 0;
    -o-animation-timing-function: ease-in; }
    10% { opacity: 1;
         -o-animation-timing-function: ease-out; }
    30% { opacity: 1 }
    40% { opacity: 0 }
    100% { opacity: 0 }
}
@-ms-keyframes imageAnimation { 
    0% { opacity: 0;
    -ms-animation-timing-function: ease-in; }
    10% { opacity: 1;
         -ms-animation-timing-function: ease-out; }
    30% { opacity: 1 }
    40% { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes imageAnimation { 
    0% { opacity: 0;
    animation-timing-function: ease-in; }
    10% { opacity: 1;
         animation-timing-function: ease-out; }
    30% { opacity: 1 }
    40% { opacity: 0 }
    100% { opacity: 0 }
}


/* Show at least something when animations not supported */
.no-cssanimations .bg-rot li span{
	opacity: 1;
}
	
/* Set the same as hOver */
@media only screen and (max-width: 1024px) {
	.bg-rot {
			display:none;
}
	}