@charset "utf-8";
/* CSS Document */

.shadow{
  z-index:2;
  position: absolute;
  top:0px;
 left:0px; 
  width:100%;
  height:100vh;
  background: rgba(0,0,0,0.6);
  display:flex;
  justify-content: center;
  align-items: center;
}
.main-modal{
  width:350px;
  height:300px;
  background: #fff;
  border-radius:5%;
  display:flex;
  justify-content: center;
  align-items:center;
  flex-direction: column;
}

.hideModal{
    z-index:-1;
    opacity:0;
  animation: hide .25s;
  
transform: scale(0);
}@keyframes hide {
  from{
      z-index:2;
transform: scale(1);
    opacity:1;
  } to{
      z-index:-1;
transform: scale(0);
    opacity: 0;
  }
}
.showModal{
  opacity:1;
    z-index:2;
  animation: show .2s;
  
transform: scale(1);
}
@keyframes show {
  from{
    
transform: scale(0);
    opacity:0;
      z-index:-1;
  } to{
    
transform: scale(1);
    opacity: 1;
      z-index:2;
  }
}