/**********************************************************
// Footer >> Main
**********************************************************/
.Footer {
	padding: var(--100px) var(--20px);
	background: var(--Color-Black);
	color: var(--Color-White);
	}

/**********************************************************
// Footer >> Logo
**********************************************************/
.Footer-Logo {
	text-align: center;
	line-height: 0;
	font-size: 0;
	}

.Footer-Logo a {
	padding: var(--5px);
	border-radius: var(--5px);
	display: inline-block;
	}

.Footer-Logo:focus-visible,
.Footer-Logo a:focus { outline: var(--1px) solid rgba(255, 255, 255, 0.25); }

.Footer-Logo img {
	width: auto;
	height: auto;
	max-height: 6rem;
	}

/**********************************************************
// Footer >> Nav
**********************************************************/
.Footer-Nav {
	margin: var(--70px) auto 0 auto;
	width: 100%;
	max-width: 22.5rem;
	}

.Footer-Nav ul {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	}

.Footer-Nav li {
	padding: var(--10px) 0;
	text-align: center;
	}

.Footer-Nav a {
	text-transform: uppercase;
	letter-spacing: var(--1px);
	font-weight: 300;
	font-size: var(--14px);
	transition: 0.2s top ease-in-out;
	color: var(--Color-White);
	position: relative;
	top: 0;
	}

.Footer-Nav a:before {
	content: '';
	height: var(--2px);
	opacity: 0;
	transition: all 0.2s ease-in-out;
	background: var(--Color-White);
	position: absolute;
	bottom: -0.125rem;
	right: 0;
	left: 0;
	}

.Footer-Nav a:hover:before,
.Footer-Nav a:focus:before,
.Footer-Nav a:focus-visible:before { opacity: 1; }

.Footer-Nav a:hover,
.Footer-Nav a:focus,
.Footer-Nav a:focus-visible {
	color: var(--Color-White);
	text-decoration: none;
	top: -0.125rem;
	}

/**********************************************************
// Footer >> Meta
**********************************************************/
.Footer-Meta {
	margin: var(--100px) auto 0 auto;
	padding: var(--20px) 0;
	line-height: 1.5em;
	text-align: center;
	font-weight: 300;
	font-size: var(--14px);
	}

.Footer-Meta a {
	color: var(--Color-White);
	transition-property: top, text-decoration-color;
	transition-duration: .2s;
	transition-timing-function: ease-in-out;
	-webkit-text-decoration-color: transparent;
	   -moz-text-decoration-color: transparent;
			text-decoration-color: transparent;
	display: inline-block;
	position: relative;
	top: 0;
	}

.Footer-Meta a:hover,
.Footer-Meta a:focus,
.Footer-Meta a:focus-visible {
	text-decoration: underline;
	text-underline-offset: var(--4px);
	-webkit-text-decoration-color: var(--Color-White);
	   -moz-text-decoration-color: var(--Color-White);
			text-decoration-color: var(--Color-White);
	top: -0.125rem;
	}

/**********************************************************
// Media Queries
**********************************************************/
@media /* 1024px */
all and (max-width: 64rem),
all and (max-device-width: 64rem)
{

}

@media /* 768px */
all and (max-width: 48rem),
all and (max-device-width: 48rem)
{
	.Footer { padding: var(--30px) var(--20px); }
	.Footer-Nav { margin: var(--30px) auto 0 auto; }
	.Footer-Meta {
		margin: var(--30px) auto 0 auto;
		padding-bottom: 0;
		}
}