/* SOCIAL SQUARE */

.social-square {
	height: 40px;
	width: 40px;
	position: absolute;
	bottom: 5px;
	right: 5px;
	overflow: hidden;
}

.social-square .social-opener {
    color: var(--white);
    background-color: var(--theme-bg-color);
    height: 40px;
    bottom: 0;
	position: absolute;
	width: 40px;
}

.social-square .social-opener > span {
    display: block;
	text-align: center;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	font-size: 20px;
}

.social-square .social-holder {
	background-color: var(--theme-bg-color);
	transform: translateY(100%);
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    -o-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
}

.social-square .social-holder a {
	width: 40px;
	height: 40px;
	display: block;
	position: relative;
    color: var(--white);
}

.social-square .social-holder a span {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	font-size: 20px;
}

.social-square:hover .social-holder {
	transform: translateY(0);
}