@import url("fontawesome-all.min.css");
/* Using Bebas Neue for headlines, Lato for body */
@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Lato:wght@300;400;700&display=swap");

/*
    Dopetrope by HTML5 UP (adapted for Modern Street Style Dark Theme Dispensary)
    Original: html5up.net | @ajlkn
    Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/

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

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

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

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

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

body {
    -webkit-text-size-adjust: none;
}

mark {
    background-color: transparent;
    color: inherit;
}

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

input, select, textarea {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none; /* Added standard property for compatibility */
    -ms-appearance: none;
    appearance: none; /* Added standard property */
}

/* Basic - Modern Dark Theme Adjustments */

    html {
        box-sizing: border-box;
    }

    *, *:before, *:after {
        box-sizing: inherit;
    }

    body {
        background: #121212; /* Very dark background */
        background-image: none;
        color: #b0b0b0; /* Light gray text */
        font-family: 'Lato', sans-serif; /* Body font */
        font-weight: 300;
        font-size: 16pt;
        line-height: 1.7em; /* Slightly increased line height */
    }

    strong, b {
        color: #ffffff; /* White color for emphasis */
        font-weight: 400; /* Normal weight for emphasis with Lato */
    }

    i, em {
        font-style: italic;
    }

    sub {
        position: relative;
        top: 0.5em;
        font-size: 0.8em;
    }

    sup {
        position: relative;
        top: -0.5em;
        font-size: 0.8em;
    }

    blockquote {
        border-left: solid 0.75em #333;
        padding: 1em 0 1em 1.5em;
        font-style: italic;
        color: #999;
    }

    h1, h2, h3, h4, h5, h6 {
        color: #ffffff; /* White color for headings */
        font-family: 'Bebas Neue', sans-serif; /* Headline font */
        font-weight: 400; /* Bebas Neue is naturally bold */
        letter-spacing: 0.05em; /* Add some letter spacing */
        text-transform: uppercase; /* Uppercase for street style feel */
    }

    h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
        color: inherit;
        text-decoration: none;
    }

    h2 {
        font-size: 2.5em; /* Larger headings */
         margin-bottom: 0.5em; /* Add some space below headings */
    }

    h3 {
        font-size: 1.8em; /* Larger sub-headings */
         margin-bottom: 0.4em;
    }

    a {
        color: #00E676; /* Vibrant Green accent color */
        text-decoration: none;
        transition: color 0.2s ease-in-out;
    }

        a:hover {
            color: #69F0AE; /* Lighter green on hover */
            text-decoration: underline;
        }

    br.clear {
        clear: both;
    }

    hr {
        border: 0;
        border-top: solid 1px #2a2a2a; /* Darker HR color */
        height: 1px;
        margin: 3em 0; /* Increased margin */
    }

    p, ul, ol, dl, table {
        margin-bottom: 1.5em; /* Adjusted margin */
    }

/* Container - Keep the same */

    .container {
        margin: 0 auto;
        max-width: 100%;
        width: 70em;
    }

        @media screen and (max-width: 1680px) {

            .container {
                width: 70em;
            }

        }

        @media screen and (max-width: 1280px) {

            .container {
                width: calc(100% - 60px);
            }

        }

        @media screen and (max-width: 980px) {

            .container {
                width: calc(100% - 80px);
            }

        }

        @media screen and (max-width: 736px) {

            .container {
                width: calc(100% - 40px);
            }

        }

/* Row - Keep the same grid structure, adjust gutters */

    .row {
        display: flex;
        flex-wrap: wrap;
        box-sizing: border-box;
        align-items: stretch;
    }

        .row > * {
            box-sizing: border-box;
        }

        .row.gtr-uniform > * > :last-child {
            margin-bottom: 0;
        }

        .row.aln-left {
            justify-content: flex-start;
        }

        .row.aln-center {
            justify-content: center;
        }

        .row.aln-right {
            justify-content: flex-end;
        }

        .row.aln-top {
            align-items: flex-start;
        }

        .row.aln-middle {
            align-items: center;
        }

        .row.aln-bottom {
            align-items: flex-end;
        }

        .row > .imp {
            order: -1;
        }

        .row > .col-1 {
            width: 8.33333%;
        }

        .row > .off-1 {
            margin-left: 8.33333%;
        }

        .row > .col-2 {
            width: 16.66667%;
        }

        .row > .off-2 {
            margin-left: 16.66667%;
        }

        .row > .col-3 {
            width: 25%;
        }

        .row > .off-3 {
            margin-left: 25%;
        }

        .row > .col-4 {
            width: 33.33333%;
        }

        .row > .off-4 {
            margin-left: 33.33333%;
        }

        .row > .col-5 {
            width: 41.66667%;
        }

        .row > .off-5 {
            margin-left: 41.66667%;
        }

        .row > .col-6 {
            width: 50%;
        }

        .row > .off-6 {
            margin-left: 50%;
        }

        .row > .col-7 {
            width: 58.33333%;
        }

        .row > .off-7 {
            margin-left: 58.33333%;
        }

        .row > .col-8 {
            width: 66.66667%;
        }

        .row > .off-8 {
            margin-left: 66.66667%;
        }

        .row > .col-9 {
            width: 75%;
        }

        .row > .off-9 {
            margin-left: 75%;
        }

        .row > .col-10 {
            width: 83.33333%;
        }

        .row > .off-10 {
            margin-left: 83.33333%;
        }

        .row > .col-11 {
            width: 91.66667%;
        }

        .row > .off-11 {
            margin-left: 91.66667%;
        }

        .row > .col-12 {
            width: 100%;
        }

        .row > .off-12 {
            margin-left: 100%;
        }

        /* Gutters - Adjust for spacing */
        .row.gtr-0 { margin-top: 0px; margin-left: 0px; }
        .row.gtr-0 > * { padding: 0px 0 0 0px; }
        .row.gtr-0.gtr-uniform { margin-top: 0px; }
        .row.gtr-0.gtr-uniform > * { padding-top: 0px; }

        .row.gtr-25 { margin-top: -10px; margin-left: -10px; }
        .row.gtr-25 > * { padding: 10px 0 0 10px; }
        .row.gtr-25.gtr-uniform { margin-top: -10px; }
        .row.gtr-25.gtr-uniform > * { padding-top: 10px; }

        .row.gtr-50 { margin-top: -20px; margin-left: -20px; }
        .row.gtr-50 > * { padding: 20px 0 0 20px; }
        .row.gtr-50.gtr-uniform { margin-top: -20px; }
        .row.gtr-50.gtr-uniform > * { padding-top: 20px; }

        .row { /* Default Gutter */ margin-top: -40px; margin-left: -40px; }
        .row > * { padding: 40px 0 0 40px; }
        .row.gtr-uniform { margin-top: -40px; }
        .row.gtr-uniform > * { padding-top: 40px; }

        .row.gtr-150 { margin-top: -60px; margin-left: -60px; }
        .row.gtr-150 > * { padding: 60px 0 0 60px; }
        .row.gtr-150.gtr-uniform { margin-top: -60px; }
        .row.gtr-150.gtr-uniform > * { padding-top: 60px; }

        .row.gtr-200 { margin-top: -80px; margin-left: -80px; }
        .row.gtr-200 > * { padding: 80px 0 0 80px; }
        .row.gtr-200.gtr-uniform { margin-top: -80px; }
        .row.gtr-200.gtr-uniform > * { padding-top: 80px; }

        /* Media Queries for Gutters */
        @media screen and (max-width: 1680px) {
            .row.gtr-25 { margin-top: -10px; margin-left: -10px; }
            .row.gtr-25 > * { padding: 10px 0 0 10px; }
            .row.gtr-25.gtr-uniform { margin-top: -10px; }
            .row.gtr-25.gtr-uniform > * { padding-top: 10px; }
            .row.gtr-50 { margin-top: -20px; margin-left: -20px; }
            .row.gtr-50 > * { padding: 20px 0 0 20px; }
            .row.gtr-50.gtr-uniform { margin-top: -20px; }
            .row.gtr-50.gtr-uniform > * { padding-top: 20px; }
            .row { margin-top: -40px; margin-left: -40px; }
            .row > * { padding: 40px 0 0 40px; }
            .row.gtr-uniform { margin-top: -40px; }
            .row.gtr-uniform > * { padding-top: 40px; }
             .row.gtr-150 { margin-top: -60px; margin-left: -60px; }
            .row.gtr-150 > * { padding: 60px 0 0 60px; }
            .row.gtr-150.gtr-uniform { margin-top: -60px; }
            .row.gtr-150.gtr-uniform > * { padding-top: 60px; }
             .row.gtr-200 { margin-top: -80px; margin-left: -80px; }
            .row.gtr-200 > * { padding: 80px 0 0 80px; }
            .row.gtr-200.gtr-uniform { margin-top: -80px; }
            .row.gtr-200.gtr-uniform > * { padding-top: 80px; }
        }

        @media screen and (max-width: 1280px) {
             .row.gtr-25 { margin-top: -8px; margin-left: -8px; }
            .row.gtr-25 > * { padding: 8px 0 0 8px; }
            .row.gtr-25.gtr-uniform { margin-top: -8px; }
            .row.gtr-25.gtr-uniform > * { padding-top: 8px; }
            .row.gtr-50 { margin-top: -15px; margin-left: -15px; }
            .row.gtr-50 > * { padding: 15px 0 0 15px; }
            .row.gtr-50.gtr-uniform { margin-top: -15px; }
            .row.gtr-50.gtr-uniform > * { padding-top: 15px; }
            .row { margin-top: -30px; margin-left: -30px; }
            .row > * { padding: 30px 0 0 30px; }
            .row.gtr-uniform { margin-top: -30px; }
            .row.gtr-uniform > * { padding-top: 30px; }
             .row.gtr-150 { margin-top: -45px; margin-left: -45px; }
            .row.gtr-150 > * { padding: 45px 0 0 45px; }
            .row.gtr-150.gtr-uniform { margin-top: -45px; }
            .row.gtr-150.gtr-uniform > * { padding-top: 45px; }
             .row.gtr-200 { margin-top: -60px; margin-left: -60px; }
            .row.gtr-200 > * { padding: 60px 0 0 60px; }
            .row.gtr-200.gtr-uniform { margin-top: -60px; }
            .row.gtr-200.gtr-uniform > * { padding-top: 60px; }
        }

        @media screen and (max-width: 980px) {
             .row.gtr-25 { margin-top: -10px; margin-left: -10px; }
            .row.gtr-25 > * { padding: 10px 0 0 10px; }
            .row.gtr-25.gtr-uniform { margin-top: -10px; }
            .row.gtr-25.gtr-uniform > * { padding-top: 10px; }
            .row.gtr-50 { margin-top: -20px; margin-left: -20px; }
            .row.gtr-50 > * { padding: 20px 0 0 20px; }
            .row.gtr-50.gtr-uniform { margin-top: -20px; }
            .row.gtr-50.gtr-uniform > * { padding-top: 20px; }
            .row { margin-top: -40px; margin-left: -40px; }
            .row > * { padding: 40px 0 0 40px; }
            .row.gtr-uniform { margin-top: -40px; }
            .row.gtr-uniform > * { padding-top: 40px; }
             .row.gtr-150 { margin-top: -60px; margin-left: -60px; }
            .row.gtr-150 > * { padding: 60px 0 0 60px; }
            .row.gtr-150.gtr-uniform { margin-top: -60px; }
            .row.gtr-150.gtr-uniform > * { padding-top: 60px; }
             .row.gtr-200 { margin-top: -80px; margin-left: -80px; }
            .row.gtr-200 > * { padding: 80px 0 0 80px; }
            .row.gtr-200.gtr-uniform { margin-top: -80px; }
            .row.gtr-200.gtr-uniform > * { padding-top: 80px; }
        }

        @media screen and (max-width: 736px) {
             .row.gtr-25 { margin-top: -5px; margin-left: -5px; }
            .row.gtr-25 > * { padding: 5px 0 0 5px; }
            .row.gtr-25.gtr-uniform { margin-top: -5px; }
            .row.gtr-25.gtr-uniform > * { padding-top: 5px; }
            .row.gtr-50 { margin-top: -15px; margin-left: -15px; }
            .row.gtr-50 > * { padding: 15px 0 0 15px; }
            .row.gtr-50.gtr-uniform { margin-top: -15px; }
            .row.gtr-50.gtr-uniform > * { padding-top: 15px; }
            .row { margin-top: -20px; margin-left: -20px; }
            .row > * { padding: 20px 0 0 20px; }
            .row.gtr-uniform { margin-top: -20px; }
            .row.gtr-uniform > * { padding-top: 20px; }
             .row.gtr-150 { margin-top: -30px; margin-left: -30px; }
            .row.gtr-150 > * { padding: 30px 0 0 30px; }
            .row.gtr-150.gtr-uniform { margin-top: -30px; }
            .row.gtr-150.gtr-uniform > * { padding-top: 30px; }
             .row.gtr-200 { margin-top: -40px; margin-left: -40px; }
            .row.gtr-200 > * { padding: 40px 0 0 40px; }
            .row.gtr-200.gtr-uniform { margin-top: -40px; }
            .row.gtr-200.gtr-uniform > * { padding-top: 40px; }
        }

/* Form - Dark Theme Adjustments */

    form label {
        display: block;
        color: #ffffff;
        font-weight: 400;
        margin: 0 0 0.5em 0;
    }

    form input[type=text],
    form input[type=email],
    form input[type=password],
    form select,
    form textarea {
        -moz-appearance: none;
        -webkit-appearance: none;
        -ms-appearance: none;
        appearance: none; /* Added standard property */
        display: block;
        border: 0;
        padding: 1em 1.2em; /* Increased padding */
        font-size: 1em;
        border-radius: 5px;
        border: solid 1px #333; /* Darker border */
        background: #1a1a1a; /* Darker background */
        color: #b0b0b0; /* Light gray text */
        width: 100%;
         transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    }

        form input[type=text]:focus,
        form input[type=email]:focus,
        form input[type=password]:focus,
        form select:focus,
        form textarea:focus {
            border-color: #00E676; /* Green focus border */
            box-shadow: 0 0 0 1px #00E676; /* Green focus outline */
            outline: none;
        }

    form textarea {
        height: 15em;
    }

    form ::-webkit-input-placeholder {
        color: #777 !important; /* Lighter placeholder text */
         opacity: 1; /* Ensure placeholder is visible */
    }

    form :-moz-placeholder {
        color: #777 !important;
         opacity: 1;
    }

    form ::-moz-placeholder {
        color: #777 !important;
         opacity: 1;
    }

    form :-ms-input-placeholder {
        color: #777 !important;
         opacity: 1;
    }

    form ::-moz-focus-inner {
        border: 0;
    }

/* Tables - Dark Theme Adjustments */

    table {
        width: 100%;
        color: #b0b0b0;
         border-collapse: separate; /* Allow border-spacing */
         border-spacing: 0;
    }

        table tr {
            border-top: solid 1px #2a2a2a; /* Darker border */
        }

            table tr:first-child {
                border-top: 0;
            }

        table td {
            padding: 1em; /* Adjusted padding */
        }

        table th {
            text-align: left;
            padding: 1em; /* Adjusted padding */
            font-weight: 700;
            margin: 0 0 1em 0;
            color: #ffffff;
             text-transform: uppercase; /* Uppercase headers */
             letter-spacing: 0.05em;
        }

        table thead {
            border-bottom: solid 2px #444;
        }

/* Section/Article - Dark Theme Adjustments */

    section, article {
        margin-bottom: 4em; /* Increased margin */
    }

        section > :last-child, section:last-child, article > :last-child, article:last-child {
            margin-bottom: 0;
        }

    header {
        margin: 0 0 2em 0; /* Increased margin */
    }

        header > p {
            display: block;
            font-style: normal; /* Remove italic */
            margin: 0.5em 0 0 0;
            padding-bottom: 0.5em;
            color: #999;
             font-size: 1.2em; /* Slightly larger sub-text */
        }

        header.major {
            position: relative;
            text-align: center;
            border-top: solid 1px #2a2a2a; /* Darker border */
            top: 1.5em; /* Adjusted position */
            margin: 0 0 4em 0; /* Increased margin */
        }

            header.major h2 {
                background: #121212; /* Match body background */
                position: relative;
                top: -0.7em; /* Adjusted position */
                display: inline-block; /* Use inline-block to wrap tightly */
                margin: 0;
                padding: 0 1.5em 0 1.5em; /* Increased padding */
            }

    footer {
        margin: 3em 0 0 0; /* Adjusted margin */
    }

/* Box - Dark Theme Adjustments */

    .box {
        background: #1a1a1a; /* Darker box background */
        border: solid 1px #2a2a2a; /* Dark border */
        padding: 2.5em; /* Increased padding */
        border-radius: 8px;
        box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.4); /* More prominent shadow */
         transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    }

     .box:hover {
         transform: translateY(-5px); /* Lift on hover */
         box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5); /* Enhanced shadow on hover */
     }


        .box .image.featured {
            position: relative;
            width: auto;
            left: 0;
            top: 0;
            margin: -2.5em -2.5em 2.5em -2.5em; /* Negative margin to extend image */
             border-top-left-radius: 8px;
            border-top-right-radius: 8px;
             overflow: hidden;
        }

        .box.post header {
            padding-top: 0;
            margin: 0 0 1.5em 0;
        }

        .box.post h2 {
            font-size: 2.2em; /* Adjusted font size */
            letter-spacing: 0.05em;
             margin-bottom: 0.3em;
        }

        .box.post header > p {
            margin-top: 0.5em;
            font-size: 1.1em;
            color: #b0b0b0;
        }

        .box footer ul.actions {
            margin-top: 2em; /* Adjusted margin */
            margin-bottom: 0;
        }

        /* Specific styling for product boxes */
        .box.product-box header h3 {
             margin-bottom: 0.2em; /* Less space below product name */
        }

        .box.product-box header .product-meta {
             font-size: 0.9em; /* Smaller meta text */
             color: #999; /* Muted color for meta */
             margin-bottom: 1em; /* Space below meta */
             letter-spacing: normal;
             text-transform: none;
             font-family: 'Lato', sans-serif;
             font-weight: 300;
        }


/* Button - Modern Street Style Adjustments */

    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    button,
    .button {
        -webkit-appearance: none;
        display: inline-block;
        text-decoration: none;
        cursor: pointer;
        border: 0;
        border-radius: 5px;
        background: #00E676; /* Vibrant Green button */
        color: #121212 !important; /* Very dark text for contrast */
        font-weight: 700; /* Bolder text */
        outline: 0;
        font-size: 1em;
        padding: 1em 2.5em; /* Increased padding */
        text-align: center;
         text-transform: uppercase; /* Uppercase button text */
         letter-spacing: 0.05em; /* Add letter spacing */
        transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out;
    }

        input[type="button"]:hover,
        input[type="submit"]:hover,
        input[type="reset"]:hover,
        button:hover,
        .button:hover {
            background: #69F0AE; /* Lighter green on hover */
             transform: translateY(-2px); /* Subtle lift on hover */
        }

        input[type="button"]:active,
        input[type="submit"]:active,
        input[type="reset"]:active,
        button:active,
        .button:active {
            background: #00C853; /* Darker green on active */
             transform: translateY(0); /* Reset position on active */
        }

        input[type="button"].alt,
        input[type="submit"].alt,
        input[type="reset"].alt,
        button.alt,
        .button.alt {
            background: #2a2a2a; /* Darker gray alternative button */
            color: #00E676 !important; /* Green text for alt button */
             border: solid 1px #00E676; /* Green border for alt button */
        }

            input[type="button"].alt:hover,
            input[type="submit"].alt:hover,
            input[type="reset"].alt:hover,
            button.alt:hover,
            .button.alt:hover {
                background: #00E676; /* Green background on alt hover */
                color: #121212 !important; /* Dark text on alt hover */
                 border-color: #00E676; /* Keep green border */
            }

            input[type="button"].alt:active,
            input[type="submit"].alt:active,
            input[type="reset"].alt:active,
            button.alt:active,
            .button.alt:active {
                background: #00C853; /* Darker green on alt active */
                 color: #121212 !important;
                 border-color: #00C853;
            }

         input[type="button"].small,
         input[type="submit"].small,
         input[type="reset"].small,
         button.small,
         .button.small {
             font-size: 0.8em; /* Smaller buttons */
             padding: 0.8em 2em; /* Adjusted padding */
         }


        input[type="button"].icon:before,
        input[type="submit"].icon:before,
        input[type="reset"].icon:before,
        button.icon:before,
        .button.icon:before {
            opacity: 1; /* Full opacity for icons */
            position: relative;
            top: 0.05em;
            margin-right: 0.75em;
        }

        input[type="button"].large,
        input[type="submit"].large,
        input[type="reset"].large,
        button.large,
        .button.large {
            font-size: 1.3em; /* Larger buttons */
            padding: 1.2em 3em; /* Increased padding */
        }

        input[type="button"].fit,
        input[type="submit"].fit,
        input[type="reset"].fit,
        button.fit,
        .button.fit {
            width: 100%;
        }


/* Image - Dark Theme Adjustments */

    .image {
        display: inline-block;
        outline: 0;
    }

        .image img {
            display: block;
            width: 100%;
            height: auto;
        }

        .image.centered {
            display: block;
            margin: 0 auto 2em auto;
        }

            .image.centered img {
                margin: 0 auto;
                width: auto;
            }

        .image.featured {
            display: block;
            width: 100%;
            margin: 0 0 2em 0;
        }

        .image.left {
            float: left;
            margin: 0 2em 2em 0;
        }

/* List - Keep the same */

    ul {
        list-style: disc;
        padding-left: 1em;
    }

        ul li {
            padding-left: 0.5em;
        }

    ol {
        list-style: decimal;
        padding-left: 1.25em;
    }

        ol li {
            padding-left: 0.25em;
        }

/* Actions - Dark Theme Adjustments */

    ul.actions {
        list-style: none;
        padding-left: 0;
        margin: 0;
    }

        ul.actions li {
            display: inline-block;
            margin: 0 1em 0 0; /* Increased spacing */
            padding-left: 0;
        }

            ul.actions li:last-child {
                margin-right: 0;
            }

/* Links - Dark Theme Adjustments */

    ul.links {
        list-style: none;
        padding-left: 0;
    }

        ul.links li {
            display: inline-block;
            border-left: solid 1px #444;
            padding: 0 0 0 1em;
            margin: 0 0 0 1em;
        }

            ul.links li:first-child {
                border-left: 0;
                padding-left: 0;
                margin-left: 0;
            }

/* Contact - Dark Theme Adjustments */

    ul.contact {
        list-style: none;
        padding-left: 0;
    }

        ul.contact li {
            position: relative;
            border-top: solid 1px #2a2a2a; /* Darker border */
            padding: 1.5em 0 1.5em 7em; /* Increased padding */
        }

            ul.contact li h3 {
                position: absolute;
                left: 0;
                top: 1.5em; /* Match padding */
                font-size: 1.1em;
                color: #ffffff;
            }

            ul.contact li p {
                margin: 0;
            }

            ul.contact li:first-child {
                padding-top: 0;
                border-top: 0;
            }

                ul.contact li:first-child h3 {
                    top: 0;
                }

/* Dates - Dark Theme Adjustments */

    ul.dates {
        list-style: none;
        padding-left: 0;
    }

        ul.dates li {
            position: relative;
            border-top: solid 1px #2a2a2a; /* Darker border */
            padding: 1.5em 0 1.5em 7em; /* Increased padding */
        }

        ul.dates .date {
            display: block;
            position: absolute;
            left: 0;
            top: 1.5em; /* Match padding */
            background-color: #00E676; /* Green date background */
            height: 3em; /* Adjusted height */
            line-height: 1em;
            text-align: center;
            color: #121212; /* Very dark text */
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
            padding: 0.5em 0.8em 0 1em; /* Adjusted padding */
             font-family: 'Bebas Neue', sans-serif; /* Apply headline font */
             letter-spacing: 0.05em;
        }

            ul.dates .date:after {
                content: '';
                position: absolute;
                bottom: 0;
                right: -1em; /* Adjusted size */
                border-left: solid 1em #00E676; /* Match green */
                border-top: solid 1.5em transparent; /* Adjusted size */
                border-bottom: solid 1.5em transparent; /* Adjusted size */
            }

            ul.dates .date strong {
                display: block;
                font-size: 1.5em; /* Adjusted size */
                padding-top: 0.1em; /* Adjusted padding */
                 color: #121212; /* Ensure strong text is dark */
            }

        ul.dates h3 {
            font-size: 1.2em; /* Adjusted size */
             color: #ffffff;
             margin-bottom: 0.3em;
        }

        ul.dates p {
            margin: 0;
             color: #b0b0b0;
        }

        ul.dates li:first-child {
            border-top: 0;
            padding-top: 0;
        }

            ul.dates li:first-child .date {
                top: 0;
            }

/* Divided - Dark Theme Adjustments */

    ul.divided {
        list-style: none;
        padding-left: 0;
    }

        ul.divided li {
            border-top: solid 1px #2a2a2a; /* Darker border */
            padding: 1.2em 0; /* Adjusted padding */
        }

            ul.divided li:first-child {
                border-top: 0;
                padding-top: 0;
            }

/* Social - Modern Dark Theme Adjustments */

    ul.social {
        list-style: none;
        padding-left: 0;
        overflow: hidden;
        cursor: default;
        margin: 0 0 2em 0; /* Adjusted margin */
    }

        ul.social li {
            display: inline-block;
            padding-left: 0;
            margin-left: 0.5em; /* Adjusted spacing */
        }

            ul.social li:first-child {
                margin-left: 0;
            }

            ul.social li a {
                display: inline-block;
                width: 2.5em; /* Adjusted size */
                height: 2.5em; /* Adjusted size */
                line-height: 2.5em; /* Center icon vertically */
                text-align: center;
                border-radius: 5px;
                background: #2a2a2a; /* Dark gray background */
                color: #b0b0b0; /* Light gray icon color */
                transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
                 font-size: 1.2em; /* Slightly larger icon */
            }

                ul.social li a:hover {
                    background: #00E676; /* Green background on hover */
                    color: #121212; /* Very dark icon color on hover */
                }

                /* Specific social icon colors (optional, can keep dark gray) */
                ul.social li a.fa-instagram { background: #e1306c; }
                ul.social li a.fa-instagram:hover { background: #c32a5e; }
                ul.social li a.fa-facebook-f { background: #3b5998; }
                ul.social li a.fa-facebook-f:hover { background: #344e86; }
                ul.social li a.fa-twitter { background: #1da1f2; }
                ul.social li a.fa-twitter:hover { background: #1a94e6; }
                ul.social li a.fa-pinterest { background: #bd081c; }
                ul.social li a.fa-pinterest:hover { background: #a30719; }


/* Icons - Modern Dark Theme Adjustments */

    .icon {
        text-decoration: none;
        position: relative;
        text-decoration: none;
    }

        .icon:before {
            -moz-osx-font-smoothing: grayscale;
            -webkit-font-smoothing: antialiased;
            display: inline-block;
            font-style: normal;
            font-variant: normal;
            text-rendering: auto;
            line-height: 1;
            text-transform: none !important;
            font-family: 'Font Awesome 6 Free';
            font-weight: 400;
        }

        .icon.solid:before {
            font-weight: 900;
        }

        .icon.brands:before {
            font-family: 'Font Awesome 6 Brands';
        }

        .icon:before {
            line-height: inherit;
        }

        .icon > .label {
            display: none;
        }

        .icon.featured {
            position: relative;
            display: inline-block;
            background-color: #00E676; /* Green featured icon */
            width: 7em; /* Adjusted size */
            padding: 1.8em 0 0.7em 0; /* Adjusted padding */
            border-top-left-radius: 8px; /* Match box border radius */
            border-top-right-radius: 8px; /* Match box border radius */
            margin: 0 0 3.5em 0; /* Increased margin */
            cursor: default;
             transition: background-color 0.2s ease-in-out;
        }

            .icon.featured:before {
                font-size: 3.5em; /* Adjusted icon size */
                line-height: 1em;
                color: #121212; /* Very dark icon color */
            }

            .icon.featured:after {
                content: '';
                position: absolute;
                bottom: -1.5em; /* Adjusted position */
                left: 0;
                border-top: solid 1.8em #00E676; /* Match green */
                border-left: solid 3.5em transparent; /* Adjusted size */
                border-right: solid 3.5em transparent; /* Adjusted size */
            }

            .icon.featured.alt {
                background-color: #2a2a2a; /* Dark gray alt icon */
            }

                .icon.featured.alt:after {
                    border-top-color: #2a2a2a; /* Match dark gray */
                }

            .icon.featured.alt2 {
                background-color: #444; /* Medium dark gray alt2 icon */
            }

                .icon.featured.alt2:after {
                    border-top-color: #444; /* Match medium dark gray */
                }

/* Page Wrapper - Keep the same */

    #page-wrapper > section {
        margin-bottom: 0;
    }

/* Header - Modern Dark Theme Adjustments */

    #header {
        position: relative;
        background: #1a1a1a; /* Dark header background */
        border-bottom: solid 1px #2a2a2a; /* Darker border */
        padding: 2em 0; /* Adjusted padding */
        text-align: center;
         box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Subtle shadow */
    }

        #header h1 {
            color: #ffffff; /* White logo text/alt text */
            font-weight: 400; /* Bebas Neue weight */
            font-size: 2.2em; /* Adjusted font size */
            letter-spacing: 0.1em; /* Increased letter spacing */
             margin: 0.5em 0; /* Add some margin around logo */
        }

/* Nav - Modern Dark Theme Adjustments */

    #nav {
        margin: 0.5em 0 0 0; /* Adjusted margin */
    }

        #nav > ul {
            margin: 0;
        }

            #nav > ul > li {
                display: inline-block;
                font-style: normal;
                margin: 0 0.7em 0 0.7em; /* Increased spacing */
            }

                #nav > ul > li > ul {
                    display: none;
                }

                #nav > ul > li > a {
                    border-radius: 5px;
                    color: #b0b0b0; /* Light gray text */
                    text-decoration: none;
                    padding: 0.6em 1.2em; /* Adjusted padding */
                    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
                    outline: 0;
                    font-weight: 400;
                     letter-spacing: 0.05em;
                     text-transform: uppercase; /* Uppercase nav items */
                }

                #nav > ul > li:hover > a, #nav > ul > li.active > a {
                    background: #2a2a2a; /* Darker background on hover/active */
                    color: #ffffff; /* White text on hover/active */
                }

                #nav > ul > li.current > a {
                    background: #00E676; /* Green background for current page */
                    color: #121212 !important; /* Very dark text */
                    font-weight: 700; /* Bolder */
                }

                 #nav > ul > li.current:hover > a {
                     background: #69F0AE; /* Lighter green on hover for current */
                 }


                #nav > ul > li a .fas,
                #nav > ul > li a .far,
                #nav > ul > li a .fab {
                    margin-right: 0.5em;
                     color: #b0b0b0; /* Default icon color */
                     transition: color 0.2s ease-in-out;
                }

                 #nav > ul > li:hover > a .fas,
                 #nav > ul > li:hover > a .far,
                 #nav > ul > li:hover > a .fab {
                    color: #ffffff; /* White icon on hover */
                 }

                 #nav > ul > li.current > a .fas,
                 #nav > ul > li.current > a .far,
                 #nav > ul > li.current > a .fab {
                    color: #121212; /* Dark icon for current */
                 }


    .dropotron {
        border-radius: 5px;
        background-color: #1a1a1a; /* Darker dropdown background */
        padding: 1em 1.2em;
        font-style: normal;
        min-width: 12em;
        box-shadow: 0px 8px 15px 0px rgba(0, 0, 0, 0.7);
        text-align: left;
        margin-top: -0.5em;
        margin-left: -1px;
        list-style: none;
    }

        .dropotron a, .dropotron span {
            color: #b0b0b0; /* Light gray text */
            text-decoration: none;
            transition: color 0.2s ease-in-out;
             padding: 0.6em 0; /* Increased vertical padding */
             display: block;
             letter-spacing: normal; /* Remove letter spacing */
             text-transform: none; /* Remove uppercase */
             font-family: 'Lato', sans-serif; /* Use body font */
             font-weight: 300;
        }

        .dropotron li {
            padding: 0;
            border-top: solid 1px #2a2a2a; /* Darker border between items */
        }

             .dropotron li:first-child {
                border-top: none;
             }

            .dropotron li:hover > a, .dropotron li:hover > span {
                color: #ffffff; /* White text on hover */
            }

        .dropotron.level-0 {
            margin-top: 1.5em;
        }

            .dropotron.level-0:before {
                content: '';
                position: absolute;
                left: 50%;
                margin-left: -10px;
                top: -9px;
                border-left: solid 10px transparent;
                border-right: solid 10px transparent;
                border-bottom: solid 10px #1a1a1a; /* Match dropdown background */
                border-bottom-color: rgba(26, 26, 26, 0.98); /* Match dropdown background */
            }

/* Banner - Modern Dark Theme Adjustments */

    #banner {
        background: #333 url("../images/dispensary_hero_dark.jpg");
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        text-align: center;
        position: relative;
        padding: 12em 0; /* More vertical padding */
        margin: 0;
        color: #eee;
    }

         #banner:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.6); /* Darker overlay */
            z-index: 1;
         }

        #banner > * {
            position: relative;
            z-index: 2;
        }

        #banner header {
            background-color: rgba(0, 0, 0, 0.7); /* Darker semi-transparent background for text */
            display: inline-block;
            padding: 3em 5em; /* Increased padding */
            border-radius: 8px;
            margin-bottom: 2em; /* Increased bottom margin */
        }

            #banner header h2 {
                color: #ffffff;
                font-weight: 400;
                font-size: 3.5em; /* Larger headline */
                margin: 0 0 0.3em 0; /* Reduced bottom margin */
                 letter-spacing: 0.1em; /* Increased letter spacing */
            }

            #banner header p {
                color: #b0b0b0;
                padding: 0;
                font-style: normal;
                margin: 0;
                font-size: 1.6em; /* Adjusted font size */
                 letter-spacing: 0.05em; /* Added letter spacing */
                 text-transform: uppercase; /* Uppercase tagline */
                 font-family: 'Lato', sans-serif; /* Use body font for tagline */
                 font-weight: 400;
            }

        #banner .subtitle {
            font-size: 1.3em; /* Adjusted font size */
            margin-top: 1em;
             color: #ccc; /* Lighter color for subtitle */
        }


        #banner footer {
            margin-top: 3em; /* Increased top margin */
        }

        #banner footer ul.actions li {
             margin: 0 1em; /* Increased spacing for banner buttons */
        }


/* Intro - Modern Dark Theme Adjustments */

    #intro {
        text-align: center;
        overflow: hidden;
        padding: 5em 0 3em 0; /* Increased padding */
         background: #1a1a1a; /* Dark background */
    }

        #intro section {
            margin: 2em 0;
            padding: 0;
            border-top: solid 1px #2a2a2a; /* Darker border */
        }

            #intro section.first {
                border-top: 0;
                padding-top: 0;
            }

            #intro section p {
                margin: 0;
                font-size: 1.1em;
                color: #b0b0b0;
            }

        #intro h2 {
            font-size: 1.8em; /* Adjusted heading size */
            margin-bottom: 0.5em;
             letter-spacing: 0.08em; /* Increased letter spacing */
        }

        #intro .middle:before, #intro .middle:after {
             box-shadow: 32px 0 0 0 #2a2a2a, 0 -32px 0 0 #2a2a2a, 0 32px 0 0 #2a2a2a, 32px 32px 0 0 #2a2a2a, 32px -32px 0 0 #2a2a2a, 0 0 32px 0 rgba(0, 0, 0, 0.4); /* Darker shadow */
        }

         #intro .middle:after {
            box-shadow: -32px 0 0 0 #2a2a2a, 0 -32px 0 0 #2a2a2a, 0 32px 0 0 #2a2a2a, -32px 32px 0 0 #2a2a2a, -32px -32px 0 0 #2a2a2a, 0 0 32px 0 rgba(0, 0, 0, 0.4); /* Darker shadow */
         }


        #intro .icon.featured {
             background-color: #00E676; /* Green featured icon */
        }

         #intro .icon.featured:after {
             border-top-color: #00E676;
         }

         #intro .icon.featured.alt {
             background-color: #2a2a2a; /* Dark alt icon */
         }

         #intro .icon.featured.alt:after {
             border-top-color: #2a2a2a;
         }

         #intro .icon.featured.alt2 {
             background-color: #444; /* Medium dark alt2 icon */
         }

         #intro .icon.featured.alt2:after {
             border-top-color: #444;
         }

        #intro footer {
            margin-top: 3em;
        }

/* Main - Modern Dark Theme Adjustments */

    #main {
        position: relative;
        background: #121212; /* Match body background */
        background-image: none;
        padding: 5em 0; /* Increased padding */
        color: #b0b0b0;
    }

        #main:before {
           display: none;
        }

        #main .major h2 {
            background: #121212;
        }

/* Footer - Modern Dark Theme Adjustments */

    #footer {
        position: relative;
        background: #1a1a1a; /* Darker footer background */
        color: #888;
        padding: 4em 0;
    }

        #footer:before {
           display: none;
        }

        #footer a {
            color: #b0b0b0;
        }

        #footer a:hover {
             color: #ffffff;
        }

        #footer h2, #footer h3, #footer h4, #footer h5, #footer h6, #footer strong, #footer b {
            color: #ffffff;
        }

        #footer h2 a, #footer h3 a, #footer h4 a, #footer h5 a, #footer h6 a, #footer strong a, #footer b a {
            color: inherit;
        }

        #footer ul.contact li,
        #footer ul.dates li,
        #footer ul.divided li {
            border-top-color: #2a2a2a; /* Darker border in footer */
        }

        #footer header {
            margin: 0 0 2em 0;
        }

            #footer header h2 {
                font-size: 1.8em; /* Adjusted heading size */
                 letter-spacing: 0.08em;
            }

        #footer .image.featured {
             margin: 0 0 2em 0;
             border-radius: 8px;
        }

        #footer form input[type=text],
        #footer form input[type=email],
        #footer form input[type=password],
        #footer form select,
        #footer form textarea {
             background: #2a2a2a; /* Darker background for form elements */
             border-color: #444; /* Darker border */
             color: #b0b0b0;
        }

         #footer form input[type=text]:focus,
        #footer form input[type=email]:focus,
        #footer form input[type=password]:focus,
        #footer form select:focus,
        #footer form textarea:focus {
             border-color: #00E676;
             box-shadow: 0 0 0 1px #00E676;
         }

         #footer form input[type=submit] {
             background: #00E676; /* Green subscribe button */
             color: #121212 !important;
             font-weight: 700;
             text-transform: uppercase;
             letter-spacing: 0.05em;
         }

         #footer form input[type=submit]:hover {
             background: #69F0AE;
         }


/* Copyright - Modern Dark Theme Adjustments */

    #copyright {
        text-align: center;
        margin: 4em 0 1em 0; /* Increased margin */
        color: #666; /* More muted copyright text color */
         font-size: 0.9em; /* Smaller copyright text */
    }

        #copyright ul.links {
            background: none;
            border-radius: 0;
            margin: 0;
            padding: 0;
             display: block;
        }

        #copyright ul.links li {
            border-left: solid 1px #444;
             margin: 0 0.8em; /* Increased spacing */
        }

         #copyright ul.links li:first-child {
             margin-left: 0;
         }

        #copyright ul.links a {
            color: #888; /* Muted link color in copyright */
             text-decoration: none;
        }

         #copyright ul.links a:hover {
             color: #b0b0b0; /* Lighter on hover */
             text-decoration: underline;
         }


/* XLarge - Keep the same */

    @media screen and (max-width: 1680px) {

        /* Basic */

            body, input, textarea, select {
                font-size: 12pt;
            }

    }

/* Large - Adjust padding/margins */

    @media screen and (max-width: 1280px) {

        /* Basic */

            body, input, textarea, select {
                font-size: 11pt;
            }

        /* Section/Article */

            header.major {
                margin: 1em 0 2.5em 0; /* Adjusted margin */
            }

                header.major h2 {
                    padding: 0 1.2em 0 1.2em; /* Adjusted padding */
                     font-size: 2.2em; /* Adjusted size */
                }

        /* Social */

            ul.social li {
                margin: 0 0 0.25em 0.5em;
            }

        /* Header */

            #header {
                padding: 1.5em 0; /* Adjusted padding */
            }
             #header h1 {
                 font-size: 2em; /* Adjusted size */
             }


        /* Banner */

            #banner {
                padding: 10em 0; /* Adjusted padding */
            }

             #banner header {
                 padding: 2.5em 4em; /* Adjusted padding */
             }

             #banner header h2 {
                 font-size: 3em; /* Adjusted size */
             }

             #banner header p {
                 font-size: 1.4em; /* Adjusted size */
             }

             #banner .subtitle {
                 font-size: 1.1em; /* Adjusted size */
             }


        /* Intro */

            #intro {
                padding: 4em 0 2em 0; /* Adjusted padding */
            }

                #intro section {
                    padding: 1em 2em;
                }

                #intro .middle:before { left: -12px; }
                #intro .middle:after { right: -12px; }


                #intro footer {
                    padding: 2.5em 0 0 0; /* Adjusted padding */
                }

        /* Main */

            #main {
                padding: 4em 0;
            }

        /* Footer */

            #footer {
                padding: 3em 0;
            }

                #footer header {
                    margin: 0 0 1.5em 0;
                }

                    #footer header h2 {
                        font-size: 1.6em; /* Adjusted size */
                    }

        /* Copyright */

            #copyright {
                margin: 3em 0 1em 0;
            }

    }

/* Medium - Adjust padding/margins */

    #navPanel, #titleBar {
        display: none;
    }

    @media screen and (max-width: 980px) {

        /* Basic */

            html, body { overflow-x: hidden; }
            h2 { font-size: 2em; }
            h3 { font-size: 1.6em; }


        /* Box */

            .box footer ul.actions li {
                margin: 1em 0 0 0;
                display: block;
            }

                .box footer ul.actions li .button {
                    width: 100%;
                }

                .box footer ul.actions li:first-child {
                    margin-top: 0;
                }
             .box .image.featured {
                 margin: -2.5em -2.5em 2em -2.5em; /* Adjusted margin */
             }


        /* Header */

            #header {
                padding: 1.5em 0;
            }
             #header h1 {
                 font-size: 1.8em; /* Adjusted size */
             }


        /* Nav */

            #nav { display: none; }


        /* Intro */

            #intro {
                padding: 3em 0 0 0;
            }

                #intro section {
                    position: relative;
                    border-top: solid 1px #2a2a2a;
                    margin: 0;
                    padding: 40px 0 0 0;
                }

                    #intro section.first { border-top: 0; padding-top: 0; }
                    #intro section p { margin: 0; }


                #intro .middle:before, #intro .middle:after { display: none; }

                #intro footer { padding: 2.5em 0 0 0; }
                    #intro footer ul.actions { margin-bottom: 0; }


        /* Main */

            #main { padding: 40px 0; }


        /* Footer -->

            #footer { padding: 3em 0 2em 0; }
             #footer header h2 {
                 font-size: 1.5em;
             }


        /* Copyright */

            #copyright { margin: 3em 0 1em 0; }
            #copyright ul.links { display: block; }
             #copyright ul.links li {
                 margin: 0.5em 0;
                 border-left: none;
             }


        /* Nav Panel (for mobile) - Dark Theme Adjustments */

            #page-wrapper {
                -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden;
                -moz-transition: -moz-transform 0.5s ease; -webkit-transition: -webkit-transform 0.5s ease; -ms-transition: -ms-transform 0.5s ease; transition: transform 0.5s ease;
                padding-bottom: 1px;
            }

            #titleBar {
                -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden;
                -moz-transition: -moz-transform 0.5s ease; -webkit-transition: -webkit-transform 0.5s ease; -ms-transition: -ms-transform 0.5s ease; transition: transform 0.5s ease;
                display: block;
                height: 44px;
                left: 0;
                position: fixed;
                top: 0;
                width: 100%;
                z-index: 10001;
                background: #1a1a1a; /* Dark header background */
                 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
            }

                #titleBar .toggle {
                    text-decoration: none;
                    width: 60px; /* Adjusted size */
                    height: 44px; /* Match height */
                    display: block;
                    position: relative;
                }

                    #titleBar .toggle:before {
                        -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; line-height: 1; text-transform: none !important; font-family: 'Font Awesome 6 Free'; font-weight: 900;
                        content: '\f0c9';
                        display: block;
                        position: absolute;
                        left: 0; top: 0; /* Align to top-left */
                        width: 100%; height: 100%; /* Make clickable area full size */
                        line-height: 44px; /* Center vertically */
                        font-size: 1.5em; /* Adjusted size */
                        color: #00E676; /* Green icon color */
                        text-align: center;
                         background: transparent; /* No background */
                         border-radius: 0; /* No border radius */
                    }

                    #titleBar .toggle:active:before {
                        color: #69F0AE; /* Lighter green on active */
                    }

            #navPanel {
                -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden;
                -moz-transform: translateX(-275px); -webkit-transform: translateX(-275px); -ms-transform: translateX(-275px); transform: translateX(-275px);
                -moz-transition: -moz-transform 0.5s ease; -webkit-transition: -webkit-transform 0.5s ease; -ms-transition: -ms-transform 0.5s ease; transition: transform 0.5s ease;
                display: block;
                height: 100%;
                left: 0;
                overflow-y: auto;
                position: fixed;
                top: 0;
                width: 275px;
                z-index: 10002;
                color: #b0b0b0;
                background-color: #1a1a1a; /* Dark panel background */
                background-image: none;
                box-shadow: inset -3px 0px 5px 0px rgba(0, 0, 0, 0.5);
                padding: 1em 0; /* Add some padding to the panel */
            }

                #navPanel .link {
                    display: block;
                    color: #b0b0b0;
                    text-decoration: none;
                    height: 40px; /* Adjusted height */
                    line-height: 40px; /* Center vertically */
                    border-top: solid 1px #2a2a2a;
                    padding: 0 1.5em; /* Increased padding */
                    font-style: normal;
                     transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
                     text-transform: uppercase; /* Uppercase */
                     letter-spacing: 0.05em;
                     font-size: 0.9em; /* Slightly smaller font */
                }

                    #navPanel .link:first-child { border-top: 0; }

                    #navPanel .link:hover {
                        background-color: #2a2a2a;
                        color: #ffffff;
                    }


                #navPanel .indent-1 { display: inline-block; width: 1em; }
                #navPanel .indent-2 { display: inline-block; width: 2em; }
                #navPanel .indent-3 { display: inline-block; width: 3em; }
                #navPanel .indent-4 { display: inline-block; width: 4em; }
                #navPanel .indent-5 { display: inline-block; width: 5em; }

                #navPanel .depth-0 {
                    color: #ffffff;
                    font-weight: 400; /* Bebas Neue doesn't have 500 */
                     font-family: 'Bebas Neue', sans-serif; /* Use Bebas Neue for top level */
                     font-size: 1.1em; /* Larger top level */
                }

                #navPanel .depth-0:hover { color: #ffffff; }


            body.navPanel-visible #page-wrapper {
                -moz-transform: translateX(275px); -webkit-transform: translateX(275px); -ms-transform: translateX(275px); transform: translateX(275px);
            }

            body.navPanel-visible #titleBar {
                -moz-transform: translateX(275px); -webkit-transform: translateX(275px); -ms-transform: translateX(275px); transform: translateX(275px);
            }

            body.navPanel-visible #navPanel {
                -moz-transform: translateX(0); -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0);
            }

    }

/* Small - Adjust padding/margins */

    @media screen and (max-width: 736px) {

        /* Basic */

            body, input, textarea, select { font-size: 11pt; }
            h2 { font-size: 1.8em; }
            h3 { font-size: 1.4em; }


        /* Button */

            input[type="button"].large, input[type="submit"].large, input[type="reset"].large, button.large, .button.large {
                font-size: 1.1em;
                padding: 1em 2.5em;
            }

        /* Actions */

            ul.actions li {
                margin: 0.8em 0 0 0;
                display: block;
            }

                ul.actions li .button { width: 100%; }
                ul.actions li:first-child { margin-top: 0; }


        /* Section/Article */

            section, article { margin-bottom: 30px; }
            header { margin: 0 0 1em 0; }
            footer { margin: 2em 0 0 0; }


        /* Box */

            .box { padding: 20px 15px; }
            .box .image.featured { margin: -20px -15px 15px -15px; }
            .box.post header { margin: 0 0 1em 0; }
            .box.post h2 { font-size: 1.8em; line-height: 1.3em; }
            .box.post header > p { font-size: 1em; }
             .box.product-box header .product-meta { margin-bottom: 0.8em;}


        /* Divided */

            ul.divided li { padding: 0.8em 0; }


        /* Contact */

            ul.contact li { padding: 0.8em 0 0.8em 6em; }
            ul.contact li h3 { top: 0.8em; }


        /* Dates */

            ul.dates li { padding-left: 5.5em; }
            ul.dates h3 { margin: 0 0 0.5em 0; }
             ul.dates .date {
                 top: 0.8em;
                 height: 3em;
                 padding: 0.5em 0.6em 0 0.8em;
             }
             ul.dates .date:after {
                 border-top: solid 1.5em transparent;
                 border-bottom: solid 1.5em transparent;
                 border-left: solid 0.8em #00E676;
                 right: -0.8em;
             }
             ul.dates .date strong { font-size: 1.4em; }


        /* Links */

            ul.links li {
                display: block;
                padding: 0.3em 0 0 0;
                margin: 0.3em 0 0 0;
                border-left: 0;
            }

                ul.links li:first-child { padding-top: 0; margin-top: 0; }


        /* Social */

            ul.social li { margin: 0 0.4em 0.6em 0; }
             ul.social li a { width: 2.2em; height: 2.2em; line-height: 2.2em; font-size: 1.1em;}


        /* Icons */

            .icon.featured {
                width: 6em;
                margin: 0 0 2em 0;
                 padding: 1.5em 0 0.5em 0;
            }

                .icon.featured:before { font-size: 3em;}
                .icon.featured:after {
                    border-top: solid 1.5em #00E676;
                    border-left: solid 3em transparent;
                    border-right: solid 3em transparent;
                     bottom: -1.3em;
                }
                .icon.featured.alt:after { border-top-color: #2a2a2a; }
                .icon.featured.alt2:after { border-top-color: #444; }


        /* Header */

            #header { padding: 1em 0; }
            #header h1 { font-size: 1.6em; }


        /* Intro */

            #intro { padding: 2em 0 0 0; }
            #intro section { padding: 30px 0 0 0; margin: 20px 0 0 0; }
            #intro h2 { font-size: 1.5em; }
            #intro footer { margin-top: 2em; }


        /* Banner */

            #banner { padding: 8em 0; }
            #banner header { padding: 2em 1.5em; }
            #banner header h2 { font-size: 2.5em; line-height: 1.2em; margin: 0 0 0.4em 0;}
            #banner header p { font-size: 1.2em; }
             #banner .subtitle { font-size: 1em; margin-top: 0.5em;}
             #banner footer ul.actions li { margin: 0 0.5em;}


        /* Main */

            #main { padding: 30px 0; }


        /* Footer */

            #footer { padding: 40px 0 20px 0; }
             #footer header h2 { font-size: 1.4em;}

         #footer form input[type=email], #footer form input[type=submit] { font-size: 0.9em;}

    }