// ==================================================
//  General CSS Elements
// ==================================================
html {
	font-size: $baseFontSize;
	background: $white;
	height: 100%;
	@include gtLG {
		font-size: $baseFontSize * 1;
	};
	@include inMD {
		font-size: $baseFontSize * 0.85;
	};
	@include inSM {
		font-size: $baseFontSize * 0.75;
	};
	@include ltXS {
		font-size: $baseFontSize * 0.75;
	};
}
body {
	font-family: $baseFontFamily;
	font-weight: 300;
	line-height: $baseLineHeight;
	// min-width: 320px;
	min-width: 768px;
	min-height: 100vh;
	margin: 0 auto !important;
	color: $trueblack;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	word-wrap: break-word;
	word-break: break-all;
	box-shadow: 0 0 10px $lightgrey;
	background: $white;
	position: relative;
	-webkit-font-smoothing: antialiased;
	@include ltSM {max-width: 900px;}
	@include ltXS {max-width: 650px;}
	&.noscroll {
		height: 100vh;
		overflow: hidden;
	}
}
a {
	color: $baseFontColor;
	text-decoration: $linkDecoration;
	@include Linear;
	&:hover {
		color: $hoverColor;
		text-decoration: $hoverDecoration;
		@include Linear;
	}
}
table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	th,td {
		border: $baseBorder;
		padding: $tablePadding;
	}
}
p,div,a {
	img {
		max-width: 100%;
		height: auto;
	}
}
img {vertical-align: top;}
ul,ol {
	padding-left: 0;
	list-style: none;
	margin:0;
}
strong {font-weight: bold;}
b {font-weight: bold;}
input:focus, textarea:focus, keygen:focus, select:focus {outline-offset: -2px;}
:focus {outline: none;}
a:focus {outline: none;text-decoration: none;color: $accentFontColor;}
// ::selection {background:$accent;}
// ::-moz-selection {background:$accent;}
@include gtSM {
	a img {@include Ease;}
	a:hover img {@include hoverAction;}
}
p {margin: 0;}
//margin
@for $i from -20 through 30 {
	.mt#{5*$i} {margin-top: #{5*$i}px!important;}
}
@for $i from 0 through 30 {
	.ml#{5*$i} {margin-left: #{5*$i}px!important;}
}
@for $i from 0 through 30 {
	.mr#{5*$i} {margin-right: #{5*$i}px!important;}
}
@for $i from 0 through 30 {
	.mb#{5*$i} {margin-bottom: #{5*$i}px!important;}
}
div,
p,
span,
ul,
li,
h1,h2,h3,h4,h5,h6,
nav,
section,
:before,:after {
	// transition: 0.3s all linear;
}

@include ltXS {
	div,
	p,
	span,
	ul,
	li,
	h1,h2,h3,h4,h5,h6,
	nav,
	section,
	:before,:after {
		max-width: 100%;
	}
};

// ==================================================
//  modernizr
// ==================================================
//  object-fit
// --------------------------------------------------
.no-object-fit {
	.product_introduce {
		.thumb_list {
			li {
				overflow: hidden;
				img {
					height: auto;
				}
			}
		}
	}
}