.product-tile:hover
{
	box-shadow:none !important;
}
.product-quickshop .quickview {
  visibility: hidden;
  line-height: 1px;
}
.product-quickshop .quickview:after {
  content:'ดูเพิ่มเติม'; 
  visibility: visible;
  display: block;
}
.swatchesCircle
{
	display:none;
}
.product-tile .product-quickshop
{
	border: 1px solid #CFCAC9;
	border-radius:5px;
	line-height: 1;
	background-color:white;
}
.product-tile .product-quickshop .quickview
{
	text-transform: none;
    font-size: 14px;
    font-weight: 300;
	color: #333333;
	padding: 18px 26px 22px;
}
.product-tile .product-quickshop .quickview:hover
{
	color:#8C0B26;
}
.product-tile .product-quickshop:hover a
{
	color:#8C0B26;
}


.pc-ankor-fix {
    transform: translate(0px, -110px);
    position: absolute;
}
.mixologie-hero
{
	background:#f8efe9 url(../mixologie/hero.jpg?$staticlink$) no-repeat;
	display:flex;
	align-items:center;
	justify-content:space-evenly;
	padding: 70px 0;
}
.mh-logo
{
	max-width:560px;
	text-align:right;
}
.mh-logo h1
{
	display:none;
}
.mh-logo img
{
	margin:0 0 10px;
	width:100%;
}
.mhl-header
{
	font-size:26px;
	line-height:1.2;
	font-family: gotham ssm book a,gotham ssm book b,Gotham Pro,Helvetica,Arial,sans-serif;
	font-weight:600;
	margin:0;
}
.mhl-subheader
{
	font-size:28px;
	line-height:1.2;
	font-family: eb garamond,serif;
	margin:0;
	cursor: default;
}
.mh-copy
{
	max-width:500px;
	text-align:left;
}
.regular-text
{
	font-family: gotham ssm book a,gotham ssm book b,Gotham Pro,Helvetica,Arial,sans-serif;
    font-size: 16px;
	line-height:1.2;
}
.divider
{
	width:220px;
	border-bottom:1px solid black;
	margin-top:20px;
}
.category-name
{
	color:#8C0B26;
	font-size:20px;
	text-transform:uppercase;
	font-weight:600;
	position: relative;
	z-index:1;
	max-width:500px;
	margin:40px auto;
	text-align:center;
}
.cn-text
{
	background:white;
	padding:0 15px;
}
.category-name::before
{
	content: "";
    display: inline-block;
    position: absolute;
	border-top: 1px solid #8C0B26;
    margin: 0 auto;
    top: 12px;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    z-index: -1;
}
.mixologie-menu
{
	display:flex;
	justify-content:space-evenly;
	align-items:center;
	max-width: 590px;
    margin: 0 auto;
}
.mixologie-menu-btn
{
	font-family: gotham ssm medium a,gotham ssm medium b,Gotham Pro,Helvetica,Arial,sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    color: #000;
    text-decoration: none;
    position: relative;
    text-align: center;
	line-height: 47px;
    -webkit-transition: all ease-in-out .2s;
    transition: all ease-in-out .2s;
    border: 1px solid #CCCCCC;
	height:46px;
	width:180px;
	margin-bottom:10px;
	background:#fff;
	border-radius:50px;
}
.mixologie-menu-btn:hover
{
	border: 1px solid #8C0B26;
	color: #8C0B26;
}
.category-btn
{
	font-family: "Gotham SSm medium A","Gotham SSm medium B",Helvetica,Arial,sans-serif;
    font-size: 14px;
    text-transform: none;
    color: #333333;
    text-decoration: none;
    position: relative;
    text-align: center;
	line-height: 39px;
    -webkit-transition: all ease-in-out .2s;
    transition: all ease-in-out .2s;
    border: 1px solid #CFCAC9;
	height:42px;
	width: fit-content;
	min-width: 190px;
	margin-bottom:10px;
	background:white;
	border-radius:5px;
	font-weight: 300;
	display: block;
    margin: 0 auto;
}
.category-btn span {
	padding:0 20px;
}
.category-btn:hover
{
	color:#8C0B26;
}
.mix-menu-selected
{
	cursor:default;
	border: 1px solid #8C0B26;
	color: #8C0B26;
}
.pink
{
	background:#FFF7F7;
}
.yellow
{
	background:#FFFAF6;
}
.red
{
	background:#FFF7F7;
}
.nude
{
	background:#FAF4EF;
}
.mix-container
{
	text-align:center;
	max-width:1170px;
	margin:60px auto 0;
}
.mix-name
{
	font-family: gotham ssm medium a,gotham ssm medium b,Gotham Pro,Helvetica,Arial,sans-serif;
	font-weight:600;
	font-size:57px;
	line-height:1.2;
	transform: translate(0px, -55px);
	margin-bottom: -40px;
	cursor: default;
	margin-top:80px;
}
.mix-name span
{
	font-family: eb garamond,serif;
	font-weight:300;
	font-size:71px;
}
.mix-description
{
	display:flex;
	align-items:flex-start;
	justify-content:center;
	margin-top: 30px;
	cursor: default;
}
.mix-texture
{
	max-width:395px;
}
.mix-texture img
{
	width:100%;
}
.mix-quote
{
	font-family: gotham ssm book a,gotham ssm book b,Gotham Pro,Helvetica,Arial,sans-serif;
	font-size:14px;
	margin: 5px 0 20px;
}
.mix-quote span
{
	font-family: eb garamond,serif;
}
.quote-larger-fotn-size
{
	font-size:25px;
}
.mix-texture p
{
	max-width:355px;
}
.mix-author
{
	font-family: gotham ssm medium a,gotham ssm medium b,Gotham Pro,Helvetica,Arial,sans-serif;
	font-size:14px;
	text-align:center;
	font-weight:600;
	margin: 0;
}
.mix-country
{
	font-family: gotham ssm book a,gotham ssm book b,Gotham Pro,Helvetica,Arial,sans-serif;
	font-size:12px;
	text-align:center;
	margin: 10px 0 0;
}
.how-to-apply
{
	font-family: gotham ssm medium a,gotham ssm medium b,Gotham Pro,Helvetica,Arial,sans-serif;
	font-size:18px;
	margin:0;
}
.mix-main-image
{
	max-width: 350px;
	margin-top:20px;
	z-index: 2;
}
.mix-right-col
{
	margin-top:40px;
	    display: flex;
    flex-direction: column;
    align-items: flex-end;
	transform: translate(-20px, 0px);
    z-index: 1;
}
.mix-left-col
{
	transform: translate(20px, 0px);
    z-index: 1;
}

.mix-products-grid
{
	display:flex;
	justify-content:space-between;
	align-items: stretch;
	max-width: 530px;
	margin: 10px auto 0;
    padding-bottom: 40px;
}
.first-product, .second-product
{
	width:48%;
	display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
}
.one-product
{
	width:100%;
	margin-top: 10px;
}
.products-name
{
	font-size:14px;
	line-height:1.3;
	cursor: default;
}
.products-price
{
	font-size:14px;
	font-weight:600;
	margin: 10px 0 20px;
}
.product-tile
{
	margin:0 auto;
	border:none;
}
.product-tile .product-quickshop
{
	display:block;
	font-weight:600;
	letter-spacing:0;
}
.zero-padding
{
	padding:0;
}
.second-and-third-products
{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: 1fr;
	grid-column-gap: 0px;
	grid-row-gap: 0px;
	margin-top:50px;
}
.consultation-image
{
	width:100%;
	max-width:625px;
}
.consultation-block-copy
{
	display:flex;
	flex-direction:column;
	justify-content: center;
	padding-left: 40px;
}
.consultation-block-copy > a.perfect-couple-menu-btn
{
	margin: 10px 0 0;
}
.consultation-title
{
	font-size: 45px;
    font-weight: lighter;
    line-height: 1em;
    font-family: eb garamond,serif;
    margin: 0 !important;
    margin-bottom: 5px !important;
}
.perfect-couple-menu-btn
{
	font-family: gotham ssm medium a,gotham ssm medium b,Helvetica,Arial,sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    color: white;
    text-decoration: none;
    position: relative;
    text-align: center;
    line-height: 47px;
    -webkit-transition: all ease-in-out .2s;
    transition: all ease-in-out .2s;
    border: 2px solid #000;
    background-color: #000;
    height: 46px;
    width: 200px;
    display: block;
    margin: 0 auto;
	border-radius:5px;
}
.perfect-couple-menu-btn:hover
{
	color:white;
	opacity:0.7;
}
.pc-hide
{
	display:none;
}
.align-center
{
	text-align:center;
}
.oils-and-masks
{
	display: flex;
	align-items:flex-start;
	justify-content:space-evenly;
	margin-bottom: 10px;
}
.oils-and-masks div
{
	max-width:350px;
}
.oils-mask-row-width
{
	max-width: 80%;
}
.products-name a
{
	border-bottom:1px solid #00000045;
}
.plus-symbol
{
	font-size:16px;
	line-height: 2;
}


@media screen and (max-width:1100px)
{
	.mh-logo, .mh-copy
	{
		max-width:45%;
	}
	.mhl-header
	{
		font-size: 20px;
	}
	.mhl-subheader
	{
		font-size: 23px;
		padding: 0 20px;
	}
	.mixologie-hero
	{
		background-position-x: -100px;
	}
	.mix-texture p
	{
		max-width: 300px;
	}
	.oils-mask-row-width
	{
		max-width: 100%;
	}
}
@media screen and (max-width:1023px)
{
	.pc-ankor-fix {
		transform: translate(0px, -80px);
		position: absolute;
	}
}
@media screen and (max-width:800px)
{
	.mhl-header
	{
		font-size: 16px;
	}
	.mhl-subheader
	{
		font-size: 20px;
	}
	.mixologie-hero
	{
		background-position-x: -170px;
	}
	.regular-text
	{
		font-size:14px;
	}
	.mix-main-image
	{
		max-width: 300px;
	}
	.mix-texture p
	{
		max-width: 200px;
	}
	.second-and-third-products
	{
		grid-template-columns: repeat(1, 1fr);
		grid-auto-rows: minmax(min-content, max-content);
	}
	.consultation-image
	{
		max-width: 100%;
	}
	.mix-name
	{
		font-size: 47px;
	}
	.mix-name span
	{
		font-size: 58px;
	}
	.mix-name
	{
		transform: translate(0px, -43px);
	}
	.consultation-block-copy
	{
		padding-top:20px;
	}
	.product-tile .product-quickshop .quickview
	{
		padding: 18px 0px 22px;
	}
	.category-btn
	{
		min-width:unset;
		max-width:190px;
		width: 100%;
	}
	.category-btn span
	{
	padding:0;
	}
}
@media screen and (max-width:750px)
{
	.mob-hide
	{
		display:none;
	}
	.pc-hide
	{
		display:block;
	}
	.mixologie-hero
	{
		flex-direction: column;
		background:#f8efe9 url(../mixologie/hero-mob.jpg?$staticlink$) no-repeat;
		background-size: cover;
		padding: 90px 0 50px;
	}
	.mh-logo, .mh-copy
	{
		max-width: 90%;
	}
	.mh-logo
	{
		padding-bottom: 90px;
	}
	.mh-copy
	{
		background: #f8ede7;
	}
	.mix-name
	{
		font-size: 30px;
		transform: translate(0px, -20px);
		margin-bottom: 0px;
		margin-top:0;
	}
	.mix-name span
	{
		font-size: 36px;
		line-height: 0;
	}
	.mix-container
	{
		margin: 40px auto 50px;
	}
	.mixologie-menu-btn
	{
		width: 31%;
	}
	.mixologie-menu
	{
		max-width: 95%;
	}
	.category-name
	{
		font-size: 16px;
		max-width: 90%;
		margin: 30px auto;
	}
	.category-name::before
	{
		top: 8px;
	}
	.consultation-block-copy
	{
		padding: 20px;
	}
	.consultation-title
	{
		font-size: 35px;
	}
	.products-name
	{
		font-size: 12px;
	}
	.mix-description
	{
		flex-direction: column;
		align-items: center;
		margin-top: 10px;
	}
	.mix-left-col
	{
		transform: none;
		width: 95%;
	}
	.mix-texture p
	{
		max-width: 100%;
	}
	.mix-country
	{
		margin: 10px 0 30px;
	}
	.mix-right-col
	{
		margin-top: 30px;
		transform: none;
		width: 95%;
	}
	.mix-main-image
	{
		margin-top:0;
	}
	.mix-products-grid
	{
		max-width: 95%;
	}
	.oils-and-masks
	{
		flex-direction: column;
		max-width: 70%;
		margin: 0 auto 15px;
	}
	.oils-and-masks div
	{
		margin: 10px 0 0;
	}
}
@media screen and (max-width:373px)
{
	.mhl-header
	{
		font-size: 15px;
	}
	.mhl-subheader
	{
		font-size: 18px;
	}
	.consultation-title 
	{
		font-size: 30px;
	}
}
@media screen and (max-width:330px)
{
	.mhl-header
	{
		font-size:13px;
	}
	.mhl-subheader
	{
		font-size:16px;
	}
	.mix-container .mhl-subheader
	{
		font-size: 19px;
	}
}