/*
Theme Name: Siam Kwang
Theme URI: -
Author: en-mani
Author URI:
Description: For Siam Kwang
Version: 1.5
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: 
Text Domain: emn-smk
*/

/* Reset Styles */
@import url('styles/reset.css');

/* Common Element Styles */
@import url('styles/common.css');

/* Product Styles */
@import url('styles/promo-video.css');

/* Product Styles */
@import url('styles/products-3.css');

/* Checkout process Styles */
@import url('styles/checkout.css');

/* User Pages Styles */
@import url('styles/user-pages.css');

/* Search Box */
@import url("styles/search-box-2.css");

/*Responsive */
@import url('styles/under-800.css');

/* Main Layout */

html, body {
	background: #fff9f3;
	height: 100%;
	margin: 0;
}

#wrapper{
	position: relative;
	width: 100%;
	min-height: 100%;
	/* Equal to height of footer */
	/* But also accounting for potential margin-bottom of last child */
	margin-bottom: -490px;
}

.push {
	height: 400px;
}

#footer{
	background: #efefef;
	margin-top: 90px;
	min-height: 380px;
	position: relative;
	z-index: 2;
	padding-top: 20px;
	height: 380px;
}

#header{
	width: 100%;
	height: 205px;
	background: #ff8500;
	position: relative;
	margin-bottom: 60px;
}

#branding{
	float: left;
	text-align: center;
}

#header .main-logo{
	width: 140px;
	height: auto;
	margin-top: 16px;
	/*margin-left: 30px;*/
}

#branding .main-site-name{
	display: block;
}

#branding .main-site-name *{
	color: #fff;
	font-size: 22px;
	text-align: center;
	margin: 0px;
	font-weight: 600;
}

#header-content{
	position: relative;
	height: 205px;
}

#header-search-bar{
	float: left;
	margin-left:50px;
	margin-top: 138px;
}

#header-search-bar .search-field{
	border: 0px;
	width: 545px;
	height: 45px;
	border-radius: 23px;
	padding: 0px 23px;
	color: #8e8e8e;
	background: #fff;
	font-size: 18px;
}

#header-search-bar .icon-search{
	vertical-align: middle;
	margin-left: 10px;
}

#main-menu{
	position: absolute;
	bottom:-60px;
	height: 60px;
	width: 1200px;
}

#main-menu li{
	display: inline-block;
	padding: 15px 30px 15px;
	margin: 0px;
	position: relative;
}

#main-menu li a{
	font-size: 21px;
	color: #ff8500;
	font-weight: 600;
}

#main-menu .current-menu-item, #main-menu li:hover{
	background: #ff8500;
	border-radius: 0px 0px 10px 10px;
}

#main-menu .current-menu-item a, #main-menu li:hover a{
	color: #fff;
}

#main-menu .current-menu-item .sep, #main-menu li:hover .sep{
	display: none;
}

#main-menu .menu-item-home .sep{
	display: none;
}

#main-menu .sep{
	font-size: 21px;
	color: #ff8500;
	font-weight: 600;
	position: absolute;
	left: -4px;
}

#user-menu{
	position: absolute;
	top: 15px;
	right: 30px;
}

#user-menu a{
	color: #fff;
	font-size: 18px;
}

#user-menu a:hover{
	text-decoration: underline;
}

.icon-user{
	margin-right:5px;
}

.icon-user, .icon-sep{
	width: 40px;
	height: 40px !important;
	vertical-align: middle;
}

#shopping-cart{
	position: absolute;
	bottom: 21px;
	right: 48px;
}

.item-count{
	position: absolute;
	top: -12px;
	right: -18px;
	color: #fff;
	z-index: 5;
	font-size: 18px;
	padding: 0px 7px;
	background: #ff8500;
	border: 3px solid #fff;
	border-radius: 8px;
	display: block;
}

.icon-cart{
	width: 48px;
	height: 36px !important;
}

#m-menu{
	display: none;
}

#main-slide-m{
	display: none;
}

#m-slide-selector-container{
	display: none;
}

/* Footer */

#footer-category{
	float:left;
	min-width: 320px;
	max-width: 715px;
}

#footer-services{
	float: left;
}

.footer-cat-list{
	float: left;
	margin-right: 30px;
}

#footer-address{
	float: right;
	width: 265px;
}

#footer p, #footer h4, #footer a, .colophon{
	color: #8e8e8e;
}

#footer h4 a{
	font-weight: 600;
}

#footer a:hover{
	text-decoration: underline;
}

#footer h4{
	margin-bottom: 10px;
}

#footer p{
	line-height: 1.8em;
	margin-bottom: 15px;
}

#footer li{
	line-height: 1.8em;
}

/*Front Page Slide */

#main-slide{
	height: 400px;
	width: 100%;
	background: #ffebd7;
}

.slide-image{
	display: none;
	width: 1200px;
	height: 400px;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

#slide-selector-container{
	text-align: center;
	margin: 20px auto;
}

.slide-star{
	display: inline-block;
	width: 24px;
	height: 24px;
	margin: 0px 4px;
	background: url(images/slide-star.svg) no-repeat;
	background-size: cover;
	background-position: left top;
	cursor: pointer;
}

.slide-star.current, .slide-star:hover{
	background-position: left bottom;
}

/* Front Page Content */

#front-page-products{
	margin-bottom: 120px;
}

/* Contact Page Content */

#contact-content{
	background: #ff8500;
	border-radius: 0px 10px 10px 0px;
	min-height: 560px;
	margin-top: 80px;
	margin-bottom: 35px;
}

#contact-content div{
	float: left;
}

#contact-address *{
	color: #fff;
	font-size: 16px;
	vertical-align: middle;
	line-height: 1.3em;
}

#contact-address{
	margin-left: 30px;
	margin-top: 30px;
	max-width: 360px;
}

#contact-address td{
	padding-bottom: 15px;
}

#contact-address a:hover{
	text-decoration: underline;
}

#contact-address h2{
	font-size: 21px;
	margin-left: 55px;
	margin-bottom: 35px;
}

.icon-address{
	width: 40px;
	height: 40px;
	vertical-align: middle;
	margin-right: 15px;
}

#contact-address p{
	margin-left: 55px;
	margin-bottom: 20px;
}

#contact-address .line-qr{
	margin-top: 20px;
}

.line-qr{
	width: 90px;
	height: 90px;
	object-fit: cover;
}

#contact-form{
	background: #ff8500;
	width: 730px;
	padding: 25px;
	border-radius: 10px;
	margin-bottom: 120px;
}

#contact-form input, #contact-form textarea{
	border-radius: 10px;
	height: 45px;
	width: calc(100% - 50px);
	margin-bottom: 25px;
	padding: 0px 25px;
	font-size: 18px;
	color: #8e8e8e;
	background: #FFF;
}

#contact-form textarea{
	min-height: 240px;
	padding: 15px 25px;
}

#submit-contact-form{
	float: right;
	width: 125px !important;
	background: #ffa64d !important;
	color: #fff !important;
	cursor: pointer;
	font-size: 21px !important;
	font-weight: 600;
	margin-bottom: 0px !important;
}

#submit-contact-form:hover{
	background: #ffbb7d !important;
}

#mail-confirm {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 0px; left: 0px; right: 0px; bottom: 0px;
	background:rgba(230,230,230,0.90);
	z-index: 20;
}

#message-container{
	background:#fff;
	padding: 25px 40px;
	position:relative;
	top: -30%;
	border-radius: 10px;
}

#confirm-message{
	background: #ff8500;
	color: #fff;
	border: 0px;
	display:block;
	cursor:pointer;
	padding: 10px;
	font-size: 18px;
	font-weight:800;
	text-align:center;
	width: 40%;
	margin:20px auto 0px;
	border-radius: 10px;
}

#message-container span{
	font-size: 21px;
}

/* Common content */

#page-content{
	margin-bottom: 120px;
}

.post-content{
	padding: 30px 30px;
	background: #fff;
	border-radius: 0px 10px 10px 0px;
}

.post-content p{
	font-size: 16px;
	margin-bottom: 30px;
	line-height: 1.5em;
}

.post-content .cat-list{
	float: left;
	margin-right: 30px !important;
}

/* Pagination */

.pagination{
	text-align: center;
}

.page-numbers{
	margin: 0px 5px;
}

.page-numbers.current{
	color: #ff8500;
}

.icon-pagi{
	display: inline-block;
	width: 24px;
	height: 24px;
	background-position: top left;
	vertical-align: middle;
}

.icon-prev{
	background: url("images/icon-prev.svg");
}

.icon-next{
	background: url("images/icon-next.svg");
}