Guest User

toivo

a guest
May 15th, 2015
273
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 72.98 KB | None | 0 0
  1. /*
  2. Theme Name: Toivo Lite
  3. Theme URI: https://foxland.fi/downloads/toivo/
  4. Author: Sami Keijonen
  5. Author URI: https://foxland.fi
  6. Description: Toivo Lite is perfect fit for business, personal or blog sites. It has beautiful Front Page template where you can show your important content, testimonials and Callout links. Toivo Lite is an accessible, translation-ready theme which supports plenty of features like Right to Left languages and Schema.org microdata.
  7. Version: 1.0.4
  8. License: GNU General Public License v2 or later
  9. License URI: http://www.gnu.org/licenses/gpl-2.0.html
  10. Text Domain: toivo-lite
  11. Domain Path: /languages/
  12. Tags: white, light, one-column, two-columns, left-sidebar, right-sidebar, fluid-layout, responsive-layout, accessibility-ready, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready
  13.  
  14. This theme, like WordPress, is licensed under the GPL.
  15. Use it to make something cool, have fun, and share what you've learned with others.
  16.  
  17. Toivo is based on Underscores http://underscores.me/, (C) 2012-2015 Automattic, Inc.
  18.  
  19. Normalizing styles have been helped along thanks to the fine work of
  20. Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
  21. */
  22.  
  23. /*--------------------------------------------------------------
  24. >>> TABLE OF CONTENTS:
  25. ----------------------------------------------------------------
  26. 1.0 - Normalize
  27. 2.0 - Typography
  28. 3.0 - Elements
  29. 3.1 - Blockquotes, paragraphs, code, lists, tables
  30. 3.2 - Genericons
  31. 4.0 - Forms
  32. 5.0 - Navigation
  33. 5.1 - Links
  34. 5.2 - Menus
  35. 5.2.1 - Primary menu
  36. 5.2.2 - Top and Social menu
  37. 5.3 - Comment and post navigation
  38. 6.0 - Accessibility
  39. 7.0 - Alignments
  40. 8.0 - Clearings
  41. 9.0 - Widgets
  42. 10.0 - Content
  43. 10.1 - Posts and pages
  44. 10.2 - Asides
  45. 11.0 - Infinite scroll
  46. 12.0 - Media
  47. 12.1 - Captions
  48. 12.2 - Galleries
  49. 13.0 - Layouts
  50. 13.1 - Max-width
  51. 13.2 - Paddings
  52. 13.3 - Media queries
  53. 13.4 - Sidebar layouts
  54. 14.0 - Comments
  55. 15.0 - Plugins
  56. 15.1 - Jetpack CSS
  57. 16.0 - Right to left styles
  58. 17.0 - Child theme friendly zone
  59. 16.1 - Font Family
  60. 16.2 - Colors
  61. 16.3 - Backgrounds
  62. 16.4 - Borders
  63. --------------------------------------------------------------*/
  64.  
  65.  
  66. /*--------------------------------------------------------------
  67. 1.0 - Normalize
  68. --------------------------------------------------------------*/
  69.  
  70. html {
  71. font-family: sans-serif;
  72. -webkit-text-size-adjust: 100%;
  73. -ms-text-size-adjust: 100%;
  74. }
  75.  
  76. body {
  77. margin: 0;
  78. }
  79.  
  80. article,
  81. aside,
  82. details,
  83. figcaption,
  84. figure,
  85. footer,
  86. header,
  87. main,
  88. menu,
  89. nav,
  90. section,
  91. summary {
  92. display: block;
  93. }
  94.  
  95. audio,
  96. canvas,
  97. progress,
  98. video {
  99. display: inline-block;
  100. vertical-align: baseline;
  101. }
  102.  
  103. audio:not([controls]) {
  104. display: none;
  105. height: 0;
  106. }
  107.  
  108. [hidden],
  109. template {
  110. display: none;
  111. }
  112.  
  113. a {
  114. background-color: transparent;
  115. }
  116.  
  117. a:focus {
  118. outline: thin dotted;
  119. }
  120. a:active,
  121. a:hover {
  122. outline: 0;
  123. }
  124.  
  125. abbr[title] {
  126. border-bottom: 1px dotted;
  127. }
  128.  
  129. b,
  130. strong {
  131. font-weight: bold;
  132. }
  133.  
  134. dfn {
  135. font-style: italic;
  136. }
  137.  
  138. h1 {
  139. font-size: 2em;
  140. margin: 0.67em 0;
  141. }
  142.  
  143. mark {
  144. background: #ff0;
  145. color: #000;
  146. }
  147.  
  148. small {
  149. font-size: 80%;
  150. }
  151.  
  152. sub,
  153. sup {
  154. font-size: 75%;
  155. line-height: 0;
  156. position: relative;
  157. vertical-align: baseline;
  158. }
  159.  
  160. sup {
  161. top: -0.5em;
  162. }
  163.  
  164. sub {
  165. bottom: -0.25em;
  166. }
  167.  
  168. img {
  169. border: 0;
  170. }
  171.  
  172. svg:not(:root) {
  173. overflow: hidden;
  174. }
  175.  
  176. figure {
  177. margin: 1em 40px;
  178. }
  179.  
  180. hr {
  181. box-sizing: content-box;
  182. height: 0;
  183. }
  184.  
  185. pre {
  186. overflow: auto;
  187. }
  188.  
  189. code,
  190. kbd,
  191. pre,
  192. samp {
  193. font-family: monospace, monospace;
  194. font-size: 1em;
  195. }
  196.  
  197. button,
  198. input,
  199. optgroup,
  200. select,
  201. textarea {
  202. color: inherit;
  203. font: inherit;
  204. margin: 0;
  205. }
  206.  
  207. button {
  208. overflow: visible;
  209. }
  210.  
  211. button,
  212. select {
  213. text-transform: none;
  214. }
  215.  
  216. button,
  217. html input[type="button"],
  218. input[type="reset"],
  219. input[type="submit"] {
  220. -webkit-appearance: button;
  221. cursor: pointer;
  222. }
  223.  
  224. button[disabled],
  225. html input[disabled] {
  226. cursor: default;
  227. }
  228.  
  229. button::-moz-focus-inner,
  230. input::-moz-focus-inner {
  231. border: 0;
  232. padding: 0;
  233. }
  234.  
  235. input {
  236. line-height: normal;
  237. }
  238.  
  239. input[type="checkbox"],
  240. input[type="radio"] {
  241. box-sizing: border-box;
  242. padding: 0;
  243. }
  244.  
  245. input[type="number"]::-webkit-inner-spin-button,
  246. input[type="number"]::-webkit-outer-spin-button {
  247. height: auto;
  248. }
  249.  
  250. input[type="search"] {
  251. -webkit-appearance: textfield;
  252. /* box-sizing: content-box; */
  253. }
  254.  
  255. input[type="search"]::-webkit-search-cancel-button,
  256. input[type="search"]::-webkit-search-decoration {
  257. -webkit-appearance: none;
  258. }
  259.  
  260. fieldset {
  261. border: 1px solid #c0c0c0;
  262. margin: 0 2px;
  263. padding: 0.35em 0.625em 0.75em;
  264. }
  265.  
  266. legend {
  267. border: 0;
  268. padding: 0;
  269. }
  270.  
  271. textarea {
  272. overflow: auto;
  273. }
  274.  
  275. optgroup {
  276. font-weight: bold;
  277. }
  278.  
  279. table {
  280. border-collapse: collapse;
  281. border-spacing: 0;
  282. }
  283.  
  284. td,
  285. th {
  286. padding: 0;
  287. }
  288.  
  289.  
  290. /*--------------------------------------------------------------
  291. 2.0 Typography
  292. --------------------------------------------------------------*/
  293.  
  294. body,
  295. button,
  296. input,
  297. select,
  298. textarea {
  299. font-size: 16px;
  300. font-size: 1rem;
  301. line-height: 1.5;
  302. word-wrap: break-word;
  303. }
  304.  
  305. @media screen and (min-width: 1000px) {
  306.  
  307. body,
  308. button,
  309. input,
  310. select,
  311. textarea {
  312. font-size: 18px;
  313. font-size: 1.125rem;
  314. }
  315.  
  316. }
  317.  
  318. @media screen and (min-width: 1400px) {
  319.  
  320. body,
  321. button,
  322. input,
  323. select,
  324. textarea {
  325. font-size: 20px;
  326. font-size: 1.25rem;
  327. }
  328.  
  329. }
  330.  
  331. /* === 2.1 Headers === */
  332.  
  333. h1,
  334. h2,
  335. h3,
  336. h4,
  337. h5,
  338. h6,
  339. .site-title {
  340. clear: both;
  341. font-weight: 700;
  342. line-height: 1.3333333;
  343. margin: 0 0 1.5em 0;
  344. }
  345.  
  346. h1,
  347. .site-title {
  348. font-size: 32px;
  349. }
  350. h2 {
  351. font-size: 28px;
  352. }
  353. h3 {
  354. font-size: 24px;
  355. }
  356. h4 {
  357. font-size: 20px;
  358. }
  359. h5 {
  360. font-size: 18px;
  361. }
  362. h6 {
  363. font-size: 17px;
  364. }
  365.  
  366. @media screen and (min-width: 600px) {
  367.  
  368. h1,
  369. h2,
  370. h3,
  371. h4,
  372. h5,
  373. h6,
  374. .site-title {
  375. line-height: 1.2;
  376. }
  377.  
  378. h1,
  379. .site-title {
  380. font-size: 38px;
  381. }
  382. h2 {
  383. font-size: 32px;
  384. }
  385. h3 {
  386. font-size: 28px;
  387. }
  388. h4 {
  389. font-size: 24px;
  390. }
  391. h5 {
  392. font-size: 20px;
  393. }
  394. h6 {
  395. font-size: 18px;
  396. }
  397.  
  398. }
  399.  
  400. .site-header,
  401. .sidebar-subsidiary,
  402. .sidebar-subsidiary > .wrap > .wrap-inside {
  403. position: relative;
  404. }
  405. .site-header {
  406. text-align: center;
  407. }
  408.  
  409. .custom-header-image .site-header > .wrap::before,
  410. .sidebar-subsidiary > .wrap::before {
  411. content: "";
  412. display: block;
  413. height: 100%;
  414. position: absolute;
  415. top: 0;
  416. left: 0;
  417. width: 100%;
  418. z-index: 0;
  419. }
  420.  
  421. .site-branding {
  422. padding: 30px 0;
  423. }
  424.  
  425. .custom-header-image .site-branding {
  426. position: relative;
  427. }
  428.  
  429. @media screen and (min-width: 1000px) {
  430.  
  431. .custom-header-image .site-branding {
  432. padding: 60px 0;
  433. margin-bottom: 40px;
  434. margin-top: 40px;
  435. }
  436.  
  437. .has-site-logo.custom-header-image .site-branding {
  438. margin-top: 0;
  439. }
  440.  
  441. }
  442.  
  443. .site-title {
  444. margin: 0;
  445. padding-bottom: 14px;
  446. text-transform: uppercase;
  447. }
  448. .site-title a,
  449. a.toivo-button {
  450. display: inline-block;
  451. }
  452. .site-title a {
  453. letter-spacing: 2px;
  454. padding: 8px 14px;
  455. }
  456. .site-description {
  457. font-size: 20px;
  458. font-size: 1.25rem;
  459. font-style: italic;
  460. font-weight: 300;
  461. text-transform: none;
  462. padding: 0 0 16px 0;
  463. margin: 0;
  464. }
  465.  
  466. p {
  467. margin: 0 0 1.5em 0;
  468. }
  469. b,
  470. strong {
  471. font-weight: bold;
  472. }
  473. dfn,
  474. cite,
  475. em,
  476. i {
  477. font-style: italic;
  478. }
  479. blockquote {
  480. margin: 0 1.5em;
  481. }
  482. address {
  483. margin: 0 0 1.5em;
  484. }
  485. pre {
  486. background-size: 56px 56px;
  487. font-size: 18px;
  488. font-size: 1.125rem;
  489. line-height: 1.6;
  490. margin-bottom: 1.6em;
  491. max-width: 100%;
  492. overflow: auto;
  493. padding: 1.6em;
  494. word-wrap: normal;
  495. }
  496. code,
  497. kbd,
  498. tt,
  499. var {
  500. font-size: 15px;
  501. font-size: 0.9375rem;
  502. }
  503. abbr,
  504. acronym {
  505. cursor: help;
  506. }
  507. mark,
  508. ins {
  509. text-decoration: none;
  510. }
  511. small {
  512. font-size: 75%;
  513. }
  514. big {
  515. font-size: 125%;
  516. }
  517.  
  518.  
  519. /*--------------------------------------------------------------
  520. 3.0 Elements
  521. --------------------------------------------------------------*/
  522.  
  523. html {
  524. box-sizing: border-box;
  525. }
  526.  
  527. *,
  528. *:before,
  529. *:after { /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
  530. box-sizing: inherit;
  531. }
  532.  
  533. body {
  534. background: #fff; /* Fallback for when there is no custom background color defined. */
  535. }
  536.  
  537. /* === 3.1 Blockquotes, paragraphs, code, lists, tables === */
  538.  
  539. blockquote:before,
  540. blockquote:after,
  541. q:before,
  542. q:after {
  543. content: "";
  544. }
  545.  
  546. blockquote,
  547. q {
  548. quotes: "" "";
  549. }
  550.  
  551. blockquote {
  552. font-size: 1.125em;
  553. font-style: italic;
  554. margin: 0 0 1em;
  555. padding: 1% 3%;
  556. }
  557.  
  558. blockquote cite {
  559. font-size: 0.88888888888em;
  560. }
  561.  
  562. blockquote blockquote {
  563. font-size: 1em;
  564. padding: 0.5% 2%;
  565. }
  566.  
  567. blockquote p {
  568. margin: 0.666666666em 0;
  569. }
  570.  
  571. hr {
  572. border: 0;
  573. height: 2px;
  574. margin-bottom: 1.5em;
  575. }
  576. ul,
  577. ol {
  578. margin: 0 0 1.5em 1.5em;
  579. padding: 0;
  580. }
  581. ul {
  582. list-style: circle;
  583. }
  584. ol {
  585. list-style: decimal;
  586. }
  587.  
  588. .sidebar ul,
  589. .error-404.not-found ul {
  590. list-style: none;
  591. margin: 0;
  592. padding: 0;
  593. }
  594. .sidebar ul ul,
  595. .error-404.not-found ul ul {
  596. margin-left: 1em;
  597. }
  598. .sidebar ul li,
  599. .error-404.not-found ul li {
  600. padding-bottom: 10px;
  601. padding-top: 10px;
  602. }
  603. .sidebar ul ul li:first-child,
  604. .error-404.not-found ul ul li:first-child {
  605. margin-top: 10px;
  606. }
  607. .sidebar li:last-child,
  608. .error-404.not-found li:last-child {
  609. padding-bottom: 0;
  610. }
  611.  
  612. li > ul,
  613. li > ol {
  614. margin-bottom: 0;
  615. padding-left: 1em;
  616. margin-left: 1em;
  617. }
  618. dt {
  619. font-weight: bold;
  620. }
  621. dd {
  622. margin: 0 1.5em 1.5em;
  623. }
  624. img {
  625. height: auto; /* Make sure images are scaled correctly. */
  626. max-width: 100%; /* Adhere to container width. */
  627. }
  628. .callout-image img {
  629. display: block;
  630. width: 100%;
  631. }
  632. figure {
  633. margin: 0;
  634. }
  635.  
  636. /* Tables. */
  637.  
  638. table {
  639. margin: 0 0 1.5em;
  640. width: 100%;
  641. }
  642. th,
  643. td {
  644. padding: 6px 2%;
  645. }
  646. caption,
  647. th,
  648. td {
  649. text-align: left;
  650. }
  651. caption {
  652. margin: 1em 0;
  653. }
  654. th {
  655. font-weight: bold;
  656. }
  657.  
  658. /* wp-calendar <table> */
  659.  
  660. #wp-calendar th,
  661. #wp-calendar td {
  662. font-size: 14px;
  663. font-size: 0.875rem;
  664. padding: 4px 1%;
  665. text-align: center;
  666. }
  667. #wp-calendar tr:hover td,
  668. #wp-calendar td.pad,
  669. #wp-calendar #prev,
  670. #wp-calendar #next {
  671. background: transparent;
  672. }
  673. #wp-calendar #prev {
  674. text-align: left;
  675. }
  676. #wp-calendar #next {
  677. text-align: right;
  678. }
  679.  
  680. /* === 3.2 Genericons === */
  681.  
  682. a[href^="mailto:"]::before,
  683. a[href^="tel:"]::before,
  684. .genericon,
  685. .nav-toggle:before,
  686. button#top-nav-toggle:before,
  687. button#social-nav-toggle:before,
  688. .featured-post:before,
  689. .byline .entry-author a::before,
  690. .entry-date a::before,
  691. .comments-link a::before,
  692. .post-edit-link::before,
  693. .entry-permalink a::before,
  694. .post-format-link::before,
  695. .entry-terms::before,
  696. .image-sizes::before,
  697. .pagination .prev::before,
  698. .pagination .next::before,
  699. .chat-author cite::before,
  700. .comment-published::before,
  701. .comment-edit-link::before,
  702. .comment-author::before,
  703. .comment-permalink::before,
  704. .comment-reply-link::before,
  705. .comment-reply-login::before,
  706. .loop-nav a[rel="prev"]::before,
  707. .loop-nav a[rel="next"]::after,
  708. #menu-social li a::before,
  709. .widget li::before {
  710. -moz-osx-font-smoothing: grayscale;
  711. -webkit-font-smoothing: antialiased;
  712. display: inline-block;
  713. font: normal 16px/1 Genericons;
  714. vertical-align: text-bottom;
  715. }
  716.  
  717. .entry-date a,
  718. .byline .entry-author a,
  719. .entry-permalink a,
  720. .comments-link a,
  721. .comment-published,
  722. .comment-reply-link,
  723. .comment-edit-link,
  724. .comment-author {
  725. display: inline-block;
  726. margin-right: 8px;
  727. }
  728.  
  729. a[href^="mailto:"]::before,
  730. a[href^="tel:"]::before,
  731. .entry-date a::before,
  732. .byline .entry-author a::before,
  733. .comment-published::before,
  734. .comment-author::before,
  735. .comment-edit-link::before,
  736. .comments-link a::before,
  737. .comment-reply-link::before,
  738. .entry-permalink a::before,
  739. .entry-terms::before {
  740. content: '\f307';
  741. padding-right: 4px;
  742. position: relative;
  743. bottom: 0;
  744. }
  745.  
  746. a[href^="mailto:"]::before {
  747. content: '\f410';
  748. }
  749. a[href^="tel:"]::before {
  750. content: '\f437';
  751. bottom: 3px;
  752. }
  753.  
  754. .byline .entry-author a::before,
  755. .comment-author::before {
  756. content: '\f304';
  757. }
  758. .entry-permalink a::before {
  759. content: '\f107';
  760. }
  761. .comments-link a::before {
  762. content: '\f300';
  763. }
  764. .comment-reply-link::before {
  765. content: '\f412';
  766. }
  767. .comment-edit-link::before {
  768. content: '\f411';
  769. }
  770. .entry-terms::before {
  771. content: '\f301';
  772. }
  773. .entry-terms.category::before {
  774. content: '\f301';
  775. }
  776. .entry-terms.post_tag::before {
  777. content: '\f302';
  778. }
  779.  
  780.  
  781. /*--------------------------------------------------------------
  782. 4.0 Forms
  783. --------------------------------------------------------------*/
  784.  
  785. button,
  786. input[type="button"],
  787. input[type="reset"],
  788. input[type="submit"],
  789. .entry a.portfolio-item-link {
  790. border: none;
  791. line-height: 1;
  792. padding: .8em 1em;
  793. margin-top: 1em;
  794. transition: all 0.25s ease-in-out;
  795. }
  796.  
  797. .entry a.portfolio-item-link,
  798. a.toivo-button {
  799. display: inline-block;
  800. margin-top: 1em;
  801. }
  802.  
  803. input[type="number"],
  804. input[type="date"],
  805. input[type="datetime"],
  806. input[type="datetime-local"],
  807. input[type="email"],
  808. input[type="month"],
  809. input[type="password"],
  810. input[type="reset"],
  811. input[type="search"],
  812. input[type="tel"],
  813. input[type="text"],
  814. input[type="time"],
  815. input[type="url"],
  816. input[type="week"],
  817. textarea,
  818. select {
  819. transition: all 0.25s ease-in-out;
  820. }
  821.  
  822. textarea {
  823. vertical-align: top; /* Improves readability and alignment in all browsers */
  824. }
  825.  
  826. fieldset {
  827. margin: 0 0 1.5em 0;
  828. padding: 3%;
  829. }
  830.  
  831. legend {
  832. font-weight: bold;
  833. margin: 0 0 1.5em 0;
  834. padding: 1em 1.25em;
  835. white-space: normal;
  836. }
  837.  
  838. label {
  839. font-weight: bold;
  840. }
  841. label .search-field {
  842. font-weight: normal;
  843. }
  844.  
  845. input {
  846. display: block;
  847. }
  848. input[type="checkbox"],
  849. input[type="radio"] {
  850. display: inline-block;
  851. }
  852.  
  853. input[type="number"],
  854. input[type="date"],
  855. input[type="datetime"],
  856. input[type="datetime-local"],
  857. input[type="email"],
  858. input[type="month"],
  859. input[type="password"],
  860. input[type="reset"],
  861. input[type="search"],
  862. input[type="tel"],
  863. input[type="text"],
  864. input[type="time"],
  865. input[type="url"],
  866. input[type="week"],
  867. textarea,
  868. select {
  869. display: block;
  870. padding: 20px;
  871. padding: 1.25rem;
  872. margin-bottom: 1.5em;
  873. }
  874. input[type="date"],
  875. input[type="datetime"],
  876. input[type="datetime-local"],
  877. input[type="email"],
  878. input[type="month"],
  879. input[type="password"],
  880. input[type="search"],
  881. input[type="tel"],
  882. input[type="text"],
  883. input[type="time"],
  884. input[type="url"],
  885. input[type="week"],
  886. textarea,
  887. select {
  888. width: 100%;
  889. }
  890. textarea {
  891. min-height: 160px;
  892. }
  893.  
  894. /* Form fields, general styles */
  895.  
  896. input:focus,
  897. textarea:focus {
  898. outline: 0;
  899. }
  900.  
  901.  
  902. /*--------------------------------------------------------------
  903. 5.0 Navigation
  904. --------------------------------------------------------------*/
  905.  
  906. /* === 5.1 Links === */
  907.  
  908. a,
  909. .post-thumbnail img,
  910. #menu-social li a::before {
  911. text-decoration: none;
  912. transition: all 0.25s ease-in-out;
  913. }
  914.  
  915. a:hover,
  916. a:focus,
  917. a:active,
  918. .loop-description a {
  919. text-decoration: underline;
  920. }
  921.  
  922. a.more-link:hover,
  923. a.more-link:focus,
  924. a.more-link:active,
  925. a.toivo-button:hover,
  926. a.toivo-button:focus,
  927. a.toivo-button:active {
  928. text-decoration: none;
  929. }
  930.  
  931. a.more-link {
  932. display: inline-block;
  933. }
  934.  
  935. a.more-link,
  936. input[type="button"],
  937. input[type="reset"],
  938. input[type="submit"],
  939. body #infinite-handle span {
  940. font-size: 0.75em;
  941. font-weight: 700;
  942. letter-spacing: 2px;
  943. padding: 1.25em 1.5em;
  944. text-transform: uppercase;
  945. }
  946. body #infinite-handle span button {
  947. letter-spacing: 2px;
  948. text-transform: uppercase;
  949. }
  950.  
  951. a.toivo-button {
  952. font-weight: 700;
  953. letter-spacing: 2px;
  954. padding: 2.5% 4%;
  955. text-transform: uppercase;
  956. }
  957.  
  958.  
  959. /*--------------------------------------------------------------
  960. 5.2 Menus
  961. --------------------------------------------------------------*/
  962.  
  963. /* === 5.2.1 Primary menu === */
  964.  
  965. .main-navigation ul {
  966. font-size: 16px;
  967. font-size: 1rem;
  968. margin: 0;
  969. padding: 0;
  970. list-style: none;
  971. }
  972. .main-navigation li a,
  973. button#nav-toggle {
  974. text-decoration: none;
  975. text-transform: uppercase;
  976. }
  977. .main-navigation ul.sub-menu li a,
  978. .main-navigation .menu-item-description.top-depth {
  979. text-transform: none;
  980. }
  981.  
  982.  
  983. @media screen and (max-width: 999px) {
  984.  
  985. .main-navigation ul {
  986. width: 100%;
  987. display: block;
  988. }
  989.  
  990. .main-navigation li {
  991. width: 100%;
  992. display: block;
  993. }
  994.  
  995. button#nav-toggle {
  996. border: none;
  997. position: relative;
  998. margin: 0;
  999. z-index: 100;
  1000. }
  1001.  
  1002. .main-navigation li a,
  1003. button#nav-toggle {
  1004. display: block;
  1005. padding: 10px 4%;
  1006. width: 100%;
  1007. }
  1008. button#nav-toggle {
  1009. border-bottom: none;
  1010. }
  1011.  
  1012. #menu-primary ul ul li a {
  1013. padding-left: 9%;
  1014. }
  1015. #menu-primary ul ul ul li a {
  1016. padding-left: 11%;
  1017. }
  1018. #menu-primary ul ul ul ul li a {
  1019. padding-left: 13%;
  1020. }
  1021.  
  1022. .js .main-navigation {
  1023. clip: rect(0 0 0 0);
  1024. max-height: 0;
  1025. position: absolute;
  1026. display: block;
  1027. overflow: hidden;
  1028. zoom: 1;
  1029. }
  1030.  
  1031. .main-navigation.opened {
  1032. max-height: 9999px;
  1033. }
  1034.  
  1035. .disable-pointer-events {
  1036. pointer-events: none !important;
  1037. }
  1038.  
  1039. #nav-toggle {
  1040. -webkit-tap-highlight-color: rgba(0,0,0,0);
  1041. -webkit-touch-callout: none;
  1042. -webkit-user-select: none;
  1043. -moz-user-select: none;
  1044. -ms-user-select: none;
  1045. -o-user-select: none;
  1046. user-select: none;
  1047. }
  1048. button#nav-toggle:before {
  1049. -webkit-font-smoothing: antialiased;
  1050. content: "\f419";
  1051. display: inline-block;
  1052. font: normal 32px/1 Genericons;
  1053. margin: 0 6px 0 0;
  1054. vertical-align: middle;
  1055. width: 32px;
  1056. height: 32px;
  1057. }
  1058. button#nav-toggle.active:before {
  1059. content: "\f405";
  1060. }
  1061.  
  1062. }
  1063.  
  1064. @media screen and (min-width: 1000px) {
  1065.  
  1066. .js .main-navigation {
  1067. position: relative;
  1068. }
  1069. .js .main-navigation.closed {
  1070. max-height: none;
  1071. }
  1072.  
  1073. #nav-toggle,
  1074. .menu-item-description-mark {
  1075. display: none;
  1076. }
  1077.  
  1078. #menu-primary .wrap {
  1079. padding: 0 4%;
  1080. }
  1081.  
  1082. #menu-primary ul {
  1083. margin-bottom: 0;
  1084. text-align: center;
  1085. }
  1086.  
  1087. #menu-primary li {
  1088. border: 0;
  1089. display: inline-block;
  1090. height: 65px;
  1091. line-height: 65px;
  1092. position: relative;
  1093. }
  1094.  
  1095. #menu-primary a {
  1096. display: inline-block;
  1097. padding: 0 24px;
  1098. white-space: nowrap;
  1099. }
  1100.  
  1101. #menu-primary ul ul {
  1102. float: left;
  1103. margin: 0;
  1104. position: absolute;
  1105. top: 85px;
  1106. left: -999em;
  1107. z-index: 99999;
  1108. transition-property: opacity, visibility;
  1109. transition-duration: .25s, 0s;
  1110. transition-delay: 0.25s, .25s;
  1111. transition: opacity 0.3s ease-in-out, top 0.3s ease-in-out;
  1112. visibility: hidden;
  1113. opacity: 0;
  1114. }
  1115.  
  1116. #menu-primary li li {
  1117. border: 0;
  1118. display: block;
  1119. height: auto;
  1120. line-height: 1.0909090909;
  1121. }
  1122.  
  1123. #menu-primary ul ul ul {
  1124. left: -999em;
  1125. top: 20px;
  1126. }
  1127.  
  1128. #menu-primary ul ul a {
  1129. padding: 18px 12px;
  1130. white-space: normal;
  1131. width: 200px;
  1132. }
  1133.  
  1134. #menu-primary ul li:hover > ul,
  1135. #menu-primary ul li.focus > ul {
  1136. top: 65px;
  1137. left: 50%;
  1138. margin-left: -100px;
  1139. opacity: 1;
  1140. visibility: visible;
  1141. }
  1142.  
  1143. #menu-primary ul ul li:hover > ul,
  1144. #menu-primary ul ul li.focus > ul {
  1145. top: 0;
  1146. left: 100%;
  1147. margin-left: 0;
  1148. opacity: 1;
  1149. visibility: visible;
  1150. }
  1151.  
  1152. #menu-primary .menu-item-has-children > a,
  1153. #menu-primary .page_item_has_children > a {
  1154. padding-right: 26px;
  1155. }
  1156.  
  1157. #menu-primary .menu-item-has-children > a:after,
  1158. #menu-primary .page_item_has_children > a:after {
  1159. -webkit-font-smoothing: antialiased;
  1160. content: "\f502";
  1161. display: inline-block;
  1162. font: normal 8px/1 Genericons;
  1163. position: absolute;
  1164. right: 12px;
  1165. top: 30px;
  1166. vertical-align: text-bottom;
  1167. }
  1168.  
  1169. #menu-primary li .menu-item-has-children > a,
  1170. #menu-primary li .page_item_has_children > a {
  1171. padding-right: 20px;
  1172. width: 200px;
  1173. }
  1174.  
  1175. #menu-primary .menu-item-has-children li.menu-item-has-children > a:after,
  1176. #menu-primary .menu-item-has-children li.page_item_has_children > a:after,
  1177. #menu-primary .page_item_has_children li.menu-item-has-children > a:after,
  1178. #menu-primary .page_item_has_children li.page_item_has_children > a:after {
  1179. content: "\f501";
  1180. right: 8px;
  1181. top: 20px;
  1182. }
  1183.  
  1184. #menu-primary ul#menu-primary-items > li.menu-item-has-children > ul > li:first-child:after,
  1185. #menu-primary ul#menu-primary-items > li.menu-item-has-children > ul > li:first-child:before {
  1186. bottom: 100%;
  1187. left: 50%;
  1188. border: solid transparent;
  1189. content: " ";
  1190. height: 0;
  1191. width: 0;
  1192. position: absolute;
  1193. pointer-events: none;
  1194. }
  1195.  
  1196. #menu-primary ul#menu-primary-items > li.menu-item-has-children > ul > li:first-child:after {
  1197. border-color: rgba(255, 255, 255, 0);
  1198. border-bottom-color: #fff;
  1199. border-width: 10px;
  1200. margin-left: -10px;
  1201. }
  1202. #menu-primary ul#menu-primary-items > li.menu-item-has-children > ul > li:first-child:before {
  1203. border-color: rgba(221, 221, 221, 0);
  1204. border-bottom-color: #ddd;
  1205. border-width: 11px;
  1206. margin-left: -11px;
  1207. }
  1208.  
  1209. .main-navigation .menu-item-description {
  1210. display: block;
  1211. }
  1212.  
  1213. .main-navigation .menu-item-description.top-depth {
  1214. position: absolute;
  1215. bottom: 0px;
  1216. left: -999em;
  1217. padding: 14px 18px;
  1218. width: 200px;
  1219. line-height: 1.0909090909;
  1220. white-space: normal;
  1221. border-radius: 4px;
  1222. transition-property: opacity, visibility;
  1223. transition-duration: .15s, 0s;
  1224. transition-delay: 0.15s, .15s;
  1225. visibility: hidden;
  1226. opacity: 0;
  1227. }
  1228.  
  1229. /* CSS arrow for top depth description. */
  1230. .main-navigation .menu-item-description.top-depth:after,
  1231. .main-navigation .menu-item-description.top-depth:before {
  1232. top: 100%;
  1233. left: 50%;
  1234. border: solid transparent;
  1235. content: " ";
  1236. height: 0;
  1237. width: 0;
  1238. position: absolute;
  1239. pointer-events: none;
  1240. }
  1241.  
  1242. .main-navigation .menu-item-description.top-depth:after {
  1243. border-width: 10px;
  1244. margin-left: -10px;
  1245. }
  1246. .main-navigation .menu-item-description.top-depth:before {
  1247. border-width: 11px;
  1248. margin-left: -11px;
  1249. }
  1250.  
  1251. #menu-primary ul li:hover .menu-item-description.top-depth,
  1252. #menu-primary ul li.focus .menu-item-description.top-depth {
  1253. left: 50%;
  1254. bottom: 101px;
  1255. margin-left: -100px;
  1256. opacity: 1;
  1257. visibility: visible;
  1258. }
  1259.  
  1260. }
  1261.  
  1262. /* === 5.2.2 Top and Social menu === */
  1263.  
  1264. #top-header {
  1265. position: relative;
  1266. }
  1267. .top-menus-disabled #top-header {
  1268. height: 86px;
  1269. }
  1270.  
  1271. .top-navigation ul {
  1272. font-size: 16px;
  1273. font-size: 1rem;
  1274. margin: 0;
  1275. padding: 0;
  1276. list-style: none;
  1277. }
  1278. .top-navigation li a {
  1279. text-decoration: none;
  1280. text-transform: uppercase;
  1281. }
  1282.  
  1283. @media screen and (max-width: 1199px) {
  1284.  
  1285. .top-navigation ul,
  1286. .social-navigation ul {
  1287. width: 100%;
  1288. display: block;
  1289. text-align: center;
  1290. }
  1291.  
  1292. .top-navigation li {
  1293. width: 100%;
  1294. display: block;
  1295. }
  1296.  
  1297. button#top-nav-toggle,
  1298. button#social-nav-toggle {
  1299. border: none;
  1300. display: block;
  1301. height: 80px;
  1302. width: 80px;
  1303. margin: 0;
  1304. text-align: center;
  1305. text-transform: uppercase;
  1306. overflow: hidden;
  1307. padding-top: 0;
  1308. padding-bottom: 0;
  1309. position: relative;
  1310. z-index: 100;
  1311. }
  1312.  
  1313. button#top-nav-toggle:before,
  1314. button#social-nav-toggle:before {
  1315. content: '\f419';
  1316. font-size: 32px;
  1317. line-height: 80px;
  1318. }
  1319. button#social-nav-toggle:before {
  1320. content: '\f505';
  1321. }
  1322. button#top-nav-toggle.active:before,
  1323. button#social-nav-toggle.active:before {
  1324. content: '\f405';
  1325. }
  1326.  
  1327. .top-navigation li a {
  1328. display: block;
  1329. padding: 10px 4%;
  1330. width: 100%;
  1331. }
  1332.  
  1333. button#top-nav-toggle {
  1334. float: left;
  1335. }
  1336. button#social-nav-toggle {
  1337. float: right;
  1338. }
  1339.  
  1340. button#top-nav-toggle,
  1341. button#social-nav-toggle {
  1342. border-bottom: none;
  1343. }
  1344.  
  1345. .js .top-navigation,
  1346. .js .social-navigation {
  1347. clip: rect(0 0 0 0);
  1348. max-height: 0;
  1349. position: absolute;
  1350. display: block;
  1351. overflow: hidden;
  1352. zoom: 1;
  1353. }
  1354.  
  1355. .top-navigation.opened,
  1356. .social-navigation.opened {
  1357. clear: both;
  1358. margin-bottom: 80px;
  1359. max-height: 9999px;
  1360. }
  1361. .social-navigation.opened {
  1362. padding-top: 40px;
  1363. padding-bottom: 80px;
  1364. }
  1365. .top-navigation.opened + .social-navigation.opened {
  1366. padding-top: 0;
  1367. margin-top: -40px;
  1368. }
  1369.  
  1370. .disable-pointer-events {
  1371. pointer-events: none !important;
  1372. }
  1373.  
  1374. #top-nav-toggle {
  1375. -webkit-tap-highlight-color: rgba(0,0,0,0);
  1376. -webkit-touch-callout: none;
  1377. -webkit-user-select: none;
  1378. -moz-user-select: none;
  1379. -ms-user-select: none;
  1380. -o-user-select: none;
  1381. user-select: none;
  1382. }
  1383.  
  1384. }
  1385.  
  1386. @media screen and (min-width: 1200px) {
  1387.  
  1388. .js .top-navigation {
  1389. position: relative;
  1390. }
  1391. .js .top-navigation.closed {
  1392. max-height: none;
  1393. }
  1394.  
  1395. #top-nav-toggle,
  1396. #social-nav-toggle {
  1397. display: none;
  1398. }
  1399. .top-navigation,
  1400. .social-navigation {
  1401. display: block;
  1402. width: 45%;
  1403. }
  1404. .top-navigation {
  1405. float: left;
  1406. padding-left: 4%;
  1407. }
  1408. .social-navigation {
  1409. float: right;
  1410. padding-right: 4%;
  1411. text-align: right;
  1412. }
  1413.  
  1414. .top-navigation ul,
  1415. .social-navigation ul {
  1416. margin-bottom: 0;
  1417. }
  1418.  
  1419. .top-navigation li,
  1420. .social-navigation li {
  1421. border: 0;
  1422. display: inline-block;
  1423. height: 80px;
  1424. line-height: 80px;
  1425. position: relative;
  1426. }
  1427. .social-navigation li {
  1428. height: 73px;
  1429. line-height: 73px;
  1430. padding-top: 18px;
  1431. }
  1432.  
  1433. .top-navigation a {
  1434. display: inline-block;
  1435. padding: 0 12px;
  1436. white-space: nowrap;
  1437. }
  1438.  
  1439. }
  1440.  
  1441. #menu-social ul {
  1442. list-style: none;
  1443. padding: 0;
  1444. margin: 0;
  1445. }
  1446.  
  1447. #menu-social ul li {
  1448. display: inline-block;
  1449. margin: 0 5px;
  1450. }
  1451.  
  1452. #menu-social li a::before {
  1453. position: absolute;
  1454. font: 32px/1 'Genericons';
  1455. display: inline-block;
  1456. text-decoration: none;
  1457. top: 6px;
  1458. left: 6px;
  1459. }
  1460.  
  1461. /* Social icons. */
  1462. #menu-social li a {
  1463. border-radius: 100%;
  1464. display: block;
  1465. padding: 0;
  1466. position: relative;
  1467. width: 46px;
  1468. height: 46px;
  1469. }
  1470.  
  1471. #menu-social li a[href*="codepen.io"]::before,
  1472. #menu-social li a[href*="digg.com"]::before,
  1473. #menu-social li a[href*="dri9f9f9fle.com"]::before,
  1474. #menu-social li a[href*="facebook.com"]::before,
  1475. #menu-social li a[href*="flickr.com"]::before,
  1476. #menu-social li a[href*="plus.google.com"]::before,
  1477. #menu-social li a[href*="github.com"]::before,
  1478. #menu-social li a[href*="instagram.com"]::before,
  1479. #menu-social li a[href*="linkedin.com"]::before,
  1480. #menu-social li a[href*="pinterest.com"]::before,
  1481. #menu-social li a[href*="polldaddy.com"]::before,
  1482. #menu-social li a[href*="getpocket.com"]::before,
  1483. #menu-social li a[href*="reddit.com"]::before,
  1484. #menu-social li a[href*="skype.com"]::before,
  1485. #menu-social li a[href*="skype:"]::before,
  1486. #menu-social li a[href*="stumbleupon.com"]::before,
  1487. #menu-social li a[href*="tumblr.com"]::before,
  1488. #menu-social li a[href*="twitter.com"]::before,
  1489. #menu-social li a[href*="vimeo.com"]::before,
  1490. #menu-social li a[href*="wordpress.org"]::before,
  1491. #menu-social li a[href*="wordpress.com"]::before,
  1492. #menu-social li a[href*="youtube.com"]::before {
  1493. display: inline-block;
  1494. content: '\f409';
  1495. -webkit-font-smoothing: antialiased;
  1496. vertical-align: middle;
  1497. }
  1498. #menu-social li a[href*="codepen.io"]::before {
  1499. content: '\f216';
  1500. }
  1501. #menu-social li a[href*="digg.com"]::before {
  1502. content: '\f221';
  1503. }
  1504. #menu-social li a[href*="dri9f9f9fle.com"]::before {
  1505. content: '\f201';
  1506. }
  1507. #menu-social li a[href*="facebook.com"]::before {
  1508. content: '\f204';
  1509. }
  1510. #menu-social li a[href*="flickr.com"]::before {
  1511. content: '\f211';
  1512. }
  1513. #menu-social li a[href*="plus.google.com"]::before {
  1514. content: '\f206';
  1515. }
  1516. #menu-social li a[href*="github.com"]::before {
  1517. content: '\f200';
  1518. }
  1519. #menu-social li a[href*="instagram.com"]::before {
  1520. content: '\f215';
  1521. }
  1522. #menu-social li a[href*="linkedin.com"]::before {
  1523. content: '\f208';
  1524. }
  1525. #menu-social li a[href*="pinterest.com"]::before {
  1526. content: '\f210';
  1527. }
  1528. #menu-social li a[href*="polldaddy.com"]::before {
  1529. content: '\f217';
  1530. }
  1531. #menu-social li a[href*="getpocket.com"]::before {
  1532. content: '\f224';
  1533. }
  1534. #menu-social li a[href*="reddit.com"]::before {
  1535. content: '\f222';
  1536. }
  1537. #menu-social li a[href*="skype.com"]::before,
  1538. #menu-social li a[href*="skype:"]::before {
  1539. content: '\f220';
  1540. }
  1541. #menu-social li a[href*="stumbleupon.com"]::before {
  1542. content: '\f223';
  1543. }
  1544. #menu-social li a[href*="tumblr.com"]::before {
  1545. content: '\f214';
  1546. }
  1547. #menu-social li a[href*="twitter.com"]::before {
  1548. content: '\f202';
  1549. }
  1550. #menu-social li a[href*="vimeo.com"]::before {
  1551. content: '\f212';
  1552. }
  1553. #menu-social li a[href*="wordpress.org"]::before,
  1554. #menu-social li a[href*="wordpress.com"]::before {
  1555. content: '\f205';
  1556. }
  1557. #menu-social li a[href*="youtube.com"]::before {
  1558. content: '\f213';
  1559. }
  1560.  
  1561.  
  1562. #menu-social li a:hover,
  1563. #menu-social li a:focus ,
  1564. #menu-social li a:active {
  1565. text-decoration: none;
  1566. }
  1567. #menu-social li a[href*="digg.com"]:hover::before,
  1568. #menu-social li a[href*="digg.com"]:focus::before,
  1569. #menu-social li a[href*="digg.com"]:active::before {
  1570. color: #fff;
  1571. }
  1572. #menu-social li a[href*="dri9f9f9fle.com"]:hover::before,
  1573. #menu-social li a[href*="dri9f9f9fle.com"]:focus::before,
  1574. #menu-social li a[href*="dri9f9f9fle.com"]:active::before {
  1575. color: #ea4c89;
  1576. }
  1577. #menu-social li a[href*="facebook.com"]:hover::before,
  1578. #menu-social li a[href*="facebook.com"]:focus::before,
  1579. #menu-social li a[href*="facebook.com"]:active::before {
  1580. color: #3b5998;
  1581. }
  1582. #menu-social li a[href*="flickr.com"]:hover::before,
  1583. #menu-social li a[href*="flickr.com"]:focus::before,
  1584. #menu-social li a[href*="flickr.com"]:active::before {
  1585. color: #ff0084;
  1586. }
  1587. #menu-social li a[href*="plus.google.com"]:hover::before,
  1588. #menu-social li a[href*="plus.google.com"]:focus::before,
  1589. #menu-social li a[href*="plus.google.com"]:active::before {
  1590. color: #dd4b39;
  1591. }
  1592. #menu-social li a[href*="github.com"]:hover::before,
  1593. #menu-social li a[href*="github.com"]:focus::before,
  1594. #menu-social li a[href*="github.com"]:active::before {
  1595. color: #4183c4;
  1596. }
  1597. #menu-social li a[href*="instagram.com"]:hover::before,
  1598. #menu-social li a[href*="instagram.com"]:focus::before,
  1599. #menu-social li a[href*="instagram.com"]:active::before {
  1600. color: #3f729b;
  1601. }
  1602. #menu-social li a[href*="linkedin.com"]:hover::before,
  1603. #menu-social li a[href*="linkedin.com"]:focus::before,
  1604. #menu-social li a[href*="linkedin.com"]:active::before {
  1605. color: #0e76a8;
  1606. }
  1607. #menu-social li a[href*="pinterest.com"]:hover::before,
  1608. #menu-social li a[href*="pinterest.com"]:focus::before,
  1609. #menu-social li a[href*="pinterest.com"]:active::before {
  1610. color: #c8232c;
  1611. }
  1612. #menu-social li a[href*="polldaddy.com"]:hover::before,
  1613. #menu-social li a[href*="polldaddy.com"]:focus::before,
  1614. #menu-social li a[href*="polldaddy.com"]:active::before {
  1615. color: #bc0b0b;
  1616. }
  1617. #menu-social li a[href*="getpocket.com"]:hover::before,
  1618. #menu-social li a[href*="getpocket.com"]:focus::before,
  1619. #menu-social li a[href*="getpocket.com"]:active::before {
  1620. color: #ee4056;
  1621. }
  1622. #menu-social li a[href*="reddit.com"]:hover::before,
  1623. #menu-social li a[href*="reddit.com"]:focus::before,
  1624. #menu-social li a[href*="reddit.com"]:active::before {
  1625. color: #336699;
  1626. }
  1627. #menu-social li a[href*="skype.com"]:hover::before,
  1628. #menu-social li a[href*="skype.com"]:focus::before,
  1629. #menu-social li a[href*="skype.com"]:active::before,
  1630. #menu-social li a[href*="skype:"]:hover::before,
  1631. #menu-social li a[href*="skype:"]:focus::before,
  1632. #menu-social li a[href*="skype:"]:active::before {
  1633. color: #00aff0;
  1634. }
  1635. #menu-social li a[href*="stumbleupon.com"]:hover::before,
  1636. #menu-social li a[href*="stumbleupon.com"]:focus::before,
  1637. #menu-social li a[href*="stumbleupon.com"]:active::before {
  1638. color: #ff2618;
  1639. }
  1640. #menu-social li a[href*="tumblr.com"]:hover::before,
  1641. #menu-social li a[href*="tumblr.com"]:focus::before,
  1642. #menu-social li a[href*="tumblr.com"]:active::before {
  1643. color: #34526f;
  1644. }
  1645. #menu-social li a[href*="twitter.com"]:hover::before,
  1646. #menu-social li a[href*="twitter.com"]:focus::before,
  1647. #menu-social li a[href*="twitter.com"]:active::before {
  1648. color: #33ccff;
  1649. }
  1650. #menu-social li a[href*="vimeo.com"]:hover::before,
  1651. #menu-social li a[href*="vimeo.com"]:focus::before,
  1652. #menu-social li a[href*="vimeo.com"]:active::before {
  1653. color: #1ab7ea;
  1654. }
  1655. #menu-social li a[href*="wordpress.org"]:hover::before,
  1656. #menu-social li a[href*="wordpress.org"]:focus::before,
  1657. #menu-social li a[href*="wordpress.org"]:active::before,
  1658. #menu-social li a[href*="wordpress.com"]:hover::before,
  1659. #menu-social li a[href*="wordpress.com"]:focus::before,
  1660. #menu-social li a[href*="wordpress.com"]:active::before {
  1661. color: #21759b;
  1662. }
  1663. #menu-social li a[href*="youtube.com"]:hover::before,
  1664. #menu-social li a[href*="youtube.com"]:focus::before,
  1665. #menu-social li a[href*="youtube.com"]:active::before {
  1666. color: #c4302b;
  1667. }
  1668.  
  1669. /* === 5.3 Comment and post navigation === */
  1670.  
  1671. .site-main .pagination,
  1672. .site-main .post-navigation {
  1673. margin-bottom: 5%;
  1674. overflow: hidden;
  1675. }
  1676. .site-main .pagination {
  1677. margin-bottom: 0;
  1678. }
  1679. .post-navigation .nav-next {
  1680. text-align: right;
  1681. }
  1682.  
  1683. .comments-title,
  1684. .comments-title-no,
  1685. .comment-navigation {
  1686. text-align: center;
  1687.  
  1688. }
  1689. .comments-title,
  1690. .comment-navigation-top {
  1691. padding-bottom: 30px;
  1692. margin-bottom: 30px;
  1693. }
  1694. .comment-navigation-bottom {
  1695. padding-top: 30px;
  1696. margin-bottom: 30px;
  1697. }
  1698.  
  1699. .comment-navigation .nav-previous:not(:empty),
  1700. .comment-navigation .nav-next:not(:empty) {
  1701. display: inline-block;
  1702. }
  1703. .comment-navigation .nav-previous:not(:empty) + .nav-next:not(:empty):before {
  1704. content: "\2217";
  1705. margin: 0 0.7em;
  1706. }
  1707.  
  1708. .post-navigation .meta-nav {
  1709. display: block;
  1710. font-weight: 400;
  1711. text-transform: uppercase;
  1712. }
  1713.  
  1714. .post-navigation a {
  1715. display: block;
  1716. padding: 5% 6%;
  1717. }
  1718.  
  1719. .post-navigation a:hover,
  1720. .post-navigation a:active,
  1721. .post-navigation a:focus {
  1722. text-decoration: none;
  1723. }
  1724.  
  1725. .pagination .nav-links {
  1726. min-height: 3.2em;
  1727. position: relative;
  1728. text-align: center;
  1729. }
  1730.  
  1731. .pagination .page-numbers {
  1732. line-height: 80px;
  1733. padding: 0 0.6667em;
  1734. }
  1735.  
  1736. .pagination .page-numbers.dots {
  1737. padding: 0;
  1738. }
  1739.  
  1740. .pagination .page-numbers.current {
  1741. text-transform: uppercase;
  1742. }
  1743.  
  1744. .pagination .current {
  1745. display: inline-block;
  1746. font-weight: 700;
  1747. }
  1748.  
  1749. .pagination .prev,
  1750. .pagination .next {
  1751. display: inline-block;
  1752. height: 80px;
  1753. overflow: hidden;
  1754. padding: 0;
  1755. position: absolute;
  1756. width: 80px;
  1757. }
  1758.  
  1759. .pagination .prev::before,
  1760. .pagination .next::before {
  1761. font-size: 48px;
  1762. height: 80px;
  1763. line-height: 80px;
  1764. position: relative;
  1765. width: 80px;
  1766. }
  1767.  
  1768. .pagination .prev {
  1769. left: 0;
  1770. }
  1771.  
  1772. .pagination .prev::before {
  1773. content: "\f430";
  1774. left: -2px;
  1775. }
  1776. .pagination .next::before {
  1777. content: "\f429";
  1778. left: 3px;
  1779. }
  1780.  
  1781. .pagination .next {
  1782. right: 0;
  1783. }
  1784.  
  1785.  
  1786. /*--------------------------------------------------------------
  1787. 6.0 Accessibility
  1788. --------------------------------------------------------------*/
  1789.  
  1790. /* Text meant only for screen readers. */
  1791. .screen-reader-text {
  1792. clip: rect(1px, 1px, 1px, 1px);
  1793. position: absolute !important;
  1794. height: 1px;
  1795. width: 1px;
  1796. overflow: hidden;
  1797. }
  1798.  
  1799. .screen-reader-text:hover,
  1800. .screen-reader-text:active,
  1801. .screen-reader-text:focus {
  1802. border-radius: 3px;
  1803. box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  1804. clip: auto !important;
  1805. display: block;
  1806. font-size: 16px;
  1807. font-size: 1rem;
  1808. font-weight: bold;
  1809. height: auto;
  1810. left: 5px;
  1811. line-height: normal;
  1812. padding: 15px 23px 14px;
  1813. text-decoration: none;
  1814. top: 5px;
  1815. width: auto;
  1816. z-index: 100000; /* Above WP toolbar */
  1817. }
  1818.  
  1819.  
  1820. /*--------------------------------------------------------------
  1821. 7.0 Alignments
  1822. --------------------------------------------------------------*/
  1823.  
  1824. .alignleft {
  1825. display: inline;
  1826. float: left;
  1827. margin: 0 1.5em 1.5em 0;
  1828. }
  1829. .alignright {
  1830. display: inline;
  1831. float: right;
  1832. margin: 0 0 1.5em 1.5em;
  1833. }
  1834. .aligncenter {
  1835. clear: both;
  1836. display: block;
  1837. margin-left: auto;
  1838. margin-right: auto;
  1839. }
  1840.  
  1841.  
  1842. /*--------------------------------------------------------------
  1843. 8.0 Clearings
  1844. --------------------------------------------------------------*/
  1845.  
  1846. .clear:before,
  1847. .clear:after,
  1848. .entry:before,
  1849. .entry:after,
  1850. .entry-content:before,
  1851. .entry-content:after,
  1852. .entry-header-summary:before,
  1853. .entry-header-summary:after,
  1854. .comment-content:before,
  1855. .comment-content:after,
  1856. .top-header:before,
  1857. .top-header:after,
  1858. .top-header-buttons:before,
  1859. .top-header-buttons:after,
  1860. .site-header:before,
  1861. .site-header:after,
  1862. .site-branding:before,
  1863. .site-branding:after,
  1864. #site-navigation .wrap:before,
  1865. #site-navigation .wrap:after,
  1866. .top-navigation:before,
  1867. .top-navigation:after,
  1868. .social-navigation:before,
  1869. .social-navigation:after,
  1870. #content .wrap:before,
  1871. #content .wrap:after,
  1872. .site-content:before,
  1873. .site-content:after,
  1874. .entry-summary:before,
  1875. .entry-summary:after,
  1876. #sidebar-subsidiary:before,
  1877. #sidebar-subsidiary:after,
  1878. #sidebar-front-page:before,
  1879. #sidebar-front-page:after,
  1880. #sidebar-front-page .wrap:before,
  1881. #sidebar-front-page .wrap:after,
  1882. #testimonial-area:before,
  1883. #testimonial-area:after,
  1884. .site-footer:before,
  1885. .site-footer:after {
  1886. content: '';
  1887. display: table;
  1888. }
  1889.  
  1890. .clear:after,
  1891. .entry:after,
  1892. .entry-content:after,
  1893. .entry-header-summary:after,
  1894. .comment-content:after,
  1895. .top-header:after,
  1896. .top-header-buttons:after,
  1897. .site-header:after,
  1898. .site-branding:after,
  1899. #site-navigation .wrap:after,
  1900. .top-navigation:after,
  1901. .social-navigation:after,
  1902. #content .wrap:after,
  1903. .site-content:after,
  1904. .entry-summary:after,
  1905. #sidebar-subsidiary:after,
  1906. #sidebar-front-page:after,
  1907. #sidebar-front-page .wrap:after,
  1908. #testimonial-area:after,
  1909. .site-footer:after {
  1910. clear: both;
  1911. }
  1912.  
  1913.  
  1914. /*--------------------------------------------------------------
  1915. 9.0 Widgets
  1916. --------------------------------------------------------------*/
  1917.  
  1918. .widget {
  1919. padding-bottom: 2em;
  1920. }
  1921.  
  1922. .widget-title,
  1923. .widgettitle {
  1924. display: inline-block;
  1925. font-size: 22px;
  1926. }
  1927.  
  1928. /* Make sure select elements fit in widgets */
  1929. .widget select {
  1930. max-width: 100%;
  1931. }
  1932.  
  1933. /* Search widget */
  1934. body .search-submit {
  1935. margin-bottom: 30px;
  1936. margin-top: 0;
  1937. }
  1938. .search-form {
  1939. position: relative;
  1940. margin-bottom: 30px;
  1941. }
  1942. .search-field {
  1943. display: block;
  1944. padding: 20px 140px 20px 20px;
  1945. width: 100%;
  1946. height: 80px;
  1947. }
  1948. .search-submit {
  1949. display: block;
  1950. font-weight: bold;
  1951. height: 78px;
  1952. width: 120px;
  1953. text-align: center;
  1954. position: absolute;
  1955. top: 1px;
  1956. right: 1px;
  1957. margin: 0;
  1958. }
  1959.  
  1960. .widget ul > li::before {
  1961. content: '\f418';
  1962. font-size: 16px;
  1963. margin-bottom: 1px;
  1964. margin-right: 6px;
  1965. vertical-align: middle;
  1966. }
  1967. .widget.widget_categories ul > li::before {
  1968. content: '\f301';
  1969. margin-bottom: 4px;
  1970. }
  1971.  
  1972.  
  1973. /*--------------------------------------------------------------
  1974. 10.0 Content
  1975. --------------------------------------------------------------*/
  1976.  
  1977. /* === 10.1 Posts and pages === */
  1978.  
  1979. .entry-header {
  1980. text-align: center;
  1981. }
  1982.  
  1983. .entry-inner,
  1984. #comments,
  1985. .layout-1c #sidebar-primary {
  1986. padding: 5% 6%;
  1987. margin-bottom: 5%;
  1988. }
  1989. .no-content .toivo-callout-top .entry-inner,
  1990. .toivo-callout-bottom .entry-inner {
  1991. padding-left: 0;
  1992. padding-right: 0;
  1993. }
  1994. .entry {
  1995. margin-bottom: 5%;
  1996. }
  1997. .toivo-callout .entry-inner {
  1998. margin-bottom: 0;
  1999. }
  2000.  
  2001. @media screen and (max-width: 999px) {
  2002.  
  2003. #sidebar-primary {
  2004. padding: 5% 6%;
  2005. margin: 0 0 5%;
  2006. }
  2007.  
  2008. }
  2009.  
  2010. .page-content,
  2011. .entry-content,
  2012. .entry-summary {
  2013. margin-top: 1.5em;
  2014. }
  2015.  
  2016. .home .format-status .entry-inner,
  2017. .blog .format-status .entry-inner,
  2018. .home .format-aside .entry-inner,
  2019. .blog .format-aside .entry-inner {
  2020. padding-bottom: 0;
  2021. }
  2022.  
  2023. .format-audio .entry-media {
  2024. padding-top: 35px;
  2025. padding-bottom: 35px;
  2026. }
  2027. .format-audio .entry-media .jetpack-video-wrapper {
  2028. margin-top: -35px;
  2029. margin-bottom: -35px;
  2030. }
  2031. .entry-content .jetpack-video-wrapper {
  2032. margin-bottom: 1.5em;
  2033. }
  2034. .format-audio .entry-media .mejs-container {
  2035. margin-bottom: 0;
  2036. }
  2037.  
  2038. .page-links {
  2039. clear: both;
  2040. margin: 0 0 1.5em;
  2041. }
  2042. .page-links a {
  2043. display: inline-block;
  2044. margin-bottom: 4px;
  2045. padding: 0.5em 1em;
  2046. }
  2047.  
  2048. .entry-header .entry-title,
  2049. .front-page-area > .entry-title {
  2050. margin-top: 0;
  2051. margin-bottom: 5%;
  2052. text-transform: uppercase;
  2053. }
  2054. .front-page-area > .entry-title {
  2055. margin-bottom: 3%;
  2056. text-align: center;
  2057. }
  2058. .entry-meta,
  2059. .comment-meta {
  2060. margin-bottom: 1em;
  2061. font-size: 0.75em;
  2062. text-transform: uppercase;
  2063. }
  2064.  
  2065. /* Breadcrumbs. */
  2066. .breadcrumb-trail {
  2067. font-size: 0.75em;
  2068. text-transform: uppercase;
  2069. }
  2070. .breadcrumbs .trail-browse,
  2071. .breadcrumbs .trail-items,
  2072. .breadcrumbs .trail-items li {
  2073. display: inline-block;
  2074. margin: 0;
  2075. padding: 0;
  2076. }
  2077. .breadcrumbs .trail-items {
  2078. list-style: none;
  2079. }
  2080. .breadcrumbs .trail-items li {
  2081. position: relative;
  2082. padding-right: 16px;
  2083. }
  2084.  
  2085. .layout-1c .breadcrumb-trail {
  2086. text-align: center;
  2087. }
  2088.  
  2089. .trail-items li::after {
  2090. font-size: 85%;
  2091. content: "\002F";
  2092. position: absolute;
  2093. bottom: 1px;
  2094. right: 6px;
  2095. }
  2096. .trail-items li:last-of-type::after {
  2097. display: none;
  2098. }
  2099.  
  2100. .entry-header .entry-title:after,
  2101. .front-page-area > .entry-title:after {
  2102. content: "";
  2103. display: block;
  2104. width: 96px;
  2105. height: 4px;
  2106. margin: 5% auto;
  2107. }
  2108. .front-page-area > .entry-title:after {
  2109. margin-top: 3%;
  2110. margin-bottom: 3%;
  2111. }
  2112.  
  2113. .page-template-front-page .entry-header .entry-title {
  2114. border-bottom: none;
  2115. padding-bottom: 0;
  2116. margin-top: 0;
  2117. }
  2118. .page-template-default .entry-header .entry-title,
  2119. .single .entry-header .entry-title {
  2120. margin-top: 0;
  2121. }
  2122.  
  2123. /* Callout in front page. */
  2124. .toivo-callout {
  2125. font-size: 1.5em;
  2126. padding: 3%;
  2127. text-align: center;
  2128. }
  2129.  
  2130. .single-attachment .entry-title {
  2131. text-align: center;
  2132. }
  2133.  
  2134. .thumbnail {
  2135. margin: 0 0 1em 0;
  2136. }
  2137. .post-thumbnail img {
  2138. display: block;
  2139. margin-left: auto;
  2140. margin-right: auto;
  2141. }
  2142. a.post-thumbnail img:hover,
  2143. a.post-thumbnail img:focus,
  2144. a.post-thumbnail img:active {
  2145. filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
  2146. -webkit-filter: grayscale(100%);
  2147. filter: grayscale(100%);
  2148. }
  2149. .post-thumbnail {
  2150. text-align: center;
  2151. }
  2152.  
  2153. .featured-area,
  2154. .child-pages-area {
  2155. padding: 6% 5%;
  2156. }
  2157.  
  2158. /* === 10.2 Asides === */
  2159.  
  2160. .blog .format-aside .entry-title,
  2161. .archive .format-aside .entry-title {
  2162. display: none;
  2163. }
  2164.  
  2165. .format-status .avatar {
  2166. border-radius: 50%;
  2167. }
  2168. .format-status .entry-content {
  2169. margin-top: 18px;
  2170. }
  2171.  
  2172. .mejs-container {
  2173. margin-bottom: 1.5em;
  2174. }
  2175.  
  2176.  
  2177. /*--------------------------------------------------------------
  2178. 11.0 Infinite scroll
  2179. --------------------------------------------------------------*/
  2180.  
  2181. /* Globally hidden elements when Infinite Scroll is supported and in use. */
  2182. .infinite-scroll .pagination, /* Older / Newer Posts Navigation (always hidden) */
  2183. .infinite-scroll.neverending .site-footer { /* Theme Footer (when set to scrolling) */
  2184. display: none;
  2185. }
  2186. /* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before */
  2187. .infinity-end.neverending .site-footer {
  2188. display: block;
  2189. }
  2190.  
  2191.  
  2192. /*--------------------------------------------------------------
  2193. 12.0 Media
  2194. --------------------------------------------------------------*/
  2195.  
  2196. .page-content img.wp-smiley,
  2197. .entry-content img.wp-smiley,
  2198. .comment-content img.wp-smiley {
  2199. border: none;
  2200. margin-bottom: 0;
  2201. margin-top: 0;
  2202. padding: 0;
  2203. }
  2204.  
  2205. /* Make sure embeds and iframes fit their containers */
  2206. embed,
  2207. iframe,
  2208. object,
  2209. video {
  2210. max-width: 100%;
  2211. }
  2212.  
  2213. /* === 12.1 Captions === */
  2214.  
  2215. .wp-caption {
  2216. margin-bottom: 1.5em;
  2217. max-width: 100%;
  2218. }
  2219. .wp-caption img[class*="wp-image-"] {
  2220. display: block;
  2221. margin: 0 auto;
  2222. }
  2223. .wp-caption-text {
  2224. margin: 6px 0 1em 0;
  2225. text-align: center;
  2226. }
  2227.  
  2228. /* === 12.2 Galleries === */
  2229.  
  2230. .gallery {
  2231. margin-bottom: 1.5em;
  2232. }
  2233. .gallery-item {
  2234. display: inline-block;
  2235. text-align: center;
  2236. vertical-align: top;
  2237. width: 100%;
  2238. }
  2239. .gallery-columns-2 .gallery-item {
  2240. max-width: 50%;
  2241. }
  2242. .gallery-columns-3 .gallery-item {
  2243. max-width: 33.33%;
  2244. }
  2245. .gallery-columns-4 .gallery-item {
  2246. max-width: 25%;
  2247. }
  2248. .gallery-columns-5 .gallery-item {
  2249. max-width: 20%;
  2250. }
  2251. .gallery-columns-6 .gallery-item {
  2252. max-width: 16.66%;
  2253. }
  2254. .gallery-columns-7 .gallery-item {
  2255. max-width: 14.28%;
  2256. }
  2257. .gallery-columns-8 .gallery-item {
  2258. max-width: 12.5%;
  2259. }
  2260. .gallery-columns-9 .gallery-item {
  2261. max-width: 11.11%;
  2262. }
  2263. .gallery-caption {
  2264. margin-bottom: 10px;
  2265. }
  2266.  
  2267.  
  2268. /*--------------------------------------------------------------
  2269. 13.0 Layouts
  2270. --------------------------------------------------------------*/
  2271.  
  2272. /* === 13.1 Max-width === */
  2273.  
  2274. .site-header .wrap,
  2275. #sidebar-subsidiary .wrap,
  2276. #sidebar-front-page .wrap,
  2277. #testimonial-area > .testimonial-wrapper,
  2278. #colophon .site-info,
  2279. .layout-1c .breadcrumb-trail .wrap,
  2280. .entry-header,
  2281. .entry-content,
  2282. .entry-summary,
  2283. .entry-footer,
  2284. .layout-1c .entry,
  2285. .layout-1c #sidebar-primary > .wrap,
  2286. .layout-1c .pagination,
  2287. .layout-1c .post-navigation,
  2288. .layout-1c #comments,
  2289. .layout-1c #sidebar-primary,
  2290. body #infinite-handle,
  2291. .no-content .toivo-callout-top > .entry-inner,
  2292. .toivo-callout-bottom > .entry-inner {
  2293. margin-left: auto;
  2294. margin-right: auto;
  2295. max-width: 1260px;
  2296. }
  2297.  
  2298. .entry-content,
  2299. .entry-summary,
  2300. .entry-footer,
  2301. .layout-1c #sidebar-primary > .wrap {
  2302. max-width: 700px;
  2303. }
  2304.  
  2305. /* === 13.2 Paddings. === */
  2306.  
  2307. .site-header > .wrap,
  2308. #colophon #menu-social,
  2309. #colophon .site-info {
  2310. padding: 0 4%;
  2311. }
  2312. #colophon .site-info {
  2313. padding-top: 2em;
  2314. padding-bottom: 2em;
  2315. text-align: center;
  2316. }
  2317.  
  2318. #content > .wrap {
  2319. padding-bottom: 5%;
  2320. }
  2321. .home #content > .wrap {
  2322. padding-top: 4%;
  2323. }
  2324. .breadcrumb-trail {
  2325. padding: 2.5% 5%;
  2326. }
  2327.  
  2328. @media screen and (min-width: 600px) {
  2329.  
  2330. .breadcrumb-trail {
  2331. padding-top: 1.75%;
  2332. padding-bottom: 1.75%;
  2333. }
  2334.  
  2335. }
  2336.  
  2337. @media screen and (min-width: 1000px) {
  2338.  
  2339. .breadcrumb-trail {
  2340. padding-top: 1.25%;
  2341. padding-bottom: 1.25%;
  2342. }
  2343. .layout-2c-l .breadcrumb-trail,
  2344. .layout-2c-r .breadcrumb-trail {
  2345. padding-left: 0;
  2346. padding-right: 0;
  2347. }
  2348.  
  2349. }
  2350.  
  2351. .page-template-front-page #content > .wrap,
  2352. .page-template-child-pages #content > .wrap,
  2353. .page-template-blog-page #content > .wrap {
  2354. padding-bottom: 0;
  2355. }
  2356. .page-template-front-page.no-content #content > .wrap {
  2357. padding-top: 0;
  2358. }
  2359. .page-template-front-page .featured-area .featured-area-grid:last-child .entry,
  2360. .page-template-child-pages .child-pages-area .child-pages-grid:last-child .entry,
  2361. .page-template-blog-page .child-pages-area .child-pages-grid:last-child .entry {
  2362. margin-bottom: 0;
  2363. }
  2364.  
  2365. #page {
  2366. position: relative;
  2367. }
  2368.  
  2369. /* === 13.3 Media queries === */
  2370.  
  2371. @media screen and (min-width: 1000px) {
  2372.  
  2373. .layout-2c-l .site-content > .wrap,
  2374. .layout-2c-r .site-content > .wrap {
  2375. padding-left: 4%;
  2376. padding-right: 4%;
  2377. }
  2378.  
  2379. /* Two column layout. */
  2380.  
  2381. .layout-2c-l .content-area,
  2382. .layout-default .content-area,
  2383. .layout-2c-r .content-area {
  2384. float: left;
  2385. padding-right: 3%;
  2386. width: 66.6666666666666666%;
  2387. }
  2388.  
  2389. .layout-2c-l #sidebar-primary,
  2390. .layout-2c-r #sidebar-primary {
  2391. float: left;
  2392. padding-left: 3%;
  2393. width: 33.3333333333333333%;
  2394. }
  2395.  
  2396. .layout-2c-r .content-area {
  2397. float: right;
  2398. padding-left: 3%;
  2399. padding-right: 0;
  2400. }
  2401.  
  2402. .layout-2c-r #sidebar-primary {
  2403. float: right;
  2404. padding-left: 0;
  2405. padding-right: 3%;
  2406. }
  2407.  
  2408. }
  2409.  
  2410. /* === 13.4 Sidebar layouts === */
  2411.  
  2412. #sidebar-subsidiary,
  2413. #sidebar-front-page,
  2414. #testimonial-area {
  2415. padding: 6% 5%;
  2416. }
  2417. .post-type-archive-jetpack-testimonial #testimonial-area {
  2418. padding-top: 0;
  2419. padding-bottom: 5%;
  2420. }
  2421. .post-type-archive-jetpack-testimonial .testimonial-area > .entry-content {
  2422. text-align: center;
  2423. }
  2424.  
  2425. #testimonial-area .entry-testimonial .entry-wrapper,
  2426. .format-status .entry-content > .entry-wrapper,
  2427. .format-status .entry-footer,
  2428. .jetpack-testimonial .entry-content > .entry-wrapper {
  2429. padding-left: 35px;
  2430. padding-top: 4px;
  2431. }
  2432.  
  2433. /* Minimum width of 800 pixels. */
  2434. @media screen and (min-width: 800px) {
  2435.  
  2436. .comment-content .comment-content-wrapper {
  2437. padding-left: 35px;
  2438. padding-top: 4px;
  2439. }
  2440.  
  2441. /* Grids like sidebars area. */
  2442.  
  2443. #sidebar-subsidiary .wrap .wrap-inside,
  2444. #sidebar-front-page .wrap .wrap-inside,
  2445. #testimonial-area .testimonial-wrapper {
  2446. display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  2447. display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  2448. display: -ms-flexbox; /* TWEENER - IE 10 */
  2449. display: -webkit-flex; /* NEW - Chrome */
  2450. display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  2451. -webkit-flex-wrap: wrap;
  2452. -ms-flex-wrap: wrap;
  2453. flex-wrap: wrap;
  2454. }
  2455.  
  2456. #sidebar-subsidiary .widget,
  2457. #sidebar-front-page .widget,
  2458. #testimonial-area .entry-testimonial {
  2459. -webkit-box-flex: none;
  2460. -moz-box-flex: none;
  2461. -webkit-flex: none;
  2462. -ms-flex: none;
  2463. flex: none;
  2464. width: 50%;
  2465. }
  2466.  
  2467. .ie9 #sidebar-subsidiary .widget,
  2468. .ie9 #sidebar-front-page .widget,
  2469. .ie9 #testimonial-area .entry-testimonial {
  2470. float: left;
  2471. }
  2472.  
  2473. #sidebar-subsidiary .widget:nth-child(n+3),
  2474. #sidebar-front-page .widget:nth-child(n+3),
  2475. #testimonial-area .entry-testimonial:nth-child(n+3) {
  2476. padding-top: 2em;
  2477. }
  2478.  
  2479. #sidebar-subsidiary .widget:nth-child(2n+1),
  2480. #sidebar-front-page .widget:nth-child(2n+1),
  2481. #testimonial-area .entry-testimonial:nth-child(2n+1) {
  2482. padding-right: 3%;
  2483. }
  2484.  
  2485. #sidebar-subsidiary .widget:nth-child(2n),
  2486. #sidebar-front-page .widget:nth-child(2n),
  2487. #testimonial-area .entry-testimonial:nth-child(2n) {
  2488. padding-left: 3%;
  2489. }
  2490.  
  2491. .ie9 #sidebar-subsidiary .widget:nth-child(2n+3),
  2492. .ie9 #sidebar-front-page .widget:nth-child(2n+3),
  2493. .ie9 #testimonial-area .entry-testimonial:nth-child(2n+3) {
  2494. clear: both;
  2495. }
  2496.  
  2497. }
  2498.  
  2499.  
  2500. /*--------------------------------------------------------------
  2501. 14.0 Comments
  2502. --------------------------------------------------------------*/
  2503.  
  2504. .comment-form input[type="submit"] {
  2505. font-size: 0.85em;
  2506. font-weight: 700;
  2507. letter-spacing: 2px;
  2508. text-align: center;
  2509. text-transform: uppercase;
  2510. width: 100%;
  2511. }
  2512.  
  2513. .comment-content a {
  2514. word-wrap: break-word;
  2515. }
  2516.  
  2517. #respond {
  2518. padding-top: 1.5em;
  2519. margin-top: 1.5em;
  2520. }
  2521.  
  2522. ol.comment-list,
  2523. ol.comment-list ol.children {
  2524. list-style: none;
  2525. margin: 0;
  2526. padding: 0;
  2527. }
  2528.  
  2529. .comment-list > li {
  2530. margin-bottom: 6%;
  2531. padding-bottom: 6%;
  2532. }
  2533. .comment-list > li:last-child{
  2534. padding-bottom: 0;
  2535. }
  2536.  
  2537. ol.comment-list ol.children ul {
  2538. margin-bottom: 0;
  2539. }
  2540. ol.comment-list ol.children {
  2541. margin-left: 1%;
  2542. }
  2543.  
  2544. /* === Individual comments */
  2545.  
  2546. li.comment .comment-wrap,
  2547. li.ping .comment-wrap {
  2548. padding-bottom: 1em;
  2549. padding-top: 1em;
  2550. }
  2551.  
  2552. .comment-list li.bypostauthor {
  2553. padding: 3%;
  2554. }
  2555.  
  2556. ol.comment-list ul,
  2557. ol.comment-list ol,
  2558. ol.comment-list dl {
  2559. margin-bottom: 1em;
  2560. }
  2561. ol.comment-list ul ul,
  2562. ol.comment-list ol ol,
  2563. ol.comment-list dl dl {
  2564. margin-bottom: 0;
  2565. }
  2566.  
  2567. /* Avatars and images. */
  2568.  
  2569. .site-logo,
  2570. .avatar,
  2571. .entry-testimonial img,
  2572. img.attachment-toivo-testimonial {
  2573. border-radius: 50%;
  2574. }
  2575.  
  2576. .site-logo,
  2577. .site-header .avatar {
  2578. margin-top: 1em;
  2579. max-width: 150px;
  2580. max-height: 150px;
  2581. position: relative;
  2582. }
  2583.  
  2584. .format-status .avatar,
  2585. .entry-testimonial img,
  2586. img.attachment-toivo-testimonial {
  2587. float: left;
  2588. margin: 0 1em .2em 0;
  2589. max-width: 70px;
  2590. -webkit-shape-outside: circle();
  2591. shape-outside: circle();
  2592. }
  2593.  
  2594. @media screen and (min-width: 360px) {
  2595.  
  2596. .site-logo,
  2597. .site-header .avatar {
  2598. margin-top: -75px;
  2599. }
  2600.  
  2601. }
  2602.  
  2603. .comment-list .avatar {
  2604. float: left;
  2605. margin: 0 1em 0.2em 0;
  2606. width: 70px;
  2607. height: 70px;
  2608. -webkit-shape-outside: circle();
  2609. shape-outside: circle();
  2610. }
  2611.  
  2612. /* Meta. */
  2613. .comment-meta abbr {
  2614. border-bottom: none;
  2615. }
  2616.  
  2617. /* Reply link. */
  2618. #cancel-comment-reply-link {
  2619. font-weight: bold;
  2620. }
  2621.  
  2622. .comment-content {
  2623. clear: both;
  2624. display: block;
  2625. }
  2626.  
  2627. .parent .comment-reply-link {
  2628. margin-bottom: 20px;
  2629. }
  2630.  
  2631.  
  2632. @media screen and (min-width: 608px) {
  2633.  
  2634. ol.comment-list ol.children {
  2635. margin-left: 2%;
  2636. }
  2637.  
  2638. .has-avatar.comment .comment-author {
  2639. margin-top: 16px;
  2640. }
  2641.  
  2642. }
  2643.  
  2644. @media screen and (min-width: 1056px) {
  2645.  
  2646. ol.comment-list ol.children {
  2647. margin-left: 3%;
  2648. }
  2649.  
  2650. }
  2651.  
  2652.  
  2653. /*--------------------------------------------------------------
  2654. 15.0 Plugins
  2655. --------------------------------------------------------------*/
  2656.  
  2657. /* === 15.1 Jetpack CSS === */
  2658.  
  2659. body #infinite-handle {
  2660. text-align: center;
  2661. }
  2662.  
  2663. body #infinite-handle span {
  2664. cursor: pointer; /* Improves usability and consistency of cursor style between image-type 'input' and others */
  2665. display: inline-block;
  2666. line-height: 1;
  2667. transition: all 0.25s ease-in-out;
  2668. }
  2669.  
  2670. .layout-2c-l #infinite-handle span,
  2671. .layout-2c-r #infinite-handle span,
  2672. .layout-2c-l .infinite-loader,
  2673. .layout-2c-r .infinite-loader {
  2674. margin-bottom: 5%;
  2675. }
  2676.  
  2677. @media screen and (min-width: 1000px) {
  2678.  
  2679. .layout-2c-l #infinite-handle span,
  2680. .layout-2c-r #infinite-handle span,
  2681. .layout-2c-l .infinite-loader,
  2682. .layout-2c-r .infinite-loader {
  2683. margin-bottom: 0;
  2684. }
  2685.  
  2686. .layout-2c-l #infinite-handle,
  2687. .layout-2c-r #infinite-handle {
  2688. padding-top: 2%;
  2689. }
  2690.  
  2691. }
  2692.  
  2693. body .infinite-loader {
  2694. display: block;
  2695. margin-left: auto;
  2696. margin-right: auto;
  2697. text-align: center;
  2698. width: 100%;
  2699. }
  2700.  
  2701. body .infinite-loader .spinner {
  2702. display: block;
  2703. left: 50% !important;
  2704. }
  2705.  
  2706. body div.sharedaddy h3.sd-title,
  2707. body div#jp-relatedposts h3.jp-relatedposts-headline,
  2708. body div#jp-relatedposts h3.jp-relatedposts-headline em {
  2709. font-size: 20px;
  2710. font-weight: normal;
  2711. }
  2712.  
  2713. body .contact-form input[type=email],
  2714. body .contact-form input[type=text],
  2715. body #subscribe-email input {
  2716. width: 100%;
  2717. max-width: 100%;
  2718. }
  2719. body #subscribe-email input {
  2720. padding: 20px;
  2721. padding: 1.25rem;
  2722. }
  2723.  
  2724. body .contact-form textarea {
  2725. width: 100%;
  2726. }
  2727.  
  2728.  
  2729. /*--------------------------------------------------------------
  2730. 16.0 Right to left styles
  2731. --------------------------------------------------------------*/
  2732.  
  2733. /* rtl:ignore */
  2734. body.rtl {
  2735. direction: rtl;
  2736. unicode-bidi: embed;
  2737. }
  2738.  
  2739. /* rtl:ignore */
  2740. .rtl .format-status .avatar,
  2741. .rtl .entry-testimonial img,
  2742. .rtl img.attachment-toivo-testimonial {
  2743. -webkit-shape-outside: circle( 70px );
  2744. shape-outside: circle( 70px);
  2745. }
  2746.  
  2747. /* rtl:ignore */
  2748. .rtl .comment-list .avatar {
  2749. -webkit-shape-outside: circle( 70px );
  2750. shape-outside: circle( 70px);
  2751. }
  2752.  
  2753. .rtl ul,
  2754. .rtl ol {
  2755. margin: 0 1.5em 1.5em 0;
  2756. }
  2757.  
  2758. .rtl li > ul,
  2759. .rtl li > ol {
  2760. padding-right: 1em;
  2761. margin-right: 1em;
  2762. }
  2763.  
  2764. .rtl .sidebar ul ul,
  2765. .rtl .error-404.not-found ul ul {
  2766. margin-right: 1em;
  2767. }
  2768.  
  2769. .rtl caption,
  2770. .rtl th,
  2771. .rtl td {
  2772. text-align: right;
  2773. }
  2774.  
  2775. .rtl #wp-calendar #prev {
  2776. text-align: right;
  2777. }
  2778. .rtl #wp-calendar #next {
  2779. text-align: left;
  2780. }
  2781.  
  2782. .rtl .entry-date a,
  2783. .rtl .byline .entry-author a,
  2784. .rtl .entry-permalink a,
  2785. .rtl .comments-link a,
  2786. .rtl .comment-published,
  2787. .rtl .comment-reply-link,
  2788. .rtl .comment-edit-link,
  2789. .rtl .comment-author {
  2790. margin-right: 0;
  2791. margin-left: 8px;
  2792. }
  2793.  
  2794. .rtl a[href^="mailto:"]::before,
  2795. .rtl a[href^="tel:"]::before,
  2796. .rtl .entry-date a::before,
  2797. .rtl .byline .entry-author a::before,
  2798. .rtl .comment-published::before,
  2799. .rtl .comment-author::before,
  2800. .rtl .comment-edit-link::before,
  2801. .rtl .comments-link a::before,
  2802. .rtl .comment-reply-link::before,
  2803. .rtl .entry-permalink a::before,
  2804. .rtl .entry-terms::before {
  2805. padding-right: 0;
  2806. padding-left: 4px;
  2807. }
  2808.  
  2809. .rtl .menu ul,
  2810. .rtl .menu li > ul,
  2811. .rtl .menu li > ol {
  2812. margin: 0;
  2813. }
  2814. .rtl .menu li > ul,
  2815. .rtl .menu li > ol {
  2816. padding: 0;
  2817. }
  2818.  
  2819. @media screen and (max-width: 999px) {
  2820.  
  2821. .rtl #menu-primary ul ul li a {
  2822. padding-right: 9%;
  2823. padding-left: 0;
  2824. }
  2825. .rtl #menu-primary ul ul ul li a {
  2826. padding-right: 11%;
  2827. padding-left: 0;
  2828. }
  2829. .rtl #menu-primary ul ul ul ul li a {
  2830. padding-right: 13%;
  2831. padding-left: 0;
  2832. }
  2833.  
  2834. .rtl button#nav-toggle:before {
  2835. margin: 0 0 0 6px;
  2836. }
  2837.  
  2838. }
  2839.  
  2840. @media screen and (min-width: 1000px) {
  2841.  
  2842. .rtl #menu-primary ul ul {
  2843. float: right;
  2844. right: -999em;
  2845. left: auto;
  2846. }
  2847.  
  2848. .rtl #menu-primary ul ul ul {
  2849. right: -999em;
  2850. left: auto;
  2851. }
  2852.  
  2853. .rtl #menu-primary ul li:hover > ul,
  2854. .rtl #menu-primary ul li.focus > ul {
  2855. right: 50%;
  2856. left: auto;
  2857. margin-right: -100px;
  2858. margin-left: 0;
  2859. }
  2860.  
  2861. .rtl #menu-primary ul ul li:hover > ul,
  2862. .rtl #menu-primary ul ul li.focus > ul {
  2863. right: 100%;
  2864. margin-right: 0;
  2865. }
  2866.  
  2867. .rtl #menu-primary .menu-item-has-children > a,
  2868. .rtl #menu-primary .page_item_has_children > a {
  2869. padding-left: 26px;
  2870. }
  2871.  
  2872. .rtl #menu-primary .menu-item-has-children > a:after,
  2873. .rtl #menu-primary .page_item_has_children > a:after {
  2874. left: 12px;
  2875. right: auto;
  2876. }
  2877.  
  2878. .rtl #menu-primary li .menu-item-has-children > a,
  2879. .rtl #menu-primary li .page_item_has_children > a {
  2880. padding-left: 20px;
  2881. }
  2882.  
  2883. .rtl #menu-primary .menu-item-has-children li.menu-item-has-children > a:after,
  2884. .rtl #menu-primary .menu-item-has-children li.page_item_has_children > a:after,
  2885. .rtl #menu-primary .page_item_has_children li.menu-item-has-children > a:after,
  2886. .rtl #menu-primary .page_item_has_children li.page_item_has_children > a:after {
  2887. content: "\f503";
  2888. left: 8px;
  2889. right: auto;
  2890. }
  2891.  
  2892. .rtl #menu-primary ul#menu-primary-items > li.menu-item-has-children > ul > li:first-child:after,
  2893. .rtl #menu-primary ul#menu-primary-items > li.menu-item-has-children > ul > li:first-child:before {
  2894. right: 50%;
  2895. left: auto;
  2896. }
  2897.  
  2898. .rtl #menu-primary ul#menu-primary-items > li.menu-item-has-children > ul > li:first-child:after {
  2899. margin-right: -10px;
  2900. margin-left: 0;
  2901. }
  2902. .rtl #menu-primary ul#menu-primary-items > li.menu-item-has-children > ul > li:first-child:before {
  2903. margin-right: -11px;
  2904. margin-left: 0;
  2905. }
  2906.  
  2907. .rtl .main-navigation .menu-item-description.top-depth {
  2908. right: -999em;
  2909. left: auto;
  2910. }
  2911.  
  2912. /* CSS arrow for top depth description. */
  2913. .rtl .main-navigation .menu-item-description.top-depth:after,
  2914. .rtl .main-navigation .menu-item-description.top-depth:before {
  2915. right: 50%;
  2916. left: auto;
  2917. }
  2918.  
  2919. .rtl .main-navigation .menu-item-description.top-depth:after {
  2920. margin-right: -10px;
  2921. margin-left: 0;
  2922. }
  2923. .rtl .main-navigation .menu-item-description.top-depth:before {
  2924. margin-right: -11px;
  2925. margin-left: 0;
  2926. }
  2927.  
  2928. .rtl #menu-primary ul li:hover .menu-item-description.top-depth,
  2929. .rtl #menu-primary ul li.focus .menu-item-description.top-depth {
  2930. right: 50%;
  2931. left: auto;
  2932. margin-right: -100px;
  2933. margin-left: 0;
  2934. }
  2935.  
  2936. }
  2937.  
  2938. @media screen and (max-width: 1199px) {
  2939.  
  2940. .rtl button#top-nav-toggle {
  2941. float: right;
  2942. }
  2943. .rtl button#social-nav-toggle {
  2944. float: left;
  2945. }
  2946.  
  2947. }
  2948.  
  2949. @media screen and (min-width: 1200px) {
  2950.  
  2951. .rtl .top-navigation {
  2952. float: right;
  2953. padding-right: 4%;
  2954. padding-left: 0;
  2955. }
  2956. .rtl .social-navigation {
  2957. float: left;
  2958. padding-left: 4%;
  2959. padding-right: 0;
  2960. text-align: left;
  2961. }
  2962. .rtl .top-navigation ul {
  2963. margin: 0;
  2964. }
  2965.  
  2966. }
  2967.  
  2968. .rtl .pagination .prev {
  2969. right: 0;
  2970. left: auto;
  2971. }
  2972.  
  2973. .rtl .pagination .prev::before {
  2974. content: '\f429';
  2975. right: -2px;
  2976. left: auto;
  2977. }
  2978. .rtl .pagination .next::before {
  2979. content: '\f430';
  2980. right: 3px;
  2981. left: auto;
  2982. }
  2983. .rtl .pagination .next {
  2984. left: 0;
  2985. right: auto;
  2986. }
  2987.  
  2988. .rtl .post-navigation .nav-next {
  2989. text-align: left;
  2990. }
  2991.  
  2992. .rtl .screen-reader-text:hover,
  2993. .rtl .screen-reader-text:active,
  2994. .rtl .screen-reader-text:focus {
  2995. right: 5px;
  2996. left: auto;
  2997. }
  2998.  
  2999. .rtl .alignleft {
  3000. float: right;
  3001. margin: 0 0 1.5em 1.5em;
  3002. }
  3003. .rtl .alignright {
  3004. float: left;
  3005. margin: 0 1.5em 1.5em 0;
  3006. }
  3007.  
  3008. .rtl .search-field {
  3009. padding: 20px 20px 20px 140px;
  3010. }
  3011.  
  3012. .rtl .widget ul > li::before {
  3013. margin-left: 6px;
  3014. margin-right: 0;
  3015. }
  3016.  
  3017. .rtl .breadcrumbs .trail-items li {
  3018. padding-left: 16px;
  3019. padding-right: 0;
  3020. }
  3021. .rtl .trail-items li::after {
  3022. content: "\005C";
  3023. left: 6px;
  3024. right: auto;
  3025. }
  3026.  
  3027. .rtl #testimonial-area .entry-testimonial .entry-wrapper,
  3028. .rtl .format-status .entry-content > .entry-wrapper,
  3029. .rtl .format-status .entry-footer,
  3030. .rtl .jetpack-testimonial .entry-content > .entry-wrapper {
  3031. padding-right: 35px;
  3032. padding-left: 0;
  3033. }
  3034.  
  3035. @media screen and (min-width: 800px) {
  3036.  
  3037. .rtl .comment-content .comment-content-wrapper {
  3038. padding-right: 35px;
  3039. padding-left: 0;
  3040. }
  3041.  
  3042. .ie9 .rtl #sidebar-subsidiary .widget,
  3043. .ie9 .rtl #sidebar-front-page .widget,
  3044. .ie9 .rtl #testimonial-area .entry-testimonial {
  3045. float: right;
  3046. }
  3047.  
  3048. .rtl #sidebar-subsidiary .widget:nth-child(2n+1),
  3049. .rtl #sidebar-front-page .widget:nth-child(2n+1),
  3050. .rtl #testimonial-area .entry-testimonial:nth-child(2n+1) {
  3051. padding-left: 3%;
  3052. padding-right: 0;
  3053. }
  3054.  
  3055. .rtl #sidebar-subsidiary .widget:nth-child(2n),
  3056. .rtl #sidebar-front-page .widget:nth-child(2n),
  3057. .rtl #testimonial-area .entry-testimonial:nth-child(2n) {
  3058. padding-right: 3%;
  3059. padding-left: 0;
  3060. }
  3061.  
  3062. }
  3063.  
  3064. .rtl ol.comment-list ol.children {
  3065. margin-right: 1%;
  3066. margin-left: 0;
  3067. }
  3068.  
  3069. .rtl .format-status .avatar,
  3070. .rtl .entry-testimonial img,
  3071. .rtl img.attachment-toivo-testimonial {
  3072. float: right;
  3073. margin: 0 0 .2em 1em;
  3074. }
  3075.  
  3076. /* rtl:ignore */
  3077. .rtl .format-status .avatar,
  3078. .rtl .entry-testimonial img,
  3079. .rtl img.attachment-toivo-testimonial {
  3080. -webkit-shape-outside: circle( 70px );
  3081. shape-outside: circle( 70px);
  3082. }
  3083.  
  3084. .rtl .comment-list .avatar {
  3085. float: right;
  3086. margin: 0 0 0.2em 1em;
  3087. }
  3088.  
  3089. /* rtl:ignore */
  3090. .rtl .comment-list .avatar {
  3091. -webkit-shape-outside: circle( 70px );
  3092. shape-outside: circle( 70px);
  3093. }
  3094.  
  3095. @media screen and (min-width: 608px) {
  3096.  
  3097. .rtl ol.comment-list ol.children {
  3098. margin-right: 2%;
  3099. margin-left: 0;
  3100. }
  3101.  
  3102. }
  3103.  
  3104. @media screen and (min-width: 1056px) {
  3105.  
  3106. .rtl ol.comment-list ol.children {
  3107. margin-right: 3%;
  3108. margin-left: 0;
  3109. }
  3110.  
  3111. }
  3112.  
  3113. .rtl blockquote {
  3114. border-right-width: 4px;
  3115. border-right-style: solid;
  3116. border-left: none;
  3117. }
  3118.  
  3119. @media screen and (min-width: 800px) {
  3120.  
  3121. .rtl #sidebar-subsidiary .widget:nth-child(2n+1),
  3122. .rtl #sidebar-front-page .widget:nth-child(2n+1),
  3123. .rtl #sidebar-page-template .widget:nth-child(2n+1),
  3124. .rtl #testimonial-area .entry-testimonial:nth-child(2n+1) {
  3125. border-left-width: 1px;
  3126. border-left-style: dashed;
  3127. border-right: none;
  3128. }
  3129.  
  3130. }
  3131.  
  3132.  
  3133. /*--------------------------------------------------------------
  3134. 17.0 Child theme friendly zone
  3135. --------------------------------------------------------------*/
  3136.  
  3137. /*
  3138. * At this point there are fonts, colors, background and borders used in a theme.
  3139. * You can overwrite them in your child theme 'style.css' if you need custom design.
  3140. */
  3141.  
  3142. /* === 16.1 Font Family === */
  3143.  
  3144. body,
  3145. button,
  3146. input,
  3147. select,
  3148. textarea {
  3149. font-family: 'Lato', 'Helvetica Neue', Helvetica, sans-serif;
  3150. }
  3151.  
  3152. .site-title,
  3153. a.more-link,
  3154. a.toivo-button,
  3155. input[type="button"],
  3156. input[type="reset"],
  3157. input[type="submit"],
  3158. body #infinite-handle span button,
  3159. .comment-form input[type="submit"] {
  3160. font-family: 'Raleway', sans-serif;
  3161. }
  3162.  
  3163. pre {
  3164. font-family: "Courier 10 Pitch", Courier, monospace;
  3165. }
  3166.  
  3167. code,
  3168. kbd,
  3169. tt,
  3170. var {
  3171. font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
  3172. }
  3173.  
  3174. /* === 16.2 Colors === */
  3175.  
  3176. /* Here is a list of used colors to help you out.
  3177. *
  3178. * Body color: #444
  3179. * Dark color for text and hover: #303030
  3180. * Lighter color for text: #555 and #777
  3181. *
  3182. * Link color: #9b1c51
  3183. * Lighter link color: #3b5667
  3184. * Link hover color: #525e66
  3185. * Color for text with above backgrounds: #fff
  3186. *
  3187. * Backgroud colors: #aebec8, #f7f6f1 and #f7f7f7
  3188. * Borders: #ddd and #bbb
  3189. */
  3190.  
  3191. body,
  3192. button,
  3193. input,
  3194. select,
  3195. textarea {
  3196. color: #444;
  3197. }
  3198.  
  3199. .wp-caption-text,
  3200. input[type="number"],
  3201. input[type="date"],
  3202. input[type="datetime"],
  3203. input[type="datetime-local"],
  3204. input[type="email"],
  3205. input[type="month"],
  3206. input[type="password"],
  3207. input[type="reset"],
  3208. input[type="search"],
  3209. input[type="tel"],
  3210. input[type="text"],
  3211. input[type="time"],
  3212. input[type="url"],
  3213. input[type="week"],
  3214. textarea,
  3215. input {
  3216. color: #555;
  3217. }
  3218.  
  3219. ::-webkit-input-placeholder {
  3220. color: #555;
  3221. }
  3222. :-moz-placeholder {
  3223. color: #555;
  3224. opacity: 1;
  3225. }
  3226. ::-moz-placeholder {
  3227. color: #555;
  3228. opacity: 1;
  3229. }
  3230. :-ms-input-placeholder {
  3231. color: #555;
  3232. }
  3233.  
  3234. a,
  3235. a:visited,
  3236. #top-header {
  3237. color: #9b1c51;
  3238. }
  3239. a:hover,
  3240. a:focus,
  3241. a:active,
  3242. button#top-nav-toggle,
  3243. button#social-nav-toggle {
  3244. color: #525e66;
  3245. }
  3246.  
  3247. .entry-header,
  3248. .entry-header a,
  3249. .entry-footer a,
  3250. .post-navigation .meta-nav,
  3251. .comment-meta,
  3252. .comment-meta a,
  3253. .comment-meta a:visited,
  3254. .comment-meta a:active,
  3255. .comment-navigation .nav-previous:not(:empty) + .nav-next:not(:empty):before,
  3256. .breadcrumb-trail .trail-end,
  3257. .trail-items li::after {
  3258. color: #777;
  3259. }
  3260.  
  3261. h1,
  3262. h2,
  3263. h3,
  3264. h4,
  3265. h5,
  3266. h6,
  3267. .entry-title,
  3268. .entry-title a,
  3269. a.more-link,
  3270. .sidebar .genericon,
  3271. .sidebar .genericon::before,
  3272. .screen-reader-text:hover,
  3273. .screen-reader-text:active,
  3274. .screen-reader-text:focus,
  3275. body button#top-nav-toggle:hover,
  3276. body button#top-nav-toggle:active,
  3277. body button#top-nav-toggle:focus,
  3278. body button#social-nav-toggle:hover,
  3279. body button#social-nav-toggle:active,
  3280. body button#social-nav-toggle:focus {
  3281. color: #303030;
  3282. }
  3283.  
  3284. .breadcrumb-trail a,
  3285. .breadcrumb-trail a:visited,
  3286. .widget a,
  3287. .widget a:visited {
  3288. color: #3b5667;
  3289. }
  3290. .breadcrumb-trail a:hover,
  3291. .breadcrumb-trail a:focus,
  3292. .breadcrumb-trail a:active,
  3293. .widget a:hover,
  3294. .widget a:focus,
  3295. .widget a:active,
  3296. #sidebar-subsidiary,
  3297. #sidebar-subsidiary .widget-title,
  3298. button,
  3299. input[type="button"],
  3300. input[type="reset"],
  3301. input[type="submit"],
  3302. .entry a.portfolio-item-link,
  3303. body #infinite-handle span,
  3304. .site-info a,
  3305. .site-info a:visited,
  3306. .site-info a:hover,
  3307. .site-info a:focus,
  3308. .site-info a:active {
  3309. color: #303030;
  3310. }
  3311.  
  3312. .toivo-callout,
  3313. .toivo-callout .entry-title,
  3314. a.toivo-button,
  3315. .pagination .prev,
  3316. .pagination .next,
  3317. button#top-nav-toggle:before,
  3318. button#social-nav-toggle:before {
  3319. color: #fff;
  3320. }
  3321.  
  3322. body .search-submit {
  3323. color: #303030;
  3324. }
  3325. body .search-submit:hover,
  3326. body .search-submit:focus,
  3327. body .search-submit:active {
  3328. color: #fff;
  3329. border-color: #303030;
  3330. }
  3331.  
  3332. /* == Menu colors and backgrounds == */
  3333.  
  3334. #menu-primary li:hover > a,
  3335. #menu-primary li.focus > a,
  3336. button#nav-toggle:hover,
  3337. button#nav-toggle:focus,
  3338. button#nav-toggle.focus,
  3339. #menu-primary li.current-menu-item,
  3340. #menu-primary li.current-menu-item > a,
  3341. #menu-primary ul ul a:hover,
  3342. #menu-primary ul ul li.focus > a {
  3343. background-color: #f7f6f1;
  3344. color: #303030;
  3345. }
  3346.  
  3347. #menu-primary .menu-item-description {
  3348. color: #777;
  3349. }
  3350.  
  3351. @media screen and (max-width: 999px) {
  3352.  
  3353. .main-navigation li a,
  3354. button#nav-toggle {
  3355. background: #fff;
  3356. border-bottom: 1px solid #ddd;
  3357. color: #9b1c51;
  3358. }
  3359. button#nav-toggle.active {
  3360. border-bottom: 1px solid #ddd;
  3361. }
  3362.  
  3363. }
  3364.  
  3365. @media screen and (min-width: 1000px) {
  3366.  
  3367. #menu-primary a {
  3368. color: #9b1c51;
  3369. }
  3370.  
  3371. #menu-primary ul ul {
  3372. background-color: #fff;
  3373. border: 1px solid #ddd;
  3374. }
  3375.  
  3376. #menu-primary ul ul a {
  3377. border-bottom: 1px solid #ddd;
  3378. }
  3379.  
  3380. #menu-primary .menu-item-description.top-depth {
  3381. background: rgba(0,0,0,0.7);
  3382. color: #fff;
  3383. }
  3384. .main-navigation .menu-item-description.top-depth:after {
  3385. border-top-color: rgba(0, 0, 0, 0.7);
  3386. }
  3387.  
  3388. }
  3389.  
  3390. /* Top and social menu. */
  3391.  
  3392. .top-navigation li:hover a,
  3393. .top-navigation li:focus a,
  3394. .top-navigation li:active a,
  3395. .top-navigation li.focus a,
  3396. .top-navigation li.current-menu-item a {
  3397. color: #303030;
  3398. }
  3399. #menu-social li a::before {
  3400. color: #bbb;
  3401. }
  3402.  
  3403. @media screen and (max-width: 1199px) {
  3404.  
  3405. .top-navigation li a,
  3406. .social-navigation {
  3407. border-bottom: 1px solid #ddd;
  3408. }
  3409. .top-navigation li:first-child a,
  3410. .social-navigation.opened {
  3411. border-top: 1px solid #ddd;
  3412. }
  3413. .top-navigation.opened + .social-navigation.opened {
  3414. border-top: none;
  3415. }
  3416.  
  3417. }
  3418.  
  3419. @media screen and (min-width: 1200px) {
  3420.  
  3421. .top-navigation li:hover a,
  3422. .top-navigation li:focus a,
  3423. .top-navigation li:active a,
  3424. .top-navigation li.focus a,
  3425. .top-navigation li.current-menu-item a {
  3426. border-bottom: 6px solid #bbb;
  3427. }
  3428.  
  3429. }
  3430.  
  3431. /* === 16.3 Backgrounds === */
  3432.  
  3433. /* Set default background color just in case. */
  3434. body {
  3435. background: #fafafa;
  3436. }
  3437.  
  3438. .site-header,
  3439. body .mejs-container,
  3440. body .mejs-embed,
  3441. body .mejs-embed body,
  3442. body .mejs-container .mejs-controls {
  3443. background-color: rgba(59,86,103,0.90);
  3444. }
  3445. .custom-header-image .site-header {
  3446. background-color: transparent;
  3447. }
  3448. .custom-header-image .site-header > .wrap::before {
  3449. background-color: rgba(59,86,103,0.70);
  3450. }
  3451.  
  3452. pre {
  3453. background-color: #f7f7f7;
  3454. background-image: -webkit-gradient(linear,0 0,0 100%,color-stop(.5,rgba(255,255,255,.5)),color-stop(.5,transparent),to(transparent));
  3455. background-image: -webkit-linear-gradient(rgba(255,255,255,.5) 50%,transparent 50%,transparent);
  3456. background-image: -moz-linear-gradient(rgba(255,255,255,.5) 50%,transparent 50%,transparent);
  3457. background-image: -o-linear-gradient(rgba(255,255,255,.5) 50%,transparent 50%,transparent);
  3458. background-image: linear-gradient(rgba(255,255,255,.5) 50%,transparent 50%,transparent);
  3459. }
  3460.  
  3461. mark,
  3462. ins {
  3463. background: #fff9c0;
  3464. }
  3465.  
  3466. button,
  3467. input[type="button"],
  3468. input[type="reset"],
  3469. input[type="submit"],
  3470. .entry a.portfolio-item-link,
  3471. body #infinite-handle span {
  3472. background: transparent;
  3473. }
  3474.  
  3475. button#top-nav-toggle,
  3476. button#social-nav-toggle,
  3477. .pagination .prev,
  3478. .pagination .next,
  3479. .entry-header .entry-title:after,
  3480. .front-page-area > .entry-title:after {
  3481. background: #525e66;
  3482. }
  3483.  
  3484. body .search-submit,
  3485. tbody tr:nth-child(2n+1) > td,
  3486. tbody tr:nth-child(2n+1) > th {
  3487. background: #fafafa;
  3488. }
  3489.  
  3490. a.more-link:hover,
  3491. a.more-link:focus,
  3492. a.more-link:active,
  3493. button:hover,
  3494. button#top-nav-toggle:hover,
  3495. button#social-nav-toggle:hover,
  3496. input[type="button"]:hover,
  3497. input[type="reset"]:hover,
  3498. input[type="submit"]:hover,
  3499. .entry a.portfolio-item-link:hover,
  3500. button:focus,
  3501. button#top-nav-toggle:focus,
  3502. button#social-nav-toggle:focus,
  3503. input[type="button"]:focus,
  3504. input[type="reset"]:focus,
  3505. input[type="submit"]:focus,
  3506. .entry a.portfolio-item-link:focus,
  3507. button:active,
  3508. button#top-nav-toggle:active,
  3509. button#social-nav-toggle:active,
  3510. input[type="button"]:active,
  3511. input[type="reset"]:active,
  3512. input[type="submit"]:active,
  3513. .entry a.portfolio-item-link:active,
  3514. body #infinite-handle span:hover,
  3515. body #infinite-handle span:focus,
  3516. body #infinite-handle span:active,
  3517. .pagination .prev:hover,
  3518. .pagination .next:hover,
  3519. .pagination .prev:focus,
  3520. .pagination .next:focus,
  3521. .pagination .prev:active,
  3522. .pagination .next:active {
  3523. background: #303030;
  3524. color: #fff;
  3525. }
  3526.  
  3527. a.toivo-button:hover,
  3528. a.toivo-button:focus,
  3529. a.toivo-button:active {
  3530. background: #fff;
  3531. color: #3b5667;
  3532. }
  3533.  
  3534. #top-header,
  3535. hr,
  3536. #menu-portfolio ul li a,
  3537. li.bypostauthor,
  3538. .sticky.entry,
  3539. .page-links a,
  3540. .screen-reader-text:hover,
  3541. .screen-reader-text:active,
  3542. .screen-reader-text:focus,
  3543. body .gform_confirmation_wrapper,
  3544. .toivo-callout .toivo-callout-title.entry-title:after {
  3545. background: #f7f6f1;
  3546. }
  3547.  
  3548. #menu-primary,
  3549. .entry,
  3550. #comments,
  3551. .layout-1c #sidebar-primary,
  3552. #sidebar-subsidiary,
  3553. #sidebar-front-page,
  3554. .post-navigation,
  3555. .pagination {
  3556. background-color: #fff;
  3557. }
  3558.  
  3559. @media screen and (max-width: 999px) {
  3560.  
  3561. #sidebar-primary {
  3562. background: #fff;
  3563. }
  3564.  
  3565. }
  3566.  
  3567. .site-footer,
  3568. .format-audio .entry-media,
  3569. .featured-area,
  3570. .child-pages-area {
  3571. background: #aebec8;
  3572. }
  3573. .page-template-blog-page .format-audio .entry-media {
  3574. background: #ddd;
  3575. }
  3576. .toivo-callout {
  3577. background: #3b5667;
  3578. }
  3579.  
  3580. body .mejs-controls .mejs-time-rail .mejs-time-current {
  3581. background: #bbb;
  3582. }
  3583.  
  3584. /* === 16.4 Borders === */
  3585.  
  3586. abbr,
  3587. acronym {
  3588. border-bottom: 1px dotted #555;
  3589. }
  3590.  
  3591. th,
  3592. td {
  3593. border-bottom: 1px solid #ddd;
  3594. }
  3595.  
  3596. input[type="number"],
  3597. input[type="date"],
  3598. input[type="datetime"],
  3599. input[type="datetime-local"],
  3600. input[type="email"],
  3601. input[type="month"],
  3602. input[type="password"],
  3603. input[type="search"],
  3604. input[type="tel"],
  3605. input[type="text"],
  3606. input[type="time"],
  3607. input[type="url"],
  3608. input[type="week"],
  3609. textarea,
  3610. select {
  3611. border: 1px solid #ddd;
  3612. }
  3613. input[type="number"]:focus,
  3614. input[type="date"]:focus,
  3615. input[type="datetime"]:focus,
  3616. input[type="datetime-local"]:focus,
  3617. input[type="email"]:focus,
  3618. input[type="month"]:focus,
  3619. input[type="password"]:focus,
  3620. input[type="search"]:focus,
  3621. input[type="tel"]:focus,
  3622. input[type="text"]:focus,
  3623. input[type="time"]:focus,
  3624. input[type="url"]:focus,
  3625. input[type="week"]:focus,
  3626. textarea:focus,
  3627. select:focus {
  3628. border-color: #9b1c51;
  3629. }
  3630.  
  3631. blockquote {
  3632. border-left-width: 4px;
  3633. border-left-style: solid;
  3634. border-color: #ddd;
  3635. }
  3636.  
  3637. fieldset,
  3638. legend,
  3639. #menu-social li a,
  3640. body .search-field {
  3641. border: 1px solid #ddd;
  3642. }
  3643. button,
  3644. input[type="button"],
  3645. input[type="reset"],
  3646. input[type="submit"],
  3647. a.more-link,
  3648. body #infinite-handle span {
  3649. border: 2px solid #303030;
  3650. }
  3651. body .search-submit {
  3652. border-left: 1px solid #ddd;
  3653. border-top: none;
  3654. border-bottom: none;
  3655. border-right: none;
  3656. }
  3657.  
  3658. .entry,
  3659. .site-header,
  3660. #menu-primary,
  3661. .layout-1c #sidebar-primary,
  3662. .post-navigation .nav-previous,
  3663. #comments,
  3664. .sidebar ul li,
  3665. .error-404.not-found ul li,
  3666. .post-navigation,
  3667. .comments-title,
  3668. .comment-navigation-top,
  3669. .pagination {
  3670. border-bottom: 1px solid #ddd;
  3671. }
  3672.  
  3673. .sidebar ul ul li:first-child,
  3674. .error-404.not-found ul ul li:first-child {
  3675. border-top: 1px solid #ddd;
  3676. }
  3677. .sidebar ul li:last-child,
  3678. .error-404.not-found ul li:last-child {
  3679. border-bottom: none;
  3680. }
  3681.  
  3682. .comment-navigation-bottom,
  3683. #respond {
  3684. border-top: 1px solid #ddd;
  3685. }
  3686.  
  3687. #top-header {
  3688. border-bottom: 6px solid #fff;
  3689. }
  3690.  
  3691. .site-logo,
  3692. .site-header .avatar {
  3693. border: 6px solid #fff;
  3694. }
  3695. .site-title a,
  3696. a.toivo-button {
  3697. border: 4px solid #fff;
  3698. }
  3699.  
  3700. @media screen and (max-width: 999px) {
  3701.  
  3702. .layout-2c-l #sidebar-primary,
  3703. .layout-2c-r #sidebar-primary {
  3704. border-bottom: 1px solid #ddd;
  3705. }
  3706.  
  3707. .pagination .nav-previous {
  3708. border-bottom: 1px solid #ddd;
  3709. }
  3710.  
  3711. }
  3712.  
  3713. .comment-list > li {
  3714. border-bottom: 2px solid #ddd;
  3715. }
  3716. .comment-list > li:last-child {
  3717. border-bottom: none;
  3718. }
  3719.  
  3720. .widget-title,
  3721. .widgettitle {
  3722. border-bottom: 2px solid #9b1c51;
  3723. }
  3724.  
  3725. @media screen and (min-width: 800px) {
  3726.  
  3727. #sidebar-subsidiary .widget:nth-child(2n+1),
  3728. #sidebar-front-page .widget:nth-child(2n+1),
  3729. #sidebar-page-template .widget:nth-child(2n+1),
  3730. #testimonial-area .entry-testimonial:nth-child(2n+1) {
  3731. border-right-width: 1px;
  3732. border-right-style: dashed;
  3733. border-color: #ddd;
  3734. }
  3735.  
  3736. #sidebar-subsidiary .widget:nth-child(n+3),
  3737. #sidebar-front-page .widget:nth-child(n+3),
  3738. #sidebar-page-template .widget:nth-child(n+3),
  3739. #testimonial-area .entry-testimonial:nth-child(n+3) {
  3740. border-top: 1px dashed #ddd;
  3741. }
  3742.  
  3743. }
Advertisement
Add Comment
Please, Sign In to add comment