owlcarousel.css 9.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473
  1. /*
  2. * Core Owl Carousel CSS File
  3. */
  4. .slider-wrapper .owl-wrapper:after {
  5. line-height: 0;
  6. display: block;
  7. visibility: hidden;
  8. clear: both;
  9. height: 0;
  10. content: '.';
  11. }
  12. .slider-wrapper {
  13. position: relative;
  14. display: none;
  15. -ms-touch-action: pan-y;
  16. }
  17. .slider-wrapper .owl-wrapper {
  18. position: relative;
  19. display: none;
  20. -webkit-transform: translate3d(0px, 0px, 0px);
  21. }
  22. .slider-wrapper .owl-wrapper-outer {
  23. position: relative;
  24. overflow: hidden;
  25. width: 100%;
  26. }
  27. .slider-wrapper .owl-wrapper-outer.autoHeight {
  28. -webkit-transition: height 500ms ease-in-out;
  29. -moz-transition: height 500ms ease-in-out;
  30. -ms-transition: height 500ms ease-in-out;
  31. -o-transition: height 500ms ease-in-out;
  32. transition: height 500ms ease-in-out;
  33. }
  34. .slider-wrapper .owl-item {
  35. float: left;
  36. }
  37. .owl-controls .owl-page,
  38. .owl-controls .owl-buttons div {
  39. cursor: pointer;
  40. }
  41. .owl-controls {
  42. -webkit-user-select: none;
  43. -moz-user-select: none;
  44. -ms-user-select: none;
  45. user-select: none;
  46. -khtml-user-select: none;
  47. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  48. }
  49. /* mouse grab icon */
  50. .grabbing {
  51. cursor: url('../../images/grabbing.png') 8 8, move;
  52. }
  53. /* fix */
  54. .slider-wrapper .owl-wrapper,
  55. .slider-wrapper .owl-item {
  56. -webkit-transform: translate3d(0, 0, 0);
  57. -moz-transform: translate3d(0, 0, 0);
  58. -ms-transform: translate3d(0, 0, 0);
  59. -webkit-backface-visibility: hidden;
  60. -moz-backface-visibility: hidden;
  61. -ms-backface-visibility: hidden;
  62. }
  63. /* CSS3 Transitions */
  64. .owl-origin {
  65. -webkit-perspective: 1200px;
  66. -webkit-perspective-origin-x: 50%;
  67. -webkit-perspective-origin-y: 50%;
  68. -moz-perspective: 1200px;
  69. -moz-perspective-origin-x: 50%;
  70. -moz-perspective-origin-y: 50%;
  71. perspective: 1200px;
  72. }
  73. /* fade */
  74. .owl-fade-out {
  75. z-index: 10;
  76. -webkit-animation: fadeOut .7s both ease;
  77. -moz-animation: fadeOut .7s both ease;
  78. animation: fadeOut .7s both ease;
  79. }
  80. .owl-fade-in {
  81. -webkit-animation: fadeIn .7s both ease;
  82. -moz-animation: fadeIn .7s both ease;
  83. animation: fadeIn .7s both ease;
  84. }
  85. /* backSlide */
  86. .owl-backSlide-out {
  87. -webkit-animation: backSlideOut 1s both ease;
  88. -moz-animation: backSlideOut 1s both ease;
  89. animation: backSlideOut 1s both ease;
  90. }
  91. .owl-backSlide-in {
  92. -webkit-animation: backSlideIn 1s both ease;
  93. -moz-animation: backSlideIn 1s both ease;
  94. animation: backSlideIn 1s both ease;
  95. }
  96. /* goDown */
  97. .owl-goDown-out {
  98. -webkit-animation: scaleToFade .7s ease both;
  99. -moz-animation: scaleToFade .7s ease both;
  100. animation: scaleToFade .7s ease both;
  101. }
  102. .owl-goDown-in {
  103. -webkit-animation: goDown .6s ease both;
  104. -moz-animation: goDown .6s ease both;
  105. animation: goDown .6s ease both;
  106. }
  107. /* scaleUp */
  108. .owl-fadeUp-in {
  109. -webkit-animation: scaleUpFrom .5s ease both;
  110. -moz-animation: scaleUpFrom .5s ease both;
  111. animation: scaleUpFrom .5s ease both;
  112. }
  113. .owl-fadeUp-out {
  114. -webkit-animation: scaleUpTo .5s ease both;
  115. -moz-animation: scaleUpTo .5s ease both;
  116. animation: scaleUpTo .5s ease both;
  117. }
  118. /* Keyframes */
  119. /*empty*/
  120. @-webkit-keyframes empty {
  121. 0% {
  122. opacity: 1;
  123. }
  124. }
  125. @-moz-keyframes empty {
  126. 0% {
  127. opacity: 1;
  128. }
  129. }
  130. @keyframes empty {
  131. 0% {
  132. opacity: 1;
  133. }
  134. }
  135. @-webkit-keyframes fadeIn {
  136. 0% {
  137. opacity: 0;
  138. }
  139. 100% {
  140. opacity: 1;
  141. }
  142. }
  143. @-moz-keyframes fadeIn {
  144. 0% {
  145. opacity: 0;
  146. }
  147. 100% {
  148. opacity: 1;
  149. }
  150. }
  151. @keyframes fadeIn {
  152. 0% {
  153. opacity: 0;
  154. }
  155. 100% {
  156. opacity: 1;
  157. }
  158. }
  159. @-webkit-keyframes fadeOut {
  160. 0% {
  161. opacity: 1;
  162. }
  163. 100% {
  164. opacity: 0;
  165. }
  166. }
  167. @-moz-keyframes fadeOut {
  168. 0% {
  169. opacity: 1;
  170. }
  171. 100% {
  172. opacity: 0;
  173. }
  174. }
  175. @keyframes fadeOut {
  176. 0% {
  177. opacity: 1;
  178. }
  179. 100% {
  180. opacity: 0;
  181. }
  182. }
  183. @-webkit-keyframes backSlideOut {
  184. 25% {
  185. -webkit-transform: translateZ(-500px);
  186. opacity: .5;
  187. }
  188. 75% {
  189. -webkit-transform: translateZ(-500px) translateX(-200%);
  190. opacity: .5;
  191. }
  192. 100% {
  193. -webkit-transform: translateZ(-500px) translateX(-200%);
  194. opacity: .5;
  195. }
  196. }
  197. @-moz-keyframes backSlideOut {
  198. 25% {
  199. -moz-transform: translateZ(-500px);
  200. opacity: .5;
  201. }
  202. 75% {
  203. -moz-transform: translateZ(-500px) translateX(-200%);
  204. opacity: .5;
  205. }
  206. 100% {
  207. -moz-transform: translateZ(-500px) translateX(-200%);
  208. opacity: .5;
  209. }
  210. }
  211. @keyframes backSlideOut {
  212. 25% {
  213. transform: translateZ(-500px);
  214. opacity: .5;
  215. }
  216. 75% {
  217. transform: translateZ(-500px) translateX(-200%);
  218. opacity: .5;
  219. }
  220. 100% {
  221. transform: translateZ(-500px) translateX(-200%);
  222. opacity: .5;
  223. }
  224. }
  225. @-webkit-keyframes backSlideIn {
  226. 0%, 25% {
  227. -webkit-transform: translateZ(-500px) translateX(200%);
  228. opacity: .5;
  229. }
  230. 75% {
  231. -webkit-transform: translateZ(-500px);
  232. opacity: .5;
  233. }
  234. 100% {
  235. -webkit-transform: translateZ(0) translateX(0);
  236. opacity: 1;
  237. }
  238. }
  239. @-moz-keyframes backSlideIn {
  240. 0%, 25% {
  241. -moz-transform: translateZ(-500px) translateX(200%);
  242. opacity: .5;
  243. }
  244. 75% {
  245. -moz-transform: translateZ(-500px);
  246. opacity: .5;
  247. }
  248. 100% {
  249. -moz-transform: translateZ(0) translateX(0);
  250. opacity: 1;
  251. }
  252. }
  253. @keyframes backSlideIn {
  254. 0%, 25% {
  255. transform: translateZ(-500px) translateX(200%);
  256. opacity: .5;
  257. }
  258. 75% {
  259. transform: translateZ(-500px);
  260. opacity: .5;
  261. }
  262. 100% {
  263. transform: translateZ(0) translateX(0);
  264. opacity: 1;
  265. }
  266. }
  267. @-webkit-keyframes scaleToFade {
  268. to {
  269. -webkit-transform: scale(.8);
  270. opacity: 0;
  271. }
  272. }
  273. @-moz-keyframes scaleToFade {
  274. to {
  275. -moz-transform: scale(.8);
  276. opacity: 0;
  277. }
  278. }
  279. @keyframes scaleToFade {
  280. to {
  281. transform: scale(.8);
  282. opacity: 0;
  283. }
  284. }
  285. @-webkit-keyframes goDown {
  286. from {
  287. -webkit-transform: translateY(-100%);
  288. }
  289. }
  290. @-moz-keyframes goDown {
  291. from {
  292. -moz-transform: translateY(-100%);
  293. }
  294. }
  295. @keyframes goDown {
  296. from {
  297. transform: translateY(-100%);
  298. }
  299. }
  300. @-webkit-keyframes scaleUpFrom {
  301. from {
  302. -webkit-transform: scale(1.5);
  303. opacity: 0;
  304. }
  305. }
  306. @-moz-keyframes scaleUpFrom {
  307. from {
  308. -moz-transform: scale(1.5);
  309. opacity: 0;
  310. }
  311. }
  312. @keyframes scaleUpFrom {
  313. from {
  314. transform: scale(1.5);
  315. opacity: 0;
  316. }
  317. }
  318. @-webkit-keyframes scaleUpTo {
  319. to {
  320. -webkit-transform: scale(1.5);
  321. opacity: 0;
  322. }
  323. }
  324. @-moz-keyframes scaleUpTo {
  325. to {
  326. -moz-transform: scale(1.5);
  327. opacity: 0;
  328. }
  329. }
  330. @keyframes scaleUpTo {
  331. to {
  332. transform: scale(1.5);
  333. opacity: 0;
  334. }
  335. }
  336. .slider-wrapper .item {
  337. float: left;
  338. }
  339. .owl-controls {
  340. text-align: center;
  341. color: #fff;
  342. }
  343. .owl-controls .owl-buttons .owl-prev {
  344. left: 20px;
  345. right: auto;
  346. }
  347. .owl-controls .owl-buttons .owl-next {
  348. right: 20px;
  349. left: auto;
  350. }
  351. .slider-wrapper .owl-pagination {
  352. position: absolute;
  353. bottom: -35px;
  354. width: 100%;
  355. }
  356. .slider-wrapper .owl-pagination .owl-page span { background:#ccc; }
  357. .carousel-wrapper .owl-pagination {
  358. position: relative;
  359. bottom: -10px;
  360. }
  361. .owl-slider-np .owl-pagination { display:none; }
  362. .owl-controls .owl-buttons div {
  363. display: block;
  364. font-size: 55px;
  365. height: 40px;
  366. line-height: 40px;
  367. width: 30px;
  368. position: absolute;
  369. top: 50%;
  370. margin-top: -20px;
  371. text-align: center;
  372. -moz-opacity:0.60;
  373. filter:alpha(opacity:60);
  374. opacity:0.60;
  375. }
  376. .owl-controls .owl-buttons div:hover {
  377. -moz-opacity:0.80;
  378. filter:alpha(opacity:80);
  379. opacity:0.80;
  380. }
  381. .owl-controls .owl-buttons div i {
  382. height: 40px;
  383. line-height: 40px;
  384. display: block;
  385. width: 30px;
  386. }
  387. .carousel-wrapper .owl-controls .owl-buttons div {
  388. margin-top: -30px;
  389. }
  390. .carousel-wrapper-alt .owl-controls .owl-buttons div {
  391. margin-top: -45px;
  392. }
  393. .carousel-container .owl-controls .owl-buttons .owl-next {
  394. right: -30px;
  395. }
  396. .carousel-container .owl-controls .owl-buttons .owl-prev {
  397. left: -30px;
  398. }
  399. .carousel-wrapper-alt .owl-controls .owl-pagination {
  400. display: none;
  401. }
  402. .arrows-outside.carousel-wrapper .owl-controls .owl-buttons .owl-next {
  403. right: -40px;
  404. }
  405. .arrows-outside.carousel-wrapper .owl-controls .owl-buttons .owl-prev {
  406. left: -40px;
  407. }
  408. .owl-controls .owl-page {
  409. display: inline-block;
  410. zoom: 1;
  411. *display: inline;
  412. }
  413. .owl-controls .owl-page span{
  414. display: block;
  415. width: 12px;
  416. height: 12px;
  417. margin: 0 3px;
  418. filter: Alpha(Opacity=30);
  419. opacity: 0.3;
  420. border-radius: 20px;
  421. background: #fff;
  422. }
  423. .owl-controls .owl-page.active span,
  424. .slider-wrapper .owl-controls.clickable .owl-page:hover span{
  425. filter: Alpha(Opacity=100);
  426. opacity: 1;
  427. }
  428. .owl-controls .owl-page span.owl-numbers{
  429. height: auto;
  430. width: auto;
  431. color: #FFF;
  432. padding: 2px 10px;
  433. font-size: 12px;
  434. border-radius: 30px;
  435. }
  436. .owl-item.loading {
  437. min-height: 150px;
  438. background: url('../../assets/dummy-images/loader.gif') no-repeat center center
  439. }
  440. .owl-slider-1 .owl-pagination { display:none; }