/** Shopify CDN: Minification failed Line 177:3 Unexpected "zoom" Line 3448:6 "with" is not a known CSS property **/ :root { --baseFontSize: 16; --ease: ease-in-out; --cubic: cubic-bezier(.12,.67,.53,1); } *, ::after, ::before { box-sizing: border-box } body { margin: 0; font-size: 16; font-size: var(--baseFontSize); background-size: contain; background-repeat: repeat-y; overflow: visible; height: 100%; } body, button { -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100% } li { list-style: none } .main-content { opacity: 0 } .main-content .shopify-section { display: none } .main-content .shopify-section:first-child { display: inherit } .critical-hidden { display: none } .main-content { opacity: 1; } .main-content .shopify-section { display: inherit; } .critical-hidden { display: inherit; } .main-content { display: block; } /*================ GLOBAL ================*/ /*============================================================================ #Normalize Based on normalize.css v3.0.2 | MIT License | git.io/normalize ==============================================================================*/ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } input, textarea, select, .disclosure__toggle { -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; } a { background-color: transparent; } b, strong { font-weight: var(--font-weight-body--bolder); } em { font-style: italic; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } img { /*max-width: 100%;*/ border: 0; } svg:not(:root) { overflow: hidden; } /*============================================================================ Fast Tap enables no-delay taps (FastClick-esque) on supporting browsers ==============================================================================*/ a, button, [role="button"], input, label, select, .disclosure__toggle, textarea { touch-action: manipulation; } :root { --black: #000000; --white: #FFFFFF; --coronaBlue: #002452; --coronaYellow: #fdc338; --coronaGreen: #128728; } body { color: #002452; color: var(--coronaBlue); font-size: 100%; font-family: Arial, Helvetica, sans-serif; line-height: 1.7; font-weight: 400; -webkit-font-smoothing: antialiased; } /** * @font-face definitions should be in /assets/fonts.css.liquid * and linked in of theme.liquid */ h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; font-family: 'FoundersGroteskCond-SmBd', sans-serif; font-weight: normal; line-height: 1; word-wrap: break-word; word-wrap: break-word } a { color: inherit; text-decoration: none; } a[href^="tel"] { color: inherit; } li { list-style: none } ul, ol { margin: 0; padding: 0; } ol { list-style: decimal; } p { font-family: 'FoundersGroteskCond-Reg', sans-serif; margin: 0; padding: 0; } /*================ #Helper Classes ================*/ .clearfix { *zoom: 1; } .clearfix::after { content: ''; display: table; clear: both; } .visually-hidden { position: absolute !important; overflow: hidden; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; } .visually-hidden--inline { margin: 0; height: 1em; } .visually-hidden--static { position: static !important; } .js-focus-hidden:focus { outline: none; } .no-js:not(html) { display: none; } .no-js .no-js:not(html) { display: block; } .no-js .js { display: none; } .hide { display: none !important; } .mobile-hide { display: none; } @media screen and (min-width: 767px) { .mobile-hide { display: inherit } } .desktop-hide { display: inherit; } @media screen and (min-width: 768px) { .desktop-hide { display: none } } .lock-scroll { overflow: hidden; } @media print { * { color: #000000 !important; } .ly-custom-1000, .ly-languages-switcher { display: none !important; } .header__wrap { display: none; } .header { display: none; } .hero, .hero.full { display: none !important; } .recipe__outter-wrap { display: none !important; } .locator__wrap { display: none !important; } .template-article #shopify-section-purchase-locator, .template-article #shopify-section-recipe-carousel { display: none; } .recipe__to-print { display: block !important; } .recipe__to-print p, .recipe__to-print ul, .recipe__to-print li, .recipe__to-print h1, .recipe__to-print h2, .recipe__to-print h3, .recipe__to-print h4, .recipe__to-print h5 { font-family: 'FoundersGroteskCond-Reg', sans-serif; font-size: 30px; } .recipe__to-print h3 { text-transform: uppercase; font-family: 'FoundersGroteskCond-SmBd', sans-serif; padding-bottom: 15px; } .recipe__to-print .recipe__stat { border-color: #000; display: inline-block; margin: 0 0 30px; min-width: 200px; width: 200px; } .recipe__to-print .corona-logo-black { width: 200px; margin: 0 auto 50px; } .recipe__to-print .corona-logo-black svg { width: 100%; } .recipe__to-print .recipe-print-title { text-align: center; font-family: 'FoundersGroteskCond-SmBd', sans-serif; text-transform: uppercase !important; font-size: 60px !important; padding-bottom: 60px; } .recipe__to-print .recipe-print-intro { margin-bottom: 30px; } .recipe__to-print .recipe__ingredients-label { font-family: 'FoundersGroteskCond-SmBd', sans-serif; font-size: 36px; display: block; border-bottom: none; text-decoration: underline; } .recipe__to-print ul { margin-bottom: 60px; } .recipe__to-print .recipe-print-instructions ul { counter-reset: item; } .recipe__to-print .recipe-print-instructions li { display: block; } .recipe__to-print .recipe-print-instructions li:before { content: counters(item, ".")". "; counter-increment: item; } .footer { display: none; } } .audio-control__wrap { display: none; } @media (min-width: 48em) { .audio-control__wrap { display: block; position: fixed; width: auto; height: 54px; /*bottom: 32vh; */ right: 2vw; transform: translateX(-50%); position: fixed; z-index: 9999; top: 75px } } @media (min-width: 64.0625em) { .audio-control__wrap { bottom: 13vh; top: auto } } .audio-control { display: none; } @media (min-width: 48em) { .audio-control { display: flex; position: absolute; cursor: pointer; right: 2%; color: #002452; color: var(--coronaBlue); background-color: #fdc338; background-color: var(--coronaYellow); justify-content: center; align-items: center; width: 44px; height: 44px; border-radius: 100% } } @media (min-width: 64.0625em) { .audio-control { width: 54px; height: 54px } } .audio-control:before { content: ''; width: 100%; height: 100%; border-radius: 100%; position: absolute; top: 0; left: 0; box-shadow: 0 0 0px 10px hsla(0,0%,100%,0.6); opacity: 0; transition: .5s ease-in-out; } .audio-control__volume-off, .audio-control__volume-up { display: none; width: 32px; height: 32px; } .audio-control__volume-off svg, .audio-control__volume-up svg { width: 100%; height: 100%; } .audio-control__volume-off.active, .audio-control__volume-up.active { display: block; } .audio-control:active:before { opacity: 1; transition: .2s ease-in-out; } .audio-control .material-icons { font-size: calc(24 / 16 * 1rem); font-size: calc(24 / var(--baseFontSize) * 1rem); transition: .2s; } @media (min-width: 64.0625em) { .audio-control .material-icons { font-size: calc(30 / 16 * 1rem); font-size: calc(30 / var(--baseFontSize) * 1rem) } } .audio-control__volume-off.material-icons, .audio-control__volume-up.material-icons { display: none; opacity: 0; transition: .2s; } .audio-control__volume-off.material-icons.active, .audio-control__volume-up.material-icons.active { display: inline; opacity: 1; transition: .2s; } /* mobile nav open */ .header__wrap.open { height: 100%; } .header__wrap.open .header { transform: translateY(100%); transition: .2s ease-in-out; } @media (min-width: 64.0625em) { .header__wrap.open .header { transition: 0 } } .ly-custom-1000 * { transition: .2s ease-out; } .ly-custom-1000 .ly-is-open { background-color: #002452 !important; background-color: var(--coronaBlue) !important; box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3); } /* HEADER WHEN NO HERO IMAGE */ @media (min-width: 64.0625em) { .header__wrap.header__wrap--alt { background-size: cover; background-repeat: no-repeat; background-position: bottom center } .header__wrap.header__wrap--alt.shrink { box-shadow: none; background-color: transparent; } } .header__mobile-logo-hamburg-wrap.header__mobile-logo-hamburg-wrap--alt { background-size: 1024px; background-repeat: no-repeat; background-position: bottom center; } .header__mobile-logo-hamburg-wrap.header__mobile-logo-hamburg-wrap--alt.active { box-shadow: none; background-color: transparent; } .header__mobile-logo-hamburg-wrap.header__mobile-logo-hamburg-wrap--alt.active.shadow { box-shadow: none; } .header__wrap { position: fixed; top: 0; left: 0; width: 100%; height: 130px; z-index: 9999; transition: .2s ease-out; } @media (min-width: 64.0625em) { .header__wrap { height: auto; left: 50%; transform: translateX(-50%); transition: 0s } } .header__wrap.shrink { background-color: #002452; background-color: var(--coronaBlue); box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3); transition: .2s ease-out; } .header__wrap.shrink .header__drop-down-background { height: 530px; } .header__wrap.shrink .header__drop-down { padding-top: 84px; } .header__wrap.shrink .header__drop-down--cervezas { padding-top: 30px; } /* shrink the header on scroll */ .header.shrink { padding: 60px 0 0; transition: .3s; } @media (min-width: 75em) { .header.shrink { padding: 5px 0 10px } } .header.shrink .header__logo { width: 120px; height: 70px; /* visual cheat for crown gone */ transform: translateY(-4px); transition: .3s; } .header.shrink .header__logo #crown { opacity: 0; transition: .3s; } /* header bar */ .header { position: absolute; bottom: 100%; left: 0; height: 100vh; /* The main point: */ overflow-y: scroll; /* Optional but highly reccomended: enables momentum scrolling on iOS */ -webkit-overflow-scrolling: touch; width: 100%; max-width: 1400px; margin: 0 auto; padding: 130px 0; transition: .3s ease-in-out; z-index: 200; background-size: cover; background-repeat: no-repeat; background-position: right top; background-color: #002452; background-color: var(--coronaBlue); } @media (min-width: 64.0625em) { .header { display: flex; position: relative; overflow-y: inherit; background-color: transparent; background-image: none; flex-direction: row; justify-content: space-between; align-items: center; padding: 70px 0 30px; margin: 0 auto; width: 95%; height: auto; transform: translateY(0); transition: 0s } } @media (min-width: 75em) { .header { padding: 30px 0 } } .header__logo { width: 105px; height: 35px; margin-left: 14px; z-index: 200; transition: .3s; } @media (min-width: 64.0625em) { .header__logo { width: 140px; height: 72px; margin-left: 0; margin-right: 5% } } @media (min-width: 87.5em) { .header__logo { width: 164px; height: 84px } } .header__logo.mobile-hide { display: none; } @media (min-width: 64.0625em) { .header__logo.mobile-hide { display: block } } .header__logo.desktop-hide { display: block; } @media (min-width: 64.0625em) { .header__logo.desktop-hide { display: none } } .header__logo #crown { display: none; } @media (min-width: 64.0625em) { .header__logo #crown { display: block; opacity: 1; transition: .3s } } .header__lang { position: relative; cursor: pointer; padding: 26px 4% 20px; /* &:after { content: '\e5cf'; color: #ffffff; font-family: 'Material Icons'; font-size: calc(30 / var(--baseFontSize) * 1rem); line-height: 1; position: absolute; top: 23px; left: 60px; z-index: -1; @media (--w-1025) { font-size: calc(26 / var(--baseFontSize) * 1rem); top: -1px; left: inherit; right: 0; } } */ } @media (min-width: 64.0625em) { .header__lang { width: auto; margin: 0 0 0 35px; padding: 0 } } .header__lang:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background-color: rgba(255, 255, 255, .3); } @media (min-width: 64.0625em) { .header__lang:before { content: none } } .header__lang select { position: relative; display: block; color: #ffffff; border: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: transparent; font-family: 'FoundersGroteskCond-Med', sans-serif; font-size: calc(25 / 16 * 1rem); font-size: calc(25 / var(--baseFontSize) * 1rem); line-height: 1; margin: 0; padding: 0; width: 60px; } @media (min-width: 64.0625em) { .header__lang select { font-size: calc(22 / 16 * 1rem); font-size: calc(22 / var(--baseFontSize) * 1rem); width: 50px } } .header__nav { display: flex; flex-direction: column; justify-content: space-between; width: 100%; } @media (min-width: 64.0625em) { .header__nav { flex-direction: row; flex: 1 1 auto; align-content: center; width: auto } } .header__menus { display: flex; flex-direction: column; width: 100%; } @media (min-width: 64.0625em) { .header__menus { flex-direction: row } } .header__menu-title:first-of-type .header__menu-title-text:before { content: none; } @media (min-width: 64.0625em) { .header__menu-title { display: inherit; margin-right: 5% } } .header__menu-title.open .header__menu-title-text:after { transform: rotate(180deg); transition: .2s; } @media (min-width: 64.0625em) { .header__menu-title.open .header__menu-title-text:after { transform: rotate(0) } } .header__menu-title.active .header__menu-title-text:after { transform: scale(1); } .header__menu-title-text { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 30px 4%; color: #ffffff; cursor: pointer; font-family: 'FoundersGroteskCond-Med', sans-serif; font-weight: normal; font-size: calc(25 / 16 * 1rem); font-size: calc(25 / var(--baseFontSize) * 1rem); line-height: 1; letter-spacing: 0.34px; text-transform: uppercase; transition: .3s; } .header__menu-title-text:before { content: ' '; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background-color: rgba(255, 255, 255, .3); } .header__menu-title-text:after { content: '\e5cf'; color: #fdc338; color: var(--coronaYellow); font-family: 'Material Icons'; font-size: calc(40 / 16 * 1rem); font-size: calc(40 / var(--baseFontSize) * 1rem); line-height: 0; transform-origin: 50% 50%; transition: .2s; } @media (min-width: 64.0625em) { .header__menu-title-text { display: inherit; font-size: calc(22 / 16 * 1rem); font-size: calc(22 / var(--baseFontSize) * 1rem); padding: 0 } .header__menu-title-text:after { content: ''; position: absolute; background-color: #fdc338; background-color: var(--coronaYellow); width: 100%; height: 2px; top: calc(100% + 2px); left: 0; transform: scaleX(0); transform-origin: 50% 50%; transition: .3s ease-in; } .header__menu-title-text:before { content: none; } .header__menu-title-text:hover:after { transform: scaleX(1); transition: .3s ease-out; } } /* dropdowns */ .header__drop-down-background { display: none; } @media (min-width: 64.0625em) { .header__drop-down-background { display: block; position: absolute; top: 0; width: 100%; height: 490px; background-size: cover; opacity: 0; visibility: hidden; transition: .1s ease-out } } @media (min-width: 64.0625em) { .header__drop-down-background { height: 550px } .header__drop-down-background.active { opacity: 1; visibility: visible; transition: .1s ease-out; box-shadow: 0 10px 15px 0 rgba(0,0,0,.3); } } .header__drop-down { display: none; padding: 10px 4%; width: 100%; } @media (min-width: 64.0625em) { .header__drop-down { display: block; opacity: 0; visibility: hidden; position: absolute; top: 100%; left: 0; width: 100%; max-width: 1400px; padding: 60px 0 0; transition: .1s ease-out } .header__drop-down.active { visibility: visible; opacity: 1; transition: .1s ease-out; } } @media (min-width: 64.0625em) { .header__drop-down--cervezas { padding: 0 } } .header__menu-filler { display: none; height: 100%; left: 50%; position: absolute; top: 0; width: 150%; transform: translateX(-50%); z-index: -1; } @media (min-width: 64.0625em) { .header__menu-filler { display: block } } .header__sub-menu { display: flex; flex-wrap: wrap; width: 100%; justify-content: center; color: #ffffff; } @media (min-width: 64.0625em) { .header__sub-menu { font-size: calc(26 / 16 * 1rem); font-size: calc(26 / var(--baseFontSize) * 1rem); flex-wrap: nowrap } } /* menu items */ .header__menu-item { position: relative; width: calc(33% - 2vw); max-width: 200px; margin: 0 1vw 4vw; line-height: 1; text-align: center; } @media (min-width: 60em) { .header__menu-item { width: calc(20% - 2vw) } } @media (min-width: 64.0625em) { .header__menu-item { width: calc(20% - 40px); max-width: 220px; margin: 0 20px; border-bottom: none } .header__menu-item.decrease-width{ width: calc(13% - 40px); } } .header__menu-item.mobile-hide { display: none; } @media (min-width: 64.0625em) { .header__menu-item.mobile-hide { display: block } } .header__menu-item.desktop-hide { display: block; } @media (min-width: 64.0625em) { .header__menu-item.desktop-hide { display: none } } .header__menu-item--cervezas { flex-wrap: wrap; width: 25%; margin: 2vw 0; } @media (min-width: 28.75em) { .header__menu-item--cervezas { width: calc(25% - 4vw); margin: 2vw } } @media (min-width: 48em) { .header__menu-item--cervezas { flex-wrap: nowrap; width: 12%; margin: 0 2% 2vw } } @media (min-width: 64.0625em) { .header__menu-item--cervezas { flex-wrap: nowrap; /* width: 10.5%; */ margin: 0 2% } } .header__menu-item-link { position: relative; display: block; } .header__menu-item-link--cervezas { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; transition: .2s; } @media (hover: hover) { .header__menu-item-link:hover .header__menu-item-text--cervezas { text-decoration: underline; -webkit-text-decoration-color: #fdc338; text-decoration-color: #fdc338; -webkit-text-decoration-color: var(--coronaYellow); text-decoration-color: var(--coronaYellow); transition: .2s; } .header__menu-item-link:hover .header__menu-image:after { opacity: 1; transition: .3s; } } @media only screen and (hover: none) and (pointer: coarse){ .header__menu-item-link .header__menu-image:active:after { opacity: 1; transition: .1s; } .header__menu-item-link--cervezas:active .header__menu-item-text--cervezas { text-decoration: underline; -webkit-text-decoration-color: #fdc338; text-decoration-color: #fdc338; -webkit-text-decoration-color: var(--coronaYellow); text-decoration-color: var(--coronaYellow); } } .header__menu-item-text { font-family: 'FoundersGroteskCond-SmBd', sans-serif; font-size: calc(16 / 16 * 1rem); font-size: calc(16 / var(--baseFontSize) * 1rem); letter-spacing: calc(.5 / 16 * 1rem); letter-spacing: calc(.5 / var(--baseFontSize) * 1rem); line-height: 1.2; text-align: center; text-transform: uppercase; padding-top: 15px; } @media (min-width: 28.75em) { .header__menu-item-text { font-size: calc(18 / 16 * 1rem); font-size: calc(18 / var(--baseFontSize) * 1rem) } } @media (min-width: 60em) { .header__menu-item-text { font-size: calc(20 / 16 * 1rem); font-size: calc(20 / var(--baseFontSize) * 1rem) } } @media (min-width: 64.0625em) { .header__menu-item-text { padding-top: 26px; min-height: 78px } } @media (min-width: 75em) { .header__menu-item-text { font-size: calc(26 / 16 * 1rem); font-size: calc(26 / var(--baseFontSize) * 1rem) } } .header__menu-image { position: relative; display: block; width: 62.25%; padding-top: 62.25%; height: 0; border-radius: 100%; background-size: cover; background-repeat: no-repeat; margin: 0 auto; } @media (min-width: 64.0625em) { .header__menu-image { width: 78.18%; height: 0; padding-top: 78.18% } } .header__menu-image:after { content: ''; position: absolute; top: -7px; left: -7px; width: calc(100% + 14px); height: calc(100% + 14px);; border-radius: 100%; border: 1.5px solid #fdc338; border: 1.5px solid var(--coronaYellow); opacity: 0; transition: .1s; } @media (min-width: 64.0625em) { .header__menu-image:after { top: -8px; left: -8px; width: calc(100% + 16px); height: calc(100% + 16px);; border: 3px solid #fdc338;; border: 3px solid var(--coronaYellow) } } .header__menu-image--cervezas { padding: 0; margin: 0 auto; width: 49%; height: auto; border-radius: 0; } @media (min-width: 28.75em) { .header__menu-image--cervezas { width: 52% } } /* mobile only */ /*cursor: pointer;*/ .header__btn--hero { position: fixed; width: 100%; left: 0; top: 0; z-index: 2000; } .header__mobile-logo-hamburg-wrap { cursor: pointer; position: absolute; display: flex; align-items: center; top: 60px; left: 0; width: 100%; height: 70px; padding: 0 4%; transition: .3s; z-index: 200; } .header__mobile-logo-hamburg-wrap.active { background-color: #002452; background-color: var(--coronaBlue); transition: .2s; } .header__mobile-logo-hamburg-wrap.active.shadow { box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3); } .header__mobile-logo-hamburg-wrap.open:after { content: ''; position: absolute; top: 100%; left: 0; width: 100%; height: 1px; background-color: rgba(255, 255, 255, .3) } .header__mobile-logo-hamburg-wrap .header__mobile-logo-hamburg-bkgd { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; background-color: #002452; background-color: var(--coronaBlue); transition: .2s; } @media (min-width: 64.0625em) { .header__mobile-logo-hamburg-wrap { display: none } } .header__hamburg { cursor: pointer; transition: top 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91); padding: 10px 10px 10px 0; z-index: 500; } .header__hamburg div { width: 26px; height: 2px; margin-bottom: 9px; background-color: #ffffff; transition: transform 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91); } .header__hamburg #bottom { margin-bottom: 0; } .header__hamburg * { will-change: transform; } .header__hamburg.open #top { transform-origin: 50% 50%; transform: translateY(12px) rotate(-135deg); } .header__hamburg.open #middle { opacity: 0; transform: rotate(135deg); } .header__hamburg.open #bottom { transform-origin: 50% 50%; transform: translateY(-10px) rotate(-45deg); } @media (max-width: 1024px){ p.header__menu-item-text.mob-label-hide{ display:none; } } @media (max-width: 720px){ p.header__menu-item-text.mob-label-hide{ display:none; } .header__menu-item{ width: calc(33% - 2vw); margin: 0 2vw 4vw 0vw; } .header__menu-image{ width: 85px; height: 85px; padding-top: 0; } } @media (min-width: 64.0625em){ .header__menu-item-text { min-height: 148px; width: 148px; margin: 0 auto; } .header__menu-item-text.decrease-width { width: 110px; } .header__menu-item--cervezas { margin: 0 1.5%; } } .footer .social-icon { fill: #ffffff; transition: .2s; } @media (hover: hover) { .footer .social-icon:hover { fill: #fdc338; fill: var(--coronaYellow); transition: .2s; } } /* general */ .footer { color: #ffffff; background-size: 805px auto; background-position: center bottom; background-repeat: no-repeat; margin: 0; width: 100%; margin: 30px auto 0; overflow: hidden; } @media (min-width: 48em) { .footer { background-size: cover } } .footer__wrap { max-width: 1400px; margin: 0 auto; padding: 50px 5vw 20px; overflow: hidden; } @media (min-width: 64.0625em) { .footer__wrap { width: 92%; display: flex; justify-content: space-between; width: 95%; padding: 82px 0 } } /* info area */ @media (min-width: 48em) { .footer__info-wrap { display: flex } } @media (min-width: 64.0625em) { .footer__info-wrap { display: block; width: 30%; margin-right: 5%; display: flex; flex-direction: column } } @media (min-width: 48em) { .footer__logo-social-wrap { width: 45%; margin-right: 5% } } @media (min-width: 64.0625em) { .footer__logo-social-wrap { width: 100% } } .footer__logo { display: block; width: 135px; margin: 0 auto; } @media (min-width: 48em) { .footer__logo { width: 202px; margin: 0 } } .footer__social { padding: 26px 0 46px; } .footer__social-icons { display: flex; justify-content: center; width: 80%; margin: 0 auto; } @media (min-width: 48em) { .footer__social-icons { justify-content: flex-start; width: 90%; margin: 0 } } .footer__social-icon { width: 38px; margin-right: 15px; } .footer__social-icon .social-icon { fill: #ffffff; } @media (hover: hover) and (pointer: fine) { .footer__social-icon .social-icon:hover { fill: #fdc338; fill: var(--coronaYellow); } } .footer__social-icon svg { width: 100%; } .footer__nwsltr { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 40px; } @media (min-width: 40em) { .footer__nwsltr { padding-bottom: 60px } } @media (min-width: 64.0625em) { .footer__nwsltr { padding-bottom: 0 } } .footer__nwsltr-headline { font-size: calc(30 / 16 * 1rem); font-size: calc(30 / var(--baseFontSize) * 1rem); letter-spacing: .5px; text-transform: uppercase; line-height: 1; text-transform: uppercase; padding-bottom: 15px; } .footer__nwsltr-info { font-family: 'FoundersGroteskCond-Med', sans-serif; font-size: calc(18 / 16 * 1rem); font-size: calc(18 / var(--baseFontSize) * 1rem); letter-spacing: .5px; line-height: 1.2; } .footer__nwsltr-form { display: flex; justify-content: space-between; margin: 26px 0 15px; /* hide gap btwn input and button in safari */ background-color: #ffffff; } .footer__nwsltr-input { font-size: calc(18 / 16 * 1rem); font-size: calc(18 / var(--baseFontSize) * 1rem); line-height: 1; flex: 1; background-color: #ffffff; border-radius: 0; border: none; padding-left: 10px; } .footer__nwsltr-submit { border-radius: 0; border: none; outline: none; background-color: #ffffff; padding: 6px 15px; } @media (min-width: 64.0625em) { .footer__nwsltr-submit { padding: 10px 20px } } .footer__nwsltr-submit .material-icons { color: #002452; color: var(--coronaBlue); font-size: calc(30 / 16 * 1rem); font-size: calc(30 / var(--baseFontSize) * 1rem); } .footer__nwsltr-error { color: #fdc338; color: var(--coronaYellow); font-family: 'FoundersGroteskCond-SmBd', sans-serif; font-size: calc(18 / 16 * 1rem); font-size: calc(18 / var(--baseFontSize) * 1rem); text-transform: uppercase; padding-left: 8px; } svg.icon.icon-error .icon-error__circle { fill: #fdc338; fill: var(--coronaYellow); } /* links/legal area */ .footer__nav-wrap { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-between; } .footer__nav-links-wrap { text-transform: uppercase; display: grid; justify-content: space-between; grid-template-columns: 1fr 1fr; grid-template-areas: "category-1 category-2_5"; } @media (min-width: 40em) { .footer__nav-links-wrap { grid-template-columns: 1fr 2fr } } @media (min-width: 64.0625em) { .footer__nav-links-wrap { grid-template-columns: repeat(5, 1fr); grid-template-areas: "category-1 category-2_5 category-2_5 category-2_5 category-2_5" } } .footer__nav-category-wrap--category-1 { grid-area: category-1; /* extra room for when accoridan of other links opens */ padding-bottom: 30px; } .footer__nav-category-wrap { grid-area: category-2_5; } @media (min-width: 40em) { .footer__nav-category-wrap { display: grid; grid-row-gap: 20px; row-gap: 20px; grid-template-columns: repeat(2, auto); grid-template-areas: "category-2 category-3" "category-4 category-5" } } @media (min-width: 64.0625em) { .footer__nav-category-wrap { grid-template-columns: repeat(4, auto); grid-template-areas: "category-2 category-3 category-4 category-5" } } .footer__nav-links-category.category-2 { grid-area: category-2; } .footer__nav-links-category.category-3 { grid-area: category-3; } .footer__nav-links-category.category-4 { grid-area: category-4; } .footer__nav-links-category.category-5 { grid-area: category-5; } .footer__nav-links { display: none; padding-bottom: 15px; } @media (min-width: 40em) { .footer__nav-links { display: inherit; padding-bottom: 0 } } .footer__nav-links-title { position: relative; font-size: calc(19 / 16 * 1rem); font-size: calc(19 / var(--baseFontSize) * 1rem); padding-bottom: 20px; } .footer__nav-links-title:after { position: absolute; top: 5px; content: "\e5cf"; color: #fdc338; color: #fdc338; color: var(--coronaYellow); font-family: Material Icons; font-size: 2.5rem; font-size: calc(30/16*1rem); font-size: calc(30/var(--baseFontSize)*1rem); line-height: 0; transform-origin: 50% 50%; transition: .2s; } @media (min-width: 40em) { .footer__nav-links-title:after { content: none } } .footer__nav-links-title.open:after { transform: rotate(180deg); transition: .2s; } .footer__nav-links-title--cervezas:after { content: none; } .footer__nav-link { font-family: 'FoundersGroteskCond-Med'; font-size: calc(15 / 16 * 1rem); font-size: calc(15 / var(--baseFontSize) * 1rem); letter-spacing: .5px; margin-bottom: 10px; transition: .2s; } @media (hover: hover) { .footer__nav-link:hover { color: #fdc338; color: var(--coronaYellow); transition: .2s; } } .footer__legal-wrap { color: #D0D0D0; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-end; } .footer__legal-links { display: flex; flex-wrap: wrap; font-family: 'FoundersGroteskCond-Med'; font-size: calc(15 / 16 * 1rem); font-size: calc(15 / var(--baseFontSize) * 1rem); padding: 20px 0; } @media (min-width: 64.0625em) { .footer__legal-links { font-size: calc(18 / 16 * 1rem); font-size: calc(18 / var(--baseFontSize) * 1rem) } } .footer__legal-link { margin-right: 5%; } .footer__legal-disclaimer { font-family: 'FoundersGroteskCond-Reg'; font-size: calc(14 / 16 * 1rem); font-size: calc(14 / var(--baseFontSize) * 1rem); line-height: 1.2; } .kl-private-reset-css-Xuajs1 input { border-radius: 0px !important; } .needsclick.MultiInputField__Text-ia4fu4-0.iURvI.kl-private-reset-css-Xuajs1 { font-family: 'FoundersGroteskCond-SmBd' !important; font-size: calc(14 / 16 * 1rem) !important; font-size: calc(14 / var(--baseFontSize) * 1rem) !important; color: #ffffff !important; } .needsclick.FormComponent__StyledFormComponentWrapper-e0xun6-0.dMHKxR.notranslate.kl-private-reset-css-Xuajs1 { padding: 0 !important; } .kgtZbf.kgtZbf { align-items: center !important; } form.kl-private-reset-css-Xuajs1 { padding: 10px 0 0 0 !important; } button.kl-private-reset-css-Xuajs1 { display: inline-block !important; cursor: pointer !important; font-size: calc(20 / 16 * 1rem) !important; font-size: calc(20 / var(--baseFontSize) * 1rem) !important; letter-spacing: 0.24px !important; line-height: 1 !important; padding: 10px 28px !important; transition: .2s !important; } @media (hover: hover) { button.kl-private-reset-css-Xuajs1:hover { border: 2px solid #ffffff !important; transition: .2s !important; } } .ql-editor p { color: #ffffff !important; text-align: left !important; } .ql-editor p strong { text-transform: uppercase; letter-spacing: 0.24px !important; font-family: 'FoundersGroteskCond-SmBd' !important; } .ql-editor p span { color: #ffffff !important; letter-spacing: 0.24px !important; font-family: 'FoundersGroteskCond-Reg' !important; font-size: calc(18 / 16 * 1rem) !important; font-size: calc(18 / var(--baseFontSize) * 1rem) !important; } .hero { position: relative; max-width: 1700px; height: 70vh; margin: 0 auto; text-shadow: 0 2px 15px rgba(0, 0, 0, 0.29); background-color: #ffffff; background-repeat: no-repeat; background-size: cover; background-position: center; } .hero.mobile-hide { display: none; } @media (min-width: 64.0625em) { .hero { height: 90vh } } @media (min-width: 48em) { .hero.mobile-hide { display: block; } .hero.desktop-hide { display: none; } } .hero:before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 30%; background-image: linear-gradient(to bottom, #000000, rgba(0, 0, 0, 0)); opacity: .6; transition: .2s; } .hero__cerveza { height: 0; padding-top: 115%; background-size: 154%; background-position: 80% bottom; } @media (min-width: 28.75em) { .hero__cerveza { padding-top: 115%; background-size: 170% } } @media (min-width: 48em) { .hero__cerveza { padding-top: 75%; background-size: cover } } @media (min-width: 64.0625em) { .hero__cerveza { padding-top: 0; height: 90vh } } @media (min-width: 75em) { } .hero__cerveza:before { content: none; } .hero__history { background-position: 30% 45%; background-size: 138%; } @media (min-width: 28.75em) { .hero__history { background-position: 50%; background-size: cover } } .hero__short { height: 50vh; } @media (min-width: 48em) { .hero__short { height: 50vh; min-height: 600px; max-height: 800px } } @media (min-width: 64.0625em) { .hero__csr { background-position: 50% } } .hero__logo-csr { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding-top: 80px; width: 60%; } @media (min-width: 64.0625em) { .hero__logo-csr { width: 23% } } .hero__logo-csr img { width: 100%; } .hero__logo-promo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 400px; padding-top: 110px; } @media (min-width: 48em) { .hero__logo-promo { max-width: 1000px; padding-top: 160px; max-width: 1100px } } .hero__logo-promo img { width: 100%; height: auto; } /* position specific */ .hero__center { background-position: center center; } .hero__right { background-position: center right; } .hero__left { background-position: center left; } .hero.hero--age-gate:after { content: none; } .hero.hero--age-gate:before { content: none; } .hero__copy { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 86%; max-width: 640px; padding-top: 110px; text-align: center; } @media (min-width: 64.0625em) { .hero__copy { max-width: 960px } } .hero__back { display: inline-block; width: auto; color: #ffffff; text-transform: uppercase; font-family: 'FoundersGroteskCond-Med', sans-serif; font-size: calc(18 / 16 * 1rem); font-size: calc(18 / var(--baseFontSize) * 1rem); position: absolute; top: 130px; left: 4%; } .hero__back .back-arrow { display: inline-block; transition: .2s; } @media (hover: hover) { .hero__back:hover .back-arrow { transform: translateX(-10px); transition: .2s; } } @media (min-width: 64.0625em) { .hero__back { top: 160px; left: 50%; width: 95%; max-width: 1400px; margin: 0 auto; text-align: left; transform: translateX(-50%) } } @media (min-width: 75em) { .hero__back { top: 130px } } .hero__headline { color: #ffffff; text-transform: uppercase; letter-spacing: .5px; line-height: 1; font-size: 12vw; text-shadow: 0 0 10px rgba(0, 0, 0); } @media (min-width: 40em) { .hero__headline { font-size: 10vw } } @media (min-width: 48em) { .hero__headline { font-size: calc(70 / 16 * 1rem); font-size: calc(70 / var(--baseFontSize) * 1rem) } } @media (min-width: 75em) { .hero__headline { font-size: calc(85 / 16 * 1rem); font-size: calc(85 / var(--baseFontSize) * 1rem) } #shopify-section-hero-evergreen-promo-football .hero__headline { font-size: calc(100 / 16 * 1rem); font-size: calc(100 / var(--baseFontSize) * 1rem) ; margin-top:20px; } } .hero__headline--vid { font-size: calc(55 / 16 * 1rem); font-size: calc(55 / var(--baseFontSize) * 1rem); } @media (min-width: 40em) { .hero__headline--vid { font-size: calc(70 / 16 * 1rem); font-size: calc(70 / var(--baseFontSize) * 1rem) } } @media (min-width: 48em) { .hero__headline--vid { font-size: calc(90 / 16 * 1rem); font-size: calc(90 / var(--baseFontSize) * 1rem) } } @media (min-width: 75em) { .hero__headline--vid { font-size: calc(102 / 16 * 1rem); font-size: calc(102 / var(--baseFontSize) * 1rem) } } .hero__subhead { color: #ffffff; text-transform: uppercase; line-height: 1; letter-spacing: .5px; font-size: 6.67vw; max-width: 800px; margin: 0 auto; } @media (min-width: 40em) { .hero__subhead { font-size: 5vw } } @media (min-width: 48em) { .hero__subhead { font-size: calc(32 / 16 * 1rem); font-size: calc(32 / var(--baseFontSize) * 1rem) } } @media (min-width: 75em) { .hero__subhead { font-size: calc(35 / 16 * 1rem); font-size: calc(35 / var(--baseFontSize) * 1rem) } #shopify-section-hero-evergreen-promo-football .hero__subhead { font-size: calc(45 / 16 * 1rem); font-size: calc(45 / var(--baseFontSize) * 1rem) } } /* THEME VID */ .hero__copy-vid { position: absolute; left: 50%; transform: translateX(-50%); top: 0; width: 85%; max-width: 900px; height: 70vh; font-family: 'FoundersGroteskCond-SmBd', sans-serif; text-align: center; text-shadow: 0 2px 15px rgba(0, 0, 0, 0.29); display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; align-items: center; padding-top: 110px; } @media (min-width: 64.0625em) { .hero__copy-vid { height: 90vh /* padding-top: 60px; */ } } .hero__vid-wrap { position: relative; max-width: 1700px; height: 70vh; min-height: 70vh; min-height: 70vh; margin: 0 auto; } @media (min-width: 48em) { .hero__vid-wrap { background-image: none; padding: 0 } } @media (min-width: 64.0625em) { .hero__vid-wrap { height: 90vh } } @media (min-width: 1025px) and (max-width: 1390px) { .hero-hp.hero__vid-wrap{ height: 105vh } } .hero__vid { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: 70% center; object-position: 70% center; } @media (min-width: 48em) { .hero__vid { -o-object-position: center center; object-position: center center } } video[poster] { -o-object-fit: cover; object-fit: cover; } @media (min-width: 64.0625em){ .hero__beaches-event { height: 100vh; } } @media only screen and (max-width: 1024px) and (min-width: 768px){ .hero.ipad-sweep.hero__beaches-event { height: 100vh; } } .age-gate { display: none; background-color: rgba(0, 0, 0, .50); width: 100%; height: 100vh; min-height: 100vh; position: fixed; left: 0; top: 0; z-index: 99999; } .hero__vid-wrap--gate { height: 100%; max-width: none; } /* AUDIO CONTROL */ .age-gate__audio-copy-wrap { display: none; } @media (min-width: 48em) { .age-gate__audio-copy-wrap { display: flex; align-items: center; position: absolute; right: 3vh; top: 3vh } } @media (min-width: 87.5em) { .age-gate__audio-copy-wrap { top: auto; top: initial; bottom: 3vh } } .age-gate .audio-control__wrap { position: static; width: 54px; transform: translateX(0); } .age-gate__audio-text { color: #ffffff; font-family: 'FoundersGroteskCond-SmBd', sans-serif; font-size: calc(16 / 16 * 1rem); font-size: calc(16 / var(--baseFontSize) * 1rem); text-align: right; text-transform: uppercase; width: 240px; padding-right: 20px; } @media (min-width: 64.0625em) { .age-gate__audio-text { font-size: calc(18 / 16 * 1rem); font-size: calc(18 / var(--baseFontSize) * 1rem) } } /* CONTENT WRAP */ .age-gate__content { position: absolute; top: 0; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; flex-wrap: no-wrap; justify-content: space-between; align-items: center; width: 84%; height: 100%; min-height: 100vh; max-width: 860px; margin: 0 auto; } @media (min-width: 23.4375em) { .age-gate__content { padding: 30px 0 120px } } @media (min-width: 48em) { .age-gate__content { padding: 15vh 0 6vh } } @media (min-width: 87.5em) { .age-gate__content { padding: 8vh 0 4vh } } /* OVERLAY/LOGO/INTRO */ .age-gate__overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .5); } .age-gate__logo-intro-wrap { flex: 0 0 auto; } .age-gate__logo { width: 60%; max-width: 298px; margin: 0 auto 30px; } .age-gate__logo svg { width: 100%; } .age-gate__intro { color: #ffffff; font-family: 'FoundersGroteskCond-Reg', sans-serif; font-size: calc(18 / 16 * 1rem); font-size: calc(18 / var(--baseFontSize) * 1rem); text-align: center; line-height: 1.2; width: 70%; margin: 0 auto; } @media (min-width: 28.75em) { .age-gate__intro { font-size: calc(20 / 16 * 1rem); font-size: calc(20 / var(--baseFontSize) * 1rem) } } @media (min-width: 40em) { .age-gate__intro { width: 100% } } @media (min-width: 48em) { .age-gate__intro { font-size: calc(24 / 16 * 1rem); font-size: calc(24 / var(--baseFontSize) * 1rem) } } .age-gate__form-button-wrap { text-align: center; width: 100%; flex: 0 0 auto; } .age-gate__form { position: relative; width: 100%; display: flex; justify-content: space-between; margin-bottom: 30px; } @media (min-width: 48em) { .age-gate__form { margin-bottom: 60px } } .age-gate__valid { display: none; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); color: #ffffff; font-family: 'FoundersGroteskCond-SmBd', sans-serif; font-size: calc(16 / 16 * 1rem); font-size: calc(16 / var(--baseFontSize) * 1rem); text-transform: uppercase; width: 100%; } .age-gate__valid.show { display: block; } /* LEGAL */ .age-gate__legal { color: #ffffff; font-family: 'FoundersGroteskCond-Reg', sans-serif; font-size: calc(14 / 16 * 1rem); font-size: calc(14 / var(--baseFontSize) * 1rem); text-align: center; line-height: 1; flex: 0 0 auto; } .age-gate__legal p { padding-bottom: 10px; } .age-gate__legal a { text-decoration: underline; } /* FORM */ .age-gate__input-wrap { position: relative; } .age-gate__input-wrap--bday { flex: 1; margin: 0 20px; } @media (min-width: 64.0625em) { .age-gate__input-wrap--bday { margin: 0 50px } } .age-gate__input-wrap--month { flex: 1; } .age-gate__input-wrap--year { flex: 1.5; } .age-gate__input-wrap:after { content: ''; position: absolute; left: 0; bottom: 30%; width: 100%; height: 3px; background-color: #fdc338; background-color: var(--coronaYellow); } @media (min-width: 48em) { .age-gate__input-wrap:after { bottom: 27% } } .age-gate__submit-inner-rule { cursor: pointer; position: relative; display: inline-block; } .age-gate__submit-inner-rule:after { content: ''; position: absolute; top: 3px; left: 3px; width: calc(100% - 6px); height: calc(100% - 6px); border-radius: 32px; border: 2px solid #002452; border: 2px solid var(--coronaBlue); } /* Chrome, Safari, Edge, Opera */ .age-gate input::-webkit-outer-spin-button, .age-gate input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .age-gate .error { bottom: 40%; color: #fff; font-family: 'FoundersGroteskCond-SmBd', sans-serif; font-size: calc(20 / 16 * 1rem); font-size: calc(20 / var(--baseFontSize) * 1rem); left: 50%; line-height: 20px; opacity: 0; pointer-events: none; position: absolute; text-align: center; width: 120%; transition: all 0.3s ease-in-out; transform: translateX(-50%); } .age-gate .error.active { /*bottom: 90%; opacity: 1;*/ -webkit-animation: invalid_age_fade 4s 1; animation: invalid_age_fade 4s 1; } /* Firefox */ .age-gate input[type=number] { -moz-appearance: textfield; } .age-gate input[type=number] { color: #ffffff; background-color: transparent; outline: none; border: none; box-shadow: none; width: 100%; } .age-gate input::-moz-placeholder { color: rgba(255, 255, 255, .6); } .age-gate input:-ms-input-placeholder { color: rgba(255, 255, 255, .6); } .age-gate input::placeholder { color: rgba(255, 255, 255, .6); } .age-gate label { color: #fff; font-family: 'FoundersGroteskCond-SmBd', sans-serif; font-size: calc(18 / 16 * 1rem); font-size: calc(18 / var(--baseFontSize) * 1rem); text-transform: uppercase; } @media (min-width: 48em) { .age-gate label { font-size: calc(25 / 16 * 1rem); font-size: calc(25 / var(--baseFontSize) * 1rem) } } .age-gate input::-moz-placeholder { font-family: 'FoundersGroteskCond-SmBd', sans-serif; font-size: calc(44/16*1rem); font-size: calc(44/var(--baseFontSize)*1rem); line-height: calc(73/16*1rem); line-height: calc(73/var(--baseFontSize)*1rem); text-align: center; padding: 0; margin: 0; } .age-gate input:-ms-input-placeholder { font-family: 'FoundersGroteskCond-SmBd', sans-serif; font-size: calc(44/16*1rem); font-size: calc(44/var(--baseFontSize)*1rem); line-height: calc(73/16*1rem); line-height: calc(73/var(--baseFontSize)*1rem); text-align: center; padding: 0; margin: 0; } .age-gate input[type=number], .age-gate input::placeholder { font-family: 'FoundersGroteskCond-SmBd', sans-serif; font-size: calc(44/16*1rem); font-size: calc(44/var(--baseFontSize)*1rem); line-height: calc(73/16*1rem); line-height: calc(73/var(--baseFontSize)*1rem); text-align: center; padding: 0; margin: 0; } @media (min-width: 23.4375em) { .age-gate input::-moz-placeholder { font-size: calc(56 / 16 * 1rem); font-size: calc(56 / var(--baseFontSize) * 1rem) } .age-gate input:-ms-input-placeholder { font-size: calc(56 / 16 * 1rem); font-size: calc(56 / var(--baseFontSize) * 1rem) } .age-gate input[type=number], .age-gate input::placeholder { font-size: calc(56 / 16 * 1rem); font-size: calc(56 / var(--baseFontSize) * 1rem) } } @media (min-width: 40em) { .age-gate input::-moz-placeholder { font-size: calc(80 / 16 * 1rem); font-size: calc(80 / var(--baseFontSize) * 1rem); line-height: calc(105/16*1rem); line-height: calc(105/var(--baseFontSize)*1rem) } .age-gate input:-ms-input-placeholder { font-size: calc(80 / 16 * 1rem); font-size: calc(80 / var(--baseFontSize) * 1rem); line-height: calc(105/16*1rem); line-height: calc(105/var(--baseFontSize)*1rem) } .age-gate input[type=number], .age-gate input::placeholder { font-size: calc(80 / 16 * 1rem); font-size: calc(80 / var(--baseFontSize) * 1rem); line-height: calc(105/16*1rem); line-height: calc(105/var(--baseFontSize)*1rem) } } @media (min-width: 48em) { .age-gate input::-moz-placeholder { font-size: calc(100 / 16 * 1rem); font-size: calc(100 / var(--baseFontSize) * 1rem); line-height: calc(133/16*1rem); line-height: calc(133/var(--baseFontSize)*1rem) } .age-gate input:-ms-input-placeholder { font-size: calc(100 / 16 * 1rem); font-size: calc(100 / var(--baseFontSize) * 1rem); line-height: calc(133/16*1rem); line-height: calc(133/var(--baseFontSize)*1rem) } .age-gate input[type=number], .age-gate input::placeholder { font-size: calc(100 / 16 * 1rem); font-size: calc(100 / var(--baseFontSize) * 1rem); line-height: calc(133/16*1rem); line-height: calc(133/var(--baseFontSize)*1rem) } } @media (min-width: 75em) { .age-gate input::-moz-placeholder { font-size: calc(110 / 16 * 1rem); font-size: calc(110 / var(--baseFontSize) * 1rem); line-height: calc(145/16*1rem); line-height: calc(145/var(--baseFontSize)*1rem) } .age-gate input:-ms-input-placeholder { font-size: calc(110 / 16 * 1rem); font-size: calc(110 / var(--baseFontSize) * 1rem); line-height: calc(145/16*1rem); line-height: calc(145/var(--baseFontSize)*1rem) } .age-gate input[type=number], .age-gate input::placeholder { font-size: calc(110 / 16 * 1rem); font-size: calc(110 / var(--baseFontSize) * 1rem); line-height: calc(145/16*1rem); line-height: calc(145/var(--baseFontSize)*1rem) } } @-webkit-keyframes invalid_age_fade { 10% { bottom: 90%; opacity: 1; } 90% { bottom: 90%; opacity: 1; } 100% { bottom: 40%; opacity: 0; } } @keyframes invalid_age_fade { 10% { bottom: 90%; opacity: 1; } 90% { bottom: 90%; opacity: 1; } 100% { bottom: 40%; opacity: 0; } } /*================ #Icons ================*/ svg.icon:not(.icon--full-color) .icon-error__symbol, symbol.icon:not(.icon--full-color) .icon-error__symbol { fill: #ffffff; } svg.icon:not(.icon--full-color) circle, svg.icon:not(.icon--full-color) ellipse, svg.icon:not(.icon--full-color) g, svg.icon:not(.icon--full-color) line, svg.icon:not(.icon--full-color) path, svg.icon:not(.icon--full-color) polygon, svg.icon:not(.icon--full-color) polyline, svg.icon:not(.icon--full-color) rect, symbol.icon:not(.icon--full-color) circle, symbol.icon:not(.icon--full-color) ellipse, symbol.icon:not(.icon--full-color) g, symbol.icon:not(.icon--full-color) line, symbol.icon:not(.icon--full-color) path, symbol.icon:not(.icon--full-color) polygon, symbol.icon:not(.icon--full-color) polyline, symbol.icon:not(.icon--full-color) rect { fill: inherit; stroke: inherit } .icon { display: inline-block; width: 20px; height: 20px; vertical-align: middle; fill: currentColor } .icon__fallback-text, .visually-hidden { position: absolute !important; overflow: hidden; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0 } /*================ Social Icons ================*/ .social-icons .icon { width: 23px; height: 23px; } @media only screen and (min-width: 750px) { .social-icons .icon { width: 25px; height: 25px; } } .social-icons .icon.icon--wide { width: 40px; } /*============================================================================ Skip to content button - Overrides .visually-hidden when focused ==============================================================================*/ .skip-link:focus { clip: auto; width: auto; height: auto; margin: 0; color: var(--color-text); background-color: var(--color-bg); padding: 10px; opacity: 1; z-index: 10000; transition: none; } .collection-header { padding-top: 200px; } .collection-hero { position: relative; overflow: hidden; margin-top: -55px; margin-bottom: 22px; } @media only screen and (min-width: 750px) { .collection-hero { margin-bottom: 35px; } } .collection-description { margin-bottom: 22px; margin-top: 22px; } @media only screen and (min-width: 750px) { .collection-description { margin-bottom: 35px; margin-top: 35px; } } .collection-hero__image { background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; height: 300px; opacity: 1; } @media only screen and (max-width: 749px) { .collection-hero__image { height: 180px; } } .collection-hero__title-wrapper::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: var(--color-image-overlay); opacity: var(--opacity-image-overlay); } .collection-hero__title { position: absolute; color: var(--color-overlay-title-text); width: 100%; text-align: center; left: 0; right: 0; top: 50%; transform: translateY(-50%); } @media only screen and (min-width: 750px) { .collection-hero__title { font-size: calc(((var(--font-size-header) + 6) / (var(--font-size-base))) * 1em); } } .collection-grid { margin-bottom: -22px; overflow: auto; } .collection-grid-item { position: relative; width: 100%; padding-bottom: 100%; margin-bottom: 22px; } @media only screen and (min-width: 750px) { .collection-grid-item { margin-bottom: 30px; } } .collection-grid-item__title { color: var(--color-overlay-title-text); position: absolute; text-align: center; width: 100%; top: 50%; padding: 0 5px; transform: translateY(-50%); transition: 0.1s cubic-bezier(0.44, 0.13, 0.48, 0.87); text-shadow: 0 0 4px rgba(0, 0, 0, 0.4); -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } @media only screen and (min-width: 750px) { .collection-grid-item__title { padding: 0 15px; } } .collection-grid-item__link { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .collection-grid-item__link:hover .collection-grid-item__title-wrapper::before, .collection-grid-item__link:focus .collection-grid-item__title-wrapper::before { opacity: var(--hover-overlay-opacity); } .collection-grid-item__link:focus { opacity: 1; } .collection-grid-item__overlay { position: relative; display: block; height: 100%; width: 100%; background-size: cover; background-repeat: no-repeat; background-position: center top; } .collection-grid-item__title-wrapper::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: var(--color-image-overlay); opacity: var(--opacity-image-overlay); } .blog-card { margin-bottom: 30px; margin-top: 30px; } @media only screen and (min-width: 750px) { .blog-card { margin-top: 0; } } .blog-card__image-wrapper { margin-bottom: 30px; padding-bottom: 100%; position: relative; width: 100%; } .blog-card__image-wrapper:hover .blog-card__title-wrapper::before, .blog-card__image-wrapper:focus .blog-card__title-wrapper::before { opacity: var(--hover-overlay-opacity); } .blog-card__image-wrapper:focus { opacity: 1; } .blog-card__image-wrapper--small { padding-bottom: 50%; } .blog-card__image-wrapper--medium { padding-bottom: 75%; } .blog-card__title { color: var(--color-overlay-title-text); font-size: calc(((var(--font-size-header)) / (var(--font-size-base))) * 1em); -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; margin-bottom: 11px; padding: 0 5px; position: absolute; text-align: center; text-shadow: 0 0 4px rgba(0, 0, 0, 0.4); transition: 0.1s cubic-bezier(0.44, 0.13, 0.48, 0.87); top: 50%; width: 100%; transform: translateY(-50%); } @media only screen and (min-width: 750px) { .blog-card__title { padding: 0 15px; } } .blog-card__link { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .blog-card__overlay { position: relative; display: block; height: 100%; width: 100%; background-size: cover; background-repeat: no-repeat; background-position: center top; } .blog-card__title-wrapper::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: var(--color-image-overlay); opacity: var(--opacity-image-overlay); } .blog-card__excerpt { margin-bottom: 17.5px; } .blog-card__comment-count { border-color: transparent; border-bottom-color: currentColor; padding: 0 0 3px 0; } .blog-card__comment-count:not([disabled]):hover, .blog-card__comment-count:focus { border-color: transparent; border-bottom-color: currentColor; } .ftrd-merch { position: relative; width: 100%; max-width: 1700px; } @media (min-width: 64.0625em) { .ftrd-merch { margin: 100px auto } } .ftrd-merch__info-outter-wrap { max-width: 1700px; margin: 0 auto; padding: 50px 0 20px; background-repeat: no-repeat; background-size: 100%; background-position: center top; background-color: #fcc337; } @media (min-width: 64.0625em) { .ftrd-merch__info-outter-wrap { padding: 70px 0 30px; background-color: transparent; background-size: 1700px } } .ftrd-merch__info-wrap { width: 84%; max-width: 1400px; margin: 0 auto; } .ftrd-merch__headline { text-transform: uppercase; font-size: calc(50 / 16 * 1rem); font-size: calc(50 / var(--baseFontSize) * 1rem); line-height: 1; } @media (min-width: 40em) { .ftrd-merch__headline { font-size: calc(60 / 16 * 1rem); font-size: calc(60 / var(--baseFontSize) * 1rem) } } @media (min-width: 64.0625em) { .ftrd-merch__headline { font-size: calc(82 / 16 * 1rem); font-size: calc(82 / var(--baseFontSize) * 1rem) } } @media (min-width: 87.5em) { .ftrd-merch__headline { font-size: calc(70 / 16 * 1rem); font-size: calc(70 / var(--baseFontSize) * 1rem) } } .ftrd-merch__cta { position: relative; text-transform: uppercase; font-family: 'FoundersGroteskCond-SmBd'; font-size: calc(22 / 16 * 1rem); font-size: calc(22 / var(--baseFontSize) * 1rem); } .ftrd-merch__cta:after { content: "\f1df"; position: absolute; top: 1px; color: #002452; color: var(--coronaBlue); font-family: Material Icons; font-size: 1.25rem; font-size: 1.375rem; font-size: calc(22/16*1rem); font-size: calc(22/var(--baseFontSize)*1rem); line-height: 22px; padding-left: 5px; transition: .2s; } @media (hover: hover) { .ftrd-merch__cta:hover:after { transform: translateX(10px); transition: .2s; } } .ftrd-merch__merch-wrap { position: relative; max-width: 1700px; margin: 0 auto; } .ftrd-merch__merch-wrap:before { content: ''; position: absolute; width: 100%; height: 41%; bottom: 60%; z-index: -1; background-repeat: no-repeat; background-size: 1700px; background-position: center bottom; } .ftrd-merch__slider-wrap { position: relative; margin-top: 50px; max-width: 1460px; margin: 0 auto; } @media (min-width: 40em) { .ftrd-merch__slider-wrap { width: 92% } } .ftrd-merch__slider { max-width: 1400px; margin: 0 auto; } @media (min-width: 48em) { .ftrd-merch__slider { width: 90% } } .ftrd-merch__image-wrap { position: relative; } .ftrd-merch__image-wrap img { width: 100%; } .ftrd-merch__sale-bug { position: absolute; top: 3px; right: 3px; display: flex; flex-direction: column; justify-content: center; background-color: #002452; background-color: var(--coronaBlue); color: #fdc338; color: var(--coronaYellow); font-family: 'FoundersGroteskCond-SmBd'; font-size: calc(15 / 16 * 1rem); font-size: calc(15 / var(--baseFontSize) * 1rem); line-height: 1; text-align: center; text-transform: uppercase; border-radius: 100%; width: 50px; height: 50px; } .ftrd-merch__sale-bug:after { content: ''; position: absolute; width: calc(100% + 6px); height: calc(100% + 6px); left: -3px; top: -3px; border: 1.5px solid #002452; border: 1.5px solid var(--coronaBlue); border-radius: 100%; } .ftrd-merch__product-name { text-transform: uppercase; text-align: center; font-family: 'FoundersGroteskCond-SmBd'; font-size: calc(20 / 16 * 1rem); font-size: calc(20 / var(--baseFontSize) * 1rem); line-height: 1.1; max-width: 200px; padding: 20px 0 15px; margin: 0 auto; } @media (min-width: 28.75em) { .ftrd-merch__product-name { font-size: calc(18 / 16 * 1rem); font-size: calc(18 / var(--baseFontSize) * 1rem); padding: 30px 0 20px } } @media (min-width: 48em) { .ftrd-merch__product-name { font-size: calc(20 / 16 * 1rem); font-size: calc(20 / var(--baseFontSize) * 1rem) } } @media (min-width: 64.0625em) { .ftrd-merch__product-name { font-size: calc(22 / 16 * 1rem); font-size: calc(22 / var(--baseFontSize) * 1rem) } } .ftrd-merch__product-price { text-align: center; font-family: 'FoundersGroteskCond-SmBd'; font-size: calc(26 / 16 * 1rem); font-size: calc(26 / var(--baseFontSize) * 1rem); line-height: 1.1; } .ftrd-merch__org-price { color: #128728; color: var(--coronaGreen); font-family: 'FoundersGroteskCond-Med'; font-size: calc(18 / 16 * 1rem); font-size: calc(18 / var(--baseFontSize) * 1rem); text-decoration: line-through; line-height: 1.1; padding-left: 5px; } .ftrd-merch__slider { } .ftrd-merch__dots-arrows-wrap { position: relative; height: 36px; width: 200px; margin: 15px auto 0; } @media (min-width: 48em) { .ftrd-merch__dots-arrows-wrap { position: absolute; bottom: 0; transform: translateY(-50%); left: 0; width: 100% } } @media (min-width: 64.0625em) { .ftrd-merch__dots-arrows-wrap { height: 50px } } @media (hover: hover) { .ftrd-merch__dots-arrows-wrap .slick-next:hover:before, .ftrd-merch__dots-arrows-wrap .slick-prev:hover:before { transform: scale(.5); transition: .2s } } @media (max-width: 640px) { .ftrd-merch .slick-list { padding:0 30% 0 0 !important } } .campaign-section-limonada{ position: relative; margin-top:50px; } .ftrd-merch.ftrd-summer-merch { margin-top: 0px; } .ftrd-merch.ftrd-summer-merch .ftrd-merch__info-outter-wrap { padding-top: 50px; } @media screen and (min-width:1285px) and (max-width:1399px){ .campaign-section-limonada h2.brand-tile__headline { max-width: 350px; } .campaign-section-limonada .brand-tile__info-wrap p { max-width: 400px; } } @media (min-width: 1025px){ .campaign-section-limonada{ /*z-index: 99; */ } .ftrd-merch.ftrd-summer-merch { margin-top: -75px; } .ftrd-merch.ftrd-summer-merch .ftrd-merch__info-outter-wrap { padding-top: 130px; } #shopify-section-tile-featured-campaign-limonada .brand-tile__image-wrap { z-index: 1; } #shopify-section-tile-featured-campaign-limonada .brand-tile__info-wrap { z-index: 2; } } @media (max-width: 640px){ .campaign-section-limonada .brand-tile__wrap.right{ overflow: inherit; } .campaign-section-limonada .brand-tile__image-wrap{ margin-right: 8%; margin-left:0 !important; margin-top: -100px; } } .featured-tiles-wrap.featured-tiles-beaches{ margin-top:100px; margin-bottom: 80px; } .featured-tiles-wrap.featured-tiles-beaches .featured-tiles__seal-title { margin: 0 auto 0; max-width: 618px; } .featured-tiles-wrap.featured-tiles-beaches .featured-tiles__seal-title h1{ text-align: center; font-size: calc(85 / 16 * 1rem); font-size: calc(85 / var(--baseFontSize) * 1rem); letter-spacing: 0.91px; color: #002452; text-transform: uppercase; opacity: 1; font-family: FoundersGroteskCond-SmBd,sans-serif; font-weight:400; line-height:82px; } .featured-tiles-wrap.featured-tiles-beaches .featured-tiles__seal-title a{ position: relative; letter-spacing: 0.21px; color: #002452; text-transform: uppercase; opacity: 1; font-family: FoundersGroteskCond-SmBd,sans-serif; font-weight:400; font-size: calc(20 / 16 * 1rem); font-size: calc(20 / var(--baseFontSize) * 1rem); margin-left: 8px; } .featured-tiles-wrap.featured-tiles-beaches .featured-tiles__seal-title a::after { content: "\f1df"; position: absolute; top:4px; color: #002452; color: #002452; color: var(--coronaBlue); font-family: Material Icons; font-size: calc(18/16*1rem); font-size: calc(18/var(--baseFontSize)*1rem); line-height: 15px; padding-left: 5px; transition: .2s; } @media (min-width: 64.0625em){ .featured-tiles-wrap.featured-tiles-beaches .featured-tiles{ padding: 5% 0 0; } } @media (min-width: 48em){ .featured-tiles-wrap.featured-tiles-beaches .featured-tile:first-of-type { margin-top: 7.5%; } } @media screen and (max-width:1200px){ .featured-tiles-wrap.featured-tiles-beaches{ margin-bottom:0; } } @media screen and (max-width:767px){ .featured-tiles-wrap.featured-tiles-beaches .featured-tiles__seal-title { margin: 0 20px; } } .dots-arrows-wrap .slick-dots { bottom: 0; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; justify-content: center; } .dots-arrows-wrap .slick-dots li { margin: 0 15px; } .dots-arrows-wrap .slick-dots li button:before { color: #D0D0D0; font-size: 14px; opacity: 1; } .dots-arrows-wrap .slick-dots li.slick-active button:before { color: #fdc338; color: var(--coronaYellow); font-size: 24px; } .dots-arrows-wrap .slick-prev, .dots-arrows-wrap .slick-next { width: 15%; height: 100%; top: 0; transform: translateY(0); z-index: 100; } .dots-arrows-wrap .slick-prev { left: 0; } .dots-arrows-wrap .slick-next { right: 0; } .dots-arrows-wrap .slick-next:before, .dots-arrows-wrap .slick-prev:before { content: ''; position: absolute; top: 0; left: 0; background-size: contain; background-repeat: no-repeat; width: 100%; height: 100%; opacity: 1; transition: .2s; } @media (hover: hover) { .dots-arrows-wrap .slick-next:hover:before, .dots-arrows-wrap .slick-prev:hover:before { transform: scale(1.2); transition: .2s } } .dots-arrows-wrap .slick-prev:before { background-position: left center; } .dots-arrows-wrap .slick-next:before { background-position: right center; } /* the slides */ .slick-slide { margin: 0 20px; outline: none; } .slick-slide:focus, .slick-slide a { outline: none; } /* the parent */ .slick-list { margin: 0; overflow: hidden; } .slick-dotted.slick-slider { margin-bottom: 0; } /* outter wrap/background icons */ .cerveza__wrap { position: relative; max-width: 1700px; z-index: 100; } @media (min-width: 48em) { .cerveza__wrap { margin: -1% auto 0; overflow: hidden } } @media (min-width: 75em) { .cerveza__wrap { margin: -.5% auto 0 } } .cerveza__icon-wrap { position: absolute; right: -10%; top: 84%; width: 73%; max-width: 660px; height: 0; padding-top: 100%; overflow: hidden; opacity: .2; z-index: -1; } @media (min-width: 28.75em) { .cerveza__icon-wrap { width: 55% } } @media (min-width: 48em) { .cerveza__icon-wrap { top: 0; right: 0; width: 28%; padding-top: 40% } } .cerveza__icon-wrap--crown { width: 79%; max-width: 660px; right: -10%; top: 79%; } @media (min-width: 28.75em) { .cerveza__icon-wrap--crown { width: 60% } } @media (min-width: 48em) { .cerveza__icon-wrap--crown { top: 140px; width: 44%; right: 0% } } @media (min-width: 64.0625em) { .cerveza__icon-wrap--crown { top: 100px; width: 40% } } @media (min-width: 75em) { .cerveza__icon-wrap--crown { top: 120px; width: 47%; padding-top: 50% } } .cerveza__icon-wrap--crown-left { right: auto; right: initial; left: -10%; } @media (min-width: 48em) { .cerveza__icon-wrap--crown-left { left: 0 } } .cerveza__icon-wrap--crown.mobile-hide { display: none; } @media (min-width: 48em) { .cerveza__icon-wrap--crown.mobile-hide { display: block } } .cerveza__icon-wrap--crown.desktop-hide { display: block; } @media (min-width: 48em) { .cerveza__icon-wrap--crown.desktop-hide { display: none } } .cerveza__icon { position: absolute; top: 0; left: 0; width: 115%; transform: translateX(11%); } @media (min-width: 48em) { .cerveza__icon { transform: translate(11%, -13%) } } .cerveza__icon svg { width: 100%; } .cerveza__icon--crown { transform: translate(0, 0); width: 176%; } @media (min-width: 48em) { .cerveza__icon--crown { width: 160% } } .cerveza__icon--crown-left { transform: translate(-45%, 0); } .cerveza__info-wrap { width: 84%; max-width: 990px; margin: 0 auto; padding: 30px 0 0; } @media (min-width: 48em) { .cerveza__info-wrap { padding: 60px 0 0 } } @media (min-width: 75em) { .cerveza__info-wrap { padding: 80px 0 0 } } @media (min-width: 48em) { .cerveza__intro { display: flex; align-items: flex-start } } .cerveza__intro--seltzer { width: 84%; margin: 0 auto; } @media (min-width: 48em) { .cerveza__intro--seltzer { width: 100% } } .cerveza__description-wrap { position: relative; text-align: center; } @media (min-width: 48em) { .cerveza__description-wrap { text-align: left } } /* nutrition */ .cerveza__nutrition-facts { display: flex; justify-content: space-between; max-width: 360px; margin: 0 auto 40px; } @media (min-width: 48em) { .cerveza__nutrition-facts { margin: 0 10% 0 0; flex-direction: column } } .cerveza__nutrition-fact { font-family: 'FoundersGroteskCond-Bd', sans-serif; font-size: calc(40 / 16 * 1rem); font-size: calc(40 / var(--baseFontSize) * 1rem); line-height: 1; letter-spacing: calc(.5 / 16 * 1rem); letter-spacing: calc(.5 / var(--baseFontSize) * 1rem); padding-left: 16px; padding-top: 6px; border-left: 3px solid #fdc338; border-left: 3px solid var(--coronaYellow); } @media (min-width: 48em) { .cerveza__nutrition-fact { margin-bottom: 40px; font-size: calc(42 / 16 * 1rem); font-size: calc(42 / var(--baseFontSize) * 1rem) } } @media (min-width: 75em) { .cerveza__nutrition-fact { margin-bottom: 60px; font-size: calc(65 / 16 * 1rem); font-size: calc(65 / var(--baseFontSize) * 1rem) } } .cerveza__fact-label { display: block; font-family: 'FoundersGroteskCond-SmBd', sans-serif; font-size: calc(18 / 16 * 1rem); font-size: calc(18 / var(--baseFontSize) * 1rem); letter-spacing: calc(.5 / 16 * 1rem); letter-spacing: calc(.5 / var(--baseFontSize) * 1rem); text-transform: uppercase; line-height: 1; } @media (min-width: 48em) { .cerveza__fact-label { font-size: calc(20 / 16 * 1rem); font-size: calc(20 / var(--baseFontSize) * 1rem) } } @media (min-width: 75em) { .cerveza__fact-label { font-size: calc(23 / 16 * 1rem); font-size: calc(23 / var(--baseFontSize) * 1rem) } } /* description */ .cerveza__description p { font-family: 'FoundersGroteskCond-Reg', sans-serif; font-size: calc(24 / 16 * 1rem); font-size: calc(24 / var(--baseFontSize) * 1rem); line-height: 1.3; margin-bottom: 30px; } @media (min-width: 48em) { .cerveza__description p { font-size: calc(26 / 16 * 1rem); font-size: calc(26 / var(--baseFontSize) * 1rem); margin-bottom: 40px } } @media (min-width: 64.0625em) { .cerveza__description p { font-size: calc(28 / 16 * 1rem); font-size: calc(28 / var(--baseFontSize) * 1rem) } } @media (min-width: 75em) { .cerveza__description p { font-size: calc(36 / 16 * 1rem); font-size: calc(36 / var(--baseFontSize) * 1rem) } } /* ingredients */ .cerveza__ingredients-wrap { margin-bottom: 20px; } .cerveza__ingredients { font-family: 'FoundersGroteskCond-Reg', sans-serif; font-size: calc(18 / 16 * 1rem); font-size: calc(18 / var(--baseFontSize) * 1rem); letter-spacing: calc(.5 / 16 * 1rem); letter-spacing: calc(.5 / var(--baseFontSize) * 1rem); line-height: 1; } @media (min-width: 48em) { .cerveza__ingredients { font-size: calc(20 / 16 * 1rem); font-size: calc(20 / var(--baseFontSize) * 1rem) } } .cerveza__ingredients-label { font-family: 'FoundersGroteskCond-SmBd', sans-serif; text-transform: uppercase; } /* legal */ .cerveza__legal-wrap { margin-bottom: 20px; } .cerveza__legal-wrap p { text-align: left; font-family: 'FoundersGroteskCond-Reg', sans-serif; font-size: calc(13 / 16 * 1rem); font-size: calc(13 / var(--baseFontSize) * 1rem); letter-spacing: calc(.5 / 16 * 1rem); letter-spacing: calc(.5 / var(--baseFontSize) * 1rem); line-height: 1; } .cerveza__legal-wrap--under-attr p { margin: 0 auto; max-width: 640px; } @media (min-width: 48em) { .cerveza__legal-wrap--under-attr p { text-align: center } } .cerveza__legal-wrap--under-attr-seltzer p { width: 92%; margin: 0 auto; } @media (min-width: 48em) { .cerveza__legal-wrap--under-attr-seltzer p { width: 100%; text-align: center } } /* attributes */ .cerveza__attrs { margin: 50px 0; } @media (min-width: 48em) { .cerveza__attrs { display: flex; justify-content: space-between; margin: 40px 0 } } @media (min-width: 75em) { } .cerveza__attr { display: flex; align-items: center; margin-bottom: 40px; } @media (min-width: 48em) { .cerveza__attr { flex-direction: column; text-align: center; margin-bottom: 0; width: 28% } } .cerveza__attr-image-wrap { flex: 0 0 auto; position: relative; width: 102px; height: 102px; border-radius: 100%; margin-right: 30px; } @media (min-width: 40em) { .cerveza__attr-image-wrap { width: 120px; height: 120px } } @media (min-width: 48em) { .cerveza__attr-image-wrap { width: 150px; height: 150px; margin: 0 auto 30px } } @media (min-width: 64.0625em) { .cerveza__attr-image-wrap { width: 180px; height: 180px; margin: 0 auto 30px } } @media (min-width: 75em) { .cerveza__attr-image-wrap { width: 230px; height: 230px; margin: 0 auto 40px } } .cerveza__attr-image-wrap:after { content: ''; position: absolute; width: calc(100% + 12px); height: calc(100% + 12px); top: -6px; left: -6px; border-radius: 100%; border: 3px solid #fdc338; border: 3px solid var(--coronaYellow); } .cerveza__attr-image { with: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 100%; } .cerveza__attr-title { font-family: 'FoundersGroteskCond-SmBd', sans-serif; font-size: calc(20 / 16 * 1rem); font-size: calc(20 / var(--baseFontSize) * 1rem); text-transform: uppercase; letter-spacing: calc(.5 / 16 * 1rem); letter-spacing: calc(.5 / var(--baseFontSize) * 1rem); line-height: 1.2; padding-bottom: 5px; } @media (min-width: 40em) { .cerveza__attr-title { font-size: calc(22 / 16 * 1rem); font-size: calc(22 / var(--baseFontSize) * 1rem) } } @media (min-width: 48em) { .cerveza__attr-title { font-size: calc(24 / 16 * 1rem); font-size: calc(24 / var(--baseFontSize) * 1rem) } } @media (min-width: 75em) { .cerveza__attr-title { font-size: calc(30 / 16 * 1rem); font-size: calc(30 / var(--baseFontSize) * 1rem) } } .cerveza__attr-copy p { font-family: 'FoundersGroteskCond-Reg', sans-serif; font-size: calc(16 / 16 * 1rem); font-size: calc(16 / var(--baseFontSize) * 1rem); letter-spacing: calc(.5 / 16 * 1rem); letter-spacing: calc(.5 / var(--baseFontSize) * 1rem); line-height: 1.2; } @media (min-width: 40em) { .cerveza__attr-copy p { font-size: calc(20 / 16 * 1rem); font-size: calc(20 / var(--baseFontSize) * 1rem) } } @media (min-width: 48em) { .cerveza__attr-copy p { font-size: calc(20 / 16 * 1rem); font-size: calc(20 / var(--baseFontSize) * 1rem) } } @media (min-width: 75em) { .cerveza__attr-copy p { font-size: calc(26 / 16 * 1rem); font-size: calc(26 / var(--baseFontSize) * 1rem) } } /* flavor packs */ .cerveza__flavor-packs-headline { text-transform: uppercase; text-align: center; font-size: calc(28 / 16 * 1rem); font-size: calc(28 / var(--baseFontSize) * 1rem); font-family: 'FoundersGroteskCond-SmBd', sans-serif; margin: 0 15%; } @media (min-width: 64.0625em) { .cerveza__flavor-packs-headline { font-size: calc(32 / 16 * 1rem); font-size: calc(32 / var(--baseFontSize) * 1rem); margin: 50px 0 0 } } .cerveza__flavor-packs-wrap { position: relative; margin: 50px auto; position: -webkit-sticky; position: sticky; top: 42px; } .cerveza__flavor-packs-wrap.sticky { background-color: #ffffff; border-bottom: 1px solid #d1d1d1; z-index: 100; } @media (min-width: 48em) { .cerveza__flavor-packs-wrap.sticky { background-color: transparent; border-bottom: none } } .cerveza__flavor-packs { display: flex; justify-content: space-between; width: 80%; margin: 0 auto; max-width: 460px; } @media (min-width: 64.0625em) { .cerveza__flavor-packs { max-width: 600px } } .cerveza__flavor-pack-tab { position: relative; cursor: pointer; outline: none; text-align: center; } @media (hover: hover) { .cerveza__flavor-pack-tab:hover .cerveza__flavor-pack-title:after { transform: scaleX(1); transition: .3s ease-in; } } .cerveza__flavor-pack-image, .cerveza__flavor-pack-shadow { width: 125px; display: block; } @media (min-width: 28.75em) { .cerveza__flavor-pack-image, .cerveza__flavor-pack-shadow { width: 140px } } @media (min-width: 48em) { .cerveza__flavor-pack-image, .cerveza__flavor-pack-shadow { width: 200px } } @media (min-width: 64.0625em) { .cerveza__flavor-pack-image, .cerveza__flavor-pack-shadow { width: 250px; padding: 0 } } .cerveza__flavor-pack-shadow { position: absolute; top: 0; left: 0; z-index: -1; opacity: 0; transition: .2s; } .cerveza__flavor-pack-shadow.active { opacity: 1; transition: .2s; } .cerveza__flavor-pack-title { position: relative; text-transform: uppercase; text-align: center; display: inline-block; font-size: calc(16 / 16 * 1rem); font-size: calc(16 / var(--baseFontSize) * 1rem); margin-bottom: 6px; } .cerveza__flavor-pack-title:after { content: ''; position: absolute; background-color: #fdc338; background-color: var(--coronaYellow); width: 100%; height: 3px; top: calc(100% + 3px); left: 0; transform: scaleX(0); transform-origin: 50% 50%; transition: .3s ease-in; } @media (min-width: 28.75em) { .cerveza__flavor-pack-title { font-size: calc(18 / 16 * 1rem); font-size: calc(18 / var(--baseFontSize) * 1rem) } } @media (min-width: 40em) { .cerveza__flavor-pack-title { margin-bottom: 20px } } @media (min-width: 64.0625em) { .cerveza__flavor-pack-title { font-size: calc(20 / 16 * 1rem); font-size: calc(20 / var(--baseFontSize) * 1rem) } } .cerveza__flavor-pack-title.active:after { content: ''; position: absolute; background-color: #fdc338; background-color: var(--coronaYellow); width: 100%; height: 3px; top: calc(100% + 3px); left: 0; transform-origin: 50% 50%; transform: scaleX(1); transition: .3s ease-in; } /* flavor specific stuff */ .cerveza__info-wrap--flavor { max-width: 1190px; width: 84%; margin: 0 auto; } @media (min-width: 48em) { .cerveza__info-wrap--flavor { width: 90% } } .cerveza__info-wrap--seltzer { width: 100%; } @media (min-width: 48em) { .cerveza__info-wrap--seltzer { width: 90% } } .cerveza__description-wrap--flavor { text-align: center; max-width: 640px; margin: 0 auto; } @media (min-width: 64.0625em) { .cerveza__description-wrap--flavor { max-width: 780px } } .cerveza__flavors-wrap { display: grid; grid-template-columns: 1fr; grid-column-gap: 10%; -moz-column-gap: 10%; column-gap: 10%; margin: 40px auto 30px; max-width: 330px; } @media (min-width: 40em) { .cerveza__flavors-wrap { /* visually 2 column, but using 4 to be able to center an odd no*/ grid-template-columns: repeat(4, 1fr); max-width: 100% } } @media (min-width: 48em) { .cerveza__flavors-wrap { grid-template-columns: repeat(6, 1fr); grid-column-gap: 4%; -moz-column-gap: 4%; column-gap: 4%; grid-row-gap: 50px; row-gap: 50px; margin: 50px 0; max-width: 100% } } @media (min-width: 64.0625em) { .cerveza__flavors-wrap { grid-column-gap: 10%; -moz-column-gap: 10%; column-gap: 10%; margin: 30px 0 50px } } @media (min-width: 48em) { .cerveza__flavors-wrap.even { grid-column-gap: 10%; -moz-column-gap: 10%; column-gap: 10% } } .cerveza__flavors-wrap.even .cerveza__flavor { justify-self: center; } @media (min-width: 48em) { .cerveza__flavors-wrap.even .cerveza__flavor:nth-child(odd) { grid-column-end: 4; } .cerveza__flavors-wrap.even .cerveza__flavor:nth-child(even) { grid-column-end: 6; } } .cerveza__flavor { text-align: center; max-width: 280px; width: 100%; justify-self: center; } @media (min-width: 40em) { .cerveza__flavor { grid-column: span 2 /* center last flavor if odd number*/ } .cerveza__flavor:last-child:nth-child(2n - 1) { grid-column-end: 4; } } @media (min-width: 48em) { .cerveza__flavor { max-width: none; grid-column: span 2 } .cerveza__flavor:last-child:nth-child(2n - 1) { grid-column-end: initial; } } .cerveza__flavor-desc { font-family: 'FoundersGroteskCond-Reg', sans-serif; font-size: calc(24 / 16 * 1rem); font-size: calc(24 / var(--baseFontSize) * 1rem); letter-spacing: calc(.5 / 16 * 1rem); letter-spacing: calc(.5 / var(--baseFontSize) * 1rem); line-height: 1.2; padding: 26px 0; } @media (min-width: 40em) { .cerveza__flavor-desc { font-size: calc(18 / 16 * 1rem); font-size: calc(18 / var(--baseFontSize) * 1rem) } } @media (min-width: 64.0625em) { .cerveza__flavor-desc { font-size: calc(24 / 16 * 1rem); font-size: calc(24 / var(--baseFontSize) * 1rem) } } .cerveza__flavor-name { font-family: 'FoundersGroteskCond-Bd', sans-serif; font-size: calc(30 / 16 * 1rem); font-size: calc(30 / var(--baseFontSize) * 1rem); letter-spacing: calc(.5 / 16 * 1rem); letter-spacing: calc(.5 / var(--baseFontSize) * 1rem); text-transform: uppercase; padding-bottom: 19px; } @media (min-width: 40em) { .cerveza__flavor-name { font-size: calc(22 / 16 * 1rem); font-size: calc(22 / var(--baseFontSize) * 1rem); padding-bottom: 12px } } @media (min-width: 64.0625em) { .cerveza__flavor-name { font-size: calc(30 / 16 * 1rem); font-size: calc(30 / var(--baseFontSize) * 1rem); padding-bottom: 22px } } .cerveza__flavor-image-wrap { width: 100%; margin: 0 0 34px; } .cerveza__flavor-image { display: block; width: 100%; } .cerveza__nutrition-facts--flavor { flex-direction: row; justify-content: space-between; margin: 0 auto; text-align: left; } .cerveza__nutrition-fact--flavor { font-size: calc(30 / 16 * 1rem); font-size: calc(30 / var(--baseFontSize) * 1rem); margin: 0; padding-left: 10px; } @media (min-width: 40em) { .cerveza__nutrition-fact--flavor { font-size: calc(26 / 16 * 1rem); font-size: calc(26 / var(--baseFontSize) * 1rem) } } @media (min-width: 64.0625em) { .cerveza__nutrition-fact--flavor { font-size: calc(30 / 16 * 1rem); font-size: calc(30 / var(--baseFontSize) * 1rem) } } .cerveza__nutrition-fact-label--flavor { font-size: calc(20 / 16 * 1rem); font-size: calc(20 / var(--baseFontSize) * 1rem); } @media (min-width: 40em) { .cerveza__nutrition-fact-label--flavor { font-size: calc(15 / 16 * 1rem); font-size: calc(15 / var(--baseFontSize) * 1rem) } } @media (min-width: 64.0625em) { .cerveza__nutrition-fact-label--flavor { font-size: calc(20 / 16 * 1rem); font-size: calc(20 / var(--baseFontSize) * 1rem) } } /* selzter specific stuff */ .cerveza__flavors-wrap--seltzer { outline: none; display: none; } @media (min-width: 40em) { .cerveza__flavors-wrap--seltzer { padding: 0 4% } } @media (min-width: 48em) { .cerveza__flavors-wrap--seltzer { padding: 0 } } .cerveza__flavors-wrap--seltzer.active { display: grid; } .cerveza__flavors-wrap--seltzer .cerveza__flavor-image-wrap { margin-bottom: 5px; } .cerveza__flavors-wrap.cerveza_flavors-wrap-limonada .cerveza__flavor-desc p.Ingredients-text{ font-size: 18px; margin-top:20px; } @media (min-width: 48em) { .cerveza__flavors-wrap.cerveza_flavors-wrap-limonada .cerveza__flavor-desc p.Ingredients-text{ font-size: 20px } } .cerveza__flavors-wrap.cerveza_flavors-wrap-limonada .cerveza__flavor-desc p.Ingredients-text strong { font-family: FoundersGroteskCond-Bd,sans-serif; text-transform: uppercase; } .cerveza__icon-wrap--crown.cerveza__icon-wrap-limonada{ right:auto; left: -25px; } .cerveza__icon-wrap--crown.cerveza__icon-wrap-limonada .cerveza__icon.cerveza__icon--crown{ right:0; left:auto; width: 175%; } @media (min-width: 48em) { .cerveza__icon-wrap--crown.cerveza__icon-wrap-limonada{ width:38%; top:0 } } .cerveza__legal-wrap--under-attr p:lang(es){ margin: 0 auto; max-width: 700px; } @media screen and (min-width:1025px) { .corona-limonada-hero-section .hero__cerveza { margin-top: -60px; } } @media screen and (max-width:1024px) and (min-width:991px) { .corona-limonada-hero-section .hero__cerveza { margin-top: -10px; } } @media (max-width:767px){ .corona-limonada-hero-section .cerveza__info-wrap.cerveza__info-wrap--flavor { width:calc(100% - 40px); -webkit-width:calc(100% - 40px); } .corona-limonada-hero-section .cerveza__flavor{ max-width: 330px; } } @media (min-width: 64.0625em){ .corona-limonada-hero-section .cerveza__description-wrap.cerveza__description-wrap--flavor{ max-width: 760px; } } .cerveza__wrap.cerveza.us-cerveza-limonada .cerveza__legal-wrap p{ text-align: center; } .corona-limonada-hero-section .hero__cerveza { height: 100%; background-image: none !important; padding-top:0 !important; } .corona-limonada-hero-section .hero__cerveza img{ width: 100%; } @media screen and (max-width:990px) and (min-width:768px) { .corona-limonada-hero-section .hero__cerveza { margin-top:30px; } .cerveza__wrap.cerveza.us-cerveza-limonada .cerveza__flavors-wrap.even { grid-column-gap: 8%; -moz-column-gap: 8%; grid-column-gap: 8%; column-gap: 8%; } .cerveza_flavors-wrap-limonada .cerveza__flavor-desc p:first-child { min-height: 43px; } } @media screen and (max-width:767px){ .corona-limonada-hero-section .hero__cerveza { margin-top: 50px; } .corona-limonada-hero-section .hero__cerveza:after { display:none; } .cerveza__wrap.cerveza.us-cerveza-limonada .cerveza__legal-wrap{ margin-bottom: 50px; } } .recipes-carousel { position: relative; max-width: 1700px; margin: 0 auto 70px; } @media (min-width: 48em) { .recipes-carousel__wrap { display: flex; justify-content: space-between } } .recipes-carousel__info-wrap { width: 84%; margin: 0 auto; } @media (min-width: 48em) { .recipes-carousel__info-wrap { width: 35%; margin: 0 0 0 3.5%; padding: 25px 0; display: flex; flex-direction: column; justify-content: space-between } } @media (min-width: 64.0625em) { .recipes-carousel__info-wrap { width: 30% } } @media (min-width: 75em) { .recipes-carousel__info-wrap { margin-left: 8% } } .recipes-carousel__info-inner-wrap { flex: 1 1 0; } .recipes-carousel__slider { transform: translateX(-15px); width: calc( 100% + 15px ); } @media (min-width: 48em) { .recipes-carousel__slider { width: 60%; transform: translateX(0) } } .recipes-carousel__headline { text-align: left; text-transform: uppercase; font-size: calc(50 / 16 * 1rem); font-size: calc(50 / var(--baseFontSize) * 1rem); line-height: .875; padding-bottom: 15px; } @media (min-width: 28.75em) { .recipes-carousel__headline { font-size: calc(60 / 16 * 1rem); font-size: calc(60 / var(--baseFontSize) * 1rem) } } @media (min-width: 48em) { .recipes-carousel__headline { font-size: calc(50 / 16 * 1rem); font-size: calc(50 / var(--baseFontSize) * 1rem) } } @media (min-width: 64.0625em) { .recipes-carousel__headline { font-size: calc(82 / 16 * 1rem); font-size: calc(82 / var(--baseFontSize) * 1rem) } } .recipes-carousel__desc { font-size: calc(22 / 16 * 1rem); font-size: calc(22 / var(--baseFontSize) * 1rem); line-height: 1.2; padding-bottom: 20px; } @media (min-width: 28.75em) { .recipes-carousel__desc { font-size: calc(24 / 16 * 1rem); font-size: calc(24 / var(--baseFontSize) * 1rem); padding-bottom: 30px } } @media (min-width: 48em) { .recipes-carousel__desc { font-size: calc(22 / 16 * 1rem); font-size: calc(22 / var(--baseFontSize) * 1rem); padding-bottom: 30px } } @media (min-width: 64.0625em) { .recipes-carousel__desc { font-size: calc(26 / 16 * 1rem); font-size: calc(26 / var(--baseFontSize) * 1rem); padding-bottom: 40px } } .recipes-carousel__cta { position: relative; font-size: calc(22 / 16 * 1rem); font-size: calc(22 / var(--baseFontSize) * 1rem); font-family: 'FoundersGroteskCond-SmBd', sans-serif; text-transform: uppercase; padding-bottom: 20px; } @media (min-width: 48em) { .recipes-carousel__cta { font-size: calc(20 / 16 * 1rem); font-size: calc(20 / var(--baseFontSize) * 1rem) } } @media (min-width: 64.0625em) { .recipes-carousel__cta { font-size: calc(22 / 16 * 1rem); font-size: calc(22 / var(--baseFontSize) * 1rem) } } .recipes-carousel__cta:after { content: "\f1df"; position: absolute; top: 1px; color: #002452; color: var(--coronaBlue); font-family: Material Icons; font-size: 1.25rem; font-size: 1.375rem; font-size: calc(22/16*1rem); font-size: calc(22/var(--baseFontSize)*1rem); line-height: 22px; padding-left: 5px; transition: .2s; } @media (hover: hover) { .recipes-carousel__cta:hover:after { transform: translateX(10px); transition: .2s; } } /* MOVE SHADOW ON RECIPE CARD TO LINK BECAUSE OF CAROUSEL OVERFLOW HIDDEN */ .recipes-carousel .recipe-card { padding: 15px; background-color: transparent; box-shadow: none; } @media (min-width: 64.0625em) { .recipes-carousel .recipe-card { padding: 25px } } @media (hover: hover) { .recipes-carousel .recipe-card:hover { box-shadow: none; } } .recipes-carousel .recipe-card__title-wrap { min-height: 130px; } @media (min-width: 64.0625em) { .recipes-carousel .recipe-card__title-wrap { min-height: 130px } } @media (min-width: 75em) { .recipes-carousel .recipe-card__title-wrap { min-height: 176px } } @media (min-width: 75em) { .recipes-carousel .recipe-card__title { font-size: calc(38 / 16 * 1rem); font-size: calc(38 / var(--baseFontSize) * 1rem); padding: 30px 20px } } .recipes-carousel .recipe-card__link { box-shadow: 0 2px 15px 0 rgba(0,0,0,.12); background-color: #ffffff; } @media (min-width: 64.0625em) { .recipes-carousel .recipe-card__link { box-shadow: 0 2px 25px 0 rgba(0,0,0,.12) } } @media (hover: hover) { .recipes-carousel .recipe-card__link:hover { box-shadow: 0 2px 25px 0 rgba(0, 0, 0, 0.35); } } /* SLICK STUFF */ .recipes-carousel .slick-list { padding:0 15% 0 0 !important; } @media (min-width: 48em) { .recipes-carousel .slick-list { padding:0 40% 0 0 !important } } .recipes-carousel .slick-slide { margin: 0; } .recipes-carousel__dots-arrows-wrap { position: relative; height: 36px; width: 200px; margin: 10px auto 0; } .recipes-carousel__dots-arrows-wrap.desktop-hide { display: block; } @media (min-width: 48em) { .recipes-carousel__dots-arrows-wrap.desktop-hide { display: none } } .recipes-carousel__dots-arrows-wrap.mobile-hide { display: none; } @media (min-width: 48em) { .recipes-carousel__dots-arrows-wrap.mobile-hide { display: block } } @media (min-width: 48em) { .recipes-carousel__dots-arrows-wrap { flex: 0 0 auto; width: 80%; height: 26px; margin: 10px 0 } } @media (min-width: 64.0625em) { .recipes-carousel__dots-arrows-wrap { height: 50px } } @media (hover: hover) { .recipes-carousel__dots-arrows-wrap .slick-next:hover:before, .recipes-carousel__dots-arrows-wrap .slick-prev:hover:before { transform: scale(1.2); transition: .2s } } .filter-sort-header { color: #ffffff; display: inline-block; text-transform: uppercase; font-family: 'FoundersGroteskCond-Bd', sans-serif; font-size: calc(20 / 16 * 1rem); font-size: calc(20 / var(--baseFontSize) * 1rem); border-bottom: 3px solid #fdc338; border-bottom: 3px solid var(--coronaYellow); line-height: 1; float: left; margin-bottom: 30px; padding-bottom: 2px; } @media (min-width: 48em) { .filter-sort-header { color: #002452; color: var(--coronaBlue); font-size: calc(18 / 16 * 1rem); font-size: calc(18 / var(--baseFontSize) * 1rem); margin-bottom: 26px } } @media (min-width: 64.0625em) { .filter-sort-header { font-size: calc(20 / 16 * 1rem); font-size: calc(20 / var(--baseFontSize) * 1rem); margin-bottom: 30px } } .filter-sort-header--recipes { color: #002452; color: var(--coronaBlue); font-size: calc(22 / 16 * 1rem); font-size: calc(22 / var(--baseFontSize) * 1rem); border-bottom: none; margin-bottom: 0; } .filter-sort-label { clear: left; color: #ffffff; display: block; position: relative; padding-left: 35px; margin-bottom: 20px; cursor: pointer; text-transform: uppercase; font-family: 'FoundersGroteskCond-SmBd'; font-size: calc(20 / 16 * 1rem); font-size: calc(20 / var(--baseFontSize) * 1rem); line-height: 1; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } @media (min-width: 48em) { .filter-sort-label { color: #002452; color: var(--coronaBlue); font-size: calc(17 / 16 * 1rem); font-size: calc(17 / var(--baseFontSize) * 1rem); padding-left: 30px } } @media (min-width: 64.0625em) { .filter-sort-label { font-size: calc(20 / 16 * 1rem); font-size: calc(20 / var(--baseFontSize) * 1rem) } .filter-sort-label:hover input ~ .radio { background-color: #fdc338; background-color: var(--coronaYellow); } } .filter-sort-label:last-of-type { margin-bottom: 0; } .filter-sort-label input:checked ~ .radio { background-color: #fdc338; background-color: var(--coronaYellow); border: 2px solid #fdc338; border: 2px solid var(--coronaYellow); } @media (min-width: 48em) { .filter-sort-label input:checked ~ .radio { border: 2px solid #002452; border: 2px solid var(--coronaBlue) } } /* Hide the browser's default radio button */ .filter-sort-label input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } .filter-sort-label--ingredient { padding-left: 0; margin: 0; text-align: center; } .filter-sort-label--ingredient input:checked ~ .radio--ingredient .filter-ingredient-image:after { content: ''; position: absolute; width: calc(100% + 14px); height: calc(100% + 14px); top: -7px; left: -7px; border: 2px solid #fdc338; border: 2px solid var(--coronaYellow); border-radius: 100%; } .filter-ingredient-image { position: relative; border-radius: 100%; height: 60px; width: 60px; margin: 0 auto 15px; background-size: contain; border: 1px solid #ffffff; } @media (min-width: 48em) { .filter-ingredient-image { border: 1px solid #002452; border: 1px solid var(--coronaBlue) } } @media (min-width: 64.0625em) { .filter-ingredient-image { height: 70px; width: 70px } } /* Create a custom radio button */ .radio { position: absolute; left: 0; width: 18px; height: 18px; border: 2px solid #ffffff; border-radius: 100%; } @media (min-width: 48em) { .radio { height: 16px; width: 16px; border: 2px solid #002452; border: 2px solid var(--coronaBlue) } } @media (min-width: 64.0625em) { .radio { height: 18px; width: 18px } } .radio--ingredient { border: none; } .recipes__wrap { margin-bottom: 100px; } @media (min-width: 48em) { .recipes__wrap { display: grid; grid-column-gap: 8vw; -moz-column-gap: 8vw; column-gap: 8vw; grid-template-columns: auto 1fr; padding: 50px 0 50px; width: 92%; max-width: 1400px; margin: 0 auto } } @media (min-width: 64.0625em) { .recipes__wrap { grid-column-gap: 15%; -moz-column-gap: 15%; column-gap: 15%; padding: 100px 0 100px } } .recipes__grid { display: grid; grid-row-gap: 50px; row-gap: 50px; width: 100%; max-width: 400px; margin: 0 auto; } @media (min-width: 48em) { .recipes__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(-webkit-min-content, -webkit-max-content); grid-auto-rows: minmax(min-content, max-content); grid-column-gap: 5vw; -moz-column-gap: 5vw; column-gap: 5vw; grid-row-gap: 5vw; row-gap: 5vw; max-width: 100%; margin: 0 } } @media (min-width: 64.0625em) { .recipes__grid { grid-row-gap: 60px; row-gap: 60px; grid-column-gap: 60px; -moz-column-gap: 60px; column-gap: 60px } } .recipes__no-recipes { display: none; } .recipes__no-recipes.active { display: inline-block; text-align: center; font-family: 'FoundersGroteskCond-SmBd', sans-serif; font-size: calc(30 / 16 * 1rem); font-size: calc(30 / var(--baseFontSize) * 1rem); text-transform: uppercase; padding: 0 20px; grid-column: span 2; } .recipes__filter-icon-wrap { display: flex; justify-content: center; align-items: center; margin: 30px 0; } @media (min-width: 48em) { .recipes__filter-icon-wrap { display: none } } .recipes__filter-icon { display: inline-block; width: 30px; margin-right: 10px; height: 20px; } .recipes__filter-icon svg { width: 100%; } .recipes__filter-overlay-close { position: fixed; right: 4%; top: 4vw; width: 26px; height: 26px; flex: 0 0 auto; } .recipes__filter-overlay-close #x-1, .recipes__filter-overlay-close #x-2 { position: absolute; top: 50%; transform: translateY(-50%); display: block; width: 100%; height: 2px; background-color: #ffffff; transform-origin: 50% 50%; } .recipes__filter-overlay-close #x-1 { transform: rotate(45deg); } .recipes__filter-overlay-close #x-2 { transform: rotate(-45deg); } @media (min-width: 48em) { .recipes__filter-overlay-close { display: none } } .recipes__filters { position: fixed; display: flex; flex-direction: column; justify-content: space-between; background-size: auto 105%; background-color: #002452; background-color: var(--coronaBlue); top: 0; left: 100%; width: 100%; height: 100%; z-index: 9999; padding: 4vh 0 7vh; overflow-y: scroll; transform: translateX(100%); transition: .3s ease-out; } .recipes__filters.open { transform: translateX(-100%); transition: .3s ease-out; } .recipes__filters .btn--filters { flex: 0 0 auto; width: 92%; margin: 0 auto; } @media (min-width: 48em) { .recipes__filters { position: inherit; width: auto; height: auto; left: auto; display: block; background-color: transparent; padding: 0; transform: translate(0); z-index: 1; overflow: hidden } } @media screen and (min-width: 768px) and (min-height: 1024px) { .recipes__filters { position: -webkit-sticky; position: sticky; top: 140px } } .recipes__filters-wrap { border: 0; padding: 8vw; border-bottom: 1px solid rgba(255, 255, 255, .3); } .recipes__filters-wrap:last-of-type { border-bottom: none; } @media (min-width: 48em) { .recipes__filters-wrap { padding: 0; margin: 0 0 50px; border-bottom: none } } .filters-ingredients-wrap { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, auto); grid-column-gap: 10px; -moz-column-gap: 10px; column-gap: 10px; grid-row-gap: 10px; row-gap: 10px; clear: left; } @media (min-width: 48em) { .filters-ingredients-wrap { width: 205px } } @media (min-width: 64.0625em) { .filters-ingredients-wrap { width: 234px } } @media (min-width: 100em) { .filters-ingredients-wrap { width: 260px; grid-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px } } .recipe-card { background-color: #ffffff; box-shadow: 0 2px 50px 0 rgba(0, 0, 0, 0.12); } @media (hover: hover) { .recipe-card:hover { box-shadow: 0 2px 40px 0 rgba(0, 0, 0, 0.35); } } .recipe-card__link { display: flex; flex-direction: column; height: 100%; } .recipe-card__title-wrap { display: flex; flex-grow: 1; flex-direction: column; justify-content: center; min-height: 108px; } @media (min-width: 48em) { .recipe-card__title-wrap { min-height: 108px } } @media (min-width: 64.0625em) { .recipe-card__title-wrap { min-height: 136px } } @media (min-width: 75em) { .recipe-card__title-wrap { min-height: 164px } } .recipe-card__title { background-color: #ffffff; font-family: 'FoundersGroteskCond-SmBd', sans-serif; font-size: calc(29 / 16 * 1rem); font-size: calc(29 / var(--baseFontSize) * 1rem); text-transform: uppercase; text-align: center; line-height: 1; padding: 20px; } @media (min-width: 48em) { .recipe-card__title { font-size: calc(20 / 16 * 1rem); font-size: calc(20 / var(--baseFontSize) * 1rem); padding: 26px 10px } } @media (min-width: 64.0625em) { .recipe-card__title { font-size: calc(30 / 16 * 1rem); font-size: calc(30 / var(--baseFontSize) * 1rem) } } @media (min-width: 75em) { .recipe-card__title { font-size: calc(34 / 16 * 1rem); font-size: calc(34 / var(--baseFontSize) * 1rem); padding: 30px } } .recipe-card__image-wrap { position: relative; height: 0; padding-top: 75%; overflow: hidden; flex: 0; } .recipe-card__image { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; position: absolute; left: 0; top: 0; } .recipe__to-print { display: none; } .recipe__outter-wrap { position: relative; } .recipe__wrap { width: 84%; max-width: 1190px; margin: 0 auto; padding: 40px 0; } @media (min-width: 64.0625em) { .recipe__wrap { width: 92% } } @media (min-width: 75em) { .recipe__wrap { padding: 80px 0 } } .recipe__stats-social-wrap { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; } @media (min-width: 48em) { .recipe__stats-social-wrap { margin-bottom: 50px } } @media (min-width: 75em) { .recipe__stats-social-wrap { margin-bottom: 80px } } .recipe__details-wrap { margin-top: 30px; } @media (min-width: 64.0625em) { .recipe__details-wrap { display: grid; grid-template-columns: 1fr 3fr; grid-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; margin-top: 60px } } @media (min-width: 75em) { .recipe__details-wrap { grid-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px; margin-top: 80px } } /* STATS */ .recipe__stats { display: flex; justify-content: space-between; width: 100%; } @media (min-width: 28.75em) { .recipe__stats { width: 90%; max-width: 400px; margin: 0 auto } } @media (min-width: 64.0625em) { .recipe__stats { width: auto; margin: 0; max-width: 100% } } .recipe__stat { padding: 12px 0 0 10px ; border-left: 3px solid #fdc338; border-left: 3px solid var(--coronaYellow); font-family: 'FoundersGroteskCond-Bd', sans-serif; font-size: calc(40 / 16 * 1rem); font-size: calc(40 / var(--baseFontSize) * 1rem); line-height: 1; } .recipe__stat:last-of-type { margin-right: 0; } @media (min-width: 48em) { .recipe__stat { margin-right: 40px; font-size: calc(55 / 16 * 1rem); font-size: calc(55 / var(--baseFontSize) * 1rem); padding-left: 20px } } @media (min-width: 64.0625em) { .recipe__stat { margin-right: 60px; font-size: calc(60 / 16 * 1rem); font-size: calc(60 / var(--baseFontSize) * 1rem) } } @media (min-width: 75em) { .recipe__stat { font-size: calc(65 / 16 * 1rem); font-size: calc(65 / var(--baseFontSize) * 1rem); padding-left: 20px; margin-right: 100px } } .recipe__stats-label { display: block; font-family: 'FoundersGroteskCond-SmBd', sans-serif; font-size: calc(23 / 16 * 1rem); font-size: calc(23 / var(--baseFontSize) * 1rem); text-transform: uppercase; } @media (min-width: 48em) { .recipe__stats-label { font-size: calc(18 / 16 * 1rem); font-size: calc(18 / var(--baseFontSize) * 1rem) } } @media (min-width: 64.0625em) { .recipe__stats-label { font-size: calc(23 / 16 * 1rem); font-size: calc(23 / var(--baseFontSize) * 1rem) } } .recipe__stats-label--min { display: inline; } /* INTRO */ .recipe__intro { max-width: 780px; margin: 0 auto; } @media (min-width: 28.75em) { .recipe__intro { width: 90% } } .recipe__intro p { font-family: 'FoundersGroteskCond-Reg', sans-serif; font-size: calc(22 / 16 * 1rem); font-size: calc(22 / var(--baseFontSize) * 1rem); line-height: 1.3; text-align: center; } @media (min-width: 48em) { .recipe__intro p { font-size: calc(26 / 16 * 1rem); font-size: calc(26 / var(--baseFontSize) * 1rem) } } @media (min-width: 64.0625em) { .recipe__intro p { font-size: calc(28 / 16 * 1rem); font-size: calc(28 / var(--baseFontSize) * 1rem) } } @media (min-width: 75em) { .recipe__intro p { font-size: calc(32 / 16 * 1rem); font-size: calc(32 / var(--baseFontSize) * 1rem) } } @media (min-width: 87.5em) { .recipe__intro p { font-size: calc(36 / 16 * 1rem); font-size: calc(36 / var(--baseFontSize) * 1rem) } } .recipe__intro--mixed-drink { width: 100%; margin: 0; display: flex; justify-content: space-between; max-width: 100%; } @media (min-width: 64.0625em) { .recipe__intro--mixed-drink p { text-align: left; margin-right: 10% } } /* INGREDIENTS */ .recipe__ingredients { position: relative; font-family: 'FoundersGroteskCond-Reg', sans-serif; font-size: calc(18 / 16 * 1rem); font-size: calc(18 / var(--baseFontSize) * 1rem); overflow: hidden; max-height: 266px; transition: .3s; } .recipe__ingredients:after { content: ''; position: absolute; left: 0; bottom: 0; width: 120%; height: 80px; background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,0.9) 100%); } @media (min-width: 48em) { .recipe__ingredients:after { content: none } } .recipe__ingredients.open { max-height: 900px; transition: .3s; } .recipe__ingredients.open:after { content: none; } .recipe__ingredients.open ~.recipe__see-more .less { display: inline; } .recipe__ingredients.open ~.recipe__see-more .more { display: none; } @media (min-width: 48em) { .recipe__ingredients { font-size: calc(22 / 16 * 1rem); font-size: calc(22 / var(--baseFontSize) * 1rem); max-height: 100%; height: auto } } @media (min-width: 64.0625em) { .recipe__ingredients { margin-right: 5%; width: 100% } } @media (min-width: 75em) { .recipe__ingredients { margin-right: 60px } } .recipe__ingredients h3 { font-family: 'FoundersGroteskCond-Bd', sans-serif; font-size: calc(20 / 16 * 1rem); font-size: calc(20 / var(--baseFontSize) * 1rem); text-transform: uppercase; padding-bottom: 15px; } .recipe__ingredients ul { margin-bottom: 30px; } .recipe__ingredients ul:last-of-type { margin-bottom: 0; } @media (min-width: 48em) { .recipe__ingredients ul { display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px } .recipe__ingredients ul:last-of-type { margin-bottom: 30px; } } @media (min-width: 64.0625em) { .recipe__ingredients ul { display: inherit } } .recipe__ingredients li { line-height: 1.2; padding-bottom: 15px; } .recipe__ingredients li:last-of-type { padding-bottom: 0; } @media (min-width: 48em) { .recipe__ingredients li { padding-bottom: 20px } } .recipe__ingredients--mixed-drink { height: auto; max-height: 100%; margin: 0 0 40px; } .recipe__ingredients--mixed-drink:after { content: none; } .recipe__ingredients-label { display: inline-block; font-family: 'FoundersGroteskCond-Bd', sans-serif; font-size: calc(20 / 16 * 1rem); font-size: calc(20 / var(--baseFontSize) * 1rem); text-transform: uppercase; border-bottom: 3px solid #fdc338; border-bottom: 3px solid var(--coronaYellow); margin-bottom: 30px; } @media (min-width: 64.0625em) { .recipe__ingredients-label--directions { display: none } } .recipe__see-more { font-family: 'FoundersGroteskCond-Bd', sans-serif; font-size: calc(20 / 16 * 1rem); font-size: calc(20 / var(--baseFontSize) * 1rem); text-transform: uppercase; text-align: center; padding-bottom: 30px; margin-top: 30px; } .recipe__see-more .less { display: none; } /* INSTRUCTIONS */ .recipe__instructions { font-family: 'FoundersGroteskCond-Reg', sans-serif; font-size: calc(18 / 16 * 1rem); font-size: calc(18 / var(--baseFontSize) * 1rem); line-height: 1.3; padding-bottom: 30px; } @media (min-width: 48em) { .recipe__instructions { font-size: calc(22 / 16 * 1rem); font-size: calc(22 / var(--baseFontSize) * 1rem) } } @media (min-width: 64.0625em) { .recipe__instructions { padding-left: 3%; padding-bottom: 0; padding-top: 7px; border-left: 3px solid #fdc338; border-left: 3px solid var(--coronaYellow); font-size: calc(26 / 16 * 1rem); font-size: calc(26 / var(--baseFontSize) * 1rem) } } @media (min-width: 75em) { .recipe__instructions { font-size: calc(36 / 16 * 1rem); font-size: calc(36 / var(--baseFontSize) * 1rem); padding-left: 45px } } .recipe__instructions li { position: relative; padding: 0 0 30px 45px; counter-increment: step-counter; } @media (min-width: 48em) { .recipe__instructions li { padding: 0 0 30px 55px } } @media (min-width: 75em) { .recipe__instructions li { padding: 0 0 60px 80px } } .recipe__instructions li:before { content: ''; position: absolute; left: 0; width: 30px; height: 30px; border: 2px solid #002452; border: 2px solid var(--coronaBlue); border-radius: 100%; } @media (min-width: 48em) { .recipe__instructions li:before { width: 40px; height: 40px } } @media (min-width: 75em) { .recipe__instructions li:before { width: 56px; height: 56px } } .recipe__instructions li:after { content: counter(step-counter); position: absolute; display: flex; flex-direction: column; justify-content: center; left: 0; top: 0; width: 30px; height: 30px; text-align: center; font-family: 'FoundersGroteskCond-SmBd', sans-serif; } @media (min-width: 48em) { .recipe__instructions li:after { width: 40px; height: 40px } } @media (min-width: 75em) { .recipe__instructions li:after { width: 56px; height: 56px } } /* CROWN */ .recipe__icon-wrap { position: absolute; top: 180px; right: 0; width: 73%; max-width: 660px; height: 0; padding-top: 77%; overflow: hidden; opacity: .2; z-index: -1; } @media (min-width: 28.75em) { .recipe__icon-wrap { width: 60% } } @media (min-width: 48em) { .recipe__icon-wrap { top: 250px } } @media (min-width: 64.0625em) { .recipe__icon-wrap { top: 220px; width: 40%; padding-top: 65% } } @media (min-width: 75em) { .recipe__icon-wrap { top: 320px; width: 47% } } .recipe__icon { position: absolute; top: 0; left: 0; width: 176%; } @media (min-width: 48em) { .recipe__icon { width: 160% } } .recipe__icon svg { width: 100%; } @media (min-width: 48em) { .recipe__social-print-wrap { display: flex; align-items: center; justify-content: space-between } } /* CERVEZA – MIXED DRINK INGREDIENT */ .recipe__cerveza-wrap { display: flex; margin-bottom: 30px; align-items: flex-start; } .recipe__cerveza { width: 54px; margin-right: 18px; } .recipe__cerveza-text { text-transform: uppercase; font-size: calc(30 / 16 * 1rem); font-size: calc(30 / var(--baseFontSize) * 1rem); line-height: 1; padding-top: 3px; } .recipe__cerveza-link { font-family: 'FoundersGroteskCond-SmBd', sans-serif; text-transform: uppercase; font-size: calc(20 / 16 * 1rem); font-size: calc(20 / var(--baseFontSize) * 1rem); } @media (hover: hover) { .recipe__cerveza-link:hover .material-icons.cerveza-cta { transform: translateX(10px); transition: 0.2s; } } .recipe__cerveza-link .material-icons.cerveza-cta { position: relative; top: 3px; font-size: 20px; transition: .2s; } /* SOCIAL-SHARE */ .social-share--mobile { text-align: center; margin-bottom: 45px; } @media (min-width: 48em) { .social-share--mobile { margin-bottom: 0; text-align: left } } @media (min-width: 64.0625em) { .social-share--mobile { display: none } } .social-share--mobile .social-share-icons-wrap { justify-content: center; } .social-share--desktop { display: none; } @media (min-width: 64.0625em) { .social-share--desktop { display: block } } .social-share--desktop .social-share-link--text { display: none; } .social-icon { fill: #002452; fill: var(--coronaBlue); transition: .2s; } @media (hover: hover) { .social-icon:hover { fill: #fdc338; fill: var(--coronaYellow); transition: .2s; } } .social-share-icons-wrap { display: flex; } .social-share-link { width: 38px; height: 38px; display: block; margin-right: 15px; } .social-share-link:last-of-type { margin-right: 0; } .social-share-link svg { width: 100%; } .share-title { display: inline-block; font-family: 'FoundersGroteskCond-SmBd', sans-serif; font-size: calc(20 / 16 * 1rem); font-size: calc(20 / var(--baseFontSize) * 1rem); text-transform: uppercase; border-bottom: 3px solid #fdc338; border-bottom: 3px solid var(--coronaYellow); margin-bottom: 20px; } .back-arrow { font-size: 18px; position: relative; top: 4px; } .merch__wrap--desktop { display: none; } @media (min-width: 48em) { .merch__wrap--desktop { display: grid; grid-column-gap: 5%; -moz-column-gap: 5%; column-gap: 5%; grid-template-columns: auto 1fr; padding: 50px 0 50px; width: 92%; max-width: 1400px; margin: 0 auto } } @media (min-width: 64.0625em) { .merch__wrap--desktop { grid-column-gap: 10%; -moz-column-gap: 10%; column-gap: 10%; padding: 100px 0 100px } } @media (min-width: 48em) { .merch__wrap--mobile { display: none; } } .merch__grid { display: grid; grid-row-gap: 30px; row-gap: 30px; width: 80%; margin: 50px auto 0; } @media (min-width: 28.75em) { .merch__grid { grid-template-columns: 1fr 1fr; grid-column-gap: 5%; -moz-column-gap: 5%; column-gap: 5%; grid-row-gap: 40px; row-gap: 40px; width: 84% } } @media (min-width: 48em) { .merch__grid { grid-column-gap: 10%; -moz-column-gap: 10%; column-gap: 10%; grid-row-gap: 60px; row-gap: 60px; width: 100%; margin: 0 } } @media (min-width: 64.0625em) { .merch__grid { grid-row-gap: 80px; row-gap: 80px; margin-right: 5% } } /* collection intro */ .merch__intro { padding: 40px 0; width: 84%; margin: 0 auto; } @media (min-width: 48em) { .merch__intro { padding: 0; margin: 0; width: auto; grid-column-start: 1; grid-column-end: 3 } } .merch__title { font-family: 'FoundersGroteskCond-Bd', sans-serif; font-size: calc(40 / 16 * 1rem); font-size: calc(40 / var(--baseFontSize) * 1rem); text-transform: uppercase; text-align: center; padding-bottom: 15px; } @media (min-width: 64.0625em) { .merch__title { font-size: calc(65 / 16 * 1rem); font-size: calc(65 / var(--baseFontSize) * 1rem) } } .merch__description { font-size: calc(20 / 16 * 1rem); font-size: calc(20 / var(--baseFontSize) * 1rem); line-height: 1.3; text-align: center; max-width: 600px; margin: 0 auto; } .merch__description span { font-size: calc(20 / 16 * 1rem); font-size: calc(20 / var(--baseFontSize) * 1rem); } @media (min-width: 48em) { .merch__description { width: 90% } } @media (min-width: 64.0625em) { .merch__description { font-size: calc(26 / 16 * 1rem); font-size: calc(26 / var(--baseFontSize) * 1rem) } } /* products */ .merch-card__image { width: 100%; } .merch__merch-card { display: block; position: relative; text-align: center; } @media (hover: hover) { .merch__merch-card:hover .merch__merch-title { text-decoration: underline; -webkit-text-decoration-color: #fdc338; text-decoration-color: #fdc338; -webkit-text-decoration-color: var(--coronaYellow); text-decoration-color: var(--coronaYellow); transition: .2s; } } .merch__merch-title { font-family: 'FoundersGroteskCond-SmBd', sans-serif; font-size: calc(22 / 16 * 1rem); font-size: calc(22 / var(--baseFontSize) * 1rem); line-height: 1.2; text-transform: uppercase; text-align: center; padding: 20px 5% 15px; } @media (min-width: 28.75em) { .merch__merch-title { font-size: calc(20 / 16 * 1rem); font-size: calc(20 / var(--baseFontSize) * 1rem) } } @media (min-width: 64.0625em) { .merch__merch-title { font-size: calc(30 / 16 * 1rem); font-size: calc(30 / var(--baseFontSize) * 1rem) } } .merch__merch-price { font-family: 'FoundersGroteskCond-SmBd', sans-serif; font-size: calc(22 / 16 * 1rem); font-size: calc(22 / var(--baseFontSize) * 1rem); line-height: 1.2; text-transform: uppercase; text-align: center; } @media (min-width: 28.75em) { .merch__merch-price { font-size: calc(20 / 16 * 1rem); font-size: calc(20 / var(--baseFontSize) * 1rem) } } @media (min-width: 64.0625em) { .merch__merch-price { font-size: calc(26 / 16 * 1rem); font-size: calc(26 / var(--baseFontSize) * 1rem) } } .merch__org-price { color: #128728; color: var(--coronaGreen); font-family: 'FoundersGroteskCond-Med'; font-size: calc(16 / 16 * 1rem); font-size: calc(16 / var(--baseFontSize) * 1rem); text-decoration: line-through; line-height: 1.1; padding-left: 5px; } @media (min-width: 64.0625em) { .merch__org-price { font-size: calc(18 / 16 * 1rem); font-size: calc(18 / var(--baseFontSize) * 1rem) } } .merch__merch-sale-bug { position: absolute; top: 4px; right: 4px; display: flex; flex-direction: column; justify-content: center; background-color: #002452; background-color: var(--coronaBlue); color: #fdc338; color: var(--coronaYellow); font-family: 'FoundersGroteskCond-SmBd'; font-size: calc(18 / 16 * 1rem); font-size: calc(18 / var(--baseFontSize) * 1rem); line-height: 1; text-align: center; text-transform: uppercase; border-radius: 100%; width: 60px; height: 60px; } @media (min-width: 28.75em) { .merch__merch-sale-bug { top: 3px; right: 3px; font-size: calc(15 / 16 * 1rem); font-size: calc(15 / var(--baseFontSize) * 1rem); width: 50px; height: 50px } } @media (min-width: 64.0625em) { .merch__merch-sale-bug { top: 4px; right: 4px; font-size: calc(18 / 16 * 1rem); font-size: calc(18 / var(--baseFontSize) * 1rem); width: 60px; height: 60px } } .merch__merch-sale-bug:after { content: ''; position: absolute; width: calc(100% + 8px); height: calc(100% + 8px); left: -4px; top: -4px; border: 2px solid #002452; border: 2px solid var(--coronaBlue); border-radius: 100%; } @media (min-width: 28.75em) { .merch__merch-sale-bug:after { width: calc(100% + 6px); height: calc(100% + 6px); left: -3px; top: -3px } } @media (min-width: 48em) { .merch__merch-sale-bug:after { width: calc(100% + 8px); height: calc(100% + 8px); left: -4px; top: -4px } } .merch__image-wrap { width: 100%; } .merch__image { width: 100%; } /* filter */ /* mobile overlay */ .merch__filter-sort-overlay { position: fixed; display: flex; flex-direction: column; justify-content: space-between; background-size: auto 105%; background-color: #002452; background-color: var(--coronaBlue); top: 0; left: 0; width: 100%; height: 100%; padding: 8%; z-index: 9999; transform: translateX(100%); transition: .3s ease-out; } .merch__filter-sort-overlay.open { transform: translateX(0); transition: .3s ease-out; } .merch__filter-sort-overlay .btn--filters { flex: 0 0 auto; } .merch__filter-icon { flex: 0 0 auto; width: 30px; margin: 36px 10px 0 20px; } .merch__filter-icon svg { width: 100%; } .merch__filter-overlay-close { position: absolute; right: 8%; width: 26px; height: 26px; flex: 0 0 auto; } .merch__filter-overlay-close #x-1, .merch__filter-overlay-close #x-2 { position: absolute; top: 50%; transform: translateY(-50%); display: block; width: 100%; height: 2px; background-color: #ffffff; transform-origin: 50% 50%; } .merch__filter-overlay-close #x-1 { transform: rotate(45deg); } .merch__filter-overlay-close #x-2 { transform: rotate(-45deg); } @media (min-width: 48em) { .merch__filter-overlay-close { display: none } } .merch__filters-sort-stick-wrap { width: 86%; margin: 0 auto; } @media (min-width: 48em) { .merch__filters-sort-stick-wrap { display: block; position: -webkit-sticky; position: sticky; top: 180px; width: 200px } } @media (min-width: 64.0625em) { .merch__filters-sort-stick-wrap { width: auto } } .merch__filter-sort-wrap { display: flex; justify-content: space-between; align-items: center; border: 0; } @media (min-width: 48em) { .merch__filter-sort-wrap { display: block } } .merch__overlay-filter-sort-wrap { border: 0; padding: 0; margin: 50px 0 0; flex: 1 1 auto; } .merch__sort-wrap { padding: 0; border: 0; flex: 1 1 auto; } @media (min-width: 48em) { .merch__filter-wrap { margin-top: 50px } } .merch__filter-sort-header { color: #002452; color: var(--coronaBlue); display: inline-block; text-transform: uppercase; font-family: 'FoundersGroteskCond-Bd', sans-serif; font-size: calc(20 / 16 * 1rem); font-size: calc(20 / var(--baseFontSize) * 1rem); line-height: 1; margin: 29px 0 0; } @media (min-width: 48em) { .merch__filter-sort-header { color: #002452; color: var(--coronaBlue); font-size: calc(18 / 16 * 1rem); font-size: calc(18 / var(--baseFontSize) * 1rem); border-bottom: 3px solid #fdc338; border-bottom: 3px solid var(--coronaYellow); margin-bottom: 18px; margin-top: 0 } } @media (min-width: 64.0625em) { .merch__filter-sort-header { font-size: calc(20 / 16 * 1rem); font-size: calc(20 / var(--baseFontSize) * 1rem) } } .merch__sort-header { border-bottom: none; margin-bottom: 10px; } .merch__filter-header { color: #ffffff; border-bottom: 3px solid #fdc338; border-bottom: 3px solid var(--coronaYellow); margin-bottom: 30px; } .merch__select-menu-wrap { position: relative; } .merch__select-menu-wrap:after { position: absolute; content: '\e5cf'; color: #002452; color: var(--coronaBlue); font-family: 'Material Icons'; font-size: calc(30 / 16 * 1rem); font-size: calc(30 / var(--baseFontSize) * 1rem); line-height: 1; top: 50%; transform: translateY(-50%); right: 5px; z-index: -1; } @media (min-width: 64.0625em) { .merch__select-menu-wrap:after { font-size: calc(38/16*1rem); font-size: calc(38/var(--baseFontSize)*1rem) } } .merch__sort { background-color: transparent; color: #002452; color: var(--coronaBlue); font-family: 'FoundersGroteskCond-SmBd'; font-size: calc(22 / 16 * 1rem); font-size: calc(22 / var(--baseFontSize) * 1rem); text-transform: uppercase; line-height: 1; border-radius: 0; border: 2px solid #002452; border: 2px solid var(--coronaBlue); padding: 15px 10px; -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; } @media (min-width: 48em) { .merch__sort { font-size: calc(18 / 16 * 1rem); font-size: calc(18 / var(--baseFontSize) * 1rem); width: 200px } } @media (min-width: 64.0625em) { .merch__sort { font-size: calc(24 / 16 * 1rem); font-size: calc(24 / var(--baseFontSize) * 1rem); padding: 20px 15px; width: 280px } } .merch__sort option { font-family: "Helvetica", "Arial", sans-serif; } .merch__filter-category { text-transform: uppercase; font-size: 1.25rem; } .merch__filter-sort-label { color: #ffffff; display: block; position: relative; padding-left: 35px; margin-bottom: 20px; cursor: pointer; text-transform: uppercase; font-family: 'FoundersGroteskCond-SmBd'; font-size: calc(20 / 16 * 1rem); font-size: calc(20 / var(--baseFontSize) * 1rem); line-height: 1.2; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } @media (min-width: 48em) { .merch__filter-sort-label { color: #002452; color: var(--coronaBlue); font-size: calc(18 / 16 * 1rem); font-size: calc(18 / var(--baseFontSize) * 1rem) } } @media (min-width: 64.0625em) { .merch__filter-sort-label { font-size: calc(20 / 16 * 1rem); font-size: calc(20 / var(--baseFontSize) * 1rem) } } /* Hide the browser's default radio button */ .merch__filter-sort-label input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } /* On mouse-over, add a background color */ @media (hover: hover) { .merch__filter-sort-label:hover input ~ .radio { background-color: #fdc338; background-color: var(--coronaYellow); } } /* When the radio button is checked, add a blue background */ .merch__filter-sort-label input:checked ~ .radio { background-color: #fdc338; background-color: var(--coronaYellow); border: 2px solid #fdc338; border: 2px solid var(--coronaYellow); } @media (min-width: 48em) { .merch__filter-sort-label input:checked ~ .radio { border: 2px solid #002452; border: 2px solid var(--coronaBlue) } } .merch-detail__wrap { padding-top: 200px; width: 92%; max-width: 1400px; margin: 0 auto; } .merch-detail__links-wrap { display: flex; justify-content: space-between; margin-bottom: 50px; } .merch-detail__back { display: inline-block; width: auto; text-transform: uppercase; font-family: 'FoundersGroteskCond-Med', sans-serif; font-size: calc(18 / 16 * 1rem); font-size: calc(18 / var(--baseFontSize) * 1rem); } .merch-detail__back .back-arrow { display: inline-block; transition: .2s; } @media (hover: hover) { .merch-detail__back:hover .back-arrow { transform: translateX(-10px); transition: .2s; } } .merch-detail__detail-wrap { display: flex; justify-content: space-between; } .merch-detail__name { font-family: 'FoundersGroteskCond-SmBd', sans-serif; font-size: calc(65 / 16 * 1rem); font-size: calc(65 / var(--baseFontSize) * 1rem); text-transform: uppercase; } .merch-detail__description p { text-align: left; font-size: calc(22 / 16 * 1rem); font-size: calc(22 / var(--baseFontSize) * 1rem); } .merch-detail__spec-header { text-transform: uppercase; font-family: 'FoundersGroteskCond-SmBd', sans-serif; font-size: calc(30 / 16 * 1rem); font-size: calc(30 / var(--baseFontSize) * 1rem); padding-bottom: 10px; } .merch-detail__spec-wrap ul { padding-bottom: 20px; } .merch-detail__spec-wrap p { font-size: calc(22 / 16 * 1rem); font-size: calc(22 / var(--baseFontSize) * 1rem); padding-bottom: 20px; } .merch-detail__spec-wrap strong { text-transform: uppercase; font-family: 'FoundersGroteskCond-SmBd', sans-serif; } .merch-detail__media-wrap { /* background-color: #cccccc; */ width: 40%; margin-right: 5%; } .merch-detail__info-wrap { flex: 1 1 0; } /* background stuff */ .ourCervezas__background { position: relative; width: 100%; max-width: 1700px; margin: 0 auto; overflow: hidden; } .ourCervezas__crown-wrap { position: absolute; overflow: hidden; left: 21%; width: 140%; bottom: 32%; opacity: .2; z-index: -1; } @media (min-width: 28.75em) { .ourCervezas__crown-wrap { left: 27%; width: 134%; bottom: 22% } } @media (min-width: 40em) { .ourCervezas__crown-wrap { left: 49%; width: 87%; bottom: 20% } } @media (min-width: 48em) { .ourCervezas__crown-wrap { left: 49%; width: 87%; bottom: 20% } } @media (min-width: 64.0625em) { .ourCervezas__crown-wrap { left: 48.33%; width: 770px; bottom: 189px } } @media (min-width: 75em) { .ourCervezas__crown-wrap { left: 48.5%; width: 920px; bottom: 210px } } .ourCervezas__crown { width: 100%; } .ourCervezas__crown svg { width: 100%; } /* intro stuff */ .ourCervezas__intro-wrap { width: 84%; max-width: 720px; margin: 0 auto; padding: 30px 0 0; text-align: left; } @media (min-width: 40em) { .ourCervezas__intro-wrap { width: 80%; padding: 55px 0 0; text-align: center } } @media (min-width: 64.0625em) { .ourCervezas__intro-wrap { padding: 70px 0 0 } } .ourCervezas__headline { color: #002452; color: var(--coronaBlue); font-family: 'FoundersGroteskCond-SmBd', sans-serif; font-size: calc(40 / 16 * 1rem); font-size: calc(40 / var(--baseFontSize) * 1rem); letter-spacing: 0.91px; line-height: 1; text-transform: uppercase; } @media (min-width: 40em) { .ourCervezas__headline { font-size: calc(50 / 16 * 1rem); font-size: calc(50 / var(--baseFontSize) * 1rem) } } @media (min-width: 48em) { .ourCervezas__headline { font-size: calc(60 / 16 * 1rem); font-size: calc(60 / var(--baseFontSize) * 1rem) } } @media (min-width: 75em) { .ourCervezas__headline { font-size: calc(85 / 16 * 1rem); font-size: calc(85 / var(--baseFontSize) * 1rem) } } .ourCervezas__description p { color: #002452; color: var(--coronaBlue); font-family: 'FoundersGroteskCond-Reg', sans-serif; font-size: calc(20 / 16 * 1rem); font-size: calc(20 / var(--baseFontSize) * 1rem); font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.4; letter-spacing: 0.32px; margin: 0; padding-bottom: 18px; } @media (min-width: 48em) { .ourCervezas__description p { font-size: calc(20 / 16 * 1rem); font-size: calc(20 / var(--baseFontSize) * 1rem); padding-bottom: 24px } } @media (min-width: 48em) { .ourCervezas__description p { font-size: calc(26 / 16 * 1rem); font-size: calc(26 / var(--baseFontSize) * 1rem); line-height: 1.17; padding-bottom: 24px } } @media (min-width: 75em) { .ourCervezas__description p { font-size: calc(30 / 16 * 1rem); font-size: calc(30 / var(--baseFontSize) * 1rem) } } /* products wrap stuff */ .ourCervezas__cervezas-wrap { position: relative; overflow: hidden; padding: 50px 0 18px; } @media (min-width: 48em) { .ourCervezas__cervezas-wrap { padding: 46px 0 0; margin: 0 auto } } @media (min-width: 64.0625em) { .ourCervezas__cervezas-wrap { padding: 50px 0 20px 0 } } @media (min-width: 75em) { .ourCervezas__cervezas-wrap { padding: 70px 0 20px 0 } } .ourCervezas__cervezas-wrap:before { /*background image set in liquid file*/ content: ''; position: absolute; top: 54%; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-size: 1110px; background-position: -15px top; } @media (min-width: 40em) { .ourCervezas__cervezas-wrap:before { top: 56% } } @media (min-width: 48em) { .ourCervezas__cervezas-wrap:before { top: 61% } } @media (min-width: 64.0625em) { .ourCervezas__cervezas-wrap:before { top: 61%; left: 5%; background-size: 1700px; background-position: left top } } @media (min-width: 75em) { .ourCervezas__cervezas-wrap:before { top: 63% } } .ourCervezas__cervezas { display: flex; width: 100%; max-width: 1020px; margin: 0 auto; justify-content: space-between; } @media (min-width: 40em) { .ourCervezas__cervezas { width: 95% } } @media (min-width: 64.0625em) { .ourCervezas__cervezas { width: 90% } } /* individual product image/shadow stuff */ .ourCervezas__cerveza { cursor: pointer; width: 16%; } @media (min-width: 48em) { .ourCervezas__cerveza { margin: 0; width: 140px } } @media (min-width: 75em) { .ourCervezas__cerveza { width: 160px } } .ourCervezas__cerveza-link { cursor: pointer; position: relative; display: block; } .ourCervezas__cerveza-img-shadow-wrap { cursor: pointer; position: relative; margin: 0 auto; transition: .3s ease-in-out; transform-origin: 50% calc(100% - 50px); z-index: 100; } @media (min-width: 64.0625em) { .ourCervezas__cerveza-img-shadow-wrap { /* so that the descriptor when revealed stays to click on it*/ padding-bottom: 50px } .ourCervezas__cerveza-img-shadow-wrap:hover { transform: scale(1.06); transition: .3s ease-in-out; } .ourCervezas__cerveza-img-shadow-wrap:hover .ourCervezas__cerveza-shadow { opacity: .8; transition: .3s ease-in-out; padding-bottom: 50px; } .ourCervezas__cerveza-img-shadow-wrap:hover+.ourCervezas__descriptor-wrap .ourCervezas__descriptor { transform: translateY(0); transition: .5s ease-out; } .ourCervezas__cerveza-img-shadow-wrap:hover+.ourCervezas__descriptor-wrap .ourCervezas__descriptor:hover { transform: translateY(0); } } .ourCervezas__cerveza-img { width: 100%; } .ourCervezas__cerveza-shadow { opacity: 0; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; transition: .3s ease-in-out; } /* copy/cta stuff */ .ourCervezas__cerveza-name { position: relative; color: #ffffff; font-family: 'FoundersGroteskCond-SmBd', sans-serif; font-size: calc(22/ 16 * 1rem); font-size: calc(22/ var(--baseFontSize) * 1rem); text-transform: uppercase; height: 84px; } @media (min-width: 48em) { .ourCervezas__cerveza-name { top: -10px; height: 74px } } .ourCervezas__cerveza-name span { display: block; position: absolute; top: 0; left: 50%; transform: translateX(-50%); } .ourCervezas__cerveza-name span:after { content: '\f1df'; position: relative; padding-left: 3px; color: #fdc338; color: var(--coronaYellow); font-family: 'Material Icons'; font-size: calc(20 / 16 * 1rem); font-size: calc(20 / var(--baseFontSize) * 1rem); line-height: 0; } @media (min-width: 48em) { .ourCervezas__cerveza-name span:after { font-size: calc(18 / 16 * 1rem); font-size: calc(18 / var(--baseFontSize) * 1rem) } } @media (min-width: 40em) { .ourCervezas__cerveza-name { font-size: calc(18/ 16 * 1rem); font-size: calc(18/ var(--baseFontSize) * 1rem) } } @media (min-width: 64.0625em) { .ourCervezas__cerveza-name { display: none } } .ourCervezas__descriptor-wrap { display: none; } @media (min-width: 64.0625em) { .ourCervezas__descriptor-wrap { display: block; position: absolute; overflow: hidden; position: absolute; /* to but up to the bottle, not shadow) */ top: calc(100% - 80px); width: 250px; left: 50%; transform: translateX(-50%); text-align: center; padding-top: 15px } } .ourCervezas__descriptor { transform: translateY(-120%); transition: .5s ease-out; } @media (min-width: 64.0625em) { .ourCervezas__cerveza-copy { display: block; color: #ffffff; text-transform: uppercase; font-family: 'FoundersGroteskCond-Bd', sans-serif; font-size: calc(22 / 16 * 1rem); font-size: calc(22 / var(--baseFontSize) * 1rem); letter-spacing: 0.34px } } @media (min-width: 75em) { .ourCervezas__cerveza-copy { font-size: calc(30 / 16 * 1rem); font-size: calc(30 / var(--baseFontSize) * 1rem) } } @media (min-width: 64.0625em) { .ourCervezas__cerveza-cta { display: block; color: #ffffff; text-transform: uppercase; font-family: 'FoundersGroteskCond-SmBd', sans-serif; font-size: calc(18 / 16 * 1rem); font-size: calc(18 / var(--baseFontSize) * 1rem); letter-spacing: 0.21px; margin: 0 } } @media (min-width: 75em) { .ourCervezas__cerveza-cta { font-size: calc(20 / 16 * 1rem); font-size: calc(20 / var(--baseFontSize) * 1rem) } } .ourCervezas__cerveza-cta:after { content: '\f1df'; position: relative; padding-left: 3px; color: #fdc338; color: var(--coronaYellow); font-family: 'Material Icons'; font-size: calc(18 / 16 * 1rem); font-size: calc(18 / var(--baseFontSize) * 1rem); line-height: 1; } @media (min-width: 75em) { .ourCervezas__cerveza-cta:after { font-size: calc(18 / 16 * 1rem); font-size: calc(18 / var(--baseFontSize) * 1rem) } } /* slick carousel stuff */ .ourCervezas__dots-arrows-wrap { position: relative; height: 36px; width: 60%; max-width: 460px; margin: 0 auto; } .ourCervezas__cervezas .slick-list { padding:0 20% 0 0 !important; } /* touch devices */ @media only screen and (hover: none) and (pointer: coarse){ .ourCervezas__cerveza-img-shadow-wrap { pointer-events: none !important; } } .promo { position: relative; padding: 55px 0 0; max-width: 1700px; overflow: hidden; margin: 0 auto; } @media (min-width: 64.0625em) { .promo { padding: 50px 0 0 } } .promo:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 500px; background-repeat: no-repeat; background-size: 1700px; background-position: -30px 0; background-repeat: no-repeat; /*background-color: #002452;*/ z-index: -1; } @media (min-width: 64.0625em) { .promo:before { left: 5%; width: 100%; background-position: left top; height: calc(100% - 50px) } } .promo__image-slider { width: 100%; line-height: 0; box-shadow: 0px 2px 30px 1px rgba(0, 0, 0, 0.12); } @media (min-width: 75em) { .promo__image-slider { box-shadow: none; background-color: transparent } } .promo__image-slide { position: relative; width: 92%; max-width: 960px; } @media (min-width: 75em) { .promo__image-slide { width: 70%; max-width: none } } .promo__image-wrap { position: relative; width: 100%; height: 0; padding-top: 65%; } .promo__image { position: absolute; top: 0; left: 0; width: 100%; height: 100% } .promo__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } /* info block sits on top of slider */ .promo__info-wrap { background-color: #ffffff; padding: 18vw 8% 40px; margin-top: -12vw; width: 100%; } .promo__info-wrap:before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 150px; background-color: #ffffff; z-index: -1; } @media (min-width: 48em) { .promo__info-wrap { margin-top: -10vw; padding-top: 13vw } } @media (min-width: 75em) { .promo__info-wrap { position: absolute; margin-top: 0; padding: 26px 26px 15px; width: 40%; top: 80px; right: 5%; box-shadow: none } } @media (min-width: 87.5em) { .promo__info-wrap { width: 36%; right: 8.5%; top: 100px; padding: 30px 30px 15px } } .promo__info-wrap .btn { display: inline-block; margin-top: 24px; } @media (min-width: 48em) { .promo__info-wrap .btn { margin-top: 20px } } @media (min-width: 87.5em) { .promo__info-wrap .btn { margin-top: 30px } } .promo__category { display: inline-block; font-family: 'FoundersGroteskCond-SmBd', sans-serif; font-size: calc(16 / 16 * 1rem); font-size: calc(16 / var(--baseFontSize) * 1rem); letter-spacing: 0.21px; text-transform: uppercase; border-bottom: 3px solid #fdc338; border-bottom: 3px solid var(--coronaYellow); margin-bottom: 26px; } @media (min-width: 48em) { .promo__category { font-size: calc(18 / 16 * 1rem); font-size: calc(18 / var(--baseFontSize) * 1rem); margin-bottom: 30px } } @media (min-width: 75em) { .promo__category { font-size: calc(20 / 16 * 1rem); font-size: calc(20 / var(--baseFontSize) * 1rem) } } .promo__headline { font-family: 'FoundersGroteskCond-SmBd', sans-serif; font-size: calc(35 / 16 * 1rem); font-size: calc(35 / var(--baseFontSize) * 1rem); line-height: .9; letter-spacing: 0.59px; text-transform: uppercase; padding-bottom: 10px; max-width: 720px; } @media (min-width: 48em) { .promo__headline { font-size: calc(46 / 16 * 1rem); font-size: calc(46 / var(--baseFontSize) * 1rem) } .promo__headline__long { font-size: calc(40 / 16 * 1rem); font-size: calc(40 / var(--baseFontSize) * 1rem); } } @media (min-width: 87.5em) { .promo__headline { font-size: calc(55 / 16 * 1rem); font-size: calc(55 / var(--baseFontSize) * 1rem) } .promo__headline__long { font-size: calc(44 / 16 * 1rem); font-size: calc(44 / var(--baseFontSize) * 1rem); } } .promo p { font-size: calc(20 / 16 * 1rem); font-size: calc(20 / var(--baseFontSize) * 1rem); line-height: 1.4; max-width: 720px; } .promo p strong { font-family: 'FoundersGroteskCond-SmBd', sans-serif; } @media (min-width: 48em) { .promo p { font-size: calc(22 / 16 * 1rem); font-size: calc(22 / var(--baseFontSize) * 1rem) } } @media (min-width: 64.0625em) { .promo p { font-size: calc(20 / 16 * 1rem); font-size: calc(20 / var(--baseFontSize) * 1rem) } } @media (min-width: 87.5em) { .promo p { font-size: calc(22 / 16 * 1rem); font-size: calc(22 / var(--baseFontSize) * 1rem) } } @media (min-width: 100em) { .promo p { font-size: calc(24 / 16 * 1rem); font-size: calc(24 / var(--baseFontSize) * 1rem) } } .promo__legal p { font-size: calc(13 / 16 * 1rem); font-size: calc(13 / var(--baseFontSize) * 1rem); line-height: 1.2; padding-top: 30px; } /* promo specfic slider stuff */ .promo .dots-arrows-wrap { position: relative; height: 36px; width: 60%; max-width: 460px; margin: 30px auto 0; } @media (min-width: 75em) { .promo .dots-arrows-wrap { position: absolute; right: 8.5%; bottom: 80px; width: 18% } } .promo .dots-arrows-wrap { max-width: 340px; } .promo .dots-arrows-wrap .slick-dots li button:before { color: #D0D0D0; } @media (min-width: 75em) { .promo .dots-arrows-wrap .slick-dots li button:before { color: #D0D0D0 } } .promo .dots-arrows-wrap .slick-dots li.slick-active button:before { color: #fdc338; color: var(--coronaYellow); } .promo .slick-slide { margin: 0; } .promo .slick-list.draggable{ overflow: visible; } @media (min-width: 75em) { .promo .slick-list.draggable{ overflow: hidden } } .promo .slick-dotted.slick-slider { margin: 0; } .promo .mobile-hide { display: none; } @media (min-width: 75em) { .promo .mobile-hide { display: inherit } } .promo .desktop-hide { display: inherit; } @media (min-width: 75em) { .promo .desktop-hide { display: none } } /* PROMO PAGE SPECIFIC ADJUSTMENTS */ @media (min-width: 64.0625em) { .promo.promo-page { margin: 100px 0; padding: 100px 0 0 } } @media (min-width: 64.0625em) and (min-width: 100em) { .promo.promo-page { padding: 50px 0 0 } } .promo.promo-page .promo__info-wrap { padding: 18vw 8% 20px; } @media (min-width: 75em) { .promo.promo-page .promo__info-wrap { width: 42%; right: 0; top: 50px; padding: 30px 30px 15px } } @media (min-width: 100em) { .promo.promo-page .promo__info-wrap { top: 100px; width: 39.5% } } #shopify-section-promotion-tile .promo__info-wrap:before{ height:100% !important; } @media screen and (min-width: 1400px) and (max-width: 1440px){ #shopify-section-promotion-tile .promo:lang(es):before { height: calc(100% - 10px); } #shopify-section-promotion-tile .promo__info-wrap:lang(es){ top:50px; } } @media screen and (min-width: 1280px) and (max-width: 1290px){ #shopify-section-promotion-tile .promo:lang(es):before { height: calc(100% - 10px); } #shopify-section-promotion-tile .promo__info-wrap:lang(es){ top:50px; } } @media only screen and (min-width: 1349px) { #shopify-section-promotion-tile .promo .dots-arrows-wrap { bottom: 50px; } .breachesEvent-promo-slider .promo__image-slide, #shopify-section-promotion-tile .promo__image-slide { width: 68%; } #shopify-section-promotion-tile .promo:before { height: calc(100% - 30px); } } @media only screen and (min-width: 1280px) and (max-width: 1349px) { #shopify-section-promotion-tile .promo .dots-arrows-wrap { bottom: 35px; } #shopify-section-tile-beachesEvents .promo__image-slide, #shopify-section-promotion-tile .promo__image-slide { width: 68%; } #shopify-section-promotion-tile .promo:before { height: calc(100% - 30px); } } .breachesEvent-promo-slider .promo:before { background-size: cover; background-image: url(/cdn/shop/t/47/assets/blue-block.png?v=1149498…); } .breachesEvent-promo-slider { margin-top: 80px; } @media (min-width: 75em) { .breachesEvent-promo-slider .promo__image-slide { width: 68%; } .breachesEvent-promo-slider .promo__info-wrap{ top: 130px; } } @media (min-width: 64.0625em){ .breachesEvent-promo-slider .promo { padding-top: 80px; } } @media screen and (max-width:1199px) and (min-width:1025px){ .breachesEvent-promo-slider .promo:before{ height:500px; } } .social-feed { max-width: 1700px; margin: 50px auto; } @media (min-width: 64.0625em) { .social-feed { margin: 100px auto } } .social-feed__info-wrap { width: 84%; max-width: 1400px; margin: 0 auto; } .social-feed__headline { text-transform: uppercase; font-size: calc(40 / 16 * 1rem); font-size: calc(40 / var(--baseFontSize) * 1rem); line-height: 1; padding-bottom: 15px; } @media (min-width: 28.75em) { .social-feed__headline { font-size: calc(50 / 16 * 1rem); font-size: calc(50 / var(--baseFontSize) * 1rem); padding-bottom: 20px } } @media (min-width: 64.0625em) { .social-feed__headline { font-size: calc(60 / 16 * 1rem); font-size: calc(60 / var(--baseFontSize) * 1rem); padding-bottom: 35px } } .social-feed__desc { font-size: calc(20 / 16 * 1rem); font-size: calc(20 / var(--baseFontSize) * 1rem); line-height: 1.2; padding-bottom: 20px; } @media (min-width: 28.75em) { .social-feed__desc { font-size: calc(22 / 16 * 1rem); font-size: calc(22 / var(--baseFontSize) * 1rem); padding-bottom: 30px } } @media (min-width: 48em) { .social-feed__desc { font-size: calc(24 / 16 * 1rem); font-size: calc(24 / var(--baseFontSize) * 1rem); padding-bottom: 30px } } @media (min-width: 64.0625em) { .social-feed__desc { font-size: calc(26 / 16 * 1rem); font-size: calc(26 / var(--baseFontSize) * 1rem); padding-bottom: 40px } } #evm-instagram-feed { width: 100%; } #evm-instagram-feed .evm-instagram-heading { display: none; } #evm-instagram-feed .brandingdiv { display: none !important; } #evm-instagram-feed #evm-insta { margin: 0 !important; } #evm-instagram-feed .evmgrid { margin: 0; } #evm-instagram-feed .evm-instagram-video { float: none !important; position: absolute; top: 5px; right: 5px; } #evm-instagram-feed #evm-instagram { float: none; height: auto; display: flex; flex-wrap: wrap; } #evm-instagram-feed #evm-hover-li.evm-hover-li-div { height: auto !important; width: 50% !important; float: none !important; margin: 0 !important; } #evm-instagram-feed #evm-hover-li.evm-hover-li-div:nth-of-type(7), #evm-instagram-feed #evm-hover-li.evm-hover-li-div:last-of-type { display: none !important; } @media (min-width: 28.75em) { #evm-instagram-feed #evm-hover-li.evm-hover-li-div { width: 33.33333% !important } } @media (min-width: 48em) { #evm-instagram-feed #evm-hover-li.evm-hover-li-div { width: 25% !important } #evm-instagram-feed #evm-hover-li.evm-hover-li-div:nth-of-type(7), #evm-instagram-feed #evm-hover-li.evm-hover-li-div:last-of-type { display: block !important; } } @media (min-width: 64.0625em) { #evm-instagram-feed #evm-hover-li.evm-hover-li-div { width: 16.6666667% !important } #evm-instagram-feed #evm-hover-li.evm-hover-li-div:nth-of-type(7), #evm-instagram-feed #evm-hover-li.evm-hover-li-div:last-of-type { display: none !important; } } #evm-instagram-feed .evm_img_div { padding-top: 100% !important; height: 0 !important; margin: 0 !important; } #evm-instagram-feed .evm-instagram-button, #evm-instagram-feed .evminstatext-hover { position: absolute; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; margin: 0; max-height: none !important; } #evm-instagram-feed .evminstatext-hover { padding: 5px; } .sec_evmbox { display: none !important; } #evm-hover-li { margin: 0 !important; } .featured-tiles-wrap { position: relative; max-width: 1700px; margin: 0 auto; } .featured-tiles { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 20vw 0; } @media (min-width: 48em) { .featured-tiles { flex-direction: row; justify-content: center; padding: 10vw 0 13vw; margin-top: 0 } } @media (min-width: 64.0625em) { .featured-tiles { padding: 10% 0 0 0 } } .featured-tiles__seal-wrap { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .featured-tiles__la-vida-seal { position: -webkit-sticky; position: sticky; overflow: hidden; width: 75vw; max-width: 600px; top: 136px; z-index: -1; } @media (min-width: 40em) { .featured-tiles__la-vida-seal { width: 70% } } @media (min-width: 48em) { .featured-tiles__la-vida-seal { width: 62% } } @media (min-width: 60em) { .featured-tiles__la-vida-seal { width: 48% } } @media (min-width: 64.0625em) { .featured-tiles__la-vida-seal { top: 130px } } @media (min-width: 75em) { .featured-tiles__la-vida-seal { top: 100px } } @media (min-width: 75em) { .featured-tiles__la-vida-seal { top: 82px } } .featured-tiles__la-vida-seal img { width: 100%; transform: translateX(-10%); } @media (min-width: 75em) { .featured-tiles__la-vida-seal img { transform: translate(-10%, -10%) } } .featured-tile { display: block; width: 100%; max-width: 460px; margin: 0 auto 50px; text-align: center; text-transform: uppercase; box-shadow: 0 2px 30px 0 rgba(0, 0, 0, 0.12); -webkit-backface-visibility: hidden; backface-visibility: hidden; } @media (min-width: 48em) { .featured-tile { width: 40%; margin: 0 3% } .featured-tile:first-of-type { margin-top: 11%; } } .featured-tile__image { background-repeat: no-repeat; background-size: cover; height: 0; padding-top: 75%; margin: 0; } .featured-tile__info-wrap { padding: 22px 22px 30px; background-color: #ffffff; } .featured-tile__category { display: inline-block; font-size: calc(16 / 16 * 1rem); font-size: calc(16 / var(--baseFontSize) * 1rem); border-bottom: 3px solid #fdc338; border-bottom: 3px solid var(--coronaYellow); margin-bottom: 26px; } @media (min-width: 28.75em) { .featured-tile__category { font-size: calc(18 / 16 * 1rem); font-size: calc(18 / var(--baseFontSize) * 1rem) } } @media (min-width: 40em) { .featured-tile__category { margin-bottom: 20px } } @media (min-width: 64.0625em) { .featured-tile__category { font-size: calc(20 / 16 * 1rem); font-size: calc(20 / var(--baseFontSize) * 1rem) } } .featured-tile__title { font-size: calc(35 / 16 * 1rem); font-size: calc(35 / var(--baseFontSize) * 1rem); } @media (min-width: 28.75em) { .featured-tile__title { font-size: calc(38 / 16 * 1rem); font-size: calc(38 / var(--baseFontSize) * 1rem) } } @media (min-width: 40em) { .featured-tile__title { font-size: calc(30 / 16 * 1rem); font-size: calc(30 / var(--baseFontSize) * 1rem) } } @media (min-width: 64.0625em) { .featured-tile__title { font-size: calc(48 / 16 * 1rem); font-size: calc(48 / var(--baseFontSize) * 1rem) } } .brand-tile__wrap { position: relative; max-width: 1700px; margin: 50px auto 0; overflow: hidden; } @media (min-width: 64.0625em) { .brand-tile__wrap { margin: 100px auto; padding-top: 30px; overflow: visible } } @media (min-width: 75em) { .brand-tile__wrap { margin: 125px auto; padding-top: 30px; overflow: visible } } .brand-tile__image-wrap { position: relative; width: 92%; } @media (min-width: 64.0625em) { .brand-tile__image-wrap { width: 70% } } .brand-tile__image-wrap:before { content: ''; background-color: #012353; position: absolute; top: 12vw; left: 0; width: 110%; height: 95%; z-index: -1; } @media (min-width: 64.0625em) { .brand-tile__image-wrap:before { content: none } } .brand-tile__image { width: 100%; height: 0; padding-top: 65%; background-repeat: no-repeat; background-size: cover; } .brand-tile__vid-wrap { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .brand-tile__vid { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center center; object-position: center center; } .brand-tile__info-wrap { padding: 10% 8%; background-size: cover; background-repeat: no-repeat; } @media (min-width: 48em) { .brand-tile__info-wrap { padding: 8% } } @media (min-width: 64.0625em) { .brand-tile__info-wrap { position: absolute; margin-top: 0; padding: 40px; width: 40%; top: 0; right: 0 } } @media (min-width: 87.5em) { .brand-tile__info-wrap { padding: 50px } } .brand-tile__headline { color: #ffffff; text-transform: uppercase; font-size: calc(50 / 16* 1rem); font-size: calc(50 / var(--baseFontSize)* 1rem); line-height: 1; padding-bottom: 20px; } @media (min-width: 40em) { .brand-tile__headline { font-size: calc(60 / 16 * 1rem); font-size: calc(60 / var(--baseFontSize) * 1rem) } } @media (min-width: 64.0625em) { .brand-tile__headline { font-size: calc(55 / 16 * 1rem); font-size: calc(55 / var(--baseFontSize) * 1rem) } } @media (min-width: 87.5em) { .brand-tile__headline { font-size: calc(70 / 16 * 1rem); font-size: calc(70 / var(--baseFontSize) * 1rem) } } .brand-tile__wrap p { color: #ffffff; font-size: calc(20 / 16* 1rem); font-size: calc(20 / var(--baseFontSize)* 1rem); line-height: 1.4; } .brand-tile__wrap p strong { font-family: 'FoundersGroteskCond-SmBd', sans-serif; } @media (min-width: 40em) { .brand-tile__wrap p { font-size: calc(22 / 16 * 1rem); font-size: calc(22 / var(--baseFontSize) * 1rem) } } @media (min-width: 75em) { .brand-tile__wrap p { font-size: calc(24 / 16 * 1rem); font-size: calc(24 / var(--baseFontSize) * 1rem) } } @media (min-width: 87.5em) { .brand-tile__wrap p { font-size: calc(26 / 16 * 1rem); font-size: calc(26 / var(--baseFontSize) * 1rem) } } .brand-tile__legal p { font-size: calc(13 / 16 * 1rem); font-size: calc(13 / var(--baseFontSize) * 1rem); padding-top: 30px; } .brand-tile__wrap .btn { display: inline-block; margin-top: 24px; } @media (min-width: 48em) { .brand-tile__wrap .btn { margin-top: 26px } } @media (min-width: 64.0625em) { .brand-tile__wrap .btn { margin-top: 30px } } .brand-tile__wrap.right { /* left tile top margin is negative to crop seal above it, reset */ margin: 0 auto; background-color: #012353; padding-top: 10%; } @media (min-width: 48em) { .brand-tile__wrap.right { padding-top: 8% } } @media (min-width: 64.0625em) { .brand-tile__wrap.right { background-color: transparent; padding-top: 30px } } .brand-tile__wrap.right .brand-tile__image-wrap { margin-left: 8%; } @media (min-width: 64.0625em) { .brand-tile__wrap.right .brand-tile__image-wrap { margin-left: 30% } } @media (min-width: 64.0625em) { .brand-tile__wrap.right .brand-tile__info-wrap { left: 0; right: inherit } } #shopify-section-tile-evergreen-promo .brand-tile__wrap.right { /* left tile top margin is negative to crop seal above it, reset */ margin: 0 auto; padding-top: 0; background-color: transparent; } #shopify-section-tile-evergreen-promo .brand-tile__wrap.right .brand-tile__image-wrap { margin-left: 8%; } @media (min-width: 64.0625em) { #shopify-section-tile-evergreen-promo .brand-tile__wrap.right .brand-tile__image-wrap { margin-left: 30% } } #shopify-section-tile-evergreen-promo .brand-tile__wrap.right .brand-tile__image-wrap:before { left: -10%; } @media (min-width: 64.0625em) { #shopify-section-tile-evergreen-promo .brand-tile__wrap.right .brand-tile__info-wrap { left: 0; right: inherit } } .legal-page__wrap { width: 92%; max-width: 1400px; margin: 0 auto; padding: 170px 0; } @media (min-width: 64.0625em) { .legal-page__wrap { padding: 250px 0 } } @media (min-width: 75em) { .legal-page__wrap { padding: 200px 0 } } .legal-page__copy-wrap { max-width: 790px; } @media (min-width: 64.0625em) { .legal-page__copy-wrap { margin-left: 15% } } .legal-page__title { font-family: 'FoundersGroteskCond-Bd', sans-serif; font-size: calc(40 / 16 * 1rem); font-size: calc(40 / var(--baseFontSize) * 1rem); padding-bottom: 50px; text-transform: uppercase; line-height: 1; } @media (min-width: 48em) { .legal-page__title { font-size: calc(50 / 16 * 1rem); font-size: calc(50 / var(--baseFontSize) * 1rem) } } @media (min-width: 64.0625em) { .legal-page__title { font-size: calc(65 / 16 * 1rem); font-size: calc(65 / var(--baseFontSize) * 1rem) } } .legal-page__wrap h2 { font-family: 'FoundersGroteskCond-SmBd', sans-serif; font-size: calc(24 / 16 * 1rem); font-size: calc(24 / var(--baseFontSize) * 1rem); line-height: 1.3; padding: 10px 0 5px; text-transform: uppercase; } .legal-page__wrap h2 b { font-weight: normal; } .legal-page__wrap ul, .legal-page__wrap ol { padding: 0; } .legal-page__wrap ul li, .legal-page__wrap ol li { font-family: 'FoundersGroteskCond-Reg', sans-serif; font-size: calc(16 / 16 * 1rem); font-size: calc(16 / var(--baseFontSize) * 1rem); line-height: 1.5; list-style-type: disc; list-style-position: outside; margin: 0 0 0 30px; padding: 0 0 5px; } .legal-page__wrap ul li ul, .legal-page__wrap ol li ul { padding: 0 0 10px; } .legal-page__wrap ul li li, .legal-page__wrap ol li li { list-style-type: circle; } .legal-page__wrap ol li { list-style-type: decimal; } .legal-page__wrap u { } .legal-page__wrap a { border-bottom: 1px solid #002452; border-bottom: 1px solid var(--coronaBlue); padding: 0; transition: all 0.2s ease-in-out; } .legal-page__wrap a:hover { padding: 0 0 2px; } .legal-page__wrap p { font-family: 'FoundersGroteskCond-Reg', sans-serif; font-size: calc(16 / 16 * 1rem); font-size: calc(16 / var(--baseFontSize) * 1rem); line-height: 1.5; padding: 5px 0 10px; } .legal-page__wrap strong { font-family: 'FoundersGroteskCond-SmBd', sans-serif; } .hero__history { background-color: #ccc; } /* general stuff vertical layout */ .history__section { background-color: #002452; background-color: var(--coronaBlue); padding: 40px 0; overflow: hidden; } .history__section--1 { margin-top: 60px; padding: 0; background-color: transparent; } .history__section--2 { padding-top: 12vw; } .history__section--3 { padding-bottom: 0; } .history__section--4 { padding-bottom: 0; } .history__section .mobile-hide { display: none; } @media (min-width: 64.0625em) { .history__section .mobile-hide { display: block } } .history__section .desktop-hide { display: block; } @media (min-width: 64.0625em) { .history__section .desktop-hide { display: none } } /* copy stuff vertical layout */ .history__headline { color: #ffffff; font-family: 'FoundersGroteskCond-SmBd', sans-serif; font-size: calc(40 / 16 * 1rem); font-size: calc(40 / var(--baseFontSize) * 1rem); text-transform: uppercase; width: 84%; margin: 0 auto; padding-bottom: 15px; } .history__copy-wrap p { color: #ffffff; font-size: calc(20 / 16 * 1rem); font-size: calc(20 / var(--baseFontSize) * 1rem); width: 84%; margin: 0 auto; } .history__copy-wrap { position: relative; } .history__copy-wrap .history__footnote p { padding: 20px 0; font-size: calc(14 / 16 * 1rem); font-size: calc(14 / var(--baseFontSize) * 1rem); } .history__copy-wrap--origin { padding: 20vw 0 8vw; background-color: #002452; background-color: var(--coronaBlue); } .history__copy-wrap--origin p { padding-bottom: 0; } .history__copy-wrap--taste { padding-top: 25vw; padding-bottom: 20px; } .history__copy-wrap--taste-2 p { padding: 35px 0 0; } .history__copy-wrap--new-2 p:last-of-type { padding-bottom: 0; } /* image stuff vertical layout */ .history__old-bottle-wrap { position: relative; } .history__sun { position: absolute; left: 0; top: -11vw; width: 30vw; } .history__bird { position: absolute; right: 4vw; bottom: -14vw; width: 25.6vw; } .history__image-vid-wrap { width: 92%; position: relative; } .history__image-vid-wrap--right { margin-left: 8%; } .history__image-vid-wrap--origin:before { content: ''; position: absolute; top: 12vw; left: 0; width: 110%; height: 95%; background-color: #002452; background-color: var(--coronaBlue); } @media (min-width: 48em) { .history__image-vid-wrap--origin:before { content: none } } .history__image-wrap { position: relative; height: 0; padding-top: 64.5%; } .history__image-wrap--hands { width: 100%; margin: 0; } .history__image-wrap--dancers { width: 70%; margin-left: 30%; padding-top: 80%; } .history__image-wrap .history__image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .history__image-wrap .history__image--dancers { -o-object-position: right top; object-position: right top; } .history__image-wrap .history__image--hands { -o-object-position: 112% top; object-position: 112% top; } .history__old-logo { position: absolute; left: 13vw; top: -23vw; width: 21.33vw; } /* horizontal scroll layout */ @media (min-width: 64.0625em) { #shopify-section-hero-heritage-history { position: relative; width: 100%; } .tallOuterContainer { position: relative; width: 100%; /* height set in js */ } .stickyInnerContainer { position: -webkit-sticky; position: sticky; top: 0; height: 100vh; width: 100%; overflow-x: hidden; } .horizontalTranslateContainer { position: absolute; height: 100%; will-change: transform; } .hero__history { flex-shrink: 0; width: 100vw; height: 90vh; } /* copy stuff */ .history__sections-wrap { position: relative; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: flex-start; width: -webkit-max-content; width: -moz-max-content; width: max-content; } .history__section { display: flex; align-items: center; flex-flow: row nowrap; flex-shrink: 0; justify-content: flex-start; padding: 0; height: 90vh; } .history__section--1 { margin: 0; background-color: #002452; background-color: var(--coronaBlue); } .history__section--3 { margin-left: -320px; } .history__headline { padding-bottom: 20px; width: auto; font-size: calc(50 / 16 * 1rem); font-size: calc(50 / var(--baseFontSize) * 1rem); margin: 0; } .history__headline--taste { font-size: calc(40 / 16 * 1rem); font-size: calc(40 / var(--baseFontSize) * 1rem); } .history__copy-wrap { text-align: center; width: 580px; margin: 0 170px; padding: 110px 0 0; flex-shrink: 0; } .history__copy-wrap p { font-size: calc(26 / 16 * 1rem); font-size: calc(26 / var(--baseFontSize) * 1rem); line-height: 1.3; width: 100%; padding: 0; } .history__copy-wrap .history__footnote p { padding-top: 40px; font-size: calc(14 / 16 * 1rem); font-size: calc(14 / var(--baseFontSize) * 1rem); } .history__copy-wrap--origin { order: 1; } .history__copy-wrap--taste { order: 1; } .history__copy-wrap--taste p { font-size: calc(36 / 16 * 1rem); font-size: calc(36 / var(--baseFontSize) * 1rem); } .history__copy-wrap--taste-2 { order: 3; width: 500px; margin-left: 270px; } .history__copy-wrap--taste-2 p { font-size: calc(29 / 16 * 1rem); font-size: calc(29 / var(--baseFontSize) * 1rem); } .history__copy-wrap--new { order: 2; margin-left: -70px; width: 530px; } .history__copy-wrap--new-2 { margin: 0 0 0 140px; } .history__copy-wrap--new-2 p:first-of-type { margin-bottom: 50px; } .history__copy-wrap--new-2 p:last-of-type { font-size: calc(36 / 16 * 1rem); font-size: calc(36 / var(--baseFontSize) * 1rem); width: 450px; margin: 0 auto; } /* image stuff */ .history__image-vert { height: 100%; margin-left: -195px; flex-shrink: 0; order: 3; } .history__image-vert--refrescas { margin-left: -100px; } .history__image-vid-wrap { width: 715px; padding: 110px 0 0; flex-shrink: 0; z-index: 100; } .history__image-vid-wrap--right { margin-left: 0; } .history__image-vid-wrap--origin { order: 2; } .history__image-vid-wrap--bucket { width: 600px; order: 4; } .history__image-vid-wrap--seltzers { order: 3; width: 650px; } .history__image-wrap { flex-shrink: 0; } .history__image-wrap--hands { order: 1; position: relative; width: 1200px; padding-top: 550px; align-self: flex-end; } .history__image-wrap--bucket { padding-top: 80%; } .history__image-wrap--seltzers { padding-top: 73.85%; } .history__image-wrap--dancers { width: 460px; padding-top: 658px; margin: 0; align-self: flex-end; } .history__image { flex-shrink: 0; } .history__image--hands { -o-object-position: center bottom; object-position: center bottom; } .history__image--hands--left { position: absolute; bottom: -100px; left: -20px; width: 590px; transform: rotate(3deg); -o-object-fit: none; object-fit: none; -o-object-position: initial; object-position: initial; transform-origin: left bottom; } .history__image--hands--right { position: absolute; bottom: -100px; right: -20px; transform: rotate(-3deg); width: 525px; -o-object-fit: none; object-fit: none; -o-object-position: initial; object-position: initial; transform-origin: right bottom; } .history__image--dancers { -o-object-position: right bottom; object-position: right bottom; } .history__old-logo { width: 90px; position: static; margin-bottom: 32px; } .history__old-bottle-wrap { align-self: flex-end; order: 2; } .history__old-bottle { width: 290px; display: block; } .history__bottle-cap { position: absolute; top: 32px; left: -82px; width: 128px; } .history__sun { width: 114px; top: inherit; bottom: 40px; left: -80px; } .history__bird { position: absolute; top: inherit; left: inherit; bottom: 158px; right: -110px; width: 96px; } .history__flute-man { position: absolute; bottom: 106px; right: -240px; width: 82px; } .history__viva-mexica { position: absolute; width: 410px; top: 40px; left: 105px; max-width: none; } } /* video insets */ .history__image-wrap.video { padding-top: 56.25%; } .history__image-wrap.video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .hero_beaches-events .pob_logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .hero_beaches-events .history__copy-wrap h3.beache-sub__headline{ font-family:FoundersGroteskCond-Reg,sans-serif; font-size: 35px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.54; letter-spacing: 0.38px; text-align: center; color: #ffffff; } .hero_beaches-events .history__copy-wrap h2.history__headline{ font-size: 47px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.17; letter-spacing: 0.5px; text-align: center; color: #ffffff; padding-bottom: 0; padding-top: 10px; } .hero_beaches-events .history__copy-wrap p{ font-size: 26px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.42; letter-spacing: 0.28px; text-align: center; color: #ffffff; margin-top: 48px; } .hero_beaches-events .history__image-wrap{ height: inherit; padding-top: 0; } .hero_beaches-events .history__image-wrap .history__image{ width:80vw; height:100vh; position: static; } .hero_beaches-events .text-add-content { position: absolute; top: 50%; left: 50%; text-align: center; transform: translate(-50% , -50%); } .hero_beaches-events .text-add-content h4{ font-family: FoundersGroteskCond-Reg,sans-serif; font-size: 160px; font-weight:600; line-height:1; letter-spacing: 1.71px; text-align: center; color: #ffffff; } .hero_beaches-events .text-add-content p{ font-family: FoundersGroteskCond-Reg; font-size: 36px; font-weight: normal; line-height: 1.19; letter-spacing: 0.39px; text-align: center; color: #ffffff; } .hero_beaches-events .history__copy-wrap--taste p{ font-size: 29px; line-height: 1.48; letter-spacing: 0.31px; text-align: center; color: #ffffff; margin-top:0px; max-width: 472px; } .hero_beaches-events .history__image-wrap.history__image-wrap--bucket .history__image{ width: 60vw; } .hero_beaches-events .history__image-wrap.history__image-wrap--hands.hide-beaches-js { display: none; } .hero_beaches-events .history__copy-wrap--new h2.history__headline{ font-size: 36px; font-weight: 400; line-height: 1.19; letter-spacing: .39px; text-align: center; color: #fff; font-family: FoundersGroteskCond-Reg,sans-serif; max-width: 470px; margin: 0 auto; text-transform: inherit; } .hero_beaches-events .history__copy-wrap--new p { max-width: 545px; margin:48px auto 0; } .hero_beaches-events .history__image-wrap--seltzers img.history__image { width:40vw; } .hero_beaches-events section.history__section.history__section--4 h2.history__headline { max-width: 380px; margin: 0 auto; font-size: 40px; line-height: 1; } .hero_beaches-events section.history__section.history__section--4 p, .hero_beaches-events section.history__section.history__section--4 p:last-of-type { width: 540px; font-size:20px ; margin-top: 20px; margin-bottom: 30px; } .hero_beaches-events section.history__section.history__section--4 .history__copy-wrap.history__copy-wrap--new-2 { margin-right: 100px; margin-left:100px } .hero_beaches-events .hero_beaches-events section.history__section.history__section--4 p a { color: #fdc338; } .hero_beaches-events section.history__section.history__section--4 p .yellow-font{ color:#fdc338; } .hero_beaches-events section.history__section.history__section--4 a.ftrd-merch__cta { border: 2px solid #fdc338; color: #fff; padding: 16px 26px; border-radius: 50px; font-size:18px; font-weight: 600; letter-spacing: 0.24px; text-align: center; color: #ffffff; font-family: FoundersGroteskCond-SmBd,sans-serif; } .hero_beaches-events section.history__section.history__section--4 a.ftrd-merch__cta:after, .hero_beaches-events section.history__section.history__section--4 a.ftrd-merch__cta:hover:after{ display:none; } .hero_beaches-events .history__section--1 .history__copy-wrap h3.beache-sub__headline { font-size: 30px; line-height:1; } .hero_beaches-events .history__section--1 .history__copy-wrap h2.history__headline{ line-height:1; font-size:40px; padding-top:0; } .hero_beaches-events .history__section--1 .history__copy-wrap p, .hero_beaches-events .history__section--3 .history__copy-wrap p { font-size: 20px; margin-top: 28px; } .hero_beaches-events .text-add-content p.sub-desc-content{ font-size: 14px; font-weight: normal; line-height:1; letter-spacing: 0.15px; text-align: center; color: #ffffff; text-transform: uppercase; } @media (min-width: 64.0625em){ .hero_beaches-events .history__copy-wrap{ padding-top:20px; } .hero_beaches-events .history__image-vid-wrap{ width: auto; padding: 0 0; z-index: inherit; } .hero_beaches-events .history__old-logo{ width:474px; } .hero_beaches-events .history__section--3, .hero_beaches-events .history__copy-wrap--new{ margin-left: 0; } .hero_beaches-events .history__copy-wrap--new{ width: 650px; } } @media screen and (max-width:1024px){ .tallOuterContainer.hero_beaches-events { height: auto !important; }.hero_beaches-events .history__image-wrap--seltzers img.history__image, .hero_beaches-events .history__image-wrap .history__image { width: 100vw; height: 50vh; position: static; } .hero_beaches-events .history__copy-wrap--taste .history__old-logo{ margin: 0 auto 30px; display: block; position: static; width: 280px; } .hero_beaches-events .history__section--2, .hero_beaches-events .history__copy-wrap--taste{ padding-top: 0; } .hero_beaches-events .history__image-wrap--seltzers img.history__image , .hero_beaches-events .history__image-wrap.history__image-wrap--bucket .history__image{ margin: 0 auto; display: block; }.hero_beaches-events section.history__section.history__section--4 p, .hero_beaches-events section.history__section.history__section--4 p:last-of-type { width: 560px; margin-bottom: 60px; } .hero_beaches-events .history__section--3 .history__image-vid-wrap--right{ width:100%; margin-left: 0; } .hero_beaches-events .history__section--4{ text-align: center; } .hero_beaches-events .hero__history{ background-size: cover; } } @media screen and (max-width:720px){ .hero_beaches-events section.history__section.history__section--4 p, .hero_beaches-events section.history__section.history__section--4 p:last-of-type { width: 100%; } .hero_beaches-events .text-add-content h4{ font-size:80px; } .hero_beaches-events .text-add-content p { font-size: 26px; } .hero_beaches-events .text-add-content{ width: 70%; } .hero_beaches-events section.history__section.history__section--4 .history__copy-wrap.history__copy-wrap--new-2{ margin:0 10px; } .hero_beaches-events .history__section--3 .history__copy-wrap p{ margin-bottom:20px; } .hero_beaches-events section.history__section.history__section--4 a.ftrd-merch__cta:lang(es) { display: inline-block; padding: 16px 15px; font-size: 16px; } } .hero__csr { background-color: #ccc; } /* general stuff vertical layout */ .csr__section { position: relative; background-color: #002452; background-color: var(--coronaBlue); } .csr__section--3 { padding-bottom: 90px; } .csr__section .mobile-hide { display: none; } @media (min-width: 64.0625em) { .csr__section .mobile-hide { display: block } } .csr__section .desktop-hide { display: block; } @media (min-width: 64.0625em) { .csr__section .desktop-hide { display: none } } /* copy stuff vertical layout */ .csr__caption { color: #ffffff; font-size: calc(20 / 16 * 1rem); font-size: calc(20 / var(--baseFontSize) * 1rem); letter-spacing: .02rem; width: 84%; margin: 0 auto; line-height: 1.7; } .csr__stat-wrap { position: absolute; top: 50%; left: 8%; transform: translateY(-50%); color: #ffffff; text-align: center; } .csr__stat-number { display: block; font-family: 'FoundersGroteskCond-SmBd', sans-serif; font-size: calc(90 / 16 * 1rem); font-size: calc(90 / var(--baseFontSize) * 1rem); line-height: .8; text-shadow: 0 2px 17px rgba(0, 0, 0, 0.32); } .csr__stat { font-family: 'FoundersGroteskCond-Reg', sans-serif; font-size: calc(21 / 16 * 1rem); font-size: calc(21 / var(--baseFontSize) * 1rem); text-shadow: 0 2px 17px rgba(0, 0, 0, 0.5); } .csr__headline { color: #ffffff; font-family: 'FoundersGroteskCond-Reg', sans-serif; font-size: calc(26 / 16 * 1rem); font-size: calc(26 / var(--baseFontSize) * 1rem); width: 84%; margin: 0 auto; padding-bottom: 20px; } .csr__headline--cta { font-family: 'FoundersGroteskCond-SmBd', sans-serif; font-size: calc(38 / 16 * 1rem); font-size: calc(38 / var(--baseFontSize) * 1rem); text-transform: uppercase; width: 84%; margin: 0 auto; } .csr__copy-wrap p { color: #ffffff; font-size: calc(20 / 16 * 1rem); font-size: calc(20 / var(--baseFontSize) * 1rem); letter-spacing: .02rem; width: 84%; margin: 0 auto; } .csr__copy-wrap { position: relative; } .csr__copy-wrap .csr__footnote p { padding: 20px 0; font-size: calc(14 / 16 * 1rem); font-size: calc(14 / var(--baseFontSize) * 1rem); } .csr__copy-wrap--partner { order: 1; } .csr__intro { padding: 40px 0 0; text-align: center; } .csr__intro p { font-size: calc(26 / 16 * 1rem); font-size: calc(26 / var(--baseFontSize) * 1rem); line-height: 1.2; } .csr__intro p strong { font-family: 'FoundersGroteskCond-SmBd', sans-serif; font-size: calc(38 / 16 * 1rem); font-size: calc(38 / var(--baseFontSize) * 1rem); text-transform: uppercase; } .csr__subsection-wrap { display: flex; flex-direction: column; height: 100%; align-items: center; } /* image stuff vertical layout */ .csr__image-vid-wrap { width: 92%; position: relative; padding: 40px 0; } .csr__image-vid-wrap--right { margin-left: 8%; } .csr__image-vid-wrap--trash-wave { padding-bottom: 20px; } .csr__image-wrap { position: relative; height: 0; padding-top: 64.5%; } .csr__image-wrap .csr__image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .csr__partner-logo { width: 75%; margin: 50px 0 20px 8%; display: block; } /* horizontal scroll layout */ @media (min-width: 64.0625em) { #shopify-section-intention-csr { position: relative; width: 100%; } .tallOuterContainer { position: relative; width: 100%; /* height set in js */ } .stickyInnerContainer { position: -webkit-sticky; position: sticky; top: 0; height: 100vh; width: 100%; overflow-x: hidden; } .horizontalTranslateContainer { position: absolute; height: 100%; will-change: transform; } .hero__csr { flex-shrink: 0; width: 100vw; height: 90vh; } /* copy stuff */ .csr__sections-wrap { position: relative; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: flex-start; width: -webkit-max-content; width: -moz-max-content; width: max-content; } .csr__section { display: flex; align-items: center; flex-flow: row nowrap; flex-shrink: 0; justify-content: flex-start; padding: 0; height: 90vh; } .csr__section--1 { margin: 0; background-color: #002452; background-color: var(--coronaBlue); } .csr__section--3 { padding-bottom: 0; } .csr__stat-wrap { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #ffffff; text-align: center; } .csr__stat-number { display: block; font-family: 'FoundersGroteskCond-SmBd', sans-serif; font-size: calc(160 / 16 * 1rem); font-size: calc(160 / var(--baseFontSize) * 1rem); line-height: .8; box-shadow: none; } .csr__stat { font-family: 'FoundersGroteskCond-Reg', sans-serif; font-size: calc(36 / 16 * 1rem); font-size: calc(36 / var(--baseFontSize) * 1rem); box-shadow: none; } .csr__caption { color: #ffffff; font-size: calc(20 / 16 * 1rem); font-size: calc(20 / var(--baseFontSize) * 1rem); padding-top: 20px; margin: 0; width: 390px; line-height: 1.2; } .csr__headline { padding-bottom: 40px; width: auto; font-size: calc(36 / 16 * 1rem); font-size: calc(36 / var(--baseFontSize) * 1rem); margin: 0; } .csr__headline--partner { width: 400px; margin: 0 auto; order: 2; } .csr__headline--cta { font-family: 'FoundersGroteskCond-SmBd', sans-serif; font-size: calc(40 / 16 * 1rem); font-size: calc(40 / var(--baseFontSize) * 1rem); width: 400px; margin: 0 auto; } .csr__copy-wrap { text-align: center; width: 604px; margin: 0 170px; padding: 110px 0 0; flex-shrink: 0; } .csr__copy-wrap p { font-size: calc(26 / 16 * 1rem); font-size: calc(26 / var(--baseFontSize) * 1rem); line-height: 1.3; width: 100%; padding: 0; } .csr__copy-wrap .csr__footnote p { padding-top: 40px; font-size: calc(14 / 16 * 1rem); font-size: calc(14 / var(--baseFontSize) * 1rem); } .csr__copy-wrap--partner { order: 1; } .csr__copy-wrap--partner, .csr__copy-wrap--partner-2 { width: 510px; } .csr__copy-wrap--partner-2 { margin: 0 170px 0 40px; } .csr__copy-wrap--partner p { font-size: calc(29 / 16 * 1rem); font-size: calc(29 / var(--baseFontSize) * 1rem); } .csr__partner-logo { margin: 0 auto 40px; width: 100%; } .csr__intro { padding-bottom: 50px; } .csr__intro p { font-size: calc(35 / 16 * 1rem); font-size: calc(35 / var(--baseFontSize) * 1rem); } .csr__intro p strong { font-family: 'FoundersGroteskCond-SmBd', sans-serif; font-size: calc(47 / 16 * 1rem); font-size: calc(47 / var(--baseFontSize) * 1rem); text-transform: uppercase; } .csr__subsection-wrap { display: flex; flex-direction: row; height: 100%; align-items: center; } /* image stuff */ .csr__image-vert-wrap { position: relative; height: 100%; } .csr__image-vert { height: 100%; flex-shrink: 0; } .csr__image-vert--man { margin-left: -300px; } .csr__inset-wrap { order: 2; } .csr__image-vid-wrap { width: 574px; padding: 22vh 0 0; padding: 0; flex-shrink: 0; z-index: 100; } .csr__image-vid-wrap--right { margin: 0; } .csr__image-wrap { flex-shrink: 0; padding-top: 75.52%; } .csr__image { flex-shrink: 0; } } /* video insets */ .csr__image-wrap.video { padding-top: 56.25%; } .csr__image-wrap.video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .vid-overlay { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #000; z-index: 10000; } @media (min-width: 64.0625em) { .vid-overlay { background-color: rgba(0, 0, 0, .8) } } .vid-overlay.open { display: block; } .vid-overlay__vid-wrap { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: auto; max-width: 960px; } @media screen and (orientation: landscape) { .vid-overlay__vid-wrap { max-width: 80vw; max-height: 80vh } } .vid-overlay__vid { width: 100%; height: 0; padding-top: 56.25%; -o-object-fit: contain; object-fit: contain; } .vid-overlay__vid iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .vid-overlay__close { position: fixed; right: 40px; top: 60px; width: 24px; height: 24px; } @media (min-width: 48em) { .vid-overlay__close { top: 40px; width: 45px; height: 45px } } @media screen and (orientation: landscape) and (max-height: 640px) { .vid-overlay__close { width: 24px; height: 24px; top: 20px; right: 20px } } .vid-overlay__close #x-1, .vid-overlay__close #x-2 { position: absolute; top: 50%; transform: translateY(-50%); display: block; width: 100%; height: 2px; background-color: #ffffff; transform-origin: 50% 50%; } .vid-overlay__close #x-1 { transform: rotate(45deg); } .vid-overlay__close #x-2 { transform: rotate(-45deg); } .faq { width: 84%; max-width: 720px; margin: 0 auto 50px; } .faq__headline { font-family: 'FoundersGroteskCond-SmBd', sans-serif; font-size: calc(36 / 16 * 1rem); font-size: calc(36 / var(--baseFontSize) * 1rem); text-transform: uppercase; text-align: center; padding-bottom: 25px; } @media (min-width: 48em) { .faq__headline { font-size: calc(46 / 16 * 1rem); font-size: calc(46 / var(--baseFontSize) * 1rem); padding-bottom: 42px } } .faq__qa-wrap { border-top: 1px solid #cbccce; } .faq__qa-wrap:last-of-type { border-bottom: 1px solid #cbccce; } .faq__questions-wrap { margin-bottom: 100px; } @media (min-width: 64.0625em) { .faq__questions-wrap { margin-bottom: 150px } } .faq__question-wrap { cursor: pointer; display: flex; align-items: center; justify-content: space-between; } .faq__question { font-family: 'FoundersGroteskCond-SmBd', sans-serif; font-size: calc(20 / 16 * 1rem); font-size: calc(20 / var(--baseFontSize) * 1rem); text-transform: uppercase; padding: 20px 15px 20px 0; } @media (min-width: 48em) { .faq__question { font-size: calc(22 / 16 * 1rem); font-size: calc(22 / var(--baseFontSize) * 1rem); padding: 26px 15px 26px 0 } } .faq__circle { flex: 0 0 auto; position: relative; width: 34px; height: 34px; background-color: #fdc338; background-color: var(--coronaYellow); border-radius: 100%; } @media (min-width: 48em) { .faq__circle { width: 44px; height: 44px } } .faq__circle--line-1, .faq__circle--line-2 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #002452; background-color: var(--coronaBlue); } .faq__circle--line-1 { height: 50%; width: 2px; transition: .2s; } .faq__circle--line-1.open { opacity: 0; transition: .2s; } .faq__circle--line-2 { width: 50%; height: 2px; } .faq__answer-wrap { display: none; padding-bottom: 20px; } @media (min-width: 48em) { .faq__answer-wrap { padding-bottom: 40px } } .faq__answer-wrap p { font-size: calc(18 / 16 * 1rem); font-size: calc(18 / var(--baseFontSize) * 1rem); } @media (min-width: 48em) { .faq__answer-wrap p { font-size: calc(20 / 16 * 1rem); font-size: calc(20 / var(--baseFontSize) * 1rem) } } .faq__answer-wrap p strong { font-family: 'FoundersGroteskCond-SmBd', sans-serif; } .contact-faq-headline { color: #002452; color: var(--coronaBlue); text-transform: uppercase; letter-spacing: .5px; line-height: 1; font-family: 'FoundersGroteskCond-Bd', sans-serif; font-size: calc(40 / 16 * 1rem); font-size: calc(40 / var(--baseFontSize) * 1rem); padding-top: 170px; width: 84%; max-width: 720px; margin: 0 auto; } @media (min-width: 48em) { .contact-faq-headline { font-size: calc(65 / 16 * 1rem); font-size: calc(65 / var(--baseFontSize) * 1rem); text-align: center; padding-top: 200px } } @media (min-width: 64.0625em) { .contact-faq-headline { padding-top: 225px } } @media (min-width: 75em) { .contact-faq-headline { padding-top: 250px; font-size: calc(85 / 16 * 1rem); font-size: calc(85 / var(--baseFontSize) * 1rem) } } .contact { position: relative; padding: 40px 0; max-width: 1700px; margin: 0 auto; overflow: hidden; } @media (min-width: 48em) { .contact { padding: 90px 0 } } .contact__texture-bkgd { position: absolute; width: 100%; margin: 0 auto; height: 80%; top: 40px; left: 0; z-index: -1; background-color: #fdc338; background-color: var(--coronaYellow); } @media (min-width: 48em) { .contact__texture-bkgd { background-color: transparent; height: 75% } } .contact__wrap { background-color: #ffffff; width: 92%; max-width: 900px; margin: 0 auto; padding: 30px 0; box-shadow: 0 2px 54px 1px rgba(0, 0, 0, 0.12); } @media (min-width: 48em) { .contact__wrap { padding: 50px 0 } } .contact__form { width: 100%; height: 1650px; } @media (min-width: 48em) { .contact__form { height: 1620px } } @media screen and (min-width: 835px) { .contact__form { height: 1200px } } .contact__headline { font-family: 'FoundersGroteskCond-SmBd', sans-serif; font-size: calc(36 / 16 * 1rem); font-size: calc(36 / var(--baseFontSize) * 1rem); text-transform: uppercase; text-align: center; } @media (min-width: 48em) { .contact__headline { font-size: calc(46 / 16 * 1rem); font-size: calc(46 / var(--baseFontSize) * 1rem); padding-bottom: 42px } } .contact__intro-wrap p { font-size: calc(24 / 16 * 1rem); font-size: calc(24 / var(--baseFontSize) * 1rem); line-height: 1.3; padding: 20px 8% 60px; } @media (min-width: 48em) { .contact__intro-wrap p { text-align: center; font-size: calc(26 / 16 * 1rem); font-size: calc(26 / var(--baseFontSize) * 1rem); padding: 40px 0 80px } } .locator__wrap.top-page { position: relative; } @media screen and (min-width: 680px) { .locator__wrap.top-page { margin: 200px auto 150px } } @media (min-width: 64.0625em) { .locator__wrap.top-page { margin: 250px auto 150px } } .locator__wrap.top-page .locator__headline { background-color: #002452; background-color: var(--coronaBlue); font-size: calc(38 / 16 * 1rem); font-size: calc(38 / var(--baseFontSize) * 1rem); padding: 170px 4% 20px; } @media screen and (min-width: 680px) { .locator__wrap.top-page .locator__headline { background-color: transparent; font-size: calc(50 / 16 * 1rem); font-size: calc(50 / var(--baseFontSize) * 1rem); padding-top: 0 } } @media (min-width: 64.0625em) { .locator__wrap.top-page .locator__headline { font-size: calc(60 / 16 * 1rem); font-size: calc(60 / var(--baseFontSize) * 1rem); padding-top: 0 } } @media (min-width: 75em) { .locator__wrap.top-page .locator__headline { padding-top: 0; font-size: calc(85 / 16 * 1rem); font-size: calc(85 / var(--baseFontSize) * 1rem); background-color: transparent } } .locator__wrap { max-width: 1700px; margin: 0 auto 70px; padding-bottom: 50px; overflow: hidden; } @media screen and (min-width: 680px) { .locator__wrap { padding-bottom: 50px; margin: 0 } } @media (min-width: 64.0625em) { .locator__wrap { overflow: hidden } } .locator__headline { color: #ffffff; text-transform: uppercase; font-family: 'FoundersGroteskCond-SmBd', sans-serif; font-size: calc(50 / 16 * 1rem); font-size: calc(50 / var(--baseFontSize) * 1rem); padding: 40px 8% 0; } @media (min-width: 28.75em) { .locator__headline { font-size: calc(60 / 16 * 1rem); font-size: calc(60 / var(--baseFontSize) * 1rem) } } @media screen and (min-width: 680px) { .locator__headline { color: #002452; color: var(--coronaBlue); background-color: transparent; font-size: calc(82 / 16 * 1rem); font-size: calc(82 / var(--baseFontSize) * 1rem); padding-bottom: 40px } } @media (min-width: 75em) { .locator__headline { font-size: calc(85 / 16 * 1rem); font-size: calc(85 / var(--baseFontSize) * 1rem) } } .locator__widget-area { position: relative; background-color: #002452; background-color: var(--coronaBlue); } @media screen and (min-width: 680px) { .locator__widget-area { padding-bottom: 34px } } @media (min-width: 64.0625em) { .locator__widget-area { padding: 40px 0; background-color: transparent } } .locator__widget-wrap { font-size: 0; box-shadow: 0 0 54px 0 rgba(0, 0, 0, 0.12); } @media screen and (min-width: 680px) { .locator__widget-wrap { width: 90%; margin: 0 auto; box-shadow: none } } @media (min-width: 75em) { .locator__widget-wrap { width: 100% } } .locator__widget { width: 100%; height: 706px; } @media screen and (min-width: 480px) { .locator__widget { height: 656px } } .locator__bkgd-texture { display: none; } @media (min-width: 64.0625em) { .locator__bkgd-texture { display: block; position: absolute; width: 95%; top: 0; left: 0; height: 100%; background-size: calc(1700px - 5%) 100%; background-position: right center; background-repeat: no-repeat; z-index: -1 } } .featured-full { position: relative; max-width: 1700px; margin: 50px auto; background-size: cover; background-position: center center; text-align: center; } .featured-full__info-wrap { padding: 15vh 0; } @media (min-width: 48em) { .featured-full__info-wrap { padding: 20vw 0 } } .featured-full__info-wrap p { color: #ffffff; font-size: calc(20 / 16 * 1rem); font-size: calc(20 / var(--baseFontSize) * 1rem); width: 84%; max-width: 460px; margin: 0 auto; line-height: 1.3; padding-bottom: 30px; } @media (min-width: 40em) { .featured-full__info-wrap p { font-size: calc(22 / 16 * 1rem); font-size: calc(22 / var(--baseFontSize) * 1rem) } } @media (min-width: 48em) { .featured-full__info-wrap p { font-size: calc(24 / 16 * 1rem); font-size: calc(24 / var(--baseFontSize) * 1rem) } } @media (min-width: 75em) { .featured-full__info-wrap p { font-size: calc(26 / 16 * 1rem); font-size: calc(26 / var(--baseFontSize) * 1rem); padding-bottom: 50px } } .featured-full__headline { color: #ffffff; text-transform: uppercase; font-family: 'FoundersGroteskCond-SmBd', sans-serif; font-size: calc(40 / 16 * 1rem); font-size: calc(40 / var(--baseFontSize) * 1rem); padding-bottom: 15px; width: 84%; max-width: 700px; margin: 0 auto; } @media (min-width: 40em) { .featured-full__headline { font-size: calc(50 / 16 * 1rem); font-size: calc(50 / var(--baseFontSize) * 1rem); padding-bottom: 20px } } @media (min-width: 48em) { .featured-full__headline { font-size: calc(60 / 16 * 1rem); font-size: calc(60 / var(--baseFontSize) * 1rem) } } @media (min-width: 75em) { .featured-full__headline { font-size: calc(75 / 16 * 1rem); font-size: calc(75 / var(--baseFontSize) * 1rem) } } .four-zero-four__wrap { width: 92%; max-width: 1400px; margin: 0 auto; padding: 170px 0; } @media (min-width: 64.0625em) { .four-zero-four__wrap { padding: 250px 0 } } @media (min-width: 75em) { .four-zero-four__wrap { padding: 200px 0 } } .four-zero-four__title { font-family: 'FoundersGroteskCond-Bd', sans-serif; font-size: calc(40 / 16 * 1rem); font-size: calc(40 / var(--baseFontSize) * 1rem); text-transform: uppercase; line-height: 1; } @media (min-width: 48em) { .four-zero-four__title { font-size: calc(50 / 16 * 1rem); font-size: calc(50 / var(--baseFontSize) * 1rem) } } @media (min-width: 64.0625em) { .four-zero-four__title { font-size: calc(65 / 16 * 1rem); font-size: calc(65 / var(--baseFontSize) * 1rem) } } .four-zero-four__copy { font-family: 'FoundersGroteskCond-Reg', sans-serif; font-size: calc(24 / 16 * 1rem); font-size: calc(24 / var(--baseFontSize) * 1rem); line-height: 1.5; padding: 20px 0 40px; } .intro-tile .cerveza__nutrition-facts { max-width: 280px; } @media (min-width: 64.0625em) { .intro-tile .cerveza__nutrition-facts { max-width: 360px } } .intro-tile { position: relative; text-align: center; width: 100%; max-width: 1700px; padding-top: 30px; margin: 0 auto; } .intro-tile__image { width: 100%; } @media (min-width: 48em) { .intro-tile__image { position: absolute; bottom: 0; left: 0; z-index: -1 } } .intro-tile__info-outter-wrap { width: 84%; max-width: 1400px; margin: 0 auto; } @media (min-width: 48em) { .intro-tile__info-wrap { width: 400px; padding-bottom: 16%; display: inline-block; margin-left: 35% } } @media (min-width: 64.0625em) { .intro-tile__info-wrap { width: 560px } } @media (min-width: 75em) { .intro-tile__info-wrap { width: 606px } } .intro-tile__category { text-transform: uppercase; text-align: center; display: inline-block; font-size: calc(16 / 16 * 1rem); font-size: calc(16 / var(--baseFontSize) * 1rem); border-bottom: 3px solid #fdc338; border-bottom: 3px solid var(--coronaYellow); margin-bottom: 26px; } @media (min-width: 28.75em) { .intro-tile__category { font-size: calc(18 / 16 * 1rem); font-size: calc(18 / var(--baseFontSize) * 1rem) } } @media (min-width: 40em) { .intro-tile__category { margin-bottom: 20px } } @media (min-width: 64.0625em) { .intro-tile__category { font-size: calc(20 / 16 * 1rem); font-size: calc(20 / var(--baseFontSize) * 1rem) } } /* using richtext to be able to break as desired */ .intro-tile__headline p { text-transform: uppercase; text-align: center; font-family: 'FoundersGroteskCond-Bd'; font-size: calc(46 / 16 * 1rem); font-size: calc(46 / var(--baseFontSize) * 1rem); padding-bottom: 20px; width: 95%; margin: 0 auto; } @media (min-width: 48em) { .intro-tile__headline p { width: 100%; font-size: calc(42 / 16 * 1rem); font-size: calc(42 / var(--baseFontSize) * 1rem) } } @media (min-width: 64.0625em) { .intro-tile__headline p { width: 100%; font-size: calc(50 / 16 * 1rem); font-size: calc(50 / var(--baseFontSize) * 1rem) } } @media (min-width: 75em) { .intro-tile__headline p { font-size: calc(64 / 16 * 1rem); font-size: calc(64 / var(--baseFontSize) * 1rem) } } .intro-tile__intro-copy p { font-size: calc(26 / 16 * 1rem); font-size: calc(26 / var(--baseFontSize) * 1rem); line-height: 1.3; padding-bottom: 30px; } @media (min-width: 48em) { .intro-tile__intro-copy p { font-size: calc(24 / 16 * 1rem); font-size: calc(24 / var(--baseFontSize) * 1rem) } } @media (min-width: 64.0625em) { .intro-tile__intro-copy p { font-size: calc(30 / 16 * 1rem); font-size: calc(30 / var(--baseFontSize) * 1rem) } } @media (min-width: 75em) { .intro-tile__intro-copy p { font-size: calc(36 / 16 * 1rem); font-size: calc(36 / var(--baseFontSize) * 1rem) } } .intro-tile__descript { font-family: 'FoundersGroteskCond-Reg'; font-size: calc(24 / 16 * 1rem); font-size: calc(24 / var(--baseFontSize) * 1rem); padding-top: 26px; } @media (min-width: 48em) { .intro-tile__descript { font-size: calc(22 / 16 * 1rem); font-size: calc(22 / var(--baseFontSize) * 1rem) } } @media (min-width: 64.0625em) { .intro-tile__descript { font-size: calc(24 / 16 * 1rem); font-size: calc(24 / var(--baseFontSize) * 1rem) } } .intro-tile__legal p { width: 92%; margin: 0 auto; text-align: center; text-transform: uppercase; font-size: calc(13 / 16 * 1rem); font-size: calc(13 / var(--baseFontSize) * 1rem); line-height: 1.1; padding-top: 15px; margin-bottom: 50px; } .grecaptcha-badge { z-index: 1; } .error { color: red; } /* promo page wide */ .promo-page-legal { font-size: calc(13 / 16 * 1rem); font-size: calc(13 / var(--baseFontSize) * 1rem); line-height: 1.2; } .promo-entry { position: relative; padding: 40px 0; max-width: 1700px; margin: 40px auto 0; overflow: hidden; outline: none; } @media (min-width: 48em) { .promo-entry { margin-top: 70px } } @media (min-width: 64.0625em) { .promo-entry { margin: 0 auto; padding: 90px 0 } } .promo-entry__texture-bkgd { position: absolute; width: 100%; margin: 0 auto; height: 80%; top: 40px; left: 0; z-index: -1; background-color: #fdc338; background-color: var(--coronaYellow); } @media (min-width: 48em) { .promo-entry__texture-bkgd { background-color: transparent; height: 75% } } .promo-entry__wrap { background-color: #ffffff; width: 92%; max-width: 900px; margin: 0 auto; padding: 30px 0; box-shadow: 0 2px 54px 1px rgba(0, 0, 0, 0.12); } @media (min-width: 48em) { .promo-entry__wrap { padding: 50px 0 25px } } .promo-entry__headline { text-transform: uppercase; text-align: center; letter-spacing: .5px; line-height: 1; font-family: 'FoundersGroteskCond-SmBd', sans-serif; font-size: calc(40 / 16 * 1rem); font-size: calc(40 / var(--baseFontSize) * 1rem); width: 84%; max-width: 720px; margin: 0 auto; } @media (min-width: 48em) { .promo-entry__headline { font-size: calc(65 / 16 * 1rem); font-size: calc(65 / var(--baseFontSize) * 1rem); text-align: center } } @media (min-width: 75em) { .promo-entry__headline { font-size: calc(85 / 16 * 1rem); font-size: calc(85 / var(--baseFontSize) * 1rem) } } .promo-entry__congrats { display: none; padding-bottom: 30px; } .promo-entry__error-message { color: red; text-align: center; text-transform: uppercase; font-family: 'FoundersGroteskCond-SmBd'; font-size: calc(18 / 16 * 1rem); font-size: calc(18 / var(--baseFontSize) * 1rem); line-height: 1.3; } @media (min-width: 48em) { .promo-entry__error-message { font-size: calc(20 / 16 * 1rem); font-size: calc(20 / var(--baseFontSize) * 1rem) } } @media (min-width: 64.0625em) { .promo-entry__error-message { font-size: calc(24 / 16 * 1rem); font-size: calc(24 / var(--baseFontSize) * 1rem) } } .promo-entry__success-message { font-family: 'FoundersGroteskCond-SmBd'; font-size: calc(24 / 16 * 1rem); font-size: calc(24 / var(--baseFontSize) * 1rem); text-align: center; text-transform: uppercase; line-height: 1.3; width: 80%; margin: 0 auto; } @media (min-width: 48em) { .promo-entry__success-message { font-size: calc(28 / 16 * 1rem); font-size: calc(28 / var(--baseFontSize) * 1rem) } } @media (min-width: 64.0625em) { .promo-entry__success-message { font-size: calc(32 / 16 * 1rem); font-size: calc(32 / var(--baseFontSize) * 1rem) } } .promo-entry__subhead { text-align: center; font-size: calc(26 / 16 * 1rem); font-size: calc(26 / var(--baseFontSize) * 1rem); } .promo-entry__legal { width: 90%; margin: 0 auto; padding-top: 50px; } .promo-entry__form-wrap { width: 92%; margin: 30px auto 0; text-align: center; display: flex; justify-content: space-between; } @media (min-width: 64.0625em) { .promo-entry__form-wrap { width: 67% } } .promo-entry__form { display: flex; flex-wrap: wrap; justify-content: space-between; } .promo-entry__field, .promo-entry input, .promo-entry select { font-family: 'FoundersGroteskCond-SmBd'; font-size: calc(18 / 16 * 1rem); font-size: calc(18 / var(--baseFontSize) * 1rem); text-transform: uppercase; text-align: left; line-height: 1.3; margin-bottom: 16px; width: 100%; } .promo-entry__field label, .promo-entry input label, .promo-entry select label { padding-bottom: 5px; display: block; font-size:20px; } .promo-entry__field input::-moz-placeholder, .promo-entry input input::-moz-placeholder, .promo-entry select input::-moz-placeholder { text-transform: uppercase; color: rgba( 0, 36, 82, .5 ); font-size: 20px; } .promo-entry__field input:-ms-input-placeholder, .promo-entry input input:-ms-input-placeholder, .promo-entry select input:-ms-input-placeholder { text-transform: uppercase; color: rgba( 0, 36, 82, .5 ); font-size: 20px; } .promo-entry__field input::placeholder, .promo-entry input input::placeholder, .promo-entry select input::placeholder { text-transform: uppercase; color: rgba( 0, 36, 82, .5 ); font-size: 20px; } .promo-entry__field input::-webkit-input-placeholder, .promo-entry input input::-webkit-input-placeholder, .promo-entry select input::-webkit-input-placeholder { color: rgba( 0, 36, 82, .5 ); text-transform: uppercase; } .promo-entry__field input::-moz-placeholder, .promo-entry input input::-moz-placeholder, .promo-entry select input::-moz-placeholder { color: rgba( 0, 36, 82, .5 ); text-transform: uppercase; font-size: 20px; } .promo-entry__field input::-ms-input-placeholder, .promo-entry input input::-ms-input-placeholder, .promo-entry select input::-ms-input-placeholder { color: rgba( 0, 36, 82, .5 ); text-transform: uppercase; font-size: 20px; } .promo-entry__field input::-moz-placeholder, .promo-entry input input::-moz-placeholder, .promo-entry select input::-moz-placeholder { color: rgba( 0, 36, 82, .5 ); text-transform: uppercase; font-size: 20px; } .promo-entry__field input, .promo-entry__field select, .promo-entry input input, .promo-entry input select, .promo-entry select input, .promo-entry select select { height: auto; color: #002452; border-radius: 0; padding: 15px; border: 2px solid #002452; width: 100%; font-size: 20px; } @media (min-width: 48em) { .promo-entry__field--2-col, .promo-entry input--2-col, .promo-entry select--2-col { width: calc( 50% - 20px ) } } .promo-entry__state-select-wrap { position: relative; } .promo-entry__state-select-wrap:after { position: absolute; content: '\e5cf'; color: #002452; color: var(--coronaBlue); font-family: 'Material Icons'; font-size: calc(30 / 16 * 1rem); font-size: calc(30 / var(--baseFontSize) * 1rem); line-height: 1; top: 28px; transform: translateY(-50%); right: 5px; } @media (min-width: 64.0625em) { .promo-entry__state-select-wrap:after { font-size: calc(38/16*1rem); font-size: calc(38/var(--baseFontSize)*1rem) } } .promo-entry__state-select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: transparent; } .promo-entry__optins-wrap { margin: 0px 0 20px; width: 100%; } /* The container */ .promo-entry__optin { display: block; position: relative; padding-left: 30px; margin-bottom: 12px; cursor: pointer; font-family: 'FoundersGroteskCond-SmBd', sans-serif; font-size: calc(18 / 16 * 1rem); font-size: calc(18 / var(--baseFontSize) * 1rem); text-align: left; line-height: 1.4; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .promo-entry__optin a { text-decoration: underline; } @media (min-width: 48em) { .promo-entry__optin { padding-left: 35px } } /* Hide the browser's default checkbox */ .promo-entry__optin input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } /* Show the checkmark when checked */ .promo-entry__optin input:checked ~ .checkmark:after { display: block; } /* Style the checkmark/indicator */ .promo-entry__optin .checkmark:after { left: 5px; top: -1px; width: 7px; height: 15px; border: solid #002452; border: solid var(--coronaBlue); border-width: 0 2px 2px 0; transform: rotate(45deg); } @media (min-width: 48em) { .promo-entry__optin .checkmark:after { left: 7px; top: 1px; width: 8px; height: 16px } } /* Create a custom checkbox */ .checkmark { position: absolute; top: 0; left: 0; height: 20px; width: 20px; border: 2px solid #002452; border: 2px solid var(--coronaBlue); } @media (min-width: 48em) { .checkmark { height: 24px; width: 24px } } /* Create the checkmark/indicator (hidden when not checked) */ .checkmark:after { content: ""; position: absolute; display: none; } .promo-entry__form .btn.btn--submit{ padding: 12px 56px; font-size: calc(22/16*1rem); font-size: calc(22/var(--baseFontSize)*1rem); } #form-legal.promo-entry__legal { width: 92%; } @media (min-width: 64.0625em) { #form-legal.promo-entry__legal { width: 67% } } #form-legal.promo-entry__legal p{ font-size: 12px; font-family: FoundersGroteskCond-SmBd,sans-serif; text-align:center; } .promo-page-intro { text-align: center; width: 84%; max-width: 1100px; margin: 40px auto 30px; } @media (min-width: 64.0625em) { .promo-page-intro { margin: 50px auto 80px } } .promo-page-intro__copy p { font-size: calc(22 / 16 * 1rem); font-size: calc(22 / var(--baseFontSize) * 1rem); line-height: 1.3; text-align: center; padding-bottom: 30px; } @media (min-width: 48em) { .promo-page-intro__copy p { font-size: calc(26 / 16 * 1rem); font-size: calc(26 / var(--baseFontSize) * 1rem) } } @media (min-width: 64.0625em) { .promo-page-intro__copy p { font-size: calc(28 / 16 * 1rem); font-size: calc(28 / var(--baseFontSize) * 1rem) } } @media (min-width: 75em) { .promo-page-intro__copy p { font-size: calc(32 / 16 * 1rem); font-size: calc(32 / var(--baseFontSize) * 1rem) } } @media (min-width: 87.5em) { .promo-page-intro__copy p { font-size: calc(35 / 16 * 1rem); font-size: calc(35 / var(--baseFontSize) * 1rem) } } .promo-page-intro__legal { margin-top: 50px; } .shopify-payment-button { display: inline-block; } .shopify-payment-button__button { background: transparent; } .btn, .shopify-payment-button__button, .shopify-payment-button__button--unbranded { display: inline-block; cursor: pointer; color: #002452; color: var(--coronaBlue); background-color: transparent; font-family: 'FoundersGroteskCond-SmBd'; font-size: calc(20 / 16 * 1rem); font-size: calc(20 / var(--baseFontSize) * 1rem); letter-spacing: 0.24px; line-height: 1; text-transform: uppercase; text-align: center; padding: 10px 28px; border-radius: 40px; border: 2px solid #fdc338; border: 2px solid var(--coronaYellow); transition: .2s; } @media (min-width: 48em) { .btn, .shopify-payment-button__button, .shopify-payment-button__button--unbranded { padding: 12px 30px; font-size: calc(22 / 16 * 1rem); font-size: calc(22 / var(--baseFontSize) * 1rem) } } @media (hover: hover) { .btn, .shopify-payment-button__button, .shopify-payment-button__button--unbranded { border: 2px solid #fdc338; border: 2px solid var(--coronaYellow); transition: .2s } .btn:hover, .shopify-payment-button__button:hover, .shopify-payment-button__button--unbranded:hover { border: 2px solid #002452; border: 2px solid var(--coronaBlue); transition: .2s; } } .btn--submit { margin: 0 auto; } .btn--rev { color: #ffffff; transition: .2s; } @media (hover: hover) { .btn--rev:hover { border: 2px solid #ffffff; transition: .2s; } } .btn--rev-blue { position: relative; color: #ffffff; background-color: #002452; background-color: var(--coronaBlue); border: none; transition: .2s; } @media (hover: hover) { .btn--rev-blue:hover { border: none; transition: .2s; color: #002452; color: var(--coronaBlue); background-color: #fdc338; background-color: var(--coronaYellow); } } .btn--rev-blue:after { content: ''; position: absolute; top: -5px; left: -5px; width: calc(100% + 10px); height: calc(100% + 10px); border: 2px solid #fdc338; border: 2px solid var(--coronaYellow); border-radius: 32px; } .btn--hero.header__btn--hero { position: fixed; } .btn--hero { position: relative; width: 100%; background-color: #fdc338; background-color: var(--coronaYellow); font-size: calc(20 / 16 * 1rem); font-size: calc(20 / var(--baseFontSize) * 1rem); border: none; border-radius: 0; padding: 20px 23px; } @media (hover: hover) { .btn--hero:hover { background-color: #D89E00; } } @media (min-width: 75em) { .btn--hero { display: inline-block; border-radius: 32px; width: auto; padding: 13px 32px } } .btn--hero:after { content: ''; position: absolute; top: 4px; left: 4px; width: calc(100% - 8px); height: calc(100% - 8px); border: 2px solid #002452; border: 2px solid var(--coronaBlue); } @media (min-width: 75em) { .btn--hero:after { top: 3px; left: 3px; width: calc(100% - 6px); height: calc(100% - 6px); border-radius: 32px } } .btn--hero.mobile-hide { display: none; } @media (min-width: 75em) { .btn--hero.mobile-hide { display: inline-block } } .btn--hero.desktop-hide { display: block; } @media (min-width: 75em) { .btn--hero.desktop-hide { display: none } } .btn--hero:hover { border: none; } .btn--hero-inline { display: inline-block; padding: 15px 32px; width: auto; border-radius: 50px; } .btn--hero-inline:after { border-radius: 50px; } .btn--filters { padding: 15px 32px; } .btn--filters, .btn--filters:after { border-radius: 50px; } @media (min-width: 48em) { .btn--filters, .btn--filters:after { display: none } } .btn--print, .btn--print:after { border-radius: 50px; } .btn--print { max-width: 204px; margin: 0 auto; } @media (min-width: 48em) { .btn--print { margin: 0 } } @media (min-width: 64.0625em) { .btn--print.desktop-hide { display: none } } .oep-page-intro.cn-oep { width: 84%; max-width: 670px; margin: 0 auto; padding: 30px 0 0; text-align: left; } @media (min-width: 40em) { .oep-page-intro.cn-oep { width: 80%; padding: 55px 0 0; text-align: center } } @media (min-width: 64.0625em) { .oep-page-intro.cn-oep { padding: 70px 0 0 } } .oep-page-intro.cn-oep .oep-page-intro__head h1{ font-family: FoundersGroteskCond-SmBd,sans-serif; font-size:calc(56/16*1rem); font-size:calc(56/var(--baseFontSize)*1rem); text-transform:uppercase; margin-bottom:20px; } .oep-page-intro.cn-oep .oep-page-intro__copy p{ font-family: FoundersGroteskCond-Reg,sans-serif; font-size:calc(36/16*1rem); font-size:calc(36/var(--baseFontSize)*1rem); line-height: normal; margin-bottom:20px; } .oep-page-intro.cn-oep .btn.btn-oep{ padding: 12px 35px; font-size: calc(22/16*1rem); font-size: calc(22/var(--baseFontSize)*1rem); } /* @import 'components/product.css'; */ /* #preview-bar-iframe, .none { display: none !important; } */