body{
	margin: 0;
}
#border{
	position: absolute;
	width: 	728px;
	height: 90px;
	box-shadow:0px 0px 0px 1px black inset;
	z-index: 300;
	pointer-events: none;
}


#dogImage{
	position: absolute;
	width: 	519px;
	height: 90px;
	left: 0px;
}
#gradient{
	position: absolute;
	width: 	519px;
	height: 90px;
	opacity: 0;
}
#testText{
	position: absolute;
	width: 	519px;
	height: 90px;
	top: -90px;
}
#legalText{
	position: absolute;
	width: 	300px;
	height: 16px;
	top: 196px;
}
#footer{
	position: absolute;
	width: 	209px;
	height: 90px;
	top: 0px;
	left: 519px;
}
#cta{
	position: absolute;
	width: 	101px;
	height: 30px;
	top: 51px;
	left: 574px;
}


#bg2{
	position: absolute;
	width: 	519px;
	height: 90px;
	top: 0px;
	opacity: 0;
}
#bag{
	position: absolute;
	width: 	353px;
	height: 90px;
	top: 0px;
	opacity: 0;
}
.check{
	position: absolute;
	width: 	519px;
	height: 90px;
	top: 0px;
	opacity: 0;
}
.checkText{
	position: absolute;
	width: 	519px;
	height: 90px;
	top: 0px;
	opacity: 0;
}
#finalText{
	position: absolute;
	width: 	245px;
	height: 90px;
	top: 0px;
	opacity: 0;
	-webkit-clip-path: ellipse(10px 10px at 133px 45px);
    animation-name: example;
    animation-duration: 3s;
    animation-direction: forwards;
    animation-fill-mode: forwards;  
    animation-delay: 7s;
}

@keyframes example {
    from {
    	-webkit-clip-path: ellipse(1px 1px at 133px 45px);
    }
    to {
    	-webkit-clip-path: ellipse(400px 400px at 133px 45px);
    }
}