.filter { 
	text-align: center; 
	  margin: 2em auto;
  }
  
  .filter a {
	text-align: center;
	padding: .7em 1em;
	background: #59bba41c;
	color: rgb(27, 27, 27);
	text-decoration: none;
  }
  
  .filter a.current { background: #59bba4;color: rgb(255, 255, 255); }
  
  
  
  .boxGroup {
	text-align:center;
	padding: 10px 0 150px 0;
  }
  
  .boxGroup div {
	width:250px;
	
	display: inline-block;
  }
/* 
  .boxGroup .box img {
	width: 100%;
	border-radius: 10px;
	box-shadow:5px #59bba4;
  } */


  /* /////////// */

  .row {
	display: -ms-flexbox; /* IE10 */
	display: flex;
	-ms-flex-wrap: wrap; /* IE10 */
	flex-wrap: wrap;	
  }
  
  /* Create four equal columns that sits next to each other */
  .column {
	-ms-flex: 25%; /* IE10 */
	flex: 25%;
	max-width: 25%;
  }
  
  .column .box img {
	margin-top: 8px;
	vertical-align: middle;
	width: 100%;
	border-radius: 10px;
	box-shadow:5px #59bba4;
  }
  .column .box .iframe {
	margin-top: 8px;
	vertical-align: middle;
	width: 100%;
	border-radius: 10px;
	box-shadow:5px #59bba4;
  }
  
  /* Responsive layout - makes a two column-layout instead of four columns */
  @media screen and (max-width: 800px) {
	.column {
	  -ms-flex: 50%;
	  flex: 50%;
	  max-width: 50%;
	}
  }
  
  /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
  @media screen and (max-width: 600px) {
	.column {
	  -ms-flex: 100%;
	  flex: 100%;
	  max-width: 100%;
	}
  }



  /* /////////// */

  .grid-container {
	columns: 5 200px;
	column-gap: 3rem;
	width: 90%;
	margin: 0 auto;
  }
  
  .grid-container div img {
	width: 150px;
	margin: 0 0.5rem 0.5rem 0;
	display: inline-block;
	width: 100%;
	border: 3px solid #fff;
	/* box-shadow: 5px 5px 5px rgb(169 169 169 / 50%); */
	border-radius: 5px;
	transition: all 0.25s ease-in-out;
  }
  .grid-container div iframe {
	width: 150px;
	margin: 0 0.5rem 0.5rem 0;
	display: inline-block;
	width: 100%;
	/* box-shadow: 5px 5px 5px rgb(169 169 169 / 50%); */
	border-radius: 5px;
	transition: all 0.25s ease-in-out;
	border: 3px solid #fff;
  }


  .grid-container div img:hover {
	width: 100%;
	border-radius: 5px;
	transition: all 0.25s ease-in-out;
	scale: 1.03;
	cursor: pointer;
  }

.iframe-wrapper {
    display: inline-block;
    position: relative;
}

.iframe-wrapper:hover {
	width: 100%;
	border-radius: 5px;
	transition: all 0.25s ease-in-out;
	scale: 1.03;
	cursor: pointer;
}
  /* ////// */
  /* preview modal */
  #preview-modal{
	background: #00000066;
	z-index: 99999;
  }
  #preview-content{
	text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }
  #preview-content img{
	width: 50%;
  }
  #preview-content iframe{
	width: 50%;
	height: 60%;
  }
.close-div{
	position: absolute;
    width: 100%;
}

  /* //////////////// */
  /* media query */
  @media screen and (max-width:760px){
	#preview-content img{
		width: 100%;
	  }
	  #preview-content iframe{
		width: 100%;
		height: 50%;
	  }
	  .boxGroup div {
		width: 100%;
	}
  }