html, body { height: 100vh; width:100vw; margin: 0; padding: 0; font-family: Arial; font-size: 22px; color: #000; }
a { color: #00f; text-decoration: none; }
a:hover { color: #000; text-decoration: underline; }

#content { margin: 2vw 5vw; }
#main_title { margin-top: 10px; margin-bottom: 30px; font-size: 36px; }
#sub_title { margin: 30px 0; font-size: 32px; }
#clip_list { list-style: disc; margin: 30px 0; }
#clip_container { display: block; position: fixed; top: 0; left: 0; width: 0; height: 0; background: url(http://www.bonhardy.com/permaculture/images/loading.gif) #141414 center center no-repeat; z-index: 10; opacity: 0; 
	transition: width .2 ease-in, height .2 ease-in, opacity .2 ease-in; }
#clip_container.show { width: 100vw; height: 100vh; opacity: 1; transition: width .2 ease-in, height .2 ease-in, opacity .2 ease-in; }
#clip_container.playing, #clip_container.html { background-image: none; }
#clip_container.img { background-image: none; text-align: center; }
#clip_container.img img { max-width: 100%; max-height: 100%; }
#clip_container.img.wide img { width: 100%; max-width: none; max-height: none; }
#clip_container.img.wide, #clip_container.img.enlarge { overflow: auto; }
#clip_container.img.enlarge img { cursor: zoom-in; }
#clip_container.img.enlarge img.enlarged { width: auto; max-width: none; max-height: none; cursor: zoom-out; }

.hilite { font-weight: bold; color: #49ff01; }
.thumbs { list-style: none; }
.thumbs li { display: inline-block; margin: 5px; }
.thumbs li .img { display: block; position: relative; }
.thumbs li .img h5 { position: absolute; top: -10px; right: -10px; margin: 0; padding: 10px; width: 100%; min-height: 100%; color: #fff; background-color: rgba(0,0,0,0.5); opacity: 0; z-index: 10; }
.thumbs li .img:hover h5 { opacity: 1; transition: opacity .2s; }
.thumbs li .img img { height: 100px; }
.before-after { display: inline-block; width: calc(45vw - 12px); }
.before-after h4 { margin: 1vw 0; }
.before-after img { display: block; width: 100%; }