@import url(https://fonts.googleapis.com/css?family=Spectral);
@import url(https://fonts.googleapis.com/css?family=Fanwood+Text:400,400italic);
@import url(https://fonts.googleapis.com/css?family=Oswald);
@import url(nav.css);

* { box-sizing: border-box }

html { margin: 0; padding: 0 }
body { background: white; color black; margin: 0; padding: 50px 0 0 0 } /* make room for navigation bar */ 
h1, h2. h3 { margin: 1em 0 0.2em }
h1 { font: 4vw Fanwood Text, sans-serif } 
h2 { font: italic 2em Fanwood Text, serif }
h3 { font: bold 1.5em Fanwood Text, sans-serif; clear: both } 
p { margin: 0 0 1em }
hr { clear: both }
a { color: inherit }

aside { font: 1.2em Oswald; width: 28vw; float: right; clear: right; margin: 0 -30vw 2vw 0; padding: 0; background: #eee }
aside a { display: block; width: 100%; border-bottom: thin solid gray; padding: 0 1vw 0.2vw; text-decoration: none }
aside.left { float: left; clear: left; margin: 0 0 0 -30vw; text-align: right; padding: 0 1vw; }

article { font: 18px Spectral, serif; margin: 0 auto; background: #dee; border: thin solid gray; padding: 1vw; margin: 0em auto; }
article.smal { width: 38vw; } 
article.smal figure { transition: 0.2s; line-height: 0; width: 30vw; padding: 1vw; margin: 0 }
article.smal figure:nth-of-type(odd)  { float: left; clear: left; margin: 0 0 0 -31vw;  }
article.smal figure:nth-of-type(even) { float: right; clear: right; margin: 0 -31vw 0 0; }

article.bred { width: 94vw; } 
article.bred figure { float: right; transition: 0.2s; line-height: 0; width: 25vw; padding: 1vw; margin: 0 }
article.bred figure:nth-of-type(odd) { clear: right }

article figcaption { line-height: 1.3em; background: beige; border: thin solid gray; padding: 0.5vw }
article figure.none { line-heiight: 1.3em }
article figure img { width: 100%; margin: 0vw; transition: 0.2s; border: thin solid gray; padding: 0 }
article figure img:hover { width: calc(100% + 2vw); margin-left: -1vw; margin-top: -1.1vw }

/* article section is used to hold seies of images */


article section { overflow: visible; clear: none; }
article section img { width: auto; height: 15vw; margin: 0 1vw 1vw 0 }

body.img { background: black; color: white; padding: 4vw 0 0 }
body.img nav { display: none }
body.img h1 { text-align: center; margin: 2em 0 }
body.img h2 { text-align: center;  margin: 2em 0 }
body.img figure { overflow: auto; margin: 0; padding: 0 }
body.img figure:nth-of-type(even) img { float: right; clear: both; width: 52vw; margin: 0 0 0 4vw }
body.img figure:nth-of-type(odd) img { float: left; clear: both; width: 52vw; margin: 0 4vw 0 0 }
body.img figcaption { font: 2rem/1.5 Fanwood Text; font-size: max(1.7vw, 20px); padding: 4vw }


@media screen and (width < 800px ) {
   h1 { font-size: 10vw } 
   article { width: 94vw !important; border: none; background: white }
   figure { float: none !important; width: 100vw !important; padding: 0 !important; border: none !important; margin: 0 -3vw 0 -3vw !important }
}

sup { line-height: 0 }
.sc { font-variant: small-caps }
.center { text-align: center }
.right { text-align: right }
.none { display: none }