@font-face 
{
  font-family: "MarkerFelt";
  src: url('../fonts/MarkerFeltBC.otf') format('opentype');
}

@font-face
{
	font-family: "Helvetica Neue Light";
	src: url('../fonts/HelveticaNeue.ttf') format('truetype');
	font-weight: light;
	font-style: regular;
}

@font-face
{
	font-family: "Helvetica Neue Light";
	src: url('../fonts/HelveticaNeue.ttf') format('truetype');
	font-weight: light;
	font-style: italic;
}

:root {
/*  --bc-brown: #411300;*/
	--bc-brown: rgb(69, 40, 0);
  --bc-brown-fade: #BF7C60;
  --bc-red: #E71212;
  	cursor: grab;
}

.italic {}

body {
	font-family: "MarkerFelt", "Times", "Times New Roman", serif;
	font-size: 45px;
	/*	font-size: 3vw;*/
	line-height: 1.5;
	color: var(--bc-brown);
}

.dot {
	font-size: 60px;
/*	font-size: 4.5vw;*/
	line-height: .1;
}

.sibling {
	margin-right: -20px;
}

.group {
	font-size: 40px;
}

.gallery {
/*	display: flex;
	flex-wrap: wrap;*/
	justify-content: space-between;
	align-content: bottom;
}

.artimage {
	display: table;
  margin: 0;
	margin-bottom: .5em;
}

.caption {
	display: table-caption;
  caption-side: bottom;
}

img {
	display: block;
	max-width: 100%;
	width: auto;
	height: auto;
	max-height: 100vh;
/*	max-width: 100%;*/
/*	max-height: 80vh;*/
}

.index {
	display: grid;
	cursor: grab;
/*	font-variant-numeric: tabular-nums;*/
/*	text-transform: full-width;*/
	width: 100%;
  grid-template-columns: repeat(13, 1fr);
}


a  {
	text-decoration: none;
	color: var(--bc-brown);
}

a:visited {
}

a:hover {
/*	color: var(--bc-brown-fade);*/
	text-shadow: rgb(0, 0, 0) 1px 1px 30px;
}

#active {
	text-shadow: rgb(0, 0, 0) 1px 1px 25px;
/*	color: white;*/
}


em {
	font-family: "HelveticaNeue-Lightitalic", "Helvetica Neue Light Italic", "Helvetica Neue", 
  Helvetica, Arial, sans-serif;
}

p {
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", 
  Helvetica, Arial, sans-serif;
	margin-top: 0px;
	margin-bottom: 0px;
}

footer, header {
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", 
  Helvetica, Arial, sans-serif;
  font-size: 1rem;
  text-transform: uppercase;	
  letter-spacing: .025em;
  display: flex;
	justify-content: center;
}

/*#homefooter {
	width: 100vw;
	position: absolute;
	bottom: 24px;
}
*/

#homefooter {
	margin-top: 20px;
}

.artworktext a {
	text-decoration: underline;
}

.artworktext {
	margin-bottom: .3em;
	margin-top: 30px;
}


.caption, .artworktext {
	font-size: 14px;
	line-height: 1.2;
	letter-spacing: 1px;
	word-spacing: .25px;
}


#top {
	margin-top: 5vh;
	display: block;
	width: 100%;
	text-align: center;
}


/* this is for double image */
/*@media only screen and (min-width: 1200px) {
	.artimage {
		display: block;
		max-width: 49.5%;
	}
	.caption {
		display: block;
	}

	.artworktext {
		max-width: 49.5%;
	}
}*/

@media only screen and (max-width: 700px) {
  body {
    font-size: 5vh;
  }

  .dot {
		font-size: 7vh;
		line-height: .1;
	}

	.sibling {
		line-height: -5;
	}

  .caption, .artworktext, header, footer {
		font-size: 14px;
	}
}




.grid-0 {
		grid-column: 1 / span 1;
}

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

.grid-2 {
	grid-column: 3 / span 1;
}

.grid-3 {
	grid-column: 4 / span 1;
}

.grid-4 {
	grid-column: 5 / span 1;
}

.grid-5 {
	grid-column: 6 / span 1;
}

.grid-6 {
	grid-column: 7 / span 1;
}

.grid-7 {
	grid-column: 8 / span 1;
}

.grid-8 {
	grid-column: 9 / span 1;
}

.grid-9 {
	grid-column: 10 / span 1;
}

.grid-10 {
	grid-column: 11 / span 1;
}

.grid-11 {
	grid-column: 12 / span 1;
}

.grid-12 {
	grid-column: 13 / span 1;
}