/*--
    1. Import Default & Template CSS
----------------------------------------*/
/*Default*/
@import url('css/default.css');
/*Buttons*/
@import url('css/shortcode/buttons.css');
/*Headers*/
@import url('css/shortcode/header.css');
/*Templates*/
@import url('css/template/creative.css');
@import url('css/template/corporate.css?v1');
@import url('css/template/restaurant.css');
@import url('css/template/minimal.css');
@import url('css/template/photography.css');

/*--
    2. Custom CSS Goes Here
----------------------------------------*/
video#videobg { 
  position: absolute;
  top: 47%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  transform: translateX(-50%) translateY(-50%);
  background-size: cover;
  transition: 1s opacity;
}


@media (min-aspect-ratio: 16/9) {
  .video-foreground {
    height: 100%;
  }
}
@media (max-aspect-ratio: 16/9) {
  .video-foreground {
    width: 100%;
  }
}
@media all and (max-width: 600px) {
  .vid-info {
    width: 50%;
    padding: 0.5rem;
  }
  .vid-info h1 {
    margin-bottom: 0.2rem;
  }
}
@media all and (max-width: 500px) {
  .vid-info .acronym {
    display: none;
  }
}

.mfp-content {
    min-height:600px;
 }