BathHacked/energy-sparks

header {
  background-size: contain;
  background-position: center;
}

header .container {
  padding-top: 50px;
  padding-bottom: 50px;
}

header img {
  display: block;
  margin: 0 auto 0px;
}

.masthead {
  background-image: image-url('background-image.jpg');
  padding: 0 10px 0 0;
  color: $white;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 650px;
}

.rounded-25 {
  border-radius: 25px;
}

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) {
  .home-page .carousel-item {
    h2 {
      font-size: $f5;
    }

    i {
      font-size: $f2;
    }

    .col-1 {
      line-height: 80px;
      margin-right: 20px;
    }
  }

  .masthead-content {
    background-color: $dark-blue;
  }

  p.display-3 {
    font-size: $f3;
  }

  blockquote {
    font-size: $f7;
  }

  .quote-by {
    font-size: $f7;
  }

}

.cta .btn {
  font-size: $f5;
  padding: 10px;
  font-family: $default-font-family;
  line-height: 20px;
}

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) {
  .home-page .carousel-item {
    h2 {
      font-size: $f5;
    }

    i {
      font-size: $f1;
    }

    .col-1 {
      line-height: 80px;
      margin-right: 20px;
    }
  }

  .masthead-content {
    background-color: $dark-blue;
  }

  p.display-3 {
    font-size: $f2;
  }

}


// Medium devices (tablets, 768px and up) // max-width: 991.98px
@media (min-width: 768px) and (max-width: 1199.98px) {
  .headline-text {
    font-size: $f2;
  }

  .headline-sub-text {
    font-size: $f5;
  }

  .masthead .btn {
    font-size: $f4;
    padding: 10px;
  }

  .cta .btn {
    font-size: $f4;
    padding: 10px;
  }

  .home-page .carousel-item {
    h2 {
      font-size: $f3;
    }

    i {
      font-size: $f0;
    }

    .col-1 {
      line-height: 100px;
    }
  }

  header .container {
    padding-top: 50px;
    padding-bottom: 50px;
  }
}

// Large devices (desktops, 992px and up)
// @media (min-width: 992px) and (max-width: 1199.98px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1140px) {
  .headline-text {
    font-size: $f1;
  }
  .headline-sub-text {
    font-size: $f3;
  }

  .masthead .btn {
    font-size: $f3;
    padding: 20px;
  }

  .cta .btn {
    font-size: $f3;
    padding: 20px;
  }

  .home-page .carousel-item {
    h2 {
      font-size: $f1;
    }

    i {
      font-size: $f-super-big;
    }

    .col-1 {
      line-height: 140px;
    }
  }
}

.carousel-indicators li {
  background: $dark-grey;
  border:2px solid $dark-grey;
  border-radius: 6px;
}

.home-block {
  margin-top: 53px;
  padding-bottom: 30px;
}

.funnels {
  background-image: linear-gradient($lighter-grey, $white);

  .card-footer {
    padding: 0.75rem 1.25rem;
    background-color: $white;
    border-top: 0;
  }

  .card {
    border: 2px solid $grey;
    border-radius: 0.7rem 0.7rem 0.3rem 0.3rem;
  }

  .card-image {
    overflow: hidden;
    height: 200px;
  }

  .card-body {
    padding-top: 0px;
    margin-top: 0px;
  }

  img {
    background-size: contain;
    mask-image: linear-gradient(to bottom, rgba($black,1), rgba($black,1), rgba($black,1), rgba($black,0), rgba($black,0));
  }
}

 .quotes:before, .quotes:after {
  display: inline-block;
  vertical-align: top;
  height: 30px;
  line-height: 28px;
  font-size: $f0;
}

.quotes:before {
  content: '\201C';
  margin-right: 4px;
  margin-left: -8px;
}

.quotes:after {
  content: '\201D';
  margin-left: 4px;
  margin-right: -8px;
}

.quote-by {
  display: block;
  padding-right: 10px;
  text-align: right;

  .very-small {
    margin: 0px;
  }
}

.fa-li.fa-check {
  color: $bg-positive;
  padding-bottom: 100px;
}

.info-page > .row {
  padding-left: 50px;
  padding-right: 50px;
  padding-bottom: 0px;
}

.info-page > .btn {
  background-image: none;
}

.btn.bg-positive {
  background-image: linear-gradient(to right, $bg-positive 0%, $bg-positive-light 100%);
}

section.highlight {
  background: $dark-orange;
  color: $white;
}

.mailchimp  {
  @media (min-width: 992px) and (max-width: 1599.98px) {
    .card-deck {
      img {
        height: 100px;
      }
    }
  }
  @media (max-width: 991.98px) {
    .card-deck {
      width: 332px;
      img {
        height: 200px;
        width: 300px;
      }
    }
  }
  @media (max-width: 767.98px) {
    .card-deck {
      width: 182px;
      img {
        height: 100px;
        width: 150px;
      }
    }
  }
  // Small devices (landscape phones, 576px and up)
  @media (min-width: 576px) and (max-width: 767.98px) {
    .card-deck {
      width: 257px;
      img {
        height: 150px;
        width: 225px;
      }
    }
  }

  // Extra small devices (portrait phones, less than 576px)
  @media (max-width: 575.98px) {
    .card-deck {
      width: 152px;
      img {
        height: 100px;
        width: 150px;
      }
    }
  }
}

.card-2px-border {
  border: 2px solid rgba($black, 0.125);
}