/*
 * SEO heading outline without changing the look.
 * The theme sizes headings by tag (style.css / responsive.css), so a tag that
 * changed level (e.g. <h5> -> <h2>) keeps its old size with .fs-hN, and text
 * that is not a heading (<h6> description -> <div>) keeps heading styles with .as-h.
 * Loaded BEFORE style.css so the theme's utility classes (margin-*, font-weight-*,
 * text-large ...) still win, just as they did over the tag rules.
 */
.as-h {margin:0 0 25px; padding:0; letter-spacing:0; font-weight:400; font-family:'Kanit', sans-serif;}

.fs-h1 {font-size:70px; line-height:70px;}
.fs-h2 {font-size:55px; line-height:60px;}
.fs-h3 {font-size:48px; line-height:54px;}
.fs-h4 {font-size:40px; line-height:46px;}
.fs-h5 {font-size:32px; line-height:40px;}
.fs-h6 {font-size:25px; line-height:30px;}

@media (max-width: 1199px) {
    .as-h {margin:0 0 22px;}
    .fs-h1 {font-size:65px; line-height:65px;}
    .fs-h2 {font-size:50px; line-height:55px;}
    .fs-h3 {font-size:42px; line-height:48px;}
    .fs-h4 {font-size:35px; line-height:41px;}
    .fs-h5 {font-size:27px; line-height:32px;}
    .fs-h6 {font-size:22px; line-height:27px;}
}

@media (max-width: 991px) {
    .as-h {margin:0 0 18px;}
    .fs-h1 {font-size:57px; line-height:58px;}
    .fs-h2 {font-size:43px; line-height:48px;}
    .fs-h3 {font-size:36px; line-height:41px;}
    .fs-h4 {font-size:30px; line-height:35px;}
    .fs-h5 {font-size:24px; line-height:30px;}
    .fs-h6 {font-size:22px; line-height:26px;}
}

@media (max-width: 767px) {
    .as-h {margin:0 0 17px;}
    .fs-h1 {font-size:37px; line-height:42px;}
    .fs-h2 {font-size:30px; line-height:36px;}
    .fs-h3 {font-size:28px; line-height:34px;}
    .fs-h4 {font-size:24px; line-height:30px;}
    .fs-h5 {font-size:20px; line-height:28px;}
    .fs-h6 {font-size:18px; line-height:23px;}
}