/* Meridian Galleries frontend */ .mg-gallery-wrap, .mg-gallery-wrap * { box-sizing: border-box !important; } .mg-gallery-wrap { width: 100% !important; max-width: 100% !important; } .mg-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 72px 30px !important; align-items: start !important; } .mg-card { margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } .mg-card-button, .mg-card-button:hover, .mg-card-button:focus, .mg-card-button:active, .mg-card-button:visited { display: block !important; width: 100% !important; min-width: 0 !important; min-height: 0 !important; height: auto !important; text-align: left !important; background: transparent !important; background-color: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; outline: 0 !important; padding: 0 !important; margin: 0 !important; cursor: pointer !important; color: inherit !important; font: inherit !important; line-height: normal !important; text-shadow: none !important; text-transform: none !important; text-decoration: none !important; -webkit-appearance: none !important; appearance: none !important; } .mg-card-button:before, .mg-card-button:after, .mg-card-button:hover:before, .mg-card-button:hover:after, .mg-card-button:focus:before, .mg-card-button:focus:after, .mg-card-button:active:before, .mg-card-button:active:after { display: none !important; content: none !important; background: transparent !important; } .mg-card-button:focus-visible { outline: 3px solid rgba(34, 113, 177, .45) !important; outline-offset: 6px !important; border-radius: 12px !important; } .mg-card-image-wrap { display: block !important; width: 100% !important; aspect-ratio: 16 / 10 !important; overflow: hidden !important; border-radius: 8px !important; background: #f1f3f5 !important; } .mg-card-image-wrap img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; transition: transform .25s ease !important; border: 0 !important; margin: 0 !important; padding: 0 !important; box-shadow: none !important; } .mg-card-button:hover .mg-card-image-wrap img { transform: scale(1.035) !important; } .mg-card-date, .mg-card-button:hover .mg-card-date, .mg-card-button:focus .mg-card-date, .mg-card-button:active .mg-card-date { display: block !important; margin-top: 15px !important; font-size: 13px !important; line-height: 1.4 !important; color: #5f6368 !important; background: transparent !important; text-decoration: none !important; text-transform: none !important; box-shadow: none !important; } .mg-card-title, .mg-card-button:hover .mg-card-title, .mg-card-button:focus .mg-card-title, .mg-card-button:active .mg-card-title { display: block !important; margin-top: 8px !important; color: #34383c !important; background: transparent !important; font-weight: 800 !important; font-size: 18px !important; line-height: 1.25 !important; text-decoration: none !important; text-transform: none !important; box-shadow: none !important; } .mg-empty { padding: 18px !important; background: #f8f9fa !important; border-radius: 8px !important; } /* Real viewport lightbox. JS moves this element to to avoid page-builder/tab clipping. */ .mg-modal, body > .mg-modal { position: fixed !important; left: 0 !important; top: 0 !important; right: 0 !important; bottom: 0 !important; width: 100vw !important; height: 100vh !important; max-width: none !important; max-height: none !important; z-index: 2147483000 !important; display: none !important; align-items: center !important; justify-content: center !important; padding: 36px 92px 58px !important; margin: 0 !important; overflow: hidden !important; background: transparent !important; border: 0 !important; box-shadow: none !important; box-sizing: border-box !important; } .mg-modal.is-open, body > .mg-modal.is-open { display: flex !important; } .mg-modal-backdrop { position: fixed !important; left: 0 !important; top: 0 !important; right: 0 !important; bottom: 0 !important; width: 100vw !important; height: 100vh !important; background: rgba(0, 0, 0, .86) !important; z-index: 1 !important; } .mg-modal-panel { position: relative !important; z-index: 2 !important; width: auto !important; height: auto !important; max-width: calc(100vw - 184px) !important; max-height: calc(100vh - 94px) !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; } .mg-modal-close, .mg-modal-close:hover, .mg-modal-close:focus, .mg-modal-close:active { position: fixed !important; top: 20px !important; right: 28px !important; width: 48px !important; height: 48px !important; min-width: 48px !important; min-height: 48px !important; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; background-color: transparent !important; background-image: none !important; color: #fff !important; box-shadow: none !important; font-size: 58px !important; line-height: 42px !important; font-weight: 300 !important; cursor: pointer !important; z-index: 2147483002 !important; text-align: center !important; text-shadow: 0 2px 12px rgba(0, 0, 0, .75) !important; text-transform: none !important; -webkit-appearance: none !important; appearance: none !important; } .mg-modal-close:before, .mg-modal-close:after, .mg-modal-nav:before, .mg-modal-nav:after { display: none !important; content: none !important; } .mg-modal-close:hover { opacity: .82 !important; } .mg-modal-head { order: 2 !important; width: 100% !important; padding: 10px 0 0 !important; display: flex !important; justify-content: space-between !important; gap: 20px !important; align-items: flex-start !important; color: #fff !important; background: transparent !important; } .mg-modal-title { margin: 0 !important; padding: 0 !important; font-size: 15px !important; line-height: 1.35 !important; color: #fff !important; font-weight: 700 !important; text-shadow: 0 2px 10px rgba(0, 0, 0, .55) !important; } .mg-modal-date { margin: 4px 0 0 !important; padding: 0 !important; color: rgba(255, 255, 255, .78) !important; font-size: 13px !important; line-height: 1.3 !important; } .mg-modal-counter { color: rgba(255, 255, 255, .78) !important; font-size: 13px !important; line-height: 1.3 !important; padding-top: 2px !important; white-space: nowrap !important; } .mg-modal-stage { order: 1 !important; position: relative !important; background: transparent !important; display: flex !important; align-items: center !important; justify-content: center !important; width: auto !important; height: auto !important; max-width: 100% !important; max-height: 100% !important; overflow: visible !important; margin: 0 !important; padding: 0 !important; } .mg-modal-img { display: block !important; width: auto !important; height: auto !important; max-width: calc(100vw - 184px) !important; max-height: calc(100vh - 150px) !important; object-fit: contain !important; background: #111 !important; border: 4px solid #fff !important; box-sizing: border-box !important; box-shadow: 0 18px 70px rgba(0, 0, 0, .72) !important; margin: 0 !important; padding: 0 !important; border-radius: 2px !important; } .mg-modal-nav, .mg-modal-nav:hover, .mg-modal-nav:focus, .mg-modal-nav:active { position: fixed !important; top: 50% !important; transform: translateY(-50%) !important; width: 58px !important; height: 76px !important; min-width: 58px !important; min-height: 76px !important; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 8px !important; background: rgba(255, 255, 255, .86) !important; background-image: none !important; color: #111 !important; box-shadow: 0 8px 24px rgba(0, 0, 0, .25) !important; font-size: 56px !important; line-height: 66px !important; font-weight: 700 !important; cursor: pointer !important; z-index: 2147483002 !important; text-align: center !important; text-shadow: none !important; text-transform: none !important; -webkit-appearance: none !important; appearance: none !important; } .mg-modal-nav:hover { background: #fff !important; } .mg-prev { left: 28px !important; } .mg-next { right: 28px !important; } .mg-modal.is-single .mg-modal-nav { display: none !important; } .mg-modal-thumbs { display: none !important; } html.mg-modal-open, body.mg-modal-open { overflow: hidden !important; } @media (max-width: 1100px) { .mg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 56px 24px !important; } } @media (max-width: 760px) { .mg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 38px 18px !important; } .mg-card-title, .mg-card-button:hover .mg-card-title, .mg-card-button:focus .mg-card-title, .mg-card-button:active .mg-card-title { font-size: 16px !important; } .mg-modal, body > .mg-modal { padding: 18px 54px 48px !important; } .mg-modal-panel, .mg-modal-img { max-width: calc(100vw - 108px) !important; } .mg-modal-img { max-height: calc(100vh - 132px) !important; border-width: 3px !important; } .mg-modal-close, .mg-modal-close:hover, .mg-modal-close:focus, .mg-modal-close:active { top: 8px !important; right: 10px !important; font-size: 44px !important; width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; } .mg-modal-nav, .mg-modal-nav:hover, .mg-modal-nav:focus, .mg-modal-nav:active { width: 38px !important; height: 56px !important; min-width: 38px !important; min-height: 56px !important; font-size: 38px !important; line-height: 50px !important; } .mg-prev { left: 8px !important; } .mg-next { right: 8px !important; } .mg-modal-title { font-size: 14px !important; } } @media (max-width: 480px) { .mg-grid { grid-template-columns: 1fr !important; } .mg-card-image-wrap { aspect-ratio: 16 / 10 !important; } }