@import url(variable.scss);

.aui {
	.social-media-wrapper {

		li {
			border-radius: 6px;
			display: inline-block;
			font-size: 31px;
			margin-top: 11px;
			padding: 3px;

			a {
				border-radius: 6px;
				color: #FFF;
				padding: 7px 8px;
				&:hover {
					text-decoration: none;
				}
			}
		}

		ul {
			text-align: left;
			margin: auto;
			padding-top: 20px;
			padding-left: 0px;

			@media (max-width: 991px) {
				text-align: center;
			}

			li {
				margin: 0;
				text-align: center;

				div {
					border-radius: 50px;
					height: 40px;
					width: 40px;
					background-color: #aaa;
					transition: background-color .3s;
					@include display-flex();
					@include justify-content(center);
					@include align-items(center);

					a {
						font-size: 22px;
						color: #3d3d3f;
						transition: color .3s;
					}
				}
				#facebook {
					&:hover {
						background-color: $facebook-blue;

						a {
							color: $w;
						}
					}
				}
				#twitter {
					&:hover {
						background-color: $twitter-blue;

						a {
							color: $w;
						}
					}
				}
				#linked-in {
					&:hover {
						background-color: $linkedin-blue;

						a {
							color: $w;
						}
					}
				}
				#google-plus {
					&:hover {
						background-color: $google-red;

						a {
							color: $w;
						}
					}
				}
			}
		}
	}
}