html, body {  
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	box-sizing: border-box;
}
div {
	background-repeat: no-repeat;
	position: absolute;
	width: 100%;
	height: 100%;
}
*, *:before, *:after {
	box-sizing: inherit;
	margin: 0;
	padding: 0;
}
#ad {
	display: block;
	height: 250px;/*100%;*/
	left: 0px;
	overflow: hidden;
	position: absolute;
	top: 0px;
	width: 300px;/*100%;*/
}
#ad:after {
	content: '';
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	border: black 1px solid;
	pointer-events: none;
}
a {
	cursor: pointer;
}

#logo {
	opacity: 0;
	height: 25px;
	right: 11px;
	position: absolute;
	top: 10px;
	width: 120px;
	z-index: 90;
}

#logo.in {
	opacity: 1;
}

#prog-logo{
	fill:#2d95e5;
}

#logo.color1 #prog-logo{
	fill:#ffffff;
}

#direct-tag {
	display: visible;  /*Note: Change display to 'visible' to enable "DIRECT" tagline*/
}

#commercial-tag {
	display: none;  /*Note: Change display to 'visible' to enable "COMMERCIAL" tagline*/
}

/* --  common animations  --------------------------------------------------------  */
/* global animation timing */
[class*="fade"], [class*="zoom"], [class*="slide"]{
	transition: all .5s ease-out;
}
.fadein:not(.out),
body .fadeout.out {
	opacity: 0;
}
.fadein.in,
.fadeout {
	opacity: 1;
}
.zoomin:not(.out),
body .zoomout.out {
	transform: scale(.00000000001);  /*animation bug - doesn't run if "0"*/
}
.zoomin.in,
.zoomout {
	transform: scale(1);
}
.slidein:not(.out),
body .slideout.out {
	transform: translateX(-100%);
}
.slidein.in,
.slideout {
	transform: translateX(0);
}

/* --  utilities  --------------------------------------------------------  */

.center {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-line-pack: space-evenly;
	    align-content: space-evenly;
	    -ms-flex-align: center;
	        align-items: center;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	    -ms-flex-pack: space-evenly;
	        justify-content: space-evenly;
}
.center > * {
	position: static;
	margin: auto;
}

/* --  content start  --------------------------------------------------------  */


#color {
	opacity: 1;
	position: absolute;
	top: 0;
	background-color: #ff7e00;
	width: 300px;
	height: 250px;
}

#start {
	opacity: 1;
}

#start.out {
	opacity: 0;
}

#your {
	opacity: 0;

}

#your.in {
	opacity: 1;
}

#your.out {
	opacity: 0;
}

#savings {
	opacity: 0;
}

#savings.in {
	opacity: 1;
}

#savings.out {
	opacity: 0;
}

#color.white {
	opacity: 1;
	background-color: #ffffff;
}

#color.blue {
	opacity: 1;
	background-color: #2d95e5;
}

#color.out {
	opacity: 1;
	background-color: #ffffff;
}

#bg1 {
	opacity: 0;
	position: absolute;
	top: 0;
}

#bg1.in {
	opacity: 1;
	position: absolute;
	top: 0;
	transition: all .5s ease-in;
}

#bg1.out {
	opacity: 0;
}

#car1 {
	position: absolute;
	top: 0;
	transform: translate(190px,50px) scale(.1) rotate(10deg);
}

#car1.move {
	transform: translate(-280px,100px) scale(1) rotate(0deg);
	transition: all .8s ease-in;
}

#bg2 {
	opacity: 0;
	position: absolute;
	top: 0;
}

#bg2.in {
	opacity: 1;
	transition: all .5s ease-in;
}

#bg2.out {
	opacity: 0;
}

#car2 {
	opacity: 1;
	position: absolute;
	top: 0;
	transform: translate(-110px,-5px) scale(.001) rotate(0deg);
}

#car2.move {
	transform: translate(290px,70px) scale(1) rotate(0deg);
	transition: all .9s ease-in;
}

#bg3 {
	opacity: 0;
	position: absolute;
	top: 0;
}

#bg3.in {
	opacity: 1;
	transition: all .5s ease-in;
}

#flo {
	position: absolute;
	top: 0;
}

#head {
	position: absolute;
	top: 45px;
	left: 84px;
	transform: translate(220px);
}

#head.in {
	transform: translate(0);
	transition: all .5s ease-in-out;
}

#headline {
	position: absolute;
	top: 0;
}

#cre {
	position: absolute;
	top: 86px;
	right: 15px;
	transform: translate(220px);
}

#cre.in {
	transform: translate(0);
	transition: all .5s ease-in-out;
}



/* --  content ends  ---------------------------------------------------------  */

/* --  CTA  ------------------------------------------------------------------  */ 

#cta {
	bottom: 15px;
	height: 36px;
	right: 15px;
	width: 134px;
	z-index: 110;
}
#cta-button, #cta-button > * {
	transition: all .3s ease-in-out;
}
/* .cta-button-bg			{fill:#2d95e5;} Blue button fill */
.cta-button-bg			{fill:#ff8a39;}
.cta-button-textgroup	{fill:#ffffff;}

/* hover effects for button */
#cta-button:hover {
	 transform: scale(1.05); 
}
/* #cta-button:hover .cta-button-bg 		{fill: #0a3360;} Blue button hover */
#cta-button:hover .cta-button-bg 		{fill: #d3732e;}
#cta-button:hover .cta-button-textgroup	{fill: #ffffff;}

/* if you need to define click area */
#bgExitArea { 
	cursor: pointer; 
	left: 0;
	opacity: 0;
	position: absolute; 
	z-index: 100;
	/*opacity: .5;*/		/* for testing */
	/*background: red;*/	/* for testing */
}