﻿@font-face { font-family: 'Prompt-Bold'; src: url('../fonts/Prompt-Bold.woff2') format('woff2'), url('../fonts/Prompt-Bold.woff') format('woff'), url('../fonts/Prompt-Bold.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: 'Prompt-Medium'; src: url('../fonts/Prompt-Medium.woff2') format('woff2'), url('../fonts/Prompt-Medium.woff') format('woff'), url('../fonts/Prompt-Medium.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: 'Prompt-Regular'; src: url('../fonts/Prompt-Regular.woff2') format('woff2'), url('../fonts/Prompt-Regular.woff') format('woff'), url('../fonts/Prompt-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: 'Prompt'; src: url('../fonts/Prompt-Regular.woff2') format('woff2'), url('../fonts/Prompt-Regular.woff') format('woff'), url('../fonts/Prompt-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; }

body { font-family: 'Prompt',sans-serif }
form { overflow-x: hidden }
h1 { margin-top: 10px; font-family: 'Prompt-Bold'; }
h2 { margin-top: 10px; font-family: 'Prompt-Bold'; }
h3 { margin-top: 10px; font-family: 'Prompt-Bold'; }
b, strong { font-family: 'Prompt-Bold'; }
.MainContainer { padding-bottom: 70px; font-family: 'Prompt'; }
.TextArea { font-family: unset }
.container { position: relative; margin: auto; }
.close { font-size: 40px; line-height: 20px; font-weight: unset }
label.confirm-modal-body { font-size: 15px; font-weight: 400; cursor: unset; width: 100% }
label.confirm-modal-body2 { font-size: 15px; font-weight: 400; cursor: unset; margin: 12px; float: left }
.form-checkbox { margin: 12px; float: left }
p.confirm-modal-body { font-size: 18px }
.chat { font-family: Prompt }
    .chat .text2 { font-weight: 700 } 

hr { border-top: 2px solid #8c8b8b; margin-top: 40px; margin: 30px auto }
.dn { display: none }

.sticky-contact { position: fixed; bottom: 0; z-index: 100; width: 100%; left: 0; right: 0 }
    .sticky-contact .LineChat, .sticky-contact .LineChatFullWidth, .sticky-contact .PhoneCall, .sticky-contact .PhoneCallFullWidth { display: none; text-align: center; text-transform: uppercase }
    .sticky-contact .PhoneCall { background-color: #FF5E5E; width: 50%; float: left; }

    .sticky-contact .LineChat { background-color: #36b419; width: 50%; float: left; }
    .sticky-contact .fullwidth { width: 100% }
    .sticky-contact a, .sticky-contact a:hover { color: #ffffff; }
    .sticky-contact .call { background: url(../../App_Themes/Modernize/Images/button/sticky-call.svg) no-repeat left center; height: 68px; font-size: 0; display: inline-block; padding: 10px 0 10px 40px }
    .sticky-contact .chat { background: url(../../App_Themes/Modernize/Images/button/sticky-chat.svg) no-repeat left center; height: 68px; font-size: 0; display: inline-block; padding: 10px 0 10px 40px }
    .sticky-contact .text1 { clear: left; float: left; font-size: 14px; text-align: left; line-height: 15px; margin-top: 5px; }

    .sticky-contact .text2 { clear: left; float: left; font-size: 18px; text-align: left; line-height: 20px; font-weight: bold}

/* contact side button */
.sticky-side { position: fixed; bottom: 70px; right: 10px; z-index: 100; display: flex; flex-direction: column; gap: 5px; width: 45px; }
.phoneSide { display: inline-flex; }
.messengerSide { display: inline-flex; }
.lineSide { display: inline-flex; }
.facebookMessengerIcon { width: 45px; height: 45px; background-color: #0084ff; border-radius: 45px }
    .facebookMessengerIcon img { width: 45px; }
.lineSideIcon { width: 45px; height: 45px; background-color: #00b900; border-radius: 45px }
    .lineSideIcon img { width: 45px; }
.phoneSideIcon { width: 45px; height: 45px; background-color: #ff5e5e; border-radius: 45px; }
    .phoneSideIcon img { width: 45px; }

/* go top button */
.GoToTopDiv { width: 45px; height: 45px; }
.LinkToTop { display: block; border-radius: 45px; -webkit-box-shadow: 1px 1px 10px 0 rgb(180 180 180 / .8); -moz-box-shadow: 1px 1px 10px 0 rgb(180 180 180 / .8); box-shadow: 1px 1px 10px 0 rgb(180 180 180 / .8); width: 100%; height: 100%; }
    .LinkToTop img { width: 45px; }
  
[hidden] { display: none !important } 
  
input[type=date], input[type=datetime], input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], textarea { height: 34px }
.btn:active { -webkit-box-shadow: inherit; box-shadow: inherit }
.btn { border: unset; border-radius: 90px; }
.alert-success { color: #19922a; background-color: #ccf9e2; padding: 6px 25px; line-height: 38px }
.MessageSuccess { background: url(../../App_Themes/AdminBlueTheme/Images/Icon/enable-icon-button.png) no-repeat left center; padding-left: 45px; font-size: 16px; font-weight: 400 !important; color: #19922a; display: block }
.btn-success { background-color: #01b901 }
.btn-primary { background-color: #0084ff }
.btn-info { background-color: #ff721f }
    .btn-info:hover { background-color: #c95816 }
    .btn-info, .btn-info:hover, .btn-primary, .btn-primary:hover, .btn-success, .btn-success:hover { border-color: inherit }
.btn.focus, .btn:focus, .btn:hover { color: #fff }
.btn.active, .btn:active { background-image: none }
.BuyButton.btn:active { background-image: url(../../Images/SalePage/Image/icons/icon-cart.svg) !important }
.dropdown { position: inherit }

.btn-primary:hover { background-color: #0358aa }
.btn-primary:focus, .btn-success:focus { background-color: unset; border-color: unset }
.btn-success.active, .btn-success:active, .open > .dropdown-toggle.btn-success { background-color: unset; border-color: unset }
    .btn-success.active.focus, .btn-success.active:focus, .btn-success.active:hover, .btn-success:active.focus, .btn-success:active:focus, .btn-success:active:hover, .open > .dropdown-toggle.btn-success.focus, .open > .dropdown-toggle.btn-success:focus, .open > .dropdown-toggle.btn-success:hover { background-color: #a9a8a8; border-color: #a9a8a8 }
.btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover, .open > .dropdown-toggle.btn-primary.focus, .open > .dropdown-toggle.btn-primary:focus, .open > .dropdown-toggle.btn-primary:hover { background-color: #0358aa }
  
 .icon-facebook { background: url(../../Images/SalePage/Image/icons/icon-facebook.png) no-repeat center; width: 35px; height: 35px; background-size: contain; float: right; margin-right: 30px }
.icon-line { background: url(../../Images/SalePage/Image/icons/icon-line.png) no-repeat center; width: 35px; height: 35px; background-size: contain; float: right; margin-right: 30px }
.icon-phone { background: url(../../Images/SalePage/Image/icons/phone-icon.svg) no-repeat center; width: 35px; height: 35px; background-size: contain; float: right; margin-right: 30px }
.icon-text-none { background: url(../../Images/SalePage/Image/icons/icon-text-none.svg) no-repeat center; width: 100%; height: 50px; background-size: contain; float: left; clear: both; margin: 10px auto }
.icon-cart-none { background: url(../../Images/SalePage/Image/icons/icon-cart-none.svg) no-repeat center; width: 100%; height: 50px; background-size: contain; float: left; clear: both; margin: 10px auto }
.icon-image-none { background: url(../../Images/SalePage/Image/icons/icon-image-none.svg) no-repeat center; width: 100%; height: 50px; background-size: contain; float: left; clear: both; margin: 10px auto }
.icon-spacing-height { background: url(../../Images/SalePage/Image/icons/icon-spacing-height.svg) no-repeat center; width: 100%; height: 50px; background-size: contain; float: left; clear: both; margin: 10px auto }
.icon-imageandword1-none { background: url(../../Images/SalePage/Image/icons/icon-imageandword1-none.svg) no-repeat center; width: 100%; height: 50px; background-size: contain; float: left; clear: both; margin: 10px auto }
.icon-imageandword2-none { background: url(../../Images/SalePage/Image/icons/icon-imageandword2-none.svg) no-repeat center; width: 100%; height: 50px; background-size: contain; float: left; clear: both; margin: 10px auto }
.icon-vdo-none { background: url(../../Images/SalePage/Image/icons/icon-vdo-none.svg) no-repeat center; width: 100%; height: 50px; background-size: contain; float: left; clear: both; margin: 10px auto }
.icon-map-none { background: url(../../Images/SalePage/Image/icons/icon-map-none.svg) no-repeat center; width: 100%; height: 50px; background-size: contain; float: left; clear: both; margin: 10px auto }
  
.btn-primary.active, .btn-primary:active, .open > .dropdown-toggle.btn-primary { background-color: #0084ff }
.SalePageComponent .panel-product .panel-productitem { background-color: #f3f3f3 }
.btn, .btn-lg { font-family: Prompt; font-size: 25px }
.display-2, .display-3, .display-4, .normal { font-family: Prompt }
.display-1 { font-family: Prompt; font-size: 130px; font-weight: 700 }
.display-2 { font-size: 70px; font-weight: 700 }
.display-3 { font-size: 30px; font-weight: 700 }
.display-4 { font-size: 20px }
.normal { font-family: Prompt; font-size: 14px }

/* common class */
.SalePageComponent { padding: 0; position: relative; display: flex; }
.SalePageContainer { position: relative; margin: auto; display: flex; justify-content: center; }
.bg-image { background-repeat: repeat; background-position: center; background-size: cover; }

/* ---- specific class ----*/

/*-- banner --*/
.SalePageBanner { }
.BannerLink { display: block; width: 100% }
.banner-desktop { display: inline-block; width: 100% }
.banner-mobile { display: none; width: 100% }

/*-- image --*/
.SalePageImage { }
.block-image-component { display: table; margin: auto; width: auto }
.image-url-panel { float: left; clear: both; width: auto; height: auto }

/*-- text --*/
.SalePageText { }
.TextGroup { display: block; width: 100%; padding: 20px 0 }
    .TextGroup p { margin: 0; line-height: 1.42857143 }

/*-- common for image word, video word  --*/
.ImageAndWordGroup { display: flex; align-items: center; width: 100%; gap: 10px; }
.ImageAndWordGroup2 { display: flex; align-items: center; width: 100%; gap: 10px; flex-direction: row-reverse; }
.group-column { box-sizing: border-box; width: 50%; }
    .group-column.Image { min-height: 420px; display: inherit; align-items: center; justify-content: center; }
    .group-column.Word { }
    .group-column img { max-width: 100%; }
.text-container { padding: 20px; }
.ImageItem { max-width: 100%; width: auto; }

@media (max-width: 768px) {
    .ImageAndWordGroup { flex-direction: column; }
    .ImageAndWordGroup2 { flex-direction: column; }
    .group-column { display: block; width: 100%; }
        .group-column.Image { min-height: auto; padding: 20px 10px 0; }
        .group-column.Word { padding: 0 10px; }
    .text-container { padding: 20px 0; }
}

/*  button */
.btn-custom { min-width: 250px; padding: 10px 16px; margin: 20px 0 }
.btn-customtext { min-height: 55px; text-align: left; margin: 15px 0; position: relative }
    .btn-customtext.SalepageLineBtn { padding-right: 75px; padding-left: 30px }
        .btn-customtext.SalepageLineBtn::after { content: ""; background: url(../../Images/SalePage/Image/icons/icon-line.png) no-repeat; width: 35px; height: 35px; background-size: contain; position: absolute; top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; right: 28px }
    .btn-customtext.SalepageFacebookBtn { padding-right: 75px; padding-left: 30px }
        .btn-customtext.SalepageFacebookBtn::after { content: ""; background: url(../../Images/SalePage/Image/icons/icon-facebook.png) no-repeat; width: 35px; height: 35px; background-size: contain; position: absolute; top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; right: 28px }
    .btn-customtext.SalepageTelBtn { padding-right: 75px; padding-left: 30px }
        .btn-customtext.SalepageTelBtn::after { content: ""; background: url(../../Images/SalePage/Image/icons/phone-icon.svg) no-repeat; width: 35px; height: 35px; background-size: contain; position: absolute; top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; right: 28px }

/* form */ 
.SalePageFormContainer { max-width: 520px; margin: auto; padding: 20px; text-align: center; width: 100%; }
.SalePageFormGroup { margin: 10px; text-align: left }
.SalePageFormHeaderPanel { width: 100%; text-align: center }
.SalePageFormHeader { font-size: 28px; font-weight: 700 }
.SalePageFormLabel { color: #000; font-size: 18px; width: 100%; text-align: left; overflow-wrap: break-word }
.SalePageFormTextbox { width: 100% !important; border: 2px solid #a4a4a4 !important; border-radius: 8px; padding: 0 10px !important; height: 48px !important; font-size: 18px; margin-top: 10px; background-color: #fff; }
.formTextbox { width: 65% !important; float: right !important; border-color: #ccc !important; border-radius: 4px }
.panel-form { border: 1px solid #ddd; background-color: #ebf0f3; margin: 10px 2%; border-radius: 10px; width: 96%; padding: 10px }
.uxDoubleFormNotice { clear: both; color: red; line-height: 30px }
.SalePageFormMsgStatus { font-size: 20px; margin: 10px; height: 48px; line-height: 48px; border-radius: 8px }
.SalePageCommonValidatorText { font-size: 14px; color: red }
.divWaiting { position: fixed; background: rgb(0 0 0 / .9); z-index: 2147483647 !important; overflow: hidden; text-align: center; top: 0; left: 0; height: 100%; width: 100%; color: #fff; font-size: 18px; line-height: 20px; -webkit-backface-visibility: hidden }
.lblWait { text-align: center; position: fixed; top: 50%; left: 50%; margin-top: -50px; margin-left: -70px }
.imgWait { position: fixed; top: 50%; left: 50%; margin-top: -20px; margin-left: -70px }

.SalePageFormLabelDateHeader { font-size: 20px; font-family: Prompt-Bold; background: url(../../Images/SalePage/Image/icons/icon-carlendar.png) no-repeat left; padding-left: 40px }
.DateSelect { text-align: center }
.SalePageFormRadioList { margin: 10px 0; list-style-type: none; padding: 0; }
    .SalePageFormRadioList li { border: 2px solid #a4a4a4; border-radius: 8px; margin: 10px auto; padding: 10px 15px; background-color: #fff; } 
    .SalePageFormRadioList Label { font-size: 18px; font-weight: lighter; margin: 5px auto;  } 
.SalePageFormRadioList input[type=radio] { display: none }
    .SalePageFormRadioList input[type=radio] + label { background: url(../../Images/SalePage/Image/icons/radio-btn.png) no-repeat left center/24px; height: 24px; padding-left: 35px }
    .SalePageFormRadioList input[type=radio]:checked + label { background: url(../../Images/SalePage/Image/icons/radio-btn-checked.png) no-repeat left center/24px; height: 24px; line-height: 30px; padding-left: 35px }

/* product */
.SalePageProduct { background-color: #f3f3f3; }

/* multiple product */
.SalePageMultipleProduct { }
.MultipleProductContainer { margin: 20px 0; width: 100% } 
.ProductItemDivOne { width: 100%; } 

/* product item */
.product-name { font-size: 40px; font-weight: 700 }
.productitem-name { font-family: Prompt-Medium; font-size: 26px; line-height: 30px; text-overflow: ellipsis; padding-top: 8px }
.product-desc { font-size: 20px }
.productitem-desc { text-overflow: ellipsis; display: block; font-size: 15px; overflow: hidden; line-height: 22px; max-height: 66px; width: 90%; margin: 20px auto }
.product-price-no .small { text-decoration: line-through; font-family: Prompt,sans-serif; font-size: 40px }
.product-save { font-family: Prompt-Regular; font-size: 20px }
 
.center-block { margin: auto }
.panel-product { padding: 20px 50px 20px 50px }
.btn-secondary { background-color: #4d4b4c }
.product-price-no .small, .product-save .small { font-weight: 400; font-size: 32px; vertical-align: middle }
.product-save .small, .productitem-price-no .small { font-weight: 400; font-size: 24px; vertical-align: bottom }
.ProductItemPriceText { color: red; font-family: Prompt-Bold; font-size: 30px; vertical-align: middle; line-height: 32px }
.ProductItemSaleText { color: red; font-family: Prompt-Medium; font-size: 20px; vertical-align: middle; line-height: 20px }
.ProductItemSalePercentText { font-size: 24px; font-family: Prompt-Bold; vertical-align: middle; color: red; line-height: 28px }
.ProductItemRetailPriceText { font-size: 20px; text-decoration: line-through }
.float-left-1 { float: left }
.float-right-1 { float: right }

.ProductItemCallForPrice { font-size: 18px }
.CallForPrice { padding: 40px 0 30px }
    .CallForPrice p { font-size: 25px; font-weight: 700 }

.ProductItemBuyButton { color: #fff; width: 70%; margin-top: 30px; margin-bottom: 30px; height: 60px; vertical-align: middle; line-height: 40px; background-color: #000; white-space: nowrap } 
Input.BuyButton { font-size: 35px; text-align: left; padding-left: 65px }
a.BuyButton { font-size: 35px; text-align: left; padding-left: 65px }
.BuyButton { width: 340px; height: 70px; background: url(../../Images/SalePage/Image/icons/icon-cart.svg) no-repeat center; background-size: 40px; background-position-x: 250px; padding-left: 50px; padding-right: 50px; padding-top: 10px; padding-bottom: 10px; margin: 70px auto; color: #fff }
    .BuyButton:hover { color: #fff; background-color: #f0f8ff }
.product-desc { margin-top: 30px }
.PriceText { color: red; font-family: Prompt,sans-serif; font-size: 50px; font-weight: 700; vertical-align: bottom } 

.panel-productitem { padding: 10px 0 }
.Col-Image { width: 100% }
    .Col-Image .ProductItemSubBlock { width: 100% }
.Col-Desc { width: 100%; padding: 20px 0 }
.productitem-col-single { float: left; width: 50% }
.productitem-col-multiple { float: left; width: 100% }

.ProductItemDivTwo .panel-productitem { display: table; width: 100% }
.ProductItemDivTwo .ProductItemSaleText { font-size: 18px; line-height: 18px }
.ProductItemDivTwo .ProductItemSalePercentText { font-size: 22px; line-height: 22px }
.ProductItemDivTwo .ProductItemRetailPriceText { font-size: 18px }
.ProductItemDivTwo .ProductItemPriceText { font-size: 28px }
.ProductItemDivThree .panel-productitem { padding: 0; display: table; width: 100% }
.ProductItemDivThree .Col-Image { display: table-row }
    .ProductItemDivThree .Col-Image .ProductItemSubBlock.text-center { display: table-cell; vertical-align: middle; text-align: center;  }

/* Hot Deal */
.ProductHotDeal { margin-bottom: 10px; position: relative }
    .ProductHotDeal .CenterBlockTopImgLeft { display: none }
    .ProductHotDeal .CenterBlockTopImgRight { display: none }
    .ProductHotDeal .CenterBlockLeft { margin-top: 20px }
    .ProductHotDeal .CenterBlockRight { margin-top: 20px }
.ProductHotDealDatalist { width: 102%; padding: 0 }
    .ProductHotDealDatalist .CommonProductItemStyle { position: relative; max-height: none }
        .ProductHotDealDatalist .CommonProductItemStyle .CommonProductImage { width: 100%; max-height: 255px; padding: 0; margin-bottom: 5px; z-index: 0; position: relative; overflow: hidden }
        .ProductHotDealDatalist .CommonProductItemStyle .CommonProductInfo { display: table; width: 100% }
.CommonProductInfo { position: relative }
.ProductHotDealDatalist { position: relative }
.ProductHotDealDetails { padding-bottom: 20px }
    .ProductHotDealDetails .CommonProductName { text-align: center; font-size: 24px; display: table }
        .ProductHotDealDetails .CommonProductName .CommonProductNameLink { display: table-cell; vertical-align: middle }
    .ProductHotDealDetails .ProductHotDealPriceValue { font-size: 20px; color: red }
    .ProductHotDealDetails .ProductHotDealCountdown { float: right; text-align: center; padding: 10px 0; display: table-cell; height: 52px; width: 17.5%; line-height: 1.1; font-size: 16px; }
    .ProductHotDealDetails .HotDealAddCartButtonDiv { float: right; text-align: center; padding: 5px; margin-top: 5px; width: 100% }
        .ProductHotDealDetails .HotDealAddCartButtonDiv .AddCartButton { display: table; margin: 0 auto }
    .ProductHotDealDetails .spanHotDealCountText { font-size: 12px }
    .ProductHotDealDetails .CommonProductDiscountPanel { position: absolute; top: 0; left: 0; height: 52px; text-align: center; outline: 1px solid #fff; outline-offset: -4px; margin: 0; width: 30% }
        .ProductHotDealDetails .CommonProductDiscountPanel .PercentLabel { display: block; margin-top: 8px; line-height: 15px; width: 100%; }
        .ProductHotDealDetails .CommonProductDiscountPanel .PercentValue { display: block; font-size: 20px; font-family: Prompt-Bold; width: 100%; line-height: 25px } 
.ProductHotDealDatalist .CommonProductPriceDetails { width: 100% }
    .ProductHotDealDatalist .CommonProductPriceDetails .RetailPricePanel { float: unset; text-align: center }
    .ProductHotDealDatalist .CommonProductPriceDetails .OurPricePanel { float: unset; text-align: center }
        .ProductHotDealDatalist .CommonProductPriceDetails .OurPricePanel .OurPriceValue { width: 100% }
.ProductHotDealCountdownGroup { display: table; width: 100%; height: 100%; float: left; background-color: red }
.FlashSale { float: left; width: 90%; clear: left; margin: 10px 0; width: 100% }
    .FlashSale .row { width: 300px !important; margin: 0 auto !important; background-color: #806ab0; float: left }
    .FlashSale h1 { text-align: center; font-size: 30px; font-weight: 700; margin-top: 50px; margin-bottom: 25px }
    .FlashSale ul { text-align: center; margin: 0 auto; display: table; vertical-align: middle; width: 100% }
        .FlashSale ul .LeftTime { font-size: 20px; border: solid 1px; margin-top: 7px; width: 273px }
    .FlashSale li { display: inline-block; font-size: 10px; list-style-type: none; padding: 10px 17px 10px; color: #fff; line-height: 1 }
        .FlashSale li span { display: block; font-size: 18px; font-weight: 700 }
.ProductHotDealCountdownBar { margin-bottom: 10px }
    .ProductHotDealCountdownBar::after { content: ""; display: block; clear: both }

/* Cookie Policy Box */
.cookie-box { background: #fff; border-radius: 2px; box-shadow: 0 17px 17px rgb(0 0 0 / 15%),0 27px 55px rgb(0 0 0 / 30%); font-size: 14px; margin: 24px; max-height: calc(100% - 48px); max-width: calc(100% - 48px); overflow: auto; padding: 8px; position: fixed; z-index: 99999; right: 60px; bottom: 30px; font-family: Prompt-Regular; font-weight: 400; line-height: 1.5 }
.cookie-box-contents { color: #757575; padding: 16px }
.cookie-box-buttons { text-align: right }
.cookie-button { color: #454545; padding: 8px; margin: 0 8px; border: 0; border-radius: 2px; display: inline-block; font-weight: 700; font-size: 16px; min-width: 56px; outline: 0; overflow: hidden; text-align: center; text-decoration: none; text-transform: uppercase; transition: background-color .2s; vertical-align: middle; white-space: nowrap }
 
@media only screen and (min-width:1190px) {
    .container { width: auto; max-width: 1300px; padding: 0 10px }
    .SalePageContainer { width: 100%; max-width: 1300px; padding: 0 10px }
    h1 { font-size: 54px }
    h2 { font-size: 48px }
    h3 { font-size: 36px }

    .ProductItemDivTwo .Col-Image .ProductItemSubBlock { height: 300px; }
    .ProductItemDivThree .Col-Image .ProductItemSubBlock  { height: 400px; }  
}

@media only screen and (max-width:1189px) {
    .container { width: 100%; }
    .SalePageContainer { width: 100%; padding: 0 15px }
    .TextPanel .Text-TextItem { padding: 0 15px }

    .ProductItemDivTwo .Col-Image .ProductItemSubBlock  { height: 200px; }
    .ProductItemDivThree .Col-Image .ProductItemSubBlock { height: 300px; }  
}

@media only screen and (max-width:979px) {
    h1 { font-size: 48px }
    h2 { font-size: 42px }
    h3 { font-size: 30px }
    .panel-product { padding: inherit }
    .display-1 { font-size: 100px }
    .ProductItemSaleText { font-size: 18px }
    .ProductItemSalePercentText { font-size: 26px }
    .ProductItemSubBlock { padding-top: 10px }
    .ProductItemCallForPrice { line-height: 40px }
    .productitem-desc { margin: auto 20px }
    .ProductItemBuyButton { height: 45px; font-size: 18px } 
    .ProductItemDivOne .panel-productitem { display: table; width: 100% } 
    .ProductItemDivOne .product-image { max-height: 420px } 
    .ProductItemDivTwo .panel-productitem { display: table; width: 100% }  
    .ProductItemDivTwo .ProductItemSalePercentText { font-size: 26px; line-height: 26px; font-weight: 700 }
    .ProductItemDivTwo .productitem-name { font-size: 22px; line-height: 24px } 
    .ProductItemDivTwo .ProductItemPriceText { font-size: 22px }
    .ProductItemDivTwo .Col-Image .ProductItemSubBlock { height: 220px; }

    .ProductItemBuyButton { color: #fff;  margin-top: 10px; margin-bottom: 10px; height: 50px; vertical-align: middle; line-height: 30px; background-color: #000; white-space: nowrap; }
    .ProductItemDivThree .panel-productitem { padding: 10px 0 }
    .ProductItemDivThree .Col-Image .ProductItemSubBlock { height: 250px; }
    .ProductItemDivThree .productitem-name { font-size: 22px; line-height: 24px}
    .ProductItemDivThree .ProductItemPriceText { font-size: 22px; }
}

@media only screen and (min-width: 769px) {
    .MultipleProductContainer { margin: 20px 0; display: flex; gap: 15px; }
    .ProductItemDivOne { box-sizing: border-box }
    .ProductItemDivTwo { width: 50%; box-sizing: border-box }
    .ProductItemDivThree { width: 33.33%; box-sizing: border-box } 
    .product-image { width: 100%; height: 100%; object-fit: cover; } 
    .ProductItemDivOne .Col-Image { width: 50%; padding-right: 10px; display: inline-block; vertical-align: middle }
    .ProductItemDivOne .Col-Desc { width: 49%; display: inline-block; vertical-align: middle; padding: 20px 0 }
    .ProductItemDivTwo .Col-Image { width: 50%; padding-right: 10px; display: table-cell; vertical-align: middle }
    .ProductItemDivTwo .Col-Desc { width: 49%; display: table-cell; vertical-align: top; padding: 20px 0 }
}
@media only screen and (max-width:767px) {
 
    h1 { font-size: 40px }
    h2 { font-size: 32px }
    h3 { font-size: 28px }

    .MultipleProductContainer { display: block; }
    .PriceText { font-size: 35px }
    .display-1 { font-size: 70px }
    .ProductItemDiv { width: 100%; display: block }
     .productitem-price-no .small { font-size: 18px }
    .productitem-col-single { float: left; width: 100% }
    .productitem-desc { max-height: 80px }
    .ProductItemBuyButton { width: 50% } 
    .product-image { max-width: 100%; max-height: 360px; } 

    .ProductItemDivOne { width: 100%; display: block }
        .ProductItemDivOne .panel-productitem { display: table; width: 100% }
        .ProductItemDivOne .Col-Desc, .ProductItemDivOne .Col-Image { display: table-row }
        .ProductItemDivOne .Col-Image { width: 100%; padding-bottom: 10px }
        .ProductItemDivOne .Col-Desc { width: 100% }
    .ProductItemDivTwo { width: 100%; display: block }
        .ProductItemDivTwo .panel-productitem { display: table; width: 100% }
        .ProductItemDivTwo .Col-Desc, .ProductItemDivTwo .Col-Image { display: table-row }
        .ProductItemDivTwo .Col-Image { width: 100%; padding-bottom: 10px } 
            .ProductItemDivTwo .Col-Image .ProductItemSubBlock { height: auto; }
    .ProductItemDivThree { width: 100%; display: block }
        .ProductItemDivThree .Col-Image .ProductItemSubBlock { height: auto; } 
    .nav > li > a { padding: 8px 10px }
    span[style="font-size:12px"] { font-size: 12px !important }
    span[style="font-size:14px"] { font-size: 13px !important }
    span[style="font-size:16px"] { font-size: 14px !important }
    span[style="font-size:18px"] { font-size: 16px !important }
    span[style="font-size:20px"] { font-size: 18px !important }
    span[style="font-size:22px"] { font-size: 20px !important }
    span[style="font-size:24px"] { font-size: 22px !important }
    span[style="font-size:26px"] { font-size: 24px !important }
    span[style="font-size:28px"] { font-size: 26px !important }
    span[style="font-size:36px"] { font-size: 32px !important }
    span[style="font-size:48px"] { font-size: 40px !important }
    span[style="font-size:72px"] { font-size: 52px !important }
    .ImageAndWord-Background { background-size: cover }
    .ImageAndWordPanel.Active .ImageAndWord-Left, .ImageAndWordPanel.Active .ImageAndWord-Right { display: table; height: auto; vertical-align: initial; width: 100% }
    .ImageAndWordPanel.Active .ImageAndWord-Left { text-align: center }
    .ImageAndWordPanel.Active .ImageAndWord-Right { padding: 30px 20px 10px }
    .ImageAndWordPanel.Active .ImageAndWord2-Left, .ImageAndWordPanel.Active .ImageAndWord2-Right { display: table; height: auto; vertical-align: initial; width: 100% }
    .ImageAndWordPanel.Active .ImageAndWord2-Left { padding: 30px 20px 10px }
    .ImageAndWordPanel.Active .ImageAndWord2-Right { text-align: center }
    .TextPanel .Text-Background { background-size: cover } 
    .btn-customtext.SalepageFacebookBtn, .btn-customtext.SalepageLineBtn, .btn-customtext.SalepageTelBtn { padding-left: 20px; padding-right: 65px }
        .btn-customtext.SalepageFacebookBtn::after, .btn-customtext.SalepageLineBtn::after, .btn-customtext.SalepageTelBtn::after { right: 18px }
    .phoneSideIcon { display: block }
}

@media only screen and (max-width:600px) {
 
    .ProductItemBuyButton { width: 70% }
    .SalePageFormRadioList Label { font-size: 16px }
    .SalePageFormLabelDateHeader { font-size: 18px; background-size: auto 28px; padding-left: 35px }
}

@media only screen and (max-width:479px) {
    h1 { font-size: 28px }
    h2 { font-size: 24px }
    h3 { font-size: 22px }

    .banner-desktop { display: none }
    .banner-mobile { display: inline-block }
    .display-1 { font-size: 40px }
    .PriceText { font-size: 27px }
    .icon-facebook, .icon-line, .icon-phone { margin-right: 10px; width: 25px; height: 25px }
    .btn-contact { padding-left: 23px }
    .btn, .btn-lg { font-size: 20px }
    .title-welcome, .title-welcome-text { width: 100%; float: left; clear: both }
    .BuyButton, .btn-contact { width: 200px; text-align: center }
    .panel-product { margin: 0 20px }
    .small { font-size: 16px }
    .product-price-no .small, .product-save .small { font-size: 18px; font-weight: 400 }
    .ProductItemBuyButton { width: 70% }
    Input.BuyButton { font-size: 20px; text-align: center; padding-left: 25px; margin: 30px auto }
    a.BuyButton { font-size: 20px; text-align: center; padding-left: 25px; margin: 30px auto }
    .BuyButton { background-size: 25px; background-position-x: 145px; height: inherit }
     .CallForPrice { padding: 30px 0 }
        .CallForPrice p { font-size: 22px }

   
    span[style="font-size:12px"] { font-size: 9px !important }
    span[style="font-size:14px"] { font-size: 10px !important }
    span[style="font-size:16px"] { font-size: 11px !important }
    span[style="font-size:18px"] { font-size: 12px !important }
    span[style="font-size:20px"] { font-size: 14px !important }
    span[style="font-size:22px"] { font-size: 16px !important }
    span[style="font-size:24px"] { font-size: 18px !important }
    span[style="font-size:26px"] { font-size: 20px !important }
    span[style="font-size:28px"] { font-size: 22px !important }
    span[style="font-size:36px"] { font-size: 25px !important }
    span[style="font-size:48px"] { font-size: 29px !important }
    span[style="font-size:72px"] { font-size: 34px !important }

    .ImageAndWordPanel.Active .ImageAndWordContainer { display: block }
    .ImageAndWordGroup { display: block }
    .ImageAndWord-Background { background-size: cover }
    .ImageAndWordPanel.Active .ImageAndWord-Left, .ImageAndWordPanel.Active .ImageAndWord-Right { display: table; height: auto; vertical-align: initial; width: 100% }
    .ImageAndWordPanel.Active .ImageAndWord-Left { text-align: center }
    .ImageAndWordPanel.Active .ImageAndWord-Right { padding: 20px 10px; display: block; word-wrap: break-word }
    .ImageAndWordPanel.Active .ImageAndWord2-Left, .ImageAndWordPanel.Active .ImageAndWord2-Right { display: table; height: auto; vertical-align: initial; width: 100% }
    .ImageAndWordPanel.Active .ImageAndWord2-Left { padding: 20px 10px; display: block; word-wrap: break-word }
    .ImageAndWordPanel.Active .ImageAndWord2-Right { text-align: center }
    .TextPanel.Active .ImageAndWordContainer { display: block }
    .TextPanel .Text-Background { background-size: cover }
    .TextPanel .TextGroup { display: block }
    .TextPanel .Text-TextItem { padding: 20px 10px; display: block; word-wrap: break-word }
     
    .btn-customtext { min-height: 46px }
        .btn-customtext.SalepageFacebookBtn, .btn-customtext.SalepageLineBtn, .btn-customtext.SalepageTelBtn { padding-left: 15px; padding-right: 48px; text-align: center; font-size: 16px; min-height: unset; white-space: normal }
            .btn-customtext.SalepageFacebookBtn::after, .btn-customtext.SalepageLineBtn::after, .btn-customtext.SalepageTelBtn::after { right: 15px; width: 25px; height: 25px }
    .SalepageCustomBtn { font-size: 16px }
} 
