#modals,#modals1{
      background-color:#f1f1f1;
        display:none;
    position: fixed;
    top:0px;
    left:0;
    width: 100%;
    z-index:10; 
    height:100vh;
    margin:0;
    padding:0;
     overflow:hidden;
     z-index:10000;
}
#modal{
    position: relative;
    width: 100%; 
    height:100vh;
 display:flex;
justify-content:center;
align-content:center;
    background-color:#f1f1f1;
      overflow:hidden;
z-index:10000;
}
/*#modal div{background:blue;*/
/*position:absolute;*/

/*}*/
#name{
    display:none;
  
}

#close,#close1{
position:absolute;
top:0;
right:0;
  /*float:right;*/
 z-index:20000;
}

#modal img{
 position:absolute;
 top:0;
     height:auto;
     width:auto;
     max-height:99vh;
     max-width:100vw;
     cursor:auto;
    display:none;
 }
#close,#close1{
position:absolute;
top:0;
right:0;
font-size:30px;
background-color:#fff;
  cursor:zoom-out;
  z-index:20000;
}
#modal  [data="active"]{
    display:block;
     cursor:auto;
   z-index:10000;
}
/*@media only screen and (max-width: 991px){*/
/*   #modal img{*/
/* position:absolute;*/
/*     height:auto;*/
/*     width:auto;*/
/*     max-height:85vh;*/
/*     max-width:100vw;*/
/*     cursor:auto;*/
/*    display:none;*/
/* } */
/*}*/
@media only screen and (max-width: 500px) {
#modals,#modals1{
    display:none;
    position: fixed;
   flex-wrap: wrap;
  align-content: center;
justify-content:center;
height:100vh;
  z-index:10000;
}
#modal{
   position:absolute;
  flex-wrap: wrap;
  align-content: center;
justify-content:center;

z-index:10000;
}

#modal img{
 position:relative;
 margin:auto auto ;
    display:none;
 }




}