
.sphead { text-align:center; white-space:nowrap; }
.sphead .xicon { display:inline-block; box-sizing:border-box; width:25%; max-width:100px; vertical-align:top; text-align:right; }
.sphead .xicon img { width:100%; aspect-ratio:1; border-radius:50%; }
.sphead .xtext { display:inline-block; box-sizing:border-box; width:73%; max-width:450px; vertical-align:top; text-align:left; }
h1 { margin:0; padding:5px 0 5px 10px; text-align:left; font-size:16pt; }
h1 a { font-size:26pt; color:var(--text); }
h1 a:hover { color:var(--linkpjactive); }
.sphead .xabout { display:block; box-sizing:border-box; width:100%; padding:5px 0 5px 15px; background:linear-gradient(to right, var(--bg) 0%, var(--bg2) 10%, var(--bg) 100%); font-size:12pt; }

.spht { padding:7px 0 0 0; text-align:center; font-size:14pt; }
.spht .xbox { display:inline-block; box-sizing:border-box; width:320px; vertical-align:top; text-align:left; }
.spht .xlink { position:relative; display:block; box-sizing:border-box; width:100%; padding:15px 10px 10px 10px; color:var(--text); }
.spht .xlink:hover { background-color:var(--bg2); color:var(--texthl); }
.spht .xtitle { display:inline-block; width:100%; max-height:100px; overflow:hidden; padding:2px 0 0 0; }
.spht .ximg { width:100%; max-height:280px; border-style:none; }
.spht .xicon { max-width:120px; height:10px; border-style:none; }
.spht .xlabel { position:absolute; right:7px; top:7px; width:50px; height:50px; border-style:none; }

@media (max-width:660px) {
	.spht .xbox { width:50%; }
}
@media (max-width:500px) {
	.spht .xbox { width:100%; }
	.spht .xlink { padding:15px 3px; }
	.spht .xlabel { top:12px; right:0; }
}
