owl.carousel.css 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
  1. /**
  2. * Owl Carousel v2.3.4
  3. * Copyright 2013-2018 David Deutsch
  4. * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
  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. touch-action: manipulation;
  20. -moz-backface-visibility: hidden;
  21. /* fix firefox animation glitch */ }
  22. .owl-carousel .owl-stage:after {
  23. content: ".";
  24. display: block;
  25. clear: both;
  26. visibility: hidden;
  27. line-height: 0;
  28. height: 0; }
  29. .owl-carousel .owl-stage-outer {
  30. position: relative;
  31. overflow: hidden;
  32. /* fix for flashing background */
  33. -webkit-transform: translate3d(0px, 0px, 0px); }
  34. .owl-carousel .owl-wrapper,
  35. .owl-carousel .owl-item {
  36. -webkit-backface-visibility: hidden;
  37. -moz-backface-visibility: hidden;
  38. -ms-backface-visibility: hidden;
  39. -webkit-transform: translate3d(0, 0, 0);
  40. -moz-transform: translate3d(0, 0, 0);
  41. -ms-transform: translate3d(0, 0, 0); }
  42. .owl-carousel .owl-item {
  43. position: relative;
  44. min-height: 1px;
  45. float: left;
  46. -webkit-backface-visibility: hidden;
  47. -webkit-tap-highlight-color: transparent;
  48. -webkit-touch-callout: none; }
  49. .owl-carousel .owl-item img {
  50. display: block;
  51. width: 100%; }
  52. .owl-carousel .owl-nav.disabled,
  53. .owl-carousel .owl-dots.disabled {
  54. display: none; }
  55. .owl-carousel .owl-nav .owl-prev,
  56. .owl-carousel .owl-nav .owl-next,
  57. .owl-carousel .owl-dot {
  58. cursor: pointer;
  59. -webkit-user-select: none;
  60. -khtml-user-select: none;
  61. -moz-user-select: none;
  62. -ms-user-select: none;
  63. user-select: none; }
  64. .owl-carousel .owl-nav button.owl-prev,
  65. .owl-carousel .owl-nav button.owl-next,
  66. .owl-carousel button.owl-dot {
  67. background: none;
  68. color: inherit;
  69. border: none;
  70. padding: 0 !important;
  71. font: inherit; }
  72. .owl-carousel.owl-loaded {
  73. display: block; }
  74. .owl-carousel.owl-loading {
  75. opacity: 0;
  76. display: block; }
  77. .owl-carousel.owl-hidden {
  78. opacity: 0; }
  79. .owl-carousel.owl-refresh .owl-item {
  80. visibility: hidden; }
  81. .owl-carousel.owl-drag .owl-item {
  82. -ms-touch-action: pan-y;
  83. touch-action: pan-y;
  84. -webkit-user-select: none;
  85. -moz-user-select: none;
  86. -ms-user-select: none;
  87. user-select: none; }
  88. .owl-carousel.owl-grab {
  89. cursor: move;
  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. animation-duration: 1000ms;
  103. animation-fill-mode: both; }
  104. .owl-carousel .owl-animated-in {
  105. z-index: 0; }
  106. .owl-carousel .owl-animated-out {
  107. z-index: 1; }
  108. .owl-carousel .fadeOut {
  109. animation-name: fadeOut; }
  110. @keyframes fadeOut {
  111. 0% {
  112. opacity: 1; }
  113. 100% {
  114. opacity: 0; } }
  115. /*
  116. * Owl Carousel - Auto Height Plugin
  117. */
  118. .owl-height {
  119. transition: height 500ms ease-in-out; }
  120. /*
  121. * Owl Carousel - Lazy Load Plugin
  122. */
  123. .owl-carousel .owl-item {
  124. /**
  125. This is introduced due to a bug in IE11 where lazy loading combined with autoheight plugin causes a wrong
  126. calculation of the height of the owl-item that breaks page layouts
  127. */ }
  128. .owl-carousel .owl-item .owl-lazy {
  129. opacity: 0;
  130. transition: opacity 400ms ease; }
  131. .owl-carousel .owl-item .owl-lazy[src^=""], .owl-carousel .owl-item .owl-lazy:not([src]) {
  132. max-height: 0; }
  133. .owl-carousel .owl-item img.owl-lazy {
  134. transform-style: preserve-3d; }
  135. /*
  136. * Owl Carousel - Video Plugin
  137. */
  138. .owl-carousel .owl-video-wrapper {
  139. position: relative;
  140. height: 100%;
  141. background: #000; }
  142. .owl-carousel .owl-video-play-icon {
  143. position: absolute;
  144. height: 80px;
  145. width: 80px;
  146. left: 50%;
  147. top: 50%;
  148. margin-left: -40px;
  149. margin-top: -40px;
  150. background: url("owl.video.play.png") no-repeat;
  151. cursor: pointer;
  152. z-index: 1;
  153. -webkit-backface-visibility: hidden;
  154. transition: transform 100ms ease; }
  155. .owl-carousel .owl-video-play-icon:hover {
  156. -ms-transform: scale(1.3, 1.3);
  157. transform: scale(1.3, 1.3); }
  158. .owl-carousel .owl-video-playing .owl-video-tn,
  159. .owl-carousel .owl-video-playing .owl-video-play-icon {
  160. display: none; }
  161. .owl-carousel .owl-video-tn {
  162. opacity: 0;
  163. height: 100%;
  164. background-position: center center;
  165. background-repeat: no-repeat;
  166. background-size: contain;
  167. transition: opacity 400ms ease; }
  168. .owl-carousel .owl-video-frame {
  169. position: relative;
  170. z-index: 1;
  171. height: 100%;
  172. width: 100%; }