flexslider.css 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307
  1. /*
  2. * jQuery FlexSlider v2.0
  3. * http://www.woothemes.com/flexslider/
  4. *
  5. * Copyright 2012 WooThemes
  6. * Free to use under the GPLv2 license.
  7. * http://www.gnu.org/licenses/gpl-2.0.html
  8. *
  9. * Contributing author: Tyler Smith (@mbmufffin)
  10. */
  11. /* Browser Resets */
  12. .flex-container a:active,
  13. .flexslider a:active,
  14. .flex-container a:focus,
  15. .flexslider a:focus {
  16. outline: none;
  17. }
  18. .slides,
  19. .flex-control-nav,
  20. .flex-direction-nav {
  21. margin: 0;
  22. padding: 0;
  23. list-style: none;
  24. }
  25. /* FlexSlider Necessary Styles
  26. *********************************/
  27. .flexslider .slides>li {
  28. display: none;
  29. -webkit-backface-visibility: hidden;
  30. }
  31. /* Hide the slides before the JS is loaded. Avoids image jumping */
  32. .flexslider .slides img {
  33. display: block;
  34. }
  35. .flex-pauseplay span {
  36. text-transform: capitalize;
  37. }
  38. /* Clearfix for the .slides element */
  39. .slides:after {
  40. content: ".";
  41. display: block;
  42. clear: both;
  43. visibility: hidden;
  44. line-height: 0;
  45. height: 0;
  46. }
  47. html[xmlns] .slides {
  48. display: block;
  49. }
  50. * html .slides {
  51. height: 1%;
  52. }
  53. /* No JavaScript Fallback */
  54. /* If you are not using another script, such as Modernizr, make sure you
  55. * include js that eliminates this class on page load */
  56. .no-js .slides>li:first-child {
  57. display: block;
  58. }
  59. /* FlexSlider Default Theme
  60. *********************************/
  61. .flexslider {
  62. border: 0px;
  63. position: relative;
  64. zoom: 1;
  65. }
  66. .flex-viewport {
  67. max-height: 2000px;
  68. -webkit-transition: all 1s ease;
  69. -moz-transition: all 1s ease;
  70. transition: all 1s ease;
  71. }
  72. .loading .flex-viewport {
  73. max-height: 300px;
  74. }
  75. .flexslider .slides {
  76. zoom: 1;
  77. }
  78. .carousel li {
  79. margin-right: 5px
  80. }
  81. /* Direction Nav */
  82. .flex-direction-nav {
  83. *height: 0;
  84. }
  85. .flex-direction-nav a {
  86. width: 35px;
  87. height: 49px;
  88. margin: 0;
  89. display: block;
  90. background: #33de39 url(../images/right.png) no-repeat 4px 11px;
  91. position: absolute;
  92. bottom:12%;
  93. z-index: 10;
  94. cursor: pointer;
  95. text-indent: -9999px;
  96. opacity: 1;
  97. -webkit-transition: all .3s ease;
  98. }
  99. .flex-direction-nav .flex-next {
  100. background: #33de39 url(../images/left.png) no-repeat 7px 11px;
  101. right: 45%;
  102. }
  103. .flex-direction-nav .flex-prev {
  104. left: 55%;
  105. }
  106. /*
  107. .flexslider:hover .flex-next {opacity: 1;}
  108. .flexslider:hover .flex-prev {opacity: 1;}
  109. .flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {opacity: 1;}
  110. .flex-direction-nav .flex-disabled {opacity: .3!important; filter:alpha(opacity=30); cursor: default;}*/
  111. .flex-next:hover,
  112. .flex-prev:hover {
  113. opacity: .8;
  114. }
  115. /* Control Nav */
  116. .flex-control-nav {
  117. display: block;
  118. position: absolute;
  119. left: 9px;
  120. margin-left: 0;
  121. bottom: 20%;
  122. }
  123. .flex-control-nav li {
  124. margin: 0 .5em;
  125. display: inline-block;
  126. zoom: 1;
  127. position: relative;
  128. }
  129. .flex-control-paging li a {
  130. width: 10px;
  131. height: 10px;
  132. display: block;
  133. background: none;
  134. cursor: pointer;
  135. text-indent: -9999px;
  136. border: none;
  137. color: #fff;
  138. background: #000;
  139. text-align: center;
  140. border-radius: 15px;
  141. font-weight: 600;
  142. display: none;
  143. }
  144. .flex-control-paging li a.flex-active {
  145. background: #3be8b0;
  146. cursor: default;
  147. transform: rotateX(360deg);
  148. -webkit-transform: rotateX(360deg);
  149. -moz-transform: rotateX(360deg);
  150. -o-transform: rotateX(360deg);
  151. -ms-transform: rotateX(360deg);
  152. transition: transform 2s;
  153. }
  154. .flex-control-thumbs {
  155. margin: 5px 0 0;
  156. position: static;
  157. overflow: hidden;
  158. }
  159. .flex-control-thumbs li {
  160. width: 25%;
  161. float: left;
  162. margin: 0;
  163. }
  164. .flex-control-thumbs img {
  165. width: 100%;
  166. display: block;
  167. opacity: .7;
  168. cursor: pointer;
  169. }
  170. .flex-control-thumbs img:hover {
  171. opacity: 1;
  172. }
  173. .flex-control-thumbs .flex-active {
  174. opacity: 1;
  175. cursor: default;
  176. }
  177. @media screen and (max-width:1080px) {
  178. .flex-direction-nav .flex-prev {
  179. left: 56%;
  180. }
  181. .flex-direction-nav .flex-next {
  182. right: 44%;
  183. }
  184. .flex-direction-nav a {
  185. bottom: 7%;
  186. }
  187. }
  188. @media screen and (max-width: 991px) {
  189. .flex-direction-nav .flex-next {
  190. right: 41%;
  191. }
  192. .flex-direction-nav .flex-prev {
  193. left: 59%;
  194. }
  195. .flex-direction-nav a {
  196. bottom: 0%;
  197. }
  198. }
  199. @media screen and (max-width: 667px) {
  200. .flex-direction-nav a {
  201. bottom: -4%;
  202. }
  203. .flex-direction-nav .flex-next {
  204. background-position: 4px;
  205. }
  206. .flex-direction-nav .flex-prev {
  207. background-position: 4px;
  208. }
  209. .flex-direction-nav a {
  210. width: 31px;
  211. height: 36px;
  212. }
  213. }
  214. @media screen and (max-width: 640px) {
  215. .flex-direction-nav .flex-prev {
  216. left: 37px;
  217. }
  218. .flex-direction-nav .flex-next {
  219. right: 93%;
  220. }
  221. .flex-direction-nav a {
  222. width: 35px;
  223. height: 44px;
  224. bottom: -12%;
  225. }
  226. }
  227. @media screen and (max-width: 600px) {}
  228. @media screen and (max-width: 480px) {
  229. .flex-direction-nav .flex-prev {
  230. left: 28px;
  231. }
  232. .flex-direction-nav a {
  233. bottom: -15%;
  234. }
  235. }
  236. @media screen and (max-width: 414px) {
  237. .flex-direction-nav .flex-next {
  238. right: 91%;
  239. }
  240. }
  241. @media screen and (max-width: 375px) {
  242. .flex-direction-nav .flex-prev {
  243. left: 27px;
  244. }
  245. }
  246. @media screen and (max-width: 320px) {
  247. .flex-direction-nav .flex-next {
  248. right: 89%;
  249. }
  250. }