/* MOD Text u. Bilder */ /* ############################################################################################################################################################################## */ .sits_textpic{display:block; width:100%;} .sits_textpic.nowrap{display:flex;} .sits_textpic.nowrap.horizontal_right{flex-direction:row-reverse;} @media screen and (max-width:599px){ .sits_textpic.nowrap{display:block;} } /* ############################################################################################################################################################################## */ /* ENDE -> MOD Text u. Bilder */ /* MOD Bildergalerien (Alle: Image/TextPic/Media) */ /* ############################################################################################################################################################################## */ /* Struktur */ /* ============================================================================================================ */ /* Above / Below- */ /* -------------------------------------------------------------------- */ .sits_imgGallery{display:flex; margin:0 -10px -20px -10px; flex-wrap:wrap; } .sits_imgGallery[data-count="6"], .sits_imgGallery[data-count="7"], .sits_imgGallery[data-count="8"], .vertical_intext .sits_imgGallery{margin:0 -5px -10px -5px;} .horizontal_left .sits_imgGallery, .ce-left .sits_imgGallery{text-align:left; justify-content:flex-start;} .horizontal_center .sits_imgGallery, .ce-center .sits_imgGallery{text-align:center; justify-content: center;} .horizontal_right .sits_imgGallery, .ce-right .sits_imgGallery{ justify-content:flex-end;} .vertical_below .sits_imgGallery{padding-top:10px;margin-bottom: -20px;} /* -------------------------------------------------------------------- */ /* Intext (float) */ /* -------------------------------------------------------------------- */ .vertical_intext::after{content:''; display:block; clear:both;} .vertical_intext > .sits_imgGallery{float:left;max-width:50%;padding-bottom:2px;margin:0 -5px -10px -5px;} .vertical_intext.horizontal_right > .sits_imgGallery{float:right;padding-left: 20px;} .vertical_intext.horizontal_left > .sits_imgGallery{padding-right: 20px;} .vertical_intext h1, .vertical_intext h2, .vertical_intext h3, .vertical_intext h4, .vertical_intext h5, .vertical_intext h6{margin-top:0;} .vertical_intext ul{display:flow-root;} /* -------------------------------------------------------------------- */ /* Nowrap (flex) */ /* -------------------------------------------------------------------- */ .vertical_intext.nowrap > .sits_imgGallery{flex:0 0 auto; float:none; padding-bottom:0;} .vertical_intext.nowrap > .sits_textpicBodytext{flex:1 1 auto;} .vertical_intext.nowrap > .sits_imgGallery .sits_imgGalleryInner > div{display:flex; width:100%; flex-wrap:wrap;} /* -------------------------------------------------------------------- */ /* ============================================================================================================ */ /* ENDE -> Struktur */ /* Items */ /* ============================================================================================================ */ /* Normale Items */ /* -------------------------------------------------------------------- */ .sits_imgGallery[data-count="1"]{display:block; margin:0;} .sits_imgGalleryItem{flex:0 0 auto;margin:0 10px 20px 10px;transition:all 300ms;max-width: 100%; width:100%; overflow:hidden;} .sits_imgGallery[data-count="1"] .sits_imgGalleryItem{margin:0; display:block;} .ce-image .sits_imgGallery[data-count="1"] .sits_imgGalleryItem{margin:0;} .sits_imgGallery[data-count="2"] .sits_imgGalleryItem{max-width:calc(50% - 20px);} .sits_imgGallery[data-count="3"] .sits_imgGalleryItem{max-width:calc(33.333% - 20px);} .sits_imgGallery[data-count="4"] .sits_imgGalleryItem{max-width:calc(25% - 20px);} .sits_imgGallery[data-count="5"] .sits_imgGalleryItem{max-width:calc(20% - 20px);} .sits_imgGallery[data-count="6"] .sits_imgGalleryItem{max-width:calc(16.666% - 10px); margin:0 5px 10px 5px;} .sits_imgGallery[data-count="7"] .sits_imgGalleryItem{max-width:calc(14.285% - 10px); margin:0 5px 10px 5px;} .sits_imgGallery[data-count="8"] .sits_imgGalleryItem{max-width:calc(12.5% - 10px); margin:0 5px 10px 5px;} /* -------------------------------------------------------------------- */ /* Intext-items */ /* -------------------------------------------------------------------- */ .vertical_intext > .sits_imgGallery .sits_imgGalleryItem{margin:0 5px 10px 5px;} .vertical_intext > .sits_imgGallery[data-count="1"] .sits_imgGalleryItem{margin: 0;display:block;} .vertical_intext > .sits_imgGallery[data-count="2"] .sits_imgGalleryItem{max-width:calc(50% - 10px);} .vertical_intext > .sits_imgGallery[data-count="3"] .sits_imgGalleryItem{max-width:calc(33.333% - 10px);} .vertical_intext > .sits_imgGallery[data-count="4"] .sits_imgGalleryItem, .vertical_intext > .sits_imgGallery[data-count="5"] .sits_imgGalleryItem, .vertical_intext > .sits_imgGallery[data-count="6"] .sits_imgGalleryItem, .vertical_intext > .sits_imgGallery[data-count="7"] .sits_imgGalleryItem, .vertical_intext > .sits_imgGallery[data-count="8"] .sits_imgGalleryItem{max-width:calc(25% - 10px);} /* -------------------------------------------------------------------- */ /* Zoom (Enlarge in Click) und Border */ /* -------------------------------------------------------------------- */ .imgZoom .sits_imgGalleryItem figure{transition:all 300ms;} .sits_imgGallery.imgZoom a.lightbox{position:relative;display:inline-block; transform:none;} .sits_imgGallery.imgZoom a.lightbox .sits_galleryItemOverlay{position:absolute; top:10px; left:10px; right:10px; bottom:10px; display:flex; align-items: center; justify-content: center; pointer-events: none; } .sits_imgGallery.imgZoom a.lightbox .sits_galleryItemOverlay::after{content:''; position:absolute; top:0; left:0; width:100%; height:100%; background: #2d87df; mix-blend-mode: multiply; transform:scale(.2);opacity:0;transition:all 350ms ease-out;} .sits_imgGallery.imgZoom a.lightbox .sits_galleryItemOverlay > span{z-index:1; position:relative; transform:scale(.2);opacity:0;transition:all 350ms ease-out;} .sits_imgGallery.imgZoom a.lightbox .sits_galleryItemOverlay > span::before{content:''; width:20px; height:4px; background:#fff; border-radius:2px; display:block;} .sits_imgGallery.imgZoom a.lightbox .sits_galleryItemOverlay > span::after{content:''; width:20px; height:4px; background:#fff; border-radius:2px; display:block; transform:translateY(-50%) translateX(-50%) rotate(90deg); position:absolute; left:50%; top:50%;} .sits_imgGallery.imgZoom a.lightbox:hover .sits_galleryItemOverlay > span, .sits_imgGallery.imgZoom a.lightbox:hover .sits_galleryItemOverlay::after{transform:unset; opacity:1;} .imgBorder .sits_imgGalleryItem{display:flex; justify-content:center; align-items:center; } .imgBorder .sits_imgGalleryItem a{border:1px solid #ccc;} .imgBorder .sits_imgGalleryItem > figure{flex:0 0 100%;} /* -------------------------------------------------------------------- */ .sits_imgGallery figcaption{font-size:14px; padding-top:5px;} /* ============================================================================================================ */ /* ENDE -> Items */ @media screen and (max-width:979px){ /* Normale Items */ /* -------------------------------------------------------------------- */ .sits_imgGallery[data-count="7"] .sits_imgGalleryItem, .sits_imgGallery[data-count="8"] .sits_imgGalleryItem{max-width:calc(16.666% - 10px);} /* -------------------------------------------------------------------- */ /* Intext-items */ /* -------------------------------------------------------------------- */ .vertical_intext > .sits_imgGallery[data-count="4"] .sits_imgGalleryItem, .vertical_intext > .sits_imgGallery[data-count="5"] .sits_imgGalleryItem, .vertical_intext > .sits_imgGallery[data-count="6"] .sits_imgGalleryItem, .vertical_intext > .sits_imgGallery[data-count="7"] .sits_imgGalleryItem, .vertical_intext > .sits_imgGallery[data-count="8"] .sits_imgGalleryItem{max-width:calc(33.333% - 10px);} /* -------------------------------------------------------------------- */ } @media screen and (max-width:859px){ /* Normale Items */ /* -------------------------------------------------------------------- */ .sits_imgGallery{margin:0 -5px -10px -5px; padding-bottom:10px;} .sits_imgGalleryItem{margin:0 5px 10px 5px;} .sits_imgGallery[data-count="2"] .sits_imgGalleryItem{max-width:calc(50% - 10px);} .sits_imgGallery[data-count="3"] .sits_imgGalleryItem{max-width:calc(33.333% - 10px);} .sits_imgGallery[data-count="4"] .sits_imgGalleryItem{max-width:calc(25% - 10px);} .sits_imgGallery[data-count="5"] .sits_imgGalleryItem{max-width:calc(20% - 10px);} .sits_imgGallery[data-count="6"] .sits_imgGalleryItem, .sits_imgGallery[data-count="7"] .sits_imgGalleryItem, .sits_imgGallery[data-count="8"] .sits_imgGalleryItem{max-width:calc(16.666% - 10px);} /* -------------------------------------------------------------------- */ /* Intext-items */ /* -------------------------------------------------------------------- */ .vertical_intext > .sits_imgGallery[data-count="4"] .sits_imgGalleryItem, .vertical_intext > .sits_imgGallery[data-count="5"] .sits_imgGalleryItem, .vertical_intext > .sits_imgGallery[data-count="6"] .sits_imgGalleryItem, .vertical_intext > .sits_imgGallery[data-count="7"] .sits_imgGalleryItem, .vertical_intext > .sits_imgGallery[data-count="8"] .sits_imgGalleryItem{max-width:calc(33.333% - 10px);} /* -------------------------------------------------------------------- */ } @media screen and (max-width:799px){ .vertical_above .sits_imgGallery{padding-bottom:10px;} .vertical_below .sits_imgGallery{padding-top:10px;} /* Normale Items */ /* -------------------------------------------------------------------- */ .sits_imgGallery[data-count="6"] .sits_imgGalleryItem, .sits_imgGallery[data-count="7"] .sits_imgGalleryItem, .sits_imgGallery[data-count="8"] .sits_imgGalleryItem{max-width:calc(20% - 10px);} /* -------------------------------------------------------------------- */ /* Intext-items */ /* -------------------------------------------------------------------- */ .vertical_intext > .sits_imgGallery{margin: 0 -3px -6px -3px;} .vertical_intext.horizontal_right > .sits_imgGallery{padding-left: 10px;} .vertical_intext.horizontal_left > .sits_imgGallery{padding-right: 10px;} .vertical_intext > .sits_imgGallery .sits_imgGalleryItem{margin:0 3px 6px 3px;} .vertical_intext > .sits_imgGallery[data-count="2"] .sits_imgGalleryItem, .vertical_intext > .sits_imgGallery[data-count="3"] .sits_imgGalleryItem, .vertical_intext > .sits_imgGallery[data-count="4"] .sits_imgGalleryItem, .vertical_intext > .sits_imgGallery[data-count="5"] .sits_imgGalleryItem, .vertical_intext > .sits_imgGallery[data-count="6"] .sits_imgGalleryItem, .vertical_intext > .sits_imgGallery[data-count="7"] .sits_imgGalleryItem, .vertical_intext > .sits_imgGallery[data-count="8"] .sits_imgGalleryItem{max-width:calc(50% - 6px);} /* -------------------------------------------------------------------- */ } @media screen and (max-width:699px) { .sits_imgGallery figcaption {font-size: 13px;padding-top: 3px;} /* Normale Items */ /* -------------------------------------------------------------------- */ .sits_imgGallery {margin: 0 -3px -6px -3px;} .sits_imgGalleryItem {margin: 0 3px 6px 3px;} .sits_imgGallery[data-count="2"] .sits_imgGalleryItem {max-width: calc(50% - 6px);} .sits_imgGallery[data-count="3"] .sits_imgGalleryItem {max-width: calc(33.333% - 6px);} .sits_imgGallery[data-count="4"] .sits_imgGalleryItem, .sits_imgGallery[data-count="5"] .sits_imgGalleryItem, .sits_imgGallery[data-count="6"] .sits_imgGalleryItem, .sits_imgGallery[data-count="7"] .sits_imgGalleryItem, .sits_imgGallery[data-count="8"] .sits_imgGalleryItem {max-width: calc(25% - 6px);} /* -------------------------------------------------------------------- */ /* Intext-items */ /* -------------------------------------------------------------------- */ .sits_textpic.nowrap {display: block;} .vertical_intext.horizontal_left > .sits_imgGallery, .vertical_intext.horizontal_right > .sits_imgGallery, .vertical_intext.horizontal_left > .sits_textpicBodytext, .vertical_intext.horizontal_right > .sits_textpicBodytext {padding-left: 0;padding-right: 0;max-width: unset; float:none;} .vertical_intext.horizontal_left > .sits_textpicBodytext, .vertical_intext.horizontal_right > .sits_textpicBodytext{padding-top:20px;} .vertical_intext > .sits_imgGallery[data-count="3"] .sits_imgGalleryItem {max-width: calc(33.333% - 6px);} .vertical_intext > .sits_imgGallery[data-count="4"] .sits_imgGalleryItem, .vertical_intext > .sits_imgGallery[data-count="5"] .sits_imgGalleryItem, .vertical_intext > .sits_imgGallery[data-count="6"] .sits_imgGalleryItem, .vertical_intext > .sits_imgGallery[data-count="7"] .sits_imgGalleryItem, .vertical_intext > .sits_imgGallery[data-count="8"] .sits_imgGalleryItem {max-width: calc(25% - 6px);} /* -------------------------------------------------------------------- */ } @media screen and (max-width:599px){ .sits_imgGallery figcaption{font-size:12px;} /* Normale Items */ /* -------------------------------------------------------------------- */ .sits_imgGallery[data-count="3"] .sits_imgGalleryItem, .sits_imgGallery[data-count="4"] .sits_imgGalleryItem, .sits_imgGallery[data-count="5"] .sits_imgGalleryItem, .sits_imgGallery[data-count="6"] .sits_imgGalleryItem, .sits_imgGallery[data-count="7"] .sits_imgGalleryItem, .sits_imgGallery[data-count="8"] .sits_imgGalleryItem{max-width:calc(33.333% - 6px);} /* -------------------------------------------------------------------- */ /* Intext-items */ /* -------------------------------------------------------------------- */ .vertical_intext > .sits_imgGallery[data-count="3"] .sits_imgGalleryItem, .vertical_intext > .sits_imgGallery[data-count="4"] .sits_imgGalleryItem, .vertical_intext > .sits_imgGallery[data-count="5"] .sits_imgGalleryItem, .vertical_intext > .sits_imgGallery[data-count="6"] .sits_imgGalleryItem, .vertical_intext > .sits_imgGallery[data-count="7"] .sits_imgGalleryItem, .vertical_intext > .sits_imgGallery[data-count="8"] .sits_imgGalleryItem{max-width:calc(33.333% - 6px);} /* -------------------------------------------------------------------- */ } @media screen and (max-width:499px){ /* Normale Items */ /* -------------------------------------------------------------------- */ .sits_imgGallery[data-count="3"] .sits_imgGalleryItem, .sits_imgGallery[data-count="4"] .sits_imgGalleryItem, .sits_imgGallery[data-count="5"] .sits_imgGalleryItem, .sits_imgGallery[data-count="6"] .sits_imgGalleryItem, .sits_imgGallery[data-count="7"] .sits_imgGalleryItem, .sits_imgGallery[data-count="8"] .sits_imgGalleryItem{max-width:calc(50% - 6px);} /* -------------------------------------------------------------------- */ /* Intext-items */ /* -------------------------------------------------------------------- */ .vertical_intext > .sits_imgGallery[data-count="3"] .sits_imgGalleryItem, .vertical_intext > .sits_imgGallery[data-count="4"] .sits_imgGalleryItem, .vertical_intext > .sits_imgGallery[data-count="5"] .sits_imgGalleryItem, .vertical_intext > .sits_imgGallery[data-count="6"] .sits_imgGalleryItem, .vertical_intext > .sits_imgGallery[data-count="7"] .sits_imgGalleryItem, .vertical_intext > .sits_imgGallery[data-count="8"] .sits_imgGalleryItem{max-width:calc(50% - 6px);} /* -------------------------------------------------------------------- */ } @media screen and (max-width:399px){ /* Normale Items */ /* -------------------------------------------------------------------- */ .sits_imgGallery[data-count="2"] .sits_imgGalleryItem, .sits_imgGallery[data-count="3"] .sits_imgGalleryItem, .sits_imgGallery[data-count="4"] .sits_imgGalleryItem, .sits_imgGallery[data-count="5"] .sits_imgGalleryItem, .sits_imgGallery[data-count="6"] .sits_imgGalleryItem, .sits_imgGallery[data-count="7"] .sits_imgGalleryItem, .sits_imgGallery[data-count="8"] .sits_imgGalleryItem{max-width:calc(100% - 6px);} /* -------------------------------------------------------------------- */ /* Intext-items */ /* -------------------------------------------------------------------- */ .vertical_intext > .sits_imgGallery[data-count="2"] .sits_imgGalleryItem, .vertical_intext > .sits_imgGallery[data-count="3"] .sits_imgGalleryItem, .vertical_intext > .sits_imgGallery[data-count="4"] .sits_imgGalleryItem, .vertical_intext > .sits_imgGallery[data-count="5"] .sits_imgGalleryItem, .vertical_intext > .sits_imgGallery[data-count="6"] .sits_imgGalleryItem, .vertical_intext > .sits_imgGallery[data-count="7"] .sits_imgGalleryItem, .vertical_intext > .sits_imgGallery[data-count="8"] .sits_imgGalleryItem{max-width:calc(100% - 6px);} /* -------------------------------------------------------------------- */ } /* ############################################################################################################################################################################## */ /* ENDE -> MOD Bildergalerien (Alle: Image/TextPic/Media) */