/* 
Custom styling rules for Spurgate websites
CSS written to loosely fit the SMACSS specification and utilize BEM naming principles
Spurgate Ltd 2016-2018
*/

/*------------------ BASE ------------------*/
/*default rules for the page*/

	/*--------- typography ---------*/
	

	
/*------------------ LAYOUT ------------------*/	
/*sections that hold one or more modules together*/

	/*--------- navigation ---------*/
		
	
/*------------------ MODULES ------------------*/	
/*reusable parts of design, that sit inside layout components and other modules*/

	/*--------- decoration ---------*/
	
	.custom-hero {		
		position: absolute;
		min-height: 10px;	
		height: 250px;
		z-index: 0;
		/*border-bottom: 10px double #fff;*/
		background-size: cover;
		background-position: center;
	}	
	
	.custom-hero--background {
		position: absolute;		
		background: none;
	}
	
	/*--------- backgrounds ---------*/	

	/*--------- themes ---------*/

/*MEDIA QUERY < 560px --- deviates from components breakpoint in order to satisfy menu sizing requirements across mobile and tablet devises --- (max-widths for breakpoints are in REM so that everything is dynamic and relative to the root HTML tag)*/
@media (max-width: 34.999999em) { 

/*------------------ BASE ------------------*/
/*default rules for the page*/
	
	
/*------------------ LAYOUT ------------------*/	
/*sections that hold one or more modules together*/

	/*--------- navigation ---------*/
	
	
/*------------------ MODULES ------------------*/	
/*reusable parts of design, that sit inside layout components and other modules*/

	/*--------- decoration ---------*/
	
	.custom-hero {		
		height: 200px;
	}
	
	/*--------- backgrounds ---------*/	
	
	/*--------- themes ---------*/

	/*--------- display control ---------*/	
}


/*MEDIA QUERY > 768px - (max-widths for breakpoints are in REM so that everything is dynamic and relative to the root HTML tag)*/
@media (min-width: 48em) { 

/*------------------ BASE ------------------*/
/*default rules for the page*/

	/*--------- typography ---------*/
		
/*------------------ LAYOUT ------------------*/	
/*sections that hold one or more modules together*/

	/*--------- navigation ---------*/

/*------------------ MODULES ------------------*/	
/*reusable parts of design, that sit inside layout components and other modules*/

	/*--------- decoration ---------*/
	
}


/*MEDIA QUERY > 992px - (max-widths for breakpoints are in REM so that everything is dynamic and relative to the root HTML tag)*/
@media (min-width: 62em) {

/*------------------ BASE ------------------*/
/*default rules for the page*/

	/*--------- typography ---------*/
	
/*------------------ LAYOUT ------------------*/	
/*sections that hold one or more modules together*/

	/*--------- navigation ---------*/
	
/*------------------ MODULES ------------------*/	
/*reusable parts of design, that sit inside layout components and other modules*/

	/*--------- decoration ---------*/

	/*--------- backgrounds ---------*/	
	
	/*--------- themes ---------*/

	/*--------- display control ---------*/	

}


/*MEDIA QUERY > 1200px - (max-widths for breakpoints are in REM so that everything is dynamic and relative to the root HTML tag)*/
@media (min-width: 75em) { 

/*------------------ BASE ------------------*/
/*default rules for the page*/

	/*--------- typography ---------*/

/*------------------ LAYOUT ------------------*/	
/*sections that hold one or more modules together*/

	/*--------- navigation ---------*/
	
/*------------------ MODULES ------------------*/	
/*reusable parts of design, that sit inside layout components and other modules*/

	/*--------- decoration ---------*/
	.custom-hero {		
		height: 400px;
	}	
	/*--------- backgrounds ---------*/	
	
	/*--------- themes ---------*/

	/*--------- display control ---------*/	
	

}
	
.custom-hero--background,
.custom-hero--background:after { 
	position: absolute;
    width: 100%;
	height: 500px;
    top: 0px;
    left: 0px;
    z-index: -1; 
	overflow: hidden;      /* hide the overflow */	
}

.custom-hero--background li {
	display: unset;
}

.custom-hero--background li span { 
    width: 100%;
    height: 500px;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 60%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
    animation: imageAnimation 42s linear infinite 0s; 	
	-webkit-mask-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))	
}

.custom-hero--background li div { 
    z-index: 1000;
    position: absolute;
    bottom: 30px;
    left: 0px;
    width: 100%;
    text-align: center;
    opacity: 0;
    color: #fff;
    animation: titleAnimation 42s linear infinite 0s; 
}

.custom-hero--background li:nth-child(1) span { 
    background-image: url('../images/hero/bg01.jpg'); 
}
.custom-hero--background li:nth-child(2) span { 
     background-image: url('../images/hero/bg02.jpg'); 
    animation-delay: 6s; 
}
.custom-hero--background li:nth-child(3) span { 
     background-image: url('../images/hero/bg03.jpg'); 
    animation-delay: 12s; 
}
.custom-hero--background li:nth-child(4) span { 
     background-image: url('../images/hero/bg04.jpg'); 
    animation-delay: 18s; 
}
.custom-hero--background li:nth-child(5) span { 
     background-image: url('../images/hero/bg05.jpg'); 
    animation-delay: 24s; 
}
.custom-hero--background li:nth-child(6) span { 
     background-image: url('../images/hero/bg06.jpg'); 
    animation-delay: 30s; 
}
.custom-hero--background li:nth-child(7) span { 
     background-image: url('../images/hero/bg07.jpg'); 
    animation-delay: 36s; 
}

.custom-hero--background li:nth-child(2) div { 
    animation-delay: 6s; 
}
.custom-hero--background li:nth-child(3) div { 
    animation-delay: 12s; 
}
.custom-hero--background li:nth-child(4) div { 
    animation-delay: 18s; 
}
.custom-hero--background li:nth-child(5) div { 
    animation-delay: 24s; 
}
.custom-hero--background li:nth-child(6) div { 
    animation-delay: 30s; 
}
.custom-hero--background li:nth-child(7) div { 
    animation-delay: 36s; 
}

@keyframes imageAnimation { 
    0% { opacity: 0; animation-timing-function: ease-in; }
    8% { opacity: 1; /*transform: scale(1.05);*/ animation-timing-function: ease-out; }
    17% { opacity: 1;
	    /*transform: scale(1.1);*/ }
    25% { opacity: 0;
	    /*transform: scale(1.1);*/ }
    100% { opacity: 0 }
}

@keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}

/*For browsers that don’t support animations, we’ll simply show the last slideshow image by setting the opacity of the span to 1:*/

.no-cssanimations .custom-hero--background li span{
	opacity: 1;
}