/* ==================================================================
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,
#endframeX-Logo,
#endframe-legal,
#cta,
#pos {
    position: absolute;
}


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

#banner {
    width: 300px;
    height: 250px;
    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);
    visibility: hidden;
}

#logo {
    top: 7px;
    right: 12px;
    width: 73px;
    height: 24px;
    background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmlld0JveD0iMCAwIDEwOSAzNiI+PHN0eWxlPi5zdDB7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMl8pO30gLnN0MXtjbGlwLXBhdGg6dXJsKCNTVkdJRF80Xyk7ZmlsbDojRDcxOTIwO30gLnN0MntjbGlwLXBhdGg6dXJsKCNTVkdJRF82Xyk7ZmlsbDojRDcxOTIwO308L3N0eWxlPjxkZWZzPjxwYXRoIGlkPSJTVkdJRF8xXyIgZD0iTTAgLjdoMTA4djM1LjJIMHoiLz48L2RlZnM+PGNsaXBQYXRoIGlkPSJTVkdJRF8yXyI+PHVzZSB4bGluazpocmVmPSIjU1ZHSURfMV8iIG92ZXJmbG93PSJ2aXNpYmxlIi8+PC9jbGlwUGF0aD48ZyBjbGFzcz0ic3QwIj48ZGVmcz48cGF0aCBpZD0iU1ZHSURfM18iIGQ9Ik0wIDBoMTA5djM2SDB6Ii8+PC9kZWZzPjxjbGlwUGF0aCBpZD0iU1ZHSURfNF8iPjx1c2UgeGxpbms6aHJlZj0iI1NWR0lEXzNfIiBvdmVyZmxvdz0idmlzaWJsZSIvPjwvY2xpcFBhdGg+PHBhdGggY2xhc3M9InN0MSIgZD0iTTcwLjMgMjcuN1Y4LjVoLTQuNHYyMC4zaDQuNHYtMS4xbS0zMC42IDBWOC41aC00LjR2MjAuM2g0LjR2LTEuMXpNNTQgOC4xYy0yLjEgMC00LjEuOS01LjEgMi4yVjguNWgtNC40djIwLjNoNC40VjE3YzAtMy4zIDEuNC01LjEgNC01LjEgMi44IDAgNCAxLjYgNCA1LjV2MTEuNWg0LjRWMTcuMmMwLTUuOS0yLjUtOS4xLTcuMy05LjF6TTc2LjcgMTJ2MTEuNGMwIDMuNyAyIDUuOSA1LjQgNS45IDEuMSAwIDIuMi0uMSAzLjEtLjRsLjUtMy41Yy0uMy4xLTEuMi4zLTIgLjMtMS44IDAtMi42LS43LTIuNi0yLjZWMTJoNS4xbC0xLjMtMy41aC0zLjhWMS4ybC00LjQgMi4ydjUuMWgtMy4yVjEyaDMuMnpNMjMuNSA4LjVoLTIuMUwxOSAxMmg0LjV2MTYuOWg0LjRWMTJoNC41VjguNWgtNC41di0yYzAtMS41LjYtMi4xIDIuMS0yLjEuOSAwIDEuOC4yIDIuNC4zVjEuM2MtLjktLjMtMi4yLS41LTMuNS0uNS0zLjQgMC01LjQgMi4yLTUuNCA1Ljl2MS44em04NC41IDBoLTQuOGwtNy4xIDEyLjktNC44LTEyLjloLTQuNmw2LjggMTcuNy01LjIgOS44SDkzbDE1LTI3LjV6bS05NS44IDkuOGw2LjktOS44SDE0bC00LjMgNi4zLTQuMS02LjNILjVsNi45IDkuOEwwIDI4LjhoNS4xbDQuOC03TDE5LjcgMzZoNC45TDEyLjIgMTguM3oiLz48L2c+PGc+PGRlZnM+PHBhdGggaWQ9IlNWR0lEXzVfIiBkPSJNMCAwaDEwOXYzNkgweiIvPjwvZGVmcz48Y2xpcFBhdGggaWQ9IlNWR0lEXzZfIj48dXNlIHhsaW5rOmhyZWY9IiNTVkdJRF81XyIgb3ZlcmZsb3c9InZpc2libGUiLz48L2NsaXBQYXRoPjxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMDEuNyAyNy43YzAtMS4zIDEuMS0yLjQgMi40LTIuNCAxLjQgMCAyLjQgMS4xIDIuNCAyLjQgMCAxLjMtMS4xIDIuNC0yLjQgMi40LTEuMyAwLTIuNC0xLjEtMi40LTIuNG00LjYgMGMwLTEuMi0uOS0yLjItMi4yLTIuMi0xLjIgMC0yLjIgMS0yLjIgMi4yIDAgMS4yLjkgMi4yIDIuMiAyLjIgMS4zLS4xIDIuMi0xLjEgMi4yLTIuMnptLTMuMS0xLjRoMS4xYy4zIDAgLjYuMS44LjMuMS4xLjIuMy4yLjUgMCAuNC0uMi43LS42LjhsLjcgMWgtLjZsLS42LS45aC0uNXYuOWgtLjV2LTIuNnptMS4xIDEuM2MuMyAwIC41LS4yLjUtLjQgMC0uMy0uMi0uNC0uNS0uNGgtLjZ2LjhoLjZ6Ii8+PC9nPjwvc3ZnPg==);
}

#savings-logo {
	width: 300px;
    height: 250px;
    left: 0;
    bottom: 0;
	background: url(SpringLogo.png) no-repeat;
    background-repeat: no-repeat;
	background-position: 0 0;
}

#cta {
    bottom: 15px;
    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: 129px;
    height: 33px;
    left: 158px;
    top: 150px;
	background: url(endFrame.png) no-repeat;
	background-position: -159px  -150px;
}


/* 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-legal,
#box-txt {
    background: url(sprites.png) no-repeat;
    background-repeat: no-repeat;
}

#arrow {
	width: 127px;
    height: 113px;
    left: 23px;
    top: 117px;
	background: url(endFrame.png) no-repeat;
	background-position: -23px  -116px;
	
}

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

#band1 {
    width:300px;
    height:18px;
    background: #5a5a5c;
    bottom:14px;
}


#band-txt1 {
    width: 100px;
    height: 9px;
    background-position: -392px -231px;
    left:100px;
    top:4px;
}

#band-txt2 {
    width: 35px;
    height: 9px;
    background-position: -205px -185px;
    left:134px;
    top:4px;
}

#band-txt3 {
    width: 139px;
    height: 9px;
    background-position: -249px -170px;
    left:80px;
    top:4px;
}

#box-txt {
    width: 91px;
    height: 41px;
    background-position: -444px -140px;
    top:18px;
    left:90px;
}

#endframe-legal {
   	width: 300px;
    height: 250px;
    left: 54px;
    top: 210px;
	background: url(endFrame.png) no-repeat;
	background-position: -54px  -210px;
}

#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:40px;
}

#endframe-txt1 {
    width: 160px;
    height: 10px;
    background-position: -1px -222px;
    margin-top: 5px;
    margin-left: 70px;
}

#endframe-txt2 {
    width: 300px;
    height: 112px;
    left: 0px;
    top: 0px;
	background: url(endFrame.png) no-repeat;
	background-position: 0 0;
	background-repeat: no-repeat;
	background-position: 0 0;
}

#laptop {
    width: 246px;
    height: 182px;
    background-position: -1px -1px;
    top:58px;
}

#legal1 {
    width: 151px;
    height: 8px;
    background-position: -249px -160px;
    left:74px;
}

#legal2 {
    width: 150px;
    height: 8px;
    background-position: -1px -236px;
    left:86px;
}

#legal3 {
    width: 121px;
    height: 8px;
    background-position: -392px -221px;
    left:89px;
}

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

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

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

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

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

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

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

#txt1 {
    width: 130px;
    height: 13px;
    background-position: -249px -181px
}


#txt2 {
    width: 263px;
    height: 17px;
    background-position: -249px -121px;
}

#txt3 {
    width: 126px;
    height: 17px;
    background-position: -392px -183px
}

#txt4 {
    width: 193px;
    height: 18px;
    background-position: -249px -140px
}

#txt5 {
    width: 118px;
    height: 17px;
    background-position: -392px -202px
}

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

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