.overlay-content {
    display: none;
}
.hds-overlay { 
    background: #333;
    background: rgba(0, 0, 0, 0.75);
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    padding: 0 5%;
    z-index: 99;
}
.hds-overlay .container {
    background-color: #000000;
    margin: 20px auto 0 auto;
    position: relative;
    max-width: 900px;
}
.hds-overlay .container .content {
    margin: auto;
    padding: 0;
}

.hds-overlay .container .close-overlay{
	display: inline-block;
    position: absolute;
    top: -25px;
    right: -35px;
}

.hds-overlay .container .content .overlay-content {
    padding: 10px 20px;
}
.hds-overlay .container .innerContent {
    padding: 0;
    text-align: center;
    background:#000000;
}
.hds-overlay .container .innerContent h2 {
    margin-bottom: 0.5em;
}
.hds-overlay .container .innerContent.scrollable {
    overflow-y: scroll;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}
.hds-overlay img {
    max-width: 100%;
}

.hds-overlay .container .loading {
    position: absolute;
    width: 100%;
    border: 1px solid black;
}
.hds-overlay .container .loading .padding {
    padding-top: 50%;
}
.hds-overlay .container .loading .img-section {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    font: 0/0 a;
}
.hds-overlay .container .loading .img-section:before {
    content: ' ';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}
.hds-overlay .container .loading .img-section img {
    vertical-align: middle;
    display: inline-block;
}

/******video overlay width management starts**********/
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 736px) 
and (orientation : landscape) {
	.hds-overlay .container .content{
		width:85%;
	}
}
@media only all and (max-width: 360px) {
    .hds-overlay .innerContent embed, .innerContent object, .BrightcoveExperience {
        height: 100%;
        width: 98%;
        min-height:135px;
    }
    
    .hds-overlay .innerContent{min-height:0 !important;}
    .hds-overlay .container .close-overlay{
        right:0;
    }
	.video-js .vjs-dock-shelf{
		right: 15px;
	}
}

@media only all and (min-width: 701px) and (max-width: 850px) {
    .hds-overlay .innerContent embed, .hds-overlay .innerContent object, .hds-overlay .BrightcoveExperience {
        height: 100%;
        width: 98%;
        min-height:450px;
    }
    .hds-overlay .innerContent{min-height:0 !important;}    
    .hds-overlay .container .close-overlay{
        right:0;
    }
}

@media only all and (min-width: 361px) and (max-width: 700px) {
    .hds-overlay .innerContent embed, .hds-overlay .innerContent object, .hds-overlay .BrightcoveExperience {
        height: 100%;
        width: 98%;
        min-height:240px;
    }
    .hds-overlay .innerContent{min-height:0 !important;}    
    .hds-overlay .container .close-overlay{
        right:0;
    }
}
@media (min-width: 768px){
.container {
     width: auto;
}
}
@media only all and (min-width: 851px){
    .hds-overlay .innerContent embed, .hds-overlay .innerContent object, .hds-overlay .BrightcoveExperience {
        width:100%
    }       
}
.vjs-social-share-links a:focus{
        color:#fff;
}
.video-js .vjs-dock-description, .vjs-social-description{
        display:none !important;
}

.vjs-social-overlay .vjs-social-share-link:focus {
    color: #ffffff;
}
.vjs-social-overlay .vjs-social-share-link:hover {
    color: #23527c;
}

.vjs-icon-play, .video-js .vjs-big-play-button, .video-js .vjs-play-control,
.vjs-icon-share,
.vjs-icon-facebook,
.vjs-icon-twitter,
.vjs-icon-cancel, .video-js .vjs-control.vjs-close-button,
.vjs-icon-volume-high, 
.video-js .vjs-mute-control,
.video-js .vjs-volume-menu-button,
.vjs-icon-fullscreen-enter,
.video-js .vjs-fullscreen-control,
.vjs-icon-replay{
    font-family:VideoJS !important
}
@media only screen and (max-width: 991px) {
	.hds-overlay .container .close-overlay{
		top: -30px;
	}
	.icon-close-hero{
		margin-right:0;
	}
}
@media screen and (orientation:landscape) and (min-device-width: 319px) and (max-device-width: 800px) {
   .hds-overlay .container{
	   margin-top:40px !important;
   }
}

.hds-overlay .icon-close-hero {
    background-image: url(https://www.hitachivantara.com/etc/clientlibs/hdscorp/main/images/hv-close-icon.png);
    background-repeat: no-repeat;
    width: 22px;
    height: 22px;
    margin-right: 10px;
}
.hds-overlay .sprite {
    display: inline-block;
}