/*! HTML5 Boilerplate v6.0.1 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    color: #444;
    font-size: 1em;
    line-height: 1.4;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color:#f7f7f7;
}



/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

a {
    color:#877;

    text-decoration: none;
}

a:hover, 
a:focus,
a:active {
    color: #caa;
}

.gold{
    color:#956827;
}

h1 a{
     color: rgb(255, 64, 124);
}
h1 a:hover{
    color: #ff508c;
}
h1 {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 60px;
    /*pink*/
    color: #ff407c;
    letter-spacing: -0.03em;

}

h3 {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 300;
    font-size: 1.8rem;
    color:#877
}

h4 {
    font-family: 'Playfair Display', sans-serif;
    font-size: 1.3rem;
    color: #877;
    margin-bottom: 0.8rem;
    margin-top: 2.0rem;
}

h6{
    font-family: "Josephin Sans", sans-serif;
    font-weight: 300;
    color: #999;
    margin: 1em 0;
    
}

a[rel="external"]:after {
    content: " ";
    width: 16px;
    display: inline-block;
    height: 20px;
    background: no-repeat url(../img/SVG/383-new-tab.svg);
    margin-left: 0.2rem;
    vertical-align: middle;
    color: #fff;
    opacity: 0.46;
}
a[rel="external"]:hover:after {
    opacity: 0.3;
}

img{
    width:100%;
    max-width:100%;
}

img.icon {
    width:auto;
    margin-right: 4px;
    opacity: 0.46;
}

img.icon.icon-white{
    opacity: 0.9;
}
/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Header
   ========================================================================== */




h2 {
    font-family: 'Playfair Display', sans-serif;
    color:#766;
    font-size: 1.85rem;
}
header h1{
    margin:0;
    line-height:1.1em;
    font-size: 2rem;
    text-align:center;
    margin-top: 1rem;
}


.social-wrapper-header{
    text-align: right;
    font-size: 0.8rem;
    margin: 1rem 0 1.5rem;

}
.header-main nav{
    margin-top: 1rem;
    justify-content: center;
    flex-wrap:wrap;
    -webkit-flex-wrap:wrap;
    font-weight: 500;
}
.header-main nav a {
    /* margin: 0 1rem 1.5rem; */
    border-bottom:1px dotted #ccc;
    margin: 0 auto 1rem;
    width:100%;
}


.subtitle{
    margin: 0 0 2rem;
    text-align:center;
    color:#956827;
}

nav {
    display:flex;
    display:-webkit-flex;
    justify-content: space-between;
    align-items: flex-start;
    -webkit-align-items: flex-start;
}
.social-wrapper-header{
    display:none;
}
@media (min-width: 1000px){
    .social-wrapper-header{
        display:block
    }

    .header-main{
        display:flex;
        display:-webkit-flex;
    }
    .header-main nav a{
        margin:0 0 0 1rem;
        font-weight:400;
        width:auto;
    }
    .header-main nav{
        flex-grow: 1;
        -webkit-flex-grow: 1;
        text-align:right;
        flex-wrap:nowrap;
        -webkit-flex-wrap:nowrap;
        display:flex;
        display:-webkit-flex;
        justify-content: flex-end;
        -webkit-justify-content: flex-end;
        margin-top: 2.3rem;
        flex-basis: 426px;
        -webkit-flex-basis: 426px;
    }
    header h1{
        text-align:left;
        font-size:3rem;
    }
    .subtitle{
        margin-top: 0.5rem;
        text-align:left;
    }

    
}
/* ==========================================================================
   Explainer section
   ========================================================================== */
    .explainer-section{
        text-align: center;
        margin: 1.5rem 0 2rem;
        background-color: #fff;
        padding: 1rem;
        box-shadow: 0rem 0rem 20px #fff;
    }
    .explainer-section p {
        font-size: 1.1rem;
        margin:0;
        text-transform: uppercase;
        line-height:1.6em;
        font-family:"Josefin sans", sans-serif;


        font-size:1.3rem;
        text-align: center;
        margin: 2rem 0 2rem;
    }


    .explainer-section img.icon{
        width: 2rem;
        margin: 0.2rem 0 1rem;
        opacity:0.5;
    }
    .p1 {
        display:block;
        text-transform: uppercase;
        font-size: 0.7rem;
        opacity:0.8;
        line-height:1.5rem;
    }
    .p2{
        font-size:1rem;
        line-height:1.5rem;
    }
    .explainer-section p strong {
        display:block;
        font-size: 1.3rem;
        line-height:2.4rem;
        color:#ff407c;
        /* color:#9a7b82; */
    }

@media (min-width: 1000px){
    .explainer-section{
        margin: 4rem 0 5rem;
        padding: 0.1rem 1rem 1rem;
    }

    .p2{
        font-size: 1.3rem;
        margin-right: 0.5rem;
    }

    .p2, .explainer-section p strong{
        display:inline-block;
    }
}
/* ==========================================================================
   Newsletter sction
   ========================================================================== */

   .newsletter-section{
        text-align: center;
        margin: 2rem 0 0rem;
        background-color: #fff;
        padding: 1rem 1rem 3rem;
        box-shadow: 0rem 0rem 20px #fff;
    }

   .newsletter-section input[type="email"]{
       border:1px solid #ddd;
       margin: 0 auto;
       box-sizing: border-box;
   }

    .newsletter-section input[type="submit"]{
       width: 100%;
   }

   .newsletter-section input{
       width: 100%;
   }

   .mc-field-group label{
       margin-right: 1rem;
       display:none;
   }
    @media (min-width: 768px){

        .newsletter-section{
             margin: 5rem 0 4rem;
        }
        #mc_embed_signup_scroll{
            display:flex;
            display: -webkit-flex;
            justify-content: center;
            -webkit-justify-content: center;
            
        }
    }   
    /* newsletter */
       .mc-field-group label{
       margin-right: 1rem;
       display:none;
   }

   
/* ==========================================================================
   Paintings Index
   ========================================================================== */

   .painting-list{
       margin: 4rem 0;

   }

   .painting-list h2{
        text-align:center;
   }
   .painting-list-content{
       display:flex;
       display:-webkit-flex;
       flex-wrap: wrap;
       -webkit-flex-wrap: wrap;
       justify-content: center;
       -webkit-justify-content: center;

   }

   .painting-list-content .painting-wrapper-grid{
       margin-bottom: 8rem;
       box-sizing:border-box;
       position:relative;
       flex-basis: 80%;
       -webkit-flex-basis: 80%;
    }

   @media (min-width: 768px){
        
       .painting-list-content{
           justify-content: space-between;
           -webkit-justify-content: space-between;
       }

       .painting-list-content .painting-wrapper-grid{
            margin-bottom: 7rem;
            max-width: 100%;
            width:100%;
            box-sizing:border-box;
            position:relative;
            flex-basis: calc(25% - 1rem);
            -webkit-flex-basis: calc(25% - 1rem);
       }

       .painting-list h2{
            text-align:left;
        }
   }
   .painting-list-content .painting-wrapper-grid .painting{
       position:absolute;   
       top:0;
       left:0;
       height: 100%;
       width:100%;
       object-fit:cover;
   }

   .painting-list-content .painting-wrapper-grid:before {
        content:'';
        float:left;
        padding-top:100%;
    }

    .painting-footer {
        position:absolute;
        top:100%;
        width:100%;
        font-size: 0.9rem;
    }

    .painting-footer .icon{
        opacity: 0.2;
        margin-right:-2px;
        margin-top:-2px;
    }
    .painting-footer a {
        margin-right:5px;
    }
    .sold-text-right{
        float:right;
    }
    
    .button-price-shipping:hover, .button-price-shipping:active,
    .painting-list .button-price-shipping:hover, .painting-list .button-price-shipping:active{
        color:white;
        background-color: #ff508c;
    }

    .button-price-shipping{
        height: 5rem;
        cursor: pointer;
        text-align: center;
        display: inline-block;
        background-color: #5d4c50;
        color: #fff;
        padding: 0.8rem 0.5rem;
        line-height: 1.7em;
        box-sizing: border-box;
        width: 100%;
        font-size: 1rem;
        font-weight: 500;
        text-transform: uppercase;
    }

    @media (min-width: 768px){
        .button-price-shipping{
            font-size:1.0rem;
        }
    }
    @media (min-width: 1200px){
        .button-price-shipping{
            font-size:1.2rem;
        }
    }
    .painting-list .button-price-shipping {
        color: #5d4c50;
        background-color: #eee;
    }
    .button-shipping-price{
        display: block;
        font-weight: 600;
        text-transform: UPPERCASE;
        font-size: 0.6em;
        line-height: 1em;
    }

    .instagram-overlay{
        display: block;
        position: absolute;
        bottom: 0.5rem;
        left: 0.5rem;
    }

    .instagram-overlay a:hover {
        color:pink;
    }
    .instagram-overlay a {
        color:white;
    }

    .sold-text-right{

        height: 5rem;
        text-align: center;
        display: inline-block;
        background-color: #5d4c50;
        color: #fff;
        padding: 0.8rem 0.5rem;
        line-height: 1.7em;
        box-sizing: border-box;
        width: 100%;
        font-size: 1.2rem;
        font-weight: 500;
        text-transform: uppercase;

    }
   /* ==========================================================================
   forms
   ========================================================================== */
   
   input {
        border:0;
        padding: 0 1rem;
        height:3rem;
        flex-grow:1;
        -webkit-flex-grow:1;
   }

   button, input[type="submit"]{
       height:3rem;
       border:0;
       color: white;
       background-color:#ff407c;
       cursor:pointer;
       padding: 0 1.5rem;
       flex-grow: 0;
       -webkit-flex-grow: 0;
   }

   .payButton{
       font-size: 1.3rem;
       margin-top: 1rem;
   }
/* ==========================================================================
   Page structure
   ========================================================================== */

    header, main, .footer-inner{
        margin: 0 auto;
        max-width: 94%;
    }

    @media screen and (min-width: 9040px){
        header, main, .footer-inner{
            max-width: 9000px;
        }
    }

    @media screen and (min-width: 1440px){
       header, main, .footer-inner{
            max-width: 1200px;
        }
    }




/* ==========================================================================
   feature painting   
   ========================================================================== */

   
   .featured-painting-wrapper  {
       display:block;
       position:relative;
    }
    
    .painting-info-wrapper{
        /* max-width: 25rem; */
        flex-grow: 0.5;
        -webkit-flex-grow: 0.5;
        position:static;
        padding:0;
        /* background-color: white; */
    }

    
@media (min-width:880px){
    .featured-painting-wrapper{
        display:flex;
        display:-webkit-flex;

    }
    .payButton {
        position:static;
        bottom:1rem;
        right:1rem;
    }
    .painting-info-footer{
        position:absolute;
        bottom: 0;
    }

    .image-and-countdown-wrapper{
        flex-basis: 100%;
        /* max-height: 40%; */
        /* height: 40%; */
    }

   .painting-info-wrapper{
       flex-grow:1;
       flex-shrink:1;
       -webkit-flex-grow:1;
       -webkit-flex-shrink:1;
       padding-left:1rem;
       position:relative;
       flex-basis: 50%;
   }

   .featured-painting-section .painting-wrapper img{
       width: 100%;
       max-width: 100%;
       object-fit:cover;
       -webkit-object-fit:cover;
        border: 1.5rem solid #fff;
        box-sizing:border-box;
   }
   
}


    .price-progress-bar {
       width:100%;
       background-color: #dcdcdc;
       height: 5rem;
       position:relative;
   }
   .price-progress-bar-inner{
       width:100%;
       background-color: #ff407c;
       height: 5rem;
       font-size: 1.3rem;
   }

   .price-progress-bar-inner .price{
       position:absolute;
       width:100%;
       text-align:center;
   }


   .price-progress-bar-inner.free{
        width:100% !important;
        background-color: #f7f7f7;
        color:#c59451;
        font-weight:500;
   }

   .price-progress-bar-inner.free span{
       color:#c59451;
       line-height: 5rem;
   }

   .painting-info-footer{
        margin: 0;
        font-size: 0.8rem;
        color: #777;
   }

   .insta-details{
       margin: 1.8rem 0 1rem;
   }
    .social-line {
        margin: 0;
    }
   .progressPrice{
       float:left;
       margin-left: 1.5rem;
       font-weight:500;
       text-shadow: 1px 1px 1px #777;
       color:white;

   }

   .progressPrice .priceLabel{
       color:white;
       text-shadow: 1px 1px 1px #777;
       font-size:0.8em;
       font-weight: 500;
       line-height: 0rem;
   }
   .priceCountdown{
       display:none;
        float:right;
        margin-right:1.5rem;
        line-height:5rem;
   }

   .original-price-progress{
       display:block;
       line-height: 1rem;
       padding-top:1.1rem;
       font-size: 1rem;
       margin:0;
       font-weight: 400;
       text-align:left;
   }

   @media (min-width: 500px){
       .priceCountdown{
           display:block;
       }
   }
/* ==========================================================================
   hp info text
   ========================================================================== */

   .hp-about-info{
       margin: 3rem 0;
      
   }

   .leader-text{
       font-size: 1.4rem;
   }
   
   .hp-about-info-content{
       /* column-count: 2; */

   }

   .hp-about-info-content p{
       margin-top:0;
       margin-bottom:20px;
   }

   @media(min-width: 768px){
       .hp-about-info{
           float:left;
           width: 75%;
           padding-right: 1.2rem;
           box-sizing: border-box;
       }

   }

    @media(min-width: 1440px){
       .hp-about-info{
           
           
           padding-right: 2.5rem;
           
       }

   }
/* ==========================================================================
   Footer
   ========================================================================== */

footer{
    background: #ea4461;
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden {
    display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap; /* 1 */
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    -webkit-clip-path: none;
    clip-path: none;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
    white-space: inherit;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 1.25dppx),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important; /* Black prints faster:
                                   http://www.sanbeiji.com/archives/953 */
        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) ")";
    }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre {
        white-space: pre-wrap !important;
    }
    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}

/* ==========================================================================
   magnific popup lightbox   
   ========================================================================== */

   /*link*/
   .magnific{
       outline: none;
   }

   .featured-painting-popup .mfp-container .mfp-content{
        max-width: 80%;
        background-color:white;
        padding: 1rem;
        width:auto;

    }

.mfp-content .painting-img{
    border:0;
    /* max-height: calc(100vh - 12rem); */
    object-fit:contain;
    height: 50%;
}

.mfp-content .featured-painting-wrapper{
    display:block;
}

/* ==========================================================================
   sold paintings page   
   ========================================================================== */

.sold-paintings-wrapper{
    display:flex;
    flex-wrap: wrap;
    justify-content: space-between;

    display:-webkit-flex;
    -webkit-flex-wrap: wrap;
    -webkit-justify-content: space-between;

}

.secondary-painting-wrapper{

    margin-bottom: 6rem;
    max-width: 50%;
    width:50%;
    box-sizing:border-box;
    position:relative;
    flex-basis: calc(50% - 0.5rem);
    -webkit-flex-basis: calc(50% - 0.5rem);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.endmain {
    clear:both;
    margin: 4rem 0;
}

.endmain h2 {
    font-size: 2.5rem;
    text-align:center;
}
footer .footer-inner{
    color:white;
    display:flex;
    justify-content: space-between;
    display:-webkit-flex;
    -webkit-justify-content: space-between;
}

footer{
    padding:1rem;
}

.footer-inner a {
    color:white;
}

.floatright{
    float:right;
}


/* ==========================================================================
   about page
   ========================================================================== */

.bigtext{
    font-size: 3rem;
    text-align:center;
    line-height: 1.2em;
}

.about-page-content{
    margin-bottom: 4rem;
}

@media (min-width: 768px){
    .content-and-sidebar{
        display:flex;
        display:-webkit-flex;
        text-align:left;

    }
    .bigtext{
        font-size: 3rem;
        text-align: right;
        margin-top: 32px;
        padding-right: 4rem;
    }

}
@media (min-width: 1122px){
    .bigtext{
        font-size: 5rem;
    }
}
@media (min-width: 1300px){
    .bigtext{
        font-size: 7rem;
    }
}
.bio-question{
    margin-bottom: 0.5rem;
}

.bio-question + p{
    margin-top: 0.5rem;
}
/* ==========================================================================
   Contact Form
   ========================================================================== */

/* form style */
.form-style{
    margin: 4rem 0 10rem;
}
.form-style-heading{
    font-style: italic;
    border-bottom: 2px solid #ddd;
    margin-bottom: 10px;
    font-size: 15px;
    padding-bottom: 3px;
}
.form-style label{
    display: block;
    margin: 0px 0px 15px 0px;
}
.form-style label > span{
    width: 125px;
    float: left;
    padding-top: 8px;
    padding-right: 5px;
}
.form-style span.required{
    color:red;
}
.form-style .tel-number-field{
    width: 40px;
    text-align: center;
}
.form-style  .long{
    width: 120px;
}
.form-style input.input-field{
    width: 48%;

}

.form-style input.input-field,
.form-style .tel-number-field,
.form-style .textarea-field,
.form-style .select-field{
    -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    border: 1px solid #C2C2C2;
    box-shadow: 1px 1px 4px #EBEBEB;
    -moz-box-shadow: 1px 1px 4px #EBEBEB;
    -webkit-box-shadow: 1px 1px 4px #EBEBEB;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    padding: 7px;
    outline: none;
}
.form-style .input-field:focus,
.form-style .tel-number-field:focus,
.form-style .textarea-field:focus,
.form-style .select-field:focus{
    border: 1px solid #0C0;
}
.form-style .textarea-field{
    height:100px;
    width: 55%;
}
.form-style input[type="button"],
.form-style input[type="submit"] {
    
    background-color: rgb(197, 10, 88);;
    display: inline-block;
    cursor: pointer;
    color: #FFFFFF;
    padding: 8px 18px;
    text-decoration: none;

}
.form-style input[type="button"]:hover,
.form-style input[type="submit"]:hover {
    
    background-color: rgb(220, 10, 88);
}
.form-style .success{
    background: #D8FFC0;
    padding: 5px 10px 5px 10px;
    margin: 0px 0px 5px 0px;
    border: none;
    color: #2E6800;
    border-left: 3px solid #2E6800;
}
.form-style .error {
    background: #FFE8E8;
    padding: 5px 10px 5px 10px;
    margin: 0px 0px 5px 0px;
    border: none;
    color: #FF0000;
    border-left: 3px solid #FF0000;
}
/*///// END FORM ********************************/

.sold .sold-hide{
    visibility:hidden;
}
.progress-sold{
    height: 5rem;
    line-height: 5rem;
    text-align: center;
    font-size: 0.9rem;
    background-color: #000;
    color: #ccc;
}

@media (min-width: 600px){
    .progress-sold{
        font-size: 1.3rem;
    }
}
.overlay{
    display:none;
    background-color:black;
    z-index:1;
    position:absolute;
    width:100%;
    height:100%;
    opacity:0.4;    
}

.image-and-countdown-wrapper .painting-wrapper{
    position:relative;
}
.sold .overlay{
    display:block;
}
.sold-text{
    color: #fff;
    text-align: center;
    font-size: 2rem;
    font-weight: 200;
    font-family: 'Josefin Sans', sans-serif;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    left: 0;
    right: 0;

}



/* ==========================================================================
   TITLE ANIMATION
   ========================================================================== */



#h1anim1 #out, #h1anim1 #art{
    display:block;
    
    
    
}
#h1anim1 #outart {
    animation:2.5s ease-in-out 0s infinite alternate out_anim;
    position:absolute;
    right:0px;
}
#h1anim1 #selling {
    margin-right: 1rem;
    padding-right: 6.5rem;
}
#h1anim1{
    display:block;
    overflow:hidden;
    position:relative;
    
}

#h1anim1 #art{
    letter-spacing: 0.08em;
    /* transform: translateY(-3rem); */
}

@keyframes out_anim {
    0% { transform:translateY(-3.3rem); }
    48% { transform:translateY(-3.3rem); }
    52% { transform:translateY(0rem); }  
    100% { transform:translateY(0rem); }  
}

/* ==========================================================================
   TITLE ANIMATION v2
   ========================================================================== */

@media (min-width: 1330px){
    #h1anim2{
        position:relative;
    }


    #h1anim2 #art, #out{
        transition: all 0.2s ease-out;
        position: relative;
        left: 0px;
    }
    #h1anim2:hover #art{
        left: -21rem;
        /* transform: translateX(-21rem); */
    }
    #h1anim2:hover #out{
        left:21rem;
        /* transform: translateX(-23.7rem); */
        
    }

    #h1anim2 #art{
        position:relative;
    }

}
@keyframes outanim2 {
    0% { left:0; }
    100% { left:20rem; }  
}
@keyframes outanim3 {
    0% { left:0; }
    
    100% { left:-20rem; }  
}

#selling, #out {
    color: #9a7b82;
}


/* ==========================================================================
   TITLE niceness
   ========================================================================== */

h1 {
    font-size: 2rem;
}
#slash{
    display:none;
}

#art{
    letter-spacing: 2px;
}

.subtitle{
    font-size:0.8rem;
}


#selling-art{
    display:block;
}

@media (min-width: 500px){
    #selling-art{
        display:inline-block;
    }
}
/* ==========================================================================
   CHART
   ========================================================================== */
.chart-container{
    width: 100%;
    max-height: 200px;
    position: relative;
}

/* ==========================================================================
   STATS
   ========================================================================== */
 
@media (min-width: 768px){

    .hp-stats{
        width: 25%;
        float:left;
        margin: 8em 0;
        padding: 1.6rem 1rem 3rem;
        box-sizing:border-box;
        background-color:white;
    }

    .hp-stats h2 {
        font-size: 1.1rem;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        color: #999;
        text-transform: uppercase;
    }
    /* .stats-grid{
        display:flex;
        display:-webkit-flex;
        justify-content: space-between;
        -webkit-justify-content: space-between;

  
    }
    .stats-widget{
        box-sizing:border-box;
        flex-basis: calc(25% - 2rem);
        -webkit-flex-basis: calc(25% - 2rem);

    } */

    

}

@media (min-width: 1440px){

    .hp-stats{
        width: 25%;
    }
}
.hp-stats{
    text-align:center;
}
.stats-widget{
    padding: 1rem 0;
}
.stat-big{
    font-size:2em;
    font-weight:bold;
    color: #ff407c;
    text-align:center;
}

.stat-caption {
    text-transform: uppercase;
    color: #999;
    text-align: center;
    font-size: 0.9em;
}


/* ==========================================================================
   STUDIO PAINTINGS
   ========================================================================== */

.studio-paintings-grid .painting-wrapper{
    /* padding:1em; */
    box-sizing:border-box;
    /* background:white; */
    margin-bottom: 5em;
    justify-content: space-between;

}

@media screen and (min-width:768px){
    .studio-paintings-grid .painting-wrapper {

        max-width: 49%;
        box-sizing: border-box;
    }
}

.studio-paintings-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

/* ==========================================================================
    WATERCOLOR PROGRESS
   ========================================================================== */


   .progress-figure{
       max-width: 600px;
   }