/*
Theme Name: VvE Leijendael
Description: Based on Divi by Elegant Themes
Template: Divi
Version: 1.0
Author: Eric Steur | stom!
Author URI: https://www.stom.nu

*/

@import url("https://vveleijendael.stom.dev/wp-content/themes/Divi/style.css");

/*
=========================================
FOTO CAROUSEL
=========================================
*/


.stom-foto-carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
}


/*
-----------------------------------------
Swiper wrapper
-----------------------------------------
*/

.stom-foto-carousel .swiper-wrapper {
    align-items: stretch;
}


/*
-----------------------------------------
Slides

Breedte wordt bepaald door de foto.
-----------------------------------------
*/

.stom-foto-carousel .swiper-slide {
    width: auto !important;
    height: 550px;
}


/*
-----------------------------------------
Klikbare foto
-----------------------------------------
*/

.stom-foto-carousel .stom-carousel-lightbox {
    display: block;
    height: 550px;
    width: auto;
    cursor: zoom-in;
}


/*
-----------------------------------------
Foto

Alle foto's zijn exact 550px hoog.
Breedte volgt automatisch uit de
originele verhouding.
-----------------------------------------
*/

.stom-foto-carousel .stom-carousel-foto {
    display: block;

    width: auto;
    height: 550px;

    max-width: none;

    object-fit: contain;
}


/*
-----------------------------------------
Hover
-----------------------------------------
*/

.stom-foto-carousel .stom-carousel-lightbox img {
    transition:
        opacity 0.2s ease;
}


.stom-foto-carousel .stom-carousel-lightbox:hover img {
    opacity: 0.9;
}


/*
=========================================
NAVIGATIEPIJLEN
=========================================
*/

.stom-foto-carousel .swiper-button-prev,
.stom-foto-carousel .swiper-button-next {

    width: 46px;
    height: 46px;

    margin-top: -23px;

    border: 0;
    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.92);

    box-shadow:
        0 2px 10px
        rgba(0, 0, 0, 0.15);
}


/*
Pijltje
*/

.stom-foto-carousel .swiper-button-prev::after,
.stom-foto-carousel .swiper-button-next::after {

    font-size: 18px;
    font-weight: 700;

    color: #222;
}


/*
Positie
*/

.stom-foto-carousel .swiper-button-prev {
    left: 15px;
}


.stom-foto-carousel .swiper-button-next {
    right: 15px;
}


/*
=========================================
PAGINATION
=========================================
*/

.stom-foto-carousel .swiper-pagination {

    position: relative;

    left: auto;
    bottom: auto;

    margin-top: 18px;
}


/*
Bolletjes
*/

.stom-foto-carousel .swiper-pagination-bullet {

    width: 8px;
    height: 8px;

    opacity: 0.35;

    background: #222;
}


.stom-foto-carousel .swiper-pagination-bullet-active {
    opacity: 1;
}


/*
=========================================
GLIGHTBOX
=========================================
*/

/*
Donkere achtergrond
*/

.glightbox-container .goverlay {
    background:
        rgba(0, 0, 0, 0.92);
}


/*
Afbeelding zo groot mogelijk,
maar nooit buiten het scherm
*/

.glightbox-container .gslide-image img {

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

    width: auto;
    height: auto;
}


/*
Sluitknop en navigatie
*/

.glightbox-container .gclose,
.glightbox-container .gnext,
.glightbox-container .gprev {

    background-color:
        rgba(0, 0, 0, 0.55);

    border-radius: 50%;
}


/*
Beschrijving / onderschrift
*/

.glightbox-container .gslide-description {
    background: rgba(0, 0, 0, 0.75);
}


.glightbox-container .gdesc-inner {
    color: #fff;
}


/*
=========================================
MOBIEL
=========================================
*/

@media (max-width: 767px) {

    /*
    Ook mobiel blijven de foto's 550px hoog.
    */

    .stom-foto-carousel .swiper-slide,
    .stom-foto-carousel .stom-carousel-lightbox,
    .stom-foto-carousel .stom-carousel-foto {
        height: 550px;
    }


    /*
    Pijlen iets kleiner
    */

    .stom-foto-carousel .swiper-button-prev,
    .stom-foto-carousel .swiper-button-next {

        width: 40px;
        height: 40px;

        margin-top: -20px;
    }


    .stom-foto-carousel .swiper-button-prev::after,
    .stom-foto-carousel .swiper-button-next::after {
        font-size: 15px;
    }

}