/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */ /** * 1. Change the default font family in all browsers (opinionated). * 2. Prevent adjustments of font size after orientation changes in IE and iOS. */ html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } /** * Remove the margin in all browsers (opinionated). */ body { margin: 0; } /* HTML5 display definitions ========================================================================== */ /** * Add the correct display in IE 9-. * 1. Add the correct display in Edge, IE, and Firefox. * 2. Add the correct display in IE. */ article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary { /* 1 */ display: block; } /** * Add the correct display in IE 9-. */ audio, canvas, progress, video { display: inline-block; } /** * Add the correct display in iOS 4-7. */ audio:not([controls]) { display: none; height: 0; } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Add the correct display in IE 10-. * 1. Add the correct display in IE. */ template, [hidden] { display: none; } /* Links ========================================================================== */ /** * 1. Remove the gray background on active links in IE 10. * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. */ a { background-color: transparent; /* 1 */ -webkit-text-decoration-skip: objects; /* 2 */ } /** * Remove the outline on focused links when they are also active or hovered * in all browsers (opinionated). */ a:active, a:hover { outline-width: 0; } /* Text-level semantics ========================================================================== */ /** * 1. Remove the bottom border in Firefox 39-. * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ } /** * Prevent the duplicate application of `bolder` by the next rule in Safari 6. */ b, strong { font-weight: inherit; } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * Add the correct font style in Android 4.3-. */ dfn { font-style: italic; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /** * Add the correct background and color in IE 9-. */ mark { background-color: #ff0; color: #000; } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Embedded content ========================================================================== */ /** * Remove the border on images inside links in IE 10-. */ img { border-style: none; } /** * Hide the overflow in IE. */ svg:not(:root) { overflow: hidden; } /* Grouping content ========================================================================== */ /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, pre, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct margin in IE 8. */ figure { margin: 1em 40px; } /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /* Forms ========================================================================== */ /** * 1. Change font properties to `inherit` in all browsers (opinionated). * 2. Remove the margin in Firefox and Safari. */ button, input, select, textarea { font: inherit; /* 1 */ margin: 0; /* 2 */ } /** * Restore the font weight unset by the previous rule. */ optgroup { font-weight: bold; } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { /* 1 */ overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` * controls in Android 4. * 2. Correct the inability to style clickable types in iOS and Safari. */ button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; /* 2 */ } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Change the border, margin, and padding in all browsers (opinionated). */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * Remove the default vertical scrollbar in IE. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10-. * 2. Remove the padding in IE 10-. */ [type="checkbox"], [type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding and cancel buttons in Chrome and Safari on OS X. */ [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * Correct the text style of placeholders in Chrome, Edge, and Safari. */ ::-webkit-input-placeholder { color: inherit; opacity: 0.54; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } html { box-sizing: border-box; } *, *::after, *::before { box-sizing: inherit; } figure img { display: block; max-width: 100%; width: 100%; height: auto; } .category-block { margin: 0; padding: 18px 0; border-top: 1px solid #efefef; border-bottom: 1px solid #efefef; } .category-block-heading { font-family: freight-sans-pro, sans-serif; font-size: 24px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; text-align: left; margin: 0 0 1em 0; padding: 0; } .alternate2-group .category-block-heading { margin: 0; } .category-articles { display: flex; flex-direction: row; flex-wrap: wrap; margin: 0; padding: 0; } .category-feature { margin: 0 0 18px 0; padding: 0 0 18px 0; } .category-stack { display: block; margin: 0; padding: 0; flex: 1; } .category-stack .ad-slot { margin-bottom: 18px; padding-bottom: 18px; } @media screen and (min-width: 640px) { .category-feature { border-bottom: none; flex: 1; } .category-stack { flex: 1; margin-right: 20px; } .category-stack .archive-item:first-of-type { border-top: none; padding-top: 0; } } @media screen and (min-width: 1024px) { .alternate2-group .category-block { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; } } @media screen and (min-width: 1280px) { .category-articles { flex-wrap: nowrap; } } #wpadminbar { position: fixed; } body.admin-bar .primary-nav { top: 46px; } @media all and (min-width:782px) { body.admin-bar .primary-nav { top: 32px; } } @media all and (min-width: 1116px) { body.admin-bar .primary-nav { top: auto; } } body { margin: 60px 0 0 0; width: 100%; overflow-x: hidden; background: white; } @media screen and (min-width: 1116px) { body { margin: 0; } } h1, h2, h3, h4, h5, h6 { font-weight: normal; line-height: 1.236; } hr { margin: 1em 0; padding: 0; height: 0; border: none; border-top: 1px solid #efefef; } figure { margin: 0; } .alignnone, .alignright, .aligncenter, .alignleft, .wp-caption.alignnone, .wp-caption.alignright, .wp-caption.aligncenter, .wp-caption.alignleft { display: block; max-width: 100%; width: 100%; height: auto; margin: 24px auto; } @media screen and (min-width: 768px) { .alignleft, .alignright, .wp-caption.alignleft, .wp-caption.alignright { display: inline-block; max-width: 50%; } .alignright, .wp-caption.alignright { float: right; margin: 24px 0 24px 24px; } .aligncenter, .wp-caption.aligncenter { max-width: 50%; } .alignleft, .wp-caption.alignleft { float: left; margin: 24px 24px 24px 0; } } .swiper { padding-bottom: 24px !important; } .swiper-button-next, .swiper-button-prev { color: #00b9f2 !important; } .swiper-pagination-fraction { font-family: freight-sans-pro, sans-serif; font-size: 18px; display: inline-block !important; padding: 6px 9px; bottom: -0px !important; color: white; background-color: var(--main-highlight-color); border-radius: 18px; right: 0 !important; left: unset !important; width: auto !important; } .highlight { color: var(--main-highlight-color); } .page-nav { display: flex; justify-content: center; margin: 18px 0 36px 0; } .page-next, .page-previous { font-family: freight-sans-pro, sans-serif; font-size: 16px; font-weight: 600; text-transform: uppercase; margin: 0 1em; padding: 6px 9px; border: none; border-radius: 4px; background-color: var(--main-highlight-color); } .page-next a, .page-previous a { color: white; } .social { display: block; text-align: center; list-style-type: none; margin: 30px 0 20px 0; padding: 0; } .social li { display: inline; margin: 0 10px; } .social a { color: var(--main-highlight-color); } .social a:hover { color: var(--main-highlight-color); } .social .bi { width: 30px; height: 30px; } .secondary-nav { display: none; } @media screen and (min-width: 1116px) { .secondary-nav { display: block; width: 100%; position: relative; margin-bottom: 24px; background-color: var(--main-highlight-color); ; color: #ffffff; } .secondary-nav .menu { max-width: 1440px; margin-left: auto; margin-right: auto; padding-left: 18px; padding-right: 18px; background-color: transparent; display: flex; justify-content: space-between; width: 100%; margin-top: 0; margin-bottom: 0; font-family: freight-sans-pro, sans-serif; font-weight: 700; text-transform: uppercase; list-style: none; } .secondary-nav .menu .menu-item { vertical-align: middle; line-height: 36px; font-size: 16px; } .secondary-nav .menu .menu-item a { display: inline-block; white-space: nowrap; color: white; } .secondary-nav .menu .menu-item a:hover { text-decoration: underline; } } @media screen and (min-width: 1476px) { .secondary-nav .menu { padding-left: 0; padding-right: 0; } } .site-header-block { position: relative; display: block; } .masthead { display: none; } .menu-trigger { position: relative; display: inline-block; height: 48px; width: 48px; cursor: pointer; transform: rotate(0deg); transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99); user-select: none; -webkit-tap-highlight-color: transparent; } .menu-trigger #trigger { width: 1em; height: .5em; position: relative; display: block; margin: -.25em auto 0; top: 50%; } .menu-trigger #trigger .bars { width: 100%; height: 2px; display: block; position: relative; background: black; transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99); } .menu-trigger #trigger .bars.top { transform: translateY(0px) rotate(0deg); } .menu-trigger #trigger .bars.bottom { transform: translateY(6px) rotate(0deg); } .menu-trigger #trigger span { display: none; } .search-trigger { display: inline-block; position: absolute; right: 0; cursor: pointer; } #magnifying-glass { display: block; line-height: 61px; text-align: center; } #magnifying-glass svg { height: 40px; width: 40px; vertical-align: middle; } .header-search-form { display: block; margin: 0; padding: .5em; } .header-search-form .search-query { width: 100%; } .mobile-search { display: none; } .mobile-search.opened { display: block; background-color: white; } .search-trigger .search-close { display: none; } .search-trigger.pulled .search-open { display: none; } .search-trigger.pulled .search-close { display: block; } .site-header-block .logo { background-color: transparent; display: inline-block; position: absolute; line-height: 48px; left: 50%; transform: translateX(-50%); } .site-header-block .logo img { max-height: 40px; height: auto; vertical-align: middle; } .primary-nav { position: fixed; z-index: 100; display: block; top: 0; left: 0; width: 100%; color: black; background-color: rgba(255, 255, 255, 0.75); box-shadow: 0px 3px 6px rgba(239, 239, 239, 0.75); -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px); } .primary-nav .menu { font-family: freight-sans-pro, sans-serif; font-size: 18px; text-transform: uppercase; text-align: center; position: relative; list-style: none; display: none; } .primary-nav .menu .menu-item { margin: 6px 0; } .primary-nav .menu .menu-item a { display: block; color: black; padding: 9px 0; } .primary-nav .menu .menu-item a:hover { color: var(--main-highlight-color); } .primary-nav .sub-menu { display: block; padding-left: 0; margin: 0 0 18px 0; text-transform: none; font-family: freight-sans-pro, sans-serif; font-size: 16px; font-weight: normal; } .primary-nav .sub-menu .menu-item { list-style-type: none; letter-spacing: 1px; padding: 0; margin: 0; } .primary-nav .menu .sub-menu .menu-item a:hover { color: var(--main-highlight-color); } .primary-nav.menu-opened { height: 100%; overflow-y: scroll; background-color: white; transition: all 0.314s ease-in; } .primary-nav.menu-opened .menu-trigger { transform: rotate(90deg); } .primary-nav.menu-opened .menu-trigger #trigger .bars { transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition-delay: 0.2s; } .primary-nav.menu-opened .menu-trigger #trigger .bars.top { transform: translateY(6px) rotate(45deg); } .primary-nav.menu-opened .menu-trigger #trigger .bars.bottom { transform: translateY(4px) rotate(-45deg); } .primary-nav.menu-opened .menu { padding: 0 12px; display: block; } @media screen and (min-width: 1116px) { .site-header-block .mobile-only { display: none !important; } .site-header-block .logo { position: relative; left: 0; transform: none; } .site-header-block .logo a { float: left; line-height: unset; } .site-header-block .logo img { max-width: 240px; max-height: unset; } .site-header-block .tag-line { font-family: freight-sans-pro, sans-serif; font-size: 18px; text-transform: uppercase; line-height: 60px; float: left; margin-left: 1em; } .masthead { display: flex; justify-content: space-between; position: relative; } .primary-nav { position: relative; background-color: white; box-shadow: none; } .primary-nav .menu { display: flex; justify-content: space-between; height: auto; margin: 0 60px 0 0; padding: 0; border-bottom: 1px solid #efefef; } .mobile-search.opened { position: absolute; right: 0; top: 60px; display: block; background-color: white; border: 1px solid var(--main-highlight-color); width: 300px; z-index: 999; } } @media screen and (min-width: 1080px) { .primary-nav .menu { font-size: 20px; font-weight: 700; } .primary-nav .menu>.menu-item { line-height: 3; margin: 0; padding: 0; } .primary-nav .menu .menu-item a { display: block; white-space: nowrap; padding: 0; } .primary-nav .menu-item-has-children .sub-menu { display: block; position: absolute; top: 100%; right: 9999px; border-bottom: 1px solid #efefef; border-left: 1px solid #efefef; border-right: 1px solid #efefef; background-color: #ffffff; padding: 0 18px 12px 18px; margin: 0; min-width: 240px; text-align: center; opacity: 0; transition: opacity 0.15s linear; } .primary-nav .menu-item-has-children:hover .sub-menu { right: 50%; opacity: 1; transform: translateX(50%); transition: opacity .15s linear; } } @media screen and (min-width: 1080px) { .primary-nav .menu-item:first-child.menu-item-has-children:hover .sub-menu { right: 18px; } .primary-nav .menu-item:last-child.menu-item-has-children:hover .sub-menu { right: 100%; } .primary-nav .menu .menu-item .sub-menu li a { white-space: nowrap; line-height: 1; padding: .5em 0; } .primary-nav .menu .menu-item-has-children { position: relative; } .primary-nav .menu li.hover .sub-menu { visibility: visible; opacity: 1; z-index: 1; } } @media screen and (min-width: 1636px) { .primary-nav .menu-item:first-child.menu-item-has-children:hover .sub-menu, .primary-nav .menu-item:last-child.menu-item-has-children:hover .sub-menu { right: 50%; } } .newsletter-signup { margin: 1.125em 0 -1.125em 0; } .newsletter-signup div { background-color: var(--main-highlight-color); color: white; padding: 1.125em; margin: 0 auto; max-width: 80em; text-align: center; } .newsletter-signup h2 { font-size: 1.125em; text-transform: uppercase; font-family: freight-sans-pro, sans-serif; margin: 0.5em 0; } .newsletter-signup p { font-family: freight-sans-pro, sans-serif; font-size: 1em; } .newsletter-signup a { display: block; vertical-align: middle; padding: 0.5em 1.125em; margin: 1.125em auto 1.125em auto; position: relative; background-color: white; color: var(--main-highlight-color); max-width: 300px; } @media screen and (min-width: 57.5em) { .newsletter-signup a { display: inline-block; margin: 0 1.125em 0 1.125em; } } .site-footer-block { font-family: freight-sans-pro, sans-serif; background-color: #f0f0f0; color: black; padding: 36px 0; } .footer-tag-line { font-family: freight-sans-pro, sans-serif; font-size: 16px; line-height: 2; text-transform: uppercase; } .site-footer-block .logo { margin: 0 auto 36px auto; text-align: center; } .site-footer-block .logo a { display: inline-block; } .site-footer-block .logo img { max-width: 240px; height: auto; } .footer-widgets { display: flex; flex-direction: column; margin: 24px auto; padding: 0 12px; max-width: 1440px; justify-content: space-between; align-items: center; } .footer-widget { text-align: center; flex: 1 0 0; margin: 0 0 24px 0; } .footer-widget:last-child { margin-right: 0; } .footer-widget h3 { font-family: freight-sans-pro, sans-serif; font-size: 18px; font-weight: 700; margin: 1em 0; letter-spacing: 2px; } .footer-widget .textwidget { font-size: 14px; line-height: 1.618; letter-spacing: 1px; } .footer-widget .menu { list-style-type: none; padding: 0; margin: 1em 0; font-size: 14px; line-height: 1.618; letter-spacing: 1px; } .footer-widget .menu a { color: black; } .footer-widget .menu a:hover { color: var(--main-highlight-color); ; } @media screen and (min-width: 768px) { .footer-widgets { flex-direction: row; flex-wrap: wrap; align-items: flex-start; } .footer-widget { flex: 1 0 50%; } } @media screen and (min-width: 1280px) { .footer-widgets { flex-wrap: nowrap; } .footer-widget { flex: 1 0 20%; } } a { color: var(--main-highlight-color); text-decoration: none; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: black; } h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover { color: var(--main-highlight-color); text-decoration: none; } header h1 { font-family: freight-display-pro, serif; font-size: 1.75em; } header h2 { font-family: freight-display-pro, serif; font-size: 1.5em; } .lead-articles { display: block; } .lead-article { position: relative; background-size: cover; background-repeat: no-repeat; min-height: 300px; margin-bottom: 6px; } .lead-article-category, .featured-article-category { display: inline-block; padding: 3px 6px; margin-bottom: 6px; background-color:var(--main-highlight-color); color: white; } .featured-articles { display: grid; grid-template-columns: repeat(2,1fr); grid-template-rows: repeat(2,1fr); gap: 6px; min-height: 400px; } .featured-article { position: relative; background-size: cover; background-repeat: no-repeat; } .lead-article-header, .featured-article-header { position:absolute; bottom: 0; color:white; padding: 10px; } .lead-article-title { font-size: 28px; font-weight: bold; margin: 0; } .featured-article-title { font-size: 20px; font-weight: bold; margin: 0; } .lead-article-link, .featured-article-link { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } @media screen and (min-width: 768px) { .lead-articles { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(1, 1fr); gap: 6px; min-height: 400px; margin: 30px 0 60px 0; } .lead-article, .featured-articles { min-height: auto; margin-bottom: 0; } } @media screen and (min-width: 1024px) { .alternate-group { display: grid; grid-template-columns: 1fr 1fr 300px; gap: 20px; margin: 60px 0; } .alternate2-group { display: grid; grid-template-columns: 1fr 300px; gap: 20px; margin: 60px 0; } } @media screen and (min-width: 1280px) { .lead-articles { min-height: 600px; } .lead-article-title { font-size: 32px; } .featured-article-title { font-size: 24px; } } .page-template-subscribe section, .page-template-subscribe hr { max-width: 80em; margin-left: auto; margin-right: auto; } .page-template-subscribe section::after, .page-template-subscribe hr::after { clear: both; content: ""; display: block; } .page-template-subscribe h2 { font-family: freight-sans-pro, sans-serif; font-size: 1.25em; text-transform: uppercase; margin: 1.125em 0; letter-spacing: 4px; font-weight: normal; } @media screen and (min-width: 57.5em) { .page-template-subscribe h2 { font-size: 1.5em; } } .page-template-subscribe .search-header h1, .page-template-subscribe .search-header h3 { letter-spacing: 4px; } .page-template-subscribe .search-header .search-form { text-align: center; top: 0; transform: none; } .page-template-subscribe .search-header .search-form form { display: inline-block; } .page-template-subscribe .section-options nav::after { clear: both; content: ""; display: block; } .feature { position: relative; margin: 30px 0 0 0;; } .feature-image { margin: 0; } .feature-header { padding: 18px; text-align: center; } .feature-title { font-family: freight-display-pro, serif; font-size: 24px; font-weight: 600; word-spacing: 2px; margin: 0 0 .5em 0; } .feature-header p { font-family: freight-sans-pro, sans-serif; font-size: 18px; line-height: 1.382; margin: 12px 0; } @media screen and (min-width: 768px) { .feature-title { font-size: 32px; } .feature-header p { font-size: 20px; } } @media screen and (min-width: 1024px) { .feature-header { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); background-color: white; width: auto; min-width: 50%; padding: 18px; border-top-left-radius: 10px; border-top-right-radius: 10px; } } .article-block { display: block; margin-top: 36px; margin-bottom: 36px; } .single-sponsored_content .article-block { max-width: 756px; } .single .article-block { max-width: 1080px; } .without-sidebar { max-width: 756px; margin: 36px auto; } @media screen and (min-width: 1080px) { .listing-content { display: grid; grid-template-columns: 1fr 300px; grid-gap: 32px; } } .article-header { margin-top: 24px; margin-bottom: 24px; } .article-title { font-family: freight-display-pro, serif; font-weight: 700; font-size: 28px; word-spacing: 2px; margin: .5em 0; } .article-title-alt { font-family: freight-sans-pro, sans-serif; font-weight: 700; font-style: normal; font-size: 32px; text-align: center; text-transform: uppercase; } .single-sponsored_content .article-title { font-family: freight-sans-pro, sans-serif; font-weight: 700; } .article-sponsored { margin-top: 78px; } @media screen and (min-width: 640px) { .article-sponsored { margin-top: 18px; } } .article-taxonomy { display: block; font-family: freight-display-pro, serif; font-size: 15px; line-height: 1.382; text-transform: uppercase; letter-spacing: 1px; margin: 0; } .article-notice { display: block; font-family: freight-display-pro, serif; font-size: 16px; margin: 1em 0; } .article-deck { font-family: freight-display-pro, serif; font-size: 18px; line-height: 1.382; color: #757575; } .single-sponsored_content .article-deck { font-size: 20px; } .article-figure { position: relative; margin: 0 0 18px 0; } .article-figure-caption { padding: 12px 0; } .article-byline { display: flex; flex-direction: row; align-items: center; } .article-byline-photo { height: 48px; width: 48px; margin-right: 16px; -webkit-clip-path: circle(24px at 24px 24px); clip-path: circle(24px at 24px 24px); } .sponsored-content-title { font-family: freight-sans-pro, sans-serif; font-weight: 700; font-size: 20px; margin: .5em 0; } .sponsored-content-byline { display: block; font-family: freight-display-pro, serif; text-transform: uppercase; font-size: 12px; color: #00b9f2; letter-spacing: 1px; margin: 0; } .sponsored-content-notice { font-family: freight-sans-compressed-pro, sans-serif font-size: 20px; font-weight: normal; margin: 48px 0; padding: 24px 0; border-top: 3px double #c0c0c0; border-bottom: 3px double #c0c0c0; text-align: left; } @media screen and (min-width: 640px) { .sponsored-content-byline { margin: 1em 0; } } @media screen and (min-width: 1024px) { .article-title { font-size: 34px; } .article-deck { font-size: 20px; } .with-sidebar .article-content { display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-gap: 60px; } .sponsored-content-title { font-size: 24px; } .sponsored-content-notice { font-size: 24px; text-align: center; } } .article-content { font-family: freight-text-pro, serif; font-size: 20px; line-height: 1.618; } .article-footer { margin: 1em 0; padding: 0; border-top: 1px solid #efefef; border-bottom: 1px solid #efefef; } .single-sponsored_content .article-content { font-family: freight-display-pro, serif; font-size: 18px; line-height: 1.618; } .single-sponsored_content a { color: #00b9f2; } .article-content h2, .article-content h3, .article-content h4, .article-content h5, .article-content h6 { font-family: freight-display-pro, serif; font-weight: 700; } .single-sponsored_content .article-content h2, .single-sponsored_content .article-content h3, .single-sponsored_content .article-content h4, .single-sponsored_content .article-content h5, .single-sponsored_content .article-content h6 { font-family: freight-sans-pro, sans-serif; font-weight: 700; } .article-content h2 { font-size: 28px; } .article-content h3 { font-size: 24px; } .article-content h4, .article-content h5, .article-content h6 { font-size: 20px; } .article-content p { margin: 0 0 1em 0; } .article-content ul, .article-content ol { font-family: freight-display-pro, serif; font-size: 18px; line-height: 1.618; padding-left: 36px; margin: 24px 0; } .article-content ul { list-style-type: square; } .article-content ul li { padding: 0 0 18px 0; } .article-content ol li { margin: 0 0 18px 0; } .gallery-block { margin: 0 12px; } .gallery-content { margin-top: 18px; overflow: hidden; } .gallery-title { font-family: freight-display-pro, serif; font-weight: 700; font-size: 24px; } .article-content .gallery { margin: 24px 0; } .magazine-header { display: flex; flex-direction: column; justify-content: space-evenly; text-align: center; margin: 36px 0; } .magazine-title { font-family: freight-sans-pro, sans-serif; font-size: 28px; letter-spacing: 2px; text-transform: uppercase; margin: 12px 0; } .magazine-cover { margin: 0 0 24px 0 } .magazine-cover-image { display: block; max-width: 360px; width: 100%; height: auto; margin: 0 auto; border: 1px solid #efefef; } .magazine-cta { display: flex; justify-content: center; margin: 12px 0; } .magazine-cta .button { margin: 0 8px; } .magazine-toc { max-width: 960px; margin: 36px auto; padding: 0 18px; } .magazine-section-heading { font-family: freight-sans-pro, sans-serif; font-size: 24px; letter-spacing: 6px; text-transform: uppercase; margin: 36px 0 12px 0; padding-bottom: 12px; text-align: center; border-bottom: 1px solid #efefef; } @media screen and (min-width: 972px) { .magazine-title { font-size: 32px; } .magazine-toc { padding: 0; } } .sponsored-flag { display: inline-block; font-size: 14px; color: #00b9f2; text-transform: uppercase; letter-spacing: 1px; border: 1px solid; padding: 3px 6px 1px 6px; margin: 9px 0; } .sponsored-content-byline { display: block; font-family: freight-sans-pro, sans-serif; text-transform: uppercase; font-size: 14px; color: #00b9f2; letter-spacing: 1px; margin: 0 0 12px 0; } .container { max-width: 1440px; margin-left: auto; margin-right: auto; padding-left: 18px; padding-right: 18px; } @media all and (min-width: 1440px) { .container { padding-left: 0; padding-right: 0; } } .section-lede {} .section-lede-title { font-family: freight-display-pro, serif; font-size: 24px; margin: .5em 0; } .magazine-block { display: block; } .magazine-block-heading { font-family: freight-sans-pro, sans-serif; font-size: 24px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; text-align: center; margin: 0 0 30px 0; } .magazine-block-description { font-family: freight-sans-pro, sans-serif; font-size: 12px; text-transform: uppercase; letter-spacing: 2px; color: #888888; display: block; margin: 20px 0; } .magazine-issues, .current-issues { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } .magazine-issue-cover { border: 1px solid #efefef; } .magazine-issue-title { font-family: freight-sans-pro, sans-serif; font-size: 20px; font-weight: 700; line-height: 1.382; color: #000000; text-align: center; letter-spacing: normal; line-break: normal; margin: .5em; padding: 0; border-bottom: none; } .magazine-issue-link { color: #000000; } @media screen and (min-width: 768px) { .current-issues { display: flex; justify-content: center; gap: 24px; } .magazine-issues { grid-template-columns: repeat(3, 1fr); } .magazine-issue { margin-bottom: 0; max-width: 280px; } } @media screen and (min-width: 1024px) { .magazine-issues { grid-template-columns: repeat(4, 1fr); } } .promotion-block { display: block; } .promotion-block-heading { font-family: freight-sans-pro, sans-serif; font-size: 24px; font-weight: 700; text-transform: uppercase; text-align: center; margin: 1.125em 0; } .promotion-items { display: block; } .promotion-item { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-start; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid #efefef; } .promotion-item-thumbnail { flex: 0 0 120px; order: 1; margin: 0 0 0 18px; padding: 0; } .promotion-item-thumbnail img { object-fit: cover; width: 120px; height: 120px; } .promotion-item-header { text-align: center; flex: 2 0 0; padding: 0; } .promotion-item-title { font-family: freight-sans-pro, sans-serif; font-size: 20px; font-weight: 700; color: #000000; text-align: left; margin: 0; padding: 0; } @media screen and (min-width: 480px) { .promotion-item-thumbnail { flex: 1 0 0; } .promotion-item-thumbnail img { object-fit: contain; width: 100%; height: auto; } } @media screen and (min-width: 640px) { .promotion-items { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 36px; padding: 0; } .promotion-item { display: block; margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .promotion-item-thumbnail { margin: 0; } .promotion-item-title { margin: .75em 0; } } @media screen and (min-width: 800px) { .promotion-block-heading { font-size: 28px; } .promotion-items { grid-template-columns: repeat(4, 1fr); } } .archive-block { display: block; } .magazine-archive-block { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 36px; } .archive-block-header { display: block; } .archive-block-heading { font-family: freight-sans-pro, sans-serif; font-size: 24px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; text-align: center; margin: 0 0 20px 0; } .archive-block-description { font-family: freight-sans-pro, sans-serif; text-align: left; margin: 24px 0 18px 0; } .archive-item { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-start; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid #efefef; } .archive-item:first-of-type { border-top: 1px solid #efefef; padding-top: 18px; } .archive-item:last-child { margin-bottom: 0; border-bottom: none; } .archive-item-thumbnail { flex: 0 0 120px; order: 1; margin: 0 0 0 18px; padding: 0; } .archive-item-thumbnail img { object-fit: cover; width: 120px; height: 120px; } .archive-item-header { flex: 2 0 0; padding: 0; } .archive-item-title { font-family: freight-display-pro, serif; font-size: 20px; flex: 2; line-height: 1.382; margin: 0 0 .5em 0; } .archive-item-excerpt { display: none; } @media screen and (min-width: 600px) { .archive-item-excerpt { display: block; font-family: freight-sans-pro, sans-serif; font-size: 18px; line-height: 1.382; margin: .5em 0 1em 0; } .archive-item-excerpt p { margin: 0; } .archive-item-thumbnail { flex: 1 0 0; } .archive-item-thumbnail img { object-fit: contain; width: 100%; height: auto; } } @media screen and (min-width: 1024px) { .archive-block { display: grid; grid-template-columns: 1fr 300px; gap: 0px 36px; } .archive-block-header { grid-column: 1/-1; } .archive-block-heading { text-align: left; } .magazine-archive-block { grid-template-columns: repeat(4, 1fr); } .archive-item-thumbnail { order: 0; margin: 0 24px 0 0; } .archive-item-header { flex: 2 0 0; } .archive .archive-item-title { font-family: freight-display-pro, serif; font-size: 28px; } } .featured-block { margin: 60px auto; } .featured-block-heading, .article-body .featured-block-heading { font-family: freight-sans-pro, sans-serif; font-size: 24px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; text-align: center; margin: 0 0 1em 0; } .featured-block-description { font-family: freight-sans-pro, sans-serif; font-size: 12px; text-transform: uppercase; letter-spacing: 2px; color: #888888; display: block; margin: 20px 0; } .featured-items { display: block; } .featured-item { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-start; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid #efefef; } .featured-item-thumbnail { flex: 0 0 120px; order: 1; margin: 0 0 0 18px; padding: 0; } .featured-item-thumbnail img { object-fit: cover; width: 120px; height: 120px; } .featured-item-header { text-align: left; flex: 2 0 0; padding: 0; } .featured-item-title { font-family: freight-display-pro, serif; font-size: 18px; margin: 0 0 .618em 0; } .featured-item-excerpt, .featured-item-header p, .featured-item-deck { font-family: freight-sans-pro, sans-serif; font-size: 18px; line-height: 1.382; margin: 0; } @media screen and (min-width: 600px) { .featured-item-thumbnail { flex: 1 0 0; } .featured-item-thumbnail img { object-fit: contain; width: 100%; height: auto; } .featured-item-title { font-size: 20px; } } @media screen and (min-width: 640px) { .featured-block { padding-bottom: 18px; border-bottom: 1px solid #efefef; } .featured-items { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 36px; padding: 0; } .featured-item { display: block; margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .featured-item-header { text-align: center; } .featured-item-thumbnail { margin: 0; } .featured-item-title { margin: .382em 0 .618em 0; } } @media screen and (min-width: 800px) { .featured-block-heading { font-size: 28px; } } @media screen and (min-width: 1024px) { .featured-items, .four-column-grid { grid-template-columns: repeat(4, 1fr); } .two-column-grid { grid-template-columns: repeat(2, 1fr); } .three-column-grid { grid-template-columns: repeat(3, 1fr); } } .listing-photo { max-width: 100%; height: auto; margin: 0; } .listing-header { flex: 1.5; margin-right: 18px; } .listing-title { font-family: freight-display-pro, serif; font-size: 24px; margin: 0 0 12px 0; } .item-categories, .listing-categories { font-family: freight-sans-pro, sans-serif; font-size: 16px; display: block; margin: 9px 0; text-transform: uppercase; letter-spacing: 1px; line-height: 1.382; } .sponsored-flag { font-family: freight-sans-pro, sans-serif; display: inline-block; font-size: 14px; color: #00b9f2; text-transform: uppercase; letter-spacing: 1px; border: 1px solid; padding: 3px 6px; margin: 9px 0; } .listing-location { display: block; font-family: freight-sans-pro, sans-serif; font-size: 18px; line-height: 1.25; margin: 18px 0; } .listing-details { margin: 24px 0; border-top: 1px solid #efefef; border-bottom: 1px solid #efefef; clear: both; } .sponsored-heading { margin: 20px 0; font-family: freight-sans-compressed-pro, sans-serif; font-size: 22px; text-transform: uppercase; letter-spacing: 1px; text-align: center; } @media screen and (min-width: 1080px) { .listing-title { font-size: 36px; margin-bottom: 18px; } .listing-photo { float: left; max-width: 320px; height: auto; margin: 0 18px 18px 0; } } .package-cover { position: relative; } .package-header { margin-top: 24px; margin-bottom: 24px; } .package-title { font-family: freight-display-pro, serif; font-size: 28px; } .package-deck { font-family: freight-sans-pro, sans-serif; font-size: 18px; line-height: 1.382; } .package-figure-caption { margin: 0 0 18px 0; padding: 12px 18px; } .page-content, .package-content { max-width: 756px; margin-top: 24px; margin-bottom: 24px; margin-left: auto; margin-right: auto; font-family: freight-text-pro, serif; font-size: 20px; } @media screen and (min-width: 1116px) { .package-cover { margin-left: calc(-100vw / 2 + 100% / 2); margin-right: calc(-100vw / 2 + 100% / 2); } .package-header { position: absolute; top: 0; left: 0; bottom: 0; margin: 0; padding: 0 36px; width: 33.333%; height: 100%; text-align: left; color: white; display: flex; flex-direction: column; justify-content: center; background-color: rgba(0, 0, 0, 0.60); text-shadow: 1px 1px 2px black; } .package-header .article-byline a { color: white; } .package-header .article-byline-photo-link, .package-header .article-byline-photo { display: none; } .package-title { font-size: 34px; } .package-content { margin-top: 60px; margin-bottom: 60px; } } @media screen and (min-width: 1440px) { .package-cover { margin-left: auto; margin-right: auto; max-width: 1440px; } .package-header .article-byline { justify-content: center; } .package-header { text-align: center; } } .highlighted-pick { font-family: freight-sans-pro, sans-serif; font-size: 0.75em; background-color: var(--main-highlight-color); color: white; text-transform: uppercase; display: inline-block; margin: 0 0 0.5em 0; padding: 0.375em 0.75em; } .sponsored-listings { background-color: #efefef; padding: 1.125em; margin-bottom: 1.125em; } .sponsored-listings::after { clear: both; content: ""; display: block; } .sponsored-listings>h2 { font-family: freight-sans-compressed-pro, sans-serif; text-transform: uppercase; margin: 0; font-size: 1.2em; letter-spacing: 2px; display: inline-block; } .sponsored-listings>a { float: right; line-height: 2em; font-size: 0.75em; font-style: italic; } .sponsored-listings img { width: 100%; } .sponsored-listings article:last-child { border-bottom: none; } .directory-item .address { font-family: freight-sans-pro, sans-serif; } .directory-item dl { font-family: freight-sans-pro, sans-serif; font-size: 0.8125em; } .directory-item dl dd { margin-left: 0; } .directory-item dl.inline { margin-bottom: 2em; } .directory-item dl.inline dt { float: left; line-height: 1.5; padding: 0 0.5em 0 0; margin: 0; } .directory-item dl.inline dd { line-height: 1.5; padding: 0; margin: 0; } .directory-item dl.vertical { margin: 2em 0; } .directory-item dl.vertical dt { margin-top: 1.125em; } .directory-item dl.vertical dd { margin-left: 0; } .directory-item dt { text-transform: uppercase; font-weight: bold; } .directory-item dd p { margin: 0; } section.issues { max-width: 80em; margin-left: auto; margin-right: auto; padding: 0 1.125em 0 1.125em; clear: both; border-bottom: 0; padding-bottom: 0; margin: 1em auto; } section.issues::after { clear: both; content: ""; display: block; } section.issues>h2 { font-family: freight-sans-pro, sans-serif; font-size: 1.25em; letter-spacing: 6px; text-transform: uppercase; margin: 1.125em 0 1em 0; text-align: center; font-weight: normal; } @media screen and (min-width: 57.5em) { section.issues>h2 { font-size: 1.5em; } } section.issues div { float: left; display: block; margin-right: 5.536906672%; width: 100%; } section.issues div:last-child { margin-right: 0; } @media screen and (min-width: 48em) { section.issues div { float: left; display: block; margin-right: 3.6243783%; width: 100%; } section.issues div:last-child { margin-right: 0; } } @media screen and (min-width: 64em) { section.issues div { float: left; display: block; margin-right: 1.7799333902%; width: 100%; } section.issues div:last-child { margin-right: 0; } } section.issues div article { float: left; display: block; margin-right: 5.536906672%; width: 47.231546664%; } section.issues div article:last-child { margin-right: 0; } section.issues div article:nth-child(2n) { margin-right: 0; } section.issues div article:nth-child(2n + 1) { clear: left; } @media screen and (min-width: 48em) { section.issues div article { float: left; display: block; margin-right: 3.6243783%; width: 17.10049736%; } section.issues div article:nth-child(2n) { margin-right: 3.6243783%; } section.issues div article:nth-child(2n + 1) { clear: none; } section.issues div article:last-child { margin-right: 0; } } @media screen and (min-width: 64em) { section.issues div article { float: left; display: block; margin-right: 1.7799333902%; width: 18.5760532878%; } section.issues div article:nth-child(2n) { margin-right: 1.7799333902%; } section.issues div article:nth-child(2n + 1) { clear: none; } section.issues div article:last-child { margin-right: 0; } } section.issues div article figure img { width: 100%; border: 1px solid #efefef; } section.issues div article header h1 { font-family: freight-sans-pro, sans-serif; text-align: center; font-size: 1em; margin-top: 0.5em; } section.subscribe-options { max-width: 80em; margin-left: auto; margin-right: auto; padding: 0 1.125em 0 1.125em; border-bottom: 0; padding-bottom: 0; margin-top: 1em; } section.subscribe-options::after { clear: both; content: ""; display: block; } section.subscribe-options .magazine { float: left; display: block; margin-right: 5.536906672%; width: 100%; } section.subscribe-options .magazine:last-child { margin-right: 0; } @media screen and (min-width: 48em) { section.subscribe-options .magazine { float: left; display: block; margin-right: 3.6243783%; width: 30.9170811333%; } section.subscribe-options .magazine:last-child { margin-right: 0; } section.subscribe-options .magazine:nth-child(3n) { margin-right: 0; } section.subscribe-options .magazine:nth-child(3n + 1) { clear: left; } } @media screen and (min-width: 64em) { section.subscribe-options .magazine { float: left; display: block; margin-right: 1.7799333902%; width: 32.1467110732%; } section.subscribe-options .magazine:nth-child(3n) { margin-right: 1.7799333902%; } section.subscribe-options .magazine:nth-child(3n + 1) { clear: none; } section.subscribe-options .magazine:last-child { margin-right: 0; } } section.subscribe-options .magazine figure { width: 75%; margin: 0 auto 1em auto; } section.subscribe-options .magazine figure::after { clear: both; content: ""; display: block; } section.subscribe-options .magazine figure img { width: 100%; border: 1px solid #efefef; } section.subscribe-options .magazine nav { width: 75%; margin: 0 auto 1em auto; } section.subscribe-details { max-width: 80em; margin-left: auto; margin-right: auto; padding: 0 1.125em 0 1.125em; text-align: center; } section.subscribe-details::after { clear: both; content: ""; display: block; } section.subscribe-details img { max-width: 100%; } span.partial { width: 20%; margin: 0 auto 1em auto; display: inline-block; border-top: 1px solid #efefef; } .ad-slot { margin: 0 auto; text-align: center; } .ad-slot-header, .ad-slot-in-page, .ad-slot-footer { margin-top: 24px; margin-bottom: 24px; } .archive .ad-slot-aside:before { display: none; } @media screen and (min-width:1080px) { .archive .ad-slot-aside:before { display: block; } } article header h1 { font-family: freight-display-pro, serif; font-size: 1.75em; word-spacing: 2px; margin-top: 0; margin-bottom: 0.5em; } article header p { font-family: freight-sans-pro, sans-serif; font-size: 1.125em; } @media screen and (min-width: 64em) { article header h1 { font-size: 2.8125em; } } article .article-meta ul { list-style-type: none; padding-left: 0; } article .article-meta ul li { display: inline-block; } article p { margin: 1.125em 0; } article figure img { max-width: 100%; width: 100%; height: auto; } .paidpost { background-color: #efefef; } .paidpost header { text-align: center; padding: 0 1.125em 1.125em 1.125em; } @media screen and (min-width: 57.5em) { .archive .paidpost { padding: 1.125em; } .archive .paidpost header { padding: 0; } } .taxonomy, .issue { font-family: freight-sans-pro, sans-serif; text-transform: none; display: block; } .taxonomy, .issue { letter-spacing: 2px; } .taxonomy { font-size: 0.875em; vertical-align: middle; padding: 0; display: block; list-style-type: none; } .taxonomy li { display: inline; } .taxonomy li:before { content: ""; } .taxonomy li:after { font-family: fontawesome; content: "\f105"; margin: 0 0.5625em; } .taxonomy li:last-child:after { content: ""; } @media screen and (min-width: 48em) { .taxonomy { display: inline-block; } } span.taxonomy { margin: 1em 0 0.875em 0; } .byline, time { display: block; font-family: freight-sans-compressed-pro, sans-serif; text-transform: uppercase; line-height: 1.382; font-size: 18px; letter-spacing: 1px; } .author { font-family: freight-sans-compressed-pro, sans-serif; text-transform: uppercase; line-height: 1.25; font-size: 1.125em; letter-spacing: 2px; } .author::after { clear: both; content: ""; display: block; } .author h1 { font-size: 1.125em; } .author ul { list-style-type: none; padding-left: 0; } .author ul li { display: inline; } .author p { font-family: freight-sans-pro, sans-serif; text-transform: none; font-size: 0.6666666667em; margin: 0.625em 0 0 0; } .author img { max-width: 90px; margin-right: 0.5em; float: left; -webkit-clip-path: circle(45px at 45px 45px); clip-path: circle(45px at 45px 45px); } article .author { border-top: 1px solid #efefef; padding-top: 1.125em; margin-bottom: 1.125em; } .archive .author p { font-size: 0.875em; margin: 1em 0; } article footer .issue { border-top: 1px solid #efefef; padding: 1em 0 0 0; } .button, .submit, [type="submit"] { display: block; color: white; font-family: freight-sans-pro, sans-serif; background-color: var(--main-highlight-color); text-transform: uppercase; padding: 0.5em; margin: 0 auto 1em 0; text-align: center; border: none; } article figure { margin: 0 auto; } section>figure:first-child { margin-top: 0; } blockquote { border: none; border-left: 1px solid #00b9f2; margin: 0; padding-left: 1.5em; } blockquote.pull-quote { border: none; border-top: 1px solid #00b9f2; border-bottom: 1px solid #00b9f2; } blockquote p { font-family: freight-sans-pro, sans-serif; font-size: 1em; line-height: 1.5; font-style: italic; } blockquote.pull-quote p { font-family: freight-display-pro, serif; font-size: 1.5em; font-style: normal; } blockquote cite { font-family: freight-sans-compressed-pro, sans-serif; text-transform: uppercase; display: block; margin: 0.5em 0; font-size: 1em; letter-spacing: 2px; line-height: 1.2; font-style: normal; } .button { display: block; color: white; font-family: system-ui; background-color: var(--main-highlight-color); text-transform: uppercase; padding: 9px 12px; margin: 0 0 16px 0; text-align: center; border: none; } label { font-family: system-ui; font-size: 20px; font-weight: 600; } .label-above { display: block; margin: 1em 0 .5em 0; } .label-checkbox { order: 1; margin-left: .5em; } input, button { font-family: system-ui; font-weight: 400; font-size: 16px; color: inherit; line-height: 1.3; display: block; box-sizing: border-box; margin: 0; padding: 6px 9px; max-width: 100%; border: 1px solid #ccc; border-radius: 4px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #fff; } .input-full-width { width: 100%; margin: .5em 0; } input[type=search] { -webkit-appearance: none; -moz-appearance: none; appearance: none; } button, input[type=submit], input[type=button] { flex: 1; text-transform: uppercase; padding: 6px 12px; border-radius: 4px; border: 1px solid #efefef; background-color: #f2f2f2; color: #000000; } button, input[type=submit]:hover, input[type=button]:hover { cursor: pointer; } input[type=checkbox] { -webkit-appearance: checkbox; -moz-appearance: checkbox; appearance: checkbox; height: 20px; min-width: 20px; } select { font-family: system-ui; font-weight: 400; font-size: 16px; color: inherit; line-height: 1.3; display: block; box-sizing: border-box; margin: 0; padding: 6px 9px; max-width: 100%; border: 1px solid #ccc; border-radius: 4px; } /* class applies to select element itself, not a wrapper element */ .select { display: block; font-size: 16px; font-family: system-ui; font-weight: 400; color: inherit; line-height: 1.3; padding: 6px 9px; width: 100%; max-width: 100%; /* useful when width is set to anything other than 100% */ box-sizing: border-box; margin: 0; border: 1px solid #ccc; box-shadow: 0 1px 0 1px rgba(0, 0, 0, .04); border-radius: 4px; -moz-appearance: none; -webkit-appearance: none; appearance: none; background-color: #fff; /* note: bg image below uses 2 urls. The first is an svg data uri for the arrow icon, and the second is the gradient. for the icon, if you want to change the color, be sure to use `%23` instead of `#`, since it's a url. You can also swap in a different svg icon or an external image reference */ background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'), linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%); background-repeat: no-repeat, repeat; /* arrow icon position (1em from the right, 50% vertical) , then gradient position*/ background-position: right .7em top 50%, 0 0; /* icon size, then gradient */ background-size: .65em auto, 100%; } /* Hide arrow icon in IE browsers */ .select::-ms-expand { display: none; } /* Hover style */ .select:hover { border-color: #888; } /* Focus style */ .select:focus { border-color: #aaa; /* It'd be nice to use -webkit-focus-ring-color here but it doesn't work on box-shadow */ box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7); box-shadow: 0 0 0 3px -moz-mac-focusring; color: #222; outline: none; } /* Set options to normal weight */ .select option { font-weight: normal; } /* Support for rtl text, explicit support for Arabic and Hebrew */ *[dir="rtl"] .select, :root:lang(ar) .select, :root:lang(iw) .select { background-position: left .7em top 50%, 0 0; padding: .6em .8em .5em 1.4em; } /* Disabled styles */ .select:disabled, .select[aria-disabled=true] { color: graytext; background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'), linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%); } .select:disabled:hover, .select[aria-disabled=true] { border-color: #aaa; } .search-block { margin-top: 40px; margin-bottom: 20px; border-bottom: 1px solid #efefef; } .search-block-heading { font-family: freight-sans-pro, sans-serif; font-size: 28px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; text-align: center; margin: 0 0 14px 0; } .search-form { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: space-around; justify-content: space-around; width: 100%; position: relative; margin: 0; padding: 1em 0; z-index: 90; } .search-form .search-query { flex: 2; margin: 0 0 18px 0; } .search-form-button { margin-bottom: 0; } .search-result-dashboard { font-family: freight-sans-pro, sans-serif; display: flex; flex-direction: column; align-items: center; margin: 0 0 18px 0; } .search-result-count { margin: 0 0 18px 0; } .search-form-filter { display: flex; align-items: center; } .search-filter-label { text-align: center; } .search-filter-select { -moz-appearance: none; -webkit-appearance: none; appearance: none; margin: 0 0 18px 0; padding: 6px 36px 6px 9px; background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'); background-repeat: no-repeat, repeat; background-position: right 9px top 50%; background-size: 9px auto; } .ui-front.comiseo-daterangepicker-mask { opacity: 0.75; filter: alpha(opacity=0.75); } .comiseo-daterangepicker-triggerbutton.ui-button { max-height: none !important; flex: 2; border-radius: 4px; margin-bottom: 1em; margin-right: 0 !important; text-transform: none; background-color: white; } .ui-button-icon.ui-icon.ui-icon-triangle-1-s { position: absolute; right: 4px; top: 12px; } @media screen and (min-width: 768px) { .form-field-group { flex-direction: row; justify-content: space-between; } .search-form { -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-flex-direction: row; flex-direction: row; -webkit-justify-content: space-between; justify-content: space-between; margin: 0 auto; max-width: 60%; } .search-form .search-query { margin: 0 0 0 0; } .search-filter-select { margin: 0 0 0 18px; } .comiseo-daterangepicker-triggerbutton.ui-button { margin-bottom: 0; margin-left: 18px !important; } } @media screen and (min-width: 1024px) { .search-result-dashboard { flex-direction: row; } .search-result-count { flex: 1 0 0; margin: 0 24px 0 0; } .search-form-filter { flex: 2 0 0; } .search-form-button { margin: 0 0 0 18px; } } .social-link-block { display: flex; justify-content: center; list-style-type: none; margin: 24px 0; padding: 0; } .social-link { align-self: center; height: 36px; width: 36px; margin: 9px; background-size: 27px; background-repeat: no-repeat; background-position: center center; } .colorize-dark { filter: brightness(0.1) } .facebook { background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23ffffff' d='M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z'/%3E%3C/svg%3E"); } .twitter { background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23ffffff' d='M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z'%3E%3C/path%3E%3C/svg%3E"); } .instagram { background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23ffffff' d='M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z'%3E%3C/path%3E%3C/svg%3E"); } .pinterest { background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 496 512'%3E%3Cpath fill='%23ffffff' d='M496 256c0 137-111 248-248 248-25.6 0-50.2-3.9-73.4-11.1 10.1-16.5 25.2-43.5 30.8-65 3-11.6 15.4-59 15.4-59 8.1 15.4 31.7 28.5 56.8 28.5 74.8 0 128.7-68.8 128.7-154.3 0-81.9-66.9-143.2-152.9-143.2-107 0-163.9 71.8-163.9 150.1 0 36.4 19.4 81.7 50.3 96.1 4.7 2.2 7.2 1.2 8.3-3.3.8-3.4 5-20.3 6.9-28.1.6-2.5.3-4.7-1.7-7.1-10.1-12.5-18.3-35.3-18.3-56.6 0-54.7 41.4-107.6 112-107.6 60.9 0 103.6 41.5 103.6 100.9 0 67.1-33.9 113.6-78 113.6-24.3 0-42.6-20.1-36.7-44.8 7-29.5 20.5-61.3 20.5-82.6 0-19-10.2-34.9-31.4-34.9-24.9 0-44.9 25.7-44.9 60.2 0 22 7.4 36.8 7.4 36.8s-24.5 103.8-29 123.2c-5 21.4-3 51.6-.9 71.2C65.4 450.9 0 361.1 0 256 0 119 111 8 248 8s248 111 248 248z'/%3E%3C/svg%3E"); } .byline-block {} .byline-photo { display: block; height: 168px; width: 168px; margin: 0 auto 18px auto; -webkit-clip-path: circle(84px at 84px 84px); clip-path: circle(84px at 84px 84px); } .byline-name { font-family: freight-sans-pro, serif; font-size: 24px; font-weight: 800; letter-spacing: 4px; text-transform: uppercase; text-align: center; margin: 0 0 18px 0; } .byline-title { font-family: freight-sans-compressed-pro, sans-serif; font-size: 20px; letter-spacing: 2px; text-transform: uppercase; text-align: center; line-height: 1.25; margin: 0; padding: 0; } .byline-social { list-style-type: none; padding-left: 0; display: block; text-align: center; } .byline-social li { display: inline; } .byline-bio { font-family: freight-sans-pro, sans-serif; font-size: 16px; margin: 18px 0; letter-spacing: 1px; } .alignwide { margin-left: 0; margin-right: 0; } .alignfull { margin-left: calc(-100vw / 2 + 100% / 2); margin-right: calc(-100vw / 2 + 100% / 2); padding-left: 0; padding-right: 0; } .alignfull .article-figure-caption, .alignfull .package-figure-caption { padding-left: 18px; padding-right: 18px; } @media screen and (min-width: 1116px) { .alignwide { margin-left: calc(-1080px / 2 + 100% / 2); margin-right: calc(-1080px / 2 + 100% / 2); } .article-body .alignwide { margin-left: 0; margin-right: 0; } .alignfull .article-figure-caption, .alignfull .package-figure-caption { position: absolute; bottom: 0; right: 0; background-color: rgba(0, 0, 0, 0.84); text-shadow: 1px 1px 2px black; color: white; border-bottom: none; margin: 0; max-width: 420px; padding-left: 18px; padding-right: 18px; } } @media screen and (min-width: 1440px) { .alignfull { margin-left: calc(-1440px / 2 + 100% / 2); margin-right: calc(-1440px / 2 + 100% / 2); } }