style.css 23 KB

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