/* == Social Area == */

.social-area {
	text-align: center;
}

.social-area .social ul {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    list-style: none;
}

.social-area .social ul li {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    min-width: 40px;
    min-height: 40px;
}

.social-area .social ul li:first-child {
	margin-left: 0;
}

.social ul li a {
	/* display: block;
	width: 60px;
	height: 60px; */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
	
	background: transparent;

	-webkit-transition: all 400ms ease-out 0s;
	-moz-transition: all 400ms ease-out 0s;
	-o-transition: all 400ms ease-out 0s;
	transition: all 400ms ease-out 0s;

	-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
	-o-transform: rotateY(0deg);
	transform: rotateY(0deg);
	color: #6500d8;
	/* color: #6366f1; */

	text-decoration: none;
}

.social ul li a span {
	display: inline-block;
	margin: 0;
	color: #55606a;
	font-size: 32px;
	line-height: 60px;

	opacity: 0.3;
	filter: alpha(opacity=30);

	-webkit-transition: all 400ms ease-out 0s;
	-moz-transition: all 400ms ease-out 0s;
	-o-transition: all 400ms ease-out 0s;
	transition: all 400ms ease-out 0s;


	-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
	-o-transform: rotateY(0deg);
	transform: rotateY(0deg);
}

.social ul li:hover a,
.social ul li.active a {
	/* background-color: #DE5E60;	 */
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-ms-transform: rotateY(180deg);
	-o-transform: rotateY(180deg);
	transform: rotateY(180deg);
	color: #FFFFFF;

}


.social.links ul li a {
	color: #aa4400;
}

.social.links ul li:hover a {
	color: #6500d8;
}

.social.links-dj ul li a {
	color: #6500d8;
}

.social.links-dj ul li:hover a {
	color: #ad00d8;
}