erinyen.css 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276
  1. /*-----------------------------------------------------------------------------
  2. - Revolution Slider 5.0 Navigatin Skin Style -
  3. ERINYEN SKIN
  4. author: ThemePunch
  5. email: info@themepunch.com
  6. website: http://www.themepunch.com
  7. -----------------------------------------------------------------------------*/
  8. /* ARROWS */
  9. .erinyen.tparrows {
  10. cursor:pointer;
  11. background:#000;
  12. background:rgba(0,0,0,0.5);
  13. min-width:70px;
  14. min-height:70px;
  15. position:absolute;
  16. display:block;
  17. z-index:100;
  18. border-radius:35px;
  19. }
  20. .erinyen.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. .erinyen.tparrows.tp-leftarrow:before {
  31. content: "\e824";
  32. }
  33. .erinyen.tparrows.tp-rightarrow:before {
  34. content: "\e825";
  35. }
  36. .erinyen .tp-title-wrap {
  37. position:absolute;
  38. z-index:1;
  39. display:inline-block;
  40. background:#000;
  41. background:rgba(0,0,0,0.5);
  42. min-height:70px;
  43. line-height:70px;
  44. top:0px;
  45. margin-left:0px;
  46. border-radius:35px;
  47. overflow:hidden;
  48. transition: opacity 0.3s;
  49. -webkit-transition:opacity 0.3s;
  50. -moz-transition:opacity 0.3s;
  51. -webkit-transform: scale(0);
  52. -moz-transform: scale(0);
  53. transform: scale(0);
  54. visibility:hidden;
  55. opacity:0;
  56. }
  57. .erinyen.tparrows:hover .tp-title-wrap{
  58. -webkit-transform: scale(1);
  59. -moz-transform: scale(1);
  60. transform: scale(1);
  61. opacity:1;
  62. visibility:visible;
  63. }
  64. .erinyen.tp-rightarrow .tp-title-wrap {
  65. right:0px;
  66. margin-right:0px;margin-left:0px;
  67. -webkit-transform-origin:100% 50%;
  68. border-radius:35px;
  69. padding-right:20px;
  70. padding-left:10px;
  71. }
  72. .erinyen.tp-leftarrow .tp-title-wrap {
  73. padding-left:20px;
  74. padding-right:10px;
  75. }
  76. .erinyen .tp-arr-titleholder {
  77. letter-spacing: 3px;
  78. position:relative;
  79. -webkit-transition: -webkit-transform 0.3s;
  80. transition: transform 0.3s;
  81. transform:translateX(200px);
  82. text-transform:uppercase;
  83. color:#fff;
  84. font-weight:600;
  85. font-size:13px;
  86. line-height:70px;
  87. white-space:nowrap;
  88. padding:0px 20px;
  89. margin-left:11px;
  90. opacity:0;
  91. }
  92. .erinyen .tp-arr-imgholder {
  93. width:100%;
  94. height:100%;
  95. position:absolute;
  96. top:0px;
  97. left:0px;
  98. background-position:center center;
  99. background-size:cover;
  100. }
  101. .erinyen .tp-arr-img-over {
  102. width:100%;
  103. height:100%;
  104. position:absolute;
  105. top:0px;
  106. left:0px;
  107. background:#000;
  108. background:rgba(0,0,0,0.5);
  109. }
  110. .erinyen.tp-rightarrow .tp-arr-titleholder {
  111. transform:translateX(-200px);
  112. margin-left:0px; margin-right:11px;
  113. }
  114. .erinyen.tparrows:hover .tp-arr-titleholder {
  115. transform:translateX(0px);
  116. -webkit-transform:translateX(0px);
  117. transition-delay: 0.1s;
  118. opacity:1;
  119. }
  120. /* BULLETS */
  121. .erinyen.tp-bullets {
  122. }
  123. .erinyen.tp-bullets:before {
  124. content:" ";
  125. position:absolute;
  126. width:100%;
  127. height:100%;
  128. background: #555555; /* old browsers */
  129. background: -moz-linear-gradient(top, #555555 0%, #222222 100%); /* ff3.6+ */
  130. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#555555), color-stop(100%,#222222)); /* chrome,safari4+ */
  131. background: -webkit-linear-gradient(top, #555555 0%,#222222 100%); /* chrome10+,safari5.1+ */
  132. background: -o-linear-gradient(top, #555555 0%,#222222 100%); /* opera 11.10+ */
  133. background: -ms-linear-gradient(top, #555555 0%,#222222 100%); /* ie10+ */
  134. background: linear-gradient(to bottom, #555555 0%,#222222 100%); /* w3c */
  135. filter: progid:dximagetransform.microsoft.gradient( startcolorstr="#555555", endcolorstr="#222222",gradienttype=0 ); /* ie6-9 */
  136. padding:10px 15px;
  137. margin-left:-15px;margin-top:-10px;
  138. box-sizing:content-box;
  139. border-radius:10px;
  140. box-shadow:0px 0px 2px 1px rgba(33,33,33,0.3);
  141. }
  142. .erinyen .tp-bullet {
  143. width:13px;
  144. height:13px;
  145. position:absolute;
  146. background:#111;
  147. border-radius:50%;
  148. cursor: pointer;
  149. box-sizing:content-box;
  150. }
  151. .erinyen .tp-bullet:hover,
  152. .erinyen .tp-bullet.selected {
  153. background: #e5e5e5; /* old browsers */
  154. background: -moz-linear-gradient(top, #e5e5e5 0%, #999999 100%); /* ff3.6+ */
  155. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e5e5e5), color-stop(100%,#999999)); /* chrome,safari4+ */
  156. background: -webkit-linear-gradient(top, #e5e5e5 0%,#999999 100%); /* chrome10+,safari5.1+ */
  157. background: -o-linear-gradient(top, #e5e5e5 0%,#999999 100%); /* opera 11.10+ */
  158. background: -ms-linear-gradient(top, #e5e5e5 0%,#999999 100%); /* ie10+ */
  159. background: linear-gradient(to bottom, #e5e5e5 0%,#999999 100%); /* w3c */
  160. filter: progid:dximagetransform.microsoft.gradient( startcolorstr="#e5e5e5", endcolorstr="#999999",gradienttype=0 ); /* ie6-9 */
  161. border:1px solid #555;
  162. width:12px;height:12px;
  163. }
  164. .erinyen .tp-bullet-image {
  165. }
  166. .erinyen .tp-bullet-title {
  167. }
  168. /* THUMBS */
  169. .erinyen .tp-thumb {
  170. opacity:1
  171. }
  172. .erinyen .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. .erinyen .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. .erinyen .tp-thumb-more:before {
  199. content: "\e825";
  200. }
  201. .erinyen .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. .erinyen .tp-thumb.selected .tp-thumb-more:before,
  223. .erinyen .tp-thumb:hover .tp-thumb-more:before {
  224. color:#aaa;
  225. }
  226. .erinyen .tp-thumb.selected .tp-thumb-over,
  227. .erinyen .tp-thumb:hover .tp-thumb-over {
  228. background:#fff;
  229. }
  230. .erinyen .tp-thumb.selected .tp-thumb-title,
  231. .erinyen .tp-thumb:hover .tp-thumb-title {
  232. color:#000;
  233. }
  234. /* TABS */
  235. .erinyen .tp-tab-title {
  236. color:#a8d8ee;
  237. font-size:13px;
  238. font-weight:700;
  239. text-transform:uppercase;
  240. font-family:"Roboto Slab"
  241. margin-bottom:5px;
  242. }
  243. .erinyen .tp-tab-desc {
  244. font-size:18px;
  245. font-weight:400;
  246. color:#fff;
  247. line-height:25px;
  248. font-family:"Roboto Slab";
  249. }