/* Let's get this party started */
.popup-preview,.popup-container::-webkit-scrollbar {
    width:10px;
}
            
/* Track */
.popup-preview,.popup-container::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
            
/* Handle */
.popup-preview,.popup-container::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background:rgba(200,200,200,0.6); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
              
}
.popup-preview,.popup-container::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,255,255,0.3); 
              
}
    .popup {
      position: fixed;
      left: 0;
      top: 0;
      min-height: 800px;
      height: 100%;
      width: 100%;
      background-color: rgba(242, 246, 250, 0.8);
      opacity: 0;
      z-index: 8888;
      visibility: hidden;
      -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;
      -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;
      transition: opacity 0.3s 0s, visibility 0s 0.3s;
    }
    .popup.is-visible {
      opacity: 1;
      visibility: visible;
      -webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
      -moz-transition: opacity 0.3s 0s, visibility 0s 0s;
      transition: opacity 0.3s 0s, visibility 0s 0s;
    }

    .popup-container {
      position: relative;
      left: 4%;
      top: -2%;
      overflow-x:hidden;
      overflow-y:auto;
      width: 60%;
      max-width: 700px;
      max-height: 550px;
      margin: 4em auto;
      background: #FFF;
      border-radius: .25em .25em .4em .4em;
      text-align: center;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
      opacity: 0;
      -webkit-transform: translateY(-150px);
      -moz-transform: translateY(-150px);
      -ms-transform: translateY(-150px);
      -o-transform: translateY(-150px);
      transform: translateY(-150px);
      /* Force Hardware Acceleration in WebKit */
      -webkit-backface-visibility: hidden;
      -webkit-transition-property: -webkit-transform;
      -moz-transition-property: -moz-transform;
      transition-property: transform;
      -webkit-transition-duration: 0.4s;
      -moz-transition-duration: 0.4s;
      transition-duration: 0.4s;
    }

    .popup-preview {
      position: relative;
      left: 4%;
      top: 3%;
      overflow:auto;
      width: 70%;
      max-height: 75%;
      margin: 4em auto;
      padding: 2em;
      background: #FFF;
      border-radius: .25em .25em .4em .4em;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
    }

    .is-visible .popup-container,.popup-preview {
      -webkit-transform: translateY(0);
      -moz-transform: translateY(0);
      -ms-transform: translateY(0);
      -o-transform: translateY(0);
      transform: translateY(0);
      opacity: 1;
    }
    @media only screen and (min-width: 1170px) {
      .popup-container {
        margin: 8em auto;
      }
    }
    #pop{width:100%;position:relative;}


.v-middle{
  line-height: 16px;
  vertical-align: bottom;
}