/* ===== Scoped gallery styles (won't leak to the rest of the page) ===== */ .tg-gallery { /* local font for the gallery only */ font-family: "Source Sans Pro", Arial, sans-serif; /* center the gallery block on the page without touching */ display: block; max-width: 100%; margin: 0 0 20px 0; } .tg-gallery .wrap { width: 800px; height: 600px; background: #fff; border: 0.1px solid #39497c; border-radius: 10px; padding: 0 px 12px; box-sizing: border-box; display: flex; flex-direction: column; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06); position: relative; margin: 0 auto; } /* Static title (scoped) */ .tg-gallery .tg-gallery__title { text-align: center; margin: 12px 0 0; color: #39497c; font-weight: 600; font-size: 28px; letter-spacing: 0.5px; text-transform: capitalize; } .tg-gallery .inline-gallery-container { flex: 1; width: 100%; height: 100%; margin-top: 6px; } /* LightGallery custom theme (scoped) */ .tg-gallery .lg-outer, .tg-gallery .lg-inner, .tg-gallery .lg-item, .tg-gallery .lg-img-wrap { background: #fff !important; } .tg-gallery .lg-thumb-outer { background: #f9f9f9 !important; border-top: 1px solid #ddd !important; } .tg-gallery .lg-thumb-item.lg-current, .tg-gallery .lg-thumb-item.active, .tg-gallery .lg-thumb-item:hover, .tg-gallery .lg-thumb-item:focus { border-color: #ff7a2d !important; box-shadow: 0 0 6px rgba(255, 122, 45, 0.5) !important; } .tg-gallery .lg-thumb-item { transition: border-color 0.25s ease, box-shadow 0.25s ease; } .tg-gallery .lg-toolbar, .tg-gallery .lg-counter { display: none !important; } .tg-gallery .lg-prev, .tg-gallery .lg-next { background: rgba(255, 255, 255, 0.85) !important; color: #333 !important; border-radius: 50% !important; border: 1px solid #ccc !important; } .tg-gallery .lg-prev:hover, .tg-gallery .lg-next:hover { background: #fff !important; color: #ff7a2d !important; border-color: #ff7a2d !important; } .tg-gallery .lg-backdrop { background: transparent !important; } /* Caption styling for each image (scoped) */ .tg-gallery .lg-sub-html { position: absolute !important; top: 34px !important; left: 0; right: 0; text-align: center; color: #ff7a2d !important; background: transparent !important; pointer-events: none; z-index: 99; transform: translateY(-40px); text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15), 0 0 10px rgba(255, 122, 45, 0.25); transition: transform 0.25s ease, opacity 0.25s ease, text-shadow 0.25s ease; } .tg-gallery .lg-sub-html h4 { margin: 0; color: inherit !important; font-weight: 600; font-size: 24px; } /* Make it responsive: scale wrap down on small screens */ @media (max-width: 840px) { .tg-gallery .wrap { width: calc(100% - 24px); height: 480px; } } @media (max-width: 520px) { .tg-gallery .wrap { height: 360px; } .tg-gallery #gallery-title { font-size: 20px; } .tg-gallery .lg-sub-html h4 { font-size: 18px; } }