/* ==========================================================================
   Styling and layout for all media
   ========================================================================== */
/* Reset
   ========================================================================== */
/**
 * Add the correct display in Edge, IE 11, and Firefox.
 */
details {
    display: block;
}

/**
 * Add the correct display in all browsers.
 */
summary {
    display: list-item;
}

/**
 * Add the correct display in IE 11.
 */
template {
    display: none;
}

/**
 * Remove tap delay in modern browsers.
 */
a,
input,
button {
    touch-action: manipulation;
}

/* Clearfix
   ========================================================================== */
header::after,
footer::after,
nav ul::after,
nav ol::after,
.container::after,
.paginator::after {
    display: table;
    clear: both;
    content: "";
}

/* ==========================================================================
   Styling and layout for screen media (mobile first)
   ========================================================================== */
@media screen {
    /* Layout
   ========================================================================== */
    /**
 * 1. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */
    html {
        /* 1 */
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    /**
 * 1. Set `body` to `relative` to allow positioning of absolute elements.
 * 2. Remove default margin.
 */
    body {
        /* 1 */
        position: relative;

        /* 2 */
        margin: 0;
    }

    /**
 * Outer wrapper for main layouts.
 *
 * Example HTML:
 *
 * <div class="wrapper">
 *     <div class="container">
 *         Content
 *     </div>
 * </div>
 */
    .wrapper {
        padding: 1px 0;
        margin-top: 215px;
        border-bottom: 1px solid #cccccc;
        background: #ffffff;
    }

    /**
 * Wrapper for layouts, and for site header/footer.
 *
 * Example HTML:
 *
 * <div class="wrapper">
 *     <div class="container">
 *         Content
 *     </div>
 * </div>
 */
    .site-header,
    .site-footer,
    .container {
        width: 88%;
        max-width: 54em;
        margin: 0 auto;
    }

    /**
 * Additional styling for child content within site header.
 */
    .site-header {
        padding-top: 30px;
        background-image: url('../menu-ristorante.jpg');
    }

    .site-header h1 {
        margin: 0;
    }

    .site-header h3 {
        margin: 0.5em 0 0;
    }

    /**
 * Additional styling for child content within site footer.
 */
    .site-footer {
        padding: 0.5em 0;
    }

    /**
 * Styling for articles.
 *
 * 1. Prevent really, really long words in article from breaking layout.
 */
    .article {
        margin-bottom: 2em;

        /* 1 */
        word-wrap: break-word;
    }

    /**
 * Styling for complementary content.
 *
 * Initially the sidebar appears under main content, it is then repositioned
 * with media queries at 2nd breakpoint.
 *
 * 1. Prevent really, really long words in article from breaking layout.
 */
    .complementary-content {
        margin: 2em -6% 0;
        padding: 0 6%;
        border-top: 2px dashed #cccccc;

        /* 1 */
        word-wrap: break-word;
    }

    /* Navigation
   ========================================================================== */
    /**
 * Style mobile first version of the navigation menu. Desktop version will
 * override some rules with extra styling at 1st breakpoint.
 *
 * Example HTML:
 *
 * <nav class="site-navigation">
 *     <ul>
 *         <li class="active"><a></li>
 *         <li><a></li>
 *         <li><a></li>
 *     </ul>
 * </nav>
 */
    .site-navigation {
        background-color: #666;
        width: 100%;
        position: fixed;
        z-index: 9999;
    }

    .site-navigation > div {
        position: relative;
        max-width: 54em;
        margin: 0 auto;
    }

    .site-navigation ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .site-navigation li {
        border-bottom: 1px solid #cccccc;
        background-color: #eeeeee;
    }

    .site-navigation li:first-child {
        border-top: 1px solid #cccccc;
    }

    .site-navigation li:hover {
        background-color: #f8f8f8;
    }

    .site-navigation li:active {
        background-color: lightgray;
        box-shadow: inset 0 0.2em 0.25em rgba(0, 0, 0, 0.15);
    }

    .site-navigation li.active {
        background-color: white;
        box-shadow: none;
    }

    .site-navigation a {
        display: block;
        padding: 0.5em 6%;
        color: #333333;
    }

    .site-navigation a:hover,
    .site-navigation a:visited {
        color: #333333;
        text-decoration: none;
    }

    .site-navigation a:active {
        color: #1a1a1a;
        text-decoration: none;
    }

    /**
 * Search field in navigation.
 */
    .search {
        padding: 1em 6% 0.5em;
        background: #ffffff;
    }

    .search input[type="search"] {
        width: 16em;
        height: 2.125em;
        padding-right: 0.1875em;
        padding-left: 2em;
        border-radius: 0.5em;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='%23333'%3E%3Cpath d='M4,13c0-5,4-9,9-9c5,0,9,4,9,9c0,5-4,9-9,9C8,22,4,18,4,13z M13,19c3.3,0,6-2.7,6-6s-2.7-6-6-6s-6,2.7-6,6S9.7,19,13,19z'/%3E%3Cpath d='M17.5,19l1.5-1.5l4.5,3L28,25c0,0,0,1.5-0.75,2.25S25,28,25,28l-4.5-4.5L17.5,19z'/%3E%3C/g%3E%3C/svg%3E") no-repeat left center;
        background-size: 2em 2em;
    }

    /* Links
   ========================================================================== */
    /**
 * 1. Specify link colour.
 * 2. Remove default underline style from non-hover state links.
 * 3. Interrupt the decoration line to let the shape of the text show through
 *    in supported browsers.
 */
    a {
        /* 1 */
        color: #004cbf;

        /* 2 */
        text-decoration: none;

        /* 3 */
        -webkit-text-decoration-skip: ink;
        text-decoration-skip: ink;
    }

    a:hover,
    a:active {
        outline: 0;
        color: #0066ff;
        text-decoration: underline;
    }

    a:focus {
        outline: 1px solid #0066ff;
    }

    /**
 * Additional styling for `h1`-`h3` heading links.
 *
 * 1. Expanded CSS level 3 `text-decoration-color` property in supported
 *    browsers, older browsers ignore this addition.
 */
    h1 a,
    h2 a,
    h3 a {
        color: #333333;
    }

    h1 a:hover,
    h1 a:active,
    h2 a:hover,
    h2 a:active,
    h3 a:hover,
    h3 a:active {
        color: #333333;

        /* 1 */
        -webkit-text-decoration-color: rgba(51, 51, 51, 0.5);
        text-decoration-color: rgba(51, 51, 51, 0.5);
    }

    /**
 * Paginator (prev/next) navigation links on articles/article lists.
 *
 * Example HTML:
 *
 * <nav class="paginator">
 *     <a rel="prev">
 *     <a rel="next">
 */
    .paginator {
        clear: both;
    }

    .paginator [rel="prev"] {
        float: left;
    }

    .paginator [rel="next"] {
        float: right;
    }

    /* Typography
   ========================================================================== */
    /**
 * Establish baseline.
 */
    html {
        font-size: 16px;
        line-height: 1.5em;
    }

    /**
 * Global font and text colour.
 */
    body {
        color: #333333;
        font-family: 'Montserrat', Georgia, serif;
    }

    /**
 * Sans-serif font for main navigation menu.
 */
    .site-navigation {
        font-family: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        font-weight: bold;
    }

    /**
 * Harmonize size, style and vertical margin of headings.
 */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        clear: both;
        font-family: 'Averia Serif Libre', system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    }

    h1 {
        margin: 0.6315789em 0;
        font-size: 2.375em;
        letter-spacing: -0.25px;
        line-height: 1.1842105em;
    }

    h2 {
        margin: 0.8em 0;
        font-size: 1.875em;
        letter-spacing: -0.25px;
        line-height: 1.2666667em;
    }

    h3 {
        margin: 1em 0;
        font-size: 1.5em;
        letter-spacing: -0.25px;
        line-height: 1.3333333em;
    }

    h4 {
        margin: .3em 0;
        font-size: 1.25em;
        line-height: 1.4em;
    }

    h5 {
        margin: 1em 0;
        font-size: 1.125em;
        line-height: 1.4444444em;
    }

    h6 {
        margin: 1em 0;
        font-size: 1em;
        line-height: 1.5em;
    }

    /**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
    b,
    strong {
        font-weight: bolder;
    }

    /**
 * Add vertical margin to addresses.
 */
    address {
        margin: 1em 0;
    }

    /**
 * Additional styling for blockquotes.
 */
    blockquote {
        margin: 0.8em 0;
        font-size: 1.25em;
        font-style: italic;
        line-height: 1.4em;
        text-align: center;
    }

    /**
 * 1. Remove the bottom border in Chrome 57+.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
    abbr[title] {
        /* 1 */
        border-bottom: 0;

        /* 2 */
        -webkit-text-decoration: underline dotted;
        text-decoration: underline dotted;
    }

    /**
 * Consistent styling for `mark` and `var` tags.
 */
    mark,
    var {
        padding: 0 0.25em;
        border-radius: 0.25em;
        background: #fff9e1;
        color: #333333;
    }

    /**
 * Harmonize size and style of computer text.
 */
    pre,
    code,
    kbd,
    samp {
        border: 1px solid #e3e3e3;
        border-radius: 0.2857143em;
        background-color: #f7f7f7;
        color: #333333;
        font-family: Menlo, Consolas, Monaco, monospace;
        font-size: 0.875em;
        line-height: 1.5em;
    }

    code,
    kbd,
    samp {
        padding: 1px 0.21429em;
    }

    /**
 * Additional stylng for preformatted text/code.
 *
 * 1. Don't wrap long words.
 * 2. Contain overflow in all browsers.
 * 3. Set tab size to 4 spaces.
 */
    pre {
        padding: 0.5714286em 1.1428571em;

        /* 1 */
        word-wrap: normal;

        /* 2 */
        overflow-x: auto;

        /* 3 */
        -moz-tab-size: 4;
        -o-tab-size: 4;
        tab-size: 4;
    }

    pre code {
        padding: 0;
        border: 0;
        background-color: transparent;
        font-size: 1em;
        text-align: left;
        white-space: pre;
        word-spacing: normal;
        word-break: normal;
        word-wrap: normal;
        direction: ltr;
        -webkit-hyphens: none;
        -ms-hyphens: none;
        hyphens: none;
    }

    /**
 * Prevent `sub` and `sup` elements from affecting the line height in all browsers.
 */
    sub,
    sup.footnote,
    sup {
        position: relative;
        font-size: 0.625em;
        line-height: 0;
        vertical-align: baseline;
    }

    sup {
        top: -0.5em;
    }

    sub {
        bottom: -0.25em;
    }

    /**
 * Harmonize size and style of small text.
 */
    small,
    figcaption,
    tfoot,
    .footnote {
        font-size: 0.75em;
        line-height: 1.5em;
    }

    figcaption,
    tfoot,
    .footnote {
        color: #777777;
    }

    figcaption {
        margin-top: 0.5em;
        font-style: italic;
    }

    /**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
    hr {
        height: 24px;
        margin: 1em 0;
        border: 0;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 24'%3E%3Cpath fill='%23333' d='M0,0c1.742,13.61,54.74,20.912,119.995,15.279C184.922,9.679,238.594,13.024,240,24c-1.744-13.613-54.742-20.913-120.005-15.284C55.078,14.32,1.405,10.973,0,0z'/%3E%3C/svg%3E") 50% 50% no-repeat;
        background-size: 240px 24px;

        /* 1 */
        box-sizing: content-box;

        /* 2 */
        overflow: visible;
    }

    /* Embedded content
   ========================================================================== */
    /**
 * Add the correct display in IE 11.
 */
    video {
        display: inline-block;
    }

    /**
 * Make embedded elements responsive.
 */
    img,
    video {
        max-width: 100%;
        height: auto;
    }

    /**
 * Images.
 *
 * 1. Remove the gap between images and the bottom of their containers.
 *
 * Image alignment (compatible with Textile markup syntax).
 *
 * Example HTML:
 *
 * <img class="align-left">
 * <img class="align-right">
 * <img class="align-center">
 */
    img {
        /* 1 */
        vertical-align: middle;
    }

    img.align-left {
        margin: 1em 1em 1em 0;
        float: left;
    }

    img.align-right {
        margin: 1em 0 1em 1em;
        float: right;
    }

    img.align-center {
        display: block;
        margin: 1em auto;
    }

    /**
 * Address margin not present in Safari.
 */
    figure {
        margin: 0;
    }

    /* Tables
   ========================================================================== */
    /**
 * Consistent tables.
 */
    table {
        width: 100%;
        margin-bottom: 1em;
        border-collapse: collapse;
        border-spacing: 0;
    }

    /**
 * Styling of table captions.
 */
    caption {
        margin-bottom: 0.5em;
        font-style: italic;
        text-align: left;
    }

    /**
 * Make table cells align top and left by default.
 */
    th,
    td {
        padding: 0.5em;
        border: 1px solid #d4d4d4;
        text-align: left;
        vertical-align: top;
    }

    /**
 * Emphasize table header.
 */
    thead tr {
        background-color: #eeeeee;
    }

    thead th,
    thead td {
        border: 1px solid #cccccc;
    }

    /**
 * 'Zebra striping' of `tbody` rows.
 */
    tbody tr:nth-child(even) {
        background-color: #f7f7f7;
    }

    /**
 * Adjust padding of table footer due to smaller font size.
 */
    tfoot th,
    tfoot td {
        padding: 0.6666667em;
    }

    /**
 * Multi-row span vertical cell alignments.
 */
    [rowspan] {
        vertical-align: middle;
    }

    /* Lists
   ========================================================================== */
    /**
 * Address paddings set differently.
 */
    menu,
    ol,
    ul {
        padding: 0 0 0 1.75em;
    }

    /**
 * Remove margins from nested lists.
 */
    li > ul,
    li > ol {
        margin: 0;
    }

    /**
 * Address margins set differently.
 */
    dd {
        margin: 0 0 0 1.75em;
    }

    /**
 * Additional styling for article lists.
 *
 * Example HTML:
 *
 * <ul class="article-list">
 */
    .article-list {
        margin: 0 0 2em;
        padding: 0;
        border-top: 1px solid #cccccc;
        list-style: none;
    }

    .article-list li {
        margin-bottom: 0;
        border-bottom: 1px solid #cccccc;
    }

    /* Forms
   ========================================================================== */
    /**
 * 1. Address width being affected by wide descendants in Chrome, Firefox.
 * 2. Define consistent fieldset border, margin, and padding.
 */
    fieldset {
        /* 1 */
        min-width: 0;

        /* 2 */
        margin: 1em 0;
        padding: 1px 1em;
        border: 1px solid #cccccc;
    }

    /**
 * Normalize styling of `legend`.
 *
 * 1. Correct wrapping not present in IE 11 and Edge 12/13.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 * 3. Correct `color` not being inherited from fieldset in IE 11.
 */
    legend {
        /* 1 */
        display: table;

        /* 1 */
        max-width: 100%;

        /* 2 */
        padding: 0;

        /* 3 */
        color: inherit;

        /* 1 */
        white-space: normal;

        /* 1 */
        box-sizing: border-box;
    }

    /**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
    progress {
        vertical-align: baseline;
    }

    /**
 * 1. Prevent elements from spilling out of their parent.
 * 2. Address margins set differently in Firefox 4+, Safari, and Chrome.
 * 3. Correct font properties not being inherited.
 */
    button,
    input,
    optgroup,
    select,
    textarea {
        /* 1 */
        max-width: 100%;

        /* 2 */
        margin: 0;
        color: #000000;
        font-family: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

        /* 3 */
        font-size: 1em;
        line-height: 1.375em;
        box-sizing: border-box;
        vertical-align: baseline;
    }

    /**
 * Remove the inner border and padding in Firefox.
 */
    button::-moz-focus-inner,
    [type="button"]::-moz-focus-inner,
    [type="reset"]::-moz-focus-inner,
    [type="submit"]::-moz-focus-inner {
        padding: 0;
        border-style: none;
    }

    /**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
    [type="search"]::-webkit-search-decoration {
        -webkit-appearance: none;
    }

    /**
 * Styling of form input fields.
 *
 * 1. Remove browser-specific default styling.
 */
    [type="color"],
    [type="date"],
    [type="datetime"],
    [type="datetime-local"],
    [type="email"],
    [type="month"],
    [type="number"],
    [type="password"],
    [type="search"],
    [type="tel"],
    [type="text"],
    [type="time"],
    [type="url"],
    [type="week"],
    select,
    textarea {
        height: 2em;
        padding: 0.25em 0.1875em;
        border: 1px solid #cccccc;
        border-radius: 0;
        background: #ffffff;

        /* 1 */
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

    [type="color"]:focus,
    [type="date"]:focus,
    [type="datetime"]:focus,
    [type="datetime-local"]:focus,
    [type="email"]:focus,
    [type="month"]:focus,
    [type="number"]:focus,
    [type="password"]:focus,
    [type="search"]:focus,
    [type="tel"]:focus,
    [type="text"]:focus,
    [type="time"]:focus,
    [type="url"]:focus,
    [type="week"]:focus,
    select:focus,
    textarea:focus {
        border-color: #0066ff;
        outline: 1px solid transparent;
    }

    /**
 * Fix vertical alignment of `color` fields with their label.
 */
    [type="color"] {
        vertical-align: middle;
    }

    /**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
    [type="number"]::-webkit-inner-spin-button,
    [type="number"]::-webkit-outer-spin-button {
        height: auto;
    }

    /**
 * 1. Remove any excess padding.
 * 2. Correct margins for inline checkbox/radio labels.
 */
    [type="checkbox"],
    [type="radio"] {
        /* 1 */
        padding: 0;
    }

    [type="checkbox"] + label,
    [type="radio"] + label {
        /* 2 */
        margin: 0 0.5em 0 0;
    }

    [type="checkbox"] + label:last-of-type,
    [type="radio"] + label:last-of-type {
        /* 2 */
        margin: 0;
    }

    /**
 * Use indicator icon to signify the drop-down ability of `select`.
 */
    select {
        padding-right: 1.5em;
        background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='5' viewBox='0 0 17 5'%3E%3Cpolygon fill='%23333' points='0,0 5,5 10,0'/%3E%3C/svg%3E") right center no-repeat;
        background-size: 1.0625em 0.3125em;
        text-transform: none;
    }

    /**
 * Swap `select` icon position in RTL languages.
 */
    [dir="rtl"] select {
        padding-right: 0.1875em;
        padding-left: 1.5em;
        background-position: 0.5em center;
    }

    /**
 * Remove browser-specific `select` UI in IE 11.
 */
    select::-ms-expand {
        opacity: 0;
    }

    /**
 * Remove browser-specific `select` UI in Firefox 4+.
 */
    select:-moz-focusring {
        color: transparent;
        text-shadow: 0 0 0 #000000;
    }

    /**
 * Override height and background set in a previous rule and allow auto height.
 */
    select[size],
    select[multiple] {
        height: auto;
        padding-right: 0.5em;
        background-image: none;
    }

    /**
 * Override height set in rule above and restrict to one line field.
 */
    select[size="0"],
    select[size="1"] {
        height: 2em;
    }

    /**
 * Normalize styling of `optgroup`.
 */
    optgroup {
        color: #000000;
        font-style: normal;
        font-weight: bold;
    }

    /**
 * 1. Restrict to vertical resizing to prevent layout breakage.
 * 2. Remove default vertical scrollbar in IE 11.
 * 3. Remove unwanted space below `textarea` in Safari, Chrome, Opera.
 */
    textarea {
        width: 100%;
        height: auto;
        min-height: 3em;

        /* 1 */
        resize: vertical;

        /* 2 */
        overflow: auto;

        /* 3 */
        vertical-align: top;
    }

    /**
 * Make sure disabled elements really are disabled and styled appropriately.
 *
 * 1. Override default iOS opacity setting.
 * 2. Re-set default cursor for disabled elements.
 */
    [disabled],
    [disabled] option,
    [disabled] optgroup,
    span.disabled {
        border-color: #d4d4d4 !important;
        background: #eeeeee !important;

        /* 1 */
        opacity: 1;
        color: #aaaaaa !important;
        text-shadow: none !important;
        box-shadow: none !important;

        /* 2 */
        cursor: default !important;
    }

    /**
 * Styling for form field validation.
 */
    input:focus:invalid,
    select:focus:invalid,
    textarea:focus:invalid {
        border-color: #9d261d;
        box-shadow: none;
    }

    /**
 * Width display options for `input` fields. Height display options
 * for textareas.
 *
 * Example HTML:
 *
 * <input class="small">
 * <input class="large">
 */
    .small input {
        width: 25%;
        min-width: 151px;
    }

    .small textarea {
        height: 5.5em;
    }

    .large input {
        width: 50%;
        min-width: 302px;
    }

    .large textarea {
        height: 9.75em;
    }

    /**
 * Styling for required field indicators.
 *
 * Example HTML:
 *
 * <b class="required" title="Required">*</b>
 */
    .required {
        border: 0;
        color: #9d261d;
    }

    /* Buttons
   ========================================================================== */
    /**
 * 1. Correct `button` style inheritance in Firefox, IE 11, and Opera.
 * 2. Address `overflow` set to `hidden` in IE 11.
 */
    button {
        /* 1 */
        text-transform: none;

        /* 2 */
        overflow: visible;
    }

    /**
 * 1. Remove browser-specific default styling.
 */
    button,
    [type="button"],
    [type="reset"],
    [type="submit"] {
        background-color: #dfdfdf;
        background-image: linear-gradient(#eeeeee, #dfdfdf);
        display: inline-block;
        position: relative;
        width: auto;
        height: 2em;
        padding: 0.25em 1em;
        border: 1px solid #dfdfdf;
        border-radius: 1em;
        background-clip: padding-box;
        color: #333333;
        font-weight: normal;
        text-align: center;
        text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);

        /* 1 */
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        box-shadow: 0 2px 0 #acacac;
    }

    button:hover,
    [type="button"]:hover,
    [type="reset"]:hover,
    [type="submit"]:hover {
        background-color: #e9e9e9;
        background-image: linear-gradient(#f8f8f8, #e9e9e9);
        border-color: #bebebe;
        color: #333333;
        text-decoration: none;
    }

    button:active,
    [type="button"]:active,
    [type="reset"]:active,
    [type="submit"]:active {
        top: 2px;
        border-color: #bebebe;
        color: #1a1a1a;
        text-decoration: none;
        box-shadow: none;
    }

    button:focus,
    [type="button"]:focus,
    [type="reset"]:focus,
    [type="submit"]:focus {
        border-color: #0066ff;
        outline: 1px solid transparent;
    }

    /**
 * Disbaled button additional styling.
 */
    button[disabled],
    [type="button"][disabled],
    [type="reset"][disabled],
    [type="submit"][disabled] {
        top: 2px !important;
    }

    /* Comments
   ========================================================================== */
    /**
 * Styling for user comments.
 *
 * Example HTML:
 *
 * <article class="comments">
 */
    .comments {
        margin-bottom: 1em;
        padding: 1px 1em;
        border-radius: 0.5em;
        background: #f7f7f7;
        word-wrap: break-word;
    }

    .comments h4 .is-author {
        font-weight: normal;
    }

    .comments h4 .comment-anchor {
        float: right;
        font-weight: normal;
    }

    /**
 * Additional styling for article author's comments.
 *
 * Example HTML:
 *
 * <article class="comments comments-author">
 */
    .comments-author {
        background: #efefef;
    }

    /**
 * Styling for user comments preview.
 */
    #cpreview {
        margin-bottom: 2px;
        padding: 1em;
        border-radius: 0.5em;
        background-color: #fff9e1;
    }

    /**
 * Highlight text colour for comment errors.
 */
    .error_message li {
        color: #9d261d;
    }

    /**
 * Highlighting for comment form errors.
 */
    .comments_error {
        border-color: #9d261d;
        box-shadow: 0 0 4px 2px #9d261d;
    }

    /* Popup comments (can be removed if you don't use popups)
   ========================================================================== */
    /**
 * Restrict maximum width of popup container.
 */
    #popup-page .container {
        max-width: 52em;
    }
}

/* ==========================================================================
   Additional layout for screen media 576px and up
   ========================================================================== */
@media only screen and (min-width: 38em) {
    /**
     * Desktop version of the navigation menu. Overrides mobile first version.
     *
     * Example HTML:
     *
     * <nav class="site-navigation">
     *     <ul>
     *         <li class="active"><a></li>
     *         <li><a></li>
     *         <li><a></li>
     *     </ul>
     * </nav>
     */
    .wrapper {
        margin-top: 0px;
    }
    .site-navigation {
        border-top: 1px solid #cccccc;
        border-bottom: 1px solid #cccccc;
    }

    .site-navigation > div {
        width: 88%;
    }

    .site-navigation li {
        float: left;
        border-right: 1px solid #cccccc;
        border-bottom: 0;
    }

    .site-navigation li:first-child {
        border-top: 0;
        border-left: 1px solid #cccccc;
    }

    [dir="rtl"] .site-navigation li {
        float: right;
    }

    [dir="rtl"] .site-navigation li:first-child {
        border-left: 0;
    }

    [dir="rtl"] .site-navigation li:last-child {
        border-left: 1px solid #cccccc;
    }

    .site-navigation a {
        padding: 0.5em 1em;
    }

    .search {
        position: absolute;
        top: 50%;
        right: 0;
        margin-top: -1.0625em;
        padding: 0;
        background: transparent;
        z-index: 2;
    }

    [dir="rtl"] .search {
        right: auto;
        left: 0;
    }

    .search input[type="search"] {
        width: 2.125em;
        padding-right: 0;
        transition: width 0.2s ease-in-out, border-color 0.2s ease-in-out;
        background-color: #eeeeee;
        cursor: pointer;
    }

    .search input[type="search"]:hover {
        background-color: #f8f8f8;
    }

    .search input[type="search"]:focus {
        width: 16em;
        padding-right: 0.1875em;
        background-color: white;
        cursor: auto;
    }
}

/* ==========================================================================
   Additional layout for screen media 864px and up
   ========================================================================== */
@media only screen and (min-width: 46em) {
    /**
     * Enlarge baseline text size.
     */
    html {
        font-size: 112.5%;
    }
}

/* ==========================================================================
   Styling and layout for print media
   ========================================================================== */
@media print {
    /**
 * Remove unnecessary global styling from printed media.
 */
    *,
    *::before,
    *::after {
        background: transparent !important;
        color: #000000 !important;
        text-shadow: none !important;
        box-shadow: none !important;
    }

    /**
 * Use a print-friendly font and size.
 */
    body {
        margin: 0.5cm;
        padding: 2em 5em;
        font-family: 'Montserrat', sans-serif;
        font-size: 8pt;
        line-height: 1.5;
    }

    /**
 * Visually separate header from body.
 */
    .site-header {
        border-bottom: 1pt solid #000000;
    }

    /**
 * Visually separate footer from body.
 */
    .site-footer {
        margin-top: 12pt;
        border-top: 1pt solid #000000;
    }

    /**
 * Hide unnecessary content from print.
 */
    nav,
    audio,
    video,
    form,
    #comments-form,
    .comments h4 a:last-child,
    .complementary-content,
    .paginator {
        display: none;
    }

    /**
 * Make sure links are not underlined.
 */
    a {
        text-decoration: none;
    }

    /**
 * Show long-form for abbreviations in print.
 */
    abbr[title]::after {
        content: " (" attr(title) ")";
    }

    /**
 * Harmonize size, style and vertical margin of headings.
 */
    h1 {
        margin: 16pt 0;
        font-size: 32pt;
        font-weight: normal;
        line-height: 36pt;
    }

    h2 {
        margin: 14pt 0;
        font-size: 24pt;
        line-height: 28pt;
        page-break-after: avoid;
        orphans: 2;
        widows: 2;
    }

    h3 {
        margin: 12pt 0;
        font-size: 18pt;
        line-height: 22pt;
        page-break-after: avoid;
        orphans: 2;
        widows: 2;
    }

    h4 {
        margin: 11pt 0;
        font-size: 14pt;
        line-height: 18pt;
        page-break-after: avoid;
        orphans: 2;
        widows: 2;
    }

    h5 {
        margin: 10pt 0;
        font-size: 12pt;
        line-height: 16pt;
        page-break-after: avoid;
        orphans: 2;
        widows: 2;
    }

    h6 {
        margin: 9pt 0;
        font-size: 10pt;
        line-height: 14pt;
        page-break-after: avoid;
        orphans: 2;
        widows: 2;
    }

    /**
 * Prevent widows (single final paragraph line on next page) and orphans (single
 * first paragraph line on previous page).
 */
    p {
        orphans: 2;
        widows: 2;
    }

    /**
 * Harmonize size and style of small text.
 */
    footer,
    figcaption,
    tfoot,
    small,
    .footnote {
        font-size: 6pt;
    }

    /**
 * Simple blockquote styling.
 *
 * 1. Avoid blockquotes breaking across multiple pages.
 */
    blockquote {
        padding: 0 0 0 8pt;
        border-left: 3pt solid #000000;
        font-size: 16pt;

        /* 1 */
        page-break-inside: avoid;
    }

    [dir="rtl"] blockquote {
        padding: 0 8pt 0 0;
        border-right: 3pt solid #000000;
        border-left: 0;
    }

    /**
 * Simple preformatted text styling.
 *
 * 1. Ensure pre blocks are wrapped when printed.
 */
    pre {
        margin-bottom: 8pt;
        padding: 8pt;
        border: 1pt solid #000000;

        /* 1 */
        white-space: pre-wrap !important;
    }

    /**
 * Use a print-friendly monospaced font and size.
 */
    pre,
    code,
    kbd,
    samp,
    var {
        font-family: "Courier New", Courier, monospace;
    }

    /**
 * Images.
 *
 * 1. Avoid images breaking across multiple pages.
 *
 * Image alignment (compatible with Textile markup syntax).
 *
 * Example HTML:
 *
 * <img class="align-left">
 * <img class="align-right">
 * <img class="align-center">
 */
    img {
        /* 1 */
        page-break-inside: avoid;
    }

    img.align-left {
        margin: 1em 1em 1em 0;
        float: left;
    }

    img.align-right {
        margin: 1em 0 1em 1em;
        float: right;
    }

    img.align-center {
        display: block;
        margin: 1em auto;
    }

    /**
 * Swap image alignment right/left positions in RTL languages.
 */
    [dir="rtl"] img.align-left {
        margin: 1em 0 1em 1em;
        float: right;
    }

    [dir="rtl"] img.align-right {
        margin: 1em 1em 1em 0;
        float: left;
    }

    /**
 * Ensure margin below `figure`.
 */
    figure {
        margin-bottom: 8pt;
    }

    /**
 * Ensure margin above `figcaption`.
 */
    figcaption {
        margin-top: 4pt;
    }

    /**
 * Simple bullet styling for `ul` unordered lists.
 */
    ul {
        padding: 0 0 8pt 1.8em;
        list-style: square;
    }

    [dir="rtl"] ul {
        padding: 0 1.8em 8pt 0;
    }

    /**
 * Simple numerical styling for `ol` ordered lists.
 */
    ol {
        padding: 0 0 8pt 1.8em;
        list-style: decimal;
    }

    [dir="rtl"] ol {
        padding: 0 1.8em 8pt 0;
    }

    /**
 * Normalize margins on `dl` definition lists.
 */
    dl {
        padding: 0 0 8pt 1.8em;
    }

    [dir="rtl"] dl {
        padding: 0 1.8em 8pt 0;
    }

    /**
 * 1. Make `table` span entire page width.
 * 2. Ensure margin below `table`.
 */
    table {
        /* 1 */
        width: 100%;

        /* 2 */
        margin-bottom: 8pt;
    }

    /**
 * Harmonize styling for `caption`.
 */
    caption {
        margin-bottom: 4pt;
        font-weight: bold;
    }

    /**
 * Display table head across multi-page tables.
 */
    thead {
        display: table-header-group;
    }

    thead th {
        border-top: 1pt solid #000000;
    }

    /**
 * Avoid table rows breaking across multiple pages.
 */
    tr {
        page-break-inside: avoid;
    }

    /**
 * Simple styling for table cells.
 */
    th,
    td {
        padding: 4pt 8pt;
        border-bottom: 1pt solid #000000;
    }

    /**
 * Avoid user comments breaking across multiple pages.
 */
    .comments {
        page-break-inside: avoid;
    }
}