#modal-lightbox {
  /* ----- Positioning ----- */
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  
  /* The code above makes sure that the
  lightbox covers the entire page*/
  
  /* ----- Visibility ----- */
  display: none;
  
  /* ----- Styling ----- */
  background-color: rgba(0, 0, 0, 0.85);
  
  /* Normally, most lightboxes do not use
  a completely solid black, but with about
  90-95% opacity so that the background is
  somewhat visible */
}

#video-wrapper {
  /* ----- Positioning ----- */
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  
  /* The code above makes sure the video is
  both vertically and horizontally centered
  to the screen */
  
  /* ----- Styling ----- */
  box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
  
  /* The code above is used to add a little shadow to the video making blend in better */
}

#iframe-video-lightbox{
  width: 47vw;
  height: 97vh;
}

@media (max-width: 1160px){
  #iframe-video-lightbox{
    width: 75vw;
    height: 97vh;
  }
  #close-btn-1 {
    top: 1% !important;
  }
}

@media (max-width: 1100px){
  #iframe-video-lightbox{
    width: 75vw;
    height: 97vh;
  }
  #close-btn-1 {
    top: 1% !important;
  }
}

@media (max-width: 1000px){
  #iframe-video-lightbox{
    width: 75vw;
    height: 97vh;
  }
  #close-btn-1 {
    top: 1% !important;
  }
}


@media (max-width: 900px){
  #iframe-video-lightbox{
    width: 75vw;
    height: 97vh;
  }
  #close-btn-1 {
    top: 1% !important;
  }
}

@media (max-width: 830px){
  #iframe-video-lightbox{
    width: 75vw;
    height: 97vh;
  }
  #close-btn-1 {
    top: 1% !important;
  }
}

@media (max-width: 740px){
  #iframe-video-lightbox{
    width: 75vw;
    height: 97vh;
  }
  #close-btn-1 {
    top: 1% !important;
  }
}

@media (max-width: 630px){
  #iframe-video-lightbox{
    width: 75vw;
    height: 97vh;
  }
  #close-btn-1 {
    top: 2% !important;
  }
}

@media (max-width: 573px){
  #iframe-video-lightbox{
    width: 75vw;
    height: 97vh;
  }
  #close-btn-1 {
    top: 4% !important;
  }
}

@media (max-width: 556px){
  #iframe-video-lightbox{
    width: 75vw;
    height: 97vh;
  }
  #close-btn-1 {
    top: 4% !important;
  }
}

@media (max-width: 490px){
  #iframe-video-lightbox{
    width: 75vw;
    height: 97vh;
  }
}


#close-btn-1 {
  /* ----- Text ----- */
  color: #9f9d9d;
  font-size: 35px;
  
  /* ----- Positioning ----- */
  position: fixed;
  top: 3%;
  right: 3%;
  z-index: 3;
  
  /* The code above is used to put the button on the upper right corner of the lightbox */
  
  /* ----- Transformations ----- */
  -webkit-transform: scale(1, 1);
  -moz-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -o-transform: scale(1, 1);
  transform: scale(1, 1);
  
   /* The code above is used to initialize the scale for the button so that it can be used in transitions */
  
  /* ----- Transitions ----- */
  -webkit-transition: transform .5s ease, color .5s ease;
  -moz-transition: transform .5s ease, color .5s ease;
  -ms-transition: transform .5s ease, color .5s ease;
  -o-transition: transform .5s ease, color .5s ease;
  transition: transform .5s ease, color .5s ease;
}

#close-btn-1:hover {
  /* ----- Text ----- */
  color: white;
  
  /* ----- Styling ----- */
  cursor: pointer;
  
  /* ----- Transformations ----- */
  -webkit-transform: scale(1.2, 1.2);
  -moz-transform: scale(1.2, 1.2);
  -ms-transform: scale(1.2, 1.2);
  -o-transform: scale(1.2, 1.2);
  transform: scale(1.2, 1.2);
  
    /* ----- Transitions ----- */
  -webkit-transition: transform .5s ease, color .5s ease;
  -moz-transition: transform .5s ease, color .5s ease;
  -ms-transition: transform .5s ease, color .5s ease;
  -o-transition: transform .5s ease, color .5s ease;
  transition: transform .5s ease, color .5s ease;
}