/*
 # -----------------------------------------------------------------------------
 # ~/assets/themes/j1/modules/carousel/css/theme/uno.css
 # J1 Carousel styles for Theme Uno
 #
 # Product/Info:
 # https://jekyll.one
 #
 # Copyright (C) 2023, 2024 Juergen Adams
 #
 # J1 Template is licensed under the MIT License.
 # See: https://github.com/jekyll-one-org/j1-template/blob/main/LICENSE.md
 # -----------------------------------------------------------------------------
*/

/* Gutter styles
 ------------------------------------------------------------------------------- */

/* NO gutter for the row the slider is placed */
.j1-owl-gutter.row {
margin-right: 0;
margin-left: 0;
}

.j1-owl-gutter > [class^="col-"], .j1-owl-gutter > [class^=" col-"] {
padding-right: 0;
padding-left: 0;
}

/* 2px gutter */
.j1-owl-gutter-2.row {
margin-right: -1px;
margin-left: -1px;
}
.j1-owl-gutter-2 > [class^="col-"], .j1-owl-gutter-2 > [class^=" col-"] {
padding-right: 1px;
padding-left: 1px;
}

/* Carousel items (text|image)
 ------------------------------------------------------------------------------- */

/* jadams, 2022-05-06: remove dotted link decoration */
.owl-carousel .owl-item > a {
  border-bottom: unset;
}

/* jadams, 2023-08-31: overload hover style */
.owl-carousel .owl-item > a:hover {
  color: rgba(0, 0, 0, 0.5) !important;
}

.owl-carousel .item p {
  margin: 3px;
  color: var(--bs-gray-500);
}

.owl-carousel .item img {
  opacity: 1;
  width: 100%;
  height: auto;
}

.slider-title {
  line-height: 1.25rem;
  font-size: 1.125rem;
  font-weight: 500;
  margin-bottom: .5rem;
}

/* Navigation buttons
 ------------------------------------------------------------------------------- */

.owl-btn {
  color: var(--bs-gray);
  background: var(--bs-gray-100);
  cursor: pointer;
  font-size: 18px;
  padding: 2px 9px;
  text-align: center;
}

.owl-btn:hover {
  color: var(--bs-white);
  background: var(--bs-green);
}

.owl-theme .owl-controls{
	margin-top: 10px;
	text-align: center;
}

.owl-theme .owl-controls .owl-buttons div {
    color: var(--bs-gray-900);
    display: inline-block;
    zoom: 1;
    margin: 5px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 500;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    background: var(--bs-primary);
}

/* Clickable class fix problem with hover on touch devices */
/* Use it for non-touch hover action */
.owl-theme .owl-controls.clickable .owl-buttons div:hover {
	opacity: 1;
	text-decoration: none;
}

/* Pagination
 ------------------------------------------------------------------------------- */

.owl-theme .owl-controls .owl-page{
	display: inline-block;
	zoom: 1;
}

.owl-theme .owl-controls .owl-page span {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  margin: 5px 7px;
  filter: Alpha(Opacity=50);
  opacity: 0.5;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  background: var(--bs-primary);
}

.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls.clickable .owl-page:hover span{
	opacity: 1;
}

/* If PaginationNumbers is true */
.owl-theme .owl-controls .owl-page span.owl-numbers{
	height: auto;
	width: auto;
	color: var(--bs-white);
	padding: 2px 10px;
	font-size: 12px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
}

/* preloading images */
.owl-item.loading{
	min-height: 150px;
	background: url(../../images/ajax-loader.gif) no-repeat center center
}

/* Captions
 ------------------------------------------------------------------------------- */

 .owl-carousel .container {
   display: table;
   height: inherit;
 }

 .owl-carousel .caption {
   display: table-cell;
 }

 .owl-carousel .caption h1,
 .owl-carousel .caption p,
 .owl-carousel .caption div {
   position: relative;
   margin-top: 2rem;
   margin-right: 2rem;
   margin-left: 2rem;
 }

 .owl-carousel .caption h1 span {
   padding: 0.25em 0;
   line-height: 180%;
 }

 /* Caption text
 ------------------------------------------------------------------------------- */

 .owl-item .carousel-caption {
   opacity: 0;
   position: absolute;
   bottom: 3px;
   left: 3px;
   right: 3px;
   font-size: 1rem;
   font-weight: 300;
   font-family: sans-serif;
   z-index: 10;
   padding-left: 10px;
 }

 .owl-item .carousel-caption:hover   {
   opacity: 1;
   -webkit-transition: opacity 500ms;
   -moz-transition: opacity 500ms;
   -o-transition: opacity 500ms;
   transition: opacity 500ms;
   background: rgba(0,0,0,0.5);
 }