/*
 * Borrwed from :
 * https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal_bottom
 */
.pt-form-slider
{
  position: fixed;
  display: none; /* Hidden by default */
  z-index: 1; /* Sit on top */
  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.4); /* Black w/ opacity */
  -webkit-animation-name: fadeIn; /* Fade in the background */
  -webkit-animation-duration: 1s;
  animation-name: fadeIn;
  animation-duration: 1s;
}

.pt-form-slider-content
{
  z-index: 1000; /* Sit on top */
  min-height: 200px !important;
  left: 10% !important;
  width: calc(100% - 20%) !important;
  position: absolute;
  top: 10% !important;
  background-color: #fefefe;
  -webkit-animation-name: slideIn;
  -webkit-animation-duration: 1s;
  animation-name: slideIn;
  animation-duration: 1s;
  border-radius: 10px;
  border: 4px outset #dddddd;
}

.pt-form-slider-content h1
{
   background: #d84315;
   height: 50px;
   width: 90%;
   line-height: 50px;
   font-size: 20px;
   font-weight: bold;
   text-align: middle;
   color: #ffffff;
   margin-left: 5%;
   margin-top: 10px;
   margin-bottom: 10px;
   padding-left: 10px;
   box-shadow: 3px 3px 5px #888888;
   display: inline-block;
}

@keyframes slideIn
{
  from {top: -300px; opacity: 0}
  to {top: 10%; opacity: 1}
}

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