zeus.css 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280
  1. /*-----------------------------------------------------------------------------
  2. - Revolution Slider 5.0 Navigatin Skin Style -
  3. ZEUS SKIN
  4. author: ThemePunch
  5. email: info@themepunch.com
  6. website: http://www.themepunch.com
  7. -----------------------------------------------------------------------------*/
  8. /* ARROWS */
  9. .zeus.tparrows {
  10. cursor:pointer;
  11. min-width:70px;
  12. min-height:70px;
  13. position:absolute;
  14. display:block;
  15. z-index:100;
  16. border-radius:35px;
  17. overflow:hidden;
  18. background:rgba(0,0,0,0.10);
  19. }
  20. .zeus.tparrows:before {
  21. font-family: "revicons";
  22. font-size:20px;
  23. color:#fff;
  24. display:block;
  25. line-height: 70px;
  26. text-align: center;
  27. z-index:2;
  28. position:relative;
  29. }
  30. .zeus.tparrows.tp-leftarrow:before {
  31. content: "\e824";
  32. }
  33. .zeus.tparrows.tp-rightarrow:before {
  34. content: "\e825";
  35. }
  36. .zeus .tp-title-wrap {
  37. background:#000;
  38. background:rgba(0,0,0,0.5);
  39. width:100%;
  40. height:100%;
  41. top:0px;
  42. left:0px;
  43. position:absolute;
  44. opacity:0;
  45. transform:scale(0);
  46. -webkit-transform:scale(0);
  47. transition: all 0.3s;
  48. -webkit-transition:all 0.3s;
  49. -moz-transition:all 0.3s;
  50. border-radius:50%;
  51. }
  52. .zeus .tp-arr-imgholder {
  53. width:100%;
  54. height:100%;
  55. position:absolute;
  56. top:0px;
  57. left:0px;
  58. background-position:center center;
  59. background-size:cover;
  60. border-radius:50%;
  61. transform:translateX(-100%);
  62. -webkit-transform:translateX(-100%);
  63. transition: all 0.3s;
  64. -webkit-transition:all 0.3s;
  65. -moz-transition:all 0.3s;
  66. }
  67. .zeus.tp-rightarrow .tp-arr-imgholder {
  68. transform:translateX(100%);
  69. -webkit-transform:translateX(100%);
  70. }
  71. .zeus.tparrows:hover .tp-arr-imgholder {
  72. transform:translateX(0);
  73. -webkit-transform:translateX(0);
  74. opacity:1;
  75. }
  76. .zeus.tparrows:hover .tp-title-wrap {
  77. transform:scale(1);
  78. -webkit-transform:scale(1);
  79. opacity:1;
  80. }
  81. /* BULLETS */
  82. .zeus .tp-bullet {
  83. box-sizing:content-box; -webkit-box-sizing:content-box; border-radius:50%;
  84. background-color: rgba(0, 0, 0, 0);
  85. -webkit-transition: opacity 0.3s ease;
  86. transition: opacity 0.3s ease;
  87. width:13px;height:13px;
  88. border:2px solid #fff;
  89. }
  90. .zeus .tp-bullet:after {
  91. content: "";
  92. position: absolute;
  93. width: 100%;
  94. height: 100%;
  95. left: 0;
  96. border-radius: 50%;
  97. background-color: #FFF;
  98. -webkit-transform: scale(0);
  99. transform: scale(0);
  100. -webkit-transform-origin: 50% 50%;
  101. transform-origin: 50% 50%;
  102. -webkit-transition: -webkit-transform 0.3s ease;
  103. transition: transform 0.3s ease;
  104. }
  105. .zeus .tp-bullet:hover:after,
  106. .zeus .tp-bullet.selected:after{
  107. -webkit-transform: scale(1.2);
  108. transform: scale(1.2);
  109. }
  110. .zeus .tp-bullet-image,
  111. .zeus .tp-bullet-imageoverlay{
  112. width:135px;
  113. height:60px;
  114. position:absolute;
  115. background:#000;
  116. background:rgba(0,0,0,0.5);
  117. bottom:25px;
  118. left:50%;
  119. margin-left:-65px;
  120. box-sizing:border-box;
  121. background-size:cover;
  122. background-position:center center;
  123. visibility:hidden;
  124. opacity:0;
  125. -webkit-backface-visibility: hidden;
  126. backface-visibility: hidden;
  127. -webkit-transform-origin: 50% 50%;
  128. transform-origin: 50% 50%;
  129. -webkit-transition: all 0.3s ease;
  130. transition: all 0.3s ease;
  131. border-radius:4px;
  132. }
  133. .zeus .tp-bullet-title,
  134. .zeus .tp-bullet-imageoverlay {
  135. z-index:2;
  136. -webkit-transition: all 0.5s ease;
  137. transition: all 0.5s ease;
  138. }
  139. .zeus .tp-bullet-title {
  140. color:#fff;
  141. text-align:center;
  142. line-height:15px;
  143. font-size:13px;
  144. font-weight:600;
  145. z-index:3;
  146. visibility:hidden;
  147. opacity:0;
  148. -webkit-backface-visibility: hidden;
  149. backface-visibility: hidden;
  150. -webkit-transform-origin: 50% 50%;
  151. transform-origin: 50% 50%;
  152. -webkit-transition: all 0.3s ease;
  153. transition: all 0.3s ease;
  154. position:absolute;
  155. bottom:45px;
  156. width:135px;
  157. vertical-align:middle;
  158. left:-57px;
  159. }
  160. .zeus .tp-bullet:hover .tp-bullet-title,
  161. .zeus .tp-bullet:hover .tp-bullet-image,
  162. .zeus .tp-bullet:hover .tp-bullet-imageoverlay{
  163. opacity:1;
  164. visibility:visible;
  165. -webkit-transform:translateY(0px);
  166. transform:translateY(0px);
  167. }
  168. /* THUMBS */
  169. .zeus .tp-thumb {
  170. opacity:1
  171. }
  172. .zeus .tp-thumb-over {
  173. background:#000;
  174. background:rgba(0,0,0,0.25);
  175. width:100%;
  176. height:100%;
  177. position:absolute;
  178. top:0px;
  179. left:0px;
  180. z-index:1;
  181. -webkit-transition:all 0.3s;
  182. transition:all 0.3s;
  183. }
  184. .zeus .tp-thumb-more:before {
  185. font-family: "revicons";
  186. font-size:12px;
  187. color:#aaa;
  188. color:rgba(255,255,255,0.75);
  189. display:block;
  190. line-height: 12px;
  191. text-align: left;
  192. z-index:2;
  193. position:absolute;
  194. top:20px;
  195. right:20px;
  196. z-index:2;
  197. }
  198. .zeus .tp-thumb-more:before {
  199. content: "\e825";
  200. }
  201. .zeus .tp-thumb-title {
  202. font-family:"Raleway";
  203. letter-spacing:1px;
  204. font-size:12px;
  205. color:#fff;
  206. display:block;
  207. line-height: 15px;
  208. text-align: left;
  209. z-index:2;
  210. position:absolute;
  211. top:0px;
  212. left:0px;
  213. z-index:2;
  214. padding:20px 35px 20px 20px;
  215. width:100%;
  216. height:100%;
  217. box-sizing:border-box;
  218. transition:all 0.3s;
  219. -webkit-transition:all 0.3s;
  220. font-weight:500;
  221. }
  222. .zeus .tp-thumb.selected .tp-thumb-more:before,
  223. .zeus .tp-thumb:hover .tp-thumb-more:before {
  224. color:#aaa;
  225. }
  226. .zeus .tp-thumb.selected .tp-thumb-over,
  227. .zeus .tp-thumb:hover .tp-thumb-over {
  228. background:#000;
  229. }
  230. .zeus .tp-thumb.selected .tp-thumb-title,
  231. .zeus .tp-thumb:hover .tp-thumb-title {
  232. color:#fff;
  233. }
  234. /* TABS */
  235. .zeus .tp-tab {
  236. opacity:1;
  237. box-sizing:border-box;
  238. }
  239. .zeus .tp-tab-title {
  240. display: block;
  241. text-align: center;
  242. background: rgba(0,0,0,0.25);
  243. font-family: "Roboto Slab", serif;
  244. font-weight: 700;
  245. font-size: 13px;
  246. line-height: 13px;
  247. color: #fff;
  248. padding: 9px 10px; }
  249. .zeus .tp-tab:hover .tp-tab-title,
  250. .zeus .tp-tab.selected .tp-tab-title {
  251. color: #000;
  252. background:rgba(255,255,255,1);
  253. }