h1, h2, h3, h4, h5, h6 { // font-family: 'Roboto', sans-serif; font-weight: 300; line-height: 1.3em; .sub.header { font-size: 30%; color: #999; line-height: 1.4em; } div { display: block; overflow: hidden; height: auto; } } .header.margin { margin-bottom: 20px; } .header.margin-big { margin-bottom: 40px; } .header.margin.small { margin-bottom: 10px; } h1.header { font-size: 64px; } h2.header { font-size: 52px; .sub.header { font-size: 20px; } } h3.header { font-size: 42px; .sub.header { font-size: 22px; } } h4.header { font-size: 32px; .sub.header { font-size: 16px; } } h5.header { font-size: 24px; .sub.header { font-size: 16px; } } h6.header { font-size: 18px; .sub.header { font-size: 12px; } } // @media only screen and (min-device-width: 320px) // and (max-device-width: 480px) { // h1.header { // font-size: 32px; // } // h2.header { // font-size: 26px; // .sub.header { font-size: 20px; } // } // h3.header { // font-size: 24px; // .sub.header { font-size: 16px; } // } // h4.header { // font-size: 16px; // .sub.header { font-size: 16px; } // } // h5.header { // font-size: 12px; // .sub.header { font-size: 16px; } // } // h6.header { // font-size: 18px; // .sub.header { font-size: 12px; } // } // }