/*
// ============================================================================
// J.M. Cañellas Photo Database 
// Repository of Cañellas work in Paris (1885? - 1902) 
// (c) 2020, Gregoire Clemencin 
// ---------------------------------------------------------------------------- 
// jmc_css_resp.php - CSS rules for small screens 
// ---------------------------------------------------------------------------- 
*/

@media all and (max-width: 640px) {
img {
	max-width: 100%;
}
.res-compact {
	flex-wrap: wrap;
	justify-content: space-around;
}
.serp-res-compact {
	margin-bottom: 1em; 
}
.serp-res-compact .res-thumb {
	flex-direction: column;
	justify-content: unset;
	align-items: center;
	/*
	border: 1px solid var(--clr-brdr-random);
	border-radius: 5px; 
	*/
	padding: 4px 0;
}
.serp-res-compact .res-thumb img {
	margin: 0;
}
.serp-res-compact .thumb-caption {
	padding-left: 0.1em; 
	padding-right: 0.1em; 
}
p.blog-item-pubdate {
	display: none; 
}

}

@media all and (max-width: 480px) {
#body {
	max-width: 100%;
	padding: 0.25em;
}
.gcwrap {
	width: 100%; 
}
header {
	flex-direction: column; 
	padding: 0.5em 12px;
}
h1 {
	font-size: 1.6em; 
}
header p {
	padding-left: 0;
	font-size: smaller; 
}
footer {
	padding: 8px;
}
.license-text::before {
	content: unset; 
}

#main {
	margin: 48px 0;
	padding: 12px 6px 6px 6px;
}
.content {
	padding: 6px; 
}

#thoughts-header {
	flex-direction: column; 
	align-items: flex-start;
	justify-content: unset;
	gap: 0.5em; 
}
.thoughts-subtitle {
	margin-top: 0; 
}
#thoughts-searchform {
	width: 100%;
	text-align: center;
}
#thoughts-news {
	margin-top: 1em;
	padding: 0.25em;
	gap: 1em;
}
#thoughts-news-header {
	display: none; 
}

/* Blog post */ 
.note-nav {
	justify-content: space-evenly;
}
.nav-label {
	display: none;
}

div.blog-item {
	margin-top: 2em;
}

.note-body {
	margin-left: 0; 
	margin-right: 0; 
}

table#contact_form { 
	font-size: 0.8em;
}
table#contact_form td.header { 
	max-width: 30px; 
}

.img-series {
	flex-flow: column wrap; 
	gap: 0.5em; 
	justify-content: unset;
}

.img-series-2 {
	gap: 0 0.5em; 
}
.img-series-3, 
.img-series-4 {
	grid-template-columns: 1fr 1fr; 
	gap: 0 0.5em; 
}

.img-series img {
	max-width: 98%;
}
.img-comment {
	margin: 1em 0; 
	border-top: 1px dotted var(--clr-link-txt-highlight); 
	border-bottom: 1px dotted var(--clr-link-txt-highlight); 
	padding-bottom: 0.5em;
	display: grid; 
	grid-template-columns: 1fr; 
	gap: 0.5em;
}
.modal-display {
	padding-top: 0.15em;
	padding-right: 0.15em;
	padding-bottom: 0.15em;
	padding-left: 0.15em;
	border-radius: 3px;
}
.modal-content {
	padding-top: 1.5em;
	padding-right: 0.2em;
	padding-bottom: 1.5em;
	padding-left: 0.2em;
	border-radius: 0;
	width: 100%;
}
.caption-container {
	bottom: 0.3em;
	padding: 2px 4px;
}
p#caption {
	font-size: x-small; 
}
.close {
	top: 3px;
}

.aparte {
	grid-template-columns: 1fr; 
}
div.aparte-hdr {
	padding-left: unset; 
}
div.aparte-hdr p {
	writing-mode: unset; 
}

}