.noScroll {
    position: fixed;
/*    overflow-y: scroll;*/
}


#lightbox {
    position: fixed;
    
    display: -webkit-box;
    
    display: -ms-flexbox;
    
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;

    background-image: url(images/screen_lb.png);
    overflow: hidden;
    z-index:500;
}


#click-area {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 600;
}


#lightbox figure {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    z-index: 1000;
}


#lightbox figure img {
    /*max-width rules set in @media orientation blocks*/
    max-height: calc(100vh - 6rem);
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
        user-select: none;
}

#lightbox figure iframe {
    height: calc(100vh - 6rem);
    width: calc(100vw - 10rem);
    max-width: 1280px;
}



#movie {
    z-index: 1001;
}

#galArrows {
    position: absolute;
/*    top: calc(50% - 5.5rem);*/
    width: 100%;
    height: 100%;
/*    z-index: 500;*/
}


#galArrows svg {
    width: 3rem;
    height: 25%;
    min-height: 9rem;
    position: absolute;
    cursor: pointer;
    -webkit-transition: -webkit-transform 0.3s;
    transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
    z-index: 700;
    z-index: 700;
}


polyline {
    fill: none;
    stroke: rgba(255,255,255,0.6);
    stroke-width: 2;
    -webkit-transition: stroke 0.3s;
    transition: stroke 0.3s;
}


#galArrows svg:hover {
    -webkit-transform: scale(1.17);
            transform: scale(1.17);
}

#galArrows svg:hover polyline {
    stroke: rgba(255,255,255,1.0);
}


#xBox {
    position: absolute;
    width: 6rem;
    height: 6rem;
    top:.5rem;
    right: .5rem;
    cursor: pointer;
    -webkit-transition: -webkit-transform 0.3s;
    transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
}

#xBox:hover {
    -webkit-transform: scale(1.17);
            transform: scale(1.17);
}

#xBox svg {
    width: 100%;
    height: 100%;
}

#xBox svg line {
    stroke: rgba(255,255,255,0.6);
    stroke-width: 2;
    -webkit-transition: stroke 0.3s;
    transition: stroke 0.3s;
}

#xBox:hover svg line {
    stroke: rgba(255,255,255,1.0);
}


@media screen and (orientation:landscape){
 
    #lightbox {
        top: 0;
        left: 100%;
        width: 100%;
        height: 100%;
        -webkit-transition: left 0.2s;
        transition: left 0.2s;
    }
    
    #lightbox.active {
        left: 0%;
        -webkit-transition: left 0.3s;
        transition: left 0.3s;
    }
    
    
    #lightbox figure img {
        max-width: calc(100vw - 10rem);
    }
    
    #arrowL {
        left: .5rem;
        top: 37.5%;
    }

    #arrowR {
        right: .5rem;
        top: 37.5%;
    }
    
}


@media screen and (orientation:portrait){
 
    #lightbox {
        top: 100%;
        left: 0;
        width: 100%;
        height: 100%;
        -webkit-transition: top 0.2s;
        transition: top 0.2s;
    }
    
    #lightbox.active {
        top: 0%;
        -webkit-transition: top 0.3s;
        transition: top 0.3s;
    }
    
    #lightbox figure img {
        max-width: calc(100vw - 6rem);
    }
    
    #galArrows svg {
        height: 20%;
        width: 3.5rem;
        min-height: 10.5rem;
    }
    
    #xBox {
        width: 7rem;
        height: 7rem;
    }
    
    #arrowL {
        left: .5rem;
        top: 40%;
    }
    
    #arrowR {
        right: .5rem;
        top: 40%;
    }
    
}