.banner { position: relative; overflow: hidden; height:100%; width:100%; background: rgba(0,0,0,0.85); }
.banner ul,
.banner ul:after { position: relative; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 0; }
.banner ul li { list-style: outside none none; }
.banner ul:after { content: ''; background: transparent url(../images/pattern.png) repeat top left; }
.banner img { position: fixed; z-index: 1000; top: 16px; left: 68px; }
.banner ul li {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
	-webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 18s linear infinite 0s;
    -moz-animation: imageAnimation 18s linear infinite 0s;
    -o-animation: imageAnimation 18s linear infinite 0s;
    -ms-animation: imageAnimation 18s linear infinite 0s;
    animation: imageAnimation 18s linear infinite 0s;
}
@-webkit-keyframes imageAnimation { 
	0% { opacity: 0; -webkit-animation-timing-function: ease-in; }
	10% { opacity: 1; -webkit-transform: scale(1.05); -webkit-animation-timing-function: ease-out; }
	30% { opacity: 1; -webkit-transform: scale(1.1); }
	40% { opacity: 0; -webkit-transform: scale(1.1) translateY(-20%); }
	40% { opacity: 0; -webkit-transform: scale(1.1) translateY(-100%); }
	100% { opacity: 0 }
}
@-moz-keyframes imageAnimation { 
	0% { opacity: 0; -moz-animation-timing-function: ease-in; }
	10% { opacity: 1; -moz-transform: scale(1.05); -moz-animation-timing-function: ease-out; }
	30% { opacity: 1; -moz-transform: scale(1.1); }
	40% { opacity: 0; -webkit-transform: scale(1.1) translateY(-20%); }
	40% { opacity: 0; -moz-transform: scale(1.1) translateY(-100%); }
	100% { opacity: 0 }
}
@-o-keyframes imageAnimation { 
	0% { opacity: 0; -o-animation-timing-function: ease-in; }
	10% { opacity: 1; -o-transform: scale(1.05); -o-animation-timing-function: ease-out; }
	30% { opacity: 1; -o-transform: scale(1.1); }
	400% { opacity: 0; -webkit-transform: scale(1.1) translateY(-20%); }
	40% { opacity: 0; -o-transform: scale(1.1) translateY(-100%); }
	100% { opacity: 0 }
}
@-ms-keyframes imageAnimation { 
	0% { opacity: 0; -ms-animation-timing-function: ease-in; }
	10% { opacity: 1; -ms-transform: scale(1.05); -ms-animation-timing-function: ease-out; }
	30% { opacity: 1; -ms-transform: scale(1.1); }
	40% { opacity: 0; -webkit-transform: scale(1.1) translateY(-20%); }
	40% { opacity: 0; -ms-transform: scale(1.1) translateY(-100%); }
	100% { opacity: 0 }
}
@keyframes imageAnimation { 
	0% { opacity: 0; animation-timing-function: ease-in; }
	10% { opacity: 1; transform: scale(1.05); animation-timing-function: ease-out; }
	30% { opacity: 1; transform: scale(1.1); }
	40% { opacity: 0; -webkit-transform: scale(1.1) translateY(-20%); }
	40% { opacity: 0; -transform: scale(1.1) translateY(-100%); }
	100% { opacity: 0 }
}
/* Show at least something when animations not supported */
.no-cssanimations .banner ul li div {opacity: 1; }

.down-arrow { position: absolute; bottom: 0; left: 50%;line-height:0;transform: translateX(-50%);}
.down-arrow a { display: inline-block; background: url(../images/down-arrow.png) center center no-repeat; width: 350px; height: 84px; }