/* ==========================================================================
														FLICKITY OVERWRITES
========================================================================== */
/* ------------------------------- MAIN FLICKITY ON HOMEPAGE */
.vignette {
	position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 200px rgba(0,0,0,.9) inset;
}
/* ------------------------------- FADE IN IAMGES */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in.is-selected {
  opacity:0;  /* make things invisible upon start */
  -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
  -moz-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;

  -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:1s;
  -moz-animation-duration:1s;
  animation-duration:1s;
}
/* ------------------------------- ANIMATE THE CAPTION (FADE IN DOWN) */
.is-selected .animated {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-delay: .75s;
	animation-delay: .75s;
}
@keyframes fadeInDown {
	from {
		opacity: 0;
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0);
	}
	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}
.is-selected .fadeInDown {
	-webkit-animation-name: fadeInDown;
	animation-name: fadeInDown;
}
/* ------------------------------- POSITION THE BACKGROUND IMAGE */
#banner-carousel .carousel-cell {
	width: 100%;
	background-position: center center;
	background-size: cover;
}
/* ------------------------------- DOTS INDICATORS */
#banner-carousel .flickity-page-dots {
    bottom: 15px;
}
/* ------------------------------- POSITION THE CAPTION (CENTERED) */
.carousel-caption {
	top: 25%;
    right: 0;
    left: 0;
    width: 100%;
    font-size: 2rem;
    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.85);
    line-height: 1.7rem;
    padding: 0 5rem;
}
@media screen and (max-width: 435px) {
	.carousel-caption {
		top: 30%;
		font-size: 1.5rem;
		line-height: 1.5rem;
    	padding: 0 10px 20px 10px;
	}
}
/* ------------------------------- < PREVIOUS & NEXT > CHEVRONS */
.flickity-prev-next-button {
	width: 30px;
	height: 30px;
	background: transparent;
}
/* arrow color */
.flickity-prev-next-button.no-svg {
	color: white;
}
.flickity-prev-next-button:hover {
	background: transparent;
}
.flickity-prev-next-button:focus {
    box-shadow: none;
}
/* hide disabled button */
.flickity-prev-next-button:disabled {
	display: none;
}
/* LEFT/RIGHT CHEVRON BUTTONS ON THE INVENTORY LIST TEMPLATE and INVENTORY DETAIL TEMPLATE */
.item-img .flickity-prev-next-button,
#item-carousel .flickity-prev-next-button {
    background: #1a333d;
    border: 2px solid #fff;
}
/* ------------------------------- PREVIOUS & NEXT CHEVRONS "OUTSIDE" of FLICKITY CONTAINER */
#item-types .flickity-prev-next-button.previous,
#testimonials .flickity-prev-next-button.previous,
#manufacturer .flickity-prev-next-button.previous,
#featured .flickity-prev-next-button.previous {
    left: -30px;
}
#item-types .flickity-prev-next-button.next,
#testimonials .flickity-prev-next-button.next,
#manufacturer .flickity-prev-next-button.next,
#featured .flickity-prev-next-button.next {
    right: -30px;
}
@media screen and (max-width: 768px) {
	.flickity-prev-next-button {
		display: none;
	}
}

.flickity-page-dots {
	padding: 0 !important;
}

/* ==========================================================================
										FEATURED and SIMILAR ITEMS (FLICKITY)
========================================================================== */
.featured-items {
	height: 480px;
}
.featured-items .carousel-cell {
    width: 300px;
    height: 90%;
    margin: 0;
    counter-increment: gallery-cell;
}

.flickity-page-dots {
	counter-reset: a;
	position: relative;
	top: 20px;
}
.flickity-page-dots .dot {
    width: 25px;
    height: 25px;
    margin: 2px 2px;
}
.flickity-page-dots .dot::after {
	content: counter(a);
	counter-increment: a;
	position: relative;
    top: 4px;
    font-size: 11px;
}