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

footer {
	text-align: left;
}


footer .col-slogans {
	flex: 1;
	padding-right: calc(var(--gutter) * 1.5);
}
.col-slogans .title {
	font-size: 0.75em;
}
.col-slogans .title:not(:last-child) {
	margin-bottom: calc(var(--gutter) * 1.5);
}

footer .col-menu {
	flex: 0 0 20em;
	padding-right: calc(var(--gutter) * 1.5);
}
.footer-menu > ul {
	list-style-type: none;
}
.footer-menu > ul > li {
	text-transform: uppercase;
	line-height: 1.3em;
	margin-bottom: 0.7em;
}
.footer-menu a:hover {
	color: var(--pink);
}

footer .col-contacts {
}
.footer-contacts {
	font-size: 1.5em;
}


.footer-title {
	margin-bottom: var(--gutter);
}
.footer-title > * {
	font-size: 1.75em;
	font-weight: 700;
}

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

footer .mentions {
	margin-top: calc(var(--gutter) * 1.5);
	padding: var(--gutter) 0;
	border-top: rgba(0,0,0,0.11) 2px solid;
}

footer .mentions .logo img { width: 15em; }

.footer-colors > * {
	flex: 0 0 6.25em;
	height: 6px;
}
.footer-colors > *:first-child {
	background: var(--purple);
}
.footer-colors > *:nth-child(2) {
	background: var(--mauve);
}
.footer-colors > *:nth-child(3) {
	background: var(--green);
}
.footer-colors > *:nth-child(4) {
	background: var(--orange);
}
.footer-colors > *:nth-child(5) {
	background: var(--blue);
}
.footer-colors > *:last-child{
	background: var(--yellow);
}


@media screen and (max-width: 1100px) {
/*	.col-slogans .title { font-size: 0.7em; }
*/	.footer-contacts { font-size: 1em; }
	footer .col-menu { flex: 1; }
}
@media screen and (max-width: 700px) {
	footer .col-slogans,
	footer .col-menu,
	footer .col-contact { flex: 0 0 100%; padding-right: 0; }
	footer .col-slogans,
	footer .col-menu { margin-bottom: var(--gutter); }
	.col-slogans .title { font-size: 0.9em; }
	.col-slogans .title:not(:last-child) {
		margin-bottom: var(--gutter);
	}
}
@media screen and (max-width: 700px) {
	footer { text-align: center; }
	footer .mentions > * {
		flex: 0 0 100%;
		text-align: center;
	}
	footer .mentions .content { margin-top: var(--gutter); }
	.footer-colors { justify-content: center; }
}
@media screen and (max-width: 600px) {
	.footer-colors > * { flex: 0 0 16.5%; }
}