* {
            font-family: Futura, Arial, Helvetica, sans-serif;
            font-weight: inherit;
            font-size: 14px;
        }
        div.about {
            display: inline-block;
            width: 33%;
            float: left;
        }
        div.about h3 {
            font-size: 15px;
            font-weight: bold;
        }
        div.about .profile {
            padding: 3rem;
        }
        div.profile img, form { 
            max-width: 400px;
            width: 100%;
        }
        div.name {
            width: 33%;
            background: white;
            padding: 0 1rem 0 0;
        }
        div.name p {
            padding: 0 0 1rem 0;
            margin: 0 0 0rem 0;
            float: left;
        }
        div.name a {
            text-decoration: none;
            color: black;
        }
        div.name h1 {
            font-size: 18;
        }
        div.about p, .about h3:not(form h3), div.name a, .container, .footer p  {
            padding: 0 3rem 1rem 3rem;
        }
        div.name h1 {
            padding-bottom: 0rem;
        }
        div.name b {
            width: fit-content;
            float: right;
            padding: 1.5rem 2rem 0 0;
            font-size: 16px;
        }
        div.works {
            width: 66%;
            float: right;
        }
        div.footer {
            display: inline-block;
            width: 100%;
            bottom: 0;
            margin: 0;
            padding: 0;
            text-align: center;
            font-size: 14px;
        }
        .card {
            color: black;
            padding: 2rem 0em;
            height: 4rem;
            height: 100%;
            max-width: 700px;
        }
        .card img {
            width: 100%;
        }

        .card p:nth-child(1) {
            font-size: 1em;
        }
/*
        .card img:hover {
            transform: scale(.9);
            transition: 0.3s;
        }
*/
        .card a.artsy {
            color: black;
            font-size: 1.1em;
            height: 1em;
            /* display: inline-block; */
            vertical-align: middle;
            text-decoration: none;
            padding: 0.4em;
            text-transform: uppercase;
            /* margin-top: 1em; */
            /* background-color: black;*/
        }
        .card .cta {
            margin: 2em 0 0 0;
        }
/*
        .card a:not(a.local) {
                    border: solid 1px;
                    padding: 1em;
                    border-radius: 0.25em;
        }
*/
        .card a:not(a.local, a.button):before {
            content: "";
            display: inline-block;
            background: url(../images/icons/artsy-2.svg) no-repeat top right;
            width: 1.3em;
            height: 1.3em;
            vertical-align: -50%;
            margin: .38em 1em .38em 0;
        }
        .cards {
            text-align: center;
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-gap: 1rem;
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
        }
        
        a {
            color: black;
        }

        
        @media only screen and (min-width: 551px) {
            div.name {
                position: fixed;
                top: 0;
            }
            div.name h1 {
               padding: 1rem 0 0rem 3rem; 
            }
            div.name a.about {
                display: none;
            }
            div.name label, div.name input, div.name ul {
                display: none;
            }
            div.about .top {
                display: none;
            }
            div.about {
                margin-top: 4rem;
            }
            div.about p {
                width: 90%;
            }
            .cards h2 {
                display: none;
            }
            .cards p {
                font-size: 12px;
            }
            .container {
                padding: 0 3rem 0 0;
            }
            div.footer {
                display: inline-block;
                width: 100%;
                bottom: 0;
                margin: 0;
                padding: 0;
                text-align: center;
                font-size: 12px;
            }
            /* OVERLAY CSS */
/*
        .container{
          padding: 1em 0;
          float: left;
          width: 50%;
        }
*/
/*
        @media screen and (max-width: 640px){
          .container{
            display: block;
            width: 100%;
          }
        }

        @media screen and (min-width: 900px){
          .container{
            width: 33.33333%;
          }
        }
*/

        .simple .container .title{
          color: #1a1a1a;
          text-align: center;
          margin-bottom: 10px;
        }

        .simple .content {
          position: relative;
          overflow: hidden;
        }

        .simple .content .content-overlay {
          background: rgba(0,0,0,0.7);
          position: absolute;
          height: 99%;
          width: 100%;
          left: 0;
          top: 0;
          bottom: 0;
          right: 0;
          opacity: 0;
          -webkit-transition: all 0.4s ease-in-out 0s;
          -moz-transition: all 0.4s ease-in-out 0s;
          transition: all 0.4s ease-in-out 0s;
        }

        .simple .content:hover .content-overlay{
          opacity: 1;
        }

        .simple .content-image{
          width: 100%;
        }

        .simple .content-details {
          position: absolute;
          text-align: center;
          padding-left: 1em;
          padding-right: 1em;
          width: 100%;
          top: 50%;
          left: 50%;
          opacity: 0;
          -webkit-transform: translate(-50%, -50%);
          -moz-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
          -webkit-transition: all 0.3s ease-in-out 0s;
          -moz-transition: all 0.3s ease-in-out 0s;
          transition: all 0.3s ease-in-out 0s;
        }
            .simple .content-details a {
                color: white;
            }

        .simple .content:hover .content-details{
          top: 50%;
          left: 50%;
          opacity: 1;
        }

        .simple .content-details h3{
          color: #fff;
          font-weight: 500;
          letter-spacing: 0.15em;
          margin-bottom: 0.5em;
          text-transform: uppercase;
        }

        .simple .content-details p{
          color: #fff;
          font-size: 1em;
        }

        .simple .fadeIn-bottom{
          top: 80%;
        }
            
        .simple .card a:not(a.local):before {
            content: "";
            display: inline-block;
            background: url(../images/icons/artsy-wht.svg) no-repeat top right;
            width: 1.3em;
            height: 1.3em;
            vertical-align: -50%;
            margin: .38em 1em .38em 0;
        }
        }

    /* Popup Image CSS */

        .box {
          width: 40%;
          margin: 0 auto;
          background: rgba(255,255,255,0.2);
          padding: 35px;
          border: 2px solid #fff;
          border-radius: 20px/50px;
          background-clip: padding-box;
          text-align: center;
        }

        .overlay {
          position: fixed;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          background: rgba(0, 0, 0, 0.7);
          transition: opacity 500ms;
          visibility: hidden;
          opacity: 0;
        }
        .overlay:target {
          visibility: visible;
          opacity: 1;
            z-index: 1;
        }

        .popup {
          margin: 70px auto;
          padding: 20px;
          background: #fff;
          border-radius: 5px;
          width: 40%;
          position: relative;
            display: block;
            max-width: 550px;
        }

        .popup img {
            width: 100%
        }

        .popup h2 {
          margin-top: 0;
          color: #333;
        }
        .popup .close {
          position: absolute;
          top: 20px;
          right: 30px;
          font-size: 30px;
          font-weight: bold;
          text-decoration: none;
          color: white;
        }
        .popup .close:hover {
          color: white;
        }
        .popup .content {
          overflow: auto;
        }

        @media screen and (max-width: 700px){
          .box{
            width: 70%;
          }
          .popup{
            margin-top: 12rem;
            width: 70%;
          }
        }

/*
        @import "form.css";
        @import "all.css";
        @import "mobile.css";*/