style.css 23 KB

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