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.

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