/* 

Colors
Brown:     #826e50; 
Purple:    #5c78d6; 

*/

/* ----------- All Device Styles (ALL) ----------- */

/*
inspired from https://codepen.io/Rowno/pen/Afykb 
*/
.carousel-fade .carousel-inner .item {
  opacity: 0;
  transition-property: opacity;
}

.carousel-fade .carousel-inner .active {
  opacity: 1;
}

.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0;
  z-index: 1;
}

.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}

.carousel-fade .carousel-control {
  z-index: 2;
}

#slideshow-1 .carousel-caption-wrapper {
  position: absolute;
  bottom: 0px;
  padding-bottom: 0px;
  width: 100%;
  background: linear-gradient(to top, rgba(0,0,0,.8), rgba(0,0,0,0));
}

#slideshow-1 .carousel-caption-wrapper p {
  color: #fff;
  font-family: 'source-sans-pro', helvetica, sans-serif;
  width: 60%;
  position: relative;
  font-weight: 700;
}

#slideshow-1 .carousel-caption-wrapper .container {
  background: none;
}

#slideshow-1 .carousel-caption {
  border-radius: 15px;
  position: relative;
  padding-left: 20px;
  text-align: left;
  background-color: rgba(83, 151, 166, .9);
  top: -35px;
  padding-right: 30px;
}

.carousel-caption h1 {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px);
  /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
}

.carousel-caption h2 {
  color: white;
  font-size: 35px !important;
  margin-top: 0;
  font-weight: bold;
}

p.slide-desc {
  position: relative;
  top: 0px !important;
  font-size: 18px !important;
  font-weight: normal !important;
  width: 100% !important;
}

.carousel-caption a:hover {
  text-decoration: none;
}

#slideshow-1 .carousel-indicators-wrapper {
  position: absolute;
  bottom: 0px;
  padding-bottom: 0px;
  width: 100%;
  background: none;
}

#slideshow-1 .carousel-indicators {
  left: 0;
    /* right: 0px; */
    /* margin-left: 0px; */
    width: 0;
    position: relative;
    /* padding-right: 20px; */
    /* text-align: right; */
    background: none;
    list-style: none;
    z-index: 15;
    bottom: 25px;
    display: inline;
    float: right;
}

/*
WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
now override the 3.3 new styles for modern browsers & apply opacity
*/
@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .item.next,
    .carousel-fade .carousel-inner > .item.active.right {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.prev,
    .carousel-fade .carousel-inner > .item.active.left {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.next.left,
    .carousel-fade .carousel-inner > .item.prev.right,
    .carousel-fade .carousel-inner > .item.active {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
}

/* Features ALL */ 

.feature-blurb p {
  text-align: center;
  color: #fff;
  padding-bottom: 20px;
}

#header-nav .input-group-addon {
  background-color: #5f9259;
  border:1px solid #5f9259;
  padding: 0px 7px;
  font-size: 18px;
}

span#search-icon {
  color: #fff;
}

#search-form-wrapper {
  width: 100%;
  position: absolute;
  bottom: -60px;
  z-index: 200;
  display: none;
}

#search-form-div {
  background-color: #fff;
  width: 50%;
  padding: 15px 25px 15px 25px !important;
}

.w-100 { 
  width: 100%;
}

.hmpg-features-section-one h3 {
    font-family: source-sans-pro, sans-serif;
    font-style: normal;
    font-size: 36px;
    color: #000;
    width: 80%;
    font-weight: 700;
    padding-bottom: 15px;
}

.hmpg-features-2-text h4 {
  font-family: "source-sans-pro",serif;
  font-size: 24px;
  color: #000;
  font-weight: 700;
  padding-bottom: 5px;
  text-transform: uppercase;
}

.hmpg-features-section-one p {
  line-height: 1.8;
}

.hmpg-features-section-one .btn-commerce {
  margin-top:15px;  
}

/* Homepage signup form */ 

form#email-form button {
    top: -1px;
    position: relative;
    left: 15px;
    background-color: #275e35;;
    color: #fff;
    border: 2px solid #275e35;;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
}

form#email-form button:hover {
    background-color: #488a59;
    border: 2px solid #488a59;
    color: #fff;
}

form#email-form button:after {
    content: '\f054';
    font-family: 'FontAwesome';
    padding-left: 5px;
}


/* End ALL */ 

/* ----------- Smartphone Device Styles (XS)  ----------- */

@media (max-width: 767px) {

  h2 {
    font-size: 36px;
    font-weight: 900;
}

h2.specific-plan-update, h2.default-page-title, h2.specific-plan-areas {
    width: 300px;
}

.brown-box-involved h3 {
    color: #483d27;
    font-weight: 700;
    font-size: 36px;
    margin-top: 0px;
}

  .large-intro-text {
    font-size: 18px;
    line-height: 28px;
    color: #826e50;
    padding: 10px 0px;
  }

  .content-text {
    font-size: 18px;
    line-height: 26px;
    color: #826e50;
    padding: 10px 0px;
  }

  .carousel-caption {
    display: none;
  }

  .hmpg-intro-text {
    font-size: 18px;
    line-height: 28px;
    color: #826e50;
    padding: 10px 0px 20px;
    text-align: center;
  }

  .navbar-brand {
  padding:0px;
  }

  .navbar-toggle {
    right: -30px;
  }

  .hmpg-guide-principles {
    margin: 15px 0px;
  }

  .hmpg-guide-principles h2 {
    font-family: "ff-tisa-web-pro", serif;
    color: #826e50;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    text-transform: none;
  }

  .hmpg-guide-principles p {
    color: #826e50;
    font-size: 18px;
    line-height: 28px;
    text-align: center;
    padding: 0px 40px;
  }

  .involved-body {
    background-color: #faf7f2;
    margin-bottom: 15px;
    padding: 20px;
  }

  .involved-image img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-height: 125px;
  }

  .hmpg-features h4 {
    color: #483d27;
    text-align: center;
    font-size: 20px;
    font-weight: 500;
  }

  .hmpg-features p {
    text-align: center;
    color: #826e50;
  }


  .hmpg-features-lower h4 {
    color: #5c78d6;
    font-size: 30px;
    font-weight: bold;
    margin-top: 0px;
  }

  .hmpg-features-2-text {
    padding: 15px;
  }

  #footer {
  text-align: center;
  }

  .footer-social {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding: 25px 0px;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    margin-bottom: 25px;
  }

  .footer-contact-col {
    padding-bottom: 20px;
  }

  .btn-blue-hollow {
    float: none;
  }

  #social-links {
    margin-left: auto;
    margin-right: auto;
  }

  .carousel {
    position: relative;
    position: relative;
    top: 0px;
  }

  /* Timeline */

.timeline-1, .timeline-2, .timeline-3, .timeline-4 {
    min-height: 250px;
    margin-left: -15px;
    margin-right: -15px;
    padding-left: 15px;
    padding-right: 15px;
    height: auto;
    padding-bottom: 25px;
}

.timeline-icon img {
    width: 100px;
    padding-top: 15px;
}

.our-timeline-icon-row {
    margin-top: 50px;
    text-align: center;
}

.timeline-active {
    background-color: #a9c4ff;
}

.our-timeline-icon-row h3 {
    font-size: 25px;
    color: #483d27;
    font-weight: normal;
}

.brown-box-involved h4 {
    color: #826e50;
    font-weight: 700;
    font-size: 36px;
    margin-top: 0px;
}

.rates-comp-row {
  margin-left: 0px;
  margin-right: 0px;
}

.east-colorado, .central-district, .east-pasadena, .fair-oaks, .lamanda-park, .lincoln-ave, .north-lake, .south-fair-oaks {
    height: auto;
}

.learn-more .central-district,
.learn-more .east-colorado,
.learn-more .lamanda-park,
.learn-more .lincoln-ave {
  margin-bottom: 30px;
}

.learn-more h3 {
    font-family: "ff-tisa-web-pro", serif;
    color: #826e50;
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    text-transform: none;
    margin-top: 0px;
}

.learn-more h4 {
    color: #333;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    text-transform: none;
}

}

/* End XS */ 

/* ---------------------- Tablet styles (SM)  ---------------------- */

@media (min-width: 768px) {

  input#search-terms-input,
  input#search-terms-input:focus,
  input#search-terms-input:hover {
      border: none;
  }

  .hmpg-intro-text {
    font-size: 22px;
    line-height: 32px;
    color: #826e50; 
    padding:40px 0px;
    line-height: 38px
  }

  .hmpg-guide-principles {
    color: #826e50;
    line-height:30px;
  }

  .hmpg-guide-principles h2 {
    font-family: "ff-tisa-web-pro", serif;
    color: #826e50;
    font-size: 40px;
    font-weight: bold;
    text-align: center;
    text-transform: none;
  }

  .hmpg-guide-principles p {
    color: #826e50;
    font-size: 18px;
    line-height: 28px;
    text-align: center;
    padding:0px 20px;
  }


  .carousel {
      position: relative;
  }

  .carousel-caption {
    left: 0;
    padding-bottom: 20px;
    width: 66%;
    bottom: 0px;
  }

  .carousel-caption h3 {
    /* font-family: 'proxima-nova', helvetica, sans-serif; */
    text-transform: uppercase;
    font-size: 20px;
    color: #fff;
    text-shadow: none;
    font-weight: 700;
    margin-bottom: 0px;
    margin-top: 0px;
    letter-spacing: 2px;
  }
  .carousel-caption h4 {
/*    font-family: 'proxima-nova', helvetica, sans-serif; */    
    text-transform: uppercase;
    font-size: 50px;
    color: #fff;
    text-shadow: none;
    font-weight: 900;
    padding-top: 0px;
    line-height: 30px;
  }

  .hmpg-features {
    padding-top: 25px;
    padding-bottom: 25px;
  }

  .hmpg-features h4 {
    color: #483d27;
    text-align: center;
    font-size: 20px;
    font-weight: 500;
  }

  .hmpg-features p {
    text-align: center;
    color: #826e50;
  }

  .hmpg-features-section-one .involved-image-section-1 {
      padding-top: 50px;
  }

  .involved-image img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-height: 100px;
  }

  .involved-body {
    margin-bottom: 30px;
    padding: 20px;
    min-height: 300px;
  }

  .row.hmpg-features-section-one {
      margin-bottom: 70px;
  }

  #slideshow-1 .carousel-caption-wrapper p {
    top: 0px;
    font-size: 30px;
    line-height: initial;
    margin:auto;
    text-align: center;
  }

}

/* End SM */ 

/* ---------------------- Tablet styles (MD)  ---------------------- */
@media (min-width: 992px) {

  #slideshow-1 .carousel-caption-wrapper p {
    top: -50px;
    font-size: 40px;
    line-height: initial;
    text-align: left;
    margin:inherit;
  }

  .carousel-caption h3 {
    font-size: 28px;
    padding: 0px 20px;
  }

  .carousel-caption h4 {
        font-size: 72px;
        line-height:50px;
      }

  .involved-body {
    min-height: 330px;
}

  #slideshow-1 .carousel-caption-wrapper h2 {
  font-size: 40px;
}


}

/* End MD */

/* ---------------------- Tablet styles (LG)  ---------------------- */
@media (min-width: 1200px) {

  .hmpg-features-2 .involved-image {
    height: auto;
    overflow:visible;
}

    .involved-body {
    min-height: 320px;
}

.looking-sharp {
    margin-top: -50px;
}
  
}

/* End LG */