@charset "utf-8";
/* CSS Document GRID-Image Gallery */
* { box-sizing: border-box;}  





.pic-size_THB ing {
	object-fit: contain;
	width:100%;

}

/* First the Grid */
.gallery-grid {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-gap: 0.5rem;
  justify-items: center;
  margin: 0;
  padding: 0;
}
.leftgrid {justify-items: left}

.gallery-grid-2 {
  display: -ms-block;
  display: block;
  grid-template-columns: repeat(2, minmax(180px, 300px));
  grid-gap: 2rem;
  justify-items: center;
  margin: 0;
  padding: 0;
}

/* The Picture Frame */
.gallery-frame {
    /* [disabled]font-size: 1.2rem; */
    text-align: center;
    /* [disabled]font-family: "Lato", sans-serif; */
    font-weight: 300;
    color: rgba(81,81,81,1.00);
    margin: 20px;
    /* [disabled]background-color: #333; */
    /* [disabled]color: #d9d9d9; */
}
.gallery-frame-1 {
    text-align: center;
    margin: 0px 0px 20px 0;
}
.gallery-frame-2 {
    /* [disabled]font-size: 1.2rem; */
    text-align: center;
    /* [disabled]font-family: "Lato", sans-serif; */
    font-weight: 300;
    color: rgba(81,81,81,1.00);
    margin: 10px 0 10px 0;
    /* [disabled]background-color: #333; */
    /* [disabled]color: #d9d9d9; */
}
/* The Images */
.frame-borderrad {border-radius: 50px 50px 0;}
.gallery-img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
    transition: opacity 0.25s ease-in-out;
    /* box-shadow: 0px 2px 5px rgba(0,0,0,0.5); */
	/* box-shadow: 0px 0px 0px 0.5px rgba(0, 0, 0, 0.4); */
	border: rgba(0,0,0,0.2) 0.5px solid;
	padding: 0px;
    margin-bottom: 10px;
}
.gallery-img-1 {
    max-width: 100%;
    height: auto;
    object-fit: cover;
    transition: opacity 0.25s ease-in-out;
    /*  box-shadow: 0px 2px 5px rgba(0,0,0,0.5);  */
	/* box-shadow: 0px 0px 0px 0.5px rgba(0, 0, 0, 0.4); */
	border: rgba(0,0,0,0.2) 0.5px solid;
	padding: 0px;
    margin-bottom: -2px;
}
.gallery-img:hover {
  opacity: .5;
}
.gallery-img-1:hover {
  opacity: .5;
}
@media (min-width: 480px) {
		.gallery-grid-2 {
		  display: -ms-grid;
		  display: grid;
		  grid-gap: 2rem;
		}
		.gallery-frame-2 {
			margin: 65px 0 55px 0;
		}	
}
@media (min-width: 768px) {
		.gallery-grid {
		  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		}
}
@media (min-width: 930px) {
		.gallery-grid {
		  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
		}
}

@media (min-width: 1200px) {
	.gallery-frame-1 {
		text-align: center;
		margin: 0px 20px 0 0;
	}
}
@media (min-width: 1800px) {
	.gallery-frame-1 {
		text-align: center;
		margin: 0px 20px 0 0;
	}
		.gallery-grid {
		  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
		}	
}