/* General HTML */
html{background:#2c2c2c;min-height:100vh;width:100%;overflow-x:hidden}
body{font-family:'Kanit','Prompt','Sarabun',Tahoma,Arial,sans-serif;font-size:14px;color:#282421;background:#fff;width:100%;overflow-x:hidden;word-break:break-word;margin:0 auto}
h1,h2,h3,h4,h5,h6{font-weight:400}
a{text-decoration:none}
a:hover,a:focus,a:active{text-decoration:none;color:#f5c945}

select {
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background: #fff url('chevron-down-solid.svg') center right no-repeat;
	background-size: 12px 12px;
	background-origin: content-box;
}
select:focus {background-image:url('chevron-up-solid.svg')}

/* Mstyle Mod */
.scroller {
	scrollbar-color: #f5c945 transparent;
	scrollbar-width: thin;
}
.scroller::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}
.scroller::-webkit-scrollbar-track-piece  {
	background-color: transparent;
}
.scroller::-webkit-scrollbar-thumb,
.scroller::-webkit-scrollbar-thumb:vertical,
.scroller::-webkit-scrollbar-thumb:horizontal {
	height: 8px;
	background-color: #f5c945;
}
img {max-width:100%}

.bg-dd {background-color:#613414}
.fc-dd {color:#613414}
.bg-de {background-color:#f5c945}
.fc-de {color:#f5c945}
.bg-hl {background-color:#0a5d28}
.fc-hl {color:#0a5d28}

.stitle {font-size:32px}
.stitle span {display:inline-block;white-space:nowrap;transform:translateY(3px);padding-left:12px}
a .stitle {text-decoration:none;color:#282421}
.btn-yellow {display:inline-block;background:#f5c945;color:#333;font-size:20px;height:44px;line-height:44px;border-radius:22px;padding:0 56px;transition:.5s all}
.btn-yellow:hover {background:#333;color:#f5c945}

section.main {position:relative;min-height:calc(100vh - 256px)}
section.main:after {display:block;content:'';clear:both}

/* Main Menu */
.fixed-area {height:96px}
.menu-pc {height:96px;position:fixed;top:0;left:0;right:0;z-index:100;width:100%;background:#fff;box-shadow:0 1px 2px 0 #ddd}
.menu-container {height:96px;position:relative;margin:0 auto;max-width:1360px}
.m-logo-area {position:absolute;z-index:101;left:1.5rem;top:50%;transform:translateY(-50%);margin:0 auto;text-align:center;font-size:28px}
.m-logo-area img {height:40px}
.m-logo-area .logo-text {display:inline-block;max-width:calc(100vw - 1.5rem - 100px)}
.m-logo-area a {color:#613414;transition:.5s all}
.m-logo-area a:hover {color:#f5c945}
.m-menu-area {position:absolute;z-index:102;right:1.5rem;bottom:0;font-size:18px}
.m-menu-area ul {list-style-type:none;padding:0;margin:0}
.m-menu-area li {display:inline-block;margin:0;float:left}
.m-menu-area li a {display:inline-block;height:96px;line-height:96px;padding:0 .75rem;color:#343231;transition:1.5s all}
.m-menu-area li a:hover {color:#f5c945;box-shadow:0 8px 0 0 #f5c945 inset;transition:.5s all}
.m-menu-area li:last-child a {padding-right:0}
.m-menu-area li:after {display:block;content:'';clear:both}
.nav-deco {position:relative;display:inline-block;border-top:4px solid #f5c945;border-bottom:4px solid #f5c945;width:40px;height:32px;transition:.5s all}
.nav-deco .nav-midbar {position:absolute;right:0;width:36px;height:4px;background:#f5c945;top:50%;transform:translateY(-50%);transition:.5s all}
.nav-deco:hover {border-color:#282421}
.nav-deco:hover .nav-midbar {background:#282421}
.menu-sm,.menu-sm.active {display:none}

/* Main Content BG */
#intro {background:#f5c945 url(../imgs/intro-bg.jpg) center no-repeat;background-size:cover}
#about {background:#fff}
#portfolio {background:#f8f8f8}
#news {background:#f8f8f8}
#contact {background:#f8f8f8}

/* Main Content Styles */
.carousel-caption {bottom:auto;top:50%;transform:translateY(-50%);text-align:left}
.carousel-caption h3 {transition:1s all;font-size:48px;margin-bottom:24px}
.carousel-caption p {transition:1.5s all;font-size:24px;margin-bottom:16px}
.carousel-caption a {box-shadow:1px 1px 2px #343231}
.carousel-caption .a-banner {transition:2s all}
.carousel-caption h3,
.carousel-caption p {text-shadow:1px 2px 4px #282421}
.carousel-caption h3,
.carousel-caption p,
.carousel-caption .a-banner {opacity:.01;transform:translateY(128px)}
.carousel-caption h3 {transform:translateX(256px)}
.carousel-caption p {transform:translateX(128px)}
.carousel-caption .a-banner {transform:translateY(8px)}
.active .carousel-caption h3,
.active .carousel-caption p,
.active .carousel-caption .a-banner {opacity:1;transform:translateX(0px) translateY(0px)}

.img-intro {width:calc(100% - 48px);padding:48px 0;margin:0 auto}
.img-intro {margin-right:0}
.img-intro img {width:100%;border-radius:4px}
.intro-box {background:transparent url(../imgs/bg-gradient.png) left top no-repeat;background-size:90% 100%}

/* Footer & Copyright */
footer {background:#2c2c2c;color:#fff;font-size:16px}
footer .title {color:#f5c945;font-size:18px;padding:24px 0 12px;margin:0 auto}
footer .text {color:#fff;font-size:14px;padding:2px 0 8px;margin:0 auto}
footer .text a {color:#f8f8f8;transition:.3s all}
footer .text a:hover {color:#f5c945}
footer .copyright {position:relative;color:#888;padding-bottom:24px}
footer .copyright a {color:#f8f8f8;transition:.3s all}
footer .copyright a:hover {color:#f5c945}
footer .copyright:before {display:block;content:'';width:calc(100% - 1.5rem);max-width:1320px;height:1px;background:#8888;margin:24px auto}
footer .laststand {padding:48px 24px 16px}
footer .laststand h3 {color:#f5c945}

/* Media landscape */
@media screen and (orientation:landscape), screen and (min-width:1200px) {
	.m-logo-area .logo-text {display:inline-block;margin-left:24px}
	.m-language,.m-mininav {display:none}
}
/* Media portriat */
@media screen and (orientation:portrait), screen and (max-width:1199px) {
	.m-logo-area {width:calc(100% - 1.5rem);left:0;right:0;margin:0 auto;text-align:left}
	.m-logo-area .logo-text {z-index:102;position:absolute;top:50%;transform:translateY(-50%);right:0;text-align:left;width:calc(100vw - 1.5rem - 120px)}
	.m-menu-area {display:none}
	/*.fixed-area {display:none}
	.menu-pc {position:relative}*/
	.m-language,.m-mininav {position:absolute;right:24px;top:50%;transform:translateY(-50%);z-index:101;height:32px}
	.menu-sm {position:fixed;top:96px;left:0;right:0;z-index:108;margin:0 auto;background:#fff;box-shadow:0 4px 4px #8884}
	.menu-sm.active {display:block}
	.menu-sm ul {list-style-type:none;padding:0;margin:0}
	.menu-sm li {display:block;margin:0 auto}
	.menu-sm li a {display:block;padding:8px 24px;color:#343231;transition:1.5s all;font-size:22px;text-align:right;border-top:1px solid #fc48}
	.menu-sm li a:hover {color:#f5c945;box-shadow:0 8px 0 0 #f5c945 inset;transition:.5s all}
	.cp-menu {text-align:right;padding:8px 24px;border-top:1px solid #fc48}
	.cp-menu:last-child {padding:16px 24px}
}

/* Lazy Script Effect */
.lz-fade-in {opacity:.01;transition:.5s all}
.lz-fade-in.lazyActiveStyle {opacity:1;transition:1.5s all}
.lz-slide-left {opacity:.01;transform:translateX(48px);transition:.2s all}
.lz-slide-left.lazyActiveStyle {opacity:1;transform:translateX(0px);transition:.5s all}