﻿@media only screen and (min-width: 1190px) /*Screen width larger than 1190px  */
{
    .container { width: auto; max-width: 1290px; }
    h1 { font-size: 54px; }
    h2 { font-size: 48px; }
    h3 { font-size: 34px; }
}

@media only screen and (max-width: 1189px) /*Screen width 980-1189 px */
{
    .container { width: 100%; }
    .TextPanel .Text-TextItem { padding: 0 15px; }
}

@media only screen and (max-width: 979px) /*Screen width 768-979 px */
{
    h1 { font-size: 32px; }
    h2 { font-size: 26px; }
    h3 { font-size: 20px; }

    .container { width: 100%; }
    .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; }

    .Col-Image .ProductItemSubBlock { padding: 15px 0 25px 0; }

    .ProductItemDivOne .panel-productitem { display: table; width: 100%; }
    .ProductItemDivOne .Col-Image { width: 49%; display: table-cell; vertical-align: middle; }
    .ProductItemDivOne .product-image { max-height: 420px; }
    .ProductItemDivOne .Col-Desc { width: 49%; display: table-cell; vertical-align: middle; margin: auto; max-height: 420px; }

    .ProductItemDivTwo .panel-productitem { display: table; width: 100%; }
    .ProductItemDivTwo .Col-Image, .ProductItemDivTwo .Col-Desc { width: 49%; display: table-cell; }
    .ProductItemDivTwo .Col-Image { vertical-align: middle; }
    .ProductItemDivTwo .product-image { max-height: 400px; object-fit: contain; }
    .ProductItemDivTwo .Col-Desc { vertical-align: top; margin: auto; max-height: 260px; }
    .ProductItemDivTwo .ProductItemSalePercentText { font-size: 26px; line-height: 26px; font-weight: bold; }
    .ProductItemDivTwo .productitem-name { font-size: 18px; font-weight: bold; text-overflow: ellipsis; overflow: hidden; max-height: 48px; line-height: 22px !important; }
    .ProductItemDivTwo .ProductItemRetailPriceText { font-size: 24px; }
    .ProductItemDivTwo .ProductItemPriceText { font-size: 30px; }
    .ProductItemBuyButton { color: white; width: 70%; margin-top: 30px; margin-bottom: 30px; height: 60px; vertical-align: middle; line-height: 40px; background-color: black; white-space: nowrap; }

    .ProductItemDivThree { }
        .ProductItemDivThree .panel-productitem { padding: 10px 0; }
        .ProductItemDivThree .Col-Image { height: unset; }
        .ProductItemDivThree .product-image { object-fit: contain; }
        .ProductItemDivThree .Col-Image .ProductItemSubBlock.text-center { height: 350px; }

    .SalePageFormContainer { width: 75%;}
}

@media only screen and (max-width: 767px) /*Screen width 480-767 px */
{
    h1 { font-size: 20px; }
    h2 { font-size: 16px; }
    h3 { font-size: 13px; }
    .PriceText { font-size: 35px; }
    .display-1 { font-size: 70px; }
    .ProductItemDiv { width: 100%; display: block; }
    .container { width: 100%; }
    .edit-link, .edit-preview, .edit-property { margin: 15px 5px; width: 140px; height: 45px; padding: 7px 15px; }
    .productitem-price-no .small { font-size: 18px; }
    .productitem-col-single { float: left; width: 100%; }
    .productitem-desc { max-height: 80px; }
    .ProductItemBuyButton { width: 50%; }

    .ProductItemDivOne { width: 100%; display: block; }
        .ProductItemDivOne .panel-productitem { display: table; width: 100%; }
        .ProductItemDivOne .Col-Image, .ProductItemDivOne .Col-Desc { display: table-row; }
        .ProductItemDivOne .Col-Image { width: 100%; padding-bottom: 30px; }
        .ProductItemDivOne .Col-Desc { width: 100%; }

    .ProductItemDivTwo { width: 100%; display: block; }
        .ProductItemDivTwo .panel-productitem { display: table; width: 100%; }
        .ProductItemDivTwo .Col-Image, .ProductItemDivTwo .Col-Desc { display: table-row; }
        .ProductItemDivTwo .Col-Image { width: 100%; padding-bottom: 30px; }
        .ProductItemDivTwo .product-image { max-height: 400px; object-fit: contain; }
        .ProductItemDivTwo .ProductItemSalePercentText { }
        .ProductItemDivTwo .productitem-name { }
        .ProductItemDivTwo .ProductItemRetailPriceText { }
        .ProductItemDivTwo .ProductItemPriceText { }

    .ProductItemDivThree { width: 100%; display: block; }
        .ProductItemDivThree .Col-Image .ProductItemSubBlock.text-center { height: auto; }

    .nav > li > a { padding: 8px 10px; }

    /*-- All Component Change Font Size --*/
    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; }

    /*-- Component Image And Word --*/
    .FileImagePanel { }
    .SalePageImageAndWord .SalePageComponent { }
    .ImageAndWordPanel.Active .ImageAndWordContainer { }
    .ImageAndWordGroup { }
    .ImageAndWordPanel { }
    .ImageAndWord-ImageItem { }
    .ImageAndWord-Background { background-size: cover; }
    .ImageAndWordPanel.Active { }

    .ImageAndWordPanel .ImageAndWord-Left, .ImageAndWordPanel .ImageAndWord-Right { }
    .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 .ImageAndWord-Left { }
    .ImageAndWordPanel.Active .ImageAndWord-Right { padding: 30px 20px 10px; }
    .ImageAndWordPanel .ImageAndWord-Right { }

    /*-- Component Image And Word2 --*/
    .ImageAndWordPanel .ImageAndWord2-Left, .ImageAndWordPanel .ImageAndWord2-Right { }
    .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 .ImageAndWord2-Left { }
    .ImageAndWordPanel.Active .ImageAndWord2-Right { text-align: center; }
    .ImageAndWordPanel .ImageAndWord2-Right { }

    /*-- Component Text --*/
    .TextPanel.Active .ImageAndWordContainer { }
    .TextPanel.Active .Text-Space { }
    .TextPanel .Text-Background { background-size: cover; }
    .TextPanel .TextGroup { }
    .TextPanel .Text-TextItem { }

    .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) /*Screen width 480-600 px */
{
    .icon-btn-move { left: 28%; }
    .ProductItemBuyButton { width: 70%; }
}

@media only screen and (max-width: 479px) /*Screen width lower than 480 px */
{
    .ImageAndWordPanel.Active .ImageAndWord2-Left p { /*font-size: 80% !important;*/ }
    .banner-desktop { display: none; }
    .banner-mobile { display: inline-block; }
    .container { width: 100%; }
    .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: normal; }
    .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; }

    .edit-link, .edit-preview, .edit-property { margin: 15px 2px; width: 92px; height: 40px; font-size: 15px; padding: 5px; border: 2px solid; }
    .icon-edit-add { width: 25px; height: 25px; }
    .icon-edit-link { width: 0; height: 0; }
    .icon-edit-edit { width: 0; height: 0; }
    .icon-edit-view { width: 0; height: 0; }

    .component-edit, .component-up, .component-down, .component-remove, .component-sorting { width: 35px; height: 35px; }

    .btn.btn-primary.btn-lg.dropdown-toggle.edit-default { font-size: 20px; box-shadow: none; background-color: rgba(255,255,255,0); color: #000; text-decoration: underline; margin-top: -20px; }
        .btn.btn-primary.btn-lg.dropdown-toggle.edit-default:hover { color: #0084ff; text-decoration: underline; box-shadow: none; }
    .icon-btn-move { left: 22%; }
    .text-bg-select { font-size: 18px; }
    .sorting-cancel { width: 30px; height: 30px; }
    .CallForPrice { padding: 30px 0; }
        .CallForPrice p { font-size: 22px; }

    h1 { font-size: 28px; }
    h2 { font-size: 24px; }
    h3 { font-size: 16px; }

    .ProductItemCallForPrice { font-size: 18px; }
    .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: normal; }

    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; }

    .edit-link, .edit-preview, .edit-property { margin: 15px 2px; width: 92px; height: 40px; font-size: 15px; padding: 5px; border: 2px solid; }

    .icon-edit-link { width: 0; height: 0; }
    .icon-edit-edit { width: 0; height: 0; }
    .icon-edit-view { width: 0; height: 0; }

    .component-edit, .component-up, .component-down, .component-remove, .component-sorting { width: 35px; height: 35px; }

    .btn.btn-primary.btn-lg.dropdown-toggle.edit-default { font-size: 20px; box-shadow: none; background-color: rgba(255,255,255,0); color: #000; text-decoration: underline; margin-top: -20px; }
        .btn.btn-primary.btn-lg.dropdown-toggle.edit-default:hover { color: #0084ff; text-decoration: underline; box-shadow: none; }
    .icon-btn-move { left: 22%; }
    .text-bg-select { font-size: 18px; }
    .sorting-cancel { width: 30px; height: 30px; }
    .CallForPrice { padding: 30px 0; }
        .CallForPrice p { font-size: 22px; }

    .ExampleComponentLabel { margin-top: 24px; font-size: 14px; }

    /*-- All Component Change Font Size --*/
    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; }

    /*-- Component Image And Word --*/
    .FileImagePanel { }
    .SalePageImageAndWord .SalePageComponent { }
    .ImageAndWordPanel.Active .ImageAndWordContainer { display: block; }
    .ImageAndWordGroup { display: block; }
    .ImageAndWordPanel { }
    .ImageAndWord-ImageItem { }
    .ImageAndWord-Background { background-size: cover; }
    .ImageAndWordPanel.Active { }

    .ImageAndWordPanel .ImageAndWord-Left, .ImageAndWordPanel .ImageAndWord-Right { }
    .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 .ImageAndWord-Left { }
    .ImageAndWordPanel.Active .ImageAndWord-Right { padding: 20px 10px; display: block; word-wrap: break-word; }
    .ImageAndWordPanel .ImageAndWord-Right { }

    /*-- Component Image And Word2 --*/
    .ImageAndWordPanel .ImageAndWord2-Left, .ImageAndWordPanel .ImageAndWord2-Right { }
    .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 .ImageAndWord2-Left { }
    .ImageAndWordPanel.Active .ImageAndWord2-Right { text-align: center; }
    .ImageAndWordPanel .ImageAndWord2-Right { }

    /*-- Component Text --*/
    .TextPanel.Active .ImageAndWordContainer { display: block; }
    .TextPanel.Active .Text-Space { }
    .TextPanel .Text-Background { background-size: cover; }
    .TextPanel .TextGroup { display: block; }
    .TextPanel .Text-TextItem { padding: 20px 10px; display: block; word-wrap: break-word; }

    /*-- Componenet Form */
    .SalePageFormContainer { width: 100% }
  
    .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; }
}

@media only screen and (max-width: 390px) /*Screen width 480-600 px */
{
    .ImageAndWordPanel.Active .ImageAndWord2-Left p { /*font-size: 80% !important;*/ }
    .icon-btn-move { left: 15%; }
}

@media only screen and (max-width: 767px) /* xs Extra Small */
{
    .xs-p0 { padding: 0; }
}

@media only screen and (min-width: 768px) /* sm Small Devices */
{
    .sm-pl0 { padding-left: 0; }
    .sm-pr0 { padding-right: 0; }
}

@media only screen and (min-width: 992px) /* md Medium Devices */
{

}

@media only screen and (min-width: 1200px) /* lg Large Devices */
{
}
