#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; } @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) { #defaultPencil .valueProp span, #mb-defaultPencil { display: none } #fixedpencil-subs { display: block } #defaultPencil .valueProp { font-size: 1.2rem; 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% } #defaultPencil .valueProp div { font-size: 1.5rem; line-height: 1 } #defaultPencil .valueProp span { font-size: 1.25rem; margin-top: 5px } }