owl.carousel.css 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310
  1. /*
  2. * Core Owl Carousel CSS File
  3. * v1.24
  4. */
  5. /* clearfix */
  6. .owl-carousel .owl-wrapper:after {
  7. content: ".";
  8. display: block;
  9. clear: both;
  10. visibility: hidden;
  11. line-height: 0;
  12. height: 0;
  13. }
  14. /* display none until init */
  15. .owl-carousel{
  16. display: none;
  17. position: relative;
  18. width: 100%;
  19. -ms-touch-action: pan-y;
  20. }
  21. .owl-carousel .owl-wrapper{
  22. display: none;
  23. position: relative;
  24. -webkit-transform: translate3d(0px, 0px, 0px);
  25. }
  26. .owl-carousel .owl-wrapper-outer{
  27. overflow: hidden;
  28. position: relative;
  29. width: 100%;
  30. }
  31. .owl-carousel .owl-wrapper-outer.autoHeight{
  32. -webkit-transition: height 500ms ease-in-out;
  33. -moz-transition: height 500ms ease-in-out;
  34. -ms-transition: height 500ms ease-in-out;
  35. -o-transition: height 500ms ease-in-out;
  36. transition: height 500ms ease-in-out;
  37. }
  38. .owl-carousel .owl-item{
  39. float: left;
  40. }
  41. .owl-controls .owl-page,
  42. .owl-controls .owl-buttons div{
  43. cursor: pointer;
  44. }
  45. .owl-controls {
  46. -webkit-user-select: none;
  47. -khtml-user-select: none;
  48. -moz-user-select: none;
  49. -ms-user-select: none;
  50. user-select: none;
  51. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  52. }
  53. /* mouse grab icon */
  54. .grabbing {
  55. cursor:url(grabbing.png) 8 8, move;
  56. }
  57. /* fix */
  58. .owl-carousel .owl-wrapper,
  59. .owl-carousel .owl-item{
  60. -webkit-backface-visibility: hidden;
  61. -moz-backface-visibility: hidden;
  62. -ms-backface-visibility: hidden;
  63. -webkit-transform: translate3d(0,0,0);
  64. -moz-transform: translate3d(0,0,0);
  65. -ms-transform: translate3d(0,0,0);
  66. }
  67. /* CSS3 Transitions */
  68. .owl-origin {
  69. -webkit-perspective: 1200px;
  70. -webkit-perspective-origin-x : 50%;
  71. -webkit-perspective-origin-y : 50%;
  72. -moz-perspective : 1200px;
  73. -moz-perspective-origin-x : 50%;
  74. -moz-perspective-origin-y : 50%;
  75. perspective : 1200px;
  76. }
  77. /* fade */
  78. .owl-fade-out {
  79. z-index: 10;
  80. -webkit-animation: fadeOut .7s both ease;
  81. -moz-animation: fadeOut .7s both ease;
  82. animation: fadeOut .7s both ease;
  83. }
  84. .owl-fade-in {
  85. -webkit-animation: fadeIn .7s both ease;
  86. -moz-animation: fadeIn .7s both ease;
  87. animation: fadeIn .7s both ease;
  88. }
  89. /* backSlide */
  90. .owl-backSlide-out {
  91. -webkit-animation: backSlideOut 1s both ease;
  92. -moz-animation: backSlideOut 1s both ease;
  93. animation: backSlideOut 1s both ease;
  94. }
  95. .owl-backSlide-in {
  96. -webkit-animation: backSlideIn 1s both ease;
  97. -moz-animation: backSlideIn 1s both ease;
  98. animation: backSlideIn 1s both ease;
  99. }
  100. /* goDown */
  101. .owl-goDown-out {
  102. -webkit-animation: scaleToFade .7s ease both;
  103. -moz-animation: scaleToFade .7s ease both;
  104. animation: scaleToFade .7s ease both;
  105. }
  106. .owl-goDown-in {
  107. -webkit-animation: goDown .6s ease both;
  108. -moz-animation: goDown .6s ease both;
  109. animation: goDown .6s ease both;
  110. }
  111. /* scaleUp */
  112. .owl-fadeUp-in {
  113. -webkit-animation: scaleUpFrom .5s ease both;
  114. -moz-animation: scaleUpFrom .5s ease both;
  115. animation: scaleUpFrom .5s ease both;
  116. }
  117. .owl-fadeUp-out {
  118. -webkit-animation: scaleUpTo .5s ease both;
  119. -moz-animation: scaleUpTo .5s ease both;
  120. animation: scaleUpTo .5s ease both;
  121. }
  122. /* Keyframes */
  123. /*empty*/
  124. @-webkit-keyframes empty {
  125. 0% {opacity: 1}
  126. }
  127. @-moz-keyframes empty {
  128. 0% {opacity: 1}
  129. }
  130. @keyframes empty {
  131. 0% {opacity: 1}
  132. }
  133. @-webkit-keyframes fadeIn {
  134. 0% { opacity:0; }
  135. 100% { opacity:1; }
  136. }
  137. @-moz-keyframes fadeIn {
  138. 0% { opacity:0; }
  139. 100% { opacity:1; }
  140. }
  141. @keyframes fadeIn {
  142. 0% { opacity:0; }
  143. 100% { opacity:1; }
  144. }
  145. @-webkit-keyframes fadeOut {
  146. 0% { opacity:1; }
  147. 100% { opacity:0; }
  148. }
  149. @-moz-keyframes fadeOut {
  150. 0% { opacity:1; }
  151. 100% { opacity:0; }
  152. }
  153. @keyframes fadeOut {
  154. 0% { opacity:1; }
  155. 100% { opacity:0; }
  156. }
  157. @-webkit-keyframes backSlideOut {
  158. 25% { opacity: .5; -webkit-transform: translateZ(-500px); }
  159. 75% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(-200%); }
  160. 100% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(-200%); }
  161. }
  162. @-moz-keyframes backSlideOut {
  163. 25% { opacity: .5; -moz-transform: translateZ(-500px); }
  164. 75% { opacity: .5; -moz-transform: translateZ(-500px) translateX(-200%); }
  165. 100% { opacity: .5; -moz-transform: translateZ(-500px) translateX(-200%); }
  166. }
  167. @keyframes backSlideOut {
  168. 25% { opacity: .5; transform: translateZ(-500px); }
  169. 75% { opacity: .5; transform: translateZ(-500px) translateX(-200%); }
  170. 100% { opacity: .5; transform: translateZ(-500px) translateX(-200%); }
  171. }
  172. @-webkit-keyframes backSlideIn {
  173. 0%, 25% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(200%); }
  174. 75% { opacity: .5; -webkit-transform: translateZ(-500px); }
  175. 100% { opacity: 1; -webkit-transform: translateZ(0) translateX(0); }
  176. }
  177. @-moz-keyframes backSlideIn {
  178. 0%, 25% { opacity: .5; -moz-transform: translateZ(-500px) translateX(200%); }
  179. 75% { opacity: .5; -moz-transform: translateZ(-500px); }
  180. 100% { opacity: 1; -moz-transform: translateZ(0) translateX(0); }
  181. }
  182. @keyframes backSlideIn {
  183. 0%, 25% { opacity: .5; transform: translateZ(-500px) translateX(200%); }
  184. 75% { opacity: .5; transform: translateZ(-500px); }
  185. 100% { opacity: 1; transform: translateZ(0) translateX(0); }
  186. }
  187. @-webkit-keyframes scaleToFade {
  188. to { opacity: 0; -webkit-transform: scale(.8); }
  189. }
  190. @-moz-keyframes scaleToFade {
  191. to { opacity: 0; -moz-transform: scale(.8); }
  192. }
  193. @keyframes scaleToFade {
  194. to { opacity: 0; transform: scale(.8); }
  195. }
  196. @-webkit-keyframes goDown {
  197. from { -webkit-transform: translateY(-100%); }
  198. }
  199. @-moz-keyframes goDown {
  200. from { -moz-transform: translateY(-100%); }
  201. }
  202. @keyframes goDown {
  203. from { transform: translateY(-100%); }
  204. }
  205. @-webkit-keyframes scaleUpFrom {
  206. from { opacity: 0; -webkit-transform: scale(1.5); }
  207. }
  208. @-moz-keyframes scaleUpFrom {
  209. from { opacity: 0; -moz-transform: scale(1.5); }
  210. }
  211. @keyframes scaleUpFrom {
  212. from { opacity: 0; transform: scale(1.5); }
  213. }
  214. @-webkit-keyframes scaleUpTo {
  215. to { opacity: 0; -webkit-transform: scale(1.5); }
  216. }
  217. @-moz-keyframes scaleUpTo {
  218. to { opacity: 0; -moz-transform: scale(1.5); }
  219. }
  220. @keyframes scaleUpTo {
  221. to { opacity: 0; transform: scale(1.5); }
  222. }
  223. /*
  224. * Owl Carousel Owl Demo Theme
  225. * v1.24
  226. */
  227. .owl-theme .owl-controls{
  228. margin-top: 20px;
  229. text-align: center;
  230. }
  231. /* Styling Next and Prev buttons */
  232. .owl-theme .owl-controls .owl-buttons div{
  233. color: #FFF;
  234. display: inline-block;
  235. zoom: 1;
  236. *display: inline;/*IE7 life-saver */
  237. margin: 5px;
  238. padding: 3px 10px;
  239. font-size: 12px;
  240. -webkit-border-radius: 30px;
  241. -moz-border-radius: 30px;
  242. border-radius: 30px;
  243. background: #869791;
  244. filter: Alpha(Opacity=50);/*IE7 fix*/
  245. opacity: 0.5;
  246. }
  247. /* Clickable class fix problem with hover on touch devices */
  248. /* Use it for non-touch hover action */
  249. .owl-theme .owl-controls.clickable .owl-buttons div:hover{
  250. filter: Alpha(Opacity=100);/*IE7 fix*/
  251. opacity: 1;
  252. text-decoration: none;
  253. }
  254. /* Styling Pagination*/
  255. .owl-theme .owl-controls .owl-page{
  256. display: inline-block;
  257. zoom: 1;
  258. *display: inline;/*IE7 life-saver */
  259. }
  260. .owl-theme .owl-controls .owl-page span{
  261. display: block;
  262. width: 10px;
  263. height: 10px;
  264. margin: 5px;
  265. filter: Alpha(Opacity=50);/*IE7 fix*/
  266. opacity: 1;
  267. -webkit-border-radius: 20px;
  268. -moz-border-radius: 20px;
  269. border-radius: 20px;
  270. background: transparent;
  271. border: 1px solid #cfcfcf;
  272. }
  273. .owl-theme .owl-controls .owl-page.active span,
  274. .owl-theme .owl-controls.clickable .owl-page:hover span{
  275. }
  276. /* If PaginationNumbers is true */
  277. .owl-theme .owl-controls .owl-page span.owl-numbers{
  278. height: auto;
  279. width: auto;
  280. color: #FFF;
  281. padding: 2px 10px;
  282. font-size: 12px;
  283. -webkit-border-radius: 30px;
  284. -moz-border-radius: 30px;
  285. border-radius: 30px;
  286. }
  287. /* preloading images */
  288. .owl-item.loading{
  289. min-height: 150px;
  290. background: url(../images/ajaxloader.gif) no-repeat center center
  291. }