/* ==================================================================
CSS BASE RESET
===================================================================*/

html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /*Universal box sizing with inheritance */
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body,
body * {
    vertical-align: baseline;
    border: 0;
    outline: 0;
    padding: 0;
    margin: 0;
}


/* ==================================================================
BANNER STYLES
===================================================================*/
#blue-band,
#box,
#black-bar,
#band1, 
#band2, 
#band3,
#band-txt1,
#band-txt2, 
#band-txt3, 
#legal1,
#legal2,
#legal3,
#box-txt,
#tv1,
#tv1-txt,
#black-bar,
#tv2,
#tablet,
#phone,
#laptop,
#remote,
#phone,
#arrow,
#logo,
#savings-logo,
#savings-logo2,
#txt1,
#txt2,
#txt3,
#txt4,
#txt5,
#endframe-txt1,
#endframe-txt2,
#endframe-legal,
#cta,
#pos {
    position: absolute;
}


/*
#content div{
position:absolute;
}*/

#banner {
    width: 728px;
    height: 90px;
    cursor: pointer;
    border: 1px solid black;
    position: relative;
    display: block;
    overflow: hidden;
    background: rgba(210, 211, 213, 1);
    background: -moz-linear-gradient(top, rgba(210, 211, 213, 1) 0%, rgba(255, 255, 255, 1) 43%, rgba(255, 255, 255, 1) 64%, rgba(210, 211, 213, 1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(210, 211, 213, 1)), color-stop(43%, rgba(255, 255, 255, 1)), color-stop(64%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(210, 211, 213, 1)));
    background: -webkit-linear-gradient(top, rgba(210, 211, 213, 1) 0%, rgba(255, 255, 255, 1) 43%, rgba(255, 255, 255, 1) 64%, rgba(210, 211, 213, 1) 100%);
    background: -o-linear-gradient(top, rgba(210, 211, 213, 1) 0%, rgba(255, 255, 255, 1) 43%, rgba(255, 255, 255, 1) 64%, rgba(210, 211, 213, 1) 100%);
    background: -ms-linear-gradient(top, rgba(210, 211, 213, 1) 0%, rgba(255, 255, 255, 1) 43%, rgba(255, 255, 255, 1) 64%, rgba(210, 211, 213, 1) 100%);
    background: linear-gradient(to bottom, rgba(210, 211, 213, 1) 0%, rgba(255, 255, 255, 1) 43%, rgba(255, 255, 255, 1) 64%, rgba(210, 211, 213, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#d2d3d5', endColorstr='#d2d3d5', GradientType=0);
}

#logo {
    top: 12px;
    right: 15px;
    width: 65px;
    height: 22px;
    background-image: url(logo.svg);
	 background-repeat: no-repeat;
}

#savings-logo {
    width: 728px;
    height: 90px;
    left: 0;
    top: 0;
	background: url(LogoFrame1.png) no-repeat;
    background-repeat: no-repeat;
	background-position: 0 0;
}

#savings-logo2 {
	
	width: 280px;
    height: 90px;
    left: 72;
    top: 0;
	background: url(endFrame.png) no-repeat;
    background-repeat: no-repeat;
	background-position: 0 0;
}

#cta {
    bottom: 12px;
    right: 15px;
    width: 100px;
    height: 20px;
    background: #2ea0dd;
    /*background:rgba(237,89,41,1);*/
    background-repeat: no-repeat;
    background-image: linear-gradient(to right, rgba(204, 204, 204, 0), rgba(204, 204, 204, 0.5), rgba(204, 204, 204, 0));
    background-position: -200px 0;
}

#cta img {
    width: 68px;
    height: 8px;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    top: -1px;
    position: absolute;
}


#box {
    width: 115px;
    height: 78px;
    left: 465px;
    top: 0px;
	background: url(endFrame.png) no-repeat;
	background-position: -465px  0px;
}


/* IMAGES */

#tv1,
#tv1-txt,
#tv2,
#tablet,
#laptop,
#phone,
#remote,
#arrow,
#arrow-txt,
#txt1,
#txt2,
#txt3,
#txt4,
#txt5,
#legal1,
#legal2,
#legal3,
#band-txt1,
#band-txt2,
#band-txt3,
#endframe-txt1,
#endframe-txt2,
#endframe-legal,
#box-txt {
    background: url(sprites.png) no-repeat;
    background-repeat: no-repeat;
}

#arrow {
	width: 150px;
    height: 90px;
    left: 16px;
    top: 0px;
	background: url(endFrame.png) no-repeat;
	background-position: -316px  0px;
	
    /*width: 123px;
    height: 68px;
    top: 6px;
    background-image: url(blueArrow.svg);*/
}

#arrow-txt {
    width: 89px;
    height: 54px;
    background-position: -301px -196px;
    margin-top:6px;
    margin-left:12px;
}

#band1 {
    width:300px;
    height:14px;
    background: #5a5a5c;
    bottom:10px;
	left: 69px;
}


#band-txt1 {
    width: 162px;
    height: 9px;
    background-position: 0px -195px;
    left: 70px;
    top: 1px;
}

#band-txt2 {
    width: 162px;
    height: 9px;
    background-position: 0px -210px;
    left: 68px;
    top: 1px;
}

#band-txt3 {
    width: 162px;
    height: 9px;
    background-position: 0px -225px;
    left: 68px;
    top: 1px;
}

#box-txt {
	
    width: 148px;
    height: 39px;
    background-position: -391px -135px;
    top:18px;
    left:77px;
}

#endframe-legal {
    width: 86px;
    height: 8px;
    background-position: -392px -242px;
    bottom: 1px;
    right: 146px;
}

#blue-band {
    width:0;
    height:20px;
    background: rgba(46,160,221,0.2);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(46,160,221,0.2)), color-stop(33%, rgba(46,160,221,1)), color-stop(51%, rgba(46,160,221,1)), color-stop(75%, rgba(46,160,221,1)), color-stop(100%, rgba(46,160,221,0.2)));
background: linear-gradient(to right, rgba(46,160,221,0.2) 0%, rgba(46,160,221,1) 25%, rgba(46,160,221,1) 51%, rgba(46,160,221,1) 75%, rgba(46,160,221,0.2) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2ea0dd', endColorstr='#2ea0dd', GradientType=1 );
    top:0px;
}

#endframe-txt1 {
    width: 170px;
    height: 15px;
    background-position: 0px -240px;
    margin-top: 4px;
    margin-left: 55px;
}

#endframe-txt2 {
    width: 202px;
    height: 35px;
    background-position: -1px -185px;
    top:72px;
    left:50px;
}

#laptop {
    width: 170px;
    height: 70px;
    background-position: -1px -40px;
    top:11px;
}

#legal1 {
    width: 142px;
    height: 24px;
    background-position: 0px -145px;
    right: 20px;
}

#legal2 {
    width: 142px;
    height: 24px;
    background-position: 0px -171px;
    right: 20px;
}

#legal3 {
    width: 120px;
    height: 24px;
    background-position: -12px -9px;
    left: 565px;
}

#phone {
    width: 63px;
    height: 27px;
    background-position: -520px -183px;
    top: 69px;
}

#remote {
    width: 25px;
    height: 48px;
    background-position: -537px -121px;
    top:54px;
}

#tablet {
    width: 94px;
    height: 54px;
    background-position: -205px -196px;
    top: 52px;
}

#tv1, #tv2 {
    top:11px;
}

#tv1 {
    width: 168px;
    height: 70px;
    background-position: -249px -1px
}

#tv1-txt {
    left: 10px;
    top: 5px;
    width: 78px;
    height: 8px;
    background-position: -480px -242px
}

#tv2 {
    width: 167px;
    height: 70px;
    background-position: -419px -1px
}

#txt1 {
	top: -9px;
    width: 164px;
    height: 25px;
    background-position: 0px -120px
}


#txt2 {
	top: -10px;
    width: 340px;
    height: 25px;
    background-position: -170px -84px;
}

#txt3 {
	top: -9px;
    width: 340px;
    height: 25px;
    background-position: -170px -109px
}

#txt4 {
	top: -9px;
    width: 340px;
    height: 25px;
    background-position: -170px -260px
}

#txt5 {
	top: -9px;
    width: 340px;
    height: 25px;
    background-position: -170px -285px
}

#pos {
    width: 164px;
    left: 68px;
    top: 101px;
    height: 93px;
}

#black-bar {
    bottom: 10px;
    left: 3px;
    background-color: #000;
    width: 100px;
}