#URLshare { 
    border-radius: 0px!important;
    background: rgba(250,250,250,0.65)!important;
    cursor: pointer!important;
    text-transform: uppercase!important;
    font-size: 17px!important;
    color: #333!important;
    transition: .2s linear!important;
    border: 0px solid rgba(0,0,0,0.8)!important;
    opacity: 0.85!important;
    min-width: 150px!important;
    width: 200px!important;
    position: relative!important;
    margin:auto!important;
    left:auto!important;
    top:15px!important;
}

#URLshare:hover {
    opacity: 1!important;
    background: rgba(100,100,100,0.75)!important;
    border: 0px solid rgba(255,255,255,.9)!important;
}

#URLshare canvas {
 width:100%!important;   
}

#URLshare div {
width:100%!important;
left:0!important;
margin: auto!important;
border-radius: 0px!important;
}



#URLshare span {
    color: #333!important;
    display: block!important;
    border-radius: 0px!important;
    cursor: pointer!important;
    text-transform: uppercase!important;
    font-size: 17px!important;
    font-weight: normal!important;
    transition: .2s linear!important;
    position: relative!important;
    margin:auto!important;
    background-size: contain!important;
    background-repeat: no-repeat!important;
    background-position: 50%!important;
}

#URLshare:hover span {
    color: #EEE!important;
}

/*
    /* adds icon in front of the element * /
    #URLshare span:after { 
        /* https://github.com/google/material-design-icons/blob/master/iconfont/codepoints * /
        content: '\e14d'!important; 
        font-family: "Material Icons"!important; 
        padding-left: 8px!important;
        margin-right: -15px!important;
        top: 2px!important;
        position:relative!important;
    }


*/

/* POP UP COMIC with URL copy confirmation */

/* Popup container */
#popup {
  position: relative!important;
  display: block!important;
  cursor: pointer!important;
    margin:auto!important;
    padding:0!important;
    left:0!important;
    top:10px!important;
    margin-top:10px!important;
    height:50px!important;
}

#popup div {
    disply: block!important;
    width:100%!important;
    height:100%!important;
}

/* The actual popup (appears on top) */
#popup .popuptext {
  visibility: visible!important;
  opacity: 0;
  width: 90%!important;
  background-color: rgb(250,250,250,0.65)!important;
  color: #333!important;
  font-size: 15px!important; 
  text-align: center!important;
  border-radius: 6px!important;
  padding: 10px 0 0 0!important;
  position: absolute!important;
  z-index: 1!important;
  inset: 5px auto auto 5%!important;
  height: 30px!important;
}

/* Popup arrow */
#popup .popuptext::after {
  content: ""!important;
  position: absolute!important;
  bottom: 100%!important;
  left: 50%!important;
  margin-left: -5px!important;
  border-width: 5px!important;
  border-style: solid!important;
  border-color: transparent transparent rgb(250,250,250,0.65) transparent!important;
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
#popup .show {
opacity:1;
  -webkit-animation: fadeIn 1s!important;
  animation: fadeIn 1s!important;
}
#popup .hide {

  -webkit-animation: fadeOut .75s!important;
  animation: fadeOut .75s!important;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}

/* Add animation (fade out the popup) */
@-webkit-keyframes fadeOut {
  from {opacity: 1;}
  to {opacity: 0;}
}

@keyframes fadeOut {
  from {opacity: 1;}
  to {opacity:0 ;}
}