body {
  background-color: #eee;
}

.overlay-area{
  width:100%;
  height:100%;
  background:black;
  position: fixed;/* changed*/
  top:0;
  left:0;
  opacity: 0.6;
  cursor: pointer;
  display: none;
  z-index: 1500;/* changed*/
}

.vid_container{
	width: 600px;
	display:none;
	position:fixed; /*it can be fixed too*/
	left:0; right:0;
	top:25%;/*changed*/ bottom:0;
	margin:auto;
	
	z-index: 2500;/*changed*/
}

video {
	width: 600px;
	object-fit: inherit;
}

.open-btn{
  width:50px;
  cursor: pointer;
    position:absolute;
    top:0;
    left:0;
    right:0;
    margin:auto;
    margin-top: 20px;
	padding-top: 70px;/* changed*/
}


.close-btn{
	width:35px;
	height:35px;
	background-color: #555555;
	border-radius: 100%;
	cursor:pointer;
	z-index: 100;
	position: absolute;
	right:0;
	margin-top: -17px;
	margin-right: -17px;
	text-align: center;
}

.close-btn img{
	width:15px;
	margin-top: 10px;
}

video::-webkit-media-controls {
    overflow: hidden !important
}
video::-webkit-media-controls-enclosure {
    width: calc(100% + 32px);
    margin-left: auto;
}

.highlightButtonMultiple{
	width:30px !important;
	margin-top: -125.5px !important;
    margin-right: -91.5px !important;
}

.highlightButtonSingle{
	width:30px !important;
	 margin-top: -35.5px !important;
	 margin-right: 71px !important;
}
.resourceStubPlayButton{
	width:40px !important;
	margin-top: -52.005px !important;
    margin-right: 82px !important;
}
@media screen and (max-width: 900px) {
    video, .vid_container{
       width:400px;
    }

}

@media screen and (max-width: 600px) {
    video, .vid_container{
       width:300px;
    }
    .resourceStubPlayButton{
		width:40px !important;
		margin-top: -52.005px !important;
	    margin-right: 52px !important;
	}
}





    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
   /* IE10+ specific styles go here */  
   .highlightButtonMultiple {
      margin-top: -45px !important;
    }
}

/* Microsoft Edge Browser 12+ (All) - @supports method */

@supports (-ms-accelerator:true) {
   .highlightButtonMultiple {
      margin-top: -45px !important; 
    }
}

/* Firefox */

@-moz-document url-prefix() { 
  
  .highlightButtonMultiple{
      margin-top: -33px !important;
    }
    .highlightButtonSingle{
    	 margin-top: -27.5px !important;
    }
}