/*------------------------------------*\ #Carousel \*------------------------------------*/ .carousel-dots .owl-controls { margin-top: 50px; } .carousel-dots .owl-controls .owl-dots .owl-dot span { height: 11px; width: 11px; border-radius: 50%; background-color: transparent; border: 2px solid rgba(100, 100, 100, 0.5); margin: 0 4px; } .carousel-dots .owl-controls .owl-dots .owl-dot.active span { background-color: #646464; border-color: #646464; } .carousel-dots.carousel-white .owl-controls .owl-dots .owl-dot span { border-color:rgba(255, 255, 255, 0.5); } .carousel-dots.carousel-white .owl-controls .owl-dots .owl-dot.active span { background-color: @color-white; border-color: @color-white; } .carousel-navs .owl-controls .owl-nav { position: relative; } .carousel-navs .owl-controls .owl-nav [class*=owl-] { position: absolute; top: 50%; height: 60px; line-height: 60px; margin-top: -30px; color: @color-heading; font-size: 0; font-weight: 400; text-align: center; background-color: transparent; padding: 0; border-radius: 0; -webkit-transition: all 0.35s; -moz-transition: all 0.35s; -o-transition: all 0.35s; transition: all 0.35s; margin-top: -250px; } .carousel-navs .owl-controls .owl-nav [class*=owl-]:hover { color: @color-theme; background-color: transparent; } .carousel-navs .owl-controls .owl-nav .owl-prev { left: 0; } .carousel-navs .owl-controls .owl-nav .owl-prev:before { font-family: 'Linearicons-Free'; content: "\e875"; font-size: 40px; } .carousel-navs .owl-controls .owl-nav .owl-next { right: 0; } .carousel-navs .owl-controls .owl-nav .owl-next:before { font-family: 'Linearicons-Free'; content: "\e876"; font-size: 40px; } .carousel-navs .owl-dots { position: absolute; bottom: 20px; width: 100%; } .carousel-navs .owl-dots .owl-dot span { background-color: transparent; border: 1px solid #fff; } .carousel-navs .owl-dots .owl-dot.active span, .carousel-navs .owl-dots .owl-dot:hover span { background: @color-white; } /**/ .slider-dots .owl-controls { margin-top: 0; } .slider-dots .owl-controls .owl-dots { position: absolute; bottom: 30px; width: 100%; } .slider-dots .owl-controls .owl-dots .owl-dot span { height: 11px; width: 11px; border-radius: 50%; background-color: @color-white; border: 2px solid rgba(0,0,0,.6); margin: 0 4px; } .slider-dots .owl-controls .owl-dots .owl-dot.active span { -moz-box-shadow:0 0 0 2px @color-heading; -webkit-box-shadow: 0 0 0 2px @color-heading; box-shadow: 0 0 0 2px @color-white; } .slider-navs .owl-controls .owl-nav [class*=owl-] { position: absolute; top: 50%; height: 60px; width: 60px; line-height: 60px; margin-top: -30px; color: @color-white; font-size: 0; font-weight: 400; background-color: rgba(27, 26, 26, 0.5); text-align: center; padding: 0; border-radius: 0; -webkit-transition: all 0.35s; -moz-transition: all 0.35s; -o-transition: all 0.35s; transition: all 0.35s; } .slider-navs .owl-controls .owl-nav [class*=owl-]:hover { color: #999999; background-color: @color-white; } .slider-navs .owl-controls .owl-nav .owl-prev { left: 30px; } .slider-navs .owl-controls .owl-nav .owl-prev:before, .slider-navs .owl-controls .owl-nav .owl-next:before { font-family:@awesome; font-size: 25px; } .slider-navs .owl-controls .owl-nav .owl-prev:before { content: "\f104"; } .slider-navs .owl-controls .owl-nav .owl-next { right: 30px; } .slider-navs .owl-controls .owl-nav .owl-next:before { content: "\f105"; } .slider-navs .owl-dots { position: absolute; bottom: 20px; width: 100%; } .slider-navs .owl-dots .owl-dot span { background-color: transparent; border: 1px solid #fff; } .slider-navs .owl-dots .owl-dot.active span, .slider-navs .owl-dots .owl-dot:hover span { background: @color-white; } .slider-navs.slider-small .owl-controls .owl-nav .owl-next { right: 0; } .slider-navs.slider-small .owl-controls .owl-nav .owl-prev { left: 0; } .slider-navs.slider-shop .owl-controls .owl-dots .owl-dot span { background-color: @color-heading; border: 2px solid @color-white; } .slider-navs.slider-shop .owl-controls .owl-dots .owl-dot.active span { -moz-box-shadow:0 0 0 2px @color-heading; -webkit-box-shadow: 0 0 0 2px @color-heading; box-shadow: 0 0 0 2px @color-heading; } .slider-theme.slider-navs .owl-controls .owl-nav [class*=owl-]:hover { color: @color-heading; } .slider-theme.slider-dots .owl-controls .owl-dots .owl-dot span { border-color: @color-theme } /* Custom, iPhone Retina */ @media only screen and (min-width : 320px) and (max-width : 767px) { .carousel-dots .owl-controls { margin-top: 20px; } .slider-navs .owl-controls .owl-nav .owl-prev { left: 0; } .slider-navs .owl-controls .owl-nav .owl-next { right: 0; } .slider-navs .owl-controls .owl-nav .owl-next:before, .slider-navs .owl-controls .owl-nav .owl-prev:before { font-size: 20px; } } /* Small Devices, Tablets */ @media only screen and (min-width : 768px) and (max-width : 991px) { .slider-navs .owl-controls .owl-nav .owl-next:before, .slider-navs .owl-controls .owl-nav .owl-prev:before { font-size: 30px; } }