/* MEDIA */
/* Contains basic settings for media types
and gallerys / slideshoes / etc. */

img,video{
    width:              100%;
}

.wrapper{
    position:           relative;
    width:              100%;
    height:             100%;
    overflow:           hidden;
}

.wrapper > img, .wrapper > video{
    width:              100%;
    height:             100%;
    object-fit:         cover;
}

/* HERO */

#hero{
    height:             100vh;
    max-height:         1080px;
    padding:            0!important;
}

#hero img, #hero video{
    object-fit:         cover;
    height:             100%;
    width:              100%;
}

#hero > section.full{
    height:             100vh!important;
    padding:            0!important;
}

#hero.empty{
    height:             var(--navheight);
    background:         var(--maincolor);
}

/* SLIDESHOW */

.slideshow {
    position:           relative;
    display:            flex;
    justify-content:    center;
    width:              100%;
    min-height:         60vh;
    height:             100%;
    /* max-height:         calc(100vh - var(--space)*2); */
    margin:             auto;
    border-radius:      2.5px;
    overflow:           hidden;
}

/* @media (min-width: 1200px) {
    .slideshow{

    }
} */

/* pagination */
.slideshow .pagination{
    position:           absolute;
    display:            flex;
    align-items:        center;
    justify-content:    center;
    bottom:             3rem;
    left:               50%;
    z-index:            1;
    transform:          translateX(-50%);
    width:              100%;
}

.slideshow[lightbox] .pagination{
    position:           fixed;
    opacity:            0;
    width:              100vw;
    bottom:             -10rem;
    transition:         var(--normal) var(--normal);
}

.slideshow[lightbox].show .pagination{
    opacity:            1;
}

/* dots */
/* normal */
.slideshow .dot {
    position:           relative;
    cursor:             pointer;
    width:              1rem;
    height:             1rem;
    display:            inline-block;
    background:         transparent;
    z-index:            1;
    margin:             0 0.5rem;
    border:             3px white solid;
    border-radius:      50%;
    opacity:            .5;
    transition:         var(--quick);
}

.slideshow .dot:hover{
    opacity:            1;
}

.slideshow .dot.active{
    background:         white;
    opacity:            1;
}

/* image */
.slideshow[lightbox] .dot {
    width:              12rem;
    height:             7rem;
    background-position:center;
    background-size:    cover;
    border:             none;
    border-radius:      0;
    filter:             grayscale(1);
    transition:         var(--quick);
}

.slideshow[lightbox] .dot.active, .slideshow[lightbox] .dot:hover{
    filter:             grayscale(0);
}

/* controls */
.slideshow .controls{
    height: 100%;
}

.next, .prev{
    cursor:             pointer;
    display:            block;
    position:           absolute;
    height:             100%;
    width:              50%;
    z-index:            1;
    right:              auto;
    left:               0;
}

.next{
    right:              0;
    left:               auto;
}

.next::after, .prev::after{
    content:            url(icons/chevron-left.svg);
    display:            block;
    position:           absolute;
    width:              3rem;
    height:             3rem;
    top:                50%;
    transform:          translateY(-50%);
    right:              auto;
    left:               1rem;
}

.next::after{
    content:            url(icons/chevron-right.svg);
    right:              1rem;
    left:               auto;
}

/* slides */
.slide {
    position:           absolute;
    display:            flex;
    overflow:           hidden;
    width:              100%;
    height:             100%;
    top:                0;
    left:               0;
    z-index:            0;
    opacity:            1;
    visibility:         hidden;
    width:              100%;
}

.slide.show{
    opacity:            1;
    z-index:            1;
    visibility:         visible;
}

.slide img, .slide video{
    object-fit:         cover;
}

.slide > .caption{
    position:           absolute;
    display:            block;
    width:              50rem;
    max-width:          80vw;
    left:               0rem;
    bottom:             5rem;
    transform:          translateX(-30rem);
    padding:            2rem;
    opacity:            0;
    background:         #000000aa;
    transition:         var(--slidespeed);
}

.slide > .caption > h4{
    margin-bottom:      1.5rem;
}

.slide.show > .caption{
    opacity:            1;
    transform:          translateY(0);
    transition:         var(--slidespeed) var(--quick);
}

/* slide animations */
/* to left */
.slide.to-left{
    opacity:                1;
    visibility:             visible;
    animation:              to-left ease var(--slidespeed);
    animation-fill-mode:    forwards;
}

.slideshow[rolling] > .slide.to-left img{
    animation:              to-left-roll ease var(--slidespeed);
    animation-fill-mode:    forwards;
}

@keyframes to-left {
    from{transform:         translateX(0);}
    to{transform:           translateX(-100%);}
}

@keyframes to-left-roll {
    from{transform:         translateX(0);}
    to{transform:           translateX(50%);}
}

/* from right */
.slide.from-right{
    opacity:                1;
    visibility:             visible;
    animation:              from-right ease var(--slidespeed);
    animation-fill-mode:    forwards;
}

.slideshow[rolling] > .slide.from-right img{
    animation:              from-right-roll ease var(--slidespeed);
    animation-fill-mode:    forwards;
}

@keyframes from-right {
    from{transform:         translateX(100%);}
    to{transform:           translateX(0%);}
}

@keyframes from-right-roll {
    from{transform:         translateX(-50%);}
    to{transform:           translateX(0%);}
}

/* to right */
.slide.to-right{
    opacity:                1;
    visibility:             visible;
    animation:              to-right ease var(--slidespeed);
    animation-fill-mode:    forwards;
}

.slideshow[rolling] > .slide.to-right img{
    animation:              to-right-roll ease var(--slidespeed);
    animation-fill-mode:    forwards;
}

@keyframes to-right {
    from{transform:         translateX(0%);}
    to{transform:           translateX(100%);}
}

@keyframes to-right-roll {
    from{transform:         translateX(0%);}
    to{transform:           translateX(-50%);}
}

/* from left */
.slide.from-left{
    opacity:                1;
    visibility:             visible;
    animation:              from-left ease var(--slidespeed);
    animation-fill-mode:    forwards;
}

.slideshow[rolling] > .slide.from-left img{
    animation:              from-left-roll ease var(--slidespeed);
    animation-fill-mode:    forwards;
}




@keyframes from-left {
    from{transform: translateX(-100%);}
    to{transform: translateX(0%);}
}

@keyframes from-left-roll {
    from{transform: translateX(50%);}
    to{transform: translateX(0%);}
}

/* lightbox */

.lightbox > .slideshow[lightbox] {
    position:               fixed;
    max-width:              var(--innerwidth);
    max-height:             60vh;
    top:                    150%;
    left:                   50%;
    z-index:                120;
    overflow:               visible;
    transform:              translate(-50%,-50%);
    background:             transparent;
    opacity:                0;
    transition:             var(--normal);
}

@media(min-width:1200px){
    .lightbox > .slideshow[lightbox] {
        max-height:         75vh;
    }
}

.lightbox > .slideshow[lightbox] .slide > img{
    object-fit:             contain;
}

.lightbox .closebutton {
    position:               absolute;
    top:                    1.5rem;
    right:                  1.5rem;
    height:                 3rem;
    width:                  3rem;
    z-index:                30;
    cursor:                 pointer;
}

.lightbox .closebutton::after {
    content:                url(icons/cross.svg);
    display:                block;
    position:               absolute;
    top:                    50%;
    left:                   50%;
    transform:              translate(-50%, -50%);
    height:                 3rem;
    width:                  3rem;
}

.lightbox > .slideshow[lightbox].show {
    top:                    calc(50% - 5rem + var(--navheight) / 2);
    opacity:                1;
}

/* gallery */

/* .gallery{
    position:           relative;
    display:            flex;
    align-items:        center;
    flex-flow:          row;
    flex-wrap:          wrap;
    column-gap:         1rem;
    row-gap:            1rem;
}

.gallery > div{
    flex-basis:         22.5rem;
    flex-grow:          0.075;
    overflow:           hidden;
}
 */


/* PARALLAX */
.wrapper{
    position:           relative;
    width:              100%;
    height:             100%;
    min-height:         50vh;
    max-height:         calc(100vh - var(--navheight));
    overflow:           hidden;
}

.parallax{
    position:               absolute;
    width:                  100%;
    height:                 100%;
    max-height:             none;
    object-fit:             cover;
    transition:             none;
}