// // Helper // —————————————-

.clearfix {

@include clearfix();

}

// hides every element even on screenreaders .hidden {

display: none !important;
visibility: hidden !important;

}

.show {

display: inherit !important;
visibility: inherit !important;

}

@mixin hidden-element ($size) {

.hidden-#{$size} { display: none !important; }

}

@mixin visible-element ($size) {

.visible-#{$size} { display: initial !important; }
.visible-#{$size}-block { display: block !important; }
.visible-#{$size}-inline { display: inline !important; }
.visible-#{$size}-inline-block { display: inline-block !important; }

}

@mixin visible-default-element ($size) {

.visible-#{$size} { display: none !important; }
.visible-#{$size}-block { display: none !important; }
.visible-#{$size}-inline { display: none !important; }
.visible-#{$size}-inline-block { display: none !important; }

}

// default @include visible-default-element('xs'); @include visible-default-element('s'); @include visible-default-element('m'); @include visible-default-element('l'); @include visible-default-element('xl');

@media (max-width: #{$grid-extra-small-max}px) {

@include visible-element('xs');
@include hidden-element('xs');

}

@media (max-width: #{$grid-small-max}px) and (min-width: #{$grid-small-min}px) {

@include visible-element('s');
@include hidden-element('s');

}

@media (max-width: #{$grid-medium-max}px) and (min-width: #{$grid-medium-min}px) {

@include visible-element('m');
@include hidden-element('m');

}

@media (max-width: #{$grid-large-max}px) and (min-width: #{$grid-large-min}px) {

@include visible-element('l');
@include hidden-element('l');

}

@media (min-width: #{$grid-extra-large-min}px) {

@include visible-element('xl');
@include hidden-element('xl');

}

.pull-left {

float: left;

}

.pull-right {

float: right;

}

// spacer helper for layouts @for $i from 1 through 18 {

.offset-top-#{$i} { margin-top: building-units($i); }
.offset-right-#{$i} { margin-right: building-units($i); }
.offset-bottom-#{$i} { margin-bottom: building-units($i); }
.offset-left-#{$i} { margin-left: building-units($i); }

}

@mixin offset($size) {

@for $i from 1 through 18 {
  .offset-#{$size}-top-#{$i} { margin-top: building-units($i); }
  .offset-#{$size}-right-#{$i} { margin-right: building-units($i); }
  .offset-#{$size}-bottom-#{$i} { margin-bottom: building-units($i); }
  .offset-#{$size}-left-#{$i} { margin-left: building-units($i); }
}

}

// default @include offset('l');

// down-sizing @media screen and (max-width: #{$grid-medium-max}px) {

@include offset('m');

}

@media screen and (max-width: #{$grid-small-max}px) {

@include offset('s');

}

// up-sizing @media screen and (min-width: #{$grid-extra-large-min}px) {

@include offset('xl');

}

// vertical centering helper .h-ctr {

display: table;
margin-left: auto;
margin-right: auto;

}

.v-ctr {

display: table;
height: 100%;

> div {
  display: table-cell;
  vertical-align: middle;
}

}

%separator {

position: relative;

> * {
  display: block;
  position: absolute;
  bottom: 0;
  width: 100%;
}

}

// Content Separator @mixin separator() {

@for $i from 1 through 18 {
  .cont-sep-#{$i} {
    @extend %separator;
    height: building-units($i);
  }
}

}

@include separator();