body {
	font-size: 16px;
	font-family: Lato;
	color:#000000;
	margin-bottom:82px; 
}

H2, h2{
	font-size: 18px;
	color:#000000;
}

.child_record {
	font-size: 100%;
	color:#000000;
	clear:both;
	width:100%;
	padding:1% 5% 1% 5%;
	text-align:left;
}

.print_record {
	font-size: 120%;
	color:#000000;
	width:100%;
	padding:1% 5% 1% 5%;
	text-align:left;
}

.title{
	font-size:140%;
	clear:both;
	width:100%;
	padding:2% 1% 1% 1%;
	text-align:center;
	color:#000000;
}

.text{
	text-align:justify;
	clear:both;
	font-size: 120%;
	padding:2% 3% 1% 3%;
	color:#000000;
}

.text_column{
	text-align:left;
	clear:both;
	font-size: 120%;
	color:#000000;
	padding:3% 1% 3% 1%;
}

.text_small{
	text-align:justify;
	clear:both;
	font-size: 90%;
	padding:2% 3% 1% 3%;
	color:#000000;
}

.comment{
	text-align:justify;
	clear:both;
	font-size:130%;
	clear:both;
	padding:2% 6% 1% 6%;
	font-style:italic;
}

.comment_column{
	text-align:left;
	clear:both;
	font-size:120%;
	padding:3% 1% 3% 1%;
	font-style:italic;
}

.legend_num{
	float:left;
	padding:0% 1% 0% 0%;
}

.legend_text{
	float:left;
	font-style:normal;
	min-width:85%;
}

.legend{
	font-style:italic;
	padding:0% 2%;"
}

.fl_right{
	float:right;
}

.legend_num_ital{
	float:left;
	font-style:italic;
	padding:0% 1% 0% 0%;
}
.legend_text_ital{
	float:left;
	font-style:italic;
	min-width:85%;
}

.browseMenuContent{
	font-size:120%;
}


/* changed here */
.bResultItemText div{
	font-size:120%;
	padding:5px 10px 5px 10px;
}


/* ----------------------------------------- */
/* navbar - browse menu */
/* ----------------------------------------- */
.filterMenuFacetList {
	font-size:120%;
	padding-bottom:10px;
	/*float:left;*/
	padding-top:10px;
	font-family:Lato;
}


/* changed here */
.filterMenuFacetList li a{
    color: #666;
    cursor: pointer;
    font-size: 100%;
    line-height: 16px;
    position: relative;
    text-decoration: none;
}	

/* changed here */
.filterbylabel {
	color: #666;
    font-size: 100%;
    padding-bottom: 3px;
    padding-left: 4px;
}

ul.browseMenuFacetList > li div{
	font-size:120%;
	background-color:#c9c9c9;
	color:#FFF;
	font-weight:bold;
}
div.browseFacetItem{
   background-color:#f5f5f5;
   border-left:4px solid #fff;
   border-top:2px solid #fff;
   border-bottom:2px solid #fff;
   height: auto;
   padding-top:3px;
   font-size:120%;
}

/* changed here */
div.browseFacetItem a{
  font-size:100%;
}

/* changed here */
.browseHeadernav{
	font-size:100%;
	padding:5px;
	border-right: 3px solid #fff;
	letter-spacing:1px;
}

div.browseMenuBrowseSearch input {
	font-size: 100%;
}

.browseMenuBrowseSearch .form-control, .browseMenuBrowseSearch .form-control:active, .browseMenuBrowseSearch .form-control:focus{
	background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    color: #555555;
    display: block;
    font-size: 100%;
    height: 24px;
    line-height: 1.42857;
    padding: 6px 12px;
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
    vertical-align: middle;
    width: 100%;
}
	
.filterMenuFacetList .btn-default a{
	color:#666;
	font-size:100%;
}

/* changed here */
@media (min-width: 992px) {
	.nav > li.dropdown > a.icon {
		font-size:100%;
	}
	.nav > li > a, .nav > li > a:hover, .nav > li > a:focus{
		font-size:100%;
	}
}

/*
https://developer.mozilla.org/en-US/docs/Learn/CSS/Howto/Fill_a_box_with_an_image 
https://stackoverflow.com/questions/14142378/how-can-i-fill-a-div-with-an-image-while-keeping-it-proportional
*/

.wrapper {
  width: 20%;
  aspect-ratio: 1/1;
  display: flex;
  gap: 20px;
  float:left;
  border: 2px solid lightgray;
  justify-content: center;
  align-items: flex-start;
  overflow: hidden
}

.box {
  border: 3px solid white;
}

.box img {
  width: 100%;
  height: 100%;
}

.box1 img {
  object-fit: cover;
}

.box2 img {
  object-fit: contain;
}

.box3 img {
  object-fit: fill;
}

.box4 img {
  object-fit: scale-down;
}


/* ---------------------------------------------------------- */
/* Detail - objects - capitalize states and impression titles */
/* ---------------------------------------------------------- */
/* https://stackoverflow.com/questions/5577364/make-the-first-character-uppercase-in-css */
.m_title {
  display: inline-block; /* Thanks to Fanky (https://stackoverflow.com/users/2095642/fanky) */
}

.m_title::first-letter {
  text-transform: uppercase
}


.l_title {
  display: inline-block; /* Thanks to Fanky (https://stackoverflow.com/users/2095642/fanky) */
}

.l_title::first-letter {
  text-transform: lowercase
}