﻿.container {
   padding-right: 25px;
   padding-left: 15px;
   margin-right: auto;
   margin-left: auto;
}

@media (min-width: 768px) {
   .container {
      width: 750px;
   }
}

@media (min-width: 992px) {
   .container {
      width: 970px;
   }
}

@media (min-width: 1200px) {
   .container {
      width: 1200px;
   }
}

@media (max-width: 767px) {
   #featureContainer .carousel-inner .carousel-item > div {
      display: none;
   }

      #featureContainer .carousel-inner .carousel-item > div:first-child {
         display: block;
      }
}

#featureContainer .carousel-inner .carousel-item.active,
#featureContainer .carousel-inner .carousel-item-next,
#featureContainer .carousel-inner .carousel-item-prev {
   display: flex;
}

@media (min-width: 768px) {

   #featureContainer .carousel-inner .carousel-item-end.active,
   #featureContainer .carousel-inner .carousel-item-next {
      transform: translateX(25%);
   }

   #featureContainer .carousel-inner .carousel-item-start.active,
   #featureContainer .carousel-inner .carousel-item-prev {
      transform: translateX(-25%);
   }
/*
   #featureContainer .card img {
      width: 100%;
      height: 40vh;
   }*/

   #featureContainer .carousel-item {
      justify-content: space-between;
      
   }
}

/*@media (max-width: 767px) {
   #featureContainer .card img {*/
/*      width: 100%;
      height: 75vh;*/
   /*}*/
}

#featureContainer .carousel-inner .carousel-item-end,
#featureContainer .carousel-inner .carousel-item-start {
   transform: translateX(0);
}

#featureContainer .card {
   border:solid;
}

#featureContainer .card {
  /* position: relative;*/
}

   #featureContainer .card .card-img-overlays {
      position: absolute;
      bottom: 15%;
      left: 10%;
   }

#featureContainer a {
   text-decoration: none;
}

#featureContainer .indicator {
   border: 1px solid rgb(202, 202, 202);
   padding: 3px 6px 3px 6px;
}

   #featureContainer .indicator:hover {
      background-color: blue;
      border: 1px solid blue;
      transition: 200ms;
   }

   #featureContainer .indicator:hover {
      color: white;
      transition: 200ms;
   }

#featureContainer .indicator {
   color: lightgray;
}

#featureContainer .float-end {
   padding-top: 10px;
}
