hebe.css 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196
  1. /*-----------------------------------------------------------------------------
  2. - Revolution Slider 5.0 Navigatin Skin Style -
  3. HEBE SKIN
  4. author: ThemePunch
  5. email: info@themepunch.com
  6. website: http://www.themepunch.com
  7. -----------------------------------------------------------------------------*/
  8. /* ARROWS */
  9. .hebe.tparrows {
  10. cursor:pointer;
  11. background:#fff;
  12. min-width:70px;
  13. min-height:70px;
  14. position:absolute;
  15. display:block;
  16. z-index:100;
  17. }
  18. .hebe.tparrows:hover {
  19. }
  20. .hebe.tparrows:before {
  21. font-family: "revicons";
  22. font-size:30px;
  23. color:#aaa;
  24. display:block;
  25. line-height: 70px;
  26. text-align: center;
  27. -webkit-transition: color 0.3s;
  28. -moz-transition: color 0.3s;
  29. transition: color 0.3s;
  30. z-index:2;
  31. position:relative;
  32. background:#fff;
  33. min-width:70px;
  34. min-height:70px;
  35. }
  36. .hebe.tparrows.tp-leftarrow:before {
  37. content: "\e824";
  38. }
  39. .hebe.tparrows.tp-rightarrow:before {
  40. content: "\e825";
  41. }
  42. .hebe.tparrows:hover:before {
  43. color:#000;
  44. }
  45. .tp-title-wrap {
  46. position:absolute;
  47. z-index:0;
  48. display:inline-block;
  49. background:#000;
  50. background:rgba(0,0,0,0.75);
  51. min-height:60px;
  52. line-height:60px;
  53. top:-10px;
  54. margin-left:0px;
  55. -webkit-transition: -webkit-transform 0.3s;
  56. transition: transform 0.3s;
  57. transform:scaleX(0);
  58. -webkit-transform:scaleX(0);
  59. transform-origin:0% 50%;
  60. -webkit-transform-origin:0% 50%;
  61. }
  62. .hebe.tp-rightarrow .tp-title-wrap {
  63. right:0px;
  64. -webkit-transform-origin:100% 50%;
  65. }
  66. .hebe.tparrows:hover .tp-title-wrap {
  67. transform:scaleX(1);
  68. -webkit-transform:scaleX(1);
  69. }
  70. .hebe .tp-arr-titleholder {
  71. position:relative;
  72. text-transform:uppercase;
  73. color:#fff;
  74. font-weight:600;
  75. font-size:12px;
  76. line-height:90px;
  77. white-space:nowrap;
  78. padding:0px 20px 0px 90px;
  79. }
  80. .hebe.tp-rightarrow .tp-arr-titleholder {
  81. margin-left:0px;
  82. padding:0px 90px 0px 20px;
  83. }
  84. .hebe.tparrows:hover .tp-arr-titleholder {
  85. transform:translateX(0px);
  86. -webkit-transform:translateX(0px);
  87. transition-delay: 0.1s;
  88. opacity:1;
  89. }
  90. .hebe .tp-arr-imgholder{
  91. width:90px;
  92. height:90px;
  93. position:absolute;
  94. left:100%;
  95. display:block;
  96. background-size:cover;
  97. background-position:center center;
  98. top:0px; right:-90px;
  99. }
  100. .hebe.tp-rightarrow .tp-arr-imgholder{
  101. right:auto;left:-90px;
  102. }
  103. /* BULLETS */
  104. .hebe.tp-bullets {
  105. }
  106. .hebe.tp-bullets:before {
  107. content:" ";
  108. position:absolute;
  109. width:100%;
  110. height:100%;
  111. background:transparent;
  112. padding:10px;
  113. margin-left:-10px;margin-top:-10px;
  114. box-sizing:content-box;
  115. }
  116. .hebe .tp-bullet {
  117. width:3px;
  118. height:3px;
  119. position:absolute;
  120. background:#fff;
  121. cursor: pointer;
  122. border:5px solid #222;
  123. border-radius:50%;
  124. box-sizing:content-box;
  125. -webkit-perspective:400;
  126. perspective:400;
  127. -webkit-transform:translateZ(0.01px);
  128. transform:translateZ(0.01px);
  129. transition:all 0.3s;
  130. }
  131. .hebe .tp-bullet:hover,
  132. .hebe .tp-bullet.selected {
  133. background:#222;
  134. border-color:#fff;
  135. }
  136. .hebe .tp-bullet-image {
  137. position:absolute;
  138. top:-90px; left:-40px;
  139. width:70px;
  140. height:70px;
  141. background-position:center center;
  142. background-size:cover;
  143. visibility:hidden;
  144. opacity:0;
  145. transition:all 0.3s;
  146. -webkit-transform-style:flat;
  147. transform-style:flat;
  148. perspective:600;
  149. -webkit-perspective:600;
  150. transform: scale(0);
  151. -webkit-transform: scale(0);
  152. transform-origin:50% 100%;
  153. -webkit-transform-origin:50% 100%;
  154. border-radius:6px;
  155. }
  156. .hebe .tp-bullet:hover .tp-bullet-image {
  157. display:block;
  158. opacity:1;
  159. transform: scale(1);
  160. -webkit-transform: scale(1);
  161. visibility:visible;
  162. }
  163. .hebe .tp-bullet-title {
  164. }
  165. /* TABS */
  166. .hebe .tp-tab-title {
  167. color:#a8d8ee;
  168. font-size:13px;
  169. font-weight:700;
  170. text-transform:uppercase;
  171. font-family:"Roboto Slab"
  172. margin-bottom:5px;
  173. }
  174. .hebe .tp-tab-desc {
  175. font-size:18px;
  176. font-weight:400;
  177. color:#fff;
  178. line-height:25px;
  179. font-family:"Roboto Slab";
  180. }