/* สไลด์ลงมาจากด้านบน */
@keyframes slideDown {
  0% {
    transform: translateY(-100%);
    transition: 10s;
  }
  100% {
    transform: translateY(0);
   
  }
  
  
}
.modalx {
  animation: slideDown 2s linear;
}


/* ใส่เอฟเฟกต์การเคลื่อนไหวให้กับรูปภาพ */
#modalx img {
  animation-name: slideDown;
  animation-duration: 2s;
  width: 80%;
  z-index: +1000;
 top: 200px;
 left: 20%;
 padding: 10px;
 
}
.modalx {
  background: url('bg.gif');
background-size: cover;
  width: 50%;
text-align: center;
  left: 25%;
  top: 0;
border: 2px solid red;
position: absolute;
z-index: +800;

}
.modalx {
  background: url('bg.gif');

}

 @media screen and (max-width:480px) {

  .modalx {
  left: 0;
    width: 100%;
z-index: +800;
  }

 }