html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }

body { margin: 0; }

article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary { display: block; }

audio, canvas, progress, video { display: inline-block; vertical-align: baseline; }

audio:not([controls]) { display: none; height: 0; }

[hidden], template { display: none; }

a { background-color: transparent; }
a:active, a:hover { outline: 0; }

abbr[title] { border-bottom: 1px dotted; }

b, strong { font-weight: bold; }

dfn { font-style: italic; }

h1 { font-size: 2em; margin: 0.67em 0; }

mark { background: #ff0; color: #000; }

small { font-size: 80%; }

sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }

sup { top: -0.5em; }

sub { bottom: -0.25em; }

img { border: 0; }

svg:not(:root) { overflow: hidden; }

figure { margin: 1em 40px; }

hr { box-sizing: content-box; height: 0; }

pre { overflow: auto; }

code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; }

button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; }

button { overflow: visible; }

button, select { text-transform: none; }

button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; }

button[disabled], html input[disabled] { cursor: default; }

button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

input { line-height: normal; }

input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; }

input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; }

input[type="search"] { -webkit-appearance: textfield; }

input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }

legend { border: 0; padding: 0; }

textarea { overflow: auto; }

optgroup { font-weight: bold; }

table { border-collapse: collapse; border-spacing: 0; }

td, th { padding: 0; }

html { height: 100%; max-height: 100%; font-size: 62.5%; -webkit-tap-highlight-color: transparent; overflow-y: scroll; }

body { height: 100%; max-height: 100%; font-family: 'Merriweather', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif; letter-spacing: 0.01rem; font-size: 1.8rem; line-height: 1.75em; color: #3A4145; font-feature-settings: 'kern' 1; text-rendering: geometricPrecision; text-align: center; }

::-moz-selection { background: #D6EDFF; }

::selection { background: #D6EDFF; }

h1, h2, h3, h4, h5, h6 { font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1; color: #2E2E2E; line-height: 1.15em; margin: 0 0 0.7em 0; font-family: 'Open Sans', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif; text-rendering: geometricPrecision; }

h1 { font-size: 3.6rem; letter-spacing: -2px; text-indent: -3px; }

h2 { font-size: 3rem; letter-spacing: -1px; }

h3 { font-size: 2.5rem; }

h4 { font-size: 2rem; }

h5 { font-size: 2rem; }

h6 { font-size: 2rem; }

a { text-decoration: none; color: #4A4A4A; transition: color 0.3s ease; }
a:hover { text-decoration: underline; color: #111; }
a code { color: #4646C5; transition: color 0.3s ease; }
a code:hover { text-decoration: underline; color: #111; }

p, ul, ol, dl { font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1; margin: 0 0 1.75em 0; text-rendering: geometricPrecision; }

dl dt { float: left; width: 180px; overflow: hidden; clear: left; text-align: right; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; margin-bottom: 1em; }

dl dd { margin-left: 200px; margin-bottom: 1em; }

li { margin: 0.4em 0; }

li li { margin: 0; }

hr { display: block; height: 1px; border: 0; border-top: #EFEFEF 1px solid; margin: 3.2em auto; padding: 0; }

blockquote { box-sizing: border-box; margin: 1.75em 0 1.75em -2.2em; padding: 0 0 0 1.75em; border-left: #85BD6A 0.4em solid; }

blockquote blockquote { margin-left: 0; }

blockquote p { margin: 0.8em 0; font-style: italic; }

blockquote small { display: inline-block; margin: 0.8em 0 0.8em 1.5em; font-size: 0.9em; color: #CCC; }

blockquote small:before { content: '\2014 \00A0'; }

blockquote cite { font-weight: 700; font-style: normal; }

blockquote cite a { font-weight: normal; }

mark { background-color: #FDB6B6; padding: 0.2em; }

kbd { display: inline-block; margin-bottom: 0.4em; padding: 1px 8px; border: #CCC 1px solid; color: #666; text-shadow: #FFF 0 1px 0; font-size: 0.9em; font-weight: 700; background: #F4F4F4; border-radius: 4px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 1px 0 0 #FFF inset; }

table { box-sizing: border-box; margin: 1.75em 0; background-color: transparent; }

table th, table td { padding: 8px; line-height: 20px; text-align: left; vertical-align: top; border-top: #EFEFEF 1px solid; }

table th { color: #000; }

table caption + thead tr:first-child th, table caption + thead tr:first-child td, table colgroup + thead tr:first-child th, table colgroup + thead tr:first-child td, table thead:first-child tr:first-child th, table thead:first-child tr:first-child td { border-top: 0; }

table tbody + tbody { border-top: #EFEFEF 2px solid; }

table table table { background-color: #FFF; }

table tbody > tr:nth-child(odd) > td, table tbody > tr:nth-child(odd) > th { background-color: #F6F6F6; }

table.plain tbody > tr:nth-child(odd) > td, table.plain tbody > tr:nth-child(odd) > th { background: transparent; }

iframe, .fluid-width-video-wrapper { display: block; margin: 1.75em 0; }

/* When a video is inside the fitvids wrapper, drop the
margin on the iframe, cause it breaks stuff. */
.fluid-width-video-wrapper iframe { margin: 0; }

/* Clears shit */
.clearfix:before, .clearfix:after { content: " "; display: table; }

.clearfix:after { clear: both; }

.clearfix { zoom: 1; }

/* Hides shit */
.hidden { text-indent: -9999px; visibility: hidden; display: none; }

/* Import the font file with the icons in it */
@font-face { font-family: "casper-icons"; src: url("../fonts/casper-icons.woff") format("woff"); font-weight: normal; font-style: normal; }
/* Apply these base styles to all icons */
[class^="icon-"]:before, [class*=" icon-"]:before { font-family: "casper-icons", "Open Sans", sans-serif; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; text-decoration: none !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Each icon is created by inserting the correct character into the content of the :before pseudo element. Like a boss. */
.icon-ghost:before { content: "\f600"; }

.icon-feed:before { content: "\f601"; }

.icon-twitter:before { content: "\f602"; font-size: 1.1em; }

.icon-google-plus:before { content: "\f603"; }

.icon-facebook:before { content: "\f604"; }

.icon-arrow-left:before { content: "\f605"; }

.icon-stats:before { content: "\f606"; }

.icon-location:before { content: "\f607"; margin-left: -3px; /* Tracking fix */ }

.icon-link:before { content: "\f608"; }

.icon-menu:before { content: "\f609"; }

/* IMPORTANT: When making any changes to the icon font, be sure to increment the version number by 1 in the @font-face rule. `?v=1` becomes `?v=2` This forces browsers to download the new font file.
*/
@font-face { font-family: 'social'; src: url("../fonts/social.woff2") format("woff2"), url("../fonts/social.woff") format("woff"); font-weight: normal; font-style: normal; }
[class^="social-"], [class*=" social-"] { white-space: nowrap; }
[class^="social-"]:hover, [class*=" social-"]:hover { text-decoration: none; }

[class^="social-"]:before, [class*=" social-"]:before { font-family: "social"; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; width: 1em; margin-right: .2em; text-align: center; /* opacity: .8; */ /* For safety - reset parent styles, that can break glyph codes*/ font-variant: normal; text-transform: none; /* fix buttons height, for twitter bootstrap */ line-height: 1em; /* Animation center compensation - margins should be symmetric */ /* remove if not needed */ margin-left: .2em; /* you can be more comfortable with increased icons size */ /* font-size: 120%; */ /* Font smoothing. That was taken from TWBS */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Uncomment for 3D effect */ /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ }

.social-mail-alt:before { content: '\f0e0'; }

.social-github-circled:before { content: '\f09b'; }

.social-twitter:before { content: '\f099'; }

.social-key:before { content: '\f084'; }

.social-mastodon:before { content: '\f2e2'; }

.main-header { margin-bottom: 40px; padding-top: 10rem; background-size: cover; background-position: center; }
.main-header.has-cover .page-title, .main-header.has-cover .page-title a, .main-header.has-cover .page-description, .main-header.has-cover .nav a { color: #FFF; text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5); }
.main-header.has-cover .nav:before, .main-header.has-cover .nav:after { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 50%, rgba(255, 255, 255, 0) 100%); }
.main-header .nav, .main-header .page-title, .main-header .page-description { width: 90%; max-width: 500px; margin: auto; }
.main-header .nav { margin: 40px auto 50px; padding-bottom: 20px; }
.main-header .nav ul { list-style: none; margin: 0; padding: 0; }
.main-header .nav li { min-width: 80px; margin: 5px; display: inline-block; font-size: 16px; text-transform: uppercase; }
.main-header .page-title { margin: 0 auto 15px; }
.main-header .page-title a { font-size: 70px; text-decoration: none; text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3); }
.main-header .page-description { font-size: 18px; font-weight: normal; font-style: italic; font-family: 'Merriweather', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif; color: rgba(46, 46, 46, 0.8); }

.nav:before, .nav:after, .site-footer:before { content: ''; display: block; width: 100%; height: 1px; background: linear-gradient(to right, transparent 0%, black 50%, transparent 100%); }

.post-title { font-size: 3.6rem; }

.post-excerpt, .post-content { text-align: left; }

.post-meta { margin-bottom: 20px; font-style: italic; }
.post-meta a { text-decoration: underline; font-size: 15px; color: #666666; }
.post-meta .post-category { text-transform: capitalize; }

.post-excerpt p { text-indent: 2em; margin-bottom: 10px; }
.post-excerpt .read-more { font-style: italic; text-decoration: underline; }

.content .short-diver { position: relative; margin: 20px auto 40px; }
.content .short-diver:after { content: ''; display: block; width: 40px; height: 4px; background: #eeeeee; margin: 60px auto 0; }

.pagination { font-size: 15px; margin-top: 20px; position: relative; }

.newer-posts, .older-posts { position: absolute; top: 0; left: 0; }

.older-posts { left: auto; right: 0; }

.site-footer { max-width: 500px; width: 90%; padding: 20px 0; font-size: 12px; line-height: 1.3; }

.site-footer p { margin: 0; }

.site-footer:before { margin-bottom: 20px; }

.post-list .post, .pagination, .site-footer, .single-post .post-content > h1, .single-post .post-content > h2, .single-post .post-content > h3, .single-post .post-content > h4, .single-post .post-content > h5, .single-post .post-content > h6, .single-post .post-content > p, .single-post .post-content > ul, .single-post .post-content > ol, .single-post .post-content > blockquote, .single-post .post-content .single-post-header, .single-post .post-content > table, .single-post .post-content > address, .single-post .post-content > article, .single-post .post-content > aside, .single-post .post-content > canvas, .single-post .post-content > dd, .single-post .post-content > dl, .single-post .post-content > fieldset, .single-post .post-content > figcaption, .single-post .post-content > figure, .single-post .post-content > footer, .single-post .post-content > form, .single-post .post-content > header, .single-post .post-content > hgroup, .single-post .post-content > li, .single-post .post-content > main, .single-post .post-content > nav, .single-post .post-content > noscript, .single-post .post-content > output, .single-post .post-content > section, .single-post .post-content > tfoot, .single-post .post-content > video, .single-post .post-content > iframe, .read-next { width: 90%; max-width: 750px; margin-left: auto; margin-right: auto; word-wrap: break-word; }

.author-image .img { width: 100px; height: 100px; display: block; border-radius: 50%; margin: auto; background-size: cover; background-position: center; }

.single-post .post-content img, .single-post .post-title, .single-post .post-meta { max-width: 700px; width: 100%; margin: auto; }
.single-post .post-meta { margin: 20px auto 0; }
.single-post .post-content:after { content: ''; display: block; clear: both; }
.single-post .post-title { font-size: 5rem; }
.single-post .large img { max-width: none; }
.single-post figure { position: relative; margin-bottom: 25px; }
.single-post figure.left figcaption, .single-post figure.right figcaption, .single-post figure.large figcaption { position: static; width: auto; text-align: center; }
.single-post figure.left figcaption:before, .single-post figure.right figcaption:before, .single-post figure.large figcaption:before { display: none; }
.single-post figure.left img, .single-post figure.right img, .single-post figure.large img { width: auto; height: auto; max-width: 100%; max-height: none; }
.single-post figure.large { max-width: none; width: auto; }
.single-post figure.large img { width: 100%; }
.single-post figure.left { float: left; margin: 20px 20px 20px 0; }
.single-post figure.right { float: right; margin: 20px 0 20px 20px; }
.single-post figure p { margin: 0; /* jekyll generates paragraphs in figure elements */ }
.single-post figure img { display: block; }
.single-post figcaption { position: absolute; top: 0; right: 670px; font-style: italic; text-align: right; width: 180px; padding-top: 10px; line-height: 1.5; color: #999; }
.single-post figcaption:before { position: absolute; top: 0; right: 0; content: ''; width: 30px; height: 3px; background: gray; }
.single-post img[src*='#right'], .single-post img[src*='#left'] { width: auto; height: auto; max-width: 50%; max-height: 300px; margin: 1em; }
.single-post img[src*='#right'] { float: right; clear: right; margin-right: 0; }
.single-post img[src*='#left'] { float: left; clear: left; margin-left: 0; }
.single-post img[src*='#border'] { border: 2px solid #77C6E0aa; border-radius: 4px; }

.post-content a { text-decoration: underline; }
.post-content ol, .post-content ul { padding-left: 3rem; }
.post-content ol ol, .post-content ul ul, .post-content ul ol, .post-content ol ul { margin: 0 0 0.4em 0; padding-left: 2em; }
.post-content ol p, .post-content ul p { width: 100%; margin-bottom: auto; }

.ds-thread, #disqus_thread { width: 90%; max-width: 700px; margin: auto; }

.fluid-width-video-wrapper { max-width: 750px; margin: auto; padding: 0; }

.bg-scroll { background-size: cover; background-attachment: fixed; background-repeat: no-repeat; background-position: center center; height: 500px; margin: 0 0 1.75em 0; }

/* some data is duplicated from other files to allow an easy merge of updates from the forked theme without destroying the css for this page */
.category { width: 90%; max-width: 750px; margin-left: auto; margin-right: auto; word-wrap: break-word; margin-bottom: 50px; padding: 0; }
.category li { margin-bottom: 8px; list-style-type: none; }
.category .article { text-align: left; }
.category .article .post-header { overflow: hidden; border-bottom: 1px solid #eeeeee; margin-bottom: 10px; }
.category .article .title a { text-decoration: none; }
.category .article .date, .category .article .title-category { font-size: 12px; text-transform: uppercase; color: rgba(0, 0, 0, 0.2); line-height: 24px; margin-top: 7px; margin-bottom: 0; }
.category .article .date { float: right; }

.logo-readium { position: absolute; left: 10px; top: 10px; width: 48px; height: 48px; background-image: url(/img/jomo.png); background-size: 100%; overflow: hidden; z-index: 99; }
.logo-readium .logo { display: block; position: absolute; top: 8px; left: 8px; width: 32px; height: 32px; font-family: 'Open Sans', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif; font-size: 30px; font-weight: 600; text-decoration: none; color: #fff; text-align: center; }

/* Code blocks */
code, pre { color: black; background: none; text-shadow: 0 1px white; font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; text-align: left; white-space: pre-wrap; word-spacing: normal; word-break: normal; word-wrap: break-word; line-height: 1.5; -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; }

pre::-moz-selection, pre ::-moz-selection, code::-moz-selection, code ::-moz-selection { text-shadow: none; background: #b3d4fc; }

pre::selection, pre ::selection, code::selection, code ::selection { text-shadow: none; background: #b3d4fc; }

@media print { code, pre { text-shadow: none; } }
pre { padding: 1em; margin: 1em 0; }

pre code { display: block; width: 90%; max-width: 750px; margin: auto; }

:not(pre) > code, pre { background: #f4f4f4; border-top: 1px solid #eeeeee; border-bottom: 1px solid #eeeeee; }

/* Inline code */
:not(pre) > code { display: inline-block; padding: 0 .1em; margin: -1px; border-radius: .3em; white-space: normal; border: 1px solid #f8f8f8; line-height: 1.3em; }

.token.comment, .token.prolog, .token.doctype, .token.cdata { color: slategray; }

.token.punctuation { color: #999; }

.namespace { opacity: .7; }

.token.property, .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol, .token.deleted { color: #905; }

.token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted { color: #690; }

.token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string { color: #a67f59; background: rgba(255, 255, 255, 0.5); }

.token.atrule, .token.attr-value, .token.keyword { color: #07a; }

.token.function { color: #DD4A68; }

.token.regex, .token.important, .token.variable { color: #e90; }

.token.important, .token.bold { font-weight: bold; }

.token.italic { font-style: italic; }

.token.entity { cursor: help; }

.author-cover { height: 32rem; background-size: cover; background-position: center; background-repeat: no-repeat; }

.author-image { margin-top: 50px; }
.author-image.has-cover { margin-top: -52px; }
.author-image .img { border: 4px solid white; }

.author-info { width: 90%; max-width: 700px; text-align: center; margin: 20px auto 40px; }
.author-info:after { margin-top: 40px; }

.author-title { font-size: 4rem; }

.author-bio { font-size: 2rem; font-weight: normal; color: #666666; }

.author-meta { color: #9EABB3; font-size: 1.6rem; }
.author-meta a { margin-top: 10px; color: #9EABB3; }
.author-meta a:hover { color: #111; }

@media only screen and (max-width: 1080px) { .single-post figcaption { position: static; width: auto; text-align: center; }
  .single-post figcaption::before { display: none; /* bugfix, base theme hides it too late (max-width: 780px)  */ }
  .go-to-top { transform: translateX(0); right: 50px; left: auto; } }
@media only screen and (min-width: 1081px) { .single-post .post-content > blockquote { max-width: 730px; }
  .single-post .post-content > blockquote p { margin-left: 10px; margin-right: 40px; } }
@media only screen and (max-width: 780px) { blockquote { margin-left: 0; }
  hr { margin: 2.4em 0; }
  ol, ul { padding-left: 2em; }
  h1 { font-size: 4.5rem; text-indent: -2px; }
  h2 { font-size: 3.6rem; }
  h3 { font-size: 3.1rem; }
  h4 { font-size: 2.5rem; }
  h5 { font-size: 2.2rem; }
  h6 { font-size: 1.8rem; }
  .single-post figcaption { position: static; width: auto; text-align: center; }
  .single-post figcaption:before { display: none; }
  .go-to-top { right: 35px; }
  .category .date { display: none; }
  .category .article { text-align: center; }
  .bg-scroll { height: 350px; } }
@media only screen and (max-width: 500px) { hr { margin: 1.75em 0; }
  p, ul, ol, dl { font-size: 0.95em; margin: 0 0 2.5rem 0; }
  h1, h2, h3, h4, h5, h6 { margin: 0 0 0.3em 0; }
  h1 { font-size: 2.8rem; letter-spacing: -1px; }
  h2 { font-size: 2.4rem; letter-spacing: 0; }
  h3 { font-size: 2.1rem; }
  h4 { font-size: 1.9rem; }
  h5 { font-size: 1.8rem; }
  h6 { font-size: 1.8rem; }
  body:not(.post-template) .post-title { font-size: 2.5rem; }
  .read-next a { display: block; width: 100%; box-sizing: border-box; padding-right: 0; padding-left: 0; }
  .read-next a h2 { font-size: 2rem; }
  .single-post .post-content img[src*='#right'], .single-post .post-content img[src*='#left'] { margin: 0; float: none; max-width: 100%; max-height: initial; height: auto; }
  .single-post .post-content figure.left, .single-post .post-content figure.right, .single-post .post-content figure.large { margin: 0 0 10px 0; width: 100%; }
  .go-to-top { right: 10px; display: none !important; } }
/*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */
/* Styles for basic PhotoSwipe functionality (sliding area, open/close transitions)
*/
/* pswp = photoswipe */
.pswp { display: none; position: absolute; width: 100%; height: 100%; left: 0; top: 0; overflow: hidden; -ms-touch-action: none; touch-action: none; z-index: 1500; -webkit-text-size-adjust: 100%; /* create separate layer, to avoid paint on window.onscroll in webkit/blink */ -webkit-backface-visibility: hidden; outline: none; }

.pswp * { -webkit-box-sizing: border-box; box-sizing: border-box; }

.pswp img { max-width: none; }

/* style is added when JS option showHideOpacity is set to true */
.pswp--animate_opacity { /* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */ opacity: 0.001; will-change: opacity; /* for open/close transition */ -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }

.pswp--open { display: block; }

.pswp--zoom-allowed .pswp__img { /* autoprefixer: off */ cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; }

.pswp--zoomed-in .pswp__img { /* autoprefixer: off */ cursor: -webkit-grab; cursor: -moz-grab; cursor: grab; }

.pswp--dragging .pswp__img { /* autoprefixer: off */ cursor: -webkit-grabbing; cursor: -moz-grabbing; cursor: grabbing; }

/* Background is added as a separate element. As animating opacity is much faster than animating rgba() background-color.
*/
.pswp__bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; opacity: 0; -webkit-backface-visibility: hidden; will-change: opacity; }

.pswp__scroll-wrap { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; }

.pswp__container, .pswp__zoom-wrap { -ms-touch-action: none; touch-action: none; position: absolute; left: 0; right: 0; top: 0; bottom: 0; }

/* Prevent selection and tap highlights */
.pswp__container, .pswp__img { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }

.pswp__zoom-wrap { position: absolute; width: 100%; -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; /* for open/close transition */ -webkit-transition: -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1); transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1); }

.pswp__bg { will-change: opacity; /* for open/close transition */ -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }

.pswp--animated-in .pswp__bg, .pswp--animated-in .pswp__zoom-wrap { -webkit-transition: none; transition: none; }

.pswp__container, .pswp__zoom-wrap { -webkit-backface-visibility: hidden; }

.pswp__item { position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: hidden; }

.pswp__img { position: absolute; width: auto; height: auto; top: 0; left: 0; }

/* stretched thumbnail or div placeholder element (see below) style is added to avoid flickering in webkit/blink when layers overlap
*/
.pswp__img--placeholder { -webkit-backface-visibility: hidden; }

/* div element that matches size of large image large image loads on top of it
*/
.pswp__img--placeholder--blank { background: #222; }

.pswp--ie .pswp__img { width: 100% !important; height: auto !important; left: 0; top: 0; }

/* Error message appears when image is not loaded (JS option errorMsg controls markup)
*/
.pswp__error-msg { position: absolute; left: 0; top: 50%; width: 100%; text-align: center; font-size: 14px; line-height: 16px; margin-top: -8px; color: #CCC; }

.pswp__error-msg a { color: #CCC; text-decoration: underline; }

/*! PhotoSwipe Default UI CSS by Dmitry Semenov | photoswipe.com | MIT license */
/*
 Contents:
 1. Buttons 2. Share modal and links 3. Index indicator ("1 of X" counter) 4. Caption 5. Loading indicator 6. Additional styles (root element, top bar, idle state, hidden state, etc.)

*/
/*
 1. Buttons
 */
/* <button> css reset */
.pswp__button { width: 44px; height: 44px; position: relative; background: none; cursor: pointer; overflow: visible; -webkit-appearance: none; display: block; border: 0; padding: 0; margin: 0; float: right; opacity: 0.75; -webkit-transition: opacity 0.2s; transition: opacity 0.2s; -webkit-box-shadow: none; box-shadow: none; }

.pswp__button:focus, .pswp__button:hover { opacity: 1; }

.pswp__button:active { outline: none; opacity: 0.9; }

.pswp__button::-moz-focus-inner { padding: 0; border: 0; }

/* pswp__ui--over-close class it added when mouse is over element that should close gallery */
.pswp__ui--over-close .pswp__button--close { opacity: 1; }

.pswp__button, .pswp__button--arrow--left:before, .pswp__button--arrow--right:before { background: url(../img/default-skin.png) 0 0 no-repeat; background-size: 264px 88px; width: 44px; height: 44px; }

@media (-webkit-min-device-pixel-ratio: 1.1), (-webkit-min-device-pixel-ratio: 1.09375), (min-resolution: 105dpi), (min-resolution: 1.1dppx) { /* Serve SVG sprite if browser supports SVG and resolution is more than 105dpi */
  .pswp--svg .pswp__button, .pswp--svg .pswp__button--arrow--left:before, .pswp--svg .pswp__button--arrow--right:before { background-image: url(../img/default-skin.svg); }
  .pswp--svg .pswp__button--arrow--left, .pswp--svg .pswp__button--arrow--right { background: none; } }
.pswp__button--close { background-position: 0 -44px; }

.pswp__button--share { background-position: -44px -44px; }

.pswp__button--fs { display: none; }

.pswp--supports-fs .pswp__button--fs { display: block; }

.pswp--fs .pswp__button--fs { background-position: -44px 0; }

.pswp__button--zoom { display: none; background-position: -88px 0; }

.pswp--zoom-allowed .pswp__button--zoom { display: block; }

.pswp--zoomed-in .pswp__button--zoom { background-position: -132px 0; }

/* no arrows on touch screens */
.pswp--touch .pswp__button--arrow--left, .pswp--touch .pswp__button--arrow--right { visibility: hidden; }

/* Arrow buttons hit area (icon is added to :before pseudo-element)
*/
.pswp__button--arrow--left, .pswp__button--arrow--right { background: none; top: 50%; margin-top: -50px; width: 70px; height: 100px; position: absolute; }

.pswp__button--arrow--left { left: 0; }

.pswp__button--arrow--right { right: 0; }

.pswp__button--arrow--left:before, .pswp__button--arrow--right:before { content: ''; top: 35px; background-color: rgba(0, 0, 0, 0.3); height: 30px; width: 32px; position: absolute; }

.pswp__button--arrow--left:before { left: 6px; background-position: -138px -44px; }

.pswp__button--arrow--right:before { right: 6px; background-position: -94px -44px; }

/*
 2. Share modal/popup and links
 */
.pswp__counter, .pswp__share-modal { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

.pswp__share-modal { display: block; background: rgba(0, 0, 0, 0.5); width: 100%; height: 100%; top: 0; left: 0; padding: 10px; position: absolute; z-index: 1600; opacity: 0; -webkit-transition: opacity 0.25s ease-out; transition: opacity 0.25s ease-out; -webkit-backface-visibility: hidden; will-change: opacity; }

.pswp__share-modal--hidden { display: none; }

.pswp__share-tooltip { z-index: 1620; position: absolute; background: #FFF; top: 56px; border-radius: 2px; display: block; width: auto; right: 44px; -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25); -webkit-transform: translateY(6px); -ms-transform: translateY(6px); transform: translateY(6px); -webkit-transition: -webkit-transform 0.25s; transition: transform 0.25s; -webkit-backface-visibility: hidden; will-change: transform; }

.pswp__share-tooltip a { display: block; padding: 8px 12px; color: #000; text-decoration: none; font-size: 14px; line-height: 18px; }

.pswp__share-tooltip a:hover { text-decoration: none; color: #000; }

.pswp__share-tooltip a:first-child { /* round corners on the first/last list item */ border-radius: 2px 2px 0 0; }

.pswp__share-tooltip a:last-child { border-radius: 0 0 2px 2px; }

.pswp__share-modal--fade-in { opacity: 1; }

.pswp__share-modal--fade-in .pswp__share-tooltip { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }

/* increase size of share links on touch devices */
.pswp--touch .pswp__share-tooltip a { padding: 16px 12px; }

a.pswp__share--facebook:before { content: ''; display: block; width: 0; height: 0; position: absolute; top: -12px; right: 15px; border: 6px solid transparent; border-bottom-color: #FFF; -webkit-pointer-events: none; -moz-pointer-events: none; pointer-events: none; }

a.pswp__share--facebook:hover { background: #3E5C9A; color: #FFF; }

a.pswp__share--facebook:hover:before { border-bottom-color: #3E5C9A; }

a.pswp__share--twitter:hover { background: #55ACEE; color: #FFF; }

a.pswp__share--pinterest:hover { background: #CCC; color: #CE272D; }

a.pswp__share--download:hover { background: #DDD; }

/*
 3. Index indicator ("1 of X" counter)
 */
.pswp__counter { position: absolute; left: 0; top: 0; height: 44px; font-size: 13px; line-height: 44px; color: #FFF; opacity: 0.75; padding: 0 10px; }

/*
 4. Caption
 */
.pswp__caption { position: absolute; left: 0; bottom: 0; width: 100%; min-height: 44px; }

.pswp__caption small { font-size: 11px; color: #BBB; }

.pswp__caption__center { text-align: left; max-width: 420px; margin: 0 auto; font-size: 13px; padding: 10px; line-height: 20px; color: #CCC; }

.pswp__caption--empty { display: none; }

/* Fake caption element, used to calculate height of next/prev image */
.pswp__caption--fake { visibility: hidden; }

/*
 5. Loading indicator (preloader)
 You can play with it here - http://codepen.io/dimsemenov/pen/yyBWoR
 */
.pswp__preloader { width: 44px; height: 44px; position: absolute; top: 0; left: 50%; margin-left: -22px; opacity: 0; -webkit-transition: opacity 0.25s ease-out; transition: opacity 0.25s ease-out; will-change: opacity; direction: ltr; }

.pswp__preloader__icn { width: 20px; height: 20px; margin: 12px; }

.pswp__preloader--active { opacity: 1; }

.pswp__preloader--active .pswp__preloader__icn { /* We use .gif in browsers that don't support CSS animation */ background: url(../img/preloader.gif) 0 0 no-repeat; }

.pswp--css_animation .pswp__preloader--active { opacity: 1; }

.pswp--css_animation .pswp__preloader--active .pswp__preloader__icn { -webkit-animation: clockwise 500ms linear infinite; animation: clockwise 500ms linear infinite; }

.pswp--css_animation .pswp__preloader--active .pswp__preloader__donut { -webkit-animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite; animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite; }

.pswp--css_animation .pswp__preloader__icn { background: none; opacity: 0.75; width: 14px; height: 14px; position: absolute; left: 15px; top: 15px; margin: 0; }

.pswp--css_animation .pswp__preloader__cut { /* The idea of animating inner circle is based on Polymer ("material") loading indicator by Keanu Lee https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html */ position: relative; width: 7px; height: 14px; overflow: hidden; }

.pswp--css_animation .pswp__preloader__donut { -webkit-box-sizing: border-box; box-sizing: border-box; width: 14px; height: 14px; border: 2px solid #FFF; border-radius: 50%; border-left-color: transparent; border-bottom-color: transparent; position: absolute; top: 0; left: 0; background: none; margin: 0; }

@media screen and (max-width: 1024px) { .pswp__preloader { position: relative; left: auto; top: auto; margin: 0; float: right; } }
@-webkit-keyframes clockwise { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
@keyframes clockwise { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
@-webkit-keyframes donut-rotate { 0% { -webkit-transform: rotate(0); transform: rotate(0); }
  50% { -webkit-transform: rotate(-140deg); transform: rotate(-140deg); }
  100% { -webkit-transform: rotate(0); transform: rotate(0); } }
@keyframes donut-rotate { 0% { -webkit-transform: rotate(0); transform: rotate(0); }
  50% { -webkit-transform: rotate(-140deg); transform: rotate(-140deg); }
  100% { -webkit-transform: rotate(0); transform: rotate(0); } }
/*
 6. Additional styles
 */
/* root element of UI */
.pswp__ui { -webkit-font-smoothing: auto; visibility: visible; opacity: 1; z-index: 1550; }

/* top black bar with buttons and "1 of X" indicator */
.pswp__top-bar { position: absolute; left: 0; top: 0; height: 44px; width: 100%; }

.pswp__caption, .pswp__top-bar, .pswp--has_mouse .pswp__button--arrow--left, .pswp--has_mouse .pswp__button--arrow--right { -webkit-backface-visibility: hidden; will-change: opacity; -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }

/* pswp--has_mouse class is added only when two subsequent mousemove events occur */
.pswp--has_mouse .pswp__button--arrow--left, .pswp--has_mouse .pswp__button--arrow--right { visibility: visible; }

.pswp__top-bar, .pswp__caption { background-color: rgba(0, 0, 0, 0.5); }

/* pswp__ui--fit class is added when main image "fits" between top bar and bottom bar (caption) */
.pswp__ui--fit .pswp__top-bar, .pswp__ui--fit .pswp__caption { background-color: rgba(0, 0, 0, 0.3); }

/* pswp__ui--idle class is added when mouse isn't moving for several seconds (JS option timeToIdle) */
.pswp__ui--idle .pswp__top-bar { opacity: 0; }

.pswp__ui--idle .pswp__button--arrow--left, .pswp__ui--idle .pswp__button--arrow--right { opacity: 0; }

/* pswp__ui--hidden class is added when controls are hidden e.g. when user taps to toggle visibility of controls
*/
.pswp__ui--hidden .pswp__top-bar, .pswp__ui--hidden .pswp__caption, .pswp__ui--hidden .pswp__button--arrow--left, .pswp__ui--hidden .pswp__button--arrow--right { /* Force paint & create composition layer for controls. */ opacity: 0.001; }

/* pswp__ui--one-slide class is added when there is just one item in gallery */
.pswp__ui--one-slide .pswp__button--arrow--left, .pswp__ui--one-slide .pswp__button--arrow--right, .pswp__ui--one-slide .pswp__counter { display: none; }

.pswp__element--disabled { display: none !important; }

.pswp--minimal--dark .pswp__top-bar { background: none; }

.error-template { background-size: cover; background-repeat: no-repeat; display: inline; }
.error-template .error-page { background-color: white; background-color: rgba(255, 255, 255, 0.5); margin-top: 150px; padding: 15px; line-height: 1.6em; text-align: center; }
.error-template .error-page .hgroup { margin-bottom: 15px; }
.error-template .error-page .hgroup h1, .error-template .error-page .hgroup h2 { margin: 0; padding: 0; text-transform: uppercase; }
.error-template .error-page .hgroup h1 { margin-bottom: 15px; font-size: 40px; }
.error-template .error-page .hgroup h2 { color: orangered; display: inline-block; padding: 0 0 15px 0; font-size: 80px; border: solid #CCCCCC; border-width: 1px 0; text-transform: lowercase; }

/* as long as is is not fixed in the forked repo */
.single-post .post-content iframe { min-height: 350px; }

ol { width: 90%; max-width: 750px; margin-left: auto; margin-right: auto; word-wrap: break-word; }

pre, pre[class*="language-"] { margin-bottom: 1.8em !important; /* override prism.js css */ }