#content-wrapper {
    display: inline-block;
}

#agi-brightcove {
    display: inline-block;
    height: 100%;
    width: 100%;
}

#agi-brightcove video {
    position: relative;
}

#agi-brightcove #agi-spacer {
    height: auto;
    width: 100%;
    overflow: hidden;
}

#vjs-transcript-show {
    position: relative;
}

#agi-brightcove div.video-js {
    background-color: rgba(0, 0, 0, 0);
    display: inline-block;
    height: 100%;
    width: 100%;
}

/* Fix fullscreen not working on webkit browsers */
#agi-brightcove div.video-js.vjs-fullscreen {
    display: block;
}


#agi-brightcove div.video-js div.vjs-poster {
    background-color: rgba(0, 0, 0, 0);
    background-size: cover;
}

/* Override styles for AG BrightCove player */
#agi-brightcove .vjs-big-play-button {
    background: rgba(31, 105, 146, 0.8);/* overrides default of rgba(0, 0, 0, 0.45) */
    font-size: 4.5em;                   /* overrides default of 3.5em */
    height: 1.5em;                      /* overrides default of 2em */
    line-height: 1.5em;                 /* overrides default of 2em */
    margin-left: -.75em;                /* overrides default of 1em */
    margin-top: -.75em;                 /* overrides default of 1em */
    width: 1.5em;                       /* overrides default of 2em */
}

#agi-brightcove .vjs-big-play-button:hover,
#agi-brightcove .vjs-big-play-button:focus {
    background-color: #FFF;
    color: #4c87a8;
}

#agi-brightcove .vjs-control-bar {
    font-size: 0.75rem;    /* overrides the default of 10px */
}

#agi-brightcove .vjs-menu li.vjs-selected {
    color: inherit; /* overrides the default of #2B333F */
}

/* Caption styles */
.brightcove-captions {
    background-color: #000;
    font-size: 1.15em;
    line-height: normal;
    -khtml-opacity: 0.8;
    opacity: 0.8;
}

.vjs-caption-settings .vjs-tracksetting {
    text-align: left;
}


/* Play progress bar colors */

.video-js .vjs-progress-holder .vjs-load-progress,
.video-js .vjs-progress-holder .vjs-load-progress div {
    background-color: #E1E7F0;
}

.video-js .vjs-progress-holder .vjs-load-progress div {
    height: 100%;
}

.video-js .vjs-progress-holder .vjs-play-progress {
    background-color: #1d5678;
}

/* Volume control colors */
.vjs-volume-bar.vjs-slider-horizontal .vjs-volume-level {
    background-color: #457c9c;
}

/* Closed captioning selected color */
#agi-brightcove .vjs-menu li.vjs-selected {
    background-color: #457c9c;
}

@media only screen and (max-device-width: 767px) {
    /* Fix iOS having strange opinions on default styles */
    #agi-brightcove .vjs-big-play-button.ios {
        display: inline-block !important;
    }

    .brightcove-captions {
        font-size: 2.2em;
    }

    /* change size of language selection boxes */
    .vjs-menu li {
        font-size: 1em;
        padding: .2em !important;
    }

    /* adjust placement of caption settings box for mobile */
    .vjs-caption-settings {
        height: 100% !important;
        left: auto !important;
        margin-left: 0 !important;
        position: relative !important;
        top: auto !important;
        width: 100%;
    }

    /* adjust placement of video banner for mobile
        since the brightcove api stuff gives random
        broken results in repositioning the video
        layout was fixable by repositioning the parent container
    */
    .video-banner {
        margin-left: 20px;
    }

    #agi-brightcove #agi-spacer {
        height: auto;
    }
}


@media only screen and (max-width: 600px) {
    #agi-brightcove,
    #agi-brightcove div.video-js {
        height: 100% !important;
        width: 100% !important;
    }
}

@media only screen and (max-width: 650px) {
    #content-wrapper {
        display: flex;
        flex-direction: column;
    }

    #page-view #agi-brightcove,
    #page-view #agi-brightcove div.video-js {
        height: 100% !important;
        width: 100% !important;
    }
}