/* ==========================================================================
    BANNER STYLES - 300PX X 600
   ========================================================================== */


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

a,
img {
    border: 0;
    outline: none;
}

img {
    display: block;
}


/* Loader GIF Styles */

#loading_dc {
    position: absolute;
}

#loading_image_dc {
    position: relative;
    width: 300px;
    height: 600px;
}

#loading_image_dc img {
    position: absolute;
    top: 50%;
    left: 50%;
}


/* Stage Styles */

.display-ad-size,
#wrapper,
#wrapper #stage {
    display: block;
    margin: 0;
    padding: 0;
    width: 300px;
    height: 600px;
    overflow: hidden;
    background: #ffffff;
    cursor: pointer;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

#wrapper {
    position: absolute;
}

#stage {
    /* 1px border needed for many ad platforms */
    width: 298px;
    height: 598px;
    border: 1px solid #8c8c8c;
    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);
    cursor: pointer;
    height: 100%;
    left: 0px;
    position: absolute;
    top: 0px;
    width: 100%;
    z-index: 100;
}

#cta {
    position: absolute;
    bottom: 25px;
    left: 50%;
    z-index: 1;
    background: url("cta.png") no-repeat top left;
    width: 96px;
    height: 35px;
    background-size: 100% auto;

    transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
}

#cta:hover {
    opacity: 0.8;
}

#release,
#release2 {
    position: absolute;
    top: 471px;
    left: 50%;
    transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    z-index: 1;
}

#release2 {
    top: 486px;
}

#availableAt {
	position: absolute;
	bottom: 64px;
	left: 50%;
    transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
}

#legal {
	position: absolute;
	bottom: 15px;
	right: 5px;
    opacity: 0.5;
}

.lighten {
    position: absolute;
    width: 298px;
    height: 598px;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.1);
}

#darken {
    position: absolute;
    top: 90px;
    left: 0;
}

.amazonLegal {
    position: absolute;
    margin: 0;
    padding: 0;
    left: 5px;
    bottom: 5px;
    font-size: 6px;
    line-height: initial;
    color: #ffffff;
    opacity: 0.5;
}

.amazonLegal:first-of-type {
    bottom: 10px;
}


/* Animation Frame Classes */

#animation,
#frame1,
#frame2,
#frame3,
#frame4 {
    position: absolute;
    z-index: 0;
}


/* Animation Element Classes */


/* Place styles for individual banner elements here */


/*#exampleElement {
	position:absolute;
	top:0;
	left:0;
	display:none;
}*/

#frame2 {
    width: 298px;
    height: 598px;
    opacity: 0;
    background: #000;
    visibility: hidden;
}

#frame2Bg {
    position: absolute;
    top: 0;
    left: -30px;
}

#buildings {
    position: absolute;
    top: 8px;
    left: -12px;
}

#titleTreatment {
    position: absolute;
    top: 350px;
    left: 50%;
    transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    z-index: 1;
}


/* Video holder classes */

#videoHolder {
    position: absolute;
    z-index: 999;
    top: 0;
    left: 0;
    width: 298px;
    height: 163px;
    background: #000;
    border-top: 2px solid #440a08;
    border-bottom: 2px solid #440a08;
    visibility: hidden;
}

#videoClip {
    position: absolute;
    z-index: 999;
}

#videoStill {
    position: absolute;
    z-index: 1;
    left: 1px;
    top: 0;
    width: 298px;
    height: auto;
}

#videoStill img {
    height: 248px;
    width: 373px;
    display: block;
}


/* IE Specific Styling */

.lt-ie8 #wrapper #stage {
    /* IE7 specific styling */
}

.lt-ie9 #wrapper #stage {
    /* IE8 specific styling */
}