#outer-wrapper .portfolio                 { min-height: 350px; font-size: .9em; background-color: #eee; border-bottom: 1px solid #ccc; }
#outer-wrapper .portfolio:nth-child(even) { background-color: #555; color: #eee; }
#outer-wrapper .portfolio h2                 { color: #624a7e; }
#outer-wrapper .portfolio:nth-child(even) h2 { color: #b3a2c7; }
#outer-wrapper .portfolio h3                 { color: #624a7e; }
#outer-wrapper .portfolio:nth-child(even) h3 { color: #b3a2c7; }
#outer-wrapper .portfolio code { color: #b3a2c7; font-size: 0.9em; }

#outer-wrapper .portfolio img { display: block; position: absolute; left: -175px; }
#outer-wrapper .portfolio footer { height: 60px; font-family: Helvetica, Arial, sans-serif; }
#outer-wrapper .portfolio a.portfolio-button        { float: right; display: inline-block; padding: 1em 2em; border-radius: 4px; background: #b3a2c7 linear-gradient(rgba(0,0,0,0), rgba(128,100,162,0.3)); color: white; font-size: 1.2em; font-weight: bold; font-family: inherit; border: 1px solid rgba(0,0,0,0.3); border-bottom-width: 2px; letter-spacing: -.1em; text-shadow: 0px 1px 0px rgba(98,74,126,0.3); }
#outer-wrapper .portfolio a.portfolio-button        { }
#outer-wrapper .portfolio a.portfolio-button:hover  { background-color: #8064a2; background-color: rgba(179,162,199, 0.7); border-color: rgba(0,0,0,0.5); }
#outer-wrapper .portfolio a.portfolio-button:active { background-color: #624a7e; background-color: rgba(  0,  0,  0, 0.2); border-color: rgba(0,0,0,0.7); }
#outer-wrapper .portfolio:nth-child(even) a.portfolio-button { border-color: #444; }
#outer-wrapper .portfolio footer h3 { display: none; }
#outer-wrapper .portfolio .circa { float: left; font-size: 1.0em; color: #888; }

#loupe { z-index: 5; position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background-color: #000; overflow-y: auto; }
#loupe.closed { display: none; }
#loupe.loading { background: #000 url('../images/loading_white_on_black.gif') no-repeat fixed center; }
#loupe.loading >div { display: none; }
#loupe button { cursor: pointer; position: absolute; top: 50px; right: 50px; border: 0; width: 50px; height: 50px; background: #000 url('../images/button_close.gif') no-repeat 0 0; }
#loupe button span { display: none; }
#loupe >div { margin: 7%; }
#loupe >div h2 { font-size: 16px; color: white; margin-top: 1em; text-transform: uppercase; }
#loupe >div p { font-size: 18px; color: #ddd; }
#loupe >div img { display: block; max-width: 85%; max-height: 600px; }

@media (max-width: 820px) {
	#outer-wrapper .portfolio img { position: static; float: left; margin: 0 15px 15px 0; }
}
@media (max-width: 600px) {
	#loupe >div img { margin-top: 125px; display: block; max-width: 100%; }
}