.qrcode{
    display: none;
    position: fixed;
    width:100%;
    height:100%;
    left:0;
    top:0;
    background: rgba(0,0,0,0.5);

    #qrcode{
        width:256px;
        height:300px;
        vertical-align: middle;
        margin:0 auto;
        position: relative;
        background-color: white;
        padding: 20px 20px 10px;
        top: 100px;
    }
    p{
        text-align: center;
        line-height: 44px;
        position: absolute;
        top: 380px;
        width: 100%;
    }
}

//controller
.with-notes.popup.overview slide.next{
    opacity: 0.5 !important;
}
.with-notes .progress{
    display: none;
}
// Speaker notes only show the current slide.
.with-notes {
    &.popup {
        slides.layout-widescreen,
        slides.layout-faux-widescreen {
            slide {
                &.next {
                    @include transform(translate3d($slide-width-widescreen / 2 + 140, 80px, 0) scale(0.35));
                }
                .note {
                    z-index: 100;
                    @include transform(translate3d(300px, $slide-height + 100, 0) scale(1.5));

                }
            }
        }

        slide{
            width: 1100px !important;
            overflow: visible;
            @include transition(none !important);
            @include transform-origin(0, 0 !important);

            &[data-transition].current,&[data-transition].next,&[data-transition].past{
                top: auto !important;
                left: auto !important;

                @include transition(none);
                @include transform-origin(0, 0);
                -webkit-animation-name: none;
                animation-name: none;
            }
            &:not(.backdrop) {
                @include transform(scale(0.6) translate3d(0.5em, 0.5em, 0));
                // @include box-shadow(0 0 10px $gray-3);
            }
            img{
                // @include transform(scale(0.6));
            }
            &.backdrop {
                @include background-image(radial-gradient(50% 50%, #b1dfff 0%,$brand-blue 600px));
            }

            &.next {
                @include transform(translate3d($slide-width / 2 + 240, 80px, 0) scale(0.35));
                opacity: 1 !important;
                 -webkit-clip-path: none !important;
                .note {
                    display: none !important;
                }
            }
        }

        .note {
            width: 100%;
            height: $slide-height / 2 - 90;
            padding: 0;

            @include transform(translate3d(350px, $slide-height + 250, 0) scale(1.5));
            @include transition(opacity 400ms ease-in-out);

            > section {
                background: #fff;
                @include border-radius($slide-border-radius);
                height: 100%;
                width: 100%;
                @include box-sizing(border-box);
                @include box-shadow(none);
                overflow: auto;
                padding: 1em;
            }
        }

    }

    .note {
        @include display-flex;
        opacity: 1;
        @include transform(translateY(0));
        pointer-events: auto;
        z-index: 100;
    }
}
@media screen and (min-width:1200px){
    .with-notes {
    &.popup {
        .note{
            @include transform(translate3d(350px, $slide-height + 450, 0) scale(1.5));
        }
        slide.next {
            @include transform(translate3d($slide-width / 2 + 440, 80px, 0) scale(0.35));
        }
    }}
}

#_timer_{
    display: block;
    position: fixed;
    bottom: 1em;
    left: 0.5em;
}
.img-full{
    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;

    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-pack: center;

    @include transition(800ms opacity);
    background-color: #000;
    bottom: 0;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    left: 0;
    overflow: auto;
    position: fixed;
    right: 0;
    top: 0;
    display: none;
    img{
        background: #000;
        color: #333;
        padding: 0;
        position: fixed;
        min-width: 100px;
        z-index: 0;
        top: 20px;
        left: 50%;
        -webkit-transition: 800ms -webkit-transform;
        -moz-transition: 800ms -moz-transform;
        transition: 800ms transform;
    }
    img.transparent{
        @include transform(scale(0.99) translateY(-20px));
    }
}


#_buttons{
    position:fixed;
    bottom:0.25em;
    z-index: 9999;
    right: 0.25em;
    ._btn-box{
        display: inline-block;
    }
    button{
        font-size: 1rem;
        background:none;
        border: 0 none;
        color: rgba(0,0,0,0.3);
        @include text-shadow(0 0 transparent);
        &:hover{
            color: black;
        }
    }
}

.popup.with-notes #_buttons,
.overview #_buttons{
    ._btn-box{
        display: inline-block !important;
    }
    #_btn-bar{
        display: none !important;
    }
    button{
        color: white;
    }

}