@font-face {
	font-family: "96 Sans";
	font-display: swap;
	font-weight: 700;
	src: local('☺︎'), url("96Sans-Bold-subset.woff") format("woff");  /*This weight is required for the CTA button copy*/
}
html, body {  
	font-family: "96 Sans", Arial, Helvetica, sans-serif;
	font-size: 36px;
	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: 90px;/*100%;*/
	left: 0px;
	background-color: #dfedf3;
	overflow: hidden;
	position: absolute;
	top: 0px;
	width: 728px;/*100%;*/
}
#ad:after {
	content: '';
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	border: black 1px solid;
	pointer-events: none;
}
a {
	cursor: pointer;
}

#logo {
	height: 27px;
	right: 35px;
	position: absolute;
	top: 4px;
	width: 130px;
	z-index: 90;
}
#prog-logo{
	fill:#ffffff;
}

#direct-tag {
	display: none;  /*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-in-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  --------------------------------------------------------  */
#cereal-box {
	position: absolute;
	top: 130px;
	left: 550px;
	-webkit-transform: rotate(60deg);
	-ms-transform: rotate(60deg);
		transform: rotate(60deg);
}

#cereal-box.move {
	-webkit-transform: translate(-200px, -100px) rotate(-10deg);
	    -ms-transform: translate(-200px, -100px) rotate(-10deg);
	        transform: translate(-200px, -100px) rotate(-10deg);
			-webkit-transition: all .85s ease-out;
			-o-transition: all .85s ease-out;
			transition: all .85s ease-out;
}

#cereal {
	position: absolute;
	top: -180px;
	left: -40px;
	height: 250px;
	-webkit-transform: rotate(120deg);
	-ms-transform: rotate(120deg);
		transform: rotate(120deg);
}

#cereal.move {
	-webkit-transform: translate(-100px, 0px) rotate(20deg);
	    -ms-transform: translate(-100px, 0px) rotate(20deg);
	        transform: translate(-100px, 0px) rotate(20deg);
			-webkit-transition: all .85s ease-out;
			-o-transition: all .85s ease-out;
			transition: all .85s ease-out;
}

#car {
	position: absolute;
    top: -150px;
    height: 30%;
    left: -60px;
	-webkit-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
		transform: rotate(180deg);
}

#car.move {
	position: absolute;
	-webkit-transform: translate(-50px, 50px) rotate(150deg);
	    -ms-transform: translate(-50px, 50px) rotate(150deg);
	        transform: translate(-50px, 50px) rotate(150deg);
			-webkit-transition: all 1s ease-out;
			-o-transition: all 1s ease-out;
			transition: all 1s ease-out;
}

#box {
	position: absolute;
	bottom: 0;
	width: 232px;
}

.text {
	align-items: center;
	position: absolute;
}

#t1{
	top: 20%;
	font-weight: 700;
	font-size: 26px;
	left: 25px;
	position: relative;
	color: #2d2d2d;
	line-height: 19pt;
	text-align: left;
}

#t2{
	top: 20%;
	font-weight: 700;
	font-size: 26px;
	left: 25px;
	position: relative;
	color: #2d2d2d;
	line-height: 19pt;
	text-align: left;
}

#logo-bar{
	background: #0a3360;
	height: 90px;
	top: 0;
	right: 0;
	width: 200px;
}


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

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

#cta {
	bottom: 12px;
	height: 36px;
	width: 126px;
	right: 36px;
	z-index: 110;
	font-weight: 700;
}

.cta-button { 
	display: block; 
	text-align: center; 
	background:#0077b3; 
	/* background:#FF8A39;  Orange button fill */
	color: #fff;
	border-radius: 5px;
	padding: 9px;
	font-size: 14px;
	-webkit-transition: all .3s ease-in-out;
			transition: all .3s ease-in-out;
}

/* hover effects for button */
.cta-button:hover {
	-webkit-transform: scale(1.05);
	        transform: scale(1.05); 
	background: #2862a4;
	/* background: #C05711;  Orange button hover state*/
	color: #fff;
} 

/* 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 */
}