/*
# ----------------------------------------------------------------------------- # ~/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
}