@import url("https://fonts.googleapis.com/css?family=Fjalla+One");
@import url("https://fonts.googleapis.com/css?family=Roboto+Slab");
/* styles.css */

@font-face {
    font-family: Cinzel Decorative;
    font-style: normal;
    font-weight: 400;
    src: url(/cf-fonts/s/cinzel-decorative/5.0.18/latin/400/normal.woff2);
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    font-display: swap;
}

@font-face {
    font-family: Cinzel Decorative;
    font-style: normal;
    font-weight: 700;
    src: url(/cf-fonts/s/cinzel-decorative/5.0.18/latin/700/normal.woff2);
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    font-display: swap;
}

@font-face {
    font-family: Cinzel Decorative;
    font-style: normal;
    font-weight: 900;
    src: url(/cf-fonts/s/cinzel-decorative/5.0.18/latin/900/normal.woff2);
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    font-display: swap;
}
/* General Reset & Base */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}



:root {
    /* Color Variables */
    --background-light: #333;
    --background-dark: #202024;
    --text-light: #fff;
    --text-secondary: floralwhite;
    --accent: #b71c1c;
    --border-color: #dcdfe6;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --hover-shadow-color: rgba(0, 0, 0, 0.2);
    /* Gradients & Additional Colors */
    --accent-gradient: linear-gradient(270deg, #b71c1c, #ff0000);
    --primary-red: #b71c1c;
    --secondary-red: #ee1c25;
    --light-red: #cd0606;
    --gradient-red: linear-gradient(270deg, #b71c1c, #ff0000);
    --dark-blue: #022c3b;
    /* Status Colors */
    --success-color: #d4edda;
    --success-border: #c3e6cb;
    --error-color: #f8d7da;
    --error-border: #f5c6cb;
    /* Layout Variables */
    --navbar-height: 80px;
    --hue: 223;
    --bg: hsl(var(--hue), 10%, 90%) !important;
    --fg: hsl(var(--hue), 10%, 10%) !important;
    --trans-dur: 0.3s;
    scroll-behavior: unset;
}

/* Ensure content stops below the fixed navbar when scrolling */
html {
    scroll-padding-top: var(--navbar-height, 80px); /* Adjust for the navbar height */
   
}


body {
    font-family: 'Helvetica Neue', Helvetica, Roboto, sans-serif;
    line-height: 1.6;
    background-color: #202024 !important;
    color: var(--text-light);
    overflow-x: hidden;
    transition: all 0.3s ease-in-out, padding-top 0.3s ease-in-out;
    padding-top: var(--navbar-height);
    display: flex;
    font-size: 1.4rem;
    flex-direction: column;

}

    body.is-preload *, body.is-preload *:before, body.is-preload *:after {
        -moz-animation: none !important;
        -webkit-animation: none !important;
        -ms-animation: none !important;
        animation: none !important;
        -moz-transition: none !important;
        -webkit-transition: none !important;
        -ms-transition: none !important;
        transition: none !important;
    }

.article p:first-of-type::first-letter {
    color: hsl(35 70% 40%);
    float: left;
    font-size: 2.25lh; /* Use em or px if lh is unsupported */
    font-weight: 600;
    line-height: 0.75;
    margin-inline-end: 0.125em;
}

.article p {
    text-indent: 0; /* Default for the first paragraph */
}

    .article p ~ p {
        text-indent: 2em; /* Indent all subsequent paragraphs */
    }





/* Add other section IDs as needed */
#header {
    scroll-margin-top: var(--navbar-height);
}


/* Navbar */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    height: var(--navbar-height, 80px); /* Default height */
    background-color: #333 !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    z-index: 999;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: height 0.3s ease; /* Smooth resizing */
}

.row > * {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}


.navbar-brand {
    display: flex;
}

.navbar .container {
    width: 100%; /* Full width of the navbar */
    max-width: 100%; /* Remove any default width restrictions */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem; /* Optional: Adjust spacing between elements */
    padding: 0 20px; /* Add padding for spacing */
}

/* Navbar Logo */
.navbar-logo {
    flex: 0; /* Prevent stretching */
    text-align: left;
    margin-right: auto; /* Push dynamic links to the right */
    font-family: 'Cinzel Decorative', serif;
    font-size: 2rem; /* Default font size */
    background: #fff;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 1px;
    font-weight: bold;
    margin: 0;
    white-space: nowrap; /* Prevent wrapping */
    transition: font-size 0.3s ease-in-out; /* Smooth resizing */
}


.navbar-dynamic-links {
    display: flex;
    justify-content: space-evenly; /* Center links in their space */
    align-items: center;
    flex: 1; /* Take up space between logo and YouTube SVG */
    gap: 1rem; /* Add spacing between links */
}


    .navbar-dynamic-links .nav-link {
        font-size: 20px;
        font-weight: 400;
        text-transform: uppercase;
        font-family: 'Times New Roman', Times, serif;
    }

.navbar-link-separator {
    color: #ccc; /* Adjust the color to fit your design */
    font-size: 1rem; /* Match the font size of your links */
    vertical-align: middle;
}




.youtube-logo {
    flex: 0; /* Prevent stretching */
    text-align: right; /* Align to the right */
    margin-left: auto; /* Push dynamic links to the left */
    text-decoration: none;
    filter: sepia(100);
}

    /* YouTube Logo Button */
    .youtube-logo img {
        width: 130px;
        height: 30px;
        margin-right: 20px;
        transition: all .25s ease-in-out;
        text-decoration: none;
    }

    .youtube-logo:hover {
        filter: none;
    }

        .youtube-logo:hover img {
            filter: none;
            opacity: 1;
            transform: scale(1.1); /* Slight zoom effect */
        }




/* Navbar Toggler */
.navbar-toggler {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; /* Default size */
    height: 40px;
    background-color: white !important;
    padding: 0 !important;
    transition: width 0.3s ease, height 0.3s ease; /* Smooth resizing */
}


/* Navbar Toggler Icon */
.navbar-toggler-icon {
    width: 100%;
    height: 100%;
    background-size: 60% 60%; /* Proportional scaling */
    background-position: center;
    background-repeat: no-repeat;
}

@media (max-width: 1465px) {
    .navbar-dynamic-link .navbar-link-separator {
        display: none !important;
    }
}


@media (max-width: 1465px) {
    .navbar-dynamic-links {
        display: none !important;
    }
}



/* Responsive Adjustments */
@media (max-width: 992px) {
    .navbar {
        height: 70px !important;
    }

    .navbar-logo {
        font-size: 1.8rem !important;
    }

    .navbar-toggler {
        width: 35px !important;
        height: 35px !important;
    }

    .youtube-logo img {
        display: none !important;
    }


}



@media (max-width: 768px) {
    .navbar {
        height: 60px !important; /* Reduced navbar height */
    }

    .navbar-logo {
        font-size: 30px !important;
    }

    body, .author {
        font-size: 1.3rem;
    }

    .navbar-toggler {
        width: 30px;
        height: 30px;
    }

    .youtube-logo img {
        display: none !important;
    }

    .navbar .container {
        gap: 0 !important;
        padding: 0 !important;
    }
}

@media (max-width: 576px) {
    .navbar {
        height: 50px; /* Minimum navbar height */
    }

    .navbar-logo {
        font-size: 20px !important; /* Minimum font size */
    }

    body, .author{
        font-size: 1.2rem;
    }

    .navbar-toggler {
        width: 25px;
        height: 25px;
    }

    .youtube-logo img {
        display: none !important;
    }

    .navbar .container {
        gap: 0 !important;
        padding: 0 !important;
    }
}

@media (max-width: 416px) {
    .navbar-logo {
        font-size: 16px !important;
    }

    .navbar .container {
        gap: 0 !important;
        padding: 0 !important;
    }


    body, .author {
        font-size: 1.2rem;
    }

    .navbar-toggler {
        width: 25px;
        height: 25px;
    }
}

@media (max-width: 360px) {
    .navbar-logo {
        font-size: 14px !important;
    }

    .navbar .container {
        gap: 0 !important;
        padding: 0 !important;
    }
    body, .author{
        font-size: 1rem;
    }

    .navbar-toggler {
        width: 25px;
        height: 25px;
    }
}


/* Offcanvas Styling */
.offcanvas {
    width: 75% !important; /* Set the width to 75% of the screen */
    max-width: 75% !important; /* Ensure it doesn't exceed 75% of the screen width */
    transition: transform 0.3s ease-in-out; /* Smooth open/close transition */
}

/* Optional: Add some padding for content inside */
.offcanvas-body {
    padding: 15px;
}

/* Responsive Adjustment */
@media (max-width: 576px) { /* For very small screens */
    .offcanvas {
        width: 90% !important; /* Allow more space on small screens */
        max-width: 90% !important; /* Adjust max width */
    }
}

/* Subheader (Large Screens Only) */
.subheader {
    display: flex !important;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    gap: 6px;
    position: fixed;
    width: 100%;
    background-color: #f1e6cb; /* Soft pastel background */
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 998;
    transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
    justify-content: space-between;
    padding-bottom: 5px;
}



    .subheader.hidden {
        transform: translateY(-100%);
    }

    /* Subheader Nav Links */
    .subheader .navbar-nav {
        gap: 20px; /* Space between nav items */
    }

    .subheader .nav-link {
        font-weight: 500;
        font-size: 1rem; /* Readable font size */
        text-transform: uppercase !important;
        padding: 0.5rem 1rem;
        transition: color 0.3s ease, transform 0.3s ease;
    }

        .subheader .nav-link:hover {
            color: #fff;
            border-radius: 5px;
            transform: translateY(-2px); /* Subtle hover effect */
        }


        /* Active Link Styling */
        .subheader .nav-link.active {
            color: #fff;
            border-radius: 5px;
            font-weight: bold;
        }

#subheader .nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px; /* Position underline slightly below the link */
    left: 50%;
    width: 0;
    height: 3px; /* Thickness of the underline */
    background-color: #a6301d; /* Color of the underline */
    transform: translateX(-50%);
    transition: all 0.3s ease-in-out;
}

#subheader .nav-link:hover::after {
    width: 100%; /* Expand underline */
    left: 0; /* Align underline to the left */
    transform: none; /* Remove centering transformation */
}


/* Hide Subheader on Small Screens */
@media (max-width: 991.98px) {
    .subheader {
        display: none !important;
    }
}





@media (max-width: 991.98px) {
    .subheader {
        display: none !important;
    }
}

.subheader .navbar-nav .nav-link {
    font-weight: bold;
    color: #000;
    padding: 0.5rem 1rem;
}

/* Offcanvas Menu */
.offcanvas-menu {
    position: fixed;
    top: 0;
    right: -300px;
    width: 300px;
    height: 100%;
    background-color: #ffffff;
    transition: right 0.3s ease;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
    z-index: 1050;
}

    .offcanvas-menu.open {
        right: 0;
    }

    .offcanvas-menu ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

        .offcanvas-menu ul li {
            border-bottom: 1px solid #ddd;
            padding: 15px;
            text-align: center;
        }

            .offcanvas-menu ul li a {
                text-decoration: none;
                color: #000;
                font-weight: bold;
            }

/* Offcanvas Links Styling (If Using Bootstrap's Offcanvas) */
.offcanvas-body .navbar-nav .nav-item {
    padding: 15px 0;
    border-bottom: 1px solid #ddd; /* Line separating links */
}

.offcanvas-body .navbar-nav .nav-link {
    color: #000;
    font-weight: bold;
    text-decoration: none;
    transition: color 0.3s ease;
}

.offcanvas-body {
    --font-size: 1rem; /* Adjustable font size */
    --alignment: center; /* Adjustable alignment */

    font-size: var(--font-size);
    text-align: var(--alignment);
}

    .offcanvas-body .nav-link:hover {
        color: #b71c1c; /* Red on hover */
    }










/* Active Link Styling */
.nav-link.active {
    color: var(--accent);
    font-weight: bold;
}

/* Responsive Adjustments for Smaller Screens */
@media (max-width: 992px) {
    .nav-links.active {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        position: absolute;
        top: 60px; /* Adjust based on navbar height */
        left: 0;
        background-color: white;
        width: 100%;
        padding: 10px 0;
        z-index: 1030;
    }

    .youtube-logo img {
        display: none !important;
    }
}
    /* Footer */
    footer {
        background-color: #333 !important;
        color: floralwhite;
        padding: 20px;
        box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
    }

        footer .footer-content {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
        }

            footer .footer-content a {
                color: floralwhite;
                margin-right: 15px;
                text-decoration: none;
                transition: color 0.3s ease;
            }



        footer .social-icons a {
            color: floralwhite;
            font-size: 24px;
            margin: 0 10px;
            transition: color 0.3s ease, transform 0.3s ease;
        }

            footer .social-icons a:hover {
                color: crimson;
                transform: scale(1.1);
                transition: 0.2s ease-in;
            }

#wrapper {
    line-height: 2.35;
}

li {
    list-style: none; /* Removes the marker */
}

ul {
    padding:0;
}

blockquote, q {
    quotes: none;
}

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

table {
    border-collapse: collapse;
    border-spacing: 0;
}
mark {
    background-color: transparent;
    color: inherit;
}
strong, b {
    font-weight: 600;
}

em, i {
    font-style: italic;
}
header {
    color:#212931;
}
#intro h1, #intro h2, #intro h3, #intro h4, #intro h5, #intro h6,
#header h1, #header h2, #header h3, #header h4, #header h5, #header h6,
#main h1, #main h2, #main h3, #main h4, #main h5, #main h6 {
    font-family: "Source Sans Pro", Helvetica, sans-serif;
    font-weight: 900;
    
    letter-spacing: 0.075em;
    text-transform: uppercase;
    margin: 0 0 1rem 0;
}

#intro h1, #intro h2, #intro h3, #intro h4, #intro h5, #intro h6,
#header h1, #header h2, #header h3, #header h4, #header h5, #header h6,
#main h1, #main h2, #main h3, #main h4, #main h5, #main h6 {
    margin: 0 0 1.5rem 0;
}

    #intro h1 a, #intro h2 a, #intro h3 a, #intro h4 a, #intro h5 a, #intro h6 a,
    #header h1 a, #header h2 a, #header h3 a, #header h4 a, #header h5 a, #header h6 a,
    #main h1 a, #main h2 a, #main h3 a, #main h4 a, #main h5 a, #main h6 a {
        border-bottom: 0;
        color: #212931;
        text-decoration: none;
    }

#intro h1, #header h1, #main h1 {
    font-size: 4rem;
    line-height: 1.1;
    margin-bottom: 2rem;
}

#intro h2, #header h2, #main h2 {
    
    line-height: 1.0;
}

#intro h3, #header h3, #main h3 {
    font-size: 1.25rem;
}

#intro h4, #header h4, #main h4 {
    font-size: 1rem;
}

#intro h5, #header h5, #main h5 {
    font-size: 0.9rem;
}

#intro h6, #header h6, #main h6 {
    font-size: 0.8rem;
    margin-bottom: 1.5rem; /* Optional: if needed for consistency */
}

.article p, .article h1, .article h2, .article h3, .article h4, .article h5, .article h6 {
    color: #212931;
}


.article p {
    text-align: justify;
    margin: 0 0 2rem 0;
}

.subtitle p {
    text-align: center;
    margin-top: 0;
    line-height: 2;
    font-style: italic;
    margin: 0 0 2rem 0;
}

#main {
    font-family: "Merriweather", Georgia, serif;
}

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

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

blockquote {
    border-left: solid 4px;
    font-style: italic;
    margin: 0 0 2rem 0;
    padding: 0.5rem 0 0.5rem 2rem;
    border-left-color: #eeeeee;
}

code {
    border: solid 2px;
    font-family: "Courier New", monospace;
    font-size: 0.9rem;
    margin: 0 0.25rem;
    padding: 0.25rem 0.65rem;
}

pre {
    -webkit-overflow-scrolling: touch;
    font-family: "Courier New", monospace;
    font-size: 0.9rem;
    margin: 0 0 2rem 0;
}

    pre code {
        display: block;
        line-height: 1.75;
        padding: 1rem 1.5rem;
        overflow-x: auto;
    }

hr {
    border: 0;
    border-bottom: solid 2px;
    margin: 3rem 0;
    border-bottom-color: #eeeeee;
}
    hr.major {
        margin: 5rem 0;
    }

/* Row */

.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%;
    }

    .row.gtr-0 {
        margin-top: 0;
        margin-left: 0rem;
    }

        .row.gtr-0 > * {
            padding: 0 0 0 0rem;
        }

        .row.gtr-0.gtr-uniform {
            margin-top: 0rem;
        }

            .row.gtr-0.gtr-uniform > * {
                padding-top: 0rem;
            }

    .row.gtr-25 {
        margin-top: 0;
        margin-left: -0.375rem;
    }

        .row.gtr-25 > * {
            padding: 0 0 0 0.375rem;
        }

        .row.gtr-25.gtr-uniform {
            margin-top: -0.375rem;
        }

            .row.gtr-25.gtr-uniform > * {
                padding-top: 0.375rem;
            }

    .row.gtr-50 {
        margin-top: 0;
        margin-left: -0.75rem;
    }

        .row.gtr-50 > * {
            padding: 0 0 0 0.75rem;
        }

        .row.gtr-50.gtr-uniform {
            margin-top: -0.75rem;
        }

            .row.gtr-50.gtr-uniform > * {
                padding-top: 0.75rem;
            }

.row {
    margin-top: 0;
    margin-left: -1.5rem;
}

    .row > * {
        padding: 0 0 0 1.5rem;
    }

    .row.gtr-uniform {
        margin-top: -1.5rem;
    }

        .row.gtr-uniform > * {
            padding-top: 1.5rem;
        }

    .row.gtr-150 {
        margin-top: 0;
        margin-left: -2.25rem;
    }

        .row.gtr-150 > * {
            padding: 0 0 0 2.25rem;
        }

        .row.gtr-150.gtr-uniform {
            margin-top: -2.25rem;
        }

            .row.gtr-150.gtr-uniform > * {
                padding-top: 2.25rem;
            }

    .row.gtr-200 {
        margin-top: 0;
        margin-left: -3rem;
    }

        .row.gtr-200 > * {
            padding: 0 0 0 3rem;
        }

        .row.gtr-200.gtr-uniform {
            margin-top: -3rem;
        }

            .row.gtr-200.gtr-uniform > * {
                padding-top: 3rem;
            }

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

    .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-xlarge {
            order: -1;
        }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

        .row.gtr-0 {
            margin-top: 0;
            margin-left: 0rem;
        }

            .row.gtr-0 > * {
                padding: 0 0 0 0rem;
            }

            .row.gtr-0.gtr-uniform {
                margin-top: 0rem;
            }

                .row.gtr-0.gtr-uniform > * {
                    padding-top: 0rem;
                }

        .row.gtr-25 {
            margin-top: 0;
            margin-left: -0.375rem;
        }

            .row.gtr-25 > * {
                padding: 0 0 0 0.375rem;
            }

            .row.gtr-25.gtr-uniform {
                margin-top: -0.375rem;
            }

                .row.gtr-25.gtr-uniform > * {
                    padding-top: 0.375rem;
                }

        .row.gtr-50 {
            margin-top: 0;
            margin-left: -0.75rem;
        }

            .row.gtr-50 > * {
                padding: 0 0 0 0.75rem;
            }

            .row.gtr-50.gtr-uniform {
                margin-top: -0.75rem;
            }

                .row.gtr-50.gtr-uniform > * {
                    padding-top: 0.75rem;
                }

    .row {
        margin-top: 0;
        margin-left: -1.5rem;
    }

        .row > * {
            padding: 0 0 0 1.5rem;
        }

        .row.gtr-uniform {
            margin-top: -1.5rem;
        }

            .row.gtr-uniform > * {
                padding-top: 1.5rem;
            }

        .row.gtr-150 {
            margin-top: 0;
            margin-left: -2.25rem;
        }

            .row.gtr-150 > * {
                padding: 0 0 0 2.25rem;
            }

            .row.gtr-150.gtr-uniform {
                margin-top: -2.25rem;
            }

                .row.gtr-150.gtr-uniform > * {
                    padding-top: 2.25rem;
                }

        .row.gtr-200 {
            margin-top: 0;
            margin-left: -3rem;
        }

            .row.gtr-200 > * {
                padding: 0 0 0 3rem;
            }

            .row.gtr-200.gtr-uniform {
                margin-top: -3rem;
            }

                .row.gtr-200.gtr-uniform > * {
                    padding-top: 3rem;
                }
}

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

    .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-large {
            order: -1;
        }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

        .row.gtr-0 {
            margin-top: 0;
            margin-left: 0rem;
        }

            .row.gtr-0 > * {
                padding: 0 0 0 0rem;
            }

            .row.gtr-0.gtr-uniform {
                margin-top: 0rem;
            }

                .row.gtr-0.gtr-uniform > * {
                    padding-top: 0rem;
                }

        .row.gtr-25 {
            margin-top: 0;
            margin-left: -0.375rem;
        }

            .row.gtr-25 > * {
                padding: 0 0 0 0.375rem;
            }

            .row.gtr-25.gtr-uniform {
                margin-top: -0.375rem;
            }

                .row.gtr-25.gtr-uniform > * {
                    padding-top: 0.375rem;
                }

        .row.gtr-50 {
            margin-top: 0;
            margin-left: -0.75rem;
        }

            .row.gtr-50 > * {
                padding: 0 0 0 0.75rem;
            }

            .row.gtr-50.gtr-uniform {
                margin-top: -0.75rem;
            }

                .row.gtr-50.gtr-uniform > * {
                    padding-top: 0.75rem;
                }

    .row {
        margin-top: 0;
        margin-left: -1.5rem;
    }

        .row > * {
            padding: 0 0 0 1.5rem;
        }

        .row.gtr-uniform {
            margin-top: -1.5rem;
        }

            .row.gtr-uniform > * {
                padding-top: 1.5rem;
            }

        .row.gtr-150 {
            margin-top: 0;
            margin-left: -2.25rem;
        }

            .row.gtr-150 > * {
                padding: 0 0 0 2.25rem;
            }

            .row.gtr-150.gtr-uniform {
                margin-top: -2.25rem;
            }

                .row.gtr-150.gtr-uniform > * {
                    padding-top: 2.25rem;
                }

        .row.gtr-200 {
            margin-top: 0;
            margin-left: -3rem;
        }

            .row.gtr-200 > * {
                padding: 0 0 0 3rem;
            }

            .row.gtr-200.gtr-uniform {
                margin-top: -3rem;
            }

                .row.gtr-200.gtr-uniform > * {
                    padding-top: 3rem;
                }
}

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

    .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-medium {
            order: -1;
        }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

        .row.gtr-0 {
            margin-top: 0;
            margin-left: 0rem;
        }

            .row.gtr-0 > * {
                padding: 0 0 0 0rem;
            }

            .row.gtr-0.gtr-uniform {
                margin-top: 0rem;
            }

                .row.gtr-0.gtr-uniform > * {
                    padding-top: 0rem;
                }

        .row.gtr-25 {
            margin-top: 0;
            margin-left: -0.375rem;
        }

            .row.gtr-25 > * {
                padding: 0 0 0 0.375rem;
            }

            .row.gtr-25.gtr-uniform {
                margin-top: -0.375rem;
            }

                .row.gtr-25.gtr-uniform > * {
                    padding-top: 0.375rem;
                }

        .row.gtr-50 {
            margin-top: 0;
            margin-left: -0.75rem;
        }

            .row.gtr-50 > * {
                padding: 0 0 0 0.75rem;
            }

            .row.gtr-50.gtr-uniform {
                margin-top: -0.75rem;
            }

                .row.gtr-50.gtr-uniform > * {
                    padding-top: 0.75rem;
                }

    .row {
        margin-top: 0;
        margin-left: -1.5rem;
    }

        .row > * {
            padding: 0 0 0 1.5rem;
        }

        .row.gtr-uniform {
            margin-top: -1.5rem;
        }

            .row.gtr-uniform > * {
                padding-top: 1.5rem;
            }

        .row.gtr-150 {
            margin-top: 0;
            margin-left: -2.25rem;
        }

            .row.gtr-150 > * {
                padding: 0 0 0 2.25rem;
            }

            .row.gtr-150.gtr-uniform {
                margin-top: -2.25rem;
            }

                .row.gtr-150.gtr-uniform > * {
                    padding-top: 2.25rem;
                }

        .row.gtr-200 {
            margin-top: 0;
            margin-left: -3rem;
        }

            .row.gtr-200 > * {
                padding: 0 0 0 3rem;
            }

            .row.gtr-200.gtr-uniform {
                margin-top: -3rem;
            }

                .row.gtr-200.gtr-uniform > * {
                    padding-top: 3rem;
                }
}

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

    .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-small {
            order: -1;
        }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

        .row.gtr-0 {
            margin-top: 0;
            margin-left: 0rem;
        }

            .row.gtr-0 > * {
                padding: 0 0 0 0rem;
            }

            .row.gtr-0.gtr-uniform {
                margin-top: 0rem;
            }

                .row.gtr-0.gtr-uniform > * {
                    padding-top: 0rem;
                }

        .row.gtr-25 {
            margin-top: 0;
            margin-left: -0.375rem;
        }

            .row.gtr-25 > * {
                padding: 0 0 0 0.375rem;
            }

            .row.gtr-25.gtr-uniform {
                margin-top: -0.375rem;
            }

                .row.gtr-25.gtr-uniform > * {
                    padding-top: 0.375rem;
                }

        .row.gtr-50 {
            margin-top: 0;
            margin-left: -0.75rem;
        }

            .row.gtr-50 > * {
                padding: 0 0 0 0.75rem;
            }

            .row.gtr-50.gtr-uniform {
                margin-top: -0.75rem;
            }

                .row.gtr-50.gtr-uniform > * {
                    padding-top: 0.75rem;
                }

    .row {
        margin-top: 0;
        margin-left: -1.5rem;
    }

        .row > * {
            padding: 0 0 0 1.5rem;
        }

        .row.gtr-uniform {
            margin-top: -1.5rem;
        }

            .row.gtr-uniform > * {
                padding-top: 1.5rem;
            }

        .row.gtr-150 {
            margin-top: 0;
            margin-left: -2.25rem;
        }

            .row.gtr-150 > * {
                padding: 0 0 0 2.25rem;
            }

            .row.gtr-150.gtr-uniform {
                margin-top: -2.25rem;
            }

                .row.gtr-150.gtr-uniform > * {
                    padding-top: 2.25rem;
                }

        .row.gtr-200 {
            margin-top: 0;
            margin-left: -3rem;
        }

            .row.gtr-200 > * {
                padding: 0 0 0 3rem;
            }

            .row.gtr-200.gtr-uniform {
                margin-top: -3rem;
            }

                .row.gtr-200.gtr-uniform > * {
                    padding-top: 3rem;
                }
}

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

    .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-xsmall {
            order: -1;
        }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

        .row.gtr-0 {
            margin-top: 0;
            margin-left: 0rem;
        }

            .row.gtr-0 > * {
                padding: 0 0 0 0rem;
            }

            .row.gtr-0.gtr-uniform {
                margin-top: 0rem;
            }

                .row.gtr-0.gtr-uniform > * {
                    padding-top: 0rem;
                }

        .row.gtr-25 {
            margin-top: 0;
            margin-left: -0.375rem;
        }

            .row.gtr-25 > * {
                padding: 0 0 0 0.375rem;
            }

            .row.gtr-25.gtr-uniform {
                margin-top: -0.375rem;
            }

                .row.gtr-25.gtr-uniform > * {
                    padding-top: 0.375rem;
                }

        .row.gtr-50 {
            margin-top: 0;
            margin-left: -0.75rem;
        }

            .row.gtr-50 > * {
                padding: 0 0 0 0.75rem;
            }

            .row.gtr-50.gtr-uniform {
                margin-top: -0.75rem;
            }

                .row.gtr-50.gtr-uniform > * {
                    padding-top: 0.75rem;
                }

    .row {
        margin-top: 0;
        margin-left: -1.5rem;
    }

        .row > * {
            padding: 0 0 0 1.5rem;
        }

        .row.gtr-uniform {
            margin-top: -1.5rem;
        }

            .row.gtr-uniform > * {
                padding-top: 1.5rem;
            }

        .row.gtr-150 {
            margin-top: 0;
            margin-left: -2.25rem;
        }

            .row.gtr-150 > * {
                padding: 0 0 0 2.25rem;
            }

            .row.gtr-150.gtr-uniform {
                margin-top: -2.25rem;
            }

                .row.gtr-150.gtr-uniform > * {
                    padding-top: 2.25rem;
                }

        .row.gtr-200 {
            margin-top: 0;
            margin-left: -3rem;
        }

            .row.gtr-200 > * {
                padding: 0 0 0 3rem;
            }

            .row.gtr-200.gtr-uniform {
                margin-top: -3rem;
            }

                .row.gtr-200.gtr-uniform > * {
                    padding-top: 3rem;
                }
}

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

    .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-xxsmall {
            order: -1;
        }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

        .row.gtr-0 {
            margin-top: 0;
            margin-left: 0rem;
        }

            .row.gtr-0 > * {
                padding: 0 0 0 0rem;
            }

            .row.gtr-0.gtr-uniform {
                margin-top: 0rem;
            }

                .row.gtr-0.gtr-uniform > * {
                    padding-top: 0rem;
                }

        .row.gtr-25 {
            margin-top: 0;
            margin-left: -0.375rem;
        }

            .row.gtr-25 > * {
                padding: 0 0 0 0.375rem;
            }

            .row.gtr-25.gtr-uniform {
                margin-top: -0.375rem;
            }

                .row.gtr-25.gtr-uniform > * {
                    padding-top: 0.375rem;
                }

        .row.gtr-50 {
            margin-top: 0;
            margin-left: -0.75rem;
        }

            .row.gtr-50 > * {
                padding: 0 0 0 0.75rem;
            }

            .row.gtr-50.gtr-uniform {
                margin-top: -0.75rem;
            }

                .row.gtr-50.gtr-uniform > * {
                    padding-top: 0.75rem;
                }

    .row {
        margin-top: 0;
        margin-left: -1.5rem;
    }

        .row > * {
            padding: 0 0 0 1.5rem;
        }

        .row.gtr-uniform {
            margin-top: -1.5rem;
        }

            .row.gtr-uniform > * {
                padding-top: 1.5rem;
            }

        .row.gtr-150 {
            margin-top: 0;
            margin-left: -2.25rem;
        }

            .row.gtr-150 > * {
                padding: 0 0 0 2.25rem;
            }

            .row.gtr-150.gtr-uniform {
                margin-top: -2.25rem;
            }

                .row.gtr-150.gtr-uniform > * {
                    padding-top: 2.25rem;
                }

        .row.gtr-200 {
            margin-top: 0;
            margin-left: -3rem;
        }

            .row.gtr-200 > * {
                padding: 0 0 0 3rem;
            }

            .row.gtr-200.gtr-uniform {
                margin-top: -3rem;
            }

                .row.gtr-200.gtr-uniform > * {
                    padding-top: 3rem;
                }
}


/* Box */

.box {
    border: solid 2px;
    margin-bottom: 2rem;
    padding: 1.5rem;
}

    .box > :last-child,
    .box > :last-child > :last-child,
    .box > :last-child > :last-child > :last-child {
        margin-bottom: 0;
    }

    .box.alt {
        border: 0;
        border-radius: 0;
        padding: 0;
    }

.box {
    border-color: #eeeeee;
}


/*button*/
input[type="button"],
button,
.button {
    -moz-appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    appearance: none;
    -moz-transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
    -webkit-transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
    -ms-transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
    transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    display: inline-block;
    font-family: "Source Sans Pro", Helvetica, sans-serif;
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 0.075em;
    height: 3rem;
    line-height: 3rem;
    padding: 0 2rem;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}

    input[type="button"].icon:before,
    button.icon:before,
    .button.icon:before {
        margin-right: 0.5rem;
    }


    input[type="button"].icon.solo,
    button.icon.solo,
    .button.icon.solo {
        position: relative;
        width: 4rem;
        height: 4rem;
        line-height: 4rem;
        border-radius: 4rem;
        text-indent: 4rem;
        overflow: hidden;
        padding: 0;
        white-space: nowrap;
    }

        input[type="button"].icon.solo:before,
        button.icon.solo:before,
        .button.icon.solo:before {
            position: absolute;
            display: block;
            top: 0;
            left: 0;
            width: inherit;
            height: inherit;
            line-height: inherit;
            font-size: 1.25rem;
            margin-right: 0;
            text-align: center;
            text-indent: 0;
        }

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

    input[type="button"].small,
    button.small,
    .button.small {
        font-size: 0.7rem;
        height: 2.5rem;
        line-height: 2.5rem;
        padding: 0 1.5rem;
    }

    input[type="button"].large,
    button.large,
    .button.large {
        font-size: 0.9rem;
        height: 3.5rem;
        line-height: 3.5rem;
        padding: 0 2.75rem;
    }

@media screen and (max-width: 980px) {
    input[type="button"],
    button,
    .button {
        font-size: 0.9rem;
        height: 3.25rem;
        line-height: 3.25rem;
    }

        input[type="button"].large,
        button.large,
        .button.large {
            font-size: 1rem;
            height: 3.75rem;
            line-height: 3.75rem;
        }
}

input[type="button"].disabled,
input[type="button"]:disabled,
button.disabled,
button:disabled,
.button.disabled,
.button:disabled {
    pointer-events: none;
    opacity: 0.25;
}

input[type="button"],
button,
.button {
    background-color: transparent;
    box-shadow: inset 0 0 0 2px #212931;
    color: #212931;
}

    input[type="button"]:hover,
    button:hover,
    .button:hover {
        background-color: #212931;
        color: floralwhite;
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    } 

    input[type="button"].primary,
    button.primary,
    .button.primary {
        background-color: #212931;
        box-shadow: none;
        color: #ffffff !important;
    }

        input[type="button"].primary:hover,
        button.primary:hover,
        .button.primary:hover {
            background-color: #b71c1c;
        }

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

    .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 5 Free';
        font-weight: 400;
    }

    .icon > .label {
        display: none;
    }

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

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

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

/* Image */

.image {
    border: 0;
    display: inline-block;
    position: relative;
}

    .image img {
        display: block;
    }

    .image.left, .image.right {
        max-width: 40%;
    }

        .image.left img, .image.right img {
            width: 100%;
        }

    .image.left {
        float: left;
        margin: 0 2rem 2rem 0;
        top: 0.75rem;
    }

    .image.right {
        float: right;
        margin: 0 0 2rem 2rem;
        top: 0.75rem;
    }

    .image.fit {
        display: block;
        margin: 2.5rem 0;
        width: 100%;
    }

        .image.fit:first-child {
            margin-top: 0;
        }

        .image.fit img {
            width: 100%;
        }

    .image.main {
        display: block;
        margin: 4rem 0;
        width: 100%;
    }

        .image.main:first-child {
            margin-top: 0;
        }

        .image.main img {
            width: 100%;
        }

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

    .image.fit {
        margin: 2rem 0;
    }

    .image.main {
        margin: 2rem 0;
    }
}

a.image {
    overflow: hidden;
}

    a.image img {
        -moz-transition: -moz-transform 0.2s ease-out;
        -webkit-transition: -webkit-transform 0.2s ease-out;
        -ms-transition: -ms-transform 0.2s ease-out;
        transition: transform 0.2s ease-out;
    }

    a.image:hover img {
        -moz-transform: scale(1.05);
        -webkit-transform: scale(1.05);
        -ms-transform: scale(1.05);
        transform: scale(1.05);
    }


#intro ul.actions {
    display: -moz-flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    cursor: default;
    list-style: none;
    margin-left: -1rem;
    padding-left: 0;
}

    #intro ul.actions li {
        padding: 0 0 0 1rem;
        vertical-align: middle;
    }

    #intro ul.actions.special {
        -moz-justify-content: center;
        -webkit-justify-content: center;
        -ms-justify-content: center;
        justify-content: center;
        width: 100%;
        margin-left: 0;
    }

        #intro ul.actions.special li:first-child {
            padding-left: 0;
        }

    #intro ul.actions.stacked {
        -moz-flex-direction: column;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        margin-left: 0;
    }

        #intro ul.actions.stacked li {
            padding: 1.3rem 0 0 0;
        }

            #intro ul.actions.stacked li:first-child {
                padding-top: 0;
            }

    #intro ul.actions.fit {
        width: calc(100% + 1rem);
    }

        #intro ul.actions.fit li {
            -moz-flex-grow: 1;
            -webkit-flex-grow: 1;
            -ms-flex-grow: 1;
            flex-grow: 1;
            -moz-flex-shrink: 1;
            -webkit-flex-shrink: 1;
            -ms-flex-shrink: 1;
            flex-shrink: 1;
            width: 100%;
        }

            #intro ul.actions.fit li > * {
                width: 100%;
            }

        #intro ul.actions.fit.stacked {
            width: 100%;
        }

@media screen and (max-width: 480px) {
    #intro ul.actions:not(.fixed) {
        -moz-flex-direction: column;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        margin-left: 0;
        width: 100% !important;
    }

        #intro ul.actions:not(.fixed) li {
            -moz-flex-grow: 1;
            -webkit-flex-grow: 1;
            -ms-flex-grow: 1;
            flex-grow: 1;
            -moz-flex-shrink: 1;
            -webkit-flex-shrink: 1;
            -ms-flex-shrink: 1;
            flex-shrink: 1;
            padding: 1rem 0 0 0;
            text-align: center;
            width: 100%;
        }

            #intro ul.actions:not(.fixed) li > * {
                width: 100%;
            }

            #intro ul.actions:not(.fixed) li:first-child {
                padding-top: 0;
            }

            #intro ul.actions:not(.fixed) li input[type="submit"],
            #intro ul.actions:not(.fixed) li input[type="reset"],
            #intro ul.actions:not(.fixed) li input[type="button"],
            #intro ul.actions:not(.fixed) li button,
            #intro ul.actions:not(.fixed) li .button {
                width: 100%;
            }

                #intro ul.actions:not(.fixed) li input[type="submit"].icon:before,
                #intro ul.actions:not(.fixed) li input[type="reset"].icon:before,
                #intro ul.actions:not(.fixed) li input[type="button"].icon:before,
                #intro ul.actions:not(.fixed) li button.icon:before,
                #intro ul.actions:not(.fixed) li .button.icon:before {
                    margin-left: -0.5rem;
                }
}

#intro ul.icons {
    cursor: default;
    list-style: none;
    padding-left: 0;
}

    #intro ul.icons li {
        display: inline-block;
        padding: 0 0.5rem 0 0;
        vertical-align: middle;
    }

        #intro ul.icons li:last-child {
            padding-right: 0;
        }

        #intro ul.icons li .icon:before {
            width: 2.25rem;
            height: 2.25rem;
            line-height: 2.25rem;
            display: inline-block;
            text-align: center;
            border-radius: 100%;
            font-size: 1.25rem;
        }

    #intro ul.icons.alt li .icon:before {
        -moz-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
        -webkit-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
        -ms-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
        transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
        font-size: 1rem;
    }

section.special, article.special {
    text-align: center;
}

header {
    cursor: default;
}

    header > .date {
        display: block;
        font-size: 0.8rem;
        height: 1;
        margin: 0 0 1rem 0;
        position: relative;
    }

    header > p {
        font-style: italic;
        color: #212931;
    }

    header > h1 + p {
        font-size: 1.35rem;
        margin-top: -0.5rem;
        line-height: 2;
    }

    header > h2 + p {
        font-size: 1rem;
        margin-top: -0.75rem;
    }

    header > h3 + p {
        font-size: 0.9rem;
        margin-top: -0.75rem;
    }

    header > h4 + p {
        font-size: 0.8rem;
        margin-top: -0.75rem;
    }

    header.major {
        margin: 0 0 4rem 0;
        text-align: center;
    }

        header.major > :last-child {
            margin-bottom: 0;
        }

        header.major > p {
            margin-top: 0;
            text-align: center;
        }

        header.major > .date {
            font-size: 1rem;
            margin: 0 0 4rem 0;
        }

            header.major > .date:before, header.major > .date:after {
                content: '';
                display: block;
                position: absolute;
                top: 50%;
                width: calc(50% - 6rem);
                border-top: solid 2px;
            }

            header.major > .date:before {
                left: 0;
            }

            header.major > .date:after {
                right: 0;
            }

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

    header br {
        display: none;
    }
}

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

    header.major {
        margin: 0 0 2rem 0;
    }
}

header.major .date:before, header.major .date:after {
    border-top-color: #eeeeee;
}

/* Table */

.table-wrapper {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
}

table {
    margin: 0 0 2rem 0;
    width: 100%;
}

    table tbody tr {
        border: solid 1px;
        border-left: 0;
        border-right: 0;
    }

    table td {
        padding: 0.75rem 0.75rem;
    }

    table th {
        font-family: "Source Sans Pro", Helvetica, sans-serif;
        font-size: 0.8rem;
        font-weight: 900;
        letter-spacing: 0.075em;
        line-height: 1.5;
        padding: 0 0.75rem 0.75rem 0.75rem;
        text-align: left;
        text-transform: uppercase;
    }

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

    table th {
        font-size: 0.9rem;
    }
}

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

table tfoot {
    border-top: solid 2px;
}

table.alt {
    border-collapse: separate;
}

    table.alt tbody tr td {
        border: solid 1px;
        border-left-width: 0;
        border-top-width: 0;
    }

        table.alt tbody tr td:first-child {
            border-left-width: 1px;
        }

    table.alt tbody tr:first-child td {
        border-top-width: 1px;
    }

    table.alt thead {
        border-bottom: 0;
    }

    table.alt tfoot {
        border-top: 0;
    }

table tbody tr {
    border-color: #eeeeee;
}

    table tbody tr:nth-child(2n + 1) {
        background-color: rgba(220, 220, 220, 0.25);
    }

table th {
    color: #212931;
}

table thead {
    border-bottom-color: #eeeeee;
}

table tfoot {
    border-top-color: #eeeeee;
}

table.alt tbody tr td {
    border-color: #eeeeee;
}

/* Pagination */

.pagination {
    display: -moz-flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    flex-wrap:wrap;
    justify-content:center;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
    list-style: none;
    margin: 0 0 2rem 2px;
    padding: 0;
}

.pagination ul{
    display:flex;
}

    .pagination a, .pagination span {
        -moz-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
        -webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
        -ms-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
        transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
        border: solid 2px;
        display: inline-block;
        font-family: "Source Sans Pro", Helvetica, sans-serif;
        font-size: 0.8rem;
        font-weight: 900;
        height: 3rem;
        letter-spacing: 0.075em;
        line-height: calc(3rem - 4px);
        margin-left: -2px;
        min-width: 3rem;
        position: relative;
        text-align: center;
        text-decoration: none;
        text-transform: uppercase;
    }

    .pagination .next, .pagination .previous {
        text-decoration: none;
        padding: 0 1.75rem;
    }

        .pagination .next:before, .pagination .previous: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 5 Free';
            font-weight: 900;
        }

        .pagination .next:before, .pagination .previous:before {
            display: inline-block;
            color: inherit !important;
            line-height: inherit;
        }

        .pagination .previous:before {
            content: '\f104';
            margin-right: 0.9375em;
        }

        .pagination .next:before {
            content: '\f105';
            float: right;
            margin-left: 0.9375em;
        }

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

    .pagination a, .pagination span {
        font-size: 0.9rem;
    }
}

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

    .pagination .page, .pagination .extra {
        display: none;
    }
}

.pagination a, .pagination span {
    border-color: #eeeeee;
}

.pagination a {
    color: #212931 !important;
}

    .pagination a:hover {
        color: #b71c1c !important;
        border-color: #b71c1c;
        z-index: 1;
    }

        .pagination a:hover + a,
        .pagination a:hover + span {
            border-left-color: #b71c1c;
        }

    .pagination a.active {
        background-color: #eeeeee;
    }

.pagination span {
    color: #eeeeee;
}

/* Main */

#main {
    background-color: #ffffff;
    position: relative;
    margin: 0 auto;
    width: calc(100% - 4rem);
    max-width: 72rem;
    z-index: 2;
}

    #main > * {
        padding: 4rem 4rem 2rem 4rem;
        border-top: solid 2px #eeeeee;
        margin: 0;
    }

        #main > *:first-child {
            border-top: 0;
        }

    #main > footer {
        text-align: center;
    }

    #main > .post {
        padding: 8rem 8rem 6rem 8rem;
    }

        #main > .post header.major > .date {
            margin-top: -2rem;
        }

        #main > .post header.major > h1, #main > .post header.major h2 {
            font-size: 4rem;
            line-height: 1.1;
            margin: 0 0 2rem 0;
        }

        #main > .post.featured {
            text-align: center;
        }

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

    #main > .post {
        padding: 6rem 4rem 4rem 4rem;
    }
}

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

    #main > .post {
        padding: 4rem 2rem 2rem 2rem;
    }

        #main > .post header.major > .date {
            margin-top: -1rem;
            margin-bottom: 2rem;
        }

        #main > .post header.major > h1, #main > .post header.major h2 {
            font-size: 2.5rem;
            line-height: 1.2;
            margin: 0 0 1.5rem 0;
        }
}

#main > .posts {
    display: -moz-flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -moz-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -moz-align-items: -moz-stretch;
    -webkit-align-items: -webkit-stretch;
    -ms-align-items: -ms-stretch;
    align-items: stretch;
    text-align: center;
    width: 100%;
    padding: 0;
}

    #main > .posts > * {
        -moz-flex-shrink: 1;
        -webkit-flex-shrink: 1;
        -ms-flex-shrink: 1;
        flex-shrink: 1;
        -moz-flex-grow: 0;
        -webkit-flex-grow: 0;
        -ms-flex-grow: 0;
        flex-grow: 0;
    }

    #main > .posts > * {
        width: 50%;
    }

    #main > .posts > * {
        padding: 4rem;
        width: 50%;
    }

    #main > .posts > article {
        border-color: #eeeeee;
        border-left-width: 2px;
        border-style: solid;
        border-top-width: 2px;
        text-align: center;
    }

        #main > .posts > article > :last-child {
            margin-bottom: 0;
        }

        #main > .posts > article:nth-child(2n - 1) {
            border-left-width: 0;
        }

        #main > .posts > article:nth-child(-n + 2) {
            border-top-width: 0;
        }

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

    #main > .posts > * {
        width: 50%;
    }

    #main > .posts > * {
        padding: 2.5rem;
        width: 50%;
    }
}

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

    #main > .posts > * {
        width: 100%;
    }

    #main > .posts > * {
        padding: 2rem;
        width: 100%;
    }

    #main > .posts > article:nth-child(2n - 1) {
        border-left-width: 2px;
    }

    #main > .posts > article:nth-child(-n + 2) {
        border-top-width: 2px;
    }

    #main > .posts > article:nth-child(n) {
        border-left-width: 0;
    }

    #main > .posts > article:nth-child(-n + 1) {
        border-top-width: 0;
    }

    #main > .posts > article .image {
        max-width: 25rem;
        margin-left: auto;
        margin-right: auto;
    }
}

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

    #main > * {
        padding: 2rem 2rem 0.1rem 2rem;
    }
}

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

    #main {
        width: 100%;
    }
}

/* Header */

#header {
    color: #212931;
    -moz-align-items: center;
    -webkit-align-items: center;
    -ms-align-items: center;
    align-items: center;
    display: -moz-flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -moz-flex-direction: column;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -moz-justify-content: -moz-flex-end;
    -webkit-justify-content: -webkit-flex-end;
    -ms-justify-content: -ms-flex-end;
    justify-content: flex-end;
    pointer-events: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    height: 20rem;
    padding-bottom: 8rem;
    position: relative;
    text-align: center;
    z-index: 2;
}

    #header input, #header select, #header textarea {
        color: #212931;
    }

    #header a {
        color: #eeeeee;
        text-decoration: none;
        border-bottom-color: rgba(255, 255, 255, 0.5) !important;
    }

        #header a:hover {
            border-bottom-color: transparent;
            color: #b71c1c !important;
        }

    #header strong, #header b {
        color: #212931;
    }

    #header h1, #header h2, #header h3, #header h4, #header h5, #header h6 {
        color: #212931;
    }

    #header blockquote {
        border-left-color: #ffffff;
    }

    #header code {
        background: rgba(255, 255, 255, 0.075);
        border-color: #ffffff;
    }

    #header hr {
        border-bottom-color: #eeeeee;
    }

    #header .logo {
        -moz-transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out, opacity 0.5s ease, -moz-transform 0.5s ease, visibility 0.5s;
        -webkit-transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out, opacity 0.5s ease, -webkit-transform 0.5s ease, visibility 0.5s;
        -ms-transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out, opacity 0.5s ease, -ms-transform 0.5s ease, visibility 0.5s;
        transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out, opacity 0.5s ease, transform 0.5s ease, visibility 0.5s;
        pointer-events: auto;
        border-style: solid;
        border-color: #ffffff;
        border-width: 5px !important;
        font-family: "Source Sans Pro", Helvetica, sans-serif;
        font-size: 2.25rem;
        font-weight: 900;
        letter-spacing: 0.075em;
        line-height: 1;
        padding: 1rem 1.75rem;
        text-transform: uppercase;
        visibility: visible;
    }

        #header .logo:hover {
            border-color: #b71c1c !important;
            color: #b71c1c !important;
        }

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

    #header {
        height: 14rem;
        padding-bottom: 4rem;
    }
}

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

    #header {
        padding-bottom: 3rem;
    }

        #header .logo {
            font-size: 1.75rem;
            border-width: 3px !important;
        }
}

/* Intro */

#intro {
    color: #ffffff;
    padding: 8rem 4rem 6rem 4rem;
    -moz-align-items: center;
    -webkit-align-items: center;
    -ms-align-items: center;
    align-items: center;
    display: -moz-flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -moz-flex-direction: column;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -moz-justify-content: -moz-flex-end;
    -webkit-justify-content: -webkit-flex-end;
    -ms-justify-content: -ms-flex-end;
    justify-content: space-evenly;
    -moz-transition: opacity 1s ease, -moz-transform 1s ease;
    -webkit-transition: opacity 1s ease, -webkit-transform 1s ease;
    -ms-transition: opacity 1s ease, -ms-transform 1s ease;
    transition: opacity 1s ease, transform 1s ease;
    position: relative;
    cursor: default;
    text-align: center;
    z-index: 1;
    min-height: 100vh;
}

    #intro input, #intro select, #intro textarea {
        color: #ffffff;
    }

    #intro a {
        color: #ffffff;
        border-bottom-color: rgba(255, 255, 255, 0.5);
    }

        #intro a:hover {
            border-bottom-color: transparent;
            color: #b71c1c !important;
        }

    #intro strong, #intro b {
        color: #ffffff;
    }

    #intro h1, #intro h2, #intro h3, #intro h4, #intro h5, #intro h6 {
        color: #ffffff;
    }

    #intro blockquote {
        border-left-color: #ffffff;
    }

    #intro code {
        background: rgba(255, 255, 255, 0.075);
        border-color: #ffffff;
    }

    #intro hr {
        border-bottom-color: #ffffff;
    }

    #intro input[type="button"],
    #intro button,
    #intro .button {
        background-color: transparent;
        box-shadow: inset 0 0 0 2px #ffffff;
        color: #ffffff !important;
    }


        #intro input[type="button"]:hover,
        #intro button:hover,
        #intro .button:hover {
            box-shadow: inset 0 0 0 2px #b71c1c;
            color: #b71c1c !important;
        }


        #intro input[type="button"].primary,
        #intro button.primary,
        #intro .button.primary {
            background-color: #ffffff;
            box-shadow: none;
            color: #1e252d !important;
        }
            
            #intro input[type="button"].primary:hover,
            #intro button.primary:hover,
            #intro .button.primary:hover {
                background-color: #b71c1c;
            }

    #intro h1 {
        font-size: 5rem;
        line-height: 1;
    }

    #intro p {
        font-size: 1.25rem;
        font-style: italic;
        margin-top: -0.25rem;
        text-align: center;
    }

    #intro + #header {
        margin-top: -20rem;
    }

        #intro + #header .logo {
            -moz-transform: translateY(2rem);
            -webkit-transform: translateY(2rem);
            -ms-transform: translateY(2rem);
            transform: translateY(2rem);
            opacity: 0;
            visibility: hidden;
        }

    #intro.hidden {
        pointer-events: none;
        -moz-transform: translateY(2rem);
        -webkit-transform: translateY(2rem);
        -ms-transform: translateY(2rem);
        transform: translateY(2rem);
        -moz-transition: opacity 0.5s ease, -moz-transform 0.5s ease, visibility 0.5s;
        -webkit-transition: opacity 0.5s ease, -webkit-transform 0.5s ease, visibility 0.5s;
        -ms-transition: opacity 0.5s ease, -ms-transform 0.5s ease, visibility 0.5s;
        transition: opacity 0.5s ease, transform 0.5s ease, visibility 0.5s;
        opacity: 0;
        visibility: hidden;
    }

        #intro.hidden + #header .logo {
            -moz-transform: translateY(0);
            -webkit-transform: translateY(0);
            -ms-transform: translateY(0);
            transform: translateY(0);
            opacity: 1;
            visibility: visible;
        }

body.is-preload #intro {
    -moz-transform: translateY(2rem);
    -webkit-transform: translateY(2rem);
    -ms-transform: translateY(2rem);
    transform: translateY(2rem);
    opacity: 0;
}

    body.is-preload #intro:not(.hidden) + #header + #nav {
        -moz-transform: translateY(4rem);
        -webkit-transform: translateY(4rem);
        -ms-transform: translateY(4rem);
        transform: translateY(4rem);
        opacity: 0;
    }

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

    #intro {
        padding: 4rem 4rem 2rem 4rem;
        min-height: 90vh;
    }

        #intro p br {
            display: none;
        }

        #intro + #header {
            margin-top: -14rem;
        }
}

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

    #intro {
        padding: 3rem 2rem 1rem 2rem;
        min-height: 80vh;
    }

        #intro h1 {
            font-size: 3.25rem;
            line-height: 1.1;
            margin-bottom: 1rem;
        }

        #intro p {
            font-size: 1rem;
            margin-top: 0rem;
        }

        #intro .actions {
            display: none !important;
        }
}

/* Wrapper */

#wrapper {
    -moz-transition: opacity 0.5s ease;
    -webkit-transition: opacity 0.5s ease;
    -ms-transition: opacity 0.5s ease;
    transition: opacity 0.5s ease;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

    #wrapper > .bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #212931;
        background-image: url("../images/overlay.png"), linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("../images/bg.jpg");
        background-size: auto, auto, 100% auto;
        background-position: center, center, top center;
        background-repeat: repeat, no-repeat, no-repeat;
        background-attachment: scroll, scroll, scroll;
        z-index: -1;
    }

        #wrapper > .bg.fixed {
            position: fixed;
            width: 100vw;
            height: 100vh;
        }

    #wrapper.fade-in:before {
        pointer-events: none;
        -moz-transition: opacity 1s ease-in-out;
        -webkit-transition: opacity 1s ease-in-out;
        -ms-transition: opacity 1s ease-in-out;
        transition: opacity 1s ease-in-out;
        -moz-transition-delay: 0.75s;
        -webkit-transition-delay: 0.75s;
        -ms-transition-delay: 0.75s;
        transition-delay: 0.75s;
        background: #1e252d;
        content: '';
        display: block;
        height: 100%;
        left: 0;
        opacity: 0;
        position: fixed;
        top: 0;
        width: 100%;
    }

body.is-preload #wrapper.fade-in:before {
    opacity: 1;
}

@media screen and (orientation: portrait) {

    #wrapper > .bg {
        background-size: auto, auto, auto 175%;
    }
}

.author {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
}

    .author img {
        height: 6rem;
        border: 1px solid wheat;
        width: 6rem;
        border-radius: 50%;
    }

.a-name {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin-left: 2rem;
    color: #212931;
    line-height: 1.5;
}

p#aname {
    font-weight: 700;
    margin: 0;
}

p#amail {
    margin: 0;
    font-style: italic;
}

/* General Table Styling */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 1rem;
}

table, th, td {
    border: 1px solid #ddd;
}

th, td {
    padding: 10px;
    text-align: left;
}

/* Responsive Table: Make the table scrollable on smaller screens */
@media (max-width: 992px) {
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        font-size: 0.9rem; /* Adjust font size for readability */
    }
}

@media (max-width: 768px) {
    table {
        font-size: 0.85rem; /* Slightly smaller font for 768px screens */
    }
}

@media (max-width: 576px) {
    table {
        font-size: 0.8rem; /* Smaller font for 576px screens */
    }

    th, td {
        padding: 8px; /* Reduce padding */
    }
}

@media (max-width: 416px) {
    table {
        font-size: 0.75rem; /* Even smaller font for 416px screens */
    }

    th, td {
        padding: 6px; /* Reduce padding further */
    }
}

@media (max-width: 360px) {
    table {
        font-size: 0.7rem; /* Minimum readable font size for 360px screens */
    }

    th, td {
        padding: 5px; /* Minimum padding */
    }
}