/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  height: 300px;
  margin-bottom: 30px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel .item {
  height: 300px;
  background-color: #777;
}

#myCarousel .carousel-inner > .item > img {
    height: 300px;
    left: 0;
    margin: 0 auto;
    min-width: 50%;
    position: relative;
    text-align: center;
    top: 0;
}

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */

/*
#myCarouselmodal{
	postion:absolute;left:50%;height:600px;margin:0 auto;width:50%;margin-left:-30%;text-align:center
}
*/

#myCarouselmodal{
	height: 75% !important;
}

#myCarouselmodal .carousel {
  height: 75%;
  margin-bottom: 30px;
}

#myCarouselmodal .carousel .carousel-caption {
  z-index: 10;
}


#myCarouselmodal .carousel .carousel-inner .carousel-inner .item {
  height: 100% !important;
  background-color: #777;
}
#myCarouselmodal .carousel-inner .carousel-inner > .item > img {
  position: relative;
  top: 0;
  left: 0;
  height: 100% !important;
	margin: 0 auto;
	
}

.carousel-inner-modal{
	height:100%;
	margin:0 auto;
	width:100%; 
	text-align:center;
	max-width: 1200px;
	max-height: 1600px;
}

html.wf-salsbury-n4-active.wf-active body.modal-open div#background-image div#jump_jack_bg div#wrapper div#myModal.modal.fade.modal-fullscreen.force-fullscreen.in div.modal-dialog div.modal-content div.modal-body div#myCarouselmodal.carousel.slide div.carousel-inner.carousel-inner-modal div.carousel-inner{
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 100% !important;
  width: 100% !important;
}

html.wf-salsbury-n4-active.wf-active body.modal-open div#background-image div#jump_jack_bg div#wrapper div#myModal.modal.fade.modal-fullscreen.force-fullscreen.in div.modal-dialog div.modal-content div.modal-body div#myCarouselmodal.carousel.slide div.carousel-inner.carousel-inner-modal div.carousel-inner div.item{
  height: 100% !important;
  background-color: #777;
}


/*------------IPHONE 5-----------*/
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) { 
	/* Carousel base class */
.carousel {
  width: 100%;
	height: auto;
  margin-bottom: 30px;
}
	
	/* Declare heights because of positioning of img element */
.carousel .item {
	width: 100%;
  height: auto;
  background-color: #777;
}
	
	#myCarousel .carousel-inner > .item > img {
    height: auto;
    left: 0;
    margin: 0 auto;
    min-width: 100%;
    position: relative;
    text-align: center;
    top: 0;
}
	
	
}