/* ====================================================================================================================================================== Gallery ====================================================================================================================================================== */ #top div .avia-gallery{ overflow: hidden; padding-bottom: 2px; clear: both; } #top div .avia-gallery img{ float:left; border-style: solid; border-width: 1px; padding: 7px; width: 100%; border-radius: 0; } #top div .avia-gallery .avia-gallery-big{ display: block; overflow: hidden; padding: 7px; margin-bottom: -1px; border-top-left-radius: 2px; border-top-right-radius: 2px; border-style: solid; border-width: 1px; } #top div .avia-gallery .avia-gallery-big-inner{ display: block; overflow: hidden; height: 100%; } #top div .avia-gallery .avia-gallery-big img{ padding: 0; border: none; } #top .avia-gallery .avia-gallery-thumb a{ width: 20%; opacity: 1; } #top #wrap_all .avia-gallery .avia-gallery-thumb a{ display: inline-block; vertical-align: top; } #top .avia-gallery .avia-gallery-thumb a:hover{ opacity: 0.5; } #top .avia-gallery .avia-gallery-caption{ display: none; } #top div .avia-gallery .avia-gallery-big-no-crop-thumb{ text-align: center; } #top div .avia-gallery .avia-gallery-big-no-crop-thumb img{ clear: both; float: none; text-align: center; } .avia-gallery .big-prev-fake{ display: none; } /*gallery animation*/ .avia_transform .avia-gallery-animate .avia-gallery-thumb img{ opacity: 0.1; transform: scale(0.5); } .avia_transform .avia-gallery-animate .avia-gallery-thumb img.avia_start_animation{ animation: avia_appear 0.9s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275); /* IE 10+ */ opacity: 1; transform: scale(1); } .avia-gallery-animate .av-hover-grow{ overflow: hidden; } .avia-gallery-animate .av-hover-grow img{ transition: all 1.7s cubic-bezier(0.230, 1.000, 0.320, 1.000); } .avia-gallery-animate .av-hover-grow:hover img { transform: scale(1.1); } /*.av-hide-gallery-thumbs .avia-gallery-thumb{display:none;} removed 4.8.4.1 */ #top #av-admin-preview .avia-gallery .avia-gallery-big-inner{ height:auto; } /* Fix for Chrome https://kriesi.at/support/topic/gallery-thumbnail-layout-issue-on-chromium-based-browsers/ */ .avia-chrome .avia-gallery-thumb{ display: flex; flex-direction: row; flex-wrap: wrap; } /* @since 4.8.4.1 moved see https://kriesi.at/support/topic/gallery-light-box-not-working/#post-1312261 */ .av-hide-gallery-thumbs .avia-gallery-thumb{ display: none; } /* @since 7.1.2 to fix https://kriesi.at/support/topic/gallery-are-far-out/ */ .avia-gallery-big-wrapper { position: relative; } /* @since 5.5 support for slideshow arrows */ .avia-gallery.av-slideshow-ui .avia-slideshow-arrows{ position: absolute; z-index: 310; /* above lightbox image overlay 300 */ width: 100%; margin: 0; top: 50%; left: 0; transform: translateY(-50%); } #top .avia-gallery.av-slideshow-ui .avia-slideshow-arrows a{ margin: 0; } .avia-gallery.av-slideshow-ui:not(.av-control-minimal) .avia-slideshow-arrows a{ border-radius: 50%; } #top .avia-gallery.av-slideshow-ui .avia-slideshow-arrows .av-gallery-prev{ margin-left: 7px; } #top .avia-gallery.av-slideshow-ui .avia-slideshow-arrows .av-gallery-next{ margin-right: 7px; } #av-admin-preview .avia-gallery.av-slideshow-ui .avia-slideshow-arrows{ top: 27px; } #av-admin-preview .avia-gallery.av-slideshow-ui .avia-slideshow-arrows .avia-svg-icon svg:first-child{ margin-top: 18px; } #av-admin-preview .avia-gallery.av-slideshow-ui .avia-slideshow-arrows .av-gallery-prev{ margin-left: 27px; } #av-admin-preview .avia-gallery.av-slideshow-ui .avia-slideshow-arrows .av-gallery-next{ margin-right: 27px; } @media only screen and (max-width: 767px) { .responsive .avia-gallery-thumb img{ padding: 3px; } } /* ====================================================================================================================================================== Plain frame style — no border, no padding, 2px gap ====================================================================================================================================================== */ #top div .avia-gallery.avia-gallery-plain img{ padding: 0; border: none; } #top div .avia-gallery.avia-gallery-plain .avia-gallery-big{ padding: 0; border: none; margin-bottom: 2px; } /* ====================================================================================================================================================== Mosaic layout — CSS Grid, every 3rd item (nth-child 3n+1) spans 2 columns. Repeats infinitely. Natural image height — no forced aspect ratio, images keep their proportions. ====================================================================================================================================================== */ #top div .avia-gallery.avia-gallery-mosaic .avia-gallery-thumb{ display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-flow: dense; gap: 4px; } #top div .avia-gallery.avia-gallery-plain.avia-gallery-mosaic .avia-gallery-thumb{ gap: 2px; } #top div .avia-gallery.avia-gallery-mosaic .avia-gallery-thumb a{ width: 100%; min-width: 0; overflow: hidden; display: block; } #top div .avia-gallery.avia-gallery-mosaic .avia-gallery-thumb a:nth-child(3n+1){ grid-column: span 2; } #top div .avia-gallery.avia-gallery-mosaic .avia-gallery-thumb a img{ float: none; width: 100%; height: auto; object-fit: cover; aspect-ratio: 1/1; padding: 0; border: none; display: block; } #top div .avia-gallery.avia-gallery-mosaic .avia-gallery-thumb a:nth-child(3n+1) img{ aspect-ratio: 2/1; } #top div .avia-gallery.avia-gallery-mosaic.av-orient-portrait .avia-gallery-thumb a img{ aspect-ratio: 3/4; } #top div .avia-gallery.avia-gallery-mosaic.av-orient-portrait .avia-gallery-thumb a:nth-child(3n+1){ grid-column: auto; } #top div .avia-gallery.avia-gallery-mosaic.av-orient-portrait .avia-gallery-thumb a:first-child{ grid-column: span 2; grid-row: span 2; } #top div .avia-gallery.avia-gallery-mosaic.av-orient-portrait .avia-gallery-thumb a:first-child img{ aspect-ratio: 3/4; height: 100%; } /* ====================================================================================================================================================== Filmstrip layout — single horizontal scrollable row, fixed height, scroll-snap. Uses thumb_size aspect ratio via object-fit cover. ====================================================================================================================================================== */ #top div .avia-gallery.avia-gallery-filmstrip .avia-gallery-thumb{ display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 4px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; cursor: grab; } #top div .avia-gallery.avia-gallery-plain.avia-gallery-filmstrip .avia-gallery-thumb{ gap: 2px; } #top div .avia-gallery.avia-gallery-filmstrip .avia-gallery-thumb::-webkit-scrollbar{ display: none; } #top div .avia-gallery.avia-gallery-filmstrip .avia-gallery-thumb.av-dragging{ cursor: grabbing; scroll-snap-type: none; } #top div .avia-gallery.avia-gallery-filmstrip .avia-gallery-thumb a{ flex: 0 0 auto; width: 280px; height: 210px; scroll-snap-align: start; overflow: hidden; display: block; } #top div .avia-gallery.avia-gallery-filmstrip.av-orient-portrait .avia-gallery-thumb a{ width: 270px; height: 360px; } #top div .avia-gallery.avia-gallery-filmstrip .avia-gallery-thumb a img{ float: none; width: 100%; height: 100%; object-fit: cover; padding: 0; border: none; display: block; } @media only screen and (max-width: 767px) { #top div .avia-gallery.avia-gallery-filmstrip .avia-gallery-thumb a{ width: 200px; height: 150px; } #top div .avia-gallery.avia-gallery-filmstrip.av-orient-portrait .avia-gallery-thumb a{ width: 190px; height: 253px; } } /* ====================================================================================================================================================== Editorial layout — alternating full-width and two-column rows. nth-child(3n+1) spans all columns. Natural image height — full-width images use wide crop, halves use their natural ratio. ====================================================================================================================================================== */ #top div .avia-gallery.avia-gallery-editorial .avia-gallery-thumb{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; } #top div .avia-gallery.avia-gallery-plain.avia-gallery-editorial .avia-gallery-thumb{ gap: 2px; } #top div .avia-gallery.avia-gallery-editorial .avia-gallery-thumb a{ width: 100%; display: block; overflow: hidden; } #top div .avia-gallery.avia-gallery-editorial .avia-gallery-thumb a:nth-child(3n+1){ grid-column: span 2; } #top div .avia-gallery.avia-gallery-editorial .avia-gallery-thumb a img{ float: none; width: 100%; height: auto; object-fit: cover; padding: 0; border: none; display: block; } #top div .avia-gallery.avia-gallery-editorial .avia-gallery-thumb a:nth-child(3n+1) img{ aspect-ratio: 21/9; } #top div .avia-gallery.avia-gallery-editorial .avia-gallery-thumb a:not(:nth-child(3n+1)) img{ aspect-ratio: 4/3; } #top div .avia-gallery.avia-gallery-editorial.av-orient-portrait .avia-gallery-thumb a:not(:nth-child(3n+1)) img{ aspect-ratio: 3/4; } #top div .avia-gallery.avia-gallery-editorial.av-orient-portrait .avia-gallery-thumb a:nth-child(3n+1) img{ aspect-ratio: 16/9; } /* ====================================================================================================================================================== Spotlight layout — first image fills left 60%, images 2-4 stack vertically on right 40%. Images 5+ fall into an overflow thumbnail strip below. Uses existing big_prev hover swap JS. ====================================================================================================================================================== */ #top div .avia-gallery.avia-gallery-spotlight{ display: flex; flex-direction: column; gap: 4px; } #top div .avia-gallery.avia-gallery-plain.avia-gallery-spotlight{ gap: 2px; } #top div .avia-gallery.avia-gallery-spotlight .av-spotlight-main-wrap{ display: grid; grid-template-columns: 3fr 2fr; align-items: stretch; gap: 4px; } #top div .avia-gallery.avia-gallery-plain.avia-gallery-spotlight .av-spotlight-main-wrap{ gap: 2px; } #top div .avia-gallery.avia-gallery-spotlight .av-spotlight-main{ overflow: hidden; display: block; min-height: 0; } #top div .avia-gallery.avia-gallery-spotlight .av-spotlight-main .avia-gallery-big{ display: block; aspect-ratio: 2/3; } #top div .avia-gallery.avia-gallery-spotlight .av-spotlight-main .avia-gallery-big-inner{ height: 100%; display: block; } #top div .avia-gallery.avia-gallery-spotlight .av-spotlight-main img{ float: none; width: 100%; height: 100%; object-fit: cover; padding: 0; border: none; display: block; } #top div .avia-gallery.avia-gallery-spotlight .av-spotlight-stack{ display: flex; flex-direction: column; gap: 4px; height: 0; min-height: 100%; overflow: hidden; } #top div .avia-gallery.avia-gallery-plain.avia-gallery-spotlight .av-spotlight-stack{ gap: 2px; } #top div .avia-gallery.avia-gallery-spotlight .av-spotlight-stack a{ flex: 1; min-height: 0; overflow: hidden; display: block; width: 100%; } #top div .avia-gallery.avia-gallery-spotlight .av-spotlight-stack a img{ float: none; width: 100%; height: 100%; object-fit: cover; padding: 0; border: none; display: block; } #top div .avia-gallery.avia-gallery-spotlight .av-spotlight-stack a:hover{ opacity: 0.8; } #top div .avia-gallery.avia-gallery-spotlight .avia-gallery-thumb{ display: flex; flex-wrap: wrap; gap: 4px; } #top div .avia-gallery.avia-gallery-plain.avia-gallery-spotlight .avia-gallery-thumb{ gap: 2px; } #top div .avia-gallery.avia-gallery-spotlight .avia-gallery-thumb a{ flex: 0 0 auto; width: calc(20% - 4px); overflow: hidden; display: block; } #top div .avia-gallery.avia-gallery-plain.avia-gallery-spotlight .avia-gallery-thumb a{ width: calc(20% - 2px); } #top div .avia-gallery.avia-gallery-spotlight .avia-gallery-thumb a img{ float: none; width: 100%; height: 100%; object-fit: cover; padding: 0; border: none; display: block; } @media only screen and (max-width: 767px) { #top div .avia-gallery.avia-gallery-spotlight .av-spotlight-main-wrap{ grid-template-columns: 1fr; } #top div .avia-gallery.avia-gallery-spotlight .av-spotlight-stack{ flex-direction: row; overflow-x: auto; } #top div .avia-gallery.avia-gallery-spotlight .av-spotlight-stack a{ flex: 0 0 120px; height: 90px; } }