/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */




.carousel-actions {
	position: absolute;
	color: #fff;
    text-align: center;
	width: 100vw;
	bottom: 0px;
}


.carousel-actions.learn-more {
	bottom: 10vh;
}


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

/* Carousel base class */

/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  bottom: 3rem;
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.full-page .carousel-item {
  height: 90vh;
}

.carousel-item > img {
  	position: absolute;
	top: 0;
	left: 0;
	min-width: 100vw;
	object-fit: cover;
	height: 100%;
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 50%;
}


/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 1.5rem;
  text-align: center;
}
.marketing h2 {
  font-weight: 400;
}
.marketing .col-lg-4 p {
  margin-right: .75rem;
  margin-left: .75rem;
}


/* Featurettes
------------------------- */

.featurette-divider {
  margin: 5rem 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.05rem;
}


/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 62em) {
  .featurette-heading {
    margin-top: 2rem;
  }
}

@media (max-width: 600px) {
	.featurette-divider {
		margin: 4rem 0;
	}
}


@media (max-width: 767px) {
  	

	
	.carousel-item .feature-img {
	    max-height: 460px;
		object-fit: cover;
		bottom: 20vh;
	}
	
	.carousel-actions.learn-more {
		bottom: 33vh;
	}
	
	

}




@media (min-width: 768px) {

/*
	.carousel-item {

		transition: -webkit-transform 20.6s ease-in-out;
		transition: transform 20.6s ease-in-out;
		transition: transform 20.6s ease-in-out,-webkit-transform 20.6s ease-in-out;
	}
*/

	.inline-slider .carousel-inner .carousel-item {
		margin-right: inherit;
	}

    /* show 3 items */
    .inline-slider .carousel-inner .active,
    .inline-slider .carousel-inner .active + .carousel-item,
    .inline-slider .carousel-inner .active + .carousel-item + .carousel-item {
        display: block;
    }
    
    .inline-slider .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
    .inline-slider .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
    .inline-slider .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
        transition: none;
    }
    
    .inline-slider .carousel-inner .carousel-item-next,
    .inline-slider .carousel-inner .carousel-item-prev {
      position: relative;
      transform: translate3d(0, 0, 0);
    }
    
    /*.inline-slider .carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -33.3333%;
        z-index: -1;
        display: block;
        visibility: visible;
    }*/
    
    /* left or forward direction */
    .inline-slider .active.carousel-item-left + .carousel-item-next.carousel-item-left,
    .inline-slider .carousel-item-next.carousel-item-left + .carousel-item,
    .inline-slider .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
    .inline-slider .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    
    /* farthest right hidden item must be abso position for animations */
    .inline-slider .carousel-inner .carousel-item-prev.carousel-item-right {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        display: block;
        visibility: visible;
    }
    
    /* right or prev direction */
    .inline-slider .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
    .inline-slider .carousel-item-prev.carousel-item-right + .carousel-item,
    .inline-slider .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
    .inline-slider .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
    }

}