/* 
Author: Conrad Jamir - Front End Software Engineer
Date Modified: October 12, 2018
*/


/* 
FlashTalk Dynamic Bottom Offer Price:
Use in HTML

For $79.99
   <span class="fs22">79</span>
   <span class="fs10">al mes por 2 años<br>con contrato de 1 año</span>
   
For $35 (no cents) **cada uno goes inside bottomRange
   <span class="fs28">35</span>
   <span class="fs9">cada uno al mes por 1 año<br>al combinar los dos<br>con contrato de 1 año</span>
    

Or in manifest.js, check HTML source first then add class

For $79.99
    "name": "bottomPrice",
    "type": "text",
    "default": "<span class='fs22'>79</span>"

    "name": "bottomRange",
    "type": "text",
    "default": "<span class='fs9'>al mes por 2 años<br>con contrato de 1 año</span>"

For $35 (no cents) **cada uno goes inside bottomRange
    "name": "bottomPrice",
    "type": "text",
    "default": "<span class='fs28'>35</span>"

    "name": "bottomRange",
    "type": "text",
    "default": "<span class='fs9'>cada uno al mes por 1 año<br>al combinar los dos<br>con contrato de 1 año</span>"
    
*/


/*
****************************************
** minireset.css v0.0.3 |
** MIT License |
** github.com/jgthms/minireset.css
****************************************
*/

html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
legend,
textarea,
pre,
iframe,
hr,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding: 0;
    color: #FFF;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 100%;
    font-weight: normal;
}

ul {
    list-style: none;
}

button,
input,
select,
textarea {
    margin: 0;
}

html {
    box-sizing: border-box;
}

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

img,
embed,
iframe,
object,
audio,
video {
    height: auto;
    max-width: 100%;
}

iframe {
    border: 0;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

td,
th {
    padding: 0;
    text-align: left;
}

/*
****************************************
** Flashtalking hosted
** Comcast Fonts
****************************************
*/

@font-face {
    font-family: 'XFINITYStandardTT-Thin';
    src: url("https://cdn.flashtalking.com/93411/fonts/68f8e04978274091c7e6a976542a8ec97eee679e.woff2") format("woff2"),
        url("https://cdn.flashtalking.com/93411/fonts/fcd4f2198bddddd5175dd3d169a3388de84a8e7d.woff") format("woff"),
        url("https://cdn.flashtalking.com/93411/fonts/aa7d91e3382f967545ca35bbb60551aaa5f83719.ttf") format("truetype");
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'XFINITYStandardTT-Bold';
    src: url("https://cdn.flashtalking.com/93411/fonts/bf2f2b3424a5148dfa724c2fdfb63d7f5d3b61c4.woff2") format("woff2"),
        url("https://cdn.flashtalking.com/93411/fonts/e47e07c11abfd771eb540bb9e07e9fec9e119c72.woff") format("woff"),
        url("https://cdn.flashtalking.com/93411/fonts/ed356a21dc6474b5ae9b308808995af6ea4551f7.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'XFINITYStandardTT';
    src: url("https://cdn.flashtalking.com/93411/fonts/6c42a98cfc6fa0c435b36f2a42509d71ccef627c.woff2") format("woff2"),
        url("https://cdn.flashtalking.com/93411/fonts/9c8b95b41012f79de6dff19b5722e4ceba3b98b9.woff") format("woff"),
        url("https://cdn.flashtalking.com/93411/fonts/4b519c62d8912d01963a2179b2262b7fd093a8c0.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'XFINITYStandardTT-Medium';
    src: url("https://cdn.flashtalking.com/93411/fonts/48c7e9affb0f33ae2050766b308832be99b9521c.woff2") format("woff2"),
        url("https://cdn.flashtalking.com/93411/fonts/3ad0668f0994cb844ccd7824c6f970068925198c.woff") format("woff"),
        url("https://cdn.flashtalking.com/93411/fonts/8674ef4564ad507eaaa2c5dff14345c9181899bf.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'XFINITYStandardTT-MediumItalic';
    src: url("https://cdn.flashtalking.com/93411/fonts/8da4afd258ec077cc55c18d76dae0a5ed0f778bc.woff2") format("woff2"),
        url("https://cdn.flashtalking.com/93411/fonts/3fbcf6a04efa0d8393c9adbc44638f9c46e11ba7.woff") format("woff"),
        url("https://cdn.flashtalking.com/93411/fonts/5aa775a6da8c6068572bc798038dcded2dad65d0.ttf") format("truetype");
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'XFINITYStandardTT-Light';
    src: url("https://cdn.flashtalking.com/93411/fonts/beeacad9011922c7031fe837cdf667ea76c960b0.woff2") format("woff2"),
        url("https://cdn.flashtalking.com/93411/fonts/a6e7996a68a9983dc83e5122d44ecad4fe1b4715.woff") format("woff"),
        url("https://cdn.flashtalking.com/93411/fonts/b2b50684d518d03f3495943c45107c480b316be3.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'XFINITYStandardTTCond-Medium';
    src: url("https://cdn.flashtalking.com/93411/fonts/c92c79a86b2b54bde3fe6d11cdd32a70f954c510.woff2") format("woff2"),
        url("https://cdn.flashtalking.com/93411/fonts/0fc18abd6d2c72b82ebe3acfc84e2cc6bad984e8.woff") format("woff"),
        url("https://cdn.flashtalking.com/93411/fonts/210731351d2689a6ab491c73b860b2a8edaddfa4.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
}

/* XFINITY Brown Fonts */

@font-face {
    font-family: 'XfinityBrownWeb-Regular';
    src: url('https://cdn.flashtalking.com/93411/fonts/7d1c67efe403cb3f72ae695a3b3a4e1809ec8710.eot');
    /* IE9 Compat Modes */
    src: url('https://cdn.flashtalking.com/93411/fonts/40915d5c7fac9eb0b4397623fac4cd6d0a48852d.woff2') format('woff2'),
        url('https://cdn.flashtalking.com/93411/fonts/1bf1652af0afef4076dc2fd7e065fbe531cdf610.woff') format('woff');
    /* Legacy iOS */
}

/* XfinityBrownWeb-Bold */

@font-face {
    font-family: 'XfinityBrownWeb-Bold';
    src: url('https://cdn.flashtalking.com/93411/fonts/57cfca5154c2481062a796915c0bdab3ed0f6fd6.eot');
    /* IE9 Compat Modes */
    src: url('https://cdn.flashtalking.com/93411/fonts/d4b3e162de98cb3f43636cde35fcc00e89f83fdf.woff2') format('woff2'),
        url('https://cdn.flashtalking.com/93411/fonts/1ccbf188da2dd4565c47b990c13da23365f1251e.woff') format('woff');
    /* Legacy iOS */
}

/* XfinityBrownWeb-BoldItalic */

@font-face {
    font-family: 'XfinityBrownWeb-BoldItalic';
    src: url('https://cdn.flashtalking.com/93411/fonts/dd78931fcea87798824b2ea15508b3018ea83801.eot');
    /* IE9 Compat Modes */
    src: url('https://cdn.flashtalking.com/93411/fonts/925713410a76312ac03b99b396ff01617ccd51b4.woff2') format('woff2'),
        url('https://cdn.flashtalking.com/93411/fonts/a241002feb1cb850183df40e8eac072407f86886.woff') format('woff');
    /* Legacy iOS */
}

/* XfinityBrownWeb-Italic */

@font-face {
    font-family: 'XfinityBrownWeb-Italic';
    src: url('https://cdn.flashtalking.com/93411/fonts/8dce5ea02e414e29aae67005b9005d4b3c93540a.eot');
    /* IE9 Compat Modes */
    src: url('https://cdn.flashtalking.com/93411/fonts/11618f303fbc6ea15251b1dea07a01a172457cf4.woff2') format('woff2'),
        url('https://cdn.flashtalking.com/93411/fonts/a8f706bffdb0cd829c1cf7648e9bf9a1b214603f.woff') format('woff');
    /* Legacy iOS */
}

/* XfinityBrownWeb-Light */

@font-face {
    font-family: 'XfinityBrownWeb-Light';
    src: url('https://cdn.flashtalking.com/93411/fonts/0cd2571b390e50c7237ba186315923424f49f8ad.eot');
    /* IE9 Compat Modes */
    src: url('https://cdn.flashtalking.com/93411/fonts/24941008179701317ed1b84ece7f42ed6a90c2d4.woff2') format('woff2'),
        url('https://cdn.flashtalking.com/93411/fonts/74e41835de34c8deb73e1f979e66fe374ac4ccb9.woff') format('woff');
    /* Legacy iOS */
}

/* XfinityBrownWeb-LightItalic */

@font-face {
    font-family: 'XfinityBrownWeb-LightItalic';
    src: url('https://cdn.flashtalking.com/93411/fonts/289be44322768fce8ee7f2f396e63bb7bd4741eb.eot');
    /* IE9 Compat Modes */
    src: url('https://cdn.flashtalking.com/93411/fonts/ee87a989f489f04b7ce40ad162c93a2681c95db1.woff2') format('woff2'),
        url('https://cdn.flashtalking.com/93411/fonts/196109e48488e6306e22a4d01083b2cf62f52247.woff') format('woff');
    /* Legacy iOS */
}

/*
****************************************
** Xfinity Standard Font Style
** Classes
****************************************
*/
.xsn {
    font-family: 'XfinityStandardTT';
    font-style: normal;
    font-weight: 400;
}

.xst {
    font-family: 'XFINITYStandardTT-Thin';
    font-style: normal;
    font-weight: 100;
}

.xsb {
    font-family: 'XFINITYStandardTT-Bold';
    font-style: normal;
    font-weight: 700;
}

.xsm {
    font-family: 'XFINITYStandardTT-Medium';
    font-style: normal;
    font-weight: 500;
}

.xsl {
    font-family: 'XFINITYStandardTT-Light';
    font-style: normal;
    font-weight: 300;
}

.xsli {
    font-family: 'XFINITYStandardTT-Light';
    font-style: italic;
    font-weight: 300;
}

.xscm {
    font-family: 'XFINITYStandardTTCond-Medium';
    font-style: normal;
    font-weight: 500;
}

.xsmi {
    font-family: 'XFINITYStandardTT-MediumItalic';
    font-style: italic;
    font-weight: 500;
}

/*
****************************************
** Xfinity Brown Font Style
** Classes
****************************************
*/

.xbn {
    font-family: 'XfinityBrownWeb-Regular';
    font-style: normal;
    font-weight: normal;
}

.xbb {
    font-family: 'XfinityBrownWeb-Bold';
    font-style: normal;
    font-weight: normal;
}

.xbbi {
    font-family: 'XfinityBrownWeb-BoldItalic';
    font-style: italic;
    font-weight: normal;
}

.xbi {
    font-family: 'XfinityBrownWeb-Italic';
    font-style: italic;
    font-weight: normal;
}

.xbl {
    font-family: 'XfinityBrownWeb-Light';
    font-style: normal;
    font-weight: 300;
}

.xbli {
    font-family: 'XfinityBrownWeb-LightItalic';
    font-style: italic;
    font-weight: 300;
}



/*
****************************************
** Font Style
** Line Height
****************************************
*/
.ib {
    display: inline-block;
}

.lhx2 {
    line-height: 2;
}

.lhx1_5 {
    line-height: 1.5;
}

.lhx1_4 {
    line-height: 1.4;
}

.lhx1_3 {
    line-height: 1.3;
}

.lhx1_2 {
    line-height: 1.2;
}

.lhx1_1 {
    line-height: 1.1;
}

.lhx1 {
    line-height: 1;
}

.lhx09 {
    line-height: 0.9;
}

.lhx08 {
    line-height: 0.8;
}

.lhx05 {
    line-height: 0.5;
}

/*
****************************************
** Font Style Sizes
****************************************

*/

.fs42 {
    font-size: 42px;
}

.fs36 {
    font-size: 36px;
}

/* 160x600 standard bottom price no cents */
.fs28 {
    font-size: 28px;
}

.fs24 {
    font-size: 24px;
}

.fs23 {
    font-size: 23px;
}

/* 300x250 standard bottom price */
.fs22 {
    font-size: 22px;
}

.fs18 {
    font-size: 18px;
}

.fs17 {
    font-size: 17px;
}

.fs16 {
    font-size: 16px;
}

.fs15 {
    font-size: 15px;
}

.fs14 {
    font-size: 14px;
}

.fs13 {
    font-size: 13px;
}

.fs12 {
    font-size: 12px;
}

.fs11 {
    font-size: 11px;
}

.fs10 {
    font-size: 10px;
}

.fs9 {
    font-size: 9px;
}

.fs8 {
    font-size: 8px;
}

.fs7 {
    font-size: 7px;
}

/*
****************************************
** Letter Spacing
****************************************
*/

.ls5 {
    letter-spacing: 0.5px
}

.ls4 {
    letter-spacing: 0.4px
}

.ls3 {
    letter-spacing: 0.3px
}

.ls2 {
    letter-spacing: 0.2px
}

.ls1 {
    letter-spacing: 0.1px
}

.lsm5 {
    letter-spacing: -0.5px
}

.lsm4 {
    letter-spacing: -0.4px
}

.lsm3 {
    letter-spacing: -0.3px
}

.lsm2 {
    letter-spacing: -0.2px
}

.lsm1 {
    letter-spacing: -0.1px
}

/*
****************************************
**
** Start Custom Styles
**
****************************************
*/

* {
    font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.hide {
    display: none;
}

div,
img,
ft-dynamic {
    position: absolute;
    line-height: 1;
}

#container,
#click_tag {
    width: 728px;
    height: 90px;
    display: block;
}

#container {
    position: relative;
    overflow: hidden;
    border: 1px solid #d4d4d4;
    /*background: #fff;*/
    background: url(CCT8701_INTERNET_STREAM_HoliBrand_background_728x90.png);
    display: none;
    /* prevent image load til ready */
}

#bottomBar {
    right: -606px;
    width: 728px;
    max-width: 728px;
}

#logo {
    right: 14px;
    bottom: 10px;
    width: 65px;
    height: 22px;
}

/*
****************************************
**
** Devices/Content
**
****************************************
*/

#frame1Text{
    width: 728px;
    height: 90px;    
    top: 0px;
    left: 0px;
    /*width: 245px;
    height: 67px;*/
}

/*#devicesHolder {
    position: relative;
}

#frame1Tv,
#frame2TvContent {
    top: 0;
    left: 126px;
    width: 173px;
    height: 201px;
}

#frame1Phone,
#frame2PhoneContent {
    top: 104px;
    left: 11px;
    width: 91px;
    height: 42px;
}

#frame1Laptop,
#frame2LaptopContent {
    top: 63px;
    left: 48px;
    width: 132px;
    height: 132px;
}

#frame1Tablet,
#frame2TabletContent {
    top: 150px;
    left: 138px;
    width: 128px;
    height: 67px;
}*/

/*
****************************************
**
** Headline Content
**
****************************************
*/

#frame1and2CopyA {
    top: 20px;
    left: 16px;
    width: 262px;
}

#frame2CopyAHolder {
    display: table;
    width: 350px;
    height: 90px;
    top: 0px;
}

#frame2CopyA {
    position: relative;
    display: table-cell;
    text-align: right;
    vertical-align: middle;
}

#frame2Image {
    width: 728px;
    height: 90px;
}

#frame3CopyAHolder {
    display: table;
    width: 350px;
    height: 90px;
    top: 0px;
}

#frame3CopyA {
    position: relative;
    display: table-cell;
    text-align: right;
    vertical-align: middle;
}

#frame3Image {
    width: 728px;
    height: 90px;
}

#frame4CopyAHolder {
    display: table;
    width: 350px;
    height: 90px;
    top: 0px;
}

#frame4CopyA {
    position: relative;
    display: table-cell;
    text-align: right;
    vertical-align: middle;
}

#frame4CopyBHolder {
    display: table;
    width: 712px;
    height: 38px;
    bottom: 2px;
    left: 0px;
    text-align: right;
}

#frame4CopyB {
    color: #6d6e71;
    position: relative;
    display: table-cell;
    vertical-align: middle;
    line-height: 1.4;
}

#frame4Image {
    width: 728px;
    height: 90px;
}

#frame5Image {
    width: 728px;
    height: 90px;
}


/*
****************************************
**
** Bottom Price Styles
**
****************************************
*/
#bottomOfferPriceHolder {
    position: absolute;
    display: table;
    bottom: 0;
    left: 12px;
    width: 190px;
    height: 55px;
    margin: 0 auto;
    text-align: left;
}

#bottomOfferPrice {
    position: relative;
    display: table-cell;
    vertical-align: middle;
}

#bottomOfferTitle {
    position: relative;
    top: 0px;
    font-size: 10px;
    text-align: left;
}

#bottomSymbolPriceCentsRangeHolder {
    position: relative;
    display: inline-block;
}

#bottomSymbol {
    position: relative;
    float: left;
    font-size: 15px;
    top: 2px;
}

#bottomPrice {
    position: relative;
    top: 1px;
    float: left;
}

#bottomRightCentsRangeHolder {
    position: relative;
    text-align: left;
    float: left;
    left: 0px;
    top: 2px;
}

#bottomCents {
    position: relative;
    top: 0px;
    float: left;
}

#bottomRange {
    position: relative;
    top: 0px;
    left: 3px;
    float: left;
}

#divider1 {
    top: 7px;
    left: 32%;
    width: 110px;
    height: 1px;
    background: #FFF;
}

#divider2 {
    top: 67px;
    left: 32%;
    width: 110px;
    height: 1px;
    background: #FFF;
}

/*
****************************************
**
** End Frame Styles
**
****************************************
*/

#endFrameHeaderHolder {
    display: table;
    width: 204px;
    height: 63px;
    top: 12px;
}

#endFrameHeader {
    position: relative;
    display: table-cell;
    text-align: right;
    vertical-align: middle;
    line-height: 1.2;
}

#endFrameBoltOnHolder,
#endFrameBoltOn2Holder {
    display: table;
    /* adjust width to
    horizontally center */
    width: 600px;
    /* adjust height to
    vertically center */
    height: 90px;
    right: 0;
}

#endFrameBoltOn,
#endFrameBoltOn2 {
    position: relative;
    display: table-cell;
    font-size: 10px;
    text-align: center;
    vertical-align: middle;
    line-height: 1.2;
    padding: 0 5px;
}

#endFrameLockupImage {
    width: 728px;
    height: 90px;
    right: 0;
}

/*
****************************************
**
** Offer Price Styles
**
****************************************
*/

/* offerPriceHolder Auto Center Horizontal/Vertical */

#offerPriceHolder {
    position: absolute;
    top: 0px;
    left: 210px;
    display: table;
    width: 728px;
    height: 94px;
    /* offerPrice vertically auto centers */
    text-align: center;
}

#offerPrice {
    position: relative;
    display: table-cell;
    vertical-align: middle;
}

#offerTitle {
    position: relative;
    top: 0px;
    line-height: 1;
}

#symbolPriceCentsRangeHolder {
    position: relative;
    display: inline-block;
    top: 5px;
}

#symbol {
    position: relative;
    float: left;
    font-size: 20px;
    top: -2px;
}

#price {
    position: relative;
    top: 0;
    float: left;
    font-size: 49px;
    letter-spacing: -2.3px;
    line-height: 0.8;
}

#rightCentsRangeHolder {
    position: relative;
    text-align: left;
    float: left;
    left: 5px;
}

#cents {
    position: relative;
    font-size: 20px;
    top: 0px;
    line-height: 0.8;
}

#range {
    position: relative;
}

#offerContract {
    clear: both;
    position: relative;
    text-align: center;
    line-height: 1.2;
    margin-top: 5px;
}

#click_tag {
    position: absolute;
    top: 0;
    left: 0;
    background: transparent;
    cursor: pointer;
    z-index: 3;
}

#legalCopyHolder {
    display: table;
    width: 712px;
    height: 38px;
    bottom: 5px;
    left: 0px;
    text-align: right;
}

#phoneCopy {
    color: #000;
    position: relative;
    display: table-row;
}

#legalCopy {
    color: #6d6e71;
    position: relative;
    display: table-cell;
    vertical-align: middle;
}

#legalCopy span {
    color: #000;
}

#phone {
    position: absolute;
    margin: 0 auto;
    max-width: 100px;
    right: 8px;
    bottom: 48px;
}

#ctaBtn {
    position: relative;
    top: 24px;
    left: 190px;
    margin: 0 auto;
    max-width: 115px;
    padding: 7px 10px;
    background-color: #2b9cd8;
    border-radius: 25px;
    border: 1px solid #2b9cd8;
    background-repeat: no-repeat;
    background-image: linear-gradient(to right, rgba(204, 204, 204, 0), rgba(255, 255, 255, 0.5), rgba(204, 204, 204, 0));
    background-position: -120px 0;
    text-align: center;
    color: #fff;
    overflow: hidden;
    cursor: pointer;
}

#ctaText {
    position: relative;
    white-space: nowrap;
    display: inline-block;
}

/*
****************************************
**
** Confetti Styles
**
****************************************
*/
.dot1 {
    position: absolute;
    background: url(GU_CCT8571_confetti_1.svg);
    background-size: 100% 100%;
}

.dot2 {
    position: absolute;
    background: url(GU_CCT8571_confetti_2.svg);
    background-size: 100% 100%;
}

.dot3 {
    position: absolute;
    background: url(GU_CCT8571_confetti_3.svg);
    background-size: 100% 100%;
}

.dot4 {
    position: absolute;
    background: url(GU_CCT8571_confetti_4.svg);
    background-size: 100% 100%;
}

.dot5 {
    position: absolute;
    background: url(GU_CCT8571_confetti_3_blur.png);
    background-size: 100% 100%;
}

.dot6 {
    position: absolute;
    background: url(GU_CCT8571_confetti_4_blur.png);
    background-size: 100% 100%;
}

#stage1,
#stage2,
#stage3 {
    position: absolute;
    width: 728px;
    height: 90px;
}