style.css 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450
  1. @font-face {
  2. font-family: 'icomoon';
  3. src: url("../fonts/icomoon/icomoon.eot?srf3rx");
  4. src: url("../fonts/icomoon/icomoon.eot?srf3rx#iefix") format("embedded-opentype"), url("../fonts/icomoon/icomoon.ttf?srf3rx") format("truetype"), url("../fonts/icomoon/icomoon.woff?srf3rx") format("woff"), url("../fonts/icomoon/icomoon.svg?srf3rx#icomoon") format("svg");
  5. font-weight: normal;
  6. font-style: normal;
  7. }
  8. /* =======================================================
  9. *
  10. * Template Style
  11. * Edit this section
  12. *
  13. * ======================================================= */
  14. body {
  15. font-family: "Source Sans Pro", Arial, sans-serif;
  16. font-weight: 300;
  17. font-size: 20px;
  18. line-height: 1.5;
  19. color: #7f7f7f;
  20. color: rgba(255, 255, 255, 0.7);
  21. background: #fff;
  22. height: 100%;
  23. position: relative;
  24. background-size: cover;
  25. background-attachment: fixed;
  26. background-repeat: no-repeat;
  27. }
  28. @media screen and (max-width: 768px) {
  29. body {
  30. background-position: center center;
  31. background-repeat: no-repeat;
  32. }
  33. }
  34. a {
  35. color: #17e7a4;
  36. -webkit-transition: 0.5s;
  37. -o-transition: 0.5s;
  38. transition: 0.5s;
  39. }
  40. a:hover, a:active, a:focus {
  41. color: #17e7a4;
  42. outline: none;
  43. }
  44. p {
  45. margin-bottom: 1.5em;
  46. }
  47. h1, h2, h3, h4, h5, h6 {
  48. color: #fff;
  49. font-family: "Source Sans Pro", Arial, sans-serif;
  50. font-weight: 400;
  51. margin: 0 0 30px 0;
  52. }
  53. ::-webkit-selection {
  54. color: #fff;
  55. background: #17e7a4;
  56. }
  57. ::-moz-selection {
  58. color: #fff;
  59. background: #17e7a4;
  60. }
  61. ::selection {
  62. color: #fff;
  63. background: #17e7a4;
  64. }
  65. #fh5co-main {
  66. max-width: 760px;
  67. min-height: 600px;
  68. margin: 5em auto 5em auto;
  69. position: relative;
  70. background: rgba(0, 0, 0, 0.85);
  71. overflow: hidden;
  72. -webkit-border-radius: 7px;
  73. -moz-border-radius: 7px;
  74. -ms-border-radius: 7px;
  75. border-radius: 7px;
  76. -webkit-transition: 0.5s;
  77. -o-transition: 0.5s;
  78. transition: 0.5s;
  79. }
  80. @media screen and (max-width: 768px) {
  81. #fh5co-main {
  82. margin: 2em .5em 5em .5em;
  83. }
  84. }
  85. .fh5co-tab-wrap {
  86. position: relative;
  87. }
  88. .fh5co-tab-wrap .fh5co-tab-menu {
  89. list-style: none;
  90. text-align: center;
  91. margin-bottom: 2em;
  92. position: relative;
  93. top: -.5em;
  94. padding: 0;
  95. margin: 0;
  96. }
  97. @media screen and (max-width: 768px) {
  98. .fh5co-tab-wrap .fh5co-tab-menu {
  99. top: -7px;
  100. }
  101. }
  102. .fh5co-tab-wrap .fh5co-tab-menu li {
  103. display: -moz-inline-stack;
  104. display: inline-block;
  105. zoom: 1;
  106. *display: inline;
  107. text-align: center;
  108. padding: 0;
  109. margin: 0;
  110. }
  111. .fh5co-tab-wrap .fh5co-tab-menu li a {
  112. padding: 2em 1em 1em 1em;
  113. position: relative;
  114. color: rgba(255, 255, 255, 0.5);
  115. z-index: 10;
  116. display: -moz-inline-stack;
  117. display: inline-block;
  118. zoom: 1;
  119. *display: inline;
  120. -webkit-transition: 0.3s;
  121. -o-transition: 0.3s;
  122. transition: 0.3s;
  123. }
  124. .fh5co-tab-wrap .fh5co-tab-menu li a .icon {
  125. display: block;
  126. position: relative;
  127. font-size: 22px;
  128. bottom: 0;
  129. -webkit-transition: 0.3s;
  130. -o-transition: 0.3s;
  131. transition: 0.3s;
  132. }
  133. .fh5co-tab-wrap .fh5co-tab-menu li a .menu-text {
  134. display: block;
  135. -webkit-transition: 0.5s;
  136. -o-transition: 0.5s;
  137. transition: 0.5s;
  138. }
  139. @media screen and (max-width: 768px) {
  140. .fh5co-tab-wrap .fh5co-tab-menu li a .menu-text {
  141. display: none;
  142. }
  143. }
  144. @media screen and (max-width: 768px) {
  145. .fh5co-tab-wrap .fh5co-tab-menu li a {
  146. padding: 1em .5em .5em .5em;
  147. }
  148. }
  149. .fh5co-tab-wrap .fh5co-tab-menu li a:after {
  150. position: absolute;
  151. content: "";
  152. height: 0;
  153. background: #17e7a4;
  154. z-index: -1;
  155. top: 0;
  156. left: 0;
  157. width: 100%;
  158. -webkit-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  159. -moz-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  160. -ms-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  161. -o-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  162. transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  163. -webkit-border-radius: 7px;
  164. -moz-border-radius: 7px;
  165. -ms-border-radius: 7px;
  166. border-radius: 7px;
  167. }
  168. .fh5co-tab-wrap .fh5co-tab-menu li a:hover {
  169. color: #fff;
  170. text-decoration: none;
  171. }
  172. .fh5co-tab-wrap .fh5co-tab-menu li a:hover .icon {
  173. bottom: 10px;
  174. }
  175. @media screen and (max-width: 768px) {
  176. .fh5co-tab-wrap .fh5co-tab-menu li a:hover .icon {
  177. bottom: 0px;
  178. }
  179. }
  180. .fh5co-tab-wrap .fh5co-tab-menu li a:hover:after {
  181. height: 100%;
  182. }
  183. .fh5co-tab-wrap .fh5co-tab-menu li.active .icon {
  184. bottom: 10px;
  185. }
  186. @media screen and (max-width: 768px) {
  187. .fh5co-tab-wrap .fh5co-tab-menu li.active .icon {
  188. bottom: 0px;
  189. }
  190. }
  191. .fh5co-tab-wrap .fh5co-tab-menu li.active > a {
  192. color: #fff;
  193. text-decoration: none;
  194. }
  195. .fh5co-tab-wrap .fh5co-tab-menu li.active > a:after {
  196. height: 100%;
  197. }
  198. .fh5co-tab-wrap .fh5co-tab-content {
  199. padding-left: 4em;
  200. padding-right: 4em;
  201. position: absolute;
  202. top: 0;
  203. opacity: 0;
  204. visibility: hidden;
  205. width: 100%;
  206. }
  207. @media screen and (max-width: 768px) {
  208. .fh5co-tab-wrap .fh5co-tab-content {
  209. padding-left: .5em;
  210. padding-right: .5em;
  211. }
  212. }
  213. .fh5co-tab-wrap .fh5co-tab-content.active {
  214. opacity: 1;
  215. visibility: visible;
  216. }
  217. .fh5co-tab-wrap .fh5co-tab-content .fh5co-content-inner {
  218. padding: 7em 2em 5em 2em;
  219. float: left;
  220. width: 100%;
  221. position: relative;
  222. }
  223. @media screen and (max-width: 768px) {
  224. .fh5co-tab-wrap .fh5co-tab-content .fh5co-content-inner {
  225. padding: 4em .5em 5em .5em;
  226. }
  227. }
  228. figure {
  229. margin-bottom: 1.5em;
  230. }
  231. .fh5co-counter .fh5co-number {
  232. font-size: 100px;
  233. color: #17e7a4;
  234. font-weight: 400;
  235. margin: 0;
  236. padding: 0;
  237. line-height: .7;
  238. }
  239. .fh5co-counter .fh5co-number.fh5co-left {
  240. float: left;
  241. width: 30%;
  242. }
  243. @media screen and (max-width: 768px) {
  244. .fh5co-counter .fh5co-number.fh5co-left {
  245. width: 100%;
  246. line-height: 1.2;
  247. }
  248. }
  249. .fh5co-counter .fh5co-text {
  250. float: right;
  251. text-align: left;
  252. width: 70%;
  253. }
  254. @media screen and (max-width: 768px) {
  255. .fh5co-counter .fh5co-text {
  256. width: 100%;
  257. text-align: center;
  258. }
  259. }
  260. .fh5co-counter .fh5co-text h3 {
  261. margin: 0;
  262. padding: 0;
  263. position: relative;
  264. }
  265. .fh5co-counter .fh5co-text h3.border-bottom:after {
  266. content: "";
  267. width: 50px;
  268. }
  269. .fh5co-social {
  270. padding: 0;
  271. margin: 0;
  272. text-align: center;
  273. }
  274. .fh5co-social li {
  275. padding: 0;
  276. margin: 0;
  277. list-style: none;
  278. display: -moz-inline-stack;
  279. display: inline-block;
  280. zoom: 1;
  281. *display: inline;
  282. }
  283. .fh5co-social li a {
  284. font-size: 22px;
  285. color: #fff;
  286. padding: 10px 20px;
  287. display: -moz-inline-stack;
  288. display: inline-block;
  289. zoom: 1;
  290. *display: inline;
  291. -webkit-border-radius: 7px;
  292. -moz-border-radius: 7px;
  293. -ms-border-radius: 7px;
  294. border-radius: 7px;
  295. }
  296. @media screen and (max-width: 768px) {
  297. .fh5co-social li a {
  298. padding: 10px 8px;
  299. }
  300. }
  301. .fh5co-social li a:hover {
  302. color: #17e7a4;
  303. }
  304. .fh5co-social li a:hover, .fh5co-social li a:active, .fh5co-social li a:focus {
  305. outline: none;
  306. text-decoration: none;
  307. }
  308. .fh5co-feature {
  309. text-align: left;
  310. width: 100%;
  311. float: left;
  312. }
  313. .fh5co-feature .fh5co-icon {
  314. float: left;
  315. width: 10%;
  316. display: block;
  317. margin-top: 5px;
  318. }
  319. .fh5co-feature .fh5co-icon i {
  320. color: #17e7a4;
  321. font-size: 40px;
  322. }
  323. .fh5co-feature .fh5co-text {
  324. float: right;
  325. width: 82%;
  326. }
  327. @media screen and (max-width: 768px) {
  328. .fh5co-feature .fh5co-text {
  329. width: 82%;
  330. }
  331. }
  332. @media screen and (max-width: 480px) {
  333. .fh5co-feature .fh5co-text {
  334. width: 72%;
  335. }
  336. }
  337. .fh5co-feature .fh5co-text h2, .fh5co-feature .fh5co-text h3 {
  338. margin: 0;
  339. padding: 0;
  340. }
  341. .fh5co-feature .fh5co-text h3 {
  342. font-weight: 300;
  343. margin-bottom: 10px;
  344. color: rgba(255, 255, 255, 0.8);
  345. font-size: 20px;
  346. }
  347. .fh5co-feature .fh5co-text h2 {
  348. font-size: 16px;
  349. letter-spacing: 2px;
  350. font-weight: bold;
  351. text-transform: uppercase;
  352. }
  353. .chart {
  354. width: 160px;
  355. height: 160px;
  356. margin: 0 auto 30px auto;
  357. position: relative;
  358. text-align: center;
  359. }
  360. .chart span {
  361. position: absolute;
  362. top: 50%;
  363. left: 0;
  364. margin-top: -30px;
  365. width: 100%;
  366. }
  367. .chart span strong {
  368. display: block;
  369. }
  370. .chart canvas {
  371. position: absolute;
  372. left: 0;
  373. top: 0;
  374. }
  375. #fh5co-footer {
  376. margin-top: 50px;
  377. background: black;
  378. clear: both;
  379. color: rgba(255, 255, 255, 0.6);
  380. font-size: 14px;
  381. position: absolute;
  382. bottom: 0;
  383. width: 100%;
  384. padding: 20px 20px;
  385. line-height: 1.2;
  386. }
  387. #fh5co-footer small {
  388. font-size: 14px;
  389. }
  390. #fh5co-footer .fh5co-author {
  391. display: block;
  392. }
  393. @media screen and (max-width: 768px) {
  394. #fh5co-footer .fh5co-author {
  395. display: -moz-inline-stack;
  396. display: inline-block;
  397. zoom: 1;
  398. *display: inline;
  399. }
  400. }
  401. @media screen and (max-width: 480px) {
  402. .col-xxs-12 {
  403. float: none;
  404. width: 100%;
  405. }
  406. }
  407. .row-bottom-padded-lg {
  408. padding-bottom: 7em;
  409. }
  410. @media screen and (max-width: 768px) {
  411. .row-bottom-padded-lg {
  412. padding-bottom: 1em;
  413. }
  414. }
  415. .row-bottom-padded-md {
  416. padding-bottom: 4em;
  417. }
  418. @media screen and (max-width: 768px) {
  419. .row-bottom-padded-md {
  420. padding-bottom: 1em;
  421. }
  422. }
  423. .row-bottom-padded-sm {
  424. padding-bottom: 1em;
  425. }
  426. @media screen and (max-width: 768px) {
  427. .row-bottom-padded-sm {
  428. padding-bottom: 1em;
  429. }
  430. }
  431. /*# sourceMappingURL=style.css.map */