style.css 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998
  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:#75afde; }
  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:#75afde; }
  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: #75afde;
  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(50, 49, 49, 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: gold;
  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: goldenrod;
  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. text-align: start;
  559. font-size: 17px;
  560. margin-bottom: 40px;
  561. line-height: 1.6;
  562. }
  563. .reviews-msg:before {
  564. content: "\e004";
  565. font-family: Flaticon;
  566. color: goldenrod;
  567. font-size: 26px;
  568. }
  569. .reviews-image img {
  570. float: right;
  571. max-width: 310px;
  572. margin: 30px 30px 0 0;
  573. }
  574. .reviews-author:before {
  575. content: "";
  576. width: 100%;
  577. height: 100%;
  578. border: 1px solid #7f8c8d;
  579. border-radius: 50%;
  580. padding: 0 7px;
  581. font-size: 10px;
  582. }
  583. .reviews-author {
  584. font-size: 21px;
  585. }
  586. .reviews-author .author-sub {
  587. font-size: 17px;
  588. }
  589. .author-margin {
  590. margin: 45px 0 0;
  591. }
  592. .info-margin {
  593. margin: 35px 0 0;
  594. }
  595. .reviews-indicators {
  596. position: absolute;
  597. bottom: 0;
  598. right: 14%;
  599. }
  600. .reviews-indicators .fa {
  601. font-size: 26px;
  602. }
  603. .reviews-indicators .fa:hover {
  604. opacity: 0.7;
  605. }
  606. .main-reviews-image {
  607. padding-bottom: 90px;
  608. }
  609. .gk-slide-left, .gk-slide-right {
  610. padding: 0 10px;
  611. }
  612. /* =========================== SERVICES SECTION ============================== */
  613. .awesome-container {
  614. padding-top: 100px;
  615. max-width: 1320px;
  616. }
  617. .awesome-services {
  618. background: none repeat scroll 0 0 #fff;
  619. border: 1px solid #397ed1;
  620. border-radius: 12px;
  621. max-width: 312px;
  622. margin: 0 auto;
  623. padding: 40px 35px;
  624. }
  625. .awesome-services .simple-icon {
  626. font-size: 32px;
  627. padding-bottom: 30px;
  628. display: block;
  629. }
  630. .awesome-text{
  631. display: flex;
  632. text-align: start;
  633. align-items: center;
  634. }
  635. .awesome-services h3 {
  636. font-size: 21px;
  637. margin-top: 0;
  638. margin-bottom: 25px;
  639. }
  640. .awesome-services .big-text {
  641. font-size: 17px;
  642. line-height: 27px;
  643. margin-bottom: 18px;
  644. }
  645. .gk-app-left-down-arrow {
  646. left: 31%;
  647. top: 84%;
  648. }
  649. /* =========================== SCREENSHOT SECTION ============================== */
  650. .app-left-info {
  651. padding-top: 70px;
  652. }
  653. .owl-controls {
  654. text-align: right;
  655. padding: 20px 20px 0 0;
  656. max-width: 1200px;
  657. margin: 0 auto;
  658. }
  659. .owl-controls .owl-buttons div {
  660. display: inline-block;
  661. }
  662. .owl-controls .owl-buttons .fa {
  663. padding: 0 10px;
  664. font-size: 26px;
  665. }
  666. .owl-controls .owl-buttons .fa:hover {
  667. opacity: 0.7;
  668. }
  669. .owl-controls .owl-buttons .owl-prev {
  670. left: 0;
  671. position: absolute;
  672. top: 50%;
  673. }
  674. .owl-controls .owl-buttons .owl-next {
  675. position: absolute;
  676. right: 0;
  677. top: 50%;
  678. }
  679. .app-carousel-slider {
  680. padding: 15px 0 0;
  681. }
  682. .screen-item img {
  683. border-radius: 12px;
  684. -moz-border-radius: 12px;
  685. -webkit-border-radius: 12px;
  686. -o-border-radius: 12px;
  687. -ms-border-radius: 12px;
  688. margin: 0 auto;
  689. }
  690. .app-container {
  691. max-width: 1320px;
  692. }
  693. /* =========================== PRICING SECTION =========================== */
  694. .pricing-container {
  695. max-width: 1320px;
  696. padding-top: 90px;
  697. }
  698. .pricing-box {
  699. max-width: 315px;
  700. margin: 0 auto;
  701. }
  702. .pricing-title {
  703. background: none repeat scroll 0 0 #1a2836;
  704. border-radius: 10px 10px 0 0;
  705. padding: 20px 0;
  706. }
  707. .pricing-title h3 {
  708. font-size: 21px;
  709. }
  710. .pricing-box .symbol {
  711. font-size: 21px;
  712. vertical-align: top;
  713. line-height: 50px;
  714. padding-right: 8px;
  715. }
  716. .pricing-box .price h6 {
  717. font-size: 90px;
  718. line-height: 90px;
  719. padding-left: 20px;
  720. margin-top: 15px;
  721. margin-bottom: 20px;
  722. }
  723. .price .per-month {
  724. font-size: 17px;
  725. line-height: 20px;
  726. }
  727. .pricing-box ul {
  728. background: none repeat scroll 0 0 #fff;
  729. border: 1px solid #8ea8c1;
  730. border-radius: 0 0 10px 10px;
  731. padding: 40px;
  732. width: 100%;
  733. }
  734. .pricing-box ul li {
  735. line-height: 24px;
  736. }
  737. /* =========================== DEMO SECTION ============================== */
  738. .video-bg{
  739. background:url(../images/video-bg.png) center center no-repeat;
  740. background-size: cover;
  741. padding-top:60px;
  742. padding-bottom: 60px;
  743. position: relative;
  744. height: 510px;
  745. margin-top: 70px;
  746. border: 2px solid rgba(0,0,0,0.5);
  747. border-radius: 6px;
  748. -moz-border-radius: 6px;
  749. -webkit-border-radius: 6px;
  750. -o-border-radius: 6px;
  751. -ms-border-radius: 6px;
  752. }
  753. #video_container {
  754. height: 510px;
  755. }
  756. .mb_YTVPBar .ytpicon {
  757. border-width: 12px;
  758. border-radius: 50%;
  759. -moz-border-radius: 50%;
  760. -webkit-border-radius: 50%;
  761. -o-border-radius: 50%;
  762. -ms-border-radius: 50%;
  763. font-size: 90px;
  764. line-height: 105px;
  765. }
  766. .mb_YTVPBar span{
  767. height: 128px;
  768. width: 128px;
  769. }
  770. .gk-pointer-features.gk-down-arrow {
  771. top: 64%;
  772. right: 20%;
  773. }
  774. /* =========================== DOWNLOAD SECTION ============================== */
  775. .download-right-info {
  776. padding: 0 0 30px;
  777. }
  778. .download-button {
  779. margin: 25% 0 15%;
  780. padding-top: 30px;
  781. text-align: center;
  782. }
  783. .gk-download-btn {
  784. font-family: 'Open Sans',sans-serif;
  785. font-size: 13px;
  786. font-weight: 700;
  787. padding: 12px 16px;
  788. text-transform: uppercase;
  789. width: auto;
  790. }
  791. .gk-download-btn .fa {
  792. padding-right: 10px;
  793. font-size: 17px;
  794. }
  795. .gk-download-pointer.gk-up-right-arrow {
  796. top: 100%;
  797. left: 50%;
  798. }
  799. .download-section .gk-input-submit.submit {
  800. padding-top: 20px;
  801. }
  802. .subscribe-form {
  803. padding-top: 20px;
  804. }
  805. .subscribe-form .form-group.gk-email {
  806. max-width: 415px;
  807. margin: 0 auto;
  808. }
  809. .has-error .help-block {
  810. margin: 0;
  811. }
  812. .download-section .gk-contact-form .form-control {
  813. border-bottom: 1px solid #7f8c8d;
  814. color: #7f8c8d;
  815. }
  816. .download-section .gk-contact-form .form-control::-moz-placeholder {
  817. color:#7f8c8d;
  818. }
  819. .download-section .gk-contact-form .form-control:-ms-input-placeholder {
  820. color:#7f8c8d;
  821. }
  822. .download-section .gk-contact-form .form-control::-webkit-input-placeholder {
  823. color:#7f8c8d;
  824. }
  825. .download-section .gk-submit {
  826. border: 1px solid #7f8c8d;
  827. color: #7f8c8d;
  828. }
  829. .download-section .gk-submit:hover {
  830. color:#fff;
  831. background:#7f8c8d;
  832. }
  833. /* =========================== CONTACT US SECTION ============================== */
  834. .gk-contact-form {
  835. padding-top: 40px;
  836. }
  837. .gk-contact-form .form-control {
  838. background: none;
  839. box-shadow: none;
  840. -moz-box-shadow: none;
  841. -webkit-box-shadow: none;
  842. -o-box-shadow: none;
  843. -ms-box-shadow: none;
  844. resize: none;
  845. border: none;
  846. border-bottom: 1px solid #fff;
  847. border-radius: 0px;
  848. -moz-border-radius: 0px;
  849. -webkit-border-radius: 0px;
  850. -o-border-radius: 0px;
  851. -ms-border-radius: 0px;
  852. color: #fff;
  853. text-transform: uppercase;
  854. font-family: 'Open Sans', sans-serif;
  855. font-weight: 700;
  856. font-size: 17px;
  857. padding-left: 0;
  858. }
  859. .gk-contact-form .form-control::-moz-placeholder {
  860. color:#fff;
  861. text-transform: uppercase;
  862. }
  863. .gk-contact-form .form-control:-ms-input-placeholder {
  864. color:#fff;
  865. text-transform: uppercase;
  866. }
  867. .gk-contact-form .form-control::-webkit-input-placeholder {
  868. color:#fff;
  869. text-transform: uppercase;
  870. }
  871. .gk-contact-form .form-group {
  872. margin-bottom: 30px;
  873. }
  874. .gk-textarea-message .form-control {
  875. 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);
  876. 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);
  877. 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);
  878. 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);
  879. 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);
  880. background-size: 100% 100%, 100% 100%, 100% 61px;
  881. line-height: 61px;
  882. border: none;
  883. }
  884. .gk-submit {
  885. background: none;
  886. border: 1px solid #fff;
  887. font-family: 'Open Sans', sans-serif;
  888. font-weight: 700;
  889. font-size: 13px;
  890. text-transform: uppercase;
  891. color: #fff;
  892. padding: 12px 40px;
  893. }
  894. .contact-section .gk-submit:hover {
  895. background-color : #fff;
  896. color: #75afde;
  897. }
  898. .gk-contact-form .has-error .form-control {
  899. border-color: #a94442;
  900. }
  901. .gk-contact-form .has-error .form-control:focus, .gk-contact-form .has-success .form-control:focus {
  902. box-shadow: none;
  903. -moz-box-shadow: none;
  904. -webkit-box-shadow: none;
  905. -o-box-shadow: none;
  906. -ms-box-shadow: none;
  907. }
  908. .gk-contact-form .has-success .form-control:focus {
  909. border-color: #fff;
  910. }
  911. .gk-textarea-message .form-control-feedback {
  912. line-height: 61px;
  913. height: 61px;
  914. }
  915. .has-error .gk-textarea-message .form-control {
  916. 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);
  917. 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);
  918. 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);
  919. 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);
  920. 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);
  921. }
  922. .gk-form-message {
  923. text-align: center;
  924. color: #FFFFFF;
  925. font-size: 15px;
  926. font-weight: 700;
  927. padding-top: 10px;
  928. display: none;
  929. }
  930. .gk-form-message-subscribe {
  931. color: #fff;
  932. }
  933. .gk-form-message .glyphicon {
  934. padding-right: 8px;
  935. }
  936. .gk-contact-pointer {
  937. padding: 170px 0 0;
  938. margin-left: -70px;
  939. }
  940. .gk-contact-pointer img {
  941. margin: 0 auto;
  942. }
  943. .gk-contact-form {
  944. padding-top: 120px;
  945. }
  946. .contact-info {
  947. padding-top: 140px;
  948. font-size: 17px;
  949. }
  950. .contact-row {
  951. margin-bottom: 15px;
  952. }
  953. .contact-row p {
  954. margin-bottom: 5px;
  955. }
  956. .contact-info .simple-icon {
  957. font-size: 20px;
  958. text-shadow: 0 0 0;
  959. }/* =========================== FOOTER SECTION ============================== */
  960. .footer-bg {
  961. background: #141414;
  962. color: #7f8c8d;
  963. padding: 10px 0;
  964. }
  965. .footer-bg p {
  966. margin: 0;
  967. }
  968. .footer-social-icon {
  969. display: inline-block;
  970. margin: 0 0 0 20px;
  971. }
  972. .footer-social-icon a {
  973. background: #ffffff;
  974. color: #1F5BA4;
  975. border-radius: 100%;
  976. font-size: 12px;
  977. display: inline-block;
  978. width: 18px;
  979. height: 18px;
  980. margin: 0 3px;
  981. }
  982. .footer-social-icon .fa {
  983. width: 18px;
  984. height: 18px;
  985. display: block;
  986. line-height: 18px;
  987. }