@import url("/script/bootstrap.css");
@import url("/script/animate.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css");
@import url("/script/metroui/css/metro.css");
@import url("/script/metroui/css/metro-responsive.css");
@import url("/script/metroui/css/metro-icons.css");
@import url("https://fonts.googleapis.com/css?family=Raleway");
@import url("/styles.css");
.container {
  padding-right: 15px;
  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: 1170px;
  }
}

@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;
}

/* medium and up screens */
@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: 90%;
    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: 0;
}

#featureContainer .card{
  position: relative;
}

#featureContainer .card .card-img-overlays{
  position: absolute;
  bottom: 15%;
  left: 10%;
  color: #fff;
  font-weight: bolder;
}

#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;
}