body {
	height: 93vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 0;
}
#adContainer {
	height:600px;
	width:160px;
	background: url(background.jpg);
	position:relative;
    overflow: hidden;
}
#adContainer a span { 
  position:absolute; 
  width:100%;
  height:100%;
  top:0;
  left: 0;
cursor: pointer;
  /* edit: added z-index */
  z-index: 5000;
}
#first-frame {
	background:url(large-card-min.png);
    background-size: cover;
    background-position: center top;
	width:946px;
	height:610px;
	animation: first-frame .75s 1 ease-in-out;
	animation-delay: 2.5s;
	animation-fill-mode: forwards;
	opacity: 1;
    top: -3px;
    left: -420px;
    position: absolute;
    z-index: 4600;
}

#start-text {
    width: 160px;
    height: 600px;
    top: 0px;
    left: 0px;
    background: url(start-text.png);
    opacity: 1;
    animation: disappear .5s 1 ease-in-out;
	animation-delay: 2.5s;
	animation-fill-mode: forwards;
    z-index: 5000;
    position: absolute;
    
}

#start-blue {
    background: url(blue-text.png);
    width: 160px;
    height: 600px;
    opacity: 0;
    top: 0px;
    left: 0px;
    animation: text 1.9s ease-in-out;
    animation-delay: 1s;
    animation-fill-mode: forwards;
    position: absolute;
    z-index: 5000;
}

#end-text {
    background: url(end-text.png);
    width: 160px;
    height: 600px;
    opacity: 0;
    animation: fade-up .75s ease-in-out;
    animation-delay: 3.25s;
    animation-fill-mode: forwards;
    position: absolute;
    z-index: 4500;
    
}
#end-gray {
    background: url(end-gray.png);
    width: 160px;
    height: 600px;
    opacity: 0;
    animation: text-end 4s 1 ease-in-out;
	animation-delay: 5s;
	animation-fill-mode: forwards;
    z-index: 4500;
    position: absolute;
}

#end-cta {
    background: url(cta-tag.png);
    width: 160px;
    height: 600px;
    opacity: 0;
    animation: appear .75s 1 ease-in-out;
	animation-delay: 9s;
	animation-fill-mode: forwards;
    z-index: 4500;
    position: absolute;
    top: 0px;
    left: 0px;
}
/* Animations */


@keyframes first-frame {
	0%   	{width: 946px; height: 610px; opacity: 1; top: -3px; left: -420px;}
    100% 	{width: 118px; height: 72px; opacity: 1; top: 48px; left: 21px;}
}

@keyframes disappear {
	0%   	{opacity: 1}
    100% 	{opacity: 0}
}

@keyframes appear {
	0%   	{opacity: 0}
    100% 	{opacity: 1}
}

@keyframes text {
	0%		{opacity: 0}
    10%		{opacity: 1}
    90%		{opacity: 1}
    100%	{opacity: 0}
}

@keyframes text-end {
	0%		{bottom:-15px; opacity: 0}
    10%		{bottom:0px; opacity: 1}
    90%		{bottom:0px; opacity: 1}
    100% 	{bottom:0px; opacity: 0}
}

@keyframes fade-up {
	0% 		{bottom:-15px; opacity: 0;}
	100%	{bottom:0px; opacity: 1;}
}