/* Trix 1.3.2 Copyright © 2024 Basecamp, LLC http://trix-editor.org/*/ trix-editor { border: 1px solid #bbb; border-radius: 3px; margin: 0; padding: 0.4em 0.6em; min-height: 5em; outline: none; } trix-toolbar * { box-sizing: border-box; } trix-toolbar .trix-button-row { display: flex; flex-wrap: nowrap; justify-content: space-between; overflow-x: auto; } trix-toolbar .trix-button-group { display: flex; margin-bottom: 10px; border: 1px solid #bbb; border-top-color: #ccc; border-bottom-color: #888; border-radius: 3px; } trix-toolbar .trix-button-group:not(:first-child) { margin-left: 1.5vw; } @media (max-device-width: 768px) { trix-toolbar .trix-button-group:not(:first-child) { margin-left: 0; } } trix-toolbar .trix-button-group-spacer { flex-grow: 1; } @media (max-device-width: 768px) { trix-toolbar .trix-button-group-spacer { display: none; } } trix-toolbar .trix-button { position: relative; float: left; color: rgba(0, 0, 0, 0.6); font-size: 0.75em; font-weight: 600; white-space: nowrap; padding: 0 0.5em; margin: 0; outline: none; border: none; border-bottom: 1px solid #ddd; border-radius: 0; background: transparent; } trix-toolbar .trix-button:not(:first-child) { border-left: 1px solid #ccc; } trix-toolbar .trix-button.trix-active { background: #cbeefa; color: black; } trix-toolbar .trix-button:not(:disabled) { cursor: pointer; } trix-toolbar .trix-button:disabled { color: rgba(0, 0, 0, 0.125); } @media (max-device-width: 768px) { trix-toolbar .trix-button { letter-spacing: -0.01em; padding: 0 0.3em; } } trix-toolbar .trix-button--icon { font-size: inherit; width: 2.6em; height: 1.6em; max-width: calc(0.8em + 4vw); text-indent: -9999px; } @media (max-device-width: 768px) { trix-toolbar .trix-button--icon { height: 2em; max-width: calc(0.8em + 3.5vw); } } trix-toolbar .trix-button--icon::before { display: inline-block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0.6; content: ""; background-position: center; background-repeat: no-repeat; background-size: contain; } @media (max-device-width: 768px) { trix-toolbar .trix-button--icon::before { right: 6%; left: 6%; } } trix-toolbar .trix-button--icon.trix-active::before { opacity: 1; } trix-toolbar .trix-button--icon:disabled::before { opacity: 0.125; } trix-toolbar .trix-button--icon-attach::before { background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M16.5%206v11.5a4%204%200%201%201-8%200V5a2.5%202.5%200%200%201%205%200v10.5a1%201%200%201%201-2%200V6H10v9.5a2.5%202.5%200%200%200%205%200V5a4%204%200%201%200-8%200v12.5a5.5%205.5%200%200%200%2011%200V6h-1.5z%22%2F%3E%3C%2Fsvg%3E); top: 8%; bottom: 4%; } trix-toolbar .trix-button--icon-bold::before { background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M15.6%2011.8c1-.7%201.6-1.8%201.6-2.8a4%204%200%200%200-4-4H7v14h7c2.1%200%203.7-1.7%203.7-3.8%200-1.5-.8-2.8-2.1-3.4zM10%207.5h3a1.5%201.5%200%201%201%200%203h-3v-3zm3.5%209H10v-3h3.5a1.5%201.5%200%201%201%200%203z%22%2F%3E%3C%2Fsvg%3E); } trix-toolbar .trix-button--icon-italic::before { background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M10%205v3h2.2l-3.4%208H6v3h8v-3h-2.2l3.4-8H18V5h-8z%22%2F%3E%3C%2Fsvg%3E); } trix-toolbar .trix-button--icon-link::before { background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M9.88%2013.7a4.3%204.3%200%200%201%200-6.07l3.37-3.37a4.26%204.26%200%200%201%206.07%200%204.3%204.3%200%200%201%200%206.06l-1.96%201.72a.91.91%200%201%201-1.3-1.3l1.97-1.71a2.46%202.46%200%200%200-3.48-3.48l-3.38%203.37a2.46%202.46%200%200%200%200%203.48.91.91%200%201%201-1.3%201.3z%22%2F%3E%3Cpath%20d%3D%22M4.25%2019.46a4.3%204.3%200%200%201%200-6.07l1.93-1.9a.91.91%200%201%201%201.3%201.3l-1.93%201.9a2.46%202.46%200%200%200%203.48%203.48l3.37-3.38c.96-.96.96-2.52%200-3.48a.91.91%200%201%201%201.3-1.3%204.3%204.3%200%200%201%200%206.07l-3.38%203.38a4.26%204.26%200%200%201-6.07%200z%22%2F%3E%3C%2Fsvg%3E); } trix-toolbar .trix-button--icon-strike::before { background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M12.73%2014l.28.14c.26.15.45.3.57.44.12.14.18.3.18.5%200%20.3-.15.56-.44.75-.3.2-.76.3-1.39.3A13.52%2013.52%200%200%201%207%2014.95v3.37a10.64%2010.64%200%200%200%204.84.88c1.26%200%202.35-.19%203.28-.56.93-.37%201.64-.9%202.14-1.57s.74-1.45.74-2.32c0-.26-.02-.51-.06-.75h-5.21zm-5.5-4c-.08-.34-.12-.7-.12-1.1%200-1.29.52-2.3%201.58-3.02%201.05-.72%202.5-1.08%204.34-1.08%201.62%200%203.28.34%204.97%201l-1.3%202.93c-1.47-.6-2.73-.9-3.8-.9-.55%200-.96.08-1.2.26-.26.17-.38.38-.38.64%200%20.27.16.52.48.74.17.12.53.3%201.05.53H7.23zM3%2013h18v-2H3v2z%22%2F%3E%3C%2Fsvg%3E); } trix-toolbar .trix-button--icon-quote::before { background-image: url(data:image/svg+xml,%3Csvg%20version%3D%221%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M6%2017h3l2-4V7H5v6h3zm8%200h3l2-4V7h-6v6h3z%22%2F%3E%3C%2Fsvg%3E); } trix-toolbar .trix-button--icon-heading-1::before { background-image: url(data:image/svg+xml,%3Csvg%20version%3D%221%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M12%209v3H9v7H6v-7H3V9h9zM8%204h14v3h-6v12h-3V7H8V4z%22%2F%3E%3C%2Fsvg%3E); } trix-toolbar .trix-button--icon-code::before { background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M18.2%2012L15%2015.2l1.4%201.4L21%2012l-4.6-4.6L15%208.8l3.2%203.2zM5.8%2012L9%208.8%207.6%207.4%203%2012l4.6%204.6L9%2015.2%205.8%2012z%22%2F%3E%3C%2Fsvg%3E); } trix-toolbar .trix-button--icon-bullet-list::before { background-image: url(data:image/svg+xml,%3Csvg%20version%3D%221%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M4%204a2%202%200%201%200%200%204%202%202%200%200%200%200-4zm0%206a2%202%200%201%200%200%204%202%202%200%200%200%200-4zm0%206a2%202%200%201%200%200%204%202%202%200%200%200%200-4zm4%203h14v-2H8v2zm0-6h14v-2H8v2zm0-8v2h14V5H8z%22%2F%3E%3C%2Fsvg%3E); } trix-toolbar .trix-button--icon-number-list::before { background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M2%2017h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1%203h1.8L2%2013.1v.9h3v-1H3.2L5%2010.9V10H2v1zm5-6v2h14V5H7zm0%2014h14v-2H7v2zm0-6h14v-2H7v2z%22%2F%3E%3C%2Fsvg%3E); } trix-toolbar .trix-button--icon-undo::before { background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M12.5%208c-2.6%200-5%201-6.9%202.6L2%207v9h9l-3.6-3.6A8%208%200%200%201%2020%2016l2.4-.8a10.5%2010.5%200%200%200-10-7.2z%22%2F%3E%3C%2Fsvg%3E); } trix-toolbar .trix-button--icon-redo::before { background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M18.4%2010.6a10.5%2010.5%200%200%200-16.9%204.6L4%2016a8%208%200%200%201%2012.7-3.6L13%2016h9V7l-3.6%203.6z%22%2F%3E%3C%2Fsvg%3E); } trix-toolbar .trix-button--icon-decrease-nesting-level::before { background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M3%2019h19v-2H3v2zm7-6h12v-2H10v2zm-8.3-.3l2.8%202.9L6%2014.2%204%2012l2-2-1.4-1.5L1%2012l.7.7zM3%205v2h19V5H3z%22%2F%3E%3C%2Fsvg%3E); } trix-toolbar .trix-button--icon-increase-nesting-level::before { background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M3%2019h19v-2H3v2zm7-6h12v-2H10v2zm-6.9-1L1%2014.2l1.4%201.4L6%2012l-.7-.7-2.8-2.8L1%209.9%203.1%2012zM3%205v2h19V5H3z%22%2F%3E%3C%2Fsvg%3E); } trix-toolbar .trix-dialogs { position: relative; } trix-toolbar .trix-dialog { position: absolute; top: 0; left: 0; right: 0; font-size: 0.75em; padding: 15px 10px; background: #fff; box-shadow: 0 0.3em 1em #ccc; border-top: 2px solid #888; border-radius: 5px; z-index: 5; } trix-toolbar .trix-input--dialog { font-size: inherit; font-weight: normal; padding: 0.5em 0.8em; margin: 0 10px 0 0; border-radius: 3px; border: 1px solid #bbb; background-color: #fff; box-shadow: none; outline: none; -webkit-appearance: none; -moz-appearance: none; } trix-toolbar .trix-input--dialog.validate:invalid { box-shadow: #F00 0px 0px 1.5px 1px; } trix-toolbar .trix-button--dialog { font-size: inherit; padding: 0.5em; border-bottom: none; } trix-toolbar .trix-dialog--link { max-width: 600px; } trix-toolbar .trix-dialog__link-fields { display: flex; align-items: baseline; } trix-toolbar .trix-dialog__link-fields .trix-input { flex: 1; } trix-toolbar .trix-dialog__link-fields .trix-button-group { flex: 0 0 content; margin: 0; } trix-editor [data-trix-mutable]:not(.attachment__caption-editor) { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } trix-editor [data-trix-mutable]::-moz-selection, trix-editor [data-trix-cursor-target]::-moz-selection, trix-editor [data-trix-mutable] ::-moz-selection { background: none; } trix-editor [data-trix-mutable]::selection, trix-editor [data-trix-cursor-target]::selection, trix-editor [data-trix-mutable] ::selection { background: none; } trix-editor [data-trix-mutable].attachment__caption-editor:focus::-moz-selection { background: highlight; } trix-editor [data-trix-mutable].attachment__caption-editor:focus::selection { background: highlight; } trix-editor [data-trix-mutable].attachment.attachment--file { box-shadow: 0 0 0 2px highlight; border-color: transparent; } trix-editor [data-trix-mutable].attachment img { box-shadow: 0 0 0 2px highlight; } trix-editor .attachment { position: relative; } trix-editor .attachment:hover { cursor: default; } trix-editor .attachment--preview .attachment__caption:hover { cursor: text; } trix-editor .attachment__progress { position: absolute; z-index: 1; height: 20px; top: calc(50% - 10px); left: 5%; width: 90%; opacity: 0.9; transition: opacity 200ms ease-in; } trix-editor .attachment__progress[value="100"] { opacity: 0; } trix-editor .attachment__caption-editor { display: inline-block; width: 100%; margin: 0; padding: 0; font-size: inherit; font-family: inherit; line-height: inherit; color: inherit; text-align: center; vertical-align: top; border: none; outline: none; -webkit-appearance: none; -moz-appearance: none; } trix-editor .attachment__toolbar { position: absolute; z-index: 1; top: -0.9em; left: 0; width: 100%; text-align: center; } trix-editor .trix-button-group { display: inline-flex; } trix-editor .trix-button { position: relative; float: left; color: #666; white-space: nowrap; font-size: 80%; padding: 0 0.8em; margin: 0; outline: none; border: none; border-radius: 0; background: transparent; } trix-editor .trix-button:not(:first-child) { border-left: 1px solid #ccc; } trix-editor .trix-button.trix-active { background: #cbeefa; } trix-editor .trix-button:not(:disabled) { cursor: pointer; } trix-editor .trix-button--remove { text-indent: -9999px; display: inline-block; padding: 0; outline: none; width: 1.8em; height: 1.8em; line-height: 1.8em; border-radius: 50%; background-color: #fff; border: 2px solid highlight; box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.25); } trix-editor .trix-button--remove::before { display: inline-block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0.7; content: ""; background-image: url(data:image/svg+xml,%3Csvg%20height%3D%2224%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M19%206.4L17.6%205%2012%2010.6%206.4%205%205%206.4l5.6%205.6L5%2017.6%206.4%2019l5.6-5.6%205.6%205.6%201.4-1.4-5.6-5.6z%22%2F%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E); background-position: center; background-repeat: no-repeat; background-size: 90%; } trix-editor .trix-button--remove:hover { border-color: #333; } trix-editor .trix-button--remove:hover::before { opacity: 1; } trix-editor .attachment__metadata-container { position: relative; } trix-editor .attachment__metadata { position: absolute; left: 50%; top: 2em; transform: translate(-50%, 0); max-width: 90%; padding: 0.1em 0.6em; font-size: 0.8em; color: #fff; background-color: rgba(0, 0, 0, 0.7); border-radius: 3px; } trix-editor .attachment__metadata .attachment__name { display: inline-block; max-width: 100%; vertical-align: bottom; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } trix-editor .attachment__metadata .attachment__size { margin-left: 0.2em; white-space: nowrap; } @charset "UTF-8"; .trix-content { line-height: 1.5; } .trix-content * { box-sizing: border-box; margin: 0; padding: 0; } .trix-content h1 { font-size: 1.2em; line-height: 1.2; } .trix-content blockquote { border: 0 solid #ccc; border-left-width: 0.3em; margin-left: 0.3em; padding-left: 0.6em; } .trix-content [dir=rtl] blockquote, .trix-content blockquote[dir=rtl] { border-width: 0; border-right-width: 0.3em; margin-right: 0.3em; padding-right: 0.6em; } .trix-content li { margin-left: 1em; } .trix-content [dir=rtl] li { margin-right: 1em; } .trix-content pre { display: inline-block; width: 100%; vertical-align: top; font-family: monospace; font-size: 0.9em; padding: 0.5em; white-space: pre; background-color: #eee; overflow-x: auto; } .trix-content img { max-width: 100%; height: auto; } .trix-content .attachment { display: inline-block; position: relative; max-width: 100%; } .trix-content .attachment a { color: inherit; text-decoration: none; } .trix-content .attachment a:hover, .trix-content .attachment a:visited:hover { color: inherit; } .trix-content .attachment__caption { text-align: center; } .trix-content .attachment__caption .attachment__name + .attachment__size::before { content: ' · '; } .trix-content .attachment--preview { width: 100%; text-align: center; } .trix-content .attachment--preview .attachment__caption { color: #666; font-size: 0.9em; line-height: 1.2; } .trix-content .attachment--file { color: #333; line-height: 1; margin: 0 2px 2px 2px; padding: 0.4em 1em; border: 1px solid #bbb; border-radius: 5px; } .trix-content .attachment-gallery { display: flex; flex-wrap: wrap; position: relative; } .trix-content .attachment-gallery .attachment { flex: 1 0 33%; padding: 0 0.5em; max-width: 33%; } .trix-content .attachment-gallery.attachment-gallery--2 .attachment, .trix-content .attachment-gallery.attachment-gallery--4 .attachment { flex-basis: 50%; max-width: 50%; } /* * Provides a drop-in pointer for the default Trix stylesheet that will format the toolbar and * the trix-editor content (whether displayed or under editing). Feel free to incorporate this * inclusion directly in any other asset bundle and remove this file. * */ /* * We need to override trix.css’s image gallery styles to accommodate the * element we wrap around attachments. Otherwise, * images in galleries will be squished by the max-width: 33%; rule. */ .trix-content .attachment-gallery > action-text-attachment, .trix-content .attachment-gallery > .attachment { flex: 1 0 33%; padding: 0 0.5em; max-width: 33%; } .trix-content .attachment-gallery.attachment-gallery--2 > action-text-attachment, .trix-content .attachment-gallery.attachment-gallery--2 > .attachment, .trix-content .attachment-gallery.attachment-gallery--4 > action-text-attachment, .trix-content .attachment-gallery.attachment-gallery--4 > .attachment { flex-basis: 50%; max-width: 50%; } .trix-content action-text-attachment .attachment { padding: 0 !important; max-width: 100% !important; } @font-face { font-family: 'Eveleth Clean Thin'; src: url(/assets/eveleththin-webfont-3e1631b39d41597b8e0053af4b2b5997f64b3cde52c39501002393a7b0884ea7.eot); src: url(/assets/eveleththin-webfont-3e1631b39d41597b8e0053af4b2b5997f64b3cde52c39501002393a7b0884ea7.eot?#iefix) format('embedded-opentype'), url(/assets/eveleththin-webfont-0436ce67c8cbab7a17e4610088c3ee0d4cac0475575ea533c1a41346cadb01cd.woff) format('woff'), url(/assets/eveleththin-webfont-7a93e410f34e8cee25920be48ab4d2363630996da2f08b5d025792bf6e7a7c50.ttf) format('truetype'), url(/assets/eveleththin-webfont-cd1ed247fad5fd70d9a8111aa41ada5c3dd7db6430108da04cc87ecad4cf6e2b.svg#trend_sans_fourregular) format('svg'); font-weight: normal; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @font-face { font-family: 'Eveleth Clean'; src: url(/assets/evelethlight-webfont-5107a72b428466a661587acffaaa91342257100838e2e4adfff055015eb0c69f.eot); src: url(/assets/evelethlight-webfont-5107a72b428466a661587acffaaa91342257100838e2e4adfff055015eb0c69f.eot?#iefix) format('embedded-opentype'), url(/assets/evelethlight-webfont-ebbb32f09cc133d74459c47679e69ebbc7146efcefbd8c8396eed7525b355bd7.woff) format('woff'), url(/assets/evelethlight-webfont-6c247ae5894439247819eca79fcde90f2b1cdbbf6fc3e820cef3158e28141fbd.ttf) format('truetype'), url(/assets/evelethlight-webfont-809c74932fc0d7528e79e4f61633e832d129e3e196fb360d010d51ed9cdf4d47.svg#trend_sans_fourregular) format('svg'); font-weight: normal; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1 small { font-family: 'Eveleth Clean'; } h1,h2,h3,h4,h5 { font-family: 'Eveleth Clean Thin'; } mini-h5 { font-family: 'Eveleth Clean Thin'; color: black; background-color: white; box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.15); } h4 { font-family: 'Eveleth Clean Thin'; color: black; background-color: white; box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.15); } section h1 { font-family: 'Eveleth Clean' } /* required styles */ .leaflet-pane, .leaflet-tile, .leaflet-marker-icon, .leaflet-marker-shadow, .leaflet-tile-container, .leaflet-pane > svg, .leaflet-pane > canvas, .leaflet-zoom-box, .leaflet-image-layer, .leaflet-layer { position: absolute; left: 0; top: 0; } .leaflet-container { overflow: hidden; } .leaflet-tile, .leaflet-marker-icon, .leaflet-marker-shadow { -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-user-drag: none; } /* Prevents IE11 from highlighting tiles in blue */ .leaflet-tile::selection { background: transparent; } /* Safari renders non-retina tile on retina better with this, but Chrome is worse */ .leaflet-safari .leaflet-tile { image-rendering: -webkit-optimize-contrast; } /* hack that prevents hw layers "stretching" when loading new tiles */ .leaflet-safari .leaflet-tile-container { width: 1600px; height: 1600px; -webkit-transform-origin: 0 0; } .leaflet-marker-icon, .leaflet-marker-shadow { display: block; } /* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */ /* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */ .leaflet-container .leaflet-overlay-pane svg { max-width: none !important; max-height: none !important; } .leaflet-container .leaflet-marker-pane img, .leaflet-container .leaflet-shadow-pane img, .leaflet-container .leaflet-tile-pane img, .leaflet-container img.leaflet-image-layer, .leaflet-container .leaflet-tile { max-width: none !important; max-height: none !important; width: auto; padding: 0; } .leaflet-container.leaflet-touch-zoom { -ms-touch-action: pan-x pan-y; touch-action: pan-x pan-y; } .leaflet-container.leaflet-touch-drag { -ms-touch-action: pinch-zoom; /* Fallback for FF which doesn't support pinch-zoom */ touch-action: none; touch-action: pinch-zoom; } .leaflet-container.leaflet-touch-drag.leaflet-touch-zoom { -ms-touch-action: none; touch-action: none; } .leaflet-container { -webkit-tap-highlight-color: transparent; } .leaflet-container a { -webkit-tap-highlight-color: rgba(51, 181, 229, 0.4); } .leaflet-tile { filter: inherit; visibility: hidden; } .leaflet-tile-loaded { visibility: inherit; } .leaflet-zoom-box { width: 0; height: 0; -moz-box-sizing: border-box; box-sizing: border-box; z-index: 800; } /* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */ .leaflet-overlay-pane svg { -moz-user-select: none; } .leaflet-pane { z-index: 400; } .leaflet-tile-pane { z-index: 200; } .leaflet-overlay-pane { z-index: 400; } .leaflet-shadow-pane { z-index: 500; } .leaflet-marker-pane { z-index: 600; } .leaflet-tooltip-pane { z-index: 650; } .leaflet-popup-pane { z-index: 700; } .leaflet-map-pane canvas { z-index: 100; } .leaflet-map-pane svg { z-index: 200; } .leaflet-vml-shape { width: 1px; height: 1px; } .lvml { behavior: url(#default#VML); display: inline-block; position: absolute; } /* control positioning */ .leaflet-control { position: relative; z-index: 800; pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */ pointer-events: auto; } .leaflet-top, .leaflet-bottom { position: absolute; z-index: 1000; pointer-events: none; } .leaflet-top { top: 0; } .leaflet-right { right: 0; } .leaflet-bottom { bottom: 0; } .leaflet-left { left: 0; } .leaflet-control { float: left; clear: both; } .leaflet-right .leaflet-control { float: right; } .leaflet-top .leaflet-control { margin-top: 10px; } .leaflet-bottom .leaflet-control { margin-bottom: 10px; } .leaflet-left .leaflet-control { margin-left: 10px; } .leaflet-right .leaflet-control { margin-right: 10px; } /* zoom and fade animations */ .leaflet-fade-anim .leaflet-popup { opacity: 0; -webkit-transition: opacity 0.2s linear; -moz-transition: opacity 0.2s linear; transition: opacity 0.2s linear; } .leaflet-fade-anim .leaflet-map-pane .leaflet-popup { opacity: 1; } .leaflet-zoom-animated { -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; } svg.leaflet-zoom-animated { will-change: transform; } .leaflet-zoom-anim .leaflet-zoom-animated { -webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1); -moz-transition: -moz-transform 0.25s cubic-bezier(0,0,0.25,1); transition: transform 0.25s cubic-bezier(0,0,0.25,1); } .leaflet-zoom-anim .leaflet-tile, .leaflet-pan-anim .leaflet-tile { -webkit-transition: none; -moz-transition: none; transition: none; } .leaflet-zoom-anim .leaflet-zoom-hide { visibility: hidden; } /* cursors */ .leaflet-interactive { cursor: pointer; } .leaflet-grab { cursor: -webkit-grab; cursor: -moz-grab; cursor: grab; } .leaflet-crosshair, .leaflet-crosshair .leaflet-interactive { cursor: crosshair; } .leaflet-popup-pane, .leaflet-control { cursor: auto; } .leaflet-dragging .leaflet-grab, .leaflet-dragging .leaflet-grab .leaflet-interactive, .leaflet-dragging .leaflet-marker-draggable { cursor: move; cursor: -webkit-grabbing; cursor: -moz-grabbing; cursor: grabbing; } /* marker & overlays interactivity */ .leaflet-marker-icon, .leaflet-marker-shadow, .leaflet-image-layer, .leaflet-pane > svg path, .leaflet-tile-container { pointer-events: none; } .leaflet-marker-icon.leaflet-interactive, .leaflet-image-layer.leaflet-interactive, .leaflet-pane > svg path.leaflet-interactive, svg.leaflet-image-layer.leaflet-interactive path { pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */ pointer-events: auto; } /* visual tweaks */ .leaflet-container { background: #ddd; outline-offset: 1px; } .leaflet-container a { color: #0078A8; } .leaflet-zoom-box { border: 2px dotted #38f; background: rgba(255,255,255,0.5); } /* general typography */ .leaflet-container { font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; font-size: 12px; font-size: 0.75rem; line-height: 1.5; } /* general toolbar styles */ .leaflet-bar { box-shadow: 0 1px 5px rgba(0,0,0,0.65); border-radius: 4px; } .leaflet-bar a { background-color: #fff; border-bottom: 1px solid #ccc; width: 26px; height: 26px; line-height: 26px; display: block; text-align: center; text-decoration: none; color: black; } .leaflet-bar a, .leaflet-control-layers-toggle { background-position: 50% 50%; background-repeat: no-repeat; display: block; } .leaflet-bar a:hover, .leaflet-bar a:focus { background-color: #f4f4f4; } .leaflet-bar a:first-child { border-top-left-radius: 4px; border-top-right-radius: 4px; } .leaflet-bar a:last-child { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-bottom: none; } .leaflet-bar a.leaflet-disabled { cursor: default; background-color: #f4f4f4; color: #bbb; } .leaflet-touch .leaflet-bar a { width: 30px; height: 30px; line-height: 30px; } .leaflet-touch .leaflet-bar a:first-child { border-top-left-radius: 2px; border-top-right-radius: 2px; } .leaflet-touch .leaflet-bar a:last-child { border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; } /* zoom control */ .leaflet-control-zoom-in, .leaflet-control-zoom-out { font: bold 18px 'Lucida Console', Monaco, monospace; text-indent: 1px; } .leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out { font-size: 22px; } /* layers control */ .leaflet-control-layers { box-shadow: 0 1px 5px rgba(0,0,0,0.4); background: #fff; border-radius: 5px; } .leaflet-control-layers-toggle { background-image: url(/images/layers.png); width: 36px; height: 36px; } .leaflet-retina .leaflet-control-layers-toggle { background-image: url(/images/layers-2x.png); background-size: 26px 26px; } .leaflet-touch .leaflet-control-layers-toggle { width: 44px; height: 44px; } .leaflet-control-layers .leaflet-control-layers-list, .leaflet-control-layers-expanded .leaflet-control-layers-toggle { display: none; } .leaflet-control-layers-expanded .leaflet-control-layers-list { display: block; position: relative; } .leaflet-control-layers-expanded { padding: 6px 10px 6px 6px; color: #333; background: #fff; } .leaflet-control-layers-scrollbar { overflow-y: scroll; overflow-x: hidden; padding-right: 5px; } .leaflet-control-layers-selector { margin-top: 2px; position: relative; top: 1px; } .leaflet-control-layers label { display: block; font-size: 13px; font-size: 1.08333em; } .leaflet-control-layers-separator { height: 0; border-top: 1px solid #ddd; margin: 5px -10px 5px -6px; } /* Default icon URLs */ .leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */ background-image: url(/images/marker-icon.png); } /* attribution and scale controls */ .leaflet-container .leaflet-control-attribution { background: #fff; background: rgba(255, 255, 255, 0.8); margin: 0; } .leaflet-control-attribution, .leaflet-control-scale-line { padding: 0 5px; color: #333; line-height: 1.4; } .leaflet-control-attribution a { text-decoration: none; } .leaflet-control-attribution a:hover, .leaflet-control-attribution a:focus { text-decoration: underline; } .leaflet-attribution-flag { display: inline !important; vertical-align: baseline !important; width: 1em; height: 0.6669em; } .leaflet-left .leaflet-control-scale { margin-left: 5px; } .leaflet-bottom .leaflet-control-scale { margin-bottom: 5px; } .leaflet-control-scale-line { border: 2px solid #777; border-top: none; line-height: 1.1; padding: 2px 5px 1px; white-space: nowrap; -moz-box-sizing: border-box; box-sizing: border-box; background: rgba(255, 255, 255, 0.8); text-shadow: 1px 1px #fff; } .leaflet-control-scale-line:not(:first-child) { border-top: 2px solid #777; border-bottom: none; margin-top: -2px; } .leaflet-control-scale-line:not(:first-child):not(:last-child) { border-bottom: 2px solid #777; } .leaflet-touch .leaflet-control-attribution, .leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar { box-shadow: none; } .leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar { border: 2px solid rgba(0,0,0,0.2); background-clip: padding-box; } /* popup */ .leaflet-popup { position: absolute; text-align: center; margin-bottom: 20px; } .leaflet-popup-content-wrapper { padding: 1px; text-align: left; border-radius: 12px; } .leaflet-popup-content { margin: 13px 24px 13px 20px; line-height: 1.3; font-size: 13px; font-size: 1.08333em; min-height: 1px; } .leaflet-popup-content p { margin: 17px 0; margin: 1.3em 0; } .leaflet-popup-tip-container { width: 40px; height: 20px; position: absolute; left: 50%; margin-top: -1px; margin-left: -20px; overflow: hidden; pointer-events: none; } .leaflet-popup-tip { width: 17px; height: 17px; padding: 1px; margin: -10px auto 0; pointer-events: auto; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .leaflet-popup-content-wrapper, .leaflet-popup-tip { background: white; color: #333; box-shadow: 0 3px 14px rgba(0,0,0,0.4); } .leaflet-container a.leaflet-popup-close-button { position: absolute; top: 0; right: 0; border: none; text-align: center; width: 24px; height: 24px; font: 16px/24px Tahoma, Verdana, sans-serif; color: #757575; text-decoration: none; background: transparent; } .leaflet-container a.leaflet-popup-close-button:hover, .leaflet-container a.leaflet-popup-close-button:focus { color: #585858; } .leaflet-popup-scrolled { overflow: auto; } .leaflet-oldie .leaflet-popup-content-wrapper { -ms-zoom: 1; } .leaflet-oldie .leaflet-popup-tip { width: 24px; margin: 0 auto; -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)"; filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678); } .leaflet-oldie .leaflet-control-zoom, .leaflet-oldie .leaflet-control-layers, .leaflet-oldie .leaflet-popup-content-wrapper, .leaflet-oldie .leaflet-popup-tip { border: 1px solid #999; } /* div icon */ .leaflet-div-icon { background: #fff; border: 1px solid #666; } /* Tooltip */ /* Base styles for the element that has a tooltip */ .leaflet-tooltip { position: absolute; padding: 6px; background-color: #fff; border: 1px solid #fff; border-radius: 3px; color: #222; white-space: nowrap; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; pointer-events: none; box-shadow: 0 1px 3px rgba(0,0,0,0.4); } .leaflet-tooltip.leaflet-interactive { cursor: pointer; pointer-events: auto; } .leaflet-tooltip-top:before, .leaflet-tooltip-bottom:before, .leaflet-tooltip-left:before, .leaflet-tooltip-right:before { position: absolute; pointer-events: none; border: 6px solid transparent; background: transparent; content: ""; } /* Directions */ .leaflet-tooltip-bottom { margin-top: 6px; } .leaflet-tooltip-top { margin-top: -6px; } .leaflet-tooltip-bottom:before, .leaflet-tooltip-top:before { left: 50%; margin-left: -6px; } .leaflet-tooltip-top:before { bottom: 0; margin-bottom: -12px; border-top-color: #fff; } .leaflet-tooltip-bottom:before { top: 0; margin-top: -12px; margin-left: -6px; border-bottom-color: #fff; } .leaflet-tooltip-left { margin-left: -6px; } .leaflet-tooltip-right { margin-left: 6px; } .leaflet-tooltip-left:before, .leaflet-tooltip-right:before { top: 50%; margin-top: -6px; } .leaflet-tooltip-left:before { right: 0; margin-right: -12px; border-left-color: #fff; } .leaflet-tooltip-right:before { left: 0; margin-left: -12px; border-right-color: #fff; } /* Printing */ @media print { /* Prevent printers from removing background-images of controls. */ .leaflet-control { -webkit-print-color-adjust: exact; print-color-adjust: exact; } } /* * This is a manifest file that'll be compiled into application.css, which will include all the files * listed below. * * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's * vendor/assets/stylesheets directory can be referenced here using a relative path. * * You're free to add application-wide styles to this file and they'll appear at the bottom of the * compiled file so the styles you add here take precedence over styles defined in any other CSS * files in this directory. Styles in this file should be added after the last require_* statement. * It is generally better to create a new file per style scope. * */ body { background-color: #d2f3fc; background-repeat: no-repeat; background-attachment: fixed; margin:0px; } a {color: 40px; color: #000000 !important;} /* Add a black background color to the top navigation */ .topnav { background-color: #333; overflow: hidden; position: relative; z-index: 2000; } /* Style the links inside the navigation bar */ .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } /* Change the color of links on hover */ .topnav a:hover { background-color: #ddd; color: black; } /* Add an active class to highlight the current page */ .topnav a.active { background-color: #04AA6D; color: white; } /* Hide the link that should open and close the topnav on small screens */ .topnav .icon { display: none; } /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */ @media screen and (max-width: 600px) { .topnav a:not(:first-child) {display: none;} .topnav a.icon { float: right; display: block; } } /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */ @media screen and (max-width: 600px) { .topnav.responsive {position: relative;} .topnav.responsive a.icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; text-align: left; } } .navbar { z-index: 1; min-height: 38px; color: #000000 !important; background-color: #FFFFFF !important; box-shadow: 0px 4px 2px -2px rgba(0, 0, 0, 0.15); } .navbar a.brand { font-size: 40px; color: #000000 !important; } .navbar a.brand:hover { color: #000000 !important; background-color: transparent; text-decoration: none; } .button { background-color: #FFFFFF; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; border-radius: 8px; box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.15); } .img-circular { width: 75px; height: 75px; background-size: cover; display: block; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; } .img-rounded { border-radius: 10px; box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.15); text-align: left; } .tip-icon { float: right; width: 80px; height: 80px; background-size: cover; display: block; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; } /* Container holding the image and the text */ .tip-widget { padding: 10px; position: relative; text-align: left; color: white; /* Instagram Reels Embed Styles */ .instagram-reel-wrapper { margin: 1rem 0; max-width: 100%; } .instagram-reel-title { font-size: 1.05rem; font-weight: 600; margin-bottom: 0.5rem; color: #222; } .instagram-reel-wrapper blockquote.instagram-media { max-width: 100% !important; } /* Make sure it looks decent on mobile */ @media (max-width: 600px) { .instagram-reel-wrapper { margin: 0.75rem 0; } .instagram-reel-title { font-size: 1rem; } } } /* Bottom left text */ .bottom-left { position: absolute; bottom: 8px; left: 20px; } /* Top left text */ .top-left { position: absolute; top: 20px; left: 20px; } /* Top right text */ .top-right { position: absolute; top: 8px; right: 16px; } /* Bottom right text */ .bottom-right { position: absolute; bottom: 8px; right: 16px; } /* Centered text */ .centered { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* Add a card effect for articles */ .card { background-color: white; padding: 20px; margin-top: 20px; box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.15); } /* #articles container for the feed */ #articles { position: relative; z-index: 1; padding: 8px 4px; box-sizing: border-box; } /* Article Widget: clean responsive card with image + text overlays */ .article-widget { position: relative; width: 80%; max-width: 900px; margin: 0 auto 14px; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); background: #111; /* fallback */ } .article-image { display: block; width: 100%; height: auto; border-radius: 10px; vertical-align: bottom; } /* Category badge - top left */ .article-top-left { position: absolute; top: 8px; left: 8px; z-index: 10; background: rgba(0, 0, 0, 0.75); color: #fff; padding: 3px 7px; border-radius: 4px; font-size: 10px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; white-space: nowrap; max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; text-shadow: none; } .article-top-left h3 { margin: 0; font-size: inherit; } /* Title + location - bottom overlay with gradient */ .article-bottom-left { position: absolute; bottom: 0; left: 0; right: 0; z-index: 10; padding: 10px 10px 7px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.82)); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); } .article-bottom-left h4 { margin: 0; font-size: 14px; line-height: 1.25; font-weight: 500; } /* Mini Article Widget */ .mini-article-widget { position: relative; max-width: 500px; width: 92%; margin: 10px auto; padding: 0; color: white; overflow: hidden; border-radius: 6px; } .mini-article-bottom-left, .mini-article-top-left { position: absolute; left: 8px; right: 8px; color: white; text-shadow: 0 1px 3px rgba(0,0,0,0.8); z-index: 2; } .mini-article-top-left { top: 6px; } .mini-article-bottom-left { bottom: 6px; background: rgba(0,0,0,0.5); padding: 4px 6px; border-radius: 3px; } /* Container holding the image and the text */ .photo-widget { position: relative; max-width: 640px; width: 92%; margin: 10px auto; color: white; overflow: hidden; } /* Bottom left text */ .photo-bottom-left { position: absolute; bottom: 10px; left: 10px; right: 10px; color: white; text-shadow: 0 1px 3px rgba(0,0,0,0.8); } .photo-bottom-right { position: absolute; bottom: 10px; left: 10px; right: 10px; color: white; text-shadow: 0 1px 3px rgba(0,0,0,0.8); } /* Top left text */ .photo-top-left { position: absolute; top: 10px; left: 10px; right: 10px; color: white; text-shadow: 0 1px 3px rgba(0,0,0,0.8); } #googlemaps { height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 0; /* Set z-index to 0 as it will be on a layer below the contact form */ } /* Set the size of the div element that contains the map */ #map { height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 0; /* Set z-index to 0 as it will be on a layer below the contact form */ } #page { position: fixed; z-index: 1; /* The z-index should be higher than Google Maps */ width: 300px; margin: 60px auto 0; padding: 10px; background: black; height: auto; opacity: .45; /* Set the opacity for a slightly transparent Google Form */ color: white; } .flipbook { height: 100%; transition: margin-left 0.25s ease-out; width: 100%; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .flipbook .page { height: 100%; width: 100%; } .flipbook .page img { max-width: 100%; height: 100%; } footer { margin-top: 100px; } /* Mobile-first responsive improvements for the articles feed */ @media (max-width: 600px) { #articles { padding: 4px 2px; } .article-widget { width: 100%; max-width: 100%; margin: 0 auto 10px; border-radius: 8px; } .article-top-left { top: 6px; left: 6px; font-size: 9px; padding: 2px 5px; } .article-bottom-left { padding: 8px 8px 5px; } .article-bottom-left h4 { font-size: 13px; line-height: 1.2; } } @media (min-width: 601px) { .article-widget { width: 80%; max-width: 900px; } .article-bottom-left h4 { font-size: 15px; } } /* Prevent horizontal scroll and clean up container on small screens */ html, body { overflow-x: hidden; } .container { max-width: 100%; padding-left: 6px; padding-right: 6px; } /* General mobile friendliness */ img { max-width: 100%; height: auto; } /* Pagy pagination for experiences feed (over map background) */ .pagy-wrapper { text-align: center; margin: 20px auto 40px; position: relative; z-index: 2; background: rgba(255,255,255,0.85); padding: 8px; border-radius: 4px; display: inline-block; max-width: 100%; } /* Infinite scroll sentinel */ [data-infinite-scroll-target="sentinel"] { width: 100%; } /* Map page sidebar (Zeemaps / Google Maps style) */ .map-sidebar .place-item img { width: 38px; height: 38px; } /* Loading spinner for infinite scroll */ .infinite-loading { text-align: center; padding: 15px; color: #555; font-size: 14px; display: none; /* hidden by default; JS shows during load */ align-items: center; justify-content: center; gap: 8px; } .infinite-loading .spinner { width: 18px; height: 18px; border: 2px solid #ddd; border-top: 2px solid #3498db; border-radius: 50%; animation: infinite-spin 0.8s linear infinite; } @keyframes infinite-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Make topnav more phone friendly */ @media (max-width: 600px) { .topnav a { padding: 8px 10px; font-size: 14px; } .topnav p.topnav-text { float: none !important; display: inline-block; } .topnav img[height="30"] { width: 24px; height: 24px; } } h1, h2, h3, h4, h5 { word-wrap: break-word; } a, button { touch-action: manipulation; } table, td, th { vertical-align: middle; border: none; } th { border-bottom: 1px solid #DDD; } body { margin: 0; } /* * This is a manifest file that'll be compiled into application.css, which will include all the files * listed below. * * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's * vendor/assets/stylesheets directory can be referenced here using a relative path. * * You're free to add application-wide styles to this file and they'll appear at the bottom of the * compiled file so the styles you add here take precedence over styles defined in any other CSS * files in this directory. Styles in this file should be added after the last require_* statement. * It is generally better to create a new file per style scope. * */ body { background-color: #d2f3fc; background-repeat: no-repeat; background-attachment: fixed; margin:0px; } a {color: 40px; color: #000000 !important;} .navbar { z-index: 1; min-height: 38px; color: #000000 !important; background-color: #FFFFFF !important; box-shadow: 0px 4px 2px -2px rgba(0, 0, 0, 0.15); } .navbar a.brand { font-size: 40px; color: #000000 !important; } .navbar a.brand:hover { color: #000000 !important; background-color: transparent; text-decoration: none; } .button { background-color: #FFFFFF; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; border-radius: 8px; box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.15); } .img-circular { width: 75px; height: 75px; background-size: cover; display: block; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; } .img-rounded { border-radius: 10px; box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.15); text-align: left; } .tip-icon { float: right; width: 80px; height: 80px; background-size: cover; display: block; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; } /* Container holding the image and the text */ .tip-widget { padding: 10px; position: relative; text-align: left; color: white; } /* Bottom left text */ .bottom-left { position: absolute; bottom: 8px; left: 20px; } /* Top left text */ .top-left { position: absolute; top: 20px; left: 20px; } /* Top right text */ .top-right { position: absolute; top: 8px; right: 16px; } /* Bottom right text */ .bottom-right { position: absolute; bottom: 8px; right: 16px; } /* Centered text */ .centered { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* Add a card effect for articles */ .card { background-color: white; padding: 20px; margin-top: 20px; box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.15); } /* #articles container for the feed */ #articles { position: relative; z-index: 1; padding: 8px 4px; box-sizing: border-box; } /* Article Widget: clean responsive card with image + text overlays */ .article-widget { position: relative; width: 80%; max-width: 900px; margin: 0 auto 14px; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); background: #111; /* fallback */ } .article-image { display: block; width: 100%; height: auto; border-radius: 10px; vertical-align: bottom; } /* Category badge - top left */ .article-top-left { position: absolute; top: 8px; left: 8px; z-index: 10; background: rgba(0, 0, 0, 0.75); color: #fff; padding: 3px 7px; border-radius: 4px; font-size: 10px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; white-space: nowrap; max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; text-shadow: none; } .article-top-left h3 { margin: 0; font-size: inherit; } /* Title + location - bottom overlay with gradient */ .article-bottom-left { position: absolute; bottom: 0; left: 0; right: 0; z-index: 10; padding: 10px 10px 7px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.82)); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); } .article-bottom-left h4 { margin: 0; font-size: 14px; line-height: 1.25; font-weight: 500; } /* Home Widget */ .home-widget { position: relative; max-width: 640px; width: 92%; margin: 10px auto; color: white; overflow: hidden; } /* Top left text */ .home-top-left { position: absolute; top: 10px; left: 10px; right: 10px; color: white; text-shadow: 0 1px 3px rgba(0,0,0,0.8); } /* Bottom left text */ .home-bottom-left { position: absolute; bottom: 10px; left: 10px; right: 10px; color: white; text-shadow: 0 1px 3px rgba(0,0,0,0.8); } /* Home Widget */ .mini-widget { padding: 0px; position: relative; text-align: left; color: white; } /* Top left text */ .mini-top-left { position: absolute; top: 10px; left: 20px; color: white; } /* Bottom left text */ .mini-bottom-left { position: absolute; bottom: 10px; left: 20px; } /* Container holding the image and the text */ .photo-widget { position: relative; max-width: 640px; width: 92%; margin: 10px auto; color: white; overflow: hidden; } /* Bottom left text */ .photo-bottom-left { position: absolute; bottom: 10px; left: 10px; right: 10px; color: white; text-shadow: 0 1px 3px rgba(0,0,0,0.8); } .photo-bottom-right { position: absolute; bottom: 10px; left: 10px; right: 10px; color: white; text-shadow: 0 1px 3px rgba(0,0,0,0.8); } /* Top left text */ .photo-top-left { position: absolute; top: 10px; left: 10px; right: 10px; color: white; text-shadow: 0 1px 3px rgba(0,0,0,0.8); } #googlemaps { height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 0; /* Set z-index to 0 as it will be on a layer below the contact form */ } /* Mobile-first responsive improvements for the articles feed */ @media (max-width: 600px) { #articles { padding: 4px 2px; } .article-widget { width: 100%; max-width: 100%; margin: 0 auto 10px; border-radius: 8px; } .article-top-left { top: 6px; left: 6px; font-size: 9px; padding: 2px 5px; } .article-bottom-left { padding: 8px 8px 5px; } .article-bottom-left h4 { font-size: 13px; line-height: 1.2; } } @media (min-width: 601px) { .article-widget { width: 80%; max-width: 900px; } .article-bottom-left h4 { font-size: 15px; } } /* Prevent horizontal scroll and clean up container on small screens */ html, body { overflow-x: hidden; } .container { max-width: 100%; padding-left: 6px; padding-right: 6px; } /* General mobile friendliness */ img { max-width: 100%; height: auto; } /* Set the size of the div element that contains the map */ #map { height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 0; /* Set z-index to 0 as it will be on a layer below the contact form */ } #page { position: fixed; z-index: 1; /* The z-index should be higher than Google Maps */ width: 300px; margin: 60px auto 0; padding: 10px; background: black; height: auto; opacity: .45; /* Set the opacity for a slightly transparent Google Form */ color: white; } footer { margin-top: 100px; } table, td, th { vertical-align: middle; border: none; } th { border-bottom: 1px solid #DDD; } body { margin: 0; }