#main h1.title:not(.short) { font-size: 36px; margin-bottom: 12px;} div.leftNav { position: relative; position: sticky; position: -webkit-sticky; z-index:3; top: 6px; float:left; left: calc(50vw - 640px)} div.leftNav.rightNav { left: auto; float:right; right: calc(50vw - 640px); } div.leftNav.s { top: 116px; transition: top 0.35s ease-in-out; } .primary-nav-hidden div.leftNav.s { top: 42px; } .leftNav+div { padding-top:0; overflow:hidden; } .leftNav~div .contain, .leftNav~div .fixed-width { max-width: 1000px; margin-right:calc(50vw - 640px); overflow:hidden;} .leftNav.rightNav~div .contain, .leftNav.rightNav~div .fixed-width { margin-left: calc(50vw - 640px); } .leftNav~div .contain .contain { margin:0; } .leftNav+.content .wrapper { clear: none; } .leftNav+div::after { content:""; display:block; clear:left; } #main>div::after { content:""; display:block; clear:both; } .leftNav+div>div:first-child>article>.clap-blade { margin-top: 0; } div.leftNav>ul { width: 260px; } div.leftNav ul.leftnav { margin:54px 0 24px; padding:0; background: #fff; box-sizing: border-box; border-top: solid 2px #000;} ul.leftnav li.title { font-size: 16px; padding: 6px 6px 6px 24px; font-family:NHaasGroteskTXW01-75Bd,NeueHaasGrotesk,Arial; } ul.leftnav li { display: block; list-style: none; margin:0; padding:0; xborder-top: solid 1px #eee;} ul.leftnav li:first-child { border: none; } ul.leftnav ul { margin:0; padding:0; position: relative; } ul.leftnav a { display: block; position: relative; padding: 4px 6px 4px 24px; text-decoration: underline; color: #000; font-size: 14px;} ul.leftnav a:hover { background-color: rgba(240,240,240,0.5); } ul.leftnav li.active>a { background: #000; color: #fff; text-decoration:none;} ul.leftnav a::before { content:""; display: block; position: absolute; top:12px; width: 6px; left: 8px; border-left: solid 1px rgba(160,160,160,0.5); border-bottom: solid 1px rgba(160,160,160,0.5); } ul.leftnav li.active>a::before { height: 6px; transform: rotate(-135deg); } ul.leftnav li.open>a::before { content:""; border-width: 2px; width: 8px; height: 8px; margin-left:6px; transform: rotate(-45deg); } ul.leftnav>li.open>a::before { margin-left:-4px; } ul.leftnav ul::before { content:""; display:block; position: absolute; left: 8px; top:-6px; bottom:12px; border-left: dotted 1px rgba(160,160,160,0.5); } ul.leftnav ul ul::before { left: 18px; } ul.leftnav ul ul ul::before { left: 26px; } ul.leftnav ul a { padding-left: 30px; } ul.leftnav ul a::before { left: 8px; } ul.leftnav ul ul a { padding-left: 36px; font-size: 13px; } ul.leftnav ul ul a::before { left: 18px; } ul.leftnav ul ul ul a { padding-left: 42px; font-size: 12px} ul.leftnav ul ul ul a::before { left: 26px; } .leftNav>input, .leftNav>label { display: none; } @media (max-width: 1280px) { div.leftNav { left:0; } div.leftNav.rightNav { left: auto; right:0; } .leftNav~div .contain, .leftNav~div .fixed-width { margin-right:0; max-width: calc(100vw - 280px);} .leftNav.rightNav~div .contain, .leftNav.rightNav~div .fixed-width { margin-left:0; } } @media (max-width: 992px) { div.leftNav { position: absolute; position: sticky; position: -webkit-sticky; margin-right: -100%; top:auto; left:0; z-index:9; margin-top:-24px;} div.leftNav.rightNav { left:auto; right:0; margin-bottom: -12px; margin-left: -100%; margin-right: 0;} div.leftNav.s { top: 112px; } .primary-nav-hidden div.leftNav.s { top: 42px; } .leftNav+div { padding-top: 42px; } div.leftNav ul.leftnav { margin-top:6px; } .leftNav~div .contain, .leftNav~div .fixed-width { max-width: 100%;} ul.leftnav li { display: none; } ul.leftnav li.open { display: block; } ul.leftnav li.open>a { display: none; } ul.leftnav li.active,ul.leftnav li.active>a { display: block; } .leftNav>label { position: absolute; z-index:6; cursor: pointer; display: block; top:0; left:0; right:0; bottom:0; opacity:1; } .leftNav>label::before { content:""; display: block; position: absolute; right: 48%; bottom:12px; border: solid 6px transparent; border-top-color: #000; } .leftNav input:checked~label::before { bottom:auto; top:4px; border-bottom-color: #000;border-top-color: transparent;} .leftNav input:checked~label { bottom: auto; height: 16px; margin-bottom: -1px; background: #fff; opacity:1; } .leftNav input:checked~ul { box-shadow: 1px 1px 2px #333; } .leftNav input:checked~ul li, .leftNav input:checked~ul li>a { display: block; } } @media print { div.leftNav { display: none; } .leftNav+div { padding-top: 0; } .leftNav~div .contain, .leftNav~div .fixed-width { max-width: 100%;} }