flexslider.css 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221
  1. /*
  2. * jQuery FlexSlider v2.6.1
  3. * http://www.woothemes.com/flexslider/
  4. *
  5. * Copyright 2012 WooThemes
  6. * Free to use under the GPLv2 and later license.
  7. * http://www.gnu.org/licenses/gpl-2.0.html
  8. *
  9. * Contributing author: Tyler Smith (@mbmufffin)
  10. *
  11. */
  12. /* ====================================================================================================================
  13. * FONT-FACE
  14. * ====================================================================================================================*/
  15. @font-face {
  16. font-family: 'flexslider-icon';
  17. src: url('fonts/flexslider-icon.eot');
  18. src: url('fonts/flexslider-icon.eot?#iefix') format('embedded-opentype'), url('fonts/flexslider-icon.woff') format('woff'), url('fonts/flexslider-icon.ttf') format('truetype'), url('fonts/flexslider-icon.svg#flexslider-icon') format('svg');
  19. font-weight: normal;
  20. font-style: normal;
  21. }
  22. /* ====================================================================================================================
  23. * RESETS
  24. * ====================================================================================================================*/
  25. .flex-container a:hover,
  26. .flex-slider a:hover {
  27. outline: none;
  28. }
  29. .slides,
  30. .slides > li,
  31. .flex-control-nav,
  32. .flex-direction-nav {
  33. margin: 0;
  34. padding: 0;
  35. list-style: none;
  36. }
  37. .flex-pauseplay span {
  38. text-transform: capitalize;
  39. }
  40. /* ====================================================================================================================
  41. * BASE STYLES
  42. * ====================================================================================================================*/
  43. .flexslider {
  44. margin: 0;
  45. padding: 0;
  46. }
  47. .flexslider .slides > li {
  48. display: none;
  49. -webkit-backface-visibility: hidden;
  50. }
  51. .flexslider .slides img {
  52. width: 100%;
  53. display: block;
  54. }
  55. .flexslider .slides:after {
  56. content: "\0020";
  57. display: block;
  58. clear: both;
  59. visibility: hidden;
  60. line-height: 0;
  61. height: 0;
  62. }
  63. html[xmlns] .flexslider .slides {
  64. display: block;
  65. }
  66. * html .flexslider .slides {
  67. height: 1%;
  68. }
  69. .no-js .flexslider .slides > li:first-child {
  70. display: block;
  71. }
  72. /* ====================================================================================================================
  73. * DEFAULT THEME
  74. * ====================================================================================================================*/
  75. .flexslider {
  76. margin: 0;
  77. position: relative;
  78. zoom: 1;
  79. -webkit-border-radius: 4px;
  80. -moz-border-radius: 4px;
  81. border-radius: 4px;
  82. -webkit-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
  83. -moz-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
  84. -o-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
  85. box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
  86. }
  87. .flexslider .slides {
  88. zoom: 1;
  89. }
  90. .flexslider .slides img {
  91. height: auto;
  92. -moz-user-select: none;
  93. }
  94. .flex-viewport {
  95. max-height: 2000px;
  96. -webkit-transition: all 1s ease;
  97. -moz-transition: all 1s ease;
  98. -ms-transition: all 1s ease;
  99. -o-transition: all 1s ease;
  100. transition: all 1s ease;
  101. }
  102. .loading .flex-viewport {
  103. max-height: 300px;
  104. }
  105. .carousel li {
  106. margin-right: 5px;
  107. }
  108. .flex-direction-nav a {
  109. text-decoration: none;
  110. display: block;
  111. position: absolute;
  112. top: 42%;
  113. left: 6%;
  114. z-index: 10;
  115. color: #fff;
  116. -webkit-transition: all 0.3s ease-in-out;
  117. -moz-transition: all 0.3s ease-in-out;
  118. -ms-transition: all 0.3s ease-in-out;
  119. -o-transition: all 0.3s ease-in-out;
  120. transition: all 0.3s ease-in-out;
  121. font-size: 0;
  122. }
  123. .flex-direction-nav a:before {
  124. font-size: 60px;
  125. display: block;
  126. content: "\f104";
  127. font-family: FontAwesome;
  128. line-height: 47px;
  129. }
  130. .flex-direction-nav a:hover {
  131. -webkit-transform: scale(1.5);
  132. -moz-transform: scale(1.5);
  133. -o-transform: scale(1.5);
  134. -ms-transform: scale(1.5);
  135. transform: scale(1.5);
  136. }
  137. .flex-direction-nav .flex-next {
  138. right: 6%;
  139. left: inherit;
  140. }
  141. .flex-direction-nav a.flex-next:before {
  142. font-size: 60px;
  143. display: block;
  144. content: "\f105";
  145. font-family: FontAwesome;
  146. line-height: 47px;
  147. }
  148. .flex-control-nav {
  149. width: 100%;
  150. position: absolute;
  151. bottom: -73%;
  152. text-align: center;
  153. display:none;
  154. }
  155. .flex-control-nav li {
  156. margin: 0 6px;
  157. display: inline-block;
  158. zoom: 1;
  159. }
  160. /* ====================================================================================================================
  161. * RESPONSIVE
  162. * ====================================================================================================================*/
  163. @media screen and (max-width: 1920px) {
  164. .flex-direction-nav a {
  165. top: 51%;
  166. }
  167. }
  168. @media screen and (max-width: 1680px) {
  169. .flex-direction-nav a {
  170. top: 45%;
  171. }
  172. }
  173. @media screen and (max-width: 1366px) {
  174. .flex-direction-nav a {
  175. top: 46%;
  176. }
  177. }
  178. @media screen and (max-width: 1280px) {
  179. .flex-direction-nav a {
  180. top: 43%;
  181. }
  182. }
  183. @media screen and (max-width: 1050px) {
  184. .flex-direction-nav a {
  185. top: 45%;
  186. }
  187. }
  188. @media screen and (max-width: 991px) {
  189. .flex-direction-nav a {
  190. left: 3%;
  191. }
  192. .flex-direction-nav .flex-next {
  193. right: 3%;
  194. }
  195. }
  196. @media screen and (max-width: 800px) {
  197. .flex-direction-nav a {
  198. top: 47%;
  199. }
  200. }
  201. @media screen and (max-width: 767px) {
  202. .flex-direction-nav a.flex-next:before,.flex-direction-nav a:before {
  203. font-size: 45px;
  204. }
  205. }
  206. @media screen and (max-width: 480px) {
  207. .flex-direction-nav a.flex-next:before, .flex-direction-nav a:before {
  208. font-size: 34px;
  209. }
  210. }
  211. @media screen and (max-width: 414px) {
  212. .flex-direction-nav a:before ,.flex-direction-nav a.flex-next:before{
  213. font-size: 28px;
  214. line-height: 38px;
  215. }
  216. .flex-control-nav {
  217. bottom: -32%;
  218. }
  219. }