/* Display Video, orig from top picts and then Albums, but modified */
div.video_display_container {
    margin-left: auto;
    margin-right: auto;
    margin-top: 6px;
    margin-bottom: 6px;
    width: 100%;
    max-width: 960px;
}
div.video_container {
    /*width: 100%;*/
    /*height: 100%;*/
    margin-left: auto;
    margin-right: auto;
    /* max-width set inline to actual video size */
}
//#video_element {
//    width: 100%; /* these set here as well as inline */
//    height: 100%; /* inline needed so player controls at bottom of video*/
//}
div.audio_container {
    /*width: 100%;*/
    height: 60px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
div.video_title {
    text-align: center;
    font-size: 200%;
    margin-bottom: 4px;
}
div.video_description {
    margin-left: auto;
    margin-right: auto;
    padding: 0px 1em;
    clear: both;
}
div.video_length {
    float: right;
    text-align: right;
    color: grey;
    padding: 0em 1em;
}
div.video_date {
    float: left;
    text-align: left;
    color: grey;
    padding: 0em 1em;
}
div.video_other_versions {
    /* appears on same line as proceding floated divs */
    text-align: center;
    color: grey;
}
div.video_other_versions a:link,
div.video_other_versions a:visited {
    color: grey;
}

/*@media screen and (max-width: 800px) {
div.video_photographer {
    clear: both;
}
}*/

/* override default player */
.mejs__controls:not([style*="display: none"]) {
    background: rgba(100, 100, 100, 0.7) !important;
}


div.video_other_links {
    clear: both;
    text-align: center;
    margin-bottom: 6px;
}
div.video_other_grid {
    width: 24%;
    /*border: 1px solid grey;*/
    float: left;
    height: 180px;
    padding: 2px;
    text-align: center;
}
div.other_video_highlight {
    background-color: lightgrey;
}
div.other_video_img {
    
}
img.other_video_img {
    max-width: 100%;
}
div.other_video_text {
    
}

@media screen and (max-width:775px) {
div.video_other_grid {
    width: 32%;
}
}
@media screen and (max-width:560px) { /* unsure if it gets this narrow */
div.video_other_grid {
    width: 48%;
}
}

/* more videos displayed at end of an video */
div.more_video_container {
    width: 100%;
    height: 0px;
    background-color: #eee;
    overflow: hidden;
    -webkit-transition: height 2s, -webkit-transform 2s;
    transition: height 2s, transform 2s;
}
div.more_video_container_display {
    height: 220px !important;
}
div.more_video_title {
    font-size: 150%;
    margin-bottom: 6px;
    text-align: center;
}
div.more_video {
    float: left;
    width: 25%;
    text-align: center;
}
div.more_video_text {
    margin: 0px 0.5em;
}
div.more_video_text a:link, a:visited {
    color: black;
    text-decoration: none;
}
div.more_video_img {
    
}
img.more_video_img {
    width: 90%;
}