/* SLICK SLIDER ELEMENTS 01 GENERAL 02 TITLE 03 COLORBOX */ /* ----------------------------------------------------------------------- 01 GENERAL /* ---------------------------------------------------------------------*/ .field--name-field-images-wfbb-gallery-title { display: grid; grid-gap: var(--grid-gap); grid-template-columns: var(--grid-columns); padding: 0 var(--section-inner-side-padding); } .field--name-field-images-wfbb-gallery-title > .field__item { grid-column: span 3; position: relative; border-radius: var(--border-radius); overflow: hidden; } .field--name-field-images-wfbb-gallery-title .image-group .field__item { padding-top: 75%; position: relative; } .field--name-field-images-wfbb-gallery-title .image-group .field__item picture { position: absolute; top: 0; height: 100%; border-radius: var(--border-radius); overflow: hidden; cursor: pointer; } .field--name-field-images-wfbb-gallery-title .image-group .field__item a { display: block; content: ''; width: 100%; height: 100%; position: absolute; top: 0; } .field--name-field-images-wfbb-gallery-title .image-group .field__item img { width: 100%; height: 100%; object-fit: cover; } .field--name-field-images-wfbb-gallery-title .field--name-field-caption-image { display: none; } .field--name-field-images-wfbb-gallery-title > .field__item p a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.5); display: flex; flex-direction: column; text-align: center; justify-content: center; color: #fff; transition: background ease-in-out .2s; } .more-gallery-link { position: absolute; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,.5); display: flex; flex-direction: column; text-align: center; justify-content: center; color: #fff; cursor: pointer; } span.gallery-link-title { font-size: var(--font-size-h3); font-weight: 700; } span.gallery-length { font-size: var(--font-size-h1); font-weight: 700; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='67.912' height='64.912' viewBox='0 0 67.912 64.912'%3E%3Cg id='Gruppe_160' data-name='Gruppe 160' transform='translate(-1341.999 -10049.999)'%3E%3Cpath id='Pfad_377' data-name='Pfad 377' d='M-15187.169-2042.2h10.912' transform='translate(16530.668 12093.701)' fill='none' stroke='%23fff' stroke-linecap='round' stroke-width='3'/%3E%3Cpath id='Pfad_378' data-name='Pfad 378' d='M0,0H10.912' transform='translate(1343.5 10062.411) rotate(-90)' fill='none' stroke='%23fff' stroke-linecap='round' stroke-width='3'/%3E%3C/g%3E%3Cg id='Gruppe_159' data-name='Gruppe 159' transform='translate(-1343.999 -10051.999)'%3E%3Cpath id='Pfad_379' data-name='Pfad 379' d='M-15187.169-2042.2h10.912' transform='translate(-13776.758 8073.209) rotate(180)' fill='none' stroke='%23fff' stroke-linecap='round' stroke-width='3'/%3E%3Cpath id='Pfad_380' data-name='Pfad 380' d='M0,0H10.912' transform='translate(1410.41 10104.499) rotate(90)' fill='none' stroke='%23fff' stroke-linecap='round' stroke-width='3'/%3E%3C/g%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-position: center; background-size: contain; margin-bottom: .5rem; } .field--name-field-images-wfbb-gallery-title > .field__item p a:hover { text-decoration: none; background: rgba(0,0,0,.8); } .field--name-field-title-wfbb-gallery-title { text-align: center; margin-bottom: 2rem; } /* ----------------------------------------------------------------------- 03 COLORBOX /* ---------------------------------------------------------------------*/ div#cboxWrapper { background: transparent; width: 100% !important; height: 100% !important; top: 0; left: 0; } div#colorbox { position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; max-width: 100% !important; } div#cboxMiddleLeft { display: none; } div#cboxContent { background: transparent; width: 100% !important; height: 100% !important; } div#cboxLoadedContent { margin: 0 !important; width: 100% !important; height: 100% !important; overflow: hidden !important; display: flex; justify-content: center; align-items: center; } div#cboxTopLeft { display: none; } div#cboxTopCenter { display: none; } div#cboxTopRight { display: none; } div#cboxWrapper > div:nth-child(1), div#cboxWrapper > div:nth-child(3) { display: none; } div#cboxWrapper > div:nth-child(2) { width: 100%; height: 100%; } div#more-gallery-content { max-width: 90%; height: 90%; display: flex; flex-direction: column; justify-content: space-between; } .field--name-field-images-wfbb-gallery-title .gallery-slider-nav .image-group .field__item img { width: 100% !important; height: 100% !important; object-fit: cover !important; } .gallery-slider-nav .field--name-field-images-wfbb-gallery-title .image-group .field__item, .gallery-slider .field--name-field-images-wfbb-gallery-title .image-group .field__item{ padding: 0; } button#cboxClose, button#cboxClose:hover, button#cboxClose:focus { bottom: inherit !important; top: 2rem; right: 2rem; background-image: var(--icon-close); background-size: contain; background-repeat: no-repeat; background-position: center; } div#cboxLoadedContent img { width: auto !important; height: 75vh !important; border-radius: var(--border-radius); } div#cboxTitle { top: 0; bottom: unset; background: transparent; color: #fff; padding: 0; height: 10vh; display: flex; justify-content: center; align-items: center; } button#cboxPrevious, button#cboxNext { width: 3rem; height: 3rem; background-position: center; background-repeat: no-repeat; background-size: contain; bottom: unset; top: calc(50% - 1.5rem); } button#cboxPrevious:hover, button#cboxNext:hover { background-position: center; opacity: .7; } button#cboxPrevious { background-image: var(--arrow-narrow-prev-light); left: 2rem; } button#cboxNext { background-image: var(--arrow-narrow-next-light); left: unset; right: 2rem; } div#cboxCurrent { bottom: 1rem; left: 0; width: 100%; color: #fff; text-align: center; }