.container-fixed {
  position: fixed;
  width: 100%;
  margin: 0 auto;
  padding: 1em 3em;
  box-sizing: border-box;
  background: white;
  z-index: 999;
}
.container-fluid {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 1em;
  box-sizing: border-box;
  background: white;
}





label {
  display: block;
  font-weight: 550;
  font-size: 0.85em;
}
input, textarea {
  width: 100%;
  padding: 6px 12px;
  border-radius: 6px;
  border: solid 1px #C7C7C7;
}


.button, button {
  background:#e8e8eb;
  border-radius:6px;
  padding:6px 12px;
  font-weight:550;
  text-decoration:none;
  color:black;
  display:inline-block;
  border:none;
}
.button:hover, button:hover {
  background:#e0e0e3;
}


.gallery {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 2rem;
}

.card img {
  width:100%;
}

.card,.card.sm {
  max-width: 220px;
  border-radius: 10px;
  box-shadow: 0px 0px 10px #DDD;
  text-decoration:none;
  color:black;
}
.card img ,.card.sm img {
  height:200px;
  overflow:hidden;
}
.card.md {
  max-width: 400px;
  border-radius: 10px;
  box-shadow: 0px 0px 10px #DDD;
}
.card.md img {
  border-radius:10px 10px 0 0;
  height:200px;
  overflow:hidden;
  scale: 100%;
  transition:scale 1s;
}
.card.md:hover {
  scale:104%;
  transition:scale 1s;
}
.card.lg {
  max-width: 1200px;
  border-radius: 10px;
  box-shadow: 0px 0px 10px #DDD;
}

.card h2 { margin:0.6em;  }


/*********************** modal *******************/

.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.modal.shown { display:flex; }

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
  border-radius:10px;
}
.modal-content h1,
.modal-content h2,
.modal-content h3 { margin-top:0px; }

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

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

.tile {

}
.tile-img {
  aspect-ratio: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.tile-img img {
  max-width:96%;
  max-height:96%;
  box-shadow:1px 1px 6px #777;
  margin: 0 auto;
  border-radius:4px;
}
.tile-body {
  font-weight: 550;
  font-size: 0.85em;
}