sahinakkaya.dev/assets/css/main.css

1691 lines
89 KiB
CSS

/* ========================================================================== Neon skin ========================================================================== */
/* Colors */
/* notices */
/* neon syntax highlighting (base16) */
.author__urls.social-icons i, .author__urls.social-icons .svg-inline--fa, .page__footer-follow .social-icons i, .page__footer-follow .social-icons .svg-inline--fa { color: inherit; }
/* next/previous buttons */
.pagination--pager { color: #fff6fb; background-color: #f21368; border-color: transparent; }
.pagination--pager:visited { color: #fff6fb; }
.ais-search-box .ais-search-box--input { background-color: #110e0e; }
/*! Minimal Mistakes Jekyll Theme 4.24.0 by Michael Rose Copyright 2013-2020 Michael Rose - mademistakes.com | @mmistakes Licensed under MIT (https://github.com/mmistakes/minimal-mistakes/blob/master/LICENSE) */
/* Variables */
/* ========================================================================== Variables ========================================================================== */
/* Typography ========================================================================== */
/* paragraph indention */
/* system typefaces */
/* sans serif typefaces */
/* serif typefaces */
/* type scale */
/* headline scale */
/* Colors ========================================================================== */
/* YIQ color contrast */
/* brands */
/* links */
/* notices */
/* syntax highlighting (base16) */
/* Breakpoints ========================================================================== */
/* Grid ========================================================================== */
/* Other ========================================================================== */
/* Mixins and functions */
/* Magnific Popup CSS */
.mfp-counter { font-family: Georgia, Times, serif; }
.mfp-bg { top: 0; left: 0; width: 100%; height: 100%; z-index: 1042; overflow: hidden; position: fixed; background: #000; opacity: 0.8; filter: alpha(opacity=80); }
.mfp-wrap { top: 0; left: 0; width: 100%; height: 100%; z-index: 1043; position: fixed; outline: none !important; -webkit-backface-visibility: hidden; }
.mfp-container { text-align: center; position: absolute; width: 100%; height: 100%; left: 0; top: 0; padding: 0 8px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.mfp-container:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; }
.mfp-align-top .mfp-container:before { display: none; }
.mfp-content { position: relative; display: inline-block; vertical-align: middle; margin: 0 auto; text-align: left; z-index: 1045; }
.mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content { width: 100%; cursor: auto; }
.mfp-ajax-cur { cursor: progress; }
.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close { cursor: -moz-zoom-out; cursor: -webkit-zoom-out; cursor: zoom-out; }
.mfp-zoom { cursor: pointer; cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; }
.mfp-auto-cursor .mfp-content { cursor: auto; }
.mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter { -webkit-user-select: none; -moz-user-select: none; user-select: none; }
.mfp-loading.mfp-figure { display: none; }
.mfp-hide { display: none !important; }
.mfp-preloader { color: #ccc; position: absolute; top: 50%; width: auto; text-align: center; margin-top: -0.8em; left: 8px; right: 8px; z-index: 1044; }
.mfp-preloader a { color: #ccc; }
.mfp-preloader a:hover { color: #fff; }
.mfp-s-ready .mfp-preloader { display: none; }
.mfp-s-error .mfp-content { display: none; }
button.mfp-close, button.mfp-arrow { overflow: visible; cursor: pointer; background: transparent; border: 0; -webkit-appearance: none; display: block; outline: none; padding: 0; z-index: 1046; -webkit-box-shadow: none; box-shadow: none; }
button::-moz-focus-inner { padding: 0; border: 0; }
.mfp-close { width: 44px; height: 44px; line-height: 44px; position: absolute; right: 0; top: 0; text-decoration: none; text-align: center; opacity: 1; filter: alpha(opacity=100); padding: 0 0 18px 10px; color: #fff; font-style: normal; font-size: 28px; font-family: Georgia, Times, serif; }
.mfp-close:hover, .mfp-close:focus { opacity: 1; filter: alpha(opacity=100); }
.mfp-close:active { top: 1px; }
.mfp-close-btn-in .mfp-close { color: #fff; }
.mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close { color: #fff; right: -6px; text-align: right; padding-right: 6px; width: 100%; }
.mfp-counter { position: absolute; top: 0; right: 0; color: #ccc; font-size: 12px; line-height: 18px; }
.mfp-arrow { position: absolute; opacity: 1; filter: alpha(opacity=100); margin: 0; top: 50%; margin-top: -55px; padding: 0; width: 90px; height: 110px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
.mfp-arrow:active { margin-top: -54px; }
.mfp-arrow:hover, .mfp-arrow:focus { opacity: 1; filter: alpha(opacity=100); }
.mfp-arrow:before, .mfp-arrow:after, .mfp-arrow .mfp-b, .mfp-arrow .mfp-a { content: ''; display: block; width: 0; height: 0; position: absolute; left: 0; top: 0; margin-top: 35px; margin-left: 35px; border: medium inset transparent; }
.mfp-arrow:after, .mfp-arrow .mfp-a { border-top-width: 13px; border-bottom-width: 13px; top: 8px; }
.mfp-arrow:before, .mfp-arrow .mfp-b { border-top-width: 21px; border-bottom-width: 21px; opacity: 0.7; }
.mfp-arrow-left { left: 0; }
.mfp-arrow-left:after, .mfp-arrow-left .mfp-a { border-right: 17px solid #fff; margin-left: 31px; }
.mfp-arrow-left:before, .mfp-arrow-left .mfp-b { margin-left: 25px; border-right: 27px solid #fff; }
.mfp-arrow-right { right: 0; }
.mfp-arrow-right:after, .mfp-arrow-right .mfp-a { border-left: 17px solid #fff; margin-left: 39px; }
.mfp-arrow-right:before, .mfp-arrow-right .mfp-b { border-left: 27px solid #fff; }
.mfp-iframe-holder { padding-top: 40px; padding-bottom: 40px; }
.mfp-iframe-holder .mfp-content { line-height: 0; width: 100%; max-width: 900px; }
.mfp-iframe-holder .mfp-close { top: -40px; }
.mfp-iframe-scaler { width: 100%; height: 0; overflow: hidden; padding-top: 56.25%; }
.mfp-iframe-scaler iframe { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #000; }
/* Main image in popup */
img.mfp-img { width: auto; max-width: 100%; height: auto; display: block; line-height: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 40px 0 40px; margin: 0 auto; }
/* The shadow behind the image */
.mfp-figure { line-height: 0; }
.mfp-figure:after { content: ''; position: absolute; left: 0; top: 40px; bottom: 40px; display: block; right: 0; width: auto; height: auto; z-index: -1; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #444; }
.mfp-figure small { color: #bdbdbd; display: block; font-size: 12px; line-height: 14px; }
.mfp-figure figure { margin: 0; }
.mfp-figure figcaption { margin-top: 0; margin-bottom: 0; }
.mfp-bottom-bar { margin-top: -36px; position: absolute; top: 100%; left: 0; width: 100%; cursor: auto; }
.mfp-title { text-align: left; line-height: 18px; color: #f3f3f3; word-wrap: break-word; padding-right: 36px; }
.mfp-image-holder .mfp-content { max-width: 100%; }
.mfp-gallery .mfp-image-holder .mfp-figure { cursor: pointer; }
@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) { /** Remove all paddings around the image on small screen */ .mfp-img-mobile .mfp-image-holder { padding-left: 0; padding-right: 0; } .mfp-img-mobile img.mfp-img { padding: 0; } .mfp-img-mobile .mfp-figure:after { top: 0; bottom: 0; } .mfp-img-mobile .mfp-figure small { display: inline; margin-left: 5px; } .mfp-img-mobile .mfp-bottom-bar { background: rgba(0, 0, 0, 0.6); bottom: 0; margin: 0; top: auto; padding: 3px 5px; position: fixed; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .mfp-img-mobile .mfp-bottom-bar:empty { padding: 0; } .mfp-img-mobile .mfp-counter { right: 5px; top: 3px; } .mfp-img-mobile .mfp-close { top: 0; right: 0; width: 35px; height: 35px; line-height: 35px; background: rgba(0, 0, 0, 0.6); position: fixed; text-align: center; padding: 0; } }
@media all and (max-width: 900px) { .mfp-arrow { -webkit-transform: scale(0.75); transform: scale(0.75); } .mfp-arrow-left { -webkit-transform-origin: 0; transform-origin: 0; } .mfp-arrow-right { -webkit-transform-origin: 100%; transform-origin: 100%; } .mfp-container { padding-left: 6px; padding-right: 6px; } }
.mfp-ie7 .mfp-img { padding: 0; }
.mfp-ie7 .mfp-bottom-bar { width: 600px; left: 50%; margin-left: -300px; margin-top: 5px; padding-bottom: 5px; }
.mfp-ie7 .mfp-container { padding: 0; }
.mfp-ie7 .mfp-content { padding-top: 44px; }
.mfp-ie7 .mfp-close { top: 0; right: 0; padding-top: 0; }
/* ========================================================================== MIXINS ========================================================================== */
button:focus, a:focus { /* Default*/ outline: thin dotted #f21368; /* Webkit*/ outline: 5px auto #f21368; outline-offset: -2px; }
/* em function ========================================================================== */
/* Bourbon clearfix ========================================================================== */
/* Provides an easy way to include a clearfix for containing floats. link http://cssmojo.com/latest_new_clearfix_so_far/ example scss - Usage .element { @include clearfix; } example css - CSS Output .element::after { clear: both; content: ""; display: table; } */
/* Compass YIQ Color Contrast https://github.com/easy-designs/yiq-color-contrast ========================================================================== */
/* Core CSS */
/* ========================================================================== STYLE RESETS ========================================================================== */
* { box-sizing: border-box; }
html { /* apply a natural box layout model to all elements */ box-sizing: border-box; background-color: #141010; font-size: 16px; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
@media (min-width: 48em) { html { font-size: 18px; } }
@media (min-width: 64em) { html { font-size: 20px; } }
@media (min-width: 80em) { html { font-size: 22px; } }
/* Remove margin */
body { margin: 0; }
/* Selected elements */
::-moz-selection { color: #fff; background: #000; }
::selection { color: #fff; background: #000; }
/* Display HTML5 elements in IE6-9 and FF3 */
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section { display: block; }
/* Display block in IE6-9 and FF3 */
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
/* Prevents modern browsers from displaying 'audio' without controls */
audio:not([controls]) { display: none; }
a { color: #f21368; }
/* Apply focus state */
/* Remove outline from links */
a:hover, a:active { outline: 0; }
/* Prevent sub and sup affecting line-height in all browsers */
sub, sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
/* img border in anchor's and image quality */
img { /* Responsive images (ensure images don't scale beyond their parents) */ max-width: 100%; /* part 1: Set a maximum relative to the parent*/ width: auto\9; /* IE7-8 need help adjusting responsive images*/ height: auto; /* part 2: Scale the height according to the width, otherwise you get stretching*/ vertical-align: middle; border: 0; -ms-interpolation-mode: bicubic; }
/* Prevent max-width from affecting Google Maps */
#map_canvas img, .google-maps img { max-width: none; }
/* Consistent form font size in all browsers, margin changes, misc */
button, input, select, textarea { margin: 0; font-size: 100%; vertical-align: middle; }
button, input { *overflow: visible; /* inner spacing ie IE6/7*/ line-height: normal; /* FF3/4 have !important on line-height in UA stylesheet*/ }
button::-moz-focus-inner, input::-moz-focus-inner { /* inner padding and border oddities in FF3/4*/ padding: 0; border: 0; }
button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* corrects inability to style clickable `input` types in iOS*/ cursor: pointer; /* improves usability and consistency of cursor style between image-type `input` and others*/ }
label, select, button, input[type="button"], input[type="reset"], input[type="submit"], input[type="radio"], input[type="checkbox"] { cursor: pointer; /* improves usability and consistency of cursor style between image-type `input` and others*/ }
input[type="search"] { /* Appearance in Safari/Chrome*/ box-sizing: border-box; -webkit-appearance: textfield; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; /* inner-padding issues in Chrome OSX, Safari 5*/ }
textarea { overflow: auto; /* remove vertical scrollbar in IE6-9*/ vertical-align: top; /* readability and alignment cross-browser*/ }
/* ========================================================================== BASE ELEMENTS ========================================================================== */
html { /* sticky footer fix */ position: relative; min-height: 100%; }
body { margin: 0; padding: 0; color: #fff6fb; font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif; line-height: 1.5; }
body.overflow--hidden { /* when primary navigation is visible, the content in the background won't scroll */ overflow: hidden; }
h1, h2, h3, h4, h5, h6 { margin: 2em 0 0.5em; line-height: 1.2; font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif; font-weight: bold; }
h1 { margin-top: 0; font-size: 1.563em; }
h2 { font-size: 1.25em; }
h3 { font-size: 1.125em; }
h4 { font-size: 1.0625em; }
h5 { font-size: 1.03125em; }
h6 { font-size: 1em; }
small, .small { font-size: 0.75em; }
p { margin-bottom: 1.3em; }
u, ins { text-decoration: none; border-bottom: 1px solid #fff6fb; }
u a, ins a { color: inherit; }
del a { color: inherit; }
/* reduce orphans and widows when printing */
p, pre, blockquote, ul, ol, dl, figure, table, fieldset { orphans: 3; widows: 3; }
/* abbreviations */
abbr[title], abbr[data-original-title] { text-decoration: none; cursor: help; border-bottom: 1px dotted #fff6fb; }
/* blockquotes */
blockquote { margin: 2em 1em 2em 0; padding-left: 1em; padding-right: 1em; font-style: italic; border-left: 0.25em solid #f21368; }
blockquote cite { font-style: italic; }
blockquote cite:before { content: "\2014"; padding-right: 5px; }
/* links */
a:visited { color: #b60e4e; }
a:hover { color: #f54e8e; outline: 0; }
/* buttons */
/* code */
tt, code, kbd, samp, pre { font-family: Monaco, Consolas, "Lucida Console", monospace; }
pre { overflow-x: auto; /* add scrollbars to wide code blocks*/ }
p > code, a > code, li > code, figcaption > code, td > code { padding-top: 0.1rem; padding-bottom: 0.1rem; font-size: 0.8em; background: #110e0e; border-radius: 4px; }
p > code:before, p > code:after, a > code:before, a > code:after, li > code:before, li > code:after, figcaption > code:before, figcaption > code:after, td > code:before, td > code:after { letter-spacing: -0.2em; content: "\00a0"; /* non-breaking space*/ }
/* horizontal rule */
hr { display: block; margin: 1em 0; border: 0; border-top: 1px solid #434040; }
/* lists */
ul li, ol li { margin-bottom: 0.5em; }
li ul, li ol { margin-top: 0.5em; }
/* Media and embeds ========================================================================== */
/* Figures and images */
figure { display: -webkit-box; display: flex; -webkit-box-pack: justify; justify-content: space-between; -webkit-box-align: start; align-items: flex-start; flex-wrap: wrap; margin: 2em 0; }
figure img, figure iframe, figure .fluid-width-video-wrapper { margin-bottom: 1em; }
figure img { width: 100%; border-radius: 4px; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }
figure > a { display: block; }
@media (min-width: 37.5em) { figure.half > a, figure.half > img { width: calc(50% - 0.5em); } }
figure.half figcaption { width: 100%; }
@media (min-width: 37.5em) { figure.third > a, figure.third > img { width: calc(33.3333% - 0.5em); } }
figure.third figcaption { width: 100%; }
/* Figure captions */
figcaption { margin-bottom: 0.5em; color: #fff8fc; font-family: Georgia, Times, serif; font-size: 0.75em; }
figcaption a { -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }
figcaption a:hover { color: #f54e8e; }
/* Fix IE9 SVG bug */
svg:not(:root) { overflow: hidden; }
/* Navigation lists ========================================================================== */
/** Removes margins, padding, and bullet points from navigation lists Example usage: <nav> <ul> <li><a href="#link-1">Link 1</a></li> <li><a href="#link-2">Link 2</a></li> <li><a href="#link-3">Link 3</a></li> </ul> </nav> */
nav { /* override white-space for nested lists */ }
nav ul { margin: 0; padding: 0; }
nav li { list-style: none; }
nav a { text-decoration: none; }
nav ul li, nav ol li { margin-bottom: 0; }
nav li ul, nav li ol { margin-top: 0; }
/* Global animation transition ========================================================================== */
b, i, strong, em, blockquote, p, q, span, figure, img, h1, h2, header, input, a, tr, td, form button, input[type="submit"], .btn, .highlight, .archive__item-teaser { -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }
/* ========================================================================== Forms ========================================================================== */
form { margin: 0 0 5px 0; padding: 1em; background-color: #110e0e; }
form fieldset { margin-bottom: 5px; padding: 0; border-width: 0; }
form legend { display: block; width: 100%; margin-bottom: 10px; *margin-left: -7px; padding: 0; color: #fff6fb; border: 0; white-space: normal; }
form p { margin-bottom: 2.5px; }
form ul { list-style-type: none; margin: 0 0 5px 0; padding: 0; }
form br { display: none; }
label, input, button, select, textarea { vertical-align: baseline; *vertical-align: middle; }
input, button, select, textarea { box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif; }
label { display: block; margin-bottom: 0.25em; color: #fff6fb; cursor: pointer; }
label small { font-size: 0.75em; }
label input, label textarea, label select { display: block; }
input, textarea, select { display: inline-block; width: 100%; padding: 0.25em; margin-bottom: 0.5em; color: #fff6fb; background-color: #141010; border: #434040; border-radius: 4px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.125); }
.input-mini { width: 60px; }
.input-small { width: 90px; }
input[type="image"], input[type="checkbox"], input[type="radio"] { width: auto; height: auto; padding: 0; margin: 3px 0; *margin-top: 0; line-height: normal; cursor: pointer; border-radius: 0; border: 0 \9; box-shadow: none; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
input[type="image"] { border: 0; }
input[type="file"] { width: auto; padding: initial; line-height: initial; border: initial; background-color: transparent; background-color: initial; box-shadow: none; }
input[type="button"], input[type="reset"], input[type="submit"] { width: auto; height: auto; cursor: pointer; *overflow: visible; }
select, input[type="file"] { *margin-top: 4px; }
select { width: auto; background-color: #fff; }
select[multiple], select[size] { height: auto; }
textarea { resize: vertical; height: auto; overflow: auto; vertical-align: top; }
input[type="hidden"] { display: none; }
.form { position: relative; }
.radio, .checkbox { padding-left: 18px; font-weight: normal; }
.radio input[type="radio"], .checkbox input[type="checkbox"] { float: left; margin-left: -18px; }
.radio.inline, .checkbox.inline { display: inline-block; padding-top: 5px; margin-bottom: 0; vertical-align: middle; }
.radio.inline + .radio.inline, .checkbox.inline + .checkbox.inline { margin-left: 10px; }
/* Disabled state ========================================================================== */
input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] { opacity: 0.5; cursor: not-allowed; }
/* Focus & active state ========================================================================== */
input:focus, textarea:focus { border-color: #f21368; outline: 0; outline: thin dotted \9; box-shadow: inset 0 1px 3px rgba(255, 246, 251, 0.06), 0 0 5px rgba(242, 19, 104, 0.7); }
input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus, select:focus { box-shadow: none; }
/* Help text ========================================================================== */
.help-block, .help-inline { color: #fff8fc; }
.help-block { display: block; margin-bottom: 1em; line-height: 1em; }
.help-inline { display: inline-block; vertical-align: middle; padding-left: 5px; }
/* .form-group ========================================================================== */
.form-group { margin-bottom: 5px; padding: 0; border-width: 0; }
/* .form-inline ========================================================================== */
.form-inline input, .form-inline textarea, .form-inline select { display: inline-block; margin-bottom: 0; }
.form-inline label { display: inline-block; }
.form-inline .radio, .form-inline .checkbox, .form-inline .radio { padding-left: 0; margin-bottom: 0; vertical-align: middle; }
.form-inline .radio input[type="radio"], .form-inline .checkbox input[type="checkbox"] { float: left; margin-left: 0; margin-right: 3px; }
/* .form-search ========================================================================== */
.form-search input, .form-search textarea, .form-search select { display: inline-block; margin-bottom: 0; }
.form-search .search-query { padding-left: 14px; padding-right: 14px; margin-bottom: 0; border-radius: 14px; }
.form-search label { display: inline-block; }
.form-search .radio, .form-search .checkbox, .form-inline .radio { padding-left: 0; margin-bottom: 0; vertical-align: middle; }
.form-search .radio input[type="radio"], .form-search .checkbox input[type="checkbox"] { float: left; margin-left: 0; margin-right: 3px; }
/* .form--loading ========================================================================== */
.form--loading:before { content: ""; }
.form--loading .form__spinner { display: block; }
.form:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.7); z-index: 10; }
.form__spinner { display: none; position: absolute; top: 50%; left: 50%; z-index: 11; }
/* ========================================================================== TABLES ========================================================================== */
table { display: block; margin-bottom: 1em; width: 100%; font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif; font-size: 0.75em; border-collapse: collapse; overflow-x: auto; }
table + table { margin-top: 1em; }
thead { background-color: #434040; border-bottom: 2px solid #323030; }
th { padding: 0.5em; font-weight: bold; text-align: left; }
td { padding: 0.5em; border-bottom: 1px solid #323030; }
tr, td, th { vertical-align: middle; }
/* ========================================================================== ANIMATIONS ========================================================================== */
@-webkit-keyframes intro { 0% { opacity: 0; }
100% { opacity: 1; } }
@keyframes intro { 0% { opacity: 0; }
100% { opacity: 1; } }
/* Components */
/* ========================================================================== BUTTONS ========================================================================== */
/* Default button ========================================================================== */
.btn { /* default */ display: inline-block; margin-bottom: 0.25em; padding: 0.5em 1em; font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif; font-size: 0.75em; font-weight: bold; text-align: center; text-decoration: none; border-width: 0; border-radius: 4px; cursor: pointer; /* button colors */ /* fills width of parent container */ /* disabled */ /* extra large button */ /* large button */ /* small button */ }
.btn .icon { margin-right: 0.5em; }
.btn .icon + .hidden { margin-left: -0.5em; /* override for hidden text*/ }
.btn--primary { background-color: #f21368; color: #fff; }
.btn--primary:visited { background-color: #f21368; color: #fff; }
.btn--primary:hover { background-color: #c20f53; color: #fff; }
.btn--inverse { background-color: #fff; color: #3d4144; border: 1px solid #434040; }
.btn--inverse:visited { background-color: #fff; color: #3d4144; }
.btn--inverse:hover { background-color: #cccccc; color: #3d4144; }
.btn--light-outline { background-color: transparent; color: #fff; border: 1px solid #fff; }
.btn--light-outline:visited { background-color: transparent; color: #fff; }
.btn--light-outline:hover { background-color: rgba(0, 0, 0, 0.2); color: #fff; }
.btn--success { background-color: #3fa63f; color: #fff; }
.btn--success:visited { background-color: #3fa63f; color: #fff; }
.btn--success:hover { background-color: #328532; color: #fff; }
.btn--warning { background-color: #d67f05; color: #fff; }
.btn--warning:visited { background-color: #d67f05; color: #fff; }
.btn--warning:hover { background-color: #ab6604; color: #fff; }
.btn--danger { background-color: #ee5f5b; color: #fff; }
.btn--danger:visited { background-color: #ee5f5b; color: #fff; }
.btn--danger:hover { background-color: #be4c49; color: #fff; }
.btn--info { background-color: #3b9cba; color: #fff; }
.btn--info:visited { background-color: #3b9cba; color: #fff; }
.btn--info:hover { background-color: #2f7d95; color: #fff; }
.btn--facebook { background-color: #3b5998; color: #fff; }
.btn--facebook:visited { background-color: #3b5998; color: #fff; }
.btn--facebook:hover { background-color: #2f477a; color: #fff; }
.btn--twitter { background-color: #55acee; color: #fff; }
.btn--twitter:visited { background-color: #55acee; color: #fff; }
.btn--twitter:hover { background-color: #448abe; color: #fff; }
.btn--linkedin { background-color: #007bb6; color: #fff; }
.btn--linkedin:visited { background-color: #007bb6; color: #fff; }
.btn--linkedin:hover { background-color: #006292; color: #fff; }
.btn--block { display: block; width: 100%; }
.btn--block + .btn--block { margin-top: 0.25em; }
.btn--disabled { pointer-events: none; cursor: not-allowed; filter: alpha(opacity=65); box-shadow: none; opacity: 0.65; }
.btn--x-large { font-size: 1.25em; }
.btn--large { font-size: 1em; }
.btn--small { font-size: 0.6875em; }
/* ========================================================================== NOTICE TEXT BLOCKS ========================================================================== */
/** Default Kramdown usage (no indents!): <div class="notice" markdown="1"> #### Headline for the Notice Text for the notice </div> */
/* Default notice */
.notice { margin: 2em 0 !important; /* override*/ padding: 1em; color: #fff6fb; font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif; font-size: 0.75em !important; text-indent: initial; /* override*/ background-color: #252222; border-radius: 4px; box-shadow: 0 1px 1px rgba(189, 193, 196, 0.25); }
.notice h4 { margin-top: 0 !important; /* override*/ margin-bottom: 0.75em; line-height: inherit; }
.page__content .notice h4 { /* using at-root to override .page-content h4 font size*/ margin-bottom: 0; font-size: 1em; }
.notice p:last-child { margin-bottom: 0 !important; /* override*/ }
.notice h4 + p { /* remove space above paragraphs that appear directly after notice headline*/ margin-top: 0; padding-top: 0; }
.notice a { color: #aaaeb0; }
.notice a:hover { color: #5f6162; }
.notice code { background-color: #1c1919; }
.notice pre code { background-color: inherit; }
.notice ul:last-child { margin-bottom: 0; /* override*/ }
/* Primary notice */
.notice--primary { margin: 2em 0 !important; /* override*/ padding: 1em; color: #fff6fb; font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif; font-size: 0.75em !important; text-indent: initial; /* override*/ background-color: #2a1019; border-radius: 4px; box-shadow: 0 1px 1px rgba(242, 19, 104, 0.25); }
.notice--primary h4 { margin-top: 0 !important; /* override*/ margin-bottom: 0.75em; line-height: inherit; }
.page__content .notice--primary h4 { /* using at-root to override .page-content h4 font size*/ margin-bottom: 0; font-size: 1em; }
.notice--primary p:last-child { margin-bottom: 0 !important; /* override*/ }
.notice--primary h4 + p { /* remove space above paragraphs that appear directly after notice headline*/ margin-top: 0; padding-top: 0; }
.notice--primary a { color: #da115e; }
.notice--primary a:hover { color: #790a34; }
.notice--primary code { background-color: #1f1014; }
.notice--primary pre code { background-color: inherit; }
.notice--primary ul:last-child { margin-bottom: 0; /* override*/ }
/* Info notice */
.notice--info { margin: 2em 0 !important; /* override*/ padding: 1em; color: #fff6fb; font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif; font-size: 0.75em !important; text-indent: initial; /* override*/ background-color: #181e21; border-radius: 4px; box-shadow: 0 1px 1px rgba(59, 156, 186, 0.25); }
.notice--info h4 { margin-top: 0 !important; /* override*/ margin-bottom: 0.75em; line-height: inherit; }
.page__content .notice--info h4 { /* using at-root to override .page-content h4 font size*/ margin-bottom: 0; font-size: 1em; }
.notice--info p:last-child { margin-bottom: 0 !important; /* override*/ }
.notice--info h4 + p { /* remove space above paragraphs that appear directly after notice headline*/ margin-top: 0; padding-top: 0; }
.notice--info a { color: #358ca7; }
.notice--info a:hover { color: #1e4e5d; }
.notice--info code { background-color: #161719; }
.notice--info pre code { background-color: inherit; }
.notice--info ul:last-child { margin-bottom: 0; /* override*/ }
/* Warning notice */
.notice--warning { margin: 2em 0 !important; /* override*/ padding: 1em; color: #fff6fb; font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif; font-size: 0.75em !important; text-indent: initial; /* override*/ background-color: #271b0f; border-radius: 4px; box-shadow: 0 1px 1px rgba(214, 127, 5, 0.25); }
.notice--warning h4 { margin-top: 0 !important; /* override*/ margin-bottom: 0.75em; line-height: inherit; }
.page__content .notice--warning h4 { /* using at-root to override .page-content h4 font size*/ margin-bottom: 0; font-size: 1em; }
.notice--warning p:last-child { margin-bottom: 0 !important; /* override*/ }
.notice--warning h4 + p { /* remove space above paragraphs that appear directly after notice headline*/ margin-top: 0; padding-top: 0; }
.notice--warning a { color: #c17205; }
.notice--warning a:hover { color: #6b4003; }
.notice--warning code { background-color: #1e160f; }
.notice--warning pre code { background-color: inherit; }
.notice--warning ul:last-child { margin-bottom: 0; /* override*/ }
/* Success notice */
.notice--success { margin: 2em 0 !important; /* override*/ padding: 1em; color: #fff6fb; font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif; font-size: 0.75em !important; text-indent: initial; /* override*/ background-color: #181f15; border-radius: 4px; box-shadow: 0 1px 1px rgba(63, 166, 63, 0.25); }
.notice--success h4 { margin-top: 0 !important; /* override*/ margin-bottom: 0.75em; line-height: inherit; }
.page__content .notice--success h4 { /* using at-root to override .page-content h4 font size*/ margin-bottom: 0; font-size: 1em; }
.notice--success p:last-child { margin-bottom: 0 !important; /* override*/ }
.notice--success h4 + p { /* remove space above paragraphs that appear directly after notice headline*/ margin-top: 0; padding-top: 0; }
.notice--success a { color: #399539; }
.notice--success a:hover { color: #205320; }
.notice--success code { background-color: #161812; }
.notice--success pre code { background-color: inherit; }
.notice--success ul:last-child { margin-bottom: 0; /* override*/ }
/* Danger notice */
.notice--danger { margin: 2em 0 !important; /* override*/ padding: 1em; color: #fff6fb; font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif; font-size: 0.75em !important; text-indent: initial; /* override*/ background-color: #2a1818; border-radius: 4px; box-shadow: 0 1px 1px rgba(238, 95, 91, 0.25); }
.notice--danger h4 { margin-top: 0 !important; /* override*/ margin-bottom: 0.75em; line-height: inherit; }
.page__content .notice--danger h4 { /* using at-root to override .page-content h4 font size*/ margin-bottom: 0; font-size: 1em; }
.notice--danger p:last-child { margin-bottom: 0 !important; /* override*/ }
.notice--danger h4 + p { /* remove space above paragraphs that appear directly after notice headline*/ margin-top: 0; padding-top: 0; }
.notice--danger a { color: #d65652; }
.notice--danger a:hover { color: #77302e; }
.notice--danger code { background-color: #1f1414; }
.notice--danger pre code { background-color: inherit; }
.notice--danger ul:last-child { margin-bottom: 0; /* override*/ }
/* ========================================================================== MASTHEAD ========================================================================== */
.masthead { position: relative; border-bottom: 1px solid #434040; -webkit-animation: intro 0.3s both; animation: intro 0.3s both; -webkit-animation-delay: 0.15s; animation-delay: 0.15s; z-index: 20; }
.masthead__inner-wrap { clear: both; margin-left: auto; margin-right: auto; padding: 1em; max-width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif; }
.masthead__inner-wrap::after { clear: both; content: ""; display: table; }
@media (min-width: 80em) { .masthead__inner-wrap { max-width: 1280px; } }
.masthead__inner-wrap nav { z-index: 10; }
.masthead__inner-wrap a { text-decoration: none; }
.site-logo img { max-height: 2rem; }
.site-title { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-item-align: center; align-self: center; font-weight: bold; }
.site-subtitle { display: block; font-size: 0.625em; }
.masthead__menu { float: left; margin-left: 0; margin-right: 0; width: 100%; clear: both; }
.masthead__menu .site-nav { margin-left: 0; }
@media (min-width: 37.5em) { .masthead__menu .site-nav { float: right; } }
.masthead__menu ul { margin: 0; padding: 0; clear: both; list-style-type: none; }
.masthead__menu-item { display: block; list-style-type: none; white-space: nowrap; }
.masthead__menu-item--lg { padding-right: 2em; font-weight: 700; }
/* ========================================================================== NAVIGATION ========================================================================== */
/* Breadcrumb navigation links ========================================================================== */
.breadcrumbs { clear: both; margin: 0 auto; max-width: 100%; padding-left: 1em; padding-right: 1em; font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif; -webkit-animation: intro 0.3s both; animation: intro 0.3s both; -webkit-animation-delay: 0.3s; animation-delay: 0.3s; }
.breadcrumbs::after { clear: both; content: ""; display: table; }
@media (min-width: 80em) { .breadcrumbs { max-width: 1280px; } }
.breadcrumbs ol { padding: 0; list-style: none; font-size: 0.75em; }
@media (min-width: 64em) { .breadcrumbs ol { float: right; width: calc(100% - 200px); } }
@media (min-width: 80em) { .breadcrumbs ol { width: calc(100% - 300px); } }
.breadcrumbs li { display: inline; }
.breadcrumbs .current { font-weight: bold; }
/* Post pagination navigation links ========================================================================== */
.pagination { clear: both; float: left; margin-top: 1em; padding-top: 1em; width: 100%; /* next/previous buttons */ }
.pagination::after { clear: both; content: ""; display: table; }
.pagination ul { margin: 0; padding: 0; list-style-type: none; font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif; }
.pagination li { display: block; float: left; margin-left: -1px; }
.pagination li a { display: block; margin-bottom: 0.25em; padding: 0.5em 1em; font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif; font-size: 14px; font-weight: bold; line-height: 1.5; text-align: center; text-decoration: none; color: #fff8fc; border: 1px solid #323030; border-radius: 0; }
.pagination li a:hover { color: #f54e8e; }
.pagination li a.current, .pagination li a.current.disabled { color: #fff; background: #f21368; }
.pagination li a.disabled { color: rgba(255, 248, 252, 0.5); pointer-events: none; cursor: not-allowed; }
.pagination li:first-child { margin-left: 0; }
.pagination li:first-child a { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
.pagination li:last-child a { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
.pagination--pager { display: block; padding: 1em 2em; float: left; width: 50%; font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif; font-size: 1em; font-weight: bold; text-align: center; text-decoration: none; color: #fff8fc; border: 1px solid #323030; border-radius: 4px; }
.pagination--pager:hover { background-color: #fff8fc; color: #3d4144; }
.pagination--pager:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.pagination--pager:last-child { margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.pagination--pager.disabled { color: rgba(255, 248, 252, 0.5); pointer-events: none; cursor: not-allowed; }
.page__content + .pagination, .page__meta + .pagination, .comment__date + .pagination, .page__share + .pagination, .page__comments + .pagination { margin-top: 2em; padding-top: 2em; border-top: 1px solid #434040; }
/* Priority plus navigation ========================================================================== */
.greedy-nav { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; min-height: 2em; background: #141010; }
.greedy-nav a { display: block; margin: 0 1rem; color: #fff6fb; text-decoration: none; -webkit-transition: none; transition: none; }
.greedy-nav a:hover { color: #ccc5c9; }
.greedy-nav a.site-logo { margin-left: 0; margin-right: 0.5rem; }
.greedy-nav a.site-title { margin-left: 0; }
.greedy-nav img { -webkit-transition: none; transition: none; }
.greedy-nav__toggle { -ms-flex-item-align: center; align-self: center; height: 2rem; border: 0; outline: none; background-color: transparent; cursor: pointer; }
.greedy-nav .visible-links { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; overflow: hidden; }
.greedy-nav .visible-links li { -webkit-box-flex: 0; -ms-flex: none; flex: none; }
.greedy-nav .visible-links a { position: relative; }
.greedy-nav .visible-links a:before { content: ""; position: absolute; left: 0; bottom: 0; height: 4px; background: #f21368; width: 100%; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-transform: scaleX(0) translate3d(0, 0, 0); transform: scaleX(0) translate3d(0, 0, 0); }
.greedy-nav .visible-links a:hover:before { -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); }
.greedy-nav .hidden-links { position: absolute; top: 100%; right: 0; margin-top: 15px; padding: 5px; border: 1px solid #434040; border-radius: 4px; background: #141010; -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); }
.greedy-nav .hidden-links.hidden { display: none; }
.greedy-nav .hidden-links a { margin: 0; padding: 10px 20px; font-size: 1em; }
.greedy-nav .hidden-links a:hover { color: #ccc5c9; background: #0e0b0b; }
.greedy-nav .hidden-links:before { content: ""; position: absolute; top: -11px; right: 10px; width: 0; border-style: solid; border-width: 0 10px 10px; border-color: #434040 transparent; display: block; z-index: 0; }
.greedy-nav .hidden-links:after { content: ""; position: absolute; top: -10px; right: 10px; width: 0; border-style: solid; border-width: 0 10px 10px; border-color: #141010 transparent; display: block; z-index: 1; }
.greedy-nav .hidden-links li { display: block; border-bottom: 1px solid #434040; }
.greedy-nav .hidden-links li:last-child { border-bottom: none; }
.no-js .greedy-nav .visible-links { -ms-flex-wrap: wrap; flex-wrap: wrap; overflow: visible; }
/* Navigation list ========================================================================== */
.nav__list { margin-bottom: 1.5em; }
.nav__list input[type="checkbox"], .nav__list label { display: none; }
@media (max-width: 63.9375em) { .nav__list { /* selected*/ /* on hover show expand*/ } .nav__list label { position: relative; display: inline-block; padding: 0.5em 2.5em 0.5em 1em; color: #7a8288; font-size: 0.75em; font-weight: bold; border: 1px solid #bdc1c4; border-radius: 4px; z-index: 20; -webkit-transition: 0.2s ease-out; transition: 0.2s ease-out; cursor: pointer; } .nav__list label:before, .nav__list label:after { content: ""; position: absolute; right: 1em; top: 1.25em; width: 0.75em; height: 0.125em; line-height: 1; background-color: #7a8288; -webkit-transition: 0.2s ease-out; transition: 0.2s ease-out; } .nav__list label:after { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .nav__list label:hover { color: #fff; border-color: #7a8288; background-color: #333333; } .nav__list label:hover:before, .nav__list label:hover:after { background-color: #fff; } .nav__list input:checked + label { color: white; background-color: #333333; } .nav__list input:checked + label:before, .nav__list input:checked + label:after { background-color: #fff; } .nav__list label:hover:after { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .nav__list input:checked + label:hover:after { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); } .nav__list ul { margin-bottom: 1em; } .nav__list a { display: block; padding: 0.25em 0; } }
@media (max-width: 63.9375em) and (min-width: 64em) { .nav__list a { padding-top: 0.125em; padding-bottom: 0.125em; } }
@media (max-width: 63.9375em) { .nav__list a:hover { text-decoration: underline; } }
.nav__list .nav__items { margin: 0; font-size: 1.25rem; }
.nav__list .nav__items a { color: inherit; }
.nav__list .nav__items .active { margin-left: -0.5em; padding-left: 0.5em; padding-right: 0.5em; font-weight: bold; }
@media (max-width: 63.9375em) { .nav__list .nav__items { position: relative; max-height: 0; opacity: 0%; overflow: hidden; z-index: 10; -webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; -webkit-transform: translate(0, 10%); -ms-transform: translate(0, 10%); transform: translate(0, 10%); } }
@media (max-width: 63.9375em) { .nav__list input:checked ~ .nav__items { -webkit-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; max-height: 9999px; /* exaggerate max-height to accommodate tall lists*/ overflow: visible; opacity: 1; margin-top: 1em; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } }
.nav__title { margin: 0; padding: 0.5rem 0.75rem; font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif; font-size: 1em; font-weight: bold; }
.nav__sub-title { display: block; margin: 0.5rem 0; padding: 0.25rem 0; font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif; font-size: 0.75em; font-weight: bold; text-transform: uppercase; border-bottom: 1px solid #434040; }
/* Table of contents navigation ========================================================================== */
.toc { font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif; color: #7a8288; background-color: #141010; border: 1px solid #434040; border-radius: 4px; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.125); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.125); }
.toc .nav__title { color: #fff; font-size: 0.75em; background: #f21368; border-top-left-radius: 4px; border-top-right-radius: 4px; }
.toc .active a { background-color: #fcd0e1; color: #3d4144; }
.toc__menu { margin: 0; padding: 0; width: 100%; list-style: none; font-size: 0.75em; }
@media (min-width: 64em) { .toc__menu { font-size: 0.6875em; } }
.toc__menu a { display: block; padding: 0.25rem 0.75rem; color: #fff8fc; font-weight: bold; line-height: 1.5; border-bottom: 1px solid #434040; }
.toc__menu a:hover { color: #fff6fb; }
.toc__menu li ul > li a { padding-left: 1.25rem; font-weight: normal; }
.toc__menu li ul li ul > li a { padding-left: 1.75rem; }
.toc__menu li ul li ul li ul > li a { padding-left: 2.25rem; }
.toc__menu li ul li ul li ul li ul > li a { padding-left: 2.75rem; }
.toc__menu li ul li ul li ul li ul li ul > li a { padding-left: 3.25rem; }
/* ========================================================================== FOOTER ========================================================================== */
.page__footer { clear: both; float: left; margin-left: 0; margin-right: 0; width: 100%; margin-top: 3em; color: #fff8fc; -webkit-animation: intro 0.3s both; animation: intro 0.3s both; -webkit-animation-delay: 0.45s; animation-delay: 0.45s; background-color: #18020a; }
.page__footer::after { clear: both; content: ""; display: table; }
.page__footer footer { clear: both; margin-left: auto; margin-right: auto; margin-top: 2em; max-width: 100%; padding: 0 1em 2em; }
.page__footer footer::after { clear: both; content: ""; display: table; }
@media (min-width: 80em) { .page__footer footer { max-width: 1280px; } }
.page__footer a { color: inherit; text-decoration: none; }
.page__footer a:hover { text-decoration: underline; }
.page__footer .fas, .page__footer .fab, .page__footer .far, .page__footer .fal { color: #fff8fc; }
.page__footer-copyright { font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif; font-size: 0.6875em; }
.page__footer-follow ul { margin: 0; padding: 0; list-style-type: none; }
.page__footer-follow li { display: inline-block; padding-top: 5px; padding-bottom: 5px; font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif; font-size: 0.75em; text-transform: uppercase; }
.page__footer-follow li + li:before { content: ""; padding-right: 5px; }
.page__footer-follow a { padding-right: 10px; font-weight: bold; }
.page__footer-follow .social-icons a { white-space: nowrap; }
/* ========================================================================== SEARCH ========================================================================== */
.layout--search .archive__item-teaser { margin-bottom: 0.25em; }
.search__toggle { margin-left: 1rem; margin-right: 1rem; height: 2rem; border: 0; outline: none; color: #f21368; background-color: transparent; cursor: pointer; -webkit-transition: 0.2s; transition: 0.2s; }
.search__toggle:hover { color: #b60e4e; }
.search-icon { width: 100%; height: 100%; }
.search-content { display: none; visibility: hidden; padding-top: 1em; padding-bottom: 1em; }
.search-content__inner-wrap { width: 100%; margin-left: auto; margin-right: auto; padding-left: 1em; padding-right: 1em; -webkit-animation: intro 0.3s both; animation: intro 0.3s both; -webkit-animation-delay: 0.15s; animation-delay: 0.15s; }
@media (min-width: 80em) { .search-content__inner-wrap { max-width: 1280px; } }
.search-content__form { background-color: transparent; }
.search-content .search-input { display: block; margin-bottom: 0; padding: 0; border: none; outline: none; box-shadow: none; background-color: transparent; font-size: 1.563em; }
@media (min-width: 64em) { .search-content .search-input { font-size: 1.953em; } }
@media (min-width: 80em) { .search-content .search-input { font-size: 2.441em; } }
.search-content.is--visible { display: block; visibility: visible; }
.search-content.is--visible::after { content: ""; display: block; }
.search-content .results__found { margin-top: 0.5em; font-size: 0.75em; }
.search-content .archive__item { margin-bottom: 2em; }
@media (min-width: 64em) { .search-content .archive__item { width: 75%; } }
@media (min-width: 80em) { .search-content .archive__item { width: 50%; } }
.search-content .archive__item-title { margin-top: 0; }
.search-content .archive__item-excerpt { margin-bottom: 0; }
/* Algolia search */
.ais-search-box { max-width: 100% !important; margin-bottom: 2em; }
.archive__item-title .ais-Highlight { color: #f21368; font-style: normal; text-decoration: underline; }
.archive__item-excerpt .ais-Highlight { color: #f21368; font-style: normal; font-weight: bold; }
/* ========================================================================== Syntax highlighting ========================================================================== */
div.highlighter-rouge, figure.highlight { position: relative; margin-bottom: 1em; background: #1e0f15; color: #eeffff; font-family: Monaco, Consolas, "Lucida Console", monospace; font-size: 0.75em; line-height: 1.8; border-radius: 4px; }
div.highlighter-rouge > pre, div.highlighter-rouge pre.highlight, figure.highlight > pre, figure.highlight pre.highlight { margin: 0; padding: 1em; }
.highlight table { margin-bottom: 0; font-size: 1em; border: 0; }
.highlight table td { padding: 0; width: calc(100% - 1em); border: 0; /* line numbers*/ /* code */ }
.highlight table td.gutter, .highlight table td.rouge-gutter { padding-right: 1em; width: 1em; color: #b2ccd6; border-right: 1px solid #b2ccd6; text-align: right; }
.highlight table td.code, .highlight table td.rouge-code { padding-left: 1em; }
.highlight table pre { margin: 0; }
.highlight pre { width: 100%; }
.highlight .hll { background-color: #eeffff; }
.highlight .c { /* Comment */ color: #b2ccd6; }
.highlight .err { /* Error */ color: #f07178; }
.highlight .k { /* Keyword */ color: #c792ea; }
.highlight .l { /* Literal */ color: #f78c6c; }
.highlight .n { /* Name */ color: #eeffff; }
.highlight .o { /* Operator */ color: #89ddff; }
.highlight .p { /* Punctuation */ color: #eeffff; }
.highlight .cm { /* Comment.Multiline */ color: #b2ccd6; }
.highlight .cp { /* Comment.Preproc */ color: #b2ccd6; }
.highlight .c1 { /* Comment.Single */ color: #b2ccd6; }
.highlight .cs { /* Comment.Special */ color: #b2ccd6; }
.highlight .gd { /* Generic.Deleted */ color: #f07178; }
.highlight .ge { /* Generic.Emph */ font-style: italic; }
.highlight .gh { /* Generic.Heading */ color: #eeffff; font-weight: bold; }
.highlight .gi { /* Generic.Inserted */ color: #c3e88d; }
.highlight .gp { /* Generic.Prompt */ color: #b2ccd6; font-weight: bold; }
.highlight .gs { /* Generic.Strong */ font-weight: bold; }
.highlight .gu { /* Generic.Subheading */ color: #89ddff; font-weight: bold; }
.highlight .kc { /* Keyword.Constant */ color: #c792ea; }
.highlight .kd { /* Keyword.Declaration */ color: #c792ea; }
.highlight .kn { /* Keyword.Namespace */ color: #89ddff; }
.highlight .kp { /* Keyword.Pseudo */ color: #c792ea; }
.highlight .kr { /* Keyword.Reserved */ color: #c792ea; }
.highlight .kt { /* Keyword.Type */ color: #ffcb6b; }
.highlight .ld { /* Literal.Date */ color: #c3e88d; }
.highlight .m { /* Literal.Number */ color: #f78c6c; }
.highlight .s { /* Literal.String */ color: #c3e88d; }
.highlight .na { /* Name.Attribute */ color: #82aaff; }
.highlight .nb { /* Name.Builtin */ color: #eeffff; }
.highlight .nc { /* Name.Class */ color: #ffcb6b; }
.highlight .no { /* Name.Constant */ color: #f07178; }
.highlight .nd { /* Name.Decorator */ color: #89ddff; }
.highlight .ni { /* Name.Entity */ color: #eeffff; }
.highlight .ne { /* Name.Exception */ color: #f07178; }
.highlight .nf { /* Name.Function */ color: #82aaff; }
.highlight .nl { /* Name.Label */ color: #eeffff; }
.highlight .nn { /* Name.Namespace */ color: #ffcb6b; }
.highlight .nx { /* Name.Other */ color: #82aaff; }
.highlight .py { /* Name.Property */ color: #eeffff; }
.highlight .nt { /* Name.Tag */ color: #89ddff; }
.highlight .nv { /* Name.Variable */ color: #f07178; }
.highlight .ow { /* Operator.Word */ color: #89ddff; }
.highlight .w { /* Text.Whitespace */ color: #eeffff; }
.highlight .mf { /* Literal.Number.Float */ color: #f78c6c; }
.highlight .mh { /* Literal.Number.Hex */ color: #f78c6c; }
.highlight .mi { /* Literal.Number.Integer */ color: #f78c6c; }
.highlight .mo { /* Literal.Number.Oct */ color: #f78c6c; }
.highlight .sb { /* Literal.String.Backtick */ color: #c3e88d; }
.highlight .sc { /* Literal.String.Char */ color: #eeffff; }
.highlight .sd { /* Literal.String.Doc */ color: #b2ccd6; }
.highlight .s2 { /* Literal.String.Double */ color: #c3e88d; }
.highlight .se { /* Literal.String.Escape */ color: #f78c6c; }
.highlight .sh { /* Literal.String.Heredoc */ color: #c3e88d; }
.highlight .si { /* Literal.String.Interpol */ color: #f78c6c; }
.highlight .sx { /* Literal.String.Other */ color: #c3e88d; }
.highlight .sr { /* Literal.String.Regex */ color: #c3e88d; }
.highlight .s1 { /* Literal.String.Single */ color: #c3e88d; }
.highlight .ss { /* Literal.String.Symbol */ color: #c3e88d; }
.highlight .bp { /* Name.Builtin.Pseudo */ color: #eeffff; }
.highlight .vc { /* Name.Variable.Class */ color: #f07178; }
.highlight .vg { /* Name.Variable.Global */ color: #f07178; }
.highlight .vi { /* Name.Variable.Instance */ color: #f07178; }
.highlight .il { /* Literal.Number.Integer.Long */ color: #f78c6c; }
.gist th, .gist td { border-bottom: 0; }
/* Utility classes */
/* ========================================================================== UTILITY CLASSES ========================================================================== */
/* Visibility ========================================================================== */
/* http://www.456bereastreet.com/archive/200711/screen_readers_sometimes_ignore_displaynone/ */
.hidden, .is--hidden { display: none; visibility: hidden; }
/* for preloading images */
.load { display: none; }
.transparent { opacity: 0; }
/* https://developer.yahoo.com/blogs/ydn/clip-hidden-content-better-accessibility-53456.html */
.visually-hidden, .screen-reader-text, .screen-reader-text span, .screen-reader-shortcut { position: absolute !important; clip: rect(1px, 1px, 1px, 1px); height: 1px !important; width: 1px !important; border: 0 !important; overflow: hidden; }
body:hover .visually-hidden a, body:hover .visually-hidden input, body:hover .visually-hidden button { display: none !important; }
/* screen readers */
.screen-reader-text:focus, .screen-reader-shortcut:focus { clip: auto !important; height: auto !important; width: auto !important; display: block; font-size: 1em; font-weight: bold; padding: 15px 23px 14px; background: #fff; z-index: 100000; text-decoration: none; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); }
/* Skip links ========================================================================== */
.skip-link { position: fixed; z-index: 20; margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif; white-space: nowrap; }
.skip-link li { height: 0; width: 0; list-style: none; }
/* Type ========================================================================== */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }
.text-nowrap { white-space: nowrap; }
/* Task lists ========================================================================== */
.task-list { padding: 0; }
.task-list li { list-style-type: none; }
.task-list .task-list-item-checkbox { margin-right: 0.5em; opacity: 1; }
.task-list .task-list { margin-left: 1em; }
/* Alignment ========================================================================== */
/* clearfix */
.cf { clear: both; }
.wrapper { margin-left: auto; margin-right: auto; width: 100%; }
/* Images ========================================================================== */
/* image align left */
.align-left { display: block; margin-left: auto; margin-right: auto; }
@media (min-width: 37.5em) { .align-left { float: left; margin-right: 1em; } }
/* image align right */
.align-right { display: block; margin-left: auto; margin-right: auto; }
@media (min-width: 37.5em) { .align-right { float: right; margin-left: 1em; } }
/* image align center */
.align-center { display: block; margin-left: auto; margin-right: auto; }
/* file page content container */
@media (min-width: 64em) { .full { margin-right: -20.3389830508% !important; } }
/* Icons ========================================================================== */
.icon { display: inline-block; fill: currentColor; width: 1em; height: 1.1em; line-height: 1; position: relative; top: -0.1em; vertical-align: middle; }
/* social icons*/
.social-icons .fas, .social-icons .fab, .social-icons .far, .social-icons .fal { color: #fff6fb; }
.social-icons .fa-behance, .social-icons .fa-behance-square { color: #1769ff; }
.social-icons .fa-bitbucket { color: #205081; }
.social-icons .fa-dribbble, .social-icons .fa-dribble-square { color: #ea4c89; }
.social-icons .fa-facebook, .social-icons .fa-facebook-square, .social-icons .fa-facebook-f { color: #3b5998; }
.social-icons .fa-flickr { color: #ff0084; }
.social-icons .fa-foursquare { color: #0072b1; }
.social-icons .fa-github, .social-icons .fa-github-alt, .social-icons .fa-github-square { color: #171516; }
.social-icons .fa-gitlab { color: #e24329; }
.social-icons .fa-instagram { color: #517fa4; }
.social-icons .fa-keybase { color: #ef7639; }
.social-icons .fa-lastfm, .social-icons .fa-lastfm-square { color: #d51007; }
.social-icons .fa-linkedin, .social-icons .fa-linkedin-in { color: #007bb6; }
.social-icons .fa-mastodon, .social-icons .fa-mastodon-square { color: #2b90d9; }
.social-icons .fa-pinterest, .social-icons .fa-pinterest-p, .social-icons .fa-pinterest-square { color: #cb2027; }
.social-icons .fa-reddit { color: #ff4500; }
.social-icons .fa-rss, .social-icons .fa-rss-square { color: #fa9b39; }
.social-icons .fa-soundcloud { color: #ff3300; }
.social-icons .fa-stack-exchange, .social-icons .fa-stack-overflow { color: #fe7a15; }
.social-icons .fa-tumblr, .social-icons .fa-tumblr-square { color: #32506d; }
.social-icons .fa-twitter, .social-icons .fa-twitter-square { color: #55acee; }
.social-icons .fa-vimeo, .social-icons .fa-vimeo-square, .social-icons .fa-vimeo-v { color: #1ab7ea; }
.social-icons .fa-vine { color: #00bf8f; }
.social-icons .fa-youtube { color: #bb0000; }
.social-icons .fa-xing, .social-icons .fa-xing-square { color: #006567; }
/* Navicons ========================================================================== */
.navicon { position: relative; width: 1.5rem; height: 0.25rem; background: #f21368; margin: auto; -webkit-transition: 0.3s; transition: 0.3s; }
.navicon:before, .navicon:after { content: ""; position: absolute; left: 0; width: 1.5rem; height: 0.25rem; background: #f21368; -webkit-transition: 0.3s; transition: 0.3s; }
.navicon:before { top: -0.5rem; }
.navicon:after { bottom: -0.5rem; }
.close .navicon { /* hide the middle line*/ background: transparent; /* overlay the lines by setting both their top values to 0*/ /* rotate the lines to form the x shape*/ }
.close .navicon:before, .close .navicon:after { -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; top: 0; width: 1.5rem; }
.close .navicon:before { -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); }
.close .navicon:after { -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); }
@supports (pointer-events: none) { .greedy-nav__toggle:before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; background-color: #141010; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; pointer-events: none; } }
.greedy-nav__toggle.close:before { opacity: 0.9; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; pointer-events: auto; }
.greedy-nav__toggle:hover .navicon, .greedy-nav__toggle:hover .navicon:before, .greedy-nav__toggle:hover .navicon:after { background: #b60e4e; }
.greedy-nav__toggle.close:hover .navicon { background: transparent; }
/* Sticky, fixed to top content ========================================================================== */
@media (min-width: 64em) { .sticky { clear: both; position: -webkit-sticky; position: sticky; top: 2em; } .sticky::after { clear: both; content: ""; display: table; } .sticky > * { display: block; } }
/* Wells ========================================================================== */
.well { min-height: 20px; padding: 19px; margin-bottom: 20px; background-color: #f5f5f5; border: 1px solid #e3e3e3; border-radius: 4px; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); }
/* Modals ========================================================================== */
.show-modal { overflow: hidden; position: relative; }
.show-modal:before { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; background-color: rgba(255, 255, 255, 0.85); }
.show-modal .modal { display: block; }
.modal { display: none; position: fixed; width: 300px; top: 50%; left: 50%; margin-left: -150px; margin-top: -150px; min-height: 0; z-index: 9999; background: #fff; border: 1px solid #434040; border-radius: 4px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.125); }
.modal__title { margin: 0; padding: 0.5em 1em; }
.modal__supporting-text { padding: 0 1em 0.5em 1em; }
.modal__actions { padding: 0.5em 1em; border-top: 1px solid #434040; }
/* Footnotes ========================================================================== */
.footnote { color: #9ba1a6; text-decoration: none; }
.footnotes { color: #9ba1a6; }
.footnotes ol, .footnotes li, .footnotes p { margin-bottom: 0; font-size: 0.75em; }
a.reversefootnote { color: #7a8288; text-decoration: none; }
a.reversefootnote:hover { text-decoration: underline; }
/* Required ========================================================================== */
.required { color: #ee5f5b; font-weight: bold; }
/* Google Custom Search Engine ========================================================================== */
.gsc-control-cse table, .gsc-control-cse tr, .gsc-control-cse td { border: 0; /* remove table borders widget */ }
/* Responsive Video Embed ========================================================================== */
.responsive-video-container { position: relative; margin-bottom: 1em; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; }
.responsive-video-container iframe, .responsive-video-container object, .responsive-video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
:-webkit-full-screen-ancestor .masthead, :-webkit-full-screen-ancestor .page__footer { position: static; }
/* Layout specific */
/* ========================================================================== SINGLE PAGE/POST ========================================================================== */
#main { clear: both; margin-left: auto; margin-right: auto; padding-left: 1em; padding-right: 1em; -webkit-animation: intro 0.3s both; animation: intro 0.3s both; max-width: 100%; -webkit-animation-delay: 0.15s; animation-delay: 0.15s; }
#main::after { clear: both; content: ""; display: table; }
@media (min-width: 80em) { #main { max-width: 1280px; } }
body { display: -webkit-box; display: -ms-flexbox; display: flex; min-height: 100vh; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.initial-content, .search-content { flex: 1 0 auto; }
@media (min-width: 64em) { .page { float: right; width: calc(100% - 200px); padding-right: 200px; } }
@media (min-width: 80em) { .page { width: calc(100% - 300px); padding-right: 300px; } }
.page .page__inner-wrap { float: left; margin-top: 1em; margin-left: 0; margin-right: 0; width: 100%; clear: both; }
.page .page__inner-wrap .page__content, .page .page__inner-wrap .page__meta, .page .page__inner-wrap .comment__date, .page .page__inner-wrap .page__share { position: relative; float: left; margin-left: 0; margin-right: 0; width: 100%; clear: both; }
.page__title { margin-top: 0; line-height: 1; }
.page__title + .page__meta, .page__title + .comment__date { margin-top: -0.5em; }
.page__lead { font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif; font-size: 1.25em; }
.page__content { /* paragraph indents */ /* blockquote citations */ }
.page__content h2 { padding-bottom: 0.5em; border-bottom: 1px solid #434040; }
.page__content h1 .header-link, .page__content h2 .header-link, .page__content h3 .header-link, .page__content h4 .header-link, .page__content h5 .header-link, .page__content h6 .header-link { position: relative; left: 0.5em; opacity: 0; font-size: 0.8em; -webkit-transition: opacity 0.2s ease-in-out 0.1s; -moz-transition: opacity 0.2s ease-in-out 0.1s; -o-transition: opacity 0.2s ease-in-out 0.1s; transition: opacity 0.2s ease-in-out 0.1s; }
.page__content h1:hover .header-link, .page__content h2:hover .header-link, .page__content h3:hover .header-link, .page__content h4:hover .header-link, .page__content h5:hover .header-link, .page__content h6:hover .header-link { opacity: 1; }
.page__content p, .page__content li, .page__content dl { font-size: 1em; }
.page__content p { margin: 0 0 1.3em; /* sibling indentation*/ }
.page__content a:not(.btn):hover { text-decoration: underline; }
.page__content a:not(.btn):hover img { box-shadow: 0 0 10px rgba(0, 0, 0, 0.25); }
.page__content dt { margin-top: 1em; font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif; font-weight: bold; }
.page__content dd { margin-left: 1em; font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif; font-size: 0.75em; }
.page__content .small { font-size: 0.75em; }
.page__content blockquote + .small { margin-top: -1.5em; padding-left: 1.25rem; }
.page__hero { position: relative; margin-bottom: 2em; clear: both; -webkit-animation: intro 0.3s both; animation: intro 0.3s both; -webkit-animation-delay: 0.25s; animation-delay: 0.25s; }
.page__hero::after { clear: both; content: ""; display: table; }
.page__hero--overlay { position: relative; margin-bottom: 2em; padding: 3em 0; clear: both; background-size: cover; background-repeat: no-repeat; background-position: center; -webkit-animation: intro 0.3s both; animation: intro 0.3s both; -webkit-animation-delay: 0.25s; animation-delay: 0.25s; }
.page__hero--overlay::after { clear: both; content: ""; display: table; }
.page__hero--overlay a { color: #fff; }
.page__hero--overlay .wrapper { padding-left: 1em; padding-right: 1em; }
@media (min-width: 80em) { .page__hero--overlay .wrapper { max-width: 1280px; } }
.page__hero--overlay .page__title, .page__hero--overlay .page__meta, .page__hero--overlay .comment__date, .page__hero--overlay .page__lead, .page__hero--overlay .btn { color: #fff; text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5); }
.page__hero--overlay .page__lead { max-width: 768px; }
.page__hero--overlay .page__title { font-size: 1.953em; }
@media (min-width: 37.5em) { .page__hero--overlay .page__title { font-size: 2.441em; } }
.page__hero-image { width: 100%; height: auto; -ms-interpolation-mode: bicubic; }
.page__hero-caption { position: absolute; bottom: 0; right: 0; margin: 0 auto; padding: 2px 5px; color: #fff; font-family: Georgia, Times, serif; font-size: 0.6875em; background: #000; text-align: right; z-index: 5; opacity: 0.5; border-radius: 4px 0 0 0; }
@media (min-width: 64em) { .page__hero-caption { padding: 5px 10px; } }
.page__hero-caption a { color: #fff; text-decoration: none; }
/* Social sharing ========================================================================== */
.page__share { margin-top: 2em; padding-top: 1em; border-top: 1px solid #434040; }
@media (max-width: 37.5em) { .page__share .btn span { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } }
.page__share-title { margin-bottom: 10px; font-size: 0.75em; text-transform: uppercase; }
/* Page meta ========================================================================== */
.page__meta, .comment__date { margin-top: 2em; color: #fff8fc; font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif; font-size: 0.75em; }
.page__meta p, .comment__date p { margin: 0; }
.page__meta a, .comment__date a { color: inherit; }
.page__meta-title { margin-bottom: 10px; font-size: 0.75em; text-transform: uppercase; }
.page__meta-sep::before { content: "\2022"; padding-left: 0.5em; padding-right: 0.5em; }
/* Page taxonomy ========================================================================== */
.page__taxonomy .sep { display: none; }
.page__taxonomy strong { margin-right: 10px; }
.page__taxonomy-item { display: inline-block; margin-right: 5px; margin-bottom: 8px; padding: 5px 10px; text-decoration: none; border: 1px solid #323030; border-radius: 4px; }
.page__taxonomy-item:hover { text-decoration: none; color: #f54e8e; }
.taxonomy__section { margin-bottom: 2em; padding-bottom: 1em; }
.taxonomy__section:not(:last-child) { border-bottom: solid 1px #434040; }
.taxonomy__section .archive__item-title { margin-top: 0; }
.taxonomy__section .archive__subtitle { clear: both; border: 0; }
.taxonomy__section + .taxonomy__section { margin-top: 2em; }
.taxonomy__title { margin-bottom: 0.5em; color: #fff8fc; }
.taxonomy__count { color: #fff8fc; }
.taxonomy__index { display: grid; grid-column-gap: 2em; grid-template-columns: repeat(2, 1fr); margin: 1.414em 0; padding: 0; font-size: 0.75em; list-style: none; }
@media (min-width: 64em) { .taxonomy__index { grid-template-columns: repeat(3, 1fr); } }
.taxonomy__index a { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 0.25em 0; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; color: inherit; text-decoration: none; border-bottom: 1px solid #434040; }
.back-to-top { display: block; clear: both; color: #fff8fc; font-size: 0.6em; text-transform: uppercase; text-align: right; text-decoration: none; }
/* Comments ========================================================================== */
.page__comments { float: left; margin-left: 0; margin-right: 0; width: 100%; clear: both; }
.page__comments-title { margin-top: 2rem; margin-bottom: 10px; padding-top: 2rem; font-size: 0.75em; border-top: 1px solid #434040; text-transform: uppercase; }
.page__comments-form { -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }
.page__comments-form.disabled input, .page__comments-form.disabled button, .page__comments-form.disabled textarea, .page__comments-form.disabled label { pointer-events: none; cursor: not-allowed; filter: alpha(opacity=65); box-shadow: none; opacity: 0.65; }
.comment { clear: both; margin: 1em 0; }
.comment::after { clear: both; content: ""; display: table; }
.comment:not(:last-child) { border-bottom: 1px solid #434040; }
.comment__avatar-wrapper { float: left; width: 60px; height: 60px; }
@media (min-width: 64em) { .comment__avatar-wrapper { width: 100px; height: 100px; } }
.comment__avatar { width: 40px; height: 40px; border-radius: 50%; }
@media (min-width: 64em) { .comment__avatar { width: 80px; height: 80px; padding: 5px; border: 1px solid #434040; } }
.comment__content-wrapper { float: right; width: calc(100% - 60px); }
@media (min-width: 64em) { .comment__content-wrapper { width: calc(100% - 100px); } }
.comment__author { margin: 0; }
.comment__author a { text-decoration: none; }
.comment__date { margin: 0; }
.comment__date a { text-decoration: none; }
/* Related ========================================================================== */
.page__related { clear: both; float: left; margin-top: 2em; padding-top: 1em; border-top: 1px solid #434040; }
.page__related::after { clear: both; content: ""; display: table; }
@media (min-width: 64em) { .page__related { float: right; width: calc(100% - 200px); } }
@media (min-width: 80em) { .page__related { width: calc(100% - 300px); } }
.page__related a { color: inherit; text-decoration: none; }
.page__related-title { margin-bottom: 10px; font-size: 0.75em; text-transform: uppercase; }
/* Wide Pages ========================================================================== */
@media (min-width: 64em) { .wide .page { padding-right: 0; } }
@media (min-width: 80em) { .wide .page { padding-right: 0; } }
@media (min-width: 64em) { .wide .page__related { padding-right: 0; } }
@media (min-width: 80em) { .wide .page__related { padding-right: 0; } }
/* ========================================================================== ARCHIVE ========================================================================== */
.archive { margin-top: 1em; margin-bottom: 2em; }
@media (min-width: 64em) { .archive { float: right; width: calc(100% - 200px); padding-right: 200px; } }
@media (min-width: 80em) { .archive { width: calc(100% - 300px); padding-right: 300px; } }
.archive__item { position: relative; }
.archive__item a { position: relative; z-index: 10; }
.archive__item a[rel="permalink"] { position: static; }
.archive__subtitle { margin: 1.414em 0 0.5em; padding-bottom: 0.5em; font-size: 1em; color: #fff8fc; border-bottom: 1px solid #434040; }
.archive__subtitle + .list__item .archive__item-title { margin-top: 0.5em; }
.archive__item-title { margin-bottom: 0.25em; font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif; line-height: initial; overflow: hidden; text-overflow: ellipsis; }
.archive__item-title a[rel="permalink"]::before { content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; }
.archive__item-title a + a { opacity: 0.5; }
/* remove border*/
.page__content .archive__item-title { margin-top: 1em; border-bottom: none; }
.archive__item-excerpt { margin-top: 0; font-size: 0.75em; }
.archive__item-excerpt + p { text-indent: 0; }
.archive__item-excerpt a { position: relative; }
.archive__item-teaser { position: relative; border-radius: 4px; overflow: hidden; }
.archive__item-teaser img { width: 100%; }
.archive__item-caption { position: absolute; bottom: 0; right: 0; margin: 0 auto; padding: 2px 5px; color: #fff; font-family: Georgia, Times, serif; font-size: 0.625em; background: #000; text-align: right; z-index: 5; opacity: 0.5; border-radius: 4px 0 0 0; }
@media (min-width: 64em) { .archive__item-caption { padding: 5px 10px; } }
.archive__item-caption a { color: #fff; text-decoration: none; }
/* List view ========================================================================== */
.list__item .page__meta, .list__item .comment__date { margin: 0 0 4px; font-size: 0.6em; }
/* Grid view ========================================================================== */
.archive .grid__wrapper { /* extend grid elements to the right */ }
@media (min-width: 64em) { .archive .grid__wrapper { margin-right: -200px; } }
@media (min-width: 80em) { .archive .grid__wrapper { margin-right: -300px; } }
.grid__item { margin-bottom: 2em; }
@media (min-width: 37.5em) { .grid__item { float: left; width: 48.9795918367%; } .grid__item:nth-child(2n + 1) { clear: both; margin-left: 0; } .grid__item:nth-child(2n + 2) { clear: none; margin-left: 2.0408163265%; } }
@media (min-width: 48em) { .grid__item { margin-left: 0; /* override margin*/ margin-right: 0; /* override margin*/ width: 23.7288135593%; } .grid__item:nth-child(2n + 1) { clear: none; } .grid__item:nth-child(4n + 1) { clear: both; } .grid__item:nth-child(4n + 2) { clear: none; margin-left: 1.6949152542%; } .grid__item:nth-child(4n + 3) { clear: none; margin-left: 1.6949152542%; } .grid__item:nth-child(4n + 4) { clear: none; margin-left: 1.6949152542%; } }
.grid__item .page__meta, .grid__item .comment__date { margin: 0 0 4px; font-size: 0.6em; }
.grid__item .page__meta-sep { display: block; }
.grid__item .page__meta-sep::before { display: none; }
.grid__item .archive__item-title { margin-top: 0.5em; font-size: 1em; }
.grid__item .archive__item-excerpt { display: none; }
@media (min-width: 48em) { .grid__item .archive__item-excerpt { display: block; font-size: 0.75em; } }
@media (min-width: 37.5em) { .grid__item .archive__item-teaser { max-height: 200px; } }
@media (min-width: 48em) { .grid__item .archive__item-teaser { max-height: 120px; } }
/* Features ========================================================================== */
.feature__wrapper { clear: both; margin-bottom: 2em; border-bottom: 1px solid #434040; }
.feature__wrapper::after { clear: both; content: ""; display: table; }
.feature__wrapper .archive__item-title { margin-bottom: 0; }
.feature__item { position: relative; margin-bottom: 2em; font-size: 1.125em; }
@media (min-width: 37.5em) { .feature__item { float: left; margin-bottom: 0; width: 32.2033898305%; } .feature__item:nth-child(3n + 1) { clear: both; margin-left: 0; } .feature__item:nth-child(3n + 2) { clear: none; margin-left: 1.6949152542%; } .feature__item:nth-child(3n + 3) { clear: none; margin-left: 1.6949152542%; } .feature__item .feature__item-teaser { max-height: 200px; overflow: hidden; } }
.feature__item .archive__item-body { padding-left: 1.6949152542%; padding-right: 1.6949152542%; }
.feature__item a.btn::before { content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; }
.feature__item--left { position: relative; float: left; margin-left: 0; margin-right: 0; width: 100%; clear: both; font-size: 1.125em; }
.feature__item--left .archive__item { float: left; }
.feature__item--left .archive__item-teaser { margin-bottom: 2em; }
.feature__item--left a.btn::before { content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; }
@media (min-width: 37.5em) { .feature__item--left .archive__item-teaser { float: left; width: 40.6779661017%; } .feature__item--left .archive__item-body { float: right; padding-left: 1.6949152542%; padding-right: 1.6949152542%; width: 57.6271186441%; } }
.feature__item--right { position: relative; float: left; margin-left: 0; margin-right: 0; width: 100%; clear: both; font-size: 1.125em; }
.feature__item--right .archive__item { float: left; }
.feature__item--right .archive__item-teaser { margin-bottom: 2em; }
.feature__item--right a.btn::before { content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; }
@media (min-width: 37.5em) { .feature__item--right { text-align: right; } .feature__item--right .archive__item-teaser { float: right; width: 40.6779661017%; } .feature__item--right .archive__item-body { float: left; width: 57.6271186441%; padding-left: 1.6949152542%; padding-right: 1.6949152542%; } }
.feature__item--center { position: relative; float: left; margin-left: 0; margin-right: 0; width: 100%; clear: both; font-size: 1.125em; }
.feature__item--center .archive__item { float: left; width: 100%; }
.feature__item--center .archive__item-teaser { margin-bottom: 2em; }
.feature__item--center a.btn::before { content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; }
@media (min-width: 37.5em) { .feature__item--center { text-align: center; } .feature__item--center .archive__item-teaser { margin: 0 auto; width: 40.6779661017%; } .feature__item--center .archive__item-body { margin: 0 auto; width: 57.6271186441%; } }
/* Place inside an archive layout */
.archive .feature__wrapper .archive__item-title { margin-top: 0.25em; font-size: 1em; }
.archive .feature__item, .archive .feature__item--left, .archive .feature__item--center, .archive .feature__item--right { font-size: 1em; }
/* Wide Pages ========================================================================== */
@media (min-width: 64em) { .wide .archive { padding-right: 0; } }
@media (min-width: 80em) { .wide .archive { padding-right: 0; } }
/* Place inside a single layout */
.layout--single .feature__wrapper { display: inline-block; }
/* ========================================================================== SIDEBAR ========================================================================== */
/* Default ========================================================================== */
.sidebar { clear: both; }
.sidebar::after { clear: both; content: ""; display: table; }
@media (min-width: 64em) { .sidebar { float: left; width: calc(200px - 1em); opacity: 0.75; -webkit-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out; } .sidebar:hover { opacity: 1; } .sidebar.sticky { overflow-y: auto; /* calculate height of nav list viewport height - nav height - masthead x-padding */ max-height: calc(100vh - 2em - 2em); } }
@media (min-width: 80em) { .sidebar { width: calc(300px - 1em); } }
.sidebar > * { margin-top: 1em; margin-bottom: 1em; }
.sidebar h2, .sidebar h3, .sidebar h4, .sidebar h5, .sidebar h6 { margin-bottom: 0; font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif; }
.sidebar p, .sidebar li { font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif; font-size: 0.75em; line-height: 1.5; }
.sidebar img { width: 100%; }
.sidebar img.emoji { width: 20px; height: 20px; }
.sidebar__right { margin-bottom: 1em; }
@media (min-width: 64em) { .sidebar__right { position: absolute; top: 0; right: 0; width: 200px; margin-right: -200px; padding-left: 1em; z-index: 10; } .sidebar__right.sticky { clear: both; position: -webkit-sticky; position: sticky; top: 2em; float: right; } .sidebar__right.sticky::after { clear: both; content: ""; display: table; } }
@media (min-width: 80em) { .sidebar__right { width: 300px; margin-right: -300px; } }
@media (min-width: 64em) { .splash .sidebar__right { position: relative; float: right; margin-right: 0; } }
@media (min-width: 80em) { .splash .sidebar__right { margin-right: 0; } }
/* Author profile and links ========================================================================== */
.author__avatar { display: table-cell; vertical-align: top; width: 36px; height: 36px; }
@media (min-width: 64em) { .author__avatar { display: block; width: auto; height: auto; } }
.author__avatar img { max-width: 110px; border-radius: 50%; }
@media (min-width: 64em) { .author__avatar img { padding: 5px; border: 1px solid #434040; } }
.author__content { display: table-cell; vertical-align: top; padding-left: 15px; padding-right: 25px; line-height: 1; }
@media (min-width: 64em) { .author__content { display: block; width: 100%; padding-left: 0; padding-right: 0; } }
.author__content a { color: inherit; text-decoration: none; }
.author__name { margin: 0; }
@media (min-width: 64em) { .author__name { margin-top: 10px; margin-bottom: 10px; } }
.sidebar .author__name { font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif; font-size: 1em; }
.author__bio { margin: 0; }
@media (min-width: 64em) { .author__bio { margin-top: 10px; margin-bottom: 20px; } }
.author__urls-wrapper { position: relative; display: table-cell; vertical-align: middle; font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif; z-index: 20; cursor: pointer; }
.author__urls-wrapper li:last-child a { margin-bottom: 0; }
.author__urls-wrapper .author__urls span.label { padding-left: 5px; }
@media (min-width: 64em) { .author__urls-wrapper { display: block; } }
.author__urls-wrapper button { position: relative; margin-bottom: 0; }
@supports (pointer-events: none) { .author__urls-wrapper button:before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } }
.author__urls-wrapper button.open:before { pointer-events: auto; }
@media (min-width: 64em) { .author__urls-wrapper button { display: none; } }
.author__urls { display: none; position: absolute; right: 0; margin-top: 15px; padding: 10px; list-style-type: none; border: 1px solid #434040; border-radius: 4px; background: #141010; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); cursor: default; }
.author__urls.is--visible { display: block; }
@media (min-width: 64em) { .author__urls { display: block; position: relative; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; } }
.author__urls:before { display: block; content: ""; position: absolute; top: -11px; left: calc(50% - 10px); width: 0; border-style: solid; border-width: 0 10px 10px; border-color: #434040 transparent; z-index: 0; }
@media (min-width: 64em) { .author__urls:before { display: none; } }
.author__urls:after { display: block; content: ""; position: absolute; top: -10px; left: calc(50% - 10px); width: 0; border-style: solid; border-width: 0 10px 10px; border-color: #141010 transparent; z-index: 1; }
@media (min-width: 64em) { .author__urls:after { display: none; } }
.author__urls ul { padding: 10px; list-style-type: none; }
.author__urls li { white-space: nowrap; }
.author__urls a { display: block; margin-bottom: 5px; padding-right: 5px; padding-top: 2px; padding-bottom: 2px; color: inherit; font-size: 1em; text-decoration: none; }
.author__urls a:hover { text-decoration: underline; }
/* Wide Pages ========================================================================== */
.wide .sidebar__right { margin-bottom: 1em; }
@media (min-width: 64em) { .wide .sidebar__right { position: initial; top: initial; right: initial; width: initial; margin-right: initial; padding-left: initial; z-index: initial; } .wide .sidebar__right.sticky { float: none; } }
@media (min-width: 80em) { .wide .sidebar__right { width: initial; margin-right: initial; } }
/* ========================================================================== PRINT STYLES ========================================================================== */
@media print { [hidden] { display: none; } * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } html { margin: 0; padding: 0; min-height: auto !important; font-size: 16px; } body { margin: 0 auto; background: #fff !important; color: #000 !important; font-size: 1rem; line-height: 1.5; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6 { color: #000; line-height: 1.2; margin-bottom: 0.75rem; margin-top: 0; } h1 { font-size: 2.5rem; } h2 { font-size: 2rem; } h3 { font-size: 1.75rem; } h4 { font-size: 1.5rem; } h5 { font-size: 1.25rem; } h6 { font-size: 1rem; } a, a:visited { color: #000; text-decoration: underline; word-wrap: break-word; } table { border-collapse: collapse; } thead { display: table-header-group; } table, th, td { border-bottom: 1px solid #000; } td, th { padding: 8px 16px; } img { border: 0; display: block; max-width: 100% !important; vertical-align: middle; } hr { border: 0; border-bottom: 2px solid #bbb; height: 0; margin: 2.25rem 0; padding: 0; } dt { font-weight: bold; } dd { margin: 0; margin-bottom: 0.75rem; } abbr[title], acronym[title] { border: 0; text-decoration: none; } table, blockquote, pre, code, figure, li, hr, ul, ol, a, tr { page-break-inside: avoid; } h2, h3, h4, p, a { orphans: 3; widows: 3; } h1, h2, h3, h4, h5, h6 { page-break-after: avoid; page-break-inside: avoid; } h1 + p, h2 + p, h3 + p { page-break-before: avoid; } img { page-break-after: auto; page-break-before: auto; page-break-inside: avoid; } pre { white-space: pre-wrap !important; word-wrap: break-word; } a[href^='http://']:after, a[href^='https://']:after, a[href^='ftp://']:after { content: " (" attr(href) ")"; font-size: 80%; } abbr[title]:after, acronym[title]:after { content: " (" attr(title) ")"; } #main { max-width: 100%; } .page { margin: 0; padding: 0; width: 100%; } .page-break, .page-break-before { page-break-before: always; } .page-break-after { page-break-after: always; } .no-print { display: none; } a.no-reformat:after { content: ''; } abbr.no-reformat[title]:after, acronym.no-reformat[title]:after { content: ''; } .page__hero-caption { color: #000 !important; background: #fff !important; opacity: 1; } .page__hero-caption a { color: #000 !important; } /* Hide the following elements on print ========================================================================== */ .masthead, .toc, .page__share, .page__related, .pagination, .ads, .page__footer, .page__comments-form, .author__avatar, .author__content, .author__urls-wrapper, .nav__list, .sidebar, .adsbygoogle { display: none !important; height: 1px !important; } }
/*# sourceMappingURL=main.css.map */