/** Carousel **/

/* Slider */

.list-inline-item a {
	display: inline-block;
}
.carousel-item .img-fluid{
    width: 100%;
} 
 
#myCarousel .list-inline {
    white-space:nowrap;
    overflow-x:auto;
}

#myCarousel .carousel-indicators {
    position: static;
    left: initial;
    width: initial;
    margin-left: initial;
    margin-top: -31px;
}

#myCarousel .carousel-indicators > li {
    width: initial; 
    height: initial;
    text-indent: initial;
}

#myCarousel .carousel-indicators > li.active img {
    opacity: 0.7;
}

.carousel-indicators li {
    opacity: 1;
    margin-right: -1px;
    margin-left: -3px;
    margin-top: -7px;
    margin-bottom: -6px;
}

@media (min-width:768px){ 
	.experience-row .item-row .card-img{
		min-height: 100px;
		max-height: 100px;
	}
}

.fct-img-block {
	position: relative;
	float: left;
	width: 100%;
	margin-bottom: 30px;
	figure {
		margin: 0;
		position: relative;
	}
	.fct-img-hover {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;		
		visibility: visible;
		opacity: 1;
		transition: .3s all ease;

		.fct-img-hover-inner{
			position: absolute;
			z-index: 99;
		 	left: 50%;
			top: 50%;
			visibility: visible;
			opacity: 1;
			transition: .3s all ease;
			transform: translate(-50%, -50%);
			transition: .3s all ease;
			text-align: center;
			background-color: rgba(0,0,0,.55);
			display: flex; 
			justify-content: center;
			align-items: center;
			padding-left: 20px;
			padding-right: 20px;
			min-height: 100px;
			h3 {
				color: $white;
				font-size: 1.1rem !important;
				line-height: 1.2 !important;
				transition: .3s all ease;
				opacity: 1;
				visibility: visible;
				position: relative;
			}
			span {
				color: rgba($white, .8);
				opacity: 1;
				visibility: visible;
				position: relative;
				bottom: -30px;
				transition: .5s all ease;
			}

		}
		
	}
	&:hover, &:focus {
		.fct-img-hover {
            visibility: visible;
            background: rgba($primary, .4);
			opacity: 1;
			.fct-img-hover-inner {
				visibility: visible;
				opacity: 1;
				animation-delay: 10s;
				h3 {
					opacity: 1;
					visibility: visible;
					bottom: 0px;
				}
				span {
					bottom: 0;
					visibility: visible;
					opacity: 1;
				}
			}
		}
	}
}

@media (min-width: 1024px) {
    .fct-img-block .fct-img-hover .fct-img-hover-inner h3 {
        font-size: 1.5rem!important;
    }
}