@charset "utf-8";

/* dirty alternative to custom css properties to define global options
 * options are false if not found or if running an old browser (such as IE8- which cannot access counter-reset from JS) */
html { counter-reset: autocompletable; }
@media (min-width: 740px)
{
	html { counter-reset: slidable lightboxable autocompletable; }
}

body, #toptoolbar
{
	background-color:#f8f6f3;
}
#page
{
	width:980px;
	margin:0 auto 1.5em auto;
	padding:0;
	background-color:white;
	border:1px solid #dfdace;
	position:relative;
	z-index:0;
}
@media (max-width: 979px)
{
	#page
	{
		width: 100%;
		min-width: 320px;
		border-left: none;
		border-right: none;
	}
}

.clickable
{
	cursor: pointer;
}
a:hover, .clickable:hover, footer a:hover
{
	text-decoration:underline;
	color:#cc7110;
}

#skiptocontent, #reporta11yissue
{
	position: fixed;
	z-index: 100;
	left: 20%;
	width: 60%;
	padding: 0.5em;
	box-sizing: border-box;
	text-align: center;
	background: white;
	border: 1px solid gray;
}
#reporta11yissue
{
	bottom: 2px;
}

#toptoolbar
{
	position:fixed;
	margin:0 0 0 -1px;
	padding:0.5em 2px 0 0;
	border-bottom:1px solid #dfdace;
	width:inherit;
	top:0;
	z-index:10;
	height:3.25em;
}
@media (max-width: 739px)
{
	#toptoolbar
	{
		background: none;
		margin-left: 0;
		padding-right: 0;
	}
}

#navpanel
{
	transition: visibility 0.01s;
	position: fixed;
	visibility: hidden;
	z-index: 0;
	top: 3.75em;
	width: 1px;
	height: 100%;
}
#navbutton
{
	background:url('../media/res/icons/menu@own.png') no-repeat left center;
	border: none;
	font-size: inherit;
	position: absolute;
	left: 8px;
	top: -1.85em;
	margin-top: -16px;
	width: 32px;
	height: 32px;
	cursor: pointer;
	text-indent: -10000px;
	overflow: hidden;
}
#navpanel.opened #navbutton
{
	background-position-x: right;
}
#navcontent
{
	transition: left 0.2s, visibility 0.2s;
	visibility: hidden;
	position: relative;
	left: -322px;
	width: 320px;
	height: 100%;
	overflow: scroll;
	background-color: #f2f1ed;
	border: 1px solid gray;
	contain: strict;
}
#navheader
{
	background:#84121c url('../media/res/logo/tile-small.jpg') no-repeat center top / auto 100%;
	height: 100px;
}
#navpanel.opened #navcontent
{
	visibility: visible;
	left: 0;
}
#navcontent ol
{
	list-style-type: none;
	margin: 0;
	padding: 0;
}
#navcontent > ol
{
	margin: 0.5em 0;
}
#navcontent p
{
	line-height: 1.3;
	margin: 0 0.8em 0 0;
	padding: 0.5em 0;
}
#navcontent li.current
{
	color: #cc7110;
}
#navcontent li:not(.current) > p
{
	cursor: pointer;
}
#navcontent li > ol
{
	transition: visibility 0.05s, font-size 0.10s;
}
#navcontent li.folded > ol
{
	visibility: hidden;
	font-size: 0;
}
@media (max-width: 739px)
{
	#navpanel
	{
		visibility: visible;
		z-index: 20;
	}
	#navbutton
	{
		z-index: 20;
	}
}

#searchbar
{
	position:absolute;
	right: 12px;
	top: 50%;
	margin-top: -0.95em;
	text-align:right;
}
@media (min-width: 995px)
{
	#searchbar
	{
		right: 0;
	}
}
.qinput
{
	font:inherit;
	color:inherit;
	padding:0 4px;
	line-height: 1.8em;
	border:solid 1px #aaa;
	border-radius:4px;
}
#searchbar .qinput
{
	background:white url('../media/res/icons/magnifier-left-16@fugue.png') no-repeat 6px center;
	padding-left:25px;
	width:12em;
	transition: width 0.4s;
	border-radius:4px;
}
#searchbar .qinput:focus
{
	width:20em;
}
@media (max-width: 979px)
{
	#searchbar .qinput
	{
		width:5.5em;
	}
}
@media (max-width: 739px)
{
	#searchbar .qinput
	{
		width: 0;
	}
}
@media (max-width: 539px)
{
	#searchbar
	{
		width: inherit;
	}
	#searchbar .qinput
	{
		box-sizing: border-box;
	}
	#searchbar .qinput:focus
	{
		width: calc(100% - 55px);
	}
}

.ui-autocomplete .ui-blur
{
	color: #999;
}

#breadcrumb
{
	margin:0.15em 0.5em 0.5em 0.5em;
	float:left;
}
#breadcrumb .root
{
	display: block;
	width: 22px;
	height: 32px;
	text-indent: -10000px;
	overflow: hidden;
	background: url('../media/res/logo/logo32t.png') no-repeat;
}
@media (max-width: 739px)
{
	#breadcrumb
	{
		display: none;
	}
}
#breadcrumb div
{
	float:left;
	z-index:10;
	padding-right:16px;
	margin-right:8px;
	background:url('../media/res/dblquote-right.gif') no-repeat right 0.5em;
}
@media (max-width: 979px)
{
	#breadcrumb div
	{
		padding-right:13px;
		margin-right:5px;
	}
}
#breadcrumb div > a
{
	padding-bottom:0.3em;
}
#breadcrumb ol
{
	visibility:hidden;
	list-style-type:none;
	margin-top:0;
	padding:0.5em 1em 1em 1em;
	position:absolute;
	border:solid 1px transparent;
}
#breadcrumb div:hover ol
{
	visibility:visible;
	border-color:#bbb;
	background-color:rgba(235,235,235,0.92);
	transition: all 0.25s ease-out;
}
div#summary
{
	padding-right:0;
	margin-right:0;
	background:url('../media/res/icons/edit-list@fugue.png') no-repeat left bottom;
}
#summary p
{
	margin:0 0 0.35em 0;
}
#summary > a
{
	padding-left:24px;
}

header
{
	margin:3.75em 0 2em 0;
	background: url('../media/res/header-background.jpg') no-repeat center 42px;
	position: relative;
}
#logo
{
	position: absolute;
	top: 5px;
	left: 10px;
	width: 124px;
	height: 180px;
	background: url('../media/res/logo/logo180t.png');
}
#caption
{
	padding-top: 18px;
	margin: 0;
	height:24px;
	text-indent:-10000px;
	overflow:hidden;
	background: white url('../media/res/menu-titre.png') no-repeat right bottom;
}
@media (max-width: 979px)
{
	#logo
	{
		width: 64px;
		height: 92px;
		background-size: 100% 100%;
	}
}
@media (max-width: 739px)
{
	header
	{
		position: fixed;
		top: 0;
		background: #f8f6f3;
		width: inherit;
		height: 3.75em;
		margin: 0;
		z-index: 9;
	}
	#caption
	{
		position: relative;
		top: 1.85em;
		margin: -12px auto 0 auto;
		padding: 0;
		width: calc(100% - 105px);
		max-width: 420px;
		background-position: center center;
		background-size: 100%;
		background-color: initial;
	}
	#logo
	{
		display: none;
	}
}
#menu
{
	display: flex;
	list-style-type: none;
	margin: 58px 0 0 0;
	padding: 0 0 0 145px;
	background: #596168;
}
@media (max-width: 979px)
{
	#menu
	{
		padding: 0;
	}
}
@media (max-width: 739px)
{
	#menu
	{
		display: none;
	}
}
#menu li
{
	flex-grow: 1;
}
#menu a.selected::after, #menu p
{
	background: url('../media/res/menu-face.png') no-repeat center bottom;
}
#menu a
{
	position: relative;
	display: block;
	padding: 12px 0;
	background-color: #596168;
}
#menu a.selected, #menu a:hover, #menu a:focus
{
	background-color: #d0d2ce;
}
#menu a.selected::after
{
	content: "";
	position: absolute;
	bottom: -7px;
	width: 100%;
	height: 15px;
}
#menu p
{
	text-indent: -10000px;
	overflow: hidden;
	margin: 0;
	height: 44px;
	padding: 0 5px;
}
#menu li:nth-child(n+2) p
{
	border-left: 1px solid #777;
}
#menu :is(a.selected, a:hover, a:focus) p
{
	border-color: #bbb;
}

#menu li:nth-child(1) p	{ background-position: center    0px; min-width:  97px; }
#menu li:nth-child(2) p	{ background-position: center  -50px; min-width: 130px; }
#menu li:nth-child(3) p	{ background-position: center -100px; min-width: 102px; }
#menu li:nth-child(4) p	{ background-position: center -150px; min-width: 146px; }
#menu li:nth-child(5) p	{ background-position: center -200px; min-width: 100px; }
#menu li:nth-child(6) p	{ background-position: center -250px; min-width: 134px; }

#menu li:nth-child(1) :is(a.selected, a:hover, a:focus) p { background-position-y: -300px; }
#menu li:nth-child(2) :is(a.selected, a:hover, a:focus) p { background-position-y: -350px; }
#menu li:nth-child(3) :is(a.selected, a:hover, a:focus) p { background-position-y: -400px; }
#menu li:nth-child(4) :is(a.selected, a:hover, a:focus) p { background-position-y: -450px; }
#menu li:nth-child(5) :is(a.selected, a:hover, a:focus) p { background-position-y: -500px; }
#menu li:nth-child(6) :is(a.selected, a:hover, a:focus) p { background-position-y: -550px; }

@media (max-width: 825px)
{
	#menu a
	{
		padding: 10px 0;
	}
	#menu p
	{
		height: 31px;
	}
	#menu li:nth-child(1) p	{ min-width:  86px; }
	#menu li:nth-child(2) p	{ min-width: 124px; }
	#menu li:nth-child(3) p	{ min-width:  84px; }
	#menu li:nth-child(4) p	{ min-width: 131px; }
	#menu li:nth-child(5) p	{ min-width:  85px; }
	#menu li:nth-child(6) p	{ min-width: 124px; }
}

#submenu
{
	float:left;
	width:13em;
	margin-left:2em;
}
@media (max-width: 979px)
{
	#submenu
	{
		margin-left:0.5em;
		padding:0 1em 0 0.5em;
	}
}
@media (max-width: 739px)
{
	#submenu
	{
		display: none;
	}
}
#submenu > ol
{
	list-style-type:none;
	margin:2em 0 0 0;
	padding:0;
	line-height:2em;
	text-align:right;
}
#submenu ol ol
{
	list-style-type:none;
	background:#faf9f7 url('../media/res/row-bkg-lrd-wh.gif') repeat-x left bottom;
	border-top:solid 1px #ddd;
	margin:0.2em 0 0 0;
	padding:0.5em 0 0.8em 0;
	line-height:0.9em;
	text-align:left;
}
#submenu > ol > li.selected
{
	color:#505050;
	margin:0.5em 0;
	font-size:1.4em;
	font-weight:bold;
}
#submenu li li
{
	color:#555555;
	padding: 0.35em 0 0.35em 30px;
	font-size:0.6em;
	font-weight:normal;
	background:url('../media/res/icons/page_white_text@famfamfam-custom.png') no-repeat 3px 0.4em;
}
#submenu .selected .selected
{
	background:url('../media/res/icons/bookmark@famfamfam-custom.png') no-repeat 3px 0.4em;
}
#submenu li li:hover
{
	background-color:white;
}
#submenu li li a
{
	display:block;
}


main
{
	margin-left:17em;
	padding:0 2em 0 2.5em;
	background:url('../media/res/vsep-lgr.gif') repeat-y left;
}
@media (max-width: 979px)
{
	main
	{
		margin-left:15em;
		padding:0 1em 0 1.5em;
	}
}
@media (max-width: 739px)
{
	main
	{
		margin-left: 0;
		padding: 0.5em 1.2em;
		background: none;
	}
	
	main h1
	{
		margin-top: 3.75em;
		margin-bottom: 1.5em;
	}
}
@media (max-width: 539px)
{
	main h1 i
	{
		display: block;
		clip: rect(0, 0, 0, 0);
		clip-path: inset(0 100% 100% 0);
		height: 0.25em;
	}
}

/* trick to shift the targets of internal anchors toward bottom (prevent them from being hidden under the fixed top bar)
   z-index is required so that this area does not overlap the clickable area of links just above (if any) */
.home h2, .archive h2, .article h2, .faq h2, .newmodels h2, .modeldetails h2, .contact h2, .shtable h2, .newtable h2, .demo h2, .glossary h2, .about h2, .legal h2, .sitemap h2
{
	position:relative;
	top:-3em;
	padding-top:3em;
	margin-bottom:-2.8em;
	z-index:-1;
}
.article h3
{
	position:relative;
	top:-3.7em;
	padding-top:3.7em;
	margin-bottom:-3.7em;
	z-index:-1;
}
.article h4, .credits h2, .article p.part
{
	position:relative;
	top:-4.2em;
	padding-top:4.2em;
	margin-bottom:-4.2em;
	z-index:-1;
}
.shtable tbody th:first-child span:first-child
{
	display:block;
	position:relative;
	top:-5.5em;
}


#sharebar
{
	float: right;
	margin-left: 1em;
}
#sharebar p
{
	font-size:0.75em;
	font-style:italic;
	margin:0 1em 0 0;
	position:relative;
	top:-2.2em;
	text-align:center;
}
#sharebar a
{
	text-indent:-10000px;
	overflow:hidden;
	display:inline-block;
	width:24px;
	height:24px;
	background:#777 url('../media/res/icons/social-icons-alpha@own.png');
	transition:all 0.3s ease-out;
	border-radius:12px;
}

#sharebar #sharetw { background-position:0px 0px; }
#sharebar #sharefb { background-position:-24px 0px; }
#sharebar #sharerd { background-position:-48px 0px; }
#sharebar #shareml { background-position:-72px 0px; }
#sharebar #sharepi { background-position:-96px 0px; }

@media (max-width: 739px)
{
	#sharebar #sharetw { background-color:#00aced; }
	#sharebar #sharefb { background-color:#35619e; }
	#sharebar #sharerd { background-color:#ff4500; }
	#sharebar #shareml { background-color:#f87119; }
	#sharebar #sharepi { background-color:#cb2027; }
}
#sharebar #sharetw:hover { background-color:#00aced; }
#sharebar #sharefb:hover { background-color:#35619e; }
#sharebar #sharerd:hover { background-color:#ff4500; }
#sharebar #shareml:hover { background-color:#f87119; }
#sharebar #sharepi:hover { background-color:#cb2027; }

@media (max-width: 739px)
{
	#sharebar
	{
		position:absolute;
		bottom: 0;
		left: 0;
		right: 0;
		margin-left: 0;
	}
	#sharebar p
	{
		background: #555;
		color: white;
		margin: 0;
		padding: 1.2em 0;
		top: -4.4em;
		font-size:0.85em;
		font-style:normal;
	}
	#sharebar p br
	{
		display: none;
	}
	#sharebar a
	{
		vertical-align: middle;
		margin-left: 15px;
	}
}
@media (max-width: 539px)
{
	#sharebar p
	{
		top: -6.1em;
		padding-top: 0.6em;
		line-height: 2.5em;
	}
	#sharebar p br
	{
		display: block;
	}
}

img
{
	max-width: 100%;
	height: auto;
}

.video a {
	display: inline-grid;
}
.video a img, .video a::after {
	grid-area: 1 / 1;
}
.video a::after {
	content: "";
	margin: auto;
	width: 48px;
	height: 48px;
	background-image: url('../media/res/icons/media-playback-start@Human_O2-custom.png');
}
.video a:hover::after {
	background-position-x: -48px;
}

@media (max-width: 979px)
{
	.news
	{
		background:none;
		margin-left:0;
	}
	.news .date
	{
		float:none;
		left:0;
		display:inline-block;
		padding:0.3em 0.5em;
		/*width:14em;*/
		width:unset;
		background-size:100% 100%;
	}
	.news .date .wday, .news .date .year
	{
		display:inline;
		padding:0 0.2em;
	}
	.news .content
	{
		margin-left:0;
		padding-left:0;
		min-height:2em;
	}
}

@media (max-width: 979px)
{
	.newintro ul
	{
		padding-left:1em;
	}
	.newintro img
	{
		margin-left:5px;
	}
	.newintro li p
	{
		margin-left:160px;
	}
}
@media (max-width: 539px)
{
	.newintro li > a
	{
		display: block;
		text-align: center;
		margin: 0 auto;
	}
	.newintro img
	{
		float: none;
		margin-left: 0;
	}
	.newintro li p
	{
		margin-left: 0;
	}
}

@media (max-width: 979px)
{
	.shintro .p4pack p
	{
		width: 49%;
		margin: 0 0 1.5em 0;
	}
}
@media (max-width: 359px)
{
	.shintro .p4pack p
	{
		width: 95%;
	}
}

thead .sort, thead .folderbar
{
	margin-bottom: 1.2em;
	white-space: nowrap;
	line-height: 1;
}
thead .sort
{
	min-width: 48px;
}
thead .sort button
{
	display: inline-block;
	width: 12px;
	height: 12px;
	font-size: 0;
	vertical-align: top;
	background: url('../media/res/icons/sort-icons@own.png') no-repeat;
	border: none;
	cursor: pointer;
}
thead .sort button:first-child
{
	margin-right: 12px;
}
thead .sort .sort-asc		{ background-position: 0px 0px; }
thead .sort .sort-desc 		{ background-position: -12px 0px; }
thead .sort button.sort-on	{ background-position-x: -24px; }
thead .sort button:hover	{ background-position-y: -12px; }


.demo thead .folderbar
{
	display: block;
}
.demo .folder, #navcontent .folder
{
	display: inline-block;
	font-size: inherit;
	height: 12px;
	text-indent: -10000px;
	overflow: hidden;
	background: url('../media/res/icons/arrows@nuvola-custom.png') no-repeat;
	border: none;
	cursor: pointer;
}
.demo thead .folder
{
	width: 20px;
	margin: 0 10px;
}
.demo thead .fold
{
	background-position:-51px 0px;
}
.demo thead .unfold
{
	background-position:-30px 0px;
}
.demo tbody td:last-child
{
	cursor: pointer;
}
.demo tbody td .folder
{
	float: left;
	position: relative;
	top: 0.5em;
	margin: -6px 0.2em 0 0;
	width: 14px;
	background-position:0px 0px;
}
#navcontent li
{
	position: relative;
}
#navcontent > ol > li
{
	margin-left: 0.8em;
}
#navcontent .folder
{
	position: absolute;
	top: 1.15em;
	left: 0;
	margin-top: -6px;
	width: 14px;
	background-position:0px 0px;
}
.demo td.folded .folder, #navcontent li.folded .folder
{
	background-position:-15px 0px;
}
.demo td ul
{
	padding-left: 14px;
	margin-left: 0.2em;
}
#navcontent li
{
	padding-left: 14px;
}
#navcontent li ol, #navcontent li p
{
	margin-left: 0.4em;
}
@media (max-width: 979px)
{
	.demo table
	{
		display: grid;
		grid-template-columns: repeat(6, auto);
		padding: 0 1em;
	}
	.demo tbody, .demo thead, .demo tr
	{
		display: contents;
	}
	.demo caption
	{
		grid-column: 1 / -1;
		order: 1;
	}
	.demo colgroup
	{
		order: 1;
	}
	.demo thead tr:nth-child(1) td, .demo thead tr > :first-child
	{
		grid-area: 1 / 1;
	}
	.demo thead tr:nth-child(2) > :nth-child(7)
	{
		text-align: left;
		align-self: start;
	}
	.demo thead tr:nth-child(n+2) > :nth-child(7)
	{
		margin: 0.5em 0 1.5em 0;
		padding: 0 0.6em;
	}
	.demo thead .widgets td
	{
		margin-top: 2em;
	}
	.demo thead .widgets td:nth-child(-n+6)
	{
		border: none;
	}
	.demo thead .folderbar
	{
		padding-left: 5em;
		text-align: left;
	}
	.demo thead .folder
	{
		margin: 2px 8px;
		vertical-align: middle;
	}
	.demo tbody th
	{
		grid-column: 1;
	}
	.demo tbody th, .demo tbody td
	{
		background-image: none !important;
	}
	.demo tbody th a
	{
		color: #2b69c2;
	}
	.demo tbody td:nth-child(7)
	{
		background: none !important;
		margin-bottom: 1em;
		grid-column: 1 / -1;
	}
	.demo .details
	{
		font-size: 0%;
		line-height: 1;
	}
	.demo .details .br
	{
		display: none;
	}
}
@media (max-width: 979px) and (min-width: 540px)
{
	.demo thead tr:nth-child(1) th:nth-child(2)
	{
		grid-column: 3 / span 3;
	}
	.demo thead tr:nth-child(n+2) > *
	{
		grid-row: 2;
	}
	.demo thead tr:nth-child(n+2) > *:nth-child(1)
	{
		grid-column: 1;
	}
	.demo thead tr:nth-child(n+2) > *:nth-child(2)
	{
		grid-column: 2;
	}
	.demo thead tr:nth-child(n+2) > *:nth-child(3)
	{
		grid-column: 3;
	}
	.demo thead tr:nth-child(n+2) > *:nth-child(4)
	{
		grid-column: 4;
	}
	.demo thead tr:nth-child(n+2) > *:nth-child(5)
	{
		grid-column: 5;
	}
	.demo thead tr:nth-child(n+2) > *:nth-child(6)
	{
		grid-column: 6;
	}
	.demo thead tr:nth-child(n+2) > *:nth-child(7)
	{
		grid-area: 3 / 1 / auto / -1;
	}
	.demo tbody td:nth-child(6)
	{
		border-radius: 0 0 10px 0;
	}
}
@media (max-width: 739px)
{
	.demo tbody td
	{
		padding: 0.5em 0.4em;
	}
}
@media (max-width: 539px)
{
	.demo table
	{
		grid-template-columns: repeat(4, auto);
		padding: 0;
	}
	.demo thead tr:nth-child(n+2) > *:nth-child(2)
	{
		grid-row: 2;
	}
	.demo thead tr:nth-child(1) th:nth-child(n+2)
	{
		grid-row: 3;
	}
	.demo thead tr:nth-child(n+2) > *:nth-child(n+3)
	{
		grid-row: 4;
	}
	.demo thead tr:nth-child(1) th:nth-child(2)
	{
		grid-column: 1 / span 3;
	}
	.demo thead tr:nth-child(n+2) > *:nth-child(-n+3),
	.demo tbody td:nth-child(3)
	{
		grid-column: 1;
	}
	.demo thead tr:nth-child(n+2) > *:nth-child(4)
	{
		grid-column: 2;
	}
	.demo thead tr:nth-child(n+2) > *:nth-child(5)
	{
		grid-column: 3;
	}
	.demo thead tr:nth-child(n+2) > *:nth-child(6)
	{
		grid-column: 4;
	}
	.demo thead tr:nth-child(n+2) > *:nth-child(7)
	{
		grid-area: 5 / 1 / auto / -1;
		padding-left: 1.25em;
	}
	.demo tbody th,
	.demo tbody td:nth-child(2)
	{
		grid-column: 1 / -1;
	}
	.demo tbody th, .demo tbody td
	{
		border-radius: 0 !important;
	}
	.demo tbody :is(th, td:nth-child(2)) .br
	{
		display: none;
	}
	.demo thead tr:nth-child(1) th:nth-child(3)
	{
		padding: 0 0.2em;
	}
	.demo tbody th,
	.demo tbody td:nth-child(2)
	{
		padding: 0.9em 1em;
	}
	.demo tbody th
	{
		padding-bottom: 0.4em;
	}
	.demo tbody td:nth-child(2)
	{
		padding-top: 0;
		margin-bottom: 1px;
		text-align: left;
	}
	.demo tbody td:nth-child(7)
	{
		padding: 0.7em 0.6em;
		white-space: normal;
	}
}
.demo td.folded ul
{
	display: none;
}
.demo td.folded .placeholder
{
	display: block;
	margin-top: 1em;
}

@media (max-width: 739px)
{
	.scrolllink { display: none; }
}

@media (min-width: 980px)
{
	.newtable .sbass th:is(:nth-child(4), :nth-child(5), :nth-child(8)),
	.newtable .diato th:is(:nth-child(3), :nth-child(4), :nth-child(5), :nth-child(8)),
	.shtable .diato th:is(:nth-child(6), :nth-child(9)),
	.catalog .fbass th:is(:nth-child(5), :nth-child(8), :nth-child(11))
	{
		.ending
		{
			font-size: unset;
			line-height: unset;
			font-style: unset;
		}
		.ending + i::after
		{
			display: none;
		}
	}
	.catalog thead .widgets td:last-child
	{
		border-bottom: none;
	}
}
@media (max-width: 979px)
{
	.catalog table
	{
		display: grid;
		padding: 0 1em;
	}
	.catalog tbody, .catalog thead, .catalog tr
	{
		display: contents;
	}
	.catalog caption,
	.catalog colgroup
	{
		order: 1;
	}
	.catalog caption,
	.catalog tbody th,
	.catalog tbody tr.empty td
	{
		grid-column: 1 / -1;
	}
	.catalog thead tr:nth-child(n+2) > *:nth-child(1)
	{
		grid-area: 1 / 1;
	}
	.catalog tbody tr:not(.group, .empty) td:last-child
	{
		grid-column: -2;
	}
	.catalog thead tr.widgets td
	{
		margin-top: 2em;
	}
	.catalog thead .details
	{
		font-size: 0%;
		line-height: 1;
	}
	.catalog thead .details .br,
	.catalog tbody th:first-child .br
	{
		display: none;
	}
	.catalog tbody tr:not(.group) th
	{
		padding-left: 1em;
		background-image: none;
		border-radius: 10px 0 10px 0;
	}
}
@media (max-width: 979px) and (min-width: 740px)
{
	.newtable .sbass,
	.newtable .diato
	{
		grid-template-columns: repeat(10, auto);
	}
	.shtable .sbass
	{
		grid-template-columns: repeat(12, auto);
	}
	.shtable .diato
	{
		grid-template-columns: repeat(13, auto);
	}
	.catalog .fbass
	{
		grid-template-columns: repeat(10, auto) 60px;
	}
	.shtable .bando
	{
		grid-template-columns: repeat(11, auto);
	}
	.catalog thead tr:nth-child(1) td
	{
		grid-area: 1 / 1;
	}
	.catalog thead tr:nth-child(1) th
	{
		grid-row: 2;
	}
	.catalog thead tr:nth-child(n+2) > *:nth-child(n+2)
	{
		grid-row: 3;
	}
	.catalog .fbass thead tr:nth-child(n+2) > *:nth-child(n+12)
	{
		grid-row: 4;
	}
	.newtable :is(.sbass, .diato) thead tr:nth-child(1) th:nth-child(2),
	.catalog .fbass thead tr:nth-child(1) th:nth-child(2)
	{
		grid-column: 1 / span 4;
	}
	.shtable :is(.sbass, .diato) thead tr:nth-child(1) th:nth-child(2)
	{
		grid-column: 1 / span 5;
	}
	.shtable .bando thead tr:nth-child(1) th:nth-child(2)
	{
		grid-column: 1 / span 3;
	}
	.catalog thead tr:nth-child(1) th:nth-child(3)
	{
		grid-column: span 3;
	}
	.newtable :is(.sbass, .diato) thead tr:nth-child(1) th:nth-child(4),
	.catalog .fbass thead tr:nth-child(1) th:nth-child(4)
	{
		grid-column: span 3;
	}
	.shtable .sbass thead tr:nth-child(1) th:nth-child(4)
	{
		grid-column: span 4;
	}
	.shtable :is(.diato, .bando) thead tr:nth-child(1) th:nth-child(4)
	{
		grid-column: span 5;
	}
	.catalog :is(thead tr:nth-child(n+2), tbody tr) > *:nth-child(2),
	.catalog .fbass :is(thead tr:nth-child(n+2), tbody tr) > *:nth-child(12)
	{
		grid-column: 1;
	}
	.catalog thead tr:nth-child(n+2) > *:nth-child(3),
	.catalog .fbass thead tr:nth-child(n+2) > *:nth-child(13)
	{
		grid-column: 2;
	}
	.catalog thead tr:nth-child(n+2) > *:nth-child(4),
	.catalog .fbass thead tr:nth-child(n+2) > *:nth-child(14)
	{
		grid-column: 3;
	}
	.catalog thead tr:nth-child(n+2) > *:nth-child(5),
	.catalog .fbass thead tr:nth-child(n+2) > *:nth-child(15)
	{
		grid-column: 4;
	}
	.catalog thead tr:nth-child(n+2) > *:nth-child(6)
	{
		grid-column: 5;
	}
	.catalog thead tr:nth-child(n+2) > *:nth-child(7)
	{
		grid-column: 6;
	}
	.catalog thead tr:nth-child(n+2) > *:nth-child(8)
	{
		grid-column: 7;
	}
	.catalog thead tr:nth-child(n+2) > *:nth-child(9)
	{
		grid-column: 8;
	}
	.catalog thead tr:nth-child(n+2) > *:nth-child(10)
	{
		grid-column: 9;
	}
	.catalog thead tr:nth-child(n+2) > *:nth-child(11),
	.shtable .sbass thead tr:nth-child(n+2) > *:nth-child(12)
	{
		grid-column: 10;
	}
	.shtable :is(.diato, .bando) thead tr:nth-child(n+2) > *:nth-child(12),
	.shtable .sbass thead tr:nth-child(n+2) > *:nth-child(13)
	{
		grid-column: 11;
	}
	.shtable .diato thead tr:nth-child(n+2) > *:nth-child(13),
	.shtable .sbass thead tr:nth-child(n+2) > *:nth-child(14)
	{
		grid-column: 12;
	}
	.catalog .fbass thead tr:nth-child(n+2) > *:last-child
	{
		grid-column-end: -2;
	}
	.shtable .sbass :is(thead tr:nth-child(n+2), tbody tr) > *:nth-child(11)
	{
		display: none;
	}
	.catalog .fbass thead tr:nth-child(1) th:is(:nth-child(2), :nth-child(4))
	{
		background: linear-gradient(0deg, var(--table-color-treble1) -100%, var(--table-color-treble2));
	}
	.catalog .fbass thead tr:nth-child(1) th:nth-child(3)
	{
		background: linear-gradient(0deg, var(--table-color-bass1) -100%, var(--table-color-bass2));
	}
	.catalog .fbass thead tr:nth-child(2) th:nth-child(-n+11), .catalog table.fbass thead tr:nth-child(2) th:nth-child(-n+5)
	{
		background: linear-gradient(0deg, var(--table-color-treble1), var(--table-color-treble2) 200%);
	}
	.catalog .fbass thead tr:nth-child(2) th:nth-child(-n+8)
	{
		background: linear-gradient(0deg, var(--table-color-bass1), var(--table-color-bass2) 200%);
	}
	.catalog .fbass thead tr:nth-child(2) th:nth-child(1)
	{
		background: none !important;
	}
	.catalog :is(.sbass, .diato, .bando) thead .widgets td:is(:first-child, :last-child),
	.catalog .fbass thead .widgets td:nth-child(-n+11)
	{
		border-bottom: none;
	}
	.catalog :is(.sbass, .diato, .bando) thead .widgets td:nth-child(n+2),
	.catalog .fbass thead .widgets td:nth-child(n+12),
	.catalog tbody td
	{
		margin-bottom: 2em;
	}
	.catalog tbody th,
	.catalog .fbass tbody tr:not(.group) td:nth-child(-n+11)
	{
		margin-bottom: 2px;
	}
	.newtable .fbass tbody td:nth-child(12)
	{
		white-space: nowrap;
	}
	.newtable .fbass tbody td:nth-child(13)::after,
	.shtable .fbass tbody td:nth-child(14)::after
	{
		content: " ";
		position: absolute;
		right: 60px;
		margin: -0.5em 1em 0 0;
		padding: 0.5em 0;
		width: 80%;
		z-index: -1;
		border-radius: 0 0 10px 0;
	}
	.newtable .fbass tbody td:is(:nth-child(12), :nth-child(13)), .newtable .fbass tbody td:nth-child(13)::after,
	.shtable .fbass tbody td:is(:nth-child(12), :nth-child(13), :nth-child(14)), .shtable .fbass tbody td:nth-child(14)::after
	{
		background-image: none;
		height: 2em;
	}
	.newtable .fbass tbody td:nth-child(14),
	.shtable .fbass tbody td:nth-child(15)
	{
		position: relative;
		top: -3.2em;
		padding: 0 1em 0 1.2em;
		margin-bottom: 0;
	}
	.catalog tbody td
	{
		padding: 0.5em;
	}
	.catalog td a
	{
		margin-top: 0.4em;
	}
}
@media (max-width: 739px)
{
	.newtable .sbass,
	.newtable .diato,
	.catalog .fbass
	{
		grid-template-columns: repeat(4, auto);
	}
	.shtable .sbass,
	.shtable .diato,
	.shtable .bando
	{
		grid-template-columns: repeat(5, auto);
	}
	.catalog tbody td, .catalog tbody tr:not(.group) td:last-child
	{
		padding: 0.4em 0.3em;
	}
	.catalog th, .catalog td
	{
		margin-bottom: 2px;
	}
	.catalog thead tr:nth-child(2) th:first-child
	{
		border-radius: 10px 0 0 0;
	}
	.catalog tbody td:nth-child(n+2)
	{
		background: none !important;
	}
	.catalog tbody tr:not(.group) th
	{
		background-image: none;
		padding-left: 2em;
	}
	.newtable :is(.sbass, .diato) thead .widgets td:nth-child(-n+8),
	.shtable :is(.sbass, .diato) thead .widgets td:nth-child(-n+9),
	.catalog .fbass thead .widgets td:nth-child(-n+11),
	.catalog .bando thead .widgets td:nth-child(-n+7)
	{
		border-bottom: none;
	}
	.catalog thead tr:nth-child(1) > *
	{
		grid-area: 1 / 1;
		clip-path: inset(0 100% 100% 0);
	}
	.catalog thead tr:nth-child(n+2) > *:nth-child(1)
	{
		grid-row: 1;
	}
	.catalog thead tr:nth-child(n+2) > *:nth-child(n+2)
	{
		grid-row: 2;
	}
	.newtable :is(.sbass, .diato) thead tr:nth-child(n+2) > *:nth-child(n+6),
	.shtable :is(.sbass, .diato) thead tr:nth-child(n+2) > *:nth-child(n+7),
	.catalog .fbass thead tr:nth-child(n+2) > *:nth-child(n+6),
	.catalog .bando thead tr:nth-child(n+2) > *:nth-child(n+5)
	{
		grid-row: 3;
	}
	.newtable :is(.sbass, .diato) thead tr:nth-child(n+2) > *:nth-child(n+9),
	.shtable :is(.sbass, .diato) thead tr:nth-child(n+2) > *:nth-child(n+10),
	.catalog .fbass thead tr:nth-child(n+2) > *:nth-child(n+9),
	.catalog .bando thead tr:nth-child(n+2) > *:nth-child(n+8)
	{
		grid-row: 4;
	}
	.catalog .fbass thead tr:nth-child(n+2) > *:nth-child(n+12)
	{
		grid-row: 5;
	}
	.catalog thead tr:nth-child(n+2) > *:nth-child(1),
	.newtable :is(.sbass, .diato) :is(thead tr:nth-child(n+2), tbody tr) > *:is(:nth-child(2), :nth-child(6), :nth-child(9)),
	.shtable :is(.sbass, .diato) :is(thead tr:nth-child(n+2), tbody tr) > *:is(:nth-child(2), :nth-child(7), :nth-child(10)),
	.catalog .fbass :is(thead tr:nth-child(n+2), tbody tr) > *:is(:nth-child(2), :nth-child(6), :nth-child(9), :nth-child(12)),
	.catalog .bando :is(thead tr:nth-child(n+2), tbody tr) > *:is(:nth-child(2), :nth-child(5), :nth-child(8))
	{
		grid-column: 1;
		padding-left: 20px;
		background-size: 18px !important;
		background-repeat: no-repeat !important;
		position: relative; /* containing block for absolute ::before elements */
	}
	.newtable :is(.sbass, .diato) thead tr:nth-child(n+2) > *:is(:nth-child(3), :nth-child(7), :nth-child(10)),
	.shtable :is(.sbass, .diato) thead tr:nth-child(n+2) > *:is(:nth-child(3), :nth-child(8), :nth-child(11)),
	.catalog .fbass thead tr:nth-child(n+2) > *:is(:nth-child(3), :nth-child(7), :nth-child(10), :nth-child(13)),
	.catalog .bando thead tr:nth-child(n+2) > *:is(:nth-child(3), :nth-child(6), :nth-child(9))
	{
		grid-column: 2;
	}
	.newtable :is(.sbass, .diato) thead tr:nth-child(n+2) > *:is(:nth-child(4), :nth-child(8), :nth-child(11)),
	.shtable :is(.sbass, .diato) thead tr:nth-child(n+2) > *:is(:nth-child(4), :nth-child(9), :nth-child(12)),
	.catalog .fbass thead tr:nth-child(n+2) > *:is(:nth-child(4), :nth-child(8), :nth-child(11), :nth-child(14)),
	.catalog .bando thead tr:nth-child(n+2) > *:is(:nth-child(4), :nth-child(7), :nth-child(10))
	{
		grid-column: 3;
	}
	.newtable :is(.sbass, .diato) thead tr:nth-child(n+2) > *:nth-child(5),
	.shtable :is(.sbass, .diato) thead tr:nth-child(n+2) > *:is(:nth-child(5), :nth-child(13)),
	.catalog .fbass thead tr:nth-child(n+2) > *:is(:nth-child(5), :nth-child(15)),
	.catalog .bando thead tr:nth-child(n+2) > *:nth-child(11)
	{
		grid-column: 4;
	}
	.shtable :is(.sbass, .diato) thead tr:nth-child(n+2) > *:nth-child(6),
	.catalog .bando thead tr:nth-child(n+2) > *:nth-child(12)
	{
		grid-column: 5;
	}
	.catalog thead tr:nth-child(n+2) > *:last-child
	{
		grid-column-end: -1 !important;
	}
	.catalog :is(thead tr:nth-child(2) th, tbody td):nth-child(2),
	.catalog .fbass :is(thead tr:nth-child(2) th, tbody td):nth-child(9)
	{
		background-image: linear-gradient(90deg, var(--table-color-treble1), 95%, white) !important;
	}
	.newtable :is(.sbass, .diato) :is(thead tr:nth-child(2) th, tbody td):nth-child(6),
	.shtable :is(.sbass, .diato) :is(thead tr:nth-child(2) th, tbody td):nth-child(7),
	.catalog .fbass :is(thead tr:nth-child(2) th, tbody td):nth-child(6),
	.catalog .bando :is(thead tr:nth-child(2) th, tbody td):nth-child(5)
	{
		background-image: linear-gradient(90deg, var(--table-color-bass1), 95%, white) !important;
	}
	.catalog thead tr:nth-child(2) th:nth-child(1),
	.newtable :is(.sbass, .diato) :is(thead tr:nth-child(2) th, tbody td):nth-child(9),
	.shtable :is(.sbass, .diato) :is(thead tr:nth-child(2) th, tbody td):nth-child(10),
	.catalog .fbass :is(thead tr:nth-child(2) th, tbody td):nth-child(12),
	.catalog .bando :is(thead tr:nth-child(2) th, tbody td):nth-child(8)
	{
		background-image: linear-gradient(90deg, var(--table-color-global1), 95%, white) !important;
	}
	.catalog tbody tr.selected td:nth-child(2),
	.catalog .fbass tbody tr.selected td:nth-child(9)
	{
		background-image: linear-gradient(90deg, var(--table-color-selected-treble1), 95%, white) !important;
	}
	.catalog :is(.sbass, .diato) tbody tr.selected td:nth-child(7),
	.catalog .fbass tbody tr.selected td:nth-child(6),
	.catalog .bando tbody tr.selected td:nth-child(5)
	{
		background-image: linear-gradient(90deg, var(--table-color-selected-bass1), 95%, white) !important;
	}
	.catalog :is(.sbass, .diato) tbody tr.selected td:nth-child(10),
	.catalog .fbass tbody tr.selected td:nth-child(12),
	.catalog .bando tbody tr.selected td:nth-child(8)
	{
		background-image: linear-gradient(90deg, var(--table-color-selected-global1), 95%, white) !important;
	}
	.newtable :is(.sbass, .diato) :is(thead tr:nth-child(n+2), tbody tr) > *:nth-child(n+9),
	.shtable :is(.sbass, .diato) :is(thead tr:nth-child(n+2), tbody tr) > *:nth-child(n+10),
	.catalog .fbass :is(thead tr:nth-child(n+2), tbody tr) > *:nth-child(n+12),
	.catalog .bando :is(thead tr:nth-child(n+2), tbody tr) > *:nth-child(n+8)
	{
		margin-bottom: 2em;
	}
	.newtable :is(.sbass, .diato) :is(thead tr:nth-child(2) th, tbody td):is(:nth-child(2), :nth-child(6))::before,
	.shtable :is(.sbass, .diato) :is(thead tr:nth-child(2) th, tbody td):is(:nth-child(2), :nth-child(7))::before,
	.catalog .fbass :is(thead tr:nth-child(2) th, tbody td):is(:nth-child(2), :nth-child(6), :nth-child(9))::before,
	.catalog .bando :is(thead tr:nth-child(2) th, tbody td):is(:nth-child(2), :nth-child(5))::before
	{
		content: "";
		position: absolute;
		left: 3px;
		top: 50%;
		margin-top: -10px;
		width: 12px;
		height: 21px;
		background-image: url('../media/res/responsive-header-labels.png');
		background-repeat: no-repeat;
	}
	.catalog :is(thead tr:nth-child(2) th, tbody td):nth-child(2)::before
	{
		background-position-x: 0px; /* MD */
	}
	.newtable :is(.sbass, .diato) :is(thead tr:nth-child(2) th, tbody td):nth-child(6)::before,
	.shtable :is(.sbass, .diato) :is(thead tr:nth-child(2) th, tbody td):nth-child(7)::before,
	.catalog .bando :is(thead tr:nth-child(2) th, tbody td):nth-child(5)::before
	{
		background-position-x: -22px; /* MG */
	}
	.catalog .fbass :is(thead tr:nth-child(2) th, tbody td):nth-child(6)::before
	{
		background-position-x: -44px; /* BS */
	}
	.catalog .fbass :is(thead tr:nth-child(2) th, tbody td):nth-child(9)::before
	{
		background-position-x: -66px; /* BC */
	}
	.catalog .selected td::before
	{
		filter: invert() brightness(2);
	}
	.catalog .selected td:nth-child(n+2)
	{
		color: #585858;
	}
}
@media (max-width: 539px)
{
	.catalog table
	{
		padding: 0;
	}
	.catalog th,
	.catalog td
	{
		border-radius: 0 !important;
	}
}

.modelpics .brand img, .newmodels .brand img
{
	width: 280px;
	height: 66px;
}

.modeldetails
{
	margin-left:0;
	padding-left:2em;
	padding-right:1.5em;
	background:none;
}
.modeldetails h2
{
	background-position:0 3.05em;
}
@media (min-width: 980px)
{
	.shmodel + .modelpics
	{
		margin-top: 3em;
	}
}
@media (max-width: 979px)
{
	.modeldetails
	{
		padding-right: 1em;
		padding-left: 1em;
	}
}
@media (max-width: 885px)
{
	.modeldetails
	{
		width: calc(100% - 315px);
	}
	.modelpics
	{
		width: 310px;
	}
}
@media (max-width: 739px)
{
	.modeldetails
	{
		float: none;
		width: auto;
	}
	.modelpics
	{
		float: none;
		width: auto;
		margin-top: 3em;
	}
	.newmodel h1, .newmodels h1
	{
		padding-bottom: 90px;
		white-space: nowrap;
	}
	.modelpics .brand, .newmodels .brand
	{
		position: absolute;
		top: 3.25em;
		left: 0;
		margin-top: 4em;
		width: 100%;
		box-sizing: border-box;
	}
	.modeldetails:not(.newmodel) .datasheet h2
	{
		margin-top: 0.5em;
	}
}
@media (max-width: 539px)
{
	.modeldetails .datasheet div
	{
		padding:0 1.5em 0 0;
	}
	.modeldetails .datasheet span:first-child
	{
		text-align:left;
		width:auto;
		margin:0.25em 0;
		position:static;
	}
	.modeldetails .datasheet ul
	{
		list-style-type: square;
		padding-left: 1em;
	}
	.modeldetails .datasheet li
	{
		padding-left: 0.2em;
	}
	.modeldetails .datasheet .bass ul + .group
	{
		margin-top: 0.4em;
	}
	.modeldetails .regist .bass li div, .modeldetails .regist .freebass li div
	{
		padding-left: 0;
	}
	.modeldetails .regist .bass p, .modeldetails .regist .freebass p
	{
		position: static;
		margin: 0.4em 0 0.2em 0;
	}
	.modeldetails .price
	{
		float: none;
		text-align: right;
	}
	.modeldetails .price p
	{
		margin: 0.3em 0;
		display: block;
	}
	.modelpics .brand
	{
		margin-top: 5.5em;
	}
}


@media (max-width: 539px)
{
	.sitemap div
	{
		width: 98%;
	}
}


@media (max-width: 539px)
{
	.contact div
	{
		font-size: 0.95em;
	}
	.contact .coord p
	{
		padding-left: 0;
	}
	.contact .coord h3
	{
		display: none;
	}
	.contact .sched
	{
		padding-left: 1em;
	}
	.contact .sched p
	{
		margin-top: 0;
	}
	.contact .sched h3
	{
		position: static;
		margin: 0.75em 0 0 0;
		display: list-item;
		list-style-type: square;
		color: #444;
		text-align: left;
	}
	.contact .sched p, .contact .sched h3
	{
		padding-left: 0.25em;
	}
}

@media (min-width: 740px)
{
	.localmap #canvas
	{
		margin-right: 0.5em;
	}
}


#nav
{
	clear: both;
	font-size: 0.85em;
}
#nav ul
{
	list-style-type: none;
}
#nav > ul
{
	display: flex;
	justify-content: center;
	padding: 2em 2% 0 3%;
}
#nav > ul > li
{
	flex-grow: 1;
}
#nav li ul
{
	border-top: 1px solid #ccc;
	padding: 0.25em 0;
}
#nav li:nth-child(-n+5) ul
{
	padding-right: 0.8em;
}
#nav li li
{
	padding: 0.45em 0;
	line-height: 1.1;
}


@media (max-width: 739px)
{
	#nav
	{
		display:none;
	}

	#signature
	{
		background-image: url('../media/res/signature-medium.png');
		background-size: 100%;
		height: 77px;
		max-width: 440px;
		margin: -38px 0 2em auto;
	}
}

@media (max-width: 539px)
{
	#copy i
	{
		display: block;
	}
}