_helpers.scss

.h1 { font-size: 2rem }
.h2 { font-size: 1.5rem }
.h3 { font-size: 1.25rem }
.h4 { font-size: 1rem }
.h5 { font-size: .875rem }
.h6 { font-size: .75rem }

.sans-serif             { font-family: "museo-sans", sans-serif; }
.font-desyrel           { font-family: 'Desyrel';}
.font-family-inherit    { font-family: inherit }
.font-size-inherit      { font-size: inherit }
.text-decoration-none   { text-decoration: none }

.bold           { font-weight: 700 }
.regular        { font-weight: 400 }
.italic         { font-style: italic }
.caps           { text-transform: uppercase; }
.left-align     { text-align: left }
.center         { text-align: center }
.right-align    { text-align: right }
.justify        { text-align: justify }
.nowrap         { white-space: nowrap }
.break-word     { word-wrap: break-word }

.line-height-1  { line-height: 1 }
.line-height-2  { line-height: 1.125 }
.line-height-3  { line-height: 1.25 }
.line-height-4  { line-height: 1.5 }

.no-margin      { margin: 0!important }
.no-padding     { padding: 0!important }

.mg-10          { margin: 10px }
.mg-20          { margin: 20px }
.mg-30          { margin: 30px }
.mg-40          { margin: 40px }
.mg-50          { margin: 50px }
.mg-60          { margin: 60px }
.mg-70          { margin: 60px }
.mg-80          { margin: 80px }
.mg-90          { margin: 90px }
.mg-100         { margin: 100px }

.mg-x-10        { margin: 0 10px}
.mg-x-20        { margin: 0 20px}
.mg-x-30        { margin: 0 30px}
.mg-x-40        { margin: 0 40px}
.mg-x-50        { margin: 0 50px}
.mg-x-60        { margin: 0 60px}
.mg-x-70        { margin: 0 70px}
.mg-x-80        { margin: 0 80px}
.mg-x-90        { margin: 0 90px}
.mg-x-100       { margin: 0 100px}

.mg-y-10        { margin: 10px 0}
.mg-y-20        { margin: 20px 0}
.mg-y-30        { margin: 30px 0}
.mg-y-40        { margin: 40px 0}
.mg-y-50        { margin: 50px 0}
.mg-y-60        { margin: 60px 0}
.mg-y-70        { margin: 70px 0}
.mg-y-80        { margin: 80px 0}
.mg-y-90        { margin: 90px 0}
.mg-y-100       { margin: 100px 0}

.mg-top-0       { margin-top: 0 }
.mg-top-10      { margin-top: 10px }
.mg-top-20      { margin-top: 20px }
.mg-top-30      { margin-top: 30px }
.mg-top-40      { margin-top: 40px }
.mg-top-50      { margin-top: 50px }
.mg-top-60      { margin-top: 60px }
.mg-top-70      { margin-top: 60px }
.mg-top-80      { margin-top: 80px }
.mg-top-90      { margin-top: 90px }
.mg-top-100     { margin-top: 100px }

.mg-bottom-0    { margin-bottom: 0 }
.mg-bottom-10   { margin-bottom: 10px }
.mg-bottom-20   { margin-bottom: 20px }
.mg-bottom-30   { margin-bottom: 30px }
.mg-bottom-40   { margin-bottom: 40px }
.mg-bottom-50   { margin-bottom: 50px }
.mg-bottom-60   { margin-bottom: 60px }
.mg-bottom-70   { margin-bottom: 70px }
.mg-bottom-80   { margin-bottom: 80px }
.mg-bottom-90   { margin-bottom: 90px }
.mg-bottom-100  { margin-bottom: 100px }

.mg-left-0      { margin-left: 0 }
.mg-left-10     { margin-left: 10px }
.mg-left-20     { margin-left: 20px }
.mg-left-30     { margin-left: 30px }
.mg-left-40     { margin-left: 40px }
.mg-left-50     { margin-left: 50px }
.mg-left-60     { margin-left: 60px }
.mg-left-70     { margin-left: 70px }
.mg-left-80     { margin-left: 80px }
.mg-left-90     { margin-left: 90px }
.mg-left-100    { margin-left: 100px }

.mg-right-0     { margin-right: 0 }
.mg-right-10    { margin-right: 10px }
.mg-right-20    { margin-right: 20px }
.mg-right-30    { margin-right: 30px }
.mg-right-40    { margin-right: 40px }
.mg-right-50    { margin-right: 50px }
.mg-right-60    { margin-right: 60px }
.mg-right-70    { margin-right: 70px }
.mg-right-80    { margin-right: 80px }
.mg-right-90    { margin-right: 90px }
.mg-right-100   { margin-right: 100px }

.pd-10          { padding: 10px }
.pd-20          { padding: 20px }
.pd-30          { padding: 30px }
.pd-40          { padding: 40px }
.pd-50          { padding: 50px }
.pd-60          { padding: 60px }
.pd-70          { padding: 60px }
.pd-80          { padding: 80px }
.pd-90          { padding: 90px }
.pd-100         { padding: 100px }

.pd-x-10        { padding: 0 10px}
.pd-x-20        { padding: 0 20px}
.pd-x-30        { padding: 0 30px}
.pd-x-40        { padding: 0 40px}
.pd-x-50        { padding: 0 50px}
.pd-x-60        { padding: 0 60px}
.pd-x-70        { padding: 0 70px}
.pd-x-80        { padding: 0 80px}
.pd-x-90        { padding: 0 90px}
.pd-x-100       { padding: 0 100px}

.pd-y-10        { padding: 10px 0}
.pd-y-20        { padding: 20px 0}
.pd-y-30        { padding: 30px 0}
.pd-y-40        { padding: 40px 0}
.pd-y-50        { padding: 50px 0}
.pd-y-60        { padding: 60px 0}
.pd-y-70        { padding: 70px 0}
.pd-y-80        { padding: 80px 0}
.pd-y-90        { padding: 90px 0}
.pd-y-100       { padding: 100px 0}

.pd-top-0       { padding-top: 0px }
.pd-top-10      { padding-top: 10px }
.pd-top-20      { padding-top: 20px }
.pd-top-30      { padding-top: 30px }
.pd-top-40      { padding-top: 40px }
.pd-top-50      { padding-top: 50px }
.pd-top-60      { padding-top: 60px }
.pd-top-70      { padding-top: 70px }
.pd-top-80      { padding-top: 80px }
.pd-top-90      { padding-top: 90px }
.pd-top-100     { padding-top: 100px }

.pd-right-0     { padding-right: 0px }
.pd-right-10    { padding-right: 10px }
.pd-right-20    { padding-right: 20px }
.pd-right-30    { padding-right: 30px }
.pd-right-40    { padding-right: 40px }
.pd-right-50    { padding-right: 50px }
.pd-right-60    { padding-right: 60px }
.pd-right-70    { padding-right: 70px }
.pd-right-80    { padding-right: 80px }
.pd-right-90    { padding-right: 90px }
.pd-right-100   { padding-right: 100px }

.pd-bottom-0    { padding-bottom: 0px }
.pd-bottom-10   { padding-bottom: 10px }
.pd-bottom-20   { padding-bottom: 20px }
.pd-bottom-30   { padding-bottom: 30px }
.pd-bottom-40   { padding-bottom: 40px }
.pd-bottom-50   { padding-bottom: 50px }
.pd-bottom-60   { padding-bottom: 60px }
.pd-bottom-70   { padding-bottom: 70px }
.pd-bottom-80   { padding-bottom: 80px }
.pd-bottom-90   { padding-bottom: 90px }
.pd-bottom-100  { padding-bottom: 100px }

.pd-left-0      { padding-left: 0px }
.pd-left-10     { padding-left: 10px }
.pd-left-20     { padding-left: 20px }
.pd-left-30     { padding-left: 30px }
.pd-left-40     { padding-left: 40px }
.pd-left-50     { padding-left: 50px }
.pd-left-60     { padding-left: 60px }
.pd-left-70     { padding-left: 70px }
.pd-left-80     { padding-left: 80px }
.pd-left-90     { padding-left: 90px }
.pd-left-100    { padding-left: 100px }

.list-style-none { list-style: none }
.underline { text-decoration: underline }
.truncate {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}
.list-reset {
    list-style: none;
    padding-left: 0
}

.inline          { display: inline }
.block           { display: block }
.inline-block    { display: inline-block }
.table           { display: table }
.table-cell      { display: table-cell }
.overflow-hidden { overflow: hidden }
.overflow-scroll { overflow: scroll }
.overflow-auto   { overflow: auto }

.no-float       { float: none }
.left           { float: left }
.right          { float: right }
.fit            { max-width: 100% }

.border-box { box-sizing: border-box }
.align-baseline { vertical-align: baseline }
.align-top { vertical-align: top }
.align-middle { vertical-align: middle }
.align-bottom { vertical-align: bottom }

.relative { position: relative }
.absolute { position: absolute }
.fixed { position: fixed }

.top-0 { top: 0 }
.right-0 { right: 0 }
.bottom-0 { bottom: 0 }
.left-0 { left: 0 }

.z1     { z-index: 1 }
.z2     { z-index: 2 }
.z3     { z-index: 3 }
.z4     { z-index: 4 }

.border {
    border-style: solid;
    border-width: 1px
}
.border-top {
    border-top-style: solid;
    border-top-width: 1px
}
.border-right {
    border-right-style: solid;
    border-right-width: 1px
}
.border-bottom {
    border-bottom-style: solid;
    border-bottom-width: 1px
}
.border-left {
    border-left-style: solid;
    border-left-width: 1px
}

.border-none        { border: 0 }
.rounded            { border-radius: 3px }
.circle             { border-radius: 50% }
.rounded-top        { border-radius: 3px 3px 0 0 }
.rounded-right      { border-radius: 0 3px 3px 0 }
.rounded-bottom     { border-radius: 0 0 3px 3px }
.rounded-left       { border-radius: 3px 0 0 3px }
.not-rounded        { border-radius: 0 }

.flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

@media (min-width: 40em) {
    .sm-flex {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex
    }
}

@media (min-width: 52em) {
    .md-flex {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex
    }
}

@media (min-width: 64em) {
    .lg-flex {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex
    }
}

.flex-column {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}

.flex-wrap {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.items-start {
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    -ms-grid-row-align: flex-start;
    align-items: flex-start
}

.items-end {
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    -ms-grid-row-align: flex-end;
    align-items: flex-end
}
.items-center {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    -ms-grid-row-align: center;
    align-items: center
}
.items-baseline {
    -webkit-box-align: baseline;
    -webkit-align-items: baseline;
    -ms-flex-align: baseline;
    -ms-grid-row-align: baseline;
    align-items: baseline
}
.items-stretch {
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    -ms-grid-row-align: stretch;
    align-items: stretch
}
.self-start {
    -webkit-align-self: flex-start;
    -ms-flex-item-align: start;
    align-self: flex-start
}
.self-end {
    -webkit-align-self: flex-end;
    -ms-flex-item-align: end;
    align-self: flex-end
}
.self-center {
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center
}
.self-baseline {
    -webkit-align-self: baseline;
    -ms-flex-item-align: baseline;
    align-self: baseline
}
.self-stretch {
    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch
}
.justify-start {
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start
}
.justify-end {
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end
}
.justify-center {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}
.justify-between {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between
}
.justify-around {
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around
}
.content-start {
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start
}
.content-end {
    -webkit-align-content: flex-end;
    -ms-flex-line-pack: end;
    align-content: flex-end
}
.content-center {
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center
}
.content-between {
    -webkit-align-content: space-between;
    -ms-flex-line-pack: justify;
    align-content: space-between
}
.content-around {
    -webkit-align-content: space-around;
    -ms-flex-line-pack: distribute;
    align-content: space-around
}
.content-stretch {
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch
}
.flex-auto {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0
}
.flex-none {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none
}
.order-0 {
    -webkit-box-ordinal-group: 1;
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0
}
.order-1 {
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1
}
.order-2 {
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
    -ms-flex-order: 2;
    order: 2
}
.order-3 {
    -webkit-box-ordinal-group: 4;
    -webkit-order: 3;
    -ms-flex-order: 3;
    order: 3
}
.order-last {
    -webkit-box-ordinal-group: 100000;
    -webkit-order: 99999;
    -ms-flex-order: 99999;
    order: 99999
}