div.pinned-l {
position: fixed;
  left: 0;
  top: 50%;
  width: 10em;
  z-index:5;
  margin-top: -2.5em; 
  text-align:center;
  margin-left:1px;
}
div.pinned-r {
position: fixed;
  right: 0;
  top: 50%;
  width: 7em;
  z-index:5;
  margin-top: -2.5em; 
  text-align:center;
  margin-right:3px;
}
.pinned_button {
color: #fff !important;
text-transform: uppercase;
text-decoration: none;
background: #60a3bc;
padding: 15px;
border-radius: 50px;
display: inline-block;
border: none;
transition: all 0.4s ease 0s;
}
.pinned_button:hover {
text-shadow: 0px 0px 6px rgba(255, 255, 255, 1);
-webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
-moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
transition: all 0.4s ease 0s;
}

.popup-try-it-here-overlay {
  /*Hides pop-up when there is no "active" class*/
  visibility: hidden;
  position: fixed;
  background: #ffffff;
  border: 3px solid #666666;
  width: 70%;
  height: 80%;
  left: 15%;
  z-index:10001;
}

.popup-try-it-here-overlay.active {
  /*displays pop-up when "active" class is present*/
  visibility: visible;
  text-align: center;
}

.popup-try-it-here-content {
  /*Hides pop-up content when there is no "active" class */
  visibility: hidden;
}

.popup-try-it-here-content.active {
  /*Shows pop-up content when "active" class is present */
  visibility: visible;
}

button.close-try-it-here {
  display: inline-block;
  vertical-align: middle;
  border-radius: 30px;
  margin: .20rem;
  font-size: 1rem;
  color: #666666;
  background: #ffffff;
  border: 1px solid #666666;
}

button.close-try-it-here:hover {
  border: 1px solid #666666;
  background: #666666;
  color: #ffffff;
}

@media only screen and (max-width: 770px) {
  .pinned_button {
    display: none;
 }
}
@media only screen and (max-width: 400px) {
    
  div.pinned-r {
    position: fixed;
      right: 0;
      top: 64%;
      width: 10em;
      z-index:5;
      margin-top: -2.5em; 
      text-align:center;
      margin-right:3px;
      font-size: 10px;
    }
    div.pinned-l {
      position: fixed;
        left: 0;
        top: 64%;
        width: 10em;
        z-index:5;
        margin-top: -2.5em; 
        text-align:center;
        margin-left:1px;
        font-size: 10px
      }
      .pinned_button {
           display: none;
        }

}

@media only screen and (max-width: 350px) {
    
  div.pinned-r {
    position: fixed;
      right: 0;
      top: 64%;
      width: 7em;
      z-index:5;
      margin-top: -2.5em; 
      text-align:center;
      margin-right:3px;
      font-size: 7px
    }
    div.pinned-l {
      position: fixed;
        left: 0;
        top: 64%;
        width: 10em;
        z-index:5;
        margin-top: -2.5em; 
        text-align:center;
        margin-left:1px;
        font-size: 10px
      }
      .pinned_button {
        display: none;
     }

}

@media only screen and (max-width: 300px) {
    
  div.pinned-r {
    position: fixed;
      right: 0;
      top: 64%;
      width: 7em;
      z-index:5;
      margin-top: -2.5em; 
      text-align:center;
      margin-right:3px;
      font-size: 7px
    }
    div.pinned-l {
      position: fixed;
        left: 0;
        top: 64%;
        width: 10em;
        z-index:5;
        margin-top: -2.5em; 
        text-align:center;
        margin-left:1px;
        font-size: 10px
      }
      .pinned_button {
        display: none;
     }

}