/* -------------------------------------------------- */
/* OVERRIDES
/* -------------------------------------------------- */



/* -------------------------------------------------- */
/* GENERAL
/* -------------------------------------------------- */

.socials {
	height: 32px;
}

.socials li {
	display: inline-block;
}

.socials li:nth-child(n+2) {
	padding-left: 10px;
}

.socials a {
	display: block;

	width: 32px;
	height: 32px;

	text-decoration: none;
}

/* -------------------------------------------------- */
/* ICONS
/* -------------------------------------------------- */

.socials a:before,
.socials a:after {
	content: " ";
	position: absolute;
	top: 0;
	left: 0;

	width: 32px;
	height: 32px;

	color: #FFFFFF;
}

.socials a:before {
	border: 3px solid #FFFFFF;
}

.socials a:after {
	font-family: Material-Design-Iconic-Font;
	line-height: 32px;
	font-size: 34px;
	text-align: center;
}

.socials a:focus:before,
.socials a:hover:before {
	border: 3px solid var(--color-accent);
	background: #FFFFFF;
}

.socials a:focus:after,
.socials a:hover:after {
	color: var(--color-accent);
}

.socials .linkedin a:after {
	content: "\f3f8"; /* icon only */
	content: "\f356"; /* box version */
}

.socials .facebook a:after {
	content: "\f343"; /* icon only */
	content: "\f342"; /* box version */
}

.socials .instagram a:after {
	content: "\f34f"; /* icon only */
}

.socials .github a:after {
	content: "\f345"; /* icon only */
	content: "\f344"; /* box version */
}

.socials .twitter a:after {
	content: "\f360"; /* icon only */
	content: "\f35f"; /* box version */
}

.social .email a:after {
	content: "\f15a"; /* icon only */
}