﻿* {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: "Sarabun", sans-serif;
    font-weight: 300;
    font-size: 1em;
}


.sarabun-thin {font-family: "Sarabun", sans-serif;font-weight: 100;font-style: normal;}
.sarabun-extralight {font-family: "Sarabun", sans-serif;font-weight: 200;font-style: normal;}
.sarabun-light {font-family: "Sarabun", sans-serif;font-weight: 300;font-style: normal;}
.sarabun-regular {font-family: "Sarabun", sans-serif;font-weight: 400;font-style: normal;}
.sarabun-medium {font-family: "Sarabun", sans-serif;font-weight: 500;font-style: normal;}
.sarabun-semibold {font-family: "Sarabun", sans-serif;font-weight: 600;font-style: normal;}
.sarabun-bold {font-family: "Sarabun", sans-serif;font-weight: 700;font-style: normal;}
.sarabun-extrabold {font-family: "Sarabun", sans-serif;font-weight: 800;font-style: normal;}
.sarabun-thin-italic {font-family: "Sarabun", sans-serif;font-weight: 100;font-style: italic;}
.sarabun-extralight-italic {font-family: "Sarabun", sans-serif;font-weight: 200;font-style: italic;}
.sarabun-light-italic {font-family: "Sarabun", sans-serif;font-weight: 300;font-style: italic;}
.sarabun-regular-italic {font-family: "Sarabun", sans-serif;font-weight: 400;font-style: italic;}
.sarabun-medium-italic {font-family: "Sarabun", sans-serif;font-weight: 500;font-style: italic;}
.sarabun-semibold-italic {font-family: "Sarabun", sans-serif;font-weight: 600;font-style: italic;}
.sarabun-bold-italic {font-family: "Sarabun", sans-serif;font-weight: 700;font-style: italic;}
.sarabun-extrabold-italic {font-family: "Sarabun", sans-serif;font-weight: 800;font-style: italic;}

.great-vibes-regular {font-family: "Great Vibes", cursive;font-weight: 400;font-style: normal; font-size:4em; }


/* Basic Common Column structure */
.width100 {width: 100%}
.margin_auto {margin: 0px auto}
h1, h2, h3, h4, h5, h6 {font-weight: normal;}

.pageH1{font-size:2.5em;line-height:1.5;}
.pageH2{font-size:2.1em; line-height:1.5;}
.pageH3{font-size:1.7em; line-height:1.5;}
.pageH4{font-size:1.4em; line-height:1.5;}

/* ========= Font Specific ========= */
.tiny {font-size: 0.8em}
.small {font-size: 0.9em}
.regular {font-size: 1em}
.semi-medium {font-size: 1.1em}
.medium {font-size: 1.5em}
.large {font-size: 2em}
.extra-large {font-size: 2.9em;line-height: 1.5}
.line-ht {line-height: 1.5}
.line-ht-1{line-height:0.9}

/*float classes*/
.float_left {float: left;display: inline}
.float_right {float: right;display: inline}
.float_clear {float:none; clear: both;}

/*text alignment*/
.txtCenter {text-align: center;}
.txtRight {text-align: right;}

/* padding */
.pad_5 {padding: 5px}
.pad_10 {padding: 10px}
.pad_14 {padding: 0.8em}
.pad_15 {padding: 15px}
.pad_20 {padding: 20px}
.pad_25 {padding: 1.5em}
.pad_30 {padding: 1.8em;}
.pad_40 {padding: 2.5em}
.pad_50 {padding: 3.1em}

.home_pad_offset {padding: 1.8em;}

.pad_LR_30 {padding: 0 1.8em;}
.pad_L_15 {padding-left: 0.9em}
.pad_R_15 {padding-right: 0.9em}
.pad_LR_15 {padding: 0em 0.9em;}
.pad_LR_20 {padding-left: 1.2em;padding-right: 1.2em}

.pad_LR_25 {padding: 0em 1.5em;}
.pad_LR_30 {padding: 0em 1.8em;}
.pad_L_30 {padding-left: 1.8em}
.pad_R_30 {padding-right: 1.8em}
.pad_TB_30 {padding-bottom: 1.8em;padding-top: 1.8em}
.pad_TB_10 {padding-bottom: 0.6em;padding-top: 0.6em}
.pad_TB_15 {padding-bottom: 0.9em;padding-top: 0.9em}
.pad_TB_20 {padding-bottom: 1.2em;padding-top: 1.2em}
.pad_TB_10 {padding-bottom: 0.6em;padding-top: 0.6em}

/* margin */
.mrg_B_5 {margin-bottom: 0.3em;}
.mrg_B_10 {margin-bottom: 0.6em;}
.mrg_B_15 {margin-bottom: 0.9em;}
.mrg_B_20 {margin-bottom: 1.2em;}
.mrg_B_25 {margin-bottom: 1.5em;}
.mrg_B_30 {margin-bottom: 1.8em;}
.mrg_r_20{margin-right:20px}

/*spacer*/
.space5 {height: 0.3em;display: block;}
.space10 {height: 0.6em;display: block;}
.space20 {height: 1.2em;display: block;}
.space25 {height: 1.5em;display: block;}
.space30{height:1.8em; display:block;}
.space35{height:2.1em; display:block;}
.space40{height:2.5em; display:block;}
.space50{height:3.1em; display:block;}

/* coloumn structure*/
.col_1200{width:1200px;margin:0px auto}
.col_1_2{width:600px; float:left;}
.col_1_3{width:400px; float:left;}
.col_1_4{width:300px; float:left;}
.col_1_5{width:240px; float:left;}
.col_1_6{width:200px; float:left;}
.col_2_3{width:800px; float:left;}
.col_980{width:980px; }
.col_800{width:800px; float:left}
.col_400{width:400px; float:left}
.col_340{width:340px; float:left}
.col_900{width:900px; float:left}
.col_300{width:300px; float:left}
.col_570{width:570px; float:left}
.col_760{width:760px; float:left}
.col_380{width:380px; float:left}
.col_900_full{width:900px}
/*position*/
.posRelative{position:relative !important }
.dis_block{ display:block }
.dis-flex{display:flex; }
.dis-fl-col{flex-flow:column}
.dis-fl-justify{ justify-content: center;}

.ht100V{height:100vh}

/*border-radius*/
.border_r_3{border-radius:3px;}
.border_r_4{border-radius:4px;}
.border_r_5{border-radius:5px;}
.border_r_50{border-radius:50%;}
.noBorder{border:none !important }

/*liner*/
.liner{height:1px; background-color:#8b5e3b; display:block; width:100%;}

/*text transform*/
.upperCase{text-transform:uppercase}
.capitalize{text-transform:capitalize;}
.txtDecNone{text-decoration:none;}

/*Error Message Classes*/
.info, .success, .warning, .error {margin: 10px 0px;padding:12px;padding-left:36px !important;display:block}
.info {color: #00529B;background: #BDE5F8 url(../images/icons/ico-info.png) no-repeat 12px center;}
.success {color: #4F8A10;background: #DFF2BF url(../images/icons/ico-success.png) no-repeat 12px center;}
.warning {color: #9F6000;background: #FEEFB3 url(../images/icons/ico-warn.png) no-repeat 12px center;}
.error {color: #D8000C;background: #FFBABA url(../images/icons/ico-error.png) no-repeat 12px center;}

/*Form Controls*/
.w100{width:100%;}
.labelCap{ font-weight:500; padding:5px 15px 5px 0px; display:block; margin-bottom:0.3em }
.subNotice{font-size:0.8em; color:#999999; font-style:italic; margin-bottom:10px; display:block}
.textBox{padding:0.5em; display:block; border:1px solid #ccc; resize:none; width:97%; border-radius:5px }
.cmbBox{padding:0.5em; border:1px solid #cccccc; display:block; resize:none; width:98%}
.w50{width:50%}
.w20{width:20%}
.w80{width:80%}
.w95{width:95%}
.w98{width:98%}
.w70{width:70%; margin:0 auto;}
.app_r_padding{padding-right:1.8em}
.chkList{width:100%}
.chkList input{padding:8px; margin-bottom:10px; display:inline-block;}
.buttonForm{background-color:#9a410a; color:#fff;  text-decoration:none; font-size:1em; font-weight:600; padding:10px 20px; border-radius:16px; cursor:pointer; border:2px solid #9a410a }
.buttonForm:hover{background-color:transparent; color:#9a410a; transition: 0.5s }

.buttonSec{background-color:#010101; color:#fff;  text-decoration:none; font-size:.9em; font-weight:500; padding:10px 20px; border-radius:16px; cursor:pointer; border:2px solid #010101 }
.buttonSec:hover{background-color:transparent; color:#000; transition: 0.5s}

.clrRegTxt{color:#444}

/* ===================== Media Queries Starts here ==================== */
@media screen and (max-width: 1600px)
{

}
@media screen and (max-width: 1200px)
{	
    .col_1200{width:95%}
	.col_1_2{width:50%}
	.col_1_3{width:33%}
	.col_2_3{width:67%}
	.col_1_4{width:25%}
	.col_1_5{width:20%}
    .col_1_6{width:16.5%}
    .col_800{width:70%}
    .col_400{width:30%}
}
@media screen and (max-width: 1140px) 
{

}
@media screen and (max-width: 1024px)
{
}
@media screen and (max-width: 920px) 
{
    .col_900{width:100%}

}
@media screen and (max-width: 800px) 
{
    .col_1_2, .col_1_3, .col_1_4, .col_1_5, .col_1_6, .col_2_3{width:100%; float:none;}
    .col_800{width:100%; float:none}
    .col_400{width:100%; float:none}

    .w50{width:100%}
    .w20{width:100%}
    .w80{width:100%}
    .w70{ width:100%;}
    .app_r_padding{padding:0}


}
@media screen and (max-width: 768px) 
{
}
@media screen and (max-width: 640px) 
{
    .col_1_3{width:100%}
	.col_2_3{width:100% }
    .pageH1{font-size:2em;}
    .extra-large {font-size: 2em;}
}
@media screen and (max-width: 480px) 
{

}
@media screen and (max-width: 360px) 
{

}