.banners {
  width:100%;
  padding: 58px 0 58px 0;

  &.small-padding {
    padding:10px 0px 10px 0px;
  }

  &.lightgray {
    background-color:@bg-main-color;
  }

  &.purple {
    background-color:@elem-cozy-color;
  }

  &.darkblue {
    background-color:@bg-inverse-color;
    p {
      color: @bg-main-color;
      font-size: 1.1em;
      font-weight: 300;
    }
  }

  &.happy-customer {
    background: #000 image-url('banners/happy-customer.jpg') 0px 0px no-repeat;
    background-size:cover;
    background-repeat:no-repeat;
    h2 {
      text-shadow: 0px 0px 20px rgba(0,0,0,0.7);
    }
  }

  &.generic {
    background: transparent image-url('banners/happy-customer.jpg') 0px 0px no-repeat;
    background-size:cover;
    background-repeat:no-repeat;
    &.center {
      background-position-x:center;
      background-position-y:top;
    }
  }

  &.laptop {
    background: #000 image-url('banners/desktop-background.jpg') 0px 0px no-repeat;
    background-size:cover;
    background-repeat:no-repeat;
    h2 {
      text-shadow: 0px 0px 20px rgba(0,0,0,0.7);
    }
  }

  &.maestrano-mobile {
    background: #000 image-url('banners/maestrano-mobile.jpg') 0px 0px no-repeat;
    background-size:cover;
    background-repeat:no-repeat;
    h2 {
      text-shadow: 0px 0px 20px rgba(0,0,0,0.7);
    }
  }

  &.happy-collins {
    background: #000 image-url('banners/happy-collins.jpg') 0px 0px no-repeat;
    background-size:cover;
    background-repeat:no-repeat;
    h2 {
      text-shadow: 0px 0px 20px rgba(0,0,0,0.7);
    }
  }

  &.star {
    background: #000 image-url('banners/star-screenshot.jpg') 0px 0px no-repeat;
    background-size:cover;
    background-repeat:no-repeat;
    min-height:540px;
    h2 {
      text-shadow: 0px 0px 20px rgba(0,0,0,0.7);
    }
  }

  h2 {
    font-weight:700;
    font-size:40px;
    color:@bg-inverse-color;
  }

  h4 {
    font-weight:900;
    font-size:14px;
    color:@bg-inverse-color;
  }

  p {
    color:@text-inverse-color;
    font-weight:300;
    font-size:14px;
  }

  &.promo {
    h2 {
      font-weight:700;
      font-size:40px;
      text-align:center;
      color:@bg-inverse-color;
    }
    h3 {
      font-weight:300;
      font-size:18px;
      text-align:center;
      color:@bg-inverse-color;
    }
    h4 {
      font-size:24px;
      font-weight:300;
    }
    h5 {
      text-align:center;
      font-size:14px;
      font-weight:300;
    }

    &.dark {
      h2,h3,h4 {
        color: @text-inverse-color;
      }
      
      h5 {
        color: @decorator-inverse-color;
      }
    }

  }

  .alert {
    h2 {
      font-size:20px;
    }
  }


  .banner-bottom-sticky {
    margin-bottom: -58px;
  }
}