/* Page Title */

div#share-panel a.button-style-02 {
  font-size: 20px;
}

div#share-panel {
  display: block;
  position: fixed;
  top: 50px;
  right: -250px;
  height: auto;
  background: #000d;
  width: 250px;
  z-index: 997;
  border-radius: 0 0 0 20px;
}

div#share-panel a {
  background: #000f;
  flex-grow: 0;
}

div#share-panel.open {
  right: 0px;
}

div#share-panel div#share-panel-content {
  display: flex;
  flex-direction: column;
  padding: 0 10px 50px 10px;
  overflow-y: auto;
  height: calc(100vh - 74px);
}

div#share-panel h4, div#share-panel h3 {
  text-align: center;
  color: #fff;
  margin: 5px 0;
}

div#share-panel h3 {
  opacity: 0.5;
  font-size: 24px;
  margin-top: 20px;
}

div#share-panel h4::before {
  content: "\f069";
  color: #0bf;
  padding-right: 3px;
}

div#share-panel a.button-style-02 {
    margin: 5px 10px;
    padding: 8px 12px;
}

#share-panel-copy-button::before {
    content: "\f0c5";
    padding-right: 7px;
}

#share-panel-sms-button::before {
    content: "\f7cd";
    padding-right: 7px;
}

#share-panel-email-button::before {
    content: "\f1d8";
    padding-right: 7px;
}

#share-panel-qrcode-button::before {
    content: "\f029";
    padding-right: 7px;
}

#share-panel-ig-button::before {
    content: "\f16d";
    padding-right: 7px;
}

#share-panel-fb-button::before {
    content: "\f082";
    padding-right: 7px;
}

#share-panel-twitter-button::before {
    content: "\f081";
    padding-right: 7px;
}

#share-panel-whatsapp-button::before {
    content: "\f40c";
    padding-right: 7px;
}

#share-panel-linkedin-button::before {
    content: "\f08c";
    padding-right: 7px;
}

#share-panel-share-button::before {
    content: "\f1e0";
    padding-right: 7px;
}

#share-panel-follow-button::before {
    content: "\f234";
    padding-right: 7px;
}

#share-panel-unfollow-button::before {
    content: "\f235";
    padding-right: 7px;
}

#share-panel-edit-button::before {
    content: "\f044";
    padding-right: 7px;
}

div#share-panel a#share-panel-edit-button {
    color: #fff;
    border-color: #fff;
    opacity: 0.5;
}

div#share-panel a#share-panel-unfollow-button {
  color: #000;
  background-color: #0bf;
}

/* The Modal (background) */
#share-modal {
 display: none; /* Hidden by default */
 position: fixed; /* Stay in place */
 z-index: 1; /* Sit on top */
 padding-top: 100px; /* Location of the box */
 left: 0;
 top: 0;
 width: 100%; /* Full width */
 height: 100%; /* Full height */
 overflow: auto; /* Enable scroll if needed */
 background-color: rgb(0,0,0); /* Fallback color */
 background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
 z-index: 9999;
}

/* Modal Content (Image) */
#share-modal-img.share-modal-content {
 margin: auto;
 display: block;
 width: 80%;
 max-width: 700px;
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
#share-modal-caption {
 margin: auto;
 display: block;
 width: 80%;
 max-width: 700px;
 text-align: center;
 color: #ccc;
 padding: 10px 0;
 height: 150px;
}

/* Add Animation - Zoom in the Modal */
.share-modal-content, #share-modal-caption {
 animation-name: zoom;
 animation-duration: 0.6s;
}

@keyframes zoom {
 from {transform:scale(0)}
 to {transform:scale(1)}
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
 .share-modal-content {
   width: 100%;
 }
}