#content-keytakeaway .content-block{background-color: #FFF; padding: 2em 3em;}
#content-keytakeaway .content-block .entry-title,
#content-keytakeaway .content-block .entry-title h4,
#content-keytakeaway .content-block .entry-title h2,
#content-keytakeaway .content-block .entry-title h2 span,
#content-keytakeaway .content-block .entry-title h5 {font-family: 'Kanit', sans-serif!important;}

#content-keytakeaway .content-block .entry-title h4 {color: #5a5ad3; font-weight: 600;}
#content-keytakeaway .content-block .entry-title h2 {color: #000; font-weight: 600; line-height: 1; letter-spacing: 1px;}
#content-keytakeaway .content-block .entry-title h2 span {font-weight: 400; font-size: 1.75rem;}
#content-keytakeaway .content-block .entry-title h5 {color: #808285; font-weight: 400;}

.index-content {padding: 0 5em 3em; background-color: #FFF;}

.date-block {font-family: 'Kanit', sans-serif; background-color: #f2f2f2; font-size: 1.5em; border-bottom: 2px solid #000; color: #000; font-weight: 500; padding: 0 12px; line-height: 1.25; margin-top: 1.5em;}
.date-block span {font-size: 1.7em; color: #ed1b24; font-weight: 700;}



.index-block {display: grid; grid-gap: 20px; grid-template-columns: 35% 1fr; padding: 1em 0; border-bottom: 1px solid #ccc;}
.index-block .entry-title {font-family: 'Kanit', sans-serif;}
.index-block .entry-title h2,
.index-block .entry-title h4,
.index-block .entry-title h5 {margin-bottom: 0.25rem;}
.index-block .entry-title h2,
.index-block .entry-title h4 {font-weight: 500; line-height: 1; font-size: 1.35em; letter-spacing: 0.8px;}
.index-block .entry-title h4 {color: #5a5ad3; }
.index-block .entry-title h2 {color: #000;}
.index-block .entry-title h2 span {font-weight: 400; font-size: 1.25rem;}
.index-block .entry-title h5 {color: #808285; font-weight: 300; font-size: 1em;}
.index-block .entry-title h2:hover {color: #808285;}







header .text-headline {
	font-family: 'Kanit', sans-serif!important; letter-spacing: 1px;
	color: #FFF; font-size: 30px; font-weight: 700; cursor: pointer;
	text-align: center; padding: 5px 0; background-color: #231f20; width: 100%;
    content: "";
    display: block;
    background-image: url('../../images/line-gradient.png');
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: contain;
}
footer,
footer .text-back-to-top,
footer .text-credit {color: #FFF; font-family: 'Kanit', sans-serif!important;}
footer .text-back-to-top {font-size: 1.5em; font-weight: 700; cursor: pointer; letter-spacing: 1px;}
footer .text-back-to-top:hover {color: #ccc;}
footer .text-credit {font-size: 12px; color: #ccc; margin-top: 5px;}
footer .fa.fa-chevron-up {font-size: 20px;}

@media only screen and (max-width: 768px) {
	#content-keytakeaway .content-block{padding: 1em 1.5em;}

	#content-keytakeaway .content-block .entry-title h4 {font-size: 18px;}
	#content-keytakeaway .content-block .entry-title h2 {font-size: 22px;}
	#content-keytakeaway .content-block .entry-title h2 span {font-size: 20px;}
	#content-keytakeaway .content-block .entry-title h5 {font-size: 14px;}
	#content-keytakeaway .content-block .entry-content p {font-size: 14px;}

	.date-block {font-size: 1.25em;}

	.index-content {padding: 0 1.5em 1.5em;}

    .index-block {grid-gap: 10px;}
    .index-block .entry-title h4 {font-size: 1em;}
    .index-block .entry-title h2 {font-size: 1.15em;}
    .index-block .entry-title h2 span {font-size: 1rem;}
    .index-block .entry-title h5 {font-weight: 100; font-size: 0.85em;}
    .index-block .entry-title h2, .index-block .entry-title h4 {letter-spacing: 0.25px;}

	header .text-headline {
		font-size: 1.15em;
	    background-image: url('../../images/line-gradient-mobile.png');
	}

	footer .margin-t-lg {margin-top: 10px;}
	footer .text-back-to-top {font-size: 0.85em;}
	footer .text-credit {font-size: 11px;}
	footer .line-gradient {margin: 0 auto -8px; width: 90%;}
	footer .fa.fa-chevron-up {font-size: 12px;}
}