/* ---------------------- STYING FOR THE HOME PAGE ---------------------------*/

#featured-products {
  text-align: center;
}

.product-img {
  width:50%;
}

/* Removing the space between the banner and nav bar */
.navigation {
  margin-bottom: 0;
}

/* Flex box CSS*/
.flex-box {
  display: flex;
  margin: 5em;
  flex-wrap: wrap;
  justify-content: center;
}

/* Make the items display vertically on a smaller screen size */
@media screen and (min-width: 35em) {
  .flex-box{
    flex-direction: column;
    flex-wrap: nowrap;
  }
}

@media screen and (min-width: 55em) {
  .flex-box{
    flex-direction: row;
    flex-wrap: wrap;
  }

}


/* Carousel CSS */
.slideshow-container {
  max-width: 100%;
}

.slide-images-1{
  width:100%;
}

/* Setting the initial display of smaller banner to be invisible */
.slide-images-2{
  width:100%;
  display:none;
}

.slide-images-3{
  width:100%;
  display:none;
}

/* Fading Animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

.home-page-section {
  text-align: center;
}

/* Change Event Banners as Window is resized */
@media only screen and (max-width: 35em) {
  .slide-images-1{
       display: none;
     }

  .slide-images-3{
       display: block;
     }

   .product-img {
       width:100%;
     }
}

@media only screen and (min-width: 35em) and (max-width: 55em) {
  .slide-images-1{
       display: none;
     }

  .slide-images-2{
       display: block;
     }

   .product-img {
         width:100%;
     }
}