#my-carousel,
.carousel .carousel-item {
	height: 500px;
	z-index: 1;
}

.carousel .carousel-item {
	background: var(--bg) no-repeat 50% 50%;
	background-size: cover;
}

#my-carousel .carousel-caption {
	/*
	position: absolute;
	top: 50%;
	-webkit-transform: translate(0, -50%);
	   -moz-transform: translate(0, -50%);
	    -ms-transform: translate(0, -50%);
	     -o-transform: translate(0, -50%);
	        transform: translate(0, -50%);
	text-align: left;
	*/
	background: rgba(0, 0, 0, 0.5);
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.5);
	position: unset;
    width: 70%;
	padding: 20px;
}

.carousel-caption * {
	--font-color: #fff!important;
    color: var(--font-color);
    text-decoration: none;
    text-shadow: 1px 1px 1px black;
}

.carousel-caption h5 {
	font-size: 40px;
}

.carousel-item img.bg {
    position: absolute;
    -o-object-fit: cover;
       object-fit: cover;
    top: 0;
    left: 0;
    height: 100%;
	width: 100%;
}

.carousel-item .mobile-link {
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
}

.carousel-control-next, 
.carousel-control-prev {
	z-index: 50;
}

@media screen and (max-width:767px) {
	#my-carousel,
	.carousel .carousel-item{
		height: 450px;
	}

	#my-carousel .carousel-caption p {
		font-size: 14px!important;
	}

	#my-carousel .carousel-caption h5 {
		font-size: 30px!important;
	}

	#my-carousel .carousel-control-next, .carousel-control-prev {
		width: 20px!important;
	}
}

@media screen and (max-width:575px) {
	#my-carousel,
	.carousel .carousel-item{
		height: 400px;
	}

	#my-carousel .carousel-caption {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	#my-carousel .carousel-caption h5 {
		font-size: 20px!important;
	}
}