* { box-sizing: border-box; }

body {
    font-family: sans-serif;
    font-size: 0.825em;
    }

.photo {
	margin: 1em 0;
	}
	
.photo:last-child {
	padding-bottom: 3em;
	}

/* for this example we're only scaling up if we have js */
.js .photo img {
	display: block;
	margin: 0 auto;
	width: 100%;
	}

/* hide the fallback links */
.js .photo *:not(img) {
	display: none;
	}



/* height fitting */
/* it's hard! */


/* the present
   fit-height.js adds a 'tall' class to .photos that will end up taller than 90% of the viewport.
   define explicit heights for every containing element in order to size the .tall imgs with a pct-based height.
   */


html, body, article {
	height: 100%;
	}

.tall {
	height: 90%;
	}

.tall img {
	height: 100%;
	width: auto !important;
	}

/* opera and mobile safari seem to have trouble scaling an <img> to a percentage-based height. So I added a modernizr test in the fit-height script. if we can't scale <img>s based on percentage-heights, fit to some reasonable maximum... */

.no-img-pct-height .tall {
	height: auto;
	}

.no-img-pct-height .tall img {
	height: 50em;
	}


/* the future
    wouldn't that be nice?

   as of april 2013 this works in no browsers.
   see:
   http://dev.opera.com/articles/view/css3-object-fit-object-position/
   http://caniuse.com/object-fit
   http://caniuse.com/viewport-units
   */

/* undo all of that previous junk with some more junk */
.cssvhunit.object-fit html,
.cssvhunit.object-fit body,
.cssvhunit.object-fit article,
.cssvhunit.object-fit .tall {
	height: auto;
	}
.cssvhunit.object-fit .tall img {
	height: auto;
	width: 100%;
	}

/* <wistfully> someday these two lines will be all that we need... */
.cssvhunit.object-fit .photo img {
	max-height: 90vh;
	object-fit: contain;
	
	-o-object-fit: contain;
	-ms-object-fit: contain;
	-moz-object-fit: contain;
	-webkit-object-fit: contain;
	
	}

