/*
 # -----------------------------------------------------------------------------
 #  ~/assets/themes/j1/extensions/carousel/css/theme/uno.css
 #  J1 Carousel styles for J1 Theme Uno
 #
 #  Product/Info:
 #  https://jekyll-one.com
 #
 #  Copyright (C) 2019 Juergen Adams
 #
 #  J1 Template is licensed under the MIT License.
 #  See: https://github.com/jekyll-one/j1_template_mde/blob/master/LICENSE
 #
 # -----------------------------------------------------------------------------
*/

/* 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)
 ------------------------------------------------------------------ */

.owl-carousel .item p {
  margin: 3px;
}

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

/* Carousel title */
.slider-title {
  color: rgba(0, 0, 0, 0.6);
  line-height: 1.25;
  font-size: 1.25rem;
  font-weight: 500;
  font-style: italic;
  margin: 0 0 .25rem .25rem;
}

/* Carousel caption text
 ------------------------------------------------------------------ */

/* jadams, 2018-02-10: add caption styles */
.owl-item .carousel-caption {
  opacity: 0;
  position: absolute;
  bottom: 3px;
  left: 3px;
  right: 3px;
  color: white;
  font-size: 1rem;
  font-weight: 300;
  font-family: sans-serif;
  z-index: 10;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #fff;
  text-align: center;
}

.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);
}

span.carousel-caption a {
  color: #fff;
  text-decoration: none;
}


/* Carousel navigation (buttons)
 ------------------------------------------------------------------ */

.owl-btn {
  color: #777;
  cursor: pointer;
  font-size: 18px;
  padding: 2px 9px;
  text-align: center;
  background: #f5f5f5;
}

.owl-btn:hover {
  color: #fff;
  background: #72c02c;
}

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

.owl-theme .owl-controls .owl-buttons div{
	color: #FFF;
	display: inline-block;
	zoom: 1;
	*display: inline;/*IE7 life-saver */
	margin: 5px;
	padding: 3px 10px;
	font-size: 12px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
	background: #869791;
	filter: Alpha(Opacity=50);/*IE7 fix*/
	opacity: 0.5;
}

/* 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{
	filter: Alpha(Opacity=100);/*IE7 fix*/
	opacity: 1;
	text-decoration: none;
}

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

.owl-theme .owl-controls .owl-page{
	display: inline-block;
	zoom: 1;
	*display: inline;/*IE7 life-saver */
}

.owl-theme .owl-controls .owl-page span{
	display: block;
	width: 12px;
	height: 12px;
	margin: 5px 7px;
	filter: Alpha(Opacity=50);/*IE7 fix*/
	opacity: 0.5;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	background: #869791;
}

.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls.clickable .owl-page:hover span{
	filter: Alpha(Opacity=100);/*IE7 fix*/
	opacity: 1;
}

/* If PaginationNumbers is true */
.owl-theme .owl-controls .owl-page span.owl-numbers{
	height: auto;
	width: auto;
	color: #FFF;
	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
}