* {margin:0;padding:0}
html, input, textarea {font-size:100%}
body {background-color: #f7f7f7;color:#888;font-family: poynter-gothic-text, sans-serif;font-size: 1.2em; font-weight: lighter}
a {text-decoration: none;color:#6b9bcc}
a:hover {text-decoration: none}
h1, h2, h3 {font-weight: lighter}

body {padding:60px}
h1 {font-size: 2em;letter-spacing: 0.01em;margin: 0 0 10px -2px;display: flex;align-items: baseline}
h1 small {font-size: 73%;color:#aaa;padding-left:15px;letter-spacing: 0}

nav {font-size: .9em;letter-spacing: 0.06em}
nav ul {display: flex; flex-flow:row wrap;text-transform: uppercase;font-size: .9em}
nav li {margin-right:1em;list-style-type: none;line-height:2em}
nav li a {color:#888}
nav li a:hover {color:#6b9bcc}
nav .on a {color:#777;border-bottom: 3px solid #91bbe6;padding-bottom: 4px}
nav .donate {text-transform: none}
nav .donate a {color:#6b9bcc}

#main {margin-top:40px}
#main h2 {margin-bottom:20px;font-size: 2em;font-weight: 600}
#main section {display: grid;grid-template-columns: repeat(auto-fit, minmax(16em, 1fr));grid-gap:15px}
#main section.photos {grid-template-columns: repeat(auto-fit, minmax(13em, 1fr))}
#main section h3 {font-size: .9em;overflow-wrap: anywhere;margin-top: .3em;font-weight: 400}
#main section img {width:100%;height: auto;background-color: #bfd7ef;vertical-align:middle}
#main .pagination-items {margin-top:2em;line-height:2em; list-style-type: none;display: flex;}
#main .pagination-items li {margin-left: .6em;font-size:1.2em}
#main .pagination-items .on {font-weight: bold;background-color:#ccc;color:#fff;padding: 0 .3em}
#main .pagination-items a {border:1px solid #ccc;padding: 0 .4em}

article p {margin:1em;max-width: 1080px}

footer {margin-top: 30px;font-size: .9em}

.pswp__bg, .pswp__ui--fit .pswp__top-bar, .pswp__ui--fit .pswp__caption {background:#f7f7f7}
.pswp__counter {color: #888}
.pswp__caption__center {color:#888;text-align: center}
.pswp__button--close, .pswp__button--arrow--left::before, .pswp__button--arrow--right::before {background-color: rgba(0, 0, 0, 0.3)}
.pswp__ui--fit .pswp__top-bar,.pswp__ui--fit, .pswp__top-bar, .pswp__caption {background-color: #f7f7f7}

@media screen and (max-width: 1420px) {
	body {padding:30px}
 }
@media screen and (max-width: 1120px) {
	#main h2 {font-size: 1.6em}

 }
@media screen and (max-width:688px) {
	body {padding:20px}
	h1 { display:block; text-align:center}
	h1 small {padding-left: 5px}
	nav ul { justify-content: center}
	#main h2 {font-size: 1.4em;text-align: center}
	#main section {grid-template-columns: 1fr 1fr}
	#main section.photos {grid-gap: .6em;grid-template-columns: 1fr 1fr 1fr}
	#main section h3 {font-size: .8em}
    #main .pagination {font-size: .8em}
	footer {margin-top: 20px;font-size: .7em;text-align: center}
 }