/* RESPONSIVE CSS
-------------------------------------------------- */


/*////////////////////////////  Portait tablets 960px - 991px //////////////////////////// */

@media (min-width: 768px) and (max-width: 991px) {

  .slide2 .quote {
      width: 100%;
      position: relative;
      bottom: 10%;
      right: 0;
  }
}

/*/////////// Portrait smartphones (320px - 767px) ////////////////// */

@media (min-width: 320px) and (max-width: 767px) {

  footer {
      text-align: center;
  }
  footer .right {
      text-align: center !important;
  }

  .backtoTop {
      display: none;
  }

  .carousel-caption {
      bottom: 0 !important;
      left: 0 !important;
      right: 0 !important;
      width: 100% !important;
  }
  .carousel-caption h1 {
      font: 900 3.4em/1.2 "Heebo", sans-serif !important;
  }
  .carousel-caption h2 {
      font: 300 2.0em/1.4 "Heebo", sans-serif !important;
      width: 90%;
  }
  .carousel .slides .slide-1 {
      height: 400px;
  }

  .content {
      padding: 2% 0 0;
  }
  .content ul {
      padding-left: 4% !important;
  }
  .content .blurb {
      padding: 8%;
  }
  .content .cat {
      padding: 4%;
      height: auto;
      margin: 0 0 10px;
  }

  .navbar-brand {
      width: 100% !important;
      padding: 0;
  }
  .navbar-brand img {
      margin: auto;
  }
  .navbar-default .btn-warning {
      float: none;
      margin-top: 20px;
  }
  .navbar-fixed-top {
      position: inherit !important;
  }
  .navbar-header {
      text-align: center;
  }

  .slide2 .quote {
      width: 100%;
      position: relative;
      bottom: 10px;
      right: 0;
      left: 0;
  }

  .quote {
      width: 100%;
  }
}