@import url('https://fonts.googleapis.com/css?family=Shadows+Into+Light');
.shadows{
  font-family: 'Shadows Into Light', cursive;
}
#slogan{
  color: #FFF;
  padding: 10px 0 20px 0;
}
#slogan h1{
  margin-top: -10px;
}

blockquote{
  font-size: 0.9em;
  border: 0;
  padding: 50px 30px 30px 40px;
  background: #F8F8F8;
  position: relative;
}
blockquote::before {
  font-family: Times New Roman;
  color: #CE0F69;
  content: "\201C";
  display: block;
  font-size: 80px;
  left: 10px;
  top: 40px;
  position: absolute;
  height: 0;
}

.feature-product{
  border:solid thin #F0F0F0;
  display: block;
  margin-bottom: 20px;
}
.feature-product span{
  display: block;
  padding: 10px 15px;
  background: #006CDC;
  color: #FFF;
  font-size: 1.2em;
  font-weight: 300;
}
.feature-product .img{
  height: 200px;
  overflow: hidden;
}
.feature-product .img img{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

@media (min-width: 768px) {
  header{
    background-color: rgba(0,0,0,0.1);
    border-bottom:1px solid rgba(255,255,255,.2);
  }
  header.black{
    background-color: black;
    -webkit-transition: background-color 1000ms linear;  
  }
  /* Carousel base class */
  .carousel {
    height: 350px;
    /*margin-bottom: 40px;*/
  }
  /* Since positioning the image, we need to help out the caption */
  .carousel-caption {
    z-index: 10;
  }

  .carousel-inner{
    height: 350px;
  }
  /* Declare heights because of positioning of img element */
  .carousel .item {
    height: 340px;
    background-color: #777;
  }
  .carousel-inner > .item > img {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    /*height: 800px;*/
  }
}
@media (min-width: 992px) {
  .carousel {
    height: 420px;
  }  
  .carousel-caption{
    bottom: 100px;
  }
  .carousel-inner{
    height: 420px;
  }
  .carousel .item {
    height: 420px;
  }

}
@media (min-width: 1200px) {
  .carousel {
    height: 550px;
  }  
  .carousel-caption{
    bottom: 180px;
  }
  .carousel-inner{
    height: 550px;
  }
  .carousel .item {
    height: 550px;
  }
}