Advertisement
NginUS

style.css-moesia

Jul 24th, 2015
312
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 40.75 KB | None | 0 0
  1. /*
  2. Theme Name: Moesia
  3. Theme URI: http://athemes.com/theme/moesia
  4. Author: aThemes
  5. Author URI: http://athemes.com
  6. Description: Moesia is the business theme you need in order to build your presence on the Internet. Choose from eleven predefined blocks and build the homepage that best suits your company. Each of the homepage blocks can have a parallax background image and its own set of colors. Moesia also features a selection of Google Fonts, two types of layouts for the blog page, cool animations and effects, a parallax header and much more.
  7. Version: 1.33
  8. License: GNU General Public License v2 or later
  9. License URI: http://www.gnu.org/licenses/gpl-2.0.html
  10. Text Domain: moesia
  11. Domain Path: /languages/
  12. Tags: light, two-columns, three-columns, right-sidebar, fluid-layout, responsive-layout, custom-colors, custom-background, custom-header, custom-menu, featured-images, sticky-post, theme-options, threaded-comments, translation-ready
  13.  
  14.  
  15. This theme, like WordPress, is licensed under the GPL.
  16. Use it to make something cool, have fun, and share what you've learned with others.
  17.  
  18. Moesia is based on Underscores http://underscores.me/, (C) 2012-2014 Automattic, Inc.
  19.  
  20.  
  21. --------------------------------------------------------------*/
  22.  
  23. body {
  24. font-family: 'Roboto', sans-serif;
  25. color: #aaa;
  26. background-color: #f5f5f5;
  27. line-height: 1.5;
  28. word-break: break-word;
  29. -webkit-font-smoothing: antialiased;
  30. }
  31. #page {
  32. display: none;
  33. -webkit-animation: fadein 1s;
  34. animation: fadein 1s;
  35. }
  36. @-webkit-keyframes fadein
  37. {
  38. from {opacity: 0;}
  39. to {opacity: 1;}
  40. }
  41. @keyframes fadein
  42. {
  43. from {opacity: 0;}
  44. to {opacity: 1;}
  45. }
  46. h1,
  47. h2,
  48. h3,
  49. h4,
  50. h5,
  51. h6 {
  52. font-family: 'Roboto Condensed', sans-serif;
  53. color: #444;
  54. font-weight: 700;
  55. }
  56. blockquote {
  57. border: 0;
  58. }
  59. blockquote:before{
  60. float: left;
  61. margin-right: 10px;
  62. font-family: FontAwesome;
  63. font-size: 30px;
  64. line-height: 1;
  65. content: '\f10d';
  66. color: #ff6b53;
  67. }
  68. cite {
  69. font-style: italic;
  70. padding: 0 20px;
  71. }
  72. .nicescroll-rails {
  73. z-index: 9999 !important;
  74. }
  75. code {
  76. white-space: pre-wrap;
  77. }
  78. ::selection {
  79. background-color: #ff6b53;
  80. color: #fff;
  81. }
  82. input,
  83. textarea {
  84. padding: 15px;
  85. max-width: 100%;
  86. border: 2px solid #444;
  87. }
  88. button,
  89. html input[type="button"],
  90. input[type="reset"],
  91. input[type="submit"] {
  92. background-color: #ff6b53;
  93. padding: 10px 20px;
  94. font-family: 'Roboto Condensed', sans-serif;
  95. font-size: 16px;
  96. text-transform: uppercase;
  97. color: #fff;
  98. box-shadow: 0 5px 0 #C2503D;
  99. border-radius: 5px;
  100. font-weight: 700;
  101. border: 0;
  102. }
  103. /* Tables - extracted from Bootstrap and changed so it applies by default */
  104. table {
  105. width: 100%;
  106. margin-bottom: 20px;
  107. border: 1px solid #dddddd;
  108. }
  109. th {
  110. background-color: #F8F8F8;
  111. }
  112. table > thead > tr > th,
  113. table > tbody > tr > th,
  114. table > tfoot > tr > th,
  115. table > thead > tr > td,
  116. table > tbody > tr > td,
  117. table > tfoot > tr > td {
  118. padding: 8px;
  119. line-height: 1.42857143;
  120. vertical-align: top;
  121. }
  122. table > thead > tr > th,
  123. table > tbody > tr > th,
  124. table > tfoot > tr > th,
  125. table > thead > tr > td,
  126. table > tbody > tr > td,
  127. table > tfoot > tr > td {
  128. border: 1px solid #dddddd;
  129. }
  130. /*--------------------------------------------------------------
  131. Menus
  132. --------------------------------------------------------------*/
  133. .main-navigation {
  134. display: block;
  135. float: left;
  136. }
  137. .main-navigation ul {
  138. list-style: none;
  139. margin: 0;
  140. padding-left: 0;
  141. float: right;
  142. }
  143. .main-navigation li {
  144. float: left;
  145. position: relative;
  146. padding: 40px 10px;
  147. text-transform: uppercase;
  148. font-family: 'Roboto Condensed', sans-serif;
  149. }
  150. .main-navigation a {
  151. display: block;
  152. text-decoration: none;
  153. color: #fff;
  154. -webkit-transition: color 0.3s;
  155. transition: color 0.3s;
  156. }
  157. .main-navigation a:hover {
  158. color: #ff6b53;
  159. }
  160. .main-navigation ul ul {
  161. box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
  162. float: left;
  163. position: absolute;
  164. top: 100%;
  165. left: -999em;
  166. z-index: 99999;
  167. background-color: #fff;
  168. }
  169. .main-navigation ul ul ul {
  170. left: -999em;
  171. top: 0;
  172. }
  173. .main-navigation ul ul a {
  174. width: 200px;
  175. color: #aaa;
  176. }
  177. .main-navigation ul ul li {
  178. padding: 5px;
  179. text-transform: none;
  180. font-family: 'Roboto', sans-serif;
  181. font-size: 13px;
  182. border-bottom: 1px solid #ebebeb;
  183. }
  184. .main-navigation li:hover > a {
  185. }
  186. .main-navigation ul ul :hover > a {
  187. }
  188. .main-navigation ul ul a:hover {
  189. }
  190. .main-navigation ul li:hover > ul {
  191. left: auto;
  192. }
  193. .main-navigation ul ul li:hover > ul {
  194. left: 100%;
  195. }
  196. .main-navigation .current_page_item a,
  197. .main-navigation .current-menu-item a {
  198. }
  199. /* Icons */
  200. .main-navigation li::before {
  201. font-family: Fontawesome;
  202. color: #fff;
  203. float: left;
  204. margin-right: 5px;
  205. font-size: 20px;
  206. line-height: 1;
  207. font-weight: 400;
  208. }
  209. .main-navigation ul ul li::before {
  210. color: #aaa;
  211. }
  212. .main-navigation a {
  213. float: left;
  214. }
  215. .main-navigation ul ul a {
  216. float: none;
  217. }
  218. @media only screen and (max-width: 991px) {
  219. .main-navigation a {
  220. float: none;
  221. }
  222. .main-navigation li::before {
  223. content: '';
  224. }
  225. }
  226. /* Search */
  227. .nav-search-box {
  228. display: none;
  229. position: fixed;
  230. top: 0;
  231. left: 0;
  232. height: 100%;
  233. width: 100%;
  234. background-color: rgba(0,0,0,0.9);
  235. z-index: 999;
  236. }
  237. .search-visible {
  238. display: block;
  239. }
  240. .nav-search-box .search-wrapper {
  241. position: relative;
  242. top: 50%;
  243. display: table;
  244. margin: 0 auto;
  245. }
  246. .nav-search {
  247. display: block;
  248. position: absolute;
  249. right: 8px;
  250. bottom: 8px;
  251. z-index: 9;
  252. }
  253. .nav-deco {
  254. position: absolute;
  255. right: 0;
  256. bottom: 0;
  257. width: 0;
  258. height: 0;
  259. border-top: 50px solid transparent;
  260. border-right: 50px solid #000;
  261. }
  262. .nav-search .fa {
  263. color: #fff;
  264. cursor: pointer;
  265. }
  266. .search-submit {
  267. font-family: Fontawesome !important;
  268. vertical-align: top;
  269. height: 50px;
  270. }
  271. .search-close {
  272. display: none;
  273. height: 22px;
  274. width: 22px;
  275. border-radius: 50%;
  276. border: 1px solid #fff;
  277. position: relative;
  278. top: -40px;
  279. color: #fff;
  280. text-align: center;
  281. cursor: pointer;
  282. }
  283. .nav-search-box .search-close {
  284. display: inline-block;
  285. }
  286. /*--------------------------------------------------------------
  287. Post and page navigation
  288. --------------------------------------------------------------*/
  289. .post-navigation,
  290. .paging-navigation {
  291. margin-bottom: 60px;
  292. }
  293. .post-navigation .nav-previous,
  294. .post-navigation .nav-next,
  295. .paging-navigation .nav-previous,
  296. .paging-navigation .nav-next {
  297. max-width: 50%;
  298. padding: 15px;
  299. background-color: #ff6b53;
  300. font-weight: 700;
  301. text-transform: uppercase;
  302. font-family: 'Roboto Condensed', sans-serif;
  303. box-shadow: 0 0 1px #adadad;
  304. -webkit-transition: background-color 0.4s;
  305. transition: background-color 0.4s;
  306. }
  307. .comment-navigation .nav-previous,
  308. .paging-navigation .nav-previous,
  309. .post-navigation .nav-previous {
  310. float: left;
  311. max-width: 50%;
  312. }
  313. .comment-navigation .nav-next,
  314. .paging-navigation .nav-next,
  315. .post-navigation .nav-next {
  316. float: right;
  317. text-align: right;
  318. max-width: 50%;
  319. }
  320. .post-navigation,
  321. .paging-navigation,
  322. .post-navigation a,
  323. .paging-navigation a {
  324. color: #fff;
  325. text-decoration: none;
  326. }
  327. .post-navigation .nav-previous:hover,
  328. .post-navigation .nav-next:hover,
  329. .paging-navigation .nav-previous:hover,
  330. .paging-navigation .nav-next:hover {
  331. background-color: #222;
  332. }
  333. #comment-nav-above,
  334. #comment-nav-below {
  335. overflow: auto;
  336. }
  337. #comment-nav-above {
  338. margin-bottom: 30px;
  339. }
  340. /*--------------------------------------------------------------
  341. Accessibility
  342. --------------------------------------------------------------*/
  343. /* Text meant only for screen readers */
  344. .screen-reader-text {
  345. clip: rect(1px, 1px, 1px, 1px);
  346. position: absolute !important;
  347. height: 1px;
  348. width: 1px;
  349. overflow: hidden;
  350. }
  351.  
  352. .screen-reader-text:hover,
  353. .screen-reader-text:active,
  354. .screen-reader-text:focus {
  355. background-color: #f1f1f1;
  356. border-radius: 3px;
  357. box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  358. clip: auto !important;
  359. color: #21759b;
  360. display: block;
  361. font-size: 14px;
  362. font-weight: bold;
  363. height: auto;
  364. left: 5px;
  365. line-height: normal;
  366. padding: 15px 23px 14px;
  367. text-decoration: none;
  368. top: 5px;
  369. width: auto;
  370. z-index: 100000; /* Above WP toolbar */
  371. }
  372.  
  373. /*--------------------------------------------------------------
  374. Alignments
  375. --------------------------------------------------------------*/
  376. .alignleft {
  377. display: inline;
  378. float: left;
  379. margin-right: 1.5em;
  380. }
  381. .alignright {
  382. display: inline;
  383. float: right;
  384. margin-left: 1.5em;
  385. }
  386. .aligncenter {
  387. clear: both;
  388. display: block;
  389. margin: 0 auto;
  390. }
  391.  
  392. /*--------------------------------------------------------------
  393. Widgets
  394. --------------------------------------------------------------*/
  395. .footer-widget-area .widget,
  396. .widget-area .widget {
  397. margin: 0 0 30px;
  398. }
  399. .footer-widget-area .widget,
  400. .footer-widget-area .widget a,
  401. .widget-area .widget,
  402. .widget-area .widget a {
  403. color: #aaa;
  404. }
  405. .footer-widget-area .widget:last-of-type,
  406. .widget-area .widget:last-of-type {
  407. margin: 0;
  408. }
  409. .widget-title,
  410. .widgettitle {
  411. margin: 0 0 15px;
  412. padding-bottom: 15px;
  413. border-bottom: 4px double #ebebeb;
  414. }
  415. .footer-widget-area .widget ul,
  416. .widget-area .widget ul {
  417. list-style: none;
  418. padding: 0;
  419. }
  420. .footer-widget-area .widget .children,
  421. .widget-area .widget .children {
  422. padding-left: 20px;
  423. }
  424. .footer-widget-area .widget li:before,
  425. .widget-area .widget li:before {
  426. font-family: FontAwesome;
  427. content: "\f192";
  428. margin-right: 10px;
  429. font-size: 10px;
  430. position: relative;
  431. top: -2px;
  432. }
  433. /* Make sure select elements fit in widgets */
  434. .widget select {
  435. max-width: 100%;
  436. }
  437.  
  438. /* Search widget */
  439. .widget_search .search-submit {
  440. display: none;
  441. }
  442. /* Custom widgets */
  443. .moesia_recent_posts_widget h4 {
  444. margin: 0 0 5px 0;
  445. }
  446. .moesia_recent_posts_widget h4 a,
  447. .widget .post-title {
  448. color: #858585;
  449. }
  450. .moesia_recent_posts_widget li:before,
  451. .moesia_recent_comments li:before {
  452. content: "" !important;
  453. margin: 0;
  454. }
  455. .moesia_recent_comments .avatar {
  456. float: left;
  457. margin-right: 15px;
  458. }
  459. .moesia_recent_comments a.post-title {
  460. font-weight: 600;
  461. }
  462. .widget .list-group {
  463. padding-left: 0;
  464. margin: 0;
  465. }
  466. .list-group-item {
  467. background-color: transparent;
  468. }
  469. .widget .list-group-item {
  470. border-left: none;
  471. border-right: none;
  472. border-top: 1px solid #ebebeb;
  473. border-bottom: none;
  474. }
  475. .widget .list-group-item:first-child {
  476. border-top: none;
  477. }
  478. .post-date {
  479. font-size: 13px;
  480. color: #C8C8C8;
  481. }
  482. .moesia_recent_comments .col-md-8,
  483. .moesia_recent_posts_widget .col-md-8 {
  484. padding: 0;
  485. }
  486. .moesia_recent_comments .col-md-4,
  487. .moesia_recent_posts_widget .col-md-4 {
  488. padding: 0 15px 0 0;
  489. }
  490. .moesia_recent_comments .list-group-item,
  491. .moesia_recent_posts_widget .list-group-item {
  492. padding: 10px 0;
  493. }
  494. .recent-thumb {
  495. -webkit-transition: opacity 0.3s;
  496. transition: opacity 0.3s;
  497. }
  498. .recent-thumb:hover {
  499. opacity: 0.5;
  500. }
  501. .social-widget ul {
  502. margin: 0;
  503. }
  504. .social-widget li {
  505. display: inline-block;
  506. padding: 8px;
  507. }
  508. .social-widget li:before {
  509. content: '' !important;
  510. margin: 0 !important;
  511. }
  512. .social-widget li a {
  513. text-decoration: none;
  514. }
  515. .social-widget li a::before {
  516. font-size: 60px;
  517. line-height: 1;
  518. color: #fbb829;
  519. }
  520. .contact-address,
  521. .contact-phone {
  522. margin-bottom: 15px;
  523. }
  524. .contact-address .fa,
  525. .contact-phone .fa,
  526. .contact-email .fa {
  527. margin-right: 10px;
  528. border: 1px solid;
  529. border-radius: 50%;
  530. padding: 5px;
  531. width: 30px;
  532. height: 30px;
  533. }
  534. .contact-address .fa:before,
  535. .contact-phone .fa:before,
  536. .contact-email .fa:before {
  537. position: relative;
  538. left: 2px;
  539. top: 2px;
  540. }
  541.  
  542. .contact-address span,
  543. .contact-phone span,
  544. .contact-email span {
  545. font-weight: 700;
  546. margin-right: 10px;
  547. }
  548. /* Footer widget area */
  549. .footer-widget-area {
  550. background-color: #222;
  551. padding: 60px 0;
  552. }
  553. .footer-widget-area .widget-title {
  554. border-bottom: 4px double #3A3A3A;
  555. color: #E4E4E4;
  556. }
  557. .footer-widget-area .list-group-item {
  558. border-top: 1px solid #3A3A3A;
  559. }
  560. .footer-widget-area .contact-address span,
  561. .footer-widget-area .contact-phone span,
  562. .footer-widget-area .contact-email span {
  563. color: #fff;
  564. }
  565. /*--------------------------------------------------------------
  566. Posts and pages
  567. --------------------------------------------------------------*/
  568. .sticky {
  569. background-color: #f5f5f5;
  570. }
  571. .hentry {
  572. margin: 0 0 60px;
  573. }
  574. .byline,
  575. .updated {
  576. display: none;
  577. }
  578. .single .byline,
  579. .group-blog .byline {
  580. display: inline;
  581. }
  582. .page-content,
  583. .entry-content,
  584. .entry-summary {
  585. }
  586. .entry-content {
  587. clear: both;
  588. }
  589. .hentry .entry-content img {
  590. margin-bottom: 10px;
  591. }
  592. .page-links {
  593. clear: both;
  594. margin: 0 0 1.5em;
  595. }
  596. .entry-header {
  597. margin-bottom: 15px;
  598. border-bottom: 4px double #ebebeb;
  599. }
  600. .entry-title,
  601. .entry-meta {
  602. margin: 0 0 10px 0;
  603. }
  604. .entry-title a {
  605. color: #444;
  606. }
  607. .entry-title a,
  608. .widget a,
  609. .entry-meta a,
  610. .entry-footer a {
  611. -webkit-transition: color 0.3s;
  612. transition: color 0.3s;
  613. text-decoration: none;
  614. }
  615. .entry-title a:hover,
  616. .widget a:hover,
  617. .entry-meta a:hover,
  618. .entry-footer a:hover {
  619. color: #ff6b53;
  620. }
  621. .entry-thumb img {
  622. border: 4px double #ebebeb;
  623. -webkit-transition: all 0.3s;
  624. transition: all 0.3s;
  625. }
  626. .entry-thumb img:hover {
  627. opacity: 0.7;
  628.  
  629. }
  630. .single-thumb {
  631. margin-bottom: 30px;
  632. }
  633. .entry-meta,
  634. .entry-meta a,
  635. .entry-footer,
  636. .entry-footer a {
  637. color: #cfcfcf;
  638. font-size: 13px;
  639. }
  640. .entry-meta span,
  641. .entry-footer span {
  642. margin-right: 10px;
  643. }
  644. .entry-footer {
  645. margin-top: 15px;
  646. padding-top: 15px;
  647. border-top: 4px double #ebebeb;
  648. clear: both;
  649. }
  650. .hentry .post-content,
  651. .single .hentry,
  652. .page .hentry {
  653. border: 4px double #ebebeb;
  654. padding: 30px;
  655. background-color: #fff;
  656. }
  657. /* Author bio */
  658. .author-bio {
  659. margin-bottom: 60px;
  660. padding: 30px;
  661. background-color: #fff;
  662. border: 4px double #ebebeb;
  663. }
  664. .author-bio .avatar {
  665. display: block;
  666. margin: 0 auto;
  667. }
  668. .author-name {
  669. padding-bottom: 15px;
  670. border-bottom: 4px double #ebebeb;
  671. }
  672. .author-social {
  673. padding-top: 15px;
  674. text-align: center;
  675. }
  676. .author-social a {
  677. font-size: 25px;
  678. color: #ff6b53;
  679. line-height: 1;
  680. margin-right: 5px;
  681. }
  682. .author-social a:last-child {
  683. margin-right: 0;
  684. }
  685. .author-desc {
  686. padding-top: 15px;
  687. }
  688. .view-all {
  689. padding-top: 15px;
  690. }
  691. .view-all,
  692. .view-all a {
  693. font-weight: 700;
  694. color: #444;
  695. }
  696. /* Project single */
  697.  
  698. .project-name,
  699. .project-desc {
  700. display: block;
  701. margin-bottom: 15px;
  702. }
  703. /*--------------------------------------------------------------
  704. Asides
  705. --------------------------------------------------------------*/
  706. .blog .format-aside .entry-title,
  707. .archive .format-aside .entry-title {
  708. display: none;
  709. }
  710.  
  711. /*--------------------------------------------------------------
  712. Comments
  713. --------------------------------------------------------------*/
  714. .comments-area {
  715. margin-bottom: 60px;
  716. }
  717. .comments-title {
  718. margin: 0 0 30px 0;
  719. font-size: 24px;
  720. }
  721. .comments-area ol {
  722. list-style: none;
  723. }
  724. .comments-area ol {
  725. padding: 0;
  726. }
  727. .comments-area .children {
  728. padding-left: 20px;
  729. }
  730. .comments-area .fn {
  731. color: #505050;
  732. }
  733. .comment-author .avatar {
  734. position: absolute;
  735. }
  736. .comment-author .fn,
  737. .comment-metadata {
  738. margin-left: 80px;
  739. }
  740. .comment-metadata {
  741. font-size: 12px;
  742. margin-bottom: 30px;
  743. }
  744. .comment-body {
  745. padding: 15px;
  746. margin-bottom: 20px;
  747. border: 4px double #ebebeb;
  748. background-color: #fff;
  749. }
  750. .reply {
  751. text-align: right;
  752. }
  753. .comment-reply-link {
  754. padding: 5px;
  755. background-color: #fff;
  756. border: 4px double #ebebeb;
  757. font-size: 12px;
  758. -webkit-transition: all 0.4s;
  759. transition: all 0.4s;
  760. }
  761. a.comment-reply-link {
  762. color: #505050;
  763. text-decoration: none;
  764. }
  765. a.comment-reply-link:hover {
  766. color: #000;
  767. box-shadow: 0 0 1px #505050;
  768. }
  769. .comment-meta a {
  770. color: #c7c7c7;
  771. }
  772. .comments-area a.url {
  773. color: #505050;
  774. text-decoration: underline;
  775. }
  776. .bypostauthor {
  777. }
  778. /* Respond form */
  779. input#author,
  780. input#email,
  781. input#url,
  782. textarea#comment {
  783. width: 100%;
  784. max-width: 100%;
  785. padding: 10px;
  786. border: 4px double #ebebeb;
  787. }
  788. .comment-form-author:before,
  789. .comment-form-email:before,
  790. .comment-form-url:before,
  791. .comment-form-comment:before {
  792. font-family: FontAwesome;
  793. color: #505050;
  794. }
  795. .comment-form-author:before {
  796. content: "\f007 ";
  797. }
  798. .comment-form-email:before {
  799. content: "\f003 ";
  800. }
  801. .comment-form-url:before {
  802. content: "\f0c1 ";
  803. }
  804. .comment-form-comment:before {
  805. content: "\f040 ";
  806. }
  807. .comment-respond input[type="submit"] {
  808. padding: 15px;
  809. color: #fff;
  810. font-weight: 700;
  811. text-transform: uppercase;
  812. box-shadow: none;
  813. border: none;
  814. background-color: #ff6b53;
  815. box-shadow: 0 0 1px #adadad;
  816. -webkit-transition: all 0.4s;
  817. transition: all 0.4s;
  818. }
  819. .comment-respond input[type="submit"]:hover {
  820. background-color: #3C3C3C;
  821. }
  822.  
  823. /*--------------------------------------------------------------
  824. Infinite scroll
  825. --------------------------------------------------------------*/
  826. /* Globally hidden elements when Infinite Scroll is supported and in use. */
  827. .infinite-scroll .paging-navigation, /* Older / Newer Posts Navigation (always hidden) */
  828. .infinite-scroll.neverending .site-footer { /* Theme Footer (when set to scrolling) */
  829. display: none;
  830. }
  831. /* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before */
  832. .infinity-end.neverending .site-footer {
  833. display: block;
  834. }
  835.  
  836. /*--------------------------------------------------------------
  837. Media
  838. --------------------------------------------------------------*/
  839. .page-content img.wp-smiley,
  840. .entry-content img.wp-smiley,
  841. .comment-content img.wp-smiley {
  842. border: none;
  843. margin-bottom: 0;
  844. margin-top: 0;
  845. padding: 0;
  846. }
  847. /* Make sure embeds and iframes fit their containers */
  848. embed,
  849. iframe,
  850. object {
  851. max-width: 100%;
  852. }
  853. img {
  854. max-width: 100%;
  855. height: auto;
  856. }
  857. /*--------------------------------------------------------------
  858. Captions
  859. --------------------------------------------------------------*/
  860. .wp-caption {
  861. margin-bottom: 1.5em;
  862. max-width: 100%;
  863. }
  864. .wp-caption img[class*="wp-image-"] {
  865. display: block;
  866. margin: 0 auto;
  867. }
  868. .wp-caption-text {
  869. text-align: center;
  870. }
  871. .wp-caption .wp-caption-text {
  872. margin: 0.8075em 0;
  873. }
  874.  
  875. /*--------------------------------------------------------------
  876. Galleries
  877. --------------------------------------------------------------*/
  878. .gallery {
  879. margin-bottom: 1.5em;
  880. }
  881. .gallery-item {
  882. display: inline-block;
  883. text-align: center;
  884. vertical-align: top;
  885. width: 100%;
  886. margin-bottom: 15px;
  887. }
  888. .gallery-columns-2 .gallery-item {
  889. max-width: 50%;
  890. }
  891. .gallery-columns-3 .gallery-item {
  892. max-width: 33.33%;
  893. }
  894. .gallery-columns-4 .gallery-item {
  895. max-width: 25%;
  896. }
  897. .gallery-columns-5 .gallery-item {
  898. max-width: 20%;
  899. }
  900. .gallery-columns-6 .gallery-item {
  901. max-width: 16.66%;
  902. }
  903. .gallery-columns-7 .gallery-item {
  904. max-width: 14.28%;
  905. }
  906. .gallery-columns-8 .gallery-item {
  907. max-width: 12.5%;
  908. }
  909. .gallery-columns-9 .gallery-item {
  910. max-width: 11.11%;
  911. }
  912. .gallery-caption {}
  913.  
  914. /*--------------------------------------------------------------
  915. Structure
  916. --------------------------------------------------------------*/
  917. .site-branding {
  918. float: left;
  919. padding: 40px 15px;
  920. }
  921. .site-logo {
  922. width: 100%;
  923. max-width: 100px;
  924. position: relative;
  925. top: 50%;
  926. }
  927. .site-title {
  928. margin: 0;
  929. text-transform: uppercase;
  930. font-weight: 700;
  931. padding-bottom: 10px;
  932. }
  933. .site-title a {
  934. color: #fff;
  935. text-decoration: none;
  936. }
  937. .site-description {
  938. margin: 0;
  939. font-size: 18px;
  940. color: #DFDFDF;
  941. }
  942. .site-content {
  943. margin-top: 60px;
  944. position: relative;
  945. }
  946. .page-template-page_front-page-php .site-content {
  947. margin-top: 0;
  948. }
  949. .content-area {
  950. width: 750px;
  951. float: left;
  952. }
  953. .widget-area {
  954. width: 360px;
  955. float: right;
  956. background-color: #fff;
  957. padding: 30px;
  958. border: 4px double #ebebeb;
  959. margin-bottom: 30px;
  960. }
  961. .site-footer {
  962. padding: 30px 0;
  963. border-top: 1px solid #3A3A3A;
  964. background-color: #222;
  965. }
  966. .site-footer a {
  967. color: #C8C8C8;
  968. }
  969. .no-results .page-content {
  970. margin-bottom: 60px;
  971. }
  972. .error404 .content-area {
  973. width: 100%;
  974. text-align: center;
  975. background-color: #fff;
  976. }
  977. .error404 .search-wrapper,
  978. .error404 .widget {
  979. padding: 30px 15px;
  980. }
  981. .error404 .widget_recent_entries ul {
  982. padding: 0;
  983. }
  984. .error404 .widget_recent_entries li {
  985. list-style: none;
  986. }
  987. .error404 .content-area .widgettitle {
  988. display: table;
  989. margin: 0 auto 15px;
  990. }
  991. /* Masonry layout */
  992. .home-masonry .hentry {
  993. width: 350px;
  994. margin: 15px;
  995. }
  996. .home-masonry .entry-title {
  997. font-size: 26px;
  998. }
  999. /*--------------------------------------------------------------
  1000. Page builder
  1001. --------------------------------------------------------------*/
  1002. .panel-grid {
  1003. margin: 0 !important;
  1004. }
  1005. .panel-grid-cell {
  1006. padding: 0 !important;
  1007. }
  1008. /*--------------------------------------------------------------
  1009. Front page widgets
  1010. --------------------------------------------------------------*/
  1011. /* General */
  1012. .panel-grid-cell section {
  1013. padding: 80px 0;
  1014. z-index: 999;
  1015. }
  1016. .panel-grid {
  1017. border-bottom: 1px solid #ebebeb;
  1018. background-color: #fff;
  1019. }
  1020. section .widget-title {
  1021. position: relative;
  1022. margin-bottom: 60px;
  1023. padding: 0;
  1024. border-bottom: 0;
  1025. text-align: center;
  1026. font-size: 56px;
  1027. text-transform: uppercase;
  1028. }
  1029. section .widget-title:after {
  1030. position: absolute;
  1031. left: calc(50% - 35px);
  1032. width: 70px;
  1033. content: "";
  1034. border-bottom: 6px double #ff6b53;
  1035. bottom: -10px;
  1036. }
  1037. .service,
  1038. .employee {
  1039. padding: 30px;
  1040. }
  1041. .service-title,
  1042. .employee-name,
  1043. .latest-news-area .entry-title {
  1044. margin: 0;
  1045. padding: 15px 0;
  1046. font-size: 24px;
  1047. text-align: center;
  1048. text-transform: uppercase;
  1049. }
  1050. .service:nth-of-type(3n+1),
  1051. .employee:nth-of-type(3n+1),
  1052. .project:nth-of-type(3n+1),
  1053. .testimonial:nth-of-type(2n+1) {
  1054. clear: both;
  1055. }
  1056. .blog-post {
  1057. margin-bottom: 30px;
  1058. }
  1059. .blog-post:nth-of-type(3n+1) {
  1060. clear: left;
  1061. }
  1062. /* Services */
  1063. .service-icon {
  1064. display: table;
  1065. margin: 0 auto;
  1066. font-size: 45px;
  1067. color: #fff;
  1068. background-color: #ff6b53;
  1069. line-height: 1;
  1070. border-radius: 50%;
  1071. width: 70px;
  1072. height: 70px;
  1073. text-align: center;
  1074. }
  1075. .service-icon .fa {
  1076. margin-top: 12px;
  1077. }
  1078. .service-title,
  1079. .service-title a {
  1080. color: #ff6b53;
  1081. }
  1082. /* Employees */
  1083. .employee-photo,
  1084. .employee-photo img {
  1085. border-radius: 50px;
  1086. }
  1087. .employee-position {
  1088. margin: 0 auto;
  1089. display: table;
  1090. padding-bottom: 15px;
  1091. font-size: 18px;
  1092. font-family: inherit;
  1093. color: #727272;
  1094. }
  1095. .employee-desc {
  1096. margin-bottom: 15px;
  1097. padding: 10px 0;
  1098. border-top: 1px solid #ebebeb;
  1099. border-bottom: 1px solid #ebebeb;
  1100. }
  1101. .employee-social {
  1102. text-align: center;
  1103. font-size: 26px;
  1104. }
  1105. .employee-social a {
  1106. margin-right: 25px;
  1107. color: #727272;
  1108. }
  1109. .employee-social a:last-of-type {
  1110. margin-right: 0;
  1111. }
  1112. .employee-social .fa {
  1113. -webkit-transition: all 0.3s;
  1114. transition: all 0.3s;
  1115. }
  1116. .employee-social .fa:hover {
  1117. color: #ff6b53;
  1118. }
  1119.  
  1120. /* Social */
  1121. .social-area ul {
  1122. padding: 0;
  1123. margin: 0 auto;
  1124. display: table;
  1125. }
  1126. .social-area li {
  1127. float: left;
  1128. padding: 0 30px;
  1129. list-style: none;
  1130. line-height: 1;
  1131. -webkit-transition: all 0.3s;
  1132. transition: all 0.3s;
  1133. }
  1134. .social-area a {
  1135. text-decoration: none;
  1136. }
  1137. .social-widget li a::before,
  1138. .social-area a:before {
  1139. font-family: FontAwesome;
  1140. color: #ff6b53;
  1141. -webkit-transition: all 0.3s;
  1142. transition: all 0.3s;
  1143. }
  1144. .social-area li a,
  1145. .social-widget a {
  1146. -webkit-transition: all 0.7s;
  1147. transition: all 0.7s;
  1148. -webkit-backface-visibility: visible;
  1149. backface-visibility: visible;
  1150. }
  1151. .social-area li a:hover,
  1152. .social-widget a:hover {
  1153. -webkit-transform: rotatey(360deg);
  1154. -ms-transform: rotatey(360deg);
  1155. transform: rotatey(360deg);
  1156. }
  1157. .social-area a:before {
  1158. font-size: 80px;
  1159. text-shadow: 0 0 1px #222;
  1160. }
  1161. .social-widget a[href*="twitter.com"]::before,
  1162. .social-area a[href*="twitter.com"]::before {
  1163. content: '\f081';
  1164. }
  1165. .social-widget a[href*="facebook.com"]::before,
  1166. .social-area a[href*="facebook.com"]::before {
  1167. content: '\f082';
  1168. }
  1169. .social-widget a[href*="plus.google.com"]::before,
  1170. .social-area a[href*="plus.google.com"]::before {
  1171. content: '\f0d4';
  1172. }
  1173. .social-widget a[href*="google.com/+"]::before,
  1174. .social-area a[href*="google.com/+"]::before {
  1175. content: '\f0d4';
  1176. }
  1177. .social-widget a[href*="dribbble.com"]::before,
  1178. .social-area a[href*="dribbble.com"]::before {
  1179. content: '\f17d';
  1180. }
  1181. .social-widget a[href*="pinterest.com"]::before,
  1182. .social-area a[href*="pinterest.com"]::before {
  1183. content: '\f0d3';
  1184. }
  1185. .social-widget a[href*="youtube.com"]::before,
  1186. .social-area a[href*="youtube.com"]::before {
  1187. content: '\f166';
  1188. }
  1189. .social-widget a[href*="flickr.com"]::before,
  1190. .social-area a[href*="flickr.com"]::before {
  1191. content: '\f16e';
  1192. }
  1193. .social-widget a[href*="vimeo.com"]::before,
  1194. .social-area a[href*="vimeo.com"]::before {
  1195. content: '\f194';
  1196. }
  1197. .social-widget a[href*="instagram.com"]::before,
  1198. .social-area a[href*="instagram.com"]::before {
  1199. content: '\f16d';
  1200. }
  1201. .social-widget a[href*="linkedin.com"]::before,
  1202. .social-area a[href*="linkedin.com"]::before {
  1203. content: '\f08c';
  1204. }
  1205. .social-widget a[href*="foursquare.com"]::before,
  1206. .social-area a[href*="foursquare.com"]::before {
  1207. content: '\f180';
  1208. }
  1209. .social-widget a[href*="tumblr.com"]::before ,
  1210. .social-area a[href*="tumblr.com"]::before {
  1211. content: '\f174';
  1212. }
  1213. .social-widget a[href*="behance.net"]::before ,
  1214. .social-area a[href*="behance.net"]::before {
  1215. content: '\f1b4';
  1216. }
  1217. .social-widget a[href*="deviantart.com"]::before ,
  1218. .social-area a[href*="deviantart.com"]::before {
  1219. content: '\f1bd';
  1220. }
  1221. .social-widget a[href*="soundcloud.com"]::before ,
  1222. .social-area a[href*="soundcloud.com"]::before {
  1223. content: '\f1be';
  1224. }
  1225. .social-widget a[href*="spotify.com"]::before ,
  1226. .social-area a[href*="spotify.com"]::before {
  1227. content: '\f1bc';
  1228. }
  1229. .social-widget a[href*="weibo.com"]::before ,
  1230. .social-area a[href*="weibo.com"]::before {
  1231. content: '\f18a';
  1232. }
  1233.  
  1234. /* Blockquote */
  1235. .blockquote-area .widget-title {
  1236. margin-bottom: 90px;
  1237. }
  1238. /* Skills */
  1239. .skill-bar {
  1240. height: 25px;
  1241. margin-bottom: 10px;
  1242. }
  1243. .skills-area .col-md-2,
  1244. .skills-area .col-md-10 {
  1245. padding: 0;
  1246. }
  1247. .skill-bar div {
  1248. height: 100%;
  1249. color: #fff;
  1250. text-align: right;
  1251. line-height: 25px;
  1252. width: 0;
  1253. max-width: 100%;
  1254. background-color: #ff6b53;
  1255. }
  1256. .skills-desc {
  1257. border-right: 1px solid #ebebeb;
  1258. }
  1259. .skills-list {
  1260. border-left: 1px solid #ebebeb;
  1261. margin-left: -1px;
  1262. }
  1263. .skills-area .col-md-2 {
  1264. clear: left;
  1265. margin-bottom: 5px;
  1266. }
  1267. /* Facts */
  1268. .facts-area .col-md-3 {
  1269. text-align: center;
  1270. }
  1271. .fact {
  1272. font-size: 50px;
  1273. border-bottom: 1px solid #ebebeb;
  1274. font-family: 'Roboto Condensed', sans-serif;
  1275. color: #ff6b53;
  1276. }
  1277. /* Testimonials */
  1278. .testimonials {
  1279. margin: 15px 0;
  1280. }
  1281. .testimonial {
  1282. margin-bottom: 30px;
  1283. }
  1284. .testimonial-body {
  1285. position: relative;
  1286. padding: 30px;
  1287. border-radius: 20px;
  1288. background-color: #f5f5f5;
  1289. }
  1290. .testimonial-body:after {
  1291. position: absolute;
  1292. bottom: -20px;
  1293. left: 60px;
  1294. content: "";
  1295. width: 0;
  1296. height: 0;
  1297. border-left: 20px solid transparent;
  1298. border-right: 20px solid transparent;
  1299. border-top: 20px solid #f5f5f5;
  1300. }
  1301. .client-photo {
  1302. max-width: 100px;
  1303. border-radius: 10px;
  1304. margin: 30px 30px 0 30px;
  1305. }
  1306. .client-photo img {
  1307. border-radius: 10px;
  1308. }
  1309. .client-name {
  1310. margin-top: 30px;
  1311. }
  1312. .client-photo,
  1313. .client-name,
  1314. .client-function {
  1315. padding: 0;
  1316. }
  1317. .client-function {
  1318. font-style: italic;
  1319. }
  1320. /* Projects */
  1321. .project-image {
  1322. position: relative;
  1323. background-color: #ff6b53;
  1324. }
  1325. .project {
  1326. margin-bottom: 30px;
  1327. }
  1328. .link-icon,
  1329. .pp-icon {
  1330. position: absolute;
  1331. top: calc(50% - 35px);
  1332. font-size: 40px;
  1333. color: #fff;
  1334. -webkit-transition: all 0.5s;
  1335. transition: all 0.5s;
  1336. line-height: 1;
  1337. width: 70px;
  1338. height: 70px;
  1339. background-color: #222;
  1340. border-radius: 50%;
  1341. opacity: 0;
  1342. box-shadow: 0 0 1px #222;
  1343. }
  1344. .link-icon {
  1345. left: 0;
  1346. }
  1347. .pp-icon {
  1348. right: 0;
  1349. }
  1350. .link-icon .fa {
  1351. position: relative;
  1352. top: 15px;
  1353. left: 15px;
  1354. }
  1355. .pp-icon .fa {
  1356. position: relative;
  1357. top: 13px;
  1358. left: 15px;
  1359. }
  1360. .project-image img {
  1361. -webkit-transition: all 0.5s;
  1362. transition: all 0.5s;
  1363. }
  1364. .project-image:hover > img {
  1365. opacity: 0.3;
  1366. }
  1367. .project-image:hover > .link-icon {
  1368. left: 15%;
  1369. opacity: 1;
  1370. }
  1371. .project-image:hover > .pp-icon {
  1372. right: 15%;
  1373. opacity: 1;
  1374. }
  1375. /* Call to action */
  1376. .call-to-action {
  1377. position: relative;
  1378. z-index: 9998;
  1379. display: table;
  1380. margin: 0 auto;
  1381. padding: 0 30px;
  1382. }
  1383. .action-text {
  1384. margin-bottom: 60px;
  1385. font-size: 30px;
  1386. text-align: center;
  1387. text-transform: uppercase;
  1388. }
  1389. .call-to-action:active {
  1390. top: 3px;
  1391. }
  1392. /* Latest News */
  1393. .all-news {
  1394. display: table;
  1395. margin: 50px auto 0;
  1396. padding: 10px;
  1397. border: 1px solid #444;
  1398. text-align: center;
  1399. text-transform: uppercase;
  1400. font-weight: 700;
  1401. font-weight: 'Roboto Condensed', sans-serif;
  1402. font-size: 16px;
  1403. -webkit-transition: all 0.3s;
  1404. transition: all 0.3s;
  1405. }
  1406. .all-news,
  1407. .all-news:hover {
  1408. color: #444;
  1409. text-decoration: none;
  1410. }
  1411. .all-news:hover {
  1412. box-shadow: 0 0 2px #444;
  1413. }
  1414.  
  1415. /*--------------------------------------------------------------
  1416. Header
  1417. --------------------------------------------------------------*/
  1418. .has-banner,
  1419. .overlay {
  1420. width: 100%;
  1421. overflow: hidden;
  1422. }
  1423. @media only screen and (min-width: 1025px) {
  1424. .has-banner:after {
  1425. content: "";
  1426. display: block;
  1427. position: absolute;
  1428. top: 0;
  1429. left: 0;
  1430. background-position: center top;
  1431. background-attachment: fixed;
  1432. background-size: cover;
  1433. background-repeat: no-repeat;
  1434. width: 100%;
  1435. height: 100%;
  1436. }
  1437. }
  1438. .site-header {
  1439. position: relative;
  1440. }
  1441. .top-bar {
  1442. position: relative;
  1443. width: 100%;
  1444. z-index: 9999;
  1445. background-color: #222;
  1446. opacity: 0.9;
  1447. }
  1448. .overlay {
  1449. background: url('images/pattern.png');
  1450. position: absolute;
  1451. top: 0;
  1452. z-index: 1;
  1453. opacity: 0.3;
  1454. background-attachment: fixed;
  1455. }
  1456.  
  1457. @media screen and (min-width: 992px) {
  1458. .is-sticky {
  1459. top: 0;
  1460. width: 100%;
  1461. z-index: 99999;
  1462. background-color: #fff;
  1463. }
  1464. .sticky-wrapper {
  1465. background-color: #222;
  1466. }
  1467. .is-sticky .main-navigation li {
  1468. padding: 20px 10px;
  1469. -webkit-transition: all 0.3s;
  1470. transition: all 0.3s;
  1471. }
  1472. .is-sticky .main-navigation ul ul li {
  1473. padding: 5px;
  1474. }
  1475. .is-sticky .site-branding {
  1476. padding: 20px 15px;
  1477. -webkit-transition: all 0.3s;
  1478. transition: all 0.3s;
  1479. }
  1480. .admin-bar .is-sticky .top-bar {
  1481. margin-top: 32px;
  1482. }
  1483. }
  1484. /*--------------------------------------------------------------
  1485. Welcome area
  1486. --------------------------------------------------------------*/
  1487. .welcome-info {
  1488. position: absolute;
  1489. z-index: 9998;
  1490. display: table;
  1491. margin: 0 auto;
  1492. padding: 0 30px;
  1493. top: 100px;
  1494. text-align: center;
  1495. width: 100%;
  1496. }
  1497. .welcome-title {
  1498. font-size: 80px;
  1499. color: #fff;
  1500. width: 100%;
  1501. text-align: center;
  1502. text-shadow: 0 0 2px #222, 0 0 2px #222;
  1503. font-weight: 700;
  1504. margin-bottom: 30px;
  1505. line-height: 1.2;
  1506. }
  1507. .welcome-logo {
  1508. width: 100%;
  1509. max-width: 200px;
  1510. display: block;
  1511. margin: 0 auto 30px;
  1512. }
  1513. .welcome-desc {
  1514. font-size: 28px;
  1515. width: 100%;
  1516. text-align: center;
  1517. color: #D8D8D8;
  1518. text-shadow: 0 0 2px #222, 0 0 2px #222;
  1519. margin-bottom: 30px;
  1520. }
  1521. .welcome-button {
  1522. width: 100%;
  1523. text-align: center;
  1524. position: relative;
  1525. }
  1526. .welcome-button,
  1527. .call-to-action {
  1528. background-color: #ff6b53;
  1529. padding: 10px 20px;
  1530. font-family: 'Roboto Condensed', sans-serif;
  1531. font-size: 16px;
  1532. text-transform: uppercase;
  1533. color: #fff;
  1534. box-shadow: 0 5px 0 #C2503D;
  1535. border-radius: 5px;
  1536. font-weight: 700;
  1537. }
  1538. .welcome-button:active,
  1539. .call-to-action:active {
  1540. top: 3px;
  1541. box-shadow: 0 2px 0 #C2503D;
  1542. }
  1543. .welcome-button:hover,
  1544. .welcome-button:visited,
  1545. .call-to-action:hover,
  1546. .call-to-action:active {
  1547. color: #fff;
  1548. text-decoration: none;
  1549. }
  1550.  
  1551. /* Better support for third party widgets */
  1552. .panel.widget .widget-title,
  1553. .so-panel.widget .widget-title {
  1554. position: relative;
  1555. margin-bottom: 60px;
  1556. padding: 0;
  1557. border-bottom: 0;
  1558. text-align: center;
  1559. font-size: 56px;
  1560. text-transform: uppercase;
  1561. }
  1562. .panel.widget .widget-title:after,
  1563. .so-panel.widget .widget-title:after {
  1564. position: absolute;
  1565. left: calc(50% - 35px);
  1566. width: 70px;
  1567. content: "";
  1568. border-bottom: 6px double #ff6b53;
  1569. bottom: -10px;
  1570. }
  1571. .panel.widget,
  1572. .so-panel.widget {
  1573. margin: 0 auto;
  1574. padding: 80px 30px;
  1575. }
  1576. .fullwidth {
  1577. width: 100%;
  1578. }
  1579.  
  1580. /*--------------------------------------------------------------
  1581. Carousel
  1582. --------------------------------------------------------------*/
  1583. .slick-slider:hover {
  1584. cursor: move;
  1585. }
  1586. .slick-slider { position: relative; overflow: hidden; display: block; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: none; touch-action: none; -webkit-tap-highlight-color: transparent; }
  1587.  
  1588. .slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; }
  1589. .slick-list:focus { outline: none; }
  1590. .slick-list.dragging { cursor: pointer; cursor: hand; }
  1591.  
  1592. .slick-slider .slick-list, .slick-track, .slick-slide, .slick-slide img { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
  1593.  
  1594. .slick-track { position: relative; left: 0; top: 0; display: block; zoom: 1; }
  1595. .slick-track:before, .slick-track:after { content: ""; display: table; }
  1596. .slick-track:after { clear: both; }
  1597. .slick-loading .slick-track { visibility: hidden; }
  1598.  
  1599. .slick-slide { float: left; height: 100%; min-height: 1px; display: none;}
  1600. .slick-slide img { display: block; margin: 0 auto; max-width: 150px; }
  1601. .slick-slide.slick-loading img { display: none; }
  1602. .slick-slide.dragging img { pointer-events: none; }
  1603. .slick-initialized .slick-slide { display: block; }
  1604. .slick-loading .slick-slide { visibility: hidden; }
  1605. .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; }
  1606.  
  1607.  
  1608. /* Arrows */
  1609. .slick-prev, .slick-next { box-shadow: none; position: absolute; display: block; height: 40px; width: 40px; line-height: 0; font-size: 0; cursor: pointer; background: transparent; color: transparent; top: calc(50% - 10px); margin-top: -10px; padding: 0; border: none; outline: none; }
  1610. .slick-prev:focus, .slick-next:focus { outline: none; }
  1611. .slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { opacity: 0.25; }
  1612.  
  1613. .slick-prev:before, .slick-next:before { font-family: "FontAwesome"; font-size: 40px; line-height: 1; color: #ff6b53; opacity: 0.85; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
  1614.  
  1615. .slick-prev { left: -10px; }
  1616. .slick-prev:before { content: "\f104"; }
  1617.  
  1618. .slick-next { right: -10px; }
  1619. .slick-next:before { content: "\f105"; }
  1620. /*--------------------------------------------------------------
  1621. Page Builder visual styles
  1622. --------------------------------------------------------------*/
  1623. .panel-row-style {
  1624. display: block;
  1625. background-repeat: no-repeat;
  1626. background-position: center top;
  1627. background-attachment: fixed;
  1628. background-size: cover;
  1629. position: relative;
  1630. overflow: hidden;
  1631. }
  1632. @media screen and (max-width: 1024px) {
  1633. .panel-row-style {
  1634. background-attachment: scroll !important;
  1635. background-position: center top !important;
  1636. -webkit-background-size: auto !important;
  1637. -moz-background-size: auto !important;
  1638. background-size: auto !important;
  1639. }
  1640. }
  1641. /*--------------------------------------------------------------
  1642. Center Services and Employees
  1643. --------------------------------------------------------------*/
  1644. .services-area,
  1645. .employees-area {
  1646. text-align: center;
  1647. }
  1648. .service,
  1649. .employee {
  1650. display: inline-block;
  1651. float: none;
  1652. vertical-align: top;
  1653. text-align: left;
  1654. }
  1655. .page-template-page_services-php .service.col-xs-6,
  1656. .page-template-page_employees-php .employee.col-xs-6,
  1657. .services-area .col-xs-6,
  1658. .employees-area .col-xs-6 {
  1659. width: 49.5%;
  1660. }
  1661. @media (min-width: 768px) {
  1662. .page-template-page_services-php .service.col-sm-6,
  1663. .page-template-page_employees-php .employee.col-sm-6,
  1664. .services-area .col-sm-6,
  1665. .employees-area .col-sm-6 {
  1666. width: 49.5%;
  1667. }
  1668. }
  1669. @media (min-width: 992px) {
  1670. .page-template-page_services-php .service.col-md-4,
  1671. .page-template-page_employees-php .employee.col-md-4,
  1672. .services-area .col-md-4,
  1673. .employees-area .col-md-4 {
  1674. width: 33%;
  1675. }
  1676. }
  1677. /*--------------------------------------------------------------
  1678. Responsive
  1679. --------------------------------------------------------------*/
  1680. @media only screen and (min-width: 1025px) {
  1681. .header-image {
  1682. display: none;
  1683. }
  1684. }
  1685. @media only screen and (max-width: 1199px) {
  1686. .content-area {
  1687. width: 550px;
  1688. }
  1689. .fullwidth {
  1690. width: 100%;
  1691. }
  1692. .home-masonry .hentry {
  1693. width: 283px;
  1694. }
  1695. }
  1696. @media only screen and (max-width: 991px) {
  1697. .welcome-info {
  1698. top: 30px;
  1699. }
  1700. .project:nth-of-type(2n+1),
  1701. .service:nth-of-type(2n+1),
  1702. .employee:nth-of-type(2n+1) {
  1703. clear: both;
  1704. }
  1705. .blog-post:nth-of-type(3n+1) {
  1706. clear: none;
  1707. }
  1708. .blog-post:nth-of-type(2n+1) {
  1709. clear: left;
  1710. }
  1711. .project:nth-of-type(3n+1),
  1712. .service:nth-of-type(3n+1),
  1713. .employee:nth-of-type(3n+1) {
  1714. clear: none;
  1715. }
  1716. .content-area,
  1717. .widget-area {
  1718. width: 100%;
  1719. }
  1720. .stuck {
  1721. position: relative;
  1722. }
  1723. .home-masonry .hentry {
  1724. width: 330px;
  1725. }
  1726. }
  1727. @media only screen and (max-width: 767px) {
  1728. .skills-desc {
  1729. border: 0;
  1730. margin-bottom: 30px;
  1731. }
  1732. .skills-list {
  1733. border: 0;
  1734. margin: 0;
  1735. }
  1736. .home-masonry {
  1737. margin: 0 auto;
  1738. }
  1739. .home-masonry .hentry {
  1740. width: 280px;
  1741. }
  1742. }
  1743. @media only screen and (max-width: 650px) {
  1744. .home-masonry .hentry {
  1745. width: auto;
  1746. }
  1747. .home-masonry {
  1748. max-width: 100%;
  1749. }
  1750. }
  1751. @media only screen and (max-width: 600px) {
  1752. .hentry .entry-thumb,
  1753. .post-content {
  1754. width: 100%;
  1755. padding: 0;
  1756. }
  1757. .entry-title {
  1758. font-size: 25px;
  1759. }
  1760. .welcome-desc,
  1761. .welcome-button {
  1762. display: none;
  1763. }
  1764. .panel-grid-cell section,
  1765. .panel.widget,
  1766. .so-panel.widget {
  1767. padding-top: 40px;
  1768. padding-bottom: 40px;
  1769. }
  1770. .service,
  1771. .employee {
  1772. padding-left: 5px;
  1773. padding-right: 5px;
  1774. }
  1775. }
  1776. @media only screen and (max-width: 499px) {
  1777. .project,
  1778. .service,
  1779. .employee,
  1780. .bq-text,
  1781. .bq-img {
  1782. width: 100% !important;
  1783. }
  1784. .project img {
  1785. display: block;
  1786. margin: 0 auto;
  1787. }
  1788. section .widget-title {
  1789. font-size: 36px;
  1790. }
  1791. .welcome-title {
  1792. font-size: 24px;
  1793. }
  1794. .welcome-logo {
  1795. max-width: 100px;
  1796. }
  1797. .welcome-desc {
  1798. font-size: 20px;
  1799. color: #D8D8D8;
  1800. text-shadow: 0 0 2px #222, 0 0 2px #222;
  1801. }
  1802. .welcome-button {
  1803. font-size: 14px;
  1804. margin-top: 30px;
  1805. }
  1806. .blog-post {
  1807. width: 100%;
  1808. margin-bottom: 30px;
  1809. }
  1810. .blog-post:nth-of-type(3) {
  1811. margin-top: 0;
  1812. }
  1813. table {
  1814. table-layout: fixed;
  1815. }
  1816. .comments-area .children {
  1817. padding-left: 0;
  1818. }
  1819. }
  1820. @media only screen and (max-width: 416px) {
  1821. .social-area li {
  1822. padding: 0 10px;
  1823. }
  1824. .social-area a:before {
  1825. font-size: 65px;
  1826. }
  1827. .page-template-page_services-php .service,
  1828. .page-template-page_testimonials-php .testimonial {
  1829. padding-left: 0;
  1830. padding-right: 0;
  1831. }
  1832. }
  1833. /* Small menu */
  1834. .menu-toggle {
  1835. display: none;
  1836. background-color: #ebebeb;
  1837. color: #444;
  1838. margin: 40px 0;
  1839. box-shadow: none;
  1840. float: right;
  1841. }
  1842. @media (max-width: 320px) {
  1843. .site-branding.col-md-4 {
  1844. width: 100%;
  1845. text-align: center;
  1846. padding-top: 20px;
  1847. padding-bottom: 20px;
  1848. }
  1849. .menu-toggle.btn {
  1850. margin: 5px auto 10px;
  1851. float: none;
  1852. }
  1853. .site-title {
  1854. font-size: 30px;
  1855. }
  1856. }
  1857. @media screen and (max-width: 991px) {
  1858. .menu-toggle,
  1859. .main-navigation.toggled .nav-menu {
  1860. display: block;
  1861. }
  1862. .main-navigation.toggled {
  1863. width: 100%;
  1864. text-align: center;
  1865. margin-bottom: 30px;
  1866. }
  1867. .main-navigation ul {
  1868. float: none;
  1869. }
  1870. .toggled .menu-toggle {
  1871. margin: 0;
  1872. }
  1873. .main-navigation li {
  1874. width: 100%;
  1875. border: 0;
  1876. padding: 5px 0 !important;
  1877. text-align: center;
  1878. }
  1879. .main-navigation li:first-child {
  1880. padding-top: 15px;
  1881. }
  1882. .main-navigation ul ul li:hover {
  1883. background-color: transparent;
  1884. }
  1885. .main-navigation ul {
  1886. display: none;
  1887. }
  1888. .main-navigation .children,
  1889. .main-navigation ul ul {
  1890. display: block !important;
  1891. float: none;
  1892. position: static;
  1893. border: none;
  1894. background: transparent;
  1895. box-shadow: none;
  1896. }
  1897. .main-navigation ul ul li {
  1898. border: 0;
  1899. text-align: center;
  1900. }
  1901. .main-navigation ul ul a {
  1902. color: #E2E2E2;
  1903. margin: 0 auto;
  1904. }
  1905. .top-bar {
  1906. position: relative !important;
  1907. }
  1908. }
  1909. @media screen and (max-width: 1024px) {
  1910. .has-banner:after,
  1911. section {
  1912. background-attachment: scroll !important;
  1913. background-position: center top !important;
  1914. -webkit-background-size: auto !important;
  1915. -moz-background-size: auto !important;
  1916. background-size: auto !important;
  1917. }
  1918. .widget-title:after {
  1919. display: none;
  1920. }
  1921. }
  1922.  
  1923. /* Multi columns support */
  1924. .container {
  1925. width: auto !important;
  1926. }
  1927. .widget .container,
  1928. section .container {
  1929. padding-left: 30px;
  1930. padding-right: 30px;
  1931. }
  1932. @media (min-width: 768px) {
  1933. .container {
  1934. max-width: 750px;
  1935. }
  1936. }
  1937. @media (min-width: 992px) {
  1938. .container {
  1939. max-width: 970px;
  1940. }
  1941. }
  1942. @media (min-width: 1200px) {
  1943. .container {
  1944. max-width: 1170px;
  1945. }
  1946. }
  1947. @media (max-width: 499px) {
  1948. section .widget-title,
  1949. .panel.widget .widget-title,
  1950. .so-panel.widget .widget-title {
  1951. font-size: 36px;
  1952. }
  1953. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement