/*----------------- Reset CSS -----------------*/
	html {
	    -webkit-text-size-adjust: none;
	}
	body{
		width: 100%;
		/* overflow-x: hidden; */
	}
/*
	#fullpage img{
		background-color: none;
		
	}
*/

/* table, caption, tbody, tfoot, thead, tr, th, td, */
	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, 
	ul, ol,
	fieldset, form, label, legend,
	
	article, aside, canvas, details, embed, 
	figure, figcaption, footer, header, hgroup, 
	menu, nav, output, ruby, section, summary,
	time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
/* 		font-size: 100%; */
		/* font: inherit; */
		vertical-align: baseline;
		position: relative;
		display: block;
	}
	*:focus{outline: none;}
	/* HTML5 display-role reset for older browsers */
	article, aside, details, figcaption, figure, 
	footer, header, hgroup, menu, nav, section {
		display: block;
	}
	body {
		line-height: 1;
	}
	ol, ul {
		list-style: none;
	}
	blockquote, q {
		quotes: none;
	}
	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
		content: none;
	}
	table {
		border-collapse: collapse;
		border-spacing: 0;
	}
	img {
		background: transparent;
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);   /* IE6 & 7 */      
		zoom: 1;
	}
	* {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		position: relative;
	}
	:before,:after{
		position: relative;
	}
	:focus {
		outline-color: transparent;
		outline-style: none;
		outline: 0px !important;
	}
	

/*----------------- Reset Style Form -----------------*/

	input,
	select,
	textarea,
	button{
		-webkit-appearance: none !important;
		-moz-appearance: none !important;
		appearance: none !important;
		-webkit-box-shadow: none !important;
		-moz-box-shadow: none !important;
		box-shadow: none !important;
	}
	input:focus,textarea:focus {outline: none;}
	
	
/*----------------- Center Element -----------------*/
.center{
	margin: 0 auto;
	display: block;
}
/*----------------- Tag a No Underline -----------------*/

	a{
		cursor: pointer;
		-webkit-transition: all 0.2s ease-in;
		-moz-transition: all 0.2s ease-in;
		-o-transition: all 0.2s ease-in;
		transition: all 0.2s ease-in;
	}
	a:focus{text-decoration:none !important;}
	a:link {text-decoration:none;}
	a:visited {text-decoration:none;}
	a:hover {text-decoration:none !important;}
	a:active {text-decoration:none;}

/*----------------- Clear Float -----------------*/

	.clear{
		clear: both;
		width: 0px;
		height: 0px;
	}
	/**
	 * For modern browsers
	 * 1. The space content is one way to avoid an Opera bug when the
	 *    contenteditable attribute is included anywhere else in the document.
	 *    Otherwise it causes space to appear at the top and bottom of elements
	 *    that are clearfixed.
	 * 2. The use of `table` rather than `block` is only necessary if using
	 *    `:before` to contain the top-margins of child elements.
	 */
	.cf:before,
	.cf:after {
	    content: " "; /* 1 */
	    display: table; /* 2 */
	}
	
	.cf:after {
	    clear: both;
	}
	
	/**
	 * For IE 6/7 only
	 * Include this rule to trigger hasLayout and contain floats.
	 */
	.cf {
	    *zoom: 1;
	}

/*----------------- Grayscale Fillter -----------------*/ 

	.grayscale {
	    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+ */
	    filter: gray; /* IE6-9 */
	    -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
	    -webkit-transition: all .2s ease; /* Fade to color for Chrome and Safari */
	    -webkit-backface-visibility: hidden; /* Fix for transition flickering */
	}
	
	.grayscale:hover {
	    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
	    -webkit-filter: grayscale(0%);
	}

/*----------------- animate berger to close btn -----------------*/ 

	.cmn-toggle-switch{
		position: relative;
		display: block;
		overflow: hidden;
		margin: 0;
		padding: 0;
		width: 50px;
		height: 50px;
		font-size: 0;
		text-indent: -9999px;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		box-shadow: none;
		border: none;
		cursor: pointer;
		-webkit-transition: background 0.3s;
		transition: background 0.3s;
	}
	.cmn-toggle-switch:focus {outline: none;}
	.cmn-toggle-switch span {
		display: block;
		position: absolute;
		top: 25px;
		left: 15px;
		right: 15px;
		height: 2px;
		width: 20px;
		background: #d7b98a;
	}
	.cmn-toggle-switch span::before,
	.cmn-toggle-switch span::after {
		position: absolute;
		display: block;
		left: 0;
		width: 100%;
		height: 2px;
		background-color: #d7b98a;
		content: "";
		box-shadow: none;
	}
	.cmn-toggle-switch span::before {top: -5px;}
	.cmn-toggle-switch span::after {bottom: -5px;}
	.cmn-toggle-switch__htx {background-color:transparent;}
	.cmn-toggle-switch__htx span {
		-webkit-transition: background 0 0.3s;
		transition: background 0 0.3s;
	}
	.cmn-toggle-switch__htx span::before,
	.cmn-toggle-switch__htx span::after {
		-webkit-transition-duration: 0.3s, 0.3s;
		transition-duration: 0.3s, 0.3s;
		-webkit-transition-delay: 0.3s, 0;
		transition-delay: 0.3s, 0;
	}
	.cmn-toggle-switch__htx span::before {
		-webkit-transition-property: top, -webkit-transform;
		transition-property: top, transform;
	}
	.cmn-toggle-switch__htx span::after {
		-webkit-transition-property: bottom, -webkit-transform;
		transition-property: bottom, transform;
	}
	/* active state, i.e. menu open */
	.cmn-toggle-switch__htx.active span {background: none;}
	.cmn-toggle-switch__htx.active span::before {
		top: 0;
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	.cmn-toggle-switch__htx.active span::after {
		bottom: 0;
		-webkit-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	.cmn-toggle-switch__htx.active span::before,
	.cmn-toggle-switch__htx.active span::after {
		-webkit-transition-delay: 0, 0.3s;
		transition-delay: 0, 0.3s;
	}

/*----------------- Show Hide Content -----------------*/ 

.Lpc{
	display: block !important;
}
.Lpc-tablet{
	display: block !important;
}
.Ltablet{
	display: none !important;
}
.Ltablet-mobile{
	display: none !important;
}
.Lmobile{
	display: none !important;
}
.Lpc-mobile{
	display: block !important;
}
.Lmobile-l{
	display: none !important;
}
.Lmobile-p{
	display: none !important;
}

/*----------------- Container-----------------*/ 

.container{
	width: 90%;
	max-width: 1260px;
	margin: 0 auto;
}
.clear{
	clear: both;
	width: 0px;
	height: 0px;
}
.fl{
	float: left;
}
.fr{
	float: right;
}
.mC{
	margin: 0px auto;
}
.dB{
	display: block;
}
.dN{
	display: none;
}
.p-R{
	position: relative;
}
.p-A{
	position: absolute;
}
.p-Ft{
	position: fixed;
	top: 0px;
}
.p-Fb{
	position: fixed;
	bottom: 0px;
}
.tS{
	-webkit-transition: all 0.5s ease !important;
	-moz-transition: all 0.5s ease !important;
	-o-transition: all 0.5s ease !important;
	transition: all 0.5s ease !important;
}
	
	
/* ---------------------------------------------------**** Tablet Portrait ****--------------------------------------------------- */
@media only screen and (min-width: 768px) and (max-width: 1024px){
	
	/*----------------- Show Hide Content -----------------*/ 

	.Lpc{
		display: none !important;
	}
	.Lpc-tablet{
		display: block !important;
	}
	.Ltablet{
		display: block !important;
	}
	.Ltablet-mobile{
		display: block !important;
	}
	.Lmobile{
		display: none !important;
	}
	.Lpc-mobile{
		display: none !important;
	}
	/*----------------- Container-----------------*/ 
	
	.container{
		width: 95%;
		margin: 0 auto;
	}

}


/* ---------------------------------------------------**** Mobile ****--------------------------------------------------- */
@media only screen and (min-width: 320px) and (max-width: 767px) {

	/*----------------- Show Hide Content -----------------*/ 

	.Lpc{
		display: none !important;
	}
	.Lpc-tablet{
		display: none !important;
	}
	.Ltablet{
		display: none !important;
	}
	.Ltablet-mobile{
		display: block !important;
	}
	.Lmobile{
		display: block !important;
	}
	.Lpc-mobile{
		display: block !important;
	}
	
	/*----------------- Container-----------------*/ 
	
	.container{
		width: 95%;
		margin: 0 auto;
	}

}


/* ---------------------------------------------------**** Mobile ****--------------------------------------------------- */
@media only screen and (min-width: 320px) and (max-width: 767px) and (-webkit-min-device-pixel-ratio: 2) and (-webkit-min-device-pixel-ratio: 3){

}


