* {
    box-sizing: border-box;
}

html, body {
    font-family: Arial,Helvetica,sans-serif;
    height: 100%;
    padding: 0;
    margin: 0;
}


.bg_color {
    background-color: #FFF;
}

/* MAIN BANNER CONTAINER */

#banner-wrapper {
    box-sizing: content-box;
    overflow: hidden;
    position: relative;
    width: 300px;
    height: 250px;
    cursor: pointer;
}

/* GENERIC APPLY TO ALL IMAGES THAT FILL FULL FRAME SIZE */

.generic_full_image {
    position: absolute;
    transform-origin: top left;
    background-repeat: no-repeat;
    overflow: hidden;
    transform: scale(0.5);
    -ms-transform: scale(0.5);
    left: 0px;
    top: 0px;
    width: 600px;
    height: 500px;
}

#bg_pan {
    background-image: url(bg_wide.jpg);
    transform: scale(1);
    -ms-transform: scale(1);
    left: -150px;
    width: 450px;
    height: 250px;
    z-index: 10;
}

/*  =========== THE EDGE ART ============= */
#edgeGroup {
    position: absolute;
    visibility: hidden;
    z-index: 890;
}
#edgeLeftGroup {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 891;
}
#greetings {
    background: url(edgeArt_greetings.png);
    z-index: 892;
}
#leftFrame {
    background: url(edgeArt_LeftFrame.png);
    z-index: 896;
}

#leftBlueText {
    background: url(edgeArt_blueUnder_left_80.png);
    opacity: 0.85;
    z-index: 895;
}

#edgeRightGroup {
    position: absolute;
   top: 0px;
   left: 0px;
   z-index: 891;
}
#from {
    background: url(edgeArt_from.png);
    z-index: 897;
}
#rightFrame {
    background: url(edgeArt_RightFrame.png);
    z-index: 899;
}
#rightBlueText {
    background: url(edgeArt_blueUnder_right_80.png);
    opacity: 0.85;
    z-index: 898;
}


/*  =========== TEXT BLOCK ANIMATION CLASSES ===========  */

.block_wrapper {
    position: absolute;
    transform-origin: top left;
    top: 0px;
    left: 0px;
    visibility: hidden;
}
.text_line {
    position: absolute;
    transform-origin: top left;
    background-repeat: no-repeat;
    overflow: hidden;
    transform: scale(0.5);
    -ms-transform: scale(0.5);
    width: 600px;
    height: 500px;
}
/*  =========== TEXT BLOCK 1 ===========  */

#block1_top     { z-index: 911; }
#tb1_upper       { background: url(textBlock1_upper.png); }
#block1_bottom  { z-index: 912; }
#tb1_lower       { background: url(textBlock1_lower.png); }

/*  =========== TEXT BLOCK 2 ===========  */

#block2_top     { z-index: 913; }
#tb2_upper       { background: url(textBlock2_upper.png); }
#block2_bottom  { z-index: 914; }
#tb2_lower       { background: url(textBlock2_lower.png); }

/*  =========== END TEXT BLOCK (4) ===========  */

#endText_top    { z-index: 917; }
#endText_upper   { background: url(textBlockEnd_upper.png); }
#endText_bottom { z-index: 918; }
#endText_lower   { background: url(textBlockEnd_lower.png); }


/*  =========== END FRAME DETAILS ===========  */

#hpeLogo {
    background: url(endLogo.png);
    visibility: hidden;
    z-index: 911;
}

#cta {
    background: url(ctaText.png);
    visibility: hidden;
    z-index: 941;
}
#buttonSolid {
    position: absolute;
    transform-origin: top left;
    overflow: hidden;
    background-color: #00a982;
    width: 107px;
    height: 28px;
    left: 169px;
    top: 196px;
    visibility: hidden;
    z-index: 940;
}