/* Box colors */


/* Common button styles */
.button {
	float: left;
	min-width: 150px;
	max-width: 250px;
	display: block;
	margin: 1em;
	padding: 1em 2em;
	border: none;
	background: none;
	color: inherit;
	vertical-align: middle;
	position: relative;
	z-index: 1;
	-webkit-backface-visibility: hidden;
	-moz-osx-font-smoothing: grayscale;
}
.button:focus {
	outline: none;
}
.button > span {
	vertical-align: middle;
}



/* facebook */
.facebook {
	width: 35px;
	height: 35px;
	min-width: 0;
	padding: 0;
	color: #345393;
	-webkit-transition: color 0.3s;
	transition: color 0.3s;
}
.facebook.button--round-l {
	border-radius: 50%;
}

.facebook::before {
	content: '';
	position: absolute;
	top: -6px;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	z-index: -1;
	box-shadow: inset 0 0 0 2px #fff;
	-webkit-transform: scale3d(0.9, 0.9, 1);
	transform: scale3d(0.9, 0.9, 1);
	-webkit-transition: box-shadow 0.3s, -webkit-transform 0.3;
	transition: box-shadow 0.3s, transform 0.3s;
}
.facebook::before {
	box-shadow: inset 0 0 0 2px #fff;
}
.facebook .button__icon {
	font-size: 22px;
	width: 22px;
}
.facebook > span {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.facebook:hover::before {
	box-shadow: inset 0 0 0 35px #345393;
	-webkit-transform: scale3d(1, 1, 1);
	transform: scale3d(1, 1, 1);
}
.facebook:hover::before {
	box-shadow: inset 0 0 0 35px #345393;
}

/* linin */
.linin {
	width: 35px;
	height: 35px;
	min-width: 0;
	padding: 0;
	color: #4982ad;
	-webkit-transition: color 0.3s;
	transition: color 0.3s;
}
.linin.button--round-l {
	border-radius: 50%;
}

.linin::before {
	content: '';
	position: absolute;
	top: -6px;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	z-index: -1;
	box-shadow: inset 0 0 0 2px #fff;
	-webkit-transform: scale3d(0.9, 0.9, 1);
	transform: scale3d(0.9, 0.9, 1);
	-webkit-transition: box-shadow 0.3s, -webkit-transform 0.3;
	transition: box-shadow 0.3s, transform 0.3s;
}
.linin::before {
	box-shadow: inset 0 0 0 2px #fff;
}
.linin .button__icon {
	font-size: 22px;
	width: 22px;
}
.linin > span {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.linin:hover::before {
	box-shadow: inset 0 0 0 35px #4982ad;
	-webkit-transform: scale3d(1, 1, 1);
	transform: scale3d(1, 1, 1);
}
.linin:hover::before {
	box-shadow: inset 0 0 0 35px #4982ad;
}

/* twitter */
.twitter {
	width: 35px;
	height: 35px;
	min-width: 0;
	padding: 0;
	color: #55acee;
	-webkit-transition: color 0.3s;
	transition: color 0.3s;
}
.twitter.button--round-l {
	border-radius: 50%;
}

.twitter::before {
	content: '';
	position: absolute;
	top: -6px;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	z-index: -1;
	box-shadow: inset 0 0 0 2px #fff;
	-webkit-transform: scale3d(0.9, 0.9, 1);
	transform: scale3d(0.9, 0.9, 1);
	-webkit-transition: box-shadow 0.3s, -webkit-transform 0.3;
	transition: box-shadow 0.3s, transform 0.3s;
}
.twitter::before {
	box-shadow: inset 0 0 0 2px #fff;
}
.twitter .button__icon {
	font-size: 22px;
	width: 22px;
}
.twitter > span {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.twitter:hover::before {
	box-shadow: inset 0 0 0 35px #55acee;
	-webkit-transform: scale3d(1, 1, 1);
	transform: scale3d(1, 1, 1);
}
.twitter:hover::before {
	box-shadow: inset 0 0 0 35px #55acee;
}