/********** Play buttons ********/
.play-container {
     position: absolute;
     right: 50px;
     bottom: 50px;
}
.player {
     background: none;
     width: 40px;
     height: 40px;
     border: solid 3px #fff;
     border-radius: 100%;
     position: relative;
     text-indent:-9999px;
     box-shadow: 1px 1px 3px #999999;
     right: 58px;
     bottom: -47px;
}
.player span {
     width: 0;
     height: 0;
     border-top: 10px solid transparent;
     border-left: 15px solid #EAB002;
     border-bottom: 10px solid transparent;
     position: absolute;
     top: 20%;
     left: 35%;
}
.player:hover{
    border: solid 3px #CD0027;
}
.player:hover span{
     top: 20%;
     left: 34%;
     border-left: 16px solid #CD0027;
}
.pause {
     background: none;
     width: 40px;
     height: 40px;
     border: solid 3px #fff;
     border-radius: 100%;
     position: relative;
     text-indent:-9999px;
     box-shadow: 1px 1px 3px #999999;
     right: 8px;
     bottom: -7px;
}
.pause span {
    box-sizing: border-box;
    width: 0;
    height: 20px;
    border-style: double;
    border-width: 0px 0 0px 13px;
    border-color: transparent transparent transparent #EAB002;
    cursor: pointer;
    top: 20%;
    left: 32%;
    position: absolute;
}
.pause:hover {
    border: solid 3px #CD0027;
}
.pause:hover span {
    border-color: transparent transparent transparent #CD0027;
}
/******************/
/********** Image Header Update 2023 ********/
.umsl-secondary-text{
    color:#fff;
    font-family:'Oswald', sans-serif;
    font-weight:500;
}


.image-overlay {
    background: linear-gradient(60deg,#121212,hsla(0,0%,7%,.97087) 14.29%,hsla(0,0%,7%,.9103) 25.32%,hsla(0,0%,7%,.82477) 33.77%,hsla(0,0%,7%,.72074) 40.26%,hsla(0,0%,7%,.6047) 45.45%,hsla(0,0%,7%,.48313) 50%,hsla(0,0%,7%,.36249) 54.55%,hsla(0,0%,7%,.24926) 59.74%,hsla(0,0%,7%,.14992) 66.23%,hsla(0,0%,7%,.07095) 74.68%,hsla(0,0%,7%,.01882) 85.71%,hsla(0,0%,7%,0));
    transition: opacity .4s cubic-bezier(.645,.045,.355,1) .3s;
    opacity:0.3;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    pointer-events: none;
}
.image-hero--content {
    text-align: left;
    color: #fff;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0px auto;
    display: flex;
    align-items: flex-end;
    z-index: 3;
    /*padding:0px 0px 60px 30px;*/
    padding:0px 0px 20px 20px;
    width:1200px;
}
/*
.image-hero--content h1 {
    font-size:calc(1.5vw + 45px);
    position:relative;
    line-height:1.2;
    top: 35px;
}
*/
.cf:before, .cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
.header-image-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 590px;
}

.banner-image {
    position: absolute;
    min-width: 100%;
    object-fit: cover;
    object-position: center;
    height:100%;
}
 .image-js {
    color: #fff;
}

.header-image-wrapper-color{
    position: relative;
    overflow: hidden;
    width: 100%;
    margin-bottom:10px;
}
.header-image-wrapper-color::after {
    content: "";
    display: inline-block;
    width: 100%;
    height: 11px;
    position: absolute;
    bottom: 0px;
    left: 0;
    z-index: 1;
    background: url(https://www.umsl.edu/files/images/umsl-colorblock.jpg);
    background-position: 50px -4px;
}


@media screen and (max-width: 576px){
.header-image-wrapper-color{
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 510px;
    margin-bottom:0px;
}
}
@media(min-width:768px){
    .image-hero--content {
        padding: 0px 0px 50px 20px;
	    width: 100%;
	}


}
@media(min-width:992px){
	.image-hero--content {
        width: 992px;
    }


}
@media(min-width:1200px){
	.header-image-wrapper {
	    height:420px;
	}
	.image-hero--content {
        width:1200px;
    }
	
	
}
@media(min-width:1400px){
    .header-image-wrapper {
	    height:520px;
	}
}

/***** Video header styles*****/ 
.navigation{
  position:absolute;
  top:0px;
  width:100%;
  z-index:1;
  
}
.navigation::after{
    position: absolute;
    left: 0;
    top: 0;
    z-index:-1;
    content: '';
    display: block;
    width: 100%;
    opacity: 0.8;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.77)), to(rgba(0, 0, 0, 0)));
    /* background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.77) 0%, rgba(0, 0, 0, 0) 100%); */
    opacity: 0.8;
    height: 35.9%;
    height: 359px;
}
 @media screen and (max-width: 580px) {
     .navigation::after{
         height: 100px;
    }
}

.banner-video-wrapper{
    display: flex;
    align-items: flex-end;
    padding: 0px 0px 70px 0px;
     height: 95vh
}


 .btn-video{
     border:0px;
     border-radius:0px;
     cursor:pointer;
     background:transparent;
     text-align:center;
     color:#eab002;
}
 .button-text{
     font-weight:bold;
     font-size:20px;
}
 .button-text:hover{
     color:#fff;
}
 .btn-video .fa-play-circle-o{
     font-size:20px;
     margin-right:10px;
}
 .btn-video a:hover{
     color:#fff;
}
 .btn-video:hover{
     color:#fff;
     -o-transition:color .1s ease-out, color .1s ease-in;
     -ms-transition:color .1s ease-out, color .1s ease-in;
     -moz-transition:color .1s ease-out, color .1s ease-in;
     -webkit-transition:color .21 ease-out, color .1s ease-in;
     transition:color .1s ease-out, color .1s ease-in 
}
 .demo-video-wrapper {
     background-image: url();
     background: rgba(0, 0, 0, 0.1);
}
/* Video overlay and content */
 .video-overlay {
     position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
     pointer-events: none;
}
 .video-hero--content {
     position: relative;
     z-index:3;
     text-align: left;
     color: #FFF;
     text-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
}

.video-hero--content a{
    text-shadow:none;
}
@media screen and (min-width: 20em) {
    h1.hero-text{
        font-size: calc(2.6em + 1.4*((100vw - 20em) / 80));
    }
}



 .cf:before, .cf:after {
     content: " ";
     display: table;
}
 .cf:after {
     clear: both;
}
 .page-width {
     width: 92%;
     max-width: 960px;
     margin: 0 auto;
}
 .title {
     display: block;
     font-size: 18px;
}
 .subtitle {
     display: block;
     font-weight: normal;
     font-size: 15px;
     color: #959699;
}
/* CSS from jQuery Background Video plugin */
/** * Set default positioning as a fallback for if the plugin fails */
 .jquery-background-video-wrapper {
     position: relative;
     overflow: hidden;
     background-position: center center;
     background-repeat: no-repeat;
     background-size: cover;
}
 .jquery-background-video {
     position: absolute;
     min-width: 100%;
     min-height: 100%;
     width: auto;
     height: auto;
     top: 50%;
     left: 50%;
     -o-object-fit: contain;
     object-fit: contain;
     -webkit-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
}
/** * Fade in videos * Note the .js class - so non js users still * see the video */
 .js .jquery-background-video {
     opacity: 0;
     -webkit-transition: opacity 300ms linear;
     transition: opacity 300ms linear;
}
 .js .jquery-background-video.is-visible {
     opacity: 1;
}
/** * Pause/play button */
 .jquery-background-video-pauseplay {
     position: absolute;
     background: transparent;
     border: none;
     box-shadow: none;
     width: 20px;
     height: 20px;
     top: 50px;
     right: 15px;
     padding: 0;
     cursor: pointer;
     outline: none !important;
}
 .jquery-background-video-pauseplay span {
     display: none;
}
 .jquery-background-video-pauseplay:after, .jquery-background-video-pauseplay:before {
     content: "";
     position: absolute;
     left: 0;
     top: 0;
     -webkit-transition: all .3s ease;
     transition: all .3s ease;
}
 .jquery-background-video-pauseplay.play:before {
     border-top: 10px solid transparent;
     border-bottom: 10px solid transparent;
     border-left: 15px solid #FFF;
}
 .jquery-background-video-pauseplay.pause:before, .jquery-background-video-pauseplay.pause:after {
     border-top: 10px solid #FFF;
     border-bottom: 10px solid #FFF;
     border-left: 5px solid #FFF;
}
 .jquery-background-video-pauseplay.pause:after {
     left: 10px;
}
 .video-js {
     color: #fff;
}
 .vjs-default-skin .vjs-big-play-button {
     font-size: 3em;
     line-height: 1.5em;
     height: 1.5em;
     width: 3em;
     border: 0.06666em solid #fff;
     border-radius: 0.3em;
     left: 0.5em;
     top: 0.5em;
}
 .video-js .vjs-control-bar, .video-js .vjs-big-play-button, .video-js .vjs-menu-button .vjs-menu-content {
    /* IE8 - has no alpha support */
     background-color: #2B333F;
    /* Opacity: 1.0 = 100%, 0.0 = 0% */
     background-color: rgba(43, 51, 63, 0.7);
}
/* Slider - used for Volume bar and Progress bar */
 .video-js .vjs-slider {
     background-color: #73859f;
     background-color: rgba(115, 133, 159, 0.5);
}
/* The slider bar color is used for the progress bar and the volume bar (the first two can be removed after a fix that's coming) */
 .video-js .vjs-volume-level, .video-js .vjs-play-progress, .video-js .vjs-slider-bar {
     background: #fff;
     position:absolute;
     top:0px;
}
/* The main progress bar also has a bar that shows how much has been loaded. */
 .video-js .vjs-load-progress {
    /* For IE8 we'll lighten the color */
     background: #73859f;
    /* Otherwise we'll rely on stacked opacities */
     background: rgba(115, 133, 159, 0.5);
}
/* The load progress bar also has internal divs that represent smaller disconnected loaded time ranges */
 .video-js .vjs-load-progress div {
    /* For IE8 we'll lighten the color */
     background: #73859f;
    /* Otherwise we'll rely on stacked opacities */
     background: rgba(115, 133, 159, 0.75);
}
 @media screen and (max-width: 1199px) {
     .video-hero--content {
         position: absolute;
         top: 30%;
         left: 10px;
         z-index: 5;
         margin:0;
    }
}
 @media screen and (max-width: 580px) {
     .jquery-background-video{
         top:10%;
    }
}
 .sr-only-focusable:active, .sr-only-focusable:focus {
     position: static;
     width: auto;
     height: auto;
     margin: 0;
     overflow: visible;
     clip: auto;
}
 [role="button"] {
     cursor: pointer;
}
 .modal-open {
     overflow: hidden;
}
 .modal-header .close{
     margin:10px 10px 0px 0px;
}
 .modal {
     display: none;
     overflow: hidden;
     position: fixed;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     z-index: 1050;
     -webkit-overflow-scrolling: touch;
     outline: 0;
}
 .modal.fade .modal-dialog {
     -webkit-transform: translate(0, -25%);
     -ms-transform: translate(0, -25%);
     -o-transform: translate(0, -25%);
     transform: translate(0, -25%);
     -webkit-transition: -webkit-transform 0.3s ease-out;
     -o-transition: -o-transform 0.3s ease-out;
     transition: transform 0.3s ease-out;
}
 .modal.in .modal-dialog {
     -webkit-transform: translate(0, 0);
     -ms-transform: translate(0, 0);
     -o-transform: translate(0, 0);
     transform: translate(0, 0);
}
 .modal-open .modal {
     overflow-x: hidden;
     overflow-y: auto;
}
 .modal-dialog {
     position: relative;
     width: auto;
     margin: 10px;
}
 .modal-content {
    /* min-width:500px;
     */
     position: relative;
     background-color: #ffffff;
     border: 1px solid #999999;
     border: 1px solid rgba(0, 0, 0, 0.2);
     border-radius: 6px;
     -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
     box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
     -webkit-background-clip: padding-box;
     background-clip: padding-box;
     outline: 0;
}
 .modal-backdrop {
     position: fixed;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     z-index: 1040;
     background-color: #000000;
}
 .modal-backdrop.fade {
     opacity: 0;
     filter: alpha(opacity=0);
}
 .modal-backdrop.in {
     opacity: 0.5;
     filter: alpha(opacity=50);
}
 .modal-header {
     padding: 0px;
     border-bottom: 0px;
}
 .modal-header .close {
     margin-top: -2px;
}
 .modal-title {
     margin: 0;
     line-height: 1.42857143;
}
 .modal-body {
     position: relative;
     padding: 15px;
}
 .modal-footer {
     padding: 0px;
     text-align: right;
     border-top: 0px;
     margin-bottom:0px;
     margin-top:0px;
}
 .modal-footer .btn + .btn {
     margin-left: 5px;
     margin-bottom: 0;
}
 .modal-footer .btn-group .btn + .btn {
     margin-left: -1px;
}
 .modal-footer .btn-block + .btn-block {
     margin-left: 0;
}
 .modal-scrollbar-measure {
     position: absolute;
     top: -9999px;
     width: 50px;
     height: 50px;
     overflow: scroll;
}
 @media (min-width: 768px) {
     .modal-dialog {
         width: 600px;
         margin: 30px auto;
    }
     .modal-content {
         -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
         box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    }
     .modal-sm {
         width: 300px;
    }
}
 @media (min-width: 992px) {
     .modal-lg {
         width: 900px;
    }
}
 .clearfix:before, .clearfix:after, .modal-header:before, .modal-header:after, .modal-footer:before, .modal-footer:after {
     content: " ";
     display: table;
}
 .clearfix:after, .modal-header:after, .modal-footer:after {
     clear: both;
}
 .video-modal .modal-content{
     background:#fff;
}
 .modal-dialog .video-modal .modal-header{
     border:0px;
}

 .modal.fade .modal-dialog {
     -webkit-transition: -webkit-transform 0.3s ease-out;
     -moz-transition: -moz-transform 0.3s ease-out;
     -o-transition: -o-transform 0.3s ease-out;
     transition: transform 0.3s ease-out;
}
 .modal.in .modal-dialog {
}
 .modal-dialog .btn-default {
     color: #888;
     background-color: #fff;
     border-color: #eee;
    /* padding: 10px;
     */
    /* width: 100px;
     */
     margin-bottom: 10px;
     margin-right: 10px;
     font-weight: bold;
     text-transform: uppercase;
     font-size: 11px;
     background: #eee;
}
 .modal-dialog .btn-default:hover{
     background:#981e32;
     color:#fff;
}

 .video-hero--content p {
     line-height:1.3;
     color: #fff;
     width: 60%;
     text-align: left;
     font-size:calc(1.1rem + 0.2vw);
} 

 @media only screen and (max-width: 580px) {
     .video-hero--content p{
         font-size:16px;
         width:100%;
    }
     .video-hero--content a {
         font-size:16px;
    }
}
 @media only screen and (max-width: 500px) {
     .jquery-background-video {
         top: 0%;
    }
     .video-hero--content{
         position: absolute;
         top: -10px;
         left: 0;
         z-index: 0;
         height: 100%;
         width: 100%;
         display: flex;
         margin: 0px!important;
         flex-wrap: nowrap;
         align-content: center;
         align-items:flex-start;
         flex-direction: column;
         justify-content: center;
    }
}