#subscription-pencil-area .bold { font-weight: 700 } #fixedpencil-subs { background-color: transparent; border-top: none; bottom: 0; display: none; height: 5rem; left: 0; padding: 0; position: fixed; right: 0; width: 100%; z-index: 1049 } #subspencil { -webkit-flexbox-align: center; align-items: center; background: #fce2e7; display: flex; flex-flow: row; flex-wrap: wrap; height: inherit; margin: 0 auto; max-width: 1280px; min-width: 320px; overflow: visible; position: relative } #subscription-pencil-area .pencil-wrapper { align-items: center; display: flex; height: 100%; justify-content: space-between; margin: 0 auto; padding: 0 .75rem; width: 100% } #subscription-pencil-area { color: #fff } #subscription-pencil-area .price-wrapper { align-items: center; display: flex; flex-direction: row; justify-content: center } #subscription-pencil-area .price { margin: 0 2px } #subscription-pencil-area .per { line-height: 1.25; text-transform: uppercase } #defaultPencil { background: radial-gradient(circle, #851318 0, #450a0d 100%); background-size: cover; border: 1px solid #ac0000; border-bottom: none; height: 100%; width: 100% } #mb-defaultPencil { bottom: 0; display: none; left: 0; min-width: 320px; padding: 0; position: fixed; right: 0; width: 100%; z-index: 1052 } #mb-defaultPencil .mb-wrapper { align-items: center; background: radial-gradient(circle, #851318 0, #450a0d 100%); display: flex; flex-direction: row; justify-content: space-between; max-height: 3rem; padding: 0 3rem 0 .5rem; width: 100% } #mb-defaultPencil .mb-cta { bottom: 0; height: 3rem; position: absolute; right: 0; transform: rotate(90deg); width: 3rem } #mb-defaultPencil .mb-cta a { height: 100%; width: 100% } .duration-wrapper-mb { font-size: 11px; line-height: 12px; text-transform: uppercase; } #defaultPencil .c-button-subscribe, #mb-defaultPencil .c-button-subscribe { background-color: #d50202; color: #fff; border-color: #c4c1bd; } #subscription-pencil-area .leaflogo { display: none; } /* cem3070 custom styles */ #subscription-pencil-area.experience.anony #defaultPencil, #subscription-pencil-area.experience.anony #mb-defaultPencil .mb-wrapper { background: url("https://www.theglobeandmail.com/files/cem/pencils/www/cache-long/pencil-anonybg.png"); border: 1px solid #e5e5e5; color: #191919; background-repeat: no-repeat; background-size: cover; } #subscription-pencil-area.experience .leaflogo { width: 50px; display: inline-block; height: 50px; margin-right: 10px; } #subscription-pencil-area.experience.anony #defaultPencil .price, #subscription-pencil-area.experience.anony #mb-defaultPencil .price { color: #da161f; } #subscription-pencil-area.experience.reg #defaultPencil, #subscription-pencil-area.experience.reg #mb-defaultPencil .mb-wrapper { background: url("https://www.theglobeandmail.com/files/cem/pencils/www/cache-long/pencil-regbg.jpg"); border: 1px solid #333; background-repeat: no-repeat; background-size: cover; } #subscription-pencil-area.experience.former #defaultPencil, #subscription-pencil-area.experience.former #mb-defaultPencil .mb-wrapper { background: url("https://www.theglobeandmail.com/files/cem/pencils/www/cache-long/pencil-formerbg.jpg"); border: 1px solid #ff2d35; background-repeat: no-repeat; background-size: cover; } #subscription-pencil-area.experience:not(.anony) .c-button-subscribe { background-color: rgb(243, 223, 88); color: #191919; } #subscription-pencil-area.experience:not(.anony) .c-button-subscribe img{ filter: invert(1); } #subscription-pencil-area.experience:not(.anony) #defaultPencil .valueProp .slide span, #subscription-pencil-area.experience:not(.anony) #mb-defaultPencil .mb-valueProp .slide span { display: none; } #subscription-pencil-area.experience.reg #defaultPencil .valueProp .slide:nth-child(1):after, #subscription-pencil-area.experience.reg #mb-defaultPencil .mb-valueProp .slide:nth-child(1):after { content: "Enjoy a richer Globe experience with full digital access"; } #subscription-pencil-area.experience.reg #defaultPencil .valueProp .slide:nth-child(2):after, #subscription-pencil-area.experience.reg #mb-defaultPencil .mb-valueProp .slide:nth-child(2):after { content: "Read all you want, save all year!"; } #subscription-pencil-area.experience.former #defaultPencil .valueProp .slide:nth-child(1):after, #subscription-pencil-area.experience.former #mb-defaultPencil .mb-valueProp .slide:nth-child(1):after { content: "Resubscribe to enjoy full digital access"; } #subscription-pencil-area.experience.former #defaultPencil .valueProp .slide:nth-child(2):after, #subscription-pencil-area.experience.former #mb-defaultPencil .mb-valueProp .slide:nth-child(2):after { content: "Gain insights you won’t find elsewhere"; } @media (max-width:320px) { #mb-defaultPencil { display: block } #mb-defaultPencil .mb-valueProp { display: block; width: 70% } #mb-defaultPencil .mb-valueProp div { font-size: .82rem; line-height: 1.3 } #mb-defaultPencil .price-wrapper { align-items: center; display: flex; flex-direction: column; margin: 5px 5px 0; padding-top: 5px; width: 30% } #mb-defaultPencil .normal-price { font-size: 1rem; margin-bottom: -5px } #mb-defaultPencil .price { font-size: 2rem } #mb-defaultPencil .per { display: none } } @media (min-width:320px) { #mb-defaultPencil { display: block } #mb-defaultPencil .mb-valueProp { display: block; width: 70% } #mb-defaultPencil .mb-valueProp div { font-size: .82rem; line-height: 1.3 } #mb-defaultPencil .price-wrapper { align-items: center; display: flex; flex-direction: column; margin: 5px 5px 0; padding-top: 5px; width: 25% } #mb-defaultPencil .normal-price { font-size: 1rem; margin-bottom: -5px } #mb-defaultPencil .price { font-size: 2rem } #mb-defaultPencil .per { display: none } } @media (max-width:480px) { #mb-defaultPencil .duration-wrapper-mb { display: block; width: 15%; } } @media (min-width:480px) { #mb-defaultPencil .mb-valueProp { width: 60% } #mb-defaultPencil .mb-valueProp div { font-size: .9rem } #mb-defaultPencil .price-wrapper { flex-direction: row; padding-top: 0; width: 67% } #mb-defaultPencil .normal-price { line-height: .7 } #mb-defaultPencil .normal-price-wrapper .per { font-size: .55rem } #mb-defaultPencil .price { font-size: 2.25rem } #mb-defaultPencil .per { display: inline; font-size: .7rem } .duration-wrapper-mb { display: none; } } @media (min-width:768px) { #mb-defaultPencil { display: none } #fixedpencil-subs { display: block } #defaultPencil .valueProp { font-size: 1rem; line-height: 1.3; margin-left: .65rem; width: 56% } #defaultPencil .valueProp div { letter-spacing: .13rem } #defaultPencil .price-wrapper { width: 70% } #defaultPencil .normal-price-wrapper { font-size: .85rem; margin-right: 5px } #defaultPencil .normal-price { font-size: 1.7rem } #defaultPencil .normal-price-wrapper .per { font-size: .9rem; margin-top: -5px } #defaultPencil .price { font-size: 3.25rem; line-height: 1; padding-top: 10px } #defaultPencil .per { font-size: 1rem } #defaultPencil .cta { align-items: center; display: flex; flex-direction: column; margin-top: 10px } #defaultPencil .cta-text { white-space: nowrap } #defaultPencil .cancel-text { font-size: .85rem } } @media (min-width:1024px) { #defaultPencil .valueProp { width: 50% } #defaultPencil .valueProp div { font-size: 1.1rem } #defaultPencil .valueProp span { display: block; font-size: 1rem; margin-top: 2px } #defaultPencil .price-wrapper { width: 40% } #defaultPencil .price { font-size: 3.5rem } } @media (min-width:1280px) { #defaultPencil .valueProp { width: 60% } .reg #defaultPencil .valueProp div{ font-size: 1.27rem; } #defaultPencil .valueProp div { font-size: 1.5rem; line-height: 1 } #defaultPencil .valueProp span { font-size: 1.25rem; margin-top: 5px } }