/* reset styles */
html {
    font-size: 16px;
 }
a, article, body, div, footer, header, h1, h2, nav, p {
    border: 0;
    padding: 0;
    margin: 0;
}
img {
   max-width: 100%;
}

/* Whole page container */
.container {
   max-width: 100%;
   margin: 0 auto; /*centralise content*/
   position: relative;
}
header h1.brandlogo {  
   padding-left: 2em;
   padding-top: 0.3em;
   float: left;
}

/*Contact Navigation*/
nav.contactnavigation p {
   display: inline-block;
   margin: 0.2em 0.5em;
}
nav.contactnavigation {
   text-align: right;
   padding: 70px 140px;
   margin-bottom: 0.1em;
}
nav.contactnavigation .cart {
   padding-left: 3em;
}
.cart a:link, .cart a:visited {
   color: #2e4153;
}

 /* Body */
body {
    margin: 0 auto;
    font-family: Arial, Helvetica, sans-serif;
 }
p {
    font-size: 1.3em;
    line-height: 1.6em;
 }

 /* Site navigation bar */
nav.sitenavigation {
    color: #fff5e8;
    text-align: center;
    background-color:rgb(35, 124, 136);
    padding: 0.8em;
    position: sticky;
    top: 0;
}
nav.sitenavigation p {
    margin: 0.3em 3.5em;
    display: inline-block;
    font-family: 'Nanum Gothic', sans-serif;
    font-size: 1.2em;
    letter-spacing: 0.1em;
}
nav.sitenavigation a:link {
   text-decoration: none;
   color: #fff5e8;
}
nav.sitenavigation a:visited {
   color: #fff5e8;
}
nav.sitenavigation a:hover, nav.sitenavigation a:focus {
   color: #fff5e8;
   font-weight: bold;
}

/*Preview of Artwork*/
aside div{ 
   max-width: 100%;
   max-height: 601px;
}
.lake {
   float: left;
   padding-right: 0.8em;
}
.breakfastplate {
   float: left;
   padding-right: 0.8em;
   padding-bottom: 0.1em;
}
.viewmorebutton {
   width: 415px;
   margin: 0 auto;
   padding: 0;
   text-align: center;
   float: left;
   overflow: auto;
}
.viewmorebutton button {
   margin-right: 0.5em;
   float: right;
   background-color: rgb(47, 93, 105);
   width: 400px;
   height: 140px;
   font-size: 25px;
   word-spacing: 1em;
   letter-spacing: 0.2em;
   text-shadow: 2px -1px 2px rgb(12, 30, 46);
}
.sunglassesportrait {
   overflow: auto;
   float: inherit;
}

 /* Main content */
.index {
    background-color: #ffffff;
    float: left;
    width: 55%;
    /*margin: 0.8em;*/
    clear: both;
    box-sizing: border-box;
 }

 /*Left column*/
.aboutartist {
   font-family: 'Nanum Gothic', sans-serif;
   font-size: 13px;
   color: #fff5e8;
   background-color: rgb(35, 124, 136);
   padding: 20px;
   height: 335px;
   overflow: auto;
}
.headingartist {
   font-size: 25px;
   letter-spacing: 0.5em;
   text-shadow: 2px -1px 2px rgb(12, 30, 46);
}
.artistcontent {
   font-size: 18px;
   padding-top: 1em;
   text-shadow: 1px -1px 1px rgb(12, 30, 46);
}
.artistbutton button {
   margin-top: 1.4em;
   margin-right: 0.5em;
   float: right;
   background-color: rgb(184, 151, 109);
   width: 220px;
   padding: 15px;
}

 /*Right column*/
.cause {
   background-color: rgb(255, 255, 255);
   width: 45%;
   float: right;
   box-sizing: border-box;
}
.aboutcause {
   font-family: 'Nanum Gothic', sans-serif;
   color: #ffffff;
   background-color: rgb(184, 151, 109);
   overflow: auto;
   height: 335px;
   padding: 20px;
}
.headingcause {
   font-size: 25px;
   letter-spacing: 0.5em;
   text-shadow: 2px -1px 2px rgb(0, 0, 0);
}
.causecontent {
   font-size: 15px;
   padding-top: 1em;
   color: #34180f;
   font-weight: bold;
}
.causepreviewbutton button {
   margin-top: 2em;
   margin-right: 0.5em;
   float: right;
   background-color: rgb(35, 124, 136);
   width: 210px;
   padding: 15px;
}

 /* Footer section */
footer {
   color: #000000;
   background-color: #ffffff;
   clear: both;
}
footer div {
   font-size: 12px;
    margin: 4.2em;
    font-family: Arial, Helvetica, sans-serif;
    float: left;
    background-color: #ffffff;
}
footer div a:link {
   text-decoration: underline;
   color: #000000;
}
footer div p {
   margin-top: -1em;
   padding-left: 1em;
   float: right;
}
footer nav.contactnavigation {
   text-align: right;
   padding: 35px;
   margin-left: 200px;
   background-color: #ffffff;
   display: inline-block;
}

/*ARTWORKS.html START*/
.selection a:link {
   text-decoration: none;
   color: #fff5e8;
}
.selection a:visited {
   color: #fff5e8;
}
.selection a:hover, nav.sitenavigation a:focus {
   color: #fff5e8;
   font-weight: bold;
}
.graphite a:hover, .graphite a:focus, .charcoal a:hover, .charcoal a:focus,.ink a:hover, .ink a:focus {
   color: rgb(184, 151, 109);
   font-weight: bold;
}
.colouredpencils a:hover, .colouredpencils a:focus, .acrylic a:hover, .acrylic a:focus, .mixedmedia a:hover, .mixedmedia a:focus {
   color: rgb(53, 86, 99);
   font-weight: bold;
}
.graphite {
   border: 2px solid #fff5e8;
   width: 420px;
   height: 200px;
   float: left;
   padding-top: 80px;
   box-sizing: border-box;
   font-family: 'Nanum Gothic', sans-serif;
   font-size: 1.5em;
   text-align: center;
   letter-spacing: 0.3em;
   background-color: rgb(53, 86, 99);
   text-shadow: 2px -1px 2px rgb(12, 30, 46);
}
.colouredpencils {
   border: 2px solid #fff5e8;
   border-top: 0;
   width: 420px;
   height: 200px;
   float: left;
   padding-top: 80px;
   box-sizing: border-box;
   font-family: 'Nanum Gothic', sans-serif;
   font-size: 1.5em;
   text-align: center;
   letter-spacing: 0.3em;
   background-color: rgb(184, 151, 109);
   text-shadow: 2px -1px 2px rgb(12, 30, 46);
}
.acrylic {
   float: left;
   width: 423px;
   height: 200px;
   border-top: 2px solid #fff5e8;
   border-bottom: 2px solid #fff5e8;
   padding-top: 80px;
   box-sizing: border-box;
   font-family: 'Nanum Gothic', sans-serif;
   font-size: 1.5em;
   text-align: center;
   letter-spacing: 0.3em;
   background-color: rgb(184, 151, 109);
   text-shadow: 2px -1px 2px rgb(12, 30, 46);  
}
.charcoal {
   float: left;
   width: 423px;
   height: 200px;
   border-bottom: 2px solid #fff5e8;
   padding-top: 80px;
   box-sizing: border-box;
   font-family: 'Nanum Gothic', sans-serif;
   font-size: 1.5em;
   text-align: center;
   letter-spacing: 0.3em;
   background-color: rgb(53, 86, 99);
   text-shadow: 2px -1px 2px rgb(12, 30, 46);
}
.ink {
   border: 2px solid #fff5e8;
   width: 420px;
   height: 200px;
   float: right;
   padding-top: 80px;
   box-sizing: border-box;
   font-family: 'Nanum Gothic', sans-serif;
   font-size: 1.5em;
   text-align: center;
   letter-spacing: 0.3em;
   background-color: rgb(53, 86, 99);
   text-shadow: 2px -1px 2px rgb(12, 30, 46);
}
.mixedmedia {
   border: 2px solid #fff5e8;
   border-top: 0;
   width: 420px;
   height: 200px;
   float: right;
   padding-top: 80px;
   box-sizing: border-box;
   font-family: 'Nanum Gothic', sans-serif;
   font-size: 1.5em;
   text-align: center;
   letter-spacing: 0.3em;
   background-color: rgb(184, 151, 109);
   text-shadow: 2px -1px 2px rgb(12, 30, 46);
}
.addtocart button {
   margin-top: -6em;
   margin-right: 3em;
   float: right;
}
.artworktitle {
   font-weight: bold;
   font-size: 1.8em;
   font-family: 'Nanum Gothic', sans-serif;
   color: #2e4153
}

/*Artworks Display*/
#graphitesection, #colouredpencilssection, #acrylicsection, #charcoalsection, #inksection, #mixedmediasection {
   clear: both;
   width: 1263px;
}
.g1, .g2, .cp1, .cp2, .a1, .c1, .c2, .i1, .mm1 {
   float: left;
   margin: 3em;
}
.c2container, .cp2container,.g2container {
   clear: both;
}
#graphitesection h2, #colouredpencilssection h2, #acrylicsection h2, #charcoalsection h2, #inksection h2, #mixedmediasection h2 {
   font-family: 'Nanum Gothic', sans-serif;
   font-size: 25px;
   letter-spacing: 0.5em;
   text-shadow: 2px -1px 2px rgb(12, 30, 46);
   color: rgb(33, 95, 114);
   font-weight: normal;
   padding: 40px;
}
#graphitesection p, #colouredpencilssection p, #acrylicsection p, #charcoalsection p, #inksection p, #mixedmediasection p   {
   margin: 2em;
   padding: 1em;
   overflow: auto;
   font-size: 18px;
}
.g2container, .cp2container, .c2container {
   padding-top: 4em;
}

/*Note*/
.purchaseconditions {
   background-color: rgb(35, 124, 136);
   clear: both;
   padding: 4em;
   color: #fff5e8;
   font-family: 'Nanum Gothic', sans-serif;
   font-size: 12px;
}
/*END*/

/*about.html START*/
#articleabout {
   margin: 0 auto;
   padding: 1.4em;
   background-color: #f8fbfc;
}
#articleabout div {
   background-color: rgb(184, 151, 109);
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 3% 2em;
   overflow: auto;
   color: #ffffff;
   font-family: 'Nanum Gothic', sans-serif;
}
#articleabout figure {
   max-width: 100%;
   float: left;
   margin-left: 1em;
   margin-top: 6em;
   margin-bottom: 5em;
}
p.selfportrait {
   border: 2px solid #fff5e8;
   width: 300px; 
   height: 370px;
   box-shadow: 3px 5px 5px 0 rgb(77, 64, 47);
}
article figcaption {
   text-align: right;
   font-size: 0.8em;
   color: #ffffff;
   padding-top: 0.6em;
   font-family: 'Nanum Gothic', sans-serif;
}
article p.artistbio {
  font-size: 1em;
  font-weight: bold;
  color: #3d332b;
  font-family: 'Nanum Gothic', sans-serif;
}
#articleabout h2{
   font-size: 25px;
   letter-spacing: 0.3em;
   text-shadow: 2px -1px 2px rgb(41, 30, 16);
   padding: 1.5em;
   padding-bottom: 0.8em;
}
article p.causebio {
   font-size: 1.1em;
   color: #3d332b;
   font-weight: bold;
   font-family: 'Nanum Gothic', sans-serif;
   padding: 1.8em;
 }
#articleaboutcause {
   margin: 0 auto;
   padding: 0 1.4em;
   background-color: #f8fbfc;
}
#articleaboutcause div {
   background-color: rgb(184, 151, 109);
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 3% 1em;
   overflow: auto;
   color: #ffffff;
   font-family: 'Nanum Gothic', sans-serif;
}
#articleaboutcause h2{
   font-size: 25px;
   letter-spacing: 0.3em;
   text-shadow: 2px -1px 2px rgb(41, 30, 16);
   padding: 1.8em;
   padding-bottom: 0.8em;
}
.causebutton button {
   float: right;
}
/*END*/

/*Contact.html*/
.fbandinsta {
   margin: 0 auto;
   padding: 1.4em;
   background-color: #f8fbfc;
}
.fbandinsta div {
   background-color: rgb(184, 151, 109);
   max-width: 965px;
   margin: 0 auto;
   padding: 0 3% 1em;
   overflow: auto;
   color: #ffffff;
   font-family: 'Nanum Gothic', sans-serif;
   box-shadow:  3px 5px 5px 0 rgb(112, 97, 78);

}
.fbandinsta h2{
   font-size: 25px;
   letter-spacing: 0.3em;
   text-shadow: 2px -1px 2px rgb(41, 30, 16);
   padding: 1.8em;
   padding-bottom: 0.8em;
}
/*BUTTONS*/
.button {
   border-radius: 4px;
   background-color: rgb(35, 124, 136);
   border: none;
   color: #FFFFFF;
   text-align: center;
   font-size: 18px;
   padding: 20px;
   width: 250px;
   cursor: pointer;
   margin: 5px;
   margin-left: 40em;
   font-family: 'Nanum Gothic', sans-serif;
   box-shadow:  3px 5px 5px 0 rgb(112, 97, 78);
 }
 .button a:link {
   color: #ffffff;
   text-decoration: none;
}
 .button a:visited {
    color: #ffffff;
    text-decoration: none;
 }
 .button:hover {
   background-color: rgb(21, 64, 70);
 }
 
/*CONTACT FORM*/
body {font-family: 'Nanum Gothic', sans-serif}

input[type=text], select, textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
}

input[type=submit] {
    background-color: #2e4153;
    color: rgb(255, 255, 255);
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

input[type=submit]:hover {
    background-color: #2e4153;
}

.contactform {
    border-radius: 5px;
    background-color: rgb(35, 124, 136);
    padding: 20px;
    max-width: 1000px;
    margin: 0 auto;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 1px -1px 1px rgb(41, 30, 16);
    letter-spacing: 0.2em;
}

.contactform h2 {
   padding-bottom: 0.8em;
}
/*END*/