@charset "utf-8";
/* CSS Document */
#absolute-div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Other styles */
  z-index: 1000; /* Lower z-index */
	display: none
}
  #video-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.7);
      display: none;
      justify-content: center;
      align-items: center;   
      
    }

    .close-button {
      position: absolute;
      top: 21.5%;
      right: 24%;
      background-color: red;
      color: white;
      border: none;
      border-radius: 50%;
      cursor: pointer;
		width: 50px;
		height: 50px;
		line-height: 50px;
		font-size: 18px
    }
	  #youtube-player{
		  top:20%;
		  left: 25%;
		  width: 50%;
		  height: 315px
	  }
@media screen and (max-width: 500px) {
	 .close-button {
      position: absolute;
      top: 5%;
      right: 0%;
      background-color: red;
      color: white;
      border: none;
      border-radius: 50%;
      cursor: pointer;
		width: 50px;
		height: 50px;
		line-height: 50px;
		font-size: 18px;
		 z-index: 1003
    }
	 #youtube-player{
		 position: absolute;
		  top:5%;
		  left: 0%;
		  width: 100%;
		  height: 315px;
		 z-index: 1002
	  }
}
@media screen and (min-width: 510px) and (max-width: 1100px) {
	 .close-button {
      position: absolute;
      top: 20%;
      right: 0%;
      background-color: red;
      color: white;
      border: none;
      border-radius: 50%;
      cursor: pointer;
		width: 50px;
		height: 50px;
		line-height: 50px;
		font-size: 18px;
		 z-index: 1003
    }
	 #youtube-player{
		 position: absolute;
		  top:20%;
		  left: 0%;
		  width: 100%;
		  height: 315px;
		 z-index: 1002
	  }
}