//----Font style----//

//--variables

// h1
$h1_fontSize     : 60;
$h1_fontFamily   : $font_primary;
$h1_fontStyle    : normal;
$h1_fontWeight   : 300;
$h1_color        : $black;
$h1_textTransform: none;
$h1_lineHeight   : 1;

// h2
$h2_fontSize   : 40;
$h2_fontFamily : $font_primary;
$h2_fontStyle  : normal;
$h2_fontWeight : 700;
$h2_color      : $black;
$h2_textTransform: none;
$h2_lineHeight   : 1.13;


// h3
$h3_fontSize   : 25;
$h3_fontFamily : $font_primary;
$h3_fontStyle  : normal;
$h3_fontWeight : 700;
$h3_color      : $black;
$h3_textTransform: none;
$h3_lineHeight   : 1;

// h4
$h4_fontSize   : 20;
$h4_fontFamily : $font_primary;
$h4_fontStyle  : normal;
$h4_fontWeight : 700;
$h4_color      : $black;
$h4_textTransform: none;
$h4_lineHeight   : 1.25;

// h5
$h5_fontSize   : 18;
$h5_fontFamily : $font_primary;
$h5_fontStyle  : normal;
$h5_fontWeight : 700;
$h5_color      : $black;
$h5_textTransform: none;
$h5_lineHeight   : 1.25;

// h6
$h6_fontSize   : 18;
$h6_fontFamily : $font_primary;
$h6_fontStyle  : italic;
$h6_fontWeight : 700;
$h6_color      : $black;
$h6_opacity    : .75;
$h6_lineHeight   : 1.25;



//----Font style----//

//--tags

%h1 {
  //font-size
  @include rem-size($h1_fontSize);

  font-family:   $h1_fontFamily;
  font-style:    $h1_fontStyle;
  font-weight:   $h1_fontWeight;
  color:         $h1_color;
  text-transform:$h1_textTransform;
  line-height:   $h1_lineHeight;
  @include media-max(lg) {
    line-height: 1;
    text-transform:none;
    @include rem-size(60);
  }
}
.h1, h1{
  @extend %h1;
}

%h2 {
  //font-size
  @include rem-size($h2_fontSize);

  font-family:   $h2_fontFamily;
  font-style:    $h2_fontStyle;
  font-weight:   $h2_fontWeight;
  color:         $h2_color;
  text-transform:$h2_textTransform;
  line-height:   $h2_lineHeight;
  @include media-max(md){
    @include rem-size(25);
  }
}
.h2, h2{
  @extend %h2;

  margin-bottom: 50px;
}


%h3 {
  //font-size
  @include rem-size($h3_fontSize);

  font-family:    $h3_fontFamily;
  font-style:     $h3_fontStyle;
  font-weight:    $h3_fontWeight;
  color:          $h3_color;
  text-transform: $h3_textTransform;
  line-height:    $h3_lineHeight;

}
.h3, h3{
  @extend %h3;

  margin-bottom: 27px;
}


%h4 {
  //font-size
  @include rem-size($h4_fontSize);

  font-family:    $h4_fontFamily;
  font-style:     $h4_fontStyle;
  font-weight:    $h4_fontWeight;
  color:          $h4_color;
  text-transform: $h4_textTransform;
  margin-bottom:  20px;
  display:        block;
  line-height:    $h4_lineHeight;
}
.h4, h4{
  @extend %h4;
}

%h5 {
  //font-size
  @include rem-size($h5_fontSize);

  font-family:   $h5_fontFamily;
  font-style:    $h5_fontStyle;
  font-weight:   $h5_fontWeight;
  color:         $h5_color;
  text-transform:$h5_textTransform;
  margin-bottom: 20px;
  // line-height:   $h5_lineHeight;

}
.h5, h5{
  @extend %h5;
}


%h6 {
  //font-size
  @include rem-size($h6_fontSize);

  font-family:   $h6_fontFamily;
  font-style:    $h6_fontStyle;
  font-weight:   $h6_fontWeight;
  color:         $h6_color;
  // line-height:   $h6_lineHeight;
  opacity:       $h6_opacity;
  margin-bottom: 20px;

}
.h6, h6{
  @extend %h6;
}


.title__before{
  position: relative;
  z-index: 0;

  &::before{
    content: "";
    display: block;

    position: absolute;
    top: 0; left: 100%;
    z-index: 1;

    width: 90px; height: 9px;

    transform: translate(calc(-100% + 40px), calc(-150% - 15px)) rotate(90deg);

    @include media-min(sm){
      top: 30px; left: 0%;
      transform: translate(calc(-150% + 30px), 0%);
    }
  }
  &--red::before{
    background: $red;
  }
}