@import 'https://fonts.googleapis.com/css?family=Galindo';
* { box-sizing:border-box; margin:0; padding:0; }
html, body { height:100%; min-height:100vh; width:100%; }
html {
 font-size:100%; font-family:helv,sans;
}
body>aside, body>main { min-height:100%; }
body>aside { position:fixed; top:0; right:0; width:calc( ( 100% - 1300px ) / 2 ); background: url(css/right.jpg) center no-repeat; background-size:cover; }
body>aside:first-child { float:left; left:0; right:auto; background:url(css/left.jpg) left no-repeat; background-size:cover; }
main { flex-grow:0; width:1280px; max-width:100%; margin:auto; }
nav {
 background:khaki; border-radius:0 0 16px 16px; border:2px solid moccasin;
 width:100%; height:auto; margin-bottom:23px;
}
nav header { float:left; }
nav:after { content:''; display:block; clear:both; width:100%; height:24px; }
footer { text-align:right; color:orangered; padding:0 12px 16px; }
h1, h2, h3, h4, h5, h6 { color: orangered; font-family: 'Galindo',serif; font-weight:normal; line-height:1.2; margin: 1em 0 0.25em; }
figure, figure img, figure video, figure iframe { max-width: 90%; height: auto; }

.title {
 display:block; width:auto;
 background: white;
 height: 42px; 
 margin:0 32px;
 padding:18px 16px 42px; border-radius:0 0 16px 16px;
 float:left;
}
.title i { color:sandybrown; }
.title small { font-family:arial,sans; font-size:50%; clear:left; color:maroon; display:block; padding-left:16px; }
.title a, .title a:visited {
 color: maroon;
 text-decoration: none;
 padding:0 0 0 6px; margin:0;
}
hr { clear:both; padding-top:24px; border:none; border-bottom:2px solid khaki; margin-bottom:12px; }

main>section { /*clear:left;*/ padding:0 1vh 48px; }
section.catlist ul { columns:12em; list-style-type:none; padding: 8px 8px 32px; }
.showcase a { color:black; text-decoration:none; }
.showcase a u { color:blue; text-decoration:underline; }

#mainmenu { clear:left; margin:12px; }
#mainmenu li {display:block; float:left; min-width:144px; margin:2px; }
#mainmenu a, #mainmenu a:visited, #mainmenu span {
 display:block; padding:6px 8px; background:red; color:white; font-weight:bold; text-decoration:none; width:100%; text-align:center;
}
#mainmenu a:hover { background:maroon; }
#mainmenu span { background:orange; }
#search { clear:left; margin-left:12px; padding-top:16px; }
#search input { font-size:100%; padding:3px; }
input[type="submit"] { background: #4B99AD;
 padding: 6px 16px!important;
 border: none;
 color: #fff;
 line-height:110%;
}
.tab { border-bottom: 3px solid orangered; margin:0 0 24px; }
.tab header { background:orangered; padding: 12px 18px 9px 8px; }
.tab header:after { content:''; display:block; clear:both; }
.tab header h4, .tab header a, tab header a:visited { color:white; text-decoration:none; margin:0; }
.tab header h4 { float:left; }
.tab header a { float:right; }
.tab>div { display:flex; justify-content:space-between; gap:3px; padding:3px 0; flex-wrap:wrap; }
.tab>div>div { flex: 0 0 49%; border:1px solid orangered; border-radius:6px; padding:3px; text-align:center; overflow:hidden; }

@media only screen and (min-width: 640px) {
 #mainmenu { clear:none; margin:12px; list-style-type: none; }
 #mainmenu li { display:inline; }
 .l { float:left; width:37%; }
 .r { float:right; width:37%; }
 .w { width:61%; }
 .h { width:49%; }
 .l>*:first-child, .r>*:first-child { margin-top:0; }
}
@media only screen and (min-width: 1024px) {
 .tab>div>div { flex: 0 0 23%; }
}