/* Banner */

	#banner {
		/*background-color: #666666;
		background-image: url("../images/banner.jpg");
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;
		*/
		color: #fff;
		padding: 4em 0;
		text-align: center;
		position: relative;
	}

		#banner:before {
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background: rgba(64, 72, 80, 0.25);
		}

		#banner .inner {
			position: relative;
			z-index: 1;
		}

			#banner .inner :last-child {
				margin-bottom: 0;
			}

		#banner h2, #banner h3, #banner h4, #banner h5, #banner h6 {
			color: #ffffff;
		}

		#banner .button.alt {
			box-shadow: inset 0 0 0 1px rgba(144, 144, 144, 0.75);
			color: #ffffff !important;
		}

			#banner .button.alt:hover {
				background-color: rgba(144, 144, 144, 0.275);
			}

			#banner .button.alt:active {
				background-color: rgba(144, 144, 144, 0.4);
			}

			#banner .button.alt.icon:before {
				color: #c1c1c1;
			}

		#banner .button {
			min-width: 12em;
		}

		#banner h2 {
			font-size: 3.5em;
			line-height: 1em;
			margin: 0 0 0.5em 0;
			padding: 0;
		}

		#banner p {
			font-size: 1.5em;
			margin-bottom: 2em;
		}

			#banner p a {
				color: #ffffff;
				text-decoration: none;
			}


/*--------------------------------------------*/

ul.cb-slideshow {
		list-style: none; 
		top-margin: 100px;
		background-color: #fff;
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;	
	}

.cb-slideshow,
.cb-slideshow::after { 
    position: fixed;
    width: 100%;
    height: 500px;
    top: 75px;
    left: 0px;
    z-index: 0; 
}
.cb-slideshow::after { 
    content: '';
    background: transparent url(../images/overlay.png) repeat top left;  
}

.cb-slideshow li span { 
	margin: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
	background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
    animation: imageAnimation 30s linear infinite 0s; 
}

/*-----------------------------------------*/
.cb-slideshow li:nth-child(1) span { 
    background-image: url(images/residential-garage-door-chardon.jpg); 
    background-repeat: no-repeat;
}

.cb-slideshow li:nth-child(2) span { 
    background-image: url(images/new-garage-door-construction.jpg); 
    background-repeat: no-repeat;
    animation-delay: 6s; 
}

.cb-slideshow li:nth-child(3) span {
	background-image: url(images/commercial-bay-garage-doors.jpg); 
    background-repeat: no-repeat;
    animation-delay: 12s; 
}

.cb-slideshow li:nth-child(4) span {
    background-image: url(images/triple-stone-garage.jpg); 
    background-repeat: no-repeat;
    animation-delay: 18s; 
}

.cb-slideshow li:nth-child(5) span {
    background-image: url(images/residential-garage-door-chagrin-falls.jpg); 
    background-repeat: no-repeat;
    animation-delay: 24s; 
}


.cb-slideshow li:nth-child(2) div { 
    animation-delay: 6s; 
}
.cb-slideshow li:nth-child(3) div { 
    animation-delay: 12s; 
}
.cb-slideshow li:nth-child(4) div { 
    animation-delay: 18s; 
}
.cb-slideshow li:nth-child(5) div { 
    animation-delay: 24s; 
}


/* Animation for the slideshow images */
@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);
    }
    50% {
        opacity: 0;
        transform: scale(1.1);
    }
    100% { opacity: 0 }
}
}

/* Show at least something when animations not supported */
.no-cssanimations .cb-slideshow li span{
    opacity: 1;
}

#page {
	background-color: #fff;
	z-index: 2000;
	position: relative;
	}