/* HEADER +++++++++++++++++++++++++++ ++++++++++++++ */

/* begin ++++++++  MAIN NAV ++++++++++++ */

/* ++++++++ INITIAL HEIGHT ++++++++++++ */
.nav-default {
	display:flex;
	flex-flow: row nowrap;
	order:1;
	}
/* ++++++++ INITIAL HEIGHT ++++++++++++ */
/* ++++++++++++++ EXPANDED NAV +++++++++++++ */
.nav-expanded {
	width:100vw;
	min-height:100vh;
	height:100vh;
	top:0;
	left:0;
	order:3;
	background:var(--black);
	}
/* ++++++++++++++ EXPANDED NAV +++++++++++++ */
/* ++++++++++++++ DESKTOP NAV +++++++++++++ */
.desktop-menu {
	display:none;
	}
/* ++++++++++++++ DESKTOP NAV +++++++++++++ */

.nav-footer {
	width:100vw;
	background:var(--blackT-deg180);
	position:sticky;
	top:calc(100% - 7.6rem + .25ex);
	left:0;
	z-index:3;
	}
footer {
	visibility:visible;
	height:7.6rem;
	}
/* end ++++++++  MAIN NAV ++++++++++++ */
.menu {
	margin-left:0.3rem;
	}
.menu:last-of-type {
	margin-left:-0.3rem;
	}
/* begin +++++++++++ MENU ICON STRUCTURE */
.menu-icon,
.menu-icon:hover,
.menu-icon:active,
.menu-icon-symbol {
	z-index:4;
	}
.menu-icon-symbol,
.menu-icon-symbol::before,
.menu-icon-symbol::after {
	position:absolute;
	right:0;
	cursor:pointer;
	}
.menu-icon-symbol {
	cursor:pointer;
	position:absolute;
	top:0;
	}
.menu-icon-symbol::before,
.menu-icon-symbol::after {
	content:"";
	}
.menu-icon-symbol:hover,
.menu-icon-symbol:active,
.menu-icon-symbol:hover::before,
.menu-icon-symbol:active::before,
.menu-icon-symbol:hover::after,
.menu-icon-symbol:active::after {
	border-bottom:0.2rem solid var(--gray8);
	}
.menu-icon-symbol:hover,
.menu-icon-symbol:active,
.menu-icon-symbol:hover::before,
.menu-icon-symbol:active::before {
	border-top:0.2rem solid var(--gray8);
	}
/* end +++++++++++ MENU ICON STRUCTURE */
/* begin +++++++++  THUMBNAILS ++++++++++ */

.thumbnail-menu {
	display:flex;
	flex-flow:column wrap;
	justify-content:flex-start;
	padding-bottom:2.6rem;
	order:2;
	}
.thumb,
.thumb:hover, 
.thumb:active {
	margin-top:0.3rem;
	cursor:pointer;
	&::before,
	&::after	{
		width:calc(100% - 0.2rem);
		height:calc(100% - 1.11rem);
		background-position: bottom right;
		background-repeat: no-repeat;
		position:absolute;
		bottom:0.1rem;left:0.1rem;
		visibility:hidden;
		opacity:0;
		}
	&:hover::before,
	&:active::before,
	&:hover::after,
	&:active::after {
		width:calc(100% - 0.2rem);
		color:var(--gray3);
		line-height:1.6rem;
		padding:0.9rem 1.6rem 0 1.0rem;
		box-sizing: border-box;
		visibility:visible;
		opacity:1.0;
		z-index:1;
		}
	&:hover::before,
	&:active::before {
		content: attr(data-title);
		height:33%;
		font: var(--head5);
		white-space:nowrap;
		background-image:var(--whiteT-deg306), var(--whiteT-deg54);
		background-size: 100% 66%, 100% 100%;
		background-position: bottom left, bottom left;
		background-repeat: no-repeat;
		}
	&:hover::after,
	&:active::after {
		max-width:85%;
		content: attr(data-text);
		height:25%;
		font: var(--sans-serif-body-small);
		hyphens: auto;
		margin-top:0.2rem;
		white-space: pre-line;
		}
	}

.thumb:nth-child(1),
.thumb:nth-child(1) {
	order:1;
	}
.thumb:nth-child(2),
.thumb:nth-child(2) {
	order:2;	
	}
.thumb:nth-child(3),
.thumb:nth-child(3) {
	order:3;
	}
.thumb:nth-child(4),
.thumb:nth-child(4) {
	order:4;		
	}
.thumb:nth-child(5),
.thumb:nth-child(5) {
	order:5;		
	}
.thumb:nth-child(6),
.thumb:nth-child(6) {
	order:6;
	}
.thumb:nth-child(7),
.thumb:nth-child(7) {
	order:7;
	}
.thumb:nth-child(8),
.thumb:nth-child(8) {
	order:8;
	}
.thumb:nth-child(9),
.thumb:nth-child(9) {
	order:9;
	}
.thumb:nth-child(10),
.thumb:nth-child(10) {
	order:10;
	}
.thumb:nth-child(11),
.thumb:nth-child(11) {
	order:11;
	}
.thumb:nth-child(12),
.thumb:nth-child(12) {
	order:12;
	}
/* end +++++++++  THUMBNAILS ++++++++++ */

/* FOOTER NAV +++++++++++++++++++++++++++ ++++++++++++++ */
footer {
	background:var(--black);
	z-index:3;
	}
.nav-footer {
	width:100vw;
	position:absolute;
	left:0;
	}
a.footer-links:link,
a.footer-links:visited,
a.footer-links:hover,
a.footer-links:active {
	width:3.4rem;
	height:5.6rem;
	color:transparent;
	background:none;
	text-decoration:none;
	display:inline-block;
	}

/* begin ++++++++  FOOTER NAV ++++++++++++ */

ul.footer-paging,
ul.footer-paging li,
ul.footer-paging .col-fa,
ul.footer-paging .bw-fa,
ul.footer-paging .sketch-fa,
ul.footer-paging .col-illus,
ul.footer-paging .bw-illus {
	min-width:0;
	min-height:0;
	padding-right:0;
	display:flex;
	align-content:flex-start;
	cursor:pointer;
	}

ul.footer-paging {
	background:var(--gray3-deg54);
	flex-flow: row nowrap;
	justify-content:center;
	align-items:stretch;
	padding:1.6rem 0 1.6rem;
	}
ul.footer-paging li {
	flex:0 0 50%;
	}
ul.footer-paging .col-fa,
ul.footer-paging .bw-fa,
ul.footer-paging .sketch-fa,
ul.footer-paging .col-illus,
ul.footer-paging .bw-illus {
	flex-flow: row wrap;
	justify-content:flex-start;
	align-items:flex-start;
	}
ul.footer-paging .col-fa,
ul.footer-paging .bw-fa,
ul.footer-paging .sketch-fa,
ul.footer-paging .col-illus,
ul.footer-paging .bw-illus {
	display:none;
	}
.foot-tooltip,
.next-tooltip,
.back-tooltip {
	min-width:0;
	min-height:0;
	padding:0 0.9rem;
	left:0.6rem;
	z-index:2;
	opacity:1;
	}
.next-tooltip,
.back-tooltip {
	color:var(--gray5);
	border-top:0.1rem solid var(--gray4);
	margin-top:0.3rem;
	padding: 0 0 0 0.9rem;
	flex:0 0 50%;
	}
.foot-tooltip[data-content]::after,
.foot-tooltip[data-content]::after {
	font: var(--sans-serif-body);
	}
.foot-tooltip:hover[data-content]::after,
.foot-tooltip:active[data-content]::after,
.next-tooltip:hover::after,
.next-tooltip:active::after,
.back-tooltip:hover::after,
.back-tooltip:active::after {
	color:var(--gray7);
	}
.foot-tooltip[data-content]::after,
.foot-tooltip[data-content]::after,
.foot-tooltip:hover[data-content]::after,
.foot-tooltip:active[data-content]::after {
	content:attr(data-content);
	}
.next-tooltip::after,
.next-tooltip:hover::after,
.next-tooltip:active::after {
	content:"Next";
	}
.back-tooltip::after,
.back-tooltip:hover::after,
.back-tooltip:active::after {
	content:"Back";
	}
/* end ++++++++  FOOTER NAV ++++++++++++ */

/* begin +++++++++ PAGING ICON STRUCTURE */
.paging-icon-container::before,
.paging-icon-container::after  {
	content:"";
	overflow:hidden;
	position:absolute;
	top:0;
	transform:rotate(0);
	cursor:pointer;
	}
.page-right,
.page-right:hover,
.page-right:active,
.page-left,
.page-left:hover,
.page-left:active,
.page-right-disabled,
.page-left-disabled {
	border-top:0.250rem solid transparent;
	border-right:0.250rem solid transparent;
	border-bottom:0.250rem solid var(--gray5);
	border-left:0.250rem solid var(--gray5);
	position:absolute;
	cursor:pointer;
	z-index:1;
	}
.page-left,
.page-left:hover,
.page-left:active,
.page-left-disabled  {
	left:0.9rem;
	transform:rotate(45deg);
	}
.page-right,
.page-right:hover,
.page-right:active,
.page-right-disabled  {
	transform:rotate(225deg);
	}
.page-left:hover,
.page-left:active,
.page-right:hover,
.page-right:active {
	border-bottom:0.250rem solid var(--gray8);
	border-left:0.250rem solid var(--gray8);
	}
.page-right-disabled,
.page-left-disabled {
	border-bottom:0.250rem solid var(--gray4);
	border-left:0.250rem solid var(--gray4);
	cursor:default;
	}
/* end +++++++++ PAGING ICON STRUCTURE */
/* PAGE NAV */
/* end ++++++++++ PAGING ELEMENTS ++++++++++ */

/* begin ++++++++  NAVIGATION ACCORDION ++++++++++++ */

.menu-items {
	width:85vw;
	left:1.6rem
	}
.accordion {
		& details {
		min-height:0;
		border-width: 0 0 0.1rem 0;
		border-style:solid;
		cursor:pointer;
		}
	}
.accordion {
	width:calc(85vw - 2.5rem);
	top:0.6rem;
	border-color:var(--gray5);
	color:var(--gray5);
	display:block;
	padding: 0 2.4rem 0 0;
		}
		& summary {
			height:3.2rem;
			& summary::-webkit-details-marker {
			display: none !important;
			opacity:0 !important;
			-webkit-appearance:none !important;
			width: 0 !important;
			height: 0 !important;
			margin-right: 0 !important;
			}
		&:hover,
		&:active {
			color:var(--gray7);
			}
			& summary::marker {
			content:"" !important;
			}
		}
	}
details summary::-webkit-details-marker {
  display:none;
	}

/* ________________ OPEN TRANSITION */
details summary {
	font: var(--head4);
	min-height:3.2rem;
	line-height:3.0rem;
	cursor:pointer;
	}
details summary ~ ul {
	top:0.2rem;
	}
details summary ~ ul li {
	font: var(--sans-serif-body);
	text-indent:1.6rem;
	min-height:3.2rem;
	line-height:3.0rem;
	border-width: 0 0 0.1rem 0;
	border-style: solid;
	cursor:pointer;
	color:var(--black);
	border-color:var(--black);
		&:hover,
		&:active {
		color:var(--gray8);
		} 
	}

/* OPEN DETAILS SECTION */
details[open] summary ~  ul li {
	background:var(--grayT6-deg90);
	animation: move 2s, reveal 2.5s;
	-webkit-animation: move 2s, reveal 2.5s;
	}
@-webkit-keyframes move {
	0%    {
	-webkit-transform: scale(0);
	}
	100%  {
	-webkit-transform: scale(1);
	}
}
@-webkit-keyframes reveal {
	0%    {
	opacity: 0;
	}
	100%  {
	opacity:1;
	}
}
@keyframes move {
	0%    {
	transform: scale(0);
	}
	100%  {
	transform: scale(1);
	}
}
@keyframes reveal {
	0%    {
	opacity: 0;
	}
	100%  {
	opacity:1;
	}
}
.nav-closed,
.nav-open {
	width:100%;
	transform:none;
	appearance: none;
	position:absolute;
	cursor:pointer;
	top:0;left:0;
	}
.nav-closed::after,
.nav-closed::before,
.nav-open::after,
.nav-open::before {
	content:"";
	width:2.0rem;
	height:0.175rem;
	background:var(--gray5);
	transform-origin: center;
	top:1.2rem;right:1.2rem;
	appearance: none;
	position:absolute;
	cursor:pointer;
	}
.nav-closed::before {
	transform:rotate(90deg);
	}
.nav-open::after {
	transform:none;
	}
.nav-open::before {
	visibility:hidden;
	}
.nav-closed:hover::after,
.nav-closed:active::after,
.nav-open:hover::after,
.nav-open:active::after,
.nav-closed:hover::before,
.nav-closed:active::before,
.nav-open:hover::before,
.nav-open:active::before {
	color:var(--gray8);
	background:var(--gray8);
	}
.divider {
width:100%;
height:0.2rem;
font-size:0.1rem;
padding:0;
background:var(--grayT5-deg54);
transform:rotate(180deg);
}

/* end ++++++++  NAVIGATION ACCORDION ++++++++++++ */