html {
	font-size: 16px;
}

.social-bar {
	position: fixed;
	right: 0;
	top: 35%;
	font-size: 1.5rem;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	z-index: 1000;
}

.icon {
	color: white;
	text-decoration: none;
	padding: .7rem;
	display: flex;
	transition: all .5s;
}

.icon-facebook {
	background: #2E406E;
	color: white;
}

.icon-linkedin2 {
	background: #2E406E;
	color: white;
}

.icon-whatsapp {
	background: rgb(13, 247, 138);
	color: white;
}

.icon-twitter {
	background: #339DC5;
}

.icon-youtube {
	background: #E83028;
}

.icon-instagram {
	background: rgb(105, 17, 206);
}

.icon:first-child {
	border-radius: 1rem 0 0 0;
}

.icon:last-child {
	border-radius: 0 0 0 1rem;
}

.icon:hover {
	padding-right: 3rem;
	border-radius: 1rem 0 0 1rem;
	box-shadow: 0 0 .5rem rgba(0, 0, 0, 0.42);
	color: rgb(255, 255, 255);
}


@font-face {
	font-family: 'icomoon';
	src:  url('fonts/icomoon.eot?a621ku');
	src:  url('fonts/icomoon.eot?a621ku#iefix') format('embedded-opentype'),
	  url('fonts/icomoon.ttf?a621ku') format('truetype'),
	  url('fonts/icomoon.woff?a621ku') format('woff'),
	  url('fonts/icomoon.svg?a621ku#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: block;
  }
  
  [class^="icon-"], [class*=" icon-"] {
	/* use !important to prevent issues with browser extensions that change fonts */
	font-family: 'icomoon' !important;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
  
	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
  }
  
  .icon-facebook:before {
	content: "\ea90";
  }
  .icon-linkedin2:before {
	content: "\eaca";
  }
  .icon-instagram:before {
	content: "\ea92";
  }
  .icon-whatsapp:before {
	content: "\ea93";
  }
  .icon-twitter:before {
	content: "\ea96";
  }
  .icon-youtube:before {
	content: "\ea9d";
  }