Current File : /home/obaba/public_html/assets/less/owl-carousel.less

/*===================================================================================*/
/*  OWL CAROUSEL
/*===================================================================================*/
#owl-main {
  text-align: center;
  cursor: default;
  height:368px;
}
#owl-main .owl-controls {
  display: inline-block;
  position: relative;
  margin-top: 40px;
}
/*.panel-group .panel .owl-controls {
  margin-top: 25px;
}
.panel-group.blank .panel .owl-controls {
  margin-top: 40px;
}*/
#owl-main .owl-pagination {
  position: relative;
  line-height: 30px;
}
#owl-main .owl-buttons {
  display:block;
}
#owl-main .owl-prev,
#owl-main .owl-next {
  display: inline-block;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 30px;
  height: 50px;
  font-size: 21px;
  background-color: #f2f2f2;
  border: none;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  margin: auto;
  -webkit-transition: all 200ms ease-out;
  -moz-transition: all 200ms ease-out;
  -o-transition: all 200ms ease-out;
  transition: all 200ms ease-out;
  opacity: 0;
}
#owl-main .owl-prev {
  left:20px;/* -35px;*/
}
#owl-main .owl-next {
  right: 20px;
}
#owl-main:hover .owl-prev {
  left: 0px;
  opacity: 0.5;
}
#owl-main:hover .owl-next {
  right: 0px;
  opacity:0.5;
}
#owl-main:hover .owl-prev:hover,
#owl-main:hover .owl-next:hover {
  opacity: 1;
}
#owl-main .owl-outer-nav:after {
  content: "";
  position: absolute;
  top: 0;
  left: -15%;
  width: 130%;
  height: 100%;
  z-index: 0;
}
#owl-main .owl-outer-nav .owl-wrapper-outer,
#owl-main .owl-outer-nav .owl-pagination,
#owl-main .owl-outer-nav .owl-prev,
#owl-main .owl-outer-nav .owl-next {
  z-index: 1;
}
#owl-main .owl-outer-nav .owl-controls {
  position: static;
}
#owl-main .owl-outer-nav .owl-prev {
  left: -65px;
}
#owl-main .owl-outer-nav .owl-next {
  right: -65px;
}
#owl-main .owl-outer-nav:hover .owl-prev {
  left: -80px;
}
#owl-main .owl-outer-nav:hover .owl-next {
  right: -80px;
}
#owl-main .owl-ui-md .owl-pagination {
  line-height: 45px;
}
#owl-main .owl-ui-md .owl-prev,
#owl-main .owl-ui-md .owl-next {
  width: 45px;
  height: 45px;
  font-size: 45px;
}
#owl-main .owl-ui-md .owl-prev {
  left: -55px;
}
#owl-main .owl-ui-md .owl-next {
  right: -55px;
}
#owl-main .owl-ui-md:hover .owl-prev {
  left: -60px;
}
#owl-main .owl-ui-md:hover .owl-next {
  right: -60px;
}
#owl-main .owl-outer-nav.owl-ui-md:after {
  left: -18%;
  width: 136%;
}
#owl-main .owl-outer-nav.owl-ui-md .owl-prev {
  left: -85px;
}
#owl-main .owl-outer-nav.owl-ui-md .owl-next {
  right: -85px;
}
#owl-main .owl-outer-nav.owl-ui-md:hover .owl-prev {
  left: -100px;
}
#owl-main .owl-outer-nav.owl-ui-md:hover .owl-next {
  right: -100px;
}
#owl-main .owl-ui-lg .owl-pagination {
  line-height: 60px;
}
#owl-main .owl-ui-lg .owl-prev,
#owl-main .owl-ui-lg .owl-next {
  width: 60px;
  height: 60px;
  font-size: 42px;
}
#owl-main .owl-ui-lg .owl-prev {
  left: -75px;
}
#owl-main .owl-ui-lg .owl-next {
  right: -75px;
}
#owl-main .owl-ui-lg:hover .owl-prev {
  left: -80px;
}
#owl-main .owl-ui-lg:hover .owl-next {
  right: -80px;
}
#owl-main .owl-outer-nav.owl-ui-lg:after {
  left: -22%;
  width: 144%;
}
#owl-main .owl-outer-nav.owl-ui-lg .owl-prev {
  left: -105px;
}
.owl-outer-nav.owl-ui-lg .owl-next {
  right: -105px;
}
#owl-main .owl-outer-nav.owl-ui-lg:hover .owl-prev {
  left: -120px;
}
#owl-main .owl-outer-nav.owl-ui-lg:hover .owl-next {
  right: -120px;
}
#owl-main .owl-inner-nav .owl-controls {
  position: static;
}
#owl-main .owl-inner-nav .owl-prev {
  left: 45px;
}
#owl-main .owl-inner-nav .owl-next {
  right: 45px;
}
#owl-main .owl-inner-nav:hover .owl-prev {
  left: 30px;
}
#owl-main .owl-inner-nav:hover .owl-next {
  right: 30px;
}
#owl-main .owl-outer-nav .owl-prev,
#owl-main .owl-outer-nav .owl-next,
#owl-main .owl-inner-nav .owl-prev,
#owl-main .owl-inner-nav .owl-next {
  bottom: 70px;
}
#owl-main .owl-outer-nav.owl-ui-md .owl-prev,
#owl-main .owl-outer-nav.owl-ui-md .owl-next,
#owl-main .owl-inner-nav.owl-ui-md .owl-prev,
#owl-main .owl-inner-nav.owl-ui-md .owl-next {
  bottom: 85px;
}
#owl-main .owl-outer-nav.owl-ui-lg .owl-prev,
#owl-main .owl-outer-nav.owl-ui-lg .owl-next,
#owl-main .owl-inner-nav.owl-ui-lg .owl-prev,
#owl-main .owl-inner-nav.owl-ui-lg .owl-next {
  bottom: 100px;
}
#owl-main .owl-inner-pagination .owl-pagination,
#owl-main .owl-inner-pagination .owl-prev,
#owl-main .owl-inner-pagination .owl-next {
  margin-top: -40px;
  top: -60px;
}
#owl-main .owl-inner-pagination.owl-ui-md .owl-pagination,
#owl-main .owl-inner-pagination.owl-ui-md .owl-prev,
#owl-main .owl-inner-pagination.owl-ui-md .owl-next {
  margin-top: -50px;
  top: -65px;
}
#owl-main .owl-inner-pagination.owl-ui-lg .owl-pagination,
#owl-main .owl-inner-pagination.owl-ui-lg .owl-prev,
#owl-main .owl-inner-pagination.owl-ui-lg .owl-next {
  margin-top: -60px;
  top: -75px;
}
#owl-main .owl-inner-pagination.owl-outer-nav .owl-prev,
#owl-main .owl-inner-pagination.owl-outer-nav .owl-next,
#owl-main .owl-inner-pagination.owl-inner-nav .owl-prev,
#owl-main .owl-inner-pagination.owl-inner-nav .owl-next {
  margin: auto;
  top: 0;
  bottom: 43px;
}
#owl-main .owl-inner-pagination .owl-pagination {
  -webkit-transition: all 200ms ease-out;
  -moz-transition: all 200ms ease-out;
  -o-transition: all 200ms ease-out;
  transition: all 200ms ease-out;
  opacity: 0;
}
#owl-main .owl-inner-pagination:hover .owl-pagination {
  opacity: 1;
}
#owl-main .owl-inner-pagination.owl-inner-nav .owl-pagination,
.owl-inner-pagination.owl-outer-nav .owl-pagination {
  top: -45px;
}
.owl-inner-pagination.owl-inner-nav.owl-ui-md .owl-pagination,
.owl-inner-pagination.owl-outer-nav.owl-ui-md .owl-pagination {
  top: -50px;
}
.owl-inner-pagination.owl-inner-nav.owl-ui-lg .owl-pagination,
.owl-inner-pagination.owl-outer-nav.owl-ui-lg .owl-pagination {
  top: -60px;
}
.owl-inner-pagination.owl-inner-nav:hover .owl-pagination,
.owl-inner-pagination.owl-outer-nav:hover .owl-pagination {
  top: -60px;
}
.owl-inner-pagination.owl-inner-nav.owl-ui-md:hover .owl-pagination,
.owl-inner-pagination.owl-outer-nav.owl-ui-md:hover .owl-pagination {
  top: -65px;
}
.owl-inner-pagination.owl-inner-nav.owl-ui-lg:hover .owl-pagination,
.owl-inner-pagination.owl-outer-nav.owl-ui-lg:hover .owl-pagination {
  top: -75px;
}
#owl-main.height-md .item {
  height: 457px;
}
#owl-main.height-lg .item {
  height: 675px;
}
#owl-main .container {
  display: table;
  height: inherit;
}
#owl-main .caption {
  display: table-cell;
}
#owl-main .caption.vertical-center {
  vertical-align: middle;
  padding-bottom: 3vh;
}
#owl-main .caption.vertical-top {
  vertical-align: top;
  padding-top: 8vh;
}
#owl-main .caption.vertical-bottom {
  vertical-align: bottom;
  padding-bottom: 14vh;
}
#owl-main .caption.text-center {
  padding-left: 10%;
  padding-right: 10%;
}
#owl-main .caption.text-left {
  padding-right: 20%;
}
#owl-main .caption.text-right {
  padding-left: 20%;
}
#owl-main .owl-controls {
  display: block;
  position: static;
  margin-top: -47px;
}
#owl-main .owl-pagination {
  background: #FFF;
  line-height: inherit;
  position: relative;
  bottom: -40px;
  padding: 10px;
  display: inline-block;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  margin: auto;
  opacity: 0;
  -webkit-transition: all 200ms ease-out;
  -moz-transition: all 200ms ease-out;
  -o-transition: all 200ms ease-out;
  transition: all 200ms ease-out;
}
#owl-main:hover .owl-pagination {
  bottom: -25px;
  opacity: 1;
}
#owl-main .owl-prev,
#owl-main .owl-next {
  bottom: 0;
}
#owl-main .owl-controls .owl-page {
  display: inline-block;
}
#owl-main .owl-pagination .owl-page span {
  display: block;
  width: 15px;
  height: 15px;
  background: #d3d3d3;
  border: none;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  margin: 0 5px;
  -webkit-transition: all 200ms ease-out;
  -moz-transition: all 200ms ease-out;
  -o-transition: all 200ms ease-out;
  transition: all 200ms ease-out;
}
#owl-main .owl-item-gap .item {
  margin: 0 15px;
}
#owl-main .owl-item-gap-sm .item {
  margin: 0 10px;
}
#owl-main .owl-item.loading {
  min-height: inherit;
  background: none;
}