@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);

@import url(https://weloveiconfonts.com/api/?family=entypo);



[class^="entypo-"]:before {

	font-family: 'entypo', sans-serif;

}



#social-sidebar {

	left: 0;

	position: fixed;

	top: 81%;

    z-index: 100;

}

#social-sidebar li:first-child a { border-top-right-radius: 5px; }

#social-sidebar li:last-child a { border-bottom-right-radius: 5px; }

#social-sidebar .facebook{

	background: #3B5998;

}



#social-sidebar .youtube {

	background:linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);

}



#social-sidebar a {

	background: rgba(0, 0, 0, .7);

	color: #fff;

    text-decoration: none;

	display: block;

	height: 50px;

	width: 50px;  

	font-size: 24px;

	line-height: 50px;

	position: relative;

	text-align: center;

    cursor: pointer;

}

#social-sidebar a:hover span {

	left: 120%;

	opacity: 1;

}

#social-sidebar a span {

  font: 12px "Open Sans", sans-serif;

  text-transform: uppercase;

	border-radius: 3px;

	line-height: 24px;

	left: -100%;

	margin-top: -16px;

	opacity: 0;

	padding: 4px 8px;

	position: absolute;

	transition: opacity .3s, left .4s;

	top: 50%;

	z-index: -1;

}



#social-sidebar a span:before {

	content: "";

	display: block;

	height: 8px;

  width: 8px;

	left: -4px;

	margin-top: -4px;

	position: absolute;

	top: 50%;

	transform: rotate(45deg);

}



#social-sidebar a[class*="twitter"]:hover,

#social-sidebar a[class*="twitter"] span,

#social-sidebar a[class*="twitter"] span:before {background: #00aced;}



#social-sidebar a[class*="facebook"]:hover,

#social-sidebar a[class*="facebook"] span,

#social-sidebar a[class*="facebook"] span:before {background: #3B5998;}



#social-sidebar a[class*="youtube"]:hover,

#social-sidebar a[class*="youtube"] span,

#social-sidebar a[class*="youtube"] span:before {background:linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d)}



#social-sidebar a[class*="dribbble"]:hover,

#social-sidebar a[class*="dribbble"] span,

#social-sidebar a[class*="dribbble"] span:before {background: #ea4c89;}



#social-sidebar a[class*="dropbox"]:hover,

#social-sidebar a[class*="dropbox"] span,

#social-sidebar a[class*="dropbox"] span:before {background: #8DC5F2;}



#social-sidebar a[class*="github"]:hover,

#social-sidebar a[class*="github"] span,

#social-sidebar a[class*="github"] span:before {background: #9C7A5B;}



#social-sidebar a[class*="evernote"]:hover,

#social-sidebar a[class*="evernote"] span,

#social-sidebar a[class*="evernote"] span:before {background: #6BB130;}