/* Tags */

body {
	background-color:#fff;
}

footer {
	text-align:right;
	font-size: small;
	margin-top:5rem;	
	margin-right:2rem;
	margin-bottom:2rem;	
}

footer ul {
	display: inline;
}

footer ul li {
	list-style-type: none;
	display: inline;	
}

footer ul li::after {
	content: " / ";
}

footer ul li:last-child::after {
	content: "";
}

img {
	border: 1px solid #666;
	image-rendering: optimizequality !important;
	padding:10px;
}

/* IDs */

#orthis-random {
	display:none;
	color:#666;
	position: absolute;
	top: .8rem;
	right: 1.5rem;
	z-index:5000;	
}

#shortcuts {
	display:none;
}

#similar-wrapper {
	display: grid;
	justify-content: center;
	grid-template-columns: 150px 150px;
}

#orthis-random {
	display:none;
}

#orthis-similar {
	display:none;
}

#orthis-similar:before {
	margin-top:2rem !important;	
	content: "Here are some images which are \"similar\" to the one you are looking at, for some definition of similar. Which is to say a whole series of \"robot eyes\" have been used to generate something called vector embeddings for each image (and yes \"based on what?\" is the evergreen question) and then those embeddings are grouped by their math-y similarity. So, you know, the same but different.";
	font-size: small;
	text-align:left;
	color: #666;
	margin-bottom:1rem !important;
	max-width: 275px;
	display: block;
	margin:0 auto;
}

.similar-image {
	margin: 10px;
}

.similar-image img {
	height: 125px;
	width: 125px;
}

/* Classes */

.breadcrumbs {
	color:#555;
	margin:.5rem;
	padding:0px;
	font-size:small;
}

.breadcrumbs li {
	display:inline;
}

.breadcrumbs li:before {
	content: "|";
}

.breadcrumbs li:first-child::before {
	content: "";
}

.container {
	max-width: none !important;
}

.hey-look {
	font-weight: 500;
	color:#777;
}

.landing {
	color:#555;
	margin:.5rem;
	padding:0px;
	font-size:small;
	column-count: 5;
}

.landing dt {
	display:inline;
}

.landing dd {
	display:inline;
}

.landing dd:before {
	content: " – ";
}

.landing dd:after {
	content: "";
	display:block;
	margin-bottom:.5rem;
}

.landing dd:last-child:after {
	content: "";
}

.leaflet-control-attribution {
	display: none !important;
}

.leaflet-tile {
	border: none !important;
	padding: 0px !important;
}

.orthis-bookends {
	margin:0px;
	padding:0px;
	margin-top:1rem;
}

.orthis-bookends-img {
	max-height:125px;
	max-width:125px;
	border:3px solid #000;
	margin:.5rem;
}

.orthis-bookends-next {
	display:inline;
}

.orthis-bookends-previous {
	display:inline;
}

.orthis-button {
	height: 36px;
	width: 36px;
	background-size: 28px 28px;
	background-repeat: no-repeat;
	background-color: #fff !important;
	border: none !important;	
	
}

.orthis-button:hover {
	background-color: #fff !important;
	border-color: #fff !important;	
}

.orthis-caption {
	font-size:small;
	font-style:italic;
	margin-top:1rem;
	margin-bottom:1rem;
}

.orthis-details {
	width: 70%;
	max-width: 70%;
	overflow:scroll;
	margin: 0 auto;
	margin-top:1.5rem;
}


.orthis-image {
	text-align:center;
}

.orthis-list{
	text-align:center;
	margin-top:2rem;
}

.orthis-list-image{
	margin:.5rem;
	display:inline-block;
}

.orthis-list-image {
	min-height: 270px;
	min-width: 270px;
	background-position:center;
	background-repeat: no-repeat;
	background-size: 270px 270px;
	image-quality:crisp-edges !important;
}

.orthis-list-image img {
	max-height: 400px;
	max-width: 270px;
	image-rendering: crisp-edges !important;
}

.orthis-loading {
	position: absolute;
	top:43%;
	width:100%;
	text-align:center;
	background-color:#fff;
	opacity:.9;
	padding:1rem;
	display:none;
}

.orthis-loading-text {
	font-size:small;
	font-style:italic;
	opacity:1 !important;
}

.orthis-map {
	background-color:#fff;
}

.orthis-meta {
	display:block;
	font-size:small;
	font-style:italic;
	line-height:1.3rem;
	margin-top:1rem;
	color:#999;
	text-align:center;
}

.orthis-picture-default {
	// display:none;
}

.orthis-static {
	position: relative;
	min-height:270px;
	min-width:270px;
	justify-content:center;
	margin: 0 auto;
	background-position:center;
	background-repeat: no-repeat;
}

.orthis-stub {
	position: relative;
}

.orthis-tiles {
	display:none;
	background-color:#fff;
	border:10px solid #000;
	margin: 0 auto;
}

.orthis-title:after {
	content: '"';
}

.orthis-title:before {
	content: '"';
}

.orthis-toggle {
	position: absolute;
	top: .8rem;
	right: 2.75rem;
	z-index:5000;
}

.orthis-toggle-tiles {
	display:none;
	background-image: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjMDAwMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNzMuMjM5IDg2LjczNCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNzMuMjM5IDg2LjczNCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PGc+PHBhdGggZD0iTTcyLjA2Nyw3OS45MDVMNTguMTY1LDY1LjkwOVYwSDB2NzEuNDk5aDUyLjQ0MmwxMy45NzEsMTQuMDYzYzEuNTYyLDEuNTYyLDQuMDk1LDEuNTYyLDUuNjU0LDAuMDAxICAgQzczLjYzLDg0LjAwMSw3My42Myw4MS40NjgsNzIuMDY3LDc5LjkwNXogTTU1LjE2Nyw2Mi44OTNsLTcuODgxLTcuOTM1YzUuOTU4LTguNjIxLDUuMTA0LTIwLjUyNC0yLjU2OS0yOC4yMDEgICBjLTguNjQyLTguNjQtMjIuNjQ2LTguNjQtMzEuMjg5LTAuMDAxYy04LjY0LDguNjQ1LTguNjQsMjIuNjQ4LDAsMzEuMjg5YzcuNjc3LDcuNjc3LDE5LjU3OSw4LjUyOCwyOC4yMDEsMi41NjlsNy44MzQsNy44ODZIMi45OTkgICBWM2g1Mi4xNjhWNjIuODkzeiBNNDAuNDc2LDUzLjgwNWMtNi4zMDksNi4yODQtMTYuNDk4LDYuMjg0LTIyLjgwNywwQzExLjM4NSw0Ny40OTYsMTEuMzg1LDM3LjMwOSwxNy42NywzMSAgIGM2LjMwOC02LjI4NCwxNi40OTYtNi4yODQsMjIuODA0LDBDNDYuNzYsMzcuMzA5LDQ2Ljc2LDQ3LjQ5Niw0MC40NzYsNTMuODA1eiI+PC9wYXRoPjxwYXRoIGQ9Ik0zOC45NjgsNDAuOTFoLTguNDA5di04LjQwOGMwLTAuODI0LTAuNjY4LTEuNDkyLTEuNDkyLTEuNDkyYy0wLjgyMiwwLTEuNDkyLDAuNjY4LTEuNDkyLDEuNDkybDAsOC40MDhoLTguNDA5ICAgYy0wLjgyNCwwLTEuNDkzLDAuNjY4LTEuNDkzLDEuNDkyYzAsMC44MjIsMC42NjgsMS40OTIsMS40OTIsMS40OTJsOC40MS0wLjAwMWwwLDguNDExYy0wLjAwMiwwLjgyMywwLjY2OCwxLjQ5MSwxLjQ5LDEuNDkgICBjMC44MjYsMCwxLjQ5Mi0wLjY2NywxLjQ5Mi0xLjQ5MXYtOC40MWw4LjQxMS0wLjAwMWMwLjgyMywwLjAwMiwxLjQ5MS0wLjY2OCwxLjQ5LTEuNDlDNDAuNDU5LDQxLjU3NiwzOS43OTIsNDAuOTEsMzguOTY4LDQwLjkxeiI+PC9wYXRoPjwvZz48L3N2Zz4=");
}

.orthis-toggle-static {
	display:none;	
	background-image: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjMDAwMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNzMuMjM5IDg2LjczNCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNzMuMjM5IDg2LjczNCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PGc+PHBhdGggZD0iTTcyLjA2Nyw3OS45MDVMNTguMTY1LDY1LjkwOVYwSDB2NzEuNDk5aDUyLjQ0MmwxMy45NzEsMTQuMDYzYzEuNTYyLDEuNTYyLDQuMDk1LDEuNTYyLDUuNjU0LDAuMDAxICAgQzczLjYzLDg0LjAwMSw3My42Myw4MS40NjgsNzIuMDY3LDc5LjkwNXogTTU1LjE2Nyw2Mi44OTNsLTcuODgxLTcuOTM1YzUuOTU4LTguNjIxLDUuMTA0LTIwLjUyNC0yLjU2OS0yOC4yMDEgICBjLTguNjQyLTguNjQtMjIuNjQ2LTguNjQtMzEuMjg5LTAuMDAxYy04LjY0LDguNjQ1LTguNjQsMjIuNjQ4LDAsMzEuMjg5YzcuNjc3LDcuNjc3LDE5LjU3OSw4LjUyOCwyOC4yMDEsMi41NjlsNy44MzQsNy44ODZIMi45OTkgICBWM2g1Mi4xNjhWNjIuODkzeiBNNDAuNDc2LDUzLjgwNWMtNi4zMDksNi4yODQtMTYuNDk4LDYuMjg0LTIyLjgwNywwQzExLjM4NSw0Ny40OTYsMTEuMzg1LDM3LjMwOSwxNy42NywzMSAgIGM2LjMwOC02LjI4NCwxNi40OTYtNi4yODQsMjIuODA0LDBDNDYuNzYsMzcuMzA5LDQ2Ljc2LDQ3LjQ5Niw0MC40NzYsNTMuODA1eiI+PC9wYXRoPjxwYXRoIGQ9Ik0zOC45NjgsNDAuOTFIMTkuMTY2Yy0wLjgyNCwwLTEuNDkzLDAuNjY4LTEuNDkzLDEuNDkyYzAsMC44MjIsMC42NjgsMS40OTIsMS40OTIsMS40OTJsMTkuODAzLTAuMDAyICAgYzAuODIzLDAuMDAyLDEuNDkxLTAuNjY4LDEuNDktMS40OUM0MC40NTksNDEuNTc2LDM5Ljc5Miw0MC45MSwzOC45NjgsNDAuOTF6Ij48L3BhdGg+PC9nPjwvc3ZnPg==");
}


.navbar {
	margin-bottom:1rem;
}

.navbar-brand {
	font-size: 1rem !important;
	color: #999;
	margin-left: 1rem;
}

.next-arrow {
	font-size:1.3rem;
}

.orthis-list .zoomable-button {
	display:none !important;
}

.pagination {
	color:#555;
	padding:0px;
	font-size:small;
	display:flex;
	justify-content:center;
}

.pagination li {
	display:inline;
	padding:1rem;
	color: #ccc;

	padding:.5rem !important;
	padding-left:.75rem !important;
	padding-right: .75rem !important;
}

.pagination li:first-child::after {
	content : " ← ";
}

.pagination li:last-child::before {
	content : " → ";
}

.pagination-previous {

}

.pagination-current {
}

.pagination-next {

}

.previous-arrow {
	font-size:1.3rem;
}

.shortcuts {
	display:block;
	color:#999;
	font-family:monospace;
	font-size:small;
	text-align:center;
	margin-top:5rem;
}

.shortcuts dt {
	display:inline;
	color:#333;
}

.shortcuts dd {
	display:inline;
}

.shortcuts-keyboard {
	display:block;
}

.shortcuts-keyboard:before {
	content: "keyboard shortcuts:";
}

.shortcuts-touch {
	display:none;
}

.shortcuts-touch:before {
	content: "touch commands:";
}

#orthis-iiif {
	display:none !important;
}

.tinyscreen {
	display:none !important;
}	

.zoomable-button {
	border-radius: 0px !important;
}

.zoomable-image {
	margin-bottom: 2rem;
}

@media (max-width: 1024px) {

	.landing {
		column-count: 4 !important;
	}
	
}

@media (max-width: 900px) {

	footer ul li {
		display: block;
		margin-bottom: .25rem;
	}

	footer ul li::after {
		content: "" !important;
	}
	
	.orthis-list {
		width:290px;
		margin: 0 auto;
	}

	.orthis-stub {
		margin-bottom:1.5rem;
	}

	.orthis-stub:last-child {
		margin-bottom:1rem;
	}

	.pagination li {
		border:solid thin;
		margin-left:.25rem;
		margin-right:.25rem;		
	}

	.pagination li:first-child::after {
		content : "" !important;
	}
	
	.pagination li:last-child::before {
		content : "" !important;
	}
	
}

@media (max-width: 700px) {

	.landing {
		column-count: 3 !important;
	}
	
}

@media (max-width: 600px) {

	.landing {
		column-count: 2 !important;
	}

	.zoomable-image {
		margin-bottom: 2.75rem !important;
	}
	
}

@media (max-width: 400px) {

	.landing {
		column-count: 1 !important;
	}
	
	.pagination-current-context {
	}
}

@media (max-width: 320px) {

	.leaflet-control-fullscreen {
		display:none !important;
	}
	
	.orthis-static {
		min-height:270px;
		min-width:270px;
		background-size: 270px 270px;
	}

	.orthis-picture {
		min-height:270px !important;
		min-width:270px !important;
	}
	
	.orthis-picture-default {
		min-height:270px !important;
		min-width:270px !important;
	}

	.orthis-toggle-tiles-blurb {
		display:inline-block;
		height: 14px;
		width: 15px;
		background-size: 14px 14px;
		background-repeat: no-repeat;
	}
	
	.tinyscreen {
		display: inline !important;
	}

	
}

@media (pointer: coarse) {

	.shortcuts-keyboard {
		display: none !important;
	}
	
	.shortcuts-touch {
		display:block;
	}
}