/*************************************************************************/
/* side-bar */

.side-bar {
	display: block;
}
.side-bar a:hover {
opacity:1!important
}
.side-bar-box span {
	font-size: 75%;
}
.side-bar-box i {
	font-size: 120%;
	padding-right: 12px;
}

.side-bar-box i.fa-envelope {
    margin-left: -0.15em;
}

/* Desktop */
	.side-bar {
		position: fixed;
		z-index: 99;
		right: 0px;
		top: 50%;
		width: auto;
		transform: translateY(-50%);
		margin-right:10px;
	}

	.side-bar-box {
		height:2.9em;
		width:2.9em;
		border-radius:2.9em;
		padding:1em;
		font-size: 90%;
		color: #000;
		margin-bottom:.5em;
		transition: all 0.4s ease-in-out 0s;
		margin-left: auto;
		background-color: #EBEBEB;
/*		box-shadow: 3px 7px 15px rgba(50, 50, 50, 0.15);*/
	}
	
	/*	 Text hidden */
	.side-bar-box span {
		transition: all .3s ease-in-out;
			opacity: 0;
	}
	
	/*	Hover show Text*/
	.side-bar a:hover .side-bar-box span{
		opacity: 1;
		transition: all .3s ease-in-out;
	}
	


/* Hover Slideout Box */
@media only screen and (min-width: 970px) {
	.side-bar a:hover .side-bar-box {
		transition: all 0.4s ease-in-out 0s;
		width: 10em; 
	}
	.side-bar a:hover{
		opacity: 1.0;
	}
} 

/*  Mobile Center */
@media only screen and (max-width: 970px) {

.side-bar-box {
padding:.7em .4em;
height:2.7em;
width:2.7em;
border-radius:2.7em;
margin-bottom:.5em
}

.side-bar {
top:75%;
margin-right:3.5%;
height:fit-content
}

.side-bar-box {
justify-content:center
}

.side-bar-box i {
font-size:120%;
padding-right:0;
text-align:center
}

.side-bar-box span {
display:none
}
}