/* ------------------------------------------------ */
/* ----------- mobile first media query ----------- */
/* ------------------------------------------------ */

#header img {width: 40%;}
#container {font-size: 100%;}
/* step = 1.09 (small mobile) */
h1 {font-size: 1.30em;}
h2 {font-size: 1.19em;}
h3 {font-size: 1.09em;}
h4 {font-size: 1.0em;}/* same as p */
h5 {font-size: 0.92em;}
h6 {font-size: 0.84em;}
p {font-size: 1.0em;}/* always 1 */
i {font-size: 1.09em;}

@media only screen and (min-width: 480px) {
#header img {width: 55%;}
#container {font-size: 103%;}
/* step = 1.10 (normal mobile) */
h1 {font-size: 1.33em;}
h2 {font-size: 1.21em;}
h3 {font-size: 1.10em;}
h4 {font-size: 1.0em;}/* same as p */
h5 {font-size: 0.91em;}
h6 {font-size: 0.83em;}
p {font-size: 1.0em;}/* always 1 */
i {font-size: 1.10em;}
}
@media only screen and (min-width: 768px) {
#header img {width: 70%;}
#container {font-size: 110%;}
/* step = 1.11 (normal tablet) */
h1 {font-size: 1.37em;}
h2 {font-size: 1.23em;}
h3 {font-size: 1.11em;}
h4 {font-size: 1.0em;}/* same as p */
h5 {font-size: 0.90em;}
h6 {font-size: 0.81em;}
p {font-size: 1.0em;}/* always 1 */
i {font-size: 1.11em;}
}
@media only screen and (min-width: 992px) {
#header img {width: 85%;}
#container {font-size: 130%;}
/* step = 1.12 (large tablet, small desktop) */
h1 {font-size: 1.40em;}
h2 {font-size: 1.25em;}
h3 {font-size: 1.12em;}
h4 {font-size: 1.0em;}/* same as p */
h5 {font-size: 0.89em;}
h6 {font-size: 0.80em;}
p {font-size: 1.0em;}/* always 1 */
i {font-size: 1.12em;}
}
@media only screen and (min-width: 1200px) {
#header img {width: 100%;}
#container {font-size: 150%;}
/* step = 1.13 (normal desktop) */
h1 {font-size: 1.44em;}
h2 {font-size: 1.28em;}
h3 {font-size: 1.13em;}
h4 {font-size: 1.0em;}/* same as p */
h5 {font-size: 0.88em;}
h6 {font-size: 0.78em;}
p {font-size: 1.0em;}/* always 1 */
i {font-size: 1.13em;}
}

/* ------------------------------------------------ */