/* @import url('https://fonts.googleapis.com/css2?family=Prompt:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); */

/* IBM Plex Sans Thai - Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@200;300;400;500;600;700&display=swap');

/* FC Iconic Font */
@font-face {
    font-family: 'FC Iconic Bold';
    src: url('../fonts/fc-iconic/fc_iconic_bold.woff2') format('woff2'),
         url('../fonts/fc-iconic/fc_iconic_bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'FC Iconic SemiBold';
    src: url('../fonts/fc-iconic/fc_iconic_semibold.woff2') format('woff2'),
         url('../fonts/fc-iconic/fc_iconic_semibold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'FC Iconic Medium';
    src: url('../fonts/fc-iconic/fc_iconic_medium.woff2') format('woff2'),
         url('../fonts/fc-iconic/fc_iconic_medium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'FC Iconic Regular';
    src: url('../fonts/fc-iconic/fc_iconic_regular.woff2') format('woff2'),
         url('../fonts/fc-iconic/fc_iconic_regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'FC Iconic Light';
    src: url('../fonts/fc-iconic/fc_iconic_light.woff2') format('woff2'),
         url('../fonts/fc-iconic/fc_iconic_light.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'FC Iconic ExtraLight';
    src: url('../fonts/fc-iconic/fc_iconic_extralight.woff2') format('woff2'),
         url('../fonts/fc-iconic/fc_iconic_extralight.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


/* FC Flexica Font */
@font-face {
    font-family: 'FC Flexica Bold';
    src: url('../fonts/fc-flexica/fcflexica-bold.woff2') format('woff2'),
         url('../fonts/fc-flexica/fcflexica-bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'FC Flexica SemiBold';
    src: url('../fonts/fc-flexica/fcflexica-semibold.woff2') format('woff2'),
         url('../fonts/fc-flexica/fcflexica-semibold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'FC Flexica Medium';
    src: url('../fonts/fc-flexica/fcflexica-medium.woff2') format('woff2'),
         url('../fonts/fc-flexica/fcflexica-medium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'FC Flexica Regular';
    src: url('../fonts/fc-flexica/fcflexica-regular.woff2') format('woff2'),
         url('../fonts/fc-flexica/fcflexica-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'FC Flexica Light';
    src: url('../fonts/fc-flexica/fcflexica-light.woff2') format('woff2'),
         url('../fonts/fc-flexica/fcflexica-light.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'FC Flexica ExtraLight';
    src: url('../fonts/fc-flexica/fcflexica-extralight.woff2') format('woff2'),
         url('../fonts/fc-flexica/fcflexica-extralight.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


/* TH Democrat Font */
@font-face {
    font-family: 'TH Democrat Regular';
    src: url('../fonts/th-democrat/th_democrat.woff2') format('woff2'),
         url('../fonts/th-democrat/th_democrat.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

html,
body {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}

body,
body,
button {
    font-family: 'IBM Plex Sans Thai';
}

/* font family */
.fc-iconic {
    font-family: 'FC Iconic Light';
}
.fc-flexica {
    font-family: 'FC Flexica Light';
}
.th-democrat {
    font-family: 'TH Democrat Regular';
}

/* font style */
h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
}

/* typography */
h1, h2, h3, h4, h5, h6 { font-weight: 500; }
h1, h2, h3 { margin-top: 0.65em; margin-bottom: 0.6em; }
h4, h5, h6 { margin-top: 0.5em; margin-bottom: 0.33em; }
h1 { font-size: 3.0625rem; }
h2, .h2 { font-size: 2.125rem; line-height: 128%; }
h3, .h3 { font-size: 1.5rem; line-height: 125%; }
h4 { font-size: 1.375rem;	}
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }
h1>small, h2>small, h3>small, h4>small { display: block; line-height: 0.86; }

/* font-style */
.extra-light { font-weight: 200; }
.light { font-weight: 300; }
.regular { font-weight: 400; }
.medium { font-weight: 500; }
.semi-bold { font-weight: 600; }
.bold { font-weight: 700; }

/*.extra-light { */
/*    font-family: 'FC Iconic ExtraLight'; */
/*}*/
/*.light { */
/*    font-family: 'FC Iconic Light'; */
/*}*/
/*.regular { */
/*    font-family: 'FC Iconic Regular'; */
/*}*/
/*.medium { */
/*    font-family: 'FC Iconic Medium'; */
/*}*/
/*.semi-bold { */
/*    font-family: 'FC Iconic SemiBold'; */
/*}*/
/*.bold { */
/*    font-family: 'FC Iconic Bold'; */
/*}*/

.fc-flexica.extra-light,
.fc-flexica .extra-light { 
    font-family: 'FC Flexica ExtraLight'; 
}
.fc-flexica.light,
.fc-flexica .light { 
    font-family: 'FC Flexica Light'; 
}
.fc-flexica.regular,
.fc-flexica .regular { 
    font-family: 'FC Flexica Regular'; 
}
.fc-flexica.medium,
.fc-flexica .medium { 
    font-family: 'FC Flexica Medium'; 
}
.fc-flexica.semi-bold,
.fc-flexica .semi-bold { 
    font-family: 'FC Flexica SemiBold'; 
}
.fc-flexica.bold,
.fc-flexica .bold { 
    font-family: 'FC Flexica Bold'; 
}

/* font extend */
.smaller { font-size: 0.675em; }
.small { font-size: 0.875em; }
.normal { font-size: 1.25em; }
.large { font-size: 1.6em; }
.larger { font-size: 2em; }

.uppercase {
    text-transform: uppercase;
}
.text-transform-none {
    text-transform: none;
}
.italic {
    font-style: italic;
}

/* button style */
.btn, 
.btn-large, 
.btn-small, 
.btn-flat {
    text-transform: none;
}

/* form them style */
.form-them input,
.form-them input + span,
.form-them select,
.form-them textarea.materialize-textarea {
    font-family: 'IBM Plex Sans Thai';
    font-weight: 300;
}
.form-them .input-field > label {
    font-family: 'IBM Plex Sans Thai';
    font-weight: 500;
}