owl.carousel.css 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  1. /**
  2. * Owl Carousel v2.2.1
  3. * Copyright 2013-2017 David Deutsch
  4. * Licensed under ()
  5. */
  6. /*
  7. * Owl Carousel - Core
  8. */
  9. .owl-carousel {
  10. display: none;
  11. width: 100%;
  12. -webkit-tap-highlight-color: transparent;
  13. /* position relative and z-index fix webkit rendering fonts issue */
  14. position: relative;
  15. z-index: 1; }
  16. .owl-carousel .owl-stage {
  17. position: relative;
  18. -ms-touch-action: pan-Y;
  19. -moz-backface-visibility: hidden;
  20. /* fix firefox animation glitch */ }
  21. .owl-carousel .owl-stage:after {
  22. content: ".";
  23. display: block;
  24. clear: both;
  25. visibility: hidden;
  26. line-height: 0;
  27. height: 0; }
  28. .owl-carousel .owl-stage-outer {
  29. position: relative;
  30. overflow: hidden;
  31. /* fix for flashing background */
  32. -webkit-transform: translate3d(0px, 0px, 0px); }
  33. .owl-carousel .owl-wrapper,
  34. .owl-carousel .owl-item {
  35. -webkit-backface-visibility: hidden;
  36. -moz-backface-visibility: hidden;
  37. -ms-backface-visibility: hidden;
  38. -webkit-transform: translate3d(0, 0, 0);
  39. -moz-transform: translate3d(0, 0, 0);
  40. -ms-transform: translate3d(0, 0, 0); }
  41. .owl-carousel .owl-item {
  42. position: relative;
  43. min-height: 1px;
  44. float: left;
  45. -webkit-backface-visibility: hidden;
  46. -webkit-tap-highlight-color: transparent;
  47. -webkit-touch-callout: none; }
  48. .owl-carousel .owl-item img {
  49. }
  50. .owl-carousel .owl-nav.disabled,
  51. .owl-carousel .owl-dots.disabled {
  52. display: none; }
  53. .owl-carousel .owl-nav .owl-prev,
  54. .owl-carousel .owl-nav .owl-next,
  55. .owl-carousel .owl-dot {
  56. cursor: pointer;
  57. cursor: hand;
  58. -webkit-user-select: none;
  59. -khtml-user-select: none;
  60. -moz-user-select: none;
  61. -ms-user-select: none;
  62. user-select: none; }
  63. .owl-carousel.owl-loaded {
  64. display: block; }
  65. .owl-carousel.owl-loading {
  66. opacity: 0;
  67. display: block; }
  68. .owl-carousel.owl-hidden {
  69. opacity: 0; }
  70. .owl-carousel.owl-refresh .owl-item {
  71. visibility: hidden; }
  72. .owl-carousel.owl-drag .owl-item {
  73. -webkit-user-select: none;
  74. -moz-user-select: none;
  75. -ms-user-select: none;
  76. user-select: none; }
  77. .owl-carousel.owl-grab {
  78. cursor: move;
  79. cursor: grab; }
  80. .owl-carousel.owl-rtl {
  81. direction: rtl; }
  82. .owl-carousel.owl-rtl .owl-item {
  83. float: right; }
  84. /* No Js */
  85. .no-js .owl-carousel {
  86. display: block; }
  87. /*
  88. * Owl Carousel - Animate Plugin
  89. */
  90. .owl-carousel .animated {
  91. animation-duration: 1000ms;
  92. animation-fill-mode: both; }
  93. .owl-carousel .owl-animated-in {
  94. z-index: 0; }
  95. .owl-carousel .owl-animated-out {
  96. z-index: 1; }
  97. .owl-carousel .fadeOut {
  98. animation-name: fadeOut; }
  99. @keyframes fadeOut {
  100. 0% {
  101. opacity: 1; }
  102. 100% {
  103. opacity: 0; } }
  104. /*
  105. * Owl Carousel - Auto Height Plugin
  106. */
  107. .owl-height {
  108. transition: height 500ms ease-in-out; }
  109. /*
  110. * Owl Carousel - Lazy Load Plugin
  111. */
  112. .owl-carousel .owl-item .owl-lazy {
  113. opacity: 0;
  114. transition: opacity 400ms ease; }
  115. .owl-carousel .owl-item img.owl-lazy {
  116. transform-style: preserve-3d; }
  117. /*
  118. * Owl Carousel - Video Plugin
  119. */
  120. .owl-carousel .owl-video-wrapper {
  121. position: relative;
  122. height: 100%;
  123. background: #000; }
  124. .owl-carousel .owl-video-play-icon {
  125. position: absolute;
  126. height: 80px;
  127. width: 80px;
  128. left: 50%;
  129. top: 50%;
  130. margin-left: -40px;
  131. margin-top: -40px;
  132. background: url("owl.video.play.png") no-repeat;
  133. cursor: pointer;
  134. z-index: 1;
  135. -webkit-backface-visibility: hidden;
  136. transition: transform 100ms ease; }
  137. .owl-carousel .owl-video-play-icon:hover {
  138. -ms-transform: scale(1.3, 1.3);
  139. transform: scale(1.3, 1.3); }
  140. .owl-carousel .owl-video-playing .owl-video-tn,
  141. .owl-carousel .owl-video-playing .owl-video-play-icon {
  142. display: none; }
  143. .owl-carousel .owl-video-tn {
  144. opacity: 0;
  145. height: 100%;
  146. background-position: center center;
  147. background-repeat: no-repeat;
  148. background-size: contain;
  149. transition: opacity 400ms ease; }
  150. .owl-carousel .owl-video-frame {
  151. position: relative;
  152. z-index: 1;
  153. height: 100%;
  154. width: 100%; }