/* needs margin set to zero. */
.figureNoMarginRelative {
    position: relative;
    margin: 0px;
    padding: 0px;
}



.navElement1 {
    margin: 8px;
}

 .flexBoxHeader {
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  


 
/* Smartphones */
@media screen and (max-width: 480px)
{
	.flexBoxMargin {
		display:none;
		flex-direction: row;
		flex-wrap: wrap;
	}
	
	.flexWrapper {
		display:flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: left;
	}
	
	.flexBoxItemContainer {
		display:flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: left;
	  }

	.artIndexTabelMainCell {
		border-bottom: 1px solid black;
		padding: 0.5em;
	}
	
	.artIndexTableMobile {
		display:flex;
	}

	.artIndexTableDesktop {
		display:none;
	}
	
	table {
		border-spacing: 0px 1px;
		align-self:flex-start;
	}

	th {
		padding: 0.2em;
		text-transform: uppercase;
		border-top: 1px solid black;
		border-bottom: 1px solid black;
		text-align: left;
	}

	td {
		padding: 0.3em;
		vertical-align: top;
		text-align: left;
	}

}


@media screen  and (min-width: 481px) and (max-width: 767px)
{
	.flexBoxMargin {
		display:none;
		flex-direction: row;
		flex-wrap: wrap;
	}
	
	.flexWrapper {
		display:flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: left;
	}
	
	.flexBoxItemContainer {
		display:flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: left;
	  }

	.artIndexTabelMainCell {
		border-bottom: 1px solid black;
		padding: 0.5em;
	}
	
	.artIndexTableMobile {
		display:flex;
	}

	.artIndexTableDesktop {
		display:none;
	}
	
	table {
		border-spacing: 0px 1px;
		align-self:flex-start;
	}

	th {
		padding: 0.2em;
		text-transform: uppercase;
		border-top: 1px solid black;
		border-bottom: 1px solid black;
		text-align: left;
	}

	td {
		padding: 0.3em;
		vertical-align: top;
		text-align: left;
	}

}



/* Tablets */
@media screen and (min-width: 768px) and (max-width: 960px)
{
	.flexBoxMargin {
		display:flex;
		flex-direction: row;
		flex-wrap: wrap;
		min-width: 0%;
	}
	
	.flexWrapper {
		display:flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
	}	
	
	.flexBoxItemContainer {
		display:flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
	  }
	  
	.artIndexTableMobile {
		display:none;
	}

	.artIndexTableDesktop {
		display:flex;
	}	  
	
	
	table {
		border-spacing: 0px 5px;
		align-self:flex-start;
	}


	th {
		padding: 0.5em;
		text-transform: uppercase;
		border-top: 1px solid black;
		border-bottom: 1px solid black;
		text-align: center;
	}

	td {
		padding: 0.3em;
		vertical-align: top;
		text-align: top;
	}
	td:nth-child(2){
		font-weight: bold;
	}
	
	tr:nth-child(even){background: lightgray;}
	tr:hover {
			background: cornflowerblue;
			color: white;
	}
	
	
}

/* Desktop */
@media screen and (min-width: 960px)
{
	.flexBoxMargin {
		display:flex;
		flex-direction: row;
		flex-wrap: wrap;
		min-width: 2%;
	}
	
	.flexWrapper {
		display:flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
	}	
	
	.artIndexTableMobile {
		display:none;
	}

	.artIndexTableDesktop {
		display:flex;
	}	
	
	table {
		border-spacing: 0px 10px;
		align-self:flex-start;
	}


	th {
		padding: 0.5em;
		text-transform: uppercase;
		border-top: 1px solid black;
		border-bottom: 1px solid black;
		text-align: left;
	}

	td {
		padding: 0.3em;
		vertical-align: top;
		text-align: left;
	}
	td:nth-child(2){
		font-weight: bold;
	}
	
	tr:nth-child(even){background: lightgray;}
	tr:hover {
			background: cornflowerblue;
			color: white;
	}
	
	
}