Template:Sharing/styles.css

.social-media-bar {
  display:flex;
  align-items:center;
  box-sizing:border-box;
  flex-direction: row-reverse;
}

.share-link {
  display:flex;
  align-items:center;
  background-color:#e0e0e0;
  color:#000000;
  width:130px;
  font-family:mate sc;
  font-size:1.1em;
 /* clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%); */
  clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 10% 100%, 0% 50%);
  transition:all .25s ease-in-out;
}

.share-icon {
  height:30px;
  width:30px;
  margin-right:5px;
  margin-top:0px;
  margin-bottom:0px;
  margin-left:10px;
}

.share-link:hover {
  cursor:pointer;
}

.hidden-links {
  display:none;
  margin:0px 0px -5px 5px;
}

#embedme {
    margin: 0 6px 6px 0;
	width: 24px;
	height: 24px;
	float: left;
	border-style: solid;
	border-width: 1px;
	border-color: gray;
}

.social-media-bar:hover .hidden-links {
  display:block;
}

.social-media-bar:hover .share-link {
  background-color:#cacaca;
}

@media screen and (max-width:1099px) {
	
 .social-media-bar {
	  margin-top:-10px;
      width:100%;
  }
}

@media screen and (min-width:1100px) {

  .social-media-bar {
    margin-top:0px;
    position:absolute;
    top:-40px;
    right:-31px;  
  }
}