.video {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#big-video-wrap > div {
    height: 100% !important;
    width: 100% !important;
    left: 0 !important;
    object-fit: cover;
}

    #big-video-wrap > div video {
        height: 100% !important;
        width: 100% !important;
        object-fit: cover;
    }

.video-text-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 40;
    opacity: 0.0;
    -moz-opacity: 0.0;
    transition: visibility 0s linear 0s, opacity 2s ease-in-out 0.5s;
}

    .video-text-wrapper.inactive {
        opacity: 0.0;
        -moz-opacity: 0.0;
    }

    .video-text-wrapper.active {
        opacity: 1.0;
        -moz-opacity: 1.0;
    }

    .video-text-wrapper .video-text-panel {
        position: relative;
        margin: 0 auto;
        top: calc(50% - 72px);
        -webkit-transform: translateY(-90px);
        -ms-transform: translateY(-90px);
        transform: translateY(-90px);
        text-align: center;
    }


        .video-text-wrapper .video-text-panel h1 {
            margin-top: 0;
            margin-bottom: 24px;
            font-size: 3.6rem;
            line-height: 150%;
            font-weight: normal;
            text-transform: uppercase;
            letter-spacing: 0.25em;
            color: #ffffff;
            /*transition: color 1s ease-in-out;*/
        }


            .video-text-wrapper .video-text-panel h1.interim {
                color: #ffffff;
            }

        .video-text-wrapper .video-text-panel .video-text {
            /*font-size: 40px;*/
            /*text-transform: uppercase;*/
            /*color: #ffffff;*/
            /*letter-spacing: 8px;*/
            /*line-height: 60px;*/
            transition: all 0.7s ease-in-out;
        }

.video-action-button-wrapper {
    z-index: 30;
    position: absolute;
    left: 0;
    bottom: 145px;
    width: 100%;
    text-align: center;
    opacity: 1.0;
    -moz-opacity: 1.0;
    /*transition: bottom 2s ease-in-out;*/
}

    .video-action-button-wrapper.opening {
        bottom: 35%;
    }

    .video-action-button-wrapper.invisible {
        opacity: 0.0;
        -moz-opacity: 0.0;
    }


.video-action-button {
    display: inline-block;
    width: 220px;
    height: 50px;
    /*background-color: #ffffff;*/
    border: 3px solid #fff;
    border-radius: 6px;
    color: #ffffff;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 250%;
    letter-spacing: 0.25em;
    opacity: 1.0;
    -moz-opacity: 1.0;
    transition: opacity 1s ease-in-out;
}

.interim-action-button.inactive {
    opacity: 0.0;
    -moz-opacity: 0.0;
}

#video-nav-bar-wrapper {
    z-index: 1050;
    position: absolute;
    right: 0;
    bottom: 20px;
    width: 24px;
    height: 24px;
    /*right: 33px;*/
    opacity: 1.0;
    -moz-opacity: 1.0;
    transition: opacity 0.7s ease-in-out;
}

    #video-nav-bar-wrapper.inactive {
        opacity: 0;
        -moz-opacity: 0;
    }

/*#video-nav-bar {
    position: absolute;
    right: 0;
    text-align: center;
}

    #video-nav-bar .video-progress-step {
        display: inline-block;
        width: 40px;
        height: 4px;
        margin: 0 2px;
        background-color: #a8a6ab;
        cursor: pointer;
        margin-left: -4px;
    }

        #video-nav-bar .video-progress-step.active {
            background-color: #fff;
        }*/

/*#media-mode-wrapper {
    z-index: 3;
    height: 24px;
    text-align: left;
}*/

    /*#media-mode-wrapper .media-mode {
        display: inline-block;
        vertical-align: top;
        margin-right: 16px;
    }*/

        /*#media-mode-wrapper .media-mode.video-mode {
            margin-right: 16px;
        }

        #media-mode-wrapper .media-mode.images-mode {
            display: none;
        }*/

        /*#media-mode-wrapper .media-mode a {
            text-transform: uppercase;
            text-decoration: none;
            font-size: 0.6em;
            font-weight: bold;
            line-height: 24px;
            letter-spacing: 2px;
            color: #ffffff;
        }

            #media-mode-wrapper .media-mode a.active {
                color: #ccc;
            }*/

#video-nav-bar-wrapper .media-control-button {
    position: absolute;
    right: 33px;
    display: inline-block;
    width: 25px;
    height: 25px;
    cursor: pointer;
}

    #video-nav-bar-wrapper .media-control-button.pause {
        background: url(http://images.africatravelresource.com/cdn/images/sprites.png) no-repeat 0 -246px;
    }

    #video-nav-bar-wrapper .media-control-button.play {
        background: url(http://images.africatravelresource.com/cdn/images/sprites.png) no-repeat 0 -221px;
    }

    #video-nav-bar-wrapper .media-control-spacer {
        display: inline-block;
        width: 16px;
    }

#video-nav-bar-wrapper .media-mode {
    position: absolute;
    width: calc(50% - 48px);
}

    #video-nav-bar-wrapper .media-mode a {
        text-transform: uppercase;
        text-decoration: none;
        font-size: 0.6rem;
        font-weight: bold;
        line-height: 24px;
        letter-spacing: 2px;
        color: #ffffff;
    }

#video-nav-bar-wrapper .media-mode.images-mode {
    left: 0;
    text-align: right;
    padding-right: 48px;
}


#video-nav-bar-wrapper .media-mode.video-mode {
    right: 0;
    text-align: left;
    padding-left: 48px;
}


.scroll-down-wrapper {
    /*position: absolute;
    bottom: 24px;
    width: 32px;
    height: 16px;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 10px;
    font-weight: bold;
    line-height: 24px;
    letter-spacing: 2px;
    color: #ffffff;*/
    cursor: pointer;
    /*left: 50%;
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 1050;*/
    opacity: 1.0;
    -moz-opacity: 1.0;
    transition: opacity 0.7s ease-in-out;
}

    .scroll-down-wrapper:hover {
        /*color: #99ff00;*/
        color: rgba(85, 230, 127, 1.0);
    }

    .scroll-down-wrapper span {
        margin-left: -4px;
    }

    .scroll-down-wrapper.faded {
        opacity: 0.0;
        -moz-opacity: 0.0;
    }
    
.scroll-down-bg {
    background: url(http://images.africatravelresource.com/cdn/images/sprites.png) no-repeat 0 -118px;
    width: 34px;
    height: 19px;
}


/*.interim-content-body {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 300px;
    width: 1500px;
    margin: 0 auto;
    border-top: 1px solid #fff;
}*/

.interim-panel {
    display: none;
}

#interim-map-cover {
    z-index: -100;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #000;
    opacity: 0;
    -moz-opacity: 0;
    transition: opacity 0.5s ease-in-out, z-index 0s linear 0s;
}

    #interim-map-cover.active {
        z-index: 5000;
        opacity: 1.0;
        -moz-opacity: 1.0;
    }

    #interim-map-cover.complete {
        transition: opacity 0.5s ease-in-out 0s, z-index 0s linear 0.5s;
    }

#interim-map-panel {
    position: relative;
    opacity: 0;
    -moz-opacity: 0;
    transition: opacity 0.5s ease-in-out 0.25s;
}

    #interim-map-panel.active {
        display: block;
        opacity: 1.0;
        -moz-opacity: 1.0;
    }

.interim-text-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    z-index: 3;
    transition: visibility 0s linear 0s, opacity 0.5s ease-in-out;
}

    .interim-text-wrapper .interim-text-panel {
        position: relative;
        width: 640px;
        margin: 0 auto;
        /*margin-top: -80px;*/
        top: 20vh;
        /*-webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);*/
        text-align: center;
    }


        .interim-text-wrapper .interim-text-panel h1 {
            margin-top: 0;
            margin-bottom: 24px;
            font-size: 4.8rem;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 0.25em;
            color: #fff;
            transition: color 1s ease-in-out;
        }

            .interim-text-wrapper .interim-text-panel h1.interim {
                color: #fff;
            }

        .interim-text-wrapper .interim-text-panel .interim-text {
            font-size: 4.0rem;
            text-transform: uppercase;
            color: #ffffff;
            letter-spacing: 0.25em;
            line-height: 150%;
            transition: all 1s ease-in-out;
        }



.home-ani-bar {
    z-index: 40;
    position: absolute;
    width: 67vw;
    height: 2px;
    margin: auto;
    background-color: #fff;
    opacity: 0.0;
    -moz-opacity: 0.0;
    transition: all 1.2s ease-in-out;
}

    .home-ani-bar.visible {
        opacity: 1.0;
        -moz-opacity: 1.0;
    }

    .home-ani-bar .circle {
        position: relative;
        top: -3px;
        width: 8px;
        height: 8px;
        border-radius: 4px;
        background-color: #fff;
    }

#top-bar {
    top: calc(50% - 100px);
    right: calc(-67vw - 3px);
}

    #top-bar .circle {
        left: -3px;
    }

    #top-bar.active {
        right: 0;
    }
    
    #top-bar.short {
        right: 32%;
        width: 36%;
    }

    #top-bar.closed {
        top: 50%;
    }

    #top-bar.faded {
        opacity: 0.0;
        -moz-opacity: 0.0
    }

    #top-bar.nothing {
        width: 0px;
        right: 50%;
    }

#bottom-bar {
    top: calc(50% + 100px);
    left: calc(-67vw - 8px);
}

    #bottom-bar .circle {
        right: calc(-67vw);
    }


    #bottom-bar.active {
        left: 0;
    }
    
    #bottom-bar.short {
        left: 32%;
        width: 36%;
    }
    
        #bottom-bar.short .circle {
            right: calc(-100%);
        }

    #bottom-bar.closed {
        top: 50%;
    }

    #bottom-bar.faded {
        opacity: 0.0;
        -moz-opacity: 0.0
    }

    #bottom-bar.nothing {
        width: 0px;
        left: 50%;
    }
    

.video-text-wrapper .video-text-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-block;
    transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transition: all 1s ease-in-out;
    opacity: 0.0;
    -moz-opacity: 0.0
}

    .video-text-wrapper .video-text-panel.active {
        opacity: 1.0;
        -moz-opacity: 1.0
    }

.video-text-wrapper .video-text-panel h1 {
    margin-right: -12px;
    margin-bottom: 0;
}