div#header{
  padding: 1.5em 0px .5em;
  background-repeat: no-repeat;
  background-size: 100% auto;
  /* The radial gradient is the first layer, on top of the image */
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0.75) 75%),
                    url('images/mcvalley.jpg');

  /* Additional background properties for the image */
  background-size: cover;
  background-position: center;
}

#header h1 img {
  max-width:350px;
  filter: drop-shadow(0 0 5px white);
}

body div#main {
  padding:2em inherit 1.5em;
}

div#main .feature .image img{
  width:auto;
}

/* NAV Styles */
nav#block-karla-family-wood-2025-main-menu{
  padding:15px 20px;
  background-color:#FFF;
  border-top: solid 1px rgba(224, 224, 224, 0.75);
  border-bottom: solid 1px rgba(224, 224, 224, 0.75);
  margin-bottom:30px;
  margin-top:-25px;

  ul {
    max-width: 960px;
    margin: 0px auto;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: space-between; /* spreads items edge-to-edge */
    align-items: center;
    list-style-type: none;

    li {
      list-style-type: none;
    }

    li a{
      display:block;
      text-align: center;
      padding:inherit 15px;
      padding: 30px;
      border: solid 1px rgba(224, 224, 224, 0.75);

      &:hover,
      &.active
      {
        color: #FFF;
        background-color: #4eb980;
      }
    }

  }
}

/* Vertically Croppedimages */

.vertical-crop {
  height: 250px;        /* The visible crop window height */
  overflow: hidden;     /* Crops vertically */

  img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: 50% 0%;
  }
}

/* Horizontal image list. */

ul.horizontalImages{
  display: flex;
  justify-content: space-between; /* spreads items edge-to-edge */
  align-items: center;
  text-align:center;
}

.testimonials img{
  width:50%;
  height:50%;
}

/* Inventory items */
.sectionSelector{
  li{
    background-repeat: no-repeat; /* Prevents tiling if the image is smaller than container */
    background-position: center; /* Centers the image within the container */
    background-size: 90%; /* or contain, or 100% 100%, etc. */
    font-size:0px;

    a{
      display:block;
      height:130px;
      width:130px;
      border-bottom:none;
    }

    &.ktables{
      background-image: url("images/sectionIcons/kitchenTables.png");
    }

    &.ctables{
      background-image: url("images/sectionIcons/coffeeTables.png");
    }

    &.etables{
      background-image: url("images/sectionIcons/endTables.png");
    }

    &.benches{
      background-image: url("images/sectionIcons/benches.png");
    }

    &.other{
      background-image: url("images/sectionIcons/other.png");
    }

    &:hover{
      background-size:cover;
    }
  }


  label{
    cursor: pointer;
  }
}

ul.inventoryList {

  li.inventoryItem{
    border-top:1px solid grey;
    display: flex;
    gap: 20px; /* Adds space between the columns */

    .pictures{
      flex:2;
      max-width:500px;

      .mainImage{
        padding:15px;
        width:500px;
        height:500px;
        text-align: center;
        align-items: center;
        justify-content: center;
        display:flex;

        img {
          max-width:100%;
          max-height:100%;
        }
      }

      .thumbnails{
        li {
          display:inline;

          &:hover {
            cursor: pointer;
          }
        }
        img {
          display:inline;
          width:95px;
          height:95px;
        }
      }

    }

    .details{
      flex:1;

      h4{
        margin-top:20px;
      }

      .cost{
        font-weight:bold;
        font-size:120%;
      }
      .contact{
        margin-top:20px;
      }
    }
  }
}