/*
==========================================================
KEAV VIEWER v10
Kim Engelen Art Viewer
Premium Gallery Viewer
==========================================================
*/


/*----------------------------------------------------
BODY LOCK
----------------------------------------------------*/

html.keav-open,
body.keav-open{

    overflow:hidden;
    overscroll-behavior:none;

}


/*----------------------------------------------------
OVERLAY
----------------------------------------------------*/

#keav-overlay{

    position:fixed;

    inset:0;

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

    background:#000000;

    opacity:0;
    visibility:hidden;

    pointer-events:none;

    transition:opacity .22s ease;

    overflow:hidden;

    z-index:999999999;

}


/*----------------------------------------------------
OPEN
----------------------------------------------------*/

#keav-overlay.open{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

}


/*----------------------------------------------------
IMAGE
----------------------------------------------------*/

#keav-image{

    display:block;

    width:auto;
    height:auto;

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

    object-fit:contain;

    user-select:none;
    -webkit-user-select:none;

    -webkit-user-drag:none;

    pointer-events:none;

    will-change:opacity,transform;

    transition:
        opacity .18s ease,
        transform .18s ease;

}


/*----------------------------------------------------
GEEN SELECTIES
----------------------------------------------------*/

#keav-overlay,
#keav-overlay *{

    user-select:none;
    -webkit-user-select:none;
    -webkit-touch-callout:none;

}


/*----------------------------------------------------
BUTTON BASIS
----------------------------------------------------*/

#keav-close,
#keav-prev,
#keav-next,
#keav-fullscreen{

    position:absolute;

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

    width:32px;
    height:32px;

    padding:0;
    margin:0;

    border:none;
    outline:none;

    background:transparent;

    color:#F2F2F2;

    cursor:pointer;

    opacity:.45;

    line-height:1;

    font-weight:300;

    transition:
        opacity .18s ease,
        transform .18s ease;

}


#keav-close:hover,
#keav-prev:hover,
#keav-next:hover,
#keav-fullscreen:hover{

    opacity:1;

    transform:scale(1.03);

}

/*----------------------------------------------------
DESKTOP
Premium Controls
----------------------------------------------------*/


/* CLOSE */

#keav-close{

    top:18px;
    right:18px;

    width:28px;
    height:28px;

    font-size:20px;

}


/* FULLSCREEN */

#keav-fullscreen{

    top:18px;
    right:52px;

    width:24px;
    height:24px;

    font-size:12px;

}


/* PREVIOUS */

#keav-prev{

    left:14px;
    top:50%;

    width:28px;
    height:28px;

    transform:translateY(-50%);

    font-size:20px;

}


/* NEXT */

#keav-next{

    right:14px;
    top:50%;

    width:28px;
    height:28px;

    transform:translateY(-50%);

    font-size:20px;

}


/*----------------------------------------------------
HOVER
----------------------------------------------------*/

#keav-prev:hover{

    transform:
        translateY(-50%)
        scale(1.04);

}

#keav-next:hover{

    transform:
        translateY(-50%)
        scale(1.04);

}

#keav-close:hover,
#keav-fullscreen:hover{

    transform:scale(1.04);

}

/*----------------------------------------------------
TABLET
(iPad / iPad Air / iPad Pro)
----------------------------------------------------*/

@media (max-width:1024px){

    #keav-image{

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

    }

    #keav-close{

        top:16px;
        right:16px;

        width:26px;
        height:26px;

        font-size:18px;

    }

    #keav-fullscreen{

        top:16px;
        right:46px;

        width:22px;
        height:22px;

        font-size:11px;

    }

    #keav-prev{

        left:10px;

        width:26px;
        height:26px;

        font-size:18px;

    }

    #keav-next{

        right:10px;

        width:26px;
        height:26px;

        font-size:18px;

    }

}


/*----------------------------------------------------
PHONE
----------------------------------------------------*/

@media (max-width:768px){

    #keav-image{

        max-width:96vw;
        max-height:88vh;

    }

    #keav-close{

        top:14px;
        right:14px;

        width:24px;
        height:24px;

        font-size:17px;

    }

    #keav-fullscreen{

        top:14px;
        right:40px;

        width:20px;
        height:20px;

        font-size:10px;

    }

    #keav-prev{

        left:8px;

        width:24px;
        height:24px;

        font-size:17px;

    }

    #keav-next{

        right:8px;

        width:24px;
        height:24px;

        font-size:17px;

    }

}

/*----------------------------------------------------
IDLE CONTROLS
----------------------------------------------------*/

#keav-overlay.idle #keav-close,
#keav-overlay.idle #keav-fullscreen,
#keav-overlay.idle #keav-prev,
#keav-overlay.idle #keav-next{

    opacity:0;
    pointer-events:none;

}


/*----------------------------------------------------
TOUCH
----------------------------------------------------*/

#keav-overlay,
#keav-image{

    touch-action:pan-y pinch-zoom;

}


/*----------------------------------------------------
NO SELECT
----------------------------------------------------*/

#keav-overlay,
#keav-overlay *{

    user-select:none;
    -webkit-user-select:none;
    -webkit-touch-callout:none;

}


/*----------------------------------------------------
PERFORMANCE
----------------------------------------------------*/

#keav-overlay{

    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;

    contain:layout style paint;

}

#keav-image{

    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;

    will-change:
        opacity,
        transform;

}


/*----------------------------------------------------
FULLSCREEN
----------------------------------------------------*/

#keav-overlay:fullscreen{

    background:#000;

}

#keav-overlay:-webkit-full-screen{

    background:#000;

}


/*----------------------------------------------------
ACCESSIBILITY
----------------------------------------------------*/

#keav-close:focus,
#keav-prev:focus,
#keav-next:focus,
#keav-fullscreen:focus{

    outline:none;

}


/*----------------------------------------------------
EINDE
----------------------------------------------------*/