/**
typography.css 
================================================== */

/* from 0px */ 
@media only screen and (min-width: 0rem) {
    body {
        font-size: 0.875rem;
    }
}

/* from 992px */ 
@media only screen and (min-width: 62rem) {
    body {
        font-size: 0.906rem;
    }
}

/* from 1200px */ 
@media only screen and (min-width: 75rem) {
    body {
        font-size: 0.938rem;
    }
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 400;
    line-height: 1.3;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    font-weight: inherit;
}

h1 {
    font-size: 4.2rem;
    line-height: 110%;
    margin: 2.8rem 0 1.68rem 0;
}

h2 {
    font-size: 3.56rem;
    line-height: 110%;
    margin: 2.3733333333rem 0 1.424rem 0;
}

h3 {
    font-size: 2.92rem;
    line-height: 110%;
    margin: 1.9466666667rem 0 1.168rem 0;
}

h4 {
    font-size: 2.28rem;
    line-height: 110%;
    margin: 1.52rem 0 0.912rem 0;
}

h5 {
    font-size: 1.64rem;
    line-height: 110%;
    margin: 1.0933333333rem 0 0.656rem 0;
}

h6 {
    font-size: 1.15rem;
    line-height: 110%;
    margin: 0.7666666667rem 0 0.46rem 0;
}

em {
    font-style: italic;
}

strong {
    font-weight: 500;
}

small {
    font-size: 75%;
}

.light {
    font-weight: 300;
}

.thin {
    font-weight: 200;
}

blockquote {
    margin: 1.25rem 0;
    padding-left: 1.5rem;
    border-left: 0.313rem solid #EE6E73;
}

i {
    line-height: inherit;
}

i.left {
    float: left;
    margin-right: 0.938rem;
}

i.right {
    float: right;
    margin-left: 0.938rem;
}

i.tiny {
    font-size: 1rem;
}

i.small {
    font-size: 2rem;
}

i.medium {
    font-size: 4rem;
}

i.large {
    font-size: 6rem;
}

/* from 360px */ 
@media only screen and (min-width: 22.5rem) {
    .flow-text {
        font-size: 1.2rem;
    }
}

/* from 390px */ 
@media only screen and (min-width: 24.375rem) {
    .flow-text {
        font-size: 1.224rem;
    }
}

/* from 420px */
@media only screen and (min-width: 26.25rem) {
    .flow-text {
        font-size: 1.248rem;
    }
}

/* from 450px */
@media only screen and (min-width: 28.125rem) {
    .flow-text {
        font-size: 1.272rem;
    }
}

/* from 480px */
@media only screen and (min-width: 30rem) {
    .flow-text {
        font-size: 1.296rem;
    }
}

/* from 510px */
@media only screen and (min-width: 31.875rem) {
    .flow-text {
        font-size: 1.32rem;
    }
}

/* from 540px */
@media only screen and (min-width: 33.75rem) {
    .flow-text {
        font-size: 1.344rem;
    }
}

/* from 570px */
@media only screen and (min-width: 35.625rem) {
    .flow-text {
        font-size: 1.368rem;
    }
}

/* from 600px */
@media only screen and (min-width: 37.5rem) {
    .flow-text {
        font-size: 1.392rem;
    }
}

/* from 630px */
@media only screen and (min-width: 39.375rem) {
    .flow-text {
        font-size: 1.416rem;
    }
}

/* from 660px */
@media only screen and (min-width: 41.25rem) {
    .flow-text {
        font-size: 1.44rem;
    }
}

/* from 690px */
@media only screen and (min-width: 43.125rem) {
    .flow-text {
        font-size: 1.464rem;
    }
}

/* from 720px */
@media only screen and (min-width: 45rem) {
    .flow-text {
        font-size: 1.488rem;
    }
}

/* from 750px */
@media only screen and (min-width: 46.875rem) {
    .flow-text {
        font-size: 1.512rem;
    }
}

/* from 780px */
@media only screen and (min-width: 48.75rem) {
    .flow-text {
        font-size: 1.536rem;
    }
}

/* from 810px */
@media only screen and (min-width: 50.625rem) {
    .flow-text {
        font-size: 1.56rem;
    }
}

/* from 840px */
@media only screen and (min-width: 52.5rem) {
    .flow-text {
        font-size: 1.584rem;
    }
}

/* from 870px */
@media only screen and (min-width: 54.375rem) {
    .flow-text {
        font-size: 1.608rem;
    }
}

/* from 900px */
@media only screen and (min-width: 56.25rem) {
    .flow-text {
        font-size: 1.632rem;
    }
}

/* from 930px */
@media only screen and (min-width: 58.125rem) {
    .flow-text {
        font-size: 1.656rem;
    }
}

/* from 960px */
@media only screen and (min-width: 60rem) {
    .flow-text {
        font-size: 1.68rem;
    }
}

/* from 360px */
@media only screen and (max-width: 22.5rem) {
    .flow-text {
        font-size: 1.2rem;
    }
}