/* ########## elayer (copyright e2see.de) ########## */

#elayer {
    --nav-size: 60px;
    --nav-line-size: 1px;
    --close-color: #f26d7d;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(20,40,50,.95);
    box-sizing: border-box;
    display: grid;
    grid-template-rows: calc(var(--nav-size) + var(--nav-line-size)) auto;
    font-family: Arial;
    user-select: none;
    z-index: 99999;
    }


body[data-elayer="show"],
body[data-elayer="loading"] {
    overflow: hidden;
    }

body[data-elayer="closed"] #elayer {
    display: none;
    }

    #elayer * {
        margin: 0;
        padding: 0;
        border: 0;
        }

    #elayer_control-container {
        display: block;
        border: 0px solid rgba(255,255,255,.2);
        border-bottom-width: var(--nav-line-size);
        position: relative;
        }


        #elayer_progress {
            position: absolute;
            background: rgba(255,255,255,.6);
            transition: 160ms ease-out 0ms;
            pointer-events: none;
            }
        #elayer_progress[style*="100%"] {background-color:var(--close-color);}
        @media (orientation: landscape) { #elayer_progress { bottom:0; left: calc(var(--nav-line-size) * -1); width: 1px !important; }}
        @media (orientation: portrait) { #elayer_progress { left: 0;bottom: calc(var(--nav-line-size) * -1);height: 1px !important; }}



        #elayer_control {
            max-width: 1000px;
            max-height: 1000px;
            margin: auto;
            height: 100%;
            width: 100%;
            position: absolute;
            left: 0;right: 0; top: 0; bottom: 0;
            display: grid;
            grid-template-columns: repeat(5, auto);
            grid-template-areas: 'i d p n c';
            grid-auto-flow: dense;
            align-content: start;
            justify-content: end;
            grid-gap: 2px;
            box-sizing: border-box;
            }

            #elayer_control > a {
                height: var(--nav-size);
                width: var(--nav-size);
                line-height: 100%;
                color: #fff;
                box-sizing: border-box;
                margin: 0;
                font-size: calc(var(--nav-size) * .14);
                text-align: center;
                text-decoration: none;
                position: relative;
                padding: 0;
                padding-top: calc(var(--nav-size) - (var(--nav-size) * .26));
                overflow: hidden;
                box-sizing: border-box;
                text-shadow: 1px 1px 2px rgba(0,0,0,.3);
                transition: all 200ms;
                }

                #elayer_control > a[href="#download"] {grid-area: d;}
                #elayer_control > a[href="#prev"]  {grid-area: p;}
                #elayer_control > a[href="#next"]  {grid-area: n;}
                #elayer_control > a[href="#close"] {grid-area: c;}
                    #elayer_control > a::before {
                        content: '◯';
                        line-height: 100%;
                        position: absolute;
                        left: 0;
                        top: calc(var(--nav-size) * .1);
                        width: 100%;
                        display: block;
                        font-size: calc(var(--nav-size) * .6);
                        }

                    #elayer_control > a[href="#download"]::before {content: '◿';}
                    #elayer_control > a[href="#prev"]::before  {content: '❬';}
                    #elayer_control > a[href="#next"]::before  {content: '❭';}
                    #elayer_control > a[href="#close"]::before {content: '✕';color:var(--close-color);}
                    #elayer_main::after {content: '✦';}
                    #elayer_control > a[data-elayer-status="loading"],
                    #elayer_control > a[data-elayer-status="inactive"] {
                        pointer-events: none;
                        }

                    #elayer_control > a[data-elayer-status="loading"] {
                        opacity: .5;
                        }

                    #elayer_control > a[data-elayer-status="inactive"] {
                        opacity: .1;
                        transform: scale(.6);
                        }

            #elayer_control > a:hover {
                background: rgba(0,0,0,.4);
                }



        #elayer_main {
            overflow: hidden;
            position: relative;
            }

            #elayer_main::after {
                pointer-events: none;
                display: block;
                width: 100px;
                height: 100px;
                line-height: 100px;
                font-size: 50px;
                text-align: center;
                position: absolute;
                left: 0;top: 0;right: 0;bottom: 0;
                margin: auto;
                color: #fff;
                transition: opacity 200ms;
                opacity: 0;
                }

        #elayer_content_close {
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;left: 0; top: 0;
            z-index: 5;
            }

            body[data-elayer-zoom="in"] #elayer_content_close {
                width: calc(100% - 16px); /*wegen scrollbalken*/
                height: calc(100% - 16px);
                }


        #elayer_zoom-info {
            width: 240px;
            padding: 10px 14px;
            box-sizing: border-box;
            background: rgba(0,0,0,.9);
            color: #fff;
            margin-left: -120px;
            position: absolute;left: 50%; bottom: 10%;
            z-index: 11;
            font-size: 13px;
            text-align: center;
            border-radius: 8px;
            pointer-events: none;
            transition: all 1s;
            opacity: 1;
            }

        #elayer_content {
            display: grid;
            width: 100%;
            height: 100%;
            position: relative;
            padding: 10px;
            box-sizing: border-box;
            overflow: auto;
            }


            body[data-elayer-zoom="loading"] #elayer_content,
            body[data-elayer-zoom="in"] #elayer_content {
                padding: 0px;
                }


            @keyframes example {
                0% {transform: rotate(0deg);}
                100%   {transform: rotate(360deg);}
                }

                body[data-elayer="loading"] #elayer_main::after {
                    animation: example 1s linear infinite;
                    opacity: 1;
                    }


            #elayer_content > * {
                max-height: 100%;
                max-width: 100%;
                height: auto;
                width: auto;
                box-sizing: border-box;
                align-self: center;
                justify-self: center;
                border-radius: 2px;
                box-shadow: 2px 2px 10px rgba(0,0,0,.4);
                transform-origin: center center;
                transition: all 100ms;
                position: relative;
                z-index: 9;
                }


            body[data-elayer-zoom="loading"] #elayer_content > * {
                transition: all 0ms linear 0ms !important;
                }

            body[data-elayer="loading"] #elayer_content > * {
                transform: scale(.94);
                opacity: 0.005;
                }

                #elayer_content > img {
                    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAAAAAClZ7nPAAAAAnRSTlMaAMa+N+MAAAAPSURBVAjXY/jPgB3hkAAAfr8P8eDDzn8AAAAASUVORK5CYII=');
                    background-size: 20px auto;
                    overflow: scroll;
                    }

                #elayer_content > audio {
                    width: 400px;
                    height: 60px;
                    box-shadow: none;
                    }

                #elayer_content > iframe {
                    background: transparent;
                    max-height: 1200px;
                    max-width: 1200px;
                    height: 100%;
                    width: 100%;
                    box-shadow: none;
                    }

                #elayer_content > iframe[src*="youtube.com"] {
                    width: 800px;
                    height: 450px;
                    max-height: 100%;
                    max-width: 100%;
                    }

    @media (orientation: landscape) {

        #elayer {
            grid-template-rows: auto;
            grid-template-columns: auto calc(var(--nav-size) + var(--nav-line-size));
            grid-auto-flow: dense;
            }
            #elayer_control-container {
                grid-column-start: 2;
                grid-column-end: 3;
                border-width:0;
                border-left-width: var(--nav-line-size);
                }
                #elayer_control {
                    grid-template-columns: auto;
                    grid-template-rows:  repeat(5, auto);
                    grid-template-areas: 'c''n''p''d''i';
                    }
            #elayer_main {
                grid-column-start: 1;
                grid-column-end: 2;
                }
            @media (min-width: 1600px) {
                #elayer {
                    grid-template-columns: auto calc(10vw + var(--nav-line-size));
                    }
                    
                #elayer_control {padding-top: 20px;}
                    
                    
                #elayer_control > a {
                    width: 10vw;
                    font-size: calc(var(--nav-size) * .2);
                    padding: 12px 5px;
                    line-height: 120%;
                    height: auto;
                    }
                    #elayer_control > a::before {
                        font-size: calc(var(--nav-size) * .2);
                        line-height: 120%;
                        position: relative; top:auto;left: auto;
                        display: inline-block;
                        vertical-align: middle;
                        width: auto;
                        font-size: 20px;
                        margin-right: 10px;
                        }
            }
    }



/* cdn 1ms */