html,body {
	width: 100%; height: 100%; margin: 0; padding: 0; background-color: var(--body); color: white; font-size: 1.1em;
	font-family: Arial, sans-serif; scroll-behavior smooth;
}

@font-face {
	font-family: 'kaushan_scriptregular';
	src: url('kaushanscript-regular-webfont.woff2') format('woff2'),
		url('kaushanscript-regular-webfont.woff') format('woff');
		url('KaushanScript-Regular.otf') format('otf');
	font-weight: normal;
	font-style: normal;
}

div#site-outer { background-color: var(--outer); padding: 25px 0; clear: left; }
div#site { 
	max-width: 1300px; margin: 0 auto; box-shadow: 0px 3px 12px #000; 
	border: 1px solid #000; border-top: 0; color: black;
}

.center { text-align: center; }
label { cursor: pointer; }

div#viewer {
	display: none; position: fixed; left: 0; right: 0; text-align: center;
	width: 100%; height: 100%; background-color: rgba(0,0,0,.75);
}
div#viewer p { 
	text-align: center; font-size: 1.1em; position: fixed; bottom: 0.5em; width: 100%;
	background-color: rgba(255,255,255,.42); padding: .5em; color: #242424;
}


@keyframes fadeIn { 100% { opacity: 1; margin-top: 0; } }
@keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } }
div.nav { max-width: 1300px; margin: 0 auto; text-align: center; }
footer { font-size: 0.8em; }
ul.nav  { display: table; padding: 0; margin: 0 auto; list-style: none; }
ul.nav li { float: left; margin: 0; }
nav a { display: block; padding: 1em 1.5em; color: var(--navA); text-decoration: none; }
nav a:hover { background-color: var(--navHover); }
nav a.current  { background-color: var(--navCurrent); }
span.accesskey { border-bottom: 2px dotted var(--navA); }
#toggle { display: none; }
.hamburger {
	display: none; position: fixed; top: 0; right: 0; font-size: 2rem; cursor: pointer;
	margin: 5px 5px 0 auto; z-index: 8; padding: 5px 10px;
	background-color: var(--body); border-radius: 12px; box-shadow: 0 2px 4px #555; border: 2px solid #AAA; 
}

@media (max-width: 896px) {
	.hamburger {
		display: block;
	}
	ul.nav {
		position: fixed; top: 0; left: 0; right: 0; display: none; opacity: 0; margin-top: -100px;
		background-color: var(--outer); flex-direction: column; font-size: 1.5em;
	}
	ul.nav li { float: none; }
	#nav_top { display: none; }
	#toggle:checked + .hamburger + nav ul {
		display: flex; animation: fadeIn .15s ease-out 1 forwards; -webkit-animation: fadeIn .15s ease-out 1 forwards;
	}
	#toggle:not(:checked) + .hamburger + nav ul {
	}
}


header { height: 580px; max-height: 580px; padding: 10px; }
header #logo { height: 114px; max-height: 114px; background: url('../img/stix-logo.png') no-repeat; }
header #slogan { 
	float: right; padding: 460px 80px 0 0; font-size: 2.5em; font-style: italic; font-family: serif;
	font-weight: bold; text-shadow: 0 0 15px #000; color: var(--navA);
}
header #slogan1 { width: 100%; padding: 95px 42px 0 0; font-size: 3em; font-style: italic; }

footer { text-align: center; color: var(--navA); }

div#cet { display: none; text-align: center; font-size: 0.7em; margin-top: 1em; }

main { 
	min-height: 350px; border-top: 1px solid black; padding: 15px 25px; background: var(--navA);  
	/*background: url('../img/rapp-body_bg.avif') top center repeat-x #b6c3e3;*/
}

h1 { margin-top: 0; font-size: 1.9em; font-family: 'kaushan_scriptregular', serif; }
h1 small { font-weight: normal; font-size: 0.6em; }
h2 { font-size: 1.5em; margin-top: 1.5em; font-family: 'kaushan_scriptregular', serif; }

div.imgc { margin: 1em auto; }
div.imgr { clear: right; float: right; margin: 1em; }
div.imgl { float: left; margin: 1em; }
img.viewer_img, div.imgc img, div.imgr img, div.imgl img { box-shadow: 4px 4px 4px; box-shadow: 0px 3px 12px #000; border: 1px solid #000; }
div.imgc p, div.imgr p, div.imgl p { margin: 0.5em 0 0 0; text-align: center; font-style: italic; font-size: 0.8em;  }

img.viewer_img { margin-top: 1em; }

div#back2top { text-align: center; margin: 3em 0 0 0; font-size: 0.8em; }
div#back2top a { text-decoration: none; color: black; }


div.photo { float: right; margin: 1em 2em 2em 2em; }
div.photol { float: left; margin: 1em; }
div.photo, div.photol { text-align: center; font-size: 0.8em; font-style: italic; }

table.rates { border-collapse: collapse; width: 100%; margin: 1em 0 3em 0; }
table.rates th, table.rates td { text-align: left; font-weight: normal; padding: 0.2em 0.5em 0.2em 0; }
table.rates th.empty { height: 1.5em; }
table.rates td.info { font-style: italic; } 

ol.tv { display: table; padding: 0; margin: 0 auto; }
ol.tv li { line-height: 2em; }
ol.tv li.h { }

table.tv { border-collapse: collapse; margin: 3em auto; width: 50%; font-size: 1.2em; }
table.tv thead th,table.tv thead td { padding-bottom: 1em; }
table.tv th,table.tv td { width: 50%; font-weight: normal;}
table.tv th { text-align: right; padding-right: 0.5em; width: 5%; white-space: nowrap; }
table.tv td { text-align: left; padding-left: 0.5em; }

table.formtable { width: 100%; border-collapse: collapse; } 
table.formtable th { text-align: right; font-weight: normal; padding-right: 1em; }
table.formtable th, table.formtable td { padding: 0.4em 0.3em; background-color:red; }
table.formtable th.error, table.formtable td.error { color: #A00; }
table.formtable th.mandatory { /*font-weight: bold;*/ }

div.l { float: left; text-align: right; width: 12em; padding-right: 1em; }
div.r { margin-left: 13em; }
div.c { clear: both; margin-top: 1em; }
div.mandatory { /*font-weight: bold;*/ }
div.error { color: #A00; }

.legal { margin: 2em 2em 2em 1em; }
.legal li { margin-top: 2em; }
.legal li li { margin-top: 1em; }
.legal ol { margin-top: 1em; }

p#copy { color: #abb0b0; }