/* ========================================================================== 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: #21181e; 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 { /* 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!):
#### Headline for the Notice Text for the notice
*/ /* 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; } } ::selection { background: #004DAA; } /*# sourceMappingURL=main.css.map */