/*** 

  css_homepage_billboard.css
  
***/

.homepage #billboard-container {
  background-color: #ccc;
  height: 275px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center;
}
      
.homepage #billboard-links-container {
  background-color: #000;
  padding: 15px;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}
      
.homepage #billboard-links-container .button {
  color: #fff;
  padding: 8px 10px 6px 10px;
  margin: 5px;
}
      
.homepage #billboard-links-container .button {
  color: #fff;
  padding: 8px 10px 6px 10px;
  margin: 5px;
}


/* Video billboard backgrounds */

.homepage #billboard-container.video-bg {
  height: 175px;
  overflow: hidden;
}

.homepage #billboard-container.video-bg video {
  height: 100%;
  margin-left: -35%;
}


@media (min-width: 380px) and (max-width: 409.875px) {

  .homepage #billboard-container, 
  .homepage #billboard-container.video-bg {
    height: 200px;
  }
  
  .homepage #billboard-container.video-bg video {
    margin-left: -30%;
  }

}


@media (min-width: 410px) and (max-width: 499.875px) {

  .homepage #billboard-container, 
  .homepage #billboard-container.video-bg {
    height: 200px;
  }
  
  .homepage #billboard-container.video-bg video {
    margin-left: -25%;
  }

}


@media (min-width: 500px) and (max-width: 575.875px) {

  .homepage #billboard-container.video-bg {
    height: 275px;
  }
  
  .homepage #billboard-container.video-bg video {
    margin-left: -30%;
  }

}


@media (min-width: 1400px) {
  
  .homepage #billboard-container.video-bg video {
    margin-left: -20%;
  }

}


@media (min-width: 1600px) {
  
  .homepage #billboard-container.video-bg video {
    margin-left: -10%;
  }

}


@media (min-width: 1800px) {
  
  .homepage #billboard-container.video-bg video {
    margin-left: -5%;
  }

}


@media (min-width: 2000px) {
  
  .homepage #billboard-container.video-bg video {
    height: auto;
    width: 100%;
    margin-left: auto;
  }

}


/* Media queries for a given screen size or LARGER */

/* Extra small devices (portrait phones, less than 576px)
   No media query since this is the default in Bootstrap */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    
  .homepage #billboard-container,
  .homepage #billboard-container.video-bg {
    height: 350px;
  } 

}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    
  .homepage #billboard-container,
  .homepage #billboard-container.video-bg {
    height: 425px;
  }  
     
  .homepage #billboard-links-container {
    background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.6), rgba(0,0,0,.7), rgba(0,0,0,0.85));
    height: 9rem;
    position: relative;
    top: -9rem;
  }

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    
  .homepage #billboard-container,
  .homepage #billboard-container.video-bg {
    height: 550px;
  }

}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    
  .homepage #billboard-container,
  .homepage #billboard-container.video-bg {
    height: 625px;
  }

}




/* Media queries for a given screen size or SMALLER */

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
  .homepage #billboard-container {
    height: 200px;
  }
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {

}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {

}

/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {

}

/* Extra large devices (large desktops)
   No media query since the extra-large breakpoint has no upper bound on its width */