$ns-video-icon-height: 40px;
$ns-video-icon-width: 40px;

$ns-video-icon-height-sm: 30px;
$ns-video-icon-width-sm: 30px;

$ns-video-spacing-sm: 1.5rem;
$ns-video-spacing: 3rem;


.ns-video-initial {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;

    @media(min-width: 768px) {
        width: 80%;
    }
    .vjs-user-active .ns-video-controls, 
    .vjs-user-active .ns-video-top {
        opacity: 1;
        transition: opacity .25s linear;
   
    }
    .vjs-user-inactive .ns-video-controls, 
    .vjs-user-inactive .ns-video-top {
        opacity: 0;
        transition: opacity .75s linear;
        transition-delay: .5s;
    }


}

.ns-video-icon {
    cursor: pointer;
    height: $ns-video-icon-height-sm;
    width: $ns-video-icon-width-sm;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    @media(min-width: 768px) {
        height: $ns-video-icon-height;
        width: $ns-video-icon-width;
    }

    &:hover {
        opacity: 0.8;
    }
}

.ns-video-top {
    position: absolute;
    font-family: $futura-book;
    font-weight: normal;
    font-size: 2rem;
    color: #fff;
    width: 100%;

    h2 {
        font-family: $futura-book;
        font-weight: normal;
        font-size: 18px;
        margin: 0;
        padding: 0;
    }

    .ns-video-title {
        position: absolute;
        top: $ns-video-spacing-sm;
        left: $ns-video-spacing-sm;

        @media(min-width: 768px) {
            top: $ns-video-spacing;
            left: $ns-video-spacing;
        }

    }

    .ns-video-timestamp {
        position: absolute;
        top: $ns-video-spacing-sm;
        right: $ns-video-spacing-sm;

        @media(min-width: 768px) {
            top: $ns-video-spacing;
            right: $ns-video-spacing;
        }

    }
}

.ns-video-controls {
    position: absolute;
    bottom: 0;
    width: 100%;

    .ns-video-icon-audio,
    .ns-video-icon-audio-muted {
        position: absolute;
        bottom: $ns-video-spacing-sm;
        left: $ns-video-spacing-sm;

        @media(min-width: 768px) {
            bottom: $ns-video-spacing;
            left: $ns-video-spacing;
        }

        background-image: url('../images/ns-player-icon-audio-playing.svg');


    }

    .ns-video-icon-audio-muted {
        background-image: url('../images/ns-player-icon-audio-muted.svg');

    }



    .ns-video-icon-play,
    .ns-video-icon-pause {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: $ns-video-spacing-sm;

        @media(min-width: 768px) {
            bottom: $ns-video-spacing;
        }

        background-image: url('../images/ns-player-icon-play.svg');

    }

    .ns-video-icon-pause {
        background-image: url('../images/ns-player-icon-pause.svg');
    }


    .ns-video-icon-fullscreen,
    .ns-video-icon-minimize {
        position: absolute;
        background-image: url('../images/ns-player-icon-fullscreen.svg');
        bottom: $ns-video-spacing-sm;
        right: $ns-video-spacing-sm;

        @media(min-width: 768px) {
            bottom: $ns-video-spacing;
            right: $ns-video-spacing;
        }


    }

    .ns-video-icon-minimize {
        background-image: url('../images/ns-player-icon-minimize.svg');
    }

}

:-webkit-full-screen-ancestor:not(iframe) {
    height: 100vh;
    padding-bottom: 0;
    position: fixed;
    top:0;
    width: 100%;
    z-index: 10001;
        .navbar {
            display: none;
        }
}


//////////////////////////////////
// How it works inline video
/////////////////////////////////

.ns-how-it-works-video {
    border-bottom:1px solid #464444;
    margin: 0 -1.5rem 2rem -1.5rem;

    @media(min-width: 572px) {
        border: 5px solid $white;
        margin-top: 3rem;
        margin-bottom: 3rem;
    }

    @media(min-width: 992px) {
        margin-top: 6rem;
        margin-bottom: 7rem;
    }

    .video-js .vjs-big-play-button {
        background-color: $white;
        border-radius: 50%;
        box-shadow: 2px 2px 12px rgba(0,0,0,.4);
        border: none;
        height: 7rem;
        left: calc(50% - 3.5rem);
        top: calc(50% - 3.5rem);
        width: 7rem;
            @media(min-width: 572px) {
                height: 12rem;
                left: calc(50% - 6rem);
                top: calc(50% - 6rem);
                width: 12rem;
            }
    }

    .video-js .vjs-big-play-button .vjs-icon-placeholder:before,  
    .vjs-icon-play:before,
    .video-js .vjs-big-play-button:before, 
    .video-js .vjs-play-control:before{
        color: #000;
        font-size: 4rem;
        line-height: 7rem;
        @media(min-width: 572px) {
            font-size: 7rem;
            line-height: 12rem;
        }
    }

    .video-js .vjs-big-play-button:focus, 
    .video-js:hover .vjs-big-play-button {
        background-color: rgba($white, .8);
        box-shadow: none;
    }

    .video-js .vjs-progress-control {
        bottom: 0;
    }

    .video-js .vjs-progress-control .vjs-progress-holder {
        margin: 0;
    }

    .video-js .vjs-progress-control {
        bottom: 1.6em;
        position: absolute;
        width: 100%;
    }

    .video-js .vjs-load-progress {
        div {
            background-color: #90969f;
        }
    }

    .video-js .vjs-play-progress {
        background-color: $ns-yellow;
    }

    .video-js .vjs-control-bar {
        background-color: rgba(0,0,0,1);
    }

    .video-js .vjs-slider {
        background-color: rgba(255,255,255,.4);
    }

    .video-js .vjs-time-tooltip, 
    .video-js .vjs-mouse-display:after, 
    .video-js .vjs-play-progress:after {
        display: none;
    }
}
