/*!规范化.css v8.0.1 |麻省理工学院许可证| github.com/necolas/normalize.css */ /* 文档 =================================================== ======================== */ /** * 1.修正所有浏览器中的行高。 * 2. 防止iOS中方向改变后调整字体大小。 */ html{ 行高:1.15; /* 1 */ -webkit-文本大小调整:100%; /* 2 */ } /* 节 =================================================== ======================== */ /** * 删除所有浏览器中的边距。 */ 身体 { 保证金:0; } /** * 在 IE 中一致地渲染“main”元素。 */ 主要的 { 显示:块; } /** * 更正“section”内“h1”元素的字体大小和边距 * Chrome、Firefox 和 Safari 中的“文章”上下文。 */ h1 { 字体大小:2em; 保证金:0.67em 0; } /* 对内容进行分组 =================================================== ======================== */ /** * 1. 在 Firefox 中添加正确的框大小。 * 2.显示Edge和IE中的溢出。 */ 小时{ box-sizing:内容框; /* 1 */ 高度:0; /* 1 */ 溢出:可见; /* 2 */ } /** * 1.修正所有浏览器中字体大小的继承和缩放。 * 2. 修正所有浏览器中奇怪的“em”字体大小。 */ 预{ 字体系列:等宽字体、等宽字体; /* 1 */ 字体大小:1em; /* 2 */ } /* 文本级语义 =================================================== ======================== */ /** * 删除 IE 10 中活动链接的灰色背景。 */ A { 背景颜色:透明; } /** * 1.在Chrome 57中去掉底部边框- * 2.在Chrome、Edge、IE、Opera和Safari中添加正确的文本装饰。 */ 缩写[标题] { 底部边框:无; /* 1 */ 文本装饰:下划线; /* 2 */ 文字装饰:下划线、点线; /* 2 */ } /** * 在 Chrome、Edge 和 Safari 中添加正确的字体粗细。 */ 乙、 强的 { 字体粗细:加粗; } /** * 1.修正所有浏览器中字体大小的继承和缩放。 * 2. 修正所有浏览器中奇怪的“em”字体大小。 */ 代码, KBD, 采样{ 字体系列:等宽字体、等宽字体; /* 1 */ 字体大小:1em; /* 2 */ } /** * 在所有浏览器中添加正确的字体大小。 */ 小的 { 字体大小:80%; } /** * 防止`sub`和`sup`元素影响行高 * 所有浏览器。 */ 子, sup{ 字体大小:75%; 行高:0; 位置:相对; 垂直对齐:基线; } 子{ 底部:-0.25em; } sup{ 顶部:-0.5em; } /* 嵌入内容 =================================================== ======================== */ /** * 删除 IE 10 中链接内图像的边框。 */ 图像{ 边框样式:无; } /* 形式 =================================================== ======================== */ /** * 1.更改所有浏览器中的字体样式。 * 2. 删除 Firefox 和 Safari 中的边距。 */ 按钮, 输入, 选择组, 选择, 文本区域{ 字体系列:继承; /* 1 */ 字体大小:100%; /* 1 */ 行高:1.15; /* 1 */ 保证金:0; /* 2 */ } /** * 在IE中显示溢出。 * 1. 在Edge中显示溢出。 */ 按钮, 输入{ /* 1 */ 溢出:可见; } /** * 删除 Edge、Firefox 和 IE 中文本转换的继承。 * 1.去掉Firefox中文本转换的继承。 */ 按钮, 选择{ /* 1 */ 文本转换:无; } /** * 修正了 iOS 和 Safari 中无法设置可点击类型样式的问题。 */ 按钮, [类型=按钮], [类型=重置], [类型=提交] { -webkit-外观:按钮; } /** * 删除 Firefox 中的内边框和内边距。 */ 按钮::-moz-焦点-内部, [类型=按钮]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [类型=提交]::-moz-focus-inner { 边框样式:无; 填充:0; } /** * 恢复之前规则未设置的焦点样式。 */ 按钮:-moz-对焦环, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [类型=提交]:-moz-focusring { 轮廓:1px 点状 ButtonText; } /** * 修正 Firefox 中的填充。 */ 字段集{ 填充:0.35em 0.75em 0.625em; } /** * 1. 修正Edge和IE中的文字换行问题。 * 2. 修正 IE 中 `fieldset` 元素的颜色继承。 * 3. 删除填充,这样开发人员在清零时就不会被抓到 * 所有浏览器中的“fieldset”元素。 */ 传奇 { 框大小:边框框; /* 1 */ 颜色:继承; /* 2 */ 显示:表; /* 1 */ 最大宽度:100%; /* 1 */ 填充:0; /* 3 */ 空白:正常; /* 1 */ } /** * 在 Chrome、Firefox 和 Opera 中添加正确的垂直对齐方式。 */ 进步 { 垂直对齐:基线; } /** * 删除 IE 10+ 中默认的垂直滚动条。 */ 文本区域{ 溢出:自动; } /** * 1. 在 IE 10 中添加正确的框大小。 * 2. 删除 IE 10 中的填充。 */ [类型=复选框], [类型=无线电] { 框大小:边框框; /* 1 */ 填充:0; /* 2 */ } /** * 修正Chrome中递增和递减按钮的光标样式。 */ [类型=数字]::-webkit-inner-spin-button, [类型=数字]::-webkit-outer-spin-button { 高度:自动; } /** * 1.修正Chrome和Safari中的奇怪外观。 * 2.修正Safari中的轮廓样式。 */ [类型=搜索] { -webkit-外观:文本字段; /* 1 */ 轮廓偏移:-2px; /* 2 */ } /** * 删除 macOS 上 Chrome 和 Safari 中的内部填充。 */ [type=search]::-webkit-search-decoration { -webkit-外观:无; } /** * 1. 修正了 iOS 和 Safari 中无法设置可点击类型样式的问题。 * 2. 在 Safari 中将字体属性更改为“继承”。 */ ::-webkit-文件上传按钮 { -webkit-外观:按钮; /* 1 */ 字体:继承; /* 2 */ } /* 交互的 =================================================== ======================== */ /* * 添加在 Edge、IE 10+ 和 Firefox 中的正确显示。 */ 细节 { 显示:块; } /* * 添加在所有浏览器中的正确显示。 */ 概括 { 显示:列表项; } /* 杂项 =================================================== ======================== */ /** * 添加在IE 10+中的正确​​显示。 */ 模板 { 显示:无; } /** * 添加在IE 10中正确显示。 */ [隐藏] { 显示:无; } .包装器{ 最大宽度:580px; 保证金:0 自动; } @media(最小宽度:567px){ .包装器{ 最大宽度:767px; } .wrapper::之后{ 内容: ””; 明确:两者; 显示:表; } } @media(最小宽度:767px){ .包装器{ 最大宽度:992px; } } @media(最小宽度:992px){ .包装器{ 最大宽度:1200px; } } .左栏{ 填充:0 1em; 框大小:边框框; } @media(最小宽度:767px){ .左栏{ 宽度:60%; 右边距:5%; 向左飘浮; } .left-column::after { 内容: ””; 明确:两者; 显示:表; } } @media(最小宽度:992px){ .左栏{ 宽度:65%; } } .右栏{ 填充:0 1em; 框大小:边框框; } @media(最小宽度:767px){ .右栏{ 宽度:35%; 浮动:右; } .right-column::after { 内容: ””; 明确:两者; 显示:表; } } @media(最小宽度:992px){ .右栏{ 宽度:33%; } } .全栏{ 填充:0 1em; } .full-column.utility-pages { 保证金:0 自动; 最大宽度:600px; } /* 链接颜色混合 谁喜欢能够快速覆盖默认链接静态和悬停颜色?!你做! 使用在 selector (or whatever you are hovering) passing a $static and/or $hover color or neither (uses site defaults): @include link-color(color(swatch-one), color(swatch-two)); OR @include link-color; */ *[class*=fa-] { opacity: 0; transition: opacity ease-in 0.3s; display: inline-block; width: 0.875em; } .wf-active *[class*=fa-] { opacity: 1; } .wf-inactive *[class*=fa-] { opacity: 1; } .wf-active *[class*=fa-]:not(.fa-fw, .fa-li) { width: auto; } *[class*=font-effects] { opacity: 0; transition: opacity ease 0.3s; } *[class*=font-effects] .wf-gfx-loaded { opacity: 1; } body { color: rgb(0, 0, 0); font-size: 18px; font-family: "Barlow", sans-serif; font-weight: 400; line-height: 1.5; } .link, a { text-decoration: none; will-change: color, text-shadow; transition: all 0.3s ease; } .link, a, .link:visited, .link:active, .link:visited:active { color: #373070; } .link:hover, a:hover, .link:visited:hover { color: #3c6f5e; } .italic, i, em { font-style: italic; } .bold, b, strong { font-weight: 700; } .h1, h1 { font-family: "Noto Serif", "Times New Roman", serif; font-weight: 400; opacity: 0; transition: opacity ease-in 0.3s; font-size: 2em; line-height: 1.15; } .wf-active .h1, .wf-active h1 { opacity: 1; } .wf-inactive .h1, .wf-inactive h1 { opacity: 1; } @media (min-width: 767px) { .h1, h1 { font-size: 2.5em; line-height: 1.125; } } @media (min-width: 992px) { .h1, h1 { font-size: 3em; line-height: 1.05; } } .h2, h2 { font-family: "Barlow", sans-serif; font-weight: 500; opacity: 0; transition: opacity ease-in 0.3s; font-size: 1.5em; line-height: 1.15384615; } .wf-active .h2, .wf-active h2 { opacity: 1; } .wf-inactive .h2, .wf-inactive h2 { opacity: 1; } @media (min-width: 767px) { .h2, h2 { font-size: 1.85em; line-height: 1.15; } } @media (min-width: 992px) { .h2, h2 { font-size: 2em; line-height: 1.25; } } .h3, h3 { font-family: "Barlow", sans-serif; font-weight: 500; opacity: 0; transition: opacity ease-in 0.3s; font-size: 1.375em; line-height: 1.13636364; } .wf-active .h3, .wf-active h3 { opacity: 1; } .wf-inactive .h3, .wf-inactive h3 { opacity: 1; } @media (min-width: 767px) { .h3, h3 { font-size: 1.5em; line-height: 1.15; } } @media (min-width: 992px) { .h3, h3 { font-size: 1.65em; line-height: 1.15; } } .h4, h4 { font-family: "Barlow", sans-serif; font-weight: 500; opacity: 0; transition: opacity ease-in 0.3s; font-size: 1.125em; line-height: 1.11111111; } .wf-active .h4, .wf-active h4 { opacity: 1; } .wf-inactive .h4, .wf-inactive h4 { opacity: 1; } @media (min-width: 767px) { .h4, h4 { font-size: 1.25em; line-height: 1.15; } } @media (min-width: 992px) { .h4, h4 { font-size: 1.5em; line-height: 1.15; } } .h5, h5 { font-family: "Barlow", sans-serif; font-weight: 500; opacity: 0; transition: opacity ease-in 0.3s; font-size: 1.25em; line-height: 1.11111111; } .wf-active .h5, .wf-active h5 { opacity: 1; } .wf-inactive .h5, .wf-inactive h5 { opacity: 1; } .h6, h6 { font-family: "Barlow", sans-serif; font-weight: 500; opacity: 0; transition: opacity ease-in 0.3s; font-size: 1em; line-height: 1.11111111; } .wf-active .h6, .wf-active h6 { opacity: 1; } .wf-inactive .h6, .wf-inactive h6 { opacity: 1; } .h1, h1 { color: #15132b; margin-top: 0.5em; margin-bottom: 0.75em; } .h2, h2, .h3, h3, .h4, h4, .h5, h5, .h6, h6 { color: #15132b; margin-top: 0.75em; margin-bottom: 0; } h2:first-of-type { margin-top: 0; } .block-margins, ul, ol, pre, blockquote { margin: 1rem 0; } p { margin: 0 0 1rem 0; } blockquote { margin-left: 1em; margin-right: 1em; } ul, ol { margin-top: 0; } p.intro-text { font-size: 1.5em; } p.asset-description { padding-left: 1em; } p a { text-decoration: underline; text-decoration-style: dotted; } p a:hover { color: #373070; background-color: #c2bfe3; } .headroom { margin-top: 2em !important; } .less-headroom { margin-top: 1em; } .more-less-headroom { margin-top: 0.5em; } .no-headroom { margin-top: 0 !important; } .legroom { margin-bottom: 2em; } .less-legroom { margin-bottom: 1em; } .more-less-legroom { margin-bottom: 0.5em; } .no-legroom { margin-bottom: 0; } .no-margin { margin: 0 !important; } .no-border { border: none !important; } .center, .text-center { text-align: center !important; } .text-left { text-align: left !important; } .text-right { text-align: right !important; } ul.no-bullets { list-style-type: none; padding: 0; } .hide-text { font: 0/0 serif; text-shadow: none; color: transparent; } .hyphenate { overflow-wrap: break-word; word-wrap: break-word; -webkit-hyphens: auto; -ms-hyphens: auto; -moz-hyphens: auto; hyphens: auto; } .list-reset { margin: 0; padding: 0; list-style-type: none; } .list-reset li { margin: 0; } .list-inline li { display: inline-block; float: left; } .list-inline li:not(:first-child) { margin-left: 0.5em; } .list-inline li:not(:last-child) { margin-right: 0.5em; } @media (min-width: 767px) { .mobile-only { display: none; } } .no-mobile { display: none; } @media (min-width: 767px) { .no-mobile { display: block; } .no-mobile ul li { display: list-item; } } .desktop-only { display: none; } @media (min-width: 992px) { .desktop-only { display: inline-block; } } .accent-block { padding: 0.5em 1em; margin-top: 8px; border: 2px solid rgb(200, 60, 60); background-color: rgb(255, 255, 160); font-family: "Barlow", sans-serif; font-weight: 600; opacity: 0; transition: opacity ease-in 0.3s; } .wf-active .accent-block { opacity: 1; } .wf-inactive .accent-block { opacity: 1; } @-webkit-keyframes animate-shadow { 0% { box-shadow: 0px 0px 50px 25px #3c6f5e; } 100% { box-shadow: 0px 0px 0px 0px #3c6f5e; } } @keyframes animate-shadow { 0% { box-shadow: 0px 0px 50px 25px #3c6f5e; } 100% { box-shadow: 0px 0px 0px 0px #3c6f5e; } } form { font-family: "Barlow", sans-serif; font-size: 1em; font-weight: 400; overflow: auto; } form *, form *::before, form *::after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } form .group.radio.inline label { margin-right: 1.5em; } input[type=email], input[type=date], input[type=text], input[type=datetime], input[type=datetime-local], input[type=email], input[type=month], input[type=number], input[type=password], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week], textarea { -webkit-appearance: none; background: rgb(255, 255, 255); border: 1px solid rgb(128, 128, 128); font-size: 1em; min-height: 2em; padding: 0.5em 6px; width: 100%; color: rgb(0, 0, 0); } input[type=email]:focus, input[type=email]:target, input[type=date]:focus, input[type=date]:target, input[type=text]:focus, input[type=text]:target, input[type=datetime]:focus, input[type=datetime]:target, input[type=datetime-local]:focus, input[type=datetime-local]:target, input[type=email]:focus, input[type=email]:target, input[type=month]:focus, input[type=month]:target, input[type=number]:focus, input[type=number]:target, input[type=password]:focus, input[type=password]:target, input[type=tel]:focus, input[type=tel]:target, input[type=text]:focus, input[type=text]:target, input[type=time]:focus, input[type=time]:target, input[type=url]:focus, input[type=url]:target, input[type=week]:focus, input[type=week]:target, textarea:focus, textarea:target { color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); border: 1px solid rgb(128, 128, 128); } .error input[type=email]:focus, div.formError[style*="opacity: 0."] + input[type=email]:focus, div.formError[style*="opacity: 0."] + input[type=email], input[type=email]:focus.error, .error input[type=date]:focus, div.formError[style*="opacity: 0."] + input[type=date]:focus, div.formError[style*="opacity: 0."] + input[type=date], input[type=date]:focus.error, .error input[type=text]:focus, div.formError[style*="opacity: 0."] + input[type=text]:focus, div.formError[style*="opacity: 0."] + input[type=text], input[type=text]:focus.error, .error input[type=datetime]:focus, div.formError[style*="opacity: 0."] + input[type=datetime]:focus, div.formError[style*="opacity: 0."] + input[type=datetime], input[type=datetime]:focus.error, .error input[type=datetime-local]:focus, div.formError[style*="opacity: 0."] + input[type=datetime-local]:focus, div.formError[style*="opacity: 0."] + input[type=datetime-local], input[type=datetime-local]:focus.error, .error input[type=email]:focus, div.formError[style*="opacity: 0."] + input[type=email]:focus, div.formError[style*="opacity: 0."] + input[type=email], input[type=email]:focus.error, .error input[type=month]:focus, div.formError[style*="opacity: 0."] + input[type=month]:focus, div.formError[style*="opacity: 0."] + input[type=month], input[type=month]:focus.error, .error input[type=number]:focus, div.formError[style*="opacity: 0."] + input[type=number]:focus, div.formError[style*="opacity: 0."] + input[type=number], input[type=number]:focus.error, .error input[type=password]:focus, div.formError[style*="opacity: 0."] + input[type=password]:focus, div.formError[style*="opacity: 0."] + input[type=password], input[type=password]:focus.error, .error input[type=tel]:focus, div.formError[style*="opacity: 0."] + input[type=tel]:focus, div.formError[style*="opacity: 0."] + input[type=tel], input[type=tel]:focus.error, .error input[type=text]:focus, div.formError[style*="opacity: 0."] + input[type=text]:focus, div.formError[style*="opacity: 0."] + input[type=text], input[type=text]:focus.error, .error input[type=time]:focus, div.formError[style*="opacity: 0."] + input[type=time]:focus, div.formError[style*="opacity: 0."] + input[type=time], input[type=time]:focus.error, .error input[type=url]:focus, div.formError[style*="opacity: 0."] + input[type=url]:focus, div.formError[style*="opacity: 0."] + input[type=url], input[type=url]:focus.error, .error input[type=week]:focus, div.formError[style*="opacity: 0."] + input[type=week]:focus, div.formError[style*="opacity: 0."] + input[type=week], input[type=week]:focus.error, .error textarea:focus, div.formError[style*="opacity: 0."] + textarea:focus, div.formError[style*="opacity: 0."] + textarea, textarea:focus.error { color: #1a1d32; background-color: #b1b5d6; } input[type=email]:focus, input[type=date]:focus, input[type=text]:focus, input[type=datetime]:focus, input[type=datetime-local]:focus, input[type=email]:focus, input[type=month]:focus, input[type=number]:focus, input[type=password]:focus, input[type=tel]:focus, input[type=text]:focus, input[type=time]:focus, input[type=url]:focus, input[type=week]:focus, textarea:focus { outline-color: #2e5548; outline-width: 2px; outline-style: solid; outline-offset: 1px; } .error input[type=email]:focus, div.formError[style^="opacity: 0."] + input[type=email]:focus, input[type=email]:focus.error, .error input[type=date]:focus, div.formError[style^="opacity: 0."] + input[type=date]:focus, input[type=date]:focus.error, .error input[type=text]:focus, div.formError[style^="opacity: 0."] + input[type=text]:focus, input[type=text]:focus.error, .error input[type=datetime]:focus, div.formError[style^="opacity: 0."] + input[type=datetime]:focus, input[type=datetime]:focus.error, .error input[type=datetime-local]:focus, div.formError[style^="opacity: 0."] + input[type=datetime-local]:focus, input[type=datetime-local]:focus.error, .error input[type=email]:focus, div.formError[style^="opacity: 0."] + input[type=email]:focus, input[type=email]:focus.error, .error input[type=month]:focus, div.formError[style^="opacity: 0."] + input[type=month]:focus, input[type=month]:focus.error, .error input[type=number]:focus, div.formError[style^="opacity: 0."] + input[type=number]:focus, input[type=number]:focus.error, .error input[type=password]:focus, div.formError[style^="opacity: 0."] + input[type=password]:focus, input[type=password]:focus.error, .error input[type=tel]:focus, div.formError[style^="opacity: 0."] + input[type=tel]:focus, input[type=tel]:focus.error, .error input[type=text]:focus, div.formError[style^="opacity: 0."] + input[type=text]:focus, input[type=text]:focus.error, .error input[type=time]:focus, div.formError[style^="opacity: 0."] + input[type=time]:focus, input[type=time]:focus.error, .error input[type=url]:focus, div.formError[style^="opacity: 0."] + input[type=url]:focus, input[type=url]:focus.error, .error input[type=week]:focus, div.formError[style^="opacity: 0."] + input[type=week]:focus, input[type=week]:focus.error, .error textarea:focus, div.formError[style^="opacity: 0."] + textarea:focus, textarea:focus.error { outline-color: #262a48; outline-width: 2px; outline-style: solid; outline-offset: 1px; } input[type=email][size="1"], input[type=date][size="1"], input[type=text][size="1"], input[type=datetime][size="1"], input[type=datetime-local][size="1"], input[type=email][size="1"], input[type=month][size="1"], input[type=number][size="1"], input[type=password][size="1"], input[type=tel][size="1"], input[type=text][size="1"], input[type=time][size="1"], input[type=url][size="1"], input[type=week][size="1"], textarea[size="1"] { width: 1em; } input[type=email][size="2"], input[type=date][size="2"], input[type=text][size="2"], input[type=datetime][size="2"], input[type=datetime-local][size="2"], input[type=email][size="2"], input[type=month][size="2"], input[type=number][size="2"], input[type=password][size="2"], input[type=tel][size="2"], input[type=text][size="2"], input[type=time][size="2"], input[type=url][size="2"], input[type=week][size="2"], textarea[size="2"] { width: 2em; } input[type=email][size="3"], input[type=date][size="3"], input[type=text][size="3"], input[type=datetime][size="3"], input[type=datetime-local][size="3"], input[type=email][size="3"], input[type=month][size="3"], input[type=number][size="3"], input[type=password][size="3"], input[type=tel][size="3"], input[type=text][size="3"], input[type=time][size="3"], input[type=url][size="3"], input[type=week][size="3"], textarea[size="3"] { width: 3em; } input[type=email][size="4"], input[type=date][size="4"], input[type=text][size="4"], input[type=datetime][size="4"], input[type=datetime-local][size="4"], input[type=email][size="4"], input[type=month][size="4"], input[type=number][size="4"], input[type=password][size="4"], input[type=tel][size="4"], input[type=text][size="4"], input[type=time][size="4"], input[type=url][size="4"], input[type=week][size="4"], textarea[size="4"] { width: 4em; } input[type=email][size="5"], input[type=date][size="5"], input[type=text][size="5"], input[type=datetime][size="5"], input[type=datetime-local][size="5"], input[type=email][size="5"], input[type=month][size="5"], input[type=number][size="5"], input[type=password][size="5"], input[type=tel][size="5"], input[type=text][size="5"], input[type=time][size="5"], input[type=url][size="5"], input[type=week][size="5"], textarea[size="5"] { width: 5em; } input[type=email][type=submit], input[type=email][type=reset], input[type=date][type=submit], input[type=date][type=reset], input[type=text][type=submit], input[type=text][type=reset], input[type=datetime][type=submit], input[type=datetime][type=reset], input[type=datetime-local][type=submit], input[type=datetime-local][type=reset], input[type=email][type=submit], input[type=email][type=reset], input[type=month][type=submit], input[type=month][type=reset], input[type=number][type=submit], input[type=number][type=reset], input[type=password][type=submit], input[type=password][type=reset], input[type=tel][type=submit], input[type=tel][type=reset], input[type=text][type=submit], input[type=text][type=reset], input[type=time][type=submit], input[type=time][type=reset], input[type=url][type=submit], input[type=url][type=reset], input[type=week][type=submit], input[type=week][type=reset], textarea[type=submit], textarea[type=reset] { background-color: #373070; background-image: none; color: rgb(255, 255, 255); } input[type=email][type=submit]:hover, input[type=email][type=reset]:hover, input[type=date][type=submit]:hover, input[type=date][type=reset]:hover, input[type=text][type=submit]:hover, input[type=text][type=reset]:hover, input[type=datetime][type=submit]:hover, input[type=datetime][type=reset]:hover, input[type=datetime-local][type=submit]:hover, input[type=datetime-local][type=reset]:hover, input[type=email][type=submit]:hover, input[type=email][type=reset]:hover, input[type=month][type=submit]:hover, input[type=month][type=reset]:hover, input[type=number][type=submit]:hover, input[type=number][type=reset]:hover, input[type=password][type=submit]:hover, input[type=password][type=reset]:hover, input[type=tel][type=submit]:hover, input[type=tel][type=reset]:hover, input[type=text][type=submit]:hover, input[type=text][type=reset]:hover, input[type=time][type=submit]:hover, input[type=time][type=reset]:hover, input[type=url][type=submit]:hover, input[type=url][type=reset]:hover, input[type=week][type=submit]:hover, input[type=week][type=reset]:hover, textarea[type=submit]:hover, textarea[type=reset]:hover { background-color: #3c6f5e; background-image: none; } input[type=checkbox] { width: 1.25em; height: 1.25em; float: left; margin-right: 0.5em; line-height: 1.25em; } textarea { resize: vertical; } label { font-size: 0.85em; } /* Group control */ .group { margin-bottom: 8px; } .group.sized { float: left; width: 100%; } @media (min-width: 767px) { .group.sized.half { width: 50%; } *[class*=sized] ~ .group.sized.half { width: 48%; margin-left: 2%; } *[class*=sized] ~ .group.sized.half.new-row { width: 50%; margin-left: 0; clear: both; } .group:not(*[class*=sized]) + .group.sized.half, .group.sized.half.new-row { width: 50%; margin-left: 0; clear: both; } } @media (min-width: 767px) { .group.sized.third { width: 33%; } *[class*=sized] ~ .group.sized.third { width: 31%; margin-left: 2%; } *[class*=sized] ~ .group.sized.third.new-row { width: 33%; margin-left: 0; clear: both; } .group:not(*[class*=sized]) + .group.sized.third, .group.sized.third.new-row { width: 33%; margin-left: 0; clear: both; } } @media (min-width: 767px) { .group.sized.quarter { width: 25%; } *[class*=sized] ~ .group.sized.quarter { width: 23%; margin-left: 2%; } *[class*=sized] ~ .group.sized.quarter.new-row { width: 25%; margin-left: 0; clear: both; } .group:not(*[class*=sized]) + .group.sized.quarter, .group.sized.quarter.new-row { width: 25%; margin-left: 0; clear: both; } } @media (min-width: 767px) { .group.sized.three-quarter { width: 75%; } *[class*=sized] ~ .group.sized.three-quarter { width: 73%; margin-left: 2%; } *[class*=sized] ~ .group.sized.three-quarter.new-row { width: 75%; margin-left: 0; clear: both; } .group:not(*[class*=sized]) + .group.sized.three-quarter, .group.sized.three-quarter.new-row { width: 75%; margin-left: 0; clear: both; } } .group.sized + *:not(*[class*=sized]) { clear: both; } .group.readonly label::after { display: inline-block; height: 1em; bottom: -1em; content: "(Read Only)"; color: rgba(0, 0, 0, 0.95); font-size: 0.75em; line-height: 1em; } /* Fancy Stylized Inputs * inspired by http://tympanus.net/Development/TextInputEffects/ */ .group.pulse-on-focus { display: block; border: none; border-radius: 0; -webkit-appearance: none; } .group.pulse-on-focus input[type=email]:focus, .group.pulse-on-focus input[type=date]:focus, .group.pulse-on-focus input[type=text]:focus, .group.pulse-on-focus input[type=datetime]:focus, .group.pulse-on-focus input[type=datetime-local]:focus, .group.pulse-on-focus input[type=email]:focus, .group.pulse-on-focus input[type=month]:focus, .group.pulse-on-focus input[type=number]:focus, .group.pulse-on-focus input[type=password]:focus, .group.pulse-on-focus input[type=tel]:focus, .group.pulse-on-focus input[type=text]:focus, .group.pulse-on-focus input[type=time]:focus, .group.pulse-on-focus input[type=url]:focus, .group.pulse-on-focus input[type=week]:focus, .group.pulse-on-focus textarea:focus, .group.pulse-on-focus select:focus { outline-width: 1px; background-color: rgb(255, 255, 255); -webkit-animation: animate-shadow 0.3s normal; animation: animate-shadow 0.3s normal; } .form-control { font-size: 1.15em; line-height: 1.1; display: grid; grid-template-columns: 1em auto; gap: 0.5em; } .form-control *, .form-control *:before, .form-control *:after { box-sizing: border-box; } .form-control + .form-control { margin-top: 1em; } input[type=radio] { /* Add if not using autoprefixer */ -webkit-appearance: none; appearance: none; /* For iOS < 15 to remove gradient background */ background-color: #fff; /* Not removed via appearance */ margin: 0; font: inherit; color: rgb(58, 64, 111); width: 1.15em; height: 1.15em; border: 0.15em solid rgb(58, 64, 111); border-radius: 50%; transform: translateY(-0.075em); display: grid; place-content: center; } input[type=radio]::before { content: ""; width: 0.65em; height: 0.65em; border-radius: 50%; transform: scale(0); transition: 120ms transform ease-in-out; box-shadow: inset 1em 1em rgb(70, 131, 110); } input[type=radio]:checked::before { transform: scale(1); } input[type=checkbox] { /* Add if not using autoprefixer */ -webkit-appearance: none; appearance: none; /* For iOS < 15 to remove gradient background */ background-color: #fff; /* Not removed via appearance */ margin: 0; color: rgb(58, 64, 111); width: 1.15em; height: 1.15em; border: 0.15em solid rgb(58, 64, 111); transform: translateY(-0.075em); display: grid; place-content: center; } input[type=checkbox]::before { content: ""; content: ""; width: 0.65em; height: 0.65em; clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); transform: scale(0); transform-origin: bottom left; transition: 120ms transform ease-in-out; box-shadow: inset 1em 1em rgb(70, 131, 110); /* Windows High Contrast Mode */ background-color: CanvasText; } input[type=checkbox]:checked::before { transform: scale(1); } input[type=checkbox]:focus { outline: max(2px, 0.15em) solid rgb(58, 64, 111); outline-offset: max(2px, 0.15em); } .toggle-adj { font-size: 1.15em; line-height: 1.1; } .toggle-adj label { display: block; margin: 12px 0 0 0; } .toggle-adj input[type=radio] { /* Add if not using autoprefixer */ -webkit-appearance: none; appearance: none; /* For iOS < 15 to remove gradient background */ background-color: #fff; /* Not removed via appearance */ margin: 0; font: inherit; color: rgb(58, 64, 111); width: 1.15em; height: 1.15em; border: 0.15em solid rgb(58, 64, 111); border-radius: 50%; transform: translateY(-0.075em); display: grid; place-content: center; float: left; } .toggle-adj input[type=radio]::before { content: ""; width: 0.65em; height: 0.65em; border-radius: 50%; transform: scale(0); transition: 120ms transform ease-in-out; box-shadow: inset 1em 1em rgb(70, 131, 110); } .toggle-adj input[type=radio]:checked::before { transform: scale(1); } .highlight { background-color: #f6f6fb; overflow: auto; padding: 0.5em; border: 1px solid #c2bfe3; } .form-select { display: block; font-size: 16px; font-family: sans-serif; font-weight: 400; color: #444; line-height: 1.3; padding: 0.6em 1.4em 0.5em 0.8em; max-width: 100%; box-sizing: border-box; margin: 0; border: 1px solid #aaa; border-radius: 0; box-shadow: 0 1px 0 1px rgba(0, 0, 0, 0.04); -moz-appearance: none; -webkit-appearance: none; appearance: none; background-color: #fff; 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"); background-repeat: no-repeat; background-position: right 0.7em top 50%; background-size: 0.65em auto; } .form-select::-ms-expand { display: none; } .form-select:hover { border-color: #000; } .form-select:focus { border-color: #aaa; box-shadow: 0 0 1px 1px rgba(59, 153, 252, 0.7); box-shadow: 0 0 0 1px -moz-mac-focusring; color: #222; outline: none; } .form-select option { font-weight: normal; } .hidden-field { transition: all 0.3s ease; height: 0px; opacity: 0; overflow: hidden; } .hidden-field.reveal-field { height: auto; opacity: 1; transition: all 0.3s ease; } form.reg-form { border: 1px solid rgb(70, 131, 110); margin: 0.5em 0; text-align: right; } form.reg-form .form-item-desc, form.reg-form .form-item-quantity, form.reg-form .form-item-price, form.reg-form .sold-out-notice { display: inline-block; } form.reg-form .form-item-desc { width: calc(54% - 1px); } form.reg-form .form-item-quantity { width: calc(20% - 1px); } form.reg-form .form-item-price { width: calc(25% - 4px); } @media (min-width: 567px) { form.reg-form .form-item-desc, form.reg-form .sold-out-notice { width: calc(74% - 1px); } form.reg-form .form-item-quantity { width: calc(10% - 1px); } form.reg-form .form-item-price { width: calc(15% - 4px); } } @media (min-width: 767px) { form.reg-form .form-item-desc p { font-size: 1em; } } .form-header { background-color: rgb(70, 131, 110); color: color(w); } .form-header .form-item-desc, .form-header .form-item-quantity, .form-header .form-item-price { text-align: center; padding: 0.25em 0; } .form-header .form-item-desc, .form-header .form-item-quantity { border-right: 1px solid color(w); } .form-items { border-bottom: 1px solid #c2bfe3; } .form-items .form-item-desc, .form-items .form-item-quantity, .form-items .form-item-price, .form-items .sold-out-notice { padding: 0.25em 0; } .form-items .form-item-desc { text-align: left; } .form-items .form-item-desc h4 { margin: 0; padding: 0.15em 0.15em 0.15em 0.25em; } .form-items .form-item-desc p { font-size: 0.9em; margin: 0; padding: 0.15em 0.15em 0.15em 0.25em; } .form-items .sold-out-notice { text-align: left; } .form-items .sold-out-notice h4 { margin: 0; padding: 0.15em 0.15em 0.15em 0.25em; } .form-items .sold-out-notice p { text-align: left; font-size: 1.125em; margin: 0; padding: 0.15em 0.15em 0.15em 0.25em; } .form-items .form-item-quantity { text-align: center; } .form-items .form-item-price { text-align: center; } .form-items .form-item-price .price-container { text-align: right; padding-right: 4px; } .form-items:last-of-type { margin-bottom: 1em; } .form-items:nth-of-type(even) { background-color: color(swatch-two, super-light); } input.quantity-field { text-align: center; } input.ghost-button-reg { border: 2px solid rgb(58, 64, 111) !important; margin: 0 0 12px 0; } form.reg-form button.ghost-button-reg { margin: 0 12px 12px 0; } fieldset.billing, fieldset.additional_info { border: 1px solid rgb(70, 131, 110); } fieldset.billing .control-group, fieldset.additional_info .control-group { width: 47%; display: inline-block; } fieldset.billing .control-group:nth-of-type(even), fieldset.additional_info .control-group:nth-of-type(even) { margin-left: 3%; } fieldset.credit_card_info { border: 1px solid rgb(70, 131, 110); } fieldset.shipping { display: none; } .complaint-form { padding: 0.5em; background-color: rgb(255, 255, 255); border: 1px solid #e1efea; } .complaint-form fieldset { overflow: hidden; margin-top: 1em; border: none; background-color: rgb(255, 255, 255); } .complaint-form fieldset legend { font-family: "Barlow", sans-serif; font-weight: 600; opacity: 0; transition: opacity ease-in 0.3s; } .wf-active .complaint-form fieldset legend { opacity: 1; } .wf-inactive .complaint-form fieldset legend { opacity: 1; } .complaint-form fieldset.hidden-fieldset { display: none; } .complaint-form fieldset.hidden-fieldset.reveal-fieldset { display: block; } .complaint-form .form-instructions { font-size: 0.9em; font-style: italic; } span.req-asterisk { color: rgb(200, 60, 60); } /* Z-INDEX */ .formError { z-index: 990; } .formError .formErrorContent { z-index: 991; } .formError .formErrorArrow { z-index: 996; } .ui-dialog .formError { z-index: 5000; } .ui-dialog .formError .formErrorContent { z-index: 5001; } .ui-dialog .formError .formErrorArrow { z-index: 5006; } .inputContainer { position: relative; float: left; } .formError { position: absolute; top: 300px; left: 300px; display: block; cursor: pointer; text-align: left; } .formError.inline { position: relative; top: 0; left: 0; display: inline-block; } .ajaxSubmit { padding: 20px; background: #55ea55; border: 1px solid #999; display: none; } .formError .formErrorContent { width: 100%; background: #ee0101; position: relative; color: #fff; min-width: 120px; font-size: 11px; border: 2px solid #ddd; box-shadow: 0 0 6px #000; -moz-box-shadow: 0 0 6px #000; -webkit-box-shadow: 0 0 6px #000; -o-box-shadow: 0 0 6px #000; padding: 4px 10px 4px 10px; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; -o-border-radius: 6px; } .formError.inline .formErrorContent { box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; border: none; border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; -o-border-radius: 0; } .greenPopup .formErrorContent { background: #33be40; } .blackPopup .formErrorContent { background: #f8f8f8; color: #FFF; } .formError .formErrorArrow { width: 15px; margin: -2px 0 0 13px; position: relative; } body[dir=rtl] .formError .formErrorArrow, body.rtl .formError .formErrorArrow { margin: -2px 13px 0 0; } .formError .formErrorArrowBottom { box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; margin: 0px 0 0 12px; top: 2px; } .formError .formErrorArrow div { border-left: 2px solid #ddd; border-right: 2px solid #ddd; box-shadow: 0 2px 3px #444; -moz-box-shadow: 0 2px 3px #444; -webkit-box-shadow: 0 2px 3px #444; -o-box-shadow: 0 2px 3px #444; font-size: 0px; height: 1px; background: #ee0101; margin: 0 auto; line-height: 0; font-size: 0; display: block; } .formError .formErrorArrowBottom div { box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; } .greenPopup .formErrorArrow div { background: #33be40; } .blackPopup .formErrorArrow div { background: #393939; color: #FFF; } .formError .formErrorArrow .line10 { width: 15px; border: none; } .formError .formErrorArrow .line9 { width: 13px; border: none; } .formError .formErrorArrow .line8 { width: 11px; } .formError .formErrorArrow .line7 { width: 9px; } .formError .formErrorArrow .line6 { width: 7px; } .formError .formErrorArrow .line5 { width: 5px; } .formError .formErrorArrow .line4 { width: 3px; } .formError .formErrorArrow .line3 { width: 1px; border-left: 2px solid #ddd; border-right: 2px solid #ddd; border-bottom: 0 solid #ddd; } .formError .formErrorArrow .line2 { width: 3px; border: none; background: #ddd; } .formError .formErrorArrow .line1 { width: 1px; border: none; background: #ddd; } .cookie-consent-form form { border: 1px solid #473f93; } .cookie-consent-form form fieldset { border: none; } .cookie-consent-form form fieldset:nth-child(odd) { background-color: #ececec; } .cookie-consent-form form fieldset dl dt { margin-top: 0; font-family: "Barlow", sans-serif; font-weight: 600; opacity: 0; transition: opacity ease-in 0.3s; } .wf-active .cookie-consent-form form fieldset dl dt { opacity: 1; } .wf-inactive .cookie-consent-form form fieldset dl dt { opacity: 1; } .freeform-row .freeform-column .freeform-label { font-weight: 400 !important; text-align: left; } .freeform-label, .freeform-column { text-align: left; } ul.errors.freeform-errors li, .freeform-form-has-errors { font-size: 0.9em; } .freeform-row { margin: 0 !important; } .registrations { margin: 0.5em; text-align: left; } .registrations p { font-size: 0.85em; margin: 0 !important; padding: 0; } .freeform-row .freeform-column .freeform-input[type=checkbox], .freeform-row .freeform-column .freeform-input[type=radio] { display: grid !important; } #cform { background-color: #e5e3f3; border: 1px solid #b1b5d6; padding: 1em; margin: 0 0 2em 0; } #cform h4 { margin-top: 0; } #cform h4 span { font-size: 0.65em; } #cform .member-form-note { font-size: 0.9em; line-height: 1.4; } #cform fieldset { border: none; padding: 0; } #cform fieldset legend { font-size: 1.3em; font-family: "Barlow", sans-serif; font-weight: 600; opacity: 0; transition: opacity ease-in 0.3s; } .wf-active #cform fieldset legend { opacity: 1; } .wf-inactive #cform fieldset legend { opacity: 1; } #cform p.form-note { margin: 0 0 -0.25em 0; } .membership-requirement { background-color: rgb(255, 255, 160); border: 1px solid rgb(200, 60, 60); padding: 12px; line-height: 1.25em; } header .wrapper { position: relative; height: 100%; } @media (min-width: 767px) { header .wrapper { height: 120px; } header .nav-container { position: absolute; top: 120px; left: 0; right: 0; height: 40px; background-color: rgb(84, 74, 173); overflow: visible; transition: all 0.3s ease; box-shadow: 0px 1px 2px #606060; } header.smaller .wrapper { height: 70px; } header.smaller .nav-container { top: 70px; } } /* Navigation components */ a.skip-navigation { height: 28px; padding: 6px; position: absolute; top: -90px; left: 0px; color: rgb(255, 255, 255); line-height: 34px; border-right: 1px solid rgba(255, 255, 255, 0.2); border-bottom: 1px solid rgba(255, 255, 255, 0.2); border-bottom-right-radius: 2px; background: transparent; -webkit-transition: top 1s ease-out, background 1s linear; transition: top 1s ease-out, background 1s linear; z-index: 10001; } a.skip-navigation:focus { position: absolute; left: 0px; top: 0px; background: rgba(55, 48, 112, 0.8); outline: 0; -webkit-transition: top 0.1s ease-in, background 0.5s linear; transition: top 0.1s ease-in, background 0.5s linear; } a.nav-toggle { display: block; width: 32px; height: 1.5em; font-size: 1.5em; position: absolute; top: 12px; right: 8px; z-index: 3000; } @media (min-width: 767px) { a.nav-toggle { display: none; } } #nav-icon { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: 0.5s ease-in-out; -moz-transition: 0.5s ease-in-out; -o-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; cursor: pointer; } #nav-icon span { display: block; position: absolute; height: 4px; width: 100%; background: rgb(84, 74, 173); border-radius: 9px; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: 0.25s ease-in-out; -moz-transition: 0.25s ease-in-out; -o-transition: 0.25s ease-in-out; transition: 0.25s ease-in-out; } #nav-icon span:nth-child(1) { top: 0px; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; } #nav-icon span:nth-child(2) { top: 9px; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; } #nav-icon span:nth-child(3) { top: 18px; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; } #nav-icon.open span:nth-child(1) { -webkit-transform: translate(8px, -2px) rotate(45deg); -moz-transform: translate(8px, -2px) rotate(45deg); -o-transform: translate(8px, -2px) rotate(45deg); transform: translate(8px, -2px) rotate(45deg); } #nav-icon.open span:nth-child(2) { width: 0%; opacity: 0; } #nav-icon.open span:nth-child(3) { -webkit-transform: translate(8px, 2px) rotate(-45deg); -moz-transform: translate(8px, 2px) rotate(-45deg); -o-transform: translate(8px, 2px) rotate(-45deg); transform: translate(8px, 2px) rotate(-45deg); } nav.main, nav.member-section { display: none; } nav.main.active, nav.member-section.active { display: block; position: absolute; left: 0; width: 100vw; height: 90vh; overflow: scroll; -webkit-overflow-scrolling: touch; background-color: rgb(84, 74, 173); font-size: 1.2em; } nav.main.active ul, nav.main.active li, nav.member-section.active ul, nav.member-section.active li { margin: 0; padding: 0; list-style: none; } nav.main.active li, nav.main.active li a, nav.member-section.active li, nav.member-section.active li a { display: block; width: auto; min-height: 40px; line-height: 40px; } nav.main.active li a, nav.member-section.active li a { padding: 0 1em; } nav.main.active li.current > a, nav.member-section.active li.current > a { font-weight: bold; } nav.main.active li.no-mobile, nav.member-section.active li.no-mobile { display: none; } nav.main.active ul, nav.member-section.active ul { position: relative; margin-top: 12px; } nav.main.active ul li, nav.member-section.active ul li { border-bottom: 1px solid #a09ad4; } nav.main.active ul li.current a, nav.member-section.active ul li.current a { color: rgb(255, 255, 255); } nav.main.active ul li > ul, nav.member-section.active ul li > ul { display: none; } nav.main.active ul li:hover > ul, nav.member-section.active ul li:hover > ul { display: block; } nav.main.active ul li.current > ul, nav.member-section.active ul li.current > ul { display: block; } nav.main.active ul ul, nav.member-section.active ul ul { margin: 0; background-color: #7d75c4; } nav.main.active ul ul li > a, nav.member-section.active ul ul li > a { padding-left: 36px; font-weight: normal; } nav.main.active ul ul li:last-child, nav.member-section.active ul ul li:last-child { border-bottom: none; } nav.main.active ul > li a, nav.member-section.active ul > li a { font-family: "Barlow", sans-serif; font-weight: 400; opacity: 0; transition: opacity ease-in 0.3s; } .wf-active nav.main.active ul > li a, .wf-active nav.member-section.active ul > li a { opacity: 1; } .wf-inactive nav.main.active ul > li a, .wf-inactive nav.member-section.active ul > li a { opacity: 1; } nav.main.active ul > li a, nav.main.active ul > li a:visited, nav.main.active ul > li a:active, nav.main.active ul > li a:visited:active, nav.member-section.active ul > li a, nav.member-section.active ul > li a:visited, nav.member-section.active ul > li a:active, nav.member-section.active ul > li a:visited:active { color: rgb(255, 255, 255); } nav.main.active ul > li a:hover, nav.main.active ul > li a:visited:hover, nav.member-section.active ul > li a:hover, nav.member-section.active ul > li a:visited:hover { color: #3c6f5e; } nav.main.active ul > li a:hover, nav.main.active ul > li a:visited:hover, nav.member-section.active ul > li a:hover, nav.member-section.active ul > li a:visited:hover { font-weight: bold; text-decoration: none; color: rgb(255, 255, 255); } nav.main.active ul > li a.ghost-button, nav.member-section.active ul > li a.ghost-button { margin: 0.5em; white-space: nowrap; } nav.main.active ul > li a.ghost-button:hover, nav.main.active ul > li a.ghost-button:visited:hover, nav.member-section.active ul > li a.ghost-button:hover, nav.member-section.active ul > li a.ghost-button:visited:hover { text-decoration: none; color: #203b32; } @media (min-width: 767px) { nav.main { display: block; transition: all 0.3s ease; max-width: 768px; margin: 0 auto; overflow: visible; } nav.main ul { margin: 0; padding: 0; list-style-type: none; height: 40px; position: relative; text-align: center; } nav.main ul li { margin: 0; } nav.main ul li { display: inline-block; float: left; } nav.main ul li:not(:first-child) { margin-left: 0; } nav.main ul li:not(:last-child) { margin-right: 0; } nav.main ul li { float: unset; min-height: 40px; height: 40px; } nav.main ul li:hover { background-color: #e5e3f3; } nav.main ul li:hover a { color: rgb(84, 74, 173); } nav.main ul li a { font-family: "Barlow Condensed", sans-serif; font-weight: 500; opacity: 0; transition: opacity ease-in 0.3s; display: block; font-size: 1em; padding: 0 4px; color: rgb(255, 255, 255); height: 40px; line-height: 40px; } .wf-active nav.main ul li a { opacity: 1; } .wf-inactive nav.main ul li a { opacity: 1; } nav.main ul li.current { background-color: #e5e3f3; } nav.main ul li.current a { color: rgb(84, 74, 173); } nav.main ul li ul { display: none; } nav.main ul li:hover ul { display: block; z-index: 500; text-align: left; } nav.main ul ul { position: absolute; background-color: #f6f6fb; top: 40px; height: auto; box-shadow: 0px 3px 6px color(k); } nav.main ul ul li { height: 38px; min-height: 38px; line-height: 38px; padding: 0 8px; display: block; border-bottom: 1px solid #e5e3f3; } nav.main ul ul li:last-of-type { border-bottom: none; } nav.main ul ul li:hover { background-color: #e5e3f3; } nav.main ul ul li > a { font-family: "Barlow", sans-serif; font-weight: 400; opacity: 0; transition: opacity ease-in 0.3s; font-size: 0.8em; padding-left: 0; padding-right: 0; text-shadow: none; display: block; box-shadow: none; background-color: transparent; min-height: 40px; height: 40px; width: 100%; } .wf-active nav.main ul ul li > a { opacity: 1; } .wf-inactive nav.main ul ul li > a { opacity: 1; } nav.main ul li:hover ul li a { text-shadow: none; } nav.main ul li.current ul li a { font-weight: 400; } nav.main ul li.current ul li.current { background-color: #e5e3f3; } } @media (min-width: 900px) { nav.main { max-width: 900px; } nav.main ul li a { font-size: 1.1em; padding: 0 6px; } nav.main ul ul { left: unset; } nav.main ul ul li a { font-size: 1em; } } @media (min-width: 992px) { nav.main { max-width: 1200px; } nav.main ul li a { font-size: 1.25em; padding: 0 8px; } nav.main ul ul { left: unset; } nav.main ul ul li a { font-size: 1em; } } @media (min-width: 1200px) { nav.main ul li a { padding: 0 20px; } nav.main ul ul { left: unset; } nav.main ul ul li a { font-size: 1em; } } .accordion-group { margin-bottom: 1em; } section.accordion-content :after { content: ""; display: table; clear: both; } section.accordion-content article { width: 100% !important; } section.accordion-content h4 { font-size: 1.1em; padding-left: 1.6em; cursor: pointer; margin-top: 0.5em; margin-bottom: 0; } section.accordion-content svg.trigger-plus { display: inline-block; float: left; width: 1.5em; height: 1.5em; margin-top: -2px; margin-left: -1.5em; } section.accordion-content div { padding-left: 1.6em; } .trigger-plus { fill: color(swatch-one); transition: transform ease 0.5s; transform: scale(0.5, 0.5); transform-origin: 50% 50%; will-change: transform; } .trigger-plus .vertical { transition: transform ease 0.5s; will-change: transform; transform-origin: 50% 50%; } .trigger-plus:hover, *:hover > .trigger-plus { transform: scale(0.75, 0.75); } .open > * > .trigger-plus { transform: scale(0.5, 0.5); } .open > * > .trigger-plus .vertical { transform: scaleY(0); } .open > * > .trigger-plus:hover { transform: rotate(90deg) scale(0.5, 0.5); } #message { background-color: rgb(255, 255, 160); position: fixed; color: rgb(0, 0, 0); width: 100%; z-index: 100; } #message .message--text { padding: 0.5em 1em; } #message .message--text h2 { margin: 0 1em; position: relative; text-align: center; transition: all 0.3s ease; } #message .message--text h2 .message--read-more { display: block; font-size: 0.75em; text-decoration: underline; cursor: pointer; } #message .message--text h2 .message--icon { position: absolute; top: 0; left: -1.2em; font-size: 1.2em; } #message .message--text h2 #message--close { position: absolute; top: 0; right: -1.2em; font-size: 1.2em; cursor: pointer; } #message .message--text h2.open { font-size: 1.75em; } #message .message--text .message--more { margin: 1em 0.5em 0.5em 0.5em; } @media (min-width: 767px) { #message .message--text { margin: 0 auto; max-width: 768px; } #message .message--text h2 { font-size: 1.25em; } #message .message--text h3 { font-size: 1.2em; } #message .message--text a { text-decoration: underline; } } @media (min-width: 992px) { #message .message--text { max-width: 992px; } } #message--open { position: absolute; top: -4px; left: 2px; font-size: 1.5em; cursor: pointer; } @media (min-width: 767px) { #message--open { top: 1em; left: unset; right: 1em; } } .ghost-button { cursor: pointer; display: inline-block; padding: 0.5em 1em; color: rgb(84, 74, 173); background-color: rgb(255, 255, 255); border: 2px solid rgb(84, 74, 173); border-radius: 2px; text-align: center; outline: none; text-decoration: none; font-family: "Barlow", sans-serif; font-weight: 400; opacity: 0; transition: opacity ease-in 0.3s; line-height: 1.2; transition: color 0.3s ease-out, background-color 0.3s ease-out, background-image 0.3s ease-out, border-color 0.3s ease-out; } .wf-active .ghost-button { opacity: 1; } .wf-inactive .ghost-button { opacity: 1; } .ghost-button:link, .ghost-button:visited { color: rgb(84, 74, 173); } .ghost-button:hover, .ghost-button:active, .ghost-button:visited:hover { background-color: #7d75c4; border-color: #7d75c4; color: rgb(255, 255, 255) !important; transition: color 0.3s ease-in, background-color 0.3s ease-in, background-image 0.3s ease-in, border-color 0.3s ease-in; } .ghost-button:hover h3, .ghost-button:active h3, .ghost-button:visited:hover h3 { color: rgb(255, 255, 255) !important; } .ghost-button.small { font-size: 0.85em; } .ghost-button-rev { cursor: pointer; display: inline-block; padding: 0.25em 0.5em; color: rgb(255, 255, 255); background-color: rgb(84, 74, 173); border: 2px solid rgb(84, 74, 173); border-radius: 2px; border-top-left-radius: 0; border-top-right-radius: 0; text-align: center; outline: none; text-decoration: none; font-family: "Barlow", sans-serif; font-weight: 400; opacity: 0; transition: opacity ease-in 0.3s; line-height: 1; transition: color 0.3s ease-out, background-color 0.3s ease-out, background-image 0.3s ease-out, border-color 0.3s ease-out; } .wf-active .ghost-button-rev { opacity: 1; } .wf-inactive .ghost-button-rev { opacity: 1; } .ghost-button-rev:link, .ghost-button-rev:visited { color: rgb(255, 255, 255); } .ghost-button-rev:hover, .ghost-button-rev:active, .ghost-button-rev:visited:hover { background-color: #373070; border-color: #373070; color: rgb(255, 255, 255) !important; transition: color 0.3s ease-in, background-color 0.3s ease-in, background-image 0.3s ease-in, border-color 0.3s ease-in; } .ghost-button-rev.small { font-size: 0.8em; } .ghost-button-accent { cursor: pointer; display: block; padding: 0.75em; color: rgb(0, 0, 0); background-color: rgb(255, 255, 160); border: 2px solid rgb(200, 60, 60); border-radius: 0.375em; text-align: center; outline: none; text-decoration: none; font-family: "Barlow", sans-serif; font-weight: 400; opacity: 0; transition: opacity ease-in 0.3s; line-height: 1; transition: color 0.3s ease-out, background-color 0.3s ease-out, background-image 0.3s ease-out, border-color 0.3s ease-out; } .wf-active .ghost-button-accent { opacity: 1; } .wf-inactive .ghost-button-accent { opacity: 1; } .ghost-button-accent:link, .ghost-button-accent:visited { color: rgb(0, 0, 0); } .ghost-button-accent:hover, .ghost-button-accent:active, .ghost-button-accent:visited:hover { background-color: rgb(200, 60, 60); border-color: rgb(200, 60, 60); color: rgb(255, 255, 255) !important; transition: color 0.3s ease-in, background-color 0.3s ease-in, background-image 0.3s ease-in, border-color 0.3s ease-in; } .ghost-button-accent.small { font-size: 0.8em; } .ghost-button-accent h3 { margin-top: 0; transition: color 0.3s ease-in; } .ghost-button-accent:hover h3 { color: rgb(255, 255, 255); } .ghost-button-green { cursor: pointer; display: inline-block; padding: 0.5em 1em; color: rgb(70, 131, 110); background-color: rgb(255, 255, 255); border: 2px solid rgb(70, 131, 110); border-radius: 2px; text-align: center; outline: none; text-decoration: none; font-family: "Barlow", sans-serif; font-weight: 400; opacity: 0; transition: opacity ease-in 0.3s; line-height: 1.2; transition: color 0.3s ease-out, background-color 0.3s ease-out, background-image 0.3s ease-out, border-color 0.3s ease-out; } .wf-active .ghost-button-green { opacity: 1; } .wf-inactive .ghost-button-green { opacity: 1; } .ghost-button-green:link, .ghost-button-green:visited { color: rgb(70, 131, 110); } .ghost-button-green:hover, .ghost-button-green:active, .ghost-button-green:visited:hover { background-color: #68ae96; border-color: #68ae96; color: rgb(255, 255, 255) !important; transition: color 0.3s ease-in, background-color 0.3s ease-in, background-image 0.3s ease-in, border-color 0.3s ease-in; } .ghost-button-green:hover h3, .ghost-button-green:active h3, .ghost-button-green:visited:hover h3 { color: rgb(255, 255, 255) !important; } .ghost-button-green.small { font-size: 0.85em; } .readmore { margin-top: -0.5em; border-top: 1px solid #7d75c4; line-height: 1.25; overflow: auto; } .readmore a { float: right; font-style: italic; font-size: 0.9em; padding: 0 6px; } .readmore:hover { border-color: #373070; } .readmore:hover a { color: #373070; border-bottom: 1px solid #373070; border-right: 1px solid #373070; border-left: 1px solid #373070; } table.striped { border: 1px solid rgb(84, 74, 173); border-radius: 2px; border-collapse: collapse; border-spacing: 0; } table.striped th { font-weight: 600; color: rgb(255, 255, 255); background-color: #7d75c4; border-right: 1px solid rgba(84, 74, 173, 0.1); } table.striped th:first-child { border-radius: 1px 0 0 0; } table.striped th:last-child { border-radius: 0 1px 0 0; } table.striped td { background-color: rgba(84, 74, 173, 0.1); border-right: 1px solid rgba(84, 74, 173, 0.5); border-bottom: 1px solid rgba(84, 74, 173, 0.5); } table.striped th, table.striped td { padding: 0.5em; vertical-align: top; } table.striped th:last-child, table.striped td:last-child { border-right: none; } table.striped tbody tr:last-child td { border-bottom: none; } table.striped tbody tr:nth-child(even) td { background-color: rgba(255, 255, 255, 0.75); } table.striped tfoot td { background-color: rgba(70, 131, 110, 0.1); border-top: 1px solid rgba(84, 74, 173, 0.5); border-bottom: none; text-align: center; font-size: 0.8em; } table.striped tfoot td:first-child { border-radius: 0 0 0 1px; } table.striped tfoot td:last-child { border-radius: 0 0 1px 0; } table.striped tfoot td:only-child { border-radius: 0 0 1px 1px; } table.striped caption { position: absolute; left: -9000px; } table.event-schedule { margin: 0.25em 0; } table.event-schedule td.schedule-item-time { min-width: 160px; } table.event-schedule td.schedule-item-time, table.event-schedule td.schedule-item-label { font-family: "Barlow", sans-serif; font-weight: 600; opacity: 0; transition: opacity ease-in 0.3s; } .wf-active table.event-schedule td.schedule-item-time, .wf-active table.event-schedule td.schedule-item-label { opacity: 1; } .wf-inactive table.event-schedule td.schedule-item-time, .wf-inactive table.event-schedule td.schedule-item-label { opacity: 1; } table.event-schedule td.schedule-item-description { width: 100%; } .video { margin-top: 1em; max-width: 580px; } .inline-image-full-column, .inline-image-align-left, .inline-image-align-right { margin-bottom: 1em; } .inline-image-full-column img, .inline-image-align-left img, .inline-image-align-right img { width: calc(100% - 2px); border: 1px solid rgb(128, 128, 128); box-shadow: 1px 1px 3px rgb(128, 128, 128); } @media (min-width: 767px) { .inline-image-align-left { width: 45%; margin: 0.5em 1em 0.5em 0; float: left; } .inline-image-align-right { width: 45%; margin: 0.5em 0 0.5em 1em; float: right; } } @media (min-width: 992px) { .inline-image-align-left { width: 40%; } .inline-image-align-right { width: 40%; } } .image-caption { font-size: 0.8em; font-family: "Barlow", sans-serif; font-weight: 600; opacity: 0; transition: opacity ease-in 0.3s; font-style: italic; padding: 0.2em 0.5em; } .wf-active .image-caption { opacity: 1; } .wf-inactive .image-caption { opacity: 1; } .image-gallery { padding: 1em; background-color: #c2bfe3; text-align: center; } .image-gallery h3 { margin-top: 0; margin-bottom: 1em; text-align: left; } .image-gallery a.fancybox-thumb img { width: 44%; margin: 1%; border: 3px solid #c2bfe3; } .image-gallery a.fancybox-thumb img:hover { border-color: rgb(58, 64, 111); } @media (min-width: 567px) { .image-gallery a.fancybox-thumb img { width: 29%; } } @media (min-width: 767px) { .image-gallery a.fancybox-thumb img { width: 44%; } } @media (min-width: 992px) { .image-gallery a.fancybox-thumb img { width: 29%; } } ul.people-list li { margin: 0 0 0.5em 0; } ul.people-list li span.title { font-weight: 600; } .event-listing { margin: 1em 0; } .event-listing .event-block { background-color: rgb(255, 255, 255); margin: 0 0 1em 0; padding: 1em; border: 1px solid #90c4b2; } .event-listing .event-block .event-type-bar { display: none; margin: -1em -1em 0.5em -1em; height: 28px; padding: 6px 1em; background-color: rgb(70, 131, 110); } .event-listing .event-block .event-type-bar .event-type { line-height: 24px; color: #e1efea; } .event-listing .event-block h3, .event-listing .event-block h4, .event-listing .event-block a { margin: 0; } .event-listing .event-block h4 { margin: 0.5em 0; } .event-listing .event-block h4 > a { font-family: "Barlow", sans-serif; font-weight: 400; opacity: 0; transition: opacity ease-in 0.3s; font-size: 1.4em; } .wf-active .event-listing .event-block h4 > a { opacity: 1; } .wf-inactive .event-listing .event-block h4 > a { opacity: 1; } .event-listing .event-block h4 > a:hover { text-decoration: underline; } .event-listing .event-block .event-summary { margin-bottom: 0.5em; } .event-listing .event-block a.event-readmore { font-family: "Barlow", sans-serif; font-weight: 600; opacity: 0; transition: opacity ease-in 0.3s; font-size: 1.2em; } .wf-active .event-listing .event-block a.event-readmore { opacity: 1; } .wf-inactive .event-listing .event-block a.event-readmore { opacity: 1; } .event-listing .event-block a.event-readmore:hover { text-decoration: underline; } .event-listing .cairn-terrier-club-event { border-color: rgb(84, 74, 173); } .event-listing .cairn-terrier-club-event .event-type-bar { display: block; background-color: rgb(84, 74, 173); } .event-listing .cairn-terrier-club-event .event-type-bar .event-type { color: #e5e3f3; } @media (min-width: 767px) { .event-listing .event-block-row { display: flex; } .event-listing .event-block-row .event-block { width: 27%; margin: 1em 1%; } } @media (min-width: 992px) { .event-listing .event-block-row-home { display: flex; } .event-listing .event-block-row-home .event-block { width: 45%; margin: 1em 1%; } } /* Event Sidebar */ .event-sidebar a.close-button { display: none; } .event-sidebar.mobile-sidebar { position: fixed; top: 100px; right: -300px; max-width: 300px; box-shadow: 1px 1px 3px black; transition: 0.5s; } .event-sidebar.mobile-sidebar h2 { cursor: pointer; } .event-sidebar.mobile-sidebar a.close-button { position: absolute; top: 0; bottom: 0; left: 270px; right: 0; color: white; z-index: 1000; font-size: 1.6em; display: block; } .event-sidebar.mobile-sidebar.open-slider { right: 0px; } .event-sidebar.mobile-sidebar .event-sidebar-content { width: 300px; } .event-sidebar h2 { font-size: 2em; background-color: rgb(70, 131, 110); color: rgb(255, 255, 255); border-top-left-radius: 1.4em; border-bottom-left-radius: 1.4em; padding: 0 0 0 0.2em; margin: 0 0 0 -1.4em; } .event-sidebar .event-sidebar-content { padding: 0.5em; background-color: rgb(255, 255, 255); border-right: 1px solid; border-left: 1px solid; border-bottom: 1px solid; } .event-sidebar .event-sidebar-content h3 { font-size: 1.4em; } .event-sidebar .event-sidebar-content h3:first-of-type { margin-top: 0; } @media (min-width: 767px) { .event-sidebar.mobile-sidebar { top: 150px; } } .tabs { list-style-type: none; margin: 0; overflow: hidden; padding: 0; } .tabs li { float: left; } .tab-content { padding: 0.5em 1em 2em 1em; box-shadow: 0px 0px 4px #a0a0a0; display: none; } .tab-content h3:first-of-type { margin-top: 0; } .tab-content p:last-child, .tab-content ul:last-child, .tab-content ol:last-child { margin-bottom: 0; } .tab-open { display: block; } .tabs { margin-top: 20px; border-bottom: 1px solid rgb(70, 131, 110); } .tabs a { display: inline-block; line-height: 1; padding: 10px; } .tabs a.act { color: rgb(255, 255, 255); background-color: rgb(70, 131, 110); } .tab-content { margin-bottom: 20px; overflow: auto; } .tab-content .tab-content { background-color: #FFFFFF; margin-bottom: 0; } .radio-switch { padding: 1em; background-color: #e1efea; border: 1px solid #b9d9ce; margin-bottom: 2em; } .radio-switch .rad-button-container { padding: 0.5em; background-color: #f5faf8; border: 1px solid #b9d9ce; } .radio-switch .rad-button-container:first-of-type { margin-bottom: 0.5em; } @media (min-width: 567px) { .radio-switch { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1em; } .radio-switch .rad-button-container input[type=radio] { margin: 0 6px 0 0; float: left; } .radio-switch .rad-button-container:first-of-type { margin-bottom: 0; } } @media (min-width: 767px) { .radio-switch { max-width: 635px; margin: 0 auto 2em auto; } } .product-list { border: 1px solid #7d75c4; background-color: #e5e3f3; padding: 1em; max-width: 635px; margin: 0 auto; } .product-list form { background-color: #f6f6fb; padding: 1em; margin: 0 0 1em 0; } .product-list form .product-header .product-image img { width: calc(100% - 2px); border: 1px solid rgb(84, 74, 173); } .product-list form h3 { margin-top: 0; } .product-list form h4 { font-size: 1.15em; } .product-list form .button-box { margin: 1em 0 0.5em 0; } .product-list form p.price { font-family: "Barlow", sans-serif; font-weight: 600; opacity: 0; transition: opacity ease-in 0.3s; margin-bottom: 0; font-size: 2.4em; } .wf-active .product-list form p.price { opacity: 1; } .wf-inactive .product-list form p.price { opacity: 1; } .product-list form p.fee-note { margin: 0; font-size: 0.85em; } .product-list form fieldset { margin: 1em 0 0.5em 0; max-width: 600px; } .product-list form label { display: block; } .product-list form input[type=text], .product-list form textarea { display: block; max-width: 600px; } @media (min-width: 567px) { .product-list form .product-header { overflow: auto; } .product-list form .product-header .product-image { float: left; width: 30%; } .product-list form .product-header .product-title { float: right; width: 66%; } .product-list form .product-header.no-image .product-title { width: 100%; } } article.tab-content.t-5, article.tab-content.t-6 { padding: 0; } article.tab-content.t-5 .schedule-row, article.tab-content.t-6 .schedule-row { padding: 4px 10px; background-color: rgba(255, 255, 255, 0.75); overflow: hidden; } article.tab-content.t-5 .schedule-row:nth-child(even), article.tab-content.t-6 .schedule-row:nth-child(even) { background-color: rgba(84, 74, 173, 0.25); } article.tab-content.t-5 .schedule-row .time-range, article.tab-content.t-6 .schedule-row .time-range { width: 30%; float: left; } article.tab-content.t-5 .schedule-row .schedule-detail, article.tab-content.t-6 .schedule-row .schedule-detail { width: 66%; float: right; } article.tab-content.t-5 .schedule-row .schedule-detail h4, article.tab-content.t-5 .schedule-row .schedule-detail h5, article.tab-content.t-6 .schedule-row .schedule-detail h4, article.tab-content.t-6 .schedule-row .schedule-detail h5 { margin: 0 0 0.5em 0; font-weight: 400; } @media (min-width: 567px) { article.tab-content.t-5 .schedule-row .time-range, article.tab-content.t-6 .schedule-row .time-range { width: 25%; } article.tab-content.t-5 .schedule-row .schedule-detail, article.tab-content.t-6 .schedule-row .schedule-detail { width: 74%; } } @media (min-width: 767px) { article.tab-content.t-5 .schedule-row .time-range, article.tab-content.t-6 .schedule-row .time-range { width: 20%; } article.tab-content.t-5 .schedule-row .schedule-detail, article.tab-content.t-6 .schedule-row .schedule-detail { width: 79%; } } .kennel-group h3 { margin-bottom: 1em; } .kennel { margin: 0 0 1em 0; padding: 1em; text-align: center; border: 1px solid #7d75c4; background-color: #f6f6fb; } .kennel h4 { margin: 0 0 0.5em 0; font-size: 1.35em; } .kennel h5 { margin: 0 0 1.5em 0; font-size: 1.15em; } .kennel p { margin: 0.25em 0 0 0; } .kennel p.kennel-owner { font-weight: 500; } @media (min-width: 567px) { .kennels { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1em; } } .article-listing article { margin-bottom: 2em; } .article-listing article h2 { margin-bottom: 12px; } .article-listing article p.byline { font-style: italic; font-size: 0.9em; } .article-listing article .form-list-logo { width: 150px; } .article-listing article .form-list-logo img { width: 100%; } ul.pagination { list-style: none; padding: 0; margin: 2.5em 0 0 0; } ul.pagination li { display: inline-block; padding: 2px; } ul.pagination li a { font-family: "Barlow", sans-serif; font-weight: 400; opacity: 0; transition: opacity ease-in 0.3s; font-size: 18px; color: rgb(255, 255, 255); border: 1px solid rgb(58, 64, 111); background-color: rgb(58, 64, 111); padding: 2px 8px; } .wf-active ul.pagination li a { opacity: 1; } .wf-inactive ul.pagination li a { opacity: 1; } ul.pagination li a:hover { color: rgb(58, 64, 111); background-color: rgb(255, 255, 255); } ul.pagination li a.active { color: rgb(58, 64, 111); background-color: rgb(255, 255, 255); } .sidebar-module { background-color: rgb(255, 255, 255); box-shadow: 0px 0px 3px #a0a0a0; padding: 1em; text-align: center; } .sidebar-module h3 { font-family: "Noto Serif", "Times New Roman", serif; font-weight: 400; opacity: 0; transition: opacity ease-in 0.3s; text-transform: capitalize; margin-top: 0; } .wf-active .sidebar-module h3 { opacity: 1; } .wf-inactive .sidebar-module h3 { opacity: 1; } .sidebar-module p { margin: 0 1em 0.5em 1.25em; text-align: left; } .sidebar-module a { margin: 0.25em 0; } .sidebar-module:hover { box-shadow: 0px 0px 6px #a0a0a0; } .consent-container { position: fixed; bottom: 0; left: 0; right: 0; padding: 1em 0; z-index: 900; background-color: #3c6f5e; } .consent-container .wrapper { padding: 0 0.5em; } .consent-container p { margin-bottom: 0; width: 75%; float: left; } .consent-container input.consent-button { float: right; } @media (min-width: 767px) { .consent-container .wrapper { padding: 1em; } } .freeform-column.freeform-column-content-align-left button { cursor: pointer; display: inline-block; padding: 0.5em 1em; color: rgb(84, 74, 173); background-color: rgb(255, 255, 255); border: 2px solid rgb(84, 74, 173); border-radius: 2px; text-align: center; outline: none; text-decoration: none; font-family: "Barlow", sans-serif; font-weight: 400; opacity: 0; transition: opacity ease-in 0.3s; line-height: 1.2; transition: color 0.3s ease-out, background-color 0.3s ease-out, background-image 0.3s ease-out, border-color 0.3s ease-out; } .wf-active .freeform-column.freeform-column-content-align-left button { opacity: 1; } .wf-inactive .freeform-column.freeform-column-content-align-left button { opacity: 1; } .freeform-column.freeform-column-content-align-left button:link, .freeform-column.freeform-column-content-align-left button:visited { color: rgb(84, 74, 173); } .freeform-column.freeform-column-content-align-left button:hover, .freeform-column.freeform-column-content-align-left button:active, .freeform-column.freeform-column-content-align-left button:visited:hover { background-color: #7d75c4; border-color: #7d75c4; color: rgb(255, 255, 255) !important; transition: color 0.3s ease-in, background-color 0.3s ease-in, background-image 0.3s ease-in, border-color 0.3s ease-in; } .freeform-column.freeform-column-content-align-left button:hover h3, .freeform-column.freeform-column-content-align-left button:active h3, .freeform-column.freeform-column-content-align-left button:visited:hover h3 { color: rgb(255, 255, 255) !important; } .freeform-column.freeform-column-content-align-left button.small { font-size: 0.85em; } html.js-nav, html.js-nav body { width: 100%; height: 100vh; overflow: hidden; } body { background-color: rgb(255, 255, 255); background-position: center top; background-repeat: no-repeat; margin-top: 80px; } @media (min-width: 767px) { body { margin-top: unset; padding-top: 160px; background-size: auto 800px; } } @media (min-width: 992px) { body { background-size: auto 900px; } } @media (min-width: 1200px) { body { background-size: cover; } } header.fc-cart__header { background-color: transparent; position: relative; } body > [data-fc-store-page] > header { background-color: white; } header { position: fixed; top: 0; right: 0; left: 0; height: 80px; background-color: rgb(255, 255, 255); transition: all 0.3s ease; z-index: 1000; box-shadow: 0px 0px 4px #000; } header a.logo { display: block; height: 46px; width: 170px; position: absolute; top: 8px; left: 1.65em; padding: 20px 0 0 75px; background-image: url(svg/ctcalogo.svg); background-repeat: no-repeat; background-size: 65px; font-family: "Noto Serif", "Times New Roman", serif; font-weight: 700; opacity: 0; transition: opacity ease-in 0.3s; color: #15132b; line-height: 1; transition: all 0.3s ease; } .wf-active header a.logo { opacity: 1; } .wf-inactive header a.logo { opacity: 1; } header a.logo:hover { color: #15132b !important; } header nav.main.active { top: 80px; transition: all 0.3s ease; } header nav.member-section.active { top: 80px; transition: all 0.3s ease; } header.smaller { height: 48px; } header.smaller a.logo { height: 38px; top: 4px; background-size: 40px; padding: 2px 0 0 45px; } header.smaller nav.main.active { top: 48px; } @media (min-width: 767px) { header { background-color: rgba(255, 255, 255, 0.6); height: 160px; box-shadow: unset; } header a.member-login { font-family: "Barlow", sans-serif; font-weight: 500; opacity: 0; transition: opacity ease-in 0.3s; font-size: 0.85em; background-color: rgb(84, 74, 173); padding: 0.25em 0.5em 0.25em 0.5em; display: inline-block; color: rgb(255, 255, 255); position: absolute; top: 0; right: 0; border-bottom: 1px solid rgb(255, 255, 255); border-left: 1px solid rgb(255, 255, 255); border-right: 1px solid rgb(255, 255, 255); } .wf-active header a.member-login { opacity: 1; } .wf-inactive header a.member-login { opacity: 1; } header a.member-login:hover { padding-bottom: 0.5em; box-shadow: 0px 0px 2px rgb(0, 0, 0); } header a.logo { height: 60px; width: 500px; left: 0; right: 0; margin-left: auto; margin-right: auto; top: 12px; background-size: 100px; padding: 40px 0 0 110px; font-size: 1.625em; } header #message { top: 160px; transition: all 0.3s ease; } header.smaller { background-color: rgb(255, 255, 255); height: 110px; } header.smaller a.logo { height: 50px; background-size: 55px; padding: 15px 0 0 70px; } header.smaller #message { top: 110px; } } @media (min-width: 992px) { header a.logo { height: 65px; width: 650px; padding: 35px 0 0 110px; font-size: 2.25em; } header.smaller a.logo { padding-top: 7px; } } .home-hero { padding: 2em 1em 0 1em; background-color: transparent; height: 65vh; min-height: 400px; } .home-hero .wrapper { background-color: transparent; } .home-hero .slide-container { opacity: 1; transition: opacity 2s ease 0s; } .home-hero .slide-container.hidden { opacity: 0; } .home-hero .cycle-slideshow { margin: 0 auto; max-width: fit-content; } .home-hero .cycle-slideshow .slide { background-color: rgba(255, 255, 255, 0.8); border: 1px solid rgb(84, 74, 173); padding: 1em; overflow: auto; } .home-hero .cycle-slideshow .slide .slide-image { width: 100%; } .home-hero .cycle-slideshow .slide .slide-image img { width: calc(100% - 2px); border: 1px solid rgb(84, 74, 173); } .home-hero .cycle-slideshow .slide .slide-text h2 { font-family: "Barlow", sans-serif; font-weight: 500; opacity: 0; transition: opacity ease-in 0.3s; font-size: 1.5em; } .wf-active .home-hero .cycle-slideshow .slide .slide-text h2 { opacity: 1; } .wf-inactive .home-hero .cycle-slideshow .slide .slide-text h2 { opacity: 1; } .home-hero .cycle-slideshow .slide .slide-text p { font-size: 0.85em; } .home-hero .cycle-slideshow .slide .slide-text .button-box { overflow: auto; } .home-hero .cycle-slideshow .slide .slide-text .button-box a { float: right; } @media (min-width: 567px) { .home-hero { padding: 4em 1em 2em 1em; } .home-hero .cycle-slideshow { max-width: unset; width: 85%; } .home-hero .cycle-slideshow .slide .slide-image { width: 60%; float: left; } .home-hero .cycle-slideshow .slide .slide-text { width: 35%; float: right; } } @media (min-width: 767px) { .home-hero { height: 25vh; min-height: 350px; } } @media (min-width: 992px) { .home-hero { min-height: 370px; } .home-hero .cycle-slideshow { width: 65%; } } .call-to-action-area .wrapper { background-color: transparent; } .call-to-action-area .cta-container { padding: 0.5em; text-align: center; } .call-to-action-area .cta-container .cta-block { display: inline-block; border-radius: 2px; background-color: rgb(255, 255, 255); width: 40%; margin: 0.25em 2%; height: 65px; border: 2px solid #473f93; text-align: center; vertical-align: middle; font-weight: 500; color: #68ae96; font-size: 1.25em; line-height: 1.2; transition: color 0.3s ease-out, background-color 0.3s ease-out, background-image 0.3s ease-out, border-color 0.3s ease-out; box-shadow: 0px 0px 3px rgb(0, 0, 0); } .call-to-action-area .cta-container .cta-block:nth-of-type(odd) { margin-left: 0; } .call-to-action-area .cta-container .cta-block:nth-of-type(even) { margin-right: 0; } .call-to-action-area .cta-container .cta-block a { display: table; width: 100%; height: 100%; } .call-to-action-area .cta-container .cta-block a div { display: table-cell; text-align: center; vertical-align: middle; } .call-to-action-area .cta-container .cta-block:hover { background-color: #7d75c4; border-color: #7d75c4; } .call-to-action-area .cta-container .cta-block:hover a { color: rgb(255, 255, 255) !important; } @media (min-width: 767px) { .call-to-action-area .cta-container { display: flex; justify-content: center; } .call-to-action-area .cta-container .cta-block { display: block; max-width: 150px; margin: 0.25em 2% 1em 2%; } .call-to-action-area .cta-container .cta-block:nth-of-type(odd) { margin-left: 2%; } .call-to-action-area .cta-container .cta-block:nth-of-type(even) { margin-right: 2%; } } @media (min-width: 992px) { .call-to-action-area .cta-container .cta-block { max-width: 200px; } } .message-area { border-top: 2px solid #203b32; background: url(jpg/tartan_bg-lighter.jpg); background-size: 400px; background-position: center -2px; border-bottom: 2px solid #203b32; } .message-area .wrapper { padding: 1em 1em; overflow: auto; } .message-area .message-contents { background-color: #e1efea; padding: 1em; overflow: auto; } .message-area .message-column h1 { margin-top: 0; } @media (min-width: 767px) { .message-area .message-column { width: 47%; float: left; } .message-area .info-column { width: 47%; float: right; } } .feature-zone { padding: 1em; background-color: #373070; border-radius: 2px; border: 1px solid #26214e; } .feature-zone .feature-zone-contents { margin: 0 1em; padding: 1em; background-color: #e5e3f3; overflow: auto; } .feature-zone .feature-zone-contents .feature-zone-text h3 { font-family: "Noto Serif", "Times New Roman", serif; font-weight: 400; opacity: 0; transition: opacity ease-in 0.3s; margin-top: 0; } .wf-active .feature-zone .feature-zone-contents .feature-zone-text h3 { opacity: 1; } .wf-inactive .feature-zone .feature-zone-contents .feature-zone-text h3 { opacity: 1; } .feature-zone .feature-zone-contents .feature-zone-text p { font-size: 1.25em; } @media (min-width: 767px) { .feature-zone .feature-zone-contents { display: flex; align-items: center; } .feature-zone .feature-zone-contents .feature-zone-text { width: 75%; float: left; } .feature-zone .feature-zone-contents .feature-zone-button { width: 23%; float: right; text-align: right; } } @media (min-width: 992px) { .feature-zone .feature-zone-contents { margin: 0; padding: 3em; } } main.interior-page { background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgb(255, 255, 255) 350px); padding-bottom: 2em; min-height: 1000px; } .interior-hero { padding: 0 1em; } .breadcrumbs { padding-top: 0.5em; font-family: "Barlow", sans-serif; font-weight: 600; opacity: 0; transition: opacity ease-in 0.3s; color: #7d75c4; font-size: 0.9em; } .wf-active .breadcrumbs { opacity: 1; } .wf-inactive .breadcrumbs { opacity: 1; } .breadcrumbs a { color: #7d75c4; } .breadcrumbs a:hover { color: #473f93; text-decoration: underline; } .main-image { margin-bottom: 1.5em; } .main-image img { width: calc(100% - 2px); border: 1px solid #473f93; } footer { background-color: #3c6f5e; padding: 2em 1em; text-align: center; font-size: 0.75em; } footer .wrapper { background-color: transparent; } footer p, footer a { color: #b9d9ce !important; } footer a:hover { color: #e5e3f3 !important; } footer .social-media ul { list-style: none; padding: 0; margin: 0; } footer .social-media ul li { display: inline-block; margin: 0 0.25em; position: relative; z-index: 1; color: #b9d9ce; } footer .social-media ul li:hover { color: rgb(255, 255, 255); } footer .social-media ul li.facebook:before { position: absolute; z-index: -1; font-family: "FontAwesome"; top: 0; left: 0; content: "\f082"; font-size: 40px; line-height: 40px; } footer .social-media ul li.instagram:before { position: absolute; z-index: -1; font-family: "FontAwesome"; top: 0; left: 0; content: "\f16d"; font-size: 40px; line-height: 40px; } footer .social-media ul li.twitter:before { position: absolute; z-index: -1; font-family: "FontAwesome"; top: 0; left: 0; content: "\f081"; font-size: 40px; line-height: 40px; } footer .social-media ul li a { font: 0/0 serif; text-shadow: none; color: transparent; display: block; width: 40px; height: 40px; } footer .credits { margin-top: 0.5em; } footer .credits a[title*=Imp] { display: block; width: 100%; height: 1em; margin: 0.25em auto; padding-top: 28px; background-color: transparent; background-image: url(svg/an-id-creation.svg); background-size: 100px 25px; background-repeat: no-repeat; background-position: top center; text-align: center; font: 0/0 serif; text-shadow: none; color: transparent; } @media (min-width: 767px) { footer .wrapper :after { content: ""; display: table; clear: both; } footer .indicia { text-align: left; float: left; width: 30%; padding-top: 70px; background-position: left top; background-size: 80%; } footer .disclaimer { text-align: left; float: left; width: 30%; margin-left: 5%; } footer .social-media { text-align: right; float: right; width: 30%; } footer .credits { clear: both; float: right; margin-right: 1em; width: 100px; } } @media (min-width: 992px) { footer .indicia { max-width: 225px; background-size: 195px; } } .pattern-bg { background: url(jpg/tartan_bg-lighter.jpg); background-size: 200px; background-position: center top; margin-top: 0; } .white-bg { box-sizing: border-box; background-color: rgba(255, 255, 255, 0.85); padding: 1em 0 0 0; } @media (min-width: 767px) { .member-wrapper { overflow: auto; } } body.member-utility .interior-hero { padding-top: 2em; } @media (min-width: 767px) { body.member-utility { margin-top: unset; padding-top: 160px; } body.member-utility .interior-hero { padding-top: 0; } } body.member-section { margin-top: 95px; } body.member-section header { transition: all 0.3s ease; height: 48px; } body.member-section header a.logo { height: 38px; top: 4px; background-size: 40px; padding: 2px 0 0 45px; } @media (min-width: 767px) { body.member-section { margin-top: 0; padding-top: 0; } body.member-section header { background-color: rgba(255, 255, 255, 0.6); height: 160px; box-shadow: unset; } body.member-section header a.logo { height: 60px; width: 500px; left: 0; right: 0; margin-left: auto; margin-right: auto; top: 12px; background-size: 100px; padding: 40px 0 0 110px; font-size: 1.625em; } body.member-section header.smaller { background-color: rgb(255, 255, 255); height: 110px; } body.member-section header.smaller a.logo { height: 50px; background-size: 55px; padding: 15px 0 0 70px; } body.member-section .member-wrapper { display: flex; align-items: stretch; } body.member-section .member-wrapper nav.member-section { display: block; width: 25%; max-width: 300px; padding: 200px 1em 2em 1em; background-color: rgb(84, 74, 173); } body.member-section .member-wrapper .member-content { width: 75%; padding: 0 1em 2em 0; } body.member-section .member-wrapper .member-content header { position: unset; } } nav.member-section.active { top: 80px; position: fixed; } @media (min-width: 767px) { nav.member-section { position: unset; } nav.member-section ul { padding: 0; margin: 0; } nav.member-section li { list-style-type: none; border-bottom: 1px solid #a09ad4; } nav.member-section li:hover, nav.member-section li.current { background-color: #a09ad4; border-bottom: 1px solid rgb(84, 74, 173); } nav.member-section li:hover a, nav.member-section li.current a { text-shadow: 1px 1px 2px #26214e; } nav.member-section li a { font-family: "Barlow", sans-serif; font-weight: 600; opacity: 0; transition: opacity ease-in 0.3s; font-size: 1.2em; display: block; padding: 0 0 0 0.5em; color: rgb(255, 255, 255); } .wf-active nav.member-section li a { opacity: 1; } .wf-inactive nav.member-section li a { opacity: 1; } nav.member-section li ul li { background-color: rgb(84, 74, 173); } nav.member-section li ul li ul li.member-subpage { padding-left: 1em; background-color: #6b62bc; } nav.member-section li ul li ul li.member-subpage.current { background-color: #a09ad4; } } .plaid-bar { height: 45px; } main.login-page { padding: 2em 0 2em 0; } .login-form { background-color: rgb(255, 255, 255); box-shadow: 0px 0px 3px #a0a0a0; padding: 1em; margin: 2em auto 3em auto; max-width: 300px; } .login-form h3 { font-family: "Noto Serif", "Times New Roman", serif; font-weight: 400; opacity: 0; transition: opacity ease-in 0.3s; text-transform: capitalize; margin-top: 0; } .wf-active .login-form h3 { opacity: 1; } .wf-inactive .login-form h3 { opacity: 1; } .login-form p { text-align: left; font-size: 0.85em; } .login-form a.forgot { margin: 0.25em 0; } .login-form input.ghost-button { margin-top: 1em; } .login-notice { background-color: rgb(255, 255, 160); border: 1px solid rgb(200, 60, 60); padding: 1em; } .app-date, .app-name, .app-sponsor, .app-view-form, .app-view-sponsors { display: inline-block; } .applicant-listing-header { margin: 1em 0 0 0; padding: 1em; background-color: rgb(84, 74, 173); } .applicant-listing-header .app-date, .applicant-listing-header .app-name, .applicant-listing-header .app-sponsor { font-weight: 600; color: rgb(255, 255, 255); font-size: 1.25em; } .applicant-listing { padding: 1em; } .applicant-listing:nth-child(even) { background-color: #e5e3f3; } .app-date { width: 20%; } .app-name { width: 15%; } .app-sponsor { width: 15%; } .app-view-form { width: 20%; } .app-view-sponsors { width: 23%; } .left-column .form-logo { margin: 1em auto; text-align: center; width: 175px; } .left-column .form-logo img { width: 100%; } .newsletter-list { margin-bottom: 2em; } .newsletter-list .newsletter-listing { margin: 0.5em 0 2em 0; padding: 0 0 2em 0; border-bottom: 1px dotted #7d75c4; } .newsletter-list .newsletter-listing:nth-child(6) { border-bottom: none; } .newsletter-list .newsletter-preview img { border: 1px solid rgb(84, 74, 173); display: block; width: 100%; } @media (min-width: 767px) { .newsletter-list .newsletter-listing { display: grid; grid-template-columns: 1fr 2fr; column-gap: 1em; align-items: end; } } .member-section-file-listing h4 { margin: 0; font-size: 1.3em; } .member-sidebar-module { padding: 0.5em 1em; background-color: #f6f6fb; border-radius: 0.375em; border: 1px solid #e5e3f3; } .member-sidebar-module h2 { margin: 0 0 0.5em 0; padding: 0 0 0.5em 0; border-bottom: 1px solid #c2bfe3; } .member-sidebar-module h3 { font-size: 1.375em; margin: 0; } .member-sidebar-module h4 { font-size: 1.2em; margin: 0; } .member-sidebar-module-accent { padding: 0.5em 1em; background-color: #f5faf8; border-radius: 0.375em; border: 1px solid rgb(70, 131, 110); } .member-sidebar-module-accent h2 { margin: 0 0 0.5em 0; padding: 0 0 0.5em 0; border-bottom: 1px solid #b9d9ce; } .member-sidebar-module-accent h3 { font-size: 1.375em; margin: 0; } .member-sidebar-module-accent h4 { font-size: 1.2em; margin: 0; } .drawer { padding-top: 1em; } .sponsor-form-output { border: 1px solid #e5e3f3; background-color: #f6f6fb; padding: 1em; margin: 2em 0 0 0; overflow: auto; } .sponsor-form-output h4 { margin-top: 0; } .success-notice { display: inline-block; padding: 1em; margin: 1em auto; border: 4px solid rgb(200, 60, 60); background-color: rgb(255, 255, 160); font-family: "Barlow", sans-serif; font-weight: 600; opacity: 0; transition: opacity ease-in 0.3s; } .wf-active .success-notice { opacity: 1; } .wf-inactive .success-notice { opacity: 1; } nav.dashboard { border-bottom: 2px solid rgb(70, 131, 110); } nav.dashboard ul { padding: 0; margin: 0; list-style-type: none; } nav.dashboard ul li { display: inline-block; } nav.dashboard ul li a { display: block; border: 2px solid rgb(70, 131, 110); border-bottom: none; border-top-left-radius: 6px; border-top-right-radius: 6px; color: rgb(70, 131, 110); background-color: #e1efea; padding: 8px; } nav.dashboard ul li a span { font-size: 2em; font-family: "Barlow Condensed", sans-serif; font-weight: 500; opacity: 0; transition: opacity ease-in 0.3s; line-height: 1; } .wf-active nav.dashboard ul li a span { opacity: 1; } .wf-inactive nav.dashboard ul li a span { opacity: 1; } nav.dashboard ul li.current a, nav.dashboard ul li:hover a { border-color: rgb(70, 131, 110); background-color: rgb(70, 131, 110); color: rgb(255, 255, 255) !important; } .download-links { border: 1px solid rgb(70, 131, 110); padding: 12px; background-color: #f5faf8; } .download-links h2 { font-family: "Barlow", sans-serif; font-weight: 600; opacity: 0; transition: opacity ease-in 0.3s; margin-top: 0; } .wf-active .download-links h2 { opacity: 1; } .wf-inactive .download-links h2 { opacity: 1; } .download-links p { text-align: left !important; max-width: 500px; margin-top: 24px; } .download-links ul { padding: 0; margin: 0; list-style-type: none; } .download-links ul li { display: inline-block; } .download-links ul li a { display: block; margin-right: 12px; border: 2px solid rgb(70, 131, 110); color: rgb(70, 131, 110); padding: 8px; background-color: rgb(255, 255, 255); } .download-links ul li a span { font-size: 2em; font-family: "Barlow Condensed", sans-serif; font-weight: 500; opacity: 0; transition: opacity ease-in 0.3s; line-height: 1; } .wf-active .download-links ul li a span { opacity: 1; } .wf-inactive .download-links ul li a span { opacity: 1; } .download-links ul li:hover a { border-color: rgb(70, 131, 110); background-color: rgb(70, 131, 110); color: rgb(255, 255, 255); } th.name-col { width: 120px; } th.phone-col { width: 100px; } .swatch-container { background-color: white; padding: 4px; } .swatch { display: inline-block; width: 9%; height: 100px; border: 1px solid lightgray; } .swatch.white { background-color: rgb(255, 255, 255); } .swatch.black { background-color: rgb(0, 0, 0); } .swatch.gray { background-color: rgb(128, 128, 128); } .swatch.gray-light { background-color: #a0a0a0; } .swatch.gray-medlight { background-color: #b9b9b9; } .swatch.gray-xlight { background-color: lightgray; } .swatch.gray-xxlight { background-color: #ececec; } .swatch.gray-dark { background-color: #606060; } .swatch.gray-meddark { background-color: #464646; } .swatch.gray-xdark { background-color: #2d2d2d; } .swatch.gray-xxdark { background-color: #202020; } .swatch.swatchone { background-color: rgb(70, 131, 110); } .swatch.swatchone-light { background-color: #68ae96; } .swatch.swatchone-medlight { background-color: #90c4b2; } .swatch.swatchone-xlight { background-color: #b9d9ce; } .swatch.swatchone-xxlight { background-color: #e1efea; } .swatch.swatchone-dark { background-color: #3c6f5e; } .swatch.swatchone-meddark { background-color: #2e5548; } .swatch.swatchone-xdark { background-color: #203b32; } .swatch.swatchone-xxdark { background-color: #12211c; } .swatch.swatchtwo { background-color: rgb(84, 74, 173); } .swatch.swatchtwo-light { background-color: #7d75c4; } .swatch.swatchtwo-medlight { background-color: #a09ad4; } .swatch.swatchtwo-xlight { background-color: #c2bfe3; } .swatch.swatchtwo-xxlight { background-color: #e5e3f3; } .swatch.swatchtwo-dark { background-color: #473f93; } .swatch.swatchtwo-meddark { background-color: #373070; } .swatch.swatchtwo-xdark { background-color: #26214e; } .swatch.swatchtwo-xxdark { background-color: #15132b; } .swatch.swatchthree { background-color: rgb(58, 64, 111); } .swatch.swatchthree-light { background-color: #5760a7; } .swatch.swatchthree-medlight { background-color: #848abf; } .swatch.swatchthree-xlight { background-color: #b1b5d6; } .swatch.swatchthree-xxlight { background-color: #dddfed; } .swatch.swatchthree-dark { background-color: #31365e; } .swatch.swatchthree-meddark { background-color: #262a48; } .swatch.swatchthree-xdark { background-color: #1a1d32; } .swatch.swatchthree-xxdark { background-color: #0f101c; }