html, body, .text-default {
    font: 400 var(--cpn-default-font-size)/var(--cpn-default-line-height) cpn;
    letter-spacing: 0.2px;
	/* letter-spacing: 0 !important; */
	color: rgba(var(--cpn-color-black),1);
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
	margin: 0;
	/* background-color: rgba(255,255,0,0.8); */
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
.heading-main, .heading-sub, .heading-content-main, .heading-content-sub {
	font-weight:400;
	overflow: hidden;
}
.heading-main, .heading-sub, .heading-content-main, .heading-content-sub {
	font-weight:400;
	/* background-color: rgba(255,0,255,0.8); */
}
/*
font-size-heading-main
font-size-heading-sub
font-size-heading-default-1
font-size-heading-default-2
*/
h1, .h1, .heading-main {
	font-size: var(--cpn-h1-font-size);
	line-height: var(--cpn-h1-line-height);
}
h2, .h2, .heading-sub {
	font-size: var(--cpn-h2-font-size);
	line-height: var(--cpn-h2-line-height);
}
h3, .h3, .heading-content-main {
	font-size: var(--cpn-h3-font-size);
	line-height: var(--cpn-h3-line-height);
}
h4, .h4, .heading-content-sub {
	font-size: var(--cpn-h4-font-size);
	line-height: var(--cpn-h4-line-height);
}
h5, .h5 {
	font-size: var(--cpn-h5-font-size);
	line-height: var(--cpn-h5-line-height);
}
h6, .h6 {
	font-size: var(--cpn-h6-font-size);
	line-height: var(--cpn-h6-line-height);
	font-weight:500;
}
.text-small {
	font-size: var(--cpn-small-font-size);
    line-height: var(--cpn-small-line-height);
	letter-spacing: 0.5px;
	/* background-color: rgba(0,255,0,0.8); */
}
.text-smallest,
.small, small {
	font-size: var(--cpn-smallest-font-size);
    line-height: var(--cpn-smallest-line-height);
	letter-spacing: 0.5px;
	/* background-color: rgba(0,255,0,0.8); */
}

/* .text-link {
	text-decoration: none;
	outline: none;
} */
.text-link,
.text-link-hover {
	text-decoration: none;
	outline: none;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

.text-center {
    text-align: center !important;
}
.text-left {
    text-align: left !important;
}
.text-right {
    text-align: right !important;
}

/* font icon */
[class*="cpn-icon-"],
[class*="cpn-basic-icon-"],
[class*="cpn-spec-icon-"] {
    position: relative;
    display: inline-block;
	vertical-align: middle;
	/* height: initial; */
	/* height: 0; */
	line-height: 0;
}
[class*="cpn-icon-"]:before,
[class*="cpn-basic-icon-"]:before,
[class*="cpn-spec-icon-"]:before {
	line-height: inherit !important;
}
[class*="cpn-icon-"].h-zero,
[class*="cpn-basic-icon-"].h-zero,
[class*="cpn-spec-icon-"].h-zero {
	height: 0;
}

.font-size-icon-small {
	font-size: 80% !important;
}
.font-size-icon-1 {
	font-size: 110% !important;
}
.font-size-icon-2 {
	font-size: 120% !important;
}
.font-size-icon-large {
	font-size: 110% !important;
}

/* --------------------------------------------------------------- */
/* ------------------------- font weight ------------------------- */
/* --------------------------------------------------------------- */

.font-light {
	font-weight: 300 !important;
}
.font-regular {
	font-weight: 400 !important;
}
.font-medium {
	font-weight: 500 !important;
}
.font-semi-bold {
	font-weight: 600 !important;
}
.font-bold {
	font-weight: 700 !important;
}
.font-extra-bold {
	font-weight: 800 !important;
}
.font-black {
	font-weight: 900 !important;
}

/* xxl */
@media (min-width: 1400px) {}

/* xxl - 1 */
@media (min-width:1500px) and (max-width: 1599.98px) {}

/* xxl - 2 */
@media (min-width: 1400px) and (max-width: 1499.98px) {}

/* xxl - 1 และ 2 */
@media (min-width: 1400px) and (max-width: 1599.98px) {}

/* xl */
@media (min-width: 1200px) and (max-width: 1399.98px) {}

/* lg */
@media (min-width: 992px) and (max-width: 1199.98px) {}

/* xl - lg */
@media (min-width: 992px) and (max-width: 1399.98px) {}

/* md */
@media (min-width: 768px) and (max-width: 991.98px) {}

/* md - sm */
@media (min-width: 576px) and (max-width: 991.98px) {}

/* sm - xs */
@media (max-width: 767.98px) {}

/* sm */
@media (min-width: 576px) and (max-width: 767.98px) {}

/* xs */
@media (max-width: 575.98px) {}

/* xs custom */
@media (max-width: 399.98px) {}