html,body{height:100%;padding:0;margin:0}
.site{height:100%}
.static {position:sticky;top:0;display:inline-block;vertical-align:top;width:30%;height:100%;background-color:#ede7d0;font-family:sans-serif;}
.dynamic{position:relative;display:inline-block;vertical-align:top;width:70%;height:100%;overflow: auto;}

.static .brand{}
.static .brand .logo{padding:1em;font-weight:bold;font-size:1.4em;text-align:center;font-stretch: condensed;}

.static .menu{margin:3em 0 0 20%;}
.static .menu .item{margin:1em 0;font-size:1.4em;font-stretch:condensed;}
.static .menu .item.soon{color:#777}
.static .menu .item a{color:#000;text-decoration:none;}
.static .menu .item a:hover{text-decoration: underline;}

.static .contact{position:absolute;bottom:2em;width:100%;text-align:center;}
.static .contact:before{display:block;width:100%;height:110px;padding-bottom:5em;content:"";background:url(/i/symbol.png) no-repeat center center;}
.static .contact a{font-size:0.85em;color:#000;}


.dynamic .content{position:relative;width:100%}

.dynamic .content .post{position:relative;display:inline-block;vertical-align:top;height:50vh;width:50%;text-decoration:none;background:center center no-repeat;background-size:cover;box-sizing:border-box;}
.dynamic .content .post.important{height:70vh;width:100%;}
.dynamic .content .post.important:after{display:none;}
.dynamic .content .post.important.ultra{display:block;height:100vh;width:100%;}
.dynamic .content .post.important.ultra .title{position:absolute;bottom:1em;right:0;display:inline-block;padding:1em;margin:1em;background-color:#ff0;color:#222;font-size:2em;opacity:1;border-radius:0.5em;}
.dynamic .content .post .title{display:block;padding:1em;background-color:rgba(0,0,0,0.8);color:#fff;font-family:sans-serif;font-stretch: condensed;text-align:center;opacity:0;transition:opacity 1s 0s}
.dynamic .content .post:hover .title{opacity:1;}
.dynamic .content .post:after{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5);content:""}
.dynamic .content .post:hover:after{display:none;}

.dynamic .content .post.text{display:inline-flex;align-items:center;padding:1em;font-size:2em;color:#fff;text-decoration:none;box-shadow:0 0 6em #0008 inset;}



.dynamic .loader{padding:2em;}
.dynamic .loader .action{text-align:center;}
.dynamic .loader .action button{font-size:1.2em;}

.dynamic .page{padding:1em 7%;}
.dynamic .page h1{text-align:center;}
.dynamic .page p{font-size:1.2em;line-height:1.3}

table.normal {border:0;border-spacing:0;width:90%;}
table.normal td{padding:5px;margin:0;border-bottom:solid 1px #eee;vertical-align:top;}
table.normal thead, table.normal .thead {background-color:#369;color:#fff;font-weight:bold;border-bottom:0}
table.normal td.title{padding-top:15px;border:0}
table.normal tr.subtitle td{background-color:#eee}


@media screen and (max-width:800px){
	.static{position:static;display:block;width:100%;height:auto;}
	.static .contact{position:static;}
	.static .menu{margin:1em 0 0 10%;}
	.static .menu .item{font-size:1.2em;}

	.dynamic{position:static;display:block;width:100%;height:auto;}
	.dynamic .content .post{display:block;width:100%}
	.dynamic .content .post .title{opacity:1;}
	.dynamic .content .post:after{display:none;}
	.static .contact{padding-bottom:1em;}
	.static .contact:before{display:none;width:100%;height:55px;padding-bottom:0;background-size:contain;}
}