/*
Theme Name: Stage Dive Art
Theme URI: https://www.louisgranato.com/
Author: Louis Granato
Author URI: https://www.louisgranato.com/
Description: Custom theme for artist Regan Hatfield.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: basics
Tags:
*/

/* $Reset */
*, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; }
::-moz-selection { color: var(--c-b); background-color: var(--c-y); text-shadow: none; }
::selection { color: var(--c-b); background-color: var(--c-y); text-shadow: none; }
audio, canvas, iframe, img, svg, video { max-width: 100%; vertical-align: middle; }
button { background-color: transparent; border: none; margin: 0; padding: 0; text-align: inherit; font: inherit; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; }
hr { display: block; height: .2rem; border: 0; border-top: .2rem solid var(--c-10); margin: 4.0rem 0; padding: 0;}
code { line-height: 1.5; color: var(--c-75); }
[id] { scroll-margin-top: 8.0rem; }

/* $Global */
html {
    -webkit-tap-highlight-color: transparent;
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    -ms-text-size-adjust: none;
        text-size-adjust: none;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    scroll-behavior: smooth;
    background-color: #fff;
    font-family: "Inconsolata", monospace;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    font-size: 10px;
    color: #000;
}
    body {
        background-color: #f6f6f6;
        margin: 0;
        padding: 0;
        min-height: 100vh;
        font-size: 1.6rem;
        line-height: 1;
    }
        .app {
            position: relative;
        }

/* $Type */
h1,
h2,
h3,
h4,
h5 {
    color: #7d111b;
    font-family: "Work Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
    line-height: 0.85;
    text-transform: uppercase;
    -webkit-margin-before: 0;
            margin-block-start: 0;
    -webkit-margin-after: 0;
            margin-block-end: 0;
    -webkit-margin-start: 0;
            margin-inline-start: 0;
    -webkit-margin-end: 0;
            margin-inline-end: 0;
    margin-top: 4.8rem;
    margin-bottom: 2.4rem;
}
h1 {
    font-size: 6.4rem;
    font-style: italic;
}
h2 {
    font-size: 4.0rem;
}
h3 {
    font-size: 2.4rem;
}
h4 {
    font-size: 1.6rem;
}
h5 {
    font-size: 1.4rem;
}
p,
ul,
ol {
    line-height: 1.5;
    margin: 0 0 2.4rem;
    text-wrap: pretty;
}
b,
strong {
    font-weight: 700;
}
.nowrap {
    white-space: nowrap;
}
a {
    color: #0000ff;
    text-decoration: none;
    border-bottom: .1rem solid #0000ff;
    padding-bottom: .1rem;
}
a:link {
    color: #0000ff;
}
a:visited {
    color: #0000ff;
}
a:hover {
    color: #0000ff;
}
a:active {
    color: #0000ff;
}

/* $Images */
img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* $Forms */
.frm_loading_form {
    opacity: .5;
}
fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}
.frm_description {
    text-align: center;
}
.frm_form_field {
    margin-bottom: 1.6rem;
}
.frm_form_field input[type="text"],
.frm_form_field input[type="email"],
.frm_form_field input[type="url"],
.frm_form_field input[type="tel"],
.frm_form_field input[type="number"],
.frm_form_field textarea,
.frm_form_field select {
    width: 100%;
    font: inherit;
    padding: 0.8rem;
    border: 1px solid #ccc;
}
.frm_form_field input:focus,
.frm_form_field textarea:focus,
.frm_form_field select:focus {
    outline: none;
    border-color: #333;
}
.frm_primary_label {
    display: inline-block;
    margin-bottom: 0.4rem;
}
.frm_error_style,
.frm_error {
    color: #c00;
}
.frm_error {
    display: inline-block;
    font-size: 1.0rem;
    margin-top: 0.4rem;
}
.frm_form_field.frm_blank_field input,
.frm_form_field.frm_blank_field textarea,
.frm_form_field.frm_blank_field select {
    border-color: #c00;
}
.frm-cf-turnstile {
    display: flex;
    align-items: center;
    justify-content: center;
}
.frm_submit {
    margin-bottom: 0;
}
.frm_submit button,
.frm_button_submit {
    font-family: "Work Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
    min-width: 20rem;
    padding: 1.1rem 1.6rem;
    background-color: #f5a83a;
    color: #7d111b;
    border: 1px solid #f5a83a;
    cursor: pointer;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-left: auto;
    margin-right: auto;
}
.frm_submit button:hover,
.frm_button_submit:hover {
    background-color: #f5a83a;
    color: #7d111b;
}
.frm_message {
    text-align: center;
    line-height: 1.5;
}

/* $Header */
.header {
    position: relative;
    overflow: hidden;
    width: 100%;
    background: #7d111b;
    background: linear-gradient(180deg, #12002f 0%, #7d111b 70%);
    text-align: center;
    padding: 2.4rem 2.4rem 0;
}
@media (min-width: 381px) {
    .header {
        background: linear-gradient(180deg, #12002f 0%, #7d111b 65%);
    }
}
@media (min-width: 625px) {
    .header {
        background: linear-gradient(180deg, #12002f 0%, #7d111b 50%);
    }
}
    .header__title {
        color: #f5a83a;
        margin: 0 0 0.4rem;
    }
    .header__line {
        background: #2a090c;
        margin: 0 -2.4rem 2px;
        opacity: .7;
    }
    .header__line--first {
        height: .1rem;
        opacity: .3;
    }
    .header__line--second {
        height: .15rem;
        opacity: .4;
    }
    .header__line--third {
        height: .2rem;
        opacity: .5;
    }
    .header__line--fourth {
        height: .25rem;
        opacity: .6;
    }
    .header__line--fifth {
        height: .3rem;
        opacity: .7;
    }
    .header__line--sixth {
        height: .35rem;
        opacity: .8;
    }
    .header__inner {
        background: #2a090c;
        margin: 0 -2.4rem 0;
    }
        .header__subtitle {
            color: #ccc;
            font-size: 2.4rem;
            font-family: "Inconsolata", monospace;
            font-optical-sizing: auto;
            font-weight: 300;
            font-style: normal;
            font-variation-settings: "wdth" 100;
            text-transform: none;
            margin: 0;
            padding: 2.4rem;
        }

/* $Footer */
.footer {
    background-color: #2a090c;
    color: #ccc;
}
    .footer__inner {
        padding: 4.8rem 2.4rem;
        text-align: center;
    }
        .footer_p {
            font-size: 1.2rem;
            margin: 0;
        }

/* $Content */
.content {
    padding: 4.8rem 2.4rem;
}
.content > :first-child {
    margin-top: 0;
}
.content > :last-child {
    margin-bottom: 0;
}
.content--utility {
    text-align: center;
}

/* $Home */
.intro {
    margin: 0 auto;
    max-width: 56.0rem;
    text-align: center;
}
.artworks {
    -webkit-column-width: 20.0rem;
    -moz-column-width: 20.0rem;
    column-width: 20.0rem;
    -webkit-column-gap: 2.4rem;
    -moz-column-gap: 2.4rem;
    column-gap: 2.4rem;
    max-width: 80.0rem;
    padding-top: 0;
    padding-bottom: 2.4rem;
    margin-left: auto;
    margin-right: auto;
}
    .artwork {
        width: 100%;
        margin-bottom: 2.4rem;
    }
        .artwork__image {
            display: block;
            width: 100%;
            height: auto;
        }
.contact {
    margin: 0 auto;
    max-width: 46.0rem;
    padding-bottom: 7.2rem;
}
    .contact__title {
        text-align: center;
    }
    #frm_form_1_container {

    }
        #frm_field_6_container {
            margin-bottom: 0;
        }

/* $Responsive */
@media only screen and (min-width: 360px) { html { font-size: 11px; } }
@media only screen and (min-height: 720px) and (min-width: 960px) { html { font-size: 12px; } }
@media only screen and (min-height: 792px) and (min-width: 1024px) { html { font-size: 13px; } }
@media only screen and (min-height: 864px) and (min-width: 1280px) { html { font-size: 14px; } }
@media only screen and (min-height: 936px) and (min-width: 1400px) { html { font-size: 15px; } }
@media only screen and (min-height: 936px) and (min-width: 1536px) { html { font-size: 16px; } }

/* $Print */
@media print{blockquote,img,pre,tr{page-break-inside:avoid}*,::after,::before{background:#fff!important;color:#000!important;-webkit-box-shadow:none!important;box-shadow:none!important;text-shadow:none!important}a,a:visited{text-decoration:underline}a[href]::after{content:" (" attr(href) ")"}abbr[title]::after{content:" (" attr(title) ")"}a[href^="#"]::after,a[href^="javascript:"]::after{content:""}pre{white-space:pre-wrap!important}blockquote,pre{border:1px solid #999}h2,h3,p{orphans:3;widows:3}h2,h3{page-break-after:avoid}}