@keyframes ken-burns-effect {
	0% {
		transform: scale3d(.9, .9, .9) translate3d(-20px, -23px, 20px);
		animation-timing-function: ease-in;
}
	100% {
			transform: scale3d(1, 1, 1) translate3d(-39px, -17px, 20px);
			animation-timing-function: ease-in;
	}
}

body {
	background-color:#ffffff;
	margin:0px;
}

div {
	width: 300px;
	height: 250px;
	position: absolute;
	top: 0;
	left: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100%;
	overflow: hidden;
	box-sizing: border-box;
}

#banner-wrapper {
	border: 1px solid #b5b5b5;
}

#background {
	/* background img source moved to actual image tag within this container */
	z-index: 0;
	height: 280px;
	width: 341px;
}

#background img {
	-webkit-animation: ken-burns-effect 10s forwards;
	animation: ken-burns-effect 10s forwards;
}

#cta {
	background-image: url('../images/cta.png');
	position: relative;
	z-index: 3;
}

#cta-hover-state {
	background-image: url('../images/cta-hover.png');
	opacity: 0;
	transition: opacity .75s;
	z-index: 4;
}

#cta-hover-state:hover {
	opacity: 1;
}

#logo-boxes-shadows {
	background-image: url('../images/logo-boxes-shadows.png');
	z-index: 1;
}

#legal-disclaimer {
	background-image: url('../images/legal-disclaimer.png');
	z-index: 2;
	opacity: 1;
	-webkit-transition: opacity 1.1s;
	-moz-transition: opacity 1.1s;
	-o-transition: opacity 1.1s;
	transition: opacity 1.1s;
}

#legal-disclaimer.hide {
	opacity: 0;
}

#copy-startingframe {
	background-image: url('../images/copy-startingframe.png');
	z-index: 2;
	opacity: 1;
	-webkit-transition: opacity 1s;
	-moz-transition: opacity 1s;
	-o-transition: opacity 1s;
	transition: opacity 1s;
}

#copy-startingframe.hide {
	opacity: 0;
}

#copy-endingframe {
	background-image: url('../images/copy-endingframe.png');
	opacity: 1;
	z-index: 2;
	-webkit-transition: opacity 1s;
	-moz-transition: opacity 1s;
	-o-transition: opacity 1s;
	transition: opacity 1s;
}

#copy-endingframe.hide {
	opacity: 0;
}