#sliding-popup {
  display: block;
  margin: 0;
  padding: 0px;
  right: 0;
  text-align: center;
  width: 100%;
  z-index: 99999;
}

.sliding-popup-bottom {
  background: #333;
  position: fixed;
}

.sliding-popup-top {
  background-color: #000;
  position: relative;
}

#sliding-popup .popup-content {
  background-color: transparent;
  border: 0 none;
  display: block;
  margin: 0 auto;
  padding:0 3%;
  width:94%; /* 100% minus padding left and right from above */
}

#sliding-popup .popup-content #popup-buttons {
  margin: 0;
  text-align: center;
}

#sliding-popup .popup-content #popup-buttons button {
  margin-right: 5px;
  margin-right: 0.5rem;
  margin-bottom: 10px;
  margin-bottom: 1rem;
  overflow: visible;
  font-size: 13px;
  font-size: 1.3rem;
}

#sliding-popup .popup-content #popup-buttons button:hover {
}

#sliding-popup .popup-content #popup-buttons button:active {
}

#sliding-popup .popup-content #popup-text {
  color: #fff;
  margin: 5px 0 8px 0;
  margin: 0.5rem 0 0.8rem 0;
  text-align: left;
  padding: 0;
}

#sliding-popup .popup-content #popup-text h2,
#sliding-popup .popup-content #popup-text p {
  color: #fff;
  display: block;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.4;
  margin: 0;
  padding: 0;
  text-align: center;
}

#sliding-popup .popup-content #popup-text p {
  font-size: 12px;
}


/* --------------- Responsive Adjustments ---------------- */
/* Note, the CSS outside these Media Queries is used for all devices incl. mobiles */

@media only screen and (min-width: 320px) {
  /* Mobile & Small screen, non-retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px),
only screen and (min--moz-device-pixel-ratio: 2) and (min-width: 320px),
only screen and (-o-min-device-pixel-ratio: 2/1)  and (min-width: 320px),
only screen and (min-device-pixel-ratio: 2) and (min-width: 320px),
only screen and (min-resolution: 192dpi) and (min-width: 320px),
only screen and (min-resolution: 2dppx) and (min-width: 320px) { 
  /* Mobile & Small screen, retina, stuff to override above media query */

}

@media only screen and (min-width: 700px) {
  /* Tablet & Medium screen, non-retina */
  
  #sliding-popup .popup-content {
    padding:0 2%;
    width:96%; /* 100% minus padding left and right from above */
  }
  #sliding-popup .popup-content #popup-buttons {
    text-align: left;
  }
  #sliding-popup .popup-content #popup-text h2,
  #sliding-popup .popup-content #popup-text p {
    text-align: left;
  }




}

@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 700px),
only screen and (min--moz-device-pixel-ratio: 2) and (min-width: 700px),
only screen and (-o-min-device-pixel-ratio: 2/1)  and (min-width: 700px),
only screen and (min-device-pixel-ratio: 2) and (min-width: 700px),
only screen and (min-resolution: 192dpi) and (min-width: 700px),
only screen and (min-resolution: 2dppx) and (min-width: 700px) { 
  /* Tablet & Medium screen, retina, stuff to override above media query */

}

@media only screen and (min-width: 1024px) {
  /* Desktop & Large screen, non-retina */
  
    #sliding-popup .popup-content {
    padding:0 2%;
    width:96%; /* 100% minus padding left and right from above */
    max-width: 1280px;
  }
  #sliding-popup .popup-content #popup-buttons {
    float: right;
    max-width: 40%;
  }
  #sliding-popup .popup-content #popup-buttons button {
    margin-bottom: 0;
    margin-top: 10px;
    margin-top: 1rem;
  }
  #sliding-popup .popup-content #popup-text {
    float: left;
    max-width: 60%;
  }


}

@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 1024px),
only screen and (min--moz-device-pixel-ratio: 2) and (min-width: 1024px),
only screen and (-o-min-device-pixel-ratio: 2/1) and (min-width: 1024px),
only screen and (min-device-pixel-ratio: 2) and (min-width: 1024px),
only screen and (min-resolution: 192dpi) and (min-width: 1024px),
only screen and (min-resolution: 2dppx)  and (min-width: 1024px) { 
  /* Desktop & Large screen, retina, stuff to override above media query */

}
@media only screen and (min-width: 1280px) {
  /* Desktop & Large screen, non-retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 1280px),
only screen and (min--moz-device-pixel-ratio: 2) and (min-width: 1280px),
only screen and (-o-min-device-pixel-ratio: 2/1) and (min-width: 1280px),
only screen and (min-device-pixel-ratio: 2) and (min-width: 1280px),
only screen and (min-resolution: 192dpi) and (min-width: 1280px),
only screen and (min-resolution: 2dppx)  and (min-width: 1280px) { 
  /* Desktop & Extra Large screen, retina, stuff to override above media query */

}