style.css 23 KB

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