#carousel_inner {
float:left; /* important for inline positioning */
/* width:645px; * important (this width = width of list item(including margin) * items shown */
overflow: hidden;  /* important (hide the items outside the div) */
/* non-important styling bellow */
background: #fff;
padding:0;
margin:0;
}
/* Styles umgezogen in Fluid-Template Carousel.html 
#carousel_ul {
position:relative;
left:0;
list-style-type: none; 
margin: 0px;
padding: 0px;
width:9999px; 
padding-bottom:10px;
}

#carousel_ul li{
float: left; 
list-style-type: none !important;
list-style-image:none !important;
background: #eee;
color:#000;
transition: all .5s;
}

#carousel_ul li img {
cursor:pointer;
cursor: hand;
border:0px;
}
*/

#left_scroll, #right_scroll{
float:none;
height:30px;
width:35px;
margin-top: 5px;
position: absolute;
top: calc(50% - 60px);
z-index: 9;
}
#right_scroll {
	right: 30px;
}
#left_scroll {
	left: 30px;
}
#left_scroll a, #right_scroll a{
display:block;
border:0;
text-decoration:none;
cursor: pointer;
height:30px;
width:30px;
background: transparent url(../Icons/hori_large.png) no-repeat 0 0;
}
#right_scroll a{
	background-position: 0 -30px;
	margin-left:5px;
}
#left_scroll a:hover {
	background-position: -30px 0;
}
#right_scroll a:hover {
	background-position: -30px -30px;
}
#left_scroll a:active {
	background-position: -60px 0;
}
#right_scroll a:active {
	background-position: -60px -30px;
}
.camaliga_first a {
/* here you could display an inactive arrow */
}
.camaliga_last a {
/* here you could display an inactive arrow */
}
	
#carousel_ul li h4,
#carousel_ul li p {
	text-align: center;
	padding: 0 .5rem
}
#carousel_ul li h4 {
	font-size: 1.5rem;
	margin: 0.25rem 0 0 0;
}
#carousel_container {
	margin-left: 0;
}
.tx-camaliga {
	border: 0px solid #000;
	position: relative;
}
li.carousel_li h4 {
	font-size: 1.25rem;
	font-weight: 500;
	padding: 0.5rem 1rem 0 1rem;
	margin: 0;
	text-align: center;
}
li.carousel_li p {
	font-size: 1.25rem;
	font-weight: 300;
	padding: 0 1rem 0.25rem 1rem;
	margin: 0;
	text-align: center;
}

#c401 #carousel_inner:before {
	content: "";
	border-bottom: 2px solid var(--bs-primary);
  	border-top: 4px solid var(--bs-primary);
	display: block;
	position: absolute;
	top: 1px;
	margin: 0;
	z-index: 1;
	width: 1883px;
	height: 100%;
	max-height: 250px;
	/*background-color: rgba(0,0,0,0.5);*/
	background-image: linear-gradient(to right,rgba(var(--bs-tertiary-rgb),0.8) 0, rgba(var(--bs-tertiary-rgb),0.8) 751px, rgba(var(--bs-tertiary-rgb),0.0) 751px, rgba(var(--bs-tertiary-rgb),0.0) 1129px, rgba(var(--bs-tertiary-rgb),0.8) 1129px, rgba(var(--bs-tertiary-rgb),0.8) 1883px)
}

#c401 #carousel_ul401 li {
	background: transparent;
}
#c401 #carousel_ul401 li h4,
#c401 #carousel_ul401 li p {
	opacity: 0.2;
	transition: all .7s;
}

#c401 #carousel_ul401 li:nth-child(2),
#c401 #carousel_ul401 li:nth-child(4)  {
	background: transparent;
}
#c401 #carousel_ul401 li:nth-child(4) h4,
#c401 #carousel_ul401 li:nth-child(4) p {
	opacity: 1;
}

#c402 #carousel_inner {
	float: none;
	margin: auto;
}
#c402 #right_scroll {
	right: 5px;
}
#c402 #left_scroll {
	left: 5px;
}
#c402 #carousel_inner {
	min-height: 360px;
}


@media(min-width: 768px) {
    #c401 {
        display: block;
    }
    #c402 {
        display: none;
    }
}

@media (max-width: 1900px) {
    #c401 #carousel_inner {
        position: relative;
        left: calc( (100vw - 1880px) * 0.5);
    }
}
@media(max-width: 767px) {
	#left_scroll, #right_scroll{
		margin-top: 0;
		top: 100px;
		}
    #c401 {
        display: none;
    }
    #c402 {
        display: block;
    }
	#carousel_container {
		background-image: linear-gradient(to top,rgba(var(--bs-tertiary-rgb),0) 0, rgba(var(--bs-tertiary-rgb),0) 119px, rgba(var(--bs-tertiary-rgb),1) 119px,rgba(var(--bs-tertiary-rgb),1) 359px, rgba(var(--bs-tertiary-rgb),0) 359px, rgba(var(--bs-tertiary-rgb),0) 100%);
	}
	#carousel_ul402 li img {
		filter: brightness(1.0) !important;
	 }
}

@media(max-width: 400px) {
#c402 .frame-container.frame-container-default {
		padding: 0;
		margin: auto;
	}
}