body {
	height: 93vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 0;
}
#adContainer {
	height:250px;
	width:300px;
	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;
}
#logo {
	height:600px;
	width:300px;
	background: url(logo.png);
	position:relative;
    overflow: hidden;
    z-index: 8500;
}

#start-blue {
    width: 300px;
    height: 250px;
    top: 0px;
    left: 0px;
    background: url(blue-bg.png);
    opacity: 1;
    animation: first-frame 1s 1 ease-in-out;
	animation-delay: 2s;
	animation-fill-mode: forwards;
    z-index: 5000;
    position: absolute;
    
}

#white-start {
    background: url(white-start.png);
    width: 300px;
    height: 250px;
    opacity: 0;
    animation: white-start 1.75s ease-in-out;
    animation-delay: .5s;
    animation-fill-mode: forwards;
    position: absolute;
    z-index: 7500;
     
}

#end-text {
    background: url(end-text.png);
    width: 300px;
    height: 250px;
    opacity: 0;
    animation: text-end 7.5s ease-in-out;
    animation-delay: 2s;
    animation-fill-mode: forwards;
    position: absolute;
    z-index: 4500;
    
}

#card-up {
    background: url(card.png);
    width: 300px;
    height: 250px;
    opacity: 0;
    animation: card-up 7.5s ease-in-out;
    animation-delay: 2s;
    animation-fill-mode: forwards;
    position: absolute;
    z-index: 4500;
    
}

#end-gray {
    background: url(end-gray.png);
    width: 300px;
    height: 250px;
    opacity: 0;
    animation: grey 3.5s 1 ease-in-out;
	animation-delay: 4s;
	animation-fill-mode: forwards;
    z-index: 4500;
    position: absolute;

}

#end-cta {
    background: url(cta.png);
    width: 300px;
    height: 250px;
    opacity: 0;
    animation: appear .75s 1 ease-in-out;
	animation-delay: 7.5s;
	animation-fill-mode: forwards;
    z-index: 4500;
    position: absolute;
    top: 0px;
    left: 0px;
}
#border {
    z-index: 9000;
    width: 298px;
    height: 248px;
    position: absolute;
    top: 0px;
    left: 0px;
}
/* Animations */


@keyframes first-frame {
	0%   	{width: 300px; height: 250px; opacity: 1;}
    100% 	{width: 300px; height: 250px; opacity: 1; top: 250px;}
	
}

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

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

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

@keyframes text-end {
	0%		{bottom:-15px; opacity: 0}
    10%		{bottom:48px; opacity: 1}
    20%     {bottom:48px; opacity: 1}
    30%		{bottom:48px; opacity: 1}
    70%		{bottom:48px; opacity: 1}
    80% 	{bottom:10px; opacity: 1}
    100% 	{bottom:10px; opacity: 1}
	
}

@keyframes card-up {
    0% 		{opacity: 0; top: 15px;}
    10% 	{transform: scale(.6); opacity: 1; top: -45px;}
    20% 	{transform: scale(.6); opacity: 1; top: -45px;}
    30% 	{transform: scale(.6); opacity: 1; top: -45px;}
    70% 	{transform: scale(.6); opacity: 1; top: -45px;}
    80% 	{transform: scale(1.0); opacity: 1; top: 0px;}
    100% 	{transform: scale(1.0); opacity: 1; top: 0px;}
	
}

@keyframes grey {
	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;}
	
}

@keyframes card {
	0%		{bottom:0px; opacity: 0}
    100%	{bottom:0px; opacity: 1}
	
}