/* ==================================================================
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,#txt1,#txt2,#txt3,#txt4,#txt5,#endframe-txt1,#endframe-txt2,#endframe-legal,#cta,#pos {position: absolute;}


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

#banner {
    width: 160px;
    height: 600px;
    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: 38px;
    left: 42px;
    width: 73px;
    height: 24px;
    background: url(sprites.png) no-repeat -43px -2px;
    z-index: 100;
}

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

#savings-logo2 {
  	width: 160px;
    height: 302px;
    left: 0;
    top: 125px;
	background: url(LogoFrame1.png) no-repeat;
    background-repeat: no-repeat;
	background-position: center;
}


#cta {
    top: 503px;
    left: 29px;
    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-txt {
    width: 72px;
	height: 9px;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    top: -1px;
    position: absolute;
    background: url(sprites.png) no-repeat -197px -238px;
}

/* X1 DVR SERVICE */
#box {
    width: 160px;
    height: 78px;
    left: 0px;
    top: 373px;
	background: url(endFrame.png) no-repeat;
	background-position: -0px  -373px;
}


/* IMAGES */

#arrow {
    width: 160px;
    height: 117px;
    left: 0px;
    top: 231px;
	background: url(endFrame.png) no-repeat;
	background-position: -0px  -231px;
}

#arrow-txt {
    width: 84px;
	height: 67px;
    margin-top:7px;
    margin-left:8px;
    background: url('sprites.png') no-repeat -188px -106px;
}

#band1 {
    width:160px;
    height:15px;
    background: #5a5a5c;
    bottom:164px;
}

#band-txt1 {
    width: 89px;
	height: 8px;
    left:35px;
    top:3px;
    background: url('sprites.png') no-repeat -4px -310px;
}

#band-txt2 {
    width: 31px;
	height: 8px;
    left:64px;
    top:3px;
    background: url('sprites.png') no-repeat -104px -310px;
}

#band-txt3 {
    width: 123px;
	height: 8px;
    left:18px;
    top:3px;
    background: url('sprites.png') no-repeat -164px -393px;
}

#box-txt {
    width: 92px;
	height: 40px;
    top:78px;
    left:13px;
    background: url('sprites.png') no-repeat -183px -180px;
}

#endframe-legal {
    width: 86px;
    height: 8px;
    top: 442px;
    left: 36px;
    background: url('sprites.png') no-repeat -187px -225px;
}

#blue-band {
    width:300px;
    height:18px;
    top: 84px;
    left: -60px;
    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 );
}

#endframe-txt1 {
    width: 126px;
	height: 8px;
    margin-top: 6px;
    margin-left: 76px;
    background: url('sprites.png') no-repeat -163px -322px;
}

#endframe-txt2 {
    width: 122px;
	height: 46px;
    top:151px;
    left: 18px;
    background: url('sprites.png') no-repeat -21px -29px;
}

#laptop {
    width: 137px;
	height: 71px;
    top: 300px;
    left: 15px;
    background: url('sprites.png') no-repeat 0 -406px;
}

#legal1 {
    width: 151px;
	height: 8px;
    top: 389px;
    left:3px;
    background: url('sprites.png') no-repeat -4px -299px;
}

#legal2 {
    width: 150px;
	height: 8px;
    top: 389px;
    left:5px;
    background: url('sprites.png') no-repeat -144px -310px;
}

#legal3 {
    width: 121px;
	height: 8px;
    top: 389px;
    left:18px;
    background: url('sprites.png') no-repeat -165px -383px;
}

#phone {
    width: 37px;
	height: 18px;
    top: 359px;
    left: 5px;
    background: url('sprites.png') no-repeat -172px -275px;
}

#remote {
    width: 15px;
	height: 31px;
    background: url('sprites.png') no-repeat -118px -212px;
    top:343px;
    left: 125px;
}

#tablet {
    width: 58px;
	height: 34px;
    top: 341px;
    left: 12px;
    background: url('sprites.png') no-repeat -232px -260px;
}


#tv1 {
    width: 110px;
	height: 76px;
    top: 301px;
    left: 25px;
    background: url('sprites.png') no-repeat -4px -207px;
}

#tv1-txt {
    left: 13px;
    top: 3px;
    width: 80px;
	height: 10px;
    background: url('sprites.png') no-repeat -56px -290px;
}

#tv2 {
    width: 110px;
	height: 77px;
    top: 301px;
    left: 25px;
    background: url('sprites.png') no-repeat -3px -328px;
}

#txt1 {
    width: 119px;
	height: 12px;
    top: 145px;
    left: 19px;
    background: url('sprites.png') no-repeat -20px -79px;
}


#txt2 {
    width: 129px;
	height: 35px;
    top: 146px;
    left: 13px;
    background: url('sprites.png') no-repeat -14px -97px;
}

#txt3 {
    width: 115px;
	height: 15px;
    top: 146px;
    left: 20px;
    background: url('sprites.png') no-repeat -22px -133px;
}

#txt4 {
    width: 98px;
	height: 34px;
    top: 147px;
    left: 29px;
    background: url('sprites.png') no-repeat -34px -152px;
}

#txt5 {
    width: 109px;
	height: 16px;
    top: 147px;
    left: 23px;
    background: url('sprites.png') no-repeat -26px -187px;
}

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

#black-bar {
    bottom: 14px;
    left: 1px;
    background-color: #000;
    width: 107px;
    height: 15px;
}