You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

8539 lines
148 KiB

2 years ago
  1. /*
  2. Project Name : RedBiz
  3. Author Company : SpecThemes
  4. Project Date: 24 Feb, 2018
  5. Template Developer: vsafaryan50@gmail.com
  6. */
  7. /*
  8. ==============================================
  9. TABLE OF CONTENT
  10. ==============================================
  11. 0. Imports
  12. 1. Sections
  13. 2. Headings
  14. 3. Navbar
  15. 4. Search
  16. 5. Top Bar
  17. 6. CountUps
  18. 7. Helper Classes
  19. a) Text-content
  20. b) Image-properties
  21. c) Buttons
  22. d) Lists
  23. e) Color Control
  24. f) Video Box
  25. g) Pagination
  26. h) Borders
  27. i) Animations
  28. f) Overlays
  29. 8. Preloader
  30. 9. Scroll to Top
  31. 10. Number Boxes
  32. 11. Service Boxes
  33. 12. Clients
  34. 13. Feature Boxes
  35. 14. Progress Bars
  36. 15. Price Tables
  37. 16. Newsletter Form
  38. 17. Footer
  39. 18. Blog (Grid, Lists, Post)
  40. 19. Testmonials
  41. 20. Projects
  42. 21. Partners (also Team)
  43. 22. Feedback Form
  44. 23. Team, Team Single
  45. 24. Video Section
  46. 25. Projects
  47. 26. Project Single (Page)
  48. 27. Accordions
  49. 28. Service Single (Page)
  50. 29. Callback
  51. 30. Projects Masonry
  52. 31. Under Construction
  53. 32. Shop Single Slider
  54. 33. Shop Single (Page)
  55. 34. Shop Products
  56. 35. 404 (Page)
  57. 36. Contact (Page)
  58. 37. Tabs
  59. 38. Owl Carousel
  60. 39. Pie Charts
  61. 40. Chart JS
  62. ==============================================
  63. [END] TABLE OF CONTENT
  64. ==============================================
  65. */
  66. /*-----------------------------------------
  67. 0. Imports
  68. -------------------------------------------*/
  69. @import url("navigation.css");
  70. /*-----------------------------------------
  71. 1. Sections
  72. -------------------------------------------*/
  73. .section-block {
  74. padding: 90px 0px 90px 0px;
  75. background-color: #fff;
  76. }
  77. .section-block-grey {
  78. padding: 90px 0px 90px 0px;
  79. background-color: #f9f9f9;
  80. }
  81. .section-block-dark {
  82. padding: 90px 0px 90px 0px;
  83. background-color: #222;
  84. }
  85. .section-block-parallax {
  86. position: relative;
  87. background-size: cover;
  88. background-attachment: fixed;
  89. background-position: 50% 50%;
  90. padding: 90px 0px 90px 0px;
  91. }
  92. .section-block-bg {
  93. background-size: cover;
  94. background-repeat: no-repeat;
  95. background-position: 50% 50%;
  96. padding: 90px 0px 90px 0px;
  97. }
  98. .section-block-transparent {
  99. padding: 90px 0px 90px 0px;
  100. background: transparent;
  101. }
  102. .background-top {
  103. background-position: center left;
  104. }
  105. .primary-bg {
  106. background: #f7c605 !important;
  107. }
  108. .no-repeat {
  109. background-repeat: no-repeat;
  110. }
  111. .section-clients {
  112. background: #fff;
  113. padding: 50px 0px;
  114. }
  115. .section-clients-grey {
  116. background: #f9f9f9;
  117. padding: 50px 0px;
  118. }
  119. .notice-section {
  120. background: #fff;
  121. padding: 60px 0px;
  122. }
  123. .notice-section-parallax {
  124. position: relative;
  125. background-attachment: fixed;
  126. padding: 60px 0px;
  127. }
  128. .notice-section-grey {
  129. background: #f7f7f7;
  130. padding: 60px 0px;
  131. }
  132. .notice-section-bg {
  133. background-size: cover;
  134. background-repeat: no-repeat;
  135. background-position: 50% 50%;
  136. padding: 60px 0px 60px 0px;
  137. }
  138. .notice-section h2, .notice-section-grey h2, .notice-section-bg h2 {
  139. position: relative;
  140. font-size: 42px;
  141. font-weight: 400;
  142. color: #111;
  143. }
  144. .notice-section h3, .notice-section-grey h3, .notice-section-bg h3 {
  145. position: relative;
  146. font-size: 35px;
  147. font-weight: 400;
  148. color: #111;
  149. }
  150. .notice-section h4, .notice-section-grey h4, .notice-section-bg h4 {
  151. position: relative;
  152. font-size: 30px;
  153. font-weight: 500;
  154. color: #111;
  155. }
  156. .notice-section h5, .notice-section-grey h5, .notice-section-bg h5 {
  157. position: relative;
  158. font-size: 25px;
  159. font-weight: 500;
  160. color: #111;
  161. }
  162. .notice-section h6, .notice-section-grey h6, .notice-section-bg h6 {
  163. position: relative;
  164. font-size: 20px;
  165. font-weight: 500;
  166. color: #111;
  167. }
  168. .dark-bg {
  169. background: #111;
  170. }
  171. .full-background {
  172. background-size: cover;
  173. }
  174. .notice-section-sm {
  175. padding: 40px 0px;
  176. }
  177. .notice-section-md {
  178. padding: 60px 0px;
  179. }
  180. .notice-section-lg {
  181. padding: 80px 0px;
  182. }
  183. .section-sm {
  184. padding: 30px 0px;
  185. }
  186. .section-md {
  187. padding: 40px 0px;
  188. }
  189. .section-lg {
  190. padding: 80px 0px;
  191. }
  192. .min-350 {
  193. min-height: 350px;
  194. }
  195. /*-----------------------------------------
  196. 2. Headings
  197. -------------------------------------------*/
  198. .section-heading {
  199. margin-bottom: 10px;
  200. }
  201. .section-heading h2 {
  202. position: relative;
  203. font-size: 42px;
  204. font-weight: 500;
  205. color: #111;
  206. line-height: 130%;
  207. margin-bottom: 10px;
  208. }
  209. .section-heading h3 {
  210. position: relative;
  211. font-size: 35px;
  212. font-weight: 600;
  213. color: #111;
  214. line-height: 130%;
  215. margin-bottom: 10px;
  216. }
  217. .section-heading h4 {
  218. position: relative;
  219. font-size: 30px;
  220. font-weight: 600;
  221. color: #111;
  222. line-height: 160%;
  223. margin-bottom: 10px;
  224. }
  225. .section-heading h5 {
  226. position: relative;
  227. font-size: 25px;
  228. font-weight: 600;
  229. color: #111;
  230. line-height: 160%;
  231. margin-bottom: 10px;
  232. }
  233. .section-heading h6 {
  234. position: relative;
  235. font-size: 20px;
  236. font-weight: 500;
  237. color: #111;
  238. line-height: 160%;
  239. margin-bottom: 10px;
  240. }
  241. .section-heading strong {
  242. font-weight: 600;
  243. }
  244. .section-heading-line {
  245. content: '';
  246. display: block;
  247. width: 100px;
  248. height: 3px;
  249. background: #f7c605;
  250. border-radius: 25%;
  251. margin: auto;
  252. margin-top: 15px;
  253. margin-bottom: 5px;
  254. }
  255. .section-heading-line-left {
  256. content: '';
  257. display: block;
  258. width: 100px;
  259. height: 3px;
  260. background: #f7c605;
  261. border-radius: 25%;
  262. margin-top: 15px;
  263. margin-bottom: 5px;
  264. }
  265. .section-heading p {
  266. font-size: 15px;
  267. font-weight: 400;
  268. color: #aaa;
  269. line-height: 160%;
  270. padding-top: 15px;
  271. margin-bottom: 0px;
  272. }
  273. .section-heading span {
  274. position: relative;
  275. font-size: 15px;
  276. font-weight: 500;
  277. color: #f7c605;
  278. line-height: 200%;
  279. margin-bottom: 10px;
  280. }
  281. .page-title-section {
  282. padding: 110px 0px 110px 0px;
  283. background-color: #eee;
  284. background-size: cover;
  285. background-position: center;
  286. text-align: center;
  287. border-bottom: 1px solid #f5f5f5;
  288. }
  289. .page-title-section h1 {
  290. font-size: 40px;
  291. font-weight: 600;
  292. letter-spacing: 1px;
  293. line-height: 1;
  294. color: #fff;
  295. text-align: center;
  296. margin-bottom: 10px;
  297. }
  298. .page-title-section ul li {
  299. display: inline-block;
  300. }
  301. .page-title-section ul li:after {
  302. content: ' \f105';
  303. color: #fff;
  304. font-family: 'FontAwesome';
  305. padding: 0px 10px;
  306. }
  307. .page-title-section ul li:last-child:after {
  308. content: none;
  309. }
  310. .page-title-section ul li a {
  311. color: #fff;
  312. font-size: 14px;
  313. font-weight: 500;
  314. }
  315. .page-title-section ul li a:hover {
  316. color: #111;
  317. }
  318. /*-----------------------------------------
  319. 3. Navbar
  320. -------------------------------------------*/
  321. .nav-menu > li:hover > a,
  322. .nav-menu > li.active > a,
  323. .nav-menu > li.focus > a {
  324. color: #f7c605;
  325. }
  326. .nav-menu > li:hover > a .submenu-indicator-chevron,
  327. .nav-menu > .active > a .submenu-indicator-chevron,
  328. .nav-menu > .focus > a .submenu-indicator-chevron {
  329. border-color: transparent #f7c605 #f7c605 transparent;
  330. }
  331. .nav-search-button:hover .nav-search-icon {
  332. color: #f7c605;
  333. }
  334. .nav-button {
  335. height: auto !important;
  336. margin: 18px 15px 0;
  337. padding: 8px 14px;
  338. display: inline-block;
  339. color: #fff;
  340. font-size: 14px;
  341. text-align: center;
  342. text-decoration: none;
  343. border-radius: 4px;
  344. background-color: #f7c605;
  345. -webkit-transition: opacity 0.3s;
  346. transition: opacity 0.3s;
  347. }
  348. .megamenu-list > li > a:hover {
  349. color: #f7c605;
  350. }
  351. @media (min-width: 991px) {
  352. #nav-transparent .nav-menu > li:hover > a,
  353. #nav-transparent .nav-menu > li.active > a,
  354. #nav-transparent .nav-menu > li.focus > a {
  355. color: #f7c605;
  356. }
  357. #nav-transparent .nav-menu > li:hover > a .submenu-indicator-chevron,
  358. #nav-transparent .nav-menu > .active > a .submenu-indicator-chevron,
  359. #nav-transparent .nav-menu > .focus > a .submenu-indicator-chevron {
  360. border-color: transparent #f7c605 #f7c605 transparent;
  361. }
  362. #nav-transparent .nav-dropdown > li:hover > a .submenu-indicator-chevron,
  363. #nav-transparent .nav-dropdown > .focus > a .submenu-indicator-chevron {
  364. border-color: transparent #f7c605 #f7c605 transparent;
  365. }
  366. #nav-transparent .nav-white-bg .nav-menu > li:hover > a {
  367. color: #f7c605;
  368. }
  369. }
  370. .nav-dropdown > li:hover > a,
  371. .nav-dropdown > li.focus > a {
  372. color: #f7c605;
  373. }
  374. .nav-dropdown > li:hover > a .submenu-indicator-chevron,
  375. .nav-dropdown > .focus > a .submenu-indicator-chevron {
  376. border-color: transparent #f7c605 #f7c605 transparent;
  377. }
  378. /*-----------------------------------------
  379. 4. Search
  380. -------------------------------------------*/
  381. #search_nav {
  382. display: inline-block;
  383. z-index: 9999;
  384. }
  385. .search-holder {
  386. color: #323232;
  387. margin-top: 18px;
  388. border-left: 1px solid #f7f7f7;
  389. }
  390. .search-button {
  391. padding-left: 12.5px;
  392. cursor: pointer;
  393. }
  394. @media (max-width: 991px) {
  395. .search-holder {
  396. border: none !important;
  397. }
  398. .search-button i {
  399. padding: 17px 0px;
  400. cursor: pointer;
  401. }
  402. .search-button i:after {
  403. font-family: 'Nunito', sans-serif;
  404. content: 'Search';
  405. font-size: 13px;
  406. text-transform: uppercase;
  407. font-weight: 700;
  408. display: inline-block;
  409. padding-left: 10px;
  410. }
  411. .search-overlay-content input {
  412. margin: 30px;
  413. max-width: 80%;
  414. }
  415. .search-overlay-content {
  416. position: relative;
  417. top: 15% !important;
  418. text-align: center;
  419. }
  420. }
  421. .search-overlay {
  422. height: 100%;
  423. width: 0;
  424. position: fixed;
  425. z-index: 1;
  426. top: 0;
  427. left: 0;
  428. background-color: rgb(0, 0, 0);
  429. background-color: rgba(0, 0, 0, 0.9);
  430. overflow-x: hidden;
  431. transition: 0.5s;
  432. }
  433. .search-overlay-content {
  434. position: relative;
  435. top: 35%;
  436. width: 100%;
  437. text-align: center;
  438. margin-top: 30px;
  439. }
  440. .search-overlay-content input {
  441. font-size: 35px;
  442. font-weight: 500;
  443. color: #fff;
  444. background: transparent;
  445. border: none;
  446. border-bottom: 2px solid #fff;
  447. opacity: 0.5;
  448. padding: 15px 15px;
  449. }
  450. .search-overlay a {
  451. padding: 8px;
  452. text-decoration: none;
  453. font-size: 36px;
  454. color: #818181;
  455. display: block;
  456. transition: 0.3s;
  457. }
  458. .search-overlay a:hover, .search-overlay a:focus {
  459. color: #f1f1f1;
  460. }
  461. .search-overlay .closebtn {
  462. position: absolute;
  463. top: 20px;
  464. right: 30px;
  465. font-size: 60px;
  466. }
  467. @media screen and (max-height: 450px) {
  468. .search-overlay a {
  469. font-size: 20px
  470. }
  471. .search-overlay .closebtn {
  472. font-size: 40px;
  473. top: 15px;
  474. right: 35px;
  475. }
  476. }
  477. /*-----------------------------------------
  478. 5. Top-Bar
  479. -------------------------------------------*/
  480. @media (max-width: 991px) {
  481. #top-bar.hidden-sm-down {
  482. display: none !important;
  483. }
  484. }
  485. #top-bar {
  486. display: block;
  487. position: relative;
  488. z-index: 999;
  489. background: #2a2a2a;
  490. height: 45px;
  491. }
  492. .top-bar-welcome {
  493. display: inline-block;
  494. }
  495. .top-bar-welcome ul {
  496. padding-left: 0px;
  497. margin-bottom: 0px;
  498. }
  499. .top-bar-welcome li {
  500. font-size: 13px;
  501. font-weight: 500;
  502. color: #fff;
  503. list-style-type: none;
  504. margin: 0px;
  505. padding-top: 2px;
  506. margin-right: 5px;
  507. }
  508. .top-bar-info {
  509. display: inline-block;
  510. }
  511. .top-bar-info ul {
  512. padding-left: 0px;
  513. margin-bottom: 0px;
  514. padding-left: 10px;
  515. padding-right: 20px;
  516. }
  517. .top-bar-info li {
  518. font-size: 13px;
  519. font-weight: 500;
  520. color: #fff;
  521. list-style-type: none;
  522. display: inline-block;
  523. padding: 13.5px 5px 0px 5px;
  524. margin-bottom: 0px;
  525. }
  526. .top-bar-info li i {
  527. font-size: 13px;
  528. color: #f7c605;
  529. margin-right: 8px;
  530. }
  531. .social-icons {
  532. padding: 0px;
  533. float: right;
  534. margin: 0px;
  535. }
  536. .social-icons li {
  537. font-size: 14px;
  538. list-style-type: none;
  539. float: left;
  540. width: 35px;
  541. text-align: center;
  542. margin: 0px;
  543. padding: 13px 0px 13px 0px;
  544. }
  545. .social-icons li a {
  546. opacity: .7;
  547. color: #fff;
  548. -webkit-transition-duration: .3s;
  549. transition-duration: .3s;
  550. }
  551. .social-icons a:hover {
  552. opacity: 1;
  553. }
  554. /*-----------------------------------------
  555. 6. CountUps
  556. -------------------------------------------*/
  557. .counter-box {
  558. position: relative;
  559. text-align: center;
  560. margin: 15px 0px;
  561. }
  562. @media (max-width: 767px) {
  563. .counter-box {
  564. margin: 30px;
  565. }
  566. }
  567. .counter-box h4 {
  568. display: inline-block;
  569. font-size: 35px;
  570. font-weight: 600;
  571. color: #111;
  572. }
  573. .counter-box h4:after {
  574. content: '+';
  575. }
  576. .counter-box h3 {
  577. display: inline-block;
  578. font-size: 45px;
  579. font-weight: 600;
  580. color: #111;
  581. }
  582. .counter-box h3:after {
  583. content: '+';
  584. }
  585. .counter-box h2 {
  586. display: inline-block;
  587. font-size: 55px;
  588. font-weight: 600;
  589. color: #111;
  590. }
  591. .counter-box.disable-line h2 {
  592. margin-bottom: 0;
  593. }
  594. .counter-box h2:after {
  595. content: '+';
  596. }
  597. .counter-box p {
  598. font-size: 15px;
  599. font-weight: 500;
  600. color: #999;
  601. line-height: 1.7;
  602. margin-top: 10px;
  603. }
  604. .counter-box.disable-line p {
  605. font-size: 18px;
  606. margin-top: 0;
  607. }
  608. .counter-box p:before {
  609. content: '';
  610. display: block;
  611. background: #f7c605;
  612. height: 3px;
  613. width: 70px;
  614. margin: 10px auto;
  615. }
  616. .counter-box.disable-line p:before {
  617. content: none;
  618. }
  619. .counter-box.left-holder p:before {
  620. content: '';
  621. display: block;
  622. background: #f7c605;
  623. height: 3px;
  624. width: 70px;
  625. margin: 10px 0px;
  626. }
  627. /*-----------------------------------------
  628. 7. Helper Classes
  629. -------------------------------------------*/
  630. /*--------------------
  631. a) Text-content
  632. ----------------------*/
  633. .text-content p {
  634. font-size: 14px;
  635. font-weight: 400;
  636. color: #999;
  637. line-height: 190%;
  638. margin-bottom: 15px;
  639. }
  640. .text-content-big p {
  641. font-size: 15px;
  642. font-weight: 400;
  643. color: #999;
  644. line-height: 200%;
  645. margin-bottom: 15px;
  646. }
  647. .text-content-small p {
  648. font-size: 12px;
  649. font-weight: 400;
  650. color: #999;
  651. line-height: 200%;
  652. margin-bottom: 15px;
  653. }
  654. .text-uppercase {
  655. text-transform: uppercase;
  656. }
  657. .text-thin {
  658. font-weight: 400 !important;
  659. }
  660. .text-semi-bold {
  661. font-weight: 600 !important;
  662. }
  663. .text-bold {
  664. font-weight: 700 !important;
  665. }
  666. .text-bold p {
  667. font-weight: 700 !important;
  668. }
  669. /*--------------------
  670. b) Image-properties
  671. ----------------------*/
  672. .rounded-border {
  673. border-radius: 10px !important;
  674. }
  675. .semi-rounded {
  676. border-radius: 5px !important;
  677. }
  678. .no-rounded {
  679. border-radius: 0px !important;
  680. }
  681. .shadow-primary {
  682. -webkit-box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  683. box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  684. }
  685. .full-width {
  686. width: 100%;
  687. }
  688. .half-width {
  689. min-width: 50%;
  690. }
  691. .full-height {
  692. height: 100%;
  693. }
  694. /*--------------------
  695. c) Buttons
  696. ----------------------*/
  697. .primary-button {
  698. background: #f7c605;
  699. color: #fff;
  700. font-size: 11px;
  701. font-weight: 500;
  702. border-radius: 50px;
  703. padding: 10px 15px 10px 15px;
  704. -webkit-transition: all .4s ease;
  705. -moz-transition: all .4s ease;
  706. transition: all .4s ease;
  707. }
  708. .primary-button:hover {
  709. background: #222;
  710. color: #fff;
  711. }
  712. .primary-button-bordered {
  713. background: transparent;
  714. color: #f7c605;
  715. border: 2px solid #f7c605;
  716. font-size: 11px;
  717. font-weight: 500;
  718. border-radius: 50px;
  719. padding: 10px 15px 10px 15px;
  720. -webkit-transition: all .4s ease;
  721. -moz-transition: all .4s ease;
  722. transition: all .4s ease;
  723. }
  724. .primary-button-bordered.button-lg {
  725. display: inline-block;
  726. font-size: 17px;
  727. font-weight: 600;
  728. padding: 13px 38px 13px 38px !important;
  729. }
  730. .primary-button-bordered:hover {
  731. background: #f7c605;
  732. color: #fff;
  733. }
  734. .white-button {
  735. background: #fff;
  736. transition: background-position 0.5s;
  737. color: #111;
  738. border: 1px solid #ccc;
  739. font-size: 11px;
  740. font-weight: 500;
  741. border-radius: 50px;
  742. padding: 10px 15px 10px 15px;
  743. -webkit-transition: all .4s ease;
  744. -moz-transition: all .4s ease;
  745. transition: all .4s ease;
  746. }
  747. .white-button:hover {
  748. color: #111;
  749. transform: translateY(-.4rem);
  750. box-shadow: 0 12px 36px rgba(0, 0, 0, 0.1);
  751. }
  752. .dark-button {
  753. background: #111;
  754. color: #fff;
  755. font-size: 11px;
  756. font-weight: 500;
  757. border-radius: 50px;
  758. padding: 10px 15px 10px 15px;
  759. -webkit-transition-duration: .3s;
  760. transition-duration: .3s;
  761. }
  762. .dark-button:hover {
  763. color: #fff;
  764. background: #f7c605;
  765. }
  766. .bordered-button {
  767. background: transparent;
  768. border: 2px solid #f7c605;
  769. color: #fff;
  770. font-size: 12px;
  771. font-weight: 600;
  772. border-radius: 50px;
  773. padding: 10px 15px 10px 15px;
  774. -webkit-transition: all .4s ease;
  775. -moz-transition: all .4s ease;
  776. transition: all .4s ease;
  777. }
  778. .bordered-button:hover {
  779. border: 2px solid #f7c605;
  780. background: #f7c605;
  781. color: #fff;
  782. }
  783. .slider-btn {
  784. font-family: inherit !important;
  785. transition: 0.3s !important;
  786. }
  787. .button-tag {
  788. display: inline-block;
  789. font-size: 12px;
  790. font-weight: 500;
  791. margin: 5px 0px 0px 0px;
  792. padding: 8px 15px 8px 15px !important;
  793. }
  794. .button-xs {
  795. display: inline-block;
  796. font-size: 10px;
  797. font-weight: 500;
  798. padding: 8px 17px 8px 17px;
  799. }
  800. .button-sm {
  801. display: inline-block;
  802. font-weight: 500;
  803. font-size: 12px;
  804. padding: 11px 22px 11px 22px;
  805. }
  806. .button-md {
  807. display: inline-block;
  808. font-size: 14px;
  809. font-weight: 500;
  810. padding: 13px 25px 13px 25px;
  811. }
  812. .button-lg {
  813. display: inline-block;
  814. font-size: 17px;
  815. font-weight: 600;
  816. padding: 14px 38px 14px 38px !important;
  817. }
  818. .pricing-box-1-button {
  819. position: relative;
  820. margin-top: 25px;
  821. }
  822. .pricing-box-1-button a {
  823. background: transparent;
  824. font-weight: 500;
  825. color: #f7c605;
  826. display: inline-block;
  827. border: 2px solid #f7c605;
  828. border-radius: 5px;
  829. padding: 8px 22px;
  830. }
  831. .pricing-box-1-button a:hover {
  832. background: #f7c605;
  833. color: #fff;
  834. }
  835. .menu-tag {
  836. display: inline-block;
  837. background: #f7c605;
  838. color: #fff;
  839. font-size: 10px;
  840. font-weight: 500;
  841. border-radius: 5px;
  842. padding: 3px 5px;
  843. margin-left: 5px;
  844. }
  845. /*--------------------
  846. d) Lists
  847. ----------------------*/
  848. .primary-list {
  849. padding-left: 0px;
  850. }
  851. .primary-list li {
  852. list-style-type: none;
  853. color: #222;
  854. font-size: 13px;
  855. font-weight: 500;
  856. margin-top: 15px;
  857. }
  858. .primary-list li i {
  859. color: #f7c605;
  860. padding-right: 10px;
  861. }
  862. .dark-list {
  863. padding-left: 0px;
  864. }
  865. .dark-list li {
  866. list-style-type: none;
  867. color: #222;
  868. font-size: 14px;
  869. font-weight: 500;
  870. margin-top: 15px;
  871. }
  872. .dark-list li i {
  873. color: #222;
  874. padding-right: 10px;
  875. }
  876. .white-list {
  877. padding-left: 0px;
  878. }
  879. .white-list li {
  880. list-style-type: none;
  881. color: #fff;
  882. font-size: 14px;
  883. font-weight: 500;
  884. margin-top: 15px;
  885. }
  886. .white-list li i {
  887. color: #f7c605;
  888. padding-right: 15px;
  889. }
  890. /*--------------------
  891. e) Color Control
  892. ----------------------*/
  893. .primary-color,
  894. .primary-color h1,
  895. .primary-color h2,
  896. .primary-color h3,
  897. .primary-color h4,
  898. .primary-color h5,
  899. .primary-color h6,
  900. .primary-color p,
  901. .primary-color i,
  902. .primary-color span {
  903. color: #f7c605 !important;
  904. }
  905. .dark-color h1,
  906. .dark-color h2,
  907. .dark-color h3,
  908. .dark-color h4,
  909. .dark-color h5,
  910. .dark-color h6,
  911. .dark-color p,
  912. .dark-color i,
  913. .dark-color span {
  914. color: #111 !important;
  915. }
  916. .white-color,
  917. .white-color h1,
  918. .white-color h2,
  919. .white-color h3,
  920. .white-color h4,
  921. .white-color h5,
  922. .white-color h6,
  923. .white-color p,
  924. .white-color i,
  925. .white-color span {
  926. color: #fff !important;
  927. }
  928. /*--------------------
  929. f) Video Box
  930. ----------------------*/
  931. .video-video-box {
  932. position: relative;
  933. display: block;
  934. width: 100%;
  935. height: auto;
  936. }
  937. .video-video-box img {
  938. width: 100%;
  939. }
  940. .video-video-box-overlay {
  941. position: absolute;
  942. top: 0;
  943. bottom: 0;
  944. left: 0;
  945. right: 0;
  946. height: 100%;
  947. width: 100%;
  948. opacity: 1;
  949. transition: .5s ease;
  950. }
  951. .video-video-box-button {
  952. position: absolute;
  953. overflow: hidden;
  954. top: 50%;
  955. left: 50%;
  956. transform: translate(-50%, -50%);
  957. -ms-transform: translate(-50%, -50%);
  958. }
  959. .video-video-box-button button {
  960. color: #fff;
  961. font-size: 25px;
  962. background: rgba(0, 0, 0, .8);
  963. width: 100px;
  964. height: 100px;
  965. border-radius: 50%;
  966. padding-top: 5px;
  967. padding-left: 12px;
  968. -webkit-transition-duration: .3s;
  969. transition-duration: .3s;
  970. }
  971. .video-video-box-button button:hover {
  972. color: #111;
  973. background: #fff;
  974. }
  975. @media (max-width: 991px) {
  976. .video-video-box-button button {
  977. color: #222;
  978. font-size: 15px;
  979. background: rgba(255, 255, 255, .7);
  980. width: 60px;
  981. height: 60px;
  982. border-radius: 50%;
  983. padding-top: 1px;
  984. padding-left: 9px;
  985. -webkit-transition-duration: .3s;
  986. transition-duration: .3s;
  987. }
  988. }
  989. /*--------------------
  990. g) Pagination
  991. ----------------------*/
  992. .paginator {
  993. display: inline-block;
  994. border-radius: 10px;
  995. font-size: 15px;
  996. font-weight: 600;
  997. color: #2d2d2d;
  998. background: #f1f1f1;
  999. padding: 10px 15px 10px 15px;
  1000. margin: 3px;
  1001. }
  1002. .paginator:hover {
  1003. color: #fff;
  1004. background: #bda87f;
  1005. }
  1006. .paginator:focus {
  1007. color: #fff;
  1008. background: #bda87f;
  1009. }
  1010. .active-page {
  1011. color: #fff;
  1012. background: #bda87f;
  1013. }
  1014. /*--------------------
  1015. h) Borders
  1016. ----------------------*/
  1017. .border-top {
  1018. border-top: 1px solid #ececec !important;
  1019. }
  1020. .border-bottom {
  1021. border-bottom: 1px solid #ececec;
  1022. }
  1023. .border-left {
  1024. border-left: 1px solid #ececec;
  1025. }
  1026. .border-right {
  1027. border-right: 1px solid #ececec;
  1028. }
  1029. .border-full {
  1030. border: 1px solid #ececec;
  1031. }
  1032. /*--------------------
  1033. i) Animations
  1034. ----------------------*/
  1035. @-webkit-keyframes pulse {
  1036. 25% {
  1037. -webkit-transform: scale(1);
  1038. transform: scale(1);
  1039. }
  1040. 75% {
  1041. -webkit-transform: scale(.85);
  1042. transform: scale(.85);
  1043. }
  1044. }
  1045. @keyframes pulse {
  1046. 25% {
  1047. -webkit-transform: scale(1);
  1048. -ms-transform: scale(1);
  1049. transform: scale(1);
  1050. }
  1051. 75% {
  1052. -webkit-transform: scale(.85);
  1053. -ms-transform: scale(.85);
  1054. transform: scale(.85);
  1055. }
  1056. }
  1057. /*--------------------
  1058. f) Overlays
  1059. ----------------------*/
  1060. .black-overlay-5:before {
  1061. background: rgba(0, 0, 0, 0.05);
  1062. content: "";
  1063. height: 100%;
  1064. left: 0;
  1065. position: absolute;
  1066. top: 0;
  1067. width: 100%;
  1068. z-index: 0;
  1069. }
  1070. .black-overlay-10:before {
  1071. background: rgba(0, 0, 0, 0.1);
  1072. content: "";
  1073. height: 100%;
  1074. left: 0;
  1075. position: absolute;
  1076. top: 0;
  1077. width: 100%;
  1078. z-index: 0;
  1079. }
  1080. .black-overlay-20:before {
  1081. background: rgba(0, 0, 0, 0.2);
  1082. content: "";
  1083. height: 100%;
  1084. left: 0;
  1085. position: absolute;
  1086. top: 0;
  1087. width: 100%;
  1088. z-index: 0;
  1089. }
  1090. .black-overlay-30:before {
  1091. background: rgba(0, 0, 0, 0.3);
  1092. content: "";
  1093. height: 100%;
  1094. left: 0;
  1095. position: absolute;
  1096. top: 0;
  1097. width: 100%;
  1098. z-index: 0;
  1099. }
  1100. .black-overlay-40:before {
  1101. background: rgba(0, 0, 0, 0.4);
  1102. content: "";
  1103. height: 100%;
  1104. left: 0;
  1105. position: absolute;
  1106. top: 0;
  1107. width: 100%;
  1108. z-index: 0;
  1109. }
  1110. .black-overlay-50:before {
  1111. background: rgba(0, 0, 0, 0.5);
  1112. content: "";
  1113. height: 100%;
  1114. left: 0;
  1115. position: absolute;
  1116. top: 0;
  1117. width: 100%;
  1118. z-index: 0;
  1119. }
  1120. .black-overlay-60:before {
  1121. background: rgba(0, 0, 0, 0.6);
  1122. content: "";
  1123. height: 100%;
  1124. left: 0;
  1125. position: absolute;
  1126. top: 0;
  1127. width: 100%;
  1128. z-index: 0;
  1129. }
  1130. .black-overlay-70:before {
  1131. background: rgba(0, 0, 0, 0.7);
  1132. content: "";
  1133. height: 100%;
  1134. left: 0;
  1135. position: absolute;
  1136. top: 0;
  1137. width: 100%;
  1138. z-index: 0;
  1139. }
  1140. .black-overlay-80:before {
  1141. background: rgba(0, 0, 0, 0.8);
  1142. content: "";
  1143. height: 100%;
  1144. left: 0;
  1145. position: absolute;
  1146. top: 0;
  1147. width: 100%;
  1148. z-index: 0;
  1149. }
  1150. .black-overlay-90:before {
  1151. background: rgba(0, 0, 0, 0.9);
  1152. content: "";
  1153. height: 100%;
  1154. left: 0;
  1155. position: absolute;
  1156. top: 0;
  1157. width: 100%;
  1158. z-index: 0;
  1159. }
  1160. .black-overlay-100:before {
  1161. background: rgba(0, 0, 0, 1);
  1162. content: "";
  1163. height: 100%;
  1164. left: 0;
  1165. position: absolute;
  1166. top: 0;
  1167. width: 100%;
  1168. z-index: 0;
  1169. }
  1170. /*-----------------------------------------
  1171. 8. Preloader
  1172. -------------------------------------------*/
  1173. #preloader {
  1174. position: fixed;
  1175. left: 0;
  1176. top: 0;
  1177. z-index: 99999;
  1178. width: 100%;
  1179. height: 100%;
  1180. overflow: visible;
  1181. background: #fff;
  1182. display: table;
  1183. text-align: center;
  1184. }
  1185. .loader {
  1186. display: table-cell;
  1187. vertical-align: middle;
  1188. height: 100%;
  1189. width: 100%;
  1190. position: relative;
  1191. width: 200px;
  1192. height: 200px;
  1193. }
  1194. .loader-icon {
  1195. width: 80px;
  1196. height: 80px;
  1197. border: 2px solid #f7c605;
  1198. border-right-color: #eee;
  1199. border-radius: 50%;
  1200. position: relative;
  1201. animation: loader-rotate 1s linear infinite;
  1202. margin: 0 auto;
  1203. }
  1204. @keyframes loader-rotate {
  1205. 0% {
  1206. transform: rotate(0);
  1207. }
  1208. 100% {
  1209. transform: rotate(360deg);
  1210. }
  1211. }
  1212. /*-----------------------------------------
  1213. 9. Scroll To Top Button
  1214. -------------------------------------------*/
  1215. .scroll-to-top {
  1216. font-size: 20px;
  1217. padding: 6px;
  1218. text-align: center;
  1219. color: #fff;
  1220. text-decoration: none;
  1221. position: fixed;
  1222. bottom: 80px;
  1223. right: 10px;
  1224. display: none;
  1225. border-radius: 50%;
  1226. background: #333;
  1227. width: 40px;
  1228. height: 40px;
  1229. z-index: 9999;
  1230. outline: none;
  1231. -webkit-transition: all 0.3s ease;
  1232. -moz-transition: all 0.3s ease;
  1233. -o-transition: all 0.3s ease;
  1234. }
  1235. .scroll-to-top i {
  1236. color: #fff;
  1237. }
  1238. .scroll-to-top:hover {
  1239. color: #111;
  1240. background: #fff;
  1241. }
  1242. .scroll-to-top:hover i {
  1243. color: #111;
  1244. }
  1245. .scroll-to-top:visited {
  1246. color: #111;
  1247. text-decoration: none;
  1248. }
  1249. /*-----------------------------------------
  1250. 10. Number Boxes
  1251. -------------------------------------------*/
  1252. .number-box {
  1253. text-align: center;
  1254. padding: 20px;
  1255. margin: 15px 0px;
  1256. background: #fff;
  1257. border-radius: 3px;
  1258. }
  1259. .number-box h3 {
  1260. color: #111;
  1261. line-height: 1;
  1262. font-size: 60px;
  1263. font-weight: 200;
  1264. }
  1265. .number-box-line {
  1266. content: '';
  1267. border-bottom: 1px dashed #dedede;
  1268. width: 100%;
  1269. margin: 20px auto;
  1270. }
  1271. .number-box-line:before {
  1272. content: '';
  1273. display: block;
  1274. margin: auto;
  1275. margin-bottom: -7.5px;
  1276. height: 15px;
  1277. width: 15px;
  1278. border: 2px solid #f7c605;
  1279. background: #fff;
  1280. border-radius: 50%;
  1281. }
  1282. .number-box h4 {
  1283. color: #111;
  1284. font-size: 20px;
  1285. font-weight: 400;
  1286. }
  1287. .number-box p {
  1288. color: #999;
  1289. font-size: 14px;
  1290. font-weight: 400;
  1291. margin-top: 15px;
  1292. line-height: 1.5;
  1293. }
  1294. .plane-box {
  1295. margin: 0 auto;
  1296. text-align: center;
  1297. }
  1298. .plane-box-item {
  1299. position: relative;
  1300. display: inline-block;
  1301. width: 33.33%;
  1302. margin-right: -3px;
  1303. padding-right: 70px;
  1304. padding-left: 70px;
  1305. }
  1306. .plane-box-item:after {
  1307. position: absolute;
  1308. top: 14px;
  1309. left: 50%;
  1310. display: block;
  1311. width: 100%;
  1312. height: 1px;
  1313. content: '';
  1314. background-color: #f7c605;
  1315. opacity: 0.2;
  1316. }
  1317. .plane-box-item:last-child:after {
  1318. content: none;
  1319. }
  1320. .plane-box-text {
  1321. position: relative;
  1322. display: inline-block;
  1323. }
  1324. .plane-box-text h3 {
  1325. color: #ccc;
  1326. font-size: 50px;
  1327. font: italic 60px Lora;
  1328. margin: 15px 0px;
  1329. -webkit-transition-duration: .5s;
  1330. transition-duration: .5s;
  1331. }
  1332. .plane-box-item:hover .plane-box-text h3 {
  1333. color: #222;
  1334. }
  1335. .plane-box-text h4 {
  1336. color: #222;
  1337. font-size: 20px;
  1338. font-weight: 500;
  1339. margin: 15px 0px;
  1340. }
  1341. .plane-box-text p {
  1342. color: #999;
  1343. font-size: 15px;
  1344. font-weight: 400;
  1345. line-height: 1.6;
  1346. }
  1347. .plane-box-decor {
  1348. position: relative;
  1349. z-index: 1;
  1350. display: inline-block;
  1351. width: 29px;
  1352. height: 29px;
  1353. }
  1354. .plane-box-decor:after {
  1355. background-color: #f7c605;
  1356. display: block;
  1357. width: 1px;
  1358. height: 15px;
  1359. margin: 19px auto 0;
  1360. content: '';
  1361. }
  1362. .plane-box-decor:before {
  1363. background-color: #f7c605;
  1364. position: absolute;
  1365. top: 10px;
  1366. left: 10px;
  1367. display: block;
  1368. width: 9px;
  1369. height: 9px;
  1370. content: '';
  1371. border-radius: 50%;
  1372. box-shadow: 0 0 0 5px rgba(207, 81, 90, 0.2);
  1373. }
  1374. @media (max-width: 991px) {
  1375. .plane-box-item {
  1376. padding-right: 40px;
  1377. padding-left: 40px;
  1378. }
  1379. }
  1380. @media (max-width: 768px) {
  1381. .plane-box-item {
  1382. padding-right: 20px;
  1383. padding-left: 20px;
  1384. }
  1385. }
  1386. @media (max-width: 425px) {
  1387. .plane-box-item {
  1388. display: block;
  1389. width: 100%;
  1390. padding-bottom: 25px;
  1391. margin: 15px 0px;
  1392. }
  1393. .plane-box-item:after {
  1394. display: none;
  1395. }
  1396. }
  1397. @media (min-width: 1440px) {
  1398. .plane-box-decor {
  1399. display: table;
  1400. }
  1401. .plane-box-decor {
  1402. margin: 0 auto !important;
  1403. }
  1404. }
  1405. /*-----------------------------------------
  1406. 11. Service Boxes
  1407. -------------------------------------------*/
  1408. /*--------------
  1409. Styles 1
  1410. ----------------*/
  1411. .owl-carousel .service-box {
  1412. margin: 15px 15px 25px 15px;
  1413. }
  1414. .service-box {
  1415. background: #fff;
  1416. overflow: hidden;
  1417. border: 1px solid #eee;
  1418. border-radius: 5px;
  1419. -webkit-box-shadow: 0px 10px 20px 0px rgba(50, 50, 50, 0.12);
  1420. -moz-box-shadow: 0px 10px 20px 0px rgba(50, 50, 50, 0.12);
  1421. box-shadow: 0px 10px 20px 0px rgba(50, 50, 50, 0.12);
  1422. margin: 15px 0px;
  1423. -webkit-transition-duration: .3s;
  1424. transition-duration: .3s;
  1425. }
  1426. .service-inner-box {
  1427. padding: 0px 20px 20px 20px;
  1428. }
  1429. .service-icon-box {
  1430. width: 25%;
  1431. float: left;
  1432. padding-top: 5px;
  1433. }
  1434. .service-content-box {
  1435. width: 75%;
  1436. float: left;
  1437. }
  1438. .service-box img {
  1439. width: 100%;
  1440. margin-bottom: 25px;
  1441. }
  1442. .service-box h3 {
  1443. color: #111;
  1444. font-size: 18px;
  1445. font-weight: 500;
  1446. }
  1447. .service-box p {
  1448. color: #999;
  1449. font-size: 15px;
  1450. font-weight: 400;
  1451. margin-top: 10px;
  1452. }
  1453. .service-box i {
  1454. color: #f7c605;
  1455. font-size: 53px;
  1456. -webkit-transition-duration: .3s;
  1457. transition-duration: .3s;
  1458. }
  1459. @media (max-width: 991px) {
  1460. .service-box i {
  1461. font-size: 33px;
  1462. }
  1463. }
  1464. @media (max-width: 767px) {
  1465. .service-box i {
  1466. font-size: 45px;
  1467. }
  1468. }
  1469. .service-box:hover i {
  1470. color: #111;
  1471. }
  1472. /*--------------
  1473. Styles 2
  1474. ----------------*/
  1475. .service-block {
  1476. position: relative;
  1477. margin-top: 30px;
  1478. margin-bottom: 10px;
  1479. -webkit-transition-duration: .3s;
  1480. transition-duration: .3s;
  1481. }
  1482. .service-block img {
  1483. width: 100%;
  1484. border-radius: 5px;
  1485. margin-bottom: 10px;
  1486. }
  1487. .service-block-number {
  1488. width: 15%;
  1489. float: left;
  1490. }
  1491. .service-block-title {
  1492. width: 75%;
  1493. float: left;
  1494. }
  1495. .service-block-number h5 {
  1496. color: #f7c605;
  1497. font-size: 35px;
  1498. font-weight: 500;
  1499. }
  1500. .service-block-title h4 {
  1501. color: #f7c605;
  1502. font-size: 17px;
  1503. font-weight: 500;
  1504. padding-top: 12.5px;
  1505. padding-left: 10px;
  1506. }
  1507. .service-block-title h4 a:hover {
  1508. color: #f7c605;
  1509. }
  1510. .service-block p {
  1511. color: #999;
  1512. font-size: 15px;
  1513. font-weight: 400;
  1514. }
  1515. /*--------------
  1516. Styles 3
  1517. ----------------*/
  1518. .service-simple {
  1519. position: relative;
  1520. background: #fff;
  1521. border: 1px solid #ececec;
  1522. border-radius: 5px;
  1523. overflow: hidden;
  1524. margin: 15px 0px;
  1525. -webkit-box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.16);
  1526. -moz-box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.16);
  1527. box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.16);
  1528. }
  1529. .service-simple img {
  1530. width: 100%;
  1531. }
  1532. .service-simple-inner {
  1533. position: relative;
  1534. padding: 25px 25px 20px 25px;
  1535. }
  1536. .service-simple h4 {
  1537. font-size: 20px;
  1538. color: #111;
  1539. font-weight: 500;
  1540. margin-bottom: 10px;
  1541. }
  1542. .service-simple h4:before {
  1543. content: '●';
  1544. color: #f7c605;
  1545. margin-right: 10px;
  1546. }
  1547. .service-simple p {
  1548. font-size: 15px;
  1549. color: #999;
  1550. line-height: 1.7;
  1551. margin-bottom: 0px;
  1552. }
  1553. .service-simple-button a {
  1554. display: inline-block;
  1555. background: #111;
  1556. color: #fff;
  1557. border-radius: 5px;
  1558. text-align: center;
  1559. font-size: 14px;
  1560. font-weight: 500;
  1561. width: 100%;
  1562. margin: 15px 0px 2px 0px;
  1563. padding: 15px 20px 15px 20px;
  1564. -webkit-transition: all .4s ease;
  1565. -moz-transition: all .4s ease;
  1566. transition: all .4s ease;
  1567. }
  1568. .service-simple-button a:hover {
  1569. background: #f7c605;
  1570. }
  1571. /*--------------
  1572. Styles 4
  1573. ----------------*/
  1574. .service-box-car-2 {
  1575. display: block;
  1576. background: #fff;
  1577. text-align: center;
  1578. box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.07);
  1579. border-radius: 5px;
  1580. padding: 30px 25px;
  1581. margin: 15px;
  1582. margin-bottom: 30px;
  1583. }
  1584. .service-box-car-2 i {
  1585. display: block;
  1586. color: #f7c605;
  1587. font-size: 55px;
  1588. margin-bottom: 5px;
  1589. }
  1590. .service-box-car-2 h4 {
  1591. color: #111;
  1592. font-size: 18px;
  1593. margin: 18px 0px;
  1594. }
  1595. .service-box-car-2 p {
  1596. font-size: 15px;
  1597. color: #999;
  1598. line-height: 1.7;
  1599. margin-bottom: 0px;
  1600. }
  1601. /*--------------
  1602. Styles 5
  1603. ----------------*/
  1604. .services-box-3 {
  1605. display: block;
  1606. background: #fff;
  1607. overflow: hidden;
  1608. box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.12);
  1609. border-radius: 5px;
  1610. margin: 15px 0px;
  1611. }
  1612. .services-box-3 img {
  1613. width: 100%;
  1614. }
  1615. .services-box-3-header {
  1616. padding: 20px;
  1617. }
  1618. .services-box-3-header h4 {
  1619. font-size: 19px;
  1620. }
  1621. .services-box-3 span {
  1622. display: inline-block;
  1623. background: #f7c605;
  1624. color: #fff;
  1625. font-weight: 500;
  1626. font-size: 13px;
  1627. border-radius: 5px;
  1628. padding: 2px 5px;
  1629. margin-bottom: 10px;
  1630. }
  1631. /*--------------
  1632. Styles 6
  1633. ----------------*/
  1634. .serv-section-2 {
  1635. position: relative;
  1636. border: 1px solid #eee;
  1637. background: #fff;
  1638. box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.16);
  1639. border-radius: 5px;
  1640. overflow: hidden;
  1641. padding: 30px;
  1642. }
  1643. .serv-section-2:before {
  1644. position: absolute;
  1645. top: 0;
  1646. right: 0px;
  1647. z-index: 0;
  1648. content: " ";
  1649. width: 120px;
  1650. height: 120px;
  1651. background: #f5f5f5;
  1652. border-bottom-left-radius: 136px;
  1653. transition: all 0.4s ease-in-out;
  1654. -webkit-transition: all 0.4s ease-in-out;
  1655. }
  1656. .serv-section-2:hover:before {
  1657. background: #f7c605;
  1658. }
  1659. .serv-section-2-icon {
  1660. position: absolute;
  1661. top: 18px;
  1662. right: 22px;
  1663. max-width: 100px;
  1664. z-index: 1;
  1665. text-align: center
  1666. }
  1667. .serv-section-2-icon i {
  1668. color: #f7c605;
  1669. font-size: 48px;
  1670. line-height: 65px;
  1671. transition: all 0.4s ease-in-out;
  1672. -webkit-transition: all 0.4s ease-in-out;
  1673. }
  1674. .serv-section-2:hover .serv-section-2-icon i {
  1675. color: #fff;
  1676. }
  1677. .serv-section-top-text {
  1678. width: 180px;
  1679. height: auto;
  1680. }
  1681. .serv-section-desc {
  1682. position: relative;
  1683. }
  1684. .serv-section-2 h4 {
  1685. color: #333;
  1686. font-size: 20px;
  1687. font-weight: 500;
  1688. line-height: 1.5;
  1689. }
  1690. .serv-section-2 h5 {
  1691. color: #333;
  1692. font-size: 17px;
  1693. font-weight: 400;
  1694. line-height: 1;
  1695. margin-top: 5px;
  1696. }
  1697. .serv-section-2 p {
  1698. margin-top: 25px;
  1699. padding-right: 50px;
  1700. }
  1701. .serv-section-2-act:before {
  1702. background: #f7c605;
  1703. }
  1704. .serv-section-2-act:hover:before {
  1705. background: #f5f5f5;
  1706. }
  1707. .serv-section-2-icon-act i {
  1708. color: #fff;
  1709. }
  1710. .serv-section-2-act:hover .serv-section-2-icon-act i {
  1711. color: #f7c605 !important;
  1712. }
  1713. @media (max-width: 991px) {
  1714. .serv-section-2 {
  1715. margin-top: 20px;
  1716. }
  1717. .serv-section-2:before {
  1718. margin-top: 0px;
  1719. }
  1720. .serv-section-2-icon i {
  1721. position: absolute;
  1722. right: -3px;
  1723. top: 0px;
  1724. }
  1725. }
  1726. @media (max-width: 425px) {
  1727. .serv-section-2 {
  1728. padding: 30px 10px;
  1729. }
  1730. }
  1731. /*-----------------------------------------
  1732. 12. Clients
  1733. -------------------------------------------*/
  1734. .clients img {
  1735. opacity: .5;
  1736. -webkit-transition-duration: .3s;
  1737. transition-duration: .3s;
  1738. }
  1739. .clients img:hover {
  1740. opacity: 1;
  1741. }
  1742. /*-----------------------------------------
  1743. 13. Feature Boxes
  1744. -------------------------------------------*/
  1745. /*--------------
  1746. Styles 1
  1747. ----------------*/
  1748. .simple-feature-box {
  1749. background: #fff;
  1750. border-radius: 5px;
  1751. padding: 15px;
  1752. margin: 15px 0px;
  1753. -webkit-transition-duration: .3s;
  1754. transition-duration: .3s;
  1755. }
  1756. .simple-feature-box:hover {
  1757. -webkit-box-shadow: 0px 0px 19px 0px rgba(50, 50, 50, 0.26);
  1758. -moz-box-shadow: 0px 0px 19px 0px rgba(50, 50, 50, 0.26);
  1759. box-shadow: 0px 0px 19px 0px rgba(50, 50, 50, 0.26);
  1760. }
  1761. .simple-feature-box-icon {
  1762. text-align: center;
  1763. margin: auto;
  1764. }
  1765. .simple-feature-box-icon i {
  1766. font-size: 18px;
  1767. width: 32px;
  1768. height: 32px;
  1769. color: #fff;
  1770. background: #f7c605;
  1771. border-radius: 50%;
  1772. padding: 6.5px;
  1773. padding-left: 9px;
  1774. }
  1775. .simple-feature-box-content h4 {
  1776. font-size: 18px;
  1777. color: #111;
  1778. font-weight: 500;
  1779. margin-bottom: 10px;
  1780. }
  1781. @media (max-width: 767px) {
  1782. .simple-feature-box-content {
  1783. padding-left: 25px;
  1784. }
  1785. }
  1786. /*--------------
  1787. Styles 2
  1788. ----------------*/
  1789. .feature-block {
  1790. position: relative;
  1791. text-align: center;
  1792. background: #fff;
  1793. padding: 15px;
  1794. margin: 15px 0px;
  1795. }
  1796. .feature-block-icon i {
  1797. color: #f7c605;
  1798. font-size: 55px;
  1799. -webkit-transition-duration: .3s;
  1800. transition-duration: .3s;
  1801. }
  1802. .feature-block h4 {
  1803. color: #111;
  1804. font-size: 18px;
  1805. font-weight: 500;
  1806. margin: 20px 0px 10px 0px;
  1807. }
  1808. .feature-block p {
  1809. font-size: 15px;
  1810. color: #999;
  1811. line-height: 1.7;
  1812. margin-bottom: 0px;
  1813. }
  1814. .feature-block:hover .feature-block-icon {
  1815. -webkit-animation-name: pulse;
  1816. animation-name: pulse;
  1817. -webkit-animation-duration: .7s;
  1818. animation-duration: .7s;
  1819. -webkit-animation-timing-function: linear;
  1820. animation-timing-function: linear;
  1821. }
  1822. /*--------------
  1823. Styles 3
  1824. ----------------*/
  1825. .feature-box {
  1826. position: relative;
  1827. background: #fff;
  1828. padding: 20px;
  1829. border-radius: 5px;
  1830. text-align: center;
  1831. margin: 20px 0px 20px 0px;
  1832. -webkit-box-shadow: 2px 2px 20px 0px rgba(50, 50, 50, 0.21);
  1833. -moz-box-shadow: 2px 2px 20px 0px rgba(50, 50, 50, 0.21);
  1834. box-shadow: 2px 2px 20px 0px rgba(50, 50, 50, 0.21);
  1835. -webkit-transition-duration: 0.3s;
  1836. transition-duration: 0.3s;
  1837. }
  1838. .feature-box:hover {
  1839. -webkit-box-shadow: 4px 4px 22px 0px rgba(50, 50, 50, 0.29);
  1840. -moz-box-shadow: 4px 4px 22px 0px rgba(50, 50, 50, 0.29);
  1841. box-shadow: 4px 4px 22px 0px rgba(50, 50, 50, 0.29);
  1842. }
  1843. .feature-box i {
  1844. color: #f7c605;
  1845. font-size: 60px;
  1846. -webkit-transition-duration: 0.3s;
  1847. transition-duration: 0.3s;
  1848. }
  1849. .feature-box:hover i {
  1850. color: #111;
  1851. }
  1852. .feature-box h4 {
  1853. color: #111;
  1854. font-size: 18px;
  1855. font-weight: 500;
  1856. line-height: 170%;
  1857. margin: 15px 0px;
  1858. }
  1859. .feature-box p {
  1860. color: #999;
  1861. font-size: 14px;
  1862. font-weight: 500;
  1863. line-height: 170%;
  1864. }
  1865. .feature-box-3 {
  1866. display: block;
  1867. text-align: center;
  1868. background: #fff;
  1869. border-radius: 4px;
  1870. margin: 15px 0;
  1871. -webkit-transition: all .3s;
  1872. -o-transition: all .3s;
  1873. transition: all .3s;
  1874. }
  1875. .feature-box-3 i {
  1876. display: flex;
  1877. align-items: center;
  1878. justify-content: center;
  1879. color: #f7c605;
  1880. font-size: 55px;
  1881. background-image: linear-gradient(to bottom, rgba(247, 198, 5, .1), transparent);
  1882. width: 125px;
  1883. height: 125px;
  1884. border-radius: 50%;
  1885. margin: 0 auto 15px auto;
  1886. }
  1887. .feature-box-3 h4 {
  1888. font-size: 20px;
  1889. font-weight: 500;
  1890. margin-bottom: 15px;
  1891. }
  1892. .feature-box-3 p {
  1893. font-size: 16px;
  1894. }
  1895. /*--------------
  1896. Styles 4
  1897. ----------------*/
  1898. .feature-flex {
  1899. position: relative;
  1900. margin: 30px 0px;
  1901. -webkit-transition-duration: .3s;
  1902. transition-duration: .3s;
  1903. }
  1904. .feature-flex-icon {
  1905. float: left;
  1906. width: 25%;
  1907. margin-top: 20px;
  1908. -webkit-transition-duration: .3s;
  1909. transition-duration: .3s;
  1910. }
  1911. .feature-flex-icon i {
  1912. color: #fff;
  1913. border-radius: 50%;
  1914. background-image: linear-gradient(120deg, rgba(247, 198, 5, .6) 0%, #f7c605 100%);
  1915. padding: 21.5px 22px;
  1916. font-size: 40px;
  1917. -webkit-transition-duration: .3s;
  1918. transition-duration: .3s;
  1919. }
  1920. @media (max-width: 991px) {
  1921. .feature-flex-icon {
  1922. text-align: center;
  1923. margin: auto;
  1924. }
  1925. .feature-flex-icon i {
  1926. color: #fff;
  1927. border-radius: 50%;
  1928. background-image: linear-gradient(120deg, rgba(247, 198, 5, .6) 0%, #f7c605 100%);
  1929. padding: 17px;
  1930. font-size: 32px;
  1931. }
  1932. }
  1933. @media (max-width: 767px) {
  1934. .feature-flex-icon {
  1935. text-align: center;
  1936. margin: auto;
  1937. }
  1938. .feature-flex-icon i {
  1939. color: #fff;
  1940. border-radius: 50%;
  1941. background-image: linear-gradient(120deg, rgba(247, 198, 5, .6) 0%, #f7c605 100%);
  1942. padding: 16px;
  1943. font-size: 33px;
  1944. }
  1945. }
  1946. .feature-flex-content {
  1947. float: left;
  1948. width: 75%;
  1949. padding-left: 10px;
  1950. }
  1951. .feature-flex-content h4 {
  1952. color: #111;
  1953. font-size: 21px;
  1954. font-weight: 400;
  1955. }
  1956. .feature-flex-content h4 a {
  1957. color: #111;
  1958. font-size: 21px;
  1959. font-weight: 400;
  1960. }
  1961. .feature-flex-content p {
  1962. color: #999;
  1963. font-size: 15px;
  1964. font-weight: 400;
  1965. margin-top: 10px;
  1966. }
  1967. .feature-flex:hover .feature-flex-icon {
  1968. margin-top: 10px;
  1969. }
  1970. /*--------------
  1971. Styles 5
  1972. ----------------*/
  1973. .feature-flex-square {
  1974. position: relative;
  1975. border-radius: 5px;
  1976. margin: 30px 0px;
  1977. -webkit-transition-duration: .3s;
  1978. transition-duration: .3s;
  1979. }
  1980. .feature-flex-square-icon {
  1981. float: left;
  1982. width: 25%;
  1983. margin-top: 5px;
  1984. -webkit-transition-duration: .3s;
  1985. transition-duration: .3s;
  1986. }
  1987. .feature-flex-square-icon i {
  1988. color: #f7c605;
  1989. border-radius: 10px;
  1990. padding: 10px;
  1991. font-size: 55px;
  1992. -webkit-transition-duration: .3s;
  1993. transition-duration: .3s;
  1994. }
  1995. @media (max-width: 991px) {
  1996. .feature-flex-square-icon {
  1997. text-align: center;
  1998. margin: 23px auto;
  1999. }
  2000. .feature-flex-square-icon i {
  2001. padding: 14px;
  2002. font-size: 30px;
  2003. }
  2004. }
  2005. .feature-flex-square-content {
  2006. float: left;
  2007. width: 75%;
  2008. padding-left: 10px;
  2009. }
  2010. .feature-flex-square-content h4 {
  2011. color: #111;
  2012. font-size: 19px;
  2013. font-weight: 500;
  2014. }
  2015. .feature-flex-square-content h4 a {
  2016. color: #111;
  2017. font-size: 19px;
  2018. font-weight: 500;
  2019. }
  2020. .feature-flex-square-content p {
  2021. color: #999;
  2022. font-size: 15px;
  2023. font-weight: 400;
  2024. margin-top: 10px;
  2025. margin-bottom: 15px;
  2026. }
  2027. .feature-flex-square-content-button {
  2028. display: inline-block;
  2029. color: #111;
  2030. font-size: 14px;
  2031. font-weight: 500;
  2032. }
  2033. .feature-flex-square-content-button:after {
  2034. content: '\f0da';
  2035. font-size: 14px;
  2036. font-family: "FontAwesome";
  2037. color: #111;
  2038. margin-left: 7px;
  2039. -webkit-transition-duration: .3s;
  2040. transition-duration: .3s;
  2041. }
  2042. .feature-flex-square-content-button:hover {
  2043. color: #f7c605;
  2044. }
  2045. .feature-flex-square-content-button:hover:after {
  2046. color: #f7c605;
  2047. }
  2048. /*--------------
  2049. Styles 6
  2050. ----------------*/
  2051. .feature-box-long {
  2052. position: relative;
  2053. text-align: center;
  2054. border: 1px solid #ececec;
  2055. border-radius: 5px;
  2056. background: #fff;
  2057. -webkit-box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.16);
  2058. -moz-box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.16);
  2059. box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.16);
  2060. margin: 15px 0px;
  2061. padding: 30px 40px 35px 40px;
  2062. -webkit-transition-duration: .3s;
  2063. transition-duration: .3s;
  2064. }
  2065. .feature-box-long:hover {
  2066. -webkit-box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.29);
  2067. -moz-box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.29);
  2068. box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.29);
  2069. }
  2070. .feature-box-long h3 {
  2071. font-size: 19px;
  2072. font-weight: 500;
  2073. color: #111;
  2074. margin: 25px 0px 15px 0px;
  2075. }
  2076. .feature-box-long i {
  2077. color: #f7c605;
  2078. font-size: 65px;
  2079. -webkit-transition-duration: .3s;
  2080. transition-duration: .3s;
  2081. }
  2082. .feature-box-long p {
  2083. font-size: 15px;
  2084. font-weight: 400;
  2085. color: #aaa;
  2086. }
  2087. /*--------------
  2088. Styles 7
  2089. ----------------*/
  2090. .feature-box-2 {
  2091. position: relative;
  2092. background: #fff;
  2093. border-radius: 5px;
  2094. margin: 20px 0px 20px 0px;
  2095. -webkit-transition-duration: 0.3s;
  2096. transition-duration: 0.3s;
  2097. }
  2098. @media (max-width: 767px) {
  2099. .feature-box-2 {
  2100. text-align: center;
  2101. padding: 0px 30px;
  2102. }
  2103. }
  2104. .feature-box-2 i {
  2105. color: #f7c605;
  2106. font-size: 50px;
  2107. -webkit-transition-duration: 0.3s;
  2108. transition-duration: 0.3s;
  2109. }
  2110. .feature-box-2 h4 {
  2111. color: #111;
  2112. font-size: 18px;
  2113. font-weight: 500;
  2114. line-height: 170%;
  2115. margin: 15px 0px 5px 0px;
  2116. }
  2117. .feature-box-2 p {
  2118. color: #999;
  2119. font-size: 13px;
  2120. font-weight: 400;
  2121. line-height: 1.8;
  2122. }
  2123. /*--------------
  2124. Styles 8
  2125. ----------------*/
  2126. .feature-box-4 {
  2127. position: relative;
  2128. background: #fff;
  2129. display: flex;
  2130. border-top: 3px solid #f7c605;
  2131. overflow: hidden;
  2132. box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1);
  2133. padding: 30px;
  2134. margin: 15px 0;
  2135. }
  2136. .feature-box-4-icon {
  2137. flex: 0 0 80px;
  2138. }
  2139. .feature-box-4-icon i {
  2140. color: #f7c605;
  2141. font-size: 50px;
  2142. }
  2143. .feature-box-4 h4 {
  2144. font-size: 19px;
  2145. color: #222;
  2146. font-weight: 500;
  2147. margin-bottom: 10px;
  2148. }
  2149. .feature-box-4 h4, .feature-box-4 p, .feature-box-4 .feature-box-4-link {
  2150. position: relative;
  2151. z-index: 99;
  2152. }
  2153. .feature-box-4-link {
  2154. color: #222;
  2155. font-size: 15px;
  2156. font-weight: 500;
  2157. display: inline-block;
  2158. margin-top: 10px;
  2159. }
  2160. .feature-box-4-link i {
  2161. font-size: 11px;
  2162. margin-left: 3px;
  2163. }
  2164. .feature-box-4-link:hover {
  2165. color: #f7c605;
  2166. }
  2167. .feature-box-4-icon-bg {
  2168. position: absolute;
  2169. color: #eee;
  2170. font-size: 125px;
  2171. bottom: -30px;
  2172. right: -20px;
  2173. z-index: 9;
  2174. }
  2175. /*--------------
  2176. Styles 9
  2177. ----------------*/
  2178. .features-slider {
  2179. position: relative;
  2180. z-index: 999;
  2181. }
  2182. @media (min-width: 991px) {
  2183. .features-slider {
  2184. margin-top: -299px;
  2185. }
  2186. .rev-slider-long {
  2187. height: 870px !important;
  2188. }
  2189. .rev-slider-long .forcefullwidth_wrapper_tp_banner, .rev-slider-long .rev_slider {
  2190. height: 870px !important;
  2191. }
  2192. }
  2193. .feature-box-5 {
  2194. width: 100%;
  2195. background: #101010;
  2196. color: #fff;
  2197. border-top: 2px solid #f7c605;
  2198. padding: 30px 30px 60px 30px;
  2199. -webkit-transition-duration: 0.5s;
  2200. transition-duration: 0.5s;
  2201. }
  2202. @media (max-width: 991px) {
  2203. .feature-box-5 {
  2204. margin: 15px 0;
  2205. }
  2206. }
  2207. .feature-box-5.emphasised {
  2208. background: #f7c605;
  2209. color: #fff;
  2210. box-shadow: 0px 10px 50px 1px rgba(0, 0, 0, 0.3);
  2211. }
  2212. .feature-box-5.emphasised i {
  2213. color: #fff;
  2214. }
  2215. .feature-box-5 i {
  2216. color: #f7c605;
  2217. font-size: 60px;
  2218. -webkit-transition-duration: 0.5s;
  2219. transition-duration: 0.5s;
  2220. }
  2221. .feature-box-5 h4 {
  2222. color: #fff;
  2223. font-size: 23px;
  2224. margin: 30px 0 10px 0;
  2225. }
  2226. .feature-box-5 p {
  2227. color: #fff;
  2228. font-size: 15px;
  2229. }
  2230. .feature-box-5:hover {
  2231. background: #f7c605;
  2232. color: #fff;
  2233. box-shadow: 0px 10px 50px 1px rgba(0, 0, 0, 0.3);
  2234. }
  2235. .feature-box-5:hover i {
  2236. color: #fff;
  2237. }
  2238. /*--------------
  2239. Styles 10
  2240. ----------------*/
  2241. .feature-box-6 {
  2242. position: relative;
  2243. }
  2244. .feature-box-6-text {
  2245. text-align: left;
  2246. margin-left: 130px;
  2247. padding: 15px 15px 15px 100px;
  2248. }
  2249. .feature-box-6-text h6 {
  2250. color: #fff;
  2251. font-size: 14px;
  2252. font-weight: 500;
  2253. line-height: 1.4;
  2254. letter-spacing: 1px;
  2255. }
  2256. .feature-box-6-text h4 {
  2257. color: #fff;
  2258. font-size: 40px;
  2259. font-weight: 600;
  2260. letter-spacing: 1px;
  2261. line-height: 1.2;
  2262. padding: 15px 0px;
  2263. }
  2264. .feature-box-6-text h4 span {
  2265. color: #f7c605;
  2266. font-size: 40px;
  2267. font-weight: 600;
  2268. letter-spacing: 1px;
  2269. }
  2270. .feature-box-6-text p {
  2271. color: #999;
  2272. font-size: 14px;
  2273. font-weight: 400;
  2274. padding-top: 10px;
  2275. }
  2276. .feature-counter-box {
  2277. position: relative;
  2278. text-align: left;
  2279. }
  2280. .feature-counter-box h4 {
  2281. display: inline-block;
  2282. color: #111;
  2283. font-size: 50px;
  2284. font-weight: 600;
  2285. padding: 0px;
  2286. }
  2287. .feature-counter-box p {
  2288. font-size: 14px;
  2289. font-weight: 400;
  2290. color: #999;
  2291. line-height: 1.7;
  2292. padding: 0px;
  2293. }
  2294. .feature-box-6-icon-text {
  2295. background-color: rgba(0, 0, 0, 0.6);
  2296. position: relative;
  2297. padding: 30px;
  2298. margin: 1px;
  2299. }
  2300. .feature-box-6-icon-text i {
  2301. color: #f7c605;
  2302. font-size: 50px;
  2303. }
  2304. .feature-box-6-icon-text h4 {
  2305. color: #fff;
  2306. font-size: 22px;
  2307. font-weight: 500;
  2308. padding: 15px 0px;
  2309. }
  2310. .feature-box-6-icon-text p {
  2311. color: #fff;
  2312. font-size: 15px;
  2313. font-weight: 400;
  2314. }
  2315. @media (max-width: 1024px) {
  2316. .feature-box-6-text {
  2317. text-align: left;
  2318. margin-left: 70px;
  2319. padding: 15px 15px 15px 70px;
  2320. }
  2321. .feature-counter-box h4 {
  2322. font-size: 35px;
  2323. }
  2324. .feature-box-6-icon {
  2325. margin-right: 30px;
  2326. }
  2327. .feature-box-6-icon-text {
  2328. padding: 20px 15px;
  2329. }
  2330. .feature-box-6-icon-text h4 {
  2331. font-size: 18px;
  2332. }
  2333. }
  2334. @media (max-width: 768px) {
  2335. .feature-box-6-icon {
  2336. margin-right: 0px;
  2337. }
  2338. .feature-box-6-icon-text {
  2339. padding: 20px 20px;
  2340. }
  2341. .feature-box-6-icon-text h4 {
  2342. font-size: 18px;
  2343. }
  2344. .feature-box-6-text {
  2345. text-align: left;
  2346. margin-left: 30px;
  2347. padding: 15px 15px 15px 0px;
  2348. }
  2349. }
  2350. /*-----------------------------------------
  2351. 14. Progress Bars
  2352. -------------------------------------------*/
  2353. .progress-text {
  2354. font-size: 13px;
  2355. font-weight: 500;
  2356. color: #333;
  2357. margin-bottom: 5px;
  2358. margin-top: 20px;
  2359. }
  2360. .custom-progress {
  2361. height: 5px;
  2362. border-radius: 50px;
  2363. box-shadow: none;
  2364. }
  2365. .custom-bar {
  2366. height: 100%;
  2367. background-color: #f7c605;
  2368. box-shadow: none;
  2369. }
  2370. .custom-bar-dark {
  2371. height: 100%;
  2372. background-color: #111;
  2373. box-shadow: none;
  2374. }
  2375. .progress-medium {
  2376. height: 8px;
  2377. border-radius: 50px;
  2378. box-shadow: none;
  2379. }
  2380. .progress-bold {
  2381. height: 12px;
  2382. border-radius: 50px;
  2383. box-shadow: none;
  2384. }
  2385. /*-----------------------------------------
  2386. 15. Price Tables
  2387. -------------------------------------------*/
  2388. /*--------------
  2389. Styles 1
  2390. ----------------*/
  2391. .price-table {
  2392. position: relative;
  2393. border-radius: 10px;
  2394. overflow: hidden;
  2395. background: #fff;
  2396. margin: 15px 0px;
  2397. -webkit-box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.16);
  2398. -moz-box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.16);
  2399. box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.16);
  2400. }
  2401. .price-table-header {
  2402. background: #111;
  2403. text-align: center;
  2404. padding: 30px;
  2405. padding-top: 0px;
  2406. }
  2407. .price-table-recommended {
  2408. position: relative;
  2409. z-index: 9999;
  2410. transform: scale(1.09);
  2411. }
  2412. @media (max-width: 767px) {
  2413. .price-table-recommended {
  2414. position: relative;
  2415. z-index: 9999;
  2416. transform: scale(1);
  2417. }
  2418. }
  2419. .price-table-header h5 {
  2420. position: relative;
  2421. color: #111;
  2422. font-weight: 500;
  2423. display: inline-block;
  2424. margin-right: -7px;
  2425. text-align: center;
  2426. font-size: 17px;
  2427. background: #fff;
  2428. -moz-border-radius-bottomright: 15px;
  2429. -webkit-border-bottom-right-radius: 15px;
  2430. border-bottom-right-radius: 15px;
  2431. -moz-border-radius-bottomleft: 15px;
  2432. -webkit-border-bottom-left-radius: 15px;
  2433. border-bottom-left-radius: 15px;
  2434. padding: 5px 15px;
  2435. }
  2436. .price-table-header h4 {
  2437. color: #fff;
  2438. font-weight: 300;
  2439. font-size: 60px;
  2440. margin: 15px 0px 10px 0px;
  2441. }
  2442. .price-table-header h4 sup {
  2443. font-size: 35px;
  2444. margin: 0px 5px;
  2445. }
  2446. .price-table-header span {
  2447. color: #fff;
  2448. font-weight: 400;
  2449. font-size: 16px;
  2450. }
  2451. .price-table-content {
  2452. padding: 20px;
  2453. }
  2454. .price-table-content ul {
  2455. padding-left: 0px;
  2456. padding-bottom: 0px;
  2457. }
  2458. .price-table-content ul li {
  2459. display: block;
  2460. list-style-type: none;
  2461. color: #111;
  2462. font-size: 14px;
  2463. font-weight: 500;
  2464. padding: 15px;
  2465. }
  2466. .price-table-content ul li:before {
  2467. content: '\f00c';
  2468. font-family: 'FontAwesome';
  2469. display: inline-block;
  2470. color: #f7c605;
  2471. margin-right: 12px;
  2472. }
  2473. .price-table-content ul li:nth-child(2) {
  2474. background: #eee;
  2475. }
  2476. .price-table-content a {
  2477. display: inline-block;
  2478. color: #fff;
  2479. font-size: 14px;
  2480. font-weight: 500;
  2481. background: #111;
  2482. border-radius: 10px;
  2483. padding: 15px 15px;
  2484. width: 100%;
  2485. margin-top: 15px;
  2486. }
  2487. .price-table-content a:hover {
  2488. background: #f7c605;
  2489. }
  2490. /*--------------
  2491. Styles 2
  2492. ----------------*/
  2493. .pricing-list {
  2494. text-align: center;
  2495. border-radius: 10px;
  2496. background: #fff;
  2497. border: 2px solid #ececec;
  2498. padding: 30px 40px;
  2499. margin: 20px 0px;
  2500. -webkit-box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.16);
  2501. -moz-box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.16);
  2502. box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.16);
  2503. -webkit-transition-duration: 0.5s;
  2504. transition-duration: 0.5s;
  2505. }
  2506. .pricing-list h4 {
  2507. color: #111;
  2508. font-size: 25px;
  2509. font-weight: 500;
  2510. letter-spacing: 2px;
  2511. margin-bottom: 20px;
  2512. }
  2513. .pricing-list h2 {
  2514. display: inline-block;
  2515. color: #111;
  2516. font-size: 65px;
  2517. font-weight: 400;
  2518. letter-spacing: 2px;
  2519. }
  2520. .pricing-list h2 sup {
  2521. color: #111;
  2522. font-size: 30px;
  2523. font-weight: 500;
  2524. }
  2525. .pricing-list span {
  2526. display: inline-block;
  2527. color: #f7c605;
  2528. font-weight: 500;
  2529. }
  2530. .pricing-list ul {
  2531. margin-top: 20px;
  2532. }
  2533. .pricing-list ul li {
  2534. color: #666;
  2535. font-size: 15px;
  2536. font-weight: 400;
  2537. padding: 7px;
  2538. }
  2539. .pricing-list ul li:after {
  2540. content: '';
  2541. display: block;
  2542. width: 240px;
  2543. max-width: 100%;
  2544. height: 1px;
  2545. background: #ececec;
  2546. margin: 0 auto;
  2547. margin-top: 10px;
  2548. }
  2549. .pricing-list-button {
  2550. background: #f7c605;
  2551. margin: 20px 15px 0px 15px;
  2552. border: 2px solid #f7c605;
  2553. border-radius: 5px;
  2554. -webkit-transition-duration: .3s;
  2555. transition-duration: .3s;
  2556. }
  2557. .pricing-list-button:hover {
  2558. background: #fff;
  2559. }
  2560. .pricing-list-button a {
  2561. display: block;
  2562. color: #fff;
  2563. font-size: 16px;
  2564. font-weight: 500;
  2565. padding: 8px;
  2566. -webkit-transition-duration: .3s;
  2567. transition-duration: .3s;
  2568. }
  2569. .pricing-list-button:hover a {
  2570. color: #f7c605;
  2571. }
  2572. .pricing-list strong {
  2573. position: absolute;
  2574. color: #fff;
  2575. font-size: 16px;
  2576. font-weight: 500;
  2577. background: #f7c605;
  2578. width: 65px;
  2579. height: 65px;
  2580. padding: 6px;
  2581. padding-top: 20px;
  2582. border-radius: 50%;
  2583. top: 0;
  2584. right: 0;
  2585. }
  2586. /*--------------
  2587. Styles 3
  2588. ----------------*/
  2589. .pricing-list-2 {
  2590. background: #fff;
  2591. padding: 45px 30px;
  2592. border-radius: 10px;
  2593. border: 2px solid #e8e8e8;
  2594. text-align: center;
  2595. box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.1);
  2596. z-index: 1;
  2597. margin: 15px 0px;
  2598. -webkit-transition-duration: .3s;
  2599. transition-duration: .3s;
  2600. }
  2601. .pricing-list-2-emphasise {
  2602. position: relative;
  2603. z-index: 2;
  2604. transform: scale(1.1);
  2605. margin: 15px 0px;
  2606. }
  2607. @media (max-width: 767px) {
  2608. .pricing-list-2-emphasise {
  2609. transform: scale(1);
  2610. }
  2611. }
  2612. .pricing-list-2-top {
  2613. width: 80px;
  2614. height: 80px;
  2615. background: #fff;
  2616. border: 2px solid #f7c605;
  2617. line-height: 83px;
  2618. display: inline-block;
  2619. border-radius: 50px;
  2620. color: #f7c605;
  2621. font-size: 35px;
  2622. -webkit-transition-duration: .3s;
  2623. transition-duration: .3s;
  2624. }
  2625. .pricing-list-2:hover .pricing-list-2-top {
  2626. background: #fff;
  2627. color: #f7c605;
  2628. }
  2629. .pricing-list-2 h4 {
  2630. color: #333;
  2631. font-size: 22px;
  2632. font-weight: 500;
  2633. letter-spacing: 1px;
  2634. margin-top: 20px;
  2635. }
  2636. .pricing-list-2-price {
  2637. margin-top: 20px;
  2638. }
  2639. .pricing-list-2-price h3 sup {
  2640. color: #333;
  2641. font-size: 25px;
  2642. font-weight: 400;
  2643. }
  2644. .pricing-list-2-price h3 {
  2645. color: #333;
  2646. font-size: 50px;
  2647. font-weight: 400;
  2648. display: inline-block;
  2649. }
  2650. .pricing-list-2-price span {
  2651. color: #777;
  2652. font-size: 15px;
  2653. font-weight: 500;
  2654. }
  2655. .pricing-list-2-prod {
  2656. margin-top: 20px;
  2657. }
  2658. .pricing-list-2-prod li {
  2659. color: #999;
  2660. font-size: 13px;
  2661. font-weight: 500;
  2662. line-height: 1.5;
  2663. padding: 5px 0px;
  2664. }
  2665. .pricing-list-2-prod li:after {
  2666. content: '';
  2667. display: block;
  2668. width: 180px;
  2669. max-width: 100%;
  2670. height: 1px;
  2671. background: #eee;
  2672. margin: 10px auto 0;
  2673. }
  2674. .pricing-list-2-button {
  2675. background: #fff;
  2676. border: 2px solid #f7c605;
  2677. display: inline-block;
  2678. border-radius: 5px;
  2679. margin-top: 20px;
  2680. -webkit-transition-duration: .3s;
  2681. transition-duration: .3s;
  2682. }
  2683. .pricing-list-2-button a {
  2684. display: inline-block;
  2685. color: #f7c605;
  2686. font-weight: 500;
  2687. padding: 7px 50px;
  2688. -webkit-transition-duration: .3s;
  2689. transition-duration: .3s;
  2690. }
  2691. .pricing-list-2-button:hover {
  2692. background: #f7c605;
  2693. border: 2px solid #f7c605;
  2694. }
  2695. .pricing-list-2-button:hover a {
  2696. color: #fff;
  2697. }
  2698. /* active version */
  2699. .pricing-list-2-button-act {
  2700. background: #f7c605;
  2701. border: 2px solid #f7c605;
  2702. display: inline-block;
  2703. border-radius: 5px;
  2704. margin-top: 20px;
  2705. -webkit-transition-duration: .3s;
  2706. transition-duration: .3s;
  2707. }
  2708. .pricing-list-2-button-act a {
  2709. display: inline-block;
  2710. color: #fff;
  2711. font-weight: 500;
  2712. padding: 7px 50px;
  2713. -webkit-transition-duration: .3s;
  2714. transition-duration: .3s;
  2715. }
  2716. .pricing-list-2-button-act:hover {
  2717. background: #fff;
  2718. border: 2px solid #f7c605;
  2719. }
  2720. .pricing-list-2-button-act:hover a {
  2721. color: #f7c605;
  2722. }
  2723. .pricing-list-2-top-act {
  2724. background: #f7c605;
  2725. color: #fff;
  2726. }
  2727. .pricing-box-1 {
  2728. position: relative;
  2729. border: 1px solid #eee;
  2730. overflow: hidden;
  2731. border-radius: 5px;
  2732. -webkit-box-shadow: 1px 3px 10px 1px rgba(0, 0, 0, 0.1);
  2733. -moz-box-shadow: 1px 3px 10px 1px rgba(0, 0, 0, 0.1);
  2734. box-shadow: 1px 3px 10px 1px rgba(0, 0, 0, 0.1);
  2735. margin-top: 20px;
  2736. }
  2737. .pricing-box-back {
  2738. position: relative;
  2739. background-repeat: no-repeat;
  2740. background-position: right center;
  2741. padding: 40px;
  2742. z-index: 99;
  2743. }
  2744. .pricing-box-emphasis:after {
  2745. content: "";
  2746. position: absolute;
  2747. left: 0;
  2748. top: 0;
  2749. display: block;
  2750. height: 100%;
  2751. width: 100%;
  2752. background: #f7c605;
  2753. opacity: 0.7;
  2754. z-index: -1;
  2755. }
  2756. .pricing-box-back h6 {
  2757. color: #fff;
  2758. font-weight: 500;
  2759. font-size: 15px;
  2760. }
  2761. .pricing-box-back h6 span {
  2762. float: right;
  2763. border: 1px solid #ccc;
  2764. border-radius: 30px;
  2765. padding: 2px 10px;
  2766. color: #fff;
  2767. font-weight: 500;
  2768. letter-spacing: 0.5px;
  2769. font-size: 15px;
  2770. }
  2771. .pricing-box-back h3 {
  2772. color: #fff;
  2773. font-weight: 800;
  2774. font-size: 55px;
  2775. margin-top: 20px;
  2776. line-height: 1.5;
  2777. }
  2778. .pricing-box-back h3 sup {
  2779. color: #fff;
  2780. font-weight: 800;
  2781. font-size: 36px;
  2782. margin-right: 5px;
  2783. }
  2784. .pricing-box-back h5 {
  2785. color: #fff;
  2786. font-weight: 500;
  2787. font-size: 15px;
  2788. letter-spacing: 0.5px;
  2789. }
  2790. /*-- pricing-box-back-2 --*/
  2791. .pricing-box-back-2 h6,
  2792. .pricing-box-back-2 h6 span {
  2793. color: #000;
  2794. }
  2795. .pricing-box-back-2 h3,
  2796. .pricing-box-back-2 h3 sup,
  2797. .pricing-box-back-2 h5 {
  2798. color: #333;
  2799. }
  2800. .pricing-box-1-text {
  2801. padding: 30px 30px;
  2802. border-top: 1px solid #eee;
  2803. }
  2804. .pricing-box-1-text ul li {
  2805. color: #555;
  2806. font-size: 15px;
  2807. font-weight: 500;
  2808. padding: 5px 0px;
  2809. }
  2810. .pricing-box-1-text ul li i {
  2811. color: #f7c605;
  2812. font-size: 15px;
  2813. margin-right: 5px;
  2814. }
  2815. .pricing-box-1-button {
  2816. position: relative;
  2817. margin-top: 25px;
  2818. }
  2819. .pricing-box-1-button a {
  2820. background: transparent;
  2821. color: #f7c605;
  2822. display: inline-block;
  2823. border: 2px solid #f7c605;
  2824. border-radius: 5px;
  2825. padding: 8px 20px;
  2826. }
  2827. .pricing-box-1-button a:hover {
  2828. background: #f7c605;
  2829. color: #fff;
  2830. }
  2831. @media (max-width: 991px) {
  2832. .pricing-box-1-text {
  2833. padding: 30px 10px;
  2834. border-top: 1px solid #eee;
  2835. }
  2836. .pricing-box-1-text ul li {
  2837. font-size: 14px;
  2838. }
  2839. .pricing-box-back h6 span {
  2840. display: none;
  2841. }
  2842. }
  2843. .pricing-box-3 {
  2844. position: relative;
  2845. text-align: center;
  2846. background: #fff;
  2847. }
  2848. @media (min-width: 767px) {
  2849. .pricing-box-3-premium {
  2850. transform: scale(1.1);
  2851. z-index: 999;
  2852. -webkit-box-shadow: 0px 0px 38px -12px rgba(122, 122, 122, 0.79);
  2853. -moz-box-shadow: 0px 0px 38px -12px rgba(122, 122, 122, 0.79);
  2854. box-shadow: 0px 0px 38px -12px rgba(122, 122, 122, 0.79);
  2855. }
  2856. }
  2857. .pricing-box-3-premium .pricing-box-3-top {
  2858. background: #000;
  2859. }
  2860. .pricing-box-3-top {
  2861. background: #000;
  2862. padding: 12px 0px;
  2863. }
  2864. .pricing-box-3-top h4 {
  2865. color: #fff;
  2866. font-size: 14px;
  2867. font-weight: 500;
  2868. text-transform: uppercase;
  2869. }
  2870. .pricing-box-3-price {
  2871. background: #f9f9f9;
  2872. padding: 30px 0px;
  2873. }
  2874. .pricing-box-3-price h3 {
  2875. color: #333;
  2876. font-size: 50px;
  2877. font-weight: 500;
  2878. }
  2879. .pricing-box-3-price h3 sup {
  2880. color: #333;
  2881. font-size: 25px;
  2882. font-weight: 500;
  2883. letter-spacing: 3px;
  2884. }
  2885. .pricing-box-3-price h5 {
  2886. color: #999;
  2887. font-size: 14px;
  2888. font-weight: 500;
  2889. letter-spacing: 1px;
  2890. margin-top: -5px;
  2891. }
  2892. .pricing-box-3-info {
  2893. border: 1px solid #f5f5f5;
  2894. }
  2895. .pricing-box-3-prod {
  2896. padding: 30px 10px;
  2897. }
  2898. .pricing-box-3-prod ul li {
  2899. color: #999;
  2900. font-size: 14px;
  2901. font-weight: 500;
  2902. line-height: 1.5;
  2903. border-bottom: 1px solid #eee;
  2904. padding: 10px 0;
  2905. }
  2906. .pricing-box-3-prod ul li:last-child {
  2907. border-bottom: none;
  2908. }
  2909. .pricing-box-3-button {
  2910. position: relative;
  2911. margin-top: 25px;
  2912. }
  2913. .pricing-box-3-button a {
  2914. background: #fff;
  2915. color: #000;
  2916. font-size: 13px;
  2917. display: inline-block;
  2918. border: 2px solid #000;
  2919. font-weight: 500;
  2920. border-radius: 5px;
  2921. padding: 6px 30px;
  2922. }
  2923. .pricing-box-3-button a:hover {
  2924. background: #000;
  2925. color: #fff;
  2926. }
  2927. .pricing-box-3-premium .pricing-box-3-button a {
  2928. background: #000;
  2929. color: #fff;
  2930. font-size: 13px;
  2931. font-weight: 500;
  2932. display: inline-block;
  2933. border: 2px solid #000;
  2934. border-radius: 5px;
  2935. padding: 6px 30px;
  2936. }
  2937. .pricing-box-3-premium .pricing-box-3-button a:hover {
  2938. background: #fff;
  2939. color: #000;
  2940. }
  2941. /*-----------------------------------------
  2942. 16. Newsletter Form
  2943. -------------------------------------------*/
  2944. /*--------------
  2945. Styles 1
  2946. ----------------*/
  2947. .newsletter-form input {
  2948. display: inline-block;
  2949. background: #fff;
  2950. color: #111;
  2951. font-size: 14px;
  2952. font-weight: 500;
  2953. outline: 0;
  2954. border: 2px solid #eee;
  2955. min-width: 270px;
  2956. max-width: 100%;
  2957. -moz-border-radius-topleft: 30px;
  2958. -webkit-border-top-left-radius: 30px;
  2959. border-top-left-radius: 30px;
  2960. -moz-border-radius-bottomleft: 30px;
  2961. -webkit-border-bottom-left-radius: 30px;
  2962. border-bottom-left-radius: 30px;
  2963. padding: 12px 20px;
  2964. }
  2965. .newsletter-form button {
  2966. display: inline-block;
  2967. background: #f7c605;
  2968. color: #fff;
  2969. font-size: 14px;
  2970. font-weight: 500;
  2971. -moz-border-radius-topright: 30px;
  2972. -webkit-border-top-right-radius: 30px;
  2973. border-top-right-radius: 30px;
  2974. -moz-border-radius-bottomright: 30px;
  2975. -webkit-border-bottom-right-radius: 30px;
  2976. border-bottom-right-radius: 30px;
  2977. padding: 14px 20px;
  2978. }
  2979. .newsletter-form button:hover {
  2980. background: #111;
  2981. }
  2982. @media (max-width: 767px) {
  2983. .newsletter-form input {
  2984. border-radius: 30px;
  2985. width: 100%;
  2986. display: block;
  2987. }
  2988. .newsletter-form button {
  2989. border-radius: 30px;
  2990. width: 100%;
  2991. display: block;
  2992. margin-top: 15px;
  2993. }
  2994. }
  2995. /*-----------------------------------------
  2996. 17. Footer
  2997. -------------------------------------------*/
  2998. footer {
  2999. background: #111;
  3000. padding: 60px 0px 20px 0px;
  3001. }
  3002. footer p {
  3003. font-size: 14px;
  3004. color: #999;
  3005. line-height: 1.7;
  3006. }
  3007. footer h3 {
  3008. font-size: 24px;
  3009. font-weight: 400;
  3010. color: #fff;
  3011. line-height: 1;
  3012. }
  3013. footer h3:after {
  3014. content: '';
  3015. display: block;
  3016. width: 70px;
  3017. height: 2px;
  3018. background: #f7c605;
  3019. margin-top: 12px;
  3020. }
  3021. @media (max-width: 991px) {
  3022. footer h3 {
  3023. margin-top: 30px;
  3024. }
  3025. }
  3026. .footer-social-icons ul li {
  3027. display: inline-block;
  3028. background: #333;
  3029. border-radius: 50%;
  3030. color: #fff;
  3031. margin-right: 10px;
  3032. margin-bottom: 5px;
  3033. -webkit-transition-duration: .3s;
  3034. transition-duration: .3s;
  3035. }
  3036. .footer-social-icons ul li a {
  3037. display: block;
  3038. font-size: 15px;
  3039. color: #fff;
  3040. width: 35px;
  3041. height: 35px;
  3042. padding: 11px;
  3043. padding-top: 8px;
  3044. }
  3045. .footer-social-icons ul li:hover {
  3046. background: #f7c605;
  3047. }
  3048. .footer-list {
  3049. margin-top: 20px;
  3050. }
  3051. .footer-list li {
  3052. list-style-type: none;
  3053. color: #aaa;
  3054. padding: 6px 0px;
  3055. }
  3056. .footer-list li a:before {
  3057. content: '\f105';
  3058. font-family: 'FontAwesome';
  3059. color: #aaa;
  3060. padding-right: 8px;
  3061. -webkit-transition-duration: .3s;
  3062. transition-duration: .3s;
  3063. }
  3064. .footer-list li a {
  3065. font-size: 15px;
  3066. font-weight: 400;
  3067. color: #aaa;
  3068. }
  3069. .footer-list li a:hover {
  3070. color: #fff;
  3071. }
  3072. .footer-list li a:hover:before {
  3073. color: #fff;
  3074. }
  3075. .footer-recent-post {
  3076. margin: 15px 0px;
  3077. }
  3078. .footer-recent-post-thumb {
  3079. float: left;
  3080. width: 25%;
  3081. }
  3082. .footer-recent-post-content {
  3083. float: left;
  3084. width: 75%;
  3085. padding-left: 10px;
  3086. }
  3087. .footer-recent-post-content a {
  3088. display: block;
  3089. color: #fff;
  3090. font-size: 15px;
  3091. font-weight: 400;
  3092. margin-top: 5px;
  3093. }
  3094. .footer-recent-post-content span {
  3095. color: #ccc;
  3096. font-size: 13px;
  3097. font-weight: 400;
  3098. }
  3099. .footer-tags a {
  3100. display: inline-block;
  3101. font-size: 11px;
  3102. padding: 10px 15px;
  3103. color: #fff;
  3104. font-weight: 400;
  3105. background: #222;
  3106. margin-top: 4px;
  3107. border-radius: 5px;
  3108. }
  3109. .footer-tags a:hover {
  3110. background: #f7c605;
  3111. }
  3112. .footer-bar {
  3113. border-top: 1px solid rgba(255, 255, 255, .1);
  3114. padding-top: 20px;
  3115. margin-top: 30px;
  3116. }
  3117. .footer-bar span {
  3118. color: #f7c605;
  3119. font-size: 15px;
  3120. font-weight: 400;
  3121. }
  3122. .footer-bar p {
  3123. color: #fff;
  3124. font-size: 15px;
  3125. font-weight: 400;
  3126. }
  3127. /*-----------------------------------------
  3128. 18. Blog
  3129. -------------------------------------------*/
  3130. /*-----------------
  3131. Blog Grid (Style 1)
  3132. -------------------*/
  3133. .blog-grid {
  3134. position: relative;
  3135. background: #fff;
  3136. border: 1px solid #eee;
  3137. border-radius: 5px;
  3138. overflow: hidden;
  3139. -webkit-box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.16);
  3140. -moz-box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.16);
  3141. box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.16);
  3142. margin: 25px 0px 25px 0px;
  3143. }
  3144. .blog-grid img {
  3145. width: 100%;
  3146. }
  3147. .data-box-grid {
  3148. display: block;
  3149. float: right;
  3150. position: absolute;
  3151. text-align: center;
  3152. background: #f7c605;
  3153. left: 15px;
  3154. top: 15px;
  3155. min-width: 60px;
  3156. padding: 5px;
  3157. }
  3158. .data-box-grid h4 {
  3159. color: #fff;
  3160. font-size: 30px;
  3161. font-weight: 400;
  3162. letter-spacing: 2px;
  3163. border-bottom: 1px solid rgba(255, 255, 255, .3);
  3164. margin-bottom: 5px;
  3165. }
  3166. .data-box-grid p {
  3167. color: #fff;
  3168. font-size: 14px;
  3169. font-weight: 400;
  3170. }
  3171. .blog-grid-text {
  3172. padding: 25px;
  3173. }
  3174. .blog-grid-text span {
  3175. color: #f7c605;
  3176. font-size: 13px;
  3177. font-weight: 500;
  3178. letter-spacing: 4px;
  3179. text-transform: uppercase;
  3180. }
  3181. .blog-grid-text h4 {
  3182. color: #111;
  3183. font-size: 20px;
  3184. font-weight: 500;
  3185. margin: 5px 0px 5px 0px
  3186. }
  3187. .blog-grid-text ul li {
  3188. display: inline-block;
  3189. color: #999;
  3190. font-size: 14px;
  3191. font-weight: 500;
  3192. margin: 10px 25px 10px 0px;
  3193. }
  3194. .blog-grid-text ul li i {
  3195. color: #f7c605;
  3196. font-size: 14px;
  3197. font-weight: 500;
  3198. margin-right: 10px;
  3199. }
  3200. .blog-grid-text p {
  3201. color: #999;
  3202. font-size: 15px;
  3203. font-weight: 400;
  3204. line-height: 170%;
  3205. border-bottom: 1px solid #ececec;
  3206. padding-bottom: 15px;
  3207. }
  3208. /*------------------
  3209. Blog Grid (Style 2)
  3210. --------------------*/
  3211. .owl-carousel .blog-grid-simple {
  3212. margin: 10px 15px 25px 15px;
  3213. }
  3214. .blog-grid-simple {
  3215. position: relative;
  3216. background: #fff;
  3217. border-radius: 5px;
  3218. border: 1px solid #ececec;
  3219. -webkit-box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.16);
  3220. -moz-box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.16);
  3221. box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.16);
  3222. padding: 30px;
  3223. margin: 15px 0px;
  3224. }
  3225. .blog-grid-simple h4 {
  3226. color: #111;
  3227. font-size: 21px;
  3228. font-weight: 500;
  3229. margin-bottom: 15px;
  3230. }
  3231. .blog-grid-simple h4 a {
  3232. color: #111;
  3233. font-size: 20px;
  3234. font-weight: 500;
  3235. margin-bottom: 15px;
  3236. }
  3237. .blog-grid-simple h4 a:before {
  3238. content: '\f0c1';
  3239. font-family: "FontAwesome";
  3240. color: #f7c605;
  3241. margin-right: 10px;
  3242. -webkit-transition-duration: .3s;
  3243. transition-duration: .3s;
  3244. }
  3245. .blog-grid-simple h4 a:hover {
  3246. color: #f7c605;
  3247. }
  3248. .blog-grid-simple p {
  3249. color: #aaa;
  3250. font-size: 15px;
  3251. font-weight: 400;
  3252. }
  3253. .blog-grid-simple-date i {
  3254. color: #888;
  3255. font-size: 20px;
  3256. }
  3257. .blog-grid-simple-date h5 {
  3258. color: #888;
  3259. font-size: 13px;
  3260. margin-top: 3px;
  3261. }
  3262. .blog-grid-simple-content {
  3263. border-top: 1px solid #ececec;
  3264. padding-top: 20px;
  3265. margin-top: 15px;
  3266. }
  3267. .blog-grid-simple-content a {
  3268. display: inline-block;
  3269. color: #f7c605;
  3270. font-weight: 600;
  3271. font-size: 14px;
  3272. margin-top: 2px;
  3273. }
  3274. .blog-grid-simple-content a:after {
  3275. content: '\f105';
  3276. font-size: 14px;
  3277. font-family: "FontAwesome";
  3278. color: #f7c605;
  3279. margin-left: 10px;
  3280. -webkit-transition-duration: .3s;
  3281. transition-duration: .3s;
  3282. }
  3283. @media (max-width: 767px) {
  3284. .blog-grid-simple-content a:after {
  3285. display: none;
  3286. }
  3287. }
  3288. .blog-grid-simple-content a:hover {
  3289. color: #111;
  3290. }
  3291. .blog-grid-simple-content a:hover:after {
  3292. color: #111;
  3293. }
  3294. /*------------------
  3295. Blog Grid (Style 3)
  3296. --------------------*/
  3297. .blog-box {
  3298. position: relative;
  3299. margin: 20px 0px;
  3300. }
  3301. .blog-box-img {
  3302. margin-bottom: 50px;
  3303. }
  3304. .blog-box-img img {
  3305. width: 100%;
  3306. border-radius: 5px;
  3307. }
  3308. .blog-box-text {
  3309. padding: 0px 20px;
  3310. }
  3311. .blog-box-text .blog-box-date {
  3312. display: inline-block;
  3313. background: #f7c605;
  3314. border-radius: 3px;
  3315. padding: 10px 25px;
  3316. position: absolute;
  3317. bottom: 230px;
  3318. }
  3319. .blog-box-text .blog-box-date h4 {
  3320. color: #fff;
  3321. font-size: 30px;
  3322. font-weight: 500;
  3323. padding: 0px;
  3324. }
  3325. .blog-box-text .blog-box-date h5 {
  3326. color: #fff;
  3327. font-size: 18px;
  3328. font-weight: 500;
  3329. padding: 0px;
  3330. }
  3331. .blog-box-text h6 {
  3332. color: #999;
  3333. font-size: 13px;
  3334. font-weight: 500;
  3335. letter-spacing: 0.5px;
  3336. }
  3337. .blog-box-text a h4 {
  3338. color: #333;
  3339. font-size: 23px;
  3340. font-weight: 500;
  3341. margin: 12px 0px;
  3342. -webkit-transition-duration: .3s;
  3343. transition-duration: .3s;
  3344. }
  3345. .blog-box-text a h4:hover {
  3346. color: #f7c605;
  3347. }
  3348. .blog-box-text p {
  3349. color: #777;
  3350. font-size: 15px;
  3351. font-weight: 400;
  3352. line-height: 1.6;
  3353. }
  3354. @media (max-width: 992px) {
  3355. .blog-box-text .blog-box-date {
  3356. position: absolute;
  3357. bottom: 300px;
  3358. }
  3359. }
  3360. @media (max-width: 767px) {
  3361. .blog-box-text .blog-box-date {
  3362. position: absolute;
  3363. bottom: 250px;
  3364. }
  3365. }
  3366. @media (max-width: 436px) {
  3367. .blog-box-text .blog-box-date {
  3368. position: absolute;
  3369. bottom: 320px;
  3370. }
  3371. }
  3372. /*------------------
  3373. Blog List
  3374. --------------------*/
  3375. .blog-list-simple {
  3376. margin: 20px 0px 30px 0px;
  3377. }
  3378. .data-box-simple {
  3379. display: block;
  3380. float: right;
  3381. position: absolute;
  3382. text-align: center;
  3383. background: #f7c605;
  3384. left: 20px;
  3385. top: 5px;
  3386. min-width: 60px;
  3387. padding: 5px;
  3388. }
  3389. .data-box-simple h4 {
  3390. color: #fff;
  3391. font-size: 30px;
  3392. font-weight: 400;
  3393. letter-spacing: 2px;
  3394. border-bottom: 1px solid #fff;
  3395. margin-bottom: 5px;
  3396. }
  3397. .data-box-simple p {
  3398. color: #fff;
  3399. font-size: 14px;
  3400. font-weight: 400;
  3401. }
  3402. .blog-list-simple-text {
  3403. border-bottom: 1px solid #e8e8e8;
  3404. padding-bottom: 25px;
  3405. }
  3406. .blog-list-simple-text p {
  3407. font-size: 14px;
  3408. color: #aaa;
  3409. line-height: 1.9;
  3410. }
  3411. .blog-list-simple-text span {
  3412. color: #f7c605;
  3413. font-size: 13px;
  3414. font-weight: 500;
  3415. letter-spacing: 4px;
  3416. text-transform: uppercase;
  3417. }
  3418. .blog-list-simple-text h4 {
  3419. color: #111;
  3420. font-size: 20px;
  3421. font-weight: 500;
  3422. margin: 5px 0px 10px 0px;
  3423. }
  3424. .blog-list-simple-text ul {
  3425. margin: 10px 0px;
  3426. }
  3427. .blog-list-simple-text ul li {
  3428. color: #999;
  3429. font-size: 14px;
  3430. font-weight: 500;
  3431. padding: 3px 0px;
  3432. }
  3433. .blog-list-simple-text ul li i {
  3434. color: #f7c605;
  3435. margin-right: 10px;
  3436. font-size: 14px;
  3437. }
  3438. /*------------------
  3439. Blog Post
  3440. --------------------*/
  3441. .blog-list-left {
  3442. margin: 30px 0px 20px 0px;
  3443. }
  3444. .blog-title-box h2 {
  3445. color: #111;
  3446. font-size: 27px;
  3447. font-weight: 500;
  3448. margin: 20px 0px;
  3449. }
  3450. .blog-title-box:after {
  3451. content: '';
  3452. display: block;
  3453. width: 300px;
  3454. max-width: 100%;
  3455. height: 2px;
  3456. background: #ececec;
  3457. margin-top: 10px;
  3458. margin: 15px 0px;
  3459. }
  3460. .blog-title-box span {
  3461. color: #999;
  3462. font-weight: 400;
  3463. margin-right: 40px;
  3464. }
  3465. .blog-title-box span i {
  3466. color: #f7c605;
  3467. font-size: 16px;
  3468. margin-right: 8px;
  3469. }
  3470. .blog-post-content p {
  3471. color: #999;
  3472. font-size: 15px;
  3473. font-weight: 400;
  3474. line-height: 180%;
  3475. margin: 15px 0px 15px 0px;
  3476. }
  3477. .blockquote {
  3478. background: #f1f1f1;
  3479. border-left: 4px solid #f7c605;
  3480. font-size: 16px;
  3481. font-weight: 500;
  3482. margin: 25px 0px 25px 0px;
  3483. padding: 20px 30px 30px 30px;
  3484. }
  3485. .blockquote p {
  3486. color: #111;
  3487. font-size: 15px;
  3488. font-weight: 500;
  3489. line-height: 190%;
  3490. letter-spacing: 0.5px;
  3491. }
  3492. .blockquote h4 {
  3493. color: #111;
  3494. font-size: 20px;
  3495. font-weight: 400;
  3496. letter-spacing: 0.5px;
  3497. }
  3498. .data-box {
  3499. display: block;
  3500. float: right;
  3501. position: relative;
  3502. text-align: center;
  3503. background: #f7c605;
  3504. right: 20px;
  3505. top: -95px;
  3506. min-width: 60px;
  3507. padding: 5px;
  3508. }
  3509. .data-box h4 {
  3510. color: #fff;
  3511. font-size: 30px;
  3512. font-weight: 400;
  3513. letter-spacing: 2px;
  3514. border-bottom: 1px solid #fff;
  3515. margin-bottom: 5px;
  3516. }
  3517. .data-box strong {
  3518. color: #fff;
  3519. font-size: 14px;
  3520. font-weight: 400;
  3521. }
  3522. /*search START*/
  3523. #search-input {
  3524. padding: 0px;
  3525. border: none;
  3526. border: solid 1px #e8e8e8;
  3527. border-radius: 5px;
  3528. background: #fff;
  3529. padding: 5px;
  3530. margin-top: 30px;
  3531. }
  3532. #search-input input {
  3533. font-weight: 400;
  3534. border: 0;
  3535. border-radius: 10px;
  3536. box-shadow: none;
  3537. }
  3538. #search-input button {
  3539. margin: 2px 0 0 0;
  3540. background: none;
  3541. box-shadow: none;
  3542. border: 0;
  3543. outline: none !important;
  3544. padding: 0 11px 0 13px;
  3545. border-left: solid 1px #e8e8e8;
  3546. }
  3547. #search-input .glyphicon-search {
  3548. font-size: 13px;
  3549. color: #111;
  3550. }
  3551. .blog-list-left-heading {
  3552. margin: 30px 0px;
  3553. padding-top: 15px;
  3554. }
  3555. .blog-list-left-heading:after {
  3556. content: '';
  3557. display: block;
  3558. width: 80px;
  3559. height: 2px;
  3560. background: #f7c605;
  3561. margin-top: 10px;
  3562. margin: 10px 0px;
  3563. }
  3564. .blog-list-right h4 {
  3565. color: #111;
  3566. font-size: 20px;
  3567. font-weight: 400;
  3568. margin: 0px 0px 10px 0px;
  3569. }
  3570. /*Category*/
  3571. .blog-categories ul {
  3572. margin-top: 20px;
  3573. padding: 0px;
  3574. }
  3575. .blog-categories ul li {
  3576. display: block;
  3577. position: relative;
  3578. list-style-type: none;
  3579. border-bottom: 1px solid #ececec;
  3580. }
  3581. .blog-categories ul li a {
  3582. display: block;
  3583. font-size: 15px;
  3584. font-weight: 500;
  3585. padding: 18px 0px 18px 0px;
  3586. color: #333;
  3587. }
  3588. .blog-categories ul li a:before {
  3589. content: "\f00c";
  3590. font-family: FontAwesome;
  3591. color: #333;
  3592. font-size: 14px;
  3593. margin-right: 10px;
  3594. -webkit-transition-duration: .3s;
  3595. transition-duration: .3s;
  3596. }
  3597. .blog-categories ul li a:hover {
  3598. color: #f7c605;
  3599. }
  3600. .blog-categories ul li a:hover:before {
  3601. margin-right: 15px;
  3602. color: #f7c605;
  3603. }
  3604. /* Latest News*/
  3605. .latest-posts-img img {
  3606. border-radius: 50px;
  3607. padding: 2px;
  3608. border: 2px solid #ececec;
  3609. }
  3610. .latest-posts {
  3611. margin: 5px 0px;
  3612. padding: 15px 0px;
  3613. border-bottom: 1px solid #ececec;
  3614. }
  3615. @media (max-width: 767px) {
  3616. .latest-posts-text {
  3617. margin-top: 10px;
  3618. }
  3619. .blog-post-left {
  3620. margin-top: 20px;
  3621. }
  3622. }
  3623. .latest-posts-text a {
  3624. display: block;
  3625. font-size: 14px;
  3626. font-weight: 500;
  3627. color: #111;
  3628. margin-bottom: 10px;
  3629. margin-top: 10px;
  3630. -webkit-transition-duration: 0.3s;
  3631. transition-duration: 0.3s;
  3632. }
  3633. .latest-posts-text a:hover {
  3634. color: #f7c605;
  3635. }
  3636. .latest-posts-text span {
  3637. font-size: 14px;
  3638. font-weight: 500;
  3639. color: #f7c605;
  3640. }
  3641. /*Archives*/
  3642. .archives ul {
  3643. margin-top: 20px;
  3644. padding: 0px;
  3645. }
  3646. .archives ul li {
  3647. list-style-type: none;
  3648. border-bottom: 1px solid #ececec;
  3649. padding: 13px 0px 13px 0px;
  3650. }
  3651. .archives ul li a {
  3652. color: #444;
  3653. font-size: 14px;
  3654. font-weight: 500;
  3655. -webkit-transition-duration: 0.3s;
  3656. transition-duration: 0.3s;
  3657. }
  3658. .archives ul li a:hover {
  3659. color: #f7c605;
  3660. font-size: 14px;
  3661. }
  3662. .archives ul li span {
  3663. float: right;
  3664. color: #f7c605;
  3665. font-size: 13px;
  3666. font-weight: 500;
  3667. }
  3668. /*Share Links*/
  3669. .blog-share {
  3670. list-style-type: none;
  3671. margin-top: 20px;
  3672. }
  3673. .blog-share ul {
  3674. background: #f1f1f1;
  3675. padding: 15px;
  3676. border-radius: 5px;
  3677. }
  3678. .blog-share ul li {
  3679. display: inline-block;
  3680. padding-right: 20px;
  3681. }
  3682. .blog-share ul li a {
  3683. color: #6b6b6b;
  3684. font-size: 15px;
  3685. }
  3686. .blog-share ul li a:hover {
  3687. color: #f7c605;
  3688. }
  3689. /*comment form*/
  3690. .comment-block {
  3691. background: #fff;
  3692. border-radius: 5px;
  3693. border: 1px solid #eee;
  3694. padding: 20px;
  3695. }
  3696. .blog-comments {
  3697. background: #f7f7f7;
  3698. border-radius: 5px;
  3699. padding: 30px;
  3700. }
  3701. .blog-comments h3 {
  3702. font-size: 24px;
  3703. font-weight: 500;
  3704. color: #111;
  3705. margin-top: 30px;
  3706. }
  3707. .blog-comment-user {
  3708. border-bottom: 1px solid #e8e8e8;
  3709. padding-top: 25px;
  3710. padding-bottom: 25px;
  3711. }
  3712. .blog-comment-user img {
  3713. border-radius: 5px;
  3714. }
  3715. .blog-comment-user h6 {
  3716. display: inline-block;
  3717. color: #111;
  3718. font-size: 16px;
  3719. margin: 0px;
  3720. margin-right: 15px;
  3721. }
  3722. .blog-comment-user strong {
  3723. color: #f7c605;
  3724. font-size: 12px;
  3725. font-weight: 500;
  3726. }
  3727. .blog-comment-user p {
  3728. color: #777;
  3729. font-size: 13px;
  3730. font-weight: 500;
  3731. line-height: 170%;
  3732. margin-top: 10px;
  3733. }
  3734. /*form*/
  3735. .comment-form input, .comment-form textarea {
  3736. font-weight: 500 !important;
  3737. border-radius: 5px;
  3738. font-size: 13px;
  3739. border: 1px solid #ececec;
  3740. background: #fff;
  3741. color: #111 !important;
  3742. outline: none;
  3743. width: 100%;
  3744. padding: 12px;
  3745. margin-top: 30px;
  3746. transition: .3s;
  3747. }
  3748. .comment-form input:focus {
  3749. border-color: #cecece;
  3750. }
  3751. .comment-form textarea {
  3752. overflow: hidden;
  3753. color: #999;
  3754. font-size: 13px;
  3755. font-weight: 500;
  3756. border: none;
  3757. border: 1px solid #ececec;
  3758. border-radius: 5px;
  3759. width: 100%;
  3760. margin-top: 30px;
  3761. padding: 13px 15px 13px 15px;
  3762. -webkit-transition-duration: .3s;
  3763. transition-duration: .3s;
  3764. min-height: 140px
  3765. }
  3766. .comment-form textarea:focus {
  3767. border-color: #cecece;
  3768. }
  3769. /*-----------------------------------------
  3770. 19. Testmonials
  3771. -------------------------------------------*/
  3772. /*--------------
  3773. Style 1 (Carousel)
  3774. ----------------*/
  3775. .testmonial-single {
  3776. padding: 30px 50px;
  3777. }
  3778. @media (max-width: 767px) {
  3779. .testmonial-single {
  3780. padding: 30px 0px;
  3781. }
  3782. }
  3783. .testmonial-single p:before {
  3784. margin: auto;
  3785. content: "\f10d";
  3786. font-family: "FontAwesome";
  3787. color: #f7c605;
  3788. font-size: 23px;
  3789. display: block;
  3790. margin-bottom: 15px;
  3791. }
  3792. .testmonial-single p {
  3793. text-align: center;
  3794. font-style: italic;
  3795. color: #666;
  3796. font-size: 17px;
  3797. font-weight: 500;
  3798. line-height: 1.9;
  3799. }
  3800. .testmonial-single h4 {
  3801. color: #111;
  3802. font-size: 22px;
  3803. font-weight: 500;
  3804. text-align: center;
  3805. margin-top: 20px;
  3806. }
  3807. .testmonial-single h6 {
  3808. color: #aaa;
  3809. font-size: 15px;
  3810. font-weight: 500;
  3811. text-align: center;
  3812. }
  3813. /*--------------
  3814. Style 2
  3815. ----------------*/
  3816. .testmonial-box {
  3817. position: relative;
  3818. background: #fff;
  3819. border-radius: 5px;
  3820. padding: 25px;
  3821. border: 1px solid #ececec;
  3822. margin: 15px 0px;
  3823. -webkit-transition-duration: .3s;
  3824. transition-duration: .3s;
  3825. -webkit-box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.16);
  3826. -moz-box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.16);
  3827. box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.16);
  3828. }
  3829. .testmonial-box img {
  3830. border: 2px solid #ececec;
  3831. border-radius: 50%;
  3832. padding: 2px;
  3833. }
  3834. .testmonial-box h5 {
  3835. color: #111;
  3836. font-size: 18px;
  3837. font-weight: 500;
  3838. }
  3839. .testmonial-box span {
  3840. color: #999;
  3841. font-size: 13px;
  3842. font-weight: 500;
  3843. }
  3844. .testmonial-box span:before {
  3845. content: '●';
  3846. color: #f7c605;
  3847. font-size: 15px;
  3848. margin-right: 5px;
  3849. }
  3850. .testmonial-box p {
  3851. font-size: 15px;
  3852. color: #999;
  3853. line-height: 1.7;
  3854. margin-top: 10px;
  3855. }
  3856. /*--------------
  3857. Style 3(Carousel)
  3858. ----------------*/
  3859. .testmonial-box-2 {
  3860. position: relative;
  3861. display: block;
  3862. background: #fff;
  3863. border-radius: 5px;
  3864. box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.07);
  3865. padding: 25px;
  3866. margin: 50px 15px 30px 15px;
  3867. }
  3868. .testmonial-box-2 img {
  3869. width: 80px !important;
  3870. height: 80px;
  3871. border: 3px solid #fff;
  3872. border-radius: 50%;
  3873. margin: -72px 0px 15px 0px;
  3874. }
  3875. .testmonial-box-2 h4 {
  3876. font-size: 19px;
  3877. font-weight: 500;
  3878. margin-bottom: 0px;
  3879. }
  3880. .testmonial-box-2 strong {
  3881. font-size: 14px;
  3882. color: #f7c605;
  3883. font-weight: 500;
  3884. }
  3885. .testmonial-box-2 p {
  3886. font-size: 15px;
  3887. color: #999;
  3888. font-style: italic;
  3889. line-height: 1.6;
  3890. margin-top: 8px;
  3891. margin-bottom: 0px;
  3892. }
  3893. .testmonial-rating {
  3894. margin-top: 10px;
  3895. }
  3896. /*--------------
  3897. Style 4
  3898. ----------------*/
  3899. .testmonial-box-3 {
  3900. padding: 60px 0px 30px 0px;
  3901. }
  3902. .testmonial-box-3 h4:before {
  3903. content: "\f10d";
  3904. font-family: 'FontAwesome';
  3905. font-size: 30px;
  3906. color: #f7c605;
  3907. display: block;
  3908. margin-bottom: 15px;
  3909. }
  3910. .testmonial-box-3 h4 {
  3911. color: #111;
  3912. font-size: 22px;
  3913. font-weight: 600;
  3914. }
  3915. .testmonial-box-3 h5 {
  3916. font-size: 17px;
  3917. font-weight: 500;
  3918. margin-bottom: 0px;
  3919. margin-top: 20px;
  3920. }
  3921. .testmonial-box-3 h5 span {
  3922. color: #999;
  3923. }
  3924. .testmonial-box-3 p {
  3925. font-size: 15px;
  3926. font-style: italic;
  3927. color: #999;
  3928. line-height: 1.7;
  3929. margin-top: 20px;
  3930. }
  3931. .testmonial-box-3-rating {
  3932. margin-top: 15px;
  3933. }
  3934. .testmonial-box-3-rating i {
  3935. font-size: 18px;
  3936. color: #f7c605;
  3937. }
  3938. /*--------------
  3939. Style 5
  3940. ----------------*/
  3941. .testmonial-item {
  3942. position: relative;
  3943. display: inline-block;
  3944. }
  3945. .testmonial-item-bxx {
  3946. position: relative;
  3947. display: inline-block;
  3948. text-align: center;
  3949. padding: 30px 40px;
  3950. border: 1px solid #eee;
  3951. border-radius: 5px;
  3952. background: #fff;
  3953. margin: 30px 0px;
  3954. -webkit-transition-duration: .3s;
  3955. transition-duration: .3s;
  3956. }
  3957. .testmonial-arrow {
  3958. position: absolute;
  3959. bottom: -25px;
  3960. left: 50px;
  3961. width: 0;
  3962. height: 0;
  3963. border-style: solid;
  3964. border-width: 37px 20px 0 0;
  3965. border-color: #f7c605 transparent transparent transparent;
  3966. display: none;
  3967. }
  3968. .testmonial-item-bxx-img {
  3969. opacity: 0;
  3970. }
  3971. .testmonial-item-img {
  3972. display: inline-block;
  3973. margin-left: 10px;
  3974. margin-top: 10px;
  3975. }
  3976. .testmonial-item-img img {
  3977. border-radius: 100%;
  3978. width: 75px !important;
  3979. height: 75px;
  3980. -webkit-transition-duration: .3s;
  3981. transition-duration: .3s;
  3982. }
  3983. .testmonial-item-name {
  3984. display: inline-block;
  3985. transform: translateY(-18px);
  3986. margin-left: 15px;
  3987. }
  3988. .testmonial-item h4 {
  3989. color: #333;
  3990. font-size: 18px;
  3991. font-weight: 500;
  3992. margin: 0px 0px 2px 0px;
  3993. }
  3994. .testmonial-item span {
  3995. color: #f7c605;
  3996. font-size: 13px;
  3997. font-weight: 500;
  3998. }
  3999. .testmonial-item p {
  4000. color: #999;
  4001. font-size: 14px;
  4002. text-align: left;
  4003. font-weight: 400;
  4004. line-height: 1.6;
  4005. }
  4006. .testmonial-box-4-img img {
  4007. width: 150px !important;
  4008. height: 150px;
  4009. border: 3px solid #fff;
  4010. border-radius: 50%;
  4011. margin: 15px auto 0 auto;
  4012. }
  4013. .testmonial-box-4-text {
  4014. padding: 15px 15px 15px 20px;
  4015. }
  4016. .testmonial-box-4-text:before {
  4017. position: absolute;
  4018. left: 0px;
  4019. content: "\f10d";
  4020. font-family: 'FontAwesome';
  4021. font-size: 22px;
  4022. color: #f7c605;
  4023. display: inline-block;
  4024. margin-bottom: 15px;
  4025. }
  4026. .testmonial-box-4-text p {
  4027. color: #999;
  4028. font-size: 15px;
  4029. font-weight: 400;
  4030. line-height: 1.5;
  4031. }
  4032. .testmonial-box-4-text h4 {
  4033. color: #333;
  4034. font-size: 20px;
  4035. font-weight: 500;
  4036. margin-top: 20px;
  4037. }
  4038. .testmonial-box-4-text h5 {
  4039. color: #999;
  4040. font-size: 15px;
  4041. font-weight: 500;
  4042. margin-top: 3px;
  4043. }
  4044. @media (max-width: 575px) {
  4045. .testmonial-box-4-img {
  4046. margin-left: 10px;
  4047. }
  4048. .testmonial-box-4-img img {
  4049. width: 90px !important;
  4050. height: 90px;
  4051. border: 3px solid #fff;
  4052. border-radius: 50%;
  4053. }
  4054. }
  4055. .owl-item.center > div .testmonial-item-bxx {
  4056. background: #f7c605;
  4057. border: 1px solid #f7c605;
  4058. cursor: auto;
  4059. box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.16);
  4060. }
  4061. .owl-item.center > div .testmonial-item-bxx-img {
  4062. opacity: 1;
  4063. }
  4064. .owl-item.center > div .testmonial-arrow {
  4065. display: block;
  4066. }
  4067. .owl-item.center > div p {
  4068. color: #fff;
  4069. }
  4070. /*-----------------------------------------
  4071. 20. Cases
  4072. -------------------------------------------*/
  4073. .case-block {
  4074. position: relative;
  4075. background: #fff;
  4076. border: 1px solid #ececec;
  4077. border-radius: 5px;
  4078. overflow: hidden;
  4079. margin: 15px 0px;
  4080. -webkit-transition-duration: .3s;
  4081. transition-duration: .3s;
  4082. -webkit-box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.16);
  4083. -moz-box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.16);
  4084. box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.16);
  4085. }
  4086. .case-block:hover {
  4087. -webkit-box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.30);
  4088. -moz-box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.30);
  4089. box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.30);
  4090. }
  4091. .case-block img {
  4092. width: 100%;
  4093. }
  4094. .case-block-inner {
  4095. padding: 25px 25px 20px 10px;
  4096. }
  4097. @media (max-width: 767px) {
  4098. .case-block-inner {
  4099. padding: 25px;
  4100. }
  4101. }
  4102. .case-block h4 {
  4103. color: #111;
  4104. font-size: 18px;
  4105. font-weight: 500;
  4106. }
  4107. .case-block h4:after {
  4108. content: '';
  4109. display: block;
  4110. width: 80px;
  4111. height: 2px;
  4112. background: #f7c605;
  4113. margin-top: 15px;
  4114. margin-bottom: 15px;
  4115. -webkit-transition-duration: .4s;
  4116. transition-duration: .4s;
  4117. }
  4118. .case-block p {
  4119. color: #aaa;
  4120. font-size: 15px;
  4121. font-weight: 400;
  4122. margin-bottom: 12px;
  4123. }
  4124. .case-block-inner a {
  4125. font-size: 15px;
  4126. font-weight: 500;
  4127. color: #f7c605;
  4128. }
  4129. .case-block-inner a:after {
  4130. content: '\f0da';
  4131. font-size: 15px;
  4132. font-family: "FontAwesome";
  4133. color: #f7c605;
  4134. margin-left: 10px;
  4135. -webkit-transition-duration: .3s;
  4136. transition-duration: .3s;
  4137. }
  4138. .case-block-inner a:hover {
  4139. color: #111;
  4140. }
  4141. .case-block-inner a:hover:after {
  4142. color: #111;
  4143. }
  4144. /*-----------------------------------------
  4145. 21. Partners (also Team)
  4146. -------------------------------------------*/
  4147. .partner-box {
  4148. position: relative;
  4149. overflow: hidden;
  4150. background: #fff;
  4151. border-radius: 5px;
  4152. -webkit-box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.16);
  4153. -moz-box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.16);
  4154. box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.16);
  4155. border: 1px solid #ececec;
  4156. margin: 15px 0px;
  4157. }
  4158. .partner-box img {
  4159. width: 100%;
  4160. height: 100%;
  4161. object-fit: cover;
  4162. }
  4163. .partner-img {
  4164. height: 100%;
  4165. }
  4166. .partner-text {
  4167. padding: 25px 40px 25px 0px;
  4168. }
  4169. @media (max-width: 991px) {
  4170. .partner-text {
  4171. padding: 25px;
  4172. }
  4173. }
  4174. .partner-text span {
  4175. color: #f7c605;
  4176. font-size: 13px;
  4177. font-weight: 500;
  4178. letter-spacing: 3px;
  4179. text-transform: uppercase;
  4180. }
  4181. .partner-box:hover .partner-text span {
  4182. color: #999;
  4183. }
  4184. .partner-text h4 {
  4185. color: #111;
  4186. font-size: 21px;
  4187. font-weight: 600;
  4188. margin: 5px 0px;
  4189. }
  4190. .partner-text h4:after {
  4191. content: '';
  4192. display: block;
  4193. width: 40px;
  4194. height: 2px;
  4195. background: #f7c605;
  4196. margin-top: 10px;
  4197. -webkit-transition-duration: .4s;
  4198. transition-duration: .4s;
  4199. }
  4200. .partner-box:hover .partner-text h4:after {
  4201. width: 80px;
  4202. }
  4203. .partner-text p {
  4204. color: #999;
  4205. font-size: 15px;
  4206. font-weight: 400;
  4207. margin-top: 15px;
  4208. line-height: 170%;
  4209. }
  4210. .partner-signature img {
  4211. width: 120px;
  4212. height: 50px;
  4213. margin-top: 15px;
  4214. }
  4215. /*-----------------------------------------
  4216. 22. Feedback Form
  4217. -------------------------------------------*/
  4218. .feedback-box {
  4219. position: relative;
  4220. background: #f9f9f9;
  4221. border-radius: 5px;
  4222. -webkit-box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.16);
  4223. -moz-box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.16);
  4224. box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.16);
  4225. border: 1px solid #ececec;
  4226. padding: 25px;
  4227. margin: 10px 0px;
  4228. }
  4229. .feedback-box h5 {
  4230. color: #555;
  4231. font-size: 14px;
  4232. font-weight: 500;
  4233. }
  4234. .feedback-box h5:before {
  4235. content: '●';
  4236. color: #f7c605;
  4237. font-size: 16px;
  4238. margin-right: 10px;
  4239. }
  4240. .feedback-form input {
  4241. color: #111;
  4242. font-weight: 400;
  4243. width: 100%;
  4244. border: 1px solid #ececec;
  4245. border-radius: 5px;
  4246. padding: 12px 15px;
  4247. margin: 15px 0px;
  4248. -webkit-transition-duration: .3s;
  4249. transition-duration: .3s;
  4250. }
  4251. .feedback-form input:focus {
  4252. border-color: #ccc;
  4253. }
  4254. .feedback-form textarea {
  4255. color: #111;
  4256. font-weight: 400;
  4257. width: 100%;
  4258. min-height: 100px;
  4259. border: 1px solid #ececec;
  4260. border-radius: 5px;
  4261. padding: 12px 15px;
  4262. margin: 15px 0px;
  4263. -webkit-transition-duration: .3s;
  4264. transition-duration: .3s;
  4265. }
  4266. .feedback-form textarea:focus {
  4267. border-color: #ccc;
  4268. }
  4269. .feedback-form button {
  4270. display: inline-block;
  4271. background: #f7c605;
  4272. color: #fff;
  4273. font-size: 14px;
  4274. font-weight: 400;
  4275. padding: 11px 20px 11px 20px;
  4276. border-radius: 50px;
  4277. -webkit-transition: all .4s ease;
  4278. -moz-transition: all .4s ease;
  4279. transition: all .4s ease;
  4280. margin-top: 5px;
  4281. }
  4282. .feedback-form button:hover {
  4283. background: #111;
  4284. }
  4285. /*-----------------------------------------
  4286. 23. Team
  4287. -------------------------------------------*/
  4288. /*--------------
  4289. Style 1
  4290. ----------------*/
  4291. .team-member {
  4292. overflow: hidden;
  4293. background: #fff;
  4294. border: 1px solid #ececec;
  4295. border-radius: 5px;
  4296. -webkit-box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.16);
  4297. -moz-box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.16);
  4298. box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.16);
  4299. margin: 20px 0px;
  4300. -webkit-transition-duration: 0.3s;
  4301. transition-duration: 0.3s;
  4302. }
  4303. .team-member:hover {
  4304. -webkit-box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.16);
  4305. -moz-box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.16);
  4306. box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.28);
  4307. }
  4308. .team-member-img {
  4309. width: 100%;
  4310. height: auto;
  4311. }
  4312. .team-member-img img {
  4313. width: 100%;
  4314. }
  4315. .team-member-text {
  4316. text-align: center;
  4317. padding: 20px 50px;
  4318. }
  4319. .team-member-text h4 {
  4320. color: #111;
  4321. font-size: 22px;
  4322. font-weight: 500;
  4323. margin-bottom: 3px;
  4324. -webkit-transition-duration: .6s;
  4325. transition-duration: .6s;
  4326. }
  4327. .team-member:hover .team-member-text h4 {
  4328. color: #f7c605;
  4329. }
  4330. .team-member-text span {
  4331. color: #f7c605;
  4332. font-size: 15px;
  4333. font-weight: 500;
  4334. letter-spacing: 2px;
  4335. }
  4336. .team-member-text p {
  4337. color: #999;
  4338. font-size: 14px;
  4339. font-weight: 400;
  4340. line-height: 170%;
  4341. margin-top: 20px;
  4342. }
  4343. .team-member-text ul {
  4344. margin-top: 15px;
  4345. padding: 8px 0px 8px 0px;
  4346. }
  4347. .team-member-text ul li {
  4348. display: inline-block;
  4349. padding: 0px 10px;
  4350. }
  4351. .team-member-text ul li a i {
  4352. color: #555;
  4353. font-size: 17px;
  4354. -webkit-transition-duration: .4s;
  4355. transition-duration: .4s;
  4356. }
  4357. .team-member-text ul li a i:hover {
  4358. color: #f7c605;
  4359. }
  4360. @media screen and (max-width: 994px) {
  4361. .team-member-text {
  4362. padding: 20px 10px;
  4363. }
  4364. }
  4365. /*--------------
  4366. Style 2
  4367. ----------------*/
  4368. .team-box {
  4369. overflow: hidden;
  4370. background: #fff;
  4371. border-radius: 5px;
  4372. border: 1px solid #ececec;
  4373. margin: 15px 0px;
  4374. padding: 10px;
  4375. }
  4376. .team-box:hover h4:after {
  4377. width: 90px;
  4378. -webkit-transition-duration: .3s;
  4379. transition-duration: .3s;
  4380. }
  4381. .team-box img {
  4382. margin-bottom: 5px;
  4383. }
  4384. .team-info {
  4385. padding: 10px;
  4386. }
  4387. .team-info span {
  4388. color: #f7c605;
  4389. font-size: 13px;
  4390. font-weight: 500;
  4391. letter-spacing: 4px;
  4392. text-transform: uppercase;
  4393. }
  4394. .team-info h4 {
  4395. color: #111;
  4396. font-size: 20px;
  4397. font-weight: 500;
  4398. margin: 5px 0px;
  4399. }
  4400. .team-info h4 a {
  4401. color: #111;
  4402. font-size: 20px;
  4403. font-weight: 500;
  4404. margin: 5px 0px;
  4405. }
  4406. .team-info h4 a:hover {
  4407. color: #f7c605;
  4408. }
  4409. .team-info h4:after {
  4410. content: '';
  4411. display: block;
  4412. width: 50px;
  4413. height: 2px;
  4414. background: #f7c605;
  4415. margin: 10px 0px 0px 0px;
  4416. -webkit-transition-duration: .3s;
  4417. transition-duration: .3s;
  4418. }
  4419. .team-info p {
  4420. color: #aaa;
  4421. font-size: 15px;
  4422. font-weight: 400;
  4423. margin: 15px 0px;
  4424. margin-bottom: 10px;
  4425. }
  4426. .team-social-icons {
  4427. text-align: left;
  4428. }
  4429. .team-social-icons ul {
  4430. background: #fff;
  4431. padding: 0px 15px;
  4432. border-radius: 5px;
  4433. margin-bottom: 5px;
  4434. }
  4435. .team-social-icons ul li {
  4436. display: inline-block;
  4437. padding-right: 20px;
  4438. }
  4439. .team-social-icons ul li a {
  4440. color: #4b4b4b;
  4441. font-size: 15px;
  4442. }
  4443. .team-social-icons ul li a:hover {
  4444. color: #f7c605;
  4445. }
  4446. /*--------------
  4447. Team Style 3
  4448. ----------------*/
  4449. .team-box-2 {
  4450. position: relative;
  4451. }
  4452. .team-box-2-image {
  4453. position: relative;
  4454. margin: 15px 0px 15px 0px;
  4455. }
  4456. .team-box-2-image img {
  4457. display: block;
  4458. width: 100%;
  4459. height: auto;
  4460. border-radius: 5px;
  4461. }
  4462. .team-box-2-overlay {
  4463. position: absolute;
  4464. bottom: 0;
  4465. left: 0;
  4466. right: 0;
  4467. background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(247, 198, 5, 0.9) 100%);
  4468. background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(247, 198, 5, 0.9) 100%);
  4469. background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(247, 198, 5, 0.9) 100%);
  4470. overflow: hidden;
  4471. width: 100%;
  4472. height: 100%;
  4473. opacity: 0;
  4474. transition: .5s ease;
  4475. }
  4476. .team-box-2:hover .team-box-2-overlay {
  4477. opacity: 1;
  4478. }
  4479. .team-box-2-content {
  4480. white-space: nowrap;
  4481. color: white;
  4482. font-size: 20px;
  4483. position: absolute;
  4484. overflow: hidden;
  4485. top: 90%;
  4486. left: 50%;
  4487. transform: translate(-50%, -50%);
  4488. -ms-transform: translate(-50%, -50%);
  4489. padding: 50px;
  4490. }
  4491. .team-box-2-content i {
  4492. font-size: 15px;
  4493. text-align: center;
  4494. color: #fff;
  4495. border-radius: 50%;
  4496. background: transparent;
  4497. padding: 10px;
  4498. transition: .6s ease;
  4499. }
  4500. .team-box-2-content i:hover {
  4501. color: #000;
  4502. background: #fff;
  4503. }
  4504. .team-box-2:hover .team-box-2-overlay i {
  4505. animation-name: fadeInUp;
  4506. animation-duration: .5s;
  4507. animation-timing-function: ease-out;
  4508. }
  4509. .team-box-2-name {
  4510. white-space: nowrap;
  4511. color: white;
  4512. font-size: 20px;
  4513. position: absolute;
  4514. overflow: hidden;
  4515. top: 75%;
  4516. left: 50%;
  4517. transform: translate(-50%, -50%);
  4518. -ms-transform: translate(-50%, -50%);
  4519. padding: 50px;
  4520. }
  4521. .team-box-2-name h4 {
  4522. color: #fff;
  4523. font-size: 20px;
  4524. font-weight: 600;
  4525. }
  4526. .team-box-2:hover .team-box-2-overlay h4 {
  4527. animation-name: fadeInDown;
  4528. animation-duration: .5s;
  4529. animation-timing-function: ease-out;
  4530. }
  4531. .team-box-2-name h5 {
  4532. color: #fff;
  4533. font-size: 15px;
  4534. font-weight: 300;
  4535. margin-top: 5px;
  4536. text-align: center;
  4537. }
  4538. .team-box-2:hover .team-box-2-overlay h5 {
  4539. animation-name: fadeInDown;
  4540. animation-duration: .5s;
  4541. animation-timing-function: ease-out;
  4542. }
  4543. /*--------------
  4544. Team Single
  4545. ----------------*/
  4546. .team-single-img {
  4547. width: 100%;
  4548. }
  4549. .team-single-img img {
  4550. border-radius: 5px;
  4551. }
  4552. .team-single-text {
  4553. padding: 5px 50px 15px 15px;
  4554. }
  4555. .team-single-text span {
  4556. color: #f7c605;
  4557. font-size: 14px;
  4558. font-weight: 500;
  4559. }
  4560. .team-single-text h4 {
  4561. color: #111;
  4562. font-size: 25px;
  4563. font-weight: 500;
  4564. margin-bottom: 10px;
  4565. }
  4566. .team-single-info {
  4567. padding: 0px 0px;
  4568. }
  4569. .team-single-info li strong {
  4570. color: #555;
  4571. font-size: 16px;
  4572. font-weight: 500;
  4573. margin-right: 10px;
  4574. }
  4575. .team-single-text li span {
  4576. color: #777;
  4577. font-size: 15px;
  4578. font-weight: 400;
  4579. }
  4580. .team-single-social {
  4581. padding: 5px 0px;
  4582. }
  4583. .team-single-social li {
  4584. display: inline-block;
  4585. }
  4586. .team-single-social li a {
  4587. display: inline-block;
  4588. margin-right: 15px;
  4589. background: #f7c605;
  4590. width: 35px;
  4591. height: 35px;
  4592. border-radius: 50px;
  4593. }
  4594. .team-single-social li a:hover {
  4595. display: inline-block;
  4596. margin-right: 15px;
  4597. background: #111;
  4598. width: 35px;
  4599. height: 35px;
  4600. border-radius: 50px;
  4601. }
  4602. .team-single-social li a i {
  4603. color: #fff;
  4604. font-size: 15px;
  4605. padding: 11px 0px 0px 11px;
  4606. }
  4607. /*-----------------------------------------
  4608. 24. Video Section
  4609. -------------------------------------------*/
  4610. /*--------------
  4611. Inner Video Sections
  4612. ----------------*/
  4613. .video-section {
  4614. width: 100%;
  4615. height: auto;
  4616. }
  4617. .video-overlay {
  4618. background: rgba(0, 0, 0, .6);
  4619. }
  4620. .video-content {
  4621. text-align: center;
  4622. padding: 50px 0px;
  4623. }
  4624. /*--------------
  4625. Top Video Section
  4626. ----------------*/
  4627. .main-video-section {
  4628. position: relative;
  4629. height: 550px;
  4630. }
  4631. .main-video-content {
  4632. position: relative;
  4633. text-align: center;
  4634. height: 550px;
  4635. /* Center text vertically */
  4636. display: -webkit-box;
  4637. display: -ms-flexbox;
  4638. display: -webkit-flex;
  4639. display: flex;
  4640. -webkit-box-pack: center;
  4641. -ms-flex-pack: center;
  4642. -webkit-justify-content: center;
  4643. justify-content: center;
  4644. -webkit-box-align: center;
  4645. -ms-flex-align: center;
  4646. -webkit-align-items: center;
  4647. align-items: center;
  4648. }
  4649. @media (max-width: 767px) {
  4650. .main-video-section {
  4651. height: auto;
  4652. }
  4653. .main-video-content {
  4654. height: auto;
  4655. padding: 50px 0px;
  4656. }
  4657. }
  4658. .main-video-overlay {
  4659. background: rgba(0, 0, 0, .7);
  4660. }
  4661. .main-video-content h2 {
  4662. position: relative;
  4663. font-size: 60px;
  4664. font-weight: 400;
  4665. color: #111;
  4666. margin: 5px 0px;
  4667. }
  4668. @media (max-width: 767px) {
  4669. .main-video-content h2 {
  4670. font-size: 30px;
  4671. font-weight: 400;
  4672. }
  4673. }
  4674. .main-video-content h3 {
  4675. position: relative;
  4676. font-size: 50px;
  4677. font-weight: 400;
  4678. color: #111;
  4679. margin: 5px 0px;
  4680. }
  4681. @media (max-width: 767px) {
  4682. .main-video-content h3 {
  4683. font-size: 30px;
  4684. font-weight: 400;
  4685. }
  4686. }
  4687. .main-video-content h4 {
  4688. position: relative;
  4689. font-size: 40px;
  4690. font-weight: 400;
  4691. color: #111;
  4692. margin: 5px 0px;
  4693. }
  4694. .main-video-content h5 {
  4695. position: relative;
  4696. font-size: 30px;
  4697. font-weight: 400;
  4698. color: #111;
  4699. margin: 5px 0px;
  4700. }
  4701. .main-video-content h6 {
  4702. position: relative;
  4703. font-size: 20px;
  4704. font-weight: 400;
  4705. line-height: 1.6;
  4706. color: #111;
  4707. margin: 5px 0px;
  4708. }
  4709. @media (max-width: 767px) {
  4710. .main-video-content h6 {
  4711. font-size: 15px;
  4712. font-weight: 400;
  4713. }
  4714. }
  4715. /*-----------------------------------------
  4716. 25. Projects
  4717. -------------------------------------------*/
  4718. .project-grid {
  4719. display: block;
  4720. position: relative;
  4721. margin: 15px 0px;
  4722. }
  4723. .project-grid-img img {
  4724. display: block;
  4725. width: 100%;
  4726. height: auto;
  4727. }
  4728. .project-grid-overlay {
  4729. position: absolute;
  4730. bottom: 0;
  4731. left: 2.5%;
  4732. right: 0;
  4733. bottom: 2.6%;
  4734. background: rgba(255, 255, 255, .9);
  4735. overflow: hidden;
  4736. width: 95%;
  4737. height: 95%;
  4738. opacity: 0;
  4739. -webkit-transition-duration: .3s;
  4740. transition-duration: .3s;
  4741. }
  4742. .project-grid:hover .project-grid-overlay {
  4743. opacity: 1;
  4744. }
  4745. .project-grid-overlay h4 a {
  4746. color: #111;
  4747. font-size: 22px;
  4748. font-weight: 400;
  4749. position: absolute;
  4750. top: 60%;
  4751. left: 50%;
  4752. opacity: 0;
  4753. transform: translate(-50%, -50%);
  4754. -ms-transform: translate(-50%, -50%);
  4755. text-align: center;
  4756. -webkit-transition-duration: .5s;
  4757. transition-duration: .5s;
  4758. }
  4759. .project-grid-overlay h4 a:hover {
  4760. color: #f7c605;
  4761. }
  4762. .project-grid-overlay h4 a:after {
  4763. content: '';
  4764. display: block;
  4765. width: 70px;
  4766. height: 1px;
  4767. background: #f7c605;
  4768. margin-top: 10px !important;
  4769. margin-bottom: 15px !important;
  4770. margin: 0 auto;
  4771. }
  4772. .project-grid:hover h4 a {
  4773. top: 40%;
  4774. opacity: 1;
  4775. }
  4776. .project-grid-overlay p {
  4777. color: #666;
  4778. font-size: 15px;
  4779. font-weight: 400;
  4780. position: absolute;
  4781. top: 70%;
  4782. left: 50%;
  4783. opacity: 0;
  4784. transform: translate(-50%, -50%);
  4785. -ms-transform: translate(-50%, -50%);
  4786. text-align: center;
  4787. -webkit-transition-duration: .6s;
  4788. transition-duration: .6s;
  4789. }
  4790. .project-grid:hover p {
  4791. top: 50%;
  4792. opacity: 1;
  4793. }
  4794. .project-grid-overlay span {
  4795. color: #999;
  4796. font-size: 16px;
  4797. font-weight: 500;
  4798. position: absolute;
  4799. writing-mode: vertical-rl;
  4800. writing-mode: tb-rl;
  4801. letter-spacing: 4px;
  4802. top: 10%;
  4803. left: 90%;
  4804. }
  4805. @media screen and (max-width: 767px) {
  4806. .project-grid:hover p {
  4807. top: 52%;
  4808. }
  4809. }
  4810. @media screen and (max-width: 1201px) {
  4811. .project-grid-overlay {
  4812. bottom: 0;
  4813. left: 0px;
  4814. right: 0;
  4815. bottom: 0px;
  4816. width: 100%;
  4817. height: 100%;
  4818. }
  4819. }
  4820. /*-----------------------------------------
  4821. 26. Project Single
  4822. -------------------------------------------*/
  4823. /*--------------
  4824. Style 1
  4825. ----------------*/
  4826. .project-single-img {
  4827. padding-bottom: 30px;
  4828. }
  4829. .project-single-text {
  4830. margin: 30px 0px;
  4831. }
  4832. .project-single-text h4 {
  4833. color: #111;
  4834. font-size: 22px;
  4835. font-weight: 500;
  4836. margin-bottom: 25px;
  4837. }
  4838. .project-single-text h4:after {
  4839. content: " ";
  4840. display: block;
  4841. background: #f7c605;
  4842. width: 70px;
  4843. height: 2px;
  4844. margin-top: 8px;
  4845. }
  4846. .project-single-text p {
  4847. color: #999;
  4848. font-size: 15px;
  4849. font-weight: 400;
  4850. line-height: 1.8;
  4851. margin: 15px 0px;
  4852. }
  4853. .project-single-text h5 {
  4854. color: #111;
  4855. font-size: 18px;
  4856. font-weight: 500;
  4857. margin: 25px 0px 20px 0px;
  4858. }
  4859. .project-single-text h5:after {
  4860. content: " ";
  4861. display: block;
  4862. background: #f7c605;
  4863. width: 70px;
  4864. height: 2px;
  4865. margin-top: 8px;
  4866. }
  4867. .project-single-text ul li {
  4868. color: #111;
  4869. font-size: 15px;
  4870. font-weight: 500;
  4871. padding: 8px 0px;
  4872. }
  4873. .project-single-text ul li i {
  4874. color: #f7c605;
  4875. font-weight: 500;
  4876. font-size: 15px;
  4877. padding-right: 10px;
  4878. }
  4879. /*Right*/
  4880. .project-single-info {
  4881. display: inline-block;
  4882. border: 1px solid #ececec;
  4883. display: block;
  4884. width: 100%;
  4885. padding: 0px 20px;
  4886. }
  4887. .project-single-info ul li {
  4888. color: #777;
  4889. font-size: 15px;
  4890. font-weight: 500;
  4891. border-bottom: 1px solid #ececec;
  4892. padding: 17px 0px;
  4893. }
  4894. .project-single-info ul li:last-child {
  4895. border-bottom: none;
  4896. }
  4897. .project-single-info ul li span {
  4898. display: inline-block;
  4899. color: #111;
  4900. font-size: 15px;
  4901. font-weight: 500;
  4902. margin-right: 25px;
  4903. width: 70px;
  4904. max-width: 100%;
  4905. }
  4906. /*carousel*/
  4907. .project-carousel {
  4908. margin: 40px 0px 20px;
  4909. }
  4910. .project-carousel h4 {
  4911. color: #111;
  4912. font-size: 22px;
  4913. font-weight: 500;
  4914. margin: 25px 0px 20px 0px;
  4915. }
  4916. .project-carousel h4:after {
  4917. content: " ";
  4918. display: block;
  4919. background: #f7c605;
  4920. width: 70px;
  4921. height: 2px;
  4922. margin-top: 8px;
  4923. }
  4924. .project-item {
  4925. position: relative;
  4926. overflow: hidden;
  4927. }
  4928. .project-item img {
  4929. width: 100%;
  4930. border-radius: 5px;
  4931. }
  4932. .project-item-overlay {
  4933. position: absolute;
  4934. top: 0;
  4935. bottom: 0;
  4936. left: 0;
  4937. right: 0;
  4938. height: 100%;
  4939. width: 100%;
  4940. opacity: 0;
  4941. z-index: 999;
  4942. transition: .5s ease;
  4943. background: rgba(0, 0, 0, 0.8);
  4944. border-radius: 5px;
  4945. }
  4946. .project-item:hover .project-item-overlay {
  4947. opacity: 1;
  4948. }
  4949. .project-item-content {
  4950. position: absolute;
  4951. bottom: 30px;
  4952. left: 30px;
  4953. }
  4954. @media screen and (max-width: 767px) {
  4955. .project-item-content {
  4956. position: absolute;
  4957. bottom: 15px;
  4958. left: 15px;
  4959. }
  4960. }
  4961. .project-item-content span {
  4962. font-size: 13px;
  4963. font-weight: 400;
  4964. color: #fff;
  4965. opacity: .6;
  4966. }
  4967. .project-item-content h6 {
  4968. font-size: 18px;
  4969. font-weight: 400;
  4970. color: #fff;
  4971. margin-top: 5px;
  4972. }
  4973. .project-item-content a {
  4974. display: inline-block;
  4975. font-size: 13px;
  4976. font-weight: 400;
  4977. background: #f7c605;
  4978. color: #fff;
  4979. border: 1.5px solid #f7c605;
  4980. border-radius: 5px;
  4981. margin-top: 10px;
  4982. padding: 10px 15px 10px 15px;
  4983. }
  4984. .project-item-content a:hover {
  4985. border: 1.5px solid #fff;
  4986. background: transparent;
  4987. color: #fff;
  4988. }
  4989. .project-detail img {
  4990. width: 100%;
  4991. height: 500px;
  4992. border-radius: 5px;
  4993. margin-bottom: 30px;
  4994. }
  4995. /*--------------
  4996. Style 2
  4997. ----------------*/
  4998. .project-single-box-img img {
  4999. width: 100%;
  5000. border-radius: 10px;
  5001. -webkit-box-shadow: 0 20px 40px rgba(0, 0, 0, 0.07);
  5002. box-shadow: 0 20px 40px rgba(0, 0, 0, 0.07);
  5003. }
  5004. .project-info-shortcode {
  5005. border-bottom: 1px solid #ececec;
  5006. padding: 15px 0px;
  5007. }
  5008. .project-info-shortcode:last-child {
  5009. border-bottom: none;
  5010. }
  5011. .project-single-box-info {
  5012. position: relative;
  5013. border-radius: 10px;
  5014. background: #f9f9f9;
  5015. }
  5016. .project-info-shortcode-icon {
  5017. text-align: center;
  5018. padding: 15px 0px;
  5019. }
  5020. .project-info-shortcode-icon i {
  5021. color: #f7c605;
  5022. font-size: 20px;
  5023. }
  5024. .project-info-shortcode-text {
  5025. position: relative;
  5026. }
  5027. .project-info-shortcode-text h5 {
  5028. color: #111;
  5029. font-size: 17px;
  5030. font-weight: 500;
  5031. margin-top: 7px;
  5032. }
  5033. .project-info-shortcode-text p {
  5034. color: #999;
  5035. font-size: 15px;
  5036. font-weight: 400;
  5037. }
  5038. @media screen and (max-width: 767px) {
  5039. .project-info-shortcode-icon i {
  5040. color: #f7c605;
  5041. font-size: 30px;
  5042. padding: 0px 30px;
  5043. }
  5044. .project-info-shortcode-text {
  5045. text-align: center;
  5046. padding: 0px 15px 0px 30px;
  5047. }
  5048. }
  5049. /*-----------------------------------------
  5050. 27. Accordions
  5051. -------------------------------------------*/
  5052. .accordion {
  5053. background: transparent;
  5054. box-shadow: none;
  5055. border: none;
  5056. border-bottom: 1px solid #ececec;
  5057. border-radius: 0px !important;
  5058. }
  5059. .accordion-heading {
  5060. border-radius: 0px;
  5061. padding: 0px;
  5062. }
  5063. .accordion-title a {
  5064. font-size: 15px;
  5065. font-weight: 600;
  5066. color: #111;
  5067. line-height: 1;
  5068. display: block;
  5069. padding: 20px 0px 25px 0px;
  5070. border-radius: 0px;
  5071. }
  5072. .accordion-title a:after {
  5073. content: '\f107';
  5074. font-size: 18px;
  5075. font-family: "FontAwesome";
  5076. color: #f7c605;
  5077. float: right;
  5078. }
  5079. .accordion-title .collapsed:after {
  5080. content: '\f105';
  5081. font-size: 18px;
  5082. font-family: "FontAwesome";
  5083. color: #333;
  5084. float: right;
  5085. }
  5086. .accordion-body {
  5087. font-size: 15px;
  5088. font-weight: 400;
  5089. color: #999;
  5090. line-height: 170%;
  5091. text-align: left;
  5092. border: none !important;
  5093. padding: 0px;
  5094. padding: 18px 0px 30px 0px;
  5095. }
  5096. .accordion-body p {
  5097. margin-bottom: 0px;
  5098. }
  5099. .panel-body {
  5100. border-top: 1px solid #eee !important;
  5101. }
  5102. .panel-default > .panel-heading {
  5103. color: #333;
  5104. background-color: transparent !important;
  5105. border-color: #ddd;
  5106. }
  5107. /*Grey Accordions*/
  5108. .panel-grey > .panel-heading a {
  5109. color: #111;
  5110. background-color: #f7f7f7 !important;
  5111. border: none !important;
  5112. border-radius: 5px;
  5113. padding-left: 15px;
  5114. padding-right: 15px;
  5115. margin-bottom: 5px;
  5116. }
  5117. .panel-grey {
  5118. border: none !important;
  5119. }
  5120. .panel-grey .panel-body {
  5121. border: none !important;
  5122. }
  5123. .panel-grey .accordion-title a:after {
  5124. content: '\f056';
  5125. font-size: 18px;
  5126. font-family: "FontAwesome";
  5127. color: #f7c605;
  5128. float: right;
  5129. }
  5130. .panel-grey .accordion-title .collapsed:after {
  5131. content: '\f055';
  5132. font-size: 18px;
  5133. font-family: "FontAwesome";
  5134. color: #333;
  5135. float: right;
  5136. }
  5137. /*-----------------------------------------
  5138. 28. Service Single
  5139. -------------------------------------------*/
  5140. .services-single-menu {
  5141. border: 1px solid #ececec;
  5142. }
  5143. .services-single-menu ul li {
  5144. border-bottom: 1px solid #ececec;
  5145. background: #fff;
  5146. }
  5147. .services-single-menu ul li:last-child {
  5148. border-bottom: none;
  5149. }
  5150. .services-single-menu ul li:hover {
  5151. background: #f9f9f9;
  5152. }
  5153. .services-single-menu ul li a {
  5154. display: block;
  5155. color: #111;
  5156. font-size: 15px;
  5157. font-weight: 500;
  5158. padding: 17px 0px 17px 15px;
  5159. -webkit-transition-duration: .3s;
  5160. transition-duration: .3s;
  5161. }
  5162. .services-single-menu ul li a:hover {
  5163. -webkit-box-shadow: 3px 0px 0px 0px rgba(247, 198, 5, 1) inset;
  5164. -moz-box-shadow: 3px 0px 0px 0px rgba(247, 198, 5, 1) inset;
  5165. box-shadow: 3px 0px 0px 0px rgba(247, 198, 5, 1) inset;
  5166. }
  5167. .services-active {
  5168. -webkit-box-shadow: 3px 0px 0px 0px rgba(247, 198, 5, 1) inset;
  5169. -moz-box-shadow: 3px 0px 0px 0px rgba(247, 198, 5, 1) inset;
  5170. box-shadow: 3px 0px 0px 0px rgba(247, 198, 5, 1) inset;
  5171. }
  5172. .services-single-left-heading h4 {
  5173. color: #111;
  5174. font-size: 18px;
  5175. font-weight: 500;
  5176. }
  5177. .services-single-left-heading h4:after {
  5178. content: " ";
  5179. display: block;
  5180. background: #f7c605;
  5181. width: 50px;
  5182. height: 2px;
  5183. margin-top: 8px;
  5184. }
  5185. .section-single-heading h4 {
  5186. color: #111;
  5187. font-size: 20px;
  5188. font-weight: 500;
  5189. }
  5190. .section-single-heading h4:after {
  5191. content: " ";
  5192. display: block;
  5193. background: #f7c605;
  5194. width: 60px;
  5195. height: 2px;
  5196. margin-top: 8px;
  5197. }
  5198. .chartjs-render-monitor {
  5199. margin-top: 20px;
  5200. display: block;
  5201. height: auto;
  5202. width: 100%;
  5203. }
  5204. .download-file-button {
  5205. background: #f8f7f6;
  5206. border-radius: 5px;
  5207. margin: 40px 0px;
  5208. padding: 25px 50px;
  5209. -webkit-box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.16);
  5210. -moz-box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.16);
  5211. box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.16);
  5212. -webkit-transition-duration: 0.4s;
  5213. transition-duration: 0.4s;
  5214. }
  5215. .download-file-button:hover {
  5216. -webkit-box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.16);
  5217. -moz-box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.16);
  5218. box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.28);
  5219. }
  5220. .download-file-button h5 {
  5221. display: inline-block;
  5222. color: #111;
  5223. font-size: 20px;
  5224. font-weight: 400;
  5225. margin-top: 8px;
  5226. }
  5227. .download-file-button h5 span {
  5228. color: #888;
  5229. font-size: 18px;
  5230. font-weight: 400;
  5231. margin-left: 10px;
  5232. }
  5233. .download-file-button i {
  5234. font-family: FontAwesome;
  5235. display: inline-block;
  5236. float: right;
  5237. font-size: 40px;
  5238. color: #f7c605;
  5239. }
  5240. /*-----------------------------------------
  5241. 29. Callback
  5242. -------------------------------------------*/
  5243. /*Style 1*/
  5244. .callback-box {
  5245. position: relative;
  5246. background: #f7f7f7;
  5247. border: 1px solid #ececec;
  5248. border-radius: 5px;
  5249. padding: 25px 15px;
  5250. }
  5251. .callback-box-form input {
  5252. width: 100%;
  5253. background: #fff;
  5254. color: #111;
  5255. font-weight: 400;
  5256. padding: 12px 10px;
  5257. border: none;
  5258. border-radius: 5px;
  5259. margin: 5px 0px;
  5260. }
  5261. .callback-box-form button {
  5262. display: block;
  5263. width: 100%;
  5264. background: #f7c605;
  5265. color: #fff;
  5266. font-size: 13px;
  5267. font-weight: 500;
  5268. border-radius: 50px;
  5269. margin-top: 5px;
  5270. padding: 10px 15px 10px 15px;
  5271. -webkit-transition: all .4s ease;
  5272. -moz-transition: all .4s ease;
  5273. transition: all .4s ease;
  5274. }
  5275. .callback-box-form button:hover {
  5276. background: #111;
  5277. }
  5278. /*Style 2*/
  5279. .callback-form input {
  5280. position: relative;
  5281. display: block;
  5282. width: 100%;
  5283. background: #fff;
  5284. color: #111;
  5285. font-weight: 400;
  5286. padding: 16px 16px;
  5287. border: none;
  5288. border-radius: 5px;
  5289. margin: 15px 0px;
  5290. }
  5291. /*-----------------------------------------
  5292. 30. Projects Masonry
  5293. -------------------------------------------*/
  5294. .wrapper {
  5295. width: 100%;
  5296. margin: 0px auto;
  5297. }
  5298. .masonry {
  5299. margin: 10px;
  5300. padding: 0;
  5301. -moz-column-gap: 10px;
  5302. -webkit-column-gap: 10px;
  5303. column-gap: 10px;
  5304. -webkit-transition-duration: 0.4s;
  5305. transition-duration: 0.4s;
  5306. }
  5307. .masonry a {
  5308. display: block;
  5309. margin-top: 10px;
  5310. }
  5311. .masonry a:first-child {
  5312. margin-top: 0px;
  5313. }
  5314. .masonry-item {
  5315. position: relative;
  5316. overflow: hidden;
  5317. -webkit-transition-duration: 0.4s;
  5318. transition-duration: 0.4s;
  5319. }
  5320. .masonry-item img {
  5321. display: block;
  5322. width: 100%;
  5323. height: auto;
  5324. -webkit-transition-duration: 0.4s;
  5325. transition-duration: 0.4s;
  5326. }
  5327. .masonry-item-overlay {
  5328. position: absolute;
  5329. bottom: 0;
  5330. left: 0;
  5331. right: 0;
  5332. height: 100%;
  5333. max-height: 100%;
  5334. width: 100%;
  5335. opacity: 1;
  5336. background: rgba(0, 0, 0, 0.3);
  5337. padding: 30px;
  5338. -webkit-transition-duration: 0.4s;
  5339. transition-duration: 0.4s;
  5340. }
  5341. .masonry-item:hover img {
  5342. transform: scale(1.2);
  5343. }
  5344. .masonry-item:hover .masonry-item-overlay {
  5345. position: absolute;
  5346. opacity: 0;
  5347. -webkit-transition-duration: .5s;
  5348. transition-duration: .5s;
  5349. }
  5350. .masonry-item:hover .masonry-item-overlay h4 {
  5351. opacity: 0;
  5352. transform: translate(0%, -50%);
  5353. -ms-transform: translate(0%, -50%);
  5354. text-align: center;
  5355. -webkit-transition-duration: .7s;
  5356. transition-duration: .7s;
  5357. }
  5358. .masonry-item:hover .masonry-item-overlay ul {
  5359. opacity: 0;
  5360. transform: translate(0%, -50%);
  5361. -ms-transform: translate(0%, -50%);
  5362. text-align: center;
  5363. -webkit-transition-duration: .5s;
  5364. transition-duration: .5s;
  5365. }
  5366. .masonry-item-overlay h4 {
  5367. color: #fff;
  5368. font-size: 22px;
  5369. font-weight: 400;
  5370. position: absolute;
  5371. bottom: 50px;
  5372. }
  5373. .masonry-item-overlay ul {
  5374. position: absolute;
  5375. padding-left: 0px;
  5376. bottom: 25px;
  5377. }
  5378. .masonry-item-overlay ul li {
  5379. list-style-type: none;
  5380. display: inline-block;
  5381. font-size: 12px;
  5382. font-weight: 600;
  5383. color: #fff;
  5384. padding-left: 0px;
  5385. opacity: 0.7;
  5386. }
  5387. .masonry-item-overlay ul li:last-child:after {
  5388. content: none;
  5389. }
  5390. .masonry-item-overlay ul li:after {
  5391. content: ' / ';
  5392. font-size: 8px;
  5393. font-weight: 700;
  5394. margin: 0px 5px 0px 5px;
  5395. }
  5396. .masonry-item-overlay ul li a {
  5397. color: #fff;
  5398. }
  5399. .masonry-item:first-child {
  5400. margin-top: 0px;
  5401. }
  5402. @media only screen and (min-width: 400px) {
  5403. .masonry {
  5404. -moz-column-count: 2;
  5405. -webkit-column-count: 2;
  5406. column-count: 2;
  5407. }
  5408. }
  5409. @media only screen and (min-width: 700px) {
  5410. .masonry {
  5411. -moz-column-count: 3;
  5412. -webkit-column-count: 3;
  5413. column-count: 3;
  5414. }
  5415. }
  5416. @media only screen and (min-width: 900px) {
  5417. .masonry {
  5418. -moz-column-count: 2;
  5419. -webkit-column-count: 2;
  5420. column-count: 2;
  5421. }
  5422. }
  5423. @media only screen and (min-width: 1100px) {
  5424. .masonry {
  5425. -moz-column-count: 3;
  5426. -webkit-column-count: 3;
  5427. column-count: 3;
  5428. }
  5429. }
  5430. /*4 columns*/
  5431. .masonry-4 {
  5432. margin: 10px;
  5433. padding: 0;
  5434. -moz-column-gap: 10px;
  5435. -webkit-column-gap: 10px;
  5436. column-gap: 10px;
  5437. }
  5438. .masonry-4 a {
  5439. display: block;
  5440. margin-top: 10px;
  5441. }
  5442. .masonry-4 a:first-child {
  5443. margin-top: 0px;
  5444. }
  5445. @media only screen and (min-width: 400px) {
  5446. .masonry-4 {
  5447. -moz-column-count: 2;
  5448. -webkit-column-count: 2;
  5449. column-count: 2;
  5450. }
  5451. }
  5452. @media only screen and (min-width: 700px) {
  5453. .masonry-4 {
  5454. -moz-column-count: 3;
  5455. -webkit-column-count: 3;
  5456. column-count: 3;
  5457. }
  5458. }
  5459. @media only screen and (min-width: 900px) {
  5460. .masonry-4 {
  5461. -moz-column-count: 2;
  5462. -webkit-column-count: 2;
  5463. column-count: 2;
  5464. }
  5465. }
  5466. @media only screen and (min-width: 1100px) {
  5467. .masonry-4 {
  5468. -moz-column-count: 4;
  5469. -webkit-column-count: 4;
  5470. column-count: 4;
  5471. }
  5472. }
  5473. /*-----------------------------------------
  5474. 31. Under Construction
  5475. -------------------------------------------*/
  5476. .count-back-box {
  5477. width: 100%;
  5478. padding: 100px 0px;
  5479. text-align: center;
  5480. background-position: center;
  5481. background-size: cover;
  5482. }
  5483. .count-back-box h1 {
  5484. color: #111;
  5485. font-size: 40px;
  5486. font-weight: 500;
  5487. }
  5488. .construction-box {
  5489. margin: auto;
  5490. }
  5491. .construction-icons {
  5492. position: relative;
  5493. text-align: center;
  5494. }
  5495. .construction-icons i {
  5496. display: inline-block;
  5497. color: #f7c605;
  5498. }
  5499. #cons-icon-1 {
  5500. font-size: 120px;
  5501. animation: construction-rotate 5s linear infinite;
  5502. }
  5503. #cons-icon-2 {
  5504. font-size: 80px;
  5505. animation: construction-rotate-back 5s linear infinite;
  5506. margin-left: -9px;
  5507. }
  5508. @keyframes construction-rotate {
  5509. 0% {
  5510. transform: rotate(0);
  5511. }
  5512. 100% {
  5513. transform: rotate(360deg);
  5514. }
  5515. }
  5516. @keyframes construction-rotate-back {
  5517. 0% {
  5518. transform: rotate(0);
  5519. }
  5520. 100% {
  5521. transform: rotate(-360deg);
  5522. }
  5523. }
  5524. .wrapper {
  5525. display: inline-block;
  5526. margin: 0 auto;
  5527. text-align: center;
  5528. }
  5529. .timer {
  5530. font-family: "Segment7Standard";
  5531. font-size: 70px;
  5532. display: inline-block;
  5533. vertical-align: top;
  5534. }
  5535. .clock {
  5536. margin-top: 30px;
  5537. }
  5538. .clock h5 {
  5539. color: #f7c605;
  5540. font-size: 16px;
  5541. font-weight: 400;
  5542. margin-left: 15px;
  5543. }
  5544. .clock .column {
  5545. display: inline-block;
  5546. }
  5547. .column {
  5548. padding: 0px;
  5549. }
  5550. .count-back-box-text {
  5551. text-align: center;
  5552. margin: 30px auto 0 auto;
  5553. }
  5554. .count-back-box-text h3 {
  5555. color: #111;
  5556. font-size: 30px;
  5557. font-weight: 400;
  5558. line-height: 170%;
  5559. }
  5560. .count-back-box-text h6 {
  5561. color: #777;
  5562. font-size: 18px;
  5563. font-weight: 400;
  5564. margin-top: 10px;
  5565. }
  5566. @media (max-width: 767px) {
  5567. .timer {
  5568. font-size: 30px;
  5569. }
  5570. #cons-icon-1 {
  5571. font-size: 65px;
  5572. }
  5573. }
  5574. /*-----------------------------------------
  5575. 32. Shop Single Slider
  5576. -------------------------------------------*/
  5577. .sr-text {
  5578. position: absolute !important;
  5579. top: -9999px !important;
  5580. left: -9999px !important;
  5581. }
  5582. .slick-slider .slick-prev, .slick-slider .slick-next {
  5583. display: none !important;
  5584. z-index: 100;
  5585. font-size: 2.5em;
  5586. height: 40px;
  5587. width: 40px;
  5588. margin-top: -20px;
  5589. color: #eee;
  5590. position: absolute;
  5591. top: 50%;
  5592. text-align: center;
  5593. color: #222;
  5594. opacity: 1;
  5595. transition: opacity .25s;
  5596. cursor: pointer;
  5597. background: #eee;
  5598. }
  5599. .slick-slider .slick-prev:hover, .slick-slider .slick-next:hover {
  5600. opacity: .65;
  5601. }
  5602. .slick-slider .slick-prev {
  5603. left: 0;
  5604. }
  5605. .slick-slider .slick-next {
  5606. right: 0;
  5607. }
  5608. .wrapper {
  5609. max-width: 1024px;
  5610. margin: 0 auto;
  5611. font-family: '';
  5612. }
  5613. .wrapper strong {
  5614. font-weight: 300;
  5615. letter-spacing: 2px;
  5616. font-size: 1.2em;
  5617. display: block;
  5618. text-align: center;
  5619. text-transform: uppercase;
  5620. margin: 0;
  5621. color: #666;
  5622. }
  5623. .product-images {
  5624. width: 100%;
  5625. margin: 0 auto;
  5626. }
  5627. .product-images li, .product-images figure, .product-images a, .product-images img {
  5628. display: block;
  5629. outline: none;
  5630. border: none;
  5631. }
  5632. .product-images .main-img-slider figure {
  5633. margin: 0 auto;
  5634. }
  5635. .product-images .main-img-slider figure a {
  5636. cursor: e-resize;
  5637. }
  5638. .product-images .main-img-slider figure a img {
  5639. width: 100%;
  5640. margin: 0 auto;
  5641. }
  5642. .product-images .thumb-nav {
  5643. margin: 0 auto;
  5644. margin-top: 0.5px;
  5645. width: 100%;
  5646. padding: 0;
  5647. }
  5648. .product-images .thumb-nav.slick-slider .slick-prev, .product-images .thumb-nav.slick-slider .slick-next {
  5649. font-size: 1.2em;
  5650. height: 20px;
  5651. width: 26px;
  5652. margin-top: -10px;
  5653. }
  5654. .product-images .thumb-nav.slick-slider .slick-prev {
  5655. margin-left: -30px;
  5656. }
  5657. .product-images .thumb-nav.slick-slider .slick-next {
  5658. margin-right: -30px;
  5659. }
  5660. .product-images .thumb-nav li {
  5661. display: block;
  5662. margin: 0 auto;
  5663. float: left;
  5664. cursor: pointer;
  5665. margin-right: 0px;
  5666. -webkit-transition-duration: .3s;
  5667. transition-duration: .3s;
  5668. }
  5669. .product-images .thumb-nav li img {
  5670. display: block;
  5671. width: 100%;
  5672. max-width: 250px;
  5673. margin: 0 auto;
  5674. border: 0.5px solid transparent;
  5675. border-bottom: 2px solid transparent;
  5676. }
  5677. .product-images .thumb-nav li:hover {
  5678. opacity: .7;
  5679. }
  5680. .product-images .thumb-nav li:hover, .product-images .thumb-nav li:focus {
  5681. border-color: #ccc;
  5682. }
  5683. .product-images .thumb-nav li.slick-current img {
  5684. border-bottom: 2px solid #f7c605;
  5685. }
  5686. .pswp__bg {
  5687. background: #fff;
  5688. }
  5689. .pswp__top-bar {
  5690. background-color: transparent !important;
  5691. }
  5692. .pswp__button,
  5693. .pswp__button:before,
  5694. .pswp__button--close:before,
  5695. .pswp__button--arrow--left:before,
  5696. .pswp__button--arrow--right:before {
  5697. background: none !important;
  5698. background-size: 100%;
  5699. width: 44px;
  5700. height: 44px;
  5701. font-family: 'icomoon';
  5702. }
  5703. .pswp__button {
  5704. color: #000 !important;
  5705. opacity: 0.4 !important;
  5706. transition: opacity .25s;
  5707. }
  5708. .pswp__button:hover {
  5709. opacity: 0.65 !important;
  5710. }
  5711. .pswp__button:before {
  5712. opacity: 1 !important;
  5713. }
  5714. .pswp__button.pswp__button--arrow--left:before, .pswp__button.pswp__button--arrow--right:before {
  5715. font-size: 44px;
  5716. }
  5717. .pswp__button.pswp__button--arrow--left:before {
  5718. content: "\e93b";
  5719. }
  5720. .pswp__button.pswp__button--arrow--right:before {
  5721. content: "\e93c";
  5722. }
  5723. .pswp__button.pswp__button--close {
  5724. top: 10px;
  5725. right: 20px;
  5726. }
  5727. .pswp__button.pswp__button--close:before {
  5728. content: "\e92a";
  5729. font-size: 44px;
  5730. }
  5731. .pswp__button.pswp__button--close:hover {
  5732. color: #222;
  5733. }
  5734. /*-----------------------------------------
  5735. 33. Shop Single
  5736. -------------------------------------------*/
  5737. .single-product {
  5738. padding-left: 30px;
  5739. }
  5740. @media screen and (max-width: 767px) {
  5741. .single-product {
  5742. padding-left: 0px;
  5743. margin-top: 30px;
  5744. }
  5745. }
  5746. .single-product h2 {
  5747. font-size: 31px;
  5748. font-weight: 500;
  5749. color: #111;
  5750. }
  5751. .single-product p {
  5752. font-size: 15px;
  5753. font-weight: 400;
  5754. line-height: 180%;
  5755. color: #aaa;
  5756. margin-top: 20px;
  5757. }
  5758. .product-review-area {
  5759. margin-top: 15px;
  5760. }
  5761. .product-review-area i {
  5762. color: #f9d100;
  5763. font-size: 18px;
  5764. margin-right: 2px;
  5765. }
  5766. .product-review-area span {
  5767. color: #111;
  5768. font-size: 14px;
  5769. margin-left: 10px;
  5770. }
  5771. .single-product-price {
  5772. margin-top: 20px;
  5773. }
  5774. .single-product-price h4 {
  5775. font-size: 25px;
  5776. font-weight: 500;
  5777. color: #111;
  5778. }
  5779. .product-categories {
  5780. display: block;
  5781. margin-top: 35px;
  5782. border-top: 1px solid #eee;
  5783. padding: 20px 5px 0px 5px;
  5784. }
  5785. .product-categories ul {
  5786. display: block;
  5787. }
  5788. .product-categories span {
  5789. font-size: 15px;
  5790. font-weight: 500;
  5791. color: #111;
  5792. line-height: 2;
  5793. }
  5794. .product-categories ul {
  5795. display: inline-block;
  5796. padding-left: 20px;
  5797. margin-bottom: 0px;
  5798. }
  5799. .product-categories ul li {
  5800. list-style-type: none;
  5801. display: inline-block;
  5802. color: #aaa;
  5803. font-weight: 500;
  5804. }
  5805. .product-categories ul li a {
  5806. color: #aaa;
  5807. font-size: 14px;
  5808. }
  5809. .product-categories ul li a:hover {
  5810. color: #f7c605;
  5811. }
  5812. .product-categories ul li:after {
  5813. content: ' / ';
  5814. display: inline-block;
  5815. font-size: 10px;
  5816. color: #aaa;
  5817. margin: 0px 5px;
  5818. }
  5819. .product-categories ul li:last-child:after {
  5820. content: none;
  5821. }
  5822. .product-tags {
  5823. display: block;
  5824. padding: 0px 5px;
  5825. }
  5826. .product-tags ul {
  5827. display: block;
  5828. }
  5829. .product-tags span {
  5830. font-size: 15px;
  5831. font-weight: 500;
  5832. color: #111;
  5833. line-height: 2;
  5834. }
  5835. .product-tags ul {
  5836. display: inline-block;
  5837. padding-left: 20px;
  5838. margin-bottom: 0px;
  5839. }
  5840. .product-tags ul li {
  5841. list-style-type: none;
  5842. display: inline-block;
  5843. color: #aaa;
  5844. font-weight: 500;
  5845. }
  5846. .product-tags ul li a {
  5847. color: #aaa;
  5848. font-size: 14px;
  5849. }
  5850. .product-tags ul li a:hover {
  5851. color: #f7c605;
  5852. }
  5853. .product-tags ul li:after {
  5854. content: ', ';
  5855. display: inline-block;
  5856. font-size: 10px;
  5857. color: #aaa;
  5858. margin: 0px 5px;
  5859. }
  5860. .product-tags ul li:last-child:after {
  5861. content: none;
  5862. }
  5863. .quantity {
  5864. position: relative;
  5865. }
  5866. .quantity input[type=number]::-webkit-inner-spin-button,
  5867. .quantity input[type=number]::-webkit-outer-spin-button {
  5868. -webkit-appearance: none;
  5869. margin: 0;
  5870. }
  5871. .quantity input[type=number] {
  5872. -moz-appearance: textfield;
  5873. }
  5874. .quantity input {
  5875. width: 85px;
  5876. height: 62px;
  5877. line-height: 1.65;
  5878. font-size: 16px;
  5879. color: #111;
  5880. font-weight: 600;
  5881. float: left;
  5882. display: block;
  5883. padding: 0;
  5884. margin: 0;
  5885. padding-left: 20px;
  5886. border: 2px solid #eee;
  5887. }
  5888. .quantity input:focus {
  5889. outline: 0;
  5890. }
  5891. .quantity-nav {
  5892. float: left;
  5893. position: relative;
  5894. height: 62px;
  5895. }
  5896. .quantity-button {
  5897. position: relative;
  5898. cursor: pointer;
  5899. width: 30px;
  5900. text-align: center;
  5901. color: #111;
  5902. background: #fff;
  5903. border: 2px solid #ececec;
  5904. font-size: 17px;
  5905. font-family: "Trebuchet MS", Helvetica, sans-serif !important;
  5906. line-height: 1.7;
  5907. -webkit-transform: translateX(-100%);
  5908. transform: translateX(-100%);
  5909. -webkit-user-select: none;
  5910. -moz-user-select: none;
  5911. -ms-user-select: none;
  5912. -o-user-select: none;
  5913. }
  5914. .quantity-button.quantity-up {
  5915. position: absolute;
  5916. height: 50%;
  5917. top: 0;
  5918. }
  5919. .quantity-button.quantity-down {
  5920. position: absolute;
  5921. bottom: 0px;
  5922. height: 50%;
  5923. border-top: none;
  5924. }
  5925. .add-to-cart-button {
  5926. display: inline-block;
  5927. background: #f7c605;
  5928. color: #fff;
  5929. font-size: 17px;
  5930. font-weight: 600;
  5931. padding: 19px 30px;
  5932. margin-left: 10px;
  5933. border-radius: 5px;
  5934. -webkit-transition-duration: .3s;
  5935. transition-duration: .3s;
  5936. }
  5937. .add-to-cart-button:hover {
  5938. background: #111;
  5939. color: #fff;
  5940. }
  5941. .product-share {
  5942. background: #f7f7f7;
  5943. border-radius: 5px;
  5944. padding: 20px 15px;
  5945. }
  5946. .product-share span {
  5947. font-size: 15px;
  5948. font-weight: 500;
  5949. color: #111;
  5950. margin-right: 15px;
  5951. }
  5952. .product-share a i {
  5953. color: #111;
  5954. font-size: 15px;
  5955. padding: 0px 7px;
  5956. -webkit-transition-duration: .3s;
  5957. transition-duration: .3s;
  5958. }
  5959. .product-share a i:hover {
  5960. color: #f7c605;
  5961. }
  5962. /*---------------
  5963. Shop Tabs
  5964. -----------------*/
  5965. .shop-tabs .tabs {
  5966. position: relative;
  5967. }
  5968. .shop-tabs .tabs .tab-menu li {
  5969. background: #f7f7f7;
  5970. display: inline-block;
  5971. width: 33.11%;
  5972. text-align: center;
  5973. }
  5974. .shop-tabs .tabs .tab-menu li a {
  5975. color: #111;
  5976. display: block;
  5977. font-size: 15px;
  5978. font-weight: 500;
  5979. padding: 18px 24px;
  5980. text-decoration: none;
  5981. }
  5982. .shop-tabs .tabs .tab-menu li:hover a, .tabs li:hover i {
  5983. color: #f7c605;
  5984. }
  5985. .shop-tabs .tab-menu .active-tab a, .shop-tabs .active-tab a i {
  5986. color: #f7c605 !important;
  5987. }
  5988. .shop-tabs .tab-menu {
  5989. display: flex;
  5990. justify-content: space-between;
  5991. margin-bottom: 4px;
  5992. }
  5993. @media screen and (max-width: 1200px) {
  5994. .shop-tabs .tabs .tab-menu li {
  5995. background: #f7f7f7;
  5996. display: inline-block;
  5997. text-align: center;
  5998. width: auto;
  5999. }
  6000. .shop-tabs .tabs .tab-menu li a {
  6001. color: #111;
  6002. display: block;
  6003. font-size: 15px;
  6004. font-weight: 500;
  6005. padding: 18px 24px;
  6006. text-decoration: none;
  6007. }
  6008. }
  6009. @media screen and (max-width: 767px) {
  6010. .shop-tabs .tabs .tab-menu li {
  6011. display: block;
  6012. width: 100%;
  6013. text-align: center;
  6014. margin-bottom: 4px;
  6015. }
  6016. .shop-tabs .tab-menu .tabs li a {
  6017. display: block;
  6018. }
  6019. .shop-tabs .tab-menu .tabs li i {
  6020. font-size: 25px;
  6021. }
  6022. }
  6023. .product-tab-body {
  6024. display: block;
  6025. position: relative;
  6026. padding: 25px;
  6027. background: #f7f7f7 !important;
  6028. }
  6029. .product-tab-body h2 {
  6030. font-size: 30px;
  6031. color: #111;
  6032. font-weight: 300;
  6033. margin-bottom: 10px;
  6034. }
  6035. .product-tab-body h3 {
  6036. font-size: 25px;
  6037. color: #111;
  6038. font-weight: 500;
  6039. margin-bottom: 10px;
  6040. }
  6041. .product-tab-body h4 {
  6042. font-size: 20px;
  6043. color: #111;
  6044. font-weight: 500;
  6045. margin-bottom: 10px;
  6046. }
  6047. .product-tab-body h5 {
  6048. font-size: 15px;
  6049. color: #111;
  6050. font-weight: 500;
  6051. margin-bottom: 10px;
  6052. }
  6053. .product-tab-body h2:after, .product-tab-body h3:after, .product-tab-body h4:after, .product-tab-body h5:after {
  6054. content: '';
  6055. display: block;
  6056. width: 100px;
  6057. height: 2px;
  6058. background: #f7c605;
  6059. margin-top: 10px;
  6060. margin-bottom: 10px;
  6061. }
  6062. .product-tab-body ul {
  6063. margin-top: 15px;
  6064. }
  6065. .product-tab-body ul li {
  6066. display: block;
  6067. font-size: 15px;
  6068. color: #111;
  6069. border-bottom: 1px dashed #ddd;
  6070. line-height: 1.9;
  6071. font-weight: 500;
  6072. padding: 15px 5px;
  6073. }
  6074. .product-tab-body ul li span {
  6075. display: inline-block;
  6076. width: 200px;
  6077. max-width: 100%;
  6078. }
  6079. .product-tab-body ul li:before {
  6080. content: "●";
  6081. display: inline-block;
  6082. color: #f7c605;
  6083. font-size: 14px;
  6084. margin-right: 10px;
  6085. line-height: 1;
  6086. }
  6087. .product-tab-body p {
  6088. font-size: 15px;
  6089. color: #555;
  6090. line-height: 1.9;
  6091. font-weight: 400;
  6092. margin: 15px 0px;
  6093. }
  6094. /*-------------------
  6095. Shop Product Review Form
  6096. ---------------------*/
  6097. .shop-form-title {
  6098. font-size: 15px;
  6099. color: #111;
  6100. font-weight: 500;
  6101. line-height: 1;
  6102. }
  6103. .rating {
  6104. display: inline-block;
  6105. position: relative;
  6106. height: 25px;
  6107. font-size: 25px;
  6108. }
  6109. .rating label {
  6110. position: absolute;
  6111. top: 0;
  6112. left: 0;
  6113. height: 100%;
  6114. cursor: pointer;
  6115. line-height: 1;
  6116. }
  6117. .rating label:last-child {
  6118. position: static;
  6119. }
  6120. .rating label:nth-child(1) {
  6121. z-index: 5;
  6122. }
  6123. .rating label:nth-child(2) {
  6124. z-index: 4;
  6125. }
  6126. .rating label:nth-child(3) {
  6127. z-index: 3;
  6128. }
  6129. .rating label:nth-child(4) {
  6130. z-index: 2;
  6131. }
  6132. .rating label:nth-child(5) {
  6133. z-index: 1;
  6134. }
  6135. .rating label input {
  6136. position: absolute;
  6137. top: 0;
  6138. left: 0;
  6139. opacity: 0;
  6140. }
  6141. .rating label .icon {
  6142. float: left;
  6143. color: transparent;
  6144. }
  6145. .rating label:last-child .icon {
  6146. color: #ccc;
  6147. }
  6148. .rating:not(:hover) label input:checked ~ .icon,
  6149. .rating:hover label:hover input ~ .icon {
  6150. color: #f9d100;
  6151. }
  6152. .rating label input:focus:not(:checked) ~ .icon:last-child {
  6153. color: #ccc;
  6154. text-shadow: 0 0 5px #f9d100;
  6155. }
  6156. .review-input input {
  6157. font-weight: 400;
  6158. font-size: 14px;
  6159. color: #111;
  6160. display: block;
  6161. margin-top: 15px;
  6162. border-radius: 5px;
  6163. border: 1px solid #eee;
  6164. padding: 13px 15px;
  6165. background: #fff;
  6166. width: 100%;
  6167. max-width: 100%;
  6168. transition: .3s;
  6169. }
  6170. .review-input input:focus {
  6171. border-color: #ccc;
  6172. }
  6173. .review-input textarea {
  6174. font-weight: 400;
  6175. font-size: 14px;
  6176. color: #111;
  6177. display: block;
  6178. margin-top: 15px;
  6179. border-radius: 5px;
  6180. border: 1px solid #eee;
  6181. padding: 13px 15px;
  6182. background: #fff;
  6183. width: 100%;
  6184. min-height: 100px;
  6185. transition: .3s;
  6186. }
  6187. .review-input textarea:focus {
  6188. border-color: #ccc;
  6189. }
  6190. .review-input button {
  6191. display: inline-block;
  6192. background: #111;
  6193. color: #fff;
  6194. font-size: 14px;
  6195. font-weight: 500;
  6196. border-radius: 4px;
  6197. padding: 12px 35px 12px 35px;
  6198. -webkit-transition: all .4s ease;
  6199. -moz-transition: all .4s ease;
  6200. transition: all .4s ease;
  6201. margin-top: 20px;
  6202. }
  6203. .review-input button:hover {
  6204. background: #f7c605;
  6205. }
  6206. .customer-review {
  6207. margin-top: 30px;
  6208. }
  6209. .customer-review-block {
  6210. background: #fff;
  6211. border-radius: 5px;
  6212. border: 1px solid #eee;
  6213. padding: 20px;
  6214. }
  6215. .customer-review-block h5 {
  6216. display: inline-block;
  6217. color: #111;
  6218. font-size: 17px;
  6219. font-weight: 600;
  6220. line-height: 1;
  6221. margin: 0px;
  6222. }
  6223. .customer-review-block h5:after {
  6224. content: none;
  6225. }
  6226. .customer-review-block strong {
  6227. display: inline-block;
  6228. color: #f7c605;
  6229. font-size: 13px;
  6230. font-weight: 500;
  6231. line-height: 1;
  6232. margin-left: 15px;
  6233. }
  6234. .customer-review-block p {
  6235. font-size: 15px;
  6236. color: #888;
  6237. line-height: 1.9;
  6238. font-weight: 400;
  6239. margin-bottom: 15px;
  6240. }
  6241. .customer-review-stars {
  6242. text-align: center;
  6243. margin: 10px 0px;
  6244. }
  6245. .customer-review-stars i {
  6246. color: #f9d100;
  6247. font-size: 13.5px;
  6248. }
  6249. /*-----------------------------------------
  6250. 34. Shop Products
  6251. -------------------------------------------*/
  6252. /*-----------
  6253. Grid Style
  6254. -------------*/
  6255. .shop-grid {
  6256. border: 1px solid #ececec;
  6257. border-radius: 5px;
  6258. background: #fff;
  6259. overflow: hidden;
  6260. padding: 15px;
  6261. margin: 20px 0px;
  6262. -webkit-box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.16);
  6263. -moz-box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.16);
  6264. box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.08);
  6265. -webkit-transition-duration: 0.5s;
  6266. transition-duration: 0.5s;
  6267. }
  6268. .shop-grid:hover {
  6269. -webkit-box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.16);
  6270. -moz-box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.16);
  6271. box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.20);
  6272. }
  6273. .shop-grid-img {
  6274. position: relative;
  6275. overflow: hidden;
  6276. width: 100%;
  6277. }
  6278. .shop-grid-img img {
  6279. width: 100%;
  6280. height: auto;
  6281. }
  6282. .shop-grid:hover .shop-grid-img img {
  6283. transform: scale(1.06);
  6284. }
  6285. .shop-grid-info {
  6286. padding: 5px 0px 20px 0px;
  6287. }
  6288. .shop-grid-info h4 {
  6289. color: #111;
  6290. font-size: 18px;
  6291. font-weight: 400;
  6292. margin-bottom: 3px;
  6293. }
  6294. .shop-grid-info h4 a {
  6295. color: #111;
  6296. -webkit-transition-duration: 0.5s;
  6297. transition-duration: 0.5s;
  6298. }
  6299. .shop-grid-info h4 a:hover {
  6300. color: #f7c605;
  6301. }
  6302. .shop-grid-info span {
  6303. color: #ccc;
  6304. font-size: 14px;
  6305. font-weight: 400;
  6306. letter-spacing: 1px;
  6307. }
  6308. .shop-grid-info h5 {
  6309. color: #f7c605;
  6310. font-size: 22px;
  6311. font-weight: 400;
  6312. text-align: right;
  6313. margin-top: 7px;
  6314. word-break: break-word;
  6315. -webkit-transition-duration: 0.5s;
  6316. transition-duration: 0.5s;
  6317. }
  6318. .shop-grid:hover .shop-grid-info h5 {
  6319. color: #f7c605;
  6320. }
  6321. /*-----------------
  6322. Grid Classic Style
  6323. -------------------*/
  6324. .classic-shop {
  6325. border: 1px solid #ececec;
  6326. border-radius: 5px;
  6327. -webkit-box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.16);
  6328. -moz-box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.16);
  6329. box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.10);
  6330. margin: 20px 0px;
  6331. -webkit-transition-duration: 0.5s;
  6332. transition-duration: 0.5s;
  6333. }
  6334. .classic-shop:hover {
  6335. -webkit-box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.16);
  6336. -moz-box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.16);
  6337. box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.20);
  6338. }
  6339. .classic-shop-img {
  6340. position: relative;
  6341. overflow: hidden;
  6342. width: 100%;
  6343. }
  6344. .classic-shop-img img {
  6345. display: block;
  6346. width: 100%;
  6347. height: auto;
  6348. }
  6349. .shop-box-overlay {
  6350. position: absolute;
  6351. bottom: 0;
  6352. width: 100%;
  6353. text-align: center;
  6354. }
  6355. .classic-shop:hover .classic-shop-img img {
  6356. transform: scale(1.06);
  6357. }
  6358. .shop-box-overlay h4 {
  6359. color: #fff;
  6360. font-size: 15px;
  6361. font-weight: 500;
  6362. letter-spacing: 1px;
  6363. -webkit-transition-duration: 0.5s;
  6364. transition-duration: 0.5s;
  6365. }
  6366. .shop-box-overlay h4 span {
  6367. color: #fff;
  6368. font-size: 15px;
  6369. margin-right: 10px;
  6370. -webkit-transition-duration: 0.5s;
  6371. transition-duration: 0.5s;
  6372. }
  6373. .shop-to-card {
  6374. background: #f7c605;
  6375. padding: 15px 5px 15px 5px;
  6376. -webkit-transition-duration: 0.5s;
  6377. transition-duration: 0.5s;
  6378. }
  6379. .shop-to-card:hover {
  6380. background: rgba(255, 255, 255, 0.5)
  6381. }
  6382. .shop-to-card:hover h4 {
  6383. color: #f7c605;
  6384. }
  6385. .shop-to-card:hover h4 span {
  6386. color: #111;
  6387. }
  6388. .shop-buy {
  6389. background: #111;
  6390. padding: 15px 5px 15px 5px;
  6391. -webkit-transition-duration: 0.5s;
  6392. transition-duration: 0.5s;
  6393. }
  6394. .shop-buy:hover {
  6395. background: rgba(255, 255, 255, 0.5)
  6396. }
  6397. .shop-buy:hover h4 {
  6398. color: #f7c605;
  6399. }
  6400. .shop-buy:hover h4 span {
  6401. color: #111;
  6402. }
  6403. .classic-shop-text {
  6404. text-align: center;
  6405. padding: 15px 0;
  6406. }
  6407. .classic-shop-text h4 a {
  6408. color: #111;
  6409. font-size: 22px;
  6410. font-weight: 500;
  6411. -webkit-transition-duration: 0.5s;
  6412. transition-duration: 0.5s;
  6413. }
  6414. .classic-shop:hover .classic-shop-text h4 a {
  6415. color: #f7c605;
  6416. }
  6417. .classic-shop-text h5 {
  6418. color: #f7c605;
  6419. font-size: 18px;
  6420. font-weight: 500;
  6421. margin-top: 7px;
  6422. }
  6423. .shop-grid-rating {
  6424. margin-top: 15px;
  6425. }
  6426. .shop-grid-rating li {
  6427. display: inline-block;
  6428. }
  6429. .shop-grid-rating li i {
  6430. color: #111;
  6431. font-size: 17px;
  6432. margin: 0px 1px;
  6433. }
  6434. /*-----------
  6435. Shop Cart
  6436. -------------*/
  6437. .shop-cart-box {
  6438. width: 100%;
  6439. display: inline-block;
  6440. border: 1px solid #ececec;
  6441. margin: 5px 0px;
  6442. padding: 10px 0px;
  6443. }
  6444. .shop-cart-box .bx {
  6445. margin-bottom: 30px;
  6446. }
  6447. .button-close {
  6448. display: block;
  6449. padding: 35px 12px;
  6450. }
  6451. @media (max-width: 991px) {
  6452. .button-close {
  6453. display: block;
  6454. padding: 5px 0px;
  6455. }
  6456. }
  6457. @media (max-width: 767px) {
  6458. .button-close {
  6459. display: block;
  6460. padding: 35px 0px;
  6461. }
  6462. }
  6463. .button-close a i {
  6464. color: #fff;
  6465. font-size: 20px;
  6466. font-weight: 600;
  6467. padding: 5px;
  6468. background: #f7c605;
  6469. border-radius: 3px;
  6470. -webkit-transition-duration: 0.4s;
  6471. transition-duration: 0.4s;
  6472. }
  6473. .button-close a i:hover {
  6474. background: #888;
  6475. }
  6476. .shop-cart-box-img img {
  6477. width: 100%;
  6478. height: auto;
  6479. }
  6480. .shop-cart-box-info {
  6481. display: block;
  6482. padding: 20px 0px 0px 20px;
  6483. }
  6484. @media (max-width: 767px) {
  6485. .shop-cart-box-info {
  6486. display: block;
  6487. padding: 20px 0px 0px 0px;
  6488. }
  6489. }
  6490. .shop-cart-box-info h4 {
  6491. color: #111;
  6492. font-size: 20px;
  6493. font-weight: 500;
  6494. }
  6495. .shop-cart-box-info span {
  6496. color: #f7c605;
  6497. font-size: 15px;
  6498. font-weight: 400;
  6499. }
  6500. .shop-cart-box-quantity {
  6501. padding-top: 20px;
  6502. }
  6503. .shop-cart-box-quantity input {
  6504. max-width: 60px;
  6505. box-shadow: none;
  6506. display: inline-block;
  6507. }
  6508. .form-control {
  6509. color: #999;
  6510. font-size: 14px;
  6511. line-height: inherit;
  6512. border: 1px solid #ececec;
  6513. border-radius: 2px;
  6514. padding: 5px 12px;
  6515. transition: 0.2s linear;
  6516. }
  6517. .form-control:focus {
  6518. box-shadow: none;
  6519. border-color: #999;
  6520. }
  6521. .shop-cart-box-quantity h6 {
  6522. display: inline-block;
  6523. font-size: 14px;
  6524. margin-right: 5px;
  6525. }
  6526. .shop-cart-box-price {
  6527. display: block;
  6528. padding-top: 20px;
  6529. }
  6530. .shop-cart-box-price h5 {
  6531. color: #666;
  6532. font-size: 25px;
  6533. font-weight: 300;
  6534. margin-right: 15px;
  6535. }
  6536. @media (max-width: 991px) {
  6537. .shop-cart-box-price h5 {
  6538. font-size: 20px;
  6539. }
  6540. }
  6541. @media (max-width: 767px) {
  6542. .shop-cart-box-price h5 {
  6543. color: #666;
  6544. font-size: 25px;
  6545. font-weight: 300;
  6546. margin-right: 15px;
  6547. }
  6548. }
  6549. .shop-cart-info-price {
  6550. padding: 20px;
  6551. border: 1px solid #ececec;
  6552. margin: 5px 0px;
  6553. }
  6554. .right-info-price li {
  6555. color: #666;
  6556. font-size: 16px;
  6557. font-weight: 500;
  6558. line-height: 160%;
  6559. padding: 10px 0px;
  6560. }
  6561. .right-info-price li h6 {
  6562. float: right;
  6563. color: #666;
  6564. font-size: 16px;
  6565. font-weight: 500;
  6566. }
  6567. .total-price {
  6568. margin-top: 15px;
  6569. padding-top: 15px;
  6570. border-top: 1px solid #ececec;
  6571. }
  6572. .total-price p {
  6573. color: #444;
  6574. font-size: 17px;
  6575. font-weight: 500;
  6576. }
  6577. .total-price p strong {
  6578. float: right;
  6579. color: #444;
  6580. font-size: 17px;
  6581. font-weight: 500;
  6582. }
  6583. /*-----------------------------------------
  6584. 35. 404 (Page)
  6585. -------------------------------------------*/
  6586. .error-box {
  6587. text-align: center;
  6588. position: relative;
  6589. width: 100%;
  6590. height: 100%;
  6591. margin: 0 auto;
  6592. text-align: center;
  6593. }
  6594. .error-box-text {
  6595. z-index: 999;
  6596. position: relative;
  6597. top: -350px;
  6598. }
  6599. .error-box-text h1 {
  6600. font-size: 200px;
  6601. color: #f7c605;
  6602. line-height: 1;
  6603. }
  6604. .error-box-text h3 {
  6605. font-size: 40px;
  6606. color: #111;
  6607. }
  6608. .error-box-text h4 {
  6609. font-size: 20px;
  6610. color: #333;
  6611. margin-top: 20px;
  6612. }
  6613. .back-box {
  6614. z-index: -999999;
  6615. background: #f9f9f9;
  6616. position: relative;
  6617. top: 150px;
  6618. padding: 50px;
  6619. }
  6620. .error-box h2 {
  6621. color: rgba(204, 204, 204, 0.2);
  6622. font-size: 250px;
  6623. font-weight: 600;
  6624. letter-spacing: 10px;
  6625. text-transform: uppercase;
  6626. }
  6627. @media (max-width: 900px) {
  6628. .error-box h2 {
  6629. font-size: 150px;
  6630. }
  6631. .error-box-text {
  6632. top: -200px;
  6633. }
  6634. }
  6635. @media (max-width: 767px) {
  6636. .error-box {
  6637. padding: 30px;
  6638. }
  6639. .back-box {
  6640. display: none;
  6641. }
  6642. .error-box-text {
  6643. top: 50px;
  6644. }
  6645. .error-box-text h1 {
  6646. font-size: 100px;
  6647. }
  6648. }
  6649. /*-----------------------------------------
  6650. 36. Contact
  6651. -------------------------------------------*/
  6652. /*-----------
  6653. Style 1
  6654. -------------*/
  6655. .contact-form input {
  6656. font-weight: 500 !important;
  6657. border-radius: 5px;
  6658. font-size: 13px;
  6659. border: 1px solid #f6f7f8;
  6660. background: #f6f7f8;
  6661. color: #777 !important;
  6662. outline: none;
  6663. width: 100%;
  6664. padding: 14px;
  6665. margin: 10px 0px;
  6666. -webkit-transition-duration: 0.4s;
  6667. transition-duration: 0.4s;
  6668. }
  6669. .contact-form textarea {
  6670. font-weight: 500 !important;
  6671. border-radius: 5px;
  6672. font-size: 13px;
  6673. border: 1px solid #f6f7f8;
  6674. background: #f6f7f8;
  6675. color: #777 !important;
  6676. outline: none;
  6677. width: 100%;
  6678. padding: 14px;
  6679. margin: 10px 0px;
  6680. margin-bottom: 5px;
  6681. min-height: 200px;
  6682. overflow: hidden;
  6683. -webkit-transition-duration: 0.4s;
  6684. transition-duration: 0.4s;
  6685. }
  6686. .contact-form input:focus, .contact-form textarea:focus {
  6687. background: #fff;
  6688. border-color: #ececec;
  6689. }
  6690. .contact-form button {
  6691. display: inline-block;
  6692. background: #111;
  6693. color: #fff;
  6694. font-size: 14px;
  6695. width: 100%;
  6696. font-weight: 500;
  6697. border-radius: 10px;
  6698. padding: 15px 30px 15px 30px;
  6699. -webkit-transition: all .4s ease;
  6700. -moz-transition: all .4s ease;
  6701. transition: all .4s ease;
  6702. margin-top: 15px;
  6703. }
  6704. .contact-form button:hover {
  6705. background: #f7c605;
  6706. }
  6707. /*INFO*/
  6708. .contact-info-box {
  6709. padding: 0px 15px;
  6710. }
  6711. .contact-info-section {
  6712. border-bottom: 1px solid #ececec;
  6713. padding: 25px 0px;
  6714. margin-bottom: 0px;
  6715. -webkit-transition-duration: .5s;
  6716. transition-duration: .5s;
  6717. }
  6718. .contact-info-section i {
  6719. width: 60px;
  6720. height: 60px;
  6721. padding-top: 17px;
  6722. border-radius: 50%;
  6723. background: #f7c605;
  6724. color: #fff;
  6725. font-size: 25px;
  6726. margin-top: 5px;
  6727. }
  6728. .contact-info-section h4 {
  6729. color: #111;
  6730. font-size: 18px;
  6731. font-weight: 500;
  6732. margin-bottom: 10px;
  6733. }
  6734. .contact-info-section p {
  6735. color: #999;
  6736. font-size: 15px;
  6737. font-weight: 400;
  6738. }
  6739. #map {
  6740. height: 400px;
  6741. width: 100%;
  6742. }
  6743. /*-----------
  6744. Style 2
  6745. -------------*/
  6746. .contact-box {
  6747. text-align: center;
  6748. background: #fff;
  6749. border: 1px solid #ececec;
  6750. border-radius: 2px;
  6751. -webkit-box-shadow: 0 20px 80px rgba(0, 0, 0, 0.12);
  6752. box-shadow: 0 20px 80px rgba(0, 0, 0, 0.12);
  6753. -webkit-transition-duration: .3s;
  6754. margin: 10px 0px 10px 0px;
  6755. padding: 20px 0px 20px 0px;
  6756. }
  6757. .contact-box i {
  6758. color: #f7c605;
  6759. font-size: 35px;
  6760. margin: 10px 0px 20px 0px;
  6761. }
  6762. .contact-box h4 {
  6763. color: #111;
  6764. font-size: 18px;
  6765. font-weight: 500;
  6766. margin: 0px 0px 5px 0px;
  6767. }
  6768. .contact-box span {
  6769. color: #999;
  6770. font-size: 14px;
  6771. }
  6772. /*-----------
  6773. Style 3
  6774. -------------*/
  6775. .contact-country-one {
  6776. background-size: cover;
  6777. width: 100%;
  6778. padding: 120px 70px 50px 70px;
  6779. }
  6780. .contact-country-one i {
  6781. color: #fff;
  6782. font-size: 60px;
  6783. }
  6784. .contact-country-one h4 {
  6785. color: #fff;
  6786. font-size: 25px;
  6787. font-weight: 500;
  6788. margin-top: 20px;
  6789. }
  6790. .contact-country {
  6791. margin-top: 20px;
  6792. }
  6793. .contact-country li {
  6794. color: #fff;
  6795. font-size: 15px;
  6796. padding: 10px 0px;
  6797. }
  6798. .contact-country li i {
  6799. color: #fff;
  6800. font-size: 15px;
  6801. margin-right: 15px;
  6802. }
  6803. @media (max-width: 767px) {
  6804. .contact-country-one {
  6805. padding: 40px 20px;
  6806. }
  6807. }
  6808. /*-----------
  6809. Styles 4
  6810. -------------*/
  6811. .contact-data-box-icon {
  6812. border-radius: 10%;
  6813. border: 2px solid #333;
  6814. background: #333;
  6815. width: 80px;
  6816. height: 80px;
  6817. padding: 19px;
  6818. margin: 8px 0px 0px 10px;
  6819. -webkit-transition-duration: 0.6s;
  6820. transition-duration: 0.6s;
  6821. }
  6822. .contact-data-box:hover .contact-data-box-icon {
  6823. background: #fff;
  6824. }
  6825. .contact-data-box-icon i {
  6826. color: #fff;
  6827. font-size: 30px;
  6828. padding: 3px 0px 0px 6px;
  6829. -webkit-transition-duration: 0.4s;
  6830. transition-duration: 0.4s;
  6831. }
  6832. .contact-data-box:hover .contact-data-box-icon i {
  6833. color: #333;
  6834. }
  6835. .contact-data-box-text {
  6836. padding-left: 15px;
  6837. }
  6838. .contact-data-box-text h4 {
  6839. color: #111;
  6840. font-size: 20px;
  6841. font-weight: 400;
  6842. line-height: 160%;
  6843. letter-spacing: 1px;
  6844. }
  6845. .contact-data-box-text h6 {
  6846. color: #777;
  6847. font-size: 15px;
  6848. font-weight: 400;
  6849. line-height: 160%;
  6850. margin-top: 5px;
  6851. }
  6852. /*-----------------------------------------
  6853. 37. Tabs
  6854. -------------------------------------------*/
  6855. /*-----------
  6856. Default Tabs
  6857. -------------*/
  6858. .default-tabs .tabs {
  6859. position: relative;
  6860. }
  6861. .default-tabs .tabs .tab-menu li {
  6862. background: #f7f7f7;
  6863. display: inline-block;
  6864. text-align: center;
  6865. }
  6866. .default-tabs .tabs .tab-menu li a {
  6867. color: #111;
  6868. display: block;
  6869. font-size: 15px;
  6870. font-weight: 500;
  6871. padding: 18px 24px;
  6872. text-decoration: none;
  6873. }
  6874. .default-tabs .tabs .tab-menu li a i {
  6875. color: #f7c605;
  6876. display: inline-block;
  6877. font-size: 15px;
  6878. margin-right: 10px;
  6879. text-decoration: none;
  6880. }
  6881. .default-tabs .tabs .tab-menu li:hover a, .default-tabs .tabs .tabs li:hover i {
  6882. color: #f7c605;
  6883. }
  6884. .default-tabs .tab-menu .active-tab a, .default-tabs .active-tab a i {
  6885. color: #f7c605 !important;
  6886. }
  6887. .default-tabs .tab-menu {
  6888. margin-bottom: 4px;
  6889. }
  6890. @media screen and (max-width: 1200px) {
  6891. .default-tabs .tabs .tab-menu li {
  6892. background: #f7f7f7;
  6893. display: inline-block;
  6894. text-align: center;
  6895. width: auto;
  6896. }
  6897. .default-tabs .tabs .tab-menu li a {
  6898. color: #111;
  6899. display: block;
  6900. font-size: 15px;
  6901. font-weight: 500;
  6902. padding: 18px 24px;
  6903. text-decoration: none;
  6904. }
  6905. }
  6906. @media screen and (max-width: 767px) {
  6907. .default-tabs .tabs .tab-menu li {
  6908. display: block;
  6909. width: 100%;
  6910. text-align: center;
  6911. margin-bottom: 4px;
  6912. }
  6913. .default-tabs .tab-menu .tabs li a {
  6914. display: block;
  6915. padding: 18px 14px;
  6916. }
  6917. .default-tabs .tab-menu .tabs li i {
  6918. font-size: 25px;
  6919. }
  6920. }
  6921. .tab-body {
  6922. display: block;
  6923. position: relative;
  6924. padding: 25px;
  6925. background: #f7f7f7 !important;
  6926. }
  6927. .tab-body h2 {
  6928. font-size: 30px;
  6929. color: #111;
  6930. font-weight: 300;
  6931. margin-bottom: 10px;
  6932. }
  6933. .tab-body h3 {
  6934. font-size: 25px;
  6935. color: #111;
  6936. font-weight: 500;
  6937. margin-bottom: 10px;
  6938. }
  6939. .tab-body h4 {
  6940. font-size: 20px;
  6941. color: #111;
  6942. font-weight: 500;
  6943. margin-bottom: 10px;
  6944. }
  6945. .tab-body h5 {
  6946. font-size: 15px;
  6947. color: #111;
  6948. font-weight: 500;
  6949. margin-bottom: 10px;
  6950. }
  6951. .tab-body h2:after, .tab-body h3:after, .tab-body h4:after, .tab-body h5:after {
  6952. content: '';
  6953. display: block;
  6954. width: 100px;
  6955. height: 2px;
  6956. background: #f7c605;
  6957. margin-top: 10px;
  6958. margin-bottom: 10px;
  6959. }
  6960. .tab-body p {
  6961. font-size: 15px;
  6962. color: #999;
  6963. line-height: 1.7;
  6964. font-weight: 400;
  6965. margin: 5px;
  6966. }
  6967. /*-----------
  6968. Icon Tabs
  6969. -------------*/
  6970. .big-icon-tabs .tabs {
  6971. position: relative;
  6972. }
  6973. .big-icon-tabs .tabs .tab-menu li {
  6974. display: inline-block;
  6975. text-align: center;
  6976. margin-right: 5px;
  6977. }
  6978. .big-icon-tabs .tabs .tab-menu li:last-child {
  6979. margin-right: 0px;
  6980. }
  6981. .big-icon-tabs .tabs .tab-menu li a {
  6982. background: #ececec;
  6983. color: #111;
  6984. display: block;
  6985. font-size: 15px;
  6986. font-weight: 500;
  6987. padding: 18px 24px;
  6988. text-decoration: none;
  6989. border-top: 2px solid #ececec;
  6990. }
  6991. .big-icon-tabs .tabs .tab-menu li a i {
  6992. color: #f7c605;
  6993. display: block;
  6994. font-size: 40px;
  6995. margin-bottom: 10px;
  6996. text-decoration: none;
  6997. }
  6998. .big-icon-tabs .tabs .tab-menu li:hover a, .big-icon-tabs .tabs .tabs li:hover i {
  6999. color: #f7c605;
  7000. }
  7001. .big-icon-tabs .tab-menu .active-tab a, .big-icon-tabs .active-tab a i {
  7002. border-color: #f7c605 !important;
  7003. }
  7004. .big-icon-tabs .tab-menu .active-tab a {
  7005. background: #f7f7f7 !important;
  7006. }
  7007. @media screen and (max-width: 1200px) {
  7008. .big-icon-tabs .tabs .tab-menu li {
  7009. background: #f7f7f7;
  7010. display: inline-block;
  7011. text-align: center;
  7012. width: auto;
  7013. }
  7014. .big-icon-tabs .tabs .tab-menu li a {
  7015. color: #111;
  7016. display: block;
  7017. font-size: 15px;
  7018. font-weight: 500;
  7019. padding: 18px 24px;
  7020. text-decoration: none;
  7021. }
  7022. }
  7023. @media screen and (max-width: 767px) {
  7024. .big-icon-tabs .tabs .tab-menu li {
  7025. display: block;
  7026. width: 100%;
  7027. text-align: center;
  7028. margin-bottom: 4px;
  7029. }
  7030. .big-icon-tabs .tab-menu .tabs li a {
  7031. display: block;
  7032. }
  7033. .big-icon-tabs .tab-menu .tabs li i {
  7034. font-size: 25px;
  7035. }
  7036. }
  7037. /*-----------------------------------------
  7038. 38. Owl Carousel
  7039. -------------------------------------------*/
  7040. .custom-dot {
  7041. display: inline-block;
  7042. z-index: 1;
  7043. margin-top: 30px;
  7044. }
  7045. .custom-dot span {
  7046. width: 12px;
  7047. height: 12px;
  7048. margin: 5px 7px;
  7049. background: #cecece;
  7050. cursor: pointer;
  7051. display: block;
  7052. border: 1px solid #fff;
  7053. -webkit-backface-visibility: visible;
  7054. border-radius: 30px;
  7055. -webkit-transition-duration: .3s;
  7056. transition-duration: .3s;
  7057. }
  7058. .custom-dot span:hover {
  7059. background: #aaa;
  7060. -webkit-backface-visibility: visible;
  7061. border-radius: 30px;
  7062. }
  7063. .custom-dot.active span {
  7064. width: 12px;
  7065. height: 12px;
  7066. background: #f7c605;
  7067. -webkit-transition-duration: .3s;
  7068. transition-duration: .3s;
  7069. }
  7070. .owl-nav i {
  7071. color: #111;
  7072. font-size: 20px;
  7073. padding-top: 10px;
  7074. }
  7075. .owl-nav .owl-prev {
  7076. color: #f7c605;
  7077. font-size: 43px;
  7078. left: 0%;
  7079. text-align: center;
  7080. -webkit-transition: all 0.4s ease 0s;
  7081. transition: all 0.4s ease 0s;
  7082. width: 50px;
  7083. height: 50px;
  7084. background: #fff !important;
  7085. -webkit-box-shadow: 0px 5px 28px 0px rgba(50, 50, 50, 0.1);
  7086. -moz-box-shadow: 0px 5px 28px 0px rgba(50, 50, 50, 0.1);
  7087. box-shadow: 0px 5px 28px 0px rgba(50, 50, 50, 0.1);
  7088. }
  7089. .owl-nav .owl-next {
  7090. color: #f7c605;
  7091. font-size: 43px;
  7092. text-align: center;
  7093. -webkit-transition: all 0.4s ease 0s;
  7094. transition: all 0.4s ease 0s;
  7095. width: 50px;
  7096. height: 50px;
  7097. background: #fff !important;
  7098. -webkit-box-shadow: 0px 5px 28px 0px rgba(50, 50, 50, 0.1);
  7099. -moz-box-shadow: 0px 5px 28px 0px rgba(50, 50, 50, 0.1);
  7100. box-shadow: 0px 5px 28px 0px rgba(50, 50, 50, 0.1);
  7101. }
  7102. /*-----------------------------------------
  7103. 39. Pie Charts
  7104. -------------------------------------------*/
  7105. .pie-chart {
  7106. margin: 20px 0px;
  7107. }
  7108. .pie-chart .chart {
  7109. position: relative;
  7110. display: block;
  7111. width: 120px;
  7112. color: #111;
  7113. text-align: center;
  7114. border-radius: 50%;
  7115. margin: auto;
  7116. }
  7117. .pie-chart-lg .chart {
  7118. width: 190px;
  7119. }
  7120. .pie-chart-md .chart {
  7121. width: 150px;
  7122. }
  7123. .pie-chart-sm .chart {
  7124. width: 130px;
  7125. }
  7126. .pie-chart .chart canvas {
  7127. position: absolute;
  7128. top: 0;
  7129. left: 0;
  7130. }
  7131. .pie-chart .chart-percent {
  7132. margin: 0 0 15px 0
  7133. }
  7134. .pie-chart .percent {
  7135. font-size: 17px;
  7136. font-weight: 600;
  7137. display: inline-block;
  7138. z-index: 2;
  7139. }
  7140. .pie-chart-md .percent {
  7141. font-size: 18px;
  7142. font-weight: 600;
  7143. display: inline-block;
  7144. z-index: 2;
  7145. }
  7146. .percent:after {
  7147. content: '%';
  7148. }
  7149. .pie-chart h4 {
  7150. font-size: 14px;
  7151. font-weight: 600;
  7152. text-align: center;
  7153. margin-top: 15px;
  7154. }
  7155. .pie-chart-md h4 {
  7156. font-size: 18px;
  7157. font-weight: 600;
  7158. text-align: center;
  7159. margin-top: 17px;
  7160. }
  7161. .pie-chart h5 {
  7162. color: #999;
  7163. font-size: 12px;
  7164. font-weight: 500;
  7165. text-align: center;
  7166. margin-top: 15px;
  7167. }
  7168. .pie-chart-md h5 {
  7169. color: #999;
  7170. font-size: 13px;
  7171. font-weight: 500;
  7172. text-align: center;
  7173. margin-top: 7px;
  7174. }
  7175. .pie-chart-lg h4 {
  7176. font-size: 19px;
  7177. font-weight: 600;
  7178. text-align: center;
  7179. margin-top: 17px;
  7180. }
  7181. .pie-chart-lg h5 {
  7182. color: #999;
  7183. font-size: 13px;
  7184. font-weight: 500;
  7185. text-align: center;
  7186. margin-top: 7px;
  7187. }
  7188. .pie-chart-lg .percent {
  7189. font-size: 22px;
  7190. font-weight: 600;
  7191. display: inline-block;
  7192. z-index: 2;
  7193. }
  7194. /*-----------------------------------------
  7195. 40. Chart JS
  7196. -------------------------------------------*/
  7197. .chartjs-tooltip {
  7198. opacity: 1;
  7199. position: absolute;
  7200. background: rgba(0, 0, 0, .7);
  7201. color: white;
  7202. border-radius: 3px;
  7203. -webkit-transition: all .1s ease;
  7204. transition: all .1s ease;
  7205. pointer-events: none;
  7206. -webkit-transform: translate(-50%, 0);
  7207. transform: translate(-50%, 0);
  7208. padding: 4px;
  7209. }
  7210. .chartjs-tooltip-key {
  7211. display: inline-block;
  7212. width: 10px;
  7213. height: 10px;
  7214. }