@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@800&family=Sarabun&display=swap');
* {box-sizing: border-box;margin: 0;padding: 0;}
body {font-family: 'Sarabun', sans-serif;color: #524c5a;font-size: 14px;font-weight: 500;line-height: 1.8;background-color: #0e0e0e;}
a {color: #e0d1bf;text-decoration: none;}
nav a {color:#f9f9f9;}
footer a {color: #b39879; font-size: small;}
p {margin-bottom: 1rem;}
ul {list-style: none;}
/* Main Nav */
nav {height: 3em;background: #161616;}
h1 { font-size: 3em;line-height: 1.4em;}
h2 {font-size: 2em;margin-bottom: 1rem;color: #575c5d;}
h3 {font-size: 1.5em;}
.nav {
	width: 100%;
	height: 5rem;
	position: fixed;
	top: 0;
	z-index: 1001;
	border-bottom: 1px solid #b39879;
	background: #000000;
}
.nav-links {
	display: flex;
	list-style: none;
	width: 70%;
	height: 100%;
	justify-content: flex-end;
	align-items: center;
	padding: 20px;
	float: right;
}

.nav .logo {
	float: left;
    width: 30%;
    padding: 1rem 3rem;
   
}
.nav .logo img{
    height: 3rem;
    
}  

.nav-links li {
	border-left: 2px solid #cccccc;
	padding: 0 2em;	
}

.nav-links li:first-child {
	border-left: 0;
}

.nav-links li a {
  color: #ffffff;
  text-decoration: none;
  font-size: 16px;
}
/* home page */
.intro {
	width: 100%;
    height: calc( 100vh - 5rem);
	margin-top: 5rem;
	position: relative;
	object-position: 50% 50%;
}
.mainimg {
	width: 100%;
    height:100%;
	position: absolute;
	overflow:hidden;
	object-fit: cover;
}
.mainimg img {
   min-width: 100%;
   object-fit: cover;
}
.img-prt, .img-prt2 , .img-prt3 {
	width: 60%;
	position: absolute;
    top: 35vh;
	left: 20%;
	margin: 0 auto;
	text-align: center;
}
.img-prt img {
	max-width: 80%;
	height: auto;
	}
.img-prt2 img {
	max-width: 80%;
	height: auto;
}

.img-prt3 img {
	max-width: 80%;
	height: auto;
	-webkit-filter: brightness(0) ;
    filter: brightness(0); 
}
.hand  {
	-webkit-filter: brightness(0) invert(1);
    filter: brightness(0) invert(1);
}
/* Main content */
.nextbtn {position: absolute;cursor: pointer;right: 1px;top: 40vh;background-color: #000000; width: 40px;height: 40px; text-align: center; font-size: 1.5em; line-height: 35px; border-radius: 50%;}
.prevbtn {position: absolute;cursor: pointer;left: 1px;top: 40vh;background-color: #000000; width: 40px;height: 40px; text-align: center; font-size: 1.5em; line-height: 35px; border-radius: 50%;}
.clsbtn {position: absolute;cursor: pointer;right: 1px;top: 1rem;background-color:#000000;color:#b39879;width:40px;height:40px; text-align: center; font-size: 1.5em; line-height: 35px; border-radius: 50%;}
.section {
	display: grid;
    grid-template-columns: 33% 33% 34%;
    grid-gap: 0;
    margin: 0;
	padding: 5rem 0 0 0;
}
.section.gallery {
	grid-template-columns: 30% auto auto;
	background-color:#000000;
}
 
.section.gallery .col-1-2 img { height: 85vh; /*max-width:100%*/ }
.section .col-1-2 { grid-column: span 2;}
.section.gallery .col-1-2 {overflow: hidden;height: 90vh;}

.section .col-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 1rem;
	width: min-cotent;
}
.button, button {
    width: 8rem;
    padding: 0.5rem;
    color: #f9f9f9;
    background-color:#b39879;
    border: 0;
    border-radius: 5px;
	font-family: 'Sarabun', sans-serif;
	font-size: initial;
}
.container {
	padding: 0;
	text-align: left;
	position: relative;
}
 
.three-columns {
	display: grid;
	grid-template-columns: repeat(3, 33.3%);
	grid-gap: 1rem;
	width: 94vw;
	margin-right: auto;
	margin: 2rem auto;
}
.three-columns.mini {
	width:100%; 
	padding-right: 1%;
}

.artrelative {
	text-align: center;
	position: relative
}
.circle {
	position: absolute;
    width: 15px;
    height: 15px;
    background-color: #e2231e;
    border-radius: 50%;
    margin: 5px;
    z-index: 101;
}
.sold {
	position: absolute;
    width: 60px;
    height: 35px;
	line-height:32px;
	padding: 0;
	text-align: center;
    color: #666666;
	background-color:#ffffff;
	border: 1px solid #cccccc;
    margin: 5px;
    z-index: 101;
}
  
.dark, .bio { margin: 0;  }
.paintbg  { background-image: url('/img/wc-img1.jpg');background-position:left center;}
.dark p { margin: 2rem;}
.dark h1, .dark h2  { margin: 1rem 2rem;}
.dark  { background-color: rgba(0, 0, 0, 0.82); height: 100%}
.newart { background-color: #0e0e0e; padding: 2rem 0.5rem; text-align: center;}
.taupe {	background:#f7f4f3; color: #656565; }
.gold {	background: #f9f9f9; color: #13120c; }
.textbloc{padding: 2rem 4rem; display: flex; flex-direction: column;}
.textbloc p {
	margin: 1rem 0;
	max-width:700px;
}
.textdark {
	padding: 0 4rem 2rem 4rem;
	color: #ffffff;
}
.textdark h2{
	color: #ffffff;
}
.textdark  img{
	max-width: 100%;
	height: auto;
}
  
.rel { position: relative; }
.img-gal {
	max-width: 100%;
	height: auto;
	position: sticky;
}
 
.img-MC {
	width:100%; margin: 0 auto;
}
.overtext {
	position: absolute; 
	padding: 2rem;
	color: #FFFFFF;
	bottom:0;
	width:100%;
	background: rgb(0,0,0);
	background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
}
.overtext2 {
	position: absolute; 
	text-align: center;
  	padding: 7rem 2rem 2rem 2rem;
	color: #FFFFFF;
	bottom:-5rem;
	width:100%;
	background: rgb(0,0,0);
	background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
}
.overtext img {
	 
	width:100%;
	 
}
.overtext h2 {
	color: #FFFFFF;
}
.dark p.caption, .caption { font-size: small; }
 

/* Footer */
.footlogo {width: 200px;}
footer {
	padding: 0;
	margin: 0;
	background-image: url('/img/footerBG.jpg');
	background-position: center center;
}
.links {
	border-top: 3px solid #b39879;
	padding: 1rem;
	display: flex;
	justify-content: space-around;
	background-color: rgba(247, 247, 247, 0.85);
}
.bar {
	padding: 0.6rem 8rem 2.5rem;
	margin: 0;
	background-color: #5a5f5d;
	color: #eeeeee;
	letter-spacing: 0.1em;
	text-align: center;
}

.bar-left {
	float: left;
}

.bar-right {
	float: right;
}
#addingbasket div {
    position: absolute;
    right: 0;
    top: 5rem;
    font-size: 0.8rem;
    line-height: 1rem;
    padding: 0.8rem;
    border-radius: 0 0 5px 5px;
    display: flex;
    background-color: #FFFFFF;
	border:1px solid #e3b16e;
	border-top: 0;
}
#addingbasket p {
    margin-bottom: 0;
}
#addingbasket .button { margin:0 5px; width: auto;}

/* Newsletter Form */
footer  form div {
	width: 42%; 
	padding: 0;  
	margin: 0 2% 0 0;
}
footer  input[type=text], footer  input[type=email] {
	outline: none;
	width: 100%; 
	padding: 0.5rem;
    margin: 0;
    background-color: rgba(106, 106, 106, 0.4);
	border: 0;
	border-bottom: 1px solid #b39879;
	box-sizing: border-box;  
	color:000000;
 }
footer  input[type=submit] {
	width: 10%; 
	margin: 0;
	padding: 12px;  
	background-color: #394149;
	border: 1px solid #394149;
	border-bottom: 1px solid #ffffff;
	box-sizing: border-box;  
	color:#FFFFFF;
 }
footer  label {
	position: relative;
    bottom: 0;
	transition: bottom 2s;
 }
footer div:hover label, footer input:focus label {
	bottom: 0.2em;
 }
 
footer form {
	display: flex; justify-content: space-between; min-width: 500px;
}
/*shopping cart */

	.productBox, .productBoxF {
        overflow: hidden;
		display: flex;
		justify-content: space-between;
		line-height: 1.5em;
        text-align: left;
        width: 100%;
        padding: 0.2rem;
        margin: 8px 0;
		background-color: #ffffff;
		border-bottom: 1px solid #ccccac
    }
	.productBoxF label {
    
    }
	.fixtureItem { width: 15%; text-align: right;padding: 0 1rem;}
	.fixtureItemW { width: 20%;}
	.removeItem {background-color: #e3b16e;padding: 0.2rem 0.2rem 0 0.2rem;}	
	.removeSpace {width: 2rem;}	
	#orderTotalsDisplay {width: 50%;margin-left: 35%;}
	#checkout_Buttons input[type="submit"]{float:right; margin-left: 1rem; cursor: pointer;	}
	form {max-width: 900px;}
/* Form style */
 .productBoxF div,.productBoxF label {font-size: 1rem;color: #4d4d4d;line-height: 2;}
.productBoxF label {padding: 0 1rem;width: 50%;}
.productBoxF p {  font-size: 1rem; color: #4d4d4d; padding: 0 1rem;  }
.titleinput input, .nameinput input, .halfforminput input, .forminput input, .forminput textarea, .forminput select {
    padding: 6px; line-height: 1.6rem; background-color: #fff; width: calc(100% - 10px); color: #222; border:0; margin: 5px 0; 
}
.choiceinput { padding: 1rem 0; border-bottom: 1px solid #CCCCCC;}
.titleinput { width: 12%; float: left; margin: 0;}
.nameinput { width: 44%; float: left; margin: 0;}
.halfforminput {  display: inline-block; padding: 6px 0; width: 49.5%; color: #222; margin: 5px 0;}
select {
    -webkit-appearance: none!important;
    border-radius: 0;
    background-color: #FAFAFA;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+);
    background-position: 100% center;
    background-repeat: no-repeat;
    border-style: solid;
    border-width: 1px;
    border-color: #ccc;
    padding: .5rem;
    font-size: .875rem;
    font-family: "Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;
    color: rgba(0,0,0,0.75);
    line-height: normal;
    border-radius: 0;
    height: 2.3125rem;
	width: 100%;
}
.contact form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 20px;
}

.contact form label {
  display: block;
}

.contact form p {
  margin: 0;
  position:relative;
}

.contact form .full {
  grid-column: 1 / span 2;
}

.contact form button, .contact form input, .contact textarea {
  width: 100%;
  padding: 1em;
  border: 1px solid #524c5a;
  color: #000;
  border-radius: 4px;
}

.contact form button {
  background: #f7c22b;
  color: #fff;
  border: 0;
  text-transform: uppercase;
}

.contact form button:hover,.contact form button:focus {
  background: #8f8b95;
  color: #fff;
  outline: 0;
  transition: background-color 2s ease-out;
}
.ardluck {
	display: none;
}

form input[type="submit"], .submitbutton {	background-color:#5a5f5d ; color:#FFF; border-radius:5px; border: 0;font-size: 16px; width:auto; font-family: 'Sarabun', sans-serif; cursor:pointer;}
.forminput button {width: auto;  padding: 0.5rem 1rem; cursor:pointer; margin-right: 2rem;}
form input[type="submit"]:hover, .submitbutton:hover, .socialblob:hover, .forminput button:hover { background-color:#b2a39f;}
.artworkfrm { display: flex; justify-content: space-between;}

/* Follow */
.follow {
	margin: 30px 0 30px;
	margin-left: calc(96% - 200px) ;
}
footer .follow {margin: 0;margin-left: 0 ;}
.follow .followin {display: flex;align-items: center;margin: 0;}
.follow .followin a {color: #111111;}
.follow p {margin: 1rem 0 0 0; font-size: 0.8rem;}
.socialblob {height: 40px; width: 40px;padding: 0.2em;margin: 0.5rem;display: block; border-radius: 3px; background: #ffffff;}
.socialblob img { background-repeat: no-repeat; background-position: center; background-size: cover;width: 100%;}
.socialblob .socialpad {display:block;padding: 0; line-height: 1;background-color: unset;}
.socialblob.facebook .socialpad {padding: 1px 0 0 8px;}
.socialblob.whatsapp .socialpad {padding: 1px 0 0 3px;}
.socialblob.email  .socialpad  {padding: 1px 2px;}
.sociconW {fill: #656565;}
footer .follow .followin:hover .sociconW, .socialblob:hover .sociconW {fill: #FFFFFF;}
.artSpec .follow {margin: 0; margin-left: 0; display:flex;}
.artSpec .follow p {display:none;}
.socialblob.twitter:hover{background-color: #1da1f2;}
.socialblob.facebook:hover{background-color: #4267b2;}
footer .follow .followin:hover .insta, .socialblob.insta:hover{background-color: #d4006b ;}
footer .follow .followin:hover .email, .socialblob.email:hover{background: #e84832;}
.socialblob.whatsapp:hover{background-color: #60d66a;}
/* Media */

@media screen and (min-width: 1500px) {
	body {font-size: 16px;}
}
@media screen and (min-width: 1700px) {
	body {font-size: 18px;}
}
@media screen and (max-width: 1560px) {
	.section .col-3 { display: grid;grid-template-columns: repeat(2, 1fr);grid-gap: 1rem;}
}

@media screen and (max-width: 1360px) {
	.img-prt {width: 30%;left: 35%;}
	.textbloc { padding: 2rem; }
}

@media screen and (max-width: 1100px) {
	.artworkfrm {flex-direction:column}
	.socialblob {  height: 40px;  width: 40px;  padding: 0.1em; margin: 0.2rem; }
}
@media screen and (max-width: 1000px) {
	.links { display: block; padding: 1rem 2rem}	
	.bar {padding: 0.6rem 5rem 5.5rem;}
	.line { width: 30px; height: 3px; background: #ffffff; margin: 5px;}
	nav { position: relative;z-index: 1;}
	.hamburger {position: absolute;cursor: pointer;right: 5rem;top: 50%;transform: translate(-5%, -50%);z-index: 2;}
	.nav-links {  position: fixed;
    display: block;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 8rem 0;
    background: #5a5f5d;
    height: 50vh;
    width: 100%;
    flex-direction: column;
    clip-path: circle(100px at 90% -20%);
    -webkit-clip-path: circle(60px at 90% -20%);
    transition: all 1s ease-out;
    pointer-events: none;
  }
  .nav-links.open {
    clip-path: circle(1000px at 90% -10%);
    -webkit-clip-path: circle(1000px at 90% -10%);
    pointer-events: all;
  }
  .nav-links li {
    border-left: 0;
    opacity: 0;
  }
  .nav-links li a {
    font-size: 25px;
  }
  .nav-links li:nth-child(1) {
    transition: all 0.5s ease 0.2s;
  }
  .nav-links li:nth-child(2) {
    transition: all 0.5s ease 0.4s;
  }
  .nav-links li:nth-child(3) {
    transition: all 0.5s ease 0.6s;
  }
  .nav-links li:nth-child(4) {
    transition: all 0.5s ease 0.8s;
  }
  li.fade {
    opacity: 1;
  }
  .section.gallery, .section, .footer, .contact form, .section .col-1-2, .section .col-3 {
		grid-template-columns: 1fr;
		padding: 0;
	}
	.section:first-of-type{margin-top:5rem;}
	.section .col-1-2 { padding: 1rem 2rem;}
	.textdark { padding: 2rem;}
	.top-container h1 { margin: 2rem 0 0; line-height: 1.2}
	.section-grid { margin: 0; }
	.img-prt { width: 40%;left: 30%;}
	.three-columns { grid-template-columns: repeat(2, 1fr);}
	.row > .mini { grid-template-columns: repeat(3, 1fr);}
	.img-magnifier-glass {
		width: 200px;
		height: 200px;
	}
	.artistArtLarge { width: 50%;}
}
	
@media screen and (max-width: 800px) {
	.nav .logo img { height: 2.5rem; }
	 .nav-links {
    position: fixed;
    display: block; justify-content: center;
    align-items: center;
    text-align: center; padding: 8rem 0;  background: #000000; border-bottom: 1px solid #ffffff;
    height: 90vh; width: 100%;
    flex-direction: column;
    clip-path: circle(50px at 90% -20%);
    -webkit-clip-path: circle(50px at 90% -20%);
    transition: all 1s ease-out;
    pointer-events: none;
  }
  .nav-links.open {
    clip-path: circle(1000px at 90% -10%);
    -webkit-clip-path: circle(1000px at 90% -10%);
    pointer-events: all;
  }
  .nav .logo { width: 70%; padding: 1rem;}
  .hamburger {  right: 2rem;}
 	.img-prt3 { width: 80%;left: 10%;}
	.three-columns { grid-template-columns: 1fr; }
	.artistArtLarge { width: 60%;}
	.bar-left { float: unset;}
	.section.gallery .col-1-2 img {height: 50vh;}
	.nextbtn { top: 5vh; }
}
@media screen and (max-width: 580px) {
	.img-prt3 { width: 90%;left: 5%;}
	.artistArtLarge {width: 100%;}
	.artistArtLarge img {padding: 0}
	.section.gallery .col-1-2 {width: 100%;padding: 0;}
	.carouselbloc .overtext {position: relative; padding: 0 2rem; }
	#orderTotalsDisplay {width: 100%; margin-left: 0;}
	.removeItem {padding: 0;margin-left:0.2rem}
	#addingbasket p {display: none;}
	#addingbasket div {padding: 0.1rem;}
	footer form {flex-direction: column;min-width: 1px;}
	footer form div {width: 96%;margin: 0.2rem 0;}
}
@media screen and (max-width: 420px) {
	.img-prt {width: 70%; left: 15%;}
	.hamburger { right: 1.2rem;}
}
@media screen and (max-width: 380px){
	.nav .logo img { height: 2rem;}
	.nav .logo   { padding: 1.2rem 1rem; }
}