style.css 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951
  1. /* ================================= CSS Structure =================================
  2. 1. GLOBAL STYLES
  3. - Fonts
  4. - Main Styles
  5. - Extra Classes
  6. - Z Indexes
  7. - Social Icon Hover Styles
  8. - Title and Desc Styles
  9. - Pointer Arrow Common Styles
  10. - Button Styles
  11. 2. HEADER SECTION
  12. - Triangle Background
  13. - Logo & Menu
  14. - Navigation
  15. - Top Social Icon Styles
  16. 3. BANNER SECTION
  17. - Left Banner Styles
  18. - Right Banner Styles
  19. 4. FEATURES SECTION
  20. 5. REVIEWS SECTION
  21. 6. SERVICES SECTION
  22. 7. SCREENSHOT SECTION
  23. 8. PRICING SECTION
  24. 9. DEMO SECTION
  25. 10. DOWNLOAD SECTION
  26. 11. CONTACT US SECTION
  27. 12. FOOTER SECTION
  28. =========================================================================== */
  29. /* =========================== GLOBAL STYLES ============================== */
  30. /* ------------- Fonts ------------- */
  31. @font-face {
  32. font-family: "Flaticon";
  33. src: url("../fonts/flaticon.eot");
  34. src: url("../fonts/flaticon.eot#iefix") format("embedded-opentype"),
  35. url("../fonts/flaticon.woff") format("woff"),
  36. url("../fonts/flaticon.ttf") format("truetype"),
  37. url("../fonts/flaticon.svg") format("svg");
  38. font-weight: normal;
  39. font-style: normal;
  40. }
  41. @font-face {
  42. font-family: 'latohairline';
  43. src: url('../fonts/lato-hai-webfont.eot');
  44. src: url('../fonts/lato-hai-webfont.eot?#iefix') format('embedded-opentype'),
  45. url('../fonts/lato-hai-webfont.woff') format('woff'),
  46. url('../fonts/lato-hai-webfont.ttf') format('truetype'),
  47. url('../fonts/lato-hai-webfont.svg#latohairline') format('svg');
  48. font-weight: normal;
  49. font-style: normal;
  50. }
  51. [class^="flaticon-"]:before, [class*=" flaticon-"]:before,
  52. [class^="flaticon-"]:after, [class*=" flaticon-"]:after {
  53. font-family: Flaticon;
  54. font-size: 20px;
  55. font-style: normal;
  56. }
  57. .flaticon-arrow351:before {
  58. content: "\e000";
  59. }
  60. .flaticon-big44:before {
  61. content: "\e001";
  62. }
  63. .flaticon-check13:before {
  64. content: "\e002";
  65. }
  66. .flaticon-checkmark17:before {
  67. content: "\e003";
  68. }
  69. .flaticon-open7:before {
  70. content: "\e004";
  71. }
  72. .flaticon-phone71:before {
  73. content: "\e005";
  74. }
  75. .flaticon-yield:before {
  76. content: "\e006";
  77. }
  78. .glyph-item {
  79. line-height: 1;
  80. display: inline-block;
  81. }
  82. /* ------------- Main Styles ------------- */
  83. body {
  84. color: #bdc3c7;
  85. font-size: 12px;
  86. padding: 0;
  87. font-family: 'Open Sans', sans-serif;
  88. -webkit-font-smoothing: antialiased !important;
  89. background: url(../images/bg.png) top left repeat #fff;
  90. overflow-x: hidden;
  91. margin: 0 auto;
  92. }
  93. a, a:hover, a:focus, .btn:focus{
  94. text-decoration: none;
  95. outline: none;
  96. }
  97. img, img.responsive {
  98. max-width:100%;
  99. width: auto \9 !important;
  100. }
  101. .relative {
  102. position: relative;
  103. }
  104. .absolute {
  105. position: absolute;
  106. }
  107. .static {
  108. position: static;
  109. }
  110. .container {
  111. max-width: 1200px;
  112. width: 100%;
  113. }
  114. .no-padding {
  115. padding: 0;
  116. }
  117. .uppercase {
  118. text-transform: uppercase;
  119. }
  120. .capitalize {
  121. text-transform: capitalize;
  122. }
  123. .animated {
  124. visibility:hidden;
  125. animation-fill-mode: none;
  126. -webkit-animation-fill-mode: none;
  127. -moz-animation-fill-mode: none;
  128. -o-animation-fill-mode: none;
  129. -ms-animation-fill-mode: none;
  130. }
  131. .visible {
  132. visibility:visible;
  133. }
  134. .btn:hover, .btn:focus {
  135. background: #333;
  136. color: #fff;
  137. }
  138. .btn {
  139. display: inline-block;
  140. -webkit-transition: all 500ms linear;
  141. -moz-transition: all 500ms linear;
  142. -o-transition: all 500ms linear;
  143. -ms-transition: all 500ms linear;
  144. transition: all 500ms linear;
  145. }
  146. /* ------------- Extra Classes ------------- */
  147. .text-extrabold {
  148. font-weight: 800;
  149. }
  150. .text-bold {
  151. font-weight: 700;
  152. }
  153. .light-italic {
  154. font-family: 'Open Sans', sans-serif;
  155. font-weight: 300;
  156. font-style: italic;
  157. }
  158. .extrabold-italic {
  159. font-family: 'Open Sans', sans-serif;
  160. font-weight: 800;
  161. font-style: italic;
  162. }
  163. .bold-italic {
  164. font-family: 'Open Sans', sans-serif;
  165. font-weight: 700;
  166. font-style: italic;
  167. }
  168. .color-greenalt {
  169. color: #edba93;
  170. }
  171. .color-grey {
  172. color: #7f8c8d;
  173. }
  174. .color-magneta {
  175. color: #a2799b;
  176. }
  177. .color-purp {
  178. color: #a27993;
  179. }
  180. .color-white {
  181. color: #FFFFFF;
  182. }
  183. .color-blue {
  184. color: #18549C;
  185. }
  186. .pageloader {
  187. background: url(../images/loader.gif) center center no-repeat #fff;
  188. height: 100%;
  189. position: fixed;
  190. top: 0;
  191. width: 100%;
  192. z-index: 99999;
  193. }
  194. /* ------------- Section Background ------------- */
  195. .header-section { background-color:#e66a17; }
  196. .features-section { background-color:#1e3a55; }
  197. .reviews-section { background-color:#ffffff; }
  198. .app-services-section { background-color:#0ea7a7; }
  199. .pricing-section { background-color:#ffffff; }
  200. .contact-section { background-color:#18879b; }
  201. .section-padding {
  202. padding: 100px 0;
  203. }
  204. /* ------- Social Icon Hover Styles ------- */
  205. .gk-facebook:hover, .gk-facebook:focus, .gk-facebook:active {
  206. background: #3B5999;
  207. color: #fff;
  208. }
  209. .gk-twitter:hover, .gk-twitter:focus, .gk-twitter:active {
  210. background: #00ACEE;
  211. color: #fff;
  212. }
  213. /* ------- Title and Desc Styles ------- */
  214. .section-title {
  215. font-family: 'Open Sans', sans-serif;
  216. font-size: 61px;
  217. text-align: center;
  218. text-transform: uppercase;
  219. margin-bottom: 20px;
  220. font-weight: 300;
  221. }
  222. .after-2000 .section-title, .after-2600 .section-title, .after-3000 .section-title {
  223. font-size: 60px;
  224. }
  225. .section-msg {
  226. font-family: 'Open Sans', sans-serif;
  227. font-weight: 300;
  228. font-size: 32px;
  229. line-height: 1.4;
  230. margin-top: 15px;
  231. }
  232. .section-msg1 {
  233. font-family: 'Open Sans', sans-serif;
  234. font-weight: 300;
  235. font-size: 42px;
  236. }
  237. .gk-triangle-medium:before, .gk-triangle-medium:after {
  238. font-size: 30px;
  239. }
  240. /* ------- Pointer Arrow Common Styles ------- */
  241. .gk-pointer-features {
  242. position: absolute;
  243. }
  244. .gk-pointer-features.animated {
  245. visibility: hidden;
  246. }
  247. .gk-pointer-features.visible {
  248. visibility: visible;
  249. }
  250. /* ------------- Button Styles ------------- */
  251. .gk-btn {
  252. font-family: 'Open Sans', sans-serif;
  253. font-weight: 700;
  254. font-size: 13px;
  255. text-transform: uppercase;
  256. padding: 13px 12px;
  257. width: 159px;
  258. }
  259. .gk-btn .fa {
  260. padding-right: 8px;
  261. }
  262. .gk-btn-margin {
  263. margin-right: 30px;
  264. }
  265. .greenalt-btn {
  266. border-color: #CCC81E;
  267. color: #CCC81E;
  268. }
  269. .greenalt-btn:hover, .greenalt-btn:active, .greenalt-btn:focus {
  270. background: #CCC81E;
  271. color: #FFFFFF;
  272. }
  273. .red-btn {
  274. border-color: #edba93;
  275. color: #edba93;
  276. }
  277. .red-btn:hover, .red-btn:active, .red-btn:focus {
  278. background: #edba93;
  279. color: #FFFFFF;
  280. }
  281. .white-btn {
  282. border-color: #FFFFFF;
  283. color: #FFFFFF;
  284. }
  285. .white-btn:hover, .white-btn:active, .white-btn:focus {
  286. background: #FFFFFF;
  287. color: #CCC81E;
  288. }
  289. /* =========================== HEADER SECTION ============================== */
  290. /* ------------- Triangle Background ------------- */
  291. .banner-bg {
  292. min-height: 480px;
  293. position: relative;
  294. top: -70px;
  295. margin: 0 auto;
  296. }
  297. .banner-bg .section-padding {
  298. margin-left: auto;
  299. padding-left: 15px;
  300. padding-right: 15px;
  301. }
  302. /* ------------- Logo & Menu ------------- */
  303. .logo-container {
  304. background: rgba(31, 31, 31, 0.9);
  305. color: #fff;
  306. padding: 16px 0 13px;
  307. }
  308. .sticky-navigation {
  309. width: 100%;
  310. z-index: 9999;
  311. position: relative;
  312. }
  313. /* -------- Navigation --------- */
  314. .top-navbar {
  315. margin: 0;
  316. min-height: inherit;
  317. }
  318. .top-navbar ul.nav a {
  319. font-size: 13px;
  320. font-weight: 800;
  321. color: #ffffff;
  322. }
  323. .top-navbar ul.nav a:hover, .top-navbar ul.nav a:focus, .top-navbar ul.nav a:active, .top-navbar ul.nav li.active a {
  324. background:none !important;
  325. color: #edba93;
  326. }
  327. .navbar-toggle {
  328. background-color: #edba93;
  329. margin-top:-40px;
  330. margin-right:0px;
  331. }
  332. .navbar-toggle .icon-bar {
  333. background-color:#FFFFFF;
  334. }
  335. .navbar-nav {
  336. margin: 0;
  337. }
  338. .navbar-nav li {
  339. margin-right: 20px;
  340. }
  341. .after-2000 .navbar-nav li, .after-2600 .navbar-nav li {
  342. margin-right: 12px;
  343. }
  344. .navbar-nav li a{
  345. padding-bottom:7px;
  346. padding-top:7px;
  347. }
  348. .top-navbar .dropdown a{
  349. background:none !important;
  350. }
  351. /* ------------- Top Social Icon Styles ------------- */
  352. .top-social-icon {
  353. margin: 0;
  354. padding: 0;
  355. list-style: none;
  356. float: right;
  357. }
  358. .top-social-icon li {
  359. float: left;
  360. }
  361. .top-social-icon li a {
  362. background: #fff;
  363. border-radius: 100%;
  364. font-size: 12px;
  365. display: block;
  366. width: 18px;
  367. height: 18px;
  368. color: #1F5BA4;
  369. margin: 7px 26px 0 0;
  370. }
  371. .top-social-icon li .fa {
  372. width: 18px;
  373. height: 18px;
  374. display: block;
  375. line-height: 18px;
  376. text-align: center;
  377. }
  378. .top-social-icon li:last-child a {
  379. margin-right: 0;
  380. }
  381. /* =========================== BANNER SECTION ============================== */
  382. /* ------------- Left Banner Styles ------------- */
  383. .left-banner-text {
  384. margin-top: 60px;
  385. padding-top: 50px;
  386. color: #FFFFFF;
  387. }
  388. .after-1500 .left-banner-text {
  389. margin-top: 30px;
  390. }
  391. .after-1500 .right-banner-image {
  392. margin-top: 20px;
  393. }
  394. .left-banner-text h1 {
  395. font-size: 53px;
  396. margin-bottom: 30px;
  397. font-weight: 300;
  398. font-family: 'Open Sans', sans-serif;
  399. }
  400. .banner-text {
  401. font-family: 'Open Sans', sans-serif;
  402. font-weight: 300;
  403. font-size: 17px;
  404. padding: 0 30px 0 0;
  405. color: #FFFFFF;
  406. }
  407. .banner-button {
  408. padding: 32px 45px 0 0;
  409. }
  410. .triangle-shape {
  411. padding: 45px 0 0;
  412. }
  413. .flaticon.gk-triangle-bigsharp:before, .flaticon.gk-triangle-bigsharp:after {
  414. font-size: 36px;
  415. font-weight: bold;
  416. }
  417. .banner-section {
  418. padding-top: 70px;
  419. position: relative;
  420. z-index: 10;
  421. }
  422. .banner-triangle:hover, .banner-triangle:active, .banner-triangle:focus {
  423. color: #FFFFFF;
  424. }
  425. .banner-triangle:hover {
  426. opacity: 0.6;
  427. transition: all 0.4s ease-in 0s;
  428. -moz-transition: all 0.4s ease-in 0s;
  429. -webkit-transition: all 0.4s ease-in 0s;
  430. -o-transition: all 0.4s ease-in 0s;
  431. -ms-transition: all 0.4s ease-in 0s;
  432. }
  433. .banner-left-margin {
  434. margin-left: 45px;
  435. margin-bottom: 12px;
  436. }
  437. /* ------------- Right Banner Styles ------------- */
  438. .right-banner-image {
  439. padding-top: 10px;
  440. margin-top: 50px;
  441. }
  442. .banner-image-info {
  443. margin-top: 410px;
  444. }
  445. .banner-info {
  446. font-family: 'Open Sans', sans-serif;
  447. font-weight: 300;
  448. font-size: 12px;
  449. color: #FFF;
  450. padding-right: 5px;
  451. }
  452. .banner-info .text-bold {
  453. font-size: 32px;
  454. display: block;
  455. color: #FFF;
  456. }
  457. .close-brackets {
  458. font-family: 'latohairline';
  459. color: #FFF;
  460. font-size: 86px;
  461. }
  462. .banner-image-info .fa {
  463. font-size: 32px;
  464. vertical-align: top;
  465. line-height: 80px;
  466. margin-top: 20px;
  467. padding-left: 15px;
  468. width: 40px;
  469. }
  470. .banner-info-right {
  471. margin-top: -30px;
  472. }
  473. /* =========================== FEATURES SECTION ============================== */
  474. .features-left-info {
  475. padding: 120px 0 0 15px;
  476. }
  477. .gk-list {
  478. display: inline-block;
  479. width: 100%;
  480. padding-top: 5px;
  481. }
  482. .gk-list li {
  483. font-size: 17px;
  484. clear: both;
  485. float: left;
  486. display: inline-block;
  487. border-bottom: 1px solid #a2799bcc;
  488. padding: 5px 12px 5px 0;
  489. }
  490. .gk-list li .fa {
  491. display: inline;
  492. font-size: 15px;
  493. }
  494. .gk-list li .simple-icon {
  495. font-size: 14px;
  496. padding-right: 4px;
  497. text-shadow: 0 0 0;
  498. }
  499. .gk-list li.no-border {
  500. border: none;
  501. }
  502. .features-right-grid {
  503. padding-top: 30px;
  504. padding-left: 40px;
  505. }
  506. .text-right .features-grid {
  507. padding: 0 30px 10px 30px;
  508. }
  509. .features-grid {
  510. padding: 0 40px 10px 0;
  511. }
  512. .features-grid .fa, .features-grid .simple-icon {
  513. font-size: 26px;
  514. padding-bottom: 10px;
  515. }
  516. .grid-title {
  517. font-size: 21px;
  518. }
  519. .features-line {
  520. border-color: #a2799bcc;
  521. width: 78%;
  522. }
  523. .features-right-grid .text-right .features-line {
  524. margin-left: 20px;
  525. margin-right: 20px;
  526. float: right;
  527. }
  528. .features-right-grid .features-line {
  529. margin-right: 20px;
  530. margin-left: -10px;
  531. float: left;
  532. }
  533. .gk-divider {
  534. border-right: 1px solid #a2799bcc;
  535. }
  536. .ipad-shot-wrapper {
  537. margin-top: -130px;
  538. margin-left: -25px;
  539. }
  540. .features-right-info {
  541. position: static;
  542. padding-left: 120px;
  543. }
  544. .gk-pointer-features.gk-right-arrow {
  545. left: 15%;
  546. top: 6%;
  547. }
  548. /* =========================== REVIEWS SECTION ============================== */
  549. .gk-pointer-features.gk-left-arrow {
  550. right: 25%;
  551. top: 10%;
  552. }
  553. .reviews-slider-section {
  554. padding: 90px 0 0;
  555. }
  556. .reviews-info {
  557. text-align: center;
  558. padding: 0 70px 0 30px;
  559. }
  560. .reviews-msg {
  561. font-size: 17px;
  562. margin-bottom: 40px;
  563. line-height: 1.6;
  564. }
  565. .reviews-msg:before {
  566. content: "\e004";
  567. font-family: Flaticon;
  568. color: #CCC81E;
  569. font-size: 26px;
  570. }
  571. .reviews-image img {
  572. float: right;
  573. max-width: 310px;
  574. margin: 30px 30px 0 0;
  575. }
  576. .reviews-author:before {
  577. content: "";
  578. width: 100%;
  579. height: 100%;
  580. border: 1px solid #7f8c8d;
  581. border-radius: 50%;
  582. padding: 0 7px;
  583. font-size: 10px;
  584. }
  585. .reviews-author {
  586. font-size: 21px;
  587. }
  588. .reviews-author .author-sub {
  589. font-size: 17px;
  590. }
  591. .author-margin {
  592. margin: 45px 0 0;
  593. }
  594. .info-margin {
  595. margin: 35px 0 0;
  596. }
  597. .reviews-indicators {
  598. position: absolute;
  599. bottom: 0;
  600. right: 14%;
  601. }
  602. .reviews-indicators .fa {
  603. font-size: 26px;
  604. }
  605. .reviews-indicators .fa:hover {
  606. opacity: 0.7;
  607. }
  608. .main-reviews-image {
  609. padding-bottom: 90px;
  610. }
  611. .gk-slide-left, .gk-slide-right {
  612. padding: 0 10px;
  613. }
  614. /* =========================== SERVICES SECTION ============================== */
  615. .awesome-container {
  616. padding-top: 100px;
  617. max-width: 1320px;
  618. }
  619. .awesome-services {
  620. background: none repeat scroll 0 0 #fff;
  621. border: 1px solid #397ed1;
  622. border-radius: 12px;
  623. max-width: 312px;
  624. margin: 0 auto;
  625. padding: 40px 35px;
  626. }
  627. .awesome-services .simple-icon {
  628. font-size: 32px;
  629. padding-bottom: 30px;
  630. display: block;
  631. }
  632. .awesome-services h3 {
  633. font-size: 21px;
  634. margin-top: 0;
  635. margin-bottom: 25px;
  636. }
  637. .awesome-services .big-text {
  638. font-size: 17px;
  639. line-height: 27px;
  640. margin-bottom: 18px;
  641. }
  642. .gk-app-left-down-arrow {
  643. left: 31%;
  644. top: 84%;
  645. }
  646. /* =========================== PRICING SECTION =========================== */
  647. .pricing-container {
  648. max-width: 1320px;
  649. padding-top: 90px;
  650. }
  651. .pricing-box {
  652. max-width: 315px;
  653. margin: 0 auto;
  654. }
  655. .pricing-title {
  656. background: none repeat scroll 0 0 #1a2836;
  657. border-radius: 10px 10px 0 0;
  658. padding: 20px 0;
  659. }
  660. .pricing-title h3 {
  661. font-size: 21px;
  662. }
  663. .pricing-box .symbol {
  664. font-size: 21px;
  665. vertical-align: top;
  666. line-height: 50px;
  667. padding-right: 8px;
  668. }
  669. .pricing-box .price h6 {
  670. font-size: 90px;
  671. line-height: 90px;
  672. padding-left: 20px;
  673. margin-top: 15px;
  674. margin-bottom: 20px;
  675. }
  676. .price .per-month {
  677. font-size: 17px;
  678. line-height: 20px;
  679. }
  680. .pricing-box ul {
  681. background: none repeat scroll 0 0 #fff;
  682. border: 1px solid #8ea8c1;
  683. border-radius: 0 0 10px 10px;
  684. padding: 40px;
  685. width: 100%;
  686. }
  687. .pricing-box ul li {
  688. line-height: 24px;
  689. }
  690. /* =========================== DEMO SECTION ============================== */
  691. .video-bg{
  692. background:url(../images/video-bg.png) center center no-repeat;
  693. background-size: cover;
  694. padding-top:60px;
  695. padding-bottom: 60px;
  696. position: relative;
  697. height: 510px;
  698. margin-top: 70px;
  699. border: 2px solid rgba(0,0,0,0.5);
  700. border-radius: 6px;
  701. -moz-border-radius: 6px;
  702. -webkit-border-radius: 6px;
  703. -o-border-radius: 6px;
  704. -ms-border-radius: 6px;
  705. }
  706. #video_container {
  707. height: 510px;
  708. }
  709. .mb_YTVPBar .ytpicon {
  710. border-width: 12px;
  711. border-radius: 50%;
  712. -moz-border-radius: 50%;
  713. -webkit-border-radius: 50%;
  714. -o-border-radius: 50%;
  715. -ms-border-radius: 50%;
  716. font-size: 90px;
  717. line-height: 105px;
  718. }
  719. .mb_YTVPBar span{
  720. height: 128px;
  721. width: 128px;
  722. }
  723. .gk-pointer-features.gk-down-arrow {
  724. top: 64%;
  725. right: 20%;
  726. }
  727. /* =========================== DOWNLOAD SECTION ============================== */
  728. .download-right-info {
  729. padding: 0 0 30px;
  730. }
  731. .download-button {
  732. margin: 25% 0 15%;
  733. padding-top: 30px;
  734. text-align: center;
  735. }
  736. .gk-download-btn {
  737. font-family: 'Open Sans',sans-serif;
  738. font-size: 13px;
  739. font-weight: 700;
  740. padding: 12px 16px;
  741. text-transform: uppercase;
  742. width: auto;
  743. }
  744. .gk-download-btn .fa {
  745. padding-right: 10px;
  746. font-size: 17px;
  747. }
  748. .gk-download-pointer.gk-up-right-arrow {
  749. top: 100%;
  750. left: 50%;
  751. }
  752. .download-section .gk-input-submit.submit {
  753. padding-top: 20px;
  754. }
  755. .subscribe-form {
  756. padding-top: 20px;
  757. }
  758. .subscribe-form .form-group.gk-email {
  759. max-width: 415px;
  760. margin: 0 auto;
  761. }
  762. .has-error .help-block {
  763. margin: 0;
  764. }
  765. .download-section .gk-contact-form .form-control {
  766. border-bottom: 1px solid #7f8c8d;
  767. color: #7f8c8d;
  768. }
  769. .download-section .gk-contact-form .form-control::-moz-placeholder {
  770. color:#7f8c8d;
  771. }
  772. .download-section .gk-contact-form .form-control:-ms-input-placeholder {
  773. color:#7f8c8d;
  774. }
  775. .download-section .gk-contact-form .form-control::-webkit-input-placeholder {
  776. color:#7f8c8d;
  777. }
  778. .download-section .gk-submit {
  779. border: 1px solid #7f8c8d;
  780. color: #7f8c8d;
  781. }
  782. .download-section .gk-submit:hover {
  783. color:#fff;
  784. background:#7f8c8d;
  785. }
  786. /* =========================== CONTACT US SECTION ============================== */
  787. .gk-contact-form {
  788. padding-top: 40px;
  789. }
  790. .gk-contact-form .form-control {
  791. background: none;
  792. box-shadow: none;
  793. -moz-box-shadow: none;
  794. -webkit-box-shadow: none;
  795. -o-box-shadow: none;
  796. -ms-box-shadow: none;
  797. resize: none;
  798. border: none;
  799. border-bottom: 1px solid #fff;
  800. border-radius: 0px;
  801. -moz-border-radius: 0px;
  802. -webkit-border-radius: 0px;
  803. -o-border-radius: 0px;
  804. -ms-border-radius: 0px;
  805. color: #fff;
  806. text-transform: uppercase;
  807. font-family: 'Open Sans', sans-serif;
  808. font-weight: 700;
  809. font-size: 17px;
  810. padding-left: 0;
  811. }
  812. .gk-contact-form .form-control::-moz-placeholder {
  813. color:#fff;
  814. text-transform: uppercase;
  815. }
  816. .gk-contact-form .form-control:-ms-input-placeholder {
  817. color:#fff;
  818. text-transform: uppercase;
  819. }
  820. .gk-contact-form .form-control::-webkit-input-placeholder {
  821. color:#fff;
  822. text-transform: uppercase;
  823. }
  824. .gk-contact-form .form-group {
  825. margin-bottom: 30px;
  826. }
  827. .gk-textarea-message .form-control {
  828. background-image: -webkit-linear-gradient(left, transparent 10px, transparent 10px), -webkit-linear-gradient(right, transparent 10px, transparent 10px), -webkit-linear-gradient(transparent 60px, #fff 60px, #fff 61px, transparent 61px);
  829. background-image: -moz-linear-gradient(left, transparent 10px, transparent 10px), -moz-linear-gradient(right, transparent 10px, transparent 10px), -moz-linear-gradient(transparent 60px, #fff 60px, #fff 61px, transparent 61px);
  830. background-image: -ms-linear-gradient(left, transparent 10px, transparent 10px), -ms-linear-gradient(right, transparent 10px, transparent 10px), -ms-linear-gradient(transparent 60px, #fff 60px, #fff 61px, transparent 61px);
  831. background-image: -o-linear-gradient(left, transparent 10px, transparent 10px), -o-linear-gradient(right, transparent 10px, transparent 10px), -o-linear-gradient(transparent 60px, #fff 60px, #fff 61px, transparent 61px);
  832. background-image: linear-gradient(left, transparent 10px, transparent 10px), linear-gradient(right, transparent 10px, transparent 10px), linear-gradient(transparent 60px, #fff 60px, #fff 61px, transparent 61px);
  833. background-size: 100% 100%, 100% 100%, 100% 61px;
  834. line-height: 61px;
  835. border: none;
  836. }
  837. .gk-submit {
  838. background: none;
  839. border: 1px solid #fff;
  840. font-family: 'Open Sans', sans-serif;
  841. font-weight: 700;
  842. font-size: 13px;
  843. text-transform: uppercase;
  844. color: #fff;
  845. padding: 12px 40px;
  846. }
  847. .contact-section .gk-submit:hover {
  848. background-color : #fff;
  849. color:#CDC81E;
  850. }
  851. .gk-contact-form .has-error .form-control {
  852. border-color: #a94442;
  853. }
  854. .gk-contact-form .has-error .form-control:focus, .gk-contact-form .has-success .form-control:focus {
  855. box-shadow: none;
  856. -moz-box-shadow: none;
  857. -webkit-box-shadow: none;
  858. -o-box-shadow: none;
  859. -ms-box-shadow: none;
  860. }
  861. .gk-contact-form .has-success .form-control:focus {
  862. border-color: #fff;
  863. }
  864. .gk-textarea-message .form-control-feedback {
  865. line-height: 61px;
  866. height: 61px;
  867. }
  868. .has-error .gk-textarea-message .form-control {
  869. background-image: -webkit-linear-gradient(left, transparent 10px, transparent 10px), -webkit-linear-gradient(right, transparent 10px, transparent 10px), -webkit-linear-gradient(transparent 60px, #a94442 60px, #a94442 61px, transparent 61px);
  870. background-image: -moz-linear-gradient(left, transparent 10px, transparent 10px), -moz-linear-gradient(right, transparent 10px, transparent 10px), -moz-linear-gradient(transparent 60px, #a94442 60px, #a94442 61px, transparent 61px);
  871. background-image: -ms-linear-gradient(left, transparent 10px, transparent 10px), -ms-linear-gradient(right, transparent 10px, transparent 10px), -ms-linear-gradient(transparent 60px, #a94442 60px, #a94442 61px, transparent 61px);
  872. background-image: -o-linear-gradient(left, transparent 10px, transparent 10px), -o-linear-gradient(right, transparent 10px, transparent 10px), -o-linear-gradient(transparent 60px, #a94442 60px, #a94442 61px, transparent 61px);
  873. background-image: linear-gradient(left, transparent 10px, transparent 10px), linear-gradient(right, transparent 10px, transparent 10px), linear-gradient(transparent 60px, #a94442 60px, #a94442 61px, transparent 61px);
  874. }
  875. .gk-form-message {
  876. text-align: center;
  877. color: #FFFFFF;
  878. font-size: 15px;
  879. font-weight: 700;
  880. padding-top: 10px;
  881. display: none;
  882. }
  883. .gk-form-message-subscribe {
  884. color: #fff;
  885. }
  886. .gk-form-message .glyphicon {
  887. padding-right: 8px;
  888. }
  889. .gk-contact-pointer {
  890. padding: 170px 0 0;
  891. margin-left: -70px;
  892. }
  893. .gk-contact-pointer img {
  894. margin: 0 auto;
  895. }
  896. .gk-contact-form {
  897. padding-top: 120px;
  898. }
  899. .contact-info {
  900. padding-top: 140px;
  901. font-size: 17px;
  902. }
  903. .contact-row {
  904. margin-bottom: 15px;
  905. }
  906. .contact-row p {
  907. margin-bottom: 5px;
  908. }
  909. .contact-info .simple-icon {
  910. font-size: 20px;
  911. text-shadow: 0 0 0;
  912. }/* =========================== FOOTER SECTION ============================== */
  913. .footer-bg {
  914. background: #141414;
  915. color: #7f8c8d;
  916. padding: 10px 0;
  917. }
  918. .footer-bg p {
  919. margin: 0;
  920. }
  921. .footer-social-icon {
  922. display: inline-block;
  923. margin: 0 0 0 20px;
  924. }
  925. .footer-social-icon a {
  926. background: #CCC81E;
  927. color: #121413;
  928. border-radius: 100%;
  929. font-size: 12px;
  930. display: inline-block;
  931. width: 18px;
  932. height: 18px;
  933. margin: 0 3px;
  934. }
  935. .footer-social-icon .fa {
  936. width: 18px;
  937. height: 18px;
  938. display: block;
  939. line-height: 18px;
  940. }