/* #############################
    CONTROLS BACKGROUND COLOR HERE & WIDTH IN STYLE.CSS */
body {
  background-color: #000;
}
.container-body-total {
  background-color: #000;
}

/* #############################
    CONTROLS INDIVIDUAL NAVIGATION CSS SEE styles.css for rest  
   ############################# */

.nav-link {
  color: #999;
}
.nav-bar ul li a:hover,
body#home .home a,
body#about-kas .about-kas a,
body#contact-kas .contact-kas a,
body#faq .faq a,
body#links .links a,
body#art .art a,
body#coming-events .coming-events a {
  color: #7da87d;
}
.nav-seperator {
  color: #999;
}

/* #############################
MOBILE NAVAGATION ICON COLOR ONLY REST OF CSS ON style.css  */
.icon-mobile-nav {
  /* color: #333; */
  color: #7da87d;
}
.largerView,
.largerViewTitle {
  font-size: 1.2rem;
}
@media (max-width: 800px) {
  /* #############################
  MOBILE NAVAGATION BACKGROUND COLOR ONLY REST OF CSS ON style.css  */
  .nav-ul {
    background-color: #000;
  }
  /* increases font size for iphone */
  .largerView {
    font-size: 1.8rem;
  }
  /* increases font size for iphone */
  .largerViewTitle {
    font-size: 1.6rem;
  }
}

.nav-link {
  text-decoration: none;
  color: #999;
  /* color: #fff; */
}
.nav-bar ul li a:hover,
body#home .home a,
body#about-kas .about-kas a,
body#contact-kas .contact-kas a,
body#faq .faq a,
body#links .links a,
body#art .art a,
body#coming-events .coming-events a {
  color: #7da87d;
  cursor: pointer;
}

/* #############################
           IMAGE GALLERY CSS  
   ############################# */
.edit-art-form form {
  margin-top: 0;
  margin-bottom: 1rem;
}
.container {
  display: grid;
  /* grid-template-columns: repeat(4, 1fr); */
  grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
  /* grid-auto-rows: 100px 300px; */
  grid-gap: 1rem 5rem;
  grid-auto-flow: dense;
  margin: 2rem 5rem;
}
.container a {
  font-size: 1rem;
  /* font-weight: 800; */
  text-decoration: none;
  color: #7da87d;
  text-align: center;
}
.largerView {
  text-transform: uppercase;
  margin: 1rem 0 0.5rem 0;
}
.largerViewTitle {
  margin-bottom: 1rem;
}
.container a:hover {
  text-decoration: underline;
}
.text {
  text-align: center;
}

.gallery-item {
  width: 100%;
  height: 100%;
  position: relative;
}

.gallery-item .image {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.gallery-item .image img {
  width: 100%;
  height: 100%;
  /* object-fit: contain; */
  object-fit: cover;
  object-position: 50% 50%;
  cursor: pointer;
  transition: 0.5s ease-in-out;
}

.gallery-item:hover .image img {
  transform: scale(1.5);
}

.gallery-item .text {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 1.8rem;
  pointer-events: none;
  z-index: 4;
  /* transition: 0.3s ease-in-out; */
}

.gallery-item:hover .text {
  opacity: 1;
  animation: move-down 0.3s linear;
  /* padding: 0.1em; */
  width: 100%;
  -webkit-backdrop-filter: blur(5px) saturate(1.8);
  backdrop-filter: blur(5px) saturate(1.8);
}
/* #############################################
        CHANGE MENU TO MOBILE
   ############################################# */