.pbody {
    background: #ddd;
    width: 100%;
    height: 100vh;
    position: relative;
  }
  
  .head1 {
    color: #c7c7c7;
    font-weight: 200;
    text-align: center;
    position: absolute;
    top: 45%;
    width: 100%;
  }
  
  .head2 {
    color: #ed5f00;
    font-weight: bold;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
    margin-bottom: 15px;
  }
  
  .phead {
    color: #001818;
  } 
  /* Min-width width 768px */
@media (min-width: 320px) {
  .wrap {
    position: absolute;
    overflow: hidden;
    top: 10%;
    right: 10%;
    bottom: 20px;
    left: 10%;
    padding: 20px 5px;
    display: block;
    border-radius: 4px;
    transform: translateY(20px);
    transition: all 0.5s;
    visibility: hidden;
  }
  .wrap .content {
    opacity: 0;
  }
  .wrap:before {
    position: absolute;
    width: 1px;
    height: 1px;
    background: white;
    content: "";
    bottom: 10px;
    left: 50%;
    top: 95%;
    color: #fff;
    border-radius: 50%;
    -webkit-transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  .wrap.active {
    display: block;
    visibility: visible;
    box-shadow: 2px 3px 16px silver;
    transition: all 600ms;
    transform: translateY(0px);
    transition: all 0.5s;
  }
  .wrap.active:before {
    height: 2000px;
    width: 2000px;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    margin-left: -1000px;
    margin-top: -1000px;
    display: block;
    -webkit-transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  .wrap.active .content {
    position: relative;
    z-index: 1;
    opacity: 1;
    transition: all 600ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
}
@media (min-width: 767px) {
  .wrap {
    position: absolute;
    overflow: hidden;
    top: 10%;
    right: 10%;
    bottom: 20px;
    left: 10%;
    padding: 20px 50px;
    display: block;
    border-radius: 4px;
    transform: translateY(20px);
    transition: all 0.5s;
    visibility: hidden;
  }
  .wrap .content {
    opacity: 0;
  }
  .wrap:before {
    position: absolute;
    width: 1px;
    height: 1px;
    background: white;
    content: "";
    bottom: 10px;
    left: 50%;
    top: 95%;
    color: #fff;
    border-radius: 50%;
    -webkit-transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  .wrap.active {
    display: block;
    visibility: visible;
    box-shadow: 2px 3px 16px silver;
    transition: all 600ms;
    transform: translateY(0px);
    transition: all 0.5s;
  }
  .wrap.active:before {
    height: 2000px;
    width: 2000px;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    margin-left: -1000px;
    margin-top: -1000px;
    display: block;
    -webkit-transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  .wrap.active .content {
    position: relative;
    z-index: 1;
    opacity: 1;
    transition: all 600ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
}

  
  a.pbutton {
    padding: 11px 11px 13px 13px;
    outline: none;
    border-radius: 50%;
    background: #007fed;
    color: #fff;
    font-size: 24px;
    display: block;
    position: fixed;
    left: 50%;
    bottom: 20px;
    top: auto;
    margin-left: -25px;
    transition: transform 0.25s;
  }
  a.pbutton:hover {
    text-decoration: none;
    background: #2198ff;
  }
  a.pbutton.active {
    transform: rotate(135deg);
    transition: transform 0.5s;
  }