/***
 *
 *  COLOURS
 *
 */

    .white,
    .colour-1 {
        color: rgb(255, 255, 255);
    }

    .lightgray,
    .colour-2 {
        color: rgb(245, 245, 245);
    }

    .gray,
    .colour-3 {
        color: rgb(165, 165, 165);
    }

    .darkgray,
    .colour-4 {
        color: rgb(115, 115, 115);
    }

    .black,
    .colour-5 {
        color: rgb(60, 60, 60);
    }

    .bg-white,
    .bg-1 {
        background: rgb(255, 255, 255);
    }

    .bg-lightgray,
    .bg-2 {
        background: rgb(245, 245, 245);
    }

    .bg-gray,
    .bg-3 {
        background: rgb(165, 165, 165);
    }

    .bg-darkgray,
    .bg-4 {
        background: rgb(115, 115, 115);
    }

    .bg-black,
    .bg-5 {
        background: rgb(60, 60, 60);
    }

    .outline {
        outline-width: 0.1rem;
    }

/*
 *  END COLOURS
 *
 ***/



/***
 *
 *  GLOBAL RESET SETTINGS.
 *
 */

    html {
        box-sizing: border-box;
    }

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

    * {
        margin: 0;
        padding: 0;
        font-weight: normal;
        text-decoration: none;
        border-width: 0;
        border-color: rgb(165, 165, 165);
        border-style: solid;
        outline-width: 0;
        outline-color: rgb(165, 165, 165);
        outline-style: dotted;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    *::before,
    *::after {
        border-width: 0;
        border-color: rgb(165, 165, 165);
        border-style: solid;
    }

    *:focus,
    *:active {
        outline: none;
    }

    ::selection,
    ::-moz-selection {
        background: rgb(60, 60, 60);
        color: white;
    }

    @-ms-viewport {
        width: device-width;
    }

    html {
        width: 100%;
        min-width: 100%;
        font-size: 10px;
    }

    body {
        width: 100%;
        min-width: 100%;
        font-size: 1.5rem;
        font-family: "Helvetica", Arial, sans-serif;
        line-height: 1.25;
        color: rgb(60, 60, 60);
    }

    main {
        display: block;
    }

/*
 *  END GLOBAL RESET SETTINGS.
 *
 ***/



/***
 *
 *  TYPOGRAPHY INLINE.
 *
 */

    a {
        color:  rgb(60, 60, 60);
        transition-property: opacity;
        transition-duration: 0.25s;
        transition-timing-function: linear;
    }

    a:hover {
        opacity: 0.75;
    }

    .text a {
        border-bottom: 0.1rem dotted rgb(115, 115, 115);
    }

    .text a:hover {
        border-bottom-color: rgb(60, 60, 60);
    }

    b, strong {
        font-weight: bold;
        text-decoration: none;
    }

    i, em {
        font-style: italic;
        text-decoration: none;
    }

    del {
        text-decoration: line-through;
    }

    code {
        display: inline-block;
        font-size: inherit;
        font-family: Consolas, "Courier New", monospace;
    }

    p code {
        margin: 0 0.5rem;
    }

    sup, sub {
        font-size: 75%;
        vertical-align: baseline;
        position: relative;
    }

    sup {
        top: -0.4rem;
    }

    sub {
        top: 0.5rem;
    }

    .amp {
        display: inline-block;
        margin: 0 0.1rem 0 0.2rem;
        font-size: 150%;
        font-style: italic;
        font-family: Baskerville, "Palatino Linotype", Georgia, serif;
        opacity: 0.7;
    }

    p.oldie:first-letter {
        font-size: 9rem;
        line-height: 1rem;
        font-weight: 700;
        float: left;
        margin: 0.75rem 1rem 0 0;
    }

    p.fancy:first-line {
        font-weight: 700;
    }

    .smaller {
        font-size: 75%;
    }

    .bigger {
        font-size: 125%;
    }

/*
 *  END TYPOGRAPHY INLINE.
 *
 ***/



/***
 *
 *  NAVIGATION.
 *
 */

    nav ul {
        position: relative;
        left: -0.5rem;
    }

    nav .right {
        position: relative;
        right: -0.5rem;
    }

        nav li {
            list-style-type: none;
            float: left;
        }

            nav a {
                display: block;
                padding: 1rem 0.5rem ;
                border-width: 0;
                border-style: solid;
            }   

/*
 *  END NAVIGATION.
 *
 ***/



/***
 *
 *  IMAGES, THUMBNAILS AND VIDEOS.
 *
 */

    img, object, embed {
        width: 100% !important;
        max-width: 100%;
        height: auto !important;
        vertical-align: middle;
        -ms-interpolation-mode: bicubic; 
    }

    .thumbnail {
        width: 100%;
        max-width: 100%;
        display: block;
        border-width: 0.1rem;
        padding: 1rem;
        background: rgb(255, 255, 255);
        border-radius: 0.3rem;
    }

    img.float-left,
    img.float-right,
    .thumbnail.float-right,
    .thumbnail.float-left {
        margin-bottom: 3rem;
    }

    a.thumbnail:hover {
        border-color: rgb(60, 60, 60);
        background: rgb(245, 245, 245);
    }

    figure {
        width: 100% !important;
        max-width: 100%;
        height: auto !important;
        border-radius: 0.3rem;
    }

    figcaption {
        text-align: center;
        padding-top: 0.75rem;
        font-size: 85%;
    }

    video {
        width: 100%;
        max-width: 100%;
        display: block;
        height: auto !important;
        vertical-align: middle;
        -ms-interpolation-mode: bicubic; 
    }

    .video-wrapper, 
    .iframe-wrapper {
        position: relative;
        height: 0;
    }

    .video-wrapper.ratio-16x7,
    .iframe-wrapper.ratio-16x7 {
        padding-bottom: 43.75%;
    }

    .video-wrapper.ratio-16x9,
    .iframe-wrapper.ratio-16x9 {
        padding-bottom: 56.25%;
    }

    .video-wrapper.ratio-4x3,
    .iframe-wrapper.ratio-4x3 {
        padding-bottom: 75%;
    }

    .video-wrapper.ratio-square,
    .iframe-wrapper.ratio-square {
        padding-bottom: 100%;
    }

    .video-wrapper iframe,
    .iframe-wrapper iframe,
    .video-wrapper embed,
    .iframe-wrapper embed,
    .video-wrapper object,
    .iframe-wrapper object {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

/*
 *  END IMAGES, THUMBNAILS AND VIDEOS.
 *
 ***/



/***
 *
 *  TYPOGRAPHY VERTICAL RHYTHM.
 *
 */

    .text {
        line-height: 1.7;
    }

    p.text, .text p,
    ul.text, .text ul, 
    ol.text, .text ol, 
    dl.text, .text dl,
    hr.text, .text hr,
    pre.text, .text pre,
    table.text, .text table,
    blockquote.text, .text blockquote {
        margin-bottom: 4rem;
    }

    .space {
        display: block;
        height: 0;
        line-height: 0;
        font-size: 0;
        padding-top: 4rem;
    }

    blockquote.text p,
    .text blockquote p {
        margin-bottom: 2rem;
    }

    blockquote.text p:only-child,
    .text blockquote p:only-child {
        margin-bottom: 0;
    }

    blockquote.citation p:last-of-type,
    blockquote.multi-liner p:last-of-type {
        margin-bottom: 0;
    }

    h1.text, .text h1, 
    h2.text, .text h2, 
    h3.text, .text h3, 
    h4.text, .text h4, 
    h5.text, .text h5, 
    h6.text, .text h6 {
        margin-bottom: 1.25rem;
    }

    h1 + blockquote,
    h2 + blockquote,
    h3 + blockquote,
    h4 + blockquote,
    h5 + blockquote,
    h6 + blockquote,
    h2 + ul, h3 + ul, h4 + ul, h5 + ul, h6 + ul,  
    h2 + ol, h3 + ol, h4 + ol, h5 + ol, h6 + ol,  
    h2 + dl, h3 + dl, h4 + dl, h5 + dl, h6 + dl {  
        margin-top: 4rem;
    }

    ul ul, ul ol, ul dl,
    .text ul ul, .text ul ol, .text ul dl,
    ol ol, ol ul, ol dl,
    .text ol ol, .text ol ul, .text ol dl,
    dl dl, dl ul,  dl ol,
    .text dl dl, .text dl ul, .text dl ol {
        margin-top: 2rem;
        margin-bottom: 1rem;
    }

    .text ul > li:last-of-type, 
    .text ol > li:last-of-type,
    .text dl > dt:last-of-type,
    .text dl > dd:last-of-type {
        margin-bottom: 0;
    }

    pre code {
        line-height: 1.25;
    }

/*
 *  END TYPOGRAPHY VERTICAL RHYTHM.
 *
 ***/



/***
 *
 *  TYPOGRAPHY BLOCK LEVEL.
 *
 */

    h1, h2, h3, h4, h5, h6 {
        line-height: 1.25;
        font-family: Baskerville, Georgia, serif;
        font-weight: normal;
    }

    h1 {
        font-size: 7rem;
    }

    h2 {
        font-size: 5rem;
    }

    h3 {
        font-size: 3rem;
    }

    h4 {
        font-size: 2.75rem;
    }

    h5 {
        font-size: 2.75rem;
    }

    h6 {
        font-size: 2.75rem;
    }

    blockquote.text,
    .text blockquote {
        padding-left: 8rem;
        padding-right: 8rem;
        position: relative;
    }

    .text blockquote::before {
        content: "\201C";
        position: absolute;
        top: -6.5rem;
        left: 1.5rem;
        font-size: 12rem;
        font-family: Baskerville, Georgia, serif;
    }

    blockquote.modern {
        margin-left: 1.5rem;
        padding-left: 2rem;
        border-left: 1rem solid rgba(165, 165, 165, 0.65);
    }

    blockquote.modern::before {
        content: "";
        display: none;
    }

    blockquote.fat-liner {
        margin-left: 0;
        margin-right: 0;
        padding: 2rem 3rem 0 3rem;
        border-top: 1rem solid rgba(165, 165, 165, 0.65);
        border-bottom: 1rem solid rgba(165, 165, 165, 0.65);
    }

    blockquote.fat-liner::before {
        content: "";
        display: none;
    }

    blockquote.citation {
        margin-left: 0;
        padding: 3rem;
        border: 0.1rem solid rgb(165, 165, 165);
        box-shadow: inset 0 0 2rem -1rem rgb(165, 165, 165);
    }

    blockquote.citation::before {
        content: "";
        display: none;
    }

    blockquote.multi-liner {
        margin: 4.7rem 0.7rem;
        padding: 2rem 2.5rem;
        border: 0.7rem double rgba(165, 165, 165, 0.65);
        outline: 0.7rem double rgba(165, 165, 165, 0.65);
    }

    blockquote.multi-liner::before {
        content: "";
        display: none;
    }

    blockquote.shout {
        font-size: 250%;
        line-height: 1.25;
        font-family: Baskerville, Georgia, serif;
    }

    blockquote.shout::before {
        top: -3rem;
        font-size: 12rem;
    }

    pre {
        font-family: inherit;
        font-size: inherit;
        max-width: 100%;
        overflow: auto;
    }

    hr { 
        position: relative;
        height: 0.1rem;
        border-bottom-width: 0.1rem;
        line-height: 0;
        font-size: 0;
        padding: 0;
        clear: both;
    }

    hr.fancy {
        position: relative;
        height: 0;
        line-height: 0;
        border-bottom-width: 0;
        font-size: 0;
        border-top-width: 0;
        padding: 0;
        padding-top: 0.01rem;
        margin: 4rem auto 5.99rem auto;
        width: 80%;
        font-family: Consolas, "Courier New", monospace;
    }

    hr.fancy::before {
        content: "\02dc   \02dc";
        white-space: pre;
        display: block;
        position: absolute;
        top: 1.75rem;
        left: 50%;
        width: 20rem;
        height: 5rem;
        text-align: center;
        font-size: 5rem;
        margin-left: -10rem;
        background: none;
    }

    hr.fancy::after {
        content: ".";
        white-space: pre;
        display: block;
        position: absolute;
        top: -0.6rem;
        left: 50%;
        width: 10rem;
        height: 5rem;
        text-align: center;
        font-size: 3rem;
        margin-left: -5rem;
        background: none;
    }

    .text-center {
        text-align: center;
    }

    .text-justify {
        text-align: justify;
    }

    .text-left {
        text-align: left;
    }

    .text-right {
        text-align: right;
    }

/*
 *  END TYPOGRAPHY BLOCK LEVEL.
 *
 ***/



/***
 *
 *  LISTS.
 *
 */

    ul, ol, dl {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .text ul, 
    .text ol, 
    .text dl {
        padding-left: 7rem;
        padding-right: 7rem;
    }

    nav ul, 
    nav ol, 
    nav dl {
        padding-left: 0;
        padding-right: 0;
    }

    .text ul li, 
    .text ol li,
    .text dl dd {
        padding-left: 1rem;
        padding-bottom: 1rem;
    }

    .text dl dt {
        padding-left: 1rem;
        padding-bottom: 0;
    }

    .text dt {
        position: relative;
    }

    .text dt::before {
        content: "\2192";
        position: absolute;
        top: 0;
        left: -2.25rem;
        font-size: 75%;
    }

    .text dfn {
        font-weight: bold;
    }

/*
 *  END LISTS.
 *
 ***/



/***
 *
 *  TABLES.
 *
 */

    table {
        width: 100%;
        border-width: 0.1rem;
        border-collapse: collapse;
        border-radius: 0.9rem;
    }

    caption {
        caption-side: top;
        border-width: 0.1rem;
        border-bottom-width: 0;
        padding: 1rem;
        position: relative;
        background: rgba(245, 245, 245, 0.7);
    }

    caption.bottom {
        caption-side: bottom;
        border-bottom-width: 0.1rem;
        border-top-width: 0;
    }

    td, th {
        border-left-width: 0.1rem;
        border-top-width: 0.1rem;
        padding: 1rem;
    }

    th {
        text-align: left;
    }

    thead th,
    thead td,
    tfoot td, 
    tfoot th {
        background: rgba(165, 165, 165, 0.25);
        font-weight: bold;
    }

    tbody tr:nth-child(odd) td,
    tbody tr:nth-child(odd) th {
        background: rgba(245, 245, 245, 0.75);
    }

    thead:first-child tr:first-child td,
    thead:first-child tr:first-child th,
    tbody:first-child tr:first-child td,
    tbody:first-child tr:first-child th {
        border-top-width: 0;
    }

    td:first-child,
    th:first-child {
        border-left-width: 0;
    }

    table.vertical td,
    table.vertical th {
        border-top-width: 0;
    }

    table.horizontal td,
    table.horizontal th {
        border-left-width: 0;
    }

    table.clean,
    table.clean td,
    table.clean th,
    table.clean caption {
        border-width: 0;
    }

    table.vanilla,
    table.vanilla tr,
    table.vanilla thead td,
    table.vanilla thead th,
    table.vanilla tbody td,
    table.vanilla tbody th,
    table.vanilla tfoot td,
    table.vanilla tfoot th,
    table.vanilla caption {
        border-width: 0;
        background: none;
    }

     table.vanilla th {
        text-align: left;
        padding: 1rem;
        font-size: 100%;
        font-weight: inherit;
    }

    table.liner thead td,
    table.liner thead th,
    table.liner tbody td,
    table.liner tbody th,
    table.liner tfoot td,
    table.liner tfoot th,
    table.liner caption {
        background: none;
    }

    table.top td,
    table.top th,
    tr.top td,
    tr.top th,
    td.top,
    th.top {
        vertical-align: top;
    }


    table.middle td,
    table.middle th,
    tr.middle td,
    tr.middle th,
    td.middle,
    th.middle {
        vertical-align: middle;
    }


    table.bottom td,
    table.bottom th,
    tr.bottom td,
    tr.bottom th,
    td.bottom,
    th.bottom {
        vertical-align: bottom;
    }

/*
 *  END TABLES.
 *
 ***/



/***
 *
 *  FORM ELEMENTS.
 *
 */

    input, 
    textarea,
    select {
        border-width: 0.1rem;
        border-radius: 0.2rem;
        padding: 1.25rem 1.5rem;
        font-size: inherit;
        font-family: inherit;
        box-shadow: inset 0 0.6rem 0.7rem -0.7rem rgb(165, 165, 165);
    }

    @-moz-document url-prefix() { 
        input, 
        textarea,
        select {
            box-shadow: inset 0 0.6rem 1rem -0.9rem rgb(165, 165, 165);
        }
    }


    select {
        padding: 0.9rem 1.5rem;
    }

    input:focus, 
    textarea:focus,
    select:focus {
        border-color: rgb(115, 115, 115);
        box-shadow: inset 0 0.6rem 0.7rem -0.7rem rgb(115, 115, 115), 0 0 1rem -0.5rem rgb(165, 165, 165);
    }

    @-moz-document url-prefix() { 
        input:focus, 
        textarea:focus,
        select:focus {
            box-shadow: inset 0 0.6rem 1rem -0.9rem rgb(115, 115, 115), 0 0 1rem -0.5rem rgb(165, 165, 165);
        }
    }

    input:disabled {
        background: rgb(245, 245, 245);
    }

    input:invalid {
        background: repeating-linear-gradient(-45deg, rgb(255, 255, 255) 0, rgb(245, 245, 245) 1rem);
    }

    label,
    select,
    input[type="radio"],
    input[type="checkbox"],
    input[type="file"],
    input[type="color"],
    input[type="date"],
    input[type="datetime"],
    input[type="datetime-local"],
    input[type="range"] {
        cursor: hand;
        cursor: pointer;
    }

    input[type="radio"],
    input[type="checkbox"] {
        border: none;
        padding: 0;
        box-shadow: none;
    }

    input[type="file"] {
        border-width: 0; 
        box-shadow: none; 
        padding-left: 0; 
        padding-right: 0;
        background: none;
    }

    input[type="file"]:focus {
        border-width: 0; 
        box-shadow: none;
    }

    input[type="color"] {
        background: none;
        border-width: 0;
        box-shadow: none;
        padding: 2.25rem 0;
    }

    @-moz-document url-prefix() { 
        input[type="color"] {
            padding: 0;
            position: relative;
            top: 1.225rem;
        }
    }

    @-moz-document url-prefix() { 
        input[type="range"] {
            padding-top: 2.5rem;
        }
    }

    ::-webkit-color-swatch-wrapper {
        padding: 0;
        height: 2rem;
        position: relative;
        top: -1rem;
    }


    input[type="range"] {
        border-width: 0; 
        box-shadow: none; 
        padding-left: 0; 
        padding-right: 0;
        background: none;
        position: relative;
    }

    [type="search"] {
        -moz-appearance: textfield;
        -webkit-appearance: textfield;
        appearance: textfield;
    }

    :-moz-placeholder,
    ::-webkit-input-placeholder,
    :-ms-input-placeholder {
        color: rgba(165, 165, 165);
    }

    ::-webkit-validation-bubble-message {
        padding: 2rem;
    }

    p input, 
    p textarea,
    p select,
    p label {
        display: block;
        width: 100%;
    }

    p input[type="radio"],
    p input[type="checkbox"] {
        display: inline-block;
        width: auto;
    }

    textarea {
        resize: vertical;
    }

    meter {
        width: 100%;
    }

    progress {
        width: 100%;
    }

/*
 *  FORM ELEMENTS.
 *
 ***/



/***
 *
 *  BUTTONS.
 *
 */

    button,
    .button,
    input[type="button"],
    input[type="submit"] {
        display: block;
        width: 100%;
        text-align: center;
        padding: 1.2rem 2rem 0.9rem 2rem;
        border-radius: 0.2rem;
        border: none;
        outline: none;
        text-decoration: none;
        cursor: hand;
        cursor: pointer;
        line-height: inherit;
        font-size: inherit;
        font-family: inherit;
        font-weight: normal;
        background: rgb(205, 205, 205);
        color: rgb(60, 60, 60);
        box-shadow: 0 0.3rem 0 rgb(165, 165, 165);
    }

    .text .button {
        border-bottom-width: 0;
    }

    button:hover,
    .button:hover,
    input[type="button"]:hover,
    input[type="submit"]:hover {
        color: rgb(245, 245, 245);
        background: rgb(165, 165, 165);
        box-shadow: 0 0.3rem 0 rgb(115, 115, 115);
    }

    button:active,
    .button:active,
    input[type="button"]:active,
    input[type="submit"]:active {
        outline: none;
        box-shadow: 0rem 0rem 0.75rem 0rem rgb(165, 165, 165);
    }

    button::-moz-focus-inner,
    .button::-moz-focus-inner,
    input[type="button"]::-moz-focus-inner,
    input[type="submit"]::-moz-focus-inner {
        outline: none;
        border-width: 0;
    }

    .button-large {
        padding: 1.6rem 2.5rem 1.3rem 2.5rem;
        box-shadow: 0 0.4rem 0 rgb(165, 165, 165);
    }

    .button-large:hover {
        box-shadow: 0 0.4rem 0 rgb(115, 115, 115);
    }

    .button-medium {
        padding: 0.75rem 1.5rem 0.75rem 1.5rem;
        font-size: 90%;
        box-shadow: 0 0.2rem 0 rgb(165, 165, 165);
    }

    .button-medium:hover {
        box-shadow: 0 0.4rem 0 rgb(115, 115, 115);
    }

    .button-small {
        padding: 0.5rem 1.25rem 0.5rem 1.25rem;
        font-size: 80%;
        box-shadow: 0 0.2rem 0 rgb(165, 165, 165);
    }

    .button-small:hover {
        box-shadow: 0 0.2rem 0 rgb(115, 115, 115);
    }

/*
 *  END BUTTONS.
 *
 ***/