:root {
	--header:clamp(7em, 13vw, 10em);
	--footer:clamp(7em, 13vw, 10em);
	--width:640px;
	--aside:240px;
	--gap:32px;
	--cgap:20px;
	--fs:clamp(14px, calc(1vw + 7px), 18px);
	--blue_menu:#fff;
	--blue1:#005;
	--blue2:#036ab2;
	--green:#4fde2c;
	--greentext:#45c425;
	--orange:#f48301;
	--highlight:#fff;
	--ctbg:#f4f4f4;
	--txt:#000;
	--bg:#fff;
	--h1:2.5em;
	--h3:1.5em;
	--logo_blau_h:204.27;
	--logo_blau_l:34.9%;
	--logo_grn_h:113.26;
	--logo_grn_l:3.06%;
	--openclose:0.25s;
}

@media(prefers-color-scheme:dark) {
	:root {
		--blue_menu:#fff;
		--bg:#333;
		--ctbg:#141414;
		--txt:#cbcbcb;
	}
}

body { font:400 var(--fs)/1.5em NotoSans; margin:0; padding:0; background:var(--ctbg); color:var(--txt); }

nav {
	background:#fff;
	z-index:10;
	width:320px;
	padding:calc(var(--header) + var(--gap)) var(--gap) var(--gap) var(--gap);
	grid-area: 1 / 1 / 4 / 5;
	justify-self:end;
	margin-right:-320px;
	box-shadow:none;
	box-sizing:border-box;
	transition:margin-right var(--openclose) ease-in-out, box-shadow var(--openclose) ease-in-out;
}

body.openmenu nav {
	box-shadow:0 0 60px #000;
	margin-right:0;
}

nav ul { list-style-type:none; padding-left:0; margin:0; }
nav li.haschildren>ul { padding-left:var(--gap); }
nav li:last-child { padding-bottom:var(--gap); }
nav li:last-child li:last-child { padding-bottom:0; }

main {
	display:grid;
	grid-template:
		"head head head head" var(--header)
		". content side ." 1fr
		"foot foot foot foot" var(--footer) /
		1fr var(--width) var(--aside) 1fr;
	min-height:100vh;
	min-height:100dvh;
	gap:var(--gap);
	overflow-x:hidden;
}

header {
	grid-area:head;
	background:linear-gradient(154deg, var(--blue1), var(--blue2));
	position:relative;
	z-index:11;
	color:#fff;
	font:700 var(2rem)/1 NotoSans;
	display:grid;
	grid-template:". logo burger" auto / 1fr calc(var(--width) + var(--gap) + var(--aside)) 1fr;
}


#logo { grid-area:logo; }
#logo img { height:3em; width:auto; }
#logo span { font-size:1.5rem; margin-top:1.5rem; white-space:nowrap; }
#logo a { color:inherit; display:flex; align-items:center; gap:1em; height:100%; }
#logo a:hover { text-decoration:none; }

#openclose { grid-area:burger; text-align:right; transform-origin: top right; }

li.haschildren {
	position:relative;
	margin-bottom:0;
	transition:margin-bottom 0.25s ease-in-out;	
}

li.haschildren>.toggle {
	cursor:pointer;
}
li.haschildren>.toggle::before {
	content:"\f101";
	font:400 1.4em/2rem x-siter;
	position: absolute;
	right:0;
	width:2rem;
	text-align:center;
}
li.haschildren>.toggle:hover::before {
	color:var(--green);
}

li.haschildren.openmenu>.toggle::before { content:"\f103"; }
li.haschildren>ul { display:none; }
li.haschildren.openmenu>ul { display:block; }
li.haschildren>a { margin-right:2rem; }

#openclose { display:flex; position:absolute; z-index:11; cursor:pointer; transition:top 0.25s ease-in-out; gap:0.7em; right:var(--gap); top:var(--gap); }
#openclose span { line-height:32px; }
#openclose:hover .ocline { background:var(--green); }
#openclose:hover span { color:var(--green); }
#burger { position:relative; width:32px; height:32px; }
#oc-line-f { height:3px; width:30px; background:var(--highlight); border-radius:1px; position:absolute; top:5.5px; left:1px; transition: transform var(--openclose) ease-in-out; -moz-transition: transform var(--openclose) ease-in-out; transform:rotate(0deg); transform-origin:4.14px 6px; -moz-transform-origin:4.14px 6px; }
#oc-line-d { height:3px; width:30px; background:var(--highlight); border-radius:1px; position:absolute; top:14.5px; left:1px; transition: opacity var(--openclose) ease-in-out; -moz-transition: opacity var(--openclose) ease-in-out; }
#oc-line-h { height:3px; width:30px; background:var(--highlight); border-radius:1px; position:absolute; top:23.5px; left:1px; transition: transform var(--openclose) ease-in-out; -moz-transition: transform var(--openclose) ease-in-out; transform:rotate(0deg); transform-origin:4.14px -3px; -moz-transform-origin:4.14px -3px; }
body.openmenu #oc-line-f { transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); }
body.openmenu #oc-line-d { opacity:0; }
body.openmenu #oc-line-h { transform:rotate(-45deg); -moz-transform:rotate(-45deg); -ms-transform:rotate(-45deg); }

#logo_footer { height:100%; width:auto; }

footer {
	grid-area:foot;
	background:linear-gradient(154deg, var(--blue1), var(--blue2));
	position:relative;
	z-index:1;
	color:#fff;
	font:700 var(2rem)/1 NotoSans;
	display:grid;
	grid-template:". foot ." auto / 1fr calc(var(--width) + var(--gap) + var(--aside)) 1fr;
}

#footer {
	grid-area:foot;
	display:flex;
	justify-content:space-between;
	align-items:center;
}

#logo_footer { height:3em; }
#footernavigation { list-style-type:none; display:flex; flex-wrap:nowrap; margin:0; }
#footernavigation li { margin-left:1em; }
#footernavigation a { color:#fff; text-decoration:none; }
#footernavigation a:hover, #footernavigation a.active { text-decoration:none; color:var(--green); }

.content { grid-area:content; flex-grow:1; margin:var(--max_vgap) 0; display:flex; gap:var(--cgap); flex-direction:row; flex-wrap:wrap; align-content:flex-start; }
aside { grid-area:side; flex-grow:1; margin:var(--max_vgap) 0; display:flex; gap:var(--cgap); flex-direction:row; flex-wrap:wrap; align-content:flex-start; }


.ctbox { flex-basis:calc((100% + var(--cgap)) / var(--spalten) - var(--cgap) ); }
.mgbox { flex-basis:calc((100% + var(--cgap)) / var(--spalten) - var(--cgap) ); }
.ctbox6 { --spalten:1; }
.ctbox3 { --spalten:2; }
.ctbox2 { --spalten:3; }
.mgbox2 { --spalten:1; }




input,textarea { color:#000; }
input.edit, textarea.edit { padding:1px; margin:0; border:1px solid #999; box-sizing:border-box; width:100%; }
input.warn, textarea.warn { padding:1px; margin:0; border:1px solid red; background-color:#fdd; box-sizing:border-box; width:100%; }
h1,h2,h3,h4,h5,h6 { margin:0; }
h1 { font:100 var(--h1)/1.1em NotoSans; margin-top:0; color:var(--blue2); }
h2 { font:700 1.2em/1.1em NotoSans; margin:0; color:var(--greentext); }
h3 { font:100 var(--h3)/1.1em NotoSans; margin-top:0; color:var(--blue2); letter-spacing:0.2em; }
h4 { font:400 var(--h3)/1.1em NotoSans; margin-top:0; color:var(--greentext); letter-spacing:0.2em; text-transform:uppercase; }
h5 { font-size:10px; font-weight:normal; color:#666; display:block; text-align:center; margin:0 auto; padding:2px 10px; }
#content img { border:none; display:block; }
#content p { margin-top:0; }

pre { font-family:monospace; }
.admin { color:#33c; margin:0 0 0 4px; }
.adminbox { grid-area:head; background-color:#ccf; border-color:#999; border-width:1px 0 1px 0; border-style:solid; padding:0; font:400 10px/1em Verdana; z-index:12; position:absolute; }
.xsgalcontainer {  }
.thumbnail { float:left; position:relative; }

div.hr { background-color:var(--blue2); border:none; height:1px; margin:0.5em 0; }
hr { display:none; }
ul.list { list-style-type:none; padding:0; margin:0; border-top:1px solid var(--c0); }
ul.list li { border-bottom:1px solid var(--c0); font:inherit; position:relative; padding-left:2.5em; }
ul.list li::before { content:"–"; position:absolute; top:0; left:0; padding-left:1em; }
ol.list { padding:0 0 0 2.5em; margin:0; border-top:1px solid var(--c0); }
ol.list li { border-bottom:1px solid var(--c0); font:inherit; position:relative; }

#menu ul { list-style-type:none; padding:0; margin:0 0 11px 0; border-bottom:1px solid #999; }
#menu ul ul { margin-bottom:0; border:none; }
A { text-decoration:none; }
A:hover { text-decoration:underline; }
A.icon { margin:0 1px; }
A.icon:hover { text-decoration:none; }

A.navigation { color:#888; }
A.url { color:#888; text-decoration:none; }
A.url:before { content:"\f101"; font-family:x-siter; padding-right:0.25em; }
A.url2 { color:inherit; text-decoration:none; }
A.download { color:#888; text-decoration:none; }
A.download:before { content:"\f0f6 "; font-family:x-siter; padding-right:0.25em; }
A.back { color:#888; text-decoration:none; }
A.back:before { content:"\f100 "; font-family:x-siter; padding-right:0.25em; }
A.prev { color:#888; text-decoration:none; }
A.prev:before { content:"\f100 "; font-family:x-siter; padding-right:0.25em; }
A.next { color:#888; text-decoration:none; }
A.next:after { content:"\f101 "; font-family:x-siter; padding-left:0.25em; }
A.navigation:hover,A.url:hover,A.download:hover,A.back:hover,A.prev:hover,A.next:hover { color:#f00; }
A.dir { color:#888; text-decoration:none; }
A.dir:hover { color:#888; text-decoration:none; }
A.dir:before { content:"\f114  "; font-family:x-siter; padding-right:0.25em; }
A.dir:hover:before { content:"\f115  "; font-family:x-siter; padding-right:0.25em; }

A.menu0 { color:var(--txt); }
A.menu1 { color:var(--green); }
A.menu2 { color:var(--green); font-weight:bold; }
A.menu0:hover,A.menu1:hover,A.menu2:hover { color:var(--green); text-decoration:none; }

A.submenu0 { background-color:#ccc; border-color:#999; border-width:1px 1px 0 0; border-style:solid; padding:2px 0; display:block; font-size:10px; color:#777; }
A.submenu1 { background-color:#aaa; border-color:#999; border-width:1px 1px 0 0; border-style:solid; padding:2px 0; display:block; font-size:10px; color:#c00; }
A.submenu0:hover,A.submenu1:hover { background-color:#fff; color:#c00; text-decoration:none; }

A.subnav { text-decoration:none; color:var(--greentext); font:inherit; font-weight:100; }
A.subnav:hover { color:var(--txt) }
A.thread0 { font-size:10px; color:#777; font-weight:bold; margin:1px; }
A.thread1 { font-size:10px; color:#c00; font-weight:bold; margin:1px; }
A.thread0:hover,A.thread1:hover { color:#c00; text-decoration:none; }
div.thread0 { padding:2px 0; color:#c00; background-color:#e0e0e0 }
div.thread1 { padding:2px 0; color:#c00; background-color:#ccc; }
div.posting { background-color:#eeeeee; padding:2px; }
div.posting h4, div.posting .postinghead { color:#333; background-color:#ccc; display:block; margin:0; padding:1px; font-size:11px; text-transform:none; letter-spacing:0; }

#guestbookhead h2 { float:left; }
#guestbookhead a { float:right; color:#999; font-size:11px; margin:'.$xs_layout['content']['steg'].'px '.$xs_layout['content']['steg'].'px 0 0; }

.foldhead { padding-left:10px; background:url(../images/rechts.gif) no-repeat left; font-weight:bold; color:#888; text-decoration:none; }
.foldheadhigh { padding-left:10px; background:url(../images/unten.gif) no-repeat left; font-weight:bold; color:#888; text-decoration:none; }
.foldhead:hover, .foldheadhigh:hover { text-decoration:none; }
.foldbody { display:none; font-size:12px; }
div.menuend { border-color:#999; border-width:1px 0 0 0; border-style:solid; padding:3px 0; }
.thumbnail .xsicon { position:absolute; width:28px; background:#aaa; text-align:center; bottom:0; font:normal 20px/24px x-siter; }
.thumbnail .xsicon:hover { text-decoration:none; color:#fff; background:#bbb; }
.pup { left:0; border-radius:0 8px 0 0; }
.pdown { right:0; border-radius:8px 0 0 0; }

.box { margin:0; background:var(--bg); box-sizing:border-box; padding:10px; border-radius:8px; box-shadow:1px 1px 3px #0002; font:inherit; }
.box p { fontinherit; margin:0; }

b { font-weight:700; }
.quote { margin:0 0 0 16px; color:#0000BE; }
.small { font-size:0.8em; }
.big { font-size:14px; }
.c { color:#66f; }
.subtxt { color:#999; font-weight:bold; }
.u { text-decoration:underline; }

.zoomicon { display:block; bottom:0; left:0; width:13px; height:13px; position:absolute; background:url(../images/zoom.gif) no-repeat 0 0; }

#topmenu { position:absolute; left:0; top:0; }
#menu { position:absolute; left:0; top:148px; width:200px; }
#subnavi { position:absolute; left:216px; top:128px; }
#searchsubmit { font-family:x-siter; font-size:20px; border:none; background:none; outline:none; }
#searchsubmit:focus,#searchsubmit:hover { color:red; }
.block { display:block; }
.fileselection { margin-left:32px; display:none; }
.language a  { display:block; float:left; padding:0; margin-right:8px; font-weight:bold; font-size:11px;  line-height:11px; color:#888; }
.language a:hover { color:#c00; }
.language span  { display:block; float:left; padding:0; margin-right:8px; font-weight:bold; font-size:11px;  line-height:11px; color:#c00; }

.galnav { position:relative; margin-top:4px; }
.galnav a { display:block; background:#fff; padding:0; margin:0 7px 0 0; width:8px; height:8px; float:left; border-radius:4px; }
.galnav a:hover, .galnav a.activeSlide { background:#000; }

#topmenu ul { list-style-type:none; padding:0; margin:2px 0; }
#topmenu ul li { display:inline; margin:0; padding:0; }
#topmenu ul li a.topmenu0 { background-color:#ddd; padding:0 8px; font-size:12px; font-weight:bold; color:#888; }
#topmenu ul li a.topmenu1 { background-color:#bbb; padding:0 8px; font-size:12px; font-weight:bold; color:#c00; }
#topmenu ul li a.topmenu0:hover { background-color:#fff; color:#c00; text-decoration:none; }
#topmenu ul li a.topmenu1:hover { background-color:#fff; color:#c00; text-decoration:none; }

span.playbutton { position:absolute; width:64px; height:64px; margin:-32px 0 0 -32px; top:50%; left:50%; background:url(../images/video_play_button.png) no-repeat 0 0; }
span.playbutton:hover { background-position:0 -64px; }

SUB,SUP { line-height:1px; }
div.markup { border:1px inset #eee; background-color:#ddd; padding:0; }
div.markup a { border:1px outset #eee; padding:2px; margin:0; color:#444; text-decoration:none; cursor:pointer; display:inline-block; }
div.markup a:hover { border:1px inset #eee; background-color:#ccc; text-decoration:none; }
.ctadmin div.imgpos { border:none; background:none; padding:0; }
.ctadmin div.imgpostd { border:none; background:#e0e7ff; padding:0; } /* Farbe 50% zwischen Content und adminbox */

.ctadmin span { display:block; height:17px; border-bottom:1px solid #999; display:block; background-color:#fff; margin-bottom:1ex; padding-top:1px; }
.ctadmin abbr span { background:none; border-bottom:none; }
.ctadmin span a { display:block; height:16px; float:left; border-width:1px 1px 0 1px; border-style:solid; border-color:#999; background-color:#bbb; color:#444; text-decoration:none; margin:0 2px; padding:0 2px; cursor:pointer; }
.ctadmin span a:hover { background-color:#ccc; }
.ctadmin span a.active { background-color:#ccf; color:#000; padding-bottom:1px; }
.ctadmin span a input { margin:0 2px; padding:0; font-size:10px; display:block; float:left; }

.adminbox span.blind { color:#9e9ef0; display:inline; background:none; border:none; }
.adminbox span.info { color:#000; display:inline; background:none; border:none; }

abbr.info, abbr.blind, span.blind { display:block; float:left; height:18px; margin:1px 0 1px 0; padding:0 4px; font-size:10px; line-height:18px; border-style:solid; border-width:1px; border-color:#fff  #777 #777 #fff; color:#777; background-color:#95a0f0; font-family:Verdana; }
abbr { background-image:linear-gradient(#d2d2f3,#b2b1e6); font-family:Verdana; text-decoration:none; cursor:help; }
abbr.info { color:#000; }
.ctadmin i { color:red; }
.clear  { clear:both; }
.ctclear { clear:both; }

.ctrl_prev { position:absolute; left:0; width:32px; z-index:1000; height:100%; display:none; }
.gal_prev { position:absolute; left:0; width:32px; height:100%; background:#fff url(../images/banner-prev.gif) no-repeat 50% 50%; opacity:0.2; filter:alpha(opacity=20); }
.ctrl_next { position:absolute; right:0; width:32px; z-index:1000; height:100%; display:none; }
.gal_next { position:absolute; right:0; width:32px; height:100%; background:#fff url(../images/banner-next.gif) no-repeat 50% 50%; opacity:0.2; filter:alpha(opacity=20); }
.gal_ct { position:absolute; bottom:0; left:0; background:#fff; opacity:0.6; filter:alpha(opacity=60); width:100%; }
.gal_ct2 { padding:10px 32px; }
.comment_delete { background:red; padding:6px 10px 6px 6px; border-radius:15px; margin:10px 0 0 0; display:inline-block; font-family:Verdana; color:#fff; font-weight:bold; line-height:18px; }
.comment_publish { background:green; padding:6px 10px 6px 6px; border-radius:15px; margin:10px 0 0 0; display:inline-block; font-family:Verdana; color:#fff; font-weight:bold; line-height:18px; }
.comment_go { background:#333333; float:right; padding:6px 15px; border-radius:15px; margin:10px 0 0 0; display:none; font-family:Verdana; color:#fff; font-weight:bold; line-height:18px; border:none; }


.ctcol { width:100%; margin:0; }
.ctcol p, .mgcol p { margin:0 }

.ctadmin,.mgadmin { width:100%; margin:0; background-color:#ccf; border-color:#999; border-width:1px 0 1px 0; border-style:solid; padding:0; font:400 10px/1em Verdana; }
.ctadmin *,.mgadmin * { font-family:Verdana; font-size:12px; }
.xsicon { font-family:x-siter; font-size:14px; line-height:16px; }

a.admin { display:inline-block; height:18px; margin:1px 0; padding:0 4px; font-size:10px; line-height:18px; border-style:solid; border-width:1px; border-color:#fff #777 #777 #fff; color:#000; background-image:linear-gradient(#d2d2f3,#b2b1e6); font-family:Verdana; }
a.admin:hover { display:inline-block; height:18px; margin:1px 0; padding:0 4px; font-size:10px; line-height:18px; border-style:solid; border-width:1px; border-color:#666 #eee #eee #666; color:#fff; background-image:linear-gradient(#8b8be0,#bfbfee); text-shadow:1px 1px 3px #0003; text-decoration:none; }
.submit { display:inline-block; height:20px; margin:1px 0; padding:0 4px; font-size:10px; line-height:18px; border-style:solid; border-width:1px; border-color:#fff #777 #777 #fff; color:#000; background-image:linear-gradient(#d2d2f3,#b2b1e6); font-family:Verdana; }
.submit:hover { display:inline-block; height:20px; margin:1px 0; padding:0 4px; font-size:10px; line-height:18px; border-style:solid; border-width:1px; border-color:#666 #eee #eee #666; color:#fff; background-image:linear-gradient(#8b8be0,#bfbfee); text-shadow:1px 1px 3px #0003; text-decoration:none; }
.search { display:inline-block; margin:1px; padding:0 2px; font-size:10px; line-height:18px; font-family:Verdana; border-style:solid; border-width:1px; border-color:#888 #eee #eee #888; color:#000; background-color:#95a0f0; text-decoration:none; }

.searchfield { display:flex; gap:0.25em; }
.searchfield>span { font-size:inherit; padding:4px 0; }
.searchfield>input { border:none; padding:4px; margin:0; font-size:inherit; display:inline; cursor:pointer; outline:none; background:#f7f7f7; width:100% }

.xs-form { display:flex; flex-direction:column; gap:1em }
.xs-form input,.xs-form textarea { font-size: 1em; outline:none; border:1px solid #0003; color:#000; padding:0.5em }
.xs-form input:focus,.xs-form textarea:focus { box-shadow:2px 2px 4px #0002 inset }
.xs-form textarea { min-height:15em }
.xs-form .formerr { border-color:#f00; color:#c00 }
.xs-form input[type="submit"] { background:#036ab233; border-radius:1em; border:none; cursor:pointer }
.xs-form input[type="submit"]:active { background:#036ab244; border-radius:1em; border:none; cursor:pointer }

@media only screen and (max-device-width:480px){
	* { -webkit-text-size-adjust:none; }
}


@media (max-width:1024px ) {
	main {
		grid-template:
			"head" var(--header)
			"content" 1fr
			"side" auto
			"foot" min-content /
			1fr;
	}
	header {
		display:flex;
		justify-content:space-between;
		flex-direction:row;
		align-items:center;
		padding:var(--gap);
	}
	nav { grid-area:1 / 1 / 5 / 2; }
	#openclose {
		position:initial;
		right:initial;
		top:initial;
		align-self:start;
	}

	div.content { padding:0 var(--gap);	}
	aside {	padding:0 var(--gap); }
	.mgbox2 { --spalten:2; }
	footer {
		grid-template:"foot" auto / 1fr;
		padding:var(--gap);
	}
	section.content {
		padding-top:2em;
	}
}
@media (max-width:900px ) {
	#openclose { transform: scale(0.8); }
}

@media (max-width:820px ) {
	.nomobile { display:none; }
}

@media (max-width:700px ) {
	#openclose { transform: scale(0.8); }
	aside { grid-template-columns:repeat(2,1fr); }
	.ctbox2 { --spalten:2; }
}

@media (max-width:560px ) {
	#openclose { transform: scale(0.8); }
	#logo a { align-items:start; gap:0.5em; flex-direction:column; }
	#logo span { font-size:0.8rem; margin-top:0; }
}

@media (max-width:520px ) {
	#footernavigation { flex-direction:column; }
	aside { grid-template-columns:repeat(1,1fr); }
	.ctbox2 { --spalten:1; }
	.ctbox3 { --spalten:1; }
	.mgbox2 { --spalten:1; }
}

@font-face {
	font-family:'x-siter';
	src: url('fonts/x-siter.eot');
	src: url('fonts/x-siter.woff') format('woff'),url('fonts/x-siter.svg#x-siter') format('svg'),url('fonts/x-siter.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'NotoSans';
	src: url('fonts/NotoSans-Thin.woff2') format('woff2'),url('fonts/NotoSans-Thin.ttf') format('truetype');
	font-weight: 100;
	font-style: normal;
}

@font-face {
	font-family: 'NotoSans';
	src: url('fonts/NotoSans-Thin.woff2') format('woff2'),url('fonts/NotoSans-ThinItalic.ttf') format('truetype');
	font-weight: 100;
	font-style: italic;
}

@font-face {
	font-family: 'NotoSans';
	src: url('fonts/NotoSans-Regular.woff2') format('woff2'),url('fonts/NotoSans-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'NotoSans';
	src: url('fonts/NotoSans-Italic.woff2') format('woff2'),url('fonts/NotoSans-Italic.ttf') format('truetype');
	font-weight: 400;
	font-style: italic;
}

@font-face {
	font-family: 'NotoSans';
	src: url('fonts/NotoSans-Bold.woff2') format('woff2'),url('fonts/NotoSans-Bold.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: 'NotoSans';
	src: url('fonts/NotoSans-BoldItalic.woff2') format('woff2'), url('fonts/NotoSans-BoldItalic.ttf') format('truetype');
	font-weight: 700;
	font-style: italic;
}

@font-face {
	font-family: 'NotoSerif';
	src: url('fonts/NotoSerif-Regular.woff2') format('woff2'),url('fonts/NotoSerif-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'NotoSerif';
	src: url('fonts/NotoSerif-Italic.woff2') format('woff2'),url('fonts/NotoSerif-Italic.ttf') format('truetype');
	font-weight: 400;
	font-style: italic;
}

@font-face {
	font-family: 'NotoSerif';
	src: url('fonts/NotoSerif-Bold.woff2') format('woff2'),url('fonts/NotoSerif-Bold.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: 'NotoSerif';
	src: url('fonts/NotoSerif-BoldItalic.woff2') format('woff2'),url('fonts/NotoSerif-BoldItalic.ttf') format('truetype');
	font-weight: 700;
	font-style: italic;
}