div.modal
{
  background-color: rgba(0,0,0,0.7);
  position: fixed;
  top:0px;
  left:0px;
  height:1;
  width:100%;
  display:none;
}
div.modal .modal-content
{
  background:white;
  width:22%;
  margin:auto;
  margin-top:10%;
  border-radius: 4px;


}
div.modal .modal-header
{
  width:100%;
  padding:16px;
  box-sizing:border-box;
  border:0px;
}
div.modal .modal-header h2
{
  display: inline;
}
div.modal .modal-icon
{
  float: right;
  margin:4px;
}
div.modal .modal-icon i
{
  color:#bdbdbd;
}
div.modal .modal-body
{
  padding:14px;
}
a.modal-close
{
 color:#212121;
 text-decoration:none;
 font-size:100%;
}
div.modal .modal-body input[type='text']
{
  border:1px solid #dcdcdc;
  border-radius:3px;
  font-size:100%;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  box-sizing:border-box;
  margin:10px;
  margin-left:0px;
  margin-right:0px;
  padding:10px;
}

@media screen and (max-width:1440px)
{
  #p-popup .modal-content
  {
    width:30%;
  }
  #p-popup2 .modal-content
  {
    width:30%;
  }
}
@media screen and (max-width:1024px)
{
  #p-popup .modal-content
  {
    width:30%;
  }
  #p-popup2 .modal-content
  {
    width:30%;
  }
}
@media screen and (max-width:768px)
{
  #p-popup .modal-content
  {
    margin-top:100px;
    margin-top:30%;
    width:60%;
  }
  #p-popup2 .modal-content
  {
    margin-top:100px;
    margin-top:30%;
    width:60%;
  }
}
@media screen and (max-width:425px)
{
  #p-popup .modal-content
  {
    margin-top:50%;

    width:90%;
  }
  #p-popup2 .modal-content
  {
    margin-top:50%;

    width:90%;
  }
}