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;}
}