style.css 58 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629263026312632263326342635263626372638263926402641264226432644264526462647264826492650265126522653265426552656265726582659266026612662266326642665266626672668266926702671267226732674267526762677267826792680268126822683268426852686268726882689269026912692269326942695269626972698269927002701270227032704270527062707270827092710271127122713271427152716271727182719272027212722272327242725272627272728272927302731273227332734273527362737273827392740274127422743274427452746274727482749275027512752275327542755275627572758275927602761276227632764276527662767276827692770277127722773277427752776277727782779278027812782278327842785278627872788278927902791279227932794279527962797279827992800280128022803280428052806280728082809281028112812281328142815281628172818281928202821282228232824282528262827282828292830283128322833283428352836283728382839284028412842284328442845284628472848284928502851285228532854285528562857285828592860286128622863286428652866286728682869287028712872287328742875287628772878287928802881288228832884288528862887288828892890289128922893289428952896289728982899290029012902290329042905290629072908290929102911291229132914291529162917291829192920292129222923292429252926292729282929293029312932293329342935293629372938293929402941294229432944294529462947294829492950295129522953295429552956295729582959296029612962296329642965296629672968296929702971297229732974297529762977297829792980298129822983298429852986298729882989299029912992299329942995299629972998299930003001300230033004300530063007300830093010301130123013301430153016301730183019302030213022302330243025302630273028302930303031303230333034303530363037303830393040304130423043304430453046304730483049305030513052305330543055305630573058305930603061306230633064306530663067306830693070307130723073307430753076307730783079308030813082308330843085308630873088308930903091309230933094309530963097309830993100310131023103310431053106310731083109311031113112311331143115311631173118311931203121312231233124312531263127312831293130313131323133313431353136313731383139314031413142314331443145314631473148314931503151
  1. /*
  2. Theme Name: Lodestar
  3. Theme URI: http://theme.wordpress.com/themes/lodestar
  4. Author: Automattic
  5. Author URI: https://www.wordpress.com
  6. Description: Lodestar is a trendy one-page theme designed with startups and small business ventures in mind.
  7. Version: 1.0.16-wpcom
  8. License: GNU General Public License v2 or later
  9. License URI: http://www.gnu.org/licenses/gpl-2.0.html
  10. Text Domain: lodestar
  11. Tags: white, light, business, trendy, featured-image-header, featured-images, flexible-header, infinite-scroll, rtl-language-support, theme-options, threaded-comments, translation-ready, responsive-layout, one-column, two-columns, right-sidebar, one-page
  12. Lodestar WordPress Theme, Copyright 2018 Automattic, Inc.
  13. Lodestar is distributed under the terms of the GNU GPL.
  14. This theme, like WordPress, is licensed under the GPL.
  15. Use it to make something cool, have fun, and share what you've learned with others.
  16. Lodestar is created by the theme generator at http://components.underscores.me/, (C) 2015-2018 Automattic, Inc.
  17. Components is distributed under the terms of the GNU GPL v2 or later.
  18. Normalizing styles have been helped along thanks to the fine work of
  19. Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
  20. */
  21. /*--------------------------------------------------------------
  22. >>> TABLE OF CONTENTS:
  23. ----------------------------------------------------------------
  24. # Normalize
  25. # Accessibility
  26. # Alignments
  27. # Clearings
  28. # Typography
  29. # Forms
  30. # Buttons
  31. # Formatting
  32. # Lists
  33. # Tables
  34. # Navigation
  35. # Links
  36. # Layout
  37. ## Posts
  38. ## Pages
  39. # Comments
  40. # Widgets
  41. # Infinite scroll
  42. # Media
  43. ## Galleries
  44. --------------------------------------------------------------*/
  45. /*--------------------------------------------------------------
  46. # Normalize
  47. --------------------------------------------------------------*/
  48. html {
  49. font-family: sans-serif;
  50. -webkit-text-size-adjust: 100%;
  51. -ms-text-size-adjust: 100%;
  52. }
  53. body {
  54. margin: 0;
  55. }
  56. article,
  57. aside,
  58. details,
  59. figcaption,
  60. figure,
  61. footer,
  62. header,
  63. main,
  64. menu,
  65. nav,
  66. section,
  67. summary {
  68. display: block;
  69. }
  70. audio,
  71. canvas,
  72. progress,
  73. video {
  74. display: inline-block;
  75. vertical-align: baseline;
  76. }
  77. audio:not([controls]) {
  78. display: none;
  79. height: 0;
  80. }
  81. [hidden],
  82. template {
  83. display: none;
  84. }
  85. a {
  86. background-color: transparent;
  87. }
  88. a:active,
  89. a:hover {
  90. outline: 0;
  91. }
  92. abbr[title] {
  93. border-bottom: 1px dotted;
  94. }
  95. b,
  96. strong {
  97. font-weight: bold;
  98. }
  99. dfn {
  100. font-style: italic;
  101. }
  102. h1 {
  103. font-size: 2em;
  104. margin: 0.67em 0;
  105. }
  106. mark {
  107. background: #ff0;
  108. color: #000;
  109. }
  110. small {
  111. font-size: 80%;
  112. }
  113. sub,
  114. sup {
  115. font-size: 75%;
  116. line-height: 0;
  117. position: relative;
  118. vertical-align: baseline;
  119. }
  120. sup {
  121. top: -0.5em;
  122. }
  123. sub {
  124. bottom: -0.25em;
  125. }
  126. img {
  127. border: 0;
  128. }
  129. svg:not(:root) {
  130. overflow: hidden;
  131. }
  132. figure {
  133. margin: 0;
  134. }
  135. hr {
  136. box-sizing: content-box;
  137. height: 0;
  138. }
  139. pre {
  140. overflow: auto;
  141. }
  142. code,
  143. kbd,
  144. pre,
  145. samp {
  146. font-family: monospace, monospace;
  147. font-size: 1em;
  148. }
  149. button,
  150. input,
  151. optgroup,
  152. select,
  153. textarea {
  154. border-radius: 0;
  155. color: inherit;
  156. font: inherit;
  157. margin: 0;
  158. }
  159. button {
  160. overflow: visible;
  161. }
  162. button,
  163. select {
  164. text-transform: none;
  165. }
  166. button,
  167. html input[type="button"],
  168. input[type="reset"],
  169. input[type="submit"] {
  170. -webkit-appearance: button;
  171. cursor: pointer;
  172. }
  173. button[disabled],
  174. html input[disabled] {
  175. cursor: default;
  176. }
  177. button::-moz-focus-inner,
  178. input::-moz-focus-inner {
  179. border: 0;
  180. padding: 0;
  181. }
  182. input {
  183. line-height: normal;
  184. }
  185. input[type="checkbox"],
  186. input[type="radio"] {
  187. box-sizing: border-box;
  188. padding: 0;
  189. }
  190. input[type="number"]::-webkit-inner-spin-button,
  191. input[type="number"]::-webkit-outer-spin-button {
  192. height: auto;
  193. }
  194. input[type="search"] {
  195. -webkit-appearance: none;
  196. }
  197. input[type="search"]::-webkit-search-cancel-button,
  198. input[type="search"]::-webkit-search-decoration {
  199. -webkit-appearance: none;
  200. }
  201. fieldset {
  202. border: 1px solid #c0c0c0;
  203. margin: 0 2px;
  204. padding: 0.35em 0.625em 0.75em;
  205. }
  206. legend {
  207. border: 0;
  208. padding: 0;
  209. }
  210. textarea {
  211. overflow: auto;
  212. }
  213. optgroup {
  214. font-weight: bold;
  215. }
  216. table {
  217. border-collapse: collapse;
  218. border-spacing: 0;
  219. }
  220. td,
  221. th {
  222. border: 1px solid #ddd;
  223. padding: 0.5em;
  224. }
  225. th {
  226. text-align: left;
  227. }
  228. /*--------------------------------------------------------------
  229. # Accessibility
  230. --------------------------------------------------------------*/
  231. /* Text meant only for screen readers. */
  232. .screen-reader-text {
  233. clip: rect(1px, 1px, 1px, 1px);
  234. position: absolute !important;
  235. height: 1px;
  236. width: 1px;
  237. overflow: hidden;
  238. }
  239. .screen-reader-text:focus {
  240. background-color: #f1f1f1;
  241. border-radius: 3px;
  242. box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  243. clip: auto !important;
  244. color: #21759b;
  245. display: block;
  246. font-size: 14px;
  247. font-size: 0.875rem;
  248. font-weight: bold;
  249. height: auto;
  250. left: 5px;
  251. line-height: normal;
  252. padding: 15px 23px 14px;
  253. text-decoration: none;
  254. top: 5px;
  255. width: auto;
  256. word-wrap: normal !important;
  257. z-index: 100000;
  258. /* Above WP toolbar. */
  259. }
  260. /* Do not show the outline on the skip link target. */
  261. #content[tabindex="-1"]:focus {
  262. outline: 0;
  263. }
  264. /*--------------------------------------------------------------
  265. # Alignments
  266. --------------------------------------------------------------*/
  267. .alignleft {
  268. display: inline;
  269. float: left;
  270. margin-right: 1.5em;
  271. }
  272. .alignright {
  273. display: inline;
  274. float: right;
  275. margin-left: 1.5em;
  276. }
  277. .aligncenter {
  278. clear: both;
  279. display: block;
  280. margin-left: auto;
  281. margin-right: auto;
  282. }
  283. /*--------------------------------------------------------------
  284. # Clearings
  285. --------------------------------------------------------------*/
  286. .clear::before,
  287. .clear::after,
  288. .entry-content::before,
  289. .entry-content::after,
  290. .comment-content::before,
  291. .comment-content::after,
  292. .site-header::before,
  293. .site-header::after,
  294. .site-content::before,
  295. .site-content::after,
  296. .site-footer::before,
  297. .site-footer::after,
  298. .nav-links::before,
  299. .nav-links::after,
  300. .comment-author::before,
  301. .comment-author::after,
  302. .widget::before,
  303. .widget::after,
  304. .entry-author::before,
  305. .entry-author::after,
  306. .comment-meta::before,
  307. .comment-meta::after,
  308. .testimonial-about::before,
  309. .testimonial-about::after,
  310. .portfolio-wrapper::before,
  311. .portfolio-wrapper::after {
  312. content: "";
  313. display: table;
  314. table-layout: fixed;
  315. }
  316. .clear::after,
  317. .entry-content::after,
  318. .comment-content::after,
  319. .site-header::after,
  320. .site-content::after,
  321. .site-footer::after,
  322. .nav-links::after,
  323. .comment-author::after,
  324. .widget::after,
  325. .entry-author::after,
  326. .comment-meta::after,
  327. .testimonial-about::after,
  328. .portfolio-wrapper::after {
  329. clear: both;
  330. }
  331. /*--------------------------------------------------------------
  332. # Typography
  333. --------------------------------------------------------------*/
  334. body,
  335. button,
  336. input,
  337. select,
  338. textarea {
  339. color: #333;
  340. font-family: "Karla", "Helvetica Neue", helvetica, arial, sans-serif;
  341. font-size: 16px;
  342. font-size: 1rem;
  343. line-height: 1.5;
  344. }
  345. h1, h2, h3, h4, h5, h6 {
  346. clear: both;
  347. font-family: "Work Sans", "Helvetica Neue", helvetica, arial, sans-serif;
  348. font-weight: 800;
  349. letter-spacing: 0.1em;
  350. line-height: 1.25;
  351. margin: 0 0 0.75em;
  352. padding: 0.75em 0 0 0;
  353. text-transform: uppercase;
  354. }
  355. h1:first-child,
  356. h2:first-child,
  357. h3:first-child,
  358. h4:first-child,
  359. h5:first-child,
  360. h6:first-child {
  361. padding-top: 0;
  362. }
  363. h1 {
  364. font-size: 30px;
  365. font-size: 1.875rem;
  366. }
  367. h2 {
  368. font-size: 26px;
  369. font-size: 1.625rem;
  370. }
  371. h3 {
  372. font-size: 22px;
  373. font-size: 1.375rem;
  374. }
  375. h4 {
  376. font-size: 18px;
  377. font-size: 1.125rem;
  378. }
  379. h5 {
  380. font-size: 16px;
  381. font-size: 1rem;
  382. }
  383. h6 {
  384. font-size: 14px;
  385. font-size: 0.875rem;
  386. }
  387. p {
  388. margin: 0 0 1.5em;
  389. padding: 0;
  390. }
  391. dfn, cite, em, i {
  392. font-style: italic;
  393. }
  394. blockquote {
  395. border-left: 4px solid #ddd;
  396. margin: 0 2em;
  397. padding: 0 0 0 1.5em;
  398. }
  399. address {
  400. margin: 0 0 1.5em;
  401. }
  402. pre {
  403. background: #eee;
  404. font-family: "Courier 10 Pitch", Courier, monospace;
  405. font-size: 15px;
  406. font-size: 0.9375rem;
  407. line-height: 1.6;
  408. margin-bottom: 1.6em;
  409. max-width: 100%;
  410. overflow: auto;
  411. padding: 1.6em;
  412. }
  413. code, kbd, tt, var {
  414. font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
  415. font-size: 15px;
  416. font-size: 0.9375rem;
  417. }
  418. abbr, acronym {
  419. border-bottom: 1px dotted #666;
  420. cursor: help;
  421. }
  422. mark, ins {
  423. background: #fff9c0;
  424. text-decoration: none;
  425. }
  426. big {
  427. font-size: 125%;
  428. }
  429. blockquote, q {
  430. quotes: "" "";
  431. }
  432. blockquote::before,
  433. blockquote::after,
  434. q::before,
  435. q::after {
  436. content: "";
  437. }
  438. :focus {
  439. outline: none;
  440. }
  441. /* Genericons */
  442. .menu-toggle::before,
  443. .menu-item-has-children > a::after,
  444. .page_item_has_children > a::after,
  445. .bypostauthor::before {
  446. font-family: Genericons;
  447. font-size: 1em;
  448. font-style: normal;
  449. font-weight: normal;
  450. line-height: 1;
  451. text-decoration: none;
  452. vertical-align: text-bottom;
  453. -webkit-font-smoothing: antialiased;
  454. -moz-osx-font-smoothing: grayscale;
  455. text-rendering: auto;
  456. }
  457. /*--------------------------------------------------------------
  458. # Forms
  459. --------------------------------------------------------------*/
  460. input[type="text"],
  461. input[type="email"],
  462. input[type="url"],
  463. input[type="password"],
  464. input[type="search"],
  465. input[type="number"],
  466. input[type="tel"],
  467. input[type="range"],
  468. input[type="date"],
  469. input[type="month"],
  470. input[type="week"],
  471. input[type="time"],
  472. input[type="datetime"],
  473. input[type="datetime-local"],
  474. input[type="color"],
  475. textarea {
  476. color: #666;
  477. border: 1px solid #bbb;
  478. }
  479. input[type="text"]:focus,
  480. input[type="email"]:focus,
  481. input[type="url"]:focus,
  482. input[type="password"]:focus,
  483. input[type="search"]:focus,
  484. input[type="number"]:focus,
  485. input[type="tel"]:focus,
  486. input[type="range"]:focus,
  487. input[type="date"]:focus,
  488. input[type="month"]:focus,
  489. input[type="week"]:focus,
  490. input[type="time"]:focus,
  491. input[type="datetime"]:focus,
  492. input[type="datetime-local"]:focus,
  493. input[type="color"]:focus,
  494. textarea:focus {
  495. color: #111;
  496. border-color: #333;
  497. }
  498. select {
  499. border: 1px solid #bbb;
  500. }
  501. input[type="text"],
  502. input[type="email"],
  503. input[type="url"],
  504. input[type="password"],
  505. input[type="search"],
  506. input[type="number"],
  507. input[type="tel"],
  508. input[type="range"],
  509. input[type="date"],
  510. input[type="month"],
  511. input[type="week"],
  512. input[type="time"],
  513. input[type="datetime"],
  514. input[type="datetime-local"],
  515. input[type="color"] {
  516. padding: 4px;
  517. }
  518. textarea {
  519. padding-left: 3px;
  520. width: 100%;
  521. }
  522. /*--------------------------------------------------------------
  523. # Forms
  524. --------------------------------------------------------------*/
  525. button,
  526. input[type="button"],
  527. input[type="reset"],
  528. input[type="submit"],
  529. #infinite-handle span button,
  530. #infinite-handle span button:hover,
  531. #infinite-handle span button:focus {
  532. border: 0;
  533. border-radius: 0;
  534. background: #29292a;
  535. box-shadow: none;
  536. color: #fff;
  537. font-size: 14px;
  538. font-size: 0.875rem;
  539. letter-spacing: 0.05em;
  540. line-height: 1;
  541. padding: 1em 1.5em;
  542. text-shadow: none;
  543. text-transform: uppercase;
  544. transition: background 0.2s;
  545. }
  546. button:hover,
  547. button:focus,
  548. input[type="button"]:hover,
  549. input[type="button"]:focus,
  550. input[type="reset"]:hover,
  551. input[type="reset"]:focus,
  552. input[type="submit"]:hover,
  553. input[type="submit"]:focus,
  554. #infinite-handle span button:hover,
  555. #infinite-handle span button:focus {
  556. background: #555;
  557. cursor: pointer;
  558. }
  559. /*--------------------------------------------------------------
  560. # Formattings
  561. --------------------------------------------------------------*/
  562. hr {
  563. background-color: #ccc;
  564. border: 0;
  565. height: 1px;
  566. margin-bottom: 1.5em;
  567. }
  568. /*--------------------------------------------------------------
  569. # Lists
  570. --------------------------------------------------------------*/
  571. ul,
  572. ol {
  573. margin: 0 0 1.5em 3em;
  574. padding: 0;
  575. }
  576. ul {
  577. list-style: disc;
  578. }
  579. ol {
  580. list-style: decimal;
  581. }
  582. li > ul,
  583. li > ol {
  584. margin-bottom: 0;
  585. margin-left: 1.5em;
  586. }
  587. dt {
  588. font-weight: bold;
  589. }
  590. dd {
  591. margin: 0 1.5em 1.5em;
  592. }
  593. /*--------------------------------------------------------------
  594. # Tables
  595. --------------------------------------------------------------*/
  596. table {
  597. margin: 0 0 1.5em;
  598. width: 100%;
  599. }
  600. /*--------------------------------------------------------------
  601. # Navigation
  602. --------------------------------------------------------------*/
  603. .comment-navigation,
  604. .posts-navigation,
  605. .post-navigation {
  606. margin: 0 0 1.5em;
  607. overflow: hidden;
  608. }
  609. /*--------------------------------------------------------------
  610. # Links
  611. --------------------------------------------------------------*/
  612. a,
  613. a:visited {
  614. color: #999;
  615. text-decoration: none;
  616. }
  617. a:hover,
  618. a:focus,
  619. a:active {
  620. color: #333;
  621. }
  622. a:focus {
  623. outline: thin dotted;
  624. }
  625. a:hover,
  626. a:active {
  627. outline: 0;
  628. }
  629. /* Hover effects */
  630. .entry-content a,
  631. .entry-content a:visited,
  632. .entry-summary a,
  633. .entry-summary a:visited,
  634. .edit-link a,
  635. .edit-link a:visited,
  636. .widget a,
  637. .widget a:visited,
  638. .entry-meta a,
  639. .entry-meta a:visited,
  640. .entry-footer a,
  641. .entry-footer a:visited,
  642. .site-footer a,
  643. .site-footer a:visited,
  644. .entry-title a,
  645. .entry-title a:visited,
  646. .post-navigation a,
  647. .post-navigation a:visited,
  648. .posts-navigation a,
  649. .posts-navigation a:visited,
  650. .comment-navigation a,
  651. .comment-navigation a:visited,
  652. .widget_authors a strong,
  653. .widget_authors a:visited strong,
  654. .project-terms a,
  655. .project-terms a:visited,
  656. .author-bio a,
  657. .author-bio a:visited {
  658. border-bottom: 2px solid transparent;
  659. transition: border-bottom-color 0.2s;
  660. }
  661. .entry-content a:focus,
  662. .entry-content a:hover,
  663. .entry-summary a:focus,
  664. .entry-summary a:hover,
  665. .edit-link a:focus,
  666. .edit-link a:hover,
  667. .widget a:focus,
  668. .widget a:hover,
  669. .entry-meta a:focus,
  670. .entry-meta a:hover,
  671. .entry-footer a:focus,
  672. .entry-footer a:hover,
  673. .site-footer a:focus,
  674. .site-footer a:hover,
  675. .entry-title a:focus,
  676. .entry-title a:hover,
  677. .post-navigation a:focus,
  678. .post-navigation a:hover,
  679. .posts-navigation a:focus,
  680. .posts-navigation a:hover,
  681. .comment-navigation a:focus,
  682. .comment-navigation a:hover,
  683. .widget_authors a:focus strong,
  684. .widget_authors a:hover strong,
  685. .project-terms a:focus,
  686. .project-terms a:hover,
  687. .author-bio a:focus,
  688. .author-bio a:hover {
  689. border-bottom-color: currentColor;
  690. }
  691. .widget ul li a:focus,
  692. .widget ul li a:hover,
  693. .jp-relatedposts-post a:focus,
  694. .jp-relatedposts-post a:hover {
  695. border-bottom-color: transparent;
  696. }
  697. .gallery-item a {
  698. border: 0;
  699. }
  700. /*--------------------------------------------------------------
  701. # Featured Image hover
  702. --------------------------------------------------------------*/
  703. .post-thumbnail {
  704. margin-bottom: 1em;
  705. }
  706. .post-thumbnail a img {
  707. transition: opacity 0.2s;
  708. }
  709. .post-thumbnail a:hover img,
  710. .post-thumbnail a:focus img {
  711. opacity: 0.7;
  712. }
  713. /*--------------------------------------------------------------
  714. # Layout
  715. --------------------------------------------------------------*/
  716. html {
  717. box-sizing: border-box;
  718. }
  719. *,
  720. *::before,
  721. *::after {
  722. /* 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/ */
  723. box-sizing: inherit;
  724. }
  725. body {
  726. background: #fff;
  727. /* Fallback for when there is no custom background color defined. */
  728. }
  729. #page {
  730. position: relative;
  731. -ms-word-wrap: break-word;
  732. word-wrap: break-word;
  733. }
  734. .wrap {
  735. margin-left: auto;
  736. margin-right: auto;
  737. max-width: 1200px;
  738. max-width: calc( 1200px - 1em );
  739. padding-left: 2em;
  740. padding-right: 2em;
  741. }
  742. .wrap::after {
  743. clear: both;
  744. content: "";
  745. display: block;
  746. }
  747. /*--------------------------------------------------------------
  748. # Header
  749. --------------------------------------------------------------*/
  750. #masthead .wrap {
  751. position: relative;
  752. }
  753. .site-header {
  754. background-color: #333;
  755. }
  756. /* Header top */
  757. .header-top {
  758. background-color: #29292a;
  759. color: #fff;
  760. letter-spacing: 0.05em;
  761. text-align: center;
  762. text-transform: uppercase;
  763. }
  764. .header-top .wrap {
  765. padding: 0;
  766. }
  767. .header-top a,
  768. .header-top a:visited {
  769. color: #fff;
  770. -webkit-transition: color 0.2s;
  771. transition: color 0.2s;
  772. }
  773. .header-top a:hover,
  774. .header-top a:focus {
  775. color: rgba(255,255,255,0.7);
  776. }
  777. .site-top-content {
  778. line-height: 1.5;
  779. padding: 0.75em 1.5em;
  780. }
  781. .main-navigation + .site-top-content {
  782. padding-top: 0;
  783. }
  784. .site-top-content span.site-top-content-2 {
  785. color: #999;
  786. display: block;
  787. }
  788. /* Site branding */
  789. .site-branding {
  790. color: #fff;
  791. text-align: center;
  792. }
  793. .site-branding a {
  794. color: #fff;
  795. text-decoration: none;
  796. -webkit-transition: opacity 0.2s;
  797. transition: opacity 0.2s;
  798. }
  799. .site-branding a:hover,
  800. .site-branding a:focus {
  801. opacity: 0.7;
  802. }
  803. .site-title {
  804. font-family: "Work Sans", "Helvetica Neue", helvetica, arial, sans-serif;
  805. font-size: 30px;
  806. font-size: 1.875rem;
  807. font-weight: 800;
  808. letter-spacing: 0.08em;
  809. margin: 0;
  810. padding: 0;
  811. text-transform: uppercase;
  812. }
  813. .site-description {
  814. font-size: 18px;
  815. font-size: 1.125rem;
  816. margin-bottom: 0;
  817. }
  818. .site-description,
  819. .site-description a {
  820. color: #ccc;
  821. }
  822. .site-logo-link img {
  823. max-height: 100px;
  824. width: auto;
  825. }
  826. .custom-header-image {
  827. background-position: center center;
  828. background-size: cover;
  829. padding: 10% 0;
  830. position: relative;
  831. }
  832. .no-header-image .custom-header-image {
  833. padding: 5% 0;
  834. }
  835. body:not(.no-header-image) .custom-header-image::before,
  836. .lodestar-front-page .custom-header-image::before {
  837. background: rgba(0,0,0,0.5);
  838. bottom: 0;
  839. content: "";
  840. left: 0;
  841. position: absolute;
  842. right: 0;
  843. top: 0;
  844. }
  845. /*--------------------------------------------------------------
  846. # Main Navigation
  847. --------------------------------------------------------------*/
  848. .header-top .wrap::after {
  849. display: none;
  850. }
  851. .main-navigation {
  852. clear: both;
  853. display: block;
  854. }
  855. .main-navigation ul {
  856. background: #111;
  857. display: none;
  858. list-style: none;
  859. margin: 0;
  860. padding: 0 1.5em;
  861. text-align: left;
  862. }
  863. .main-navigation ul.nav-menu {
  864. margin-bottom: 1em;
  865. padding: 0 1.5em;
  866. }
  867. .main-navigation ul ul {
  868. padding: 0 0 0 1.5em;
  869. }
  870. .main-navigation ul ul a {
  871. letter-spacing: 0;
  872. padding: 0.4em 0;
  873. position: relative;
  874. text-transform: none;
  875. }
  876. .main-navigation a {
  877. display: block;
  878. padding: 0.75em 0;
  879. text-decoration: none;
  880. }
  881. /* Small menu. */
  882. .menu-toggle {
  883. background-color: transparent;
  884. border: 1px solid rgba(255,255,255,0.2);
  885. box-shadow: none;
  886. color: #fff;
  887. display: inline-block;
  888. font-size: 16px;
  889. line-height: 1.5;
  890. margin: 1em 0;
  891. padding: 0.5em 1.0em;
  892. text-shadow: none;
  893. }
  894. .main-navigation.toggled ul {
  895. display: block;
  896. }
  897. .menu-toggle:hover,
  898. .menu-toggle:focus {
  899. background-color: transparent;
  900. box-shadow: none;
  901. }
  902. .menu-toggle::before {
  903. content: "\f419";
  904. margin-right: 0.5em;
  905. position: relative;
  906. top: -2px;
  907. }
  908. .toggled .menu-toggle::before {
  909. content: "\f406";
  910. }
  911. /*--------------------------------------------------------------
  912. # Front Page
  913. --------------------------------------------------------------*/
  914. .lodestar-front-page .site-content {
  915. padding: 0;
  916. }
  917. .lodestar-panel {
  918. overflow: hidden;
  919. position: relative;
  920. }
  921. .panel-image {
  922. background-position: center center;
  923. background-size: cover;
  924. position: relative;
  925. }
  926. .panel-image::before {
  927. /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.3+100 */
  928. background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 100%); /* FF3.6-15 */
  929. background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.3) 100%); /* Chrome10-25,Safari5.1-6 */
  930. background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.3) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  931. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#4d000000',GradientType=0 ); /* IE6-9 */
  932. bottom: 0;
  933. content: "";
  934. left: 0;
  935. right: 0;
  936. position: absolute;
  937. top: 100px;
  938. }
  939. .lodestar-front-page article:not(.has-post-thumbnail):not(.lodestar-intro):not(.jetpack-portfolio):not(.jetpack-testimonial) {
  940. border-top: 1px solid #ddd;
  941. }
  942. .panel-content {
  943. position: relative;
  944. }
  945. .panel-content .wrap {
  946. padding-bottom: 1.5em;
  947. padding-top: 2em;
  948. }
  949. .panel-content .entry-title {
  950. color: #ccc;
  951. text-align: center;
  952. }
  953. /* One Column */
  954. .one-column .panel-content .wrap {
  955. background-color: #fff;
  956. /* max-width: 905px; */
  957. max-width: 1000px;
  958. }
  959. .child-pages {
  960. margin-left: auto;
  961. margin-right: auto;
  962. max-width: 500px;
  963. text-align: center;
  964. }
  965. .child-page {
  966. margin-bottom: 3em;
  967. }
  968. /* Portfolio */
  969. .lodestar-panel .project-archive-content {
  970. text-align: center;
  971. }
  972. .lodestar-panel .portfolio-projects {
  973. margin-left: -10px;
  974. margin-right: -10px;
  975. padding-top: 2em;
  976. }
  977. /* Testimonial */
  978. .lodestar-panel .testimonials {
  979. padding-top: 2em;
  980. }
  981. .lodestar-panel .jetpack-testimonial {
  982. padding-bottom: 0;
  983. }
  984. body .lodestar-panel .jetpack-testimonial .entry-header {
  985. padding-top: 1.0em;
  986. }
  987. body:not(.logged-in) .lodestar-panel .jetpack-testimonial .entry-header {
  988. padding-top: 2.0em;
  989. }
  990. .lodestar-panel .jetpack-testimonial .entry-header h2 {
  991. color: #333;
  992. }
  993. .lodestar-panel .jetpack-testimonial .entry-content {
  994. border: 0;
  995. font-size: 1.0em;
  996. padding: 0;
  997. }
  998. .lodestar-panel .jetpack-testimonial .edit-link {
  999. text-align: left;
  1000. }
  1001. .lodestar-panel .testimonial-about {
  1002. margin: 0;
  1003. }
  1004. /* Recent Posts */
  1005. .lodestar-panel .recent-posts {
  1006. padding-top: 2em;
  1007. }
  1008. .lodestar-front-page .lodestar-panel .recent-posts .post {
  1009. border-top: 0 !important;
  1010. padding-bottom: 2em;
  1011. }
  1012. .lodestar-panel .recent-posts .entry-header {
  1013. margin-bottom: 1em;
  1014. }
  1015. .panel-content .wrap .recent-posts .post h2 {
  1016. font-size: 20px;
  1017. font-size: 1.25rem;
  1018. text-align: left;
  1019. }
  1020. .lodestar-panel .recent-posts .edit-link {
  1021. text-align: left;
  1022. }
  1023. /* Panel edit link */
  1024. .lodestar-panel .edit-link {
  1025. display: block;
  1026. font-size: 85%;
  1027. letter-spacing: 0.08em;
  1028. margin: 0.3em 0 0;
  1029. text-align: center;
  1030. text-transform: uppercase;
  1031. }
  1032. /* First panel */
  1033. .lodestar-intro {
  1034. margin-bottom: 0;
  1035. padding: 1.5em 0;
  1036. }
  1037. .lodestar-intro .entry-content {
  1038. color: #555;
  1039. font-size: 20px;
  1040. font-size: 1.25rem;
  1041. text-align: center;
  1042. }
  1043. .lodestar-intro .entry-content > *:last-child {
  1044. margin-bottom: 0;
  1045. }
  1046. .lodestar-intro .edit-link {
  1047. display: block;
  1048. font-size: 85%;
  1049. letter-spacing: 0.08em;
  1050. margin-top: 2em;
  1051. text-align: center;
  1052. text-transform: uppercase;
  1053. }
  1054. /*--------------------------------------------------------------
  1055. ## Regular Content
  1056. --------------------------------------------------------------*/
  1057. .site-content {
  1058. padding: 2.5em 0 0;
  1059. }
  1060. /*--------------------------------------------------------------
  1061. ## Posts
  1062. --------------------------------------------------------------*/
  1063. /* Post Landing Page */
  1064. .sticky {
  1065. display: block;
  1066. }
  1067. .entry-title a {
  1068. color: #333;
  1069. text-decoration: none;
  1070. transition: color 0.2s;
  1071. }
  1072. .entry-title a:hover,
  1073. .entry-title a:focus {
  1074. color: #666;
  1075. }
  1076. .entry-meta {
  1077. color: #aaa;
  1078. }
  1079. .byline,
  1080. .updated:not(.published) {
  1081. display: none;
  1082. }
  1083. .single .byline,
  1084. .group-blog .byline {
  1085. display: inline;
  1086. }
  1087. .date-hidden .byline-prefix,
  1088. .date-hidden.author-hidden .cat-prefix,
  1089. .blog .sticky .byline-prefix,
  1090. .blog.author-hidden .sticky .cat-prefix {
  1091. text-transform: capitalize;
  1092. }
  1093. .blog .sticky .posted-on {
  1094. display: none;
  1095. }
  1096. /* Entry Header */
  1097. .entry-header {
  1098. margin-bottom: 2.5em;
  1099. }
  1100. .entry-header .entry-title {
  1101. margin-bottom: 0.25em;
  1102. }
  1103. /* Entry content */
  1104. .entry-content h1,
  1105. .entry-content h2 {
  1106. color: #ccc;
  1107. }
  1108. .entry-content h3,
  1109. .entry-content h4 {
  1110. color: #333;
  1111. }
  1112. .entry-content h5,
  1113. .entry-content h6 {
  1114. color: #666;
  1115. }
  1116. /* Entry footer */
  1117. .entry-footer .cat-links,
  1118. .entry-footer .tags-links,
  1119. .entry-footer .comments-link,
  1120. .entry-footer .edit-link {
  1121. margin-right: 2em;
  1122. }
  1123. .entry-footer span:last-child {
  1124. margin-right: 0;
  1125. }
  1126. /* Blog landing, search, archives */
  1127. .blog .post,
  1128. .archive:not(.woocommerce-active) .post,
  1129. .search .post,
  1130. .search .page,
  1131. .archive .jetpack-portfolio,
  1132. .search .jetpack-portfolio,
  1133. .lodestar-panel .jetpack-portfolio {
  1134. padding-bottom: 2em;
  1135. }
  1136. body:not(.lodestar-front-page) .entry-header,
  1137. .lodestar-panel .jetpack-portfolio .entry-header,
  1138. body:not(.lodestar-front-page) .entry-footer,
  1139. .lodestar-panel .jetpack-portfolio .entry-footer {
  1140. padding: 1em 0;
  1141. }
  1142. body:not(.lodestar-front-page) .entry-header,
  1143. .lodestar-panel .jetpack-portfolio .entry-header,
  1144. body:not(.lodestar-front-page) .entry-content,
  1145. .lodestar-panel .jetpack-portfolio .entry-content,
  1146. body:not(.lodestar-front-page) .entry-footer,
  1147. .lodestar-panel .jetpack-portfolio .entry-footer,
  1148. body:not(.lodestar-front-page) .post-navigation,
  1149. body:not(.lodestar-front-page) #comments {
  1150. margin: auto;
  1151. }
  1152. body:not(.lodestar-front-page) .entry-header,
  1153. .lodestar-panel .jetpack-portfolio .entry-header {
  1154. padding-top: 0;
  1155. }
  1156. /* Single Posts */
  1157. .post-navigation .nav-links {
  1158. border-bottom: 1px solid #ccc;
  1159. border-top: 1px solid #ccc;
  1160. margin: 1em 0;
  1161. padding: 1em 0;
  1162. }
  1163. .nav-subtitle {
  1164. display: block;
  1165. font-size: 90%;
  1166. font-weight: bold;
  1167. font-weight: 800;
  1168. letter-spacing: 0.05em;
  1169. text-transform: uppercase;
  1170. }
  1171. .post-navigation .nav-next {
  1172. margin-top: 1.5em;
  1173. }
  1174. /* Author Bio */
  1175. .entry-author {
  1176. border-top: 1px solid #ccc;
  1177. margin: 2em 0 0;
  1178. padding: 2em 0 0;
  1179. }
  1180. .entry-author .author-avatar {
  1181. float: left;
  1182. margin-right: 1em;
  1183. }
  1184. .entry-author .avatar-container {
  1185. border-radius: 30px;
  1186. display: block;
  1187. height: 60px;
  1188. overflow: hidden;
  1189. width: 60px;
  1190. }
  1191. .entry-author h2,
  1192. .entry-author h3 {
  1193. display: inline;
  1194. float: none;
  1195. font-size: 16px;
  1196. font-size: 1rem;
  1197. margin: 0;
  1198. padding: 0;
  1199. }
  1200. .entry-author .author-heading,
  1201. .entry-author .author-bio {
  1202. float: right;
  1203. width: calc(100% - 80px);
  1204. }
  1205. .entry-author .author-link::before {
  1206. content: "";
  1207. display: block;
  1208. }
  1209. /*--------------------------------------------------------------
  1210. ## Pages
  1211. --------------------------------------------------------------*/
  1212. .page-header {
  1213. padding-bottom: 2em;
  1214. }
  1215. .page-links {
  1216. clear: both;
  1217. margin: 0 0 1.5em;
  1218. }
  1219. .page-links span {
  1220. margin: 0 0.25em;
  1221. }
  1222. /* 404 page */
  1223. .error404 .page-content .search-form,
  1224. .search .page-content .search-form {
  1225. margin-bottom: 3em;
  1226. }
  1227. /*--------------------------------------------------------------
  1228. ## Jetpack Testimonial
  1229. --------------------------------------------------------------*/
  1230. .jetpack-testimonial {
  1231. padding-bottom: 4em;
  1232. }
  1233. .jetpack-testimonial .post-thumbnail {
  1234. border-radius: 50px;
  1235. display: block;
  1236. float: left;
  1237. height: 80px;
  1238. margin: 0 1em 0 0;
  1239. overflow: hidden;
  1240. width: 80px;
  1241. }
  1242. .testimonial-about {
  1243. margin-left: 30px;
  1244. margin-top: -70px;
  1245. }
  1246. .testimonial-about .entry-header {
  1247. float: left;
  1248. min-height: 80px;
  1249. vertical-align: middle;
  1250. }
  1251. body .jetpack-testimonial .entry-header {
  1252. padding-top: 0.5em;
  1253. }
  1254. body:not(.logged-in) .jetpack-testimonial .entry-header {
  1255. padding-top: 1.5em;
  1256. }
  1257. .jetpack-testimonial .entry-header h2 {
  1258. font-size: 1em;
  1259. }
  1260. .jetpack-testimonial .entry-content {
  1261. border: 2px solid #eee;
  1262. font-size: 1.2em;
  1263. padding: 30px 30px 70px;
  1264. }
  1265. .jetpack-testimonial .entry-content p:last-child {
  1266. margin-bottom: 0.75em
  1267. }
  1268. /*--------------------------------------------------------------
  1269. ## Jetpack Portfolio
  1270. --------------------------------------------------------------*/
  1271. .portfolio-content .page-content {
  1272. margin-bottom: 2.0em;
  1273. }
  1274. .project-terms {
  1275. margin-bottom: 1.5em;
  1276. }
  1277. .project-terms ul,
  1278. .project-terms ul li {
  1279. display: inline;
  1280. list-style: none;
  1281. margin: 0;
  1282. padding: 0;
  1283. }
  1284. .project-terms a {
  1285. display: inline-block;
  1286. margin: 0 0.3em;
  1287. }
  1288. .project-terms a.current-type {
  1289. color: #333;
  1290. }
  1291. .portfolio-wrapper {
  1292. padding-bottom: 2em;
  1293. position: relative;
  1294. }
  1295. /*--------------------------------------------------------------
  1296. # Comments
  1297. --------------------------------------------------------------*/
  1298. #comments {
  1299. padding-top: 2em;
  1300. }
  1301. .comments-title {
  1302. font-size: 24px;
  1303. font-size: 1.5rem;
  1304. }
  1305. .comment-list,
  1306. .comment-list .children {
  1307. list-style: none;
  1308. margin: 0;
  1309. padding: 0;
  1310. }
  1311. .comment-body {
  1312. margin-bottom: 3em;
  1313. padding-left: 100px;
  1314. }
  1315. .children {
  1316. padding-left: 40px;
  1317. }
  1318. .comment-content p:last-child {
  1319. margin-bottom: 0;
  1320. }
  1321. .comment-content a {
  1322. word-wrap: break-word;
  1323. }
  1324. .bypostauthor {
  1325. position: relative;
  1326. }
  1327. .bypostauthor::before {
  1328. background: #333;
  1329. border-radius: 30px;
  1330. color: #fff;
  1331. content: "\f408";
  1332. display: block;
  1333. height: 22px;
  1334. left: 0;
  1335. line-height: 21px;
  1336. position: absolute;
  1337. text-align: center;
  1338. top: 0;
  1339. width: 22px;
  1340. z-index: 2;
  1341. }
  1342. .children .bypostauthor::before {
  1343. left: 20px;
  1344. }
  1345. .comment-author {
  1346. position: relative;
  1347. }
  1348. .comment-author .avatar-container {
  1349. border-radius: 70px;
  1350. display: block;
  1351. float: left;
  1352. height: 80px;
  1353. left: -100px;
  1354. overflow: hidden;
  1355. position: absolute;
  1356. width: 80px;
  1357. }
  1358. .children .comment-author .avatar-container {
  1359. height: 60px;
  1360. left: -80px;
  1361. width: 60px;
  1362. }
  1363. .no-comments,
  1364. .comment-awaiting-moderation {
  1365. font-style: italic;
  1366. }
  1367. /*--------------------------------------------------------------
  1368. # Widgets
  1369. --------------------------------------------------------------*/
  1370. .widget {
  1371. padding-bottom: 3em;
  1372. }
  1373. #secondary .widget,
  1374. #colophon .widget {
  1375. font-size: 90%;
  1376. }
  1377. h2.widget-title {
  1378. font-size: 18px;
  1379. font-size: 1.125rem;
  1380. }
  1381. .widget-title a {
  1382. color: inherit;
  1383. }
  1384. /* widget forms */
  1385. .widget input:not([type="button"], [type="submit"], [type="reset"]),
  1386. .widget select,
  1387. .widget textarea {
  1388. width: 100%;
  1389. }
  1390. /* widget lists */
  1391. .widget ul {
  1392. list-style: none;
  1393. margin: 0;
  1394. }
  1395. .widget ul li {
  1396. border-bottom: 1px solid #ddd;
  1397. border-top: 1px solid #ddd;
  1398. padding: 0.5em 0;
  1399. }
  1400. .widget ul li + li {
  1401. margin-top: -1px;
  1402. }
  1403. .widget ul li ul {
  1404. padding: 0;
  1405. position: relative;
  1406. }
  1407. .widget ul li li {
  1408. border: 0;
  1409. padding: 6px 0 6px 1.5rem;
  1410. }
  1411. /* Widget lists of links */
  1412. .widget_top-posts ul li ul,
  1413. .widget_rss_links ul li ul,
  1414. .widget-grofile ul.grofile-links li ul,
  1415. .widget_pages ul li ul,
  1416. .widget_meta ul li ul {
  1417. bottom: 0;
  1418. }
  1419. .widget_nav_menu ul li li,
  1420. .widget_top-posts ul li,
  1421. .widget_top-posts ul li li,
  1422. .widget_rss_links ul li,
  1423. .widget_rss_links ul li li,
  1424. .widget-grofile ul.grofile-links li,
  1425. .widget-grofile ul.grofile-links li li {
  1426. padding-bottom: 0;
  1427. }
  1428. /* Widget markup */
  1429. .widget .post-date,
  1430. .widget .rss-date {
  1431. font-size: .81em;
  1432. }
  1433. /* Text Widget */
  1434. .widget_text {
  1435. -ms-word-wrap: break-word;
  1436. word-wrap: break-word;
  1437. }
  1438. /* Archives, Categories, Menu, Pages, Recent Comments, Recent Posts */
  1439. .widget .rss-date {
  1440. display: block;
  1441. }
  1442. /* Contact Info Widget */
  1443. .widget_contact_info .contact-map {
  1444. margin-bottom: 0.5em;
  1445. }
  1446. /* Goodreads */
  1447. .widget_goodreads div[class^="gr_custom_container"] {
  1448. background: transparent;
  1449. border: 0;
  1450. padding: 0;
  1451. }
  1452. .widget_goodreads div[class^="gr_custom_each_container"] {
  1453. border-bottom: 0;
  1454. }
  1455. .widget_goodreads div[class^="gr_custom_each_container"] a {
  1456. color: inherit;
  1457. }
  1458. .widget_goodreads div[class^="gr_custom_author"] {
  1459. font-size: 12px;
  1460. font-size: 0.75rem;
  1461. letter-spacing: 0.05em;
  1462. text-transform: uppercase;
  1463. }
  1464. /* Gravatar */
  1465. .widget-grofile h4 {
  1466. font-size: 16px;
  1467. font-size: 1rem;
  1468. margin-bottom: 0;
  1469. }
  1470. /* Recent Comments */
  1471. .widget_recent_comments table,
  1472. .widget_recent_comments th,
  1473. .widget_recent_comments td {
  1474. border: 0;
  1475. }
  1476. /* Recent Posts widget */
  1477. .widget_recent_entries .post-date {
  1478. display: block;
  1479. }
  1480. /* RSS Widget */
  1481. .widget_rss ul li {
  1482. padding: 1em 0;
  1483. }
  1484. /* Search Widget */
  1485. .search-form {
  1486. position: relative;
  1487. }
  1488. .search-form input[type="search"] {
  1489. display: block;
  1490. padding: 8px;
  1491. width: 100%;
  1492. }
  1493. .search-form .search-submit {
  1494. position: absolute;
  1495. right: 0;
  1496. top: 0;
  1497. }
  1498. /* Social Icons widget */
  1499. .widget_wpcom_social_media_icons_widget ul li {
  1500. border: 0;
  1501. }
  1502. .widget_wpcom_social_media_icons_widget ul li a {
  1503. -webkit-transition: opacity 0.3s;
  1504. transition: opacity 0.3s;
  1505. }
  1506. .widget_wpcom_social_media_icons_widget ul li a:hover,
  1507. .widget_wpcom_social_media_icons_widget ul li a:focus {
  1508. opacity: 0.7;
  1509. }
  1510. /* Tag and Category Cloud widgets */
  1511. .tagcloud,
  1512. .widget_tag_cloud,
  1513. .wp_widget_tag_cloud {
  1514. line-height: 1.5;
  1515. }
  1516. .widget .tagcloud a,
  1517. .widget .tagcloud a:visited,
  1518. .widget.widget_tag_cloud a,
  1519. .widget.widget_tag_cloud a:visited,
  1520. .wp_widget_tag_cloud a,
  1521. .wp_widget_tag_cloud a:visited {
  1522. border: 1px solid #ddd;
  1523. display: inline-block;
  1524. float: left;
  1525. font-size: 1rem !important; /* !important to overwrite inline styles */
  1526. margin: 4px 4px 0 0 !important;
  1527. padding: 4px 10px 5px !important;
  1528. position: relative;
  1529. -webkit-transition: border-color 0.2s;
  1530. transition: border-color 0.2s;
  1531. width: auto;
  1532. -ms-word-wrap: break-word;
  1533. word-wrap: break-word;
  1534. z-index: 0;
  1535. }
  1536. .widget .tagcloud a:hover,
  1537. .widget .tagcloud a:focus,
  1538. .widget.widget_tag_cloud a:hover,
  1539. .widget.widget_tag_cloud a:focus,
  1540. .wp_widget_tag_cloud a:hover,
  1541. .wp_widget_tag_cloud a:focus {
  1542. border-color: #ccc;
  1543. text-decoration: none;
  1544. }
  1545. /* Calendar widget */
  1546. .widget_calendar th,
  1547. .widget_calendar td {
  1548. text-align: center;
  1549. }
  1550. .widget_calendar tfoot td {
  1551. border: 0;
  1552. }
  1553. /*--------------------------------------------------------------
  1554. # Footer
  1555. --------------------------------------------------------------*/
  1556. .footer-image {
  1557. background-position: center center;
  1558. background-size: cover;
  1559. padding-top: 50%;
  1560. position: relative;
  1561. }
  1562. .lodestar-customizer .footer-image:not(.has-footer-image) {
  1563. padding-top: 0;
  1564. }
  1565. .footer-image::before {
  1566. position: absolute;
  1567. /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.25+100 */
  1568. background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.25) 100%); /* FF3.6-15 */
  1569. background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.25) 100%); /* Chrome10-25,Safari5.1-6 */
  1570. background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.25) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  1571. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#40000000',GradientType=0 ); /* IE6-9 */
  1572. content: "";
  1573. top: 0;
  1574. bottom: 0;
  1575. left: 0;
  1576. right: 0;
  1577. }
  1578. /* Social nav */
  1579. .jetpack-social-navigation {
  1580. background: #fff;
  1581. border-top: 1px solid #eee;
  1582. padding: 20px 0;
  1583. text-align: center;
  1584. }
  1585. .site-footer .jetpack-social-navigation ul {
  1586. margin-bottom: 0;
  1587. }
  1588. .site-footer .jetpack-social-navigation a {
  1589. background: #ccc;
  1590. border-radius: 40px;
  1591. color: #fff;
  1592. display: inline-block;
  1593. height: 35px;
  1594. line-height: 35px;
  1595. margin: 0 5px;
  1596. position: relative;
  1597. transition: background 0.2s;
  1598. width: 35px;
  1599. }
  1600. .site-footer .jetpack-social-navigation a:hover,
  1601. .site-footer .jetpack-social-navigation a:focus {
  1602. background: #bbb;
  1603. }
  1604. .site-footer .jetpack-social-navigation .icon {
  1605. height: 16px;
  1606. left: 50%;
  1607. margin-left: -8px;
  1608. margin-top: -8px;
  1609. position: absolute;
  1610. top: 50%;
  1611. width: 16px;
  1612. }
  1613. /* Footer widgets */
  1614. .site-footer .widget-area {
  1615. background-color: #eee;
  1616. padding-bottom: 2em;
  1617. padding-top: 4em;
  1618. }
  1619. /* Site info */
  1620. .site-info {
  1621. background-color: #222;
  1622. color: #fff;
  1623. letter-spacing: 0.05em;
  1624. text-align: center;
  1625. text-transform: uppercase;
  1626. }
  1627. .site-info .wrap {
  1628. padding-bottom: 1.5em;
  1629. padding-top: 1.5em;
  1630. }
  1631. .site-info a,
  1632. .site-info:visited {
  1633. color: #fff;
  1634. text-decoration: none;
  1635. }
  1636. .site-info .wrap .sep {
  1637. margin: 0;
  1638. display: block;
  1639. visibility: hidden;
  1640. height: 0;
  1641. width: 100%;
  1642. }
  1643. /*--------------------------------------------------------------
  1644. # Infinite scroll
  1645. --------------------------------------------------------------*/
  1646. #infinite-handle {
  1647. clear: both;
  1648. padding: 0 0 4em;
  1649. text-align: center;
  1650. }
  1651. .portfolio-projects #infinite-handle {
  1652. padding: 2em 0;
  1653. }
  1654. #infinite-handle span {
  1655. background: transparent;
  1656. border-radius: 0;
  1657. font-size: inherit;
  1658. padding: 0;
  1659. }
  1660. .infinite-loader {
  1661. clear: both;
  1662. padding: 2.5em 0 4em;
  1663. }
  1664. .portfolio-projects .infinite-loader {
  1665. padding: 3em 0 2em;
  1666. }
  1667. .infinite-loader .spinner {
  1668. left: 50% !important; /* !important to override inline styles */
  1669. margin-left: -9px;
  1670. top: 0 !important; /* !important to override inline styles */
  1671. }
  1672. /* Globally hidden elements when Infinite Scroll is supported and in use. */
  1673. .infinite-scroll .posts-navigation,
  1674. .infinite-scroll.neverending .site-footer {
  1675. /* Theme Footer (when set to scrolling) */
  1676. display: none;
  1677. }
  1678. /* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */
  1679. .infinity-end.neverending .site-footer {
  1680. display: block;
  1681. }
  1682. #infinite-footer .container {
  1683. max-width: 100%;
  1684. }
  1685. /*--------------------------------------------------------------
  1686. # Jetpack Contact Forms
  1687. --------------------------------------------------------------*/
  1688. .site-content .contact-form input[type="radio"],
  1689. .site-content .contact-form input[type="checkbox"] {
  1690. margin-bottom: 6px;
  1691. margin-right: .3em;
  1692. vertical-align: middle;
  1693. }
  1694. .site-content .contact-form label.checkbox,
  1695. .site-content .contact-form label.checkbox-multiple,
  1696. .site-content .contact-form label.radio {
  1697. font-weight: normal;
  1698. font-style: normal;
  1699. margin-bottom: .4375em;
  1700. float: none;
  1701. }
  1702. .site-content .contact-form label.checkbox,
  1703. .site-content .contact-form > div {
  1704. margin-bottom: .875em;
  1705. }
  1706. .site-content .contact-form textarea,
  1707. .site-content .contact-form input[type='text'],
  1708. .site-content .contact-form input[type='email'],
  1709. .site-content .contact-form input[type='url'],
  1710. .site-content .contact-form select {
  1711. margin-bottom: .4375em;
  1712. max-width: 100%;
  1713. }
  1714. .site-content .contact-form .grunion-field-label {
  1715. margin-bottom: .21875em;
  1716. width: 100%;
  1717. }
  1718. .site-content .contact-form .grunion-field-label.textarea {
  1719. width: 100%;
  1720. }
  1721. /*--------------------------------------------------------------
  1722. # WP.com-specific
  1723. --------------------------------------------------------------*/
  1724. /* Post Flair */
  1725. .entry-content div.sharedaddy h3,
  1726. .entry-content div.sharedaddy h3.sd-title,
  1727. .entry-content div#jp-relatedposts h3.jp-relatedposts-headline {
  1728. color: #666;
  1729. font-family: "Karla", "Helvetica Neue", helvetica, arial, sans-serif;
  1730. font-weight: normal;
  1731. font-size: 14px;
  1732. font-size: 0.85rem;
  1733. letter-spacing: 0.08em;
  1734. text-transform: uppercase;
  1735. }
  1736. .entry-content div#jp-relatedposts h3.jp-relatedposts-headline em {
  1737. font-weight: normal;
  1738. }
  1739. .sd-rating + .sd-sharing-enabled {
  1740. padding-top: 1em;
  1741. margin: 1em 0;
  1742. }
  1743. .jp-relatedposts-post-img {
  1744. margin-bottom: 0.5em;
  1745. }
  1746. #wpstats {
  1747. display: none;
  1748. }
  1749. /*--------------------------------------------------------------
  1750. # Media
  1751. --------------------------------------------------------------*/
  1752. img {
  1753. height: auto; /* Make sure images are scaled correctly. */
  1754. max-width: 100%; /* Adhere to container width. */
  1755. }
  1756. .page-content .wp-smiley,
  1757. .entry-content .wp-smiley,
  1758. .comment-content .wp-smiley {
  1759. border: none;
  1760. margin-bottom: 0;
  1761. margin-top: 0;
  1762. padding: 0;
  1763. }
  1764. /* Make sure embeds and iframes fit their containers. */
  1765. embed,
  1766. iframe,
  1767. object {
  1768. margin-bottom: 1.5em;
  1769. max-width: 100%;
  1770. }
  1771. .wp-caption {
  1772. margin-bottom: 1.5em;
  1773. max-width: 100%;
  1774. }
  1775. .wp-caption img[class*="wp-image-"] {
  1776. display: block;
  1777. margin-left: auto;
  1778. margin-right: auto;
  1779. }
  1780. .wp-caption .wp-caption-text {
  1781. margin: 0.8075em 0;
  1782. }
  1783. .wp-caption-text {
  1784. text-align: center;
  1785. }
  1786. /*--------------------------------------------------------------
  1787. ## Galleries
  1788. --------------------------------------------------------------*/
  1789. .gallery {
  1790. margin-bottom: 1.5em;
  1791. }
  1792. .gallery-item {
  1793. display: inline-block;
  1794. text-align: center;
  1795. vertical-align: top;
  1796. width: 100%;
  1797. }
  1798. .gallery-columns-1 .gallery-item {
  1799. padding-bottom: 1em;
  1800. }
  1801. .gallery-columns-2 .gallery-item {
  1802. max-width: 50%;
  1803. padding: 0 0.5em 1em;
  1804. }
  1805. .gallery-columns-3 .gallery-item {
  1806. max-width: 33.33%;
  1807. padding: 0 0.5em 1em;
  1808. }
  1809. .gallery-columns-4 .gallery-item {
  1810. max-width: 25%;
  1811. padding: 0 0.5em 1em;
  1812. }
  1813. .gallery-columns-5 .gallery-item {
  1814. max-width: 20%;
  1815. padding: 0 0.5em 1em;
  1816. }
  1817. .gallery-columns-6 .gallery-item {
  1818. max-width: 16.66%;
  1819. padding: 0 0.5em 1em;
  1820. }
  1821. .gallery-columns-7 .gallery-item {
  1822. max-width: 14.28%;
  1823. padding: 0 0.25em 1em;
  1824. }
  1825. .gallery-columns-8 .gallery-item {
  1826. max-width: 12.5%;
  1827. padding: 0 0.25em 1em;
  1828. }
  1829. .gallery-columns-9 .gallery-item {
  1830. max-width: 11.11%;
  1831. padding: 0 0.25em 1em;
  1832. }
  1833. .gallery-columns-2,
  1834. .gallery-columns-3,
  1835. .gallery-columns-4,
  1836. .gallery-columns-5,
  1837. .gallery-columns-6 {
  1838. margin-left: -0.5em;
  1839. margin-right: -0.5em;
  1840. }
  1841. .gallery-columns-7,
  1842. .gallery-columns-8,
  1843. .gallery-columns-9 {
  1844. margin-left: -0.25em;
  1845. margin-right: -0.25em;
  1846. }
  1847. .gallery-caption {
  1848. display: block;
  1849. font-size: 0.9;
  1850. }
  1851. /*--------------------------------------------------------------
  1852. # Customizer
  1853. --------------------------------------------------------------*/
  1854. /* Hide this until we're in the Customizer */
  1855. .lodestar-panel-title {
  1856. display: none;
  1857. }
  1858. .lodestar-customizer.lodestar-front-page .lodestar-panel {
  1859. /* Colour-code all panels (add 1 to account for #lodestar-hero, so 2 is actually panel 1)*/
  1860. }
  1861. .lodestar-customizer.lodestar-front-page .lodestar-panel::after {
  1862. border: 2px dashed;
  1863. bottom: 1em;
  1864. content: '';
  1865. display: block;
  1866. left: 1em;
  1867. position: absolute;
  1868. right: 1em;
  1869. top: 1em;
  1870. }
  1871. .lodestar-customizer.lodestar-front-page .lodestar-panel .lodestar-panel-title {
  1872. color: #fff;
  1873. display: inline-block;
  1874. font-size: 14px;
  1875. font-size: 0.875rem;
  1876. font-weight: bold;
  1877. letter-spacing: 1px;
  1878. padding: 5px 10px;
  1879. position: absolute;
  1880. right: 3.2em;
  1881. text-transform: uppercase;
  1882. top: 3.2em;
  1883. transform: translate(3px, -3px);
  1884. z-index: 3;
  1885. }
  1886. .lodestar-customizer.lodestar-front-page .lodestar-panel:nth-of-type(1) .lodestar-panel-title {
  1887. background: #a64b55;
  1888. }
  1889. .lodestar-customizer.lodestar-front-page .lodestar-panel:nth-of-type(1)::after {
  1890. border-color: #a64b55;
  1891. color: #a64b55;
  1892. }
  1893. .lodestar-customizer.lodestar-front-page .lodestar-panel:nth-of-type(2) .lodestar-panel-title {
  1894. background: #b569a2;
  1895. }
  1896. .lodestar-customizer.lodestar-front-page .lodestar-panel:nth-of-type(2)::after {
  1897. border-color: #b569a2;
  1898. color: #b569a2;
  1899. }
  1900. .lodestar-customizer.lodestar-front-page .lodestar-panel:nth-of-type(3) .lodestar-panel-title {
  1901. background: #8f68bd;
  1902. }
  1903. .lodestar-customizer.lodestar-front-page .lodestar-panel:nth-of-type(3)::after {
  1904. border-color: #8f68bd;
  1905. color: #8f68bd;
  1906. }
  1907. .lodestar-customizer.lodestar-front-page .lodestar-panel:nth-of-type(4) .lodestar-panel-title {
  1908. background: #575ebd;
  1909. }
  1910. .lodestar-customizer.lodestar-front-page .lodestar-panel:nth-of-type(4)::after {
  1911. border-color: #575ebd;
  1912. color: #575ebd;
  1913. }
  1914. .lodestar-customizer.lodestar-front-page .lodestar-panel.footer-image .lodestar-panel-title {
  1915. background: #55a1bd;
  1916. }
  1917. .lodestar-customizer.lodestar-front-page .lodestar-panel.footer-image::after {
  1918. border-color: #55a1bd;
  1919. color: #55a1bd;
  1920. }
  1921. /* Add a highlight class to improve Customizer behaviour */
  1922. @-webkit-keyframes flash {
  1923. 0%,
  1924. 20%,
  1925. 40%,
  1926. 60%,
  1927. 80%,
  1928. 100% {
  1929. opacity: 1;
  1930. }
  1931. 10%,
  1932. 30%,
  1933. 50%,
  1934. 70%,
  1935. 90% {
  1936. opacity: 0;
  1937. }
  1938. }
  1939. @keyframes flash {
  1940. 0%,
  1941. 20%,
  1942. 40%,
  1943. 60%,
  1944. 80%,
  1945. 100% {
  1946. opacity: 1;
  1947. }
  1948. 10%,
  1949. 30%,
  1950. 50%,
  1951. 70%,
  1952. 90% {
  1953. opacity: 0;
  1954. }
  1955. }
  1956. .label-placeholder {
  1957. clip: rect(1px, 1px, 1px, 1px);
  1958. }
  1959. .lodestar-front-page.lodestar-customizer #primary article.panel-placeholder {
  1960. border: 0;
  1961. }
  1962. .lodestar-customizer .label-placeholder.lodestar-highlight {
  1963. clip: auto;
  1964. display: block;
  1965. height: 112px;
  1966. }
  1967. .lodestar-highlight::after {
  1968. -webkit-animation-duration: 2s;
  1969. animation-duration: 2s;
  1970. -webkit-animation-name: flash;
  1971. animation-name: flash;
  1972. -webkit-animation-timing-function: ease-in-out;
  1973. animation-timing-function: ease-in-out;
  1974. -webkit-animation-fill-mode: both;
  1975. animation-fill-mode: both;
  1976. }
  1977. /*--------------------------------------------------------------
  1978. ## Media Queries
  1979. --------------------------------------------------------------*/
  1980. @media screen and (min-width: 30em) {
  1981. .site-top-content span.site-top-content-2 {
  1982. display: inline;
  1983. margin-left: 1.5em;
  1984. }
  1985. .custom-header-image {
  1986. padding: 20%;
  1987. }
  1988. }
  1989. @media screen and (min-width: 60em) {
  1990. /* Typography */
  1991. h1 {
  1992. font-size: 34px;
  1993. font-size: 2.125rem;
  1994. }
  1995. h2 {
  1996. font-size: 28px;
  1997. font-size: 1.75rem;
  1998. }
  1999. h3 {
  2000. font-size: 24px;
  2001. font-size: 1.5rem;
  2002. }
  2003. h4 {
  2004. font-size: 20px;
  2005. font-size: 1.25rem;
  2006. }
  2007. h5 {
  2008. font-size: 16px;
  2009. font-size: 1rem;
  2010. }
  2011. h6 {
  2012. font-size: 14px;
  2013. font-size: 0.875rem;
  2014. }
  2015. /* Layout */
  2016. body:not(.lodestar-front-page) #primary {
  2017. margin: auto;
  2018. max-width: 700px;
  2019. width: 64%;
  2020. }
  2021. .has-sidebar #primary {
  2022. float: left;
  2023. }
  2024. .has-sidebar #secondary {
  2025. float: right;
  2026. width: 30%;
  2027. }
  2028. .error404 #primary {
  2029. float: none;
  2030. }
  2031. /* Site branding */
  2032. .header-top .wrap {
  2033. padding: 1em;
  2034. }
  2035. .site-header-fixed.header-top .wrap,
  2036. .site-header-hidden.header-top .wrap {
  2037. padding-bottom: 0.25em;
  2038. padding-top: 0.25em;
  2039. }
  2040. .custom-header-image {
  2041. height: 750px;
  2042. height: 75vh;
  2043. height: calc(75vh - 85px);
  2044. margin-top: 85px;
  2045. }
  2046. .no-header-image .custom-header-image {
  2047. min-height: 20vh;
  2048. }
  2049. .site-branding {
  2050. display: flex;
  2051. align-items: center;
  2052. justify-content: center;
  2053. height: 100%;
  2054. }
  2055. .site-branding .wrap {
  2056. margin-left: 0;
  2057. margin-right: 0;
  2058. }
  2059. .site-title {
  2060. font-size: 60px;
  2061. font-size: 3.75rem;
  2062. }
  2063. .site-description {
  2064. font-size: 24px;
  2065. font-size: 1.5rem;
  2066. }
  2067. .site-logo-link img {
  2068. max-height: 200px;
  2069. }
  2070. /* Header */
  2071. .header-top {
  2072. left: 0;
  2073. position: absolute;
  2074. top: 0;
  2075. width: 100%;
  2076. z-index: 3;
  2077. transition: transform 0.2s;
  2078. }
  2079. .site-header-fixed.header-top,
  2080. .site-header-hidden.header-top {
  2081. position: fixed;
  2082. top: 0;
  2083. width: 100%;
  2084. z-index: 1999;
  2085. }
  2086. .site-header-fixed.header-top {
  2087. -webkit-animation: header-down 0.2s ease-in;
  2088. animation: header-down 0.2s ease-in;
  2089. -webkit-transform: translate(0);
  2090. transform: translate(0);
  2091. }
  2092. .site-header-hidden.header-top {
  2093. -webkit-animation: header-up 0.5s ease-in;
  2094. animation: header-up 0.5s ease-in;
  2095. -webkit-transform: translate(-100%);
  2096. transform: translate(-100%);
  2097. }
  2098. .admin-bar .site-header-fixed.header-top {
  2099. top: 32px;
  2100. }
  2101. @-webkit-keyframes header-down {
  2102. from {
  2103. -webkit-transform: translate(0, -100%);
  2104. }
  2105. to {
  2106. -webkit-transform: translate(0);
  2107. }
  2108. }
  2109. @keyframes header-down {
  2110. from {
  2111. transform: translate(0, -100%);
  2112. }
  2113. to {
  2114. transform: translate(0);
  2115. }
  2116. }
  2117. @-webkit-keyframes header-up {
  2118. from {
  2119. -webkit-transform: translate(0);
  2120. }
  2121. to {
  2122. -webkit-transform: translate(0, -100%);
  2123. }
  2124. }
  2125. @keyframes header-up {
  2126. from {
  2127. transform: translate(0);
  2128. }
  2129. to {
  2130. transform: translate(0, -100%);
  2131. }
  2132. }
  2133. /* Front Page */
  2134. .lodestar-front-page .custom-header {
  2135. margin-top: 0 !important; /* Override styles added with JavaScript */
  2136. }
  2137. .lodestar-front-page .custom-header-image {
  2138. height: 1200px;
  2139. height: 100vh;
  2140. height: calc( 100vh - 85px );
  2141. max-height: 100%;
  2142. }
  2143. .lodestar-intro {
  2144. padding: 4em 0;
  2145. }
  2146. .lodestar-intro .entry-content {
  2147. font-size: 30px;
  2148. font-size: 1.875rem;
  2149. }
  2150. .panel-content .wrap {
  2151. padding-bottom: 6.5em;
  2152. padding-top: 6.5em;
  2153. }
  2154. .panel-image {
  2155. height: 100vh;
  2156. max-height: 1200px;
  2157. }
  2158. /* One Column */
  2159. .one-column .wrap {
  2160. padding-left: 1em;
  2161. padding-right: 1em;
  2162. }
  2163. .one-column .panel-content .entry-content {
  2164. padding-left: 15%;
  2165. padding-right: 15%;
  2166. }
  2167. .one-column .panel-content .wrap h1,
  2168. .one-column .panel-content .wrap h2,
  2169. .one-column .panel-content .wrap h3,
  2170. .one-column .panel-content .wrap h4,
  2171. .one-column .panel-content .wrap h5,
  2172. .one-column .panel-content .wrap h6 {
  2173. padding-top: 1.5em;
  2174. text-align: center;
  2175. }
  2176. .one-column .panel-content .wrap h1:first-child,
  2177. .one-column .panel-content .wrap h2:first-child,
  2178. .one-column .panel-content .wrap h3:first-child,
  2179. .one-column .panel-content .wrap h4:first-child,
  2180. .one-column .panel-content .wrap h5:first-child,
  2181. .one-column .panel-content .wrap h6:first-child {
  2182. padding-top: 0;
  2183. }
  2184. .one-column.has-post-thumbnail .panel-content .wrap {
  2185. margin-top: -6.5em;
  2186. }
  2187. /* Two Column */
  2188. .two-column .panel-content .entry-content {
  2189. -webkit-column-count: 2;
  2190. -moz-column-count: 2;
  2191. column-count: 2;
  2192. -webkit-column-gap: 2em;
  2193. -moz-column-gap: 2em;
  2194. column-gap: 2em;
  2195. }
  2196. .two-column .panel-content .entry-content .jetpack-video-wrapper {
  2197. display: inline-block;
  2198. }
  2199. /* Testimonials on front page */
  2200. .one-column .panel-content .testimonials .entry-content {
  2201. padding-left: 0;
  2202. padding-right: 0;
  2203. }
  2204. .panel-content .testimonials .jetpack-testimonial {
  2205. float: left;
  2206. width: 47.5%;
  2207. }
  2208. .panel-content .testimonials .jetpack-testimonial:first-child {
  2209. margin-right: 5%;
  2210. }
  2211. .two-column .panel-content .jetpack-testimonial .entry-content {
  2212. -webkit-column-count: 1;
  2213. -moz-column-count: 1;
  2214. column-count: 1;
  2215. -webkit-column-gap: 0;
  2216. -moz-column-gap: 0;
  2217. column-gap: 0;
  2218. }
  2219. /* Prevent media from being split between the columns */
  2220. .two-column .panel-content .entry-content .wp-block-image,
  2221. .two-column .panel-content .entry-content .wp-block-gallery,
  2222. .two-column .panel-content .entry-content .wp-block-embed {
  2223. -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
  2224. page-break-inside: avoid; /* Firefox */
  2225. break-inside: avoid; /* IE 10+ */
  2226. }
  2227. /* Blog Posts on front page */
  2228. .one-column .panel-content .recent-posts .entry-content {
  2229. padding-left: 0;
  2230. padding-right: 0;
  2231. }
  2232. .lodestar-panel .panel-content .recent-posts .post {
  2233. float: left;
  2234. padding-bottom: inherit;
  2235. width: 47.5%;
  2236. }
  2237. .panel-content .recent-posts .entry-title {
  2238. text-align: left;
  2239. }
  2240. .panel-content .recent-posts .post:first-child {
  2241. margin-right: 5%;
  2242. }
  2243. .two-column .panel-content .post .entry-content {
  2244. -webkit-column-count: 1;
  2245. -moz-column-count: 1;
  2246. column-count: 1;
  2247. -webkit-column-gap: 0;
  2248. -moz-column-gap: 0;
  2249. column-gap: 0;
  2250. }
  2251. /* Main Navigation */
  2252. .menu-toggle {
  2253. display: none;
  2254. }
  2255. .main-navigation {
  2256. width: auto;
  2257. }
  2258. .main-navigation ul {
  2259. background: transparent;
  2260. display: block;
  2261. padding: 0;
  2262. }
  2263. .main-navigation ul.nav-menu {
  2264. margin-bottom: 0;
  2265. padding: 0;
  2266. text-align: left;
  2267. }
  2268. .main-navigation li {
  2269. display: inline-block;
  2270. position: relative;
  2271. }
  2272. .main-navigation li li {
  2273. display: block;
  2274. }
  2275. .main-navigation a {
  2276. padding: 1em 1.25em;
  2277. }
  2278. .site-header-fixed.header-top .main-navigation a,
  2279. .site-header-hidden.header-top .main-navigation a {
  2280. padding-bottom: 0.75em;
  2281. padding-top: 0.75em;
  2282. }
  2283. .main-navigation a:hover,
  2284. .main-navigation a:focus {
  2285. color: #fff;
  2286. }
  2287. .main-navigation li:hover,
  2288. .main-navigation li:focus,
  2289. .main-navigation a:hover,
  2290. .main-navigation a:focus {
  2291. background: #151515;
  2292. }
  2293. .main-navigation ul ul {
  2294. padding: 0.5em 0;
  2295. position: absolute;
  2296. top: 100%;
  2297. left: -999em;
  2298. z-index: 99999;
  2299. }
  2300. .main-navigation ul ul ul {
  2301. left: -999em;
  2302. margin-top: -0.5em;
  2303. top: 0;
  2304. }
  2305. .main-navigation ul ul,
  2306. .main-navigation ul ul ul ul,
  2307. .main-navigation ul ul ul ul ul ul,
  2308. .main-navigation ul ul ul ul ul ul ul ul,
  2309. .main-navigation ul ul ul ul ul ul ul ul ul ul,
  2310. .main-navigation ul ul ul a:hover,
  2311. .main-navigation ul ul ul a:focus,
  2312. .main-navigation ul ul ul li:hover,
  2313. .main-navigation ul ul ul li:focus,
  2314. .main-navigation ul ul ul ul ul a:hover,
  2315. .main-navigation ul ul ul ul ul a:focus,
  2316. .main-navigation ul ul ul ul ul li:hover,
  2317. .main-navigation ul ul ul ul ul li:focus,
  2318. .main-navigation ul ul ul ul ul ul ul a:hover,
  2319. .main-navigation ul ul ul ul ul ul ul a:focus,
  2320. .main-navigation ul ul ul ul ul ul ul li:hover,
  2321. .main-navigation ul ul ul ul ul ul ul li:focus,
  2322. .main-navigation ul ul ul ul ul ul ul ul ul a:hover,
  2323. .main-navigation ul ul ul ul ul ul ul ul ul a:focus,
  2324. .main-navigation ul ul ul ul ul ul ul ul ul li:hover,
  2325. .main-navigation ul ul ul ul ul ul ul ul ul li:focus,
  2326. .main-navigation ul ul ul ul ul ul ul ul ul ul ul a:hover,
  2327. .main-navigation ul ul ul ul ul ul ul ul ul ul ul a:focus,
  2328. .main-navigation ul ul ul ul ul ul ul ul ul ul ul li:hover,
  2329. .main-navigation ul ul ul ul ul ul ul ul ul ul ul li:focus {
  2330. background: #151515;
  2331. }
  2332. .main-navigation ul ul ul,
  2333. .main-navigation ul ul ul ul ul,
  2334. .main-navigation ul ul ul ul ul ul ul,
  2335. .main-navigation ul ul ul ul ul ul ul ul ul,
  2336. .main-navigation ul ul ul ul ul ul ul ul ul ul ul,
  2337. .main-navigation ul ul a:hover,
  2338. .main-navigation ul ul a:focus,
  2339. .main-navigation ul ul li:hover,
  2340. .main-navigation ul ul li:focus,
  2341. .main-navigation ul ul ul ul a:hover,
  2342. .main-navigation ul ul ul ul a:focus,
  2343. .main-navigation ul ul ul ul li:hover,
  2344. .main-navigation ul ul ul ul li:focus,
  2345. .main-navigation ul ul ul ul ul ul a:hover,
  2346. .main-navigation ul ul ul ul ul ul a:focus,
  2347. .main-navigation ul ul ul ul ul ul li:hover,
  2348. .main-navigation ul ul ul ul ul ul li:focus,
  2349. .main-navigation ul ul ul ul ul ul ul ul a:hover,
  2350. .main-navigation ul ul ul ul ul ul ul ul a:focus,
  2351. .main-navigation ul ul ul ul ul ul ul ul li:hover,
  2352. .main-navigation ul ul ul ul ul ul ul ul li:focus,
  2353. .main-navigation ul ul ul ul ul ul ul ul ul ul a:hover,
  2354. .main-navigation ul ul ul ul ul ul ul ul ul ul a:focus,
  2355. .main-navigation ul ul ul ul ul ul ul ul ul ul li:hover,
  2356. .main-navigation ul ul ul ul ul ul ul ul ul ul li:focus {
  2357. background: #29292a;
  2358. }
  2359. .main-navigation ul li.current_page_item > a,
  2360. .main-navigation ul li.current-menu-item > a,
  2361. .main-navigation ul li.current_page_ancestor > a {
  2362. background: #151515;
  2363. }
  2364. .main-navigation ul ul li:hover > ul,
  2365. .main-navigation ul ul li.focus > ul {
  2366. left: 100%;
  2367. }
  2368. .main-navigation ul ul a {
  2369. padding: 0.75em 1.25em;
  2370. width: 250px;
  2371. }
  2372. .main-navigation ul li:hover > ul,
  2373. .main-navigation ul li.focus > ul {
  2374. left: auto;
  2375. }
  2376. .main-navigation .menu-item-has-children > a::after,
  2377. .main-navigation .page_item_has_children > a::after {
  2378. content: "\f431";
  2379. display: inline;
  2380. left: 2px;
  2381. position: relative;
  2382. top: -2px;
  2383. }
  2384. .main-navigation ul ul .menu-item-has-children > a::after,
  2385. .main-navigation ul ul .page_item_has_children > a::after {
  2386. margin-top: -10px;
  2387. left: auto;
  2388. position: absolute;
  2389. right: 1.0em;
  2390. top: 50%;
  2391. -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
  2392. -ms-transform: rotate(-90deg); /* IE 9 */
  2393. transform: rotate(-90deg);
  2394. }
  2395. .header-top .wrap {
  2396. display: table;
  2397. width: 100%;
  2398. }
  2399. .site-top-content,
  2400. .main-navigation {
  2401. display: table-cell;
  2402. }
  2403. .site-top-content {
  2404. display: none;
  2405. }
  2406. .has-top-content .site-top-content {
  2407. display: table-cell;
  2408. }
  2409. .has-top-content .main-navigation {
  2410. width: 65%;
  2411. }
  2412. .has-top-content .site-top-content,
  2413. .has-top-content .main-navigation + .site-top-content {
  2414. width: 35%;
  2415. padding: 1em 0 1em 2em;
  2416. text-align: right;
  2417. }
  2418. .site-header-fixed .site-top-content,
  2419. .site-header-hidden .site-top-content,
  2420. .site-header-fixed .main-navigation + .site-top-content,
  2421. .site-header-hidden .main-navigation + .site-top-content {
  2422. padding-bottom: 1em;
  2423. padding-top: 1em;
  2424. }
  2425. /* Posts */
  2426. .site-content {
  2427. padding: 4.5em 0 0;
  2428. }
  2429. .comment-navigation .nav-previous,
  2430. .posts-navigation .nav-previous,
  2431. .post-navigation .nav-previous {
  2432. float: left;
  2433. width: 50%;
  2434. }
  2435. .comment-navigation .nav-next,
  2436. .posts-navigation .nav-next,
  2437. .post-navigation .nav-next {
  2438. float: right;
  2439. text-align: right;
  2440. width: 50%;
  2441. }
  2442. .nav-next,
  2443. .post-navigation .nav-next {
  2444. margin-top: 0;
  2445. }
  2446. .comment-list .children {
  2447. margin-left: 30px;
  2448. }
  2449. .comment-meta {
  2450. border-bottom: 1px solid #ddd;
  2451. padding-bottom: 0.5em;
  2452. margin-bottom: 0.5em;
  2453. }
  2454. .comment-author {
  2455. float: left;
  2456. }
  2457. .comment-metadata {
  2458. float: right;
  2459. }
  2460. .comment-metadata .edit-link::before,
  2461. .pingback .edit-link::before {
  2462. content: "\2022";
  2463. display: inline-block;
  2464. margin: 0 0.5em;
  2465. }
  2466. /* Blog, archive, search */
  2467. .blog .post,
  2468. .archive:not(.woocommerce-active) .post,
  2469. .search .post,
  2470. .search .page {
  2471. padding-bottom: 5em;
  2472. }
  2473. /* Portfolio */
  2474. body.post-type-archive-jetpack-portfolio #primary,
  2475. body.tax-jetpack-portfolio-type #primary,
  2476. body.tax-jetpack-portfolio-tag #primary,
  2477. body.page-template-portfolio-page:not(.lodestar-front-page) #primary {
  2478. float: none;
  2479. max-width: 1200px;
  2480. width: auto;
  2481. }
  2482. .post-type-archive-jetpack-portfolio .entry-header,
  2483. .tax-jetpack-portfolio-type .entry-header,
  2484. .tax-jetpack-portfolio-tag .entry-header,
  2485. .page-template-portfolio-page:not(.lodestar-front-page) .entry-header,
  2486. .portfolio-content,
  2487. .page-template-portfolio-page:not(.lodestar-front-page) .entry-content,
  2488. .project-terms {
  2489. text-align: center;
  2490. }
  2491. .portfolio-projects article {
  2492. background: #111;
  2493. float: left;
  2494. height: 0;
  2495. margin: 0 10px 20px;
  2496. overflow: hidden;
  2497. padding-top: 28.6%;
  2498. position: relative;
  2499. width: 48%;
  2500. width: calc( 50% - 20px );
  2501. }
  2502. .portfolio-projects article.hide {
  2503. display: none;
  2504. }
  2505. .portfolio-wrapper {
  2506. margin: 0 -10px;
  2507. }
  2508. .portfolio-projects .post-thumbnail {
  2509. bottom: 0;
  2510. left: 0;
  2511. position: absolute;
  2512. right: 0;
  2513. top: 0;
  2514. }
  2515. .portfolio-projects .project-archive-content,
  2516. .portfolio-projects .project-archive-content .entry-meta,
  2517. .portfolio-projects .project-archive-content a {
  2518. color: #bbb;
  2519. }
  2520. .portfolio-projects .entry-title a,
  2521. .portfolio-projects .entry-title a:hover,
  2522. .portfolio-projects .entry-title a:focus,
  2523. .portfolio-projects .project-archive-content a:hover,
  2524. .portfolio-projects .project-archive-content a:focus {
  2525. color: #eee;
  2526. }
  2527. .portfolio-projects .project-archive-content {
  2528. bottom: 0;
  2529. display: flex;
  2530. flex-direction: column;
  2531. align-items: center;
  2532. justify-content: center;
  2533. padding: 1.5em;
  2534. position: absolute;
  2535. top: 0;
  2536. vertical-align: middle;
  2537. width: 100%;
  2538. }
  2539. .portfolio-projects article.has-post-thumbnail .project-archive-content {
  2540. opacity: 0;
  2541. }
  2542. .portfolio-projects .project-archive-content .entry-header,
  2543. .portfolio-projects .project-archive-content .entry-meta,
  2544. .portfolio-projects .project-archive-content .entry-footer {
  2545. margin-bottom: 0;
  2546. padding: 0 0 0.5em;
  2547. text-align: center;
  2548. }
  2549. .portfolio-projects .post-thumbnail a:hover img,
  2550. .portfolio-projects .post-thumbnail a:focus img,
  2551. .portfolio-projects article:hover .project-archive-content {
  2552. opacity: 1.0;
  2553. }
  2554. .portfolio-projects article .post-thumbnail {
  2555. background: #333;
  2556. transition: opacity 0.2s;
  2557. }
  2558. .portfolio-projects article:hover .post-thumbnail {
  2559. opacity: 0.15;
  2560. }
  2561. /* Isotope animations */
  2562. .isotope,
  2563. .isotope .isotope-item {
  2564. -webkit-transition-duration: 0.8s;
  2565. -moz-transition-duration: 0.8s;
  2566. -ms-transition-duration: 0.8s;
  2567. -o-transition-duration: 0.8s;
  2568. transition-duration: 0.8s;
  2569. }
  2570. .isotope {
  2571. -webkit-transition-property: height, width;
  2572. -moz-transition-property: height, width;
  2573. -ms-transition-property: height, width;
  2574. -o-transition-property: height, width;
  2575. transition-property: height, width;
  2576. }
  2577. .isotope .isotope-item {
  2578. -webkit-transition-property: -webkit-transform, opacity;
  2579. -moz-transition-property: -moz-transform, opacity;
  2580. -ms-transition-property: -ms-transform, opacity;
  2581. -o-transition-property: -o-transform, opacity;
  2582. transition-property: transform, opacity;
  2583. }
  2584. /* Footer */
  2585. .footer-image {
  2586. height: 100vh;
  2587. padding: 0;
  2588. }
  2589. html:not(.no-background-fixed) .footer {
  2590. background-attachment: fixed;
  2591. }
  2592. .lodestar-customizer .footer-image:not(.has-footer-image) {
  2593. height: 0;
  2594. }
  2595. .site-footer .widget-column {
  2596. float: left;
  2597. margin-right: 5%;
  2598. width: 30%;
  2599. }
  2600. .site-footer .widget-column:last-child {
  2601. margin-right: 0;
  2602. }
  2603. .site-info .wrap {
  2604. padding-bottom: 2.5em;
  2605. padding-top: 2.5em;
  2606. }
  2607. .site-info .wrap .sep {
  2608. margin: 0 0.5em;
  2609. display: inline;
  2610. visibility: visible;
  2611. height: auto;
  2612. width: auto;
  2613. }
  2614. }
  2615. @media screen and ( min-width: 65em ) {
  2616. html:not(.no-background-fixed) .custom-header-image,
  2617. html:not(.no-background-fixed) .lodestar-front-page .custom-header-image,
  2618. html:not(.no-background-fixed) .panel-image {
  2619. background-attachment: fixed;
  2620. }
  2621. }
  2622. @media screen and ( min-width: 70em ) {
  2623. /* Front Page panels */
  2624. .one-column .panel-content .portfolio-projects,
  2625. .one-column .panel-content .testimonials,
  2626. .one-column .panel-content .recent-posts {
  2627. margin-left: -76px;
  2628. margin-right: -76px;
  2629. }
  2630. }
  2631. @media screen and ( max-width: 59.999em ) {
  2632. .custom-header,
  2633. .custom-header-image {
  2634. margin-top: 0 !important; /* !important to override styles added by JavaScript */
  2635. }
  2636. }