.carosuselControlFrame {position: absolute; top: 0; width: 100%; left: 0}

/*BUTTON CONTROL*/
.carouselControlBar {position: absolute; left: 0; bottom: 5px; height: 50px;display: flex;align-items: center;}
.carousel-control {color: var(--white); height: 35px; position: absolute; z-index: 99999; top: 0; background-color: var(--black);display: flex;justify-content: center;align-items: center;}
.carousel-control > span {display: flex;justify-content: center;align-items: center;}
.carousel-control.right {left: 80px; border-top-right-radius: 35px; border-bottom-right-radius: 35px}
.carousel-control.left {left: 10px; border-top-left-radius: 35px; border-bottom-left-radius: 35px}
.carousel-control.stopPlay{left: 45px;cursor: pointer; height: 35px}
.carousel-control:hover {opacity: 0.7}
.carousel-control:focus-visible {display: inherit;outline: 3px dashed #ec0016 !important;}
.carousel.slide.carouselNotAutoPlay .carousel-control.right {left: 43px}


/*INDICATOR CONTROL*/
.carousel-indicators {position: absolute;bottom: 16px;z-index: 15;width: 50%;left: 25%;padding-left: 0;text-align: center;list-style: none}
.carousel-indicators li {display: inline-block;width: 14px;height: 14px;margin: 0 5px;text-indent: -999px;cursor: pointer;border: 2px solid #fff;border-radius: 10px}
.carousel-indicators li:before {display: none !important}
.carousel-indicators .active {background-color: #fff;}

/*PROGRESS*/
#progressOut {height: 10px;position: absolute; width: 100%; bottom: 0; left: 0; background-color: #fff; box-shadow: inset 1px 1px 4px rgba(0,0,0,0.6); overflow: hidden}
#progress {height: 10px}

/*COPYTEXT*/
.carousel .itemHolder {position: relative}
.carousel .copytextLayer {position: absolute; bottom: 12px; right: 0px; left: 10px; text-align: right; font-size: 14px; color: #fff;text-shadow: 2px 2px 5px rgba(0,0,0,0.4);z-index: 1}
.carousel .copytextLayer span {position: absolute;bottom: 0;right: -100%;z-index: 1;padding: 0.5em 0.75em;color: #fff;background: rgba(19, 24, 33, 0.5);border-radius: 0.25rem 0 0 0;backdrop-filter: blur(20px);transition: all 0.2s cubic-bezier(0.15,0,0.45,1);}
.carousel .copytextLayer:before {color: #fff !important;background: rgba(19, 24, 33, 0.75) !important;position: absolute;bottom: 6px;right: 6px;z-index: 1;display: flex;align-items: center;justify-content: center;width: 1.5rem;height: 1.5rem;font-size: 1rem;line-height: 1.5rem;color: #131821;text-align: center;cursor: pointer;content: "\f1f9";font-family: "Font Awesome 5 Free";background: rgba(255, 255, 255, 0.5);border-radius: 10rem;backdrop-filter: blur(10px);transition: all 0.2s cubic-bezier(0.15,0,0.45,1)}
.carousel .copytextLayer:hover span {opacity: 1;right: 0;}
.carousel .copytextLayer:hover:before {opacity: 0}

/*TEXT OVERLAY*/
.carousel_pic {position: relative}
.carousel_layer {position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: rgba(0,0,0,0.65);display: flex;justify-content: center;align-items: center}
.carousel_layer > .inside, .carousel_layer > .inside a {color: #fff}
.carousel_layer > .inside a:after {display: none}
.carousel_layer.carouselTextBackground {background-color: rgba(0,0,0,0)}
.carousel_layer.carouselTextBackground .innerInside {background-color: var(--white); color: var(--default-textColor); display: inline-block; padding: 2rem}
.carousel_layer.carouselTextBackground .innerInside h1, .carousel_layer.carouselTextBackground .innerInside h2, .carousel_layer.carouselTextBackground .innerInside p {color: var(--default-textColor)}

/*TEXT BELOW PIC*/
.carousel.textBehind .carousel_layer {position: initial; background-color: rgba(0,0,0,0); display: block}
.carousel.textBehind .carousel_layer > .inside {color: var(--dark); width: 98%}

/*GENERALS*/
.carousel, .carousel > .inside {position: relative}
.carousel > .inside {padding-right: 0}
.carousel-inner {position: relative;width: 100%;overflow: hidden}
.carousel-inner > .item {position: relative;display: none;-webkit-transition: .6s ease-in-out left;-o-transition: .6s ease-in-out left;transition: .6s ease-in-out left;}
.carousel-inner > .item > a > img {display: block;max-width: 100%; height: auto;}
.carousel-inner > .item > img, .carousel-inner > .item > a > img {line-height: 1;min-width: 100%;max-height: 500px;}

@media all and (transform-3d), (-webkit-transform-3d) 
{
  .carousel-inner > .item {-webkit-transition: -webkit-transform .6s ease-in-out;-o-transition:-o-transform .6s ease-in-out;transition:transform .6s ease-in-out; -webkit-backface-visibility: hidden;backface-visibility: hidden;-webkit-perspective: 1000px;perspective: 1000px;}
  .carousel-inner > .item.next, .carousel-inner > .item.active.right {left: 0;-webkit-transform: translate3d(100%, 0, 0);transform: translate3d(100%, 0, 0);}
  .carousel-inner > .item.prev, .carousel-inner > .item.active.left {left: 0;-webkit-transform: translate3d(-100%, 0, 0);transform: translate3d(-100%, 0, 0);}
  .carousel-inner > .item.next.left, .carousel-inner > .item.prev.right,.carousel-inner > .item.active {left: 0;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}
}

.carousel-inner > .active,.carousel-inner > .next,.carousel-inner > .prev {display: block;overflow: hidden;}
.carousel-inner > .active {left: 0;}
.carousel-inner > .next,.carousel-inner > .prev {position: absolute;top: 0;width: 100%;}
.carousel-inner > .next {left: 100%;}
.carousel-inner > .prev {left: -100%;}
.carousel-inner > .next.left,
.carousel-inner > .prev.right {left: 0;}
.carousel-inner > .active.left {left: -100%;}
.carousel-inner > .active.right {left: 100%;}

@media(max-width: 768px)
{
	.carousel.slide, .carosuselControlFrame, .carousel_pic {height: 350px !important}		
	/*
	.carousel.slide, .carosuselControlFrame {height: 100% !important}
	.carousel_pic{height: 100% !important;min-height: 350px !important;position: absolute; top: 0; width: 100%; z-index: -1}
	.carousel_layer {position: initial;padding: 50px 0 80px 0;height: 100%;min-height: 350px;display: block;}
	.carousel-inner .item {height: 100% !important;min-height: 350px !important;}
	.carousel .itemHolder {position: absolute;height: 100%;bottom: 0;right: 0;top: 0;left: 0;}
	*/
	.carousel-indicators {display: none}
}