/* --- font size --- */

html, body {
	font: 400 16px/25px 'cpn';
    letter-spacing: 0.3px;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
	margin: 0;
}
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 {
	font-weight:400;
}
h1, .h1, .main-topic {
	font-size: 30px;
	line-height: 40px;
}
h2, .h2, .sub-topic {
	font-size: 25px;
	line-height: 35px;
}
h3, .h3, .normal-topic {
	font-size: 20px;
	line-height:30px;
}
h4, .h4 {
	font-size: 17px;
	line-height:25px;
}
h5, .h5 {
	font-size: 15px;
	line-height: 20px;
}
h6, .h6 {
	font-size: 12px;
	line-height: 15px;
	font-weight:500;
}

h1.font-bold, .h1.font-bold, .main-topic.font-bold,
h1 .font-bold, .h1 .font-bold, .main-topic .font-bold {
	letter-spacing:-0.2px !important;
}

.text-min {
	font-size: 12px;
	line-height: 15px;
	font-weight:700;
	letter-spacing:0.1px;
}
.text-note {
	font-size: 11px;
	line-height: 20px;
	font-weight:700;
	letter-spacing:0.1px;
}
.text-note.font-regular,
.text-note .font-regular {
	letter-spacing:0.3px;
}

.text-en-min {
    font-family: "rubik";
    font-size: 10px !important;
    line-height: 15px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.7px !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;
}

i {
    position: relative;
    display: inline-block;
    vertical-align: middle;
	/*font-weight: normal !important;*/
}
i:before {
	display:block;
	/*line-height:inherit !important;*/
}

/* ----- text align ----- */

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


.text-upper {
	text-transform: uppercase !important;
}
.text-lower {
	text-transform: lowercase !important;
}
.text-capitalize {
	text-transform: capitalize !important;
}

.letter-spacing-1 {
	letter-spacing:1px !important;
}
.letter-spacing-2 {
	letter-spacing:2px !important;
}
.letter-spacing-3 {
	letter-spacing:3px !important;
}
.letter-spacing-4 {
	letter-spacing:4px !important;
}
.letter-spacing-5 {
	letter-spacing:5px !important;
}

/* lg more */
@media (min-width:1200px) and (max-width:1649px) {
html, body {
	font-size:15px;
}
}

/* md */
@media (min-width:992px) and (max-width:1199px) {
html, body {
	font-size:14px;
}
h1, .h1, .main-topic {
	font-size: 25px;
	line-height: 35px;
}
h2, .h2, .sub-topic {
	font-size: 20px;
	line-height: 30px;
}
h3, .h3, .normal-topic {
	font-size: 18px;
	line-height:25px;
}
h4, .h4 {
	font-size: 15px;
	line-height:20px;
}
h5, .h5 {
	font-size: 15px;
	line-height: 20px;
}
h6, .h6 {
	font-size: 12px;
	line-height: 15px;
	font-weight:500;
}
}

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

/* sm */
@media (min-width:768px) and (max-width:991px) {
h1, .h1, .main-topic {
	font-size: 25px;
	line-height: 35px;
}
h2, .h2, .sub-topic {
	font-size: 21px;
	line-height: 30px;
}
h3, .h3, .normal-topic {
	font-size: 19px;
	line-height:25px;
}
h4, .h4 {
	font-size: 15px;
	line-height:20px;
}
h5, .h5 {
	font-size: 15px;
	line-height: 20px;
}
h6, .h6 {
	font-size: 12px;
	line-height: 15px;
	font-weight:500;
}
}

/* xs */
@media (max-width:767px) {
html, body {
	font: 400 14px/25px 'cpn';
}
h1, .h1, .main-topic {
	font-size: 22px;
	line-height: 30px;
}
h2, .h2, .sub-topic {
	font-size: 20px;
	line-height: 30px;
}
h3, .h3, .normal-topic {
	font-size: 18px;
	line-height:25px;
}
h4, .h4 {
	font-size: 15px;
	line-height:25px;
}
h5, .h5 {
	font-size: 15px;
	line-height: 20px;
}
h6, .h6 {
	font-size: 12px;
	line-height: 15px;
	font-weight:500;
}
}

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