

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   /* body { background-color: red; }  */

	.avesi_image_grid div {
            margin: 5px;
            float: left;
            width: 170px;
	    height: 180px;
	    overflow: hidden;
        }
/*
*/
        .avesi_image_grid div img {
             width: 100%;
        }

        .avesi_image_grid div span {
            padding: 15px;
            text-align: center;
        }


}


 @supports (display: grid) {

	.avesi_image_grid {
	  display: grid;
	  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	  grid-gap: 20px;
	  align-items: stretch;
	}

 }  /*  end of @supports(display: grid) */

	.avesi_image_grid div {
	<!----	border: 2px solid red; ----->
	<!----	justify-content: center; ---->
	}
.avesi_image_grid div img {
  border: 1px solid #ccc;
  box-shadow: 2px 2px 6px 0px  rgba(0,0,0,0.3);
  max-width: 100%;
<!---  width: 180px;  --->
  display: block;
  margin: 0 auto;
  width: 80%;
}

.avesi_image_grid div img:hover {
  box-shadow: 2px 2px 6px 0px  rgba(0,0,0,0.7);
}

.avesi_image_grid div span {
  text-align: left;
  padding: 0.5em;
  font-style: italic;
  font-size: 1em;
  display: block;
}


  @media  (max-width: 219px) {


	.avesi_image_grid {
	  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
	  grid-gap: 8px;
  }

/*
	.avesi_image_grid div img {
	  width: 60px;
	}

	.avesi_aig_fullscreen {
	   margin: 0 auto;
	   width: 172px;
	}
  }

*/

}

  @media  (min-width: 220px) and (max-width: 419px) {

	.avesi_aig_fullscreen {
	   width: 300px;
	}
  }


  @media (min-width: 420px) and (max-width: 627px) {
	.avesi_aig_fullscreen {
	   width: 400px;
	}
  }
  @media (min-width: 628px) and (max-width: 1023px) {
	.avesi_aig_fullscreen {
	width: 572px;
	}
  }

  @media (min-width: 1024px) {
	.avesi_aig_fullscreen {
	width: 768px;
	}
  }





/* The Modal (background) */
.avesi_aig_modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  <!-----   padding-top: 100px; /* Location of the box */ ------------>
  left: 0;
  top: 0;
/*
  left: 50%;
  top: 50%;
*/
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: hidden; /* disable scroll */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.7); /* Black w/ opacity */
}

/* Modal Content */
.avesi_aig_modal-content {

/*
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
<!----  border: 1px solid #888; ---->
  border: 2px solid yellow;

  width: 80%;
/*
}

.avesi_aig_modal-content img {
/*
display: block;
margin-left: auto;
margin-right: auto;
*/
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

}


/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
