<style type="text/css">
html {height:fit-content}
body {margin:0;padding:0;height:100%;overflow-x:hidden;overflow-y:scroll;font-family:"Lato",sans-serif;font-optical-sizing:auto;font-style:normal;line-height:1.5;font-size:calc(16px + 0.1vw)}
form {padding:0;margin:0}
input[type=text],input[type=submit],button,input[type=button] {-webkit-appearance:none;border-radius:0}
select {border-radius:0}
h1, h2, h3 {margin:0;font-weight:400}
h1 {padding:0 0 10px;font-size:calc(1.3vw + 25px)}
h2 {padding:0 0 10px;font-size:1.8em}
h3 {padding:0 0 5px;font-size:1.3em}

p {padding:0;margin:0}
a {color:#0092AC;text-decoration:none}
a:hover {text-decoration:underline}

.hdr {margin:0 auto;width:90%;text-align:center;padding:max(3vmin,20px) 0}
	.hdr p {padding:5px 0}
	.hdr p:first-of-type {font-size:1.5em}
	.hdr p:last-of-type {display:flex;flex-wrap:wrap;justify-content:center;row-gap:5px}
	.hdr p span {padding:0 10px}
	.hdr p span:not(:last-of-type) {border-right:solid 1px #000000}

.grey {background-color:#efefef}
.txt {padding:max(4vmin,25px) 5%}

.thumbs {display:flex;flex-wrap:wrap;row-gap:max(4vmin,25px);text-align:center;padding:max(4vmin,25px) 15%}
	.thumbs > div {display:flex;flex-direction:column;row-gap:10px}
		.thumbs > div > div:not(:last-of-type) {border:solid 3px #ffffff}
			.thumbs img {display:block;width:100%}			
			
@media only screen and (orientation:landscape) and (pointer:fine) {
	.thumbs {column-gap:5%}
	.thumbs > div {width:30%}
}
@media only screen and (max-width:1200px) {
	.thumbs {padding:max(4vmin,25px) 5%}
}
@media only screen and (pointer:coarse), only screen and (orientation:portrait) {
	.thumbs {row-gap:max(8vmin,50px)}
}
@media only screen and (pointer:coarse) and (min-width:601px), only screen and (orientation:portrait) and (min-width:601px) {
	.thumbs {column-gap:6%}
	.thumbs > div {width:47%}
}
@media only screen and (pointer:coarse) and (max-width:600px), only screen and (orientation:portrait) and (max-width:600px) {
	.hdr p:last-of-type {flex-direction:column}
		.hdr p span:not(:last-of-type) {border:0}
	.thumbs {flex-direction:column}
	.thumbs > div {width:100%}
	.thumbs > div > div:first-of-type {order:2}
	.thumbs > div > div:nth-of-type(2) {order:3}
	.thumbs > div > div:last-of-type {order:1}
	.txt {text-align:center}
}
	
</style>