html { scroll-behavior: smooth; } .cup .dim { color: #6f7171; } .cup .red { color: #ee0000; } .cup.dark, .cup .dark { color: #fff; } .cup.dark .dim, .cup .dark .dim { color: #a7a7a7; } .cup.dark:focus, .cup .dark:focus { outline-color: #fff; } .cup.light, .cup .light { color: #000; } .cup.light .dim, .cup .light .dim { color: #6f7171; } .cup { font-size: 15.9px; } .cup .small { font-size: 12px; line-height: normal; } .cup .large { font-size: 19.8px; line-height: normal; } .cup h1, .cup h2, .cup h3, .cup h4, .cup p { max-width: 960px; margin: 16px 0; } @media (max-width: 1280px) and (min-width: 760px) { .cup h1, .cup h2, .cup h3, .cup h4, .cup p { max-width: 75vw; } } .cup .mw100 { max-width: 1280px; } .cup .mw100 p { max-width: 100%; } .cup .mw75 { max-width: 960px; } .cup .mw50 { max-width: 640px; } .cup .mw25 { max-width: 320px; } .cup .crow .mw75, .cup .items .mw75, .cup .plate:not(.full) .mw75 { max-width: 75%; } .cup .crow .mw50, .cup .items .mw50, .cup .plate:not(.full) .mw50 { max-width: 50%; } @media (max-width: 720px) { .cup .crow .mw50, .cup .items .mw50, .cup .plate:not(.full) .mw50 { max-width: 320px; } } .cup .crow .mw25, .cup .items .mw25, .cup .plate:not(.full) .mw25 { max-width: 25%; } @media (max-width: 720px) { .cup .crow .mw25, .cup .items .mw25, .cup .plate:not(.full) .mw25 { max-width: 180px; } } .cup .mw12 { max-width: 1272px; } .cup .mw12 p { max-width: 100%; } .cup .mw11 { max-width: 92%; } .cup .mw11 p { max-width: 100%; } .cup .mw10 { max-width: 83.3%; } .cup .mw10 p { max-width: 100%; } .cup .mw9 { max-width: 75%; } .cup .mw8 { max-width: 848px; } .cup .mw7 { max-width: 742px; } .cup .mw6 { max-width: 636px; } .cup .mw5 { max-width: 530px; } .cup .mw4 { max-width: 424px; } .cup .mw3 { max-width: 318px; } .cup .mw2 { max-width: 212px; } .cup .mw1 { max-width: 106px; } @media (max-width: 760px) { .cup .mw11, .cup .mw10, .cup .mw9 { max-width: 92vw; } .cup .mw8, .cup .mw7, .cup .mw6 { max-width: 83.3vw; } .cup .mw5, .cup .mw4, .cup .mw3 { max-width: 75vw; } } .cup .crow .mw8, .cup .items .mw8, .cup .plate:not(.full) .mw8 { max-width: 66.6%; } .cup .crow .mw7, .cup .items .mw7, .cup .plate:not(.full) .mw7 { max-width: 58.3%; } .cup .crow .mw6, .cup .items .mw6, .cup .plate:not(.full) .mw6 { max-width: 50%; } .cup .crow .mw5, .cup .items .mw5, .cup .plate:not(.full) .mw5 { max-width: 41.6%; } .cup .crow .mw4, .cup .items .mw4, .cup .plate:not(.full) .mw4 { max-width: 33.3%; } .cup .crow .mw3, .cup .items .mw3, .cup .plate:not(.full) .mw3 { max-width: 25%; } @media (max-width: 760px) { .cup .crow .mw6, .cup .items .mw6, .cup .plate:not(.full) .mw6 { max-width: 380px; } .cup .crow .mw5, .cup .items .mw5, .cup .plate:not(.full) .mw5 { max-width: 380px; } .cup .crow .mw4, .cup .items .mw4, .cup .plate:not(.full) .mw4 { max-width: 253.33333333px; } .cup .crow .mw3, .cup .items .mw3, .cup .plate:not(.full) .mw3 { max-width: 190px; } } .cup h2 { font-size: 48px; line-height: 108%; } .cup h3 { font-size: 32px; line-height: 108%; } .cup h4 { font-size: 24px; line-height: 108%; } .cup p.disclaimer { font-size: 14px; } .cup h1 u, .cup h2 u, .cup h3 u { text-underline-offset: 8px; line-height: calc(100% + 12px); display: inline-block; padding-bottom: 12px; } .cup .headML { font-size: 144px; line-height: 95%; margin: 0 0 0.2em; } .cup .headXL { font-size: 128px; line-height: 95%; margin: 0 0 0.2em; } .cup .headL { font-size: 96px; line-height: 95%; margin: 0 0 0.2em; } .cup .headB { font-size: 80px; line-height: 95%; margin: 0 0 0.2em; } .cup .head { font-size: 64px; line-height: 100%; margin: 0 0 0.2em; } .cup .headM { font-size: 48px; line-height: 100%; margin: 0 0 0.2em; } .cup .headS { font-size: 32px; line-height: 100%; margin: 0 0 0.2em; } .cup .headXS { font-size: 24px; line-height: 100%; margin: 0 0 0.2em; } .cup .headXT { font-size: 20px; line-height: 100%; margin: 0 0 0.2em; } .cup .headXN { font-size: 15.9px; line-height: normal; } .cup p.bold { font-weight: bold; } .cup h1.normal, .cup h2.normal, .cup h3.normal, .cup h4.normal { font-weight: normal; } .cup h1.thin, .cup h2.thin, .cup h3.thin, .cup h4.thin, .cup p.thin, .cup .text.thin { font-weight: 300; } .cup .eyebrow { font-size: 24px; line-height: 100%; font-weight: bold; margin-bottom: 16px; } .cup .headL .eyebrow, .cup .headXL .eyebrow, .cup .headML .eyebrow { font-size: 32px; } .cup .headM .eyebrow { margin-bottom: 12px; } .cup .headS .eyebrow { font-size: 16px; margin-bottom: 12px; } .cup .headXS .eyebrow, .cup .headXT .eyebrow { font-size: 12px; margin-bottom: 6px; } .cup .bodyXL { font-size: 40px; } .cup .bodyLG { font-size: 32px; } .cup .bodyMD { font-size: 24px; } .cup .bodySL { font-size: 20px; } .cup .bodySD { font-size: 16px; } .cup .bodyXS { font-size: 12px; } @media (max-width: 1280px) and (min-width: 760px) { .cup h2 { font-size: 3.75vw; } .cup h3 { font-size: 2.5vw; } .cup h4 { font-size: 1.875vw; } .cup .headML { font-size: 11.25vw; } .cup .headXL { font-size: 10vw; } .cup .headL { font-size: 7.5vw; } .cup .headB { font-size: 6.26vw; } .cup .head { font-size: 5vw; } .cup .headM { font-size: 3.75vw; } .cup .bodyXL { font-size: 3.1vw; } .cup .headS, .cup .bodyLG { font-size: 2.5vw; } .cup .headXS, .cup .bodyMD { font-size: 1.88vw; } .cup .headXT, .cup .bodySL { font-size: 1.57vw; } .cup .eyebrow { font-size: 1.875vw; } .cup .headL .eyebrow, .cup .headXL .eyebrow, .cup .headML .eyebrow { font-size: 2.5vw; } .cup .headM .eyebrow, .cup .headS .eyebrow { font-size: 1.57vw; } .cup .headXS .eyebrow, .cup .headXT .eyebrow { font-size: 1.25vw; } } @media (max-width: 760px) { .cup h2 { font-size: 6.6vw; } .cup h3 { font-size: 4.4vw; } .cup h4 { font-size: 3.3vw; } .cup .headML { font-size: 20vw; } .cup .headXL { font-size: 17.7vw; } .cup .headL { font-size: 13.3vw; } .cup .headB { font-size: 11vw; } .cup .head { font-size: 8.88vw; } .cup .headM { font-size: 6.6vw; } .cup .bodyXL { font-size: 5vw; } .cup .headS, .cup .bodyLG { font-size: 4.4vw; } .cup .headXS, .cup .bodyMD { font-size: 3.3vw; } .cup .headXT, .cup .bodySL { font-size: 2.8vw; } .cup .eyebrow { font-size: 4.4vw; } .cup .headL .eyebrow, .cup .headXL .eyebrow, .cup .headML .eyebrow { font-size: 6.6vw; } .cup .headM .eyebrow, .cup .headS .eyebrow { font-size: 3vw; } .cup .headXS .eyebrow, .cup .headXT .eyebrow { font-size: 12px; } } @media (max-width: 480px) { .cup h3 { font-size: 20px; } .cup h4 { font-size: 16px; } .cup .headML { font-size: 25vw; } .cup .headXL { font-size: 21vw; } .cup .headL { font-size: 16.8vw; } .cup .headB { font-size: 12.6vw; } .cup .head { font-size: 10.5vw; } .cup .headM { font-size: 8.4vw; } .cup .bodyXL { font-size: 7vw; } .cup .headS, .cup .bodyLG { font-size: 6.3vw; } .cup .headXS, .cup .bodyMD { font-size: 20px; } .cup .headXT, .cup .bodySL { font-size: 16px; } .cup .headM .eyebrow, .cup .headS .eyebrow { font-size: 12px; } } .cup img { max-width: 100%; height: auto; } .cup .rounded:not(.thumb) > img { border-radius: 8px; } .cup.zoom { transform: scale(1); transition: transform .15s; transition-delay: .1s; } .cup.zoom:hover { transform: scale(1.04); } .cup { position: relative; flex-wrap: wrap; } .cup.contain { max-width: 1272px; margin: 0 auto; } .clap-blade .cup.contain.indent { padding-left: 0; padding-right: 0; } .cup.inset { max-width: 960px; } .fancybox-content .cup.contain { max-width: 992px; } .fancybox-content.narrow .cup.contain { max-width: 720px; } .cup.gapabove { margin-top: 64px; } .cup.gapbelow { margin-bottom: 64px; } .cup.padabove { padding-top: 64px; } .cup.padbelow { padding-bottom: 64px; } @media (max-width: 760px) { .cup.gapabove { margin-top: 32px; } .cup.gapbelow { margin-bottom: 32px; } .cup.padabove { padding-top: 32px; } .cup.padbelow { padding-bottom: 32px; } } .cup.disabled { background-image: repeating-linear-gradient(-30deg, transparent, transparent 18px, rgba(255, 255, 90, 0.25) 18px, rgba(240, 240, 90, 0.25) 24px); } .cup .align-right { text-align: right; } .cup .align-right p, .cup .align-right h1, .cup .align-right h2, .cup .align-right h3, .cup .align-right h4 { margin-left: auto; } .cup .align-right ul { text-align: left; float: right; } .cup .align-right ul::after { content: ""; display: block; clear: right; } .cup .align-right .button { margin-left: 12px; margin-right: 0; } .cup .align-center { text-align: center; margin-left: auto; margin-right: auto; } .cup .align-center p, .cup .align-center h1, .cup .align-center h2, .cup .align-center h3, .cup .align-center h4 { margin-left: auto; margin-right: auto; } .cup .align-center ul { text-align: left; margin-left: 50%; } .cup .align-indent { margin-left: 76px; margin-right: 76px; } @media (max-width: 1280px) { .cup .align-indent { margin-left: calc(7.5vw - 20px); margin-right: calc(7.5vw - 20px); } } .cup picture.icon.headXS ~ .align-indent { margin-left: 40px; } .cup picture.icon.headS ~ .align-indent { margin-left: 48px; } .cup picture.icon.headM ~ .align-indent { margin-left: 64px; } .cup picture.icon.head ~ .align-indent { margin-left: 80px; } .cup .middle, .cup .bottom, .cup .split { display: flex; flex-direction: column; } .cup .primary.middle > div, .cup .secondary.middle > div { margin: auto 0; width: 100%; } .cup .primary.bottom > div, .cup .secondary.bottom > div { margin-top: auto; width: 100%; } .cup .primary.split > div, .cup .secondary.split > div { display: flex; flex-direction: column; width: 100%; height: 100%; } .cup .split div.ctas { margin-top: auto; } .cup .primary > div.background, .cup .secondary > div.background { width: auto; } .cup .aspect { display: flex; flex-direction: row; flex-wrap: nowrap; width: 100%; } .cup .aspect::before { content: ""; width: 0px; margin-right: 0px; box-sizing: border-box; } .cup .aspect.athin::before { padding-top: 25%; } .cup .aspect.acinema::before { padding-top: 35%; } @media (min-width: 1272px) and (max-height: 660px) { .cup .aspect.acinema::before { min-height: 360px; padding-top: calc(100vh - 220px); } } .cup .aspect.alarge::before { padding-top: 45%; } @media (min-width: 1272px) and (max-height: 790px) { .cup .aspect.alarge::before { min-height: 480px; padding-top: calc(100vh - 220px); } } .cup .aspect.awide::before { padding-top: 56.25%; } .cup .aspect.atv::before { padding-top: 75%; } .cup .aspect.asquare::before { padding-top: 100%; } .cup .aspect.acard3::before { padding-top: 133%; } .cup .aspect.acard::before { padding-top: 160%; } .cup .aspect.aportrait::before { padding-top: 177.5%; } .cup .aspect.atall::before { padding-top: 200%; } .cup .aspect.afull::before { padding-top: calc(100vh - 150px); } .cup .aspect.afullp::before { padding-top: calc(100vh - 240px); } @media (min-height: 1280px) { .cup .aspect.afullp::before { padding-top: 1040px; } } .cup .aspect.askinny p { margin: 0; } .cup .aspect.askinny .button { margin-top: -3px; margin-bottom: -3px; padding-top: 6px; padding-bottom: 6px; } .cup .aspect.askinny div.primary, .cup .aspect.askinny div.secondary { padding: 12px 20px; } @media (max-width: 992px) { .cup .aspect.athin .plate > div.hasbg.empty { min-height: 25vw; } .cup .aspect.acinema .plate > div.hasbg.empty { min-height: 35vw; } .cup .aspect.alarge .plate > div.hasbg.empty { min-height: 45vw; } } .cup .aspect.ctop > .plate { margin-bottom: auto; } .cup .aspect.ccenter > .plate { margin: auto 16px; animation: heroup 0.6s ease-out; } .cup .aspect.cbottom > .plate { margin-top: auto; } .cup .aspect.cinset > .plate { margin: 40px; } .cup .aspect.afullp.ccenter > .plate { position: sticky; top: 42px; } .cup .aspect.ccenter .background { border-radius: 12px; backdrop-filter: blur(15px); } .cup .aspect.coverlap > .plate > div { margin: 64px 0; } .cup .aspect.coverlap .primary > div.background.hasimg { margin: -64px -106px -64px 0; height: auto; } .cup .aspect.coverlap .secondary > div.background.hasimg { margin: -64px 0 -64px -106px; height: auto; z-index: -2; } .cup .bled + .aspect.cinset > .plate { margin: 64px 20px; } @media (max-width: 1272px) { .cup .aspect.coverlap .primary > div.background.hasimg { margin-right: -8.3vw; } .cup .aspect.coverlap .secondary > div.background.hasimg { margin-left: -8.3vw; } } .cup .aspect.cslide .background { backdrop-filter: blur(15px); } @media (min-width: 992px) { .cup .aspect.cslide .primary.hasbg .background { animation: growingBg 0.75s ease-out; transform-origin: left center; } .cup .aspect.cslide .secondary.hasbg .background { animation: growingBg 0.75s ease-out; transform-origin: right center; } .cup .aspect.cslide div.hasbg .background + div { animation: textRight 0.75s ease-out; } } @media (max-width: 760px) { .cup .aspect.cslide div.hasbg { animation: textUp 0.5s ease-out; } } @media (max-width: 992px) { .cup.wide > .aspect.mnone::before { padding-top: 0; } .cup.wide > .aspect.mshort::before { padding-top: 50%; } .cup.wide > .aspect.msquare::before { padding-top: 100%; } .cup.wide > .aspect.mcard::before { padding-top: 125%; } .cup.wide > .aspect.mtall::before { padding-top: 125%; } .cup.wide > .aspect.mtall .primary:not(.hasbg), .cup.wide > .aspect.mtall .secondary:not(.hasbg) { flex-grow: 0; flex-basis: auto; } .cup.wide > .aspect.ccenter > .plate { margin: auto 16px 16px !important; } } @media (max-width: 760px) { .cup:not(.narrow) > .aspect.mnone::before { padding-top: 0; } .cup:not(.narrow) > .aspect.mshort::before { padding-top: 50%; } .cup:not(.narrow) > .aspect.msquare::before { padding-top: 100%; } .cup:not(.narrow) > .aspect.mcard::before { padding-top: 125%; } .cup:not(.narrow) > .aspect.mtall::before { padding-top: 144%; } .cup:not(.narrow) > .aspect.mtall .primary:not(.hasbg), .cup:not(.narrow) > .aspect.mtall .secondary:not(.hasbg) { flex-grow: 0; flex-basis: auto; } .cup:not(.narrow) > .aspect.ccenter > .plate { margin: auto 16px 16px !important; } .cup .aspect.coverlap > .plate > div { margin: 0 16px !important; } .cup .aspect.coverlap div > div.background.hasimg { margin: 0 -16px -64px !important; } .cup .aspect.coverlap .plate:not(.reverse) > div.secondary > div.background.hasimg, .cup .aspect.coverlap .plate.reverse > div.primary > div.background.hasimg { margin: -64px -16px 0 !important; } .cup .background.hasimg.mshort { aspect-ratio: 2; } .cup .background.hasimg.msquare { aspect-ratio: 1; } .cup .background.hasimg.mcard { aspect-ratio: 0.8; } .cup .background.mshort + .aspect::before, .cup .background.msquare + .aspect::before, .cup .background.mcard + .aspect::before { display: none; } .cup .background.ccenter + .aspect.ccenter > .plate { margin: auto 0 0 !important; } } @media (max-width: 640px) { .cup.narrow > .aspect.mshort::before { padding-top: 50%; } .cup.narrow > .aspect.msquare::before { padding-top: 100%; } .cup.narrow > .aspect.mcard::before { padding-top: 125%; } .cup.narrow > .aspect.mtall::before { padding-top: 144%; } .cup.narrow > .aspect.mtall .primary:not(.hasbg), .cup.narrow > .aspect.mtall .secondary:not(.hasbg) { flex-grow: 0; flex-basis: auto; } .cup.narrow > .aspect.ccenter > .plate { margin: auto 16px 16px !important; } } .cup.bTop { border-top: solid 1px #999; } .cup.bBot { border-bottom: solid 1px #999; } .cup.divided:not(.full) > div > .primary + .secondary::before, .cup.divided:not(.full) > div > div > .primary + .secondary::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; border-left-style: solid; border-width: 1px; border-color: #000; } @media (max-width: 992px) { .cup.divided.wide:not(.full) > div > .primary + .secondary::before, .cup.divided.wide:not(.full) > div > div > .primary + .secondary::before { bottom: auto; left: 20px; right: 20px; border-left: none; border-top-style: solid; } } @media (max-width: 760px) { .cup.divided:not(.full):not(.narrow):not(.never) > div > .primary + .secondary::before, .cup.divided:not(.full):not(.narrow):not(.never) > div > div > .primary + .secondary::before { bottom: auto; left: 20px; right: 20px; border-left: none; border-top-style: solid; } } @media (max-width: 640px) { .cup.divided.narrow:not(.full) > div > .primary + .secondary::before, .cup.divided.narrow:not(.full) > div > div > .primary + .secondary::before { bottom: auto; left: 16px; right: 16px; border-left: none; border-top-style: solid; } } .cup.divided.full > div > .primary + .secondary::before, .cup.divided.full > div > div > .primary + .secondary::before { content: ""; position: absolute; top: 0; left: 20px; right: 20px; border-top: solid 1px #000; } .cup.divided.gap:not(.full) > div > .primary + .secondary::before { left: -12px; } .cup.divided.dthick > div > .primary + .secondary::before, .cup.divided.dthick > div > div > .primary + .secondary::before { border-width: 4px; } .cup.divided.dlight > div > .primary + .secondary::before, .cup.divided.dlight > div > div > .primary + .secondary::before { border-color: #d8dada; } .cup div.primary, .cup div.secondary { position: relative; flex-grow: 1; } .cup div.primary.empty, .cup div.secondary.empty { padding: 0 !important; } .cup.indent div.primary, .cup.indent div.secondary, .cup div.primary.indent, .cup div.secondary.indent { box-sizing: border-box; padding: 42px 20px; } .cup.indent div.primary.hasbg, .cup.indent div.secondary.hasbg { padding: 42px 40px 40px; } @media (max-width: 1272px) { .cup.indent div.primary.hasbg, .cup.indent div.secondary.hasbg { padding: 3.2vw 3.125vw; } } .cup .fullcontent { position: relative; flex-basis: 100%; flex-grow: 1; padding: 24px 20px; } .cup .fullcontent.nav { padding-bottom: 0; } .cup .aspect.cinset div.primary.hasbg { padding-left: 40px; } @media (max-width: 760px) { .cup .fullcontent { padding: 24px 16px; } .cup.indent div.primary, .cup.indent div.secondary, .cup div.primary.indent, .cup div.secondary.indent { padding: 32px 16px; } .cup div.primary:not(.indent) > .align-left { padding-left: 16px; } } .cup.indent div.primary:not(.indent) > .align-left { padding-left: 0; } .cup .plate { display: flex; flex-wrap: wrap; flex-grow: 1; width: 100%; } .cup .plate.half div.primary, .cup .plate.half div.secondary { flex-basis: 50%; } .cup .plate.quart > div.primary, .cup .plate.quart3 > div.secondary { flex-basis: 25%; max-width: 25%; } .cup .plate.third > div.primary, .cup .plate.third2 > div.secondary { flex-basis: 33.3%; } .cup .plate.five > div.primary, .cup .plate.seven > div.secondary { flex-basis: 42%; } .cup .plate.seven > div.primary, .cup .plate.five > div.secondary { flex-basis: 58%; } .cup .plate.quart3 > div.primary, .cup .plate.quart > div.secondary { flex-grow: 3; flex-basis: 75%; } .cup .plate.third2 > div.primary, .cup .plate.third > div.secondary { flex-grow: 2; flex-basis: 66.6%; } .cup .plate.quart3.right { flex-direction: row-reverse; } @media (min-width: 640px) { .cup .plate.quart3 > .secondary.left + .primary, .cup .plate.quart > .secondary.right + .primary { max-width: 75%; } } .cup .plate.gap { justify-content: space-between; } .cup .plate.gap.half div.primary, .cup .plate.gap.half div.secondary { flex-basis: calc(50% - 12px); } .cup .plate.gap.quart > div.primary, .cup .plate.gap.quart3 > div.secondary { flex-basis: calc(25% - 12px); } .cup .plate.gap.third > div.primary, .cup .plate.gap.third2 > div.secondary { flex-basis: calc(33.3% - 12px); } .cup .plate.gap.five > div.primary, .cup .plate.gap.seven > div.secondary { flex-basis: calc(42% - 12px); } .cup .plate.gap.seven > div.primary, .cup .plate.gap.five > div.secondary { flex-basis: calc(58% - 12px); } .cup .plate.gap.quart3 > div.primary, .cup .plate.gap.quart > div.secondary { flex-basis: calc(75% - 12px); } .cup .plate.gap.third2 > div.primary, .cup .plate.gap.third > div.secondary { flex-basis: calc(66.6% - 12px); } .cup .plate.gap .primary + .secondary { margin-left: 24px; } .cup .plate.gaap { justify-content: space-between; } .cup .plate.gaap.half div.primary, .cup .plate.gaap.half div.secondary { flex-basis: calc(50% - 20px); } .cup .plate.gaap.quart > div.primary, .cup .plate.gaap.quart3 > div.secondary { flex-basis: calc(25% - 20px); } .cup .plate.gaap.third > div.primary, .cup .plate.gaap.third2 > div.secondary { flex-basis: calc(33.3% - 20px); } .cup .plate.gaap.five > div.primary, .cup .plate.gaap.seven > div.secondary { flex-basis: calc(42% - 20px); } .cup .plate.gaap.seven > div.primary, .cup .plate.gaap.five > div.secondary { flex-basis: calc(58% - 20px); } .cup .plate.gaap.quart3 > div.primary, .cup .plate.gaap.quart > div.secondary { flex-basis: calc(75% - 20px); } .cup .plate.gaap.third2 > div.primary, .cup .plate.gaap.third > div.secondary { flex-basis: calc(66.6% - 20px); } .cup .plate.gaap .primary + .secondary { margin-left: 40px; } @media (max-width: 1272px) { .cup .plate.gaap .primary + .secondary { margin-left: 3.125vw; } } .cup .plate.full { flex-direction: column; flex-wrap: nowrap; } .cup .plate.full > div.fullcontent { flex-grow: 0; flex-basis: auto; } .cup .plate.full > div.primary, .cup .plate.full > div.secondary { flex-basis: 50%; padding-top: 24px; padding-bottom: 24px; } .cup .plate.full.upper div.primary, .cup .plate.full.lower div.secondary { flex-basis: 66%; } .cup .plate.full.lower div.primary, .cup .plate.full.upper div.secondary { flex-basis: 33%; } .cup .plate.full div.primary:not(.hasbg):not(:last-child) { padding-bottom: 0; } .cup .plate.full .primary + div.secondary.hasbg { margin-left: 0; } .cup .plate.full .primary + div.secondary:not(.hasbg) { padding-top: 0; margin-left: 0; } .cup.divided .cup .plate.full .secondary:not(.hasbg):not(.empty) { padding-top: 12px; } @media (max-width: 992px) { .cup .plate.wide { flex-wrap: nowrap; } .cup .plate.half.wide { flex-direction: column; } .cup .plate.five.wide, .cup .plate.seven.wide { flex-direction: column; } .cup .plate.third.wide, .cup .plate.third2.wide { flex-direction: column; } .cup .plate.quart.wide, .cup .plate.quart3.wide { flex-direction: column; } .cup .plate.quart3.wide > .secondary.left + .primary, .cup .plate.quart.wide > .secondary.right + .primary { width: 100%; max-width: 100%; } .cup .plate.reverse.wide { flex-direction: column-reverse; } .cup .plate.reverse.wide .fullcontent { order: 1; } .cup .plate.wide > div.primary, .cup .plate.wide > div.secondary { max-width: unset; } .cup .plate.gap.wide > .primary + .secondary:not(.empty) { margin-left: 0; margin-top: 24px; } .cup .plate.gaap.wide > .primary + .secondary:not(.empty) { margin-left: 0; margin-top: 40px; } .cup .plate.gap.wide.reverse > .primary + .secondary { margin-bottom: 24px; margin-top: 0; } } @media (max-width: 760px) { .cup .plate:not(.narrow):not(.never) { flex-wrap: nowrap; } .cup .plate.half:not(.narrow):not(.never) { flex-direction: column; } .cup .plate.five:not(.narrow):not(.never), .cup .plate.seven:not(.narrow):not(.never) { flex-direction: column; } .cup .plate.third:not(.narrow):not(.never), .cup .plate.third2:not(.narrow):not(.never) { flex-direction: column; } .cup .plate.quart:not(.narrow):not(.never), .cup .plate.quart3:not(.narrow):not(.never) { flex-direction: column; } .cup .plate.quart3:not(.narrow) > .secondary.left + .primary, .cup .plate.quart:not(.narrow) > .secondary.right + .primary { width: 100%; max-width: 100%; } .cup .plate.reverse:not(.narrow):not(.never) { flex-direction: column-reverse; } .cup .plate.reverse:not(.narrow) .fullcontent { order: 1; } .cup .plate:not(.narrow) > div.primary, .cup .plate:not(.narrow) > div.secondary { max-width: unset; } .cup .plate.gap:not(.narrow) > .primary + .secondary:not(.empty) { margin-left: 0; margin-top: 24px; } .cup .plate.gaap:not(.narrow) > .primary + .secondary:not(.empty) { margin-left: 0; margin-top: 40px; } .cup .plate.gap:not(.narrow).reverse > .primary + .secondary { margin-bottom: 24px; margin-top: 0; } .cup .plate.full div.primary, .cup .plate.full div.secondary { padding-top: 16px; padding-bottom: 16px; } } @media (max-width: 640px) { .cup .plate.narrow { flex-wrap: nowrap; } .cup .plate.half.narrow { flex-direction: column; } .cup .plate.five.narrow, .cup .plate.seven.narrow { flex-direction: column; } .cup .plate.third.narrow, .cup .plate.third2.narrow { flex-direction: column; } .cup .plate.quart.narrow, .cup .plate.quart3.narrow { flex-direction: column; } .cup .plate.quart3.narrow > .secondary.left:not(.active) + .primary, .cup .plate.quart.narrow > .secondary.right:not(.active) + .primary { width: 100%; max-width: 100%; } .cup .plate.reverse.narrow { flex-direction: column-reverse; } .cup .plate.quart .primary img, .cup .plate.quart3 .secondary img { max-width: 320px; } .cup .plate.reverse.narrow .fullcontent { order: 1; } .cup .plate.narrow > div.primary, .cup .plate.narrow > div.secondary { max-width: unset; } .cup .plate.gap.narrow > .primary + .secondary:not(.empty) { margin-left: 0; margin-top: 24px; } .cup .plate.gaap.narrow > .primary + .secondary:not(.empty) { margin-left: 0; margin-top: 24px; } .cup .plate.gap.narrow.reverse > .primary + .secondary { margin-bottom: 24px; margin-top: 0; } } .cup .plate.disclosure:not(:hover) > a.full { display: none; } .cup .plate.disclosure > .primary picture { transition: filter 1s; } .cup .plate.disclosure > .primary { width: 100%; padding-bottom: 64px !important; } .cup .plate.disclosure > .secondary { top: 0; position: absolute !important; width: 100%; height: 100%; transition: opacity 0.5s; opacity: 0; padding: 24px 16px !important; } .cup .plate.disclosure > .secondary .text { transform: translateY(60px); } .cup .plate.disclosure > .secondary .copy { color: #fff; font-size: 28px; padding-top: 20px; } .cup .plate.disclosure > .secondary .copy p { width: 80%; } .cup .plate.disclosure > .secondary .ctas { opacity: 0; } .cup .plate.disclosure .background.rounded { border-radius: 0 0 12px 12px !important; } @media (max-width: 760px) { .cup .plate.disclosure > .primary { padding-bottom: 32px !important; } .cup .plate.disclosure > .primary picture.icon + h2, .cup .plate.disclosure > .primary picture.icon + h3, .cup .plate.disclosure > .primary picture.icon + h4 { display: inline-block; } } .cup .plate.disclosure > div.plus { background-color: #f6f6f6; width: 32px; height: 32px; position: absolute; bottom: 16px; right: 16px; border: 1px solid #fff; border-radius: 16px; transition: transform 0.5s ease; } .cup .plate.disclosure > div.plus.white { background-color: #fff; } .cup .plate.disclosure > div.plus:after { content: "+"; height: 30px; width: 30px; text-align: center; font-size: 24px; top: 0; left: 0; position: absolute; background: unset; } .cup .plate.disclosure .primary.dark ~ div.plus { background-color: #333; border-color: #333; color: #fff; } .cup .plate.disclosure.full .background.rounded { border-radius: 12px 12px 12px 12px !important; } @media (max-width: 760px) { .cup .disclosure h3 { bottom: 0; max-width: calc(100% - 80px); } .cup .plate.disclosure > h2, .cup .plate.disclosure > h3, .cup .plate.disclosure > h4 { height: 84px; margin-top: 12px; } } .cup .plate.disclosure:hover > .primary picture { filter: blur(10px); } .cup .plate.disclosure:hover > .primary > :not(picture) { opacity: 0; transition: opacity .5s; } .cup .plate.disclosure:hover > .secondary { z-index: 2; opacity: 1; min-height: 100px; } .cup .plate.disclosure:hover div.text { transform: translateY(0); transition: transform .5s; } .cup .plate.disclosure:hover div.plus:after { content: " "; } .cup .plate.disclosure:hover div.plus { background-color: unset !important; border: unset; } .cup .plate.disclosure:hover .secondary .ctas { display: block; opacity: 1; transition: opacity .5s; transition-delay: .3s; } .cup .plate.disclosure:hover .secondary > .background { opacity: 1; } @media (max-width: 760px) { .cup .plate.disclosure:hover > .primary { position: absolute; } .cup .plate.disclosure:hover > .secondary { position: relative !important; } } .cup .plate.disclosure:has(.primary > picture.icon):hover .secondary > .background { opacity: 1; } .cup .plate.disclosure:focus-within > .secondary { z-index: 2; opacity: 1; min-height: 100px; transition-delay: .5s; } .cup .plate.disclosure:focus-within div.text { transform: none; } .cup .plate.disclosure:focus-within .secondary .ctas { display: block; opacity: 1; transition: opacity .5s; transition-delay: .3s; } .cup .plate.disclosure.partial > .secondary { opacity: 1; height: 25%; bottom: 0; top: unset; z-index: 2; transition: height 0.5s; overflow: hidden; } .cup .plate.disclosure.partial > .primary { z-index: 1; } .cup .plate.disclosure.partial > .secondary .text { transform: none; } .cup .plate.disclosure.partial > .primary picture { transition: none; } .cup .plate.disclosure.partial .background.rounded { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; } .cup .plate.disclosure.partial:hover > .secondary { height: 50% !important; transition: height 0.5s; opacity: 1; backdrop-filter: none; } .cup .plate.disclosure.partial:hover > .primary picture { filter: none; } .cup .cbottom .plate.disclosure .primary .background.rounded { border-radius: 0 0 12px 12px !important; } .cup div:not(.cup):has(> div.plate.disclosure.partial:hover):not(.background) { backdrop-filter: blur(10px); transition: backdrop-filter 0.5s; } .cup div.secondary.left { flex-basis: 25%; } .cup div.secondary.right { flex-basis: 25%; order: 1; } .cup div.secondary.left + div.primary, .cup div.secondary.right + div.primary { flex-basis: 75%; } .cup div.text + div.text { margin-top: 24px; } .cup div.text:first-child > div.cakeContent:first-child { margin-top: -42px; } .cup div.text > div.cakeContent:last-child { margin-bottom: -42px; } .cup .bottom div.text p:last-child { margin-bottom: 0; } .cup.visible .plate { transition: opacity 0.5s ease-out; } .cup.xabove .plate { opacity: 0.75; } .aem-AuthorLayer-Edit .cup .aspect.afull, .aem-AuthorLayer-Preview .cup .aspect.afull { padding-top: 100%; } div.cakeContainer .crow > div.newpar { flex-basis: 100%; } .cup.targetDelay { animation: targetDelay 2.5s linear; } @keyframes targetDelay { 0%, 95% { opacity: 0; } 100% { opacity: 1; } } head.at-element-marker + body .cup.targetDelay { animation: none; } .cup .fullcontent p:first-child { margin-top: 0; } .cup fieldset.left { position: relative; padding-left: 25%; } .nobottompadding { padding-bottom: 0 !important; } @keyframes heroup { 0%, 30% { opacity: 0; transform: translateY(6vh); } 100% { opacity: 1; transform: translateY(0); } } @keyframes growingBg { 0% { transform: scaleX(0.66); } 100% { transform: scaleX(1); } } @keyframes textRight { 0% { transform: translateX(-160px); opacity: 0.5; } 100% { transform: translateX(0); opacity: 1; } } @keyframes textUp { 0% { transform: translateY(20vh); opacity: 0.5; } 100% { transform: translateY(0); opacity: 1; } } .cup[data-dynamic]:not(.dyn-match) { display: none; } .cup[data-dynamic='else']:first-child:not(.dyn-match) { display: block; } .cup[data-dynamic]:not(.dyn-match) img, .cup[data-dynamic]:not(.dyn-match) video { display: none; } .cup[data-dynamic]:not(.dyn-match) .background { background-image: none !important; } div.dynamic.dyndone { position: relative; } div.dynamic > fieldset legend { margin-bottom: -0.5em; } div.dynamic > fieldset fieldset { border: dashed 1px #999; } div.dynamic > ul.dynamic-menu { position: absolute; z-index: 5; right: 0; list-style-type: none; margin: 0; padding: 0; border: solid 1px #999; } ul.dynamic-menu::before { content: "\2B31"; } ul.dynamic-menu:not(:hover) > li { display: none; } ul.dynamic-menu > li { border-top: solid 1px #999; background: #fff; position: relative; padding: 2px 6px; font-size: 12px; cursor: pointer; } ul.dynamic-menu > li:first-child { margin-top: -24px; } ul.dynamic-menu > li.on { background-color: #eee; } .cup .background { position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; background-repeat: no-repeat; } .cup .background + div { position: relative; } .cup .background > div { overflow: hidden; position: absolute; top: 0; bottom: 0; width: 100%; } .cup .background video { width: 100%; min-height: 100%; position: relative; top: 50%; transform: translateY(-50%); } .cup .background video.contain { height: 100%; } .cup .background > div.reveal { background-color: #fff; left: 0; right: 0; } .cup .background.rounded:not(.bleed) { border-radius: 12px; } .cup .background.align-indent, .cup .background.flush { margin-left: 20px; margin-right: 20px; } .cup .background.align-indent + div, .cup .background.flush + div { margin-left: 20px; margin-right: 20px; width: calc(100% - 40px); } .cup .background.rounded.bleed + .plate.gap, .cup .background.rounded.bleed + .aspect > .plate.gap { padding-top: 24px; padding-bottom: 24px; } .cup .background.flip { transform: scaleX(-1); } @media (max-width: 760px) { .gapabove .cup .background.rounded + .plate.gap, .gapabove .cup .background.rounded + .aspect > .plate.gap { padding-top: 0; } .gapbelow .cup .background.rounded + .plate.gap, .gapbelow .cup .background.rounded + .aspect > .plate.gap { padding-bottom: 0; } .cup .background.rounded + .plate.reverse:not(.gap) > .secondary > .rounded, .cup .background.rounded + .aspect > .plate.reverse:not(.gap) > .secondary > .rounded { border-radius: 12px 12px 0 0; } } .cup .background.rounded + .plate:not(.gap) > .primary > .rounded, .cup .background.rounded + .aspect > .plate:not(.gap) > .primary > .rounded { border-radius: 12px 12px 0 0; } .cup .background.rounded + .plate:not(.gap) > .secondary > .rounded, .cup .background.rounded + .aspect > .plate:not(.gap) > .secondary > .rounded { border-radius: 0 0 12px 12px; } @media (min-width: 760px) { .cup .background.rounded + .plate:not(.gap):not(.full) > .primary > .rounded, .cup .background.rounded + .aspect > .plate:not(.gap):not(.full) > .primary > .rounded { border-radius: 12px 0 0 12px; } .cup .background.rounded + .plate:not(.gap):not(.full) > .secondary > .rounded, .cup .background.rounded + .aspect > .plate:not(.gap):not(.full) > .secondary > .rounded { border-radius: 0 12px 12px 0; } } .cup .background.border { border: solid 1px #ccc; } .cup .background.border.bfull { border-color: #000; } .cup .background.border.rounded { border-radius: 12px; } .cup .background.borderTop { border-top: solid 1px #000; } .cup .background.borderTop.bthick { border-width: 4px; } .cup .background.borderTop.bred { border-width: 4px; border-color: #ee0000; } .dark .cup .background.borderTop { border-top-color: #f6f6f6; } .light .cup .background.borderTop { border-top-color: #000; } .cup .background.borderTop.bthin { border-top-color: #d8dada; } .cup .background.border + .plate .background { margin: 1px; } .cup .background.borderTop + .plate .background { margin-top: 1px; } .cup .background.borderTop.bthick + .plate .background { margin-top: 4px; } .cup .background.fg:not(.end) { background-color: none; z-index: 5; } .cup .background.fg:not(.end) + div { opacity: 0; } .cup .background.fg + div { transition: opacity 0.3s linear; } .cup .cup div.aspect.coverlap div.background.hasimg { z-index: 1; } .cup .aspect.coverlap .middle div.background, .cup .aspect.coverlap .split div.background { z-index: 2; } .cup .aspect.coverlap .middle div.background + div, .cup .aspect.coverlap .split div.background + div { z-index: 2; } body:not(.complete) .cakeContent:nth-child(n+2) .cup:not(.visible) .background { background-image: none !important; } body:not(.complete) .cakeContainer:nth-child(n+2) .cup:not(.visible) .background { background-image: none !important; } .cup .parallax { overflow: hidden; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; perspective: 1px; perspective-origin: center 50%; } .cup .parallax .background { transform: translateZ(-1px) scale(2); top: -15%; bottom: -15%; margin: 0 auto; max-width: 1600px; } .cup .parallax + div { position: relative; } .cup .parallax.rounded { border-radius: 16px; } @media (min-width: 1280px) { .cup .background.bleed, .cup .parallax.bleed { left: calc(50% - 50vw); right: calc(50% - 50vw + 9px); max-width: 100vw; } .cup .primary > .background.bleed { left: calc(640px - 50vw); right: 0; } .cup .full > .primary > .background.bleed { right: calc(652px - 50vw); } .cup .secondary > .background.bleed { right: calc(640px - 50vw); left: 0; } .cup .full > .secondary > .background.bleed { left: calc(652px - 50vw); } .cup.full > .background.bleed ~ .primary > .background { left: calc(50% - 50vw); width: calc(100vw - 12px); } } @media (min-width: 1280px) and (min-width: 1272px) { .cup .background.fill::before { content: ""; background-color: inherit; position: absolute; z-index: -1; display: block; top: 0; bottom: 0; right: 100%; width: calc(50vw - 50%); } .cup .background.fill::after { content: ""; background-color: inherit; position: absolute; z-index: -1; display: block; top: 0; bottom: 0; left: 100%; width: calc(50vw - 50% - 6px); } } @media (min-width: 1920px) { .cup > .background.bleed { left: -320px; right: -320px; } .cup > .background.bleed::before { content: ""; background-color: inherit; position: absolute; z-index: -1; display: block; top: 0; bottom: 0; right: 100%; width: calc(50vw - 50%); } .cup > .background.bleed::after { content: ""; background-color: inherit; position: absolute; z-index: -1; display: block; top: 0; bottom: 0; left: 100%; width: calc(50vw - 50% - 6px); } .cup .parallax > .background.bleed { width: 1920px; } .cup .primary > .background.bleed { left: -320px; } .cup .primary > .background.bleed::before { width: calc(50vw - 960px); } .cup .secondary > .background.bleed { right: -320px; } .cup .full > .primary > .bakground.bleed { right: -320px; } .cup .full > .primary > .bakground.bleed::before { width: calc(50vw - 972px); } } .cup > .bled { left: -164px; right: calc(50% - 50vw + 9px); max-width: 1600px; } @media (min-width: 1612px) { .cup > .bled { right: -164px; } } @media (max-width: 1280px) and (min-width: 760px) { .cup > .bled { left: -12.5vw; right: 0; background-size: 125vw auto; } } @media (max-width: 760px) { .cup > .bled { left: 0; right: 0; } } .cup > .bled video { max-width: 1600px; width: 1600px; } @media (max-width: 1280px) { .cup > .bled video { width: 112.5vw; } } @media (max-width: 760px) { .cup > .bled video { width: 100%; } } @media (min-width: 1600px) { .cup > .bled.fill::before { content: ""; background-color: #f6f6f6; position: absolute; z-index: -1; display: block; top: 0; bottom: 0; right: 100%; width: calc(50vw - 50%); } .cup > .bled.fill::after { content: ""; background-color: #f6f6f6; position: absolute; z-index: -1; display: block; top: 0; bottom: 0; left: 100%; width: calc(50vw - 50% - 8px); } .cup > .bled.dark.fill::before, .cup > .bled.dark.fill::after { background-color: inherit; } } @media (min-width: 1280px) { .cup.full > .background.bled ~ .primary > .background { left: calc(50% - 50vw); width: calc(100vw - 12px); } } @media (min-width: 1600px) { .cup.full > .background.bled ~ .primary > .background { left: -164px; width: 1600px; } } .cup .plate:not(.full) > .primary > .bled { left: 0; right: 0; } @media (min-width: 1280px) { .cup .plate:not(.full) > .primary > .bled { left: calc(636px - 50vw); } } @media (min-width: 1600px) { .cup .plate:not(.full) > .primary > .bled { left: -164px; } } .cup .plate:not(.full) > .secondary > .bled { right: 0; left: 0; } @media (min-width: 1280px) { .cup .plate:not(.full) > .secondary > .bled { right: calc(636px - 50vw); } } @media (min-width: 1600px) { .cup .plate:not(.full) > .secondary > .bled { right: -164px; } } .cup .ccenter .bled { left: 0 !important; right: 0 !important; } @media (min-height: 640px) and (min-width: 760px) { .cup.sticky:not(.tabs) { position: sticky; top: 152px; z-index: 0; padding-bottom: 576px; margin-bottom: -576px; animation: heroscroll linear both; animation-timeline: scroll(); animation-range: 0 576px; } .cup.sticky:not(.tabs) > .background { bottom: 576px; transform: translateZ(-1px); } } @media (max-height: 780px) { .cup.sticky:not(.tabs) { animation-range: 0 720px; } } @media (max-width: 760px) { .cup.sticky:not(.tabs) { z-index: 0; } .cup.sticky:not(.tabs) > .background { position: sticky; z-index: -2; width: 100%; top: 0; height: 125vw; margin-bottom: -125vw; transform: translateZ(-2px); } .cup.sticky:not(.tabs):not(.visible) > .background { position: relative; } } @media (max-width: 640px) { .cup.sticky:not(.tabs).visible > .background { position: fixed !important; top: 112px; } .cup.sticky:not(.tabs) > .background::before { content: ""; position: absolute; bottom: 100%; left: 0; right: 0; height: 112px; background-color: inherit; } } @keyframes heroscroll { 0% { top: 152px; } 90%, 99% { top: -24px; filter: brightness(0.25); } 100% { top: 24px; filter: none; } } .left .cup.bleed > .background, .left .cup.bleed > .parallax { left: -12px; right: calc(67% - 50vw); } .cup a.more { position: absolute; text-align: center; bottom: 48px; left: 25%; width: 50%; } .cup a.more::before, .cup a.more::after { content: ""; position: absolute; left: 50%; bottom: -18px; margin: 0; width: 0px; height: 20px; border: solid 2px #000; border-radius: 4px; transform: rotateZ(45deg); } .cup a.more::after { margin-left: -12px; transform: rotateZ(-45deg); } .cup .dark + a.more, .cup .dark + div + a.more { color: #fff; } .cup .dark + a.more::before, .cup .dark + div + a.more::before, .cup .dark + a.more::after, .cup .dark + div + a.more::after { border-color: #fff; } .cup .disclaimer { padding: 0 0 6px; margin: 6px 24px 0; } .cup .fullcontent ul, .cup .fullcontent ol { margin-left: 18px; } .cup fieldset.tooltip { position: absolute; z-index: 4; bottom: 32px; right: 6px; text-indent: -2000px; width: 18px; height: 18px; padding: 0; margin: 0; line-height: 0; font-size: 0; border: solid 1px #000; border-radius: 18px; outline-offset: 2px; } .cup fieldset.tooltip > span { display: none; position: absolute; left: -32px; background: #fff; color: #000; font-size: 14px; bottom: calc(100% + 7px); width: 240px; border: solid 1px #333; padding: 12px; text-align: left; } .cup fieldset.tooltip.long > span { width: 320px; } .cup fieldset.tooltip.down > span { bottom: auto; top: calc(100% + 7px); } .cup fieldset.tooltip > span::after { content: ""; position: absolute; left: 12px; top: 100%; height: 16px; width: 64px; } .cup fieldset.tooltip.down > span::after { top: auto; bottom: 100%; } .cup fieldset.tooltip:not(.touched):hover > span, .cup fieldset.tooltip:not(.touched):focus > span, .cup fieldset.tooltip.open > span { display: block; } .cup fieldset.tooltip::before { content: "i"; font-size: 14px; position: absolute; right: -6px; top: -6px; text-indent: 0; width: 16px; line-height: 16px; text-align: center; padding: 6px; border: none; outline-offset: -6px; border-radius: 16px; } .cup fieldset.tooltip > * { display: none; } .cup fieldset.tooltip:not(.touched):hover, .cup fieldset.tooltip:not(.touched):focus, .cup fieldset.tooltip.open { z-index: 6; text-indent: 0; font-size: 14px; line-height: normal; } .cup fieldset.tooltip::after { content: ""; position: absolute; display: none; width: 9px; height: 9px; top: -12px; left: 3px; background: #fff; border-right: solid 1px #000; border-bottom: solid 1px #000; transform: rotateZ(45deg); } .cup fieldset.tooltip.down::after { top: auto; bottom: -12px; transform: rotateZ(-135deg); } .cup fieldset.tooltip:not(.touched):hover::after, .cup fieldset.tooltip:not(.touched):focus:after, .cup fieldset.tooltip.open::after { display: block; } .cup fieldset.tooltip > * { display: initial; } .cup fieldset.tooltip.scroll > span { max-height: 240px; overflow-y: scroll; } .cup .dark fieldset.tooltip, .cup .light .dark fieldset.tooltip { border-color: #fff; } .cup .light fieldset.tooltip { border-color: #000; } .cup .border .asset fieldset.tooltip { right: auto; left: 6px; } .cup .border .asset fieldset.tooltip::before { right: auto; left: 8px; } .cup .border .asset fieldset.tooltip:hover::after { right: auto; left: 12px; } .cup p > fieldset.tooltip { display: inline-block; position: relative; left: 6px; right: auto; top: 3px; bottom: auto; padding: 0 !important; } .cup p > fieldset.tooltip:not(.touched):hover, .cup p > fieldset.tooltip:not(.touched):focus, .cup p > fieldset.tooltip.open { background: inherit; color: inherit; } @media (max-width: 760px) { .cup p > fieldset.tooltip.open > span { position: fixed; z-index: 9; left: calc(50% - 120px) !important; bottom: auto; top: calc(50vh - 120px); border-color: #d8dada; border-radius: 8px; min-height: 60px; max-height: 85dvh; padding-bottom: 0; background: #fff; color: #000; } .cup p > fieldset.tooltip.open.long > span { top: 156px; left: calc(50% - 45vw) !important; width: 90vw; } .cup p > fieldset.tooltip .cup.sticky fieldset.tooltip.open.long > span { max-height: 480px; overflow: scroll; } .cup p > fieldset.tooltip.open > span::-webkit-scrollbar { display: none; } .cup p > fieldset.tooltip.open::after { display: none; } .cup p > fieldset.tooltip.open > span::after { content: "Close"; display: block; position: sticky; top: auto; bottom: 0; background: #fff; width: auto; padding: 6px; margin: 6px -12px 0; text-align: center; border-top: solid 1px #d8dada; border-radius: 0 0 8px 8px; pointer-events: auto; } .cup p > fieldset.tooltip.open.scroll > span::after { display: none; } .cup p > fieldset.tooltip.open::before { content: ""; display: block; background: rgba(128, 128, 128, 0.5); border: none; border-radius: 0; position: fixed; z-index: 9; width: auto; top: 0; right: 0; bottom: 0; left: 0; } .cup p > fieldset.tooltip.open.scroll::after { content: "+"; display: block; border: solid 1px #000; border-radius: 16px; width: 16px; height: 16px; text-align: center; line-height: 16px; position: fixed; z-index: 9; background: #fff; left: calc(50vw + 112px); top: calc(50% - 128px); } .cup p > fieldset.tooltip.open.long.scroll::after { top: 128px; left: calc(50vw + 142px); color: #000; } } .cup blockquote { font-size: 22px; line-height: 1em; font-weight: bold; } .cup blockquote::before { margin-right: 8px; content: "“"; font-size: 4em; top: 0.45em; position: relative; color: #d52b1e; line-height: 0em; } .cup blockquote::after { content: "”"; } @media (max-width: 760px) { .cup blockquote { font-size: 18px; } .cup blockquote::before { font-size: 3.5em; } } .cup .text ul, .cup .text ol { margin: 1em 0 1em 0px; padding-left: 0; } .cup .text ul li, .cup .text ol li { margin-left: 1em; } .cup .text ul ul, .cup .text ol ol, .cup .text ol ul, .cup .text ul ol { margin-left: 2em; } .cup .text:not(:first-child) { margin-top: 16px; } .cup .background + .text, .cup .background + .text > p:first-child { margin-top: 0; } .cup .text > p:first-child { margin-top: 0; } .cup.divided .text:first-child > p:first-child { margin-top: 16px; } .cup ul.checklist { list-style: none; display: flex; flex-wrap: wrap; max-width: 640px; } @media (max-width: 1272px) { .cup ul.checklist { max-width: 66vw; } } @media (max-width: 760px) { .cup ul.checklist { flex-direction: column; } } .cup ul.checklist > li { flex-basis: 50%; padding: 0; margin: 0 !important; } .cup ul.checklist > li::before { content: "\2713"; color: #00AC3E; margin-right: 12px; } .cup picture.feature + * { margin-top: 12px; } .cup picture.thumb { max-height: 186px; width: auto; } .cup picture.thumb > img { border-radius: 0; } .cup picture.thumb > svg { max-height: 186px; width: auto; } .cup picture.icon { max-width: 1em; max-height: 1em; float: left; margin: 0 16px 12px 0; border-radius: none !important; } .cup picture.icon.align-right { float: right; margin-right: 0; } .cup picture.icon.align-indent { margin-right: 16px; margin-bottom: 24px; } .cup picture.icon.align-left + .align-left { clear: left; } .cup picture.icon.rounded > img { border-radius: unset; } .cup picture.icon > svg { max-height: 1em; width: 1em; } .cup picture.icon.red > svg { fill: #ee0000; } .cup picture.align-center, .cup picture.align-right { display: block ; } .cup .dark .icon:not(.red) > svg { filter: invert(1); } .cup .dark .light .icon > svg { filter: none; } .cup audio { max-width: 100%; } .cup .colorHeat { background: linear-gradient(to right, #fbc90c 0%, #faba0f 21%, #fc8710 38.5%, #fd6f0f 57%, #f0110b 71.5%, #e30512 86%, #de061d 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; padding-bottom: 0.1em; margin-bottom: -0.1em; } .cup span.reveal, .cup span.reveal ~ span { animation: reveal ease-in both; animation-timeline: view(); animation-range: 10% 45%; } .cup span.reveal + span { animation-range: 20% 50%; } .cup .reveal + span + span { animation-range: 30% 55%; } @keyframes reveal { from { opacity: 0; } to { opacity: 1; } } .cup a[data-condition]:not(.dyn-match) { display: none; } .crow:not(.gap):not(.gaap) > .cup.pricing { margin-bottom: 24px; margin-top: 24px; } .cup.pricing .plate:not(.nobg)::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; box-shadow: #a7a7a7 0px 3px 8px; border-radius: 12px; opacity: 0; transition: opacity 0.3s ease-in; } .cup.pricing .plate:not(.nobg):hover:before { opacity: 1; } .cup.pricing .plate:focus-within { outline: solid 3px #0088CE77; outline-offset: -1px; border-radius: 12px; } .cup.pricing .plate div.fullcontent { flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; } .cup.pricing .plate div.fullcontent > * { flex-basis: auto !important; } .cup.pricing ul { list-style: none; margin: 12px 0 0 !important; padding-left: 0; } .cup.pricing li { padding: 6px 0; } .cup.pricing .background:not(.dark) { border: 1px solid #f7f7f7; } .cup.pricing .ribbon { position: relative; background-color: #000; border-radius: 12px 12px 0 0; color: #fff; font-size: 12px; font-family: NHGeTX, Arial, Sans-serif; min-height: 40px; max-width: none; margin: -32px 0 -8px; padding: 4px 24px 12px 48px; display: flex; flex-direction: column; justify-content: center; } .dark > .cup.pricing .ribbon { background-color: #333; } .cup.pricing .ribbon:not(.notag)::before { content: ""; width: 20px; height: 20px; position: absolute; left: 16px; background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMS42IDIxLjYiPjxwYXRoIGQ9Ik0xMi4zMSwxLjgsMS44LDEyLjMxLDkuMjksMTkuOCwxOS44LDkuMjlWMS44Wm02LjM2LDdMOS4yOSwxOC4yMWwtNS45LTUuOSw5LjM5LTkuMzhoNS44OVpNMTQuMTcsNi4zQTEuMTMsMS4xMywwLDEsMSwxNS4zLDcuNDMsMS4xMywxLjEzLDAsMCwxLDE0LjE3LDYuM1oiLz48L3N2Zz4=) no-repeat left top; filter: invert(1); } .cup.pricing .ribbon.light.red:not(.notag)::before { background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMS42IDIxLjYiPjxwYXRoIGQ9Ik0xMi4zMSwxLjgsMS44LDEyLjMxLDkuMjksMTkuOCwxOS44LDkuMjlWMS44Wm02LjM2LDdMOS4yOSwxOC4yMWwtNS45LTUuOSw5LjM5LTkuMzhoNS44OVpNMTQuMTcsNi4zQTEuMTMsMS4xMywwLDEsMSwxNS4zLDcuNDMsMS4xMywxLjEzLDAsMCwxLDE0LjE3LDYuM1oiIGZpbGw9IiNlMDAiLz48L3N2Zz4=); } @media (max-width: 760px) { .cup.pricing .ribbon { margin: 0 0 -32px; z-index: 5; padding-bottom: 4px; min-height: 32px; } .cup.pricing .ribbon ~ .plate { padding-top: 24px; } } .cup.pricing .ribbon p { margin: 0; } .cup.pricing .ribbon .tooltip { vertical-align: middle; margin-top: -4px; color: #000; font-family: inherit; } .cup.pricing .ribbon.red .tooltip { color: #ee0000; border-color: #ee0000; } .cup.pricing .ribbon.red { background-color: #ee0000; color: #fff; } .cup.pricing .ribbon.char { background-color: #1b1c1d; } .cup.pricing .ribbon.light { background-color: #fff; color: #000; } .cup.pricing .ribbon.light.red { color: #ee0000; } .cup.pricing .ribbon.shaded { background-color: #f6f6f6; color: #000; } .cup.pricing .ribbon.light::before { filter: none; } .cup.pricing .text > .ribbon { margin: -32px -20px -8px; top: -24px; font-size: 20px; font-family: inherit; } .cup.pricing .unplantitle { background: #fff; color: #000; margin: -24px -20px 0; padding: 24px 20px 48px; border-radius: 12px 12px 0 0; } @media (max-width: 760px) { .cup.pricing .unplantitle { margin: -24px -16px 0; } } .crow > .cup.pricing { margin-top: 48px; } @media (min-width: 760px) { .fullcontent + .primary > .columns > .crow > .cup.pricing { margin-top: 12px; } } .cup.pricing .eyebrow { font-size: 14px !important; margin-bottom: 12px; } .cup.pricing [class^="head"] { margin: 0; } .cup.pricing .text:first-of-type { min-height: 65px; } .cup.pricing .price { display: flex; flex-wrap: wrap; gap: 16px; } .cup.pricing .price .cost { font-weight: bold; } .cup.pricing .price .cost span { font-size: 15.9px; } .cup.pricing .price .fees { flex-grow: 1; flex-basis: 50%; font-size: 12px; line-height: normal; color: #6f7171; } .dark .cup.pricing .price .fees { color: #a7a7a7; } .cup.pricing .dark .price .fees { color: #a7a7a7; } .cup.pricing .ctas { padding: 16px 0; } .cup.pricing .ctas:not(:first-child) { margin: auto 0 0; } .cup.pricing .ctas:last-child { padding-bottom: 0; } .cup.pricing .button { margin: 0; } .cup.pricing .plan-head { margin: 12px 0; } .cup.pricing .dynamic-menu { display: none; } @media (max-width: 760px) { .fullcontent + .cup.pricing { position: sticky; top: 32px; z-index: 5; } } .cup.pricing .lines { display: none; position: relative; z-index: 1; top: -24px; margin: 0 auto -12px; border: solid 1px #d8dada; border-radius: 24px; font-weight: bold; } .fullcontent + .cup.pricing .lines { display: inline-block; } .fullcontent + .cup.pricing .lines::before { xcontent: "Compare plans with"; font-weight: normal; position: absolute; right: 100%; margin: 6px 12px 6px 0; white-space: nowrap; } @media (max-width: 992px) { .fullcontent + .cup.pricing .lines::before { bottom: 100%; right: 0; } } .fullcontent.light + .cup.pricing .lines { background: #fff; } .fullcontent.dark + .cup.pricing .lines { background: #000; color: #fff; } .cup.pricing .lines:hover:after { content: ""; position: absolute; z-index: -1; top: -2px; bottom: -2px; left: -2px; right: -2px; border: solid 2px #d8dada; border-color: inherit; border-radius: 24px; } .fullcontent > .cup.pricing .lines { display: inline-block; top: 0; margin-top: 12px; } .cup.pricing .lines a { display: inline-block; padding: 6px 12px; vertical-align: middle; cursor: pointer; border-radius: 24px; outline-color: #0088CE77; outline-offset: -4px; } @media (min-width: 760px) { .cup.pricing .lines a { font-size: 19.8px; } } .cup.pricing .lines a.down::before { content: "\FF0D"; } .cup.pricing .lines a.up::before { content: "\FF0B"; } .cup.pricing .lines a.end { color: #d8dada; } .cup.pricing .lines span { text-align: center; display: inline-block; min-width: 56px; } @media (max-width: 760px) { .cup.pricing .lines span { font-size: 14px; } } .cup.pricing input.showDetails { appearance: none; position: relative; z-index: 4; height: 24px; margin: -4px 0 -20px; width: 100%; border: none; background: none; outline-color: #0088CE77; } .cup.pricing input.showDetails ~ label { display: block; text-align: center; position: relative; font-size: 14px; font-weight: bold; margin-right: 12px; cursor: pointer; } .cup.pricing input.showDetails ~ label::after { content: ""; width: 12px; height: 12px; position: absolute; top: 4px; margin-left: 6px; transition: transform 0.3s linear; background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiBzdHJva2U9IiMwMDAiIGZpbGw9Im5vbmUiIGQ9Ik0yMiw3TDEyLDE3TDIsNyI+PC9wYXRoPjwvc3ZnPg==) no-repeat center center / 12px; } .cup.pricing .dark > input.showDetails ~ label::after { filter: invert(1); } .cup.pricing input.showDetails ~ label + label::after { transform: rotateZ(-180deg); } .cup.pricing input.showDetails:not(:checked) + label + label { display: none; } .cup.pricing input.showDetails:checked + label { display: none; } .cup.pricing input.showDetails ~ label + div > div:first-child { margin: 12px 0; padding-top: 16px; } .cup.pricing input.showDetails ~ div { display: flex; flex-direction: column; flex-grow: 1; max-height: 590px; opacity: 1; animation: openPlan 0.75s ease-in; } .cup.pricing input.showDetails:not(:checked) ~ div { display: none; opacity: 0; max-height: 1px; border: none; animation: openPlan 0.75s reverse; } @keyframes openPlan { 0% { display: none; opacity: 0; max-height: 1px; } 50% { display: flex; max-height: 480px; opacity: 0; } 100% { display: flex; max-height: 480px; opacity: 1; } } .cup.pricing .accordion { display: block; padding: 4px 20px 6px 0; margin: -5px 0; text-align: left; position: relative; z-index: 4; text-decoration: none; outline-color: #0088CE77; } .cup.pricing .accordion::after { width: 12px; height: 12px; content: ""; background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiBzdHJva2U9IiMwMDAiIGZpbGw9Im5vbmUiIGQ9Ik0yMiw3TDEyLDE3TDIsNyI+PC9wYXRoPjwvc3ZnPg==) no-repeat center center / 12px; transition: transform 0.3s linear; position: absolute; right: 0; top: 8px; } .cup.pricing .accordion-item { color: #747676; display: none; font-size: 14px; margin: 5px 0; } .dark .cup.pricing .accordion-item { color: #a7a7a7; } .cup.pricing .dark .accordion-item { color: #a7a7a7; } .cup.pricing .dark .accordion::after { filter: invert(1); } .cup.pricing .dark .light .accordion::after { filter: none; } .cup.pricing .open .accordion::after { transform: rotateZ(-180deg); } .cup.pricing .open .accordion-item { display: block !important; } .cup.pricing .perks { margin-top: auto; padding: 0; position: relative; } .cup.pricing .perks a:not(.accordion) { text-decoration: underline; } .cup.pricing .perks li { display: block; } .cup.pricing .perks img { width: auto; height: 20px; margin-right: 10px; } .cup.pricing .perks.dark img { filter: invert(1); } .cup.pricing .perks .background { background-color: #f6f6f6; border-radius: 0 0 12px 12px; margin: 0 -20px -24px; border-top: solid 1px #d8dada; } @media (max-width: 760px) { .cup.pricing .perks .background { margin: 0 -16px -24px; } } .cup.pricing .perks.dark .background { border: none; } .cup.pricing .perks .background ~ p, .cup.pricing .perks .background ~ ul { position: relative; } .cup.pricing .perks + div { margin: 0 -20px -24px; padding: 16px 24px 24px; border-radius: 0 0 12px 12px; } @media (max-width: 760px) { .cup.pricing .perks + div { margin: 0 -16px -24px; } } .cup.pricing .perks + div .ctas { margin-top: 0; } .clap-blade .cup.pricing p { font-size: inherit; line-height: inherit; margin: 9px 0 0; } @media (min-width: 760px) and (max-width: 992px) { .cup.pricing .ribbon { font-size: 12px; } } .cup .ctas:not(:first-child) { margin-top: 24px; } .cup .ctas:empty { margin: 0; } .cup .ctas.fill { display: flex; flex-wrap: wrap; } .cup .ctas.fill.stack { flex-direction: column; } .cup .ctas.fill > br { display: none; } .cup .ctas.fill a { flex-grow: 1; } .cup .button, .cup button { display: inline-block; position: relative; z-index: 4; width: auto; white-space: nowrap; min-width: 96px; padding: 10px 24px; margin: 6px 24px 6px 0; outline-offset: 3px; outline-color: #0088CE77; border: solid 1px #000; border-radius: 24px; text-decoration: none; text-align: center; cursor: pointer; font-weight: bold; } .cup .button.primary, .cup button.primary { color: #fff; background-color: #000; } .cup .button.secondary, .cup button.secondary { color: #000; background-color: #fff; } .cup .button.trans, .cup button.trans { color: #000; background-color: transparent; text-shadow: 0 0 2px rgba(255, 255, 255, 0.5); } .cup .button:hover:before, .cup button:hover:before, .cup .button:focus:before, .cup button:focus:before { content: ""; position: absolute; top: -2px; bottom: -2px; left: -2px; right: -2px; border: solid 2px #000; border-color: inherit; border-radius: 24px; } .cup .button:focus, .cup button:focus { outline-style: solid; } .cup .button:active, .cup button:active, .cup .button:active:before, .cup button:active:before { border-color: #6f7171; } .cup .button.primary:active, .cup button.primary:active { background: #6f7171; } .cup .button.secondary:active, .cup button.secondary:active, .cup .button.trans:active, .cup button.trans:active { color: #6f7171; } .cup .button:last-child, .cup button:last-child { margin-right: 6px; } .cup .button.small, .cup button.small { padding: 8px 16px; } @media (max-width: 1280px) { .cup .button, .cup button { padding-left: 1.875vw; padding-right: 1.875vw; } } @media (max-width: 760px) { .cup .button, .cup button { padding: 10px 16px; } .cup .button.small, .cup button.small { padding: 8px 12px; } } .cup .button .align-center > .button, .cup button .align-center > .button { margin: 6px 12px; } .cup > a[name] { scroll-margin-top: 42px; } .cup p a, .cup li a, .cup a.text { text-decoration: underline; } .cup a { color: inherit; } .cup a.link { text-decoration: none; font-weight: bold; margin-right: 32px; } .cup a.link::after { content: ""; display: inline-block; vertical-align: baseline; margin: 0 -18px 0 6px; width: 12px; height: 12px; background: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDE0IDE0Ij48cG9seWdvbiBwb2ludHM9IjEuNywxMy43IDAuMywxMi4zIDUuNiw3IDAuMywxLjcgMS43LDAuMyA4LjQsNyIvPjwvc3ZnPgo=) no-repeat center center / 12px; } .cup a.link:active { color: #6f7171; } .cup a.link:active:after { opacity: 0.5; } .cup a.link:last-child { margin-right: 18px; } .cup a.link.arrow { display: block; position: relative; font-weight: normal; padding: 4px 32px 4px 6px; margin: 2px -6px 0; border-radius: 6px; } .cup a.link.arrow::after { position: absolute; right: 26px; top: 6px; width: 16px; height: 16px; background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiB2aWV3Qm94PSIwIDAgMTggMTgiPjxwb2x5Z29uIHBvaW50cz0iOC43LDAuMiA3LjksMSAxNS40LDguNCAwLDguNCAwLDkuNiAxNS40LDkuNiA3LjksMTcgOC43LDE3LjggMTcuNSw5Ii8+PC9zdmc+) center / 16px; } .cup a.link.arrow:hover { backdrop-filter: brightness(1.1); } .cup a.link.arrow + br { display: none; } .cup .align-center > a.link { margin-left: 6px; } .cup a.link.back::before { content: ""; display: inline-block; vertical-align: baseline; width: 12px; height: 12px; background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDE0IDE0Ij48cG9seWdvbiBwb2ludHM9IjcuMywxMy43IDguNywxMi4zIDMuNCw3IDguNywxLjcgNy4zLDAuMyAwLjYsNyIvPjwvc3ZnPg==) no-repeat center center / 12px; } .cup a.link.back::after { display: none; } .cup a.link[href^="tel:"]::after { display: none; } .cup a.full { text-indent: -2000px; margin: 0; text-decoration: none; } .cup a.full::before { content: ""; position: absolute; z-index: 2; top: 0; bottom: 0; left: 0; right: 0; } .cup a.full:focus::before { outline: solid 1px #0088CE77; outline-offset: -1px; } .cup a.full.arrow::after { content: ""; position: absolute; bottom: 24px; right: 24px; width: 16px; height: 16px; background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiB2aWV3Qm94PSIwIDAgMTggMTgiPjxwb2x5Z29uIHBvaW50cz0iOC43LDAuMiA3LjksMSAxNS40LDguNCAwLDguNCAwLDkuNiAxNS40LDkuNiA3LjksMTcgOC43LDE3LjggMTcuNSw5Ii8+PC9zdmc+) center / 16px; } @media (max-width: 760px) { .cup a.full.arrow::after { right: 16px; bottom: 16px; } } .cup a.pipe { padding-left: 12px; display: block; } .cup a.pipe::before { content: ""; border-left: solid 2px #ee0000; height: 1em; margin-left: -12px; margin-right: 10px; } .cup a.ribbon { display: block; position: absolute; z-index: 2; padding: 4px 24px; width: 100%; font-size: 12px; background: #000; color: #fff; outline-color: #fff; outline-offset: -4px; } .cup .rounded + a.ribbon, .cup .rounded + .aspect > a.ribbon { border-radius: 12px 12px 0 0; } @media (min-width: 760px) { .cup .crow:not(.gap) a.ribbon { left: 24px; width: calc(100% - 48px); padding: 4px 12px; } } .cup a.backarrow::before { content: "\2190"; display: inline-block; border: solid 1px #000; border-radius: 24px; font-size: 12px; width: 30px; line-height: 30px; text-decoration: none; text-align: center; margin-right: 12px; } .cup a.nextarrow::after { content: "\2192"; display: inline-block; border: solid 1px #000; border-radius: 24px; font-size: 12px; width: 30px; line-height: 30px; text-decoration: none; text-align: center; margin-left: 12px; } .cup.dark .button, .cup .dark .button, .dark .cup .button, .cup.dark button, .cup .dark button, .dark .cup button { border-color: #fff; outline-color: #0088CE; } .cup.dark .button.primary, .cup .dark .button.primary, .dark .cup .button.primary, .cup.dark button.primary, .cup .dark button.primary, .dark .cup button.primary { color: #000; background-color: #fff; } .cup.dark .button.secondary, .cup .dark .button.secondary, .dark .cup .button.secondary, .cup.dark button.secondary, .cup .dark button.secondary, .dark .cup button.secondary { color: #fff; background-color: #000; } .cup.dark .button.trans, .cup .dark .button.trans, .dark .cup .button.trans, .cup.dark button.trans, .cup .dark button.trans, .dark .cup button.trans { color: #fff; text-shadow: 0 0 2px rgba(0, 0, 0, 0.5); } .cup.dark a.link::after, .cup .dark a.link::after, .dark .cup a.link::after { filter: invert(1); } .cup.dark a.backarrow::before, .cup .dark a.backarrow::before, .dark .cup a.backarrow::before, .cup.dark a.nextarrow::after, .cup .dark a.nextarrow::after, .dark .cup a.nextarrow::after { border-color: #fff; } .cup.dark a.full.arrow::after, .cup .dark a.full.arrow::after, .dark .cup a.full.arrow::after, .cup.dark + a.full.arrow::after, .cup .dark + a.full.arrow::after, .dark .cup + a.full.arrow::after, .cup.dark + div.aspect > a.full.arrow::after, .cup .dark + div.aspect > a.full.arrow::after, .dark .cup + div.aspect > a.full.arrow::after { filter: invert(1); } .dark .cup.light .button, .dark .cup .light .button, .dark .cup.light button, .dark .cup .light button { border-color: #000; } .dark .cup.light .button.primary, .dark .cup .light .button.primary, .dark .cup.light button.primary, .dark .cup .light button.primary { color: #fff; background-color: #000; } .dark .cup.light .button.secondary, .dark .cup .light .button.secondary, .dark .cup.light button.secondary, .dark .cup .light button.secondary { color: #000; background-color: #fff; } .dark .cup.light .button.trans, .dark .cup .light .button.trans, .dark .cup.light button.trans, .dark .cup .light button.trans { color: #000; text-shadow: none; } .dark .cup.light a.link::after, .dark .cup .light a.link::after { filter: none; } .dark .cup.light a.backarrow::before, .dark .cup .light a.backarrow::before, .dark .cup.light a.nextarrow::after, .dark .cup .light a.nextarrow::after { border-color: #000; } .dark .cup.light a.full.arrow::after, .dark .cup .light a.full.arrow::after { filter: none; } .cup video { max-width: 100%; display: block; } .cup .thumb, .cup .thumb > img { max-height: 180px; width: auto; margin-bottom: 12px; } .cup .video { width: 100%; position: relative; } .cup .video > iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .cup .video::before { content: ""; padding-top: 56.25%; float: left; width: 1px; margin-left: -1px; } .cup .video::after { content: ""; clear: left; display: block; } .cup a.poster { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer; background: no-repeat center center / cover; } .cup video.rounded, .cup a.poster.rounded { border-radius: 12px; } .cup .poster > svg { position: absolute; width: 64px; height: 64px; left: calc(50% - 32px); top: calc(50% - 32px); } .cup .poster > svg.black { color: #000; fill: #000; } .cup .poster > svg.white { color: #fff; fill: #fff; } .cup .background.bleed video.cover { max-width: 1600px; } @media (min-width: 760px) { .cup .background.bleed video.cover { width: 125vw; left: -12.5vw; } } @media (min-width: 1280px) { .cup .background.bleed video.cover { width: 1600px; left: calc(50% - 800px); } } .cup .background.bled video.cover { max-width: 1600px; } @media (min-width: 760px) { .cup .background.bled video.cover { width: 112.5vw; left: 0; } } @media (min-width: 1280px) { .cup .background.bled video.cover { width: 1600px; left: 0; } } .audioPlayer { position: fixed; z-index: 9; bottom: 0; left: 0; border-top: solid 1px #000; border-right: solid 1px #000; border-radius: 0 8px 0 0; background: #fff; padding: 12px 12px 12px 204px; min-height: 144px; max-width: 640px; } .audioPlayer .thumb { display: block; position: absolute; left: 12px; width: 180px; height: 120px; border-radius: 8px; background-repeat: no-repeat; background-position: center top; background-size: cover; } .audioPlayer h4 { font-size: 20px; margin-right: 24px; } .audioPlayer audio { margin-top: 12px; min-width: 100%; } .audioPlayer a.close { position: absolute; top: 8px; right: 12px; text-align: center; width: 20px; line-height: 12px; padding: 4px; background: #fff; border-radius: 12px; cursor: pointer; } .audioPlayer a.close:hover { background: #eee; } .audioPlayer a.close::before { content: "\2613"; } @media (max-width: 760px) { .audioPlayer { width: 100%; padding-left: 104px; min-height: 116px; } .audioPlayer .thumb { width: 80px; height: 92px; } .audioPlayer h4 { font-size: 16px; } } #stitslide { display: none; width: 300px; border: 2px solid #000; position: fixed; bottom: 0; left: 0; margin-left: -300px; padding: 0; background-color: #000; border-top-right-radius: 12px; box-shadow: 2px -2px 20px #999999; z-index: 100; } #stitslide div#c { padding: 20px; } #stitslide.dark * { color: #fff; outline-color: #ccc; } #stitslide .button { display: block; position: relative; width: auto; min-width: 96px; padding: 10px 24px; margin: 6px 12px 6px 0; outline-offset: 3px; border: solid 1px #000; border-radius: 24px; font-size: 17px; text-align: center; text-decoration: none; font-weight: bold; font-family: NHGeDS, "NeueHaasGroteskDisplayBold", NeueHaasGrotesk, Arial, Sans-Serif; color: #000; background-color: #fff; border-color: #fff; } #stitslide .close { float: right; display: inline-block; padding: 2px 2px; width: 36px; height: 36px; } #stitslide .close svg { display: block; height: 100%; overflow: visible; position: relative; width: 36px; fill: #fff; } .alert-ribbon { display: none; background: #ffbc3d; color: #fff; font-size: 12px; line-height: 12px; padding: 0; height: 75px; margin: 0; max-width: none; order: 0; } header .alert-ribbon div { margin: 0 auto; width: 100%; max-width: 1280px; padding: 0 24px; display: table; } header .alert-ribbon div div { display: table-cell; vertical-align: middle; text-align: left; height: 75px; width: 100%; max-width: 1780px; transform: translateY(0); animation: promo 1.25s ease-out; font-size: 16px; line-height: 21px; color: #000; } header .alert-ribbon div div p { float: left; margin-right: 15px; } header .alert-ribbon div div p.excl { font-size: 24px; } header .alert-ribbon button.alert-closebutton { border: 0px; overflow: visible; padding: 0px; position: absolute; right: 0px; top: 0px; height: 48px; width: 48px; z-index: 999; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; } header .alert-ribbon svg.closebutton-x { background-color: transparent; display: inline-block; height: 1.5rem; width: 1.5rem; min-height: 1.5rem; min-width: 1.5rem; outline: none; pointer-events: none; } .cup.accordion.accordion > div.fullcontent { display: block; } .cup.accordion .accordion > label { display: block; position: relative; cursor: pointer; padding: 12px 48px 12px 20px; margin: 0; font-weight: bold; } .cup.accordion .accordion > label::before { content: ""; position: absolute; display: block; top: 0; left: 20px; right: 20px; border-top: solid 1px #d8dada; } .cup.accordion .accordion > label.headS, .cup.accordion .accordion > label.headM { padding-top: 0.5em; padding-bottom: 0.5em; } .cup.accordion .accordion > label.pad { padding-top: 32px; padding-bottom: 32px; } .cup.accordion .accordion > label > div { font-weight: normal; margin: 0.12em 0 0; } .cup.accordion .accordion > label.pad + div { margin-top: -24px; } .cup.accordion .accordion > label + div { display: none; } .cup.accordion .accordion > label:focus + div { display: block; } .cup.accordion .accordion > label:focus:not(:active) { background: rgba(64, 64, 64, 0.1); } .cup.accordion .accordion > label::after { position: absolute; right: 24px; width: 24px; font-weight: normal; font-size: 32px; text-align: center; top: calc(50% - 12px); } .cup.accordion .accordion > label .thin:not(.headS) { font-weight: normal; } .cup.accordion .accordion > label h1, .cup.accordion .accordion > label h2, .cup.accordion .accordion > label h3, .cup.accordion .accordion > label h4 { margin: 0; } .cup.accordion .accordion::after { content: ""; display: block; margin: 0 20px; border-bottom: solid 1px #d8dada; } @media (max-width: 760px) { .cup.accordion .accordion::after { margin: 0; } .cup.accordion .accordion > label { padding-left: 16px; } .cup.accordion .accordion > label::before { left: 0; right: 0; } } .cup.accordion .accordion > input { display: none; } .cup.accordion .accordion > input + label::after { content: "+"; } .cup.accordion .accordion > input:checked + label::after { content: "\2013"; } .cup.accordion .accordion > input:checked + label + div { display: block; } .crow:not(.c1) .cup.accordion .accordion > input:first-child + label { padding-top: 24px; } .crow:not(.c1) .cup.accordion .accordion > input:first-child + label::before { border: none; } .cup.accordion .accordion > div:focus-within { display: block; } .cup.accordion .accordion.caret > input + label::after { content: ""; height: 1.2em; font-size: inherit; transition: transform 0.3s linear; transform-origin: center 42%; background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiBzdHJva2U9IiMwMDAiIGZpbGw9Im5vbmUiIGQ9Ik0yMiw3TDEyLDE3TDIsNyI+PC9wYXRoPjwvc3ZnPg==) no-repeat center center / 0.6em; } .cup.accordion .accordion.caret > input:checked + label::after { transform: rotateZ(-180deg); } .cup.accordion .accordion.caret > input + label.headM::after { height: 1em; } .cup.accordion .accordion a + .plate .fullcontent { padding-top: 0; } .cup.accordion .accordion a + .plate .fullcontent:last-child { padding-bottom: 0; } .cup.accordion .dark .accordion.caret > input + label::after { filter: invert(1); } .cup.accordion .dark .accordion > label { outline-color: #fff; } .cup.accordion .dark .accordion > label:focus:not(:active) { background: rgba(192, 192, 192, 0.2); } .cup.accordion.divided:not(.dlight) .accordion > input + label::before { border-top-color: #000; } .cup.accordion.divided:not(.dlight) .primary > .accordion::after { border-color: #000; } .cup.accordion.divided.dlight .accordion > input:first-child + label::before { border-top-color: #000; } .cup.accordion.divided.dthick .accordion > input:first-child + label::before { border-top-width: 4px; } .cup.accordion.divided.dthick .accordion > input + label.headM::before { border-top-width: 4px; } .cup.accordion.divided.dthick .primary > .accordion::after { border-bottom-width: 4px; } .cup.accordion.divided .primary.dark .accordion::after, .cup.accordion.divided .dark .accordion > input + label::before { border-color: #fff; } .cup.anchornav { height: auto; z-index: 1; } .cup.anchornav.full { padding: 0; } .cup.anchornav .anchor.full { display: block; } .primary-nav-hidden .cup.anchornav > .secondary { top: 0px; } .cup.anchornav .nav > ul { list-style: none; margin: 0; padding: 0; position: relative; } .cup.anchornav .nav > ul > li > a { display: block; padding: 4px 6px; font-weight: bold; color: #6f7171; text-decoration: none; } .cup.anchornav .nav > ul > li.visible:not(.partial) > a { color: inherit; } .cup.anchornav .nav > ul > li.visible:not(.partial) + li.visible > a { color: #6f7171; } .cup.anchornav .nav > ul > li > a:hover { color: inherit !important; } .cup.anchornav .nav.buttons { border: none; } .cup.anchornav .nav.buttons > ul > li { border-radius: 8px; transition: background-color 0.2s; } .cup.anchornav .nav.buttons > ul > li.xvisible:not(.partial) { background-color: #d8dada; } .cup.anchornav .nav.buttons > ul > li.visible:not(.partial) { background-color: #f7f7f7; font-weight: bold; } .cup.anchornav .nav.buttons > ul > li.visible:not(.partial) ~ li { background: none !important; font-weight: inherit; } .cup.anchornav .nav.buttons > ul > li a { font-weight: inherit; padding: 10px 16px; border-radius: 8px; background: transparent; outline-offset: -1px; transition: background-color 0.2s; } .cup.anchornav .nav.buttons > ul > li a:hover { background: #d8dada; } .cup.anchornav .nav.buttons.grey > ul > li.visible:not(.partial) { background-color: #fff; } .cup.anchornav .nav.buttons.dark > ul > li.visible:not(.partial) { background-color: #36383a7f; } .cup.anchornav > .plate > .secondary .nav { margin: 0; padding: 12px 0; position: sticky; top: 0; } .cup.anchornav > .plate > .secondary .nav > ul::before { content: ""; position: absolute; z-index: -1; top: 0; border-left: solid 1px #d8dada; bottom: 0; transform-origin: left top; } .cup.anchornav > .plate > .secondary.visible .nav > ul::before { animation: scaleTo linear 1s; } .cup.anchornav > .plate > .secondary .nav:not(.buttons) > ul > li { border-left: solid 4px transparent; padding: 2px 12px; } .cup.anchornav > .plate > .secondary .nav:not(.buttons) > ul > li.visible:not(.partial) { border-left-color: #ee0000; } .cup.anchornav > .plate > .secondary .nav:not(.buttons) > ul > li.visible:not(.partial) + .visible { border-left-color: transparent; } @media (max-width: 640px) { .cup.anchornav > .plate > .secondary { position: sticky; z-index: 4; top: 0; padding: 0px 12px !important; background: #fff; } body.hasSecondaryNav .cup.anchornav > .plate > .secondary { top: 32px; } .cup.anchornav > .plate > .secondary + .primary { z-index: 3; } .cup.anchornav > .plate > .secondary .nav { height: 54px; margin: 0 -16px; z-index: 6; background-color: inherit; } .cup.anchornav > .plate > .secondary .nav::before { content: "Jump to: "; position: absolute; z-index: 1; display: block; padding: 6px 16px; } .cup.anchornav > .plate > .secondary .nav > ul::after { content: ""; position: absolute; top: 8px; right: 12px; width: 12px; height: 12px; background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiBzdHJva2U9IiMwMDAiIGZpbGw9Im5vbmUiIGQ9Ik0yMiw3TDEyLDE3TDIsNyI+PC9wYXRoPjwvc3ZnPg==) no-repeat center center / 12px; } .cup.anchornav > .plate > .secondary .nav.open > ul:after { transform: rotateZ(-180deg); } .cup.anchornav > .plate > .secondary .nav > ul { position: absolute; top: 12px; left: 0; right: 0; background-color: inherit; max-height: 42px; overflow: hidden; border-bottom: solid 1px #ccc; padding-right: 32px; padding-bottom: 12px; } .cup.anchornav > .plate > .secondary .nav > ul::before { border: none; } .cup.anchornav > .plate > .secondary .nav:not(.open) > ul::before { z-index: 1; width: 100%; } .cup.anchornav > .plate > .secondary .nav > ul > li { border-left-color: transparent !important; margin-left: 64px; } .cup.anchornav > .plate > .secondary .nav > ul > li a { font-weight: normal; color: inherit !important; } .cup.anchornav > .plate > .secondary .nav.open > ul { max-height: 156px; overflow-y: scroll; transition: max-height 0.5s; } .cup.anchornav > .plate > .secondary .nav:not(.open) > ul > li { position: absolute; bottom: 100%; } .cup.anchornav > .plate > .secondary .nav:not(.open) > ul > li.visible { position: relative; } .cup.anchornav > .plate > .secondary .nav:not(.open) > ul > li.below:last-child { position: relative; } } .cup.anchornav > .fullcontent.nav { position: sticky; top: -18px; background: #fff; z-index: 5; transition: top 0.35s ease-in-out; } .hasSecondaryNav .cup.anchornav > .fullcontent.nav { top: 168px; } .hasSecondaryNav.primary-nav-hidden .cup.anchornav > .fullcontent.nav { top: 48px; z-index: 899; } .hasSecondaryNav:not(.primary-nav-hidden) .ribbon + #main .cup.anchornav > .fullcontent.nav { top: 210px; } @media (min-width: 760px) { header.cta ~ div .cup.anchornav > .fullcontent.nav { top: 24px; } header.fixcta ~ div .cup.anchornav > .fullcontent.nav { top: 24px; } } @media (min-width: 760px) and (max-height: 820px) { header.cta ~ div .cup.anchornav > .fullcontent.nav { top: 46px; } } .cup.anchornav > .fullcontent.nav > .nav { z-index: 4; margin: 0 -24px 0; padding-left: 12px; border-bottom: solid 1px #ccc; } @media (max-width: 760px) { .cup.anchornav > .fullcontent.nav > .nav { margin: 0 -16px 0; } } .cup.anchornav > .fullcontent.nav > .nav:first-child { margin-top: -24px; } .cup.anchornav > .fullcontent.nav > .nav > ul { margin-bottom: -1px; display: flex; white-space: nowrap; overflow-x: scroll; scroll-snap-type: x; scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; } .cup.anchornav > .fullcontent.nav > .nav > ul::-webkit-scrollbar { display: none; width: 0 !important; height: 0 !important; } .cup.anchornav > .fullcontent.nav > .nav > ul > li { border-bottom: solid 2px transparent; padding: 2px 6px; } .cup.anchornav > .fullcontent.nav > .nav > ul > li.visible:not(.partial) { border-bottom-color: #ee0000; } .cup.anchornav > .fullcontent.nav > .nav > ul > li.visible:not(.partial) + .visible { border-bottom-color: transparent; } @media (min-width: 992px) { .cup.anchornav > .fullcontent.nav > .nav > ul { animation: anchorIn 0.5s ease-in; } } .cup.anchornav > .fullcontent.nav > .nav.align-center > ul { justify-content: center; } .cup.anchornav > .fullcontent.nav > .nav.buttons { border: none; margin: 0 -12px; } .cup.anchornav > .fullcontent.nav > .nav.buttons[style] { padding-top: 6px; padding-bottom: 6px; } .cup.anchornav > .fullcontent.nav > .nav.buttons > ul > li { border: none; padding: 0; margin-right: 6px; scroll-snap-align: start; } .cup.anchornav > .fullcontent.nav > .nav.buttons::before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: -6px; background: #fff; animation: anchorStick linear both; animation-timeline: scroll(); animation-range: 680px 720px; } @media (min-width: 1272px) { .cup.anchornav > .fullcontent.nav > .nav.buttons::before { left: calc(50% - 50vw); right: calc(50% - 50vw + 9px); } } .cup.anchornav > .fullcontent.nav > .nav.buttons.grey::before { background-color: inherit; } .cup.anchornav > .fullcontent.nav > .nav.buttons.dark::before { background-color: #000; } .cup.anchornav > .fullcontent.nav + .primary a[name] { scroll-margin-top: 84px; } body:not(.primary-nav-hidden) .cup.anchornav > .fullcontent.nav + .primary a[name] { scroll-margin-top: 208px; } @media (max-width: 1020px) { .hasSecondaryNav .cup.anchornav > .fullcontent.nav { top: 118px; } .hasSecondaryNav.primary-nav-hidden .cup.anchornav > .fullcontent.nav { top: 48px; } } @media (min-width: 760px) and (max-height: 820px) { .cup.anchornav > .fullcontent.nav { padding-top: 0; top: 0; } } .cup.anchornav > .background + .fullcontent.nav { background-color: unset; } .cup.anchornav > .background.rounded + .fullcontent.nav > div { border-radius: 12px; } @media (min-width: 1272px) { .cup.anchornav > .background.bleed + .fullcontent .nav:not(.buttons)::before { content: ""; position: absolute; z-index: -1; background: inherit; border-bottom: solid 1px #ccc; left: calc(50% - 50vw); top: 0; bottom: 0; width: calc(100vw - 12px); } } .cup.anchornav.select .nav { height: 54px; z-index: 6; background-color: inherit; } .cup.anchornav.select .nav > ul { position: absolute; background-color: inherit; height: 36px; overflow: hidden; border: solid 1px #ccc; padding-right: 32px; margin: 2px 24px; } .cup.anchornav.select .nav > ul:hover { height: auto; } .cup.anchornav .nav > ul > li:hover { border-color: #ee0000; } .cup.anchornav .nav.dark li { color: #ccc; } .cup.anchornav .nav.dark > ul > li:hover { border-color: #fff; color: #fff; } @keyframes scaleTo { 0% { transform: scale(0); } 100% { transform: scale(1); } } @keyframes anchorIn { 0%, 20% { transform: translateY(32px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } @keyframes anchorStick { 0% { border-bottom: solid 1px transparent; } 100% { border-bottom: solid 1px #d8dada; bottom: -1px; } } @media screen and (max-width: 760px) { .cup.anchornav > .secondary { top: 80px; } .cup.anchornav.left > .secondary { padding-bottom: 42px; } .cup.anchornav.left > .secondary .nav { height: 42px; position: absolute; width: auto; padding: 0; z-index: 6; overflow: hidden; border: solid 1px #ccc; } .cup.anchornav.left > .secondary .nav:hover { height: auto; } } .cup.pagenav .secondary > .pnav { position: sticky; top: 60px; margin-top: -42px; background: #fff; } .cup.pagenav .pnav > input { display: none; } .cup.pagenav .pnav ul { list-style: none; margin: 0; padding: 0; } .cup.pagenav .pnav ul li { padding: 0; position: relative; } .cup.pagenav .pnav ul a { text-decoration: none; display: block; line-height: normal; border-left: solid 4px transparent; padding: 9px 8px; } .cup.pagenav .pnav ul li.current > a { border-left-color: #ee0000; } .cup.pagenav .pnav ul li.l0 > a { font-weight: bold; } .cup.pagenav .pnav ul li + li.l0 > a { border-top: solid 1px #D8DADA; } .cup.pagenav .pnav ul li.l1 > a { border-top: solid 1px #D8DADA; border-left-color: transparent; position: relative; padding-right: 16px; font-weight: bold; } .cup.pagenav .pnav ul li.l1 > ul::before { content: "+"; font-weight: bold; position: absolute; z-index: -1; right: 0; top: 9px; } .cup.pagenav .pnav ul li.l1 > input:checked + ul::before { content: "-"; } .cup.pagenav .pnav ul li.l1.current > a { border-left-color: #ee0000; } .cup.pagenav .pnav ul li.l1.current > a::after { content: ""; } .cup.pagenav .pnav ul li.l2 > a { padding: 4px 8px; margin: 6px 0; } .cup.pagenav .pnav ul li.l3 > a { padding: 4px 8px; margin: 0 0 0 12px; } .cup.pagenav .pnav ul li.l2.active li.l3:not(.current) > a { border-left-color: #D8DADA; } .cup.pagenav .pnav ul li.la { margin-left: 12px; } .cup.pagenav .pnav ul li.la > a { border-left-color: #D8DADA; } .cup.pagenav .pnav ul li.la.visible > a { border-left-color: #000; } .cup.pagenav .pnav ul li.la.visible + .visible > a { border-color: #D8DADA; } .cup.pagenav .secondary > .pnav > ul { margin-left: -12px; } .cup.pagenav .pnav li > input { appearance: none; border: none; background: none; cursor: pointer; position: absolute; z-index: 1; opacity: 0; top: 2px; height: 36px; width: 24px; right: -6px; } .cup.pagenav .pnav li.active > input { z-index: 1; } .cup.pagenav .pnav li > input:not(:checked) + ul > li:not(.current) { display: none; } .cup.pagenav .fullcontent > .pnav > ul { display: flex; } .cup.pagenav .fullcontent > .pnav > ul li > a { border-left: none; } .cup.pagenav .fullcontent > .pnav > ul li:not(.current) > a { border: none; } .cup.pagenav .fullcontent > .pnav > ul li.l1 > ul::before { display: none; } .cup.pagenav .fullcontent > .pnav > ul li.l1 > ul { display: none; position: absolute; z-index: 2; width: 100%; min-width: 240px; background: #fff; border: solid 1px #D8DADA; } .cup.pagenav .fullcontent > .pnav > ul li.l1:hover > a { border-bottom: solid 2px #ee0000; } .cup.pagenav .fullcontent > .pnav > ul li.l1:hover > ul, .cup.pagenav .fullcontent > .pnav > ul li.l1:hover > ul li { display: block; } .cup.pagenav .fullcontent > .pnav > ul li > input:not(:checked) { display: none; } @media (max-width: 992px) and (min-width: 640px) { .cup.pagenav .pnav a { font-size: 14px; } .cup.pagenav .secondary > .pnav > ul { margin-left: -18px; } } @media (max-width: 640px) { .cup.pagenav .pnav > input { display: block; appearance: none; position: absolute; z-index: 2; border: none; background: none; left: 0; right: 0; top: 0; width: 100%; height: 40px; opacity: 0; cursor: pointer; } .cup.pagenav .pnav > input:checked { left: auto; width: 40px; } .cup.pagenav .pnav > ul { border-top: solid 1px #D8DADA; border-bottom: solid 1px #000; position: relative; } .cup.pagenav .secondary > .pnav > ul { margin-left: 0; } .cup.pagenav .pnav > input:not(:checked) + ul li.active > ul { display: block; } .cup.pagenav .pnav > input:not(:checked) + ul li.current > a { border-left: solid 1px #D8DADA; border-right: solid 1px #D8DADA; } .cup.pagenav .pnav > input:not(:checked) + ul li:not(.current) > a { display: none; } .cup.pagenav .pnav > input:not(:checked) + ul li.l1 > ul::before { display: none; } .cup.pagenav .pnav > ul::after { content: ""; position: absolute; right: 0; top: 9px; width: 24px; height: 1.2em; background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiBzdHJva2U9IiMwMDAiIGZpbGw9Im5vbmUiIGQ9Ik0yMiw3TDEyLDE3TDIsNyI+PC9wYXRoPjwvc3ZnPg==) no-repeat center center / 0.6em; } .cup.pagenav .pnav > input:checked + ul { margin: 0 -12px; padding: 0 12px; } .cup.pagenav .pnav > input:checked + ul::after { transform: scaleY(-1); right: 12px; } .cup.pagenav .pnav li > input:not(:checked) { left: 0; width: auto; } } .cup.columns .crow { display: flex; flex-wrap: wrap; } .cup.carousel .crow { display: flex; flex-wrap: wrap; } .cup .secondary.empty + .primary > .crow.gap { padding-top: 24px; } .cup.columns > .plate > .secondary { padding-top: 24px; padding-bottom: 24px; } @media (max-width: 760px) { .cup .secondary.empty + .primary > .crow.gap { padding-top: 16px; } .cup.columns > .plate > .secondary { padding-top: 16px; padding-bottom: 16px; } } .cup .crow:not(.gap):not(.gaap) { flex-grow: 1; } .cup .crow > div { margin: 0; flex-basis: 100%; } .cup .crow > div.border { margin-left: -1px; } .cup .crow > div.cup > .plate, .cup .crow > div.double > div, .cup .crow > div.double > div > .aspect, .cup .crow > div.cup > .aspect { height: 100%; } .cup .crow > div.gapabove { margin-top: 24px; } .cup .crow > div.gapbelow { margin-bottom: 24px; } .cup .crow > div.dynamic.dyndone { display: flex; flex-direction: row; } .cup .crow > div.dynamic.dyndone > div.cup { margin: 0; flex-grow: 1; } .cup .crow > div.dynamic .aspect, .cup .crow > div.dynamic > div.dyn-match > .plate { height: 100%; } .cup .crow.c2 > div { flex-basis: 50%; } .cup .crow.c3 > div { flex-basis: 33.3%; } .cup .crow.c4 > div { flex-basis: 25%; } .cup .crow.c5 > div { flex-basis: 20%; } .cup .crow.c6 > div { flex-basis: 16.6%; } .cup .crow.c3 > div.double { flex-basis: 66.6%; } .cup .crow.c4 > div.double { flex-basis: 50%; } .cup .crow.c4 > div.triple { flex-basis: 75%; } .cup .crow.c5 > div.double { flex-basis: 40%; } .cup .crow.c6 > div.double { flex-basis: 33.2%; } .cup .crow .full > .fullcontent > div { flex-basis: 50%; } .cup .crow .cup.indent div.primary, .cup .crow .cup.indent div.secondary { padding-top: 24px; padding-bottom: 24px; } .cup .crow:not(.c1) div.primary.hasbg, .cup .crow:not(.c1) div.secondary.hasbg { padding-left: 20px; padding-right: 20px; } .cup .crow.gap { justify-content: space-between; padding: 0 20px 24px; } @media (max-width: 760px) { .cup .crow.gap { padding: 0 16px 16px; } } @media (min-width: 760px) { .cup .crow.gap.nobg { padding-left: 0; padding-right: 0; } } .cup .crow.gap.c2 > div { flex-basis: calc(50% - 12px); } .cup .crow.gap.c3 > div { flex-basis: calc(33.3% - 16px); } .cup .crow.gap.c4 > div { flex-basis: calc(25% - 18px); } .cup .crow.gap.c5 > div { flex-basis: calc(20% - 19.2px); } .cup .crow.gap.c6 > div { flex-basis: calc(16.6% - 20px); } .cup .crow.gap.c3 > div.double { flex-basis: calc(66.6% - 8px); } .cup .crow.gap.c4 > div.double { flex-basis: calc(50% - 12px); } .cup .crow.gap.c4 > div.triple { flex-basis: calc(75% - 6px); } .cup .crow.gap.c5 > div.double { flex-basis: calc(40% - 14.4px); } .cup .crow.gap.c6 > div.double { flex-basis: calc(33.2% - 16px); } .cup .crow.gap.c1 > div:nth-of-type(n+2), .cup .crow.gap.c2 > div:nth-of-type(n+3), .cup .crow.gap.c3 > div:nth-of-type(n+4), .cup .crow.gap.c4 > div:nth-of-type(n+5), .cup .crow.gap.c5 > div:nth-of-type(n+6), .cup .crow.gap.c6 > div:nth-of-type(n+7) { margin-top: 24px; } @media (max-width: 1272px) { .cup .crow.gap { justify-content: space-evenly; } } .cup .crow.gap .crow.gap, .cup .crow.gap .crow.gaap { padding: 0; } .cup .crow.gaap { justify-content: space-between; padding: 0 20px 64px; } @media (max-width: 760px) { .cup .crow.gaap { padding: 0 16px 24px; } } @media (min-width: 760px) { .cup .crow.gaap.nobg { padding-left: 0; padding-right: 0; } } @media (max-width: 1272px) { .cup .crow.gaap.nobg { justify-content: space-evenly; } } .cup .crow.gaap.c2 > div { flex-basis: calc(50% - 20px); } .cup .crow.gaap.c3 > div { flex-basis: calc(33.3% - 26.6px); } .cup .crow.gaap.c4 > div { flex-basis: calc(25% - 30px); } .cup .crow.gaap.c5 > div { flex-basis: calc(20% - 32px); } .cup .crow.gaap.c6 > div { flex-basis: calc(16.6% - 33.3px); } .cup .crow.gaap.c3 > div.double { flex-basis: calc(66.6% - 13.3px); } .cup .crow.gaap.c4 > div.double { flex-basis: calc(50% - 20px); } .cup .crow.gaap.c4 > div.triple { flex-basis: calc(75% - 10px); } .cup .crow.gaap.c5 > div.double { flex-basis: calc(40% - 32px); } .cup .crow.gaap.c6 > div.double { flex-basis: calc(33.2% - 33.3px); } @media (max-width: 1272px) { .cup .crow.gaap.c2 > div { flex-basis: calc(50% - 1.56vw); } .cup .crow.gaap.c3 > div { flex-basis: calc(33.3% - 2vw); } .cup .crow.gaap.c4 > div { flex-basis: calc(25% - 2.34vw); } .cup .crow.gaap.c5 > div { flex-basis: calc(20% - 2.5vw); } .cup .crow.gaap.c6 > div { flex-basis: calc(16.6% - 2.6vw); } } .cup .crow.gaap.c1 > div:nth-of-type(n+2), .cup .crow.gaap.c2 > div:nth-of-type(n+3), .cup .crow.gaap.c3 > div:nth-of-type(n+4), .cup .crow.gaap.c4 > div:nth-of-type(n+5), .cup .crow.gaap.c5 > div:nth-of-type(n+6), .cup .crow.gaap.c6 > div:nth-of-type(n+7) { margin-top: 40px; } .cup .crow.gaap .crow.gap, .cup .crow.gaap .crow.gaap { padding: 0; } .cup .crow > div.visible { transition: opacity 0.33s ease-out; } .cup .crow > div.visible:nth-of-type(n+2) { transition-delay: 0.15s; } .cup .crow > div.visible:nth-of-type(n+3) { transition-delay: 0.3s; } .cup .crow > div.visible:nth-of-type(n+4) { transition-delay: 0.45s; } .cup .crow > div.xabove { opacity: 0.66; } .cup.columns.divided .crow > div:nth-child(n+2):before { content: ""; display: block; position: absolute; top: 0; bottom: 0; border-left: solid 1px #000; } .cup.columns.divided.gap .crow > div:nth-child(n+2):before { left: -12px; } .cup.columns.divided .crow.c2 > div:nth-child(2n+1):before, .cup.columns.divided .crow.c3 > div:nth-child(3n+1):before, .cup.columns.divided .crow.c4 > div:nth-child(4n+1):before, .cup.columns.divided .crow.c5 > div:nth-child(5n+1):before, .cup.columns.divided .crow.c6 > div:nth-child(6n+1):before { display: none; } .cup.columns.divided .crow.c2 > div:nth-child(n+3), .cup.columns.divided .crow.c3 > div:nth-child(n+4), .cup.columns.divided .crow.c4 > div:nth-child(n+5), .cup.columns.divided .crow.c5 > div:nth-child(n+6), .cup.columns.divided .crow.c6 > div:nth-child(n+7) { border-top: solid 1px #000; } @media (max-width: 992px) { .cup.columns.divided .crow.wide > div:nth-child(n+2) { border-top: solid 1px #999; } .cup.columns.divided .crow.wide > div:before { display: none; } } @media (max-width: 760px) { .cup.columns.divided .crow:not(.narrow):not(.never) > div:nth-child(n+2) { border-top: solid 1px #999; } .cup.columns.divided .crow:not(.narrow):not(.never) > div:before { display: none; } } @media (max-width: 640px) { .cup.columns.divided .crow.narrow > div:nth-child(n+2) { border-top: solid 1px #999; } .cup.columns.divided .crow.narrow > div:before { display: none; } } .cup.columns.divided.dthick .crow > div:before { border-width: 4px; border-color: #000; } .cup.columns.divided.dlight .crow > div:before { border-color: #999; } .cup.columns.divided .crow.dark > div:before { border-color: #fff; } @media (max-width: 992px) { .cup .crow.c4 > div { flex-basis: 50%; } .cup .crow.c6 > div { flex-basis: 33.3%; } .cup .crow.wide { flex-direction: column; flex-wrap: nowrap; } .cup .crow.wide.gap > div, .cup .crow.wide.gaap > div { margin-top: 24px; } .cup .crow.wide.gap > div:first-child, .cup .crow.wide.gaap > div:first-child { margin-top: 0; } } @media (max-width: 760px) { .cup .crow:not(.narrow):not(.never) { flex-direction: column; flex-wrap: nowrap; } .cup .crow:not(.narrow):not(.never).gap > div, .cup .crow:not(.narrow):not(.never).gaap > div { margin-top: 16px; } .cup .crow:not(.narrow):not(.never).gap > div:first-child, .cup .crow:not(.narrow):not(.never).gaap > div:first-child { margin-top: 0; } .cup .crow.c1.inside { flex-direction: row; } .cup .crow.c1.inside > div { flex-basis: 50%; } .cup .crow.c1.inside.gap > div { flex-basis: calc(50% - 12px); } } @media (max-width: 640px) { .cup .crow.narrow { flex-direction: column; flex-wrap: nowrap; } .cup .crow.narrow.gap > div, .cup .crow.narrow.gaap > div { margin-top: 16px; } .cup .crow.narrow.gap > div:first-child, .cup .crow.narrow.gaap > div:first-child { margin-top: 0; } } @media (max-width: 992px) { .cup .columns.mreverse .crow.wide { flex-direction: column-reverse; } } @media (max-width: 760px) { .cup .columns.mreverse .crow:not(.narrow) { flex-direction: column-reverse; } } @media (max-width: 640px) { .cup .columns.mreverse .crow.narrow { flex-direction: column-reverse; } } @media (max-width: 760px) { .cup .columns.mscroll { overflow-x: scroll; scroll-behavior: smooth; scroll-snap-type: x mandatory; } .cup .columns.mscroll .crow { flex-direction: row; margin-top: 0; } .cup .columns.mscroll .crow > div { scroll-snap-align: start; margin-top: 0 !important; margin-left: 24px; flex-basis: 75%; } .cup .columns.mscroll .crow.gap > div, .cup .columns.mscroll .crow.gaap > div { scroll-margin-left: 16px; } .cup .columns.mscroll .crow[data-n="2"] { width: 150%; } .cup .columns.mscroll .crow[data-n="3"] { width: 225%; } .cup .columns.mscroll .crow[data-n="4"] { width: 300%; } .cup .columns.mscroll .crow[data-n="5"] { width: 375%; } .cup .columns.mscroll .crow[data-n="6"] { width: 450%; } .cup .columns.mscroll .crow[data-n="7"] { width: 525%; } .cup .columns.mscroll .crow[data-n="8"] { width: 600%; } .cup .columns.mscroll .crow[data-n="9"] { width: 675%; } .cup .columns.mscroll .crow[data-n="10"] { width: 750%; } .cup .columns.mscroll .crow[data-n="11"] { width: 825%; } .cup .columns.mscroll .crow[data-n="12"] { width: 900%; } } .cup .columns.maccordion .crow > input { display: none; appearance: none; -webkit-appearance: none; } .cup .columns.maccordion .crow > input + span { display: none; } @media (max-width: 760px) { .cup .columns.maccordion .crow > input { display: block; position: relative; z-index: 2; cursor: pointer; width: 100%; height: 32px; margin-bottom: -32px; border: none; background: transparent; } .cup .columns.maccordion .crow > input.close { position: absolute; margin: 0; top: 0; bottom: 0; height: auto; z-index: 1; } .cup .columns.maccordion .crow > input:checked { z-index: 0; } .cup .columns.maccordion .crow > input + span { display: block; padding: 4px 32px 4px 24px; border-top: solid 1px #ccc; font-weight: bold; } .cup .columns.maccordion .crow > input + span::after { content: ""; position: absolute; right: 24px; width: 24px; height: 24px; background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiBzdHJva2U9IiMwMDAiIGZpbGw9Im5vbmUiIGQ9Ik0yMiw3TDEyLDE3TDIsNyI+PC9wYXRoPjwvc3ZnPg==) no-repeat center center / 12px; } .cup .columns.maccordion .crow > input:checked + span::after { transform: scaleY(-1); } .cup .columns.maccordion .crow > input + span + div { z-index: 2; } .cup .columns.maccordion .crow > input:not(:checked) + span + div { display: none; } } @media (max-width: 760px) { .cup .columns.maccordion { border-bottom: solid 1px #ccc; } } .cup .columns.mexpandable .crow > input { display: none; appearance: none; -webkit-appearance: none; } .cup .columns.mexpandable .crow > input + span { display: none; } @media (max-width: 760px) { .cup .columns.mexpandable .crow > input { display: block; position: relative; z-index: 2; cursor: pointer; width: 100%; top: 24px; height: 48px; margin-bottom: -48px; border: none; background: transparent; } .cup .columns.mexpandable .crow > input:checked { z-index: 2; } .cup .columns.mexpandable .crow > input + span { display: block; position: relative; width: 100%; height: 1px; } .cup .columns.mexpandable .crow > input + span::after { content: ""; position: absolute; width: 24px; height: 24px; top: 32px; right: 16px; background: #ffffff url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMS42IDIxLjYiPjxwYXRoIGQ9Ik0xOC4zLDExLjNIMTEuNHY2LjlIMTAuM1YxMS4zSDMuM1YxMC4yaDYuOVYzLjNIMTEuNFYxMC4yaDYuOVoiIHN0cm9rZT0ibm9uZSIgZmlsbD0iIzAwMDAwMCI+PC9wYXRoPjwvc3ZnPg==) no-repeat center center / 18px; border-radius: 24px; } .cup .columns.mexpandable .crow > input:checked + span::after { transform: rotateZ(45deg); } .cup .columns.mexpandable .crow > input + span + div div.primary { padding-top: 12px; padding-bottom: 12px; } .cup .columns.mexpandable .crow > input + span + div div.secondary { padding-bottom: 12px; max-height: 100vh; overflow-y: scroll; transition: max-height 0.3s, padding 0.25s; scrollbar-width: none; -ms-overflow-style: none; } .cup .columns.mexpandable .crow > input:not(:checked) + span + div div.plate { min-height: 64px !important; } .cup .columns.mexpandable .crow > input:not(:checked) + span + div div.secondary { max-height: 0px; padding-top: 0; padding-bottom: 0; overflow: hidden; } .cup .columns.mexpandable .crow > input:not(:checked) + span + div div.secondary::before { opacity: 0; } .cup .columns.mexpandable .crow > input + span + div div.secondary::-webkit-scrollbar { display: none; width: 0 !important; height: 0 !important; } .cup .columns.mexpandable .crow > input + span + div [class^=head] { padding-right: 32px; } } .cup .columns.mexpandable .crow.preexpand > input { display: none; } @media (max-width: 760px) { .cup .columns.mexpandable .crow.preexpand > input + span::after { background: unset; } } .cup .columns .preexpand ~ .expall { display: none; } .cup .columns.mexpandable .preexpand ~ .expall { display: none; } @media (max-width: 760px) { .cup .mexpandable .preexpand { padding-bottom: 0; } .cup .columns .preexpand ~ .expall { display: none; } .cup .columns.mexpandable .preexpand ~ .expall { display: block; margin: 20px auto; text-align: center; font-weight: bold; font-size: 14px; } } .cup .columns.mexpandable .preexpand.expon ~ .expall { display: none; } .columns div.showall { width: fit-content; margin: 0 auto; } @media (max-width: 760px) { .columns div.showall { display: none; } .cup .columns .crow.showfour > div { display: block !important; } } .cup .scroller { display: block; background-color: inherit; max-width: 100vw; } .cup .scroller > .area { width: 100%; overflow: scroll; scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; scroll-snap-type: x mandatory; } .cup .scroller > .area::-webkit-scrollbar { display: none; width: 0 !important; height: 0 !important; } .cup .scroller:not(.gap) > .area div.primary, .cup .scroller:not(.gap) > .area div.secondary { padding-top: 24px; padding-bottom: 24px; } .cup .scroller .items { display: flex; } .cup .scroller .items > div { flex-grow: 1; flex-basis: 100%; scroll-snap-align: start; display: flex; flex-direction: column; transition: opacity 0.5s ease-out; } .cup .scroller .items > div.above { opacity: .66; } .cup .scroller .items a[name] { position: absolute; } .cup .scroller .area.zoom { padding: 12px; margin: -12px; width: calc(100% + 24px); } .cup .scroller .area.zoom > .items > div { transform: scale(1.001); transition: transform .15s; transition-delay: .1s; } .cup .scroller .area.zoom > .items > div:hover { transform: scale(1.04); } @media (min-width: 1280px) { .cup .scroller.bleed .area { margin-left: calc(50% - 50vw); width: calc(100vw - 12px); scroll-snap-type: none; } .cup .scroller.bleed .items { padding-left: calc(50vw - 640px); padding-right: calc(50vw - 640px); } } .cup .scroller.peek .items::after { content: ""; display: block; width: 8.3%; flex-shrink: 0; scroll-snap-align: start; } .cup .scroller.gap .items > div, .cup .scroller.gaap .items > div { margin-left: 24px; scroll-margin-left: 24px; } .cup .scroller.gap .items > div:last-child, .cup .scroller.gaap .items > div:last-child { margin-right: 24px; } @media (max-width: 760px) { .cup .scroller.gap .items > div, .cup .scroller.gaap .items > div { margin-left: 16px; scroll-margin-left: 16px; } } .cup .scroller.gaap .items > div:nth-child(n+2) { margin-left: 40px; } @media (max-width: 1272px) { .cup .scroller.gaap .items > div:nth-child(n+2) { margin-left: 3.125vw; } } .cup .scroller > div.arrows { text-align: right; display: block; } .cup .scroller > div.arrows > a { display: inline-block; position: static; margin: 12px; height: 42px; cursor: pointer; outline-offset: 3px; color: unset; outline-color: unset; border-radius: 8px; } .cup .scroller > div.arrows.under { height: 80px; } .cup .scroller > div.arrows.top { position: absolute; top: 0; right: 0; height: 0; } .cup .scroller > div.arrows.bottom { position: absolute; bottom: 0; right: 0; } .cup .scroller > div.arrows.bottom.punder { bottom: 64px; } .cup .scroller > div.arrows.center { position: absolute; z-index: 2; top: calc(50% - 32px); left: 0; width: 100%; } .cup .scroller > div.arrows.center.pgr { top: calc(50% - 48px); } .cup .scroller > div.arrows.center > a { position: absolute; left: 12px; } .cup .scroller > div.arrows.center > a + a { left: auto; right: 12px; } @media (min-width: 1440px) { .cup .scroller > div.arrows.center > a { left: -80px; } .cup .scroller > div.arrows.center > a + a { right: -80px; } } .cup .scroller > div.arrows.center.circ a { background: #fff; border: solid 1px #d8dada; border-radius: 24px; width: 40px; height: 40px; } .cup .scroller > div.arrows.center.circ a::before { content: ""; display: block; width: 38px; height: 38px; background: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDE0IDE0Ij48cG9seWdvbiBwb2ludHM9IjEuNywxMy43IDAuMywxMi4zIDUuNiw3IDAuMywxLjcgMS43LDAuMyA4LjQsNyIvPjwvc3ZnPgo=) no-repeat 15px / 14px; } .cup .scroller > div.arrows.center.circ a:first-child { transform: scaleX(-1); } .cup .scroller > div.arrows.center.circ a > svg { display: none; } .cup .scroller > div.arrows.pill { margin: 12px auto; height: auto; width: 88px; color: #000; background: #fafafa; border-radius: 24px; display: flex; justify-content: space-between; } .cup .scroller > div.arrows.pill.pgr { width: 120px; } .cup .scroller > div.arrows.pill a { padding: 12px; margin: 0; } .cup .scroller > div.arrows.pill a > svg { height: 18px; width: 18px; } .cup .scroller > div.arrows.first > a:first-child, .cup .scroller > div.arrows.last > a + a { opacity: 0.25; } .cup .scroller > div.arrows.circ > a:first-child { left: -48px; } .cup .scroller > div.arrows.circ > a + a { right: -48px; } @media (max-width: 1376px) { .cup .scroller > div.arrows.circ > a:first-child { left: -8px; } .cup .scroller > div.arrows.circ > a + a { right: -8px; } } @media (min-width: 992px) { .cup .scroller.peek > div.arrows.circ > a + a { right: calc(8.3% - 32px); } } .cup .scroller > div.pager { text-align: center; justify-content: center; padding: 6px 12px; flex-direction: row; } .cup .scroller > div.pager a { display: none; cursor: pointer; position: relative; margin: 0 -2px; color: #6F7171; border-bottom: solid 1px #6F7171; width: 24px; } .cup .scroller > div.pager svg { display: block; } .cup .scroller > div.pager a:not(.on) { color: #D8DADA; border-bottom-color: #D8DADA; } .cup .scroller > div.pager a:hover { color: #a7a7a7; } .cup .scroller > div.pager.c1 a, .cup .scroller > div.pager.c2 a:nth-child(2n-1), .cup .scroller > div.pager.c3 a:nth-child(3n-2), .cup .scroller > div.pager.c4 a:nth-child(4n-3) { display: inline-block; } @media (max-width: 992px) { .cup .scroller > div.pager.c3 a:nth-child(2n-1), .cup .scroller > div.pager.c4 a:nth-child(2n-1) { display: inline-block; } } @media (max-width: 760px) { .cup .scroller > div.pager.c2 a, .cup .scroller > div.pager.c3 a, .cup .scroller > div.pager.c4 a { display: inline-block; } } .cup .scroller > div.pager:not(.number):hover { transform: scaleY(1.5); transform-origin: center center; } .cup .scroller > div.pager.number { display: flex; } .cup .scroller > div.pager.number > a { display: inline-block; border: none; color: inherit; padding: 4px; } .cup .scroller > div.pager.number a.left { order: -1; } .cup .scroller > div.pager.number > span { margin: 0 6px; } .cup .scroller > div.arrows.under + div.pager.under { margin-top: -64px; } .cup .scroller > div.arrows.pill + div.pager { padding: 18px 0 24px; transform: none; } .cup .scroller > div.arrows.pill + div.pager a { border: none; width: 16px; } .cup .scroller > div.arrows.pill + div.pager a::before { content: "\2022"; font-size: 19.8px; } .cup .scroller > div.arrows.pill + div.pager svg { display: none; } @media (max-width: 992px) { .cup .scroller:not(.narrow):not(.never) > .area .items { width: auto !important; } .cup .scroller:not(.narrow):not(.never) > .area .items > div { min-width: 50%; } .cup .scroller:not(.narrow):not(.never) > .area .items[data-c='1'] > div { min-width: 100%; } .cup .scroller.gap:not(.narrow):not(.never) > .area .items > div { min-width: calc(50% - 36px); } .cup .scroller.gap:not(.narrow):not(.never) > .area .items[data-c='1'] > div { min-width: calc(100% - 48px); } .cup .scroller.peek .items::after { width: 24px; } } @media (max-width: 760px) { .cup .scroller.narrow > .area .items { width: auto !important; } .cup .scroller.narrow > .area .items > div { min-width: 50%; } .cup .scroller:not(.narrow):not(.never) > .area .items > div { min-width: 100%; } .cup .scroller.gap.narrow > .area .items > div { min-width: calc(50% - 36px); } .cup .scroller.gap:not(.narrow):not(.never) > .area .items > div { min-width: calc(100% - 32px); } .cup .scroller.peek:not(.narrow):not(.never) > .area .items > div { min-width: 83.3%; } .cup .scroller.gap > div.arrows.circ > a:first-child { left: -16px; } } @media (max-width: 640px) { .cup .scroller.narrow > .area .items > div { min-width: 100%; } .cup .scroller.peek.narrow > .area .items > div { min-width: 83.3%; } .cup .scroller.narrow.gap > .area .items > div { min-width: calc(83.3% - 16px); } .cup .scroller.narrow.gap > .arrows.circ > a + a { right: calc(16.7% - 48px); } .cup .scroller.narrow.gap.peek > .arrows.circ > a + a { right: calc(16.7% - 32px); } } @media (max-width: 480px) { .cup .scroller > .area .items { width: auto !important; } .cup .scroller > .area .items > div { min-width: 100%; } .cup .scroller.peek > .area .items > div { min-width: 83.3%; } .cup .scroller.gap.narrow > .area .items > div { min-width: calc(83.3% - 16px); } } .cup.above .scroller .items > div:nth-child(n+6) .background { background-image: none !important; } .cup.above .scroller .items[data-c='1'] > div:nth-child(n+2) .background { background-image: none !important; } .cup.above .scroller .items[data-c='2'] > div:nth-child(n+3) .background { background-image: none !important; } .cup.above .scroller .items[data-c='3'] > div:nth-child(n+4) .background { background-image: none !important; } .cup.above .scroller .items[data-c='4'] > div:nth-child(n+5) .background { background-image: none !important; } .cup div.tabset { padding: 0; } .cup .tabset .tabs { padding: 0 12px; } .cup.tabs input.tabi { display: none; } .cup.tabs div.tabs label { display: block; cursor: pointer; padding: 6px 6px; margin: 1px 0 -1px; } .cup.tabs .dark .tabs label { outline-color: #ccc; } .cup.tabs > .plate > .secondary.left { border-right: solid 1px transparent; } .cup.tabs > .plate > .secondary.left div.tabs { margin-right: -20px; border-color: #ee0000; } .cup.tabs > .plate > .secondary.left div.tabs label::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -4px; border-left: solid 1px #d8dada; } .cup.tabs > .plate > .secondary.left.dark div.tabs { border-color: #fff; } .cup.tabs > .plate > .secondary.left.dark div.tabs label::before { border-color: #6f7171; } .cup.tabs > .plate > .secondary.right { border-left: solid 1px transparent; } .cup.tabs > .plate > .secondary.right div.tabs { margin-left: -20px; border-color: #ee0000; } .cup.tabs > .plate > .secondary.right div.tabs label { padding-left: 20px; } .cup.tabs > .plate > .secondary label { border-left: solid 4px transparent; margin-left: -1px; background-color: inherit; font-weight: bold; color: #6f7171; position: relative; } .cup.tabs > .plate > .secondary label:hover { color: inherit; } .cup.tabs > .plate > .secondary > div.tabs::before { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; } .cup.tabs.sticky > .plate > .secondary > div.tabs { position: sticky; top: 60px; } .cup.tabs.divided > .plate > .secondary.left, .cup.tabs.divided > .plate > .secondary.right { border-color: #000; } .cup.tabs.divided.dlight > .plate > .secondary.left, .cup.tabs.divided.dlight > .plate > .secondary.right { border-color: #ccc; } .cup.tabs.divided.dthick > .plate > .secondary.left, .cup.tabs.divided.dthick > .plate > .secondary.right { border-width: 4px; } .cup.tabs > .background, .cup.tabs > .primary > .background { z-index: -2; } .cup.tabs > .fullcontent div.tabs { border-bottom: solid 0px #ee0000; padding-top: 12px; padding-bottom: 0; } .cup.tabs > .fullcontent div.tabs:first-child { padding-top: 0; } .cup.tabs > .fullcontent div.tabs label { display: inline-block; font-weight: bold; color: #6f7171; margin: 1px 6px -1px 6px; border-bottom: solid 4px transparent; } .cup.tabs > .fullcontent div.tabs label:first-child { margin-left: 0; } .cup.tabs > .fullcontent div.tabs label:hover { color: inherit; } @media (max-width: 992px) { .cup.tabs > .fullcontent div.tabs { white-space: nowrap; margin-right: -16px; padding-right: 12px; overflow-x: scroll; scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; } .cup.tabs > .fullcontent div.tabs::-webkit-scrollbar { display: none; width: 0 !important; height: 0 !important; } } .cup.tabs > .fullcontent.dark div.tabs { border-bottom-color: #fff; } .cup.tabs > .fullcontent .xtabs { padding: 0 6px 0 18px; } .cup.tabs.sticky > .fullcontent.nav { position: sticky; z-index: 2; top: 0px; background: #fff; } .cup.tabs.sticky > .fullcontent.nav.dark { background: #000; } .hasSecondaryNav .cup.tabs.sticky > .fullcontent.nav { top: 152px; } .hasSecondaryNav.primary-nav-hidden .cup.tabs.sticky > .fullcontent.nav { top: 32px; } .cup.tabs.divided > .fullcontent div.tabs::after { content: ""; position: absolute; z-index: -1; left: 0; bottom: 0; right: 0; border-bottom: solid 1px #000; } .cup.tabs.divided.dlight > .fullcontent div.tabs::after { border-color: #ccc; } .cup.tabs.divided.dthick > .fullcontent div.tabs::after { border-width: 4px; } .cup.tabs.divided.dthick > .fullcontent div.tabs::after label { margin-bottom: -4px; border-width: 4px; } .cup.tabs.select { position: relative; } .cup.tabs.select > .secondary { padding-bottom: 32px; } .cup.tabs.select > .secondary > .tabs { position: absolute; overflow: hidden; height: 32px; padding: 0; background-color: #fff; z-index: 1; border: solid 1px #ccc; } .cup.tabs.select .tabs::before { content: ""; display: block; } .cup.tabs.select .tabs:hover { border: solid 1px #999; height: auto; } .cup.tabs.select .tabs:hover::before { display: none; } .cup.tabs.select .tabs:focus-within { border: solid 1px #999; height: auto; } .cup.tabs.select .tabs:focus-within::before { display: none; } .cup.tabs.select .tabs label { display: block; height: 32px; padding: 6px 32px 6px 24px; margin: 0; box-sizing: border-box; border: none; } .cup.tabs.select .tabs:hover label { border-left: solid 2px transparent; padding-left: 22px; } .cup.tabs.select .tabs input:nth-child(2):checked ~ .tabs:before { margin-top: -32px; } .cup.tabs.select .tabs input:nth-child(3):checked ~ .tabs:before { margin-top: -64px; } .cup.tabs div.tabs.select { padding-bottom: 42px; overflow: visible; } .cup.tabs div.tabs.select > div { display: inline-flex; vertical-align: top; flex-direction: column; min-width: calc(25% - 30px); position: relative; z-index: 3; text-align: left; margin-bottom: -100%; border: solid 1px #6f7171; border-bottom-color: #333; border-radius: 4px; background: #fff; padding: 10px 0; } .cup.tabs div.tabs.select > div::after { content: ""; position: absolute; z-index: -1; top: 8px; right: 6px; width: 24px; height: 22px; background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiBzdHJva2U9IiMwMDAiIGZpbGw9Im5vbmUiIGQ9Ik0yMiw3TDEyLDE3TDIsNyI+PC9wYXRoPjwvc3ZnPg==) no-repeat center center / 20px; } .cup.tabs div.tabs.select > div label { height: 0; margin: 0; padding: 0 32px 0 12px; border: none; overflow: hidden; outline-color: #0088CE77; } .cup.tabs div.tabs.select > div label:focus { height: auto; padding: 6px 32px 6px 12px; } .cup.tabs div.tabs.select > div label::after { display: none; } .cup.tabs div.tabs.select > div:focus-within { padding: 0; } .cup.tabs .active > div.tabs.select > div { background-color: #f7f7f7; padding: 0; } .cup.tabs .active > div.tabs.select > div::after { transform: scaleY(-1); } .cup.tabs .active > div.tabs.select > div label { height: auto; padding: 6px 32px 6px 12px; } .cup.tabs .active > div.tabs.select > div xlabel:first-child { padding-top: 0; border: none; } .cup.tabs div.tabs.toggle { background: #f7f7f7; color: #6f7171; border-radius: 24px; display: inline-block; padding: 0; max-width: 100%; overflow: scroll; scroll-snap-type: x; scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; } .cup.tabs div.tabs.toggle::-webkit-scrollbar { display: none; width: 0 !important; height: 0 !important; } .cup.tabs div.tabs.toggle.grey { background: #fff; } .cup.tabs div.tabs.toggle.full { display: block; } .cup.tabs div.tabs.toggle > div { white-space: nowrap; display: flex; } .cup.tabs div.tabs.toggle label { color: inherit; display: inline-block; border: none; border-radius: 24px; padding: 10px 24px; margin: 0; scroll-snap-align: start; text-align: center; flex-grow: 1; transition: background-color 0.2s; } .cup.tabs div.tabs.toggle label:hover { color: #000; } .cup.tabs .fullcontent > div.tabs.toggle { margin: 32px 0 24px; } .cup.tabs .fullcontent > div.tabs.toggle:first-child { margin-top: 0; } .cup.tabs .dark > div.tabs.toggle { background: #333; color: #a7a7a7; } .cup.tabs .dark > div.tabs.toggle label:hover { color: #fff; } .cup.tabs input.tabi:first-of-type:checked ~ div > .tabs.toggle label:first-child, .cup.tabs input.tabi:nth-of-type(2):checked ~ div > .tabs.toggle label:nth-child(2), .cup.tabs input.tabi:nth-of-type(3):checked ~ div > .tabs.toggle label:nth-child(3), .cup.tabs input.tabi:nth-of-type(4):checked ~ div > .tabs.toggle label:nth-child(4), .cup.tabs input.tabi:nth-of-type(5):checked ~ div > .tabs.toggle label:nth-child(5), .cup.tabs input.tabi:nth-of-type(6):checked ~ div > .tabs.toggle label:nth-child(6) { background: #d8dada; color: #000; } .cup.tabs input.tabi:first-of-type:checked ~ div > .tabs label:first-child, .cup.tabs input.tabi:nth-of-type(2):checked ~ div > .tabs label:nth-child(2), .cup.tabs input.tabi:nth-of-type(3):checked ~ div > .tabs label:nth-child(3), .cup.tabs input.tabi:nth-of-type(4):checked ~ div > .tabs label:nth-child(4), .cup.tabs input.tabi:nth-of-type(5):checked ~ div > .tabs label:nth-child(5), .cup.tabs input.tabi:nth-of-type(6):checked ~ div > .tabs label:nth-child(6), .cup.tabs input.tabi:nth-of-type(7):checked ~ div > .tabs label:nth-child(7), .cup.tabs input.tabi:nth-of-type(8):checked ~ div > .tabs label:nth-child(8), .cup.tabs input.tabi:nth-of-type(9):checked ~ div > .tabs label:nth-child(9), .cup.tabs input.tabi:nth-of-type(10):checked ~ div > .tabs label:nth-child(10), .cup.tabs input.tabi:nth-of-type(11):checked ~ div > .tabs label:nth-child(11), .cup.tabs input.tabi:nth-of-type(12):checked ~ div > .tabs label:nth-child(12), .cup.tabs input.tabi:nth-of-type(13):checked ~ div > .tabs label:nth-child(13), .cup.tabs input.tabi:nth-of-type(14):checked ~ div > .tabs label:nth-child(14), .cup.tabs input.tabi:nth-of-type(15):checked ~ div > .tabs label:nth-child(15), .cup.tabs input.tabi:nth-of-type(16):checked ~ div > .tabs label:nth-child(16) { border-color: inherit; font-weight: bold; color: inherit; height: auto; background-color: transparent; position: static; } .cup.tabs > .primary > div:not(.background) { flex-shrink: 1; width: 0; max-height: 0; flex-basis: 0; padding: 0; margin-bottom: 0; visibility: hidden; overflow: hidden; } .cup.tabs > .plate > .primary > div:not(.background) { flex-shrink: 1; width: 0; max-height: 0; flex-basis: 0; padding: 0; margin-bottom: 0; visibility: hidden; overflow: hidden; } .cup.tabs input.tabi:first-of-type:checked ~ .primary > div:first-child, .cup.tabs input.tabi:nth-of-type(2):checked ~ .primary > div:nth-child(2), .cup.tabs input.tabi:nth-of-type(3):checked ~ .primary > div:nth-child(3), .cup.tabs input.tabi:nth-of-type(4):checked ~ .primary > div:nth-child(4), .cup.tabs input.tabi:nth-of-type(5):checked ~ .primary > div:nth-child(5), .cup.tabs input.tabi:nth-of-type(6):checked ~ .primary > div:nth-child(6), .cup.tabs input.tabi:nth-of-type(7):checked ~ .primary > div:nth-child(7), .cup.tabs input.tabi:nth-of-type(8):checked ~ .primary > div:nth-child(8), .cup.tabs input.tabi:nth-of-type(9):checked ~ .primary > div:nth-child(9), .cup.tabs input.tabi:nth-of-type(10):checked ~ .primary > div:nth-child(10), .cup.tabs input.tabi:nth-of-type(11):checked ~ .primary > div:nth-child(11), .cup.tabs input.tabi:nth-of-type(12):checked ~ .primary > div:nth-child(12), .cup.tabs input.tabi:nth-of-type(13):checked ~ .primary > div:nth-child(13), .cup.tabs input.tabi:nth-of-type(14):checked ~ .primary > div:nth-child(14), .cup.tabs input.tabi:nth-of-type(15):checked ~ .primary > div:nth-child(15), .cup.tabs input.tabi:nth-of-type(16):checked ~ .primary > div:nth-child(16) { flex-grow: 1; width: auto; max-height: none; visibility: visible; } .cup.tabs input.tabi:first-of-type:checked ~ .primary > div:nth-child(n+2) div.background { background-image: none; } @media (max-width: 992px) { .cup.tabs > .plate > div.secondary { padding-left: 0; padding-right: 0; } } @media (max-width: 760px) { .cup.tabs { overflow: hidden; } .cup.tabs > .fullcontent div.tabs label { margin-left: 12px; padding: 6px 0; } .cup.tabs > .plate { flex-direction: row !important; flex-wrap: wrap !important; } .cup.tabs > .plate > div.secondary { width: 25%; transition: flex-basis 0.35s; } .cup.tabs > .plate > div.primary { transition: margin-right 0.35s; } .cup.tabs > .plate > div.secondary:not(.active) { flex-basis: 98%; max-width: 100%; border: none; } .cup.tabs > .plate > .secondary div.tabs { margin: 0; } .cup.tabs > .plate > .secondary div.tabs:before { display: none; } .cup.tabs > .plate > .secondary.left div.tabs { margin-right: 0; } .cup.tabs > .plate .secondary label { white-space: nowrap; overflow: hidden; } .cup.tabs > .plate .secondary label:after, .cup.tabs .mmenu + .fullcontent div.tabs label:after { content: ""; position: absolute; right: 0; width: 24px; height: 22px; background: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDE0IDE0Ij48cG9seWdvbiBwb2ludHM9IjEuNywxMy43IDAuMywxMi4zIDUuNiw3IDAuMywxLjcgMS43LDAuMyA4LjQsNyIvPjwvc3ZnPgo=) no-repeat center center / 12px; } .cup.tabs > .plate > div.secondary:not(.active) + div.primary { margin-right: -100%; max-height: 240px; } .cup.tabs > .plate .secondary.active label:after { right: 100%; } .cup.tabs div.secondary:not(.active) > div.tabs label { font-weight: 600 !important; } .cup.tabs .mmenu ~ div > div.tabs label { display: block; margin: 0; border: none; padding-left: 0; } .cup.tabs .mmenu ~ div.active > div.tabs label { position: absolute; right: 100%; } .cup.tabs .mmenu ~ div.active > div.tabs label:after { left: 0; right: auto; transform: scaleX(-1); } .cup.tabs .mmenu ~ div:not(.active) + .primary { display: none; } .cup.tabs .mmenu ~ div.secondary { width: 100%; max-width: 100%; flex-basis: 100%; padding-left: 24px; } .cup.tabs .mmenu ~ div.secondary.active + .primary { flex-basis: 100%; max-width: 100%; margin-top: -42px; } .cup.tabs .mscroll ~ div > div.tabs { display: none; } .cup.tabs .mscroll ~ div.secondary.left { display: none; } .cup.tabs .mscroll ~ div.primary { display: block; width: 100% !important; max-width: 100% !important; flex-basis: 100%; overflow-x: scroll; scroll-behavior: smooth; scroll-snap-type: x mandatory; margin: 0 !important; max-height: 480px !important; } .cup.tabs .mscroll ~ div.primary > div { scroll-snap-align: start; margin: 0; width: 75% !important; height: 100%; max-height: none !important; visibility: visible !important; position: absolute; top: 0; } .cup.tabs .mscroll ~ div.primary > div:first-child { position: relative; } .cup.tabs .mscroll ~ div.primary > div:nth-child(2) { left: 75%; } .cup.tabs .mscroll ~ div.primary > div:nth-child(3) { left: 150%; } .cup.tabs .mscroll ~ div.primary > div:nth-child(4) { left: 225%; } .cup.tabs .mscroll ~ div.primary > div:nth-child(5) { left: 300%; } .cup.tabs .mscroll ~ div.primary > div:nth-child(6) { left: 375%; } .cup.tabs .mscroll ~ div.primary > div:nth-child(7) { left: 450%; } .cup.tabs .mscroll ~ div.primary > div:nth-child(8) { left: 525%; } .cup.tabs .mscroll ~ div.primary > div:nth-child(9) { left: 600%; } } body.compensate-for-scrollbar{overflow:hidden}.fancybox-active{height:auto}.fancybox-is-hidden{left:-9999px;margin:0;position:absolute!important;top:-9999px;visibility:hidden}.fancybox-container{-webkit-backface-visibility:hidden;height:100%;left:0;outline:none;position:fixed;-webkit-tap-highlight-color:transparent;top:0;-ms-touch-action:manipulation;touch-action:manipulation;transform:translateZ(0);width:100%;z-index:99992}.fancybox-container *{box-sizing:border-box}.fancybox-bg,.fancybox-inner,.fancybox-outer,.fancybox-stage{bottom:0;left:0;position:absolute;right:0;top:0}.fancybox-outer{-webkit-overflow-scrolling:touch;overflow-y:auto}.fancybox-bg{background:#1e1e1e;opacity:0;transition-duration:inherit;transition-property:opacity;transition-timing-function:cubic-bezier(.47,0,.74,.71)}.fancybox-is-open .fancybox-bg{opacity:.9;transition-timing-function:cubic-bezier(.22,.61,.36,1)}.fancybox-caption,.fancybox-infobar,.fancybox-navigation .fancybox-button,.fancybox-toolbar{direction:ltr;opacity:0;position:absolute;transition:opacity .25s ease,visibility 0s ease .25s;visibility:hidden;z-index:99997}.fancybox-show-caption .fancybox-caption,.fancybox-show-infobar .fancybox-infobar,.fancybox-show-nav .fancybox-navigation .fancybox-button,.fancybox-show-toolbar .fancybox-toolbar{opacity:1;transition:opacity .25s ease 0s,visibility 0s ease 0s;visibility:visible}.fancybox-infobar{color:#ccc;font-size:13px;-webkit-font-smoothing:subpixel-antialiased;height:44px;left:0;line-height:44px;min-width:44px;mix-blend-mode:difference;padding:0 10px;pointer-events:none;top:0;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.fancybox-toolbar{right:0;top:0}.fancybox-stage{direction:ltr;overflow:visible;transform:translateZ(0);z-index:99994}.fancybox-is-open .fancybox-stage{overflow:hidden}.fancybox-slide{-webkit-backface-visibility:hidden;display:none;height:100%;left:0;outline:none;overflow:auto;-webkit-overflow-scrolling:touch;padding:44px;position:absolute;text-align:center;top:0;transition-property:transform,opacity;white-space:normal;width:100%;z-index:99994}.fancybox-slide:before{content:"";display:inline-block;font-size:0;height:100%;vertical-align:middle;width:0}.fancybox-is-sliding .fancybox-slide,.fancybox-slide--current,.fancybox-slide--next,.fancybox-slide--previous{display:block}.fancybox-slide--image{overflow:hidden;padding:44px 0}.fancybox-slide--image:before{display:none}.fancybox-slide--html{padding:6px}.fancybox-content{background:#fff;display:inline-block;margin:0;max-width:100%;overflow:auto;-webkit-overflow-scrolling:touch;padding:44px;position:relative;text-align:left;vertical-align:middle}.fancybox-slide--image .fancybox-content{animation-timing-function:cubic-bezier(.5,0,.14,1);-webkit-backface-visibility:hidden;background:transparent;background-repeat:no-repeat;background-size:100% 100%;left:0;max-width:none;overflow:visible;padding:0;position:absolute;top:0;transform-origin:top left;transition-property:transform,opacity;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:99995}.fancybox-can-zoomOut .fancybox-content{cursor:zoom-out}.fancybox-can-zoomIn .fancybox-content{cursor:zoom-in}.fancybox-can-pan .fancybox-content,.fancybox-can-swipe .fancybox-content{cursor:grab}.fancybox-is-grabbing .fancybox-content{cursor:grabbing}.fancybox-container [data-selectable=true]{cursor:text}.fancybox-image,.fancybox-spaceball{background:transparent;border:0;height:100%;left:0;margin:0;max-height:none;max-width:none;padding:0;position:absolute;top:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}.fancybox-spaceball{z-index:1}.fancybox-slide--iframe .fancybox-content,.fancybox-slide--map .fancybox-content,.fancybox-slide--pdf .fancybox-content,.fancybox-slide--video .fancybox-content{height:100%;overflow:visible;padding:0;width:100%}.fancybox-slide--video .fancybox-content{background:#000}.fancybox-slide--map .fancybox-content{background:#e5e3df}.fancybox-slide--iframe .fancybox-content{background:#fff}.fancybox-iframe,.fancybox-video{background:transparent;border:0;display:block;height:100%;margin:0;overflow:hidden;padding:0;width:100%}.fancybox-iframe{left:0;position:absolute;top:0}.fancybox-error{background:#fff;cursor:default;max-width:400px;padding:40px;width:100%}.fancybox-error p{color:#444;font-size:16px;line-height:20px;margin:0;padding:0}.fancybox-button{background:rgba(30,30,30,.6);border:0;border-radius:0;box-shadow:none;cursor:pointer;display:inline-block;height:44px;margin:0;padding:10px;position:relative;transition:color .2s;vertical-align:top;visibility:inherit;width:44px}.fancybox-button,.fancybox-button:link,.fancybox-button:visited{color:#ccc}.fancybox-button:hover{color:#fff}.fancybox-button:focus{outline:none}.fancybox-button.fancybox-focus{outline:1px dotted}.fancybox-button[disabled],.fancybox-button[disabled]:hover{color:#888;cursor:default;outline:none}.fancybox-button div{height:100%}.fancybox-button svg{display:block;height:100%;overflow:visible;position:relative;width:100%}.fancybox-button svg path{fill:currentColor;stroke-width:0}.fancybox-button--fsenter svg:nth-child(2),.fancybox-button--fsexit svg:first-child,.fancybox-button--pause svg:first-child,.fancybox-button--play svg:nth-child(2){display:none}.fancybox-progress{background:#ff5268;height:2px;left:0;position:absolute;right:0;top:0;transform:scaleX(0);transform-origin:0;transition-property:transform;transition-timing-function:linear;z-index:99998}.fancybox-close-small{background:transparent;border:0;border-radius:0;color:#ccc;cursor:pointer;opacity:.8;padding:8px;position:absolute;right:-12px;top:-44px;z-index:401}.fancybox-close-small:hover{color:#fff;opacity:1}.fancybox-slide--html .fancybox-close-small{color:currentColor;padding:10px;right:0;top:0}.fancybox-slide--image.fancybox-is-scaling .fancybox-content{overflow:hidden}.fancybox-is-scaling .fancybox-close-small,.fancybox-is-zoomable.fancybox-can-pan .fancybox-close-small{display:none}.fancybox-navigation .fancybox-button{background-clip:content-box;height:100px;opacity:0;position:absolute;top:calc(50% - 50px);width:70px}.fancybox-navigation .fancybox-button div{padding:7px}.fancybox-navigation .fancybox-button--arrow_left{left:0;left:env(safe-area-inset-left);padding:31px 26px 31px 6px}.fancybox-navigation .fancybox-button--arrow_right{padding:31px 6px 31px 26px;right:0;right:env(safe-area-inset-right)}.fancybox-caption{background:linear-gradient(0deg,rgba(0,0,0,.85) 0,rgba(0,0,0,.3) 50%,rgba(0,0,0,.15) 65%,rgba(0,0,0,.075) 75.5%,rgba(0,0,0,.037) 82.85%,rgba(0,0,0,.019) 88%,transparent);bottom:0;color:#eee;font-size:14px;font-weight:400;left:0;line-height:1.5;padding:75px 44px 25px;pointer-events:none;right:0;text-align:center;z-index:99996}@supports (padding:max(0px)){.fancybox-caption{padding:75px max(44px,env(safe-area-inset-right)) max(25px,env(safe-area-inset-bottom)) max(44px,env(safe-area-inset-left))}}.fancybox-caption--separate{margin-top:-50px}.fancybox-caption__body{max-height:50vh;overflow:auto;pointer-events:all}.fancybox-caption a,.fancybox-caption a:link,.fancybox-caption a:visited{color:#ccc;text-decoration:none}.fancybox-caption a:hover{color:#fff;text-decoration:underline}.fancybox-loading{animation:a 1s linear infinite;background:transparent;border:4px solid #888;border-bottom-color:#fff;border-radius:50%;height:50px;left:50%;margin:-25px 0 0 -25px;opacity:.7;padding:0;position:absolute;top:50%;width:50px;z-index:99999}@keyframes a{to{transform:rotate(1turn)}}.fancybox-animated{transition-timing-function:cubic-bezier(0,0,.25,1)}.fancybox-fx-slide.fancybox-slide--previous{opacity:0;transform:translate3d(-100%,0,0)}.fancybox-fx-slide.fancybox-slide--next{opacity:0;transform:translate3d(100%,0,0)}.fancybox-fx-slide.fancybox-slide--current{opacity:1;transform:translateZ(0)}.fancybox-fx-fade.fancybox-slide--next,.fancybox-fx-fade.fancybox-slide--previous{opacity:0;transition-timing-function:cubic-bezier(.19,1,.22,1)}.fancybox-fx-fade.fancybox-slide--current{opacity:1}.fancybox-fx-zoom-in-out.fancybox-slide--previous{opacity:0;transform:scale3d(1.5,1.5,1.5)}.fancybox-fx-zoom-in-out.fancybox-slide--next{opacity:0;transform:scale3d(.5,.5,.5)}.fancybox-fx-zoom-in-out.fancybox-slide--current{opacity:1;transform:scaleX(1)}.fancybox-fx-rotate.fancybox-slide--previous{opacity:0;transform:rotate(-1turn)}.fancybox-fx-rotate.fancybox-slide--next{opacity:0;transform:rotate(1turn)}.fancybox-fx-rotate.fancybox-slide--current{opacity:1;transform:rotate(0deg)}.fancybox-fx-circular.fancybox-slide--previous{opacity:0;transform:scale3d(0,0,0) translate3d(-100%,0,0)}.fancybox-fx-circular.fancybox-slide--next{opacity:0;transform:scale3d(0,0,0) translate3d(100%,0,0)}.fancybox-fx-circular.fancybox-slide--current{opacity:1;transform:scaleX(1) translateZ(0)}.fancybox-fx-tube.fancybox-slide--previous{transform:translate3d(-100%,0,0) scale(.1) skew(-10deg)}.fancybox-fx-tube.fancybox-slide--next{transform:translate3d(100%,0,0) scale(.1) skew(10deg)}.fancybox-fx-tube.fancybox-slide--current{transform:translateZ(0) scale(1)}@media (max-height:576px){.fancybox-slide{padding-left:6px;padding-right:6px}.fancybox-slide--image{padding:6px 0}.fancybox-close-small{right:-6px}.fancybox-slide--image .fancybox-close-small{background:#4e4e4e;color:#f2f4f6;height:36px;opacity:1;padding:6px;right:0;top:0;width:36px}.fancybox-caption{padding-left:12px;padding-right:12px}@supports (padding:max(0px)){.fancybox-caption{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}}}.fancybox-share{background:#f4f4f4;border-radius:3px;max-width:90%;padding:30px;text-align:center}.fancybox-share h1{color:#222;font-size:35px;font-weight:700;margin:0 0 20px}.fancybox-share p{margin:0;padding:0}.fancybox-share__button{border:0;border-radius:3px;display:inline-block;font-size:14px;font-weight:700;line-height:40px;margin:0 5px 10px;min-width:130px;padding:0 15px;text-decoration:none;transition:all .2s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap}.fancybox-share__button:link,.fancybox-share__button:visited{color:#fff}.fancybox-share__button:hover{text-decoration:none}.fancybox-share__button--fb{background:#3b5998}.fancybox-share__button--fb:hover{background:#344e86}.fancybox-share__button--pt{background:#bd081d}.fancybox-share__button--pt:hover{background:#aa0719}.fancybox-share__button--tw{background:#1da1f2}.fancybox-share__button--tw:hover{background:#0d95e8}.fancybox-share__button svg{height:25px;margin-right:7px;position:relative;top:-1px;vertical-align:middle;width:25px}.fancybox-share__button svg path{fill:#fff}.fancybox-share__input{background:transparent;border:0;border-bottom:1px solid #d7d7d7;border-radius:0;color:#5d5b5b;font-size:14px;margin:10px 0 0;outline:none;padding:10px 15px;width:100%}.fancybox-thumbs{background:#ddd;bottom:0;display:none;margin:0;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar;padding:2px 2px 4px;position:absolute;right:0;-webkit-tap-highlight-color:rgba(0,0,0,0);top:0;width:212px;z-index:99995}.fancybox-thumbs-x{overflow-x:auto;overflow-y:hidden}.fancybox-show-thumbs .fancybox-thumbs{display:block}.fancybox-show-thumbs .fancybox-inner{right:212px}.fancybox-thumbs__list{font-size:0;height:100%;list-style:none;margin:0;overflow-x:hidden;overflow-y:auto;padding:0;position:absolute;position:relative;white-space:nowrap;width:100%}.fancybox-thumbs-x .fancybox-thumbs__list{overflow:hidden}.fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar{width:7px}.fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar-track{background:#fff;border-radius:10px;box-shadow:inset 0 0 6px rgba(0,0,0,.3)}.fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar-thumb{background:#2a2a2a;border-radius:10px}.fancybox-thumbs__list a{-webkit-backface-visibility:hidden;backface-visibility:hidden;background-color:rgba(0,0,0,.1);background-position:50%;background-repeat:no-repeat;background-size:cover;cursor:pointer;float:left;height:75px;margin:2px;max-height:calc(100% - 8px);max-width:calc(50% - 4px);outline:none;overflow:hidden;padding:0;position:relative;-webkit-tap-highlight-color:transparent;width:100px}.fancybox-thumbs__list a:before{border:6px solid #ff5268;bottom:0;content:"";left:0;opacity:0;position:absolute;right:0;top:0;transition:all .2s cubic-bezier(.25,.46,.45,.94);z-index:99991}.fancybox-thumbs__list a:focus:before{opacity:.5}.fancybox-thumbs__list a.fancybox-thumbs-active:before{opacity:1}@media (max-width:576px){.fancybox-thumbs{width:110px}.fancybox-show-thumbs .fancybox-inner{right:110px}.fancybox-thumbs__list a{max-width:calc(100% - 10px)}} div.rcnav:not(.cup) { background: #fff; position: relative; top:0; z-index:4; transition: top 0.35s ease-in-out; } @media (min-height: 992px) { div.rcnav:not(.cup) { position: sticky; top:120px; } .hasSecondaryNav div.rcnav:not(.cup) { top: 162px; } .primary-nav-hidden div.rcnav:not(.cup) { top: 0px; } .primary-nav-hidden.hasSecondaryNav div.rcnav:not(.cup) { top: 60px; } } @media (max-width: 1020px) and (min-height: 992px) { div.rcnav:not(.cup), .hasSecondaryNav div.rcnav:not(.cup) { top: 132px; } } @media (max-width: 760px) { div.rcnav:not(.cup) { position: sticky; top:132px; } .primary-nav-hidden div.rcnav:not(.cup) { top: 60px; } } .cup.rcnav { display: flex; padding: 0 24px;} .cup.rcnav.edit { flex-direction: column; } .rcnav .nav label { font-weight: bold; position:relative; z-index:1; display: inline-block; cursor:pointer; margin:6px 12px 0; padding: 12px 0; outline-offset:6px; border-bottom: solid 2px transparent; } .rcnav .nav>div { display:none; position: absolute; z-index: 6; top: 100%; left:0; right:0; } .rcnav .nav input:focus+label { } .rcnav .nav input:checked+label { border-bottom-color: #f00; } .rcnav .nav input:checked+label+div { display: flex; } .rcnav .nav label:focus+label+div { display:flex; } .rcnav .nav input { appearance:none; -webkit-appearance:none; position: absolute; z-index:2; border:none; background:none; cursor:pointer; margin: 20px 0 0 12px; outline-offset: 2px; width: 1em; height: 1em;} .rcnav .nav input.off { outline:none; } .rcnav .open { display: flex; justify-content: space-between; padding: 24px 24px 24px calc(75% - 540px); background: #f7f7f7; } .rcnav .open>div { flex-grow:2; margin: 0 24px; } .rcnav .open div.main { margin-bottom: 24px; } .rcnav .open div.right { flex-basis: 33%; flex-grow:1; } .rcnav .open div.right.col2 { flex-basis: 50%; } .rcnav .open h4 { margin-bottom: 12px; } .rcnav .open ul { list-style-type: none; margin:0 24px 0 0; padding:0; } .rcnav .open li { padding-bottom: 6px; } .rcnav .open a { text-decoration: none; } .rcnav .open .main a { font-weight: bold; } .rcnav div.searchbar { display:flex; position: relative; flex-grow:1; } div.searchbar>div:first-child { display:flex; flex-grow:1; padding: 12px 24px 12px 0; } div.searchbar input { padding: 9px 12px 9px 32px; margin: 9px 24px 9px 0; border: solid 1px #ccc; border-bottom-color: #000; width:100%; max-width: 592px; } div.searchbar::before { content: ""; width: 1em; height: 24px; position: absolute; top: 32px; left: 12px; background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnPjxwYXRoIGQ9J00xOC45LDE4LjFsLTYtNmMxLTEuMiwxLjYtMi44LDEuNi00LjNjMC0zLjctMy02LjgtNi44LTYuN1MxLDQuMSwxLDcuOHMzLDYuOCw2LjgsNi43YzEuNiwwLDMuMS0wLjYsNC40LTEuNiBsNiw2TDE4LjksMTguMXogTTcuOCwxMy40Yy0zLjEsMC01LjYtMi41LTUuNi01LjZzMi41LTUuNiw1LjYtNS42YzMuMSwwLDUuNiwyLjUsNS42LDUuNmMwLDAsMCwwLDAsMEMxMy40LDEwLjksMTAuOSwxMy40LDcuOCwxMy40IEM3LjgsMTMuNCw3LjgsMTMuNCw3LjgsMTMuNHonLz48L3N2Zz4=) no-repeat left top } xdiv.searchbar input:invalid+div { visibility: hidden; } xdiv.searchbar input:focus+div { visibility: visible; } .rcnav ul.filters { flex-basis: 100%; display: flex; flex-wrap:wrap; margin:0 0 6px; padding:0; list-style: none; } .rcnav ul.filters>li { background: #000; color: #fff; font-size: 12px; padding: 4px 12px; margin-right: 6px; border-radius: 12px; white-space:nowrap; cursor:pointer; } .rcnav ul.filters>li::after { content: "\2613"; padding: 0 2px; margin: 0 -6px 0 6px; border-radius: 12px; } .rcnav ul.filters>li:hover { background: #444; } .rcnav ul.filters>li.n { background:none; color: inherit; margin-left:auto; } .rcnav ul.filters>li.n::after { display:none; } .rcnav ul.filters>li.n>a:not(:hover) { color: #999; } .rcnav ul.filters>li.n>a::before { content: attr(data-n); padding-right: 4px; } .rcnav ul.filters>li.n>a.a { color:#000; font-weight: bold; } @media (min-width: 760px) { .rcnav .nav { float: right; margin-bottom: 12px;} .rcnav .nav:focus-within { outline: dotted 1px #999; outline-offset 6px; } .rcnav .nav input:not(.on):checked ~ input.off { position: fixed; display:block; visibility:visible; z-index:0; top:0; left:0; right:0; bottom:0; width: 100vw; height:100vh; } .rcnav .open.dark { background:#000; color:#fff; } .rcnav .open.dark * { color: #fff; } .rcnav .open h4 { border-bottom: solid 1px #999; padding-bottom: 12px;} .rcnav .open ul.col2 { columns:2; } } @media (max-width: 760px) { #main .secondarynav { padding-right: 64px; } .cup.rcnav { padding:0; } .rcnav div.searchbar { padding-right: 64px; } .rcnav div.searchbar:not(.on) { display:none; } .rcnav div.searchbar>div:first-child { padding:0 12px; } .rcnav div.searchbar:before { top: 24px; left:24px; } .hasSecondaryNav div.rcnav:not(.cup) { z-index:999;} .rcnav div.searchbar input { margin-right: 12px;} .rcnav div.searchbar .button { padding: 6px 12px; margin-top: 9px; margin-right:0;} .rcnav div.searchbar:not(.on) ~ ul.filters { margin-bottom:0; } .rcnav>a.button { display:none; } .rcnav .nav { position: static; left:0; top:0; width: 100%; background: #fff; z-index:9; } .rcnav .nav input { right:0; width: 100%; height: 40px; margin-top:12px; display:block; visibility:visible;} .rcnav .nav input:checked { z-index:0; } .rcnav .nav .off,.rcnav .nav .on { top:-40px; margin:0; right: 12px; width: 24px; height: 24px; z-index:2; visibility:visible; outline:none !important;} .rcnav .nav .off { display:block; border-radius:0; background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxMiA0Jz48cG9seWxpbmUgZmlsbD0nbm9uZScgc3Ryb2tlPScjMDAwJyBzdHJva2Utd2lkdGg9JzEnIHBvaW50cz0nMSAwIDQgMy4yNzMgNyAwJy8+PC9zdmc+) no-repeat center top/20px} .rcnav .nav input.on:not(:checked) ~.off { z-index:1; bottom:0; height: auto; transform: scaleY(-1); background-position: center bottom; background-color: transparent; } .rcnav .nav input.on:checked ~ label { display:none; } .rcnav .nav label { display: block; padding-right: 32px; border-top: solid 2px #000; border-bottom:none !important} .rcnav .nav input#rcnav0+label { border-top:none; } .rcnav .nav label::after { content:"+"; position: absolute; right: 9px; top: 12px; } .rcnav .nav input:checked+label::after { content:"-"; } .rcnav .nav>div { position: relative; top:auto; } .rcnav .open { padding: 12px 0; background: #fff; flex-direction: column; } .rcnav .open div { margin: 0 12px; } .rcnav .open li { border-bottom: solid 1px #eee; } #rcFilter { padding: 24px 12px 44px 24px; } } @media (max-width: 760px) and (max-height: 992px) { .rcnav .nav .off,.rcnav .nav .on { position: fixed; top: 94px; } .primary-nav-hidden .rcnav .nav .off,.primary-nav-hidden .rcnav .nav .on { top: 22px; } } .rcgrid.cup.columns { padding-bottom: 24px !important; } .tabs .rcgrid.cup.columns + .rcgrid.cup.columns { margin-top: -24px; } .rcgrid.flickr .crow .crow { animation: flickr linear 1.5s; } @keyframes flickr { 0% { opacity: 0; } 96% { opacity: 0; } 100% { opacity: 1; } } .rcgrid p.type { margin: 0; font-size: 12px; font-weight: bold; } .rcgrid .feature p.type { font-size: 16px; } .rcgrid p.info { margin: 0; font-size: 12px; } .rcgrid p.text, .rcgrid span.text { display: block; margin-bottom: auto; overflow: hidden; opacity: 0; max-height: 0px; } .rcgrid span.text > p:last-child { margin-bottom: 0; } .rcgrid > .background + .crow { padding-top: 24px; } .rcgrid .primary .feature { position: absolute; background: #00AC3E; color: #fff; padding: 0 12px; font-size: 12px; line-height: 16px; } .rcgrid .primary > .background { background-size: cover; } .rcgrid .featuretitle { flex-basis: 25%; } .rcgrid .featuredetail { flex-basis: 25%; flex-grow: 1; } .rcgrid a.full { opacity: 0; outline-color: #0088CE77; position: static; } .rcgrid a.full.link::after { display: none; } .rcgrid.tiles a.full { opacity: 1; text-indent: 0; } .rcgrid.tiles a.full.link::after { display: inline-block; } .rcgrid.tiles a.full.arrow::after { bottom: 32px; } .rcgrid audio { position: absolute; bottom: 0; width: 100%; max-width: 600px; } .rcgrid .cup .crow.gap, .rcgrid .cup .crow.gaap { padding-bottom: 0; justify-items: space-between; } .rcgrid div.crow.c1 { flex-direction: column; flex-wrap: nowrap; } .rcgrid div.crow.c3.uneven > div:first-child { flex-basis: calc(66.6% - 8px); } .rcgrid div.pri { display: flex; } .rcgrid .crow.gap > div, .rcgrid .crow.gaap > div { margin-top: 0 !important; } .rcgrid .crow > .double > div { height: auto !important; } .rcgrid.tiles div.crow > div.cup { padding: 16px; border: none; } .rcgrid.tiles div.crow > div.cup::before { content: ""; display: block; position: absolute; z-index: -1; top: 0; bottom: 16px; left: 0; right: 0; background: #f7f7f7; border-radius: 12px; } .rcgrid.tiles div.crow > div.cup .background { border-radius: 12px 12px 0 0; left: -16px; top: -16px; right: -16px; } .rcgrid.tiles.twhite .crow > div.cup::before { background: #fff; } .rcgrid.tiles.tblack .crow > div.cup::before { background: #000; } .rcgrid.tiles.tchar .crow > div.cup::before { background: #1d1c1d; } .rcgrid.tiles.tstone .crow > div.cup::before { background: #F3EDE0; } .rcgrid.dark.tiles.tshade .crow > div.cup::before { background: #d8dada; } @media (min-width: 1280px) { .rcgrid.tiles .crow.c1 > div.cup:nth-child(n+2) { margin-top: 8px !important; } .rcgrid.tiles .crow.c1.gaap > div.cup:nth-child(n+2) { margin-top: 24px !important; } } .rcgrid.tiles p.type { font-weight: normal; margin-bottom: 10px; } .rcgrid.tiles div.crow .plate > div.primary + div.secondary { padding-top: 16px; } .rcgrid.tiles .primary .background { overflow: hidden; } .rcgrid.tiles .primary .background::before { content: ""; position: absolute; transform: none; transition: transform 0.5s ease-in; } .rcgrid.tiles div.plate:hover .primary .background::before { left: 0; top: 0; right: 0; bottom: 0; background: inherit; transform: scale(1.05); } .rcgrid.tiles .plate:hover { outline: none; } .rcgrid.tiles .plate:focus-within a.full:before { outline: solid 3px #0088CE77; border-radius: 12px; } .rcgrid.tiles p.text { max-height: none; opacity: 0.8; overflow: visible; } .rcgrid.tiles p.text::after { content: " "; width: 2em; display: inline-block; } .rcgrid.tiles .c4 > div:not(.triple) p.text, .rcgrid.tiles .c3 > .crow:not(.double) p.text, .rcgrid.tiles .c3 > .c3 p.text, .rcgrid.tiles .c2 > .c2 p.text { x-font-size: 14px; } .rcgrid.tiles .c2 .primary.hasbg { flex-basis: 50% !important; padding: 24px !important; } .rcgrid .c2 .crow.gap .plate:hover.hastx .primary.hasbg, .rcgrid .c2 .crow.gap .plate:focus-within.hastx .primary.hasbg { padding: 0; flex-basis: 0; flex-grow: 0; transition: flex-basis 0.5s ease-in-out; transition-delay: 0.25s; } .rcgrid .c2 .crow.gap .plate:hover.hastx .secondary, .rcgrid .c2 .crow.gap .plate:focus-within.hastx .secondary { display: flex; flex-direction: column; } .rcgrid .c2 .crow.gap .plate:hover.hastx p.text, .rcgrid .c2 .crow.gap .plate:focus-within.hastx p.text, .rcgrid .c2 .crow.gap .plate:hover.hastx span.text, .rcgrid .c2 .crow.gap .plate:focus-within.hastx span.text { max-height: 8em; opacity: 1; transition: opacity 0.75s, max-height 0.5s; transition-delay: 0.75s; } .rcgrid .crow .plate { outline-offset: 6px; margin-bottom: 16px; } .rcgrid div.crow .plate div.secondary { padding-bottom: 0; } .rcgrid .plate.hastx:hover a.full { transition-delay: 1s; } .rcgrid .plate:hover, .rcgrid .plate:focus-within { outline: solid 1px #ccc; } .rcgrid .plate:hover a.full, .rcgrid .plate:focus-within a.full { text-indent: 0; opacity: 1; transition: opacity 0.5s; } .rcgrid .plate:hover a.full.link::after, .rcgrid .plate:focus-within a.full.link::after { display: inline-block; } .rcgrid div.crow.c2.fiverow { flex-direction: column; justify-content: stretch; flex-wrap: nowrap; position: relative; min-height: 33vw; } .rcgrid div.crow.c2.fiverow > div { flex-basis: 50%; width: calc(50% - 12px); } .rcgrid div.crow.c2.fiverow > div:nth-of-type(n+3) { flex-basis: 33.3%; margin-left: 24px; position: absolute; top: 0; left: 50%; overflow: hidden; height: calc(33.3% + 1px); } .rcgrid div.crow.c2.fiverow > div:nth-of-type(n+3) .text { display: none; } .rcgrid div.crow.c2.fiverow > div:nth-of-type(4) { top: 33.3%; } .rcgrid div.crow.c2.fiverow > div:nth-of-type(5) { top: 66.6%; } @media (min-width: 1280px) { .rcgrid div.crow.c2.fiverow { min-height: 420px; } } .rcgrid div.crow.hasr .aspect.asquare::before { padding-top: 50%; } .rcgrid div.crow.flip:not(.c1) { flex-direction: row-reverse; } .rcgrid .secondary.button { align-self: flex-start; } /* layouts with no images */ .rcgrid.noimg .primary.hasbg { display: none; } .rcgrid.noimg .aspect::before { display: none; } .rcgrid.noimg .secondary h3, .rcgrid.noimg .secondary h4 { margin-bottom: 0; } .rcgrid.noimg p.text, .rcgrid.noimg span.text { display: block; text-overflow: ellipsis; max-height: 8em; opacity: 1; } .rcgrid.noimg div.cup { border-top: solid 1px #000000; border-bottom: solid 1px #000000; padding-top: 24px; padding-bottom: 12px; } .dark .rcgrid.noimg div.cup { border-color: #fff; } .light .rcgrid.noimg div.cup { border-color: #000; } .rcgrid.noimg .crow div.cup { margin-bottom: -1px; } .rcgrid.noimg .crow.gap .plate:hover .secondary { display: block; } @media (min-width: 1280px) { .rcgrid.noimg .crow.gap.c2:not(.fiverow) > div { flex-basis: calc(50% - 16px); } .rcgrid.noimg .crow.gap.c4 > div:not(.double):not(.triple) { flex-basis: calc(25% - 24px); } } .rcgrid.noimg a.full { text-indent: 0; position: static; opacity: 1; } .rcgrid.noimg a.full.link::after { display: inline-block; } /* only feature images */ .rcgrid.ftonly div.cup:not(.feature) { border-top: solid 1px #000000; border-bottom: solid 1px #000000; padding-top: 24px; padding-bottom: 12px; } .dark .rcgrid.ftonly div.cup:not(.feature) { border-color: #fff; } .light .rcgrid.ftonly div.cup:not(.feature) { border-color: #000; } .rcgrid.ftonly div.cup:not(.feature) .primary.hasbg { display: none; } .rcgrid.ftonly div.cup:not(.feature) .aspect::before { display: none; } .rcgrid.ftonly div.cup:not(.feature) p.text, .rcgrid.ftonly div.cup:not(.feature) span.text { display: block; text-overflow: ellipsis; max-height: 8em; opacity: 1; margin-bottom: 12px; } @media (max-width: 760px) { .rcgrid.ftonly div.cup:not(.feature) p.text, .rcgrid.ftonly div.cup:not(.feature) span.text { max-height: unset; } } .rcgrid.ftonly div.cup:not(.feature) a.full { text-indent: 0; position: static; opacity: 1; } .rcgrid.ftonly div.cup:not(.feature) a.full.link::after { display: inline-block; } .rcgrid.ftonly .crow div.cup:not(.feature) { margin-bottom: -1px; } .rcgrid.noinfo p.info { display: none; } .rcgrid.notype p.type { display: none; } .rcgrid .notext p.text, .rcgrid .notext span.text { display: none; } .rcgrid.notype .cup.feature a.full { text-indent: 0; position: static; opacity: 1; } .rcgrid.notype .cup.feature a.full::after { display: inline-block; } .rcgrid div.showmore { flex-basis: 100% !important; text-align: center; } .rcgrid div.showmore ~ div.cup { display: none; } .rcgrid.related:not(.done) { display: none; } /* progressive disclosure */ .rcgrid.phover .plate:focus-within { border-radius: 1.3px; outline-offset: 16px; outline: solid 2px #000; } .rcgrid.phover span.text, .rcgrid.phover .crow .c2 p.text, .rcgrid.phover .crow .c3 p.text, .rcgrid.phover .crow > div:not(.feature) p.text { visibility: hidden; margin-bottom: -24px !important; } .rcgrid.phover .secondary.button { width: 40px; margin-left: auto; min-width: 1em; min-height: 40px; z-index: -1; overflow: hidden; padding: 10px 16px; border-color: transparent; } .rcgrid.phover .secondary.button::after { content: "+"; position: absolute; top: 0; left: 0; right: 0; bottom: 0; font-size: 24px; font-weight: normal; line-height: 38px; text-align: center; background-color: #fff; } .rcgrid.phover .crow > .cup::before { transition: filter 0.3s linear; } .rcgrid.phover .crow > .cup:not(.feature):hover { overflow: hidden; } .rcgrid.phover .crow > .cup:not(.feature):hover .plate { outline: none; } .rcgrid.phover .crow > .cup:not(.feature):hover::before { filter: invert(1); } .rcgrid.phover .crow > .cup:not(.feature):hover .secondary { filter: invert(1); } .rcgrid.phover .crow > .cup:not(.feature):hover p.type { display: none; } .rcgrid.phover .crow > .cup:not(.feature):hover span.text, .rcgrid.phover .crow > .cup:not(.feature):hover p.text { visibility: visible; } .rcgrid.phover .crow > .cup:not(.feature):hover .secondary.button { width: auto; margin-left: 0; z-index: 4; overflow: visible; border-color: inherit; animation: phoverbtn ease-in 0.25s; } .rcgrid.phover .crow > .cup:not(.feature):hover .secondary.button::after { display: none; } .rcgrid.phover .crow > .cup:focus-within span.text, .rcgrid.phover .crow > .cup:focus-within p.text { visibility: visible; } .rcgrid.phover .crow > .cup:focus-within .secondary.button { width: auto; margin-left: 0; z-index: 4; overflow: visible; border-color: inherit; } .rcgrid.phover .crow > .cup:focus-within .secondary.button::after { display: none; } .rcgrid.phover .crow > .crow:first-child > .feature .secondary.button { width: auto; margin-left: 0; z-index: 4; overflow: visible; border-color: inherit; animation: none; } .rcgrid.phover .crow > .crow:first-child > .feature p.type, .rcgrid.phover .crow > .crow:first-child > .feature .secondary.button::after { display: none; } .rcgrid.phover.twhite .secondary.button::after { background-color: #f7f7f7; } .rcgrid.phover.dark .secondary.button::after { background-color: #333; } @keyframes phoverbtn { 0% { opacity: 0; color: transparent; } 50% { opacity: 1; color: transparent; } 100% { color: inherit; } } @media (max-width: 992px) and (min-width: 760px) { .rcgrid .c4.wide .c3.triple + .c1 { flex-direction: row; } } @media (max-width: 760px) { .rcgrid .cup.feature .aspect::before { padding-top: 50%; } .rcgrid:not(.phover) .feature .plate.full { flex-direction: row-reverse; flex-wrap: wrap !important; margin-bottom: 24px; } .rcgrid .featuretitle { order: -1; flex-basis: 100%; } .rcgrid .featuredetail { flex-basis: 50%; } .rcgrid.noimg .featuredetail { flex-basis: 100%; } .rcgrid .feature .primary.hasbg { min-height: 25vw; } .rcgrid .feature .crow.never .primary.hasbg { min-height: 16vw; } .rcgrid .crow.gap .crow.gap { padding-left: 0; } .rcgrid .crow.gap.c4.never > div { flex-basis: calc(50% - 12px); } .rcgrid div.crow.c2.fiverow { flex-direction: row; flex-wrap: wrap; margin-left: -24px; } .rcgrid div.crow.c2.fiverow > div { margin-left: 24px; border-top: none; flex-basis: calc(50% - 24px); } .rcgrid div.crow.c2.fiverow > div:nth-of-type(n+3) { position: static; height: auto; flex-basis: calc(33.3% - 24px); } .rcgrid div.mscroll { overflow: scroll; display: block; scroll-snap-type: x mandatory; } .rcgrid div.mscroll::-webkit-scrollbar { width: 0; height: 0; } .rcgrid .mscroll .crow:not(.c1) { flex-direction: row !important; scroll-snap-align: start; padding-right: 40px !important; } .rcgrid .mscroll > .crow.c2, .rcgrid .mscroll > .crow.m2 { width: 166%; gap: 24px; } .rcgrid .mscroll > .crow.c3, .rcgrid .mscroll > .crow.m3 { width: 250%; gap: 24px; } .rcgrid .mscroll > .crow.c4, .rcgrid .mscroll > .crow.m4 { width: 333%; gap: 24px; } .rcgrid .mscroll > .crow > div { scroll-snap-align: start; max-width: calc(83vw - 32px); gap: 24px; flex-basis: 100% !important; flex-wrap: nowrap; } .rcgrid .mscroll > .crow > .crow:not([data-n = '1']) { max-width: 166vw; } .rcgrid .mscroll > .crow.m4 > .crow:not([data-n = '1']) { max-width: 250vw; } .rcgrid .mscroll > .crow > .crow > div { max-width: calc(83vw - 32px); flex-basis: 100%; } .rcgrid div.pri > .crow.gap { flex-direction: row; width: 200%; flex-wrap: nowrap; } .rcgrid.noimg div.pri > .crow.c2.gap { width: 250%; flex-direction: row; } .rcgrid.noimg div.pri > .crow.gap > div { border: none; border-right: solid 1px #000000; padding-right: 12px; margin-right: 12px; margin-bottom: 0; } .rcgrid.noimg div.pri > .crow.gap > div:last-child { border-right: none; padding-right: 0; margin-right: 0; } .rcgrid.noimg div.pri > .crow.c2.gap > div { flex-basis: calc(20% - 12px) !important; } .rcgrid.noimg div.pri > .crow.c4.gap > div { flex-basis: calc(25% - 12px); } .rcgrid .mscroll .headXT, .rcgrid .mscroll .headXS { font-size: 4.4vw; } .rcgrid .mscroll p.text, .rcgrid .mscroll span.text { visibility: visible !important; } .rcgrid .mscroll .secondary.button { width: auto; margin-left: 0; z-index: 4; overflow: visible; border-color: inherit; } .rcgrid .mscroll .secondary.button::after { display: none; } } @media (max-width: 640px) { .rcgrid .cup.feature .plate.full { flex-direction: column; flex-wrap: nowrap !important; } .rcgrid .cup.feature .aspect::before { padding-top: 75%; } } .rcgrid a.personal { display: inline-block; background: #d8dada; font-size: 12px; padding: 4px 12px; border-radius: 12px; position: absolute; top: 0; white-space: nowrap; cursor: pointer; } .rcgrid a.personal::after { content: "\2613"; padding: 0 2px; margin: 0 -6px 0 6px; border-radius: 12px; } .rcgrid a.personal:hover { background-color: #eee; } .rcgrid a[name='readagain'] ~ div:not(.background) { max-height: 420px; overflow: hidden; transition: max-height 0.5s; } .rcgrid a[name='readagain'] ~ div:not(.show) { max-height: 0; padding: 0; } #rcFilter { max-width: 760px; } #rcFilter .boxes { columns:2; } #rcFilter label { display: block; } #rcFilter label>input { margin-right: 6px; } #rcFilter h4 { border-bottom: solid 1px #000; padding-bottom: 12px; } #rcFilter h5 { font-size: 16px; border-top: solid 1px #eee; padding-top: 12px; margin-top:12px } #rcFilter h4+h5 { border:none; } #rcFilter .cup.cta { position: sticky; background: #fff; bottom:-44px; margin:0; padding: 12px 0 6px; } @media (min-width: 1280px) { #rcFilter { max-width: 992px; } #rcFilter .boxes { columns:3; } } @media (max-width: 760px) { #rcFilter label { padding-left: 18px; } #rcFilter label>input { margin-left: -18px; width: 12px; } } #rcNoResults:not(.active) { display: none;} #rcNoResults p { background-color:#ED7000; padding: 6px 12px; max-width: 1280px; margin: 12px 24px;} #rcNoResults p::before { content:"\26A0"; padding-right: 6px; } #rcResults { flex-basis: 100%; padding-top:6px;} #rcResults:not(.active) { display: none; } #rcResults>div { position: relative; min-height: 72px; margin: 6px 24px; padding-left: 144px; padding-bottom: 12px; border-bottom: solid 1px #ccc;} #rcResults a.thumb { position: absolute; left: 0; width: 120px; height: 60px; overflow:hidden; background: #fafafa no-repeat center center/cover; } #rcResults a.thumb>img { width: 120px; display:inline-block; margin: -10px 0; } #rcResults a.title { display:block; text-decoration:none; font-weight: bold;} #rcResults p { margin: 4px 0 6px; max-width: 100%; white-space:nowrap; overflow:hidden; text-overflow: ellipsis;} #rcResults p.info { margin:0; font-size: 12px; } #rcResults span.type { font-weight: bold; padding-right: 12px; } #rcResults>div:nth-child(n+6) { display:none; } #rcResults>div.lower { padding-top: 30px; margin-top: -6px; border-top: solid 1px #000; } #rcResults>div.lower::before { display:block; position: absolute; top:0; left:0; right:0; height: 24px; font-size: 12px; content:attr(data-more); border-bottom: solid 1px #ccc; } @media (max-width: 992px) { #rcResults>div { padding-left: 102px; } #rcResults a.thumb { width: 90px; } #rcResults p { font-size: 12px; } } @media (max-width: 640px) { #rcResults>div { padding-left: 72px; } #rcResults a.thumb { width: 60px; height: 80px; } #rcResults p { white-space: initial; } } .rcgrid .fav-container { justify-content: flex-start !important; column-gap: 23px; width: auto; } .rcgrid .fav-u { margin-left: 10px; } .rcgrid .fav-confirm { display: block; position: relative; z-index: 16; margin-top: 10px; } .rcgrid .fav-confirm > a { margin-right: 10px; } .rcnav .fav-nav-icon, .rcgrid .fav-share-icon, .rcgrid .fav-del-icon, .rcgrid .fav-save-icon { background-repeat: no-repeat; background-size: 20px; background-position: center; display: inline-block; padding: 12px; position: relative; z-index: 3; margin: -3px 3px 0; vertical-align: top; } .rcnav .fav-nav { position: absolute; z-index:9; top: 20px; right: 0; } @media (max-width: 760px) { .rcnav .fav-nav { top: -46px; right: 39px; } } .rcnav .fav-nav-icon, .rcgrid .fav-save-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21.6 21.6'%3E%3Cpath d='M10.8 5.70011 12 9.6h4.3L12.8 12.4l1.6 4.3999-3.6-2.79993L7.3 16.69987 8.6 12.3 5.2 9.6H9.5l1.3-3.89992m0-3.79991L8.6 8.50005H1.8L7.3 12.8 5.2 19.6998l5.6-4.2999 5.6 4.2999L14.2 12.8l5.6-4.2999H12.9Z'/%3E%3C/svg%3E"); } .rcnav .fav-nav-icon.saved, .rcgrid .fav-save-icon.saved { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21.6 21.6'%3E%3Cpath d='M10.8 1.9L8.6 8.5H1.8l5.5 4.3l-2.1 6.9l5.6-4.3l5.6 4.3l-2.2-6.9l5.6-4.3h-6.9L10.8 1.9z'/%3E%3C/svg%3E"); } .rcgrid .fav-del-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21.6 21.6'%3E%3Cpath d='M5.18 19.8H16.43V6.3H5.18ZM6.3 7.43h9V18.68h-9Zm6.75-3.38V1.8H8.55V4.05H4.05V5.18h13.5V4.05Zm-1.12 0H9.68V2.93h2.25ZM8.24 16.43H9.36V9.68H8.24Zm4 0h1.12V9.68H12.24Z'/%3E%3C/svg%3E"); } .rcgrid .fav-share-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21.6 21.6'%3E%3Cpath d='M16.425 13.05a3.36091 3.36091 0 0 0-2.716 1.388l-5.32-2.66a3.05077 3.05077 0 0 0 0-1.956l5.32-2.66a3.36259 3.36259 0 1 0-.659-1.987 3.32889 3.32889 0 0 0 .16095.978l-5.32 2.66a3.375 3.375 0 1 0 0 3.974l5.32 2.66a3.33989 3.33989 0 0 0-.16095.978 3.375 3.375 0 1 0 3.375-3.375Zm0-10.125a2.25 2.25 0 1 1-2.25 2.25A2.25214 2.25214 0 0 1 16.425 2.925ZM5.175 13.05a2.25 2.25 0 1 1 2.25-2.25A2.25207 2.25207 0 0 1 5.175 13.05Zm11.25 5.625a2.25 2.25 0 1 1 2.25-2.25A2.25207 2.25207 0 0 1 16.425 18.675Z'/%3E%3C/svg%3E"); } .rcgrid .fav-disabled { pointer-events: none; } #fav-share li { list-style: none; } #fav-share li > a { background-repeat: no-repeat; display: block; margin-bottom: 15px; padding-left: 30px; } #fav-share a.linkedin { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z'/%3E%3C/svg%3E"); } #fav-share a.twitter { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21.6 21.6'%3E%3Cpath d='M19.8 5.25A8.13 8.13 0 0 1 18 7.15v.5A10.36 10.36 0 0 1 7.6 18.05a10.29 10.29 0 0 1-5.8-1.9 2.77 2.77 0 0 0 .9.1 7.27 7.27 0 0 0 4.5-1.6 3.54 3.54 0 0 1-3.4-2.5 1.7 1.7 0 0 0 .7.1 3.08 3.08 0 0 0 1-.1 3.75 3.75 0 0 1-2.9-3.6 3.37 3.37 0 0 0 1.7.5 3.4 3.4 0 0 1-1.6-3 3.45 3.45 0 0 1 .5-1.8 10.56 10.56 0 0 0 7.5 3.8 2 2 0 0 1-.1-.8A3.75 3.75 0 0 1 17 4.65a6.31 6.31 0 0 0 2.3-.8 3.89 3.89 0 0 1-1.6 2A8.3 8.3 0 0 0 19.8 5.25Z'/%3E%3C/svg%3E"); } #fav-share a.facebook { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21.6 21.6'%3E%3Cpath d='M19.8 2.8v16a1.00209 1.00209 0 0 1-1 1H14.3v-7h2.3L17 10H14.3V8.3c0-.8.2-1.3 1.3-1.3H17V4.6c-.3 0-1.1-.1-2.1-.1a3.28453 3.28453 0 0 0-3.5 3.6v2H9.1v2.7h2.3v7H2.8a1.00209 1.00209 0 0 1-1-1V2.8a.94477.94477 0 0 1 1-1h16A.94477.94477 0 0 1 19.8 2.8Z'/%3E%3C/svg%3E"); } #fav-share a.copy { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21.6 21.6'%3E%3Cpath d='M10.21 12.34a1 1 0 0 1-.73-.3l-.21-.21-.8.79.22.22a2.16 2.16 0 0 0 3 0L17 7.52a2.15 2.15 0 0 0 0-3L15 2.43a2.14 2.14 0 0 0-1.52-.63A2.1 2.1 0 0 0 12 2.43L6.63 7.75a2.15 2.15 0 0 0 0 3l.62.61L4.56 14.08a2.15 2.15 0 0 0 0 3l2.05 2.05a2.14 2.14 0 0 0 1.52.63 2.1 2.1 0 0 0 1.51-.63L15 13.85a2.15 2.15 0 0 0 0-3l-.23-.23-.8.79.23.23a1 1 0 0 1 .3.72 1 1 0 0 1-.3.72L8.85 18.38a1 1 0 0 1-.72.29 1 1 0 0 1-.72-.29L5.35 16.32a1 1 0 0 1-.3-.72 1 1 0 0 1 .3-.72l5.32-5.32a1 1 0 0 1 1.45 0l.64.65L10.93 12A1 1 0 0 1 10.21 12.34Zm1.18-4.2a2.09 2.09 0 0 0-1.51.62L8 10.6 7.43 10a1 1 0 0 1 0-1.45l5.32-5.32a1 1 0 0 1 .72-.3 1 1 0 0 1 .72.3l2.06 2.06a1 1 0 0 1 0 1.44L13.56 9.41l-.65-.65A2.13 2.13 0 0 0 11.39 8.14Z'/%3E%3C/svg%3E"); } #fav-share a.email { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21.6 21.6'%3E%3Cpath d='M1.8 4.05v13.5h18V4.05ZM18.34 5.18l-7.54 6-7.54-6Zm.34 11.25H2.93V6.35l7.87 6.3 7.88-6.3Z'/%3E%3C/svg%3E"); } @font-face { font-family: 'NHGeDS'; src: url('https://scache1.vzw.com/globalnav/fonts/verizon-nhg/VerizonNHGeDS-Regular.woff2') format('woff2'), url('https://www.verizon.com/business/bin/get/font.VerizonNHGeDS-Regular.woff') format('woff'); font-weight: normal; font-style: normal; font-display:swap; } @font-face { font-family: 'NHGeDS'; src: url('https://scache2.vzw.com/globalnav/fonts/verizon-nhg/VerizonNHGeDS-Bold.woff2') format('woff2'), url('https://www.verizon.com/business/bin/get/font.VerizonNHGeDS-Bold.woff') format('woff'); font-weight: bold; font-style: normal; font-display:swap; } @font-face { font-family: 'NHGeDS'; src: url('https://scache1.vzw.com/globalnav/fonts/verizon-nhg/VerizonNHGDS-Light.woff2') format('woff2'), url('https://www.verizon.com/business/bin/get/font.VerizonNHGDS-Light.woff') format('woff'); font-weight: 300; font-style: normal; font-display:fallback; } @font-face { font-family: 'NHGeTX'; src: url('https://scache1.vzw.com/globalnav/fonts/verizon-nhg/VerizonNHGeTX-Regular.woff2') format('woff2'), url('https://www.verizon.com/business/bin/get/font.VerizonNHGeTX-Regular.woff') format('woff'); font-weight: normal; font-style: normal; font-display:optional; } @font-face { font-family: 'NHGeTX'; src: url('https://scache2.vzw.com/globalnav/fonts/verizon-nhg/VerizonNHGeTX-Bold.woff2') format('woff2'), url('https://www.verizon.com/business/bin/get/font.VerizonNHGeTX-Bold.woff') format('woff'); font-weight: bold; font-style: normal; font-display:optional; } body { background:#fff; color:#000; font-family: NHGeDS, "Verizon NHG DS", Arial, Sans-Serif; } * { box-sizing: border-box; padding: 0; margin: 0; } body { background:#fff; color:#000; } a { color: inherit; text-decoration: none; } header::after { content:""; display: block; height: 320px; margin-bottom: -320px; } @media (min-height: 780px) and (min-width: 1272px) { header::after { height: 576px; margin-bottom: -576px; } header.cta::after { height: 562px; margin-bottom: -562px; } } #vz-gh20 { top:0; position: sticky; z-index: 1000; background-color: #fff; min-height: 69px; } @media (min-width: 1020px) { header { } #vz-gh20 { min-height: 120px;} } #vz-gh20 .gnav20-desktop .gnav20-sub-header-menu { background:none; } #vz-gh20 .gnav20-desktop .gnav20-sub-header-menu::before { content:""; display: block; position: absolute; top:15px; right:0; bottom:0; left:0; background: #fff; } #vz-gh20 .gnav20-desktop .gnav20-sub-header-menu>div { position:relative; } header>.promo-ribbon { position:sticky; top:0; z-index:999; background:#d8dada; color: #000; font-size: 14px; line-height:14px; width: 100%; min-height: 32px; display:flex; flex-direction: column;} header>.promo-ribbon { background-color:#F3EDE0;} header>.promo-ribbon.invert { background: #6F7171; color: #fff;} header>#vz-gh20~.promo-ribbon { top: 69px; } .promo-ribbon:not(.bcdark) .red { color: #e00; } .promo-ribbon a { color: inherit; } .promo-ribbon a.vz-text-link { text-decoration:underline; } .promo-ribbon>div { margin: auto; width: 100%; max-width: 1272px; text-align: center; padding: 0 24px; transform: translateY(0); animation: promo 1.25s ease-out; } .promo-ribbon .tag { position: relative; padding-left: 12px; } .promo-ribbon .tag::before { content:""; width: 20px; height: 20px; position: absolute; left: -12px; background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMS42IDIxLjYiPjxwYXRoIGQ9Ik0xMi4zMSwxLjgsMS44LDEyLjMxLDkuMjksMTkuOCwxOS44LDkuMjlWMS44Wm02LjM2LDdMOS4yOSwxOC4yMWwtNS45LTUuOSw5LjM5LTkuMzhoNS44OVpNMTQuMTcsNi4zQTEuMTMsMS4xMywwLDEsMSwxNS4zLDcuNDMsMS4xMywxLjEzLDAsMCwxLDE0LjE3LDYuM1oiIGZpbGw9IiNlMDAiLz48L3N2Zz4=) no-repeat left top;} .promo-ribbon.invert .tag::before { filter: greyscale(1) brightness(2); } @media (min-width: 1020px) { header>#vz-gh20~.promo-ribbon { top: 120px; min-height:50px; } } header.fixed>.promo-ribbon { position: fixed; top:0; } @keyframes promo { 0%, 75% { transform: translateY(-28px); opacity:0; } 100% { transform: translateY(0); opacity:1; } } div.secondarynav { background: #fff; z-index:998; width: 100%; max-width: 1272px; min-height: 50px; display:flex; align-items:center; margin: 0 auto; position: sticky; top: 0; border-color: transparent; } .promo-ribbon+div.secondarynav { top: 40px; } #vz-gh20~div.secondarynav { top: 69px; } #vz-gh20~.promo-ribbon+div.secondarynav { top: 96px; } @media (min-width: 1020px) { #vz-gh20~div.secondarynav { top: 120px; } #vz-gh20~.promo-ribbon+div.secondarynav { top: 161px; } } @media (max-height: 480px) { #vz-gh20~div.secondarynav { min-height: 32px; } } header.fixed>.secondarynav { position: fixed; top:0; } header.fixed>.promo-ribbon+.secondarynav { top:40px; } header.fixcta>.secondarynav { position: fixed; top:0 !important; } @media (min-width: 760px) { .secondarynav::before { content:""; display: block; position: absolute; z-index:-1; top:0; bottom:0; left: calc(50% - 50vw); width: calc(100vw - 8px); background-color: inherit; border-color: inherit; } } div.secondarynav.dark { background: #333; } div.secondarynav.shaded { background: #f6f6f6; } div.secondarynav.dark.black { background: #000; } div.secondarynav.dark.char { background: #1b1c1d; } div.secondarynav.dark.red { background: #e00; } div.secondarynav .contact-us { margin: 2px 24px 2px 0; text-decoration:none; font-size: 14px; font-weight: bold; } div.secondarynav .button.small { font-size: 14px; padding: 6px 16px; } div.secondarynav .chat { display: inline-block; margin: 4px 24px 6px 0; vertical-align: middle;} div.secondarynav.dark .chat svg { fill: #fff; } header.cta div.secondarynav {left:0; animation: stickcta ease-in both; animation-timeline: scroll(); animation-range: 232px 430px; } @media (min-width: 1280px) { header.cta div.secondarynav {left: calc(50vw - 644px); } header.fixed>.secondarynav, header.fixcta>.secondarynav { left: calc(50% - 636px); } } @media (min-height: 780px) and (min-width: 1272px) { header.cta div.secondarynav { animation-range: 480px 672px;} } @media (max-width: 1020px) { header.cta div.secondarynav { animation-range: 240px 380px;} } @media (max-width: 760px) { header.cta div.secondarynav { animation-name: stickctam; } header.fixcta>.secondarynav { position: fixed; top: auto !important; bottom:0; min-height: 56px; padding: 6px 0 calc(6px + env(safe-area-inset-bottom)); animation: stickctam 0.35s ease-in; } header.fixcta>.secondarynav>div { margin-right: auto; } } @keyframes stickcta { from {} 1% { position: fixed; z-index:1000;} to { position: fixed; top: 0; z-index:998; } } @keyframes stickctam { from {} 1% { position;fixed;top:auto;bottom: -42px;} to { position:fixed;top:auto;bottom:0;border-top: 1px solid #a7a7a7; } } html[lang="en"] .secondarynav a.contact-us[href^=tel]::before { content: "Call Sales: "; font-weight: bold; display:inline-block; padding: 6px 4px 6px 24px; background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDE4IDE4Ij48cGF0aCBkPSJNMTMuNiwxOGMtMiwwLTUtMS40LTguNi01LTUuMS01LjItNS45LTkuMS00LjMtMTAuN2gwbDEuOS0xLjlhMSwxLDAsMCwxLC45LS40aDBhMS4wOSwxLjA5LDAsMCwxLC45LjRsMy4xLDMuMWExLjI3LDEuMjcsMCwwLDEsMCwxLjhsLTEuMywxLjJhOS40Miw5LjQyLDAsMCwwLDUuMyw1LjNsMS4yLTEuMmExLjI3LDEuMjcsMCwwLDEsMS44LDBsMy4xLDMuMWExLjI3LDEuMjcsMCwwLDEsMCwxLjhsLTEuOSwxLjlBMy43LDMuNywwLDAsMSwxMy42LDE4Wm0tMTIuMS0xNC45Yy0xLjMsMS40LjYsNS40LDQuMyw5LjFzNy43LDUuNiw5LjEsNC4zbC4xLS4xLDEuOS0xLjljLjEtLjEuMS0uMSwwLS4ybC0zLjEtMy4xYy0uMS0uMS0uMS0uMS0uMiwwbC0xLjgsMS45LS4zLS4yYTEwLjkzLDEwLjkzLDAsMCwxLTYuNC02LjRsLS4yLS4zLDEuNy0xLjdjLjEtLjEuMS0uMSwwLS4ybC0zLTMuMWgtLjJaIj48L3BhdGg+PC9zdmc+") no-repeat left center; } div.secondarynav.dark a.contact-us[href^=tel]::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDE4IDE4Ij48cGF0aCBkPSJNMTMuNiwxOGMtMiwwLTUtMS40LTguNi01LTUuMS01LjItNS45LTkuMS00LjMtMTAuN2gwbDEuOS0xLjlhMSwxLDAsMCwxLC45LS40aDBhMS4wOSwxLjA5LDAsMCwxLC45LjRsMy4xLDMuMWExLjI3LDEuMjcsMCwwLDEsMCwxLjhsLTEuMywxLjJhOS40Miw5LjQyLDAsMCwwLDUuMyw1LjNsMS4yLTEuMmExLjI3LDEuMjcsMCwwLDEsMS44LDBsMy4xLDMuMWExLjI3LDEuMjcsMCwwLDEsMCwxLjhsLTEuOSwxLjlBMy43LDMuNywwLDAsMSwxMy42LDE4Wm0tMTIuMS0xNC45Yy0xLjMsMS40LjYsNS40LDQuMyw5LjFzNy43LDUuNiw5LjEsNC4zbC4xLS4xLDEuOS0xLjljLjEtLjEuMS0uMSwwLS4ybC0zLjEtMy4xYy0uMS0uMS0uMS0uMS0uMiwwbC0xLjgsMS45LS4zLS4yYTEwLjkzLDEwLjkzLDAsMCwxLTYuNC02LjRsLS4yLS4zLDEuNy0xLjdjLjEtLjEuMS0uMSwwLS4ybC0zLTMuMWgtLjJaIiBmaWxsPSIjZmZmIi8+PC9zdmc+"); } ul.breadcrumb-list { list-style: none; font-size: 12px; padding:0; margin: 6px auto 6px 20px; } @media (max-width: 992px) { ul.breadcrumb-list { margin-left: 16px; } } @media (max-width: 760px) { ul.breadcrumb-list { display:none; } ul.breadcrumb-list+div { margin-left: auto; } html[lang="en"] .secondarynav div.chat:not(:empty) + a.contact-us[href^=tel]::before { content:"Sales: "; } } ul.breadcrumb-list>li { display: inline-block; position: relative; padding: 2px 0; } ul.breadcrumb-list>li+li:before { content: "/"; width: 12px; text-align: center; display: inline-block; vertical-align: middle; } @media (max-width: 992px) { ul.breadcrumb-list>li+li:before { width: 9px; margin-left: 2px; } } ul.breadcrumb-list li>a { text-decoration: none; font-weight: bold; color: inherit; } ul.breadcrumb-list>li:not(:last-child)>a { color: #6F7171; font-weight: normal; } ul.breadcrumb-list>li:not(:last-child)>a:hover { text-decoration: underline; } .dark ul.breadcrumb-list>li>a{ color: #fff; } .dark.black ul.breadcrumb-list>li:not(:last-child)>a { color: #A7A7A7; } .gnav20 .gnav20-desktop .gnav20-row-one, .gnav20 .gnav20-desktop .gnav20-row-two .gnav20-navigation, .gnav20 .gnav20-desktop .gnav20-row-two .gnav20-utility { opacity: 1;} #vz-gh20:after { visibility: hidden; } #vz-gh20 :after { box-sizing: border-box; } #vz-gh20 a { transition: color .15s ease-out; } @media (min-width: 1020px) { #vz-gh20 .gnav20-desktop .gnav20-sub-header-menu { background:none; } #vz-gh20 .gnav20-desktop .gnav20-sub-header-menu::before { content:""; display: block; position: absolute; top:15px; right:0; bottom:0; left:0; background: #fff; } #vz-gh20 .gnav20-desktop .gnav20-sub-header-menu>div { position:relative; } #vz-gh20 div.vbg.gnav20-content-wrapper { max-width: 1272px; padding: 24px 20px !important; margin-top: 6px !important; opacity:1; max-height: 652px; } #vz-gh20 div.vbg .gnav20-submenu-column li>a { width: auto;} #vz-gh20 div.vbg .gnav20-submenu-column { width: calc(25% - 40px); } #vz-gh20 div.vbg .gnav20-featured-scroll-area { width: calc(25% - 16px) !important; } #vz-gh20 div.vbg .gnav20-L2-content-wrapper { left: 25%; width: 100%; z-index:0;} #vz-gh20 div.vbg .gnav20-L3 { left: 25%; xwidth: 25%} #vz-gh20 div.vbg .gnav20-L1>li>a { z-index:1} #vz-gh20 .gnav20-nav-close { display:none; } #vz-gh20 ul.gnav20-submenu-column.gnav20-L2 { width: auto; } #vz-gh20 .gnav20-submenu-column li a:hover { font-weight: bold; } #vz-gh20 .gnav20-four-col .gnav20-submenu-column li { padding-top: 12px; } #vz-gh20 .gnav20-four-col .gnav20-submenu-column li>a { display:block; padding-bottom: 12px; line-height:20px; margin-right:30px; letter-spacing: .5px; border-bottom: solid 1px #d8dada; } #vz-gh20 .gnav20-four-col { transition:none; } #vz-gh20 .gnav20-bold-non-link>a { font-size: 20px !important; letter-spacing: normal !important; } } #vz-gh20 .gnav20-desktop .gnav20-featured-card .gnav20-sub-header-menu::before { top:65px; } #vz-gh20 .gnav20-featured-card-top-label { padding-bottom: 13px; white-space:nowrap; } #vz-gh20 .gnav20-desktop .gnav20-navigation .gnav20-menu-label[aria-expanded="true"] { color:#e00 !important; border-color:#e00; border-bottom-width:2px; } @media (min-width: 1020px) { #vz-gh20 div.vbg .gnav20-L2 { animation: navDesk 0.15s ease-out; display:none;} #vz-gh20 div.vbg .gnav20-L3 { animation: navDesk 0.15s ease-out;} #vz-gh20 .gnav20-row-two>.gnav20-navigation:not(.opacityOne) { position:relative; left: -75vw;} #vz-gh20 .gnav20-primary-menu>.gnav20-sub-header-menu { display: none; padding-bottom: 24px; height: calc(100vh - 140px); transition:none; max-height: 680px; } #vz-gh20 .gnav20-primary-menu.gnav20-featured-card > .gnav20-sub-header-menu { max-height: 730px; height: calc(100vh - 90px); } #vz-gh20 .gnav20-nav-mask { position: absolute !important; width: 100%; opacity: .5; background: #747676; bottom: -65px; height: 64px; } } @media (min-width: 1020px) and (max-height: 700px) { #vz-gh20 div.gnav20-content-wrapper { margin-top: 12px !important; } #vz-gh20 div.vbg.gnav20-content-wrapper { margin-top: -9px !important; } #vz-gh20 .gnav20 .gnav20-new-design ul.gnav20-submenu-column li { padding-top: 9px; } #vz-gh20 .gnav20-four-col .gnav20-submenu-column li>a { padding-bottom: 10px; } #vz-gh20 .gnav20-primary-menu.gnav20-featured-card ul.gnav20-submenu-column li>a { padding: 6px 0 9px 0;} } #vz-gh20 .gnav20-right-featured-card { padding: 0 16px 24px; background: #1d1d1e; border-radius: 8px;} #vz-gh20 .gnav20-L2-featured-card { left: 50%; } #vz-gh20 .gnav20-featured-card-img>img { max-width: calc(100% + 32px); padding:16px 0 0; margin: 0 -16px; } #vz-gh20 .gnav20-right-featued-card a.fullcta { position: absolute; top:0; left:0; bottom:0; right:0;} #vz-gh20 .gnav20-right-featued-card a.fullcta::after { content:""; position: absolute; right: 16px; bottom: 12px; } #vz-gh20 .gnav20-close-indent { right: 120px; } #vz-gh20 button#gnav20-search-icon::after { content: "Search Verizon" !important; } #vz-gh20 .gnav20-cart-wrapper { z-index: 4501; } @media (min-width: 1360px) { #vz-gh20 .gnav20-close-indent { right: -24px; } } @media (max-width: 1020px) { #vz-gh20 #gnav20-mobile-menu.gnav20-open-menu { animation: navMobile .2s ease-out; width: 50%;} #vz-gh20 #gnav20-ulwrapper .gnav20-global-nav-list { max-height: calc(100dvh - 176px); overflow: visible; border:none;} #vz-gh20 #gnav20-ulwrapper .gnav20-global-nav-list::-webkit-scrollbar { width: 0 !important; display:none;} #vz-gh20 #gnav20-ulwrapper .gnav20-sub-menu::-webkit-scrollbar { width: 0 !important; display:none;} #vz-gh20 #gnav20-ulwrapper .gnav20-autoflow::-webkit-scrollbar { width: 0 !important; display:none;} #vz-gh20 #gnav20-ulwrapper>a { display:block; margin-bottom: 12px; } #vz-gh20 .gnav20-sub-header-menu { overflow: visible;max-height: calc(100dvh - 216px);} #vz-gh20 .gnav20-navigation-item .gnav20-sub-header-menu { overflow: auto;} #vz-gh20 .gnav20-navigation-item:first-child .gnav20-sub-header-menu { overflow: auto;} #vz-gh20 #gnav20-mobile-menu.a ul:last-of-type { padding-bottom:0;} #vz-gh20 #gnav20-mobile-menu div.gnav20-autoflow { height: auto; max-height:calc(100dvh - 176px); padding-bottom: 24px !important; } #vz-gh20 #gnav20-mobile-menu.gnav20-openL1 .gnav20-main-header.gnav20-selected { display:none; } #vz-gh20 #gnav20-mobile-menu:not(.a) .gnav20-L1 div.gnav20-autoflow { padding-top:12px !important;} #vz-gh20 #gnav20-mobile-menu.a .gnav20-L1 li.a div.gnav20-autoflow { border-bottom: solid 1px #333;} #vz-gh20 #gnav20-mobile-menu button::after { right: 6px; } #vz-gh20 #gnav20-mobile-menu .gnav20-L1 a.gnav20-goback { font-weight: bold; margin-bottom:0 !important;} #vz-gh20 #gnav20-mobile-menu .gnav20-L1 li>a::after { right: 6px;} #vz-gh20 #gnav20-mobile-menu.a .gnav20-L1 li.a>a::after { transform: rotate(-135deg); right: 6px;} #vz-gh20 #gnav20-mobile-menu.a .gnav20-L1 li.a>a.gnav20-goback::before { left: auto; right: 6px; transform: rotate(-135deg);} #vz-gh20 #gnav20-mobile-menu .gnav20-menu-label-button { padding: 16px 0; font-size: 16px !important; } #vz-gh20 #gnav20-mobile-menu.a .gnav20-navigation-item:first-child>div>.gnav20-menu-label-button:not(.gnav20-goback) { border-top: solid 1px #333; } #xvz-gh20 #gnav20-mobile-menu.a .gnav20-L1 li { display: block !important;} #vz-gh20 #gnav20-mobile-menu.a .gnav20-L2:visible>li { display: block !important;} #vz-gh20 #gnav20-mobile-menu.a .gnav20-L1>li.a { display: block !important;} #vz-gh20 #gnav20-mobile-menu.a .gnav20-L1>li.m.gnav20-current { position: absolute; z-index:2; top:0px; left:0; right:0; min-height: calc(100dvh - 176px); xbackground:#000; } #vz-gh20 #gnav20-mobile-menu.a .gnav20-L1 li.m>a.gnav20-goback { position: fixed; font-size: 20px !important; top: 53px; width:100%; text-indent: 94px; text-transform: lowercase; xbackground: #000;} #vz-gh20 #gnav20-mobile-menu.a .gnav20-L1 li.m>a.gnav20-goback::before {left: 4px; top:-24px; width: 12px; height: 12px;} #vz-gh20 #gnav20-mobile-menu:not(.a) .gnav20-L1 li>a.gnav20-goback { position: fixed; font-size: 20px !important; top: 52px; width:100%; background: #fff;} #vz-gh20 #gnav20-mobile-menu:not(.a) .gnav20-L1 li>a.gnav20-goback::before {left: 4px; top:-24px; width: 12px; height: 12px;} #vz-gh20 #gnav20-mobile-menu .gnav20-L1 li>a.gnav20-goback::after { content:""; position: absolute; left: -6px; top:-32px; width: 32px; height: 32px;} #vz-gh20 #gnav20-mobile-menu.a .gnav20-L1 li.a ul a { font-size: 14px !important; padding-left: 24px;} #vz-gh20 #gnav20-mobile-menu.a .gnav20-L1 li.a li.a ul a { padding-left: 48px;} #vz-gh20 #gnav20-mobile-menu.a .gnav20-L1 li.a ul { margin-top: -12px;} #vz-gh20 #gnav20-mobile-menu .gnav20-current>.gnav20-goback { display: block !important; font-weight: bold !important; border:none;} #vz-gh20 #gnav20-mobile-menu .gnav20-current>button.gnav20-goback { padding-left: 0; margin-top: -12px; font-size:20px !important; margin-bottom: 0 !important;} #vz-gh20 #gnav20-mobile-menu .gnav20-current>button.gnav20-goback::before { left: 4px; top:-24px; width: 12px; height: 12px;} #vz-gh20 #gnav20-mobile-menu .gnav20-current>button.gnav20-goback::after { content:""; position: absolute; left: -6px; top:-32px; width: 32px; height: 32px;} #vz-gh20 #gnav20-mobile-menu .gnav20-isactive>button.gnav20-goback { display: block !important; font-weight: bold;} #vz-gh20 #gnav20-mobile-menu.a .gnav20-submenu-open>li:not(.gnav20-current) { display: block !important; color: #a7a7a7 !important;} #vz-gh20 #gnav20-mobile-menu div.gnav20-content-wrapper {animation: navMobile 0.2s ease-out; } #vz-gh20 #gnav20-mobile-menu div.gnav20-L2-content-wrapper>ul {animation: navMobile 0.2s ease-out; padding-bottom:0;} #vz-gh20 #gnav20-mobile-menu div.gnav20-L3-content-wrapper>ul {animation: navMobile 0.2s ease-out; padding-bottom:0;} #vz-gh20 #gnav20-mobile-menu.a li.a div.gnav20-L2-content-wrapper>ul {animation: navMobile2 0.2s ease-in;} #vz-gh20 #gnav20-mobile-menu.a div.gnav20-L3-content-wrapper>ul {animation: navMobile2 0.2s ease-in;} #vz-gh20 #gnav20-mobile-menu.a ul.gnav20-L1>li:first-child>a:not(.gnav20-goback) { border-top:solid 1px #333;} #vz-gh20 #gnav20-mobile-menu.a ul.gnav20-L1>li.a:first-child>a { border-top:solid 1px #333;} #vz-gh20 #gnav20-mobile-menu ul.gnav20-L1 a { padding: 14px 16px 14px 0;} #vz-gh20 #gnav20-mobile-menu.a ul.gnav20-L2 a { border:none !important; padding: 12px 0; color: inherit !important;} #vz-gh20 #gnav20-mobile-menu.a ul.gnav20-L3 a { padding-left: 32px;} /* footer */ #vz-gh20 #gnav20-mobile-menu { flex-direction: column; padding-bottom:0; height: calc(100% - 48px); overflow:visible;} #vz-gh20 #gnav20-mobile-menu #gnav20-ulwrapper { position:static; height: auto; max-height: 100%; overflow:visible;} #vz-gh20 #gnav20-mobile-menu .gnav20-navigation-list { position: relative; height: auto; top:0; padding-bottom:0; margin: 0 16px; width: auto; max-height: unset;} #vz-gh20 #gnav20-mobile-menu #gnav20-footerlink { position: relative; flex-direction: column; height: auto; border:none; padding-top:12px;} #vz-gh20 #gnav20-mobile-menu #gnav20-footerlink>div { width: 100%; position:relative;} #vz-gh20 #gnav20-mobile-menu #gnav20-footerlink .gnav20-utility-wrapper { height: auto; width:auto; } #vz-gh20 #gnav20-mobile-menu #gnav20-footerlink button,#vz-gh20 #gnav20-mobile-menu #gnav20-footerlink a { font-family: inherit !important;} #vz-gh20 #gnav20-mobile-menu #gnav20-footerlink div>a, #vz-gh20 #gnav20-mobile-menu #gnav20-footerlink button.gnav20-sign-in { font-size: 16px !important; font-family: inherit !important; padding: 12px 0; display: block;} #vz-gh20 #gnav20-mobile-menu #gnav20-footerlink .gnav20-language-box { padding: 12px 0;} #vz-gh20 #gnav20-mobile-menu #gnav20-footerlink #gnav20-language-selection-menu-mobile::after { content: "USA (en)"; padding-left: 12px; font-size: 16px; vertical-align:top;} #vz-gh20 #gnav20-mobile-menu .gnav20-eyebrow-link-list a.gnav20-main-header { top: 100%; left:-1px; height: 48px; padding: 16px; border-left: solid 1px #333;} #vz-gh20 #gnav20-mobile-menu #gnav20-ulwrapper ul.gnav20-L1, #vz-gh20 #gnav20-mobile-menu #gnav20-ulwrapper .gnav20-four-col { height: calc(100dvh - 152px); padding:0;} #vz-gh20 #gnav20-mobile-menu #gnav20-ulwrapper .gnav20-four-col ul.gnav20-L1 { height: auto; } #xvz-gh20 #gnav20-mobile-menu #gnav20-ulwrapper ul.gnav20-L1 { height: calc(100dvh - 216px); padding:0;} } @media (max-width: 768px) { #vz-gh20 #gnav20-mobile-menu.gnav20-open-menu, #vz-gh20 .gnav20-mobile .gnav20-dropdown-menu { width: calc(100% - 66px);} } @media (max-height: 480px) { #vz-gh20 div.vbg.gnav20-content-wrapper { padding-top: 0 !important; } #vz-gh20 .gnav20-sub-header-menu { max-height: 100dvh; } #vz-gh20 .gnav20-content-wrapper { height: calc(100dvh - 120px); padding:0 !important; margin: 0 auto !important; } #vz-gh20 .gnav20-featured-scroll-area { max-height: calc(100dvh - 220px);} #vz-gh20 .gnav20-L2-content-wrapper { top:0; } #vz-gh20 #gnav20-mobile-menu.gnav20-open-menu { padding-top: 24px; height: calc(100vh - 50px);} #vz-gh20 .gnav20-closex { top:6px !important; } #vz-gh20 #gnav20-mobile-menu button.gnav20-goback::before, #vz-gh20 #gnav20-mobile-menu li.m>a.gnav20-goback::before { position: relative; display:inline-block; top:0 !important; margin-right: 6px; } #vz-gh20 #gnav20-mobile-menu li.m>a.gnav20-goback { top: 0 !important; } #vz-gh20 #gnav20-mobile-menu .gnav20-eyebrow-link-list a.gnav20-main-header { padding-top:12px;} #vz-gh20 #gnav20-mobile-menu #gnav20-ulwrapper ul.gnav20-L1 { height: calc(100vh - 116px);} #vz-gh20 #gnav20-mobile-menu #gnav20-footerlink { flex-direction: row; z-index:1000; position: fixed; top: 100%; bottom: auto; left: 180px; right:0; width: auto; padding-top:0;} #vz-gh20 #gnav20-mobile-menu #gnav20-footerlink #gnav20-language-selection-menu-mobile::after { display:none;} } @keyframes navDesk { 0% { transform: translateX(-100px); opacity:0;} 50% { opacity: 0.1;} 100% { transform: translateX(0);opacity:1;} } @keyframes navMobile { 0% { transform: translateX(100%); } 100% { transform: translateX(0);} } @keyframes navMobile2 { 0% { max-height:0; overflow:hidden; } 100% { max-height: 100vh; overflow: auto;} }