@charset "utf-8";
/* CSS Document */

.social{
	position: absolute;
	bottom: 0;
	margin-bottom: 30px;
	display: flex;
	z-index: 2
	
	
}

.social2{
	display: inline-flex;
	z-index: 2;

	
	
}

.itemSocial{
	margin: 0 4px;
	position: relative;
	height: 27px;
	width: 27px;
	}

.itemSocial2{
	position: relative;

	}

.itemSocial:after{
	margin: 0px;
	content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #eaff00 ;
	border-radius: 100%;
	z-index: -1;
	opacity: 0;
	-webkit-transition: all .5s; /* Safari */
    transition: all .5s;
	transform: translateX(0) translateY(-100%);

	}

.itemSocial:hover:after{
	
	opacity: 1;
	transform: translateX(3px) translateY(-89%);
}
	
.itemSocial2:after{
	margin: 0px;
	content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #eaff00 ;
	border-radius: 100%;
	z-index: -1;
	opacity: 0;
	-webkit-transition: all .5s; /* Safari */
    transition: all .5s;
	transform: translateX(-100%)
	}

.itemSocial2:hover:after{
	
	opacity: 1;
	transform: translateX(calc(-100% + 3px)) translateY(3px);
}
	

@media (min-height: 420px) {
	.social2{
		margin-top: 20px
	}
	.itemSocial2{
		height: 27px;
		width: 27px;
		margin: 0 4px;
	}
}
@media (max-height: 419px) {
	.social2{
		margin-top: 7px
	}
	.itemSocial2{
		height: 20px;
		width: 20px;
		margin: 0 6px;
	}
}