// ============================================================================
// HELPERS & PLACEHOLDERS

%bg-cover{
  @include background-size(cover);
  background: {
    position: 50% 50%;
    repeat: no-repeat;
  };
}
%bg-contain{
  @include background-size(contain);
  background: {
    position: 50% 50%;
    repeat: no-repeat;
  };
}
%no-underline{
  &,
  &:hover,
  &:active,
  &:focus, 
  &:visited{
    text-decoration: none;
  }
}
%hover-underline{
  &:hover{
    text-decoration: underline;
  }
}
%no-outline{
  &,
  &:hover,
  &:active,
  &:focus, 
  &:visited{
    outline: none;
  }
}

.h-bg-cover{
  @extend %bg-cover;
}
.h-bg-contain{
  @extend %bg-contain;
}

.h-rectangle,
.h-rtg {
    position: relative;
    display: block;

    &:after {
        content: "";
        display: block;
        padding-bottom: 100%;
    }

    &__inner,
    &__inr {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    &--r11, .ratio-r11 {
        &:after {
            padding-bottom: 100%;
        }
    }

    &--r31, .ratio-r31 {
        &:after {
            padding-bottom: 33.3333%;
        }
    }

    &--r13, .ratio-r13 {
        &:after {
            padding-bottom: 300%;
        }
    }

    &--r32, .ratio-r32 {
        &:after {
            padding-bottom: 66.6666%;
        }
    }

    &--r23, .ratio-r23 {
        &:after {
            padding-bottom: 150%;
        }
    }

    &--r43, .ratio-r43 {
        &:after {
            padding-bottom: 75%;
        }
    }

    &--r34, .ratio-r34 {
        &:after {
            padding-bottom: 1.3333%;
        }
    }

    &--r21, .ratio-r21 {
        &:after {
            padding-bottom: 50%;
        }
    }

    &--r12, .ratio-r12 {
        &:after {
            padding-bottom: 200%;
        }
    }

    &--r169, .ratio-169 {
        &:after {
            padding-bottom: 56.25%;
        }
    }

    &--r916, .ratio-916 {
        &:after {
            padding-bottom: 178%;
        }
    }
}

.h-bg-cvr {
    @extend %bg-cover;
}

%mdi-icon {
    display: inline-block;
    font: normal normal normal 24px/1 "Material Design Icons";
    font-size: inherit;
    text-rendering: auto;
    line-height: inherit;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.h-c-red{
    color: $red;
}