:root{
	--primary-color: #baa360;
	--secondary-color: #141414;
	--text-color: #9d8337;
	--bg-color: #f6f4f0;
	--red: #bc4d42;
	--dark: #231f20;
	
	--gradient: linear-gradient(60deg, rgba(21,40,81,1) 0%, rgba(14,60,157,1) 72%, rgba(21,40,81,1) 100%);
}
.text-grey{ color: #9a9a9a; }
.text-color{ color:var(--primary-color) !important; }

body,
p,
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
#mainMenu nav > ul > li > a,
#footer,
button.btn, .btn:not(.close):not(.mfp-close), a.btn:not([href]):not([tabindex]){
	font-family: "Lato", "Noto Sans Thai", serif;
	letter-spacing: 0;
	line-height: 1.5;
}
body, p{ font-size: 15px;}
.w100, .w-100{ width:100%; }
.italic{ font-style:italic; }
.headbar .htitle{ color:var(--secondary-color); }
a:not(.btn):not(.badge):hover, a:not(.btn):not(.badge):focus, a:not(.btn):not(.badge):active{
	color: var(--primary-color);
}
.container-fluid{ max-width: 90%; }
button.btn, .btn:not(.close):not(.mfp-close), a.btn:not([href]):not([tabindex]){
	color: #fff !important;
	border: none;
	line-height: 40px;
	border-radius: 4px;
	font-size: 16px;
	font-weight: normal;
	letter-spacing: 0.5px;
	text-decoration: none;
	outline: none;
	padding: 0 20px;
	text-transform: initial;
	background: var(--primary-color);
}
button.btn.btn-primary, .btn:not(.close):not(.mfp-close).btn-primary, a.btn:not([href]):not([tabindex]).btn-primary{
	background-color: var(--gradient);
	border: none;
}
button.btn.btn-primary:hover, button.btn.btn-primary:focus, button.btn.btn-primary:not(:disabled):not(.disabled):active, button.btn.btn-primary:not(:disabled):not(.disabled).active, .btn:not(.close):not(.mfp-close).btn-primary:hover, .btn:not(.close):not(.mfp-close).btn-primary:focus, .btn:not(.close):not(.mfp-close).btn-primary:not(:disabled):not(.disabled):active, .btn:not(.close):not(.mfp-close).btn-primary:not(:disabled):not(.disabled).active, a.btn:not([href]):not([tabindex]).btn-primary:hover, a.btn:not([href]):not([tabindex]).btn-primary:focus, a.btn:not([href]):not([tabindex]).btn-primary:not(:disabled):not(.disabled):active, a.btn:not([href]):not([tabindex]).btn-primary:not(:disabled):not(.disabled).active{
	background: #ede6de;
	color: var(--secondary-color);
}
button.btn:hover, button.btn:focus, button.btn:not(:disabled):not(.disabled):active, button.btn:not(:disabled):not(.disabled).active, .btn:not(.close):not(.mfp-close):hover, .btn:not(.close):not(.mfp-close):focus, .btn:not(.close):not(.mfp-close):not(:disabled):not(.disabled):active, .btn:not(.close):not(.mfp-close):not(:disabled):not(.disabled).active, a.btn:not([href]):not([tabindex]):hover, a.btn:not([href]):not([tabindex]):focus, a.btn:not([href]):not([tabindex]):not(:disabled):not(.disabled):active, a.btn:not([href]):not([tabindex]):not(:disabled):not(.disabled).active{
	color: #fff !important;
	background-color: var(--secondary-color);
	text-decoration: none;
	box-shadow: 0 10px 10px rgba(128, 52, 53, 0.19);
}
.portfolio-item .portfolio-description a:hover i, .portfolio-item .grid-description a:hover i, .portfolio-item .portfolio-links a:hover i, .grid-item .portfolio-description a:hover i, .grid-item .grid-description a:hover i, .grid-item .portfolio-links a:hover i{
	background-color: var(--secondary-color);
	border: 1px solid var(--secondary-color);
}
.btn:not(.close):not(.mfp-close).btn-light.btn-outline:hover{ color:#333 !important; }
.flickity-button:hover{ background-color: var(--secondary-color); }
#mainMenu nav > ul > li .dropdown-menu > li.current > a, #mainMenu nav > ul > li .dropdown-menu > li.current > span, #mainMenu nav > ul > li .dropdown-menu > li:hover > a, #mainMenu nav > ul > li .dropdown-menu > li:hover > span, #mainMenu nav > ul > li .dropdown-menu > li:focus > a, #mainMenu nav > ul > li .dropdown-menu > li:focus > span, #mainMenu nav > ul > li .dropdown-menu > li:active > a, #mainMenu nav > ul > li .dropdown-menu > li:active > span, #mainMenu nav > ul > li .dropdown-menu > li.hover-active > a, #mainMenu nav > ul > li .dropdown-menu > li.hover-active > span{
	color: var(--primary-color);
}
#scrollTop{ bottom:60px !important; }
#scrollTop:after, #scrollTop:before{ background:var(--primary-color); }
#search{ top:40px; }
#mainMenu nav > ul > li.dropdown > a:after{
	content: "\f107";
	font-family: 'font awesome 5 free';
	margin-left: 5px;
	font-size: 11px;
}
.headbar{ position:relative; }
.headbar .link-more{
	position: absolute;
	right: 15px;
	bottom: 8px;
	font-size: 19px;
	color: #333;
}
.headbar .link-more i{
	color: inherit;
	border: 2px solid #333;
	border-radius: 6px;
	line-height: 25px;
	width: 25px;
	height: 25px;
	text-align: center;
	margin-left: 4px;
}
.headbar .link-more:hover{ color:var(--primary-color) !important; }
.headbar .link-more:hover i{
	background: var(--primary-color);
	border-color: var(--primary-color);
	color: #fff;
}

@media(max-width:1024px){
	button.btn:not(.btn-creative):not(.btn-slide), .btn:not(.close):not(.mfp-close):not(.btn-creative):not(.btn-slide), a.btn:not([href]):not([tabindex]):not(.btn-creative):not(.btn-slide){
		font-size: 16px;
		height: auto;
		line-height: 34px;
		padding: 0 14px;
	}
}
@media(max-width:991px){
	section{ padding: 40px 0; }
}
@media(max-width:767px){
	.container-fluid{ max-width: 100%; }
}
@media(max-width:375px){
	.headbar .link-more{
		position: relative;
		right: 0;
		margin-top: 20px;
		bottom: 0;
	}
}