Nelze vybrat více než 25 témat Téma musí začínat písmenem nebo číslem, může obsahovat pomlčky („-“) a může být dlouhé až 35 znaků.
 
 
 
 
 

4236 řádky
80 KiB

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