#hover{
  position:fixed;
  background:#000;
  width:100%;
  height:100%;
  opacity: .4;
  z-index:10;
}

#popup{
  position:absolute;
  width:700px;
  height:100px;
  min-height:100px;
  background: url(popup_bg.png);
  left:50%;
  top:50%;
  border-radius:5px;
  padding:30px 0 30px  0;
  margin-left:-400px; /* width/2 + padding-left */
  margin-top:-150px; /* height/2 + padding-top */
  text-align:center;
  box-shadow:0 0 10px 0 #000;
  z-index:400;
    }
  html>body #popup{ height:auto;}
#popup p{color: red;}


@media screen and (max-width: 720px) {
#popup{
  
  width:75%;
  margin-left:0px; /* width/2 + padding-left */
  margin-top:-50px; /* height/2 + padding-top */
  left:9%;
  top:25%;
  padding:5px 10px 70px 10px;
    }
 }
 
#close{
  position:absolute;
  background:black;
  color:white;
  right:-15px;
  top:-15px;
  border-radius:50%;
  width:30px;
  height:30px;
  line-height:30px;
  text-align:center;
  font-size:8px;
  font-weight:bold;
  font-family:'Arial Black', Arial, sans-serif;
  cursor:pointer;
  box-shadow:0 0 10px 0 #000;
}


@media screen and (max-width: 700px) {
#popup{  }
 }