/*
	base color: #74ae4f; (blue)
	oposite color: #e21f26; (red)
*/

/* import fontu*/
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@100;200;400;600');

/* DEFAULT DEFINITION */
/* reset to default */
* { font-weight: inherit; font-family: inherit; font-style: inherit; color: inherit; cursor: inherit; font-size: 100%; border: 0 none; outline: 0; padding: 0; margin: 0; vertical-align: top;  }
* { transition: background 0.4s; }

body { font: 10px 'Kanit', "Kanit", sans-serif;   }
strong { font-weight: 600; }

h1,h2,h3 {  font-family: 'Kanit', "Kanit", sans-serif; color: #74ae4f; }
h1 { font-size: 5.2em;  margin-bottom: 30px; font-weight: 200; } /*text-shadow: 0px 0px 5px #000;*/
h2 { font-size: 2.6em; margin-bottom: 15px; }
h3 { font-size: 2em; margin-bottom: 15px ; }

h3 span { display: block; font-weight: 400; }
h1 span { display: block; font-size: 16px; font-weight: 400; }
h2 span { display: block; font-size: 16px; font-weight: 400; }

@media only screen and (max-width: 960px) {
	h1 { font-size: 4em; }
}

p { font-size: 1.8em; line-height: 1.6em; margin-bottom: 30px; color: #555; }

.playground ul { font-size: 1.8em; line-height: 1.6em; margin-bottom: 30px; color: #555; list-style: none; margin-bottom: 15px; }
.playground ul li { display: block; padding: 0px 0px 15px 20px; background: url('../img/bg-li.gif') left 12px no-repeat; }

a { color: #6f64ac;  }
a:hover { cursor: pointer; color: #ccc; text-decoration: none; }

input, textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; }

/* button smart */
.button_smart { display:  inline-block; font-size: 1.8em; color: #fff; background: #666; padding: 10px 15px 10px 15px; text-decoration: none; border-radius: 2px; }
.button_smart:hover { background: #74ae4f; color: #fff;  }

/* middle */
.middle { max-width: 1400px; margin: 0 auto; padding: 0px 0px 0px 0px; }
.middle_w { max-width: 2400px; margin: 0 auto; padding: 0px 0px 0px 0px; }
.middle_t { max-width: 960px; margin: 0 auto; padding: 0px 0px 0px 0px; }

/* clearing element */
div.clear, div.util, div.cleaner { display: block; clear: both; font-size: 0px; line-height: 0px; z-index: 2000; }

.playground { padding: 0px 30px 0px 30px; }
.playground_half, .playground_hlf  { padding: 0px 15px 0px 15px;}

/* helpers */
/* SCROLL-UP */
#scrollup { position: fixed; bottom: 15px; right: 15px; z-index: 100; }
#scrollup a { display: block; height: 45px; width: 45px; background: url('../img/icon-scrollup.png') center center no-repeat #777; border-radius: 5px; text-decoration: none; }

/* WIDTH */
.width_full { width: 100%; box-sizing: border-box; }
.width_half{ width: 50%; box-sizing: border-box; }
.width_third{ width: 33.333%; box-sizing: border-box;}
.width_quad{ width: 25%; box-sizing: border-box;}
.width_75pr{ width: 75%; box-sizing: border-box; }

@media only screen and (max-width: 960px) { .width_quad, .width_third, .width_half, .width_75pr { width: 100%; } }

/* OTHER */
.hide { display: none; }
.a_center, .align_center { text-align: center; }
.float_right { float: right; }
.float_left { float: left; }

@media only screen and (max-width: 960px) { .no_tablet { display: none; } }
@media only screen and (min-width: 960px) { .is_tablet { display: none; } }
@media only screen and (max-width: 768px) { .no_mobile { display: none; } }
@media only screen and (min-width: 768px) { .is_mobile { display: none; } }
@media only screen and (min-width: 960px) { .simulate_line { display: block; } }