/*
==========================================================
Ueberdiek Ocean
Gallery Flow 1.0
Datei: assets/css/gallery.css
==========================================================
*/


/* -------------------------------------------------------
   Galerie
------------------------------------------------------- */

.gallery {
    padding: 2rem 0 5rem;
}

.gallery .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}


/* -------------------------------------------------------
   Bühne
------------------------------------------------------- */

.gallery__stage {

    position: relative;

    width: 100%;
    height: 440px;

    margin: 0 auto;

    overflow: hidden;

}


/* -------------------------------------------------------
   Grundelement
------------------------------------------------------- */

.gallery__item {

    position: absolute;

    top: 50%;

    left: 50%;

    opacity: 0;

    transform: translate(-50%, -50%);

    transition:
        left .45s ease,
        width .45s ease,
        opacity .45s ease,
        filter .45s ease,
        box-shadow .45s ease;

    cursor: pointer;

}
.gallery__image {

    display: block;

    width: 100%;
    height: auto;

    border-radius: 14px;

}


/* -------------------------------------------------------
   äußeres links
------------------------------------------------------- */

.gallery__item--outer-left {

    left: 6%;
    width: 120px;

    opacity: .25;
    filter: blur(1px);

    z-index: 1;

}


/* -------------------------------------------------------
   links
------------------------------------------------------- */

.gallery__item--side-left {

    left: 20%;
    width: 220px;

    opacity: .70;

    z-index: 2;

}


/* -------------------------------------------------------
   aktiv
------------------------------------------------------- */

.gallery__item--active {

    left: 50%;
    width: 560px;

    opacity: 1;

    filter: none;

    z-index: 5;

    box-shadow: 0 20px 45px rgba(0,0,0,.22);

}


/* -------------------------------------------------------
   rechts
------------------------------------------------------- */

.gallery__item--side-right {

    left: 80%;
    width: 220px;

    opacity: .70;

    z-index: 2;

}


/* -------------------------------------------------------
   äußeres rechts
------------------------------------------------------- */

.gallery__item--outer-right {

    left: 94%;
    width: 120px;

    opacity: .25;

    filter: blur(1px);

    z-index: 1;

}
/* -------------------------------------------------------
   Bildinformationen
------------------------------------------------------- */

.gallery__info {

    text-align: center;

    margin-top: 3.5rem;

    min-height: 120px;

}

.gallery__title {

    margin: 0 0 .8rem;

    font-size: 2.3rem;

    font-weight: 600;

    line-height: 1.2;

    color: #222;

}

.gallery__meta {

    margin: 0;

    font-size: 1.08rem;

    line-height: 1.7;

    color: #666;

    letter-spacing: .02em;

}

.gallery__copyright {

    margin-top: 1.2rem;

    font-size: .92rem;

    color: #9a9a9a;

    letter-spacing: .04em;

}

/* -------------------------------------------------------
   Tablet
------------------------------------------------------- */

@media (max-width:1200px){

    .gallery__image{

        width:520px;

    }

    .gallery__item--outer-left{

        left:10%;

    }

    .gallery__item--side-left{

        left:27%;

    }

    .gallery__item--side-right{

        left:73%;

    }

    .gallery__item--outer-right{

        left:90%;

    }

}


@media (max-width:900px){

    .gallery__stage{

        height:480px;

    }

    .gallery__image{

        width:440px;

    }

    .gallery__item--outer-left,
    .gallery__item--outer-right{

        display:none;

    }

    .gallery__item--side-left{

        left:20%;

    }

    .gallery__item--side-right{

        left:80%;

    }

}


@media (max-width:700px){

    .gallery__stage{

        height:360px;

    }

    .gallery__image{

        width:320px;

    }

    .gallery__item--side-left,
    .gallery__item--side-right{

        display:none;

    }

}

/* -------------------------------------------------------
   Lightbox
------------------------------------------------------- */

.lightbox {

    position: fixed;

    inset: 0;

    display: none;

    align-items: center;
    justify-content: center;

    z-index: 9999;

}

.lightbox.is-open {

    display: flex;

}

.lightbox__backdrop {

    position: absolute;

    inset: 0;

    background: rgba(0,0,0,.85);

}

.lightbox__content {

    position: relative;

    z-index: 2;

    max-width: 90vw;
    max-height: 90vh;

}

.lightbox__image {

    display: block;

    max-width: 90vw;
    max-height: 90vh;

    width: auto;
    height: auto;

    border-radius: 10px;

    box-shadow: 0 20px 60px rgba(0,0,0,.45);

}

.lightbox__close {

    position: absolute;

    top: -45px;
    right: 0;

    border: 0;

    background: none;

    color: #fff;

    font-size: 2rem;

    cursor: pointer;

    line-height: 1;

}