#lightbox {
    position: fixed;
    z-index: 1000;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
    padding: 5%; /* Zorgen dat de image niet full screen wordt gezet */
    display: none;
}

#lightbox.active {
    display: flex;
    place-content: center;
}

#lightbox .x-icon {
    position: absolute;
    top: 2rem;
    right: 2rem;
    cursor: pointer;
}

#lightbox .left-arrow {
    position: absolute;
    top: 47%;
    bottom: 53%;
    left: 15%;
    cursor: pointer;
    font-size: xx-large;
    color: darkgray;
}

#lightbox .right-arrow {
    position: absolute;
    top: 47%;
    bottom: 53%;
    right: 15%;
    cursor: pointer;
    font-size: xx-large;
    color: darkgray;
}

#lightbox .right-arrow i:hover {
    color: aliceblue;
}


#lightbox .left-arrow i:hover {
    color: aliceblue;
}

#lightbox .x-icon svg:hover {
    fill: aliceblue;
}

.portfolio-lightbox {
    color: white !important;
}

.portfolio-lightbox :hover {
    color: aliceblue !important;
}

.portfolio-item:hover {
    cursor: pointer !important;
}


/*? ===============================================  ?*/ 
/*? Responsiveness voor de lightbox op gsm-schermen  ?*/ 
/*? ===============================================  ?*/ 
@media (width: 375px) {
    #lightbox img {
        width: 95vh;
        height: 35vh;
        margin-top: 50%;
    }

    #lightbox .left-arrow, #lightbox .right-arrow {
        top: 60%;
    }

    #lightbox .left-arrow {
        left: 35%;
    }

    #lightbox .right-arrow {
        right: 35%;
    }
}

@media (width: 414px) {
    #lightbox img {
        width: 43vh;
        height: 33vh;
        margin-top: 55%;
    }

    #lightbox .left-arrow, #lightbox .right-arrow {
        top: 60%;
    }

    #lightbox .left-arrow {
        left: 35%;
    }

    #lightbox .right-arrow {
        right: 35%;
    }
}

@media (width: 412px) {
    #lightbox img {
        width: 42vh;
        height: 32vh;
        margin-top: 55%;
    }

    #lightbox .left-arrow, #lightbox .right-arrow {
        top: 60%;
    }

    #lightbox .left-arrow {
        left: 35%;
    }

    #lightbox .right-arrow {
        right: 35%;
    }
}

@media (width: 390px) {
    #lightbox img {
        width: 43vh;
        height: 33vh;
        margin-top: 55%;
    }

    #lightbox .left-arrow, #lightbox .right-arrow {
        top: 60%;
    }

    #lightbox .left-arrow {
        left: 35%;
    }

    #lightbox .right-arrow {
        right: 35%;
    }
}

@media (width: 384px) {
    #lightbox img {
        width: 45vh;
        height: 35vh;
        margin-top: 55%;
    }

    #lightbox .left-arrow, #lightbox .right-arrow {
        top: 65%;
    }

    #lightbox .left-arrow {
        left: 35%;
    }

    #lightbox .right-arrow {
        right: 35%;
    }
}

@media (width: 360px) {
    #lightbox img {
        width: 45vh;
        height: 35vh;
        margin-top: 50%;
    }

    #lightbox .left-arrow, #lightbox .right-arrow {
        top: 60%;
    }

    #lightbox .left-arrow {
        left: 35%;
    }

    #lightbox .right-arrow {
        right: 35%;
    }
}

@media (width: 430px) {
    #lightbox img {
        width: 43vh;
        height: 33vh;
        margin-top: 55%;
    }

    #lightbox .left-arrow, #lightbox .right-arrow {
        top: 60%;
    }

    #lightbox .left-arrow {
        left: 35%;
    }

    #lightbox .right-arrow {
        right: 35%;
    }
}

/*? ===============================================  ?*/ 
/*? Responsiveness voor de lightbox op ipad-schermen ?*/ 
/*? ===============================================  ?*/ 
/** IPad Mini (Landscape) **/
@media (width: 1024px) {
    #lightbox img {
        width: 100vh;
        height: 70vh;
        margin-top: 6%;
    }

    #lightbox .left-arrow, #lightbox .right-arrow {
        top: 45%;
    }

    #lightbox .left-arrow {
        left: 5%;
    }

    #lightbox .right-arrow {
        right: 5%;
    }
}

/** IPad Mini (Portrait) **/
@media (width: 768px) {
    #lightbox img {
        width: 70vh;
        height: 45vh;
        margin-top: 33%;
    }

    #lightbox .left-arrow, #lightbox .right-arrow {
        top: 73%;
    }

    #lightbox .left-arrow {
        left: 41%;
    }

    #lightbox .right-arrow {
        right: 41%;
    }

    #lightbox .right-arrow i, #lightbox .left-arrow i {
        font-size: larger;
    }
}

/** IPad Air (Portrait) **/
@media (width: 820px) {
    #lightbox img {
        width: 59vh;
        height: 45vh;
        margin-top: 33%;
    }

    #lightbox .left-arrow, #lightbox .right-arrow {
        top: 70%;
    }

    #lightbox .left-arrow {
        left: 42%;
    }

    #lightbox .right-arrow {
        right: 42%;
    }

    #lightbox .right-arrow i, #lightbox .left-arrow i {
        font-size: larger;
    }
}

/** IPad Air (Landscape) **/
@media (width: 1180px) {
    #lightbox img {
        width: 100vh;
        height: 70vh;
        margin-top: 7%;
    }

    #lightbox .left-arrow, #lightbox .right-arrow {
        top: 46%;
    }

    #lightbox .left-arrow {
        left: 5%;
    }

    #lightbox .right-arrow {
        right: 5%;
    }
}

/** IPad Pro (Landscape) **/
@media (width: 1366px) {
    #lightbox img {
        width: 100vh;
        height: 70vh;
        margin-top: 7%;
    }

    #lightbox .left-arrow, #lightbox .right-arrow {
        top: 47%;
    }

    #lightbox .left-arrow {
        left: 5%;
    }

    #lightbox .right-arrow {
        right: 5%;
    }
}

/** IPad Pro (Portrait) **/
@media screen and (min-width: 1020px) and (max-width: 1026px) and (orientation: portrait) {
    #lightbox img {
        width: 69vh;
        height: 49vh;
        margin-top: 20%;
    }

    #lightbox .left-arrow, #lightbox .right-arrow {
        top: 68%;
    }

    #lightbox .left-arrow {
        left: 41%;
    }

    #lightbox .right-arrow {
        right: 41%;
    }

    #lightbox .right-arrow i, #lightbox .left-arrow i {
        font-size: xxx-large;
    }
}


/*? =================================================================================================  ?*/ 
/*? Responsiveness voor de lightbox op laptop-schermen met een 1920x1080 resolutie (de meeste laptops) ?*/ 
/*? =================================================================================================  ?*/ 
/** Responsiveness voor laptops met 1920x1080 resolutie (de meeste laptops) **/
@media screen and (min-width: 1918px) and (max-width: 1922px) and (min-height: 1078px) and (max-height: 1082px) {
    #lightbox img {
        width: initial;
        height: initial;
    }

    #lightbox .left-arrow {
        position: absolute;
        top: 47%;
        bottom: 53%;
        left: 14%;
        cursor: pointer;
        font-size: xxx-large;
        color: darkgray;
    }
    
    #lightbox .right-arrow {
        position: absolute;
        top: 47%;
        bottom: 53%;
        right: 14%;
        cursor: pointer;
        font-size: xxx-large;
        color: darkgray;
    }

    #lightbox .right-arrow i:hover {
        color: aliceblue;
    }

    #lightbox .left-arrow i:hover {
        color: aliceblue;
    }
}