/* ==========================================================================
    BANNER STYLES - 970PX X 250 px
   ========================================================================== */
/* All styles for the banner should go in here */

/* General Styles and Resets */
*, :before, :after {
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}
body {
	color: #000000;
	font-family:Arial, sans-serif;
	font-size:100%;
	/* Optimal Line Height - Ref - https://www.smashingmagazine.com/2009/08/typographic-design-survey-best-practices-from-the-best-blogs/ */
	line-height:1.48;
	border: 0;
	margin: 0;
	position:relative;
}
a,img {
	border: 0;
	outline: none;
}

/* Loader GIF Styles */
#loading_dc{
	position:absolute;
}
#loading_image_dc{
	position:relative;
	width:970px;
	height:250px;
}
#loading_image_dc img{
	position:absolute;
	top:50%;
	left:50%;
}

/* Stage Styles */
.display-ad-size, #wrapper, #wrapper #stage, #animation {
	display: block;
	margin: 0;
	padding: 0;
	width: 970px;
	height: 250px;
	overflow: hidden; 
	background: #000;
	/*cursor: pointer;*/
	-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
}
#wrapper {
	position: absolute;
}
#stage {
	/* 1px border needed for many ad platforms */
	border: 1px solid #000;
	position: absolute;
}
#endFrameBg { 
	position: absolute;
	z-index: 0;
}

/* Display Classes */
.display-abs-pos {
	position: absolute;
	display: block;
	opacity: 1; 
	filter: alpha(opacity=1);
}
.hide-abs-pos {
	position: absolute;
	display: block;
	opacity: 0;
	filter: alpha(opacity=0);
}

/* Exit Classes */
#bg-exit { 
	background-color: rgba(255, 255, 255, 0);
	height: 100%;
	left: 0px;
	position: absolute; 
	top: 0px;
	width: 100%;
	z-index: 2;
	cursor: pointer;
}
#cta{
	position: absolute;
	height: 27px;
	overflow: hidden;
	z-index: 2;
	left: 462px;
	bottom: 26px;
	cursor: pointer;
}
#cta:hover img {
	margin-top: -27px;
}

/* Animation Frame Classes */
#animation, #frame1, #frame2, #frame3, #frame4 {
	position: absolute;
	z-index: 0;
	width:970px;
	height:250px;
}
#frame1 {
	z-index: 3;
}
#frame2 {
	width: 527px;
	height: 248px;
	top: 0;
	right: 2px;
	z-index:1;
	background:#000;
	cursor: pointer;
	overflow: hidden;
}

/* Animation Element Classes */
/* Place styles for individual banner elements here */
#frame1Logo {
	position: absolute;
	bottom:0px;
	left:0px;
	width: 135px;
	height: 40px;	
}
#frame1Date {
	position:absolute;
	bottom:0px;
	right:0px;
	width: 243px;
	height: 41px;
}
#skipButton {
	position:absolute;
	top:0px;
	left:0px;
	color:#fff;
	font-size:24px;
	font-weight:bold;
	z-index:99;
	width:102px;
	height:34px;
	background:url('skip-btn.png') no-repeat top left;
	cursor:pointer;
}
#textPedigree {
	position: absolute;
	top: 4px;
	left: 20px;
}
#textJonah {
	position: absolute;
	top: 25px;
	left: 20px;
}
#textMiles {
	position: absolute;
	top: 25px;
	left: 139px;
}
#frame2Logo1 {
	position: absolute;
	top: 45px;
	left: 20px;
}
#frame2Logo2 {
	position: absolute;
	top: 45px;
	left: 131px;
}
#tagline {
	position: absolute;
	top: 112px;
	left: 20px;
}
#frame2Date {
	position:absolute;
	height: 27px;
	bottom:60px;
	left:20px;
}
#imageJonah {
	position: absolute;
	top: 0px;
	right: 0px;
}
#imageMiles {
	position: absolute;
	top: 0px;
	right: 0px;
}


/* Video holder classes */
#videoHolder {
	position: absolute;
	z-index: 0;
	top: 1px;
	left: 1px;
	width: 443px;
	height: 248px;
	background: #000;
}
#videoClip{
	position: absolute;
	z-index: 0;
}
#videoStill{
	position: absolute;
	z-index: 0;
	display:block;
}
#videoStill img{
	display:block;
}
#frame1VideoHolder{
	display:none;
}
#videoClip{
	display:none;
}
video{
	cursor:initial;
}
#replay {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	cursor: pointer;
}

/* IE Specific Styling */
.lt-ie8 #wrapper #stage { 
/* IE7 specific styling */ 
}
.lt-ie9 #wrapper #stage { 
/* IE8 specific styling */ 
}