@import url('https://fonts.googleapis.com/css2?family=Elms+Sans:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Elms+Sans:ital,wght@0,100..900;1,100..900&display=swap');

html {background-color:#fff;padding:0px;margin:0px;}

body {font-family: "Elms Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
  padding:0px;margin:0px;
}

header {padding:0px;margin:0px;border:0px solid #fff;background-color: #d6f5f5}

div#bcmabar {position:fixed;top:0px;left:0px;padding:.3rem;height:45px;
text-transform: uppercase;width:100%;background-color:#333;z-index: 4;}

#bcmabar a {text-decoration: none;color:#fff;font-size:1.42rem;}
#bcmabar img {    height: 65%;
    padding: .4rem 0rem 0rem 1.4rem;
    margin: 0px;
    width: auto;}

div#hero {position:relative;background-image:url(/art-museum/images/spindleworks-website-banner.jpg);
    background-repeat: no-repeat;background-size: cover;
}

div#hero h1 {top: 5rem;
    position: absolute;
    color: #fff;
    left: 10rem;
    background-color: rgba(153, 0, 115, .73);
    font-size: 3rem;
    padding: 1rem;
}

div#hero h1 span.sub {display: block;
    font-size: 2.1rem;
    color: #fee;
    margin-left: 2rem;
    font-style: italic;
}

header nav ul {list-style-type: none;text-align:center;padding: 3px 0px;
    margin: 0px;}
header nav ul li {display:inline-block;}
header nav ul li a {    
    
    padding: .1rem .5rem;
    margin: .1rem;
    text-decoration: none;
    color: black;
}    
 header nav ul li a:hover {background-color:#fff7ff;}   

main {margin: 0rem 1rem;}

div.content {text-align:center;width:75%;margin: 1rem auto;}

span.dropcaps {
    font-family: garamond;
    float: left;
    font-size: 76px;
    font-weight: bold;
    line-height: 51px;
}

 div#homeBox {
    text-align:center;
}
 
 #homeBox div.entry {
     width:24%;
     padding:.5rem;
     display: inline-block;
     vertical-align: top;
}

div#secBox {text-align:center;}

div.entry {
    width:22%;
    padding:.5rem;
    display: inline-block;
    vertical-align: top;
}
 div.entry a img.thb {
    width:100%;border:1px solid #ccc;
}


div.info {text-align:left;}
h2 {font-size:2rem;}
span.tstone {font-size:1.14rem;}


div.ibox {padding:1rem 17rem;}
div.ibox a img.thb {width:100%;}
div.ibox a img.thb2 {width:49%;}
div.ibox a img.thb3 {width:32%;}

p.mkquote {font-size:2.15rem;margin:1rem 2.5rem;color:#555;font-family: "Caveat", cursive;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
}


div.meet {display:inline-block;width:27%;vertical-align: top;padding:0rem 1rem;text-align:center}
div.meet img {width:60%;}
div.blurb {
    padding: 60px 80px 40px;
    position: relative;
    text-align: center;
}
div.blurb p {
    font-family: "Serif";
    font-size: 35px;
    font-weight: 700px;
    text-align: center;
}



.blurb:before {
  position: absolute;
  font-family: 'Sans-Serif';
  top: 0;
  
  content:"\201C";
  font-size: 200px;
  color: rgba(0,0,0,0.1);
   
}

.blockquote::after {
    content: "";
    top: 20px;
    left: 50%;
    margin-left: -100px;
    position: absolute;
    border-bottom: 3px solid #bf0024;
    height: 3px;
    width: 200px;
}




div.bio {display:inline-block;width:67%;vertical-align: top;font-size:1.22rem;}

div.sig img {width:250px;}

footer {
    margin-top: 5.4rem;
    bottom: 0px;
    left: 0px;
    background-color: #333;
    z-index: 2;
    height: 60px;
    width:100%;
    padding: 10px 0px;
    text-align: center;
    border: 0px solid red;
    color: #fff;
}


/**** MOBILE *****/
@media screen and (max-width: 1025px) {
    div#bcmabar {
    	text-transform: none;
    }
    
    #bcmabar a {
        font-size: .95rem;
    }
    
    
    #bcmabar img {
        height: 25px;
    }
    
    div#hero h1 {
        top: 2rem;
        position: absolute;
        color: #fff;
        left: 0rem;
        background-color: rgba(153, 0, 115, .53);
        font-size: 1.2rem;
        padding: 1rem;
    }
    
    div#hero h1 span.sub {
        display: block;
        font-size: 1.1rem;
        color: #fee;
        margin-left: 2rem;
        font-style: italic;
    }
    
    header nav ul {
        list-style-type: none;
        text-align: left;
    }
    
    header nav ul li {
        display: block;
    	border-bottom: 1px solid #555;
    }
    
    div.content {
        width: 95%;
    }
    
    
    div.entry {
        width: 88%;
    }
    
    #homeBox div.entry {
        width: 88%;
        margin-bottom: 1rem;
    }  
    
    div.ibox {
        padding: 1rem 1rem;
    }
    
    div.meet {
        display: block;
        width: 100%;
    }
    
    div.blurb {
        padding: 60px 10px 40px;
    }
    
    div.bio {
        display: block;
        width: 100%;
    }
    
    
    footer {
        margin-top: 2.4rem;
	    height: auto;
    }
    
}

@media print {
  div.artist-entry {page-break-after: always;}
  
  div.meet {
    width:47%;
    }
     div.meet img {
        width:80%;
    }
    
    div.bio {
        width:47%;
    }
}