#mybgcarousel{
  width:100%;
  height:400px;
}

@media (max-device-width: 800px) {
  #mybgcarousel{
	height:300px;
  }
}

@media (max-device-width: 600px) {
  #mybgcarousel{
	height:200px;
  }
}

/* ######### Shared CSS for various parts of carousel (in the event of multiple carousels) ######### */

div.bgcarousel{ /* shared CSS for main carousel container */
  background: black url(../image/ajaxload.gif) center center no-repeat; /* loading gif while caoursel is loading */
}

div.bgcarousel img.navbutton{ /* CSS for the nav buttons */
}

div.bgcarousel div.slide{ /* CSS for each image's DIV container within main container */
  background-color: black;
  background-position: center center; /* center image within carousel */
  background-repeat: no-repeat;
  background-size: cover; /* CSS3 property to scale image within container? "cover" or "contain" */
  color: black;
}

div.bgcarousel div.selectedslide{ /* CSS for currently selected slide */
}

div.bgcarousel div.slide div.desc{ /* DIV that contains the textual description inside .slide */
  position: absolute;
  color: white;
  left: 40px;
  top: 100px;
  width:200px;
  padding: 10px;
  font: bold 16px sans-serif, Arial;
  text-shadow: 0 -1px 1px #8a8a8a; /* CSS3 text shadow */
  z-index:5;
}

div.bgcarousel div.selectedslide div.desc{ /* CSS for currently selected slide's desc div */
}

div.bgcarousel div.slide div.desc h2{
  font-size:150%;
 margin:0;
}

div.bgcarousel div.slide div.desc a{
  color:yellow;
  text-decoration:none;
}