/* http://meyerweb.com/eric/tools/css/reset/  v2.0 | 20110126 License: none (public domain)
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

body { line-height: 1; }

ol, ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

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

body { -webkit-text-size-adjust: 100%; -webkit-font-feature-settings: "kern" 1; -moz-font-feature-settings: "kern" 1; -o-font-feature-settings: "kern" 1; font-feature-settings: "kern" 1; font-kerning: normal; }

.highlight { font-family: 'Monaco', 'Courier New'; font-weight: bold; margin: 20px 0; font-size: 14px; line-height: 20px; background-color: #383830; color: #eee; padding: 10px; }
.highlight .c, .highlight .cm, .highlight .cp, .highlight .c1, .highlight .cs { /* comment */ color: #999; }
.highlight .k, .highlight .kc, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kt, .highlight .o, .highlight .nt { /* key word*/ color: #F92672; }
.highlight .m, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .mo { /*number*/ color: #AE81FF; }
.highlight .s, .highlight .sb, .highlight .sc, .highlight .sd, .highlight .s2, .highlight .se, .highlight .sh, .highlight .si, .highlight .sx, .highlight .sr, .highlight .s1, .highlight .ss { /*string*/ color: #E6DB74; }
.highlight .nf, .highlight .na, .highlight .nc { color: #A6E22A; }
.highlight .css .k, .highlight .nb, .highlight .kd, .highlight .n { color: #84D7EC; }
@media screen and (max-width: 1024px) { .highlight { font-size: 13px; line-height: 18px; } }
@media screen and (max-width: 767px) { .highlight { font-size: 12px; line-height: 18px; } }
@media screen and (max-width: 480px) { .highlight { font-size: 11px; line-height: 15px; } }

.navigation-toggle { position: absolute; z-index: 10; top: 20px; left: 20px; background-color: #28aadc; width: 48px; height: 48px; font-size: 0; border-radius: 0px; transition: all 0.4s ease-in-out; -webkit-backface-visibility: hidden; }
.navigation-toggle:focus { outline: none; }
.navigation-toggle span { display: block; position: absolute; top: 50%; margin-top: -2px; left: 10px; right: 10px; height: 4px; background: white; transition: transform 0.3s; }
.navigation-toggle span::before, .navigation-toggle span::after { position: absolute; display: block; left: 0; width: 100%; height: 4px; background-color: #fff; content: ""; transition: all 0.4s ease-in-out; }
.navigation-toggle span::before { top: -10px; transform-origin: top right; }
.navigation-toggle span::after { bottom: -10px; transform-origin: bottom right; }
.navigation-toggle.-active { left: 320px; border-radius: 24px; }
.navigation-toggle.-active span { transform: rotate(180deg); }
.navigation-toggle.-active span::before { top: 0; transform: translateX(16px) translateY(2px) rotate(45deg); width: 50%; }
.navigation-toggle.-active span::after { bottom: 0; transform: translateX(16px) translateY(-2px) rotate(-45deg); width: 50%; }
@media screen and (max-width: 767px) { .navigation-toggle { margin-left: 20px; } }
@media screen and (max-width: 480px) { .navigation-toggle { margin-left: 0; } }

@media screen and (max-width: 767px) { .navigation-toggle.-active { left: 260px; } }
.navigation-menu { position: fixed; top: 0; left: 0; bottom: 0; width: 300px; background: #333; -webkit-transform: translateX(-300px); -ms-transform: translateX(-300px); transform: translateX(-300px); -webkit-backface-visibility: hidden; transition: transform 0.4s ease-in-out; }

@media screen and (max-width: 767px) { .navigation-menu { width: 240px; } }
.navigation-toggle.-active + .navigation-menu { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); }

.page-content { transition: transform 0.4s ease-in-out; transform: translateZ(0); -webkit-backface-visibility: hidden; margin-bottom: 80px; }

.navigation-toggle.-active ~ .page-content { -webkit-transform: translateX(300px); -ms-transform: translateX(300px); transform: translateX(300px); }

@media screen and (max-width: 767px) { .navigation-toggle.-active ~ .page-content { -webkit-transform: translateX(240px); -ms-transform: translateX(240px); transform: translateX(240px); } }
.navigation-menu__heading { color: #eee; margin: 20px; font-family: 'Gentium Book Basic', serif; font-size: 16px; line-height: 23px; }
.navigation-menu__heading > a { color: #00a4e3; text-decoration: none; transition: color 0.2s ease-in-out; }
.navigation-menu__heading > a:hover { color: #a5e6ff; }

.navigation-menu__item { color: #00a4e3; border-top: 1px solid #444; border-bottom: 1px solid #444; height: 40px; display: block; text-decoration: none; transition: all 0.2s ease-in-out; padding: 0px 20px; line-height: 40px; font-size: 20px; font-family: 'Gentium Book Basic', serif; font-weight: 700; margin-bottom: -1px; }
.navigation-menu__item:hover { color: #00a4e3; background-color: #fff; }

.site-title { color: #999; margin-bottom: 120px; line-height: 48px; font-size: 20px; font-family: 'Gentium Book Basic', serif; font-weight: 700; }
.site-title > a { color: #00a4e3; text-decoration: none; transition: color 0.2s ease-in-out; }
.site-title > a:hover { color: #a5e6ff; }
@media screen and (max-width: 767px) { .site-title { margin-left: 60px; margin-bottom: 60px; } }
@media screen and (max-width: 480px) { .site-title { margin-left: 0; margin-bottom: 40px; } }

.page-content__wrapper { font-family: 'Gentium Book Basic', serif; margin: 0 auto; padding: 20px 120px 0; max-width: 720px; }
@media screen and (max-width: 1024px) { .page-content__wrapper { margin: 0 auto; padding: 20px 80px 0; } }
@media screen and (max-width: 767px) { .page-content__wrapper { padding: 20px 40px 0; } }
@media screen and (max-width: 480px) { .page-content__wrapper { padding: 80px 20px; } }

.post-content { color: #555; }
.post-content p { font-size: 19px; line-height: 30px; margin: 20px 0; }
@media screen and (max-width: 767px) { .post-content p { font-size: 17px; line-height: 25px; } }
@media screen and (max-width: 480px) { .post-content p { font-size: 16px; line-height: 25px; } }
.post-content ol { list-style-type: decimal; color: #999; padding-left: 20px; font-size: 19px; line-height: 30px; margin: 20px 0; }
.post-content ol > li { color: #555; padding-left: 5px; }
@media screen and (max-width: 767px) { .post-content ol { font-size: 17px; line-height: 25px; } }
@media screen and (max-width: 480px) { .post-content ol { font-size: 14px; line-height: 25px; } }
.post-content .highlight { padding: 20px; background: #333; overflow-x: auto; }
.post-content em { font-weight: bold; }
.post-content a { color: #00a4e3; text-decoration: none; transition: all 0.2s ease-in-out; border-bottom: 2px dotted #a5e6ff; }
.post-content a:hover { color: #005a7d; border-color: #3fcaff; }
.post-content h1, .post-content h2, .post-content h3 { font-family: 'Gentium Book Basic', serif; font-weight: 700; color: #666; }
.post-content h2 { font-size: 20px; margin-top: 60px; }
@media screen and (max-width: 767px) { .post-content h2 { font-size: 18px; } }
.post-content code.highlighter-rouge { padding: 0px 5px; font-family: 'Monaco', 'Courier New'; font-weight: bold; padding: 4px 5px; font-size: 75%; line-height: 20px; color: #000; border-radius: 3px; background-color: #eee; }

.post-title { font-family: 'Gentium Book Basic', serif; font-weight: 700; color: #666; font-size: 30px; line-height: 40px; margin: 20px 0; border-bottom: 1px solid #ddd; position: relative; }
@media screen and (max-width: 480px) { .post-title { font-size: 22px; line-height: 30px; padding-bottom: 2px; } }

.post-header { position: relative; }

.post-title__permalink { font-family: 'Gentium Book Basic', serif; position: absolute; right: 0; bottom: -1px; display: block; text-align: right; color: #00a4e3; font-size: 12px; line-height: 20px; text-decoration: none; transition: all 0.2s ease-in-out; }
.post-title__permalink:hover { color: #005a7d; }
@media screen and (max-width: 480px) { .post-title__permalink { font-size: 10px; bottom: -2px; } }

.post-meta { font-family: 'Gentium Book Basic', serif; color: #666; font-size: 16px; line-height: 20px; margin: -10px 0 20px; }

.archive-item { font-family: 'Gentium Book Basic', serif; color: #666; font-size: 20px; line-height: 30px; margin: 20px 0; }
.archive-item > a { color: #00a4e3; text-decoration: none; transition: all 0.2s ease-in-out; border-bottom: 2px solid #a5e6ff; }
.archive-item > a:hover { color: #005a7d; border-bottom-width: 5px; }
.archive-item > time { display: block; }
@media screen and (max-width: 480px) { .archive-item { font-size: 15px; line-height: 20px; } }

.pagination { position: relative; height: 20px; margin: 40px 0; }

.pagination__previous, .pagination__next { display: inline-block; color: #00a4e3; font-size: 18px; text-decoration: none; transition: all 0.2s ease-in-out; background: #eee; padding: 20px; line-height: 20px; }
.pagination__previous:hover, .pagination__next:hover { color: #fff; background-color: #00a4e3; }
@media screen and (max-width: 480px) { .pagination__previous, .pagination__next { font-size: 16px; padding: 10px; } }

.pagination__next { position: absolute; top: 0; right: 0; }