/*
Theme Name: Regan Hatfield
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: "minion-pro", Georgia, serif;
    font-weight: 400;
    font-style: normal;
    font-size: 10px;
    color: #333;
}
    body {
        background-color: #fff;
        margin: 0;
        padding: 0;
        min-height: 100vh;
        font-size: 1.6rem;
        line-height: 1;
    }
        .app {
            position: relative;
        }

/* $Animations */
@-webkit-keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* $Type */
h1,
h2,
h3,
h4,
h5 {
    -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-family: "din-condensed", sans-serif;
    font-weight: 300;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: -0.02em;
}
h2 {
    font-size: 4.0rem;
    font-family: "din-condensed", sans-serif;
    font-weight: 300;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: -0.02em;
}
h3 {
    font-size: 2.4rem;
    font-family: "minion-pro", Georgia, serif;
    font-weight: 400;
    font-style: normal;
}
h4 {
    font-size: 1.6rem;
    font-family: "minion-pro", Georgia, serif;
    font-weight: 400;
    font-style: normal;
}
h5 {
    font-size: 1.2rem;
    font-family: "minion-pro", Georgia, serif;
    font-weight: 400;
    font-style: normal;
}
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: #333;
    text-decoration: none;
}
a:link {
    color: #333;
}
a:visited {
    color: #333;
}
a:hover {
    color: #333;
}
a:active {
    color: #333;
}

/* $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.2rem;
    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_submit {
    
}
.frm_submit button,
.frm_button_submit {
    font: inherit;
    min-width: 20rem;
    padding: 1.1rem 1.6rem;
    background-color: #999;
    color: #fff;
    border: 1px solid #999;
    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: #999;
    color: #fff;
}
.frm_message {
    text-align: center;
}

/* $Header */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    border-bottom: 1px solid #ddd;
}
    .header__inner {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        height: 4.4rem;
        padding: 0 2.4rem;
        margin: 0 auto;
        max-width: 1536px;
    }
        .logo {
            font-size: 3.0rem;
            text-transform: uppercase;
            margin: 0;
        }
            a.logo__link {
                color: #333;
            }
        .nav {
            font-family: "din-condensed", sans-serif;
            font-weight: 300;
            font-style: normal;
            font-size: 2.0rem;
            margin-left: auto;
        }
            a.nav__link {
                color: #333;
            }

/* $Footer */
.footer {
    background-color: #efefef;
}
    .footer__inner {
        padding: 4.8rem 2.4rem;
        margin: 4.8rem auto 0;
        max-width: 1536px;
        text-align: center;
    }
        .footer_p {
            color: #888;
            font-size: 1.3rem;
            margin: 0;
        }
        a.footer_link {
            color: #333;
            font-size: 1.6rem;
        }

/* $Content */
.content {
    padding: 2.4rem 0 0;
    margin: 4.8rem 0 0;
}
.content--utility {
    text-align: center;
    padding: 2.4rem 2.4rem 0;
}
    .content--utility a {
        color: #00c;
    }

/* $Home */
.artworks {
    padding: 0 2.4rem 2.4rem;
    margin: 0 auto 4.8rem;
    max-width: 1200px;
}
    .artwork {
        margin-bottom: 8.0rem;
    }
    .artwork:last-child {
        margin-bottom: 0.8rem;
    }
        .artwork__image {
            max-height: 85vh;
            width: auto;
            height: auto;
            margin: 0 auto 0.8rem;
        }
        .artwork__meta {
            text-align: center;
            line-height: 1.2;
        }
            .artwork__notes {
                display: block;
            }
                .artwork__notes-trigger {
                    color: #888;
                    font-size: 1.3rem;
                    cursor: pointer;
                }
                .artwork__notes-trigger--hidden {
                    display: none;
                }
                .artwork__notes-text {
                    display: none;
                    font-size: 1.3rem;
                    padding-top: 0.2rem;
                }
                .artwork__notes-text--visible {
                    display: block;
                    -webkit-animation: fadeIn 1.5s ease forwards;
                            animation: fadeIn 1.5s ease forwards;
                }
                    .artwork__notes-text p {
                        font-size: 1.3rem;
                    }
.contact {
    background-color: #efefef;
    margin: 4.8rem 0;
}
    .contact__inner {
        padding: 2.4rem;
        margin: 0 auto;
        max-width: 60.0rem;
    }
        .contact__title {
            text-align: center;
        }
        #frm_form_1_container {
            margin-bottom: 3.2rem;
        }
.cv {
    padding: 2.4rem;
    margin: 4.8rem auto 0;
    max-width: 60.0rem;
    text-align: center;
}
    .cv__artist-title {
        margin-top: 0;
    }
    .cv > :last-child {
        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}}