/* For custom styles created by Guy or Connie */


#footer {
text-align: center;
}

.artContainer img {
 display: block;
 margin-left: auto;
 margin-right: auto;	
 margin-bottom: 20px;
 max-width: 1000px;
 height: auto;
}

.commissionContainer img {
 display: block;
 margin-left: auto;
 margin-right: auto;	
 margin-bottom: 20px;
 max-width: 1200px;
 height: auto;
}

.artThumb  {
	margin-right:10px; 
	margin-bottom: 10px;
	width: 230px; /* word-wrap below WILL NOT WORK WITHOUT ASSIGNING A WIDTH TO THE ENCLOSING DIV */
	word-wrap: break-word;
}

.thumbEnvelope {width:100%;}
.thumbLeft {float:left;margin-right:0px;}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 65%;
  margin-bottom: 20px;
}




/*nav bar*/

ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  /*font-size: .8em; reduced size on 4/9/21*/
}

ul.topnav li {float: left;margin-bottom:0;}

ul.topnav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 6px 12px; /*right padding used to be 16px*/
  text-decoration: none;
  
}

ul.topnav li a:hover:not(.active) {background-color: #111;}

ul.topnav li a.active {background-color: #ccc;color:black;}

ul.topnav li.right {float: right;}

@media screen and (max-width: 600px) {
  ul.topnav li.right, 
  ul.topnav li {float: none;}
/*  .thumbLeft img {width: 33%} */
}

/* Thumb Solution */


/* Create six equal columns that sits next to each other */
.column-flex {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  /*flex: 16.667%;*/
  margin: 0;
  padding: 0;
    box-sizing: border-box;
}

/* object-fit: contain tag works fine in Chrome and Firefox with "height: auto"; Safari requires "height: 100%" to work*/
.column-flex img {
  display: block;
  box-sizing: border-box;
  margin-top: 0px;
  margin-bottom:0px;
  vertical-align: middle;
  object-fit: contain;
  max-width: 16.667%; /* moved to img tag from .column-flex for Firefox compatibility */
}

/* object-fit: contain tag works fine in Chrome and Firefox with "height: auto"; Safari requires "height: 100%" to work*/
.column-flex img.banner {
  display: block;
  box-sizing: border-box;
  margin-top: 0px;
  vertical-align: middle;
  object-fit: contain;
  max-width: 100%; /* moved to img tag from .column-flex for Firefox compatibility */
}




/* Responsive layout - makes a two column-layout instead of four columns 
@media (max-width: 800px) {
  .column-flex {
    flex: 50%;
    max-width: 50%;
  }
} */

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other 
@media (max-width: 600px) {
  .column-flex {
    flex: 100%;
    max-width: 100%;
  }
}*/