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