/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}body{line-height:1;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-collapse:collapse;border-spacing:0;}
ul,ol{padding-inline-start:0;margin-block-start:0;margin-block-end:0;}
/*
css contents:
utility classes
color, font and size variables
color sections
basic font and text spacing styles
general page layouts
nav
secondary nav
header
footer
agegate
responsive video wrapper
cta button styles
image animation
hero section
page hero
page section template
page section headers
page section alternating-image-text
page section images-and-text
page section template cards
page section large-image
page section carousel
page section multi-column text
page section timeline
page section content
404 error page
contact us page
legal pages
sitemap page
brands page grid
brand pages (individual)
brange pages hero
brand pages product collection
brand pages assets section
brand pages links section
heritage brand page
news page grid
single news page
tasting room page
product locator page
*/
/* utility classes */
html{scroll-behavior: smooth;}
.nowrap{white-space:nowrap;}
.hidden{display:none;}
.screen-reader-only{clip:rect(1px,1px,1px,1px);height:1px;width:1px;overflow:hidden;position:absolute !important;}
.clearfix::after{content:'';display:table;clear:both;}
.stop-transitions * {transition:none !important;}
/* skip link */
.skip-to-main {
text-align: center;
}
.skip-to-main a:focus {
margin-top: 1em;
}
.skip-to-main a {
position: absolute;
left: var(--single-space);
z-index: 20;
text-align: center;
display: inline-block;
padding: var(--single-space);
margin-top: -4em;
cursor: pointer;
background: #fff;
}
@media (prefers-reduced-motion: no-preference) {
.skip-to-main a:focus {
-webkit-transition: margin .2s ease-in;
transition: margin .2s ease-in;
}
.skip-to-main a {
-webkit-transition: margin .2s ease-in-out;
transition: margin .2s ease-in-out;
}
}
/* forces short pages to fill full browser height */
@supports (top:0) { /* for non-ie browsers only */
.page-wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
justify-content: space-between;
}
}
/* fallbacks for browsers that don't support css variables */
body {
font-family: Arial, sans-serif;
}
body * {
box-sizing: border-box;
}
.page-wrapper {
overflow: hidden;
position: relative;
}
/* color, font and size variables */
:root {
--serif-font: psfournier-std-grand;
--sans-font: mundial;
--white: #fff;
--cream: #ebe8e5;
--light-warm-gray: #e1ddd8;
--warm-gray: #d7d2cb;
--highlight: #b9965f;
--highlight-text: #a47c39;
--dark-warm-gray: #968C83;
--mid-gray: #69645D;
--light-blue: #b0ccd1;
--dark-blue: #002439;
--black: #101820;
--half-space: .5rem;
--single-space: 1rem;
--mid-space: 1.5rem;
--double-space: 2rem;
--triple-space: 3rem;
--quad-space: 4rem;
--max-width-full: 120rem;
--max-width-inset: 116rem;
--narrow-max-width: 56.25rem;
}
body {
font-family: var(--sans-font), sans-serif;
}
/* color sections */
/* change color class names to describe actual color choices */
/* then copy to themes settings color section */
body,
.light,
.light-cream,
.light-gray,
.warm-gray {
color: var(--mid-gray);
}
body,
.light {
background-color: var(--white);
}
.light-cream {
background-color: var(--cream);
}
.light-gray {
background-color: var(--light-warm-gray);
}
.warm-gray {
background-color: var(--warm-gray);
}
.dark,
.dark-blue {
color: var(--white);
}
.dark {
background-color: var(--black);
}
.dark-blue {
background-color: var(--dark-blue);
}
.highlight {
color: var(--highlight);
}
a {
color: inherit;
transition: color .3s ease-in-out;
}
a:active, a:focus, a:hover {
color: var(--highlight);
}
.dark-blue a {
color: var(--highlight);
}
.dark-blue a:active, .dark-blue a:focus, .dark-blue a:hover {
color: var(--white);
}
/* basic font and text spacing styles */
p, ul, ol, dl, h5, h6 {
font-family: var(--sans-font), sans-serif;
font-size: 16px;
font-size: 1rem;
font-weight: 300;
letter-spacing: .015em;
line-height: 1.75;
}
.dark p, .dark ul, .dark ol, .dark dl, .dark h5, .dark h6,
.dark-blue p, .dark-blue ul, .dark-blue ol, .dark-blue dl, .dark-blue h5, .dark-blue h6 {
font-weight: 300;
}
strong {
font-weight: 400;
}
em {
font-style: italic;
}
h1, h2, h3, h4 {
font-family: var(--serif-font), serif;
font-weight: 300;
letter-spacing: .01em;
line-height: 1.3;
color: var(--black);
}
.dark h1, .dark h2, .dark h3, .dark h4,
.dark-blue h1, .dark-blue h2, .dark-blue h3, .dark-blue h4 {
color: var(--white);
}
h1, .first-head {
font-size: 30px;
font-size: 1.875rem;
}
h2, .second-head {
font-size: 26px;
font-size: 1.625rem;
}
h3, .third-head,
.tfelegal ol li::marker {
font-size: 22px;
font-size: 1.375rem;
}
h4, .fourth-head, .intro-text {
font-size: 18px;
font-size: 1.125rem;
}
h5, .fifth-head {
font-family: var(--sans-font), sans-serif;
font-size: 16px;
font-size: 1rem;
font-weight: 300;
letter-spacing: .04em;
}
/* Set width-related headline sizes for narrowest browser widths */
@media only screen and (max-width:24em) {
p, ul, ol, dl { font-size: .9375rem; }
h1, .first-head { font-size: 9vw; }
h2, .second-head { font-size: 7vw; }
h3, .third-head, .tfelegal ol li::marker { font-size: 5vw; }
}
h1, h2, h3, h4, p, ul, ol, dl {
margin-bottom: 16px;
margin-bottom: var(--single-space);
}
p:last-child, ul:last-child, ol:last-child, li:last-child, dl:last-child {
margin-bottom: var(--half-space);
}
li:last-child {
margin-bottom: 0;
}
img {
max-width: 100%;
height: auto;
}
ul.bullet li,
ol.number li,
ol.lowercase li,
ol.uppercase li,
.news-content ul li,
.content ul li {
padding-left: 8px;
padding-left: var(--half-space);
margin-left: 24px;
margin-left: var(--mid-space);
margin-bottom: 8px;
margin-bottom: var(--half-space);
}
ul.bullet li:last-of-type,
ol.number li:last-of-type,
ol.lowercase li:last-of-type,
ol.uppercase li:last-of-type,
.news-content ul li:last-of-type,
.content ul li:last-of-type {
margin-bottom: 0;
}
ul.bullet li,
.news-content ul li,
.content ul li {
list-style: disc;
}
ol.number {
list-style: decimal;
}
ol.lowercase {
list-style: lower-alpha;
}
ol.uppercase {
list-style: upper-alpha;
}
@media only screen and (min-width:37.25em) {
h1, .first-head {
font-size: 3rem;
}
h2, .second-head {
font-size: 2.5rem;
}
h3, .third-head,
.tfelegal ol li::marker {
font-size: 2rem;
}
h4, .fourth-head, .intro-text {
font-size: 1.5rem;
}
h5, .fifth-head {
font-size: 1.125rem;
}
}
@media only screen and (min-width:56.25em) {
p, ul, ol, dl, h6 {
font-weight: 200;
}
h1, .first-head {
font-size: 4rem;
}
h2, .second-head {
font-size: 3.25rem;
}
h3, .third-head,
.tfelegal ol li::marker {
font-size: 2.5rem;
}
h4, .fourth-head, .intro-text {
font-size: 1.75rem;
}
h5, .fifth-head {
font-size: 1.25rem;
}
}
/* general page layouts */
header {
position: absolute;
width: 100%;
z-index: 10;
background: transparent;
}
header.dark,
header.dark a {
background-color: transparent;
}
main {
/* for background darkening when nav open */
position: relative;
}
.content {
margin: 0 auto;
padding: var(--double-space) var(--single-space);
max-width: var(--max-width-full);
position: relative;
}
/* manual top padding for brand pages */
.main section .page-section.add-padding .content,
.main section.page-section.add-padding .content {
padding-top: var(--double-space);
}
@media only screen and (min-width: 37.5em){
.content {
padding: var(--triple-space) var(--single-space);
}
.main section .page-section.add-padding .content,
.main section.page-section.add-padding .content {
padding-top: var(--triple-space);
}
}
@media only screen and (min-width: 56.25em){
.content {
padding: var(--quad-space) var(--double-space);
}
.main section .page-section.add-padding .content,
.main section.page-section.add-padding .content {
padding-top: var(--quad-space);
}
}
.light + .light .content {
padding-top: 0;
}
.full-width .content,
.wide .content {
width: 100%;
padding-left: 0;
padding-right: 0;
}
.full-width .content {
max-width: 100%;
}
.wide .content {
max-width: var(--max-width-inset);
}
.narrow-width .content {
max-width: var(--narrow-max-width);
}
/* header */
.header-content {
position: relative;
display: flex;
align-items: flex-start;
padding: var(--single-space);
width: 100%;
margin: 0 auto;
}
.header-logo-link {
display: inline-block;
position: relative;
z-index: 11;
width: 13em;
max-width: 50%;
}
a:active .logo-link,
a:focus .logo-link,
a:hover .logo-link {
transform: scale(1.03);
}
@media (prefers-reduced-motion: no-preference) {
.logo-link {
transition: transform .4s ease-in-out;
}
a:active .logo-link,
a:focus .logo-link,
a:hover .logo-link {
transition: transform .4s ease-in-out;
}
}
.header a {
text-decoration: none;
}
.header a:active, .header a:focus, .header a:hover {
text-decoration: underline;
}
@media only screen and (min-width: 56.25em) {
.header-content {
padding: var(--double-space);
}
}
/* nav mobile / hamburger */
.nav-toggle,
.no-js .nav-chk-label {
position: absolute;
top: 1.5em;
right: 1em;
z-index: 5;
font-size: 1rem;
background: 0 0;
border: none;
padding: .375em 0;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: end;
height: 1.75em;
width: 1.75em;
}
.nav-toggle .bar,
.no-js .nav-chk-label .bar {
height: .125em;
width: 100%;
background-color: var(--dark-blue);
}
@media (prefers-reduced-motion: no-preference) {
.nav-toggle,
.no-js .nav-chk-label {
transition: all 500ms ease;
}
.nav-toggle .bar,
.no-js .nav-chk-label .bar {
transition: all 300ms ease;
}
}
.dark .nav-toggle .bar,
.no-js .dark .nav-chk-label .bar {
background-color: var(--white);
}
.nav-toggle .bar:nth-of-type(3),
.no-js .nav-chk-label .bar:nth-of-type(3) {
width: 67%;
}
.nav-toggle:hover .bar:nth-of-type(3),
.no-js .nav-chk-label:hover .bar:nth-of-type(3) {
width: 100%;
}
.nav-toggle:hover {
cursor: pointer;
}
#body.nav-open {
overflow: hidden;
}
.nav-open .header-content {
height: 100vh;
}
.menu-open .nav-toggle .bar:nth-of-type(1),
.no-js .nav-chk:checked ~ .nav-chk-label .bar:nth-of-type(1) {
transform: rotate(45deg);
transform-origin: top left;
width: 1.3125em;
}
.menu-open .nav-toggle .bar:nth-of-type(2),
.no-js .nav-chk:checked ~ .nav-chk-label .bar:nth-of-type(2) {
transform-origin: center;
width: 0;
}
.menu-open .nav-toggle .bar:nth-of-type(3),
.no-js .nav-chk:checked ~ .nav-chk-label .bar:nth-of-type(3) {
transform: rotate(-45deg);
transform-origin: bottom left;
width: 1.3125em;
}
@media (prefers-reduced-motion: no-preference) {
.menu-open .nav-toggle .bar:nth-of-type(1),
.no-js .nav-chk:checked ~ .nav-chk-label .bar:nth-of-type(1) {
transition: all 500ms ease;
}
.menu-open .nav-toggle .bar:nth-of-type(2),
.no-js .nav-chk:checked ~ .nav-chk-label .bar:nth-of-type(2) {
transition: all 100ms ease;
}
.menu-open .nav-toggle .bar:nth-of-type(3),
.no-js .nav-chk:checked ~ .nav-chk-label .bar:nth-of-type(3) {
transition: all 100ms ease;
}
}
.menu-open .nav-toggle:hover,
.no-js .nav-chk:checked ~ .nav-chk-label:hover {
transform: scale(1.1)
}
.site-navigation {
width: 100%;
position: absolute;
top: 0;
right: 0;
text-align: left;
padding: 0 .5em .5em;
z-index: 8;
}
.site-navigation .menu-main-menu-wrapper {
position: absolute;
right: -100%;
top: 0;
z-index: 2;
width: 100%;
min-height: 100vh;
padding: 5em 1em 1.5em;
background-color: var(--dark-blue);
overflow-x: hidden;
}
@media (prefers-reduced-motion: no-preference) {
.site-navigation .menu-main-menu-wrapper {
-webkit-transition: all .5s ease-out;
transition: all .5s ease-out;
}
}
.site-navigation.menu-open {
overflow-y: auto;
height: 100vh;
}
.site-navigation.menu-open .menu-main-menu-wrapper,
.no-js .nav-chk:checked ~ .menu-main-menu-wrapper {
right: 0;
}
@media (prefers-reduced-motion: no-preference) {
.site-navigation.menu-open .menu-main-menu-wrapper,
.no-js .nav-chk:checked ~ .menu-main-menu-wrapper {
transition: right .5s ease-in;
}
}
.social-icons {
margin-bottom: .5em;
}
.no-js .nav-toggle {
display: none;
}
.no-js .nav-chk-label {
display: flex;
}
@media only screen and (min-width: 56.25em) {
.nav-toggle,
.no-js .nav-chk-label {
top: 2em;
right: 1.75em;
}
}
/* general nav link styles */
.header .logo-svg {
transition: fill .3s ease-in-out;
}
.header.dark .logo-svg {
fill: var(--white);
}
.header.light .logo-svg {
fill: var(--black);
}
.home .header .logo-link {
display: none;
}
.header .menu ul,
.header .menu li {
margin: 0;
}
.header .menu {
border-bottom: 1px solid var(--dark-blue);
}
.header .menu > li {
border-top: 1px solid var(--dark-blue);
overflow: hidden;
}
.header .menu a {
display: flex;
justify-content: space-between;
font-size: .875rem;
font-weight: 300;
padding: var(--single-space) 0;
text-decoration: none;
}
.header .menu .external a {
justify-content: start;
align-items: center;
}
.header .menu a .carat,
.header .menu a .external-link {
stroke: var(--highlight);
}
.header .menu a .carat {
position: relative;
top: .475em;
right: .25em;
transform: rotate(90deg);
}
@media (prefers-reduced-motion: no-preference) {
.header .menu a .carat {
transition: transform .4s ease-in-out;
}
}
.header .menu a.open .carat {
transform: rotate(-90deg);
}
.header .menu a .external-link {
height: .75em;
margin-left: .25em;
margin-top: .25em;
bottom: .05em;
position: relative;
}
.header .sub-menu,
.header .sub-menu li {
overflow: hidden;
}
.header .sub-menu li {
height: 0;
opacity: 0;
display: flex;
align-items: center;
color: var(--light-blue);
}
@media (prefers-reduced-motion: no-preference) {
.header .sub-menu li {
transition: all .4s ease-in-out;
}
}
.header .sub-menu a {
width: 100%;
padding: var(--single-space);
}
.header .open ~ .sub-menu {
padding-bottom: var(--single-space);
}
.header .open ~ .sub-menu li,
.no-js .header .sub-menu li {
height: 3em;
opacity: 1;
}
.no-js .menu-item-has-children > a {
pointer-events: none;
cursor: default;
}
.nav-chk {
display: none;
}
.no-js .header .menu a .carat {
display: none;
}
@media only screen and ( min-width: 56.25em ) {
.site-navigation .menu-main-menu-wrapper {
width: 50%;
right: -50%;
padding: 5em 2em 2.5em;
}
}
/* nav desktop - see dynamic css file */
/* footer */
.footer-content {
padding: var(--mid-space) var(--single-space);
width: 100%;
max-width: var(--max-width);
margin: 0 auto;
text-align: center;
display: flex;
flex-wrap: wrap;
flex-direction: column;
gap: var(--single-space);
}
.footer a {
text-decoration: none;
color: var(--white);
transition: color .4s ease-in-out;
}
.footer a:active,
.footer a:focus,
.footer a:hover {
color: var(--highlight);
}
.footer-logo-link .logo-link {
width: 13em;
max-width: 50%;
margin: 2em auto;
}
.footer-logo-link .logo-link .logo-svg {
fill: var(--highlight);
}
.footer .menu {
margin-bottom: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: .75em;
}
.footer .menu li {
margin: 0;
width: 100%;
font-size: .875rem;
}
.footer .menu a {
padding: 0;
}
.footer .menu .external-link,
.footer .menu .carat,
.footer .more .carat {
stroke: var(--white);
}
.footer .menu a:active > .external-link,
.footer .menu a:focus > .external-link,
.footer .menu a:hover > .external-link,
.footer .more:active > .carat,
.footer .more:focus > .carat,
.footer .more:hover > .carat {
stroke: var(--highlight);
}
.footer .external-link {
margin-left: .25em;
}
button.more {
background: transparent;
border: none;
color: var(--white);
font-family: var(--sans-font), sans-serif;
font-size: .875rem;
font-weight: 300;
padding: 0;
margin: 0;
display: block;
width: 100%;
text-align: center;
cursor: pointer;
}
button.more:active,
button.more:focus,
button.more:hover {
color: var(--highlight);
transition: all .4s ease-in-out;
}
.footer .more .carat {
position: relative;
height: .75em;
top: .175em;
stroke-width: 2px;
transform: rotate(90deg);
}
.footer .more.open .carat {
transform: rotate(-90deg);
}
.footer-nav-secondary {
margin: 1.125em auto 2.5em;
}
.footer-nav-secondary .menu {
overflow: hidden;
gap: 0;
}
.footer-nav-secondary .menu li {
height: 0;
opacity: 0;
display: flex;
justify-content: center;
align-items: flex-end;
}
@media (prefers-reduced-motion: no-preference) {
.footer .more .carat,
.footer-nav-secondary .menu li {
transition: all .4s ease-in-out;
}
}
.more.open ~ .menu-footer-secondary-menu-container .menu li {
height: 2.625em;
opacity: 1;
}
.footer .footer-nav-main li,
.footer .footer-nav-main a,
.footer .footer-nav-secondary li,
.footer .footer-nav-secondary a,
.footer-copyright,
.footer-nav-legal .menu li,
.footer-nav-legal .menu a {
font-family: var(--sans-font), sans-serif;
font-size: .875rem;
letter-spacing: .025em;
font-weight: 300;
position: relative;
}
.footer .footer-nav-main a::before,
.footer .footer-nav-secondary a::before,
.footer-nav-legal .menu a::before {
content: "";
position: absolute;
display: block;
width: 100%;
height: 1px;
bottom: 0;
left: 0;
background-color: var(--dark-blue);
transform: scaleX(0);
}
@media (prefers-reduced-motion: no-preference) {
.footer .footer-nav-main a::before,
.footer .footer-nav-secondary a::before,
.footer-nav-legal .menu a::before {
transition: all 0.3s ease;
}
}
.footer .footer-nav-main a:active::before, .footer .footer-nav-main a:focus::before, .footer .footer-nav-main a:hover::before,
.footer .footer-nav-secondary a:active::before, .footer .footer-nav-secondary a:focus::before, .footer .footer-nav-secondary a:hover::before,
.footer-nav-legal .menu a:active::before, .footer-nav-legal .menu a:focus::before, .footer-nav-legal .menu a:hover::before {
transform: scaleX(1);
background-color: var(--highlight);
}
.footer .footer-nav-secondary a .external-link {
height: .625em;
}
.footer-rule {
width: 100%;
margin-top: 1.5em;
border-top: 1px solid rgba(255, 255, 255, .3);
padding-top: 1.5em;
}
.footer-copyright,
.footer-nav-legal .menu a {
font-size: .6875rem;
}
.footer-copyright {
line-height: 1.75;
}
.footer-copyright .enjoy {
display: block;
}
.footer-nav-legal .menu {
margin-top: 2em;
column-gap: var(--double-space);
}
.footer-nav-legal .menu li {
width: auto;
}
@media only screen and ( min-width: 37.5em ) {
.footer-nav {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(6, auto);
}
.footer-logo-link,
.footer-rule,
.footer-copyright,
.footer-nav-legal {
grid-column: 1 / span 2;
}
.footer-logo-link {
grid-row: 1 / span 1;
}
.footer .menu {
display: flex;
text-align: left;
}
.footer-nav-main {
grid-column: 1 / span 1;
grid-row: 2 / span 2;
}
.footer-nav-secondary {
margin: 0 0 1em;
grid-column: 2 / span 1;
grid-row: 2 / span 1;
}
.footer-nav-secondary .menu {
gap: .75em;
}
.footer-nav-secondary .menu li {
height: auto;
opacity: 1;
justify-content: flex-start;
align-items: flex-start;
}
.footer button.more {
display: none;
}
.social-icon-wrapper {
grid-column: 2 / span 1;
grid-row: 3 / span 1;
}
.social-icon-wrapper .social-links {
text-align: left;
}
.footer-rule {
grid-row: 4 / span 1;
margin-top: 2.5em;
}
.footer-copyright {
grid-row: 5 / span 1;
}
.footer-nav-legal {
grid-row: 6 / span 1;
}
.footer-nav-legal .menu {
margin-top: 1em;
gap: 0;
}
.dot::before,
.footer-nav-legal .menu li + li::before {
content: "•";
font-size: .75em;
color: var(--highlight);
padding: 0 2em;
}
.dot::before {
margin-left: -.25em;
}
.footer-copyright .enjoy {
display: inline;
}
}
@media only screen and ( min-width: 56.25em ) {
.footer-content {
padding: 4em var(--double-space) var(--double-space);
}
.footer-nav {
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(5, auto);
}
.footer-logo-link {
grid-column: 1 / span 3;
grid-row: 1 / span 1;
}
.footer-logo-link .logo-link {
margin: .5em 0;
max-width: 100%;
}
.footer-nav-main {
grid-column: 6 / span 3;
grid-row: 1 / span 2;
}
.footer-nav-secondary,
.social-icon-wrapper {
grid-column: 10 / span 3;
}
.footer-nav-secondary {
grid-row: 1 / span 1;
}
.social-icon-wrapper {
grid-row: 2 / span 1;
}
.footer-rule,
.footer-copyright,
.footer-nav-legal {
grid-column: 1 / span 12;
}
.footer-rule {
grid-row: 3 / span 1;
}
.footer-copyright {
grid-row: 4 / span 1;
}
.footer-nav-legal {
grid-row: 5 / span 1;
}
}
@media only screen and ( min-width: 75em ) {
.footer-content {
padding-top: 6em;
}
.footer-nav {
grid-template-rows: repeat(4, auto);
}
.footer-nav-main {
grid-column: 8 / span 2;
}
.footer-nav-secondary,
.social-icon-wrapper {
grid-column: 11 / span 2;
}
.footer-rule {
margin-top: 6em;
}
.footer-copyright {
text-align: left;
grid-row: 4 / span 1;
grid-column: 1 / span 5;
}
.footer-nav-legal {
grid-row: 4 / span 1;
grid-column: 6 / span 7;
justify-content: end;
}
.footer-nav-legal .menu {
justify-content: flex-end;
margin-top: 0;
}
}
/* social links */
.social-links,
.social-links li {
margin-bottom: 0;
}
.social-icon-wrapper li {
display: inline-block;
}
.social-icon-wrapper li + li {
margin-left: var(--double-space);
}
a.social-icon {
display: inline-block;
text-decoration: none;
transition: color .4s ease-in-out;
font-size: 1rem;
}
.social-icon::before {
display: inline-block;
font-family: "Font Awesome 6 Brands";
font-style: normal;
font-variant: normal;
text-rendering: auto;
font-weight: 400;
font-size: 1.5em;
line-height: 1;
padding-top: .2em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.social-contact::before {
font-family: "Font Awesome 6 Free";
content: "\f0e0";
}
.social-facebook::before {
content: "\f39e";
}
.social-instagram::before {
content: "\f16d";
}
.social-linkedin::before {
content: "\f08c";
}
.social-spotify::before {
content: "\f1bc";
}
.social-twitter::before {
content: "\f099";
}
.social-pinterest::before {
content: "\f0d2";
}
.social-tiktok::before {
content: "\e07b";
}
.social-youtube::before {
content: "\f167";
}
.social-vimeo::before {
content: "\f40a";
}
@media only screen and ( min-width: 56.25em) {
.social-icon-wrapper li + li {
margin-left: var(--single-space);
}
}
/* agegate */
.tfe-agegate {
flex-direction: column;
justify-content: center;
align-items: center;
}
.tfe-agegate-dialog {
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
text-align: center;
background-color: var(--light-warm-gray);
padding: 2em 1em;
width: 85.71%;
}
.tfe-agegate-image,
.tfe-agegate p {
margin: 0 auto;
}
.tfe-agegate-image {
width: 67%;
padding: 1em 0;
}
.tfe-agegate p {
color: var(--black);
font-family: var(--serif-font);
padding: 0 0 1.5em;
font-size: 1.25em;
margin-top: 0;
}
.dark .tfe-enter.cta {
color: var(--black);
}
.dark .tfe-enter.cta:hover,
.dark .tfe-enter.cta:focus,
.dark .tfe-enter.cta:active {
color: var(--highlight);
}
.tfe-enter,
.tfe-enter:active,
.tfe-enter:focus,
.tfe-enter:hover {
background: transparent;
}
@media only screen and (min-width: 40em) {
.tfe-agegate-dialog {
width: 24em;
aspect-ratio: 1 / 1;
padding: 2em;
}
}
@media only screen and (min-width: 56.25em){
.tfe-agegate-dialog {
width: 28em;
}
.tfe-agegate p {
padding: 0 15% 1em;
}
.tfe-enter {
position: static;
}
}
/* responsive video wrapper */
.video-wrapper {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.5%;
/* padding-bottom: calc((100% + 26px)*.565); */
}
.video-wrapper > iframe,
.video-wrapper > div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* cta button and link styles */
/* link styles */
.link-wrap a,
a.link {
position: relative;
display: inline-block;
text-decoration: none;
transition: all .4s ease-in-out;
}
.link-wrap a::before,
a.link::before {
content: "";
position: absolute;
display: block;
width: 100%;
height: 1px;
bottom: 1px;
left: 0;
background-color: var(--black);
transition: all 0.3s ease;
}
.link-wrap a:hover::before,
.link-wrap a:focus::before,
.link-wrap a:active::before,
a.link:hover::before,
a.link:focus::before,
a.link:active::before {
background-color: var(--highlight);
}
/* cta button-style link */
.cta {
display: inline-block;
font-family: var(--serif-font), serif;
font-weight: 300;
font-size: 1rem;
letter-spacing: 0.02em;
color: var(--black);
padding: 0.375em .75em 0.625em 1em;
text-decoration: none;
transition: all .4s ease-in-out;
border-left: 1px solid;
border-bottom: 1px solid;
}
.dark .cta,
.cta.dark {
color: var(--white);
}
.cta:active,
.cta:focus,
.cta:hover {
color: var(--highlight);
}
.cta .external-link,
a .external-link {
stroke: var(--black);
}
.dark .cta .external-link,
.cta.dark .external-link,
.dark a .external-link,
a.dark .external-link {
stroke: var(--white);
}
.cta .external-link,
a .external-link {
height: .575em;
margin-left: .0625em;
margin-bottom: -.0625em;
transition: all .4s ease-in-out;
}
a .external-link {
transition: all .3s ease-in-out;
}
.cta:active .external-link,
.cta:focus .external-link,
.cta:hover .external-link,
a:active .external-link,
a:focus .external-link,
a:hover .external-link {
stroke: var(--highlight);
}
.dark-blue .cta,
.cta.highlight {
color: var(--highlight);
}
.dark-blue .cta .external-link,
.cta.highlight .external-link{
stroke: var(--highlight);
}
.dark-blue .cta:active,
.dark-blue .cta:focus,
.dark-blue .cta:hover,
.cta.highlight:active,
.cta.highlight:focus,
.cta.highlight:hover {
color: var(--white);
}
.dark-blue .cta:active .external-link,
.dark-blue .cta:focus .external-link,
.dark-blue .cta:hover .external-link,
.cta.highlight:active .external-link,
.cta.highlight:focus .external-link,
.cta.highlight:hover .external-link {
stroke: var(--white);
}
.download .external-link {
transform: rotate(135deg);
margin-bottom: .125em;
}
.carat {
display: inline-block;
margin-left: .25em;
height: 1em;
width: auto;
color: var(--black);
}
@media prefers-reduced-motion: no-preference {
.carat {
transition: all .4s ease-in-out;
}
}
@media only screen and (min-width: 37.5em) {
.cta {
/* font-size: 1.125rem; */
}
}
@media only screen and (min-width: 56.25em) {
.cta {
font-size: 1.125rem;
}
}
.basic-content {
max-width: var(--narrow-max-width);
margin: 0 auto;
min-height: calc(100vh - 16em);
display: flex;
align-items: center;
flex-wrap: wrap;
}
@media only screen and (min-width: 37.5em) {
.basic-content {
min-height: calc(100vh - 20em);
}
}
@media only screen and (min-width: 56.25em) {
.basic-content {
min-height: calc(100vh - 24em);
}
}
/* general text block styles */
.display-text p,
.display-text h2,
.small-display-text p {
font-family: var(--serif-font), serif;
font-size: 1.625rem;
font-weight: 300;
line-height: 1.3;
letter-spacing: .01em;
max-width: 24em;
color: var(--black);
}
.display-text p:last-child {
margin-bottom: 0;
}
.small-display-text p {
font-size: 1.125rem;
line-height: 1.4;
color: var(--mid-gray);
}
.display-text a {
text-decoration: none;
border-bottom: 1px solid;
}
.display-text + .cta-wrap {
margin-top: var(--mid-space);
}
.dark .display-text p,
.dark .display-text h2,
.dark .small-display-text p,
.dark-blue .display-text p,
.dark-blue .display-text h2,
.dark-blue .small-display-text p {
color: var(--white);
}
@media only screen and (min-width: 37.5em) {
.display-text p,
.display-text h2 {
font-size: 1.875rem;
}
.small-display-text p {
font-size: 1.25rem;
}
}
@media only screen and (min-width: 56.25em) {
.display-text p,
.display-text h2 {
font-size: 2.75rem;
}
.small-display-text p {
font-size: 1.5rem;
}
.display-text + .cta-wrap {
margin-top: var(--triple-space);
}
}
/* image animation */
@media (prefers-reduced-motion: no-preference) {
#body.animate .fade-in {
opacity: 0.01;
transform: scale(.975) translateY(.75rem);
transition: all 1s ease-out;
}
#body.animate .fade-in.faded-in {
opacity: 1;
transform: scale(1) translateY(0);
}
}
/* hero section */
section.page-hero {
position: relative;
display: flex;
max-width: 100%;
min-height: 16em;
max-height: 32em;
aspect-ratio: 5 / 3;
}
.page-hero img {
object-fit: cover;
width: 100%;
min-height: 100%;
}
@supports (-webkit-touch-callout: none) {
/* CSS specific to iOS devices */
.page-hero img {
height: 100%;
}
}
.page-hero .hero-content {
position: absolute;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
background: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, 0), rgba(0, 0, 0, .6));
display: flex;
justify-content: center;
align-items: flex-end;
padding: 1.5em 1rem;
}
.page-hero .hero-content.no-image {
background: none;
}
.page-hero .hero-content h1 {
text-align: center;
}
@media only screen and ( min-width: 37.5em) {
section.page-hero {
min-height: 20em;
aspect-ratio: 14 / 6;
}
}
@media only screen and ( min-width: 56.25em) {
section.page-hero {
min-height: 24em;
aspect-ratio: auto;
}
.page-hero .hero-content {
padding: 1.75em 2rem;
}
}
/* page home */
section.page-hero.home-hero {
min-height: 80vh;
max-height: unset;
overflow: hidden;
justify-content: center;
position: relative;
}
.hero-media .hero-image-wrapper,
.hero-media .hero-image,
.hero-media .hero-image img,
.hero-media .hero-video-wrapper {
height: 100%;
width: 100%;
object-fit: cover;
object-position: center;
}
.hero-media .hero-video-wrapper {
display: none;
position: absolute;
top: 0;
left: 0;
}
@media (prefers-reduced-motion: no-preference) {
.hero-media .hero-video-wrapper {
display: block;
}
}
.hero-video {
position: relative;
display: flex;
justify-content: center;
height: 100%;
}
.hero-video iframe {
width: auto;
height: 100%;
aspect-ratio: 16 / 9;
top: 0;
left: 0;
}
.video-button {
position: absolute;
z-index: 5;
bottom: 1em;
right: 1em;
display: flex;
align-items: center;
justify-content: center;
height: 2em;
width: 3em;
border: 0;
border-radius: .125em;
background: var(--highlight);
margin-left: 2em;
cursor: pointer;
}
.video-button .video-button-control {
display: block;
width: .75em;
height: .75em;
border-color: transparent transparent transparent var(--mid-gray);
border-style: double;
border-width: 0 0 0 .75em;
transition: all .2s ease-in-out;
}
.video-button.play .video-button-control {
border-style: solid;
border-width: .5em 0 .5em 1em;
}
@media only screen and ( min-width: 56.25em ) {
.video-button {
bottom: 2em;
right: 2em;
}
}
.page-hero.home-hero .hero-content {
align-items: center;
background: linear-gradient( rgba(0, 0, 0, .6) 50%, rgba(0, 0, 0, 0) 100%);
}
.home-hero .hero-content h1 {
display: flex;
justify-content: center;
font-size: 1rem;
margin: 0;
padding-bottom: 2em;
}
.home-hero .hero-content .light-logo {
width: 85%;
max-width: 20em;
}
@media only screen and (min-width: 37.5em) {
.home-hero .hero-content .light-logo {
max-width: 28em;
}
}
@media only screen and (min-width: 56.25em) {
.home-hero .hero-content h1 {
width: 36em;
}
.home-hero .hero-content .light-logo {
max-width: 36em;
}
}
/* page section template */
.page-section-wrapper section {
padding: var(--single-space);
max-width: var(--max-width);
margin: 0 auto;
}
.page-section-wrapper section.full-width {
padding: 0;
}
.page-section p + .cta-wrap {
margin-top: var(--single-space);
}
.page-section .display-text p + .cta-wrap {
margin-top: var(--double-space);
}
.cta-left .cta-wrap {
text-align: left;
}
.cta-center .cta-wrap {
text-align: center;
}
.cta-right .cta-wrap {
text-align: right;
}
@media only screen and (min-width: 56em) {
.page-section-wrapper section {
padding: var(--double-space);
}
}
/* page section headers */
.page-section-header {
text-align: center;
margin: 0 auto;
max-width: 56.25em;
padding-bottom: var(--single-space);
}
.page-section-header *:last-child {
margin-bottom: 0;
}
@media only screen and (min-width: 56em) {
.page-section-header {
padding-bottom: var(--double-space);
}
}
/* page section alternating-image-text */
.alt-image-text-rows,
.alt-image-text-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
gap: var(--double-space);
}
.alt-image-text-row > * {
flex: 100%;
}
.alt-image-text-row .alt-img-wrap {
display: flex;
justify-content: center;
align-items: center;
}
.alt-image-text-row .alt-img-wrap {
display: flex;
justify-content: center;
}
.alt-image-text-row .alt-img {
display: flex;
background-color: var(--cream);
max-width: 24em;
height: auto;
}
.alt-image-text-row .alt-text-wrap {
display: flex;
justify-content: center;
align-content: center;
}
.alt-image-text-row:first-of-type .alt-img-wrap,
.alt-image-text-row:nth-of-type(odd):not(.image-left) + .alt-image-text-row.image-right .alt-img-wrap,
.alt-image-text-row.image-right + .alt-image-text-row:nth-of-type(odd):not(.image-left) .alt-img-wrap,
.alt-image-text-row:nth-of-type(even):not(.image-right) + .alt-image-text-row.image-left .alt-img-wrap,
.alt-image-text-row.image-left + .alt-image-text-row:nth-of-type(even):not(.image-right) .alt-img-wrap {
border-top: none;
}
.alt-image-text-row .alt-text {
max-width: 36em;
}
@media only screen and (min-width: 46.875em) {
.alt-image-text-rows,
.alt-image-text-row {
column-gap: var(--quad-space);
}
.connecting-lines .alt-image-text-rows,
.connecting-lines .alt-image-text-row {
gap: 0;
}
.alt-image-text-row > * {
flex: 0 0 calc(50% - var(--double-space) );
}
.connecting-lines .alt-image-text-row > * {
flex: 0 0 50%;
}
.connecting-lines .alt-image-text-row:nth-of-type(odd) > * {
justify-content: flex-end;
}
.connecting-lines .alt-image-text-row:nth-of-type(even) > * {
justify-content: flex-start;
}
.connecting-lines .alt-image-text-row.image-right > * {
justify-content: flex-end;
}
.connecting-lines .alt-image-text-row.image-left > * {
justify-content: flex-start;
}
.connecting-lines .alt-image-text-row:nth-of-type(even) {
margin-left: -1px;
margin-right: 1px;
}
.connecting-lines .alt-image-text-row:nth-of-type(odd) {
margin-left: 0;
margin-right: 0;
}
.connecting-lines .alt-image-text-row.image-left {
margin-left: -1px;
margin-right: 1px;
}
.connecting-lines .alt-image-text-row.image-right {
margin-left: 0;
margin-right: 0;
}
.connecting-lines .alt-image-text-row:nth-of-type(odd) .alt-text-wrap {
padding-right: var(--single-space);
border-right: 1px solid var(--highlight);
}
.connecting-lines .alt-image-text-row:nth-of-type(even) .alt-text-wrap {
padding-left: var(--single-space);
border-left: 1px solid var(--highlight);
}
.connecting-lines .alt-image-text-row.image-right .alt-text-wrap {
padding-left: 0;
border-left: none;
padding-right: var(--single-space);
border-right: 1px solid var(--highlight);
}
.connecting-lines .alt-image-text-row.image-left .alt-text-wrap {
padding-right: 0;
border-right: none;
padding-left: var(--single-space);
border-left: 1px solid var(--highlight);
}
.connecting-lines .alt-image-text-row .alt-img-wrap .alt-img {
width: calc(100% - var(--double-space));
}
.connecting-lines .alt-image-text-row .alt-img-wrap,
.connecting-lines .alt-image-text-row .alt-text-wrap {
align-items: start;
padding-top: var(--double-space);
padding-bottom: var(--double-space);
}
.connecting-lines .alt-image-text-row:first-of-type .alt-img-wrap,
.connecting-lines .alt-image-text-row:first-of-type .alt-text-wrap {
padding-top: 0;
}
.connecting-lines .alt-image-text-row:last-of-type .alt-img-wrap,
.connecting-lines .alt-image-text-row:last-of-type .alt-text-wrap {
padding-bottom: 0;
}
.alt-image-text-row .alt-text-wrap {
min-height: 100%;
align-items: center;
}
.alt-image-text-row:nth-of-type(odd),
.alt-image-text-row.image-right {
flex-direction: row-reverse;
}
.alt-image-text-row.image-left {
flex-direction: row;
}
.alt-image-text-row .alt-img {
max-width: unset;
}
.alt-image-text-row:nth-of-type(odd) .alt-text-wrap {
justify-content: flex-end;
}
.alt-image-text-row:nth-of-type(even) .alt-text-wrap {
justify-content: flex-start;
}
.alt-image-text-row.image-right .alt-text-wrap {
justify-content: flex-end;
}
.alt-image-text-row.image-left .alt-text-wrap {
justify-content: flex-start;
}
.connecting-lines .alt-image-text-row:nth-of-type(odd) .alt-text-wrap {
padding-right: 0;
}
.connecting-lines .alt-image-text-row:nth-of-type(even) .alt-text-wrap {
padding-left: 0;
}
.connecting-lines .alt-image-text-row.image-right .alt-text-wrap {
padding-right: 0;
}
.connecting-lines .alt-image-text-row.image-left .alt-text-wrap {
padding-left: 0;
}
.connecting-lines .alt-image-text-row .alt-title {
padding-bottom: var(--single-space);
border-bottom: 1px solid var(--highlight);
}
.connecting-lines .alt-image-text-row:nth-of-type(odd) .alt-title,
.connecting-lines .alt-image-text-row:nth-of-type(odd) .alt-text-content {
padding-right: var(--quad-space);
margin-right: -2rem;
}
.connecting-lines .alt-image-text-row:nth-of-type(even) .alt-title,
.connecting-lines .alt-image-text-row:nth-of-type(even) .alt-text-content {
padding-left: var(--quad-space);
margin-left: -2rem;
}
.connecting-lines .alt-image-text-row.image-right .alt-title,
.connecting-lines .alt-image-text-row.image-right .alt-text-content {
padding-left: 0;
margin-left: 0;
padding-right: var(--quad-space);
margin-right: -2rem;
}
.connecting-lines .alt-image-text-row.image-left .alt-title,
.connecting-lines .alt-image-text-row.image-left .alt-text-content {
padding-right: 0;
padding-left: var(--quad-space);
margin-left: -2rem;
}
}
@media only screen and (min-width: 75em) {
.alt-image-text-rows {
row-gap: var(--quad-space);
}
.regular-width.connecting-lines .alt-image-text-row .alt-img-wrap .alt-img {
width: calc(100% - var(--triple-space));
}
.regular-width.connecting-lines .alt-image-text-row .alt-img-wrap,
.regular-width.connecting-lines .alt-image-text-row .alt-text-wrap {
padding-top: var(--triple-space);
padding-bottom: var(--triple-space);
}
.connecting-lines .alt-image-text-row:first-of-type .alt-img-wrap,
.connecting-lines .alt-image-text-row:first-of-type .alt-text-wrap {
padding-top: 0;
}
.connecting-lines .alt-image-text-row:last-of-type .alt-img-wrap,
.connecting-lines .alt-image-text-row:last-of-type .alt-text-wrap {
padding-bottom: 0;
}
.regular-width.connecting-lines .alt-image-text-row:nth-of-type(odd) .alt-title,
.regular-width.connecting-lines .alt-image-text-row:nth-of-type(odd) .alt-text-content {
padding-left: 0;
margin-left: 0;
padding-right: 6rem;
margin-right: -3rem;
}
.regular-width.connecting-lines .alt-image-text-row:nth-of-type(even) .alt-title,
.regular-width.connecting-lines .alt-image-text-row:nth-of-type(even) .alt-text-content {
padding-right: 0;
padding-left: 6rem;
margin-left: -3rem;
}
.regular-width.connecting-lines .alt-image-text-row.image-right .alt-title,
.regular-width.connecting-lines .alt-image-text-row.image-right .alt-text-content {
padding-left: 0;
margin-left: 0;
padding-right: 6rem;
margin-right: -3rem;
}
.regular-width.connecting-lines .alt-image-text-row.image-left .alt-title,
.regular-width.connecting-lines .alt-image-text-row.image-left .alt-text-content {
padding-right: 0;
padding-left: 6rem;
margin-left: -3rem;
}
}
@media only screen and (min-width: 93.75em) {
.regular-width.connecting-lines .alt-image-text-row .alt-img-wrap .alt-img {
width: calc(100% - var(--quad-space));
}
.regular-width.connecting-lines .alt-image-text-row .alt-img-wrap,
.regular-width.connecting-lines .alt-image-text-row .alt-text-wrap {
padding-top: var(--quad-space);
padding-bottom: var(--quad-space);
}
.connecting-lines .alt-image-text-row:first-of-type .alt-img-wrap,
.connecting-lines .alt-image-text-row:first-of-type .alt-text-wrap {
padding-top: 0;
}
.connecting-lines .alt-image-text-row:last-of-type .alt-img-wrap,
.connecting-lines .alt-image-text-row:last-of-type .alt-text-wrap {
padding-bottom: 0;
}
.regular-width.connecting-lines .alt-image-text-row:nth-of-type(odd) .alt-title,
.regular-width.connecting-lines .alt-image-text-row:nth-of-type(odd) .alt-text-content {
padding-left: 0;
margin-left: 0;
padding-right: 8rem;
margin-right: -4rem;
}
.regular-width.connecting-lines .alt-image-text-row:nth-of-type(even) .alt-title,
.regular-width.connecting-lines .alt-image-text-row:nth-of-type(even) .alt-text-content {
padding-right: 0;
padding-left: 8rem;
margin-left: -4rem;
}
.regular-width.connecting-lines .alt-image-text-row.image-right .alt-title,
.regular-width.connecting-lines .alt-image-text-row.image-right .alt-text-content {
padding-left: 0;
margin-left: 0;
padding-right: 8rem;
margin-right: -4rem;
}
.regular-width.connecting-lines .alt-image-text-row.image-left .alt-title,
.regular-width.connecting-lines .alt-image-text-row.image-left .alt-text-content {
padding-right: 0;
padding-left: 8rem;
margin-left: -4rem;
}
}
/* page section images-and-text */
.page-section-images-and-text > .content,
.page-section-images-and-text .images-text-image,
.page-section-images-and-text .images-text-wrap,
.page-section-images-and-text .landscape-image {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
row-gap: var(--single-space);
}
.page-section-images-and-text .main-image,
.page-section-images-and-text .regular-text {
max-width: 36em;
}
.page-section-images-and-text .main-image img,
.page-section-images-and-text.separate-image-text .secondary-image img {
width: 100%;
}
.images-text-wrap {
padding: 0 7.14%;
}
.page-section-images-and-text .images-text-text *:last-child {
margin-bottom: 0;
}
.extra-display-text {
display: none;
}
.page-section-images-and-text.separate-image-text > .content {
align-items: flex-start;
}
.page-section-images-and-text.separate-image-text .display-text.extra-display-text {
display: block;
width: 100%;
max-width: unset;
text-align: center;
}
.page-section-images-and-text.separate-image-text .display-text.extra-display-text p {
margin: 0 auto;
}
.page-section-images-and-text.separate-image-text .images-text-wrap .display-text {
display: none;
}
.page-section-images-and-text.separate-image-text .regular-text {
margin-top: 0;
}
.page-section-images-and-text.separate-image-text .secondary-image {
width: 57.1%;
margin: 0 auto 0 0;
}
.page-section-images-and-text.separate-image-text.main-image-left .secondary-image {
margin: 0 0 0 auto;
}
.page-section-images-and-text.image-landscape .images-text-wrap {
padding: 0;
}
.page-section-images-and-text.overlap-image-text .images-text-image {
position: relative;
display: flex;
order: 2;
}
.page-section-images-and-text.overlap-image-text .images-text-image .main-image {
padding-left: 16.7%;
}
.page-section-images-and-text.overlap-image-text.main-image-right .images-text-image .main-image {
padding-left: 0;
padding-right: 16.7%;
}
.page-section-images-and-text.overlap-image-text .images-text-image .secondary-image {
position: absolute;
width: 50%;
left: 0;
bottom: 0;
padding-bottom: 16.7%;
}
.page-section-images-and-text.overlap-image-text.image-landscape .images-text-image .main-image {
padding-bottom: 16.7%;
}
.page-section-images-and-text.overlap-image-text.image-landscape .images-text-image .secondary-image {
padding-bottom: 0;
}
.page-section-images-and-text.overlap-image-text.main-image-right .images-text-image .secondary-image {
left: unset;
right: 0;
}
.page-section-images-and-text.two-large-image-text .images-text-image {
width: 71.4%;
}
.page-section-images-and-text.two-large-image-text .landscape-image {
width: 100%;
}
.page-section-images-and-text.two-large-image-text .landscape-image img {
width: 85.7%;
}
.page-section-images-and-text.two-large-image-text.portrait-image-left > .content,
.page-section-images-and-text.two-large-image-text.portrait-image-right .landscape-image {
justify-content: start;
}
.page-section-images-and-text.two-large-image-text.portrait-image-right > .content,
.page-section-images-and-text.two-large-image-text.portrait-image-left .landscape-image {
justify-content: end;
}
.page-section-images-and-text.two-large-image-text .images-text-wrap + .landscape-image {
margin-top: var(--double-space);
}
.page-section-images-and-text.two-large-image-text.portrait-image-right .landscape-image {
padding-right: 14.29%;
}
.page-section-images-and-text.vertical-center > .content {
align-items: center;
}
.page-section-images-and-text.vertical-bottom > .content {
align-items: end;
}
@media only screen and ( min-width: 37.5em ) {
.page-section-images-and-text > .content,
.page-section-images-and-text .images-text-image,
.page-section-images-and-text .images-text-wrap,
.page-section-images-and-text .landscape-image {
row-gap: var(--double-space);
}
.page-section-images-and-text > .content,
.page-section-images-and-text.overlap-image-text.main-image-left > .content {
justify-content: flex-start;
}
.page-section-images-and-text.overlap-image-text.main-image-right > .content {
justify-content: flex-end;
}
.page-section-images-and-text .main-image,
.page-section-images-and-text .regular-text {
max-width: unset;
width: 100%;
}
.page-section-images-and-text.main-image-right:not(.overlap-image-text) > .content,
.page-section-images-and-text.overlap-image-text.main-image-left > .content {
flex-direction: row-reverse;
}
.page-section-images-and-text .images-text-image {
justify-content: flex-start;
width: 85.7%;
}
.page-section-images-and-text.main-image-right .images-text-image {
justify-content: flex-end;
}
.page-section-images-and-text .images-text-wrap {
padding-left: 0;
padding-right: 0;
justify-content: flex-end;
}
.page-section-images-and-text.main-image-right .images-text-wrap {
justify-content: flex-start;
}
.page-section-images-and-text .images-text-wrap .display-text {
width: 85.7%;
}
.page-section-images-and-text .images-text-wrap .regular-text {
width: 71.4%;
}
.page-section-images-and-text.separate-image-text .images-text-image {
width: 71.4%;
}
.page-section-images-and-text.separate-image-text .secondary-image {
width: 42.8%;
}
.page-section-images-and-text.two-large-image-text .images-text-image {
width: 57.1%;
}
.page-section-images-and-text.two-large-image-text .landscape-image img {
width: 71.4%;
}
}
@media only screen and ( min-width: 56.25em ) {
.page-section-images-and-text.image-portrait .images-text-image {
width: 41.7%;
}
.page-section-images-and-text.image-portrait .main-image {
max-width: unset;
}
.page-section-images-and-text.image-portrait .images-text-wrap {
padding: 0;
width: 58.3%;
}
.page-section-images-and-text.image-landscape .images-text-image {
width: 71.4%;
}
.page-section-images-and-text.single-image-text.image-landscape .display-text {
width: 80%;
}
.page-section-images-and-text.single-image-text.image-landscape .regular-text {
width: 60%;
}
.page-section-images-and-text.separate-image-text > .content {
justify-content: space-between;
}
.page-section-images-and-text.separate-image-text .images-text-image {
order: 1;
width: 41.66%;
}
.page-section-images-and-text.separate-image-text .images-text-wrap {
order: 2;
width: 29.1%;
}
.page-section-images-and-text.separate-image-text .images-text-wrap .regular-text {
width: 100%;
}
.page-section-images-and-text.separate-image-text .secondary-image {
order: 3;
width: 16.7%;
}
.page-section-images-and-text.separate-image-text.main-image-left .secondary-image,
.page-section-images-and-text.separate-image-text.main-image-right .secondary-image {
margin: 0;
}
.page-section-images-and-text.overlap-image-text.image-portrait .images-text-image {
padding-top: 0;
}
.page-section-images-and-text.overlap-image-text.main-image-left .images-text-wrap {
justify-content: flex-end;
}
.page-section-images-and-text.overlap-image-text.main-image-right .images-text-wrap {
justify-content: flex-start;
}
.page-section-images-and-text.two-large-image-text > .content {
display: grid;
grid-template-columns: repeat(12,1fr);
grid-template-rows: repeat(5,auto);
}
.page-section-images-and-text.two-large-image-text .images-text-image,
.page-section-images-and-text.two-large-image-text .images-text-wrap,
.page-section-images-and-text.two-large-image-text .images-text-wrap .display-text,
.page-section-images-and-text.two-large-image-text .landscape-image img {
width: 100%;
}
.page-section-images-and-text.two-large-image-text .images-text-wrap .regular-text {
width: 83.3%
}
.page-section-images-and-text.two-large-image-text .images-text-image {
grid-column: 1 / span 4;
grid-row: 1 / span 6;
height: 100%;
align-items: center;
}
.page-section-images-and-text.two-large-image-text.portrait-image-right .images-text-image {
grid-column: 9 / span 4;
}
.page-section-images-and-text.two-large-image-text .images-text-wrap {
grid-column: 6 / span 6;
grid-row: 3 / span 3;
padding-top: 4em;
}
.page-section-images-and-text.two-large-image-text .landscape-image {
grid-column: 7 / span 6;
grid-row: 1 / span 2;
}
.page-section-images-and-text.two-large-image-text .images-text-wrap + .landscape-image {
margin-top: 0;
}
.page-section-images-and-text.two-large-image-text.vertical-bottom .images-text-wrap {
grid-row: 3 / span 4;
}
.page-section-images-and-text.two-large-image-text.portrait-image-right .images-text-wrap {
grid-column: 2 / span 6;
}
.page-section-images-and-text.two-large-image-text.portrait-image-right .landscape-image {
grid-column: 1 / span 6;
}
.page-section-images-and-text.two-large-image-text.vertical-bottom .images-text-image {
grid-row: 2 / span 5;
}
.page-section-images-and-text.two-large-image-text.vertical-bottom .images-text-wrap {
grid-row: 3 / span 4;
}
.page-section-images-and-text.two-large-image-text.vertical-top .images-text-wrap {
grid-row: 1 / span 4;
padding-top: 0;
padding-bottom: 4em;
}
.page-section-images-and-text.two-large-image-text.vertical-top .landscape-image {
grid-row: 5 / span 2;
}
}
@media only screen and ( min-width: 87.5em ) {
.page-section-images-and-text.image-portrait .images-text-wrap,
.page-section-images-and-text.overlap-image-text.image-portrait .images-text-wrap {
justify-content: center;
}
.page-section-images-and-text.image-portrait .display-text {
width: 71.4%;
}
.page-section-images-and-text.image-portrait .regular-text {
width: 42.9%;
}
.page-section-images-and-text.image-landscape .images-text-image {
width: 58.4%
}
.page-section-images-and-text.image-landscape .images-text-wrap {
width: 41.6%;
}
.page-section-images-and-text.image-landscape .display-text {
width: 85.7%;
}
.page-section-images-and-text.image-landscape .regular-text {
width: 66.66%;
}
.page-section-images-and-text.separate-image-text .images-text-wrap {
width: 25%;
}
.page-section-images-and-text.overlap-image-text.image-landscape .images-text-image {
padding-top: 0;
}
.page-section-images-and-text.separate-image-text .secondary-image {
width: 16.7%;
}
.page-section-images-and-text.two-large-image-text .images-text-wrap .regular-text {
width: 66.7%
}
}
/* page section display-text */
.page-section-display-text > .content {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.page-section-display-text.double-padding > .content {
padding: var(--quad-space) var(--single-space);
}
.page-section-display-text.text-alignment-center > .content {
text-align: center;
}
.page-section-display-text.text-alignment-right > .content {
text-align: right;
}
.page-section-display-text .display-text > * {
max-width: unset;
}
.page-section-display-text .display-text-wrap {
width: 85.71%;
}
.page-section-display-text blockquote {
display: flex;
flex-wrap: wrap;
}
.page-section-display-text.text-alignment-center blockquote {
justify-content: center;
}
.page-section-display-text blockquote footer {
font-family: var(--sans-font), sans-serif;
font-size: 1rem;
line-height: 1.7;
width: 100%;
}
.page-section-display-text blockquote .quote-mark {
width: 100%;
font-family: var(--serif-font);
font-size: 3rem;
font-weight: 300;
color: var(--highlight);
line-height: 1;
}
.page-section-display-text blockquote .quote-mark + p {
margin-top: -.25em;
}
.page-section-display-text blockquote footer span {
font-weight: 200;
}
@media only screen and ( min-width: 37.5em ) {
.page-section-display-text > .content {
display: grid;
grid-template-columns: repeat(12,1fr);
}
.page-section-display-text.double-padding > .content {
padding: 6em var(--single-space);
}
.page-section-display-text .display-text-wrap {
width: 100%;
}
.page-section-display-text.text-horizontal-left .display-text-wrap {
grid-column: 1 / span 10;
}
.page-section-display-text.text-horizontal-center .display-text-wrap {
grid-column: 2 / span 10;
justify-self: center;
}
.page-section-display-text.text-horizontal-right .display-text-wrap {
grid-column: 3 / span 10;
justify-self: end;
}
.page-section-display-text.text-horizontal-left.small-display-text .display-text-wrap {
grid-column: 1 / span 8;
}
.page-section-display-text.text-horizontal-center.small-display-text .display-text-wrap {
grid-column: 3 / span 8;
}
.page-section-display-text.text-horizontal-right.small-display-text .display-text-wrap {
grid-column: 5 / span 8;
}
}
@media only screen and ( min-width: 56.25em ) {
.page-section-display-text.double-padding > .content {
padding: 8em var(--double-space);
}
.page-section-display-text.text-horizontal-left.small-display-text .display-text-wrap {
grid-column: 2 / span 6;
}
.page-section-display-text.text-horizontal-center.small-display-text .display-text-wrap {
grid-column: 4 / span 6;
}
.page-section-display-text.text-horizontal-right.small-display-text .display-text-wrap {
grid-column: 7 / span 6;
}
.page-section-display-text blockquote footer {
font-size: 1.125rem;
}
}
@media only screen and (min-width: 87.5em) {
.page-section-display-text.text-horizontal-left .display-text-wrap {
grid-column: 2 / span 7;
}
.page-section-display-text.text-horizontal-center .display-text-wrap {
grid-column: 3 / span 8;
}
.page-section-display-text.text-horizontal-right .display-text-wrap {
grid-column: 5 / span 7;
}
.page-section-display-text.text-horizontal-left.small-display-text .display-text-wrap {
grid-column: 2 / span 5;
}
.page-section-display-text.text-horizontal-center.small-display-text .display-text-wrap {
grid-column: 5 / span 4;
}
.page-section-display-text.text-horizontal-right.small-display-text .display-text-wrap {
grid-column: 7 / span 5;
}
}
@media only screen and (min-width: 100em) {
.page-section-display-text.text-horizontal-left.small-display-text .display-text-wrap {
grid-column: 2 / span 4;
}
.page-section-display-text.text-horizontal-right.small-display-text .display-text-wrap {
grid-column: 7 / span 4;
}
}
/* page section template cards */
.page-section-cards {
text-align: center;
}
.cards-header {
max-width: 48em;
margin: 0 auto var(--double-space);
}
.page-section-cards .cards {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--double-space);
padding: 0 7.14%;
}
.card {
width: 100%;
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: start;
align-items: center;
}
.card-img {
width: 100%;
overflow: hidden;
background-color: var(--cream);
}
.image-landscape .card-img {
aspect-ratio: 4 / 3;
}
.image-square .card-img {
aspect-ratio: 1 / 1;
}
.image-portrait .card-img {
aspect-ratio: 3 / 4;
}
.card-img img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.card-img + .card-content {
margin-top: var(--single-space);
}
.card-content {
flex-grow: 1;
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: start;
align-items: center;
padding: 1em 1em 0;
}
.card-content-body {
margin-bottom: 1em;
}
.card-content > *:last-child {
margin-bottom: 0;
}
.card-content-body * {
font-size: 1em;
}
.card-content h3 {
margin-top: -.25em;
margin-bottom: var(--single-space);
}
.card .card-content .cta {
margin-top: auto;
}
@media only screen and ( min-width: 37.5em ) {
.page-section-cards .cards {
padding: 0 14.29%;
}
.page-section-cards.col-four .cards {
padding: 0;
}
.page-section-cards.col-four .card {
padding: 0;
flex: 0 1 calc(50% - 1em);
}
}
@media only screen and ( min-width: 56.25em ) {
.page-section-cards .cards {
padding: 0;
}
.page-section-cards .cards-header + .cards {
padding-top: var(--single-space);
}
.page-section-cards.col-two .card,
.page-section-cards.col-three .card {
flex: 0 1 calc(50% - 1em);
}
.card-content {
padding: 1em 2em 0;
}
}
@media only screen and ( min-width: 75em ) {
.page-section-cards .cards {
row-gap: var(--triple-space);
}
.page-section-cards .cards-header + .cards {
padding-top: var(--double-space);
}
.page-section-cards .cards-header + .cards {
padding-top: var(--double-space);
}
.page-section-cards.col-two .cards {
column-gap: var(--triple-space);
}
.page-section-cards.col-two .card {
flex: 0 1 calc(50% - 1.5em);
}
.page-section-cards.col-three .card {
flex: 0 1 calc(33.33% - 1.334em);
}
.page-section-cards.col-four .cards {
padding: 0 8.33%;
column-gap: var(--triple-space);
}
.page-section-cards.col-four .card {
flex: 0 1 calc(50% - 1.5em);
}
}
@media only screen and ( min-width: 93.75em ) {
.page-section-cards .cards,
.page-section-cards.col-four .cards {
row-gap: var(--quad-space);
padding: 0 var(--triple-space);
}
.page-section-cards .cards-header + .cards {
padding-top: var(--triple-space);
}
.page-section-cards.col-two .cards {
column-gap: var(--quad-space);
}
.page-section-cards.col-two .card {
flex: 0 1 calc(50% - 2em);
}
.page-section-cards.col-three .cards {
column-gap: var(--triple-space);
}
.page-section-cards.col-three .card {
flex: 0 1 calc(33.33% - 2em);
}
.page-section-cards.col-four .cards {
column-gap: var(--double-space);
}
.page-section-cards.col-four .card {
flex: 0 1 calc(25% - 1.5em);
}
}
/* page section large-image */
.page-section-large-image:not(.no-image) {
background-color: transparent;
}
.page-section-large-image > .content {
display: flex;
padding: 0;
min-height: 40em;
overflow: hidden;
}
.page-section-large-image .large-image {
object-fit: cover;
object-position: center;
overflow: hidden;
width: 100%;
}
.page-section-large-image.image-horizontal-left.image-vertical-top .large-image {
object-position: left top;
}
.page-section-large-image.image-horizontal-left.image-vertical-center .large-image {
object-position: left center;
}
.page-section-large-image.image-horizontal-left.image-vertical-bottom .large-image {
object-position: left bottom;
}
.page-section-large-image.image-horizontal-center.image-vertical-top .large-image {
object-position: center top;
}
.page-section-large-image.image-horizontal-center.image-vertical-bottom .large-image {
object-position: center bottom;
}
.page-section-large-image.image-horizontal-right.image-vertical-top .large-image {
object-position: right top;
}
.page-section-large-image.image-horizontal-right.image-vertical-center .large-image {
object-position: right center;
}
.page-section-large-image.image-horizontal-right.image-vertical-bottom .large-image {
object-position: right bottom;
}
.large-image-overlay {
display: flex;
justify-content: center;
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.4);
}
.numbers .large-image-overlay {
background: linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,.6));
}
.no-text .large-image-overlay {
display: none;
}
.large-image-text-wrap {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(3, 33.33%);
width: 100%;
max-width: var(--max-width-full);
padding: 2em var(--single-space);
}
.numbers .large-image-text-wrap {
grid-template-rows: 1fr min-content;
}
.large-image-text-wrap .display-text + .regular-text {
margin-top: 0;
}
.display-text {
width: 100%;
align-self: flex-start;
justify-self: left;
}
.regular-text {
width: 100%;
align-self: flex-end;
justify-self: right;
}
.large-image-text-wrap > div {
display: flex;
flex-wrap: wrap;
min-height: 100%;
}
.large-image-text-wrap .text-vertical-top {
grid-row: 1;
align-items: start;
align-self: start;
}
.large-image-text-wrap .text-vertical-center {
grid-row: 2;
align-items: center;
align-self: center;
}
.large-image-text-wrap .text-vertical-bottom {
grid-row: 3;
align-items: end;
align-self: end;
}
.numbers .large-image-text-wrap .text-vertical-top,
.numbers .large-image-text-wrap .text-vertical-center,
.numbers .large-image-text-wrap .text-vertical-bottom {
grid-row: 1;
align-items: start;
align-self: start;
}
.large-image-text-wrap .text-alignment-left {
text-align: left;
}
.large-image-text-wrap .text-alignment-center {
text-align: center;
justify-content: center;
}
.large-image-text-wrap .text-alignment-right {
text-align: right;
justify-content: flex-end;
}
.number-blocks {
grid-row: 3;
align-items: end;
align-self: end;
justify-content: center;
gap: var(--single-space);
}
.number-blocks .number-block {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 100%;
}
.number-blocks .number-description {
text-align: center;
max-width: 20em;
}
.number-blocks .number-description p {
font-weight: 300;
}
.number-blocks .number-description > *:last-child {
margin-bottom: 0;
}
.number-blocks .number {
display: flex;
width: 100%;
justify-content: center;
font-size: 3.75rem;
font-weight: 400;
font-family: var(--sans-font), sans-serif;
color: var(--highlight);
}
.display-text.text-alignment-left ~ .number-blocks .number-block,
.display-text.text-alignment-left ~ .number-blocks .number {
justify-content: start;
}
.display-text.text-alignment-left ~ .number-blocks .number-description {
text-align: left;
}
.display-text.text-alignment-right ~ .number-blocks .number-block,
.display-text.text-alignment-right ~ .number-blocks .number {
justify-content: end;
}
.display-text.text-alignment-right ~ .number-blocks .number-description {
text-align: right;
}
.cta-only .large-image-text-wrap {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.cta-only .large-image-text-wrap > div {
min-height: unset;
}
@media only screen and ( min-width: 37.5em ) {
.page-section-large-image > .content {
max-height: 30em;
}
.large-image-text-wrap {
grid-template-columns: repeat(7, 1fr);
}
.large-image-text-wrap .text-horizontal-left {
grid-column: 1 / span 5;
}
.large-image-text-wrap .text-horizontal-center {
grid-column: 2 / span 5;
}
.large-image-text-wrap .text-horizontal-right {
grid-column: 3 / span 5;
}
.large-image-text-wrap .number-blocks {
grid-column: 1 / span 7;
flex-wrap: nowrap;
align-items: start;
column-gap: var(--single-space);
}
}
@media only screen and ( min-width: 56.25em ) {
.page-section-large-image > .content {
max-height: 42.5em;
}
.large-image-text-wrap {
grid-template-columns: repeat(12, 1fr);
padding: 3em var(--double-space);
}
.large-image-text-wrap .text-horizontal-left.display-text {
grid-column: 1 / span 8;
}
.large-image-text-wrap .text-horizontal-center.display-text {
grid-column: 3 / span 8;
}
.large-image-text-wrap .text-horizontal-right.display-text {
grid-column: 5 / span 8;
}
.large-image-text-wrap .text-horizontal-left.regular-text {
grid-column: 1 / span 7;
}
.large-image-text-wrap .text-horizontal-center.regular-text {
grid-column: 4 / span 6;
}
.large-image-text-wrap .text-horizontal-right.regular-text {
grid-column: 6 / span 7;
}
.large-image-text-wrap .number-blocks {
grid-column: 1 / span 12;
column-gap: var(--double-space);
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
align-items: start;
}
.number-blocks .number {
font-size: 4.5rem;
margin-bottom: .125em;
}
}
@media only screen and (min-width: 72em) {
.large-image-text-wrap .text-horizontal-left.display-text {
grid-column: 1 / span 6;
}
.large-image-text-wrap .text-horizontal-center.display-text {
grid-column: 4 / span 6;
}
.large-image-text-wrap .text-horizontal-right.display-text {
grid-column: 7 / span 6;
}
.large-image-text-wrap .text-horizontal-left.regular-text {
grid-column: 1 / span 5;
}
.large-image-text-wrap .text-horizontal-center.regular-text {
}
.large-image-text-wrap .text-horizontal-right.regular-text {
grid-column: 8 / span 5;
}
.number-blocks .number {
font-size: 6rem;
}
}
@media only screen and (min-width: 87.5em) {
.large-image-text-wrap .text-horizontal-left.regular-text {
grid-column: 2 / span 4;
}
.large-image-text-wrap .text-horizontal-center.regular-text {
grid-column: 5 / span 4;
}
.large-image-text-wrap .text-horizontal-right.regular-text {
grid-column: 8 / span 4;
}
}
/* page section carousel */
.carousel {
position: relative;
overflow: hidden;
display: flex;
justify-content: center;
}
.carousel-slider {
width: 100%;
display: flex;
margin: 0 auto;
padding-bottom: 4em;
}
.carousel-slide {
flex: 0 0 100%;
padding: 1em;
/* min-width: 80%; */
}
@media only screen and ( min-width: 56.25em ) {
.visible-2 .carousel-slide {
flex: 0 0 50%;
}
.visible-3 .carousel-slide {
flex: 0 0 33.333%;
}
}
.carousel-wrap {
padding: 1em;
background-color: var(--cream);
}
.carousel-slide img {
width: 100%;
height: auto;
}
.carousel-navigation {
position: absolute;
bottom: -2em;
height: 4em;
}
/* page section multi-column text */
.page-section-multi-column-text > .content {
display: grid;
grid-template-columns: repeat(14,1fr);
}
.page-section-multi-column-text.has-intro > .content {
grid-template-rows: repeat(2,auto);
}
.page-section-multi-column-text.has-intro .display-text {
grid-row: 1 / span 1;
margin-bottom: 1em;
}
.page-section-multi-column-text.has-intro .multi-column-text {
grid-row: 2 / span 1;
}
.page-section-multi-column-text.has-intro .display-text.headline-horizontal-left {
grid-column: 1 / span 12;
}
.page-section-multi-column-text.has-intro .display-text.headline-horizontal-center {
grid-column: 2 / span 12;
}
.page-section-multi-column-text.has-intro .display-text.headline-horizontal-right {
grid-column: 3 / span 12;
}
.multi-column-text.text-horizontal-left {
grid-column: 1 / span 12;
}
.multi-column-text.text-horizontal-center {
grid-column: 2 / span 12;
}
.multi-column-text.text-horizontal-right {
grid-column: 3 / span 12;
}
.page-section-multi-column-text .text-alignment-center {
text-align: center;
}
.page-section-multi-column-text .text-alignment-right {
text-align: right;
}
.page-section-multi-column-text .small-display-text p {
max-width: unset;
}
@media only screen and (min-width: 37.5em) {
.multi-column-text.body-text.two-column {
padding: 0;
column-count: 2;
column-gap: 8.3%;
}
.multi-column-text.small-display-text.text-horizontal-left {
grid-column: 1 / span 10;
}
.multi-column-text.small-display-text.text-horizontal-center {
grid-column: 3 / span 10;
}
.multi-column-text.small-display-text.text-horizontal-right {
grid-column: 5 / span 10;
}
}
@media only screen and (min-width: 46.875em) {
.multi-column-text.body-text.text-horizontal-left.one-column {
grid-column: 1 / span 10;
}
.multi-column-text.body-text.text-horizontal-center.one-column {
grid-column: 3 / span 10;
}
.multi-column-text.body-text.text-horizontal-right.one-column {
grid-column: 5 / span 10;
}
}
@media only screen and ( min-width: 56.25em ) {
.page-section-multi-column-text.has-intro .display-text.headline-horizontal-left {
grid-column: 1 / span 10;
}
.page-section-multi-column-text.has-intro .display-text.headline-horizontal-center {
grid-column: 2 / span 10;
}
.page-section-multi-column-text.has-intro .display-text.headline-horizontal-right {
grid-column: 3 / span 10;
}
.page-section-multi-column-text > .content {
display: grid;
grid-template-columns: repeat(12,1fr);
}
.multi-column-text.body-text:not(.one-column),
.multi-column-text.small-display-text:not(.one-column) {
column-count: 2;
column-gap: 9.1%;
}
.multi-column-text.body-text.text-horizontal-left,
.multi-column-text.small-display-text.text-horizontal-left:not(.one-column) {
grid-column: 1 / span 11;
}
.multi-column-text.body-text.text-horizontal-center,
.multi-column-text.small-display-text.text-horizontal-center {
grid-column: 2 / span 10;
column-gap: 4em;
}
.multi-column-text.body-text.text-horizontal-right,
.multi-column-text.small-display-text.text-horizontal-right:not(.one-column) {
grid-column: 2 / span 11;
}
.multi-column-text.body-text.text-horizontal-left.one-column {
grid-column: 1 / span 8;
}
.multi-column-text.body-text.text-horizontal-center.one-column {
grid-column: 3 / span 8;
}
.multi-column-text.body-text.text-horizontal-right.one-column {
grid-column: 5 / span 8;
}
}
@media only screen and (min-width: 75em) {
.page-section-multi-column-text.has-intro .display-text.headline-horizontal-left {
grid-column: 1 / span 9;
}
.page-section-multi-column-text.has-intro .display-text.headline-horizontal-center {
grid-column: 3 / span 8;
}
.page-section-multi-column-text.has-intro .display-text.headline-horizontal-right {
grid-column: 5 / span 9;
}
.multi-column-text.body-text.text-horizontal-left.one-column {
grid-column: 2 / span 6;
}
.multi-column-text.body-text.text-horizontal-center.one-column {
grid-column: 4 / span 6;
}
.multi-column-text.body-text.text-horizontal-right.one-column {
grid-column: 6 / span 6;
}
.multi-column-text.small-display-text.text-horizontal-left.one-column {
grid-column: 2 / span 8;
}
.multi-column-text.small-display-text.text-horizontal-center.one-column {
grid-column: 3 / span 8;
}
.multi-column-text.small-display-text.text-horizontal-right.one-column {
grid-column: 4 / span 8;
}
.multi-column-text.body-text.two-column {
column-gap: 11.1%
}
.multi-column-text.body-text.three-column {
column-count: 3;
}
.multi-column-text.body-text.three-column:not(.text-horizontal-center) {
column-gap: 9.1%
}
.multi-column-text.small-display-text.two-column {
column-gap: 9.1%
}
.multi-column-text.body-text.two-column.text-horizontal-left {
grid-column: 1 / span 9;
}
.multi-column-text.body-text.two-column.text-horizontal-center,
.multi-column-text.small-display-text.text-horizontal-center {
grid-column: 3 / span 8;
}
.multi-column-text.body-text.two-column.text-horizontal-right {
grid-column: 4 / span 9;
}
}
@media only screen and (min-width: 93.75em) {
.page-section-multi-column-text.has-intro .display-text.headline-horizontal-left {
grid-column: 1 / span 6;
}
.page-section-multi-column-text.has-intro .display-text.headline-horizontal-center {
grid-column: 4 / span 6;
}
.page-section-multi-column-text.has-intro .display-text.headline-horizontal-right {
grid-column: 7 / span 6;
}
.multi-column-text.small-display-text.text-horizontal-left.one-column {
grid-column: 2 / span 6;
}
.multi-column-text.small-display-text.text-horizontal-center.one-column {
grid-column: 4 / span 6;
}
.multi-column-text.small-display-text.text-horizontal-right.one-column {
grid-column: 6 / span 6;
}
.multi-column-text.body-text.two-column {
column-gap: 14.3%
}
.multi-column-text.body-text.two-column.text-horizontal-left {
grid-column: 2 / span 7;
}
.multi-column-text.body-text.two-column.text-horizontal-center {
grid-column: 4 / span 6;
}
.multi-column-text.body-text.two-column.text-horizontal-right {
grid-column: 5 / span 7;
}
.multi-column-text.small-display-text.two-column {
column-gap: 11.1%;
}
.multi-column-text.small-display-text.two-column.text-horizontal-left {
grid-column: 2 / span 9;
}
.multi-column-text.small-display-text.two-column.text-horizontal-center {
grid-column: 3 / span 8;
}
.multi-column-text.small-display-text.two-column.text-horizontal-right {
grid-column: 3 / span 9;
}
.multi-column-text.small-display-text.three-column {
column-count: 3;
}
.multi-column-text.small-display-text.three-column:not(.text-horizontal-center) {
column-gap: 9.1%;
}
.multi-column-text.small-display-text.three-column.text-horizontal-left {
grid-column: 1 / span 11;
}
.multi-column-text.small-display-text.three-column.text-horizontal-center {
grid-column: 1 / span 12;
}
.multi-column-text.small-display-text.three-column.text-horizontal-right {
grid-column: 2 / span 11;
}
}
/* page section timeline */
.timeline-year {
position: relative;
display: flex;
font-family: var(--serif-font), serif;
}
.timeline-chk {
opacity: 0.001;
width: 4.5em;
height: 2em;
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: .25em;
}
.timeline-chk-year {
position: relative;
flex: 0 0 3.75em;
cursor: pointer;
color: var(--highlight);
font-size: 1.5em;
transition: color .3s ease-in-out;
}
.timeline-chk:hover ~ .timeline-chk-year {
color: var(--black);
}
.timeline-chk-year .carat {
position: relative;
bottom: .125em;
width: .5rem;
height: auto;
stroke: var(--highlight);
transform: rotate(90deg);
}
.timeline-chk:checked ~ .timeline-chk-year .carat {
transform: rotate(-90deg);
}
.timeline-year-content {
border-left: 1px solid var(--highlight);
padding-bottom: 2em;
height: auto;
max-height: 0;
min-height: 3em;
overflow: hidden;
}
.page-section-timeline > .content section:last-child .timeline-year-content {
padding-bottom: 0;
}
.timeline-year-content .timeline-event {
height: auto;
max-height: 0;
overflow: hidden;
}
.timeline-chk:checked ~ .timeline-year-content {
max-height: 200em;
}
.timeline-chk:checked ~ .timeline-year-content .timeline-event {
max-height: 100em;
}
.timeline-chk:checked ~ .timeline-year-content .timeline-event + .timeline-event {
padding-top: 2em;
}
.timeline-event-image {
display: flex;
width: auto;
height: 100%;
background-color: var(--cream);
margin: 1em 0 0 1em;
opacity: 0;
transform: scale(1) scaleY(.975) translateY(.75rem);
}
.timeline-event-image img {
width: 100%;
height: 100%;
}
#body.animate .timeline-event-image-wrap.fade-in,
#body.animate .timeline-event-text.fade-in {
transform: scale(1) scaleY(.975) translateY(.75rem);
}
#body.animate .timeline-event-image-wrap.fade-in.faded-in,
#body.animate .timeline-event-text.fade-in.faded-in {
transform: scaleY(1) translateY(0);
}
.timeline-title {
margin: 0 0 .25rem 0;
padding: 0 0 .25rem 1rem;
opacity: 0;
border-bottom: 1px solid var(--highlight);
transform: scale(1) scaleY(.975) translateY(.75rem);
}
.timeline-event-description {
padding: 0 0 0 1em;
opacity: 0;
transform: scale(1) scaleY(.975) translateY(.75rem);
}
.timeline-chk:checked ~ .timeline-year-content .timeline-event-image,
.timeline-chk:checked ~ .timeline-year-content .timeline-title,
.timeline-chk:checked ~ .timeline-year-content .timeline-event-description {
opacity: 1;
transform: scaleY(1) translateY(0);
}
@media (prefers-reduced-motion: no-preference) {
.timeline-chk-year .carat {
transition: transform .5s ease-in-out;
}
.timeline-year-content {
transition: max-height 1s ease-out;
}
.timeline-year-content .timeline-event {
transition: max-height 1s ease-out;
}
.timeline-chk:checked ~ .timeline-year-content {
transition: max-height 1s ease-in;
}
.timeline-chk:checked ~ .timeline-year-content .timeline-event {
transition: max-height 1s ease-in;
}
.timeline-chk:checked ~ .timeline-year-content .timeline-event + .timeline-event {
transition: padding-top 1s ease-out;
}
.timeline-event-image {
transition: all 1s ease-in;
}
.timeline-title {
transition: all 1s ease-in;
}
.timeline-event-description {
transition: all 1s ease-in;
}
.timeline-chk:checked ~ .timeline-year-content .timeline-event-image,
.timeline-chk:checked ~ .timeline-year-content .timeline-title,
.timeline-chk:checked ~ .timeline-year-content .timeline-event-description {
transition: all 1s ease-in;
}
}
@media only screen and ( min-width: 37.5em ) {
.timeline-year {
padding: 0 14.29%;
}
.timeline-chk-year {
font-size: 1.75em;
}
}
@media only screen and ( min-width: 56.25em ) {
.timeline-year {
padding: 0;
display: flex;
flex-wrap: wrap;
}
.timeline-chk-year {
text-align: center;
padding-left: .75em;
font-size: 2.25em;
}
.timeline-chk-year:after {
display: none;
}
.timeline-year-content,
.timeline-event {
display: flex;
}
.timeline-chk-year,
.timeline-year-content,
.timeline-year,
.timeline-event {
flex: 0 0 100%;
}
.timeline-year-content {
flex-wrap: wrap;
border-left: 0;
padding: 1em 0;
}
.timeline-event {
align-items: center;
padding-left: 8.33%;
padding-right: 8.33%;
}
.timeline-event:first-child {
min-height: 1em;
}
.timeline-chk:checked ~ .timeline-year-content .timeline-event + .timeline-event {
padding-top: 0;
}
.timeline-year:not(.timeline-odd):not(.timeline-even) .timeline-event:nth-of-type(odd),
.timeline-year.timeline-even .timeline-event:nth-of-type(even),
.timeline-year.timeline-odd .timeline-event:nth-of-type(odd) {
flex-direction: row;
}
.timeline-year:not(.timeline-odd):not(.timeline-even) .timeline-event:nth-of-type(even),
.timeline-year.timeline-even .timeline-event:nth-of-type(odd),
.timeline-year.timeline-odd .timeline-event:nth-of-type(even) {
flex-direction: row-reverse;
}
.timeline-event-image-wrap,
.timeline-event-text-wrap {
flex: 0 0 50%;
height: 100%;
display: flex;
align-items: center;
padding: 4% 0;
}
.timeline-event-image-wrap {
height: auto;
justify-content: start;
}
.timeline-year:not(.timeline-odd):not(.timeline-even) .timeline-event:nth-of-type(odd) .timeline-event-image-wrap,
.timeline-year.timeline-odd .timeline-event:nth-of-type(odd) .timeline-event-image-wrap,
.timeline-year.timeline-even .timeline-event:nth-of-type(even) .timeline-event-image-wrap {
justify-content: end;
}
.timeline-event-image {
margin: 0;
width: 91.665%;
}
.timeline-event-text-wrap {
justify-content: stretch;
}
.timeline-event-text {
width: 100%;
}
.timeline-year:not(.timeline-odd):not(.timeline-even) .timeline-event:nth-of-type(odd) .timeline-event-text-wrap,
.timeline-year.timeline-odd .timeline-event:nth-of-type(odd) .timeline-event-text-wrap,
.timeline-year.timeline-even .timeline-event:nth-of-type(even) .timeline-event-text-wrap {
border-right: 1px solid var(--highlight);
margin-right: 0;
}
.timeline-year:not(.timeline-odd):not(.timeline-even) .timeline-event:nth-of-type(even) .timeline-event-text-wrap,
.timeline-year.timeline-odd .timeline-event:nth-of-type(even) .timeline-event-text-wrap,
.timeline-year.timeline-even .timeline-event:nth-of-type(odd) .timeline-event-text-wrap {
border-right: 0;
border-left: 1px solid var(--highlight);
margin-right: 1px;
}
.timeline-year:not(.timeline-odd):not(.timeline-even) .timeline-event:nth-of-type(odd) .timeline-title,
.timeline-year:not(.timeline-odd):not(.timeline-even) .timeline-event:nth-of-type(odd) .timeline-event-description,
.timeline-year.timeline-odd .timeline-event:nth-of-type(odd) .timeline-title,
.timeline-year.timeline-odd .timeline-event:nth-of-type(odd) .timeline-event-description,
.timeline-year.timeline-even .timeline-event:nth-of-type(even) .timeline-title,
.timeline-year.timeline-even .timeline-event:nth-of-type(even) .timeline-event-description {
padding-left: 0;
padding-right: 16.66%;
margin-left: 0;
margin-right: -8.45%;
}
.timeline-year:not(.timeline-odd):not(.timeline-even) .timeline-event:nth-of-type(even) .timeline-title,
.timeline-year:not(.timeline-odd):not(.timeline-even) .timeline-event:nth-of-type(even) .timeline-event-description,
.timeline-year.timeline-odd .timeline-event:nth-of-type(even) .timeline-title,
.timeline-year.timeline-odd .timeline-event:nth-of-type(even) .timeline-event-description,
.timeline-year.timeline-even .timeline-event:nth-of-type(odd) .timeline-title,
.timeline-year.timeline-even .timeline-event:nth-of-type(odd) .timeline-event-description {
padding-right: 0;
padding-left: 16.66%;
margin-right: 0;
margin-left: -8.45%;
}
.timeline-year:not(.timeline-odd):not(.timeline-even) .timeline-event:nth-of-type(odd) .timeline-event-text-wrap.no-image .timeline-title,
.timeline-year:not(.timeline-odd):not(.timeline-even) .timeline-event:nth-of-type(odd) .timeline-event-text-wrap.no-image .timeline-event-description,
.timeline-year.timeline-odd .timeline-event:nth-of-type(odd) .timeline-event-text-wrap.no-image .timeline-title,
.timeline-year.timeline-odd .timeline-event:nth-of-type(odd) .timeline-event-text-wrap.no-image .timeline-event-description,
.timeline-year.timeline-even .timeline-event:nth-of-type(even) .timeline-event-text-wrap.no-image .timeline-title,
.timeline-year.timeline-even .timeline-event:nth-of-type(even) .timeline-event-text-wrap.no-image .timeline-event-description {
padding-left: 0;
padding-right: 8.45%;
margin-right: 0;
}
.timeline-year:not(.timeline-odd):not(.timeline-even) .timeline-event:nth-of-type(even) .timeline-event-text-wrap.no-image .timeline-title,
.timeline-year:not(.timeline-odd):not(.timeline-even) .timeline-event:nth-of-type(even) .timeline-event-text-wrap.no-image .timeline-event-description,
.timeline-year.timeline-odd .timeline-event:nth-of-type(even) .timeline-event-text-wrap.no-image .timeline-title,
.timeline-year.timeline-odd .timeline-event:nth-of-type(even) .timeline-event-text-wrap.no-image .timeline-event-description,
.timeline-year.timeline-even .timeline-event:nth-of-type(odd) .timeline-event-text-wrap.no-image .timeline-title,
.timeline-year.timeline-even .timeline-event:nth-of-type(odd) .timeline-event-text-wrap.no-image .timeline-event-description {
padding-left: 8.45%;
padding-right: 0;
margin-left: 0;
}
}
@media only screen and ( min-width: 75em ) {
.timeline-event {
padding-left: 12.495%;
padding-right: 12.495%;
}
.timeline-event-image-wrap,
.timeline-event-text-wrap {
padding: 3% 0;
}
.timeline-event-image {
margin: 0;
width: 87.505%;
}
.timeline-year:not(.timeline-odd):not(.timeline-even) .timeline-event:nth-of-type(odd) .timeline-title,
.timeline-year:not(.timeline-odd):not(.timeline-even) .timeline-event:nth-of-type(odd) .timeline-event-description,
.timeline-year.timeline-odd .timeline-event:nth-of-type(odd) .timeline-title,
.timeline-year.timeline-odd .timeline-event:nth-of-type(odd) .timeline-event-description,
.timeline-year.timeline-even .timeline-event:nth-of-type(even) .timeline-title,
.timeline-year.timeline-even .timeline-event:nth-of-type(even) .timeline-event-description {
padding-left: 0;
padding-right: 24.99%;
margin-right: -12.7%;
}
.timeline-year:not(.timeline-odd):not(.timeline-even) .timeline-event:nth-of-type(even) .timeline-title,
.timeline-year:not(.timeline-odd):not(.timeline-even) .timeline-event:nth-of-type(even) .timeline-event-description,
.timeline-year.timeline-odd .timeline-event:nth-of-type(even) .timeline-title,
.timeline-year.timeline-odd .timeline-event:nth-of-type(even) .timeline-event-description,
.timeline-year.timeline-even .timeline-event:nth-of-type(odd) .timeline-title,
.timeline-year.timeline-even .timeline-event:nth-of-type(odd) .timeline-event-description {
padding-right: 0;
padding-left: 24.99%;
margin-left: -12.7%;
}
.timeline-year:not(.timeline-odd):not(.timeline-even) .timeline-event:nth-of-type(odd) .timeline-event-text-wrap.no-image .timeline-title,
.timeline-year:not(.timeline-odd):not(.timeline-even) .timeline-event:nth-of-type(odd) .timeline-event-text-wrap.no-image .timeline-event-description,
.timeline-year.timeline-odd .timeline-event:nth-of-type(odd) .timeline-event-text-wrap.no-image .timeline-title,
.timeline-year.timeline-odd .timeline-event:nth-of-type(odd) .timeline-event-text-wrap.no-image .timeline-event-description,
.timeline-year.timeline-even .timeline-event:nth-of-type(even) .timeline-event-text-wrap.no-image .timeline-title,
.timeline-year.timeline-even .timeline-event:nth-of-type(even) .timeline-event-text-wrap.no-image .timeline-event-description {
padding-right: 12.7%;
}
.timeline-year:not(.timeline-odd):not(.timeline-even) .timeline-event:nth-of-type(even) .timeline-event-text-wrap.no-image .timeline-title,
.timeline-year:not(.timeline-odd):not(.timeline-even) .timeline-event:nth-of-type(even) .timeline-event-text-wrap.no-image .timeline-event-description,
.timeline-year.timeline-odd .timeline-event:nth-of-type(even) .timeline-event-text-wrap.no-image .timeline-title,
.timeline-year.timeline-odd .timeline-event:nth-of-type(even) .timeline-event-text-wrap.no-image .timeline-event-description,
.timeline-year.timeline-even .timeline-event:nth-of-type(odd) .timeline-event-text-wrap.no-image .timeline-title,
.timeline-year.timeline-even .timeline-event:nth-of-type(odd) .timeline-event-text-wrap.no-image .timeline-event-description {
padding-left: 12.7%;
}
.timeline-year.timeline-odd .timeline-event:nth-of-type(odd) .timeline-title,
.timeline-year.timeline-odd .timeline-event:nth-of-type(odd) .timeline-event-description,
.timeline-year.timeline-even .timeline-event:nth-of-type(even) .timeline-title,
.timeline-year.timeline-even .timeline-event:nth-of-type(even) .timeline-event-description {
padding-left: 0;
padding-right: 24.99%;
margin-right: -12.7%;
}
.timeline-year.timeline-odd .timeline-event:nth-of-type(even) .timeline-title,
.timeline-year.timeline-odd .timeline-event:nth-of-type(even) .timeline-event-description,
.timeline-year.timeline-even .timeline-event:nth-of-type(odd) .timeline-title,
.timeline-year.timeline-even .timeline-event:nth-of-type(odd) .timeline-event-description {
padding-right: 0;
padding-left: 24.99%;
margin-left: -12.7%;
}
.timeline-year.timeline-odd .timeline-event:nth-of-type(odd) .timeline-event-text-wrap.no-image .timeline-title,
.timeline-year.timeline-odd .timeline-event:nth-of-type(odd) .timeline-event-text-wrap.no-image .timeline-event-description,
.timeline-year.timeline-even .timeline-event:nth-of-type(even) .timeline-event-text-wrap.no-image .timeline-title,
.timeline-year.timeline-even .timeline-event:nth-of-type(even) .timeline-event-text-wrap.no-image .timeline-event-description {
padding-right: 12.7%;
}
.timeline-year.timeline-odd .timeline-event:nth-of-type(even) .timeline-event-text-wrap.no-image .timeline-title,
.timeline-year.timeline-odd .timeline-event:nth-of-type(even) .timeline-event-text-wrap.no-image .timeline-event-description,
.timeline-year.timeline-even .timeline-event:nth-of-type(odd) .timeline-event-text-wrap.no-image .timeline-title,
.timeline-year.timeline-even .timeline-event:nth-of-type(odd) .timeline-event-text-wrap.no-image .timeline-event-description {
padding-left: 12.7%;
}
}
@media only screen and ( min-width: 93.75em ) {
.timeline-event-image-wrap,
.timeline-event-text-wrap {
padding: 3% 0;
}
.timeline-event-image {
margin: 0;
}
}
/* page section content */
.section-content-header {
text-align: center;
max-width: 48em;
margin: 0 auto var(--double-space);
}
.page-section-content.full-width .section-content-header {
padding: 0 var(--single-space);
}
.page-section-content.full-width .content {
padding: 0;
}
@media only screen and ( min-width: 56.25em ) {
.page-section-content.full-width .section-content-header {
padding: 0 var(--double-space);
}
}
/* 404 error page */
.error-404 .content,
.content.error-page{
text-align: center;
}
/* contact us page */
.contact-us .content {
padding: var(--double-space);
}
.contact-us .content p {
margin-bottom: 0;
}
.contact-us-card {
margin-bottom: var(--double-space);
}
.contact-us-card p + .link-wrap {
margin-top: var(--half-space);
}
.contact-us-card h4.fifth-head {
letter-spacing: .01em;
margin-bottom: var(--half-space);
}
.contact-us-offices + .contact-us-tasting-rooms {
padding-top: 0;
}
.contact-us-tasting-rooms .content {
padding-top: 0;
}
.contact-us-tasting-rooms .contact-us-wrap {
padding-top: var(--quad-space);
border-top: 1px solid var(--warm-gray);
}
@media only screen and ( min-width: 37.5em ) {
.contact-us-wrap {
display: flex;
gap: var(--double-space);
justify-content: space-between;
max-width: 75em;
margin: 0 auto;
padding: var(--single-space) 0;
}
.contact-us-tasting-rooms .contact-us-wrap {
padding-top: 5em;
}
.contact-us-wrap > h2 {
margin-top: -.125em;
}
.contact-us-grid {
flex: 0 0 18em;
}
}
@media only screen and ( min-width: 56.25em ) {
.contact-us-wrap {
padding: var(--double-space) 0;
}
.contact-us-tasting-rooms .contact-us-wrap {
padding-top: 6em;
}
.contact-us-wrap > h2 {
font-size: 2.25rem;
}
.contact-us-grid {
flex: 0 0 32em;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(4, auto);
column-gap: 2em;
}
.contact-us-grid h3.fourth-head {
font-size: 1.5rem;
}
.contact-us-grid h4.fifth-head {
font-size: 1.125rem;
}
.contact-us-offices h3.fourth-head {
grid-column: 1 / span 2;
}
.contact-us-offices h4:nth-of-type(odd) {
grid-column: 1;
}
.contact-us-offices h4:nth-of-type(even) {
grid-column: 2;
grid-row: 3;
}
}
@media only screen and ( min-width: 62.5em ) {
.contact-us-wrap {
padding: var(--quad-space) 0;
}
.contact-us-grid {
flex: 0 0 40em;
}
}
@media only screen and ( min-width: 75em ) {
.contact-us-grid {
flex: 0 0 42em;
column-gap: 4em;
}
}
/* legal pages */
.basic-content > .tfelegal > h1 {
display: none;
}
.tfelegal {
width: 100%;
}
.tfelegal h2 {
font-size: 1.5rem;
}
.tfelegal h3 {
font-size: 1.25rem;
}
@media only screen and (min-width:56.25em) {
.tfelegal h2 {
font-size: 1.75rem;
}
.tfelegal h3 {
font-size: 1.5rem;
}
}
/* sitemap page */
.sitemap-content {
display: flex;
flex-wrap: wrap;
gap: var(--double-space);
}
.sitemap-content ul li {
margin-left: 0;
margin-bottom: 0;
padding-left: 0;
list-style: none;
}
@media only screen and ( min-width: 37.5em ) {
.sitemap-pages,
.sitemap-brands {
flex: 0 0 calc(50% - 1em);
}
}
@media only screen and ( min-width: 56.25em ) {
.sitemap-pages,
.sitemap-brands {
flex: 0 0 calc(50% - 2em);
}
}
@media only screen and ( min-width: 75em ) {
.sitemap-pages,
.sitemap-brands {
flex: 0 0 calc(25% - 1em);
}
.sitemap-news {
flex: 0 0 calc(50% - 2em);
}
}
/* brands page grid */
.brands-page-intro {
text-align: center;
display: flex;
justify-content: center;
}
.brands-page-intro p {
padding: 1em;
margin-bottom: 0;
}
.brand-nav {
display: flex;
justify-content: center;
position: relative;
padding: 1em 1em 1.25em;
min-height: 4em;
background-color: var(--cream);
}
.brand-nav.sticky {
position: fixed;
top: 0;
width: 100%;
z-index: 10;
}
.brand-nav.sticky + * {
margin-top: 2.25em;
}
.logged-in.admin-bar .brand-nav.sticky {
top: 32px;
}
.brand-nav .brand-nav-chk,
.brand-nav .brand-nav-chk-label {
display: none;
}
.no-js .brand-nav .brand-nav-chk-label {
display: block;
position: absolute;
height: 1em;
width: 1em;
z-index: 5;
}
.brand-nav .nav-toggle,
.no-js .brand-nav .brand-nav-chk-label {
top: 0;
right: 0;
font-size: 1rem;
}
.brand-nav .carat,
.no-js .brand-nav .brand-nav-chk-label .carat {
position: absolute;
stroke: var(--mid-gray);
top: .75em;
right: .5em;
height: 2.25em;
width: 2.25em;
padding: .675em;
transform: rotate(90deg);
}
.brand-nav .nav-chk-label .carat {
top: .75em;
right: 1.75em;
}
.brand-nav.open .carat,
.no-js .brand-nav .brand-nav-chk:checked ~ .brand-nav-chk-label .carat {
transform: rotate(-90deg);
}
.brand-nav ul {
width: 100%;
max-width: var(--max-width-inset);
margin: 0;
height: auto;
min-height: 2.75em;
position: absolute;
background: var(--cream);
z-index: 4;
padding: 0 1em 1em;
}
.brand-nav ul li {
margin: 0;
width: 100%;
text-align: left;
}
.brand-nav a {
display: block;
text-decoration: none;
padding: 0;
height: 0;
overflow: hidden;
font-family: var(--serif-font), serif;
font-size: 1rem;
color: var(--mid-gray);
background-color: transparent;
opacity: 0;
border: none;
cursor: pointer;
}
.brand-nav a:active,
.brand-nav a:focus,
.brand-nav a:hover,
.brand-nav:not(.single-brand-nav) a.active,
.single-brand-nav a[data-order="first"] {
color: var(--black);
}
.brand-nav:not(.single-brand-nav) a.active,
body:not(.no-js) .single-brand-nav a[data-order="first"] {
cursor: default;
pointer-events: none;
}
.brand-nav.open a,
.single-brand-nav a[data-order="first"],
.brand-nav.brand-grid-nav a.active {
opacity: 1;
height: 2em;
padding: .25em 0;
}
.brand-nav.open li + li {
padding-top: .5em;
}
.brand-nav.open li:last-of-type a {
padding-bottom: 1em;
}
.no-js .brand-nav-toggle {
display: none;
}
.no-js .brand-nav ul {
text-align: center;
}
.no-js .brand-nav .brand-nav-chk:checked ~ ul a {
height: auto;
opacity: 1;
padding: .5em 0;
text-decoration: underline;
color: var(--mid-gray);
}
@media (prefers-reduced-motion: no-preference) {
.brand-nav .carat,
.no-js .brand-nav .brand-nav-chk-label .carat {
transition: transform .4s ease-in-out;
}
.brand-nav ul {
transition: height .4s ease;
}
.brand-nav a {
transition: all .4s ease;
}
.brand-nav a:active,
.brand-nav a:focus,
.brand-nav a:hover,
.brand-nav:not(.single-brand-nav) a.active,
.single-brand-nav a[data-order="first"] {
transition: all .4s ease;
}
.brand-nav.open a,
.single-brand-nav a[data-order="first"],
.brand-nav.brand-grid-nav a.active {
transition: all .4s ease-in-out;
}
}
@media only screen and (min-width: 37.5em) {
.brand-nav a:after {
bottom: -.625em;
}
}
@media only screen and ( min-width: 56.25em ) {
.brand-nav {
justify-content: flex-start;
align-items: center;
padding: 0;
}
.brand-nav ul {
position: relative;
display: flex;
align-items: flex-start;
padding: 0;
gap: var(--double-space);
padding: var(--single-space) var(--double-space);
}
.brand-nav ul li {
width: auto
}
.brand-nav.open li + li {
padding-top: 0;
}
.brand-nav a,
.brand-nav.open a,
.single-brand-nav a[data-order="first"] {
position: relative;
display: flex;
justify-content: center;
overflow: visible;
padding: 0;
background: transparent;
height: auto;
min-height: 0;
opacity: 1;
}
.brand-nav a:after {
content: '•';
font-size: 1.25em;
position: absolute;
color: var(--highlight);
bottom: -1em;
left: calc(50% - .2125em);
opacity: 0;
transition: opacity .5s ease-in-out;
}
.brand-nav:not(.single-brand-nav) a.active:after,
.single-brand-nav a[data-order="first"],
.single-brand-nav a[data-order="first"]:after {
opacity: 1;
transition: opacity .5s ease-in-out;
}
.brand-nav.open li:last-of-type a {
padding-bottom: 0;
}
.brand-nav.sticky + * {
margin-top: 3.75em;
}
.brand-nav.sticky + .brands-grid {
margin-top: 6.5em;
}
.brand-nav-toggle,
.no-js .brand-nav .brand-nav-chk,
.no-js .brand-nav .brand-nav-chk-label {
display: none;
}
}
.portfolio-intro .display-text h2 {
font-size: 1.25rem;
}
.brands-grid,
.foundation-brands {
display: grid;
grid-gap: var(--single-space);
padding-top: 4em;
}
.foundation-brands {
padding-top: 0;
}
.foundation-brands,
.brand-grid-nav ul {
max-width: var(--max-width-inset);
margin: 0 auto;
}
.foundation-brands-section .section-content-header h2 {
font-size: 1rem;
text-transform: uppercase;
letter-spacing: .2em;
color: var(--highlight-text);
}
.no-js .brand-grid-nav {
display: none;
}
@media only screen and (min-width: 37.5em) {
.portfolio-intro .display-text h2 {
font-size: 2rem;
}
.brands-grid,
.foundation-brands {
grid-template-columns: repeat(auto-fill, minmax(18em, 1fr) ) ;
}
.foundation-brands-section .section-content-header h2 {
font-size: 1.375rem;
margin-bottom: var(--triple-space);
}
.brands .display-text p {
padding: 0 1.5em;
}
}
@media only screen and ( min-width: 56.25em ) {
.portfolio-intro .display-text h2 {
font-size: 2.5rem;
}
.brand-nav.brand-grid-nav a,
.brand-nav.brand-grid-nav a.active {
padding: 0;
height: auto;
}
.brands-grid,
.foundation-brands {
grid-gap: var(--double-space);
padding-top: 0;
margin-top: 2.75em;
}
.foundation-brands {
max-width: 96em;
margin: 0 auto;
grid-template-columns: repeat(auto-fill, minmax(24em, 1fr) ) ;
}
.foundation-brands-section .section-content-header h2 {
font-size: 1.75rem;
margin-bottom: var(--quad-space);
}
.brands .display-text p {
padding: 0 1.5em;
}
}
.brand-card {
position: relative;
display: flex;
flex-wrap: wrap;
gap: var(--single-space);
flex-direction: column;
}
.brand-card-link {
position: absolute;
top: 0;
left: 0;
z-index: 1;
height: 100%;
width: 100%;
border-bottom: 1px solid var(--cream);
}
.brand-card-link::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: 1px;
background-color: var(--highlight);
opacity: 1;
transform: scale(0);
transform-origin: left;
}
@media (prefers-reduced-motion: no-preference) {
.brand-card-link::after {
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
}
.brand-card-link:active::after,
.brand-card-link:focus::after,
.brand-card-link:hover::after {
transform: scale(1);
}
.brand-card-image {
display: flex;
justify-content: center;
align-items: center;
position: relative;
background-color: var(--dark-warm-gray);
width: 100%;
height: auto;
aspect-ratio: 7 / 5;
}
.brand-card-image img {
width: 100%;
height: auto;
position: absolute;
top: 0;
left: 0;
object-fit: contain;
object-position: center;
}
.brand-card-image .brand-image-bg {
height: 100%;
object-fit: cover;
}
.brand-image-logo {
background-color: rgba(0,0,0,.6);
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.brand-card-image h3 {
font-size: 2em;
margin-bottom: 0;
padding: 1em;
text-align: center;
}
.brand-card-link:active ~ .brand-card-image .brand-image-logo,
.brand-card-link:focus ~ .brand-card-image .brand-image-logo,
.brand-card-link:hover ~ .brand-card-image .brand-image-logo {
background-color: rgba(0,0,0,.4);
}
.brand-card-text {
display: flex;
flex-wrap: wrap;
row-gap: var(--half-space);
flex-grow: 1;
}
.brand-card-categories {
display: flex;
flex-wrap: wrap;
column-gap: var(--mid-space);
row-gap: .25rem;
}
.brand-card-text h4.fifth-head {
color: var(--mid-gray);
margin: 0;
}
.brand-card-text h3 {
flex-basis: 100%;
font-size: 1.25rem;
color: var(--black);
margin: auto 0 var(--single-space);
}
.brand-card-text .brand-category {
font-size: .75rem;
text-transform: uppercase;
-webkit-transition: all .3s ease-in-out;
transition: color .3s ease-in-out;
}
.brand-card-link:active ~ .brand-card-text .brand-category,
.brand-card-link:focus ~ .brand-card-text .brand-category,
.brand-card-link:hover ~ .brand-card-text .brand-category {
color: var(--highlight);
}
/* brand pages (individual) */
.single-brand .header.dark .logo-svg {
fill: var(--white);
}
.single-brand section {
scroll-margin-top: 4em;
}
.single-brand .brand-nav + section {
scroll-margin-top: 2em;
}
@media only screen and ( min-width: 37.5em ) {
.single-brand .header.dark .logo-svg {
opacity: 0;
}
/* shown on menu open in dynamic css */
}
/* brange pages hero */
.brand-hero {
display: flex;
flex-wrap: wrap;
justify-content: center;
background: var(--white);
max-height: 100em;
overflow: hidden;
}
.brand-hero div {
flex: 1 0 100%;
display: flex;
justify-content: center;
align-items: center;
max-height: 100em;
}
.brand-hero-logo {
order: 2;
}
.brand-hero-logo img {
display: block;
padding: 0 4em;
margin: 0 auto;
width: 100%;
max-width: 43.75em;
}
.brand-hero-image {
position: relative;
}
.brand-hero-image img {
width: 100%;
height: auto;
object-fit: cover;
}
.brand-hero-image-desktop {
display: none;
}
.brand-hero-image-mobile {
width: 100%;
}
.brand-hero-image-overlay {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0) 50%)
}
@media only screen and (min-width: 37.5em) {
.single-brand .header.dark .light-logo {
display: none;
}
.single-brand .header.dark .dark-logo {
display: block;
}
.brand-hero {
flex-direction: row;
}
.brand-hero-logo {
order: 0;
}
.brand-hero-logo img {
padding: 0 2em;
}
.brand-hero-image-mobile {
display: none;
}
.brand-hero-image-desktop {
display: block;
}
.brand-hero div {
flex: 0 0 50%;
}
}
@media only screen and ( min-width: 56.25em) {
.brand-hero-logo img {
padding: 0 4em;
}
}
@media only screen and ( min-width: 72em) {
.brand-hero-logo img {
padding: 0 6em;
}
}
/* brand pages product collection */
.brand-product {
position: relative;
}
.brand-product-header {
text-align: center;
margin: 0 auto;
max-width: 56.25em;
padding-bottom: var(--single-space);
}
.brand-product-header h2 {
margin-top: -.25em;
}
.brand-product-nav {
display: flex;
justify-content: center;
padding: 0 1em;
padding-bottom: 0;
background-color: transparent;
}
.brand-product-nav ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--single-space);
margin: 0 auto;
}
.brand-product-nav ul li {
margin: 0;
width: 100%;
text-align: center;
list-style: none;
padding-left: 0;
}
.brand-product-nav button {
display: inline-block;
position: relative;
text-decoration: none;
padding: var(--half-space) var(--single-space);
font-family: var(--serif-font), serif;
font-size: 1rem;
color: var(--dark-warm-gray);
background-color: transparent;
border: none;
cursor: pointer;
transition: color .4s ease-in-out;
}
.brand-product-nav button:active,
.brand-product-nav button:focus,
.brand-product-nav button:hover,
.brand-product-nav button.active {
color: var(--black);
transition: color .4s ease-in-out;
}
.brand-product-nav button.active {
cursor: default;
pointer-events: none;
scale: 1.1;
}
.brand-product-nav button:after {
content: '•';
font-size: 1.25em;
position: absolute;
color: var(--highlight);
bottom: -.425em;
left: calc(50% - .2125em);
opacity: 0;
transition: opacity .5s ease-in-out;
}
.brand-product-nav button.active:after {
opacity: 1;
transition: opacity .5s ease-in-out;
}
#brand-product-nav-list {
margin-bottom: 1em;
}
.no-js #brand-product-nav-list li button {
color: var(--dark-warm-gray);
cursor: initial;
pointer-events: none;
}
.no-js #brand-product-nav-list li button.active:after {
display: none;
}
@media only screen and ( min-width: 37.5em ) {
.brand-product-nav ul li {
width: auto;
}
}
@media only screen and ( min-width: 56.25em ) {
.brand-product-nav ul {
gap: var(--double-space);
}
.brand-product-nav button:after {
bottom: -.625em;
}
}
.product-wrapper {
position: relative;
max-width: 76em;
margin: 0 auto;
}
.product-carousel-wrapper {
overflow: hidden;
}
.product-collections {
display: flex;
justify-content: flex-start;
transition: transform 1s ease-in-out;
}
.no-js .product-collections {
overflow-x: scroll;
}
.product-carousel-wrapper,
.product-collections {
margin: 0 auto;
width: 10em;
}
.brand-product .shop-link {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--double-space);
padding: var(--double-space) 0 0;
}
@media only screen and (min-width: 24em) {
.product-carousel-wrapper,
.product-collections {
width: 20em;
}
}
@media only screen and (min-width: 34em) {
.product-carousel-wrapper,
.product-collections {
width: 30em;
}
}
@media only screen and (min-width: 48em) {
.product-carousel-wrapper,
.product-collections {
width: 40em;
}
}
@media only screen and (min-width: 56.25em) {
.product-carousel-wrapper,
.product-collections {
width: 48em;
}
.brand-product .shop-link {
column-gap: var(--quad-space);
}
}
@media only screen and (min-width: 68em) {
.product-carousel-wrapper,
.product-collections {
width: 60em;
}
}
@media only screen and (min-width: 72em) {
.product-carousel-wrapper,
.product-collections {
width: 65em;
}
}
.product-collection {
font-size: 1rem;
flex: 0 0 auto;
display: flex;
min-width: 100%;
transform: translateX(0);
transition: transform .5s ease-in-out;
}
.product-collection.active {
transition: transform 1s ease;
}
.product-collection .product {
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: start;
align-items: center;
width: 10em;
text-align: center;
margin-bottom: 0;
margin-left: 0;
padding-left: 0;
list-style: none;
}
.product-collection .product h3.fourth-head {
font-size: 1.125rem;
}
@media only screen and (min-width: 56.25em) {
.product-collection .product {
width: 12em;
}
.product-collection .product h3.fourth-head {
font-size: 1.25rem;
}
}
@media only screen and (min-width: 72em) {
.product-collection .product {
width: 13em;
}
}
.product-collection .product .product-image,
.product-collection .product h3 {
padding: 0 .5em;
width: 100%;
}
.product-collection .product .product-image + h3 {
margin-top: 1em;
}
.product-collection .product h3 {
padding: 0 .5em;
}
.product-collection .product-image {
display: flex;
flex-direction: column;
justify-content: end;
align-items: center;
height: 18em;
width: auto;
flex-shrink: 0;
}
.product-collection .product-image img {
object-fit: contain;
max-height: 100%;
width: auto;
}
@media only screen and (min-width: 56.25em) {
.product-collection .product .product-image {
height: 24em;
}
}
.collection-controls {
display: none;
}
.no-js .collection-controls,
.collection-controls.show {
display: flex;
justify-content: center;
gap: var(--single-space);
margin-bottom: var(--single-space);
}
@media only screen and (min-width: 37.5em) {
.collection-controls.show {
position: absolute;
top: 40%;
width: 100%;
justify-content: space-between;
}
}
.collection-controls button {
height: 3em;
width: 3em;
color: var(--highlight);
background-color: transparent;
border: 1px solid;
border-radius: 50%;
padding: 0;
cursor: pointer;
transition: color .3s ease-in-out;
}
.collection-controls button svg {
stroke: var(--highlight);
height: 1.5em;
width: auto;
padding-top: .125em;
padding-left: .125em;
transition: stroke .3s ease-in-out;
}
.collection-controls button.prev svg {
transform: scaleX(-1);
padding-left: .375em;
}
.collection-controls button:hover,
.collection-controls button:active,
.collection-controls button:focus-visible {
color: var(--black);
}
.no-js .collection-controls button,
.collection-controls button:hover.disabled,
.collection-controls button.disabled {
color: var(--warm-gray);
cursor: default;
pointer-events: none;
}
.no-js .collection-controls button svg,
.collection-controls button:hover.disabled svg,
.collection-controls button.disabled svg {
stroke: var(--warm-gray);
}
.collection-controls.active button {
cursor: pointer;
pointer-events: initial;
color: var(--highlight);
}
.collection-controls.active button:hover {
color: var(--black);
border-color: var(--black);
}
.collection-controls button:hover svg,
.collection-controls button:active svg,
.collection-controls button:focus-visible svg,
.collection-controls.active button:hover svg {
stroke: var(--black);
}
/* brand pages assets section */
.page-section-brand-assets h2 {
text-align: center;
}
.brand-assets-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--single-space);
}
.brand-asset {
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin: 0 7.14%;
transition: all .3s ease-in-out;
}
.brand-asset img {
width: 100%;
height: auto;
aspect-ratio: 20 / 9;
object-fit: cover;
}
.brand-asset a {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, .5);
display: flex;
justify-content: center;
align-items: center;
color: var(--white);
text-decoration: none;
transition: all .4s ease-in-out;
}
.brand-asset h3 {
margin-bottom: 0;
color: var(--white);
}
.brand-asset a:active,
.brand-asset a:focus,
.brand-asset a:hover {
background-color: rgba(0, 0, 0, .35);
transition: all .4s ease-in-out;
}
.brand-asset:active,
.brand-asset:focus,
.brand-asset:hover {
transform: scale(1.015);
transition: all .5s ease-in-out;
}
@media only screen and (min-width: 37.5em) {
.brand-asset {
flex: 0 0 calc(50% - .5em);
margin: 0;
}
.brand-asset h3 {
font-size: 1.625rem;
}
}
@media only screen and (min-width: 56.25em) {
.brand-assets-grid {
gap: var(--double-space);
}
.brand-asset {
flex: 0 0 calc(50% - 1em);
margin: 0;
}
.brand-asset h3 {
font-size: 2rem;
}
}
@media only screen and (min-width: 72em) {
.brand-assets-grid {
margin: 0 8.33% var(--double-space);
}
}
/* brand pages links section */
.brand-links div:first-child {
background-color: var(--warm-gray);
}
.brand-links div:nth-of-type(2) {
background-color: var(--light-warm-gray);
}
.brand-links .website {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
margin: 0 auto;
padding: 4em var(--double-space);
line-height: 1.7;
}
.brand-links .website p {
color: var(--black);
}
.brand-links a {
display: inline-block;
}
/* heritage brand page */
.heritage-map {
padding: var(--double-space) 0;
}
.heritage-map.numbers > .content {
flex-wrap: wrap;
min-height: unset;
max-height: unset;
}
.heritage-map .large-image-overlay {
position: static;
background: none;
}
.heritage-map .large-image-text-wrap {
padding-top: var(--single-space);
}
.heritage-collection .brand-grid-nav .cat-list-item[data-slug="spirits-and-mixers"] > span {
display: none
}
.heritage-collection .brand-grid-nav .cat-list-item[data-slug="spirits-and-mixers"]::before {
content: "Spirits";
}
@media only screen and (min-width: 56.25em) {
.page-section-large-image.heritage-map.numbers > .content {
max-height: 100%;
max-width: 72em;
}
.heritage-map.numbers .large-image-overlay {
background: linear-gradient(rgba(255,255,255,0),rgba(255,255,255,.6));
}
.page-section-large-image.heritage-map.numbers {
padding-bottom: 4em;
}
}
/* news page grid */
.news-page {
background-color: var(--cream);
}
.news-page-content {
display: flex;
flex-wrap: wrap;
gap: 2em;
max-width: var(--max-width-full);
margin: 0 auto;
}
.news-grid {
order: 1;
padding: var(--single-space);
display: grid;
column-gap: var(--double-space);
row-gap: var(--quad-space);
}
.news-card {
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.news-card-link,
.news-card-image,
.news-card-image img {
width: 100%;
height: auto;
aspect-ratio: 7 / 4;
}
.news-card-image,
.news-card-image img {
transition: all .4s ease-in-out;
}
.news-card-link {
text-decoration: none;
}
.news-card-link:active .news-card-image,
.news-card-link:focus .news-card-image,
.news-card-link:hover .news-card-image {
background-color: rgba(255,255,255,.25);
transform: scale(1.02);
transition: all .4s ease-in-out;
}
.news-card-image {
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
background-color: var(--warm-gray);
margin-bottom: var(--single-space);
}
.news-card-image img {
object-fit: cover;
}
.news-date {
font-family: var(--sans-font), sans-serif;
color: var(--dark-warm-gray);
font-size: .75rem;
font-weight: 400;
text-transform: uppercase;
}
.news-card h2.fourth-head {
line-height: 1.4;
}
.news-card .news-excerpt {
margin-bottom: var(--mid-space);
}
.news-card-links {
margin: auto 0 0;
}
.news-card-link + .news-card-link::before {
content: "•";
font-size: .75em;
padding: 0 .75em;
}
.news-page-content .load-more {
order: 2;
width: 100%;
text-align: center;
margin-bottom: var(--single-space);
}
.news-grid-contact {
order: 3;
width: 100%;
margin: var(--single-space) var(--single-space) 0;
padding: var(--double-space) 0;
border-top: 1px solid var(--warm-gray);
}
@media only screen and (min-width: 37.5em) {
.news-grid {
grid-template-columns: repeat(auto-fill, minmax(18em, 1fr) ) ;
}
}
@media only screen and (min-width: 56.25em) {
.news-grid {
flex: 1 0 calc(67% - 2em);
order: 2;
grid-template-columns: repeat(auto-fill, minmax(22em, 1fr) ) ;
padding: 0;
padding-left: var(--double-space);
border-left: 1px solid var(--warm-gray);
}
.news-grid-contact {
flex: 1 0 calc(33% - 2em);
order: 1;
margin: 0;
padding: 0;
border-top: none;
}
.news-page-content .load-more {
order: 3;
margin: 2em 0 2em calc(33% + 3em);
}}
@media only screen and (min-width: 75em) {
.news-grid-contact {
/* flex: 1 0 30%; */
}
.news-grid {
grid-template-columns: repeat(auto-fill, minmax(22em, 1fr) ) ;
}
}
@media only screen and (min-width: 90em) {
.news-grid {
grid-template-columns: repeat(auto-fill, minmax(24em, 1fr) ) ;
}
}
/* single news page */
.single-news .header.light {
background-color: var(--cream);
}
.single-news .main {
padding-top: 5em;
background-color: var(--cream);
}
.back-link {
display: block;
position: relative;
padding: .625rem var(--single-space);
font-family: var(--sans-font), sans-serif;
color: var(--dark-warm-gray);
font-size: .875rem;
}
.back-link .carat {
stroke: var(--dark-warm-gray);
transform: rotate(180deg);
height: 10px;
width: auto;
margin-right: .75em;
text-decoration: none;
}
a.back-link:active,
a.back-link:focus,
a.back-link:hover {
color: var(--black);
}
a.back-link:active .carat ,
a.back-link:focus .carat ,
a.back-link:hover .carat {
stroke: var(--black);
}
.news-article {
padding: var(--double-space) 0;
}
.single-news .news-date {
text-align: center;
margin: 0;
}
.news-title {
max-width: 18em;
font-size: 1.75rem;
line-height: 1.3;
text-align: center;
margin: 0 auto;
padding: var(--double-space);
}
.news-image {
display: flex;
justify-content: center;
}
.news-image img {
display: inline-block;
width: 100%;
max-width: 75em;
margin: 0 auto;
}
.archive-content .news-image img {
max-width: 25em;
}
.news-content {
padding: var(--double-space);
max-width: 40em;
}
.news-content p {
overflow: hidden;
text-overflow: ellipsis;
}
.news-content h2 {
font-size: 1.75em;
}
.news-content h3,
.news-content h4 {
font-size: 1.25em;
}
.news-content .news-excerpt p {
font-size: 1.125em;
font-family: var(--serif-font), serif;
padding-bottom: 1em;
border-bottom: 1px solid var(--warm-gray);
margin-bottom: 1.5em;
}
.archive-content .news-content p.Default,
.archive-content .news-content p.Default span,
.archive-content .news-content h2 > b > span {
font-size: 1em !important;
line-height: 1.8 !important;
}
.archive-content .news-content img {
display: none;
}
.news-pdf {
margin-top: var(--double-space);
}
.news-archive-link {
text-align: center;
}
@media only screen and (min-width: 37.5em) {
.news-article {
padding-top: var(--triple-space);
}
.news-title {
font-size: 2rem;
padding-bottom: var(--triple-space);
}
.news-content {
padding: var(--triple-space) var(--double-space);
}
.news-content .news-excerpt p {
font-size: 1.25em;
}
}
@media only screen and (min-width: 56.25em) {
.single-news .main {
padding-top: 9em;
}
.news-article {
padding-top: var(--quad-space);
}
.news-title {
font-size: 2.25rem;
padding-bottom: var(--quad-space);
}
.news-content {
padding: var(--quad-space) var(--double-space);
max-width: 50em;
}
.news-content .news-excerpt p {
font-size: 1.5em;
}
}
/* tasting room page */
.tasting-room {
display: flex;
flex-wrap: wrap;
justify-content: center;
scroll-margin-top: 1em;
}
.tasting-room-image {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.tasting-room-image img {
width: 100%;
}
.tasting-room-content {
display: flex;
flex-wrap: wrap;
align-items: center;
margin: var(--single-space) auto var(--quad-space);
width: 85.7%;
}
.tasting-room-content > * {
width: 100%;
}
.tasting-room-content h3 {
margin: var(--single-space) 0 0;
}
.tasting-room-address,
.tasting-room-telephone {
margin-bottom: 0;
}
.tasting-room-content .cta-wrap {
margin-top: var(--double-space);
}
@media only screen and (min-width: 37.5em) {
.tasting-room-image {
width: 71.4%;
margin: 0 auto;
}
.tasting-room-content {
width: 57.1%;
}
}
@media only screen and (min-width: 56.25em) {
.tasting-rooms-grid {
display: flex;
flex-wrap: wrap;
row-gap: 6em;
padding-bottom: 6em;
}
.tasting-room {
display: grid;
grid-template-columns: repeat(12, 1fr);
align-items: center;
scroll-margin-top: 2em;
}
.tasting-room-image {
width: 100%;
grid-column: 1 / span 6;
margin: 0;
}
.tasting-room:nth-of-type(even) .tasting-room-image {
grid-column: 7 / span 6;
}
.tasting-room-content {
width: 100%;
grid-column: 8 / span 5;
margin: 0;
display: flex;
flex-wrap: wrap;
}
.tasting-room:nth-of-type(even) .tasting-room-content {
order: -1;
grid-column: 1 / span 5;
}
}
@media only screen and (min-width: 72em) {
.tasting-rooms-grid {
row-gap: 8em;
padding-bottom: 8em;
}
.tasting-room-image {
grid-column: 2 / span 5;
}
.tasting-room:nth-of-type(even) .tasting-room-image {
grid-column: 7 / span 5;
}
.tasting-room-content {
grid-column: 8 / span 3;
}
.tasting-room:nth-of-type(even) .tasting-room-content {
grid-column: 3 / span 3;
}
}
/* product locator page */
.locator-links .card {
max-width: 20em;
}
.locator-links .card-img {
aspect-ratio: 3 / 1;
}
.locator-links .card-img img {
padding: 1em;
object-fit: contain;
}