/*  Rappel : breakpoint variable
theme.$screen-xs: 480px ;
theme.$screen-sm: 768px ;
theme.$screen-md: 992px ;
theme.$screen-lg: 1200px ;
*/
/* mockup

see the icon variable name here : 03-settings / _font-icon.scss

.class-test {

 @include font-icon ($icon-arrow-down , red);

}

 */
/* ----- USEFUL MIXINS

  - 1 / Transition
  - 2 / Animation
  - 3 / Retina
  - 4 / Gradient
  - 5 / Placeholder

*/
/* mockup

div.logo {
  background: url("logo.png") no-repeat;
  @include image-2x("logo2x.png", 100px, 25px);
}

 */
/* mockup

$start-color, $end-color, $orientation - vertical/horizontal/radial

.class-test {
  @include background-gradient(red, black, 'vertical');
}

Output
.class-test {
  background: -webkit-linear-gradient(top, red, black);
  background: linear-gradient(to bottom, red, black);
}

 */
/* mockup

  textarea {
    @include input-placeholder {
        color: $grey;
    }
}

 */
/* mockup

  label {
    @include sr-only;
}

 */
.paragraph--type--title-with-background-image {
  position: relative;
}
.paragraph--type--title-with-background-image .field--name-field-header-background img {
  width: 100%;
}
.paragraph--type--title-with-background-image .main-title {
  text-transform: uppercase;
  text-align: left;
  margin-top: 28px;
  display: flex;
  margin-bottom: 0;
}
@media only screen and (min-width: 768px) {
  .paragraph--type--title-with-background-image .main-title {
    margin-top: 40px;
  }
  .paragraph--type--title-with-background-image .main-title:after {
    content: "";
    background: url("../../assets/images/butterflies.png") no-repeat;
    background-size: contain;
    width: 100px;
    position: relative;
    top: -15px;
    left: 15px;
    flex: 0 1 auto;
  }
}
.paragraph--type--title-with-background-image .baseline {
  color: #676464;
  font-family: "opensans-light";
  font-size: 24px;
  line-height: 34px;
  text-align: left;
  margin-top: 0;
}
@media only screen and (min-width: 992px) {
  .paragraph--type--title-with-background-image .mask {
    opacity: 0.15;
    background-color: #000000;
    z-index: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
  }
}

/*# sourceMappingURL=paragraph-title-with-background-image.css.map */