nivo-slider.css 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347
  1. /*
  2. * jQuery Nivo Slider v3.2
  3. * http://nivo.dev7studios.com
  4. *
  5. * Copyright 2012, Dev7studios
  6. * Free to use and abuse under the MIT license.
  7. * http://www.opensource.org/licenses/mit-license.php
  8. */
  9. /* The Nivo Slider styles */
  10. /* #container {
  11. width:100%;
  12. height:100%;
  13. overflow:hidden;
  14. position:fixed;
  15. top:0px;
  16. left:0px;
  17. }
  18. .nivoSlider {
  19. position:fixed;
  20. top:-16px;
  21. left:0px;
  22. }
  23. .nivoSlider img {position:absolute;
  24. top:0px;
  25. left:0px;
  26. } */
  27. .nivoSlider {
  28. position:relative;
  29. width:100%;
  30. height:auto;
  31. overflow: hidden;
  32. }
  33. .nivoSlider img {
  34. position:absolute;
  35. top:0px;
  36. left:0px;
  37. max-width: none;
  38. }
  39. .nivo-main-image {
  40. display: block !important;
  41. position: relative !important;
  42. width: 100% !important;
  43. height:100% !important;
  44. }
  45. /* If an image is wrapped in a link */
  46. .nivoSlider a.nivo-imageLink {
  47. position:absolute;
  48. top:0px;
  49. left:0px;
  50. width:100%;
  51. height:100%;
  52. border:0;
  53. padding:0;
  54. margin:0;
  55. z-index:6;
  56. display:none;
  57. background:white;
  58. filter:alpha(opacity=0);
  59. opacity:0;
  60. }
  61. /* The slices and boxes in the Slider */
  62. .nivo-slice {
  63. display:block;
  64. position:absolute;
  65. z-index:5;
  66. height:100%;
  67. top:0;
  68. }
  69. .nivo-box {
  70. display:block;
  71. position:absolute;
  72. z-index:5;
  73. overflow:hidden;
  74. }
  75. .nivo-box img { display:block; }
  76. /* Caption styles */
  77. .nivo-caption {
  78. position:absolute;
  79. left:0px;
  80. bottom:0px;
  81. color:#fff;
  82. width:100%;
  83. z-index:8;
  84. padding: 5px 10px;
  85. opacity: 0.8;
  86. overflow: hidden;
  87. display: none;
  88. -moz-opacity: 0.8;
  89. filter:alpha(opacity=8);
  90. -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  91. -moz-box-sizing: border-box; /* Firefox, other Gecko */
  92. box-sizing: border-box; /* Opera/IE 8+ */
  93. }
  94. .nivo-caption p {
  95. padding:5px;
  96. margin:0;
  97. }
  98. .nivo-caption a {
  99. display:inline !important;
  100. }
  101. .nivo-html-caption {
  102. display:none;
  103. }
  104. /* Direction nav styles (e.g. Next & Prev) */
  105. .nivo-directionNav a {
  106. cursor: pointer;
  107. margin-top: -25px;
  108. position: absolute;
  109. top: 50%;
  110. z-index: 9;
  111. }
  112. .nivo-prevNav {
  113. left:0px;
  114. }
  115. .nivo-nextNav {
  116. right:0px;
  117. }
  118. /* Control nav styles (e.g. 1,2,3...) */
  119. .nivo-controlNav {
  120. text-align:center;
  121. padding: 15px 0;
  122. }
  123. .nivo-controlNav a {
  124. cursor:pointer;
  125. }
  126. .nivo-controlNav a.active {
  127. font-weight:bold;
  128. }
  129. /* ------------------------------
  130. Default Theme
  131. ---------------------------------*/
  132. .slider-direction {
  133. position: absolute;
  134. left:0;
  135. top:0;
  136. width: 100%;
  137. background: none;
  138. color: #fff;
  139. font-size: 16px;
  140. z-index: 999;
  141. display: none;
  142. }
  143. /* If an image is wrapped in a link */
  144. .nivoSlider a.nivo-imageLink {
  145. position:absolute;
  146. top:0px;
  147. left:0px;
  148. width:100%;
  149. height:100%;
  150. border:0;
  151. padding:0;
  152. margin:0;
  153. z-index:6;
  154. display:none;
  155. background:white;
  156. filter:alpha(opacity=0);
  157. opacity:0;
  158. }
  159. /* The slices and boxes in the Slider */
  160. .nivo-slice {
  161. display:block;
  162. position:absolute;
  163. z-index:5;
  164. height:100%;
  165. top:0;
  166. }
  167. .nivo-box {
  168. display:block;
  169. position:absolute;
  170. z-index:5;
  171. overflow:hidden;
  172. }
  173. .nivo-box img { display:block; }
  174. .nivo-caption {
  175. position:absolute;
  176. left:0;
  177. top:0;
  178. color:#fff;
  179. width:100%;
  180. height: 100%;
  181. z-index:8;
  182. opacity:1;
  183. }
  184. .nivo-main-image {
  185. display: block !important;
  186. position: relative !important;
  187. width: 100% !important;
  188. }
  189. /* The slices and boxes in the Slider */
  190. .nivo-slice {
  191. display:block;
  192. position:absolute;
  193. z-index:5;
  194. height:100%;
  195. top:0;
  196. }
  197. .nivo-box {
  198. display:block;
  199. position:absolute;
  200. z-index:5;
  201. overflow:hidden;
  202. }
  203. @-webkit-keyframes myfirst {
  204. from {width: 0;}
  205. to {width: 100%;}
  206. }
  207. @keyframes myfirst {
  208. from {width: 0;}
  209. to {width: 100%;}
  210. }
  211. .slider-progress.pos_hover{
  212. -webkit-animation-play-state: paused;
  213. animation-play-state: paused;
  214. }
  215. /* ------------------------------
  216. custom slider
  217. ---------------------------------*/
  218. .slider-progress{
  219. position:absolute;
  220. top:0;
  221. left:0;
  222. background-color: rgba(49, 56, 72, 0.298);
  223. height:5px;
  224. -webkit-animation: myfirst 5000ms ease-in-out;
  225. -moz-animation: myfirst 5000ms ease-in-out;
  226. -ms-animation: myfirst 5000ms ease-in-out;
  227. animation: myfirst 5000ms ease-in-out;
  228. }
  229. .s-tb{
  230. display: table;
  231. height: 100%;
  232. width: 100%;
  233. float: left;
  234. }
  235. .s-tb-c{
  236. display: table-cell;
  237. vertical-align: middle;
  238. }
  239. .t-cn{text-align: center}
  240. .t-lft{text-align: left}
  241. .t-lfr{text-align: right}
  242. /* ------------------------------
  243. slider animation
  244. ---------------------------------*/
  245. /* -------------- Home 1 ---------------- */
  246. .home1 .slider-1 h1{
  247. -webkit-animation: bounceInUp 1000ms ease-in-out;
  248. -moz-animation: bounceInUp 1000ms ease-in-out;
  249. -ms-animation: bounceInUp 1000ms ease-in-out;
  250. animation: bounceInUp 1000ms ease-in-out;
  251. }
  252. .home1 .slider-1 h2{
  253. -webkit-animation: fadeInRight 1500ms ease-in-out;
  254. -moz-animation: fadeInRight 1500ms ease-in-out;
  255. -ms-animation: fadeInRight 1500ms ease-in-out;
  256. animation: fadeInRight 1500ms ease-in-out;
  257. }
  258. .home1 .slider-2 h1{
  259. -webkit-animation: fadeInLeft 500ms ease-in-out;
  260. -moz-animation: fadeInLeft 500ms ease-in-out;
  261. -ms-animation: fadeInLeft 500ms ease-in-out;
  262. animation: fadeInLeft 500ms ease-in-out;
  263. }
  264. .home1 .slider-2 h3{
  265. -webkit-animation: fadeInLeft 1500ms ease-in-out;
  266. -moz-animation: fadeInLeft 1500ms ease-in-out;
  267. -ms-animation: fadeInLeft 1500ms ease-in-out;
  268. animation: fadeInLeft 1500ms ease-in-out;
  269. }
  270. /* -------------- Home 2 ---------------- */
  271. .home2 .slider-2 h1{
  272. -webkit-animation: fadeInLeft 500ms ease-in-out;
  273. -moz-animation: fadeInLeft 500ms ease-in-out;
  274. -ms-animation: fadeInLeft 500ms ease-in-out;
  275. animation: fadeInLeft 500ms ease-in-out;
  276. }
  277. .home2 .slider-2 h3{
  278. -webkit-animation: fadeInLeft 1500ms ease-in-out;
  279. -moz-animation: fadeInLeft 1500ms ease-in-out;
  280. -ms-animation: fadeInLeft 1500ms ease-in-out;
  281. animation: fadeInLeft 1500ms ease-in-out;
  282. }
  283. .home2 .layer-1{
  284. -webkit-animation: fadeInLeft 1500ms ease-in-out;
  285. -moz-animation: fadeInLeft 1500ms ease-in-out;
  286. -ms-animation: fadeInLeft 1500ms ease-in-out;
  287. animation: fadeInLeft 1500ms ease-in-out;
  288. }
  289. .home2 .layer-2{
  290. -webkit-animation: bounceInUp 1000ms ease-in-out;
  291. -moz-animation: bounceInUp 1000ms ease-in-out;
  292. -ms-animation: bounceInUp 1000ms ease-in-out;
  293. animation: bounceInUp 1000ms ease-in-out;
  294. }
  295. .home2 .layer-3{
  296. -webkit-animation: fadeInRight 1500ms ease-in-out;
  297. -moz-animation: fadeInRight 1500ms ease-in-out;
  298. -ms-animation: fadeInRight 1500ms ease-in-out;
  299. animation: fadeInRight 1500ms ease-in-out;
  300. }
  301. .home2 .layer-1-1{
  302. -webkit-animation: fadeInRight 1500ms ease-in-out;
  303. -moz-animation: fadeInRight 1500ms ease-in-out;
  304. -ms-animation: fadeInRight 1500ms ease-in-out;
  305. animation: fadeInRight 1500ms ease-in-out;
  306. }
  307. /* -------------- Home 3 ---------------- */
  308. .home3 .slider-1 h1{
  309. -webkit-animation: fadeInLeft 500ms ease-in-out;
  310. -moz-animation: fadeInLeft 500ms ease-in-out;
  311. -ms-animation: fadeInLeft 500ms ease-in-out;
  312. animation: fadeInLeft 500ms ease-in-out;
  313. }
  314. .home3 .slider-1 h3{
  315. -webkit-animation: fadeInLeft 1500ms ease-in-out;
  316. -moz-animation: fadeInLeft 1500ms ease-in-out;
  317. -ms-animation: fadeInLeft 1500ms ease-in-out;
  318. animation: fadeInLeft 1500ms ease-in-out;
  319. }
  320. .home3 .slider-2 h1{
  321. -webkit-animation: bounceInUp 1000ms ease-in-out;
  322. -moz-animation: bounceInUp 1000ms ease-in-out;
  323. -ms-animation: bounceInUp 1000ms ease-in-out;
  324. animation: bounceInUp 1000ms ease-in-out;
  325. }
  326. .home3 .slider-2 h3{
  327. -webkit-animation: fadeInLeft 1500ms ease-in-out;
  328. -moz-animation: fadeInLeft 1500ms ease-in-out;
  329. -ms-animation: fadeInLeft 1500ms ease-in-out;
  330. animation: fadeInLeft 1500ms ease-in-out;
  331. }
  332. .home3 .slider-3 h1{
  333. -webkit-animation: fadeInRight 500ms ease-in-out;
  334. -moz-animation: fadeInRight 500ms ease-in-out;
  335. -ms-animation: fadeInRight 500ms ease-in-out;
  336. animation: fadeInRight 500ms ease-in-out;
  337. }
  338. .home3 .slider-3 h3{
  339. -webkit-animation: fadeInRight 1500ms ease-in-out;
  340. -moz-animation: fadeInRight 1500ms ease-in-out;
  341. -ms-animation: fadeInRight 1500ms ease-in-out;
  342. animation: fadeInRight 1500ms ease-in-out;
  343. }