/*-------------------------------------------
	Table
-------------------------------------------*/

table {
    border-collapse: separate;
    -webkit-border-horizontal-spacing: 1vw;
}

table tr {
    margin: 1vw;
}

table td {
    border-collapse: inherit;
    margin: 1vw;
    padding: 1vw;
    text-align: center;
}

header .heading {
	display: flex;
	border: none !important;
	text-align: center;
	flex-direction: row-reverse;
	align-items: center;
	width: 100%;
}

/*-------------------------------------------
	Nav Menu
-------------------------------------------*/

nav ul {
    overflow-y: hidden;
    overflow-x: auto;
    position: relative;
	display: inline-flex;
	max-width: 100%;
	white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
	-webkit-transition: all 0.25s ease-in-out;
	-o-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;
}

nav ul.links li {
	background: var(--primary-40-rgba);
    border-bottom: 1px dashed var(--dark-40-rgba);
    display: inline-block;
	text-align: center;
	list-style: none;
    padding: 1dvw;
	margin: 0.12rem;
}

nav ul.links li:hover {
	color: var(--light-hex) !important;
	background: var(--primary-80-rgba) !important;
}

nav ul.links li a:hover, nav .icon:before {
	color: var(--light-hex) !important;
}

nav ul.popup li:not(.primary) {
	border-bottom: none;
	border-left: 0.08rem dashed var(--primary-40-rgba);
	padding: 0rem !important;
}

nav a {
	color: var(--dark-80-rgba);
	display: table;
	font-size: 12px;
	margin: 0.5rem;
	text-transform: uppercase;
	font-weight: bold;
	letter-spacing: 1px;
}

nav .icon:before {
	color: var(--dark-20-rgba);
}

nav .icon:hover:before {
	color: var(--primary-80-rgba);
}

nav .icon:before > a:active {
	color: var(--dark-80-rgba);
}

nav a:active, nav a:hover, nav a:focus {
	text-decoration: bold;
}

nav li:active, nav li:hover, nav li:focus {
	color: var(--dark-hex);
	transition: all 0.25s ease-in;
}


nav li a.active {
    text-transform: uppercase;
	color: var(--primary-hex);
	text-shadow: 0px 1px 2px var(--dark-20-rgba);
    text-decoration: bold;
}

nav li.primary:not(:first-child) {
	margin-top: 1dvw !important;
}

ul.icons {
    padding: 0 0.25rem;
}

ul.icons a:hover {
    color: var(--primary-hex) !important;
}

/*-------------------------------------------
	Nav Menu Dropdown
-------------------------------------------*/

#nav {
	background-color: transparent;
	color: var(--dark-hex);
	display: block;
	height: fit-content;
	margin: 1dvw auto -3rem auto;
	max-width: 100%;
	overflow-x: hidden;
}

#nav.dropdown {
	display: block;
}

#nav.dropdown li {
	float: left;
	height: 100%;
}

#nav.dropdown li > a {
	display: block;
	height: 100%;
	line-height: 1dvw;
	text-align: center;
	transition: background-position 0.25s ease 0s;
}

#nav.dropdown li > div > li {
	transition: background-position 0.25s ease 0s;
}

#nav.dropdown li > div > li:hover {
	color: var(--primary-hex);
	background-position: 100% 0;
}

#nav.dropdown > div:not(.active):hover > a:active {
	background: var(--primary-hex);
	color: var(--light-hex);
}

#nav.dropdown li,
#nav.dropdown li > a {
	transition: all 0.25s ease;
}

#nav.dropdown li {
	position: relative;
}

#nav.dropdown li > a {
	text-transform: uppercase;
}

#nav.dropdown li > div {
	display: none;
	max-width: auto;
	overflow: hidden;
	position: absolute;
	z-index: 999;
}

#nav.dropdown li:hover > div {
	position: absolute;
}

#nav.dropdown li:hover > div > a {
	background: var(--primary-80-rgba);
	color: var(--light-hex);
	font-size: 80%;
	width: 100%;
	padding: 0.5rem;
	margin: 0.5rem;
	display: block;
	position: relative;
}

#nav.dropdown li:hover > div > a:hover {
	background: var(--dark-80-rgba);
	color: var(--origin-hex) !important;
}

#nav.dropdown li:not(:first-of-type):not(:last-of-type) > div {
	border-radius: 0.12rem;
}

#nav.dropdown li:first-of-type > div {
	left: 0;
	border-radius: 0 0 3px 0;
}

#nav.dropdown li:last-of-type > div {
	right: 0;
	border-radius: 0 0 0 3px;
}

#nav.dropdown li:hover > div {
	display: block;
}

#nav.dropdown li:hover,
#nav.dropdown li:hover > div {
	position: relative;
	display: list-item;
}

#nav.dropdown li > div > li > a {
	background: #2c2d2f linear-gradient(to left, #DB3839 50%, #2c2d2f 50%) repeat scroll 0 0 / 200% 100%;
	border-radius: 2px;
	display: block;
	float: left;
	margin: 2%;
	padding: 8px 10px;
	text-align: center;
	transition: background-position 0.25s ease;
	width: 46%;
}

#nav.dropdown li > div > li:hover {
	background-position: 100% 0;
	cursor: pointer;
}