owl.carousel.css 9.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325
  1. @charset "UTF-8";
  2. /*
  3. * Owl Carousel - Core
  4. */
  5. .owl-carousel {
  6. display: none;
  7. width: 100%;
  8. -webkit-tap-highlight-color: transparent;
  9. /* position relative and z-index fix webkit rendering fonts issue */
  10. position: relative;
  11. z-index: 1; }
  12. .owl-carousel .owl-stage {
  13. position: relative;
  14. -ms-touch-action: pan-Y;
  15. touch-action: manipulation;
  16. -moz-backface-visibility: hidden;
  17. /* fix firefox animation glitch */ }
  18. .owl-carousel .owl-stage:after {
  19. content: ".";
  20. display: block;
  21. clear: both;
  22. visibility: hidden;
  23. line-height: 0;
  24. height: 0; }
  25. .owl-carousel .owl-stage-outer {
  26. position: relative;
  27. overflow: hidden;
  28. /* fix for flashing background */
  29. -webkit-transform: translate3d(0px, 0px, 0px); }
  30. .owl-carousel .owl-wrapper,
  31. .owl-carousel .owl-item {
  32. -webkit-backface-visibility: hidden;
  33. -moz-backface-visibility: hidden;
  34. -ms-backface-visibility: hidden;
  35. -webkit-transform: translate3d(0, 0, 0);
  36. -moz-transform: translate3d(0, 0, 0);
  37. -ms-transform: translate3d(0, 0, 0); }
  38. .owl-carousel .owl-item {
  39. position: relative;
  40. min-height: 1px;
  41. float: left;
  42. -webkit-backface-visibility: hidden;
  43. -webkit-tap-highlight-color: transparent;
  44. -webkit-touch-callout: none; }
  45. .owl-carousel .owl-item img {
  46. display: block;
  47. width: 100%; }
  48. .owl-carousel .owl-nav.disabled,
  49. .owl-carousel .owl-dots.disabled {
  50. display: none; }
  51. .owl-carousel .owl-nav .owl-prev,
  52. .owl-carousel .owl-nav .owl-next,
  53. .owl-carousel .owl-dot {
  54. cursor: pointer;
  55. -webkit-user-select: none;
  56. -moz-user-select: none;
  57. -ms-user-select: none;
  58. user-select: none; }
  59. .owl-carousel .owl-nav button.owl-prev,
  60. .owl-carousel .owl-nav button.owl-next,
  61. .owl-carousel button.owl-dot {
  62. background: none;
  63. color: inherit;
  64. border: none;
  65. padding: 0 !important;
  66. font: inherit; }
  67. .owl-carousel .owl-nav button.owl-prev:focus,
  68. .owl-carousel .owl-nav button.owl-next:focus,
  69. .owl-carousel button.owl-dot:focus {
  70. outline: none; }
  71. .owl-carousel.owl-loaded {
  72. display: block; }
  73. .owl-carousel.owl-loading {
  74. opacity: 0;
  75. display: block; }
  76. .owl-carousel.owl-hidden {
  77. opacity: 0; }
  78. .owl-carousel.owl-refresh .owl-item {
  79. visibility: hidden; }
  80. .owl-carousel.owl-drag .owl-item {
  81. -ms-touch-action: pan-y;
  82. touch-action: pan-y;
  83. -webkit-user-select: none;
  84. -moz-user-select: none;
  85. -ms-user-select: none;
  86. user-select: none; }
  87. .owl-carousel.owl-grab {
  88. cursor: move;
  89. cursor: -webkit-grab;
  90. cursor: grab; }
  91. .owl-carousel.owl-rtl {
  92. direction: rtl; }
  93. .owl-carousel.owl-rtl .owl-item {
  94. float: right; }
  95. /* No Js */
  96. .no-js .owl-carousel {
  97. display: block; }
  98. /*
  99. * Owl Carousel - Animate Plugin
  100. */
  101. .owl-carousel .animated {
  102. -webkit-animation-duration: 1000ms;
  103. animation-duration: 1000ms;
  104. -webkit-animation-fill-mode: both;
  105. animation-fill-mode: both; }
  106. .owl-carousel .owl-animated-in {
  107. z-index: 0; }
  108. .owl-carousel .owl-animated-out {
  109. z-index: 1; }
  110. .owl-carousel .fadeOut {
  111. -webkit-animation-name: fadeOut;
  112. animation-name: fadeOut; }
  113. @-webkit-keyframes fadeOut {
  114. 0% {
  115. opacity: 1; }
  116. 100% {
  117. opacity: 0; } }
  118. @keyframes fadeOut {
  119. 0% {
  120. opacity: 1; }
  121. 100% {
  122. opacity: 0; } }
  123. /*
  124. * Owl Carousel - Auto Height Plugin
  125. */
  126. .owl-height {
  127. transition: height 500ms ease-in-out; }
  128. /*
  129. * Owl Carousel - Lazy Load Plugin
  130. */
  131. .owl-carousel .owl-item {
  132. /**
  133. This is introduced due to a bug in IE11 where lazy loading combined with autoheight plugin causes a wrong
  134. calculation of the height of the owl-item that breaks page layouts
  135. */ }
  136. .owl-carousel .owl-item .owl-lazy {
  137. opacity: 0;
  138. transition: opacity 400ms ease; }
  139. .owl-carousel .owl-item .owl-lazy[src^=""], .owl-carousel .owl-item .owl-lazy:not([src]) {
  140. max-height: 0; }
  141. .owl-carousel .owl-item img.owl-lazy {
  142. -webkit-transform-style: preserve-3d;
  143. transform-style: preserve-3d; }
  144. /*
  145. * Owl Carousel - Video Plugin
  146. */
  147. .owl-carousel .owl-video-wrapper {
  148. position: relative;
  149. height: 100%;
  150. background: #000; }
  151. .owl-carousel .owl-video-play-icon {
  152. position: absolute;
  153. height: 80px;
  154. width: 80px;
  155. left: 50%;
  156. top: 50%;
  157. margin-left: -40px;
  158. margin-top: -40px;
  159. background: url("owl.video.play.png") no-repeat;
  160. cursor: pointer;
  161. z-index: 1;
  162. -webkit-backface-visibility: hidden;
  163. transition: -webkit-transform 100ms ease;
  164. transition: transform 100ms ease;
  165. transition: transform 100ms ease, -webkit-transform 100ms ease; }
  166. .owl-carousel .owl-video-play-icon:hover {
  167. -webkit-transform: scale(1.3, 1.3);
  168. transform: scale(1.3, 1.3); }
  169. .owl-carousel .owl-video-playing .owl-video-tn,
  170. .owl-carousel .owl-video-playing .owl-video-play-icon {
  171. display: none; }
  172. .owl-carousel .owl-video-tn {
  173. opacity: 0;
  174. height: 100%;
  175. background-position: center center;
  176. background-repeat: no-repeat;
  177. background-size: contain;
  178. transition: opacity 400ms ease; }
  179. .owl-carousel .owl-video-frame {
  180. position: relative;
  181. z-index: 1;
  182. height: 100%;
  183. width: 100%; }
  184. /*
  185. * Default theme - Owl Carousel CSS File
  186. */
  187. .owl-carousel.owl-carousel-navOut .owl-nav [class*='owl-'] {
  188. background-color: #a3afb7;
  189. margin-top: -15px; }
  190. .owl-carousel.owl-carousel-navOut .owl-nav [class*='owl-']:before, .owl-carousel.owl-carousel-navOut .owl-nav [class*='owl-']:after {
  191. font-size: 15px; }
  192. .owl-carousel .owl-nav [class*='owl-'] {
  193. position: absolute;
  194. top: 50%;
  195. display: inline-block;
  196. width: 30px;
  197. height: 30px;
  198. color: #fff;
  199. font-size: 0;
  200. line-height: 30px;
  201. text-align: center;
  202. opacity: 0.6;
  203. border-radius: 50px;
  204. font-family: "Web Icons";
  205. font-style: normal;
  206. font-weight: normal;
  207. text-rendering: auto;
  208. speak: none;
  209. -webkit-font-smoothing: antialiased;
  210. -moz-osx-font-smoothing: grayscale;
  211. -webkit-transform: translate(0%, -50%);
  212. transform: translate(0%, -50%); }
  213. .owl-carousel .owl-nav [class*='owl-']:before {
  214. font-size: 20px; }
  215. .owl-carousel .owl-nav [class*='owl-']:hover {
  216. opacity: 0.8; }
  217. .owl-carousel .owl-nav [class*='owl-'] > span {
  218. font-size: 0;
  219. visibility: hidden; }
  220. .owl-carousel .owl-nav .owl-prev {
  221. left: 10px; }
  222. .owl-carousel .owl-nav .owl-prev:before {
  223. content: ""; }
  224. .owl-carousel .owl-nav .owl-next {
  225. right: 10px; }
  226. .owl-carousel .owl-nav .owl-next:before {
  227. content: ""; }
  228. .owl-carousel .owl-dots {
  229. padding: 0;
  230. margin-top: 15px;
  231. line-height: 1;
  232. list-style: none;
  233. text-align: center; }
  234. .owl-carousel .owl-dots .owl-dot {
  235. position: relative;
  236. display: inline-block;
  237. width: 10px;
  238. height: 10px;
  239. margin: 0 10px;
  240. line-height: 10px;
  241. vertical-align: middle;
  242. list-style: none; }
  243. .owl-carousel .owl-dots .owl-dot > span {
  244. display: inline-block;
  245. width: 100%;
  246. height: 100%;
  247. border-radius: 50%;
  248. background-color: #000;
  249. cursor: pointer;
  250. opacity: 0.2; }
  251. .owl-carousel .owl-dots .owl-dot > span:focus {
  252. outline: none; }
  253. .owl-carousel .owl-dots .owl-dot:hover > span, .owl-carousel .owl-dots .owl-dot:focus > span, .owl-carousel .owl-dots .owl-dot.active > span {
  254. opacity: 0.5; }
  255. .owl-carousel .owl-dots-stroke .owl-dot > span {
  256. border: 2px solid transparent;
  257. border: 2px solid transparent;
  258. transition: border 0.3s ease 0s, background-color 0.3s ease 0s; }
  259. .owl-carousel .owl-dots-stroke .owl-dot.active > span {
  260. opacity: 0.3;
  261. border-color: #000;
  262. background-color: transparent;
  263. background-color: transparent;
  264. -webkit-transform: scale(1.3);
  265. transform: scale(1.3); }
  266. .owl-carousel .owl-dots-fillin .owl-dot > span {
  267. box-shadow: 0 0 0 2px #000 inset;
  268. background-color: transparent;
  269. transition: box-shadow 0.3s ease 0s; }
  270. .owl-carousel .owl-dots-fillin .owl-dot:hover > span, .owl-carousel .owl-dots-fillin .owl-dot:focus > span {
  271. box-shadow: 0 0 0 2px #000 inset; }
  272. .owl-carousel .owl-dots-fillin .owl-dot.active > span {
  273. box-shadow: 0 0 0 8px #000 inset; }
  274. .owl-carousel .owl-dots-fall .owl-dot:after {
  275. position: absolute;
  276. top: 0;
  277. left: 0;
  278. content: '';
  279. width: 100%;
  280. height: 100%;
  281. background-color: #000;
  282. border-radius: 50%;
  283. visibility: hidden;
  284. opacity: 0;
  285. -webkit-transform: translate(0%, -200%);
  286. transform: translate(0%, -200%);
  287. transition: opacity 0.3s ease 0s, visibility 0s ease 0.3s, -webkit-transform 0.3s ease 0s;
  288. transition: transform 0.3s ease 0s, opacity 0.3s ease 0s, visibility 0s ease 0.3s;
  289. transition: transform 0.3s ease 0s, opacity 0.3s ease 0s, visibility 0s ease 0.3s, -webkit-transform 0.3s ease 0s; }
  290. .owl-carousel .owl-dots-fall .owl-dot > span {
  291. transition: opacity 0.3s ease 0s, background-color 0.3s ease 0s, -webkit-transform 0.3s ease 0s;
  292. transition: transform 0.3s ease 0s, opacity 0.3s ease 0s, background-color 0.3s ease 0s;
  293. transition: transform 0.3s ease 0s, opacity 0.3s ease 0s, background-color 0.3s ease 0s, -webkit-transform 0.3s ease 0s; }
  294. .owl-carousel .owl-dots-fall .owl-dot.active:after {
  295. opacity: 0.5;
  296. -webkit-transform: translate(0%, 0%);
  297. transform: translate(0%, 0%);
  298. transition: opacity 0.3s ease 0s, -webkit-transform 0.3s ease 0s;
  299. transition: transform 0.3s ease 0s, opacity 0.3s ease 0s;
  300. transition: transform 0.3s ease 0s, opacity 0.3s ease 0s, -webkit-transform 0.3s ease 0s;
  301. visibility: visible; }
  302. .owl-carousel .owl-dots-fall .owl-dot.active > span {
  303. opacity: 0;
  304. -webkit-transform: translate(0, 200%);
  305. transform: translate(0, 200%); }