html, body { font-size:15px; font-family:"Lucida Sans Unicode", Sans-serif }
h1, h2, h3, h4, h5, h6 { font-family: inherit; margin:0; padding:0; color:#ba3228; font-weight:bold; }



.navbar { z-index:100; height:60px; position:fixed; background:#312d2c; color:#FFF; top:0; left:0; right:0; font-size:1.2em; }

.navtitle { float:left; height:100%; }
.navtitle>img,
.navtitle>.testimg { float:left; height:100%; width:100px; }
.navtitle>h1 { float:left; height:100%; font-size:1.5em; padding:0 0.5em; margin:0; color:#FFF; }

.navlinks { float:right; height:100%; }
.navlinks>ul,
.navlinks>ul>li,
.navlinks>ul>li>a { display:block; height:100%; }
.navlinks>ul>li { float:left; }
.navlinks>ul>li>a { color:inherit; font-weight:bold; text-decoration:none; padding:0 1em; position:relative; transition:color 0.2s; }
.navlinks>ul>li>a>.animback { z-index:-10; position:absolute; top:0; bottom:100%; left:0; right:0; transition:bottom 0.2s; background:#ba3228; }
.navlinks>ul>li>a:hover>.animback,
.navlinks>ul>li.active>a>.animback { bottom:0; }



.gallery { display:block; width:100%; }
.gallery>li { display:block; width:20%; float:left; height:200px; box-sizing:border-box; padding:5px; }
.gallery>li>a { display:block; width:100%; height:100%; position:relative; box-sizing:border-box; padding:5px; }
.gallery>li img,
.gallery>li .testimg { width:100%; height:100%; }



.catalog { display:block; width:100%; }
.catalog>li { display:block; width:20%; float:left; height:200px; position:relative; box-sizing:border-box; padding:5px; }
.catalog>li>a { display:block; width:100%; height:100%; position:relative; box-sizing:border-box; padding:5px; overflow:hidden;  }
.catalog>li .preview { height:75%; position:absolute; top:0; left:0; right:0; }
.catalog>li .preview>.testimg { width:100%; height:100%; }
.catalog>li .name { display:block; height:20%; position:absolute; bottom:0; left:0; right:0; text-align:center; line-height:1.2em; }
.catalog>li .options { color:#FFF; display:block; position:absolute; bottom:0; right:0; font-size:0.8em; }
.catalog>li .options>li { display:block; background:#312d2c; border-radius:5px; box-shadow:2px 2px 2px 0 #000; padding:0.2em; margin:0.2em; }



.vc { vertical-align:middle; }
.vc:after { vertical-align:middle; display:inline-block; content:''; height:100%; }



.testimg { border:dotted 2px #888; color:#888; box-sizing:border-box; text-align:center; }