style.css 23 KB

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