/* reference Pen URL: https://codepen.io/yogit/pen/rNpMByP?editors=0010  */
.owl-carousel .owl-nav button.owl-next, 
.owl-carousel .owl-nav button.owl-prev{
    position: absolute;
    top: 0;
    height: 100%;
    width: 20px;
    color: #fff;
    background-color: #fff4;
}
.owl-carousel .owl-nav button.owl-next {
    right:0px;
}
.owl-carousel .owl-nav button.owl-prev {
    left:0px;
}

.owl-item {
	flex-shrink: 0;
	width: 100%;
	height: 100%;
	position: relative;
	transition-property: transform;
	display: block;
}

.recentHandPickPost .owl-item .handpicked-post-thumbnail {
	background: linear-gradient(to bottom,#5153ba72 0%,#5153babb 50%,#5153ba 100%);
}
.recentHandPickPost .owl-item .owl-carousel-item {
    position: relative;
	width: 100%;
    height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
    overflow: hidden;
}
.handpicked-post-thumbnail * {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.handpicked-post-thumbnail::after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-width: 0;
	border-style: solid;
	border-color: rgba(255,255,255,.5);
	content: '';
	opacity: 0;
	-webkit-transform: rotate3d(0,0,1,45deg) scale3d(1,0,1);
	transform: rotate3d(0,0,1,45deg) scale3d(1,0,1);
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
}
.recentHandPickPost .owl-item .handpicked-post-thumbnail img {
    object-fit: cover;
	width: 100%;
	height: 100%;
	min-height: 350px;
	opacity: .7;
	-webkit-transform: translate3d(0%,0,0) scale(1.06);
	transform: translate3d(0%,0,0) scale(1.06);
	-webkit-transition: -webkit-transform .3s cubic-bezier(.4,0,.2,1),opacity .4s cubic-bezier(.4,0,.2,1);
	transition: transform .6s cubic-bezier(.4,0,.2,1),opacity .4s cubic-bezier(.4,0,.2,1);
	will-change: transform,filter,opacity;
}


.recentHandPickPost .owl-item .handpicked-post-thumbnail:hover img {
	opacity: .5;
	-webkit-transform: translate3d(3%,0,0) scale(1.06);
	transform: translate3d(3%,0,0) scale(1.06);
    transition: all 0.6s ease;
}
.recentHandPickPost .owl-item .handpicked-post-thumbnail .handpicked-read-more,
.recentHandPickPost .owl-item .handpicked-post-thumbnail p {
	opacity: 1;
	-webkit-transform: translateX(3%);
	transform: translateX(3%);
	-webkit-transition: -webkit-transform .3s cubic-bezier(.4,0,.2,1),opacity .4s cubic-bezier(.4,0,.2,1);
	transition: transform .3s cubic-bezier(.4,0,.2,1),opacity .4s cubic-bezier(.4,0,.2,1);
	will-change: transform,opacity;
}
.recentHandPickPost .owl-item .handpicked-post-thumbnail a.more {
	z-index: 99;
}

.recentHandPickPost .owl-item .handpicked-post-thumbnail .handpicked-overlay::before, 
.recentHandPickPost .owl-item .handpicked-post-thumbnail .handpicked-overlay::after {
	pointer-events: none;
}
a.handpicked-read-more {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 9;
}
.recentHandPickPost .owl-item .handpicked-post-thumbnail .handpicked-overlay {
	padding-bottom: 10%;
	-webkit-transition: -webkit-transform .35s;
	transition: transform .35s;
}
.recentHandPickPost .owl-item .handpicked-post-thumbnail .handpicked-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 12;
	text-align: left;
	cursor: pointer;
}
.handpickedPostMeta{
    color: #fff;
    font-size: 12px;
}

.recentHandPickPost .owl-item .handpicked-post-thumbnail:hover .handpicked-overlay, 
.recentHandPickPost .owl-item .handpicked-post-thumbnail:hover p {
	opacity: 1;
	-webkit-transform: translateX(0%);
	transform: translateX(0%);
}

/* small and extra-small screens */
@media (max-width: 767px) {
  .recentHandPickPost .carousel-inner .carousel-item > div {
    display: none;
    &:first-child {
      display: block;
    }
    .card-img-container img {
      max-width: 100%;
    }
  }
}

/* medium and up screens */
@media (min-width: 768px) {
  .recentHandPickPost {
    .carousel-inner {
      .carousel-item-end.active,
      .carousel-item-next {
        transform: translateX(25%);
      }
      .recentHandPickPost .carousel-item-start.active,
      .recentHandPickPost .carousel-item-prev {
        transform: translateX(-25%);
      }
      .recentHandPickPost .carousel-item.active,
      .recentHandPickPost .carousel-item-next,
      .recentHandPickPost .carousel-item-prev {
        display: flex;
      }
      .recentHandPickPost .carousel-item-end,
      .recentHandPickPost .carousel-item-start {
        transform: translateX(0);
      }
    }
  }
  .recentHandPickPost .card-img-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    img {
      display: inline-block;
      max-height: 100%;
      margin: 0 -50%;
    }
  }
}