@import "https://use.fontawesome.com/releases/v5.14.0/css/brands.css";

/*Social Links in <footer>*/
.social-links ul{
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.social-links ul{
    margin: 0 -10px 32px;
}

.panel-social .social-links ul{
	margin: 20px 0;
}
.social-links a {
    margin: 0 10px 20px;
}

.social-links li{
	display: inline-block;
	height: 38px;
	width: 38px;
	position: relative;
	margin: 0 calc(6px + (8.5 - 6) * ((100vw - 320px) / (640 - 320)));
	cursor: pointer;
}

.social-links li:first-child{
	margin-left: 0;
}
.social-links li:last-child{
	margin-right: 0;
}
.social-links li i {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(1);
	font-size: 15.88px;
	transform-origin: center;
	transition: all ease-out 0.2s;
	color: #000;
}
.panel-social .social-links li i {
    color: #FFF;
}
.social-links li:before{
	top: 0;
	left: 0;
	height: 38px;
	width: 38px;
	position: absolute;
	border-radius: 100%;
	background-color: #fff;
	transform: scale(1);
	transform-origin: center;
	opacity: 1;
	content: '';
	transition: all ease-out 0.2s;
}

.panel-social .social-links li:before{
	background-color: #0099a8;
}

@media (min-width: 641px) {
	.social-links li{
		height: calc(38px + (60 - 38) * ((100vw - 641px) / (1200 - 641)));
		width: calc(38px + (60 - 38) * ((100vw - 641px) / (1200 - 641)));
		margin: 0 calc(8.5px + (14 - 8.5) * ((100vw - 641px) / (1200 - 641)));
	}

	.social-links li i{
		font-size: calc(15.88px + (25.47 - 15.88) * ((100vw - 641px) / (1200 - 641)));
	}

	.social-links li:before{
		height: calc(38px + (60 - 38) * ((100vw - 641px) / (1200 - 641)));
		width: calc(38px + (60 - 38) * ((100vw - 641px) / (1200 - 641)));
	}
}

@media (min-width: 1025px) {
	.social-links{
	    margin: 0 -12px;
	}
	.panel-social .social-links{
	    margin: 0;
	}
	.social-links a {
	    margin: 0;
	    width: 100%;
	    display: block;
	    height: 100%;
	}
	.social-links ul{
	    margin: 45px -10px
	}
	.panel-social .social-links ul{
	    margin: 20px -10px
	}
	.social-links li:hover::before{
	    transform: scale(0);
	    opacity: 0;
	}
	.social-links li:hover i {
	    color: #fff;
	    transform: translate(-50%, -50%) scale(1.3);
	}

	.panel-social .social-links li:hover i{
		color: #0099a8;
	}
}

@media (min-width: 1200px) {
	.social-links li{
		height: 60px;
		width: 60px;
		margin: 0 14px;
	}

	.social-links li i {
	    font-size: 25.47px;
	}

	.social-links li:before{
	    height: 60px;
	    width: 60px;
	}
}

/* Tiktok fix for secondary pages */
i.fa-tiktok:before {
	font-family: "Font Awesome 5 Brands";
	content: "\e07b";
	box-sizing: border-box;
}