/* ============================================================
gcf-site.css
Merged stylesheet for Good Cheap Food, in cascade order:
1. normalize.css — browser reset
2. webflow.css — Webflow framework base
3. gcfstore.webflow.css — site-specific design (brand colors,
type, existing nav/footer/etc.)
4. Mega menu + Shop page — additive rules for the new nav
dropdown and category grid (was a
separate gcf-mega-menu.css; merged
here so cascade order is visible in
one place rather than split across
four tags of unclear priority)
Order matters: later sections can override earlier ones at equal
specificity. Section 4 is last on purpose — see the verification
notes at the bottom of this file for exactly what it overrides
and why nothing upstream can re-override it back.
============================================================ */
/* ============================================================
SECTION 1: normalize.css
============================================================ */
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
/**
* 1. Set default font family to sans-serif.
* 2. Prevent iOS and IE text size adjust after device orientation change,
* without disabling user zoom.
*/
html {
font-family: sans-serif;
/* 1 */
-ms-text-size-adjust: 100%;
/* 2 */
-webkit-text-size-adjust: 100%;
/* 2 */
}
/**
* Remove default margin.
*/
body {
margin: 0;
}
/* HTML5 display definitions
========================================================================== */
/**
* Correct `block` display not defined for any HTML5 element in IE 8/9.
* Correct `block` display not defined for `details` or `summary` in IE 10/11
* and Firefox.
* Correct `block` display not defined for `main` in IE 11.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block;
}
/**
* 1. Correct `inline-block` display not defined in IE 8/9.
* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
*/
audio,
canvas,
progress,
video {
display: inline-block;
/* 1 */
vertical-align: baseline;
/* 2 */
}
/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Address `[hidden]` styling not present in IE 8/9/10.
* Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
*/
[hidden],
template {
display: none;
}
/* Links
========================================================================== */
/**
* Remove the gray background color from active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* Improve readability of focused elements when they are also in an
* active/hover state.
*/
a:active,
a:hover {
outline: 0;
}
/* Text-level semantics
========================================================================== */
/**
* Address styling not present in IE 8/9/10/11, Safari, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted;
}
/**
* Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
*/
b,
strong {
font-weight: bold;
}
/**
* Address styling not present in Safari and Chrome.
*/
dfn {
font-style: italic;
}
/**
* Address variable `h1` font-size and margin within `section` and `article`
* contexts in Firefox 4+, Safari, and Chrome.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/**
* Address styling not present in IE 8/9.
*/
mark {
background: #ff0;
color: #000;
}
/**
* Address inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/* Embedded content
========================================================================== */
/**
* Remove border when inside `a` element in IE 8/9/10.
*/
img {
border: 0;
}
/**
* Correct overflow not hidden in IE 9/10/11.
*/
svg:not(:root) {
overflow: hidden;
}
/* Grouping content
========================================================================== */
/**
* Address margin not present in IE 8/9 and Safari.
*/
figure {
margin: 1em 40px;
}
/**
* Address differences between Firefox and other browsers.
*/
hr {
box-sizing: content-box;
height: 0;
}
/**
* Contain overflow in all browsers.
*/
pre {
overflow: auto;
}
/**
* Address odd `em`-unit font size rendering in all browsers.
*/
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
/* Forms
========================================================================== */
/**
* Known limitation: by default, Chrome and Safari on OS X allow very limited
* styling of `select`, unless a `border` property is set.
*/
/**
* 1. Correct color not being inherited.
* Known issue: affects color of disabled elements.
* 2. Correct font properties not being inherited.
* 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
*/
button,
input,
optgroup,
select,
textarea {
color: inherit;
/* 1 */
font: inherit;
/* 2 */
margin: 0;
/* 3 */
}
/**
* Address `overflow` set to `hidden` in IE 8/9/10/11.
*/
button {
overflow: visible;
}
/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
* Correct `select` style inheritance in Firefox.
*/
button,
select {
text-transform: none;
}
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
* 4. CUSTOM FOR WEBFLOW: Removed the input[type="submit"] selector to reduce
* specificity and defer to the .w-button selector
*/
button,
html input[type="button"],
input[type="reset"] {
-webkit-appearance: button;
/* 2 */
cursor: pointer;
/* 3 */
}
/**
* Re-set default cursor for disabled elements.
*/
button[disabled],
html input[disabled] {
cursor: default;
}
/**
* Remove inner padding and border in Firefox 4+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/**
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
input {
line-height: normal;
}
/**
* It's recommended that you don't attempt to style these elements.
* Firefox's implementation doesn't respect box-sizing, padding, or width.
*
* 1. Address box sizing set to `content-box` in IE 8/9/10.
* 2. Remove excess padding in IE 8/9/10.
*/
input[type='checkbox'],
input[type='radio'] {
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */
}
/**
* Fix the cursor style for Chrome's increment/decrement buttons. For certain
* `font-size` values of the `input`, it causes the cursor style of the
* decrement button to change from `default` to `text`.
*/
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. CUSTOM FOR WEBFLOW: changed from `textfield` to `none` to normalize iOS rounded input
* 2. CUSTOM FOR WEBFLOW: box-sizing: content-box rule removed
* (similar to normalize.css >=4.0.0)
*/
input[type='search'] {
-webkit-appearance: none;
/* 1 */
}
/**
* Remove inner padding and search cancel button in Safari and Chrome on OS X.
* Safari (but not Chrome) clips the cancel button when the search input has
* padding (and `textfield` appearance).
*/
input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* Define consistent border, margin, and padding.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct `color` not being inherited in IE 8/9/10/11.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
*/
legend {
border: 0;
/* 1 */
padding: 0;
/* 2 */
}
/**
* Remove default vertical scrollbar in IE 8/9/10/11.
*/
textarea {
overflow: auto;
}
/**
* Don't inherit the `font-weight` (applied by a rule above).
* NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
*/
optgroup {
font-weight: bold;
}
/* Tables
========================================================================== */
/**
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}
/* ============================================================
SECTION 2: webflow.css
============================================================ */
@font-face {
font-family: 'webflow-icons';
src: url("data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBiUAAAC8AAAAYGNtYXDpP+a4AAABHAAAAFxnYXNwAAAAEAAAAXgAAAAIZ2x5ZmhS2XEAAAGAAAADHGhlYWQTFw3HAAAEnAAAADZoaGVhCXYFgQAABNQAAAAkaG10eCe4A1oAAAT4AAAAMGxvY2EDtALGAAAFKAAAABptYXhwABAAPgAABUQAAAAgbmFtZSoCsMsAAAVkAAABznBvc3QAAwAAAAAHNAAAACAAAwP4AZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpAwPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAQAAAAAwACAACAAQAAQAg5gPpA//9//8AAAAAACDmAOkA//3//wAB/+MaBBcIAAMAAQAAAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEBIAAAAyADgAAFAAAJAQcJARcDIP5AQAGA/oBAAcABwED+gP6AQAABAOAAAALgA4AABQAAEwEXCQEH4AHAQP6AAYBAAcABwED+gP6AQAAAAwDAAOADQALAAA8AHwAvAAABISIGHQEUFjMhMjY9ATQmByEiBh0BFBYzITI2PQE0JgchIgYdARQWMyEyNj0BNCYDIP3ADRMTDQJADRMTDf3ADRMTDQJADRMTDf3ADRMTDQJADRMTAsATDSANExMNIA0TwBMNIA0TEw0gDRPAEw0gDRMTDSANEwAAAAABAJ0AtAOBApUABQAACQIHCQEDJP7r/upcAXEBcgKU/usBFVz+fAGEAAAAAAL//f+9BAMDwwAEAAkAABcBJwEXAwE3AQdpA5ps/GZsbAOabPxmbEMDmmz8ZmwDmvxmbAOabAAAAgAA/8AEAAPAAB0AOwAABSInLgEnJjU0Nz4BNzYzMTIXHgEXFhUUBw4BBwYjNTI3PgE3NjU0Jy4BJyYjMSIHDgEHBhUUFx4BFxYzAgBqXV6LKCgoKIteXWpqXV6LKCgoKIteXWpVSktvICEhIG9LSlVVSktvICEhIG9LSlVAKCiLXl1qal1eiygoKCiLXl1qal1eiygoZiEgb0tKVVVKS28gISEgb0tKVVVKS28gIQABAAABwAIAA8AAEgAAEzQ3PgE3NjMxFSIHDgEHBhUxIwAoKIteXWpVSktvICFmAcBqXV6LKChmISBvS0pVAAAAAgAA/8AFtgPAADIAOgAAARYXHgEXFhUUBw4BBwYHIxUhIicuAScmNTQ3PgE3NjMxOAExNDc+ATc2MzIXHgEXFhcVATMJATMVMzUEjD83NlAXFxYXTjU1PQL8kz01Nk8XFxcXTzY1PSIjd1BQWlJJSXInJw3+mdv+2/7c25MCUQYcHFg5OUA/ODlXHBwIAhcXTzY1PTw1Nk8XF1tQUHcjIhwcYUNDTgL+3QFt/pOTkwABAAAAAQAAmM7nP18PPPUACwQAAAAAANciZKUAAAAA1yJkpf/9/70FtgPDAAAACAACAAAAAAAAAAEAAAPA/8AAAAW3//3//QW2AAEAAAAAAAAAAAAAAAAAAAAMBAAAAAAAAAAAAAAAAgAAAAQAASAEAADgBAAAwAQAAJ0EAP/9BAAAAAQAAAAFtwAAAAAAAAAKABQAHgAyAEYAjACiAL4BFgE2AY4AAAABAAAADAA8AAMAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADQAAAAEAAAAAAAIABwCWAAEAAAAAAAMADQBIAAEAAAAAAAQADQCrAAEAAAAAAAUACwAnAAEAAAAAAAYADQBvAAEAAAAAAAoAGgDSAAMAAQQJAAEAGgANAAMAAQQJAAIADgCdAAMAAQQJAAMAGgBVAAMAAQQJAAQAGgC4AAMAAQQJAAUAFgAyAAMAAQQJAAYAGgB8AAMAAQQJAAoANADsd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzUmVndWxhcgBSAGUAZwB1AGwAYQByd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==") format('truetype');
font-weight: normal;
font-style: normal;
}
[class^="w-icon-"],
[class*=" w-icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'webflow-icons' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.w-icon-slider-right:before {
content: "\e600";
}
.w-icon-slider-left:before {
content: "\e601";
}
.w-icon-nav-menu:before {
content: "\e602";
}
.w-icon-arrow-down:before,
.w-icon-dropdown-toggle:before {
content: "\e603";
}
.w-icon-file-upload-remove:before {
content: "\e900";
}
.w-icon-file-upload-icon:before {
content: "\e903";
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
height: 100%;
}
body {
margin: 0;
min-height: 100%;
background-color: #fff;
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 20px;
color: #333;
}
img {
max-width: 100%;
vertical-align: middle;
display: inline-block;
}
html.w-mod-touch * {
background-attachment: scroll !important;
}
.w-block {
display: block;
}
.w-inline-block {
max-width: 100%;
display: inline-block;
}
.w-clearfix:before,
.w-clearfix:after {
content: " ";
display: table;
grid-column-start: 1;
grid-row-start: 1;
grid-column-end: 2;
grid-row-end: 2;
}
.w-clearfix:after {
clear: both;
}
.w-hidden {
display: none;
}
.w-button {
display: inline-block;
padding: 9px 15px;
background-color: #3898EC;
color: white;
border: 0;
line-height: inherit;
text-decoration: none;
cursor: pointer;
border-radius: 0;
}
input.w-button {
-webkit-appearance: button;
}
html[data-w-dynpage] [data-w-cloak] {
color: transparent !important;
}
.w-code-block {
margin: unset;
}
pre.w-code-block code {
all: inherit;
}
.w-optimization {
display: contents;
}
.w-webflow-badge,
.w-webflow-badge > img {
box-sizing: unset;
width: unset;
height: unset;
max-height: unset;
max-width: unset;
min-height: unset;
min-width: unset;
margin: unset;
padding: unset;
float: unset;
clear: unset;
border: unset;
border-radius: unset;
background: unset;
background-image: unset;
background-position: unset;
background-size: unset;
background-repeat: unset;
background-origin: unset;
background-clip: unset;
background-attachment: unset;
background-color: unset;
box-shadow: unset;
transform: unset;
transition: unset;
direction: unset;
font-family: unset;
font-weight: unset;
color: unset;
font-size: unset;
line-height: unset;
font-style: unset;
font-variant: unset;
text-align: unset;
letter-spacing: unset;
text-decoration: unset;
text-indent: unset;
text-transform: unset;
list-style-type: unset;
text-shadow: unset;
vertical-align: unset;
cursor: unset;
white-space: unset;
word-break: unset;
word-spacing: unset;
word-wrap: unset;
}
.w-webflow-badge {
position: fixed !important;
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
z-index: 2147483647 !important;
top: auto !important;
right: 12px !important;
bottom: 12px !important;
left: auto !important;
color: #aaadb0 !important;
background-color: #fff !important;
border-radius: 3px !important;
padding: 6px !important;
font-size: 12px !important;
line-height: 14px !important;
text-decoration: none !important;
transform: none !important;
margin: 0 !important;
width: auto !important;
height: auto !important;
overflow: unset !important;
white-space: nowrap;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.1);
cursor: pointer;
}
.w-webflow-badge > img {
position: unset;
display: inline-block !important;
visibility: unset !important;
opacity: 1 !important;
vertical-align: middle !important;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: bold;
margin-bottom: 10px;
}
h1 {
font-size: 38px;
line-height: 44px;
margin-top: 20px;
}
h2 {
font-size: 32px;
line-height: 36px;
margin-top: 20px;
}
h3 {
font-size: 24px;
line-height: 30px;
margin-top: 20px;
}
h4 {
font-size: 18px;
line-height: 24px;
margin-top: 10px;
}
h5 {
font-size: 14px;
line-height: 20px;
margin-top: 10px;
}
h6 {
font-size: 12px;
line-height: 18px;
margin-top: 10px;
}
p {
margin-top: 0;
margin-bottom: 10px;
}
blockquote {
margin: 0 0 10px 0;
padding: 10px 20px;
border-left: 5px solid #E2E2E2;
font-size: 18px;
line-height: 22px;
}
figure {
margin: 0;
margin-bottom: 10px;
}
figcaption {
margin-top: 5px;
text-align: center;
}
ul,
ol {
margin-top: 0px;
margin-bottom: 10px;
padding-left: 40px;
}
.w-list-unstyled {
padding-left: 0;
list-style: none;
}
.w-embed:before,
.w-embed:after {
content: " ";
display: table;
grid-column-start: 1;
grid-row-start: 1;
grid-column-end: 2;
grid-row-end: 2;
}
.w-embed:after {
clear: both;
}
.w-video {
width: 100%;
position: relative;
padding: 0;
}
.w-video iframe,
.w-video object,
.w-video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
fieldset {
padding: 0;
margin: 0;
border: 0;
}
button,
[type='button'],
[type='reset'] {
border: 0;
cursor: pointer;
-webkit-appearance: button;
}
.w-form {
margin: 0 0 15px;
}
.w-form-done {
display: none;
padding: 20px;
text-align: center;
background-color: #dddddd;
}
.w-form-fail {
display: none;
margin-top: 10px;
padding: 10px;
background-color: #ffdede;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
.w-input,
.w-select {
display: block;
width: 100%;
height: 38px;
padding: 8px 12px;
margin-bottom: 10px;
font-size: 14px;
line-height: 1.42857143;
color: #333333;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #cccccc;
}
.w-input::placeholder,
.w-select::placeholder {
color: #999;
}
.w-input:focus,
.w-select:focus {
border-color: #3898EC;
outline: 0;
}
.w-input[disabled],
.w-select[disabled],
.w-input[readonly],
.w-select[readonly],
fieldset[disabled] .w-input,
fieldset[disabled] .w-select {
cursor: not-allowed;
}
.w-input[disabled]:not(.w-input-disabled),
.w-select[disabled]:not(.w-input-disabled),
.w-input[readonly],
.w-select[readonly],
fieldset[disabled]:not(.w-input-disabled) .w-input,
fieldset[disabled]:not(.w-input-disabled) .w-select {
background-color: #eeeeee;
}
textarea.w-input,
textarea.w-select {
height: auto;
}
.w-select {
background-color: #f3f3f3;
}
.w-select[multiple] {
height: auto;
}
.w-form-label {
display: inline-block;
cursor: pointer;
font-weight: normal;
margin-bottom: 0px;
}
.w-radio {
display: block;
margin-bottom: 5px;
padding-left: 20px;
}
.w-radio:before,
.w-radio:after {
content: " ";
display: table;
grid-column-start: 1;
grid-row-start: 1;
grid-column-end: 2;
grid-row-end: 2;
}
.w-radio:after {
clear: both;
}
.w-radio-input {
margin: 4px 0 0;
line-height: normal;
float: left;
margin-left: -20px;
}
.w-radio-input {
margin-top: 3px;
}
.w-file-upload {
display: block;
margin-bottom: 10px;
}
.w-file-upload-input {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -100;
}
.w-file-upload-default,
.w-file-upload-uploading,
.w-file-upload-success {
display: inline-block;
color: #333333;
}
.w-file-upload-error {
display: block;
margin-top: 10px;
}
.w-file-upload-default.w-hidden,
.w-file-upload-uploading.w-hidden,
.w-file-upload-error.w-hidden,
.w-file-upload-success.w-hidden {
display: none;
}
.w-file-upload-uploading-btn {
display: flex;
font-size: 14px;
font-weight: normal;
cursor: pointer;
margin: 0;
padding: 8px 12px;
border: 1px solid #cccccc;
background-color: #fafafa;
}
.w-file-upload-file {
display: flex;
flex-grow: 1;
justify-content: space-between;
margin: 0;
padding: 8px 9px 8px 11px;
border: 1px solid #cccccc;
background-color: #fafafa;
}
.w-file-upload-file-name {
font-size: 14px;
font-weight: normal;
display: block;
}
.w-file-remove-link {
margin-top: 3px;
margin-left: 10px;
width: auto;
height: auto;
padding: 3px;
display: block;
cursor: pointer;
}
.w-icon-file-upload-remove {
margin: auto;
font-size: 10px;
}
.w-file-upload-error-msg {
display: inline-block;
color: #ea384c;
padding: 2px 0;
}
.w-file-upload-info {
display: inline-block;
line-height: 38px;
padding: 0 12px;
}
.w-file-upload-label {
display: inline-block;
font-size: 14px;
font-weight: normal;
cursor: pointer;
margin: 0;
padding: 8px 12px;
border: 1px solid #cccccc;
background-color: #fafafa;
}
.w-icon-file-upload-icon,
.w-icon-file-upload-uploading {
display: inline-block;
margin-right: 8px;
width: 20px;
}
.w-icon-file-upload-uploading {
height: 20px;
}
.w-container {
margin-left: auto;
margin-right: auto;
max-width: 940px;
}
.w-container:before,
.w-container:after {
content: " ";
display: table;
grid-column-start: 1;
grid-row-start: 1;
grid-column-end: 2;
grid-row-end: 2;
}
.w-container:after {
clear: both;
}
.w-container .w-row {
margin-left: -10px;
margin-right: -10px;
}
.w-row:before,
.w-row:after {
content: " ";
display: table;
grid-column-start: 1;
grid-row-start: 1;
grid-column-end: 2;
grid-row-end: 2;
}
.w-row:after {
clear: both;
}
.w-row .w-row {
margin-left: 0;
margin-right: 0;
}
.w-col {
position: relative;
float: left;
width: 100%;
min-height: 1px;
padding-left: 10px;
padding-right: 10px;
}
.w-col .w-col {
padding-left: 0;
padding-right: 0;
}
.w-col-1 {
width: 8.33333333%;
}
.w-col-2 {
width: 16.66666667%;
}
.w-col-3 {
width: 25%;
}
.w-col-4 {
width: 33.33333333%;
}
.w-col-5 {
width: 41.66666667%;
}
.w-col-6 {
width: 50%;
}
.w-col-7 {
width: 58.33333333%;
}
.w-col-8 {
width: 66.66666667%;
}
.w-col-9 {
width: 75%;
}
.w-col-10 {
width: 83.33333333%;
}
.w-col-11 {
width: 91.66666667%;
}
.w-col-12 {
width: 100%;
}
.w-hidden-main {
display: none !important;
}
@media screen and (max-width: 991px) {
.w-container {
max-width: 728px;
}
.w-hidden-main {
display: inherit !important;
}
.w-hidden-medium {
display: none !important;
}
.w-col-medium-1 {
width: 8.33333333%;
}
.w-col-medium-2 {
width: 16.66666667%;
}
.w-col-medium-3 {
width: 25%;
}
.w-col-medium-4 {
width: 33.33333333%;
}
.w-col-medium-5 {
width: 41.66666667%;
}
.w-col-medium-6 {
width: 50%;
}
.w-col-medium-7 {
width: 58.33333333%;
}
.w-col-medium-8 {
width: 66.66666667%;
}
.w-col-medium-9 {
width: 75%;
}
.w-col-medium-10 {
width: 83.33333333%;
}
.w-col-medium-11 {
width: 91.66666667%;
}
.w-col-medium-12 {
width: 100%;
}
.w-col-stack {
width: 100%;
left: auto;
right: auto;
}
}
@media screen and (max-width: 767px) {
.w-hidden-main {
display: inherit !important;
}
.w-hidden-medium {
display: inherit !important;
}
.w-hidden-small {
display: none !important;
}
.w-row,
.w-container .w-row {
margin-left: 0;
margin-right: 0;
}
.w-col {
width: 100%;
left: auto;
right: auto;
}
.w-col-small-1 {
width: 8.33333333%;
}
.w-col-small-2 {
width: 16.66666667%;
}
.w-col-small-3 {
width: 25%;
}
.w-col-small-4 {
width: 33.33333333%;
}
.w-col-small-5 {
width: 41.66666667%;
}
.w-col-small-6 {
width: 50%;
}
.w-col-small-7 {
width: 58.33333333%;
}
.w-col-small-8 {
width: 66.66666667%;
}
.w-col-small-9 {
width: 75%;
}
.w-col-small-10 {
width: 83.33333333%;
}
.w-col-small-11 {
width: 91.66666667%;
}
.w-col-small-12 {
width: 100%;
}
}
@media screen and (max-width: 479px) {
.w-container {
max-width: none;
}
.w-hidden-main {
display: inherit !important;
}
.w-hidden-medium {
display: inherit !important;
}
.w-hidden-small {
display: inherit !important;
}
.w-hidden-tiny {
display: none !important;
}
.w-col {
width: 100%;
}
.w-col-tiny-1 {
width: 8.33333333%;
}
.w-col-tiny-2 {
width: 16.66666667%;
}
.w-col-tiny-3 {
width: 25%;
}
.w-col-tiny-4 {
width: 33.33333333%;
}
.w-col-tiny-5 {
width: 41.66666667%;
}
.w-col-tiny-6 {
width: 50%;
}
.w-col-tiny-7 {
width: 58.33333333%;
}
.w-col-tiny-8 {
width: 66.66666667%;
}
.w-col-tiny-9 {
width: 75%;
}
.w-col-tiny-10 {
width: 83.33333333%;
}
.w-col-tiny-11 {
width: 91.66666667%;
}
.w-col-tiny-12 {
width: 100%;
}
}
.w-widget {
position: relative;
}
.w-widget-map {
width: 100%;
height: 400px;
}
.w-widget-map label {
width: auto;
display: inline;
}
.w-widget-map img {
max-width: inherit;
}
.w-widget-map .gm-style-iw {
text-align: center;
}
.w-widget-map .gm-style-iw > button {
display: none !important;
}
.w-widget-twitter {
overflow: hidden;
}
.w-widget-twitter-count-shim {
display: inline-block;
vertical-align: top;
position: relative;
width: 28px;
height: 20px;
text-align: center;
background: white;
border: #758696 solid 1px;
border-radius: 3px;
}
.w-widget-twitter-count-shim * {
pointer-events: none;
user-select: none;
}
.w-widget-twitter-count-shim .w-widget-twitter-count-inner {
position: relative;
font-size: 15px;
line-height: 12px;
text-align: center;
color: #999;
font-family: serif;
}
.w-widget-twitter-count-shim .w-widget-twitter-count-clear {
position: relative;
display: block;
}
.w-widget-twitter-count-shim.w--large {
width: 36px;
height: 28px;
}
.w-widget-twitter-count-shim.w--large .w-widget-twitter-count-inner {
font-size: 18px;
line-height: 18px;
}
.w-widget-twitter-count-shim:not(.w--vertical) {
margin-left: 5px;
margin-right: 8px;
}
.w-widget-twitter-count-shim:not(.w--vertical).w--large {
margin-left: 6px;
}
.w-widget-twitter-count-shim:not(.w--vertical):before,
.w-widget-twitter-count-shim:not(.w--vertical):after {
top: 50%;
left: 0;
border: solid transparent;
content: ' ';
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.w-widget-twitter-count-shim:not(.w--vertical):before {
border-color: rgba(117, 134, 150, 0);
border-right-color: #5d6c7b;
border-width: 4px;
margin-left: -9px;
margin-top: -4px;
}
.w-widget-twitter-count-shim:not(.w--vertical).w--large:before {
border-width: 5px;
margin-left: -10px;
margin-top: -5px;
}
.w-widget-twitter-count-shim:not(.w--vertical):after {
border-color: rgba(255, 255, 255, 0);
border-right-color: white;
border-width: 4px;
margin-left: -8px;
margin-top: -4px;
}
.w-widget-twitter-count-shim:not(.w--vertical).w--large:after {
border-width: 5px;
margin-left: -9px;
margin-top: -5px;
}
.w-widget-twitter-count-shim.w--vertical {
width: 61px;
height: 33px;
margin-bottom: 8px;
}
.w-widget-twitter-count-shim.w--vertical:before,
.w-widget-twitter-count-shim.w--vertical:after {
top: 100%;
left: 50%;
border: solid transparent;
content: ' ';
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.w-widget-twitter-count-shim.w--vertical:before {
border-color: rgba(117, 134, 150, 0);
border-top-color: #5d6c7b;
border-width: 5px;
margin-left: -5px;
}
.w-widget-twitter-count-shim.w--vertical:after {
border-color: rgba(255, 255, 255, 0);
border-top-color: white;
border-width: 4px;
margin-left: -4px;
}
.w-widget-twitter-count-shim.w--vertical .w-widget-twitter-count-inner {
font-size: 18px;
line-height: 22px;
}
.w-widget-twitter-count-shim.w--vertical.w--large {
width: 76px;
}
.w-background-video {
position: relative;
overflow: hidden;
height: 500px;
color: white;
}
.w-background-video > video {
background-size: cover;
background-position: 50% 50%;
position: absolute;
margin: auto;
width: 100%;
height: 100%;
right: -100%;
bottom: -100%;
top: -100%;
left: -100%;
object-fit: cover;
z-index: -100;
}
.w-background-video > video::-webkit-media-controls-start-playback-button {
display: none !important;
-webkit-appearance: none;
}
.w-background-video--control {
position: absolute;
bottom: 1em;
right: 1em;
background-color: transparent;
padding: 0;
}
.w-background-video--control > [hidden] {
display: none !important;
}
.w-slider {
position: relative;
height: 300px;
text-align: center;
background: #dddddd;
clear: both;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
tap-highlight-color: rgba(0, 0, 0, 0);
}
.w-slider-mask {
position: relative;
display: block;
overflow: hidden;
z-index: 1;
left: 0;
right: 0;
height: 100%;
white-space: nowrap;
}
.w-slide {
position: relative;
display: inline-block;
vertical-align: top;
width: 100%;
height: 100%;
white-space: normal;
text-align: left;
}
.w-slider-nav {
position: absolute;
z-index: 2;
top: auto;
right: 0;
bottom: 0;
left: 0;
margin: auto;
padding-top: 10px;
height: 40px;
text-align: center;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
tap-highlight-color: rgba(0, 0, 0, 0);
}
.w-slider-nav.w-round > div {
border-radius: 100%;
}
.w-slider-nav.w-num > div {
width: auto;
height: auto;
padding: 0.2em 0.5em;
font-size: inherit;
line-height: inherit;
}
.w-slider-nav.w-shadow > div {
box-shadow: 0 0 3px rgba(51, 51, 51, 0.4);
}
.w-slider-nav-invert {
color: #fff;
}
.w-slider-nav-invert > div {
background-color: rgba(34, 34, 34, 0.4);
}
.w-slider-nav-invert > div.w-active {
background-color: #222;
}
.w-slider-dot {
position: relative;
display: inline-block;
width: 1em;
height: 1em;
background-color: rgba(255, 255, 255, 0.4);
cursor: pointer;
margin: 0 3px 0.5em;
transition: background-color 100ms, color 100ms;
}
.w-slider-dot.w-active {
background-color: #fff;
}
.w-slider-dot:focus {
outline: none;
box-shadow: 0px 0px 0px 2px #fff;
}
.w-slider-dot:focus.w-active {
box-shadow: none;
}
.w-slider-arrow-left,
.w-slider-arrow-right {
position: absolute;
width: 80px;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
cursor: pointer;
overflow: hidden;
color: white;
font-size: 40px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
tap-highlight-color: rgba(0, 0, 0, 0);
user-select: none;
}
.w-slider-arrow-left [class^='w-icon-'],
.w-slider-arrow-right [class^='w-icon-'],
.w-slider-arrow-left [class*=' w-icon-'],
.w-slider-arrow-right [class*=' w-icon-'] {
position: absolute;
}
.w-slider-arrow-left:focus,
.w-slider-arrow-right:focus {
outline: 0;
}
.w-slider-arrow-left {
z-index: 3;
right: auto;
}
.w-slider-arrow-right {
z-index: 4;
left: auto;
}
.w-icon-slider-left,
.w-icon-slider-right {
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 1em;
height: 1em;
}
.w-slider-aria-label {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.w-slider-force-show {
display: block !important;
}
.w-dropdown {
display: inline-block;
position: relative;
text-align: left;
margin-left: auto;
margin-right: auto;
z-index: 900;
}
.w-dropdown-btn,
.w-dropdown-toggle,
.w-dropdown-link {
position: relative;
vertical-align: top;
text-decoration: none;
color: #222222;
padding: 20px;
text-align: left;
margin-left: auto;
margin-right: auto;
white-space: nowrap;
}
.w-dropdown-toggle {
user-select: none;
display: inline-block;
cursor: pointer;
padding-right: 40px;
}
.w-dropdown-toggle:focus {
outline: 0;
}
.w-icon-dropdown-toggle {
position: absolute;
top: 0;
right: 0;
bottom: 0;
margin: auto;
margin-right: 20px;
width: 1em;
height: 1em;
}
.w-dropdown-list {
position: absolute;
background: #dddddd;
display: none;
min-width: 100%;
}
.w-dropdown-list.w--open {
display: block;
}
.w-dropdown-link {
padding: 10px 20px;
display: block;
color: #222222;
}
.w-dropdown-link.w--current {
color: #0082f3;
}
.w-dropdown-link:focus {
outline: 0;
}
@media screen and (max-width: 767px) {
.w-nav-brand {
padding-left: 10px;
}
}
/**
* ## Note
* Safari (on both iOS and OS X) does not handle viewport units (vh, vw) well.
* For example percentage units do not work on descendants of elements that
* have any dimensions expressed in viewport units. It also doesn’t handle them at
* all in `calc()`.
*/
/**
* Wrapper around all lightbox elements
*
* 1. Since the lightbox can receive focus, IE also gives it an outline.
* 2. Fixes flickering on Chrome when a transition is in progress
* underneath the lightbox.
*/
.w-lightbox-backdrop {
cursor: auto;
font-style: normal;
letter-spacing: normal;
list-style: disc;
text-indent: 0;
text-shadow: none;
text-transform: none;
visibility: visible;
white-space: normal;
word-break: normal;
word-spacing: normal;
word-wrap: normal;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
color: #fff;
font-family: "Helvetica Neue", Helvetica, Ubuntu, "Segoe UI", Verdana, sans-serif;
font-size: 17px;
line-height: 1.2;
font-weight: 300;
text-align: center;
background: rgba(0, 0, 0, 0.9);
z-index: 2000;
outline: 0;
/* 1 */
opacity: 0;
-webkit-user-select: none;
-moz-user-select: none;
-webkit-tap-highlight-color: transparent;
-webkit-transform: translate(0, 0);
/* 2 */
}
/**
* Neat trick to bind the rubberband effect to our canvas instead of the whole
* document on iOS. It also prevents a bug that causes the document underneath to scroll.
*/
.w-lightbox-backdrop,
.w-lightbox-container {
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.w-lightbox-content {
position: relative;
height: 100vh;
overflow: hidden;
}
.w-lightbox-view {
position: absolute;
width: 100vw;
height: 100vh;
opacity: 0;
}
.w-lightbox-view:before {
content: "";
height: 100vh;
}
/* .w-lightbox-content */
.w-lightbox-group,
.w-lightbox-group .w-lightbox-view,
.w-lightbox-group .w-lightbox-view:before {
height: 86vh;
}
.w-lightbox-frame,
.w-lightbox-view:before {
display: inline-block;
vertical-align: middle;
}
/*
* 1. Remove default margin set by user-agent on the element.
*/
.w-lightbox-figure {
position: relative;
margin: 0;
/* 1 */
}
.w-lightbox-group .w-lightbox-figure {
cursor: pointer;
}
/**
* IE adds image dimensions as width and height attributes on the IMG tag,
* but we need both width and height to be set to auto to enable scaling.
*/
.w-lightbox-img {
width: auto;
height: auto;
max-width: none;
}
/**
* 1. Reset if style is set by user on "All Images"
*/
.w-lightbox-image {
display: block;
float: none;
/* 1 */
max-width: 100vw;
max-height: 100vh;
}
.w-lightbox-group .w-lightbox-image {
max-height: 86vh;
}
.w-lightbox-caption {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 0.5em 1em;
background: rgba(0, 0, 0, 0.4);
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.w-lightbox-embed {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}
.w-lightbox-control {
position: absolute;
top: 0;
width: 4em;
background-size: 24px;
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.w-lightbox-left {
display: none;
bottom: 0;
left: 0;
/* */
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0yMCAwIDI0IDQwIiB3aWR0aD0iMjQiIGhlaWdodD0iNDAiPjxnIHRyYW5zZm9ybT0icm90YXRlKDQ1KSI+PHBhdGggZD0ibTAgMGg1djIzaDIzdjVoLTI4eiIgb3BhY2l0eT0iLjQiLz48cGF0aCBkPSJtMSAxaDN2MjNoMjN2M2gtMjZ6IiBmaWxsPSIjZmZmIi8+PC9nPjwvc3ZnPg==");
}
.w-lightbox-right {
display: none;
right: 0;
bottom: 0;
/* */
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii00IDAgMjQgNDAiIHdpZHRoPSIyNCIgaGVpZ2h0PSI0MCI+PGcgdHJhbnNmb3JtPSJyb3RhdGUoNDUpIj48cGF0aCBkPSJtMC0waDI4djI4aC01di0yM2gtMjN6IiBvcGFjaXR5PSIuNCIvPjxwYXRoIGQ9Im0xIDFoMjZ2MjZoLTN2LTIzaC0yM3oiIGZpbGw9IiNmZmYiLz48L2c+PC9zdmc+");
}
/*
* Without specifying the with and height inside the SVG, all versions of IE render the icon too small.
* The bug does not seem to manifest itself if the elements are tall enough such as the above arrows.
* (http://stackoverflow.com/questions/16092114/background-size-differs-in-internet-explorer)
*/
.w-lightbox-close {
right: 0;
height: 2.6em;
/* */
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii00IDAgMTggMTciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxNyI+PGcgdHJhbnNmb3JtPSJyb3RhdGUoNDUpIj48cGF0aCBkPSJtMCAwaDd2LTdoNXY3aDd2NWgtN3Y3aC01di03aC03eiIgb3BhY2l0eT0iLjQiLz48cGF0aCBkPSJtMSAxaDd2LTdoM3Y3aDd2M2gtN3Y3aC0zdi03aC03eiIgZmlsbD0iI2ZmZiIvPjwvZz48L3N2Zz4=");
background-size: 18px;
}
/**
* 1. All IE versions add extra space at the bottom without this.
*/
.w-lightbox-strip {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 0 1vh;
line-height: 0;
/* 1 */
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
}
/*
* 1. We use content-box to avoid having to do `width: calc(10vh + 2vw)`
* which doesn’t work in Safari anyway.
* 2. Chrome renders images pixelated when switching to GPU. Making sure
* the parent is also rendered on the GPU (by setting translate3d for
* example) fixes this behavior.
*/
.w-lightbox-item {
display: inline-block;
width: 10vh;
padding: 2vh 1vh;
box-sizing: content-box;
/* 1 */
cursor: pointer;
-webkit-transform: translate3d(0, 0, 0);
/* 2 */
}
.w-lightbox-active {
opacity: 0.3;
}
.w-lightbox-thumbnail {
position: relative;
height: 10vh;
background: #222;
overflow: hidden;
}
.w-lightbox-thumbnail-image {
position: absolute;
top: 0;
left: 0;
}
.w-lightbox-thumbnail .w-lightbox-tall {
top: 50%;
width: 100%;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
}
.w-lightbox-thumbnail .w-lightbox-wide {
left: 50%;
height: 100%;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
/*
* Spinner
*
* Absolute pixel values are used to avoid rounding errors that would cause
* the white spinning element to be misaligned with the track.
*/
.w-lightbox-spinner {
position: absolute;
top: 50%;
left: 50%;
box-sizing: border-box;
width: 40px;
height: 40px;
margin-top: -20px;
margin-left: -20px;
border: 5px solid rgba(0, 0, 0, 0.4);
border-radius: 50%;
-webkit-animation: spin 0.8s infinite linear;
animation: spin 0.8s infinite linear;
}
.w-lightbox-spinner:after {
content: "";
position: absolute;
top: -4px;
right: -4px;
bottom: -4px;
left: -4px;
border: 3px solid transparent;
border-bottom-color: #fff;
border-radius: 50%;
}
/*
* Utility classes
*/
.w-lightbox-hide {
display: none;
}
.w-lightbox-noscroll {
overflow: hidden;
}
@media (min-width: 768px) {
.w-lightbox-content {
height: 96vh;
margin-top: 2vh;
}
.w-lightbox-view,
.w-lightbox-view:before {
height: 96vh;
}
/* .w-lightbox-content */
.w-lightbox-group,
.w-lightbox-group .w-lightbox-view,
.w-lightbox-group .w-lightbox-view:before {
height: 84vh;
}
.w-lightbox-image {
max-width: 96vw;
max-height: 96vh;
}
.w-lightbox-group .w-lightbox-image {
max-width: 82.3vw;
max-height: 84vh;
}
.w-lightbox-left,
.w-lightbox-right {
display: block;
opacity: 0.5;
}
.w-lightbox-close {
opacity: 0.8;
}
.w-lightbox-control:hover {
opacity: 1;
}
}
.w-lightbox-inactive,
.w-lightbox-inactive:hover {
opacity: 0;
}
.w-richtext:before,
.w-richtext:after {
content: " ";
display: table;
grid-column-start: 1;
grid-row-start: 1;
grid-column-end: 2;
grid-row-end: 2;
}
.w-richtext:after {
clear: both;
}
.w-richtext[contenteditable="true"]:before,
.w-richtext[contenteditable="true"]:after {
white-space: initial;
}
.w-richtext ol,
.w-richtext ul {
overflow: hidden;
}
.w-richtext .w-richtext-figure-selected.w-richtext-figure-type-video div:after,
.w-richtext .w-richtext-figure-selected[data-rt-type="video"] div:after {
outline: 2px solid #2895f7;
}
.w-richtext .w-richtext-figure-selected.w-richtext-figure-type-image div,
.w-richtext .w-richtext-figure-selected[data-rt-type="image"] div {
outline: 2px solid #2895f7;
}
.w-richtext figure.w-richtext-figure-type-video > div:after,
.w-richtext figure[data-rt-type="video"] > div:after {
content: '';
position: absolute;
display: none;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.w-richtext figure {
position: relative;
max-width: 60%;
}
.w-richtext figure > div:before {
cursor: default!important;
}
.w-richtext figure img {
width: 100%;
}
.w-richtext figure figcaption.w-richtext-figcaption-placeholder {
opacity: 0.6;
}
.w-richtext figure div {
/* fix incorrectly sized selection border in the data manager */
font-size: 0px;
color: transparent;
}
.w-richtext figure.w-richtext-figure-type-image,
.w-richtext figure[data-rt-type="image"] {
display: table;
}
.w-richtext figure.w-richtext-figure-type-image > div,
.w-richtext figure[data-rt-type="image"] > div {
display: inline-block;
}
.w-richtext figure.w-richtext-figure-type-image > figcaption,
.w-richtext figure[data-rt-type="image"] > figcaption {
display: table-caption;
caption-side: bottom;
}
.w-richtext figure.w-richtext-figure-type-video,
.w-richtext figure[data-rt-type="video"] {
width: 60%;
height: 0;
}
.w-richtext figure.w-richtext-figure-type-video iframe,
.w-richtext figure[data-rt-type="video"] iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.w-richtext figure.w-richtext-figure-type-video > div,
.w-richtext figure[data-rt-type="video"] > div {
width: 100%;
}
.w-richtext figure.w-richtext-align-center {
margin-right: auto;
margin-left: auto;
clear: both;
}
.w-richtext figure.w-richtext-align-center.w-richtext-figure-type-image > div,
.w-richtext figure.w-richtext-align-center[data-rt-type="image"] > div {
max-width: 100%;
}
.w-richtext figure.w-richtext-align-normal {
clear: both;
}
.w-richtext figure.w-richtext-align-fullwidth {
width: 100%;
max-width: 100%;
text-align: center;
clear: both;
display: block;
margin-right: auto;
margin-left: auto;
}
.w-richtext figure.w-richtext-align-fullwidth > div {
display: inline-block;
/* padding-bottom is used for aspect ratios in video figures
we want the div to inherit that so hover/selection borders in the designer-canvas
fit right*/
padding-bottom: inherit;
}
.w-richtext figure.w-richtext-align-fullwidth > figcaption {
display: block;
}
.w-richtext figure.w-richtext-align-floatleft {
float: left;
margin-right: 15px;
clear: none;
}
.w-richtext figure.w-richtext-align-floatright {
float: right;
margin-left: 15px;
clear: none;
}
.w-nav {
position: relative;
background: #dddddd;
z-index: 1000;
}
.w-nav:before,
.w-nav:after {
content: " ";
display: table;
grid-column-start: 1;
grid-row-start: 1;
grid-column-end: 2;
grid-row-end: 2;
}
.w-nav:after {
clear: both;
}
.w-nav-brand {
position: relative;
float: left;
text-decoration: none;
color: #333333;
}
.w-nav-link {
position: relative;
display: inline-block;
vertical-align: top;
text-decoration: none;
color: #222222;
padding: 20px;
text-align: left;
margin-left: auto;
margin-right: auto;
}
.w-nav-link.w--current {
color: #0082f3;
}
.w-nav-menu {
position: relative;
float: right;
}
[data-nav-menu-open] {
display: block !important;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #C8C8C8;
text-align: center;
overflow: visible;
min-width: 200px;
}
.w--nav-link-open {
display: block;
position: relative;
}
.w-nav-overlay {
position: absolute;
overflow: hidden;
display: none;
top: 100%;
left: 0;
right: 0;
width: 100%;
}
.w-nav-overlay [data-nav-menu-open] {
top: 0;
}
.w-nav[data-animation='over-left'] .w-nav-overlay {
width: auto;
}
.w-nav[data-animation='over-left'] .w-nav-overlay,
.w-nav[data-animation='over-left'] [data-nav-menu-open] {
right: auto;
z-index: 1;
top: 0;
}
.w-nav[data-animation='over-right'] .w-nav-overlay {
width: auto;
}
.w-nav[data-animation='over-right'] .w-nav-overlay,
.w-nav[data-animation='over-right'] [data-nav-menu-open] {
left: auto;
z-index: 1;
top: 0;
}
.w-nav-button {
position: relative;
float: right;
padding: 18px;
font-size: 24px;
display: none;
cursor: pointer;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
tap-highlight-color: rgba(0, 0, 0, 0);
user-select: none;
}
.w-nav-button:focus {
outline: 0;
}
.w-nav-button.w--open {
background-color: #C8C8C8;
color: white;
}
.w-nav[data-collapse='all'] .w-nav-menu {
display: none;
}
.w-nav[data-collapse='all'] .w-nav-button {
display: block;
}
.w--nav-dropdown-open {
display: block;
}
.w--nav-dropdown-toggle-open {
display: block;
}
.w--nav-dropdown-list-open {
position: static;
}
@media screen and (max-width: 991px) {
.w-nav[data-collapse='medium'] .w-nav-menu {
display: none;
}
.w-nav[data-collapse='medium'] .w-nav-button {
display: block;
}
}
@media screen and (max-width: 767px) {
.w-nav[data-collapse='small'] .w-nav-menu {
display: none;
}
.w-nav[data-collapse='small'] .w-nav-button {
display: block;
}
.w-nav-brand {
padding-left: 10px;
}
}
@media screen and (max-width: 479px) {
.w-nav[data-collapse='tiny'] .w-nav-menu {
display: none;
}
.w-nav[data-collapse='tiny'] .w-nav-button {
display: block;
}
}
.w-tabs {
position: relative;
}
.w-tabs:before,
.w-tabs:after {
content: " ";
display: table;
grid-column-start: 1;
grid-row-start: 1;
grid-column-end: 2;
grid-row-end: 2;
}
.w-tabs:after {
clear: both;
}
.w-tab-menu {
position: relative;
}
.w-tab-link {
position: relative;
display: inline-block;
vertical-align: top;
text-decoration: none;
padding: 9px 30px;
text-align: left;
cursor: pointer;
color: #222222;
background-color: #dddddd;
}
.w-tab-link.w--current {
background-color: #C8C8C8;
}
.w-tab-link:focus {
outline: 0;
}
.w-tab-content {
position: relative;
display: block;
overflow: hidden;
}
.w-tab-pane {
position: relative;
display: none;
}
.w--tab-active {
display: block;
}
@media screen and (max-width: 479px) {
.w-tab-link {
display: block;
}
}
.w-ix-emptyfix:after {
content: "";
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.w-dyn-empty {
padding: 10px;
background-color: #dddddd;
}
.w-dyn-hide {
display: none !important;
}
.w-dyn-bind-empty {
display: none !important;
}
.w-condition-invisible {
display: none !important;
}
.wf-layout-layout {
display: grid;
}
/* ============================================================
SECTION 3: gcfstore.webflow.css
============================================================ */
:root {
--red: #de132f;
--gray-808080: grey;
--real-light-gray: #f1f1f1;
--light-gray: #e9e9e9;
--dark-gray: #575757;
--black-40a\: #0006;
--light-red: #eee2e4;
--white: white;
--blue: #16b5d1;
--gray-for-rule-line: #b6b6b6;
--black: black;
--color\: #00cc74;
--trans: #fff0;
}
body {
color: #333;
flex-direction: column;
font-family: Inter;
font-size: 17px;
line-height: 1.5;
display: flex;
}
h1 {
font-variation-settings: normal;
margin-top: 20px;
margin-bottom: 10px;
font-family: Inter;
font-size: 38px;
font-weight: 700;
line-height: 1.1;
}
h2 {
font-variation-settings: normal;
margin-top: 20px;
margin-bottom: 10px;
font-family: Inter;
font-size: 32px;
font-weight: 700;
line-height: 36px;
}
h3 {
margin-top: 20px;
margin-bottom: 10px;
font-size: 24px;
font-weight: bold;
line-height: 30px;
}
h4 {
margin-top: 10px;
margin-bottom: 10px;
font-size: 18px;
font-weight: bold;
line-height: 24px;
}
h5 {
color: var(--red);
margin-top: 10px;
margin-bottom: 10px;
font-family: Syne;
font-size: 18px;
font-weight: 700;
line-height: 20px;
}
h6 {
margin-top: 10px;
margin-bottom: 10px;
font-family: Syne;
font-size: 12px;
font-weight: 700;
line-height: 18px;
}
p {
font-variation-settings: normal;
text-align: left;
max-width: 100ch;
margin-bottom: 10px;
font-weight: 500;
}
a {
text-decoration: underline;
}
li {
font-weight: 500;
}
strong {
font-family: Libre Franklin, sans-serif;
font-weight: 700;
}
em {
font-style: italic;
}
blockquote {
border-left: 5px solid #e2e2e2;
margin-bottom: 10px;
padding: 10px 20px;
font-size: 18px;
font-weight: 600;
line-height: 22px;
}
figure {
margin-bottom: 10px;
}
.main {
border-style: none;
border-width: 0 0 0 7px;
border-color: var(--gray-808080) var(--red);
background-color: var(--real-light-gray);
flex-direction: column;
flex: 1;
justify-content: space-between;
align-self: stretch;
align-items: stretch;
width: 100%;
height: auto;
margin-left: 0;
padding-left: 0;
display: block;
position: relative;
}
.header {
background-color: #0000;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
width: auto;
max-width: none;
margin-left: auto;
margin-right: auto;
padding-left: 0;
display: flex;
}
.section {
border-style: none solid none none;
border-width: 1px 1px 1px 20px;
border-color: black black black var(--light-gray);
background-color: var(--real-light-gray);
font-variation-settings: normal;
flex-direction: column;
justify-content: flex-start;
align-items: center;
width: auto;
height: auto;
margin-left: 0;
display: flex;
}
.footer {
background-color: var(--dark-gray);
box-shadow: 0 0 20px 0 var(--black-40a\);
flex-flow: column;
margin-top: auto;
padding: 20px;
font-family: "Styrene 100";
font-weight: 400;
display: flex;
position: sticky;
}
.article {
border-style: none none none solid;
border-width: 0 0 0 2px;
border-color: var(--gray-808080) var(--gray-808080) var(--gray-808080) var(--light-red);
background-color: var(--white);
outline-offset: 0px;
mix-blend-mode: normal;
border-radius: 0;
outline: 3px #333;
flex-direction: column;
flex: 1;
align-self: auto;
align-items: flex-start;
width: 90%;
max-width: 1220px;
height: 0;
min-height: 50px;
max-height: none;
margin: 20px 0 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
font-family: "Styrene 400";
display: block;
}
.figcaption {
max-width: 70ch;
font-size: 16px;
line-height: 1.3;
}
.address {
grid-column-gap: 50px;
grid-row-gap: 50px;
background-color: #0000;
flex-direction: row;
justify-content: center;
align-items: center;
width: 60vw;
max-width: 1280px;
min-height: 30px;
margin-left: auto;
margin-right: auto;
display: flex;
}
.head_h2 {
z-index: 10;
color: var(--gray-808080);
font-variation-settings: normal;
margin-top: 0;
margin-bottom: 0;
font-weight: 600;
line-height: 1.1;
display: block;
position: static;
top: 63px;
}
.nav_content-wrapper {
grid-column-gap: 0px;
grid-row-gap: 0px;
background-color: #0000;
flex-flow: row;
justify-content: flex-start;
align-items: flex-start;
width: 90%;
max-width: 1440px;
margin-left: 0;
margin-right: 0;
display: flex;
}
.nav {
border-style: none;
border-width: 0 0 1px;
border-color: transparent transparent var(--light-gray);
background-color: var(--light-red);
outline-offset: 0px;
outline: 0 #333;
justify-content: flex-start;
align-self: stretch;
display: block;
position: sticky;
top: 0;
}
.nav_dropdown-icon {
color: var(--blue);
margin-top: 25px;
font-family: "Styrene-a 700-ital";
}
.nav_brand-link {
width: 125px;
height: 50px;
position: static;
}
.nav_link {
padding-top: 20px;
text-decoration: none;
}
.nav_link:hover {
color: #3898ec;
}
.nav_link.w--current {
padding-top: 40px;
}
.nav_dropdown-list {
background-color: #0000;
margin-top: 0;
}
.nav_dropdown-list.w--open {
background-color: #fff;
margin-top: -10px;
}
.nav_menu {
background-color: var(--dark-gray);
flex: none;
order: 1;
align-self: auto;
margin-left: 129px;
display: inline-flex;
}
.nav_dropdown-link {
color: var(--blue);
-webkit-text-fill-color: inherit;
background-color: #0000;
background-clip: border-box;
padding: 0 20px 10px 30px;
font-family: "Styrene-a 400";
font-size: 18px;
font-weight: 700;
text-decoration: none;
display: block;
}
.nav_dropdown-link:hover {
color: #3898ec;
background-color: #eef2ff;
}
.nav_link-label {
color: var(--blue);
font-family: "Styrene-a 400";
font-size: 18px;
font-weight: 700;
}
.nav_brand-image {
outline-offset: 0px;
background-color: #0000001a;
border: 1px solid #000;
outline: 3px #d9d9d9;
width: auto;
max-width: none;
height: 100px;
display: block;
}
.figure {
display: block;
}
.h1 {
z-index: 0;
color: #9a94cc;
margin-top: 0;
margin-bottom: 30px;
padding-top: 20px;
padding-left: 15px;
font-family: Bitter Thin;
font-style: italic;
font-weight: 300;
position: static;
inset: auto;
}
.rtb {
border-left: 1px none var(--gray-for-rule-line);
background-color: var(--white);
margin-top: 0;
margin-left: auto;
margin-right: auto;
padding-left: 20px;
padding-right: 20px;
font-family: Libre Franklin, sans-serif;
font-style: italic;
font-weight: 500;
}
.rtb h1 {
color: var(--dark-gray);
letter-spacing: 1px;
margin-top: 20px;
margin-bottom: 20px;
font-family: Bebas Neue, sans-serif;
font-size: 40px;
font-style: normal;
font-weight: 400; /* was 700 — Bebas Neue has no bold cut, this was faux-bold in the original site CSS, not something introduced by the mega-menu work */
}
.rtb h2 {
color: var(--gray-808080);
letter-spacing: 1px;
font-family: Bebas Neue, sans-serif;
font-size: 35px;
font-style: normal;
font-weight: 400; /* was 700 — same pre-existing faux-bold issue as .rtb h1 above */
line-height: 1.1;
}
.rtb h3 {
color: var(--gray-808080);
letter-spacing: 1px;
font-family: Bebas Neue, sans-serif;
font-size: 30px;
font-style: normal;
font-weight: 400;
line-height: 1.1;
}
.rtb p {
color: var(--dark-gray);
letter-spacing: .5px;
text-indent: 0;
white-space: normal;
word-break: normal;
overflow-wrap: normal;
max-width: 80ch;
margin-bottom: 20px;
margin-left: 0;
margin-right: 0;
font-family: Libre Franklin, sans-serif;
font-size: 18px;
font-style: normal;
font-weight: 500;
}
.rtb blockquote {
border-top: 1px none var(--red);
border-bottom: 1px solid var(--red);
border-left-width: 5px;
border-left-color: var(--red);
background-color: var(--white);
color: var(--red);
letter-spacing: .5px;
-webkit-text-fill-color: inherit;
object-fit: scale-down;
background-clip: border-box;
margin-left: 20px;
padding-top: 15px;
padding-bottom: 15px;
font-family: Libre Franklin, sans-serif;
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: 1.2;
display: inline-block;
}
.rtb li {
letter-spacing: .5px;
max-width: 60ch;
font-family: Libre Franklin, sans-serif;
font-size: 18px;
font-style: normal;
font-weight: 500;
}
.rtb a {
border-style: dotted;
border-width: 0 0 2px;
border-color: black black var(--dark-gray);
color: var(--black);
mix-blend-mode: normal;
font-weight: 600;
text-decoration: none;
}
.rtb a:hover {
border-bottom: 2px solid var(--color\);
background-color: var(--gray-808080);
color: var(--white);
}
.rtb h4 {
color: var(--red);
letter-spacing: .5px;
margin-top: 20px;
margin-bottom: 10px;
font-family: Syne;
font-size: 24px;
font-style: normal;
line-height: 1.3;
}
.rtb h6 {
color: var(--red);
letter-spacing: .5px;
font-size: 15px;
line-height: 1.1;
}
.body {
background-color: var(--light-gray);
background-image: linear-gradient(#000, #fff);
font-family: Montserrat variablefont wght;
}
.heading, .heading-2 {
font-family: Montserrat variablefont wght;
font-weight: 600;
}
.heading-3 {
font-weight: 600;
}
.paragraph {
font-weight: 500;
}
.block-quote {
font-weight: 600;
}
.text-block {
color: var(--light-gray);
text-align: center;
text-transform: uppercase;
font-size: 15px;
font-weight: 100;
}
.heading-4 {
line-height: 1.1;
}
.heading-5 {
color: var(--red);
font-family: Syne;
font-size: 14px;
line-height: 1.1;
}
.heading-6 {
color: var(--red);
font-size: 15px;
line-height: 1.1;
}
.heading-7 {
letter-spacing: .5px;
}
.bold-text {
font-family: "Styrene-a 500";
}
.bold-text-2 {
font-weight: 500;
}
.link {
font-family: "Styrene-a 400";
}
.link.w--current {
color: var(--red);
margin-top: 0;
padding-top: 0;
padding-left: 0;
font-family: Syne;
font-size: 42px;
font-weight: 700;
line-height: 1;
text-decoration: none;
display: inline-block;
}
.div-block-3 {
background-color: var(--light-red);
flex-flow: row;
flex: 0 auto;
justify-content: space-between;
align-self: stretch;
align-items: baseline;
width: 90%;
max-width: 1440px;
height: auto;
margin-left: auto;
margin-right: auto;
display: flex;
}
.div-block-4 {
background-color: var(--gray-808080);
width: auto;
height: auto;
}
.div-block-5 {
background-color: var(--trans);
width: auto;
height: auto;
}
.div-block-6 {
background-color: var(--blue);
width: 100px;
height: 100px;
}
.body-2 {
grid-column-gap: 16px;
grid-row-gap: 16px;
flex-flow: column;
grid-template-rows: auto auto;
grid-template-columns: 1fr 1fr;
grid-auto-columns: 1fr;
justify-content: space-between;
display: flex;
}
.navbar1_menu-button {
color: #52abd1;
padding: 0;
}
.navbar_menu {
align-items: center;
display: flex;
position: static;
}
.navbar_menu.is-page-height-tablet {
background-color: var(--white);
margin-top: 10px;
}
.nav__dropdown-link {
background-color: var(--light-red);
color: var(--blue);
border-bottom-style: none;
padding: 7px 15px 7px 20px;
font-family: Roboto Condensed;
font-size: 15px;
font-weight: 500;
}
.nav__dropdown-link:hover {
background-color: #fff;
}
.nav__dropdown-link.w--current {
background-color: var(--light-red);
color: var(--blue);
}
.nav__dropdown-link.spacer {
border-bottom-style: solid;
border-bottom-width: 1px;
margin-bottom: 5px;
padding-bottom: 10px;
}
.nav__dropdown-link.spacer.first {
margin-top: 9px;
}
.nav_component {
background-color: var(--white);
color: #52abd1;
border-bottom: 1px #000;
align-items: center;
width: 100%;
max-width: none;
height: auto;
min-height: auto;
margin-left: auto;
margin-right: auto;
padding-left: 0%;
padding-right: 0%;
font-weight: 500;
display: block;
position: static;
}
.nav_logo-link {
border-bottom-style: none;
margin-top: 0;
padding-left: 0;
}
.nav_container {
background-color: var(--white);
justify-content: space-between;
align-items: center;
width: 90%;
max-width: 1220px;
height: auto;
margin-left: auto;
margin-right: auto;
display: flex;
}
.nav_logo {
border-bottom: 1px #000;
width: 150px;
margin-bottom: 10px;
}
.navbar_link {
color: var(--dark-gray);
letter-spacing: 1px;
background-color: #0000;
border-bottom-style: none;
padding: 8px 10px;
font-family: Bebas Neue, sans-serif;
font-size: 20px;
}
.navbar_link:hover {
background-color: #fff;
}
.navbar_link.w--current {
background-color: var(--white);
color: var(--dark-gray);
}
.navbar_link.w--current:hover {
background-color: var(--white);
}
.navbar_link.no-highlight {
color: var(--blue);
padding-left: 10px;
padding-right: 10px;
font-family: Roboto Condensed;
font-size: 15px;
font-weight: 500;
}
.navbar_link.no-highlight.w--current {
color: #2aa3af;
background-color: #f0eeee;
}
.navbar_link.no-highlight.w--current:hover {
background-color: #fff;
}
.icon-2 {
font-size: 24px;
}
.dropdown-chevron {
color: #52abd1;
flex-direction: column;
justify-content: center;
align-items: center;
width: 1rem;
height: 1rem;
margin-left: -4px;
display: flex;
}
.nav_menu-dropdown {
color: #faf9f6;
padding: 8px 10px;
}
.nav_menu-dropdown:hover {
background-color: #f0eeee;
}
.nav_dropdown-toggle {
grid-column-gap: .5rem;
background-color: var(--light-red);
align-items: center;
padding: 0;
display: flex;
}
.nav_dropdown-toggle:hover {
background-color: #fff;
}
.navbar1_dropdown-list {
font-size: 15px;
line-height: 1.2;
}
.navbar1_dropdown-list.w--open {
background-color: var(--light-red);
border-style: solid;
border-width: 1px;
padding: 0;
}
.link_nav {
color: var(--blue);
border-bottom-style: none;
padding: 8px 0;
font-family: Roboto Condensed;
font-size: 15px;
font-weight: 500;
text-decoration: none;
}
.link_nav:hover {
background-color: #fff;
}
.link_nav.w--current {
background-color: var(--light-red);
color: var(--blue);
}
.link_nav.w--current:hover {
background-color: var(--white);
}
.logo {
color: var(--black);
letter-spacing: 1px;
border: 1px solid #000;
margin-top: 10px;
margin-bottom: 10px;
padding: 7px 5px 2px;
font-family: Bebas Neue, sans-serif;
font-size: 36px;
font-weight: 400;
line-height: 1;
text-decoration: none;
}
.image {
margin-top: 31px;
padding-left: 33px;
}
.div-block-7 {
border-bottom: 1px solid var(--red);
}
.coda-image {
border-bottom: 20px solid var(--light-red);
}
.text-span {
text-transform: uppercase;
font-size: 20px;
}
.code-embed {
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
position: static;
inset: 0 auto auto 0;
}
.video-container {
width: 100%;
height: 0%;
padding-bottom: 0%;
overflow: hidden;
}
.iframe {
width: 100%;
height: 100%;
position: relative;
inset: 0% auto auto 0%;
}
.responsive-container {
width: 100%;
height: 0;
padding-bottom: 56.25%;
position: relative;
}
.responsive-iframe {
border: 0 solid #000;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.footer-text {
color: var(--light-gray);
text-align: center;
letter-spacing: 1px;
text-transform: uppercase;
font-family: Libre Franklin, sans-serif;
font-size: 15px;
font-weight: 300;
}
.link-2 {
color: var(--light-red);
text-decoration: none;
}
.footer-link {
color: var(--white);
border: 1px #000;
font-family: "Styrene 100";
font-weight: 100;
text-decoration: underline;
}
.link-footer {
border-style: none none dashed;
border-width: 1px;
border-color: var(--light-gray);
color: var(--light-gray);
font-family: Libre Franklin, sans-serif;
font-style: normal;
font-weight: 300;
text-decoration: none;
}
.social {
background-color: var(--gray-808080);
width: 50px;
height: 50px;
margin: 14px;
}
.social-wrapper {
margin-left: auto;
margin-right: auto;
display: inline-block;
}
.wrapper-flex-2-col {
justify-content: flex-start;
display: flex;
}
.col-right {
flex: 1;
order: 0;
align-self: auto;
padding-right: 0;
}
.image-2 {
width: 100%;
}
.col-left {
width: 25%;
margin-top: 40px;
}
.church-people {
margin-bottom: 10px;
}
.img_logo {
width: 400px;
max-width: 400px;
}
.figure-caption {
font-family: Libre Franklin, sans-serif;
font-style: italic;
font-weight: 400;
}
.bold-text-3 {
font-family: Syne;
}
.bold-text-4 {
font-family: Libre Franklin, sans-serif;
}
.italic-text, .italic-text-2 {
font-style: normal;
}
.wrapper_slideshow {
width: 100%;
margin-top: 10px;
display: block;
}
.code-embed-2 {
margin-top: 0;
margin-bottom: 0;
}
.figure-2 {
margin-bottom: 30px;
}
.image-3, .image-4, .img_staff {
width: 250px;
max-width: 250px;
}
.link-block {
color: var(--black);
font-family: Bebas Neue, sans-serif;
font-weight: 400;
text-decoration: none;
}
@media screen and (max-width: 991px) {
h1 {
font-size: 36px;
}
.article {
width: 90%;
max-width: 1440px;
margin-left: 0;
margin-right: 0;
}
.figcaption {
font-size: 15px;
}
.head_h2 {
font-size: 30px;
top: 148px;
}
.nav_menu-button, .nav_menu-button.w--open {
background-color: #0000;
}
.nav_content-wrapper {
grid-column-gap: 0px;
grid-row-gap: 0px;
background-color: var(--light-red);
flex-flow: row;
justify-content: flex-start;
align-items: flex-start;
max-width: 1440200px;
margin-left: 0;
margin-right: auto;
display: flex;
}
.nav_dropdown {
background-color: #f3f3f5;
}
.nav {
background-color: var(--light-red);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
border-color: #fff;
flex: 0 auto;
}
.nav:hover {
border-color: #fff;
}
.nav_dropdown-icon {
margin-top: 5px;
inset: 0%;
}
.icon {
background-color: var(--light-red);
font-size: 30px;
}
.nav_link {
margin: 0;
padding: 0;
display: inline-block;
}
.nav_link.w--current {
padding-top: 0;
}
.nav_link.w--open {
margin-top: 0;
}
.nav_dropdown-list {
background-color: #eef2ff;
margin-top: -10px;
font-family: "Styrene-a 400";
}
.nav_dropdown-list.w--open {
margin-top: -10px;
inset: 0%;
}
.nav_menu {
background-color: var(--light-red);
flex: 0 auto;
align-self: flex-end;
margin-top: 0;
margin-left: 0;
display: block;
position: static;
inset: 0%;
}
.nav_dropdown-link {
background-color: #eef2ff;
margin-top: -10px;
padding: 0 0 10px 20px;
font-weight: 400;
top: 30px;
}
.nav_link-label {
display: inline-block;
}
.nav_brand-image {
width: 100px;
height: 100px;
}
.h1 {
z-index: 0;
color: #00000054;
margin-top: 0;
margin-bottom: 0;
top: auto;
left: auto;
}
.rtb {
padding-left: 30px;
}
.rtb h1 {
font-size: 35px;
}
.rtb h2 {
font-size: 30px;
}
.rtb h3 {
font-size: 25px;
}
.link.w--current {
margin-top: 0;
margin-left: 0;
line-height: 1;
display: inline-block;
overflow: visible;
}
.div-block {
align-self: flex-start;
margin-top: 0;
margin-left: 0;
padding-right: 0;
}
.div-block-2 {
order: -1;
align-self: flex-start;
}
.navbar1_menu-button.w--open {
background-color: #0000;
}
.navbar_menu {
-webkit-text-fill-color: inherit;
background-clip: border-box;
border-bottom-style: solid;
border-bottom-width: 1px;
padding: 1rem 5% 2rem;
position: absolute;
overflow: auto;
}
.navbar_menu.is-page-height-tablet {
width: 500px;
height: auto;
margin-top: 66px;
padding: 0;
transition: height .5s;
}
.nav__dropdown-link {
width: auto;
padding: 0 0 0 20px;
font-size: 15px;
line-height: 1.8;
}
.nav__dropdown-link:hover {
background-color: #faf9f6;
}
.nav_logo-link {
margin-top: 3px;
}
.navbar_link {
color: var(--blue);
width: auto;
margin-bottom: 5px;
padding: 0 15px 0 10px;
font-size: 15px;
line-height: 2;
}
.navbar_link:hover {
background-color: #faf9f6;
}
.icon-2 {
color: #52abd1;
-webkit-text-fill-color: inherit;
background-color: #0000;
background-clip: border-box;
margin-top: 0;
font-size: 24px;
}
.dropdown-chevron {
width: 15px;
inset: auto 0% auto auto;
}
.nav_menu-dropdown {
width: 100%;
margin-bottom: 5px;
font-size: 18px;
line-height: 2;
}
.nav_dropdown-toggle {
color: #f0eeee;
align-items: center;
padding: 0 15px 0 10px;
display: flex;
}
.nav_dropdown-toggle:hover {
color: #faf9f6;
background-color: #faf9f6;
}
.nav_dropdown-toggle.w--open {
color: #f5ffd6;
}
.navbar1_dropdown-list {
position: static;
overflow: hidden;
}
.navbar1_dropdown-list:hover {
color: #f0eeee;
}
.navbar1_dropdown-list.w--open {
border-style: none;
width: auto;
padding: 0;
overflow: visible;
}
.link_nav {
color: var(--blue);
padding-top: 0;
padding-bottom: 0;
padding-left: 0;
font-size: 15px;
}
.link_nav:hover {
background-color: #faf9f6;
}
.col-left {
width: 30%;
margin-top: 40px;
}
}
@media screen and (max-width: 767px) {
h1 {
font-size: 34px;
}
p {
font-size: 16px;
}
.article {
width: 95vw;
margin-left: 0;
}
.head_h2 {
font-size: 28px;
}
.nav_menu-button {
padding-top: 22px;
}
.nav_content-wrapper {
margin-left: 14px;
}
.nav {
background-color: var(--light-red);
}
.icon {
color: var(--blue);
}
.nav_dropdown-list.w--open {
background-color: #eef2ff;
}
.nav_brand-image {
width: 100px;
height: 100px;
}
.h1 {
top: -54px;
left: 14px;
}
.rtb {
margin-top: 20px;
padding-left: 20px;
}
.rtb h1 {
margin-top: 0;
font-size: 30px;
}
.rtb h2 {
font-size: 25px;
}
.rtb h3 {
font-size: 20px;
}
.rtb p {
font-size: 16px;
}
.rtb blockquote {
background-color: var(--white);
margin-left: 30px;
margin-right: 10px;
font-family: "Styrene-a 400-ital";
font-weight: 700;
}
.rtb li {
font-size: 16px;
}
.link.w--current {
margin-top: 17px;
margin-left: 0;
font-size: 24px;
}
.navbar_menu.is-page-height-tablet {
padding-bottom: 6rem;
}
.nav_component {
color: var(--blue);
height: auto;
min-height: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}
.nav_logo-link {
padding-left: 0;
}
.navbar_link {
padding-left: 40px;
padding-right: 0;
font-size: 18px;
}
.logo {
margin-top: 10px;
margin-bottom: 10px;
font-size: 30px;
}
.footer-text {
font-size: 14px;
}
.col-left {
width: 40%;
margin-left: auto;
margin-right: auto;
}
.link-block.w--current {
margin-top: 0;
}
}
@media screen and (max-width: 479px) {
h1 {
font-size: 32px;
}
p {
font-size: 15px;
}
.footer {
font-family: Libre Franklin, sans-serif;
font-weight: 300;
}
.article {
width: 90%;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}
.figcaption {
font-size: 14px;
}
.address {
grid-column-gap: 20px;
grid-row-gap: 20px;
}
.head_h2 {
margin-bottom: 10px;
font-size: 22px;
position: static;
top: 181px;
left: 6px;
}
.nav_menu-button {
padding: 14px 0 16px;
font-size: 24px;
}
.icon {
margin-top: 1px;
font-size: 28px;
}
.nav_dropdown-list {
margin-top: -16px;
}
.h1 {
margin-bottom: 0;
position: relative;
top: -62px;
left: 9px;
}
.rtb {
margin-top: 0;
padding-left: 10px;
}
.rtb h1 {
margin-top: 20px;
font-size: 25px;
line-height: 1;
}
.rtb h2, .rtb h3 {
font-size: 20px;
}
.rtb blockquote {
font-weight: 500;
}
.rtb h4 {
font-size: 21px;
}
.link.w--current {
margin-top: 12px;
font-size: 21px;
}
.nav_component {
height: auto;
}
.nav_logo {
width: 200px;
}
.navbar_link {
color: var(--dark-gray);
}
.icon-2 {
width: auto;
}
.logo {
padding-top: 5px;
padding-bottom: 2px;
font-size: 24px;
line-height: 1;
}
.text-span {
font-size: 18px;
}
.footer-text {
font-size: 13px;
font-weight: 300;
}
.wrapper-flex-2-col {
flex-flow: column;
display: flex;
}
.col-right {
padding-right: 0;
}
.col-left {
flex: 0 auto;
width: 80%;
margin-top: 0;
margin-left: auto;
margin-right: auto;
}
.church-people {
box-sizing: border-box;
text-align: left;
object-fit: cover;
}
}
/* ============================================================
SECTION 4: Mega menu + Shop landing page (formerly gcf-mega-menu.css)
============================================================ */
/* ============================================================
gcf-mega-menu.css
Additive stylesheet for the Shop mega menu + Shop landing page.
Loads AFTER normalize.css / webflow.css / gcfstore.webflow.css
and reuses the color variables already defined in that file's
:root (--red, --dark-gray, --light-gray, --real-light-gray, etc.)
rather than introducing a second palette. Fonts are the same
Bebas Neue (headings) / Libre Franklin (body) already loaded by
the page's WebFont.load call — no new font weights are added,
since Bebas Neue only ships one weight (see note below).
============================================================ */
/* ---- Shop nav item (sits inside .navbar_menu among the other links) ---- */
/* gcfstore.webflow.css sets .nav_component to position:static; the mega
panel needs a positioned ancestor to anchor to (top:100%; left:0; right:0
spans this element's full width), so we override just that one property
here rather than touching the original stylesheet. */
.nav_component {
position: relative;
z-index: 50;
}
.nav-item.shop {
position: static;
display: inline-flex;
align-items: center;
}
.nav-item.shop > a.navbar_link {
display: flex;
align-items: center;
gap: 5px;
/* Bebas Neue has one weight only — never set font-weight here, it
just triggers the browser's synthetic/faux bold and looks muddy.
Emphasis instead comes from color (brand red) + the caret.
No !important needed: ".nav-item.shop > a.navbar_link" (3 classes)
already outweighs the original ".navbar_link" (1 class). */
color: var(--red);
}
.nav-item.shop .caret {
font-size: 11px;
transition: transform 0.15s ease;
}
.nav-item.shop:hover .caret,
.nav-item.shop:focus-within .caret,
.nav-item.shop.active .caret {
transform: rotate(180deg);
}
/* ---- Mega panel ---- */
.mega-panel {
position: absolute;
top: 100%;
left: 0;
right: 0;
/* --light-gray (a step darker/more saturated than --real-light-gray),
chosen deliberately: .main (the page body below) already uses
--real-light-gray as its own background, so using that same token
here made the panel and the page behind it visually indistinguishable
once open — exactly the "can't tell if I'm still in the menu" problem.
This needs to read as clearly its own surface, distinct from both the
white .cat-col cards inside it and the gray page body behind it. */
background: var(--light-gray);
border-top: 1px solid var(--light-gray);
border-bottom: 3px solid var(--dark-gray);
box-shadow: 0 24px 40px -18px rgba(0,0,0,0.35);
max-height: 78vh;
overflow-y: auto;
z-index: 999;
/* Open/close is now driven by a JS-managed .open class rather than pure
CSS :hover/:has() — see the hover-intent script near the closing
tag. Pure CSS could only react to "is Shop itself hovered right
now," which is exactly why crossing through the rest of the header on
the way down into the panel would close it. JS lets "what opens this"
(only the Shop link) and "what keeps it open" (anywhere in the whole
header, or the panel itself) be two different, correctly-separated
conditions, with an explicit timed grace period on close instead of
relying on a CSS transition-delay trick. */
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}
.mega-panel.open {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition: opacity 0.2s ease-out, transform 0.2s ease-out, visibility 0s linear 0s;
}
/* "Scroll for more" hint — sticks to the bottom of the panel's own scroll
area (not the viewport), so it stays visible while scrolling through the
grid. Only shown when JS detects the content actually overflows (see the
script near the closing tag) — on a tall enough screen where
nothing's cut off, this stays hidden rather than showing a pointless
"scroll" hint for content that's already fully visible. */
.mega-scroll-hint {
display: none;
position: sticky;
bottom: 0;
text-align: center;
padding: 8px 0;
font-family: 'Bebas Neue', sans-serif;
font-size: 13px;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--dark-gray);
background: linear-gradient(to bottom, rgba(241,241,241,0), var(--real-light-gray) 40%);
pointer-events: none;
}
.mega-scroll-hint.visible { display: block; }
.mega-grid {
display: grid;
/* Explicit 5 columns rather than auto-fill/minmax — at this container's
max-width, auto-fill was computing 6 columns, which wasn't wide enough
for longer names like "Candy & Chocolate" without wrapping. Fixed count
plus breakpoints below gives predictable column widths instead of
leaving it to whatever happens to fit. */
grid-template-columns: repeat(5, 1fr);
gap: 14px;
padding: 28px 5%;
max-width: 1440px;
margin: 0 auto;
}
@media (max-width: 1150px) {
.mega-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
.mega-grid { grid-template-columns: repeat(2, 1fr); }
}
.cat-col {
border: 1px solid var(--light-gray);
background: var(--white);
padding: 18px 18px 16px;
display: flex;
flex-direction: column;
}
.cat-header {
font-family: 'Bebas Neue', sans-serif;
font-size: 18px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--dark-gray);
margin: 0 0 8px;
padding-bottom: 6px;
border-bottom: 1px solid var(--light-gray);
}
.cat-col ul {
list-style: none;
margin: 0;
padding: 0;
flex: 1;
}
.cat-col li { margin-bottom: 9px; }
/* Subcategory links — nested inside