Você não pode selecionar mais de 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.

1590 linhas
26 KiB

  1. @charset "utf-8";
  2. /* CSS Document */
  3. /******************************
  4. COLOR PALETTE
  5. [Table of Contents]
  6. 1. Fonts
  7. 2. Body and some general stuff
  8. 3. Header
  9. 3.1 Logo
  10. 3.2 Main Navigation
  11. 3.3 Hamburger Menu
  12. 3.4 Full Screen Menu
  13. 4. Home Social
  14. 5. Section Title
  15. 6. Home
  16. 7. Blog Content
  17. 8. Blog Main Content
  18. 9. Blog Post Comment
  19. 10. Reply
  20. 11. Blog Sidebar
  21. 12. Sidebar Title
  22. 13. Sidebar Recent Posts
  23. 14. Sidebar Categories
  24. 15. Sidebar Tabs
  25. 16. Popular Posts
  26. 17. Sidebar Flickr
  27. 18. Sidebar Gallery
  28. 19. Sidebar Quote
  29. 20. Comments
  30. 21. Contact
  31. 22. Footer
  32. ******************************/
  33. /***********
  34. 1. Fonts
  35. ***********/
  36. @import url('https://fonts.googleapis.com/css?family=Montserrat:700|Open+Sans:300,400,600,700,800');
  37. /*********************************
  38. 2. Body and some general stuff
  39. *********************************/
  40. *
  41. {
  42. margin: 0;
  43. padding: 0;
  44. }
  45. body
  46. {
  47. font-family: 'Open Sans', sans-serif;
  48. font-size: 15px;
  49. line-height: 2;
  50. font-weight: 400;
  51. background: #FFFFFF;
  52. color: #6e6e6e;
  53. }
  54. div
  55. {
  56. display: block;
  57. position: relative;
  58. -webkit-box-sizing: border-box;
  59. -moz-box-sizing: border-box;
  60. box-sizing: border-box;
  61. }
  62. ul
  63. {
  64. list-style: none;
  65. margin-bottom: 0px;
  66. }
  67. p
  68. {
  69. font-family: 'Open Sans', sans-serif;
  70. font-size: 15px;
  71. line-height: 2;
  72. font-weight: 400;
  73. color: #6e6e6e;
  74. -webkit-font-smoothing: antialiased;
  75. -webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
  76. text-shadow: rgba(0,0,0,.01) 0 0 1px;
  77. }
  78. p a
  79. {
  80. display: inline;
  81. position: relative;
  82. color: inherit;
  83. border-bottom: solid 1px #ffa07f;
  84. -webkit-transition: all 200ms ease;
  85. -moz-transition: all 200ms ease;
  86. -ms-transition: all 200ms ease;
  87. -o-transition: all 200ms ease;
  88. transition: all 200ms ease;
  89. }
  90. a, a:hover, a:visited, a:active, a:link
  91. {
  92. text-decoration: none;
  93. -webkit-font-smoothing: antialiased;
  94. -webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
  95. text-shadow: rgba(0,0,0,.01) 0 0 1px;
  96. }
  97. p a:active
  98. {
  99. position: relative;
  100. color: #FF6347;
  101. }
  102. p a:hover
  103. {
  104. color: #FFFFFF;
  105. background: #ffa07f;
  106. }
  107. p a:hover::after
  108. {
  109. opacity: 0.2;
  110. }
  111. ::selection
  112. {
  113. background: #fde0db;
  114. color: #ff4200;
  115. }
  116. p::selection
  117. {
  118. background: #fde0db;
  119. }
  120. h1{font-size: 48px;}
  121. h2{font-size: 30px;}
  122. h3{font-size: 18px;}
  123. h4{font-size: 14px;}
  124. h5{font-size: 11px;}
  125. h1, h2, h3, h4, h5, h6
  126. {
  127. color: #282828;
  128. -webkit-font-smoothing: antialiased;
  129. -webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
  130. text-shadow: rgba(0,0,0,.01) 0 0 1px;
  131. }
  132. h1::selection,
  133. h2::selection,
  134. h3::selection,
  135. h4::selection,
  136. h5::selection,
  137. h6::selection
  138. {
  139. }
  140. .form-control
  141. {
  142. color: #db5246;
  143. }
  144. section
  145. {
  146. display: block;
  147. position: relative;
  148. box-sizing: border-box;
  149. }
  150. .clear
  151. {
  152. clear: both;
  153. }
  154. .clearfix::before, .clearfix::after
  155. {
  156. content: "";
  157. display: table;
  158. }
  159. .clearfix::after
  160. {
  161. clear: both;
  162. }
  163. .clearfix
  164. {
  165. zoom: 1;
  166. }
  167. .float_left
  168. {
  169. float: left;
  170. }
  171. .float_right
  172. {
  173. float: right;
  174. }
  175. .trans_200
  176. {
  177. -webkit-transition: all 200ms ease;
  178. -moz-transition: all 200ms ease;
  179. -ms-transition: all 200ms ease;
  180. -o-transition: all 200ms ease;
  181. transition: all 200ms ease;
  182. }
  183. .trans_300
  184. {
  185. -webkit-transition: all 300ms ease;
  186. -moz-transition: all 300ms ease;
  187. -ms-transition: all 300ms ease;
  188. -o-transition: all 300ms ease;
  189. transition: all 300ms ease;
  190. }
  191. .trans_400
  192. {
  193. -webkit-transition: all 400ms ease;
  194. -moz-transition: all 400ms ease;
  195. -ms-transition: all 400ms ease;
  196. -o-transition: all 400ms ease;
  197. transition: all 400ms ease;
  198. }
  199. .trans_500
  200. {
  201. -webkit-transition: all 500ms ease;
  202. -moz-transition: all 500ms ease;
  203. -ms-transition: all 500ms ease;
  204. -o-transition: all 500ms ease;
  205. transition: all 500ms ease;
  206. }
  207. .fill_height
  208. {
  209. height: 100%;
  210. }
  211. .super_container
  212. {
  213. width: 100%;
  214. overflow: hidden;
  215. padding-left: 45px;
  216. padding-right: 45px;
  217. }
  218. .button
  219. {
  220. width: 187px;
  221. height: 66px;
  222. background: #ff4200;
  223. overflow: hidden;
  224. }
  225. .line_button
  226. {
  227. border: solid 1px #FFFFFF;
  228. }
  229. .button a
  230. {
  231. display: block;
  232. width: 100%;
  233. color: #FFFFFF;
  234. font-size: 11px;
  235. font-weight: 300;
  236. line-height: 66px;
  237. text-transform: uppercase;
  238. letter-spacing: 6.7px;
  239. }
  240. .button a img
  241. {
  242. display: inline-block;
  243. width: 13px !important;
  244. height: 7px;
  245. margin-left: 4px;
  246. }
  247. .button a::after
  248. {
  249. display: block;
  250. position: absolute;
  251. top: -50%;
  252. left: -70px;
  253. width: 60px;
  254. height: 200%;
  255. background: rgba(255,255,255,0.1);
  256. content: '';
  257. -webkit-transform: rotate(12.5deg);
  258. -moz-transform: rotate(12.5deg);
  259. -ms-transform: rotate(12.5deg);
  260. -o-transform: rotate(12.5deg);
  261. transform: rotate(12.5deg);
  262. -webkit-transition: all 400ms ease;
  263. -moz-transition: all 400ms ease;
  264. -ms-transition: all 400ms ease;
  265. -o-transition: all 400ms ease;
  266. transition: all 400ms ease;
  267. z-index: 0;
  268. }
  269. .button a:hover::after
  270. {
  271. left: calc(100% + 70px);
  272. }
  273. .parallax-window
  274. {
  275. min-height: 386px;
  276. background: transparent;
  277. }
  278. .prlx_parent
  279. {
  280. overflow: hidden;
  281. }
  282. .prlx
  283. {
  284. height: 130% !important;
  285. }
  286. /*********************************
  287. 3. Header
  288. *********************************/
  289. .header
  290. {
  291. position: fixed;
  292. top: 0;
  293. left: 0;
  294. width: 100%;
  295. height: 110px;
  296. padding-left: 48px;
  297. padding-right: 48px;
  298. z-index: 20;
  299. background: #FFFFFF;
  300. -webkit-transition: all 300ms ease;
  301. -moz-transition: all 300ms ease;
  302. -ms-transition: all 300ms ease;
  303. -o-transition: all 300ms ease;
  304. transition: all 300ms ease;
  305. }
  306. /*********************************
  307. 3.1 Logo
  308. *********************************/
  309. .logo_container
  310. {
  311. flex-basis: 50%;
  312. }
  313. .logo
  314. {
  315. margin-left: 7px;
  316. }
  317. .logo a
  318. {
  319. font-family: 'Montserrat', sans-serif;
  320. font-size: 30px;
  321. font-weight: 700;
  322. color: #171717;
  323. text-transform: uppercase;
  324. }
  325. .logo span:first-of-type
  326. {
  327. position: absolute;
  328. top: 0;
  329. left: -5px;
  330. color: #ff4200;
  331. z-index: -1;
  332. }
  333. .logo span:last-of-type
  334. {
  335. color: #ff4200;
  336. }
  337. /*********************************
  338. 3.2 Main Navigation
  339. *********************************/
  340. .main_nav
  341. {
  342. margin-right: -3px;
  343. height: 100%;
  344. flex-basis: 200%;
  345. text-align: right;
  346. }
  347. .nav_items
  348. {
  349. height: 100%;
  350. }
  351. .nav_items li
  352. {
  353. display: inline-block;
  354. margin-left: 35px;
  355. height: 100%;
  356. }
  357. .nav_items li a
  358. {
  359. font-size: 12px;
  360. font-weight: 600;
  361. text-transform: uppercase;
  362. color: #0b1033;
  363. letter-spacing: 3.5px;
  364. height: 100%;
  365. display: -webkit-box;
  366. display: -moz-box;
  367. display: -ms-flexbox;
  368. display: -webkit-flex;
  369. display: flex;
  370. flex-direction: column;
  371. justify-content: center;
  372. align-items: center;
  373. padding-left: 14px;
  374. padding-right: 10px;
  375. }
  376. .nav_items li.active
  377. {
  378. background: #ff4200;
  379. }
  380. .nav_items li.active a
  381. {
  382. color: #FFFFFF;
  383. }
  384. .nav_items li:hover
  385. {
  386. background: #ff4200;
  387. }
  388. .nav_items li:hover a
  389. {
  390. color: #FFFFFF;
  391. }
  392. /*********************************
  393. 3.3 Hamburger Menu
  394. *********************************/
  395. .hamburger_container
  396. {
  397. display: none;
  398. cursor: pointer;
  399. padding: 10px;
  400. margin-right: -10px;
  401. flex-basis: 50%;
  402. text-align: right;
  403. }
  404. .hamburger_text
  405. {
  406. display: inline-block;
  407. margin-right: 7px;
  408. font-weight: 400;
  409. color: #171717;
  410. }
  411. .hamburger_icon
  412. {
  413. position: relative;
  414. display: inline-block;
  415. width: 22px;
  416. height: 3px;
  417. background: #171717;
  418. margin-bottom: 4px;
  419. }
  420. .hamburger_icon::before,
  421. .hamburger_icon::after
  422. {
  423. display: block;
  424. position: absolute;
  425. left: 0;
  426. width: 22px;
  427. height: 3px;
  428. background: #171717;
  429. content: '';
  430. -webkit-transition: all 200ms ease;
  431. -moz-transition: all 200ms ease;
  432. -ms-transition: all 200ms ease;
  433. -o-transition: all 200ms ease;
  434. transition: all 200ms ease;
  435. }
  436. .hamburger_icon.active
  437. {
  438. background: transparent;
  439. }
  440. .hamburger_icon.active::before
  441. {
  442. top: -9px;
  443. transform: translateY(9px) rotate(45deg);
  444. }
  445. .hamburger_icon.active::after
  446. {
  447. top: 9px;
  448. transform: translateY(-9px) rotate(-45deg);
  449. }
  450. .hamburger_icon::before
  451. {
  452. top: -6px;
  453. }
  454. .hamburger_icon::after
  455. {
  456. top: 6px;
  457. }
  458. .hamburger_container:hover .hamburger_icon::before
  459. {
  460. top: -8px;
  461. }
  462. .hamburger_container:hover .hamburger_icon::after
  463. {
  464. top: 8px;
  465. }
  466. .hamburger_container:hover .hamburger_icon.active::before
  467. {
  468. -webkit-transform: none;
  469. -moz-transform: none;
  470. -ms-transform: none;
  471. -o-transform: none;
  472. transform: none;
  473. top: 0;
  474. }
  475. .hamburger_container:hover .hamburger_icon.active::after
  476. {
  477. -webkit-transform: none;
  478. -moz-transform: none;
  479. -ms-transform: none;
  480. -o-transform: none;
  481. transform: none;
  482. top: 0;
  483. }
  484. /*********************************
  485. 3.4 Full Screen Menu
  486. *********************************/
  487. .fs_menu_container
  488. {
  489. position: fixed;
  490. top: -100vh;
  491. left: 0;
  492. width: 100vw;
  493. height: 100vh;
  494. background: #FFFFFF;
  495. z-index: 19;
  496. -webkit-transition: all 1s 0s cubic-bezier(1,0,0,1);
  497. -moz-transition: all 1s 0s cubic-bezier(1,0,0,1);
  498. -ms-transition: all 1s 0s cubic-bezier(1,0,0,1);
  499. -o-transition: all 1s 0s cubic-bezier(1,0,0,1);
  500. transition: all 1s 0s cubic-bezier(1,0,0,1);
  501. padding-left: 48px;
  502. padding-right: 63px;
  503. padding-top: 150px;
  504. text-align: right;
  505. }
  506. .fs_menu_shapes
  507. {
  508. position: absolute;
  509. bottom: 32px;
  510. left: -70px;
  511. width: 25%;
  512. }
  513. .fs_menu_shapes img
  514. {
  515. width: 100%;
  516. }
  517. .fs_menu_container.active
  518. {
  519. top: 0;
  520. }
  521. .fs_menu_list
  522. {
  523. display: inline-block;
  524. }
  525. .fs_menu_list li
  526. {
  527. overflow: hidden;
  528. }
  529. .fs_menu_list li a
  530. {
  531. display: inline-block;
  532. font-size: 62px;
  533. font-weight: 700;
  534. color: #171717;
  535. line-height: 1.4;
  536. -webkit-transform: translateY(-100%);
  537. -moz-transform: translateY(-100%);
  538. -ms-transform: translateY(-100%);
  539. -o-transform: translateY(-100%);
  540. transform: translateY(-100%);
  541. -webkit-transition: all 600ms 600ms cubic-bezier(.19,1,.22,1);
  542. -moz-transition: all 600ms 600ms cubic-bezier(.19,1,.22,1);
  543. -ms-transition: all 600ms 600ms cubic-bezier(.19,1,.22,1);
  544. -o-transition: all 600ms 600ms cubic-bezier(.19,1,.22,1);
  545. transition: all 1600ms cubic-bezier(.19,1,.22,1);
  546. }
  547. .fs_menu_list li:first-child a {transition-delay: 600ms;}
  548. .fs_menu_list li:nth-child(2) a {transition-delay: 670ms;}
  549. .fs_menu_list li:nth-child(3) a {transition-delay: 740ms;}
  550. .fs_menu_list li:nth-child(4) a {transition-delay: 810ms;}
  551. .fs_menu_list li:nth-child(5) a {transition-delay: 880ms;}
  552. .fs_menu_list li:nth-child(6) a {transition-delay: 950ms;}
  553. .fs_menu_list li:nth-child(7) a {transition-delay: 900ms;}
  554. .fs_menu_list li:nth-child(8) a {transition-delay: 950ms;}
  555. .fs_menu_list li:nth-child(9) a {transition-delay: 1000ms;}
  556. .fs_menu_list li:nth-child(10) a {transition-delay: 1050ms;}
  557. .fs_menu_container.active .fs_menu_list li a
  558. {
  559. transform: none;
  560. }
  561. .fs_menu_list li a span
  562. {
  563. position: relative;
  564. }
  565. .fs_menu_list li a span span
  566. {
  567. position: absolute;
  568. top: -1px;
  569. left: -5px;
  570. color: #ff4200;
  571. z-index: -1;
  572. }
  573. .fs_menu_list li a > span::after
  574. {
  575. display: block;
  576. position: absolute;
  577. bottom: 4px;
  578. left: 0;
  579. width: 0%;
  580. height: 3px;
  581. background: #171717;
  582. content: '';
  583. -webkit-transition: all 600ms cubic-bezier(.19,1,.22,1);
  584. -moz-transition: all 600ms cubic-bezier(.19,1,.22,1);
  585. -ms-transition: all 600ms cubic-bezier(.19,1,.22,1);
  586. -o-transition: all 600ms cubic-bezier(.19,1,.22,1);
  587. transition: all 600ms cubic-bezier(.19,1,.22,1);
  588. }
  589. .fs_menu_list li a:hover span::after
  590. {
  591. width: 100%;
  592. }
  593. .fs_social_container
  594. {
  595. position: absolute;
  596. bottom: 0px;
  597. right: 63px;
  598. width: auto;
  599. height: 74px;
  600. z-index: 11;
  601. }
  602. .fs_social li
  603. {
  604. display: inline-block;
  605. margin-left: 10px;
  606. }
  607. .fs_social li a
  608. {
  609. width: 100%;
  610. height: 100%;
  611. padding: 10px;
  612. }
  613. .fs_social li i
  614. {
  615. font-size: 13px;
  616. color: rgba(255,66,0,0.6);
  617. }
  618. .fs_social li:hover i
  619. {
  620. color: rgba(255,66,0,1);
  621. }
  622. /*********************************
  623. 4. Home Social
  624. *********************************/
  625. .home_social_container
  626. {
  627. position: absolute;
  628. top: 110px;
  629. right: 0px;
  630. width: auto;
  631. height: 74px;
  632. background: #ff4200;
  633. z-index: 11;
  634. padding-right: 38px;
  635. padding-left: 45px;
  636. }
  637. .home_social li
  638. {
  639. display: inline-block;
  640. margin-left: 10px;
  641. }
  642. .home_social li a
  643. {
  644. width: 100%;
  645. height: 100%;
  646. padding: 10px;
  647. }
  648. .home_social li i
  649. {
  650. font-size: 13px;
  651. color: rgba(255,255,255,0.6);
  652. }
  653. .home_social li:hover i
  654. {
  655. color: rgba(255,255,255,1);
  656. }
  657. /*********************************
  658. 5. Section Title
  659. *********************************/
  660. .section_title h2
  661. {
  662. display: inline-block;
  663. position: relative;
  664. font-weight: 600;
  665. letter-spacing: 0.2em;
  666. text-transform: uppercase;
  667. color: #FFFFFF;
  668. line-height: 1.35;
  669. margin-bottom: 116px;
  670. }
  671. .section_title h2 span
  672. {
  673. display: block;
  674. position: absolute;
  675. top: 50%;
  676. left: 50%;
  677. -webkit-transform: translate(-50%, -50px);
  678. -moz-transform: translate(-50%, -50px);
  679. -ms-transform: translate(-50%, -50px);
  680. -o-transform: translate(-50%, -50px);
  681. transform: translate(-50%, -50px);
  682. font-size: 72px;
  683. font-weight: 900;
  684. color: #ff0000;
  685. opacity: 0.32;
  686. }
  687. .section_title h2::before
  688. {
  689. display: block;
  690. position: absolute;
  691. bottom: 61px;
  692. left: 50%;
  693. -webkit-transform: translateX(-50%);
  694. -moz-transform: translateX(-50%);
  695. -ms-transform: translateX(-50%);
  696. -o-transform: translateX(-50%);
  697. transform: translateX(calc(-50% - 4px));
  698. width: 2px;
  699. height: 45px;
  700. content: '';
  701. background: #FFFFFF;
  702. }
  703. /*********************************
  704. 6. Home
  705. *********************************/
  706. .home
  707. {
  708. width: 100%;
  709. height: 386px;
  710. margin-top: 110px;
  711. }
  712. .home_background
  713. {
  714. position: absolute;
  715. top: 0;
  716. left: 0;
  717. width: 100%;
  718. height: 100%;
  719. background-repeat: no-repeat;
  720. background-size: cover;
  721. background-position: center center;
  722. }
  723. .services_page_shapes
  724. {
  725. position: absolute;
  726. top: 0;
  727. left: 0;
  728. width: 100%;
  729. height: 100%;
  730. background-repeat: no-repeat;
  731. background-size: cover;
  732. background-position: center center;
  733. pointer-events: none;
  734. }
  735. .home_content
  736. {
  737. margin-top: 154px;
  738. }
  739. .home_content h1
  740. {
  741. font-weight: 300;
  742. color: #FFFFFF;
  743. margin-bottom: 2px;
  744. }
  745. .home_content span
  746. {
  747. font-size: 12px;
  748. font-weight: 600;
  749. color: #FFFFFF;
  750. letter-spacing: 1em;
  751. text-transform: uppercase;
  752. padding-left: 3px;
  753. }
  754. /*********************************
  755. 7. Blog Content
  756. *********************************/
  757. .blog_content
  758. {
  759. width: 100%;
  760. padding-top: 120px;
  761. padding-bottom: 68px;
  762. background: #FFFFFF;
  763. }
  764. /*********************************
  765. 8. Blog Main Content
  766. *********************************/
  767. .blog_main_content
  768. {
  769. width: 100%;
  770. }
  771. .blog_post_image
  772. {
  773. height: 365px;
  774. width: 100%;
  775. }
  776. .blog_post_image_background
  777. {
  778. position: absolute;
  779. top: 0;
  780. left: 0;
  781. width: 100%;
  782. height: 100%;
  783. background-repeat: no-repeat;
  784. background-size: cover;
  785. background-position: center center;
  786. }
  787. .date_box
  788. {
  789. width: 129px;
  790. height: 40px;
  791. background: #ff4200;
  792. margin-top: 35px;
  793. }
  794. .date_box span
  795. {
  796. font-size: 11px;
  797. font-weight: 600;
  798. letter-spacing: 0.2em;
  799. color: #FFFFFF;
  800. text-transform: uppercase;
  801. }
  802. .blog_post_title
  803. {
  804. margin-top: 33px;
  805. font-weight: 600;
  806. color: #1c1c1c;
  807. text-transform: uppercase;
  808. letter-spacing: 0.2em;
  809. }
  810. .blog_post_title:hover
  811. {
  812. color: #5b5b5b;
  813. }
  814. .blog_post_meta
  815. {
  816. text-transform: uppercase;
  817. color: #9a9a9a;
  818. font-size: 11px;
  819. font-weight: 600;
  820. letter-spacing: 0.2em;
  821. margin-top: -3px;
  822. }
  823. .blog_post_meta span
  824. {
  825. position: relative;
  826. padding-right: 34px;
  827. }
  828. .blog_post_meta span::after
  829. {
  830. display: block;
  831. position: absolute;
  832. top: 4px;
  833. right: 16px;
  834. width: 1px;
  835. height: 11px;
  836. content: '';
  837. background: #9a9a9a;
  838. }
  839. .blog_post_meta span:last-of-type
  840. {
  841. padding-right: 0px;
  842. }
  843. .blog_post_meta span:last-of-type::after
  844. {
  845. display: none;
  846. }
  847. .blog_post_text
  848. {
  849. margin-top: 32px;
  850. }
  851. .blog_post_text p
  852. {
  853. margin-bottom: 30px;
  854. }
  855. .blog_post_text p:last-child
  856. {
  857. margin-bottom: 0px;
  858. }
  859. /*********************************
  860. 9. Blog Post Comment
  861. *********************************/
  862. .blog_post_subtitle
  863. {
  864. font-size: 16px;
  865. font-weight: 600;
  866. color: #1c1c1c;
  867. letter-spacing: 0.2em;
  868. text-transform: uppercase;
  869. padding-bottom: 11px;
  870. margin-bottom: 59px;
  871. }
  872. .blog_post_subtitle::after
  873. {
  874. display: block;
  875. position: absolute;
  876. bottom: 0;
  877. left: 0;
  878. width: 43px;
  879. height: 2px;
  880. background: #ff4200;
  881. content: '';
  882. }
  883. .comments_subtitle
  884. {
  885. margin-top: 101px;
  886. }
  887. .blog_post_comments
  888. {
  889. }
  890. .blog_post_comment
  891. {
  892. margin-bottom: 59px;
  893. }
  894. .blog_post_comment:last-child
  895. {
  896. margin-bottom: 0px;
  897. }
  898. .blog_post_comment_image
  899. {
  900. width: 68px;
  901. height: 68px;
  902. flex-basis: 20%;
  903. }
  904. .blog_post_comment_image img
  905. {
  906. width: 68px;
  907. height: 68px;
  908. }
  909. .blog_post_comment_content
  910. {
  911. margin-left: 30px;
  912. flex-basis: 200%;
  913. }
  914. .blog_post_comment_meta
  915. {
  916. margin-top: -9px;
  917. margin-bottom: 13px;
  918. }
  919. .blog_post_comment_name
  920. {
  921. display: inline-block;
  922. border-right: solid 1px #1c1c1c;
  923. padding-right: 16px;
  924. margin-right: 17px;
  925. line-height: 1;
  926. }
  927. .blog_post_comment_name a
  928. {
  929. font-size: 16px;
  930. font-weight: 400;
  931. color: #1c1c1c;
  932. }
  933. .blog_post_comment_date
  934. {
  935. display: inline-block;
  936. font-size: 14px;
  937. color: #ff4200;
  938. line-height: 1;
  939. }
  940. .blog_post_comment_text p
  941. {
  942. margin-bottom: 0px;
  943. }
  944. .blog_post_link
  945. {
  946. display: inline-block;
  947. font-size: 12px;
  948. font-weight: 600;
  949. letter-spacing: 0.2em;
  950. color: #ff4200;
  951. text-transform: uppercase;
  952. margin-top: 17px;
  953. -webkit-transition: all 200ms ease;
  954. -moz-transition: all 200ms ease;
  955. -ms-transition: all 200ms ease;
  956. -o-transition: all 200ms ease;
  957. transition: all 200ms ease;
  958. }
  959. .blog_post_link svg
  960. {
  961. margin-left: 3px;
  962. }
  963. .arrow_poly
  964. {
  965. -webkit-transition: all 200ms ease;
  966. -moz-transition: all 200ms ease;
  967. -ms-transition: all 200ms ease;
  968. -o-transition: all 200ms ease;
  969. transition: all 200ms ease;
  970. }
  971. .blog_post_link:hover
  972. {
  973. color: #fd9672;
  974. }
  975. .blog_post_link:hover .arrow_poly
  976. {
  977. fill: #fd9672;
  978. }
  979. /*********************************
  980. 10. Reply
  981. *********************************/
  982. .blog_post_reply
  983. {
  984. margin-top: 111px;
  985. }
  986. .input_field
  987. {
  988. height: 40px;
  989. font-size: 14px;
  990. border: solid 1px #b7b7b7;
  991. padding-left: 17px;
  992. margin-bottom: 12px;
  993. }
  994. .input_field:focus,
  995. .text_field:focus
  996. {
  997. border: solid 2px #ff4200 !important;
  998. box-shadow: none !important;
  999. outline: none !important;
  1000. }
  1001. .text_field
  1002. {
  1003. font-size: 14px;
  1004. border: solid 1px #b7b7b7;
  1005. padding-left: 17px;
  1006. margin-bottom: 12px;
  1007. }
  1008. .reply_form_name,
  1009. .reply_form_email
  1010. {
  1011. display: inline-block;
  1012. width: calc(50% - 15px);
  1013. }
  1014. .reply_form_name
  1015. {
  1016. margin-right: -4px;
  1017. }
  1018. .reply_form_email
  1019. {
  1020. margin-left: 30px;
  1021. }
  1022. .reply_form_subject
  1023. {
  1024. display: block;
  1025. width: 100%;
  1026. }
  1027. .reply_form_message
  1028. {
  1029. display: block;
  1030. width: 100%;
  1031. margin-bottom: 0px;
  1032. }
  1033. .reply_submit_btn
  1034. {
  1035. position: relative;
  1036. width: 153px;
  1037. height: 66px;
  1038. background: #ff4200;
  1039. overflow: hidden;
  1040. border: none;
  1041. font-size: 11px;
  1042. font-weight: 300;
  1043. letter-spacing: 0.6em;
  1044. text-transform: uppercase;
  1045. color: #FFFFFF;
  1046. cursor: pointer;
  1047. margin-top: 39px;
  1048. }
  1049. .reply_submit_btn img
  1050. {
  1051. display: inline-block;
  1052. width: 13px !important;
  1053. height: 7px;
  1054. margin-left: 4px;
  1055. }
  1056. .reply_submit_btn::after
  1057. {
  1058. display: block;
  1059. position: absolute;
  1060. top: -50%;
  1061. left: -70px;
  1062. width: 60px;
  1063. height: 200%;
  1064. background: rgba(255,255,255,0.1);
  1065. content: '';
  1066. -webkit-transform: rotate(12.5deg);
  1067. -moz-transform: rotate(12.5deg);
  1068. -ms-transform: rotate(12.5deg);
  1069. -o-transform: rotate(12.5deg);
  1070. transform: rotate(12.5deg);
  1071. -webkit-transition: all 400ms ease;
  1072. -moz-transition: all 400ms ease;
  1073. -ms-transition: all 400ms ease;
  1074. -o-transition: all 400ms ease;
  1075. transition: all 600ms ease;
  1076. z-index: 0;
  1077. }
  1078. .reply_submit_btn:hover::after
  1079. {
  1080. left: calc(100% + 70px);
  1081. }
  1082. /*********************************
  1083. 11. Blog Sidebar
  1084. *********************************/
  1085. .blog_sidebar
  1086. {
  1087. width: 100%;
  1088. }
  1089. .sidebar_section
  1090. {
  1091. margin-bottom: 58px;
  1092. }
  1093. .sidebar_section:last-child
  1094. {
  1095. margin-bottom: 0px;
  1096. }
  1097. #blog_search
  1098. {
  1099. width: 100%;
  1100. height: 40px;
  1101. font-size: 14px;
  1102. border: solid 1px #b7b7b7;
  1103. padding-left: 12px;
  1104. }
  1105. #blog_search:focus
  1106. {
  1107. border: solid 2px #ff4200 !important;
  1108. box-shadow: none !important;
  1109. outline: none !important;
  1110. }
  1111. ::-webkit-input-placeholder
  1112. {
  1113. font-size: 12px !important;
  1114. font-weight: 400 !important;
  1115. font-style: italic !important;
  1116. color: #6e6e6e !important;
  1117. }
  1118. :-moz-placeholder /* older Firefox*/
  1119. {
  1120. font-size: 12px !important;
  1121. font-weight: 400 !important;
  1122. font-style: italic !important;
  1123. color: #6e6e6e !important;
  1124. }
  1125. ::-moz-placeholder /* Firefox 19+ */
  1126. {
  1127. font-size: 12px !important;
  1128. font-weight: 400 !important;
  1129. font-style: italic !important;
  1130. color: #6e6e6e !important;
  1131. }
  1132. :-ms-input-placeholder
  1133. {
  1134. font-size: 12px !important;
  1135. font-weight: 400 !important;
  1136. font-style: italic !important;
  1137. color: #6e6e6e !important;
  1138. }
  1139. ::input-placeholder
  1140. {
  1141. font-size: 12px !important;
  1142. font-weight: 400 !important;
  1143. font-style: italic !important;
  1144. color: #6e6e6e !important;
  1145. }
  1146. #search_submit
  1147. {
  1148. position: absolute;
  1149. top: 0;
  1150. right: 5px;
  1151. border: none;
  1152. background: transparent;
  1153. height: 40px;
  1154. width: 40px;
  1155. cursor: pointer;
  1156. }
  1157. /*********************************
  1158. 12. Sidebar Title
  1159. *********************************/
  1160. .sidebar_title
  1161. {
  1162. font-size: 16px;
  1163. font-weight: 600;
  1164. color: #1c1c1c;
  1165. letter-spacing: 0.2em;
  1166. text-transform: uppercase;
  1167. padding-bottom: 11px;
  1168. margin-bottom: 59px;
  1169. }
  1170. .sidebar_title::after
  1171. {
  1172. display: block;
  1173. position: absolute;
  1174. bottom: 0;
  1175. left: 0;
  1176. width: 43px;
  1177. height: 2px;
  1178. background: #ff4200;
  1179. content: '';
  1180. }
  1181. /*********************************
  1182. 13. Sidebar Recent Posts
  1183. *********************************/
  1184. .recent_post
  1185. {
  1186. margin-bottom: 27px;
  1187. }
  1188. .recent_post_content
  1189. {
  1190. margin-left: 19px;
  1191. }
  1192. .recent_post_title a
  1193. {
  1194. font-weight: 600;
  1195. color: #343434;
  1196. letter-spacing: 0.075em;
  1197. text-transform: uppercase;
  1198. -webkit-transition: all 200ms ease;
  1199. -moz-transition: all 200ms ease;
  1200. -ms-transition: all 200ms ease;
  1201. -o-transition: all 200ms ease;
  1202. transition: all 200ms ease;
  1203. }
  1204. .recent_post_title a:hover
  1205. {
  1206. color: #ff4200;
  1207. }
  1208. .recent_post_date
  1209. {
  1210. display: block;
  1211. font-size: 11px;
  1212. text-transform: uppercase;
  1213. color: #9a9a9a;
  1214. letter-spacing: 0.075em;
  1215. margin-top: 2px;
  1216. }
  1217. /*********************************
  1218. 14. Sidebar Categories
  1219. *********************************/
  1220. .sidebar_categories ul
  1221. {
  1222. margin-top: -22px;
  1223. }
  1224. .sidebar_categories ul li
  1225. {
  1226. height: 53px;
  1227. border-bottom: solid 1px #d7d7d7;
  1228. }
  1229. .sidebar_categories ul li a
  1230. {
  1231. font-size: 13px;
  1232. line-height: 53px;
  1233. color: #9a9a9a;
  1234. text-transform: uppercase;
  1235. letter-spacing: 0.075em;
  1236. -webkit-transition: all 200ms ease;
  1237. -moz-transition: all 200ms ease;
  1238. -ms-transition: all 200ms ease;
  1239. -o-transition: all 200ms ease;
  1240. transition: all 200ms ease;
  1241. }
  1242. .sidebar_categories ul li a:hover
  1243. {
  1244. color: #343434;
  1245. }
  1246. /*********************************
  1247. 15. Sidebar Tabs
  1248. *********************************/
  1249. .tabs_container ul
  1250. {
  1251. display: inline-block;
  1252. border-bottom: solid 1px #d7d7d7;
  1253. }
  1254. .tabs_container ul li
  1255. {
  1256. display: inline-block;
  1257. padding-bottom: 4px;
  1258. padding-top: 6px;
  1259. padding-left: 20px;
  1260. padding-right: 17px;
  1261. cursor: pointer;
  1262. transform: translateY(1px);
  1263. }
  1264. .tabs_container ul li span
  1265. {
  1266. font-size: 13px;
  1267. font-weight: 600;
  1268. letter-spacing: 0.075em;
  1269. color: #1c1c1c;
  1270. text-transform: uppercase;
  1271. }
  1272. .tabs_container ul li.active
  1273. {
  1274. border: solid 1px #d7d7d7;
  1275. border-bottom: solid 1px #FFFFFF;
  1276. }
  1277. .tabs_container ul li.active span
  1278. {
  1279. color: #ff4200;
  1280. }
  1281. .tab_container
  1282. {
  1283. width: 100%;
  1284. display: none;
  1285. }
  1286. .tab_container.active
  1287. {
  1288. display: block;
  1289. }
  1290. /*********************************
  1291. 16. Popular Posts
  1292. *********************************/
  1293. .sidebar_popular
  1294. {
  1295. margin-top: 57px;
  1296. }
  1297. .popular_post
  1298. {
  1299. margin-bottom: 27px;
  1300. }
  1301. .popular_post_content
  1302. {
  1303. margin-left: 19px;
  1304. }
  1305. .popular_post_title
  1306. {
  1307. margin-bottom: 0px;
  1308. }
  1309. .popular_post_title a
  1310. {
  1311. font-weight: 600;
  1312. color: #343434;
  1313. letter-spacing: 0.075em;
  1314. text-transform: uppercase;
  1315. -webkit-transition: all 200ms ease;
  1316. -moz-transition: all 200ms ease;
  1317. -ms-transition: all 200ms ease;
  1318. -o-transition: all 200ms ease;
  1319. transition: all 200ms ease;
  1320. }
  1321. .popular_post_title a:hover
  1322. {
  1323. color: #ff4200;
  1324. }
  1325. .popular_post_date
  1326. {
  1327. display: block;
  1328. font-size: 11px;
  1329. text-transform: uppercase;
  1330. color: #9a9a9a;
  1331. letter-spacing: 0.075em;
  1332. margin-top: 0px;
  1333. }
  1334. /*********************************
  1335. 17. Sidebar Flickr
  1336. *********************************/
  1337. .span1
  1338. {
  1339. display: inline-block;
  1340. width: 33.33333333%;
  1341. border: solid 0.5px #FFFFFF;
  1342. }
  1343. .span1 img
  1344. {
  1345. width: 100%;
  1346. }
  1347. /*********************************
  1348. 18. Sidebar Gallery
  1349. *********************************/
  1350. .gallery_item
  1351. {
  1352. display: inline-block;
  1353. width: 33.33333333%;
  1354. margin-right: -5px;
  1355. margin-bottom: -1px;
  1356. border: solid 1px #FFFFFF;
  1357. }
  1358. .gallery_item img
  1359. {
  1360. width: 100%;
  1361. }
  1362. .sidebar_slider
  1363. {
  1364. height: 246px;
  1365. }
  1366. .sidebar_slider_item_background
  1367. {
  1368. position: absolute;
  1369. top: 0;
  1370. left: 0;
  1371. width: 100%;
  1372. height: 100%;
  1373. background-repeat: no-repeat;
  1374. background-size: cover;
  1375. background-position: center center;
  1376. }
  1377. /*********************************
  1378. 19. Sidebar Quote
  1379. *********************************/
  1380. .sidebar_quote p
  1381. {
  1382. margin-top: -10px;
  1383. margin-bottom: 0px;
  1384. }
  1385. /*********************************
  1386. 20. Comments
  1387. *********************************/
  1388. .sidebar_comments
  1389. {
  1390. margin-top: 57px;
  1391. }
  1392. .comment
  1393. {
  1394. margin-bottom: 17px;
  1395. }
  1396. .comment_text
  1397. {
  1398. font-style: italic;
  1399. padding-left: 20px;
  1400. margin-bottom: 0px;
  1401. }
  1402. .comment_meta
  1403. {
  1404. padding-left: 20px;
  1405. }
  1406. .comment_meta
  1407. {
  1408. text-transform: uppercase;
  1409. margin-top: 2px;
  1410. }
  1411. .comment_meta span
  1412. {
  1413. position: relative;
  1414. font-size: 11px;
  1415. text-transform: uppercase;
  1416. color: #9a9a9a;
  1417. letter-spacing: 0.075em;
  1418. padding-right: 34px;
  1419. }
  1420. .comment_meta span::after
  1421. {
  1422. display: block;
  1423. position: absolute;
  1424. top: 4px;
  1425. right: 16px;
  1426. width: 1px;
  1427. height: 11px;
  1428. content: '';
  1429. background: #9a9a9a;
  1430. }
  1431. .comment_meta span:last-of-type
  1432. {
  1433. padding-right: 0px;
  1434. }
  1435. .comment_meta span:last-of-type::after
  1436. {
  1437. display: none;
  1438. }
  1439. /*********************************
  1440. 21. Contact
  1441. *********************************/
  1442. .contact
  1443. {
  1444. padding-top: 192px;
  1445. padding-bottom: 120px;
  1446. }
  1447. .contact_background
  1448. {
  1449. position: absolute;
  1450. top: 0;
  1451. left: 0;
  1452. width: 100%;
  1453. height: 100%;
  1454. background-repeat: no-repeat;
  1455. background-size: cover;
  1456. background-position: center center;
  1457. }
  1458. .contact_shapes
  1459. {
  1460. position: absolute;
  1461. bottom: 0;
  1462. left: 50%;
  1463. -webkit-transform: translateX(-50%);
  1464. -moz-transform: translateX(-50%);
  1465. -ms-transform: translateX(-50%);
  1466. -o-transform: translateX(-50%);
  1467. transform: translateX(calc(-50% - 40px));
  1468. }
  1469. .contact_title h2
  1470. {
  1471. margin-bottom: 54px;
  1472. }
  1473. .contact_text p
  1474. {
  1475. color: #FFFFFF;
  1476. }
  1477. .contact_button
  1478. {
  1479. margin-left: auto;
  1480. margin-right: auto;
  1481. margin-top: 60px;
  1482. }
  1483. /*********************************
  1484. 22. Footer
  1485. *********************************/
  1486. .footer
  1487. {
  1488. background: #111111;
  1489. }
  1490. .footer_content
  1491. {
  1492. height: 96px;
  1493. }
  1494. .footer_social_container
  1495. {
  1496. display: inline-block;
  1497. }
  1498. .footer_social li
  1499. {
  1500. display: inline-block;
  1501. margin-left: 6px;
  1502. }
  1503. .footer_social li:first-child
  1504. {
  1505. margin-left: 0px;
  1506. }
  1507. .footer_social li a
  1508. {
  1509. width: 100%;
  1510. height: 100%;
  1511. padding: 10px;
  1512. }
  1513. .footer_social li i
  1514. {
  1515. font-size: 14px;
  1516. color: rgba(110,110,110,0.6);
  1517. }
  1518. .footer_social li:hover i
  1519. {
  1520. color: rgba(255,255,255,1);
  1521. }
  1522. .cr p
  1523. {
  1524. margin-bottom: 0px;
  1525. }