/*
|--------------------------------------------------------------------------
| Slick - for homepage
|--------------------------------------------------------------------------
*/
.slick-slide {
    display: flex !important;
    margin: 7px 20px;
    justify-content: center;
}
.slick-slide img {
	-webkit-box-shadow: 5px 4px 15px 1px rgba(50, 50, 50, .5);
 	-moz-box-shadow: 5px 4px 15px 1px rgba(50, 50, 50, .5);
 	box-shadow: 5px 4px 15px 1px rgba(50, 50, 50, .5);
}
.slick-slide img.vdo-cover-thumbnail {
	object-fit: cover;
	height: 200px;
	width: 100%;
}
.slick-slide figure figcaption {
	height: 40px;
	padding-top: 20px;
}
.slick-initialized .slick-track {
    display: flex;
    align-items: flex-end;
}
.slick-prev:before, .slick-next:before{
    color:red;
}
.slick-prev, .slick-next {
	width: 40px;
	height: auto;
	z-index:999;
	filter:opacity(0.2);
}
.slick-prev { margin-left: 5%;  }
.slick-next { margin-right: 5%; }


/*
|--------------------------------------------------------------------------
| Carousel - for shelf page
|--------------------------------------------------------------------------
*/
.carousel-caption {
	position: absolute;
	top: 10%;
	text-align: left;
}
.bg-caption-carousel {
	background-color: #777;
	opacity: 0.7;
}
.carousel-item img {
	max-height: 380px;
	-o-object-fit: cover;
   object-fit: cover;
}
.carousel-caption h4 {
	font-size: 1rem !important;
}
.carousel-caption p.lead {
	font-size: 0.8rem !important;
}
.carousel-caption .btn {
	padding: 5px 15px;
}
.custom-indicators li {
  width: 10px;
  height: 10px;
  margin: 0 5px;
  border-radius: 50%;
  background-color: #FFFFFF;
  border: 1px solid #FFFFFF;
  cursor: pointer;
}

.custom-indicators li.active {
  width: 12px;
  height: 12px;
  background-color: #60E1FE; 
  border-color: #60E1FE;
  margin: 0 5px;
}



/*
// Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap
*/
/*--- Small devices (landscape phones, 576px and up) ---*/
@media (min-width: 576px) {
	.carousel-caption h4 {
		font-size: 1rem !important;
	}
	.carousel-caption p.lead {
		font-size: 0.8rem !important;
	}
	.carousel-caption .btn {
		padding: 10px 15px;
	}
}

/*--- Medium devices (tablets, 768px and up) ---*/
@media (min-width: 768px) {
	.carousel-caption h4 {
		font-size: 1.5rem !important;
	}
	.carousel-caption p.lead {
		font-size: 1rem !important;
	}
	.carousel-caption .btn {
		padding: 10px 30px;
	}
	.slick-prev { margin-left: 4%;  }
	.slick-next { margin-right: 4%; }
}

/*--- Large devices (desktops, 992px and up) ---*/
@media (min-width: 992px) {
	.carousel-caption h4 {
		font-size: 1.7rem !important;
	}
	.carousel-caption p.lead {
		font-size: 1.2rem !important;
	}
}

/*--- Extra large devices (large desktops, 1200px and up) ---*/
@media (min-width: 1200px) {
	.carousel-caption h4 {
		font-size: 2rem !important;
	}
	.carousel-caption p.lead {
		font-size: 1.25rem !important;
	}
}