/*******************
	FOOTER
*******************/

footer {
	position: relative;
	text-align: left;
	padding: calc(var(--gutter) * 1) 0;
	background: var(--color1);
	color: #fff;
	overflow: hidden;
}

.footer-cols {
	--g : 2em;
	display: flex;
	flex-wrap: wrap;
	padding: 0;
	width: calc(100% + (var(--g) * 1));
	margin-left: calc(var(--g) * -0.5);
}
.footer-cols > * {
	flex: 0 0 100%;
	padding: calc(var(--g) * 0.5);
}
.footer-logo img {
	width: 20em;
}
.footer-slogan > * {
	line-height: 1.3em;
	font-size: 2.5em;
	font-weight: 700;
}
.footer-title {
	margin-bottom: 1.75em;
}
.footer-title > * {
	font-size: 1.125em;
	line-height: 1.3em;
	text-transform: uppercase;
}
.footer-menu {
}
.footer-menu ul {
	list-style-type: none;
	line-height: 1.25em;
}
.footer-menu li {
	z-index: 2;
	position: relative;
	margin-bottom: 0.75em;
}
.footer-menu a {
	position: relative;
	font-size: 1.25em;
	font-weight: 700;
}
.footer-menu a:hover {
	text-decoration: underline;
}

footer .text a {
	text-decoration: underline;
}

footer .text a:hover {
	color: var(--color2);
}

footer .mentions {
	font-size: 14px;
	line-height: 1.4em;
	text-align: left;
}

footer .socials > * {
	background-color: var(--color2);
}
footer .socials > *:hover {
	background-color: #fff;
}


@media screen and (min-width: 1000px) {
	.footer-cols { --g: 3em }
	.footer-cols > *:nth-child(1) { flex: 0 0 45%; }
	.footer-cols > *:nth-child(2) { flex: 0 0 55%; }
	footer .wrapper .footer-cols:first-child {
		align-items: center;
	}
	.footer-slogan {
		position: relative;
		top: 5px;
	}
}
@media screen and (max-width:650px) {
	footer .grid--2 > * { flex: 0 0 100% }
}